:root{
  --paper:     oklch(97.8% 0.007 85);
  --surface:   oklch(99.4% 0.003 90);
  --well:      oklch(22% 0.02 50);
  --well-2:    oklch(27% 0.022 50);
  --well-ink:  oklch(88% 0.015 85);
  --ink:       oklch(25% 0.02 60);
  --ink-soft:  oklch(35% 0.02 55);
  --muted:     oklch(50% 0.02 60);
  --faint:     oklch(62% 0.018 65);
  --line:      oklch(88% 0.014 80);
  --line-2:    oklch(83% 0.018 75);
  --accent:    oklch(62% 0.13 45);
  --accent-2:  oklch(70% 0.11 50);
  --accent-wash: oklch(62% 0.13 45 / .1);
  --accent-line: oklch(62% 0.13 45 / .4);
  --ok:        oklch(58% 0.12 145);
  --warn:      oklch(62% 0.11 80);
  --radius:    12px;
  --radius-lg: 22px;
  --font-display:'Fraunces', Georgia, serif;
  --font-sans:'DM Sans', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper)}
body{color:var(--ink-soft);font-family:var(--font-sans);font-weight:380;font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:oklch(62% 0.13 45/.22)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,52px)}
.acc{color:var(--accent);font-style:italic}

/* ============ NAV — glass pill, terminal grammar ============ */
.navbar{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:2px;padding:6px 8px;border-radius:999px;background:oklch(100% 0 0/.55);backdrop-filter:blur(16px) saturate(1.3);border:1px solid oklch(100% 0 0/.8);box-shadow:0 10px 36px oklch(40% 0.04 60/.16);font-family:var(--font-mono);font-size:12.5px;max-width:calc(100vw - 24px)}
.navbar .ps{color:var(--accent);padding-left:8px}
.navbar .bin{font-weight:700;color:var(--ink);padding:8px 6px 8px 4px}
.navbar a.nl{color:var(--ink-soft);padding:8px 10px;border-radius:999px;transition:background 140ms,color 140ms;white-space:nowrap}
.navbar a.nl:hover{background:oklch(100% 0 0/.85);color:var(--ink)}
.navbar a.nl[aria-current="page"]{background:var(--accent-wash);color:var(--accent)}
.navbar .caret{display:inline-block;width:7px;height:14px;background:var(--accent);margin:0 4px 0 2px;animation:blink 1.1s steps(1) infinite;vertical-align:-2px}
@keyframes blink{50%{opacity:0}}
.lang-btn{background:none;border:1px solid var(--line-2);color:var(--ink-soft);font-family:var(--font-mono);font-size:11.5px;padding:5px 9px;border-radius:999px;transition:border-color 140ms,color 140ms;white-space:nowrap}
.lang-btn:hover{border-color:var(--accent);color:var(--accent)}
.gh-link{display:flex;align-items:center;gap:5px;padding:7px 11px;border-radius:999px;background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:11.5px;margin-left:2px}
@media(max-width:820px){.navbar a.nl{display:none}}

/* ============ HEAD ============ */
.top{padding:132px 0 20px}
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
h1{font-family:var(--font-display);font-weight:340;font-size:clamp(34px,5.4vw,58px);line-height:1.03;letter-spacing:-.022em;color:var(--ink);margin:14px 0 0;font-variation-settings:'SOFT' 30,'WONK' 1}
.lede{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:64ch;margin-top:18px}
.lede code,.body code{font-family:var(--font-mono);font-size:.88em;background:var(--accent-wash);color:var(--accent);padding:1px 5px;border-radius:5px}
.rule{height:1px;background:var(--line);margin:44px 0 0}

h2{font-family:var(--font-display);font-weight:360;font-size:clamp(24px,3vw,34px);line-height:1.12;letter-spacing:-.018em;color:var(--ink);font-variation-settings:'SOFT' 30}
.sec{padding:56px 0 0}
.sec-no{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--accent);text-transform:uppercase}
.body{font-size:15px;color:var(--ink-soft);max-width:66ch;margin-top:14px}

/* ============ THEME GRID ============ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px;margin-top:30px}
.tcard{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;transition:border-color 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
.tcard:hover{border-color:var(--line-2);box-shadow:0 14px 40px oklch(40% 0.04 60/.09)}
.tc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:15px 17px 12px}
.tc-name{font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--ink)}
.tc-tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
/* Reserve three lines so the mini-TUIs line up across a row no matter how
   long each blurb runs — a ragged grid reads as broken, not as variety. */
