:root{color-scheme:dark;font-family:"IBM Plex Mono",monospace;background:#100403;color:#f0c2a2}
*{box-sizing:border-box}html,body,#world{width:100%;height:100%;margin:0;overflow:hidden}body{background:#100403}#world{display:block;filter:contrast(1.13) saturate(.8)}
header{position:fixed;z-index:8;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:17px 22px;font:700 11px/1 "Doto",sans-serif;letter-spacing:.28em;text-shadow:0 1px 8px #000;pointer-events:none}header a{color:#ffd2b6;text-decoration:none;pointer-events:auto}header strong{text-align:center}header span{text-align:right;color:#ce7059}
.objective{position:fixed;z-index:8;left:22px;top:64px;display:grid;gap:5px;text-shadow:0 2px 10px #000}.objective small{font:700 8px/1 "Doto",sans-serif;letter-spacing:.25em;color:#b76552}.objective b{font:500 13px/1.3 "IBM Plex Mono",monospace;letter-spacing:.08em;color:#ffe1cb}.objective span{margin-top:3px;font:700 7px "Doto";letter-spacing:.18em;color:#8d655c}
#dangerState{position:fixed;z-index:9;left:22px;top:128px;display:flex;gap:8px;align-items:center;font:700 8px "Doto";letter-spacing:.2em;color:#8b5a50;opacity:.72;transition:.2s}#dangerState small{font-size:7px}#dangerState[data-state="SEARCH"]{color:#e79a61;opacity:1}#dangerState[data-state="DETECTED"]{color:#ff5a39;opacity:1;text-shadow:0 0 12px #ff2500;animation:dangerPulse .38s steps(2) infinite}@keyframes dangerPulse{50%{transform:translateX(2px)}}
.compass{position:fixed;z-index:8;top:62px;left:50%;transform:translateX(-50%);display:flex;gap:15px;align-items:center;font:700 8px "Doto";letter-spacing:.12em;color:#7f4338}.compass b{color:#ffe1cb;font-size:12px}.compass i{position:absolute;width:20px;height:1px;background:#ff7951;bottom:-10px;left:50%;transform-origin:left center}
.reticle{position:fixed;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);font:15px "IBM Plex Mono";color:#ff7b54;text-shadow:0 0 8px #ff401f}.controls{position:fixed;z-index:8;bottom:16px;left:50%;transform:translateX(-50%);white-space:nowrap;font:700 8px "Doto";letter-spacing:.18em;color:#eaa184;text-shadow:0 1px 8px #000}
.radiation{position:fixed;z-index:7;inset:0;pointer-events:none;opacity:.38;background:repeating-linear-gradient(0deg,rgba(255,240,218,.026) 0,rgba(255,240,218,.026) 1px,transparent 1px,transparent 3px),linear-gradient(90deg,transparent 0 49.7%,rgba(218,155,122,.018) 50%,transparent 50.3%),radial-gradient(circle at 50% 44%,transparent 34%,rgba(15,0,0,.48) 100%);mix-blend-mode:screen}.radiation:before{content:"";position:absolute;inset:0;background:linear-gradient(104deg,transparent 0 48%,rgba(255,215,174,.05) 49%,transparent 54%);animation:shimmer 8s ease-in-out infinite}.radiation:after{content:"";position:absolute;inset:-40%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.93' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");animation:static .14s steps(2) infinite;opacity:.24}
@keyframes shimmer{0%,70%,100%{transform:translateX(-35%);opacity:0}74%{opacity:1}88%{transform:translateX(35%);opacity:.15}}
@keyframes static{0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-2%)}}
#loading{position:fixed;z-index:20;inset:0;display:grid;place-items:center;background:#0b0202;transition:opacity .8s,visibility .8s}#loading.done{opacity:0;visibility:hidden}#loading div{width:min(420px,78vw);display:grid;gap:14px;text-align:center}#loading b{font:700 18px "Doto";letter-spacing:.25em}#loading span{font-size:11px;color:#a55b48}#loading i{height:1px;background:#3b1712;overflow:hidden}#loading i:after{content:"";display:block;width:38%;height:100%;background:#ff6a42;animation:load 1.2s ease-in-out infinite}@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(365%)}}
#notice{position:fixed;z-index:12;left:50%;bottom:96px;transform:translateX(-50%);padding:10px 14px;border:1px solid #8b4534;background:rgba(19,5,4,.84);font-size:11px;letter-spacing:.08em;color:#ffd5ba}
#interaction,#orbCommand{position:fixed;z-index:12;left:50%;top:calc(50% + 42px);transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid rgba(255,126,82,.52);background:rgba(12,3,3,.82);font:700 9px "Doto";letter-spacing:.18em;color:#ffd9c1;pointer-events:none}#interaction[hidden],#orbCommand[hidden]{display:none}kbd{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border:1px solid #bd654d;background:#270c09;color:#fff0df;font:500 11px "IBM Plex Mono"}
#dialogue{position:fixed;z-index:14;top:11vh;right:2vw;width:min(30vw,430px);height:76vh;display:grid;grid-template-rows:30px auto minmax(0,1fr);border:0;background:linear-gradient(90deg,transparent,rgba(11,3,4,.16) 58%,rgba(11,3,4,.34));box-shadow:none;transform:translateX(0);opacity:1;visibility:visible;transition:transform .22s ease,opacity .2s ease,visibility 0s;overflow:visible;text-shadow:0 2px 10px #050000,0 0 12px rgba(255,116,78,.18)}#dialogue[hidden]{display:grid;transform:translateX(24px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .22s ease,opacity .18s ease,visibility 0s .22s}.zoe-signal{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:3px 2px;border:0;background:none}.zoe-signal>i{width:1px;height:7px;background:#d9aa83;animation:zoeWave 1.35s ease-in-out infinite}.zoe-signal>i:nth-child(2){animation-delay:-.2s}.zoe-signal>i:nth-child(3){animation-delay:-.55s}.zoe-signal>i:nth-child(4){animation-delay:-.85s}.zoe-signal>i:nth-child(5){animation-delay:-1.05s}@keyframes zoeWave{50%{height:18px;background:#82aaa1}}.speaker{padding:9px 2px 11px;display:grid;grid-template-columns:1fr auto;gap:5px;border:0;border-bottom:1px solid rgba(213,130,98,.22)}.speaker small{grid-column:1/-1;font:700 7px "Doto";letter-spacing:.2em;color:#b96e58}.speaker b{font:700 17px "Doto";letter-spacing:.22em;color:#ffad89}.speaker span{font:700 6px "Doto";letter-spacing:.16em;color:#86aaa2}.dialogue-copy{padding:13px 2px 8px;min-height:0;overflow:visible;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}.dialogue-copy p{margin:0 0 12px;padding:8px 4px 8px 13%;white-space:pre-line;text-align:right;font:400 11px/1.55 "IBM Plex Mono";color:#f8dac8;background:linear-gradient(90deg,transparent,rgba(12,3,4,.2))}.question-label{margin:5px 0 8px;text-align:right;font:700 6px "Doto";letter-spacing:.18em;color:#93675e}#dialogueChoices{overflow-y:auto;overscroll-behavior:contain;padding:0 2px 0 12%;scrollbar-width:thin;scrollbar-color:#784437 transparent}.dialogue-copy button{display:block;width:100%;margin:0 0 3px;padding:7px 3px 7px 12px;text-align:left;border:0;border-left:1px solid rgba(190,106,81,.18);background:linear-gradient(90deg,rgba(27,7,6,.12),transparent);color:#c99280;font:500 10px/1.35 "IBM Plex Mono";letter-spacing:.03em;cursor:pointer;text-shadow:0 2px 8px #000}.dialogue-copy button:hover,.dialogue-copy button.selected{border-left-color:#ff936d;color:#ffe6d5;background:linear-gradient(90deg,rgba(91,26,17,.46),transparent 86%);box-shadow:-7px 0 18px rgba(255,84,43,.11)}.dialogue-copy button.quest:after{content:"OBJECTIVE";float:right;font:700 6px "Doto";letter-spacing:.13em;color:#e3b36e}
#zoeVisual{position:relative;height:82px;margin:0 0 10px;border:0;border-block:1px solid rgba(125,153,145,.22);overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(118,166,154,.09),transparent 62%),repeating-linear-gradient(90deg,transparent 0 31px,rgba(222,183,145,.035) 32px)}#zoeVisual[hidden]{display:none}#zoeVisual:before,#zoeVisual:after{content:"";position:absolute;inset:15px 32px;border:1px solid rgba(219,173,132,.5);border-radius:50%;animation:signalRing 2.4s ease-out infinite}#zoeVisual:after{inset:25px 68px;animation-delay:-1.2s}@keyframes signalRing{0%{transform:scale(.55);opacity:.15}55%{opacity:.7}100%{transform:scale(1.2);opacity:0}}#zoeVisual[data-visual="moon"]{background:radial-gradient(circle at 34% 50%,transparent 0 17px,#d7b188 18px 19px,transparent 20px),linear-gradient(12deg,transparent 49%,rgba(123,160,154,.45) 50%,transparent 51%)}#zoeVisual[data-visual="city"]{background:repeating-linear-gradient(90deg,transparent 0 24px,rgba(199,150,116,.34) 25px 27px,transparent 28px 42px),repeating-linear-gradient(0deg,transparent 0 16px,rgba(106,145,138,.18) 17px 18px)}#zoeVisual[data-visual="shadow"]{background:radial-gradient(circle at 50% 50%,rgba(125,169,158,.28) 0 5px,transparent 6px),repeating-radial-gradient(circle at 50% 50%,transparent 0 12px,rgba(207,163,128,.28) 13px 14px)}#zoeVisual[data-visual="doorDiagnostic"]{background:linear-gradient(90deg,transparent 47%,rgba(255,137,93,.45) 48% 52%,transparent 53%),repeating-linear-gradient(0deg,transparent 0 14px,rgba(125,163,153,.18) 15px 16px)}
#inventory{position:fixed;z-index:9;right:20px;bottom:42px;max-width:260px;text-align:right}#inventory[hidden]{display:none}#inventory small{display:block;margin-bottom:5px;font:700 7px "Doto";letter-spacing:.2em;color:#9f5847}#inventoryItems{font-size:9px;letter-spacing:.08em;color:#db9a82}
#archive{position:fixed;z-index:9;right:20px;top:62px;font:700 8px "Doto";letter-spacing:.18em;color:#985343}#archive b{margin-left:7px;color:#ff9a78}#archivePulse.new{color:#bfffaa;text-shadow:0 0 12px #55ff7b}
#orbCommand{top:calc(50% + 82px);border-color:#76c58a;color:#baffc7}#orbCommand kbd{border-color:#5da473}
#fade{position:fixed;z-index:18;inset:0;pointer-events:none;background:#090102;opacity:0;transition:opacity .7s}#fade.active{opacity:1}
#levelComplete{position:fixed;z-index:19;inset:0;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,#1f0907,#050101 75%);color:#f0b397}#levelComplete[hidden]{display:none}#levelComplete small{font:700 8px "Doto";letter-spacing:.35em}#levelComplete h1{margin:22px 0 6px;font:700 clamp(28px,5vw,64px) "Doto";letter-spacing:.24em;color:#ffd4bc}#levelComplete p{font-size:11px;letter-spacing:.35em;color:#8e4b3d}#levelComplete b{margin-top:38px;font:700 12px "Doto";letter-spacing:.28em;color:#78d68f}
.overlay-panel{position:fixed;z-index:17;inset:0;display:grid;place-content:center;text-align:center;background:rgba(6,1,1,.82);backdrop-filter:blur(5px);color:#f0b397}.overlay-panel[hidden]{display:none}.overlay-panel:before{content:"";position:absolute;inset:12%;border:1px solid rgba(173,79,57,.28);pointer-events:none}.overlay-panel small{font:700 8px "Doto";letter-spacing:.32em;color:#9d5949}.overlay-panel h2{margin:16px 0 25px;font:700 32px "Doto";letter-spacing:.23em;color:#ffe1cb}.overlay-panel p{margin-top:24px;font-size:8px;letter-spacing:.18em;color:#995444}.menu-actions{display:grid;gap:7px;min-width:min(330px,75vw)}.menu-actions button{padding:11px 18px;border:1px solid #633328;background:rgba(18,4,4,.9);color:#c88972;font:700 10px "Doto";letter-spacing:.16em;cursor:pointer}.menu-actions button:hover,.menu-actions button:focus{border-color:#ff825c;color:#ffe1cb}#inventoryPanelItems{min-width:min(440px,80vw);min-height:90px;padding:20px;border-block:1px solid #633328;font:500 12px/2 "IBM Plex Mono";letter-spacing:.09em;color:#ffd8bd;white-space:pre-line}
@media(max-width:700px){header{grid-template-columns:1fr auto;padding:14px}header strong{display:none}.objective{left:14px;top:54px}.controls{font-size:5px;max-width:94vw;overflow:hidden}.compass{top:18px}#dangerState{left:14px;top:120px}#dialogue{top:66px;right:12px;height:calc(100vh - 100px);width:min(64vw,390px)}.dialogue-copy p{padding-left:4%}#dialogueChoices{padding-left:4%}}
#zoeVisual:after{content:attr(data-label);inset:auto auto 7px 9px;border:0;border-radius:0;animation:none;padding:3px 6px;background:rgba(12,5,4,.74);color:#d7b18c;font:8px/1.2 "IBM Plex Mono",monospace;letter-spacing:1.1px}
#radioState{position:fixed;z-index:9;right:20px;bottom:76px;display:grid;justify-items:end;gap:3px;text-align:right;font:700 7px "Doto";letter-spacing:.15em;color:#8f5549;pointer-events:auto}#radioState small{color:#b46f5d}#radioState b{color:#ffb18f}#radioState a{max-width:270px;color:#9c6d60;text-decoration:none;font:500 7px "IBM Plex Mono";letter-spacing:.08em}#radioState[data-state="PLAYING"] b{color:#bff7b4;text-shadow:0 0 10px rgba(102,255,142,.42)}
#computeMeter{margin-left:auto;display:grid;grid-template-columns:auto auto;align-items:center;gap:3px 9px;min-width:165px}#computeMeter small{font:700 6px "Doto";letter-spacing:.16em;color:#75968f}#computeMeter b{font:700 12px "Doto";color:#ffd0ad;text-align:right}#computeMeter span{grid-column:1/-1;height:2px;background:#32110d;overflow:hidden}#computeMeter span i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#64a99a,#ff8c63);transition:width .55s ease}#computeMeter.low b{color:#ff6346;animation:dangerPulse .5s steps(2) infinite}
#computeDelta{position:fixed;z-index:15;right:24px;top:122px;padding:8px 11px;border:1px solid rgba(255,131,91,.5);background:rgba(12,3,3,.86);color:#ffb089;font:700 9px "Doto";letter-spacing:.15em;transition:.25s}#computeDelta[hidden]{display:none}#computeDelta.denied{color:#ff5d42;border-color:#ff5d42}
#zoeVisual[data-visual="structure"]{background:linear-gradient(147deg,transparent 0 33%,rgba(255,174,88,.5) 34% 36%,transparent 37%),repeating-linear-gradient(90deg,transparent 0 30px,rgba(104,165,151,.25) 31px 33px)}#zoeVisual[data-visual="compute"]{background:radial-gradient(circle at 22% 50%,rgba(102,187,166,.55) 0 4px,transparent 5px),linear-gradient(90deg,rgba(102,187,166,.2) 0 56%,rgba(255,108,67,.25) 56% 100%)}#zoeVisual[data-visual="signal"]{background:repeating-radial-gradient(ellipse at 18% 50%,transparent 0 10px,rgba(106,181,164,.38) 11px 12px),linear-gradient(90deg,transparent,rgba(255,125,82,.18))}

/* Zoe is a perceptual HUD, never a cursor-owned menu. Response and question
   layers are independently anchored so neither can move the other. */
#dialogue{inset:0;top:0;right:0;width:auto;height:auto;display:block;background:none;pointer-events:none;overflow:visible}
#dialogue[hidden]{display:block;opacity:0;visibility:hidden}
.zoe-identity,.zoe-response-layer,.zoe-question-layer{position:absolute;right:2vw;width:min(30vw,430px)}
.zoe-identity{top:8.5vh;display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px}
.zoe-identity .speaker{padding:9px 2px 11px}
.zoe-identity .zoe-signal{padding:3px 2px 10px}
#dialogue.active .zoe-signal>i{animation-duration:.48s}
.zoe-response-layer{top:16vh;height:31vh;overflow:hidden;mask-image:linear-gradient(#000 0 88%,transparent 100%)}
.zoe-response-layer p{margin:0;padding:8px 4px 8px 13%;max-height:17vh;overflow:hidden;white-space:pre-line;text-align:right;font:400 11px/1.52 "IBM Plex Mono";color:#f8dac8;background:linear-gradient(90deg,transparent,rgba(12,3,4,.2))}
.zoe-response-layer #zoeVisual{height:11vh;max-height:96px;margin:4px 0 0}
.zoe-question-layer{top:52vh;height:40vh;display:grid;grid-template-rows:16px minmax(0,1fr) 35px;background:linear-gradient(90deg,transparent,rgba(11,3,4,.12) 58%,rgba(11,3,4,.26))}
.zoe-question-layer .question-label{margin:0;text-align:right}
.zoe-question-layer #dialogueChoices{display:grid;grid-auto-rows:29px;overflow:hidden;padding:0 2px 0 12%}
.zoe-slot{height:29px}
.zoe-slot button{display:block;width:100%;height:27px;margin:0;padding:5px 3px 5px 12px;text-align:left;border:0;border-left:1px solid rgba(190,106,81,.18);background:linear-gradient(90deg,rgba(27,7,6,.12),transparent);color:#c99280;font:500 10px/1.35 "IBM Plex Mono";letter-spacing:.03em;text-shadow:0 2px 8px #000;transition:opacity .22s ease,transform .22s ease}
.zoe-slot button.selected{border-left-color:#ff936d;color:#ffe6d5;background:linear-gradient(90deg,rgba(91,26,17,.46),transparent 86%);box-shadow:-7px 0 18px rgba(255,84,43,.11)}
.zoe-slot button.leaving{opacity:0;transform:translateX(10px)}
.zoe-slot button.quest:after{content:"OBJECTIVE";float:right;font:700 6px "Doto";letter-spacing:.13em;color:#e3b36e}
.zoe-question-layer #dialogueChoices>button{display:block;width:100%;height:27px;margin:0;padding:5px 3px 5px 12px;text-align:left;border:0;border-left:1px solid rgba(190,106,81,.18);background:linear-gradient(90deg,rgba(27,7,6,.12),transparent);color:#c99280;font:500 10px/1.35 "IBM Plex Mono";letter-spacing:.03em;text-shadow:0 2px 8px #000}.zoe-question-layer #dialogueChoices>button.selected{border-left-color:#ff936d;color:#ffe6d5;background:linear-gradient(90deg,rgba(91,26,17,.46),transparent 86%)}
.zoe-question-layer #computeMeter{align-self:end;margin-left:auto;padding-left:12%}
@media(max-width:700px){.zoe-identity,.zoe-response-layer,.zoe-question-layer{right:12px;width:min(64vw,390px)}.zoe-identity{top:7vh}.zoe-response-layer{top:14vh;height:31vh}.zoe-question-layer{top:50vh;height:45vh}.zoe-response-layer p{padding-left:4%}.zoe-question-layer #dialogueChoices{padding-left:4%}}
#soundcloudPlayer{position:fixed;width:300px;height:120px;left:-10000px;bottom:0;border:0;opacity:0;pointer-events:none}
#partAnnotation{position:fixed;z-index:8;pointer-events:none;white-space:pre-line;max-width:260px;transform:translate(12px,-56px);font:10px/1.65 "IBM Plex Mono",monospace;letter-spacing:.03em;color:#d9e5da;text-shadow:0 1px 4px #111,0 0 7px #111;border-bottom:1px solid #b1c8ba66;padding:0 8px 5px;opacity:.82}
#computeMeter span{height:5px!important}
#computeDelta{border-left:2px solid #77c4a5;padding:10px 14px;background:#182b27d9;color:#e0f1e9}
.radiation{opacity:.17}
#tokenQuota{position:fixed;z-index:8;bottom:42px;left:22px;width:170px;color:#d6e6df;font:9px/1.8 "IBM Plex Mono";text-shadow:0 1px 4px #000;pointer-events:none}
#tokenQuota span{display:block;height:3px;background:#253c36cc}
#tokenQuota i{display:block;height:100%;width:100%;background:#80b8a5;transition:width .65s ease}
#radioState{bottom:24px!important;max-width:210px}

.objective{left:50%;top:64px;transform:translateX(-50%);text-align:center;width:min(90vw,700px)}
#dialogue .compass{top:16vh;left:auto;right:2vw;transform:none;width:min(30vw,430px);justify-content:center}
#dialogue #dangerState{top:20vh;left:auto;right:2vw;width:min(30vw,430px);justify-content:center}
#dialogue .zoe-response-layer{top:24vh}
#dialogue[hidden]{transition:transform 1.2s ease,opacity 1.2s ease,visibility 0s 1.2s;transform:translateX(40px)}
#startMenu{z-index:60;background:rgba(12,7,6,.94)}
#startMenu p{max-width:620px;line-height:1.7}
#startGame{padding:14px 42px;background:#342018;border:1px solid #c99280;color:#ffe1cb;cursor:pointer;font:inherit}
@media(max-width:700px){.objective{left:50%;top:44px}.objective b{font-size:10px}#dialogue .compass,#dialogue #dangerState{right:12px;width:min(64vw,390px)}}
#startMenu p{font-size:12px;letter-spacing:.04em;padding:0 20px}