:root{font-family:Avenir Next,Trebuchet MS,sans-serif;color:#594334;background:#f6f1e8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{min-height:100svh;display:flex;flex-direction:column}header{padding:30px 4.5vw 20px;display:flex;justify-content:space-between;align-items:center}.brand{font-family:Avenir Next,sans-serif;font-size:25px;font-weight:600;text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px}.brand-icon{width:36px;height:36px;flex:0 0 36px;object-fit:contain}.edition{font-family:Avenir Next,Trebuchet MS,sans-serif;font-size:9px;letter-spacing:1.7px;font-weight:500;margin-left:15px;color:#9d8d7f}.chapter{font-size:13px;color:#cf7e62}.chapter span{color:#a49788;font-size:10px;letter-spacing:1.7px;margin-left:7px}.intro{text-align:center;margin-top:14px;pointer-events:none;z-index:1}.eyebrow{font-size:10px;letter-spacing:2.6px;color:#a68b71}h1{font-family:Avenir Next,sans-serif;font-weight:500;font-size:clamp(32px,3.5vw,48px);letter-spacing:-1.6px;margin:12px 0 7px}h1 span{color:#de8469}.intro p{font-size:13px;color:#a18e7d;margin:0}.viewport{position:relative;min-height:360px;height:calc(100svh - 270px);flex:1}.viewport canvas{touch-action:none}.scene-caption{position:absolute;bottom:12px;left:50%;transform:translate(-50%);font-size:10px;letter-spacing:1.3px;color:#a18e7d;white-space:nowrap;display:flex;align-items:center;gap:9px}.dot{height:5px;width:5px;border-radius:50%;background:#a9c98d}.review{display:flex;justify-content:center;gap:6px;margin:8px auto 17px;padding:6px;border:1px solid #e5dccd;border-radius:16px;background:#fffaf2}.review button{cursor:pointer;border:0;background:transparent;padding:11px 17px;border-radius:11px;font:500 12px Avenir Next,sans-serif;color:#897562;min-height:44px}.review button small{font-size:9px;margin-right:7px;color:#b19a82}.review button.active{background:#eadfcf;color:#594334}.review .motion{border-left:1px solid #eadfcf;border-radius:0;margin-left:5px}.review button:focus-visible{outline:2px solid #b99ad8;outline-offset:2px}footer{display:flex;justify-content:space-between;align-items:center;padding:20px 4.5vw;border-top:1px solid #e8e0d3;font-size:11px;color:#a18e7d}footer strong{font-weight:500;color:#745c48}.footer-note{font-size:8px;letter-spacing:1.6px}.version{font-size:9px}.fallback{padding:4rem;text-align:center}@media(max-width:650px){header{padding:22px 20px}.brand{font-size:21px}.edition,.chapter span,.footer-note{display:none}.intro{margin-top:10px}.eyebrow{font-size:8px;letter-spacing:1.5px}.intro p{font-size:11px;padding:0 16px}.viewport{height:calc(100svh - 290px);min-height:360px}.review{gap:0;width:calc(100% - 20px);flex-wrap:wrap}.review button{padding:9px 10px}.review button small{display:none}.review .motion{font-size:10px}.scene-caption{font-size:8px;letter-spacing:.8px}footer{padding:16px 20px}.version{font-size:8px}}.sandbox{height:100svh;min-height:720px}.sandbox header{padding-top:20px;padding-bottom:10px;flex-shrink:0}.sandbox .intro{margin-top:6px;flex-shrink:0}.sandbox h1{font-size:36px;margin:8px 0 0}.sandbox .viewport{height:auto;min-height:290px;flex:1}.sandbox button{font:500 12px Avenir Next,sans-serif;border:1px solid #e3d8c7;border-radius:12px;background:#fffaf2;color:#745c48;min-height:44px;padding:10px 15px;cursor:pointer;transition:background .15s,transform .15s}.sandbox button:active{transform:translateY(1px)}.sandbox button:disabled{opacity:.42;cursor:default}.sandbox button:focus-visible{outline:3px solid #b99ad8;outline-offset:2px}.header-actions{display:flex;gap:10px}.connection-note{position:absolute;bottom:8px;left:50%;transform:translate(-50%);white-space:nowrap;font-size:9px;color:#9d8b76;letter-spacing:.5px;display:flex;gap:7px;align-items:center;pointer-events:none}.port-dot{width:7px;height:7px;border-radius:50%;background:#e58d73}.play-message{display:flex;justify-content:center;align-items:center;gap:8px;text-align:center;min-height:38px;font-size:13px;color:#806b55;padding:4px 16px;flex-shrink:0}.dot.moving{background:#dd775d}.play-controls{width:min(1030px,95%);margin:0 auto 14px;border:1px solid #e3d8c7;background:#fffbf4;border-radius:20px;padding:8px 14px;flex-shrink:0;box-shadow:0 8px 25px #94765c08}.track-tools{display:flex;gap:7px;justify-content:center;align-items:center;padding:1px 0 8px;border-bottom:1px solid #eee4d5}.track-tools button{min-width:92px;border-color:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 9px}.track-tools button.active{background:#e7edd7;border-color:#c5d3ab;color:#59734a}.track-tools svg{width:38px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.track-tools .sleepers{stroke:#bd9c73;stroke-width:4}.track-tools button span{font-size:10px;white-space:nowrap}.action-tools{display:flex;justify-content:space-between;gap:10px;padding-top:8px}.edit-actions,.train-actions{display:flex;gap:6px;align-items:center}.edit-actions button{background:transparent;border-color:transparent}.sandbox .go-button{background:#88a568;border-color:#88a568;color:#fffaf2;font-size:15px;font-weight:700;min-width:85px}.sandbox .stop-button{background:#f5e0d5;color:#ad644c;border-color:#f5e0d5;min-width:83px}.sandbox .help-button{border-radius:50%;width:44px;padding:0;font-weight:700}.sandbox .reset-train{font-size:10px}.sandbox .switch-button{background:#eee4ce;border-color:#eee4ce;font-size:10px}.sandbox footer{padding-top:13px;padding-bottom:13px;flex-shrink:0}.dialog-backdrop{position:fixed;inset:0;background:#59433433;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:10;display:flex;justify-content:center;align-items:center;padding:20px}.play-dialog{position:relative;width:430px;max-width:100%;background:#fffaf2;border-radius:24px;padding:38px 30px;box-shadow:0 25px 80px #59433425}.play-dialog h2{font:500 30px Avenir Next,sans-serif;margin:14px 0 24px;letter-spacing:-.7px}.play-dialog>button:not(.close-dialog){display:block;text-align:left;width:100%;padding:16px;margin-top:10px;background:#f2eadb;border-color:transparent}.play-dialog strong,.play-dialog button span{display:block}.play-dialog button span{font-size:11px;color:#a18e7d;margin-top:6px}.sandbox .close-dialog{position:absolute;top:9px;right:10px;width:44px;background:transparent;border:0;font-size:24px}.help-dialog li{margin-bottom:12px;font-size:13px;color:#806b55;line-height:1.5}.help-dialog ol{padding-left:20px}.help-dialog p{font-size:12px;line-height:1.7;color:#a18e7d}.sandbox .dialog-done{text-align:center!important;background:#e7edd7!important}@media(max-width:850px){.track-tools button{min-width:76px}.play-controls{padding:7px 8px}.edit-actions button{padding:8px 9px;font-size:11px}.sandbox .reset-train{padding:8px}.action-tools{flex-wrap:wrap;justify-content:center}.sandbox .viewport{min-height:250px}}@media(max-width:600px){.sandbox{min-height:680px}.sandbox header{padding:14px 16px 8px}.sandbox .brand{font-size:19px;gap:7px}.sandbox .brand-icon{width:30px;height:30px;flex-basis:30px}.header-actions{gap:4px}.header-actions button{font-size:10px;padding:8px}.sandbox h1{font-size:27px;letter-spacing:-.8px}.sandbox .eyebrow{font-size:8px}.sandbox .viewport{min-height:220px}.track-tools{justify-content:flex-start;overflow-x:auto;gap:1px;scrollbar-width:thin}.track-tools button{min-width:66px;padding:5px 7px}.track-tools svg{width:31px;height:25px}.track-tools button span{font-size:9px}.action-tools{gap:4px;padding-top:5px}.edit-actions{flex-wrap:wrap;justify-content:center}.edit-actions button{min-height:40px;padding:8px 9px}.train-actions{justify-content:center}.sandbox .go-button{min-width:86px}.play-message{font-size:11px;min-height:39px}.play-controls{margin-bottom:10px;border-radius:15px;width:96%}.connection-note{font-size:8px}.sandbox footer{padding:12px 16px}.sandbox .version{font-size:7px}.play-dialog{padding:35px 24px}.play-dialog h2{font-size:27px}}@media(max-width:360px){.train-actions{flex-wrap:wrap;max-width:100%}.sandbox .brand{font-size:17px}.header-actions button{padding:7px 5px;font-size:9px}.header-actions{gap:3px}.sandbox h1{font-size:25px}}button{-webkit-tap-highlight-color:transparent}.welcome,.journey{height:100svh;min-height:580px}.welcome .viewport{min-height:230px;height:auto}.welcome .intro{pointer-events:auto;flex-shrink:0}.welcome header{padding-top:24px;padding-bottom:14px}button.primary,.primary,.play-entry{background:#88a568;color:#fffaf2;border:1px solid #88a568;border-radius:16px;font:600 18px Avenir Next,sans-serif;padding:15px 28px;min-height:54px;cursor:pointer;box-shadow:0 5px #708d52;transition:transform .15s,box-shadow .15s}.play-entry{margin:22px 0 0}button:active{transform:translateY(2px)}.primary:active{box-shadow:0 2px #708d52}button:focus-visible,a:focus-visible{outline:3px solid #b99ad8;outline-offset:4px}.loading{flex-direction:column;padding:24px;text-align:center;min-height:45vh;display:flex;align-items:center;justify-content:center;gap:14px;font-size:17px;color:#806b55}.loading-train{width:112px;height:112px;object-fit:contain;animation:brand-float 1.8s ease-in-out infinite}@keyframes brand-float{50%{transform:translateY(-4px)}}.fallback button{display:inline-block;margin:15px;padding:15px 25px;border:1px solid #e3d8c7;border-radius:15px;background:#fffaf2;color:#594334;cursor:pointer}.fallback a{color:#745c48}.journey header{padding:18px 4vw 8px;gap:12px;flex-shrink:0}.journey button{font:500 14px Avenir Next,sans-serif;min-height:48px;min-width:48px;border:1px solid #e3d8c7;border-radius:14px;padding:10px 15px;background:#fffaf2;color:#745c48;cursor:pointer;transition:transform .15s,background .15s}.journey button:disabled{opacity:.45;cursor:default}.home-link{display:flex;align-items:center;gap:8px}.sound-tools{display:flex;gap:6px}.journey .viewport{min-height:220px;height:auto;transition:opacity .5s}.journey .viewport.changing{opacity:.08}.journey-intro{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:#f6f1e8cc;pointer-events:none;animation:journey-intro-appear .3s ease-out both}.journey-intro h1{margin:12px 0;font-size:clamp(38px,5vw,64px);color:#cf7e62}@keyframes journey-intro-appear{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.instruction{flex-shrink:0;text-align:center;padding:0 12px 10px}.cue-line{display:flex;align-items:center;justify-content:center;gap:12px}.cue-line p{font:500 clamp(23px,2.4vw,30px) "Avenir Next",sans-serif;margin:0;letter-spacing:-.4px}.cue-line button{border-color:transparent;border-radius:50%;font-size:22px}.voice-dot{width:8px;height:8px;border-radius:50%;background:#a9c98d}.voice-dot.speaking{animation:gentle-breathe 1.3s ease-in-out infinite;background:#de8469}.voice-status{min-height:28px;font-size:11px;color:#9d8b76;display:flex;align-items:center;justify-content:center;gap:8px}.voice-status button{min-height:30px;min-width:0;font-size:11px;border:0;background:transparent;text-decoration:underline;padding:4px}.journey-controls{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 15px;padding:10px 18px;border:1px solid #e3d8c7;border-radius:22px;background:#fffbf4;box-shadow:0 8px 25px #94765c08}.journey-controls .track-tools{padding:0;border:0}.journey-controls .track-tools button{min-width:84px;min-height:62px}.little-edits{display:flex;gap:3px}.little-edits button{border:0;background:transparent;display:flex;flex-direction:column;font-size:25px;gap:1px;padding:5px 10px}.little-edits span{font-size:10px}.journey .help-button{border-radius:50%;font-size:21px;font-weight:600;padding:0}.journey .go-button{background:#88a568;color:#fffaf2;border-color:#88a568;font-size:19px;font-weight:700;min-height:56px;min-width:98px;border-radius:17px}.go-ready,.hint-glow{animation:gentle-breathe 2.2s ease-in-out infinite}@keyframes gentle-breathe{50%{box-shadow:0 0 0 6px #a9c98d30}}.journey .pause-button{background:transparent;border:0;color:#a18e7d}.journey footer{padding:14px 4vw;flex-shrink:0}.finish-card{position:absolute;bottom:8px;left:50%;transform:translate(-50%);text-align:center;background:#fffaf2ed;border:1px solid #e3d8c7;border-radius:23px;padding:20px 28px 22px;box-shadow:0 8px 30px #94765c10;min-width:370px}.finish-card h2{margin:10px 0 16px;font:500 30px Avenir Next,sans-serif}.finish-card>div{display:flex;gap:10px;justify-content:center}.finish-card button{min-height:52px}.journey .finish-card .primary{background:#88a568;color:#fffaf2;border-color:#88a568}.pause-cover{position:absolute;inset:0;background:#f6f1e870;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center}.journey .pause-cover .primary{background:#88a568;color:#fffaf2;font-size:20px;padding:15px 30px}@media(max-width:650px){.welcome header{padding:20px}.welcome h1{font-size:35px}.welcome .intro{margin-top:12px}.welcome .play-entry{margin-top:20px}.journey header{padding:12px 14px 6px;gap:6px}.home-link span{display:none}.journey header button{padding:8px}.sound-tools{gap:3px}.journey-controls{width:calc(100% - 20px);gap:5px;padding:7px;border-radius:18px}.journey-controls .track-tools{gap:0}.journey-controls .track-tools button{min-width:60px;padding:4px 5px}.journey-controls .track-tools svg{width:32px}.little-edits{gap:0}.little-edits button{padding:4px 6px;min-width:42px}.journey .go-button{min-width:72px;font-size:17px;padding:9px}.journey .help-button{min-width:44px}.journey .pause-button{min-width:36px;padding:4px}.journey footer{padding:12px 16px}.cue-line{gap:8px}.voice-status{font-size:10px;gap:4px}.finish-card{min-width:0;width:calc(100% - 26px);padding:18px 12px}.finish-card .eyebrow{font-size:8px}.finish-card h2{font-size:27px}}@media(max-width:370px){.journey-controls{flex-wrap:wrap}.journey .viewport{min-height:200px}}@media(prefers-reduced-motion:reduce){.go-ready,.hint-glow,.voice-dot.speaking,.loading-train,.journey-intro{animation:none}}@media(max-width:600px){.journey-controls{display:grid;grid-template-columns:auto auto auto auto;justify-content:center;column-gap:9px}.journey-controls .track-tools{grid-column:1 / -1;justify-content:center}.journey-controls .track-tools button{min-width:82px;min-height:55px}}.sound-tools button{display:flex;align-items:center;justify-content:center}.finish-card button svg{width:19px;height:19px;vertical-align:middle;margin-right:3px}.character-study{max-width:1440px;margin:auto;min-height:100dvh;display:flex;flex-direction:column}.character-study header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 5%}.study-heading{text-align:center}.study-heading h1{font-size:clamp(28px,4vw,44px);margin:8px 0}.study-heading p{color:#806f60;font-size:13px;margin:8px 0 18px}.character-study nav,.study-controls [role=toolbar]{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.character-study button{min-height:44px;padding:10px 18px}.character-study nav button[aria-pressed=true]{background:#405f86;color:#fff7e9}.character-study .viewport{flex:1;min-height:320px;height:52dvh;position:relative}.study-controls{display:grid;gap:12px;padding:14px 20px}.study-options{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;font-size:13px}.study-options label{display:flex;gap:7px;align-items:center;min-height:34px}.character-study footer{text-align:center;padding:20px;font-size:12px;color:#806f60}@media(max-width:600px){.character-study header{padding:15px;flex-direction:column;gap:8px}.character-study .viewport{min-height:290px;height:42dvh}.character-study button{padding:8px 12px}.study-controls{padding:12px}}.character-study button{border:1px solid #e5dccd;border-radius:12px;background:#fffaf2;color:#594334;font:500 13px Avenir Next,sans-serif;cursor:pointer}:root{--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px)}.welcome,.journey,.sandbox{height:100dvh;padding-top:var(--safe-top);padding-left:var(--safe-left);padding-right:var(--safe-right);padding-bottom:var(--safe-bottom)}.viewport canvas,.journey-controls,.play-controls{touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button,a,summary{touch-action:manipulation}.journey-controls button,.play-controls button{touch-action:none}.journey button{min-width:44px}.journey-stop{background:#e58d73!important;color:#fffaf2!important;min-width:76px!important}.app-tools{flex-shrink:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 20px;padding:6px 16px 10px;color:#806b55;font-size:12px}.app-tools button{border:1px solid #e3d8c7;background:#fffaf2;border-radius:10px;padding:10px 18px;color:#594334;min-height:44px}.app-tools details{max-width:390px}.app-tools summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center;text-decoration:underline;text-underline-offset:4px}.app-tools p{line-height:1.65;margin:6px 0}.graphics-notice{position:absolute;z-index:5;inset:0;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:16px;background:#f6f1e8eb;padding:24px}.graphics-notice p{width:100%;text-align:center}.graphics-notice button,.graphics-notice a{min-height:44px;padding:12px;border:1px solid #e3d8c7;background:#fffaf2;border-radius:12px;color:#594334}@media(min-width:700px)and (max-width:1400px)and (orientation:landscape){.welcome,.journey,.sandbox{min-height:0}.welcome header,.journey header,.sandbox header{padding:12px 24px 6px}.welcome .intro{margin-top:2px}.welcome h1{font-size:34px;margin:4px 0}.welcome .play-entry{margin-top:12px;padding:12px 24px}.welcome .viewport{min-height:150px}.journey .viewport{min-height:180px}.sandbox .viewport{min-height:170px}.sandbox .intro{margin-top:0}.sandbox h1{font-size:27px}.journey-controls{margin:0 auto 8px;gap:8px;padding:7px 12px}.journey-controls .track-tools button{min-width:76px}.little-edits button{min-width:54px}.instruction{padding-bottom:6px}.cue-line p{font-size:26px}.voice-status{margin-top:0}.play-controls{padding:6px 20px}.play-controls .track-tools button{padding:6px 10px;min-height:48px}.action-tools{gap:8px;margin-top:6px}.welcome footer,.journey footer,.sandbox footer{padding:10px 24px}.app-tools{padding:0 16px}.app-tools details[open]{max-width:600px}}@media(max-height:580px){.welcome,.journey{min-height:580px;height:auto}}@media(prefers-reduced-motion:reduce){.journey .viewport{transition:none}}.journey .instruction{padding:0 12px 4px}.vocabulary-focus{min-height:48px;font:650 clamp(30px,3.4vw,44px)/1.15 "Avenir Next",sans-serif;letter-spacing:.06em;color:#725640}.journey .cue-line p{font-size:clamp(18px,1.7vw,24px)}.journey .cue-line button{min-height:44px;min-width:44px}.journey .voice-status{min-height:22px}@media(max-width:699px){.vocabulary-focus{min-height:39px;font-size:32px}.journey .instruction{padding-top:0}.journey .cue-line{gap:8px}.journey .cue-line p{font-size:19px}}@media(min-width:700px)and (orientation:landscape)and (max-height:850px){.vocabulary-focus{min-height:40px;font-size:34px}.journey .voice-status{min-height:18px}.journey .cue-line button{padding:0}}
