/* Homepage: Mesh Lab-inspired physical surfaces and an interactive Go model.
   Layers: content 0, floating navigation 20, skip link 30. */
.lobby-view{--page-width:1320px;--page-gutter:clamp(20px,4.2vw,64px);--ease:cubic-bezier(.22,1,.36,1);--hero-ground:#ded6fa;--highlight:#ddfa78;--highlight-ink:#182238;--hard-shadow:#182238;background:var(--bg)}
:root[data-theme=dark] .lobby-view{--hero-ground:#232035;--highlight:#d5ed88;--highlight-ink:#182238;--hard-shadow:#080d17}
.lobby-view .logo{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:10px}
.lobbyhead{margin:12px 20px 0;padding:0 24px;height:68px;border:1px solid var(--line2);border-radius:18px;top:12px;gap:30px;box-shadow:0 3px 0 rgb(24 34 56 / .025);background:color-mix(in srgb,var(--surface) 95%,transparent);backdrop-filter:blur(16px)}
.lobbyhead .tagline{font-size:12px;text-align:center}
.lobbynav{display:flex;align-items:center;gap:9px}
.lobbynav .themebtn{width:42px;height:42px;border-radius:12px}
.lobbynav .themebtn svg{width:18px;height:18px}
.navlink{display:flex;align-items:center;justify-content:center;gap:18px;min-height:42px;background:none;border:1px solid transparent;border-radius:12px;padding:0 14px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s}
.navlink:hover{background:var(--accent-soft)}
.topics-trigger{border-color:var(--line2);background:var(--accent-soft)}
.menu-glyph{font-size:22px;font-weight:400;transition:transform .25s var(--ease)}
.topics-trigger[aria-expanded=true] .menu-glyph{transform:rotate(45deg)}
.lobby-view .btn{border-radius:12px;text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;border:1px solid var(--line2);min-height:44px}
.lobby-view .nav-start,.lobby-view .hero-primary{background:var(--highlight);color:var(--highlight-ink);border-color:var(--hard-shadow);box-shadow:3px 3px 0 var(--hard-shadow);gap:22px}
.lobby-view .nav-start:hover,.lobby-view .hero-primary:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--hard-shadow)}
.lobby-view .nav-start:active,.lobby-view .hero-primary:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--hard-shadow)}
.topic-nav{position:relative}
.topics-menu{position:absolute;top:56px;right:-145px;width:570px;background:var(--surface);border:1px solid var(--line2);border-radius:20px;padding:25px;box-shadow:0 22px 65px rgb(15 25 55 / .16);transform-origin:80% 0}
.menu-heading{font-family:var(--display);font-size:23px;letter-spacing:-.04em;padding-bottom:22px}
.menu-heading>span{display:block;font-family:var(--ui);font-size:12px;color:var(--ink3);letter-spacing:0;margin-top:7px}
.topic-links{display:grid;grid-template-columns:1fr 1fr;gap:5px 16px}
.topic-links button{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:8px;background:var(--bg);border:1px solid transparent;border-radius:10px;color:var(--ink);padding:13px 12px;font-size:12px;cursor:pointer;transition:background .2s,transform .25s var(--ease)}
.topic-links button:hover{background:var(--accent-soft);border-color:var(--accent-d);transform:translateX(3px)}
.topic-count{font-family:var(--mono);font-size:10px;color:var(--ink3);white-space:nowrap}
.topic-count span{margin-left:8px;color:var(--accent);font-size:16px}
.menu-bottom{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink3)}
.skip-link{position:fixed;top:10px;left:30px;z-index:30;padding:15px;background:var(--surface);color:var(--ink);transform:translateY(-150%)}
.skip-link:focus{transform:none}
.lobby-view #app{background:linear-gradient(var(--hero-ground),var(--hero-ground)) top / 100% 600px no-repeat;padding-top:1px}
.hero{background:var(--hero-ground);border:0;padding:70px var(--page-gutter) 72px;grid-template-columns:1.12fr 1fr;gap:clamp(28px,4vw,70px);align-items:center;min-height:530px;overflow:visible}
.hero::before,.hero::after{display:none}
.herokicker{font-size:13px;margin-bottom:25px;letter-spacing:0}
.hero h1{font-size:clamp(36px,4.45vw,66px);line-height:1.09;letter-spacing:-.065em;font-weight:600;color:var(--ink);text-wrap:nowrap}
.hero-go-logo{display:inline-block;height:.64em;width:1.7em;vertical-align:-.015em;object-fit:contain}
.hero h1 .accentline{color:var(--highlight-ink);background:var(--highlight);width:fit-content;border-radius:12px 28px 12px 12px;padding:0 10px 6px;margin:7px 0 0 -10px}
.hero p{font-size:16px;line-height:1.75;margin-top:25px;max-width:43ch}
.hero-actions{display:flex;gap:16px;align-items:center;margin-top:30px;flex-wrap:wrap}
.hero-actions .btn{font-size:13px;padding:12px 17px;min-height:53px}
.button-arrow{display:grid;place-items:center;background:var(--highlight-ink);color:var(--highlight);width:27px;height:27px;border-radius:7px;font-size:19px;transition:transform .25s var(--ease)}
.hero-primary:hover .button-arrow{transform:rotate(45deg)}
.lobby-view .hero-secondary{background:transparent;color:var(--ink);gap:18px}
.lobby-view .hero-secondary:hover{background:var(--surface);transform:translateY(-2px)}
.heroright{padding:7px 8px 12px 0;position:relative;isolation:isolate}
.heroright::before{content:'';position:absolute;inset:19px 0 0 12px;border:1px solid var(--hard-shadow);border-radius:40px 20px 20px 20px;background:var(--highlight);transform:rotate(2.5deg);z-index:-1}
.fact-strip{display:grid;grid-template-columns:1fr 1fr 1fr 1.25fr;gap:24px;padding:30px var(--page-gutter);border-block:1px solid var(--line);background:var(--surface)}
.fact-strip>div{display:flex;align-items:center;gap:15px}.fact-strip strong{font-family:var(--display);font-size:34px;letter-spacing:-.055em;font-weight:500}.fact-strip span{font-size:12px;color:var(--ink3);max-width:13ch;line-height:1.6}
.fact-strip .fact-toolchain{flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;border-left:1px solid var(--line);padding-left:26px}.fact-toolchain code{font-family:var(--mono);font-size:10px;color:var(--accent)}.fact-toolchain span{max-width:none;font-size:11px}
.how-section{padding:70px var(--page-gutter);display:grid;grid-template-columns:1fr 1.2fr;gap:70px;align-items:center;scroll-margin-top:110px}
.how-copy h2,.practice-heading h2{font-size:clamp(30px,3.3vw,46px);line-height:1.1;letter-spacing:-.055em;font-weight:500;margin:0}
.how-copy p,.practice-heading p{font-size:14px;color:var(--ink3);line-height:1.7;margin:16px 0 0}
.workflow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:25px;font-size:11px;font-weight:500}.workflow span:nth-child(even){color:var(--accent)}
.insight{display:grid;grid-template-columns:auto 1fr;gap:24px;background:var(--accent-wash);padding:32px;border:1px solid var(--accent-d);border-radius:20px;align-items:start}
.insight-number{font-family:var(--display);font-size:62px;color:var(--accent);letter-spacing:-.065em;line-height:1}.insight-number>span{font-size:20px;color:var(--ink3);display:block;letter-spacing:-.03em;margin-top:10px}
.insight h3{font-size:21px;font-weight:500;letter-spacing:-.035em;line-height:1.3;margin:0 0 12px}.insight p{font-size:12px;line-height:1.8;color:var(--ink2);margin:0}.insight .linkbtn{padding:0;margin-top:18px;font-size:11px;text-decoration:none;display:flex;gap:20px;align-items:center}
.practice{padding:64px var(--page-gutter) 40px;border-top:1px solid var(--line);scroll-margin-top:105px}
.practice-heading{margin-bottom:30px}.practice-heading h2{font-size:clamp(30px,3.2vw,44px)}
.practice .modes{padding:0;margin:0 0 26px;max-width:760px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.practice .mode{border-radius:14px;padding:19px 22px;background:var(--surface);position:relative;transition:transform .3s var(--ease),background .2s,border-color .2s;gap:7px}
.practice .mode::after{content:'↗';position:absolute;right:20px;top:19px;font-size:18px;color:var(--ink3);transition:transform .25s var(--ease)}
.practice .mode:hover::after{transform:translate(2px,-2px)}
.practice .mode[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);box-shadow:none}.practice .mode[aria-pressed=true]::after{color:var(--accent)}
.practice .mtitle{font-size:16px}.practice .mnote{font-size:11px}.practice .mcount{font-size:9px}
.filter-disclosure{border-block:1px solid var(--line);margin-bottom:14px}.filter-disclosure summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;padding:19px 0;font-size:12px;font-weight:500}.filter-disclosure summary::-webkit-details-marker{display:none}.filter-disclosure summary>span:first-child{display:flex;align-items:center;gap:16px}.filter-plus{font-size:20px;color:var(--accent);transition:transform .2s}.filter-disclosure[open] .filter-plus{transform:rotate(45deg)}
.practice .filters{padding:0 0 24px;margin:0;border:0;max-width:none;gap:14px}.practice .frow{gap:7px}.practice .chip{padding:8px 12px;border-radius:8px;font-size:11px;min-height:36px;transition:background .2s,transform .25s var(--ease)}.practice .chip:hover{transform:translateY(-2px)}
.practice .tier{padding:38px 0 35px;background:none;border:0;scroll-margin-top:110px}
.practice .tier+.tier{border-top:1px solid var(--line)}
.practice .tierhead{margin-bottom:21px;align-items:flex-start;gap:25px}.practice .tiername{font-size:27px;letter-spacing:-.04em;line-height:1.2;margin:0;font-weight:500}.practice .tiernote{font-size:12px;line-height:1.7;margin-top:10px;max-width:75ch}.practice .tiercount{font-size:10px;margin-top:9px;white-space:nowrap}
.practice .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.practice .card-ch{padding:22px;border-radius:14px;gap:14px;box-shadow:none;position:relative;min-height:210px;transition:transform .3s var(--ease),border-color .2s,box-shadow .3s var(--ease)}
.practice .card-ch:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 5px 0 var(--accent-d)}
.practice .chtitle{font-size:19px;line-height:1.25;letter-spacing:-.035em;text-wrap:initial;font-weight:500}.practice .chbrief{font-size:12px;line-height:1.7}.practice .chclass{font-size:8px;border:0;background:var(--accent-wash);padding:4px 6px}.practice .chdet{font-size:9px}.practice .chblind{font-size:8px}.card-arrow{margin-left:auto;font-size:21px;color:var(--accent);transition:transform .25s var(--ease)}.card-ch:hover .card-arrow{transform:translate(2px,-2px)}
.track-expand{display:flex;align-items:center;gap:16px;margin-top:18px;padding:8px 0;border:0;background:none;color:var(--accent);font-size:11px;cursor:pointer}.track-expand span{font-size:19px;transition:transform .2s}.track-expand:hover span{transform:rotate(90deg)}
.practice .pathmap{max-width:950px;margin:32px auto}.practice .map{min-width:0}.practice .pathhead{padding:24px}.practice .pathhead .tiername{font-size:24px}.practice .pathhead .btn{text-decoration:none}
.lobbyfooter{display:flex;gap:25px;align-items:center;margin:0 var(--page-gutter);padding:28px 0 35px;border-top:1px solid var(--line);font-size:11px;color:var(--ink3)}.lobbyfooter p{margin:0;flex:1}.lobbyfooter .logo{font-size:17px}.lobbyfooter .linkbtn{font-size:11px}
@media (min-width:1600px){.lobby-view{--page-gutter:max(64px,calc((100vw - 1320px) / 2))}.hero{padding-top:85px;padding-bottom:85px}.lobbyhead{max-width:1460px;margin-inline:auto}}
@media (max-width:1150px){.lobbyhead .tagline{display:none}.lobbyhead .logo{margin-right:auto}.hero{gap:25px;padding-top:50px;padding-bottom:50px}.hero-actions{gap:12px}.hero-actions .btn{padding:11px 13px;font-size:11px}.how-section{gap:35px}.insight{padding:26px;gap:19px}.fact-strip{gap:15px}.fact-strip strong{font-size:30px}.fact-strip span{font-size:11px}}
@media (max-width:767px){.lobbyhead{height:62px;margin:10px 12px 0;padding:0 14px;top:10px;border-radius:14px;gap:10px}.lobbyhead .logo{font-size:22px;gap:8px}.lobbyhead .gotcha-mark{width:32px;height:32px}.lobbynav{gap:6px}.lobbynav>.navlink,.nav-start{display:none!important}.navlink{font-size:12px;padding:0 12px;gap:12px}.topics-menu{position:fixed;top:72px;left:0;right:0;width:auto;padding:20px;max-height:calc(100dvh - 110px);overflow:auto}.topic-links{gap:6px}.topic-links button{padding:12px 9px;font-size:11px}.menu-heading{font-size:23px}.menu-bottom{font-size:11px}.hero{grid-template-columns:1fr;padding:40px 24px 40px;gap:35px;min-height:0}.herokicker{font-size:11px;margin-bottom:20px}.hero h1{font-size:clamp(32px,7.65vw,57px)}.hero h1 .accentline{margin-left:-6px;padding-left:6px;padding-right:8px;border-radius:8px 22px 8px 8px}.hero p{font-size:14px;margin-top:20px}.hero-actions{margin-top:24px;gap:13px}.hero-actions .btn{font-size:11px;min-height:48px;padding:10px 12px}.button-arrow{width:23px;height:23px;font-size:17px}.heroright{width:100%;max-width:500px;justify-self:center}.fact-strip{grid-template-columns:1fr 1fr;padding:25px 24px;gap:24px}.fact-strip strong{font-size:31px}.fact-strip span{font-size:10px}.fact-strip .fact-toolchain{padding-left:0;border:0}.fact-toolchain code{font-size:9px}.how-section{grid-template-columns:1fr;padding:45px 24px;gap:28px}.how-copy h2 br{display:none}.how-copy h2{max-width:14ch;font-size:34px}.how-copy p{font-size:13px}.workflow{font-size:10px;gap:9px;margin-top:20px}.insight{padding:24px;gap:22px}.insight-number{font-size:54px}.insight h3{font-size:19px}.insight p{font-size:11px}.practice{padding:42px 24px 25px}.practice-heading h2{font-size:32px;max-width:15ch}.practice-heading p{font-size:13px}.practice .modes{gap:8px}.practice .mode{padding:15px 12px;gap:9px}.practice .mode::after{display:none}.practice .mtitle{font-size:14px}.practice .mcount{font-size:8px;margin-left:3px}.practice .mnote{font-size:10px}.practice .filters .flabel{flex-basis:100%;margin:6px 0 3px}.practice .filters .frow{padding-left:0}.practice .filters .chip{font-size:10px;padding:7px 9px}.practice .grid{grid-template-columns:1fr}.practice .tier{padding:30px 0}.practice .tierhead{gap:12px}.practice .tiername{font-size:24px}.practice .tiernote{font-size:11px}.practice .tiercount{font-size:9px;margin-top:6px}.practice .card-ch{min-height:185px;padding:21px}.practice .chtitle{font-size:20px}.practice .pathhead{padding:18px}.practice .map .ntitle{font-size:17px}.practice .map .ntrack{font-size:12px}.lobbyfooter{flex-wrap:wrap;gap:15px;margin-inline:24px;padding:25px 0}.lobbyfooter>span{flex-basis:100%}.lobbyfooter p{font-size:10px}}
@media (max-width:370px){.hero,.practice,.how-section{padding-inline:18px}.hero h1{font-size:30px}.hero-actions{gap:10px}.hero-actions .btn{font-size:10px;gap:9px}}
@media (prefers-reduced-motion:no-preference){
  @keyframes homepage-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  @keyframes panel-enter{from{opacity:0;transform:translateY(25px) rotate(2deg)}to{opacity:1;transform:none}}
  .heroleft>*{animation:homepage-enter .8s var(--ease) both}.heroleft h1{animation-delay:.07s}.heroleft p{animation-delay:.14s}.hero-actions{animation-delay:.21s}.heroright{animation:panel-enter 1s .12s var(--ease) both}
  .topics-menu:not([hidden]){animation:homepage-enter .3s var(--ease) both}
  .will-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.will-reveal.is-visible{opacity:1;transform:none}
  .is-visible .card-ch{animation:homepage-enter .65s var(--ease) both}.is-visible .card-ch:nth-child(2){animation-delay:.07s}.is-visible .card-ch:nth-child(3){animation-delay:.14s}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.will-reveal{opacity:1;transform:none}.pnode{opacity:1}}
