/* khonsu — a quiet moonlit notebook. Plain CSS, system fonts, no build step. */

/* ---------- Tokens ---------- */
:root{
  color-scheme:dark;
  --bg:#090f16;--bg-band:#0c131b;--surface:#0e1721;--surface-2:#142131;--raised:#0f1923;
  --ink:#e3e9ef;--ink-soft:#c1ccd7;--muted:#98a7b7;--faint:#6d7f90;
  --accent:#afcee3;--accent-strong:#cfe3f0;--on-accent:#08111a;--accent-wash:rgba(175,206,227,.16);
  --line:#1f2d3a;--line-strong:#33485b;--field:#070c12;
  --tile-top:#1b3348;--tile-bottom:#0b141d;--tile-ink:#afcee3;
  --shadow:0 30px 90px rgba(0,0,0,.55);--shadow-soft:0 10px 28px rgba(0,0,0,.35);
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Avenir Next',Avenir,'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --gutter:48px;--header-h:88px;--header-stuck-h:64px;--radius:16px;--radius-s:8px;
  --rim:rgba(207,227,240,.1);--glass:rgba(9,15,22,.74);--spot:rgba(175,206,227,.075);
  --ease:cubic-bezier(.2,.7,.2,1);--danger:#e8a39b
}
html[data-theme=light]{
  color-scheme:light;
  --bg:#e9e6df;--bg-band:#e1ddd4;--surface:#f2efe9;--surface-2:#e4e0d7;--raised:#f3f0ea;
  --ink:#172430;--ink-soft:#2e4252;--muted:#4c5966;--faint:#7a8591;
  --accent:#2b5a78;--accent-strong:#1d4763;--on-accent:#f7f5f0;--accent-wash:rgba(43,90,120,.12);
  --line:#d4cfc4;--line-strong:#b3ac9e;--field:#fbfaf7;
  --shadow:0 26px 70px rgba(45,38,24,.2);--shadow-soft:0 8px 22px rgba(45,38,24,.14);--danger:#9b3a30;
  --rim:rgba(255,255,255,.95);--glass:rgba(233,230,223,.8);--spot:rgba(43,90,120,.06)
}

/* The pointer light on project cards fades in and out as a registered colour. */
@property --spot-now{syntax:'<color>';inherits:false;initial-value:rgba(0,0,0,0)}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-stuck-h) + 20px);scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* The page stays where it was while notes or tools are open. */
html:has(dialog[open]){overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{cursor:default}
button,a,input,summary,select{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:#52738b;color:#fff}
h1,h2,h3,p{margin-top:0}
em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)}
img{max-width:100%}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(1180px,calc(100% - 2 * var(--gutter)));margin-inline:auto}
.skip{position:absolute;top:-80px;inset-inline-start:16px;z-index:30;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:var(--radius-s)}
.skip:focus{top:12px}
.section{padding-block:104px}
.eyebrow{font:500 11px/1.8 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
.eyebrow>span{padding:0 .7em;color:var(--faint)}
/* A moon before each section label, waxing from the field notes to a full moon at Contact. */
:is(#field-notes,#projects,#shipped,#now)>.section-heading .eyebrow::before,#about .about-intro>.eyebrow::before,#contact .contact-intro>.eyebrow::before{content:"";display:inline-block;width:9px;height:9px;margin-inline-end:11px;border-radius:50%;vertical-align:-.5px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),inset var(--phase,-4px) 0 0 0 var(--accent)}
#field-notes{--phase:-2px}#projects{--phase:-3.5px}#about{--phase:-5px}#shipped{--phase:-6.5px}#now{--phase:-8px}#contact{--phase:-10px}
h2{font:400 clamp(36px,4.3vw,56px)/1.1 var(--sans);letter-spacing:-.035em;margin-bottom:0;text-wrap:balance}
h3{font-weight:500;letter-spacing:-.015em}
/* Keep the serif accent in the opening title. Section headings share one face. */
h2 em{font-family:inherit;font-style:normal;font-weight:inherit}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:40px}
.section-heading>p{max-width:34ch;margin:0 0 6px;color:var(--muted);font-size:15px;text-wrap:pretty}
.section-note{font-size:14px;line-height:1.75;color:var(--muted);margin:28px 0 0;max-width:72ch;text-wrap:pretty}
.section-note a{color:var(--ink);border-bottom:1px solid var(--line-strong);white-space:nowrap}
.section-note a:hover{border-color:var(--accent)}

/* ---------- Header ---------- */
/* Fixed, transparent over the hero and glass once the page scrolls beneath it (app.js watches a sentinel). */
.site-header{position:fixed;inset-inline:0;top:0;z-index:20;width:auto;margin:0;padding-inline:max(var(--gutter),calc((100% - 1180px) / 2));min-height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;border-bottom:1px solid transparent;transition:min-height .3s var(--ease),background-color .3s ease,border-color .3s ease}
html.header-stuck .site-header{min-height:var(--header-stuck-h);background:var(--glass);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.header-sentinel{position:absolute;top:0;left:0;width:1px;height:12px;pointer-events:none}
.wordmark{justify-self:start;display:inline-flex;align-items:center;font-size:23px;font-weight:600;letter-spacing:-.04em;white-space:pre}
.moon-mark{flex-shrink:0;width:.92em;height:.92em;margin-inline-end:.32em;fill:currentColor;transform:translateY(-.04em)}
.wordmark-dot{color:var(--accent)}
.site-header nav{display:flex;gap:6px;font-size:15px;color:var(--muted)}
.site-header nav a{position:relative;padding:8px 12px;border-radius:var(--radius-s);transition:color .18s ease}
/* The section in view: a small moon under its link. */
.site-header nav a[aria-current]{color:var(--ink)}
.site-header nav a[aria-current]::after{content:"";position:absolute;inset-inline-start:50%;bottom:1px;width:4px;height:4px;margin-inline-start:-2px;border-radius:50%;background:var(--accent)}
.site-header nav a:hover{color:var(--ink)}
.header-tools{justify-self:end;display:flex;align-items:center;gap:8px}
.lang-picker{position:relative;display:inline-flex;align-items:center;height:38px;padding:0 28px 0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-s);font:500 12px var(--mono);letter-spacing:.08em;color:var(--ink);transition:border-color .18s ease}
.lang-picker::after{content:"";position:absolute;right:12px;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:.7;pointer-events:none}
.lang-picker select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0}
.lang-picker:focus-within{outline:2px solid var(--accent);outline-offset:2px}
#theme-toggle{position:relative;isolation:isolate;overflow:visible;width:38px;height:38px;border:1px solid var(--line-strong);border-radius:50%;font-size:18px;line-height:1;display:grid;place-items:center;transition:border-color .18s ease}
@media(hover:hover){#theme-toggle:hover,.terminal-toggle:hover,.lang-picker:hover{border-color:var(--accent)}}
.terminal-toggle{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 10px 0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-s);font:500 13px var(--mono);transition:border-color .18s ease}
.terminal-toggle>span{color:var(--accent)}
kbd{border:1px solid var(--line-strong);border-radius:4px;padding:0 6px;font:12px var(--mono);color:var(--muted)}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(640px,88svh,780px);padding:calc(var(--header-h) + 80px) 0 112px}
.hero-landscape{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:61% center;opacity:.86;
  -webkit-mask-image:linear-gradient(to right,transparent 6%,#000 58%),linear-gradient(to bottom,transparent 0,#000 24%,#000 70%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 6%,#000 58%),linear-gradient(to bottom,transparent 0,#000 24%,#000 70%,transparent 100%);mask-composite:intersect}
html[data-theme=light] .hero-landscape{opacity:.5;filter:grayscale(1) invert(1) contrast(.82) brightness(1.04);mix-blend-mode:multiply}
h1{font:400 clamp(64px,8.2vw,112px)/1 var(--serif);letter-spacing:-.045em;margin:0 0 30px}
.hero-copy{max-width:36em;font-size:18px;line-height:1.75;color:var(--ink-soft);text-wrap:pretty}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 32px;margin-top:36px}
.primary-link{display:inline-flex;align-items:center;gap:18px;min-height:48px;padding:0 2px;font-size:15px;font-weight:500;border-bottom:1px solid var(--accent)}
.primary-link span{color:var(--accent);transition:transform .2s ease}
.primary-link:hover span{transform:translateY(3px)}
.text-button{min-height:44px;color:var(--muted);font-size:14px}
.text-button span{margin-left:8px;font-family:var(--mono);color:var(--accent)}
.text-button:hover{color:var(--ink)}

/* ---------- Project shelf ---------- */
.project-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin-bottom:24px}
.project-search{display:flex;align-items:center;gap:14px;flex:1 1 380px;max-width:520px}
.project-search>label{flex-shrink:0;font:500 13px var(--sans);color:var(--muted)}
.project-search-field{position:relative;flex:1;min-width:0}
.project-search-field::before{content:"";position:absolute;top:50%;inset-inline-start:15px;width:12px;height:12px;margin-top:-8px;border:1.5px solid var(--muted);border-radius:50%;pointer-events:none}
.project-search-field::after{content:"";position:absolute;top:50%;inset-inline-start:26px;width:1.5px;height:6px;margin-top:2px;border-radius:1px;background:var(--muted);transform:rotate(-45deg);pointer-events:none}
[dir=rtl] .project-search-field::after{transform:rotate(45deg)}
#project-search{width:100%;min-width:0;min-height:44px;padding:10px 14px;padding-inline:40px 84px;background:var(--field);border:1px solid var(--line-strong);border-radius:var(--radius-s);color:var(--ink);font:16px var(--sans);-webkit-appearance:none;appearance:none}
#project-search::placeholder{color:var(--muted);opacity:1}
#project-search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
#project-search:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#project-search-clear{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);min-height:32px;padding:0 10px;border-radius:6px;font:500 12px var(--mono);color:var(--muted)}
#project-search-clear:hover{color:var(--ink);background:var(--surface-2)}
#project-search-clear:disabled{visibility:hidden}
.project-search-field:has(#project-search-clear:disabled) #project-search{padding-inline-end:14px}
.project-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.project-filters button{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font:500 13px var(--sans);transition:color .18s ease,background-color .18s ease,border-color .18s ease}
.project-filters button:hover{color:var(--ink);border-color:var(--line-strong)}
.project-filters button[aria-pressed=true]{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
#project-count{margin-inline-start:8px;font:13px var(--sans);color:var(--muted);white-space:nowrap}
@media(min-width:761px){
  .project-filters{gap:2px;padding:4px;border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:inset 0 1px 0 var(--rim)}
  .project-filters button{min-height:36px;border-color:transparent}
  .project-filters button:not([aria-pressed=true]):hover{border-color:transparent;background:var(--surface-2)}
  #project-count{margin-inline:8px 12px}
}
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
/* Lit along the top edge. A fine pointer moves a soft light (--mx/--my from app.js) that fades in on hover. */
.project-card{position:relative;display:grid;grid-template:1fr/1fr;background:var(--surface) radial-gradient(460px circle at var(--mx,50%) var(--my,-45%),var(--spot-now),transparent 62%);border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 1px 0 var(--rim);container:card/inline-size;transition:border-color .25s ease,background-color .25s ease,translate .25s var(--ease),--spot-now .4s ease}
/* Fade the shadow layer instead of animating its blur. */
.project-card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--shadow-soft);opacity:0;pointer-events:none;transition:opacity .25s ease}
@media(hover:hover){
  .project-card:hover{border-color:var(--line-strong);--spot-now:var(--spot)}
  .js-motion .project-card:hover{translate:0 -2px}
  .js-motion .project-card:hover::after{opacity:1}
}
.project-details{grid-area:1/1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:"sigil title" "desc desc" "meta meta" "notes notes";column-gap:14px;align-content:start;width:100%;padding:22px 22px 18px;text-align:start;border-radius:inherit}
.project-details:focus-visible{outline-offset:3px;border-radius:var(--radius)}
.project-art,.project-info{display:contents}
.project-art>span{grid-area:sigil;align-self:start;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(150deg,var(--tile-top),var(--tile-bottom));box-shadow:inset 0 0 0 1px rgba(175,206,227,.16);color:var(--tile-ink);font:500 24px/1 var(--sans);letter-spacing:-.03em;white-space:nowrap}
[data-project=calculator] .project-art>span{font-size:18px;letter-spacing:-.02em}
[data-project=proof] .project-art>span,[data-project=bot] .project-art>span{font-size:22px}
/* The shelf shows the title and description. Decorative taglines repeat that context. */
.art-caption{display:none}
.art-handle{display:none}
.art-tag{display:block;font:500 10.5px/1.5 var(--mono);letter-spacing:.12em;color:var(--muted);overflow-wrap:anywhere}
.project-info h3{grid-area:title;align-self:center;margin:0;font-size:20px;line-height:1.25;text-wrap:balance}
.project-info p{grid-area:desc;margin:16px 0 0;font-size:15px;line-height:1.65;color:var(--ink-soft);text-wrap:pretty}
/* The tech line sits on the card's last free row, just above Notes, so it lines up across a row of cards. */
.project-meta{grid-area:meta;align-self:end;display:flex;flex-wrap:wrap;gap:2px 0;margin-top:14px;font:13px/1.6 var(--sans);color:var(--muted)}
.project-meta{column-gap:14px}
.project-meta>span:first-child{font-size:11px;line-height:1.9;letter-spacing:.02em;color:var(--muted)}
.dialog-preview-hidden{display:none!important}
.details-label{grid-area:notes;justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:14px;font-size:14px;font-weight:500;color:var(--ink)}
.details-label::after{content:"→";content:"→"/"";color:var(--accent);transition:transform .2s ease}
@media(hover:hover){.project-details:hover .details-label::after{transform:translateX(3px)}}
.project-actions{grid-area:1/1;align-self:end;justify-self:end;position:relative;z-index:1;margin:0 0 18px;margin-inline-end:18px}
.project-live,.dialog-link{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 15px;border:1px solid var(--line-strong);border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.project-live:hover,.dialog-link:hover{border-color:var(--accent);color:var(--accent)}
.project-live[data-kind=live],.dialog-link[data-kind=live]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.project-live[data-kind=live]:hover,.dialog-link[data-kind=live]:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent)}
#project-empty{padding:32px 0 40px;border-block:1px solid var(--line);color:var(--muted)}
#project-empty p{margin-bottom:16px}
#project-reset,#project-copy-link{min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;font:500 13px var(--sans)}
#project-reset:hover,#project-copy-link:hover{border-color:var(--accent)}

