:root{--primary:#4f46e5;--primary-dark:#4338ca;--success:#16a34a;--danger:#dc2626;--bg:#f5f6fa;--panel:#fff;--border:#e2e4ec;--text:#1f2330;--text-dim:#6b7080;--conf-low:#e65100;--conf-mid:#f9a825;--user-edit:#2e7d32;--radius:10px;--shadow:0 1px 4px #14183c14}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:PingFang SC,Microsoft YaHei,Segoe UI,system-ui,sans-serif}#root{min-height:100vh}.app{flex-direction:column;min-height:100vh;display:flex}.app-header{color:#fff;background:linear-gradient(120deg,#312e81,#4f46e5 60%,#6d28d9);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 28px;display:flex}.app-brand{align-items:center;gap:12px;display:flex}.app-logo{font-size:34px}.app-brand h1{letter-spacing:1px;margin:0;font-size:22px}.app-brand-en{opacity:.8;margin-left:6px;font-size:14px;font-weight:400}.app-slogan{opacity:.85;margin:2px 0 0;font-size:12px}.app-nav{gap:6px;display:flex}.app-nav button{color:#fff;cursor:pointer;background:#ffffff1f;border:none;border-radius:8px;padding:9px 20px;font-size:14px;transition:background .15s}.app-nav button:hover{background:#ffffff40}.app-nav button.active{color:var(--primary-dark);background:#fff;font-weight:600}.app-main{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:24px}.app-footer{text-align:center;color:var(--text-dim);padding:16px;font-size:12px}.btn{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#fff;border-radius:8px;padding:8px 16px;font-size:14px;transition:all .15s}.btn:hover{border-color:var(--primary);color:var(--primary)}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark);color:#fff}.btn-success{background:var(--success);border-color:var(--success);color:#fff}.btn-success:hover{color:#fff;background:#15803d}.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-danger:hover{color:#fff;background:#b91c1c}.btn-ghost{background:0 0}.btn-danger-ghost{color:var(--danger);background:0 0;border-color:#f3c1c1}.btn-sm{border-radius:6px;padding:4px 10px;font-size:13px}.btn-lg{padding:12px 28px;font-size:16px}.workbench{flex-direction:column;gap:18px;display:flex}.wb-intro h2{margin:0 0 4px}.wb-intro p{color:var(--text-dim);margin:0}.wb-tabs{gap:8px;display:flex}.wb-tab{border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;background:#fff;flex:1;padding:14px;font-size:16px}.wb-tab.active{border-color:var(--primary);color:var(--primary-dark);background:#eef2ff;font-weight:600}.jianpu-input{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:12px;padding:18px;display:flex}.ji-upload-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.ji-format-hint{color:var(--text-dim);font-size:12px}.ji-tip{color:#065f46;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:8px;padding:8px 14px;font-size:13px}.ji-error{color:#991b1b;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:8px 14px;font-size:13px}.ji-toolbar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.ji-title{border:1px solid var(--border);border-radius:8px;width:200px;padding:8px 12px;font-size:14px}.ji-demos{color:var(--text-dim);flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;display:flex}.ji-help{background:#f8f9ff;border:1px dashed #c7cdf5;border-radius:8px;padding:10px 14px;font-size:13px;line-height:2}.ji-help code{background:#e9ecfd;border-radius:4px;margin:0 2px;padding:1px 6px}.ji-textarea{border:1px solid var(--border);resize:vertical;border-radius:8px;width:100%;padding:14px;font-family:Consolas,Courier New,monospace;font-size:16px;line-height:1.8}.ji-textarea:focus{border-color:var(--primary);outline:2px solid #c7d2fe}.ji-submit{align-self:flex-start}.upload-panel{grid-template-columns:1fr 1fr;gap:14px;display:grid}.up-zone{background:var(--panel);border:2px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;padding:34px 20px;transition:all .15s}.up-zone:hover{border-color:var(--primary);background:#f5f7ff}.up-icon{margin-bottom:8px;font-size:40px}.up-zone h4{margin:0 0 6px;font-size:16px}.up-zone p{color:var(--text-dim);margin:0;font-size:13px}.up-sample{grid-column:1/-1;justify-self:center}.up-error{color:var(--danger);grid-column:1/-1;margin:0}.omr-mock{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);grid-template-columns:320px 1fr;gap:18px;padding:18px;display:grid}.omr-preview{border:1px solid var(--border);border-radius:8px;max-height:300px;position:relative;overflow:hidden}.omr-preview img{object-fit:cover;width:100%;height:100%;display:block}.omr-pdf{border:none;width:100%;height:280px;display:block}.omr-scanline{background:linear-gradient(90deg,#0000,#4f46e5,#0000);height:3px;animation:1.6s linear infinite scan;position:absolute;left:0;right:0;box-shadow:0 0 12px 2px #4f46e599}@keyframes scan{0%{top:0}to{top:100%}}.omr-stages h4{margin:0 0 12px}.omr-stages ul{margin:0;padding:0;list-style:none}.omr-stages li{color:#b0b4c0;padding:6px 0;font-size:14px;transition:color .3s}.omr-stages li.done{color:var(--success)}.omr-stages li.active{color:var(--primary);font-weight:600}.ai-panel{color:#dfe3ff;border-radius:var(--radius);background:#12132b;padding:20px}.ai-title{align-items:center;gap:12px;display:flex}.ai-title h3{margin:0;font-size:17px}.ai-spinner{border:3px solid #fff3;border-top-color:#818cf8;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.ai-progress{background:#ffffff1a;border-radius:3px;height:6px;margin:14px 0;overflow:hidden}.ai-progress-fill{background:linear-gradient(90deg,#6366f1,#a78bfa);border-radius:3px;height:100%;transition:width .25s}.ai-log{max-height:210px;font-family:Consolas,monospace;font-size:13px;line-height:1.9;overflow-y:auto}.ai-log-line{opacity:0;animation:.3s forwards fadeIn}.ai-log-line.warn{color:#fbbf24}.ai-log-prefix{color:#818cf8;margin-right:6px}@keyframes fadeIn{to{opacity:1}}.ai-measure-count{color:#a5b4fc;margin-top:10px;font-size:13px}.wb-gen-preview{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.wb-review-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.wb-review-head h2{margin:0 0 4px}.wb-review-sub{color:var(--text-dim);margin:0;font-size:14px}.wb-lowconf{color:var(--conf-low)}.wb-head-actions{gap:8px;display:flex}.wb-saved-tip{color:#065f46;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:8px;padding:10px 16px}.wb-toolbar{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex}.player-bar{align-items:center;gap:12px;display:flex}.player-speed{color:var(--text-dim);align-items:center;gap:6px;font-size:13px;display:flex}.player-speed select{border:1px solid var(--border);border-radius:6px;padding:4px 8px}.export-bar{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.export-label{color:var(--text-dim);font-size:13px}.wb-main{grid-template-columns:1fr 320px;align-items:start;gap:18px;display:grid}@media (width<=980px){.wb-main{grid-template-columns:1fr}}.wb-scores{flex-direction:column;gap:16px;display:flex}.wb-score-block{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;overflow-x:auto}.wb-score-block h4{color:var(--text-dim);margin:0 0 10px;font-weight:600}.wb-score-block h4 em{color:var(--primary);font-size:12px;font-style:normal}.wb-side{flex-direction:column;gap:16px;display:flex;position:sticky;top:16px}.staff-view{min-height:120px}.staff-view svg{display:block}.jianpu-view{font-family:Times New Roman,SimSun,serif}.jp-header{gap:18px;margin-bottom:14px;font-size:15px;font-weight:600;display:flex}.jp-measures{flex-wrap:wrap;align-items:baseline;gap:4px 0;line-height:1;display:flex}.jp-measure{align-items:baseline;display:inline-flex}.jp-barline{color:#9aa0b0;margin:0 8px;font-size:20px}.jp-note{cursor:pointer;border-radius:6px;flex-direction:column;align-items:center;margin:0 3px;padding:4px 5px;transition:background .12s;display:inline-flex;position:relative}.jp-note:hover{background:#eef2ff}.jp-body{align-items:baseline;font-size:24px;display:flex;position:relative}.jp-acc{margin-right:1px;font-size:15px}.jp-dot{margin-left:2px;font-weight:700}.jp-tie{color:#7c86a8;font-size:14px;position:absolute;top:-12px;right:-12px}.jp-oct-up,.jp-oct-down{align-items:center;gap:2px;height:8px;display:flex}.jp-oct-up i,.jp-oct-down i{background:currentColor;border-radius:50%;width:4px;height:4px;display:block}.jp-underlines{flex-direction:column;gap:2px;width:100%;margin-top:2px;display:flex}.jp-underlines i{background:currentColor;width:100%;height:1.5px;display:block}.jp-dash{color:var(--text);align-self:center;margin:0 6px;font-size:22px}.jp-note.conf-low{color:var(--conf-low);background:#fff3e6}.jp-note.conf-mid{color:#b58a00;background:#fffae6}.jp-note.jp-user-edited{color:var(--user-edit)}.jp-note.jp-selected{outline:2px solid var(--primary);background:#e3e8ff}.jp-note.jp-playing{color:#e91e63;background:#fde5ee;outline:2px solid #e91e63}.note-inspector{background:var(--panel);border:2px solid var(--primary);border-radius:var(--radius);padding:14px 16px}.note-inspector.empty{border:1px dashed var(--border);color:var(--text-dim);text-align:center;padding:18px}.note-inspector.empty p{margin:0}.ni-header{align-items:center;gap:12px;margin-bottom:12px;display:flex}.ni-pos{font-weight:700}.ni-conf{color:var(--success);background:#ecfdf5;border-radius:20px;padding:3px 10px;font-size:12px}.ni-conf.low{color:var(--conf-low);background:#fff3e6}.ni-conf.mid{color:#b58a00;background:#fffae6}.ni-close{cursor:pointer;color:var(--text-dim);background:0 0;border:none;margin-left:auto;font-size:20px}.ni-row{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px;display:flex}.ni-label{color:var(--text-dim);width:34px;font-size:13px}.ni-controls{align-items:center;gap:6px;display:flex}.ni-pitch{text-align:center;min-width:110px;font-size:17px;font-weight:700}.ni-pitch small{color:var(--text-dim);font-size:12px;font-weight:400}.ni-durations{flex-wrap:wrap;gap:5px;display:flex}.diff-panel{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.dp-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.dp-header h3{margin:0;font-size:16px}.dp-count{color:var(--primary-dark);background:#eef2ff;border-radius:20px;padding:3px 10px;font-size:12px}.dp-empty{color:var(--text-dim);font-size:13px}.dp-list{max-height:320px;margin:0;padding:0;list-style:none;overflow-y:auto}.dp-item{cursor:pointer;border-bottom:1px solid #f0f1f6;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 6px;font-size:13px;display:flex}.dp-item:hover{background:#f8f9ff}.dp-badge{color:#fff;background:var(--primary);border-radius:10px;flex-shrink:0;padding:2px 8px;font-size:11px}.dp-badge.dp-pitch{background:#6366f1}.dp-badge.dp-duration{background:#0ea5e9}.dp-badge.dp-kind{background:#8b5cf6}.dp-badge.dp-insert{background:#16a34a}.dp-badge.dp-delete{background:#dc2626}.dp-pos{color:var(--text-dim)}.dp-change s{color:#b0b4c0}.dp-change b{color:var(--user-edit)}.dp-hint{color:var(--text-dim);border-top:1px dashed var(--border);margin:10px 0 0;padding-top:10px;font-size:12px}.sug-panel{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);border-top:3px solid #8b5cf6;padding:16px}.sug-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.sug-header h3{margin:0;font-size:16px}.sug-badge{border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600}.sug-badge-on{color:#6d28d9;background:#ede9fe}.sug-badge-off{color:var(--text-dim);background:#f0f1f6}.sug-stats{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px;display:grid}.sug-stat{text-align:center;background:#f8f7ff;border-radius:6px;padding:6px 4px}.sug-stat b{color:#6d28d9;font-size:18px;display:block}.sug-stat span{color:var(--text-dim);font-size:10px}.sug-source-note{color:#6d28d9;background:#ede9fe;border-radius:6px;margin-bottom:10px;padding:6px 10px;font-size:12px}.sug-demo-hint{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;display:flex}.sug-demo-hint span{color:var(--text-dim);font-size:11px}.sug-empty{color:var(--text-dim);font-size:13px;line-height:1.8}.sug-empty-hint{margin:6px 0 10px;font-size:12px}.sug-boundary{color:var(--text-dim);border-top:1px dashed var(--border);margin-top:10px;padding-top:8px;font-size:11px;line-height:1.6}.sug-boundary-mini{color:var(--text-dim);margin-top:8px;font-size:11px;line-height:1.5}.sug-list{flex-direction:column;gap:8px;max-height:360px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.sug-item{background:#fdfcff;border:1px solid #e9e4f5;border-radius:8px;padding:10px 12px}.sug-item-applied{background:#f0fdf4;border-color:#d1fae5}.sug-item-head{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px;display:flex}.sug-field{color:#fff;background:#8b5cf6;border-radius:10px;padding:2px 8px;font-size:11px}.sug-field-pitch{background:#6366f1}.sug-field-duration{background:#0ea5e9}.sug-field-kind{background:#8b5cf6}.sug-pos{color:var(--text-dim);font-size:12px}.sug-confidence{color:#6d28d9;background:#ede9fe;border-radius:10px;margin-left:auto;padding:2px 8px;font-size:11px}.sug-applied-tag{color:var(--success);background:#d1fae5;border-radius:10px;margin-left:auto;padding:2px 8px;font-size:11px}.sug-change{cursor:pointer;margin-bottom:4px;font-size:14px}.sug-change:hover{color:var(--primary)}.sug-change s{color:#b0b4c0}.sug-change b{color:var(--user-edit)}.sug-meta{color:var(--text-dim);flex-wrap:wrap;gap:4px;margin-bottom:6px;font-size:11px;display:flex}.sug-why-toggle{color:var(--primary);cursor:pointer;background:0 0;border:none;margin-bottom:4px;padding:2px 0;font-size:12px}.sug-why-toggle:hover{text-decoration:underline}.sug-explanation{color:var(--text);background:#f8f7ff;border-left:3px solid #8b5cf6;border-radius:6px;margin:4px 0 8px;padding:8px 10px;font-size:12px;line-height:1.7}.sug-actions{gap:6px;display:flex}.sug-applied-section{margin-top:12px}.sug-applied-section h4{color:var(--text-dim);margin:0 0 8px;font-size:13px}.sug-applied-list{max-height:none}.wb-warnings{border-radius:var(--radius);background:#fffbeb;border:1px solid #fde68a;padding:12px 16px;font-size:13px}.wb-warnings h4{color:#92400e;margin:0 0 6px}.wb-warnings ul{color:#92400e;margin:0;padding-left:18px}.modal-mask{z-index:100;background:#0f12288c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.consent-dialog{background:#fff;border-radius:14px;width:480px;max-width:92vw;padding:26px 28px}.consent-dialog h3{margin:0 0 12px;font-size:19px}.cd-desc{color:var(--text);font-size:14px;line-height:1.8}.cd-points{color:var(--text-dim);background:#f8f9ff;border-radius:8px;margin:12px 0;padding:12px 16px;font-size:13px;line-height:2;list-style:none}.cd-remember{color:var(--text-dim);cursor:pointer;align-items:center;gap:8px;margin-bottom:16px;font-size:13px;display:flex}.cd-actions{justify-content:flex-end;gap:10px;display:flex}.samples-panel{flex-direction:column;gap:16px;display:flex}.sp-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.sp-header h2{margin:0 0 6px}.sp-sub{color:var(--text-dim);max-width:640px;margin:0;font-size:13px}.sp-stats{gap:14px;display:flex}.sp-stat{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;padding:14px 26px}.sp-stat b{color:var(--primary-dark);font-size:26px;display:block}.sp-stat span{color:var(--text-dim);font-size:12px}.sp-empty{background:var(--panel);border-radius:var(--radius);text-align:center;color:var(--text-dim);padding:48px}.sp-empty-hint{font-size:13px}.sp-list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.sp-item{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.sp-item-head{cursor:pointer;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 18px;display:flex}.sp-item-head:hover{background:#f8f9ff}.sp-badge{color:var(--primary-dark);background:#eef2ff;border-radius:20px;padding:3px 10px;font-size:12px;font-weight:600}.sp-title{font-weight:600}.sp-edits{color:var(--conf-low);font-size:12px}.sp-time{color:var(--text-dim);margin-left:auto;font-size:12px}.sp-toggle{color:var(--text-dim);font-size:12px}.sp-detail{border-top:1px solid var(--border);flex-direction:column;gap:12px;padding:16px 18px;display:flex}.sp-section h5{color:var(--primary-dark);margin:0 0 6px;font-size:13px}.sp-section pre{white-space:pre-wrap;background:#f7f8fc;border-radius:8px;margin:0;padding:10px 14px;font-size:13px;line-height:1.7;overflow-x:auto}.sp-no-edit{color:var(--success);margin:0;font-size:13px}.sp-edit-list{margin:0;padding:0;font-size:13px;line-height:2.2;list-style:none}.sp-edit-list s{color:#b0b4c0}.sp-edit-list b{color:var(--user-edit)}.sp-actions{gap:8px;display:flex}.about-panel h2{margin-top:0}.about-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (width<=800px){.about-grid{grid-template-columns:1fr}}.about-card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px}.about-card h3{margin:0 0 10px;font-size:16px}.about-card p{color:var(--text-dim);margin:0;font-size:14px;line-height:1.9}.df-page{flex-direction:column;gap:18px;display:flex}.df-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.df-header h2{margin:0 0 6px}.df-subtitle{color:var(--text-dim);max-width:640px;margin:0;font-size:13px}.df-header-actions{flex-wrap:wrap;gap:8px;display:flex}.df-demo-banner{color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b;border-radius:8px;padding:10px 14px;font-size:13px;line-height:1.7}.df-demo-banner b{color:#78350f}.df-section-nav{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);z-index:5;flex-wrap:wrap;gap:6px;padding:8px;display:flex;position:sticky;top:8px}.df-nav-btn{color:var(--text-dim);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:7px;padding:8px 14px;font-size:14px;transition:all .15s}.df-nav-btn:hover{color:var(--primary-dark);background:#eef2ff}.df-nav-btn.active{background:var(--primary);color:#fff;font-weight:600}.df-content{flex-direction:column;gap:18px;display:flex}.df-section{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px}.df-section h3{margin:0 0 16px;font-size:18px}.df-section h4{margin:18px 0 10px;font-size:15px}.df-muted{color:var(--text-dim);font-size:13px}.df-callout{color:var(--text);background:#f8f9ff;border:1px solid #c7cdf5;border-radius:8px;margin:12px 0;padding:12px 16px;font-size:13px;line-height:1.8}.df-callout h4{color:var(--primary-dark);margin:0 0 6px}.df-callout code{background:#e9ecfd;border-radius:4px;padding:1px 6px;font-size:12px}.df-metric-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:8px;display:grid}.df-metric-card{border:1px solid var(--border);border-radius:var(--radius);text-align:center;background:linear-gradient(135deg,#f8f9ff,#fff);padding:14px 16px}.df-metric-value{color:var(--primary-dark);font-size:28px;font-weight:700;line-height:1.2}.df-metric-label{color:var(--text);margin-top:4px;font-size:13px}.df-metric-hint{color:var(--text-dim);margin-top:2px;font-size:11px}.df-direction-row h4{margin:4px 0 8px}.df-direction-bar{border:1px solid var(--border);background:#f5f6fa;border-radius:8px;height:38px;display:flex;overflow:hidden}.df-dir-seg{justify-content:center;align-items:center;min-width:0;transition:width .3s;display:flex}.df-dir-seg.seg-j2s{color:#fff;background:linear-gradient(90deg,#6366f1,#818cf8)}.df-dir-seg.seg-s2j{color:#fff;background:linear-gradient(90deg,#0ea5e9,#38bdf8)}.df-dir-label{white-space:nowrap;text-overflow:ellipsis;padding:0 8px;font-size:12px;font-weight:600;overflow:hidden}.df-flywheel-wrap{margin:12px 0}.df-vis-title{flex-wrap:wrap;align-items:baseline;gap:8px;margin:0 0 10px;display:flex}.df-vis-sub{color:var(--text-dim);font-size:12px;font-weight:400}.df-flywheel{width:100%;max-width:460px;height:auto;margin:0 auto;display:block}.df-wheel-core{fill:#4f46e5;opacity:.12}.df-wheel-core-text{fill:var(--primary-dark);font-size:14px;font-weight:700}.df-node{fill:#fff;stroke:#e2e4ec;stroke-width:2px;transition:all .2s}.df-node.lit{fill:#eef2ff;stroke:var(--primary);stroke-width:2.5px}.df-node-count{fill:var(--primary-dark);font-size:14px;font-weight:700}.df-node-idx{fill:var(--text-dim);font-size:9px}.df-node-label{fill:var(--text);font-size:12px;font-weight:600}.df-arc{opacity:.7}.df-flow-dot{fill:#4f46e5;opacity:.85}.df-stage-legend{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px;margin:14px 0 0;padding:0;list-style:none;display:grid}.df-stage-legend li{color:var(--text-dim);background:#f7f8fc;border-radius:6px;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 10px;font-size:12px;display:flex}.df-stage-legend li.lit{color:var(--primary-dark);background:#eef2ff}.df-stage-no{background:var(--border);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;font-weight:700;display:inline-flex}.df-stage-legend li.lit .df-stage-no{background:var(--primary)}.df-stage-name{color:var(--text);font-weight:600}.df-stage-count{color:var(--primary-dark);margin-left:auto;font-weight:700}.df-stage-hint{width:100%;color:var(--text-dim);font-size:11px}@media (prefers-reduced-motion:reduce){.df-flow-dot{display:none}.df-arc{animation:none!important}}.df-quality-summary{grid-template-columns:200px 1fr;gap:18px;margin-bottom:8px;display:grid}@media (width<=700px){.df-quality-summary{grid-template-columns:1fr}}.df-quality-score{border:2px solid var(--primary);border-radius:var(--radius);text-align:center;background:linear-gradient(135deg,#eef2ff,#fff);padding:20px}.df-quality-score-num{color:var(--primary-dark);font-size:40px;font-weight:800}.df-quality-score-label{color:var(--text-dim);margin-top:4px;font-size:13px}.df-dist-bars{flex-direction:column;gap:8px;display:flex}.df-dist-row{grid-template-columns:28px 1fr 32px 40px;align-items:center;gap:8px;display:grid}.df-dist-level{color:#fff;border-radius:6px;justify-content:center;align-items:center;width:24px;height:24px;font-size:13px;font-weight:700;display:inline-flex}.df-dist-track{background:#f0f1f6;border-radius:7px;height:14px;overflow:hidden}.df-dist-fill{border-radius:7px;height:100%;transition:width .3s}.df-dist-count{text-align:right;font-weight:700}.df-dist-pct{text-align:right;color:var(--text-dim);font-size:12px}.df-grading-basis{color:var(--text-dim);padding-left:18px;font-size:13px;line-height:2}.df-grading-basis li b{color:var(--text)}.df-grading-levels{margin-top:10px;font-size:13px}.df-quality-list{margin-top:14px}.df-q-list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.df-q-item{border:1px solid var(--border);background:#fbfcfe;border-radius:8px;padding:12px 14px}.df-q-head{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px;display:flex}.df-q-level{color:#fff;border-radius:6px;justify-content:center;align-items:center;width:22px;height:22px;font-size:12px;font-weight:700;display:inline-flex}.df-q-score{color:var(--primary-dark);font-weight:700}.df-q-title{font-weight:600}.df-q-dir{color:var(--text-dim);margin-left:auto;font-size:11px}.df-demo-tag{color:#92400e;background:#fef3c7;border-radius:10px;padding:1px 6px;font-size:10px;font-weight:600}.df-q-reasons{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.df-q-reasons li{grid-template-columns:18px 140px 1fr auto;align-items:start;gap:8px;padding:3px 0;font-size:12px;display:grid}.df-q-reasons li.fail .df-q-mark{color:var(--danger)}.df-q-reasons li.pass .df-q-mark{color:var(--success)}.df-q-rlabel{color:var(--text);font-weight:600}.df-q-rdetail{color:var(--text-dim)}.df-q-rpts{color:var(--primary-dark);white-space:nowrap;font-weight:600}.df-error-bars{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.df-error-row{grid-template-columns:100px 1fr 40px 40px;align-items:center;gap:10px;display:grid}.df-error-label{align-items:center;gap:6px;font-size:13px;font-weight:600;display:flex}.df-error-swatch{border-radius:3px;width:12px;height:12px;display:inline-block}.df-error-track{background:#f0f1f6;border-radius:8px;height:16px;overflow:hidden}.df-error-fill{border-radius:8px;height:100%;transition:width .3s}.df-error-count{text-align:right;font-weight:700}.df-error-pct{text-align:right;color:var(--text-dim);font-size:12px}.df-lowconf-block{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:10px 0;display:grid}.df-lowconf-stat{text-align:center;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:12px}.df-lowconf-stat b{color:var(--conf-low);font-size:24px;display:block}.df-lowconf-stat span{color:var(--text-dim);font-size:12px}.df-hard-table{border-collapse:collapse;width:100%;font-size:13px}.df-hard-table th,.df-hard-table td{border-bottom:1px solid var(--border);text-align:left;padding:9px 10px}.df-hard-table th{color:var(--text-dim);white-space:nowrap;background:#f7f8fc;font-weight:600}.df-hard-table tbody tr:hover{background:#f8f9ff}.df-hard-title{align-items:center;gap:6px;font-weight:600;display:flex}.df-hard-detail{margin-top:16px}.df-hard-detail-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.df-hard-detail-item{border:1px solid var(--border);border-radius:8px;overflow:hidden}.df-hard-detail-head{cursor:pointer;text-align:left;background:#fbfcfe;border:none;align-items:center;gap:10px;width:100%;padding:10px 14px;font-size:14px;display:flex}.df-hard-detail-head:hover{background:#f8f9ff}.df-hard-diff{color:var(--conf-low);margin-left:auto;font-size:12px;font-weight:600}.df-hard-detail-body{border-top:1px solid var(--border);flex-direction:column;gap:12px;padding:14px;display:flex}.df-hard-stats{color:var(--text-dim);flex-wrap:wrap;gap:14px;font-size:13px;display:flex}.df-hard-stats span{background:#f0f1f6;border-radius:12px;padding:3px 10px}.df-privacy-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;display:grid}.df-privacy-card{border:1px solid var(--border);background:#fbfcfe;border-radius:8px;padding:14px 16px}.df-privacy-card h4{color:var(--primary-dark);margin:0 0 8px;font-size:14px}.df-privacy-card p{color:var(--text-dim);margin:0;font-size:13px;line-height:1.8}.df-roadmap{flex-direction:column;gap:0;margin:0;padding:0;list-style:none;display:flex}.df-roadmap-item{border-left:3px solid var(--border);gap:14px;margin-left:12px;padding:14px 0 14px 18px;display:flex;position:relative}.df-roadmap-item:before{content:"";border:3px solid var(--border);background:#fff;border-radius:50%;width:15px;height:15px;position:absolute;top:18px;left:-9px}.df-rm-done{border-left-color:var(--success)}.df-rm-done:before{border-color:var(--success);background:var(--success)}.df-rm-doing{border-left-color:var(--conf-mid)}.df-rm-doing:before{border-color:var(--conf-mid);background:var(--conf-mid)}.df-rm-next{border-left-color:var(--border)}.df-rm-marker{display:none}.df-rm-body{flex:1}.df-rm-head{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:4px;display:flex}.df-rm-phase{color:var(--text-dim);background:#f0f1f6;border-radius:10px;padding:2px 8px;font-size:11px}.df-rm-status{border-radius:10px;padding:2px 8px;font-size:11px;font-weight:600}.df-rm-status-done{color:#166534;background:#dcfce7}.df-rm-status-doing{color:#92400e;background:#fef3c7}.df-rm-status-next{color:var(--text-dim);background:#f0f1f6}.df-rm-head h4{margin:0;font-size:15px}.df-rm-body p{color:var(--text-dim);margin:0 0 4px;font-size:13px;line-height:1.7}.df-rm-metric{color:var(--primary-dark);background:#eef2ff;border-radius:8px;padding:3px 10px;font-size:12px;display:inline-block}.df-auth-boundary{color:#78350f;background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b;border-radius:8px;padding:14px 18px;font-size:13px;line-height:1.8}.df-auth-boundary h4{color:#92400e;margin:0 0 6px}.df-auth-boundary p{margin:0}.auth-tag{vertical-align:middle;white-space:nowrap;cursor:help;border:1px solid #0000;border-radius:10px;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:600;line-height:1.4;display:inline-flex}.auth-tag-icon{font-size:11px;line-height:1}.auth-tag-real{color:#166534;background:#dcfce7;border-color:#bbf7d0}.auth-tag-engine{color:#1e40af;background:#dbeafe;border-color:#bfdbfe}.auth-tag-mock{color:#475569;background:#f1f5f9;border-color:#e2e8f0}.auth-tag-user{color:#5b21b6;background:#ede9fe;border-color:#ddd6fe}.auth-tag-local{color:#92400e;background:#fef3c7;border-color:#fde68a}.auth-tag-learn{color:#155e75;background:#cffafe;border-color:#a5f3fc}.auth-tag-next{color:#374151;background:#f3f4f6;border-color:#e5e7eb;font-style:italic}.auth-tag-row{flex-wrap:wrap;align-items:center;gap:6px;display:inline-flex}@media (prefers-reduced-motion:reduce){.auth-tag{transition:none}}.hero{color:#fff;background:radial-gradient(circle at 18% 22%,#6d28d92e,#0000 42%),radial-gradient(circle at 82% 78%,#f59e0b24,#0000 46%),linear-gradient(135deg,#1e1b4b 0%,#312e81 45%,#4338ca 100%);padding:56px 32px 48px;position:relative;overflow:hidden}.hero-inner{z-index:1;max-width:1180px;margin:0 auto;position:relative}.hero-eyebrow{color:#fcd34d;letter-spacing:.5px;background:#f59e0b29;border:1px solid #f59e0b59;border-radius:999px;align-items:center;gap:8px;margin-bottom:18px;padding:6px 14px;font-size:12px;font-weight:600;display:inline-flex}.hero h2{letter-spacing:.5px;max-width:880px;margin:0 0 14px;font-size:clamp(26px,4vw,42px);font-weight:800;line-height:1.25}.hero h2 .hero-accent{color:#fcd34d}.hero-sub{color:#ffffffdb;max-width:760px;margin:0 0 28px;font-size:clamp(14px,1.6vw,17px);line-height:1.7}.hero-actions{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.hero-btn{cursor:pointer;border:2px solid #0000;border-radius:10px;align-items:center;gap:8px;padding:13px 26px;font-size:15px;font-weight:700;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s;display:inline-flex}.hero-btn-primary{color:#1e1b4b;background:#f59e0b;border-color:#f59e0b}.hero-btn-primary:hover{background:#fbbf24;transform:translateY(-1px);box-shadow:0 6px 18px #f59e0b66}.hero-btn-primary:focus-visible{outline-offset:2px;outline:3px solid #fcd34d}.hero-btn-primary:disabled{cursor:not-allowed;box-shadow:none;background:#6b7080;border-color:#6b7080;transform:none}.hero-btn-secondary{color:#fff;background:0 0;border-color:#ffffff8c}.hero-btn-secondary:hover{background:#ffffff1a;border-color:#fff;transform:translateY(-1px)}.hero-btn-secondary:focus-visible{outline-offset:2px;outline:3px solid #a5b4fc}.hero-btn.is-loading{pointer-events:none;opacity:.8;position:relative}.hero-btn.is-loading:after{content:"";border:2px solid;border-right-color:#0000;border-radius:50%;width:14px;height:14px;margin-left:6px;animation:.7s linear infinite hero-spin;display:inline-block}@keyframes hero-spin{to{transform:rotate(360deg)}}.hero-loop{grid-template-columns:repeat(4,1fr);gap:14px;max-width:920px;margin-top:40px;display:grid}.hero-loop-step{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#ffffff12;border:1px solid #ffffff24;border-radius:10px;padding:14px 16px}.hero-loop-step.no{color:#fcd34d;letter-spacing:1px;font-size:11px;font-weight:700}.hero-loop-step h4{margin:6px 0 4px;font-size:15px;font-weight:700}.hero-loop-step p{color:#ffffffbf;margin:0;font-size:12px;line-height:1.5}.hero-loop-arrow{display:none}@media (width<=768px){.hero{padding:40px 18px 32px}.hero-loop{grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}}@media (width<=390px){.hero{padding:32px 14px 26px}.hero-loop{grid-template-columns:1fr}.hero-actions{flex-direction:column;align-items:stretch}.hero-btn{justify-content:center}}.demo-tour-overlay{z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0f172a8c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.demo-tour-card{color:var(--text);background:#fff;border-radius:14px;flex-direction:column;width:100%;max-width:560px;max-height:calc(100vh - 32px);display:flex;overflow:hidden;box-shadow:0 20px 60px #0f172a4d}.demo-tour-head{color:#fff;background:linear-gradient(135deg,#312e81,#4338ca);padding:18px 22px 14px}.demo-tour-head .demo-step-of{opacity:.8;letter-spacing:1px;font-size:12px;font-weight:600}.demo-tour-head h3{margin:4px 0 0;font-size:19px;font-weight:700}.demo-tour-body{flex:1;padding:18px 22px;overflow-y:auto}.demo-tour-desc{color:var(--text);margin:0 0 14px;font-size:15px;line-height:1.7}.demo-tour-wait{color:var(--text-dim);background:#f0f4ff;border:1px solid #dbeafe;border-radius:8px;margin:0 0 14px;padding:10px 12px;font-size:13px}.demo-tour-wait.is-done{color:#166534;background:#dcfce7;border-color:#bbf7d0}.demo-tour-progress{flex-wrap:wrap;gap:4px;margin-bottom:14px;display:flex}.demo-tour-dot{background:var(--border);border-radius:3px;width:14px;height:6px;transition:background .2s}.demo-tour-dot.is-done{background:var(--success)}.demo-tour-dot.is-current{background:var(--primary)}.demo-tour-actions{border-top:1px solid var(--border);background:#fafbff;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:14px 22px;display:flex}.demo-tour-actions-left,.demo-tour-actions-right{flex-wrap:wrap;gap:8px;display:flex}.demo-tour-badge-demo{color:#92400e;background:#fef3c7;border:1px solid #fde68a;border-radius:999px;align-items:center;gap:6px;margin-bottom:10px;padding:3px 10px;font-size:12px;display:inline-flex}.staff-loading{color:var(--text-dim);text-align:center;border:1px dashed var(--border);background:#fafbff;border-radius:8px;padding:24px;font-size:14px}.staff-empty{min-height:80px;color:var(--text-dim);border:1px dashed var(--border);background:#fafbff;border-radius:8px;justify-content:center;align-items:center;font-size:14px;display:flex}.staff-empty-text{font-size:13px}.staff-error{color:#991b1b;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:18px;font-size:14px}.staff-error p{margin:0 0 6px}.staff-error-hint{color:#7f1d1d;opacity:.85;font-size:12px}.player-empty-hint{color:var(--text-dim);font-size:12px}.btn{transition:background .15s,opacity .15s,transform .1s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:focus-visible{outline-offset:2px;outline:3px solid #a5b4fc}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.is-loading{pointer-events:none;opacity:.8;position:relative}.btn.is-loading:after{content:"";vertical-align:middle;border:2px solid;border-right-color:#0000;border-radius:50%;width:12px;height:12px;margin-left:6px;animation:.7s linear infinite hero-spin;display:inline-block}@media (prefers-reduced-motion:reduce){.btn,.hero-btn{transition:none;transform:none}.hero-btn.is-loading:after,.btn.is-loading:after{animation:none}}html,body{overflow-x:hidden}.staff-view{max-width:100%;overflow-x:auto}.wb-scores,.wb-main,.workbench,.df-panel,.about-grid{min-width:0}.app-nav button.app-nav-demo{color:#fde68a;background:#f59e0b38;border:1px solid #f59e0b8c;font-weight:700}.app-nav button.app-nav-demo:hover{background:#f59e0b61}@media (width<=1024px){.app-header{padding:12px 18px}.app-brand h1{font-size:19px}.app-nav button{padding:8px 14px;font-size:13px}.wb-main{grid-template-columns:1fr}}@media (width<=768px){.app-header{flex-direction:column;align-items:stretch;gap:8px;padding:10px 14px}.app-brand{justify-content:center}.app-nav{flex-wrap:wrap;justify-content:center}.app-nav button{padding:7px 12px;font-size:12px}.workbench{padding:12px}.wb-tabs{flex-wrap:wrap}.wb-toolbar{flex-wrap:wrap;gap:10px}.export-bar{flex-wrap:wrap}.demo-tour-card{max-width:100%}.demo-tour-body{padding:14px 16px}.hero h2{font-size:24px}}@media (width<=390px){.app-brand h1{font-size:17px}.app-brand-en{display:none}.app-slogan{font-size:11px}.app-nav button{padding:6px 10px;font-size:11px}.workbench{padding:8px}.wb-intro h2{font-size:18px}.hero{padding:28px 14px 22px}.hero h2{font-size:22px}.hero-sub{font-size:13px}.demo-tour-overlay{padding:8px}.demo-tour-actions{flex-direction:column}.demo-tour-actions-left,.demo-tour-actions-right{justify-content:stretch;width:100%}.demo-tour-actions .btn{width:100%}}.df-empty{background:var(--panel);border:2px dashed var(--border);border-radius:var(--radius);text-align:center;flex-direction:column;align-items:center;gap:12px;padding:40px 28px;display:flex}.df-empty-icon{font-size:52px}.df-empty h3{margin:0}.df-empty-hint{color:var(--text-dim);margin:0;font-size:14px}.df-empty-steps{text-align:left;max-width:520px;color:var(--text-dim);margin:0;padding-left:20px;font-size:13px;line-height:2.1}.df-empty-steps b{color:var(--text)}.df-empty-actions{flex-direction:column;align-items:center;gap:8px;margin-top:8px;display:flex}.df-empty-note{color:var(--text-dim);font-size:12px}.df-footer-actions{justify-content:flex-end;display:flex}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=640px){.df-section{padding:16px 14px}.df-metric-grid{grid-template-columns:repeat(2,1fr)}.df-q-reasons li{grid-template-columns:18px 1fr auto}.df-q-rlabel,.df-q-rdetail{grid-column:2}.df-q-rpts{grid-area:1/3}.df-error-row{grid-template-columns:80px 1fr 32px 32px;gap:6px;font-size:12px}.df-hard-table{font-size:12px}.df-hard-table th,.df-hard-table td{padding:6px}}