
@font-face {
  font-family: "Mona Sans";
  src: url("/studio/type/mona-sans.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/studio/type/martian-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}
html:root {
  --px-text: "Mona Sans", system-ui, sans-serif;
  --px-display: var(--px-text);
  --px-mono: "Martian Mono", ui-monospace, monospace;
  --px-ease: cubic-bezier(.2,.75,.2,1);
}
@media screen {
  body .ch-nav {background:black;color:white;border-bottom:1px solid #ffffff30}
  .ch-nav .ch-brand {letter-spacing:-.055em;font-weight:680}
  .ch-nav .ch-menu {border-radius:18px;color:black;padding:18px}
  .ch-nav .ch-menus summary {border-radius:30px;color:white;font-weight:540}
  .ch-nav .ch-menus summary:hover,.ch-nav .ch-menus details[open]>summary {background:#242424;color:var(--px-lime)}
  .ch-nav .ch-menu strong,.ch-section .ch-directory h3 {font:500 10px/1.5 var(--px-mono);text-transform:uppercase;letter-spacing:.06em}
  .ch-nav .ch-menu section>a {border-radius:8px}
  .ch-nav .ch-account .ch-sign {background:var(--px-lime);color:black!important;border-radius:100px}
  .ch-nav .px-search-launch {display:inline-flex;align-items:center;gap:.5em;color:white;background:none;border:1px solid #ffffff40;border-radius:100px;padding:8px 12px;cursor:pointer}
  .px-search-launch span {display:inline-block;width:14px;height:14px;border:1.5px solid;border-radius:50%;position:relative;font-size:0}
  .px-search-launch span::after {content:"";position:absolute;bottom:-2px;right:-3px;width:6px;border-bottom:1.5px solid;transform:rotate(45deg)}
  .px-search-launch kbd,.px-command kbd {font:400 10px var(--px-mono);opacity:.8}
  body .ch-home .ch-hero {position:relative;isolation:isolate;background:black;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);padding-block:clamp(34px,5vw,86px);overflow:hidden}
  .ch-hero::before {content:"";pointer-events:none;position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,#ffffff35 .8px,transparent 1px);background-size:8px 8px;mask-image:linear-gradient(105deg,transparent 8%,black 66%,transparent)}
  .ch-home .ch-hero h1 {text-transform:none;font-weight:560;font-size:clamp(58px,7.4vw,112px);line-height:.91;letter-spacing:-.074em;margin:0}
  .ch-home .ch-hero h1 span,.ch-home .ch-hero h1 em {display:inline-block}
  .ch-home .ch-hero h1 em {font-weight:380}
  .ch-home .ch-hero p {font-size:clamp(15px,1.35vw,21px);line-height:1.45;max-width:36ch;margin:20px 0}
  .ch-home .ch-search {border-radius:100px;padding:5px 6px 5px 12px}
  .ch-home .ch-search button {border-radius:50%;flex:none}
  .ch-quick a {font:450 10px/1.6 var(--px-mono);letter-spacing:-.03em}
  .px-visually-hidden,.px-choice {position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
  .px-deck {min-width:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;margin:0;border:1px solid #ffffff40;border-radius:24px;padding:7px 7px 10px;background:#111;color:white;position:relative}
  .px-deck label {order:1;border:1px solid transparent;padding:7px 11px;cursor:pointer;border-radius:30px;font:450 11px/1.2 var(--px-mono);color:white}
  .px-choice:checked+label {background:var(--px-lime);color:black}
  .px-choice:focus-visible+label {outline:2px solid white;outline-offset:2px}
  .px-viewport {position:relative;overflow:hidden;isolation:isolate;width:100%;aspect-ratio:1.92;border-radius:18px;background:black;margin-bottom:5px}
  .px-exhibit {position:absolute;inset:0;display:none;overflow:hidden}
  #preview-studio:checked~.px-viewport .px-studio,#preview-photo:checked~.px-viewport .px-photo,
  #preview-print:checked~.px-viewport .px-print,#preview-glyph:checked~.px-viewport .px-glyph {display:block}
  .px-plate {width:100%;height:100%;display:block;object-fit:cover}
  .px-print {background:repeating-linear-gradient(135deg,#161616 0 1px,#252525 1px 14px)}
  .px-print .px-plate {object-fit:contain;padding:7px}
  .px-exhibit-link {position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;padding:26px 16px 10px;background:linear-gradient(transparent,#000b);color:white;font:540 14px var(--px-text)}
  .px-exhibit-link b {display:grid;place-items:center;width:30px;height:30px;border:1px solid #ffffff90;border-radius:50%}
  .px-glyphs {height:100%;width:100%;padding:6% 22% 8%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,minmax(0,1fr));justify-items:center;gap:7%;background:var(--px-lime)}
  .px-glyphs img {height:100%;max-width:100%;filter:brightness(0)}
  .ch-home .ch-section {padding-block:clamp(32px,4vw,64px) 12px}
  .ch-home .ch-section h2,body .rl main h1,body .px-icons main h1,#root .px-guide-lead h1,
  #root .px-pricing h1,#root .free-page h1,#root .studio-page .px-editor-heading h1,body.ch-asset main h1 {font-family:var(--px-display);font-weight:550;letter-spacing:-.061em;line-height:1.01}
  .ch-home .ch-heading {border-block-start:1px solid #0003;padding-top:16px;align-items:center}
  .ch-home .ch-heading a {font:470 11px var(--px-mono);letter-spacing:-.055em;text-decoration:none}
  .ch-home :is(.ch-shelf,.ch-format-grid,.ch-cards) a strong {font-weight:570;letter-spacing:-.03em}
  .ch-home .ch-ai .ch-heading {border-color:#ffffff44}
  .ch-home .ch-ai .ch-heading a {color:var(--px-lime)}
  .ch-home .ch-foot {padding-bottom:36px}
  .rl-count>span,.px-icons .px-count,.photos .facts,.pw-frame .pw-status {font-family:var(--px-mono);font-size:11px}
  .rl .rl-filters input,.px-icons .px-search input {font-family:var(--px-text)}
  .rl main .rl-search,.px-icons .px-search {border-radius:24px}
  .px-icons .px-grid>a,.rl .rl-card,.photos .tile {border-radius:14px}
  .pw-frame .pw-panel,.workspace-shell .studio-rail {font-family:var(--px-text)}
  .px-command {position:fixed;inset:0;margin:auto;width:min(520px,calc(100vw - 24px));max-height:80dvh;box-sizing:border-box;padding:18px;background:white;color:black;border:1px solid #0003;border-radius:22px;box-shadow:0 22px 70px #0005;font-family:var(--px-text)}
  .px-command::backdrop {background:#000a}
  .px-command header,.px-command form {display:flex;align-items:center;gap:8px;margin:0 0 12px}
  .px-command h2 {font:560 24px/1.15 var(--px-display);margin:0 auto 0 0;letter-spacing:-.05em}
  .px-command button {background:white;color:black;border:1px solid #0003;border-radius:25px;padding:8px 14px;cursor:pointer}
  .px-command form {border:1px solid black;border-radius:30px;padding:4px}
  .px-command input {width:0;min-width:0;flex:1;border:0;background:white;color:black;padding:8px}
  .px-command form button {background:var(--px-lime);color:black}
  .px-command nav {display:grid;gap:2px}
  .px-command nav a {display:flex;align-items:center;justify-content:space-between;color:black;text-decoration:none;border-radius:10px;padding:9px 12px}
  .px-command nav a:is(:hover,:focus-visible) {background:black;color:var(--px-lime)}
}
@media screen and (max-width:850px) {
  .px-search-launch kbd,.ch-nav .px-search-launch {display:none}
  body .ch-home .ch-hero {gap:20px}
}
@media screen and (max-width:650px) {
  body .ch-home .ch-hero {grid-template-columns:1fr;padding-block:26px}
  .ch-home .ch-hero h1 {font-size:clamp(53px,12.7vw,78px)}
  .ch-home .ch-hero p {margin:13px 0}
  .px-viewport {aspect-ratio:2.15}
  .px-deck label {padding:7px 9px}
  .ch-home .ch-heading a {max-width:38%;white-space:normal;text-align:right}
}
@media screen and (prefers-reduced-motion:no-preference) {
  .ch-hero h1 span,.ch-hero h1 em {animation:px-title-in .66s var(--px-ease) backwards}
  .ch-hero h1 em {animation-delay:90ms}
  .px-exhibit {animation:px-plate-in .36s var(--px-ease)}
  .px-studio .px-plate {animation:px-drift 7s var(--px-ease) 1 both}
  .ch-nav .ch-menu,.px-command[open] {animation:px-menu-in .18s var(--px-ease)}
  .ch-home .ch-heading,.ch-home .ch-frame,.ch-home .ch-cover,.rl .rl-card,.px-icons .px-grid a,.photos .tile,.ch-tool-grid a,.px-exhibit-link b {transition:transform .24s var(--px-ease),box-shadow .24s}
  @media (hover:hover) {
    .ch-shelf a:hover .ch-frame,.ch-cards a:hover .ch-cover,.rl .rl-card:hover,.px-icons .px-grid a:hover,.ch-tool-grid a:hover {transform:translateY(-3px);box-shadow:0 6px 16px #0002}
    .px-exhibit:hover .px-exhibit-link b {transform:rotate(45deg)}
    .ch-home .ch-wave:hover i {animation:px-bars .65s ease-in-out 2 alternate;transform-origin:center}
    .ch-home .ch-wave i:nth-child(3n) {animation-delay:.12s}
  }
  @supports (animation-timeline:view()) {
    .ch-home .ch-section .ch-heading {animation:px-section-in linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
@keyframes px-title-in {from{transform:translateY(20%);opacity:.1}to{transform:none;opacity:1}}
@keyframes px-menu-in {from{transform:translateY(-5px);opacity:.4}to{transform:none;opacity:1}}
@keyframes px-plate-in {from{clip-path:inset(0 0 8% 0 round 12px);opacity:.65}to{clip-path:inset(0);opacity:1}}
@keyframes px-drift {from{transform:scale(1.075) translateX(-1.2%)}to{transform:scale(1)}}
@keyframes px-bars {to{transform:scaleY(.44)}}
@keyframes px-section-in {from{transform:translateY(10px)}to{transform:none}}

@media screen {
  .ch-hero::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; background-image:radial-gradient(circle,var(--px-lime) .9px,transparent 1.35px);background-size:9px 9px; opacity:.33; mask-image:radial-gradient(ellipse 24% 55% at var(--spot-x,58%) var(--spot-y,60%),black,transparent); }
  .ch-nav .ch-menus {align-items:center}
  .px-command input:focus-visible {outline:2px solid black;outline-offset:-2px;border-radius:20px}
}
@media screen and (max-width:850px) {
  .ch-nav .ch-account .px-search-launch {display:grid;place-items:center;padding:0;width:32px;height:32px;font-size:0;gap:0}
  .ch-nav .ch-account .px-search-launch kbd {display:none}
}

@media screen {
  body .ch-nav .ch-brand,body .ch-nav .ch-account>a:not(.ch-sign) {color:white}
  .rl .rl-hero {border-bottom:1px solid #0002;padding-block:clamp(28px,4vw,58px)}
  .rl .rl-tabs button,.px-icons .px-tabs a,.photos .subjects a {font-weight:540}
  .rl main .rl-count {border-top:1px solid #0002;padding-top:14px}
  .px-pricing header,.workspace-shell .px-editor-heading {border-bottom:1px solid #0003;padding-bottom:clamp(16px,2vw,28px)}
  .px-pricing :is(article,section.rounded-xl),.px-editor .px-controls,.px-editor .px-monitor,.free-directory a {border-radius:18px}
  .px-editor .px-action,.free-page .px-action,.pw-frame .pw-export {border-radius:100px}
  .px-editor .px-monitor {overflow:hidden}
  .px-editor .px-controls label,.px-pricing summary,.free-directory a {font-family:var(--px-text)}
  .pw-frame .pw-top {border-bottom:1px solid #ffffff32}
  .pw-frame .pw-panel h2,.pw-frame .pw-top {letter-spacing:-.026em}
  .pw-frame .pw-rail .pw-button {border-radius:12px}
  .photos .subjects .chip,.photos .tags a {font-family:var(--px-mono);font-size:11px}
  .photos .viewer h1 {font:570 clamp(24px,2.6vw,40px)/1.06 var(--px-display);letter-spacing:-.045em}
  .photos .viewer aside,.photos .viewer figure {border:1px solid #fff3;border-radius:20px}
}
@media screen and (prefers-reduced-motion:no-preference) {
  .px-pricing header h1,.rl-hero h1,.px-icons main>h1,.free-page>h1,.px-editor-heading h1,.photos .viewer h1 {animation:px-title-in .38s var(--px-ease)}
  .pw-frame .pw-panel,.ch-menu section {animation:px-menu-in .22s var(--px-ease)}
  .ch-menu section:nth-child(2){animation-delay:35ms}
  .ch-menu section:nth-child(3){animation-delay:60ms}
}
