/* ═══════════════════════════════════════════════════════════════════════════
   MOUMONI.OS — style.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  --pf:'Press Start 2P', ui-monospace, monospace;
  --mf:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg:#1c1530;      --bg2:#251c3d;
  --panel:#2a2145;   --panel2:#332757;
  --line:#4a3a72;    --line2:#120d20;
  --ink:#f3e7d1;     --ink2:#b5a7c9;  --ink3:#8477a0;
  --amber:#ffb45c;   --teal:#79ded0;  --pink:#ff8fc7;
  --purple:#ab8cff;  --green:#7fd06a; --red:#ef6a6a;
  --accent:var(--amber);
  --bar:#ffb45c;     --bar-ink:#1a1226;
  --shadow:0 0 0 2px var(--line2), 6px 6px 0 0 rgba(9,6,18,.55);
  --glow:0 0 22px rgba(255,180,92,.16);
  --dock-h:52px;
}
:root[data-theme="day"]{
  --bg:#e9dcf2;      --bg2:#f4ecfa;
  --panel:#fdf8f2;   --panel2:#f0e6f6;
  --line:#b9a3d0;    --line2:#3a2c55;
  --ink:#2b2340;     --ink2:#5d4f7a;  --ink3:#8a7ba8;
  --shadow:0 0 0 2px var(--line2), 6px 6px 0 0 rgba(90,66,130,.28);
  --glow:0 0 22px rgba(255,180,92,.30);
  /* readable on the pale day panels */
  --accent:#9a5a0f;  --teal:#12786a;  --pink:#c33a76;
  --purple:#6640c4;  --green:#3b8f2f; --red:#cc3f3a;  --bar-ink:#2b2340;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 13px/1.65 var(--mf);
  display:flex; flex-direction:column;
  overflow:hidden; overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  transition:background .5s ease, color .5s ease;
}
h1,h2,h3{font-family:var(--pf); font-weight:400; letter-spacing:.02em; margin:0}
a{color:var(--accent)}
kbd{font:inherit; border:1px solid currentColor; padding:0 4px; border-radius:2px; opacity:.85}
code{font-family:var(--mf); background:rgba(127,110,170,.18); padding:1px 4px}

/* ── Stage + canvas ─────────────────────────────────────────────────────── */
.stage{
  position:relative; flex:1 1 auto; min-height:0;
  opacity:0; transition:opacity .7s ease .05s;
}
.stage.is-live{opacity:1}
#room{display:block; width:100%; height:100%; image-rendering:pixelated; image-rendering:crisp-edges}

.hotspots{position:absolute; inset:0}
.hs{
  position:absolute; margin:0; padding:0; border:0; background:transparent;
  cursor:pointer; appearance:none; outline:none;
}
.hs:focus-visible{outline:2px dashed var(--accent); outline-offset:3px}

/* hover label */
.tip{
  position:absolute; transform:translate(-50%,-100%);
  font-family:var(--pf); font-size:9px; letter-spacing:.06em;
  background:var(--panel); color:var(--ink);
  padding:6px 9px; border:2px solid var(--line2); box-shadow:3px 3px 0 rgba(9,6,18,.5);
  pointer-events:none; white-space:nowrap; z-index:12;
  animation:pop .16s ease-out;
}
.tip::after{
  content:''; position:absolute; left:50%; bottom:-6px; margin-left:-3px;
  width:6px; height:6px; background:var(--panel);
  border-right:2px solid var(--line2); border-bottom:2px solid var(--line2);
  transform:rotate(45deg);
}
@keyframes pop{from{opacity:0; transform:translate(-50%,calc(-100% + 5px))}to{opacity:1}}

