/* Help stays readable above the illustrated game, including on shared screens. */
.tutorial-surface{color:var(--paper);background:#17171c;border:1px solid #b89163;border-top:5px solid var(--gold);padding:28px;width:min(1000px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow:auto;box-shadow:0 25px 100px #000b;border-radius:3px}
.tutorial-surface::backdrop{background:#07080ddd;backdrop-filter:blur(5px)}
.tutorial-surface h2{font:400 clamp(30px,4vw,45px)/1.12 Georgia,serif;max-width:760px;margin-bottom:22px}.tutorial-surface h3{color:#f4cf9c}.tutorial-surface .small{max-width:none}.tutorial-surface p,.tutorial-surface li{overflow-wrap:anywhere}
.guide-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px;position:sticky;top:0;z-index:2;background:#17171c;padding:10px 0}.guide-top p{margin:0}.guide-top button,.guide-top a{flex-shrink:0}
.guide-running{font-size:14px;background:#342821;padding:12px 16px;border-left:3px solid var(--gold)}
.guide-nav{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:26px}.guide-nav button{font-size:14px;min-height:44px;padding:9px 12px}.guide-nav [aria-current]{background:#6e382d;color:#fff4e0;border-color:#e6b882}
#guide-content{scroll-margin-top:18px}.guide-lead{font-size:19px;max-width:750px}.guide-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr));gap:14px;margin:22px 0}.guide-cards article{border:1px solid #6e5643;background:#242024;padding:18px}.guide-cards article p:last-child{margin:0}.guide-cards h3{font-size:18px}.guide-checklist,.phase-guide ol,.personal-guide ol{padding-left:24px}.guide-checklist li{margin-bottom:12px;padding-left:7px}.guide-checklist li::marker,.phase-guide li::marker,.personal-guide li::marker{color:var(--gold);font-weight:700}
.guide-quip{font:italic 23px/1.4 Georgia,serif;color:#ecc092;border-top:1px solid var(--line);padding-top:18px;margin-top:24px}.guide-example,.guide-exercise{padding:22px;border:1px solid #bc9869;background:linear-gradient(115deg,#362723,#202029);margin:24px 0}.guide-exercise blockquote{margin:16px 0;background:#f0dec0;color:#32221c;padding:20px;border-left:5px solid #904635;font:22px/1.4 Georgia,serif}.guide-feedback{border-left:3px solid #b9d5c3;padding:12px 16px;background:#1a302e}.guide-feedback p{margin:10px 0 0}.guide-reset{margin-top:18px}.tutorial-surface details{padding:16px;border:1px solid var(--line);margin:20px 0}.tutorial-surface summary{cursor:pointer;color:var(--gold)}.tutorial-surface details[open] summary{margin-bottom:14px}
.guide-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:22px;margin-top:28px}.guide-bottom button{min-height:48px}.guide-bottom button:disabled{cursor:default}#guide-progress{color:var(--gold);white-space:nowrap;font-variant-numeric:tabular-nums}.tutorial-page{max-height:none;margin:auto;width:100%;max-width:1000px}.tutorial-page:focus{outline:0}
.learn-entry{display:flex;gap:22px;justify-content:space-between;align-items:center;padding:26px 30px;border:1px solid #a87c52;border-left:5px solid #e3b57d;background:#17171ced;margin:28px 0}.learn-entry h2{margin-bottom:8px}.learn-entry p{margin-bottom:0;max-width:660px}.learn-entry a{flex-shrink:0}.learn-entry .eyebrow{margin-bottom:8px}
.phase-guide{display:flex;gap:24px;align-items:center;justify-content:space-between;margin:18px 0 24px;padding:22px 26px;background:#182528f5;border:1px solid #718e8a;border-left:5px solid #b7d7c4}.phase-guide .eyebrow{font-size:11px;color:#c0dccb;margin-bottom:8px}.phase-guide h2{font-size:26px;margin-bottom:12px}.phase-guide ol{margin:0}.phase-guide li+li{margin-top:7px}.phase-guide>a{flex:0 0 185px;text-align:center}.personal-guide{margin:22px 0;padding:20px;background:#101d20;border:1px solid #607a77}.personal-guide .eyebrow{font-size:11px;color:#b9d4c9;margin-bottom:8px}.personal-guide h3{font-size:19px;color:#e9d2ae}.personal-guide ol{font-size:15px;margin:0}.personal-guide li+li{margin-top:8px}.action-help{font-size:14px;color:#cfc5b8;max-width:670px;padding:0 0 4px;border-bottom:1px solid var(--line)}.inbox-help{font-size:14px;color:var(--muted)}.host-guide{border-top:1px solid var(--line);padding-top:18px;margin-top:24px;color:#d6c4ac;font-size:14px;max-width:900px}
.display .phase-guide h2{font-size:clamp(28px,3vw,42px)}.display .phase-guide li{font-size:clamp(19px,2vw,27px)}
@media(max-width:760px){.tutorial-surface{padding:20px;width:calc(100% - 16px);max-height:calc(100dvh - 16px)}.tutorial-page{width:100%;max-height:none}.guide-top{align-items:start;gap:8px}.guide-top .eyebrow{font-size:10px;letter-spacing:1px}.guide-top .quiet{font-size:13px;padding:8px}.guide-nav{gap:6px;margin-bottom:22px}.guide-nav button{font-size:13px;padding:8px}.guide-bottom{flex-wrap:wrap}.guide-bottom button{padding:12px}.guide-cards{grid-template-columns:1fr}.guide-example,.guide-exercise{padding:16px}.guide-exercise blockquote{font-size:20px}.learn-entry,.phase-guide{flex-direction:column;align-items:stretch;padding:20px;gap:16px}.phase-guide>a{flex:auto}.learn-entry a{text-align:center}.personal-guide{padding:16px}.phase-guide h2{font-size:24px}body:not(.display) .phase-scene{height:145px}.phase-guide li{font-size:15px}}
@media(prefers-reduced-motion:reduce){.tutorial-surface::backdrop{backdrop-filter:none}}