:root {
  --paper:#faf8f1; --panel:#edf0e4; --ink:#283f35; --muted:#59685c;
  --line:#dce0d2; --orange:#b64e2c; --blue:#386981; --yellow:#bc8a38;
}
.wrap { width:min(1240px,calc(100% - 80px)); }
.site-header { height:86px; border-bottom:1px solid var(--line); }
.site-header nav { font-size:13px; gap:28px; }
.language-switch button { min-height:44px; padding:8px 6px; font-size:12px; }
.wordmark { font-size:27px; }
.skip-link { top:8px; transform:translateY(-200%); opacity:0; }
.skip-link:focus-visible { transform:none; opacity:1; }
.logo-mark { color:var(--orange); }
button,input,select,textarea { font-size:16px; }
button,.primary-button,.quiet-button { min-height:44px; }
button { font-size:14px; border-radius:8px; }
button:hover:not(:disabled) { background:#e8eddc; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid #386981; outline-offset:4px;
}
.primary-button,.solid-button { background:var(--orange); color:#fffdf4; border-color:var(--orange); border-radius:9px; font-size:14px; font-weight:600; padding:13px 19px; }
.primary-button:hover,.solid-button:hover:not(:disabled) { background:#963b1e; }
.map-hero { grid-template-columns:1.1fr 1fr; gap:70px; padding:43px 0 36px; }
.map-hero h1 { font-size:clamp(39px,4.5vw,62px); line-height:1.12; letter-spacing:-1.8px; margin-top:15px; }
.map-hero .eyebrow { color:#697554; font-size:10px; letter-spacing:1.8px; }
.hero-aside>p:first-child { font-size:16px; max-width:420px; line-height:1.8; }
.hero-actions { display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin:20px 0 15px; }
.quiet-button { display:inline-flex; align-items:center; font-size:14px; font-weight:600; }
.quiet-button:hover { text-decoration:underline; text-underline-offset:5px; }
.hero-count { display:block; font:12px/1.7 var(--sans); letter-spacing:0; margin:0; color:var(--muted); }
.map-topline { align-items:end; border-top:0; padding-top:14px; }
.map-topline .eyebrow { color:#748063; }
.map-topline h2 { font:400 27px/1.35 var(--serif); margin-top:8px; letter-spacing:-.4px; }
.map-topline>p { font-size:12px; max-width:250px; text-align:right; }
.map-filters { padding:20px 0 17px; gap:8px; }
.map-filters button { min-height:36px; font-size:11px; padding:8px 13px; background:transparent; border-color:var(--line); }
.map-filters button[aria-pressed=true] { background:var(--ink); }
.family-spatial { --family:#b85634; }.family-search { --family:#386c80; }.family-logic { --family:#48704e; }.family-math { --family:#956822; }.family-information { --family:#765a88; }
.puzzle-map { height:auto; padding:0; border:0; border-radius:0; background:none; position:relative; display:block; }
.island-viewport { height:640px; position:relative; border-radius:20px; overflow:hidden; background:#eaf1e8; border:1px solid #dde5d5; }
.island-canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:pan-y pinch-zoom; }
.island-canvas:active { cursor:grabbing; }
.map-stations { position:absolute; inset:0; pointer-events:none; }
.puzzle-map .map-node {
  display:grid; grid-template-columns:20px auto; grid-template-rows:auto auto;
  column-gap:5px; align-items:center; width:max-content; max-width:153px; min-height:44px;
  padding:6px 9px; font-size:13px; text-align:left; color:var(--ink);
  background:rgba(250,248,241,.93); border:1px solid rgba(255,255,255,.9);
  border-radius:7px; box-shadow:0 2px 8px #344f3820; pointer-events:auto;
  transition:box-shadow .15s,opacity .15s;
}
.map-number { font:10px var(--mono); color:var(--family); grid-row:1 / 3; display:flex; align-items:center; justify-content:center; margin:0; }
.station-title { font-size:12px; font-weight:600; line-height:1.3; white-space:nowrap; }
.puzzle-map .map-levels { font-size:9px; line-height:1.4; opacity:.8; color:var(--muted); }
.puzzle-map[data-renderer=ready][data-view=island] .map-node {
  position:absolute!important; left:var(--station-x,50%)!important; top:var(--station-y,50%)!important;
  transform:translate(-50%,15px)!important;
}
.puzzle-map .map-node:hover,.puzzle-map .map-node:focus-visible { box-shadow:0 3px 12px #344f3840; z-index:3; }
.puzzle-map .muted-node { opacity:.34; }
.puzzle-map .muted-node:hover,.puzzle-map .muted-node:focus-visible { opacity:1; }
.island-instruction { position:absolute; left:22px; bottom:22px; color:#42574b; font-size:12px; background:#faf8f1e8; padding:8px 12px; border-radius:6px; pointer-events:none; }
.island-camera { position:absolute; right:18px; bottom:18px; display:flex; gap:5px; }
.island-camera button { min-width:40px; width:40px; height:40px; min-height:40px; border-radius:7px; padding:4px; background:#faf8f1ee; border-color:#d2ddce; font:21px var(--sans); }
.map-view-switch { display:block; margin:12px 0 0 auto; font-size:12px; padding:8px 14px; background:transparent; border:1px solid var(--line); }
.puzzle-map:not([data-renderer=ready]) .map-stations,.puzzle-map[data-view=list] .map-stations {
  position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:24px; pointer-events:auto;
}
.puzzle-map:not([data-renderer=ready]) .map-node,.puzzle-map[data-view=list] .map-node {
  position:relative!important; left:auto!important; top:auto!important; transform:none!important;
  width:100%; max-width:none; min-height:62px; padding:12px; box-shadow:none; border-color:var(--line);
}
.puzzle-map:not([data-renderer=ready]) .station-title,.puzzle-map[data-view=list] .station-title { font-size:15px; }
.puzzle-map:not([data-renderer=ready]) .map-levels,.puzzle-map[data-view=list] .map-levels { font-size:11px; }
.puzzle-map:not([data-renderer=ready]) .island-viewport { height:auto; min-height:470px; }
.puzzle-map:not([data-renderer=ready]) .island-camera { display:none; }
.puzzle-map[data-view=list] .island-canvas,.puzzle-map[data-view=list] .island-camera,.puzzle-map[data-view=list] .island-instruction { display:none; }
.puzzle-map[data-view=list] .island-viewport { height:auto; background:transparent; border:0; overflow:visible; }
.puzzle-map[data-view=list] .map-stations { padding:0; }
.method-section { padding:45px 0 40px; }
.method-section h2 { font:400 29px/1.3 var(--serif); margin-top:13px; }
.method-section>p { max-width:770px; font-size:15px; line-height:1.8; }
.method-path { font-size:12px; margin-top:24px; gap:25px; }
.contribute-section { padding:35px 0; }
.contribute-section h2 { font:400 28px/1.3 var(--serif); margin-top:13px; }
.contribute-section p { font-size:14px; line-height:1.8; max-width:650px; }
.site-footer { padding:29px 0; align-items:start; }
.site-footer p { font-size:12px; }
.site-footer .footer-privacy { font-size:11px; margin-top:6px; }
.site-footer>a { padding:12px 0; font-size:12px; }

/* The island's materials continue into the workbench, with readable controls. */
.game-section { padding-top:24px; }
.back-link { font-size:14px; display:inline-flex; align-items:center; min-height:44px; }
.game-heading { margin:22px 0 24px; align-items:end; }
.game-heading h1 { font:500 clamp(28px,3.2vw,42px)/1.2 var(--serif); letter-spacing:-.7px; margin-top:8px; }
.game-heading h1:focus { outline:none; }
.level-picker { font-size:13px; min-width:250px; }
.level-picker select { padding:12px; min-height:44px; font-size:16px; border-radius:7px; background:#fffdf6; }
.game-layout { grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr); gap:24px; }
.stage-panel { padding:28px; border-radius:16px; background:#fffdf6; border-color:#dce3d2; }
.stage-heading h2 { font-size:22px; }
.move-badge { border-radius:8px; background:#edf1e6; padding:8px 12px; gap:7px; font-size:12px; }
#game-task { font-size:15px; line-height:1.8; margin:15px 0 24px; }
.puzzle-stage { max-width:480px; margin:auto; }
#stage-controls:empty { display:none; }
#stage-controls { max-width:480px; margin:20px auto 0; }
.play-grid { border-radius:7px; overflow:hidden; }
.play-cell,.nono-cell { min-height:0; border-radius:0; }
.game-sidebar { padding:25px; border-radius:16px; border-color:#dce3d2; background:#f0f2e7; }
.method-pill { font-size:12px; padding:7px 11px; background:#fffdf580; }
.puzzle-controls h4 { font-size:14px; }
.piece-button { min-height:78px; border-radius:7px; }
.piece-button span { font-size:12px; }
.stage-help { font-size:13px; line-height:1.8; margin-top:14px; }
.direction-pad { gap:9px; }
.direction-pad button { width:50px; height:50px; font-size:24px; background:#fffdf6; }
.game-tools { gap:9px; margin-top:24px; }
.game-tools button { font-size:13px; padding:10px 15px; background:#fffdf6; }
#game-message { font-size:14px; line-height:1.8; margin-top:15px; }
.rule-box h3,.question-box h3 { font-size:15px; }
.rule-box p,.question-box p { font-size:13px; line-height:1.85; }
.rule-box a { font-size:12px; }
.field { font-size:13px; line-height:1.6; }
.field input,.field select,.house input { font-size:16px; min-height:44px; border-radius:6px; }
.loop-edge,.graph-edge,.peg,.cargo { min-height:0; }
.house label,.house span { font-size:12px; }
.win-panel { display:grid; grid-template-columns:100px minmax(0,1fr); gap:14px; padding:18px; margin-top:22px; border-radius:12px; background:#e9efd9; border:1px solid #c9d5b5; }
#win-scene { width:100px; height:115px; grid-row:1 / 3; align-self:center; display:grid; place-items:center; }
#win-scene canvas { display:block; width:100%; height:100%; }
.success-flower { font-size:58px; color:#b77e3b; }
.win-panel h3 { font:400 26px/1.3 var(--serif); }
.win-panel p { font-size:13px; line-height:1.8; margin-top:8px; }
.win-actions { grid-column:2; display:flex; flex-wrap:wrap; gap:8px; }
.win-actions button { font-size:12px; padding:10px 12px; }
.ai-section { padding:25px 0; margin-top:28px; }
.ai-section h3 { font-size:15px; }
.ai-section .tiny { font-size:12px; }
.ai-section details { font-size:13px; }

@media(max-width:1000px) {
  .wrap { width:calc(100% - 44px); }
  .map-hero { gap:35px; }
  .map-hero h1 { font-size:49px; }
  .hero-aside>p:first-child { font-size:15px; }
  .hero-actions { gap:13px; }
  .island-viewport { height:580px; }
  .station-title { font-size:10px; }
  .puzzle-map .map-node { padding:5px 7px; max-width:130px; column-gap:3px; }
  .game-layout { grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr); gap:18px; }
  .stage-panel,.game-sidebar { padding:22px; }
}
@media(max-width:700px) {
  .wrap { width:calc(100% - 32px); }
  .site-header { height:74px; gap:12px; }
  .wordmark { font-size:24px; }
  .logo-mark { font-size:24px; margin-right:6px; }
  .language-switch { gap:2px; }
  .language-switch button { font-size:11px; padding:8px 4px; }
  .map-hero { grid-template-columns:1fr; gap:20px; padding:29px 0 24px; }
  .map-hero h1 { font-size:clamp(38px,8.7vw,50px); margin-top:12px; }
  .map-hero .eyebrow { font-size:9px; }
  .hero-aside>p:first-child { font-size:15px; max-width:450px; }
  .hero-actions { gap:18px; margin:17px 0 11px; }
  .primary-button { padding:12px 16px; font-size:13px; }
  .quiet-button { font-size:13px; }
  .hero-count { font-size:11px; margin:0; }
  .map-topline { flex-direction:column; gap:8px; align-items:start; }
  .map-topline h2 { font-size:24px; }
  .map-topline>p { font-size:11px; max-width:100%; text-align:left; }
  .map-filters { flex-wrap:nowrap; overflow-x:auto; padding:15px 0 12px; scrollbar-width:thin; }
  .map-filters button { flex-shrink:0; font-size:10px; min-height:38px; }
  .island-viewport { height:auto; border-radius:14px; overflow:visible; }
  .island-canvas { height:330px; border-radius:14px; }
  .map-stations,.puzzle-map[data-renderer=ready][data-view=island] .map-stations {
    position:relative; inset:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:16px 12px 12px; pointer-events:auto;
  }
  .puzzle-map .map-node,.puzzle-map[data-renderer=ready][data-view=island] .map-node {
    position:relative!important; left:auto!important; top:auto!important; transform:none!important;
    width:100%; min-height:52px; max-width:none; padding:8px 7px; box-shadow:none; border-color:#dce3d2; column-gap:5px;
  }
  .station-title { font-size:12px; }
  .puzzle-map .map-levels { font-size:10px; }
  .island-instruction { top:290px; bottom:auto; left:10px; width:calc(100% - 20px); font-size:10px; padding:6px 8px; text-align:center; }
  .island-camera { top:10px; bottom:auto; right:10px; gap:4px; }
  .island-camera button { height:44px; width:44px; min-height:44px; min-width:44px; font-size:20px; }
  .puzzle-map:not([data-renderer=ready]) .map-stations,.puzzle-map[data-view=list] .map-stations { grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; gap:8px; }
  .puzzle-map:not([data-renderer=ready]) .station-title,.puzzle-map[data-view=list] .station-title { font-size:12px; }
  .puzzle-map:not([data-renderer=ready]) .island-instruction { position:static; width:auto; margin:0 12px 12px; }
  .puzzle-map:not([data-renderer=ready]) .island-viewport { min-height:0; }
  .puzzle-map[data-view=list] .map-stations { padding:0; }
  .map-view-switch { font-size:11px; min-height:40px; margin-top:10px; }
  .method-section { padding:34px 0; }
  .method-section h2 { font-size:25px; }
  .method-section>p { font-size:14px; }
  .method-path { font-size:10px; gap:12px; }
  .contribute-section { padding:28px 0; }
  .contribute-section h2 { font-size:25px; }
  .contribute-section p { font-size:13px; }
  .contribute-section .primary-button { margin-top:17px; }
  .site-footer { display:block; padding:24px 0; }
  .site-footer>a { display:inline-block; margin-top:8px; font-size:11px; }
  .game-section { padding-top:12px; }
  .game-heading { display:block; margin:17px 0 20px; }
  .game-heading h1 { font-size:30px; margin-bottom:18px; }
  .level-picker { min-width:0; display:block; }
  .level-picker select { width:100%; max-width:100%; margin-top:5px; }
  .game-layout { grid-template-columns:1fr; gap:16px; }
  .stage-panel { padding:20px 15px; border-radius:12px; }
  .stage-heading h2 { font-size:19px; }
  #game-task { font-size:14px; margin-bottom:19px; }
  .game-sidebar { padding:21px; border-radius:12px; }
  .move-badge { padding:7px 9px; }
  .game-tools { gap:7px; margin-top:19px; }
  .game-tools button { font-size:12px; padding:9px 11px; }
  .play-cell { font-size:23px; }
  .win-panel { grid-template-columns:70px minmax(0,1fr); padding:14px; gap:10px; }
  #win-scene { width:70px; height:90px; grid-row:1; }
  .win-panel h3 { font-size:23px; }
  .win-panel p { font-size:12px; }
  .win-actions { grid-column:1 / 3; }
  .ai-section { gap:14px; padding:22px 0; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .puzzle-map .map-node { transition:none; }
}