:root{
  /* surfaces and text */
  --canvas:#0A0A0B; --surface:#111113; --raised:#19191C;
  --text:#F1F0EC; --text-2:#B6B4B0; --text-3:#92918D;
  --divider:rgba(255,255,255,.10); --border:rgba(255,255,255,.20); --border-ctl:rgba(255,255,255,.36);
  /* the names the rest of this sheet uses */
  --bg:var(--canvas); --bg-2:var(--surface); --bg-3:var(--raised); --line:var(--divider); --line-2:var(--border);
  --fg:var(--text); --fg-2:var(--text-2); --muted:var(--text-3); --ok:#6CCB9A;
  --font:'Hanken Grotesk', 'Hanken Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* type: display, reading, utility */
  --t-hero:clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem);
  --t-section:clamp(1.75rem, 1.2rem + 1.7vw, 3rem);
  --t-feature:clamp(1.375rem, 1.1rem + .8vw, 2rem);
  --t-lead:clamp(1.0625rem, .98rem + .38vw, 1.25rem);
  --t-body:1rem; --t-utility:.8125rem;
  /* shape and space */
  --r-ctl:7px; --r-media:14px; --r:12px; --r-s:7px;
  --max:1320px; --pad:clamp(20px, 4.4vw, 72px); --gap:24px;
  --sec:clamp(72px, 4vw + 56px, 128px);
  /* motion */
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --d-btn:.15s; --d-sel:.2s; --d-card:.28s; --d-panel:.26s; --d-feat:.6s; --d-enter:.45s;
}
/* metric matched fallback so text does not reflow when Hanken Grotesk arrives */
@font-face{font-family:'Hanken Fallback';src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');size-adjust:101.84%;ascent-override:98.19%;descent-override:29.75%;line-gap-override:0%}
/* the light weight sets narrower than Arial: a second fallback face for 300 keeps display lines wrapping where they will once the font arrives */
@font-face{font-family:'Hanken Fallback';font-weight:300;src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');size-adjust:97.8%;ascent-override:102.3%;descent-override:31%;line-gap-override:0%}
*{box-sizing:border-box}
/* the hidden attribute always wins over a component's own display (cards are grids, so filtered cards stayed on screen) */
[hidden]{display:none !important}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.55;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:300;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
h3,h4{font-weight:500;letter-spacing:-.01em;line-height:1.3}
strong{font-weight:500}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:4px}
[id]{scroll-margin-top:84px}
::selection{background:rgba(242,241,238,.22)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.muted{color:var(--muted)}
.small{font-size:14px;line-height:1.5}
.lead{font-size:19px;line-height:1.5;color:var(--fg-2);max-width:56ch}
.eyebrow{font-size:14px;color:var(--muted);margin-bottom:18px}
.skip{position:absolute;left:12px;top:-64px;z-index:100;background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:6px;font-weight:500}
.skip:focus{top:12px}
.sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--r-s);font-size:14.5px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;border:1px solid transparent;transition:background-color var(--d-btn) var(--ease),border-color var(--d-btn) var(--ease),color var(--d-btn) var(--ease)}
.btn--primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn--primary:hover{background:#fff}
.btn--ghost{border-color:var(--line-2);color:var(--fg)}
.btn--ghost:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.03)}
.btn--lg{min-height:46px;padding:0 20px;font-size:15.5px}
.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.link{color:var(--fg);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(242,241,238,.35);transition:text-decoration-color var(--d-btn) var(--ease)}
.link:hover{text-decoration-color:var(--fg)}
.arrow::after{content:none}

/* header: quiet chrome, readable inactive links, the active one marked by colour and a fine rule rather than a pill */
.hdr{position:sticky;top:0;z-index:50;background:rgba(10,10,11,0);border-bottom:1px solid transparent;transition:background-color var(--d-panel) var(--ease),border-color var(--d-panel) var(--ease)}
.hdr.on{background:rgba(10,10,11,.94);border-bottom-color:var(--divider)}
.hdr__in{display:flex;align-items:center;gap:36px;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.02em;line-height:1}
.brand svg{width:21px;height:21px}
.hdr nav{display:flex;gap:26px;align-self:stretch}
.hdr nav a{position:relative;display:flex;align-items:center;font-size:14.5px;color:var(--text-2);transition:color var(--d-sel) var(--ease)}
.hdr nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--text);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d-sel) var(--ease)}
.hdr nav a:hover{color:var(--text)}
.hdr nav a[aria-current="page"]{color:var(--text)}
.hdr nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr__right{margin-left:auto;display:flex;align-items:center;gap:10px}
.search{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px 0 12px;border:1px solid var(--divider);border-radius:var(--r-ctl);color:var(--text-3);font-size:14px;min-width:210px;transition:border-color var(--d-btn) var(--ease),background-color var(--d-btn) var(--ease)}
.search:hover{border-color:var(--border)}
.search:focus-within{border-color:var(--text-2);box-shadow:0 0 0 1px var(--text-2);background:var(--surface)}
.search svg{width:15px;height:15px;flex:none}
.search input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:inherit;outline:none}
.search input::placeholder{color:var(--text-3)}
.search kbd{font:inherit;font-size:12px;color:var(--text-3);border:1px solid var(--divider);border-radius:4px;padding:1px 5px}
/* the library has its own search in the toolbar, so the header one steps aside there */
[data-path="library/"] .hdr__right .search{display:none}
.menu{display:none;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--border);border-radius:var(--r-ctl);font-size:14.5px;font-weight:500}
.menu i{display:block;width:14px;height:1.5px;background:currentColor;position:relative;transition:transform var(--d-panel) var(--ease),background-color var(--d-btn) var(--ease)}
.menu i::before,.menu i::after{content:"";position:absolute;left:0;width:100%;height:100%;background:currentColor;transition:transform var(--d-panel) var(--ease)}
.menu i::before{top:-4.5px}.menu i::after{top:4.5px}
html.nav-open .menu i{background:transparent}
html.nav-open .menu i::before{transform:translateY(4.5px) rotate(45deg)}
html.nav-open .menu i::after{transform:translateY(-4.5px) rotate(-45deg)}
.mnav{display:none}
@media (max-width:900px){
  .hdr nav,.hdr__in .search,.hdr__right .btn--ghost{display:none}
  .menu{display:inline-flex}
  .hdr{background:rgba(10,10,11,.96)}
  .hdr__right .btn--primary{min-height:44px}
  .mnav{display:block;position:fixed;left:0;right:0;top:64px;bottom:0;overflow:auto;background:var(--canvas);border-top:1px solid var(--divider);padding:8px var(--pad) 32px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity var(--d-panel) var(--ease),transform var(--d-panel) var(--ease);z-index:49}
  html.nav-open .mnav{opacity:1;transform:none;pointer-events:auto}
  html.nav-open{overflow:hidden}
  .hdr .mnav nav{display:grid;gap:0}
  .hdr .mnav nav a{display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:0;border-bottom:1px solid var(--divider);font-size:18px;color:var(--text)}
  .hdr .mnav nav a::after{position:static;content:"";width:7px;height:7px;background:none;border-top:1.5px solid var(--text-3);border-right:1.5px solid var(--text-3);transform:rotate(45deg)}
  .hdr .mnav nav a[aria-current="page"]{color:var(--text-3)}
  .hdr .mnav .search{display:flex;width:100%;height:48px;margin-top:20px}
  .hdr .mnav .btn{display:inline-flex;margin-top:12px;width:100%;min-height:48px}
}

