@font-face{font-family:'Spynn Tutorial';src:url('/assets/gameplay/truesdell.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
.gameplay-page .site-header{height:96px}.gameplay-page .site-header nav{font-size:.875rem}
.guide-shell{max-width:1120px;margin:auto;padding:3.5rem 6% 4rem}.guide-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2.5rem}.guide-heading h1{font-size:clamp(2.6rem,5vw,4rem);letter-spacing:-2px;line-height:1.1;margin:.8rem 0 0}.guide-heading>p{color:var(--muted);font-size:.9375rem;line-height:1.7}.guide-anchor{position:absolute;top:0}
.guide-layout{display:grid;grid-template-columns:minmax(210px,1fr) minmax(300px,410px);align-items:start;gap:8%;max-width:930px;margin:auto}.guide-layout[hidden]{display:none}.guide-sidebar{padding-top:1.5rem}.guide-sidebar nav{display:block;margin-top:1.2rem}.guide-sidebar ol{padding:0;margin:0;list-style:none}.guide-sidebar li{border-top:1px solid var(--line)}.guide-sidebar li:last-child{border-bottom:1px solid var(--line)}.guide-sidebar a[data-chapter]{display:flex;gap:1rem;align-items:center;padding:.7rem .8rem .7rem 0;min-height:46px;font:1.15rem/1.4 var(--serif);transition:color .2s,background .2s}.guide-sidebar a[data-chapter]>span{font: .75rem/1 var(--sans);color:#aa9879;letter-spacing:1px;min-width:24px}.guide-sidebar a[aria-current=step]{color:var(--gold);background:linear-gradient(90deg,#d4b78316,transparent)}.guide-sidebar a[aria-current=step]>span{color:var(--gold)}.guide-sidebar>p:not(.eyebrow){max-width:250px;margin-top:1.5rem;color:var(--muted);font-size:.8125rem}.guide-sidebar>.text-link{font-size:.75rem;color:var(--gold);margin-top:.6rem}
.guide-viewer{min-width:0}.guide-stage{position:relative;aspect-ratio:320/569;isolation:isolate;overflow:hidden;background:#111016;border:1px solid #d4b78359;color:#f3cda5;container-type:inline-size}.guide-world{position:absolute;inset:0;overflow:hidden;pointer-events:none}.guide-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.7}.guide-shade{position:absolute;inset:0;background:linear-gradient(0deg,#0c0b11aa,transparent 40%,#0c0b1140),linear-gradient(90deg,#11101433,transparent)}
.guide-stage-top{position:absolute;z-index:10;inset:1rem 1rem auto;display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:.6875rem;letter-spacing:1.1px;text-transform:uppercase}.guide-stage-top>span{padding:.35rem .5rem;background:#111014b3;max-width:70%;line-height:1.4}.guide-stage-top button{border:0;background:#111014b3;color:#eed1aa;font:inherit;padding:.45rem .55rem;min-height:44px;cursor:pointer;white-space:nowrap}.guide-stage-top button:hover{background:#352a3b}.guide-stage-top button span{font-size:1rem;margin-left:.3rem}
.guide-copy{position:absolute;z-index:7;top:40%;left:0;right:0;transform:translateY(-50%);padding:1.1rem 6%;text-align:center;background:#080710b5;font:clamp(17px,5.5cqw,23px)/1.42 var(--serif);pointer-events:none}.guide-copy:focus{outline:none}.guide-copy p+p{margin-top:.75rem}.guide-copy p{white-space:pre-line}.guide-copy.is-title{background:linear-gradient(90deg,transparent,#080710c4 18%,#080710c4 82%,transparent);padding-block:2rem}.guide-copy h2{font:clamp(30px,9cqw,40px)/1.15 var(--serif);color:#f2dcbb;letter-spacing:-.7px}.guide-copy .guide-title-index{font:.6875rem/1.5 var(--sans);letter-spacing:3px;text-transform:uppercase;margin-bottom:.8rem;color:var(--gold)}.guide-copy .guide-title-hint{font:.75rem/1.5 var(--sans);margin-top:1rem;color:#c1b4c6}

.guide-orb{position:absolute;width:24.5%;aspect-ratio:1;border-radius:50%;background:rgb(196 106.08 60 / .85);display:grid;place-items:center;transform:translate(-50%,-50%);z-index:2}.guide-orb>span{font:clamp(13px,4.3cqw,18px)/1 var(--serif);color:#f3cda5}.guide-orb.is-invisible{background:transparent!important;border:1px solid #c9a99199}.guide-orb.is-invisible>span{opacity:0}.guide-orb.is-caught{opacity:.2}.guide-spynn{z-index:3}.guide-synch{position:absolute;width:24.5%;aspect-ratio:1;border-radius:50%;background:#ffffff66;border:1px solid #c45e3dcc;left:50%;top:64%;transform:translate(-50%,-50%);z-index:3;display:grid;place-items:center}.guide-synch.is-outline{background:transparent;border-color:#fff9}.guide-synch.is-anti{border-color:#5564ee;border-width:2px}.guide-synch>span{font:.75rem/1.2 var(--serif);text-align:center;color:#f3cda5;max-width:85%}
.guide-hud{position:absolute;z-index:6;top:13%;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;font:clamp(15px,5cqw,20px)/1 var(--serif);text-shadow:0 1px 5px #000}.guide-orb-count{display:grid;place-items:center;width:44px;height:44px;border:1px solid #d4b78377;border-radius:50%}.guide-gauges{position:absolute;z-index:6;left:6%;right:6%;bottom:15%;display:grid;grid-template-columns:1fr 1fr;gap:8%;font-size:.625rem}.guide-gauges>div>span{display:block;margin-bottom:.4rem}.guide-meter{display:block;height:11px;border:1px solid #d4b78399;border-radius:8px;overflow:hidden;background:#111014c4}.guide-meter b{display:block;width:80%;height:100%;background:#254abc}.guide-gauges>div+div b{width:40%;background:#af493d}.guide-gauges.is-green .guide-meter b{background:#559461;width:100%}
.guide-choices,.guide-synch-choices{position:absolute;z-index:6;top:63%;left:0;right:0;padding:1rem 5%;display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;background:#011631cc}.guide-choices>div,.guide-synch-choices>div{display:flex;flex-direction:column;align-items:center;justify-content:end;gap:.7rem}.guide-choices img,.guide-synch-choices img{height:27px;width:35px;object-fit:contain}.guide-choices>div>span:last-child,.guide-synch-choices>div>span:last-child{display:block;width:100%;text-align:center;border:1px solid #d4b78366;border-radius:12px;padding:.3rem;font:clamp(13px,4cqw,17px)/1.4 var(--serif)}.guide-choice-orb{width:25px;height:25px;background:#c46a3c;border-radius:50%}.guide-synch-choices{top:65%}.guide-pass-marks{position:absolute;z-index:5;inset:56% 2% auto;display:flex;justify-content:space-between;font:2.5rem/1 var(--serif);opacity:.7}
.guide-fog{position:absolute;z-index:6;width:150%;height:90%;max-width:none;object-fit:fill;left:-25%;top:5%;opacity:0;transform:scaleX(1);transition:opacity .5s,transform .5s}.guide-fog-two{transform:scaleX(-1)}.guide-world.has-fog .guide-fog-one{opacity:1;transform:scaleX(2) translateX(-12%)}.guide-world.has-fog .guide-fog-two{opacity:.6;transform:scaleX(-2) translateX(12%)}
.guide-world [hidden],.guide-finish[hidden]{display:none!important}.guide-world [data-highlight].is-highlighted{outline:2px solid #da7555;outline-offset:7px;box-shadow:0 0 22px #ed834b55;border-radius:8px;animation:guide-pointer 1.5s ease-out 2}.guide-world [data-highlight]{transition:opacity .3s}.guide-controls{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.6rem .3rem;border:1px solid #d4b78359;border-top:0;background:#17131c}.guide-controls button{display:flex;align-items:center;justify-content:center;gap:.6rem;min-width:84px;min-height:48px;border:0;background:none;color:#e8cc9b;cursor:pointer;font:.875rem var(--sans)}.guide-controls button:hover{background:#d4b78315}.guide-controls button:disabled{opacity:.3;cursor:default}.guide-controls>span{font-size:.6875rem;letter-spacing:.5px;color:#bfb2c5;text-align:center}.guide-viewer-note{text-align:center;color:#a798aa;font-size:.6875rem;margin:.7rem 0}.guide-viewer-note span{margin-inline:.4rem}.guide-mobile-picker{display:none}.guide-finish{border:1px solid var(--line);padding:1.5rem;margin-top:1.5rem}.guide-finish h2{font-size:2rem;letter-spacing:-.5px}.guide-finish p{font-size:.875rem;color:var(--muted);margin:1rem 0}.guide-finish .text-link{background:none;border:0;color:var(--gold);padding:0;margin-top:.7rem;cursor:pointer}
.guide-transcript{margin:3rem auto 0;border-top:1px solid var(--line);max-width:900px}.guide-transcript summary{cursor:pointer;padding:1.4rem 0;color:var(--gold);font-size:.875rem}.guide-transcript section{padding-block:1.4rem;border-top:1px solid var(--line)}.guide-transcript h2{font-size:1.9rem;letter-spacing:-.5px;margin-bottom:1rem}.guide-transcript ol{padding-left:1.5rem;color:var(--muted);font-size:1rem}.guide-transcript li{margin-bottom:.7rem;padding-left:.4rem}.guide-footer{display:flex;justify-content:center;gap:2rem;padding:2rem 6%;border-top:1px solid var(--line);font-size:.8125rem;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes guide-pointer{0%,100%{outline-color:#da7555;box-shadow:0 0 22px #ed834b33}50%{outline-color:#ffe5b8;box-shadow:0 0 28px #ed834b77}}
.guide-copy,.guide-copy h2,.guide-hud,.guide-orb>span,.guide-synch>span{font-family:'Spynn Tutorial',var(--serif)}
@media(min-width:721px){.guide-sidebar{position:sticky;top:1.5rem;max-height:calc(100svh - 3rem);overflow:auto;padding-top:.2rem}.guide-viewer{max-width:min(380px,calc((100svh - 140px)*.56239));min-width:290px;margin-left:auto;width:100%}}
@media(max-width:720px){.gameplay-page .site-header{height:85px}.gameplay-page .site-header nav{font-size:.75rem}.guide-shell{padding:2.2rem 5% 3rem}.guide-heading{display:block;margin-bottom:1.7rem}.guide-heading h1{font-size:2.7rem;letter-spacing:-1.5px}.guide-heading>p{margin-top:1rem;font-size:.875rem}.guide-heading>p br{display:none}.guide-layout{display:block;max-width:440px}.guide-sidebar{display:none}.guide-mobile-picker{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}.guide-mobile-picker label{font-size:.75rem;color:var(--muted)}.guide-mobile-picker select{min-width:0;flex:1;min-height:46px;border:1px solid #d4b78366;background:#19141e;color:var(--ink);border-radius:0;padding:.6rem;font:1rem var(--serif)}.guide-stage-top{inset:.6rem .5rem auto;font-size:.625rem;letter-spacing:.6px}.guide-stage-top>span{padding:.3rem}.guide-stage-top button{padding:.35rem}.guide-copy{font-size:5.5cqw;padding:1rem 5%;line-height:1.45}.guide-copy h2{font-size:9.5cqw}.guide-controls>span{font-size:.625rem}.guide-controls button{min-width:78px}.guide-footer{flex-wrap:wrap;gap:.8rem 1.5rem}.guide-transcript{margin-top:2rem}.guide-hud{top:14%}.guide-orb-count{width:38px;height:38px}.guide-choices,.guide-synch-choices{padding:.8rem 5%}.guide-choices img,.guide-synch-choices img{height:23px}}
@media(prefers-reduced-motion:reduce){.guide-world [data-highlight].is-highlighted{animation:none}.guide-fog{transition:none}.guide-spynn{display:none!important}}
/* Interactive native-scale field. Only the orbs and choices capture touch,
   leaving the rest of the phone page available for ordinary scrolling. */
.guide-orb,.guide-synch{padding:0;border:0;color:inherit;cursor:grab;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.guide-synch{border:1px solid #c45e3dcc}.guide-orb:active,.guide-synch:active{cursor:grabbing}.guide-orb:focus-visible,.guide-synch:focus-visible{outline:2px solid #edcf9f;outline-offset:5px}.guide-orb.is-caught{opacity:.45}
.guide-world .guide-orb,.guide-world .guide-synch{z-index:5}.guide-copy{transition:opacity .15s}.guide-stage.is-handling .guide-copy{opacity:.18}
.guide-choices>button,.guide-synch-choices>button{display:flex;flex-direction:column;align-items:center;justify-content:end;gap:.7rem;background:none;color:inherit;border:0;padding:.2rem;cursor:pointer;pointer-events:auto;min-height:64px}
.guide-choices>button>span:last-child,.guide-synch-choices>button>span:last-child{display:block;width:100%;text-align:center;border:1px solid #d4b78366;border-radius:12px;padding:.3rem;font:clamp(13px,4cqw,17px)/1.4 var(--serif)}
.guide-choices>button:hover,.guide-synch-choices>button:hover{background:#d4b78320}.guide-choices>button:focus-visible,.guide-synch-choices>button:focus-visible{outline:2px solid #e5c699;outline-offset:2px}
.guide-orb-count{background:#17131c88;color:inherit;font:inherit;cursor:pointer;pointer-events:auto;padding:0}

.guide-field-lines{position:absolute;z-index:1;inset:0;border-bottom:1px solid #d4b78366;bottom:11.1%;pointer-events:none}.guide-field-lines::before,.guide-field-lines::after{content:'';position:absolute;top:0;width:4px;height:56.25%;background:#d4b78355}.guide-field-lines::before{left:0}.guide-field-lines::after{right:0}
@media(prefers-reduced-motion:reduce){.guide-copy{transition:none}}
.guide-synch.is-outline{width:18.22%}
.guide-choices>button:disabled{opacity:.3;cursor:default}

.guide-scenery{position:absolute;inset:0;will-change:transform}.guide-orb:disabled{cursor:default}
/* Native scoresToTheSurface order: backdrop, rear fog, orb/particles, front fog. */
.guide-fog-one{z-index:2}.guide-fog-two{z-index:6}