:root{--blue:#087f8c;--accent:#12856d;--muted:#506979;--line:#d7e9ee;color:#183c51;background:#f4fbff;font-size:16px}body{background:#f4fbff}.topbar{border-bottom:2px solid #cde9ee;background:#fff;gap:18px}.brand{color:#16425a}.brand-mark{background:#ffbe56;color:#483619;box-shadow:0 4px 0 #e69b35}.brand small{color:#56717c}.shell{max-width:1510px}.sidebar{border-right:2px solid #cde9ee;background:#fff}.sidebar nav button{color:#526c7b;min-height:50px}.sidebar nav button.nav-active{background:#dcf8ef;border-color:#8fd9c1;color:#126e59}.sidebar nav button.nav-active span{color:#126e59}.sidebar nav button:nth-child(3).nav-active{background:#fff3d6;border-color:#efc371;color:#79591e}main{background:#f3faff;padding:28px 36px 60px}.j-kicker,.eyebrow{color:#247c83;letter-spacing:.035em}.j-heading{margin-bottom:18px}.j-heading h1{font-weight:850;letter-spacing:.01em;color:#193f57}.j-heading p{font-size:1rem}.j-primary,.primary{background:#09866d;border-color:#09866d;border-bottom-color:#086951;border-radius:18px;font-size:1rem;letter-spacing:.015em}.j-primary:hover,.primary:hover{background:#08745e}.j-secondary,.secondary{color:#176d79;border-color:#b3d8dd;border-bottom-color:#91bfc5;background:#fff;border-radius:16px}.j-text-button{color:#176f80}.j-node{background:#ffcb64;color:#573e14;border-color:#dfa234;border-radius:30px;box-shadow:0 6px 0 #e5a742;transform:rotate(-3deg)}.j-node:hover{background:#ffdb88}.j-node small{background:#186f64;color:#fff;border:0}.complete .j-node{background:#d3f5e7;color:#147557;border-color:#7cc5aa;box-shadow:0 6px 0 #8fd4b9}.locked .j-node{background:#e7eff5;color:#7c929f;border-color:#d5e0e9;box-shadow:0 5px 0 #d3dee8}.j-path{background:#fffefb;margin-top:0}.j-path-stop:before{background:#c9e2e0;width:7px;border-radius:8px}.j-node-label strong{font-size:1.05rem;color:#304e60}.j-node-label span{font-size:.875rem}.j-map{border:2px solid #cde4e7;border-radius:28px;overflow:hidden;box-shadow:0 5px 0 #deedf2}.j-unit-banner{background:#def7ef;color:#205d54;border-bottom:2px solid #afe0cf;border-radius:0}.j-unit-banner h2{color:#1a6252}.j-unit-banner p,.j-unit-banner small{color:#3e746b}.j-world-number{color:#147e66;background:#bff0de;padding:12px 14px;border-radius:18px;font-size:2rem}.j-stages{margin-bottom:22px}.j-stages button{background:#fff;border:2px solid #d5e6ef;border-radius:16px;color:#466877;min-height:62px}.j-stages button.selected{background:#fff0c9;border-color:#e8b74e;color:#75531c;box-shadow:0 3px 0 #ebc56e}.j-panel,.card{border:2px solid #d8e8ee;border-radius:24px;box-shadow:0 4px 0 #e3edf2}.j-blue-panel{background:#e9f8fc;border-color:#b6dfe7}.j-badge.earned{color:#705318;background:#fff4cd;border-color:#f2d37a}.j-course-card{border:2px solid #cae5df;border-radius:28px;box-shadow:0 5px 0 #ddeee9}.j-course-symbol{background:#fff0c9;color:#8b6424;font-family:system-ui,sans-serif;font-weight:800}.j-course-card.junior .j-course-symbol{background:#dff3fc;color:#21658f}.j-focus-card{border-color:#cfe5e9;border-radius:28px;box-shadow:0 5px 0 #e1eef2}.j-example{background:#edfaf4;border-left:5px solid #61c5a0}.j-example>span{color:#21775e}.j-choices button{border-color:#cfe1e8;border-bottom-color:#b7d1dc;color:#235269;border-radius:20px}.j-choices button:hover{background:#eefcf5;border-color:#70c3a5}.j-result-medal{background:#fff2c0}.j-challenge-card{background:#fff8e6;border-color:#efd188}.j-challenge-flag{color:#936a1c}.j-duel{background:#fff}.j-leaderboard article.is-me{background:#e8faf2;border-color:#81cdb1}.j-leaderboard b{color:#127e66}.j-run-top progress::-webkit-progress-value{background:#17a67c}.j-run-top progress::-moz-progress-bar{background:#17a67c}.j-inline-note{font-size:.875rem}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #237fb4;outline-offset:4px}button:disabled{cursor:default}
.pet-coach{display:flex;align-items:center;gap:18px;max-width:900px;margin:0 0 26px;padding:8px 20px 8px 10px;background:#e2f7f1;border:2px solid #b8e6d7;border-radius:28px}.pet-portrait{width:130px;height:130px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 5px 0 #83bea42a)}.pet-bubble{padding:14px 8px;flex:1;min-width:0}.pet-name{display:block;font-weight:800;font-size:1rem;color:#1b6957}.pet-name small{font-size:.875rem;color:#416f65;font-weight:500;margin-left:10px}.pet-speech{font-size:1.0625rem;line-height:1.85;color:#28544e;margin:6px 0}.pet-goal{display:block;color:#426b62;font-size:.875rem;margin:6px 0}.pet-touch{border:0;background:#fff;color:#22705c;border-radius:20px;min-height:44px;font-size:.875rem;padding:8px 14px;margin-top:5px}.pet-touch:hover{background:#c7efdd}.pet-compact{margin:16px auto;max-width:730px;border-radius:22px;padding:3px 14px;background:#effbf6}.pet-compact .pet-portrait{width:88px;height:100px}.pet-compact .pet-bubble{padding:8px 0}.pet-compact .pet-speech{font-size:1rem;margin:3px 0}.pet-compact .pet-touch{padding:4px 10px}.pet-pat .pet-portrait{animation:pet-greeting .65s ease-in-out 2}@keyframes pet-greeting{0%,100%{transform:rotate(0)}40%{transform:rotate(-6deg) translateY(-4px)}70%{transform:rotate(4deg)}}
body[data-screen=welcome] .shell{display:block;max-width:1200px}body[data-screen=welcome] .sidebar{display:none}body[data-screen=welcome] main{padding:32px 40px 60px}body[data-screen=welcome] #journey-stats{display:none}.welcome{max-width:900px;margin:0 auto}.welcome-heading h1{font-size:2rem;line-height:1.5;margin:10px 0}.welcome-heading p{font-size:1rem;color:#5c7080;line-height:1.8;margin-bottom:22px}.welcome .pet-coach{max-width:none}.welcome-step{display:grid;grid-template-columns:38px 1fr;gap:18px;padding:26px;background:white;border:2px solid #d7e8ed;border-radius:24px;margin:18px 0}.step-number{display:grid;place-items:center;width:36px;height:36px;background:#ffdc8b;color:#755221;border-radius:12px;font-weight:850}.welcome-step h2,.welcome-step legend{font-size:1.15rem;font-weight:800;margin:4px 0 18px;color:#24495b}.welcome-step>div:last-child{min-width:0}.welcome-step label[for=nickname]{font-size:.875rem}.welcome-step input#nickname{max-width:440px;min-height:52px;background:#f8fcff;border:2px solid #c6dfe8;border-radius:14px;font-size:1.05rem;margin-top:6px}.welcome fieldset{border:0;padding:0;margin:0;min-width:0}.welcome-courses{display:grid;grid-template-columns:1fr 1fr;gap:16px}.welcome-course{position:relative;padding:20px 18px;border:2px solid #d6e5eb;border-radius:22px;display:flex;flex-direction:column;gap:12px;background:#fbfdff;cursor:pointer;margin:0;color:#4c6778}.welcome-course input{position:absolute;top:18px;right:16px;width:22px;height:22px;accent-color:#118e70}.welcome-course strong{font-size:1.15rem;color:#23465a}.welcome-course>span:not(.course-symbol):not(.course-check){font-size:.9375rem;line-height:1.8}.welcome-course small{font-size:.875rem;line-height:1.7;color:#526e7a}.course-symbol{font-size:2rem;font-weight:850;color:#9c6a1c;background:#fff0c9;border-radius:16px;padding:10px 16px;align-self:flex-start}.welcome-course.junior .course-symbol{background:#dcf2ff;color:#226591}.welcome-course:has(input:checked){border-color:#38a782;background:#edfcf5;box-shadow:0 4px 0 #acdcca}.welcome-course.junior:has(input:checked){border-color:#3694b9;background:#eefaff;box-shadow:0 4px 0 #b1dce8}.course-check{display:none}.welcome-course:focus-within{outline:3px solid #2989ac;outline-offset:3px}.goal-option{display:flex;align-items:flex-start;gap:13px;border:2px solid #dbe8ed;border-radius:16px;padding:16px;margin:10px 0;cursor:pointer;background:#fcfeff}.goal-option input{width:21px;height:21px;margin:4px 0;flex-shrink:0;accent-color:#0e8a6d}.goal-option strong{display:block;font-size:1rem;color:#294c5d}.goal-option small{display:block;font-size:.875rem;line-height:1.8;color:#506d7b;margin-top:5px}.goal-option:has(input:checked){border-color:#57b895;background:#ecfcf3}.form-note{color:#5c7280;font-size:.875rem;line-height:1.9;margin:10px 0 0}.welcome-actions{display:flex;gap:16px;align-items:center;margin:24px 0}.welcome-actions .j-primary{padding:16px 28px;min-width:245px}.welcome-existing{margin:28px 0;background:#fff;border:2px dashed #b7d9e1;padding:24px;border-radius:20px}.welcome-existing h2{font-size:1.125rem}.welcome-existing select{width:auto;min-width:190px;margin:8px 14px 8px 0}.welcome-local{font-size:.875rem;line-height:1.8;color:#59717c}.prototype-badge{background:#eff7fa;border-color:#d4e6ed;color:#5d7986}
@media(max-width:1100px){.shell{grid-template-columns:190px minmax(0,1fr)}main{padding:24px}.pet-coach{gap:12px}.pet-portrait{width:108px;height:118px}.j-heading h1{font-size:1.65rem}.topbar{padding-left:18px;padding-right:18px}.brand small{font-size:.8125rem}}@media(max-width:850px){.shell{display:block}.pet-coach{max-width:none}.welcome-courses{gap:12px}.sidebar nav button{min-height:46px}.welcome-step{padding:22px}.pet-compact{max-width:730px}}@media(max-width:600px){body[data-screen=welcome] main{padding:24px 14px 45px}main{padding:22px 14px 45px}.welcome-heading h1{font-size:1.6rem}.welcome-step{grid-template-columns:28px minmax(0,1fr);gap:10px;padding:20px 14px}.step-number{width:28px;height:30px;border-radius:9px}.welcome-courses{grid-template-columns:1fr}.welcome-course{padding:20px}.welcome-step legend{font-size:1.075rem;line-height:1.7}.welcome-actions{flex-wrap:wrap}.welcome-actions .j-primary{width:100%;min-width:0}.welcome-existing select{width:100%}.pet-coach{gap:6px;padding:8px 12px 8px 2px;border-radius:22px}.pet-portrait{width:90px;height:116px}.pet-bubble{padding:8px 3px}.pet-name small{display:none}.pet-speech{font-size:1rem;line-height:1.8}.pet-compact .pet-portrait{width:70px;height:96px}.pet-compact .pet-speech{font-size:.9375rem}.pet-touch{font-size:.875rem}.pet-goal{font-size:.875rem}.j-node-label strong{font-size:1rem}.welcome-local{padding:0 6px}}@media(prefers-reduced-motion:reduce){.pet-pat .pet-portrait{animation:none}}