/* The scene fills the space between the game's persistent navigation bars. */
main#main.atlas-main{width:100%;max-width:none;padding:0;margin:0}
.atlas-stage{--atlas-top:76px;--atlas-bottom:0px;position:relative;isolation:isolate;overflow:hidden;width:100%;height:calc(100vh - var(--atlas-top) - var(--atlas-bottom));height:calc(100dvh - var(--atlas-top) - var(--atlas-bottom));min-height:380px;background:#293d30}
.atlas-image,.atlas-image img,.atlas-shade{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.atlas-image{z-index:-3}.atlas-image img{display:block;object-fit:cover;object-position:50% 50%}
.atlas-shade{z-index:-2;background:linear-gradient(120deg,#061b1ee8 0%,#071d228f 12%,transparent 36%),linear-gradient(0deg,#0a1c1de0 0%,#0e25283b 12%,transparent 27%,transparent 78%,#0a1a235f 100%)}
.atlas-top,.atlas-foot{position:absolute;left:clamp(22px,4.1vw,84px);right:clamp(22px,4.1vw,84px);display:flex;align-items:flex-start;justify-content:space-between;gap:16px;z-index:3;pointer-events:none}
.atlas-top{top:clamp(17px,3.7vh,42px)}.atlas-heading,.atlas-tools,.atlas-foot>*{pointer-events:auto}
.atlas-heading{max-width:64%;color:#fffbed;text-shadow:0 2px 10px #10221fbf}
.atlas-eyebrow{color:#dbefaf;display:flex;align-items:center;gap:8px;font:700 11px/1.2 ui-monospace,monospace;letter-spacing:1.8px}
.atlas-heading h1{margin:7px 0 9px;font:700 clamp(32px,4.3vw,65px)/1.03 Rubik,Inter,sans-serif;letter-spacing:-.045em;text-wrap:balance}
.atlas-story,.atlas-tools,.atlas-tool,.atlas-picker,.atlas-picker>button,.atlas-progress,.atlas-resume{display:inline-flex;align-items:center;justify-content:center}
.atlas-story{gap:7px;color:#ebf9d8;padding:5px 8px;border:1px solid #bed4a553;border-radius:6px;background:#142e2bbd;font-size:12px;font-weight:650}
.atlas-story:hover,.atlas-tool:hover:not(:disabled),.atlas-picker button:hover:not(:disabled),.atlas-resume:hover{background:#31483b}
.atlas-tools{gap:8px}.atlas-tools>.course-btn,.atlas-tool,.atlas-picker,.atlas-progress,.atlas-resume{color:#f1f6e8;background:#10251ff0;border:1px solid #92ae8d84;box-shadow:0 3px 0 #0c1a1c91}
.atlas-tool,.atlas-tools>.course-btn{min-height:40px;border-radius:9px}.atlas-tool{width:41px}.atlas-tool:disabled{opacity:.42;cursor:default}
.atlas-tools>.course-btn b{background:#314637;color:#d4efc1;border-color:#58734e}
.atlas-field{position:absolute;inset:clamp(100px,15vh,154px) 0 clamp(100px,13vh,142px);isolation:isolate}
.atlas-trail{position:absolute;width:100%;height:100%;inset:0;overflow:visible;pointer-events:none;stroke-linecap:round;stroke-linejoin:round}
.atlas-trail.vertical{display:none}
.atlas-trail .trail-bed{stroke:#362c1c;stroke-width:9;opacity:.73}
.atlas-trail .trail-gold{stroke:#b78848;stroke-width:5.5}
.atlas-trail .trail-stitch{stroke:#fff0b6;stroke-width:3.4;stroke-dasharray:2.2 8}
.atlas-trail .trail-complete{stroke:#b1f67c;stroke-width:4.2;stroke-dasharray:2.2 7}
.atlas-node{position:absolute;z-index:1;left:var(--x);top:var(--y);transform:translate(-50%,-50%);padding:0;width:70px;height:55px;isolation:isolate;border-radius:50%;color:#e5e9e7;transition:filter .15s}
.atlas-node.current{z-index:2}.atlas-node:hover,.atlas-node:focus-visible{filter:brightness(1.12);z-index:3}.atlas-node:focus-visible{outline-offset:6px}
.atlas-medal{display:grid;place-items:center;position:absolute;inset:0;border-radius:50%;border:3px solid #243130;background:linear-gradient(160deg,#b0bdb3,#707f79);box-shadow:inset 0 3px #edf1d4a8,inset -3px -4px #52635f,0 6px #38443f,0 8px #18241d,0 11px 8px #061b1f66}
.atlas-medal>span{display:grid;place-items:center;inset:5px;position:absolute;border:1.5px solid #40574d99;border-radius:50%;color:#273832}
.atlas-node.current .atlas-medal{border-color:#36532d;background:linear-gradient(140deg,#e5ffac,#94ea68 75%);box-shadow:inset 0 3px #f6ffdb,inset -2px -4px #73b85c,0 6px #447f3e,0 8px #213b26,0 12px 9px #0c201c77}
.atlas-node.current .atlas-medal:after{content:'';position:absolute;inset:-8px -9px -12px;border:2px solid #e1ffa2;border-radius:50%;box-shadow:0 0 0 2px #426a39c9,0 0 16px #dcff7899}
.atlas-node.current .atlas-medal>span{color:#294a22;border-color:#b4e985}
.atlas-node.done .atlas-medal{background:linear-gradient(140deg,#c1e1a0,#78b074);border-color:#344b35;box-shadow:inset 0 3px #e1f2c5,0 6px #46724c,0 8px #243b28,0 10px 8px #15282066}
.atlas-node-label,.node-callout{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:7px;align-items:center;justify-content:center;text-align:center;line-height:1.18}
.atlas-node-label{top:calc(100% + 12px);max-width:clamp(100px,15vw,190px);width:max-content;padding:6px 10px;border-radius:7px;border:1px solid #abaf8b94;background:#142721ef;color:#f6f3df;font:700 13px/1.22 Rubik,Inter,sans-serif;box-shadow:0 2px 0 #152018b3;text-wrap:balance}
.atlas-node-label em{font:650 10px/1 ui-monospace,monospace;font-style:normal;color:#c0c7ad}.atlas-node.current .atlas-node-label{background:#233d28;border-color:#c8e993;color:#f2ffde}
.node-callout{bottom:calc(100% + 12px);white-space:nowrap;padding:7px 13px;border:2px solid #233e28;border-radius:8px;color:#19341f;background:#b0f47c;font:700 14px/1.1 Rubik,Inter,sans-serif;box-shadow:0 2px 0 #243e2b}
.node-callout:after{content:'';position:absolute;bottom:-6px;width:9px;height:9px;transform:rotate(45deg);border-right:2px solid #233e28;border-bottom:2px solid #233e28;background:#b0f47c}
.atlas-guide{position:absolute;bottom:0;right:calc(100% + 9px);height:clamp(52px,6.5vw,82px);width:auto;image-rendering:pixelated;filter:drop-shadow(1px 3px 2px #131b1aaa);pointer-events:none}
.atlas-foot{bottom:clamp(15px,3vh,35px);align-items:center}.atlas-picker{border-radius:9px;overflow:hidden;flex:none}.atlas-picker>button{gap:8px;font-size:13px;font-weight:650;min-height:40px;padding:0 11px}.atlas-picker .atlas-tool{background:transparent;border:none;box-shadow:none;width:39px;min-height:40px;border-radius:0}.atlas-picker>.atlas-tool:first-child{border-right:1px solid #65836d59}.atlas-picker>.atlas-tool:last-child{border-left:1px solid #65836d59}
.atlas-progress,.atlas-resume{border-radius:9px;gap:9px;padding:10px 14px;min-height:40px;font-size:12px}.atlas-progress b{font:650 12px ui-monospace,monospace;white-space:nowrap}.atlas-progress>span{color:#c4d4c0}.atlas-ticks{display:flex;gap:3px}.atlas-ticks i{width:12px;height:5px;border-radius:2px;background:#50635b}.atlas-ticks .done{background:#a8ee74}.atlas-ticks .current{background:#bedb9d}
.atlas-resume{margin-right:auto;color:#c5f6ab;font-weight:650}.story-lines p{font-size:15px;line-height:1.65;color:#d6e0d9}.story-sign{display:flex;align-items:center;gap:9px;margin-bottom:11px;color:var(--mint);font-size:12px;font-weight:650}.story-sign img{width:30px}
:root[data-atlas-focus] .top,:root[data-atlas-focus] .mobile-nav{display:none}
:root[data-atlas-focus] .atlas-stage{--atlas-top:0px;--atlas-bottom:0px}
@media(max-width:900px){.atlas-heading h1{font-size:clamp(28px,4.5vw,44px)}.atlas-node{width:57px;height:47px}.atlas-trail .trail-bed{stroke-width:7}.atlas-trail .trail-gold{stroke-width:4.5}.atlas-node-label{font-size:12px}.atlas-foot,.atlas-top{left:20px;right:20px}}
@media(max-width:680px){.atlas-stage{--atlas-top:62px;--atlas-bottom:calc(56px + env(safe-area-inset-bottom))}.atlas-foot,.atlas-top{left:12px;right:12px}.atlas-top{top:14px}.atlas-foot{bottom:10px}.atlas-picker>button,.atlas-picker>.atlas-tool{min-height:34px;font-size:11px}.atlas-picker>.atlas-tool{width:28px;padding:0 4px}.atlas-progress{padding:6px 8px;min-height:34px;gap:5px}.atlas-ticks i{width:6px}.atlas-progress>span{display:none}.atlas-tools{gap:5px}.atlas-tools>.course-btn,.atlas-tools>.atlas-tool{min-height:33px}.atlas-tools>.atlas-tool{width:32px}.atlas-tools>.course-btn{margin:0;padding:4px 7px}.atlas-tools>.course-btn .course-name{display:none}.atlas-tool .icon{width:16px}}
@media(max-width:720px) and (orientation:portrait){
 .atlas-top{left:15px;right:13px}.atlas-heading{max-width:74%}.atlas-heading h1{font-size:clamp(25px,7vw,38px);margin:5px 0 7px}.atlas-eyebrow{font-size:9px;letter-spacing:1.3px}.atlas-eyebrow .icon{width:13px;height:13px}.atlas-heading .atlas-story{font-size:11px;padding:3px 6px}.atlas-field{inset:clamp(80px,13dvh,115px) 0 clamp(84px,12dvh,118px)}.atlas-node{left:var(--mx);top:var(--my);width:53px;height:43px}.atlas-node-label{top:calc(100% + 9px);max-width:145px;padding:4px 7px;gap:5px;font-size:11px}.atlas-node-label em{font-size:9px}.node-callout{bottom:calc(100% + 8px);font-size:11px;padding:5px 8px}.atlas-node.current .atlas-medal:after{inset:-5px -6px -10px}.atlas-guide{height:48px;right:calc(100% + 4px)}.atlas-trail.horizontal{display:none}.atlas-trail.vertical{display:block}.atlas-resume{position:absolute;right:0;bottom:calc(100% + 4px);min-height:28px;padding:3px 8px;font-size:10px}.atlas-progress b{font-size:11px}
}
@media(max-height:560px) and (orientation:landscape){
 .atlas-stage{min-height:245px}.atlas-field{inset:50px 0 48px}.atlas-heading h1{font-size:25px;margin:3px 0}.atlas-story{font-size:10px;padding:2px 5px}.atlas-eyebrow{font-size:9px}.atlas-top{top:8px}.atlas-node{width:44px;height:36px}.atlas-node-label{font-size:10px;padding:2px 5px;top:calc(100% + 9px)}.atlas-guide{height:41px}.node-callout{font-size:10px;padding:3px 7px;bottom:calc(100% + 8px)}.atlas-foot{bottom:6px}.atlas-picker button,.atlas-picker>.atlas-tool,.atlas-progress,.atlas-resume{min-height:28px}.atlas-tools .course-btn,.atlas-tool{min-height:31px}.atlas-shade{background:linear-gradient(110deg,#071f23b8,transparent 45%),linear-gradient(0deg,#10221e99,transparent 20%)}
}
@media(max-height:650px) and (orientation:portrait){.atlas-field{inset:77px 0 77px}.atlas-node{width:47px;height:38px}.atlas-guide{height:37px}.atlas-top{top:8px}.atlas-heading h1{font-size:24px}.atlas-foot{bottom:7px}}
@media(prefers-reduced-motion:reduce){.atlas-node{transition:none}}
.atlas-teaser{max-width:52ch;margin:0 0 12px;color:#f0f2db;font-size:clamp(13px,1.2vw,16px);line-height:1.42;text-shadow:0 1px 5px #13201a,0 1px 12px #18281d}
@media(max-width:720px) and (orientation:portrait),(max-height:560px) and (orientation:landscape){.atlas-teaser{display:none}}
#profile-form>.field-label+.field-label{margin-top:15px}
#profile-form .field-label>span:not(.handle-field){font-weight:400;color:var(--dim);font-size:11px;margin-top:-5px}
.handle-field{display:flex;align-items:center;background:#141a26;border:1px solid #434e5f;border-radius:8px}
.handle-field strong{padding-left:13px;color:var(--green);font:700 17px ui-monospace,monospace}
.field-label .handle-field input{background:transparent;border:none;border-radius:0;padding-left:5px}
.handle-field:focus-within{outline:2px solid var(--green);outline-offset:2px}
.handle-field input:focus-visible{outline:0}
#handle-help{display:block;margin-top:6px;color:var(--soft);font-size:11px;line-height:1.5}
#profile-message:not(:empty){font-size:13px;color:#ffc5af;margin:9px 0}
#profile-message:empty{display:none}
.player-byline b{color:var(--green);font-size:13px;margin-left:5px}
.nav-link span{white-space:nowrap}
@media(min-width:941px){.top-in{gap:25px}.main-nav{gap:4px}.main-nav .nav-link{padding-left:12px;padding-right:12px}}
@media(max-width:385px){.top-in{padding-left:8px;padding-right:8px;gap:5px}.brand{font-size:19px;gap:4px}.brand-mascot{width:29px;height:31px}.top-stats{gap:5px}.profile-button{width:28px;height:28px;margin-left:0}.stat-pill{font-size:11px;gap:3px}.stat-pill .pixel{width:14px;height:14px}}
@media(max-height:650px) and (max-width:720px) and (orientation:portrait){.atlas-field{inset:99px 0 63px}.atlas-heading h1{font-size:21px}.atlas-heading .atlas-story{font-size:10px}.atlas-heading .atlas-story .icon{height:12px}.atlas-node-label{max-width:120px}}
.writing-widget .field-label{margin-bottom:8px}
.write-display{box-sizing:border-box;min-height:50px;display:block;white-space:pre-wrap;overflow-wrap:anywhere;background:#111921;border:1px solid #536251;border-radius:8px;padding:12px 13px;font-size:19px;line-height:1.4;color:#ecf6e8;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:text}
.write-display:not(.answered):after{content:'';display:inline-block;vertical-align:-.12em;width:2px;height:1em;background:#a1e895;margin-left:2px}
.write-display:empty:before{content:attr(data-placeholder);color:#98a99d;font-size:14px}
.write-display:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.lesson-keys{-webkit-user-select:none;user-select:none;display:grid;gap:5px;margin-top:9px;padding:9px 6px;border-radius:11px;background:#141c25;border:1px solid #34404b}
.key-row{display:flex;align-items:stretch;justify-content:center;gap:4px}
.input-key{display:grid;place-items:center;flex:1 1 0;min-width:0;max-width:49px;min-height:39px;padding:3px 1px;border:1px solid #46525d;border-radius:6px;background:#29343e;box-shadow:0 2px #111820;font-size:16px;font-weight:650;color:#f0f3ee;line-height:1;touch-action:manipulation}
.input-key:hover,.input-key:focus-visible{background:#374942}.input-key:active,.input-key.key-on{background:#4c6b4f;color:#dcffca;transform:translateY(1px)}
.key-action{background:#344235;color:#c6e3b4;max-width:65px}.key-bottom .key-action{flex:1}.key-space{flex:3.7;max-width:280px;font-size:13px}.key-bottom{margin-top:2px}
@media(max-width:520px){.key-row{gap:3px}.lesson-keys{padding:6px 3px;gap:5px}.input-key{min-height:38px;font-size:15px}.key-space{font-size:12px}.write-display{font-size:18px}}
/* The painted route, stone platforms and guide share one geographic coordinate plane. */
.atlas-plane{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%)}
.atlas-plane .atlas-image{z-index:0}.atlas-plane .atlas-image img{object-fit:fill;image-rendering:auto}
.atlas-plane .atlas-field{inset:0;z-index:2}
.atlas-shade{z-index:1;background:linear-gradient(120deg,#061b1dd4 0%,#071d227d 12%,transparent 34%),linear-gradient(0deg,#0a1c1dd1,transparent 15%,transparent 86%,#0a1a2338)}
.atlas-plane .atlas-node{width:clamp(65px,6.3vw,101px);height:auto;aspect-ratio:230/131;left:var(--x);top:var(--y);transform:translate(-50%,-62%);filter:drop-shadow(0 3px 2px #1d23187d)}
.atlas-plane .atlas-node:hover,.atlas-plane .atlas-node:focus-visible{filter:brightness(1.1) drop-shadow(0 4px 4px #1d231888)}
.atlas-plane .atlas-node .atlas-medal{display:block;inset:0;border:0;background:none;box-shadow:none;border-radius:0}
.atlas-medal .waystone{display:block;width:100%;height:100%;object-fit:fill}
.atlas-plane .atlas-node .atlas-medal>span{inset:0 0 auto;display:grid;place-items:center;height:63%;border:0;color:#d4e0df;filter:drop-shadow(0 1px 1px #091a23)}
.atlas-plane .atlas-node.current .atlas-medal>span{color:#2e4619;filter:drop-shadow(0 1px 0 #e8ff9e)}
.atlas-plane .atlas-node.done .atlas-medal>span{color:#6b481e;filter:drop-shadow(0 1px 0 #ffdc8a)}
.atlas-plane .atlas-medal>span>.icon{width:clamp(17px,1.7vw,26px);height:clamp(17px,1.7vw,26px)}
.atlas-plane .atlas-node.current .atlas-medal:after{inset:-3px 2px 6px;z-index:-1;border:none;box-shadow:0 0 20px 4px #d5ff6f77}
.atlas-plane .atlas-node-label{top:calc(100% + 4px);border:1.5px solid #3a2819;border-radius:4px;background:linear-gradient(#956b3d 0%,#79522c 18%,#664122 75%,#51361f 100%);color:#fff6dc;box-shadow:inset 0 1px #d9b477,0 2px 0 #302719,0 4px 6px #15221970;text-shadow:0 1px 2px #302015;max-width:min(17vw,200px);padding:5px 9px;gap:5px}
.atlas-plane .atlas-node-label em{color:#f7d49e}.atlas-plane .atlas-node.current .atlas-node-label{background:linear-gradient(#69824a,#364f30);border-color:#314329;color:#f3ffce;box-shadow:inset 0 1px #bbd38a,0 2px 0 #243023,0 4px 6px #15221970}
.atlas-plane .atlas-node.current .atlas-node-label em{color:#c7e4a3}
.atlas-plane .node-callout{bottom:calc(100% + 4px);background:#ddf99f;color:#243818;border:1.5px solid #3e552f;border-radius:5px;padding:5px 10px;box-shadow:inset 0 1px #f6ffe6,0 2px 0 #3c512b}
.atlas-plane .node-callout:after{width:6px;height:6px;bottom:-4px;background:#ddf99f;border-color:#3e552f;border-width:1.5px}
.atlas-plane .atlas-guide{height:clamp(46px,5.5vw,70px);right:calc(100% - 2px);bottom:5%;image-rendering:auto}
@media(orientation:portrait){
 .atlas-plane .atlas-node{left:var(--mx);top:var(--my);width:clamp(56px,13vw,85px)}
 .atlas-plane .atlas-node-label{max-width:clamp(89px,30vw,160px);font-size:clamp(10px,2.6vw,13px);padding:4px 6px}
 .atlas-plane .atlas-guide{height:clamp(40px,12vw,64px)}
 .atlas-plane .node-callout{font-size:clamp(10px,2.8vw,14px)}
 .atlas-shade{background:linear-gradient(130deg,#0c2626c7 0%,transparent 30%),linear-gradient(0deg,#102421c9,transparent 14%)}
}
@media(max-height:650px) and (orientation:portrait){.atlas-plane .atlas-node{width:46px}.atlas-plane .atlas-guide{height:35px}.atlas-plane .node-callout{font-size:9px;padding:3px 5px}.atlas-plane .atlas-node-label{font-size:10px;max-width:100px}}
@media(max-height:560px) and (orientation:landscape){.atlas-plane .atlas-node{width:48px}.atlas-plane .atlas-guide{height:32px}.atlas-plane .node-callout{font-size:10px;padding:2px 5px}}
.atlas-plane .atlas-node-label[data-side="below-in"]{left:82%}
.atlas-plane .atlas-node-label[data-side="below-out"]{left:18%}
.atlas-plane .atlas-node-label[data-side="right"],.atlas-plane .atlas-node-label[data-side="left"]{top:50%;transform:translateY(-50%)}
.atlas-plane .atlas-node-label[data-side="right"]{left:calc(100% + 4px)}
.atlas-plane .atlas-node-label[data-side="left"]{left:auto;right:calc(100% + 4px)}
.atlas-plane .atlas-node-label[data-side="above"]{top:auto;bottom:calc(100% + 4px)}
.voice-choices{display:grid;gap:9px}.voice-row{display:flex;gap:7px}.voice-choice{display:flex;flex:1;align-items:center;gap:10px;background:#242d37;border:1px solid #46515d;border-radius:9px;padding:13px;text-align:left;font-size:14px}.voice-choice.chosen{background:#293c30;border-color:#88b971;color:#c4efa2}.voice-row .sound{width:45px}