/* ---------- About ---------- */
.about-section{background:var(--bg-band);border-block:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px}
.about-intro img{display:block;border-radius:50%;margin:4px 0 22px;box-shadow:0 0 0 1px var(--line-strong),0 0 0 8px var(--accent-wash)}
.about-intro h2{margin-bottom:28px}
.about-intro>p:not(.eyebrow),.work-detail>p:not(.eyebrow){font-size:16px;line-height:1.8;color:var(--ink-soft);max-width:58ch;text-wrap:pretty}
.interest-line{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font:13px var(--sans);color:var(--muted)}
.interest-line span::before{content:"☾ ";color:var(--accent)}
.work-detail{padding-top:4px}
/* Underlined like the other inline links, so the link does not rely on colour alone (in some themes and
   languages it is close to the eyebrow text). */
.work-detail .eyebrow a{color:var(--accent);border-bottom:1px solid var(--line-strong)}
.work-detail .eyebrow a:hover{border-color:var(--accent)}
.work-detail h3{font:400 36px/1.18 var(--sans);letter-spacing:-.02em;margin-bottom:24px}
.practice{margin-top:28px;border-bottom:1px solid var(--line)}
.practice details{border-top:1px solid var(--line)}
.practice summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;cursor:pointer;list-style:none;font-size:15px;font-weight:500}
.practice summary::-webkit-details-marker{display:none}
.practice summary span{color:var(--accent);font:18px var(--mono);transition:transform .2s ease}
.practice details[open] summary span{transform:rotate(45deg)}
.practice details p{margin:0;padding:0 0 18px;font-size:15px;line-height:1.75;color:var(--muted)}

/* ---------- Now ---------- */
.now-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.now-grid article{border-top:1px solid var(--line-strong);padding-top:24px}
.topic-symbol{display:grid;place-items:center;width:44px;height:44px;margin-bottom:20px;border-radius:12px;background:linear-gradient(150deg,var(--tile-top),var(--tile-bottom));box-shadow:inset 0 0 0 1px rgba(175,206,227,.16);color:var(--tile-ink);font:22px/1 var(--serif)}
.now-grid h3{font-size:19px;margin-bottom:10px}
.now-grid p{margin:0;font-size:15px;line-height:1.75;color:var(--muted);text-wrap:pretty}
.date-note{padding-bottom:8px;font:500 11px var(--sans);letter-spacing:.08em;color:var(--muted)}
.now-notes{margin-top:44px;padding-top:4px}
.now-notes .section-note{margin-top:12px}

/* ---------- Contact ---------- */
.contact-section{border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:72px;align-items:start}
.contact-section h2{font-size:clamp(40px,5vw,64px)}
.social-links{display:grid;margin-top:40px;border-top:1px solid var(--line)}
.social-links a,.social-links button{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;border-bottom:1px solid var(--line);font-size:16px;text-align:start;transition:color .2s ease,border-color .2s ease}
.social-links a:hover,.social-links button:hover{color:var(--accent);border-bottom-color:var(--line-strong)}
.social-links span{font:13px var(--mono);color:var(--muted)}
/* The outside-link arrow matches the text it follows; only the Discord handle stays monospace. */
.social-links a>span[aria-hidden=true]{font:15px/1 var(--sans);transition:color .2s ease}
.social-links a:hover>span[aria-hidden=true]{color:var(--accent)}
.copy-status{min-height:24px;margin:14px 0 0;font-size:14px;color:var(--muted)}

