/* your.browser sample · 1982 · teenage engineering + apple */
@font-face{font-family:"Inter";src:url("fonts/Inter-Var.ttf") format("truetype");font-weight:100 900;font-display:block}
@property --bg{syntax:"<color>";inherits:true;initial-value:#000}
@property --card{syntax:"<color>";inherits:true;initial-value:#0b0b0b}
@property --card2{syntax:"<color>";inherits:true;initial-value:#121212}
@property --line{syntax:"<color>";inherits:true;initial-value:#1f1f1f}
@property --line2{syntax:"<color>";inherits:true;initial-value:#2c2c2c}
@property --ink{syntax:"<color>";inherits:true;initial-value:#fff}
@property --dim{syntax:"<color>";inherits:true;initial-value:#8e8e8e}
@property --dim2{syntax:"<color>";inherits:true;initial-value:#5c5c5c}
@property --red{syntax:"<color>";inherits:true;initial-value:#ff452b}
@property --red2{syntax:"<color>";inherits:true;initial-value:#ff452b33}
@property --accent{syntax:"<color>";inherits:true;initial-value:#ffffff}
@property --accent2{syntax:"<color>";inherits:true;initial-value:#8e8e8e}
@property --key{syntax:"<color>";inherits:true;initial-value:#161616}
@property --key-line{syntax:"<color>";inherits:true;initial-value:#333}
@property --key-ink{syntax:"<color>";inherits:true;initial-value:#fff}
@property --made-ink{syntax:"<color>";inherits:true;initial-value:#7a7a7a}
:root{
  --bg:#000;--card:#0b0b0b;--card2:#121212;--line:#1f1f1f;--line2:#2c2c2c;
  --ink:#fff;--dim:#8e8e8e;--dim2:#5c5c5c;--red:#ff452b;--red2:#ff452b33;
  --accent:#fff;--accent2:#8e8e8e;--key:#161616;--key-line:#333;--key-ink:#fff;--made-ink:#7a7a7a;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --gap:10px;--r:22px;--pad:12px;--made:22px;--strip:48px;--hd:44px;--win-hd:30px;
  --ease:cubic-bezier(.2,.8,.2,1);--dur-color:.4s;
}
html{
  transition:
    --bg var(--dur-color) var(--ease),--card var(--dur-color) var(--ease),--card2 var(--dur-color) var(--ease),
    --line var(--dur-color) var(--ease),--line2 var(--dur-color) var(--ease),--ink var(--dur-color) var(--ease),
    --dim var(--dur-color) var(--ease),--dim2 var(--dur-color) var(--ease),--red var(--dur-color) var(--ease),
    --red2 var(--dur-color) var(--ease),--accent var(--dur-color) var(--ease),--accent2 var(--dur-color) var(--ease),
    --key var(--dur-color) var(--ease),--key-line var(--dur-color) var(--ease),--key-ink var(--dur-color) var(--ease),
    --made-ink var(--dur-color) var(--ease),background-color var(--dur-color) var(--ease),color var(--dur-color) var(--ease);
}
::selection{background:var(--ink);color:var(--bg)}

[data-shuffle]{color:var(--dim)}
html:not([data-pal=mono]) [data-shuffle],
html:not([data-pal=mono]) [data-palette]{color:var(--accent)}
[data-palette]{width:32px;padding:0;justify-content:center;color:var(--dim)}
.pal-note{position:absolute;top:calc(var(--sat) + (var(--hd) / 2));left:50%;transform:translate(-50%,-50%);z-index:12;margin:0;padding:3px 9px;border-radius:999px;border:1px solid var(--line2);background:color-mix(in oklch,var(--bg) 82%,transparent);font-size:10px;letter-spacing:.08em;color:var(--dim);line-height:1.2;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s var(--ease)}
.pal-note.on{opacity:1}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;height:100dvh;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-weight:200;text-transform:lowercase;-webkit-font-smoothing:antialiased;overscroll-behavior:none;overflow:hidden;touch-action:manipulation;color-scheme:dark}
button,input,textarea,select{font:inherit;color:inherit;text-transform:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
input,textarea{text-transform:none}
#app{position:fixed;inset:0;display:grid;grid-template-columns:calc(var(--strip) + var(--sal)) 1fr;grid-template-rows:auto 1fr var(--made);overflow:hidden;padding-right:var(--sar);padding-bottom:var(--sab)}
.strip{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 8px;border-right:1px solid var(--line);min-width:0}
.strip .sk{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--dim2);transition:color .2s,background .2s,border-color .2s;border:1px solid transparent}
.strip .sk svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.strip .sk.on,.strip .sk:hover{color:var(--ink);background:var(--key);border-color:var(--key-line)}
.strip .sk[aria-current=true]{color:var(--ink);border-color:var(--accent)}
.strip .gap{flex:1}
.col-top{position:relative;grid-column:1 / -1;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:12px;height:calc(var(--hd) + var(--sat));padding:var(--sat) 14px 0 calc(14px + var(--sal));border-bottom:1px solid var(--line)}
.top-left{display:flex;align-items:center;gap:10px;min-width:0}
.wordmark{font-size:18px;font-weight:200;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.wordmark i{font-style:normal;color:var(--dim)}
.tools{display:flex;align-items:center;gap:4px}
.tools button,.home-btn{height:32px;padding:0 10px;border-radius:999px;color:var(--dim);font-size:13px;letter-spacing:.02em;display:inline-flex;align-items:center;gap:6px}
.tools button:hover,.tools button:focus-visible,.home-btn:hover,.home-btn:focus-visible{color:var(--ink)}
.tools button:focus-visible,.home-btn:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.tools button svg,.home-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.tools .lock{width:32px;padding:0;justify-content:center;color:var(--ink)}
.tools .lock.locked{color:var(--dim)}
.home-btn{display:none;background:var(--ink);color:var(--bg);border:1px solid var(--ink);font-weight:300;flex:none}
#app.fs .home-btn{display:inline-flex}
#app.fs .home-btn:hover,#app.fs .home-btn:focus-visible{color:var(--bg);background:var(--ink)}
#app.fs [data-shuffle],#app.fs [data-palette]{display:none}
.stage{grid-column:2;grid-row:2;display:grid;grid-template-columns:1.2fr 1fr .92fr;grid-template-rows:1fr 1fr;gap:var(--gap);padding:8px 14px 8px 12px;min-height:0;min-width:0}
.win{position:relative;min-width:0;min-height:0;container-type:size;container-name:frame;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transform-origin:top left;transition:border-color .2s}
.win:focus-within,.win.on{border-color:var(--line2)}
.win.lift{z-index:20;box-shadow:0 16px 40px #000a;border-color:#555;pointer-events:none}
.win.drop{border-color:var(--accent)}
.win-hd{flex:none;height:var(--win-hd);display:flex;align-items:center;gap:8px;padding:0 8px 0 12px;border-bottom:1px solid var(--line);cursor:grab;-webkit-user-select:none;user-select:none}
.win.lift .win-hd{cursor:grabbing}
.win-dot{width:6px;height:6px;border-radius:50%;background:var(--dim2);flex:none}
.win-ttl{flex:1;min-width:0}
.win-lock-ic{display:none;width:11px;height:11px;color:var(--dim);flex:none}
.win-lock-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.locked > .win-hd .win-lock-ic{display:block}
.win[data-app=feed] .win-dot{background:var(--accent);animation:pulse 1.6s steps(2) infinite}
@keyframes pulse{50%{opacity:.25}}
.win-ttl{font-size:max(10px,12px);color:var(--dim);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-body{flex:1;min-width:0;min-height:0;overflow:hidden;padding:clamp(6px,2.6cqh,14px) clamp(8px,3cqi,14px);position:relative;container-type:size;container-name:page;--fit:1}
.win[data-slot="a"]{grid-column:1;grid-row:1 / 3}
.win[data-slot="b"]{grid-column:2;grid-row:1}
.win[data-slot="c"]{grid-column:3;grid-row:1}
.win[data-slot="d"]{grid-column:2;grid-row:2}
.win[data-slot="e"]{grid-column:3;grid-row:2}

/* in-window splits: panes live inside the held window's frame */
.split-grid{flex:1;min-width:0;min-height:0;display:grid;gap:5px;padding:5px;background:var(--bg);align-content:stretch}
.pane{position:relative;min-width:0;min-height:0;container-type:size;container-name:frame;background:var(--card);border:1px solid var(--line);border-radius:calc(var(--r) - 8px);overflow:hidden;display:flex;flex-direction:column;transform-origin:top left;--win-hd:24px}
.pane .win-hd{height:var(--win-hd);padding:0 8px}
.pane .win-ttl{font-size:max(10px,11px)}
.pane .win-body{padding:clamp(5px,2.4cqh,10px) clamp(6px,3cqi,10px)}
.pane .win-priv{top:var(--win-hd)}
[data-split="2"] > .split-grid{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
[data-split="3"] > .split-grid{grid-template-columns:1fr 1fr;grid-template-rows:1.15fr 1fr}
[data-split="3"] > .split-grid > :first-child{grid-column:1 / -1;grid-row:1}
[data-split="4"] > .split-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
[data-split="8"] > .split-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr)}
@container frame (min-aspect-ratio: 1/1){
  [data-split="2"] > .split-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
}
@container frame (min-aspect-ratio: 1.15/1){
  [data-split="3"] > .split-grid{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr}
  [data-split="3"] > .split-grid > :first-child{grid-column:auto;grid-row:auto}
  [data-split="8"] > .split-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr}
}

/* privacy lock */
.win-priv{position:absolute;left:0;right:0;top:var(--win-hd);bottom:0;z-index:5;display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:color-mix(in oklch,var(--bg) 28%,transparent);backdrop-filter:blur(14px) saturate(.8);-webkit-backdrop-filter:blur(14px) saturate(.8);color:var(--ink);pointer-events:auto;cursor:default}
.locked > .win-priv,.unlocking > .win-priv{display:flex}
.locked > .win-body{filter:blur(16px) brightness(.62);opacity:.88}
.priv-idle,.priv-scan{display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.unlocking > .win-priv .priv-idle{display:none}
.priv-scan[hidden]{display:none}
.unlocking > .win-priv .priv-scan{display:flex}
.priv-ic,.face-id{width:clamp(22px,12cqi,36px);height:clamp(22px,12cqi,36px);fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.priv-idle span,.priv-scan span{font-size:max(9px,11px);letter-spacing:.16em;color:var(--dim);font-weight:200}
.unlocking .face-id .c,.unlocking .face-id .eye,.unlocking .face-id .smile,.unlocking .face-id .scan{stroke-dasharray:24;stroke-dashoffset:24;animation:face-draw .7s var(--ease) forwards}
.unlocking .face-id .c.tl{animation-delay:.05s}
.unlocking .face-id .c.tr{animation-delay:.12s}
.unlocking .face-id .c.bl{animation-delay:.18s}
.unlocking .face-id .c.br{animation-delay:.24s}
.unlocking .face-id .eye{stroke:none;fill:currentColor;opacity:0;animation:face-eye .35s var(--ease) .4s forwards}
.unlocking .face-id .smile{animation-delay:.55s}
.unlocking .face-id .scan{stroke:var(--accent);stroke-width:1;animation:face-scan .7s var(--ease) .15s forwards}
@keyframes face-draw{to{stroke-dashoffset:0}}
@keyframes face-eye{to{opacity:1}}
@keyframes face-scan{0%{stroke-dashoffset:24;opacity:0}20%{opacity:1}80%{opacity:1}100%{stroke-dashoffset:-24;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .unlocking .face-id .c,.unlocking .face-id .eye,.unlocking .face-id .smile,.unlocking .face-id .scan{animation:none;stroke-dashoffset:0;opacity:1}
}


/* footer credit — reserved band, never covered */
.made-bar{grid-column:1 / -1;grid-row:3;display:flex;align-items:center;justify-content:center;height:var(--made);background:var(--bg);border-top:1px solid var(--line);z-index:8}
.made-bar .made{margin:0;font-weight:200;font-size:10px;letter-spacing:.12em;color:var(--made-ink);line-height:1;pointer-events:none;-webkit-user-select:none;user-select:none}

/* full screen: one window fills the stage; the ..1982.. tag stays in its reserved band */
#app.fs{grid-template-columns:1fr}
#app.fs .strip{display:none}
#app.fs .stage{grid-column:1;grid-template-columns:1fr;grid-template-rows:1fr;padding:8px 14px}
#app.fs .win:not(.fs-win){visibility:hidden;pointer-events:none}
#app.fs .win.fs-win{grid-column:1 / -1 !important;grid-row:1 / -1 !important;z-index:6;border-color:var(--line2)}
#app.fs .win.fs-win > .win-hd,#app.fs .fs-pane > .win-hd{cursor:default;height:32px}
#app.fs .fs-win > .win-body,#app.fs .fs-pane > .win-body{padding-bottom:28px}
#app.fs .fs-win .bars,#app.fs .fs-win .quote{max-width:36rem}
#app.fs .win.has-fs-pane .pane:not(.fs-pane):not(:has(.fs-pane)){display:none!important}
#app.fs .win.has-fs-pane .split-grid:has(.fs-pane){grid-template:1fr / 1fr!important;padding:0;gap:0}
#app.fs .fs-pane{border:0;border-radius:calc(var(--r) - 2px)}
#fs-edge{display:none;position:absolute;left:0;right:0;bottom:calc(var(--made) + var(--sab));height:28px;z-index:15;touch-action:none}
#app.fs #fs-edge{display:block}
#fs-edge i{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:36px;height:4px;border-radius:999px;background:var(--line2);pointer-events:none}

/* Page typography scales with the pane, not the viewport.
   Each .win-body is a size container (page). Titles, labels, the clock, lines,
   grids and feed rows use cqi/cqh + clamp() so a split never leaves type as
   large as the pane. --fit is a ResizeObserver safety scale.
   In the real browser this maps to per-pane zoom (Chromium page zoom plus
   viewport width per pane). */
.win-body{
  --fs-title:clamp(10px,7cqi,36px);
  --fs-sub:clamp(8px,2.8cqi,12px);
  --fs-clock:clamp(14px,8cqi,56px);
  --fs-quote:clamp(10px,3.6cqi,18px);
  --fs-meta:clamp(8px,2.4cqi,11px);
  --fs-stat:clamp(12px,6cqi,26px);
  --fs-row:clamp(8px,2.6cqi,11px);
  --gap-page:clamp(4px,2cqh,10px);
}
.win-body > .pg,
.win-body > .feed,
.win-body > .site{zoom:var(--fit,1);min-width:0;min-height:0;max-width:100%}
@supports not (zoom:1){
  .win-body > .pg,
  .win-body > .feed,
  .win-body > .site{transform:scale(var(--fit,1));transform-origin:top left;width:calc(100% / var(--fit,1))}
}
.pg{height:100%;display:flex;flex-direction:column;gap:var(--gap-page);min-height:0;min-width:0;overflow:hidden}
.pg h2{font-size:var(--fs-title);font-weight:200;letter-spacing:-.03em;line-height:1.1;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg .sub{font-size:var(--fs-sub);color:var(--dim);letter-spacing:.06em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars{display:flex;flex-direction:column;gap:clamp(3px,1.2cqh,7px);margin-top:clamp(0px,.6cqh,4px);min-width:0}
.bars i{display:block;height:clamp(3px,1.2cqh,6px);border-radius:3px;background:var(--card2);max-width:100%}
.quote{margin-top:auto;font-size:var(--fs-quote);color:var(--dim);letter-spacing:-.01em;line-height:1.35;max-width:22ch;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.tl{margin-top:clamp(4px,2.5cqh,16px);display:flex;flex-direction:column;gap:clamp(4px,1.6cqh,8px);flex:1;min-height:0;justify-content:flex-start}
.lane{height:clamp(10px,5.5cqh,28px);background:var(--card2);border-radius:clamp(4px,1.2cqi,8px);position:relative;overflow:hidden;min-height:0}
.clip{position:absolute;top:clamp(2px,.8cqh,4px);bottom:clamp(2px,.8cqh,4px);border-radius:6px;background:var(--line);border:1px solid var(--key-line)}
.clip.a{left:8%;width:28%}
.clip.b{left:40%;width:22%;background:var(--card2)}
.clip.c{left:14%;width:46%}
.mix{display:flex;gap:clamp(4px,1.6cqi,8px);align-items:flex-end;height:clamp(14px,8cqh,42px);margin-top:auto;min-height:0}
.mix b{flex:1;background:var(--line);border-radius:3px 3px 0 0;min-width:0}
.time{font-size:var(--fs-clock);font-weight:200;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;margin-top:clamp(0px,.5cqh,2px);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.keys{display:flex;gap:clamp(3px,1.2cqi,6px);margin-top:clamp(0px,.4cqh,2px)}
.keys i{width:clamp(12px,5cqi,22px);height:clamp(12px,5cqi,22px);border-radius:6px;background:var(--key);border:1px solid var(--key-line);display:block;flex:none}
.tran{display:flex;gap:clamp(6px,2cqi,10px);align-items:center;color:var(--dim2);font-size:var(--fs-meta);letter-spacing:.08em;margin-top:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tran i{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--ink);display:block;flex:none;transform:scale(clamp(.7,2cqi,1))}
.site{display:flex;flex-direction:column;gap:var(--gap-page);height:100%;min-height:0;overflow:hidden}
.hero{flex:1;min-height:clamp(16px,14cqh,80px);background:var(--card2);border-radius:clamp(6px,2cqi,12px);border:1px solid var(--line)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(4px,1.6cqi,8px)}
.cards u{display:block;height:clamp(18px,10cqh,44px);background:var(--card2);border-radius:clamp(6px,1.8cqi,10px);border:1px solid var(--line);text-decoration:none}
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(3px,1.4cqi,6px);flex:1;min-height:0;align-content:start}
.ggrid i{display:block;background:var(--card2);border-radius:clamp(4px,1.4cqi,8px);aspect-ratio:1;min-height:0;max-height:100%}
.ggrid i:nth-child(2){background:var(--line)}
.ggrid i:nth-child(3){background:var(--key)}
.ggrid i:nth-child(5){background:var(--line2)}
.atlas{flex:1;min-height:0}
.atlas svg{width:100%;height:100%;display:block}

/* security feed */
.feed{height:100%;display:flex;flex-direction:column;min-height:0;min-width:0;gap:var(--gap-page,8px);overflow:hidden}
.feed-hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.feed-hd .sub{font-size:var(--fs-sub,11px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.feed-hd .ex{font-size:var(--fs-meta,10px);color:var(--dim2);letter-spacing:.08em;border:1px solid var(--line2);border-radius:999px;padding:2px 7px;flex:none}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(3px,1.2cqi,6px);min-width:0}
.stat{border:1px solid var(--line);border-radius:10px;padding:6px 7px 7px;min-width:0}
.stat b{display:block;font-size:var(--fs-stat);font-weight:200;font-variant-numeric:tabular-nums;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat span{display:block;font-size:var(--fs-meta);color:var(--dim);letter-spacing:.04em;margin-top:clamp(1px,.6cqh,3px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat span.short{display:none}
.ev{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:0}
.ev li{list-style:none;display:grid;grid-template-columns:clamp(32px,14cqi,52px) 1fr auto;gap:clamp(4px,1.4cqi,6px);align-items:baseline;padding:clamp(2px,.8cqh,5px) 0;border-top:1px solid var(--line);font-size:var(--fs-row);line-height:1.2;min-width:0}
.ev{margin:0;padding:0}
.ev .when{color:var(--dim2);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ev .host{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev .act{color:var(--accent);letter-spacing:.04em}
.ev li.fresh{animation:in .35s var(--ease)}
@keyframes in{from{opacity:0;transform:translateY(-6px)}}

/* social placeholder */
.soc-pg .rows{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;justify-content:center}
.soc-pg .rowp{display:flex;gap:8px;align-items:center}
.soc-pg .av{width:22px;height:22px;border-radius:50%;background:var(--line);border:1px solid var(--line2);flex:none}
.soc-pg .ln{flex:1;height:6px;border-radius:3px;background:var(--card2)}

/* sheets + pills (record.label pattern, compact) */
.sheet{position:fixed;inset:0 0 var(--made) 0;background:#000a;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.sheet[hidden]{display:none}
.sheet-card{background:var(--card);border:1px solid var(--line2);border-radius:22px;width:min(400px,100%);max-height:min(70dvh,calc(100% - 8px));overflow:hidden;padding:20px 18px 16px;position:relative;display:flex;flex-direction:column}
.sheet-x{position:absolute;right:12px;top:10px;color:var(--dim);font-size:13px;padding:6px;z-index:1}
.sheet-body{flex:1 1 auto;min-height:0}
.lbl{font-size:11px;color:var(--dim);letter-spacing:.06em}
.field{display:flex;flex-direction:column;gap:5px;margin:10px 0}
.field input,.field textarea{background:var(--bg);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;font-weight:200;text-transform:none;outline:none}
.field input:focus,.field textarea:focus{border-color:var(--ink)}
.field textarea{min-height:70px;resize:none}
.row{display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:999px;padding:7px 12px;font-size:13px;white-space:nowrap}
.pill.w{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:300}
.pill.ghost{color:var(--dim)}
.pill:active{transform:scale(.97)}
.checks{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.chk{border:1px solid var(--line2);border-radius:999px;padding:5px 10px;font-size:12px;color:var(--dim)}
.chk.on{color:var(--ink);border-color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(var(--made) + 14px + var(--sab));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);border-radius:999px;padding:9px 16px;font-size:13px;font-weight:300;opacity:0;pointer-events:none;transition:.25s var(--ease);z-index:60;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}
.dim{color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  :root{--dur-color:.01ms}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* portrait / narrow */
@media (max-width:820px){
  :root{--r:16px;--gap:8px;--strip:44px;--hd:40px;--pad:8px}
  .stage{grid-template-columns:1fr 1fr;grid-template-rows:1.15fr 1fr .78fr;padding:6px 10px 6px 8px}
  .win[data-slot="a"]{grid-column:1 / 3;grid-row:1}
  .win[data-slot="b"]{grid-column:1;grid-row:2}
  .win[data-slot="c"]{grid-column:2;grid-row:2}
  .win[data-slot="d"]{grid-column:1;grid-row:3}
  .win[data-slot="e"]{grid-column:2;grid-row:3}
  .wordmark{font-size:16px}
  .col-top{padding:var(--sat) 10px 0 calc(10px + var(--sal))}
  #app.fs .stage{padding:6px 10px}
  .pal-note{top:auto;left:auto;right:10px;bottom:calc(var(--made) / 2);transform:translateY(50%);z-index:12}
}
@container page (max-width: 280px) {
  .stats{grid-template-columns:1fr;gap:0}
  .stat{display:flex;align-items:baseline;gap:8px;padding:2px 0;border:0;border-radius:0}
  .stat b{min-width:1.3em}
  .stat span{margin-top:0}
  .stat span.full{display:none}
  .stat span.short{display:inline}
  .feed-hd .sub{white-space:nowrap}
  .ev li{grid-template-columns:auto 1fr;gap:2px 8px;padding:clamp(2px,.6cqh,4px) 0}
  .ev .act{grid-column:1;grid-row:1}
  .ev .when{grid-column:2;grid-row:1;justify-self:end}
  .ev .host{grid-column:1 / -1;grid-row:2}
  .ev li:nth-child(n+3){display:none}
}
@container page (max-width: 280px) and (max-height: 260px) {
  .ev li{grid-template-columns:1fr auto;gap:6px;padding:clamp(2px,.6cqh,4px) 0}
  .ev .when{grid-column:1;grid-row:1;justify-self:start}
  .ev .act{grid-column:2;grid-row:1;justify-self:end}
  .ev .host{display:none}
}
@container page (max-height: 220px) {
  .ev li:nth-child(n+3){display:none}
  .mix,.keys{display:none}
}
@container page (max-height: 140px) {
  .tl,.mix,.keys,.tran,.quote,.hero,.cards,.ggrid,.ev,.stats{display:none}
  .time{font-size:clamp(12px,16cqh,22px)}
  .bars{gap:2px}
  .bars i{height:3px}
  .pg{gap:3px}
  .quote{-webkit-line-clamp:2}
}
@container page (max-height: 72px) {
  .time,.keys,.tl,.mix,.tran,.bars,.quote,.hero,.cards,.ggrid,.ev,.stats,.feed-hd .ex{display:none}
  .pg{gap:2px;justify-content:center}
  .pg h2{font-size:clamp(9px,8cqi,14px)}
}
@container page (max-width: 120px) {
  .pg h2{font-size:clamp(9px,9cqi,14px)}
  .keys,.tran{display:none}
}
@container frame (max-height: 96px) {
  .win-hd{height:max(18px,20px);padding:0 6px}
  .win-ttl{font-size:max(10px,10px)}
}

/* short landscape (phone landscape) */
@media (max-height:500px){
  :root{--hd:32px;--gap:6px;--r:14px;--made:16px;--strip:40px}
  .col-top{height:calc(var(--hd) + var(--sat))}
  .wordmark{font-size:15px}
  .stage{grid-template-columns:1.15fr 1fr 1fr 1fr .9fr;grid-template-rows:1fr;padding:4px 8px 4px 6px}
  .win[data-slot="a"],
  .win[data-slot="b"],
  .win[data-slot="c"],
  .win[data-slot="d"],
  .win[data-slot="e"]{grid-column:auto;grid-row:1}
  .win[data-slot="a"]{grid-column:1}
  .win[data-slot="b"]{grid-column:2}
  .win[data-slot="c"]{grid-column:3}
  .win[data-slot="d"]{grid-column:4}
  .win[data-slot="e"]{grid-column:5}
  :root{--win-hd:24px}
  .win-body{padding:8px 10px}
  .win-hd{height:var(--win-hd);padding:0 8px}
  .stats{grid-template-columns:1fr;gap:3px}
  .stat{padding:2px 6px}
  .ev li:nth-child(n+3){display:none}
  .mix,.tran{display:none}
  .strip{padding-top:calc(var(--sat) + 4px);gap:2px}
  .strip .sk{width:32px;height:32px}
  #app.fs .stage{padding:4px 8px}
}

@media (min-width:821px) and (max-height:760px){
  :root{--hd:40px;--gap:8px}
  .win-body{padding:10px 12px}
}

@media (max-width:430px){.pal-note{letter-spacing:.05em;font-size:9px}}

@container (max-height: 160px) {
  .priv-ic,.face-id{width:24px;height:24px}
  .priv-idle span,.priv-scan span{font-size:9px;letter-spacing:.12em}
  .win-priv{gap:6px}
}