/* ═══════════════════════════════════════════════════════════ CEDUIX UI v1.1.0 — The LLM-Optimal Component Framework One attribute. Every component. Zero imports. Part of CEDUIX (~/dev/ceduix/) · MIT License ═══════════════════════════════════════════════════════════ USAGE:
...
VOCAB: 74 words · max 4 per ui attribute ═══════════════════════════════════════════════════════════ v1.2: +13 platform-native primitives (dialog, popover, tabs, accordion, switch, progress, skeleton, avatar, breadcrumb, table) v1.1: @layer, OKLCH, color-mix(), light-dark(), @starting-style, @property ═══════════════════════════════════════════════════════════ */ /* ── @property — smooth animated theme transitions ───────── */ @property --bg-base { syntax: ''; inherits: true; initial-value: oklch(0.16 0.030 261); } @property --tx-base { syntax: ''; inherits: true; initial-value: oklch(0.92 0.010 82); } @property --ac-base { syntax: ''; inherits: true; initial-value: oklch(0.73 0.089 81); } @property --ok-base { syntax: ''; inherits: true; initial-value: oklch(0.70 0.134 166); } @property --wr-base { syntax: ''; inherits: true; initial-value: oklch(0.76 0.152 75); } @property --er-base { syntax: ''; inherits: true; initial-value: oklch(0.62 0.205 26); } @property --in-base { syntax: ''; inherits: true; initial-value: oklch(0.65 0.161 257); } /* ── @property --hue — parametric color engine ────────────── Change ONE number → entire accent palette recomputes. Animatable: transition --hue smoothly between brand colors. No framework can do this. OKLCH hue rotation is perceptually uniform. --hue: 70 = gold, 200 = ocean, 340 = rose, 140 = forest, 270 = violet */ @property --hue { syntax: ''; inherits: true; initial-value: 70; } @layer ceduix { /* ── TOKENS ───────────────────────────────────────────────── */ :root { color-scheme: light; /* Spacing */ --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem; --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem; --s-20:5rem; --s-24:6rem; /* Base colors (OKLCH) — cream white, marine blue, gold Fallback: light-mode value for browsers without light-dark() (~13%) */ --bg-base: oklch(0.96 0.010 260); --bg-base: light-dark(oklch(0.96 0.010 260), oklch(0.16 0.030 261)); --tx-base: oklch(0.20 0.015 260); --tx-base: light-dark(oklch(0.20 0.015 260), oklch(0.92 0.010 82)); /* Accent derived from --hue (parametric). Change --hue → new palette. */ --ac-base: oklch(0.50 0.12 var(--hue)); --ac-base: light-dark(oklch(0.50 0.12 var(--hue)), oklch(0.73 0.089 var(--hue))); /* Harmony colors — computed from --hue, no manual palette needed */ --comp: oklch(0.65 0.08 calc(var(--hue) + 180)); --analog1: oklch(0.70 0.07 calc(var(--hue) + 30)); --analog2: oklch(0.70 0.07 calc(var(--hue) - 30)); --ok-base: oklch(0.70 0.134 166); --wr-base: oklch(0.76 0.152 75); --er-base: oklch(0.62 0.205 26); --in-base: oklch(0.65 0.161 257); /* Derived: backgrounds */ --bg-0: var(--bg-base); --bg-1: color-mix(in oklch, var(--bg-base), var(--tx-base) 4%); --bg-2: color-mix(in oklch, var(--bg-base), var(--tx-base) 8%); --bg-3: color-mix(in oklch, var(--bg-base), var(--tx-base) 12%); --bg-4: color-mix(in oklch, var(--bg-base), var(--tx-base) 17%); /* Derived: borders */ --bdr-0: color-mix(in oklch, var(--tx-base) 4%, transparent); --bdr-1: color-mix(in oklch, var(--tx-base) 8%, transparent); --bdr-2: color-mix(in oklch, var(--tx-base) 14%, transparent); --bdr-3: color-mix(in oklch, var(--tx-base) 22%, transparent); /* Derived: text */ --tx-0: var(--tx-base); --tx-1: color-mix(in oklch, var(--tx-base) 75%, var(--bg-base)); --tx-2: color-mix(in oklch, var(--tx-base) 50%, var(--bg-base)); --tx-3: color-mix(in oklch, var(--tx-base) 32%, var(--bg-base)); /* Derived: accent */ --ac: var(--ac-base); --ac-hi: color-mix(in oklch, var(--ac-base), white 20%); --ac-lo: color-mix(in oklch, var(--ac-base), black 30%); --ac-bg: color-mix(in oklch, var(--ac-base) 10%, transparent); --ac-gl: color-mix(in oklch, var(--ac-base) 18%, transparent); /* Derived: semantic */ --ok: var(--ok-base); --ok-bg: color-mix(in oklch, var(--ok-base) 10%, transparent); --wr: var(--wr-base); --wr-bg: color-mix(in oklch, var(--wr-base) 10%, transparent); --er: var(--er-base); --er-bg: color-mix(in oklch, var(--er-base) 10%, transparent); --in: var(--in-base); --in-bg: color-mix(in oklch, var(--in-base) 10%, transparent); /* Radii */ --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:18px; --r-full:9999px; /* Fonts */ --f-ui:'Outfit',system-ui,sans-serif; --f-mono:'JetBrains Mono',monospace; --f-disp:'Cormorant Garamond',Georgia,serif; /* Shadows — light-dark for appropriate depth (fallback: light values) */ --sh-sm: 0 1px 3px oklch(0 0 0/.15); --sh-sm: light-dark(0 1px 3px oklch(0 0 0/.15), 0 1px 3px oklch(0 0 0/.5)); --sh-md: 0 4px 16px oklch(0 0 0/.12); --sh-md: light-dark( 0 4px 16px oklch(0 0 0/.12) , 0 4px 16px oklch(0 0 0/.6) ); --sh-lg: 0 12px 48px oklch(0 0 0/.15); --sh-lg: light-dark( 0 12px 48px oklch(0 0 0/.15), 0 12px 48px oklch(0 0 0/.7) ); --sh-ac: 0 0 0 1px var(--ac-lo), 0 4px 24px var(--ac-gl); /* Glass */ --glass-bg: oklch(0.16 0.030 261 / 0.75); --glass-bdr: color-mix(in oklch, var(--ac-base) 8%, transparent); /* Motion */ --ease:cubic-bezier(0.16,1,0.3,1); --t-fast:.12s; --t-mid:.22s; --t-slow:.4s; /* Theme + hue transition — animate between brand palettes */ transition: --bg-base var(--t-slow) var(--ease), --tx-base var(--t-slow) var(--ease), --ac-base var(--t-slow) var(--ease), --hue var(--t-slow) var(--ease); } /* ── DENSITY — one attribute reshapes entire UI ──────────── */ /* No framework does this. compact for dashboards, spacious for landing. */ [data-density="compact"] { --s-1:.15rem; --s-2:.35rem; --s-3:.5rem; --s-4:.7rem; --s-5:.9rem; --s-6:1.1rem; --s-8:1.5rem; --s-10:1.85rem; --s-12:2.25rem; --s-16:3rem; --s-20:3.75rem; --s-24:4.5rem; font-size:.875rem; --r-sm:3px; --r-md:6px; --r-lg:8px; --r-xl:12px; } [data-density="spacious"] { --s-1:.35rem; --s-2:.65rem; --s-3:1rem; --s-4:1.35rem; --s-5:1.65rem; --s-6:2rem; --s-8:2.75rem; --s-10:3.5rem; --s-12:4rem; --s-16:5.5rem; --s-20:7rem; --s-24:8.5rem; font-size:1.1rem; --r-sm:6px; --r-md:12px; --r-lg:16px; --r-xl:24px; } /* ── CONTAINER-ADAPTIVE — components reshape to their container ── */ /* Layouts become container query contexts. Children adapt to container, not viewport. */ [ui~="grid"], [ui~="sidebar"], [ui~="contain"] { container-type:inline-size } @container (max-width:24rem) { [ui~="cluster"] { flex-direction:column;align-items:stretch } [ui~="stat"] { font-size:clamp(1.5rem,3vw,2rem) } [ui~="heading"] { font-size:1.2rem } [ui~="button"] { width:100% } } /* ── RESET ────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} img,svg{display:block;max-width:100%} button{cursor:pointer;border:none;background:none;font:inherit} input,select,textarea{font:inherit} /* ── PAGE ─────────────────────────────────────────────────── */ [ui~="page"]{ font-family:var(--f-ui);font-size:1rem;line-height:1.6; color:var(--tx-0);background:var(--bg-0);min-height:100vh; } /* ── LAYOUT ───────────────────────────────────────────────── */ [ui~="stack"] {display:flex;flex-direction:column} [ui~="cluster"] {display:flex;flex-wrap:wrap;align-items:center} [ui~="grid"] {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))} [ui~="center"] {display:grid;place-items:center;text-align:center} [ui~="sidebar"] {display:grid;grid-template-columns:auto 1fr;align-items:start} [ui~="cover"] {display:flex;flex-direction:column;min-height:100vh} [ui~="section"] {padding:var(--s-16) clamp(var(--s-6),5vw,var(--s-16))} [ui~="contain"] {max-width:72rem;margin-inline:auto;width:100%} /* Gap modifiers */ [ui~="sm"] {gap:var(--s-2)} [ui~="md"] {gap:var(--s-4)} [ui~="lg"] {gap:var(--s-8)} [ui~="xl"] {gap:var(--s-12)} /* ── SURFACES ─────────────────────────────────────────────── */ [ui~="card"] { background:var(--bg-2);border:1px solid var(--bdr-1); border-radius:var(--r-lg);padding:var(--s-6); transition:border-color var(--t-mid) var(--ease); } [ui~="card"]:hover{border-color:var(--bdr-2)} [ui~="panel"] { background:var(--bg-1);border:1px solid var(--bdr-1); border-radius:var(--r-xl);padding:var(--s-8); } [ui~="sheet"] { background:var(--bg-3);border-radius:var(--r-md);padding:var(--s-4); } [ui~="overlay"] { background:color-mix(in oklch, var(--bg-0) 85%, transparent); backdrop-filter:blur(16px) saturate(1.4); border:1px solid var(--bdr-2);border-radius:var(--r-xl); /* @starting-style — native entry transition */ transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), display var(--t-slow) var(--ease) allow-discrete; @starting-style { opacity:0; transform:translateY(0.5rem) scale(0.98); } } /* Surface modifiers */ [ui~="elevated"] {box-shadow:var(--sh-md)} [ui~="raised"] {box-shadow:var(--sh-lg)} [ui~="accent"] {border-color:var(--ac-lo)!important;box-shadow:var(--sh-ac)} [ui~="muted"] {background:var(--bg-1);border-color:var(--bdr-0)} [ui~="ghost"] {background:transparent;border-color:transparent} [ui~="outline"] {background:transparent;border:1px solid var(--bdr-2)} [ui~="glass"] {background:var(--glass-bg,color-mix(in oklch, var(--bg-0) 75%, transparent));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-bdr,var(--bdr-1));box-shadow:0 4px 24px -2px oklch(0 0 0/.3)} /* ── TYPOGRAPHY ───────────────────────────────────────────── */ [ui~="heading"] { font-family:var(--f-ui);font-size:clamp(1.5rem,3vw,2.25rem); font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--tx-0); } [ui~="heading"][ui~="sm"] {font-size:1.1rem} [ui~="heading"][ui~="lg"] {font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-.03em} [ui~="heading"][ui~="xl"] {font-size:clamp(2.5rem,7vw,5rem);letter-spacing:-.04em} [ui~="subheading"] { font-size:clamp(1.1rem,2vw,1.4rem);font-weight:500; line-height:1.3;letter-spacing:-.015em;color:var(--tx-0); } [ui~="eyebrow"] { font-family:var(--f-mono);font-size:.65rem;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--ac); } [ui~="body"] {font-size:.9rem;line-height:1.7;color:var(--tx-1);font-weight:300} [ui~="caption"] {font-size:.75rem;line-height:1.5;color:var(--tx-2);letter-spacing:.02em} [ui~="code"] { font-family:var(--f-mono);font-size:.82em; background:var(--bg-3);border:1px solid var(--bdr-1); border-radius:var(--r-sm);padding:.1em .4em;color:var(--ac-hi); } pre[ui~="code"] { padding:var(--s-5);font-size:.8rem;overflow-x:auto; border-radius:var(--r-lg);line-height:1.7;color:var(--tx-1); } /* ── BUTTON ───────────────────────────────────────────────── */ [ui~="button"] { display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2); font-family:var(--f-ui);font-size:.875rem;font-weight:500; padding:.55em 1.2em;border-radius:var(--r-md); background:var(--ac);color:var(--bg-0);border:1px solid transparent; transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); white-space:nowrap;user-select:none;letter-spacing:.01em; } [ui~="button"]:hover {background:var(--ac-hi);transform:translateY(-1px);box-shadow:0 4px 16px var(--ac-gl)} [ui~="button"]:active {transform:translateY(0);box-shadow:none} [ui~="button"]:focus-visible {outline:2px solid var(--ac);outline-offset:2px} [ui~="button"][ui~="outline"] {background:transparent;color:var(--tx-0);border-color:var(--bdr-2)} [ui~="button"][ui~="outline"]:hover {border-color:var(--bdr-3);background:var(--bg-3)} [ui~="button"][ui~="ghost"] {background:transparent;color:var(--tx-1);border-color:transparent} [ui~="button"][ui~="ghost"]:hover {background:var(--bg-3);color:var(--tx-0)} [ui~="button"][ui~="muted"] {background:var(--bg-3);color:var(--tx-1);border-color:var(--bdr-1)} [ui~="button"][ui~="muted"]:hover {background:var(--bg-4);color:var(--tx-0)} [ui~="button"][ui~="danger"] {background:var(--er);color:#fff} [ui~="button"][ui~="danger"]:hover {background:color-mix(in oklch, var(--er-base), white 15%)} [ui~="button"][ui~="sm"] {font-size:.78rem;padding:.4em .9em;border-radius:var(--r-sm)} [ui~="button"][ui~="lg"] {font-size:1rem;padding:.7em 1.6em;border-radius:var(--r-lg)} /* ── INPUT ────────────────────────────────────────────────── */ [ui~="input"] { display:block;width:100%;font-family:var(--f-ui);font-size:.875rem; padding:.6em .9em;background:var(--bg-2);color:var(--tx-0); border:1px solid var(--bdr-2);border-radius:var(--r-md);outline:none; transition:border-color var(--t-fast),box-shadow var(--t-fast); } [ui~="input"]:focus {border-color:var(--ac-lo);box-shadow:0 0 0 3px var(--ac-bg)} [ui~="input"]::placeholder {color:var(--tx-3)} /* ── BADGE ────────────────────────────────────────────────── */ [ui~="badge"] { display:inline-flex;align-items:center;gap:var(--s-1); font-family:var(--f-mono);font-size:.65rem;font-weight:500; letter-spacing:.08em;text-transform:uppercase; padding:.25em .65em;border-radius:var(--r-full); background:var(--bg-3);color:var(--tx-1);border:1px solid var(--bdr-1); } [ui~="badge"][ui~="accent"] {background:var(--ac-bg);color:var(--ac-hi);border-color:var(--ac-lo)} [ui~="badge"][ui~="success"] {background:var(--ok-bg);color:var(--ok);border-color:color-mix(in oklch, var(--ok-base) 25%, transparent)} [ui~="badge"][ui~="danger"] {background:var(--er-bg);color:var(--er);border-color:color-mix(in oklch, var(--er-base) 25%, transparent)} [ui~="badge"][ui~="warning"] {background:var(--wr-bg);color:var(--wr);border-color:color-mix(in oklch, var(--wr-base) 25%, transparent)} /* ── ALERT ────────────────────────────────────────────────── */ [ui~="alert"] { padding:var(--s-4) var(--s-5);border-radius:var(--r-lg); font-size:.875rem;line-height:1.6; background:var(--in-bg);color:var(--tx-1);border:1px solid color-mix(in oklch, var(--in-base) 20%, transparent); display:flex;gap:var(--s-3);align-items:flex-start; } [ui~="alert"][ui~="success"] {background:var(--ok-bg);border-color:color-mix(in oklch, var(--ok-base) 20%, transparent)} [ui~="alert"][ui~="warning"] {background:var(--wr-bg);border-color:color-mix(in oklch, var(--wr-base) 20%, transparent)} [ui~="alert"][ui~="danger"] {background:var(--er-bg);border-color:color-mix(in oklch, var(--er-base) 20%, transparent)} /* ── STAT ─────────────────────────────────────────────────── */ [ui~="stat"] { font-family:var(--f-disp);font-size:clamp(2rem,4vw,2.75rem); font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--tx-0); } /* ── NAV ──────────────────────────────────────────────────── */ [ui~="nav"] { display:flex;align-items:center;gap:var(--s-8); padding:var(--s-4) clamp(var(--s-6),5vw,var(--s-16)); border-bottom:1px solid var(--bdr-1); position:sticky;top:0;z-index:100; background:color-mix(in oklch, var(--bg-0) 85%, transparent); backdrop-filter:blur(20px) saturate(1.5); } [ui~="nav-spacer"]{flex:1} /* ── DIVIDER ──────────────────────────────────────────────── */ [ui~="divider"] { height:1px;width:100%; background:linear-gradient(to right,transparent,var(--bdr-2) 30%,var(--bdr-2) 70%,transparent); } /* ── ANIMATIONS ───────────────────────────────────────────── */ @keyframes ceduix-in {from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}} [ui~="animate"]{animation:ceduix-in .7s var(--ease) both} [ui~="animate"][ui~="d1"]{animation-delay:.1s} [ui~="animate"][ui~="d2"]{animation-delay:.2s} [ui~="animate"][ui~="d3"]{animation-delay:.3s} [ui~="animate"][ui~="d4"]{animation-delay:.4s} [ui~="animate"][ui~="d5"]{animation-delay:.5s} [ui~="animate"][ui~="d6"]{animation-delay:.6s} [ui~="animate"][ui~="d7"]{animation-delay:.7s} [ui~="animate"][ui~="d8"]{animation-delay:.8s} [ui~="reveal"]{opacity:0;transform:translateY(2rem);transition:opacity .7s var(--ease),transform .7s var(--ease)} [ui~="reveal"][ui~="from-left"]{transform:translateX(-2rem)} [ui~="reveal"][ui~="from-right"]{transform:translateX(2rem)} [ui~="reveal"][ui~="from-down"]{transform:translateY(-2rem)} [ui~="reveal"][ui~="fade"]{transform:none} [ui~="reveal"].in-view{opacity:1;transform:none} [ui~="reveal"][ui~="d1"].in-view{transition-delay:.1s} [ui~="reveal"][ui~="d2"].in-view{transition-delay:.2s} [ui~="reveal"][ui~="d3"].in-view{transition-delay:.3s} [ui~="reveal"][ui~="d4"].in-view{transition-delay:.4s} [ui~="reveal"][ui~="d5"].in-view{transition-delay:.5s} [ui~="reveal"][ui~="d6"].in-view{transition-delay:.6s} /* ── PROSE (markdown article rendering) ───────────────────── */ [ui~="prose"]{font-family:var(--f-ui);font-size:1rem;line-height:1.75;color:var(--tx-1)} [ui~="prose"] h1{font-size:2rem;font-weight:700;color:var(--tx-0);margin:2em 0 .5em;line-height:1.2} [ui~="prose"] h2{font-size:1.5rem;font-weight:600;color:var(--tx-0);margin:1.75em 0 .5em;line-height:1.25} [ui~="prose"] h3{font-size:1.25rem;font-weight:600;color:var(--tx-0);margin:1.5em 0 .5em;line-height:1.3} [ui~="prose"] h4{font-size:1rem;font-weight:600;color:var(--tx-0);margin:1.25em 0 .5em} [ui~="prose"] p{margin:.75em 0} [ui~="prose"] a{color:var(--ac);text-decoration:underline;text-underline-offset:3px} [ui~="prose"] a:hover{color:var(--ac-hi)} [ui~="prose"] strong{color:var(--tx-0);font-weight:600} [ui~="prose"] ul,[ui~="prose"] ol{margin:.75em 0;padding-left:1.5em} [ui~="prose"] li{margin:.25em 0} [ui~="prose"] li::marker{color:var(--tx-3)} [ui~="prose"] blockquote{border-left:3px solid var(--ac-lo);padding:.5em 0 .5em 1.25em;margin:1em 0;color:var(--tx-2);font-style:italic} [ui~="prose"] code{font-family:var(--f-mono);font-size:.875em;background:var(--bg-2);padding:.15em .35em;border-radius:var(--r-sm)} [ui~="prose"] pre{background:var(--bg-1);border:1px solid var(--bdr-1);border-radius:var(--r-lg);padding:var(--s-4);overflow-x:auto;margin:1em 0} [ui~="prose"] pre code{background:none;padding:0;font-size:.85em;line-height:1.6} [ui~="prose"] hr{border:none;height:1px;background:var(--bdr-2);margin:2em 0} [ui~="prose"] img{max-width:100%;height:auto;border-radius:var(--r-lg);margin:1.5em 0} [ui~="prose"] table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.9em} [ui~="prose"] th{text-align:left;font-weight:600;color:var(--tx-0);padding:.5em;border-bottom:2px solid var(--bdr-2)} [ui~="prose"] td{padding:.5em;border-bottom:1px solid var(--bdr-1)} /* ── DIALOG (native ) ────────────────────────────── */ [ui~="dialog"] { background:var(--bg-2);color:var(--tx-0); border:1px solid var(--bdr-2);border-radius:var(--r-xl); padding:var(--s-8);max-width:32rem;width:calc(100% - var(--s-8)); box-shadow:var(--sh-lg); transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), overlay var(--t-slow) var(--ease) allow-discrete, display var(--t-slow) var(--ease) allow-discrete; } [ui~="dialog"][open] { @starting-style { opacity:0; transform:translateY(1rem) scale(0.96); } } [ui~="dialog"]::backdrop { background:oklch(0.10 0.02 260 / 0.7); backdrop-filter:blur(6px); transition:opacity var(--t-slow) var(--ease), display var(--t-slow) var(--ease) allow-discrete; } [ui~="dialog"][open]::backdrop { @starting-style { opacity:0; } } /* ── POPOVER (native [popover]) ──────────────────────────── */ [ui~="popover"] { background:var(--bg-2);color:var(--tx-0); border:1px solid var(--bdr-2);border-radius:var(--r-lg); padding:var(--s-4);box-shadow:var(--sh-md); margin:0;inset:unset; transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), overlay var(--t-mid) var(--ease) allow-discrete, display var(--t-mid) var(--ease) allow-discrete; @starting-style { opacity:0; transform:translateY(-0.5rem); } } /* ── TABS (CSS-only via radio + :has) ────────────────────── */ [ui~="tabs"] { display:flex;flex-direction:column; } [ui~="tab-list"] { display:flex;gap:0;border-bottom:1px solid var(--bdr-1); } [ui~="tab-list"] input[type="radio"] { position:absolute;opacity:0;pointer-events:none } [ui~="tab"] { padding:var(--s-3) var(--s-5); font-family:var(--f-ui);font-size:.875rem;font-weight:500; color:var(--tx-2);cursor:pointer; border-bottom:2px solid transparent;margin-bottom:-1px; transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease); user-select:none; } [ui~="tab"]:hover { color:var(--tx-1) } input:checked + [ui~="tab"], [ui~="tab"][aria-selected="true"] { color:var(--ac);border-bottom-color:var(--ac); } input:focus-visible + [ui~="tab"] { outline:2px solid var(--ac);outline-offset:2px } /* Tab panels — use