/* hero: one editorial composition, copy on five columns and the artwork on seven */
.hero{padding:clamp(28px,5vw,88px) 0 var(--sec)}
.hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto;column-gap:var(--gap);align-items:center}
.hero__copy{grid-column:1 / span 5;grid-row:1;align-self:end}
.hero__fig{grid-column:6 / span 7;grid-row:1 / span 2;margin:0;align-self:center}
.hero__act{grid-column:1 / span 5;grid-row:2;align-self:start}
.hero h1{font-size:var(--t-hero);font-weight:300;letter-spacing:-.04em;line-height:1.02;max-width:none}
.hero h1 b{font-weight:500}
.hero .lead{margin-top:clamp(20px,2vw,28px);max-width:40ch}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(24px,2.4vw,36px)}
.hero__note{margin-top:22px;font-size:var(--t-utility);line-height:1.55;color:var(--text-3);max-width:46ch}
.frame{position:relative;aspect-ratio:4/3;border-radius:var(--r-media);overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px var(--divider)}
.frame img,.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame__item{position:absolute;inset:0;opacity:0;transition:opacity var(--d-feat) var(--ease)}
.frame__item.on{opacity:1}
.frame__item video{opacity:0;transition:opacity var(--d-feat) var(--ease)}
.frame__item.playing video{opacity:1}
/* caption rail: what is showing, where it lives, and a small filmstrip to choose another */
.rail{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 24px;margin-top:16px}
.rail__cap{display:grid;gap:4px;min-width:0}
.rail__meta{display:flex;gap:14px;font-size:var(--t-utility);color:var(--text-3)}
.rail__cap b{font-size:var(--t-feature);font-weight:400;letter-spacing:-.02em;line-height:1.15}
.rail__line{font-size:14.5px;color:var(--text-2)}
.rail__side{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.rail__side .link{white-space:nowrap}
.thumbs{display:flex;gap:8px}
.thumbs button{position:relative;width:64px;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px var(--divider);opacity:.55;transition:opacity var(--d-sel) var(--ease),box-shadow var(--d-sel) var(--ease)}
.thumbs button img{width:100%;height:100%;object-fit:cover}
.thumbs button:hover{opacity:.85}
.thumbs button[aria-selected="true"]{opacity:1;box-shadow:0 0 0 1px var(--text)}
.thumbs .bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(10,10,11,.55)}
.thumbs .bar b{display:block;height:100%;width:100%;background:var(--text);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.rail__pause{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--border);color:var(--text-2);transition:border-color var(--d-btn) var(--ease),color var(--d-btn) var(--ease)}
.rail__pause:hover{border-color:var(--border-ctl);color:var(--text)}
.rail__pause svg{width:14px;height:14px;fill:none}
.rail__pause .i-play,.rail__pause[aria-pressed="true"] .i-pause{display:none}
.rail__pause[aria-pressed="true"] .i-play{display:inline}
@media (max-width:700px){.rail__pause{width:44px;height:44px}}
@media (max-width:1000px){
  .hero__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .hero__copy,.hero__fig,.hero__act{grid-column:1;grid-row:auto}
  .hero__fig{margin-top:28px}
  .hero__act{margin-top:4px}
  .hero .lead{max-width:52ch}
}
@media (max-width:600px){
  .hero .lead{font-size:17px}
  .rail{grid-template-columns:minmax(0,1fr)}
  .rail__side{justify-content:space-between}
  .hero__actions .btn{flex:1 1 auto}
}

/* sections: one rhythm and a fine divider. Two compositions repeat down the page:
   a head over its media (selected, breakdown, plans, questions) and a split on the hero's twelve columns (try, proof, kinds) */
.section{padding:var(--sec) 0;border-top:1px solid var(--line)}
.section--flush,.section--first{border-top:0;padding-top:0}
.row__head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,2.6vw,40px)}
.row__head h2,.split h2{font-size:var(--t-section)}
.row__head p{color:var(--text-2);margin-top:12px;max-width:54ch}
.row__head .eyebrow{display:flex;gap:14px;margin:0 0 14px;font-size:var(--t-utility);color:var(--text-3)}
@media (max-width:600px){.row__head{flex-direction:column;align-items:flex-start;gap:14px}}
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:28px}
.split__head p:not(.lead){color:var(--text-2);margin-top:12px;max-width:36ch}
.split__head .lead{margin-top:16px}
@media (max-width:1000px){
  .split{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .split > *{grid-column:1 !important;grid-row:auto !important}
}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px var(--gap)}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}

