:root{--primary-blue:#0866d5;--page:#fff;--surface:#fff;--surface-strong:#fff;--ink:#0b0f19;--muted:#475569;--line:#cbd5e1;--button:#0866d5;--button-hover:#0654b0;--soft-blue:#eff6ff;--soft-blue-strong:#dbeafe;--shadow:0 24px 80px #0866d51a;color:var(--ink);background:var(--page);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Plus Jakarta Sans,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400;line-height:1.4}*{box-sizing:border-box}html{touch-action:pan-x pan-y pinch-zoom;-webkit-text-size-adjust:100%;min-height:100%;overflow-x:hidden}body{touch-action:pan-x pan-y pinch-zoom;background:0 0;min-height:100dvh;margin:0;overflow-x:hidden}button,input,textarea,select{font:inherit}h1,h2,h3,p{margin:0}#root{touch-action:pan-x pan-y pinch-zoom;min-height:100dvh}.app-shell{background:radial-gradient(at 15% 0,#e0f1ff 0,#0000 50%),#f4f8fc;min-height:100dvh;padding:20px 16px}.sizer-ui{background:#fff;border:1px solid #dfebf6;border-radius:26px;width:min(100%,480px);margin:0 auto;overflow:clip;box-shadow:0 14px 60px #0d4d8610}.top-bar{justify-content:space-between;align-items:center;gap:12px;min-height:68px;padding:16px 22px 10px;display:flex}.header-logo{object-fit:contain;width:128px;height:38px}.header-spacer,.icon-button{width:40px;height:40px}.icon-button{color:#173654;cursor:pointer;background:#fff;border:1px solid #e6edf4;border-radius:50%;padding:9px}.size-badge{color:#0961bf;background:#edf6ff;border-radius:30px;padding:7px 10px;font-size:11px;font-weight:700}.screen{outline:none;flex-direction:column;gap:16px;min-width:0;padding:18px 28px 22px;display:flex}.screen>*{min-width:0}.eyebrow{color:#1764ad;text-transform:uppercase;letter-spacing:0;font-size:10px;font-weight:750}h1{letter-spacing:0;color:#112d4c;overflow-wrap:anywhere;font-size:clamp(25px,6.7vw,32px);font-weight:750;line-height:1.16}h1 span{color:#0866d5}.lead{color:#52677e;font-size:14px;line-height:1.65}.centered{text-align:center}.fine-print{color:#627389;font-size:11px;line-height:1.55}svg{flex-shrink:0;width:22px;height:22px}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline-offset:3px;outline:3px solid #86baff}button:disabled{cursor:not-allowed;opacity:.46}.primary-button,.secondary-button{text-align:center;overflow-wrap:anywhere;border-radius:14px;justify-content:center;align-items:center;gap:12px;width:100%;min-height:48px;padding:12px 17px;font-size:14px;font-weight:650;line-height:1.25;text-decoration:none;display:flex}.primary-button{color:#fff;background:linear-gradient(105deg,#0877ee,#075acc);border:1px solid #0866d5;box-shadow:0 5px 12px #0866d51a}.primary-button:hover:not(:disabled){background:#0655bd}.primary-button svg{width:18px;height:18px}.secondary-button{color:#075fbc;background:#fff;border:1px solid #bfd7ef}.secondary-button:hover{background:#f4f9ff}.text-button{color:#0864c1;background:0 0;border:0;min-height:40px;padding:8px;font-size:12px;font-weight:600}.hero-ring{flex-direction:column;justify-content:center;align-items:center;height:clamp(180px,28vh,250px);margin:0 0 16px;padding-bottom:12px;display:flex;position:relative}.hero-ring img{object-fit:contain;mix-blend-mode:multiply;width:auto;max-width:100%;height:auto;max-height:100%;position:relative}.hero-orbit{background:radial-gradient(#dcedff,#f6fbff 68%,#0000 70%);border-radius:50%;width:82%;height:70%;position:absolute;transform:rotate(-20deg)}.hero-caption{color:#456989;align-items:center;gap:6px;margin-top:9px;font-size:11px;display:flex}.hero-caption svg{width:17px;height:17px}.trust-row{color:#52677e;flex-wrap:wrap;justify-content:center;gap:5px 16px;font-size:10px;display:flex}.trust-row span{align-items:center;gap:4px;display:flex}.trust-row svg{color:#08796a;width:14px;height:14px}.app-footer{color:#8190a0;text-align:center;padding:0 20px 16px;font-size:10px}.method-options{gap:12px;display:grid}.method-card{text-align:left;color:#143a63;background:#fff;border:1px solid #dce9f4;border-radius:16px;grid-template-columns:44px minmax(0,1fr) 17px;align-items:center;gap:12px;padding:16px 14px;display:grid}.method-card.recommended{background:#f4faff;border-color:#74aaf0}.method-card:hover{background:#edf7ff;border-color:#0866d5}.method-card strong{font-size:14px;line-height:1.35;display:block}.method-card small{color:#5a7088;margin-top:5px;font-size:11px;line-height:1.6;display:block}.method-card span{min-width:0}.method-card strong,.method-card small,.small-tag{overflow-wrap:anywhere}.method-card>svg{width:17px}.method-icon{color:#0866d5;background:#e9f4ff;border-radius:50%;place-items:center;width:44px;height:44px;display:grid}.method-icon svg{width:26px;height:26px}.small-tag{color:#1466b5;margin-bottom:5px;font-size:9px;display:block}.note{color:#2f5274;background:#eef7ff;border:1px solid #e1effb;border-radius:12px;align-items:flex-start;gap:9px;min-width:0;padding:13px;display:flex}.note p{font-size:12px;line-height:1.55}.note svg{color:#0866d5;width:18px;height:18px;margin-top:1px}.note-warning{color:#71591d;background:#fff8e8;border-color:#f3dfab}.note-warning svg{color:#92701f}.step-list{gap:14px;margin:0;padding:0;list-style:none;display:grid}.step-list li{align-items:flex-start;gap:11px;display:flex}.step-list li>span{color:#fff;background:#0866d5;border-radius:50%;flex-shrink:0;place-items:center;width:24px;height:24px;font-size:11px;font-weight:650;display:grid}.step-list p{color:#425d78;font-size:12px;line-height:1.7}.instruction-art{background:linear-gradient(160deg,#f3f9ff,#fff);border:1px solid #e6eff8;border-radius:16px;place-items:center;display:grid}.instruction-art svg{width:100%;height:clamp(125px,21vh,180px)}.strip-illustration svg{height:108px}.measurement-form{flex-direction:column;gap:17px;display:flex}.measurement-form label{color:#244565;font-size:13px;font-weight:650}.unit-switch{background:#f8fbff;border:1px solid #c9dff4;border-radius:12px;padding:3px;display:flex}.unit-switch button{color:#456584;background:0 0;border:0;border-radius:9px;flex:1;min-height:40px;font-size:13px}.unit-switch button[aria-pressed=true]{color:#fff;background:#0866d5;font-weight:650}.measurement-input{border:1px solid #9bbfe6;border-radius:12px;align-items:center;padding-right:16px;display:flex}.measurement-input:focus-within{box-shadow:0 0 0 3px #cfe5ff}.measurement-input input{color:#173f68;background:0 0;border:0;border-radius:12px;width:100%;min-width:0;padding:18px;font-size:22px;font-weight:600}.measurement-input input:focus{outline:none}.measurement-input input::placeholder{color:#91a9bf;font-size:17px;font-weight:400}.measurement-input>span{color:#577796;font-size:13px}.has-error{border-color:#bc3434}.error-message{color:#ad2d2d;font-size:12px;line-height:1.6}.calibration-stage{background:#fbfdff;border:1px solid #d7e8f8;border-radius:16px;flex-direction:column;align-items:center;gap:30px;min-height:106px;padding:30px 0 15px;display:flex}.calibration-stage>span{color:#506e8b;font-size:11px}.physical-ruler{border-top:1px solid #0866d5;flex-shrink:0;height:20px;position:relative}.ruler-tick{border-left:1px solid #0866d5;width:0;height:7px;position:absolute;top:0}.ruler-tick.half{height:11px}.ruler-tick.major{height:16px}.ruler-tick small{color:#416381;font-size:9px;position:absolute;top:18px;left:0;transform:translate(-50%)}.adjuster{z-index:1;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:15px;display:grid;position:relative}.adjuster button{color:#0866d5;background:#edf7ff;border:1px solid #bfd8ef;border-radius:12px;place-items:center;width:44px;height:44px;display:grid}.adjuster input{accent-color:#0866d5;cursor:pointer;width:100%;min-height:40px;margin:0}.confirmation{color:#425a71;cursor:pointer;align-items:flex-start;gap:11px;padding:12px 0;font-size:12px;line-height:1.6;display:flex}.confirmation input{accent-color:#0866d5;flex-shrink:0;width:20px;height:20px;margin:0}.measurement-readout{background:#f2f8ff;border-radius:13px;justify-content:space-between;align-items:center;gap:12px;min-width:0;padding:12px 16px;display:flex}.measurement-readout>span{color:#42698c;font-size:12px}.measurement-readout strong{color:#075cbd;white-space:nowrap;font-size:24px}.measurement-readout small{font-size:13px;font-weight:500}.scale-stage{width:100%;min-width:0}.ring-scale-area{flex-direction:column;align-items:center;gap:24px;min-height:170px;padding:20px 16px 12px;display:flex}.calibrated-ring{box-sizing:border-box;background:#f9fcff;border:1px solid #0866d5;border-radius:50%;flex-shrink:0;max-width:none;transform:none}.strip-scale-area{width:min(100%,220px);margin:20px auto 56px;padding-left:24px;position:relative}.physical-ruler.vertical{border-top:0;border-left:2px solid #0866d5;width:25px}.vertical .ruler-tick{border-top:1px solid #0866d5;border-left:0;width:14px;height:0;left:-8px}.vertical .ruler-tick.half{width:19px}.vertical .ruler-tick.major{width:24px}.vertical .ruler-tick small{font-size:10px;top:0;left:34px;transform:translateY(-50%)}.strip-scale-area:before{content:"0 · start";color:#315d88;font-size:11px;position:absolute;top:-20px;left:16px}.strip-end-label{color:#075fbc;overflow-wrap:anywhere;max-width:calc(100vw - 72px);font-size:11px;line-height:1.3;position:absolute;left:16px;transform:translateY(8px)}.strip-end-label:before{content:"";border-top:2px solid #0866d5;width:72px;position:absolute;top:-8px}.inline-actions{justify-content:space-between;gap:10px;display:flex}.result-ring{outline-offset:4px;background:radial-gradient(circle,#fff 55%,#e3f3ff);border:4px solid #158cf2;border-radius:50%;outline:1px solid #a2d7ff;flex-direction:column;justify-content:center;align-items:center;width:144px;height:144px;margin:2px auto;display:flex;box-shadow:0 8px 25px #1681dd16}.result-ring span{color:#365d85;font-size:11px}.result-ring strong{color:#123f70;font-size:48px;line-height:1.25}.result-ring small{color:#6b849b;font-size:10px}.result-ring.between strong{text-align:center;font-size:29px;line-height:1.35}.result-details{background:#f1f8ff;border:1px solid #dfedfa;border-radius:14px;padding:16px}.result-details h2{color:#1766b3;margin-bottom:10px;font-size:12px}.result-details dl{gap:0;margin:0;display:grid}.result-details dl>div{border-top:1px dashed #c8ddf0;justify-content:space-between;gap:10px;min-width:0;padding:10px 0;font-size:12px;display:flex}.result-details dt{color:#526d86}.result-details dd{color:#193f65;text-align:right;overflow-wrap:anywhere;margin:0;font-weight:600}.chart-wrap{gap:12px;display:grid}.size-chart{border-collapse:collapse;text-align:center;width:100%;font-size:12px}.size-chart caption{text-align:left;color:#5b7084;padding-bottom:12px;font-size:12px}.size-chart th,.size-chart td{border-bottom:1px solid #e0edf8;padding:11px 7px}.size-chart thead th{color:#416587;background:#f0f8ff;font-size:10px;font-weight:600}.size-chart tbody th{color:#0866d5}.size-chart tbody td{color:#344f6b}.fit-tips{border:1px solid #dceaf6;border-radius:12px;padding:12px}.fit-tips summary{cursor:pointer;color:#075fbc;padding:3px 0;font-size:12px;font-weight:600}.fit-tips[open] .step-list{padding-top:15px}.print-preview{background:#fbfdff;border:1px solid #cbddec;border-radius:14px;flex-direction:column;align-items:center;gap:12px;padding:22px 16px;display:flex}.print-preview>svg{color:#0866d5;width:32px;height:32px}.print-preview strong{color:#25486c;font-size:16px}.print-preview>span,.print-preview small{color:#627b92;font-size:10px}.preview-circles{flex-wrap:wrap;justify-content:center;gap:10px;max-width:240px;display:flex}.preview-circles span{color:#254f76;border:1px solid #6785a2;border-radius:50%;place-items:center;width:44px;height:44px;font-size:12px;display:grid}@media (width<=540px){.app-shell{background:#fff;padding:0}.sizer-ui{box-shadow:none;border:0;border-radius:0;min-height:100dvh}.top-bar{min-height:60px;padding-top:max(10px, env(safe-area-inset-top));padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}.header-logo{width:116px}.header-spacer,.icon-button{width:36px;height:36px}.icon-button{padding:8px}.size-badge{padding:6px 8px}.screen{padding-left:max(20px, env(safe-area-inset-left));padding-right:max(20px, env(safe-area-inset-right))}.app-footer{padding-bottom:max(14px, env(safe-area-inset-bottom))}}@media (height<=740px){.screen{gap:12px;padding-top:10px;padding-bottom:14px}h1{font-size:25px;line-height:1.12}.lead{font-size:13px;line-height:1.55}.hero-ring{height:165px}.method-card{padding:12px}.step-list{gap:10px}.step-list p{line-height:1.55}.instruction-art svg{height:122px}.calibration-stage{gap:24px;min-height:96px;padding-block:22px 12px}.ring-scale-area{gap:18px;min-height:150px;padding-top:14px}.result-ring{width:120px;height:120px}.result-ring strong{font-size:40px}.app-footer{padding-bottom:10px}}@media (width<=350px){.screen{gap:12px;padding-inline:16px}.method-card{grid-template-columns:36px minmax(0,1fr) 16px;gap:9px}.method-icon{width:36px;height:36px}.method-card strong{font-size:13px}.measurement-readout{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px}.measurement-readout strong{font-size:21px}.adjuster{grid-template-columns:40px minmax(0,1fr) 40px;gap:10px}.adjuster button{width:40px;height:40px}.primary-button,.secondary-button{min-height:46px;padding-inline:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important}}.vertical .ruler-tick:last-child small{display:none}@media (height<=650px) and (width<=540px){.top-bar{min-height:54px;padding-bottom:6px}.screen{gap:10px;padding-top:8px;padding-bottom:12px}.lead{line-height:1.45}.screen-welcome .hero-ring{height:120px;margin-bottom:12px}.screen-methods .method-options{gap:8px}.screen-methods .method-card{padding:10px}.screen-methods .method-card small{line-height:1.4}.screen-instructions .instruction-art svg{height:100px}.screen-calibrate .calibration-stage{gap:18px;padding-block:16px 10px}.screen-measure .ring-scale-area{gap:14px;min-height:132px;padding-block:10px}.screen-result .result-ring{width:88px;height:88px}.screen-result .result-ring strong{font-size:32px}.screen-result .result-ring.between strong{font-size:22px}.screen-result .result-details{padding:12px}.screen-result .result-details dl>div{padding-block:7px}.screen-result .lead{font-size:12px}}@media (height<=520px) and (orientation:landscape){.app-shell{padding:0}.sizer-ui{width:100%;min-height:100dvh;box-shadow:none;border:0;border-radius:0}.top-bar{min-height:48px;padding:7px 18px 5px}.header-logo{width:108px;height:32px}.screen{gap:8px;padding:8px 18px 10px}h1{font-size:22px;line-height:1.1}.lead{font-size:12px;line-height:1.38}.hero-ring{height:116px}.method-options{gap:8px}.method-card{padding:9px 10px}.method-card small{line-height:1.35}.step-list{gap:7px}.step-list p{line-height:1.4}.instruction-art svg{height:88px}.calibration-stage{gap:16px;min-height:84px;padding-block:14px 8px}.ring-scale-area{gap:12px;min-height:118px;padding-block:8px}.primary-button,.secondary-button{min-height:42px;padding-block:9px}.text-button{min-height:34px;padding-block:6px}.app-footer{display:none}}.print-guide-sheet{display:none}@page{size:auto;margin:12mm}@media print{html,body,#root,.app-shell{background:#fff!important;width:auto!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;animation:none!important;overflow:visible!important}.sizer-ui,.app-shell:before,.app-shell:after{display:none!important}.print-guide{width:auto!important;max-width:none!important;margin:0!important;padding:0!important;display:block!important}.print-guide-sheet{color:#111;background:#fff;width:180mm;max-width:none;margin:0 auto;padding:0;font-family:Arial,sans-serif;font-size:9pt;line-height:1.35;display:block!important}.print-guide-sheet *{box-sizing:border-box}.print-guide-sheet h1{margin:0;font-size:18pt;line-height:1.1}.print-guide-sheet h2{margin:0 0 2mm;font-size:11pt;line-height:1.2}.print-guide-sheet p{margin:0;font-size:9pt;line-height:1.35}.print-guide-sheet section{break-inside:avoid;margin-top:5mm}.print-guide-heading{border-bottom:.3mm solid #111;justify-content:space-between;align-items:center;padding-bottom:4mm;display:flex}.print-guide-heading>strong{font-size:20pt}.print-guide-heading>div{text-align:right}.print-guide-heading p{margin-top:1mm}.print-guide-ruler{margin:2mm 0 0;display:block;width:54mm!important;max-width:none!important;height:12mm!important}.print-guide-circles{grid-template-columns:repeat(4,1fr);gap:3mm 4mm;margin:3mm 0 0;display:grid}.print-guide-circle-item{flex-direction:column;justify-content:end;align-items:center;gap:1mm;height:29mm;display:flex}.print-guide-circle{flex:none;display:block;max-width:none!important}.print-guide-circle-item span{font-size:8pt}.print-guide-sheet table{border-collapse:collapse;width:100%;font-size:8.5pt}.print-guide-sheet th,.print-guide-sheet td{text-align:left;border-bottom:.2mm solid #aaa;padding:1.2mm 2mm}.print-guide-sheet thead th{border-bottom-color:#111}.print-guide-sheet .print-guide-reference-note{margin-top:2mm;font-size:7.5pt}.print-guide-footer{border-top:.2mm solid #aaa;margin-top:4mm;padding-top:3mm;font-size:8pt}}