/* Forms: the page form and the Email panel share one quiet style. */
.guide-contact form{display:grid;gap:6px}
.guide-contact form>label:first-child{margin-top:0}
.guide-contact label{margin-top:10px;font-size:14px;font-weight:500;color:var(--ink)}
.guide-contact input,.guide-contact textarea{width:100%;min-width:0;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--radius-s);background:var(--field);color:var(--ink);font:16px/1.5 var(--sans);transition:border-color .15s ease}
.guide-contact :is(input,textarea):user-invalid{border-color:var(--danger)}
.guide-contact textarea{min-height:150px;resize:vertical;max-height:320px}
.guide-contact input:focus-visible,.guide-contact textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.guide-contact .contact-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.contact-notice{margin:6px 0 4px;font-size:13px;line-height:1.6;color:var(--muted)}
.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:4px}
.contact-actions button{min-height:46px;padding:0 22px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;transition:background-color .15s ease}
@media(hover:hover){.contact-actions button:hover{background:var(--accent-strong)}}
.contact-actions button:disabled{opacity:.6;cursor:wait}
.contact-actions a{font-size:14px;color:var(--ink);border-bottom:1px solid var(--line-strong);padding:4px 0}
.contact-actions a:hover{border-color:var(--accent)}
.contact-status{margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--ink)}
.contact-status:empty{display:none}
.page-contact{padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 1px 0 var(--rim)}
.page-contact h3{margin:0 0 10px;font:500 26px/1.2 var(--sans);letter-spacing:-.01em}

/* ---------- Footer ---------- */
footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;border-top:1px solid var(--line);padding:28px 0 100px}
footer>.wordmark{font-size:18px}
footer>span{justify-self:center;font:13px var(--sans);color:var(--muted)}
footer>#motion-toggle{justify-self:end;min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font:13px var(--sans);color:var(--muted);text-align:end;transition:color .18s ease,border-color .18s ease}
footer>#motion-toggle:hover{color:var(--ink);border-color:var(--line-strong)}

/* ---------- Dialogs ---------- */
dialog{color:var(--ink);background:var(--raised);border:1px solid var(--line-strong);border-radius:16px;padding:28px 30px 26px;width:min(640px,calc(100% - 32px));max-width:none;max-height:min(88dvh,880px);box-shadow:var(--shadow),inset 0 1px 0 var(--rim);overscroll-behavior:contain;position:fixed;inset:0;margin:auto;overflow:auto}
dialog::backdrop{background:rgba(2,7,12,.74)}
/* Thin, theme-coloured scrollbars where browsers always show them (e.g. macOS "always" setting). */
dialog,.panel-body{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
html[data-theme=light] dialog::backdrop{background:rgba(30,36,40,.34)}
dialog[open]{animation:dialog-in .22s ease-out}
/* Where supported, dialogs fade in and out, and the backdrop fades with them. */
@supports (transition-behavior:allow-discrete){
  dialog[open]{animation:none}
  dialog{opacity:0;transform:translateY(8px) scale(.985);transition:opacity .18s ease,transform .18s ease,overlay .18s ease allow-discrete,display .18s ease allow-discrete}
  dialog[open]{opacity:1;transform:none;transition-duration:.24s;transition-timing-function:cubic-bezier(.2,.7,.2,1)}
  @starting-style{dialog[open]{opacity:0;transform:translateY(10px) scale(.985)}}
  dialog::backdrop{opacity:0;transition:opacity .18s ease,overlay .18s ease allow-discrete,display .18s ease allow-discrete}
  dialog[open]::backdrop{opacity:1;transition-duration:.24s}
  @starting-style{dialog[open]::backdrop{opacity:0}}
}
/* Hand-offs between dialogs (tab switch, terminal to notes) never fade two layers at once. */
.dialog-instant,.dialog-instant::backdrop,.panel-switch,.panel-switch::backdrop{transition:none!important;animation:none!important}
.panel-switch[open] .panel-body,.panel-switch[open] .panel-composer{animation:panel-swap .22s var(--ease) both}
@keyframes panel-swap{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.close-button{flex-shrink:0;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--muted);font-size:16px;line-height:1}
/* Only real pointers get the filled hover: after a tap on the header, a panel's close button would open looking pressed. */
@media(hover:hover){.close-button:hover{color:var(--ink);background:var(--surface-2)}}
.close-button:focus-visible{outline-offset:0;border-radius:50%}
.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:-8px 0 16px;margin-inline-end:-10px}
.dialog-top .eyebrow{margin:0}
#project-category{margin:0 0 8px;font:11px/1.6 var(--sans);letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
#project-title{font:500 clamp(28px,5vw,36px)/1.2 var(--sans);letter-spacing:-.02em;margin-bottom:14px}
#project-description{font-size:17px;line-height:1.65;color:var(--ink-soft);margin-bottom:20px;text-wrap:pretty}
.project-dialog-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.project-dialog-actions:not(:has(a:not([hidden]))){display:none}
#project-preview{display:block;width:100%;height:auto;margin:24px 0 4px;border:1px solid var(--line);border-radius:10px}
#project-notes{margin-top:22px;font-size:15px;line-height:1.8;color:var(--ink-soft)}
#project-notes p{margin-bottom:14px;text-wrap:pretty}
.project-share{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
#project-share-status{font-size:14px;color:var(--muted)}
#project-share-address{width:100%;min-width:0;padding:10px 12px;background:var(--field);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-s);font:14px var(--mono)}

/* ---------- Tool panels: one frame for Terminal, Ask khonsu and Email ---------- */
.tool-panel{padding:0;width:min(680px,calc(100% - 32px));height:min(640px,calc(var(--panel-height,100dvh) - 48px));max-height:calc(var(--panel-height,100dvh) - 24px);overflow:hidden}
.tool-panel{flex-direction:column}
.tool-panel[open]{display:flex}
.panel-head{flex-shrink:0;display:flex;align-items:center;gap:8px;padding-block:0;padding-inline:14px 10px;border-bottom:1px solid var(--line)}
.panel-nav{flex:1;min-width:0;display:flex;align-self:stretch;gap:2px}
.panel-nav button{position:relative;min-height:54px;padding:6px 14px;color:var(--muted);font-size:14px;font-weight:500;line-height:1.25;transition:color .15s ease}
.panel-nav button::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:transparent}
.panel-nav button[aria-current=page]{color:var(--ink)}
.panel-nav button[aria-current=page]::after{background:var(--accent)}
.panel-nav button:hover{color:var(--ink)}
.panel-nav button:focus-visible{outline-offset:-6px}
.panel-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 26px 18px}
.panel-kicker{margin:0 0 10px;font:12px var(--mono);color:var(--muted)}
.panel-kicker>span:first-child{color:var(--accent)}
.panel-lead{margin:0 0 6px;font:500 24px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.panel-composer{flex-shrink:0;padding:12px 16px 10px;border-top:1px solid var(--line);background:var(--bg)}
html[data-theme=light] .panel-composer{background:var(--bg-band)}
.composer-field{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 14px;background:var(--field);border:1px solid var(--line-strong);border-radius:10px;transition:border-color .15s ease,box-shadow .15s ease}
.composer-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.composer-field input{flex:1;width:100%;min-width:0;min-height:42px;padding:6px 0;border:0;background:transparent;color:var(--ink);font:16px var(--mono);outline:none}
#guide-question{font-family:var(--sans)}
.composer-field input::placeholder{color:var(--muted);opacity:1}
.composer-field>button{flex-shrink:0;width:42px;height:42px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:20px;line-height:1}
.composer-field>button:hover{background:var(--accent-strong)}
.composer-field>button{transition:background-color .15s ease,opacity .15s ease}
/* While a reply is on its way, send and suggestions rest; aria-disabled keeps them focusable. */
.composer-field>button[aria-disabled=true]{opacity:.45;cursor:default}
.composer-field>button[aria-disabled=true]:hover{background:var(--accent)}
.composer-field>button:focus-visible{outline-offset:2px}
.panel-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:34px;margin:6px 0 0;font:12px/1.5 var(--mono);color:var(--muted)}
.panel-foot p{margin:0}
.panel-foot button{flex-shrink:0;margin-left:auto;padding:6px 2px;font:12px var(--mono);color:var(--muted)}
.panel-foot button:hover{color:var(--ink)}
.terminal-shortcuts button,#terminal-suggestions button,.guide-suggestions button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);font-size:13px;white-space:nowrap;transition:border-color .15s ease,color .15s ease}
.terminal-shortcuts button:hover,#terminal-suggestions button:hover,.guide-suggestions button:hover{border-color:var(--accent);color:var(--accent)}
.terminal-shortcuts button,#terminal-suggestions button{font-family:var(--mono)}
.terminal-shortcuts button::before,#terminal-suggestions button::before{content:"❯";content:"❯"/"";color:var(--accent);font-size:11px}

/* Terminal */
.terminal-welcome span{display:block;margin-top:8px;font:15px/1.6 var(--sans);letter-spacing:0;color:var(--muted);max-width:52ch}
.terminal-shortcuts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
#terminal-output{font:13px/1.75 var(--mono)}
.terminal-entry{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-soft);white-space:pre-wrap;overflow-wrap:anywhere}
.terminal-entry>strong{display:block;margin-bottom:6px;color:var(--accent);font-weight:500}
.terminal-entry a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.terminal-entry a:hover{text-decoration-color:var(--accent)}
.terminal-help{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:5px 20px;margin:2px 0 0;white-space:normal}
.terminal-help dt{color:var(--ink)}
.terminal-help dd{margin:0;font:14px/1.7 var(--sans);color:var(--muted)}
.terminal-projects{display:grid;gap:6px;margin-top:12px;white-space:normal}
.terminal-project{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;width:100%;padding:11px 14px;text-align:start;border:1px solid var(--line);border-radius:10px;background:var(--surface);transition:border-color .15s ease}
.terminal-project:hover{border-color:var(--accent)}
.terminal-project>span{color:var(--ink);font:500 15px/1.4 var(--sans)}
.terminal-project>small{grid-column:1;margin-top:3px;color:var(--muted);font:13px/1.55 var(--sans)}
.terminal-project::after{content:"→";content:"→"/"";grid-column:2;grid-row:1/3;align-self:center;color:var(--accent);font-family:var(--sans)}
#terminal-form label{color:var(--accent);font:15px var(--mono)}
#terminal-suggestions{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 10px;padding:0 16px}
#terminal-suggestions::-webkit-scrollbar{display:none}

