.ratio-calc{background:var(--m-canvas);border:1px solid var(--m-rule);max-width:var(--prose-measure-wide,78ch);position:relative}.ratio-calc:after,.ratio-calc:before,.ratio-calc>.tick-bl,.ratio-calc>.tick-br{border:0 solid var(--m-accent);content:"";height:10px;pointer-events:none;position:absolute;width:10px}.ratio-calc:before{border-left-width:1.5px;border-top-width:1.5px;left:-1px;top:-1px}.ratio-calc:after{border-right-width:1.5px;border-top-width:1.5px;right:-1px;top:-1px}.ratio-calc>.tick-bl{border-bottom-width:1.5px;border-left-width:1.5px;bottom:-1px;left:-1px}.ratio-calc>.tick-br{border-bottom-width:1.5px;border-right-width:1.5px;bottom:-1px;right:-1px}.ratio-calc__presets{align-items:center;background:var(--m-canvas-alt);border-bottom:1px solid var(--m-rule);display:flex;flex-wrap:wrap;gap:12px 16px;padding:14px 18px}.ratio-calc__presets-label{color:var(--m-ink-55);font:var(--type-overline);letter-spacing:var(--tracking-overline);margin-right:6px;text-transform:uppercase}.ratio-calc__presets-row{background:var(--m-canvas);border:1px solid var(--m-rule);display:flex;flex-wrap:wrap;gap:0}.ratio-calc__preset{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-right:1px solid var(--m-rule);color:var(--m-ink-80);cursor:pointer;font:var(--type-label);font-weight:500;padding:7px 14px;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);white-space:nowrap}.ratio-calc__preset:last-child{border-right:0}.ratio-calc__preset:hover{background:var(--m-canvas-alt);color:var(--m-ink)}.ratio-calc__preset--active,.ratio-calc__preset[aria-checked=true]{background:var(--m-ink);color:var(--signal-white)}.ratio-calc__body{display:grid;gap:0;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}@media(max-width:640px){.ratio-calc__body{grid-template-columns:1fr}}.ratio-calc__inputs{border-right:1px solid var(--m-rule);display:flex;flex-direction:column;gap:12px;padding:18px 20px}@media(max-width:640px){.ratio-calc__inputs{border-bottom:1px solid var(--m-rule);border-right:0}}.ratio-calc__input{display:flex;flex-direction:column;gap:6px}.ratio-calc__input-label{color:var(--m-ink-55);font:var(--type-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase}.ratio-calc__input-row{align-items:stretch;background:var(--m-canvas);border:1px solid var(--m-rule);display:flex}.ratio-calc__input-row:focus-within{border-color:var(--m-accent);outline:1px solid var(--m-accent);outline-offset:-2px}.ratio-calc__input-row input{background:transparent;border:0;color:var(--m-ink);flex:1;font:500 18px/22px var(--font-mono);font-variant-numeric:tabular-nums;min-width:0;outline:none;padding:10px 12px}.ratio-calc__input-row input::-webkit-inner-spin-button,.ratio-calc__input-row input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ratio-calc__input-row input[type=number]{-moz-appearance:textfield}.ratio-calc__input-unit{align-items:center;background:var(--m-canvas-alt);border-left:1px solid var(--m-rule);color:var(--m-ink-55);display:flex;font:var(--type-mono);letter-spacing:.08em;padding:10px 14px;text-transform:uppercase}.ratio-calc__result{background:var(--m-canvas);display:flex;flex-direction:column;gap:6px;padding:18px 20px}.ratio-calc__result-label{color:var(--m-ink-55);font:var(--type-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase}.ratio-calc__result-value{color:var(--m-accent);font:500 40px/44px var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin:2px 0 4px}.ratio-calc__result-value--na{color:var(--m-ink-55);font-size:24px}.ratio-calc__band{border-top:1px solid var(--m-rule);margin-top:4px;padding-top:10px}.ratio-calc__band-name{color:var(--m-ink);font:500 14px/18px var(--font-display);margin-bottom:2px}.ratio-calc__band-desc{color:var(--m-ink-80);font:var(--type-body-sm);margin:0;max-width:40ch}