/* Deep pages (/work/...): standalone, and also swung into the homepage by the edge tabs. */
:root { --bg: #010203; --bg-soft: #0a0f0c; --border: #10241a; --border-bright: #1d4a2f; --text: #d8e4dc; --text-muted: #7d8f85;
        --green: #00ff41; --green-dim: #00b32e; --cyan: #00e5ff; color-scheme: dark; }
.deep { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        color: var(--text); line-height: 1.7; font-size: 1.02rem; }
.deep .kicker { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--green); letter-spacing: 0.06em; }
.deep .kicker::before { content: '~/'; opacity: 0.6; }
.deep .meta { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-muted); margin: -6px 0 26px; }
.deep .postlist { list-style: none; margin: 24px 0 0; padding: 0; }
.deep .postlist li { border-top: 1px solid var(--border); padding: 18px 0; margin: 0; }
.deep .postlist a { font-family: 'JetBrains Mono', monospace; font-size: 1.02rem; text-decoration: none; color: var(--text); }
.deep .postlist a:hover { color: var(--green); }
.deep .postlist p { margin: 6px 0 0; font-size: 0.95rem; }
.deep .postlist .src { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--green-dim); }
.deep h1 { font-family: 'JetBrains Mono', monospace; font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.2; margin: 10px 0 14px; letter-spacing: -0.02em; }
.deep .lede { font-size: 1.15rem; color: var(--text); margin-bottom: 28px; }
.deep h2 { font-family: 'JetBrains Mono', monospace; font-size: 1.15rem; margin: 52px 0 14px; color: var(--text); }
.deep h2::before { content: '## '; color: var(--green); }
.deep p { color: var(--text-muted); margin-bottom: 14px; }
.deep p b, .deep li b { color: var(--text); font-weight: 600; }
.deep ul, .deep ol { color: var(--text-muted); margin: 0 0 14px 22px; }
.deep li { margin-bottom: 6px; }
.deep a { color: var(--green); }
.deep code { font-family: 'JetBrains Mono', monospace; font-size: 0.86em; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.deep figure { margin: 24px 0 28px; }
.deep figure img, .deep figure video { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); background: #000; }
.deep figure.narrow img, .deep figure.narrow video { max-width: 320px; margin: 0 auto; }
.deep figcaption { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-muted); margin-top: 8px; text-align: center; }
.deep table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 10px 0 16px; }
.deep th, .deep td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.deep th { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }
.deep td { color: var(--text-muted); } .deep td b { color: var(--text); }
.deep .ok { color: var(--green); } .deep .bad { color: #ff6b81; }
.deep .callout { border-left: 2px solid var(--green); background: var(--bg-soft); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 20px 0; }
.deep .callout p { margin: 0; color: var(--text); }
.deep .links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.deep .links a { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; text-decoration: none; border: 1px solid var(--border-bright); border-radius: 6px; padding: 9px 14px; background: rgba(0,255,65,0.04); }
.deep .links a:hover { border-color: var(--green); background: rgba(0,255,65,0.1); }
/* interactive demos inside notes */
.deep img.plot { filter: invert(0.9) hue-rotate(180deg) saturate(1.4); background: #fff; }
.deep .demo { border: 1px solid var(--border-bright); border-radius: 12px; background: var(--bg-soft); padding: 18px 18px 14px; margin: 26px 0 30px; }
.deep .demo-h { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
.deep .demo-h::before { content: '▸ '; }
.deep .demo-note { font-size: 0.82rem; margin: 12px 0 0; }
.deep .demo label { display: flex; align-items: center; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text-muted); margin: 8px 0; }
.deep .demo label > span:first-child { min-width: 92px; }
.deep .demo input[type=range] { flex: 1; accent-color: var(--green); min-width: 0; }
.deep .demo output, .deep .demo .num { font-family: 'JetBrains Mono', monospace; color: var(--text); min-width: 44px; text-align: right; }
.deep .seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.deep .seg button, .deep .demo .btn { font: 500 0.76rem 'JetBrains Mono', monospace; color: var(--text-muted); background: transparent; border: 1px solid var(--border-bright); border-radius: 6px; padding: 7px 11px; cursor: pointer; }
.deep .seg button:hover, .deep .demo .btn:hover { color: var(--text); border-color: var(--green-dim); }
.deep .seg button.on { color: #001a08; background: var(--green); border-color: var(--green); }
.deep .readout { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; color: var(--text); margin: 10px 0 2px; }
.deep .readout b { color: var(--green); font-weight: 700; }
.deep .big { font-family: 'JetBrains Mono', monospace; font-size: 2rem; color: var(--text); line-height: 1.1; }
.deep .demo svg { display: block; width: 100%; height: auto; overflow: visible; max-width: 460px; margin: 0 auto; }
.deep .demo canvas { display: block; width: 100%; border-radius: 8px; background: #000; border: 1px solid var(--border); touch-action: pan-y; }
.deep .frames { position: relative; background: #fff; filter: invert(0.9) hue-rotate(180deg) saturate(1.4); border-radius: 8px; overflow: hidden; }
.deep .frames img { display: block; width: 100%; border: 0; border-radius: 0; }
.deep .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.deep .pair figcaption { margin-top: 6px; }
.deep .story { border-left: 2px solid var(--border-bright); padding: 4px 0 4px 14px; margin: 10px 0; color: var(--text); font-size: 0.95rem; }
.deep .story mark { background: none; color: var(--green); }
.deep .postlist li { display: grid; grid-template-columns: 1fr 132px; gap: 6px 20px; align-items: start; }
.deep .postlist li > :not(.thumb) { grid-column: 1; }
.deep .postlist .thumb { grid-column: 2; grid-row: 1 / span 3; width: 132px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
@media (max-width: 640px) { .deep .postlist li { grid-template-columns: 1fr 84px; gap: 6px 14px; } .deep .postlist .thumb { width: 84px; } .deep .pair { grid-template-columns: 1fr; } .deep .demo { padding: 14px 12px 10px; } .deep .demo label > span:first-child { min-width: 70px; } }
.deep .holo { position: relative; margin: 0 -4px; }
.deep .holo canvas { height: 320px; background: radial-gradient(ellipse at 50% 60%, #04131a 0%, #000 70%); cursor: grab; }
.deep .holo canvas:active { cursor: grabbing; }
.deep .holo::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 8px;
  background: repeating-linear-gradient(0deg, rgba(0,229,255,0.045) 0 1px, transparent 1px 3px); }
.deep .holo .hint { position: absolute; top: 8px; right: 12px; font: 0.6rem 'JetBrains Mono', monospace; letter-spacing: 0.18em; color: rgba(0,229,255,0.45); pointer-events: none; }
.deep .holo.tall canvas { height: 400px; }
@media (max-width: 640px) { .deep .holo canvas { height: 260px; } .deep .holo.tall canvas { height: 340px; } }
.deep .swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 4px 0 6px; }
.deep .sw { display: flex; flex-direction: column; gap: 4px; }
.deep .sw div { aspect-ratio: 1 / 0.8; border-radius: 6px; }
.deep .sw div + div { box-shadow: 0 0 22px -4px currentColor; }
.deep .sw span { font: 0.62rem 'JetBrains Mono', monospace; color: var(--text-muted); text-align: center; }
.deep .rowlbl { display: flex; justify-content: space-between; font: 0.62rem 'JetBrains Mono', monospace; color: var(--text-muted); letter-spacing: 0.1em; }
.deep input[type=color] { width: 34px; height: 26px; border: 1px solid var(--border-bright); border-radius: 6px; background: none; padding: 0; cursor: pointer; }
@media (max-width: 640px) { .deep .swatches { grid-template-columns: repeat(4, 1fr); } }
/* jobs: a track of stops; the colour changes where the spec stops being handed over */
.deep .track { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 8px 0 4px; padding-top: 6px; }
.deep .track::before { content: ''; position: absolute; left: 8%; right: 8%; top: 34px; height: 2px;
  background: linear-gradient(90deg, var(--cyan) 0 58%, var(--green) 58%); opacity: 0.55; }
.deep .stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.deep .stop .logo { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--border-bright); background: var(--bg); display: grid; place-items: center; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.deep .stop .logo i { width: 42px; height: 36px; background: var(--c, var(--cyan)); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.deep .stop.after .logo i { --c: var(--green); }
.deep .stop b { font: 600 0.7rem 'JetBrains Mono', monospace; color: var(--text); }
.deep .stop small { font: 0.6rem 'JetBrains Mono', monospace; color: var(--text-muted); }
.deep .stop:hover .logo, .deep .stop.on .logo { transform: translateY(-3px); border-color: var(--c, var(--cyan)); box-shadow: 0 0 22px -4px var(--c, var(--cyan)); }
.deep .stop.after { --c: var(--green); }
.deep .stop.on b { color: var(--c, var(--cyan)); }
.deep .spec { display: flex; justify-content: space-between; font: 0.62rem 'JetBrains Mono', monospace; letter-spacing: 0.08em; margin: 10px 8% 0; }
.deep .spec span:first-child { color: var(--cyan); } .deep .spec span:last-child { color: var(--green); }
.deep .stopcard { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; min-height: 150px; }
.deep .stopcard h3 { font: 600 0.95rem 'JetBrains Mono', monospace; color: var(--text); margin: 0 0 2px; }
.deep .stopcard .when { font: 0.7rem 'JetBrains Mono', monospace; color: var(--text-muted); margin-bottom: 10px; }
.deep .stopcard p { margin: 0 0 10px; }
.deep .lesson { font: 0.8rem 'JetBrains Mono', monospace; color: var(--c, var(--cyan)); }
.deep .lesson::before { content: 'taught me → '; color: var(--text-muted); }
.deep .divide { text-align: center; font: 0.72rem 'JetBrains Mono', monospace; letter-spacing: 0.12em; color: var(--green); margin: 40px 0 0; }
.deep .divide::before, .deep .divide::after { content: ' ─── '; color: var(--border-bright); }
@media (max-width: 640px) { .deep .track { grid-template-columns: repeat(3, 1fr); row-gap: 18px; } .deep .track::before { display: none; } .deep .spec { display: none; } }
/* projects: tenets and "why it's built that way" decisions */
.deep .tenets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 6px; }
.deep .tenets > div { border: 1px solid var(--border-bright); border-radius: 10px; padding: 14px; background: var(--bg-soft); }
.deep .tenets b { font: 700 0.7rem 'JetBrains Mono', monospace; color: var(--green); }
.deep .tenets h3 { font: 600 0.88rem 'JetBrains Mono', monospace; color: var(--text); margin: 6px 0; }
.deep .tenets p { font-size: 0.85rem; margin: 0; }
.deep .whys { margin: 6px 0 4px; }
.deep details.why { border: 1px solid var(--border); border-radius: 8px; margin: 8px 0; background: var(--bg-soft); transition: border-color 0.2s; }
.deep details.why[open], .deep details.why:hover { border-color: var(--border-bright); }
.deep details.why summary { list-style: none; cursor: pointer; padding: 11px 14px; font: 500 0.85rem 'JetBrains Mono', monospace; color: var(--text); display: flex; gap: 10px; align-items: baseline; }
.deep details.why summary::-webkit-details-marker { display: none; }
.deep details.why summary::before { content: '+'; color: var(--green); width: 10px; flex: none; }
.deep details.why[open] summary::before { content: '−'; }
.deep details.why p { margin: 0; padding: 0 14px 12px 34px; font-size: 0.9rem; }
.deep .pair.three { grid-template-columns: repeat(3, 1fr); margin: 20px 0; }
.deep .pair.three img { width: 100%; border-radius: 8px; border: 1px solid var(--border); }
@media (max-width: 640px) { .deep .tenets { grid-template-columns: 1fr; } .deep .pair.three { grid-template-columns: repeat(3, 1fr); gap: 6px; } }
/* research: project cards with who set them and what they taught */
.deep .rcard { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.deep .rcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: #000; }
.deep .rcard p { margin: 0 0 10px; }
.deep .setby { font: 0.74rem 'JetBrains Mono', monospace; color: var(--text); margin-bottom: 8px; }
.deep .setby span, .deep .learned span { color: var(--green); margin-right: 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
.deep .learned { color: var(--text) !important; }
@media (max-width: 640px) { .deep .rcard { grid-template-columns: 1fr; } }
.deep .demo svg[data-out="lineage"] { max-width: none; }
/* standalone-only chrome */
.deep-bar { position: sticky; top: 0; z-index: 5; background: rgba(1,2,3,0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.deep-bar a { display: inline-block; padding: 14px 24px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--text-muted); text-decoration: none; }
.deep-bar a:hover { color: var(--green); }
body.deep-standalone { margin: 0; background: var(--bg); }
@media (max-width: 640px) { .deep { padding: 48px 18px 72px; font-size: 0.98rem; } }