:root{--cream: #faf6ee;--paper: #ffffff;--surface-1: #f4eedd;--surface-2: #ece2c8;--line: #e6dcc2;--ink: #221d16;--ink-dim: #6f6552;--ink-faint: #a99e85;--gold: #b8892b;--gold-bright: #d9a63e;--gold-dim: #8c6a22;--gold-wash: rgba(184, 137, 43, .12);--on-gold: #221d16;--alert: #9c3b2e;--alert-bright: #c2604b;--instrument-bg: #17130f;--instrument-line: #362d1e;--instrument-text: #e9c878;--instrument-sub: #b7a883;--font-display: "Fraunces", ui-serif, Georgia, serif;--font-body: "Inter", ui-sans-serif, system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;--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]{--cream: #171310;--paper: #221c15;--surface-1: #2a2318;--surface-2: #332a1c;--line: #3d3221;--ink: #f4ecda;--ink-dim: #c7b998;--ink-faint: #8c8168;--gold: #d9a63e;--gold-bright: #e9c878;--gold-dim: #b8892b;--gold-wash: rgba(217, 166, 62, .14);--on-gold: #17130f;--alert: #c2604b;--alert-bright: #d98269;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(--cream);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,ol,ul{margin:0}ul,ol{padding:0;list-style:none}button,select{font:inherit;color:inherit}svg{display:block}::selection{background:var(--gold);color:var(--on-gold)}:focus-visible{outline:2px solid var(--gold);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);background:var(--paper);border-bottom:1px solid var(--line);flex-wrap:wrap}.brand{display:flex;align-items:center;gap:var(--space-2)}.brand-mark{width:26px;height:26px}.brand-name{font-family:var(--font-display);font-weight:600;font-size:1.25rem;letter-spacing:.005em}.header-right{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}main{width:100%;max-width:640px;margin:var(--space-6) auto 0;padding:var(--space-6) var(--space-6) var(--space-7);background:var(--paper);border-radius:var(--radius-lg);border:1px solid var(--line);border-top:3px solid var(--gold);box-shadow:0 1px 2px #221d160a,0 12px 32px -16px #221d162e;display:flex;flex-direction:column;gap:var(--space-6)}.info-section{width:100%;max-width:640px;margin:var(--space-8) auto 0;padding:0 var(--space-5);display:flex;flex-direction:column;gap:var(--space-5)}.info-section>h2{font-family:var(--font-display);font-weight:600;font-size:1.625rem;text-align:center}.app-footer{margin-top:var(--space-8);padding:var(--space-6) var(--space-5) var(--space-7);text-align:center;border-top:1px solid var(--line)}.footer-tagline{font-family:var(--font-display);font-style:italic;font-size:1.0625rem;max-width:30rem;margin:0 auto}.footer-fine{margin:var(--space-3) auto 0;max-width:32rem;font-size:.8125rem;color:var(--ink-faint);line-height:1.5}.footer-copyright{margin-top:var(--space-4);font-size:.75rem;color:var(--ink-faint)}.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(--gold);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(--gold);height:20px}.stepper-step[data-state=active] .stepper-label{color:var(--gold-dim)}.stepper-step[data-state=done] .stepper-tick{background:var(--ink-faint)}.stepper-step[data-state=done] .stepper-label{color:var(--ink-dim)}.step-eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dim)}.step-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}.step-intro h1{font-family:var(--font-display);font-weight:600;font-size:1.75rem;line-height:1.15;margin-top:var(--space-2)}.step-intro p{margin-top:var(--space-3);color:var(--ink-dim);line-height:1.55;font-size:.9375rem;max-width:34rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:.8rem 1.4rem;border-radius:var(--radius-md);border:1px solid transparent;font-family:var(--font-body);font-weight:600;font-size:.9375rem;letter-spacing:.01em;cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease}.btn:active{transform:scale(.97)}.btn-primary{background:var(--ink);color:var(--cream)}.btn-primary:hover{background:var(--gold);color:var(--on-gold)}.btn-large{width:100%;padding:1rem 1.5rem;font-size:1rem;text-transform:uppercase;letter-spacing:.06em}.btn-secondary{background:var(--surface-2);border-color:var(--line);color:var(--ink)}.btn-secondary:hover{border-color:var(--gold)}.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink-dim);padding:.6rem 1rem;font-size:.8125rem}.btn-ghost:hover{color:var(--ink);border-color:var(--gold)}.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-1);border:1px solid var(--line);color:var(--ink);font-family:var(--font-display);font-size:1.25rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}.btn-icon:hover{border-color:var(--gold);color:var(--gold-dim)}.mode-toggle{display:inline-flex;gap:2px;padding:3px;background:var(--surface-2);border-radius:var(--radius-md);align-self:flex-start}.mode-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:.5rem .9rem;border-radius:calc(var(--radius-md) - 3px);border:none;background:transparent;color:var(--ink-dim);font-size:.875rem;font-weight:500;cursor:pointer}.mode-btn svg{width:18px;height:18px}.mode-btn.is-active{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px #221d161f}.calibrate-stage{position:relative;height:clamp(220px,78vw,320px);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-lg);display:flex;align-items:flex-start;justify-content:flex-start;padding:20px;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}.resize-rect{position:relative;flex-shrink:0;border-radius:10px}.resize-rect.is-card{box-shadow:0 10px 24px -10px #17130f73}.card-face{position:relative;width:100%;height:100%;border-radius:10px;background:linear-gradient(135deg,#332b1f,#17130f 65%);color:#d9cba4;overflow:hidden}.card-chip{position:absolute;top:14%;left:8%;width:15%;aspect-ratio:4 / 3;border-radius:3px;background:linear-gradient(135deg,var(--gold-bright),var(--gold-dim))}.card-wave{position:absolute;top:10%;right:8%;width:12%;height:auto;color:#a99a72}.card-number{position:absolute;left:8%;bottom:32%;font-family:var(--font-mono);font-size:clamp(.55rem,3.2vw,.85rem);letter-spacing:.06em;color:#cbbd93;white-space:nowrap}.card-holder{position:absolute;left:8%;bottom:12%;font-family:var(--font-mono);font-size:clamp(.45rem,2.2vw,.6rem);letter-spacing:.1em;color:#8c8168}.ruler-face{position:relative;width:100%;height:100%;background:var(--paper);border:1.5px solid var(--gold);border-radius:6px;overflow:hidden}.ruler-mm-tick{position:absolute;top:0;width:1px;height:22%;background:var(--ink-faint)}.ruler-mm-tick.is-half{height:38%;background:var(--ink-dim)}.ruler-cm{position:absolute;top:0;height:100%}.ruler-cm-line{position:absolute;top:0;width:1.5px;height:58%;background:var(--ink)}.ruler-cm-label{position:absolute;bottom:8%;left:3px;font-family:var(--font-mono);font-size:.6875rem;color:var(--ink-dim)}.ruler-cm.is-last .ruler-cm-label{left:auto;right:3px}.resize-handle{position:absolute;right:-22px;bottom:-22px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:nwse-resize;touch-action:none;z-index:2}.resize-handle:after{content:"";width:22px;height:22px;border-radius:999px;background:var(--gold);border:3px solid var(--surface-1)}.calibrate-controls{display:flex;flex-direction:column;gap:var(--space-4)}.calibrate-instruction{color:var(--ink-dim);font-size:.875rem;line-height:1.55}.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}.why-panel{padding:var(--space-4);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-md)}.why-panel h3{font-family:var(--font-display);font-weight:600;font-size:1rem;margin-bottom:var(--space-2)}.why-panel p{font-size:.875rem;color:var(--ink-dim);line-height:1.55}.why-spec{margin-top:var(--space-2);font-family:var(--font-mono);font-size:.75rem;color:var(--gold-dim)}.unit-select{padding:.5rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--paper);font-size:.8125rem;font-weight:600}.flat-toggle{display:flex;align-items:center;gap:var(--space-3);font-size:.875rem;color:var(--ink-dim);cursor:pointer;width:fit-content}.flat-toggle input{position:absolute;opacity:0;pointer-events:none}.flat-toggle-track{position:relative;width:34px;height:18px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);flex-shrink:0;transition:background .2s ease}.flat-toggle-thumb{position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:999px;background:var(--ink-faint);transition:transform .2s ease,background .2s ease}.flat-toggle input:checked~.flat-toggle-track{background:var(--gold-wash);border-color:var(--gold)}.flat-toggle input:checked~.flat-toggle-track .flat-toggle-thumb{transform:translate(16px);background:var(--gold)}.measure-stage{position:relative;height:clamp(240px,82vw,340px);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;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(--gold)}.ring-handle-dot{fill:var(--gold-bright);stroke:var(--surface-1);pointer-events:none}.ring-handle-hit{fill:transparent;pointer-events:all;cursor:ew-resize;touch-action:none}.stepper-row{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.stepper-row-label{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}.size-stepper{display:flex;align-items:center;gap:var(--space-5)}.size-stepper-value{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:2.75rem;min-width:3ch;text-align:center}.stepper-row input[type=range]{width:100%;max-width:20rem}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(--gold-bright),var(--gold));border:3px solid var(--paper);cursor:pointer;margin-top:-10px}input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:999px;background:linear-gradient(180deg,var(--gold-bright),var(--gold));border:3px solid var(--paper);cursor:pointer}input[type=range]::-moz-range-track{height:4px;background:var(--line);border-radius:999px}.instrument-panel{background:var(--instrument-bg);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}.instrument-value{font-family:var(--font-mono);font-weight:500;font-size:clamp(2.5rem,12vw,3.5rem);color:var(--instrument-text);letter-spacing:.01em;text-shadow:0 0 18px rgba(233,200,120,.3)}.instrument-unit{font-size:.5em;color:var(--instrument-sub);margin-left:.25rem}.instrument-sub{margin-top:var(--space-2);font-family:var(--font-mono);font-size:.8125rem;color:var(--instrument-sub)}.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}.all-sizes-label{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:var(--space-3);text-align:center}.all-sizes-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border-radius:var(--radius-sm);overflow:hidden}.all-sizes-cell{background:var(--surface-1);padding:var(--space-3) var(--space-2);display:flex;flex-direction:column;align-items:center;gap:4px}.cell-unit{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)}.cell-value{font-family:var(--font-display);font-weight:600;font-size:1.125rem}.all-sizes-cell.is-active{background:var(--gold-wash)}.all-sizes-cell.is-active .cell-unit,.all-sizes-cell.is-active .cell-value{color:var(--gold-dim)}.landing-hero{text-align:center}.landing-hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(1.875rem,5vw,2.5rem);line-height:1.15}.landing-hero p{margin-top:var(--space-3);color:var(--ink-dim);font-size:1rem;max-width:28rem;margin-left:auto;margin-right:auto}.needs-section h2{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);text-align:center;margin-bottom:var(--space-4)}.needs-grid{display:flex;flex-direction:column;gap:var(--space-3)}.need-card{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-md)}.need-card svg{width:28px;height:28px;color:var(--gold-dim);flex-shrink:0}.need-card h3{font-family:var(--font-display);font-weight:600;font-size:1rem}.need-card p{margin-top:2px;font-size:.8125rem;color:var(--ink-dim);line-height:1.5}.need-tag{flex-shrink:0;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px}.need-tag-required{background:var(--gold-wash);color:var(--gold-dim)}.need-tag-optional{background:var(--surface-2);color:var(--ink-dim)}.tips-card{padding:var(--space-4);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-md)}.tips-card h3{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:600;font-size:.9375rem;margin-bottom:var(--space-3)}.tips-card h3 svg{width:18px;height:18px;color:var(--gold-dim)}.tips-card ul{display:flex;flex-direction:column;gap:var(--space-2)}.tips-card li{position:relative;padding-left:var(--space-5);font-size:.8125rem;color:var(--ink-dim);line-height:1.5}.tips-card li:before{content:"";position:absolute;left:0;top:.4em;width:8px;height:8px;border-radius:999px;background:var(--gold)}.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-4)}.how-card{padding:var(--space-5) var(--space-4);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);text-align:center}.how-num{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;background:var(--gold);color:var(--on-gold);font-family:var(--font-display);font-weight:600;font-style:italic;margin-bottom:var(--space-3)}.how-card h3{font-family:var(--font-display);font-weight:600;font-size:1.0625rem}.how-card p{margin-top:var(--space-2);font-size:.8125rem;color:var(--ink-dim);line-height:1.55}.size-table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper)}.size-table{width:100%;border-collapse:collapse;font-size:.8125rem;white-space:nowrap}.size-table th,.size-table td{padding:var(--space-3) var(--space-4);text-align:left}.size-table thead{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);background:var(--surface-1)}.size-table tbody tr:not(:last-child){border-bottom:1px solid var(--line)}.size-table-mm{font-family:var(--font-mono);font-weight:600;color:var(--gold-dim)}.faq-list{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper);overflow:hidden}.faq-item{border-bottom:1px solid var(--line)}.faq-item:last-child{border-bottom:none}.faq-item summary{cursor:pointer;padding:var(--space-4) var(--space-5);font-family:var(--font-display);font-weight:600;font-size:.9375rem;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";font-family:var(--font-mono);color:var(--gold);font-size:1.125rem;flex-shrink:0}.faq-item[open] summary:after{content:"−"}.faq-item p{padding:0 var(--space-5) var(--space-4);font-size:.875rem;color:var(--ink-dim);line-height:1.6}@media (max-width: 479px){.all-sizes-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 640px){main,.info-section{padding-left:var(--space-5);padding-right:var(--space-5)}main{padding-top:var(--space-7);padding-bottom:var(--space-8)}.step-intro h1{font-size:2.25rem}}
