:root{--surface-0: #ffffff;--surface-1: #f6f6f4;--surface-2: #ececea;--line: #e3e2dd;--ink: #161615;--ink-dim: #5b5b57;--ink-faint: #8d8d88;--accent: #2f9c92;--accent-bright: #8ed9d4;--accent-dim: #1f6f68;--highlight: #a3811f;--highlight-bright: #d4af37;--alert: #b23b23;--alert-bright: #e17a5f;--surface-recessed: #0b1211;--instrument-line: #26302f;--on-accent: #0b1211;--font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;--font-body: "Inter", ui-sans-serif, system-ui, sans-serif;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--space-8: 4rem;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 20px;color-scheme:light}:root[data-theme=night]{--surface-0: #0d1413;--surface-1: #161f1e;--surface-2: #1e2b29;--line: #293433;--ink: #f2f2ec;--ink-dim: #b7bdb8;--ink-faint: #7c8582;--accent: #6cc4bd;--accent-bright: #8ed9d4;--accent-dim: #3f7d78;--highlight: #d4af37;--highlight-bright: #e8c665;--alert: #e17a5f;--alert-bright: #f2967a;color-scheme:dark}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--surface-0);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;transition:background .2s ease,color .2s ease}h1,h2,h3,p,figure{margin:0}button{font:inherit;color:inherit}svg{display:block}::selection{background:var(--accent);color:var(--on-accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}#app{min-height:100%;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--line);flex-wrap:wrap}.brand{display:flex;align-items:center;gap:var(--space-2)}.brand-mark{width:24px;height:24px}.brand-name{font-family:var(--font-display);font-weight:600;font-size:1.125rem;letter-spacing:.01em}.header-right{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:var(--space-6) var(--space-5) var(--space-8)}.app-footer{padding:var(--space-4) var(--space-5) var(--space-6);text-align:center}.app-footer p{margin:0 auto;max-width:32rem;font-size:.8125rem;color:var(--ink-faint);line-height:1.5}.theme-toggle{display:flex;align-items:center;gap:var(--space-2);background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);padding:var(--space-1)}.theme-toggle-track{position:relative;width:34px;height:18px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);flex-shrink:0}.theme-toggle-thumb{position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:999px;background:var(--accent);transition:transform .2s ease,background .2s ease}:root[data-theme=night] .theme-toggle-thumb{transform:translate(16px)}.theme-toggle-text{min-width:3ch}.stepper{display:flex;align-items:flex-end;gap:var(--space-6)}.stepper-step{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);background:none;border:none;padding:0;cursor:default;font-family:var(--font-mono)}.stepper-step[data-clickable=true]{cursor:pointer}.stepper-tick{width:2px;height:14px;background:var(--line);border-radius:1px;transition:background .2s ease,height .2s ease}.stepper-label{font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);transition:color .2s ease}.stepper-step[data-state=active] .stepper-tick{background:var(--accent);height:20px}.stepper-step[data-state=active] .stepper-label{color:var(--accent)}.stepper-step[data-state=done] .stepper-tick{background:var(--ink-faint)}.stepper-step[data-state=done] .stepper-label{color:var(--ink-dim)}#main{display:flex;flex-direction:column;gap:var(--space-6)}.step-eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dim)}.step-intro h1{font-family:var(--font-display);font-weight:600;font-size:1.75rem;line-height:1.2;margin-top:var(--space-2)}.step-intro p{margin-top:var(--space-3);color:var(--ink-dim);line-height:1.55;font-size:.9375rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:.75rem 1.25rem;border-radius:var(--radius-md);border:1px solid transparent;font-family:var(--font-display);font-weight:600;font-size:.9375rem;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease}.btn:active{transform:scale(.97)}.btn-primary{background:linear-gradient(180deg,var(--accent-bright),var(--accent));color:var(--on-accent)}.btn-primary:hover{filter:brightness(1.06)}.btn-secondary{background:var(--surface-2);border-color:var(--line);color:var(--ink)}.btn-secondary:hover{border-color:var(--accent)}.btn-ghost{background:transparent;color:var(--ink-faint);padding:.5rem .75rem;font-size:.8125rem}.btn-ghost:hover{color:var(--ink)}.btn-row{display:flex;gap:var(--space-3);flex-wrap:wrap}.btn-icon{width:2.75rem;height:2.75rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);font-family:var(--font-mono);font-size:1.25rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1}.btn-icon:hover{border-color:var(--accent);color:var(--accent)}.calibrate-stage{position:relative;height:min(52vh,320px);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;touch-action:none;overflow:hidden}.calibrate-stage:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;opacity:.5}.card-rect{position:relative;border:2px solid var(--accent);border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,transparent);display:flex;align-items:center;justify-content:center;color:var(--accent-dim);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;text-align:center;padding:var(--space-2)}.resize-handle{position:absolute;right:-14px;bottom:-14px;width:28px;height:28px;border-radius:999px;background:var(--accent);border:3px solid var(--surface-1);cursor:nwse-resize;touch-action:none}.calibrate-controls{display:flex;flex-direction:column;gap:var(--space-4)}.fine-adjust{display:flex;align-items:center;justify-content:center;gap:var(--space-4)}.fine-adjust .readout-inline{font-family:var(--font-mono);font-size:.9375rem;color:var(--ink);min-width:6.5rem;text-align:center}.readout-panel{background:var(--surface-recessed);border:1px solid var(--instrument-line);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5);text-align:center;box-shadow:inset 0 2px 8px #0009}.readout-value{font-family:var(--font-mono);font-weight:500;font-size:clamp(2.5rem,12vw,3.5rem);color:var(--accent-bright);letter-spacing:.01em;text-shadow:0 0 18px rgba(142,217,212,.3)}.readout-unit{font-size:.5em;color:#7d8886;margin-left:.25rem}.readout-sub{margin-top:var(--space-2);font-family:var(--font-mono);font-size:.8125rem;color:#9fb4b1;min-height:1.2em}.measure-stage{position:relative;height:min(52vh,340px);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;touch-action:none;overflow:hidden}.ring-svg{position:absolute;top:0;right:0;bottom:0;left:0;overflow:visible}.crosshair-line{stroke:var(--ink-faint)}.ring-stroke{stroke:var(--accent)}.ring-handle-dot{fill:var(--accent-bright);stroke:var(--surface-1)}.ring-handle{cursor:ew-resize;touch-action:none}.measure-controls{display:flex;flex-direction:column;gap:var(--space-4)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:var(--line);border-radius:999px;outline-offset:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:999px;background:linear-gradient(180deg,var(--accent-bright),var(--accent));border:3px solid var(--surface-0);cursor:pointer;margin-top:-10px}input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:999px;background:linear-gradient(180deg,var(--accent-bright),var(--accent));border:3px solid var(--surface-0);cursor:pointer}input[type=range]::-moz-range-track{height:4px;background:var(--line);border-radius:999px}.banner-alert{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:color-mix(in srgb,var(--alert) 12%,transparent);border:1px solid var(--alert);border-radius:var(--radius-md);color:var(--alert);font-size:.875rem}.result-hero{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.result-size{font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,16vw,4.5rem);color:var(--highlight-bright);line-height:1}.result-mm{font-family:var(--font-mono);color:var(--ink-dim);font-size:1rem}.tip-card{display:flex;gap:var(--space-3);padding:var(--space-4);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-md);font-size:.875rem;color:var(--ink-dim);line-height:1.5}.tip-card strong{color:var(--ink)}.size-table-wrap details{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-1);overflow:hidden}.size-table-wrap summary{cursor:pointer;padding:var(--space-4);font-family:var(--font-display);font-weight:600;font-size:.9375rem;list-style:none;display:flex;align-items:center;justify-content:space-between}.size-table-wrap summary::-webkit-details-marker{display:none}.size-table-wrap summary:after{content:"+";font-family:var(--font-mono);color:var(--accent);font-size:1.125rem}.size-table-wrap details[open] summary:after{content:"−"}.size-table-body{padding:0 var(--space-4) var(--space-4);border-top:1px solid var(--line)}.size-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:var(--space-4);border-radius:var(--radius-sm);overflow:hidden}.size-grid-cell{background:var(--surface-1);padding:var(--space-2) var(--space-3);display:flex;flex-direction:column;gap:2px;font-family:var(--font-mono);font-size:.8125rem;white-space:nowrap}.size-grid-cell.is-match{background:color-mix(in srgb,var(--highlight-bright) 16%,transparent);color:var(--highlight-bright)}.size-grid-cell .cell-size{color:var(--ink-faint)}.size-grid-cell.is-match .cell-size{color:var(--highlight-bright)}.couple-sizes{margin-top:var(--space-5)}.couple-sizes h3{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-dim);margin-bottom:var(--space-2)}.couple-chip-row{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)}.couple-chip{font-family:var(--font-mono);font-size:.8125rem;padding:var(--space-1) var(--space-3);border-radius:999px;border:1px solid var(--line);color:var(--ink-dim)}.couple-chip.is-match{border-color:var(--highlight-bright);color:var(--highlight-bright)}@media (min-width: 480px){.size-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 640px){main{padding:var(--space-7) var(--space-5) var(--space-8)}.step-intro h1{font-size:2.25rem}}