:root{--paper:#f3ecdc;--ink:#1d1a15;--mute:#6d655a;--line:rgba(29,26,21,.18);--gold:#f2a900}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{background:#0b0a09;color:var(--ink);font:400 16px/1.55 Inter,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.hero{position:relative;height:100vh;min-height:560px;overflow:hidden;background:#0b0a09}
.stage{position:absolute;left:50%;top:50%;width:max(100vw,calc(100vh*1376/768));aspect-ratio:1376/768;transform:translate(-50%,-50%)}
.bg{position:absolute;inset:0;width:100%;height:100%}
.screen{position:absolute;left:27.47%;top:20.44%;width:44.69%;height:47.53%;overflow:hidden;background:#3a6ea5}
.glare{position:absolute;left:27.47%;top:20.44%;width:44.69%;height:47.53%;background:linear-gradient(120deg,rgba(255,255,255,.12),rgba(255,255,255,0) 35%);pointer-events:none;box-shadow:inset 0 0 40px rgba(0,0,0,.35)}
.vig{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,10,9,.65),rgba(11,10,9,0) 20%,rgba(11,10,9,0) 72%,rgba(11,10,9,.85))}

/* the XP desktop inside the screen: drawn at 1024 x 607 and scaled to fit */
.xp{position:absolute;left:0;top:0;width:1024px;height:607px;transform-origin:0 0;background:#3a6ea5;font:11px Tahoma,Verdana,'Segoe UI',sans-serif;color:#000}
.win{position:absolute;left:28px;top:18px;width:968px;height:546px;background:#ece9d8;border:1px solid #0831d9;border-radius:7px 7px 0 0;box-shadow:2px 2px 6px rgba(0,0,0,.4);display:flex;flex-direction:column;overflow:hidden}
.tb{height:28px;background:linear-gradient(180deg,#0a5ae0,#2f7bf4 8%,#0058e6 40%,#0044c6 88%,#003aa5);color:#fff;font:bold 13px Trebuchet MS,Tahoma,sans-serif;display:flex;align-items:center;gap:6px;padding:0 6px;text-shadow:1px 1px #0a1f6d}
.ico{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd36b,#f2a900 55%,#b87800);display:inline-block}
.tbb{margin-left:auto;display:flex;gap:2px}
.tbb i{width:21px;height:21px;border:1px solid #fff;border-radius:3px;background:linear-gradient(#3c8cf7,#1d5fe0);font:bold 12px/18px Tahoma;text-align:center;font-style:normal}
.tbb .x{background:linear-gradient(#e2775a,#c1381d)}
.menu{display:flex;gap:14px;padding:3px 8px;border-bottom:1px solid #c5c2b2}
.tool{display:flex;align-items:center;gap:10px;padding:6px 8px;border-bottom:1px solid #c5c2b2}
.tool button,.addr button{border:1px solid #003c74;border-radius:3px;background:linear-gradient(#fff,#ece9d8);padding:2px 10px;font:11px Tahoma;color:#000}
.addr{display:flex;align-items:center;gap:8px;padding:6px 8px}
.addr input{width:260px;font:11px Tahoma;border:1px solid #7f9db9;padding:2px 4px;background:#fff}
.bal{padding:2px 8px 6px;font-size:12px}
.bal b{font-size:13px}
.tabs{display:flex;gap:2px;padding:0 8px}
.tabs span{border:1px solid #919b9c;border-bottom:0;padding:3px 10px;background:#f4f3ee;border-radius:3px 3px 0 0}
.tabs .on{background:#fff;border-top:2px solid #f2a900}
.list{flex:1;margin:0 8px;background:#fff;border:1px solid #7f9db9;display:flex;flex-direction:column;min-height:0}
.lh,.row{display:grid;grid-template-columns:150px 130px 1fr 80px 90px;gap:0}
.lh span{border-right:1px solid #d6d2c2;border-bottom:1px solid #d6d2c2;background:linear-gradient(#fff,#ebeadb);padding:3px 6px}
.rows{flex:1;overflow:hidden}
.row span{padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid #f1efe6}
.row.new{animation:hl 2.2s ease-out}
@keyframes hl{0%{background:#316ac5;color:#fff}100%{background:#fff}}
.row.orphan{color:#c00;text-decoration:line-through;animation:orph 2.4s forwards}
@keyframes orph{0%{background:#ffd6d6}70%{opacity:1}100%{opacity:0;height:0}}
.row .hdl{color:#555;font-style:italic}
.sb{display:flex;gap:0;margin-top:4px;border-top:1px solid #c5c2b2}
.sb span{flex:1;padding:3px 8px;border-right:1px solid #c5c2b2}
.task{position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(#1f5fd8,#245edb 10%,#1941a5);display:flex;align-items:center;gap:8px;color:#fff}
.start{height:30px;padding:0 18px 0 12px;background:linear-gradient(#3c9b3c,#2f8f2f 50%,#1f7a1f);font:italic bold 15px Trebuchet MS,sans-serif;display:flex;align-items:center;border-radius:0 10px 10px 0;text-transform:lowercase}
.tbtn{background:#3c81f3;border:1px solid #1a4fb8;border-radius:3px;padding:3px 30px 3px 10px;font-size:11px}
.clock{margin-left:auto;height:30px;padding:0 14px;background:#0f8ef2;display:flex;align-items:center;border-left:1px solid #1043a6;font-size:11px}

header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:18px 26px;z-index:3}
.brand{font:700 22px 'Old Standard TT',serif;color:#f6efe0;display:flex;align-items:baseline;gap:12px}
.brand span{font:600 12px 'IBM Plex Mono',monospace;color:var(--gold);letter-spacing:.1em}
.sp{flex:1}
.pill{display:flex;align-items:center;gap:8px;background:rgba(11,10,9,.7);border:1px solid rgba(255,255,255,.18);color:#f6efe0;padding:8px 12px;font:600 12px Inter;border-radius:6px}
.pill:hover{border-color:var(--gold)}
.ca code{font:500 12px 'IBM Plex Mono',monospace;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca b{color:var(--gold)}
.hud{position:absolute;left:3.5vw;bottom:5vh;z-index:3;color:#f6efe0;background:rgba(11,10,9,.72);border:1px solid rgba(255,255,255,.14);padding:16px 18px;border-radius:10px;backdrop-filter:blur(8px);width:min(420px,90vw)}
.hl{font:600 11px 'IBM Plex Mono';letter-spacing:.2em;color:var(--gold)}
.num b{font:700 40px/1.1 'IBM Plex Mono',monospace}
.num span{font:500 14px 'IBM Plex Mono';color:#b5ab9b;margin-left:6px}
.bar{height:6px;background:rgba(255,255,255,.12);border-radius:4px;margin:8px 0;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .8s}
.hrow{display:flex;gap:16px;font:500 12px 'IBM Plex Mono';color:#b5ab9b}
.hrow b{color:#fff}
.flash{position:absolute;right:4vw;bottom:6vh;z-index:4;font:700 clamp(28px,4vw,54px) 'Old Standard TT',serif;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.8);opacity:0;transition:opacity .4s;pointer-events:none;text-align:right;white-space:nowrap}
.flash.on{opacity:1}.flash small{display:block;font:600 13px 'IBM Plex Mono';letter-spacing:.2em;color:var(--gold)}

.times{background:var(--paper);padding:60px 5vw 70px;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:4px 4px}
.mast{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;border-bottom:4px double var(--ink);padding-bottom:10px;font:italic 400 14px 'Old Standard TT',serif;color:var(--mute)}
.mast span:last-child{text-align:right}
.mast h2{font:700 clamp(40px,6vw,82px)/1 'Old Standard TT',serif;color:var(--ink);font-style:normal}
.lead{text-align:center;padding:28px 0;border-bottom:1px solid var(--line)}
.kick{font:600 11px 'IBM Plex Mono';letter-spacing:.2em;color:var(--mute)}
.lead h3{font:700 clamp(28px,4vw,52px)/1.1 'Old Standard TT',serif;margin:10px auto;max-width:900px}
.lead p{font:italic 400 17px 'Old Standard TT',serif;color:var(--mute);max-width:680px;margin:0 auto}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.clip{padding:18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.clip:nth-child(3n){border-right:0}
.clip .kick{display:flex;justify-content:space-between}
.clip h4{font:700 21px/1.2 'Old Standard TT',serif;margin-top:6px}
.clip.orph h4{text-decoration:line-through;color:#a11}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#2a2620}
.hc{background:#14120f;color:#efe6d4;padding:34px 30px}
.hc h4{font:700 26px 'Old Standard TT',serif;margin-bottom:8px}
.hc p{color:#b5ab9b;font-size:15px}
footer{display:flex;justify-content:space-between;gap:20px;padding:22px 5vw 40px;color:#8b8274;font-size:12px;background:#0b0a09}
@media(max-width:900px){
  .hero{height:auto;min-height:0;padding-bottom:20px}
  .stage{position:relative;left:auto;top:auto;transform:none;width:180vw;margin-left:-40vw}
  .vig{display:none}
  .hud{position:relative;left:auto;bottom:auto;margin:0 auto}
  header{padding:12px}.ca code{max-width:90px}.brand{font-size:17px}
  .flash{position:relative;right:auto;bottom:auto;text-align:center;font-size:22px;margin:10px 0;opacity:1;min-height:30px}
  .cols,.how{grid-template-columns:1fr}.clip{border-right:0}
  .mast{grid-template-columns:1fr}.mast span:last-child{text-align:left}
  footer{flex-direction:column}
}