*{box-sizing:border-box}body{background:var(--wasd-color-surface-canvas);color:var(--wasd-color-text-default);font-family:var(--wasd-typography-family-sans);margin:0}button,input,select,textarea{font:inherit}.unit-converter{--unit-converter-accent:#0f766e;--unit-converter-accent-2:#2563eb;--unit-converter-accent-3:#b45309;background:var(--wasd-color-surface-raised);border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-md);box-shadow:var(--wasd-shadow-sm);color:var(--wasd-color-text-default);inline-size:100%;padding:var(--wasd-spacing-4)}.unit-converter__header h2,.unit-converter__header p,.unit-converter__panel h3,.unit-converter__popular h3,.unit-converter__table h3,.unit-converter__status{margin:0}.unit-converter__nav-grid,.unit-converter__popular-grid{gap:var(--wasd-spacing-2);display:grid}.unit-converter__nav-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.unit-converter__nav-link{inline-size:100%}.unit-converter__nav-link--active{font-weight:var(--wasd-typography-weight-semibold)}.unit-converter__panel,.unit-converter__popular-button,.unit-converter__table-wrap{background:var(--wasd-color-surface-canvas);border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-sm)}.unit-converter__workspace{gap:var(--wasd-spacing-4);grid-template-columns:minmax(18rem,.92fr) minmax(22rem,1.08fr);display:grid}.unit-converter__panel{min-inline-size:0;padding:var(--wasd-spacing-4)}.unit-converter__field,.unit-converter__compact-field{gap:var(--wasd-spacing-2);display:grid}.unit-converter__compact-field{min-inline-size:min(100%,14rem)}.unit-converter__field>span,.unit-converter__compact-field>span{color:var(--wasd-color-text-muted);font-size:var(--wasd-typography-text-style-label-sm-font-size);font-weight:var(--wasd-typography-weight-medium)}.unit-converter__unit-grid{gap:var(--wasd-spacing-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.unit-converter__result{background:linear-gradient(135deg, color-mix(in srgb, var(--wasd-color-surface-raised) 82%, var(--unit-converter-accent) 18%), var(--wasd-color-surface-raised)), var(--wasd-color-surface-raised);border:var(--wasd-border-width-thin) solid color-mix(in srgb, var(--wasd-color-border-subtle) 64%, var(--unit-converter-accent) 36%);border-radius:var(--wasd-radius-sm);color:var(--wasd-color-text-default);font-family:var(--wasd-typography-text-style-code-lg-font-family,var(--wasd-typography-family-mono));font-size:clamp(2rem,7vw,3.4rem);font-weight:var(--wasd-typography-weight-semibold);overflow-wrap:anywhere;min-block-size:5.25rem;padding:var(--wasd-spacing-4);line-height:1.05;display:block}.unit-converter__result--error{background:var(--wasd-color-surface-raised);border-color:color-mix(in srgb, var(--wasd-color-border-subtle) 58%, #be123c 42%);color:var(--wasd-color-text-danger);font-family:var(--wasd-typography-family-sans);font-size:clamp(1rem,4vw,1.35rem);line-height:1.35}.unit-converter__details{gap:var(--wasd-spacing-2);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;display:grid}.unit-converter__detail{background:var(--wasd-color-surface-raised);border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-sm);min-inline-size:0;padding:var(--wasd-spacing-3)}.unit-converter__detail dt{color:var(--wasd-color-text-muted);font-size:var(--wasd-typography-text-style-label-sm-font-size)}.unit-converter__detail dd{font-weight:var(--wasd-typography-weight-semibold);margin:var(--wasd-spacing-1) 0 0;overflow-wrap:anywhere}.unit-converter__status--error{color:var(--wasd-color-text-danger)}.unit-converter__popular-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.unit-converter__popular-button{color:var(--wasd-color-text-default);cursor:pointer;gap:var(--wasd-spacing-1);min-block-size:6rem;padding:var(--wasd-spacing-3);text-align:start;display:grid}.unit-converter__popular-button:hover{border-color:color-mix(in srgb, var(--wasd-color-border-default) 70%, var(--unit-converter-accent-2) 30%)}.unit-converter__popular-button:focus-visible{outline:3px solid color-mix(in srgb, var(--unit-converter-accent-2) 45%, transparent);outline-offset:2px}.unit-converter__popular-button strong{color:var(--wasd-color-text-default);font-size:var(--wasd-typography-size-body-md)}.unit-converter__popular-button span{color:var(--wasd-color-text-muted);font-size:var(--wasd-typography-size-body-sm);line-height:1.35}.unit-converter__table-wrap{overflow-x:auto}.unit-converter__values-table{border-collapse:collapse;inline-size:100%;min-inline-size:26rem}.unit-converter__values-table th,.unit-converter__values-table td{border-block-end:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);padding:var(--wasd-spacing-3);text-align:start}.unit-converter__values-table th{color:var(--wasd-color-text-muted);font-size:var(--wasd-typography-text-style-label-sm-font-size);font-weight:var(--wasd-typography-weight-semibold)}.unit-converter__values-table td{font-family:var(--wasd-typography-text-style-code-md-font-family,var(--wasd-typography-family-mono))}.unit-converter__values-table tr:last-child td{border-block-end:0}.unit-converter[data-teaser=true]{block-size:100%;overflow:hidden}.unit-converter[data-teaser=true]>.wasd-stack{gap:16px;block-size:100%;overflow:hidden}.unit-converter[data-teaser=true] .unit-converter__nav,.unit-converter[data-teaser=true] .unit-converter__table,.unit-converter[data-teaser=true] .unit-converter__status{display:none}.unit-converter[data-teaser=true] .unit-converter__workspace{grid-template-columns:minmax(24rem,.9fr) minmax(30rem,1.1fr)}.unit-converter[data-teaser=true] .unit-converter__popular-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.unit-converter[data-teaser=true] .unit-converter__popular-button{min-block-size:5rem}@media (width<=64rem){.unit-converter__nav-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.unit-converter__workspace,.unit-converter__details{grid-template-columns:1fr}}@media (width<=42rem){.unit-converter{box-shadow:none;padding:var(--wasd-spacing-3);border-inline:0;border-radius:0}.unit-converter__nav-grid,.unit-converter__popular-grid,.unit-converter__unit-grid{grid-template-columns:1fr}.unit-converter__result{font-size:clamp(1.7rem,10vw,2.35rem)}}