/* shine-lint: off color type spacing shadow — the site-wide token source. Every Shine page loads this after its own styles; page-local variables are remapped here so one palette, one type pair and one header run across the site. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap");

html:root:not(#_){
 color-scheme:light;
 --s-bg:#fbfaf7;--s-surface:#ffffff;--s-raised:#f6f4ef;--s-ink:#15171c;--s-muted:#f1efea;--s-soft:#5c606b;
 --s-line:#e3e0d8;--s-rail:#e9e6de;--s-hl:#ffe14d;--s-hl-ink:#15171c;--s-danger:#b42318;
 --s-font:"Geist",ui-sans-serif,system-ui,sans-serif;--s-mono:"Geist Mono",ui-monospace,Menlo,monospace;
}
html:root[data-theme="dark"]:not(#_){
 color-scheme:dark;
 --s-bg:#0f1013;--s-surface:#16181d;--s-raised:#1a1c22;--s-ink:#ecebe6;--s-muted:#1d2026;--s-soft:#9a9da6;
 --s-line:#2a2d34;--s-rail:#1f2228;--s-hl:#e6c62e;--s-danger:#fca5a5;
}

/* Page-local variables, remapped per page (names collide with Tailwind tokens elsewhere). Skill page. */
html:root[data-page=skill]:not(#_){--bg:var(--s-bg);--bg-hex:var(--s-bg);--surface:var(--s-surface);--fg:var(--s-ink);--muted:var(--s-soft);--border:var(--s-line);--primary:var(--s-ink);--primary-fg:var(--s-bg);--font:var(--s-font);--mono:var(--s-mono)}
/* Registry page. */
html:root[data-page=registry]:not(#_){--bg:var(--s-bg);--surface:var(--s-surface);--fg:var(--s-ink);--border:var(--s-line);--surface-2:var(--s-raised);--border-strong:var(--s-line);--fg-muted:var(--s-soft);--fg-subtle:var(--s-soft);--accent:var(--s-ink);--ring:var(--s-ink)}
/* Gallery. */
html:root[data-page=gallery]:not(#_){--muted:var(--s-soft);--accent:var(--s-ink);--surface:var(--s-surface);--ink:var(--s-ink);--line:var(--s-line);--canvas:var(--s-bg)}

body{font-family:var(--s-font)!important;background:var(--s-bg)!important;color:var(--s-ink)}
code,pre,kbd{font-family:var(--s-mono)}
h1,h2,h3{font-family:var(--s-font)!important;font-style:normal!important;letter-spacing:-.03em}

/* The one header. chrome.js renders it in place of each page's own. */
.site-nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--s-bg) 85%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--s-line);font-family:var(--s-font)}
.site-nav-in{width:min(1200px,100% - 32px);margin-inline:auto;height:60px;display:flex;align-items:center;gap:32px}
.site-nav .brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;text-decoration:none;font-size:17px;color:var(--s-ink)}
.site-nav .brand .shine-mark{width:20px;height:20px;gap:3px}
.site-nav .brand .shine-mark i{width:3px;height:11px}
.site-nav .brand .shine-mark i:nth-child(2){height:20px}.site-nav .brand .shine-mark i:nth-child(3){height:16px}.site-nav .brand .shine-mark i:nth-child(4){height:8px}
.site-links{display:flex;gap:24px;font-size:14px}
.site-links a,.site-tools a{text-decoration:none;color:var(--s-soft)}
.site-links a:hover,.site-tools a:hover,.site-links a[aria-current=page]{color:var(--s-ink)}
.site-links a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--s-hl)}
.site-tools{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14px}
.site-tools a{padding:0 8px}
.site-theme{display:inline-grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;border-radius:8px;border:1px solid transparent;background:none;color:var(--s-soft);cursor:pointer}
.site-theme:hover{color:var(--s-ink);border-color:var(--s-line)}
html.theming *,html.theming *::before,html.theming *::after{transition:none!important}
@media(max-width:700px){.site-nav-in{gap:8px 12px;height:auto;flex-wrap:wrap;padding:10px 0}.site-links{order:3;width:100%;overflow-x:auto;gap:20px}.site-links a{white-space:nowrap}}

/* Library catalog: same paper, ink and type as the rest of the site. Example pages keep their consumer theme. */
.catalog-shell{--background:var(--s-bg);--foreground:var(--s-ink);--muted:var(--s-muted);--muted-foreground:var(--s-soft);--border:var(--s-line);--ink:var(--s-ink);--soft:var(--s-soft);--page:var(--s-bg);--paper:var(--s-surface);--line:var(--s-line);--brand:var(--s-ink);font-family:var(--s-font)!important;color:var(--s-ink)}
.catalog-shell .catalog-sidebar{background:var(--s-bg);color:var(--s-ink);border-right:1px solid var(--s-line);top:61px;height:calc(100vh - 61px)}
.catalog-shell .catalog-sidebar>.shine-brand,.catalog-shell .top-actions{display:none}
.catalog-shell .catalog-sidebar nav button{color:var(--s-soft)}
.catalog-shell .catalog-sidebar nav button:hover,.catalog-shell .catalog-sidebar nav button.selected,.catalog-shell .catalog-sidebar nav button.active{background:var(--s-muted);color:var(--s-ink)}
.catalog-shell .catalog-sidebar nav button>span{background:var(--s-surface);color:var(--s-soft);border:1px solid var(--s-line)}
.catalog-shell .sidebar-label{color:var(--s-soft);font-family:var(--s-mono)}
.catalog-shell .sidebar-note{background:var(--s-surface);color:var(--s-ink);border:1px solid var(--s-line)}
.catalog-shell .sidebar-note p,.catalog-shell .sidebar-foot{color:var(--s-soft)}
.catalog-shell .sidebar-orbit{display:none}
.catalog-shell .catalog-top{height:52px}
.catalog-shell .catalog-intro h1{font-weight:600}
.catalog-shell .catalog-intro em{color:inherit}
.catalog-shell .eyebrow,.catalog-shell .collection-index small{font-family:var(--s-mono);color:var(--s-soft)}
.catalog-shell .tiny-square{background:var(--s-hl)}
.catalog-shell .collection-index span{font-family:var(--s-font)}

/* Gallery chrome follows the site theme; captured frames keep their own white canvas. */
[data-page=gallery] button,[data-page=gallery] input,[data-page=gallery] select{background:var(--s-surface);color:var(--s-ink);border-color:var(--s-line)}
[data-page=gallery] .sidebar,[data-page=gallery] .toolbar,[data-page=gallery] .token,[data-page=gallery] .foundation-note,[data-page=gallery] dialog{background:var(--s-surface)}
[data-page=gallery] .toolbar input{background:var(--s-raised)}
[data-page=gallery] .sidebar{top:61px;height:calc(100vh - 61px)}
[data-page=gallery] .sidebar button{background:none}
[data-page=gallery] .sidebar button[aria-current]{color:var(--s-ink);background:var(--s-muted)}
[data-page=gallery] .sidebar button:hover{background:var(--s-muted)}
[data-page=gallery] .primary{background:var(--s-ink);color:var(--s-bg);border-color:var(--s-ink)}
[data-page=gallery] .family-link,[data-page=gallery] .inspect-frame{background:none}
.catalog-shell .sidebar-note a{color:var(--s-ink)}