:root{
  --page-bg:#000;
  --teal:#008080; --gray:#c0c0c0; --dk:#808080; --lt:#dfdfdf; --navy:#000080;
  --wall:#008080;
  --ui:"MS Sans Serif","Microsoft Sans Serif",Tahoma,Geneva,Verdana,sans-serif;
  --dos:"VT323","Courier New",Courier,monospace;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--page-bg:#000}}
:root[data-theme="dark"]{--page-bg:#000}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;background:var(--page-bg);color:#000;font:13px/1.35 var(--ui);overflow:hidden;-webkit-tap-highlight-color:transparent}
body.wait, body.wait *{cursor:wait !important}
button{font:inherit;color:inherit}
#screen{position:relative;width:100%;height:100%;overflow:hidden;background:#000}
.stage{position:absolute;inset:0;display:none}
.stage.on{display:block}

/* CRT */
#crt-overlay{position:absolute;inset:0;pointer-events:none;z-index:9999;display:none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0, rgba(0,0,0,.16) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.45) 100%);
  animation:flicker 5s infinite steps(1)}
#screen.crt #crt-overlay{display:block}
@keyframes flicker{0%,100%{opacity:1}47%{opacity:.93}48%{opacity:1}}
#screen.poweron .stage.on{animation:poweron .55s ease-out}
@keyframes poweron{0%{transform:scale(1,.004);filter:brightness(6)}45%{transform:scale(1,.004);filter:brightness(6)}100%{transform:scale(1,1);filter:brightness(1)}}
#screen.poweroff .stage.on{animation:poweroff .45s ease-in forwards}
@keyframes poweroff{0%{transform:scale(1,1)}60%{transform:scale(1,.004);filter:brightness(5)}100%{transform:scale(0,.004);filter:brightness(5)}}

/* bevels */
.raised{background:var(--gray);border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--lt)}
.sunken{border:2px solid;border-color:var(--dk) #fff #fff var(--dk);box-shadow:inset 1px 1px #000,inset -1px -1px var(--lt)}
.btn{background:var(--gray);border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--lt);padding:4px 14px;min-width:76px;cursor:pointer}
.btn:active,.btn.down{border-color:#000 #fff #fff #000;box-shadow:inset 1px 1px var(--dk);padding:5px 13px 3px 15px}
.btn:disabled{color:var(--dk);text-shadow:1px 1px #fff;cursor:default}
.btn:focus-visible,.icon:focus-visible,.mi:focus-visible,.task:focus-visible{outline:1px dotted #000;outline-offset:-5px}
input[type=text],input[type=password],textarea,select{font:inherit;background:#fff;border:2px solid;border-color:var(--dk) #fff #fff var(--dk);box-shadow:inset 1px 1px #000;padding:2px 4px;border-radius:0}

/* power screen */
#st-power{background:#000;color:#ffb000;display:none;text-align:center;padding:24px;overflow-y:auto}
#st-power.on{display:flex}
.power-box{max-width:44rem;margin:auto}
.power-box h1{font:400 clamp(2.4rem,7vw,4.2rem)/1 var(--dos);margin:0 0 .6rem;text-shadow:0 0 12px rgba(255,176,0,.55)}
.power-box p{font:1.35rem/1.25 var(--dos);color:#c98a00;margin:0 auto 2rem;max-width:30rem}
.pwr{display:inline-flex;align-items:center;gap:14px;background:#d8d0b8;color:#3a3326;border:3px solid;border-color:#f3edda #6e6650 #6e6650 #f3edda;padding:14px 28px;font:1.6rem var(--dos);cursor:pointer;box-shadow:0 0 0 3px #000,0 0 0 5px #6e6650}
.pwr:active{border-color:#6e6650 #f3edda #f3edda #6e6650}
.pwr:focus-visible{outline:2px dashed #ffb000;outline-offset:8px}
.pwr .led{width:12px;height:12px;background:#3d5c2a;border:1px solid #1d2c14}
.pwr:hover .led{background:#63d23b;box-shadow:0 0 8px #63d23b}
.power-box small{display:block;margin-top:2.2rem;font:1.1rem var(--dos);color:#7a5a10}

/* bios / dos */
#st-bios{background:#000;color:#aaa;padding:18px 20px;overflow:hidden}
#bios{margin:0;font:clamp(1.1rem,2.6vw,1.45rem)/1.15 var(--dos);white-space:pre-wrap}
#bios .w{color:#fff}
#bios .cur{display:inline-block;width:.6em;height:1em;background:#aaa;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* splash */
#st-splash{background:#fff;display:none;place-items:center}
#st-splash.on{display:grid}
.splash{text-align:center;padding:20px}
.splash svg{width:min(240px,60vw);height:auto;image-rendering:pixelated}
.splash .name{font:italic 700 clamp(2.6rem,9vw,4.4rem)/1 Georgia,"Times New Roman",serif;color:var(--navy);letter-spacing:-1px;margin:.3rem 0 0}
.splash .ver{font:700 1rem var(--ui);color:#800000;margin:.4rem 0 1.4rem}
.splash .copy{font-size:12px;color:#444}

/* desktop */
#st-desk{background:var(--wall)}
#st-desk.weave{background-color:#008080;background-image:linear-gradient(45deg,#006a6a 25%,transparent 25%,transparent 75%,#006a6a 75%),linear-gradient(45deg,#006a6a 25%,transparent 25%,transparent 75%,#006a6a 75%);background-size:8px 8px;background-position:0 0,4px 4px}
#layer{position:absolute;inset:0 0 34px 0;overflow:hidden}
#tasks{position:absolute;left:0;right:0;bottom:0;height:34px;display:flex;align-items:center;gap:4px;padding:2px 4px;z-index:5000;border-width:2px 0 0;border-style:solid;border-color:#fff;box-shadow:none}
#tasks .off{min-width:0;padding:3px 8px;font-weight:700;display:flex;gap:6px;align-items:center}
#tasks .off svg{width:16px;height:16px}
#tasklist{flex:1;display:flex;gap:3px;overflow-x:auto;min-width:0}
.task{flex:0 1 150px;min-width:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:3px 6px;display:flex;align-items:center;gap:5px}
.task svg{width:16px;height:16px;flex:none}
.task span{overflow:hidden;text-overflow:ellipsis}
.task.active{font-weight:700;border-color:#000 #fff #fff #000;box-shadow:inset 1px 1px var(--dk);background:repeating-conic-gradient(#c0c0c0 0 25%,#fff 0 50%) 0 0/2px 2px}
#clock{padding:3px 10px;white-space:nowrap}

/* windows */
.win{position:absolute;display:flex;flex-direction:column;background:var(--gray);border:2px solid;border-color:var(--lt) #000 #000 var(--lt);box-shadow:inset -1px -1px var(--dk),inset 1px 1px #fff;padding:3px;min-width:180px;min-height:90px}
.win.min{display:none}
.tb{display:flex;align-items:center;gap:3px;background:var(--dk);color:var(--lt);padding:2px 2px 2px 3px;font-weight:700;user-select:none;-webkit-user-select:none;touch-action:none;flex:none}
.win.active .tb{background:linear-gradient(90deg,var(--navy),#1084d0);color:#fff}
.tb .ico svg{width:16px;height:16px;display:block}
.tb .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px}
.tbb{width:20px;height:18px;padding:0;background:var(--gray);color:#000;border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px var(--dk);font:700 11px/1 var(--ui);display:grid;place-items:center;cursor:pointer;flex:none}
.tbb:active{border-color:#000 #fff #fff #000}
.tbb.x{margin-left:2px}
.menubar{display:flex;flex-wrap:wrap;gap:0;padding:1px 0 2px;flex:none}
.mi{background:none;border:0;padding:2px 8px;cursor:pointer}
.mi:hover,.mi.open{background:var(--navy);color:#fff}
.win .body{flex:1;min-height:0;overflow:auto;position:relative;margin-top:2px}
.grip{position:absolute;right:1px;bottom:1px;width:14px;height:14px;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 45%,var(--dk) 45%,var(--dk) 52%,#fff 52%,#fff 60%,transparent 60%,transparent 68%,var(--dk) 68%,var(--dk) 75%,#fff 75%,#fff 83%,transparent 83%)}
.menu{position:absolute;z-index:8000;min-width:170px;padding:2px;display:flex;flex-direction:column}
.menu button{background:none;border:0;text-align:left;padding:4px 22px;cursor:pointer;white-space:nowrap}
.menu button:hover,.menu button:focus-visible{background:var(--navy);color:#fff;outline:none}
.menu button:disabled{color:var(--dk);background:none}
.menu hr{border:0;border-top:1px solid var(--dk);border-bottom:1px solid #fff;margin:3px 2px;width:auto}

/* program manager */
.pm{background:#fff;height:100%;padding:12px 8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));align-content:start;gap:14px 4px}
.icon{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 2px;cursor:pointer;text-align:center}
.icon svg{width:34px;height:34px;image-rendering:pixelated}
.icon span{padding:1px 3px;font-size:12px;line-height:1.2}
.icon.sel span{background:var(--navy);color:#fff}

/* dialogs */
.dlg{padding:14px 16px 12px;display:flex;flex-direction:column;gap:14px}
.dlg .row{display:flex;gap:14px;align-items:flex-start}
.dlg .row svg{width:32px;height:32px;flex:none}
.dlg .msg{white-space:pre-line;line-height:1.45}
.dlg .btns{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}

/* dial-up */
.dial{padding:12px;display:flex;flex-direction:column;gap:10px}
.dial .art{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;padding:10px}
.dial .art svg{width:48px;height:48px}
.dial .dots{display:flex;gap:6px}
.dial .dots i{width:8px;height:8px;background:var(--dk);display:block}
.dial.busy .dots i{animation:dot 1s infinite steps(1)}
.dial.busy .dots i:nth-child(2){animation-delay:.25s}.dial.busy .dots i:nth-child(3){animation-delay:.5s}.dial.busy .dots i:nth-child(4){animation-delay:.75s}
.dial.live .dots i{background:#00a000}
@keyframes dot{0%{background:#000}50%{background:var(--dk)}}
.dial .grid{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center}
.dial .grid input,.dial .grid select{width:100%}
.dial .status{min-height:2.8em;padding:6px 8px;background:#fff}
.dial .btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* browser */
.nv{display:flex;flex-direction:column;height:100%}
.nv .bar{display:flex;gap:4px;align-items:center;padding:2px 0 4px;flex-wrap:wrap}
.nv .bar .btn{min-width:0;padding:3px 9px}
.nv .loc{display:flex;gap:6px;align-items:center;padding-bottom:4px}
.nv .loc input{flex:1;min-width:0;font-family:"Courier New",monospace;font-size:12px}
.nv .throb{width:34px;height:34px;flex:none;margin-left:auto;background:#000;display:grid;place-items:center;border:2px solid;border-color:var(--dk) #fff #fff var(--dk)}
.nv .throb svg{width:26px;height:26px}
.nv.loading .throb .spin{animation:spin 1.2s linear infinite;transform-origin:13px 13px}
@keyframes spin{to{transform:rotate(360deg)}}
.nv .page{flex:1;min-height:0;overflow:auto;background:#c0c0c0}
.nv .status{display:flex;gap:6px;align-items:center;padding-top:3px;font-size:12px}
.nv .status .txt{flex:1;padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv .status .pb{width:110px;height:16px;padding:1px;flex:none}
.pb .fill{height:100%;background:repeating-linear-gradient(90deg,var(--navy) 0 8px,transparent 8px 10px);width:0}

/* web pages (old-school) */
.web{font:16px/1.35 "Times New Roman",Times,serif;padding:10px 14px 30px;color:#000;min-height:100%}
.web h1{font-size:2em;margin:.3em 0}
.web h2{font-size:1.4em;margin:.8em 0 .3em}
.web a{color:#0000ee;text-decoration:underline;cursor:pointer}
.web a.v{color:#551a8b}
.web hr{border:0;border-top:2px groove #fff;margin:1em 0}
.web .img{max-width:100%;height:auto;display:block}
.web .img.loading{animation:reveal 3s steps(12) forwards}
@keyframes reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.web .blk{display:none}.web .blk.on{display:block}
.web .blinky{animation:blink 1s steps(1) infinite}
.web .counter{display:inline-block;background:#000;color:#0f0;font:20px var(--dos);padding:0 6px;letter-spacing:3px;border:2px inset #888}
.web .mq{overflow:hidden;white-space:nowrap;background:#ff0;border:2px solid #000}
.web .mq span{display:inline-block;padding-left:100%;animation:mq 14s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}
.web table{border-collapse:separate}
.web td{vertical-align:top}
.kev{background:radial-gradient(#fff 1px,transparent 1.5px) 0 0/37px 41px,radial-gradient(#aaf 1px,transparent 1.5px) 17px 23px/53px 47px,#000;color:#fff;font-family:"Comic Sans MS","Comic Neue","Chalkboard SE",cursive}
.kev a{color:#0ff}.kev a.v{color:#f0f}
.kev h1{text-align:center;font-size:2.2em;background:linear-gradient(90deg,red,orange,yellow,lime,cyan,#66f,magenta);-webkit-background-clip:text;background-clip:text;color:transparent}
.kev .center{text-align:center}
.kev .flame{height:10px;background:repeating-linear-gradient(90deg,#f00 0 6px,#f80 6px 12px,#ff0 12px 18px)}
.gb-entry{border:2px ridge #888;padding:6px 10px;margin:8px 0;background:#ffffcc}
.gb-entry b{color:#800000}
.gb-form{display:grid;gap:6px;max-width:26rem;background:#ddd;padding:10px;border:2px outset #fff}
.gb-form input,.gb-form textarea{font:14px "Times New Roman",serif}
.news{background:#fff}
.news .mast{background:var(--navy);color:#fff;padding:8px 12px;font:700 28px Georgia,serif}
.news td{padding:6px 10px}
.dir td{padding:4px 18px 4px 0}

/* notepad */
.np{display:flex;flex-direction:column;height:100%}
.np textarea{flex:1;width:100%;resize:none;font:14px/1.35 "Courier New",Courier,monospace;border-radius:0}

/* mines */
.mines{padding:6px;display:inline-flex;flex-direction:column;gap:6px;border:3px solid;border-color:#fff var(--dk) var(--dk) #fff}
.mhead{display:flex;justify-content:space-between;align-items:center;padding:4px 5px;border:2px solid;border-color:var(--dk) #fff #fff var(--dk)}
.mled{background:#000;color:#f00;font:26px/1 var(--dos);padding:0 3px;min-width:44px;text-align:right;letter-spacing:1px}
.face{width:30px;height:30px;padding:0;display:grid;place-items:center;background:var(--gray);border:2px solid;border-color:#fff var(--dk) var(--dk) #fff;cursor:pointer}
.face:active{border-color:var(--dk) #fff #fff var(--dk)}
.face svg{width:22px;height:22px}
.mgrid{display:grid;border:3px solid;border-color:var(--dk) #fff #fff var(--dk);user-select:none;-webkit-user-select:none;touch-action:manipulation}
.mc{width:24px;height:24px;padding:0;background:var(--gray);border:3px solid;border-color:#fff var(--dk) var(--dk) #fff;font:700 15px/1 var(--ui);display:grid;place-items:center;cursor:pointer}
.mc.open{border:1px solid var(--dk);border-width:0 1px 1px 0;cursor:default}
.mc.boom{background:#f00}
.mc svg{width:16px;height:16px}
.n1{color:#0000ff}.n2{color:#008000}.n3{color:#ff0000}.n4{color:#000080}.n5{color:#800000}.n6{color:#008080}.n7{color:#000}.n8{color:#808080}
.fm{display:flex;gap:6px;align-items:center;font-size:12px}

/* worm */
.worm{padding:8px;display:flex;flex-direction:column;gap:8px;align-items:center}
.worm canvas{width:100%;max-width:480px;image-rendering:pixelated;background:#0000a8;border:2px solid;border-color:var(--dk) #fff #fff var(--dk);touch-action:none}
.worm .hud{display:flex;gap:10px;align-items:center;width:100%;max-width:480px;justify-content:space-between}
.pad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,36px);gap:3px}
.pad .btn{min-width:0;padding:0}
.pad [data-d=up]{grid-column:2}
.pad [data-d=left]{grid-column:1;grid-row:2}.pad [data-d=down]{grid-column:2;grid-row:2}.pad [data-d=right]{grid-column:3;grid-row:2}

/* paint */
.paint{display:flex;flex-direction:column;height:100%;gap:4px}
.paint .main{flex:1;min-height:0;display:flex;gap:4px}
.paint .tools{display:grid;grid-template-columns:repeat(2,30px);gap:2px;align-content:start}
.paint .tools .btn{min-width:0;padding:0;width:30px;height:30px;display:grid;place-items:center}
.paint .tools svg{width:18px;height:18px}
.paint .well{flex:1;min-width:0;overflow:auto;background:var(--dk);padding:4px}
.paint canvas{background:#fff;display:block;max-width:100%;touch-action:none;cursor:crosshair}
.paint .pal{display:flex;gap:6px;align-items:center}
.paint .cur{width:30px;height:30px;border:2px solid;border-color:var(--dk) #fff #fff var(--dk)}
.paint .sw{display:grid;grid-template-columns:repeat(8,18px);gap:1px}
.paint .sw button{width:18px;height:16px;padding:0;border:1px solid;border-color:var(--dk) #fff #fff var(--dk);cursor:pointer}

/* settings */
.cp{padding:12px;display:flex;flex-direction:column;gap:12px}
.cp fieldset{border:2px groove #fff;padding:8px 10px;display:flex;flex-direction:column;gap:8px}
.cp legend{padding:0 4px}
.cp .sws{display:flex;gap:6px;flex-wrap:wrap}
.cp .sws button{width:54px;height:36px;border:2px solid;border-color:#fff #000 #000 #fff;cursor:pointer;padding:0}
.cp .sws button[aria-pressed=true]{outline:2px solid #000;outline-offset:2px}

/* download */
.dl{padding:12px;display:flex;flex-direction:column;gap:10px}
.dl .fly{display:flex;align-items:center;justify-content:space-between;height:44px;position:relative;padding:0 6px}
.dl .fly svg.f{width:34px;height:34px}
.dl .fly .paper{position:absolute;left:44px;top:8px;width:14px;height:18px;background:#fff;border:1px solid #000;animation:fly 1.3s linear infinite}
@keyframes fly{0%{transform:translate(0,4px)}50%{transform:translate(calc(var(--span,160px)/2),-6px)}100%{transform:translate(var(--span,160px),4px)}}
.dl .pb{height:20px;padding:2px}
.dl .btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* screensaver */
#saver{position:absolute;inset:0;width:100%;height:100%;z-index:9000;display:none;background:#000;cursor:none}

/* shutdown */
#st-bye{background:#000;color:#ff8c00;display:none;place-items:center;text-align:center;padding:20px}
#st-bye.on{display:grid}
#st-bye .quit{font:clamp(1.6rem,5vw,2.6rem)/1.2 var(--dos)}
#st-bye .btn{margin-top:2rem;color:#000}
#st-bye.shutting{background:var(--wall);color:#fff}

#skip{position:absolute;right:12px;bottom:12px;z-index:9500;display:none;background:none;border:1px solid #555;color:#888;font:1rem var(--dos);padding:4px 10px;cursor:pointer}
#skip.on{display:block}
#skip:focus-visible{outline:1px dashed #aaa}

@media (prefers-reduced-motion: reduce){
  #crt-overlay{animation:none}
  .web .mq span{animation:none;padding-left:0}
  #screen.poweron .stage.on,#screen.poweroff .stage.on{animation-duration:.01s}
}

/* ================================================================
   ERAS: picker, time machine, Start-menu shell, per-year looks
   ================================================================ */

/* era picker on the power screen */
.eras{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 auto 1.8rem}
.era-card{background:#111;color:#c98a00;border:2px solid #4a3508;padding:10px 14px;min-width:9.5rem;text-align:left;cursor:pointer;font:1.15rem/1.15 var(--dos)}
.era-card b{display:block;font:400 2rem/1 var(--dos);color:#ffb000}
.era-card small{display:block;color:#8a6a20;font-size:1rem;margin-top:3px}
.era-card[aria-pressed=true]{border-color:#ffb000;background:#2a1d00;box-shadow:0 0 12px rgba(255,176,0,.35)}
.era-card:focus-visible{outline:2px dashed #ffb000;outline-offset:3px}
@media (max-width:560px){.eras{flex-wrap:nowrap;gap:6px}.era-card{min-width:0;flex:1 1 0;padding:6px 8px;font-size:.95rem}.era-card b{font-size:1.55rem}.era-card small{font-size:.85rem}.power-box p{margin-bottom:1.2rem}}

/* time machine: floating during boot, in the taskbar on the desktop */
#tw-float{position:absolute;top:10px;right:12px;z-index:9600;display:none;background:rgba(0,0,0,.6);border:1px solid #555;color:#aaa;font:1rem var(--dos);padding:4px 10px;cursor:pointer}
#tw-float.on{display:block}
#tw-float:focus-visible{outline:1px dashed #aaa}
.twb{display:flex;align-items:center;gap:5px;min-width:0;padding:3px 8px;white-space:nowrap}
.twb svg{width:14px;height:14px;flex:none}
#tw-panel{position:absolute;z-index:9700;display:none;flex-direction:column;padding:3px;min-width:250px;max-width:300px;color:#000;font:13px/1.35 var(--ui)}
#tw-panel.on{display:flex}
#tw-panel h3{margin:0;padding:3px 6px;font-size:12px;background:var(--navy);color:#fff}
#tw-panel p{margin:6px 6px 4px;font-size:12px}
#tw-panel button.era{display:grid;grid-template-columns:48px 1fr;gap:0 8px;align-items:center;background:none;border:0;text-align:left;padding:5px 8px;cursor:pointer}
#tw-panel button.era b{font:400 22px/1 var(--dos);grid-row:span 2}
#tw-panel button.era span{font-weight:700}
#tw-panel button.era small{color:#444}
#tw-panel button.era:hover,#tw-panel button.era:focus-visible{background:var(--navy);color:#fff;outline:none}
#tw-panel button.era:hover small,#tw-panel button.era:focus-visible small{color:#dde}
#tw-panel button.era[aria-current=true]{background:#dcdcdc}
#tw-panel button.era[aria-current=true]:hover{background:var(--navy)}

/* Start-menu shell (1995, 2000) */
#deskicons{position:absolute;inset:0;padding:8px 4px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,82px);grid-auto-columns:86px;gap:2px 6px;align-content:start;justify-content:start;z-index:1}
#deskicons .icon span{color:#fff;font-size:11px}
#deskicons .icon.sel span{background:var(--navy);outline:1px dotted #ff0}
#deskicons .icon svg{width:32px;height:32px}
.startb{display:flex;align-items:center;gap:4px;min-width:0;padding:3px 6px;font-weight:700}
.startb svg{width:18px;height:16px}
.startb.down{border-color:#000 #fff #fff #000;box-shadow:inset 1px 1px var(--dk)}
#startmenu{position:absolute;left:2px;bottom:34px;z-index:8500;display:none;padding:2px;min-width:210px}
#startmenu.on{display:flex}
#startmenu .side{width:24px;background:linear-gradient(0deg,var(--navy),#1084d0);color:#c0c0c0;writing-mode:vertical-rl;transform:rotate(180deg);font:700 17px/24px Arial,sans-serif;padding:8px 0;white-space:nowrap;text-align:left}
#startmenu .side b{color:#fff}
#startmenu .items{display:flex;flex-direction:column;flex:1;min-width:0}
#startmenu .items button{display:flex;align-items:center;gap:10px;background:none;border:0;text-align:left;padding:4px 18px 4px 6px;cursor:pointer;white-space:nowrap}
#startmenu .items button svg{width:24px;height:24px;flex:none}
#startmenu .items button:hover,#startmenu .items button:focus-visible{background:var(--navy);color:#fff;outline:none}
#startmenu hr{border:0;border-top:1px solid var(--dk);border-bottom:1px solid #fff;margin:3px 2px;width:auto}
.ql{display:flex;gap:1px;padding:0 4px;border-left:1px solid var(--dk);border-right:1px solid #fff;margin-right:2px}
.ql button{background:none;border:1px solid transparent;padding:2px;cursor:pointer;display:grid;place-items:center}
.ql button:hover{border-color:#fff var(--dk) var(--dk) #fff}
.ql svg{width:18px;height:18px}
#tray{display:flex;align-items:center;gap:6px;padding:2px 8px;white-space:nowrap;min-height:24px}
#tray svg{width:16px;height:16px;flex:none}
#tray #clock{padding:0;border:0;box-shadow:none}
#tray .neticon{display:none}
#tray .neticon.on{display:block}

/* ---- 1990: Windows 3.0-style solid, centered title bars ---- */
.era-1990 .win.active .tb{background:var(--navy)}
.era-1990 .tb .t{text-align:center}

/* ---- 1995 ---- */
.era-1995 .win.active .tb{background:var(--navy)}
.era-1995 .tb{font-size:12px}
.era-1995 .tbb{width:18px;height:16px;font-size:10px}
.era-1995 #st-desk{background:#008080}

/* ---- 2000 ---- */
.era-2000{--ui:Tahoma,"Segoe UI",Verdana,Geneva,sans-serif;--navy:#0a246a}
.era-2000{font-family:var(--ui);font-size:12px}
.era-2000 .win.active .tb{background:linear-gradient(90deg,#0a246a,#a6caf0)}
.era-2000 .tb{background:linear-gradient(90deg,#808080,#c0c0c0)}
.era-2000 .tbb{width:18px;height:16px;font-size:10px}
.era-2000 #startmenu .side{background:linear-gradient(0deg,#0a246a,#a6caf0);color:#fff}

/* splash screens */
.splash95{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(#3a7bd5,#8ec5fc 70%,#cfe6ff);overflow:hidden}
.splash95 .cl{position:absolute;background:#fff;border-radius:50%;filter:blur(6px);opacity:.85}
.splash95 .mid{position:relative;text-align:center;color:#fff;text-shadow:2px 2px 0 #1a3a80}
.splash95 .mid svg{width:min(200px,50vw);height:auto}
.splash95 .mid .name{font:italic 700 clamp(2.8rem,9vw,4.8rem)/1 Georgia,"Times New Roman",serif;margin:.2rem 0 0}
.splash95 .mid .name sup{font-size:.5em;color:#ffe066}
.splash95 .bar{position:absolute;left:0;right:0;bottom:0;height:14px;background:linear-gradient(90deg,#000080,#1084d0,#8ec5fc,#1084d0,#000080) 0 0/50% 100%;animation:barslide 1.4s linear infinite}
@keyframes barslide{to{background-position:100% 0}}
.splash00{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at 30% 30%,#3a6ea5,#0a246a 70%,#000 100%);color:#fff}
.splash00 .mid{text-align:center}
.splash00 .mid svg{width:min(150px,40vw);height:auto}
.splash00 .name{font:700 clamp(2.4rem,8vw,4rem)/1 Tahoma,Verdana,sans-serif;letter-spacing:-1px;margin:.3rem 0 0}
.splash00 .name span{font-weight:400;color:#a6caf0}
.splash00 .ed{font:1rem Tahoma,Verdana,sans-serif;color:#cde;margin:.3rem 0 1.2rem;letter-spacing:3px;text-transform:uppercase}
.splash00 .pbar{width:min(260px,70vw);height:12px;margin:0 auto;border:1px solid #a6caf0;padding:1px;overflow:hidden}
.splash00 .pbar i{display:block;height:100%;width:30%;background:repeating-linear-gradient(90deg,#a6caf0 0 8px,transparent 8px 10px);animation:pslide 1.6s linear infinite}
@keyframes pslide{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.splash00 .copy{font:11px Tahoma,sans-serif;color:#9ab;margin-top:1.4rem}

/* browser, later years */
.nv .bar .btn.ib{display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 6px;min-width:46px;font-size:11px}
.nv .bar .btn.ib svg{width:20px;height:20px}
.nv .bar .btn.ib:disabled svg{opacity:.4}
.nv .loc .btn{min-width:0;padding:1px 10px}
.nv .links{display:flex;gap:2px;align-items:center;padding-bottom:4px;font-size:11px;flex-wrap:wrap}
.nv .links button{background:none;border:1px solid transparent;padding:1px 6px;cursor:pointer;font-size:11px}
.nv .links button:hover{border-color:#fff var(--dk) var(--dk) #fff}
.era-1995 .nv .throb{background:#000040}
.era-2000 .nv .throb{background:#fff}

/* 1995 web styles */
.w95{background:#fff;font-family:"Times New Roman",Times,serif}
.w95 .portal td{padding:6px 10px}
.w95 .hdr{background:#000066;color:#ffcc00;padding:8px 12px;font:700 26px Arial,sans-serif}
.w95 .hdr small{display:block;color:#fff;font:italic 13px Arial,sans-serif}
.w95 .side{background:#ffffcc;border:1px solid #cc9;padding:8px;font-size:14px}
.w95 .cool{border:3px double #600;background:#fff0f0;padding:8px}
.kev95{background:#000 radial-gradient(#0f0 1px,transparent 1.5px) 0 0/29px 31px;color:#0f0;font-family:"Courier New",monospace}
.kev95 h1{color:#fff;text-shadow:0 0 6px #0f0;text-align:center}
.kev95 a{color:#ff0}.kev95 a.v{color:#f90}
.kev95 .center{text-align:center}
.kev95 .frame{border:3px ridge #0a0;padding:8px 12px;margin:10px 0}
.kev95 .gb-entry{color:#000}
.ring{border:2px outset #888;background:#333;color:#fff;padding:6px;text-align:center;font:13px Arial,sans-serif}

/* 2000 web styles */
.w00{background:#fff;font:13px/1.45 Verdana,Geneva,Arial,sans-serif;padding:0 0 30px}
.w00 a{color:#0033cc}.w00 a.v{color:#663399}
.w00 h1{font:700 22px Arial,sans-serif;margin:.4em 0}
.w00 h2{font:700 15px Arial,sans-serif;margin:.8em 0 .3em;color:#036}
.w00 .top{background:linear-gradient(#ff9d2e,#ff7400);color:#fff;padding:8px 14px;font:700 24px Arial,sans-serif;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.w00 .top small{font:12px Verdana,sans-serif;opacity:.9}
.w00 .nav{background:#036;color:#fff;padding:4px 14px;font-size:11px}
.w00 .nav a{color:#fff;margin-right:12px}
.w00 .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:10px 14px}
.w00 .box{border:1px solid #9ab;background:#f4f8ff}
.w00 .box h3{margin:0;background:#9ab;color:#fff;font:700 12px Verdana,sans-serif;padding:3px 8px}
.w00 .box div{padding:6px 8px}
.w00 .tick{overflow:hidden;white-space:nowrap;background:#000;color:#0f0;font:12px "Courier New",monospace;padding:3px 0}
.w00 .tick span{display:inline-block;padding-left:100%;animation:mq 22s linear infinite}
.w00 .pd{padding:4px 14px}
.w00 .up{color:#080}.w00 .dn{color:#c00}
.w00 .ad{border:1px solid #999;background:#ffc;text-align:center;padding:6px;font:700 13px Arial,sans-serif;color:#c00}
.w00 .srch{text-align:center;padding:30px 14px 10px}
.w00 .srch .logo{font:700 44px Georgia,serif;letter-spacing:-2px;margin:0 0 6px}
.w00 .srch input{width:min(360px,80%);font-size:15px}
.pix{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 8l3 8h8l-6 5 2 8-7-5-7 5 2-8-6-5h8z' fill='%23f0f4ff'/%3E%3C/svg%3E");font:13px/1.45 Verdana,sans-serif;padding:10px 14px 30px}
.pix h1{font:700 30px "Arial Black",Arial,sans-serif;color:#f06;margin:.2em 0}
.pix .intro{background:#000;color:#fff;text-align:center;padding:30px 10px;font:700 20px Arial,sans-serif}
.pix .intro .spin3{display:inline-block;animation:spin 2s linear infinite}
.pix .deal{border:2px dashed #f06;padding:8px;background:#fff0f6}

/* popup ad */
.popad{background:repeating-linear-gradient(45deg,#ff0 0 14px,#f90 14px 28px);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:10px;font:700 15px Arial,sans-serif;color:#c00}
.popad big{font:900 22px "Arial Black",Arial,sans-serif;color:#00c;animation:blink .8s steps(1) infinite}
.popad .btn{color:#000;font:12px var(--ui)}

/* chat room + messenger */
.chat{display:flex;flex-direction:column;height:100%;gap:4px}
.chat .main{flex:1;min-height:0;display:flex;gap:4px}
.chat .log{flex:1;min-width:0;overflow:auto;background:#fff;padding:4px 6px;font:13px/1.4 Arial,sans-serif;word-wrap:break-word}
.chat .log .sys{color:#808080;font-style:italic}
.chat .log b{margin-right:4px}
.chat .people{width:130px;flex:none;overflow:auto;background:#fff;padding:4px;font-size:12px}
.chat .people div{padding:1px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat .people button{display:block;width:100%;text-align:left;background:none;border:0;padding:3px 4px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.chat .people button.sel{background:var(--navy);color:#fff}
.chat .people button.new{font-weight:700;color:#c00}
.chat .people button.sel.new{color:#fff}
.chat .people button i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2c2;margin-right:5px;vertical-align:0}
.chat .people button.away i{background:#fc0}
.chat .people h4{margin:4px 2px 2px;font-size:11px;color:#555}
.chat .typing{font-size:11px;color:#555;min-height:15px;padding:0 2px}
.chat form{display:flex;gap:4px}
.chat form input{flex:1;min-width:0}
.chat form .btn{min-width:0}
@media (max-width:520px){.chat .people{width:96px}}

/* jukebox */
.jb{background:#232323;color:#0f0;height:100%;display:flex;flex-direction:column;gap:6px;padding:8px;font:12px Tahoma,Verdana,sans-serif}
.jb .scr{background:#000;border:2px solid;border-color:#111 #555 #555 #111;display:flex;gap:8px;align-items:center;padding:6px}
.jb .scr canvas{width:120px;height:44px;flex:none;image-rendering:pixelated}
.jb .scr .now{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.jb .scr .now b{display:block;color:#0f0;font:16px var(--dos);overflow:hidden;text-overflow:ellipsis}
.jb .scr .now span{color:#6c6;font:14px var(--dos)}
.jb .ctl{display:flex;gap:4px}
.jb .ctl button{background:#3a3a3a;color:#ddd;border:1px solid;border-color:#666 #111 #111 #666;padding:3px 10px;cursor:pointer;font:12px Tahoma,sans-serif}
.jb .ctl button:active{border-color:#111 #666 #666 #111}
.jb ol{flex:1;min-height:0;overflow:auto;margin:0;padding:4px 4px 4px 28px;background:#000;border:2px solid;border-color:#111 #555 #555 #111;color:#0c0}
.jb li{cursor:pointer;padding:1px 2px}
.jb li.on{color:#fff;background:#0000c6}
.jb li small{color:#6a6}

/* screensaver extras use the same canvas */

/* ---- app platform: toast, start submenu, store, files ---- */
#toast{position:absolute;right:8px;bottom:42px;z-index:8600;background:#ffffe1;color:#000;border:1px solid #000;padding:6px 10px;font-size:12px;box-shadow:2px 2px 0 rgba(0,0,0,.4);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;max-width:280px}
#toast.on{opacity:1;transform:none}
#startmenu .items .arr{margin-left:auto;padding-left:14px;font-weight:400}
#startsub{position:absolute;z-index:8600;padding:2px;display:flex;flex-direction:column;min-width:190px;max-height:calc(100% - 40px);overflow:auto}
#startsub button{display:flex;align-items:center;gap:8px;background:none;border:0;text-align:left;padding:3px 16px 3px 6px;cursor:pointer;white-space:nowrap}
#startsub button svg{width:20px;height:20px;flex:none}
#startsub button:hover,#startsub button:focus-visible{background:var(--navy);color:#fff;outline:none}
.shop{display:flex;flex-direction:column;height:100%;background:#fff}
.shop-hd{display:flex;justify-content:space-between;gap:10px;align-items:center;background:linear-gradient(90deg,var(--navy),#1084d0);color:#fff;padding:8px 10px;flex-wrap:wrap}
.shop-hd b{display:block;font-size:16px}
.shop-hd small{display:block;font-size:11px;opacity:.9}
.shop-wallet{text-align:right;background:rgba(0,0,0,.25);padding:4px 8px}
.shop-wallet b{font:22px var(--dos);color:#ff0}
.shop-wallet small{max-width:200px}
.shop-list{flex:1;overflow:auto;padding:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px;align-content:start}
.shop-item{display:flex;gap:10px;border:1px solid #bbb;padding:8px;background:#f4f4f4}
.shop-item.hi{outline:2px solid #fc0}
.shop-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.shop-txt small{color:#555;font-size:11px}
.shop-txt p{margin:4px 0;font-size:12px;line-height:1.35}
.shop-buy{margin-top:auto;display:flex;align-items:center;gap:8px;justify-content:flex-end}
.shop-buy .price{font:20px var(--dos);color:#060}
.shop-buy .own{color:#060;font-weight:700;font-size:12px}
.shop-later{padding:6px 10px;font-size:11px;color:#444;background:#eee;border-top:1px solid #ccc}
.box3d{width:86px;height:118px;flex:none;background:var(--bx);color:var(--fg);border:1px solid #000;box-shadow:4px 4px 0 rgba(0,0,0,.35),inset -6px 0 0 rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 8px 4px 4px;overflow:hidden}
.box3d .bx-top{font-size:7px;letter-spacing:1px;text-transform:uppercase;opacity:.8}
.box3d .bx-ico svg{width:36px;height:36px;margin:4px 0}
.box3d .bx-title{font:700 12px/1.05 Arial,sans-serif;color:var(--ac)}
.box3d .bx-tag{font-size:8px;line-height:1.1;margin-top:3px;opacity:.9}
.box3d .bx-foot{margin-top:auto;font:10px var(--dos);background:var(--ac);color:#000;padding:0 4px}
@media (max-width:520px){.shop-list{grid-template-columns:1fr}}
.inst-top{display:flex;gap:10px;align-items:center}
.inst-top svg{width:34px;height:34px;flex:none}
.inst-top div{font-size:12px}
.fmg{display:flex;flex-direction:column;height:100%;gap:4px}
.fm-bar{display:flex;gap:6px;align-items:center}
.fm-bar .btn{min-width:0;padding:2px 10px}
.fm-bar span{flex:1;background:#fff;padding:2px 6px;font-family:"Courier New",monospace}
.fm-list{flex:1;overflow:auto;background:#fff;display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));align-content:start;gap:8px 4px;padding:8px}
.fm-empty{grid-column:1/-1;color:#666;margin:6px}
.fm-st{font-size:11px;padding:0 2px}

/* ---- 1985: DOS text mode ---- */
.era-1985{--ui:var(--dos)}
.era-1985 #st-desk{background:#000 !important}
.era-1985 #tasks{display:none}
.era-1985 #layer{bottom:0}
#dos{position:absolute;inset:0;background:#000;color:var(--phos,#33ff66);font:clamp(17px,2.4vw,22px)/1.2 var(--dos);padding:10px 12px 52px;overflow-y:auto;z-index:1;text-shadow:0 0 6px color-mix(in srgb,var(--phos,#33ff66) 55%,transparent)}
#dos .dos-out{white-space:pre-wrap;word-break:break-word}
#dos .dos-line{display:flex;align-items:baseline}
#dos .dos-pr{white-space:pre}
#dos .dos-in{flex:1;min-width:0;background:transparent;border:0;box-shadow:none;padding:0;color:inherit;font:inherit;text-transform:uppercase;caret-color:var(--phos,#33ff66);outline:none;text-shadow:inherit}
#dos .dos-bar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:4px;flex-wrap:wrap;padding:6px;background:#000;border-top:1px solid color-mix(in srgb,var(--phos,#33ff66) 50%,transparent);z-index:2}
#dos .dos-bar button{background:var(--phos,#33ff66);color:#000;border:0;font:clamp(15px,2vw,19px) var(--dos);padding:6px 10px;cursor:pointer;min-height:40px}
#dos .dos-bar button.dos-tm{margin-left:auto;animation:dosglow 2.4s ease-in-out infinite}
#dos .dos-bar button:focus-visible{outline:2px dashed var(--phos,#33ff66);outline-offset:2px}
@keyframes dosglow{50%{box-shadow:0 0 12px var(--phos,#33ff66)}}
.era-1985 .win{background:#000;color:var(--phos,#33ff66);border:2px double var(--phos,#33ff66);box-shadow:none;padding:2px;font-family:var(--dos);font-size:18px}
.era-1985 .win:not(.modal){left:0 !important;top:0 !important;width:100% !important;height:100% !important;border:0;padding:0}
.era-1985 .win .tb,.era-1985 .win.active .tb{background:var(--phos,#33ff66);color:#000;font:18px var(--dos)}
.era-1985 .win .tb .ico{display:none}
.era-1985 .win .tbb{background:#000;color:var(--phos,#33ff66);border:0;box-shadow:none;width:auto;padding:0 6px;font:16px var(--dos)}
.era-1985 .win .tbb[data-a=min],.era-1985 .win .tbb[data-a=max],.era-1985 .win .grip{display:none}
.era-1985 .win .tbb.x{font-size:0;min-width:44px}
.era-1985 .win .tbb.x::before{content:'Esc';font:16px var(--dos)}
.era-1985 .calc .scr{background:#000;color:var(--phos,#33ff66);border:1px solid var(--phos,#33ff66)}
.era-1985 .calc .op{color:inherit}
.era-1985 .menubar{border-bottom:1px solid var(--phos,#33ff66)}
.era-1985 .mi{color:var(--phos,#33ff66);font:17px var(--dos)}
.era-1985 .mi:hover,.era-1985 .mi.open,.era-1985 .menu button:hover{background:var(--phos,#33ff66);color:#000}
.era-1985 .menu{background:#000;color:var(--phos,#33ff66);border:2px double var(--phos,#33ff66);box-shadow:none}
.era-1985 .btn{background:#000;color:var(--phos,#33ff66);border:1px solid var(--phos,#33ff66);box-shadow:none;font:17px var(--dos)}
.era-1985 .btn:hover,.era-1985 .btn:focus-visible{background:var(--phos,#33ff66);color:#000}
.era-1985 .dlg .row svg{display:none}
.era-1985 .np textarea,.era-1985 input[type=text],.era-1985 textarea,.era-1985 select{background:#000;color:var(--phos,#33ff66);border:1px solid var(--phos,#33ff66);box-shadow:none;font:18px var(--dos)}
.era-1985 .shop,.era-1985 .shop-item,.era-1985 .shop-later,.era-1985 .cp fieldset{background:#000;color:var(--phos,#33ff66);border-color:var(--phos,#33ff66)}
.era-1985 .shop-hd{background:var(--phos,#33ff66);color:#000}
.era-1985 .shop-txt small,.era-1985 .shop-later{color:inherit;opacity:.8}
.era-1985 .shop-buy .price,.era-1985 .shop-buy .own,.era-1985 .shop-wallet b{color:inherit}
.era-1985 .sunken{border-color:var(--phos,#33ff66);box-shadow:none}
.era-1985 .pb .fill{background:repeating-linear-gradient(90deg,var(--phos,#33ff66) 0 10px,transparent 10px 12px)}
.dos-menu{padding:10px 14px}
.dos-menu p{margin:0 0 8px}
.dos-menu ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.dos-menu button{display:flex;justify-content:space-between;gap:12px;width:100%;background:transparent;color:inherit;border:0;padding:8px 10px;font:19px var(--dos);cursor:pointer;text-align:left;min-height:44px;align-items:center}
.dos-menu button small{opacity:.7;font-size:15px}
.dos-menu button.on,.dos-menu button:hover,.dos-menu button:focus-visible{background:var(--phos,#33ff66);color:#000;outline:none}

/* ---- the desk view ---- */
#room{position:fixed;inset:0;display:none;overflow:hidden;background:#2a2320;z-index:0}
.in-room #room{display:block}
.in-room #screen{position:fixed;left:0;top:0;width:640px;height:480px;transform-origin:0 0;border-radius:22px/18px;z-index:1;box-shadow:0 0 0 2px #000}
.in-room #screen #crt-overlay{border-radius:inherit}
.in-room #bios{font-size:17px}
.in-room #relight{display:none}
#glare{position:fixed;display:none;z-index:2;pointer-events:none;border-radius:22px/18px;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.14),transparent 45%),radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(0,0,0,.35) 100%);transition:opacity .4s}
.in-room #glare{display:block}
#screen.fadein{animation:scrfade .35s ease-out}
@keyframes scrfade{from{opacity:.2}to{opacity:1}}
#skip,#tw-float{position:fixed}
#tw-panel{position:fixed}
#skip{z-index:9800}#tw-float{z-index:9800}#tw-panel{z-index:9900}
.rm-wall{position:absolute;inset:0}
.rm-desk{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#8a5a33,#6b4424 18px,#5a381d);box-shadow:0 -4px 0 #9c6a3f,0 -6px 14px rgba(0,0,0,.4)}
.rm-rig{position:absolute;width:calc(var(--u,6px)*100);height:calc(var(--u,6px)*78)}
.rm-rig i{position:absolute;display:block;font-style:normal}
.rm-ui{position:absolute;left:0;top:0;right:0;padding:16px;z-index:3;display:flex;justify-content:center}
#room.land .rm-ui{right:auto;bottom:0;width:min(42vw,480px);align-items:center}
.rm-ui .power-box{max-width:30rem;background:rgba(0,0,0,.72);border:1px solid #4a3508;padding:14px 16px 16px;text-align:center;color:#ffb000;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.rm-ui .power-box h1{font:400 clamp(1.7rem,4.2vw,2.8rem)/1 var(--dos);margin:0 0 .5rem;text-shadow:0 0 12px rgba(255,176,0,.55)}
.rm-ui .power-box p{font:clamp(1rem,2.2vw,1.2rem)/1.2 var(--dos);color:#c98a00;margin:0 auto 1rem}
.rm-ui .power-box small{margin-top:1rem}
.rm-ui .eras{margin-bottom:1rem;flex-wrap:wrap}
.rm-ui .era-card{min-width:0;flex:1 1 6.5rem;padding:6px 8px}
.rm-ui .era-card b{font-size:1.6rem}
@media (max-height:560px){.rm-ui .power-box p,.rm-ui .power-box small{display:none}}
#room:not(.land) .rm-ui .power-box p{display:none}
#room:not(.land) .rm-ui{padding:10px}
#room:not(.land) .rm-ui .power-box{padding:10px 12px}
/* walls by year */
#room[data-era="1985"] .rm-wall{background:repeating-linear-gradient(90deg,#6e4a2a 0 38px,#5d3d22 38px 40px,#76502e 40px 78px,#5d3d22 78px 80px)}
#room[data-era="1990"] .rm-wall{background:#d9ccb0 radial-gradient(#c7b894 1.5px,transparent 2px) 0 0/22px 22px}
#room[data-era="1995"] .rm-wall{background:#2f7c80 linear-gradient(135deg,transparent 45%,rgba(255,255,255,.07) 45% 55%,transparent 55%) 0 0/60px 60px}
#room[data-era="2000"] .rm-wall{background:linear-gradient(#b8c7d6,#9fb2c6)}
/* hardware */
.rm-rig .case,.rm-rig .tower,.rm-rig .mon,.rm-rig .kb,.rm-rig .spk{background:linear-gradient(#e6dfca,#cfc6ab);border:1px solid #8c836a;border-radius:calc(var(--u)*.8);box-shadow:inset 0 calc(var(--u)*.3) 0 rgba(255,255,255,.5),0 calc(var(--u)*.8) calc(var(--u)*1.5) rgba(0,0,0,.35)}
#room[data-era="2000"] .rm-rig .tower,#room[data-era="2000"] .rm-rig .mon,#room[data-era="2000"] .rm-rig .kb{background:linear-gradient(#ececec,#cfd3d6);border-color:#8d9398}
.rm-rig .mon{border-radius:calc(var(--u)*2.2)}
.rm-rig .mon.big{border-radius:calc(var(--u)*2.6) calc(var(--u)*2.6) calc(var(--u)*1.6) calc(var(--u)*1.6)}
.rm-rig .glass{background:#101312;border-radius:calc(var(--u)*1.6)/calc(var(--u)*1.3);box-shadow:inset 0 0 calc(var(--u)*1.2) #000,0 0 0 calc(var(--u)*.6) #3d3a33}
#room.on .rm-rig .glass{background:#000}
.rm-rig .brand{left:0;right:0;bottom:calc(var(--u)*1.6);text-align:center;font:700 calc(var(--u)*1.35) Arial,sans-serif;color:#7d765f;letter-spacing:.1em}
.rm-rig .badge{font:700 calc(var(--u)*1.25) Arial,sans-serif;color:#6b6450;letter-spacing:.08em;white-space:nowrap}
.rm-rig .turbo{font:700 calc(var(--u)*1) Arial,sans-serif;color:#6b6450}
.rm-rig .knob{width:calc(var(--u)*2);height:calc(var(--u)*2);border-radius:50%;background:#8c836a}
.rm-rig .dr{height:calc(var(--u)*3.4);width:calc(var(--u)*14);background:#b9b095;border:1px solid #6e664f;border-radius:2px}
.rm-rig .dr.d525::after{content:'';position:absolute;left:20%;right:20%;top:45%;height:14%;background:#2a2720}
.rm-rig .dr.d35{height:calc(var(--u)*2.2);width:calc(var(--u)*10)}
.rm-rig .dr.d35::after{content:'';position:absolute;left:15%;right:30%;top:40%;height:20%;background:#2a2720}
.rm-rig .dr.d35.v{width:calc(var(--u)*7)}
.rm-rig .dr.cd{width:calc(var(--u)*12);height:calc(var(--u)*3.6);background:#c9c1a6}
.rm-rig .dr.cd::after{content:'';position:absolute;right:8%;top:30%;width:10%;height:35%;background:#6e664f;border-radius:1px}
.rm-rig .pbtn{position:absolute;width:calc(var(--u)*4.4);height:calc(var(--u)*3.4);padding:0;border:1px solid #6e664f;border-radius:calc(var(--u)*.6);background:linear-gradient(#d8d0b8,#b3aa8f);cursor:pointer;box-shadow:0 0 0 calc(var(--u)*.4) rgba(255,176,0,.0);animation:pbhint 2.2s ease-in-out infinite}
#room.on .rm-rig .pbtn{animation:none}
.rm-rig .pbtn:focus-visible{outline:2px dashed #ffb000;outline-offset:3px}
@keyframes pbhint{50%{box-shadow:0 0 0 calc(var(--u)*.7) rgba(255,176,0,.55)}}
.rm-rig .led{width:calc(var(--u)*1);height:calc(var(--u)*1);border-radius:50%;background:#2c4a24}
.rm-rig .pbtn .led{left:calc(var(--u)*1.6);top:calc(var(--u)*1.1)}
#room.on .rm-rig .pbtn .led{background:#5f5;box-shadow:0 0 calc(var(--u)*.8) #5f5}
.rm-rig .led.hdd{background:#4a2c10}
#room.busy .rm-rig .led.hdd{animation:hdd .35s steps(2) infinite}
@keyframes hdd{50%{background:#ffa020;box-shadow:0 0 calc(var(--u)*.8) #ffa020}}
.rm-rig .kb{left:16u;top:65u;left:calc(var(--u)*16);top:calc(var(--u)*65);width:calc(var(--u)*62);height:calc(var(--u)*9);background:repeating-linear-gradient(90deg,transparent 0 calc(var(--u)*.35),rgba(0,0,0,.18) calc(var(--u)*.35) calc(var(--u)*.55),transparent calc(var(--u)*.55) calc(var(--u)*3.3)),repeating-linear-gradient(transparent 0 calc(var(--u)*1.7),rgba(0,0,0,.15) calc(var(--u)*1.7) calc(var(--u)*2)),linear-gradient(#e6dfca,#cfc6ab);transform:perspective(calc(var(--u)*40)) rotateX(35deg);transform-origin:bottom}
.rm-rig .mouse{width:calc(var(--u)*5);height:calc(var(--u)*7);border-radius:calc(var(--u)*2.5) calc(var(--u)*2.5) calc(var(--u)*2) calc(var(--u)*2);background:linear-gradient(#e6dfca,#cfc6ab);border:1px solid #8c836a}
.rm-rig .mouse.opt{background:linear-gradient(#f2f2f2,#c9cdd1)}
.rm-rig .stand{width:calc(var(--u)*20);height:calc(var(--u)*7);background:linear-gradient(#d5cdb4,#b8b095);clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}
#room[data-era="2000"] .rm-rig .stand{background:linear-gradient(#e2e5e8,#b9bec3)}
.rm-rig .spk{width:calc(var(--u)*10);height:calc(var(--u)*20);background:linear-gradient(#3b3b3b,#222);border-color:#111}
.rm-rig .spk.tall{height:calc(var(--u)*27);width:calc(var(--u)*9)}
.rm-rig .spk::after{content:'';position:absolute;left:20%;right:20%;top:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(#555 30%,#111 70%)}
.rm-rig .cam{left:calc(50% - var(--u)*2.5);top:calc(var(--u)*-4.5);width:calc(var(--u)*5);height:calc(var(--u)*5);border-radius:50%;background:radial-gradient(#224 25%,#ddd 30%,#bbb)}
@media (prefers-reduced-motion: reduce){.rm-rig .pbtn{animation:none}#room.busy .rm-rig .led.hdd{animation:none;background:#ffa020}}
.rm-ui .eras{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#room:not(.land) .rm-ui .eras{grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:.7rem}
#room:not(.land) .rm-ui .era-card{padding:5px 6px;font-size:.85rem}
#room:not(.land) .rm-ui .era-card b{font-size:1.3rem}
#room:not(.land) .rm-ui .era-card small{display:none}
#room:not(.land) .rm-ui .power-box small{display:none}
#room:not(.land) .rm-ui .power-box h1{font-size:clamp(1.4rem,6.5vw,2rem)}
#room:not(.land) .rm-ui .pwr{padding:8px 20px;font-size:1.3rem}
.cp .ss-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cp .ss-row select{flex:1;min-width:0}
.cp .ss-row input[type=text]{flex:1;min-width:0}
.cp [data-smsg][hidden]{display:none}

/* ---- ad slot on the desk view ---- */
.rm-ad{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px}
.rm-ad[hidden]{display:none}
.rm-ad small{font:9px/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);text-shadow:0 1px 2px #000}
.rm-ad-box{box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:0 10px;overflow:hidden;text-decoration:none;cursor:pointer;color:#000;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.rm-ad-box:focus-visible{outline:2px dashed #ffb000;outline-offset:3px}
/* the house ad: a mid-90s web banner */
.rm-ad-box.ad-house{background:#000080 repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px);border:3px solid;border-color:#dfdfdf #404040 #404040 #dfdfdf;color:#fff;font-family:var(--dos)}
.ad-house .hs-pc{width:52px;height:44px;flex:none;position:relative;background:#c0c0c0;border:2px solid;border-color:#fff #555 #555 #fff}
.ad-house .hs-pc i{position:absolute;left:5px;top:4px;right:5px;bottom:10px;background:#008080;animation:hsglow 1.2s steps(2) infinite}
@keyframes hsglow{50%{background:#00a8a8}}
.ad-house .hs-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.05}
.ad-house .hs-txt b{font-weight:400;font-size:34px;color:#ffff00;letter-spacing:1px;text-shadow:2px 2px 0 #800000}
.ad-house .hs-txt span{font-size:17px;color:#c0ffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-house .hs-blink{animation:blink 1s steps(1) infinite}
.ad-house .hs-btn{flex:none;background:#c0c0c0;color:#000;border:3px solid;border-color:#fff #404040 #404040 #fff;padding:6px 10px;font-size:20px}
.rm-ad-box.ad-house:hover .hs-btn{background:#ffff00}
.rm-ad-box.s468{gap:8px;padding:0 8px}.s468.ad-house .hs-pc{width:38px;height:32px}.s468.ad-house .hs-txt b{font-size:24px}.s468.ad-house .hs-txt span{font-size:13px}.s468.ad-house .hs-btn{font-size:15px;padding:3px 6px}
.rm-ad-box.s320{gap:6px;padding:0 6px}.s320.ad-house .hs-txt b{font-size:20px}.s320.ad-house .hs-txt span{font-size:12px}.s320.ad-house .hs-btn{font-size:14px;padding:2px 6px}
@media (prefers-reduced-motion: reduce){.ad-house .hs-blink,.ad-house .hs-pc i{animation:none}}
@media (max-height:720px){.rm-ui .power-box small{display:none}}

/* ---- startup sponsor screen (inside the monitor) ---- */
#st-sponsor{background:#000;display:none;place-items:center;padding:16px}
#st-sponsor.on{display:grid}
.sp-wrap{width:min(100%,600px);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--dos)}
.sp-wrap > small{color:#aaa;font:16px var(--dos);letter-spacing:2px;text-transform:uppercase}
.sp-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;min-height:300px;text-decoration:none;cursor:pointer;overflow:hidden;position:relative}
.sp-box:focus-visible{outline:2px dashed #ffb000;outline-offset:3px}
.sp-foot{display:flex;gap:8px;align-items:center;width:100%}
.sp-bar{flex:1;height:12px;padding:1px;background:#222}
.sp-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#aaa 0 8px,transparent 8px 10px)}
.sp-skip{min-width:0;padding:3px 12px}
/* house sponsor */
.sp-box.sp-house{background:#000080 repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);border:4px solid;border-color:#dfdfdf #404040 #404040 #dfdfdf;color:#fff;text-align:center;padding:16px}
.sp-house .hsp-top{font-size:22px;color:#c0ffff}
.sp-house .hsp-logo{font-size:64px;line-height:1;color:#ffff00;text-shadow:4px 4px 0 #800000;letter-spacing:2px}
.sp-house .hsp-sub{font-size:22px}
.sp-house .hsp-btn{margin-top:6px;background:#c0c0c0;color:#000;border:3px solid;border-color:#fff #404040 #404040 #fff;padding:6px 14px;font-size:20px;animation:blink 1.2s steps(1) infinite}
@media (prefers-reduced-motion: reduce){.sp-house .hsp-btn{animation:none}}
/* ---- Pop Zero, a made-up soda used as the sample advertiser (js/ads.js) ---- */
.pz-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pz-stars i{position:absolute;width:3px;height:3px;background:#fff;box-shadow:0 0 4px #00e5ff;animation:pztw 1.6s steps(2) infinite}
.pz-stars i:nth-child(4n+1){left:8%;top:18%}.pz-stars i:nth-child(4n+2){left:37%;top:72%;animation-delay:.4s}.pz-stars i:nth-child(4n+3){left:61%;top:24%;animation-delay:.8s}.pz-stars i:nth-child(4n){left:88%;top:66%;animation-delay:1.2s}
.pz-stars i:nth-child(n+5){transform:translate(42px,8px);background:#ffe600}.pz-stars i:nth-child(n+9){transform:translate(-30px,-6px);background:#ff2bd6}
@keyframes pztw{50%{opacity:.15}}
.rm-ad-box.ad-popzero{position:relative;background:#14003a linear-gradient(90deg,#2a0070,#14003a 55%,#003a52);border:3px solid;border-color:#b58cff #3a0f94 #3a0f94 #b58cff;color:#fff;font-family:var(--dos)}
.ad-popzero .pz-can{flex:none;position:relative;image-rendering:pixelated;animation:pzbob 1.4s steps(2) infinite}
@keyframes pzbob{50%{transform:translateY(-3px)}}
.ad-popzero .pz-name{flex:none;display:flex;flex-direction:column;line-height:.9;position:relative}
.ad-popzero .pz-logo{font-weight:400;font-size:44px;letter-spacing:2px;color:#ffe600;text-shadow:3px 3px 0 #ff2bd6,5px 5px 0 #3a0f94;white-space:nowrap}
.ad-popzero .pz-tag{font-weight:400;font-size:18px;color:#00e5ff;white-space:nowrap}
.ad-popzero .pz-line{flex:1;min-width:0;overflow:hidden;text-align:center;font-size:24px;position:relative;white-space:nowrap}
.ad-popzero .pz-line b{font-weight:400;color:#ff2bd6}
.ad-popzero .pz-blink,.sp-popzero .pzs-btn{animation:blink 1.1s steps(1) infinite}
.ad-popzero .pz-btn{flex:none;margin-left:auto;position:relative;background:#ff2bd6;color:#fff;border:3px solid;border-color:#ff9cf0 #7a0060 #7a0060 #ff9cf0;padding:6px 10px;font-size:20px;text-shadow:1px 1px 0 #7a0060}
.rm-ad-box.ad-popzero:hover .pz-btn{background:#ff5ce2}
.s468.ad-popzero .pz-logo{font-size:32px}.s468.ad-popzero .pz-tag{font-size:14px}.s468.ad-popzero .pz-btn{font-size:16px;padding:3px 8px}
.s320.ad-popzero .pz-logo{font-size:24px;text-shadow:2px 2px 0 #ff2bd6}.s320.ad-popzero .pz-tag{font-size:13px}.s320.ad-popzero .pz-btn{font-size:14px;padding:2px 8px}
.sp-box.sp-popzero{background:#14003a radial-gradient(ellipse at 50% 45%,#3d0aa0,#14003a 70%);border:4px solid;border-color:#b58cff #3a0f94 #3a0f94 #b58cff;color:#fff;text-align:center;padding:16px}
.sp-popzero .pzs-top{font-size:22px;color:#00e5ff;position:relative}
.sp-popzero .pzs-mid{display:flex;align-items:center;gap:22px;position:relative}
.sp-popzero .pzs-can{image-rendering:pixelated;animation:pzbob 1.4s steps(2) infinite}
.sp-popzero .pzs-name{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.sp-popzero .pzs-logo{font-weight:400;font-size:84px;line-height:.85;letter-spacing:3px;color:#ffe600;text-shadow:4px 4px 0 #ff2bd6,8px 8px 0 #3a0f94}
.sp-popzero .pzs-tag{font-weight:400;font-size:24px;color:#00e5ff;margin-top:10px}
.sp-popzero .pzs-line{font-size:24px;position:relative}
.sp-popzero .pzs-btn{position:relative;background:#ff2bd6;color:#fff;border:3px solid;border-color:#ff9cf0 #7a0060 #7a0060 #ff9cf0;padding:6px 16px;font-size:22px}
.sp-box.sp-popzero:hover .pzs-btn{background:#ff5ce2}
@media (prefers-reduced-motion: reduce){.pz-stars i,.ad-popzero .pz-can,.ad-popzero .pz-blink,.sp-popzero .pzs-can,.sp-popzero .pzs-btn{animation:none}}


/* ---- Quick Help guide (first visit to each year) ---- */
.qh{display:flex;flex-direction:column;height:100%;background:#fff;color:#000}
.qh-page{flex:1;min-height:0;overflow:auto;padding:10px 14px;line-height:1.45}
.qh-page:focus{outline:none}
.qh-page h3{margin:0 0 6px;font-size:18px;color:#000080}
.qh-page h4{margin:12px 0 4px;font-size:13px;color:#800000;border-bottom:1px solid #c0c0c0}
.qh-page p{margin:4px 0}
.qh-big{font-size:14px}
.qh-page ul{margin:4px 0;padding-left:20px}
.qh-page li{margin:3px 0}
.qh-page code{font:15px var(--dos);background:#eee;padding:0 3px}
.qh-page dl{margin:4px 0}
.qh-page dt{display:flex;align-items:center;gap:6px;margin-top:6px}
.qh-page dt svg{width:20px;height:20px;flex:none}
.qh-page dd{margin:0 0 0 26px;color:#333}
.qh-nav{display:flex;align-items:center;gap:6px;padding:6px 8px;border-top:1px solid #808080;background:var(--gray,#c0c0c0)}
.qh-nav .qh-dots{flex:1;text-align:center}
.qh-nav .btn{min-width:72px}
.era-1985 .qh,.era-1985 .qh-nav{background:#000;color:var(--phos,#33ff66)}
.era-1985 .qh-page h3,.era-1985 .qh-page h4,.era-1985 .qh-page dd{color:var(--phos,#33ff66)}
.era-1985 .qh-page h4{border-color:var(--phos,#33ff66)}
.era-1985 .qh-page code{background:none;text-decoration:underline}
.era-1985 .qh-page dt svg{display:none}
.era-1985 .qh-nav{border-color:var(--phos,#33ff66)}

/* ---- Time Traveler Passport ---- */
.tpass{padding:10px;background:#f4ecd8;min-height:100%;color:#222}
.tpass-hd{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#1a3a8a;color:#f0d890;padding:8px 12px;border:2px solid #d8b84a}
.tpass-hd b{display:block;letter-spacing:2px}.tpass-hd small{color:#fff}
.tpass-n{text-align:right}.tpass-n b{display:inline;font-size:22px}
.tpass-note{margin:8px 2px}
.tpass-years{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:560px){.tpass-years{grid-template-columns:repeat(2,1fr)}}
.tpass-year h4{margin:0 0 4px;text-align:center;border-bottom:1px dashed #a08040}
.tpass-stamp{min-height:92px;margin:6px 0;padding:8px 6px;border:2px dashed #bbb;border-radius:50%/18%;text-align:center;color:#888;display:flex;flex-direction:column;justify-content:center;gap:2px;font-size:11px}
.tpass-stamp b{font-size:18px}
.tpass-stamp.on{border:3px double #b02020;color:#b02020;transform:rotate(var(--r,0deg));background:rgba(176,32,32,.05)}
.tpass-stamp.on span{font-weight:700}
.era-1985 .tpass,.era-1985 .tpass-hd{background:#000;color:var(--phos,#33ff66);border-color:var(--phos,#33ff66)}
.era-1985 .tpass-hd small{color:var(--phos,#33ff66)}
.era-1985 .tpass-stamp,.era-1985 .tpass-stamp.on{color:var(--phos,#33ff66);border-color:var(--phos,#33ff66);background:none;border-radius:0}

/* ---- Time Capsule ---- */
.tc{padding:8px;display:flex;flex-direction:column;gap:8px}
.tc fieldset{margin:0}
.tc p{margin:4px 0}
.tc textarea{width:100%;box-sizing:border-box;font:inherit}
.tc-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;flex-wrap:wrap}
.tc ul{margin:4px 0;padding-left:18px}
.tc-note{border-top:1px dotted #808080;padding:4px 0}
.tc-note p{white-space:pre-wrap}
.era-1985 .tc textarea,.era-1985 .tc select{background:#000;color:var(--phos,#33ff66);border:1px solid var(--phos,#33ff66)}

/* ---- 2000: New Year's countdown party ---- */
.y2k{position:absolute;inset:0;z-index:9000;background:#000014;color:#fff;display:grid;place-items:center;text-align:center}
.y2k canvas{position:absolute;inset:0;width:100%;height:100%}
.y2k-txt{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px;font-family:var(--ui)}
.y2k-txt small{color:#9cf;font-size:16px}
.y2k-txt b{font:700 clamp(40px,10vw,96px)/1 Arial Black,Arial,sans-serif;color:#ffd700;text-shadow:0 0 18px #f0f,3px 3px 0 #800080}
.y2k-txt span{font-size:18px;color:#cff}
.y2k-skip{position:absolute;right:12px;bottom:12px}

/* ---- Software Store checkout and coupon codes ---- */
.co p{margin:0 0 8px}
.co-lab{display:block;margin:4px 0}
.co-row{display:flex;gap:6px;margin-top:3px}
.co-in{flex:1;min-width:0;font:13px monospace;text-transform:uppercase;padding:3px 4px}
.co-msg{min-height:1.3em;margin:4px 0;color:#800000;font-size:12px}
.co-ok{color:#006000;font-weight:700}
.co-short{color:#b00000}
.co-open{margin-top:3px;font-size:11px;padding:1px 6px}

/* ---- Work Center (Job Board / Job Center) ---- */
.wk{padding:8px 10px;background:#fff;min-height:100%;color:#000}
.wk-hd{display:flex;justify-content:space-between;gap:8px;align-items:center;background:#000080;color:#fff;padding:8px 10px;flex-wrap:wrap}
.wk-hd b{letter-spacing:2px}.wk-hd small{display:block;color:#c0ffff}
.wk-owed{text-align:right}.wk-owed b{display:block;font-size:20px;color:#ffff80}
.wk h4{margin:12px 0 4px;color:#800000;border-bottom:1px solid #c0c0c0}
.wk-job{display:flex;gap:10px;justify-content:space-between;border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;padding:6px 8px;margin:6px 0;background:#f4f4f4}
.wk-job p{margin:3px 0 0}.wk-job small{color:#555}
.wk-job.done{background:#e8f6e8;opacity:.85}
.wk-pay{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-weight:700;white-space:nowrap}
.wk-pay span{color:#006000}
.wk-clock{display:flex;align-items:center;gap:10px}
.wk-clock > div{flex:1}.wk-clock small{display:block;color:#444}
.wk-lamp{width:14px;height:14px;border-radius:50%;background:#600;border:1px solid #000;flex:none}
.wk-lamp.on{background:#0f0;box-shadow:0 0 6px #0f0}
.wk-note{font-size:12px;color:#555;margin:4px 0}
.era-1985 .wk,.era-1985 .wk-job,.era-1985 .wk-hd{background:#000;color:var(--phos,#33ff66);border-color:var(--phos,#33ff66)}
.era-1985 .wk-hd small,.era-1985 .wk-owed b,.era-1985 .wk h4,.era-1985 .wk-job small,.era-1985 .wk-note,.era-1985 .wk-clock small,.era-1985 .wk-pay span{color:var(--phos,#33ff66)}
.era-1985 .wk-job{border:1px solid var(--phos,#33ff66)}
.wk-owed .btn{color:#000}
.wk-stub{padding:10px;background:#fffbe8}
.wk-stub pre{margin:0 0 10px;font:13px/1.45 "Courier New",monospace;color:#000;white-space:pre;overflow-x:auto;border:1px dashed #a08040;padding:8px;background:#fff}
.wk-stub .btns{text-align:center}
.era-1985 .wk-stub,.era-1985 .wk-stub pre{background:#000;color:var(--phos,#33ff66);border-color:var(--phos,#33ff66);font-family:var(--dos)}

/* ---- Backup & Restore ---- */
.bk p{margin:0 0 6px}
.bk fieldset{margin:6px 0}
.bk small{display:block;margin-top:4px;color:#444;font-size:11px}
.bk-row{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}
.bk-code{margin:6px 0}.bk-code summary{cursor:pointer}
.bk-code textarea{width:100%;box-sizing:border-box;font:11px monospace;word-break:break-all;margin-top:4px}
.era-1985 .bk small{color:var(--phos,#33ff66)}
.era-1985 .bk-code textarea{background:#000;color:var(--phos,#33ff66);border:1px solid var(--phos,#33ff66)}
.pw-shared{display:inline-block;margin-bottom:6px;color:#ffff66;animation:blink 1.4s steps(1) infinite}
@media (prefers-reduced-motion: reduce){.pw-shared{animation:none}}

/* ---- Desktop pop-up ads (js/ads.js RETRO_POPUP_ADS; timing in engine POPAD) ---- */
.dpa{position:absolute;right:18px;bottom:18px;z-index:8000;width:320px;background:var(--gray,#c0c0c0);border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:2px 2px 0 #000;transform:translateY(20px);opacity:0;transition:transform .25s,opacity .25s;font-family:var(--ui)}
.dpa.on{transform:none;opacity:1}
.dpa-tb{display:flex;align-items:center;justify-content:space-between;background:#000080;color:#fff;font:700 12px var(--ui);padding:2px 3px 2px 6px}
.dpa-x{min-width:20px;height:18px;padding:0 4px;background:var(--gray,#c0c0c0);color:#000;border:2px solid;border-color:#fff #000 #000 #fff;font:700 11px/1 var(--ui);cursor:pointer}
.dpa-x:disabled{color:#666;cursor:default}
.dpa-body{display:block;text-decoration:none;color:inherit;cursor:pointer}
.dpa-bar{height:3px;background:#808080}.dpa-bar i{display:block;height:100%;width:100%;background:#ffd400}
.dpa-art{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;min-height:118px;padding:10px 12px;color:#fff;font-family:var(--dos)}
.dpa-art > div:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.dpa-big{font-weight:400;font-size:28px;line-height:1;letter-spacing:1px;text-shadow:2px 2px 0 rgba(0,0,0,.45)}
.dpa-art span{font-size:17px;line-height:1.1}
.dpa-btn{align-self:flex-start;margin-top:4px;padding:2px 8px;background:#ffd400;color:#000;border:2px solid;border-color:#fff7a0 #806a00 #806a00 #fff7a0;font-size:15px !important;animation:blink 1.2s steps(1) infinite}
.dpa-pz{background:#14003a linear-gradient(90deg,#2a0070,#14003a 60%,#003a52)}.dpa-pz .dpa-big{color:#ffe600;text-shadow:2px 2px 0 #ff2bd6}
.dpa-cc{background:#0a1a5a radial-gradient(circle at 20% 30%,#2a4aa0,#0a1a5a 70%)}.dpa-cc .dpa-big{color:#ffb000}
.dpa-bowl{flex:none;width:64px;height:40px;margin-top:22px;background:#e03030;border-radius:0 0 32px 32px;position:relative;border:2px solid #600}
.dpa-bowl i{position:absolute;top:-10px;width:12px;height:12px;background:#ffd400;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.dpa-bowl i:nth-child(1){left:4px}.dpa-bowl i:nth-child(2){left:16px;top:-14px}.dpa-bowl i:nth-child(3){left:28px}.dpa-bowl i:nth-child(4){left:40px;top:-13px}.dpa-bowl i:nth-child(5){left:50px}
.dpa-zm{background:#101010 repeating-linear-gradient(115deg,#1a1a1a 0 12px,#101010 12px 24px)}.dpa-zm .dpa-big{color:#39ff14;font-style:italic}
.dpa-shoe{flex:none;width:70px;height:34px;background:#fff;border-radius:18px 30px 6px 6px;border:2px solid #333;box-shadow:inset 0 -8px 0 #ff2bd6,0 0 10px #39ff14;animation:dpaglow 1s steps(2) infinite}
@keyframes dpaglow{50%{box-shadow:inset 0 -8px 0 #00e5ff,0 0 14px #ff2bd6}}
.dpa-mb{background:#8a1a00 repeating-linear-gradient(45deg,#a82000 0 10px,#8a1a00 10px 20px)}.dpa-mb .dpa-big{color:#fff3c0}
.dpa-pie{flex:none;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 30% 35%,#b01010 6px,transparent 7px),radial-gradient(circle at 65% 60%,#b01010 6px,transparent 7px),radial-gradient(circle at 40% 72%,#b01010 5px,transparent 6px),#ffc640;border:5px solid #d08a30}
.dpa-pp{background:#00807a linear-gradient(160deg,#00a89c,#005a56)}.dpa-pp .dpa-big{color:#fff}
.dpa-pal{flex:none;width:50px;height:62px;border-radius:50% 50% 45% 45%;background:#ff7ac8;border:3px solid #802060;display:grid;place-items:center}
.dpa-pal i{width:30px;height:24px;background:#c8e8a0;border:2px solid #333;box-shadow:inset 6px 6px 0 -2px #333}
.dpa-sa{background:#000 radial-gradient(#fff 1px,transparent 1.5px) 0 0/18px 18px}.dpa-sa .dpa-big{color:#ff2bd6;text-shadow:0 0 8px #ff2bd6}
.dpa-cab{flex:none;width:44px;height:70px;background:#3a0f94;border:3px solid #b58cff;border-radius:6px 6px 2px 2px;box-shadow:inset 0 12px 0 #111,inset 0 34px 0 #00e5ff}
/* year looks */
.era-2000 .dpa{border-radius:6px 6px 2px 2px;border-color:#dfe8ff #1a3a8a #1a3a8a #dfe8ff}
.era-2000 .dpa-tb{background:linear-gradient(90deg,#0a3aa8,#3a8aff);border-radius:4px 4px 0 0}
.era-1985 .dpa{background:#000;border:3px double var(--phos,#33ff66);box-shadow:none}
.era-1985 .dpa-tb{background:var(--phos,#33ff66);color:#000;font-family:var(--dos)}
.era-1985 .dpa-art{background:#000 !important;color:var(--phos,#33ff66)}
.era-1985 .dpa-art *{color:var(--phos,#33ff66) !important;text-shadow:none !important}
.era-1985 .dpa-art > div:first-child:not(:last-child){filter:grayscale(1) brightness(1.6);opacity:.9}
.era-1985 .dpa-btn{background:none;border:1px solid var(--phos,#33ff66)}
.dpa-narrow{left:0;right:0;bottom:0;width:auto;box-shadow:none}
.dpa-narrow .dpa-art{min-height:78px;padding:6px 10px}.dpa-narrow .dpa-big{font-size:22px}.dpa-narrow .dpa-art span{font-size:14px}
@media (prefers-reduced-motion: reduce){.dpa,.dpa-btn,.dpa-shoe{animation:none;transition:none}}
.era-1985 .dpa{bottom:64px}.era-1985 .dpa-narrow{bottom:52px}

/* ---- privacy notice banner (first visit) ---- */
#consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:99999;max-width:760px;margin:0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--gray,#c0c0c0);color:#000;border:3px solid;border-color:#fff #404040 #404040 #fff;box-shadow:4px 4px 0 rgba(0,0,0,.45);padding:10px 12px;font:13px/1.4 Tahoma,Verdana,sans-serif}
#consent p{flex:1 1 320px;margin:0}
#consent b{color:#000080}
#consent a{color:#0000ee}
#consent div{display:flex;gap:6px;flex-wrap:wrap}
#consent .btn{min-width:80px;padding:4px 12px}
.pw-links{display:block;margin-top:6px;opacity:.85}
.pw-links a{color:inherit}