/* COOL/OS — the computer in the room, zoomed into and booted.
   Room light is tungsten; inside the CRT everything is phosphor on deep cathode blue. */
:root{
 --os-cathode:#06124a;--os-deep:#030a2c;--os-blue:#1a2fd0;--os-phosphor:#e9eeff;
 --os-dim:#8f9bd6;--os-amber:#ffb547;--os-line:#2f43b8;--os-win:#0b1654;
 --os-mono:'Space Mono',ui-monospace,monospace;--os-display:'Barlow Condensed','DM Sans',sans-serif;--os-body:'DM Sans',sans-serif;
}

/* ---------- camera push into the monitor ---------- */
/* the scaled room must never widen the page, or phones zoom the layout viewport out */
main{overflow:clip}
.room-wrap{transform-origin:0 0;transition:transform 1s cubic-bezier(.65,0,.2,1),filter 1s ease}
body.os-zooming .room-wrap,body.os-open .room-wrap{filter:brightness(.85) saturate(.9)}
body.os-zooming header,body.os-open header,body.os-zooming .room-actions,body.os-open .room-actions,body.os-open .room-player{opacity:0;pointer-events:none;transition:opacity .35s}
body.os-open{overflow:hidden}

/* ---------- the tube ---------- */
.cool-os{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:transparent;color:var(--os-phosphor);font-family:var(--os-body)}
.cool-os[hidden]{display:none}
.crt{position:relative;width:100%;height:100%;background:#000;overflow:hidden;border-radius:clamp(10px,2.2vw,34px)/clamp(10px,2.6vw,40px);box-shadow:inset 0 0 0 clamp(6px,1vw,14px) #0d0d0c,inset 0 0 90px #000}
.crt-screen{position:absolute;inset:clamp(6px,1vw,14px);border-radius:inherit;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#0c1c78 0%,var(--os-cathode) 55%,var(--os-deep) 100%)}
/* scanlines, glass, vignette sit above everything and never take input */
.crt-screen::before{content:'';position:absolute;inset:0;z-index:40;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#00000038 2px 3px);mix-blend-mode:multiply}
.crt-screen::after{content:'';position:absolute;inset:0;z-index:41;pointer-events:none;background:radial-gradient(140% 110% at 50% 45%,#0000 58%,#000a 100%),linear-gradient(115deg,#ffffff10 0%,#0000 32%);}
.crt-flicker{position:absolute;inset:0;z-index:42;pointer-events:none;background:#9fb4ff;opacity:0;animation:os-flicker 7s steps(1) infinite}
@keyframes os-flicker{0%,100%{opacity:0}47%{opacity:.018}48%{opacity:0}73%{opacity:.012}74%{opacity:0}}

/* power on: a white line opens into the picture. power off: the reverse. */
.cool-os.powering .crt-screen{animation:os-power-on .75s cubic-bezier(.2,.8,.2,1) both}
.cool-os.powering-off .crt-screen{animation:os-power-off .45s cubic-bezier(.7,0,.8,.3) both}
@keyframes os-power-on{0%{clip-path:inset(49.6% 50% 49.6% 50%);filter:brightness(6)}35%{clip-path:inset(49.6% 0 49.6% 0);filter:brightness(4)}100%{clip-path:inset(0 0 0 0);filter:brightness(1)}}
@keyframes os-power-off{0%{clip-path:inset(0);filter:brightness(1)}60%{clip-path:inset(49.6% 0 49.6% 0);filter:brightness(4)}100%{clip-path:inset(49.8% 50% 49.8% 50%);filter:brightness(8)}}

/* ---------- boot log ---------- */
.os-boot{position:absolute;inset:0;z-index:30;padding:clamp(22px,4vw,56px);font:clamp(11px,1.05vw,14px)/1.75 var(--os-mono);color:var(--os-phosphor);text-shadow:0 0 8px #7f9bff88;background:var(--os-deep);overflow:hidden}
.os-boot[hidden]{display:none}
.os-boot .ok{color:#7dffb0}.os-boot .warn{color:var(--os-amber)}.os-boot .dim{color:var(--os-dim)}
.os-boot .cursor{display:inline-block;width:.6em;height:1.05em;vertical-align:-2px;background:currentColor;animation:os-blink 1s steps(1) infinite}
.os-boot-skip{position:absolute;right:clamp(18px,3vw,40px);bottom:clamp(18px,3vw,36px);font:10px var(--os-mono);letter-spacing:.12em;color:var(--os-dim);background:none;border:1px solid #33459f;padding:10px 14px}
@keyframes os-blink{50%{opacity:0}}

/* ---------- desktop ---------- */
.os-desktop{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr;opacity:0;transition:opacity .4s}
.os-desktop.on{opacity:1}
.os-dither{position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:radial-gradient(#4a5fe0 .6px,#0000 .8px);background-size:4px 4px}
.os-menubar{position:relative;z-index:20;display:flex;align-items:center;gap:clamp(12px,2vw,26px);height:34px;padding:0 clamp(14px,2vw,22px);background:#e9eeff;color:#06124a;font:11px var(--os-mono);letter-spacing:.04em;box-shadow:0 2px 0 #000}
.os-menubar b{font-weight:700;letter-spacing:.08em}
.os-menubar .spacer{flex:1}
.os-menubar .os-agents{display:flex;align-items:center;gap:8px}
.os-agents i{width:7px;height:7px;background:#11c95a;box-shadow:0 0 0 2px #11c95a33;animation:os-blink 1.6s steps(1) infinite}
.os-menubar button{background:none;border:0;font:inherit;color:inherit;padding:8px 4px}
.os-menubar .os-exit{font-weight:700;border:1.5px solid #06124a;padding:3px 9px;box-shadow:2px 2px 0 #06124a}
.os-menubar .os-exit:active{transform:translate(2px,2px);box-shadow:none}
.os-hide-sm{}

.os-field{position:relative;overflow:hidden}
.os-wallpaper{position:absolute;right:4%;bottom:6%;width:min(44%,560px);opacity:.9;pointer-events:none}
.os-wallpaper h2{margin:0;font:900 clamp(40px,7vw,120px)/.82 var(--os-display);letter-spacing:-.01em;text-transform:uppercase;color:#0000;-webkit-text-stroke:1.2px #5a70ff;text-align:right}
.os-wallpaper h2 span{display:block;color:#e9eeff;-webkit-text-stroke:0;text-shadow:0 0 22px #6f86ff88}
.os-hint{color:var(--os-amber);animation:os-blink 1.4s steps(1) 4}
.os-wallpaper p{margin:14px 0 0;text-align:right;font:11px/1.7 var(--os-mono);color:var(--os-dim);letter-spacing:.06em}

.os-icons{position:absolute;left:clamp(10px,2vw,28px);top:clamp(14px,2.4vw,30px);bottom:18px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,minmax(96px,auto));grid-auto-columns:104px;gap:6px 10px;align-content:start;z-index:2}
.os-icon{width:104px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 4px;background:none;border:1px solid #0000;color:var(--os-phosphor);font:10.5px/1.3 var(--os-mono);text-align:center;text-shadow:0 1px 0 #000}
.os-icon svg{width:52px;height:52px;overflow:visible;filter:drop-shadow(3px 3px 0 #000a);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.os-icon:hover svg,.os-icon:focus-visible svg{transform:translateY(-3px) rotate(-3deg)}
.os-icon span{padding:1px 4px}
.os-icon[aria-pressed="true"] span,.os-icon:focus-visible span{background:#e9eeff;color:#06124a;text-shadow:none}
.os-icon:focus-visible{outline:1px dotted #e9eeff;outline-offset:0}
.os-icon small{display:block;font-size:8.5px;letter-spacing:.1em;color:var(--os-amber)}

/* ---------- windows ---------- */
.os-windows{position:absolute;inset:0;z-index:5;pointer-events:none}
.os-win{position:absolute;pointer-events:auto;display:flex;flex-direction:column;background:var(--os-win);border:1.5px solid #e9eeff;box-shadow:6px 6px 0 #000,0 0 0 1px #000;min-width:300px;max-width:calc(100% - 24px);max-height:calc(100% - 24px);animation:os-win-in .32s cubic-bezier(.2,1.2,.4,1) both}
.os-win.closing{animation:os-win-out .18s ease-in both}
@keyframes os-win-in{from{opacity:0;transform:scale(.6) translateY(30px);filter:brightness(3)}to{opacity:1;transform:none;filter:none}}
@keyframes os-win-out{to{opacity:0;transform:scale(.85);filter:brightness(2)}}
.os-win-bar{flex:none;display:flex;align-items:center;gap:10px;height:30px;padding:0 6px 0 10px;background:#e9eeff;color:#06124a;font:700 11px var(--os-mono);letter-spacing:.06em;cursor:grab;touch-action:none;user-select:none}
.os-win:not(.focused) .os-win-bar{background:#9aa6dc}
.os-win-bar .stripes{flex:1;height:11px;background:repeating-linear-gradient(0deg,#06124a 0 1.5px,#0000 1.5px 3.5px);opacity:.55}
.os-win-bar button{width:22px;height:20px;display:grid;place-items:center;background:#e9eeff;border:1.5px solid #06124a;color:#06124a;font:700 12px/1 var(--os-mono);padding:0}
.os-win-bar button:hover{background:#06124a;color:#e9eeff}
.os-win-body{flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#5063d8 #0b1654}
.os-win[data-kind="case"]{width:min(980px,calc(100% - 150px));height:calc(100% - 40px)}
.os-win-status{flex:none;display:flex;justify-content:space-between;gap:12px;height:24px;align-items:center;padding:0 10px;border-top:1.5px solid #2b3ea8;font:9px var(--os-mono);letter-spacing:.1em;color:var(--os-dim);white-space:nowrap;overflow:hidden}

/* ---------- case files ---------- */
.case{--accent:#ffb547;--accent-ink:#06124a;color:var(--os-phosphor)}
.case-stage{position:relative;aspect-ratio:1600/820;background:#050a26;border-bottom:1.5px solid #2b3ea8;overflow:hidden}
.case-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.case-stage-ui{position:absolute;left:14px;right:14px;bottom:12px;display:flex;justify-content:space-between;align-items:end;gap:10px;pointer-events:none;z-index:2}
.case-stage-ui .sr-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.case-stage-ui{justify-content:flex-end}
.case-stage-ui span{font:9px/1.5 var(--os-mono);letter-spacing:.12em;color:#b6c0f0;background:#050a26cc;padding:4px 7px}
.case-stage-ui button{pointer-events:auto;font:10px var(--os-mono);letter-spacing:.1em;background:#050a26;color:#e9eeff;border:1px solid #4a5cc0;padding:7px 10px}
.case-stage-ui button:hover{border-color:var(--accent);color:var(--accent)}
.case-head{position:relative;display:grid;grid-template-columns:1fr auto;gap:18px 26px;align-items:end;padding:30px clamp(20px,4vw,44px) 8px}
.case-eyebrow{grid-column:1/-1;margin:0;font:10px var(--os-mono);letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.case-name{margin:0;font:900 clamp(56px,9vw,124px)/.8 var(--os-display);text-transform:uppercase;letter-spacing:-.015em;color:#fff}
.case-line{grid-column:1;margin:4px 0 0;font:500 clamp(18px,2vw,24px)/1.3 var(--os-body);letter-spacing:-.02em;color:#dfe5ff;max-width:34ch}
.stamp{grid-column:2;grid-row:2/4;align-self:center;justify-self:end;transform:rotate(-8deg);border:3px solid var(--accent);color:var(--accent);padding:8px 14px 6px;text-align:center;font:900 clamp(22px,2.6vw,34px)/.9 var(--os-display);letter-spacing:.02em;text-transform:uppercase;mix-blend-mode:screen;animation:os-stamp .5s .5s cubic-bezier(.2,1.8,.4,1) both;background:radial-gradient(circle at 30% 40%,#0000 60%,#050a2688 61%) , none}
.stamp small{display:block;font:700 9px/1.4 var(--os-mono);letter-spacing:.14em;margin-top:5px}
@keyframes os-stamp{from{opacity:0;transform:rotate(-8deg) scale(2.4)}to{opacity:1;transform:rotate(-8deg) scale(1)}}
.case-body{padding:14px clamp(20px,4vw,44px) 40px}
.case-lede{font-size:16px;line-height:1.75;color:#c9d1f5;max-width:66ch;margin:10px 0 30px}
.case-lede b{color:#fff;font-weight:600}
.case h3{margin:40px 0 14px;font:700 10px var(--os-mono);letter-spacing:.18em;color:var(--os-dim);text-transform:uppercase;display:flex;align-items:center;gap:12px}
.case h3::after{content:'';flex:1;height:1px;background:repeating-linear-gradient(90deg,#3a4cb4 0 4px,#0000 4px 8px)}

.case-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border:1.5px solid #2b3ea8;background:#071048}
.case-stats div{padding:16px 16px 14px;border-right:1.5px solid #2b3ea8;border-bottom:1.5px solid #2b3ea8;margin:0 -1.5px -1.5px 0}
.case-stats b{display:block;font:800 clamp(30px,3.4vw,44px)/.95 var(--os-display);color:#fff;font-variant-numeric:tabular-nums}
.case-stats b em{font-style:normal;color:var(--accent)}
.case-stats b span{font:inherit;display:inline;margin:0;color:inherit;letter-spacing:inherit}
.case-stats > div > span{display:block;margin-top:6px;font:9.5px/1.45 var(--os-mono);letter-spacing:.06em;color:var(--os-dim)}

.rad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.rad article{position:relative;padding:18px 18px 16px 18px;background:#0a1660;border:1.5px solid #2b3ea8;box-shadow:4px 4px 0 #000}
.rad article::before{content:attr(data-k);position:absolute;right:12px;top:10px;font:9px var(--os-mono);letter-spacing:.14em;color:var(--accent)}
.rad h4{margin:0 0 8px;padding-right:74px;font:700 17px/1.25 var(--os-body);letter-spacing:-.01em;color:#fff}
.rad p{margin:0;font-size:13.5px;line-height:1.65;color:#b7c1ec}

.split{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid #2b3ea8}
.split > div{padding:16px 18px}
.split > div + div{border-left:1.5px solid #2b3ea8;background:#071048}
.split h5{margin:0 0 10px;font:700 10px var(--os-mono);letter-spacing:.14em;color:var(--accent)}
.split ul{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.55;color:#c3cbf2}
.split li{padding:5px 0 5px 18px;position:relative}
.split li::before{content:'↳';position:absolute;left:0;color:var(--os-dim);font-family:var(--os-mono);font-size:11px}

.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.shots button{position:relative;padding:0;border:1.5px solid #2b3ea8;background:#050a26;text-align:left;color:inherit;box-shadow:4px 4px 0 #000;transition:transform .2s}
.shots button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000;border-color:var(--accent)}
.shots img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.shots span{display:block;padding:8px 10px;font:9.5px/1.45 var(--os-mono);color:#aeb9ea}
.shots .play{position:absolute;left:10px;top:10px;font:700 10px var(--os-mono);background:var(--accent);color:var(--accent-ink);padding:4px 7px}
.case-link{display:inline-flex;gap:14px;align-items:center;margin-top:34px;padding:12px 16px;background:var(--accent);color:var(--accent-ink);font:700 11px var(--os-mono);letter-spacing:.1em;box-shadow:4px 4px 0 #000;border:1.5px solid #000}
.case-link:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #000}
.case-note{font:10px/1.7 var(--os-mono);color:var(--os-dim);margin-top:16px;max-width:70ch}
.case-note a{color:#dfe5ff;text-decoration:underline}

/* lightbox inside the tube */
.os-lightbox{position:absolute;inset:0;z-index:35;display:grid;grid-template-rows:1fr auto;gap:10px;padding:clamp(16px,3vw,40px);background:#020719f2}
.os-lightbox[hidden]{display:none}
.os-lightbox figure{margin:0;display:grid;place-items:center;min-height:0}
.os-lightbox img,.os-lightbox video{max-width:100%;max-height:100%;border:1.5px solid #e9eeff;box-shadow:8px 8px 0 #000;background:#000}
.os-lightbox .lb-bar{display:flex;gap:10px;align-items:center;justify-content:space-between;font:10px var(--os-mono);letter-spacing:.08em;color:#c8d0f5}
.os-lightbox .lb-bar button{background:#e9eeff;color:#06124a;border:0;font:700 12px var(--os-mono);padding:8px 12px;min-width:40px}

/* ---------- swarm.exe ---------- */
.os-win[data-kind="swarm"]{width:min(900px,calc(100% - 150px));height:min(620px,calc(100% - 40px))}
.swarm{display:grid;grid-template-rows:1fr 150px;height:100%;background:#020617}
.swarm canvas{width:100%;height:100%;display:block}
.swarm-log{margin:0;padding:10px 14px;overflow:hidden;border-top:1.5px solid #2b3ea8;font:10.5px/1.6 var(--os-mono);color:#9fb0f0;background:#030b2e}
.swarm-log .t{color:#5d6db8}.swarm-log .ok{color:#7dffb0}.swarm-log .a{color:var(--os-amber)}.swarm-log .p{color:#ff6fb0}
.swarm-legend{position:absolute;left:12px;top:40px;font:9px/1.7 var(--os-mono);letter-spacing:.08em;color:#8f9bd6;background:#020617cc;padding:6px 9px;border:1px solid #1d2a78;pointer-events:none}

/* ---------- text docs (readme, resume) ---------- */
.os-win[data-kind="doc"]{width:min(760px,calc(100% - 150px));height:min(760px,calc(100% - 40px))}
.doc{padding:28px clamp(20px,4vw,44px) 44px;background:#f3f1ea;color:#101010;min-height:100%;font:14px/1.7 var(--os-body)}
.doc h1{font:900 clamp(46px,6vw,72px)/.84 var(--os-display);text-transform:uppercase;margin:0 0 6px;letter-spacing:-.01em}
.doc .role{font:11px var(--os-mono);letter-spacing:.12em;text-transform:uppercase;color:#3040c8;margin:0 0 20px}
.doc h2{font:700 10px var(--os-mono);letter-spacing:.18em;text-transform:uppercase;border-bottom:1.5px solid #101010;padding-bottom:6px;margin:28px 0 12px}
.doc h3{font:700 15px/1.3 var(--os-body);margin:16px 0 2px}
.doc h3 span{font:10px var(--os-mono);color:#555;letter-spacing:.06em;margin-left:6px;font-weight:400}
.doc ul{margin:6px 0;padding-left:18px}.doc li{margin:3px 0}
.doc .doc-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px}
.doc .doc-actions a{font:700 11px var(--os-mono);letter-spacing:.08em;padding:10px 14px;border:1.5px solid #101010;background:#101010;color:#f3f1ea;box-shadow:3px 3px 0 #3040c8}
.doc .doc-actions a + a{background:#f3f1ea;color:#101010}

/* ---------- small screens: windows go full-tube ---------- */
@media (max-width:760px){
 .crt{border-radius:0;box-shadow:none}.crt-screen{inset:0;border-radius:0}
 .os-hide-sm{display:none}
 .os-menubar{gap:12px;font-size:10px}
 .os-icons{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-template-rows:none;right:10px;left:10px;justify-items:center;gap:4px}
 .os-icon{width:100%}
 .os-wallpaper{width:auto;left:6%;right:6%;bottom:5%}
 .os-win,.os-win[data-kind]{left:0!important;top:0!important;width:100%!important;height:100%!important;max-width:none;max-height:none;border:0;box-shadow:none}
 .os-win-bar{height:40px}.os-win-bar button{width:32px;height:28px}
 .case-head{grid-template-columns:1fr}.stamp{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}
 .split,.rad{grid-template-columns:1fr}.split > div + div{border-left:0;border-top:1.5px solid #2b3ea8}
 .swarm{grid-template-rows:1fr 170px}
}
@media (prefers-reduced-motion:reduce){
 .room-wrap{transition:none}
 .cool-os.powering .crt-screen,.cool-os.powering-off .crt-screen,.os-win,.stamp,.crt-flicker{animation:none!important}
}

.os-win-body:focus{outline:none}
.shots-note{margin:-6px 0 14px}
.os-lightbox img,.os-lightbox video{max-height:calc(100svh - 150px);width:auto;height:auto;object-fit:contain}