:root{font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:#233b48;background:#f1f5f6;font-size:14px;--line:#dce5e9;--teal:#167c76}*{box-sizing:border-box}body{margin:0}h1,h2,h3,p{margin:0}h1{font-size:22px;letter-spacing:.02em;margin-top:5px}h2{font-size:19px;margin:5px 0 7px}h3{font-size:14px;margin-bottom:9px}button,a,input,select{font:inherit}button,a{touch-action:manipulation}button{border:1px solid var(--teal);border-radius:8px;background:var(--teal);color:#fff;padding:10px 13px;cursor:pointer;font-weight:600}button:hover{filter:brightness(.96)}button.secondary{background:#fff;color:#2f5966;border-color:#c9d8df}button:disabled{opacity:.5;cursor:wait}a{color:#176d78;text-decoration:none}a[aria-disabled=true]{color:#96a3aa;pointer-events:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #64bfc5;outline-offset:2px}.demo-shell{max-width:1920px;margin:auto;padding:20px}.demo-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.eyebrow{font-size:11px;letter-spacing:.12em;color:#517b80;font-weight:700}.demo-badge{border:1px solid #b9d8d3;color:#25796e;border-radius:20px;padding:7px 12px;font-size:12px;white-space:nowrap}.demo-warning{background:#fff5df;border:1px solid #efd7a3;padding:11px 14px;color:#795822;border-radius:9px;line-height:1.6;margin-bottom:16px}.demo-layout{display:grid;grid-template-columns:238px minmax(320px,1fr) 352px;gap:15px;align-items:start}.controls-panel,.model-panel,.results-panel{min-width:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.controls-panel,.results-panel{padding:17px}.section-heading p{color:#69808b;font-size:12px;line-height:1.7}.section-heading{margin-bottom:14px}.hint,.legend-note{font-size:11px;color:#72858f;line-height:1.7;margin:10px 0}.controls-panel fieldset{border:0;padding:0;margin:0;min-width:0}.controls-panel fieldset>button{width:100%;margin-top:10px}.source-row{padding:12px;background:#f5f8f9;border:1px solid #e0e8eb;border-radius:9px;margin-bottom:10px}.source-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.source-heading strong{font-size:13px}.source-heading button{padding:3px 6px;font-size:11px}.source-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.source-grid label{display:block;font-size:11px;color:#59707b}.source-grid input{width:100%;min-width:0;border:1px solid #cbd8de;border-radius:6px;background:#fff;padding:7px;color:#213d4a;margin-top:4px}.mode-label{display:block;font-size:12px;margin-top:18px;font-weight:600}.mode-label select{display:block;margin-top:7px;width:100%;min-width:0;border:1px solid #cbd8de;padding:8px;border-radius:6px;font-size:12px;color:#314d58}.model-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font-size:12px}.model-toolbar button{font-size:12px;padding:7px 10px}.model-stage{height:500px;position:relative;background:linear-gradient(150deg,#f0f5f7,#fff)}canvas{display:block;width:100%;height:100%;touch-action:none}.model-caption{position:absolute;left:14px;bottom:14px;font-size:11px;line-height:1.7;background:#ffffffdf;border:1px solid #e1e9ec;border-radius:6px;padding:7px 10px;pointer-events:none;color:#607680}.legend{display:flex;flex-wrap:wrap;gap:12px;padding:15px 15px 2px;font-size:12px}.legend span{display:flex;gap:5px;align-items:center}.legend i,.grade-dot{display:inline-block;width:11px;height:11px;border-radius:3px;flex-shrink:0}.legend-note{padding:0 15px}.detail-card{margin:14px;padding:15px;background:#f6f9fa;border:1px solid #e1e8eb;border-radius:9px;font-size:12px;line-height:1.8}.detail-card dl{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin:10px 0}.detail-card dt{color:#6c838e}.detail-card dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}.detail-card p{overflow-wrap:anywhere}.overall-card{border-radius:9px;background:#eaf5f3;padding:13px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;font-size:12px}.overall-card strong{color:#22736b}.ratings{display:grid;grid-template-columns:1fr 1fr;gap:9px}.ratings section{border:1px solid var(--line);border-radius:9px;padding:12px}.ratings h3{color:#6b808a;font-size:12px}.ratings strong{font-size:16px;color:#294957}.metrics-card{padding:14px 0;font-size:12px;line-height:1.9}.results-panel details{border-top:1px solid var(--line);padding:12px 0}.results-panel summary{font-weight:600;cursor:pointer;font-size:13px}.component-list{max-height:235px;overflow:auto;display:grid;gap:5px;margin-top:10px}.component-row{display:flex;align-items:center;gap:7px;width:100%;background:#f6f9fa;color:#395260;border:1px solid transparent;font-size:11px;padding:8px;text-align:left;font-weight:400}.component-row[aria-pressed=true]{border-color:var(--teal);background:#edf8f4}.component-row .grade-label{margin-left:auto;white-space:nowrap}.results-panel ul{padding-left:18px;font-size:11px;line-height:1.8;color:#6a767d}.results-panel li{margin-top:6px;overflow-wrap:anywhere}.results-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:10px;max-height:230px;overflow:auto}.report-actions{border-top:1px solid var(--line);padding-top:13px}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.export-grid a{border:1px solid var(--line);border-radius:6px;padding:9px 6px;font-size:11px;text-align:center}.identity{font-size:10px;color:#819099;overflow-wrap:anywhere;line-height:1.8}[data-demo-state=error] [data-demo-status]{color:#ae3f4c}[data-demo-state=stale] [data-demo-status]{color:#9b7027}
@media(min-width:1350px){.model-panel{position:sticky;top:15px}.controls-panel{position:sticky;top:15px}.model-stage{height:560px}}
@media(max-width:1150px){.demo-layout{grid-template-columns:210px minmax(300px,1fr)}.results-panel{grid-column:1/-1}.component-list{grid-template-columns:repeat(3,1fr)}.ratings{grid-template-columns:1fr 1fr}.model-stage{height:460px}.export-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:680px){.demo-shell{padding:10px}.demo-heading{display:block}.demo-heading h1{font-size:18px}.demo-badge{display:inline-block;margin-top:10px}.demo-layout{display:flex;flex-direction:column;gap:12px}.controls-panel,.model-panel,.results-panel{width:100%}.controls-panel{order:2}.model-panel{order:1}.results-panel{order:3}.model-stage{height:330px}.component-list{grid-template-columns:1fr}.export-grid{grid-template-columns:1fr 1fr}.source-grid{grid-template-columns:repeat(4,1fr)}.demo-warning{font-size:11px}.detail-card{font-size:11px}.legend{gap:10px}.controls-panel fieldset>button{min-height:40px}}
.field-legend{margin:18px 24px 8px;font-size:12px}.field-ramp{height:14px;margin:9px 0 5px;border-radius:7px;background:linear-gradient(90deg,#279b79 0%,#d4cb3e 33.333%,#ed8735 66.667%,#d4474e 100%)}.field-scale{display:flex;justify-content:space-between;gap:8px;color:#607989;font-size:11px}