:root{font-family:Inter,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;font-weight:400;color:#0f172a;background-color:#f9f9f9;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:only light;--accent: #0000ff;--surface: #ffffff;--border-subtle: #d7dbef;--text-muted: #475569}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh}#root{min-height:100vh}a{color:var(--accent);font-weight:500;text-decoration:none}a:hover{text-decoration:underline}button{font:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app{max-width:1320px;margin:0 auto;padding:2rem 1.5rem 3rem;display:flex;flex-direction:column;gap:1.75rem}.app__header{display:flex;flex-direction:column;gap:.5rem;color:#0b1324}.app__header h1{margin:0;font-size:2.2rem;letter-spacing:-.01em}.app__tagline{margin:0;color:var(--text-muted);max-width:55ch;font-size:.95rem}.controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}.unit-toggle button:focus-visible,.pace-button:focus-visible,.toggle-button:focus-visible{outline:3px solid rgba(0,0,255,.45);outline-offset:2px}.unit-toggle{display:inline-flex;border:1px solid var(--border-subtle);border-radius:2px;background:var(--surface);padding:.2rem;gap:.2rem}.unit-toggle button{border:none;padding:.35rem .85rem;background:transparent;color:#1e293b;cursor:pointer;transition:background-color .2s ease,color .2s ease;border-radius:2px}.unit-toggle button[data-active=true]{background:var(--accent);color:#fff;font-weight:600}.table-card{background:var(--surface);border-radius:2px;padding:1.1rem;border:1px solid var(--border-subtle);box-shadow:0 18px 40px -32px #000b6d4d}.table-scroll{overflow-x:auto;position:relative}table{width:100%;border-collapse:collapse;min-width:640px;font-size:.95rem}thead{z-index:4}thead th{min-width:71px;background:var(--surface);z-index:2;text-align:left;padding:.65rem .75rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:#1f2937;border-bottom:1px solid var(--border-subtle)}thead th:first-child,tbody th{position:sticky;left:0;z-index:3;background:var(--surface);box-shadow:12px 0 12px -14px #0f172a66}thead th[data-distance-kind=anchor]{font-weight:700;color:#0b1324}thead th[data-distance-kind=increment]{font-weight:600;color:var(--text-muted)}tbody th{font-weight:600;padding:0;border-bottom:1px solid var(--border-subtle)}tbody td{padding:.65rem .75rem;border-bottom:1px solid var(--border-subtle);white-space:nowrap;color:#1f2937}tbody td[data-distance-kind=anchor]{color:#0f172a}tbody td[data-distance-kind=increment]{color:var(--text-muted)}tbody tr[data-selected=true]{background-color:#043eb430}tbody tr[data-selected=true] th{box-shadow:12px 0 12px -14px #00000040}tbody tr:hover[data-kind=base] td,tbody tr:hover[data-kind=base] th{background:#bbd4ff}tbody tr[data-clickable=true]{cursor:pointer}tbody tr[data-clickable=true]:active{transform:translateY(1px)}tbody tr[data-kind=expanded] th{background:#fff;box-shadow:12px 0 12px -18px #0f172a40}tbody tr[data-kind=expanded] td,tbody tr[data-kind=expanded] th{font-size:.85rem;color:var(--text-muted)}tbody tr[data-kind=expanded] td{padding:.4rem .75rem}.pace-button{width:100%;display:flex;align-items:center;gap:.4rem;padding:.65rem .75rem;border:none;background:transparent;cursor:pointer;color:#0f172a;font-weight:600}.pace-button .per-unit,.pace-label .per-unit{font-size:.75rem;color:var(--text-muted)}.pace-button[data-selected=true]{color:#0b1324;background-color:#043eb430}.pace-label{display:flex;align-items:center;gap:.35rem;padding:.65rem .75rem;color:var(--text-muted);font-weight:600;font-size:.9rem}.pace-label span{font-size:.7rem;letter-spacing:.02em}.table-footer{margin-top:.75rem;font-size:.85rem;color:var(--text-muted)}.toggle-button{border:1px solid var(--border-subtle);background:var(--surface);color:#1e293b;padding:.45rem .9rem;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.toggle-button:hover{border-color:#0000ff73;box-shadow:0 0 0 3px #0000ff1a}.toggle-button[data-active=true]{background:#0000ff1a;border-color:#0000ff73;font-weight:600}.floating-header{position:fixed;top:0;z-index:15;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease}.floating-header__inner{background:var(--surface);border:1px solid var(--border-subtle);border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 12px 24px -18px #00000073}.floating-header table{width:100%;border-collapse:collapse}.floating-header th{min-width:71px;padding:.65rem .75rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:#0b1324}.floating-header th[data-distance-kind=increment]{color:var(--text-muted);font-weight:600}.floating-header--visible{opacity:1;visibility:visible}@media(max-width:720px){.app{padding:1.25rem .6rem 2.5rem;gap:1.25rem}.app__header h1{font-size:1.75rem}.app__tagline{font-size:.9rem}.controls{gap:.65rem}.unit-toggle button{padding:.3rem .7rem;font-size:.85rem}.toggle-button{padding:.35rem .7rem;font-size:.85rem}.table-card{padding:.6rem}table{min-width:500px;font-size:.9rem}thead th,.floating-header th{padding:.45rem .55rem;font-size:.75rem;min-width:60px}tbody td{padding:.45rem .55rem}tbody tr[data-kind=expanded] td,tbody tr[data-kind=expanded] th{font-size:.8rem}.pace-button,.pace-label{border-right:1px solid #efefef;padding:.5rem .55rem;gap:.3rem}.pace-label{font-size:.85rem}.pace-label span{font-size:.65rem}.floating-header__inner{border-width:1px}.floating-header tr{display:flex}}