/* layer card: the designed cover, then title and entry number, one sentence, kind and plan */
.card{position:relative;display:grid;gap:14px;align-content:start}
.card__media{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r-media);overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px var(--divider);isolation:isolate}
.card__media img,.card__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--d-card) var(--ease),opacity var(--d-card) var(--ease)}
.card__media video{opacity:0}
.card:hover .card__media img,.card:focus-within .card__media img{transform:scale(1.02)}
.card.playing .card__media video{opacity:1}
.card__media.broken img{display:none}
.card__media.broken::after{content:"Preview unavailable";position:absolute;inset:0;display:grid;place-items:center;font-size:var(--t-utility);color:var(--text-3)}
.card__body{display:grid;gap:6px}
.card__title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card__title h3{font-size:17px;font-weight:500;letter-spacing:-.01em}
.card__title a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--text-3)}
.num{font-size:var(--t-utility);color:var(--text-3);letter-spacing:.01em;white-space:nowrap}
.card__meta{display:flex;align-items:center;gap:8px;margin-top:2px;font-size:13.5px;color:var(--text-3)}
.tier{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:5px;border:1px solid var(--line-2);font-size:12.5px;color:var(--fg-2);line-height:1.5}
.tier--free{color:var(--ok);border-color:rgba(108,203,154,.35)}
.card__sum{font-size:14.5px;line-height:1.5;color:var(--text-2);max-width:46ch}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:s}
.step{padding-top:20px;border-top:1px solid var(--line-2);counter-increment:s}
.step::before{content:counter(s);display:block;font-size:14px;color:var(--muted);margin-bottom:14px}
.step h3{font-size:17px;margin-bottom:8px}
.step p{color:var(--fg-2);font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* selected layers: one large piece on eight columns, two supporting pieces stacked on four.
   The large cover keeps its 4:3; the two beside it take the height it sets */
.sel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:32px var(--gap)}
.sel__item--lg{grid-column:1 / span 8;grid-row:1 / span 2}
.sel__item--lg .card__media{aspect-ratio:4/3;border-radius:var(--r-media)}
.sel__item--lg .card__title h3{font-size:var(--t-feature);font-weight:400;letter-spacing:-.02em;line-height:1.15}
.sel__item--lg .card__sum{font-size:16px;max-width:52ch}
.sel__item:not(.sel__item--lg){grid-column:9 / span 4;display:flex;flex-direction:column;gap:12px;min-height:0}
.sel__item:not(.sel__item--lg) .card__media{flex:1 1 auto;aspect-ratio:auto;min-height:180px}
@media (max-width:1000px){
  .sel{grid-template-rows:none;gap:32px var(--gap)}
  .sel__item--lg{grid-column:1 / -1;grid-row:auto}
  .sel__item:not(.sel__item--lg){grid-column:span 6;display:grid}
  .sel__item:not(.sel__item--lg) .card__media{aspect-ratio:4/3;min-height:0}
}
@media (max-width:600px){
  .sel{grid-template-columns:minmax(0,1fr);gap:28px}
  .sel__item:not(.sel__item--lg){grid-column:1}
  .sel__item:not(.sel__item--lg) .card__media{aspect-ratio:16/10}
}

/* breakdown: three frames of one film, in order, each with a short caption. On phones the row scrolls sideways
   with the next frame showing at the edge; it is never pinned and never takes over the page scroll */
.beats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.beat figure{margin:0;display:grid;gap:14px}
.beat__media{aspect-ratio:1;border-radius:var(--r-media);overflow:hidden;background:var(--beat-bg,var(--surface));box-shadow:inset 0 0 0 1px var(--divider)}
.beat__media img{width:100%;height:100%;object-fit:cover}
.beat figcaption{font-size:15px;line-height:1.5;color:var(--text-2);max-width:42ch}
@media (max-width:600px){
  .beats{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 4px;scroll-padding:0 var(--pad);scrollbar-width:none}
  .beats::-webkit-scrollbar{display:none}
  .beat{flex:0 0 84%;scroll-snap-align:start}
}

/* try a look: a live layer on seven columns, its head and the four steps on five */
.split--media-left .split__media{grid-column:1 / span 7;grid-row:1 / span 2}
.split--media-left .split__head{grid-column:8 / span 5;grid-row:1;align-self:end;padding-left:clamp(0px,2.2vw,40px)}
.split--media-left .split__body{grid-column:8 / span 5;grid-row:2;align-self:start;padding-left:clamp(0px,2.2vw,40px)}
.split--media-left .lead{font-size:var(--t-lead);max-width:40ch}
.try__frame{position:relative;aspect-ratio:16/10;border-radius:var(--r-media);overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px var(--divider)}
.try__frame img,.try__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.try__frame img{object-fit:cover}
.try__frame iframe{pointer-events:none;opacity:0;background:transparent;transition:opacity var(--d-enter) var(--ease)}
.try__frame.live iframe{opacity:1}
.try__bar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px;font-size:var(--t-utility);color:var(--text-3)}
.try__now b{display:inline-block;min-width:9ch;margin-left:6px;font-size:14.5px;font-weight:500;color:var(--text)}
.try__looks{margin-top:12px}
.howto{list-style:none;margin:0;padding:0;counter-reset:h;border-top:1px solid var(--line)}
.howto li{position:relative;counter-increment:h;padding:14px 0 14px 40px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--text-2)}
.howto li::before{content:counter(h);position:absolute;left:0;top:16px;font-size:var(--t-utility);color:var(--text-3)}
.howto b{font-weight:500;color:var(--text)}
.split__body > .link{display:inline-block;margin-top:24px}
@media (max-width:600px){
  .try__frame{aspect-ratio:1}
  .try__bar{flex-direction:column;gap:4px}
}

/* proof: one frame pair at its own size, the score beside it, the method underneath */
.split--head{align-items:start}
.split--head h2{grid-column:1 / span 5}
.split--head .lead{grid-column:7 / span 6;font-size:var(--t-lead);max-width:58ch}
.pair{margin:clamp(36px,3.6vw,56px) 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,264px);gap:var(--gap);align-items:end}
.pair__frames{display:grid;grid-template-columns:repeat(2,minmax(0,461px));gap:16px}
.pair__frame{display:grid;gap:10px;font-size:var(--t-utility);color:var(--text-3)}
.pair__frame img{width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px var(--divider)}
.pair__cap{display:grid;gap:12px;align-content:end;padding-bottom:30px;font-size:14.5px;color:var(--text-2)}
.pair__score{display:grid;gap:4px}
.pair__score b{font-size:var(--t-section);font-weight:300;letter-spacing:-.03em;line-height:1;color:var(--text)}
.pair__score span{font-size:var(--t-utility);color:var(--text-3)}
.facts{margin:clamp(36px,3.6vw,56px) 0 0;display:grid;max-width:920px}
.facts div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{font-size:14px;color:var(--text-3)}
.facts dd{margin:0;font-size:15px;line-height:1.5;color:var(--text-2)}
.proof__more{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px;font-size:15px}
@media (max-width:1000px){.pair{grid-template-columns:minmax(0,1fr)}.pair__cap{padding-bottom:0}}
@media (max-width:600px){.pair__frames{grid-template-columns:minmax(0,1fr)}.facts div{grid-template-columns:minmax(0,1fr);gap:4px}}

