html { filter: none; scroll-behavior: smooth; }
[hidden] { display: none !important; }
:root { --ink:#18233c; --muted:#48566f; --blue:#234fc5; --line:#d8e1f0; --lavender:#eeeaff; }
body { color:var(--ink); }
.logo { position:absolute; }
button { font:inherit; cursor:pointer; }
button:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
.preview-badge { position:absolute; top:45px; right:40px; font-size:12px; color:var(--muted); border:1px solid #bac8df; border-radius:30px; padding:8px 14px; }
.hero { min-height:800px; }
.word-hero { padding:30px; position:relative; flex-direction:column; align-items:stretch; box-shadow:0 24px 70px #36498216; }
.word-hero .figure-label { font-size:18px; letter-spacing:-.025em; line-height:1.5; color:var(--ink); margin-bottom:28px; }
.hero-word { display:flex; gap:7px; font-size:clamp(32px,4vw,60px); font-weight:700; letter-spacing:-.05em; }
.hero-word span { background:#fff9; padding:12px; border-radius:12px; }
.hero-word span:first-child { color:#234fc5; transform:rotate(-5deg); background:#fff; box-shadow:0 5px 15px #3050a912; }
.meaning-line { display:flex; gap:40px; padding:10px 14px; font-size:12px; color:var(--muted); }
.hero-definition { font-size:14px; line-height:1.7; margin-top:20px; color:#34435f; }
.hero-caption { font-size:9px; font-weight:700; letter-spacing:.1em; margin-top:24px; color:#405173; }
.hero-center figcaption { color:var(--muted); font-size:12px; line-height:1.6; max-width:420px; }
.text-link { display:inline-flex; gap:15px; color:var(--blue); font-weight:600; font-size:14px; text-decoration:none; margin-top:8px; }
.cases { padding-top:25px; max-width:1320px; }
.eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:11px; line-height:1.6; font-weight:700; color:var(--blue); margin-bottom:14px; }
.section-intro { max-width:680px; margin-bottom:36px; }
.section-intro .section-header { margin-bottom:20px; }
.section-intro .section-text { color:var(--muted); }
.case-tabs { display:flex; border-bottom:1px solid #b9c8e2; gap:8px; margin-bottom:52px; }
.case-tabs button { flex:1; display:flex; gap:12px; align-items:center; text-align:left; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--muted); padding:20px 14px; font-weight:600; font-size:14px; }
.case-tabs button span { font-size:11px; }
.case-tabs button[aria-selected="true"] { color:var(--blue); border-bottom-color:var(--blue); background:linear-gradient(0deg,#e8eeff88,transparent); }
.case-opening { display:grid; grid-template-columns:1.2fr 1fr; gap:72px; align-items:end; margin-bottom:36px; }
.case-opening h3 { font-size:clamp(28px,3.4vw,44px); line-height:1.2; letter-spacing:-.04em; font-weight:600; }
.case-opening > p { font-size:18px; line-height:1.75; color:var(--muted); max-width:460px; }
.case-summary { display:grid; grid-template-columns:1fr 1fr 1fr; gap:30px; border-block:1px solid var(--line); padding:28px 0; }
.case-summary dt { font-size:12px; font-weight:700; margin-bottom:12px; }
.case-summary dd { font-size:14px; color:var(--muted); line-height:1.75; }
.story-grid { display:grid; grid-template-columns:1fr 1.45fr; gap:80px; margin:72px 0; }
.story-grid h4 { font-size:26px; font-weight:600; letter-spacing:-.03em; line-height:1.4; }
.story-copy p { font-size:16px; color:#34415a; line-height:1.9; margin-bottom:18px; }
.interaction-lab { border:1px solid #cdd8ed; border-radius:24px; background:#fff9; overflow:hidden; box-shadow:0 20px 60px #36498209; margin:60px 0; }
.lab-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:32px 36px 12px; }
.lab-heading .eyebrow { margin-bottom:8px; }
.lab-heading h4 { font-size:25px; font-weight:600; letter-spacing:-.025em; }
.demo-label { font-size:11px; color:#3d4970; background:#ece9ff; padding:9px 12px; border-radius:30px; white-space:nowrap; }
.demo-disclosure { margin:0 36px 26px; max-width:760px; font-size:12px; line-height:1.7; color:var(--muted); }
.demo-tabs { display:flex; gap:8px; padding:0 36px 24px; }
.demo-tabs button { border:1px solid #c5d1e8; color:var(--muted); background:#fff; padding:11px 18px; border-radius:30px; min-height:44px; font-size:13px; }
.demo-tabs button[aria-selected="true"] { border-color:var(--blue); background:var(--blue); color:#fff; }
.lab-body { display:grid; grid-template-columns:1.5fr 1fr; border-top:1px solid var(--line); }
.lesson-stage { background:linear-gradient(140deg,#edf3ff,#f2eeff); min-height:440px; padding:36px; text-align:center; display:grid; align-items:center; }
.lesson-stage [role="tabpanel"] { min-width:0; }
.lesson-step { font-size:10px; font-weight:700; letter-spacing:.14em; color:#43577d; margin-bottom:22px; }
.lesson-stage h5 { font-size:22px; letter-spacing:-.03em; line-height:1.4; font-weight:600; margin-bottom:10px; }
.lesson-instruction { font-size:14px; color:var(--muted); line-height:1.6; }
.word-pieces { display:flex; justify-content:center; align-items:center; margin:26px auto; font-size:52px; font-weight:700; letter-spacing:-.045em; transition:gap .25s; gap:0; }
.word-pieces span { background:#fff; padding:12px 10px; min-width:68px; }
.prefix-piece { color:#234fc5; border-radius:14px 0 0 14px; }
.root-piece { color:#18233c; border-radius:0 14px 14px 0; }
.suffix-piece { color:#5b3999; border-radius:0 14px 14px 0; min-width:88px !important; }
.word-pieces.is-split { gap:18px; }
.word-pieces.is-split span { border-radius:14px; box-shadow:0 5px 16px #45548312; }
.primary-action { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:13px 23px; border:1px solid var(--blue); border-radius:12px; background:var(--blue); color:#fff; font-size:14px; font-weight:600; }
.primary-action:hover { background:#183c9c; }
.lesson-feedback { margin:22px auto 0; min-height:48px; max-width:355px; font-size:14px; line-height:1.7; color:#344361; }
.choice-prompt { font-size:14px; margin-bottom:10px; }
.answer-options,.prefix-options { display:flex; justify-content:center; gap:12px; }
.answer-options button,.prefix-options button { min-height:46px; min-width:84px; padding:12px 18px; background:#fff; border:1px solid #9eafd0; color:#243759; border-radius:10px; font-size:16px; }
.answer-options button[aria-pressed="true"],.prefix-options button[aria-pressed="true"] { background:#dce7ff; border:2px solid var(--blue); padding:11px 17px; }
.reset-action { background:none; border:0; text-decoration:underline; text-underline-offset:4px; color:#234fc5; font-size:12px; padding:10px; min-height:40px; }
.sentence { font-size:25px; line-height:1.8; letter-spacing:-.03em; margin:35px 0; }
.sentence span { border-bottom:2px solid #879bc6; color:#234fc5; font-weight:600; }
.design-rationale { padding:36px; border-left:1px solid var(--line); }
.design-rationale h5 { font-size:20px; line-height:1.45; letter-spacing:-.02em; margin-bottom:18px; }
.design-rationale > p:not(.eyebrow) { color:var(--muted); font-size:14px; line-height:1.85; }
.design-rationale dl { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; line-height:1.8; }
.design-rationale dt { font-weight:600; margin-bottom:8px; }
.design-rationale dd { color:var(--muted); }
.design-rationale .rationale-note { font-size:11px !important; margin-top:24px; }
.editorial-note { border:1px dashed #9faed1; background:#f2f3ff; padding:22px 26px; border-radius:12px; font-size:13px; line-height:1.8; color:#384764; margin:40px 0; }
.editorial-note strong { font-weight:600; }
.editorial-note p { margin-top:7px; max-width:780px; }
.takeaway { margin-top:72px; padding-top:36px; border-top:1px solid var(--line); max-width:780px; }
.takeaway h4 { font-size:30px; font-weight:600; line-height:1.4; letter-spacing:-.03em; }
.takeaway > p:last-child { color:var(--muted); font-size:16px; line-height:1.85; margin-top:20px; }
.evaluation { border-top:1px solid var(--line); padding-top:36px; margin-top:50px; }
.evaluation h4 { font-size:26px; font-weight:600; letter-spacing:-.03em; }
.evaluation-steps { list-style:none; display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:30px; margin-top:28px; }
.evaluation-steps li { display:flex; gap:14px; }
.evaluation-steps li > span { font-size:11px; color:var(--blue); padding-top:4px; }
.evaluation-steps strong { font-size:14px; }
.evaluation-steps p { font-size:14px; line-height:1.8; color:var(--muted); margin-top:10px; }
@media(max-width:1024px) { .hero { min-height:0; }.word-hero { width:360px; }.hero-word { font-size:52px; }.case-opening { gap:36px; }.story-grid { gap:40px; }.lab-heading { padding-inline:26px; }.demo-disclosure { margin-inline:26px; }.demo-tabs { padding-inline:26px; }.lesson-stage,.design-rationale { padding:26px; } }
@media(max-width:700px) { .preview-badge { top:28px; right:24px; font-size:10px; }.hero-word { font-size:48px; }.word-hero { width:100%; max-width:350px; }.cases { padding-top:30px; }.case-tabs { gap:0; margin-bottom:34px; }.case-tabs button { flex-direction:column; align-items:flex-start; gap:6px; font-size:12px; padding:15px 8px; line-height:1.5; }.case-opening,.story-grid { grid-template-columns:1fr; gap:22px; }.case-opening > p { font-size:16px; }.case-summary { grid-template-columns:1fr; gap:24px; }.story-grid { margin:42px 0; }.lab-heading { flex-direction:column; align-items:flex-start; padding:24px 20px 14px; }.demo-disclosure { margin-inline:20px; }.demo-tabs { padding:0 16px 20px; gap:5px; }.demo-tabs button { font-size:11px; padding:10px; flex:1; }.lab-body { grid-template-columns:1fr; }.design-rationale { border-left:0; border-top:1px solid var(--line); }.lesson-stage { padding:28px 20px; min-height:420px; }.word-pieces { font-size:46px; }.takeaway h4 { font-size:25px; }.interaction-lab { border-radius:18px; }.sentence { font-size:22px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }
@media(max-width:700px) { .evaluation-steps { grid-template-columns:1fr; } }
.journey-explorer { background:#ffffff90; border:1px solid #cdd8ed; border-radius:24px; overflow:hidden; margin:60px 0; }
.journey-explorer .lab-heading { align-items:flex-start; }
.journey-explorer .lab-heading h4 { max-width:590px; line-height:1.4; }
.journey-layout { display:grid; grid-template-columns:1fr 1.5fr; border-top:1px solid var(--line); }
.journey-steps { padding:24px; display:flex; flex-direction:column; gap:7px; }
.journey-steps button { display:flex; gap:18px; align-items:center; color:var(--muted); text-align:left; font-size:14px; font-weight:500; border:1px solid transparent; padding:17px; border-radius:12px; background:transparent; }
.journey-steps button span { font-size:11px; }
.journey-steps button[aria-pressed="true"] { background:#e8efff; border-color:#b6c8f0; color:#234fc5; font-weight:600; }
.journey-detail { background:linear-gradient(140deg,#edf3ff,#f2eeff); padding:38px; }
.journey-symbol { display:grid; place-items:center; height:52px; width:52px; background:#fff; color:var(--blue); border-radius:16px; margin-bottom:28px; font-size:17px; font-weight:600; }
.journey-detail h5 { font-size:25px; letter-spacing:-.03em; font-weight:600; line-height:1.45; margin-bottom:18px; }
.journey-detail > p:not(.eyebrow) { font-size:15px; line-height:1.85; color:var(--muted); }
.journey-role { margin-top:28px; border-top:1px solid #c5d1e8; padding-top:24px; }
.journey-role strong { font-size:12px; }
.journey-role p { margin-top:10px; color:var(--muted); font-size:14px; line-height:1.85; }
.journey-review { border-top:1px solid var(--line); padding:24px 36px; font-size:13px; line-height:1.8; color:var(--muted); }
.journey-review strong { color:var(--ink); }
.journey-review p { margin-top:5px; max-width:800px; }
.game-story { padding:36px 0; border-block:1px solid var(--line); margin:55px 0; }
.game-story > h4 { font-size:clamp(27px,3vw,37px); font-weight:600; line-height:1.3; letter-spacing:-.035em; margin-bottom:26px; }
.game-story > .story-copy { max-width:780px; }
.game-loop { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin:36px 0; }
.game-loop li { border-top:2px solid #b3c5ed; padding-top:17px; }
.game-loop span { display:block; color:var(--blue); font-size:11px; margin-bottom:12px; }
.game-loop strong { font-size:14px; font-weight:600; }
.game-loop p { margin-top:10px; font-size:13px; line-height:1.8; color:var(--muted); }
.input-mapping { background:#ffffff90; border:1px solid var(--line); border-radius:16px; padding:26px; }
.input-mapping h5 { font-size:17px; font-weight:600; margin-bottom:22px; }
.input-mapping table { width:100%; border-collapse:collapse; font-size:14px; text-align:left; }
.input-mapping th,.input-mapping td { padding:17px 10px; border-bottom:1px solid var(--line); line-height:1.65; vertical-align:top; }
.input-mapping thead th { padding-top:0; font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.input-mapping tbody th { font-weight:500; width:50%; }
.input-mapping td { color:var(--muted); }
.input-mapping tr:last-child th,.input-mapping tr:last-child td { border-bottom:0; }
.prototype-gallery { border-top:1px solid var(--line); margin-top:24px; }
.prototype-context { border-left:3px solid var(--blue); background:#e8eeff80; padding:22px 26px; margin:0 0 36px; border-radius:0 12px 12px 0; max-width:950px; }
.prototype-context strong { font-size:14px; font-weight:600; }
.prototype-context p { font-size:14px; line-height:1.85; color:var(--muted); margin-top:10px; }
.prototype-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.prototype-feature { grid-column:1 / -1; }
.prototype-shot { min-width:0; }
.screenshot-open { display:block; position:relative; width:100%; overflow:hidden; border:1px solid #c1cde1; border-radius:18px; background:#e9edf6; }
.screenshot-open img { display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:contain; }
.prototype-feature .screenshot-open img { aspect-ratio:16 / 10; object-fit:cover; object-position:50% 60%; }
.screenshot-open .small-source { max-height:390px; }
.screenshot-open > span { position:absolute; bottom:14px; right:14px; background:#ffffffed; border:1px solid #c5d1e8; border-radius:30px; padding:9px 13px; font-size:11px; color:var(--ink); }
.screenshot-open:hover > span { background:#fff; color:var(--blue); }
.prototype-shot figcaption { display:flex; justify-content:space-between; gap:30px; padding-top:22px; }
.prototype-shot .eyebrow { font-size:9px; margin-bottom:8px; }
.prototype-shot h3 { font-size:20px; font-weight:600; letter-spacing:-.025em; }
.prototype-shot figcaption > p { max-width:470px; font-size:13px; line-height:1.85; color:var(--muted); }
.prototype-shot:not(.prototype-feature) figcaption { flex-direction:column; gap:12px; }
.gallery-note { font-size:12px; line-height:1.85; color:var(--muted); max-width:800px; margin-top:36px; }
#screenshot-dialog { position:fixed; inset:0; margin:auto; width:min(1100px,94vw); max-height:94dvh; background:#f8faff; color:var(--ink); border:1px solid #a9bad8; border-radius:18px; padding:60px 20px 20px; box-shadow:0 30px 100px #13234e60; }
#screenshot-dialog::backdrop { background:#101c36bd; }
#screenshot-close { position:absolute; right:17px; top:12px; background:#fff; border:1px solid #bbc8dd; padding:9px 15px; border-radius:20px; color:var(--ink); font-size:13px; min-height:40px; }
#screenshot-full { display:block; max-width:100%; max-height:calc(90dvh - 130px); height:auto; width:auto; margin:auto; object-fit:contain; }
#screenshot-caption { margin-top:17px; font-size:12px; line-height:1.7; text-align:center; color:var(--muted); }
@media(max-width:700px) {
  .prototype-grid { grid-template-columns:1fr; }
  .prototype-feature { grid-column:auto; }
  .prototype-shot figcaption { flex-direction:column; gap:12px; }
  .prototype-feature .screenshot-open img { aspect-ratio:4 / 3; }
  .game-loop { grid-template-columns:1fr 1fr; gap:22px; }
  .input-mapping { padding:20px 14px; }
  .input-mapping th,.input-mapping td { font-size:12px; padding:14px 8px; }
  .case-tabs { flex-wrap:wrap; border-bottom:0; gap:5px; }
  .case-tabs button { flex:1 1 calc(50% - 5px); border-bottom:2px solid #c5d1e8; }
  .journey-layout { grid-template-columns:1fr; }
  .journey-steps { display:grid; grid-template-columns:1fr 1fr; padding:16px; }
  .journey-steps button { font-size:12px; padding:12px; gap:10px; min-height:50px; }
  .journey-steps button:last-child { grid-column:1 / -1; }
  .journey-detail { padding:28px 24px; }
  .journey-detail h5 { font-size:23px; }
  .journey-review { padding:24px; }
}

/* Preserve complete frames in the new gameplay captures. */
.prototype-video { display:block; width:100%; aspect-ratio:16 / 9; object-fit:contain; background:#172638; border:1px solid #c1cde1; border-radius:18px; }
.prototype-shot .screenshot-open img { aspect-ratio:16 / 9; object-fit:contain; }
.media-still { margin-top:16px; color:var(--blue); background:transparent; border:0; border-bottom:1px solid #a9bde8; padding:8px 0; font-size:12px; text-align:left; cursor:pointer; }
.learning-shot { margin-top:24px; }
.media-still:focus-visible,.prototype-video:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }

/* Editorial refinement: preserve the portfolio composition with a readable type scale. */
:root { --ink:#15191f; --body:#343b46; --muted:#505966; --blue:#2056c7; --accent:#2f6bff; --line:#d4dce7; --tint:#edf3ff; }
html { scroll-padding-top:32px; }
body { color:var(--ink); font-size:17px; line-height:1.7; background:linear-gradient(90deg,#fff 0%,#f8faff 58%,#eef3ff 100%); }
a { color:var(--blue); text-underline-offset:4px; }
.preview-badge { font-size:13px; line-height:1.5; border-color:var(--line); }
.hero { max-width:1440px; min-height:760px; padding:144px 56px 88px; gap:40px; grid-template-columns:.9fr 1.12fr 1fr; }
.hero > * { min-width:0; }
.project-title { font-size:clamp(48px,4.6vw,68px); line-height:1; font-weight:800; letter-spacing:-.045em; margin-bottom:24px; }
.project-subtitle { display:block; font-size:.62em; color:#424852; margin-top:10px; line-height:1.1; }
.project-meta { font-size:14px; color:var(--muted); margin-bottom:24px; }
.project-tagline { font-size:20px; line-height:1.5; margin-bottom:12px; }
.project-company { font-size:17px; color:var(--blue); line-height:1.6; }
.project-period { font-size:14px; color:var(--muted); margin-top:6px; }
.my-role { margin-top:32px; }
.my-role h3 { font-size:14px; margin-bottom:12px; }
.my-role ul { font-size:15px; line-height:1.85; color:var(--body); }
.hero-center { gap:18px; }
.word-hero { width:100%; max-width:420px; aspect-ratio:1; padding:32px; justify-content:center; background:linear-gradient(145deg,#e8f0ff,#f0edff); border-radius:20px; box-shadow:0 18px 48px #203b7310; }
.word-hero .figure-label { font-size:13px; font-weight:600; line-height:1.5; letter-spacing:0; color:var(--muted); margin:0 0 32px; }
.hero-word { justify-content:center; gap:10px; font-size:clamp(48px,5.3vw,76px); line-height:1.2; letter-spacing:-.06em; }
.hero-word span { background:#fff; padding:14px 12px; border-radius:14px; }
.hero-word span:first-child { color:var(--blue); transform:rotate(-6deg); box-shadow:0 8px 20px #244b9c12; }
.meaning-line { justify-content:center; gap:62px; font-size:14px; padding:0; margin-top:16px; }
.hero-definition { font-size:17px; line-height:1.7; margin-top:30px; color:var(--body); text-align:center; }
.hero-caption { color:var(--muted); font-size:13px; font-weight:500; letter-spacing:0; line-height:1.6; margin-top:8px; text-align:center; }
.hero-center figcaption { font-size:13px; line-height:1.7; max-width:380px; text-align:center; }
.hero-right { max-width:410px; }
.about-title { font-size:18px; line-height:1.4; margin-bottom:22px; }
.about-text { font-size:17px; line-height:1.75; color:var(--body); }
.about-text p { margin-bottom:24px; }
.about-text p::before { width:28px; background:var(--accent); margin-bottom:22px; }
.text-link { align-items:center; gap:12px; font-size:15px; min-height:44px; margin-top:0; }
.text-link:hover { text-decoration:underline; }
.content-section { max-width:1200px; padding:88px 56px; scroll-margin-top:24px; }
.cases { padding-top:56px; }
.eyebrow { font-size:12px; letter-spacing:.09em; }
.section-intro { display:grid; grid-template-columns:1fr 1fr; column-gap:64px; max-width:none; margin-bottom:40px; }
.cases > .section-intro { display:block; max-width:760px; }
.cases > .section-intro .section-header { margin-bottom:20px; }
.cases > .section-intro .section-text { max-width:65ch; }
.section-intro > .eyebrow { grid-column:1 / -1; }
.section-intro .section-header { font-size:clamp(34px,4vw,48px); line-height:1.15; font-weight:700; letter-spacing:-.045em; margin-bottom:0; }
.section-intro .section-text { color:var(--body); font-size:17px; line-height:1.75; max-width:60ch; }
.section-intro .text-link { grid-column:2; margin-top:16px; justify-self:start; }
.case-tabs { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); gap:12px; margin-bottom:56px; }
.case-tabs button { min-height:64px; border-bottom-width:3px; padding:16px 4px; color:var(--body); font-size:15px; font-weight:500; line-height:1.5; }
.case-tabs button span { font-size:12px; color:var(--muted); }
.case-tabs button[aria-selected="true"] { background:none; color:var(--blue); font-weight:700; }
.case-tabs button:hover { color:var(--blue); }
[role="tabpanel"] { scroll-margin-top:32px; }
[role="tabpanel"]:focus { outline:none; }
[role="tabpanel"]:focus-visible { outline:3px solid var(--blue); outline-offset:8px; }
.case-opening { display:block; }
.case-opening h3 { font-size:clamp(30px,3.4vw,42px); line-height:1.2; font-weight:700; }
.case-opening > p { font-size:18px; color:var(--body); max-width:70ch; margin-top:20px; }
.case-summary { gap:32px; }
.case-summary dt { font-size:14px; line-height:1.6; margin-bottom:10px; }
.case-summary dd { font-size:16px; color:var(--body); line-height:1.75; }
.story-grid { grid-template-columns:.85fr 1.4fr; gap:80px; }
.story-grid h4 { font-size:28px; font-weight:600; letter-spacing:-.035em; line-height:1.3; }
.story-copy p { font-size:18px; color:var(--body); line-height:1.8; max-width:64ch; margin-bottom:20px; }
.story-copy p:last-child { margin-bottom:0; }
.interaction-lab,.journey-explorer { border-color:var(--line); border-radius:16px; background:#fff; box-shadow:none; margin:64px 0; }
.lab-heading { gap:24px; padding:32px 32px 12px; }
.lab-heading h4 { font-size:28px; line-height:1.3; letter-spacing:-.035em; }
.demo-label { font-size:13px; color:var(--muted); background:#f3f5f8; border:1px solid var(--line); padding:7px 12px; border-radius:6px; line-height:1.6; }
.demo-disclosure { margin:0 32px 26px; max-width:75ch; font-size:14px; line-height:1.75; }
.demo-tabs { flex-wrap:wrap; padding:0 32px 24px; }
.demo-tabs button { border-color:#8494b0; color:var(--body); border-radius:8px; min-height:46px; font-size:15px; line-height:1.5; padding:10px 18px; }
.demo-tabs button[aria-selected="true"] { border-color:var(--blue); background:var(--blue); color:#fff; font-weight:600; }
.lab-body { grid-template-columns:1.25fr 1fr; }
.lesson-stage { background:var(--tint); min-height:470px; padding:36px 28px; }
.lesson-step { font-size:12px; font-weight:600; letter-spacing:.09em; color:var(--muted); margin-bottom:24px; }
.lesson-stage h5 { font-size:24px; line-height:1.35; }
.lesson-instruction,.lesson-feedback { font-size:16px; line-height:1.7; color:var(--body); }
.word-pieces { font-size:56px; line-height:1.4; }
.prefix-piece,.sentence span { color:var(--blue); }
.root-piece { color:var(--ink); }
.primary-action { border-radius:8px; font-size:16px; line-height:1.5; }
.primary-action:hover { background:#17449f; }
.lesson-feedback { min-height:54px; max-width:37ch; }
.choice-prompt { font-size:16px; }
.answer-options,.prefix-options { flex-wrap:wrap; }
.answer-options button,.prefix-options button { min-height:48px; border-color:#8494b0; color:var(--ink); border-radius:8px; font-size:18px; }
.reset-action { font-size:14px; min-height:44px; }
.design-rationale { padding:32px; }
.design-rationale h5 { font-size:23px; line-height:1.4; margin-bottom:20px; }
.design-rationale > p:not(.eyebrow),.design-rationale dl { color:var(--body); font-size:16px; line-height:1.8; }
.design-rationale dt { color:var(--ink); }
.design-rationale .rationale-note { color:var(--muted); font-size:14px !important; }
.editorial-note { border:0; border-top:1px dashed #9ca9bd; border-radius:0; background:transparent; padding:24px 0; font-size:14px; color:var(--muted); margin:40px 0 0; }
.editorial-note strong { color:var(--body); }
.editorial-note summary { cursor:pointer; font-weight:500; min-height:44px; padding:8px 0; color:var(--muted); }
.editorial-note summary:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
.editorial-note[open] summary { color:var(--ink); }
.editorial-note p { margin-top:8px; max-width:80ch; }
.takeaway { margin-top:64px; padding-top:32px; max-width:830px; }
.takeaway h4 { line-height:1.35; letter-spacing:-.035em; }
.takeaway > p:last-child { color:var(--body); font-size:18px; line-height:1.8; }
.evaluation h4 { font-size:28px; line-height:1.3; }
.evaluation-steps { grid-template-columns:repeat(3,1fr); gap:32px; margin-top:32px; }
.evaluation-steps li > span { font-size:13px; }
.evaluation-steps strong { font-size:16px; }
.evaluation-steps p { font-size:16px; line-height:1.75; color:var(--body); }
.journey-steps button { font-size:16px; padding:16px; min-height:54px; border-radius:8px; color:var(--body); }
.journey-steps button span { font-size:13px; }
.journey-steps button[aria-pressed="true"] { background:var(--tint); border-color:#859fcf; color:var(--blue); }
.journey-detail { background:var(--tint); padding:36px; }
.journey-symbol { height:48px; width:48px; border-radius:10px; margin-bottom:24px; font-size:16px; }
.journey-detail h5 { font-size:28px; line-height:1.3; }
.journey-detail > p:not(.eyebrow),.journey-role p { font-size:17px; line-height:1.8; color:var(--body); }
.journey-role strong { font-size:14px; }
.journey-review { padding:24px 32px; font-size:14px; }
.game-story > h4 { font-size:clamp(28px,3.3vw,38px); line-height:1.25; }
.game-loop { gap:28px; }
.game-loop span { font-size:13px; }
.game-loop strong,.game-loop p { font-size:16px; }
.game-loop p { line-height:1.75; color:var(--body); }
.input-mapping { background:#fff; border-radius:12px; padding:28px; }
.input-mapping h5 { font-size:20px; }
.input-mapping table { font-size:16px; }
.input-mapping th,.input-mapping td { padding:18px 12px; line-height:1.7; }
.input-mapping thead th { font-size:13px; text-transform:none; letter-spacing:0; }
.input-mapping td { color:var(--body); }
.prototype-context { background:transparent; border-left-color:var(--accent); padding:4px 0 4px 24px; margin-bottom:40px; border-radius:0; max-width:88ch; }
.prototype-context strong { font-size:16px; }
.prototype-context p { font-size:16px; line-height:1.8; color:var(--body); }
.prototype-grid { gap:56px 32px; }
.screenshot-open,.prototype-video { border-color:var(--line); border-radius:14px; }
.prototype-video,.prototype-video a { color:#fff; }
.screenshot-open > span { background:#fff; border-radius:6px; font-size:13px; line-height:1.5; padding:8px 12px; }
.prototype-shot figcaption { gap:40px; padding-top:24px; }
.prototype-shot .eyebrow { font-size:12px; margin-bottom:10px; }
.prototype-shot h3 { font-size:26px; line-height:1.3; letter-spacing:-.035em; }
.prototype-shot figcaption > p { max-width:58ch; font-size:17px; line-height:1.8; color:var(--body); }
.prototype-shot:not(.prototype-feature) figcaption { gap:16px; }
.media-still { font-size:15px; min-height:44px; }
.gallery-note { font-size:14px; line-height:1.8; max-width:84ch; margin-top:40px; }
.footer-note { font-size:14px; font-style:normal; color:var(--muted); padding:32px 56px 64px; max-width:1000px; }
.footer-nav { max-width:1200px; margin:auto; padding:32px 56px 56px; border-top:1px solid var(--line); }
#screenshot-dialog { background:#fff; border-color:var(--line); }
#screenshot-close { font-size:15px; min-height:44px; border-radius:6px; border-color:#8494ac; }
#screenshot-caption { font-size:14px; line-height:1.75; }
@media(min-width:1025px) and (max-width:1200px) {
  .hero { gap:28px; padding-inline:40px; }
  .word-hero { padding:24px 20px; }
  .hero-word { font-size:54px; }
  .hero-definition,.about-text { font-size:16px; }
}
@media(max-width:1024px) {
  .hero { grid-template-columns:1fr 1fr; min-height:0; padding:132px 40px 64px; gap:44px 40px; }
  .hero-left,.my-role { text-align:right; }
  .project-meta { justify-content:flex-end; }
  .hero-right { grid-column:1 / -1; max-width:none; display:grid; grid-template-columns:.75fr 1.4fr; gap:0 56px; text-align:left; margin:0; padding-top:36px; border-top:1px solid var(--line); }
  .hero-right .text-link { grid-column:2; justify-self:start; }
  .word-hero { max-width:360px; }
  .hero-word { font-size:64px; }
  .content-section { padding:64px 40px; }
  .section-intro,.case-opening { gap:32px; }
  .story-grid { gap:44px; }
  .lab-body { grid-template-columns:1fr 1fr; }
  .lab-heading { align-items:flex-start; }
  .demo-label { white-space:normal; }
  .lesson-stage,.design-rationale { padding:28px; }
}
@media(max-width:700px) {
  .preview-badge { top:26px; right:24px; font-size:12px; padding:7px 11px; }
  .hero { grid-template-columns:1fr; padding:120px 24px 48px; gap:36px; }
  .hero-left,.my-role { text-align:left; }
  .project-title { font-size:52px; }
  .project-meta { justify-content:flex-start; }
  .project-tagline { font-size:21px; }
  .my-role { margin-top:24px; }
  .my-role ul { font-size:16px; }
  .hero-center { align-items:stretch; }
  .word-hero { max-width:none; padding:30px; aspect-ratio:1.12; }
  .hero-word { font-size:clamp(48px,14vw,64px); }
  .hero-right { display:block; padding-top:28px; }
  .about-title { font-size:20px; margin-bottom:20px; }
  .about-text { font-size:17px; }
  .content-section { padding:56px 24px; }
  .section-intro { display:block; margin-bottom:28px; }
  .section-intro .section-header { font-size:36px; margin-bottom:24px; }
  .section-intro .text-link { margin-top:18px; }
  .case-tabs { grid-template-columns:1fr 1fr; gap:0 16px; margin-bottom:36px; border:0; }
  .case-tabs button { flex-direction:row; align-items:center; font-size:15px; min-height:68px; border-bottom-color:var(--line); gap:8px; padding:14px 0; }
  .case-tabs button[aria-selected="true"] { border-bottom-color:var(--blue); }
  .case-opening,.story-grid,.case-summary { grid-template-columns:1fr; gap:24px; }
  .case-opening h3 { font-size:32px; }
  .case-opening > p { font-size:18px; }
  .case-summary dd { font-size:17px; }
  .story-grid { margin:48px 0; }
  .story-copy p { font-size:17px; }
  .interaction-lab,.journey-explorer { margin:48px 0; }
  .lab-heading { padding:24px 20px 16px; gap:16px; }
  .lab-heading h4 { font-size:26px; }
  .demo-disclosure { margin:0 20px 22px; }
  .demo-tabs { padding:0 20px 22px; }
  .demo-tabs button { flex:1 1 auto; font-size:14px; padding:10px 12px; }
  .lab-body { grid-template-columns:1fr; }
  .lesson-stage { padding:32px 20px; min-height:440px; }
  .design-rationale { padding:24px 20px; }
  .word-pieces { font-size:48px; }
  .evaluation-steps { grid-template-columns:1fr; gap:28px; }
  .takeaway h4 { font-size:28px; }
  .takeaway > p:last-child { font-size:17px; }
  .journey-layout { grid-template-columns:minmax(0,1fr); }
  .journey-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .journey-steps,.journey-detail,.journey-steps button { min-width:0; }
  .journey-steps button { font-size:15px; padding:12px 10px; }
  .journey-detail { padding:28px 20px; }
  .journey-detail h5 { font-size:26px; }
  .journey-review { padding:24px 20px; }
  .game-loop { gap:28px 20px; }
  .game-loop p { font-size:15px; }
  .input-mapping { padding:24px 16px; }
  .input-mapping th,.input-mapping td { font-size:15px; padding:14px 8px; }
  .input-mapping thead th { font-size:13px; }
  .prototype-context { padding-left:20px; margin-bottom:32px; }
  .prototype-grid { gap:40px; }
  .prototype-shot figcaption { gap:16px; }
  .prototype-shot h3 { font-size:25px; }
  .screenshot-open > span { bottom:10px; right:10px; font-size:12px; padding:7px 10px; }
  .footer-note { padding:24px 24px 40px; }
  .footer-nav { padding:28px 24px 40px; }
}
@media(max-width:360px) { .journey-steps { grid-template-columns:1fr; } }

/* Case navigation is a clear control; related work belongs to its own story. */
.case-navigation-label { font-size:16px; font-weight:600; color:var(--ink); margin-bottom:14px; }
.case-tabs { padding:8px; gap:8px; border:1px solid #bdcce4; border-radius:14px; background:#eaf0fb; margin-bottom:48px; }
.case-tabs button { min-width:0; min-height:80px; padding:16px 14px; gap:12px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--body); font-size:16px; font-weight:600; }
.case-tabs button:hover { background:#fff; border-color:#9db1d5; color:var(--blue); }
.case-tabs button[aria-selected="true"] { background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 3px 10px #2056c724; }
.case-tabs .case-tab-number { flex:0 0 28px; height:28px; display:grid; place-items:center; border:1px solid #aabbd8; border-radius:50%; font-size:12px; font-weight:600; color:var(--muted); }
.case-tabs .case-tab-name { min-width:0; color:inherit; font-size:16px; font-weight:inherit; line-height:1.45; }
.case-tabs button[aria-selected="true"] .case-tab-number { color:#fff; border-color:#adc5ff; }
.toy-example { max-width:none; padding:48px 0 0; margin-top:56px; }
.toy-example .section-intro { column-gap:48px; margin-bottom:28px; }
.toy-example .section-header { font-size:32px; line-height:1.2; }
.toy-example .prototype-shot h5 { font-size:26px; line-height:1.3; font-weight:600; letter-spacing:-.035em; }
@media(max-width:700px) {
  .case-tabs { grid-template-columns:1fr 1fr; gap:8px; padding:8px; border:1px solid #bdcce4; margin-bottom:36px; }
  .case-tabs button { min-height:88px; padding:12px 10px; gap:8px; border:1px solid transparent; }
  .case-tabs .case-tab-name { font-size:15px; }
  .case-tabs .case-tab-number { flex-basis:24px; height:24px; }
  .toy-example { padding:36px 0 0; margin-top:44px; }
  .toy-example .section-header { font-size:30px; }
  .toy-example .prototype-shot h5 { font-size:25px; }
}
@media(max-width:360px) { .case-tabs button { flex-direction:column; align-items:flex-start; min-height:112px; } }

.logo { position:fixed; }
.logo .d20-container { flex:0 0 32px; width:32px; height:32px; }
.logo canvas,.logo-fallback { display:block; width:32px; height:32px; }
.logo:hover { opacity:1; }
.logo:hover .logo-text { color:var(--blue); }

/* Make each story discoverable before a reader opens its tab. */
.story-inline-link { color:var(--blue); text-decoration:underline; text-underline-offset:4px; }
.case-tabs { scroll-margin-top:112px; }
.case-tabs button { align-items:flex-start; }
.case-tabs .case-tab-copy { display:grid; gap:6px; min-width:0; color:inherit; }
.case-tabs .case-tab-preview { font-size:13px; font-weight:400; line-height:1.5; color:var(--muted); }
.case-tabs button[aria-selected="true"] .case-tab-preview { color:#edf3ff; }
.case-next { margin-top:64px; padding-top:28px; border-top:1px solid var(--line); }
.case-next a { display:inline-flex; align-items:center; gap:16px; min-height:48px; color:var(--blue); font-size:22px; line-height:1.4; font-weight:600; text-decoration:none; }
.case-next a:hover { text-decoration:underline; text-underline-offset:5px; }
.case-next p { color:var(--body); font-size:16px; line-height:1.75; margin-top:6px; max-width:60ch; }
@media(max-width:700px) {
  .logo { position:absolute; }
  .case-tabs .case-tab-preview { font-size:13px; }
  .case-next { margin-top:48px; padding-top:24px; }
  .case-next a { font-size:20px; }
}