@font-face {
  font-family: "PX Display";
  src: url("/studio/type/barlow-condensed-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "PX Sans";
  src: url("/studio/type/dm-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "PX Sans";
  src: url("/studio/type/dm-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
html:root {
  --px-ink: #111119;
  --px-blue: #3737e5;
  --px-lime: #caff36;
  --px-text: "PX Sans", "Segoe UI", sans-serif;
  --px-display: "PX Display", "Arial Narrow", sans-serif;
  --studio-lime: var(--px-lime);
  --studio-ink: var(--px-ink);
  --signal: var(--px-blue);
  --trace: #525ef5;
  --title-tone: linear-gradient(105deg,#3434db,#6440bf);
}
html:root:not(.dark) {
  --background: 240 11% 99%;
  --foreground: 240 19% 8%;
  --card: 0 0% 100%;
  --primary: 240 77% 56%;
  --primary-hover: 240 68% 44%;
  --primary-foreground: 0 0% 100%;
  --primary-light: 235 100% 96%;
  --muted: 240 8% 95%;
  --muted-foreground: 240 6% 36%;
  --secondary: 240 8% 94%;
  --secondary-foreground: 240 15% 14%;
  --accent: 237 100% 94%;
  --accent-foreground: 240 65% 35%;
  --border: 240 7% 85%;
  --gradient-brand: linear-gradient(110deg,#3030cf,#5136dc);
  --gradient-subtle: linear-gradient(110deg,#f5f5fa,#fff);
  --pane: #fff;
  --well: #f2f2f6;
  --edge: #dcdce4;
  --ink-soft: #50505c;
}
html.dark {
  --background: 240 14% 8%;
  --foreground: 240 12% 97%;
  --card: 240 12% 12%;
  --primary: 74 100% 60%;
  --primary-foreground: 240 19% 8%;
  --accent: 240 16% 21%;
  --accent-foreground: 240 15% 94%;
  --border: 240 9% 26%;
  --gradient-brand: linear-gradient(110deg,#caff36,#ddff83);
}
@media screen {
  body .ch-nav {
    background: white;
    color: var(--px-ink);
    border-color: #dedee5;
    font-family: var(--px-text);
  }
  .ch-nav .ch-menu { background: white; border-color: #dedee5; box-shadow: 0 14px 25px #15142619; }
  .ch-nav .ch-menu strong, .ch-nav details[open] summary { color: var(--px-blue); }
  .ch-nav .ch-account .ch-sign { background: var(--px-ink); color: white !important; border-radius: 7px; }
  .ch-nav .ch-brand { font-family: var(--px-text); }
  body .ch-home { background: white; color: var(--px-ink); font-family: var(--px-text); }
  .ch-home .ch-hero {
    display: grid;
    grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr);
    align-items: center;
    gap: clamp(16px,3vw,48px);
    padding: clamp(22px,3vw,46px) max(4%,calc((100vw - 1400px)/2));
    background: radial-gradient(ellipse at 4% 100%,#242141 0,transparent 53%),#101016;
    color: white;
  }
  .ch-intro { min-width: 0; }
  .ch-home .ch-hero h1 {
    font: 800 clamp(70px,7.6vw,120px)/.86 var(--px-display);
    letter-spacing: -.025em;
    text-transform: uppercase;
  }
  .ch-home .ch-hero h1 em { font: inherit; color: var(--px-lime); }
  .ch-home .ch-hero p { margin: 16px 0 19px; color: #dedee7; max-width: 45ch; font-size: clamp(14px,1.12vw,18px); }
  .ch-home .ch-search { border-radius: 9px; max-width: 510px; }
  .ch-home .ch-search select { width: 86px; }
  .ch-home .ch-search button { background: var(--px-blue); border-radius: 6px; }
  .ch-quick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
  .ch-quick a { color: white; font-size: 12px; border: 1px solid #60606d; border-radius: 20px; padding: 4px 12px; }
  .ch-quick a:hover { border-color: var(--px-lime); color: var(--px-lime); }
  .ch-feature {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: #141419;
    isolation: isolate;
  }
  .ch-feature img { width: 100%; aspect-ratio: 1.83; display: block; object-fit: cover; }
  .ch-feature span { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; color: white; padding: 36px 18px 13px; font: 700 15px var(--px-text); background: linear-gradient(transparent,#060608c9); }
  .ch-feature b { border: 1px solid #fff9; border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; }
  .ch-home .ch-section,.ch-home .ch-foot { width: min(92%,1400px); }
  .ch-home .ch-section h2,.rl .rl-count h2,.rl main .rl-detailhead h2 {
    font: 800 clamp(28px,3vw,46px)/1 var(--px-display);
    letter-spacing: -.015em;
  }
  .ch-home .ch-heading a { color: var(--px-blue); }
  .ch-home .ch-print-shelf .ch-frame { background: transparent; padding: 0; aspect-ratio: auto; border-radius: 7px; }
  .ch-home .ch-print-shelf img { width: 100%; height: auto; filter: none; }
  .ch-home .ch-format-grid a>div { background: #f2f2f6; padding: 0; }
  .ch-home .ch-icons { background: #5f62fc; }
  .ch-home .ch-type { background: #caff36; color: #141419; }
  .ch-home .ch-wave { background: #ff653d; }
  .ch-home .ch-wave i { background: #25121b; }
  .ch-home .ch-ai { background: var(--px-ink); color: white; width: 100%; padding: 32px max(4%,calc((100vw - 1400px)/2)); margin-top: 24px; }
  .ch-ai .ch-heading a { color: var(--px-lime); }
  .ch-home .ch-ai p,.ch-home .ch-tool-grid small { color: #d2d2dd; }
  .ch-home .ch-tool-grid a { background: #202029; color: white; border-color: #3d3d48; }
  .ch-tool-grid a>span { color: var(--px-lime); }
  .ch-section .ch-directory h3 { color: var(--px-blue); }
  body .rl,body .px-icons,body.px-stock,body.px-collection { background: #fafafd; color: var(--px-ink); font-family: var(--px-text); }
  .rl .rl-hero { min-height: 0; padding-block: 30px 18px; }
  .rl main h1,.px-icons main h1,body.px-stock main h1,
  body.px-collection main>h1,body.px-collection main section>h1,.free-page>h1,.workspace-shell .studio-page h1 {
    font: 800 clamp(42px,5vw,76px)/.98 var(--px-display);
    letter-spacing: -.025em;
  }
  .rl main h1,.px-icons main h1,body.px-stock main h1,body.px-collection main>h1 { color: var(--px-ink); }
  .rl h1 span,.rl main a,.px-icons .px-collection-links a { color: var(--px-blue); }
  .rl .rl-tabs button[aria-pressed=true] { border-color: var(--px-blue); }
  .rl .rl-shortcuts button[aria-pressed=true],.px-icons .px-tabs a[aria-current] { background: var(--px-ink); color: white; border-color: var(--px-ink); }
  .rl .rl-more,.rl .rl-native button,.rl .rl-detailhead button,.px-icons .px-primary,.px-stock main button,.px-stock .next { background: var(--px-blue)!important; color: white; }
  .rl-card:hover,.px-icons .px-grid a:hover { border-color: var(--px-blue); }
  html.pw-on { --pw-paper:#ededf2; --pw-line:#dddde5; --pw-ink:var(--px-ink); }
  .pw-frame .pw-top { background: var(--px-ink); }
  .pw-frame .pw-top .pw-export { background: var(--px-lime); color: var(--px-ink); }
  .pw-frame .pw-rail { background: #fafafd; }
  .pw-frame .pw-rail .pw-button[aria-pressed=true],.pw-frame .pw-layers .pw-button[aria-pressed=true] { background: var(--px-blue); color: white; }
  .pw-on .pw-file-face,.pw-frame button.pw-media-upload { background: var(--px-blue); }
  .pw-on .pw-file:hover .pw-file-face,.pw-frame button.pw-media-upload:hover { background: #2828ad; }
  .pw-frame .pw-thumb[aria-current=page]:after { box-shadow: inset 0 0 0 2px var(--px-blue); }
  .pw-on .pw-boundary { border-color: var(--px-blue); }
  .pw-on .pw-settings input[type=range] { accent-color: var(--px-blue); }
  .workspace-shell .studio-rail, .workspace-shell .studio-page { font-family: var(--px-text); }
  .ch-home :focus-visible,.ch-nav :focus-visible { outline: 3px solid #727bff; outline-offset: 3px; }
}
@media screen and (max-width:650px) {
  .ch-home .ch-hero { grid-template-columns: 1fr; gap: 18px; padding: 24px 4% 18px; }
  .ch-home .ch-hero h1 { font-size: clamp(59px,13vw,78px); }
  .ch-home .ch-hero h1 br { display: initial; }
  .ch-home .ch-hero h1 em:before { content: none; }
  .ch-feature img { aspect-ratio: 2.85; }
  .ch-home .ch-hero p { margin: 12px 0 14px; }
}
@media screen and (prefers-reduced-motion:no-preference) {
  .ch-feature img { transition: transform .45s ease; }
  .ch-feature:is(:hover,:focus-visible) img { transform: scale(1.035); }
  .ch-home .ch-search button { transition: background .2s; }
  .ch-home .ch-search button:hover { background: #2525b1; }
}
@media screen {
  #root { font-family: var(--px-text); }
  #root .studio-page .px-editor-heading h1, #root .px-guide-lead h1,
  #root .px-pricing h1, #root .free-page h1 {
    font: 800 clamp(42px,5vw,76px)/.98 var(--px-display);
    letter-spacing: -.025em;
  }
  .px-pricing section>details { padding: 14px 0; border-top: 1px solid hsl(var(--border)); }
  .px-pricing section>details summary { cursor: pointer; font-weight: 700; }
  .px-pricing header p { max-width: 57ch; }
  .px-stock article .meta { color: #454550; }
  .px-stock main form input { border-color: #bcbcc7; border-radius: 8px; }
  .px-stock main article button { border-radius: 7px; }
  .rl main .rl-shortcuts a { text-decoration: none; }
}
@media screen and (max-width:650px) {
  .rl main .rl-shortcuts { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-block: 4px 8px; }
  .rl main .rl-shortcuts>* { flex: none; white-space: nowrap; }
}

@media screen {
  .ch-nav .ch-menus summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    min-height: 38px;
    border-radius: 8px;
    line-height: 1.25;
  }
  .ch-nav .ch-menus { gap: clamp(2px,1vw,16px); }
  .ch-nav .ch-menus summary::after, :is(.px-pricing,.px-controls,.pw-settings) details>summary::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: none;
    background-color: currentColor;
    mask: url("/chevron-down.svg") center / contain no-repeat;
  }
  .ch-nav details[open]>summary::after, :is(.px-pricing,.px-controls,.pw-settings) details[open]>summary::after { transform: rotate(180deg); }
  .ch-nav .ch-menus summary:hover { background-color: #f3f3f7; }
  .ch-nav .ch-menus details[open]>summary { background: #eeeeff; color: #3434b6; }
  .ch-nav .ch-menu { color: var(--px-ink); grid-template-columns: repeat(var(--menu-columns,3),minmax(0,1fr)); gap: 24px; }
  .ch-nav .ch-menu strong { display: block; padding: 5px 8px 9px; color: #545461; }
  .ch-nav .ch-menu section>a { border-radius: 5px; margin: 0; padding: 7px 8px; line-height: 1.25; }
  .ch-nav .ch-menu section>a:is(:focus-visible,:hover) { background: #f2f2fa; color: #2828aa; text-decoration: none; }
  :is(.px-pricing,.px-controls,.pw-settings) details>summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  }
  :is(.px-pricing,.px-controls,.pw-settings) details>summary::-webkit-details-marker { display: none; }
  :is(.px-pricing,.px-controls,.pw-settings) details>summary::after { margin-left: auto; }
  :is(.ch-search,.rl,.px-icons,.px-controls,.free-controls,.pw-settings,.pw-panel,.px-collection) select:not([multiple]):not([size]) {
    appearance: none;
    background-image: url("/chevron-down.svg");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 30px;
  }
}
@media screen and (min-width:851px) {
  .ch-nav .ch-menu {
    left: clamp(16px,4vw,64px); right: auto;
    width: min(calc(var(--menu-columns,3) * 225px),calc(100% - 80px));
    padding: 16px; border-radius: 0 0 12px 12px;
  }
}
@media screen and (max-width:850px) {
  .ch-nav .ch-menu { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: min(64vh,510px); padding: 12px; gap: 12px; }
  .ch-nav .ch-menus summary { padding-inline: 4px; gap: 2px; }
}
@media screen and (max-width:375px) {
  .ch-nav .ch-menus summary { font-size: 12px; }
}
@media (forced-colors: active) {
  :is(.ch-search,.rl,.px-icons,.px-controls,.free-controls,.pw-settings,.pw-panel,.px-collection) select:not([multiple]):not([size]) {
    appearance: auto; background-image: none; padding-right: .5em;
  }
  .ch-nav .ch-menus summary::after, :is(.px-pricing,.px-controls,.pw-settings) details>summary::after { background-color: ButtonText; forced-color-adjust: none; }
}