@font-face{font-family:"Martian";src:url(/fonts/martian.woff2) format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-display:swap}
:root{--g:#141716;--s1:#1E2220;--s2:#272C29;--ink:#ECEFEA;--ink2:#A5ADA7;--acc:#D4F25A;--on:#141716;--ease:cubic-bezier(.23,1,.32,1);--t1:36px;--t2:15px;--t3:12px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--g);color:var(--ink);font:400 var(--t2)/1.5 "Martian",ui-monospace,monospace;-webkit-text-size-adjust:100%;font-variant-numeric:tabular-nums}
button,input{font:inherit;color:inherit;border:0;background:none}
button{cursor:pointer}
a{color:var(--ink);text-underline-offset:.2em;text-decoration-thickness:1px}
:focus{outline:none}:focus-visible{box-shadow:0 0 0 3px rgba(212,242,90,.5);border-radius:14px}
h1,h2,h3,.t1{text-wrap:balance}
.hint{text-wrap:pretty}
h1,.t1{font-size:var(--t1);line-height:1.05;font-weight:600;letter-spacing:-.02em}
h2{font-size:var(--t2);font-weight:600}
.small{font-size:var(--t3);color:var(--ink2);line-height:1.45}
.inst{position:relative;height:100dvh;min-height:560px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#scale{position:absolute;left:0;top:0;height:100%;width:46%;max-width:240px;display:block}
.side{position:absolute;right:0;top:0;bottom:0;left:min(46%,240px);padding:max(14px,env(safe-area-inset-top)) 16px 20px 12px;display:flex;flex-direction:column;gap:14px;pointer-events:none}
.side>*{pointer-events:auto}
.seg{align-self:flex-end;display:flex;background:var(--s1);border-radius:999px;padding:4px;position:relative}
.seg button{min-height:40px;padding:0 14px;border-radius:999px;font-size:var(--t3);font-weight:500;color:var(--ink2);position:relative;z-index:1;transition:color .2s}
.seg button[aria-pressed=true]{color:var(--on)}
.seg .thumb{position:absolute;top:4px;bottom:4px;border-radius:999px;background:var(--acc);transition:left .22s var(--ease),width .22s var(--ease)}
.read{margin-top:18px;display:flex;flex-direction:column;gap:2px}
.read .v{font-stretch:87.5%;font-size:54px;line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--acc)}
.read .u{font-size:var(--t2);color:var(--ink2)}
.units{display:flex;gap:6px}
.chip{min-height:44px;padding:0 14px;border-radius:14px;background:var(--s1);font-size:var(--t3);font-weight:500;color:var(--ink2);transition:transform .12s var(--ease),background .2s}
.chip[aria-pressed=true]{background:var(--s2);color:var(--ink)}
.chip:active,.btn:active,.seg button:active{transform:scale(.97)}
.status{margin-top:auto;display:flex;flex-direction:column;gap:8px;background:var(--s1);border-radius:18px;padding:12px 14px}
.status b{font-weight:500;font-size:var(--t3)}
.btn{min-height:48px;border-radius:999px;background:var(--acc);color:var(--on);font-weight:600;padding:0 18px;font-size:var(--t3);transition:transform .12s var(--ease)}
.btn.q{background:var(--s2);color:var(--ink)}
.hint{font-size:var(--t3);color:var(--ink2)}
/* ring mode */
.ring{display:none;flex-direction:column;gap:12px;align-items:center}
.ring.on{display:flex}
.circlebox{width:100%;display:grid;place-items:center;min-height:150px}
#circle{border-radius:999px;box-shadow:0 0 0 2px var(--acc);background:var(--s1)}
.sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
.sizes div{background:var(--s1);border-radius:14px;padding:8px 10px;display:flex;flex-direction:column}
.sizes b{font-size:var(--t2);font-weight:600}
.step{display:flex;gap:6px;width:100%}
.step button{flex:1;min-height:48px;border-radius:14px;background:var(--s2);font-weight:600}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:9px;background:var(--s2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:999px;background:var(--acc);margin-top:-11px}
input[type=range]::-moz-range-track{height:6px;border-radius:9px;background:var(--s2)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:999px;background:var(--acc);border:0}
.ruler-only.off{display:none}
/* sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .28s var(--ease);z-index:20}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:600px;margin:0 auto;background:var(--s1);border-radius:24px 24px 0 0;padding:12px 18px max(22px,env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .28s var(--ease);z-index:21;display:flex;flex-direction:column;gap:12px;max-height:92dvh;overflow:auto}
.sheet .grab{width:40px;height:5px;border-radius:9px;background:var(--s2);margin:0 auto 4px}
.open-cal .sheet.cal,.open-pick .sheet.pick{transform:none}.open-cal .sheet-bg,.open-pick .sheet-bg{opacity:1;pointer-events:auto}
#card{background:var(--s2);border-radius:3.18mm;box-shadow:0 0 0 2px var(--acc);margin:6px 0;display:grid;place-items:center;color:var(--ink2);font-size:var(--t3)}
.picks{display:flex;flex-direction:column;gap:8px}
.picks button{min-height:52px;border-radius:14px;background:var(--s2);text-align:left;padding:0 16px;font-weight:500}
/* guide */
.guide{max-width:640px;margin:0 auto;padding:56px 20px 32px;display:flex;flex-direction:column;gap:14px}
.guide h2{font-size:30px;line-height:1.15;margin-top:26px;font-weight:600;letter-spacing:-.01em}
.guide h3{font-size:var(--t2);font-weight:600;margin-top:6px}
.guide p,.guide li{color:var(--ink2);text-wrap:pretty}
.guide ol,.guide ul{padding-left:22px;display:flex;flex-direction:column;gap:6px}
.card2{background:var(--s1);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:10px}
.sub{display:flex;gap:8px;flex-wrap:wrap}.sub input{flex:1 1 200px;min-height:48px;background:var(--s2);border-radius:14px;padding:0 14px}.sub input::placeholder{color:#8f9891}
.err{color:var(--acc);font-size:var(--t3);min-height:1.2em;width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.models{display:flex;flex-wrap:wrap;gap:6px}.models a{font-size:var(--t3);background:var(--s1);border-radius:999px;padding:10px 14px;text-decoration:none;color:var(--ink2)}
.foot p{text-wrap:pretty}
.foot{max-width:640px;margin:0 auto;padding:24px 20px 48px;font-size:var(--t3);color:var(--ink2);display:flex;flex-direction:column;gap:6px}.foot a{color:var(--ink2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (min-width:700px){#scale{max-width:300px}.side{left:300px;padding-left:32px;max-width:520px}}