/* X Typewriter by GGBotNet, SIL Open Font License1.1. Original fonts and License.txt accompany this stylesheet. */
@font-face{font-family:'John X Typewriter';src:url('assets--fonts--x-typewriter--XTypewriter-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'John X Typewriter';src:url('assets--fonts--x-typewriter--XTypewriter-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
.john-guide{--john-w:96px;--john-h:144px;--john-step:42px;position:fixed;left:max(8px,calc((100vw - 1600px)/4 - 64px));bottom:72px;width:156px;height:210px;z-index:35;pointer-events:none;color:#fff;font:18px/1.35 "John X Typewriter",monospace}
.john-walker{position:absolute;left:0;bottom:0;width:var(--john-w);height:var(--john-h);animation:none}
.john-talk{position:relative;display:block;width:var(--john-w);height:var(--john-h);padding:0!important;border:0!important;background:transparent!important;color:#fff!important;cursor:pointer;pointer-events:auto;overflow:visible}
.john-talk:focus-visible{outline:2px solid white;outline-offset:5px;border-radius:4px}
.john-name{position:absolute;bottom:calc(var(--john-h) + 5px);left:-20px;width:calc(var(--john-w) + 40px);font:15px 'John X Typewriter',monospace;text-align:center;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000}
.john-sprite{position:absolute;inset:0;background-image:url('home-john-turn.png');background-repeat:no-repeat;background-size:calc(var(--john-w)*6) calc(var(--john-h)*6);image-rendering:pixelated;background-position-y:0;animation:john-spin .6s step-end infinite;transform-origin:50% 70%;transition:transform .8s ease}
.john-zzz{display:none;position:absolute;right:-5px;top:6px;color:white;font:14px "John X Typewriter",monospace;text-shadow:1px 1px #000}
.john-guide.is-sleeping .john-walker,.john-guide.is-talking .john-walker,.john-guide.is-paused .john-walker{animation-play-state:paused}
.john-guide.is-sleeping .john-sprite{animation:none;background-position:0 0;transform:translateY(8px) rotate(85deg)}
.john-guide.is-sleeping .john-zzz{display:block;animation:john-snore 2s ease-in-out infinite}
.john-guide.is-talking .john-sprite{animation:none;background-position:0 0;transform:none}
.john-guide.is-paused .john-sprite,.john-guide.is-paused .john-zzz{animation-play-state:paused}
.john-dialogue{position:absolute;left:calc(var(--john-w) + 24px);bottom:50px;width:310px;max-width:calc(100vw - 100px);max-height:calc(100dvh - 120px);overflow:auto;pointer-events:auto;background:#000!important;color:#fff!important;border:2px solid #fff;border-radius:9px;padding:13px;box-sizing:border-box;box-shadow:3px 4px 0 #0009}
.john-dialogue[hidden]{display:none!important}.john-dialogue-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.john-dialogue-heading strong{font:22px 'John X Typewriter',monospace;color:#fff}.john-close{background:#000!important;border:1px solid #fff;color:#fff!important;font:22px "John X Typewriter",monospace;min-width:32px;min-height:32px;padding:0;cursor:pointer}
.john-answer{font:18px/1.4 "John X Typewriter",monospace;color:#fff!important;margin:10px 0 12px;letter-spacing:0;text-transform:none}.john-choices{display:grid;gap:7px}.john-choices button,.john-choices a{display:block;box-sizing:border-box;text-align:left;background:#101010!important;color:white!important;border:1px solid #999;padding:9px 11px;min-height:40px;font:17px/1.2 'John X Typewriter',monospace;letter-spacing:.02em;text-decoration:none;cursor:pointer}.john-choices button:hover,.john-choices a:hover,.john-choices button:focus-visible,.john-choices a:focus-visible{background:#fff!important;color:#000!important;outline:2px solid white;outline-offset:2px}
@keyframes john-pace{from{transform:translateX(0)}to{transform:translateX(var(--john-step))}}
@keyframes john-gait{0%,24%{background-position-y:calc(var(--john-h)*-1)}25%,49%{background-position-y:calc(var(--john-h)*-2)}50%,74%{background-position-y:calc(var(--john-h)*-3)}75%,100%{background-position-y:calc(var(--john-h)*-4)}}
@keyframes john-facing{0%,49.99%{background-position-x:calc(var(--john-w)*-2)}50%,100%{background-position-x:calc(var(--john-w)*-6)}}
@keyframes john-snore{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
@media(min-width:1000px) and (max-width:1799px){.john-guide{--john-w:40px;--john-h:60px;--john-step:5px;left:3px;bottom:72px;width:48px;height:98px}.john-name{left:-1px;width:43px;font-size:11px}.john-dialogue{left:53px;bottom:0;width:300px}.john-zzz{font-size:10px;right:-2px;top:-6px}}
@media(max-width:999px){.john-guide{display:none}}
@media(prefers-reduced-motion:reduce){.john-walker,.john-sprite,.john-zzz{animation:none!important}.john-sprite{background-position:0 0;transition:none}}
.john-dialogue{border:2px solid #fff!important;overflow:visible}
.john-dialogue:before{content:'';position:absolute;left:-15px;bottom:28px;width:15px;height:20px;background:white;clip-path:polygon(100% 0,100% 100%,0 70%)}
.john-dialogue:after{content:'';position:absolute;left:-11px;bottom:31px;width:12px;height:14px;background:#000;clip-path:polygon(100% 0,100% 100%,0 70%)}
.john-choices{max-height:calc(100dvh - 290px);overflow-y:auto;overflow-x:hidden;padding:3px}
.john-close{border:1px solid #fff!important}.john-choices button,.john-choices a{border:1px solid #999!important}
.john-talk:focus-visible,.john-choices button:focus-visible,.john-choices a:focus-visible,.john-close:focus-visible{outline:2px solid #fff!important;outline-offset:3px}

@keyframes john-spin{0.000000%{background-position:calc(var(--john-w)*-0) calc(var(--john-h)*-0)}2.777778%{background-position:calc(var(--john-w)*-1) calc(var(--john-h)*-0)}5.555556%{background-position:calc(var(--john-w)*-2) calc(var(--john-h)*-0)}8.333333%{background-position:calc(var(--john-w)*-3) calc(var(--john-h)*-0)}11.111111%{background-position:calc(var(--john-w)*-4) calc(var(--john-h)*-0)}13.888889%{background-position:calc(var(--john-w)*-5) calc(var(--john-h)*-0)}16.666667%{background-position:calc(var(--john-w)*-0) calc(var(--john-h)*-1)}19.444444%{background-position:calc(var(--john-w)*-1) calc(var(--john-h)*-1)}22.222222%{background-position:calc(var(--john-w)*-2) calc(var(--john-h)*-1)}25.000000%{background-position:calc(var(--john-w)*-3) calc(var(--john-h)*-1)}27.777778%{background-position:calc(var(--john-w)*-4) calc(var(--john-h)*-1)}30.555556%{background-position:calc(var(--john-w)*-5) calc(var(--john-h)*-1)}33.333333%{background-position:calc(var(--john-w)*-0) calc(var(--john-h)*-2)}36.111111%{background-position:calc(var(--john-w)*-1) calc(var(--john-h)*-2)}38.888889%{background-position:calc(var(--john-w)*-2) calc(var(--john-h)*-2)}41.666667%{background-position:calc(var(--john-w)*-3) calc(var(--john-h)*-2)}44.444444%{background-position:calc(var(--john-w)*-4) calc(var(--john-h)*-2)}47.222222%{background-position:calc(var(--john-w)*-5) calc(var(--john-h)*-2)}50.000000%{background-position:calc(var(--john-w)*-0) calc(var(--john-h)*-3)}52.777778%{background-position:calc(var(--john-w)*-1) calc(var(--john-h)*-3)}55.555556%{background-position:calc(var(--john-w)*-2) calc(var(--john-h)*-3)}58.333333%{background-position:calc(var(--john-w)*-3) calc(var(--john-h)*-3)}61.111111%{background-position:calc(var(--john-w)*-4) calc(var(--john-h)*-3)}63.888889%{background-position:calc(var(--john-w)*-5) calc(var(--john-h)*-3)}66.666667%{background-position:calc(var(--john-w)*-0) calc(var(--john-h)*-4)}69.444444%{background-position:calc(var(--john-w)*-1) calc(var(--john-h)*-4)}72.222222%{background-position:calc(var(--john-w)*-2) calc(var(--john-h)*-4)}75.000000%{background-position:calc(var(--john-w)*-3) calc(var(--john-h)*-4)}77.777778%{background-position:calc(var(--john-w)*-4) calc(var(--john-h)*-4)}80.555556%{background-position:calc(var(--john-w)*-5) calc(var(--john-h)*-4)}83.333333%{background-position:calc(var(--john-w)*-0) calc(var(--john-h)*-5)}86.111111%{background-position:calc(var(--john-w)*-1) calc(var(--john-h)*-5)}88.888889%{background-position:calc(var(--john-w)*-2) calc(var(--john-h)*-5)}91.666667%{background-position:calc(var(--john-w)*-3) calc(var(--john-h)*-5)}94.444444%{background-position:calc(var(--john-w)*-4) calc(var(--john-h)*-5)}97.222222%{background-position:calc(var(--john-w)*-5) calc(var(--john-h)*-5)}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.john-guide:not(.is-talking):not(.is-paused) .john-sprite{animation:john-spin 1.2s step-end infinite!important}}

.john-guide{font:16px/1.5 'John X Typewriter',monospace}.john-answer{font:16px/1.55 'John X Typewriter',monospace}.john-name{font-size:16px}.john-dialogue-heading strong,.john-close{font-size:24px}.john-choices button,.john-choices a{font-size:16px}.john-zzz{font:16px 'John X Typewriter',monospace}
@media(min-width:1000px) and (max-width:1799px){.john-name,.john-zzz{font-size:8px}}

.john-trail{position:absolute;inset:0;pointer-events:none;background-image:url('home-john-turn.png');background-repeat:no-repeat;background-size:calc(var(--john-w)*6) calc(var(--john-h)*6);background-position-y:0;image-rendering:pixelated;animation:john-spin .6s step-end infinite both}
.john-trail-a{opacity:.24;animation-delay:.033333s;transform:translateX(-2px)}.john-trail-b{opacity:.1;animation-delay:.066667s;transform:translateX(-4px)}
.john-guide.is-talking .john-trail{animation:none;opacity:0}.john-guide.is-paused .john-trail{animation-play-state:paused}
.john-name,.john-dialogue-heading strong{font-weight:700}
@media(prefers-reduced-motion:reduce){.john-trail{display:none!important}}
html[data-site-theme=light] .john-guide .john-name{color:#000!important;text-shadow:1px 1px 0 #fff,-1px -1px 0 #fff}

.john-backdrop{position:fixed;inset:0;z-index:2999;background:#0009;backdrop-filter:none}.john-backdrop[hidden]{display:none!important}
.john-guide.is-talking{--john-h:min(432px,calc(100dvh - 150px));--john-w:calc(var(--john-h)*2/3);position:fixed;left:50%;top:50%;bottom:auto;width:0;height:0;z-index:3000}
.john-guide.is-talking .john-walker{left:calc(var(--john-w)*-.5);top:calc(var(--john-h)*-.5);bottom:auto;transform-origin:0 0;animation:none}
.john-guide.is-talking .john-name{font-size:20px;left:-20px;width:calc(var(--john-w) + 40px)}
.john-guide.is-talking .john-dialogue{position:fixed;left:calc(50vw + 175px);top:50%;bottom:auto;transform:translateY(-50%);width:340px;max-width:calc(50vw - 195px);max-height:calc(100dvh - 80px)}
.john-guide.is-talking .john-choices{max-height:max(90px,calc(100dvh - 360px));overflow-y:auto}
.john-dismiss{display:block;width:100%;margin-top:12px;padding:11px 8px;min-height:44px;border:1px solid #fff!important;background:#000!important;color:#fff!important;font:16px/1.4 'John X Typewriter',monospace;cursor:pointer}
.john-dismiss:hover,.john-dismiss:focus-visible{background:white!important;color:black!important;outline:2px solid white!important;outline-offset:3px}

/* Head-and-shoulders conversation: same proportions, cropped by the viewport. */
.john-guide.is-talking{--john-h:170dvh;--john-w:calc(var(--john-h)*2/3)}
.john-guide.is-talking .john-walker{top:calc(-50dvh + 6dvh)}
.john-guide.is-talking .john-talk{pointer-events:none}
.john-guide.is-talking .john-dialogue{left:calc(50vw + 250px);max-width:calc(50vw - 270px);z-index:2}

/* GBA-like32x48 poses, cached once; mesh-wire scan shares the same36 spin angles. */
.john-sprite{background-image:none}.john-trail{background-image:url('home-john-gba.png')}
.john-pixel-normal,.john-wireframe{position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;background-size:inherit;background-position:inherit;image-rendering:pixelated}
.john-pixel-normal{background-image:url('home-john-gba.png');animation:john-scan-normal 4s ease-in-out infinite}
.john-wireframe{background-image:url('home-john-wire.png');animation:john-scan-wire 4s ease-in-out infinite}
.john-sprite:after{content:'';position:absolute;left:12%;right:12%;height:max(1px,calc(var(--john-h)/48));background:#146b31;opacity:.8;pointer-events:none;animation:john-scan-line 4s ease-in-out infinite}
@keyframes john-scan-normal{0%,100%{clip-path:inset(0 0 0 0)}50%{clip-path:inset(100% 0 0 0)}}
@keyframes john-scan-wire{0%,100%{clip-path:inset(0 0 100% 0)}50%{clip-path:inset(0 0 0 0)}}
@keyframes john-scan-line{0%,100%{top:0;opacity:0}5%,95%{opacity:.8}50%{top:100%;opacity:0}}
.john-guide.is-paused .john-pixel-normal,.john-guide.is-paused .john-wireframe,.john-guide.is-paused .john-sprite:after{animation-play-state:paused}
.john-guide.is-talking .john-pixel-normal{animation:none;clip-path:none}.john-guide.is-talking .john-wireframe,.john-guide.is-talking .john-sprite:after{display:none}
@media(prefers-reduced-motion:reduce){.john-pixel-normal{animation:john-scan-normal 8s ease-in-out infinite}.john-wireframe{animation:john-scan-wire 8s ease-in-out infinite}.john-sprite:after{display:none}}
.john-guide .john-name{display:none}.john-sprite:after{background:#72151c}