.tc-note{padding:0 17px 13px;font-size:13px;color:var(--muted);line-height:1.5;min-height:72px}
@media(max-width:700px){.tc-note{min-height:0}}

/* The mini-TUI: every color comes from the card's own custom properties,
   which are the theme's real slot values. One rule set, seven palettes. */
.mock{font-family:var(--font-mono);font-size:10.5px;line-height:1.55;background:var(--t-bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;min-height:158px}
.mock-side{width:40%;flex:none;background:var(--t-panel);border-right:1px solid var(--t-border);padding:8px 0}
.mock-main{flex:1;padding:8px 10px;min-width:0}
.m-hdr{color:var(--t-muted);font-weight:700;letter-spacing:.09em;padding:0 9px;margin-bottom:3px}
.m-hdr+.m-hdr{margin-top:9px}
.m-row{padding:1px 9px;color:var(--t-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-row.dim{color:var(--t-muted)}
.m-row.sel{background:var(--t-primary);color:var(--t-seltext);font-weight:700}
.m-dot{color:var(--t-accent)}
.m-top{display:flex;align-items:center;gap:6px;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--t-bordersub);color:var(--t-text)}
.m-branch{color:var(--t-accent)}
.m-state{margin-left:auto;color:var(--t-success)}
.m-add{color:var(--t-success)}
.m-del{color:var(--t-error)}
.m-ctx{color:var(--t-muted)}
.m-warn{color:var(--t-warning)}
.m-chip{display:inline-block;background:var(--t-element);color:var(--t-text);padding:0 5px;border-radius:3px}

.tc-cmd{display:flex;align-items:center;gap:7px;width:calc(100% - 34px);margin:0 17px 15px;background:var(--well);color:var(--well-ink);border:none;border-radius:9px;padding:9px 11px;font-family:var(--font-mono);font-size:11px;text-align:left}
.tc-cmd .ps{color:var(--accent-2);flex:none}
.tc-cmd-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.tc-copy{flex:none;color:oklch(62% 0.02 60);font-size:10px;border-left:1px solid oklch(38% 0.02 55);padding-left:8px}
.tc-cmd:hover .tc-copy{color:var(--accent-2)}
.sw{display:flex;gap:0;padding:12px 17px 15px}
.tcard .sw:last-child{padding-bottom:15px}
.sw i{flex:1;height:20px;border-radius:3px;position:relative}
.sw i:first-child{border-radius:5px 0 0 5px}
.sw i:last-child{border-radius:0 5px 5px 0}

/* ============ RECIPE / PUBLISH ============ */
.well{background:var(--well);color:var(--well-ink);border-radius:var(--radius-lg);padding:clamp(20px,3vw,30px);margin-top:26px;overflow-x:auto}
.well pre{font-family:var(--font-mono);font-size:12.5px;line-height:1.7;white-space:pre}
.well .k{color:oklch(78% 0.11 50)}
.well .s{color:oklch(76% 0.1 145)}
.well .c{color:oklch(58% 0.02 60)}
.steps{counter-reset:s;margin-top:26px;display:grid;gap:14px}
.step{counter-increment:s;position:relative;padding-left:42px;font-size:14.5px;color:var(--ink-soft);max-width:70ch}
.step::before{content:counter(s);position:absolute;left:0;top:-1px;width:27px;height:27px;border-radius:50%;background:var(--accent-wash);border:1px solid var(--accent-line);color:var(--accent);font-family:var(--font-mono);font-size:12px;display:grid;place-items:center}
.step b{color:var(--ink);font-weight:600}
.step code{font-family:var(--font-mono);font-size:.87em;background:var(--accent-wash);color:var(--accent);padding:1px 5px;border-radius:5px;word-break:break-all}

.copy-cmd{display:inline-flex;align-items:center;gap:9px;background:var(--well);color:var(--well-ink);border:none;border-radius:999px;padding:11px 18px;font-family:var(--font-mono);font-size:13px;margin-top:22px}
.copy-cmd .ps{color:var(--accent-2)}
.copy-cmd .hint{color:oklch(62% 0.02 60);font-size:11px;margin-left:4px}

.foot-dense{border-top:1px solid var(--line);background:var(--surface);padding:32px 0;margin-top:clamp(70px,9vw,110px);font-size:13px;color:var(--faint)}
.foot-dense p{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,52px);line-height:1.8}
.foot-dense .mark{font-family:var(--font-mono);color:var(--accent)}
.foot-dense a{border-bottom:1px solid var(--line-2);transition:color 140ms,border-color 140ms}
.foot-dense a:hover{color:var(--ink);border-color:var(--accent-line)}