/* Local fonts (OFL, see assets/fonts/OFL.txt). Only the weights this page uses. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/dm-sans-400.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/dm-sans-500.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/dm-sans-700.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/dm-mono-400.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/dm-mono-500.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/caveat-700.woff2') format('woff2')}
@font-face{font-family:'Kalam';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/kalam-400.woff2') format('woff2')}
@font-face{font-family:'Permanent Marker';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/permanent-marker-400.woff2') format('woff2')}
:root{color-scheme:dark;--cream:#f2e3c6;--orange:#ef985b;--mono:'DM Mono',monospace}*{box-sizing:border-box}body{margin:0;background:#171a18;color:var(--cream);font-family:'DM Sans',sans-serif;overflow:hidden;height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ffb36e;outline-offset:5px}.room{position:fixed;inset:0;background:#171a18;transform:scale(1.025)}.shade{position:fixed;inset:0;background:linear-gradient(180deg,#101713a8,transparent 25%,#07100e33 65%,#0c1411ed),linear-gradient(90deg,#15191655,transparent 50%,#10171055)}header{position:absolute;z-index:50;top:0;left:0;width:100%;padding:30px 40px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--cream);font-size:14px;letter-spacing:2px;font-weight:700}.cat{font:500 14px/1.05 var(--mono);letter-spacing:0;white-space:pre;color:#f8b980;flex:none}.brand small{display:block;font:9px var(--mono);letter-spacing:1.6px;margin-top:7px;opacity:.65}.outline{background:#171e19a3;border:1px solid #b2a18677;border-radius:30px;padding:11px 17px;font:10px var(--mono);letter-spacing:1.3px;text-transform:uppercase;backdrop-filter:blur(12px)}#workshop{position:absolute;inset:0;overflow:hidden;touch-action:none;perspective:1400px}#carousel{position:absolute;inset:0;transform-style:preserve-3d}.monitor{position:absolute;left:50%;top:49%;width:min(64vw,930px);height:min(61vh,600px);transform-origin:center;will-change:transform,opacity;filter:drop-shadow(0 27px 25px #0009)}.casing{position:relative;height:100%;padding:27px 29px 54px;border-radius:35px 35px 29px 29px;background:linear-gradient(135deg,#d4c7a7 0%,#a99b7e 34%,#8b7a5b 100%);border:2px solid #e0d2b088;box-shadow:inset 4px 5px 8px #fff5,inset -8px -11px 15px #423a2b88,0 3px 0 #403d30}.casing:before,.casing:after{content:'';position:absolute;top:40%;width:25px;height:65px;background:linear-gradient(90deg,#665c42,#c9b990,#4e4937);border:2px solid #494633;border-radius:7px;z-index:-1}.casing:before{left:-23px}.casing:after{right:-23px}.screen{position:relative;height:100%;overflow:hidden;background:#121e1b;border:9px solid #383d32;border-radius:25px;box-shadow:inset 0 0 35px #000d,0 0 0 3px #81785f,0 0 0 5px #b5a689;isolation:isolate}.screen:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;border-radius:17px;box-shadow:inset 0 0 25px #0009;background:linear-gradient(135deg,#fff07d07,transparent 40%)}.bezel{position:absolute;bottom:17px;left:33px;right:32px;display:flex;justify-content:space-between;align-items:center;color:#3e4030;font:10px var(--mono);letter-spacing:2px}.plate{border:1px solid #5a5b4388;padding:4px 7px;box-shadow:inset 0 1px #eee5}.hardware{display:flex;align-items:center;gap:14px}.led{height:6px;width:6px;background:#d2ee90;border-radius:50%;box-shadow:0 0 9px #d1f881}.vents{width:43px;height:15px;background:repeating-linear-gradient(90deg,#373c2d 0 2px,transparent 2px 5px)}.power{width:17px;height:17px;border:2px solid #626346;background:#949275;box-shadow:1px 1px 2px #2226}.screen-content{height:100%;padding:26px 32px;display:flex;flex-direction:column;overflow:hidden}.screen-nav{font:9px var(--mono);letter-spacing:2px;display:flex;justify-content:space-between;color:#bac8a9;margin-bottom:22px}.mini-cat{letter-spacing:0;color:#e5a366}.hero-copy{position:relative;z-index:1;max-width:76%;margin:auto 0}.kicker{font:9px var(--mono);letter-spacing:2px;color:#dfa470;text-transform:uppercase}.hero-copy h1,.hero-copy h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(30px,4.5vw,67px);line-height:1.02;margin:12px 0 17px;letter-spacing:-2px}.hero-copy p{font-size:clamp(12px,1.1vw,16px);line-height:1.6;max-width:380px;color:#c1c8b7;margin:0 0 20px}.action{display:inline-block;text-decoration:none;background:var(--orange);color:#18211a;border:0;border-radius:25px;padding:11px 20px;font-size:12px;font-weight:700}.screen-foot{font:8px var(--mono);letter-spacing:1.5px;display:flex;justify-content:space-between;padding-top:18px;border-top:1px solid #b8ba9626;margin-top:24px;color:#929f8e}.orb{position:absolute;width:250px;height:250px;right:-80px;top:24%;border-radius:50%;background:repeating-radial-gradient(ellipse at 30% 30%,#b37b43 0px,#b37b43 1px,#263c30 2px,#263c30 8px);opacity:.27;z-index:-1}.side-note{position:absolute;left:36px;top:48%;font:8px var(--mono);letter-spacing:1.6px;color:#c7c7af;max-width:150px;line-height:1.6}.live{display:block;width:5px;height:5px;border-radius:50%;background:#b5d29d;box-shadow:0 0 8px #ccfa8f;margin-bottom:14px}.note-line{display:block;margin-top:14px;font:12px/1.7 Georgia,serif;opacity:.65;letter-spacing:.5px}footer{position:absolute;z-index:50;left:40px;right:40px;bottom:43px;display:flex;justify-content:space-between;align-items:center}.station{width:200px}.eyebrow{display:block;font:8px var(--mono);letter-spacing:2px;opacity:.5;margin-bottom:7px}#station-name{font:12px var(--mono)}.controls{display:flex;gap:19px;align-items:center}.controls button{background:#18211b88;border:1px solid #a5a88a66;border-radius:50%;width:37px;height:37px;font-size:19px}.controls button:hover,.outline:hover{background:#51583d88}#hint{font:9px var(--mono);letter-spacing:2px}#dots{width:200px;display:flex;gap:12px;justify-content:flex-end}#dots button{width:8px;height:8px;padding:0;border:1px solid #c2c1a4;background:transparent;border-radius:2px;transition:width .3s}#dots button[aria-current="true"]{background:#efb37d;border-color:#efb37d;width:30px}.label{position:absolute;bottom:17px;left:40px;font:7px var(--mono);letter-spacing:2px;opacity:.35}.detail{display:none;color:#c9cdbd;line-height:1.8;font-size:16px;padding:20px 0;max-width:720px}.detail h3{font:28px Georgia,serif;color:var(--cream);margin:27px 0 8px}.detail p{margin:0 0 16px}.detail ul{padding-left:20px}.detail a{color:#efb37d}.focused .monitor.active{width:min(1060px,94vw);height:calc(100svh - 145px);top:52%;transform:translate(-50%,-50%)!important;filter:drop-shadow(0 30px 40px #000c)}.focused .monitor:not(.active){opacity:0!important;pointer-events:none}.focused .screen-content{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:32px 48px}.focused .detail{display:block}.focused .hero-copy{max-width:100%;margin:15px 0}.focused .hero-copy h1,.focused .hero-copy h2{font-size:clamp(36px,5vw,65px)}.focused .hero-copy p{max-width:600px}.focused footer{display:none}.focused .side-note{display:none}.focused .shade{background:#0b100bba}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:800px){header{padding:22px}.brand{font-size:11px;letter-spacing:1.3px}.brand small{font-size:7px;letter-spacing:1px}.cat{font-size:20px}.outline{font-size:8px;padding:10px 12px}.monitor{width:85vw;height:51svh;top:48%}.casing{padding:19px 18px 45px;border-radius:27px}.screen{border-width:6px;border-radius:18px}.screen-content{padding:22px 23px}.hero-copy{max-width:95%}.hero-copy h1,.hero-copy h2{font-size:clamp(32px,7vw,55px)}.hero-copy p{font-size:13px}.screen-nav{font-size:8px;margin-bottom:15px}.screen-foot{font-size:6px;letter-spacing:.7px;gap:8px}.bezel{left:24px;right:23px;bottom:14px;font-size:8px}.side-note{display:none}.rail-left{left:13%}.rail-right{left:83%}footer{left:22px;right:22px;bottom:55px;flex-wrap:wrap;row-gap:25px}.station{width:50%}#dots{width:50%;order:1}.controls{order:2;justify-content:center;width:100%}.label{left:0;width:100%;text-align:center;font-size:6px;bottom:20px}.focused .screen-content{padding:23px}.focused .monitor.active{height:calc(100svh - 115px);top:54%}.focused .detail{font-size:14px}.screen-foot span:last-child{display:none}}@media(max-height:620px) and (min-width:801px){.monitor{height:65vh}.screen-content{padding:16px 25px}.hero-copy h1,.hero-copy h2{font-size:34px;margin:8px 0}.screen-nav{margin-bottom:8px}.screen-foot{margin-top:10px;padding-top:8px}header{padding:18px 30px}footer{bottom:25px}.label{bottom:8px}.hero-copy p{margin-bottom:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.monitor{will-change:auto}}
/* Machined metal, molded plastic and glass catch different parts of the room light. */
.header-controls{display:flex;gap:10px}.casing{background:radial-gradient(ellipse at 4% 8%,#ffe2ac77,transparent 44%),linear-gradient(178deg,#ccbea0 0%,#b2a182 10%,#a79575 65%,#837353 98%);border-top:2px solid #f4ddad;border-left:2px solid #d8c4a0;border-right:3px solid #766849;border-bottom:5px solid #514932;box-shadow:inset 3px 3px 3px #ffe9be88,inset 10px 9px 13px #dbc7a133,inset -10px -12px 18px #3c342c66,2px 3px 0 #322e24,5px 6px 0 #61553d,10px 10px 0 #282d25}.casing:before,.casing:after{border-radius:50%;height:37px;width:37px;top:calc(50% - 18px);background:radial-gradient(circle,#2d332c 0 15%,#9f9376 18% 26%,#3f4336 29% 36%,#a99e81 40% 59%,#434638 64% 72%,#b1a180 75%);box-shadow:3px 4px 7px #0009}.casing:before{left:-31px}.casing:after{right:-31px}.chassis{position:absolute;inset:12px -25px -17px 16px;border-radius:40px 65px 40px 30px;background:repeating-linear-gradient(0deg,transparent 0 8px,#151d17 8px 11px,transparent 11px 14px),linear-gradient(90deg,#4b493a,#8e8264 60%,#383e30);box-shadow:13px 16px 24px #0008;transform:skewY(1deg)}.cradle{position:absolute;inset:45% -40px -32px;border:13px solid #373f34;border-top:0;border-radius:0 0 26px 26px;box-shadow:inset 3px -3px 0 #978e70,3px 4px 0 #1a211b}.screw{position:absolute;width:8px;height:8px;border-radius:50%;background:linear-gradient(145deg,#d2c7a6,#575c4b 65%);box-shadow:0 1px 2px #242c23,inset 1px 1px 1px #fff5}.screw:after{content:'';position:absolute;left:1px;right:1px;height:1px;top:4px;background:#343b30;transform:rotate(-30deg)}.screw-a{top:12px;left:14px}.screw-b{top:12px;right:14px}.screw-c{bottom:12px;left:14px}.screw-d{bottom:12px;right:14px}.screen{border:10px solid #242c25;box-shadow:0 -3px 3px #4b4d3a,0 2px 1px #e7d4a4,0 0 0 4px #83785c,inset 0 0 40px #000c}.screen:after{background:radial-gradient(ellipse at 40% -30%,#f7db9d0e 0%,#f7db9d05 45%,transparent 65%),linear-gradient(115deg,#ffcf9e10,transparent 25%,transparent 75%,#91b1bc09);box-shadow:inset 0 0 30px #0009,inset 2px 3px 4px #ddf4df18}.bezel .plate{background:#a49a7c;color:#262e25;box-shadow:inset 0 1px 0 #e2d7af,0 1px 2px #32372a77;font-weight:500}.bezel:after{content:'GL / RECLAIMED SERIES';position:absolute;left:170px;font-size:7px;opacity:.5;letter-spacing:1px}.moving .led{background:#ffcf8b;box-shadow:0 0 13px #ffb668}.focused .chassis,.focused .cradle{display:none}.moving #sound[data-audio-state="ready"]{color:#ffbd80}.focused .monitor.active{filter:drop-shadow(0 30px 40px #000c)!important}
@media(max-width:800px){header{padding:17px 15px;align-items:flex-start}.header-controls{gap:6px;flex-direction:column;align-items:flex-end}.header-controls .outline{padding:9px 12px;font-size:8px;min-width:110px}.brand{margin-top:7px}.bezel:after{display:none}.chassis{right:-16px;bottom:-11px}.cradle{inset:45% -30px -23px;border-width:10px}.casing:before{left:-24px}.casing:after{right:-24px}.casing:before,.casing:after{width:29px;height:29px}.focused .monitor.active{height:calc(100svh - 160px);top:56%}}
/* A fixed lens looks into a real Y/Z orbit; the HTML layer is reserved for reading. */
.room-camera{position:absolute;inset:0;width:100%;height:100%;z-index:1;outline:none;touch-action:pan-y}.webgl-ready #carousel{display:none}.webgl-ready.focused #carousel{display:block;z-index:5}.webgl-ready.focused #carousel .monitor{display:none}.webgl-ready.focused #carousel .monitor.active{display:block;filter:drop-shadow(0 20px 30px #000a)!important}.webgl-ready.focused .room-camera{filter:blur(8px) brightness(.35);pointer-events:none}.webgl-ready #workshop{perspective:none}.room{transform:none}.shade{background:linear-gradient(180deg,#101713b0,transparent 25%,#07100e05 65%,#0c1411ba)}.webgl-ready .side-note{top:45%}.webgl-ready .label{opacity:.5}.webgl-ready .monitor{pointer-events:none}.webgl-ready.focused .monitor.active{pointer-events:auto}.webgl-ready .focused .screen-content{pointer-events:auto}.focused #workshop{touch-action:pan-y}.focused .screen-content{touch-action:pan-y}
@media(max-width:800px){.webgl-ready footer{bottom:46px}.webgl-ready .label{font-size:6px}.webgl-ready .focused .monitor.active{width:95vw}.webgl-ready #hint{font-size:8px;letter-spacing:1.5px}}
.monitor-gimbal{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform-origin:50% 50% -70px}.focused .monitor-gimbal{transform:none!important}
/* The uploaded CRT photograph supplies the exact face; content replaces only its glass. */
.reference-face{position:absolute;inset:0;background:url('assets/reference-monitor_s.webp') center/100% 100% no-repeat;pointer-events:none;transform:translateZ(2px)}
.monitor-gimbal{transform-origin:50% 47% -70px}.monitor .chassis,.monitor .screw,.monitor .bezel{display:none!important}.monitor .casing{position:absolute;inset:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;transform:translateZ(3px);pointer-events:none}.monitor .casing:before,.monitor .casing:after{display:none}.monitor .screen{position:absolute;left:13.95%;top:17.4%;width:72.4%;height:53.6%;border:0;border-radius:2.1%;box-shadow:inset 0 0 18px #0009;pointer-events:auto}.monitor .screen:after{background:url('assets/reference-monitor.webp') 50.7% 37.5%/138.1% 186.6% no-repeat;opacity:.10;mix-blend-mode:screen;box-shadow:inset 0 0 20px #000a}.monitor .screen-content{padding:22px 24px}.monitor .screen-nav{margin-bottom:16px;font-size:8px}.monitor .hero-copy{max-width:100%}.monitor .hero-copy h1,.monitor .hero-copy h2{font-size:clamp(29px,3.5vw,48px);letter-spacing:-1.3px}.monitor .hero-copy p{font-size:13px;line-height:1.5;max-width:360px}.monitor .screen-foot{margin-top:18px;font-size:7px;letter-spacing:.8px}.monitor .cradle{inset:45% 2.5% 7%;border-width:10px}.focused .monitor.active,.webgl-ready.focused #carousel .monitor.active{width:min(94vw,calc(100svh - 70px));height:auto;aspect-ratio:1;top:53%}.focused .monitor .screen-content{padding:24px;overflow-y:auto}.focused .hero-copy h1,.focused .hero-copy h2{font-size:clamp(28px,4vw,46px)}.focused .monitor-gimbal{transform:none!important}.focused .monitor .screen-foot{flex-shrink:0}.focused .monitor .detail{font-size:14px;line-height:1.7}.monitor .screen-foot span:last-child{display:none}
@media(max-width:800px){.monitor .screen-content{padding:16px 15px}.monitor .screen-nav{font-size:6px;letter-spacing:1px;margin-bottom:10px}.monitor .kicker{font-size:6px;letter-spacing:1px}.monitor .hero-copy h1,.monitor .hero-copy h2{font-size:clamp(23px,6.2vw,35px);margin:9px 0}.monitor .hero-copy p{font-size:10px;margin-bottom:10px}.monitor .action{padding:8px 12px;font-size:9px}.monitor .screen-foot{display:none}.focused .monitor.active,.webgl-ready.focused #carousel .monitor.active{width:98vw;height:auto;aspect-ratio:1;top:52%}.focused .monitor .screen-content{padding:18px 16px}.focused .monitor .hero-copy h1,.focused .monitor .hero-copy h2{font-size:27px}.focused .monitor .hero-copy p{font-size:12px}.focused .monitor .detail{font-size:12px}.focused .monitor .detail h3{font-size:21px}.focused .monitor .screen-nav{font-size:7px}.monitor .cradle{border-width:6px}}

/* camera navigation: edge look buttons (turn left / right along the rack > whiteboard > windows ring, shown in all three ring views), zoom/read chrome */
.look{position:fixed;top:50%;z-index:6;width:46px;height:46px;margin-top:-23px;border-radius:50%;background:#171e19a3;border:1px solid #b2a18677;backdrop-filter:blur(12px);font-size:26px;line-height:1;padding:0 0 3px;align-items:center;justify-content:center;display:flex}
.look[hidden]{display:none}#look-right{right:14px}#look-left{left:14px}.look:hover{background:#51583d88}.look:disabled{opacity:.35;cursor:default}
.focused .look{display:none}.view-zoom .side-note,.view-lookWindows .side-note{display:none}
@media(max-width:800px){.look{width:40px;height:40px;margin-top:-20px;font-size:22px}#look-right{right:8px}#look-left{left:8px}}
.view-zoom .brand,.view-zoom .station,.view-zoom #hint{text-shadow:0 1px 8px #000,0 0 3px #000}.view-lookWindows .brand,.view-lookWindows .station,.view-lookWindows #hint{text-shadow:0 1px 8px #000,0 0 3px #000}

/* whiteboard blog posts: per-post zoom overlay (shown only in the boardZoom view) */
.board-panel[hidden]{display:none}.board-panel{position:fixed;inset:0;z-index:7;pointer-events:none}
.board-panel .post-nav{pointer-events:auto;top:50%}.board-panel .post-nav[aria-disabled=true]{opacity:.35}#post-prev{left:14px}#post-next{right:14px}
.post-bar{position:absolute;left:50%;transform:translateX(-50%);top:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;pointer-events:auto;max-width:calc(100vw - 120px)}
.post-meta{white-space:nowrap;display:flex;gap:10px;font:10px var(--mono);letter-spacing:1.3px;text-transform:uppercase;background:#171e19a3;border:1px solid #b2a18677;border-radius:30px;padding:11px 17px;backdrop-filter:blur(12px)}.post-meta span+span:before{content:"· "}
.post-open{background:var(--orange);color:#14241a;border:0;border-radius:30px;padding:11px 18px;font:600 10px var(--mono);letter-spacing:1.3px;text-transform:uppercase;text-decoration:none}.post-open:hover{filter:brightness(1.1)}
.view-boardZoom .side-note,.view-boardZoom .station,.view-boardZoom .controls button,.view-boardZoom #dots{display:none}.view-boardZoom #hint{text-shadow:0 1px 8px #000,0 0 3px #000}
@media(max-width:800px){#post-prev{left:8px}#post-next{right:8px}.post-bar{top:auto;bottom:112px;max-width:calc(100vw - 32px)}.post-meta{padding:9px 12px;font-size:8px}.post-open{padding:11px 16px}.board-panel .post-nav{top:auto;bottom:178px;margin-top:0}}

/* Reading mode copy (real grunjeelabs.com text): the screen scrolls, nothing is cut off, and body text stays readable on phones. */
.focused .monitor .screen-content{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;overflow-wrap:break-word;scrollbar-width:thin}
.focused .monitor .kicker{line-height:1.5}
.focused .monitor .hero-copy p{font-size:14px}
.detail ul,.detail ol{margin:0 0 16px;padding-left:22px}
.detail li{margin:0 0 7px}
.detail h3:first-child{margin-top:8px}
.detail em{color:#aeb7a0}
.detail .visit{margin:22px 0 4px}
.detail .visit a{display:inline-block;padding:10px 18px;border:1px solid #efb37d88;border-radius:24px;text-decoration:none;font-weight:700;line-height:1.3}
@media(max-width:800px){
 .focused .monitor .screen-content{padding:14px 14px 20px}
 .focused .monitor .screen-nav{margin-bottom:8px}
 .focused .monitor .kicker{font-size:10px;letter-spacing:1px}
 .focused .monitor .hero-copy{margin:8px 0}
 .focused .monitor .hero-copy h1,.focused .monitor .hero-copy h2{font-size:25px;line-height:1.1;letter-spacing:-.6px;margin:8px 0}
 .focused .monitor .hero-copy p{font-size:14px;line-height:1.5;max-width:none;margin:0 0 6px}
 .focused .monitor .detail{font-size:14px;line-height:1.6;padding:6px 0 0}
 .focused .monitor .detail h3{font-size:20px;line-height:1.2;margin:20px 0 6px}
 .focused .monitor .detail p{margin:0 0 12px}
 .focused .monitor .detail ul,.focused .monitor .detail ol{padding-left:18px}
}
/* Landscape phones: the monitor is short, so the reading screen gets a compact heading and still scrolls. */
@media(max-height:500px){
 .focused .monitor .screen-content{padding:10px 12px 16px}
 .focused .monitor .screen-nav{display:none}
 .focused .monitor .hero-copy h1,.focused .monitor .hero-copy h2{font-size:22px;margin:4px 0}
 .focused .monitor .hero-copy p{font-size:14px;line-height:1.45}
 .focused .monitor .detail h3{font-size:18px;margin:14px 0 4px}
}

/* ===== Grunjee Labs website look for the monitor screens (HTML zoom/Read views + no-WebGL message).
   Tokens are copied from the real site's CSS: palette/desktop-v118.css (colours, --win-shadow, --display) and retro.css (bevelled buttons, fonts). ===== */
:root{--g-ink:#121f05;--g-grass-100:#e6f8d3;--g-grass-400:#99e34f;--g-grass-500:#80dd22;--g-grass-800:#33580e;--g-grass-900:#1a2c07;
--g-plat-50:#f2f2f3;--g-plat-100:#e5e5e6;--g-plat-300:#b0b0b5;--g-plat-500:#7c7c83;--g-plat-700:#4a4a4f;--g-jam-200:#fb9dc1;--g-jam-500:#f60964;--g-jam-600:#c50750;
--g-bevel-light:#eeeeef;--g-bevel-dark:#344336;--g-line:#758373;--g-border:3px;--g-shadow:6px;
--g-display:'Arial Black','Helvetica Neue',Arial,sans-serif;--g-sans:Tahoma,Verdana,'MS Sans Serif',sans-serif;--g-mono:'Courier New',Courier,monospace}
/* dotted gray desktop behind a mint window */
body .monitor .screen{background-color:var(--g-plat-300);background-image:radial-gradient(var(--g-plat-500) 1px,transparent 1.2px);background-size:16px 16px;padding:8px calc(8px + var(--g-shadow)) calc(8px + var(--g-shadow)) 8px;box-sizing:border-box}
body .monitor .screen:after{opacity:.05;box-shadow:inset 0 0 14px #0004}
body .monitor .screen>.screen-content{height:100%;padding:0;gap:0;background:var(--g-grass-100);background-image:none;color:var(--g-ink);font-family:var(--g-sans);border:var(--g-border) solid var(--g-ink);box-shadow:var(--g-shadow) var(--g-shadow) 0 var(--g-ink)}
/* title bar: dark forest green with the lime ascii cat and the site tagline */
body .monitor .screen-nav{position:sticky;top:0;z-index:3;flex:none;margin:0;padding:6px 10px;display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:10px;background:var(--g-grass-900);color:var(--g-plat-50);border-bottom:var(--g-border) solid var(--g-ink);font:700 clamp(11px,1.5vw,17px)/1.1 var(--g-sans);letter-spacing:-.01em}
body .monitor .screen-nav>span:first-child{display:flex;flex-direction:column;gap:3px}
body .monitor .screen-nav>span:first-child:after{content:'I reverse-engineer your business tech.';font:700 .62em/1.2 var(--g-mono);letter-spacing:0;color:var(--g-grass-400)}
body .monitor .mini-cat{flex:none;font-size:0;background:var(--g-grass-500);color:var(--g-ink);padding:4px 6px}
body .monitor .mini-cat:before{content:'/\\_/\\\A (=.-=)';white-space:pre;font:700 8px/1.15 var(--g-mono);display:block;text-align:center}
body .monitor .hero-copy,body .monitor .detail,body .monitor .screen-foot{padding-left:clamp(14px,2.6vw,30px);padding-right:clamp(14px,2.6vw,30px)}
body .monitor .hero-copy{margin:auto 0;padding-top:12px;padding-bottom:12px;max-width:100%}
body .monitor .orb{display:none}
body .monitor .kicker{font-family:var(--g-mono);font-weight:700;letter-spacing:.08em;color:var(--g-grass-800)}
body .monitor .hero-copy h1,body .monitor .hero-copy h2{font-family:var(--g-display);font-weight:900;color:var(--g-ink);letter-spacing:-.035em;line-height:1.02}
body .monitor .hero-copy mark.hl{background:var(--g-grass-400);color:var(--g-ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
body .monitor .hero-copy p{color:var(--g-ink)}
/* the site's bevelled green button */
body .monitor .action{border:2px solid;border-color:var(--g-bevel-light) var(--g-bevel-dark) var(--g-bevel-dark) var(--g-bevel-light);border-radius:0;background:var(--g-grass-500);color:var(--g-ink);box-shadow:1px 1px 0 var(--g-ink);font-family:var(--g-sans);font-weight:700}
body .monitor .action:hover{background:#8fe13d}
body .monitor .action:active{border-color:var(--g-bevel-dark) var(--g-bevel-light) var(--g-bevel-light) var(--g-bevel-dark);box-shadow:none}
/* reading copy */
body .monitor .detail{color:var(--g-ink);font-family:var(--g-sans)}
body .monitor .detail h3{font:700 clamp(15px,1.7vw,19px)/1.3 var(--g-sans);color:var(--g-ink)}
body .monitor .detail h3:first-child{font-family:var(--g-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--g-grass-800)}
body .monitor .detail em{color:var(--g-plat-700);font-family:var(--g-mono);font-style:normal}
body .monitor .detail a{color:var(--g-grass-900);text-decoration:underline;text-underline-offset:3px}
body .monitor .detail strong{color:var(--g-ink)}
body .monitor .detail .visit a{display:inline-block;padding:10px 18px;border:2px solid;border-color:var(--g-bevel-light) var(--g-bevel-dark) var(--g-bevel-dark) var(--g-bevel-light);border-radius:0;background:var(--g-grass-500);color:var(--g-ink);box-shadow:1px 1px 0 var(--g-ink);text-decoration:none;font-weight:700}
body .monitor .detail .visit a:hover{background:#8fe13d}
body .monitor .screen-foot{border-top:3px solid var(--g-line);color:var(--g-plat-700);font-family:var(--g-mono);font-weight:700;padding-bottom:10px}
body .monitor .screen-foot span{color:var(--g-plat-700)}
body.focused .monitor .screen>.screen-content{padding:0;overflow-y:auto;overflow-x:hidden}
@media(max-width:800px){body .monitor .screen{padding:5px 9px 9px 5px}body .monitor .screen>.screen-content{--g-border:2px;box-shadow:4px 4px 0 var(--g-ink);padding:0}body.focused .monitor .screen>.screen-content{padding:0}body .monitor .hero-copy,body .monitor .detail,body .monitor .screen-foot{padding-left:14px;padding-right:14px}body .monitor .mini-cat:before{font-size:6px}}
@media(max-height:500px){body .monitor .screen-nav{display:flex!important;padding:3px 8px}body .monitor .screen-nav>span:first-child:after{display:none}body .monitor .mini-cat{display:none}}
body .monitor .screen>.screen-content{scrollbar-color:var(--g-grass-800) var(--g-plat-300)}
body.focused .monitor .kicker{font-size:clamp(10px,1.1vw,13px)}
body .monitor .screen .hero-copy,body .monitor .screen .detail,body .monitor .screen .screen-foot{padding-left:clamp(14px,2.6vw,30px);padding-right:clamp(14px,2.6vw,30px)}
@media(max-width:800px){body .monitor .screen .hero-copy,body .monitor .screen .detail,body .monitor .screen .screen-foot{padding-left:14px;padding-right:14px}}

/* ===== In-room reader (full blog post over the dimmed room, boardZoom only). Same mint-window look as the monitor screens. ===== */
.post-open{cursor:pointer}
.webgl-ready.reader-open .room-camera{filter:blur(8px) brightness(.35);pointer-events:none}.reader-open .shade{background:#0b100bba}
.reader-open header,.reader-open footer,.reader-open .look,.reader-open .board-panel,.reader-open .side-note,.reader-open .label{visibility:hidden}
.reader[hidden]{display:none}.reader{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;animation:reader-in .22s ease-out}
@keyframes reader-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reader-win{display:flex;flex-direction:column;width:min(880px,100%);height:100%;max-height:calc(100svh - 48px);background:var(--g-grass-100);color:var(--g-ink);font-family:var(--g-sans);border:var(--g-border) solid var(--g-ink);box-shadow:var(--g-shadow) var(--g-shadow) 0 var(--g-ink);overflow:hidden}
.reader-bar{flex:none;display:flex;align-items:center;gap:12px;padding:7px 10px;background:var(--g-grass-900);color:var(--g-plat-50);border-bottom:var(--g-border) solid var(--g-ink)}
.reader-cat{flex:none;background:var(--g-grass-500);color:var(--g-ink);padding:3px 7px;font:700 12px/1.2 var(--g-mono)}
.reader-kicker{flex:1;min-width:0;font:700 13px/1.2 var(--g-mono);letter-spacing:.08em;color:var(--g-grass-400);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-btn{display:inline-block;padding:10px 16px;border:2px solid;border-color:var(--g-bevel-light) var(--g-bevel-dark) var(--g-bevel-dark) var(--g-bevel-light);border-radius:0;background:var(--g-grass-500);color:var(--g-ink);box-shadow:1px 1px 0 var(--g-ink);font:700 14px/1.2 var(--g-sans);text-decoration:none;cursor:pointer}
.reader-btn:hover{background:#8fe13d}.reader-btn:active{border-color:var(--g-bevel-dark) var(--g-bevel-light) var(--g-bevel-light) var(--g-bevel-dark);box-shadow:none}.reader-btn:disabled{opacity:.45;cursor:default;background:var(--g-plat-300)}
.reader-btn:focus-visible,.reader-body a:focus-visible{outline:3px solid var(--g-jam-500);outline-offset:3px}
.reader-x{flex:none;background:var(--g-plat-100);padding:6px 11px;font-size:13px}.reader-x:hover{background:var(--g-jam-200)}
.reader-primary{background:var(--g-ink);color:var(--g-grass-100);border-color:var(--g-grass-800) var(--g-ink) var(--g-ink) var(--g-grass-800)}.reader-primary:hover{background:var(--g-grass-900)}
.reader-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-color:var(--g-grass-800) var(--g-plat-300);outline:none}
.reader-article{max-width:calc(68ch + 96px);margin:0 auto;padding:36px 48px 44px;font-size:18px;line-height:1.6}
.reader-article h1{font:900 clamp(30px,4.4vw,46px)/1.05 var(--g-display);letter-spacing:-.035em;margin:0 0 14px}
.reader-meta{margin:0 0 20px;font:700 13px/1.4 var(--g-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--g-grass-800)}
.reader-ext{margin:0 0 28px}.reader-body+.reader-ext{margin:32px 0 22px}
.reader-body{max-width:68ch}.reader-body p{margin:0 0 1.1em}
.reader-body h2,.reader-body h3,.reader-body h4{font-family:var(--g-display);font-weight:900;letter-spacing:-.02em;line-height:1.2;margin:1.9em 0 .6em}
.reader-body h2{font-size:1.45em;width:fit-content;max-width:100%;padding-bottom:3px;border-bottom:5px solid var(--g-grass-400)}.reader-body h3{font-size:1.2em}.reader-body h4{font-size:1.05em}
.reader-body ul,.reader-body ol{margin:0 0 1.1em;padding-left:1.4em}.reader-body li{margin:0 0 .45em}
.reader-body blockquote{margin:1.4em 0;padding:.6em 1.1em;border-left:6px solid var(--g-grass-500);background:#f4fce9;font-style:italic}.reader-body blockquote p:last-child{margin-bottom:0}
.reader-body a{color:var(--g-grass-900);text-decoration:underline;text-decoration-color:var(--g-grass-500);text-decoration-thickness:3px;text-underline-offset:3px}.reader-body a:hover{background:var(--g-grass-400)}
.reader-body em{color:var(--g-plat-700)}.reader-body strong{color:var(--g-ink)}.reader-body hr{border:0;border-top:3px solid var(--g-line);margin:2em 0}.reader-body code{font-family:var(--g-mono);background:var(--g-grass-100);padding:0 .25em;border:1px solid var(--g-line)}
.reader-body figure{margin:1.6em 0}.reader-body figcaption,.reader-body small{font:700 13px/1.4 var(--g-mono);color:var(--g-plat-700)}
.reader-foot{display:flex;flex-wrap:wrap;gap:10px;padding-top:22px;border-top:3px solid var(--g-line)}.reader-foot .reader-primary{margin-left:auto}
@media(max-width:800px){
 .reader{padding:0;animation-name:reader-in-m}@keyframes reader-in-m{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
 .reader-win{width:100%;max-height:none;border:0;box-shadow:none}
 .reader-bar{padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top))}.reader-cat{display:none}.reader-kicker{font-size:12px}.reader-x{padding:9px 13px;min-height:40px}
 .reader-article{padding:22px 18px calc(32px + env(safe-area-inset-bottom));font-size:16.5px;line-height:1.6}
 .reader-article h1{font-size:28px}.reader-meta{font-size:12px}.reader-body h2{font-size:1.3em}
 .reader-foot{display:grid;grid-template-columns:1fr 1fr}.reader-foot .reader-btn{text-align:center;padding:13px 10px}.reader-foot .reader-primary{grid-column:1/-1;margin-left:0;order:3}#reader-board{grid-column:1/-1}.reader-ext .reader-btn{display:block;text-align:center;padding:13px 10px}
}
@media(prefers-reduced-motion:reduce){.reader{animation:none}}
/* the full-width header must not swallow clicks meant for the post bar beneath it */
header{pointer-events:none}header>*{pointer-events:auto}

/* ===== No-WebGL message panel: shown only when the 3D room cannot start or its context is lost. Same tokens as the monitor screens. ===== */
#nogl{display:none}
body.no-webgl #nogl{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;z-index:6}
body.no-webgl #workshop,body.no-webgl footer,body.no-webgl .side-note,body.no-webgl .header-controls{display:none!important}
.nogl-win{width:min(560px,100%);background:var(--g-grass-100);border:var(--g-border) solid var(--g-ink);box-shadow:var(--g-shadow) var(--g-shadow) 0 var(--g-ink);font-family:var(--g-sans);color:var(--g-ink)}
.nogl-bar{margin:0;background:var(--g-grass-900);color:var(--g-plat-50);padding:10px 14px;font:700 clamp(16px,2.6vw,22px)/1.2 var(--g-sans);border-bottom:var(--g-border) solid var(--g-ink)}
.nogl-body{padding:18px 20px 22px;font-size:15px;line-height:1.55}
.nogl-body p{margin:0 0 16px}
.nogl-actions{display:flex;gap:12px;flex-wrap:wrap}
.nogl-btn{font:700 14px var(--g-sans);padding:9px 16px;border:2px solid;border-color:var(--g-bevel-light) var(--g-bevel-dark) var(--g-bevel-dark) var(--g-bevel-light);border-radius:0;background:var(--g-grass-500);color:var(--g-ink);box-shadow:1px 1px 0 var(--g-ink);text-decoration:none;cursor:pointer}
.nogl-btn:active{border-color:var(--g-bevel-dark) var(--g-bevel-light) var(--g-bevel-light) var(--g-bevel-dark);box-shadow:none}
.nogl-btn:focus-visible{outline:3px solid var(--g-jam-500);outline-offset:2px}
/* Before the 3D room is ready (no webgl-ready, no no-webgl): only the dark page, the brand and a loading line. Flat HTML monitors stay hidden until ready. */
body:not(.webgl-ready):not(.no-webgl) #carousel{visibility:hidden!important}
body:not(.webgl-ready):not(.no-webgl) #workshop,body:not(.webgl-ready):not(.no-webgl) footer,body:not(.webgl-ready):not(.no-webgl) .side-note,body:not(.webgl-ready):not(.no-webgl) #hint,body:not(.webgl-ready):not(.no-webgl) .label,body:not(.webgl-ready):not(.no-webgl) .header-controls,body:not(.webgl-ready):not(.no-webgl) .look,body:not(.webgl-ready):not(.no-webgl) .shade,body:not(.webgl-ready):not(.no-webgl) #board-panel{visibility:hidden!important}
/* portrait phone, zoomed: the screen texture draws its own GRUNJEE LABS header, so the HTML brand steps aside (buttons stay top-right) */
@media(max-width:800px) and (max-aspect-ratio:10/11){.view-zoom .brand{visibility:hidden}}

/* ===== Learn more (#learn): transparent hit target over the green button drawn on the zoomed monitor (app.js omPlace). Hover brightens it, keyboard focus shows a green ring. ===== */
#learn[hidden]{display:none}
#learn{position:fixed;z-index:20;margin:0;padding:0;border:0;border-radius:var(--lr,4px);background:transparent;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;transition:background .12s,box-shadow .12s}
#learn:hover{background:#d9ffa84d;box-shadow:0 0 0 2px #8fe13d99,0 0 22px #8fe13d99}
#learn:active{background:#0000001f}
#learn:focus-visible{outline:3px solid #8fe13d;outline-offset:4px;background:#d9ffa833;box-shadow:0 0 0 2px #0b140d,0 0 22px #8fe13dcc}


/* opened overlay: the section's own CTA wording is a real button (opens the page on grunjeelabs.com) */
.focused .monitor .action{padding:10px 16px;font-size:12px;margin-top:2px}

/* ===== Portrait phone, zoomed on a monitor: the glass is almost all mint window. The header band (drawn in the texture) only holds two 40 px icon chips; the footer is ONE slim 44 px row
   (arrows at the sides, dots between) laid over the window's bottom margin. Both respect the safe areas. Keep these numbers in step with portZones() in scene.js (CHIP_CSS, FOOT_ROW). ===== */
@media(max-width:799.98px) and (max-aspect-ratio:10/11){
 body.view-zoom header{padding:max(calc(2svh + 4px),calc(env(safe-area-inset-top) + 4px)) calc(10px + env(safe-area-inset-right)) 0 10px;align-items:flex-start}
 body.view-zoom .header-controls{flex-direction:row;gap:6px;align-items:center}
 body.view-zoom .header-controls .outline{width:40px;height:40px;min-width:0;padding:0;display:grid;place-items:center;font-size:17px;letter-spacing:0;border-radius:20px}
 body.view-zoom .header-controls .outline[hidden]{display:none}
 body.view-zoom #focus span{display:none}
 body.view-zoom footer{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:calc(6px + env(safe-area-inset-bottom));height:44px;flex-wrap:nowrap;row-gap:0;gap:8px}
 body.view-zoom .station{display:none}
 body.view-zoom #hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* read by screen readers only; the Learn more button is the on-screen affordance */
 body.view-zoom .controls{display:contents}
 body.view-zoom #dots{order:2;flex:1;width:auto;justify-content:center;gap:0}
 body.view-zoom .controls button{width:44px;height:44px;font-size:19px;background:#16231a;border-color:#b2a186aa;color:var(--cream)}
 body.view-zoom #dots{align-items:center;background:#16231ae6;border-radius:22px;padding:0 6px;height:36px;flex:0 0 auto;margin:0 auto}
 body.view-zoom #dots button{position:relative;width:28px;height:36px;border:0;background:transparent;transition:none}
 body.view-zoom #dots button:before{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border:1px solid #d9e6cf;background:#16231a;border-radius:2px}
 body.view-zoom #dots button[aria-current="true"]{width:28px;background:transparent}body.view-zoom #dots button[aria-current="true"]:before{width:22px;margin-left:-11px;background:#8fe13d;border-color:#8fe13d}
}
/* the Learn more overlay on a portrait phone: a tall monitor so the copy has room (was a small square CRT) */
@media(max-width:799.98px) and (max-aspect-ratio:10/11){.webgl-ready.focused #carousel .monitor.active{width:96vw;height:calc(100svh - 112px);aspect-ratio:auto;top:55%}}

.view-lookPrinter .side-note,.view-podcast .side-note{display:none}.view-lookPrinter .brand,.view-lookPrinter .station,.view-lookPrinter #hint,.view-podcast .brand,.view-podcast .station,.view-podcast #hint{text-shadow:0 1px 8px #000,0 0 3px #000}

/* ===== Desk media player (wmp.js): transparent real controls laid over the drawn Windows-Media-Player window on the zoomed desk CRT; a big-button dock under the glass on portrait phones ===== */
#wmp[hidden],#wmp-dock[hidden]{display:none}
#wmp{position:fixed;z-index:21;margin:0;padding:0;touch-action:none}
#wmp button,#wmp input{position:absolute;margin:0;padding:0;border:0;border-radius:4px;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:none}
#wmp input[type=range]{opacity:1}
#wmp input[type=range]::-webkit-slider-runnable-track,#wmp input[type=range]::-moz-range-track{background:transparent}
#wmp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1px;height:1px;opacity:0}
#wmp input[type=range]::-moz-range-thumb{width:1px;height:1px;opacity:0;border:0}
#wmp button:focus-visible,#wmp input:focus-visible{outline:3px solid #8fe13d;outline-offset:2px}
#wmp button:hover{background:#ffffff1c}
#wmp-dock{position:fixed;z-index:21;left:12px;right:12px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
#wmp-dock button{min-width:48px;height:48px;padding:0 12px;border-radius:24px;border:1px solid #b2a18677;background:#171e19d9;color:#f3e7cf;font:600 18px var(--mono,monospace);backdrop-filter:blur(10px)}
#wmp-dock button:focus-visible{outline:3px solid #8fe13d;outline-offset:2px}
#wmp-dock input{flex:1 1 100%;max-width:340px;height:36px;accent-color:#8fe13d}
.view-player .side-note,.view-player .station,.view-player .controls button,.view-player #dots{display:none}.view-player #hint{text-shadow:0 1px 8px #000,0 0 3px #000}
#wmp a{position:absolute;display:block;margin:0;padding:0;border-radius:4px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#wmp a[hidden]{display:none}
#wmp a img{display:block;width:100%;height:100%;opacity:0;pointer-events:none;-webkit-user-drag:none}
#wmp .art2{position:absolute;pointer-events:none}#wmp .art2[hidden]{display:none}#wmp .art2 img{display:block;width:100%;height:100%;opacity:0;-webkit-user-drag:none}   /* Take Five's cover: real <img>, no link */
#wmp a:hover{background:#ffffff14}#wmp a:focus-visible{outline:3px solid #8fe13d;outline-offset:2px}
/* ===== Embedded sites (sites.js): a live iframe laid exactly over the glass of a zoomed desk monitor; the only chrome is a tiny 'esc' key-cap in the glass's top-right corner ===== */
#site{position:fixed;inset:0;z-index:21;pointer-events:none}#site[hidden]{display:none}
.site-box{position:fixed;overflow:hidden;border-radius:var(--rad,6px);background:transparent;pointer-events:none;box-shadow:0 0 0 1px #0008}.site-box.solid{pointer-events:auto}.site-box .site-esc,.site-box .site-fail{pointer-events:auto}   /* the page iframe (in #site-fr, under this box) takes the taps over the glass; the box only catches them when no frame is there */
.site-view{position:absolute;inset:0;overflow:hidden;background:transparent;pointer-events:none}
#site-fr{position:fixed;inset:0;z-index:21;pointer-events:none}
#site-fr iframe{position:fixed;left:0;top:0;border:0;background:#fff;display:block;transform-origin:0 0;pointer-events:auto;opacity:0;transition:opacity .25s ease;overflow:hidden}#site-fr iframe.on{opacity:1}#site-fr iframe.rk{background:transparent;transition:opacity .4s ease}
#site-fr iframe.park{visibility:hidden!important;left:-9999px!important;top:0!important;pointer-events:none!important;opacity:0!important}   /* preloaded, waiting off-screen; sites.js sets the virtual size + scale() when it moves onto the glass */
.site-back{position:absolute;inset:0;background:#0b0d10;transition:opacity .25s ease}.site-box.rack .site-back{display:none}
.site-back.gone,.site-snap.gone{opacity:0}.site-snap{transition:opacity .25s ease;filter:brightness(.82)}
.site-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#39ff1426;pointer-events:none;transition:opacity .3s ease}.site-bar i{display:block;height:100%;width:0;background:#39ff14;box-shadow:0 0 6px #39ff14aa;transition:width .12s linear}.site-bar.slow{background:#ffb00026}.site-bar.slow i{background:#ffb000;box-shadow:0 0 6px #ffb000aa}
.site-bl{position:absolute;left:8px;bottom:8px;font:700 10px/1 var(--mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:.06em;color:#39ff14;text-shadow:0 0 6px #39ff1499;pointer-events:none;transition:opacity .3s ease}.site-bl.slow{color:#ffb000;text-shadow:0 0 6px #ffb00099}.site-bar.out,.site-bl.out{opacity:0}.site-bar[hidden],.site-bl[hidden]{display:none}
.site-snap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}.site-snap[hidden],.site-pill[hidden]{display:none}.site-pill{display:none!important}
.site-pill{position:absolute;right:10px;bottom:10px;padding:5px 10px;border-radius:12px;background:#000b;color:#fff;font:12px Tahoma,Verdana,sans-serif;pointer-events:none}
/* the esc key-cap: ~22 x 16 visible, bevelled dark plastic, pixel-style mono label; transparent padding makes the touch hit area 44 x 44 without growing the cap */
.site-esc{position:absolute;top:0;right:0;z-index:2;display:flex;align-items:flex-start;justify-content:flex-end;padding:5px 5px 0 0;margin:0;border:0;background:none;cursor:pointer;opacity:.7;transition:opacity .15s;-webkit-tap-highlight-color:transparent}
.site-esc .cap{display:block;box-sizing:border-box;width:22px;height:16px;border-radius:3px;border:1px solid #05070a;border-top-color:#5a6068;border-left-color:#4a5058;background:linear-gradient(#3b4048,#1d2126);box-shadow:0 1px 0 #000a,inset 0 -2px 0 #0007;color:#d9dccf;font:700 9px/14px var(--mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:0;text-align:center;text-transform:lowercase;-webkit-font-smoothing:none}
.site-info{right:34px}.site-info .cap{width:auto;min-width:22px;padding:0 4px}@media (pointer:coarse),(max-width:700px){.site-info{right:46px}}.site-info[hidden]{display:none}.site-box.rack{background:transparent;box-shadow:none}.site-box.rack .site-esc{padding:12px 16px 0 0}.site-box.rack .site-info{right:46px}@media (pointer:coarse),(max-width:700px){.site-box.rack .site-esc{width:62px;height:58px;padding:12px 14px 0 0}.site-box.rack .site-info{right:62px}}.site-box.rack .site-view{background:transparent}   /* rack CRTs: the painted canvas shows while the page loads, then the page fades in */
.site-esc:hover,.site-esc:focus-visible{opacity:1}.site-esc:active .cap{transform:translateY(1px);box-shadow:0 0 0 #000a,inset 0 -1px 0 #0007}.site-esc:focus-visible{outline:2px solid #8fe13d;outline-offset:-3px;border-radius:5px}
@media (pointer:coarse),(max-width:700px){.site-esc{width:44px;height:44px;padding:6px 6px 0 0}}
.site-fail{position:absolute;inset:auto 0 0 0;padding:6px 10px;background:#101612e6;color:#f3e7cf;text-align:center;font:12px/1.4 var(--mono,monospace)}.site-fail[hidden]{display:none}.site-fail p{display:inline;margin:0 8px 0 0}
.site-open{color:#8fe13d;font:12px/1.4 var(--mono,monospace);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}.site-open:hover{color:#c4f58c}.site-open:focus-visible{outline:2px solid #8fe13d;outline-offset:2px}
.view-site .side-note,.view-site .station,.view-site .controls button,.view-site #dots{display:none}.view-site #hint{text-shadow:0 1px 8px #000,0 0 3px #000}

/* podcast station: real links over the pinned case cards (scene.js lays them out only while the stop is at rest), hover chip */
#pod-layer{position:fixed;inset:0;z-index:5;pointer-events:none}
.pod-link{position:fixed;display:block;background:transparent;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;outline:none}
.pod-link:focus-visible{outline:3px solid #8fe13d;outline-offset:2px;clip-path:none!important}
.pod-tip{position:fixed;z-index:7;pointer-events:none;padding:5px 10px;border-radius:12px;background:#101612f2;color:#f3e7cf;font:12px/1.2 var(--mono,monospace);letter-spacing:.3px;box-shadow:0 0 0 1px #8fe13d66}
.pod-tip[hidden]{display:none}


/* ===== Hello World drawing wall (board.js): an HTML canvas laid exactly over the drawing area of the board plus a pen-only toolbar (dark glass chips, no text input anywhere) ===== */
#hello[hidden]{display:none}
#hello{position:fixed;inset:0;z-index:9;pointer-events:none;font:500 10px/1.3 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--cream)}
#hello-cv{position:fixed;display:block;background:#fff;border-radius:3px;touch-action:none;cursor:crosshair;pointer-events:auto;box-shadow:0 0 0 2px #1d2b6e55,0 6px 28px #0007;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hw-bar,.hw-note{position:fixed;pointer-events:auto;background:#171e19c4;border:1px solid #b2a18677;border-radius:16px;backdrop-filter:blur(12px);padding:10px;display:flex;flex-direction:column;gap:10px;align-items:center}
.hw-cols{display:grid;grid-template-columns:repeat(2,32px);gap:6px}
.hw-sw{width:32px;height:32px;border-radius:50%;border:2px solid #f2e3c655;background:var(--c);padding:0;cursor:pointer}
.hw-sw[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px #171e19,0 0 0 4px var(--c)}
.hw-sizes{display:grid;grid-template-columns:repeat(2,36px);gap:4px}
.hw-sz{width:36px;height:36px;border-radius:10px;border:1px solid #b2a18655;background:#0d120f99;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hw-sz i{display:block;border-radius:50%;background:#f2e3c6}
.hw-sz[aria-pressed=true]{border-color:#f2e3c6;background:#51583d88}
.hw-btn{min-height:44px;width:100%;padding:0 10px;border-radius:22px;background:#0d120f99;border:1px solid #b2a18677;color:var(--cream);font:inherit;letter-spacing:1.4px;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.hw-btn:hover{background:#51583d88}
.hw-sw:focus-visible,.hw-sz:focus-visible,.hw-btn:focus-visible{outline:3px solid #8fe13d;outline-offset:2px}
.hw-note{align-items:flex-start;gap:6px;text-transform:none;letter-spacing:.4px;font-size:11px}
.hw-note b{font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#efb37d}
.hw-note span{opacity:.85}
.hw-chip{margin-top:2px;padding:4px 10px;border-radius:12px;border:1px solid #8fe13d66;color:#bfe9a0;text-transform:none;letter-spacing:.3px;font-size:11px}
.hw-chip[data-s=offline],.hw-chip[data-s=note]{border-color:#efb37d77;color:#efb37d}.hw-chip[data-s=connecting]{border-color:#b2a18666;color:var(--cream)}
#hello.hw-portrait .hw-bar{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px}
#hello.hw-portrait .hw-cols{grid-template-columns:repeat(8,32px);gap:4px}
#hello.hw-portrait .hw-sizes{grid-template-columns:repeat(4,36px)}
#hello.hw-portrait .hw-btn{width:auto;min-width:96px}
#hello.hw-portrait .hw-note{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;padding:8px;font-size:10px}
.view-draw .side-note{display:none}

/* ===== Credits chip + panel ===== */
.credits[hidden]{display:none}.credits{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:24px;background:#0a0b0aa6;backdrop-filter:blur(3px)}
.credits-win{width:min(640px,100%);max-height:calc(100svh - 48px);display:flex;flex-direction:column;background:#171e19f2;color:var(--cream);border:1px solid #b2a18688;border-radius:14px;box-shadow:0 18px 60px #000a;overflow:hidden}
.credits-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #b2a18633}
.credits-bar h2{margin:0;font:11px var(--mono);letter-spacing:2.4px;text-transform:uppercase;color:var(--orange)}
.credits-x{background:none;border:1px solid #b2a18677;border-radius:30px;color:var(--cream);font:10px var(--mono);letter-spacing:1.2px;padding:8px 13px;cursor:pointer;min-height:36px}
.credits-body{padding:14px 18px 20px;overflow:auto;font:13px/1.5 'DM Sans',sans-serif}
.credits-intro{margin:0 0 14px;color:#c7c7af;font-size:12px}
.credits-body ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.credits-body li{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px solid #b2a18622}.credits-body li:last-child{border-bottom:0;padding-bottom:0}
.credits-body a{color:var(--cream);text-underline-offset:3px}.credits-body a:hover{color:var(--orange)}
.credits-by,.credits-lic{font:9px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#c7c7af}.credits-lic{color:var(--orange)}
.credits-note{font-size:12px;color:#b9b9a3}
@media(max-width:800px){.credits{padding:0;align-items:flex-end}.credits-win{width:100%;max-height:86svh;border-radius:14px 14px 0 0}.credits-x{min-height:44px}}
.view-stacks .side-note{display:none}.view-stacks .brand,.view-stacks .station,.view-stacks #hint{text-shadow:0 1px 8px #000,0 0 3px #000}
/* build bench canvas monitors (sites.js, meta.mode==='canvas'): the 3D texture shows through; only the esc key, link buttons and the YouTube pane take pointer events */
.site-box.canvas{background:transparent;box-shadow:none;pointer-events:none;overflow:visible}.site-box.canvas .site-view{background:transparent;pointer-events:none;overflow:visible}
.site-links{position:absolute;inset:0;pointer-events:none}.site-link{position:absolute;display:block;pointer-events:auto;border-radius:999px;cursor:pointer}.site-link:hover{background:#ffffff18}.site-link:focus-visible{outline:2px solid #8fe13d;outline-offset:2px}.site-link.act{border:0;padding:0;margin:0;background:none;border-radius:6px;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent}.site-link.act:hover{background:none}
.site-view .site-yt{position:absolute;border:0;background:#000;display:block;pointer-events:auto;z-index:1}
.site-box.canvas .site-esc{pointer-events:auto}.site-esc.out{position:fixed;z-index:3;pointer-events:auto;width:44px;height:44px;padding:6px 6px 0 0}
.view-build .side-note{display:none}.view-build .brand,.view-build .station,.view-build #hint{text-shadow:0 1px 8px #000,0 0 3px #000}

html,body{overscroll-behavior:none}.room-camera{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.drag-hint{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 158px);transform:translateX(-50%);z-index:9;padding:7px 12px;border-radius:999px;background:#171a18d9;border:1px solid #f2e3c64d;color:var(--cream);font:500 10.5px/1 var(--mono);letter-spacing:.09em;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .5s}.drag-hint.on{opacity:1}@media (prefers-reduced-motion:reduce){.drag-hint{transition:none}}

/* ===== Loading gate: terminal-style progress (window.nestLoad, defined inline in the page head). Visible until the first frame is drawn (body.webgl-ready), 250 ms fade. ===== */
#loadgate{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;max-width:calc(100vw - 32px)}
body:not(.webgl-ready):not(.no-webgl) #loadgate,#loadgate.failed{opacity:1;visibility:visible;transition:none}
#loadgate.failed{top:auto;bottom:9vh;transform:translateX(-50%)}
.lg-t{margin:0;padding:14px 16px 13px;background:#040a05;border:1px solid #39ff1455;border-radius:4px;box-shadow:0 0 28px #39ff1426,inset 0 0 18px #39ff140d;font:clamp(11px,3.5vw,14px)/1.55 var(--mono),ui-monospace,Menlo,Consolas,monospace;white-space:pre;color:#39ff14;text-shadow:0 0 6px #39ff1499;overflow:hidden}
.lg-h{opacity:.75}
.lg-cur{display:inline-block;width:.6em;height:1.05em;margin-left:.15em;vertical-align:-.17em;background:#39ff14;box-shadow:0 0 6px #39ff14aa;animation:lgblink 1s steps(1) infinite}
@keyframes lgblink{50%{opacity:0}}
#loadgate.failed .lg-t{color:#ffb000;text-shadow:0 0 6px #ffb00099;border-color:#ffb00066}
#loadgate.failed .lg-cur{background:#ffb000;box-shadow:0 0 6px #ffb000aa}
#loadgate.slow .lg-t{color:#ffb000;text-shadow:0 0 6px #ffb00099;border-color:#ffb00066}
#loadgate.slow .lg-cur{background:#ffb000;box-shadow:0 0 6px #ffb000aa}
@media(prefers-reduced-motion:reduce){.lg-cur{animation:none}#loadgate{transition:none}}
.lg-catrow{display:block;position:relative;height:2em;line-height:1em}
#lg-cat{position:absolute;top:0;left:0;white-space:pre;transition:left .15s linear}
@keyframes lgHop{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
#lg-cat.hop{animation:lgHop .2s ease-out 1}
@media(prefers-reduced-motion:reduce){#lg-cat{transition:none}#lg-cat.hop{animation:none}}

.site-link.cta{border-radius:6px}.site-link.cta:hover{background:#99e34f22;outline:2px solid #99e34f;outline-offset:2px}

/* ===== b52 HUD: phone sizes (11 px floor, hint 12 px), 44 px tap areas, station label only at the rack ===== */
body:not(.view-overview) .station{visibility:hidden}
@media (max-width:800px),(pointer:coarse){
 #dots{align-items:center;gap:0}
 #dots button{position:relative;width:44px;height:44px;padding:0;border:0;background:transparent;border-radius:0;transition:none}
 #dots button:before{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border:1px solid #c2c1a4;border-radius:2px}
 #dots button[aria-current="true"]{width:44px;background:transparent;border:0}
 #dots button[aria-current="true"]:before{width:30px;margin-left:-15px;background:#efb37d;border-color:#efb37d}
 body.view-zoom #dots{height:44px}
 body.view-zoom #dots button,body.view-zoom #dots button[aria-current="true"]{width:44px;height:44px}
 body.view-zoom #dots button[aria-current="true"]:before{width:22px;margin-left:-11px;background:#8fe13d;border-color:#8fe13d}
 .header-controls .outline{min-height:44px;font-size:11px;letter-spacing:.8px}
 body.view-zoom .header-controls .outline{width:44px;height:44px;min-height:44px;font-size:17px;letter-spacing:0;border-radius:22px}
 .look{width:44px;height:44px;margin-top:-22px}
}
@media (max-width:800px){
 header{align-items:flex-start;justify-content:flex-end}
 .brand{position:absolute;left:max(15px,env(safe-area-inset-left));top:17px;min-height:44px;margin:0;gap:10px;flex:none}
 body.view-zoom .brand{top:max(calc(2svh + 4px),calc(env(safe-area-inset-top) + 4px))}
 body.view-zoom .brand small{display:none}
 .header-controls .outline{white-space:nowrap}
 .view-lookWindows #dots{visibility:hidden}
 .brand small{font-size:11px;letter-spacing:0;margin-top:4px}
 .cat{font-size:12px}
 .eyebrow{font-size:11px;letter-spacing:1.2px;margin-bottom:4px}
 .station{width:auto;flex:1 1 0;min-width:0}
 #dots{width:auto;flex:0 0 auto}
 .webgl-ready #hint,#hint{font-size:12px;letter-spacing:.4px}
 .controls{min-width:0;max-width:100%}
 .controls #hint{display:block;max-width:calc(100vw - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
 body.view-zoom #hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .webgl-ready .label,.label{font-size:11px;letter-spacing:.04em;left:auto;right:10px;width:auto;text-align:right;bottom:max(0px,env(safe-area-inset-bottom));line-height:44px;opacity:.5;pointer-events:none;white-space:nowrap}
 .side-note{font-size:11px}
 .drag-hint{font-size:11px}
 .outline{font-size:11px;min-height:44px}
 .post-meta{font-size:11px;letter-spacing:.6px}
 .post-open{font-size:11px;min-height:44px;display:inline-flex;align-items:center}
 .site-esc .cap{width:auto;min-width:26px;height:18px;padding:0 4px;font-size:11px;line-height:16px}
}
/* in-frame nav strip (b61): our own chrome under the zoomed glass; hidden with #site when nothing is zoomed */
.site-nav{position:fixed;z-index:3;transform:translateX(-50%);max-width:calc(100vw - 16px);height:28px;box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:0 6px;background:#0b0d10e6;border:1px solid #2a3038;border-radius:6px;pointer-events:auto;font:12px/1 var(--mono,monospace);color:#9aa3ad}
.site-nav[hidden]{display:none}
.site-nav button{height:22px;padding:0 9px;border:1px solid #3a414a;border-radius:4px;background:#1a1f25;color:#8fe13d;font:inherit;cursor:pointer}
.site-nav button:hover:not(:disabled){background:#252c34;color:#c4f58c}.site-nav button:focus-visible{outline:2px solid #8fe13d;outline-offset:1px}
.site-nav button:disabled{color:#58606a;cursor:default}
.site-nav .nv-name{margin-left:6px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (pointer:coarse){.site-nav button{height:26px;padding:0 14px}}