*{box-sizing:border-box}body{margin:0;background:#080b10;color:#f5f7fa;font-family:system-ui,-apple-system,sans-serif}button,select,input{font:inherit}button{cursor:pointer}.app{height:100svh;min-height:260px;position:relative;overflow:hidden}#scene{position:absolute;inset:0;touch-action:none}#scene canvas{width:100%;height:100%;display:block}.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 35%,#080b10d9 70%,#080b10 100%),linear-gradient(180deg,#080b10bb,transparent 28%,transparent 80%,#080b10aa)}header{position:absolute;top:max(15px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));display:flex;align-items:center;gap:18px;pointer-events:none}header strong{font-size:18px;letter-spacing:2px;font-style:italic}header i{color:#f26542}header small{display:block;color:#b9c0c7;font-size:9px;letter-spacing:2px}#status{font-size:11px;padding:7px 11px;border:1px solid #65717c88;border-radius:25px;background:#10171fbb}.hint{position:absolute;bottom:20px;left:20px;color:#c2c9ce;font-size:10px;letter-spacing:1px;pointer-events:none}.panel{position:absolute;top:max(15px,env(safe-area-inset-top));bottom:max(15px,env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right));width:min(34%,330px);overflow:auto;scrollbar-color:#e96543 #12161c;padding:8px 10px 12px 15px}.panel-top{display:flex;justify-content:space-between;gap:5px;align-items:start}.eyebrow{font-size:9px;letter-spacing:2px;color:#ff916d;font-weight:800}h1{font-size:clamp(18px,2.3vw,26px);font-style:italic;line-height:1;margin:5px 0 9px}h1 span{color:#ff7651}.panel>label{display:block;margin:10px 0 5px;font-weight:800;font-size:10px;letter-spacing:1px;color:#d4dbe0}.panel label small{font-size:9px;color:#99a7b2}.panel output{float:right;color:#ff9675}.panel select{width:100%;height:36px;color:white;border:1px solid #58616b;background:#171d25;border-radius:5px;padding:0 8px}.colors,.rims{display:flex;gap:6px;align-items:center}.colors button,.picker{width:34px;height:34px;flex:none;border:2px solid #1a2027;outline:1px solid #66717b;border-radius:50%;background:var(--color);color:white}.colors button.selected{outline:2px solid #ff805a}.picker{position:relative;text-align:center;line-height:30px;background:#252b33}.picker input{position:absolute;inset:0;opacity:0;width:100%;height:100%}.secondary,.rims button,#fullscreen{background:#202832;color:#eaf0f4;border:1px solid #505c67;border-radius:4px;min-height:34px;padding:5px 9px;font-size:10px}.secondary{margin-top:7px}.selected,.rims button.selected{border-color:#ff805a;color:white;background-color:#493029}input[type=range]{width:100%;accent-color:#f27250}.rims button{flex:1;min-width:0;padding:5px 2px}.panel details{font-size:10px;line-height:1.5;color:#c1cbd2;margin-top:10px}.panel summary{cursor:pointer;color:#ffae91;font-weight:bold}.panel a{color:#ffae91}#fullscreen{white-space:nowrap}#error{position:absolute;top:35%;left:8%;background:#772d2d;padding:14px;max-width:45%;border-radius:5px}.portrait{display:none}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid white;outline-offset:2px}@media(max-height:400px){header{top:9px;left:12px}header strong{font-size:14px}.panel{top:5px;bottom:4px;right:8px}.panel>label{margin-top:7px}.panel h1{font-size:18px}.hint{bottom:9px;left:12px;font-size:9px}#fullscreen{font-size:9px}#fullscreen b{display:none}}@media(orientation:portrait){.app{min-height:600px;height:100svh;overflow:auto}.shade{background:linear-gradient(180deg,transparent 15%,#080b10dd 49%,#080b10 65%)}#scene{height:53%}.panel{top:45%;bottom:auto;right:12px;left:12px;width:auto;overflow:visible;padding:10px}.portrait{display:block;position:absolute;top:35%;left:15px;background:#131b25dd;padding:7px;font-size:10px}.hint{top:39%;bottom:auto}.panel details{padding-bottom:18px}}@media(max-width:340px){header strong{font-size:14px}#status{font-size:9px}.colors button,.picker{width:32px;height:32px}}