*,*::before,*::after{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;color:var(--fg);background:var(--bg)} :root{ /* LIGHT as default (system) */ --bg:#f7f8fb; --panel:#ffffff; --muted:#5a6276; --fg:#0b0c10; --brand:#6b4eff; --border:#e7e9f0; --input:#ffffff; } @media (prefers-color-scheme: dark){ :root{ --bg:#0b0c10; --panel:#12141a; --muted:#5a6276; --fg:#e9edf5; --brand:#7c5cff; --border:#202534; --input:#0f1117; } } /* Explicit overrides via body class */ .light{ --bg:#f7f8fb; --panel:#ffffff; --muted:#5a6276; --fg:#0b0c10; --brand:#6b4eff; --border:#e7e9f0; --input:#ffffff; } .dark { --bg:#0b0c10; --panel:#12141a; --muted:#5a6276; --fg:#e9edf5; --brand:#7c5cff; --border:#202534; --input:#0f1117; } /* Show the right logo for system preference */ .light-only { display:inline; } .dark-only { display:none; } @media (prefers-color-scheme: dark){ .light-only { display:none; } .dark-only { display:inline; } } /* Override with your explicit theme classes */ body.light .light-only { display:inline; } body.light .dark-only { display:none; } body.dark .light-only { display:none; } body.dark .dark-only { display:inline; } /* also honor the class on for first-paint */ html.light .light-only { display:inline; } html.light .dark-only { display:none; } html.dark .light-only { display:none; } html.dark .dark-only { display:inline; } a{color:var(--brand);text-decoration:none} .container{max-width:1100px;margin:0 auto;padding:24px} .grid{display:grid;gap:20px} @media(min-width:1024px){.grid-cols-2{grid-template-columns:1fr 1fr}} .card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 6px 24px rgba(0,0,0,.06)} .row{display:flex;gap:12px;align-items:flex-end} .row-wrap{display:flex;gap:12px;flex-wrap:wrap} .field{display:flex;flex-direction:column;gap:8px} .field.sm{width:220px} label{font-weight:600;margin-bottom:6px;display:block} input,select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--input);color:var(--fg)} input[type="checkbox"]{width:auto} input:focus, select:focus{outline:none;box-shadow:0 0 0 3px rgba(124,92,255,.35);border-color:rgba(124,92,255,.55)} select option{background:var(--panel);color:var(--fg)} .btn{background:var(--brand);border:none;color:white;padding:10px 14px;border-radius:12px;font-weight:600;cursor:pointer} .muted{color:var(--muted);font-size:14px} h1{font-size:28px;margin:0 0 6px} h2{font-size:18px;margin:0 0 10px} table{width:100%;border-collapse:collapse} th,td{padding:10px;border-bottom:1px solid var(--border)} th{text-align:left;color:var(--muted);font-weight:600} .pill{padding:4px 8px;border-radius:8px;background:rgba(124,92,255,.15);color:#cbbcff;font-size:12px;border:1px solid rgba(124,92,255,.25)} /* Toggle switches */ .switch{position:relative;display:inline-block;width:44px;height:26px} .switch input{position:absolute;opacity:0;width:0;height:0} .switch .slider{position:absolute;inset:0;cursor:pointer;background:#2a2f3a;border:1px solid var(--border);border-radius:999px;transition:background .2s,border-color .2s} .switch .slider::before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s} .switch input:checked + .slider{background:var(--brand);border-color:transparent} .switch input:checked + .slider::before{transform:translateX(18px)} .switch input:focus-visible + .slider{box-shadow:0 0 0 3px rgba(124,92,255,.35)} .light .switch .slider{background:#e7e9f0;border-color:#cfd3df} /* Segmented control */ .seg{display:inline-grid;grid-auto-flow:column;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--panel)} .seg input[type="radio"]{position:absolute;opacity:0;pointer-events:none} .seg label{padding:8px 12px;cursor:pointer;user-select:none;color:var(--fg);border-right:1px solid var(--border)} .seg label:last-of-type{border-right:0} .seg input:checked + label{background:var(--input);box-shadow:inset 0 0 0 2px rgba(124,92,255,.35)} .seg input:focus-visible + label{outline:3px solid rgba(124,92,255,.35);outline-offset:2px} .help { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; } .help > summary { cursor: pointer; font-weight: 600; } body { transition: background-color .2s ease, color .2s ease; } /* --- Period toggle --- */ .period-toggle { display: inline-flex; border: 1px solid var(--border, #e5e9f0); border-radius: 9999px; padding: 2px; gap: 2px; background: var(--panel, #fff); } .period-tab { appearance: none; border: 0; background: transparent; padding: .4rem .75rem; border-radius: 9999px; font: inherit; line-height: 1; cursor: pointer; color: var(--muted, #5a6276); } .period-tab.is-active { background: var(--fg, #0b0c10); color: var(--bg, #fff); } .period-tab:focus-visible { outline: 2px solid var(--brand,#6b4eff); outline-offset: 2px; } /* --- Header/logo sizing (override) --- */ header .row { align-items: center; /* was flex-end; center looks cleaner with a taller logo */ gap: 16px; /* a touch more breathing room */ } /* Two-line SVG wordmark */ .logo { display: block; height: 56px; /* bump size here */ width: auto; /* keep aspect ratio */ } /* Scale up a bit on wider screens */ @media (min-width: 768px) { .logo { height: 64px; } } /* If very small screens feel cramped */ @media (max-width: 360px) { .logo { height: 42px; } } .link-list { margin: 8px 0 0; padding-left: 18px; } .link-list a { text-decoration: underline; } .link-list a:hover { opacity: .9; } footer .legal { font-size: 12px; line-height: 1.5; opacity: .9; }