:root{--cc-accent:var(--color-accent,#d2911e);--cc-text:var(--color-text-primary,#232328);--cc-bg:var(--color-bg-primary,#f5f3f0);--cc-warn:var(--color-warning,#e69628);--cc-info:var(--color-info,var(--color-accent,#5082aa));--cc-font-mono:var(--font-family-mono,"Fira Code", "Cascadia Code", "SF Mono", monospace);--cc-font-sans:var(--font-family,"IBM Plex Sans", system-ui, sans-serif);--cc-font-size:13px;--cc-label-size:12px;--cc-control-height:30px;--cc-radius:var(--radius-sm,5px);--cc-row-gap:12px;--cc-label-width:130px;--cc-border-width:1px}.cc-row{align-items:flex-start;gap:var(--cc-row-gap);border-bottom:1px solid color-mix(in srgb, var(--cc-text) 6%, transparent);padding:7px 0;display:flex}.cc-label{width:var(--cc-label-width);font-size:var(--cc-label-size);color:color-mix(in srgb, var(--cc-text) 50%, transparent);letter-spacing:.01em;flex-shrink:0;padding-top:6px}.cc-group{flex:1;align-items:flex-start;gap:8px;display:flex}.cc-unit{font-size:var(--cc-label-size);color:color-mix(in srgb, var(--cc-text) 30%, transparent);font-family:var(--cc-font-mono);min-width:28px;padding-top:6px}.cc-scrub-display{min-width:88px;height:var(--cc-control-height);border:var(--cc-border-width) solid color-mix(in srgb, var(--cc-text) 12%, transparent);border-radius:var(--cc-radius);background:color-mix(in srgb, var(--cc-text) 4%, transparent);-webkit-user-select:none;user-select:none;touch-action:none;cursor:row-resize;box-sizing:border-box;outline:none;align-items:center;gap:6px;padding:4px 10px;transition:background .1s,border-color .1s;display:flex}.cc-scrub-display:hover{border-color:color-mix(in srgb, var(--cc-text) 20%, transparent)}.cc-scrub-display:focus-visible{border-color:color-mix(in srgb, var(--cc-accent) 60%, transparent);box-shadow:0 0 0 2px color-mix(in srgb, var(--cc-accent) 15%, transparent)}.cc-scrub-display.cc-dragging{cursor:ns-resize;background:color-mix(in srgb, var(--cc-accent) 12%, transparent);border-color:color-mix(in srgb, var(--cc-accent) 60%, transparent)}.cc-scrub-value{font-family:var(--cc-font-mono);font-size:var(--cc-font-size);font-variant-numeric:tabular-nums;color:color-mix(in srgb, var(--cc-text) 90%, transparent);text-align:right;flex:1}.cc-scrub-placeholder{font-family:var(--cc-font-sans);font-variant-numeric:normal;color:color-mix(in srgb, var(--cc-text) 40%, transparent);font-style:italic}.cc-dragging .cc-scrub-value{color:color-mix(in srgb, var(--cc-accent) 90%, transparent)}.cc-scrub-arrow{color:color-mix(in srgb, var(--cc-text) 20%, transparent);font-size:9px;line-height:1}.cc-dragging .cc-scrub-arrow{color:color-mix(in srgb, var(--cc-accent) 80%, transparent)}.cc-text-input{font-family:var(--cc-font-mono);font-size:var(--cc-font-size);width:88px;height:var(--cc-control-height);background:color-mix(in srgb, var(--cc-text) 4%, transparent);border:var(--cc-border-width) solid color-mix(in srgb, var(--cc-text) 12%, transparent);border-radius:var(--cc-radius);color:color-mix(in srgb, var(--cc-text) 90%, transparent);box-sizing:border-box;outline:none;padding:4px 8px}.cc-text-input:focus,.cc-text-input.cc-focused,.cc-text-input.cc-editing{border-color:color-mix(in srgb, var(--cc-accent) 70%, transparent)}.cc-preview{background:color-mix(in srgb, var(--cc-bg) 95%, transparent);border:1px solid color-mix(in srgb, var(--cc-accent) 30%, transparent);color:color-mix(in srgb, var(--cc-accent) 90%, transparent);font-size:11px;font-family:var(--cc-font-mono);white-space:nowrap;z-index:100;pointer-events:none;border-radius:4px;padding:3px 8px;position:absolute;top:calc(100% + 4px);left:0}.cc-range-row{border-bottom:1px solid color-mix(in srgb, var(--cc-text) 6%, transparent);flex-direction:column;align-items:stretch;gap:0;padding:7px 0;display:flex}.cc-range-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.cc-range-header .cc-label{width:auto;padding-top:0}.cc-range-track{cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;align-items:center;height:44px;display:flex;position:relative}.cc-range-track:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--cc-accent) 50%, transparent)}.cc-range-groove{background:color-mix(in srgb, var(--cc-text) 8%, transparent);border-radius:2px;height:3px;position:absolute;left:0;right:0}.cc-range-fill{background:color-mix(in srgb, var(--cc-accent) 75%, transparent);border-radius:2px;height:3px;transition:width 50ms;position:absolute;left:0}.cc-range-fill.cc-dragging{transition:none}.cc-range-thumb-area{justify-content:center;align-items:center;width:44px;height:44px;display:flex;position:absolute;transform:translate(-50%)}.cc-range-thumb{border:2px solid color-mix(in srgb, var(--cc-text) 50%, transparent);width:13px;height:13px;box-shadow:none;background:#fff;border-radius:50%;transition:background .1s,box-shadow .1s,border-color .1s}.cc-range-thumb.cc-dragging{background:var(--cc-accent);border-color:var(--cc-accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--cc-accent) 20%, transparent)}.cc-range-minmax{color:color-mix(in srgb, var(--cc-text) 20%, transparent);font-size:10px;font-family:var(--cc-font-mono);justify-content:space-between;margin-top:-4px;display:flex}.cc-toggle-group{background:color-mix(in srgb, var(--cc-text) 5%, transparent);border-radius:var(--cc-radius);gap:2px;padding:2px;display:flex}.cc-toggle-btn{cursor:pointer;font-size:var(--cc-label-size);font-family:var(--cc-font-sans);color:color-mix(in srgb, var(--cc-text) 40%, transparent);background:0 0;border:none;border-radius:3px;outline:none;padding:3px 14px;transition:background .15s,color .15s}.cc-toggle-btn:hover{color:color-mix(in srgb, var(--cc-text) 60%, transparent)}.cc-toggle-btn:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--cc-accent) 30%, transparent)}.cc-toggle-btn.cc-active{background:color-mix(in srgb, var(--cc-accent) 70%, transparent);color:#fff}.cc-toggle-btn.cc-active:hover{background:color-mix(in srgb, var(--cc-accent) 80%, transparent);color:#fff}.cc-select{font-family:var(--cc-font-mono);font-size:var(--cc-font-size);height:var(--cc-control-height);background-color:color-mix(in srgb, var(--cc-text) 4%, transparent);border:var(--cc-border-width) solid color-mix(in srgb, var(--cc-text) 12%, transparent);border-radius:var(--cc-radius);min-width:140px;color:color-mix(in srgb, var(--cc-text) 90%, transparent);appearance:none;cursor:pointer;box-sizing:border-box;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' stroke='rgba(35,35,40,0.35)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;outline:none;padding:4px 28px 4px 10px}.cc-select:hover{border-color:color-mix(in srgb, var(--cc-text) 20%, transparent)}.cc-select:focus-visible{border-color:color-mix(in srgb, var(--cc-accent) 60%, transparent);box-shadow:0 0 0 2px color-mix(in srgb, var(--cc-accent) 15%, transparent)}.cc-select option{background:var(--cc-bg)}.cc-display-value{font-family:var(--cc-font-mono);font-size:var(--cc-font-size);font-variant-numeric:tabular-nums;color:color-mix(in srgb, var(--cc-info) 90%, transparent);transition:color .12s cubic-bezier(.25,1,.5,1)}.cc-display-value.cc-warn{color:color-mix(in srgb, var(--cc-warn) 95%, transparent)}@keyframes cc-value-flash{0%{color:var(--cc-accent)}to{color:color-mix(in srgb, var(--cc-info) 90%, transparent)}}@keyframes cc-value-flash-warn{0%{color:var(--cc-accent)}to{color:color-mix(in srgb, var(--cc-warn) 95%, transparent)}}.cc-display-value.cc-flash{animation:.25s cubic-bezier(.25,1,.5,1) cc-value-flash}.cc-display-value.cc-warn.cc-flash{animation:.25s cubic-bezier(.25,1,.5,1) cc-value-flash-warn}.cc-display-warn-icon{color:color-mix(in srgb, var(--cc-warn) 70%, transparent);padding-top:5px;font-size:11px}.cc-disabled{opacity:.5}.cc-disabled .cc-disabled{opacity:1}.cc-disabled .cc-scrub-display,.cc-disabled .cc-range-track{cursor:not-allowed}.cc-disabled .cc-scrub-display:hover,.cc-disabled .cc-scrub-display:focus-visible{border-color:color-mix(in srgb, var(--cc-text) 12%, transparent);box-shadow:none;background:color-mix(in srgb, var(--cc-text) 4%, transparent)}@media (prefers-reduced-motion:reduce){.cc-display-value,.cc-display-value.cc-flash,.cc-display-value.cc-warn.cc-flash{transition:none;animation:none}}:root{--about-modal-overlay:#00000080;--about-modal-bg:var(--color-surface-elevated);--about-modal-panel-bg:var(--color-surface);--about-modal-cta-bg:var(--color-surface);--about-modal-border:var(--color-border);--about-modal-text-primary:var(--color-text);--about-modal-text-body:var(--color-text-secondary);--about-modal-text-muted:var(--color-text-muted);--about-modal-link:var(--color-primary);--about-modal-link-weight:400;--about-modal-close-bg:#00000012;--about-modal-close-color:#71717a;--about-modal-btn-bg:var(--color-primary);--about-modal-btn-text:#fff;--about-modal-btn-bg-hover:var(--color-primary-hover);--about-modal-radius:14px;--about-modal-shadow:0 2px 8px #00000014, 0 14px 48px #0000002e;--header-height:48px;--tab-bar-height:40px;--input-panel-width:320px;--radius-sm:3px;--radius-md:5px;--radius-lg:7px;--font-sans:"IBM Plex Sans", system-ui, -apple-system, sans-serif;--font-mono:"IBM Plex Mono", "Consolas", monospace;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--color-bg:#f4f3ef;--color-surface:#eae9e4;--color-surface-elevated:#fff;--color-border:#c8c7c2;--color-text:#1a1a18;--color-text-secondary:#5c5c56;--color-text-muted:#676763;--color-label:#4d4d47;--color-primary:#0d6e6e;--color-primary-hover:#095959;--color-primary-light:#daf2f0;--color-error:#b5322a;--color-error-light:#f8e6e5;--color-warning:#b8860b;--color-warning-light:#faf0d6;--color-success:#2a7d42;--color-success-light:#e0f0e5;--color-accent:#c8850a;--color-plot-bg:#fafaf7;--color-plot-grid:#d8d8d0;--color-plot-line:#d4a017;--color-plot-line2:#0097a7;--color-plot-line3:#c4503a;--color-plot-line4:#3a8f5c;--color-plot-marker:#c4503a;--shadow-md:0 2px 8px #1a1a1814;--transition-fast:.15s ease;--ease-out-quart:cubic-bezier(.25, 1, .5, 1);--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--cc-accent:var(--color-primary);--cc-text:var(--color-text);--cc-bg:var(--color-surface-elevated);--cc-info:var(--color-primary);--cc-warn:var(--color-warning);--cc-font-mono:var(--font-mono);--cc-font-sans:var(--font-sans);--cc-radius:3px;--cc-control-height:36px}[data-theme=dark]{--color-bg:#1a1d21;--color-surface:#242830;--color-surface-elevated:#2d3138;--color-border:#3e434b;--color-text:#e2e2de;--color-text-secondary:#9ea3ab;--color-text-muted:#94999f;--color-label:#b4b9c0;--color-primary:#30b8b8;--color-primary-hover:#4dd0d0;--color-primary-light:#153333;--color-error:#e85550;--color-error-light:#3a1a1a;--color-warning:#e8a830;--color-warning-light:#3a2d0d;--color-success:#52b868;--color-success-light:#133320;--color-accent:#e8a830;--color-plot-bg:#1a1d21;--color-plot-grid:#2c3138;--color-plot-line:#f0c830;--color-plot-line2:#00d4e8;--color-plot-line3:#e86050;--color-plot-line4:#60d880;--color-plot-marker:#e86050;--cc-accent:var(--color-primary);--cc-text:var(--color-text);--cc-bg:var(--color-surface-elevated);--cc-info:var(--color-primary);--cc-warn:var(--color-warning);--about-modal-overlay:#000000a6;--about-modal-bg:var(--color-surface-elevated);--about-modal-panel-bg:var(--color-surface);--about-modal-cta-bg:var(--color-surface);--about-modal-border:var(--color-border);--about-modal-text-primary:var(--color-text);--about-modal-text-body:var(--color-text-secondary);--about-modal-text-muted:var(--color-text-muted);--about-modal-link:var(--color-primary);--about-modal-close-bg:#ffffff14;--about-modal-close-color:var(--color-text-muted);--about-modal-btn-bg:var(--color-primary);--about-modal-btn-bg-hover:var(--color-primary-hover);--about-modal-btn-text:#1a1d21}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;overflow-wrap:break-word;word-break:break-word;text-rendering:optimizelegibility;transition:background-color var(--transition-theme), color var(--transition-theme);margin:0;padding:0}.app-container{flex-direction:column;min-height:100vh;display:flex}.app-header{height:var(--header-height);background:var(--color-surface-elevated);border-bottom:1px solid var(--color-border);padding:0 var(--spacing-md);z-index:100;justify-content:space-between;align-items:center;display:flex;position:fixed;top:0;left:0;right:0}.app-header .header-left{align-items:center;gap:var(--spacing-sm);min-width:0;display:flex}.app-header .header-title{color:var(--color-text);letter-spacing:1.5px;font-size:16px;font-weight:700;font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.app-header .header-right{align-items:center;gap:var(--spacing-sm);flex-shrink:0;display:flex}.header-btn{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);color:var(--color-text-secondary);cursor:pointer;align-items:center;gap:var(--spacing-xs);transition:all var(--transition-fast);background:0 0;font-size:14px;display:flex}.header-btn:hover:not(:disabled){background:var(--color-surface);color:var(--color-text)}.header-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.header-btn:disabled{opacity:.4;cursor:not-allowed}.tab-bar{top:var(--header-height);height:var(--tab-bar-height);background:var(--color-surface-elevated);border-bottom:1px solid var(--color-border);z-index:99;align-items:stretch;display:flex;position:fixed;left:0;right:0}.tab-bar .tab{padding:0 var(--spacing-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;justify-content:center;align-items:center;font-size:14px;font-weight:500;display:flex}.tab-bar .tab:hover{color:var(--color-text);background:var(--color-surface)}.tab-bar .tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:600}.tab-bar .tab:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.screen-content{margin-top:calc(var(--header-height) + var(--tab-bar-height));padding:var(--spacing-md)}.calculator-screen{grid-template-columns:var(--input-panel-width) 1fr;gap:var(--spacing-md);max-width:1400px;margin:0 auto;display:grid}.input-panel{max-height:calc(100vh - var(--header-height) - var(--tab-bar-height) - var(--spacing-lg));background:var(--color-surface-elevated);border-radius:var(--radius-md);padding:var(--spacing-md);border:1px solid var(--color-border);scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;position:relative;overflow-y:auto}.input-panel::-webkit-scrollbar{width:8px}.input-panel::-webkit-scrollbar-track{margin:var(--spacing-sm) 0;background:0 0}.input-panel::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:var(--radius-sm);background-clip:padding-box;border:2px solid #0000}.input-panel::-webkit-scrollbar-thumb:hover{background-color:var(--color-text-muted)}.input-panel:after{content:"";height:var(--spacing-md);pointer-events:none;background:linear-gradient(to bottom, transparent, var(--color-surface-elevated));border-bottom-left-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);position:absolute;bottom:0;left:0;right:8px}.input-panel .field-group{margin-bottom:var(--spacing-md)}.input-panel .field-group label{color:var(--color-label);text-transform:uppercase;letter-spacing:.8px;margin-bottom:var(--spacing-xs);font-size:12px;font-weight:600;display:block}.input-panel .field-group select,.input-panel .field-group input[type=number],.input-panel .field-group input[type=text]{width:100%;padding:var(--spacing-sm) var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-size:14px;font-family:var(--font-mono)}.input-panel .field-group select:focus,.input-panel .field-group input:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-light);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none}.right-column{gap:var(--spacing-md);flex-direction:column;min-width:0;display:flex}.plot-canvas{background:var(--color-plot-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);min-height:400px;animation:plot-fade-in .28s var(--ease-out-quart);position:relative;overflow:hidden}.plot-canvas svg{width:100%;height:100%}.metrics-panel{gap:var(--spacing-sm);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));display:grid}.metric-card{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);animation:metric-pop .22s var(--ease-out-quart) backwards}.metrics-panel .metric-card:first-child{animation-delay:0s}.metrics-panel .metric-card:nth-child(2){animation-delay:35ms}.metrics-panel .metric-card:nth-child(3){animation-delay:70ms}.metrics-panel .metric-card:nth-child(4){animation-delay:.105s}.metrics-panel .metric-card:nth-child(5){animation-delay:.14s}.metrics-panel .metric-card:nth-child(6){animation-delay:.175s}.metrics-panel .metric-card:nth-child(n+7){animation-delay:.21s}.metric-card .metric-label{color:var(--color-label);text-transform:uppercase;letter-spacing:.8px;font-size:11px;font-weight:600}.metric-card .metric-value{font-size:16px;font-weight:700;font-family:var(--font-mono);color:var(--color-primary);text-overflow:ellipsis;white-space:nowrap;max-width:100%;margin-top:2px;overflow:hidden}.metric-card .metric-value.null{color:var(--color-text-muted)}.mode-selector{gap:var(--spacing-xs);background:var(--color-surface);border-radius:var(--radius-md);padding:var(--spacing-xs);border:1px solid var(--color-border);display:flex}.mode-selector .mode-tab{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;flex:1;font-size:13px;font-weight:500}.mode-selector .mode-tab:hover{color:var(--color-text);background:var(--color-surface-elevated)}.mode-selector .mode-tab.active{background:var(--color-primary);color:#fff}.mode-selector .mode-tab:disabled{opacity:.5;cursor:not-allowed}.mode-selector .mode-tab:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.theme-toggle{border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;width:36px;height:36px;color:var(--color-text-secondary);transition:all var(--transition-fast);background:0 0;justify-content:center;align-items:center;font-size:18px;display:flex}.theme-toggle:hover{background:var(--color-surface);color:var(--color-text)}.theme-toggle:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.sr-only{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.validation-error{color:var(--color-error);animation:notice-slide-in .18s var(--ease-out-quart);margin-top:2px;font-size:12px}.validation-warning{color:var(--color-warning);animation:notice-slide-in .18s var(--ease-out-quart);margin-top:2px;font-size:12px}.error-banner{background:var(--color-error-light);border:1px solid var(--color-error);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--color-error);margin-bottom:var(--spacing-md);animation:notice-slide-in .2s var(--ease-out-quart);font-size:13px}.placeholder-screen{min-height:400px;color:var(--color-text-muted);text-align:center;justify-content:center;align-items:center;gap:var(--spacing-md);flex-direction:column;font-size:16px;display:flex}.action-btn{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-elevated);color:var(--color-text);cursor:pointer;transition:all var(--transition-fast);font-size:14px}.actions-region{gap:var(--spacing-sm);margin-top:var(--spacing-sm);padding-top:var(--spacing-sm);border-top:1px solid var(--color-border);flex-wrap:wrap;align-items:center;display:flex}.action-btn:hover:not(:disabled){background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.action-btn:disabled{opacity:.4;cursor:not-allowed}.action-btn.primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.action-btn.primary:hover:not(:disabled){background:var(--color-primary-hover)}.action-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.section-collapsible{border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);overflow:hidden}.section-collapsible .section-header{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface);cursor:pointer;text-align:left;width:100%;color:var(--color-text);transition:background var(--transition-fast), color var(--transition-fast);border:none;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;display:flex}.section-collapsible .section-header:hover{background:var(--color-bg);color:var(--color-primary)}.section-collapsible .section-header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.section-collapsible .section-body{padding:var(--spacing-md);animation:section-expand .22s var(--ease-out-quart)}.components-screen{gap:var(--spacing-md);grid-template-columns:1fr 1fr;max-width:1400px;margin:0 auto;display:grid}.comparison-screen{max-width:1400px;margin:0 auto}.reference-screen{max-width:900px;margin:0 auto}.component-table{border-collapse:collapse;width:100%;font-size:13px}.component-table th,.component-table td{padding:var(--spacing-xs) var(--spacing-sm);text-align:left;border-bottom:1px solid var(--color-border);overflow-wrap:anywhere}.component-table-empty{text-align:center;color:var(--color-text-muted);padding:var(--spacing-md);font-style:italic}.component-table th{color:var(--color-label);text-transform:uppercase;letter-spacing:.8px;font-size:11px;font-weight:600}.error-col-good{color:var(--color-success)}.error-col-warn{color:var(--color-warning)}.error-col-bad{color:var(--color-error)}.circuit-svg{width:100%;max-height:200px}.overlay-plot{background:var(--color-plot-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);min-height:350px;position:relative;overflow:hidden}.trade-off-table{border-collapse:collapse;width:100%;font-size:13px}.trade-off-table th,.trade-off-table td{padding:var(--spacing-xs) var(--spacing-sm);text-align:left;border-bottom:1px solid var(--color-border)}.preset-grid{gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.preset-card{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md);cursor:pointer;transition:all var(--transition-fast)}.preset-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}.preset-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.preset-card .preset-name{margin-bottom:var(--spacing-xs);font-weight:600}.preset-card .preset-desc{color:var(--color-text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;display:-webkit-box;overflow:hidden}.export-section{gap:var(--spacing-sm);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));display:grid}.wizard-modal-overlay{z-index:200;animation:modal-overlay-in .18s var(--ease-out-quart);background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.wizard-modal{background:var(--color-surface-elevated);border-radius:var(--radius-lg);padding:var(--spacing-xl);width:90%;max-width:600px;max-height:80vh;animation:modal-rise-in .26s var(--ease-out-expo);transform-origin:50%;will-change:transform, opacity;overflow-y:auto}@keyframes modal-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes modal-rise-in{0%{opacity:0;transform:translateY(10px)scale(.975)}to{opacity:1;transform:translateY(0)scale(1)}}.wizard-steps{gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);justify-content:center;display:flex}.wizard-step-dot{background:var(--color-border);width:10px;height:10px;transition:background-color .22s var(--ease-out-quart), transform .22s var(--ease-out-quart);border-radius:50%}.wizard-step-dot.active{background:var(--color-primary);transform:scale(1.25)}.glossary-tooltip{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--spacing-sm);z-index:150;max-width:250px;box-shadow:var(--shadow-md);overflow-wrap:break-word;word-break:break-word;font-size:12px;position:absolute}.latex-container{padding:var(--spacing-sm);font-size:16px;overflow-x:auto}.histogram-container{background:var(--color-plot-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);min-height:250px}.order-finder{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md)}@media (width<=640px){.calculator-screen,.components-screen{grid-template-columns:1fr}.tab-bar{border-bottom:none;border-top:1px solid var(--color-border);padding-bottom:env(safe-area-inset-bottom,0);top:auto;bottom:0}.screen-content{margin-top:var(--header-height);margin-bottom:var(--tab-bar-height);padding:var(--spacing-sm)}.input-panel{scrollbar-width:none;max-height:none}.input-panel::-webkit-scrollbar{display:none}.input-panel:after{display:none}.mode-selector{-webkit-overflow-scrolling:touch;overflow-x:auto}.plot-canvas{min-height:280px}.overlay-plot{min-height:240px}.histogram-container{min-height:200px}.wizard-modal{padding:var(--spacing-md);width:calc(100% - var(--spacing-lg));max-height:90vh}.app-header{padding:0 var(--spacing-sm);padding-top:env(safe-area-inset-top,0);height:calc(var(--header-height) + env(safe-area-inset-top,0))}.app-header .header-title{letter-spacing:1px;font-size:14px}.app-header .header-right{gap:var(--spacing-xs)}.header-btn{padding:var(--spacing-xs) var(--spacing-sm);font-size:13px}.feedback-fab{bottom:calc(var(--tab-bar-height) + var(--spacing-sm) + env(safe-area-inset-bottom,0))!important}.preset-grid{grid-template-columns:1fr}.metrics-panel{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}}@media (width>=641px) and (width<=1024px){.calculator-screen{grid-template-columns:280px 1fr}}@media (width>=1025px){.calculator-screen{grid-template-columns:var(--input-panel-width) 1fr}}@media (width<=400px){.app-header .header-title{font-size:12px}.header-btn{padding:var(--spacing-xs);font-size:12px}.metric-card .metric-value{font-size:14px}}@media (width<=640px) and (orientation:landscape){.plot-canvas{min-height:200px}.overlay-plot{min-height:180px}.screen-content{padding:var(--spacing-xs)}}@media (hover:none) and (pointer:coarse){.header-btn,.theme-toggle,.action-btn,.tab-bar .tab,.mode-selector .mode-tab,.preset-card,.demo-dataset-card{min-height:44px}.help-icon{width:28px;height:28px;font-size:13px}.input-panel .field-group input[type=radio]{width:20px;height:20px}:root{--cc-control-height:42px}}@media print{.app-header,.tab-bar,.feedback-fab,.wizard-modal-overlay,.computing-indicator,.action-btn,.settings-panel,.help-icon{display:none!important}body{color:#000;background:#fff}.app-container{display:block}.screen-content{margin-top:0;margin-bottom:0;padding:0}.calculator-screen,.components-screen,.comparison-layout{display:block}.input-panel,.metric-card,.plot-canvas,.overlay-plot{page-break-inside:avoid;background:#fff;border:1px solid #999}.plot-canvas{min-height:300px}}.header-btn-accent{border-color:var(--color-primary);color:var(--color-primary);font-weight:600}.header-btn-accent:hover:not(:disabled){background:var(--color-primary);color:#fff}.demo-dataset-list{gap:var(--spacing-sm);flex-direction:column;max-height:50vh;display:flex;overflow-y:auto}.demo-dataset-card{text-align:left;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;padding:var(--spacing-md);cursor:pointer;transition:all var(--transition-fast);display:block}.demo-dataset-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}.demo-dataset-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.demo-dataset-name{margin-bottom:var(--spacing-xs);color:var(--color-text);font-weight:600}.demo-dataset-desc{color:var(--color-text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;display:-webkit-box;overflow:hidden}.help-icon{background:var(--color-border);width:16px;height:16px;color:var(--color-text-muted);cursor:help;-webkit-user-select:none;user-select:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-left:4px;font-size:10px;font-weight:700;line-height:1;display:inline-flex;position:relative}.help-icon:hover,.help-icon:focus{background:var(--color-primary);color:#fff}.help-icon:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}:root{--transition-theme:.24s ease}.header-btn:active:not(:disabled),.action-btn:active:not(:disabled),.mode-selector .mode-tab:active:not(:disabled),.tab-bar .tab:active{transform:translateY(1px)}.action-btn:hover:not(:disabled){transform:translateY(-1px)}.preset-card:hover,.demo-dataset-card:hover{transform:translateY(-2px)}.theme-toggle:hover{transform:rotate(-12deg)}.theme-toggle:active{transform:rotate(-12deg)scale(.94)}.help-icon{transition:background var(--transition-fast), color var(--transition-fast), transform .15s ease}.help-icon:hover,.help-icon:focus{transform:scale(1.12)}.screen-content>[role=tabpanel]{animation:.2s ease-out screen-fade-in}@keyframes screen-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes notice-slide-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes section-expand{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes plot-fade-in{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@keyframes metric-pop{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.help-icon-tooltip{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--spacing-sm);z-index:150;min-width:160px;max-width:240px;box-shadow:var(--shadow-md);color:var(--color-text);white-space:normal;text-align:left;overflow-wrap:break-word;word-break:break-word;font-size:12px;font-weight:400;line-height:1.4;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.plot-caption{color:var(--color-text-muted);margin-top:4px;font-size:11px;line-height:1.4}.plot-legend{color:var(--color-text-muted);gap:12px;margin-top:4px;font-size:11px;display:flex}.plot-legend-item{align-items:center;gap:4px;display:flex}.plot-legend-swatch{width:16px;height:2px;display:inline-block}.settings-section{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--color-border)}.settings-section:last-of-type{border-bottom:none}.settings-row{justify-content:space-between;align-items:center;gap:var(--spacing-md);display:flex}.settings-label{color:var(--color-text);font-size:14px;font-weight:600}.settings-hint{color:var(--color-text-muted);margin-top:var(--spacing-xs);margin-bottom:0;font-size:12px}.computing-indicator{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-md);color:var(--color-text-muted);animation:notice-slide-in .18s var(--ease-out-quart);font-size:12px;display:flex}.computing-indicator:before{content:"";border:2px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;width:12px;height:12px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fab-rise-in{0%{opacity:0;transform:scale(.6)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}.feedback-fab{animation:fab-rise-in .42s var(--ease-out-expo) .22s backwards}.plot-empty{justify-content:center;align-items:center;display:flex}.plot-empty-message{color:var(--color-text-muted);font-size:14px}.comparison-layout{gap:var(--spacing-md);display:flex}.comparison-layout .comparison-plot-area{flex:1;min-width:0}.comparison-layout .comparison-sidebar{flex-shrink:0;width:280px}@media (width<=640px){.comparison-layout{flex-direction:column}.comparison-layout .comparison-sidebar{width:100%}}@media (width>=1600px){.calculator-screen,.components-screen,.comparison-screen{max-width:1500px}}.screen-loading{min-height:200px;color:var(--color-text-muted);justify-content:center;align-items:center;gap:var(--spacing-sm);font-size:14px;display:flex}.screen-loading:before{content:"";border:2px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;width:14px;height:14px;animation:.8s linear infinite spin}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (prefers-contrast:more){:root{--color-border:#6a6a64;--color-text-secondary:#2a2a26;--color-text-muted:#3a3a36}[data-theme=dark]{--color-border:#8a8f96;--color-text-secondary:#d8d8d4;--color-text-muted:#c8c8c4}.app-header,.tab-bar,.input-panel,.plot-canvas,.metric-card,.preset-card,.section-collapsible,.wizard-modal,.action-btn,.header-btn,.theme-toggle{border-width:2px}}@media (forced-colors:active){.action-btn,.header-btn,.theme-toggle,.mode-selector .mode-tab,.tab-bar .tab,.preset-card,.demo-dataset-card{border:1px solid canvastext}.action-btn.primary,.mode-selector .mode-tab.active{forced-color-adjust:none;color:highlighttext;background:highlight}.metric-card .metric-value,.metric-card .metric-label{color:canvastext}}