/* Ask khonsu */
.guide-intro{font-size:14px;color:var(--muted)}
.guide-intro p{margin:0 0 8px;text-wrap:pretty}
.guide-intro p:not(.panel-lead){max-width:54ch;line-height:1.6}
.guide-language{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13px}
#guide-language{min-height:34px;padding:0 10px;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-s);font:13px var(--sans)}
#guide-log{margin-top:8px}
.guide-message{margin:12px 0 0;padding:12px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:15px;line-height:1.65;overflow-wrap:anywhere}
.guide-message p{margin:0;text-wrap:pretty;white-space:pre-line}
.guide-message p+p{margin-top:.6em}
/* Fallback replies say so first, quietly. */
.guide-message .guide-note{font-size:13px;line-height:1.55;color:var(--muted)}
.guide-message .guide-note+p{margin-top:.4em}
/* Waiting for a reply: a still crescent and the waiting label, never a looping loader. */
.guide-message.pending{display:flex;align-items:center;gap:9px;width:fit-content;color:var(--muted)}
.guide-message.pending::before{content:"☾";content:"☾"/"";flex-shrink:0;color:var(--accent);font-size:17px;line-height:1}
.guide-message.visitor{margin-left:auto;max-width:82%;width:fit-content;background:var(--surface-2);border-color:transparent;color:var(--ink);border-end-end-radius:4px}
.guide-message.guide{border-end-start-radius:4px}
.guide-action{display:inline-flex;align-items:center;min-height:36px;margin-top:6px;color:var(--accent);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px}
.guide-suggestions{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 10px;padding:0 16px}
.guide-suggestions::-webkit-scrollbar{display:none}
.guide-suggestions button[aria-disabled=true]{opacity:.5;cursor:default}
.guide-suggestions button[aria-disabled=true]:hover{border-color:var(--line-strong);color:inherit}
.guide-discovery{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);gap:8px;align-items:end;margin-bottom:9px}
.guide-path-launch{min-height:39px;padding:7px 11px;border:1px solid var(--accent);border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--ink);font:500 12px/1.35 var(--sans);text-align:center}
.guide-path-launch:hover:not([aria-disabled=true]){background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.guide-path-launch[aria-disabled=true]{opacity:.55;cursor:default}
.guide-project-search{position:relative;display:grid;gap:4px;min-width:0}
.guide-project-search label{color:var(--muted);font:11px/1.3 var(--mono)}
.guide-project-search input{width:100%;min-width:0;height:38px;padding:0 11px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);color:var(--ink);font:13px/1.3 var(--sans)}
.guide-project-search input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.guide-project-results{position:absolute;z-index:5;inset-inline:0;bottom:calc(100% + 7px);display:grid;max-height:min(266px,40dvh);overflow:auto;overscroll-behavior:contain;padding:5px;border:1px solid var(--line-strong);border-radius:11px;background:var(--surface);box-shadow:0 12px 32px #0003}
.guide-project-results[hidden]{display:none}
.guide-project-option{display:grid;gap:3px;width:100%;min-height:46px;padding:8px 10px;padding-inline-start:9px;border:0;border-inline-start:2px solid transparent;border-radius:7px;background:transparent;color:var(--ink);text-align:start}
.guide-project-option span{font:500 13px/1.3 var(--sans)}
.guide-project-option small{color:var(--muted);font:10px/1.4 var(--mono)}
.guide-project-option:hover{background:var(--surface-2)}
/* The arrow-key position must read at a glance: tinted row, accent edge and title. */
.guide-project-option[aria-selected=true]{background:color-mix(in srgb,var(--accent) 12%,var(--surface));border-inline-start-color:var(--accent);border-start-start-radius:3px;border-end-start-radius:3px}
.guide-project-option[aria-selected=true] span{color:var(--accent)}
.guide-project-empty{padding:9px 10px;color:var(--muted);font-size:12px}
.guide-project-option:focus-visible,.guide-path-launch:focus-visible,.guide-path-choice:focus-visible,.guide-path-back:focus-visible,.guide-comparison-explain:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The tour sits in the reply itself, separated by a rule rather than a second card. */
.guide-path{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.guide-path-question{margin:0 0 9px;color:var(--muted);font-size:13px}
.guide-path-question.is-subject{color:var(--ink);font-weight:500}
.guide-path-choices{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.guide-path-choice{min-height:38px;padding:7px 11px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-2);color:var(--ink);font:500 13px/1.35 var(--sans);text-align:start}
.guide-path-choice:hover:not([aria-disabled=true]){border-color:var(--accent);color:var(--accent)}
.guide-path-back{min-height:38px;padding:7px 6px;border:0;background:none;color:var(--muted);font:500 12px/1.35 var(--sans);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.guide-path-back:hover{color:var(--accent);text-decoration-color:currentColor}
:is(.guide-path-choice,.guide-comparison-explain,.guide-project-option)[aria-disabled=true]{opacity:.5;cursor:default}
.guide-recommendations{min-width:0;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);overflow:hidden}
.guide-recommendation-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.guide-recommendation-title{min-width:0;margin:0;color:var(--muted);font:500 11px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.guide-recommendation-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
.guide-recommendation-controls button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--ink);font:22px/1 var(--sans)}
.guide-recommendation-controls .guide-recommendation-compare{display:inline-flex;width:auto;min-width:92px;height:38px;align-items:center;justify-content:center;padding:0 10px;border-radius:999px;font:500 12px/1.2 var(--sans);white-space:nowrap}
.guide-recommendation-controls button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.guide-recommendation-controls button:disabled{opacity:.38;cursor:default}
.guide-recommendation-position{min-width:42px;color:var(--muted);font:12px/1.4 var(--mono);text-align:center;direction:ltr;unicode-bidi:isolate}
.guide-recommendation-track{display:flex;gap:9px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;direction:ltr;padding:1px 0 7px}
.guide-recommendation-card{display:flex;flex:0 0 min(86%,420px);flex-direction:column;min-width:0;min-height:178px;padding:13px;border:1px solid var(--line);border-radius:10px;background:var(--surface);scroll-snap-align:start;scroll-snap-stop:always;text-align:start}
.guide-recommendation-meta{margin:0 0 6px;color:var(--muted);font:11px/1.4 var(--mono);letter-spacing:.025em}
.guide-recommendation-card h5{margin:0 0 6px;color:var(--ink);font:500 16px/1.35 var(--sans)}
.guide-recommendation-description{margin:0 0 12px;color:var(--muted);font:13px/1.55 var(--sans)}
.guide-recommendation-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:auto}
.guide-recommendation-actions :is(button,a){display:inline-flex;align-items:center;min-height:38px;padding:0;border:0;background:none;color:var(--accent);font:500 13px/1.4 var(--sans);text-decoration:underline;text-underline-offset:3px;text-align:start}
.guide-recommendation-actions :is(button,a):focus-visible,.guide-recommendation-controls button:focus-visible,.guide-recommendation-track:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.guide-recommendation-track:focus-visible{border-radius:8px}
.guide-recommendation-actions a:hover,.guide-recommendation-actions button:hover{color:var(--ink)}
.guide-recommendation-actions .guide-recommendation-compare-toggle[aria-pressed=true]{color:var(--accent);text-decoration-thickness:2px}
.guide-recommendation-actions button:disabled{opacity:.42;cursor:default}
.guide-recommendation-why{margin:0 0 9px;color:var(--muted);font:12px/1.5 var(--sans)}
.guide-recommendation-why summary{width:max-content;max-width:100%;cursor:pointer;color:var(--accent);text-underline-offset:3px}
.guide-recommendation-why p{margin:6px 0 0}
.guide-recommendation-why summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.guide-comparison{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);container-type:inline-size}
.guide-comparison[hidden]{display:none}
.guide-comparison>h5{margin:0 0 9px;color:var(--muted);font:500 11px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.guide-comparison-hint{margin:0 0 8px;color:var(--muted);font-size:12px;line-height:1.5}
.guide-comparison-scroll{max-width:100%;overflow:auto;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:9px;background:var(--surface);scrollbar-color:var(--line-strong) transparent}
.guide-comparison-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Wide panels: every chosen project fits side by side (fixed columns, no sideways scroll). */
.guide-comparison-table{width:100%;min-width:440px;table-layout:fixed;border-collapse:separate;border-spacing:0;text-align:start;font-size:12.5px;line-height:1.5}
.guide-comparison-table :is(th,td){padding:10px 11px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:break-word}
.guide-comparison-table :is(th,td)+:is(th,td){border-inline-start:1px solid var(--line)}
.guide-comparison-table thead th{background:var(--surface-2);color:var(--ink);font:600 13px/1.35 var(--sans);text-align:start}
.guide-comparison-table thead th:first-child{width:6.75rem;color:var(--muted);font:500 11px/1.45 var(--mono)}
.guide-comparison-table tbody th[scope=row]{position:sticky;inset-inline-start:0;z-index:1;background:var(--surface-2);color:var(--muted);font:500 11px/1.45 var(--mono);text-align:start}
.guide-comparison-table tbody tr:last-child :is(th,td){border-bottom:0}
.guide-comparison-table td{color:var(--ink-soft)}
.guide-comparison-stage{display:block;color:var(--muted);font:10.5px/1.45 var(--mono);letter-spacing:.03em}
.guide-comparison-tech{display:block;margin-top:3px;color:var(--ink)}
.guide-comparison-actions{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.guide-comparison-actions :is(a,button){display:inline-flex;align-items:center;min-height:32px;padding:0;border:0;background:none;color:var(--accent);font:500 12.5px/1.35 var(--sans);text-align:start;text-decoration:underline;text-underline-offset:3px}
.guide-comparison-actions :is(a,button):hover{color:var(--ink)}
.guide-comparison-actions :is(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
/* Narrow panels: one block per fact, each chosen project listed under it, so the facts still line up. */
.guide-comparison-stack{display:none}
.guide-comparison-group{padding-block:9px}
.guide-comparison-group+.guide-comparison-group{border-top:1px solid var(--line)}
.guide-comparison-group:first-child{padding-top:5px}
.guide-comparison-group h6{margin:0 0 7px;color:var(--muted);font:500 11px/1.45 var(--mono)}
.guide-comparison-group dl{display:grid;gap:9px;margin:0}
.guide-comparison-group dt{color:var(--ink);font:600 13px/1.35 var(--sans)}
.guide-comparison-group dd{margin:2px 0 0;color:var(--ink-soft);font-size:13px;line-height:1.5;overflow-wrap:break-word}
.guide-comparison-group .guide-comparison-actions{flex-flow:row wrap;align-items:center;gap:2px 14px}
@container (max-width:470px){.guide-comparison-scroll{display:none}.guide-comparison-stack{display:block}}
.guide-comparison-explain{min-height:36px;margin-top:9px;padding:0 11px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--accent);font:500 12px/1.3 var(--sans)}
.guide-comparison-explain:hover:not([aria-disabled=true]){border-color:var(--accent);color:var(--ink)}

/* Email */
#email-panel-content .page-contact{padding:0;background:none;border:0;border-radius:0;box-shadow:none}
#email-panel-content .page-contact h3{font-size:24px;line-height:1.3;margin-bottom:6px}

/* Launcher */
#guide-launcher{position:fixed;inset-inline-end:22px;bottom:22px;z-index:5;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 15px;border:1px solid var(--line-strong);border-radius:999px;background:var(--raised);color:var(--ink);font:500 13px var(--sans);box-shadow:var(--shadow-soft);transition:border-color .2s ease}
@media(hover:hover){#guide-launcher:hover{border-color:var(--accent)}}
/* Steps aside while a control sits underneath (guide.js). Keyboard focus always brings it back. */
#guide-launcher{transition:border-color .2s ease,opacity .2s ease,translate .2s ease}
#guide-launcher.launcher-yield{opacity:0;translate:0 12px;pointer-events:none}
#guide-launcher.launcher-yield:focus-visible{opacity:1;translate:none;pointer-events:auto}
.launcher-mark{font-size:19px;line-height:1;color:var(--accent)}

/* ---------- Motion: finite, optional, never looping ---------- */
.entrance{animation:arrive .75s ease-out both}
.hero h1{animation-delay:.07s}.hero-copy{animation-delay:.14s}.hero-actions{animation-delay:.21s}
.js-motion .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js-motion .project-card.reveal{transition:opacity .6s ease,transform .6s ease,border-color .25s ease,background-color .25s ease,translate .25s var(--ease),--spot-now .4s ease}
/* Cards in one row settle one after another, only on their first reveal. */
.js-motion .project-card.reveal:nth-child(3n+2){transition-delay:70ms,70ms,0s,0s,0s,0s}
.js-motion .project-card.reveal:nth-child(3n){transition-delay:140ms,140ms,0s,0s,0s,0s}
/* While searching, cards that come back fade in instead of popping. */
.js-motion .project-grid[data-filtered] .project-card.visible{animation:card-in .24s cubic-bezier(.2,.7,.2,1)}
@keyframes card-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Filter chips morph the grid (View Transitions where supported). */
.project-card:nth-child(1){view-transition-name:pc-1}.project-card:nth-child(2){view-transition-name:pc-2}.project-card:nth-child(3){view-transition-name:pc-3}.project-card:nth-child(4){view-transition-name:pc-4}.project-card:nth-child(5){view-transition-name:pc-5}.project-card:nth-child(6){view-transition-name:pc-6}.project-card:nth-child(7){view-transition-name:pc-7}.project-card:nth-child(8){view-transition-name:pc-8}.project-card:nth-child(9){view-transition-name:pc-9}.project-card:nth-child(10){view-transition-name:pc-10}.project-card:nth-child(11){view-transition-name:pc-11}.project-card:nth-child(12){view-transition-name:pc-12}.project-card:nth-child(13){view-transition-name:pc-13}
::view-transition-group(*){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(*){animation-duration:.16s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
/* Terminal and guide output arrive softly. */
.js-motion .terminal-entry,.js-motion .guide-message{animation:entry-in .22s cubic-bezier(.2,.7,.2,1) both}
@keyframes entry-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Opened disclosures settle in once, alongside the height change where supported. */
.js-motion :is(.practice details,.case-study)[open]>:not(summary),.js-motion .skill-card details[open]>pre{animation:entry-in .28s var(--ease) .04s both}
/* One small press for buttons and pills, only while motion is allowed. Instant, so nothing lingers. */
.js-motion :is(.project-live,.dialog-link,.project-filters button,.replay-controls button:not(:disabled),.field-links button,#project-reset,#project-copy-link,.contact-actions button:not(:disabled),.listening-listen,.composer-field>button:not([aria-disabled=true]),.terminal-shortcuts button,#terminal-suggestions button,.guide-suggestions button:not([aria-disabled=true]),#motion-toggle,.terminal-toggle,.listening-close):active{scale:.97}
/* The waiting line appears only if a reply takes longer than a moment, so quick answers never flash it. */
.js-motion .guide-message.pending{animation:entry-in .2s cubic-bezier(.2,.7,.2,1) .3s both}
/* The About accordion opens by height where the browser can interpolate it. */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .practice details::details-content,.case-study::details-content{block-size:0;overflow:clip;transition:block-size .3s var(--ease),content-visibility .3s allow-discrete}
  .practice details[open]::details-content,.case-study[open]::details-content{block-size:auto}
  /* Separate rules: an unknown pseudo-element must not invalidate the main motion switches. */
  .motion-off ::details-content,.page-hidden ::details-content{transition:none!important}
}
@supports (interpolate-size:allow-keywords){@media(prefers-reduced-motion:reduce){html:not(.motion-force-on) ::details-content{transition:none!important}}}
.js-motion .reveal.visible{opacity:1;transform:none}
@keyframes arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes dialog-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.motion-off *,.motion-off *::before,.motion-off *::after,.page-hidden *,.page-hidden *::before,.page-hidden *::after,.motion-off ::backdrop,.page-hidden ::backdrop{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.motion-off .reveal{opacity:1;transform:none}
.motion-off{scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){
  html:not(.motion-force-on){scroll-behavior:auto}
  html:not(.motion-force-on) *,html:not(.motion-force-on) *::before,html:not(.motion-force-on) *::after,html:not(.motion-force-on) ::backdrop{animation:none!important;transition:none!important}
  html:not(.motion-force-on) .reveal{opacity:1;transform:none}
}

/* ---------- Theme shift: one small arc at the control, a short colour fade elsewhere ---------- */
#theme-toggle::before{content:"";position:absolute;inset:-7px;pointer-events:none;border:1px solid #8dbbd6;border-radius:50%;opacity:0;transform:scale(.72);z-index:-1}
#theme-toggle::after{content:"";position:absolute;pointer-events:none;inset:auto -7px -9px auto;width:17px;height:27px;background:#b8dced;clip-path:polygon(58% 0,18% 49%,48% 45%,23% 100%,84% 38%,54% 43%);opacity:0;transform:rotate(8deg) scale(.82);transform-origin:60% 40%;z-index:2}
html[data-theme=light] #theme-toggle::before{border-color:#315f7c}
html[data-theme=light] #theme-toggle::after{background:#315f7c}
#theme-toggle[aria-busy=true]{border-color:var(--accent)}
.theme-changing #theme-toggle::before{animation:theme-halo 480ms cubic-bezier(.2,.7,.2,1) both}
.theme-changing #theme-toggle::after{animation:theme-arc 440ms cubic-bezier(.2,.7,.2,1) both}
/* Fallback without View Transitions (theme.js adds .theme-fade): colours fade only on the page ground and the
   surfaces that carry their own colour; inherited text follows body. No filter, shadow, opacity or pseudo-element
   transitions, so the hero photo switches at once. Touch screens get it only when Motion is explicitly On. */
html.theme-fade:not(.motion-off):not(.page-hidden) :is(body,dialog,.site-header,.project-filters,.about-section,.project-card,.replay,.replay-picker select,.skill-card,.skill-card pre,.listening-panel,.page-contact,.now-grid article,.panel-composer,.composer-field,#guide-launcher,.lang-picker,#theme-toggle,.terminal-toggle,#motion-toggle,.project-filters button,.project-live,#project-search,.guide-contact :is(input,textarea),.contact-actions button,.guide-recommendations,.guide-recommendation-card,.guide-recommendation-controls button,.guide-comparison-scroll,.guide-comparison-table th,.guide-path-choice,.guide-path-launch,.guide-project-search input,.guide-project-results,em,.eyebrow,.hero-copy,.section-heading>p,.section-note,.project-info p,.project-meta,.case-body :is(dt,dd),.lab-intro>p,.library-heading>p,.skill-card>p,.shipped-list :is(p,time),.now-grid p,.about-intro>p,.work-detail>p,.practice details p,.source-language,.now-listening,footer>span,.site-header nav){transition:background-color 420ms var(--ease),color 420ms var(--ease),border-color 420ms var(--ease)!important}
@keyframes theme-halo{0%{opacity:0;transform:scale(.72)}28%{opacity:.72;transform:scale(.96)}100%{opacity:0;transform:scale(1.35)}}
@keyframes theme-arc{0%{opacity:0;transform:rotate(8deg) translateY(-3px) scale(.68)}24%{opacity:.88;transform:rotate(8deg) translateY(0) scale(1)}48%{opacity:.24;transform:rotate(8deg) translateY(1px) scale(.94)}100%{opacity:0;transform:rotate(8deg) translateY(3px) scale(.82)}}
.motion-off #theme-toggle::before,.motion-off #theme-toggle::after,.page-hidden #theme-toggle::before,.page-hidden #theme-toggle::after{display:none;animation:none!important}
@media(prefers-reduced-motion:reduce){html:not(.motion-force-on) #theme-toggle::before,html:not(.motion-force-on) #theme-toggle::after{display:none;animation:none!important}}
/* Lunar sweep (View Transitions, theme.js): the new theme forms as a small disc at the toggle, then rises across
   the viewport. One root snapshot, clipped; the old view holds still beneath it and nothing blends, so there is
   no bright flash. Project cards drop their own snapshot names so the page moves as one surface and the filter
   morph never competes with it. */
html.theme-sweep .project-card{view-transition-name:none!important}
html.theme-sweep::view-transition-old(root),html.theme-sweep::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-sweep::view-transition-new(root){animation:lunar-rise .8s both}
/* The page stays usable during the sweep, so a second click reaches the toggle and is queued. */
html.theme-sweep::view-transition{pointer-events:none}
@keyframes lunar-rise{
  0%{clip-path:circle(0px at var(--theme-x,100%) var(--theme-y,0px));animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  20%{clip-path:circle(24px at var(--theme-x,100%) var(--theme-y,0px));animation-timing-function:cubic-bezier(.6,0,.2,1)}
  100%{clip-path:circle(var(--theme-r,150vmax) at var(--theme-x,100%) var(--theme-y,0px))}
}
/* Separate rules: browsers without View Transitions drop only these. theme.js also skips a running sweep. */
html.motion-off::view-transition-group(*),html.motion-off::view-transition-old(*),html.motion-off::view-transition-new(*),html.page-hidden::view-transition-group(*),html.page-hidden::view-transition-old(*),html.page-hidden::view-transition-new(*){animation:none!important}
@media(prefers-reduced-motion:reduce){html:not(.motion-force-on)::view-transition-group(*),html:not(.motion-force-on)::view-transition-old(*),html:not(.motion-force-on)::view-transition-new(*){animation:none!important}}

/* ---------- Responsive ---------- */
@media(min-width:1550px){.hero-landscape{object-position:center 56%}}
@media(max-width:1100px){.about-grid{gap:64px}.contact-grid{gap:48px}}
@media(max-width:900px){:root{--gutter:28px}.section{padding-block:84px}.hero-landscape{object-position:58% center}}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}.contact-form-host{max-width:620px}}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;gap:56px}}
@media(max-width:760px){
  :root{--header-h:108px}
  .site-header{grid-template-columns:1fr auto;grid-template-areas:"brand tools" "nav nav";row-gap:2px;align-content:center;padding-top:10px}
  .site-header .wordmark{grid-area:brand}.header-tools{grid-area:tools}
  .site-header nav{grid-area:nav;justify-content:flex-start;margin-left:-12px}
  :root{--header-stuck-h:60px}
  html.header-stuck .site-header{padding-top:0;row-gap:0}
  html.header-stuck .site-header nav{height:0;overflow:hidden}
  html.header-stuck .site-header:focus-within nav{height:auto;overflow:visible}
  .now-grid{grid-template-columns:1fr;gap:28px}
  .section-heading{display:block;margin-bottom:28px}
  .section-heading>p{margin-top:18px}
  .date-note{display:block;margin-top:16px}
}
@media(max-width:600px){
  :root{--gutter:20px}
  .section{padding-block:72px}
  body{font-size:16px}
  .site-header .wordmark{font-size:20px}
  .terminal-toggle{width:38px;padding:0;justify-content:center;font-size:0;gap:0}
  .terminal-toggle>span{font-size:14px}
  .terminal-toggle kbd{display:none}
  .hero{min-height:0;padding:calc(var(--header-h) + 40px) 0 88px}
  .hero-landscape{opacity:.5;object-position:59% center;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 62%,transparent 100%)}
  html[data-theme=light] .hero-landscape{opacity:.34}
  h1{font-size:clamp(54px,19vw,76px);margin-bottom:24px}
  .hero-copy{font-size:16px}
  .hero-actions{margin-top:28px;gap:6px 26px}
  .project-search{flex-basis:100%;flex-direction:column;align-items:stretch;gap:8px}
  .project-tools{gap:14px}
  .project-details{padding:20px 18px 16px}
  .project-actions{margin:0 0 16px;margin-inline-end:14px}
  .about-intro>p:not(.eyebrow),.work-detail>p:not(.eyebrow){font-size:15px}
  .work-detail h3{font-size:30px}
  .page-contact{padding:22px 18px}
  footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px;padding-bottom:96px}
  footer>span{order:3;flex-basis:100%}
  dialog{width:calc(100% - 16px);max-height:calc(100dvh - 16px);padding:22px 20px 20px}
  /* Project notes rise as a sheet from the bottom edge. */
  #project-dialog{width:100%;max-height:min(90dvh,880px);margin:auto 0 0;border-width:1px 0 0;border-radius:22px 22px 0 0;padding-bottom:max(24px,env(safe-area-inset-bottom))}
  @supports (transition-behavior:allow-discrete){#project-dialog{transform:translateY(24px)}#project-dialog[open]{transform:none}@starting-style{#project-dialog[open]{opacity:0;transform:translateY(32px)}}}
  .dialog-top{margin-inline-end:-8px}
  .tool-panel{width:calc(100% - 16px);height:calc(var(--panel-height,100dvh) - 16px);max-height:none;padding:0}
  .tool-panel{top:calc(var(--panel-top,0px) + 8px);bottom:auto;margin:0 auto}
  .panel-head{padding-inline:6px 4px;gap:2px}
  .panel-nav button{flex:1 1 auto;padding:6px 6px;font-size:13px;text-align:center}
  .panel-nav button::after{left:6px;right:6px}
  .panel-body{padding:20px 18px 14px}
  .panel-composer{padding:10px 12px 8px}
  #terminal-suggestions,.guide-suggestions{margin-inline:-12px;padding-inline:12px}
  .guide-recommendations{margin-inline:-2px;padding:10px}
  .guide-discovery{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:6px}
  .guide-path-launch{min-height:42px;padding:6px 8px;font-size:11px}
  .guide-project-search input{height:40px;padding-inline:8px;font-size:12px}
  /* Suggestions span the whole row on phones, so names and tech stay on one or two lines. */
  .guide-project-search{position:static}
  .guide-project-results{max-height:min(236px,38dvh)}
  .guide-comparison-table :is(th,td){padding:9px}
  .guide-recommendation-head{align-items:flex-start;flex-direction:column}
  .guide-recommendation-controls{width:100%;justify-content:flex-start}
  .guide-recommendation-card{flex-basis:88%;min-height:172px;padding:12px}
  .guide-recommendation-controls button{width:40px;height:40px}
  .guide-recommendation-controls .guide-recommendation-compare{width:auto;min-width:92px;height:40px}
  .panel-lead{font-size:22px}
  .terminal-help{gap:4px 14px}
  #guide-launcher{inset-inline-end:14px;bottom:14px;width:52px;height:52px;min-height:0;padding:0;justify-content:center;gap:0}
  .launcher-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .launcher-mark{font-size:22px}
}
/* Narrow desktop windows: keep the composer to one quiet line; `help` stays one tap away. */
@media(max-width:480px){#terminal-hint{display:none}}
@media(max-width:360px){
  .header-tools{gap:6px}
  .lang-picker{padding:0 24px 0 10px}
  .site-header nav a{padding:8px 10px}
}

/* Touch: readable form text without Safari focus zoom. Pinch zoom stays enabled. */
@media(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
  .close-button{width:44px;height:44px}
  .terminal-shortcuts button,#terminal-suggestions button,.guide-suggestions button{min-height:42px}
  .panel-foot button{min-height:40px}
  #terminal-hint{display:none}
  #guide-dialog.guide-typing .guide-intro,#guide-dialog.guide-typing .guide-suggestions{display:none}
  #guide-dialog.guide-typing .guide-discovery{display:none}
  #guide-dialog.guide-searching .guide-intro,#guide-dialog.guide-searching .guide-suggestions,#guide-dialog.guide-searching .guide-path-launch{display:none}
  #guide-dialog.guide-searching .guide-discovery{grid-template-columns:minmax(0,1fr)}
}

@media(hover:none){:is(.project-live,.dialog-link,.project-filters button,.terminal-shortcuts button,#terminal-suggestions button,.guide-suggestions button,.replay-controls button,.field-links button,#project-reset,#project-copy-link,.contact-actions button,.listening-listen,.composer-field>button):active{opacity:.72}}
@media(forced-colors:active){.composer-field:focus-within{outline:2px solid Highlight;outline-offset:1px}}

/* Narrow cards: the outside link drops below Notes instead of sharing its row. Kept last so it wins over breakpoints. */
@container card (max-width:330px){
  .project-card .project-details{padding-bottom:72px}
  .project-card .project-actions{justify-self:start;margin:0 0 16px;margin-inline-start:18px}
}

/* Reading direction follows the chosen language, while handles and commands stay LTR. */
.wordmark,.lang-current,.terminal-toggle>span,.text-button>span,.terminal-shortcuts,#terminal-suggestions,#terminal-form,.terminal-help dt,.project-art>span{direction:ltr;unicode-bidi:isolate}
.terminal-entry>strong{display:block;direction:ltr;unicode-bidi:isolate;text-align:start}
/* Isolate (not plaintext) so a Latin-only title or row still aligns with the RTL text around it. */
.terminal-help dd,.terminal-entry>a,.project-info h3,#project-title{unicode-bidi:isolate}
input[type=email],#project-share-address{direction:ltr;text-align:start}
@media(max-width:760px){[dir=rtl] .site-header nav{margin-left:0;margin-inline-start:-12px}}
[dir=rtl] .panel-foot button,[dir=rtl] .guide-message.visitor{margin-left:0;margin-inline-start:auto}
[dir=rtl] .guide-message{text-align:start}
[dir=rtl] .lang-picker{padding:0 12px 0 28px}
[dir=rtl] .lang-picker::after{right:auto;left:12px}
:where(:lang(ar),:lang(ur),:lang(hi),:lang(bn)) :is(h1,h2,h3,.eyebrow,.project-meta>span,.lang-picker,.date-note){letter-spacing:normal}
:where(:lang(ar),:lang(ur),:lang(hi),:lang(bn)) :is(h1,h2,h3){line-height:1.3}
/* The system monospace faces (Menlo, SF Mono) draw Arabic-script letters unjoined, so the guide's small labels use the sans face there. */
#guide-dialog :is(.panel-foot,.panel-foot button,.guide-project-search label,.guide-project-option small,.guide-recommendation-title,.guide-recommendation-meta,.guide-comparison>h5,.guide-comparison-table th,.guide-comparison-stage,.guide-comparison-group h6):is(:lang(ar),:lang(ur)){font-family:var(--sans);letter-spacing:normal}
/* In RTL the photo is mirrored, so the moon and its bright side sit away from the right-aligned title. */
[dir=rtl] .hero-landscape{transform:scaleX(-1)}
/* On-page arrows point forward in the reading direction. Outside-link ↗ stays as authored. */
[dir=rtl] .details-label::after,[dir=rtl] .terminal-project::after{content:"←";content:"←"/""}
@media(hover:hover){[dir=rtl] .project-details:hover .details-label::after{transform:translateX(-3px)}}
@media(max-width:600px){#project-count{margin-inline-start:0}}

/* 404: the hero, quieter. */
.not-found{min-height:clamp(540px,86svh,760px)}
.not-found h1{font-size:clamp(46px,6.4vw,84px);line-height:1.05;max-width:14ch;text-wrap:balance}
.not-found .hero-copy{max-width:34em}
.not-found-page .site-header{grid-template-columns:1fr}

/* Without JavaScript, hide controls that cannot work; content, links and email stay available. */
html:not(.js) :is(.details-label,.terminal-toggle,.text-button,#guide-launcher,#theme-toggle,#motion-toggle,.lang-picker){display:none}
html:not(.js) .project-details{cursor:default}

/* Listening now: one quiet line beside the playlist note, shown only while a track is confirmed playing. */
.now-listening{margin:12px 0 0;max-width:72ch;font-size:14px;line-height:1.75;color:var(--muted);text-wrap:pretty}
.listening-label{display:inline-flex;align-items:center;gap:8px;margin-inline-end:12px;font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;vertical-align:1px}
/* A still dot, not a pulse: nothing on the page animates continuously. */
.listening-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.now-listening a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;text-decoration-thickness:1px;overflow-wrap:anywhere;transition:text-decoration-color .18s ease}
.now-listening a:hover{text-decoration-color:var(--accent)}
.listening-sep,.listening-artist{color:var(--muted)}
.js-motion .now-listening:not([hidden]){animation:entry-in .3s cubic-bezier(.2,.7,.2,1) both}
:where(:lang(ar),:lang(ur),:lang(hi),:lang(bn)) .listening-label{letter-spacing:normal}
.listening-line{margin:0}
/* Position: a thin read-only bar between elapsed and total time, like a phone's mini player. It steps
   once a second with no transition, stops at the end, and is not a seek control. */
.listening-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;max-width:440px;margin-top:6px}
/* Position and button share one row down to 320px; only an unusually long label wraps the button. */
.listening-progress{flex:1 1 150px;min-width:0;display:flex;align-items:center;gap:10px}
.listening-progress[hidden]{display:none}
.listening-time{flex-shrink:0;min-width:3.4em;font:11px/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.listening-total{text-align:end}
.listening-bar{flex:1;min-width:40px;height:3px;border-radius:2px;background:var(--line-strong);overflow:hidden}
.listening-fill{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(var(--listening-progress,0));transform-origin:left center}
[dir=rtl] .listening-fill{transform-origin:right center}
.listening-listen{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 12px 0 10px;border:1px solid var(--line-strong);border-radius:999px;font:500 12px/1 var(--sans);color:var(--ink);white-space:nowrap;transition:border-color .18s ease,color .18s ease}
.listening-listen[hidden]{display:none}
/* A play triangle points right in every language, like media controls. */
.listening-listen::before{content:"";width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--accent)}
@media(hover:hover){.listening-listen:hover{border-color:var(--accent);color:var(--accent)}}
/* Visitor player: Spotify's embed, loaded only after a click, kept separate from the live line. */
.listening-player{max-width:440px;margin:16px 0 20px;outline:none}
.listening-player:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:14px}
.listening-player-label{margin:0 0 8px;font:500 11px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.listening-frame{height:152px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.listening-frame iframe{display:block;width:100%;height:152px;border:0;border-radius:12px}
.listening-player-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin-top:8px}
.listening-player-note{flex:1 1 220px;margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.listening-player-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.listening-player-open{display:inline-flex;align-items:center;min-height:32px;font-size:13px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;text-decoration-thickness:1px}
.listening-close{min-height:32px;font:500 13px var(--sans);color:var(--muted)}
@media(hover:hover){.listening-player-open:hover{text-decoration-color:var(--accent)}.listening-close:hover{color:var(--ink)}}
@media(pointer:coarse){.listening-listen{min-height:40px;padding:0 14px 0 12px}.listening-close,.listening-player-open{min-height:40px}}
.js-motion .listening-player:not([hidden]){animation:entry-in .22s cubic-bezier(.2,.7,.2,1) both}
:where(:lang(ar),:lang(ur),:lang(hi),:lang(bn)) .listening-player-label{letter-spacing:normal}

/* Stable geometry: the second row (position and button, or the status while nothing is confirmed
   playing) keeps one control's height in every state, so idle, "Updating…" between songs and a new
   track do not move the notes below. Without JavaScript the status simply sits under the label. */
.listening-status{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.75;color:var(--muted)}
html.js .listening-controls{min-height:30px}
/* Until the first answer arrives there is nothing true to say: keep the space, show no status. */
html.js .now-listening:not([data-state]) .listening-status,.now-listening[data-state=loading] .listening-status{visibility:hidden}
.now-listening:not([data-playing="true"]) .listening-label::before{background:var(--muted);box-shadow:none;opacity:.55}
/* While the player is open the toggle shows a stop square: closing removes the embed and its audio. */
.listening-listen[aria-expanded="true"]::before{width:7px;height:7px;border:0;border-radius:1px;background:var(--accent)}
@media(pointer:coarse){html.js .listening-controls{min-height:40px}}
/* Narrow phones: a round icon button keeps position and button on one row with a readable bar.
   Its label stays in the accessibility tree. */
@media(max-width:359px){
  .listening-listen{justify-content:center;width:40px;min-height:40px;padding:0;gap:0}
  .listening-listen-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .listening-listen:not([aria-expanded="true"])::before{margin-left:2px}
  html.js .listening-controls{min-height:40px}
}
/* On my desk notes: the following note beside one quiet listening card (live line, visitor player and the
   night-rotation playlist) in the project and skill card surface. Narrower screens stack the two. */
.listening-panel{margin-top:20px;padding:18px 20px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 1px 0 var(--rim)}
.listening-panel .now-listening{margin:0;max-width:none}
.listening-panel .listening-controls{max-width:none}
.listening-panel .listening-player{max-width:none;margin:14px 0 2px}
.listening-panel .listening-frame{background:var(--bg)}
.listening-panel .listening-note{max-width:none;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
/* The playlist line opens with a small label, like the Spotify label above it. */
.listening-note>[data-i18n]:first-child{font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;vertical-align:1px}
:where(:lang(ar),:lang(ur),:lang(hi),:lang(bn)) .listening-note>[data-i18n]:first-child{letter-spacing:normal}
@media(min-width:901px){
  .now-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start}
  /* Starts on the card's first line: its border plus top padding. */
  .now-notes>.section-note{margin:0;padding-top:19px}
  .listening-panel{margin-top:0}
}

/* Field notes reuse the site's moonlight palette and one sans face for headings. The replay is deliberately still. */
.field-section{border-bottom:1px solid var(--line)}
.source-language{color:var(--muted);font:11px/1.7 var(--mono);margin:0 0 24px}
.case-studies{border-top:1px solid var(--line)}
.case-study{border-bottom:1px solid var(--line)}
.case-study summary{display:flex;align-items:center;gap:24px;padding:24px 0;cursor:pointer;list-style:none;border-radius:var(--radius-s)}
.case-study summary::-webkit-details-marker{display:none}
.case-number{flex-shrink:0;width:32px;color:var(--muted);font:12px var(--mono);font-variant-numeric:tabular-nums}
.case-study summary strong{display:block;font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.015em;transition:color .18s ease}
.case-study summary span span{display:block;margin-top:4px;color:var(--muted);font-size:14px;line-height:1.6}
.case-expand{flex-shrink:0;display:grid;place-items:center;width:32px;height:32px;margin-inline-start:auto;font:22px/1 var(--mono);color:var(--accent);transition:transform .2s var(--ease)}
.case-study[open] .case-expand{transform:rotate(45deg)}
@media(hover:hover){.case-study summary:hover strong{color:var(--accent)}}
.case-body{max-width:940px;padding-block:0 32px;padding-inline:56px 48px}
.case-body dl{margin:0 0 20px}
.case-body dl div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;margin-top:16px}
.case-body dl div:first-child{margin-top:0}
.case-body dt{color:var(--accent);font:11px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.case-body dd{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.75;text-wrap:pretty}
/* One text-link style for evidence links: underlined, tappable, no pill. */
.field-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px}
.field-links a,.lab-intro>a,.shipped-list a{display:inline-flex;align-items:center;min-height:40px;color:var(--accent);font-size:14px;text-decoration:underline;text-decoration-color:var(--line-strong);text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .18s ease}
@media(hover:hover){.field-links a:hover,.lab-intro>a:hover,.shipped-list a:hover{text-decoration-color:var(--accent)}}
.agent-lab{display:grid;grid-template-columns:1fr 1.25fr;gap:64px;align-items:start;margin-top:96px;scroll-margin-top:110px}
.lab-intro h3,.library-heading h3{font:400 clamp(28px,3vw,36px)/1.18 var(--sans);letter-spacing:-.02em;margin:0 0 20px;text-wrap:balance}
.lab-intro>p:not(.eyebrow):not(.source-language),.library-heading>p{color:var(--muted);font-size:15px;line-height:1.8;max-width:430px;text-wrap:pretty}
.lab-intro .source-language{margin-bottom:12px}
.replay{min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 1px 0 var(--rim)}
.replay-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:16px 24px;border-bottom:1px solid var(--line);color:var(--muted);font:11px/1.6 var(--mono);letter-spacing:.04em}
.replay-picker{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:12px 24px;border-bottom:1px solid var(--line);color:var(--muted);font:11px/1.5 var(--mono)}
.replay-picker[hidden]{display:none}
.replay-picker select{max-width:100%;min-height:38px;padding:0 32px 0 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface-2);color:var(--ink);font:500 12px/1.4 var(--sans)}
.replay-picker select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#replay-stage{padding:28px 30px;min-height:370px}
#replay-stage>.eyebrow{margin-bottom:14px}
#replay-title{margin:0 0 12px;font:500 22px/1.35 var(--sans);letter-spacing:-.01em;text-wrap:balance}
#replay-copy{margin:0;font-size:15px;line-height:1.75;color:var(--ink-soft);text-wrap:pretty}
#replay-evidence{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);color:var(--accent);font:12px/1.9 var(--mono)}
#replay-evidence ol{margin:0;padding-inline-start:2.2em}
#replay-evidence ul{list-style:none;padding:0;margin:0}
#replay-evidence li+li{margin-top:4px}
.replay-controls{display:flex;justify-content:space-between;gap:8px;padding:16px 24px;border-top:1px solid var(--line)}
.replay-controls[hidden],.field-links button[hidden]{display:none}
.replay-controls button,.field-links button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--ink);font:500 13px var(--sans);cursor:pointer;white-space:nowrap;transition:border-color .18s ease,opacity .18s ease}
.replay-controls button:disabled{opacity:.4;cursor:default}
@media(hover:hover){.replay-controls button:not(:disabled):hover,.field-links button:hover{border-color:var(--accent)}}
.skill-library{margin-top:96px;scroll-margin-top:110px}
.library-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:28px}
.library-heading h3{margin-bottom:0}
.library-heading>p{max-width:390px;margin:0}
/* Skill cards share the project cards' surface, radius and padding. */
.skill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.skill-card{display:flex;flex-direction:column;min-width:0;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 1px 0 var(--rim)}
.skill-card h4{margin:0 0 8px;font-size:18px;font-weight:500;line-height:1.3;letter-spacing:-.01em}
.skill-card>p{min-height:48px;margin:0 0 6px;color:var(--muted);font-size:14px;line-height:1.7;text-wrap:pretty}
.skill-card summary{width:fit-content;padding-block:8px;cursor:pointer;color:var(--accent);font-size:14px;font-weight:500}
.skill-card pre{max-height:340px;overflow:auto;margin:6px 0 12px;padding:16px;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-s);color:var(--ink-soft);font:12px/1.8 var(--mono);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.skill-card .field-links{gap:4px 16px}
.skill-card .field-links a{font-size:13px}
#skill-copy-status{min-height:24px;margin:16px 0 0;color:var(--muted);font-size:13px}
/* One rail through the dates; the newest release is lit. */
.shipped-list{position:relative;padding:0;list-style:none;margin:0}
.shipped-list::before{content:"";position:absolute;top:36px;bottom:36px;inset-inline-start:156px;width:1px;background:linear-gradient(var(--line-strong),var(--line))}
.shipped-list li{position:relative;display:grid;grid-template-columns:140px minmax(0,1fr);gap:32px;padding:22px 0}
.shipped-list li::before{content:"";position:absolute;top:30px;inset-inline-start:151.5px;width:10px;height:10px;border:1.5px solid var(--line-strong);border-radius:50%;background:var(--bg)}
.shipped-list li:first-child::before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
.shipped-list time{padding-top:3px;color:var(--muted);font:11px/1.8 var(--mono);letter-spacing:.04em}
.shipped-list h3{margin:0 0 8px;font-weight:500;font-size:18px;letter-spacing:-.01em}
.shipped-list p{color:var(--muted);font-size:14px;line-height:1.8;max-width:650px;margin:0 0 2px;text-wrap:pretty}
@media(max-width:800px){
  .agent-lab{grid-template-columns:1fr;gap:32px;margin-top:72px}
  .skill-grid{grid-template-columns:1fr}
  .skill-card>p{min-height:0}
  .library-heading{display:block}
  .library-heading>p{margin-top:16px;max-width:none}
  .skill-library{margin-top:72px}
}
/* Tablets: one wide card per row, so "Read skill" and the copy and download links share a row while the
   skill is closed. Opened, the source takes the full width and the links follow it (reading order kept). */
@media(min-width:601px) and (max-width:800px){
  .skill-card{flex-flow:row wrap;align-items:center;column-gap:24px}
  .skill-card>:is(h4,p){flex-basis:100%}
  .skill-card details{flex:1 1 auto}
  .skill-card details[open]{flex-basis:100%}
}
@media(max-width:480px){
  .case-study summary{gap:12px;padding:20px 0}
  .case-study summary strong{font-size:19px}
  .case-number{width:20px}
  .case-body{padding-block:0 24px;padding-inline:32px 0}
  .case-body dl div{grid-template-columns:1fr;gap:4px}
  #replay-stage{padding:24px 20px;min-height:405px}
  .replay-heading{padding:14px 20px}
  .replay-picker{padding:12px 16px;align-items:flex-start;flex-direction:column}
  .replay-picker select{width:100%}
  .replay-controls{padding:14px 12px;gap:6px}
  .replay-controls button{padding:0 12px}
  .skill-card{padding:20px 18px}
  .shipped-list::before{inset-inline-start:4.5px}
  .shipped-list li{grid-template-columns:1fr;gap:6px;padding-inline-start:28px}
  .shipped-list li::before{inset-inline-start:0}
}