:root{color-scheme:dark;--bg: #0b1e33;--surface-1: #122a47;--surface-2: #183a5e;--grid-line: #1e4a73;--text: #eaf2fb;--text-muted: #8fb0d1;--accent: #ffb454;--accent-support: #5ec8f2;--success: #5fd68a;--danger: #ff6b6b;--font-display: "JetBrains Mono", ui-monospace, "SF Mono", monospace;--font-ui: "Inter", system-ui, sans-serif;--space-1: 8px;--space-2: 16px;--space-3: 24px;--space-4: 32px;--space-6: 48px;--space-8: 64px;--radius-control: 4px;--radius-plot: 2px;--glow-accent: 0 0 24px rgba(255, 180, 84, .15);--motion-ui: .15s ease-out;--motion-point: 90ms ease-out}*{box-sizing:border-box}html{height:100%}body{margin:0;min-height:100%;background:var(--bg);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:32px 32px;background-attachment:fixed;color:var(--text);font-family:var(--font-ui);font-size:16px;line-height:1.5}#app{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3{font-family:var(--font-display);margin:0}button,input,select,textarea{font-family:inherit;color:inherit}a{color:var(--accent-support)}:focus-visible{outline:2px solid var(--accent-support);outline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}.wordmark{font-size:1.5rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}.wordmark__o-wrap{position:relative;display:inline-block;color:var(--accent)}.wordmark__o-trace{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;width:calc(100% + 12px);height:calc(100% + 12px);pointer-events:none;overflow:visible}.wordmark__o-trace circle{fill:none;stroke:var(--accent-support);stroke-width:2;stroke-linecap:round;stroke-dasharray:101;stroke-dashoffset:101;animation:trace-circle .9s ease-out .2s forwards}@keyframes trace-circle{to{stroke-dashoffset:0}}.app__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--grid-line);background:#0b1e33d9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);position:sticky;top:0;z-index:10}.app__tagline{margin:0;color:var(--text-muted);font-size:.875rem;display:none}.layout{flex:1;display:flex;flex-direction:column}.rail{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2);overflow-y:auto}.plot-section{position:relative;flex:0 0 55vh;min-height:320px;padding:var(--space-2);display:flex;flex-direction:column}.plot-canvas-wrap{position:relative;flex:1;min-height:0;background:var(--surface-1);border:1px solid var(--grid-line);border-radius:var(--radius-plot)}.plot-canvas{display:block;width:100%;height:100%}@media(min-width:768px){.app__tagline{display:block}}@media(min-width:1024px){#app{height:100vh;min-height:0}.layout{flex:1;min-height:0;flex-direction:row-reverse;overflow:hidden}.rail{flex:0 0 30%;max-width:420px;padding:var(--space-3);border-left:1px solid var(--grid-line)}.plot-section{flex:1 1 70%;min-height:0;padding:var(--space-3)}}.panel{background:var(--surface-1);border:1px solid var(--grid-line);border-radius:var(--radius-control);padding:var(--space-2);display:flex;flex-direction:column;gap:var(--space-1)}.panel__label{font-family:var(--font-display);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0}.code-editor{width:100%;resize:vertical;background:var(--bg);color:var(--text);border:1px solid var(--grid-line);border-radius:var(--radius-control);padding:var(--space-1) var(--space-2);font-family:var(--font-display);font-size:.875rem;line-height:1.5;-moz-tab-size:2;tab-size:2;transition:border-color var(--motion-ui),box-shadow var(--motion-ui)}.code-editor:hover{border-color:var(--accent-support)}.code-editor:focus-visible{outline:none;border-color:var(--accent-support);box-shadow:0 0 0 3px #5ec8f233}.code-editor.has-error{border-color:var(--danger)}.code-editor.has-error:focus-visible{box-shadow:0 0 0 3px #ff6b6b33}.editor-hint{margin:0;color:var(--text-muted);font-size:.75rem;font-family:var(--font-display)}.editor-error{margin:0;color:var(--danger);font-size:.8125rem;font-family:var(--font-display)}.chip-list{display:flex;flex-wrap:wrap;gap:var(--space-1);min-height:32px}.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--grid-line);border-radius:var(--radius-control);padding:4px 4px 4px 10px;font-family:var(--font-display);font-size:.8125rem;color:var(--accent)}.chip__remove{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--text-muted);position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--radius-control);cursor:pointer;font-size:.875rem;line-height:1;transition:color var(--motion-ui),background var(--motion-ui)}.chip__remove:before{content:"";position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px}.chip__remove:hover,.chip__remove:focus-visible{color:var(--danger);background:#ff6b6b1f}.size-input{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--grid-line);border-radius:var(--radius-control);padding:var(--space-1) var(--space-2);font-family:var(--font-display);font-size:.875rem;min-height:44px;transition:border-color var(--motion-ui),box-shadow var(--motion-ui)}.size-input:hover{border-color:var(--accent-support)}.size-input:focus-visible{outline:none;border-color:var(--accent-support);box-shadow:0 0 0 3px #5ec8f233}.size-picker-error{margin:0;color:var(--danger);font-size:.8125rem}.sample-list{display:flex;flex-direction:column;gap:var(--space-1)}.sample-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;background:var(--surface-2);border:1px solid var(--grid-line);border-radius:var(--radius-control);padding:var(--space-1) var(--space-2);min-height:44px;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:border-color var(--motion-ui),transform var(--motion-ui),background var(--motion-ui)}.sample-button:hover,.sample-button:focus-visible{border-color:var(--accent);background:var(--surface-1)}.sample-button:active{transform:translateY(1px) scale(.99)}.sample-button__name{font-family:var(--font-display);font-size:.875rem;color:var(--text)}.sample-button__description{font-size:.75rem;color:var(--text-muted)}.generator-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;min-height:44px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238fb0d1' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--text);border:1px solid var(--grid-line);border-radius:var(--radius-control);padding:var(--space-1) var(--space-4) var(--space-1) var(--space-2);font-family:var(--font-ui);font-size:.875rem;cursor:pointer;transition:border-color var(--motion-ui),box-shadow var(--motion-ui)}.generator-select:hover{border-color:var(--accent-support)}.generator-select:focus-visible{outline:none;border-color:var(--accent-support);box-shadow:0 0 0 3px #5ec8f233}.generator-select option{background:var(--surface-1);color:var(--text)}.measure-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:var(--accent);color:#1a1206;font-family:var(--font-display);font-weight:700;font-size:.9375rem;min-height:48px;border-radius:var(--radius-control);cursor:pointer;transition:transform .12s ease-out,box-shadow var(--motion-ui),background var(--motion-ui)}.measure-button:hover{background:#ffc274;box-shadow:var(--glow-accent)}.measure-button:active{transform:scale(.97) translateY(1px)}.measure-button:disabled{background:var(--surface-2);color:var(--text-muted);cursor:not-allowed;box-shadow:none}.measure-button:focus-visible{outline:2px solid var(--accent-support);outline-offset:2px}.mute-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--grid-line);background:var(--surface-2);color:var(--text-muted);width:44px;height:44px;border-radius:var(--radius-control);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1.125rem;transition:border-color var(--motion-ui),color var(--motion-ui)}.mute-toggle:hover,.mute-toggle:focus-visible{border-color:var(--accent-support);color:var(--text)}.mute-toggle[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.app__header-right{display:flex;align-items:center;gap:var(--space-2)}.header-link{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-2);border:1px solid var(--grid-line);border-radius:var(--radius-control);background:var(--surface-2);color:var(--text-muted);font-family:var(--font-display);font-size:.8125rem;text-decoration:none;white-space:nowrap;transition:border-color var(--motion-ui),color var(--motion-ui)}.header-link:hover,.header-link:focus-visible{border-color:var(--accent-support);color:var(--text)}.fit-label{margin:var(--space-1) 0 0;font-family:var(--font-display);font-size:.875rem;color:var(--text-muted);min-height:1.25em}.fit-label--success{color:var(--success);animation:fit-pulse .4s ease-out}.fit-label--danger{color:var(--danger)}.fit-label--shake{animation:fit-shake .4s ease-out}@keyframes fit-pulse{0%{opacity:.3;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes fit-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.about{border-top:1px solid var(--grid-line);background:#122a4766;padding:var(--space-6) var(--space-3)}.about__inner{max-width:70ch;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-2)}.about__title{font-family:var(--font-display);font-size:1.125rem;color:var(--accent);margin-top:var(--space-3)}.about__inner>.about__title:first-child{margin-top:0}.about p,.about li,.about dd{color:var(--text-muted)}.about__steps{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:var(--space-1)}.about__faq dt{font-family:var(--font-display);font-size:.9375rem;color:var(--text);margin-top:var(--space-2)}.about__faq dd{margin:4px 0 0}.site-footer{border-top:1px solid var(--grid-line);padding:var(--space-3);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-display);font-size:.8125rem;color:var(--text-muted)}.site-footer a{color:var(--text-muted);text-decoration:none;transition:color var(--motion-ui)}.site-footer a:hover,.site-footer a:focus-visible{color:var(--accent-support)}.site-footer__sep{color:var(--grid-line)}