@font-face{font-family:"NS";src:url(fonts/ns-400.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"FS";src:url(fonts/fs-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"FS";src:url(fonts/fs-700i.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"VT";src:url(fonts/vt-400.woff2) format("woff2");font-display:swap}
:root{--g:clamp(20px,5.5vw,40px);--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
--tb:30px;--blue:#0a52e8;--face:#ece9d8;--ink:#1b1b1b;--muted:#5a5a5a;--link:#0b49c9;--line:#c9c4ae;
--ui:"NS",Tahoma,Verdana,"Segoe UI",system-ui,sans-serif;--title:"FS","Trebuchet MS","NS",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;height:100%}
body{height:100%;overflow:hidden;background:#000;color:var(--ink);font:13px/1.45 var(--ui);user-select:none;-webkit-user-select:none;overscroll-behavior:none;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--link)}
img{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:1px dotted #000;outline-offset:2px}
.screen{position:fixed;inset:0;z-index:50}
[hidden]{display:none!important}

/* ---------- boot ---------- */
#boot:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55))}
#boot{background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;cursor:progress;transition:opacity .45s}
#boot.out{opacity:0;pointer-events:none}
.bw{display:flex;flex-direction:column;align-items:center;gap:var(--s6);padding:0 var(--g);text-align:center}
.wm{font:italic 700 clamp(30px,8.4vw,52px)/1 var(--title);letter-spacing:-.01em;position:relative;padding-right:.9em}
.wm sup{position:absolute;right:0;top:-.1em;font:700 .42em/1 var(--title);font-style:normal;color:#ff8a1f;letter-spacing:.02em}
.wm small{display:block;font:400 clamp(13px,3.4vw,16px)/1.2 var(--ui);font-style:normal;color:#c7cbd6;margin-top:var(--s3);letter-spacing:.02em}
.bar{width:156px;height:20px;border:2px solid #b2b2b2;border-radius:4px;padding:2px;overflow:hidden;position:relative}
.bar i{position:absolute;top:2px;left:-40px;width:9px;height:12px;border-radius:1px;background:linear-gradient(180deg,#2c58d8,#7fa2ff 45%,#2747c4);animation:run 1.9s linear infinite}
.bar i:nth-child(2){animation-delay:.12s}.bar i:nth-child(3){animation-delay:.24s}
@keyframes run{0%{left:-40px}100%{left:170px}}
.bfoot{position:absolute;left:var(--g);right:var(--g);bottom:calc(var(--s6) + env(safe-area-inset-bottom));display:flex;justify-content:space-between;color:#8b8f99;font-size:12px}

/* ---------- login ---------- */
#login{display:grid;grid-template-rows:clamp(56px,11vh,96px) 1fr clamp(56px,11vh,96px);background:#5a7edc;color:#fff;transition:opacity .5s}
#login.out{opacity:0;pointer-events:none}
.lt{background:#00309c;border-bottom:2px solid #8aa6ec;box-shadow:0 2px 0 #f6f6f6 inset}
.lt,.lb{position:relative}
.lt:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:linear-gradient(90deg,transparent,#fff 30%,#fff 50%,transparent)}
.lm{background:radial-gradient(70% 90% at 12% 18%,#a6c0f8 0%,#7b9be6 30%,#5a7edc 70%);display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;padding:0 var(--g);gap:var(--g)}
.lm .div{height:62%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.85),transparent)}
.lhi{justify-self:end;text-align:right;max-width:340px}
.lhi b{display:block;font:italic 700 clamp(28px,4.2vw,44px)/1.05 var(--title);text-shadow:0 1px 2px rgba(0,0,40,.35)}
.lhi span{display:block;margin-top:var(--s3);font-size:15px;color:#eef3ff}
.users{display:flex;flex-direction:column;gap:var(--s3)}
.user{display:flex;align-items:center;gap:var(--s4);padding:var(--s2);padding-right:var(--s5);border-radius:10px;min-height:76px;text-align:left;transition:background .15s;max-width:360px}
.user:hover,.user:focus-visible{background:linear-gradient(90deg,#00309c 0%,rgba(0,48,156,.6) 60%,transparent)}
.user .av{width:60px;height:60px;border-radius:6px;border:2px solid #fff;flex:none;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.user b{display:block;font-size:19px;font-weight:700}
.user small{display:block;font-size:13px;color:#dce6ff}
.lb{background:#00309c;display:flex;align-items:center;justify-content:space-between;padding:0 var(--g);gap:var(--s4)}
.lb:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#3d63c8,#ff9a2e 30%,#ff9a2e 60%,#3d63c8)}
.off{display:flex;align-items:center;gap:var(--s3);font-size:15px;min-height:44px}
.off i{width:28px;height:28px;border-radius:5px;border:1px solid #fff;background:radial-gradient(circle at 35% 30%,#ff9a6a,#e3381b 60%,#a91c05);display:grid;place-items:center}
.off i:before{content:"";width:10px;height:10px;border:2px solid #fff;border-top-color:transparent;border-radius:50%}
.lb p{font-size:12px;color:#c4d3ff;max-width:300px;text-align:right}
#welcome{position:absolute;inset:0;display:none;place-items:center;font:italic 700 clamp(40px,9vw,72px)/1 var(--title);text-shadow:0 2px 3px rgba(0,0,60,.4)}
#login.in .lm>*{visibility:hidden}#login.in #welcome{display:grid}

/* ---------- desktop ---------- */
#desk{position:fixed;inset:0;overflow:hidden;background:#3a7bd5}
.wall{position:absolute;inset:0 0 var(--tb) 0;background:linear-gradient(180deg,#1f63d6 0%,#5d9bf0 46%,#bcd9f7 58%,#5fae38 59%,#3f8f22 100%)}
.wall img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.icons{position:absolute;top:var(--s3);left:var(--s3);right:var(--s3);bottom:calc(var(--tb) + var(--s3));display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,88px);grid-auto-columns:84px;gap:var(--s2) var(--s3);align-content:start}
.ic{display:flex;flex-direction:column;align-items:center;gap:var(--s1);width:84px;padding:var(--s1) 2px;color:#fff;text-align:center;font-size:12px;line-height:1.25;cursor:default}
.ic svg{width:44px;height:44px;flex:none;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.35))}
.ic span{padding:1px 3px;border-radius:2px;text-shadow:1px 1px 1px #000,0 0 2px #000}
.ic.sel svg{filter:drop-shadow(1px 2px 1px rgba(0,0,0,.35)) brightness(.75) sepia(1) hue-rotate(185deg) saturate(3)}
.ic.sel span{background:#0b5bd8;text-shadow:none}
.ic:focus-visible{outline:none}.ic:focus-visible span{outline:1px dotted #fff}
.ic.bin{position:absolute;right:0;bottom:0}
.lasso{position:absolute;border:1px solid #3a6ee6;background:rgba(80,130,240,.25);pointer-events:none;z-index:2}

/* taskbar */
.tb{position:absolute;left:0;right:0;bottom:0;height:var(--tb);display:flex;align-items:stretch;z-index:9000;background:linear-gradient(180deg,#3168d5 0%,#4993e6 3%,#2157d7 6%,#2663e0 10%,#2157d7 90%,#1941a5 100%)}
.start{display:flex;align-items:center;gap:6px;padding:0 22px 0 10px;border-radius:0 12px 12px 0;color:#fff;font:italic 700 18px/1 var(--title);text-shadow:1px 1px 2px rgba(0,0,0,.45);background:radial-gradient(90% 120% at 30% 0%,#79c464 0%,#3c9a2b 45%,#2f8a22 70%,#2a7a1d 100%);box-shadow:inset -2px 0 3px rgba(0,0,0,.25),inset 0 1px 1px rgba(255,255,255,.5)}
.start:hover{filter:brightness(1.08)}.start.on{filter:brightness(.88)}
.start .sun{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7c2,#ffc21a 45%,#ff7b00);box-shadow:0 0 0 2px rgba(255,255,255,.65)}
.tasks{flex:1;display:flex;gap:3px;padding:3px 6px;min-width:0}
.task{flex:0 1 160px;min-width:0;display:flex;align-items:center;gap:6px;padding:0 8px;border-radius:3px;color:#fff;font-size:12px;background:linear-gradient(180deg,#5c95f5,#3c7ff1 15%,#3a78ec 85%,#2d64d6);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 1px 1px 0 rgba(255,255,255,.3);white-space:nowrap}
.task span{overflow:hidden;text-overflow:ellipsis}
.task svg{width:16px;height:16px;flex:none}
.task.on{background:linear-gradient(180deg,#1e4fb8,#1d4fb5 85%,#2457c4);box-shadow:inset 1px 1px 2px rgba(0,0,0,.45)}
.tray{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3) 0 var(--s3);color:#fff;font-size:12px;background:linear-gradient(180deg,#0c59b9,#139ee9 5%,#18b9f4 10%,#1194e7 15%,#1095e8 90%,#0d6fd0);border-left:1px solid #0a3d8f;box-shadow:inset 1px 0 0 #18bbff}
.tray button{width:24px;height:24px;display:grid;place-items:center}
.tray svg{width:16px;height:16px}
.clock{min-width:56px;text-align:center}

/* start menu */
.sm{position:absolute;left:0;bottom:var(--tb);width:390px;max-width:100vw;z-index:9001;border-radius:8px 8px 0 0;overflow:hidden;box-shadow:2px -2px 10px rgba(0,0,0,.4);background:#fff;border:1px solid #2a63d9;transform-origin:0 100%;animation:pop .14s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.smh{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);min-height:64px;color:#fff;font:700 15px var(--title);background:linear-gradient(180deg,#1868ce,#0e60cb 12%,#2b78dd 40%,#245fca 88%,#1a4fb8);text-shadow:1px 1px 1px rgba(0,0,0,.4)}
.smh .av{width:44px;height:44px;border:2px solid #fff;border-radius:4px;overflow:hidden;flex:none}
.smb{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid #ff9a3a}
.sml{padding:var(--s2) 0;background:#fff}
.smr{padding:var(--s2) 0;background:#d3e5fa;border-left:1px solid #95bdee}
.smi{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:44px;padding:var(--s1) var(--s3);text-align:left;font-size:12px;color:#000;text-decoration:none}
.smi b{display:block;font-weight:700}.smi small{display:block;color:#666;font-size:11px;line-height:1.2}
.smr .smi{color:#0a246a;font-weight:700}
.smi svg{width:28px;height:28px;flex:none}.smr .smi svg{width:22px;height:22px}
.smi:hover,.smi:focus-visible{background:#2f71cd;color:#fff;outline:none}.smi:hover small,.smi:focus-visible small{color:#e8efff}
.sep{height:1px;margin:var(--s1) var(--s3);background:linear-gradient(90deg,transparent,#c6c6c6 30%,#c6c6c6 70%,transparent)}
.smr .sep{background:linear-gradient(90deg,transparent,#9fc0ea 30%,#9fc0ea 70%,transparent)}
.smf{display:flex;justify-content:flex-end;gap:var(--s2);padding:var(--s1) var(--s3);background:linear-gradient(180deg,#4282d6,#3b75cf 20%,#1d55b9)}
.smf button{display:flex;align-items:center;gap:6px;min-height:40px;padding:0 var(--s2);color:#fff;font-size:12px;border-radius:3px}
.smf button:hover{background:rgba(255,255,255,.15)}
.smf i{width:22px;height:22px;border-radius:4px;border:1px solid #fff;display:grid;place-items:center}
.smf .lo i{background:linear-gradient(135deg,#f9c440,#e08a10)}.smf .to i{background:radial-gradient(circle at 35% 30%,#ff9a6a,#e3381b 60%,#a91c05)}
.smf i:before{content:"";width:8px;height:8px;border:2px solid #fff;border-top-color:transparent;border-radius:50%}

/* balloon */
.balloon{position:absolute;right:8px;bottom:calc(var(--tb) + 12px);z-index:8999;width:300px;max-width:calc(100vw - 16px);background:#ffffe1;border:1px solid #000;border-radius:8px;padding:var(--s3) var(--s3) var(--s3) var(--s3);box-shadow:2px 2px 6px rgba(0,0,0,.35);font-size:12px;animation:pop .2s ease-out}
.balloon:after{content:"";position:absolute;right:46px;bottom:-12px;border:6px solid transparent;border-top:6px solid #000;border-right-width:0;border-left-width:12px;border-left-color:transparent}
.balloon b{display:flex;align-items:center;gap:6px;font-size:12px;margin-bottom:var(--s1);padding-right:28px}
.balloon .x{position:absolute;top:4px;right:4px;width:28px;height:28px;display:grid;place-items:center;border-radius:3px}
.balloon .x:hover{background:#e9e4b8}

/* ---------- windows ---------- */
.win{position:absolute;display:flex;flex-direction:column;min-width:280px;min-height:180px;background:var(--face);border-radius:8px 8px 0 0;padding:0 3px 3px;background-clip:padding-box;box-shadow:0 0 0 1px #0831d9,2px 3px 10px rgba(0,0,0,.35);background-color:#0058ee;animation:wopen .14s ease-out}
@keyframes wopen{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.win.closing{animation:wclose .12s ease-in forwards}@keyframes wclose{to{opacity:0;transform:scale(.96)}}
.win.min{display:none}
.tbar{flex:none;height:30px;display:flex;align-items:center;gap:6px;padding:0 3px 0 6px;color:#fff;border-radius:7px 7px 0 0;margin:0 -3px;padding-left:9px;background:linear-gradient(180deg,#0997ff 0%,#0053ee 9%,#0050ee 20%,#0066ff 70%,#0062fa 88%,#0043d9 96%,#003dd7 100%);cursor:default;touch-action:none}
.tbar svg.ti{width:16px;height:16px;flex:none}
.tbar h2{flex:1;min-width:0;font:700 13px/1 var(--title);text-shadow:1px 1px 0 #0a1f74;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.01em}
.wb{display:flex;gap:2px}
.wb button{width:21px;height:21px;border-radius:3px;border:1px solid #fff;display:grid;place-items:center;background:radial-gradient(120% 120% at 20% 10%,#5d9bff,#2a68f2 55%,#1e4fd8);box-shadow:inset -1px -1px 1px rgba(0,0,60,.35)}
.wb button:hover{filter:brightness(1.15)}
.wb .cl{background:radial-gradient(120% 120% at 20% 10%,#f39a7c,#e05a2d 55%,#c53a14)}
.wb svg{width:11px;height:11px}
.win.blur{background-color:#7a96df;box-shadow:0 0 0 1px #6f86d6,2px 3px 8px rgba(0,0,0,.25)}
.win.blur .tbar{background:linear-gradient(180deg,#7c9cf0,#7a9ae8 20%,#7c98e4 80%,#7090dc)}
.win.blur .tbar h2{color:#dce4fb;text-shadow:none}
.win.blur .wb button{opacity:.75}
.win.max{border-radius:0;padding:0}.win.max .tbar{border-radius:0;margin:0}
.wbody{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--face)}
.grip{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 55%,#9c9883 55%,#9c9883 62%,transparent 62%,transparent 72%,#9c9883 72%,#9c9883 79%,transparent 79%)}
.win.max .grip{display:none}
/* location bar */
.addr{flex:none;display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s2);border-bottom:1px solid #d6d2bd;background:linear-gradient(180deg,#fbfbf8,#ece9d8);font-size:12px;color:#555}
.addr .f{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:24px;padding:0 6px;background:#fff;border:1px solid #7f9db9;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addr .f svg{width:14px;height:14px;flex:none}
.addr .go{display:flex;align-items:center;gap:4px;height:24px;padding:0 var(--s2);border-radius:3px;color:#000;text-decoration:none}
.addr .go:hover{background:#fff;box-shadow:inset 0 0 0 1px #c5c1a9}
.addr .go i{width:14px;height:14px;border-radius:2px;background:linear-gradient(180deg,#4ec13c,#2b8d1b);position:relative}
.addr .go i:after{content:"";position:absolute;left:4px;top:3px;border:4px solid transparent;border-left:6px solid #fff}
.scroll{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;user-select:text;-webkit-user-select:text}
.status{flex:none;display:flex;gap:var(--s2);align-items:center;height:22px;padding:0 var(--s2);border-top:1px solid #d6d2bd;font-size:11px;color:#444;background:var(--face)}
.status span{padding:0 var(--s2);border-right:1px solid #c9c4ae}

/* explorer */
.xp{display:grid;grid-template-columns:200px 1fr;min-height:100%;background:linear-gradient(180deg,#7ba2e7,#6375d6) 0 0/200px 100% no-repeat,#fff}
.xp>.pane{position:sticky;top:0;align-self:start;background:none}
.pane{padding:var(--s3);background:linear-gradient(180deg,#7ba2e7,#6375d6);display:flex;flex-direction:column;gap:var(--s3)}
.box{border-radius:4px 4px 0 0;overflow:hidden;background:#d6dff7;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.box h3{display:flex;align-items:center;justify-content:space-between;min-height:24px;padding:0 var(--s3);font-size:12px;font-weight:700;color:#215dc6;background:linear-gradient(90deg,#fff 30%,#c6d3f7)}
.box ul{list-style:none;padding:var(--s2) var(--s3);display:flex;flex-direction:column;gap:2px}
.box li a,.box li button{display:flex;align-items:center;gap:6px;min-height:24px;font-size:12px;color:#0c32a6;text-decoration:none;text-align:left}
.box li a:hover,.box li button:hover{text-decoration:underline;color:#2d6ee6}
.box li svg{width:16px;height:16px;flex:none}
.box p{padding:var(--s2) var(--s3);font-size:12px;color:#000}
.main{background:#fff;padding:var(--g);min-width:0}
.h{font:700 20px/1.2 var(--title);color:#0b2d8a;letter-spacing:-.005em}
.kick{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#e5761b}
.lead{margin-top:var(--s2);font-size:14px;color:#333;max-width:58ch}
.gh{display:flex;align-items:baseline;gap:var(--s3);margin:var(--s5) 0 var(--s3);padding-bottom:var(--s1);border-bottom:1px solid #b9cdf2;color:#0b2d8a;font-size:13px;font-weight:700}
.gh:first-child{margin-top:0}
.gh small{font-weight:400;color:#6a6a6a;font-size:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4)}
.card{display:flex;flex-direction:column;border:1px solid #d5dbe8;border-radius:4px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.card:hover,.card:focus-visible{border-color:#6f9be6;box-shadow:0 0 0 1px #6f9be6,0 4px 10px rgba(30,70,160,.15);outline:none}
.card .im{aspect-ratio:3/2;background:#e9edf5;overflow:hidden}
.card .im img{width:100%;height:100%;object-fit:cover;object-position:top}
.card .tx{padding:var(--s3)}
.card b{display:block;font-size:14px;color:#0b2d8a}
.card .d{display:block;margin-top:2px;font-size:12px;color:#444;line-height:1.4}
.card .u{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s2);font-size:11px;color:#2a5ccc}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s2) var(--s4)}
.tile{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s1);border-radius:3px;text-decoration:none;color:#000;border:1px solid transparent}
.tile:hover,.tile:focus-visible{background:#e6efff;border-color:#a9c4f4;outline:none}
.tile .th{width:72px;height:48px;flex:none;border:1px solid #c3c7d1;background:#eef1f7;overflow:hidden;box-shadow:1px 1px 0 #d8dbe2}
.tile .th img{width:100%;height:100%;object-fit:cover;object-position:top}
.tile .th.ph{display:grid;place-items:center;font:700 13px var(--title);color:#fff;background:linear-gradient(135deg,#ff9a3a,#e0531b)}
.tile b{display:block;font-size:12px}
.tile small{display:block;font-size:11px;color:#666;line-height:1.3}
/* about */
.ab p{margin-top:var(--s3);font-size:14px;color:#333;max-width:60ch}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);margin-top:var(--s5)}
.fact{padding:var(--s3);border:1px solid #d5dbe8;border-radius:4px;background:linear-gradient(180deg,#fff,#f3f6fc)}
.fact b{display:block;font:700 22px/1.1 var(--title);color:#0b2d8a}
.fact small{display:block;margin-top:var(--s1);font-size:12px;color:#555}
.btnrow{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.xbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 var(--s4);border:1px solid #003c74;border-radius:3px;color:#000;font-size:12px;text-decoration:none;background:linear-gradient(180deg,#fff,#ecebe6 86%,#d6d0c5)}
.xbtn:hover{box-shadow:inset 0 0 0 2px #f8b33a}
.xbtn:active{background:#e3e2da}
/* notes (document viewer) */
.dv{background:#808080;padding:var(--g) var(--s4);min-height:100%}
.page{max-width:620px;margin:0 auto;background:#fff;box-shadow:2px 2px 0 rgba(0,0,0,.35);padding:clamp(24px,7vw,56px) clamp(20px,6vw,56px);color:#111;transform-origin:top center}
.page h1{font:700 26px/1.1 var(--title);letter-spacing:-.01em}
.page .sub{margin-top:var(--s1);color:#666;font-size:12px}
.page h4{margin-top:var(--s5);padding-bottom:var(--s1);border-bottom:2px solid #111;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.page ul{list-style:none;margin-top:var(--s2)}
.page li{display:grid;grid-template-columns:96px 1fr;gap:var(--s3);padding:6px 0;border-bottom:1px dotted #bbb;font-size:12.5px}
.page li a{color:#111;font-weight:700;text-decoration:none}
.page li a:hover{text-decoration:underline}
.page li span{color:#444}
.zoom{display:flex;align-items:center;gap:var(--s1)}
.zoom button{min-width:28px;height:24px;border-radius:3px;font-weight:700}
.zoom button:hover{background:#fff;box-shadow:inset 0 0 0 1px #c5c1a9}
/* mail */
.mail{display:flex;flex-direction:column;min-height:100%;background:#fff}
.mtool{flex:none;display:flex;gap:var(--s1);padding:var(--s1) var(--s2);background:linear-gradient(180deg,#fbfbf8,#ece9d8);border-bottom:1px solid #d6d2bd}
.mtool button,.mtool a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:56px;min-height:48px;padding:var(--s1) var(--s2);border-radius:3px;font-size:11px;color:#000;text-decoration:none}
.mtool button:hover,.mtool a:hover{background:#fff;box-shadow:inset 0 0 0 1px #c5c1a9}
.mtool svg{width:24px;height:24px}
.mf{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:var(--s2) var(--s3);padding:var(--s3) var(--g);border-bottom:1px solid #e1ddd0;background:var(--face)}
.mf label{font-size:12px;color:#333;text-align:right}
.mf input,.mf .ro{height:28px;padding:0 var(--s2);border:1px solid #7f9db9;background:#fff;font:13px var(--ui);color:#000;min-width:0;width:100%;border-radius:0;display:flex;align-items:center}
.mf .ro{background:#f6f6f2;color:#333}
.mail textarea{flex:1;min-height:180px;resize:none;border:0;padding:var(--s3) var(--g);font:14px/1.5 var(--ui);color:#000;outline:none;user-select:text}
.mnote{flex:none;padding:var(--s2) var(--g);font-size:11px;color:#666;border-top:1px solid #eee}
/* notepad / cmd */
.np{flex:1;width:100%;border:0;resize:none;padding:var(--s3) var(--s3);font:13px/1.5 ui-monospace,"Cascadia Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;color:#000;background:#fff;outline:none;user-select:text}
.npm{flex:none;display:flex;gap:var(--s4);padding:2px var(--s2);font-size:12px;border-bottom:1px solid #d6d2bd;background:var(--face)}
.cmd{flex:1;min-height:0;overflow:auto;background:#000;color:#cfcfcf;font:18px/1.25 "VT",ui-monospace,monospace;padding:var(--s2) var(--s3);user-select:text}
.cmd .ln{white-space:pre-wrap;word-break:break-word}
.cmd .in{display:flex;gap:0}.cmd input{flex:1;min-width:0;background:none;border:0;color:#fff;font:inherit;outline:none;caret-color:#fff}
.cmd a{color:#7fc2ff}
.bin-body{display:grid;place-items:center;text-align:center;padding:var(--g);min-height:100%;background:#fff;color:#444}
.bin-body b{display:block;color:#0b2d8a;font:700 16px var(--title);margin:var(--s3) 0 var(--s1)}
/* dialog */
.dlg{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;background:rgba(0,0,0,.0);animation:dim .5s forwards}
@keyframes dim{to{background:rgba(0,0,0,.45)}}
.dlg.gray{backdrop-filter:grayscale(1);-webkit-backdrop-filter:grayscale(1)}
.dbox{width:min(312px,calc(100vw - 2 * var(--g)));border-radius:6px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.5);background:#5a7edc}
.dh{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 var(--s4);color:#fff;font:700 16px var(--title);background:#00309c}
.dm{display:flex;justify-content:space-around;gap:var(--s2);padding:var(--s5) var(--s3)}
.dm button{display:flex;flex-direction:column;align-items:center;gap:var(--s2);min-width:72px;min-height:44px;color:#fff;font-size:12px}
.dm button i{width:36px;height:36px;border-radius:6px;border:1px solid #fff;display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.dm button i:before{content:"";width:12px;height:12px;border:2px solid #fff;border-top-color:transparent;border-radius:50%}
.dm button:hover i{filter:brightness(1.15)}
.dm .y i{background:linear-gradient(135deg,#f9c440,#e08a10)}.dm .r i{background:radial-gradient(circle at 35% 30%,#ff9a6a,#e3381b 60%,#a91c05)}.dm .g i{background:linear-gradient(135deg,#7ad65f,#2f9a22)}
.df{display:flex;justify-content:flex-end;padding:var(--s3) var(--s4);background:#00309c}
.df .xbtn{min-width:76px}
#bye{background:#000;color:#ff9a3a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s5);text-align:center;padding:0 var(--g);font:700 clamp(18px,4.6vw,26px)/1.3 var(--title)}
#bye .xbtn{font-family:var(--ui);font-weight:400}
#sleep{background:#000;cursor:pointer}

/* ---------- mobile ---------- */
@media (max-width:719px),(pointer:coarse) and (max-height:540px){
 :root{--tb:48px}
 body{font-size:14px}
 .icons{top:var(--s4);left:var(--g);right:var(--g);bottom:auto;grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;gap:var(--s4) var(--s2);justify-items:center}
 .ic{width:100%;max-width:84px;min-height:84px;font-size:12px}
 .ic svg{width:48px;height:48px}
 .ic.bin{position:static}
 .start{padding:0 18px 0 12px;font-size:19px}
 .tasks{padding:6px 4px;gap:4px}
 .task{flex:0 1 44px;justify-content:center;padding:0}
 .task span{display:none}
 .task svg{width:20px;height:20px}
 .tray{gap:var(--s1);padding:0 var(--s2)}
 .tray button{width:44px;height:44px}
 .tray svg{width:18px;height:18px}
 .clock{min-width:auto;font-size:13px}
 .win,.win.max{left:0!important;top:0!important;width:100%!important;height:calc(100% - var(--tb))!important;border-radius:0;padding:0;min-width:0;box-shadow:none}
 .win .tbar{height:44px;border-radius:0;margin:0;padding-left:var(--s3)}
 .tbar h2{font-size:15px}
 .tbar svg.ti{width:20px;height:20px}
 .wb{gap:var(--s1)}
 .wb button{width:36px;height:36px;border-radius:4px}
 .wb .mx{display:none}
 .wb svg{width:14px;height:14px}
 .grip{display:none}
 .xp{grid-template-columns:1fr}
 .xp{background:#fff}
 .xp>.pane{order:2;padding:var(--s4) var(--g);position:static;background:linear-gradient(180deg,#7ba2e7,#6375d6)}
 .main{padding:var(--s5) var(--g)}
 .cards{grid-template-columns:1fr;gap:var(--s3)}
 .tiles{grid-template-columns:1fr;gap:var(--s1)}
 .tile{min-height:64px}
 .box li a,.box li button{min-height:44px;font-size:13px}
 .box h3{min-height:32px;font-size:13px}
 .addr{padding:var(--s1) var(--g)}
 .addr .f{height:32px}
 .addr .go{height:32px}
 .addr>span:first-child{display:none}
 .status{display:none}
 .lead,.ab p{font-size:14.5px}
 .sm{width:100%;border-radius:10px 10px 0 0}
 .smi{min-height:48px}
 .smb{grid-template-columns:1fr}
 .smr{border-left:0;border-top:1px solid #95bdee}
 .smr .smi{min-height:44px}
 .lm{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:var(--s5)}
 .lm .div{display:none}
 .lhi{justify-self:center;text-align:center}
 .users{align-items:center}
 .lb p{display:none}
 .balloon{right:var(--s2);left:var(--s2);width:auto}
 .mf{padding:var(--s3) var(--g);grid-template-columns:56px 1fr}
 .mf input,.mf .ro{height:40px;font-size:16px}
 .mail textarea{font-size:16px}
 .mtool{padding:var(--s1) var(--g)}
 .page li{grid-template-columns:72px 1fr}
 .cmd{font-size:19px}
 .np{font-size:16px;padding:var(--s3) var(--g)}
 .npm{padding:2px var(--g)}
 .dv{padding:var(--s5) var(--s3)}
 .tbar{height:48px!important}
 .wb button{width:40px;height:40px;position:relative}
 .wb button:after{content:"";position:absolute;inset:-3px}
 .tasks{padding:2px 4px}
 .addr .go,.zoom button{min-height:44px;min-width:44px;justify-content:center}
 .addr .f{height:36px}
 .xbtn{min-height:44px}
 .smf button{min-height:44px}
 .balloon .x{width:44px;height:44px;top:0;right:0}
 .mtool button,.mtool a{min-height:52px}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}