@font-face{font-family:"VT";src:url(/fonts/vt323.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Plex";src:url(/fonts/plex-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(/fonts/plex-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Orb";src:url(/fonts/orbitron.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Silk";src:url(/fonts/silkscreen.woff2) format("woff2");font-display:swap}
:root{
  --g:clamp(20px,5.5vw,40px);--bar:44px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --ink:#140c2b;--night:#120b26;--panel:#1d1436;--panel2:#261a47;--line:#3b2a6e;
  --lav:#e4ddff;--lav2:#c9bdf7;--mint:#3ff2c4;--pink:#ff4fa3;--violet:#8d4bff;--amber:#ffc65c;
  --txt:#ece7ff;--dim:#a99fd0;
  --mono:"Plex",ui-monospace,Menlo,Consolas,monospace;--px:"VT",ui-monospace,monospace;--silk:"Silk","VT",monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--night)}
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:var(--mono);color:var(--txt);background:var(--night);-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit;background:none;border:0;outline:0;-webkit-appearance:none;appearance:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
svg{display:block}

/* ---------- boot ---------- */
.boot{position:fixed;inset:0;background:#0d0a12;color:#c4bfd6;font-family:var(--px);font-size:21px;line-height:1.26;
  padding:var(--s4) var(--g) calc(var(--s4) + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;z-index:50;cursor:default}
.boot-lines{overflow:hidden}
.boot-lines div{white-space:pre-wrap;word-break:break-word;min-height:1.26em}
.boot-lines .hi{color:#fff}
.boot-lines .ok{color:var(--mint)}
.boot .cur::after{content:"";display:inline-block;width:.55em;height:1em;background:currentColor;vertical-align:-.12em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.boot-skip{position:absolute;top:var(--s4);right:var(--g);color:#6f6888;font-size:18px}
.prompt{margin-top:var(--s5);color:#fff}
.prompt-q{margin-bottom:var(--s3)}
.prompt-btns{display:flex;gap:var(--s4)}
.prompt-btns button{min-width:96px;min-height:44px;padding:0 var(--s4);border:2px solid #c4bfd6;color:#c4bfd6;font-family:var(--px);font-size:22px;text-transform:uppercase;letter-spacing:.06em;transition:background .15s,color .15s}
.prompt-btns button:hover,.prompt-btns button:focus-visible{background:#c4bfd6;color:#0d0a12}
@media (max-width:550px){.boot{font-size:17px}.boot-skip{font-size:15px}}

/* ---------- splash ---------- */
.splash{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s5);
  background:radial-gradient(120% 70% at 50% 110%,#5b1f8f 0%,#24124a 45%,#0d0820 100%);padding:0 var(--g);transition:opacity .5s ease}
.splash.out{opacity:0;pointer-events:none}
.logo{display:flex;align-items:flex-end;font-family:"Orb",var(--px);font-weight:900;font-style:normal;line-height:.9;transform:skewX(-10deg);user-select:none}
.logo span{background:repeating-linear-gradient(180deg,#fff 0 3px,#d9ccff 3px 5px,#9f7bff 5px 7px,#ff6fb8 7px 9px);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #2a0f55) drop-shadow(0 0 18px rgba(141,75,255,.55))}
.logo-pt,.logo-os{font-size:clamp(52px,14vw,112px);letter-spacing:.02em}
.logo-slash{font-size:clamp(52px,14vw,112px);margin:0 .04em}
.logo-v{font-size:clamp(18px,4.4vw,32px);margin-left:.3em;margin-bottom:.35em}
.bar-track{width:min(320px,100%);height:16px;border:2px solid var(--lav2);padding:2px}
.bar-track i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--mint) 0 10px,transparent 10px 12px);transition:width .18s steps(4)}
.splash-note{font-family:var(--px);font-size:20px;color:var(--lav2);text-align:center}

/* ---------- desktop ---------- */
.os{position:fixed;inset:0;overflow:hidden;background:linear-gradient(180deg,#0b0620 0%,#221048 46%,#4a1a7a 58%,#1a0b38 100%)}
.os.in .topbar{animation:slideDown .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes slideDown{from{transform:translateY(-100%)}}
.grid{position:absolute;inset:0;width:100%;height:100%;display:block}
.grid-fallback{position:absolute;inset:0;overflow:hidden;display:none;perspective:300px}
.no-gl .grid{display:none}.no-gl .grid-fallback{display:block}
.gf-floor{position:absolute;left:-50%;right:-50%;top:55%;height:120%;transform-origin:50% 0;transform:rotateX(72deg);
  background-image:linear-gradient(rgba(214,92,255,.75) 2px,transparent 2px),linear-gradient(90deg,rgba(214,92,255,.75) 2px,transparent 2px);
  background-size:60px 60px;animation:floor 2.4s linear infinite;mask-image:linear-gradient(transparent,#000 30%)}
@keyframes floor{to{background-position:0 60px}}

.topbar{position:absolute;left:0;right:0;top:0;height:calc(var(--bar) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);z-index:900;
  display:flex;align-items:stretch;background:var(--lav);color:var(--ink);border-bottom:2px solid var(--ink);box-shadow:0 2px 0 rgba(20,12,43,.35)}
.tb-logo{width:56px;display:grid;place-items:center;border-right:2px solid var(--ink);flex:none}
.tb-logo span{font-family:"Orb",var(--px);font-weight:900;font-size:17px;letter-spacing:.02em;color:var(--ink);transform:skewX(-10deg)}
.tb-logo[aria-expanded="true"],.tb-logo:hover{background:var(--ink)}
.tb-logo[aria-expanded="true"] span,.tb-logo:hover span{color:var(--lav)}
.tb-app{display:flex;align-items:stretch;min-width:0;overflow:hidden}
.tb-app b{display:flex;align-items:center;padding:0 var(--s3) 0 var(--s4);font-family:var(--silk);font-size:13px;font-weight:400;white-space:nowrap}
.tb-app button{padding:0 var(--s3);font-family:var(--px);font-size:20px;white-space:nowrap;min-width:44px}
.tb-app button:hover,.tb-app button[aria-expanded="true"]{background:var(--ink);color:var(--lav)}
.tb-right{margin-left:auto;display:flex;align-items:stretch;flex:none}
.tb-ico{width:44px;display:grid;place-items:center}
.tb-ico svg{width:16px;height:16px;fill:var(--ink)}
.tb-ico:hover{background:var(--ink)}.tb-ico:hover svg{fill:var(--lav)}
.tb-clock{display:flex;align-items:center;padding:0 var(--g) 0 var(--s2);font-family:var(--px);font-size:21px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
@media (max-width:640px){.tb-app b{display:none}.tb-fs{display:none!important}.tb-clock{padding-left:var(--s1)}}
@media (max-width:380px){.tb-right .tb-ico[aria-label="Email"]{display:none}}

/* app dropdown */
.drop{position:absolute;z-index:950;min-width:200px;background:var(--lav);color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 rgba(20,12,43,.6);padding:var(--s1) 0}
.drop button{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:44px;padding:0 var(--s4);font-family:var(--px);font-size:20px;text-align:left}
.drop button:hover,.drop button:focus-visible{background:var(--ink);color:var(--lav)}
.drop button[aria-checked="true"]::before{content:"\25B8"}
.drop button[aria-checked="false"]::before{content:"";width:.55em}
.drop hr{border:0;border-top:2px solid var(--ink);margin:var(--s1) 0;opacity:.25}

/* start menu */
.menu{position:absolute;left:0;top:calc(var(--bar) + env(safe-area-inset-top));z-index:960;display:flex;width:min(300px,calc(100vw - var(--g)));
  max-height:calc(100% - var(--bar) - var(--g));background:var(--lav);color:var(--ink);border:2px solid var(--ink);border-top:0;box-shadow:6px 6px 0 rgba(20,12,43,.55);
  transform-origin:0 0;animation:menuIn .18s cubic-bezier(.2,.8,.2,1)}
@keyframes menuIn{from{transform:scaleY(.6);opacity:0}}
.menu-side{flex:none;width:36px;background:linear-gradient(0deg,var(--violet),var(--pink));display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--s3)}
.menu-side span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"Orb",var(--px);font-weight:900;font-size:16px;color:#fff;letter-spacing:.08em;white-space:nowrap}
.menu-list{flex:1;overflow:auto;padding:var(--s1) 0}
.menu-list h3{font-family:var(--silk);font-weight:400;font-size:11px;letter-spacing:.06em;padding:var(--s3) var(--s4) var(--s1);opacity:.6}
.menu-list button,.menu-list a{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:44px;padding:0 var(--s4);font-family:var(--px);font-size:21px;text-align:left}
.menu-list button:hover,.menu-list a:hover,.menu-list button:focus-visible,.menu-list a:focus-visible{background:var(--ink);color:var(--lav)}
.menu-list .mi{width:24px;height:24px;flex:none}
.menu-list hr{border:0;border-top:2px solid var(--ink);margin:var(--s1) 0;opacity:.2}

/* icons */
.icons{position:absolute;top:calc(var(--bar) + env(safe-area-inset-top) + var(--s5));bottom:calc(var(--s5) + env(safe-area-inset-bottom));right:var(--g);left:var(--g);
  display:flex;flex-direction:column;flex-wrap:wrap-reverse;justify-content:flex-start;align-content:flex-start;gap:var(--s3) var(--s4);pointer-events:none}
.ico{pointer-events:auto;width:120px;display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s2) 0;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.os.in .ico{animation:pop .45s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i)*60ms + .25s)}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.ico .art{width:64px;height:64px;filter:drop-shadow(3px 3px 0 rgba(10,4,30,.55));transition:transform .15s}
.ico .art svg{width:100%;height:100%;shape-rendering:crispEdges}
.ico:hover .art{transform:translateY(-3px)}
.ico .lbl{font-family:var(--px);font-size:20px;line-height:1;padding:3px 6px 4px;background:rgba(18,11,38,.82);color:var(--mint);white-space:nowrap;border:1px solid rgba(63,242,196,.35)}
.ico.sel .lbl,.ico:focus-visible .lbl{background:var(--mint);color:var(--ink)}
.ico:focus-visible{outline:0}
@media (min-width:641px){.icons{top:auto;height:min(504px,calc(100% - var(--bar) - 2*var(--s5)));justify-content:flex-end}}
@media (max-width:640px){
  .icons{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-content:flex-end;gap:var(--s4) 0;top:auto}
  .ico{width:33.333%}
  .ico .art{width:56px;height:56px}
  .ico .lbl{font-size:18px}
}

/* windows */
.wins{position:absolute;inset:0;pointer-events:none}
.win{position:absolute;pointer-events:auto;display:flex;flex-direction:column;background:var(--panel);border:2px solid var(--ink);
  box-shadow:0 0 0 2px var(--lav2),8px 8px 0 2px rgba(10,4,30,.6);min-width:260px;min-height:160px;transform-origin:50% 50%;
  animation:winIn .26s cubic-bezier(.2,.9,.3,1.05) both}
.win.closing{animation:winOut .18s ease-in both}
@keyframes winIn{from{transform:scale(.86);opacity:0}}
@keyframes winOut{to{transform:scale(.9);opacity:0}}
.win.max{transition:left .22s,top .22s,width .22s,height .22s}
.win:not(.focus){box-shadow:0 0 0 2px #7b6cb3,8px 8px 0 2px rgba(10,4,30,.5)}
.win:not(.focus) .wt{background:#b2a6dc}
.wt{flex:none;height:40px;display:flex;align-items:center;background:var(--lav);color:var(--ink);border-bottom:2px solid var(--ink);touch-action:none;user-select:none;-webkit-user-select:none;position:relative}
.wt .wb-btns{display:flex;height:100%;flex:none}
.wt .wbtn{width:44px;height:100%;display:grid;place-items:center;border-right:2px solid var(--ink)}
.wt .wbtn i{width:16px;height:16px;display:block;border:2px solid var(--ink);box-shadow:inset -2px -2px 0 rgba(0,0,0,.22)}
.wt .wclose i{background:var(--violet)}
.wt .wmax i{background:var(--pink)}
.wt .wbtn:hover{background:var(--ink)}.wt .wbtn:hover i{border-color:var(--lav)}
.wt .wtitle{position:absolute;left:96px;right:96px;text-align:center;font-family:var(--silk);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.wt .tf{display:none}
@media (max-width:640px){.wt .tl{display:none}.wt .tf{display:inline}}
.wt .stripes{margin-left:auto;margin-right:var(--s3);width:40px;height:12px;background:repeating-linear-gradient(180deg,var(--ink) 0 2px,transparent 2px 4px);opacity:.75}
.wbody{flex:1;min-height:0;overflow:auto;position:relative;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.wbody::-webkit-scrollbar{width:14px;height:14px}
.wbody::-webkit-scrollbar-track{background:var(--panel2)}
.wbody::-webkit-scrollbar-thumb{background:var(--lav2);border:3px solid var(--panel2)}

/* toolbar strip inside windows */
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--panel2);border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:2}
.chip{min-height:36px;padding:0 var(--s3);font-family:var(--px);font-size:19px;border:2px solid var(--line);color:var(--lav2);background:var(--panel)}
.chip[aria-pressed="true"]{background:var(--mint);color:var(--ink);border-color:var(--mint)}
.strip .sp{flex:1}
.strip .meta{font-family:var(--px);font-size:18px;color:var(--dim)}

/* writer */
.doc{padding:var(--s6) clamp(var(--s4),5%,var(--s7)) var(--s7);max-width:760px;margin:0 auto}
.doc h1{font-family:var(--px);font-weight:400;font-size:44px;line-height:1;color:var(--mint);margin-bottom:var(--s5)}
.doc p{font-size:15px;line-height:1.75;color:var(--txt);margin-bottom:var(--s4)}
.doc p em{font-style:normal;color:var(--amber)}
.doc .sig{font-family:var(--px);font-size:24px;color:var(--lav2);margin-top:var(--s5)}
.doc.big p{font-size:17px}.doc.serif p{font-family:Georgia,"Times New Roman",serif;font-size:17px}
.doc a{color:var(--mint);border-bottom:1px dashed}

/* code editor */
.code{display:grid;grid-template-columns:auto 1fr;font-size:13.5px;line-height:1.7;min-height:100%;background:#150e2a}
.code .ln{padding:var(--s3) var(--s3) var(--s5);text-align:right;color:#5b4f86;background:#1b1335;border-right:2px solid var(--ink);user-select:none;font-variant-numeric:tabular-nums}
.code pre{padding:var(--s3) var(--s4) var(--s5);margin:0;font:inherit;white-space:pre;overflow:visible;color:#d8d0ff}
.code .k{color:#ff79c6}.code .s{color:#3ff2c4}.code .c{color:#7a6ea8;font-style:italic}.code .n{color:#ffc65c}.code .f{color:#8fb8ff}.code .p{color:#bfb3ef}
.code a{color:inherit;text-decoration:underline;text-decoration-color:rgba(63,242,196,.4);text-underline-offset:3px}

/* terminal */
.term{background:#07040f;color:#d5ccff;font-family:var(--px);font-size:20px;line-height:1.2;padding:var(--s3) var(--s4) var(--s5);min-height:100%;cursor:text}
.term .o{white-space:pre-wrap;word-break:break-word}
.term .t-g{color:var(--mint)}.term .t-p{color:var(--pink)}.term .t-a{color:var(--amber)}.term .t-d{color:#7d73a6}
.term a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.term table{border-collapse:collapse;margin:var(--s2) 0 var(--s3);width:100%}
.term th{text-align:left;color:var(--amber);font-weight:400;padding:0 var(--s4) var(--s1) 0;border-bottom:1px dashed #4b3f7a}
.term td{padding:3px var(--s4) 3px 0;vertical-align:top}
.term .row{display:flex;align-items:center;gap:6px}
.term .row label{white-space:nowrap;color:var(--mint)}
.term input{flex:1;min-width:0;font-family:var(--px);font-size:20px;caret-color:var(--mint);min-height:44px}
@media (max-width:640px){.term .hide-s{display:none}}

/* explorer */
.xp table{width:100%;border-collapse:collapse;font-size:13.5px}
.xp th{position:sticky;top:54px;z-index:1;background:var(--lav);color:var(--ink);text-align:left;font-family:var(--px);font-size:19px;font-weight:400;padding:0;border-bottom:2px solid var(--ink);border-right:2px solid var(--ink)}
.xp th:last-child{border-right:0}
.xp th button{width:100%;min-height:36px;padding:0 var(--s3);text-align:left;display:flex;align-items:center;gap:6px}
.xp th button[data-dir]::after{content:"\25BE";font-size:14px}
.xp th button[data-dir="up"]::after{content:"\25B4"}
.xp td{padding:0 var(--s3);height:48px;border-bottom:1px solid #2c2052;white-space:nowrap}
.xp tr.r{cursor:pointer}
.xp tr.r:hover td,.xp tr.r:focus-visible td{background:#2e2058}
.xp td.nm{font-weight:500;color:var(--txt)}
.xp td.nm span{display:inline-flex;align-items:center;gap:var(--s2)}
.xp td.nm i{width:16px;height:16px;flex:none;display:inline-block;background:var(--c,#8d4bff);border:2px solid var(--ink);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
.xp td.kd{color:var(--dim)}
.xp td.gp{font-family:var(--px);font-size:19px;color:var(--amber)}
.xp td.go{text-align:right;width:1%}
.xp td.go a{display:inline-grid;place-items:center;min-width:44px;min-height:44px;font-family:var(--px);font-size:20px;color:var(--mint)}
.xp .status{position:sticky;bottom:0;display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s3);background:var(--panel2);border-top:2px solid var(--ink);font-family:var(--px);font-size:18px;color:var(--dim)}
@media (max-width:640px){.xp .kd{display:none}}
.det{padding:var(--s5) var(--s5) var(--s6)}
.det .back{margin-bottom:var(--s4)}
.det .cover{height:180px;border:2px solid var(--ink);box-shadow:0 0 0 2px var(--line);margin-bottom:var(--s5);position:relative;overflow:hidden}
.det .cover b{position:absolute;left:var(--s4);bottom:var(--s3);font-family:"Orb",var(--px);font-weight:900;font-size:clamp(28px,7vw,48px);color:#fff;transform:skewX(-8deg);text-shadow:3px 3px 0 rgba(10,4,30,.6)}
.det h2{font-family:var(--px);font-weight:400;font-size:34px;line-height:1;color:var(--mint);margin-bottom:var(--s2)}
.det .kind{font-family:var(--px);font-size:20px;color:var(--amber);margin-bottom:var(--s4)}
.det p{font-size:15px;line-height:1.7;margin-bottom:var(--s5);max-width:60ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s5);background:var(--mint);color:var(--ink);font-family:var(--px);font-size:21px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:transparent;color:var(--lav2);border-color:var(--line);box-shadow:none}

/* mail */
.mail{display:flex;flex-direction:column;min-height:100%}
.mail .f{display:grid;grid-template-columns:80px 1fr;align-items:center;border-bottom:2px solid var(--ink);background:var(--panel)}
.mail .f label{font-family:var(--px);font-size:19px;color:var(--dim);padding-left:var(--s4)}
.mail .f input{min-height:44px;padding:0 var(--s4) 0 0;font-size:15px;width:100%}
.mail .f .to{font-size:15px;padding:12px var(--s4) 12px 0;color:var(--mint)}
.mail textarea{flex:1;min-height:160px;padding:var(--s4);font-size:15px;line-height:1.6;resize:none;background:#150e2a}
.mail .f.bad label{color:var(--pink)}
.mail .err{font-family:var(--px);font-size:18px;color:var(--pink);padding:0 var(--s4);min-height:0}
.mail .foot{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;padding:var(--s3) var(--s4);background:var(--panel2);border-top:2px solid var(--ink)}
.mail .foot a{font-family:var(--px);font-size:19px;color:var(--lav2);min-height:44px;display:inline-flex;align-items:center}
.mail .foot a:hover{color:var(--mint)}
::placeholder{color:#6d6396}

/* chat */
.chat{display:flex;flex-direction:column;height:100%}
.chat .log{flex:1;overflow:auto;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);overscroll-behavior:contain}
.msg{display:flex;gap:var(--s2);align-items:flex-end;max-width:88%}
.msg .av{width:32px;height:32px;flex:none}
.msg .bub{padding:10px 14px;font-size:14.5px;line-height:1.55;background:var(--panel2);border:2px solid var(--line)}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .bub{background:var(--mint);color:var(--ink);border-color:var(--ink)}
.msg .bub a{color:var(--mint);text-decoration:underline}
.typing .bub{display:flex;gap:5px;padding:14px}
.typing .bub i{width:7px;height:7px;background:var(--lav2);animation:dot 1s infinite}
.typing .bub i:nth-child(2){animation-delay:.15s}.typing .bub i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-4px);opacity:.4}}
.chat .sugg{display:flex;gap:var(--s2);overflow-x:auto;padding:var(--s2) var(--s4);border-top:2px solid var(--ink);background:var(--panel2);scrollbar-width:none}
.chat .sugg::-webkit-scrollbar{display:none}
.chat .sugg .chip{flex:none;min-height:40px}
.chat form{display:flex;border-top:2px solid var(--ink)}
.chat form input{flex:1;min-width:0;min-height:48px;padding:0 var(--s4);font-size:16px;background:#150e2a}
.chat form button{min-width:88px;background:var(--lav);color:var(--ink);font-family:var(--px);font-size:21px;border-left:2px solid var(--ink)}

/* player */
.amp{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s3);background:linear-gradient(180deg,#2a1d4f,#1a1233)}
.amp .scr{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);background:#05030b;border:2px solid var(--ink);box-shadow:inset 0 0 0 2px #2d2350;padding:var(--s3)}
.amp .time{font-family:var(--px);font-size:42px;line-height:1;color:var(--mint);font-variant-numeric:tabular-nums}
.amp canvas{width:100%;height:44px;display:block}
.amp .title{grid-column:1/-1;overflow:hidden;white-space:nowrap;font-family:var(--px);font-size:19px;color:var(--amber)}
.amp .title span{display:inline-block;padding-left:100%;animation:marq 12s linear infinite}
@keyframes marq{to{transform:translateX(-100%)}}
.amp .ctl{display:flex;gap:var(--s2)}
.amp .ctl button{flex:1;min-height:44px;background:var(--lav);color:var(--ink);border:2px solid var(--ink);box-shadow:inset -2px -2px 0 rgba(0,0,0,.2);font-family:var(--px);font-size:22px}
.amp .ctl button[aria-pressed="true"]{background:var(--mint)}
.amp .vol{display:flex;align-items:center;gap:var(--s3);font-family:var(--px);font-size:18px;color:var(--dim)}
.amp input[type=range]{flex:1;height:44px;background:transparent}
.amp input[type=range]::-webkit-slider-runnable-track{height:8px;background:#05030b;border:2px solid var(--ink)}
.amp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:24px;margin-top:-10px;background:var(--lav);border:2px solid var(--ink)}
.amp input[type=range]::-moz-range-track{height:8px;background:#05030b;border:2px solid var(--ink)}
.amp input[type=range]::-moz-range-thumb{width:18px;height:24px;background:var(--lav);border:2px solid var(--ink);border-radius:0}
.amp ol{list-style:none;border:2px solid var(--ink);background:#05030b}
.amp li button{width:100%;min-height:44px;display:flex;justify-content:space-between;padding:0 var(--s3);font-family:var(--px);font-size:19px;color:var(--lav2)}
.amp li button.on{color:var(--mint);background:#140c2b}

/* mines */
.mines{padding:var(--s3);display:flex;flex-direction:column;align-items:center;gap:var(--s3);background:var(--panel2);min-height:100%}
.mines .hud{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:378px;gap:var(--s2)}
.mines .lcd{font-family:var(--px);font-size:32px;line-height:1;color:var(--pink);background:#05030b;border:2px solid var(--ink);padding:4px 8px;min-width:66px;text-align:center;font-variant-numeric:tabular-nums}
.mines .face{width:48px;height:48px;font-family:var(--px);font-size:26px;color:var(--ink);background:var(--lav);border:2px solid var(--ink);box-shadow:inset -3px -3px 0 rgba(0,0,0,.2)}
.mines .flag{min-height:44px;min-width:120px;white-space:nowrap;padding:0 var(--s3);font-family:var(--px);font-size:19px;border:2px solid var(--ink);background:var(--lav);color:var(--ink)}
.mines .flag[aria-pressed="true"]{background:var(--amber)}
.mines .board{display:grid;grid-template-columns:repeat(9,1fr);width:100%;max-width:378px;border:2px solid var(--ink);user-select:none;-webkit-user-select:none;touch-action:manipulation}
.mines .board button{aspect-ratio:1;background:var(--lav2);border:2px solid;border-color:#f3efff #7b6cb3 #7b6cb3 #f3efff;font-family:var(--px);font-size:24px;line-height:1;color:var(--ink);display:grid;place-items:center}
.mines .board button.o{background:#2a1f4d;border:1px solid #3d2f6b;color:var(--lav)}
.mines .board button.b{background:var(--pink)}
.mines .board .n1{color:#8fb8ff}.mines .board .n2{color:var(--mint)}.mines .board .n3{color:var(--pink)}.mines .board .n4{color:var(--amber)}.mines .board .n5{color:#ff8a5c}
.mines .note{font-family:var(--px);font-size:18px;color:var(--dim);text-align:center}

/* toast */
.toast{position:absolute;left:50%;bottom:calc(var(--s5) + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:999;background:var(--lav);color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 rgba(10,4,30,.6);font-family:var(--px);font-size:20px;padding:var(--s2) var(--s4);max-width:calc(100% - 2*var(--g));animation:winIn .2s both}

.nojs{padding:var(--g);font-family:var(--mono);line-height:1.7}
.nojs a{color:var(--mint)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}