.app{grid-template:"head head head""controls main insight"minmax(0,1fr)/310px minmax(0,1fr) 320px;height:100vh;display:grid}.app-header{background:var(--surface);border-bottom:1px solid var(--border);grid-area:head;align-items:baseline;gap:14px;padding:10px 16px;display:flex}.app-header h1{letter-spacing:-.01em;font-size:17px;font-weight:650}.app-header p{color:var(--ink-2);font-size:13px}.panel{background:var(--surface);padding-bottom:24px;overflow-y:auto}.controls{border-right:1px solid var(--border);grid-area:controls}.insight{border-left:1px solid var(--border);grid-area:insight;padding:0 14px 24px}.main{grid-area:main;min-width:0;overflow-y:auto}.group-static{border-bottom:1px solid var(--border);gap:10px;padding:14px;display:grid}.group{border-bottom:1px solid var(--border)}.group summary{cursor:pointer;-webkit-user-select:none;user-select:none;padding:11px 14px;font-weight:600}.group-body{gap:12px;padding:0 14px 14px;display:grid}.muted{color:var(--muted);font-size:12.5px}.field{gap:4px;display:grid}.field-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.field-label{color:var(--ink-2);font-size:12.5px}select{background:var(--surface);border:1px solid var(--border);border-radius:6px;width:100%;padding:6px 8px}.button{background:var(--surface);border:1px solid var(--border);white-space:nowrap;border-radius:6px;padding:6px 12px}.button:hover{background:var(--surface-2)}.button[aria-pressed=true]{background:var(--surface-2);font-weight:600}.check{cursor:pointer;align-items:center;gap:7px;font-size:13px;display:inline-flex}.check input{accent-color:var(--accent);margin:0}.segmented{background:var(--surface-2);border-radius:7px;padding:2px;display:inline-flex}.segmented.wide{display:flex}.segmented.wide button{flex:1}.segmented button{color:var(--ink-2);white-space:nowrap;background:0 0;border:0;border-radius:5px;justify-content:center;align-items:center;gap:6px;padding:4px 10px;font-size:13px;display:inline-flex}.segmented button:hover{color:var(--ink)}.segmented button[aria-pressed=true],.segmented button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--border);font-weight:600}.slider{cursor:pointer;gap:3px;display:grid}.slider-head{justify-content:space-between;gap:8px;font-size:13px;display:flex}.slider-head b{font-variant-numeric:tabular-nums;font-weight:600}input[type=range]{width:100%;accent-color:var(--accent);margin:0}.hardpoints{border-collapse:collapse;table-layout:fixed;width:100%;font-size:12px}.hardpoints thead th{color:var(--muted);text-align:left;padding:0 2px 4px;font-weight:500}.hardpoints thead th:first-child{width:42%}.hardpoints th[scope=row]{text-align:left;font-weight:400}.hardpoints th[scope=row] button{text-align:left;background:0 0;border:0;border-radius:4px;align-items:flex-start;gap:5px;width:100%;padding:3px 2px;line-height:1.2;display:flex}.hardpoints th[scope=row] button:hover{background:var(--surface-2)}.hardpoints tr.selected th[scope=row] button{background:var(--surface-2);font-weight:600}.hardpoints td{padding:1px}.hardpoints input{background:var(--surface);border:1px solid var(--border);font-variant-numeric:tabular-nums;appearance:textfield;border-radius:4px;width:100%;padding:3px 1px 3px 3px;font-size:11.5px}.hardpoints input::-webkit-inner-spin-button{display:none}.frame{border-radius:50%;flex:none;width:8px;height:8px;margin-top:3px}.frame-body{background:#2a78d6}.frame-upright{background:#1baf7a}.frame-rack{background:#eb6834}.viewport{background:var(--surface);border-bottom:1px solid var(--border)}.viewport-bar,.viewport-controls{flex-wrap:wrap;align-items:center;gap:10px 14px;padding:8px 12px;display:flex}.viewport-controls{border-top:1px solid var(--border)}.canvas-wrap{background:linear-gradient(180deg, var(--viewport-a), var(--viewport-b));height:clamp(320px,50vh,620px);position:relative}.inline-slider{color:var(--ink-2);flex:200px;gap:2px;font-size:13px;display:grid}.inline-slider b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}.scene-tag{background:var(--tag-bg);border:1px solid var(--border);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;border-radius:5px;padding:2px 7px;font-size:11.5px}.scene-tag-floating{pointer-events:none;z-index:2;position:absolute;top:0;left:0}.scene-key{background:var(--tag-bg);color:var(--ink-2);pointer-events:none;border-radius:5px;flex-wrap:wrap;gap:10px;margin:0;padding:3px 8px;font-size:11.5px;list-style:none;display:flex;position:absolute;bottom:8px;left:10px}.scene-key li{align-items:center;gap:5px;display:flex}.scene-key i{border-radius:50%;width:9px;height:9px}.scene-hint{background:var(--tag-bg);border:1px solid var(--border);white-space:nowrap;border-radius:7px;padding:4px 6px 4px 12px;font-size:12.5px;position:absolute;top:10px;left:50%;transform:translate(-50%)}.scene-hint button{background:var(--surface-2);border:1px solid var(--border);border-radius:5px;margin-left:6px;padding:1px 9px}.charts{padding:12px}.charts-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-bottom:10px;display:flex}.charts-subject{color:var(--ink-2);font-size:13px}.legend{color:var(--ink-2);flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;font-size:13px;list-style:none;display:flex}.legend li{align-items:center;gap:6px;display:flex}.line-key{border-radius:1px;flex:none;width:14px;height:2px;display:inline-block}.line-key.series-A{background:var(--series-A)}.line-key.series-B{background:var(--series-B)}.tab-note{color:var(--ink-2);margin-bottom:8px;font-size:12.5px}.notice{background:var(--warn-bg);border-left:3px solid var(--warn-border);border-radius:4px;margin-bottom:10px;padding:7px 10px;font-size:13px}.chart-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;display:grid}.chart{background:var(--surface);border:1px solid var(--border);border-radius:8px;min-width:0;margin:0;padding:8px 10px 4px}.chart figcaption{justify-content:space-between;align-items:center;gap:8px;display:flex}.chart-title{text-align:left;background:0 0;border:0;padding:0;font-size:13px;font-weight:600}.chart-title:hover{text-decoration:underline}.chart-unit{color:var(--muted);font-weight:400}.chart-table-toggle{color:var(--muted);background:0 0;border:0;border-radius:4px;padding:0 5px;font-size:11.5px}.chart-table-toggle:hover{color:var(--ink);background:var(--surface-2)}.chart-plot{position:relative}.chart svg{touch-action:none;display:block}.chart-table{height:168px;overflow-y:auto}.chart-table table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:12px}.chart-table th{background:var(--surface);text-align:right;color:var(--muted);font-weight:500;position:sticky;top:0}.chart-table td{text-align:right;border-top:1px solid var(--grid);padding:1px 4px}.grid{stroke:var(--grid);stroke-width:1px}.axis-zero{stroke:var(--baseline);stroke-width:1px}.tick{fill:var(--tick);font-variant-numeric:tabular-nums;font-size:11px}.line{fill:none;stroke-width:2px;stroke-linejoin:round;stroke-linecap:round}.line.series-A{stroke:var(--series-A)}.line.series-B{stroke:var(--series-B)}.dot{stroke:var(--surface);stroke-width:2px}.dot.series-A{fill:var(--series-A)}.dot.series-B{fill:var(--series-B)}.crosshair{stroke:var(--baseline);stroke-width:1px}.tooltip{z-index:5;background:var(--surface);border:1px solid var(--border);pointer-events:none;border-radius:6px;min-width:120px;padding:6px 9px;font-size:12px;position:absolute;top:10px;box-shadow:0 3px 12px #00000024}.tooltip-x{color:var(--muted);margin-bottom:2px}.tooltip-row{font-variant-numeric:tabular-nums;align-items:center;gap:6px;display:flex}.tooltip-row span:last-child{color:var(--ink-2)}.tread{border:1px solid var(--border);border-radius:8px;margin-top:12px;padding:10px}.tread-head{flex-wrap:wrap;justify-content:space-between;gap:8px;margin-bottom:6px;display:flex}.tread-scale{color:var(--muted);align-items:center;gap:1px;font-size:11.5px;display:flex}.tread-scale span{margin:0 5px}.tread-scale i{width:14px;height:10px}.wheel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;display:grid}.wheel-card h4{margin-bottom:4px;font-size:12.5px;font-weight:600}.wheel-row{flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:6px;display:flex}.wheel-setup{color:var(--ink-2);font-size:12px}.tread-bar{flex:110px;gap:1px;height:16px;display:flex}.tread-bar i{flex:1}.tread-bar i:first-child{border-radius:3px 0 0 3px}.tread-bar i:last-child{border-radius:0 3px 3px 0}.wheel-row dl{font-variant-numeric:tabular-nums;gap:10px;margin:0;font-size:11.5px;display:flex}.wheel-row dl div{gap:3px;display:flex}.wheel-row dt{color:var(--muted)}.wheel-row dd{margin:0}.insight section{padding-top:14px}.insight section+section{border-top:1px solid var(--border);margin-top:14px}.insight h2{margin-bottom:8px;font-size:15px;font-weight:650}.insight h3{color:var(--ink-2);margin:10px 0 2px;font-size:12.5px;font-weight:600}.topic p{font-size:13.5px}.demo-list{gap:3px;margin:0;padding:0;list-style:none;display:grid}.demo-list button{text-align:left;background:0 0;border:1px solid #0000;border-radius:6px;width:100%;padding:5px 9px;font-size:13.5px}.demo-list button:hover{background:var(--surface-2)}.demo-list button[aria-pressed=true]{background:var(--surface-2);border-color:var(--border);font-weight:600}.demo-card{background:var(--surface-2);border-radius:8px;gap:6px;margin-top:10px;padding:10px 12px;font-size:13px;display:grid}.demo-card h3{color:var(--ink);margin:0;font-size:13.5px}.compare{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:12.5px}.compare thead th{text-align:right;padding-bottom:4px;font-weight:600}.compare thead .line-key{vertical-align:middle}.compare th[scope=row]{text-align:left;font-weight:400}.compare th[scope=row] button{text-align:left;color:var(--ink-2);background:0 0;border:0;padding:2px 0}.compare th[scope=row] button:hover{color:var(--ink);text-decoration:underline}.compare td{text-align:right;white-space:nowrap;padding:2px 0 2px 8px}.compare-section th{text-align:left;border-bottom:1px solid var(--grid);padding:9px 0 3px;font-weight:600}.compare tr.differs td{font-weight:650}.compare tr.differs th button{color:var(--ink)}@media (max-width:1180px){.app{grid-template:"head""main""controls""insight"/minmax(0,1fr);height:auto}.panel,.main{overflow:visible}.controls,.insight{border:0;border-top:1px solid var(--border)}}
