@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Space+Mono&display=swap');
:root{--acid:#d7ff32;--ink:#15160f;--paper:#e8e2cf;--muted:#8d8b79}*{box-sizing:border-box}body{margin:0;background:#11120e;color:var(--paper);font-family:"Noto Serif SC",serif;overflow:hidden}.app{height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-rows:76px 1fr;background:#181914}header{grid-column:1/3;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #3c3c31}.brand{display:flex;align-items:baseline;gap:18px}.brand span,.status,.panel small,.chapter span,.corner-note{font:10px "Space Mono";letter-spacing:.15em}.brand b{font-size:22px}.status{display:flex;gap:18px;align-items:center}.status i{width:7px;height:7px;background:var(--acid);border-radius:50%;box-shadow:0 0 12px var(--acid)}.status em{font-style:normal;color:#969684}.status em b{color:var(--acid)}.stage-wrap{position:relative;padding:30px 38px 28px;min-width:0}.chapter{height:48px;display:flex;justify-content:space-between;align-items:flex-start}.chapter span{color:var(--acid)}.chapter strong{font-weight:400;font-size:14px}.stage{position:relative;width:100%;height:calc(100vh - 184px);min-height:460px;overflow:hidden;background-image:url('assets/paintings-triptych.png');background-size:100% 300%;background-repeat:no-repeat;cursor:none;box-shadow:0 20px 60px #0008}.scene-0{background-position:center top}.scene-1{background-position:center center}.scene-2{background-position:center bottom}.grain{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}.corner-note{position:absolute;right:16px;top:16px;color:var(--acid);z-index:9;text-align:right}.objects{position:absolute;inset:0}.art-object{position:absolute;z-index:4;display:grid;place-items:center;filter:drop-shadow(0 9px 8px #0007);transition:filter .2s;user-select:none}.art-object:hover,.art-object.targeted{filter:drop-shadow(0 0 12px var(--acid));}.art-object .shape{width:100%;height:100%;background:radial-gradient(circle at 35% 30%,var(--c1),var(--c2) 65%,#19160f);border:2px solid #d5d0ac55;box-shadow:inset 0 0 13px #0007;border-radius:48% 52% 46% 54%;position:relative}.art-object.cloud .shape{border-radius:50%;filter:blur(.4px);background:radial-gradient(ellipse at 30% 60%,#eee7cf,#a4a18d 55%,#393c34);box-shadow:22px 8px 0 -4px #bab5a1,-24px 11px 0 -8px #d2cdbb}.art-object.flower .shape{background:repeating-conic-gradient(#ede3c5 0 14deg,#756d53 15deg 25deg);border-radius:50%;}.art-object.window .shape{border:7px ridge #6b5133;border-radius:0;background:linear-gradient(#76877a,#cbc4a2);box-shadow:inset 0 0 0 2px #211;}.art-object.hand .shape{background:#a98261;border-radius:60% 30% 45% 50%;transform:rotate(18deg)}.art-object.hat .shape{border-radius:50% 50% 25% 25%;background:linear-gradient(140deg,#ad7e35,#3b2a15);box-shadow:-20px 20px 0 -10px #4a3219}.scars{position:absolute;inset:0;z-index:2}.scar{position:absolute;border-radius:45%;background:repeating-linear-gradient(83deg,#d5c7a2 0 2px,#6e6046 3px 5px,#332e21 6px 9px);filter:sepia(1);box-shadow:inset 0 0 18px #1c180f,0 0 24px #342a19;animation:reveal .7s}.scar:after{content:'UNDERDRAWING  /  //' ;position:absolute;inset:20%;font:8px Space Mono;color:#1b1c14;transform:rotate(-8deg)}@keyframes reveal{from{transform:scale(.2);opacity:0}}.claw{position:absolute;z-index:11;width:92px;height:125px;transform:translate(-50%,-12px);left:50%;top:15%;pointer-events:none;filter:drop-shadow(0 8px 10px #000)}.cable{position:absolute;left:44px;bottom:95px;width:4px;height:300px;background:repeating-linear-gradient(#bfc0aa 0 8px,#2d302a 9px 13px)}.hub{position:absolute;left:27px;top:22px;width:38px;height:34px;border:6px double #b7b7a0;background:#34352e;border-radius:7px}.jaw{position:absolute;top:52px;width:39px;height:58px;border:6px solid #c5c4ae;border-top:0;transition:transform .2s}.jaw.left{left:6px;border-right:0;border-radius:0 0 0 28px;transform:rotate(-10deg)}.jaw.right{right:6px;border-left:0;border-radius:0 0 28px 0;transform:rotate(10deg)}.claw.closed .jaw.left{transform:rotate(16deg) translateX(8px)}.claw.closed .jaw.right{transform:rotate(-16deg) translateX(-8px)}canvas{position:absolute;inset:0;z-index:7;pointer-events:none}.whisper{position:absolute;z-index:10;left:50%;bottom:20px;transform:translateX(-50%);padding:8px 14px;background:#161710c9;color:#d8d3c0;font-size:12px;opacity:0;transition:.4s}.whisper.show{opacity:1}.gallery-nav{height:32px;display:flex;justify-content:center;gap:22px;align-items:end}.gallery-nav button{background:none;border:0;color:#aaa993;font-size:22px;cursor:pointer}.dots{display:flex;gap:8px;padding-bottom:5px}.dots button{width:28px;height:2px;padding:0;background:#626254}.dots button.active{background:var(--acid)}.panel{border-left:1px solid #3c3c31;padding:35px 28px 22px;display:flex;flex-direction:column;gap:18px;min-height:0}.instruction small,.voice-box small,.object-list small{color:var(--acid)}h1{font-size:40px;line-height:1.18;margin:12px 0 14px;font-weight:500}.instruction p{font-size:12px;line-height:1.9;color:#aaa895;margin:0}.gesture-demo{height:56px;border-top:1px solid #454536;border-bottom:1px solid #454536;display:flex;align-items:center;gap:15px;font-size:11px;color:#aaa}.hand{font-size:25px;color:var(--acid);animation:pulse 2s infinite}@keyframes pulse{50%{transform:scale(.75);filter:drop-shadow(0 0 8px var(--acid))}}.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.controls button,.footer-actions button,#restartBtn{border:1px solid #5d5e4e;background:#25261f;color:#e1ddcd;padding:11px 6px;font:11px "Noto Serif SC";cursor:pointer}.controls button:hover,#restartBtn:hover{border-color:var(--acid);color:var(--acid)}.voice-box{background:#202119;padding:14px}.voice-box div{font-size:12px;color:#bdb9a8;margin-top:8px;min-height:20px}.object-list{min-height:82px}.object-list>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.chip{font:10px Space Mono;border:1px solid #5b5b4e;padding:5px 7px;color:#aaa}.chip.taken{color:var(--acid);border-color:var(--acid)}.footer-actions{margin-top:auto;display:flex;justify-content:space-between}.footer-actions button{border:0;background:none;padding:0}.footer-actions button:last-child{color:var(--acid)}#camera{display:none}.result{position:fixed;inset:0;background:#11120ef5;z-index:30;padding:7vh 7vw;opacity:0;pointer-events:none;transition:.5s}.result.open{opacity:1;pointer-events:auto}.result>button{position:absolute;right:5vw;top:4vh;background:none;border:0;color:#eee;font-size:34px;cursor:pointer}.result>small{font:11px Space Mono;color:var(--acid);letter-spacing:.15em}.result-grid{height:75vh;margin-top:4vh;display:grid;grid-template-columns:1.25fr .75fr;gap:6vw;align-items:center}.final-art{padding:16px;background:#e8e2cf12}.final-art .stage{height:60vh;min-height:0;cursor:default}.result h2{font-size:42px;font-weight:400;margin:15px 0}.result p{color:var(--acid);font-size:13px}.result blockquote{margin:0 0 35px;padding:0;font-size:14px;line-height:2;color:#bcb8a7}.stats{display:flex;gap:35px;border-top:1px solid #444438;padding-top:18px;font-size:10px;color:#77776c}.stats b{display:block;color:#ded9c8;margin-top:6px}.result #restartBtn{margin-top:32px;padding:12px 24px}@media(max-width:850px){body{overflow:auto}.app{height:auto;min-height:100vh;grid-template-columns:1fr;grid-template-rows:65px auto auto}header{grid-column:1;padding:0 15px}.stage-wrap{padding:20px 14px}.stage{height:58vh;min-height:400px}.panel{border-left:0;border-top:1px solid #444}.result{padding:5vh 5vw;overflow:auto}.result-grid{grid-template-columns:1fr;height:auto}.final-art .stage{height:40vh}.status em{display:none}}