.coda { background:#101713; color:#ede9df; min-height:100vh; }
.coda .site-header { background:color-mix(in oklab,#101713 88%,transparent); border-color:#30372f; }
.coda .brand,.coda .nav__link { color:#ded9cd; }
.coda-hero { min-height:68vh; display:grid; place-items:center; text-align:center; background:radial-gradient(circle at 50% 35%,rgba(184,145,49,.17),transparent 31%),linear-gradient(#101713,#0b0f0d); }
.coda-hero__inner { max-width:900px; }
.coda-hero h1 { margin-bottom:var(--space-5); color:#f5efe1; font:500 clamp(3rem,9vw,7rem) var(--font-display); letter-spacing:-.035em; }
.coda-hero p { margin-inline:auto; color:#c7c4ba; font-size:var(--text-lg); }
.coda-conditions-section { border-bottom:1px solid #30372f; }
.coda-statement { max-width:800px; margin:auto; text-align:center; }
.coda-statement h2,.synthesis-section h2,.coda-boundary h2 { margin-bottom:var(--space-6); color:#f2ede2; font:500 var(--text-2xl) var(--font-display); }
.conditions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:var(--space-10); border:1px solid #343a34; background:#343a34; }
.condition { padding:var(--space-8) var(--space-6); background:#141a16; }
.condition__num { color:#d6b55b; font:.68rem var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
.condition h3 { margin:var(--space-4) 0; color:#f0eadc; font:var(--text-lg) var(--font-display); }
.condition p { color:#aaa99f; font-size:var(--text-sm); }
.condition--fourth { background:linear-gradient(145deg,#20251c,#18221c); }
.synthesis-section { background:#0d120f; }
.synthesis-section h2,.synthesis-intro { text-align:center; }
.synthesis-intro { color:#bdb9ad; font-size:var(--text-lg); }
.synthesis-board { margin-top:var(--space-10); padding:var(--space-6); border:1px solid #4a5147; background:linear-gradient(155deg,#1d241e,#121713); }
.synthesis-board__slots { display:grid; gap:var(--space-3); }
.synthesis-slot { display:grid; grid-template-columns:1.2fr .8fr; gap:var(--space-4); min-height:62px; align-items:center; padding:var(--space-4); border:1px dashed #576056; color:#cfcbbf; background:rgba(255,255,255,.02); text-align:left; font:var(--text-sm) var(--font-body); }
.synthesis-slot:focus-visible,.synthesis-slot:hover { outline:none; border-color:#d6b55b; }
.synthesis-slot--within { margin-inline:clamp(0rem,8vw,4rem); border-style:solid; }
.synthesis-slot__value { color:#e7d6a4; font:italic var(--text-lg) var(--font-period); text-align:right; }
.synthesis-slot.has-piece { border-color:#b29b5b; background:rgba(183,145,54,.11); }
.synthesis-pieces { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin-top:var(--space-5); }
.synthesis-piece { min-height:54px; padding:var(--space-3); border:1px solid #4b534a; color:#ded9cc; background:#172019; font:500 var(--text-sm) var(--font-body); }
.synthesis-piece span { display:block; margin-bottom:var(--space-1); color:#d6b55b; font:var(--text-lg) var(--font-display); }
.synthesis-piece:hover:not(:disabled),.synthesis-piece:focus-visible,.synthesis-piece.is-selected { outline:none; border-color:#d6b55b; background:#2a3022; }
.synthesis-piece:disabled,.synthesis-slot:disabled { cursor:default; opacity:1; }
.synthesis-status { min-height:1.5em; margin:var(--space-5) 0 0; color:#d2c295; font:.78rem/1.5 var(--font-mono); text-align:center; }
.synthesis-result { margin-top:var(--space-8); padding:var(--space-8); border-top:1px solid #4a5147; text-align:center; }
.synthesis-result__reading { display:flex; justify-content:center; align-items:baseline; gap:var(--space-4); margin-bottom:var(--space-6); color:#eadbaa; }
.synthesis-result__reading span { font:500 clamp(2rem,6vw,4.5rem) var(--font-display); }
.synthesis-result__reading i { color:#a7a99e; font:italic var(--text-lg) var(--font-period); }
.synthesis-result > p:last-child { max-width:60ch; margin:auto; color:#bdb9ad; }
.coda-boundary { border-top:1px solid #30372f; background:#101713; }
.coda-layers { display:grid; gap:var(--space-5); margin-top:var(--space-8); }
.coda-layers div { padding-bottom:var(--space-5); border-bottom:1px solid #30372f; }
.coda-layers dt { margin-bottom:var(--space-2); color:#d6b55b; font:.72rem var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.coda-layers dd { margin:0; color:#bbb8ae; }
.coda-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-4); margin-top:var(--space-10); }
@media (max-width:850px){.conditions{grid-template-columns:1fr 1fr}.synthesis-pieces{grid-template-columns:1fr}.synthesis-slot--within{margin-inline:var(--space-3);}}
@media (max-width:540px){.conditions{grid-template-columns:1fr}.coda-hero{min-height:60vh}.synthesis-slot{grid-template-columns:1fr}.synthesis-slot__value{text-align:left;}}
@media (prefers-reduced-motion:reduce){.coda *{scroll-behavior:auto;}}