.units-tool-wrapper{display:flex;flex-direction:column;gap:16px;max-width:840px;margin:24px auto;padding:0}@media(min-width:768px){.units-tool-wrapper{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start;margin:32px auto}}.units-left-col,.units-right-col{display:flex;flex-direction:column;gap:16px}.units-input-area{background:var(--swp-surface);border:1px solid var(--swp-border);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:12px}.units-input-label,.units-source-label{font-size:13px;font-weight:700;color:var(--swp-ink-2);display:block;margin-bottom:2px}.units-input-field{font-size:24px;font-weight:700;font-family:var(--font-mono);color:var(--swp-ink);border:2px solid var(--swp-border);border-radius:var(--r-md);padding:8px 12px;width:100%;box-sizing:border-box;background:var(--swp-paper);transition:border-color .15s ease}.units-input-field:focus{outline:none;border-color:var(--color-primary)}.units-input-field::-webkit-outer-spin-button,.units-input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.units-input-field[type=number]{-moz-appearance:textfield;appearance:textfield}.units-source-btns{display:flex;flex-wrap:wrap;gap:8px}.units-source-btn{flex:1 1 calc(33.33% - 6px);min-height:44px;border-radius:var(--r-md);border:2px solid var(--swp-border);background:var(--swp-paper-2);font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--swp-ink-2);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.units-source-btn--selected{background:var(--color-primary);color:var(--color-primary-content);border-color:var(--color-primary)}.units-source-btn:hover:not(.units-source-btn--selected){border-color:var(--color-primary);color:var(--color-primary)}.units-ref-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 16px;background:var(--swp-surface);border:1px solid var(--swp-border);border-radius:var(--r-md);font-family:var(--font-sans);font-size:14px;font-weight:700;color:var(--swp-ink);cursor:pointer;transition:background-color .15s ease;box-sizing:border-box}.units-ref-toggle:hover{background:var(--swp-paper-2)}.units-chevron{font-size:11px;transition:transform .2s ease;line-height:1}.units-chevron--open{transform:rotate(180deg)}.units-ref-content{background:var(--swp-surface);border:1px solid var(--swp-border);border-radius:var(--r-md);padding:12px 16px;display:flex;flex-direction:column;gap:10px}.units-ref-content[hidden]{display:none}.units-ref-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.units-ref-row-label{font-size:13px;color:var(--swp-ink-2);flex:1}.units-ref-input{width:88px;padding:6px 8px;border:1px solid var(--swp-border);border-radius:var(--r-sm);font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--swp-ink);background:var(--swp-paper);text-align:right;transition:border-color .15s ease;box-sizing:border-box}.units-ref-input:focus{outline:none;border-color:var(--color-primary)}.units-ref-input::-webkit-outer-spin-button,.units-ref-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.units-ref-input[type=number]{-moz-appearance:textfield;appearance:textfield}.units-results-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.units-result-row{display:grid;grid-template-columns:48px 1fr auto 44px;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r-md);background:var(--swp-paper-2)}.units-result-row--highlighted{background:var(--swp-teal-50);border:1px solid var(--swp-teal-100)}.units-row-badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--swp-ink-3);background:var(--swp-surface);border:1px solid var(--swp-border);border-radius:var(--r-sm);padding:2px 4px;min-width:36px;text-align:center}.units-result-row--highlighted .units-row-badge{background:var(--swp-teal-100);color:var(--swp-teal-700);border-color:var(--swp-teal-200)}.units-row-value-cell{display:flex;flex-direction:column;gap:2px;min-width:0}.units-row-value{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--swp-ink);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.units-row-em-note{font-size:10px;color:var(--swp-ink-3);margin:0;line-height:1.4}.units-row-formula{font-size:12px;color:var(--swp-ink-3);font-family:var(--font-mono);white-space:nowrap}.units-row-copy{width:44px;height:44px;border-radius:var(--r-sm);background:var(--swp-surface);border:1px solid var(--swp-border);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease,border-color .15s ease;flex-shrink:0}.units-row-copy:hover:not(:disabled){background:var(--swp-paper-2);border-color:var(--swp-ink-3)}.units-row-copy:disabled{opacity:.4;cursor:not-allowed}.units-snippet-panel{display:flex;flex-direction:column;gap:12px}.units-snippet-code{position:relative;background:#1e1e1e;border-radius:var(--r-md);overflow:hidden}.units-snippet-code:before{content:"CSS";position:absolute;top:.4rem;left:.75rem;font-size:.7rem;font-weight:700;color:#5eead4;letter-spacing:.05em;pointer-events:none;z-index:1;font-family:var(--font-mono)}.units-snippet-pre{margin:0;padding:2rem 1.2rem 1.2rem;overflow-x:auto;font-family:var(--font-mono);font-size:13px;line-height:1.8;color:#d4d4d4;background:transparent}.units-snippet-pre code{font-family:inherit;font-size:inherit;color:inherit}.units-snippet-actions{display:flex;gap:8px;flex-wrap:wrap}.units-snippet-copy,.units-snippet-reset{min-height:44px;padding:8px 20px;border-radius:var(--r-pill);font-family:var(--font-sans);font-size:14px;font-weight:700;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;display:flex;align-items:center;gap:6px}.units-snippet-copy{background:var(--color-primary);color:var(--color-primary-content);border:none}.units-snippet-copy:hover{opacity:.9}.units-snippet-copy--done{background:var(--color-success);color:#fff}.units-snippet-reset{background:transparent;color:var(--swp-ink-2);border:1px solid var(--swp-border)}.units-snippet-reset:hover{background:var(--swp-paper-2);border-color:var(--swp-ink-3)}.units-page-header{padding:24px 16px 0;max-width:840px;margin:0 auto}@media(min-width:768px){.units-page-header{padding:32px 24px 0}}.units-page-subtitle{font-size:14px;color:var(--swp-ink-2);margin-top:8px;margin-bottom:0}.units-how-to{max-width:840px;margin:0 auto;padding:0 16px}@media(min-width:768px){.units-how-to{padding:0 24px}}.units-steps{counter-reset:units-step;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}.units-steps li{counter-increment:units-step;display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--swp-ink);line-height:1.7}.units-steps li:before{content:counter(units-step);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--color-primary);color:var(--color-primary-content);font-size:13px;font-weight:800;margin-top:2px}.units-section{max-width:840px;margin:0 auto;padding:0 16px}@media(min-width:768px){.units-section{padding:0 24px}}.units-section-title{font-size:20px;font-weight:800;color:var(--swp-ink);border-left:4px solid var(--color-primary);padding-left:12px;margin-bottom:16px;margin-top:0}.units-lesson-list,.units-related-list{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}.units-lesson-link,.units-related-link{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--swp-surface);border:1px solid var(--swp-border);border-radius:var(--r-md);color:var(--color-primary);text-decoration:none;font-size:15px;font-weight:700;transition:background-color .15s ease,border-color .15s ease}.units-lesson-link:hover,.units-related-link:hover{background:var(--swp-paper-2);border-color:var(--color-primary)}.units-link-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--swp-teal-50);color:var(--color-primary);border-radius:var(--r-sm);padding:2px 8px;flex-shrink:0}.units-related-tools{display:flex;flex-direction:column;gap:12px}@media(max-width:479px){.units-result-row{grid-template-columns:48px 1fr 44px}.units-row-formula{grid-column:2;grid-row:2;display:block;white-space:normal}.units-row-copy{grid-column:3;grid-row:1}.units-source-btn{flex:1 1 calc(33.33% - 6px)}}@media(prefers-reduced-motion:reduce){.units-chevron,.units-chevron--open,.units-input-field,.units-ref-input,.units-source-btn,.units-ref-toggle,.units-row-copy,.units-snippet-copy,.units-snippet-reset{transition:none}}