*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#03040a;overflow-x:hidden}
body{font-family:Helvetica,Arial,sans-serif;color:#9aa}
#viewport{position:relative;width:100vw;overflow:hidden}
#stage{position:absolute;left:0;top:0;width:1600px;height:1000px;transform-origin:0 0;overflow:hidden}
footer{font:12px "Courier New",monospace;text-align:center;color:#4c5a6a;padding:8px}
footer a{color:#6fa8c8}

/* room */
.wall{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 30%,#141a2a 0%,#0a0d17 55%,#04050a 100%)}
.desk{position:absolute;left:-40px;right:-40px;top:690px;bottom:0;background:linear-gradient(180deg,#3a2616 0%,#2b1b0f 30%,#1a1009 100%);transform:perspective(900px) rotateX(18deg);transform-origin:50% 0}
.desk::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(92deg,rgba(0,0,0,.08) 0 3px,transparent 3px 22px),repeating-linear-gradient(88deg,rgba(255,200,140,.03) 0 1px,transparent 1px 40px)}
.desk-edge{position:absolute;left:0;right:0;top:0;height:6px;background:#5a3b22;box-shadow:0 2px 6px rgba(0,0,0,.6)}

/* lighting */
.wall,.desk,#lamp,#o2 .o2-img,#photo,#frankie,#lincoln,#truman-wall,#poster-wall,#keyboard,.crt-body,.crt-bezel,.crt-neck,.crt-foot,.mug,.mousepad,#tray,#wutang{transition:filter .35s}
body.lamp-off .wall,body.lamp-off .desk,body.lamp-off #photo,body.lamp-off #frankie,body.lamp-off #lincoln,body.lamp-off #truman-wall,body.lamp-off #poster-wall,body.lamp-off #keyboard,body.lamp-off .mug,body.lamp-off .mousepad,body.lamp-off #tray,body.lamp-off #wutang{filter:brightness(.38) saturate(.7)}
body.lamp-off #lamp,body.lamp-off #o2 .o2-img,body.lamp-off .crt-body,body.lamp-off .crt-neck,body.lamp-off .crt-foot{filter:brightness(.45) saturate(.75)}
#lightcone{position:absolute;left:0;top:0;width:1600px;height:1000px;pointer-events:none;z-index:30;mix-blend-mode:screen;opacity:0;transition:opacity .25s;
  background:radial-gradient(ellipse 330px 260px at 400px 720px,rgba(255,190,110,.42),rgba(255,160,80,.12) 55%,transparent 75%),
  conic-gradient(from 112deg at 240px 425px,transparent 0deg,rgba(255,200,130,.16) 12deg,rgba(255,200,130,.22) 30deg,rgba(255,200,130,.14) 48deg,transparent 62deg)}
body.lamp-on #lightcone{opacity:1}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:40;background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 50%,rgba(0,0,0,.75) 100%)}

/* lamp */
#lamp{position:absolute;left:30px;top:290px;width:300px;height:450px;cursor:pointer;z-index:12}
.bulb{fill:#3a3020;transition:all .2s}
body.lamp-on .bulb{fill:#fff4d0;filter:drop-shadow(0 0 14px rgba(255,210,140,1))}
#lamp:hover svg{filter:brightness(1.25)}

/* CRT */
#crt{position:absolute;left:420px;top:70px;width:780px;height:680px;z-index:10}
.crt-body{position:absolute;left:90px;top:30px;width:600px;height:520px;border-radius:40px;background:linear-gradient(180deg,#5a5e64,#2b2e33);box-shadow:0 30px 60px rgba(0,0,0,.8)}
.crt-bezel{position:absolute;left:0;top:0;width:780px;height:600px;border-radius:34px;padding:42px 46px 70px;background:linear-gradient(170deg,#6b7078 0%,#4d5157 40%,#33363b 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -6px 14px rgba(0,0,0,.5),0 20px 50px rgba(0,0,0,.8)}
.crt-glass{position:relative;width:100%;height:100%;border-radius:38px/30px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 10px #1a1c20,inset 0 0 50px rgba(0,0,0,.9),0 0 30px rgba(110,170,255,.25)}
#screen{position:absolute;inset:10px;border-radius:30px/24px;overflow:hidden;background:#000}
.scanlines{animation:flicker 4s infinite steps(1)}
.scanlines{position:absolute;inset:0;pointer-events:none;z-index:5;background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);}
.glare{position:absolute;inset:0;pointer-events:none;z-index:6;border-radius:38px/30px;background:radial-gradient(ellipse 60% 40% at 30% 18%,rgba(255,255,255,.10),transparent 60%),radial-gradient(ellipse 120% 120% at 50% 50%,transparent 62%,rgba(0,0,0,.55) 100%);box-shadow:inset 0 0 80px rgba(120,180,255,.10)}
@keyframes flicker{0%{opacity:1}47%{opacity:.985}48%{opacity:1}73%{opacity:.975}74%{opacity:1}}
.crt-badge{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:italic bold 14px Helvetica,Arial;color:#b9bec6;letter-spacing:.5px;text-shadow:0 1px 0 #000}
.crt-led{position:absolute;right:56px;bottom:28px;width:9px;height:9px;border-radius:50%;background:#4f4;box-shadow:0 0 8px #4f4}
.crt-neck{position:absolute;left:300px;top:595px;width:180px;height:40px;background:linear-gradient(#3b3e43,#222428)}
.crt-foot{position:absolute;left:220px;top:628px;width:340px;height:36px;border-radius:50%;background:linear-gradient(#45494f,#1c1e21);box-shadow:0 14px 20px rgba(0,0,0,.8)}

/* O2 */
#o2{position:absolute;left:1235px;top:340px;width:300px;height:387px;z-index:11}
.o2-img{position:absolute;inset:0;width:100%;height:100%;user-select:none;filter:drop-shadow(0 18px 18px rgba(0,0,0,.8));z-index:2}
#cdbtn{position:absolute;left:58.5%;top:9.3%;width:8%;height:5%;border-radius:50%;cursor:pointer;z-index:4}
#cdbtn:hover{box-shadow:0 0 0 2px rgba(120,200,255,.8),0 0 12px rgba(120,200,255,.8)}
.o2-power{position:absolute;left:24%;top:80.5%;width:5%;height:4%;border-radius:50%;box-shadow:0 0 8px 2px rgba(120,255,140,.55);z-index:3;pointer-events:none}
#tray{position:absolute;left:16.5%;top:13.6%;width:52%;height:150px;z-index:3;pointer-events:none}
#tray .tray-clip{position:absolute;inset:0;clip-path:inset(0 -30px -60px -30px)}
#tray::before{content:"";position:absolute;left:3%;right:3%;top:-1px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(#000,rgba(0,0,0,.4));opacity:0;transition:opacity .2s;z-index:1}
#tray.out::before{opacity:1}
#tray .tray-3d{position:absolute;inset:0;perspective:700px;perspective-origin:50% -60px}
#tray .tray-slab{--out:0;position:absolute;left:4%;width:92%;top:0;height:150px;transform-origin:50% 0;transform-style:preserve-3d;
 transform:rotateX(74deg) translateY(calc((var(--out) - 1) * 152px));
 background:linear-gradient(180deg,#0e1118 0%,#1d2330 18%,#262d3b 60%,#1a1f2a 100%);border-radius:0 0 4px 4px;
 box-shadow:inset 0 0 0 1px rgba(150,165,190,.18),inset 0 18px 18px -10px rgba(0,0,0,.85)}
#tray .tray-slab::before{content:"";position:absolute;left:6px;right:6px;top:0;bottom:8px;background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(255,255,255,.025) 11px 12px);pointer-events:none}
#tray .tray-well{position:absolute;left:50%;top:50%;width:128px;height:128px;transform:translate(-50%,-52%);border-radius:50%;
 background:radial-gradient(circle,#0b0d12 0 9%,#1b202a 10% 55%,#141820 70%,#0c0f15 100%);box-shadow:inset 0 3px 6px rgba(0,0,0,.9),0 0 0 1px rgba(160,175,200,.15)}
#tray .disc{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-63px 0 0 -60px;border-radius:50%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,1.4,.5,1);cursor:pointer;pointer-events:none;
 background:radial-gradient(circle,transparent 0 6.5%,rgba(220,228,236,.9) 7% 13%,rgba(160,170,180,.6) 13.5% 15%,transparent 15.5%),
 conic-gradient(from 35deg,#d9dee6,#a8dcff 8%,#f2c8ff 15%,#fff2b5 22%,#bff5d8 30%,#d9dee6 38%,#e8ecf2 50%,#a8dcff 58%,#f2c8ff 66%,#fff2b5 74%,#bff5d8 82%,#d9dee6 100%);
 box-shadow:0 0 0 1px rgba(255,255,255,.55),0 2px 3px rgba(0,0,0,.6)}
#tray .disc::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 0 33%,rgba(255,255,255,.0) 33%),repeating-radial-gradient(circle,rgba(255,255,255,.08) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
#tray .disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%);mix-blend-mode:screen;opacity:.7}
#tray .disc-label{position:absolute;left:50%;top:50%;width:66%;height:66%;transform:translate(-50%,-50%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:9%;box-sizing:border-box;
 background:radial-gradient(circle,transparent 0 21%,#f4f1ea 22% 100%);font:bold 9px/1.05 Helvetica,Arial,sans-serif;color:#273a7a;text-align:center;z-index:1;-webkit-mask:radial-gradient(circle,transparent 0 21%,#000 22%);mask:radial-gradient(circle,transparent 0 21%,#000 22%)}
#tray .disc-label small{font:6px Helvetica,Arial;color:#666}
#tray .disc-label::after{content:"SGI";position:absolute;bottom:13%;font:bold italic 8px Arial;color:#8a2a2a}
#tray .tray-lip{position:absolute;left:-2px;right:-2px;bottom:0;height:13px;transform-origin:50% 100%;transform:rotateX(-90deg);border-radius:0 0 3px 3px;
 background:linear-gradient(180deg,#5a6a88 0%,#3c4862 40%,#273046 100%);box-shadow:inset 0 1px 0 rgba(220,230,255,.35),inset 0 -1px 0 rgba(0,0,0,.6),0 4px 6px rgba(0,0,0,.6)}
#tray .tray-lip i{position:absolute;left:50%;top:4px;width:26%;height:3px;margin-left:-13%;border-radius:2px;background:rgba(10,14,22,.55);box-shadow:0 1px 0 rgba(255,255,255,.12)}
#tray.out .disc{pointer-events:auto}
#tray .disc.lift{transform:translateZ(22px) rotateX(-12deg) rotateZ(14deg)}
#tray.empty .disc{display:none}
.o2-cdled{position:absolute;left:67.2%;top:10.6%;width:1.6%;height:1.2%;border-radius:50%;background:#3a2a10;z-index:3;pointer-events:none}
.o2-cdled.on{animation:cdled .16s steps(2) infinite}
@keyframes cdled{0%{background:#ffb028;box-shadow:0 0 5px 1px #ff9a10}50%{background:#5a3a10;box-shadow:none}}

/* photo */
#photo{position:absolute;left:260px;top:560px;width:150px;height:212px;z-index:14;transform:rotate(-6deg)}
#photo .pwrap{position:relative;width:150px;height:190px}
#photo .plate{margin:5px auto 0;width:90px;padding:2px 0;text-align:center;font:italic bold 10px/12px Georgia,"Times New Roman",serif;letter-spacing:.5px;color:#3d2a08;
  background:linear-gradient(180deg,#f3d98b,#b8892f 55%,#e2bf69);border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.7),inset 0 0 0 1px rgba(90,60,10,.6);text-shadow:0 1px 0 rgba(255,240,200,.6)}
.frame{position:absolute;inset:0;padding:11px;background:linear-gradient(135deg,#6b4423,#3a2210 50%,#5d391b);border-radius:3px;box-shadow:0 12px 20px rgba(0,0,0,.8),inset 0 0 0 2px rgba(255,220,170,.15)}
.mat{width:100%;height:100%;background:#efe8da;padding:8px;box-shadow:inset 0 0 6px rgba(0,0,0,.5)}
.mat img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.18) contrast(1.05);box-shadow:inset 0 0 10px #000}
.stand{position:absolute;right:30px;bottom:-14px;width:12px;height:30px;background:#2a170a;transform:skewX(-20deg);z-index:-1}

/* keyboard etc */
#keyboard{position:absolute;left:500px;top:775px;width:620px;height:160px;z-index:15;transform:perspective(600px) rotateX(38deg);transform-origin:50% 100%;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.10) 0 1px,transparent 1.5px) 0 0/7px 6px,radial-gradient(circle at 70% 60%,rgba(0,0,0,.35) 0 1px,transparent 1.6px) 0 0/5px 7px,radial-gradient(circle at 40% 80%,rgba(255,255,255,.07) 0 .8px,transparent 1.2px) 0 0/3px 4px,linear-gradient(#77777a,#545558);border-radius:9px;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 20px 30px rgba(0,0,0,.8);padding:10px 12px}
.keys{width:100%;height:100%;display:flex;flex-direction:column;gap:3px}
.keys .kr{display:flex;gap:2px;flex:1}.keys .kr:first-child{margin-bottom:4px}
.keys .k{min-width:0;border-radius:3px;background:linear-gradient(#b4b4b8,#8e8f94);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #3b3c40;font:600 5.5px/1 Helvetica,Arial,sans-serif;color:#2a2a2e;padding:2px;overflow:hidden;white-space:nowrap;transition:transform .06s}
.keys .k.m{background:linear-gradient(#55565c,#3c3d42);color:#d9d9de;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 0 #1c1c1f}
.keys .k.sp{background:linear-gradient(#a8a8ad,#86878c)}
.keys .k.gap{background:none;box-shadow:none}
.keys .k.dn{transform:translateY(2px);box-shadow:0 0 0 #000;filter:brightness(.88)}
.keys .k.led,.keys .k.cube{background:none;box-shadow:none;display:flex;align-items:center;gap:6px;justify-content:center}
.keys .led{width:5px;height:3px;border-radius:1px;background:#2a3a2c}.keys .led.on{background:#7dff7a;box-shadow:0 0 4px #5f5}
.emb{display:inline-block;width:9px;height:9px;transform:rotate(45deg);border:1.5px solid #7d6aa8;box-shadow:inset 0 0 0 1.5px #5b8f96;border-radius:1px}
#webcam{position:absolute;left:350px;top:-62px;width:80px;height:70px;z-index:12;cursor:pointer;transition:filter .35s}
#webcam .cam-ball{position:absolute;left:14px;top:0;width:52px;height:46px;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.12) 0 1px,transparent 1.5px) 0 0/5px 5px,radial-gradient(circle at 35% 30%,#9a9aa0,#5d5e63 55%,#35363a);box-shadow:0 6px 10px rgba(0,0,0,.6)}
#webcam .cam-lens{position:absolute;left:13px;top:10px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#2b3550 0 25%,#0b0d14 45%,#2c2d31 62%,#18191c 70%);box-shadow:inset 0 0 0 2px #444}
#webcam .cam-lens i{position:absolute;left:7px;top:6px;width:5px;height:4px;border-radius:50%;background:rgba(200,220,255,.6)}
#webcam .cam-led{position:absolute;right:7px;top:8px;width:4px;height:4px;border-radius:50%;background:#2f7a32;box-shadow:0 0 3px #3f3}
#webcam.rec .cam-led{background:#ff3030;box-shadow:0 0 6px #f22}
#webcam .cam-neck{position:absolute;left:36px;top:44px;width:8px;height:14px;background:linear-gradient(90deg,#3c3d41,#6a6b70,#3c3d41)}
#webcam .cam-base{position:absolute;left:12px;top:56px;width:56px;height:10px;border-radius:5px 5px 2px 2px;background:linear-gradient(#6c6d72,#3f4044)}
body.lamp-off #webcam{filter:brightness(.38) saturate(.7)}
.capture{padding:0!important;background:#000}.cap-feed{position:relative;height:calc(100% - 18px);overflow:hidden}
.cap-feed img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) contrast(1.15) sepia(.2) blur(.4px)}
.cap-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px)}
.cap-ts{position:absolute;left:6px;bottom:5px;color:#fff;font:10px monospace;text-shadow:1px 1px #000}.cap-rec{position:absolute;right:6px;top:5px;color:#f33;font:bold 10px monospace}
.cap-bar{height:18px;font:10px Helvetica;color:#000;background:#c6c6c6;padding:2px 4px}
.mug{position:absolute;left:1150px;top:735px;width:70px;height:84px;z-index:13;border-radius:6px 6px 14px 14px;background:linear-gradient(90deg,#3a0d10,#7a1d22 38%,#8a2228 52%,#2a0709);box-shadow:0 12px 14px rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center}
.mug::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,rgba(0,0,0,.42) 0%,transparent 30%,rgba(255,255,255,.1) 48%,transparent 66%,rgba(0,0,0,.48) 100%)}
.mug::after{content:"";position:absolute;right:-22px;top:18px;width:26px;height:38px;border:8px solid #5a1418;border-left:none;border-radius:0 20px 20px 0;z-index:4}
.mug-rim{position:absolute;left:3px;right:3px;top:3px;height:7px;border-radius:5px 5px 3px 3px;background:radial-gradient(ellipse at 50% 0,#1a0506,#4a1014 70%);box-shadow:inset 0 1px 2px rgba(0,0,0,.55);z-index:2}
.mug-face{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:6px;width:100%;transform:perspective(90px) rotateX(6deg) scaleX(.94)}
.mug-photo{display:block;width:34px;height:34px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px rgba(245,225,180,.55),0 1px 2px rgba(0,0,0,.45);position:relative;flex-shrink:0}
.mug-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block;filter:saturate(.92) contrast(1.05)}
.mug-photo::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(90deg,rgba(0,0,0,.38),transparent 34%,rgba(255,255,255,.14) 50%,transparent 66%,rgba(0,0,0,.42));pointer-events:none}
.mug-txt{font:700 10px/1.05 "Comic Sans MS","Segoe Print","Bradley Hand",cursive;color:#f3e4c4;letter-spacing:.15px;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.5);white-space:nowrap;transform:scaleX(.96)}
.mousepad{position:absolute;left:1260px;top:790px;width:200px;height:130px;z-index:13;background:#151a2a;border-radius:8px;transform:perspective(600px) rotateX(45deg)}
.mouse{position:absolute;left:80px;top:30px;width:46px;height:70px;border-radius:22px 22px 26px 26px;background:linear-gradient(#d8d4c8,#9b978c)}

/* ===== IRIX desktop ===== */
.irix{position:absolute;inset:0;font:12px Helvetica,Arial,sans-serif;color:#000;background:#5b6f8a;background:radial-gradient(ellipse at 50% 40%,#6a7f9c,#465770);overflow:hidden;cursor:default}
.prom{position:absolute;inset:0;background:#000;color:#cfd;font:13px/1.35 "Courier New",monospace;padding:18px 22px;white-space:pre-wrap;text-shadow:0 0 4px rgba(150,255,190,.6)}
.login{position:absolute;inset:0;background:radial-gradient(#3b4b66,#151c2a);display:flex;align-items:center;justify-content:center}
.login .box{background:#b9bcc4;border:2px solid #e8e8e8;border-right-color:#555;border-bottom-color:#555;padding:18px 26px;width:300px;font-size:13px}
.login .box h2{margin:0 0 10px;font:italic bold 18px Helvetica}
.login input{width:100%;font:13px "Courier New",monospace;padding:3px;border:1px inset #888;background:#e9e9e2}
.toolchest{position:absolute;left:8px;top:8px;width:120px;background:#aeb2ba;border:1px solid #333;box-shadow:2px 2px 0 rgba(0,0,0,.35);z-index:5}
.toolchest .tc-title{background:#c9a24b;background:linear-gradient(#d8b25a,#a07a2c);font:bold 11px Helvetica;padding:3px 6px;color:#111}
.toolchest .tc-item{padding:3px 8px;border-top:1px solid #d8dbe0;border-bottom:1px solid #8a8e96;font-size:12px;cursor:pointer}
.toolchest .tc-item:hover{background:#7c95c4;color:#fff}
.icon{position:absolute;width:76px;text-align:center;color:#fff;font-size:11px;text-shadow:1px 1px 1px #000;cursor:pointer;user-select:none}
.icon .glyph{width:44px;height:40px;margin:0 auto 3px;border-radius:3px}
.icon.sel span{background:#2b3f8f}
.g-home{background:linear-gradient(135deg,#e7d18a,#a9893a);clip-path:polygon(0 25%,40% 25%,48% 10%,100% 10%,100% 100%,0 100%)}
.g-trash{background:linear-gradient(90deg,#999,#ddd,#888);clip-path:polygon(10% 10%,90% 10%,80% 100%,20% 100%)}
.g-cd{border-radius:50%!important;width:40px!important;background:conic-gradient(#ddd,#9cf,#f9c,#ff9,#9fc,#ddd);box-shadow:inset 0 0 0 15px rgba(255,255,255,.1),inset 0 0 0 17px #445}
.g-term{background:#111;border:3px solid #aab;box-shadow:inset 0 0 0 2px #333}
.g-term::after{content:">_";color:#7f7;font:bold 12px monospace;display:block;padding:6px 0 0 4px;text-align:left}
.win{position:absolute;background:#a9adb5;border:1px solid #222;box-shadow:3px 3px 0 rgba(0,0,0,.35);display:flex;flex-direction:column;min-width:160px}
.win .tb{height:22px;display:flex;align-items:center;background:linear-gradient(#8fa1c3,#6378a3);border:2px solid #b9c6de;border-right-color:#3b4a6a;border-bottom-color:#3b4a6a;color:#fff;font:bold 12px Helvetica;cursor:move;user-select:none;padding:0 4px;gap:6px}
.win.inactive .tb{background:linear-gradient(#b7bbc3,#959aa3);color:#333}
.win .tb .t{flex:1;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,.4)}
.win .tb .b{width:14px;height:12px;background:#a9adb5;border:1px solid #eee;border-right-color:#444;border-bottom-color:#444;cursor:pointer}
.win .body{flex:1;margin:4px;border:1px solid #555;overflow:auto;background:#d5d7db}
.term{background:#000!important;color:#e8e8e8;font:12px/1.3 "Courier New",monospace;padding:4px;white-space:pre-wrap;word-break:break-all}
.term .p{color:#9fe8c0}
.term input{background:transparent;border:none;outline:none;color:#e8e8e8;font:inherit;width:60%;caret-color:#9fe8c0}
.fm{display:flex;flex-wrap:wrap;gap:8px;padding:8px}
.fm .icon{position:static;color:#000;text-shadow:none}
.notes{padding:8px;font:12px/1.4 "Courier New",monospace;white-space:pre-wrap}
@media (max-width:700px){footer{font-size:10px}}

body.lamp-off .crt-bezel{background:linear-gradient(170deg,#33363b 0%,#26282c 40%,#191a1d 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.06),0 20px 50px rgba(0,0,0,.8)}
.crt-bezel{transition:background .35s}
body.lamp-off .crt-badge{color:#6a6e75}

/* zoom */
#stage{transition:transform .7s cubic-bezier(.6,.05,.25,1),left .7s}
body.zoomed{overflow:hidden}
body.zoomed #viewport{position:fixed;inset:0;height:auto!important;z-index:1000;background:#000}
#crt{cursor:zoom-in}
#crt #screen{cursor:default}
body.zoomed #crt{cursor:default}
#zoombtn{position:absolute;right:84px;bottom:22px;width:24px;height:20px;padding:0;border:1px solid #2a2d31;border-radius:4px;background:linear-gradient(#5e636a,#3a3d42);color:#c8ccd3;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.75}
#zoombtn:hover{opacity:1;color:#fff}
body.zoomed #zoombtn{display:none}
#zoombar{position:fixed;top:12px;right:12px;z-index:2000;display:none;gap:8px}
body.zoomed #zoombar{display:flex}
#zoombar button{font:12px Helvetica,Arial,sans-serif;color:#dfe6ef;background:rgba(30,36,48,.82);border:1px solid #56627a;border-radius:4px;padding:6px 10px;cursor:pointer}
#zoombar button:hover{background:rgba(70,90,130,.9)}
#zoombar.nofs #fsbtn{display:none}
body.zoomed .vignette,body.zoomed #lightcone{opacity:0!important}

.win .rz{position:absolute;right:0;bottom:0;width:12px;height:12px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,#555 50%,#555 60%,transparent 60%,transparent 70%,#555 70%,#555 80%,transparent 80%)}
/* ===== Netscape 4.x ===== */
.g-ns{background:radial-gradient(circle at 70% 30%,#2a4fa8,#0b1a4a 70%);border:2px solid #c7cbd3;border-right-color:#555;border-bottom-color:#555;position:relative;overflow:hidden}
.g-ns::before{content:"N";position:absolute;left:0;right:0;top:3px;font:bold 30px "Times New Roman",serif;color:#e8eefc;text-shadow:2px 2px 0 #000}
.g-ns::after{content:"";position:absolute;left:4px;top:5px;width:22px;height:2px;background:linear-gradient(90deg,transparent,#fff);transform:rotate(25deg);box-shadow:0 0 4px #fff}
.ns.body{background:#c0c0c0!important;display:flex;flex-direction:column;overflow:hidden;position:relative;margin:2px!important;font:11px Helvetica,Arial,sans-serif}
.ns-menu{display:flex;gap:12px;padding:2px 6px;border-bottom:1px solid #888}
.ns-menu span:first-letter{text-decoration:underline}
.ns-bars{display:flex;border-bottom:1px solid #fff}
.ns-left{flex:1;min-width:0}
.ns-tb{display:flex;padding:2px;gap:1px;border-bottom:1px solid #888;box-shadow:0 1px 0 #fff}
.ns-btn{flex:0 0 auto;width:52px;height:38px;background:#c0c0c0;border:1px solid transparent;font:10px Helvetica,Arial;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;color:#000;cursor:pointer}
.ns-btn:hover{border-color:#fff #555 #555 #fff}
.ns-btn:disabled{color:#888;cursor:default;border-color:transparent}
.ns-btn:disabled .ns-g{opacity:.4}
.ns-g{font-style:normal;font-size:15px;line-height:18px;height:18px;color:#1c3d8c}
.ns-g-Netscape{font:bold 15px "Times New Roman",serif;color:#000}
.ns-g-Stop{color:#c00}
.ns-loc{display:flex;align-items:center;gap:4px;padding:3px 4px;border-bottom:1px solid #888;box-shadow:0 1px 0 #fff}
.ns-loc button{font:10px Helvetica;background:#c0c0c0;border:1px solid;border-color:#fff #555 #555 #fff;padding:1px 4px}
.ns-ll{font-size:11px}
.ns-url{flex:1;min-width:60px;font:12px Helvetica,Arial;border:2px inset #ddd;padding:1px 3px;background:#fff}
.ns-pt{display:flex;gap:14px;padding:2px 8px;font-size:10px}
.ns-pt span::before{content:"▤ ";color:#666}
.ns-throb{position:relative;width:44px;height:44px;margin:3px;flex:0 0 auto;border:2px inset #ddd;background:radial-gradient(circle at 50% 120%,#1b3b8a,#000824 70%);overflow:hidden}
.ns-throb b{position:absolute;inset:0;text-align:center;font:bold 30px/44px "Times New Roman",serif;color:#dfe6ff;text-shadow:1px 1px 0 #000}
.ns-throb i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 3px #fff;opacity:0}
.ns-throb .c1{left:6px;top:8px}.ns-throb .c2{left:30px;top:14px}.ns-throb .c3{left:12px;top:30px}
.ns-throb.busy i{animation:comet 0.9s linear infinite}
.ns-throb.busy .c2{animation-delay:.3s}.ns-throb.busy .c3{animation-delay:.6s}
.ns-throb.busy b{animation:npulse .9s ease-in-out infinite}
@keyframes comet{0%{opacity:0;transform:translate(-14px,-10px)}20%{opacity:1}100%{opacity:0;transform:translate(26px,18px);box-shadow:-6px -4px 3px #9cf,-12px -8px 2px rgba(150,200,255,.4)}}
@keyframes npulse{50%{color:#fff;text-shadow:0 0 8px #9cf}}
.ns-view{flex:1;overflow:auto;background:#fff;border:2px inset #ddd;margin:0 2px}
.ns-page{min-height:100%}
.ns-status{display:flex;align-items:center;gap:4px;padding:2px;font-size:10px;border-top:1px solid #fff}
.ns-status>span{border:1px inset #ddd;padding:1px 3px;height:15px}
.ns-prog{width:70px;position:relative}.ns-prog i{position:absolute;left:0;top:0;bottom:0;background:#000080;width:0}
.ns-msg{flex:1;overflow:hidden;white-space:nowrap}
.ns-dlg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.08);z-index:5}
.ns-dlg-box{background:#c0c0c0;border:1px solid #000;box-shadow:3px 3px 0 rgba(0,0,0,.4);width:330px}
.ns-dlg-box .tb{cursor:default}
.ns-dlg-b{display:flex;gap:12px;padding:12px;font:12px Helvetica}
.ns-dlg-i{flex:0 0 32px;height:32px;border-radius:50%;background:#ffd800;border:2px solid #000;font:bold 22px/30px Helvetica;text-align:center}
.ns-dlg-f{text-align:center;padding-bottom:10px}.ns-dlg-f button{width:70px;font:12px Helvetica;background:#c0c0c0;border:2px outset #eee}
/* 1998 page rendering */
.y{font:13px/1.25 "Times New Roman",Times,serif;color:#000;background:#fff;padding:6px 8px;min-height:100%}
.y a{color:#0000ee}.y a:visited{color:#551a8b}
.y font[size="-1"]{font-size:11px}
.y ul{margin:4px 0 8px;padding-left:22px}
.y-top td{font:bold 11px Arial,Helvetica,sans-serif;text-align:center;vertical-align:bottom}
.y-logo{display:inline-block;font:italic 900 46px/1 "Times New Roman",Georgia,serif;letter-spacing:-1px;transform:skewX(-6deg);padding:2px 4px}
.y-w{color:#e00;text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.y-x{color:#e00;text-shadow:2px 2px 0 #000,-1px -1px 0 #000}
.y-sm{font-size:28px}
.y-s{margin:6px 0}
.y-q{font:13px "Courier New",monospace;border:2px inset #ccc}
.y-b{font:12px Helvetica,Arial;background:#ddd;border:2px outset #eee}
.y-dir{border-collapse:collapse}
.y-cat{font-size:15px}
.y-side{background:#dcdcdc;border:1px solid #999;font:12px Arial,Helvetica}
.y-side th{background:#a0b8c8;font:bold 12px Arial;text-align:left}
.y-hd{color:#000;background:#dcdcdc;display:block;padding:2px}
.y-sites li{margin-bottom:4px}
.y-cool{display:inline-block;width:28px;height:12px;background:linear-gradient(#ff0,#f80);vertical-align:middle}
/* Music / CD Player */
.g-music{background:radial-gradient(circle at 50% 50%,#334 0 4px,transparent 5px),conic-gradient(#ddd,#9cf,#f9c,#ff9,#9fc,#ddd);border-radius:50%!important;width:40px!important;position:relative}
.g-music::after{content:"\266B";position:absolute;right:-10px;bottom:-4px;font:bold 22px serif;color:#ffd84a;text-shadow:1px 1px 0 #000}
.win .body.cdp{background:#8c919a;display:flex;flex-direction:column;gap:4px;padding:4px;overflow:hidden}
.cdp-lcd{background:#0b1a10;color:#5cff8a;font:12px monospace;padding:4px 6px;border:2px inset #666;display:flex;gap:10px;flex-wrap:wrap;text-shadow:0 0 4px #2f8}
.cdp-name{flex-basis:100%;color:#b6ffc8}
.cdp-vid{flex:1;background:#000;border:2px inset #555;min-height:0}
.cdp-vid iframe{width:100%;height:100%;display:block;border:0}
.cdp-ctl{display:flex;gap:3px;align-items:center}
.cdp-ctl span{width:28px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;background:#b8bcc4;border:1px solid #eee;border-right-color:#444;border-bottom-color:#444;color:#222}
.cdp-ctl span.on{color:#0a4}
.cdp-ctl em{margin-left:auto;font:italic 11px Helvetica;color:#222}
/* Doom (original icon: red visor helmet + flame, CSS only) */
.g-doom{position:relative;background:radial-gradient(ellipse 60% 22% at 50% 52%,#ff3b1f 0 60%,#600 61% 70%,transparent 71%),radial-gradient(ellipse 48% 52% at 50% 55%,#6c7a5a,#2c3424 70%,transparent 72%),linear-gradient(#ff9c1a,#b31b00);border:2px solid #222;border-radius:4px!important}
.g-doom::after{content:"";position:absolute;left:8px;right:8px;bottom:2px;height:5px;background:#1a1a1a;border-radius:2px}
.win .body.doomb{display:flex;flex-direction:column;overflow:hidden;background:#8c919a;padding:2px;gap:2px}
.doom-bar{display:flex;gap:3px;align-items:center}
.doom-bar button{font:11px Helvetica;background:#b8bcc4;border:1px solid #eee;border-right-color:#444;border-bottom-color:#444;padding:2px 6px;cursor:pointer}
.doom-bar button.on{background:#7f8fb0;color:#fff}
.doom-sp{flex:1}
.doom-view{flex:1;min-height:0;background:#000;border:2px inset #555;position:relative}
.doom-view iframe{width:100%;height:100%;border:0;display:block}
.doom-view:fullscreen{border:0}
.doom-pick{color:#ddd;font:12px Helvetica;text-align:center;padding:14px}
.doom-logo{font:italic 900 46px Impact,"Arial Black",sans-serif;color:#d22;letter-spacing:2px;text-shadow:3px 3px 0 #500,0 0 12px #f40;transform:perspective(200px) rotateX(18deg)}
.doom-k{color:#9a9;font-size:11px}
/* SoftWindows (original icon: beige PC with 4-pane window on SGI-blue tile) */
.g-softwin{position:relative;background:linear-gradient(135deg,#3b5ca8,#1c2f66);border:2px solid #c7cbd3;border-right-color:#555;border-bottom-color:#555}
.g-softwin::before{content:"";position:absolute;left:8px;top:5px;width:24px;height:18px;background:#e8e0c8;border:2px solid #8d8470;box-shadow:inset 0 0 0 2px #e8e0c8,inset 0 0 0 10px #108080}
.g-softwin::after{content:"";position:absolute;left:15px;top:10px;width:5px;height:4px;background:#f33;box-shadow:6px 0 #3c3,0 5px #36f,6px 5px #fc0}
.win .body.swb{display:flex;flex-direction:column;overflow:hidden;background:#8c919a;padding:2px;gap:2px}
.sw-bar{display:flex;gap:4px;align-items:center;font:10px Helvetica;color:#222}
.sw-bar button{font:11px Helvetica;background:#b8bcc4;border:1px solid #eee;border-right-color:#444;border-bottom-color:#444;padding:1px 6px;cursor:pointer}
.sw-led{width:8px;height:8px;border-radius:50%;background:#3f3;box-shadow:0 0 4px #3f3}
.sw-scr{flex:1;min-height:0;position:relative;background:#000;border:2px inset #555;overflow:hidden;outline:none;font-family:"Courier New",monospace}
.sw-scr:fullscreen{border:0}
.sw-dos{position:absolute;inset:0;color:#c0c0c0;font:bold 13px/15px "Courier New",monospace;padding:4px 6px;overflow:auto;white-space:pre}
.sw-cur{animation:swb 1s steps(1) infinite}@keyframes swb{50%{opacity:0}}
.sw-splash{position:absolute;inset:0;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font:bold 26px Arial}
.sw-splash small{font-size:14px;font-style:italic}.sw-st2{font:13px Arial;color:#aaa;margin-top:6px}
.sw-flag{display:grid;grid-template-columns:24px 24px;gap:3px;transform:skewY(-8deg);margin-bottom:12px}.sw-flag i{height:20px;display:block}
.sw-flag i:nth-child(1){background:#e33}.sw-flag i:nth-child(2){background:#3b3}.sw-flag i:nth-child(3){background:#36e}.sw-flag i:nth-child(4){background:#ec2}
.w3-desk{position:absolute;inset:0;background:#008080;font:bold 11px Arial,Helvetica,sans-serif;color:#000;user-select:none;overflow:hidden}
.w3w{position:absolute;background:#fff;border:3px solid #c0c0c0;outline:1px solid #000;display:flex;flex-direction:column;min-width:100px}
.w3w.min{height:20px!important;overflow:hidden}
.w3t{height:18px;flex:none;display:flex;align-items:stretch;background:#fff;color:#000;border-bottom:1px solid #000}
.w3w.act>.w3t{background:#000080;color:#fff}
.w3tt{flex:1;text-align:center;line-height:18px;white-space:nowrap;overflow:hidden;cursor:default}
.w3sys,.w3mn,.w3mx{width:18px;flex:none;background:#c0c0c0;border:1px solid #000;box-sizing:border-box;cursor:pointer;position:relative}
.w3sys::after{content:"";position:absolute;left:3px;right:3px;top:7px;height:3px;background:#fff;border:1px solid #000;box-shadow:1px 1px #555}
.w3mn::after,.w3mx::after{content:"";position:absolute;left:5px;border:4px solid transparent}
.w3mn::after{top:6px;border-top:5px solid #000}.w3mx::after{top:1px;border-bottom:5px solid #000}
.w3menu{display:flex;gap:2px;padding:1px 2px;border-bottom:1px solid #000;background:#fff;flex:none;font-weight:normal}
.w3mi{padding:1px 5px;cursor:default}.w3mi:hover{background:#000080;color:#fff}
.w3dd{position:absolute;z-index:99;background:#fff;border:1px solid #000;box-shadow:2px 2px 0 #000;min-width:140px;padding:2px 0;font-weight:normal}
.w3di{padding:2px 16px;white-space:nowrap}.w3di:hover{background:#000080;color:#fff}.w3sep{border-top:1px solid #000;margin:3px 0}
.w3b{flex:1;min-height:0;position:relative;overflow:hidden;background:#fff}
.w3rz{position:absolute;right:-3px;bottom:-3px;width:10px;height:10px;cursor:nwse-resize}
.w3mdi{background:#fff}
.w3grp .w3b{overflow:auto}
.w3icons{display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;padding:4px}
.w3ic{width:70px;text-align:center;font-weight:normal;cursor:default}
.w3ic span{display:inline-block;padding:0 2px}.w3ic.sel span{background:#000080;color:#fff}
.w3ic i{display:block;width:32px;height:32px;margin:0 auto 2px;position:relative;image-rendering:pixelated}
.i-fm{background:linear-gradient(#ee4,#cc2) 0 8px/26px 20px no-repeat;border-top:6px solid transparent}
.i-fm::after{content:"";position:absolute;left:4px;top:-2px;width:10px;height:5px;background:#ee4;border:1px solid #000}
.i-cp{background:#c0c0c0;border:2px solid #000;box-shadow:inset 6px 6px 0 #00f,inset -6px -6px 0 #f00}
.i-dos{background:#000;border:2px solid #888;color:#fff}.i-dos::after{content:"C:\\>";position:absolute;left:2px;top:9px;font:bold 9px monospace;color:#fff}
.i-np{background:repeating-linear-gradient(#fff 0 4px,#99f 4px 5px);border:1px solid #000;width:24px!important}
.i-wr{background:repeating-linear-gradient(#fff 0 4px,#000 4px 5px);border:1px solid #000;width:24px!important;box-shadow:3px 3px 0 #08f}
.i-calc{background:#888;border:2px solid #000;width:24px!important;box-shadow:inset 0 0 0 3px #888,inset 0 -18px 0 0 #ccc}
.i-calc::after{content:"";position:absolute;left:5px;top:3px;width:11px;height:5px;background:#9f9}
.i-clk{border-radius:50%;background:#fff;border:3px solid #008080}.i-clk::after{content:"";position:absolute;left:12px;top:4px;width:2px;height:10px;background:#000;box-shadow:4px 8px 0 -0px #000}
.i-sol{background:#fff;border:1px solid #000;width:22px!important;box-shadow:6px 4px 0 -1px #00a,6px 4px 0 0 #000}.i-sol::after{content:"♥";position:absolute;left:3px;top:4px;color:#d00;font-size:14px}
.w3np .w3b{display:flex}.w3ta{flex:1;border:0;resize:none;font:13px "Courier New",monospace;outline:none;padding:2px}
.w3calc .w3b{background:#c0c0c0;padding:6px}.w3disp{background:#fff;border:2px inset #ddd;text-align:right;padding:2px 4px;font:14px "Courier New",monospace;margin-bottom:6px}
.w3keys{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.w3btn{font:bold 11px Arial;background:#c0c0c0;border:2px solid #fff;border-right-color:#555;border-bottom-color:#555;outline:1px solid #000;padding:3px 0;cursor:pointer;min-width:30px}
.w3btn.red{color:#c00}.w3btn:active{border-color:#555 #fff #fff #555}
.w3clk .w3b canvas{display:block}
.w3fm .w3b{display:flex;flex-direction:column;font-weight:normal}
.w3drv{padding:2px 4px;border-bottom:1px solid #000}.w3drv span{border:1px solid transparent;padding:0 3px}.w3drv span.on{border-color:#000}
.w3split{flex:1;display:flex;min-height:0}.w3tree{width:40%;border-right:3px double #000;overflow:auto}.w3list{flex:1;overflow:auto;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start}
.w3tree div{padding:1px 4px;white-space:nowrap;cursor:default}.w3tree div.sel{background:#000080;color:#fff}
.w3fe{padding:1px 6px;white-space:nowrap}.w3stat{border-top:1px solid #000;padding:1px 4px}
.fdir,.ffile{display:inline-block;width:12px;height:9px;margin-right:4px;vertical-align:middle}.fdir{background:#ee4;border:1px solid #000}.ffile{background:#fff;border:1px solid #000;width:8px;height:10px}
.w3modal{position:absolute;inset:0;z-index:9999}
.w3dlg .w3b{background:#c0c0c0;font-weight:normal;display:flex;flex-direction:column;justify-content:space-between;padding:8px}
.w3msg{display:flex;gap:10px;align-items:center}.w3ex{flex:none;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid #000;font:bold 18px/26px serif;text-align:center;font-style:normal}
.w3btns{display:flex;justify-content:center;gap:10px}.w3btns .w3btn{width:70px}
.w3sol .w3b{background:#008000}
.sc{position:absolute;width:var(--cw);height:var(--ch);border:1px solid #000;border-radius:3px;background:#fff;font:bold 11px Arial;cursor:pointer;box-sizing:border-box}
.sc.r{color:#d00}.sc.b{color:#000}.sc b{position:absolute;left:2px;top:1px}.sc b.br{left:auto;top:auto;right:2px;bottom:1px;transform:rotate(180deg)}
.sc em{position:absolute;left:0;right:0;top:35%;text-align:center;font-style:normal;font-size:calc(var(--cw)*.45)}
.sc.bk{background:repeating-linear-gradient(45deg,#1a3fae 0 3px,#4d7bea 3px 6px);box-shadow:inset 0 0 0 2px #fff}
.sc.slot{background:transparent;border:1px solid #0a5;color:#9f9;text-align:center;line-height:var(--ch);font-size:18px}
.sc.sel{filter:invert(1)}
.sstat{position:absolute;right:6px;bottom:2px;color:#fff;font:11px Arial}
.swin{position:absolute;left:0;right:0;top:45%;text-align:center;color:#ff0;font:bold 16px Arial;text-shadow:1px 1px #000}

/* second frame: Frankie Baby (French bulldog) */
#frankie{position:absolute;left:1012px;top:652px;width:100px;height:146px;z-index:14;transform:rotate(4deg)}
#frankie .fwrap{position:relative;width:100px;height:122px}
#frankie .frame{padding:7px;background:linear-gradient(135deg,#2b2b2e,#111 50%,#3a3a3e)}
#frankie .mat{padding:5px}
#frankie .stand{left:24px;right:auto;transform:skewX(20deg)}
#frankie .plate{margin:5px auto 0;width:84px;padding:2px 0;text-align:center;font:italic bold 10px/12px Georgia,"Times New Roman",serif;letter-spacing:.5px;color:#3d2a08;
  background:linear-gradient(180deg,#f3d98b,#b8892f 55%,#e2bf69);border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.7),inset 0 0 0 1px rgba(90,60,10,.6);text-shadow:0 1px 0 rgba(255,240,200,.6)}

/* DOOM paint fix: no blend/opacity groups over the WebGL iframe; give it its own compositor layer */
#lightcone{visibility:hidden;transition:opacity .25s,visibility 0s .25s}
body.lamp-on:not(.zoomed) #lightcone{visibility:visible;transition:opacity .25s,visibility 0s}
.doom-view{isolation:isolate;contain:paint}
.doom-view iframe{transform:translateZ(0);will-change:transform;backface-visibility:hidden}

/* third frame: Lincoln (Nova's older brother) */
#lincoln{position:absolute;left:420px;top:575px;width:120px;height:170px;z-index:14;transform:rotate(3deg)}
#lincoln .lwrap{position:relative;width:120px;height:150px}
#lincoln .frame{padding:9px}
#lincoln .mat{padding:6px}
#lincoln .stand{left:26px;right:auto;transform:skewX(20deg)}
#lincoln .plate{margin:5px auto 0;width:80px;padding:2px 0;text-align:center;font:italic bold 10px/12px Georgia,"Times New Roman",serif;letter-spacing:.5px;color:#3d2a08;
  background:linear-gradient(180deg,#f3d98b,#b8892f 55%,#e2bf69);border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.7),inset 0 0 0 1px rgba(90,60,10,.6);text-shadow:0 1px 0 rgba(255,240,200,.6)}

/* wall portrait: Truman (gallery hang, upper back wall) */
#truman-wall{position:absolute;left:88px;top:42px;width:218px;height:148px;z-index:4;transform:rotate(-1.5deg);pointer-events:none}
#truman-wall .twrap{position:relative;width:218px;height:148px}
#truman-wall .frame{padding:9px;background:linear-gradient(145deg,#3a3228,#1a1410 42%,#4a3c2e 78%,#2a2218);border-radius:2px;box-shadow:0 14px 32px rgba(0,0,0,.72),0 3px 8px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,220,170,.12),inset 0 1px 0 rgba(255,255,255,.08)}
#truman-wall .mat{padding:11px;background:linear-gradient(180deg,#efe8da,#e4dcc8);box-shadow:inset 0 0 8px rgba(0,0,0,.35)}
#truman-wall .mat img{filter:contrast(1.04) saturate(1.05);object-fit:cover}

/* travel poster: upper back wall, right (unframed, taped corners) */
#poster-wall{position:absolute;right:55px;top:58px;width:300px;height:169px;z-index:4;transform:rotate(1.6deg);pointer-events:none}
#poster-wall .p-sheet{position:relative;width:100%;height:100%;background:#f4f0e6;padding:5px;box-shadow:2px 10px 18px rgba(0,0,0,.55),0 3px 6px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.55);border-radius:1px}
#poster-wall .p-sheet::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:1px;box-shadow:inset -10px 0 14px -12px rgba(0,0,0,.28),inset 8px 0 12px -12px rgba(0,0,0,.18);transform-origin:left center}
#poster-wall .p-sheet img{display:block;width:100%;height:100%;object-fit:cover;border:1px solid rgba(40,30,20,.18);box-shadow:inset 0 0 12px rgba(0,0,0,.12)}
#poster-wall .pin{position:absolute;width:14px;height:14px;z-index:2;background:linear-gradient(145deg,rgba(255,250,230,.78),rgba(210,190,140,.55));border:1px solid rgba(120,100,60,.35);box-shadow:0 1px 2px rgba(0,0,0,.35);transform:rotate(45deg)}
#poster-wall .pin.tl{left:-3px;top:-3px}
#poster-wall .pin.tr{right:-3px;top:-3px}
#poster-wall .pin.bl{left:-3px;bottom:-3px}
#poster-wall .pin.br{right:-3px;bottom:-3px}

/* ---- WebGL demos / jurassic.sys / Movies ---- */
.win .body.glb{display:flex;flex-direction:column;overflow:hidden;background:#8c919a;padding:2px;gap:2px}
.gl-bar{display:flex;gap:3px;align-items:center;flex-wrap:nowrap;overflow:hidden}
.gl-bar button{font:11px Helvetica;background:#b8bcc4;border:1px solid #eee;border-right-color:#444;border-bottom-color:#444;padding:1px 6px;cursor:pointer;white-space:nowrap}
.gl-bar button.on{background:#7f8fb0;color:#fff}.gl-extra{display:flex;gap:3px}.gl-sp{flex:1}
.gl-fps{font:11px Courier,monospace;color:#0a3;background:#111;padding:1px 5px;min-width:52px;text-align:right}
.gl-view{flex:1;min-height:0;position:relative;background:#000;border:2px inset #555;outline:none;isolation:isolate;contain:paint;overflow:hidden}
.gl-view canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transform:translateZ(0);will-change:transform;backface-visibility:hidden;touch-action:none;cursor:grab}
.gl-view:fullscreen{border:0}.gl-ov{position:absolute;inset:0;pointer-events:none;overflow:hidden;font:11px Helvetica}
.gl-cap{position:absolute;left:6px;bottom:5px;color:#cde;text-shadow:1px 1px 0 #000;font-size:10px}
.gl-err{color:#fff;padding:20px}
.cube-logo{position:absolute;left:0;right:0;bottom:22px;text-align:center;font:italic 900 28px "Arial Black",Helvetica,sans-serif;letter-spacing:3px;color:#dfe6f2;background:linear-gradient(#fff,#9aa8c0 48%,#3c4660 52%,#c8d2e6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 2px #000)}
.cube-tag{position:absolute;left:0;right:0;bottom:8px;text-align:center;color:#9cf;font:italic 12px Georgia,serif;letter-spacing:2px;opacity:0;transition:opacity 1.5s}.cube-tag.on{opacity:1}
.fsn-top{position:absolute;left:0;right:0;top:0;padding:3px 6px;background:rgba(10,20,60,.75);color:#fff;font:bold 12px Helvetica;border-bottom:1px solid #58f;white-space:nowrap;overflow:hidden}
.fsn-path{color:#ffd860;margin-left:6px}.fsn-hint{float:right;font-weight:normal;font-size:10px;color:#9ab}
.fsn-l{position:absolute;left:0;top:0;color:#fff;font:bold 11px Helvetica;text-shadow:1px 1px 1px #000,0 0 3px #000;white-space:nowrap;transform-origin:50% 100%}
.fsn-l.cur{color:#ffd860}.fsn-l.f{font:9px Helvetica;color:#cfe}
.fsn-msg{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);padding:8px 16px;font:bold 18px Courier,monospace;opacity:0;transition:opacity .3s;background:rgba(0,0,0,.8);border:2px solid #888;color:#fff}
.fsn-msg.on{opacity:1}.fsn-msg.ok{color:#5f8;border-color:#5f8;animation:fsnb .4s steps(2) 4}.fsn-msg.bad{color:#f55;border-color:#f55}
@keyframes fsnb{50%{opacity:.3}}
.win .body.mword{background:#111;display:flex;align-items:center;justify-content:center;overflow:hidden}.mword canvas{image-rendering:pixelated;width:160px;height:170px}
.toolchest .tc-sub{display:none;background:#9ea3ad}.toolchest .tc-sub.open{display:block}.toolchest .tc-sub .tc-item{padding-left:18px;font-size:11px}
.win .body.mvp{display:flex;flex-direction:column;background:#a9adb5;overflow:hidden;gap:3px;padding:2px}
.mvp-vid{flex:1;min-height:0;background:#000;border:2px inset #555;isolation:isolate;contain:paint}.mvp-vid iframe{width:100%;height:100%;border:0;display:block;transform:translateZ(0)}
.mvp-ctl{display:flex;align-items:center;gap:5px;font-size:13px}.mvp-ctl span{background:#c3c6cc;border:1px solid #eee;border-right-color:#555;border-bottom-color:#555;padding:0 5px;cursor:default}.mvp-ctl span.on{color:#2a7}
.mvp-scrub{flex:1;height:6px;background:#555;border:1px inset #333}.mvp-scrub i{display:block;width:30%;height:100%;background:#7f8fb0}.mvp-t{font:11px Courier,monospace}
.mvp-ctl button{font:11px Helvetica;background:#b8bcc4;border:1px solid #eee;border-right-color:#444;border-bottom-color:#444;cursor:pointer}
.mvp-list{display:flex;gap:2px;background:#c3c6cc;border:1px inset #666;padding:2px;font:11px Helvetica,Arial,sans-serif}
.mvp-item{padding:2px 8px;cursor:pointer;border:1px solid transparent;white-space:nowrap}.mvp-item:hover{border-color:#777}.mvp-item.on{background:#2b3f8f;color:#fff}
.mvp-vid video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.mvp-ctl span.mvp-name{flex:1;background:none;border:0;font:11px Helvetica,Arial,sans-serif;color:#222;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.g-demos{background:linear-gradient(135deg,#d9a440,#8a5a10);border:2px solid #222;position:relative;border-radius:2px 8px 2px 2px!important}
.g-demos::after{content:"";position:absolute;left:12px;top:8px;width:18px;height:18px;background:conic-gradient(#f44,#ff4,#4f4,#4ff,#44f,#f4f,#f44);border-radius:50%;box-shadow:0 0 6px #fff}
.g-fsn{background:linear-gradient(#0a1440,#1a2c80);border:2px solid #222;position:relative;overflow:hidden}
.g-fsn::before{content:"";position:absolute;left:5px;right:5px;bottom:5px;height:12px;background:repeating-linear-gradient(90deg,#58f 0 1px,transparent 1px 6px),repeating-linear-gradient(#58f 0 1px,transparent 1px 4px);opacity:.6}
.g-fsn::after{content:"";position:absolute;left:9px;bottom:10px;width:8px;height:16px;background:#a8f;box-shadow:12px 6px 0 -1px #f80,22px 2px 0 #5c8}
.g-bfly{background:linear-gradient(#3a63c9 0 30%,#c9433a 30% 60%,#3aa35a 60%);border:2px solid #222}.g-aqua{background:radial-gradient(ellipse 40% 18% at 50% 50%,#ccd 0 70%,transparent 72%),linear-gradient(#2a7fc0,#06244a);border:2px solid #222}
.g-cube{background:linear-gradient(135deg,#fff,#8899aa 45%,#223 55%,#ccd);border:2px solid #222;transform:rotate(45deg) scale(.75)}
.g-movie{background:repeating-linear-gradient(90deg,#111 0 4px,#ddd 4px 6px,#111 6px 10px) top/100% 6px no-repeat,repeating-linear-gradient(90deg,#111 0 4px,#ddd 4px 6px,#111 6px 10px) bottom/100% 6px no-repeat,linear-gradient(135deg,#59c,#235);border:2px solid #222;position:relative}
.g-movie::after{content:"";position:absolute;left:16px;top:11px;border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}

/* Post-it on the desk by the keyboard */
#postit{position:absolute;left:400px;top:852px;width:100px;height:84px;white-space:nowrap;z-index:14;transform:rotate(-7deg);transform-origin:50% 0;
 background:linear-gradient(160deg,#fff7a1 0%,#fbe96a 60%,#f1d94e 100%);border-radius:1px 1px 2px 14px/1px 1px 2px 8px;
 box-shadow:2px 6px 8px rgba(0,0,0,.45),inset 0 8px 6px -6px rgba(0,0,0,.12);
 font:20px/1.2 "Comic Sans MS","Bradley Hand","Segoe Print","Marker Felt",cursive;color:#1b3a8a;padding:9px 0 0 9px;box-sizing:border-box;pointer-events:none}
#postit span{display:block;transform:rotate(2deg)}#postit span+span{margin-left:8px;transform:rotate(-1deg)}
#postit:after{content:"";position:absolute;right:0;bottom:0;width:22px;height:18px;background:linear-gradient(135deg,rgba(0,0,0,.0) 45%,rgba(0,0,0,.18) 50%,#e9cf46 56%,#fff3a0 100%);border-radius:0 0 2px 0}
body.lamp-off #postit{filter:brightness(.38) saturate(.7)}


/* Wu-Tang jewel case — original CSS cover (no real art / no trademark W) */
#wutang{position:absolute;left:1188px;top:848px;width:112px;height:100px;z-index:16;cursor:pointer;
  transform:rotate(-16deg);transform-style:preserve-3d;perspective:600px}
#wutang .wt-case{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  filter:drop-shadow(6px 10px 8px rgba(0,0,0,.65))}
#wutang .wt-spine{position:absolute;left:0;top:0;width:14px;height:100%;z-index:3;
  background:linear-gradient(90deg,#1a1a1c,#0a0a0b 40%,#222226);
  border:1px solid rgba(200,180,90,.35);border-right:none;border-radius:2px 0 0 2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;overflow:hidden}
#wutang .wt-spine span{writing-mode:vertical-rl;transform:rotate(180deg);font:bold 8px/1 Helvetica,Arial,sans-serif;
  color:#e8c84a;letter-spacing:1px;text-shadow:0 0 2px rgba(255,200,60,.35)}
#wutang .wt-spine .wt-spine-sub{font-size:6px;color:#c9a832;opacity:.85;letter-spacing:.5px}
#wutang .wt-back{position:absolute;left:12px;top:0;right:0;bottom:0;background:linear-gradient(135deg,#111,#0a0a0a);
  border:1px solid rgba(180,180,190,.25);border-left:none;border-radius:0 3px 3px 0;z-index:1}
#wutang .wt-tray{position:absolute;left:18px;top:8px;right:8px;bottom:8px;z-index:2;
  background:radial-gradient(circle at 50% 50%,#2a2c32 0 18%,#1a1c22 19% 100%);
  border-radius:2px;overflow:hidden}
#wutang .wt-hub{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:#111;box-shadow:0 0 0 3px #3a3d44,inset 0 0 0 2px #555}
#wutang .wt-disc{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;
  background:conic-gradient(from 30deg,#2a2030,#6a4a20,#c9a040,#3a2a50,#1a3040,#6a4a20,#2a2030);
  box-shadow:inset 0 0 0 14px rgba(0,0,0,.25),0 0 0 1px rgba(255,220,120,.25);
  opacity:0;transform:scale(.92);transition:opacity .35s,transform .35s}
#wutang .wt-disc i{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#0c0c0e;
  box-shadow:0 0 0 3px rgba(200,180,100,.35)}
#wutang .wt-lid{position:absolute;left:12px;top:0;right:0;bottom:0;z-index:4;transform-origin:0 50%;
  transform:rotateY(0deg);transition:transform .45s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d;
  border-radius:0 3px 3px 0}
#wutang .wt-cover{position:absolute;inset:0;border-radius:0 3px 3px 0;overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 40% 35%,#1a1a1c,#050506 70%);
  border:1px solid rgba(220,190,80,.4);border-left:1px solid rgba(180,150,60,.25)}
#wutang .wt-grain{position:absolute;inset:0;opacity:.55;pointer-events:none;
  background:
    repeating-radial-gradient(circle at 20% 30%,rgba(255,220,100,.04) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(120deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(15deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
#wutang .wt-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px 6px;text-align:center;z-index:1}
#wutang .wt-band{font:900 11px/1.05 Impact,"Arial Black",Helvetica,sans-serif;color:#f0d24a;
  letter-spacing:1.2px;text-shadow:0 0 6px rgba(255,200,40,.45),0 1px 0 #3a2a00;margin-bottom:7px}
#wutang .wt-album{font:bold 8px/1.25 Helvetica,Arial,sans-serif;color:#e6c43a;
  letter-spacing:.3px;text-shadow:0 1px 2px #000}
#wutang .wt-year{margin-top:6px;font:bold 7px Helvetica,Arial,sans-serif;color:#b89428;letter-spacing:1.5px}
#wutang .wt-plastic{position:absolute;inset:0;border-radius:0 3px 3px 0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 35%,transparent 65%,rgba(180,200,220,.08) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 10px rgba(255,255,255,.06)}
#wutang .wt-glare{position:absolute;left:8%;top:4%;width:38%;height:28%;pointer-events:none;border-radius:40% 60% 50% 40%;
  background:radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.42),rgba(255,255,255,.08) 45%,transparent 70%);
  transform:rotate(-18deg);mix-blend-mode:screen}
#wutang .wt-hinge{position:absolute;left:11px;top:4px;bottom:4px;width:3px;z-index:5;border-radius:1px;
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(220,220,230,.35),rgba(0,0,0,.3));
  box-shadow:0 0 2px rgba(255,255,255,.2)}
#wutang.open .wt-lid{transform:rotateY(-52deg)}
#wutang.open .wt-disc{opacity:1;transform:scale(1)}
#wutang:hover .wt-case{filter:drop-shadow(6px 10px 8px rgba(0,0,0,.65)) brightness(1.08)}
#wutang:focus{outline:none}
#wutang:focus-visible .wt-case{outline:2px solid rgba(240,210,80,.7);outline-offset:3px}