.ratio-converter[data-v-733f127f]{flex-direction:column;gap:2.5rem;display:flex}.ratio-inputs[data-v-733f127f]{flex-wrap:wrap;align-items:end;gap:1rem;display:flex}.ratio-separator[data-v-733f127f]{color:var(--color-text-light);margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.conversion-inputs[data-v-733f127f]{flex-wrap:wrap;align-items:end;gap:1rem;display:flex}.conversion-arrow[data-v-733f127f]{color:var(--color-accent);font-size:2rem;font-weight:700}.calculation-display[data-v-733f127f]{margin-top:1rem}.ratio-decimal[data-v-733f127f]{color:var(--color-text-light);margin-top:.25rem;font-size:.9rem;display:block}@media (width<=768px){.ratio-inputs[data-v-733f127f]{justify-content:center}.conversion-inputs[data-v-733f127f]{flex-direction:column;justify-content:center;align-items:center}.conversion-arrow[data-v-733f127f]{transform:rotate(90deg)}}.pixel-em-converter[data-v-18dce33a]{flex-direction:column;gap:2.5rem;display:flex}.converter-grid[data-v-18dce33a]{flex-wrap:wrap;align-items:end;gap:1rem;display:flex}.conversion-equals[data-v-18dce33a]{color:var(--color-accent);font-size:2rem;font-weight:700}.calculation-display[data-v-18dce33a]{margin-top:1.5rem}.ems-input-container[data-v-18dce33a]{flex-direction:column;gap:.5rem;display:flex}.copy-button--small[data-v-18dce33a]{padding:.375rem .75rem;font-size:.9rem}.values-table[data-v-18dce33a]{border:1px solid var(--color-hairline);border-radius:8px;overflow:hidden}.table-header[data-v-18dce33a],.table-row[data-v-18dce33a]{grid-template-columns:1fr 1fr 2fr;display:grid}.table-header[data-v-18dce33a]{background:var(--color-primary);color:var(--color-white);font-weight:600}.table-row[data-v-18dce33a]{border:none;border-top:1px solid var(--color-hairline);width:100%;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background-color var(--ease-standard);background:0 0;margin:0;padding:0}.table-row[data-v-18dce33a]:hover{background:var(--color-background)}.table-row[data-v-18dce33a]:focus-visible{outline-offset:-4px}.table-cell[data-v-18dce33a]{padding:.75rem}.table-cell--usage[data-v-18dce33a]{color:var(--color-text-light);font-size:.9rem}@media (width<=768px){.converter-grid[data-v-18dce33a]{flex-direction:column;justify-content:center;align-items:center}.conversion-equals[data-v-18dce33a]{transform:rotate(90deg)}.values-table[data-v-18dce33a]{font-size:.9rem}.table-header[data-v-18dce33a],.table-row[data-v-18dce33a]{grid-template-columns:80px 100px 1fr}.table-cell[data-v-18dce33a]{padding:.5rem}}.line-height-calculator[data-v-8dfcbe0c]{flex-direction:column;gap:2.5rem;display:flex}.preview-text[data-v-8dfcbe0c]{max-width:100%;color:var(--color-text)}.preview-text p[data-v-8dfcbe0c]{margin:0 0 1em}.ratios-grid[data-v-8dfcbe0c]{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;display:grid}.ratio-card[data-v-8dfcbe0c]{background:var(--color-background);text-align:center;cursor:pointer;width:100%;font:inherit;color:inherit;transition:border-color var(--ease-standard), background-color var(--ease-standard);border:2px solid #0000;border-radius:8px;padding:1.5rem}.ratio-card[data-v-8dfcbe0c]:hover{border-color:var(--color-accent);background:var(--color-white)}.ratio-card[data-v-8dfcbe0c]:focus-visible{outline-offset:2px}.ratio-value[data-v-8dfcbe0c]{color:var(--color-primary);margin-bottom:.5rem;font-size:1.5rem;font-weight:700}.ratio-name[data-v-8dfcbe0c]{color:var(--color-text);margin-bottom:.25rem;font-weight:600}.ratio-usage[data-v-8dfcbe0c]{color:var(--color-text-light);font-size:.9rem}@media (width<=768px){.ratios-grid[data-v-8dfcbe0c]{grid-template-columns:1fr}}.figma-type-cleaner[data-v-76904e69]{flex-direction:column;gap:2.5rem;display:flex}.textarea-group[data-v-76904e69]{flex-direction:column;gap:.5rem;display:flex}.css-textarea[data-v-76904e69]{border:2px solid var(--color-hairline);width:100%;min-height:200px;font-family:var(--font-mono,"IBM Plex Mono", "Monaco", "Menlo", "Ubuntu Mono", monospace);resize:vertical;transition:border-color var(--ease-standard), box-shadow var(--ease-standard);border-radius:8px;padding:1rem;font-size:.9rem;line-height:1.5}.css-textarea[data-v-76904e69]:focus{border-color:var(--color-accent);outline:none;box-shadow:0 0 0 3px #f77f001a}.css-textarea[data-v-76904e69]::placeholder{color:var(--color-text-light);opacity:1}.changes-summary[data-v-76904e69]{background:var(--color-background);border:1px solid var(--color-hairline);border-radius:8px;margin-top:1rem;padding:1.5rem}.changes-list[data-v-76904e69]{margin:.5rem 0 0;padding-left:1.5rem}.change-item[data-v-76904e69]{color:var(--color-text);margin-bottom:.25rem;font-size:.9rem}@media (width<=768px){.css-textarea[data-v-76904e69]{min-height:150px;font-size:.9rem}}.webp-converter[data-v-a5812a5e]{flex-direction:column;gap:2rem;display:flex}.drop-zone[data-v-a5812a5e]{border:2px dashed var(--color-hairline);text-align:center;cursor:pointer;transition:border-color var(--ease-standard), background-color var(--ease-standard), box-shadow var(--ease-standard);background:var(--color-inset-paper);border-radius:12px;padding:3rem 2rem;position:relative}.drop-zone[data-v-a5812a5e]:hover{border-color:var(--color-accent);background:var(--color-white)}.drop-zone[data-v-a5812a5e]:focus-within:not(.drop-zone--has-image){border-color:var(--color-safety-orange);box-shadow:0 0 0 3px #f77f001a}.drop-zone--active[data-v-a5812a5e]{border-color:var(--color-accent);background:var(--color-accent-light)}.drop-zone--has-image[data-v-a5812a5e]{background:0 0;border:none;padding:0}.file-input[data-v-a5812a5e]{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.drop-zone--has-image .file-input[data-v-a5812a5e]{display:none}.drop-zone__content[data-v-a5812a5e]{flex-direction:column;align-items:center;gap:1rem;display:flex}.upload-icon[data-v-a5812a5e]{width:64px;height:64px;color:var(--color-accent)}.drop-zone__text[data-v-a5812a5e]{color:var(--color-text);margin:0;font-size:1.25rem;font-weight:600;line-height:1.3}.drop-zone__hint[data-v-a5812a5e]{color:var(--color-text-light);margin:0;font-size:.9rem}.image-preview[data-v-a5812a5e]{border-radius:12px;max-width:100%;position:relative;overflow:hidden}.image-preview img[data-v-a5812a5e]{object-fit:contain;width:100%;height:auto;max-height:400px;display:block}.clear-button[data-v-a5812a5e]{background:var(--color-secondary);width:40px;height:40px;color:var(--color-white);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.5rem;line-height:1;transition:all .3s;display:flex;position:absolute;top:1rem;right:1rem}.clear-button[data-v-a5812a5e]:hover{background:var(--color-primary)}.settings-section[data-v-a5812a5e]{margin-top:1rem}.input-group[data-v-a5812a5e]{flex-direction:column;gap:.5rem;display:flex}.slider[data-v-a5812a5e]{background:var(--color-hairline);appearance:none;width:100%;height:8px;accent-color:var(--color-safety-orange);border-radius:4px;outline:none}.slider[data-v-a5812a5e]::-webkit-slider-thumb{appearance:none;background:var(--color-accent);cursor:pointer;border-radius:50%;width:20px;height:20px;transition:all .3s}.slider[data-v-a5812a5e]::-webkit-slider-thumb:hover{background:var(--color-secondary);transform:scale(1.2)}.slider[data-v-a5812a5e]::-moz-range-thumb{background:var(--color-accent);cursor:pointer;border:none;border-radius:50%;width:20px;height:20px;transition:all .3s}.slider[data-v-a5812a5e]::-moz-range-thumb:hover{background:var(--color-secondary);transform:scale(1.2)}.slider-labels[data-v-a5812a5e]{color:var(--color-text-light);justify-content:space-between;margin-top:.25rem;font-size:.9rem;display:flex}.loading-section[data-v-a5812a5e]{flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:3rem;display:flex}.loading-spinner[data-v-a5812a5e]{border:4px solid var(--color-hairline);border-top-color:var(--color-accent);border-radius:50%;width:48px;height:48px;animation:1s linear infinite spin-a5812a5e}@keyframes spin-a5812a5e{to{transform:rotate(360deg)}}.loading-text[data-v-a5812a5e]{color:var(--color-text);margin:0;font-size:1rem;font-weight:500}.loading-hint[data-v-a5812a5e]{color:var(--color-text-light);margin:.5rem 0 0;font-size:.9rem;font-weight:500}.formats-grid[data-v-a5812a5e]{grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem;display:grid}.format-card[data-v-a5812a5e]{background:var(--color-inset-paper);text-align:center;border:2px solid var(--color-hairline);transition:border-color var(--ease-standard), background-color var(--ease-standard), box-shadow var(--ease-standard), transform var(--ease-standard);border-radius:12px;flex-direction:column;gap:.75rem;padding:1.5rem;display:flex}.format-card[data-v-a5812a5e]:hover{border-color:var(--color-accent);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.format-card--best[data-v-a5812a5e]{background:var(--color-flag-gold);border-color:var(--color-safety-orange);color:var(--color-primary)}.format-card--best .format-card__label[data-v-a5812a5e]{color:var(--color-primary);font-weight:600}.format-card__header[data-v-a5812a5e]{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.format-card__label[data-v-a5812a5e]{color:var(--color-primary);font-size:1.25rem;font-weight:600;line-height:1.3}.format-card__format[data-v-a5812a5e]{color:var(--color-text-light);text-transform:uppercase;background:#0000000d;border-radius:4px;padding:.25rem .5rem;font-size:.75rem;font-weight:600}.format-card--best .format-card__format[data-v-a5812a5e]{color:var(--color-primary);background:#0000001a}.format-card__size[data-v-a5812a5e]{color:var(--color-primary);margin:.5rem 0;font-size:1.5rem;font-weight:700}.format-card--best .format-card__size[data-v-a5812a5e]{color:var(--color-primary)}.format-card__savings[data-v-a5812a5e]{margin-bottom:.5rem;font-size:.9rem;font-weight:500}.savings-positive[data-v-a5812a5e]{color:var(--color-chart-navy)}.savings-negative[data-v-a5812a5e]{color:var(--color-signal-red)}.format-card__download[data-v-a5812a5e]{background:var(--color-primary);width:100%;color:var(--color-white);cursor:pointer;transition:background-color var(--ease-standard);border:none;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;margin-top:auto;padding:.75rem 1rem;font-family:inherit;font-size:1rem;font-weight:600;display:flex}.format-card__download[data-v-a5812a5e]:hover:not(:disabled){background:var(--color-secondary)}.format-card__download[data-v-a5812a5e]:disabled{background:var(--color-hairline);color:var(--color-quiet-ink);cursor:not-allowed}.format-card--best .format-card__download[data-v-a5812a5e]{background:var(--color-primary);color:var(--color-white)}.format-card--best .format-card__download[data-v-a5812a5e]:hover:not(:disabled){background:var(--color-secondary)}.download-icon[data-v-a5812a5e]{width:18px;height:18px}.reset-button[data-v-a5812a5e]{width:100%;color:var(--color-primary);border:2px solid var(--color-primary);cursor:pointer;background:0 0;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .3s}.reset-button[data-v-a5812a5e]:hover{background:var(--color-primary);color:var(--color-white)}.reset-button[data-v-a5812a5e]:focus-visible{outline-offset:2px}.error-message[data-v-a5812a5e]{color:#721c24;background:#f8d7da;border:1px solid #f5c6cb;border-radius:8px;padding:1rem}@media (width<=1024px){.formats-grid[data-v-a5812a5e]{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.formats-grid[data-v-a5812a5e]{grid-template-columns:1fr;gap:1rem}.drop-zone[data-v-a5812a5e]{padding:2rem 1rem}.upload-icon[data-v-a5812a5e]{width:48px;height:48px}}.text-compare[data-v-024a5918]{flex-direction:column;gap:2rem;display:flex}.compare-grid[data-v-024a5918]{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}.textarea-group[data-v-024a5918]{flex-direction:column;gap:.5rem;display:flex}.textarea-header[data-v-024a5918]{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.clear-button[data-v-024a5918]{color:var(--color-text-light);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:.25rem .5rem;font-size:.9rem;transition:color .2s,background-color .2s}.clear-button[data-v-024a5918]:hover{color:var(--color-secondary);background:#d6282814}.clear-button[data-v-024a5918]:focus-visible{outline-offset:2px}.compare-textarea[data-v-024a5918]{border:2px solid var(--color-hairline);width:100%;min-height:200px;font-family:var(--font-mono,"IBM Plex Mono", "Monaco", "Menlo", "Ubuntu Mono", monospace);resize:vertical;transition:border-color var(--ease-standard), box-shadow var(--ease-standard);border-radius:8px;padding:1rem;font-size:.9rem;line-height:1.5}.compare-textarea[data-v-024a5918]:focus{border-color:var(--color-accent);outline:none;box-shadow:0 0 0 3px #f77f001a}.compare-textarea[data-v-024a5918]::placeholder{color:var(--color-text-light);opacity:1}.diff-section[data-v-024a5918]{flex-direction:column;gap:.75rem;display:flex}.diff-placeholder[data-v-024a5918],.diff-summary--neutral[data-v-024a5918]{color:var(--color-text-light);margin:0;font-size:1rem}.diff-summary[data-v-024a5918]{color:var(--color-text);margin:0;font-size:1rem;font-weight:500}.diff-panel[data-v-024a5918]{border:1px solid var(--color-hairline);max-height:480px;font-family:var(--font-mono,"IBM Plex Mono", "Monaco", "Menlo", "Ubuntu Mono", monospace);border-radius:8px;font-size:.9rem;line-height:1.5;overflow:auto}.diff-chunk[data-v-024a5918]{background:var(--color-inset-paper);border-bottom:1px solid var(--color-hairline);align-items:flex-start;padding:0 .5rem;display:flex}.diff-chunk[data-v-024a5918]:last-child{border-bottom:none}.diff-chunk--removed[data-v-024a5918]{background:#f8d7da}.diff-chunk--added[data-v-024a5918]{background:var(--color-chart-paper)}.diff-prefix[data-v-024a5918]{width:1.25rem;color:var(--color-text-light);-webkit-user-select:none;user-select:none;flex-shrink:0;padding:.125rem 0}.diff-chunk--removed .diff-prefix[data-v-024a5918]{color:var(--color-secondary);font-weight:600}.diff-chunk--added .diff-prefix[data-v-024a5918]{color:var(--color-chart-navy);font-weight:600}.diff-content[data-v-024a5918]{white-space:pre-wrap;word-break:break-word;flex:1;margin:0;padding:.125rem 0}@media (width<=768px){.compare-grid[data-v-024a5918]{grid-template-columns:1fr}.compare-textarea[data-v-024a5918]{min-height:150px;font-size:.9rem}.diff-panel[data-v-024a5918]{max-height:360px;font-size:.9rem}}.links-container[data-v-acac852c]{margin-top:2rem}.links-grid[data-v-acac852c]{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;display:grid}.link-card[data-v-acac852c]{background:var(--color-inset-paper);border:2px solid var(--color-hairline);color:inherit;transition:border-color var(--ease-standard), background-color var(--ease-standard), box-shadow var(--ease-standard), transform var(--ease-standard);cursor:pointer;border-radius:12px;flex-direction:column;padding:1.5rem;text-decoration:none;display:flex}.link-card[data-v-acac852c]:hover{border-color:var(--color-accent);background:var(--color-white);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.link-card[data-v-acac852c]:focus-visible{outline-offset:2px;border-color:var(--color-safety-orange)}.link-card__header[data-v-acac852c]{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.75rem;display:flex}.link-card__title[data-v-acac852c]{color:var(--color-primary);flex:1;margin:0;font-size:1.25rem;font-weight:600;line-height:1.3}.link-card__icon[data-v-acac852c]{width:20px;height:20px;color:var(--color-text-light);flex-shrink:0;transition:all .3s}.link-card:hover .link-card__icon[data-v-acac852c]{color:var(--color-accent);transform:translate(2px,-2px)}.link-card__description[data-v-acac852c]{color:var(--color-text);flex:1;margin:0 0 1rem;font-size:1rem;line-height:1.6}.link-card__footer[data-v-acac852c]{border-top:1px solid var(--color-hairline);justify-content:space-between;align-items:center;margin-top:auto;padding-top:1rem;display:flex}.link-card__url[data-v-acac852c]{color:var(--color-text-light);font-size:.9rem;font-family:var(--font-mono,"IBM Plex Mono", "Monaco", "Menlo", "Ubuntu Mono", monospace)}.link-card__category[data-v-acac852c]{color:var(--color-accent);background:var(--color-accent-light);text-transform:uppercase;letter-spacing:.04em;border-radius:4px;padding:.25rem .5rem;font-size:.75rem;font-weight:500}@media (width<=768px){.links-grid[data-v-acac852c]{grid-template-columns:1fr;gap:1rem}.link-card[data-v-acac852c]{padding:1.25rem}}:root{--color-chart-navy:#003049;--color-signal-red:#d62828;--color-safety-orange:#f77f00;--color-flag-gold:#fcbf49;--color-chart-paper:#f8e7c1;--color-white:#fff;--color-ink:#2c3e50;--color-quiet-ink:#6c757d;--color-hairline:#e1e5e9;--color-inset-paper:#f8f9fa;--color-code-slate:#2d3748;--color-primary:var(--color-chart-navy);--color-secondary:var(--color-signal-red);--color-accent:var(--color-safety-orange);--color-accent-light:var(--color-flag-gold);--color-background:var(--color-chart-paper);--color-text:var(--color-ink);--color-text-light:var(--color-quiet-ink);--handle-width:13.5rem;--ease-standard:.2s ease-out;--font-sans:"IBM Plex Sans", "IBM Plex Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"IBM Plex Mono", "IBM Plex Mono Fallback", Monaco, Menlo, Ubuntu Mono, monospace}@font-face{font-family:IBM Plex Sans Fallback;src:local(Arial);size-adjust:105.4%;ascent-override:97%;descent-override:26%;line-gap-override:0%}@font-face{font-family:IBM Plex Mono Fallback;src:local(Courier New);size-adjust:99.2%;ascent-override:102%;descent-override:32%;line-gap-override:0%}*{box-sizing:border-box}html{scrollbar-color:var(--color-chart-navy) var(--color-chart-paper)}body{font-family:var(--font-sans);background-color:var(--color-chart-paper);color:var(--color-ink);caret-color:var(--color-safety-orange);margin:0;line-height:1.6}::selection{background:var(--color-safety-orange);color:var(--color-chart-navy)}:focus-visible{outline:2px solid var(--color-safety-orange);outline-offset:2px}a{text-underline-offset:.2em}.skip-link{z-index:2000;background:var(--color-chart-navy);color:var(--color-white);padding:.5rem 1rem;font-weight:600;text-decoration:none;position:absolute;inset-block-start:-4rem;inset-inline-start:1rem}.skip-link:focus{inset-block-start:1rem}.bench{min-height:100vh;display:flex;position:relative}.handle-stub{z-index:1001;background:var(--color-chart-navy);width:2.75rem;color:var(--color-flag-gold);letter-spacing:.12em;cursor:pointer;transition:background-color var(--ease-standard);border:none;border-radius:0;padding:0;font-family:inherit;font-size:.9rem;font-weight:600;display:none;position:fixed;inset-block:0;inset-inline-start:0}.handle-stub:hover,.handle-stub:focus-visible{background:var(--color-signal-red);color:var(--color-white)}.handle-stub--tucked{visibility:hidden}.handle-stub__label{writing-mode:vertical-rl;padding-block:1.5rem;display:block;transform:rotate(180deg)}.handle{width:var(--handle-width);background:var(--color-chart-navy);color:var(--color-white);z-index:1000;border-radius:0;height:100vh;padding:1.5rem 0 2rem;position:fixed;inset-block-start:0;inset-inline-start:0;overflow-y:auto}.handle__wordmark{letter-spacing:.01em;color:var(--color-flag-gold);text-wrap:balance;margin:0 1rem 1.5rem;padding:0 .25rem;font-size:1.5rem;font-weight:600;line-height:1.35}.handle__nav{padding:0}.implements{margin:0;padding:0;list-style:none}.implements li+li{margin-block-start:.15rem}.implement{width:100%;min-height:44px;color:var(--color-white);text-align:left;cursor:pointer;letter-spacing:.01em;transition:background-color var(--ease-standard), color var(--ease-standard);background:0 0;border:none;padding:.65rem 1rem .65rem 1.15rem;font-family:inherit;font-size:1rem;font-weight:500;line-height:1.4;position:relative}.implement:hover{background:#ffffff1a}.implement:focus-visible{outline-offset:-4px}.implement--open{background:var(--color-signal-red);color:var(--color-white);font-weight:600}.implement--open:before{content:"";background:var(--color-safety-orange);width:4px;box-shadow:4px 0 0 var(--color-chart-navy);position:absolute;inset-block:0;inset-inline-start:0}.stage{flex:1;min-width:0;margin-inline-start:var(--handle-width);padding:1.5rem 1.5rem 1.5rem 0}.stage--wide .sheet{max-width:1100px}.sheet{background:var(--color-white);max-width:800px;min-height:calc(100vh - 3rem);color:var(--color-ink);animation:unfold var(--ease-standard);transform-origin:0;border-radius:0 12px 12px 0;box-shadow:0 4px 6px #0000001a}@keyframes unfold{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@media (prefers-reduced-motion:reduce){.sheet{animation:none}.implement,.handle-stub,.handle{transition:none}}.overlay{z-index:999;background:#0030498c;display:none;position:fixed;inset:0}@media (width<=768px){.handle-stub{display:flex}.handle{transition:transform var(--ease-standard);transform:translate(-100%)}.handle--open{transform:translate(0)}.stage{margin-inline-start:0;padding:1.5rem 1rem 1.5rem 3.5rem}.sheet{border-radius:0 12px 12px 0;max-width:none;min-height:calc(100vh - 3rem)}.overlay{display:block}}@media (width<=1024px) and (width>=769px){.stage{padding:1.5rem 1.25rem 1.5rem 0}}.tool{box-shadow:none;background:0 0;border-radius:0;padding:2rem}.tool__header{margin-bottom:2rem}.tool__title{color:var(--color-chart-navy);text-wrap:balance;overflow-wrap:break-word;margin:0 0 .5rem;font-size:2rem;font-weight:600;line-height:1.2}.tool__description{color:var(--color-quiet-ink);max-width:65ch;margin:0;font-size:1rem}.section-title{color:var(--color-chart-navy);text-wrap:balance;margin:1.5rem 0 1rem;font-size:1.25rem;font-weight:600;line-height:1.3}.input-group{flex-direction:column;gap:.5rem;display:flex}.input-label{color:var(--color-ink);font-size:.9rem;font-weight:500;line-height:1.4}.input-with-unit{justify-content:flex-start;align-items:center;display:inline-flex;position:relative}.input{border:2px solid var(--color-hairline);color:var(--color-ink);background:var(--color-white);border-radius:8px;padding:.75rem;font-family:inherit;font-size:1rem;transition:border-color .3s,box-shadow .3s}.input--with-unit{padding-right:3rem}.input--small{width:80px}.input--medium{width:150px}.input--large{width:200px}.input--full{width:100%}.input:hover:not(:focus){border-color:var(--color-flag-gold)}.input:focus{border-color:var(--color-safety-orange);outline:none;box-shadow:0 0 0 3px #f77f001a}.input::placeholder,textarea::placeholder{color:var(--color-quiet-ink);opacity:1}.unit{color:var(--color-quiet-ink);pointer-events:none;margin-inline-start:.75em;font-weight:500}.preview-box{background:var(--color-inset-paper);border:1px solid var(--color-hairline);border-radius:8px;margin:1em 0;padding:1.5rem}.preview-box__title{color:var(--color-chart-navy);margin:0 0 1em;font-size:1.25rem;font-weight:600;line-height:1.3}.code-preview{background:var(--color-code-slate);color:#e2e8f0;font-family:var(--font-mono);letter-spacing:.01em;border-radius:6px;margin-bottom:1rem;padding:1rem;font-size:.9rem;line-height:1.55;overflow-x:auto}.calculation-display{background:var(--color-chart-paper);border-radius:8px;padding:1rem}.calculation__formula{font-family:var(--font-mono);color:var(--color-chart-navy);font-size:1rem;font-weight:600}.copy-button{background:var(--color-safety-orange);color:var(--color-white);cursor:pointer;transition:background-color var(--ease-standard);border:none;border-radius:6px;padding:.5rem 1rem;font-family:inherit;font-size:.9rem;font-weight:600}.copy-button:hover{background:var(--color-signal-red)}.copy-button:focus-visible{outline-offset:2px}.inputs-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;display:grid}.results-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;display:grid}.result-card{text-align:center;border-radius:8px;padding:1.5rem}.result-card--primary{background:var(--color-chart-navy);color:var(--color-white)}.result-card--secondary{background:var(--color-signal-red);color:var(--color-white)}.result-card--accent{background:var(--color-safety-orange);color:var(--color-white)}.result-label{letter-spacing:.01em;margin-bottom:.5rem;font-size:.9rem;font-weight:500;line-height:1.45}.result-value{font-variant-numeric:tabular-nums;margin-bottom:.5rem;font-size:2rem;font-weight:700;line-height:1.2}.result-description{letter-spacing:.01em;font-size:.9rem;font-weight:500;line-height:1.45}@media (width<=768px){.tool{padding:1.5rem}.inputs-grid,.results-grid{grid-template-columns:1fr}.input--medium,.input--large{width:100%;max-width:200px}.code-preview{font-size:.9rem}}
