:root{
  --bg:#061018; --surface:#0a1222; --panel:#0b1830; --panel2:#10233f;
  --fg:#9fe9f7; --pale:#cfeffa; --accent:#3fd8f0; --dim:#537d88; --line:#1d4a63;
  --hi:#2a6a86; --lo:#03070d;
  --pix:'Silkscreen', 'Courier New', monospace;
  --term:'VT323', 'Courier New', monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg) url(/assets/hero.webp) center/cover fixed no-repeat;color:var(--fg);font-family:var(--term);font-size:21px;line-height:1.25;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(6,16,24,.25),rgba(6,16,24,.85) 80%);pointer-events:none;z-index:0}
a{color:var(--accent)}
button{font:inherit;color:inherit}
.dim{color:var(--dim)}
.small{font-size:18px;color:var(--dim)}
img{max-width:100%;display:block;image-rendering:pixelated}

/* CRT overlay */
.crt{position:fixed;inset:0;pointer-events:none;z-index:90;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.22) 3px);mix-blend-mode:multiply}
.crt::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(0,0,0,.85);animation:flick 6s infinite steps(1)}
@keyframes flick{0%,100%{opacity:1}47%{opacity:.85}48%{opacity:1}83%{opacity:.92}}

/* boot */
.boot{position:fixed;inset:0;z-index:80;background:#02060b;display:grid;place-items:center;transition:opacity .5s}
.boot.gone{opacity:0;pointer-events:none}
.boot-box{width:min(560px,92vw);border:2px solid var(--accent);background:var(--surface);padding:18px;box-shadow:6px 6px 0 #000}
.boot-title{font-family:var(--pix);font-size:14px;letter-spacing:1px;color:var(--bg);background:var(--accent);margin:-18px -18px 14px;padding:4px 10px}
.boot-log{margin:0 0 12px;min-height:7.5em;font-family:var(--term);font-size:20px;white-space:pre-wrap;color:var(--fg)}
.boot-bar{height:16px;border:2px solid var(--line);margin-bottom:14px;padding:2px}
.boot-bar span{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--accent) 0 10px,transparent 10px 13px);transition:width .2s steps(4)}

