.calc-off{max-width:var(--text);background:var(--bg);border-radius:18px;margin:32px auto 0;padding:14px 20px;font-weight:700}.js .calc-off,html:not(.js) .calc{display:none}.calc{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:36px;display:grid}.calc fieldset{border:0;min-width:0;margin:0;padding:0}.calc legend{font:400 24px/1.1 var(--display);margin-bottom:12px;padding:0}.calc-in,.calc-want{background:var(--bg);border-radius:22px;gap:22px;padding:24px 24px 8px;display:grid}.calc-out,.calc-need{background:var(--lemon);border-radius:22px;padding:24px}.calc-want{margin-top:18px}.hint{margin:-4px 0 12px;font-size:16px;line-height:1.4}@media (width>=900px){.calc{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start;gap:20px 24px}.calc .unit{grid-column:1/-1}.calc-hold{align-self:stretch}.calc-out{position:sticky;top:24px}.calc-want{margin-top:0}}.calc .unit{margin-bottom:6px}.unit legend{float:left;margin:0 16px 0 0;line-height:56px}.seg{background:var(--card);border:var(--line) solid var(--ink);box-shadow:0 4px 0 var(--ink);border-radius:999px;gap:2px;padding:3px;display:inline-flex}.seg label{cursor:pointer;display:block;position:relative}.seg input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.seg span{min-height:44px;font:700 16px/1 var(--body);border-radius:999px;align-items:center;gap:9px;padding:0 18px 0 14px;transition:background-color .2s;display:flex}.seg label:hover span{background:color-mix(in srgb, var(--lemon) 45%, var(--card))}.seg input:checked+span{background:var(--lemon)}.seg span:before{content:"";box-sizing:border-box;border:2.5px solid var(--ink);border-radius:50%;flex:none;width:14px;height:14px}.seg input:checked+span:before{background:var(--ink);box-shadow:inset 0 0 0 2px var(--lemon)}.seg input:focus-visible+span{outline:3px solid var(--ink);outline-offset:-3px}.field{grid-template-columns:minmax(0,1fr) minmax(0,9.5rem);align-items:center;column-gap:14px;display:grid}.field>label{font:700 18px/1.25 var(--body)}.box{position:relative}.box input{background:var(--card);width:100%;height:48px;color:var(--ink);font:700 20px/1 var(--body);text-align:right;font-variant-numeric:tabular-nums;border:0;border-radius:14px;padding:0 16px;display:block}.box input:has(+.u){padding-right:46px}.box input:focus-visible{outline:3px solid var(--ink);outline-offset:0;border-radius:14px}.box input{box-shadow:inset 0 3px 0 var(--ink)}.box input[aria-invalid=true]{box-shadow:inset 0 3px 0 var(--ink), inset 0 0 0 3px var(--hot)}.box .u{font:700 16px/1 var(--body);opacity:.7;pointer-events:none;position:absolute;top:50%;right:16px;translate:0 -50%}.err{min-height:26px;font:700 14px/18px var(--body);grid-column:1/-1;align-items:center;gap:8px;padding:4px 0 2px;display:flex}.err:not(:empty):before{content:"";border:2.5px solid var(--ink);background:var(--hot);border-radius:50%;flex:none;width:12px;height:12px}.example{margin:6px 0 16px;font-size:15px;line-height:1.45}.example a{text-underline-offset:3px;text-decoration:underline 2px}.out{grid-template-areas:"label""answer";gap:8px;display:grid}.out+.out{margin-top:20px}.out>label{font:800 13px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;grid-area:label}.out>output,.out>.none{grid-area:answer}.out output{display:block}.out .none{opacity:.75;align-self:start;font-size:16px;line-height:1.4}.out:has(output:not(:empty)) .none{visibility:hidden}[data-out=finished]{min-height:70px;font:400 34px/1.1 var(--display);text-wrap:balance}[data-out=finished] span{font:700 18px/1.4 var(--body);margin-top:4px;display:block}[data-out=shape]{min-height:2.7em;font:700 20px/1.35 var(--body);text-wrap:pretty}[data-out=needed]{min-height:2.3em;font:400 28px/1.15 var(--display);text-wrap:balance}.calc-out{container-type:inline-size}@container (width>=440px){[data-out=shape]{min-height:1.35em}}.previews{margin-top:22px;container-type:inline-size}.pv{transition:opacity .3s}.calc-out:has([data-out=shape]:empty) .pv{opacity:.4}.pv-row{--gap:16px;--cp:120px;--cy:96px;--w:calc(100cqw - var(--gap));--h0:min(240px, var(--w) / 2);justify-content:center;align-items:flex-end;gap:var(--gap);height:calc(var(--h0) + 30px);display:flex}.pv-row figure{flex:none;justify-items:center;gap:10px;margin:0;display:grid}.pv{height:min(var(--h0), var(--w) / (1 + var(--shape)), (var(--w) - var(--cp)) / var(--shape), var(--w) - var(--cy));aspect-ratio:48/48;border-radius:10px;position:relative;overflow:hidden}.pv[data-preview=yarn]{aspect-ratio:calc(48 * var(--shape)) / 48}.pv img{width:100%;height:100%;display:block;position:absolute;inset:0}.pv-row figcaption{white-space:nowrap;font:700 15px/20px var(--body)}.tool-text{margin-top:64px;font-size:20px;line-height:1.65}.tool-text>*{max-width:var(--text);margin-inline:auto}.tool-text>*+*{margin-top:1.15em}.tool-text h2{text-wrap:balance;margin-top:2em}.tool-text>h2:first-child{margin-top:0}.tool-text a{text-underline-offset:3px;text-decoration:underline 2px}.tool-text ul,.tool-text ol{padding-left:1.3em}.tool-text li+li{margin-top:.45em}.tool-text .math{background:var(--bg);border-radius:18px;padding:18px 24px;font-weight:700;list-style:none}.tool-text .math li+li{margin-top:.2em}@media (width<=560px){.calc{gap:12px;margin-top:28px}.calc-in,.calc-want{gap:18px;padding:20px 16px 6px}.calc-out,.calc-need{padding:20px 16px}.calc legend{font-size:22px}.field{grid-template-columns:minmax(0,1fr) minmax(0,8.5rem);column-gap:12px}.field>label{font-size:17px}[data-out=finished]{min-height:64px;font-size:30px}[data-out=shape]{font-size:18px}[data-out=needed]{font-size:24px}.pv-row{--gap:12px}.tool-text{margin-top:48px;font-size:18px;line-height:1.6}.tool-text .math{padding:16px 18px}}