/* kinds: a compact index into the library */
.split--index{align-items:start}
.split--index .split__head{grid-column:1 / span 4}
.split--index .split__head .link{display:inline-block;margin-top:22px}
.kinds{grid-column:6 / span 7;list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.kind{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name thumbs" "text thumbs";column-gap:24px;row-gap:4px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.kind__name{grid-area:name;font-size:var(--t-feature);font-weight:300;letter-spacing:-.02em;line-height:1.15;color:var(--text)}
.kind__count{margin-left:12px;font-size:var(--t-utility);font-weight:400;letter-spacing:0;color:var(--text-3)}
.kind__text{grid-area:text;font-size:14.5px;color:var(--text-2);max-width:52ch}
.kind__thumbs{grid-area:thumbs;display:flex;justify-content:flex-end;gap:6px;min-width:228px}
.kind__thumbs img{width:72px;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:6px;box-shadow:0 0 0 1px var(--divider);opacity:.82;transition:opacity var(--d-card) var(--ease)}
.kind:hover .kind__thumbs img,.kind:focus-visible .kind__thumbs img{opacity:1}
.kind:hover .kind__name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--text-3)}
@media (max-width:600px){
  .kind{grid-template-columns:76px minmax(0,1fr);grid-template-areas:"thumbs name" "thumbs text";column-gap:16px;row-gap:2px;align-items:start;padding:16px 0}
  .kind__thumbs{justify-content:flex-start;min-width:0;padding-top:4px}
  .kind__thumbs img{width:76px}
  .kind__thumbs img + img{display:none}
  .kind__name{font-size:21px}
  .kind__text{font-size:14px}
}
.sheet{display:grid;gap:10px;margin:0}
.sheet a{display:block;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);background:var(--bg-2)}
.sheet img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform var(--d-card) var(--ease)}
.sheet a:hover img{transform:scale(1.02)}
.sheet figcaption{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.sheet figcaption b{font-weight:500;color:var(--fg)}
@media (max-width:900px){.proof{grid-template-columns:1fr}}

/* tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:15px}
.table th,.table td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap .table{min-width:640px}
.table th{font-weight:500;color:var(--muted);font-size:13.5px}
.table td.n,.table th.n{text-align:right;padding-right:0}
.table tr:last-child td{border-bottom:0}
.table a{color:var(--fg)}
.table th[scope="row"]{font-weight:400;font-size:15px;color:var(--text-2)}
.table--compare td{color:var(--text)}
@media (max-width:700px){
  .table-wrap--compare .table{min-width:0}
  .table--compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table--compare tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px;padding:16px 0;border-bottom:1px solid var(--line)}
  .table--compare th[scope="row"]{grid-column:1 / -1;padding:0 0 4px;border:0;font-weight:500;color:var(--text)}
  .table--compare td{padding:0;border:0;font-size:14px;line-height:1.45}
  .table--compare td::before{content:attr(data-label);display:block;margin-bottom:3px;font-size:12px;color:var(--text-3)}
}

/* pricing */
/* plans: the same padding and rhythm in each card, prices on one baseline, the lists starting level
   and the actions on one row at the foot of the cards. Pro keeps its existing emphasis, nothing more */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:stretch}
.plan{display:flex;flex-direction:column;padding:28px 28px 30px;border:1px solid var(--line);border-radius:var(--r-media);background:var(--surface)}
.plan--hi{border-color:var(--border);background:var(--raised)}
.plan h3{font-size:15px;font-weight:500;letter-spacing:0}
.plan .price{margin-top:20px;font-size:clamp(2.5rem,2.1rem + 1.1vw,3.25rem);font-weight:300;letter-spacing:-.045em;line-height:1}
.plan .price small{margin-left:8px;font-size:15px;letter-spacing:0;color:var(--text-2)}
.plan .alt{min-height:3.1em;margin-top:12px;font-size:var(--t-utility);line-height:1.55;color:var(--text-3)}
.plan ul{list-style:none;margin:18px 0 28px;padding:20px 0 0;display:grid;gap:10px;border-top:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--text-2)}
.plan li{display:flex;gap:12px}
.plan li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--text-3);margin-top:8px}
.plan .btn{margin-top:auto;align-self:flex-start}
.section--plans{padding-bottom:var(--sec)}
@media (max-width:900px){.plans{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:17px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:10px;height:10px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform var(--d-panel) var(--ease);flex:none;margin-right:4px}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq .faq__a{padding:0 0 22px;color:var(--fg-2);max-width:68ch;font-size:15.5px}

/* footer */
.ftr{border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 32px;margin-top:clamp(24px,3vw,40px)}
.ftr__grid{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:32px}
.ftr h3{margin-bottom:14px;font-size:var(--t-utility);font-weight:500;color:var(--text-2)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14.5px;color:var(--text-3)}
.ftr ul a{display:inline-block;padding:2px 0}
.ftr ul a:hover{color:var(--fg)}
.ftr__brand p{margin-top:14px;max-width:30ch;color:var(--muted);font-size:14.5px}
.ftr__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
@media (max-width:900px){.ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr__brand{grid-column:1/-1}}

/* page heads */
.page-head{padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,40px)}
.page-head h1{font-size:clamp(2.2rem,4vw,3.25rem)}
.page-head .lead{margin-top:16px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted);margin-bottom:22px}
.crumbs a:hover{color:var(--fg)}
.crumbs li{list-style:none;display:flex;gap:8px}
.crumbs li+li::before{content:"/";color:var(--line-2)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}

