@import"https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;1,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap";:root{color-scheme:dark;--ink: #f1f0e8;--muted: #9c9e92;--acid: #d9ff43;--line: rgba(231, 235, 216, .16);--panel: rgba(18, 20, 15, .78);font-family:IBM Plex Mono,monospace;font-synthesis:none}*{box-sizing:border-box}html,body,#app{width:100%;min-height:100%;margin:0}body{overflow:hidden;background:#10110d;color:var(--ink)}body:before{position:fixed;inset:0;z-index:1;pointer-events:none;content:"";opacity:.26;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");mix-blend-mode:soft-light}#scene{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab}#scene:active{cursor:grabbing}#app:after{position:fixed;inset:0;pointer-events:none;content:"";background:linear-gradient(90deg,rgba(10,11,8,.66),transparent 34%,transparent 69%,rgba(10,11,8,.58)),radial-gradient(circle at 50% 44%,transparent 17%,rgba(8,9,6,.1) 66%,rgba(4,5,3,.54) 100%)}.topbar,main,footer{position:relative;z-index:2;pointer-events:none}.topbar button,main button,main input,.light-pad{pointer-events:auto}.topbar{height:92px;margin:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:13px;align-items:center;color:inherit;text-decoration:none;font-family:Barlow Condensed,sans-serif;font-size:15px;line-height:.83;letter-spacing:.16em;pointer-events:auto}.brand b{color:var(--acid);font-size:19px}.brand-mark{position:relative;width:33px;height:35px;transform:skew(-8deg)}.brand-mark i{position:absolute;display:block;height:7px;background:var(--ink);clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}.brand-mark i:nth-child(1){width:30px;top:2px;left:0}.brand-mark i:nth-child(2){width:23px;top:13px;left:5px;background:var(--acid)}.brand-mark i:nth-child(3){width:16px;top:24px;left:10px}.status{color:var(--muted);font-size:9px;letter-spacing:.16em}.status span{display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px var(--acid);animation:pulse 2s infinite}.sound-btn,.reset-btn{border:0;color:var(--ink);font:500 10px IBM Plex Mono,monospace;letter-spacing:.08em;cursor:pointer}.sound-btn{padding:10px 0;background:none}.motion-icon{color:var(--acid);margin-right:7px}main{min-height:calc(100vh - 154px)}.intro{position:absolute;left:5.6vw;top:clamp(80px,12vh,150px);width:min(370px,29vw)}.eyebrow{margin:0 0 17px;color:var(--acid);font-size:9px;font-weight:600;letter-spacing:.25em}h1{margin:0;font:700 clamp(48px,5.2vw,82px)/.82 "Barlow Condensed",sans-serif;letter-spacing:-.035em;text-transform:uppercase}h1 em{color:transparent;font-weight:500;-webkit-text-stroke:1px rgba(241,240,232,.66)}.lede{width:min(330px,100%);margin:28px 0 30px;color:var(--muted);font-size:11px;line-height:1.9}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:7px}.mode-button{min-height:62px;padding:10px 12px;display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:#151711a8;color:var(--muted);cursor:pointer;text-align:left;transition:border-color .25s,background .25s,color .25s}.mode-button:hover,.mode-button.active{border-color:#d9ff43b8;background:#222616e0;color:var(--ink)}.mode-button.active{box-shadow:inset 2px 0 var(--acid)}.mode-button b{display:block;font:600 16px Barlow Condensed,sans-serif;letter-spacing:.08em}.mode-button small{display:block;margin-top:3px;font-size:7px;letter-spacing:.1em;color:var(--muted)}.swatch{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.28)}.foil-swatch{background:radial-gradient(circle at 30% 25%,#fff9c6 0 5%,#c9a94a 18%,#34301e 42%,#e8d17f 65%,#62604e)}.holo-swatch{background:conic-gradient(from 80deg,#5effbd,#7b7eff,#ff64c8,#ffe66e,#5effbd);box-shadow:inset 0 0 10px #fff9}.image-drop{width:100%;margin-top:8px;padding:11px 12px;display:flex;align-items:center;gap:11px;border:1px dashed rgba(231,235,216,.25);background:#0e100b8c;color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s,background .2s}.image-drop:hover{border-color:var(--acid);background:#1f2314d1}.drop-icon{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);color:var(--acid);font-size:18px}.image-drop b{display:block;font:600 14px Barlow Condensed,sans-serif;letter-spacing:.06em}.image-drop small{display:block;margin-top:3px;color:var(--muted);font:7px IBM Plex Mono,monospace;letter-spacing:.06em}.image-drop kbd{margin-left:auto;padding:4px 5px;border:1px solid var(--line);border-radius:2px;color:var(--muted);font:7px IBM Plex Mono,monospace}.history{margin-top:18px}.history-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:var(--muted);font-size:8px;letter-spacing:.12em}.history-heading small{font-size:7px;color:#c6c8bc80}.history-list{min-height:55px;display:flex;gap:7px;overflow-x:auto;padding:1px 1px 6px;scrollbar-width:thin;scrollbar-color:rgba(217,255,67,.4) transparent}.history-empty{margin:0;width:100%;min-height:48px;display:grid;place-items:center;border:1px dashed rgba(231,235,216,.12);color:#c6c8bc6b;font-size:7px;letter-spacing:.06em}.history-item{position:relative;flex:0 0 48px;width:48px;height:48px;padding:3px;border:1px solid var(--line);background:#0003;cursor:pointer;transition:border-color .2s,transform .2s}.history-item:hover{border-color:#d9ff43a6;transform:translateY(-2px)}.history-item.active{border-color:var(--acid);box-shadow:inset 0 -2px var(--acid)}.history-item img{width:100%;height:100%;display:block;object-fit:contain}.history-index{position:absolute;right:2px;bottom:1px;padding:1px 2px;background:#080906c7;color:var(--muted);font-size:6px}.controls{position:absolute;right:5.2vw;top:clamp(75px,11vh,140px);width:min(280px,23vw);padding:22px 22px 18px;border:1px solid var(--line);background:linear-gradient(145deg,#1d1f18db,#0c0d0abf);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 80px #00000038}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:27px}.panel-heading small,.light-direction small{color:var(--acid);font-size:7px;letter-spacing:.2em}.panel-heading h2{margin:3px 0 0;font:600 22px Barlow Condensed,sans-serif;letter-spacing:.05em}.panel-heading>span{padding:5px 6px;border:1px solid var(--line);color:var(--muted);font-size:8px}.control-row{display:block;margin:0 0 22px}.control-row>span{display:flex;justify-content:space-between;margin-bottom:11px;font-size:9px}.control-row b{font-weight:500}.control-row output{color:var(--muted);font-size:8px}input[type=range]{width:100%;height:2px;margin:0;appearance:none;background:linear-gradient(90deg,var(--acid) var(--fill, 50%),rgba(255,255,255,.15) var(--fill, 50%));outline:none}input[type=range]::-webkit-slider-thumb{width:10px;height:10px;appearance:none;border:2px solid #161811;border-radius:50%;background:var(--acid);box-shadow:0 0 0 1px var(--acid);cursor:pointer}input[type=range]::-moz-range-thumb{width:8px;height:8px;border:2px solid #161811;border-radius:50%;background:var(--acid);box-shadow:0 0 0 1px var(--acid);cursor:pointer}.divider{height:1px;margin:5px 0 20px;background:var(--line)}.light-direction{display:flex;align-items:center;justify-content:space-between}.light-direction b{display:block;margin-top:5px;font:500 12px Barlow Condensed,sans-serif;letter-spacing:.06em}.light-pad{position:relative;width:70px;height:55px;overflow:hidden;border:1px solid var(--line);background:#00000026;cursor:crosshair}.light-pad i{position:absolute;background:#ffffff14;pointer-events:none}.light-pad .axis-x{left:0;right:0;top:50%;height:1px}.light-pad .axis-y{top:0;bottom:0;left:50%;width:1px}#light-handle{position:absolute;z-index:2;left:68%;top:26%;width:8px;height:8px;margin:-4px;border:1px solid #111;border-radius:50%;background:var(--acid);box-shadow:0 0 8px var(--acid)}.reset-btn{width:100%;margin-top:20px;padding:10px;background:#ffffff0a;border:1px solid var(--line);color:var(--muted);transition:color .2s,border-color .2s}.reset-btn:hover{color:var(--ink);border-color:#ffffff59}.stage-label{position:absolute;left:49.2%;bottom:4.2vh;display:flex;gap:11px;align-items:center;transform:translate(-50%);color:var(--muted)}.stage-label>span{font:600 28px Barlow Condensed,sans-serif;color:#f1f0e838}.stage-label div{padding-left:11px;border-left:1px solid var(--line)}.stage-label b,.stage-label small{display:block}.stage-label b{color:var(--ink);font-size:8px;letter-spacing:.13em}.stage-label small{margin-top:4px;font-size:7px}footer{position:fixed;left:4vw;right:4vw;bottom:0;height:62px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:#c6c8bc8c;font-size:7px;letter-spacing:.16em}.legend i{display:inline-block;width:38px;height:2px;margin:0 8px 2px 0;background:linear-gradient(90deg,#55e7ff,#e367ff,#ffe252)}.drop-overlay{position:fixed;inset:18px;z-index:20;display:grid;place-items:center;border:1px dashed var(--acid);background:#090b07e0;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility .18s}.drop-overlay.active{opacity:1;visibility:visible}.drop-overlay div{text-align:center}.drop-overlay span{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 18px;border:1px solid var(--acid);border-radius:50%;color:var(--acid);font-size:25px}.drop-overlay b,.drop-overlay small{display:block}.drop-overlay b{font:600 26px Barlow Condensed,sans-serif;letter-spacing:.06em}.drop-overlay small{margin-top:8px;color:var(--muted);font-size:8px;letter-spacing:.15em}.toast{position:fixed;z-index:30;left:50%;bottom:78px;padding:10px 14px;border:1px solid var(--line);background:#0e100beb;color:var(--ink);font-size:8px;letter-spacing:.08em;transform:translate(-50%,14px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%)}.toast.error{border-color:#ff634aa6;color:#ffb09f}@keyframes pulse{50%{opacity:.35;box-shadow:0 0 3px var(--acid)}}@media(max-width:900px){body{overflow:auto}#scene{height:100svh}.status{display:none}main{min-height:calc(100svh - 92px)}.intro{left:6vw;top:45px;width:44vw}.intro h1{font-size:clamp(42px,8vw,64px)}.controls{right:4vw;top:45px;width:34vw}}@media(max-width:640px){#app:after{background:linear-gradient(180deg,rgba(8,9,6,.5),transparent 25%,transparent 62%,rgba(8,9,6,.8))}.topbar{height:70px;margin:0 5vw}.sound-btn{font-size:8px}main{min-height:calc(100svh - 70px)}.intro{top:24px;left:7vw;width:86vw}.intro h1{font-size:47px}.lede{width:78vw;margin:17px 0 18px;font-size:9px;line-height:1.65}.mode-switch{width:78vw;max-width:350px}.mode-button{min-height:51px;padding:7px 9px}.swatch{width:25px;height:25px}.image-drop{width:78vw;max-width:350px;padding:8px 9px}.drop-icon{width:25px;height:25px}.image-drop kbd{display:none}.history{width:78vw;max-width:350px;margin-top:10px}.history-list{min-height:43px}.history-item{flex-basis:40px;width:40px;height:40px}.history-empty{min-height:40px}.controls{top:auto;right:5vw;bottom:78px;width:90vw;padding:13px 16px 11px}.panel-heading{margin-bottom:10px}.panel-heading h2{font-size:18px}.control-row{margin-bottom:12px}.control-row>span{margin-bottom:7px}.divider,.light-direction{display:none}.reset-btn{position:absolute;right:14px;top:8px;width:auto;margin:0;padding:7px 9px;font-size:7px}.panel-heading>span{margin-right:112px}.stage-label{display:none}footer{height:54px;left:5vw;right:5vw}footer .legend{display:none}}@media(prefers-reduced-motion:reduce){.status span{animation:none}}