*{box-sizing:border-box;margin:0;padding:0}body{background:#080c10;color:#e8edf2;font-family:Inter,system-ui,sans-serif}.sidebar{position:fixed;left:0;top:0;bottom:0;width:220px;background:#0a0e14;border-right:1px solid #1a2d3d;padding:1.5rem 0;z-index:10;overflow-y:auto}.nav-logo{padding:1.25rem 1.5rem;border-bottom:1px solid #1a2d3d}.nav-logo-title{font-size:.85rem;font-weight:600}.nav-logo-sub{font-size:.7rem;color:#6b8096;margin-top:.15rem;font-family:JetBrains Mono,monospace}.nav-back{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.75rem;color:#3d5266;text-decoration:none;transition:color .15s;border-bottom:1px solid #1a2d3d}.nav-back:hover{color:#00d4ff}.nav-section{font-size:.65rem;color:#3d5266;letter-spacing:.1em;padding:1rem 1.5rem .35rem;text-transform:uppercase}.nav-item{display:flex;align-items:center;gap:.75rem;padding:.625rem 1.5rem;font-size:.8rem;color:#6b8096;cursor:pointer;transition:all .15s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.nav-item:hover{color:#e8edf2;background:#00d4ff08}.nav-item.active{color:#e8edf2;background:#00d4ff0f;border-left:2px solid #00d4ff}.main{margin-left:220px}.topbar{height:52px;border-bottom:1px solid #1a2d3d;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;background:#080c10f2;position:sticky;top:0;z-index:5}.badge{font-size:.65rem;padding:.2rem .6rem;font-family:JetBrains Mono,monospace;display:inline-block}.badge-ok{background:#00d4641f;color:#00d464;border:1px solid rgba(0,212,100,.2)}.badge-warn{background:#ffb4001f;color:#ffb400;border:1px solid rgba(255,180,0,.2)}.badge-danger{background:#ff3c3c1f;color:#f44;border:1px solid rgba(255,60,60,.2)}.badge-info{background:#0070f31f;color:#39f;border:1px solid rgba(0,112,243,.2)}.badge-demo{background:#ff8c0026;color:#ff8c00;border:1px solid rgba(255,140,0,.3);font-weight:600;letter-spacing:.08em}.status-dot{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;color:#6b8096;font-family:JetBrains Mono,monospace}.dot-stop{color:#f44}.dot-ok{color:#00d464}.section{scroll-margin-top:52px}.panel{background:#080c10;padding:1.5rem;border-bottom:1px solid #1a2d3d}.panel-title{font-size:.75rem;color:#6b8096;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.25rem;font-family:JetBrains Mono,monospace;display:flex;justify-content:space-between;align-items:center}table{width:100%;border-collapse:collapse;font-size:.82rem}th{text-align:left;padding:.5rem .75rem;color:#3d5266;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid #1a2d3d;font-weight:400}td{padding:.7rem .75rem;border-bottom:1px solid rgba(26,45,61,.5);vertical-align:middle}tr:hover td{background:#00d4ff04}tr.selected td{background:#00d4ff0d}tr.script-row{cursor:pointer}.btn{background:transparent;border:1px solid #1a2d3d;color:#6b8096;padding:.3rem .8rem;font-size:.75rem;cursor:pointer;font-family:inherit;transition:all .15s}.btn:hover:not(:disabled){border-color:#00d4ff;color:#00d4ff}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-primary{background:#00d4ff;color:#080c10;border:none;padding:.4rem 1rem;font-size:.75rem;cursor:pointer;font-weight:600;font-family:inherit;transition:background .15s}.btn-primary:hover:not(:disabled){background:#3df}.btn-primary:disabled{opacity:.35;cursor:not-allowed;background:#00d4ff}.btn-toggle{background:transparent;border:1px solid #1a2d3d;color:#6b8096;padding:.35rem 1rem;font-size:.75rem;cursor:pointer;font-family:inherit;transition:all .15s}.btn-toggle.active{background:#00d4ff1a;border-color:#00d4ff;color:#00d4ff}.btn-toggle:hover:not(.active){color:#e8edf2}.detail-panel{background:#0a0e14;border:1px solid #1a2d3d;padding:1.25rem;margin-top:1rem;display:none}.detail-panel.open{display:block}.chip{display:inline-block;background:#00d4ff12;border:1px solid rgba(0,212,255,.15);color:#6b8096;font-size:.65rem;padding:.2rem .55rem;font-family:JetBrains Mono,monospace;margin:.15rem}.ratio-bar{height:6px;background:#1a2d3d;margin:.75rem 0;position:relative;overflow:hidden}.ratio-bar-fill{height:100%;display:flex}.ratio-koharu{background:#8b5cf6}.ratio-haruto{background:#3b82f6}.code-block{background:#060a0e;border:1px solid #1a2d3d;padding:.75rem 1rem;font-family:JetBrains Mono,monospace;font-size:.72rem;color:#a0b4c8;line-height:1.6;margin-top:.75rem;max-height:180px;overflow-y:auto;white-space:pre}.form-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1rem}.form-field label{font-size:.65rem;color:#6b8096;font-family:JetBrains Mono,monospace;display:block;margin-bottom:.35rem;letter-spacing:.05em}.form-field select{width:100%;background:#0f1923;border:1px solid #1a2d3d;color:#e8edf2;padding:.45rem .75rem;font-size:.8rem;font-family:inherit;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.form-field select:focus{border-color:#00d4ff}.slider-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.slider-field label{font-size:.65rem;color:#6b8096;font-family:JetBrains Mono,monospace;display:flex;justify-content:space-between;margin-bottom:.35rem}.slider-field input[type=range]{width:100%;accent-color:#00d4ff;background:transparent;cursor:pointer}.preview-box{position:relative;width:480px;height:270px;background:#060a0e;border:1px solid #1a2d3d;overflow:hidden;margin:1rem 0}.preview-stage{position:absolute;inset:0}.char-circle{position:absolute;bottom:0;width:64px;height:64px;border-radius:50%;transform:translate(-50%);transition:left .1s,width .1s,height .1s;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:#fff9;font-family:JetBrains Mono,monospace}.char-koharu{background:radial-gradient(circle,#8b5cf699,#8b5cf61a);border:1px solid rgba(139,92,246,.4)}.char-haruto{background:radial-gradient(circle,#3b82f699,#3b82f61a);border:1px solid rgba(59,130,246,.4)}.preview-label{position:absolute;top:8px;left:10px;font-size:.6rem;color:#3d5266;font-family:JetBrains Mono,monospace}.deco-row td:first-child{font-size:1rem}.pipeline{display:flex;align-items:center;gap:0;overflow-x:auto;padding:1.5rem 0}.pipe-step{display:flex;align-items:center}.pipe-node{background:#0a0e14;border:1px solid #1a2d3d;padding:.75rem 1rem;text-align:center;min-width:110px}.pipe-node-label{font-size:.65rem;color:#3d5266;font-family:JetBrains Mono,monospace;margin-bottom:.25rem}.pipe-node-name{font-size:.78rem;color:#e8edf2}.pipe-node.highlight{border-color:#00d4ff;background:#00d4ff0a}.pipe-node.highlight .pipe-node-name{color:#00d4ff}.pipe-arrow{color:#3d5266;font-size:1rem;padding:0 .25rem;flex-shrink:0}.demo-banner-bar{background:#ff8c0012;border-top:1px solid rgba(255,140,0,.2);padding:.9rem 2rem;display:flex;justify-content:space-between;align-items:center}.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:#0f1923;border:1px solid #00d4ff;color:#e8edf2;padding:.75rem 1.25rem;font-size:.8rem;z-index:100;opacity:0;transition:opacity .2s;pointer-events:none;font-family:JetBrains Mono,monospace}.toast.show{opacity:1}@media (max-width: 820px){.sidebar{position:static;width:auto;height:auto;border-right:none;border-bottom:1px solid #1a2d3d;padding:.5rem 0}.main{margin-left:0}#sec-dash{grid-template-columns:1fr 1fr!important}.form-row,.slider-grid{grid-template-columns:1fr!important}.preview-box{width:100%!important;max-width:480px;height:auto;aspect-ratio:16 / 9}.pipeline{overflow-x:auto}.panel{padding:1.25rem;overflow-x:auto}.topbar{flex-wrap:wrap;height:auto;padding:.6rem 1.25rem;gap:.5rem}}@media (max-width: 520px){#sec-dash{grid-template-columns:1fr!important}}