/* library: kind tabs one tap away, the rest of the filters in a panel, then the status line */
.page-head--lib{padding-bottom:clamp(24px,3vw,36px)}
.page-head--lib .lead{max-width:60ch}
.lib__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.lib__kinds{display:flex;flex-wrap:wrap;gap:0 26px}
.tab{position:relative;display:inline-flex;align-items:baseline;gap:7px;min-height:44px;padding:12px 0 10px;font-size:15px;color:var(--text-2);transition:color var(--d-btn) var(--ease)}
.tab small{font-size:12px;color:var(--text-3)}
.tab:hover{color:var(--text)}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--text);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d-sel) var(--ease)}
.tab[aria-pressed="true"]{color:var(--text)}
.tab[aria-pressed="true"]::after{transform:scaleX(1)}
.lib__tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lib__tools .sort{margin-left:4px}
.lib__search{min-width:240px}
.lib__toggle{gap:8px;min-height:38px;padding:0 14px}
.lib__toggle[aria-expanded="true"]{border-color:var(--border-ctl);background:var(--surface)}
.lib__n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--text);color:var(--canvas);font-size:12px;line-height:20px;text-align:center}
.lib__more{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:20px 40px;margin-top:16px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-media);background:var(--surface)}
.lib__more[hidden]{display:none}
.lib__group{margin:0;padding:0;border:0;min-width:0}
.lib__group legend{padding:0;margin-bottom:10px;font-size:var(--t-utility);color:var(--text-3)}
.lib__group div{display:flex;flex-wrap:wrap;gap:8px}
.lib__status{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;min-height:72px;padding:16px 0 24px}
.lib__count{font-size:14.5px;color:var(--text-2);margin-right:6px}
.lib__count:focus{outline:none}
.lib__active{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.lib__reset{font-size:14px;color:var(--text-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--text-3)}
.lib__reset:hover{color:var(--text)}
@media (max-width:1000px){.lib__more{grid-template-columns:auto minmax(0,1fr)}.lib__group--wide{grid-column:1 / -1}}
@media (max-width:700px){
  .lib__kinds{gap:0 20px}
  .lib__tools{width:100%}
  .lib__search{flex:1 1 100%;min-width:0;height:44px}
  .lib__toggle{min-height:44px;flex:1 1 auto}
  .lib__tools .sort{margin-left:auto}
  .lib__more{grid-template-columns:minmax(0,1fr);padding:18px}
}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border-radius:7px;border:1px solid var(--line);font-size:14px;color:var(--fg-2);transition:border-color var(--d-sel) var(--ease),background-color var(--d-sel) var(--ease),color var(--d-sel) var(--ease)}
.chip:hover{border-color:var(--line-2);color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip small{font-size:12.5px;opacity:.7}
.chip--on{gap:6px;padding:0 8px 0 12px;border-color:var(--border);color:var(--text)}
.chip--on svg{width:14px;height:14px;color:var(--text-3)}
.chip--on:hover svg{color:var(--text)}
.empty{display:grid;justify-items:start;gap:12px;margin:8px 0 24px;padding:clamp(32px,5vw,56px);border:1px solid var(--line);border-radius:var(--r-media)}
.empty[hidden]{display:none}
.empty h2{font-size:var(--t-feature);font-weight:400;letter-spacing:-.02em}
.empty p{color:var(--text-2);max-width:52ch}
.empty .btn{margin-top:8px}

/* layer page */
.page-head--layer{padding-top:clamp(20px,3vw,40px);padding-bottom:0}
.page-head--layer .crumbs{margin-bottom:18px;font-size:var(--t-utility)}
.layer-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 48px;align-items:end;margin-bottom:24px}
.layer-head .meta{display:flex;align-items:center;gap:12px;font-size:var(--t-utility);color:var(--text-3);margin-bottom:12px}
.layer-head h1{font-size:clamp(2.25rem,1.4rem + 2.6vw,3.5rem);letter-spacing:-.035em}
.layer-head .desc{font-size:var(--t-lead);color:var(--text-2);margin-top:12px;max-width:56ch}
.layer-head .actions{display:grid;grid-template-columns:auto auto;gap:10px;align-items:center}
.layer-head .hint{grid-column:1 / -1;font-size:var(--t-utility);color:var(--text-3);max-width:48ch}
/* the stage: one frame, a slim Dusklayer bar on top of the layer, so our controls and the invented brand never mix */
.stage{position:relative;border-radius:var(--r-media);overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px var(--divider)}
.stage__bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:52px;padding:8px 10px;border-bottom:1px solid var(--divider);font-size:var(--t-utility);color:var(--text-3)}
.stage__bar .spacer{flex:1}
.stage__bar .note{padding:0 6px}
.btn--sm{min-height:34px;padding:0 12px;font-size:13.5px}
/* touch screens: the preview does not take the swipe, so the page always scrolls past it.
   Open full page moves to the end of the bar as the main action, and a tap on the preview opens it too */