@media (prefers-reduced-transparency:reduce){.lobbyhead{background:var(--surface);backdrop-filter:none}}

/* Keep inherited editor and legacy hero rules out of the live illustration. */
.lobbybody{display:block}



.load-error{display:block;max-width:600px;margin:15vh auto;padding:30px}.load-error h1{font-size:36px;letter-spacing:-.04em}.load-error p{margin-bottom:25px;color:var(--ink3)}



/* A live catalogue preview. Card content and counts come from the Go API. */
.challenge-deck{border:1px solid var(--line2);border-radius:40px 20px 20px 20px;padding:26px;background:var(--surface)}
.deck-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:25px}
.deck-heading>span:first-child{font-size:13px;font-weight:600}.deck-heading>span:last-child{font-family:var(--mono);font-size:10px;color:var(--ink3)}
.deck-stage{position:relative;isolation:isolate;padding:40px 6px 0;min-height:332px}
.deck-back{position:absolute;height:180px;border:1px solid var(--line2);border-radius:15px;padding:12px 17px;font-size:10px;font-weight:500;transform-origin:center bottom}
.deck-back-far{top:6px;left:33px;right:23px;background:var(--surface3);transform:rotate(3deg);color:var(--ink3);z-index:-2}
.deck-back-near{top:23px;left:16px;right:17px;background:var(--hero-ground);transform:rotate(-2deg);color:var(--ink2);z-index:-1}
.deck-card{background:var(--bg);border:1px solid var(--line2);border-radius:15px;padding:23px;min-height:292px;display:flex;flex-direction:column;box-shadow:0 7px 16px rgb(24 34 56 / .04)}
.deck-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.deck-topic{font-size:12px;font-weight:600;color:var(--accent)}.deck-total{font-family:var(--mono);font-size:9px;color:var(--ink3)}
.deck-card-body{padding:25px 0 20px;flex:1}.deck-difficulty{font-size:10px;color:var(--ink3);text-transform:capitalize}.deck-difficulty span{margin:0 7px;color:var(--line2)}
.deck-card h2{font-size:clamp(22px,2.15vw,31px);font-weight:500;letter-spacing:-.045em;line-height:1.13;margin:10px 0 0;max-width:23ch;min-height:2.26em;text-wrap:balance}
.hero .deck-card p{font-size:12px;line-height:1.7;margin:13px 0 0;max-width:48ch;min-height:3.4em}
.deck-open{display:flex;align-items:center;justify-content:space-between;padding:14px 0 0;border:0;border-top:1px solid var(--line);background:none;color:var(--accent);font-size:11px;font-weight:500;cursor:pointer;text-align:left}.deck-open>span{font-size:21px;transition:transform .25s var(--ease)}.deck-open:hover>span{transform:translate(3px,-3px)}
.deck-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:26px}.deck-position{font-family:var(--mono);font-size:10px;color:var(--ink3);white-space:nowrap}.deck-pagination{display:flex;gap:3px}.deck-pagination button{width:15px;height:32px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}.deck-pagination span{width:12px;height:3px;background:var(--line2);border-radius:2px;transition:background .2s,transform .2s}.deck-pagination button[aria-pressed=true] span{background:var(--accent);transform:scaleY(2)}.deck-pagination button:hover span{background:var(--accent)}
.deck-arrows{display:flex;gap:8px}.deck-arrows button{height:35px;width:35px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);color:var(--ink);font-size:18px;cursor:pointer;transition:transform .25s var(--ease),background .2s}.deck-arrows button:hover{background:var(--highlight);color:var(--highlight-ink);transform:translateY(-2px)}.deck-arrows button:active{transform:translateY(1px)}