/* first-visit hint */
.hint{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  margin:0; font-family:var(--pf); font-size:9px; letter-spacing:.08em;
  color:var(--ink2); background:rgba(18,13,32,.55); border:2px solid var(--line2);
  padding:7px 12px; pointer-events:none; transition:opacity .4s ease, transform .4s ease;
}
:root[data-theme="day"] .hint{background:rgba(255,255,255,.6)}
.hint.is-pulse{animation:hintPulse 2.6s ease-in-out infinite}
.hint.is-gone{opacity:0; transform:translateX(-50%) translateY(8px)}
.hint__cursor{color:var(--accent)}
@keyframes hintPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ── Boot ───────────────────────────────────────────────────────────────── */
.boot{
  /* the boot screen is always the dark "power on" screen — it never inherits
     the room's day palette. one accent, and it shifts once, on the turn. */
  --ba:#ffb45c;  --ba2:#ffd79a;  --bd:#6f6592;
  position:fixed; inset:0; z-index:200; background:#0d0a18;
  display:grid; place-items:center; padding:24px;
  transition:opacity .4s ease, background .8s ease;
}
/* once it stops observing and starts reasoning, the amber settles into teal */
.boot.is-thinking{--ba:#79ded0; --ba2:#c9f5ed; --bd:#5f7686; background:#0a1016}
.boot.is-out{opacity:0; pointer-events:none}
.boot__inner{width:min(880px,100%)}
.boot__title{
  font-size:26px; color:#f3e7d1; margin:0 0 18px; letter-spacing:.02em;
  text-shadow:0 0 18px rgba(255,180,92,.35);
}
.boot__title span{color:var(--ba)}
.boot__foot{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:22px}
.boot__sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}

/* ── The loader thinks out loud about whoever just arrived ──────────────── */
.boot__stage{min-height:270px}
.th-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font:400 10px/1 var(--mf); letter-spacing:.14em; text-transform:uppercase;
  color:var(--bd); margin-bottom:8px;
}
.th-clock{color:var(--ba); font-variant-numeric:tabular-nums; opacity:.75}
.th-rail{height:2px; background:rgba(255,255,255,.07); margin-bottom:18px; overflow:hidden}
.th-rail__fill{
  display:block; height:100%; width:0; background:var(--ba);
  box-shadow:0 0 10px var(--ba); transition:width .5s cubic-bezier(.22,1,.36,1), background .6s ease;
}
.th-cols{display:flex; gap:30px; align-items:flex-start}

.th-window{
  flex:0 1 468px; min-width:0; height:238px; overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent 0, #000 26px);
          mask-image:linear-gradient(transparent 0, #000 26px);
}
.th-trace{transition:transform .34s cubic-bezier(.22,1,.36,1)}

.th-step{margin-bottom:11px; transition:opacity .4s ease}
.th-step.is-done{opacity:.42}
.th-step__head{
  display:flex; align-items:center; gap:8px;
  font-family:var(--pf); font-size:9px; letter-spacing:.05em; color:var(--ba);
  margin-bottom:7px;
}
.th-dot{width:6px; height:6px; flex:0 0 auto; background:var(--ba)}
.is-live .th-dot{animation:thBlink .9s steps(2) infinite}
@keyframes thBlink{50%{opacity:.2}}

.th-row{
  display:flex; align-items:baseline; gap:10px; padding:1px 0 1px 14px;
  font:400 12px/1.6 var(--mf);
  opacity:0; transform:translateY(3px); transition:opacity .3s ease, transform .3s ease;
}
.th-row.is-in{opacity:1; transform:none}
.th-key{
  flex:0 0 19ch; color:var(--bd);
  white-space:nowrap; overflow:hidden;
}
.th-key::after{content:' ·······································'; opacity:.35}
.th-val{
  position:relative; display:inline-block; min-width:var(--w,18ch);
  color:#dcd2ea; overflow:hidden; white-space:nowrap;
}
.th-val__t{display:inline-block; min-height:1.2em}
.th-val__m{
  position:absolute; inset:0; transform-origin:right center;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.20) 0 4px, transparent 4px 8px);
  transition:transform .42s cubic-bezier(.22,1,.36,1);
}
.th-val.is-pending .th-val__m{animation:thScan 1.1s linear infinite}
@keyframes thScan{to{background-position:16px 0}}
.th-val.is-open .th-val__m{transform:scaleX(0)}
.th-val.is-sealed .th-val__m{
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.09) 0 3px, transparent 3px 6px);
  animation:none;
}

