/* SMILE98: a beige late-90s PC on a wooden desk, running a tiny SmileOS 98. */
* { box-sizing: border-box; }
:root { color-scheme: dark; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d0626; }
body { font: 11px Tahoma, Verdana, 'Segoe UI', sans-serif; color: #000; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }

/* ---------- The room ---------- */
#stage { position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(160deg, transparent 58%, rgba(0,0,0,.06) 58.2%), linear-gradient(180deg, #efe4d2 0%, #e6d7c0 70%, #d9c8ad 100%); }
#rig { position: absolute; left: 50%; top: 50%; width: 1000px; height: 600px; transform-origin: 50% 50%; transform: translate(-50%, -50%); }
:root.bare, :root.bare body, :root.bare #stage { background: transparent; }
:root.bare .poster { display: none; }
.poster { position: absolute; box-shadow: 0 3px 8px rgba(0,0,0,.25); border: 6px solid #fff; background: #1a0838 center / cover no-repeat; }
.poster::before, .poster::after { content: ''; position: absolute; top: -4px; width: 6px; height: 6px; border-radius: 50%; background: #b9b2a4; box-shadow: inset 0 0 0 1px #8a8273; }
.poster::before { left: -4px; } .poster::after { right: -4px; }
.poster.p1 { left: 296px; top: 26px; width: 104px; height: 140px; background-image: url(/img/raincity-rewind-logo.webp); background-size: 92% auto; background-color: #1b0f4a; }
.poster.p2 { left: 890px; top: 70px; width: 150px; height: 104px; background-image: url(/img/night-lounge.webp); }

/* ---------- The desk ---------- */
.desk { position: absolute; left: -100px; right: -100px; top: 500px; height: 100px;
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0, rgba(255,255,255,.04) 3px, transparent 10px), linear-gradient(180deg, #3a3a3f 0%, #2a2a2e 45%, #1e1e21 100%);
  box-shadow: 0 -1px 0 #55555c; }
.desk::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(180deg, #161618, #0e0e10); box-shadow: inset 0 1px 0 #47474d; }
.shadow { position: absolute; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%); filter: blur(3px); }

/* shared bits */
.beige { background: linear-gradient(180deg, #ece6d3 0%, #e2dbc4 55%, #d6ceb3 100%); box-shadow: inset 1px 1px 0 #faf7ee, inset -1px -1px 0 #a69d83; }
.hw { appearance: none; border: 0; cursor: pointer; padding: 0; position: relative; }
.hw:focus-visible { outline: 2px dashed #ff3fd2; outline-offset: 2px; }
.tiny { font: 7px/1 Verdana, sans-serif; color: #8a8167; letter-spacing: .06em; text-transform: uppercase; }
.led { width: 6px; height: 6px; border-radius: 50%; background: #4a4a38; box-shadow: inset 0 0 2px #000; display: inline-block; }
.led.on { background: #52ff6a; box-shadow: 0 0 6px #52ff6a, inset 0 0 1px #fff; }
.led.amber.on { background: #ffb02e; box-shadow: 0 0 6px #ffb02e; }
.led.blink { animation: ledb .12s steps(1) infinite; }
@keyframes ledb { 50% { opacity: .2; } }
.pbtn { width: 18px; height: 8px; border-radius: 2px; background: linear-gradient(180deg, #f2eddc, #cbc2a5); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #8c8268, 0 1px 1px rgba(0,0,0,.3); }
.pbtn:active, .pbtn.down { box-shadow: inset 1px 1px 2px rgba(0,0,0,.4); transform: translateY(1px); }
.rbtn { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f4efe0, #c2b99c); box-shadow: 0 1px 1px rgba(0,0,0,.35), inset 0 -1px 1px rgba(0,0,0,.15); }
.rbtn:active, .rbtn.down { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }

/* ---------- The tower ---------- */
.tower { position: absolute; left: 728px; top: 80px; width: 196px; height: 420px; z-index: 2; border-radius: 5px 3px 3px 5px;
  background: linear-gradient(180deg, #ebe4cc 0%, #e3dbc0 60%, #d8cfb1 100%); box-shadow: inset 2px 2px 0 #f8f4e6, inset -2px -1px 0 #b3aa8d; }
.tower-side { position: absolute; left: 924px; top: 80px; width: 58px; height: 420px; z-index: 1; transform: skewY(-12deg); transform-origin: 0 0;
  background: linear-gradient(90deg, #cfc6a8, #e0d8bd 30%, #d3caac); box-shadow: inset 0 0 0 1px #b8ae90; }
.tower-side::before { content: ''; position: absolute; left: 18px; top: 40px; width: 26px; height: 120px; background: radial-gradient(circle, #8d846a 1px, transparent 1.5px) 0 0 / 5px 5px; opacity: .7; }
.tower-shadow { left: 712px; top: 490px; width: 270px; height: 24px; }
.bay { position: absolute; left: 10px; right: 10px; height: 40px; border-radius: 2px; background: linear-gradient(180deg, #efe9d6, #ddd5ba); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #a39a7e, 0 1px 0 #b3aa8d; }
.bay .slot { position: absolute; left: 10px; right: 50px; top: 15px; height: 3px; border-radius: 2px; background: #7a7258; box-shadow: 0 1px 0 #fff; }
.bay .logo { position: absolute; left: 12px; top: 4px; font: italic bold 7px/1 Verdana, sans-serif; color: #9a917a; }
.bay .ej { position: absolute; right: 12px; top: 24px; }
.bay .led { position: absolute; right: 38px; top: 25px; width: 5px; height: 5px; }
.bay.b1 { top: 14px; } .bay.b2 { top: 58px; } .bay.b3 { top: 102px; } .bay.b4 { top: 146px; height: 32px; }
.bay.b3, .bay.b4 { background: linear-gradient(180deg, #e8e1c8, #dad1b4); }
.bay.b2 .x { position: absolute; right: 12px; top: 24px; width: 12px; height: 6px; border-radius: 1px; background: #d0c7aa; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #9d9378; }
.bay.b2 .x + .x { right: 28px; }
.tray { position: absolute; left: 10px; right: 10px; top: 52px; height: 0; overflow: hidden; z-index: 3; transition: height .6s cubic-bezier(.3,.7,.3,1);
  background: linear-gradient(180deg, #ddd5ba, #cbc2a5 8px, #2b2822 9px, #1a1813); border-radius: 0 0 3px 3px; box-shadow: 0 4px 6px rgba(0,0,0,.35); }
.tray::after { content: ''; position: absolute; left: 50%; top: 14px; width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; border: 2px solid #3f3a30; }
.tower.cdopen .tray { height: 84px; }
.tower.cdopen .tray.disc::before { content: ''; position: absolute; left: 50%; top: 16px; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, #1a1813 6px, #ddd 7px, #ddd 9px, transparent 10px), conic-gradient(from 20deg, #ff3fd2, #5ff6ff, #fff47a, #8a5cff, #ff3fd2); }
.front-lower { position: absolute; left: 0; right: 0; top: 188px; bottom: 0; border-radius: 0 0 3px 5px;
  background: radial-gradient(ellipse 140% 60% at 50% 0%, #efe8d0 0, #e2d9bd 60%, #d5cbad 100%); box-shadow: inset 0 2px 0 #c8bf9f, inset 0 3px 0 #fbf8ef; }
.fd { position: absolute; left: 30px; right: 30px; top: 16px; height: 30px; border-radius: 14px / 10px; background: linear-gradient(180deg, #d9d0b3, #e9e2ca); box-shadow: inset 0 2px 3px rgba(0,0,0,.18); }
.fd .slot { position: absolute; left: 18px; right: 18px; top: 10px; height: 4px; border-radius: 2px; background: #4a4536; }
.fd .disk { position: absolute; left: 30px; width: 76px; top: 4px; height: 9px; background: linear-gradient(180deg, #2a2a2a, #111); border-radius: 1px; opacity: 0; transition: opacity .2s; }
.tower.fdout .fd .disk { opacity: 1; animation: pop .35s ease-out; }
@keyframes pop { from { transform: translateY(6px); } }
.fd .ej { position: absolute; right: 16px; top: 18px; width: 14px; height: 6px; }
.fd .led { position: absolute; left: 14px; top: 19px; width: 4px; height: 4px; }
.swoosh { position: absolute; left: 22px; right: 22px; top: 62px; height: 70px; border-radius: 50% 50% 46% 46% / 30% 30% 70% 70%; border-top: 2px solid #cfc6a8; opacity: .8; }
.pwr { position: absolute; left: 50%; top: 126px; width: 26px; height: 40px; margin-left: -13px; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 30%, #ffffff, #c9cdd3 45%, #8e949c 100%); box-shadow: 0 2px 3px rgba(0,0,0,.35), inset 0 -2px 3px rgba(0,0,0,.25), 0 0 0 3px #d8cfb1, 0 0 0 4px #b9b092; }
.pwr:active { transform: scale(.95); }
.leds { position: absolute; left: 44px; right: 44px; top: 182px; display: flex; justify-content: space-between; align-items: center; }
.rst { position: absolute; left: 50%; top: 200px; width: 12px; height: 6px; margin-left: -6px; }
.holes { position: absolute; left: 26px; right: 26px; bottom: 16px; height: 22px; background: radial-gradient(circle, #6b6450 2.2px, transparent 2.8px) 0 0 / 14px 11px; opacity: .85; }
.sticker-cpu { position: absolute; z-index: 1; left: 22px; top: 62px; width: 31px; height: auto; border-radius: 2px; filter: drop-shadow(0 .5px .5px rgba(0,0,0,.45)); }
.sticker-os { position: absolute; z-index: 1; right: 16px; top: 62px; width: 46px; height: auto; filter: drop-shadow(0 .5px .5px rgba(0,0,0,.4)); }
.sticker-os-old b { display: block; font: bold 8px/1 'Trebuchet MS', Verdana, sans-serif; color: #102a7a; }
.gamepad { position: absolute; left: 62px; top: 128px; width: 118px; height: 30px; z-index: 3; cursor: pointer; border: 0; padding: 0;
  background: none; }
.gamepad::before { content: ''; position: absolute; inset: 6px 10px 0; border-radius: 16px 16px 10px 10px; background: linear-gradient(180deg, #c9c9cf, #9c9ca6); box-shadow: 0 3px 4px rgba(0,0,0,.35), inset 0 1px 0 #eee; }
.gamepad i { position: absolute; top: 12px; width: 7px; height: 7px; border-radius: 50%; }
.gamepad i:nth-child(1) { left: 74px; background: #2fbf4a; } .gamepad i:nth-child(2) { left: 84px; top: 9px; background: #e8c21a; } .gamepad i:nth-child(3) { left: 84px; top: 16px; background: #d33; } .gamepad i:nth-child(4) { left: 94px; background: #2a6be0; }
.gamepad b { position: absolute; left: 26px; top: 10px; width: 14px; height: 14px; background: linear-gradient(#555,#555) 50% 0 / 5px 100% no-repeat, linear-gradient(#555,#555) 0 50% / 100% 5px no-repeat; }
.gamepad.wig { animation: wig .4s; }
@keyframes wig { 25% { transform: rotate(-4deg); } 75% { transform: rotate(3deg); } }


/* ---------- The monitor: a 15-inch beige CRT ---------- */
.mon { position: absolute; z-index: 1; left: 124px; top: 38px; width: 480px; height: 424px; border-radius: 22px 22px 14px 14px;
  background: linear-gradient(180deg, #efe9d6 0%, #e6dfc8 60%, #d9d1b5 100%); box-shadow: inset 2px 2px 0 #fbf8ef, inset -2px -3px 0 #b3aa8c, 0 14px 22px -8px rgba(40,20,0,.5); }
.mon::before { content: ''; position: absolute; left: 22px; right: 22px; top: 14px; height: 340px; border-radius: 26px; background: linear-gradient(180deg, #d6ceb2, #e9e2cb 12%, #e9e2cb 88%, #cfc6a8); box-shadow: inset 0 2px 5px rgba(0,0,0,.18); }
.bezel { position: absolute; left: 36px; top: 26px; width: 408px; height: 316px; border-radius: 30px / 34px; background: #26241f; box-shadow: inset 0 0 0 3px #3a372f, inset 0 0 18px rgba(0,0,0,.9); }
#crt { position: absolute; left: 4px; top: 4px; width: 400px; height: 308px; overflow: hidden; background: #0b0d0b; border-radius: 26px / 30px; box-shadow: inset 0 0 40px rgba(0,0,0,.9); }
.mon-strip { position: absolute; left: 30px; right: 30px; bottom: 16px; height: 44px; display: flex; align-items: center; gap: 10px; }
.mon-brand { font: bold 12px/1 Georgia, 'Times New Roman', serif; color: #6a6250; letter-spacing: .02em; }
.mon-brand i { font-style: normal; font: 9px Verdana, sans-serif; color: #8a8167; margin-left: 6px; }
.grow { flex: 1; }
.knob { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbf7ea, #b9ae8e 70%, #8c8268); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.knob::after { content: ''; position: absolute; left: 7px; top: 2px; width: 2px; height: 5px; background: #6b6248; transform-origin: 1px 6px; transform: rotate(var(--r, 0deg)); }
.fsbtn { height: 14px; padding: 0 6px; border-radius: 3px; font: bold 8px/14px Verdana, sans-serif; color: #6a6250; background: linear-gradient(180deg, #f4efe0, #d2c9ac); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #9d9378; }
.mon-strip .pbtn { width: 22px; height: 12px; }
.mon-neck { position: absolute; z-index: 0; left: 314px; top: 458px; width: 100px; height: 24px; background: linear-gradient(90deg, #cfc6a8, #e6dfc8 40%, #d3caad); clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }
.mon-foot { position: absolute; z-index: 0; left: 272px; top: 478px; width: 184px; height: 22px; border-radius: 50% 50% 12px 12px / 40% 40% 12px 12px; background: linear-gradient(180deg, #ece6d3, #d2c9ac); box-shadow: 0 4px 5px rgba(40,20,0,.4); }
.mon-shadow { left: 234px; top: 490px; width: 260px; height: 22px; }
.postit { position: absolute; z-index: 3; left: 566px; top: 24px; width: 64px; padding: 5px 4px; transform: rotate(8deg); background: #fff47a;
  font: 10px/1.15 'Comic Sans MS', 'Comic Neue', 'Chalkboard SE', cursive; color: #2a2280; box-shadow: 2px 3px 6px rgba(0,0,0,.3); cursor: pointer; }

/* ---------- Speakers, one either side ---------- */
.spk { position: absolute; top: 320px; width: 92px; height: 180px; border-radius: 6px; z-index: 1;
  background: linear-gradient(180deg, #efe9d6, #ddd5ba); box-shadow: inset 1px 1px 0 #fbf8ef, inset -1px -1px 0 #a69d83, 0 8px 10px -4px rgba(40,20,0,.45); }
.spk.l { left: 20px; } .spk.r { left: 616px; }
.spk .grill { position: absolute; left: 10px; right: 10px; top: 12px; height: 120px; border-radius: 4px; background: radial-gradient(circle, #9d957d 1.1px, transparent 1.5px) 0 0 / 5px 5px, #e3dcc6; box-shadow: inset 0 0 0 2px #cfc6a8; }
.spk .cone { position: absolute; left: 50%; top: 58%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: radial-gradient(circle, rgba(60,55,40,.25) 0 30%, transparent 32%, rgba(60,55,40,.15) 60%, transparent 62%); }
.spk .tw { position: absolute; left: 50%; top: 14px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle, rgba(60,55,40,.3) 0 40%, transparent 42%); }
.spk .name { position: absolute; left: 0; right: 0; top: 140px; text-align: center; font: italic bold 7px/1 Verdana, sans-serif; color: #8a8270; letter-spacing: .1em; }
.spk .vol { position: absolute; right: 12px; bottom: 10px; }
.spk .pled { position: absolute; left: 12px; bottom: 14px; }
.spk.thump .grill { animation: thump .12s ease-out; }
@keyframes thump { 50% { transform: scale(1.03); } }
.spk-shadow { width: 124px; height: 20px; top: 492px; } .spk-shadow.l { left: 4px; } .spk-shadow.r { left: 600px; }

/* screen-only mode (fullscreen, or opened on its own) */
:root.screen #stage { background: #000; }
:root.screen #rig { left: 0; top: 0; width: 100vw; height: 100vh; transform: none !important; }
:root.screen #rig > *:not(.mon) { display: none; }
:root.screen .mon { left: 0; top: 0; width: 100%; height: 100%; background: #000; box-shadow: none; border-radius: 0; }
:root.screen .bezel { left: 0; top: 0; width: 100%; height: 100%; background: #000; box-shadow: none; border-radius: 0; }
:root.screen #crt { left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
:root.screen .mon > :not(.bezel) { display: none; }
:root.screen .mon::before { display: none; }
#crt:fullscreen { width: 100vw; height: 100vh; border-radius: 0; left: 0; top: 0; }
.exitfs { position: absolute; right: 8px; top: 8px; z-index: 99; display: none; padding: 4px 8px; font: bold 11px Verdana, sans-serif; background: #c0c0c0; border: 2px outset #fff; cursor: pointer; }
:root.screen .exitfs, #crt:fullscreen .exitfs { display: block; }

/* ---------- The CRT ---------- */
#os { position: absolute; left: 0; top: 0; width: 640px; height: 480px; transform-origin: 0 0; overflow: hidden; background: #000; image-rendering: pixelated; }
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.fx.scan { background: repeating-linear-gradient(180deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.fx.rgb { background: repeating-linear-gradient(90deg, rgba(255,0,0,.02) 0 1px, rgba(0,255,0,.018) 1px 2px, rgba(0,0,255,.02) 2px 3px); }
/* true full screen: just the picture, no CRT effects */
:root.screen .fx, #crt:fullscreen .fx { display: none; }
.fx.vig { box-shadow: inset 0 0 60px rgba(0,0,0,.7), inset 0 0 12px rgba(0,0,0,.6); border-radius: inherit; }
.fx.glare { background: radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.12), transparent 42%), linear-gradient(115deg, transparent 55%, rgba(255,255,255,.04) 60%, transparent 66%); }
.fx.roll { background: linear-gradient(180deg, transparent, rgba(255,255,255,.05) 50%, transparent); height: 60px; animation: roll 7s linear infinite; inset: auto 0 auto 0; }
@keyframes roll { from { top: -60px; } to { top: 110%; } }
#crt.live #os { animation: flick 4s steps(30) infinite; }
@keyframes flick { 0%, 100% { opacity: 1; } 50% { opacity: .985; } 52% { opacity: .96; } 54% { opacity: 1; } }
#crt .dark { position: absolute; inset: 0; background: #070907; z-index: 40; transition: opacity .2s; }
#crt.live .dark { opacity: 0; pointer-events: none; }
#crt.warm .dark { animation: warm .7s ease-out forwards; }
@keyframes warm { 0% { opacity: 1; clip-path: inset(49.6% 0 49.6% 0); background: #fff; } 35% { opacity: 1; clip-path: inset(49.6% 0 49.6% 0); background: #eef; } 70% { opacity: .5; clip-path: inset(0 0 0 0); background: #889; } 100% { opacity: 0; } }
#crt .dot { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1px; border-radius: 50%; background: #fff; z-index: 41; opacity: 0; box-shadow: 0 0 10px 4px #ccf; }
#crt.cool .dot { animation: dotfade 1.2s ease-out; }
@keyframes dotfade { 0% { opacity: 1; } 100% { opacity: 0; transform: scale(.3); } }
#crt.cool .collapse { animation: collapse .35s ease-in forwards; }
.collapse { position: absolute; inset: 0; z-index: 42; pointer-events: none; opacity: 0; background: #ddf; }
@keyframes collapse { 0% { opacity: .9; clip-path: inset(0 0 0 0); } 60% { opacity: 1; clip-path: inset(49.5% 0 49.5% 0); } 100% { opacity: 1; clip-path: inset(49.5% 50% 49.5% 50%); } }
#crt.degauss #os { animation: degauss .9s ease-out; }
@keyframes degauss { 0% { filter: hue-rotate(0) blur(0); transform: scale(var(--s)) skewX(0); } 20% { filter: hue-rotate(90deg) blur(1px); transform: scale(var(--s)) skewX(3deg); } 40% { filter: hue-rotate(-60deg); transform: scale(var(--s)) skewX(-2deg); } 60% { filter: hue-rotate(30deg); transform: scale(var(--s)) skewX(1deg); } 100% { filter: none; transform: scale(var(--s)); } }

/* ---------- SmileOS 98 ---------- */
.layer { position: absolute; inset: 0; display: none; }
.layer.on { display: block; }
.mono { font: 16px/18px 'Courier New', 'Lucida Console', monospace; color: #bbb; white-space: pre; padding: 8px 10px; background: #000; }
#bios .logo { position: absolute; right: 18px; top: 14px; color: #ffcf3a; font: bold 12px/12px 'Courier New', monospace; white-space: pre; text-align: center; }
#bios .foot { position: absolute; left: 10px; bottom: 10px; color: #bbb; }
#bios .bver { position: absolute; right: 10px; bottom: 10px; color: #555; font-size: 10px; line-height: 12px; }
#splash { background: #6aa0e6 url(/smile98/splash-sky.webp) center / cover; overflow: hidden; }
#splash::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 50% 42%, rgba(255,255,255,.55), transparent 70%); }
#splash .mark { position: absolute; left: 0; right: 0; top: 118px; text-align: center; color: #111; }
#splash .mark svg { width: 92px; height: 92px; display: block; margin: 0 auto 6px; filter: drop-shadow(2px 3px 2px rgba(0,0,40,.35)); }
#splash .mark small { display: block; font: 15px/1 Arial, Helvetica, sans-serif; letter-spacing: -.2px; margin-left: -150px; }
#splash .mark small sup { font-size: 8px; }
#splash .mark b { display: block; font: bold 54px/1 'Franklin Gothic Medium', 'Arial Black', Arial, sans-serif; letter-spacing: -2px; text-shadow: 1px 1px 0 rgba(255,255,255,.6); }
#splash .mark b span { font-size: 50px; letter-spacing: -1px; margin-left: 2px; }
#splash .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(90deg, #0a2a8a, #3a7ae8, #9ad0ff, #3a7ae8, #0a2a8a) 0 0 / 640px 100%; animation: sbar 1.6s linear infinite; }
@keyframes sbar { to { background-position: 640px 0; } }
#desk { background: #008080 center / auto no-repeat; }
#desk.wp-clouds { background: #3a6ac0 url(/smile98/clouds.webp) center / cover no-repeat; }
#desk.wp-cube { background-image: url(/img/smile-cube.webp); background-size: 220px auto; }
#desk.wp-setup { background: linear-gradient(180deg, #0a2a7a, #2456c0); }
#desk.wp-grid { background: linear-gradient(180deg, #1a0838 0%, #5a1078 45%, #ff3fa0 62%, #ffb04a 64%, #1a0838 64.5%), #1a0838; }
#desk.wp-grid::before { content: ''; position: absolute; left: -40%; right: -40%; top: 62%; bottom: 0; background: repeating-linear-gradient(90deg, rgba(255,63,210,.7) 0 1px, transparent 1px 40px), repeating-linear-gradient(180deg, rgba(255,63,210,.7) 0 1px, transparent 1px 20px); transform: perspective(140px) rotateX(55deg); transform-origin: 50% 0; }
#desk.wp-plain { background: #008080; }
.icons { position: absolute; left: 4px; top: 4px; bottom: 32px; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 2px; z-index: 1; }
.icon { width: 74px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: default; color: #fff; text-align: center; border: 0; background: none; }
.icon img, .icon svg { width: 32px; height: 32px; image-rendering: pixelated; }
.icon .ic { position: relative; width: 32px; height: 32px; }
.icon .ic .lnk { position: absolute; left: 0; bottom: 0; width: 11px; height: 11px; }
.icon span { padding: 1px 2px; line-height: 13px; text-shadow: 1px 1px 0 #000; }
.icon.sel span { background: #000080; text-shadow: none; outline: 1px dotted #ff0; }
.icon.sel .ic { filter: brightness(.6) sepia(1) hue-rotate(190deg) saturate(4); }
.win .icon { color: #000; } .win .icon span { text-shadow: none; }

/* 3D bevels */
.raised { background: #c0c0c0; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf; }
.sunken { background: #fff; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000, inset -2px -2px 0 #dfdfdf; }
.well { box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; }
.btn { min-width: 70px; height: 22px; padding: 0 8px; border: 0; background: #c0c0c0; cursor: pointer; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf; }
.btn:active, .btn.down { box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080; padding-top: 1px; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn[disabled] { color: #808080; text-shadow: 1px 1px 0 #fff; }

/* windows */
.win { position: absolute; display: flex; flex-direction: column; padding: 3px; z-index: 10; min-width: 120px; }
.win.max { left: 0 !important; top: 0 !important; width: 640px !important; height: 452px !important; }
.win.min { display: none; }
.tb { height: 18px; display: flex; align-items: center; gap: 3px; padding: 0 2px 0 3px; color: #fff; font-weight: bold; background: linear-gradient(90deg, #808080, #b5b5b5); flex: none; touch-action: none; }
.win.act .tb { background: linear-gradient(90deg, #000080, #1084d0); }
.win.act.pink .tb { background: linear-gradient(90deg, #6a0a78, #ff3fd2); }
.tb img, .tb svg { width: 16px; height: 16px; flex: none; }
.tb .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb .c { width: 16px; min-width: 0; height: 14px; border: 0; padding: 0; font: bold 10px/12px Marlett, Verdana, sans-serif; color: #000; display: grid; place-items: center; }
.tb .c + .c.x { margin-left: 2px; }
.menu { display: flex; gap: 0; padding: 1px 0; flex: none; position: relative; }
.menu > span { padding: 2px 6px; cursor: default; }
.menu > span:hover, .menu > span.open { box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; }
.wb { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.sb { display: flex; gap: 2px; margin-top: 2px; flex: none; }
.sb span { flex: 1; padding: 2px 4px; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; white-space: nowrap; overflow: hidden; }
.grip { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, #808080 50% 58%, #fff 58% 66%, transparent 66% 74%, #808080 74% 82%, #fff 82%); touch-action: none; }

/* dropdown menus (start menu, menu bars, context) */
.pop { position: absolute; z-index: 400; padding: 2px; min-width: 150px; }
.pop .it { display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 18px 0 4px; position: relative; white-space: nowrap; cursor: default; }
.pop .it img, .pop .it svg { width: 16px; height: 16px; flex: none; }
.pop .it.big { height: 32px; } .pop .it.big svg, .pop .it.big img { width: 24px; height: 24px; }
.pop .it.u > span::first-letter { text-decoration: underline; }
.pop .it:hover, .pop .it.hot { background: #000080; color: #fff; }
.pop .it.sub::after { content: '▶'; position: absolute; right: 4px; font-size: 7px; }
.pop .it.dis { color: #808080; }
.pop hr { border: 0; height: 2px; margin: 3px 1px; box-shadow: inset 0 1px 0 #808080, inset 0 -1px 0 #fff; }
#start { left: 2px; bottom: 28px; display: flex; padding: 3px; }
#start .side { width: 22px; background: linear-gradient(0deg, #000080, #10106a 60%, #000); color: #fff; writing-mode: vertical-rl; transform: rotate(180deg); font: bold 17px/22px 'Trebuchet MS', Verdana, sans-serif; padding: 6px 0; letter-spacing: .5px; }
#start .side b { color: #fff; font-weight: bold; } #start .side i { font-style: normal; font-weight: normal; }
#start .list { min-width: 158px; }

/* taskbar */
#bar { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; z-index: 300; display: flex; align-items: center; gap: 3px; padding: 2px 2px 2px 2px; background: #c0c0c0; box-shadow: inset 0 1px 0 #dfdfdf, inset 0 2px 0 #fff; }
#b-start { display: flex; align-items: center; gap: 3px; height: 22px; padding: 0 5px 0 3px; font-weight: bold; min-width: 0; }
#b-start svg { width: 16px; height: 16px; }
.qsep { width: 2px; height: 20px; box-shadow: inset 1px 0 0 #808080, inset -1px 0 0 #fff; }
#tasks { flex: 1; display: flex; gap: 3px; min-width: 0; overflow: hidden; }
#tasks button { flex: 0 1 140px; min-width: 30px; height: 22px; display: flex; align-items: center; gap: 4px; padding: 0 4px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tasks button span { overflow: hidden; text-overflow: ellipsis; }
#tasks button svg, #tasks button img { width: 16px; height: 16px; flex: none; }
#tasks button.down { font-weight: bold; background: repeating-conic-gradient(#c0c0c0 0 25%, #fff 0 50%) 0 0 / 2px 2px; }
#systray { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px 0 4px; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; }
#systray .ti { width: 16px; height: 16px; border: 0; padding: 0; background: none; cursor: default; position: relative; }
#systray .ti svg { width: 16px; height: 16px; display: block; }
#clock { min-width: 50px; text-align: center; cursor: default; }
.balloon { position: absolute; right: 8px; bottom: 34px; max-width: 250px; padding: 8px 10px 8px 10px; background: #ffffe1; border: 1px solid #000; border-radius: 8px; z-index: 450; box-shadow: 2px 2px 0 rgba(0,0,0,.3); line-height: 1.35; }
.balloon b { display: block; margin-bottom: 2px; }
.balloon::after { content: ''; position: absolute; right: 30px; bottom: -9px; border: 8px solid transparent; border-top-color: #ffffe1; border-bottom: 0; filter: drop-shadow(0 1px 0 #000); }
.tip { position: absolute; z-index: 460; padding: 2px 4px; background: #ffffe1; border: 1px solid #000; white-space: nowrap; pointer-events: none; }

/* message boxes */
.msg { display: flex; gap: 12px; padding: 12px 12px 6px; align-items: flex-start; line-height: 1.4; }
.msg svg { width: 32px; height: 32px; flex: none; }
.msg p { margin: 0; white-space: pre-line; }
.btns { display: flex; justify-content: center; gap: 6px; padding: 8px 10px 10px; flex-wrap: wrap; }
.det { margin: 0 12px 6px; height: 0; overflow: hidden; font: 11px/13px 'Courier New', monospace; white-space: pre; }
.det.on { height: auto; padding: 4px; }

/* app bits */
textarea.np { flex: 1; resize: none; border: 0; margin: 0; padding: 2px 4px; font: 13px/15px 'Courier New', 'Lucida Console', monospace; outline: 0; user-select: text; -webkit-user-select: text; }
.np-wrap { flex: 1; display: flex; padding: 2px; }
.cmd { flex: 1; background: #000; color: #c0c0c0; font: 13px/15px 'Courier New', 'Lucida Console', monospace; padding: 4px 6px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; cursor: text; user-select: text; -webkit-user-select: text; outline: 0; }
.cmd .in { display: inline; }
.cmd .cur { display: inline-block; width: 8px; height: 2px; background: #c0c0c0; vertical-align: -1px; animation: blinkc .5s steps(1) infinite; }
@keyframes blinkc { 50% { opacity: 0; } }
.cmd input { position: absolute; left: -9999px; width: 1px; opacity: 0; }
.folder { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 6px; overflow: auto; background: #fff; margin: 0 1px; }
.addr { display: flex; align-items: center; gap: 4px; padding: 2px 2px 4px; }
.addr .sunken { flex: 1; padding: 3px 4px; height: 20px; white-space: nowrap; overflow: hidden; }
.paint { flex: 1; display: grid; grid-template-columns: 50px 1fr; grid-template-rows: 1fr auto; gap: 2px; min-height: 0; }
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; align-content: start; padding: 2px; }
.tools button { height: 23px; min-width: 0; border: 0; padding: 0; font-size: 13px; }
.tools button.down { box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #fff; background: repeating-conic-gradient(#c0c0c0 0 25%, #fff 0 50%) 0 0 / 2px 2px; }
.canvas-wrap { overflow: auto; background: #808080; padding: 4px; }
.canvas-wrap canvas { background: #fff; display: block; cursor: crosshair; touch-action: none; image-rendering: pixelated; }
.pal { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; padding: 2px; }
.pal .cur { width: 28px; height: 26px; position: relative; }
.pal .cur i { position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; border: 1px solid #000; }
.pal .sw { display: grid; grid-template-columns: repeat(14, 13px); grid-auto-rows: 13px; gap: 1px; }
.pal .sw button { width: 13px; height: 13px; border: 0; padding: 0; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; }
.calc { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.calc .scr { height: 24px; text-align: right; padding: 3px 6px; font: 15px/18px 'Courier New', monospace; overflow: hidden; }
.calc .keys { display: grid; grid-template-columns: repeat(5, 36px); gap: 4px; }
.calc .keys .btn { min-width: 0; padding: 0; height: 26px; color: #00f; }
.calc .keys .btn.r { color: #c00; }
.mines { padding: 6px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.mines .top { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 4px; }
.mines .lcd { width: 41px; height: 25px; background: #000; color: #f00; font: bold 20px/25px 'Courier New', monospace; text-align: center; }
.mines .face { width: 26px; height: 26px; min-width: 0; padding: 0; font-size: 16px; line-height: 26px; }
.mines .grid { display: grid; padding: 3px; }
.mines .cell { width: 16px; min-width: 0; height: 16px; font: bold 11px/16px Verdana, sans-serif; text-align: center; border: 0; padding: 0; }
.mines .cell.open { background: #c0c0c0; box-shadow: inset 1px 1px 0 #808080; }
.mines .cell.boom { background: #f00; }

/* Winamp-alike */
.amp { background: #24243a; color: #00e000; padding: 4px; display: flex; flex-direction: column; gap: 4px; font: 9px Verdana, sans-serif; }
.amp .disp { display: grid; grid-template-columns: 92px 1fr; gap: 4px; }
.amp .lcd { background: #000; border: 1px solid #555; box-shadow: inset 1px 1px 0 #111; padding: 3px; height: 42px; position: relative; }
.amp .time { font: bold 20px/20px 'Courier New', monospace; color: #00ff3a; letter-spacing: 1px; text-shadow: 0 0 4px rgba(0,255,58,.4); }
.amp .vis { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 14px; display: flex; align-items: flex-end; gap: 1px; }
.amp .vis i { flex: 1; background: linear-gradient(0deg, #00c000, #e0e000 70%, #ff3000); }
.amp .marq { height: 14px; overflow: hidden; white-space: nowrap; color: #00ff3a; font: 11px/14px 'Courier New', monospace; }
.amp .marq span { display: inline-block; padding-left: 100%; animation: marq 14s linear infinite; }
@keyframes marq { to { transform: translateX(-100%); } }
.amp .kbps { font: 9px/11px Verdana, sans-serif; color: #00c000; margin-top: 3px; display: flex; gap: 6px; }
.amp .kbps b { color: #00ff3a; }
.amp .ctl { display: flex; align-items: center; gap: 3px; }
.amp .ctl button { width: 22px; height: 18px; border: 0; padding: 0; font-size: 9px; color: #000; background: linear-gradient(180deg, #d8d8e8, #8a8aa8); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #333; }
.amp .ctl button:active { box-shadow: inset 1px 1px 0 #333; }
.amp .slider { position: relative; height: 10px; flex: 1; background: linear-gradient(90deg, #003000, #00a000); border: 1px solid #000; }
.amp .slider.pos { background: #111; }
.amp .slider i { position: absolute; top: -2px; width: 12px; height: 12px; background: linear-gradient(180deg, #e0e0f0, #8080a0); border: 1px solid #000; }
.amp .mute { color: #ff4040; font-weight: bold; }
.pl { background: #000; color: #00e000; font: 11px/15px 'Courier New', monospace; padding: 3px; overflow-y: auto; flex: 1; }
.pl div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.pl div.cur { color: #fff; background: #0000c6; }

/* the streamer */
.strm { background: #c0c0c0; display: flex; flex-direction: column; gap: 4px; padding: 4px; flex: 1; }
.strm .hdr { display: flex; gap: 6px; align-items: stretch; }
.strm .air { width: 92px; display: grid; place-items: center; background: #200; color: #3a0d0d; font: bold 15px/1 'Courier New', monospace; letter-spacing: 1px; text-align: center; }
.strm .air.on { color: #ff3030; text-shadow: 0 0 8px #ff2020; animation: blinkc 1s steps(1) infinite; }
.strm .air.on.solid { animation: none; }
.strm .stats { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; padding: 4px 6px; font: 11px/14px 'Courier New', monospace; background: #000; color: #5ff6ff; }
.strm .stats b { color: #7dffc4; font-weight: normal; }
.strm .vu { display: flex; flex-direction: column; gap: 2px; padding: 3px; background: #000; }
.strm .vu div { height: 6px; background: linear-gradient(90deg, #00c000 0 60%, #e0e000 60% 82%, #ff3000 82%); clip-path: inset(0 var(--v, 100%) 0 0); }
.strm .log { height: 74px; overflow-y: auto; background: #000; color: #c0c0c0; font: 10px/12px 'Courier New', monospace; padding: 3px 4px; white-space: pre; }
.strm .log .w { color: #ffcf3a; } .strm .log .e { color: #ff5050; } .strm .log .g { color: #7dffc4; }
.strm .row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.strm select { font: inherit; height: 20px; }
.strm .danger { background: #c00; color: #fff; font-weight: bold; text-shadow: 1px 1px 0 #600; }
.strm .buf { flex: 1; height: 14px; padding: 2px; }
.strm .buf i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px); width: 0; transition: width .4s; }

/* DOS box / dial-up console */
.dosbox { flex: 1; background: #000; color: #c0c0c0; font: 13px/15px 'Courier New', 'Lucida Console', monospace; padding: 4px 6px; white-space: pre-wrap; overflow: hidden; }
.dosbox .hi { color: #fff; } .dosbox .ok { color: #7dffc4; } .dosbox .y { color: #ffcf3a; } .dosbox .m { color: #ff7ae0; }

/* BSOD */
#bsod { background: #0000aa; color: #fff; font: 16px/20px 'Courier New', 'Lucida Console', monospace; }
#bsod .in { position: absolute; left: 50%; top: 50%; width: 580px; transform: translate(-50%, -50%); }
#bsod .h { text-align: center; margin-bottom: 20px; } #bsod .h span { background: #aaa; color: #0000aa; padding: 0 6px; }
#bsod p { margin: 0 0 16px; }
#bsod .k { text-align: center; margin-top: 18px; }
#safe { background: #000; }
#safe p { position: absolute; left: 0; right: 0; top: 46%; text-align: center; color: #ff9a2a; font: bold 22px/1.3 Verdana, sans-serif; margin: 0; }
#bye { background: #000; }
#bye p { position: absolute; left: 0; right: 0; bottom: 40%; text-align: center; color: #fff; font: 14px Verdana, sans-serif; }
#dosmode .cmd { position: absolute; inset: 0; font-size: 16px; line-height: 18px; padding: 8px 10px; }

/* odds and ends */
.field { display: flex; align-items: center; gap: 6px; padding: 4px 10px; }
.field input[type=text] { flex: 1; height: 21px; border: 0; padding: 2px 4px; font: inherit; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000, inset -2px -2px 0 #dfdfdf; outline: 0; user-select: text; }
fieldset { margin: 6px 10px; border: 0; padding: 8px; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, 1px 1px 0 #fff; }
fieldset legend { padding: 0 3px; }
label.opt { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.helpdoc { flex: 1; background: #fff; overflow-y: auto; padding: 8px 10px; line-height: 1.45; user-select: text; }
.helpdoc h3 { margin: 0 0 6px; font-size: 13px; color: #000080; }
.helpdoc p { margin: 0 0 8px; }
.confetti { position: absolute; z-index: 470; pointer-events: none; font-size: 18px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(520px) rotate(540deg); } }
.matrix { position: absolute; inset: 0; z-index: 480; pointer-events: none; }


/* ---------- Emergency broadcast override ---------- */
.siren { position: absolute; left: 802px; top: 46px; width: 48px; height: 34px; z-index: 5; opacity: 0; transform: translateY(20px) scale(.6); transition: opacity .2s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.siren::before { content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 8px; background: #333; border-radius: 2px; }
.siren i { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 24px; border-radius: 14px 14px 2px 2px; background: radial-gradient(circle at 50% 70%, #fff 0 10%, #ff2020 40%, #a00 100%); box-shadow: 0 0 18px 6px rgba(255,30,30,.7); }
.siren i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 700px; height: 70px; margin: -35px 0 0 0; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255,40,40,.5), transparent 80%); clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 55%); animation: sweep .7s linear infinite; pointer-events: none; }
@keyframes sweep { to { transform: rotate(360deg); } }
#rig.ovr .siren { opacity: 1; transform: none; }
.ovr-flash { position: absolute; inset: -60px; pointer-events: none; z-index: 9; }
#rig.ovr .ovr-flash { animation: redflash .7s steps(2) infinite; }
@keyframes redflash { 50% { background: rgba(255,0,40,.18); } }
.ovr-tape { position: absolute; left: 90px; right: 300px; top: 200px; z-index: 10; padding: 10px; text-align: center; color: #111; background: repeating-linear-gradient(-45deg, #ffd400 0 22px, #111 22px 44px); box-shadow: 0 8px 20px rgba(0,0,0,.6); transform: rotate(-4deg) scaleX(0); transition: transform .3s cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
.ovr-tape b, .ovr-tape span { display: block; width: fit-content; margin: 0 auto; padding: 3px 10px; background: #ffd400; font: bold 20px/1.1 Verdana, sans-serif; letter-spacing: .03em; }
.ovr-tape span { margin-top: 6px; font-size: 13px; background: #111; color: #ffd400; }
.ovr-tape i { font-style: normal; display: inline-block; min-width: 1ch; }
#rig.ovr .ovr-tape { transform: rotate(-4deg) scaleX(1); }
/* the arm reaches in from the right edge; JS sets its height and how far it reaches */
.arm { position: absolute; right: -80px; top: 0; height: 34px; width: 0; z-index: 10; transition: width .9s cubic-bezier(.5,0,.3,1); pointer-events: none; }
.arm-rod { position: absolute; left: 30px; right: 0; top: 12px; height: 10px; background: repeating-linear-gradient(90deg, #9aa 0 14px, #677 14px 18px); border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.arm-hand { position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.5); }
.arm-hand svg { display: block; }
.ovr-tape em { font-style: normal; }
#rig.arm-poke .arm { transition-duration: .15s; }

/* ---------- Portrait frames (phones): monitor on top, speakers and tower on the desk below ---------- */
:root.narrow #rig { width: 720px; height: 1000px; }
:root.narrow .mon { left: 120px; top: 20px; }
:root.narrow .mon-neck { left: 310px; top: 440px; }
:root.narrow .mon-foot { left: 268px; top: 460px; }
:root.narrow .mon-shadow { left: 230px; top: 472px; }
:root.narrow .postit { left: 568px; top: 314px; }
:root.narrow .desk { top: 480px; height: 600px; }
:root.narrow .tower { left: 262px; top: 520px; }
:root.narrow .tower-side { left: 458px; top: 520px; }
:root.narrow .tower-shadow { left: 248px; top: 926px; }
:root.narrow .siren { left: 336px; top: 486px; }
:root.narrow .spk.l { left: 70px; top: 760px; } :root.narrow .spk.r { left: 556px; top: 760px; }
:root.narrow .spk-shadow.l { left: 52px; top: 932px; } :root.narrow .spk-shadow.r { left: 538px; top: 932px; }
:root.narrow .ovr-tape { left: 60px; right: 40px; top: 170px; }

/* ---------- CD player (SmileOS) ---------- */
.cdp { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.cdp .top { display: flex; gap: 6px; }
.cdp .lcd { flex: 1; height: 50px; background: #000; color: #e0e000; font: bold 26px/30px 'Courier New', monospace; padding: 4px 8px; position: relative; overflow: hidden; }
.cdp .lcd small { position: absolute; left: 8px; bottom: 3px; font: 10px Verdana, sans-serif; color: #a0a000; white-space: nowrap; }
.cdp .lcd canvas { position: absolute; right: 4px; top: 4px; width: 90px; height: 30px; }
.cdp .tb2 { display: grid; grid-template-columns: repeat(4, 30px); gap: 2px; }
.cdp .tb2 .btn { min-width: 0; padding: 0; height: 24px; font-size: 11px; }
.cdp .info { display: grid; grid-template-columns: 50px 1fr; gap: 3px 6px; align-items: center; }
.cdp .info .sunken { padding: 2px 4px; height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdp select { width: 100%; font: inherit; height: 20px; }
.icon .ic .lnk svg { width: 11px; height: 11px; }

/* on the home page the desk fades out at the sides instead of ending in a hard edge */
:root.bare .desk { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }

/* the case badge on the bottom drive bay */
.bay.plate { display: flex; align-items: baseline; justify-content: center; gap: 5px; padding-top: 6px; background: linear-gradient(180deg, #e9e2c8, #d9d0b2); }
.bay.plate b { font: italic 900 14px/1 'Arial Black', Arial, sans-serif; color: #2b2b2b; letter-spacing: -.5px; }
.bay.plate i { font: 900 11px/1 'Arial Black', Arial, sans-serif; color: #2b2b2b; font-style: normal; }
.bay.plate small { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 5px/1 Verdana, sans-serif; color: #7a7258; letter-spacing: .2em; text-transform: uppercase; }

/* ---------- BIOS setup utility ---------- */
#setup { background: #0000a8; color: #aaa; font: 15px/18px 'Courier New', 'Lucida Console', monospace; }
#setup .st-head { text-align: center; color: #fff; padding-top: 6px; }
#setup .st-box { position: absolute; left: 16px; right: 16px; top: 52px; bottom: 74px; border: 3px double #aaa; padding: 8px 6px; overflow: hidden; }
#setup .st-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
#setup .it { padding: 0 6px; cursor: pointer; white-space: nowrap; color: #ffff55; }
#setup .it.sel { background: #aa0000; color: #fff; }
#setup .it .v { color: #fff; }
#setup .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 0 6px; cursor: pointer; color: #ffff55; }
#setup .row .v { color: #fff; }
#setup .row.sel { background: #aa0000; }
#setup .row.sel .v { color: #ffff55; }
#setup .row.dis { color: #55ffff; cursor: default; }
#setup .st-foot { position: absolute; left: 16px; right: 16px; bottom: 10px; height: 58px; border: 3px double #aaa; padding: 3px 8px; color: #aaa; font-size: 13px; line-height: 16px; }
#setup .st-foot b { color: #fff; font-weight: normal; }
#setup .st-help { color: #fff; }
#setup .st-dlg { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); background: #aa0000; color: #fff; border: 3px double #fff; padding: 10px 18px; white-space: pre; z-index: 2; }
#setup .st-dlg input { width: 140px; font: inherit; background: #aa0000; color: #fff; border: 0; border-bottom: 1px solid #fff; outline: 0; }
#bios .dellink { cursor: pointer; }
#bios .pw input, #dosmode input.pw { background: transparent; border: 0; color: #fff; font: inherit; outline: 0; width: 120px; -webkit-text-security: disc; }

/* ---------- Netskate Navigator ---------- */
.nav { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.nav-tb { display: flex; gap: 2px; padding: 2px; align-items: stretch; }
.nav-tb .tbb { min-width: 0; width: 44px; height: 38px; padding: 2px 0 0; border: 0; background: #c0c0c0; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 9px; cursor: pointer; }
.nav-tb .tbb:hover { box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff; }
.nav-tb .tbb:active { box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; }
.nav-tb .tbb i { font-style: normal; font-size: 15px; line-height: 18px; }
.nav-tb .tbb[disabled] { color: #808080; }
.nav-throb { margin-left: auto; width: 40px; height: 38px; position: relative; overflow: hidden; background: #000; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; }
.nav-throb::before { content: 'S'; position: absolute; inset: 0; display: grid; place-items: center; font: bold 22px Georgia, serif; color: #5ff6ff; text-shadow: 0 0 6px #5ff6ff; }
.nav-throb i { position: absolute; width: 3px; height: 3px; background: #fff; border-radius: 50%; opacity: 0; }
.nav.busy .nav-throb i { animation: meteor 1s linear infinite; }
.nav-throb i:nth-child(1) { left: 30px; top: 2px; } .nav-throb i:nth-child(2) { left: 22px; top: 0; animation-delay: .3s !important; } .nav-throb i:nth-child(3) { left: 36px; top: 8px; animation-delay: .6s !important; }
@keyframes meteor { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-30px, 30px); } }
.nav-loc { display: flex; align-items: center; gap: 4px; padding: 2px 4px 4px; }
.nav-loc .sunken { flex: 1; height: 20px; padding: 3px 4px; white-space: nowrap; overflow: hidden; font-size: 11px; }
.nav-page { flex: 1; min-height: 0; overflow: auto; background: #fff; margin: 0 2px; font: 13px/1.35 'Times New Roman', Times, serif; color: #000; padding: 8px 10px; user-select: text; }
.nav-page a { color: #0000ee; cursor: pointer; } .nav-page a:visited { color: #551a8b; }
.nav-page h1 { margin: 4px 0 8px; } .nav-page p { margin: 0 0 8px; }
.nav-page .blk { opacity: 0; } .nav-page .blk.in { opacity: 1; }
.nav-page img, .nav-page .pic { display: block; }
.nav-status { display: flex; gap: 2px; margin-top: 2px; }
.nav-status span { padding: 2px 4px; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; white-space: nowrap; overflow: hidden; }
.nav-status .msg { flex: 1; } .nav-status .bar { width: 90px; position: relative; } .nav-status .bar i { position: absolute; left: 2px; top: 3px; bottom: 3px; background: #000080; width: 0; }
/* Yahoot! */
.yh { font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; }
.yh-logo { font: italic 900 46px/1 'Arial Black', Arial, sans-serif; color: #6a1fb0; letter-spacing: -2px; text-shadow: 2px 2px 0 #ffcf3a; margin: 4px 0 2px; }
.yh-tag { font-size: 11px; color: #555; margin-bottom: 8px; }
.yh-search { display: flex; justify-content: center; gap: 4px; margin: 6px 0; }
.yh-search input { width: 220px; font: 12px Arial; background: #fff; color: #000; border: 2px inset #ccc; user-select: text; }
.yh-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; font-size: 11px; }
.yh-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; text-align: left; max-width: 560px; margin: 0 auto; }
.yh-cats b a { font-size: 13px; } .yh-cats div { font-size: 11px; }
.yh-new { margin: 10px auto; padding: 4px; max-width: 560px; border: 1px solid #999; text-align: left; font-size: 11px; background: #ffffe8; }
.yh-ban { margin: 8px auto; width: 468px; max-width: 100%; height: 60px; display: grid; place-items: center; font: bold 16px Arial; color: #fff; background: repeating-linear-gradient(45deg, #ff3fd2 0 12px, #8a5cff 12px 24px); animation: banblink .6s steps(1) infinite; }
@keyframes banblink { 50% { filter: invert(1); } }
.gc { background: #000 url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="40" height="40"%3E%3Ccircle cx="5" cy="7" r="1" fill="white"/%3E%3Ccircle cx="27" cy="21" r="1" fill="%23ffff88"/%3E%3Ccircle cx="14" cy="33" r=".8" fill="white"/%3E%3C/svg%3E'); color: #ffff00; font-family: 'Comic Sans MS', 'Comic Neue', cursive; text-align: center; padding: 10px; min-height: 100%; }
.gc a { color: #00ffff; } .gc h1 { color: #ff00ff; font-size: 26px; }
.gc .uc { display: inline-block; padding: 4px 10px; background: repeating-linear-gradient(-45deg, #ffd400 0 10px, #111 10px 20px); color: #ffd400; font: bold 12px Arial; }
.gc .uc b { background: #111; padding: 2px 6px; }
.gc marquee, .gc .marq { display: block; white-space: nowrap; overflow: hidden; color: #00ff00; }
.gc .marq span { display: inline-block; padding-left: 100%; animation: marq 9s linear infinite; }
.gc .counter { display: inline-block; background: #000; color: #0f0; border: 2px inset #888; font: 14px 'Courier New'; padding: 1px 4px; letter-spacing: 2px; }
.hamster { font-size: 22px; letter-spacing: 4px; }
.hamster span { display: inline-block; animation: prance .35s steps(2) infinite; } .hamster span:nth-child(even) { animation-delay: .17s; }
@keyframes prance { 50% { transform: translateY(-6px) rotate(-10deg); } }
.e404 { font-family: 'Times New Roman', serif; color: #000; } .e404 h1 { font-size: 26px; }

/* ---------- on-screen keyboard ---------- */
.kbtoggle { position: absolute; right: 8px; bottom: 8px; z-index: 99; display: none; width: 34px; height: 26px; padding: 0; font: 16px/1 sans-serif; background: #c0c0c0; border: 2px outset #fff; cursor: pointer; opacity: .75; }
.kbtoggle:hover { opacity: 1; }
:root.screen .kbtoggle, #crt:fullscreen .kbtoggle { display: block; }
:root.osk-on .kbtoggle { bottom: auto; top: 44px; right: 8px; }
.osk { position: absolute; left: 50%; bottom: max(6px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 300; width: min(calc(100% - 8px), 760px); padding: 4px; display: flex; flex-direction: column; gap: 3px;
  background: #c0c0c0; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000, inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 #808080, 0 8px 30px rgba(0,0,0,.55); touch-action: manipulation; }
.osk[hidden] { display: none; }
.osk-row { display: flex; gap: 3px; }
.osk-k { flex: 1 1 0; min-width: 0; height: clamp(28px, 6.2vw, 40px); padding: 0; border: 0; background: #c0c0c0; color: #000; font: 600 clamp(11px, 2.6vw, 15px)/1 Tahoma, Verdana, sans-serif; cursor: pointer; white-space: nowrap; overflow: hidden;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000, inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 #808080; -webkit-user-select: none; user-select: none; }
.osk-k.down, .osk-k.on { box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080; background: #b4b4b4; }
.osk-k.w2 { flex-grow: 1.8; } .osk-k.w3 { flex-grow: 3; font-size: clamp(9px, 2vw, 12px); } .osk-k.space { flex-grow: 7; }
.osk-row:first-child .osk-k { height: clamp(24px, 5vw, 32px); font-size: clamp(9px, 2.2vw, 12px); background: #b8b8b8; }

/* ---------- the room: a dark wall when the whole machine fills the screen, plus deeper shadows ---------- */
:root:not(.bare) #stage, :root.room #stage {
  background: radial-gradient(ellipse 55% 45% at 50% 38%, rgba(255,214,160,.13), transparent 70%), radial-gradient(ellipse 120% 90% at 50% 30%, #2a2730 0%, #17151b 55%, #0a090c 100%); }
:root.room, :root.room body { background: #0a090c; }
:root.room .desk { -webkit-mask-image: none; mask-image: none; }
#rig > .spk, #rig > .tower, #rig > .mon-foot { filter: drop-shadow(0 14px 14px rgba(0,0,0,.45)) drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
#rig > .mon { filter: drop-shadow(0 18px 22px rgba(0,0,0,.5)) drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
#rig > .tower-side { filter: brightness(.82); }
:root.screen #rig > .mon { filter: none; }
:root:not(.bare) .desk::before, :root.room .desk::before { content: ''; position: absolute; left: 0; right: 0; top: -70px; height: 70px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0,0,0,.28)); }
.desk { box-shadow: 0 -1px 0 #55555c, 0 26px 40px rgba(0,0,0,.6); }
.desk::after { box-shadow: inset 0 1px 0 #47474d, 0 18px 30px rgba(0,0,0,.7); }
.shadow { background: radial-gradient(ellipse, rgba(0,0,0,.8), transparent 70%); filter: blur(5px); }
:root.screen .desk::before { display: none; }
#bsod .bsod-link { display: inline-block; background: #aaa; color: #0000aa; padding: 2px 10px; text-decoration: none; cursor: pointer; animation: ledb 1s steps(1) infinite; }
#bsod .bsod-link:hover { background: #fff; animation: none; }

.roomx { display: none; position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; z-index: 250; padding: 4px 10px; font: bold 12px Verdana, sans-serif; color: #000; background: #c0c0c0; border: 2px outset #fff; cursor: pointer; opacity: .8; }
.roomx:hover { opacity: 1; }
:root.room .roomx { display: block; }

/* ---------- photo-real pass: aged ABS plastic, light falling from above-left, real contact shadows ---------- */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tower::after, .spk::after, .mon::after, .mon-foot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background: linear-gradient(118deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 22%, transparent 45%, rgba(90,70,30,.06) 80%, rgba(60,45,20,.14) 100%), var(--grain);
  mix-blend-mode: soft-light; opacity: .9; }
.tower { background: linear-gradient(180deg, #ece4c9 0%, #e2d9bb 55%, #d3c9a8 100%); box-shadow: inset 2px 2px 0 #fbf7ea, inset -2px -1px 0 #a99f80, inset 0 -18px 30px -18px rgba(70,50,10,.25); }
.tower-side { background: linear-gradient(90deg, #bfb593, #d8cfb1 30%, #c9bf9f 85%, #b5ab8a); cursor: pointer; }
.tower-side::after { content: ''; position: absolute; inset: 0; background: var(--grain); mix-blend-mode: soft-light; opacity: .8; }
.tower-side.knock { animation: knock .18s; }
@keyframes knock { 30% { transform: skewY(-12deg) translateX(1.5px); } 60% { transform: skewY(-12deg) translateX(-1px); } }
.screw { position: absolute; z-index: 3; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f2efe6, #a5a091 60%, #6f6a5c); box-shadow: 0 .5px 0 #fff, inset 0 0 0 .5px rgba(0,0,0,.25); }
.screw::after { content: ''; position: absolute; left: 1px; right: 1px; top: 3px; height: 1px; background: #5e594c; transform: rotate(var(--sr, 35deg)); }
.screw.s1 { left: 6px; top: 6px; } .screw.s2 { right: 6px; top: 6px; --sr: -20deg; }
.bay { background: linear-gradient(180deg, #f0e9d4, #dcd3b5); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #9e9476, 0 1px 0 #b3aa8d, 0 2px 3px rgba(60,40,0,.12); }
.mon { background: linear-gradient(180deg, #f0e9d3 0%, #e5ddc4 55%, #d6cdaf 100%); }
.bezel { box-shadow: inset 0 0 0 3px #3a372f, inset 0 0 18px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.35), 0 -1px 0 1px rgba(80,60,20,.2); }
/* curved glass: a soft window reflection and the faint grey of an unlit tube */
#crt::after { content: ''; position: absolute; inset: 0; z-index: 40; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse 70% 45% at 28% 12%, rgba(255,255,255,.11), transparent 60%), radial-gradient(ellipse 120% 100% at 50% 50%, transparent 62%, rgba(0,0,0,.45) 100%); }
#crt:not(.live)::before { content: ''; position: absolute; inset: 0; z-index: 39; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse at 45% 40%, #3a3d3a, #1b1d1b 70%); }
.spk .grill { background: radial-gradient(circle, #6f6852 1.15px, transparent 1.55px) 0 0 / 5px 5px, linear-gradient(180deg, #e8e1cc, #d7cfb5); box-shadow: inset 0 0 0 2px #cfc6a8, inset 0 2px 4px rgba(0,0,0,.18); cursor: pointer; }
.spk .cone { transition: transform .08s; }
.spk.thump .cone { transform: scale(1.08); }
/* the desk: dark walnut laminate with a little grain and sheen */
.desk { background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0, rgba(255,255,255,.04) 3px, transparent 12px),
    repeating-linear-gradient(92deg, rgba(0,0,0,.08) 0 2px, transparent 2px 9px, rgba(255,255,255,.025) 9px 10px, transparent 10px 23px),
    linear-gradient(180deg, #3d2f26 0%, #2c211b 50%, #1d1612 100%); }
.desk::after { background: linear-gradient(180deg, #1b1410, #0e0a08); }
/* light the CRT throws on the desk */
.desk-glow { position: absolute; left: 160px; top: 498px; width: 420px; height: 70px; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(120,170,255,.22), transparent 70%); mix-blend-mode: screen; z-index: 0; }
#rig.lit .desk-glow { opacity: 1; animation: glowflick 4s steps(8) infinite; }
@keyframes glowflick { 50% { opacity: .85; } }
.cables { position: absolute; inset: 0; width: 1000px; height: 600px; pointer-events: none; z-index: 0; }
.cables path { fill: none; stroke: #1a1814; stroke-width: 3.2; stroke-linecap: round; opacity: .85; }
/* the front panel extras: turbo switch and the clock display every 90s case had */
.mhz { position: absolute; left: 22px; top: 132px; padding: 2px 4px 1px; border-radius: 2px; background: #1a0a06; box-shadow: inset 0 1px 2px #000, 0 1px 0 #fff; display: flex; align-items: baseline; gap: 2px; }
.mhz span { font: bold 13px/1 'Courier New', monospace; color: #ff3a24; text-shadow: 0 0 4px #ff3a24; letter-spacing: 1px; }
.mhz small { font: 5px/1 Verdana, sans-serif; color: #b54a30; }
.turbo { position: absolute; right: 24px; top: 136px; width: 18px; height: 9px; }
.turbo[aria-pressed="false"] { box-shadow: inset 1px 1px 2px rgba(0,0,0,.4); transform: translateY(1px); }
.turbo-lbl { position: absolute; right: 21px; top: 148px; font-size: 5px; }
#led-turbo { position: absolute; right: 47px; top: 138px; width: 4px; height: 4px; }
/* keyboard and mouse */
.kbd { position: absolute; z-index: 4; left: 262px; top: 512px; width: 330px; height: 50px; padding: 5px 8px 0; border-radius: 6px 6px 10px 10px;
  background: linear-gradient(180deg, #ede6cf, #d3caab); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 #b3a98a, 0 6px 8px rgba(0,0,0,.55); transform: perspective(300px) rotateX(38deg); transform-origin: 50% 100%; display: flex; flex-direction: column; gap: 1.5px; cursor: pointer; }
.kbd::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--grain); mix-blend-mode: soft-light; pointer-events: none; }
.kr { display: flex; gap: 1.5px; height: 6.5px; }
.kr span { flex: 1; border-radius: 1px; background: linear-gradient(180deg, #faf6ea, #d9d1b6); box-shadow: 0 1px 0 #9f9577; transition: transform .05s; }
.kr:last-child span:nth-child(5) { flex: 6; }
.kr span.hit { transform: translateY(1px); background: #d6cdb0; box-shadow: none; }
.kbled { position: absolute; right: 10px; top: 3px; width: 3px; height: 2px; background: #52ff6a; box-shadow: 0 0 3px #52ff6a; opacity: 0; }
#rig.lit .kbled { opacity: .9; }
.mouse { position: absolute; z-index: 4; left: 640px; top: 520px; width: 30px; height: 40px; border-radius: 14px 14px 16px 16px; background: linear-gradient(180deg, #efe8d2, #cfc5a6); box-shadow: inset 0 1px 0 #fff, 0 6px 7px rgba(0,0,0,.55); transform: perspective(200px) rotateX(35deg); transform-origin: 50% 100%; }
.mouse .mb { position: absolute; top: 3px; width: 11px; height: 12px; background: linear-gradient(180deg, #f6f1e2, #ddd5bb); }
.mouse .mb.l { left: 3px; border-radius: 10px 1px 1px 2px; } .mouse .mb.r { right: 3px; border-radius: 1px 10px 2px 1px; }
.mouse.down .mb.l { background: #d4cbae; }
@media (prefers-reduced-motion: reduce) { #rig.lit .desk-glow { animation: none; } }

/* ---------- photo-real, second pass ---------- */
/* plastic with a faint orange-peel texture, lit from the upper left (an SVG lighting filter, baked into a tile) */
:root { --peel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='3'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='1.4' diffuseConstant='1.1'%3E%3CfeDistantLight azimuth='225' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E"); }
.tower::after, .spk::after, .mon::after, .mon-foot::after {
  background: linear-gradient(118deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.07) 24%, transparent 46%, rgba(90,70,30,.08) 80%, rgba(60,45,20,.18) 100%), var(--peel), var(--grain);
  background-size: auto, 200px 200px, 160px 160px; mix-blend-mode: soft-light; opacity: .85; }
/* the glossy desk mirrors what's standing on it */
#rig > .tower, #rig > .spk, #rig > .mon-foot { -webkit-box-reflect: below 1px linear-gradient(transparent 72%, rgba(255,255,255,.14)); }
/* contact shadows right where things meet the desk */
.tower-shadow { filter: blur(3px); opacity: 1; height: 16px; top: 494px; }
.spk::before { content: ''; position: absolute; left: 4px; right: 4px; bottom: -3px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.55); filter: blur(2px); z-index: -1; }
/* panel seams and edge wear on the case */
.front-lower::after { content: ''; position: absolute; left: 8px; right: 8px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(80,60,20,.35) 20%, rgba(80,60,20,.35) 80%, transparent); }
.tower { border-radius: 6px 3px 3px 6px; }
.tower::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  box-shadow: inset 3px 0 4px -2px rgba(255,255,255,.7), inset -4px 0 6px -3px rgba(70,50,10,.35), inset 0 -6px 8px -4px rgba(70,50,10,.35); }
.mon { box-shadow: inset 2px 2px 0 #fbf8ef, inset -2px -3px 0 #b3aa8c, inset 0 -10px 14px -8px rgba(70,50,10,.3), 0 14px 22px -8px rgba(40,20,0,.5); }
/* the room's key light and a soft vignette */
.keylight { position: absolute; left: -200px; right: -200px; top: -150px; bottom: -40px; pointer-events: none; z-index: 6; mix-blend-mode: soft-light;
  background: radial-gradient(ellipse 70% 60% at 22% 8%, rgba(255,236,200,.55), transparent 60%), radial-gradient(ellipse 90% 80% at 50% 45%, transparent 55%, rgba(0,0,0,.45) 100%); }
:root.screen .keylight, :root.bare .keylight { display: none; }

/* held still while the window is being resized or zoomed */
html.resizing *, html.resizing *::before, html.resizing *::after { animation-play-state: paused !important; }

/* MS-DOS Prompt window for Raincity Rewind */
.dosbox .wb { background: #c0c0c0; }
.dostb { display: flex; align-items: center; gap: 3px; padding: 2px 2px 3px; flex: none; }
.dostb .dosfont { width: 52px; padding: 1px 4px; background: #fff; font: 11px/14px Tahoma, Verdana, sans-serif; color: #000; }
.dostb .dosbtn { width: 20px; height: 18px; display: grid; place-items: center; font: 11px/1 Tahoma, Verdana, sans-serif; color: #000; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080; }
.dosscr { flex: 1; min-height: 0; position: relative; background: #000; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000; padding: 2px; display: flex; }
.dosscr .dosout { flex: 1; font: 12px/14px 'Courier New', 'Lucida Console', monospace; }
.dosscr iframe { flex: 1; width: 100%; height: 100%; border: 0; display: block; background: #000; }

/* the CD-RW drive: its own tray, a blank (teal) CD-R or a burned one */
.tray.tray-rw { top: 96px; }
.tower.rwopen .tray-rw { height: 84px; }
.tower.rwopen .tray-rw.disc::before { content: ''; position: absolute; left: 50%; top: 16px; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, #1a1813 6px, #ddd 7px, #ddd 9px, transparent 10px), conic-gradient(from 40deg, #3fc6c6, #9affff, #2a8a9a, #7affff, #3fc6c6); }
.tower.rwopen .tray-rw.burned::before { background: radial-gradient(circle, #1a1813 6px, #ddd 7px, #ddd 9px, #1f5a6e 10px, #1f5a6e 24px, transparent 25px), conic-gradient(from 40deg, #3fc6c6, #9affff, #2a8a9a, #7affff, #3fc6c6); }

/* app windows with a page inside */
.appframe { flex: 1; width: 100%; height: 100%; border: 0; display: block; background: #000; }

/* Media Player */
.mp-scr { height: 70px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: linear-gradient(180deg, #000060, #000020); color: #fff; font: bold 12px Tahoma, Verdana, sans-serif; margin: 2px; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; }
.mp-logo svg { width: 32px; height: 32px; }
.mp-seek { height: 8px; margin: 6px 4px 2px; position: relative; cursor: pointer; background: #fff; }
.mp-seek i { position: absolute; left: 0; top: 0; bottom: 0; background: #000080; width: 0; }
.mp-ctl { display: flex; align-items: center; gap: 3px; padding: 4px; }
.mp-b { width: 26px; min-width: 0; padding: 2px 0; }
.mp-time { margin-left: auto; font: 11px Tahoma, Verdana, sans-serif; }
.mp-list { height: 92px; overflow: auto; margin: 0 4px 4px; background: #fff; font: 11px Tahoma, Verdana, sans-serif; }
.mp-list div { padding: 1px 4px; cursor: default; white-space: nowrap; }
.mp-list div.cur { background: #000080; color: #fff; }

/* SurrealPlayer G2 */
.surreal .wb { background: linear-gradient(180deg, #2c3e66, #16203a); }
.sp-vid { flex: 1; min-height: 0; margin: 4px; background: #000; display: flex; box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #6a7ba8; }
.sp-vid iframe { flex: 1; width: 100%; height: 100%; border: 0; }
.sp-buf { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #cfe0ff; font: 11px Tahoma, Verdana, sans-serif; }
.sp-buf svg { width: 54px; height: 54px; animation: spSpin 2.4s linear infinite; }
@keyframes spSpin { to { transform: rotate(360deg); } }
.sp-buf p { margin: 0; }
.sp-bar { width: 60%; height: 8px; background: #000; }
.sp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3fa9ff, #ffd84a); }
.sp-ctl { display: flex; align-items: center; gap: 4px; padding: 3px 6px 5px; color: #cfe0ff; font: 11px Tahoma, Verdana, sans-serif; }
.sp-ctl .btn { width: 26px; min-width: 0; padding: 2px 0; }
.sp-clip { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 2px 6px; background: #000; color: #7fd0ff; font-family: 'Courier New', monospace; }
.sp-brand { font: italic 900 15px/1 'Arial Black', Arial, sans-serif; color: #3fa9ff; letter-spacing: -.5px; text-shadow: 1px 1px 0 #000; }

/* Zero Burning ROM */
.zero .wb { background: #c0c0c0; }
.zr-tb { display: flex; align-items: center; gap: 4px; padding: 3px 4px; border-bottom: 1px solid #808080; }
.zr-tb .zr-burn { font-weight: bold; }
.zr-logo { margin-left: auto; font: italic 900 18px/1 'Arial Black', Arial, sans-serif; color: #e0300a; letter-spacing: -1px; text-shadow: 1px 1px 0 #ffd84a; }
.zr-main { flex: 1; min-height: 0; display: flex; gap: 4px; padding: 4px; }
.zr-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font: 11px Tahoma, Verdana, sans-serif; }
.zr-mid { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.zr-mid .btn { min-width: 64px; }
.zr-list { flex: 1; min-height: 0; overflow: auto; background: #fff; }
.zr-row { display: flex; align-items: center; gap: 4px; padding: 1px 3px; cursor: default; white-space: nowrap; }
.zr-row svg { width: 16px; height: 16px; flex: none; }
.zr-row span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.zr-row small { color: #606060; }
.zr-row.pick { background: #000080; color: #fff; } .zr-row.pick small { color: #c0c0ff; }
.zr-row.on span:nth-child(2) { font-weight: bold; }
.zr-hint { margin: 6px; color: #606060; }
.zr-lab { display: flex; align-items: center; gap: 4px; }
.zr-label { flex: 1; min-width: 0; font: 11px Tahoma, Verdana, sans-serif; padding: 1px 3px; }
.zr-meter { position: relative; height: 16px; margin: 0 4px 4px; background: #fff; }
.zr-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(90deg, #000080 0 8px, #fff 8px 10px); }
.zr-meter b { position: absolute; top: 0; bottom: 0; left: 100%; width: 0; }
.zr-meter span { position: absolute; inset: 0; text-align: center; font: bold 11px/16px Tahoma, Verdana, sans-serif; color: #000; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.zr-buf i { background: repeating-linear-gradient(90deg, #008000 0 8px, #fff 8px 10px); }
.zr-log { height: 110px; overflow: auto; background: #fff; font: 11px Tahoma, Verdana, sans-serif; padding: 2px 4px; margin: 4px; }
#zburn small { margin: 0 4px; font: 11px Tahoma, Verdana, sans-serif; }

/* the top of the tower: the side panel leans back, so close the box over it */
.tower-top { position: absolute; left: 728px; top: 67px; width: 254px; height: 14px; z-index: 1; clip-path: polygon(0 100%, 77.2% 100%, 100% 0, 22.8% 0);
  background: linear-gradient(180deg, #f6f0dc, #e4dbbf); box-shadow: inset 0 1px 0 #fff; }
:root.narrow .tower-top { left: 262px; top: 507px; }
:root.screen .tower-top { display: none; }