@media (max-width:1150px){.challenge-deck{padding:23px 19px}.deck-card{padding:20px}.deck-card h2{font-size:25px}.deck-heading>span:last-child{font-size:9px}.deck-pagination{gap:1px}.deck-pagination button{width:12px}.deck-pagination span{width:9px}}
@media (max-width:767px){.challenge-deck{padding:24px 17px 18px}.deck-heading>span:first-child{font-size:12px}.deck-heading>span:last-child{font-size:8px}.deck-stage{padding-inline:0}.deck-card{padding:20px;min-height:310px}.deck-card h2{font-size:27px}.hero .deck-card p{font-size:12px}.deck-card-body{padding-top:22px}.deck-total{font-size:8px}.deck-topic{font-size:11px}.deck-controls{gap:7px;padding-top:20px}.deck-arrows{gap:5px}.deck-position{font-size:9px}}
@media (max-width:370px){.challenge-deck{padding-inline:14px}.deck-heading>span:first-child{font-size:11px}.deck-heading>span:last-child{font-size:7px}.deck-card{padding:17px}.deck-card h2{font-size:25px}.deck-pagination button{width:10px}.deck-pagination span{width:7px}.deck-arrows button{width:30px}}
/* Gopher artwork is unchanged; transform and clipping make it peek from a surface. */
.gopher-peek{position:absolute;width:96px;height:86px;padding:0;border:0;background:none;cursor:pointer;overflow:clip;isolation:isolate;outline-offset:0}
.gopher-peek img{position:absolute;width:80px;height:112px;max-width:none;left:8px;top:0;transform:translateY(26px) rotate(-7deg);transform-origin:50% 80%;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.gopher-peek:hover img,.gopher-peek:focus-visible img,.gopher-peek.saying-hello img{transform:translateY(4px) rotate(7deg)}
.gopher-hello{position:absolute;top:5px;right:0;padding:4px 7px;font-size:9px;font-family:var(--mono);background:var(--surface);color:var(--accent);border:1px solid var(--line2);border-radius:8px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}
.gopher-peek.saying-hello .gopher-hello{opacity:1;transform:none}
.gopher-hero{top:-65px;right:24px;z-index:0}.challenge-deck{position:relative}
.practice-heading{position:relative}.gopher-practice{right:20px;bottom:-31px;width:88px;height:95px;transform:rotate(8deg)}
.practice .modes{background:var(--bg)}
.lobbyfooter{position:relative;flex-wrap:wrap;margin-top:35px}.gopher-footer{right:12px;top:-86px;transform:rotate(-9deg)}.gopher-credit{flex-basis:100%;font-size:10px;color:var(--ink3);text-decoration:none}.gopher-credit:hover{color:var(--accent);text-decoration:underline}
@media (max-width:767px){.gopher-hero{top:-52px;right:18px;height:73px;width:82px}.gopher-hero img{width:68px;height:95px}.hero{row-gap:76px}.gopher-practice{right:0;bottom:-28px;width:64px;height:80px}.gopher-practice img{width:62px;height:87px;left:0}.practice-heading{padding-right:45px}.gopher-footer{right:0}.lobbyfooter{margin-top:60px}}
/* Horizontal guided journey: native scrolling, keyboard arrows, and touch snapping. */
.journey{margin-top:32px;border:1px solid var(--line2);border-radius:22px;overflow:hidden;background:var(--surface);min-width:0}
.journey-heading{padding:32px 34px 25px;display:flex;align-items:center;justify-content:space-between;gap:25px}.journey-label{font-size:11px;color:var(--accent)}.journey-heading h3{font-size:33px;line-height:1.1;letter-spacing:-.05em;font-weight:500;margin:10px 0 0}.journey-heading p{font-size:12px;line-height:1.7;color:var(--ink3);margin:12px 0 0}.journey-heading .btn{font-size:12px;flex-shrink:0}
.journey-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 34px 22px;border-bottom:1px solid var(--line)}.journey-bands{display:flex;gap:7px;flex-wrap:wrap}.journey-bands button{border:1px solid var(--line);background:var(--bg);border-radius:8px;color:var(--ink2);padding:8px 12px;cursor:pointer;font-size:11px;text-transform:capitalize;transition:background .2s,border-color .2s}.journey-bands button span{font-family:var(--mono);font-size:9px;margin-left:8px;color:var(--ink3)}.journey-bands button:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.journey-current{background:none;border:0;font-size:11px;color:var(--accent);cursor:pointer;white-space:nowrap}.journey-current span{margin-left:9px}
.journey-rail{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;background:var(--bg);scrollbar-width:thin;scrollbar-color:var(--accent-d) transparent;position:relative}
.journey-landscape{position:relative;display:flex;height:530px;padding:0;isolation:isolate}
.journey-road{position:absolute;top:0;left:0;pointer-events:none;z-index:-1}.road-base{fill:none;stroke:var(--line2);stroke-width:2;stroke-dasharray:5 7}.road-progress{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.journey-stop{position:relative;flex:0 0 300px;width:300px;padding:26px 18px;scroll-snap-align:center;display:flex;align-items:flex-start}.journey-stop.below{padding-top:305px}
.journey-card{display:flex;flex-direction:column;min-height:184px;width:264px;padding:17px;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s}
a.journey-card:hover{transform:translateY(-4px);box-shadow:0 4px 0 var(--accent-d);border-color:var(--accent)}
.journey-card::after{content:'';position:absolute;width:1px;height:20px;left:50%;top:100%;background:var(--line2)}.below .journey-card::after{top:auto;bottom:100%;height:27px}
.journey-node{position:absolute;top:222px;left:134px;width:32px;height:32px;border-radius:50%;background:var(--surface);border:1px solid var(--line2);display:grid;place-items:center;font:10px var(--mono);color:var(--ink3)}.below .journey-node{top:246px}
.current .journey-node{color:var(--highlight-ink);background:var(--highlight);border:1px solid var(--hard-shadow);box-shadow:0 0 0 7px var(--accent-soft)}.solved .journey-node{background:var(--ok-d);color:var(--ok);border-color:var(--ok)}
.journey-card-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;color:var(--ink3);font-size:9px}.journey-card-meta>span:first-child{color:var(--accent)}.journey-card-meta>span:last-child{text-transform:capitalize}.journey-card h3{font-size:18px;letter-spacing:-.035em;font-weight:500;line-height:1.2;margin:13px 0 8px}.journey-card p{font-size:10px;line-height:1.6;color:var(--ink3);margin:0;flex:1}.journey-card-foot{font-size:9px;color:var(--ink3);margin-top:15px;display:flex;align-items:center;justify-content:space-between;gap:12px}.journey-card-foot>span:last-child:not(:first-child){font-size:18px;color:var(--accent)}
.current .journey-card{border-color:var(--accent);box-shadow:0 4px 0 var(--accent-d)}.current .journey-card-foot{color:var(--accent)}.locked .journey-card{background:var(--accent-wash);border-style:dashed}.locked .journey-card-meta>span:first-child{color:var(--ink3)}
.journey-bottom{padding:16px 34px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line)}.journey-bottom p{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--ink3);margin:0}.journey-bottom .gotcha-mark{width:28px;height:28px}.journey-arrows{display:flex;gap:8px}.journey-arrows button{width:40px;height:36px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);color:var(--ink);font-size:18px;cursor:pointer;transition:background .2s,transform .2s}.journey-arrows button:hover{background:var(--highlight);color:var(--highlight-ink);transform:translateY(-2px)}
.gopher-journey{top:159px;left:209px;width:68px;height:66px;transform:rotate(14deg)}.gopher-journey img{width:57px;height:80px;left:0;transform:translateY(25px) rotate(-7deg)}.below .gopher-journey{top:240px}
@media (max-width:767px){.journey{margin-inline:-8px}.journey-heading{padding:25px 20px;display:block}.journey-heading h3{font-size:28px}.journey-heading p{font-size:11px}.journey-heading .btn{margin-top:22px}.journey-toolbar{padding:0 20px 20px;flex-wrap:wrap;gap:13px}.journey-bands{gap:6px}.journey-bands button{font-size:10px;padding:7px 9px}.journey-bands button span{font-size:8px;margin-left:5px}.journey-bottom{padding:16px;gap:12px}.journey-bottom p{font-size:10px;max-width:18ch}.journey-bottom .gotcha-mark{display:none}.journey-rail{scroll-snap-type:x mandatory}}
/* Reserve headroom so the current milestone's gopher peeks above its card. */
.journey-landscape{height:580px}.journey-road{top:50px}.journey-stop.above{padding-top:61px}.journey-stop.below{padding-top:355px}.journey-node{top:272px}.below .journey-node{top:296px}.journey-card{height:200px}.journey-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:none}.journey-card-foot{margin-top:auto;padding-top:12px}.gopher-journey{top:0;left:205px}.below .gopher-journey{top:292px}

