/* Rewire — shared design system (Northgrid-based, committed dark). */
:root{
  --ink:#0B0A12; --panel:#12101E; --panel-2:#171427;
  --vio100:#EDE9FE; --vio200:#DDD6FE; --vio300:#C4B5FD; --vio400:#A78BFA; --vio500:#8B5CF6;
  --indigo:#6366F1; --coral:#F87171; --emerald:#5FC487;
  --text:rgba(228,224,235,.92); --dim:rgba(255,255,255,.55); --faint:rgba(255,255,255,.36);
  --hair:rgba(255,255,255,.08); --line:rgba(255,255,255,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--ink)}
body{margin:0;position:relative;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6;overflow-x:hidden}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
::selection{background:rgba(196,181,253,.3);color:#fff}
.serif{font-family:Newsreader,Georgia,serif}
.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
h1,h2,h3,h4{color:#fff;margin:0;letter-spacing:-.02em;line-height:1.08;font-weight:500;text-wrap:balance}
p{margin:0 0 1em}
a{color:var(--vio300);text-decoration:none}
b,strong{color:#fff;font-weight:600}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px}

/* grain + aurora */
.grain:before{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#aurora{position:absolute;top:0;left:0;right:0;height:64rem;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, black 52%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 52%, transparent 100%);
  background:
    radial-gradient(135% 95% at 50% -18%, rgba(139,92,246,.34), transparent 56%),
    radial-gradient(100% 72% at 82% -6%, rgba(99,102,241,.28), transparent 54%),
    radial-gradient(90% 70% at 10% -2%, rgba(196,181,253,.18), transparent 50%)}
#aurora .blob{position:absolute;border-radius:50%;filter:blur(96px);mix-blend-mode:screen;will-change:transform}
#aurora .b1{width:46rem;height:46rem;left:-9rem;top:-18rem;background:radial-gradient(circle, rgba(167,139,250,.60), transparent 62%);animation:drift1 24s ease-in-out infinite}
#aurora .b2{width:40rem;height:40rem;right:-11rem;top:-12rem;background:radial-gradient(circle, rgba(99,102,241,.55), transparent 62%);animation:drift2 28s ease-in-out infinite}
#aurora .b3{width:32rem;height:32rem;left:34%;top:-8rem;background:radial-gradient(circle, rgba(217,70,239,.34), transparent 62%);animation:drift3 32s ease-in-out infinite}
#aurora .b4{width:28rem;height:28rem;right:22%;top:8rem;background:radial-gradient(circle, rgba(248,113,113,.20), transparent 62%);animation:drift1 36s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4.5rem,3rem) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5.5rem,2.5rem) scale(1.10)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3.5rem,4.5rem) scale(1.18)}}
@media (prefers-reduced-motion: reduce){#aurora .blob{animation:none}}

/* brand color helpers */
.t-vio{color:var(--vio300)} .t-vio2{color:var(--vio200)} .t-coral{color:var(--coral)} .t-dim{color:var(--dim)} .t-faint{color:var(--faint)}
.bg-panel{background:var(--panel)}

/* eyebrow / labels */
.eyebrow{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--vio300);font-weight:400}
.eyebrow-coral{color:var(--coral)}
.cap{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--faint)}

/* shells + cards */
.shell{background:linear-gradient(to bottom right, rgba(196,181,253,.28), rgba(255,255,255,.08), rgba(99,102,241,.20));border-radius:1.55rem;padding:1px}
.shell-soft{background:linear-gradient(to bottom right, rgba(255,255,255,.14), rgba(255,255,255,.05), rgba(167,139,250,.10));border-radius:1.5rem;padding:1px}
.shell-steel{background:linear-gradient(150deg, rgba(255,255,255,.26), rgba(255,255,255,.07) 46%, rgba(255,255,255,.16));border-radius:1.5rem;padding:1px}
.glass{background:rgba(255,255,255,.035);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.card{border-radius:1.5rem;background:var(--panel)}
.chip{border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035)}

/* buttons */
.btn{font-family:inherit;font-weight:500;font-size:14px;padding:.7rem 1.15rem;border-radius:999px;border:none;cursor:pointer;
  background:var(--vio500);color:#fff;transition:background .2s,transform .12s,box-shadow .2s}
.btn:hover{background:#7c4ff0}
.btn-light{background:#FAFAFA;color:#0B0A12}.btn-light:hover{background:#fff;box-shadow:0 1.2rem 3rem rgba(150,120,255,.25)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}.btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.28)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--vio300);outline-offset:3px;border-radius:8px}

/* dotted logo mark */
.dotmark{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:20px;height:20px;transform:rotate(45deg)}
.dotmark i{width:3.5px;height:3.5px;border-radius:50%;background:var(--vio300)}
.dotmark i:nth-child(5){background:var(--coral)}
.dotfield{background-image:radial-gradient(circle, rgba(196,181,253,.5) 0.05rem, transparent 0.075rem);background-size:1.35rem 1.35rem}

/* nav */
.nav{position:relative;z-index:30;max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1.3rem 1.5rem}
.nav .brand{display:flex;align-items:center;gap:.75rem;color:#fff}
.nav .brand b{font-weight:500;font-size:17px;letter-spacing:-.02em}
.nav .links{display:flex;gap:1.6rem;font-size:13.5px;color:var(--dim)}
.nav .links a:hover{color:#fff}
@media(max-width:720px){.nav .links{display:none}}

/* reveal */
.rise{transform:translateY(26px);opacity:0;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s}
.rise.in{transform:none;opacity:1}
@media (prefers-reduced-motion: reduce){.rise{transform:none;opacity:1}}

/* deep-dive link */
.deep{display:inline-flex;align-items:center;gap:.4rem;color:var(--vio300);font-size:13px}
.deep:hover{color:var(--vio200)}
.cite{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--vio300);background:rgba(99,102,241,.12);padding:.15rem .5rem;border-radius:5px;font-variant-numeric:tabular-nums}

/* ============ demonstration / map stage ============ */
.demo-stage{position:relative;height:26rem;border-radius:1.2rem;overflow:hidden;background:radial-gradient(120% 90% at 50% -10%, rgba(139,92,246,.12), transparent 60%), #0a0912;border:1px solid var(--hair)}
.dnode{position:absolute;border-radius:.7rem;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);backdrop-filter:blur(6px);padding:.35rem .7rem;font-size:12.5px;color:var(--vio100);white-space:nowrap;will-change:transform,opacity}
.dnode.grp{background:rgba(139,92,246,.16);border-color:rgba(167,139,250,.5);color:var(--vio200);font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:10.5px}
.dnode.warn{border-color:rgba(248,113,113,.6);box-shadow:0 0 0 3px rgba(248,113,113,.14)}
.dwire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.dstep-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .3s,transform .3s;cursor:pointer}
.dstep-dot.on{background:var(--vio400);transform:scale(1.35)}

/* ============ lesson layout ============ */
.lesson{position:relative;z-index:10;max-width:820px;margin:0 auto;padding:2rem 24px 6rem}
.lesson-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2.5rem}
.crumbs{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.12em}
.crumbs a{color:var(--dim)} .crumbs a:hover{color:#fff}
.lesson h1{font-size:clamp(28px,5vw,40px);font-weight:500;line-height:1.05;margin-bottom:.6rem}
.lesson .sub{color:var(--dim);font-size:16px;max-width:60ch}

/* the six beats */
.beat{position:relative;padding:2.2rem 0;border-top:1px dashed var(--hair)}
.beat:first-of-type{border-top:none}
.beat-lab{display:inline-flex;align-items:center;gap:.5rem;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:1rem}
.beat-lab .n{display:inline-flex;width:1.4rem;height:1.4rem;align-items:center;justify-content:center;border-radius:.5rem;background:rgba(248,113,113,.14);color:var(--coral);font-size:11px}
.beat h2{font-size:22px;font-weight:500;margin-bottom:.7rem}
.beat p{font-size:16px;color:var(--text)}
.callout{border-left:2px solid var(--vio400);padding:.2rem 0 .2rem 1rem;color:var(--dim);font-size:15px;margin:1rem 0}
.pull{font-family:Newsreader,Georgia,serif;font-style:italic;font-size:19px;line-height:1.5;color:#fff}
.pull .src{display:block;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;font-style:normal;color:var(--faint);margin-top:.4rem}

/* level switch */
.levels{display:inline-flex;gap:.4rem;margin-bottom:1rem;flex-wrap:wrap}
.levels button{font-family:ui-monospace,Menlo,monospace;font-size:11px;padding:.35rem .8rem;border-radius:.5rem;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--dim);cursor:pointer}
.levels button.on{border-color:var(--vio400);background:rgba(139,92,246,.14);color:var(--vio200);font-weight:600}

/* exercise / do-it card */
.exercise{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:1rem;padding:1.3rem 1.4rem;margin-top:1rem}
.exercise .lab{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--vio300);margin-bottom:.6rem}
.prompt-box{background:#0d0b16;border:1px solid var(--hair);border-radius:.8rem;padding:.9rem 1rem;position:relative;margin-top:.8rem}
.prompt-box .pl{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--vio300);margin-bottom:.5rem}
.prompt-box p{font-size:13px;color:#cfc9dd;margin:0;line-height:1.5}
.prompt-box .copy{position:absolute;top:.7rem;right:.7rem;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:.15rem .5rem;cursor:pointer;background:none}
.prompt-box .copy:hover{color:#fff}
.checkpoint{display:flex;gap:.8rem;align-items:flex-start;background:rgba(95,196,135,.06);border:1px solid rgba(95,196,135,.25);border-radius:1rem;padding:1.1rem 1.3rem;margin-top:1rem}
.checkpoint .ic{color:var(--emerald);flex:none;margin-top:.1rem}

/* recognition demo */
.passage{border-radius:.8rem;background:rgba(255,255,255,.04);padding:1rem 1.1rem;color:#efeaf7;font-size:15.5px;line-height:1.55;transition:filter .4s,opacity .4s}
.passage.hidden{filter:blur(7px);opacity:.45;user-select:none}
.opt{font-family:inherit;font-size:14px;color:var(--text);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:.7rem;padding:.6rem .9rem;cursor:pointer;transition:.14s}
.opt:hover{border-color:var(--vio400);color:#fff}
.opt.right{border-color:var(--emerald);background:rgba(95,196,135,.12);color:#fff}
.opt.wrong{border-color:var(--coral);opacity:.6}

/* depth ladder */
.ladder{display:flex;flex-direction:column-reverse;gap:.4rem}
.rung{display:flex;align-items:center;gap:.9rem;border:1px solid var(--line);border-radius:.7rem;padding:.7rem 1rem;background:rgba(255,255,255,.02);cursor:pointer;transition:.18s}
.rung:hover{border-color:var(--vio400)}
.rung.on{border-color:var(--vio400);background:rgba(139,92,246,.12)}
.rung .lv{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--vio300);width:1.5rem;flex:none}
.rung .depthbar{flex:none;width:70px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--coral),var(--vio400),var(--emerald));opacity:.25}
.rung.on .depthbar{opacity:1}

/* canvas mapping playground */
.mapwrap{position:relative;border:1px solid var(--line);border-radius:1rem;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%, rgba(139,92,246,.08), transparent 60%), #0a0912;touch-action:none}
.mapwrap canvas{display:block;width:100%;height:22rem}
.map-tools{display:flex;flex-wrap:wrap;gap:.5rem;padding:.7rem;border-top:1px solid var(--hair);background:rgba(255,255,255,.02)}
.map-tools .swatch{width:1.4rem;height:1.4rem;border-radius:.4rem;border:2px solid transparent;cursor:pointer}
.map-tools .swatch.on{border-color:#fff}
.map-hint{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--dim);padding:.2rem .4rem}

/* ============ techniques table ============ */
.techtable{width:100%;border-collapse:separate;border-spacing:0}
.techtable th{text-align:left;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:.6rem .8rem;border-bottom:1px solid var(--line);font-weight:400}
.techtable td{padding:1rem .8rem;border-bottom:1px solid var(--hair);vertical-align:top;font-size:14px;color:var(--text)}
.techtable tr:hover td{background:rgba(255,255,255,.02)}
.techtable .name{color:#fff;font-weight:500;font-size:15px}
.techtable .when{color:var(--dim);font-size:13px}
.tag{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:10px;padding:.15rem .5rem;border-radius:999px;border:1px solid var(--line);color:var(--vio200)}
.tag.encode{border-color:rgba(167,139,250,.5);color:var(--vio300)}
.tag.consolidate{border-color:rgba(99,102,241,.5);color:#9fb0ff}
.tag.run{border-color:rgba(248,113,113,.5);color:var(--coral)}

/* footer */
.foot{position:relative;z-index:10;border-top:1px solid var(--hair);padding:3.5rem 24px 5rem;text-align:center;color:var(--dim)}
.foot .big{font-family:Newsreader,Georgia,serif;font-style:italic;font-size:22px;color:#fff;max-width:30ch;margin:0 auto .9rem;line-height:1.4}
.foot .meta{font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1.6;color:var(--faint)}

/* anchored figures (AI diagrams) */
.figure{margin:1.4rem 0 .4rem;border-radius:1rem;overflow:hidden;border:1px solid var(--line);background:#0a0912;box-shadow:0 1.4rem 3.5rem -1.4rem rgba(84,62,170,.35)}
.figure img{display:block;width:100%;height:auto}
.figure figcaption{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--dim);padding:.7rem .95rem;border-top:1px solid var(--hair);line-height:1.5}

/* gallery / slideshow (what-done-looks-like, before/after) */
.gallery{border:1px solid var(--line);border-radius:1rem;overflow:hidden;background:#0a0912;margin:1.4rem 0 .4rem;box-shadow:0 1.4rem 3.5rem -1.4rem rgba(84,62,170,.35)}
.gallery-stage{position:relative;aspect-ratio:16/9;background:#0a0912}
.gallery-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.gallery-stage img.on{opacity:1}
.gallery-cap{padding:.75rem .95rem;font-size:14px;color:var(--text);border-top:1px solid var(--hair);min-height:2.4rem;line-height:1.5}
.gallery-cap b{color:#fff}
.gallery-nav{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;border-top:1px solid var(--hair)}
.g-dots{display:flex;gap:.45rem;flex:1;justify-content:center}
.g-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;transition:background .2s,transform .2s}
.g-dots span.on{background:var(--vio400);transform:scale(1.3)}
.gallery-nav button{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--dim);background:none;border:1px solid var(--line);border-radius:8px;padding:.35rem .75rem;cursor:pointer}
.gallery-nav button:hover{color:#fff;border-color:var(--vio400)}

/* utility */
.tabnums{font-variant-numeric:tabular-nums}
.hr{height:1px;background:var(--hair);border:0;margin:2.5rem 0}