:root{color-scheme:dark;--bg: #0e1014;--panel: #14181f;--text: #e8eaef;--muted: #9aa3b2;--line: #2a3140;--accent: #6bcbb8;--left-w: 240px;--right-w: 300px;font-family:IBM Plex Sans,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text)}#app{height:100%;display:flex;flex-direction:column;min-height:0}.top{flex:0 0 auto;display:flex;align-items:center;gap:1rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);background:#10141b}.brand{font-family:"IBM Plex Serif",Georgia,serif;font-size:1.25rem;letter-spacing:.02em}.hint{color:var(--muted);font-size:.82rem;flex:1}.lang-switch{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}.lang-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--muted);padding:.35rem .65rem;font:inherit;font-size:.8rem;cursor:pointer}.lang-btn+.lang-btn{border-left:1px solid var(--line)}.lang-btn.is-active{background:color-mix(in srgb,var(--accent) 22%,#10141b);color:var(--text)}.lang-btn:hover{color:var(--text)}.layout{flex:1;min-height:0;display:grid;grid-template-columns:var(--left-w) minmax(0,1fr) var(--right-w);gap:0}.panel{min-height:0;overflow:auto;background:var(--panel);padding:.9rem .85rem;display:flex;flex-direction:column;gap:1rem}.panel-left{border-right:1px solid var(--line)}.panel-right{border-left:1px solid var(--line);padding-top:.7rem}.panel-title,.block h2{margin:0 0 .45rem;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.anim-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.55rem;margin-bottom:.75rem;font-size:.82rem;color:var(--muted)}.anim-row select{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:#10141b;color:var(--text);padding:.45rem .55rem;font:inherit;font-size:.86rem;border-radius:4px}.anim-row select:disabled{opacity:.55}.anim-row select:focus{outline:1px solid color-mix(in srgb,var(--accent) 60%,transparent);border-color:var(--accent)}.block{display:flex;flex-direction:column;gap:.45rem}.block-desc{margin:0;font-size:.78rem;line-height:1.4;color:var(--muted)}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:#10141b;color:var(--text);padding:.55rem .7rem;font:inherit;font-size:.86rem;cursor:pointer;text-align:left;border-radius:4px}.btn:hover{border-color:var(--accent)}.drop-zone{display:flex;align-items:center;justify-content:center;min-height:4.5rem;padding:.85rem .75rem;border:1px dashed var(--line);border-radius:6px;background:#10141b;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease;text-align:center}.drop-zone:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--text)}.drop-zone.is-dragover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,#10141b)}.drop-title{font-size:.88rem;color:var(--muted);line-height:1.35;pointer-events:none}.drop-zone:hover .drop-title,.drop-zone.is-dragover .drop-title{color:var(--text)}.status{margin:0;color:var(--muted);font-size:.8rem;line-height:1.45;word-break:break-word;white-space:pre-wrap}.status.is-error{color:#f0a0a0}.status.is-ok{color:#a8dccf}.viewport{min-width:0;min-height:0;display:grid;place-items:center;padding:1rem;background:radial-gradient(800px 400px at 50% 0%,#1a2230 0%,transparent 60%),#0c0e12}.viewport-frame{position:relative;display:grid;place-items:center}#preview{image-rendering:pixelated;image-rendering:crisp-edges;background:#111;border:1px solid var(--line);max-width:min(100%,72vw);max-height:calc(100vh - 7rem);width:auto;height:auto}.empty-hint{position:absolute;margin:0;color:var(--muted);font-size:.9rem;pointer-events:none}.empty-hint.is-hidden{display:none}#guiHost{flex:1;min-height:0}#guiHost .lil-gui{--background-color: transparent;--widget-color: #1a1f29;--focus-color: var(--accent);--number-color: #d7efe8;--string-color: #d7efe8;width:100%!important;max-height:none;border:none;box-shadow:none}#guiHost .lil-gui.root{position:static!important;width:100%!important}#guiHost .lil-gui .title{background:transparent}@media (max-width: 960px){.layout{grid-template-columns:1fr;grid-template-rows:auto minmax(280px,1fr) auto;overflow:auto}.panel-left,.panel-right{border:none;border-bottom:1px solid var(--line)}#preview{max-height:50vh}}