@media (hover:none){
  .stage .preview__frame{cursor:pointer}
  .stage .preview__frame iframe{pointer-events:none}
  .stage__bar .note{display:none}
  .stage__bar .stage__full{order:3;margin-left:auto;min-height:40px;background:var(--text);border-color:var(--text);color:var(--canvas)}
}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-s);padding:3px;gap:2px}
.seg button{padding:6px 12px;border-radius:5px;font-size:14px;color:var(--fg-2);transition:background-color var(--d-sel) var(--ease),color var(--d-sel) var(--ease)}
.seg button[aria-pressed="true"]{background:rgba(255,255,255,.1);color:var(--fg)}
.preview__frame{position:relative;aspect-ratio:16/9;max-height:min(76vh,760px);background:var(--raised);overflow:hidden;display:grid;place-items:center}
.preview__frame iframe{position:relative;z-index:1;border:0;width:100%;height:100%;background:#000;opacity:0;transition:width .6s var(--ease-io),border-radius .6s var(--ease-io),opacity .3s var(--ease) .16s}
.preview__frame.live iframe{opacity:1}
/* the poster sits under the iframe and never takes the pointer, so wheel, touch and clicks reach the layer.
   When the layer is ready the poster leaves first and the layer fades in after it, so the two never show at once. */
.preview__poster{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:1;pointer-events:none;transition:opacity .16s linear}
.preview__frame.live .preview__poster{opacity:0}
.preview__frame.phone .preview__poster{opacity:0}
.preview__state{position:absolute;z-index:2;left:14px;bottom:12px;font-size:13px;color:var(--fg-2);background:rgba(10,10,11,.72);padding:6px 10px;border-radius:6px;pointer-events:none;transition:opacity .3s}
.preview__frame.live .preview__state{opacity:0;pointer-events:none}
.preview__frame.phone iframe{width:min(390px,100%);height:calc(100% - 32px);border-radius:28px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 60px rgba(0,0,0,.5)}
.preview__frame.phone{background:var(--bg-3)}
.looks{display:grid;gap:12px;margin-top:20px}
.looks__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;font-size:var(--t-utility);color:var(--text-3)}
.looks__label{font-size:15px;font-weight:500;color:var(--text)}
.looks__now b{display:inline-block;min-width:12ch;margin-left:6px;font-size:14.5px;font-weight:500;color:var(--text)}
.looks__note{margin-left:auto}
.palette{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
.palette .look{flex-direction:column;justify-content:center;gap:7px;min-height:66px;padding:9px 4px 8px;font-size:12.5px;line-height:1.2;text-align:center}
.look{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px 0 6px;border-radius:7px;border:1px solid var(--line);font-size:13.5px;color:var(--fg-2);transition:border-color var(--d-sel) var(--ease),color var(--d-sel) var(--ease),background-color var(--d-sel) var(--ease)}
.look:hover{border-color:var(--line-2);color:var(--fg)}
.look[aria-pressed="true"]{border-color:var(--fg);color:var(--fg)}
.look i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);background:linear-gradient(135deg,var(--a) 0 48%,var(--b) 52% 100%)}
.copied{color:var(--ok)}
@media (max-width:900px){.layer-head{grid-template-columns:minmax(0,1fr);align-items:start}.layer-head .actions{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.layer-head .hint{max-width:none}}
@media (max-width:700px){.preview__frame{aspect-ratio:auto;height:clamp(420px,120vw,600px)}.stage__bar .note,.stage__bar .seg{display:none}.layer-head .actions .btn{white-space:normal;text-align:center}}
@media (max-width:600px){
  .palette{grid-template-columns:repeat(3,minmax(0,1fr))}
  .palette .look{flex-direction:row;justify-content:flex-start;min-height:44px;padding:0 10px 0 7px;font-size:13.5px;text-align:left}
  .looks__note{margin-left:0}
}

.glance{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px}
.glance div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.glance dt{color:var(--muted)}.glance dd{margin:0}
@media (max-width:800px){.glance{grid-template-columns:1fr}}
.inside{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;counter-reset:i}
.inside li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:18px 0;border-bottom:1px solid var(--line);counter-increment:i}
.inside li::before{content:counter(i);color:var(--muted);font-size:14px;padding-top:2px}
.inside h3{font-size:16px;margin-bottom:4px}
.inside p{color:var(--fg-2);font-size:15px}
@media (max-width:800px){.inside{grid-template-columns:1fr}}
.params{margin-top:28px}
.params summary{cursor:pointer;font-size:15px;font-weight:500;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);list-style:none;display:flex;justify-content:space-between}
.params summary::-webkit-details-marker{display:none}
.params summary::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);margin:6px 6px 0 0;transition:transform var(--d-panel) var(--ease)}
.params[open] summary::after{transform:rotate(225deg)}
.params table{margin-top:4px}

/* full screen viewer: the layer with a slim Dusklayer bar, so there is always a way back */
/* bar and stage are fixed, so elements that browser extensions add to <body> (BetterCanvas, Grammarly and the like) cannot push the layer off screen */
.viewer-body{height:100vh;height:100dvh;overflow:hidden}
.vbar{position:fixed;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:10px;height:56px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.vbar .brand{flex:none;padding:6px}
.vbar .brand svg{width:22px;height:22px}
.vbar__sep{flex:none;width:1px;height:22px;background:var(--line-2)}
.vbar__back{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:7px 12px 7px 8px;border-radius:var(--r-s);font-size:14.5px;font-weight:500;transition:background-color .2s}
.vbar__back:hover{background:rgba(255,255,255,.06)}
.vbar__back svg{width:16px;height:16px;flex:none;color:var(--fg-2)}
.vbar__back span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbar__back small{font-size:13px;font-weight:400;color:var(--muted);margin-left:2px}
.vbar__mid{display:flex;align-items:center;gap:10px;margin-left:auto}
.vbar__look{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.vbar__look select{min-height:36px;padding:0 30px 0 10px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238E8E94' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center;color:var(--fg);font:inherit;font-size:14px;appearance:none;-webkit-appearance:none;cursor:pointer}
.vbar__right{display:flex;align-items:center;gap:8px}
.vbar__close{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:var(--r-s);border:1px solid var(--line-2);color:var(--fg);transition:border-color .2s,background-color .2s}
.vbar__close:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04)}
.vbar__close svg{width:14px;height:14px}
/* no shared transition names with the layer page: a live layer inside a morphing box renders as a double image, so the viewer crossfades in */
.vstage{position:fixed;top:56px;left:0;right:0;bottom:0;z-index:1;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;min-height:0;background:var(--stage,var(--bg-3));overflow:hidden;transition:background-color .3s var(--ease)}
.vstage.phone{background:var(--bg-3)}
.vstage iframe{position:relative;z-index:1;border:0;width:100%;height:100%;background:var(--stage,#000);opacity:0;transition:opacity .3s var(--ease)}
.vstage.live iframe{opacity:1}
.vstage.phone iframe{width:min(390px,100%);height:calc(100% - 40px);border-radius:28px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 60px rgba(0,0,0,.5)}
.vstage__poster{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none;transition:opacity .16s linear}
.vstage.live .vstage__poster,.vstage.phone .vstage__poster{opacity:0}
.vstage__state{position:absolute;z-index:2;left:14px;bottom:12px;font-size:13px;color:var(--fg-2);background:rgba(10,10,11,.72);padding:6px 10px;border-radius:6px;pointer-events:none;transition:opacity .3s}
.vstage.live .vstage__state{opacity:0}
@media (max-width:900px){.vbar .seg,.vbar [data-raw-open],.vbar__look span{display:none}}
@media (max-width:600px){.vbar{gap:6px;padding:0 8px}.vbar__sep,.vbar__look{display:none}.vbar__back small{display:none}.vbar [data-copy]{padding:0 12px}}

/* brand remix */
.remix{margin-top:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.remix summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:16px 20px}
.remix summary::-webkit-details-marker{display:none}
.remix summary>span{font-size:15px;font-weight:500}
.remix summary small{font-size:13.5px;color:var(--muted)}
.remix summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform var(--d-panel) var(--ease)}
.remix[open] summary::after{transform:rotate(225deg)}
.remix__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px 18px;padding:4px 20px 20px}
.remix__grid label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.remix__grid .remix__wide{grid-column:1/-1}
.remix__grid input:not([type=color]),.remix__grid textarea,.remix__grid select{min-height:40px;padding:8px 10px;border:1px solid var(--border-ctl);border-radius:var(--r-s);background:var(--bg);color:var(--fg);font:inherit;font-size:14.5px}
.remix__grid textarea{resize:vertical}
.remix__grid input:focus,.remix__grid textarea:focus,.remix__grid select:focus{outline:none;border-color:var(--text-2);box-shadow:0 0 0 1px var(--text-2)}
.remix .swatch{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px 0 6px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--bg)}
.remix .swatch input{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.remix .swatch input::-webkit-color-swatch-wrapper{padding:0}
.remix .swatch input::-webkit-color-swatch{border:1px solid var(--line-2);border-radius:6px}
.remix .swatch code{font:inherit;font-size:13.5px;color:var(--fg-2)}
.remix__foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:0 20px 20px}
.remix__foot .hint{font-size:13px;color:var(--muted)}
.remix.dirty summary>span::after{content:" (edited)";font-weight:400;color:var(--muted)}