/* the working out */
.th-say{
  margin:9px 0 14px; padding-left:14px; max-width:54ch;
  font:400 12px/1.65 var(--mf); color:#8a7fa8;
}
.th-say.is-loud{color:var(--ba2)}
.th-caret{display:inline-block; width:7px; height:1em; background:var(--ba);
  vertical-align:-2px; margin-left:2px; animation:thBlink .8s steps(2) infinite}

/* what it decided, with the confidence shown */
.th-panel{
  flex:0 0 auto; width:218px; padding:13px 14px;
  border:1px solid rgba(255,255,255,.10);
  opacity:0; transition:opacity .6s ease, border-color .6s ease;
}
.th-panel.is-framed{opacity:1; border-color:rgba(255,255,255,.16)}
.th-panel__t{
  font-family:var(--pf); font-size:8px; letter-spacing:.14em;
  color:var(--ba); margin-bottom:11px;
}
.th-panel__foot{
  margin:12px 0 0; font:400 9px/1.4 var(--mf);
  letter-spacing:.06em; color:var(--bd); opacity:.7;
}
.th-inf{list-style:none; margin:0; padding:0}
.th-inf__i{
  display:flex; align-items:center; gap:7px; padding:3.5px 0;
  font:400 10px/1.5 var(--mf); color:#e9e2f4;
  opacity:0; transform:translateX(-4px);
  transition:opacity .35s ease, transform .35s ease;
}
.th-inf__i.is-in{opacity:1; transform:none}
.th-inf__l{flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.th-inf__m{
  flex:0 0 42px; height:6px; background:rgba(255,255,255,.13);
  overflow:hidden;
}
.th-inf__b{
  display:block; height:100%; width:100%; background:var(--ba);
  box-shadow:0 0 8px var(--ba);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .7s cubic-bezier(.22,1,.36,1) .1s, background .6s ease;
}
.th-inf__c{
  flex:0 0 auto; color:var(--ba2); opacity:.85; font-variant-numeric:tabular-nums;
}

@media (max-width:760px){
  .th-cols{flex-direction:column-reverse; gap:18px; align-items:stretch}
  .th-window{flex:1 1 auto; width:100%; height:180px}
  .th-key{flex:0 0 13ch}
  .th-panel{width:100%}
}

.boot__enter{
  font-family:var(--pf); font-size:11px; letter-spacing:.08em;
  color:#0d0a18; background:var(--ba); border:0; padding:14px 20px;
  box-shadow:0 0 0 2px #0d0a18, 5px 5px 0 rgba(159,232,255,.30); cursor:pointer;
  animation:blinkBtn 1.1s steps(2) infinite;
}
.boot__enter:hover{background:var(--ba2)}
@keyframes blinkBtn{50%{box-shadow:0 0 0 2px #0d0a18, 5px 5px 0 rgba(255,255,255,.14)}}
.boot__skip{margin:0; font-size:11px; color:var(--bd)}

/* ── Windows ────────────────────────────────────────────────────────────── */
.windows{position:fixed; inset:0 0 var(--dock-h); z-index:30; pointer-events:none}
.win{
  position:absolute; display:flex; flex-direction:column; pointer-events:auto;
  background:var(--panel); border:2px solid var(--line2); box-shadow:var(--shadow);
  opacity:0; transform:translateY(10px) scale(.985);
  transition:opacity .18s ease, transform .18s ease;
}
.win.is-in{opacity:1; transform:none}
.win.is-out{opacity:0; transform:translateY(6px) scale(.99)}
.win.is-min{display:none}
.win.is-drag{transition:none; cursor:grabbing}
.win.is-flash{animation:flash .3s ease}
@keyframes flash{50%{box-shadow:0 0 0 2px var(--accent), 6px 6px 0 rgba(9,6,18,.55)}}

.win__bar{
  display:flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:8px 8px 8px 10px; cursor:grab; user-select:none;
  background:linear-gradient(var(--panel2), var(--panel));
  border-bottom:2px solid var(--line2);
}
.win.is-front .win__bar{background:linear-gradient(var(--bar), #e69a44); color:var(--bar-ink)}
.win__icon{font-size:12px; line-height:1; opacity:.85}
.win__title{font-family:var(--pf); font-size:10px; letter-spacing:.04em; flex:1 1 auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.win__btns{display:flex; gap:4px}
.win__b{
  width:20px; height:18px; display:grid; place-items:center; cursor:pointer;
  font:400 13px/1 var(--mf); color:var(--ink); background:var(--panel2);
  border:2px solid var(--line2); padding:0;
}
.win.is-front .win__b{color:var(--bar-ink); background:rgba(255,255,255,.6)}
.win__b:hover{background:var(--red); color:#fff}
.win__b--min:hover{background:var(--teal); color:#12202c}

.win__body{
  flex:1 1 auto; overflow:auto; padding:16px 18px 20px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.win__body::-webkit-scrollbar{width:10px}
.win__body::-webkit-scrollbar-thumb{background:var(--line); border:2px solid var(--panel)}
.win__body::-webkit-scrollbar-track{background:transparent}
.win__grip{
  position:absolute; right:0; bottom:0; width:14px; height:14px; cursor:nwse-resize;
  background:
    linear-gradient(135deg,transparent 46%,var(--line) 46%,var(--line) 54%,transparent 54%),
    linear-gradient(135deg,transparent 66%,var(--line) 66%,var(--line) 74%,transparent 74%);
}

/* ── Window content ─────────────────────────────────────────────────────── */
.p{margin:0 0 12px; color:var(--ink2)}
.note{margin:0 0 16px; font-size:11px; color:var(--ink3); font-style:italic}
.empty{margin:14px 0 0; font-size:11px; color:var(--ink3)}

.about__head{display:flex; gap:14px; align-items:center; margin-bottom:16px}
.avatar{
  position:relative; flex:0 0 auto; width:64px; height:64px; overflow:hidden;
  display:grid; place-items:center; background:var(--panel2);
  border:2px solid var(--line2); box-shadow:3px 3px 0 rgba(9,6,18,.4);
}
.avatar__img{width:100%; height:100%; object-fit:cover; image-rendering:pixelated}
.avatar__ini{font-family:var(--pf); font-size:24px; color:var(--accent)}
.avatar__scan{position:absolute; inset:0; background:repeating-linear-gradient(
  transparent 0 2px, rgba(0,0,0,.12) 2px 3px); pointer-events:none}
.term{margin:0 0 4px; font-size:11px; color:var(--ink3)}
.term__p{color:var(--teal)} .term__d{color:var(--purple)}
.about__hi{font-size:14px; margin:0 0 6px; color:var(--ink)}
.about__sub{margin:0; font-size:11px; color:var(--ink3)}

.kv{margin:16px 0 0; border-top:2px dashed var(--line); padding-top:12px}
.kv__row{display:flex; gap:10px; padding:3px 0; font-size:12px}
.kv__row dt{flex:0 0 74px; color:var(--ink3)}
.kv__row dd{margin:0; color:var(--ink2)}

.cards{display:grid; gap:12px}
.card{background:var(--panel2); border:2px solid var(--line2); padding:12px 13px;
  box-shadow:3px 3px 0 rgba(9,6,18,.35); transition:transform .12s ease, box-shadow .12s ease}
.card:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 rgba(9,6,18,.45)}
.card__head{display:flex; align-items:center; gap:8px; margin-bottom:2px}
.card__head h3{font-size:11px; color:var(--ink); flex:1 1 auto}
.chip{font-size:10px; padding:2px 6px; color:var(--teal); border:1px solid var(--teal); white-space:nowrap}
.card__year{margin:0 0 8px; font-size:10px; color:var(--ink3)}
.stack{display:flex; flex-wrap:wrap; gap:5px; margin:0}
.stack span{font-size:10px; padding:2px 6px; background:rgba(140,110,230,.14); color:var(--purple)}
.card__links{display:flex; gap:8px; margin:11px 0 0}
.btn{display:inline-block; font-family:var(--pf); font-size:9px; letter-spacing:.05em;
  text-decoration:none; padding:8px 10px; color:var(--bar-ink); background:var(--bar);
  border:2px solid var(--line2); box-shadow:2px 2px 0 rgba(9,6,18,.4)}
.btn:hover{filter:brightness(1.1); transform:translate(-1px,-1px); box-shadow:3px 3px 0 rgba(9,6,18,.5)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--big{font-size:10px; padding:11px 14px}

.grp{margin:0 0 18px}
.grp__t{font-size:10px; color:var(--accent); margin-bottom:9px; letter-spacing:.08em}
.bars{list-style:none; margin:0; padding:0}
.bars li{display:flex; align-items:center; gap:10px; padding:3px 0; font-size:12px}
.bars__n{flex:1 1 auto; color:var(--ink2)}
.bars__m{display:flex; gap:3px; flex:0 0 auto}
.bars__m i{width:12px; height:9px; background:var(--line); border:1px solid var(--line2)}
.bars__m i.on{background:var(--teal)}

.tl{list-style:none; margin:0 0 18px; padding:0 0 0 16px; border-left:2px solid var(--line)}
.tl__i{position:relative; margin-bottom:18px}
.tl__i::before{content:''; position:absolute; left:-22px; top:5px; width:8px; height:8px;
  background:var(--bar); border:2px solid var(--line2)}
.tl__i h3{font-size:11px; margin-bottom:4px}
.tl__meta{margin:0; font-size:11px; color:var(--teal)}
.tl__detail{margin:2px 0 6px; font-size:11px; color:var(--ink3)}
.ul{margin:6px 0 0; padding-left:16px; color:var(--ink2); font-size:12px}
.ul li{margin-bottom:5px}
.ul--lead li{margin-bottom:9px}
.ul li::marker{color:var(--accent)}

.mail{display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px;
  font:inherit; cursor:pointer; color:var(--ink); background:var(--panel2);
  border:2px solid var(--line2); padding:11px 12px; box-shadow:3px 3px 0 rgba(9,6,18,.35)}
.mail em{font-style:normal; font-family:var(--pf); font-size:9px; color:var(--accent)}
.mail:hover{background:var(--panel)}
.links{list-style:none; margin:14px 0 0; padding:0}
.links a{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink2);
  padding:9px 4px; border-bottom:1px dashed var(--line)}
.links a:hover{color:var(--accent); background:rgba(255,180,92,.07)}
.links__l{flex:0 0 80px; font-family:var(--pf); font-size:9px; color:var(--ink)}
.links__h{flex:1 1 auto; font-size:12px}
.links__a{opacity:.6}

.eq{display:flex; align-items:flex-end; gap:4px; height:34px; margin:0 0 14px}
.eq i{width:6px; background:var(--teal); animation:eq 1s ease-in-out infinite}
.eq i:nth-child(1){animation-delay:-.9s} .eq i:nth-child(2){animation-delay:-.7s}
.eq i:nth-child(3){animation-delay:-.5s} .eq i:nth-child(4){animation-delay:-.2s}
.eq i:nth-child(5){animation-delay:-.6s} .eq i:nth-child(6){animation-delay:-.3s}
.eq i:nth-child(7){animation-delay:-.8s}
@keyframes eq{0%,100%{height:6px}50%{height:32px}}
.tracks{list-style:none; margin:0; padding:0}
.tracks li{display:flex; align-items:baseline; gap:10px; padding:7px 0; border-bottom:1px dashed var(--line)}
.tracks__n{font-family:var(--pf); font-size:9px; color:var(--ink3)}
.tracks__t{flex:1 1 auto; color:var(--ink2)}
.tracks__a{font-size:11px; color:var(--ink3)}

/* ── Dock ───────────────────────────────────────────────────────────────── */
.dock{
  flex:0 0 var(--dock-h); z-index:40;
  display:flex; align-items:center; gap:12px; padding:0 12px;
  background:var(--panel); border-top:2px solid var(--line2);
  box-shadow:0 -4px 0 rgba(9,6,18,.25);
}
.dock__brand{display:flex; align-items:center; gap:8px; font-family:var(--pf); font-size:10px;
  color:var(--ink); flex:0 0 auto; letter-spacing:.04em;
  background:none; border:0; padding:6px 4px; cursor:pointer}
.dock__brand:hover{color:var(--accent)}
.dock__led{width:8px; height:8px; background:var(--green); box-shadow:0 0 8px var(--green);
  animation:led 2.4s ease-in-out infinite}
@keyframes led{50%{opacity:.35}}
.dock__nav{display:flex; gap:5px; flex:1 1 auto; overflow-x:auto; scrollbar-width:none}
.dock__nav::-webkit-scrollbar{display:none}
.dock__btn{
  display:flex; align-items:center; gap:7px; flex:0 0 auto; cursor:pointer;
  font:inherit; color:var(--ink2); background:transparent; border:2px solid transparent;
  padding:6px 9px;
}
.dock__btn:hover{color:var(--ink); background:var(--panel2); border-color:var(--line)}
.dock__btn.is-open{color:var(--accent); border-color:var(--accent); background:rgba(255,180,92,.16)}
/* where the loader decided to send them first */
.dock__btn.is-suggested{color:var(--teal); border-color:var(--teal); animation:dockNudge 1.9s ease-in-out infinite}
@keyframes dockNudge{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 2px rgba(121,222,208,.30)}}
.dock__ico{font-size:11px; line-height:1}
.dock__lbl{font-family:var(--pf); font-size:9px; letter-spacing:.03em}
.dock__right{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.dock__icon{display:grid; place-items:center; width:28px; height:26px; cursor:pointer; font-size:13px; color:var(--ink2);
  background:var(--panel2); border:2px solid var(--line2); padding:0}
.dock__icon:hover{color:var(--accent)}
.dock__icon[aria-pressed="true"]{color:var(--accent); box-shadow:inset 0 0 10px rgba(255,180,92,.25)}
.dock__clock{font-family:var(--pf); font-size:10px; color:var(--ink3); min-width:44px; text-align:right}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:calc(var(--dock-h) + 18px); transform:translate(-50%,8px);
  z-index:60; background:var(--panel); color:var(--ink); border:2px solid var(--line2);
  padding:10px 14px; font-size:12px; box-shadow:4px 4px 0 rgba(9,6,18,.5);
  opacity:0; transition:opacity .2s ease, transform .2s ease; pointer-events:none;
}
.toast.is-in{opacity:1; transform:translate(-50%,0)}

/* ── Screen effects ─────────────────────────────────────────────────────── */
.crt{
  position:fixed; inset:0; z-index:25; pointer-events:none; opacity:.16;
  background:repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.30) 2px 3px);
  mix-blend-mode:multiply;
}
:root[data-theme="day"] .crt{opacity:.16}
.vignette{
  position:fixed; inset:0; z-index:24; pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, transparent 46%, rgba(8,5,18,.40) 100%);
}
:root[data-theme="day"] .vignette{background:radial-gradient(ellipse at 50% 45%, transparent 48%, rgba(70,50,110,.25) 100%)}

.noscript{max-width:34em; margin:12vh auto; padding:0 24px}

/* ── Small screens ──────────────────────────────────────────────────────── */
@media (max-width:760px){
  :root{--dock-h:48px}
  .win--sheet{
    left:0 !important; right:0; bottom:0; top:auto !important;
    width:100% !important; height:min(72vh, 560px) !important;
    border-left:0; border-right:0; border-bottom:0; box-shadow:0 -6px 0 rgba(9,6,18,.4);
  }
  .win__body{padding:14px 14px 18px}
  .dock__lbl{display:none}
  .dock__brand span:last-child{display:none}
  .dock__btn{padding:7px 10px}
  .dock__ico{font-size:14px}
  .hint{font-size:8px; bottom:10px}
  .tip{font-size:8px; padding:5px 7px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important; transition-duration:.001s !important}
}