:root{font-family:IBM Plex Sans,Segoe UI,Tahoma,sans-serif;color:#f3f3f3;background:#0f1215;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:radial-gradient(circle at 20% 20%,#1c2631,#0b0e12 55%,#07090c)}#renderCanvas{width:100vw;height:100vh;display:block;touch-action:none}#ui{position:absolute;top:16px;left:16px;width:min(360px,92vw);max-height:calc(100vh - 32px);overflow:auto;padding:14px;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0a0e12b3;border:1px solid rgba(255,255,255,.08);box-shadow:0 16px 50px #00000073}.panel-title{font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:12px;color:#ffffffb3;margin:6px 0 10px}.panel{padding:10px;border-radius:10px;background:#141a22b3;border:1px solid rgba(255,255,255,.05);margin-bottom:12px}.control-row{display:grid;grid-template-columns:80px 1fr 52px;gap:8px;align-items:center;margin-bottom:8px;font-size:12px}.control-row input[type=range]{width:100%}.value{text-align:right;font-variant-numeric:tabular-nums;color:#fffc}.button-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.select-control{width:100%;padding:6px 10px;font-size:12px;font-family:inherit;color:#f0f4f8;background:#212b36cc;border:1px solid rgba(255,255,255,.15);border-radius:8px;cursor:pointer;transition:background .2s ease,border .2s ease}.select-control:hover{background:#344456e6}.select-control:focus{outline:none;border-color:#3ee78b80}.select-control option{background:#1a2332;color:#f0f4f8}button{border-radius:8px;border:1px solid rgba(255,255,255,.15);padding:6px 10px;font-size:12px;font-weight:600;letter-spacing:.02em;color:#f0f4f8;background:#212b36cc;cursor:pointer;transition:transform .1s ease,background .2s ease,border .2s ease}button:hover{background:#344456e6}button:active{transform:translateY(1px)}.status{margin-top:8px;font-size:12px;color:#ffffffa6}.divider{height:1px;background:#ffffff14;margin:12px 0}.hint{font-size:11px;color:#ffffff8c;line-height:1.4}.preview-label{position:absolute;pointer-events:none;border:2px solid rgba(255,255,255,.5);border-radius:6px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#ffffffb3;text-shadow:0 1px 3px rgba(0,0,0,.8)}.preview-label-left{border-color:#3ee78b;color:#3ee78b}.preview-label-right{border-color:#ffb347;color:#ffb347}@media(max-width:640px){#ui{left:8px;top:8px;padding:10px}.control-row{grid-template-columns:64px 1fr 48px}.preview-label{font-size:9px}}