---
tags: style
-description: d2's default stylesheet — the rules every page of the website and of every project shares
+description: d2's default stylesheet — the tokens every page of the website and of every project share. Edit and publish to restyle everything, no build or deploy.
+brand: diesel
+base: stylesheet-orange1
---
# The default stylesheet
-The rules every page shares: the top bar, the page frame, headings, text, tables, buttons. Editing this topic and publishing it restyles the website and every project; nothing is built or deployed. A project's own Style topics (their colours and fonts, as tokens) still layer on top, and these rules draw on those tokens: `var(--ink)`, `var(--soft)`, `var(--indigo)`…
-
-Only the one ```css block below is read, as it is. If it is missing or can't be read, d2 serves its built-in copy of these rules, so a page is never unstyled.
-
-```css
-
-.admin{color:var(--admin,#1f7a8c)!important}.admin-box{border-color:var(--admin,#1f7a8c)!important;background:var(--admin-bg,#e3f2f5)!important} /* only the project's admins see it (Design 37, P-271); god's, after it, wins */
-@keyframes d2setfl{from{box-shadow:0 0 0 3px var(--attn,#7a7fc9);background-color:var(--sun-bg,#fff6e0)}to{box-shadow:0 0 0 3px transparent}}.setflash{animation:d2setfl 1.5s ease-out}
-.god{color:var(--god,#7b3fb8)!important}.god-box{border-color:var(--god,#7b3fb8)!important;background:var(--god-bg,#f2eafb)!important}td.god-cell,th.god{background:var(--god-bg,#f2eafb)} /* only god sees it (UiSpec 2.1, 2026-09-27) */
-td.god-cell input::placeholder{color:var(--soft,#777);opacity:.6} /* an empty override reads empty, not as a value (P-700) */
-.d2wrap{max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,32px);box-sizing:border-box;width:100%}
-.d2top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;flex-wrap:wrap}
-.d2top .mark{display:flex;align-items:center;gap:10px;font:800 calc(22px*var(--fz,1)) var(--display);text-decoration:none;letter-spacing:-.01em;color:var(--ink)}.d2top .mark svg{width:30px;height:30px}
-.d2top nav{display:flex;gap:4px;flex-wrap:wrap}.d2top nav a{text-decoration:none;color:var(--soft);padding:6px 10px;border-radius:999px;font:calc(15px*var(--fz,1)) var(--body)}
-.d2top nav a:hover,.d2top nav a[aria-current]{color:var(--ink);background:var(--card)}
-/* Pipeline in the bar (^menu-2): the admin colour comes from .god; on a narrow screen it is the first label to go, and
- its icon takes over, so the other four keep their words. The label stays in the markup for a screen reader. */
-.d2top nav a.pipe i{display:none;font-style:normal;line-height:1}
-@media (max-width:620px){.d2top nav a.pipe i{display:inline}.d2top nav a.pipe span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
-
-
-.d2top .right{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin-left:auto}.d2top .left{display:flex;align-items:center;gap:6px;min-width:0}
-.d2srch{display:flex;align-items:center;margin:0;border-radius:999px;transition:background .15s,box-shadow .15s}
-.d2srch .sbtn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;color:var(--soft);cursor:pointer;opacity:.75}
-.d2srch .sbtn:hover{opacity:1;background:var(--card)}.d2srch .sbtn svg{width:17px;height:17px}
-.d2srch input{width:0;padding:0;border:0;outline:0;background:none;color:var(--ink);font:calc(15px*var(--fz,1)) var(--body);transition:width .2s,padding .2s}
-.d2srch.open{background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}.d2srch.open .sbtn{opacity:1}.d2srch.open input{width:min(46vw,220px);padding:6px 12px 6px 0}
-.d2top button.dsync{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;padding:0;margin:0;border-radius:50%;border:0;cursor:pointer;background:none;color:var(--soft);box-shadow:inset 0 0 0 1px var(--line);font:inherit}.d2top button.dsync svg{flex-shrink:0;display:block}
-.d2top button.dsync:hover{color:var(--ink)}.d2top button.dsync.on{color:var(--paper,#fff);background:var(--indigo);box-shadow:none}.d2top button.dsync.on svg{animation:d2spin 3s linear infinite}
-@keyframes d2spin{to{transform:rotate(360deg)}}
-/* The blocked flag (Design 40, P-420): next to the sync indicator, the Architect's only. It pulses so it is caught out
- of the corner of an eye, and is steady — the same colour, at full strength — under prefers-reduced-motion. */
-.d2top .bflag{display:inline-flex;align-items:center;gap:4px;justify-content:center;min-width:34px;height:34px;padding:0 8px;border-radius:17px;text-decoration:none;color:var(--rose,#c0304f);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rose,#c0304f) 45%,transparent);font:700 calc(13px*var(--fz,1)) var(--body);animation:d2bflag 1.6s ease-in-out infinite}
-.d2top .bflag svg{flex-shrink:0;display:block}.d2top .bflag:hover{color:var(--paper,#fff);background:var(--rose,#c0304f);box-shadow:none;animation:none}
-@keyframes d2bflag{0%,100%{opacity:1}50%{opacity:.4}}
-@media (prefers-reduced-motion:reduce){.d2top .bflag{animation:none;opacity:1}}
-.umenu>summary{position:relative}.umenu>summary .wdot{position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:var(--rose,#c0304f);box-shadow:0 0 0 2px var(--paper,#fff)}
-.umenu a .wn{display:inline-block;min-width:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--rose,#c0304f);color:#fff;font:700 calc(13px*var(--fz,1))/20px var(--body);text-align:center}
-.dpill{text-decoration:none;font:600 calc(14px*var(--fz,1)) var(--body);color:var(--soft);padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
-.dpill.on{color:#1d1d1b;background:var(--sun,#f2b84b);box-shadow:none}.dpill b{font-weight:800}.dpill.bad{color:#fff;background:var(--rose,#c0304f)}.dpill.others{color:#5c4400;background:#fff3b0;box-shadow:inset 0 0 0 1px #f2d25b}
-.umenu{position:relative}.umenu>summary{list-style:none;cursor:pointer;width:34px;height:34px;border-radius:50%;background:var(--indigo);color:var(--paper,#fff);font:800 calc(16px*var(--fz,1))/34px var(--display);text-align:center;user-select:none}
-.umenu>summary::-webkit-details-marker{display:none}.umenu[open]>summary{box-shadow:0 0 0 3px var(--indigo-bg,var(--line))}
-.umenu .pop{position:fixed;right:8px;top:60px;z-index:50;min-width:210px;max-width:calc(100vw - 16px);max-height:calc(100vh - 76px);overflow:auto;box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
-.umenu .who{padding:8px 10px 6px;font-size:calc(14px*var(--fz,1));color:var(--soft);overflow-wrap:anywhere}.umenu .who b{color:var(--ink)}
-.umenu a,.umenu button{display:block;width:100%;text-align:left;text-decoration:none;color:var(--ink);background:none;border:0;border-radius:9px;padding:8px 10px;font:calc(16px*var(--fz,1)) var(--body);cursor:pointer}
-.umenu a:hover,.umenu button:hover{background:var(--paper)}.umenu hr{border:0;border-top:1px solid var(--line);margin:5px 4px}.umenu form{margin:0}
-
-
-.d2top nav a.btn{margin-left:6px}
-.umenu>summary .wdot.prio,.umenu a .wn.prio{background:var(--indigo,#5550d8)}
-/* ESP (^esp-ui-1..4, Design#esp): the toggle right of Dev-sync, the same round kind; a link while its help is unseen */
-.d2top .dsync.esp{position:relative}.d2top a.dsync{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;border-radius:50%;color:var(--soft);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none}.d2top a.dsync:hover{color:var(--ink)}
-.d2top button.dsync.esp.on svg{animation:none}.d2top .dsync.esp .dot{display:none;position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:#639922}.d2top .dsync.esp.on.tgt .dot{display:block}
-.espHl{outline:2px solid var(--indigo,#378add);outline-offset:4px;border-radius:6px;transition:outline-color .4s}
-.esptoast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100vw - 24px));padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card,#242422);color:var(--ink);box-shadow:0 6px 24px rgba(0,0,0,.25);font-size:calc(14px*var(--fz,1));transition:opacity .4s}
-.esptoast.fade{opacity:0}.esptoast .eg{color:var(--indigo,#85b7eb);flex:none}.esptoast .et{flex:1;min-width:0}.esptoast .ew{font-size:calc(12px*var(--fz,1));color:var(--soft);margin-top:2px}
-.turnon{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:12px 14px}.turnon p{margin:0}
-/* ESP asked to turn on (^esp-ui-6): a slim bar under the top bar, 60 s; and the 1.5 s flash by the toggle on each tap (^esp-ui-5) */
-.espbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 12px;border-bottom:1px solid var(--line);background:var(--card,#242422);color:var(--ink);font-size:calc(14px*var(--fz,1))}
-.espbar .eg{color:var(--indigo,#85b7eb);flex:none}.espbar .et{flex:1;min-width:0}.espbar a{color:var(--soft);font-size:calc(13px*var(--fz,1))}
-.espflash{position:fixed;transform:translateX(-50%);z-index:61;padding:4px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card,#242422);color:var(--ink);font-size:calc(13px*var(--fz,1));white-space:nowrap;pointer-events:none;opacity:0;animation:espflash 1.5s ease forwards}
-@keyframes espflash{0%{opacity:0}20%{opacity:1}70%{opacity:1}100%{opacity:0}}.mark svg.wm{width:auto;height:30px}@keyframes d2blink{50%{opacity:0}}.d2cur{animation:d2blink 1.1s steps(1) infinite}
-@media (prefers-reduced-motion:reduce){.d2cur{animation:none}}/* The one confirm dialog (SpecUi ^ui-confirm-1, src/shell/ui/confirm.ts): a box over a dimmed page; action first */
-.d2cf{position:fixed;inset:0;z-index:2000;background:rgba(10,12,20,.45);display:flex;align-items:center;justify-content:center;padding:16px}
-.d2cfb{background:var(--paper,#fff);color:var(--ink,#111);border:1px solid var(--line,#ddd);border-radius:16px;padding:20px 22px;width:100%;max-width:440px;box-shadow:0 12px 40px rgba(0,0,0,.28)}
-.d2cfb h2{margin:0 0 8px;font:800 calc(18px*var(--fz,1)) var(--display,inherit);line-height:1.3}
-.d2cfb .cft{margin:0 0 6px}.d2cfb .cfl{margin:0 0 6px;color:var(--soft,#666);font-size:calc(14px*var(--fz,1))}
-.d2cfb .cfr{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}/* The one error pop-up (SpecUi #ui-errors, src/shell/ui/errpop.ts): red, near the top, over the page; fades in and out */
-.d2err{position:fixed;top:14px;left:50%;transform:translate(-50%,-8px);z-index:2100;max-width:min(560px,calc(100vw - 24px));display:flex;gap:12px;align-items:flex-start;background:var(--rose,#c0304f);color:var(--card,#fff);border-radius:12px;padding:10px 12px 10px 16px;box-shadow:0 8px 28px rgba(0,0,0,.25);font-size:calc(14px*var(--fz,1));line-height:1.4;opacity:0;transition:opacity .3s,transform .3s}
-.d2err.on{opacity:1;transform:translate(-50%,0)}
-.d2err-m{flex:1;overflow-wrap:anywhere}
-.d2err-x{background:transparent;border:0;color:inherit;font-size:calc(15px*var(--fz,1));line-height:1;padding:2px 4px;cursor:pointer;opacity:.85}.d2err-x:hover{opacity:1}
-
-/* Role chips (Design 31.2, UiSpec 2.9.1): the role an AI's token carries, beside the agent's name wherever a record
- says who wrote it. Colour marks the role, never the person: coder teal, designer purple, every other role grey. The
- tokens live here, not in a page stylesheet, so every stylesheet and dark mode get the same three. */
-:root{--role-coder:#1f7a8c;--role-coder-bg:#e3f2f5;--role-designer:#7b3fb8;--role-designer-bg:#f2eafb;--role-other:#6b6a66;--role-other-bg:#eeedea}
-@media (prefers-color-scheme:dark){:root{--role-coder:#6cc3d5;--role-coder-bg:#17292d;--role-designer:#c5a0f5;--role-designer-bg:#2a2038;--role-other:#9c9a93;--role-other-bg:#26251f}}
-.rch{display:inline-block;font:600 calc(11px*var(--fz,1)) var(--body);padding:1px 7px;border-radius:999px;white-space:nowrap;line-height:1.5;background:var(--role-other-bg);color:var(--role-other)}
-.rch-coder{background:var(--role-coder-bg);color:var(--role-coder)}.rch-designer{background:var(--role-designer-bg);color:var(--role-designer)}
-/* the who-line (UiSpec 2.9.1): <handle> via <agent> <role chip>, or <handle> · in person. The handle in --attn like a
- person's name anywhere else (P-443), the agent's name in mono, *via* and *in person* quiet. */
-.wl-by{color:var(--attn)}.wl-via,.wl-ip{color:var(--soft)}
-.wl-ag{text-decoration:none;color:inherit}.wl-ag code{font:400 calc(12px*var(--fz,1)) var(--mono)}.wl-ag:hover code{text-decoration:underline}
-.wl-ag+.rch{margin-left:5px}
-
-/* status chips, one palette on every page (P-121; UiSpec 2.9): from the style tokens, so every stylesheet and dark mode get them */
-.ps{display:inline-block;font:600 calc(12px*var(--fz,1)) var(--body);padding:2px 9px;border-radius:999px;white-space:nowrap;border:1px solid transparent;line-height:1.4}
-.ps-new{background:var(--soft);color:var(--card)}.ps-pending{background:var(--soft);color:var(--card);border:1px dashed var(--ink)}
-.ps-in-progress{background:var(--leaf);color:var(--card)}.ps-waiting,.ps-waiting-input{background:var(--sun);color:#2b1d00}
-.ps-waiting-error{background:var(--rose);color:var(--card)}.ps-review{background:transparent;color:var(--review,#7a7fc9);border:1px solid var(--review,#7a7fc9)}
-.ps-done{background:transparent;color:var(--leaf);border-color:var(--leaf)}.ps-done::before{content:"✓ "}
-/* To look at (P-524): a done item still waiting for the viewer's look. The done colour family, softly filled so it
- reads as something to do rather than something finished, and no ✓ — the ✓ is what Seen gives it. */
-.ps-look{background:color-mix(in srgb,var(--leaf) 15%,transparent);color:color-mix(in srgb,var(--leaf) 85%,var(--ink));border-color:color-mix(in srgb,var(--leaf) 45%,transparent)}
-/* Paused (^pipe-57) takes the pause glyph and the warning colour: it is a hold a person means to lift. Parked keeps the
- grey and takes a P in a circle, because two grey chips both reading "⏸" told the two apart by nothing. */
-.ps-self{background:transparent;color:color-mix(in srgb,var(--sun) 55%,#000);border:1px solid color-mix(in srgb,var(--sun) 55%,#000)}li:has(.ps-self) .tt,.bcard:has(.ps-self) b{color:var(--soft)}
-.alm{display:inline-block;font-size:.72em;font-weight:700;letter-spacing:.02em;padding:0 6px;margin:0 4px;border-radius:9px;border:1px solid currentColor;color:var(--ink);vertical-align:middle}
-/* the Rush chip (^pipe-68, UiSpec ^ui-rush; P-576): the alone chip's shape in the attention colour, filled, so one
- glance tells a rushed row from the quiet chips around it — it is the one chip on a row that a person put there. */
-.rsh{display:inline-block;font-size:.72em;font-weight:700;letter-spacing:.02em;padding:0 6px;margin:0 4px;border-radius:9px;border:1px solid var(--attn,#7a7fc9);background:var(--attn,#7a7fc9);color:var(--card,#fff);vertical-align:middle;white-space:nowrap}
-.ps-paused{background:transparent;color:var(--sun);border:1px solid var(--sun)}.ps-paused::before{content:"⏸ "}
-.ps-parked{background:var(--line);color:var(--soft)}.ps-parked::before{content:"Ⓟ "}
-.ps-dropped{background:var(--line);color:var(--soft);text-decoration:line-through}.ps-moved,.ps-todo{background:var(--line);color:var(--soft);font-style:italic}
-
-*,*::before,*::after{box-sizing:border-box}
-html,body{height:100%}
-body{margin:0;background:var(--paper);color:var(--ink);font:calc(17px*var(--fz,1))/1.55 var(--body);padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
-a{color:inherit}.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,32px) 48px}
-:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:6px}
-h1{font:800 calc(clamp(30px,4.2vw,44px)*var(--fz,1))/1.05 var(--display);letter-spacing:-.025em;margin:12px 0 8px}
-h1 small{font:600 calc(16px*var(--fz,1)) var(--mono);color:var(--soft);letter-spacing:0;vertical-align:middle;margin-left:6px}
-.lede{color:var(--soft);margin:0 0 14px;max-width:40em}
-code{font:400 calc(14px*var(--fz,1)) var(--mono)}
-@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
-
-/* Appearance (P-294, Design 37 #appearance): text size on html[data-fs] (small · normal · medium · large), screen width on
- html[data-w=wide]. Every font size is calc(Npx*var(--fz,1)), so the text itself grows and the layout reflows around it (a zoom didn't reach the text on the iPad); the intro help text at the top of the pipeline and similar pages
- stays its normal size (read once). Wide lifts the page width; prose stays readable (~90ch). */
-html[data-fs=small]{--fz:.9}html[data-fs=medium]{--fz:1.1}html[data-fs=large]{--fz:1.25}
-/* The intro help text reads once, so it keeps its normal size whatever the text-size setting is. The pin is on
- .lede alone: it used to be on .pm-text as well, which pinned everything beside the lede in the pipeline page's
- intro column — including the quick legend, which is why the legend could not be made to scale (P-529). */
-html[data-fs] .lede{--fz:1}
-html[data-w=wide] :is(.wrap,.d2wrap,.narrow,.narrow:has(.tocw)){max-width:none}html[data-w=wide] .md{max-width:960px}
-html[data-w=wide] .tocw{grid-template-columns:minmax(0,960px) 260px}
-html[data-w=wide] .narrow>.meta{max-width:960px}html[data-w=wide] .narrow:has(.tocw)>.meta{max-width:1244px}html[data-w=wide] body:has(.tocw) .narrow>.meta{max-width:1244px}html[data-w=wide][data-toc=off] .narrow>.meta{max-width:960px}
+The colour and font tokens every page shares. Editing this topic and publishing it restyles the website and every project; a project's own `Style:*` topics layer on top. Values must be colours or font stacks only.
-/* one-off layout helpers that were inline style= attributes (P-324): classes, so their font sizes follow the text size
- (Design 37 #appearance, APPEAR-3); !important keeps the precedence the inline style had. Colours from data stay inline. */
-.u-mw0{max-width:none!important}.u-w100{width:100%!important}.u-inl{display:inline!important}.u-if{display:inline-flex!important}.u-ci{color:inherit!important}.u-nd{text-decoration:none!important}
-.u-ox{overflow-x:auto!important}.u-pre{white-space:pre-wrap!important;overflow-wrap:anywhere!important}.u-vm{vertical-align:middle!important}
-.u-m0{margin:0!important}.u-m8{margin:8px 0!important}.u-ml8{margin:0 0 0 8px!important}.u-mt12{margin-top:12px!important}.u-mt18{margin-top:18px!important}.u-mt22{margin-top:22px!important}.u-p0{padding:0!important}
-.u-l70{left:70%!important}.u-l85{left:85%!important}.u-g10{gap:10px!important;align-items:center!important}.u-g14{gap:14px!important;align-items:center!important;flex-wrap:wrap!important}
-.u-amber{color:#8a5a00!important}.u-amberbg{background:#8a5a00!important}.u-fw4{font-weight:400!important}
-.u-mono13{font:calc(13px*var(--fz,1)) var(--mono)!important}.u-mono13l{font:calc(13px*var(--fz,1))/1.45 var(--mono)!important}.u-mono15{font:calc(15px*var(--fz,1)) var(--mono)!important}
-.u-f13p{font-size:calc(13px*var(--fz,1))!important;padding:2px 10px!important}
-.u-linkbtn{font:inherit!important;color:inherit!important;background:none!important;border:0!important;padding:0!important;text-decoration:underline!important;cursor:pointer!important}
-.u-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
+```style
+--paper: #fbfaf7
+--card: #ffffff
+--ink: #1d1d1b
+--soft: #6b6a66
+--line: #e4e1da
+--indigo: #9a4b12
+--indigo-bg: #f5e8dc
+--slate: #6b6a66
+--slate-bg: #f3f1ec
+--sun: #d99a2b
+--sun-bg: #fbf1dc
+--leaf: #3f7d4e
+--rose: #b23a48
+--rose-bg: #f8e6e6
+--god: #7b3fb8
+--god-bg: #f2eafb
+--admin: #1f7a8c
+--admin-bg: #e3f2f5
+--attn: #7a7fc9
+--display: 'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif
+--body: system-ui,-apple-system,'Segoe UI',sans-serif
+--mono: ui-monospace,Menlo,Consolas,monospace
+```
-/* Tile and card grids pull left and cap at 4-5 per row (UiSpec ^tile-1): one rule for every one of them — the toolbox's
- and the Settings page's tiles, Raz Admin's cards, the wiki's welcome cards, the topics list, the two Components lists,
- the CDN's files, the guardians, the status metrics and System status's five counts. auto-fill fills the row at --tile a tile and the max-width stops
- it at five; min(…,100%) keeps the grid inside its container, so no tile is ever cut off at the right edge, and
- margin-left:0 starts it at the page's left content edge, where the text above it starts. Narrow screens are untouched:
- a max-width only ever bites above itself. A page that wants a wider tile or a tighter gap sets --tile and --tileg;
- page stylesheets set the look of a tile, never this grid. The object browser (/dom) is its own document and can't reach
- this rule: it carries the same numbers in src/ui/browser.html. */
-.tiles,.rcards,.wcards,.tps,.lgrid,.pgrid,.gcs,.mets,.stats,ul.files{--tile:210px;--tileg:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile),1fr));gap:var(--tileg);max-width:min(calc(5*var(--tile) + 4*var(--tileg)),100%);margin-left:0;margin-right:0}
-/* One action-button style on every page (P-445, P-457): every <button> and every .btn looks the same unless it is one of
- the other kinds below (switch, icon button, tab, segmented toggle) or a page's own named kind listed in
- test/ui/controls.test.ts. Sizes: .sm (or a .sm row), .lg. States: .primary, .danger, .on (pressed). */
-.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
-button,.btn{font:600 calc(14px*var(--fz,1)) var(--body);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px 11px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
-button:hover,.btn:hover{border-color:var(--indigo)}button.primary,.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
-button.danger,.btn.danger{color:var(--rose);border-color:color-mix(in srgb,var(--rose) 45%,transparent)}button[disabled],.btn[disabled]{opacity:.5;cursor:default}
-button.sm,.btn.sm,.sm button,.sm .btn{font-size:calc(12px*var(--fz,1));padding:1px 7px;min-height:22px;border-radius:6px}
-/* one segmented toggle (P-457): a choice of one out of a few within a page — joined segments, the chosen one tinted;
- chosen = <b>, .on, [aria-selected=true], [aria-current] or a checked radio inside a label. A page sets only where it
- sits (margins, when it shows). Tabs that move between pages or panes are .tabbar, below. */
-.tabs{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:999px;overflow:hidden;vertical-align:middle;font:600 calc(14px*var(--fz,1)) var(--body)}
-.tabs>a,.tabs>b,.tabs>button,.tabs>label{padding:4px 14px;text-decoration:none;color:var(--ink);font:inherit;line-height:1.4;background:none;border:0;border-left:1px solid var(--line);border-radius:0;cursor:pointer;display:inline-flex;align-items:center}
-.tabs>:first-child{border-left:0}.tabs>a:hover,.tabs>button:hover,.tabs>label:hover{background:var(--card)}
-.tabs>b,.tabs>.on,.tabs>[aria-selected=true],.tabs>[aria-current],.tabs>label:has(input:checked){background:var(--indigo-bg,#eef0ff);color:var(--indigo,#3b3fb6);cursor:default}
-.tabs input{position:absolute;opacity:0;pointer-events:none}.tabs>label:has(input:focus-visible){outline:2px solid var(--indigo);outline-offset:-2px}
-.tabs>label:has(input:disabled){cursor:default;opacity:.55}.tabs>label:has(input:checked:disabled){opacity:1}
-.tabs.sm{font-size:calc(13px*var(--fz,1))}.tabs.sm>*{padding:2px 10px}
-button.primary:hover,.btn.primary:hover{border-color:var(--ink);filter:brightness(1.15)}
-/* one dropdown style on every page (P-445): the button's height, border, corners and font, the page's own colours, a ▾
- chevron in place of the browser's arrow; a page's own select rules still come after and win where it needs a change */
-select{font:600 calc(14px*var(--fz,1)) var(--body);color:var(--ink);background-color:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px 28px 4px 10px;min-height:30px;cursor:pointer;-webkit-appearance:none;appearance:none;max-width:100%;
- background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239c9a93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
-select:hover{border-color:var(--indigo)}select:focus-visible{outline:2px solid var(--attn,#7a7fc9);outline-offset:1px}
-select[multiple]{background-image:none;padding-right:10px}
-select:disabled{opacity:.5;cursor:default}
-select.sm,.sm select{font-size:calc(13px*var(--fz,1));padding:2px 24px 2px 8px;min-height:26px;background-position:right 8px center}
-button.lg,.btn.lg{font-size:calc(16px*var(--fz,1));padding:9px 18px}
-button.on,.btn.on{background:var(--indigo-bg,#eef0ff);color:var(--indigo,#3b3fb6);border-color:var(--indigo,#3b3fb6)}
-/* tabs (P-457): a row that moves between pages or panes — pills, the current one filled. Put `tabbar` on the row; the
- current tab is .on, [aria-current], [aria-selected=true] or a label whose radio is checked. */
-.tabbar{display:flex;gap:6px;flex-wrap:wrap}
-.tabbar>a,.tabbar>button,.tabbar>label{font:600 calc(14px*var(--fz,1)) var(--body);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 14px;min-height:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
-.tabbar>a:hover,.tabbar>button:hover,.tabbar>label:hover{border-color:var(--indigo)}
-.tabbar>.on,.tabbar>[aria-current],.tabbar>[aria-selected=true],.tabbar>[aria-selected="true"]{background:var(--ink);color:var(--paper,#fff);border-color:var(--ink)}
-/* switch (P-457): a button that turns something on or off (aria-pressed) — a small track and knob before its label, no
- box, so it never reads as an action. Automatic for every aria-pressed button but a segment of a toggle. */
-button:where([aria-pressed]:not(.tabs>button):not(.dsync)){background:none;border:0;padding:2px 4px;min-height:0;color:var(--soft);display:inline-flex;align-items:center;gap:6px;border-radius:6px}
-button:where([aria-pressed]:not(.tabs>button):not(.dsync))::before{content:"";flex:none;width:24px;height:14px;border-radius:999px;background:var(--line) radial-gradient(circle at 7px 7px,var(--card) 4.5px,transparent 5px);transition:background .15s}
-button:where([aria-pressed=true]:not(.tabs>button):not(.dsync)){color:var(--ink)}
-button:where([aria-pressed=true]:not(.tabs>button):not(.dsync))::before{background:var(--indigo,#3b3fb6) radial-gradient(circle at 17px 7px,#fff 4.5px,transparent 5px)}
-button:where([aria-pressed]:not(.tabs>button):not(.dsync)):hover{background:none;color:var(--ink)}
-/* icon button (P-457): a bare glyph, no box — the ×, a fold, a copy icon */
-.ibtn{background:none;border:0;color:var(--soft);padding:2px 6px;border-radius:6px;font:inherit;min-height:0;cursor:pointer}.ibtn:hover{color:var(--ink);background:var(--line)}
+```style dark
+--review: #9296f5
+--paper: #141413
+--card: #1d1d1b
+--ink: #ecebe6
+--soft: #9c9a93
+--line: #33322f
+--indigo: #f0a35e
+--indigo-bg: #2e2419
+--slate: #9c9a93
+--slate-bg: #22211f
+--sun: #e5b454
+--sun-bg: #2c2515
+--leaf: #6cc08a
+--rose: #f08a92
+--rose-bg: #3a2022
+--god: #c5a0f5
+--god-bg: #2a2038
+--admin: #6cc3d5
+--admin-bg: #17292d
+--attn: #9296f5
```