/* desktop */
.desktop{position:relative;z-index:1;min-height:100vh;padding:18px 18px 70px 120px}
.icons{position:fixed;left:12px;top:16px;display:flex;flex-direction:column;gap:10px;z-index:2}
.icon{background:none;border:1px dotted transparent;width:92px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-family:var(--pix);font-size:11px;color:var(--pale);text-shadow:1px 1px 0 #000}
.icon svg{width:40px;height:40px;filter:drop-shadow(2px 2px 0 #000)}
.icon:hover span,.icon:focus-visible span{background:var(--accent);color:var(--bg);text-shadow:none}
.icon:focus-visible{border-color:var(--accent);outline:none}
.icon:active svg{transform:translate(1px,1px)}

/* windows */
.win{background:var(--surface);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);box-shadow:0 0 0 1px #000,8px 8px 0 rgba(0,0,0,.55),0 0 40px rgba(63,216,240,.08);display:flex;flex-direction:column}
.win[hidden]{display:none}
.win.pop{animation:pop .22s steps(3)}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.titlebar{display:flex;align-items:center;gap:8px;padding:3px 4px 3px 6px;background:linear-gradient(90deg,#0f3a52,#1f7f9e 60%,#3fb8d0);color:#e9fbff;cursor:default;user-select:none;touch-action:none}
.win:not(.front) .titlebar{background:linear-gradient(90deg,#16242f,#2b4553)}
.titlebar h2{flex:1;margin:0;font-family:var(--pix);font-size:12px;font-weight:700;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-ico{width:18px;height:18px}
.tb-btns{display:flex;gap:3px}
.tb{width:22px;height:20px;padding:0;line-height:14px;font-family:var(--pix);font-size:11px;background:var(--panel2);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);cursor:pointer}
.tb:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.btn{font-family:var(--pix);font-size:12px;padding:6px 14px;background:var(--panel2);color:var(--pale);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);box-shadow:1px 1px 0 #000;cursor:pointer;transition:background .15s}
.btn:hover{background:#163a5c;color:#fff}
.btn:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo);transform:translate(1px,1px)}
.btn:focus-visible{outline:1px dotted var(--accent);outline-offset:-5px}

/* browser */
.win-browser{max-width:980px;margin:0 auto;position:relative}
.toolbar{display:flex;align-items:center;gap:6px;padding:5px 6px;background:var(--panel);border-bottom:2px solid var(--lo);flex-wrap:wrap}
.tbtn{font-family:var(--pix);font-size:10px;padding:3px 7px;border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);background:var(--panel2);color:var(--dim)}
button.tbtn{color:var(--pale);cursor:pointer}
.address{flex:1;display:flex;align-items:center;gap:6px;min-width:200px}
.addr-label{font-family:var(--pix);font-size:10px;color:var(--dim)}
.addr{flex:1;background:#02070c;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);padding:1px 8px;font-size:19px;color:var(--fg)}
.throbber svg{width:30px;height:30px;animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.page{background:#050d16 radial-gradient(rgba(63,216,240,.07) 1px,transparent 1.5px) 0 0/6px 6px;padding:0 0 10px;overflow:hidden}
.statusbar{display:flex;justify-content:space-between;padding:2px 8px;background:var(--panel);border-top:2px solid var(--hi);font-size:17px}

.marquee{overflow:hidden;border-bottom:1px dashed var(--line);background:rgba(2,7,12,.85);white-space:nowrap}
.marquee-track{display:inline-flex;animation:marq 38s linear infinite;padding:4px 0}
.marquee-track span{padding-right:2em;color:var(--accent)}
@keyframes marq{to{transform:translateX(-50%)}}

.construct{display:flex;align-items:center;gap:10px;margin:14px 18px;font-family:var(--pix);font-size:13px;letter-spacing:2px;color:var(--pale)}
.hazard{flex:1;min-width:28px;height:14px;background:repeating-linear-gradient(-45deg,var(--accent) 0 8px,#02070c 8px 16px);opacity:.75;animation:haz 1.2s linear infinite;background-size:22.6px 22.6px}
@keyframes haz{to{background-position:22.6px 0}}

.masthead{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:26px;padding:8px 22px 18px;align-items:center}
.mast-pic{border:2px solid var(--accent);padding:6px;background:#02070c;box-shadow:6px 6px 0 #000}
.mast-pic img{width:100%;height:auto}
.pic-cap{font-family:var(--pix);font-size:10px;text-align:center;padding-top:6px;color:var(--dim)}
.kicker{margin:0;color:var(--dim)}
.fontcycle{margin:.1em 0;font-size:clamp(34px,4.4vw,60px);line-height:1.05;color:var(--pale);text-shadow:3px 3px 0 #0f3a52,0 0 18px rgba(63,216,240,.35);height:2.2em;display:flex;align-items:center;font-family:var(--pix);font-weight:700;letter-spacing:-1px}
.ticker{margin:.2em 0 .6em;font-family:var(--pix);font-size:14px}
.ticker span:first-child{color:var(--bg);background:var(--accent);padding:2px 8px}
.lede{margin:.5em 0;max-width:34em;color:var(--fg)}
.cursor-line{color:var(--accent);margin:.8em 0 0}
.cur{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:6px 22px 16px;align-items:stretch}
.dialog{background:var(--panel);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);box-shadow:5px 5px 0 #000;transform:rotate(-1.2deg)}
.dlg-title{display:flex;justify-content:space-between;font-family:var(--pix);font-size:11px;background:linear-gradient(90deg,#0f3a52,#1f7f9e);padding:3px 8px;color:#e9fbff}
.dlg-body{display:flex;align-items:center;gap:14px;padding:16px 18px 6px}
.dlg-body p{margin:0;font-size:30px;color:var(--pale)}
.dlg-ico{width:40px;height:40px;flex:none}
.dlg-btns{display:flex;gap:12px;justify-content:center;padding:10px}
.dlg-answer{min-height:1.4em;margin:0;padding:0 18px 12px;text-align:center;color:var(--accent)}
.counter-box{border:1px dashed var(--line);padding:12px 16px;text-align:center;background:rgba(2,7,12,.75)}
.counter-box p{margin:.2em 0}
.odometer{display:inline-flex;gap:3px;margin:8px 0}
.odometer b{display:inline-block;width:30px;padding:2px 0;font-family:var(--term);font-size:38px;font-weight:400;color:var(--accent);background:#000;border:1px solid var(--line);box-shadow:inset 0 -10px 0 rgba(63,216,240,.06)}

.ca-wrap{padding:6px 22px 16px}
.ca{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#02070c;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);padding:8px 12px;min-height:46px}
.ca-label{font-family:var(--pix);font-size:12px;color:var(--bg);background:var(--accent);padding:2px 8px}
.ca-value{font-family:var(--term);font-size:20px;color:var(--pale);word-break:break-all;flex:1}
.ca-tools{display:flex;align-items:center;gap:8px}
.ca-tools[hidden]{display:none}
.ca-copy{padding:4px 10px}
.ca-exp{display:inline-flex;color:var(--accent)}
.ca-exp svg{width:22px;height:22px}
.ca-exp:hover{color:#fff}

.webring{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:6px 22px 18px;padding:10px;border-top:3px double var(--line);border-bottom:3px double var(--line);text-align:center}
.ring-name{font-family:var(--pix);font-size:12px;color:var(--pale)}
.ring-name .dim{font-family:var(--term);font-size:16px}
.ring-btn{background:none;border:none;color:var(--accent);text-decoration:underline;cursor:pointer;font-size:20px}
.ring-btn:hover{color:#fff;background:#0f3a52}

.foot{display:grid;grid-template-columns:auto 1fr auto;gap:14px 20px;align-items:center;margin:0 22px;padding:14px 0 4px;border-top:1px solid var(--line)}
.foot-id{display:flex;align-items:center;gap:10px;font-family:var(--pix);font-size:12px;color:var(--pale)}
.foot-id img{border:1px solid var(--accent)}
.foot-id b{color:var(--accent)}
.foot-ca .ca{min-height:36px;padding:4px 10px}
.foot-ca .ca-value{font-size:17px}
.foot-links,.hope-links,.tray-links{display:flex;gap:8px;align-items:center}
.ilink{display:inline-grid;place-items:center;width:36px;height:36px;color:var(--accent);background:var(--panel2);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);transition:color .15s,background .15s}
.ilink svg{width:20px;height:20px}
.ilink:hover{color:#fff;background:#163a5c}
.ilink:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.foot-note{grid-column:1/-1;margin:4px 0 0;font-size:16px;color:var(--dim);text-align:center}

/* folders */
.win-folder{position:fixed;width:min(560px,calc(100vw - 150px));max-height:calc(100vh - 90px);z-index:20}
.folder-body,.notepad{padding:14px 16px;overflow:auto;background:var(--surface)}
.notepad{background:#03080f;font-size:21px}
.notepad p{margin:0 0 .7em}
.notepad p:nth-child(odd){color:var(--accent);margin-bottom:.2em}
.path{margin:0 0 10px;color:var(--dim)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gallery figure{margin:0;border:1px solid var(--line);padding:4px;background:#02070c}
.gallery figure:first-child{grid-column:1/-1}
.gallery img{width:100%;height:auto;image-rendering:auto}
.gallery figcaption{font-family:var(--pix);font-size:10px;text-align:center;padding-top:4px}
textarea{width:100%;background:#000;color:var(--fg);border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);font:inherit;padding:8px;margin:8px 0;resize:vertical}
textarea:focus{outline:1px solid var(--accent)}
.np-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dl-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dl-bar{flex:1;height:16px;border:2px solid var(--line);padding:2px}
.dl-bar span{display:block;height:100%;width:99%;background:repeating-linear-gradient(90deg,var(--accent) 0 10px,transparent 10px 13px)}
.files{list-style:none;margin:0;padding:0}
.files a{display:flex;align-items:center;gap:10px;padding:4px 6px;color:var(--pale);text-decoration:none}
.files a:hover{background:var(--accent);color:var(--bg)}
.files svg{width:26px;height:26px}
.hope-big{font-size:28px;color:var(--pale);margin:0 0 6px}
.hope-links{margin-top:10px;justify-content:center}

/* taskbar */
.taskbar{position:fixed;left:0;right:0;bottom:0;height:44px;z-index:60;display:flex;align-items:center;gap:6px;padding:4px 6px;background:var(--panel);border-top:2px solid var(--hi);box-shadow:0 -1px 0 #000}
.start{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 6px;font-family:var(--pix);font-weight:700;font-size:13px;background:var(--panel2);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);cursor:pointer}
.start[aria-expanded=true]{border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.start img{image-rendering:auto}
.tasks{flex:1;display:flex;gap:4px;overflow:hidden}
.task{max-width:170px;height:32px;padding:0 10px;font-family:var(--pix);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--panel2);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);cursor:pointer}
.task.on{border-color:var(--lo) var(--hi) var(--hi) var(--lo);background:#07111f}
.tray{display:flex;align-items:center;gap:8px;height:34px;padding:0 8px;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.tray .ilink{width:26px;height:26px;border:none;background:none}
.tray .ilink svg{width:16px;height:16px}
.clock{font-size:20px;color:var(--pale)}
.startmenu{position:absolute;left:4px;bottom:44px;display:flex;background:var(--surface);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);box-shadow:5px 5px 0 #000;min-width:250px}
.startmenu[hidden]{display:none}
.sm-side{writing-mode:vertical-rl;transform:rotate(180deg);background:linear-gradient(0deg,#0f3a52,#3fb8d0);color:#e9fbff;font-family:var(--pix);font-weight:700;font-size:16px;padding:10px 4px;letter-spacing:2px}
.startmenu ul{list-style:none;margin:0;padding:4px;flex:1}
.startmenu button{width:100%;text-align:left;background:none;border:none;padding:6px 10px;cursor:pointer;font-size:20px}
.startmenu button:hover,.startmenu button:focus-visible{background:var(--accent);color:var(--bg);outline:none}
.startmenu .sep{border-top:1px solid var(--hi);border-bottom:1px solid var(--lo);margin:4px 0}

.toast{position:fixed;right:14px;bottom:56px;z-index:70;background:var(--panel);border:2px solid var(--accent);padding:8px 14px;box-shadow:4px 4px 0 #000}
.toast[hidden]{display:none}

.off{position:fixed;inset:0;z-index:85;background:#000;display:grid;place-items:center;text-align:center;color:var(--accent);font-family:var(--pix);font-size:14px;padding:20px}

/* mobile: windows stack, icons become a strip */
@media (max-width:760px){
  body{font-size:19px;background-attachment:scroll}
  .desktop{padding:10px 8px 64px}
  .icons{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:2px;margin-bottom:10px}
  .icon{width:58px;font-size:9px}
  .icon svg{width:30px;height:30px}
  .toolbar .tbtn:not(#reload){display:none}
  .throbber{display:none}
  .address{min-width:0}
  .masthead,.row2{grid-template-columns:1fr;padding-left:12px;padding-right:12px}
  .mast-pic{max-width:300px;margin:0 auto}
  .fontcycle{height:2.3em}
  .construct{margin:12px;font-size:11px;letter-spacing:1px;text-align:center}
  .ca-wrap{padding-left:12px;padding-right:12px}
  .foot{grid-template-columns:1fr;margin:0 12px;justify-items:center}
  .foot-ca{width:100%}
  .win-folder{position:fixed;left:6px!important;right:6px;top:10px!important;width:auto;max-height:calc(100vh - 70px)}
  .tasks{display:none}
  .dialog{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.boot[hidden]{display:none}