:root{color-scheme:dark;--ink:#101c27;--panel:#172632;--line:#c4a26840;--gold:#e2b979;--text:#f1e9d9;--muted:#b0bcc0;--teal:#9dc9c0;--red:#f0a294;--paper:#efe1c4;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(13px,1.12vw,18px)}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{background:radial-gradient(ellipse at 20% 0,#233744 0,transparent 55%),#0c151d;color:var(--text)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:#ffffff04;border-radius:7px;padding:.65rem .9rem;transition:background .18s,border-color .18s,transform .18s}button:hover{background:#e2b97913;border-color:var(--gold)}button:active{transform:translateY(1px)}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}a{color:var(--gold)}[hidden]{display:none!important}.topbar{height:5.3rem;max-height:12vh;display:flex;align-items:center;justify-content:space-between;padding:0 2.2rem;border-bottom:1px solid var(--line);gap:1rem}.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--text)}.brand-mark{font:3.5rem Georgia,serif;color:var(--gold);line-height:1}.brand strong{font:1.2rem Georgia,serif;letter-spacing:.01em;display:block}.brand small{font-size:.57rem;letter-spacing:.22em;color:var(--gold);display:block;margin-top:.4rem}.top-actions{display:flex;align-items:center;gap:.5rem}.top-actions button{font-size:.76rem;white-space:nowrap}.edition{font-size:.56rem;letter-spacing:.14em;color:var(--muted);margin-right:.8rem}.shell{height:calc(100dvh - min(5.3rem,12vh));max-width:2200px;margin:0 auto;display:flex;padding:1rem 2.2rem 0;gap:1.2rem}.presentation{min-width:0;flex:1;display:flex;flex-direction:column}.location-bar{display:flex;justify-content:space-between;gap:.6rem;font-size:.66rem;letter-spacing:.05em;color:var(--muted);padding:.15rem .15rem .85rem}.location-bar>span:first-child:before{content:'◈';color:var(--gold);margin-right:.6rem}.stage{display:grid;grid-template-columns:1fr 1.02fr;flex:1;min-height:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:linear-gradient(115deg,#1e2e3a,#14212c);box-shadow:0 18px 60px #0005}.lesson{min-width:0;min-height:0;padding:clamp(20px,2.7vw,48px);display:flex;flex-direction:column;position:relative;container-type:inline-size}.lesson:before{content:'';position:absolute;left:0;top:0;width:3px;height:50px;background:var(--gold)}.eyebrow{color:var(--gold);font-size:.61rem;font-weight:650;letter-spacing:.16em;line-height:1.5}h1,h2,h3,p{margin:0}h1{font:clamp(1.9rem,3.1vw,3.9rem)/1.06 Georgia,"Times New Roman",serif;letter-spacing:-.035em;font-weight:400;margin:.8rem 0 1.15rem;text-wrap:balance;white-space:pre-line}h1:focus{outline:none}h2{font:2rem/1.12 Georgia,serif;margin:.6rem 0 1rem}h3{font-size:1rem}#sceneContent{display:flex;flex-direction:column;gap:.85rem}.lead{font-size:1.02rem;line-height:1.6;color:#d6dedc;max-width:48ch}.lesson-flow{min-height:0}.lesson-bottom{margin-top:auto;padding-top:.95rem;display:flex;flex-direction:column;gap:.75rem}.scene-note{font-size:.7rem;line-height:1.5;color:var(--muted);padding-left:.75rem;border-left:1px solid var(--gold)}.terms{display:flex;flex-wrap:wrap;gap:.3rem .6rem}.term{padding:0;border:0;border-bottom:1px dotted #e2b97950;border-radius:0;color:var(--gold);font-size:.68rem;background:none}.term:after{content:' ⓘ';font-size:.65rem}.actions{display:flex;flex-direction:column;gap:.45rem}.primary{color:#19212a;background:linear-gradient(120deg,#e9c88d,#cca164);border-color:#f2d29b;font-weight:650;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:1rem;padding:.8rem 1rem;box-shadow:0 3px 12px #0002}.primary:hover{background:#f3d8a6;color:#101c27}.primary .arrow{font-size:1.2rem}.choice{text-align:left;display:flex;align-items:center;gap:.75rem;background:#0b182345;padding:.7rem .8rem}.choice .choice-number{color:var(--gold);font:1.1rem Georgia,serif;border:1px solid var(--line);border-radius:50%;width:1.8rem;height:1.8rem;display:grid;place-items:center;flex-shrink:0}.choice strong{display:block;font-size:.82rem}.choice small{display:block;color:var(--muted);font-size:.65rem;line-height:1.45;margin-top:.15rem}.cards{display:flex;flex-direction:column;gap:.6rem}.card{padding:.65rem .85rem;background:#07121a45;border:1px solid #a9bdc019;border-radius:7px}.card strong{font-size:.8rem;display:block;color:#e7ce9e;margin-bottom:.25rem}.card p{font-size:.75rem;line-height:1.5;color:#c3cece}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}.stat{padding:.8rem .65rem;background:#08152155;border:1px solid var(--line);border-radius:7px}.stat b{font:1.3rem Georgia,serif;display:block;color:var(--gold)}.stat strong{display:block;font-size:.71rem;margin:.3rem 0}.stat small{font-size:.63rem;color:var(--muted)}.steps{counter-reset:steps;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.step{font-size:.76rem;display:flex;gap:.6rem;align-items:center;padding:.75rem .5rem;border-top:1px solid var(--line)}.step:before{counter-increment:steps;content:counter(steps);font:1.5rem Georgia,serif;color:var(--gold)}
.art-panel{position:relative;min-width:0;min-height:0;overflow:hidden;border-left:1px solid var(--line);background:#132330}.map-background,.map-shade{position:absolute;inset:0}.map-background{background-image:url('/assets/gate.svg');background-position:65% 50%;background-size:cover;transition:filter .7s,background-position .7s}.art-panel.ruins .map-background{background-image:url('/assets/ruins.svg');background-position:50% 50%}.map-shade{background:linear-gradient(180deg,#07152290,transparent 25%,transparent 52%,#08121fc9);pointer-events:none}.art-panel.dark .map-background{filter:brightness(.24) saturate(.65)}.art-panel.dark .map-shade{background:radial-gradient(circle at 60% 45%,transparent,#02081366)}.map-caption{position:absolute;top:1.2rem;left:1.4rem;right:1.4rem;display:flex;align-items:center;gap:.5rem;font-size:.59rem;letter-spacing:.13em;text-shadow:0 1px 5px #000;z-index:2}.map-dot{width:5px;height:5px;background:var(--gold);border-radius:50%;box-shadow:0 0 12px var(--gold)}.map-hint{margin-left:auto;font-size:.57rem;letter-spacing:0;color:#e9e5d6}.tokens{position:absolute;inset:0 0 24%;}.token{position:absolute;left:var(--x);top:var(--y);padding:0;border:0;background:none!important;transform:translate(-50%,-50%);width:4.5rem;display:flex;align-items:center;flex-direction:column;transition:left .8s,top .8s}.token:active{transform:translate(-50%,-50%)}.token .portrait{width:3.8rem;height:3.8rem;border:3px solid #dfbd78;box-shadow:0 0 0 4px #0c141db0,0 12px 20px #000a;transition:transform .2s}.token:hover .portrait{transform:translateY(-4px)}.token.active .portrait{box-shadow:0 0 0 5px #dfbd7850,0 0 30px #f8db9460,0 12px 20px #000a}.token-name{white-space:nowrap;font-size:.61rem;background:#101b28ef;border:1px solid #d7b57570;border-radius:4px;padding:.2rem .45rem;margin-top:.55rem;color:#fff0d1}.portrait{background-image:url('/assets/portraits.svg');background-size:200% 200%;border-radius:50%;width:3rem;height:3rem;flex-shrink:0;background-position:0 0}.portrait.hero{background-position:0 0}.portrait.wizard{background-position:100% 0}.portrait.guard{background-position:0 100%}.portrait.goblin{background-position:100% 100%}.speech{position:absolute;bottom:3.2rem;left:1.5rem;right:1.5rem;padding:1.1rem 1.2rem;background:linear-gradient(115deg,#f2e8d2,#dfcda8);border:1px solid #fff1d2;border-radius:3px 14px 14px 14px;box-shadow:0 12px 32px #0007;display:flex;gap:.8rem;align-items:flex-start;color:#322f29}.speech:before{content:'';position:absolute;width:16px;height:16px;top:-8px;left:32px;background:#efe4ce;transform:rotate(45deg)}.speech .portrait{border:2px solid #99794d;z-index:1}.speech span{display:block;font-size:.61rem;text-transform:uppercase;font-weight:750;letter-spacing:.12em;color:#82643c;margin-bottom:.35rem}.speech p{font:italic 1.1rem/1.42 Georgia,serif;text-wrap:pretty}.map-bottom{position:absolute;bottom:1.1rem;left:1.5rem;right:1.5rem;display:flex;justify-content:space-between;align-items:center;color:#dbd5c9;font-size:.61rem;letter-spacing:.025em}.map-bottom>span:last-child{color:var(--gold);font-size:1.3rem}.hero-scene h1{font-size:clamp(2.5rem,4.2vw,5rem);line-height:1.04}.hero-scene .lead{max-width:35ch}.hero-scene .art-panel .map-background{background-position:65% 50%}.hero-scene .lesson{justify-content:center}.hero-scene .lesson-bottom{margin-top:1.5rem}.footer{height:4.4rem;max-height:12vh;display:flex;align-items:center;justify-content:space-between;gap:1rem}.footer-nav{display:flex;gap:.4rem}.footer button{font-size:.69rem;border-color:transparent;background:none;padding:.5rem .55rem}.footer button:hover{border-color:var(--line)}.keyboard{font-size:.61rem;color:#889b9f}.chapter-trail{display:flex;align-items:center;gap:.75rem}.trail-dot{border-radius:50%;width:.65rem!important;height:.65rem!important;min-width:0;padding:0!important;border:1px solid #aeb6b369!important;background:transparent!important}.trail-dot.active{background:var(--gold)!important;border-color:var(--gold)!important;box-shadow:0 0 0 4px #e2b97917}.trail-dot.done{background:#9dc9c066!important}.journey{width:13rem;flex-shrink:0;padding-top:1.4rem;display:flex;flex-direction:column}.rail-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}.rail-top button{border:0;font-size:1.4rem;padding:0 .6rem}.act-item{display:flex;gap:.6rem;align-items:center;padding:.85rem .4rem;border-left:1px solid #b7b7973a}.act-item.active{border-left:2px solid var(--gold);background:linear-gradient(90deg,#d2ad7020,transparent)}.act-item b{color:var(--gold);font:1rem Georgia,serif;width:1.25rem;text-align:center;flex-shrink:0}.act-item strong{font-size:.7rem;display:block}.act-item small{font-size:.61rem;color:var(--muted);display:block;margin-top:.3rem}.rail-note{font-size:.65rem;line-height:1.7;color:var(--muted);margin-top:1.5rem}.rail-progress{margin-top:auto;padding-bottom:2.4rem;font-size:.63rem;color:var(--muted)}progress{width:100%;height:4px;appearance:none;border:0;display:block;margin-top:.8rem}progress::-webkit-progress-bar{background:#34444b}progress::-webkit-progress-value{background:var(--gold)}
.dice-box{border:1px solid var(--line);border-radius:9px;padding:1rem;background:linear-gradient(140deg,#091925b5,#26374255)}.dice-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.dice-label{font-size:.63rem;letter-spacing:.09em;color:var(--gold);text-transform:uppercase}.dice-target{font-size:.66rem;color:var(--muted)}.dice-row{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:.75rem 0}.die{display:grid;place-items:center;width:3.7rem;height:3.7rem;clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);background:linear-gradient(135deg,#dfbf7f,#8f693a);color:#19212a;font:1.65rem Georgia,serif;position:relative;flex-shrink:0}.die:after{content:'';position:absolute;inset:5px;border:1px solid #322c2944;clip-path:inherit}.die.discarded{opacity:.38;background:#91a0a5;text-decoration:line-through}.die.chosen{background:linear-gradient(130deg,#f9e1a4,#d4a660)}.die-pair{display:flex;gap:.45rem;align-items:center}.die-tag{display:block;text-align:center;font-size:.52rem;color:var(--muted);margin-top:.2rem}.math{font:1.25rem Georgia,serif;color:var(--gold);white-space:nowrap}.roll-btn{font-size:.77rem;background:#e2b97912;color:var(--gold);display:block;width:100%}.roll-result{font-size:.77rem;line-height:1.5;margin-top:.65rem;min-height:2.3em}.roll-result strong{color:var(--gold)}.roll-result .success{color:var(--teal)}.roll-result .failure{color:var(--red)}.tiny{font-size:.65rem;color:var(--muted);line-height:1.5}.example-badge{display:inline-block;background:#e2b97915;border:1px solid var(--line);font-size:.55rem;padding:.15rem .4rem;border-radius:3px;color:var(--gold);margin-bottom:.5rem}.initiative-list{display:flex;flex-direction:column;gap:.45rem}.initiative-row{display:flex;gap:.7rem;align-items:center;background:#0d192375;padding:.5rem .7rem;border-radius:7px;border:1px solid transparent}.initiative-row.you{border-color:var(--gold)}.initiative-row .portrait{width:2rem;height:2rem}.initiative-row strong{font-size:.8rem}.initiative-row small{font-size:.66rem;color:var(--muted)}.initiative-row b{font:1.3rem Georgia,serif;margin-left:auto;color:var(--gold)}.practice-options{display:flex;flex-direction:column;gap:.4rem}.practice-options button{text-align:left;font-size:.73rem;padding:.6rem .7rem}.practice-options button[aria-pressed=true]{border-color:var(--gold);background:#e2b97915}.feedback{font-size:.76rem;line-height:1.5;padding:.65rem .75rem;border-left:2px solid var(--gold);background:#e2b9790a}.recap-links{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.recap-links button{font-size:.75rem;text-align:left}.page-control{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.63rem;border-top:1px solid var(--line);padding-top:.6rem}.page-control button{font-size:.7rem;padding:.5rem}.lesson.compact{padding:1.5rem}.lesson.compact h1{font-size:2rem;margin:.6rem 0 .75rem}.lesson.compact #sceneContent{gap:.6rem}.lesson.compact .lead{font-size:.88rem;line-height:1.45}.lesson.compact .lesson-bottom{gap:.5rem;padding-top:.6rem}.lesson.compact .card{padding:.5rem .7rem}.lesson.compact .card p{font-size:.7rem}.lesson.compact .dice-box{padding:.65rem}.lesson.compact .dice-row{margin:.5rem 0}.lesson.compact .scene-note{font-size:.65rem}.lesson.compact .choice{padding:.5rem .7rem}.lesson.compact .primary{padding:.6rem .85rem}.lesson.compact .die{width:3rem;height:3rem;font-size:1.35rem}.lesson.compact .roll-result{min-height:0}.lesson.compact .terms{gap:.2rem .5rem}
dialog{color:var(--text);background:linear-gradient(125deg,#21333f,#14232e);border:1px solid #b9955b90;box-shadow:0 30px 100px #000a;border-radius:12px;width:min(800px,92vw);max-height:86dvh;padding:1.7rem;overflow:auto}dialog::backdrop{background:#030a13be;backdrop-filter:blur(8px)}#infoDialog{width:min(620px,92vw)}.dialog-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.dialog-header button{font-size:1.5rem;line-height:1;padding:.2rem .5rem;border:0}#infoBody{font-size:.95rem;line-height:1.7;color:#ced8d7}#infoBody p{margin:.8rem 0}#rulesLink{display:inline-block;font-size:.8rem;margin-top:1.2rem}.search-label{font-size:.72rem;color:var(--muted);display:block;margin-bottom:.4rem}input{width:100%;background:#0b1924;border:1px solid var(--line);border-radius:6px;padding:.8rem;color:var(--text);font:inherit;font-size:.9rem}.chapter-grid{display:flex;flex-direction:column;gap:.4rem;margin-top:1rem}.chapter-group{color:var(--gold);font-size:.7rem;letter-spacing:.1em;margin:1rem 0 .3rem}.chapter-link{display:flex;justify-content:space-between;align-items:center;text-align:left;font-size:.82rem;padding:.75rem}.chapter-link small{font-size:.65rem;color:var(--muted)}.text-button{font-size:.75rem;color:var(--gold);margin-top:1.2rem}.tooltip{position:fixed;z-index:20;max-width:300px;pointer-events:none;background:#eadfc7;color:#252e31;padding:.8rem 1rem;border-radius:8px;box-shadow:0 10px 30px #0008;font-size:.77rem;line-height:1.5}.tooltip strong{display:block;font-size:.8rem;margin-bottom:.3rem}.tooltip small{display:block;margin-top:.4rem;color:#776442}.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}.fade{animation:appear .3s ease-out}.rolling{animation:tumble .3s ease-in-out}@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes tumble{50%{transform:rotate(20deg) scale(.8)}}
@media(min-width:1600px){.stage{grid-template-columns:1fr 1.1fr}.lesson{padding:2.7rem}}
@media(max-height:780px) and (min-width:761px){:root{font-size:14px}.topbar{height:65px}.shell{height:calc(100dvh - 65px);padding-top:10px}.location-bar{padding-bottom:8px}.footer{height:48px}.lesson{padding:24px 30px}h1{font-size:2.7rem;margin:.65rem 0 .85rem}.hero-scene h1{font-size:3.5rem}.lead{font-size:.95rem;line-height:1.5}.lesson-bottom{gap:.6rem;padding-top:.8rem}.card{padding:.55rem .75rem}.speech{padding:.9rem 1rem}.hero-scene .lesson-bottom{margin-top:1rem}}
@media(max-width:1050px){.topbar{padding:0 1rem}.shell{padding-left:1rem;padding-right:1rem}.edition{display:none}.journey{position:absolute;z-index:8;background:#152631f7;top:5.3rem;bottom:0;left:0;padding:1.2rem;width:16rem;box-shadow:20px 0 40px #0006;border-right:1px solid var(--line)}.stage{grid-template-columns:1.08fr 1fr}.lesson{padding:1.4rem}.map-hint{display:none}.speech{left:1rem;right:1rem}.keyboard{display:none}.hero-scene h1{font-size:3rem}}
@media(max-width:760px){:root{font-size:14px}.topbar{height:56px;max-height:none;padding:0 .8rem}.brand strong{font-size:.95rem}.brand small{font-size:.45rem;letter-spacing:.14em}.brand-mark{font-size:2.5rem}.top-actions{gap:.2rem}.top-actions button{padding:.4rem;font-size:1rem}.top-actions button span{display:none}.shell{height:calc(100dvh - 56px);padding:8px .7rem 0}.location-bar{font-size:.57rem;padding:0 3px 6px}.stage{display:flex;flex-direction:column-reverse}.art-panel{height:26%;min-height:100px;flex-shrink:0;border-left:0;border-bottom:1px solid var(--line)}.lesson{flex:1;min-height:0;padding:1rem 1.2rem}.hero-scene .art-panel{height:38%}.hero-scene h1{font-size:2.7rem}.hero-scene .lesson{justify-content:flex-start}.hero-scene .lesson-bottom{margin-top:auto}.map-caption{top:.6rem;left:.8rem;right:.8rem;font-size:.5rem}.map-bottom{display:none}.tokens{inset:1rem 50% 0 0}.token{width:2.7rem}.token .portrait{width:2.3rem;height:2.3rem;border-width:2px}.token-name{font-size:.48rem;margin-top:.25rem;padding:.1rem .25rem}.speech{left:51%;right:.6rem;bottom:.7rem;top:2.1rem;padding:.55rem .65rem;display:block;overflow:visible;border-radius:4px 9px 9px 9px}.speech .portrait{display:none}.speech:before{width:10px;height:10px;left:-5px;top:12px}.speech span{font-size:.47rem;margin-bottom:.2rem}.speech p{font-size:.82rem;line-height:1.3}.map-background{background-position:50% 55%}h1{font-size:1.85rem;margin:.45rem 0 .65rem;line-height:1.08;white-space:normal}.eyebrow{font-size:.53rem}.lead{font-size:.83rem;line-height:1.48}.card{padding:.45rem .6rem}.card strong{font-size:.73rem}.card p{font-size:.67rem}.cards{gap:.4rem}#sceneContent{gap:.55rem}.scene-note{font-size:.62rem}.lesson-bottom{gap:.5rem;padding-top:.55rem}.terms .term{font-size:.61rem}.primary{padding:.65rem .8rem;font-size:.81rem}.choice{padding:.45rem .6rem}.choice strong{font-size:.76rem}.choice small{font-size:.59rem}.footer{height:42px;max-height:none}.footer button{font-size:.62rem;padding:.4rem}.chapter-trail{gap:.55rem}.journey{top:56px}.dice-box{padding:.6rem}.dice-row{margin:.5rem 0}.die{width:2.8rem;height:2.8rem;font-size:1.3rem}.roll-result{font-size:.7rem;min-height:0;margin-top:.4rem}.math{font-size:1.1rem}.roll-btn{font-size:.73rem;padding:.5rem}.stat{padding:.45rem}.stat b{font-size:1.1rem}.stat strong{font-size:.64rem}.stat small{font-size:.58rem}.stats{gap:.4rem}.lesson.compact{padding:.8rem 1rem}.lesson.compact h1{font-size:1.7rem;margin:.4rem 0 .5rem}.lesson.compact .lead{font-size:.78rem}.lesson.compact .scene-note{font-size:.6rem}.lesson.compact .card p{font-size:.65rem}.lesson.compact .card{padding:.4rem .6rem}.lesson.compact .die{width:2.5rem;height:2.5rem}.lesson.compact .lesson-bottom{gap:.4rem}.hero-scene .speech p{font-size:.95rem}}
@media(max-height:550px){.topbar{height:42px}.shell{height:calc(100dvh - 42px)}.location-bar{padding-bottom:4px}.footer{height:35px}.topbar .brand small{display:none}.lesson{padding:1rem}.lesson h1{font-size:1.65rem;margin:.4rem 0 .5rem}.lesson .lead{font-size:.78rem}.lesson .lesson-bottom{gap:.4rem}.speech p{font-size:.9rem}.art-panel{min-height:85px}.map-bottom{display:none}.speech{bottom:1rem}.lesson .scene-note{font-size:.61rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:760px) and (max-height:650px){.art-panel{display:none}.stage{flex-direction:column}.lesson{flex:1}.hero-scene .art-panel{display:none}}
@media(max-width:760px) and (min-height:651px){.speech{top:auto;bottom:.6rem}.speech p{font-size:.78rem;line-height:1.3}}