/* the prompt */
.outline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 32px;counter-reset:o}
.outline li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;counter-increment:o}
.outline li::before{content:counter(o);color:var(--muted);font-size:13px;padding-top:2px;min-width:22px}
.prompt-sample{margin:16px 0 0;padding:20px 22px;max-height:420px;overflow:auto;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--fg-2);white-space:pre-wrap;word-break:break-word}
.sheet--wide a{aspect-ratio:auto}
.sheet--wide img{height:auto;object-fit:contain}
.score{font-size:15px;font-weight:500;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r-s);white-space:nowrap}

/* forms (Netlify) */
.founding{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:start}
.founding h2{font-size:clamp(1.75rem,3vw,2.5rem)}
.founding .lead{margin-top:18px;font-size:17px}
.form{display:grid;gap:16px;padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.form label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.form input,.form select,.form textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border-ctl);border-radius:var(--r-s);background:var(--bg);color:var(--fg);font:inherit;font-size:15px;transition:border-color .2s}
.form textarea{resize:vertical;min-height:120px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--text-2);box-shadow:0 0 0 1px var(--text-2)}
.form input::placeholder{color:var(--muted)}
.form .btn{justify-self:start}
.form .hint{font-size:13px;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.doc .form{margin-top:8px;max-width:560px}
@media (max-width:900px){.founding{grid-template-columns:1fr}}

/* page transitions: the clicked card morphs into the layer page preview; the rest fades */
@view-transition{navigation:auto}
.hdr{view-transition-name:header}
.preview__frame{view-transition-name:layer-media}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--ease)}
::view-transition-group(layer-media){animation-duration:.5s;animation-timing-function:var(--ease)}
::view-transition-old(layer-media),::view-transition-new(layer-media){height:100%;object-fit:cover;overflow:clip}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* docs */
.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start}
.doc aside{position:sticky;top:88px;display:grid;gap:6px;font-size:14px}
.doc aside a{color:var(--muted);padding:4px 0}
.doc aside a:hover{color:var(--fg)}
.doc article{max-width:72ch;display:grid;gap:14px}
.doc article h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin-top:36px;padding-top:36px;border-top:1px solid var(--line)}
.doc article h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc article h3{font-size:17px;margin-top:14px}
.doc article p,.doc article li{color:var(--fg-2);font-size:16px}
.doc article ul,.doc article ol{margin:0;padding-left:20px;display:grid;gap:6px}
.doc article code{font:inherit;font-size:14.5px;color:var(--fg);background:var(--bg-3);padding:1px 6px;border-radius:4px}
@media (max-width:900px){.doc{grid-template-columns:1fr}.doc aside{position:static}}

