/* Brand Kit Generator: app chrome (left panel) + the generated kit (right). */

:root {
  --ui-bg: #121212;
  --ui-bg2: #1b1b1b;
  --ui-bg3: #242424;
  --ui-line: #2c2c2c;
  --ui-text: #ececec;
  --ui-muted: #8d8d8d;
  --ui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --panel-w: 340px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ui-bg); color: var(--ui-text); font: 13px/1.4 var(--ui-font); min-height: 100vh; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }

.app { display: grid; grid-template-columns: var(--panel-w) 1fr; min-height: 100vh; }

/* ---------- Panel ---------- */
.panel {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ui-bg); border-right: 1px solid var(--ui-line);
  padding: 18px 16px 28px; display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: thin; scrollbar-color: #333 transparent;
}
.p-head h1 { font-size: 17px; margin: 0; letter-spacing: -0.01em; font-weight: 700; }
.p-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.help-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ui-line); background: var(--ui-bg2); color: var(--ui-muted); font-weight: 700; font-size: 13px; line-height: 1; padding: 0; }
.help-btn:hover { color: var(--ui-text); border-color: #555; }

/* About pop-over */
.about {
  width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 760px); overflow-y: auto; margin: auto;
  background: #181818; color: #dcdcdc; border: 1px solid #2f2f2f; border-radius: 18px; padding: 28px 30px 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6); font: 14.5px/1.6 var(--ui-font);
}
.about::backdrop { background: rgba(0,0,0,.55); }
.about h2 { margin: 0 0 10px; font-size: 22px; color: #fff; letter-spacing: -0.01em; }
.about h3 { margin: 20px 0 4px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #f0c36a; }
.about p { margin: 0 0 8px; }
.about strong { color: #fff; font-weight: 600; }
.about dl { margin: 6px 0 0; }
.about dt { color: #fff; font-weight: 600; margin-top: 10px; }
.about dd { margin: 2px 0 0; }
.about a { color: #f0c36a; }
.about-by { margin-top: 18px !important; color: var(--ui-muted); font-size: 13px; }
.about-close { position: sticky; top: 0; float: right; margin: -10px -12px 0 0; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #2a2a2a; color: #eee; font-size: 20px; line-height: 1; }
.p-head p { margin: 3px 0 0; color: var(--ui-muted); }
.p-head a { color: inherit; }

.shuffle {
  --sb: #f2f2f2; --st: #111;
  position: relative; width: 100%; min-height: 128px; border: 0; border-radius: 16px;
  background: var(--sb); color: var(--st);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 16px 18px;
  transition: background-color .35s, color .35s, transform .12s;
  overflow: hidden; text-align: left;
}
.shuffle:hover { transform: translateY(-1px); }
.shuffle:active { transform: scale(.985); }
.shuffle:focus-visible { outline: 2px solid var(--ui-text); outline-offset: 3px; }
.sh-label { font-size: 44px; line-height: .95; font-weight: 800; letter-spacing: -0.02em; font-family: var(--sh-font, var(--ui-font)); }
.sh-row { display: flex; width: 100%; justify-content: space-between; align-items: center; font-size: 12px; opacity: .75; }
.sh-key { border: 1px solid currentColor; border-radius: 6px; padding: 1px 7px; font-family: var(--ui-mono); font-size: 11px; }
.sh-dice { width: 30px; height: 30px; position: absolute; right: 16px; top: 16px; }
.shuffle.busy .sh-dice { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.brief { display: grid; gap: 8px; background: var(--ui-bg2); border: 1px solid var(--ui-line); border-radius: 12px; padding: 10px; }
.brief-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ui-muted); font-size: 12px; }
.brief-head b { color: var(--ui-text); font-weight: 650; }
.brief-copy { border: 0; border-radius: 9px; padding: 8px 14px; font-weight: 700; background: #f0c36a; color: #111; transition: transform .12s, background .2s; }
.brief-copy:hover { transform: translateY(-1px); background: #f6d38a; }
.brief-copy:active { transform: scale(.97); }
.brief-copy.done { background: #8fd19e; }
#brief { width: 100%; height: 118px; resize: vertical; background: var(--ui-bg); color: #bdbdbd; border: 1px solid var(--ui-line); border-radius: 8px; padding: 8px 10px; font: 11px/1.5 var(--ui-mono); white-space: pre-wrap; }
#brief:focus { outline: none; border-color: #555; }
.navrow { display: flex; gap: 6px; align-items: center; }
.navrow .count { flex: 1; text-align: center; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-btn {
  background: var(--ui-bg2); border: 1px solid var(--ui-line); border-radius: 9px; padding: 7px 10px; line-height: 1;
  transition: background .15s, border-color .15s;
}
.ui-btn:hover { background: var(--ui-bg3); border-color: #3a3a3a; }
.ui-btn:disabled { opacity: .35; cursor: default; }
.ui-btn.wide { flex: 1; }

.readout { background: var(--ui-bg2); border: 1px solid var(--ui-line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.readout .r-vibe { font-size: 15px; font-weight: 650; }
.readout .r-blurb { color: var(--ui-muted); }
.readout .r-wild { color: #f0c36a; font-size: 12px; }
.readout .r-count { color: var(--ui-muted); font-size: 11.5px; }

.sec { border-top: 1px solid var(--ui-line); padding-top: 12px; }
.sec > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary h2 { margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-muted); flex: 1; font-weight: 600; }
.sec > summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--ui-muted); border-bottom: 1.5px solid var(--ui-muted); transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
.sec[open] > summary::before { transform: rotate(45deg); }
.sec-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.mini-dice { background: none; border: 1px solid var(--ui-line); border-radius: 7px; padding: 3px 8px; color: var(--ui-muted); font-size: 11.5px; display: inline-flex; gap: 5px; align-items: center; }
.mini-dice:hover { color: var(--ui-text); border-color: #444; }

.row { display: grid; grid-template-columns: 74px 1fr 28px; gap: 6px; align-items: center; }
.row > label, .row > .rl { color: var(--ui-muted); font-size: 12px; }
.row.sub { grid-template-columns: 74px 1fr 1fr 28px; }
.row.sub3 { grid-template-columns: 74px 1fr 1fr 1fr; }
select, .txt {
  width: 100%; min-width: 0; background: var(--ui-bg2); border: 1px solid var(--ui-line); border-radius: 8px; padding: 6px 8px; height: 31px;
}
select { appearance: none; padding-right: 22px; background-image: linear-gradient(45deg, transparent 50%, var(--ui-muted) 50%), linear-gradient(135deg, var(--ui-muted) 50%, transparent 50%); background-position: calc(100% - 12px) 13px, calc(100% - 8px) 13px; background-size: 4px 4px; background-repeat: no-repeat; text-overflow: ellipsis; }
select:focus, .txt:focus { outline: none; border-color: #555; }
.lock { width: 28px; height: 28px; border-radius: 8px; border: 1px solid transparent; background: none; display: grid; place-items: center; color: #5d5d5d; padding: 0; }
.lock:hover { color: var(--ui-text); background: var(--ui-bg2); }
.lock.on { color: #111; background: #f0c36a; }
.lock svg { width: 14px; height: 14px; }
.toggle-btn { height: 31px; border-radius: 8px; border: 1px solid var(--ui-line); background: var(--ui-bg2); padding: 0 8px; color: var(--ui-muted); }
.toggle-btn.on { color: var(--ui-text); border-color: #555; background: var(--ui-bg3); }
.range { display: grid; grid-template-columns: 74px 1fr 46px; gap: 6px; align-items: center; color: var(--ui-muted); font-size: 12px; }
.range input { width: 100%; accent-color: #f0c36a; }
.range output { font-family: var(--ui-mono); font-size: 11px; text-align: right; }

.swatches-ui { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sw-ui { position: relative; min-width: 0; border-radius: 10px; border: 1px solid var(--ui-line); background: var(--ui-bg2); padding: 6px; display: grid; gap: 5px; }
.sw-ui .chip { position: relative; height: 38px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; }
.sw-ui input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.sw-ui .meta { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.sw-ui .sw-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sw-ui .sw-txt b, .sw-ui .sw-txt i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-ui .sw-txt b { font-size: 11.5px; font-weight: 600; color: var(--ui-text); }
.sw-ui .sw-txt i { font-style: normal; font-size: 10.5px; color: var(--ui-muted); text-transform: capitalize; }
.sw-ui .lock { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.sw-ui .lock svg { width: 12px; height: 12px; }

.p-foot { margin-top: auto; color: var(--ui-muted); font-size: 11.5px; line-height: 1.5; padding-top: 8px; }
.p-foot a { color: inherit; }
.p-foot kbd { font-family: var(--ui-mono); border: 1px solid var(--ui-line); border-radius: 4px; padding: 0 4px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: #f2f2f2; color: #111; padding: 9px 14px; border-radius: 999px; font-weight: 600; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Stage ---------- */
.stage { min-width: 0; background: var(--surface, #1b1b1b); transition: background-color .5s; }
.stage.loading .kit { opacity: .55; transition: opacity .2s; }

/* ---------- The kit ---------- */
.kit {
  container-type: inline-size; container-name: kit;
  background: var(--surface); color: var(--ink);
  padding: clamp(12px, 2.4cqi, 32px);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.kit-head, .kit-foot {
  display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between; align-items: center;
  background: transparent !important; color: var(--fg); font-size: 13px; padding: 0 4px 14px;
}
.kit-foot { padding: 18px 4px 4px; font-family: var(--fb); font-size: 12.5px; justify-content: flex-start; }
.kit-head .lab:first-child { font-family: var(--fh); font-weight: var(--hw); letter-spacing: var(--htr); font-size: 1.15em; text-transform: none; font-variant-caps: normal; }

/* Type roles */
.kit .h {
  font-family: var(--fh); font-weight: var(--hw); font-style: var(--hs); letter-spacing: var(--htr); line-height: var(--hlh);
  font-variation-settings: var(--hfvs); font-variant-caps: var(--hcaps); color: var(--hfg); margin: 0;
  text-wrap: balance; overflow-wrap: normal; hyphens: none; font-kerning: normal;
}
.kit .b { font-family: var(--fb); font-weight: var(--bw); line-height: var(--blh); letter-spacing: var(--btr); font-variation-settings: var(--bfvs); margin: 0; }
.kit .lab {
  font-family: var(--fl); font-weight: var(--lw); letter-spacing: var(--ltr); font-variation-settings: var(--lfvs);
  font-variant-caps: var(--lcaps); font-size: calc(var(--lsz) * 1em); line-height: 1.25;
}
.kit .mono { font-family: var(--ui-mono); font-size: .78em; letter-spacing: 0; }
.kit .dim { color: var(--mut); }

/* Bento */
.bento {
  --cols: 12;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap);
  grid-auto-rows: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols) * .7);
  grid-auto-flow: row dense;
}
.tile {
  --c: 4; --r: 3;
  grid-column: span var(--c); grid-row: span var(--r);
  position: relative; overflow: hidden; min-width: 0; min-height: 0;
  background: var(--bg); color: var(--fg); border-radius: var(--rad);
  container-type: inline-size;
  padding: clamp(12px, 5.5cqi, 30px);
  display: flex; flex-direction: column; gap: 10px;
  font-size: 15px;
}
.t-hero { --c: 8; --r: 6; }
.t-logo, .t-logos { --c: 4; --r: 3; }
.t-palette { --c: 9; --r: 3; }
.t-stat { --c: 3; --r: 3; }
.t-spec { --c: 5; --r: 5; }
.t-hier { --c: 7; --r: 5; }
.t-article { --c: 7; --r: 11; }
.t-poster { --c: 5; --r: 11; }
.t-ui { --c: 5; --r: 4; }
.t-cards { --c: 4; --r: 4; }
.t-voice { --c: 3; --r: 4; }
.t-motion { --c: 5; --r: 4; }
.t-social { --c: 4; --r: 4; }
.t-gl { --c: 3; --r: 4; }
.t-a11y { --c: 5; --r: 4; }
.t-icons { --c: 4; --r: 4; }
.t-pattern { --c: 3; --r: 4; }
.t-photohead { --c: 12; --r: 6; }
.t-marquee { --c: 12; --r: 2; }
/* Placement order, so the grid packs without holes (independent of the order tiles are built in). */
.t-hero { order: 1; } .t-logo { order: 2; } .t-logos { order: 3; } .t-palette { order: 4; } .t-stat { order: 5; }
.t-spec { order: 6; } .t-hier { order: 7; } .t-article { order: 8; } .t-poster { order: 9; }
.t-ui { order: 10; } .t-cards { order: 11; } .t-voice { order: 12; } .t-motion { order: 13; } .t-social { order: 14; } .t-gl { order: 15; }
.t-a11y { order: 16; } .t-icons { order: 17; } .t-pattern { order: 18; } .t-photohead { order: 19; } .t-marquee { order: 20; }

/* Edges, shadows, texture */
.edge-hair .tile { box-shadow: inset 0 0 0 1px var(--line); }
.edge-bold .tile { border: 2.5px solid var(--ink); }
.shadow-soft .tile { box-shadow: 0 18px 40px -22px rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.12); }
.shadow-hard .tile { box-shadow: 5px 5px 0 var(--ink); }
.edge-hair.shadow-hard .tile { box-shadow: inset 0 0 0 1px var(--line), 5px 5px 0 var(--ink); }
.edge-hair.shadow-soft .tile { box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -22px rgba(0,0,0,.45); }
.shadow-hard .bento { padding: 0 5px 5px 0; }
.tex-grain .tile::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: .55;
}

.corner { position: absolute; top: clamp(10px, 4cqi, 22px); right: clamp(12px, 5cqi, 26px); z-index: 3; font-size: 12px; color: var(--mut); }
.kicker { font-size: 13px; color: var(--mut); }
/* No clipping here: glyphs (and emphasis doodles) often draw outside the line box. The tile edge is the only clip. */
.fit { min-height: 0; }
[data-fit] { min-height: 0; position: relative; }

/* Buttons */
.btns { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font-family: var(--fl); font-weight: max(var(--lw), 500); letter-spacing: calc(var(--ltr) * .6); font-variation-settings: var(--lfvs);
  font-size: .9em; padding: .78em 1.25em; border-radius: var(--brad); line-height: 1; position: relative; overflow: hidden;
  transition: transform calc(var(--dur) * .6) var(--ease), box-shadow calc(var(--dur) * .6) var(--ease);
}
.btn-p { background: var(--b); color: var(--t); }
.btn-s { box-shadow: inset 0 0 0 1.5px var(--fg); color: var(--fg); }
.btn:hover { transform: translateY(-2px) scale(1.03); }
.shadow-hard .btn-p { box-shadow: 3px 3px 0 var(--fg); }
.shadow-hard .btn-p:hover { box-shadow: 5px 5px 0 var(--fg); transform: translate(-2px, -2px); }
.link { color: var(--fg); text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: .12em; text-underline-offset: .2em; cursor: pointer; }

/* Emphasis */
.hl { position: relative; }
.hl-marker { background: linear-gradient(transparent 64%, var(--m) 64%, var(--m) 100%); padding: 0 .06em; margin: 0 -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-block { padding: 0 .12em; margin: 0 -.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-sticker { display: inline-block; padding: .02em .3em .08em; border-radius: .45em; transform: rotate(-3deg); line-height: 1.05; }
.hl-under { text-decoration: underline; text-decoration-color: var(--u); text-decoration-thickness: .085em; text-underline-offset: .12em; text-decoration-skip-ink: none; }
.hl-circle { display: inline-block; margin-inline: .08em; padding-inline: .06em; }
.hl-circle .scribble { position: absolute; left: -7%; top: -14%; width: 114%; height: 128%; overflow: visible; pointer-events: none; }
.hl-it { font-style: italic; }
.kit .h[style*="italic"] .hl-it, .kit .h .hl-it { font-style: var(--hs-flip, italic); }
.hl-alt { font-style: italic; letter-spacing: -0.01em; font-variation-settings: normal; }
.hl-outline { color: transparent; -webkit-text-stroke: max(1.5px, .028em) var(--hfg); }

/* Photos */
.ph { position: relative; overflow: hidden; min-height: 0; background: var(--line); }
.ph canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s; }
.ph.ready canvas { opacity: 1; }
.ph-full { position: absolute !important; inset: 0; border-radius: 0 !important; }
.mask-rect { border-radius: calc(var(--rad) * .6); }
.mask-arch { border-radius: 9999px 9999px calc(var(--rad) * .6) calc(var(--rad) * .6); }
.mask-circle { clip-path: circle(closest-side); background: none; }
.mask-blob { border-radius: 58% 42% 55% 45% / 45% 55% 45% 55%; }
.mask-pill { border-radius: 9999px; }
.mask-slant { clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
.deco-bg { position: absolute; inset: 0; pointer-events: none; }
.deco-bg svg, .deco-fill svg { width: 100%; height: 100%; display: block; }
.deco-bg.faint { opacity: .35; }
.deco-fill { position: absolute; inset: 0; }

/* Hero */
.t-hero { padding: 0; gap: 0; }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: clamp(14px, 3.4cqi, 28px) clamp(16px, 4cqi, 34px) 0; font-size: 14px; position: relative; z-index: 2; }
.nav nav { display: flex; gap: clamp(10px, 2.5cqi, 26px); }
/* Long names shrink to fit instead of running off the tile. */
.nav-brand { flex: 0 1 auto; min-width: 0; font-size: 20px; }
.nav-brand .lockup { min-width: 0; }
.nav nav { flex: none; }
.hero-text { display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(8px, 1.6cqi, 16px); min-height: 0; font-size: clamp(13px, 1.9cqi, 18px); }
.hx-wrap { min-height: 0; display: flex; align-items: flex-end; flex: 0 1 auto; font-size: calc(var(--hsz) * 7.2cqi); }
.hx { font-size: 1em; }
.lead { font-size: 1.1em; max-width: 30em; }

.hero-split { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto minmax(0, 1fr); }
.hero-split .nav { grid-column: 1 / -1; }
.hero-split .hero-text { padding: clamp(14px, 3cqi, 28px) clamp(16px, 4cqi, 34px) clamp(16px, 4cqi, 34px); }
.hero-split .hero-ph { margin: clamp(14px, 3cqi, 28px) clamp(16px, 4cqi, 34px) clamp(16px, 4cqi, 34px) 0; }
.hero-split .hx-wrap { flex: 1 1 auto; }

.hero-overlay .chip-logo { position: absolute; left: clamp(14px, 3cqi, 26px); top: clamp(14px, 3cqi, 26px); z-index: 2; display: flex; align-items: center; gap: .5em; padding: .5em .9em; border-radius: var(--brad); background: var(--bg); color: var(--hfg); font-size: 15px; }
.hero-card {
  position: absolute; left: clamp(14px, 3cqi, 26px); bottom: clamp(14px, 3cqi, 26px); width: min(64%, 34em); max-height: calc(100% - 90px);
  background: var(--bg); color: var(--fg); border-radius: var(--rad); padding: clamp(16px, 3.6cqi, 32px); z-index: 2;
}
.hero-card .hx-wrap { font-size: calc(var(--hsz) * 5.4cqi); flex: 0 1 auto; }

.hero-poster { display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1.3fr); }
.poster-head { padding: clamp(10px, 2cqi, 20px) clamp(16px, 4cqi, 34px) 0; font-size: calc(var(--hsz) * 10cqi); align-items: center; }
.hero-foot { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 3cqi, 30px); padding: 0 clamp(16px, 4cqi, 34px) clamp(16px, 4cqi, 34px); min-height: 0; align-items: end; }
.hero-copy { display: flex; flex-direction: column; gap: 14px; font-size: clamp(13px, 1.9cqi, 18px); padding-bottom: 4px; }
.hero-visual { position: relative; height: 100%; min-height: 0; }
.hero-visual .ph { position: absolute; inset: 8% 6% 0 6%; }

.lockup { display: flex; align-items: center; gap: .38em; color: var(--hfg); min-width: 0; }
.lockup .wm { white-space: nowrap; line-height: 1; }
.lk-mark { width: 1.15em; height: 1.15em; flex: none; display: block; }
.lk-mark .mark, .lv-mark .mark { display: block; width: 100%; height: 100%; }
.lk-s { flex-direction: column; gap: .3em; text-align: center; }
.lk-s .lk-mark { width: 1.5em; height: 1.5em; }
.lk-mini { font-size: 1em; }
.chip-logo .wm { font-family: var(--fh); font-weight: var(--hw); letter-spacing: var(--htr); font-variation-settings: var(--hfvs); white-space: nowrap; }
.chip-logo .mark { width: 1.4em; height: 1.4em; }

/* Logo tiles */
.t-logo { justify-content: center; align-items: center; }
.logo-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: calc(var(--hsz) * 11cqi); }
.t-logos { padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; }
.lv { background: var(--bg); color: var(--fg); display: flex; align-items: center; justify-content: center; padding: 10%; min-height: 0; min-width: 0; container-type: size; }
.lv > .fit { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: calc(var(--hsz) * 14cqi); }
.lv-mark { display: block; width: 40cqmin; height: 40cqmin; }

/* Palette */
.t-palette { padding: 0; }
.swatches { display: flex; height: 100%; }
.swatch {
  flex: 1 1 0; min-width: 0; border: 0; background: var(--bg); color: var(--fg); text-align: left; padding: clamp(10px, 1.6cqi, 22px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px; font-size: clamp(11px, 1.15cqi, 14px);
  transition: flex-grow var(--dur) var(--ease);
}
.swatch:hover { flex-grow: 3.2 !important; }
.sw-name { font-size: 1.7em; color: var(--fg); line-height: 1.15; padding-block: .1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-meta { display: flex; flex-direction: column; gap: 3px; }
.sw-meta .mono { font-size: .95em; }
.sw-ratio { font-size: .9em !important; }

@container (max-width: 760px) { .sw-meta .mono.dim, .sw-ratio { display: none; } }

/* Specimen: everything in em so the fitter can scale it as one */
.t-spec { gap: 6px; }
.spec-body { display: flex; flex-direction: column; gap: .4em; height: 100%; font-size: clamp(9px, 2.6cqi, 16px); }
.spec-aa { font-size: calc(var(--hsz) * 11.5em); line-height: .9; margin-top: auto !important; }
.spec-name { font-size: calc(var(--hsz) * 2.5em); line-height: 1.05; }
.spec-sub { font-size: .85em; color: var(--mut); }
.spec-axes { font-size: .72em !important; color: var(--mut); }
.spec-glyphs { font-size: calc(var(--hsz) * 1.55em); line-height: 1.25; letter-spacing: max(var(--htr), 0em); margin-top: .5em !important; word-break: break-all; }
.spec-others { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .6em; border-top: 1px solid var(--line); padding-top: .6em; font-size: .85em; }
.spec-others > div { display: flex; gap: .5em; align-items: center; min-width: 0; }
.spec-others > div > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.spec-o-aa { font-size: 2.2em !important; line-height: 1; text-transform: none; }

/* Hierarchy */
.hier { display: flex; flex-direction: column; justify-content: space-between; height: 100%; font-size: clamp(10px, 2.7cqi, 21px); gap: .3em; padding-top: 1.4em; }
.hi-row { display: grid; grid-template-columns: 1fr minmax(8em, auto); gap: 1em; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: .45em; }
.hi-row:last-child { border-bottom: 0; }
.hi-sample { min-width: 0; }
.hi-d { font-size: 3.4em; white-space: nowrap; }
.hi-h { font-size: 1.9em; }
.hi-s { font-size: 1.25em; font-weight: var(--bbw); }
.hi-b { font-size: .95em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: .1em; }
.hi-l { font-size: .95em; }
.hi-spec { display: flex; flex-direction: column; gap: 2px; font-size: .8em; text-align: right; color: var(--mut); }

/* Poster */
.t-poster { gap: 8px; }
.poster-top, .poster-bot { display: flex; justify-content: space-between; font-size: 12px; position: relative; z-index: 2; gap: 8px; }
.poster-h { flex: 0 1 auto; font-size: calc(var(--hsz) * 15cqi); position: relative; z-index: 2; }
.poster-h .h { font-size: 1em; }
.poster-vis { flex: 1 1 0; position: relative; min-height: 0; }
.poster-vis .ph { position: absolute; inset: 6% 10%; }

/* Article: a proper reading column with room to breathe */
.t-article { padding: clamp(18px, 6.5cqi, 48px); }
.article { height: 100%; font-size: clamp(14px, 3.2cqi, 18px); display: flex; flex-direction: column; gap: 1em; }
.article > * { max-width: 34em; }
.article .kicker { font-size: .85em; }
.art-h { font-size: calc(var(--hsz) * 2.4em); line-height: var(--hlh); margin-top: -.2em !important; }
.byline { font-size: .85em; color: var(--mut); margin-top: -.4em; }
.art-ph { height: 9.5em; flex: none; max-width: none; margin: .3em 0; }
.article p { font-size: 1em; line-height: max(var(--blh), 1.6); }
.dropcap::first-letter { font-family: var(--fh); font-weight: var(--hw); float: left; font-size: 3.4em; line-height: .85; padding: .06em .08em 0 0; color: var(--acc); font-variation-settings: var(--hfvs); }
.pull { font-size: calc(var(--hsz) * 1.55em); line-height: 1.2; border-left: .2em solid var(--acc); padding: .1em 0 .1em .8em; margin: .5em 0 !important; letter-spacing: var(--htr); }

/* Stat */
.t-stat { justify-content: flex-end; }
.stat { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; font-size: clamp(10px, 5cqi, 16px); gap: .4em; }
.stat-n { font-size: calc(var(--hsz) * 5em); line-height: .9; white-space: nowrap; }

/* GL */
.t-gl { padding: 0; }
.gl-slot { position: absolute; inset: 0; }
.gl-slot canvas { width: 100%; height: 100%; display: block; }
.kit .chip { position: absolute; left: 12px; bottom: 12px; z-index: 3; background: var(--bg); color: var(--fg); padding: .45em .8em; border-radius: var(--brad); font-size: 12px; }

/* UI kit */
.ui { display: flex; flex-direction: column; justify-content: center; gap: 1em; height: 100%; font-size: clamp(10px, 3cqi, 15px); padding-top: 1em; }
.field { display: flex; flex-direction: column; gap: .4em; }
.field .lab { font-size: .85em; }
.input { border-radius: min(var(--brad), 12px); box-shadow: inset 0 0 0 1.5px var(--line); padding: .7em .9em; display: flex; align-items: center; }
.edge-bold .input { box-shadow: inset 0 0 0 2px var(--fg); }
.input .ph-text { color: var(--mut); }
.caret { display: inline-block; width: 1.5px; height: 1.1em; background: var(--acc); margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ui-row { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.ui-row .b { margin-right: .8em; }
.toggle { width: 2.4em; height: 1.4em; border-radius: 999px; background: var(--on); position: relative; flex: none; }
.toggle i { position: absolute; top: .2em; right: .2em; width: 1em; height: 1em; border-radius: 50%; background: var(--paper); }
.check { width: 1.3em; height: 1.3em; border-radius: min(var(--brad), .35em); background: var(--on); color: var(--tick); display: grid; place-items: center; font-size: .9em; flex: none; }
.chips { display: flex; gap: .45em; flex-wrap: wrap; }
.tag { padding: .45em .8em; border-radius: var(--brad); font-size: .78em !important; }

/* Cards */
.t-cards { justify-content: center; }
.cards { position: relative; flex: 1; min-height: 0; container-type: size; }
.card {
  position: absolute; width: 74cqw; aspect-ratio: 85 / 55; max-height: 66cqh; border-radius: max(4px, calc(var(--rad) * .35));
  background: var(--bg); color: var(--fg); box-shadow: 0 14px 28px -12px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.15); overflow: hidden;
  padding: 5.5cqw; display: flex; flex-direction: column; font-size: clamp(7px, 3.1cqw, 13px);
  transition: transform var(--dur) var(--ease);
}
.card-back { left: 22cqw; top: 2cqh; transform: rotate(5deg); align-items: center; justify-content: center; }
.card-front { left: 2cqw; bottom: 2cqh; transform: rotate(-4deg); }
.t-cards:hover .card-back { transform: rotate(9deg) translate(4%, -4%); }
.t-cards:hover .card-front { transform: rotate(-6deg) translate(-3%, 3%); }
.card-logo { position: relative; font-size: 2.4em; width: 100%; display: flex; justify-content: center; }
.card-top .mark { display: block; }
.card-who { margin-top: auto; }
.card-name { font-size: 1.5em; color: var(--hfg); }
.card-det { font-size: .78em; line-height: 1.45; margin-top: .6em !important; }

/* Voice */
.voice { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: .5em; font-size: clamp(10px, 5cqi, 16px); }
.voice-yes { font-size: 2.3em; line-height: 1.02; }
.voice-no { font-size: .95em; }
.voice-no s { text-decoration-color: var(--acc); text-decoration-thickness: .12em; margin-right: .4em; }

/* Motion */
.t-motion { gap: 8px; }
.mo-grid { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr auto; gap: 10px 18px; height: 100%; min-height: 0; padding-top: 1.6em; }
.mo-curve { position: relative; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.mo-curve svg { flex: 1; min-height: 0; width: 100%; overflow: visible; }
.mo-track { position: relative; height: 14px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }
.mo-track i { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 99px; animation: mo-move var(--dur) var(--ease) infinite alternate; animation-delay: .4s; }
@keyframes mo-move { from { left: 2px; } to { left: calc(100% - 12px); } }
.mo-type { font-size: calc(var(--hsz) * 9cqi); align-self: center; justify-self: center; white-space: nowrap; }
.mo-var { animation: mo-w calc(var(--dur) * 2.5) var(--ease) infinite alternate; }
@keyframes mo-w { from { font-weight: var(--w0); } to { font-weight: var(--w1); } }
.mo-track-anim { animation: mo-tr calc(var(--dur) * 2.5) var(--ease) infinite alternate; }
@keyframes mo-tr { to { letter-spacing: calc(var(--htr) + .18em); } }
.mo-tokens { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--mut); align-self: end; min-width: 0; }
.mo-tokens .mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-demo { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 14px; }
.mo-pop { width: 2.6em; height: 2.6em; display: block; }
.mo-pop .mark { display: block; width: 100%; height: 100%; }
.mo-btn { animation: mo-press calc(var(--dur) * 3) var(--ease) infinite; }
@keyframes mo-press { 0%, 55%, 100% { transform: scale(1); } 65% { transform: scale(.9); } 80% { transform: scale(1.04); } }

/* Social */
.t-social { padding: 0; }
.social-band { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: var(--bg); color: var(--fg); padding: 5% 6%; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.social-band.top { top: 0; bottom: auto; }
.social-band > .fit { flex: 1; font-size: calc(var(--hsz) * 9cqi); display: flex; align-items: center; }
.social-h { font-size: 1em; }
.social-meta { display: flex; align-items: center; gap: .5em; font-size: 12px; }
.social-meta .mark { width: 1.6em; height: 1.6em; }

/* Pattern */
.t-pattern { padding: 0; }

/* A11y */
.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(84px, 17cqi), 1fr)); grid-auto-rows: 1fr; gap: 6px; height: 100%; padding-top: 2em; min-height: 0; }
.pair { border-radius: min(var(--rad), 10px); padding: 8px 10px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; min-height: 0; box-shadow: inset 0 0 0 1px rgba(127,127,127,.18); }
.pair-aa { font-size: 26px !important; color: inherit !important; line-height: 1; }

/* Icons */
.t-icons { justify-content: center; align-items: center; }
.icons { display: flex; align-items: flex-end; gap: 6%; width: 100%; justify-content: center; }
.icon { aspect-ratio: 1; border-radius: 23%; background: var(--bg); display: grid; place-items: center; box-shadow: 0 10px 22px -12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(127,127,127,.15); }
.icon:nth-child(1) { width: 30%; } .icon:nth-child(2) { width: 22%; } .icon:nth-child(3) { width: 15%; }
.icon .mark { display: block; }
.icon-label { font-size: 13px; }

/* Headline on photography */
.t-photohead { padding: 0; }
.t-photohead .scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ph-copy {
  position: absolute; z-index: 2; display: flex; flex-direction: column; gap: clamp(8px, 1.4cqi, 16px);
  font-size: clamp(13px, 1.5cqi, 18px); opacity: 0; transition: opacity .45s;
}
.t-photohead.settled .ph-copy { opacity: 1; }
.t-photohead .hx-wrap { font-size: calc(var(--hsz) * 6.6cqi); flex: 0 1 auto; }
.t-photohead .hx-wrap .h { font-size: 1em; }
.ph-bottom .ph-copy { left: clamp(16px, 4cqi, 48px); right: 28%; bottom: clamp(16px, 4cqi, 44px); max-height: 72%; }
.ph-left .ph-copy { left: clamp(16px, 4cqi, 48px); width: 46%; top: 50%; transform: translateY(-50%); max-height: 82%; }
.ph-center .ph-copy { left: 14%; right: 14%; top: 50%; transform: translateY(-50%); max-height: 82%; align-items: center; text-align: center; }
.ph-center .hx-wrap { justify-content: center; }

/* Marquee */
.t-marquee { padding: 0; justify-content: center; }
.mq { display: flex; overflow-x: clip; overflow-y: visible; padding-block: .2em; font-size: calc(var(--hsz) * 4.6cqi); white-space: nowrap; }
.mq-run { flex: none; display: flex; align-items: center; gap: .4em; padding-right: .4em; animation: mq calc(var(--dur) * 40) linear infinite; }
.mq-run .h { color: var(--hfg); }
.mq-sep { display: inline-flex; width: .7em; height: .7em; }
.mq-sep .mark { width: 100%; height: 100%; }
@keyframes mq { to { transform: translateX(-100%); } }

/* ---------- Motion: entrances ---------- */
.kit .tile { animation: var(--enter, e-fade) var(--dur) var(--ease) both; animation-delay: var(--d, 0ms); }
.enter-fade { --enter: e-fade; }
.enter-rise { --enter: e-rise; }
.enter-pop { --enter: e-pop; }
.enter-blur { --enter: e-blur; }
.enter-wipe { --enter: e-wipe; }
.enter-glitch { --enter: e-glitch; }
@keyframes e-fade { from { opacity: 0; } }
@keyframes e-rise { from { opacity: 0; transform: translateY(30px); } }
@keyframes e-pop { from { opacity: 0; transform: scale(.82); } }
@keyframes e-blur { from { opacity: 0; filter: blur(16px); transform: scale(1.03); } }
@keyframes e-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes e-glitch { 0% { opacity: 0; transform: translateX(-10px); } 25% { opacity: 1; transform: translateX(7px) skewX(-6deg); } 50% { transform: translateX(-4px); } 75% { transform: translateX(2px) skewX(3deg); } 100% { transform: none; } }

/* ---------- Motion: loops (logo marks, motifs, buttons) ---------- */
.loop-target .mark { transform-box: fill-box; transform-origin: center; }
.loop-breathe .loop-target .mark { animation: l-breathe 4.5s ease-in-out infinite; }
@keyframes l-breathe { 50% { transform: scale(1.07) rotate(4deg); } }
.loop-bounce .loop-target .mark { animation: l-bounce 1.8s infinite; transform-origin: 50% 100%; }
@keyframes l-bounce {
  0% { transform: translateY(0) scale(1.08, .92); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  35% { transform: translateY(-18%) scale(.96, 1.04); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  62% { transform: translateY(0) scale(1.1, .9); }
  74% { transform: translateY(-4%) scale(.98, 1.02); }
  86%, 100% { transform: translateY(0) scale(1); }
}
.loop-tick .loop-target .mark { animation: l-tick 4s var(--ease) infinite; }
@keyframes l-tick { 0%, 20% { transform: rotate(0); } 25%, 45% { transform: rotate(90deg); } 50%, 70% { transform: rotate(180deg); } 75%, 95% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }
.loop-float .loop-target .mark { animation: l-float 3.6s ease-in-out infinite alternate; }
@keyframes l-float { from { transform: translateY(4%) rotate(-3deg); } to { transform: translateY(-6%) rotate(3deg); } }
.loop-shimmer .loop-target .wm, .loop-shimmer .mo-type {
  background: linear-gradient(105deg, var(--hfg) 38%, var(--acc) 50%, var(--hfg) 62%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: l-shimmer 3.2s linear infinite;
  /* background-clip: text only paints inside the box, so give tall glyphs room. */
  padding-block: .2em; margin-block: -.2em;
}
.loop-shimmer .mo-type.mo-var { animation: l-shimmer 3.2s linear infinite, mo-w calc(var(--dur) * 2.5) var(--ease) infinite alternate; }
.loop-shimmer .loop-target .mark { animation: l-breathe 4.5s ease-in-out infinite; }
@keyframes l-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.loop-shimmer .btn-p::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%) 0 0 / 250% 100%; animation: l-shimmer 2.6s linear infinite; mix-blend-mode: soft-light; }
.loop-jitter .loop-target .mark { animation: l-jit 2.8s steps(1) infinite; }
@keyframes l-jit {
  0%, 84% { transform: none; filter: none; }
  86% { transform: translate(-6%, 2%); filter: drop-shadow(3px 0 0 var(--acc)); }
  89% { transform: translate(5%, -2%) skewX(-8deg); filter: drop-shadow(-3px 0 0 var(--acc)); }
  92% { transform: translate(-2%, 0); }
  95% { transform: none; filter: none; }
}

.m-anim { transform-box: fill-box; transform-origin: center; }
.loop-float .m-anim { animation: m-float 7s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.4s); }
@keyframes m-float { to { transform: translate(5%, -7%) rotate(8deg); } }
.loop-bounce .m-anim { animation: m-bounce 2.2s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .18s); }
@keyframes m-bounce { 0%, 55%, 100% { transform: scale(1); } 25% { transform: scale(1.14); } }
.loop-breathe .m-anim { animation: m-breathe 9s ease-in-out infinite alternate; }
@keyframes m-breathe { to { transform: scale(1.06) rotate(2deg); } }
.loop-tick .m-anim { animation: m-tick 3.2s var(--ease) infinite; }
@keyframes m-tick { 0%, 40% { transform: translateX(0); } 50%, 90% { transform: translateX(4%); } 100% { transform: translateX(0); } }
.loop-shimmer .m-anim { animation: m-shim 3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.4s); }
@keyframes m-shim { 50% { opacity: .35; } }
.loop-jitter .m-anim { animation: m-jit 3.4s steps(1) infinite; }
@keyframes m-jit { 0%, 86% { transform: none; } 88% { transform: translate(-3%, 1%); } 92% { transform: translate(3%, -1%); } 96% { transform: translate(-1%, 0); } }

@media (prefers-reduced-motion: reduce) {
  .kit *, .kit *::before, .kit *::after, .kit .tile { animation: none !important; transition: none !important; }
}

/* ---------- Small screens: panel on top, shuffle pinned ---------- */
/* Mobile-only chrome, hidden on desktop */
.sheet-head, .fab, .sheet-backdrop { display: none; }

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }

  /* The panel becomes a bottom sheet over the kit. */
  /* Animated with top, not transform: a transform would capture the fixed Shuffle button inside it. */
  .panel {
    position: fixed; left: 0; right: 0; top: 102%; height: calc(100% - max(56px, 8vh)); z-index: 45;
    border-right: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -20px 50px rgba(0,0,0,.5);
    padding: 0 16px 104px; visibility: hidden;
    transition: top .35s cubic-bezier(.2,.9,.1,1), visibility 0s linear .35s;
  }
  .app.sheet-open .panel { top: max(56px, 8vh); visibility: visible; transition: top .35s cubic-bezier(.2,.9,.1,1); }
  .panel .shuffle { visibility: visible; }
  .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .app.sheet-open .sheet-backdrop { opacity: 1; pointer-events: auto; }
  .sheet-head {
    display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2;
    margin: 0 -16px; padding: 10px 16px 8px; background: var(--ui-bg); border-bottom: 1px solid var(--ui-line);
  }
  .sheet-head::before { content: ''; position: absolute; left: 50%; top: 5px; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: #3a3a3a; }
  .sheet-head b { font-size: 15px; padding-top: 6px; }
  .sheet-close { margin-top: 6px; border: 0; border-radius: 9px; padding: 8px 14px; font-weight: 700; background: var(--ui-bg3); }
  .p-head { padding-top: 4px; }

  /* Floating action bar: Shuffle + Controls */
  .shuffle { position: fixed; left: 12px; right: 156px; bottom: 12px; width: auto; min-height: 64px; z-index: 50; flex-direction: row; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
  .shuffle .sh-label { font-size: 28px; }
  .shuffle .sh-row { width: auto; gap: 10px; min-width: 0; }
  .shuffle .sh-row #shName { display: none; }
  .shuffle .sh-key { display: none; }
  .shuffle .sh-dice { position: static; flex: none; }
  .fab {
    display: grid; place-items: center; align-content: center; gap: 3px; position: fixed; bottom: 12px; z-index: 50;
    width: 66px; height: 64px; padding: 0 4px; border: 0; border-radius: 16px; background: #f2f2f2; color: #111;
    font-size: 10.5px; font-weight: 700; line-height: 1.1; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.45);
    transition: background .2s, transform .12s;
  }
  .fab:active { transform: scale(.95); }
  .fab svg { width: 22px; height: 22px; }
  .controls-btn { right: 12px; }
  .copy-fab { right: 84px; background: #f0c36a; }
  .copy-fab.done { background: #8fd19e; }
  .toast { bottom: 90px; }
  .app.sheet-open .controls-btn { background: #d9d9d9; box-shadow: inset 0 0 0 2px #111, 0 10px 30px rgba(0,0,0,.45); }
}

/* ---------- Narrow kits (container queries last, so they win) ---------- */
@container kit (max-width: 900px) {
  .bento { --cols: 6; }
  .t-hero { --c: 6; --r: 7; }
  .t-logo, .t-logos { --c: 3; --r: 3; }
  .t-palette { --c: 6; --r: 4; }
  .t-stat { --c: 6; --r: 2; }
  .t-spec { --c: 6; --r: 5; }
  .t-hier { --c: 6; --r: 6; }
  .t-article { --c: 6; --r: 7; }
  .t-poster { --c: 3; --r: 8; }
  .t-cards, .t-voice, .t-social, .t-gl, .t-icons, .t-pattern { --c: 3; --r: 4; }
  .t-ui, .t-motion, .t-a11y { --c: 6; --r: 4; }
  .t-marquee { --c: 6; --r: 2; }
  .t-photohead { --c: 6; --r: 6; }
}
@container kit (max-width: 560px) {
  .bento { --cols: 2; grid-auto-rows: calc((100cqi - var(--gap)) / 2 * .62); }
  .tile { --c: 2 !important; }
  .t-hero { --r: 6; } .t-logo, .t-logos { --r: 3; } .t-palette { --r: 4; } .t-spec, .t-hier { --r: 5; }
  .t-poster { --r: 6; } .t-article { --r: 10; } .t-stat { --r: 2; } .t-gl { --r: 4; }
  .t-ui, .t-cards, .t-voice, .t-motion, .t-social, .t-pattern, .t-a11y, .t-icons { --r: 4; } .t-marquee { --r: 2; }
  .t-hier .hi-spec { display: none; }
  .t-hero { --r: 8; }
  .hero-split { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); }
  .hero-split .hero-text { padding-bottom: 0; }
  .hero-split .hx-wrap { font-size: calc(var(--hsz) * 12cqi); max-height: 300px; }
  .hero-split .hero-ph { grid-column: 1; grid-row: 3; margin: clamp(14px, 3cqi, 28px) clamp(16px, 4cqi, 34px) clamp(16px, 4cqi, 34px); }
  .hero-card { width: auto; right: clamp(14px, 3cqi, 26px); }
  .hero-card .hx-wrap { font-size: calc(var(--hsz) * 10cqi); }
  .poster-head { font-size: calc(var(--hsz) * 14cqi); }
  .hero-foot { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .nav nav { display: none; }
  .t-palette { --r: 6; }
  .swatches { flex-direction: column; }
  .swatch { flex-direction: row; align-items: center; font-size: 12px; padding: 8px 14px; }
  .swatch:hover { flex-grow: inherit !important; }
  .sw-name { font-size: 1.5em; flex: 1; }
  .sw-meta .mono.dim, .sw-ratio { display: none; }
  .sw-meta { align-items: flex-end; }
  .mo-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .mo-curve svg { height: 70px; flex: none; }
  .t-photohead { --r: 5; }
  .ph-bottom .ph-copy { right: 16px; }
  .ph-left .ph-copy { width: auto; right: 16px; }
  .ph-center .ph-copy { left: 16px; right: 16px; }
  .t-photohead .hx-wrap { font-size: calc(var(--hsz) * 11cqi); }
}