@font-face{font-family:"NS";src:url(fonts/ns-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"NS";src:url(fonts/ns-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"NS";src:url(fonts/ns-BoldItalic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
:root{
  --g:clamp(20px,5.5vw,40px);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --ui:"NS",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --beige:#ece9d8;--line:#aca899;--blue:#0a246a;--link:#1450c8;
  --barH:32px;--titleH:30px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;height:100%;overflow:hidden;background:#000}
body{font-family:var(--ui);font-size:13px;line-height:1.4;color:#000;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:var(--link)}
img,svg{display:block}
p,h1,h2,h3,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px dotted #fff;outline-offset:2px}
.win :focus-visible,.start-menu :focus-visible{outline:1px dotted #000;outline-offset:1px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.os{position:fixed;inset:0;height:100%;height:100dvh;overflow:hidden;user-select:none;-webkit-user-select:none}
.scr{position:absolute;inset:0;display:none}
.os[data-stage=boot] #boot,.os[data-stage=hello] #hello,.os[data-stage=login] #login,.os[data-stage=desk] #desk,.os[data-stage=off] #off,.os[data-stage=off] #desk,.os[data-stage=dark] #dark{display:block}
.os[data-stage=off] #off{display:flex;z-index:50}
.fine{} /* swapped to "tap" on touch */

/* BOOT */
.boot{background:#000;color:#fff;cursor:progress}
.boot-mark{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);text-align:left;white-space:nowrap}
.boot-word{font-weight:700;font-style:italic;font-size:clamp(34px,7.4vw,56px);letter-spacing:-.02em;line-height:1}
.bw-b{color:#fff}
.boot-sub{margin-top:var(--s2);text-align:right;font-weight:700;font-style:italic;font-size:clamp(16px,3vw,22px);color:#f78a1d}
.boot-sub em{font-style:italic;color:#fff;font-size:.62em;vertical-align:super;margin-left:2px}
.boot-bar{position:absolute;left:50%;top:64%;width:150px;height:16px;margin-left:-75px;border:2px solid #b2b2b2;border-radius:4px;overflow:hidden;padding:2px}
.boot-bar i{position:absolute;top:2px;width:9px;height:8px;border-radius:1px;background:linear-gradient(#2838c7,#7a8cff 45%,#2838c7);animation:slide 2.1s linear infinite}
.boot-bar i:nth-child(2){animation-delay:.12s}.boot-bar i:nth-child(3){animation-delay:.24s}
@keyframes slide{0%{left:-34px}100%{left:150px}}
.boot-foot{position:absolute;left:0;right:0;bottom:calc(var(--g) + env(safe-area-inset-bottom));text-align:center;font-size:12px;color:#8a8a8a;letter-spacing:.04em}

/* WELCOME + LOGIN shared */
.hello,.lg-mid{background:radial-gradient(circle at 8% 10%,#91b1ef 0,#6f93e3 18%,#5a7edc 48%) #5a7edc}
.hello{}
.hello-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:700;font-style:italic;font-size:clamp(40px,9vw,72px);color:#fff;text-shadow:2px 3px 0 #2c4fb1;animation:fadein .6s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.login{display:none;flex-direction:column}
.os[data-stage=login] #login{display:flex}
.lg-top{flex:0 0 clamp(64px,11vh,96px);background:#00309c;position:relative}
.lg-top::after,.lg-bot::before{content:"";position:absolute;left:0;right:0;height:2px}
.lg-top::after{bottom:0;background:linear-gradient(90deg,#466fd8 0,#fff 50%,#466fd8 100%)}
.lg-bot{flex:0 0 clamp(72px,12vh,104px);background:linear-gradient(#2a50b8,#183d9e);position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding:0 var(--g);padding-bottom:env(safe-area-inset-bottom)}
.lg-bot::before{top:0;background:linear-gradient(90deg,#2a50b8 0,#ef9b3a 50%,#2a50b8 100%)}
.lg-mid{flex:1;display:grid;grid-template-columns:1fr 2px 1fr;align-items:center;min-height:0}
.lg-left{justify-self:end;text-align:right;padding:0 var(--s6) 0 var(--g);color:#fff}
.lg-brand{display:flex;flex-direction:column;align-items:flex-end;margin-bottom:var(--s5)}
.lg-brand b{font-weight:700;font-style:italic;font-size:clamp(28px,3.4vw,44px);line-height:1.05;text-shadow:1px 2px 0 rgba(0,25,110,.45)}
.lg-brand span{font-weight:700;font-style:italic;font-size:clamp(14px,1.5vw,18px);color:#ffcf73;margin-top:var(--s1)}
.lg-hint{font-size:18px;font-weight:400;line-height:1.35}
.lg-rule{align-self:stretch;margin:12% 0;background:linear-gradient(transparent,rgba(255,255,255,.85) 30%,rgba(255,255,255,.85) 70%,transparent)}
.lg-right{padding:0 var(--g) 0 var(--s6)}
.user{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s5) var(--s3) var(--s3);border-radius:10px;color:#fff;text-align:left;min-height:88px;transition:background .15s}
.user:hover,.user:focus-visible{background:linear-gradient(90deg,#0d3fa9 0,rgba(13,63,169,0) 100%)}
.user-pic{flex:0 0 auto;width:68px;height:68px;border-radius:6px;border:2px solid #fff;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:border-color .15s}
.user-pic img{width:64px;height:64px;object-fit:cover}
.user:hover .user-pic,.user:focus-visible .user-pic{border-color:#ffc94a}
.user-txt b{display:block;font-size:24px;font-weight:700;line-height:1.15}
.user-txt small{display:block;font-size:13px;color:#d9e5ff;margin-top:2px}
.pwr{display:flex;align-items:center;gap:var(--s2);color:#fff;font-size:15px;min-height:44px;padding-right:var(--s2)}
.pwr svg{width:32px;height:32px;flex:0 0 auto}
.lg-help{color:#fff;font-size:14px;max-width:420px;text-align:right}

/* DESKTOP */
.desk{background:#3d7bd9}
.wall,.wall img{position:absolute;inset:0;width:100%;height:100%}
.wall img{object-fit:cover;object-position:50% 60%}
.icons{position:absolute;top:var(--s5);left:var(--g);display:grid;grid-template-columns:repeat(2,84px);grid-auto-rows:92px;gap:var(--s2) var(--s3);z-index:1}
.ico{display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding-top:var(--s1);width:84px;color:#fff;text-align:center;border-radius:2px}
.ico svg{width:48px;height:48px;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.35))}
.ico span{font-size:12px;line-height:15px;padding:1px 3px;text-shadow:1px 1px 1px #000,0 0 2px rgba(0,0,0,.6);border-radius:1px}
.ico.sel span{background:#0b61ff;text-shadow:none}
.ico.sel svg{filter:drop-shadow(1px 2px 1px rgba(0,0,0,.35)) brightness(.75) sepia(1) hue-rotate(185deg) saturate(3)}
.wins{position:absolute;inset:0 0 var(--barH) 0;z-index:2;pointer-events:none}

/* TASKBAR */
.bar{position:absolute;left:0;right:0;bottom:0;height:calc(var(--barH) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex;align-items:stretch;z-index:20;
 background:linear-gradient(#1c4ec8 0,#3e86f0 4%,#3279e8 9%,#2463de 18%,#2259d6 50%,#2460dc 84%,#1e51c8 94%,#163fa6 100%)}
.start{position:relative;display:flex;align-items:center;gap:6px;padding:0 22px 2px 10px;margin-right:var(--s2);border-radius:0 12px 12px 0;color:#fff;font-weight:700;font-style:italic;font-size:19px;letter-spacing:.01em;text-shadow:1px 1px 2px rgba(0,0,0,.55);
 background:radial-gradient(ellipse at 40% 0,#8fd88f 0,rgba(143,216,143,0) 60%),linear-gradient(#3c9a3c 0,#4fb34f 12%,#3d993d 50%,#2f8a2f 88%,#256f25 100%);box-shadow:inset -2px 0 3px rgba(0,0,0,.25),inset 0 1px 1px rgba(255,255,255,.45)}
.start:hover{filter:brightness(1.08)}.start[aria-expanded=true]{filter:brightness(.85)}
.start svg{width:20px;height:20px;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.4))}
.tasks{flex:1;display:flex;gap:3px;align-items:center;min-width:0;padding:0 var(--s1);overflow:hidden}
.task{flex:0 1 160px;min-width:0;height:24px;display:flex;align-items:center;gap:6px;padding:0 var(--s2);border-radius:3px;color:#fff;font-size:12px;white-space:nowrap;background:linear-gradient(#4f93f6,#3b7deb 50%,#3473e2);box-shadow:inset 1px 1px 0 rgba(255,255,255,.3),inset -1px -1px 0 rgba(0,0,0,.25)}
.task.on{background:linear-gradient(#1d4fb8,#1f53c1);box-shadow:inset 1px 1px 2px rgba(0,0,0,.45)}
.task svg{width:16px;height:16px;flex:0 0 auto}
.task span{overflow:hidden;text-overflow:ellipsis}
.tray{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3) 0 var(--s2);color:#fff;font-size:12px;
 background:linear-gradient(#0f8ff0 0,#14a0f5 8%,#0e8ae8 50%,#0b7ad8 92%,#0a68c0 100%);border-left:1px solid #0b4fb0;box-shadow:inset 1px 0 0 #3ec0ff}
.tray-b{width:24px;height:24px;display:grid;place-items:center}.tray-b svg{width:16px;height:16px}
.tray time{white-space:nowrap}

/* BALLOON */
.balloon{position:absolute;right:var(--s3);bottom:calc(var(--barH) + 14px + env(safe-area-inset-bottom));z-index:25;width:260px;padding:var(--s3) var(--s6) var(--s3) var(--s3);background:#ffffe1;border:1px solid #000;border-radius:8px;box-shadow:2px 3px 6px rgba(0,0,0,.3);font-size:12px;animation:fadein .3s}
.balloon::after{content:"";position:absolute;right:46px;bottom:-12px;border:6px solid transparent;border-top:6px solid #000;border-right-color:#000;}
.bl-t{display:flex;align-items:center;gap:6px;font-weight:700;margin-bottom:var(--s1)}.bl-t svg{width:14px;height:14px}
.bl-x{position:absolute;right:4px;top:4px;width:28px;height:28px;font-size:16px;line-height:1;color:#555;border-radius:3px}
.bl-x:hover{background:#e8e1b4}

/* START MENU */
.start-menu{position:absolute;left:0;bottom:calc(var(--barH) + env(safe-area-inset-bottom));z-index:30;width:400px;max-width:100%;max-height:calc(100% - var(--barH) - 8px);display:flex;flex-direction:column;border-radius:8px 8px 0 0;overflow:hidden;background:#fff;box-shadow:2px 0 8px rgba(0,0,0,.45);border:1px solid #1b4bbd;border-bottom:0;animation:pop .14s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sm-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);min-height:64px;color:#fff;font-size:16px;text-shadow:1px 1px 1px rgba(0,0,0,.5);background:linear-gradient(#1868ce 0,#0e60cb 10%,#0e5ac6 50%,#0f55bf 90%,#0c4aa8 100%);border-bottom:2px solid #f39c33}
.sm-pic{width:52px;height:52px;border:2px solid #fff;border-radius:5px;overflow:hidden;background:#fff;flex:0 0 auto}.sm-pic img{width:48px;height:48px;object-fit:cover}
.sm-body{display:grid;grid-template-columns:1fr 1fr;min-height:0;overflow:auto}
.sm-left{padding:var(--s2) 0;background:#fff}
.sm-right{padding:var(--s2) 0;background:#d3e5fa;border-left:1px solid #95bdee}
.sm-item{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:44px;padding:var(--s1) var(--s3);text-align:left;text-decoration:none;color:#000}
.sm-item:hover,.sm-item:focus-visible{background:#2f71cd;color:#fff}
.sm-item:hover small,.sm-item:focus-visible small{color:#e5eeff}
.sm-item svg{width:32px;height:32px;flex:0 0 auto}
.sm-right .sm-item svg{width:24px;height:24px}
.sm-item b{display:block;font-size:12px;font-weight:700;line-height:1.25}
.sm-right .sm-item b{font-weight:400;color:#0a246a}.sm-right .sm-item:hover b{color:#fff}
.sm-item small{display:block;font-size:11px;color:#6d6d6d;line-height:1.3}
.sm-sep{height:1px;margin:var(--s1) var(--s3);background:linear-gradient(90deg,transparent,#c5c5c5 20%,#c5c5c5 80%,transparent)}
.sm-right .sm-sep{background:#a9c7ec}
.sm-foot{display:flex;justify-content:flex-end;gap:var(--s2);padding:var(--s1) var(--s2);background:linear-gradient(#1868ce,#0f55bf 60%,#0c4aa8)}
.sm-foot button{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s2);color:#fff;font-size:12px;border-radius:3px}
.sm-foot button:hover{background:rgba(255,255,255,.14)}
.sm-foot svg{width:24px;height:24px}

/* WINDOWS */
.win{position:absolute;display:flex;flex-direction:column;pointer-events:auto;min-width:280px;min-height:180px;background:var(--beige);border:3px solid #0842d6;border-top:0;border-radius:8px 8px 0 0;box-shadow:2px 3px 10px rgba(0,0,0,.35);animation:winin .16s ease-out}
@keyframes winin{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.win.closing{animation:winout .14s ease-in forwards}@keyframes winout{to{opacity:0;transform:scale(.96)}}
.win.min{display:none}
.win.inactive{border-color:#7a96df}
.ttl{flex:0 0 var(--titleH);display:flex;align-items:center;gap:6px;padding:0 4px 0 6px;margin:0 -3px;border-radius:7px 7px 0 0;color:#fff;cursor:default;touch-action:none;
 background:linear-gradient(#0a5fe8 0,#3e8ef7 6%,#2a78f2 12%,#0d5be4 30%,#0b55dd 60%,#0a50d6 85%,#0948c4 100%)}
.win.inactive .ttl{background:linear-gradient(#7e9ee6,#94b2ee 10%,#7a98e2 40%,#7592df 100%);color:#d8e3fb}
.ttl svg.ti{width:16px;height:16px;flex:0 0 auto}
.ttl h2{flex:1;min-width:0;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:1px 1px 1px #0b2f8a}
.tb{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;border:1px solid #fff;border-radius:3px;background:linear-gradient(135deg,#5b98ff,#2f6ff0 60%,#2560e0);box-shadow:inset -1px -1px 1px rgba(0,0,0,.25)}
.tb:hover{filter:brightness(1.15)}
.tb svg{width:12px;height:12px}
.tb.x{background:linear-gradient(135deg,#f0956d,#e05a2c 55%,#c9421b)}
.win.inactive .tb{opacity:.75}
.mnu{flex:0 0 auto;display:flex;gap:0;padding:0 var(--s1);height:22px;align-items:center;font-size:12px;border-bottom:1px solid #d5d1bd;background:var(--beige)}
.mnu span{padding:2px 6px}
.tool{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:2px var(--s1);border-bottom:1px solid #d5d1bd;background:var(--beige);font-size:12px;overflow:hidden}
.tool button,.tool a{display:flex;align-items:center;gap:4px;min-height:32px;padding:0 6px;border:1px solid transparent;border-radius:3px;color:#000;text-decoration:none;white-space:nowrap}
.tool button:hover:not(:disabled),.tool a:hover{border-color:#cecab6;background:#f6f5ee}
.tool button:disabled{opacity:.45;cursor:default}
.tool svg{width:22px;height:22px}
.tool .sp{width:1px;height:24px;background:#c9c5b0;margin:0 var(--s1)}
.addr{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:3px var(--s1);font-size:12px;border-bottom:1px solid #d5d1bd;background:var(--beige)}
.addr > span{color:#6d6d6d}
.addr .box{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:22px;padding:0 6px;background:#fff;border:1px solid #7f9db9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addr .box svg{width:16px;height:16px;flex:0 0 auto}
.body{flex:1;min-height:0;display:flex;background:#fff;border-top:0;overflow:hidden}
.scroll{flex:1;min-width:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.stat{flex:0 0 22px;display:flex;align-items:center;padding:0 var(--s2);font-size:11px;color:#333;border-top:1px solid #d5d1bd;background:var(--beige);white-space:nowrap;overflow:hidden}
.grip{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;cursor:nwse-resize;touch-action:none}

/* EXPLORER */
.pane{flex:0 0 200px;padding:var(--s3);overflow:auto;background:linear-gradient(#7ba2e7,#6375d6)}
.grp{margin-bottom:var(--s3);border-radius:4px 4px 0 0;overflow:hidden;background:#d6dff7}
.grp h3{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;font-size:12px;font-weight:700;color:#215dc6;background:linear-gradient(90deg,#fff,#c6d3f7)}
.grp ul{padding:var(--s2) 10px}
.grp li{font-size:11px;line-height:1.4;padding:3px 0}
.grp li a,.grp li button{display:flex;align-items:center;gap:6px;color:#0c32a6;text-decoration:none;text-align:left}
.grp li a:hover,.grp li button:hover{text-decoration:underline}
.grp li svg{width:16px;height:16px;flex:0 0 auto}
.grp.det li{color:#333}
.grp.det b{display:block;color:#000}
.fview{padding:var(--s4)}
.fh{font-size:12px;font-weight:700;color:#0a246a;padding:var(--s2) 0 var(--s1);margin-bottom:var(--s2);border-bottom:1px solid;border-image:linear-gradient(90deg,#7ba2e7,transparent) 1}
.fh:not(:first-child){margin-top:var(--s4)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s1) var(--s3)}
.fi{display:flex;align-items:center;gap:var(--s2);min-height:56px;padding:var(--s1);border:1px solid transparent;border-radius:2px;text-align:left;color:#000;text-decoration:none;width:100%}
.fi:hover{border-color:#cfdffb;background:#eaf2ff}
.fi:focus-visible,.fi.sel{background:#316ac5;color:#fff;outline:none}
.fi:focus-visible small,.fi.sel small{color:#dce7ff}
.fi svg{width:48px;height:48px;flex:0 0 auto}
.fi b{display:block;font-size:12px;font-weight:400}
.fi small{display:block;font-size:11px;color:#7a7a7a;line-height:1.3}
.sgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sgrid .fi svg{width:32px;height:32px}
.sgrid .fi{min-height:44px}

/* DOCUMENT pages (product, profile) */
.doc{padding:var(--s5) var(--s5) var(--s6);max-width:720px}
.doc .kicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6a7aa8;margin-bottom:var(--s2)}
.doc h1{font-size:26px;line-height:1.15;font-weight:700;color:#0a246a;margin-bottom:var(--s2)}
.doc .lede{font-size:15px;line-height:1.5;color:#2b2b2b;margin-bottom:var(--s5)}
.doc h3{font-size:13px;font-weight:700;color:#0a246a;margin:var(--s5) 0 var(--s2);padding-bottom:var(--s1);border-bottom:1px solid #d6dff7}
.doc p{font-size:13px;line-height:1.6;color:#2b2b2b;margin-bottom:var(--s3)}
.doc ul.dots li{position:relative;padding-left:var(--s4);font-size:13px;line-height:1.55;margin-bottom:6px;color:#2b2b2b}
.doc ul.dots li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:1px;background:#3a77e0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s4)}
.chips span{font-size:11px;padding:3px 8px;border-radius:10px;background:#eaf0fd;color:#22448f;border:1px solid #c9d7f6}
.xbtn{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);font-size:13px;color:#000;text-decoration:none;border:1px solid #003c74;border-radius:3px;background:linear-gradient(#fff,#ecebe6 86%,#d6d0c5);box-shadow:inset -1px -1px 0 rgba(0,0,0,.08)}
.xbtn:hover{box-shadow:inset 0 0 0 2px #f8b636}
.xbtn{white-space:nowrap}.xbtn svg{width:20px;height:20px;flex:0 0 auto}
.xbtn.pri{box-shadow:inset 0 0 0 2px #98b8ea}.xbtn.pri:hover{box-shadow:inset 0 0 0 2px #f8b636}
.xrow{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.prof{display:flex;gap:var(--s5);align-items:center;margin-bottom:var(--s5)}
.prof-pic{width:120px;height:120px;flex:0 0 auto;border:3px solid #fff;outline:1px solid #b8c6e6;box-shadow:2px 3px 6px rgba(0,0,0,.2);background:#fff}
.prof-pic img{width:114px;height:114px;object-fit:cover}

/* MAIL */
.mail .fields{padding:var(--s2) var(--s3);background:var(--beige);border-bottom:1px solid #d5d1bd;display:grid;grid-template-columns:auto 1fr;gap:6px var(--s2);align-items:center}
.mail label{font-size:12px;text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:4px}
.mail input,.mail textarea,.np textarea{font:inherit;font-size:13px;color:#000;border:1px solid #7f9db9;background:#fff;border-radius:0;padding:4px 6px;width:100%;min-width:0;user-select:text;-webkit-user-select:text}
.mail input{height:30px}
.mail input[readonly]{background:#f5f4ee;color:#333}
.mail input.bad,.mail textarea.bad{border-color:#d02020;box-shadow:0 0 0 1px #d02020}
.mail textarea.bad{background:#fff6f5;box-shadow:inset 0 0 0 2px #d02020}
.mail .msg{flex:1;display:flex;flex-direction:column;min-height:0}
.mail textarea{flex:1;border:0;resize:none;padding:var(--s3);line-height:1.5;min-height:120px}
.mail .ok{color:#126b12}.mail .err{color:#b11d1d}
.mail-side{padding:var(--s2) var(--s3);font-size:12px;background:#f7f6f0;border-top:1px solid #e1ddc8;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4)}
.mail-side a{display:inline-flex;align-items:center;min-height:32px}

/* NOTEPAD */
.np textarea{flex:1;border:0;resize:none;padding:var(--s2) var(--s3);font-family:ui-monospace,"DejaVu Sans Mono",Menlo,Consolas,monospace;font-size:13px;line-height:1.5;white-space:pre-wrap}

/* TERMINAL */
.term{flex:1;background:#0c0c0c;color:#cfcfcf;font-family:ui-monospace,"DejaVu Sans Mono",Menlo,Consolas,monospace;font-size:13px;line-height:1.5;padding:var(--s2) var(--s3);overflow:auto;user-select:text;-webkit-user-select:text}
.term .row{display:flex;gap:6px}
.term input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:inherit;padding:0;caret-color:#fff}
.term a{color:#7fb6ff}
.term .dim{color:#8a8a8a}.term .hi{color:#9fe870}

/* MINES */
.mines{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--s3);background:var(--beige);overflow:auto}
.mframe{padding:6px;background:#c0c0c0;border:3px solid;border-color:#fff #808080 #808080 #fff}
.mtop{display:flex;justify-content:space-between;align-items:center;padding:4px;margin-bottom:6px;border:2px solid;border-color:#808080 #fff #fff #808080}
.lcd{min-width:46px;padding:0 3px;background:#000;color:#ff2a10;font:700 22px/26px ui-monospace,"DejaVu Sans Mono",monospace;letter-spacing:1px;text-align:right}
.face{width:34px;height:34px;display:grid;place-items:center;background:#c0c0c0;border:2px solid;border-color:#fff #808080 #808080 #fff}
.face:active{border-color:#808080 #fff #fff #808080}
.face svg{width:24px;height:24px}
.mgrid{display:grid;grid-template-columns:repeat(9,var(--c));border:3px solid;border-color:#808080 #fff #fff #808080;--c:32px}
.cell{width:var(--c);height:var(--c);display:grid;place-items:center;font:700 16px/1 var(--ui);background:#c0c0c0;border:3px solid;border-color:#fff #808080 #808080 #fff;padding:0}
.cell.open{border:1px solid #9a9a9a;border-width:0 1px 1px 0}
.cell.boom{background:#ff2a10}
.cell svg{width:18px;height:18px}
.n1{color:#0000f0}.n2{color:#007b00}.n3{color:#f00000}.n4{color:#00007b}.n5{color:#7b0000}.n6{color:#007b7b}.n7{color:#000}.n8{color:#7b7b7b}
.mhelp{margin-top:var(--s3);font-size:12px;color:#444;text-align:center;max-width:320px}
.mflag{margin-top:var(--s2);display:none}

/* SHUTDOWN */
.off{align-items:center;justify-content:center;background:rgba(0,0,0,.0)}
.os[data-stage=off] #desk{filter:grayscale(1) brightness(.9);transition:filter 1.2s}
.off-box{width:min(320px,calc(100% - 2 * var(--g)));border-radius:6px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.5);background:#5a7edc;animation:pop .2s}
.off-h{padding:var(--s3) var(--s4);color:#fff;font-size:18px;font-weight:700;font-style:italic;background:#00309c;border-bottom:2px solid #fff}
.off-row{display:flex;justify-content:space-around;padding:var(--s5) var(--s2)}
.off-row button{display:flex;flex-direction:column;align-items:center;gap:var(--s2);color:#fff;font-size:12px;min-width:72px;min-height:44px}
.ob{width:36px;height:36px;border-radius:5px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.7)}
.ob svg{width:26px;height:26px}
.ob-y{background:linear-gradient(#fdd65a,#e8a20e)}.ob-r{background:linear-gradient(#f07a5c,#c9341a)}.ob-g{background:linear-gradient(#7fd36b,#2e9a1c)}
.off-row button:hover .ob{filter:brightness(1.15)}
.off-f{display:flex;justify-content:flex-end;padding:var(--s2) var(--s3);background:#00309c;border-top:2px solid #ef9b3a}
.off-f button{min-height:32px;padding:0 var(--s4);font-size:12px;background:linear-gradient(#fff,#ecebe6);border:1px solid #003c74;border-radius:3px}
.dark{background:#000;color:#8f8f8f;cursor:pointer}
.dark p{position:absolute;left:var(--g);right:var(--g);top:50%;transform:translateY(-50%);text-align:center;font-size:15px;line-height:1.6}

/* SMALL SCREENS */
@media (max-width:640px){
  :root{--barH:48px;--titleH:44px}
  body{font-size:14px}
  .lg-mid{grid-template-columns:1fr;grid-template-rows:auto 2px auto;align-content:center;gap:var(--s5)}
  .lg-left{justify-self:stretch;text-align:left;padding:0 var(--g)}
  .lg-brand{align-items:flex-start}
  .lg-hint{font-size:17px}
  .lg-rule{margin:0 var(--g);background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.15))}
  .lg-right{padding:0 var(--g)}
  .user{width:100%;margin-left:calc(-1 * var(--s3));width:calc(100% + var(--s3))}
  .lg-bot{flex-direction:row}
  .lg-help{font-size:12px;max-width:52%}
  .icons{grid-template-columns:repeat(3,1fr);width:calc(100% - 2 * var(--g));grid-auto-rows:96px;gap:var(--s2) 0}
  .ico{width:100%}
  .ico span{font-size:13px}
  .start{font-size:21px;padding:0 20px 2px 12px;margin-right:var(--s1)}
  .start svg{width:24px;height:24px}
  .task{height:44px;flex-basis:44px;max-width:56px;justify-content:center;padding:0}
  .task span{display:none}
  .task svg{width:22px;height:22px}
  .tray{padding:0 var(--s2) 0 var(--s1);gap:0}
  .tray-b{width:44px;height:44px}
  .start-menu{width:100%;border-radius:0}
  .sm-head{padding:var(--s2) var(--g);font-size:17px}
  .sm-body{grid-template-columns:1fr}
  .sm-right{border-left:0;border-top:1px solid #95bdee}
  .sm-item{padding:var(--s1) var(--g)}
  .sm-sep{margin:var(--s1) var(--g)}
  .sm-foot{padding:var(--s1) calc(var(--g) - var(--s2))}
  .balloon{left:var(--g);right:var(--g);width:auto}
  .balloon::after{right:22px}
  .bl-x{width:44px;height:44px;right:0;top:0}
  .balloon{padding-right:44px}
  .win{left:0!important;top:0!important;width:100%!important;height:100%!important;border-width:0;border-radius:0;animation:winup .2s ease-out}
  @keyframes winup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .ttl{margin:0;border-radius:0;padding:0 0 0 var(--g);gap:var(--s2)}
  .ttl svg.ti{width:20px;height:20px}
  .ttl h2{font-size:15px}
  .tb{width:44px;height:44px;border:0;border-radius:0;background:none;box-shadow:none;position:relative}
  .tb::before{content:"";position:absolute;inset:8px;border:1px solid #fff;border-radius:4px;background:linear-gradient(135deg,#5b98ff,#2f6ff0 60%,#2560e0)}
  .tb.x::before{background:linear-gradient(135deg,#f0956d,#e05a2c 55%,#c9421b)}
  .tb svg{position:relative;width:14px;height:14px}
  .tb.mx{display:none}
  .grip{display:none}
  .mnu{display:none}
  .tool{padding:2px calc(var(--g) - 6px)}
  .tool button,.tool a{min-height:44px;min-width:44px;justify-content:center}
  .tool .lbl{display:none}
  .addr{padding:4px var(--g)}
  .addr > span{display:none}
  .addr .box{height:30px}
  .pane{display:none}
  .fview{padding:var(--s3) var(--g) var(--s5)}
  .fgrid,.sgrid{grid-template-columns:1fr;gap:2px}
  .sgrid{grid-template-columns:1fr 1fr;column-gap:var(--s2)}
  .fi{min-height:60px;margin-left:-4px;width:calc(100% + 8px)}
  .sgrid .fi{min-height:48px}
  .doc{padding:var(--s5) var(--g) var(--s6)}
  .doc h1{font-size:24px}
  .doc .lede{font-size:15px}
  .doc p,.doc ul.dots li{font-size:14px}
  .prof{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .prof-pic{width:104px;height:104px}.prof-pic img{width:98px;height:98px}
  .mail .fields{padding:var(--s2) var(--g)}
  .mail input{height:40px;font-size:16px}
  .mail textarea{font-size:16px;padding:var(--s3) var(--g)}
  .mail-side{padding:var(--s2) var(--g)}
  .mail-side a{min-height:44px;min-width:44px;justify-content:center}
  .np textarea{font-size:14px;padding:var(--s3) var(--g)}
  .term{padding:var(--s3) var(--g);font-size:13px}
  .term input{font-size:16px;min-height:44px}
  .term .row{align-items:center}
  .stat{padding:0 var(--g)}
  .mines{padding:var(--s4) var(--g)}
  .mgrid{--c:min(36px,calc((100vw - 2 * var(--g) - 24px) / 9))}
  .face{width:44px;height:44px}
  .mflag{display:inline-flex}
  .off-row button{min-width:80px}
}
@media (max-width:370px){
  .lg-help{display:none}
  .icons{grid-auto-rows:88px}
  .start{padding-right:16px}
}
@media (max-height:520px) and (max-width:640px){.icons{grid-auto-rows:84px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}.boot-bar i{animation:none;left:60px}}