/* ---------- company pages ---------- */
.narrow{max-width:760px}
.two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:28px 64px;align-items:start}
.two h2{font-size:clamp(1.75rem,3vw,2.4rem)}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.plain{list-style:none;margin:0;padding:0;display:grid;gap:0}
.plain li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line);color:var(--fg-2);font-size:16px}
.plain li:first-child{border-top:1px solid var(--line)}
.plain li::before{content:"";position:absolute;left:2px;top:22px;width:6px;height:6px;border-radius:50%;background:var(--fg-2)}
.prose{display:grid;gap:14px;color:var(--fg-2);font-size:17px;max-width:62ch}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{padding:28px 24px 28px 0;border-right:1px solid var(--line)}
.stats div+div{padding-left:24px}
.stats div:last-child{border-right:0}
.stats dt{font-size:14px;color:var(--muted)}
.stats dd{margin:8px 0 0;font-size:clamp(2rem,3.4vw,2.8rem);font-weight:300;letter-spacing:-.03em;line-height:1}
@media (max-width:800px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats div:nth-child(2){border-right:0}.stats div:nth-child(n+3){border-top:1px solid var(--line)}.stats div:nth-child(3){padding-left:0}}
.band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:36px 40px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.band h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.band p{margin-top:6px}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px 64px;align-items:start;padding-bottom:clamp(56px,7vw,96px)}
.contact__aside{display:grid;gap:12px;align-content:start}
.contact__aside h2{font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1.3;margin-top:14px}
.contact__aside h2:first-child{margin-top:0}
.contact__aside p{color:var(--fg-2);font-size:15.5px}
.contact__aside .plain li{font-size:15px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
@media (max-width:560px){.form__row{grid-template-columns:1fr}}
.form select{appearance:none;-webkit-appearance:none;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238E8E94' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;padding-right:32px}

/* changelog */
.log{display:grid;gap:0;padding-bottom:24px}
.log__entry{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px 48px;padding:36px 0;border-top:1px solid var(--line)}
.log__entry time{font-size:15px;color:var(--muted);padding-top:3px}
.log__entry h3{font-size:16px;margin:0 0 14px}
.log__entry h3+ul{margin-bottom:26px}
.log__layers{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.log__layers a{display:flex;align-items:center;gap:14px;padding:8px;border:1px solid var(--line);border-radius:var(--r);transition:border-color .2s,background-color .2s}
.log__layers a:hover{border-color:var(--line-2);background:rgba(255,255,255,.02)}
.log__layers img{width:80px;height:50px;object-fit:cover;border-radius:6px;flex:none}
.log__layers span{display:grid;gap:2px;min-width:0}
.log__layers b{font-weight:500;font-size:15px}
.log__layers small{font-size:13px;color:var(--muted)}
@media (max-width:760px){.log__entry{grid-template-columns:1fr}}

/* legal */
.legal-meta{margin-top:14px;font-size:14px;color:var(--muted)}
.legal{padding-bottom:clamp(56px,7vw,96px)}
.legal article h2{font-size:clamp(1.25rem,2vw,1.5rem)}
.legal article .plain li{font-size:16px}
.doc aside a[aria-current="page"]{color:var(--fg)}
.legal-list{list-style:none;margin:0 0 clamp(56px,7vw,96px);padding:0;border-top:1px solid var(--line)}
.legal-list a{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:8px 32px;padding:22px 0;border-bottom:1px solid var(--line);transition:background-color .2s}
.legal-list a:hover b{text-decoration:underline;text-underline-offset:4px}
.legal-list b{font-weight:500;font-size:17px}
.legal-list span{color:var(--fg-2)}
@media (max-width:700px){.legal-list a{grid-template-columns:1fr}}

/* layer page extras */
.report{margin-top:20px;font-size:14.5px;color:var(--muted)}

/* library sort */
.sort{display:inline-flex;align-items:center;gap:10px;margin-left:auto;font-size:13.5px;color:var(--muted)}
.sort select{min-height:34px;padding:0 30px 0 10px;border:1px solid var(--line);border-radius:7px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238E8E94' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center;color:var(--fg-2);font:inherit;font-size:14px;appearance:none;-webkit-appearance:none;cursor:pointer}
@media (max-width:700px){.sort{margin-left:0}}

/* footer newsletter */
.news{display:flex;gap:8px;margin-top:20px;max-width:360px}
.news input{flex:1;min-width:0;min-height:40px;padding:0 12px;border:1px solid var(--border-ctl);border-radius:var(--r-s);background:var(--bg);color:var(--fg);font:inherit;font-size:14.5px}
.news input:focus{outline:none;border-color:var(--text-2);box-shadow:0 0 0 1px var(--text-2)}
.news input::placeholder{color:var(--muted)}
.news .form__note{flex-basis:100%;margin:0}
.news{flex-wrap:wrap}
.news__note{margin-top:10px;font-size:13px;color:var(--muted)}

/* reveal */
/* entrances: limited to section blocks that start below the fold. The script arms them, so content that is on screen
   at load, or a page whose script never runs, is simply there. Small travel, one shared easing */
.reveal.armed{opacity:0;transform:translateY(12px)}
.reveal.armed.in{opacity:1;transform:none;transition:opacity var(--d-enter) var(--ease),transform var(--d-enter) var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
/* reduced motion: direct state changes. Selection and colour feedback stays (it is not motion); movement goes */
@media (prefers-reduced-motion:reduce){
  .reveal.armed{opacity:1;transform:none;transition:none}
  .card__media img,.card__media video,.arrow::after,.preview__frame iframe,.frame__item,.frame__item video,.try__frame iframe,.tab::after,.hdr nav a::after,.thumbs .bar b,.sheet img{transition:none !important}
  .card:hover .card__media img,.card:focus-within .card__media img{transform:none}
}

/* layer page, lower half: an overview beside what is inside, then build details, then the prompt with how to use it */
.split--detail,.split--prompt{align-items:start}
.split--detail .split__head{grid-column:1 / span 5}
.split--detail .inside{grid-column:7 / span 6;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.overview__sum{margin-top:16px;font-size:var(--t-lead);line-height:1.55;color:var(--text-2);max-width:46ch}
.overview__sig{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:15px;color:var(--text-2);max-width:46ch}
.overview__sig span{display:block;margin-bottom:6px;font-size:var(--t-utility);color:var(--text-3)}
.split--prompt .outline{grid-column:1 / span 7;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.split--prompt .split__body{grid-column:9 / span 4}
.howto__title{margin-bottom:12px;font-size:15px;font-weight:500}
.split--prompt + .params{margin-top:36px}
/* pages that do not end on a full section still leave the same room before the footer */
main > :last-child:not(.section){padding-bottom:var(--sec)}

/* phones: every control is at least 44px tall, and a search field takes the tap anywhere in its box */
@media (max-width:700px){
  .btn,.btn--sm,.chip,.sort select,.news input,.form input,.form select,.remix__grid input:not([type=color]),.remix__grid select,.stage__bar .stage__full{min-height:44px}
  .search input{align-self:stretch}
}
/* the narrowest phones: the menu button keeps its name for screen readers and shows only its icon */
@media (max-width:360px){
  .menu{width:44px;padding:0;justify-content:center}
  .menu__label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hdr .btn--primary{padding:0 12px}
}
/* plans on phones: the cards stack, so they no longer need to line up with each other; tighter and shorter */
@media (max-width:600px){
  .plan{padding:22px 22px 24px}
  .plan .alt{min-height:0}
  .plan ul{margin:16px 0 22px;padding-top:16px;gap:8px;font-size:14.5px}
  .plans{gap:16px}
}