:root{--ground: #0a0b0d;--panel-bg: #111317;--ink: #d8dce6;--ink-dim: #8a90a0;--line: #232734;--accent: #e6e0d0;--mono: "Spline Sans Mono", ui-monospace, monospace;--display: "Fraunces", Georgia, serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--ground);color:var(--ink);font-family:var(--mono)}#app{display:flex;height:100vh;width:100vw;overflow:hidden}#stage{flex:1 1 auto;position:relative;min-width:0;background:var(--ground);display:flex;align-items:center;justify-content:center}#stage canvas{display:block}#panel{flex:0 0 300px;height:100%;overflow-y:auto;padding:22px 20px 40px;background:var(--panel-bg);border-left:1px solid var(--line);font-size:12px}#panel::-webkit-scrollbar{width:8px}#panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}.df-header{margin-bottom:22px}.df-title{font-family:var(--display);font-style:italic;font-weight:400;font-size:26px;line-height:1.05;margin:0 0 6px;color:var(--accent);letter-spacing:.01em}.df-sub{margin:0;font-size:11px;color:var(--ink-dim);line-height:1.4}.df-group{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}.df-group-title{display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--ink-dim);margin-bottom:12px}.df-name-wrap,.df-check-wrap{display:flex;align-items:center;gap:6px}.df-check-wrap{margin-top:10px}.df-info-icon{font-family:var(--mono);font-size:10px;line-height:1;color:var(--ink-dim);background:transparent;border:none;padding:0;cursor:pointer;opacity:.45;transition:opacity .15s ease,color .15s ease}.df-info-icon:hover,.df-info-icon.active{opacity:1;color:var(--accent)}.df-info-note{margin:6px 0 12px;padding:9px 11px;font-size:11px;line-height:1.5;color:var(--ink);background:#0d0f13;border-left:2px solid var(--accent);border-radius:0 4px 4px 0}.df-host-row,.df-seg{display:flex;gap:6px}.df-host-btn,.df-seg-btn,.df-btn{font-family:var(--mono);font-size:11px;color:var(--ink-dim);background:transparent;border:1px solid var(--line);border-radius:4px;padding:8px 10px;cursor:pointer;transition:all .15s ease;flex:1 1 auto}.df-host-btn:hover,.df-seg-btn:hover,.df-btn:hover{color:var(--ink);border-color:#39405200;border-color:#394052}.df-host-btn.active,.df-seg-btn.active{color:var(--ground);background:var(--accent);border-color:var(--accent)}.df-host-btn{padding:11px 8px;font-size:12px}.df-slider{display:block;margin-bottom:13px}.df-slider-top{display:flex;justify-content:space-between;margin-bottom:4px}.df-slider-name{color:var(--ink-dim)}.df-slider-val{color:var(--ink);font-variant-numeric:tabular-nums}.df-slider input[type=range]{width:100%;height:2px;-webkit-appearance:none;appearance:none;background:var(--line);outline:none;cursor:pointer}.df-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent)}.df-slider input[type=range]::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:var(--accent)}.df-check{display:flex;align-items:center;gap:8px;color:var(--ink-dim);cursor:pointer}.df-check input{accent-color:var(--accent)}.df-actions{display:flex;flex-wrap:wrap;gap:6px}.df-actions .df-btn{flex:1 1 44%}.df-lang{width:100%;margin-top:4px}