@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--font-primary:"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-size-xs:13px;--font-size-sm:14px;--font-size-md:16px;--font-size-lg:18px;--font-size-xl:20px;--font-size-2xl:22px;--font-size-3xl:24px;--font-size-4xl:35px;--font-weight-base:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-line-height-base:28px;--font-line-height-tight:1.25;--color-text-primary:#d1d5db;--color-text-secondary:#fff;--color-text-tertiary:#9ca3af;--color-text-inverse:oklch(75% .183 55.934);--color-surface-base:#000;--color-surface-muted:#030712;--color-surface-card:#0b0f19;--color-surface-card-hover:#111827;--color-surface-elevated:#1f2937;--color-border-muted:#374151;--color-border-hover:#4b5563;--color-border-accent:oklch(75% .183 55.934);--color-status-success:#4ade80;--color-status-error:#f87171;--color-status-warning:#fbbf24;--color-status-info:#38bdf8;--space-1:1px;--space-2:4px;--space-3:4.2px;--space-4:4.8px;--space-5:5.6px;--space-6:6px;--space-7:8px;--space-8:10px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;--space-32:32px;--radius-xs:4px;--radius-sm:8px;--motion-duration-instant:.1s;--motion-duration-fast:.2s;--motion-ease:cubic-bezier(.16, 1, .3, 1);--focus-ring:2px solid oklch(75% .183 55.934);--focus-offset:2px}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--color-surface-base);color:var(--color-text-primary);font-family:var(--font-primary);font-size:var(--font-size-md);font-weight:var(--font-weight-base);line-height:var(--font-line-height-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--color-surface-base)}::-webkit-scrollbar-thumb{background:var(--color-border-muted);border-radius:var(--radius-xs)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}.app-layout{background-color:var(--color-surface-base);min-height:100vh;display:flex}.sidebar{background:var(--color-surface-muted);border-right:var(--space-1) solid var(--color-border-muted);flex-direction:column;width:310px;min-width:310px;height:100vh;display:flex;position:sticky;top:0;overflow-y:auto}.sidebar-header{padding:var(--space-24) var(--space-20) var(--space-16);border-bottom:var(--space-1) solid var(--color-border-muted)}.sidebar-header h1{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-secondary);letter-spacing:-.01em}.sidebar-header p{font-size:var(--font-size-xs);color:var(--color-text-tertiary);margin-top:var(--space-4)}.sidebar-section{padding:var(--space-16) var(--space-20);border-bottom:var(--space-1) solid var(--color-border-muted)}.sidebar-section-title{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);margin-bottom:var(--space-8)}.arch-radio-group{gap:var(--space-2);flex-direction:column;display:flex}.arch-radio-item{align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-12);border-radius:var(--radius-xs);cursor:pointer;border:var(--space-1) solid transparent;font-size:var(--font-size-sm);color:var(--color-text-primary);transition:all var(--motion-duration-fast) var(--motion-ease);text-align:left;background:0 0;width:100%;display:flex}.arch-radio-item:hover{background:var(--color-surface-card);color:var(--color-text-secondary);border-color:var(--color-border-muted)}.arch-radio-item:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}.arch-radio-item.active{border-color:var(--color-text-inverse);color:var(--color-text-secondary);font-weight:var(--font-weight-medium);background:#eab30814}.arch-radio-item .radio-dot{border:2px solid var(--color-border-muted);width:14px;height:14px;transition:border-color var(--motion-duration-instant) ease;border-radius:50%;flex-shrink:0;position:relative}.arch-radio-item.active .radio-dot{border-color:var(--color-text-inverse)}.arch-radio-item.active .radio-dot:after{content:"";background:var(--color-text-inverse);border-radius:50%;width:5px;height:5px;position:absolute;top:2.5px;left:2.5px}.form-select,.form-input,.form-textarea{width:100%;padding:var(--space-8) var(--space-12);background:var(--color-surface-base);border:var(--space-1) solid var(--color-border-muted);border-radius:var(--radius-xs);color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--font-size-sm);transition:border-color var(--motion-duration-fast) var(--motion-ease);outline:none}.form-select:hover,.form-input:hover,.form-textarea:hover{border-color:var(--color-border-hover)}.form-select:focus-visible,.form-input:focus-visible,.form-textarea:focus-visible{border-color:var(--color-text-inverse);outline:var(--focus-ring)}.form-select:disabled,.form-input:disabled,.form-textarea:disabled{opacity:.5;cursor:not-allowed}.form-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-bottom:var(--space-6);display:block}.main-content{background:var(--color-surface-base);flex-direction:column;flex:1;min-width:0;display:flex}.page-header{padding:var(--space-32) var(--space-32) var(--space-24);background:var(--color-surface-muted);border-bottom:var(--space-1) solid var(--color-border-muted)}.page-header-title{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-text-secondary);letter-spacing:-.01em}.page-header-subtitle{font-size:var(--font-size-sm);color:var(--color-text-tertiary);margin-top:var(--space-4);max-width:800px}.badge-row{gap:var(--space-8);margin-top:var(--space-16);flex-wrap:wrap;display:flex}.badge{padding:2px var(--space-8);border-radius:var(--radius-xs);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.02em;align-items:center;display:inline-flex}.badge-blue{color:#38bdf8;border:var(--space-1) solid #38bdf840;background:#38bdf81a}.badge-purple{color:#c084fc;border:var(--space-1) solid #a78bfa40;background:#a78bfa1a}.badge-green{color:#4ade80;border:var(--space-1) solid #4ade8040;background:#4ade801a}.badge-amber{color:var(--color-text-inverse);border:var(--space-1) solid #eab30840;background:#eab3081a}.tabs{gap:var(--space-4);border-bottom:var(--space-1) solid var(--color-border-muted);padding:0 var(--space-32);background:var(--color-surface-muted);display:flex}.tab-button{padding:var(--space-12) var(--space-16);color:var(--color-text-tertiary);font-family:var(--font-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:color var(--motion-duration-fast) var(--motion-ease);background:0 0;border:none;position:relative}.tab-button:hover{color:var(--color-text-primary)}.tab-button:focus-visible{outline:var(--focus-ring);outline-offset:-2px}.tab-button.active{color:var(--color-text-secondary);font-weight:var(--font-weight-semibold)}.tab-button.active:after{content:"";background:var(--color-text-inverse);height:2px;position:absolute;bottom:-1px;left:0;right:0}.tab-content{padding:var(--space-32);flex:1}.btn{justify-content:center;align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-16);border-radius:var(--radius-xs);font-family:var(--font-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--motion-duration-fast) var(--motion-ease);border:var(--space-1) solid transparent;outline:none;display:inline-flex}.btn-primary{background:var(--color-text-inverse);color:#000;border-color:var(--color-text-inverse)}.btn-primary:hover:not(:disabled){opacity:.9}.btn-primary:active:not(:disabled){transform:scale(.99)}.btn-primary:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-secondary{background:var(--color-surface-card);color:var(--color-text-primary);border-color:var(--color-border-muted)}.btn-secondary:hover:not(:disabled){background:var(--color-surface-card-hover);color:var(--color-text-secondary)}.btn-secondary:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}.btn-full{width:100%}.query-area{gap:var(--space-20);margin-bottom:var(--space-20);grid-template-columns:1fr 320px;display:grid}.query-textarea{resize:vertical;min-height:100px}.sample-card{background:var(--color-surface-muted);border:var(--space-1) solid var(--color-border-muted);border-radius:var(--radius-xs);padding:var(--space-16)}.sample-card-title{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-tertiary);margin-bottom:var(--space-6)}.sample-card-text{font-size:var(--font-size-sm);color:var(--color-text-primary)}.result-grid{gap:var(--space-24);margin-top:var(--space-24);grid-template-columns:2fr 1fr;display:grid}.result-card{background:var(--color-surface-muted);border:var(--space-1) solid var(--color-border-muted);border-radius:var(--radius-sm);padding:var(--space-24)}.result-card h3{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);margin-bottom:var(--space-16)}.answer-block{background:var(--color-surface-base);border:var(--space-1) solid var(--color-border-muted);border-radius:var(--radius-xs);padding:var(--space-16);font-size:var(--font-size-sm);line-height:var(--font-line-height-base);color:var(--color-text-primary);white-space:pre-wrap;word-wrap:break-word}.source-card{background:var(--color-surface-base);border:var(--space-1) solid var(--color-border-muted);border-left:3px solid var(--color-text-inverse);padding:var(--space-12);border-radius:var(--radius-xs);margin-bottom:var(--space-12)}.source-card-title{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);margin-bottom:var(--space-4)}.source-card-text{font-size:var(--font-size-xs);color:var(--color-text-primary);line-height:1.5}.trace-section{margin-top:var(--space-20);padding-top:var(--space-16);border-top:var(--space-1) solid var(--color-border-muted)}.trace-section h4{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);margin-bottom:var(--space-12)}.trace-item{padding:var(--space-6) 0;border-bottom:var(--space-1) solid var(--color-border-muted);font-size:var(--font-size-xs);justify-content:space-between;align-items:center;display:flex}.trace-label{color:var(--color-text-tertiary)}.trace-value{color:var(--color-text-secondary);font-weight:var(--font-weight-semibold);font-family:monospace}.status-bar{align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-16);border-radius:var(--radius-xs);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-bottom:var(--space-16);display:flex}.status-success{border:var(--space-1) solid #4ade8040;color:var(--color-status-success);background:#4ade8014}.status-error{border:var(--space-1) solid #f8717140;color:var(--color-status-error);background:#f8717114}.spinner-overlay{justify-content:center;align-items:center;gap:var(--space-12);padding:var(--space-32);color:var(--color-text-tertiary);font-size:var(--font-size-sm);display:flex}.spinner{border:2px solid var(--color-border-muted);border-top-color:var(--color-text-inverse);border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.diagram-container{background:var(--color-surface-muted);border:var(--space-1) solid var(--color-border-muted);border-radius:var(--radius-sm);padding:var(--space-32);margin-bottom:var(--space-24);text-align:center}.diagram-container svg{max-width:100%;height:auto}.specs-grid{gap:var(--space-24);grid-template-columns:1fr 1fr;display:grid}.spec-card{background:var(--color-surface-muted);border:var(--space-1) solid var(--color-border-muted);border-radius:var(--radius-sm);padding:var(--space-24)}.spec-card h4{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-16);color:var(--color-text-secondary)}.step-list{padding:0;list-style:none}.step-list li{padding-left:var(--space-24);padding-bottom:var(--space-12);font-size:var(--font-size-xs);color:var(--color-text-primary);line-height:1.5;position:relative}.step-list li:before{content:attr(data-step);background:var(--color-surface-base);border:var(--space-1) solid var(--color-border-muted);width:18px;height:18px;font-size:10px;font-weight:var(--font-weight-bold);color:var(--color-text-inverse);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}.info-box{padding:var(--space-12);border-radius:var(--radius-xs);font-size:var(--font-size-xs);margin-bottom:var(--space-12);border:var(--space-1) solid var(--color-border-muted);background:var(--color-surface-base);color:var(--color-text-primary)}.info-box strong{color:var(--color-text-secondary)}.matrix-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--font-size-xs);border-radius:var(--radius-sm);border:var(--space-1) solid var(--color-border-muted);overflow:hidden}.matrix-table th{background:var(--color-surface-muted);color:var(--color-text-tertiary);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.06em;padding:var(--space-12) var(--space-16);text-align:left;border-bottom:var(--space-1) solid var(--color-border-muted);font-size:11px}.matrix-table td{padding:var(--space-12) var(--space-16);color:var(--color-text-primary);border-bottom:var(--space-1) solid var(--color-border-muted);background:var(--color-surface-base);transition:background var(--motion-duration-fast) ease}.matrix-table tr:hover td{background:var(--color-surface-card)}.matrix-table tr:last-child td{border-bottom:none}.cell-yes{color:var(--color-status-success);font-weight:var(--font-weight-semibold)}.cell-no{color:var(--color-text-tertiary)}.upload-zone{border:1px dashed var(--color-border-muted);border-radius:var(--radius-xs);padding:var(--space-16);text-align:center;cursor:pointer;background:var(--color-surface-base);transition:all var(--motion-duration-fast) var(--motion-ease);margin-bottom:var(--space-12)}.upload-zone:hover{border-color:var(--color-text-inverse);background:var(--color-surface-card)}.upload-zone:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}.upload-zone input[type=file]{display:none}.upload-zone p{font-size:var(--font-size-xs);color:var(--color-text-tertiary)}@media (width<=1024px){.sidebar{width:270px;min-width:270px}.query-area,.result-grid,.specs-grid{grid-template-columns:1fr}}
