.calc{align-items:start;row-gap:56px}.calc-in{grid-column:1 / span 6;display:flex;flex-direction:column;gap:clamp(34px,3.6vw,52px)}html:not(.js) .calc-out{grid-column:1 / span 7}.field{margin:0;padding:0;border:0;min-width:0}.field-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;border-top:3px solid var(--color-ink);padding-top:12px}.field-top label,.field legend,.field .legend{color:var(--color-muted)}.r-val{font-size:clamp(56px,6vw,96px);line-height:.8}.r-val i{color:var(--color-cobalt);font-size:.5em}.calc input[type=range]{--p:14.14%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:32px;margin:18px 0 0;background:transparent;cursor:pointer}.calc input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(to right,var(--color-cobalt) 0,var(--color-cobalt) var(--p),var(--color-ink) var(--p),var(--color-ink) 100%)}.calc input[type=range]::-moz-range-track{height:4px;background:var(--color-ink)}.calc input[type=range]::-moz-range-progress{height:4px;background:var(--color-cobalt)}.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-9px;background:var(--color-ink);border:0;border-radius:0;box-shadow:3px 3px 0 var(--color-cobalt);transition:transform .2s var(--ease)}.calc input[type=range]::-moz-range-thumb{width:22px;height:22px;background:var(--color-ink);border:0;border-radius:0;box-shadow:3px 3px 0 var(--color-cobalt)}.calc input[type=range]:hover::-webkit-slider-thumb{transform:translate(-1px,-1px)}.calc input[type=range]:focus-visible{outline:3px solid var(--color-cobalt);outline-offset:6px}.range-axis{display:flex;justify-content:space-between;margin-top:8px;color:var(--color-muted)}.field legend,.field .legend{float:left;width:100%;border-top:3px solid var(--color-ink);padding:12px 0 0;margin:0 0 16px}.seg{clear:both;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border:2px solid var(--color-ink)}.seg label{position:relative;display:block;cursor:pointer}.seg label+label{border-left:2px solid var(--color-ink)}.seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}.seg span{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:6px;height:100%;padding:14px clamp(10px,1.4vw,18px);background:var(--color-card);transition:color var(--d-ui)}.seg span:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--color-cobalt);clip-path:inset(0 100% 0 0);transition:clip-path var(--d-ui) var(--ease)}.seg b{font:700 clamp(18px,1.5vw,21px)/1.1 var(--font-sans);letter-spacing:-.015em}.seg small{color:var(--color-muted)}.seg .hint{font-size:13px;line-height:1.35}.seg label:hover span{background:var(--color-paper-2)}.seg input:checked+span{color:var(--color-white)}.seg input:checked+span:before{clip-path:inset(0 0 0 0)}.seg input:checked+span small{color:var(--color-cobalt-pale)}.seg input:focus-visible+span{outline:3px solid var(--color-ink);outline-offset:-6px}.seg--static{grid-template-columns:1fr}.depth:disabled .seg{opacity:.45}.depth:disabled .seg label{cursor:not-allowed}.tok{border-top:3px solid var(--color-ink);padding-top:16px}.switch{position:relative;display:inline-flex;align-items:center;gap:14px;cursor:pointer;font-weight:600;font-size:18px}.switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}.sw{flex:none;position:relative;width:48px;height:28px;border:2px solid var(--color-ink);background:var(--color-card);transition:background-color var(--d-hover)}.sw:after{content:"";position:absolute;top:4px;left:4px;width:16px;height:16px;background:var(--color-ink);transition:transform var(--d-ui) var(--ease),background-color var(--d-hover)}.switch input:checked+.sw{background:var(--color-cobalt)}.switch input:checked+.sw:after{transform:translate(20px);background:var(--color-white)}.switch input:focus-visible+.sw{outline:3px solid var(--color-cobalt);outline-offset:3px}.tok-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.tok-f{display:flex;flex-direction:column;gap:8px}.tok-f .mono{color:var(--color-muted)}.tok-f input{width:100%;height:54px;border:2px solid var(--color-ink);border-radius:0;background:var(--color-card);color:var(--color-ink);font:600 20px/1 var(--font-sans);font-variant-numeric:tabular-nums;padding:0 14px;-moz-appearance:textfield;appearance:textfield}.tok-f input:focus-visible{outline:3px solid var(--color-cobalt);outline-offset:2px}.tok-f input:disabled{opacity:.45;cursor:not-allowed}.tok-note{margin-top:12px;color:var(--color-muted)}.calc-out{grid-column:8 / -1;position:relative;background:var(--color-card);border:2px solid var(--color-ink);box-shadow:var(--shadow-lot);--seam:var(--color-card)}.co-bar{display:flex;justify-content:space-between;gap:12px;background:var(--color-ink);color:var(--color-paper);padding:12px clamp(16px,2.2vw,28px)}.co-bar .tag{color:var(--color-cobalt-tint)}.co-body{padding:clamp(20px,2.4vw,32px)}.co-lbl{display:block;color:var(--color-muted)}.co-val{margin:16px 0 0;font-size:clamp(56px,6.4vw,104px);line-height:.86;overflow-wrap:anywhere}.co-val>span{display:block}.co-val i{color:var(--color-cobalt);font-size:.62em}.co-per{margin-top:20px;padding-top:14px;border-top:2px solid var(--color-ink);font:600 clamp(17px,1.4vw,20px)/1.4 var(--font-sans);letter-spacing:-.01em;min-height:2.8em}.co-brk{margin-top:12px;color:var(--color-ink-2);min-height:2.8em}.calc-out .fine{max-width:none}.calc-out .btn{margin-top:24px}@media(max-width:1100px){.calc-in,.calc-out,html:not(.js) .calc-out{grid-column:1 / -1;max-width:720px}}@media(max-width:767px){.tok-grid,.seg{grid-template-columns:1fr}.seg label+label{border-left:0;border-top:2px solid var(--color-ink)}.calc-out{--off:8px;margin-right:8px}.calc-out .btn{width:100%}}
