/* Circuits: VLSI walkthrough. Builds on ../assets/vlsi.css and uses its tokens. */
.header-inner nav a.current{color:var(--accent)}
.wt-hero{padding-block:56px 34px;position:relative}
.wt-hero:before{content:"";position:absolute;pointer-events:none;inset:0 -48px auto;height:360px;z-index:-1;background:radial-gradient(ellipse at 20% 0%,#52203150,transparent 70%)}
.wt-hero h1{font-size:clamp(2.4rem,4.6vw,4rem);letter-spacing:-.04em;overflow-wrap:break-word}
.wt-hero .lede{max-width:70ch;color:var(--muted);font-size:1.05rem;margin-top:24px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.84rem;color:var(--muted);margin-bottom:26px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.goal{margin-top:26px;max-width:75ch}
.goal h2{font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;color:var(--accent);font-weight:700;margin-bottom:8px}
.goal p{font-size:1.18rem;line-height:1.55}
.puzzle-facts{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.puzzle-facts>div{min-width:0}
.puzzle-facts dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
.puzzle-facts dd{font-size:.95rem;overflow-wrap:anywhere}
.jump{margin-top:26px;font-size:.88rem;font-weight:650}
.wt-body{padding-bottom:30px}
.wt-section{padding-block:34px;border-top:1px solid var(--line)}
.wt-section>h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:22px}
.wt-section>p{max-width:75ch;color:var(--muted)}
.wt-section .note{font-size:.88rem;color:var(--muted);margin-top:16px;max-width:75ch}
.section-lede{margin-bottom:26px}
.concepts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:18px}
.concept{padding:20px 22px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.concept h3{display:flex;align-items:center;gap:12px}
.concept h3 .swatch{flex-shrink:0;border-radius:3px}
.concept p{color:var(--muted);font-size:.94rem;margin-top:10px}
.steps{margin:0;padding-left:1.6em;max-width:75ch}
.steps li{padding-left:6px;margin-block:12px}
.steps li::marker{color:var(--accent);font-weight:700}
.hints{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:80ch}
.hints li{padding:16px 20px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.hints h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:6px}
.hints p{color:var(--ink);font-size:.97rem}
.hint-text{max-width:75ch;padding:16px 20px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)!important}
.solution figure{margin-top:26px;min-width:0}
.solution figure>a{display:block}
.shot img{border:1px solid #6b6169;border-radius:6px;width:100%}
.grid>a{display:block;width:fit-content;max-width:100%;overflow:hidden;border:1px solid #6b6169;border-radius:6px;background:#1D1116}
.grid img{max-width:100%;height:auto}
.solution figcaption{font-size:.8rem;color:var(--muted);margin-top:12px;max-width:85ch}
.legend-block,.notes{margin-top:28px}
.legend-block h3,.notes h3{font-size:1.05rem;margin-bottom:14px}
.legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:12px 22px}
.legend li{display:flex;align-items:center;gap:12px;min-width:0}
.legend .swatch{flex-shrink:0;border-radius:3px}
.legend span{display:grid;line-height:1.3;font-size:.92rem;min-width:0;overflow-wrap:anywhere}
.legend small{color:var(--muted);font-size:.78rem}
.notes .plain-list{margin-top:0;max-width:80ch}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-block:20px 70px}
.pager a{display:grid;gap:4px;padding:18px 22px;border:1px solid var(--line);border-radius:8px;background:var(--panel);text-decoration:none;min-width:0}
.pager a:hover{border-color:#875062}
.pager small{font-size:.78rem;color:var(--muted);font-weight:650}
.pager strong{font-size:1.02rem;overflow-wrap:break-word}
.pager .next{text-align:right}
.spoiler-note{margin-top:30px;max-width:80ch;padding:18px 22px;border:1px solid #875062;border-radius:8px;background:var(--panel)}
.spoiler-note h2{font-size:1rem;letter-spacing:0;margin-bottom:6px}
.spoiler-note p{color:var(--muted);font-size:.95rem}
.chapter-index{margin-top:34px}
.chapter-index ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:10px 18px}
.chapter-index a{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:6px;text-decoration:none;font-size:.92rem;font-weight:600}
.chapter-index a:hover{border-color:#875062}
.chapter-index a>span{display:inline-grid;place-items:center;min-width:2em;height:2em;border-radius:4px;background:var(--panel);border:1px solid var(--line);font-size:.8rem;color:var(--accent)}
.wt-chapters{padding-bottom:70px}
.chapter{padding-block:40px;border-top:1px solid var(--line)}
.chapter-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 22px;margin-bottom:24px}
.chapter-heading .eyebrow{width:100%;margin-bottom:6px}
.chapter-heading h2{font-size:clamp(1.7rem,3vw,2.5rem)}
.chapter-heading>p:last-child{color:var(--muted);font-size:.88rem}
.puzzle-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.puzzle-list a{display:flex;gap:16px;align-items:flex-start;height:100%;padding:16px 18px;border:1px solid var(--line);border-radius:8px;background:var(--panel);text-decoration:none}
.puzzle-list a:hover{border-color:#875062}
.puzzle-list a:hover strong{color:var(--accent)}
.puzzle-list .number{flex-shrink:0;display:inline-grid;place-items:center;min-width:2.3em;height:2.3em;border-radius:5px;border:1px solid var(--line);background:var(--bg);font-size:.85rem;font-weight:700;color:var(--accent)}
.puzzle-list .entry{display:grid;gap:4px;min-width:0}
.puzzle-list strong{font-size:1.02rem;line-height:1.3;color:var(--ink)}
.puzzle-list .entry>span{font-size:.86rem;line-height:1.5;color:var(--muted)}
@media(max-width:1050px){.wt-hero:before{inset-inline:-32px}}
@media(max-width:740px){.wt-hero{padding-block:36px 26px}.wt-hero:before{inset-inline:-20px}.goal p{font-size:1.06rem}.puzzle-facts{gap:10px 24px}.wt-section{padding-block:28px}.puzzle-list{grid-template-columns:1fr}.pager{grid-template-columns:1fr;padding-bottom:50px}.pager .next{text-align:left}.chapter{padding-block:32px}.concept,.hints li,.hint-text{padding:14px 16px}}
