/* One chapter at a time. The class advances; examples never loop or change slides. */
button.setup-tutorial{width:100%;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border:1px solid #96876566;border-radius:8px;background:#111b20;color:#e3d6b5;font:600 16px Georgia,serif;cursor:pointer;min-height:44px}
.tutorial-dialog[hidden],.tutorial-dialog [hidden]{display:none!important}
.tutorial-dialog{--tu:var(--display-unit,1);--stride:calc(80px * var(--tu));position:fixed;inset:0;z-index:220;display:flex;flex-direction:column;box-sizing:border-box;padding:calc(22px * var(--tu)) max(calc(24px * var(--tu)),calc((100vw - 1250px * var(--tu))/2));background:linear-gradient(#08171df2,#08171df5),url('../media/race-v2/grove-clean.png') center/cover;color:#f1ead8;font:calc(20px * var(--tu))/1.4 system-ui,sans-serif;overflow:hidden}
.tutorial-dialog *{box-sizing:border-box}
.tutorial-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-right:56px;flex:none}
.tutorial-title{min-width:0}
.tutorial-kicker{margin:0;color:#cdb785;font-size:calc(13px * var(--tu));letter-spacing:.17em}
.tutorial-header h2{font:calc(36px * var(--tu))/1.3 Georgia,serif;margin:0}
.tutorial-header-actions{display:flex;align-items:center;gap:12px;flex:none}
.tutorial-dialog button,.tutorial-details summary{min-height:44px;padding:9px 18px;border:1px solid #b9a77988;border-radius:6px;background:#172b30;color:#f2e5c3;font:600 calc(16px * var(--tu)) system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
.tutorial-dialog button:focus-visible,.tutorial-details summary:focus-visible{outline:3px solid #f5dfa3;outline-offset:3px}
.tutorial-dialog button:disabled{opacity:.45;cursor:default}
#tutorialHints{font-size:calc(14px * var(--tu));padding:9px 12px}
#tutorialHints[aria-pressed='true']{border-color:#d5bf86;background:#645939}
#tutorialClose{font-size:calc(30px * var(--tu));width:calc(48px * var(--tu));min-height:calc(48px * var(--tu));padding:0}
.tutorial-content{min-height:0;flex:1;overflow:auto;display:flex;flex-direction:column;padding:calc(16px * var(--tu)) 4px}
.tutorial-stage{width:100%;max-width:calc(900px * var(--tu));margin:auto;align-self:center;text-align:center}
.tutorial-lead{font-size:calc(21px * var(--tu));color:#d3dfd8;margin:0 0 calc(12px * var(--tu));line-height:1.65}
.tutorial-word{position:relative;display:inline-block;padding-top:calc(18px * var(--tu));white-space:nowrap}
.tutorial-gloss{position:absolute;left:50%;top:0;transform:translateX(-50%);color:#e4cb91;font:500 calc(14px * var(--tu))/1.1 system-ui,sans-serif;white-space:nowrap;pointer-events:none}
.tutorial-team{font-size:calc(15px * var(--tu));color:#c5d5cf;margin:0 0 8px}
.tutorial-example{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:calc(650px * var(--tu));margin:0 auto;text-align:center}
.tutorial-example[data-columns='2']{grid-template-columns:repeat(2,minmax(0,1fr))}
.tutorial-example>div{padding:calc(10px * var(--tu));border-bottom:1px solid #b9a77966}
.tutorial-example small{display:block;font-size:calc(15px * var(--tu));color:#bdcdc8}
.tutorial-example strong{font:calc(52px * var(--tu))/1.3 Georgia,serif}
.tutorial-gap{border:2px solid #b9a77966;border-radius:8px;color:#f1d487}
.tutorial-dialog[data-focus='answer'] .tutorial-gap{border-color:#f5dfa3;box-shadow:0 0 0 3px #f5dfa329}
.tutorial-example-note{margin-top:16px}
.tutorial-keyboard{max-width:calc(660px * var(--tu));margin:calc(20px * var(--tu)) auto 0;padding:calc(8px * var(--tu));border:2px solid transparent;border-radius:10px}
.tutorial-keyboard[data-ready='false']{opacity:.35}
.tutorial-dialog[data-chapter='other'][data-focus='keyboard'] .tutorial-keyboard{border-color:#f5dfa3;background:#f5dfa309}
.tutorial-key-row{display:flex;justify-content:center;gap:6px;margin-bottom:6px}
.tutorial-key{display:grid;place-items:center;flex:1;max-width:calc(58px * var(--tu));height:calc(46px * var(--tu));border:1px solid #899e9866;border-bottom:3px solid #647874;border-radius:5px;background:#253a38;color:#f6f0dd;font-size:calc(23px * var(--tu))}
.tutorial-function-key{flex:2.4;max-width:calc(115px * var(--tu));white-space:nowrap}
.tutorial-enter-key{border-color:#ae9664;color:#ffebba;background:#4c452f}
.tutorial-key[data-lit='true']{background:#e5cb8f;color:#15292b;border-color:#f8e5b6;box-shadow:0 0 0 3px #e3c78966}
.tutorial-key-note{font-size:calc(14px * var(--tu));color:#bdcdc8;margin:8px 0}
.tutorial-race{margin:calc(24px * var(--tu)) auto;max-width:calc(450px * var(--tu));padding:0 calc(22px * var(--tu))}
.tutorial-demo-path{position:relative;display:flex;gap:calc(10px * var(--tu));align-items:flex-end;height:calc(150px * var(--tu));padding-bottom:calc(12px * var(--tu))}
.tutorial-demo-path>i{flex:none;width:calc(70px * var(--tu));height:calc(12px * var(--tu));background:#586967;border-top:3px solid #b2ad91;border-radius:3px}
/* A hidden middle stone keeps its space, so opening a gap cannot move the runner. */
.tutorial-demo-path>#tutorialStoneMiddle[hidden]{display:block!important;visibility:hidden}
.tutorial-demo-runner{position:absolute;width:calc(100px * var(--tu));height:calc(100px * var(--tu));bottom:calc(24px * var(--tu));left:calc(-15px * var(--tu));filter:drop-shadow(0 3px 4px #0008);will-change:transform}
.tutorial-demo-runner>div,.tutorial-demo-runner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background-repeat:no-repeat}
.tutorial-broken-stone{position:absolute;left:calc(80px * var(--tu));bottom:0;width:calc(70px * var(--tu));height:calc(32px * var(--tu));color:#e1a184;border:2px dashed #b8785e;text-align:center;line-height:1;font-size:calc(25px * var(--tu))}
.tutorial-dialog[data-focus='gap'] .tutorial-broken-stone{border-color:#f5dfa3;color:#f5dfa3;box-shadow:0 0 0 3px #f5dfa329}
.tutorial-demo-energy{position:absolute;left:calc(170px * var(--tu));top:calc(16px * var(--tu));color:#f3d896;font:calc(38px * var(--tu)) Georgia,serif}
.tutorial-caption{margin:calc(16px * var(--tu)) auto 0;max-width:calc(760px * var(--tu));min-height:calc(66px * var(--tu));padding:calc(10px * var(--tu)) calc(18px * var(--tu));border-left:3px solid #e5cb8f;background:#e5cb8f0a;text-align:left;font-size:calc(21px * var(--tu));line-height:1.6;color:#f2e4bd}
.tutorial-example-controls{display:flex;justify-content:center;gap:12px;margin-top:12px}
.tutorial-example-controls button{font-size:calc(14px * var(--tu))}
.tutorial-power-icon{display:grid;place-items:center;width:calc(100px * var(--tu));height:calc(100px * var(--tu));margin:calc(10px * var(--tu)) auto;color:#e8d395;font-size:calc(80px * var(--tu))}
.tutorial-power-icon svg{width:100%;height:100%}
.tutorial-power h3{font:calc(32px * var(--tu)) Georgia,serif;color:#f1dfb4;margin:8px 0}
.tutorial-cost{font:calc(22px * var(--tu)) system-ui,sans-serif;color:#e0c480}
#tutorialPowerSummary{font-size:calc(24px * var(--tu));color:#f1dfb4;margin:10px 0}
#tutorialPowerText{max-width:65ch;margin:0 auto;color:#d3dfd8;font-size:calc(19px * var(--tu));line-height:1.8}
.tutorial-details{margin-top:18px;color:#bdcdc8;font-size:calc(16px * var(--tu))}
.tutorial-details summary{display:inline-block;background:transparent;border:0;font-weight:400;list-style:revert}
.tutorial-storm-note{color:#c5d5cf;font-size:calc(16px * var(--tu));margin:8px 0}
.tutorial-questions{list-style:none;margin:0;padding:0;display:grid;gap:calc(20px * var(--tu))}
.tutorial-questions b{font-size:calc(25px * var(--tu));font-weight:500}
.tutorial-questions small{display:block;font-size:calc(18px * var(--tu));color:#cdb785;margin-top:5px}
.tutorial-lesson>button{margin-top:24px}
.tutorial-lesson-answers{max-width:60ch;text-align:left;margin:16px auto 0;padding:10px 18px;border-left:3px solid #e5cb8f;background:#e5cb8f0a;font-size:calc(19px * var(--tu));line-height:1.8}
.tutorial-footer{flex:none;display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid #b9a77944;padding-top:12px}
.tutorial-footer nav{display:flex;gap:12px}
#tutorialNext{background:#b5a06b;color:#0c1c20;border-color:#d5bf86;min-width:calc(150px * var(--tu));min-height:48px}
.tutorial-dialog .tutorial-skip{border:0;background:transparent;color:#bdcdc8;font-weight:400}
@media(max-height:800px) and (min-width:1000px){.tutorial-dialog{padding-top:14px;padding-bottom:14px}.tutorial-header h2{font-size:30px}.tutorial-content{padding:10px 4px}.tutorial-key{height:40px}.tutorial-keyboard{margin-top:12px}.tutorial-lead{font-size:19px;margin-bottom:8px}.tutorial-caption{font-size:19px;margin-top:10px;padding:6px 14px}}
@media(max-width:999px){.tutorial-dialog{padding:16px}.tutorial-header{flex-wrap:wrap;gap:8px}.tutorial-header h2{font-size:28px}.tutorial-header-actions{width:100%;justify-content:space-between}.tutorial-gloss{font-size:12px}.tutorial-lead{font-size:18px}.tutorial-content{padding-top:10px}.tutorial-caption{font-size:18px}.tutorial-footer{gap:8px}.tutorial-footer button{padding:9px 12px}.tutorial-footer nav{gap:8px}}
@media(max-width:460px){.tutorial-dialog{padding:12px}.tutorial-header h2{font-size:24px}.tutorial-header-actions{gap:8px}.tutorial-example strong{font-size:36px}.tutorial-example small{font-size:12px}.tutorial-keyboard{margin-top:10px;padding:2px}.tutorial-key-row{gap:3px}.tutorial-key{font-size:15px;height:36px}.tutorial-key-note{font-size:12px}.tutorial-race{padding:0;--stride:60px}.tutorial-demo-path{gap:10px}.tutorial-demo-path>i{width:50px}.tutorial-demo-runner{width:80px;height:80px;left:-15px}.tutorial-broken-stone{left:60px;width:50px}.tutorial-demo-energy{left:130px;font-size:30px}.tutorial-footer{flex-wrap:wrap}.tutorial-footer nav{margin-left:auto}.tutorial-footer button{font-size:13px}#tutorialNext{min-width:100px}.tutorial-lead{font-size:17px}.tutorial-questions b{font-size:20px}.tutorial-questions small{font-size:16px}}