/* Stable carousel frame: content updates in place with no opacity animation. */
.deck-card{height:350px}.deck-card-body{min-height:0}.deck-card h2{min-height:0}.hero .deck-card p{min-height:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.deck-open{margin-top:auto;flex-shrink:0}.deck-card-top{flex-shrink:0}
@media (max-width:767px){.deck-card{height:370px}.deck-card h2{font-size:25px}.deck-card-body{padding-block:20px 16px}}
@media (max-width:370px){.deck-card{height:385px}.deck-card h2{font-size:23px}}
/* The visitor controller chooses when and where to peek. */
.gopher-side{top:103px;right:-39px;width:83px;height:79px;transform:rotate(90deg)}
.practice .grid{position:relative}.gopher-pause{font-size:10px!important}
@media (prefers-reduced-motion:no-preference){
 .gopher-peek img{transform:translateY(120px) rotate(0deg);transition:transform .8s cubic-bezier(.45,.05,.65,.45)}
 .gopher-peek.is-peeking img{transform:translateY(24px) rotate(-7deg);transition:transform .75s cubic-bezier(.22,1.25,.45,1)}
 .gopher-peek.is-peeking.looking-right img{transform:translateY(19px) rotate(6deg)}
 .gopher-peek:focus-visible img,.gopher-peek.saying-hello img{animation:none;transform:translateY(4px) rotate(7deg)}
 .gophers-paused .gopher-peek img{animation:none;transform:translateY(26px) rotate(-7deg)}
}
@media (max-width:767px){.gopher-side{right:-24px;width:64px;height:65px;top:110px}.gopher-side img{width:58px;height:81px;left:0}}

.gopher-peek:hover .gopher-hello,.gopher-peek:focus-visible .gopher-hello{opacity:1;transform:none}
.gopher-hello{transition:opacity .28s ease,transform .35s var(--ease)}
@media (prefers-reduced-motion:no-preference){.gopher-peek:hover img,.gopher-peek:focus-visible img,.gopher-peek.saying-hello img{transform:translateY(4px) rotate(7deg);transition:transform .65s cubic-bezier(.22,1.25,.45,1)}}

/* Side visitors live underneath the cards, which physically conceal their bodies. */
.practice .grid{isolation:isolate}.practice .grid>.card-ch{position:relative;z-index:1}
.gopher-left,.gopher-right{top:30px;width:104px;height:120px;overflow:visible;z-index:0;transform:none}
.gopher-left{left:-34px;right:auto}.gopher-right{right:-34px;left:auto}
.gopher-left img,.gopher-right img{left:0;top:0;width:80px;height:112px;transform-origin:center}
.gopher-left img{transform:translateX(0) rotate(-90deg)}.gopher-right img{transform:translateX(24px) rotate(90deg)}
.gopher-left .gopher-hello{left:-12px;right:auto;top:10px;transform:translateX(5px)}.gopher-right .gopher-hello{right:-12px;top:10px;transform:translateX(-5px)}
@media (prefers-reduced-motion:no-preference){
 .gopher-left img{transform:translateX(110px) rotate(-90deg)}.gopher-right img{transform:translateX(-90px) rotate(90deg)}
 .gopher-left.is-peeking img{transform:translateX(0) rotate(-90deg)}.gopher-right.is-peeking img{transform:translateX(24px) rotate(90deg)}
 .gopher-left.is-peeking.looking-right img{transform:translateX(-4px) rotate(-86deg)}.gopher-right.is-peeking.looking-right img{transform:translateX(28px) rotate(86deg)}
 .gopher-left:hover img,.gopher-left:focus-visible img,.gopher-left.saying-hello img{transform:translateX(-7px) rotate(-86deg)}
 .gopher-right:hover img,.gopher-right:focus-visible img,.gopher-right.saying-hello img{transform:translateX(31px) rotate(86deg)}
 .gophers-paused .gopher-left img{transform:translateX(0) rotate(-90deg)}.gophers-paused .gopher-right img{transform:translateX(24px) rotate(90deg)}
}
@media (max-width:767px){
 .gopher-left,.gopher-right{width:76px;height:90px;top:35px}.gopher-left{left:-14px}.gopher-right{right:-14px}.gopher-left img,.gopher-right img{width:58px;height:81px}
 .gopher-left .gopher-hello{left:0;font-size:8px}.gopher-right .gopher-hello{right:0;font-size:8px}
 .gopher-right.is-peeking img,.gopher-right img,.gophers-paused .gopher-right img{transform:translateX(18px) rotate(90deg)}
}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){.gopher-right:not(.is-peeking):not(:hover):not(:focus-visible) img{transform:translateX(-90px) rotate(90deg)}}
/* The visible marks stay small; their hit areas are comfortably spaced. */
.deck-pagination{gap:0}.deck-pagination button{width:24px;height:32px}.deck-pagination span{width:11px}
@media (max-width:1150px){.deck-controls{display:grid;grid-template-columns:1fr auto;row-gap:8px}.deck-position{grid-row:1;grid-column:1}.deck-arrows{grid-row:1;grid-column:2}.deck-pagination{grid-row:2;grid-column:1/-1;justify-content:center}.deck-pagination button{width:24px}}