:root {
  --ink: #18352f;
  --forest: #123f35;
  --forest-2: #0a2d28;
  --leaf: #2b7a4d;
  --mint: #58d6c7;
  --orange: #ff7a18;
  --orange-2: #ff9f1c;
  --yellow: #ffd23f;
  --cream: #fff8df;
  --paper: #fffdf5;
  --sky: #70d6ff;
  --purple: #9b7bff;
  --pink: #ff5d8f;
  --danger: #ff5267;
  --line: rgba(24, 53, 47, .14);
  --muted: #667a75;
  --shadow: 0 22px 60px rgba(10, 45, 40, .16);
  --shadow-hard: 0 8px 0 rgba(10, 45, 40, .2);
  --radius: 22px;
  --radius-sm: 14px;
  --max: 1260px;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); overflow-x: hidden; }
body::selection { color: var(--forest); background: var(--yellow); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.035em; }
h1 { font-weight: 900; }
p { line-height: 1.65; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 9999; top: 10px; left: 10px; padding: 10px 16px; border-radius: 9px; color: white; background: var(--forest); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; height: 76px; color: white; background: rgba(10, 45, 40, .92); border-bottom: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(14px); }
.header-inner { width: min(calc(100% - 40px), var(--max)); height: 100%; margin: auto; display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand-plate { width: auto; height: 56px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.28); }




.main-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.main-nav a { position: relative; padding: 10px 12px; border-radius: 10px; color: rgba(255,255,255,.75); font-size: 13px; font-weight: 800; }
.main-nav a:hover, .main-nav a.active { color: white; background: rgba(255,255,255,.09); }
.main-nav a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; background: var(--yellow); border-radius: 999px; }
.nav-label { display: none; }
.menu-button { display: none; margin-left: auto; width: 42px; height: 42px; color: white; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; }

