/* Resolume Arena Masterclass — web edition */
:root {
  --bg: #ffffff; --bg2: #f5f6fc; --ink: #12142a; --ink2: #3a3f66; --muted: #5d6385; --line: #e3e5f2;
  --vi: #5b3df5; --vi2: #3a2bb0; --cy: #0891b2; --mg: #d61f7a; --am: #b46f00; --ac: #4d7c0f; --rd: #dc2626;
  --dark: #0f1124; --dark2: #171a35; --darkline: #2a2f63; --darkink: #e8eaff;
  --tip-bg: #f3f0ff; --tip-bd: #dcd3ff; --pit-bg: #fff1f6; --pit-bd: #ffd0e2; --safe-bg: #fff8e6; --safe-bd: #fbe2a6;
  --try-bg: #ecfbff; --try-bd: #bdeefa; --why-bg: #f1f9e8; --why-bd: #d5ecb9;
  --radius: 14px; --maxw: 760px; color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0b0c1d; --bg2: #13152c; --ink: #e9ebff; --ink2: #c3c7ee; --muted: #9196c0; --line: #252a52;
  --vi: #9d86ff; --vi2: #b9a8ff; --cy: #22d3ee; --mg: #ff6fb5; --am: #fbbf24; --ac: #a3e635; --rd: #fb7185;
  --dark: #121433; --dark2: #1a1d42; --darkline: #2f3570;
  --tip-bg: #1b1740; --tip-bd: #3a3080; --pit-bg: #2a1225; --pit-bd: #5a2148; --safe-bg: #2a2110; --safe-bd: #5b4615;
  --try-bg: #0d2430; --try-bd: #154a5c; --why-bg: #172510; --why-bd: #2f4d1c; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0b0c1d; --bg2: #13152c; --ink: #e9ebff; --ink2: #c3c7ee; --muted: #9196c0; --line: #252a52;
  --vi: #9d86ff; --vi2: #b9a8ff; --cy: #22d3ee; --mg: #ff6fb5; --am: #fbbf24; --ac: #a3e635; --rd: #fb7185;
  --dark: #121433; --dark2: #1a1d42; --darkline: #2f3570;
  --tip-bg: #1b1740; --tip-bd: #3a3080; --pit-bg: #2a1225; --pit-bd: #5a2148; --safe-bg: #2a2110; --safe-bd: #5b4615;
  --try-bg: #0d2430; --try-bd: #154a5c; --why-bg: #172510; --why-bd: #2f4d1c; color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
img, svg { max-width: 100%; }
a { color: var(--vi); text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.015em; }
code { font: .86em "JetBrains Mono", ui-monospace, Menlo, monospace; background: var(--bg2); color: var(--vi2); padding: .1em .4em; border-radius: 5px; border: 1px solid var(--line); word-break: break-word; }
kbd { font: 600 .8em Inter, sans-serif; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: .05em .4em; background: var(--bg2); }
.menu { font-weight: 600; color: var(--vi2); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--bg); padding: 8px 12px; }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1240px; margin: 0 auto; padding: 0 20px; height: 62px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 15px; white-space: nowrap; }
.logo { width: 26px; height: 26px; border-radius: 8px; background: conic-gradient(from 200deg, #22d3ee, #8b6cff, #f0459b, #22d3ee); box-shadow: 0 0 18px rgba(139,108,255,.5); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { color: var(--ink2); text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 7px 11px; border-radius: 8px; }
.nav a:hover, .nav a[aria-current] { background: var(--bg2); color: var(--ink); }
.nav a.dl { border: 1px solid var(--line); }
.tools { display: flex; align-items: center; gap: 12px; }
.prog { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.prog-bar { width: 70px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.prog-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22d3ee, #8b6cff, #f0459b); transition: width .4s; }
.theme { display: grid; place-items: center; background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 16px; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font: 600 15px Inter, sans-serif; text-decoration: none; border: 1px solid rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.08); cursor: pointer; }
.btn.primary { background: linear-gradient(90deg, #6d4dff, #e5177e); border-color: transparent; box-shadow: 0 8px 30px rgba(214,31,122,.35); }
.phero .btn { color: var(--ink); border-color: var(--line); background: var(--bg2); }

/* home hero */
.hero, .mhero { position: relative; background-size: cover; background-position: center; color: #fff; }
.hero::before, .mhero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,22,.25), rgba(8,9,22,.55) 45%, rgba(8,9,22,.96)); }
.hero-in, .mhero-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 120px 20px 56px; }
.hero h1 { font-size: clamp(44px, 8vw, 96px); font-weight: 900; margin: 6px 0 14px; letter-spacing: -.035em; line-height: .95; }
.hero h1 span { color: #ff8fca; text-shadow: 0 0 50px rgba(240,69,155,.5); }
.eyebrow { font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: #9fe8ff; margin: 0; }
.lede { font-size: clamp(17px, 2.2vw, 21px); max-width: 640px; color: #d9dcf7; margin: 0 0 26px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 40px 20px 60px; }
.search { margin: 0 0 30px; }
.search label { display: block; font-weight: 700; margin-bottom: 8px; }
.search input { width: 100%; font: 400 17px Inter, sans-serif; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg2); color: var(--ink); }
.search input:focus { outline: none; border-color: var(--vi); }
.results { display: grid; gap: 8px; margin-top: 10px; }
.results a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--bg); }
.results a:hover { border-color: var(--vi); }
.results small { color: var(--muted); display: block; font-size: 13px; }
.results mark { background: color-mix(in srgb, var(--am) 30%, transparent); color: inherit; border-radius: 3px; }
.phase { margin: 38px 0; }
.ph-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 16px; }
.ph-head span { font-weight: 800; color: var(--mg); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.ph-head h2 { margin: 0; font-size: 26px; font-weight: 800; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.card { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: var(--bg); transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,20,60,.18); }
.thumb { position: relative; display: block; aspect-ratio: 2/1; background-size: cover; background-position: center; }
.cnum { position: absolute; left: 12px; bottom: 6px; font: 900 40px/1 Inter, sans-serif; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.tick { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%; background: #22c55e; color: #fff; display: none; place-items: center; font-weight: 800; }
.card.done .tick { display: grid; }
.cbody { display: block; padding: 12px 14px 14px; } .cbody b { display: block; font-size: 16px; line-height: 1.3; } .cbody small { color: var(--muted); }

/* page hero (start/toolkit) */
.phero { background: radial-gradient(1200px 400px at 10% 0%, rgba(139,108,255,.18), transparent), var(--bg2); border-bottom: 1px solid var(--line); }
.phero-in { max-width: 1240px; margin: 0 auto; padding: 56px 20px 40px; }
.phero h1 { font-size: clamp(36px, 6vw, 60px); font-weight: 900; margin: 6px 0 10px; }
.phero .eyebrow { color: var(--mg); } .phero .lede { color: var(--ink2); }

/* module hero */
.mhero-in { padding-top: 90px; padding-bottom: 44px; }
.crumbs { font-size: 13.5px; color: #c5c9ee; margin-bottom: 18px; } .crumbs a { color: #9fe8ff; }
.mnum { font: 900 clamp(64px, 11vw, 120px)/.85 Inter, sans-serif; letter-spacing: -.05em; text-shadow: 0 0 40px rgba(185,168,255,.55); }
.mnum::after { content: ""; display: block; width: 90px; height: 6px; margin: 16px 0 14px; border-radius: 3px; background: linear-gradient(90deg,#22d3ee,#8b6cff,#f0459b); }
.mhero h1 { font-size: clamp(30px, 5vw, 52px); font-weight: 800; margin: 0 0 12px; max-width: 900px; }
.hook { font-size: clamp(16px, 2vw, 19px); color: #d9dcf7; max-width: 720px; margin: 0 0 18px; }
.meta { display: flex; gap: 10px; flex-wrap: wrap; } .meta span { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); }
.meta .done-flag { display: none; background: #22c55e; border-color: #22c55e; } body.is-done .meta .done-flag { display: inline-block; }

.mwrap { max-width: 1240px; margin: 0 auto; padding: 36px 20px 60px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; }
.side { position: sticky; top: 82px; align-self: start; max-height: calc(100vh - 100px); overflow: auto; }
.toc summary { font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); cursor: pointer; margin-bottom: 10px; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--ink2); text-decoration: none; font-size: 14.5px; line-height: 1.35; border-left: 3px solid transparent; }
.toc a b { color: var(--vi); margin-right: 4px; }
.toc a:hover { background: var(--bg2); } .toc a.on { background: var(--bg2); border-left-color: var(--vi); color: var(--ink); }
.toc .sep { height: 1px; background: var(--line); margin: 10px 0; }
.toc .x::before { content: "●"; margin-right: 8px; font-size: 10px; vertical-align: 2px; }
.x-recipe::before { color: #f0459b; } .x-challenge::before { color: #84cc16; } .x-lab::before { color: #22d3ee; } .x-quiz::before { color: var(--vi); }
.complete { font: 600 14px Inter, sans-serif; border: 1.5px solid var(--vi); color: var(--vi); background: transparent; padding: 10px 14px; border-radius: 10px; cursor: pointer; margin-top: 16px; width: 100%; }
.complete.on { background: #22c55e; border-color: #22c55e; color: #fff; }
.complete.big { width: auto; padding: 14px 26px; font-size: 16px; }

/* prose */
.prose { max-width: var(--maxw); min-width: 0; }
.prose.narrow { margin: 0 auto; padding: 40px 20px 60px; }
.prose p, .prose li { color: var(--ink); }
.prose strong { font-weight: 650; }
.outcomes { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 28px; }
.prose .outcomes h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mg); }
.outcomes ul { margin: 0; padding-left: 20px; } .outcomes li { margin: 4px 0; }
h2.sec { font-size: clamp(24px, 3.2vw, 30px); font-weight: 800; margin: 56px 0 14px; padding-top: 20px; border-top: 2px solid var(--ink); display: flex; gap: 12px; align-items: baseline; }
h2.sec .anchor { font-size: 15px; font-weight: 800; color: #fff; background: var(--vi); padding: 3px 9px; border-radius: 7px; text-decoration: none; flex: none; transform: translateY(-3px); }
:root[data-theme="dark"] h2.sec .anchor { color: #0b0c1d; }
h2.plain { font-size: 26px; font-weight: 800; margin: 40px 0 12px; }
.prose h3 { font-size: 19px; margin: 26px 0 8px; }
.tw { overflow-x: auto; margin: 16px 0 22px; border-radius: 10px; border: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 520px; }
th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #12142a; padding: 10px 12px; }
td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
tr:nth-child(even) td { background: var(--bg2); }
figure.diagram { margin: 26px 0 30px; }
figure.diagram svg { width: 100%; height: auto; display: block; border-radius: 14px; }
figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--vi); }
.steps li { margin: 8px 0; }

/* boxes */
.box { border-radius: var(--radius); margin: 22px 0 26px; border: 1px solid var(--line); background: var(--bg2); overflow: hidden; }
.bh { display: flex; align-items: center; gap: 10px; padding: 12px 18px; font-weight: 750; font-size: 17px; flex-wrap: wrap; }
.ic { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; color: #fff; flex: none; font-weight: 800; }
.kind { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; font-weight: 700; }
.bb { padding: 0 20px 14px; } .bb > :first-child { margin-top: 0; } .bb > :last-child { margin-bottom: 0; }
.box.tip { background: var(--tip-bg); border-color: var(--tip-bd); } .tip .bh { color: var(--vi2); } .tip .ic { background: #5b3df5; }
.box.pitfall { background: var(--pit-bg); border-color: var(--pit-bd); } .pitfall .bh { color: var(--mg); } .pitfall .ic { background: #d61f7a; }
.box.safe { background: var(--safe-bg); border-color: var(--safe-bd); } .safe .bh { color: var(--am); } .safe .ic { background: #c27c00; }
.box.try { background: var(--try-bg); border-color: var(--try-bd); } .try .bh { color: var(--cy); } .try .ic { background: #0891b2; }
.box.why { background: var(--why-bg); border-color: var(--why-bd); } .why .bh { color: var(--ac); } .why .ic { background: #4d7c0f; }
.box.photo { border-style: dashed; } .photo .ic { background: #8a90b8; }
.box.recipe, .box.challenge, .box.lab { background: var(--dark); color: var(--darkink); border-color: var(--darkline); }
.recipe .bh, .challenge .bh, .lab .bh { font-size: 19px; padding: 16px 20px 12px; }
.recipe .bh { color: #ff8fca; background: linear-gradient(90deg, rgba(240,69,155,.25), transparent); } .recipe .ic { background: #f0459b; }
.challenge .bh { color: #b8f26b; background: linear-gradient(90deg, rgba(163,230,53,.2), transparent); } .challenge .ic { background: #6aa320; }
.lab .bh { color: #7ce3f7; background: linear-gradient(90deg, rgba(34,211,238,.2), transparent); } .lab .ic { background: #0891b2; }
.recipe .bb, .challenge .bb, .lab .bb { padding: 6px 22px 20px; }
.recipe p, .recipe li, .challenge p, .challenge li, .lab p, .lab li { color: var(--darkink); }
.recipe strong, .challenge strong, .lab strong { color: #fff; }
.recipe code, .challenge code, .lab code { background: #232750; color: #c9bfff; border-color: #3a4080; }
.recipe .menu, .challenge .menu, .lab .menu { color: #9fe8ff; }
.recipe kbd, .lab kbd { background: #232750; color: #fff; border-color: #4a5090; }
.recipe .tw, .lab .tw { border-color: var(--darkline); } .recipe th, .lab th { background: #2a2f63; }
.recipe td, .lab td { border-color: var(--darkline); } .recipe tr:nth-child(even) td, .lab tr:nth-child(even) td { background: #161a36; }
.recipe ol, .lab ol { counter-reset: s; list-style: none; padding-left: 0; }
.recipe ol > li, .lab ol > li { counter-increment: s; position: relative; padding-left: 40px; margin: 10px 0; }
.recipe ol > li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: #2a2f63; color: #fff; font: 800 13px/26px Inter; text-align: center; }
.lab ol > li .chk, .checks li .chk { position: absolute; left: 0; top: 2px; width: 24px; height: 24px; margin: 0; accent-color: #22d3ee; cursor: pointer; }
.lab ol > li.checked, .checks li.checked { opacity: .55; text-decoration: line-through; text-decoration-color: rgba(124,227,247,.6); }
.lab ol > li:not(:has(.chk))::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: #2a2f63; color: #fff; font: 800 13px/26px Inter; text-align: center; }
.checks { list-style: none; padding-left: 0; } .checks li { position: relative; padding-left: 38px; margin: 10px 0; }
.labnotes label { display: block; font-weight: 600; font-size: 15px; margin-top: 14px; color: #7ce3f7; } .labnotes small { font-weight: 400; color: #9aa0d0; }
.labnotes textarea { width: 100%; margin-top: 6px; border-radius: 10px; border: 1px solid #3a4080; background: #0b0d1e; color: #fff; font: 15px/1.5 Inter, sans-serif; padding: 10px 12px; resize: vertical; }
.box.ref { background: var(--bg); border: 2px solid var(--ink); } .ref .bh { background: var(--ink); color: var(--bg); } .ref .ic { background: var(--bg); color: var(--ink); }
.ref .bb { padding-top: 14px; }
.box.trouble { background: var(--bg); border-color: color-mix(in srgb, var(--rd) 35%, transparent); } .trouble .bh { color: var(--rd); } .trouble .ic { background: #dc2626; }
.box.quiz { background: var(--bg); border: 2px solid var(--vi); } .quiz .bh { color: var(--vi); } .quiz .ic { background: #5b3df5; }
.quizintro { font-size: 14.5px; color: var(--muted); } .qscore { font-weight: 700; color: var(--ac); margin-left: 6px; }
.quizlist { padding-left: 22px; } .quizlist li { margin: 0 0 10px; }
.qa details { border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
.qa summary { cursor: pointer; padding: 12px 14px; display: flex; gap: 12px; justify-content: space-between; align-items: center; list-style: none; font-weight: 600; }
.qa summary::-webkit-details-marker { display: none; }
.reveal { flex: none; font-size: 12.5px; font-weight: 700; color: var(--vi); border: 1px solid var(--vi); border-radius: 999px; padding: 3px 10px; }
.qa details[open] .reveal { opacity: .4; }
.ans { padding: 0 14px 12px; border-top: 1px dashed var(--line); } .ans p { margin: 10px 0; }
.selfmark { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.selfmark button { font: 600 13px Inter, sans-serif; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.qa[data-mark="got"] .selfmark [data-mark="got"] { background: #22c55e; color: #fff; border-color: #22c55e; }
.qa[data-mark="review"] .selfmark [data-mark="review"] { background: #f59e0b; color: #111; border-color: #f59e0b; }
.qa[data-mark="got"] summary { box-shadow: inset 4px 0 0 #22c55e; } .qa[data-mark="review"] summary { box-shadow: inset 4px 0 0 #f59e0b; }
.box.story { background: var(--bg2); } .story .ic { background: #e5484d; }
.video-slot iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px; display: block; margin-bottom: 10px; }
.video-soon { font-size: 14.5px; color: var(--muted); margin: 0 0 8px; }
.storyboard summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
.box.deliver { background: var(--bg); border: 1.5px solid var(--ac); } .deliver .bh { color: var(--ac); } .deliver .ic { background: #4d7c0f; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .legend .box { margin: 0; }

.finish { margin: 50px 0 20px; padding: 26px; border-radius: var(--radius); text-align: center; background: var(--bg2); border: 1px solid var(--line); }
.finish p { margin: 0 0 12px; font-weight: 600; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.pn { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.pn:hover { border-color: var(--vi); } .pn small { color: var(--muted); display: block; font-size: 13px; } .pn b { font-size: 16px; }
.pn.next { text-align: right; }
.gloss { columns: 2; column-gap: 32px; } .gloss dt { font-weight: 750; margin-top: 10px; break-after: avoid; } .gloss dd { margin: 0 0 0 0; color: var(--ink2); break-inside: avoid; }
.toolkit td:empty { height: 34px; }

.foot { border-top: 1px solid var(--line); background: var(--bg2); }
.foot-in { max-width: 1240px; margin: 0 auto; padding: 28px 20px 40px; font-size: 13.5px; color: var(--muted); }
.foot-in p { margin: 0 0 8px; }

@media (max-width: 960px) {
  .mwrap { grid-template-columns: 1fr; gap: 0; padding-top: 20px; }
  .side { position: static; max-height: none; margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
  .toc summary { margin: 0; } .toc[open] summary { margin-bottom: 10px; }
  .side-complete { display: none; }
  .nav a:not(.dl):not([href="index.html"]) { display: none; }
  .prog-bar { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .top-in { gap: 10px; padding: 0 16px; } .brand span:last-child b { display: none; }
  .hero-in, .mhero-in { padding-left: 16px; padding-right: 16px; } .hero-in { padding-top: 80px; }
  .wrap, .mwrap, .prose.narrow, .phero-in { padding-left: 16px; padding-right: 16px; }
  .legend, .pager { grid-template-columns: 1fr; } .pn.next { text-align: left; }
  .gloss { columns: 1; }
  .bb, .recipe .bb, .challenge .bb, .lab .bb { padding-left: 16px; padding-right: 16px; }
  .qa summary { flex-direction: column; align-items: flex-start; }
}
@media print {
  .top, .side, .foot, .finish, .pager, .labnotes, .selfmark, .search, .cta, .phero .btn { display: none !important; }
  body { font-size: 11pt; } .mwrap { display: block; } .qa details { border: 0; }
  .hero, .mhero { color: #000; background: none !important; } .hero::before, .mhero::before { display: none; }
}

.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 16px; } .foot-nav a { font-weight: 600; font-size: 14.5px; }

/* ================= paid edition: sales, pricing, auth ================= */
.nav a.nav-cta { background: linear-gradient(90deg, #6d4dff, #e5177e); color: #fff; }
.nav a.nav-cta:hover { color: #fff; filter: brightness(1.08); }
.sales-hero .hero-in { padding-top: 140px; padding-bottom: 80px; }
.sec-head { max-width: 760px; margin: 0 0 30px; } .sec-head.center { margin: 0 auto 34px; text-align: center; }
.kicker { font-size: 12.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--mg); margin: 0 0 8px; }
.sec-head h2 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 900; margin: 0 0 12px; letter-spacing: -.025em; }
.sub { font-size: 18px; color: var(--ink2); margin: 0; }
#inside, #curriculum { padding-top: 80px; }
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--bg); }
.feat h3 { font-size: 19px; margin: 12px 0 6px; } .feat p { margin: 0; color: var(--ink2); font-size: 15.5px; }
.feat-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; background: linear-gradient(135deg, #22d3ee, #8b6cff 55%, #f0459b); }
.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 30px; border-radius: var(--radius); overflow: hidden; }
.mosaic span { aspect-ratio: 2/1.3; background-size: cover; background-position: center; }
.band { background: #0b0c1d; color: #e9ebff; margin-top: 80px; }
.band-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; padding-top: 70px; padding-bottom: 70px; }
.band h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 900; margin: 0 0 14px; } .band p { color: #c3c7ee; font-size: 18px; }
.ticks { list-style: none; padding: 0; margin: 0; } .ticks li { position: relative; padding-left: 30px; margin: 9px 0; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #22c55e; font-weight: 900; }
.band .ticks { columns: 2; column-gap: 28px; } .band .ticks li { break-inside: avoid; color: #e9ebff; }
.cur-ph { margin-bottom: 26px; }
.cur-ph h3 { display: flex; gap: 12px; align-items: baseline; font-size: 21px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.cur-ph h3 span { color: var(--mg); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.cur-row { border-bottom: 1px solid var(--line); }
.cur-row summary { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 14px 4px; cursor: pointer; list-style: none; }
.cur-row summary::-webkit-details-marker { display: none; }
.cur-n { font: 900 26px/1 Inter, sans-serif; color: var(--vi); }
.cur-t b { display: block; font-size: 17px; } .cur-t small { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.45; margin-top: 2px; }
.cur-time { font-size: 13px; color: var(--muted); white-space: nowrap; }
.cur-row[open] summary .cur-t b { color: var(--vi); }
.cur-body { padding: 0 4px 16px 70px; } .cur-k { font-weight: 700; margin: 0 0 4px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--mg); }
.cur-body ul { margin: 0 0 8px; } .cur-inc { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.pricing-sec { background: radial-gradient(900px 400px at 50% 0%, rgba(139,108,255,.18), transparent), var(--bg2); margin-top: 70px; padding: 80px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pricing-sec .wrap { padding-top: 0; padding-bottom: 0; }
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 400px)); justify-content: center; gap: 22px; }
.price-card { position: relative; background: var(--bg); border: 1.5px solid var(--line); border-radius: 20px; padding: 30px 28px; }
.price-card.best { border-color: var(--vi); box-shadow: 0 20px 50px rgba(91,61,245,.18); }
.price-card.hidden { display: none; }
.price-card h3 { margin: 0 0 6px; font-size: 20px; }
.amt { margin: 0; display: flex; align-items: baseline; gap: 6px; } .amt b { font-size: 52px; font-weight: 900; letter-spacing: -.03em; } .amt span { color: var(--muted); }
.pnote { color: var(--ink2); margin: 4px 0 18px; }
.price-card .ticks { margin-top: 20px; font-size: 15px; }
.badge { position: absolute; top: -13px; right: 22px; background: linear-gradient(90deg, #6d4dff, #e5177e); color: #fff; font-size: 12.5px; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.btn.wide { width: 100%; justify-content: center; }
.secure { text-align: center; color: var(--muted); font-size: 14px; margin-top: 22px; }
.narrowish { max-width: 860px; } #faq { padding-top: 80px; }
.faq { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; padding: 18px 4px; font-weight: 700; font-size: 17.5px; list-style: none; position: relative; padding-right: 34px; }
.faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 24px; color: var(--vi); }
.faq[open] summary::after { content: "–"; } .faq p { margin: 0 4px 18px; color: var(--ink2); }
.final-cta { text-align: center; margin: 60px 0 20px; padding: 40px 20px; border-radius: 20px; background: #0b0c1d; color: #fff; }
.final-cta h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 900; margin: 0 0 18px; } .final-cta .muted a { color: #9fe8ff; }
.muted { color: var(--muted); } .small { font-size: 14px; }
.tplnote { background: var(--safe-bg); border: 1px solid var(--safe-bd); padding: 12px 16px; border-radius: 10px; }
.legal h2 { font-size: 21px; margin: 28px 0 8px; }

/* auth / account */
.auth-main { min-height: calc(100vh - 220px); display: grid; place-items: start center; padding: 60px 16px 80px;
  background: radial-gradient(900px 500px at 50% -10%, rgba(139,108,255,.22), transparent); }
.auth-card { width: 100%; max-width: 470px; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 32px 30px; box-shadow: 0 24px 60px rgba(20,20,60,.12); }
.auth-card h1 { font-size: 30px; font-weight: 900; margin: 0 0 10px; letter-spacing: -.02em; }
.auth-form { display: grid; gap: 14px; margin: 16px 0 10px; }
.auth-form label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; } .auth-form small { font-weight: 400; color: var(--muted); }
.auth-form input[type=email], .auth-form input[type=password] { font: 400 16px Inter, sans-serif; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg2); color: var(--ink); }
.auth-form input:focus { outline: none; border-color: var(--vi); }
.auth-form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14.5px; } .check input { margin-top: 4px; }
.plans { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; } .plans legend { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.plan-opt { display: flex !important; gap: 10px; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-weight: 500 !important; }
.plan-opt:has(input:checked) { border-color: var(--vi); background: var(--tip-bg); }
.form-err { background: var(--pit-bg); border: 1px solid var(--pit-bd); color: var(--mg); padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.form-ok { background: var(--try-bg); border: 1px solid var(--try-bd); color: var(--cy); padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.authpage .btn.primary, .authpage .btn.ghost { color: #fff; }
.btn.ghost { background: var(--bg2); color: var(--ink) !important; border-color: var(--line); width: 100%; justify-content: center; }
.acct { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; margin: 18px 0 22px; } .acct dt { color: var(--muted); font-weight: 600; } .acct dd { margin: 0; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.pill.ok { background: #dcfce7; color: #166534; } .pill.no { background: #fef3c7; color: #92400e; }
.acct-actions { display: grid; gap: 10px; } .acct-actions .btn.primary { justify-content: center; }
.linkbtn { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; margin-top: 16px; font: 500 14.5px Inter, sans-serif; padding: 0; }
@media (max-width: 960px) { .feats { grid-template-columns: 1fr 1fr; } .band-in { grid-template-columns: 1fr; } .mosaic { grid-template-columns: repeat(4, 1fr); }
  .sales .nav a:not(.nav-cta):not([href="/login"]) { display: none; } .member .nav a[href="/account"] { display: inline-block !important; } }
@media (max-width: 640px) { .feats { grid-template-columns: 1fr; } .band .ticks { columns: 1; } .mosaic { grid-template-columns: repeat(3, 1fr); }
  .cur-row summary { grid-template-columns: 40px 1fr; } .cur-time { display: none; } .cur-body { padding-left: 4px; }
  .sales .brand span:last-child b { display: none; } .authpage .brand span:last-child b { display: none; } .auth-card { padding: 26px 20px; } }
@media (max-width: 960px) {
  .sales .nav a.nav-cta, .sales .nav a[href="/login"], .authpage .nav a, .member .nav a[href="/learn/"], .member .nav a[href="/account"] { display: inline-block !important; }
  .member .nav a.dl { display: none; }
}
@media (max-width: 400px) { .nav a { padding: 7px 8px; font-size: 14px; } .member .prog { display: none; } }

/* ================= landing page artwork ================= */
.hero-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.hero-collage { position: relative; height: 470px; }
.hc { position: absolute; width: 62%; aspect-ratio: 2/1.25; border-radius: 16px; background-size: cover; background-position: center;
  box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.14); overflow: hidden; }
.hc em { position: absolute; left: 12px; bottom: 10px; font: 700 13px Inter, sans-serif; font-style: normal; color: #fff; background: rgba(8,9,22,.62); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px); }
.hc0 { top: 0; right: 0; transform: rotate(4deg); }
.hc1 { top: 150px; left: 0; transform: rotate(-5deg); z-index: 2; }
.hc2 { bottom: 0; right: 6%; transform: rotate(2deg); z-index: 3; }
.strip { display: grid; grid-template-columns: repeat(28, 1fr); height: 74px; }
.strip span { background-size: cover; background-position: center; }
.feat.art { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.feat-art { position: relative; display: block; aspect-ratio: 2/0.85; background-size: cover; background-position: center; }
.feat-art .feat-ic { position: absolute; left: 16px; bottom: -18px; box-shadow: 0 6px 18px rgba(0,0,0,.35); border: 3px solid var(--bg); width: 44px; height: 44px; }
.feat-tx { padding: 26px 22px 22px; }
.feat-tx h3 { margin: 0 0 6px; }
#recipes, #peek { padding-top: 80px; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rcp { margin: 0; border-radius: var(--radius); overflow: hidden; background: #0b0c1d; color: #fff; box-shadow: 0 10px 30px rgba(20,20,60,.15); transition: transform .2s; }
.rcp:hover { transform: translateY(-4px); }
.rcp span { display: block; aspect-ratio: 1/1.05; background-size: cover; background-position: center; }
.rcp figcaption { padding: 12px 14px 14px; } .rcp b { display: block; font-size: 16.5px; } .rcp small { color: #b9bde6; }
.art-band { position: relative; background-size: cover; background-position: center; }
.art-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,22,.96) 30%, rgba(8,9,22,.8)); }
.art-band .band-in { position: relative; }
.kicker.light { color: #ff8fca; }
.peeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.peek { margin: 0; } .peek span { position: relative; display: block; aspect-ratio: 1.45/1; border-radius: var(--radius); background-size: cover; background-position: center top; border: 1px solid var(--line); overflow: hidden; }
.peek i { position: absolute; inset: auto 10px 10px auto; font: 700 12.5px Inter, sans-serif; font-style: normal; color: #fff; background: rgba(8,9,22,.75); padding: 5px 10px; border-radius: 999px; }
.peek figcaption { font-size: 14.5px; font-weight: 600; margin-top: 8px; }
.book-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-top: 90px; }
.book { position: relative; height: 430px; }
.bk { position: absolute; width: 50%; border-radius: 6px; box-shadow: 0 30px 60px rgba(10,10,40,.35), 0 0 0 1px rgba(0,0,0,.08); background: #fff; }
.bk1 { left: 6%; top: 10px; transform: rotate(-6deg); z-index: 3; } .bk2 { left: 30%; top: 30px; transform: rotate(2deg); z-index: 2; } .bk3 { left: 50%; top: 50px; transform: rotate(8deg); }
.book-tx h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 900; margin: 0 0 12px; } .book-tx .ticks { margin-top: 18px; }
.cur-ph { margin-bottom: 30px; }
.ph-banner { position: relative; border-radius: var(--radius); overflow: hidden; background-size: cover; background-position: center; color: #fff; padding: 26px 24px; margin-bottom: 6px; }
.ph-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,22,.92), rgba(8,9,22,.35)); }
.ph-banner > * { position: relative; } .ph-banner span { font: 800 12.5px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #9fe8ff; }
.ph-banner h3 { margin: 4px 0 2px; font-size: 26px; font-weight: 900; border: 0; padding: 0; display: block; } .ph-banner small { color: #c5c9ee; }
.cur-row summary { grid-template-columns: 96px 1fr auto; }
.cur-img { position: relative; display: block; width: 96px; aspect-ratio: 2/1.2; border-radius: 10px; background-size: cover; background-position: center; }
.cur-img span { position: absolute; left: 8px; bottom: 4px; font: 900 20px/1 Inter, sans-serif; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.cur-body { padding-left: 114px; }
.art-price { position: relative; background-size: cover; background-position: center; border: 0; }
.art-price::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,22,.9), rgba(8,9,22,.78)); }
.art-price .wrap { position: relative; } .art-price .sec-head h2 { color: #fff; } .art-price .sub, .art-price .secure { color: #c5c9ee; }
.art-cta { position: relative; background-size: cover; background-position: center; margin: 60px 0 0; border-radius: 0; padding: 0; }
.art-cta::before { content: ""; position: absolute; inset: 0; background: rgba(8,9,22,.72); }
.final-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 90px 20px; text-align: center; color: #fff; }
.final-in h2 { font-size: clamp(28px, 4.4vw, 46px); font-weight: 900; margin: 0 0 20px; } .final-in a:not(.btn) { color: #9fe8ff; } .final-in .small { color: #d9dcf7; margin-top: 14px; }
@media (max-width: 960px) {
  .hero-split { grid-template-columns: 1fr; } .hero-collage { height: 300px; } .hc { width: 55%; } .hc1 { top: 90px; }
  .gallery, .peeks { grid-template-columns: repeat(2, 1fr); } .book-sec { grid-template-columns: 1fr; gap: 20px; } .book { height: 360px; }
  .strip { grid-template-columns: repeat(14, 1fr); height: 60px; } .strip span:nth-child(n+15) { display: none; }
}
@media (max-width: 640px) {
  .hero-collage { height: 230px; } .hc em { font-size: 11px; }
  .gallery { gap: 10px; } .peeks { grid-template-columns: 1fr 1fr; gap: 10px; } .book { height: 260px; }
  .cur-row summary { grid-template-columns: 72px 1fr; } .cur-img { width: 72px; } .cur-body { padding-left: 4px; }
  .strip { grid-template-columns: repeat(7, 1fr); } .strip span:nth-child(n+8) { display: none; }
}
.rcp figcaption, .peek figcaption { border-left: 0; padding-left: 0; }
.rcp figcaption { padding: 12px 14px 14px; color: #fff; } .rcp figcaption b { color: #fff; } .rcp figcaption small { color: #c5c9ee; font-size: 13.5px; }
.peek figcaption { color: var(--ink); }
.hc0 em { left: auto; right: 12px; }