:root{--primary:#344b75;--accent:#b94c43;--ink:#243b5d;--paper:#f5efdf;--line:#d0c4ad;font-family:'Trebuchet MS','Segoe UI',sans-serif}
body{background:#b8d8dc}
#app{position:relative;isolation:isolate;min-height:100svh}
#app:not(.is-home),#app[data-screen="menu"]{background:none}
h1,h2,.reading,.word,.brand,.mode-card>strong{font-family:'Trebuchet MS','Segoe UI',sans-serif;font-weight:700}
.toolbar{gap:8px;flex-wrap:wrap}
.toolbar .brand,.toolbar .quiet{border:2px solid #c4b99f;background:#fff9ec;color:var(--ink)}
.toolbar .brand{font-size:15px}
.toolbar button:hover{background:#f3e4c4;border-color:#344b75;box-shadow:none}
.main{text-shadow:none;position:relative;padding-top:22px}
.page-title{font-weight:800;letter-spacing:-.035em;color:#223c62!important;text-shadow:0 2px #edf3e7!important}
.intro,.scope{color:#233b56}
.main>.intro,.main>.scope{display:table;background:#fff8e8;padding:8px 14px;border-radius:12px;max-width:100%;box-shadow:0 2px 0 #4059681a}
.intro{font-size:16px}
.mode-grid{gap:18px;margin-top:20px}
.mode-card{position:relative;border:2px solid #d4c4a7;border-radius:18px 22px 16px 20px;padding:14px;background:#fff8e9;box-shadow:0 5px 0 #344b7521;min-height:260px;gap:9px}
.mode-card:after{content:"";position:absolute;inset:6px;border:1px dashed #b9a887;border-radius:12px 17px 11px 15px;pointer-events:none}
.mode-card:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 0 #344b7521}
.mode-card>strong{font-size:22px;color:#344b75}
.mode-card>span:last-child{color:#4d5c69;font-size:14px}
.mode-card .picture{height:135px;min-height:135px;background:#f8f0e2;max-width:none;border-radius:10px}
.mode-card:disabled{opacity:.65}
.picture{background:#f8f0e2;border:1px solid #dfd2bc}
.picture canvas{width:100%;height:100%;object-fit:contain;display:block}
.category-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.category-grid>.category{flex:0 0 calc((100% - 48px)/5);font-weight:700;border:2px solid #c6b798;background:#fff8e9}
.category-grid>.category:nth-child(-n+4){flex-basis:calc((100% - 36px)/4)}
.category .picture{height:100px;min-height:100px;background:#f8f0e2}
.category[aria-pressed=true]{background:#344b75;color:#fff9e9;border-color:#344b75}
.category-count{font-weight:400}
.session-options{background:#fff8e8;border:1px dashed #b3a17f;border-radius:16px}
.button:hover{background:#233554}
.button.secondary:hover,.answer:hover{background:#eee6d4;border-color:#344b75}
.activity{background:#fff9eb;border:2px solid #ccbc9e;box-shadow:0 6px 0 #344b751a;position:relative}
.activity:before{content:"";position:absolute;inset:7px;border:1px dashed #c4b69d;border-radius:17px;pointer-events:none}
.activity>*{position:relative}
.sentence,.notice{color:#4f5b68}
.answer{border-color:#c7bba4}
.feedback{background:#dcebdc;color:#234f43}
.feedback.retry{background:#f4e0bc;color:#674724}
.quiet:hover{background:#eee5d2}
.key{background:#fff7e6;color:#263d60;border-color:#c3b397}
.key:hover:not(:disabled){background:#e3d8bf}
.reading,.discussion{max-width:800px}
.results{background:#fff9ec;border:2px dashed #bba987}
.stitched-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.home-stage{min-height:100svh;position:relative}
.scene-backdrop{position:fixed;z-index:-1}
.scene-sky{position:absolute;inset:0}
.scene-sky img{width:100%;height:100%;object-fit:cover}
.scene-camera{position:absolute;width:max(100vw,177.778svh);height:max(56.25vw,100svh);bottom:0;left:50%;transform:translateX(-50%)}
.scene-plane{position:absolute;inset:0}
.scene-plane>img{width:100%;height:100%;object-fit:fill;display:block}
.actors-plane{transform:translateY(-6%) scale(.72);transform-origin:50% 85%}
.scene-plane[data-layer="foreground"]{transform:scaleY(.65);transform-origin:50% 100%}
.clouds-plane .cloud{position:absolute;width:18%;height:auto;object-fit:contain}
.clouds-plane .cloud-a{left:8%;top:17%}
.clouds-plane .cloud-b{right:7%;top:29%;width:13%}
.scene-interface{position:absolute;left:50%;transform:translateX(-50%);top:clamp(90px,13svh,150px);width:min(650px,90vw);display:flex;align-items:center;flex-direction:column;text-align:center;pointer-events:auto}
.scene-interface h1{font-size:clamp(34px,4.5vw,68px);line-height:1.02;letter-spacing:-.04em;color:#253d65;margin:0;text-shadow:2px 3px 0 #f9f1df,-1px -1px 0 #f9f1df}
.scene-interface h1 span{color:#a83d3a}
.scene-interface>p{font-size:clamp(15px,1.4vw,20px);font-weight:700;margin:12px 0 6px;color:#2d4f68}
.explore-badge{position:relative;border:0;padding:0;background:transparent;width:clamp(190px,27svh,310px);aspect-ratio:1;display:grid;place-items:center;filter:drop-shadow(0 7px 2px #23375326);margin:0 0 20px;transition:transform .15s}
.explore-badge:hover{transform:scale(1.035)}
.explore-badge img{width:100%;height:100%;object-fit:contain}
.explore-badge span{position:absolute;bottom:-4%;left:13%;width:74%;background:#b64b40;color:#fff9e7;border:4px solid #f5e2bf;outline:2px solid #344b75;border-radius:50px;font-size:clamp(23px,3.5svh,34px);font-weight:800;padding:9px 12px;box-shadow:inset 0 0 0 3px #b64b40;line-height:1.1}
.home-note{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);border:1px dashed #b3a07e;border-radius:30px;background:#fff6e3;padding:9px 18px;color:#344b75;font-size:14px;white-space:nowrap}
.layer-inspector{position:absolute;bottom:70px;left:18px;pointer-events:auto;background:#fff8e7;color:#243b5d;padding:12px;border-radius:12px;z-index:30}
.layer-inspector label{display:block;padding-top:8px}
.relay-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;width:100%;align-items:start}
.relay-stage-host{min-width:0;position:sticky;top:12px}
.relay-stage svg{display:block;width:100%;height:auto}
.relay-status{background:#f4e7cb;border:1px dashed #b19d78;border-radius:12px;margin:12px 0 0;padding:12px;font-size:17px;color:#344b75}
.relay-controls{display:flex;flex-direction:column;align-items:center;gap:15px;min-width:0}
.relay-controls .picture{height:200px;max-width:280px}
.relay-controls .definition{font-size:18px}
.relay-controls .notice{font-size:13px}
.relay-controls .keyboard{width:100%;max-width:540px}
.relay-controls .letter{font-size:clamp(17px,2vw,27px);min-width:22px}
.relay-controls .chances{font-size:14px}
.relay-controls .key{min-width:0}
.flip-10{grid-template-columns:repeat(5,minmax(0,1fr))}
.flip-20{grid-template-columns:repeat(8,minmax(0,1fr))}
.flip-30{grid-template-columns:repeat(10,minmax(0,1fr))}
.flip-10 .flip-tile{height:clamp(86px,calc((100svh - 330px)/4),160px);aspect-ratio:auto}
.flip-20 .flip-tile{height:clamp(76px,calc((100svh - 330px)/5),135px);aspect-ratio:auto}
.flip-30 .flip-tile{height:clamp(68px,calc((100svh - 330px)/6),110px);aspect-ratio:auto}
.flip-tile{border-color:#b5a487;background:#f5e7c9}
.flip-tile strong{font-size:12px;line-height:1.05}
.flip-tile .picture{flex:1;min-height:0}
.flip-tile.is-matched{background:#dcebdc;border-color:#4c816f}
.tile-back{color:#344b75;font-family:inherit}
@media(max-width:1050px){.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.toolbar .brand{font-size:13px}.toolbar .quiet{font-size:13px;padding:9px 12px}.category-grid>.category,.category-grid>.category:nth-child(-n+4){flex-basis:calc((100% - 24px)/3)}}
@media(max-width:760px){.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-card{min-height:235px}.mode-card>strong{font-size:19px}.mode-card .picture{height:115px;min-height:115px}.relay-layout{grid-template-columns:minmax(0,1fr)}.relay-stage-host{position:static;width:min(470px,100%);margin:auto}.relay-controls .picture{height:170px}.relay-controls .letter{font-size:25px}.toolbar-tools{gap:5px}.toolbar .brand{max-width:170px;white-space:normal;line-height:1.15}.toolbar .quiet{padding:8px 10px}.category{padding:10px}.category .picture{height:75px;min-height:75px}.activity{padding:20px 14px}.scene-interface{top:150px}.scene-interface h1{font-size:clamp(34px,7vw,50px)}.explore-badge{width:clamp(190px,28svh,260px)}}
@media(max-width:480px){.toolbar{padding:10px 12px}.toolbar-tools{width:100%;justify-content:flex-end}.toolbar .brand{margin-right:auto;max-width:230px}.main{padding:20px 12px 35px}.mode-grid{gap:10px}.mode-card{padding:11px;min-height:225px}.mode-card>strong{font-size:17px}.mode-card>span:last-child{font-size:12px}.category-grid{gap:8px}.category-grid>.category,.category-grid>.category:nth-child(-n+4){flex-basis:calc((100% - 16px)/3);font-size:12px;padding:8px 4px}.category-count{font-size:11px}.category .picture{height:66px;min-height:66px}.category-answers{grid-template-columns:repeat(2,minmax(0,1fr))}.answer-grid:not(.category-answers){gap:7px}.answer{font-size:15px;padding:8px}.answer .picture{height:110px}.text-only .answer{font-size:17px;min-height:110px;padding:12px 8px}.home-note{font-size:11px;padding:8px 12px;bottom:15px}.scene-interface>p{margin-top:8px}.scene-interface{top:145px}.scene-interface h1{font-size:36px}.scene-interface .explore-badge{width:210px}.relay-controls .letter{font-size:22px}.definition{font-size:19px}}
@media(max-height:650px) and (min-width:761px){.scene-interface{top:85px}.scene-interface h1{font-size:40px}.scene-interface>p{font-size:14px;margin:6px}.explore-badge{width:190px}.home-note{bottom:12px}.home-stage{min-height:600px}.scene-camera{height:max(56.25vw,600px);width:max(100vw,1066px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.mode-card,.explore-badge{transition:none}}
@media(max-width:620px){.flip-10,.flip-20,.flip-30{grid-template-columns:repeat(4,minmax(0,1fr))}.flip-grid .flip-tile{height:110px}.flip-grid .flip-tile strong{font-size:10px}}