/* Shared */
.button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px; border: 2px solid transparent; border-radius: 14px; font-weight: 900; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--forest-2); background: var(--yellow); border-color: #ffe97e; box-shadow: 0 6px 0 #cc9f19; }
.button-primary:hover { box-shadow: 0 8px 0 #cc9f19; }
.button-ghost { color: white; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
.button-small { min-height: 38px; padding: 0 14px; border-radius: 11px; color: white; background: var(--forest); border: 0; box-shadow: none; font-size: 13px; }
.text-button { color: var(--muted); background: none; border: 0; font-weight: 800; }
.eyebrow { margin-bottom: 14px; color: var(--orange); font-size: 12px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.pulse-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--yellow); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,210,63,.15); }
.panel { background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-kicker { margin-bottom: 7px; color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.count-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; color: var(--forest); background: var(--yellow); border-radius: 999px; font-size: 12px; font-weight: 900; white-space: nowrap; }
.section-heading { max-width: 700px; margin-bottom: 34px; }.section-heading.center { margin-inline: auto; text-align: center; }
.section-heading h2 { margin-bottom: 10px; font-size: clamp(31px, 4vw, 52px); color: var(--forest); }
.section-heading p:not(.eyebrow) { color: var(--muted); }
.page-main { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; min-height: 80vh; padding-bottom: 80px; }

/* Landing */
.hero-maze { position: relative; min-height: calc(100vh - 76px); padding: 62px max(24px, calc((100vw - var(--max))/2)); color: white; background:
  radial-gradient(circle at 86% 12%, rgba(255,210,63,.22), transparent 27%),
  radial-gradient(circle at 6% 72%, rgba(88,214,199,.18), transparent 23%),
  linear-gradient(135deg, #0a2d28 0%, #123f35 48%, #174f3d 100%);
  overflow: hidden;
}
.hero-maze::before, .hero-maze::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; filter: blur(1px); opacity: .35; }
.hero-maze::before { width: 460px; height: 460px; right: -180px; top: 30px; background: repeating-radial-gradient(circle, transparent 0 25px, rgba(88,214,199,.22) 27px 30px); }
.hero-maze::after { width: 380px; height: 190px; left: -90px; bottom: -90px; background: radial-gradient(ellipse, #3f8a48 0 15%, transparent 16%), radial-gradient(ellipse at 70% 30%, #73a94e 0 12%, transparent 13%); }
.hero-copy { position: relative; z-index: 2; width: min(560px, 46%); padding-top: 60px; }
.hero-copy h1 { margin-bottom: 22px; font-size: clamp(48px, 6vw, 86px); line-height: .93; text-wrap: balance; }
.hero-copy h1 span { color: var(--yellow); text-shadow: 0 5px 0 rgba(0,0,0,.15); }
.hero-copy > p:not(.eyebrow) { max-width: 510px; color: rgba(255,255,255,.72); font-size: 18px; }
.hero-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 30px; }
.maze-shell { position: absolute; z-index: 3; top: 35px; right: max(8px, calc((100vw - var(--max))/2 - 25px)); width: min(710px, 56vw); padding: 16px; background: rgba(5,30,27,.42); border: 1px solid rgba(255,255,255,.14); border-radius: 28px; box-shadow: 0 40px 90px rgba(0,0,0,.3); backdrop-filter: blur(6px); }
.maze-hud { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 12px 10px; gap: 18px; }
.maze-hud div:first-child { display: flex; flex-direction: column; }.hud-label { color: var(--mint); font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }.maze-hud strong { font-size: 15px; }
.maze-keys { display: flex; gap: 6px; }.maze-keys kbd { padding: 5px 8px; color: rgba(255,255,255,.62); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 7px; font-size: 10px; box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.maze-viewport { position: relative; display: grid; place-items: center; height: 590px; border-radius: 20px; overflow: hidden; background:
  radial-gradient(circle at 45% 48%, rgba(255,210,63,.13), transparent 36%),
  linear-gradient(180deg, rgba(26,85,60,.8), rgba(6,36,31,.9));
}
.maze-viewport::before { content: ""; position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(rgba(255,255,255,.45) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.45) 1px, transparent 1px); background-size: 36px 36px; }
.maze-glow { position: absolute; width: 62%; height: 42%; border-radius: 50%; background: rgba(255,210,63,.17); filter: blur(30px); transform: translateY(120px); }
.maze-board { --cell: 42px; position: relative; width: calc(13 * var(--cell)); height: calc(9 * var(--cell)); transform: perspective(900px) rotateX(58deg) rotateZ(-42deg); transform-style: preserve-3d; cursor: crosshair; transition: filter .3s; }
.maze-board:focus-visible { outline: none; filter: drop-shadow(0 0 16px rgba(255,210,63,.5)); }
.maze-tile { position: absolute; width: calc(var(--cell) - 2px); height: calc(var(--cell) - 2px); left: calc(var(--col) * var(--cell)); top: calc(var(--row) * var(--cell)); border-radius: 5px; transform-style: preserve-3d; transition: filter .18s, transform .18s; }
.maze-tile.path { background: #d0b66c; border: 1px solid #f0dc91; box-shadow: inset 0 0 0 3px rgba(108,76,31,.15), 0 0 0 1px rgba(0,0,0,.05); }
.maze-tile.path:nth-child(3n) { background: #c4aa60; }
.maze-tile.path:hover { filter: brightness(1.18); transform: translateZ(3px); }
.maze-tile.wall { background: linear-gradient(135deg, #397653, #24583f 65%, #164b35); border: 1px solid #58a56d; transform: translateZ(18px); box-shadow: 8px 9px 0 #0e3d2c, inset 5px 5px 0 rgba(255,255,255,.08); }
.maze-tile.wall::before { content: ""; position: absolute; inset: 7px; border: 2px solid rgba(11,52,37,.6); border-radius: 3px; }
.maze-tile.exit { z-index: 4; background: var(--exit-color); border: 3px solid white; box-shadow: 0 0 18px var(--exit-color), inset 0 0 0 3px rgba(0,0,0,.13); animation: exitPulse 2.4s ease-in-out infinite; }
.maze-tile.exit::after { content: attr(data-short); position: absolute; z-index: 3; left: 50%; bottom: 100%; padding: 4px 7px; color: var(--forest); background: white; border-radius: 6px; font-size: 8px; font-weight: 900; transform: translate(-50%, -7px) rotateZ(42deg) rotateX(-55deg); white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.22); }
@keyframes exitPulse { 50% { filter: brightness(1.25); } }
.maze-pin { position: absolute; z-index: 10; left: calc(var(--col) * var(--cell) + 8px); top: calc(var(--row) * var(--cell) + 8px); display: grid; place-items: center; width: 27px; height: 27px; color: white; background: var(--pin-color); border: 3px solid white; border-radius: 9px; font-size: 8px; font-weight: 900; box-shadow: 4px 5px 0 rgba(0,0,0,.24); transform: translateZ(35px); pointer-events: none; }
.maze-pin::after { content: attr(data-name); position: absolute; left: 50%; bottom: 36px; padding: 5px 7px; color: var(--forest); background: white; border-radius: 7px; opacity: 0; transform: translateX(-50%); transition: opacity .2s; white-space: nowrap; }
.maze-pin.nearby::after { opacity: 1; }
.maze-player { position: absolute; z-index: 20; left: calc(var(--col) * var(--cell) + 7px); top: calc(var(--row) * var(--cell) + 7px); width: 29px; height: 29px; border: 4px solid white; border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 34% 28%, #ffe88d 0 15%, var(--orange) 16% 60%, #9f2e12 61%); box-shadow: 4px 7px 0 rgba(0,0,0,.28), 0 0 0 5px rgba(255,210,63,.2); transform: translateZ(42px); transition: left .14s ease, top .14s ease; }
.maze-player::before { content: ""; position: absolute; left: 8px; top: -10px; width: 7px; height: 12px; background: var(--yellow); border-radius: 90% 0; transform: rotate(18deg); }
.maze-mobile-controls { display: none; grid-template-columns: repeat(3, 44px); justify-content: center; gap: 5px; padding: 12px 0 0; }.maze-mobile-controls button { width: 44px; height: 38px; color: white; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 9px; }
.maze-legend { display: flex; justify-content: center; gap: 22px; padding: 13px 0 0; color: rgba(255,255,255,.62); font-size: 10px; }.maze-legend span { display: inline-flex; align-items: center; gap: 6px; }.maze-legend i { width: 9px; height: 9px; border-radius: 3px; }.legend-player { background: var(--orange); }.legend-tool { background: var(--purple); }.legend-exit { background: var(--yellow); }
.route-section { padding: 100px max(24px, calc((100vw - var(--max))/2)); background: #fffdf5; }
.route-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.route-card { position: relative; min-height: 270px; padding: 24px 19px 20px; background: white; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 12px 28px rgba(10,45,40,.09); transition: transform .25s, box-shadow .25s; }
.route-card:hover { transform: translateY(-9px) rotate(-1deg); box-shadow: 0 24px 50px rgba(10,45,40,.16); }
.route-card::after { content: ""; position: absolute; width: 140px; height: 140px; right: -55px; bottom: -55px; background: var(--route-color); border-radius: 50%; opacity: .12; }
.route-number { display: block; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .13em; }.route-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 22px 0; color: var(--forest); background: var(--route-color); border: 3px solid var(--forest); border-radius: 20px 18px 15px 18px; box-shadow: 5px 6px 0 var(--forest); transform: rotate(-3deg); font-size: 26px; }.route-card h3 { margin-bottom: 8px; font-size: 20px; }.route-card p { color: var(--muted); font-size: 13px; line-height: 1.5; }.route-arrow { position: absolute; right: 18px; top: 18px; font-weight: 900; }
.quick-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 38px max(24px, calc((100vw - var(--max))/2)); color: white; background: var(--forest); }.quick-stats div { display: flex; flex-direction: column; align-items: center; border-right: 1px solid rgba(255,255,255,.14); }.quick-stats div:last-child { border: 0; }.quick-stats strong { color: var(--yellow); font-size: 38px; }.quick-stats span { color: rgba(255,255,255,.65); font-size: 12px; }

/* Interior page shell */
.compact-hero { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 280px; margin: 0 calc((min(100vw, var(--max) + 40px) - 100vw)/2); padding: 52px max(20px, calc((100vw - var(--max))/2)); color: white; background: linear-gradient(135deg, var(--forest-2), var(--forest)); overflow: hidden; }
.compact-hero::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: radial-gradient(circle at 30% 40%, var(--yellow) 0 2px, transparent 3px), linear-gradient(120deg, transparent 0 70%, var(--mint) 70% 71%, transparent 71%); background-size: 43px 43px, 100% 100%; }
.compact-hero > div:first-child { position: relative; z-index: 1; max-width: 720px; }.compact-hero h1 { margin-bottom: 10px; font-size: clamp(42px, 6vw, 72px); line-height: 1; }.compact-hero p:not(.eyebrow) { max-width: 650px; margin: 0; color: rgba(255,255,255,.7); font-size: 17px; }.hero-emblem { position: relative; z-index: 1; display: grid; place-items: center; width: 140px; height: 140px; margin-right: 40px; background: var(--yellow); border: 7px solid rgba(255,255,255,.9); border-radius: 42% 58% 47% 53%; box-shadow: 12px 14px 0 rgba(0,0,0,.2); transform: rotate(8deg); color: var(--forest); }.hero-emblem span { position: absolute; left: 20px; top: 16px; font-size: 17px; font-weight: 900; }.hero-emblem b { font-size: 60px; }

/* Choose */
.guide-layout { display: grid; grid-template-columns: 1.35fr .8fr; gap: 22px; margin-top: -32px; position: relative; z-index: 3; }
.guide-panel { padding: 34px; }.guide-panel h2, .checklist h2 { font-size: 32px; }.sentence-builder { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }.sentence-builder label { display: inline-flex; align-items: center; gap: 7px; padding: 6px 6px 6px 12px; background: #f2f3e9; border-radius: 12px; font-weight: 800; }.sentence-builder select { max-width: 210px; padding: 9px 29px 9px 10px; color: var(--forest); background: white; border: 1px solid var(--line); border-radius: 9px; font-weight: 800; }.sentence-result { margin-bottom: 22px; padding: 16px 18px; color: var(--forest); background: #ecfbf6; border-left: 5px solid var(--mint); border-radius: 9px; line-height: 1.55; }.dark-panel { color: white; background: var(--forest); border-color: transparent; }.checklist { padding: 30px; }.checklist ol { list-style: none; padding: 0; margin: 22px 0 0; }.checklist li { display: flex; gap: 13px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.11); }.checklist li > span { display: grid; place-items: center; flex: 0 0 34px; height: 34px; color: var(--forest); background: var(--yellow); border-radius: 10px; font-size: 11px; font-weight: 900; }.checklist strong { display: block; }.checklist p { margin: 2px 0 0; color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.4; }.starter-section { padding-top: 80px; }.starter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.starter-card { position: relative; padding: 24px; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgba(10,45,40,.08); }.starter-card .starter-emoji { display: grid; place-items: center; width: 47px; height: 47px; margin-bottom: 18px; background: var(--starter-color); border: 2px solid var(--forest); border-radius: 14px; box-shadow: 4px 4px 0 var(--forest); font-size: 22px; }.starter-card h3 { margin-bottom: 8px; }.starter-card p { min-height: 44px; color: var(--muted); font-size: 13px; line-height: 1.5; }.starter-tools { margin: 16px 0; color: var(--forest); font-size: 12px; font-weight: 900; }.starter-card a { color: var(--orange); font-size: 13px; font-weight: 900; }

/* Explorer */
.panel-toolbar { position: sticky; z-index: 20; top: 88px; display: flex; align-items: center; gap: 12px; margin: 28px 0 22px; padding: 12px; background: rgba(255,253,245,.9); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(12px); }
.search-control { position: relative; flex: 1; }.search-control input { width: 100%; min-height: 44px; padding: 0 42px 0 14px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 11px; outline: none; }.search-control input:focus { border-color: var(--mint); box-shadow: 0 0 0 4px rgba(88,214,199,.14); }.search-control i { position: absolute; right: 15px; top: 8px; color: var(--muted); font-size: 22px; font-style: normal; }.view-toggle { display: flex; padding: 4px; background: #e9ede6; border-radius: 11px; }.view-toggle button { min-height: 36px; padding: 0 14px; color: var(--muted); background: none; border: 0; border-radius: 8px; font-weight: 900; }.view-toggle button.active { color: white; background: var(--forest); box-shadow: 0 3px 8px rgba(0,0,0,.15); }
.map-view { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; min-height: 690px; }.orbit-map { position: relative; min-height: 690px; background: radial-gradient(circle at center, rgba(88,214,199,.15), transparent 35%), #edf4e9; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; }.orbit-map::before, .orbit-map::after { content: ""; position: absolute; inset: 14% 20%; border: 1px dashed rgba(18,63,53,.18); border-radius: 50%; }.orbit-map::after { inset: 28% 33%; }
.orbit-core { position: absolute; z-index: 4; left: 50%; top: 50%; display: grid; place-items: center; width: 150px; height: 150px; padding: 20px; color: white; background: var(--forest); border: 7px solid white; border-radius: 50%; box-shadow: 0 16px 30px rgba(10,45,40,.24); transform: translate(-50%,-50%); text-align: center; font-weight: 900; }.orbit-core small { display: block; margin-top: 5px; color: var(--mint); }.category-node { position: absolute; z-index: 6; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 9px; width: 180px; min-height: 55px; padding: 8px 11px; color: var(--forest); background: white; border: 2px solid var(--node-color); border-radius: 15px; box-shadow: 5px 6px 0 color-mix(in srgb, var(--node-color), #123f35 38%); transform: translate(-50%,-50%); transition: transform .18s, filter .18s; text-align: left; font-size: 11px; font-weight: 900; }.category-node:hover, .category-node.active { transform: translate(-50%,-50%) scale(1.06) rotate(-1deg); filter: brightness(1.02); }.node-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; color: var(--forest); background: var(--node-color); border-radius: 10px; font-size: 16px; }.category-node.dim { opacity: .18; }.category-drawer { min-height: 690px; padding: 26px; color: white; background: var(--forest); border-radius: 26px; }.drawer-empty { height: 100%; display: grid; place-items: center; align-content: center; text-align: center; }.drawer-empty .drawer-compass { display: grid; place-items: center; width: 82px; height: 82px; margin-bottom: 20px; color: var(--forest); background: var(--yellow); border-radius: 50%; box-shadow: 7px 8px 0 rgba(0,0,0,.18); font-size: 39px; }.drawer-empty p { max-width: 240px; color: rgba(255,255,255,.62); }.drawer-category { display: inline-flex; padding: 6px 10px; color: var(--forest); background: var(--drawer-color); border-radius: 999px; font-size: 10px; font-weight: 900; text-transform: uppercase; }.category-drawer h2 { margin: 16px 0 10px; font-size: 31px; }.category-drawer > p { color: rgba(255,255,255,.68); font-size: 13px; }.drawer-list { display: grid; gap: 9px; margin-top: 24px; }.drawer-tool { display: flex; align-items: center; gap: 11px; padding: 10px; color: white; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }.drawer-tool:hover { background: rgba(255,255,255,.12); }.drawer-tool .brand-logo { flex-basis: 34px; height: 34px; border-width: 2px; border-radius: 10px; }.drawer-tool span:last-child { font-size: 12px; font-weight: 900; }
.table-shell { overflow: auto; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }.table-shell table { width: 100%; border-collapse: collapse; }.table-shell th { padding: 16px; color: white; background: var(--forest); text-align: left; font-size: 12px; }.table-shell td { padding: 16px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 13px; line-height: 1.5; }.table-shell tr:last-child td { border: 0; }.table-shell tbody tr:hover { background: #f2f9f2; }.table-category { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; }.table-category i { width: 12px; height: 12px; border-radius: 4px; }.tool-tags { display: flex; flex-wrap: wrap; gap: 5px; }.tool-tags span { padding: 4px 7px; background: #f0f2ea; border-radius: 7px; font-size: 10px; font-weight: 800; }

/* Builder */
.builder-grid { display: grid; grid-template-columns: 360px minmax(0,1fr); gap: 22px; margin-top: 28px; }.questions-panel { align-self: start; padding: 23px; }.question-block { padding: 22px 0; border-bottom: 1px solid var(--line); }.question-block:first-child { padding-top: 0; }.question-block:last-child { border: 0; padding-bottom: 0; }.question-number { float: left; display: grid; place-items: center; width: 34px; height: 34px; margin-right: 11px; color: var(--forest); background: var(--yellow); border: 2px solid var(--forest); border-radius: 10px; font-size: 11px; font-weight: 900; box-shadow: 3px 3px 0 var(--forest); }.question-block h2 { margin-bottom: 4px; font-size: 18px; }.question-block > div > p { margin: 0 0 15px; color: var(--muted); font-size: 11px; line-height: 1.4; }.chip-options { clear: both; display: flex; flex-wrap: wrap; gap: 7px; padding-top: 14px; }.chip-option { min-height: 34px; padding: 0 10px; color: var(--ink); background: #f0f2e9; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 800; }.chip-option.active { color: white; background: var(--forest); border-color: var(--forest); }.meta-options { clear: both; display: grid; gap: 7px; padding-top: 14px; }.meta-option { display: flex; align-items: center; gap: 9px; padding: 9px; background: #f4f5ee; border: 2px solid transparent; border-radius: 11px; text-align: left; }.meta-option i { width: 12px; height: 12px; background: var(--meta-color); border-radius: 4px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--meta-color), transparent 75%); }.meta-option span { font-size: 11px; font-weight: 900; }.meta-option.active { border-color: var(--meta-color); background: white; }
.workbench-head, .journey-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }.workbench-head h2, .journey-head h2 { margin: 0; font-size: 25px; }.tool-palette { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px; min-height: 150px; margin: 18px 0 26px; }.palette-card { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; min-height: 82px; padding: 12px; background: white; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 7px 18px rgba(10,45,40,.07); cursor: grab; }.palette-card:active { cursor: grabbing; }.palette-card:hover { border-color: var(--category-color); transform: translateY(-2px); }.palette-card .brand-logo { grid-row: 1 / 3; }.palette-card strong { align-self: end; font-size: 12px; }.palette-card small { align-self: start; color: var(--muted); font-size: 9px; line-height: 1.3; }.palette-add { position: absolute; right: 7px; top: 7px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; color: white; background: var(--forest); border: 0; border-radius: 8px; font-weight: 900; }.empty-palette { grid-column: 1/-1; display: grid; place-items: center; min-height: 160px; padding: 25px; color: var(--muted); background: #f1f3e9; border: 2px dashed var(--line); border-radius: 18px; text-align: center; }
.journey-panel { padding: 23px; }.journey-head > div:last-child { display: flex; gap: 6px; }.journey-lane { position: relative; display: flex; align-items: stretch; gap: 27px; min-height: 180px; margin-top: 18px; padding: 24px; background: #eef4e9; border: 2px dashed rgba(18,63,53,.19); border-radius: 17px; overflow-x: auto; }.journey-lane.drag-over { border-color: var(--orange); background: #fff1df; }.journey-step { position: relative; flex: 0 0 150px; padding: 15px 12px 12px; background: white; border: 2px solid var(--step-color); border-radius: 15px; box-shadow: 5px 6px 0 color-mix(in srgb, var(--step-color), #123f35 35%); }.journey-step:not(:last-child)::after { content: "→"; position: absolute; left: calc(100% + 9px); top: 58px; color: var(--forest); font-size: 22px; font-weight: 900; }.journey-step .brand-logo { margin-bottom: 10px; }.journey-step strong { display: block; font-size: 12px; }.journey-step small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.3; }.remove-step { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; color: var(--muted); background: #eff1eb; border: 0; border-radius: 7px; }.step-index { display: block; margin-bottom: 8px; color: var(--orange); font-size: 9px; font-weight: 900; text-transform: uppercase; }.drop-placeholder { margin: auto; display: grid; place-items: center; color: var(--muted); text-align: center; }.drop-placeholder b { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; color: var(--forest); background: var(--yellow); border-radius: 14px; font-size: 24px; }.drop-placeholder span { font-weight: 900; }.drop-placeholder small { margin-top: 4px; }

/* Tracker */
.tracker-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 26px 0; }.stat-card { padding: 20px; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 22px rgba(10,45,40,.07); }.stat-card span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; }.stat-card strong { display: block; margin: 5px 0; color: var(--forest); font-size: 31px; }.stat-card i { display: block; height: 5px; background: #e9ede5; border-radius: 999px; overflow: hidden; }.stat-card i::after { content: ""; display: block; width: var(--progress); height: 100%; background: var(--stat-color); border-radius: inherit; }.tracker-panel { padding: 16px; }.tracker-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }.tracker-toolbar select, .cards-toolbar select { min-height: 44px; padding: 0 36px 0 12px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 11px; }.used-filter { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; white-space: nowrap; }.used-filter input { width: 17px; height: 17px; accent-color: var(--forest); }.tracker-table-wrap { overflow: auto; max-height: 720px; border: 1px solid var(--line); border-radius: 13px; }.tracker-table { width: 100%; min-width: 980px; border-collapse: collapse; }.tracker-table thead { position: sticky; top: 0; z-index: 3; }.tracker-table th { padding: 13px 11px; color: white; background: var(--forest); text-align: left; font-size: 11px; }.tracker-table th small { color: var(--mint); }.tracker-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 11px; }.tracker-table tr:hover td { background: #f6f7f1; }.tool-cell { display: flex; align-items: center; gap: 9px; min-width: 155px; font-weight: 900; }.tool-cell .brand-logo { width: 32px; height: 32px; border-radius: 9px; border-width: 2px; font-size: 8px; }.category-cell { max-width: 180px; color: var(--muted); }.used-check { width: 20px; height: 20px; accent-color: var(--forest); }.rating { display: flex; gap: 3px; }.rating button { display: grid; place-items: center; width: 25px; height: 25px; padding: 0; color: #9aa7a4; background: #e8ece7; border: 0; border-radius: 7px; font-size: 10px; font-weight: 900; }.rating button.active { color: var(--forest); background: var(--yellow); }.rating.appreciation button.active { color: white; background: var(--orange); }.comment-input { width: 100%; min-width: 200px; min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }

/* Cards */
.cards-toolbar .search-control { min-width: 280px; }.tool-card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.tool-card { position: relative; display: flex; flex-direction: column; min-height: 440px; padding: 23px; background: white; border: 1px solid var(--line); border-top: 7px solid var(--card-color); border-radius: 20px; box-shadow: 0 12px 28px rgba(10,45,40,.09); transition: transform .22s, box-shadow .22s; }.tool-card:hover { transform: translateY(-5px); box-shadow: 0 22px 45px rgba(10,45,40,.14); }.card-top { display: flex; align-items: flex-start; gap: 14px; }.brand-logo { position: relative; display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; color: white; background: var(--logo-color, var(--forest)); border: 3px solid var(--forest); border-radius: 14px; box-shadow: 4px 4px 0 var(--forest); overflow: hidden; font-size: 11px; font-weight: 900; letter-spacing: -.03em; }.brand-logo img { width: 58%; height: 58%; object-fit: contain; filter: brightness(0) invert(1); }.brand-logo.logo-light img { filter: none; }.card-heading { min-width: 0; }.tool-card h2 { margin: 2px 0 4px; font-size: 22px; overflow-wrap: anywhere; }.company-name { margin: 0; color: var(--muted); font-size: 11px; font-weight: 800; }.category-pill { align-self: flex-start; margin: 18px 0 13px; padding: 5px 8px; color: var(--forest); background: color-mix(in srgb, var(--card-color), white 68%); border-radius: 7px; font-size: 9px; font-weight: 900; text-transform: uppercase; }.tool-usage { margin-bottom: 18px; color: #4f6660; font-size: 12px; line-height: 1.55; }.card-facts { display: grid; gap: 10px; margin-top: auto; }.card-fact { display: grid; grid-template-columns: 82px 1fr; gap: 10px; padding-top: 9px; border-top: 1px solid var(--line); }.card-fact dt { color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }.card-fact dd { margin: 0; font-size: 10px; line-height: 1.4; }.card-fact.output dd { color: var(--forest); font-weight: 900; }.level-badge { display: inline-flex; padding: 4px 7px; color: var(--forest); background: #eef2e8; border-radius: 6px; font-size: 9px; font-weight: 900; }

/* Footer & toasts */
.site-footer { color: rgba(255,255,255,.7); background: var(--forest-2); }.footer-inner { width: min(calc(100% - 40px), var(--max)); margin: auto; display: flex; align-items: center; min-height: 92px; padding: 26px 0; }.footer-inner p { margin: 0; font-size: 11px; }.toast-region { position: fixed; z-index: 999; right: 20px; bottom: 20px; display: grid; gap: 8px; }.toast { max-width: 330px; padding: 13px 16px; color: white; background: var(--forest); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; box-shadow: var(--shadow); animation: toastIn .25s ease-out; font-size: 12px; font-weight: 800; }.toast.success { border-left: 5px solid var(--mint); }.toast.warning { border-left: 5px solid var(--yellow); }@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }
.empty-state { grid-column: 1/-1; padding: 50px; color: var(--muted); background: #f1f3ea; border: 2px dashed var(--line); border-radius: 20px; text-align: center; }.empty-state strong { display: block; margin-bottom: 7px; color: var(--forest); font-size: 20px; }

@media (max-width: 1120px) {
  .main-nav a { padding-inline: 8px; font-size: 11px; }
  .hero-maze { min-height: auto; padding-bottom: 70px; }.hero-copy { width: 100%; max-width: 720px; padding-top: 10px; }.maze-shell { position: relative; top: auto; right: auto; width: min(100%, 760px); margin: 45px auto 0; }.hero-copy h1 { font-size: clamp(50px,9vw,78px); }.route-grid { grid-template-columns: repeat(3,1fr); }.map-view { grid-template-columns: 1fr; }.category-drawer { min-height: auto; }.orbit-map { min-height: 650px; }.builder-grid { grid-template-columns: 310px minmax(0,1fr); }.tool-palette { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 820px) {
  .site-header { height: 66px; }.brand-plate { height: 46px; }.header-inner { width: min(calc(100% - 24px), var(--max)); }.menu-button { display: grid; place-items: center; }.main-nav { position: fixed; left: 12px; right: 12px; top: 72px; display: none; flex-direction: column; align-items: stretch; padding: 10px; background: var(--forest-2); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; box-shadow: var(--shadow); }.main-nav.open { display: flex; }.main-nav a { padding: 12px; font-size: 13px; }.nav-label { display: inline; }.page-main { width: min(calc(100% - 24px), var(--max)); }.hero-emblem { display: none; }.compact-hero { min-height: 240px; }.compact-hero h1 { font-size: 45px; }.guide-layout, .builder-grid { grid-template-columns: 1fr; }.starter-grid { grid-template-columns: repeat(2,1fr); }.route-grid { grid-template-columns: repeat(2,1fr); }.quick-stats { grid-template-columns: repeat(2,1fr); gap: 26px 0; }.quick-stats div:nth-child(2) { border-right: 0; }.panel-toolbar, .tracker-toolbar { flex-wrap: wrap; }.search-control { flex-basis: 100%; }.cards-toolbar .search-control { min-width: 100%; }.tool-card-grid { grid-template-columns: repeat(2,1fr); }.tracker-stats { grid-template-columns: repeat(2,1fr); }.questions-panel { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }.question-block { padding: 0 15px 0 0; border-bottom: 0; border-right: 1px solid var(--line); }.question-block:last-child { border: 0; }.orbit-map { min-height: 720px; }.category-node { width: 150px; font-size: 9px; }.maze-mobile-controls { display: grid; }
}

@media (max-width: 590px) {
  .hero-maze { padding: 43px 12px; }.hero-copy { padding: 0 10px; }.hero-copy h1 { font-size: 48px; }.hero-copy > p:not(.eyebrow) { font-size: 15px; }.hero-actions { display: grid; }.maze-shell { padding: 9px; border-radius: 18px; }.maze-hud { align-items: flex-start; }.maze-keys { display: none; }.maze-viewport { height: 430px; }.maze-board { --cell: 29px; }.maze-pin { left: calc(var(--col) * var(--cell) + 5px); top: calc(var(--row) * var(--cell) + 5px); width: 20px; height: 20px; border-width: 2px; border-radius: 6px; font-size: 6px; }.maze-player { left: calc(var(--col) * var(--cell) + 4px); top: calc(var(--row) * var(--cell) + 4px); width: 22px; height: 22px; border-width: 3px; }.maze-legend { gap: 10px; flex-wrap: wrap; }.route-section { padding: 70px 16px; }.route-grid, .starter-grid, .tool-card-grid { grid-template-columns: 1fr; }.route-card { min-height: 220px; }.quick-stats { padding-inline: 15px; }.quick-stats strong { font-size: 29px; }.quick-stats span { font-size: 10px; }.compact-hero { margin-inline: -12px; padding: 42px 20px; }.compact-hero h1 { font-size: 39px; }.guide-panel, .checklist { padding: 22px; }.sentence-builder { display: grid; }.sentence-builder label { justify-content: space-between; }.sentence-builder select { max-width: 170px; }.questions-panel { display: block; }.question-block { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }.tool-palette { grid-template-columns: 1fr; }.journey-panel { padding: 16px; }.workbench-head, .journey-head { align-items: flex-start; }.journey-head { flex-direction: column; }.tracker-stats { grid-template-columns: 1fr 1fr; }.tracker-panel { padding: 9px; }.tracker-toolbar > * { flex: 1 1 100%; }.tracker-toolbar select, .tracker-toolbar .button { width: 100%; }.used-filter { padding: 8px; }.cards-toolbar select { flex: 1 1 100%; width: 100%; min-width: 0; }.orbit-map { min-height: 820px; }.orbit-map::before, .orbit-map::after { display: none; }.category-node { width: 132px; min-height: 48px; padding: 6px; }.node-icon { flex-basis: 29px; height: 29px; }.orbit-core { width: 115px; height: 115px; font-size: 12px; }.category-drawer { padding: 20px; }.tool-card { min-height: 0; }
}

/* Home V2: full-screen board-game maze */



.brand { letter-spacing: .025em; }
.main-nav a { display: inline-flex; align-items: center; gap: 6px; }
.nav-label { display: inline; }
.section-svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon { width: 17px; height: 17px; stroke-width: 3.2; }

.hero-maze { min-height: calc(100vh - 76px); padding: 0; color: white; background: #061a34; overflow: hidden; }
.hero-maze::before { width: 100%; height: 100%; inset: 0; border-radius: 0; opacity: .35; filter: none; background:
  radial-gradient(circle at 12% 20%, #fff 0 1px, transparent 1.5px),
  radial-gradient(circle at 78% 14%, #ffd23f 0 1.5px, transparent 2px),
  radial-gradient(circle at 91% 58%, #70d6ff 0 1px, transparent 1.5px);
  background-size: 90px 90px, 130px 130px, 110px 110px;
}
.hero-maze::after { width: 100%; height: 34%; left: 0; bottom: -14%; border-radius: 50% 50% 0 0; opacity: .6; filter: blur(18px); background: linear-gradient(90deg, #133e48, #225b4f 38%, #183b53 72%, #0c2b3b); }
.maze-shell { position: relative; z-index: 3; top: auto; right: auto; width: 100%; padding: 0; background: rgba(3,17,37,.28); border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.maze-topbar { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 112px; padding: 18px max(28px, calc((100vw - var(--max))/2)); background: linear-gradient(90deg, rgba(4,21,47,.98), rgba(8,37,68,.91)); border-bottom: 1px solid rgba(112,214,255,.18); box-shadow: 0 12px 35px rgba(0,0,0,.2); }
.maze-topbar h1 { max-width: 790px; margin: 0; color: #fff8df; font-size: clamp(31px, 3.7vw, 59px); line-height: .98; text-wrap: balance; text-shadow: 0 5px 0 rgba(0,0,0,.24); }
.maze-hud { flex: 0 0 auto; min-width: 280px; min-height: 68px; padding: 12px 14px; color: white; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; }
.maze-hud div:first-child { min-width: 150px; }
.maze-keys { align-self: center; }
.maze-viewport { height: calc(100vh - 254px); min-height: 610px; border-radius: 0; overflow: hidden; background:
  radial-gradient(circle at 78% 15%, rgba(255,248,213,.92) 0 26px, rgba(112,214,255,.14) 27px 54px, transparent 55px),
  radial-gradient(ellipse at 50% 80%, rgba(88,214,199,.18), transparent 42%),
  linear-gradient(180deg, #071b3b 0%, #0b3155 52%, #082c3d 100%);
}
.maze-viewport::before { opacity: .1; background-image: linear-gradient(rgba(112,214,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(112,214,255,.4) 1px, transparent 1px); background-size: 54px 54px; }
.maze-viewport::after { content: ""; position: absolute; z-index: 0; left: -5%; right: -5%; bottom: -85px; height: 220px; opacity: .75; background:
  radial-gradient(ellipse at 5% 100%, #0a2f37 0 35%, transparent 36%),
  radial-gradient(ellipse at 22% 100%, #16483e 0 32%, transparent 33%),
  radial-gradient(ellipse at 46% 100%, #0d3b3b 0 38%, transparent 39%),
  radial-gradient(ellipse at 70% 100%, #16483e 0 34%, transparent 35%),
  radial-gradient(ellipse at 94% 100%, #0a2f37 0 38%, transparent 39%);
}
.maze-glow { width: 70%; height: 48%; background: rgba(112,214,255,.12); filter: blur(45px); transform: translateY(140px); }
.maze-board { --cell: clamp(46px, 5vw, 76px); z-index: 4; width: calc(13 * var(--cell)); height: calc(9 * var(--cell)); transform: perspective(1200px) rotateX(57deg) rotateZ(-44deg) scale(1.03); filter: drop-shadow(0 42px 35px rgba(0,0,0,.36)); }
.maze-tile.path { background: linear-gradient(135deg, #d5ae55, #b88634); border: 1px solid #ffe099; box-shadow: inset 0 0 0 3px rgba(84,49,18,.16), 0 0 0 1px rgba(0,0,0,.1); }
.maze-tile.path:nth-child(3n) { background: linear-gradient(135deg, #e1bd67, #c0933e); }
.maze-tile.wall { background: linear-gradient(135deg, #4b7ea0, #2d5878 62%, #193f61); border: 1px solid #80b1cc; transform: translateZ(25px); box-shadow: 10px 12px 0 #102c4c, inset 6px 6px 0 rgba(255,255,255,.1); }
.maze-tile.wall::before { border-color: rgba(9,35,65,.55); }
.maze-tile.exit { z-index: 8; border-width: 4px; box-shadow: 0 0 28px var(--exit-color), inset 0 0 0 5px rgba(0,0,0,.17); }
.maze-tile.exit::after { display: none; }
.maze-exit-gate { position: absolute; z-index: 40; left: calc(var(--col) * var(--cell) - 17px); top: calc(var(--row) * var(--cell) - 27px); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 76px; min-height: 55px; padding: 8px 7px; color: #071b3b; background: white; border: 4px solid var(--exit-color); border-radius: 18px 18px 7px 7px; box-shadow: 0 7px 0 color-mix(in srgb, var(--exit-color), #071b3b 45%), 0 0 28px var(--exit-color); transform: translateZ(74px) rotateZ(44deg) rotateX(-57deg); transform-origin: center bottom; pointer-events: none; text-align: center; }
.maze-exit-gate::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -21px; width: 24px; height: 24px; border: 5px solid var(--exit-color); border-bottom: 0; border-radius: 50% 50% 0 0; transform: translateX(-50%); }
.maze-exit-gate b { color: #60716f; font-size: 7px; letter-spacing: .15em; }.maze-exit-gate strong { font-size: 11px; line-height: 1; }
.maze-pin { width: 32px; height: 32px; border-radius: 10px; transform: translateZ(48px); box-shadow: 5px 6px 0 rgba(0,0,0,.3); }
.maze-player { left: calc(var(--col) * var(--cell) - 11px); top: calc(var(--row) * var(--cell) - 31px); display: grid; place-items: center; width: 70px; height: 88px; border: 0; border-radius: 0; background: transparent; box-shadow: 0 9px 0 rgba(0,0,0,.28); transform: translateZ(96px) rotateZ(44deg) rotateX(-57deg); }
.maze-player::before, .maze-player::after { display: none; }
.queen-piece { width: 68px; height: 88px; overflow: visible; fill: #ffd23f; stroke: #071b3b; stroke-width: 2.8; stroke-linejoin: round; paint-order: stroke fill; }
.queen-piece .queen-crown { fill: #ff8a1e; }.queen-piece .queen-glint { fill: none; stroke: #fff8df; stroke-width: 3; stroke-linecap: round; }
.exit-directory { position: relative; z-index: 20; display: flex; justify-content: center; gap: 8px; padding: 10px max(18px, calc((100vw - var(--max))/2)); background: #061a34; border-top: 1px solid rgba(112,214,255,.15); overflow-x: auto; }
.exit-directory button { position: relative; display: grid; grid-template-columns: 12px auto; grid-template-rows: auto auto; column-gap: 8px; flex: 0 0 auto; min-width: 104px; min-height: 48px; padding: 7px 11px; color: white; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: 11px; text-align: left; transition: transform .18s, background .18s; }
.exit-directory button:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.exit-directory i { grid-row: 1 / 3; align-self: center; width: 10px; height: 26px; background: var(--exit-color); border-radius: 999px; box-shadow: 0 0 12px var(--exit-color); }
.exit-directory span { color: rgba(255,255,255,.5); font-size: 7px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.exit-directory strong { font-size: 10px; }
.maze-legend { padding: 9px 20px 12px; background: #061a34; }
.legend-player { background: var(--yellow); }

.route-section { padding-top: 86px; }
.route-section .section-heading { margin-bottom: 38px; }
.route-icon { font-size: 0; }
.route-icon .section-svg { width: 34px; height: 34px; stroke-width: 2.4; }
.hero-emblem .emblem-icon { width: 68px; height: 68px; stroke-width: 2.2; }

@media (max-width: 1120px) {
  .main-nav a { font-size: 10px; }
  .maze-shell { width: 100%; margin: 0; }
  .maze-topbar { padding-inline: 28px; }
  .maze-topbar h1 { max-width: 590px; }
  .maze-viewport { height: 650px; }
  .maze-board { --cell: 55px; }
}

@media (max-width: 820px) {
  .maze-topbar { min-height: 148px; align-items: flex-start; flex-direction: column; gap: 14px; padding: 21px 18px 16px; }
  .maze-topbar h1 { max-width: 680px; font-size: clamp(33px, 7vw, 48px); }
  .maze-hud { width: 100%; min-width: 0; min-height: 58px; }
  .maze-viewport { height: 600px; min-height: 0; }
  .maze-board { --cell: 43px; transform: perspective(1000px) rotateX(57deg) rotateZ(-44deg) scale(.98); }
  .exit-directory { justify-content: flex-start; }
  .maze-exit-gate { width: 63px; min-height: 48px; left: calc(var(--col) * var(--cell) - 14px); top: calc(var(--row) * var(--cell) - 23px); }
}

@media (max-width: 590px) {
  
  .hero-maze { padding: 0; }
  .maze-topbar { min-height: 152px; padding: 18px 14px 14px; }
  .maze-topbar h1 { font-size: 34px; line-height: 1; }
  .maze-hud { padding: 9px 10px; }
  .maze-keys { display: none; }
  .maze-viewport { height: 510px; }
  .maze-board { --cell: 29px; transform: perspective(850px) rotateX(57deg) rotateZ(-44deg) scale(1.02); }
  .maze-tile.wall { transform: translateZ(16px); box-shadow: 6px 7px 0 #102c4c, inset 4px 4px 0 rgba(255,255,255,.1); }
  .maze-pin { left: calc(var(--col) * var(--cell) + 4px); top: calc(var(--row) * var(--cell) + 4px); width: 22px; height: 22px; transform: translateZ(32px); }
  .maze-exit-gate { left: calc(var(--col) * var(--cell) - 8px); top: calc(var(--row) * var(--cell) - 19px); width: 46px; min-height: 38px; padding: 5px 3px; border-width: 3px; border-radius: 12px 12px 5px 5px; transform: translateZ(48px) rotateZ(44deg) rotateX(-57deg); }
  .maze-exit-gate::before { top: -15px; width: 16px; height: 17px; border-width: 3px; }
  .maze-exit-gate b { font-size: 5px; }.maze-exit-gate strong { font-size: 7px; }
  .maze-player { left: calc(var(--col) * var(--cell) - 8px); top: calc(var(--row) * var(--cell) - 22px); width: 52px; height: 65px; transform: translateZ(62px) rotateZ(44deg) rotateX(-57deg); }
  .queen-piece { width: 50px; height: 66px; }
  .exit-directory { padding: 9px 12px; }
  .exit-directory button { min-width: 94px; }
  .maze-mobile-controls { background: #061a34; padding: 9px 0 0; }
  .maze-legend { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Lexique */
.maze-exit-gate b { letter-spacing: .04em; }
.footer-signature { margin: 0; font-size: 12px; line-height: 1.6; }
.footer-signature strong { color: var(--yellow); }

.lexicon-toolbar select { min-height: 44px; padding: 0 36px 0 12px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 11px; }
.strate-rail { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.strate-rail a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px 9px 9px; background: white; border: 1px solid var(--line); border-left: 4px solid var(--strate-color); border-radius: 11px; font-size: 12px; font-weight: 800; color: var(--forest); box-shadow: 0 6px 16px rgba(10,45,40,.06); transition: transform .18s, box-shadow .18s; }
.strate-rail a:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(10,45,40,.12); }
.strate-rail b { display: grid; place-items: center; width: 24px; height: 24px; color: var(--forest); background: color-mix(in srgb, var(--strate-color), white 62%); border-radius: 7px; font-size: 10px; }

.strate-section { scroll-margin-top: 150px; margin-bottom: 58px; }
.strate-head { max-width: 780px; margin-bottom: 26px; padding-left: 18px; border-left: 5px solid var(--strate-color); }
.strate-number { margin-bottom: 6px; color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.strate-head h2 { margin-bottom: 10px; color: var(--forest); font-size: clamp(24px, 2.6vw, 36px); }
.strate-purpose { margin: 0; color: var(--muted); font-size: 14px; }

.term-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.term-card { display: flex; flex-direction: column; scroll-margin-top: 150px; padding: 22px; background: white; border: 1px solid var(--line); border-top: 7px solid var(--card-color); border-radius: 20px; box-shadow: 0 12px 28px rgba(10,45,40,.09); transition: transform .22s, box-shadow .22s; }
.term-card:hover { transform: translateY(-5px); box-shadow: 0 22px 45px rgba(10,45,40,.14); }
.term-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.term-icon { display: grid; place-items: center; width: 46px; height: 46px; background: color-mix(in srgb, var(--card-color), white 72%); border: 2px solid var(--forest); border-radius: 14px; box-shadow: 4px 4px 0 var(--forest); font-size: 20px; }
.term-tag { padding: 5px 9px; color: var(--forest); background: #eef2e8; border-radius: 7px; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.term-card h3 { margin: 0 0 10px; color: var(--forest); font-size: 20px; line-height: 1.15; overflow-wrap: anywhere; }
.term-definition { margin-bottom: 16px; color: #4f6660; font-size: 13px; line-height: 1.6; }
.term-keywords { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.term-keywords span { padding: 5px 9px; color: var(--muted); background: #f4f6f1; border-radius: 999px; font-size: 10px; font-weight: 800; }
.term-source { margin-top: 12px; color: var(--leaf); font-size: 10px; font-weight: 900; text-decoration: underline; }

@media (max-width: 1120px) {
  .term-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .lexicon-toolbar select { flex: 1 1 100%; width: 100%; }
  .strate-rail { gap: 6px; margin-bottom: 30px; }
  .strate-rail a { font-size: 11px; }
}
@media (max-width: 590px) {
  .term-grid { grid-template-columns: 1fr; }
  .strate-rail a span { display: none; }
  .strate-rail a { padding: 7px; }
  .strate-head { padding-left: 13px; }
}

/* Hero video */
.hero-photo { position: relative; background: var(--forest-2); }
/* La scene adopte le ratio de la video : aucune hauteur n'est rognee.
   Si l'ecran est trop large pour tenir la hauteur, contain ajoute des bandes
   laterales plutot que de couper le haut et le bas. */
.hero-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 76px); overflow: hidden; background: var(--forest-2); }
.hero-media, .hero-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero-still { opacity: 0; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(6,26,22,.72) 0%, rgba(6,26,22,.22) 16%, transparent 34%); }
.hero-content { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-photo .button-ghost { background: rgba(6,26,22,.52); border-color: rgba(255,255,255,.36); backdrop-filter: blur(8px); }

/* La devise */
.creed { width: min(calc(100% - 40px), 880px); margin: 0 auto; padding: 92px 0 8px; text-align: center; }
.creed .eyebrow { margin-bottom: 16px; }
.creed h2 { margin-bottom: 26px; color: var(--forest); font-size: clamp(28px, 4.2vw, 50px); line-height: 1.06; text-wrap: balance; }
.creed-lede { max-width: 64ch; margin: 0 auto 20px; color: #4f6660; font-size: clamp(16px, 1.7vw, 19px); }
.creed-lede strong { color: var(--forest); }
.creed-figures { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 54px; margin: 42px 0 0; padding: 0; list-style: none; }
.creed-figures li { min-width: 128px; }
.creed-figures strong { display: block; color: var(--forest); font-size: 40px; line-height: 1; letter-spacing: -.04em; }
.creed-figures span { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 820px) {
  .hero-stage { max-height: none; }
  .hero-content { position: static; width: min(calc(100% - 32px), var(--max)); margin: 0 auto; padding: 18px 0 22px; }
  .hero-scrim { display: none; }
  .creed { padding-top: 62px; }
  .creed-figures { gap: 16px 34px; margin-top: 32px; }
  .creed-figures li { min-width: 104px; }
  .creed-figures strong { font-size: 32px; }
}
@media (max-width: 590px) {
  .hero-actions { display: grid; }
  .creed-figures { gap: 22px; }
  .creed-figures li { min-width: 42%; }
}

/* Hero vidéo — repli sans mouvement */
@media (prefers-reduced-motion: reduce) {
  .hero-media { display: none; }
  .hero-still { opacity: 1; }
}