/* Байт: спокойные поверхности, ясные состояния и мобильные задания. */
:root { --font-display: 'Manrope', -apple-system, sans-serif; --bg:#f3f6fa; --bg-card-2:#f5f8fc; --bg-hover:#edf2f8; --border:#e0e7f0; --text:#203148; --text-2:#5a6c82; --text-3:#64758b; --accent:#4267c3; --accent-2:#6b61bc; --accent-soft:#557add12; --grad:linear-gradient(120deg,#557add,#7c73d7); --shadow:0 4px 18px #18385309; --shadow-lg:0 16px 48px #18385320; --glow:0 4px 16px #557add24; }
html[data-theme="dark"] { --bg:#111a29; --bg-card:#192438; --bg-card-2:#1f2c43; --bg-hover:#27354d; --border:#304057; --text:#ebf2fb; --text-2:#a6b7cc; --text-3:#9aadc6; --accent:#91afff; --accent-soft:#91afff15; --shadow:0 6px 22px #0002; --shadow-lg:0 16px 48px #0005; --grad:linear-gradient(120deg,#627fdd,#8873cf); }
.bg-decor { background:radial-gradient(ellipse at 10% 5%,#86c9e50d,transparent 60%); }
.page-title,.overlay-title,h1,h2 { letter-spacing:-.035em; font-weight:800; }
.btn { border-radius:15px; }
.btn[hidden] { display:none; }
.btn-primary { box-shadow:0 4px 0 #405caa; }
.btn-primary:active { box-shadow:0 1px 0 #405caa; }
.sidebar { background:var(--bg-card); }
.profile-chip { padding:10px; gap:9px; }
.profile-chip .sync-dot { box-shadow:none; width:7px; height:7px; }
.avatar-head { border-radius:50%; background:#eaf4ff; padding:0; flex:none; }
.avatar-head .byte { display:block; }
.path-wrap { max-width:520px; padding-right:0; box-sizing:border-box; }
.path-hero { box-shadow:none; border:1px solid var(--border); border-radius:24px; background:var(--bg-card); }
.unit { margin-bottom:12px; }
.unit-header { color:var(--text); background:var(--bg-card); border:1px solid var(--border); border-left:4px solid var(--unit-color); box-shadow:none; padding:20px 22px; border-radius:22px; margin:24px 0 12px; }
.unit-header::after { display:none; }
.unit-kicker { color:var(--unit-color); letter-spacing:1.3px; font-size:10px; opacity:1; }
.unit-title { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:800; margin:7px 0; line-height:1.3; }
.unit-title .art-icon { color:var(--unit-color); flex:none; }
.unit-sub { color:var(--text-2); line-height:1.65; }
.unit-progress .progress-bar { background:var(--bg-hover); height:6px; }
.unit-progress .progress-fill { background:var(--unit-color); }
.unit-progress-text { color:var(--text-2); font-size:11px; }
.unit-locked { opacity:.72; filter:none; }
.path-nodes { background:linear-gradient(165deg,color-mix(in srgb,var(--unit-color) 8%,var(--bg-card)),var(--bg-card)); border:1px solid color-mix(in srgb,var(--unit-color) 12%,var(--border)); border-radius:36px; padding:36px 0 34px; gap:20px; box-shadow:0 8px 0 color-mix(in srgb,var(--unit-color) 7%,var(--bg-hover)); }
.path-deco { opacity:.1; font-size:24px!important; }
.node-row { margin-bottom:18px; }
.node-row:has(.node.current) { margin-top:30px; margin-bottom:18px; }
.node { width:72px; height:66px; }
.node-disc { background:linear-gradient(150deg,color-mix(in srgb,var(--node-color) 82%,white),var(--node-color)); box-shadow:0 5px 0 var(--node-shadow),inset 0 2px 0 #ffffff45; }
.node-disc .ic { filter:none; }
.node.current::before,.node.current::after,.node-ring { display:none; }
.node-badge { top:-34px; background:var(--bg-card); color:var(--node-color); border:0; box-shadow:0 2px 8px #1838530a; padding:3px 10px; font-size:10px; animation:none; }
.node-level-dots { position:absolute; display:flex; gap:4px; bottom:-15px; left:50%; transform:translateX(-50%); }
.node-level-dots i { width:5px; height:5px; border-radius:50%; background:color-mix(in srgb,var(--node-color) 18%,var(--bg-card)); }
.node-level-dots i.filled { background:var(--accent); }
.node.gold { --node-color:#efb544!important; --node-shadow:#bf842c!important; }
.node.gold .node-disc,.node.chest:not(.locked) .node-disc { background:linear-gradient(150deg,#ffdb83,#e9af39); box-shadow:0 5px 0 #bd8128,inset 0 2px 0 #fff6; }
.node.gold:active .node-disc { box-shadow:0 1px 0 #bd8128; }
.node.locked:not(.done) .node-disc { background:var(--bg-card); box-shadow:0 4px 0 var(--border); border:1px solid var(--border); color:var(--text-3); }
.node-stars { filter:none; }
.node.chest { width:78px; height:68px; }
.node.chest .node-disc { border-radius:22px; }
.node-side-disc { box-shadow:0 4px 0 var(--border); }
.node-side-label { font-weight:700; color:var(--text-2); }
.unit-bridge { padding:20px 0 0; }
.unit-now { box-shadow:0 3px 12px #18385312; border-radius:12px; }
.ses-q-head { align-items:flex-start; gap:12px; }
.ses-q-head > .ses-byte { flex:0 0 46px; width:46px; }
.ses-q-head > .ses-byte .byte { width:46px; height:46px; }
.ses-q-head > div:not(.ses-byte) { flex:1; min-width:0; }
.quiz-question { font-size:clamp(19px,4.9vw,24px); line-height:1.4; font-weight:800; overflow-wrap:break-word; }
.quiz-question code { display:inline-block; max-width:100%; overflow-x:auto; white-space:pre; word-break:normal; overflow-wrap:normal; vertical-align:middle; font-size:.82em; padding:2px 6px; }
.ses-label { font-size:10px; letter-spacing:1.3px; margin-bottom:7px; }
.ses-question { border-radius:22px; box-shadow:none; padding:20px; }
.quiz-option { border-width:1.5px; border-radius:16px; font-size:16px; padding:16px 18px; box-shadow:0 2px 0 var(--border); }
.ses-top { gap:10px; }
.ses-mode { font-size:12px; }
.ses-checkpoint-rule { display:block; margin-top:5px; font-size:11px; line-height:1.35; color:var(--muted); }
.practice-help { display:flex; flex-direction:column; align-items:center; gap:4px; padding:2px 0; text-align:center; }
.practice-help > span { color:var(--text-3); font-size:11px; }
.practice-later { background:none; border:0; color:var(--text-2); font:inherit; font-size:12px; text-decoration:underline; text-underline-offset:3px; padding:7px; cursor:pointer; }
.practice-later:hover { color:var(--accent); }
.practice-later:focus-visible { outline:2px solid var(--accent); border-radius:5px; }
.ses-end { background:var(--bg-card); border:1px solid var(--border); border-radius:28px; padding:26px 22px; }
.ses-end h2 { font-size:28px; }
.ses-end-stats { flex-wrap:wrap; gap:10px; }
.ses-end-stats > span { background:var(--bg-card-2); border-radius:12px; padding:8px 12px; }
.ses-end .ses-star.on { animation:reward-star .7s cubic-bezier(.2,1.3,.4,1) backwards; }
.ses-end .ses-star:nth-child(2) { animation-delay:.13s; }
.ses-end .ses-star:nth-child(3) { animation-delay:.26s; }
@keyframes reward-star { from { opacity:0; transform:translateY(15px) scale(.3) rotate(-20deg); } to { opacity:1; transform:none; } }
@media(max-width:560px) { .unit-header { padding:17px 18px; } .unit-title { font-size:18px; } .path-nodes { padding-top:30px; } .ses-question { padding:17px; } .ses-q-head > .ses-byte { flex-basis:38px; width:38px; } .ses-q-head > .ses-byte .byte { width:38px; height:38px; } .ses-q-head { gap:10px; } .overlay-card { border-radius:24px; } }
@media(prefers-reduced-motion:reduce) { .ses-end .ses-star.on { animation:none; } }
/* Social and rewards share the same compact card language. */
.community-page { max-width:740px; margin:0 auto; }
.community-page h2 { font-size:21px; line-height:1.35; margin-bottom:12px; }
.page-heading,.section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.section-heading h2 { margin:0; }
.section-heading>span { color:var(--text-3); font-weight:800; }
.eyebrow { font-size:10px; letter-spacing:1.5px; color:var(--text-3); font-weight:800; }
.community-card,.friend-invite,.add-friend,.boost-card,.community-empty { background:var(--bg-card); border:1px solid var(--border); border-radius:24px; padding:22px; margin-bottom:18px; }
.community-empty { text-align:center; padding:28px; }
.community-empty>.byte,.community-empty>.chest-art { margin:0 auto 16px; }
.community-empty p { color:var(--text-2); margin:10px 0 22px; }
.community-empty .btn { margin:auto; }
.friend-invite { display:flex; align-items:center; justify-content:space-between; gap:12px; background:linear-gradient(135deg,var(--bg-card),var(--bg-card-2)); }
.friend-code { display:block; font:800 24px var(--font-mono); letter-spacing:1px; color:var(--text); }
.friend-invite .btn { display:flex; gap:8px; align-items:center; }
.add-friend label { display:block; font-weight:800; margin-bottom:12px; }
.add-friend>div { display:flex; gap:10px; }
.add-friend input { min-width:0; flex:1; font-family:var(--font-mono); text-transform:uppercase; }
.form-note { color:var(--text-2); font-size:12px; line-height:1.6; margin:12px 0 0; }
.friend-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }
.friend-row:last-child { border:0; padding-bottom:0; }
.friend-info { flex:1; min-width:0; }
.friend-info b { display:block; overflow-wrap:anywhere; }
.friend-info span { display:block; color:var(--text-3); font-size:11px; }
.friend-actions { display:flex; align-items:center; gap:6px; }
.icon-button { display:grid; place-items:center; flex:none; width:32px; height:32px; border:0; border-radius:10px; color:var(--text-3); background:var(--bg-card-2); cursor:pointer; }
.icon-button:hover { background:var(--red-soft); color:var(--red); }
.friend-empty-art { text-align:center; color:var(--text-3); padding:18px 0 8px; }
.friend-empty-art svg { margin:0 auto 14px; color:var(--accent); }
.circle-card { background:linear-gradient(140deg,var(--bg-card),color-mix(in srgb,#f5b962 8%,var(--bg-card))); }
.circle-card>p { color:var(--text-2); font-size:14px; }
.team-options { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.team-options label { display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:14px; padding:10px; cursor:pointer; }
.team-options label:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.team-options input { accent-color:var(--accent); }
.team-options span { font-size:12px; font-weight:700; }
.team-flames { display:flex; justify-content:center; gap:22px; margin:22px 0; }
.team-person { flex:1; max-width:135px; min-width:0; text-align:center; }
.team-person>.ic { margin:0 auto 10px; }
.team-person span { display:block; font-size:13px; font-weight:800; overflow-wrap:anywhere; }
.team-person small { display:block; font-size:10px; color:var(--text-3); }
.team-total { text-align:center; font-size:17px; color:var(--text-2); }
.team-total b { font-size:34px; color:var(--text); }
.team-buttons { display:flex; justify-content:center; gap:10px; margin-top:14px; }
.map-shortcuts { display:flex; gap:12px; margin-top:14px; }
.map-shortcuts a { display:flex; align-items:center; justify-content:center; gap:9px; flex:1; text-decoration:none; font-weight:800; font-size:13px; background:var(--bg-card); padding:13px; border:1px solid var(--border); border-radius:16px; color:var(--text-2); }
.map-shortcuts a:hover { color:var(--accent); border-color:var(--accent); }
.boost-card { display:grid; grid-template-columns:96px 1fr; gap:20px; background:linear-gradient(135deg,color-mix(in srgb,#b39beb 9%,var(--bg-card)),var(--bg-card)); }
.boost-art { display:grid; place-content:center; color:#9373db; position:relative; height:110px; border-radius:28px; background:color-mix(in srgb,#b39beb 15%,var(--bg-card)); }
.boost-art b { font-size:20px; text-align:center; line-height:1; }
.boost-card p { color:var(--text-2); font-size:13px; }
.boost-stock { margin:15px 0; font-size:13px; color:var(--text-2); }
.boost-timer { display:block; font-size:18px; font-weight:800; color:var(--accent); margin-top:12px; font-variant-numeric:tabular-nums; }
.boost-timer:empty { display:none; }
.boost-status { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; padding:13px 10px; border-radius:15px; background:var(--accent-soft); color:var(--accent); font-size:12px; text-decoration:none; font-variant-numeric:tabular-nums; }
.boost-status[hidden] { display:none; }
.chest-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.chest-grid>.community-empty { grid-column:1/-1; margin:0; }
.chest-art { display:block; color:#c9892c; }
.chest-art svg { margin:auto; filter:drop-shadow(0 5px 0 #b5792018); }
.reward-chest { border:1px solid var(--border); border-radius:24px; background:linear-gradient(160deg,var(--bg-card),color-mix(in srgb,#f4c05f 8%,var(--bg-card))); color:var(--text); padding:22px 14px; font:inherit; cursor:pointer; transition:transform .2s,box-shadow .2s; }
.reward-chest:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.reward-chest>b { display:block; margin:12px 0 5px; font-size:15px; }
.reward-chest>span:last-child { display:block; font-size:12px; color:#aa731e; font-weight:800; }
.celebration { position:fixed; z-index:220; left:50%; top:max(16px,env(safe-area-inset-top)); transform:translateX(-50%); width:min(420px,calc(100vw - 24px)); display:flex; align-items:center; gap:14px; padding:16px 36px 16px 16px; background:var(--bg-card); border:1px solid var(--border); border-radius:23px; box-shadow:var(--shadow-lg); animation:celebration-in .5s cubic-bezier(.2,1.2,.35,1); pointer-events:auto; }
.celebration b { display:block; font-size:15px; }
.celebration p { font-size:12px; color:var(--text-2); margin-top:4px; }
.celebration>button { position:absolute; right:10px; top:10px; background:none; border:0; color:var(--text-3); cursor:pointer; padding:4px; }
.celebration-art { position:relative; flex:none; width:68px; height:72px; display:grid; place-items:center; color:#d5a244; }
.celebration-art>.ic { animation:celebration-art .9s ease-out; }
.celebrate-boost .celebration-art { color:#9373db; }
.celebrate-chest .chest-lid { transform-origin:12px 11px; animation:chest-open 1.5s ease-out; }
@keyframes chest-open { 0%,20% { transform:none; } 55%,85% { transform:translateY(-3px) rotate(-8deg); } 100% { transform:none; } }
.frost-shell { position:absolute; color:#8fd9f2; z-index:2; animation:frost-thaw 1.5s ease-in forwards; }
.celebrate-thaw .celebration-art>.ic { animation-delay:.45s; animation-fill-mode:backwards; }
.celebration-art>i { position:absolute; width:5px; height:5px; border-radius:2px; background:#e9b956; animation:spark-away 1.1s ease-out forwards; top:20px; left:2px; }
.celebration-art>i:nth-of-type(2) { left:auto; right:0; top:40px; animation-delay:.15s; }
.celebration-art>i:nth-of-type(3) { left:45px; top:5px; animation-delay:.3s; }
.avatar-head img { width:100%; height:100%; object-fit:contain; display:block; }
.byte-illustrated .byte-all { transform-origin:100px 180px; }
.byte-canvas-layer { opacity:0; pointer-events:none; }
.byte-gpu-ready .byte-canvas-layer { opacity:1; }
.byte-gpu-ready .byte-still { opacity:0; }
/* One centred notification column; long project names wrap inside the card. */
.toasts { left:50%; right:auto; width:min(420px,calc(100% - 32px)); transform:translateX(-50%); pointer-events:none; }
.toast { width:100%; min-width:0; pointer-events:auto; font-weight:700; }
.toast>span:first-child { flex:none; display:flex; align-items:center; }
.toast-xp { min-width:0; overflow-wrap:anywhere; }
@media(max-width:760px) {
  .toasts { bottom:calc(84px + env(safe-area-inset-bottom,0px)); }
  .in-lesson .toasts { bottom:calc(110px + env(safe-area-inset-bottom,0px)); }
  .toast { padding:14px 16px; border-radius:20px; font-size:13px; animation-name:toast-rise; }
  .toast.out { animation-name:toast-fade; }
}
@keyframes toast-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes toast-fade { to { opacity:0; transform:translateY(10px); } }
@keyframes celebration-in { from { opacity:0; transform:translate(-50%,-20px) scale(.94); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
@keyframes celebration-art { from { opacity:.3; transform:scale(.55) rotate(-6deg); } 65% { opacity:1; transform:scale(1.1); } to { transform:none; } }
@keyframes frost-thaw { 0%,30% { opacity:1; transform:scale(1); } 70% { opacity:.5; transform:scale(1.12) rotate(8deg); } 100% { opacity:0; transform:translateY(10px) scale(1.3); } }
@keyframes spark-away { from { opacity:0; transform:translateY(8px) scale(.5); } 30% { opacity:1; } to { opacity:0; transform:translateY(-25px) rotate(50deg); } }
@media(max-width:560px) { .community-card,.add-friend,.boost-card,.friend-invite { padding:18px; border-radius:21px; } .friend-code { font-size:21px; } .friend-invite .btn { font-size:11px; padding:11px; } .boost-card { grid-template-columns:66px 1fr; gap:14px; } .boost-art { height:90px; border-radius:20px; } .boost-card h2 { font-size:19px; } .boost-card .btn { font-size:12px; padding:12px; } .team-flames { gap:12px; } }
@media(prefers-reduced-motion:reduce) { .celebration,.celebration-art>.ic,.celebration-art>i,.celebrate-chest .chest-lid { animation:none; } .celebration-art>i,.frost-shell { display:none; } }
.unit-challenge{display:inline-flex;align-items:center;gap:7px;margin:15px 0 5px;padding:12px 16px;background:var(--bg-card);color:var(--text);border:1.5px solid var(--border);box-shadow:0 3px 0 var(--border);border-radius:14px;font-size:13px;font-weight:800;text-decoration:none;max-width:100%}
.node.verified .node-disc{background:linear-gradient(150deg,#d4eee3,#b4ddcd);color:#3a8a71;box-shadow:0 5px 0 #94c2b1}
.node-verified{position:absolute;top:calc(100% + 17px);left:50%;transform:translateX(-50%);width:150px;font-size:10px;color:#528975;white-space:normal;line-height:1.25;font-weight:700}
.challenge-page{max-width:660px;margin:auto;padding:18px 18px calc(40px + env(safe-area-inset-bottom));min-height:100dvh}
.challenge-intro{text-align:center;max-width:640px}.challenge-intro h1{font-size:clamp(25px,6vw,36px);line-height:1.15;margin:16px 0}.challenge-intro>p{color:var(--text-2);line-height:1.6}.challenge-intro>.btn{margin:8px;max-width:100%}
.challenge-art{width:112px;height:112px;margin:12px auto 24px;display:grid;place-content:center;border-radius:34px;background:linear-gradient(145deg,#e3f5ed,#e6efff);color:#339d86;position:relative}.challenge-art>.ic-ember{position:absolute;right:7px;top:8px}
.challenge-rules{padding:24px;border:1px solid var(--border);background:var(--bg-card);border-radius:24px;margin:24px 0;text-align:left;line-height:1.65}.challenge-rules>b{font-size:19px}.challenge-rules p{color:var(--text-2);margin:12px 0}.exam-reward{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:800;color:#99671f}
.exam-top{display:flex;align-items:center;gap:16px;margin-bottom:20px}.exam-top .ses-bar{flex:1}.exam-top>b{font-size:14px;white-space:nowrap}.exam-question{padding:24px}.exam-question h2{font-size:22px;line-height:1.45;margin:16px 0}.exam-question h2 code{display:inline-block;max-width:100%;vertical-align:bottom;overflow:auto;white-space:pre;font-size:.88em}.exam-question>.btn{width:100%;margin-top:22px}.exam-question pre{max-width:100%;overflow-x:auto}.exam-question .form-input{width:100%}.exam-question .quiz-options{margin-top:20px}#examStatus{line-height:1.5;color:var(--text-2)}
.lesson-receipt{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;max-width:460px;margin:20px auto;padding:18px;background:var(--bg-card);border:1px solid var(--border);border-radius:22px;color:#926628}.lesson-receipt:empty{display:none}.lesson-receipt>span{flex-basis:100%;font-size:13px;line-height:1.5;color:var(--text-2)}
.spark-wallet{display:flex;align-items:center;gap:18px;padding:22px 24px;margin:24px 0;border-radius:26px;background:linear-gradient(135deg,#fff6da,#ffedbf);color:#825c24;border:1px solid #eddba9}.spark-wallet>div{display:flex;flex-direction:column;gap:3px}.spark-wallet b{font-size:32px;line-height:1.1}.spark-wallet span{font-size:12px}.spark-wallet p{font-size:12px;line-height:1.7;margin-left:auto}.cosmetic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}.cosmetic-card{border:1px solid var(--border);border-radius:24px;background:var(--bg-card);padding:16px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;min-width:0}.cosmetic-card>b{font-size:14px;min-height:36px}.cosmetic-preview{height:90px;width:100%;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#dcf1e8,#e6dffe)}.cosmetic-sunset .cosmetic-preview{background:linear-gradient(135deg,#ffe4c1,#f6d8df)}.cosmetic-ocean .cosmetic-preview{background:linear-gradient(135deg,#cfe7f9,#caedeb)}.cosmetic-card .btn{white-space:normal;width:100%;min-width:0;padding:10px 8px}.reward-shop-row{display:flex;gap:12px;flex-wrap:wrap}.reward-history{padding:20px 0;color:var(--text-2);font-size:13px}.reward-history p{display:flex;align-items:center;gap:8px}.reward-history summary{cursor:pointer;font-weight:700}
html[data-cosmetic="aurora"] .path-hero{background:linear-gradient(135deg,rgba(165,227,204,.4),rgba(200,175,243,.35))}
html[data-cosmetic="sunset"] .path-hero{background:linear-gradient(135deg,rgba(255,200,132,.4),rgba(241,160,179,.3))}
html[data-cosmetic="ocean"] .path-hero{background:linear-gradient(135deg,rgba(132,194,243,.4),rgba(128,214,201,.35))}
html[data-cosmetic]:not([data-cosmetic="default"]) .path-hero-mascot{border-radius:50%;box-shadow:0 0 28px rgba(117,174,230,.25)}
.celebrate-gold .celebration-art{color:#e8ad30}.celebrate-challenge .celebration-art{color:#339d86}.celebrate-gold .ic-crown{animation:crown-arrive .9s cubic-bezier(.22,.8,.3,1) both}.celebrate-chest .chest-lid{transform-box:fill-box;transform-origin:50% 100%;animation:chest-open .8s ease-out both}
@keyframes crown-arrive{0%{transform:translateY(-20px) scale(.75);opacity:0}60%{transform:translateY(2px) scale(1.06)}100%{transform:none;opacity:1}}
@keyframes chest-open{0%{transform:translateY(0) rotate(0)}70%,100%{transform:translateY(-3px) rotate(-12deg)}}
@media(max-width:540px){.cosmetic-grid{grid-template-columns:1fr}.cosmetic-card{display:grid;grid-template-columns:78px 1fr;gap:12px;text-align:left}.cosmetic-preview{grid-row:span 2;height:90px}.cosmetic-preview>.ic{display:none}.cosmetic-card>b{min-height:0}.cosmetic-card .btn{width:auto;justify-self:start;padding:10px 18px}.spark-wallet{padding:18px;gap:12px}.spark-wallet b{font-size:28px}.challenge-page{padding:14px 14px 36px}.exam-question{padding:20px}.exam-question h2{font-size:20px}.challenge-rules{padding:20px}.unit-challenge{font-size:12px}}
@media(prefers-reduced-motion:reduce){.celebration *, .celebrate-gold .ic-crown,.celebrate-chest .chest-lid{animation:none!important}}
.celebrate-circle .celebration-art{display:flex;gap:0;align-items:center;justify-content:center;color:#ed9742}.celebrate-circle .ic-fire{flex-shrink:0;animation:flames-meet .9s ease-out both}.celebrate-circle .ic-fire:nth-child(2){animation-delay:.12s}.celebrate-circle .ic-fire:nth-child(3){animation-delay:.24s}@keyframes flames-meet{from{opacity:0;transform:translateY(15px) scale(.6)}to{opacity:1;transform:none}}
/* Summary content never shrinks into the illustration or reward card. */
.ses-end.lesson-summary {width:min(540px,100%);min-height:100dvh;margin:0 auto;padding:24px 22px 30px;border:0;border-radius:0;background:transparent;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:16px;text-align:center}
.lesson-summary>* {flex-shrink:0;margin:0!important}
.lesson-finish-hero {position:relative;width:156px;height:156px;display:grid;place-items:center;align-self:center;isolation:isolate}
.lesson-finish-hero>.byte {width:156px!important;height:156px!important}
.lesson-finish-hero::before {content:"";position:absolute;inset:18%;background:radial-gradient(ellipse,#99ddea55,transparent 70%);border-radius:50%;z-index:-1}
.summary-spark {position:absolute;right:0;top:24px;color:#edb648;pointer-events:none;animation:summary-spark .8s ease-out both}
.summary-spark:last-child {left:0;right:auto;top:96px;animation-delay:.12s}
.lesson-summary h1,.lesson-summary h2 {font-size:clamp(25px,6.8vw,32px);line-height:1.2;letter-spacing:-.035em}
.lesson-summary .eyebrow {font-size:10px;letter-spacing:.12em}
.lesson-summary .ses-end-sub {font-size:14px;line-height:1.6;color:var(--text-2)}
.lesson-summary-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lesson-summary-stats>div {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;padding:14px 6px;background:var(--bg-card);border:1px solid var(--border);border-radius:18px;color:#5b84ab}
.lesson-summary-stats b {font-size:22px;line-height:1.15;color:var(--text);font-variant-numeric:tabular-nums}
.lesson-summary-stats span {font-size:10px;line-height:1.45;color:var(--text-2)}
.lesson-summary .lesson-receipt {width:100%;min-height:0;display:flex;flex-direction:column;gap:12px;padding:20px 16px;border:1px solid #efd591;border-radius:22px;background:linear-gradient(135deg,#fff8e6,#fff0c8);color:#805b21;box-sizing:border-box}
.lesson-summary .lesson-receipt>span {flex-basis:auto;font-size:12px;line-height:1.5;color:#836e4e}
.receipt-xp {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;width:100%}
.receipt-xp>b {font-size:34px;line-height:1.2;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.receipt-xp small {width:100%;font-size:9px;letter-spacing:1px;font-weight:800;color:#98763d}
.receipt-sparks {display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800}
.summary-note {font-size:11px;line-height:1.6;color:var(--text-2)}
.lesson-summary .ses-stars {display:none}
.lesson-summary .ses-crown {color:#e5b038}
.lesson-summary .ses-crown .ic {width:28px;height:28px}
.lesson-summary .ses-end-actions {gap:12px}
.lesson-summary .ses-end-actions>.btn {padding:14px;min-height:48px}
@keyframes summary-spark {from{opacity:0;transform:translateY(12px) scale(.4)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.summary-spark{animation:none}}

/* Fixed, native HTML mascot viewport; no foreignObject or SVG CSS sizing. */
.byte.byte-illustrated {position:relative;display:inline-block;vertical-align:middle;flex-shrink:0;max-width:100%;overflow:hidden;isolation:isolate;contain:layout paint;line-height:0;touch-action:manipulation;border-radius:8px}
.byte-stage {position:absolute;inset:0;display:block;transform-origin:50% 50%}
.byte .byte-art,.byte .byte-canvas {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;margin:0}
.byte .byte-canvas-layer {opacity:0}
.byte.byte-gpu-ready .byte-canvas-layer {opacity:1}
.byte.byte-gpu-ready .byte-still {opacity:0}
.byte:focus-visible {outline:3px solid #5c80d4;outline-offset:3px}
button,a,[role=button] {-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus:not(:focus-visible),a:focus:not(:focus-visible) {outline:none}
.challenge-result-actions {display:grid;gap:12px;margin-top:24px}
.challenge-result-actions .btn {width:100%;min-height:48px}

/* Quiet, readable controls and clear spacing along the learning path. */
.hud-wallet {background:#fff8e5;border-color:#f0dfae;color:#927030;min-width:62px}
.hud-lives {background:#edf1fc;border-color:#dce3f4;color:#6676ca}
.ses-energy {display:flex;align-items:center;gap:5px;border:0;background:transparent;color:#6878cc;padding:6px;font:inherit;cursor:pointer}
.nav .nav-item {min-width:0}
.node-stars {display:none}
.node-level-dots {bottom:-30px;gap:4px;align-items:center;white-space:nowrap;padding:4px 7px;background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:10px;box-shadow:0 2px 3px #14223612;line-height:1}
.node-level-dots i {width:8px;height:8px;border-radius:50%;background:var(--border)}
.node-level-dots b {font-size:11px;font-weight:800;margin-left:3px}
.node-card {margin:32px auto 28px;box-shadow:0 5px 0 #dfe7eb55}
.node-card-title {font-size:17px;line-height:1.45;margin:10px 0 12px}
.node-card-go {margin-top:10px}
.node-row {scroll-margin-top:180px}
.path-nodes {padding-top:50px;padding-bottom:40px}
.node-card+.node-row {margin-top:12px}
.btn {border-radius:16px;letter-spacing:0;line-height:1.3}
.btn-primary {background:linear-gradient(120deg,#4b66bb,#6956b0);box-shadow:0 4px 0 #4d63b1}
.btn-secondary {box-shadow:0 3px 0 color-mix(in srgb,var(--border) 65%,transparent)}
.btn:active {transform:translateY(2px)}
.admin-search label {display:block;margin:12px 0 8px;font-size:13px}
.admin-search>div {display:flex;gap:10px}.admin-search input {min-width:0;flex:1}
.admin-person {margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.admin-person-actions {display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.admin-person-actions .btn {flex:1;min-width:140px}
.admin-switch {display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.admin-switch input {width:22px;height:22px;accent-color:#647bd2}
@media(max-width:680px){.nav .nav-item{flex:1;padding:9px 3px}.nav .nav-label{font-size:10px}.sidebar-footer{gap:8px}.hud{gap:7px}.hud-cell{padding:8px 9px}.hud-wallet{min-width:60px}.hud-value{font-size:13px}.theme-toggle{min-width:36px}.admin-search>div{flex-wrap:wrap}.admin-search .btn{min-height:44px}.node-card{width:calc(100% - 36px)}}

.project-stars{display:flex;gap:2px;justify-content:center;color:#d6dde6;margin-top:8px}.project-stars .earned{color:#e6b448}
.pl-intro{max-width:480px;margin:20px auto;padding:24px;text-align:center}.pl-mascot{display:flex;justify-content:center;margin-bottom:22px}.pl-actions{display:flex;flex-direction:column;gap:14px;margin-top:24px}.pl-actions .btn{min-height:50px}.pl-sub{font-size:15px;line-height:1.65}.pl-intro h1{font-size:30px}

.ses-with-byte {display:block;position:relative}
.ses-with-byte>.ses-byte {position:absolute;top:16px;left:16px;width:40px;height:40px;z-index:1}
.ses-with-byte>.ses-byte .byte {width:40px!important;height:40px!important}
.ses-with-byte>.ses-theory {width:100%;padding:22px}
.ses-with-byte>.ses-theory>h2:first-child,.ses-with-byte>.ses-theory>h3:first-child {padding-left:48px;min-height:36px;display:flex;align-items:center;margin-bottom:20px}
.byte.byte-react.byte-happy,.byte.byte-react.byte-sad {animation:none!important}
@media(max-width:480px){.admin-person-actions{flex-direction:column}.admin-person-actions .btn{width:100%;min-height:48px}}

/* Reading and summary scroll independently from the fixed lesson controls. */
.ses-with-byte>.ses-theory>h2:first-child,.ses-with-byte>.ses-theory>h3:first-child{display:block;line-height:1.45}
.ses-theory pre,.ses-theory-scroll pre{white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4;line-height:1.65}
.ses-theory pre code,.ses-theory-scroll pre code{white-space:inherit}
html.in-lesson .ses-body.has-more::after{display:none}
.lesson-scroll-hint{flex:none;align-self:center;border:0;background:var(--accent-soft);color:var(--accent);border-radius:12px;padding:8px 16px;font:inherit;font-size:12px;font-weight:800;min-height:36px}
html.in-summary .app{height:auto;min-height:var(--vvh,100dvh);overflow:visible}
html.in-summary #main{height:auto;min-height:var(--vvh,100dvh);overflow:visible}
html.in-summary .lesson-summary{min-height:0;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
html,body{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%}
@media(pointer:coarse){input,textarea,select,.editor-input{font-size:16px!important}}
.energy-countdown{display:flex;flex-direction:column;align-items:center;gap:8px;margin:24px 0;padding:24px;background:var(--accent-soft);border-radius:24px}
.energy-countdown b{font-size:36px;font-variant-numeric:tabular-nums;letter-spacing:.03em}.energy-countdown span{font-size:13px;color:var(--text-2)}
.page-back{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;margin:4px 0 14px;border:1px solid var(--border);border-radius:14px;color:var(--text-2);background:var(--bg-card);font:inherit;font-size:13px;font-weight:800}

/* Readable examples: code, output and explanations share one section. */
.ses-theory .code-caption,.ses-theory-scroll .code-caption{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--text-2);margin:18px 0 8px}
.ses-theory pre.code-output,.ses-theory-scroll pre.code-output{background:var(--bg-hover);color:var(--text);border:1px solid var(--border);box-shadow:none;margin-top:0}
.ses-theory pre.code-output code,.ses-theory-scroll pre.code-output code{color:inherit;background:none}
.code-notes{border-left:3px solid var(--accent);padding:2px 0 2px 14px;margin:18px 0;font-size:13px;line-height:1.65;color:var(--text-2)}
.code-notes p{margin:8px 0}.code-notes b{color:var(--text)}
.ses-theory pre,.ses-theory-scroll pre{min-width:0;max-width:100%;box-sizing:border-box}

.daily-map-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:17px;margin:16px 0;background:var(--bg-card);border:1px solid var(--border);border-radius:21px;color:var(--text);text-decoration:none}
.daily-map-art{display:grid;place-items:center;width:42px;height:42px;background:var(--accent-soft);border-radius:14px;color:var(--accent)}
.daily-map-card>span>span{display:block;font-size:11px;color:var(--text-2);margin-top:5px}.daily-map-card b{font-size:13px}.daily-map-card>strong{font-size:11px;color:var(--accent)}
.daily-meter{display:block;height:6px;background:var(--bg-hover);border-radius:20px;overflow:hidden;margin-top:9px}.daily-meter i{display:block;height:100%;border-radius:inherit;background:var(--grad);transition:width .4s ease}.daily-meter.large{height:10px;margin:18px 0}
.goal-choices{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.goal-choice{flex:1 1 90px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:70px;padding:12px;border:2px solid var(--border);border-radius:16px;background:var(--bg-card-2);color:var(--text);font:inherit;font-size:14px;cursor:pointer}.goal-choice span{font-size:11px;color:var(--text-2)}.goal-choice.selected{border-color:var(--accent);background:var(--accent-soft)}.goals-page h2{font-size:20px}.goals-page .community-card>.btn{margin-top:12px}
.quest-row{display:flex;gap:13px;align-items:center;padding:18px 0;color:var(--text);text-decoration:none;border-top:1px solid var(--border)}.quest-row>.ic,.quest-row>.art-icon{flex:none;color:var(--accent)}.quest-row>span{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px}.quest-row b{font-size:13px}.quest-row small{color:var(--text-2)}.quest-row strong{font-size:11px;color:var(--accent);white-space:nowrap}
.spark-wallet>a{margin-left:auto;font-size:12px;font-weight:800;color:inherit}.chest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}.reward-chest{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;padding:22px 14px;border:1px solid var(--border);border-radius:24px;background:var(--bg-card);color:var(--text);font:inherit;cursor:pointer;box-shadow:0 4px 0 var(--border)}.chest-art{display:grid;place-items:center;width:90px;height:82px;background:#ffcd4e20;border-radius:24px;color:#ce9325}.reward-chest small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2)}.reward-chest b{font-size:13px;line-height:1.5}.reward-chest>span:last-child{font-size:12px;font-weight:800;color:var(--accent)}.chest-daily .chest-art{background:#6ab7ea20;color:#4b96c9}.chest-module .chest-art{background:#ac8eee22;color:#9771d4;transform:scale(1.08)}.chest-weekly .chest-art,.chest-streak .chest-art{background:#ed996a22;color:#d88641}.next-reward{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:var(--text);text-decoration:none}.next-reward>span{color:var(--accent);font-weight:800;font-size:13px}
.booster-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.booster-tile{border:1px solid var(--border);padding:18px 12px;border-radius:20px;text-align:center;background:var(--accent-soft)}.booster-tile>span{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--accent)}.booster-tile b{font-size:32px}.booster-tile p{font-size:12px}.booster-tile .btn{font-size:12px;padding:12px 8px;white-space:normal;width:100%}.booster-tile.boost-3{background:#ab7ded12}.boost-timer{font-weight:800;color:var(--accent);text-align:center;font-variant-numeric:tabular-nums;min-height:20px}
.reward-history.community-card{padding:22px}.reward-history-row{display:flex;align-items:center;gap:10px;padding:16px 0;border-bottom:1px solid var(--border)}.reward-history-row:last-child{border:0}.reward-history-row>div{flex:1;min-width:0}.reward-history-row p{font-size:11px;line-height:1.6;margin:4px 0 0}.reward-history-row .btn{flex:none;font-size:11px;padding:10px}
.profile-welcome{text-align:center}.profile-welcome h2{margin:16px 0 10px}.profile-welcome>.byte,.player-hero>.byte{margin:auto}.profile-visibility{display:flex;align-items:flex-start;gap:12px;padding:16px;background:var(--bg-card-2);border:1px solid var(--border);border-radius:16px;margin:20px 0 12px;font-size:12px;line-height:1.65}.profile-visibility input{flex:none;width:20px;height:20px;margin:3px 0;accent-color:var(--accent)}#playerForm .form-label{display:block;margin:16px 0 8px;font-weight:800;font-size:12px}.player-hero{text-align:center}.player-hero h1{font-size:28px;margin:20px 0 8px;overflow-wrap:anywhere}.player-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:24px 0}.player-stats>div{display:flex;flex-direction:column;gap:7px;padding:18px 5px;background:var(--bg-card-2);border-radius:17px}.player-stats b{font-size:24px}.player-stats span{font-size:10px;line-height:1.5;color:var(--text-2)}.player-actions{display:flex;justify-content:center;margin:18px 0 4px}.friend-status{padding:12px 24px;background:var(--accent-soft);border-radius:16px;color:var(--accent);font-weight:800}.player-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:24px 0}.player-badges>div{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:16px 6px;border:1px solid var(--border);border-radius:18px;color:var(--text-3);opacity:.5}.player-badges>div.earned{color:var(--accent);opacity:1;background:var(--accent-soft)}.player-badges span{font-size:11px;line-height:1.4}.lg-name>a,.friend-info>a{color:inherit;text-decoration:none}.lg-name>a::after{content:' ›';color:var(--text-3)}
.admin-grant{margin-top:20px}.admin-grant>label{font-size:12px;font-weight:800;display:block;margin-bottom:8px}.admin-grant>div{display:flex;gap:10px}.admin-grant input,.admin-grant select{min-width:0;flex:1}.admin-grant .btn{flex:none}.admin-person-actions{gap:12px}
.heat-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;margin:16px 0;color:var(--text-2)}.heat-legend>span{display:flex;align-items:center;gap:5px}.heat-legend .heat-cell{display:inline-block;flex:none}.activity-explainer{margin:20px 0;font-size:13px;line-height:1.6;color:var(--text-2)}.activity-explainer .heatmap{max-width:100%;overflow:auto}

/* Each map skin has matching preview colors and an explicit night palette. */
html[data-cosmetic="aurora"],.skin-aurora{--skin-a:#d4f1e8;--skin-b:#e8dff8;--skin-node:#59a493;--skin-ink:#387568;--skin-deep:#176158}
html[data-cosmetic="sunset"],.skin-sunset{--skin-a:#fff0d1;--skin-b:#f7dce2;--skin-node:#dd926b;--skin-ink:#a15b3a;--skin-deep:#894d34}
html[data-cosmetic="ocean"],.skin-ocean{--skin-a:#d2edf7;--skin-b:#cff2ed;--skin-node:#4eabc0;--skin-ink:#307488;--skin-deep:#256b80}
html[data-cosmetic="forest"],.skin-forest{--skin-a:#e5f0d6;--skin-b:#cfebdc;--skin-node:#70a67a;--skin-ink:#47754f;--skin-deep:#42654a}
html[data-cosmetic="sakura"],.skin-sakura{--skin-a:#fce4ed;--skin-b:#ebe3f8;--skin-node:#ca8cae;--skin-ink:#975c7c;--skin-deep:#875773}
html[data-cosmetic="cosmos"],.skin-cosmos{--skin-a:#e1e5fb;--skin-b:#eaddf6;--skin-node:#9584d4;--skin-ink:#6857a3;--skin-deep:#61519c}
html[data-theme="dark"][data-cosmetic="aurora"],html[data-theme="dark"] .skin-aurora{--skin-a:#173d3a;--skin-b:#302c4d;--skin-node:#56aa9c;--skin-ink:#90d4c5}
html[data-theme="dark"][data-cosmetic="sunset"],html[data-theme="dark"] .skin-sunset{--skin-a:#483328;--skin-b:#39293c;--skin-node:#c78460;--skin-ink:#ecc09c}
html[data-theme="dark"][data-cosmetic="ocean"],html[data-theme="dark"] .skin-ocean{--skin-a:#18394d;--skin-b:#173d41;--skin-node:#429db4;--skin-ink:#94d4df}
html[data-theme="dark"][data-cosmetic="forest"],html[data-theme="dark"] .skin-forest{--skin-a:#2b3d28;--skin-b:#1a3931;--skin-node:#689a72;--skin-ink:#accc9e}
html[data-theme="dark"][data-cosmetic="sakura"],html[data-theme="dark"] .skin-sakura{--skin-a:#402c3e;--skin-b:#302c48;--skin-node:#ad7898;--skin-ink:#e3b6d2}
html[data-theme="dark"][data-cosmetic="cosmos"],html[data-theme="dark"] .skin-cosmos{--skin-a:#242c50;--skin-b:#352545;--skin-node:#8b77c2;--skin-ink:#c2b2ed}
html[data-cosmetic]:not([data-cosmetic="default"]) .path-nodes{background:radial-gradient(ellipse at 15% 20%,var(--skin-a),transparent 65%),linear-gradient(160deg,var(--skin-b),var(--bg-card));border-color:color-mix(in srgb,var(--skin-node) 30%,var(--border));box-shadow:0 8px 0 color-mix(in srgb,var(--skin-node) 15%,var(--bg-card))}
html[data-cosmetic]:not([data-cosmetic="default"]) .path-hero{background:linear-gradient(120deg,var(--skin-a),var(--skin-b))}
html[data-cosmetic]:not([data-cosmetic="default"]) .unit{--unit-color:var(--skin-ink)!important}
html[data-cosmetic]:not([data-cosmetic="default"]) .node:not(.locked):not(.gold):not(.chest){--node-color:var(--skin-node)!important;--node-shadow:var(--skin-deep)!important}
html[data-cosmetic]:not([data-cosmetic="default"]) .node-card-go{background:color-mix(in srgb,var(--skin-node) 62%,#15233a);box-shadow:0 4px 0 var(--skin-deep);color:white}
html[data-cosmetic="forest"] .path-nodes{background-image:radial-gradient(ellipse at 0 40%,var(--skin-a) 12%,transparent 45%),radial-gradient(ellipse at 100% 75%,var(--skin-b) 15%,transparent 50%),linear-gradient(155deg,var(--skin-a),var(--bg-card))}
html[data-cosmetic="cosmos"] .path-nodes{background-image:radial-gradient(circle at 18% 18%,#b5b8ee77 1px,transparent 2px),radial-gradient(circle at 85% 66%,#acaaeb88 2px,transparent 3px),linear-gradient(160deg,var(--skin-a),var(--skin-b));background-size:110px 150px,190px 170px,100% 100%}
.skin-preview{position:relative;isolation:isolate;overflow:hidden;width:100%;height:110px;border-radius:18px;background:linear-gradient(135deg,var(--skin-a),var(--skin-b))}.skin-preview i{position:absolute;width:31px;height:26px;border-radius:50%;background:var(--skin-node);box-shadow:0 4px 0 var(--skin-deep)}.skin-preview i:nth-child(1){left:20%;bottom:18px}.skin-preview i:nth-child(2){right:20%;top:22px}.skin-preview i:nth-child(3){left:12%;top:3px;opacity:.25}.skin-preview>span{position:absolute;right:23%;top:23px;color:white;line-height:1}
@media(max-width:540px){.skin-preview{grid-row:span 2;height:94px}.skin-preview i{width:24px;height:22px}.skin-preview>span{right:16%;top:21px}.community-page .section-heading h2{font-size:20px}.daily-map-card{grid-template-columns:34px minmax(0,1fr) auto;gap:9px;padding:14px}.daily-map-art{width:34px;height:38px}.booster-grid{gap:10px}.rewards-page .community-card{padding:20px}.spark-wallet>a{max-width:105px;line-height:1.6}.admin-grant>div{flex-wrap:wrap}.admin-grant input,.admin-grant select{flex-basis:180px}.player-stats b{font-size:22px}}

/* The lesson owns the viewport; only its content or editor may scroll. */
html.in-lesson:not(.in-summary),html.in-lesson:not(.in-summary) body{height:100%;overflow:hidden;overscroll-behavior:none}
html.in-lesson:not(.in-summary) body{position:fixed;inset:0;width:100%}
.build-block{touch-action:pan-y!important;-webkit-user-select:none;user-select:none}
.build-instructions{font-size:12px;line-height:1.5;color:var(--text-2);margin:8px 0 16px}
.practice-menu-btn{border:0;background:none;color:var(--text-2);font:inherit;font-size:12px;min-height:32px;padding:5px 12px;cursor:pointer}
.editor-done{display:none;border:1px solid #ffffff33;background:#ffffff12;color:white;border-radius:9px;min-height:30px;padding:4px 12px;font:inherit;font-size:12px}
html[data-cosmetic]:not([data-cosmetic="default"]) .unit-header{--unit-color:var(--skin-ink)!important}
@media(max-width:600px){
  html.in-lesson .ses-stage{gap:10px}
  .ses-body[data-step="build"]{display:block}
  .ses-body[data-step="build"] .ses-q-head{margin-bottom:6px}
  .ses-body[data-step="build"] #sesBuild{display:block}
  .ses-body[data-step="build"] .build-task{display:block}
  .ses-body[data-step="build"] .build-work,.ses-body[data-step="build"] .build-bank{max-height:none;overflow:visible;padding:12px;gap:8px;min-height:65px}
  .ses-body[data-step="build"] .build-prompt{font-size:16px;margin-bottom:0}
  .ses-body[data-step="build"] .build-block{font-size:15px;min-height:42px;padding:10px 13px}
  .ses-body[data-step="practice"] .practice-task{padding:16px;margin-bottom:12px}
  .ses-body[data-step="practice"] .run-row{gap:8px;margin-bottom:10px}
  .ses-body[data-step="practice"] #runBtn,.ses-body[data-step="practice"] #checkBtn{flex:1;padding:12px 5px;font-size:13px;min-height:44px}
  .ses-body[data-step="practice"] .editor-wrap{margin-bottom:12px}
  html.in-lesson.keyboard-open .ses-mode,
  html.in-lesson.keyboard-open .ses-q-head{display:none}
  html.in-lesson.keyboard-open .ses-stage{gap:7px}
  html.in-lesson.keyboard-open .ses-body[data-step="practice"]{display:block}
  html.in-lesson.keyboard-open #sesPractice{display:block}
  html.in-lesson.keyboard-open .practice-task{flex:none;max-height:85px;overflow:auto;padding:10px 12px;margin-bottom:8px;overscroll-behavior:contain}
  html.in-lesson.keyboard-open .practice-task .theory-content{font-size:13px;line-height:1.45}
  html.in-lesson.keyboard-open .practice-task p{margin:0 0 4px}
  html.in-lesson.keyboard-open .practice-task-title,
  html.in-lesson.keyboard-open #hintBtn,
  html.in-lesson.keyboard-open #solutionBtn,
  html.in-lesson.keyboard-open #resetBtn,
  html.in-lesson.keyboard-open #sesPractice>.console-wrap,
  html.in-lesson.keyboard-open #hintArea,
  html.in-lesson.keyboard-open #checkResult{display:none}
  html.in-lesson.keyboard-open #practiceEditor{display:flex;flex-direction:column;height:clamp(160px,35vh,300px);margin-bottom:8px}
  html.in-lesson.keyboard-open .editor-toolbar{padding:5px 10px;min-height:34px;flex:none}
  html.in-lesson.keyboard-open .editor-done{display:block;margin-left:auto}
  html.in-lesson.keyboard-open .editor-dots,
  html.in-lesson.keyboard-open .editor-hotkey{display:none}
  html.in-lesson.keyboard-open .editor-body{flex:1;min-height:0;overflow:hidden}
  html.in-lesson.keyboard-open .editor-stack{height:100%;min-height:0}
  html.in-lesson.keyboard-open .code-editor{height:100%!important;min-height:0!important;overflow:auto;font-size:16px!important;padding:10px}
  html.in-lesson.keyboard-open .editor-highlight{height:100%;padding:10px;font-size:16px!important}
  html.in-lesson.keyboard-open .editor-gutter{padding:10px 8px;font-size:16px}
  html.in-lesson.keyboard-open .ses-foot{padding:0;min-height:0}
  html.in-lesson.keyboard-open .run-row{flex:none;margin-bottom:0}
  html.in-lesson.keyboard-open .lesson-scroll-hint{display:none}
}
.privacy-copy{font-size:12px;line-height:1.6;color:var(--text-2);text-align:left}.privacy-copy p{margin:12px 0}
html.in-lesson #main>.challenge-page{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:24px}
.privacy-copy h3{font-size:13px;color:var(--text);margin:18px 0 8px}.privacy-status{display:flex;flex-direction:column;gap:6px;padding:14px 16px;margin:16px 0;background:var(--accent-soft);border-radius:16px;font-size:13px;line-height:1.5}.privacy-status span{font-size:12px;color:var(--text-2)}.privacy-operator{border-top:1px solid var(--border);margin-top:16px;padding-top:12px;font-size:13px}.privacy-operator summary{cursor:pointer;min-height:40px;display:list-item;font-weight:700}.privacy-operator p{margin:8px 0}

/* Map nodes stay within their island stacking context, below the section bar. */
.path-nodes{isolation:isolate;position:relative;z-index:0}
.unit-now{z-index:30;isolation:isolate}
.spark-wallet>a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;max-width:none;flex:none}
.spark-wallet>div{min-width:0}.spark-wallet>a .art-icon{flex:none}
@media(max-width:360px){.sidebar-footer{gap:5px;max-width:100%}.hud{gap:4px;min-width:0}.hud-cell{padding:7px 5px;gap:5px;min-width:0}.hud-wallet{min-width:0}.hud-value{font-size:12px}.hud-cell>.art-icon{width:20px;height:20px;flex:none}.profile-chip{padding:6px;gap:5px}.theme-toggle{padding:8px;min-width:34px}}
/* A stable speech slot: only the text changes when Byte is tapped. */
.byte-guide{display:flex;align-items:center;gap:14px;flex:none;height:88px;margin:0 0 12px;min-width:0}
.byte-guide>.ses-byte{width:60px;flex:0 0 60px;margin:0}
.byte-speech{position:relative;display:flex;align-items:center;min-width:0;flex:1;height:78px;box-sizing:border-box;padding:12px 16px;border:2px solid var(--border);border-radius:19px;background:var(--bg-card);color:var(--text-2);font-size:13px;font-weight:600;line-height:1.45;box-shadow:0 2px 0 var(--border);text-align:left}
.byte-speech::before{content:'';position:absolute;left:-7px;top:calc(50% - 6px);width:11px;height:11px;transform:rotate(-45deg);background:var(--bg-card);border-top:2px solid var(--border);border-left:2px solid var(--border)}
.byte-speech-copy{display:block;max-height:100%;overflow:auto;overflow-wrap:anywhere;overscroll-behavior:contain;scrollbar-width:thin}
.path-hero-info>.byte-speech{margin:0 0 12px;height:88px;font-size:12px;padding:10px 12px}
.path-hero-info{min-width:0}.path-hero-mascot{align-self:flex-start;margin-top:4px}
html.in-lesson .byte-guide{margin:0 0 14px;height:88px;gap:12px}
html.in-lesson .byte-guide .byte-speech{height:78px;padding:10px 13px;font-size:12px}
html.in-lesson.keyboard-open .byte-guide{display:none}
.byte[data-preview]{cursor:default}
.byte-welcome{display:flex;flex-direction:column;align-items:center;gap:20px;padding:18px 0;text-align:center}.byte-welcome .byte-speech{max-width:330px;margin:0;justify-content:center;text-align:center;font-size:22px;padding:20px}.byte-welcome .byte-speech::before{transform:rotate(45deg);top:auto;bottom:-8px;left:calc(50% - 7px);border:0;border-right:2px solid var(--border);border-bottom:2px solid var(--border)}.byte-welcome p{font-size:15px;line-height:1.65;max-width:310px;color:var(--text-2)}.byte-welcome>.btn{width:100%}

.friend-badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;box-sizing:border-box;border-radius:20px;background:#cf4255;color:white;font:800 11px/1 var(--font-body);flex:none}.nav-item{position:relative}.nav-item>.friend-badge{position:absolute;top:5px;right:9px}.friend-notice{display:block;padding:14px 18px;margin:14px 0;background:var(--accent-soft);color:var(--accent);border:1px solid var(--border);border-radius:16px;font-size:13px;font-weight:800;text-decoration:none}.friend-notice[hidden]{display:none}.friend-news{border-color:var(--accent)}

/* Collectible worlds: scenery, terrain, material and night lighting. */
html[data-cosmetic="sapphire"],.skin-sapphire{--skin-a:#cce8ff;--skin-b:#e0e7ff;--skin-node:#408edc;--skin-ink:#2765ae;--skin-deep:#194e8f}
html[data-cosmetic="ruby"],.skin-ruby{--skin-a:#ffe0e4;--skin-b:#f9dbef;--skin-node:#e25778;--skin-ink:#af284e;--skin-deep:#70243e}
html[data-theme="dark"][data-cosmetic="sapphire"],html[data-theme="dark"] .skin-sapphire{--skin-a:#122f51;--skin-b:#1b2850;--skin-node:#469ee8;--skin-ink:#8dc5ff;--skin-deep:#16446d}
html[data-theme="dark"][data-cosmetic="ruby"],html[data-theme="dark"] .skin-ruby{--skin-a:#42233b;--skin-b:#2f213c;--skin-node:#e4567a;--skin-ink:#ed9eaf;--skin-deep:#572139}
 .world-art{display:block;width:100%;height:100%}
.world-clearing{position:relative;display:flex;align-items:center;justify-content:space-between;flex:none;width:calc(100% - 32px);height:84px;margin:0;pointer-events:none;contain:paint}
.world-land{display:block;width:100px;height:82px;flex:none}
.world-clearing.clearing-1{flex-direction:row-reverse}
.world-trail{width:40%;height:26px;border-top:2px dashed color-mix(in srgb,var(--skin-node) 25%,transparent);border-radius:50%;opacity:.6;margin:0 20px}
.node-row>.node{transform:translateX(var(--path-offset,0px))}
.node-row:has(.node-side){min-height:104px}
.node-side{z-index:1}.node-side-label{max-width:100%;overflow-wrap:anywhere}
html[data-cosmetic]:not([data-cosmetic="default"]) .path-deco{display:none}
html[data-cosmetic]:not([data-cosmetic="default"]) .path-nodes{border-width:2px;box-shadow:0 9px 0 color-mix(in srgb,var(--skin-deep) 32%,var(--bg)),0 18px 24px #1027460c;overflow:hidden}
html[data-cosmetic]:not([data-cosmetic="default"]) .path-nodes::after{content:'';position:absolute;inset:0;pointer-events:none;border:7px solid #ffffff10;border-radius:inherit;z-index:-1}
html[data-cosmetic="sapphire"] .path-nodes,html[data-cosmetic="ruby"] .path-nodes{background-image:linear-gradient(35deg,transparent 42%,#ffffff17 42%,#ffffff17 45%,transparent 45%),linear-gradient(-35deg,transparent 63%,#ffffff28 63%,#ffffff28 67%,transparent 67%),linear-gradient(155deg,var(--skin-a),var(--skin-b));background-size:190px 260px,230px 310px,100% 100%}
html[data-cosmetic="sapphire"] .node-disc,html[data-cosmetic="ruby"] .node-disc{border-radius:27% 38% 28% 40%;border:2px solid #ffffff55}
html[data-cosmetic="cosmos"] .path-nodes{border-radius:60px;background-image:radial-gradient(circle at 18% 18%,#fff9 1px,transparent 2px),radial-gradient(circle at 85% 66%,#bcadff 2px,transparent 3px),radial-gradient(ellipse at 85% 42%,#7d5cab22,transparent 60%),linear-gradient(160deg,var(--skin-a),var(--skin-b));background-size:97px 141px,171px 191px,100% 100%,100% 100%}
html[data-cosmetic="cosmos"] .node-disc{border:3px solid color-mix(in srgb,var(--skin-node) 50%,white);box-shadow:0 5px 0 var(--skin-deep),0 0 0 6px color-mix(in srgb,var(--skin-node) 18%,transparent)}
html[data-cosmetic="forest"] .path-nodes{background-image:radial-gradient(ellipse at 0 30%,#6c9d6425 10%,transparent 50%),radial-gradient(ellipse at 100% 70%,#98bf702a 12%,transparent 40%),linear-gradient(155deg,var(--skin-a),var(--skin-b))}
html[data-cosmetic="forest"] .node-disc{border:3px solid #a4c98980;border-radius:47% 42% 38% 43%}
html[data-cosmetic="sakura"] .path-nodes{background-image:radial-gradient(ellipse at 10% 17%,#e892bc25 10%,transparent 55%),radial-gradient(ellipse at 94% 64%,#c795dd30 10%,transparent 50%),linear-gradient(150deg,var(--skin-a),var(--skin-b))}
html[data-cosmetic="sakura"] .node-disc{border:3px solid #f2badb80;border-radius:42% 40% 45% 38%}
html[data-cosmetic="ocean"] .path-nodes{background-image:repeating-radial-gradient(ellipse at 10% 0%,transparent 0 90px,#88ccdc14 92px 99px,transparent 101px 135px),linear-gradient(160deg,var(--skin-a),var(--skin-b))}
html[data-cosmetic="ocean"] .node-disc{border:3px solid #86dcdd66}
html[data-cosmetic="sunset"] .path-nodes{background-image:repeating-radial-gradient(ellipse at 100% 5%,transparent 0 75px,#d7907e13 76px 79px,transparent 80px 130px),linear-gradient(150deg,var(--skin-a),var(--skin-b))}
html[data-cosmetic="aurora"] .path-nodes{background-image:linear-gradient(115deg,transparent 30%,#76d9c422 40%,transparent 48%,#9782e522 60%,transparent 70%),linear-gradient(155deg,var(--skin-a),var(--skin-b))}
html[data-cosmetic]:not([data-cosmetic="default"]) .unit-now{background:var(--skin-deep)!important;color:#fff}
/* Shop previews are illustrations, never fake interactive map buttons. */
.scene-preview{height:148px;display:grid;place-items:center;padding:10px;box-sizing:border-box;background:linear-gradient(145deg,var(--skin-a),var(--skin-b));border:1px solid color-mix(in srgb,var(--skin-node) 20%,transparent)}
.scene-preview>.world-art{position:relative;width:112px;height:112px;z-index:1}
.scene-preview>.scene-horizon{position:absolute;inset:auto -15px -20px;width:auto;height:65px;border-radius:50%;background:var(--skin-node);opacity:.12}
.accessory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}
.accessory-preview{position:relative;width:128px;height:128px;display:grid;place-items:center}
.byte-accessory{position:absolute;inset:0;display:block;pointer-events:none;z-index:3}.byte-accessory svg{display:block;width:100%;height:100%}
.byte.byte-gpu-ready .byte-accessory{visibility:hidden}
.rewards-page{padding-bottom:40px}
@media(max-width:540px){.scene-preview{height:116px;padding:5px}.scene-preview>.world-art{width:90px;height:90px}.accessory-grid{grid-template-columns:1fr}.accessory-grid .cosmetic-card{grid-template-columns:128px minmax(0,1fr);gap:12px;padding:12px}.accessory-preview{grid-row:span 2}.cosmetic-card{grid-template-columns:100px minmax(0,1fr)}.cosmetic-card .btn{padding:10px 12px}.cosmetic-card>b{overflow-wrap:anywhere}.path-hero-mascot .byte{width:80px!important}.path-hero{gap:14px}}
@media(max-width:360px){.accessory-grid .cosmetic-card{grid-template-columns:106px minmax(0,1fr);gap:8px}.accessory-preview,.accessory-preview .byte{width:106px!important;height:106px}.byte-guide{gap:10px}.byte-speech{padding:9px 11px;font-size:12px}.path-hero-mascot .byte{width:60px!important}.path-hero-info>.byte-speech{font-size:11px}}

.coach-feedback{padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--bg-card);margin:12px 0}.coach-feedback h3{font-size:16px;margin:0 0 14px}.coach-feedback p{font-size:14px;line-height:1.6;margin:12px 0}.coach-feedback>span{font-size:12px;color:var(--text-2)}.coach-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}.coach-compare>div{min-width:0;padding:12px;border-radius:12px;background:var(--bg-hover)}.coach-compare b{font-size:11px;color:var(--text-2)}.coach-compare pre,.coach-error{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.5;margin:8px 0 0;max-height:180px;overflow:auto}.coach-compare>div:last-child{background:color-mix(in srgb,var(--green) 9%,var(--bg-card))}@media(max-width:360px){.coach-compare{grid-template-columns:1fr}.coach-feedback{padding:14px}}

/* Chapter names remain readable, including the longest Russian titles. */
.unit-bridge{gap:10px;padding:22px 4px 4px;min-width:0}.unit-bridge-line{min-width:16px;flex:1 1 25px}
.unit-bridge-label{display:flex;flex-direction:column;gap:4px;flex:0 1 80%;max-width:80%;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.55;overflow-wrap:anywhere}.unit-bridge-label b{display:block}
.unit-now-title{min-width:0;white-space:normal;overflow-wrap:anywhere}
.traffic-form{display:grid;gap:12px;margin:20px 0}.traffic-form label{display:grid;gap:6px;font-size:13px}.traffic-event{padding:14px 0;border-top:1px solid var(--border);overflow-wrap:anywhere}.traffic-event p{font-size:13px;margin:6px 0}.traffic-event span{font-size:12px;color:var(--text-2)}

/* Landscape cards occupy their own flow space; no overlay over lessons. */
.world-stage{width:calc(100% - 24px);margin:0 0 22px;flex:none;border-radius:30px 30px 18px 18px;overflow:hidden;background:var(--bg-card);border:1px solid color-mix(in srgb,var(--skin-node) 30%,transparent);box-shadow:0 4px 0 color-mix(in srgb,var(--skin-deep) 12%,transparent)}
.world-scene{display:block;width:100%;height:auto;aspect-ratio:400/180}
.world-caption{padding:12px 16px 14px;display:grid;gap:3px;white-space:normal;overflow-wrap:anywhere;line-height:1.45}
.world-caption span{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;color:var(--text-3)}.world-caption b{font-size:14px;color:var(--text)}
.scene-preview{padding:0;height:126px}.scene-preview .world-scene{height:100%;width:100%;object-fit:cover}
.byte:has(.byte-accessory) .byte-still{visibility:hidden}
@media(max-width:540px){.scene-preview{height:112px}.scene-preview .world-scene{width:210px;max-width:none;height:112px;margin-left:-50px}.world-caption b{font-size:13px}}

/* One dressing room, independent slots, six objects per shelf. */
.wardrobe-entry{display:flex;align-items:center;gap:20px;text-decoration:none;color:var(--text);padding:20px}.wardrobe-entry>span:first-child{flex:none}.wardrobe-entry b{font-size:19px}.wardrobe-entry p{font-size:13px;line-height:1.6;color:var(--text-2);margin:8px 0 12px}.wardrobe-entry strong{font-size:13px;color:var(--accent)}
.fitting-room{max-width:1000px}.fitting-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.fitting-heading h1{font-size:28px;margin:4px 0}.fitting-heading .eyebrow{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--text-3);font-weight:800}.fitting-wallet{display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--bg-card);padding:10px 14px;border-radius:18px;font-size:15px}
.fitting-layout{display:grid;grid-template-columns:minmax(220px,.85fr) minmax(280px,1fr);gap:26px;align-items:start}.fitting-stage{position:sticky;top:24px;display:flex;align-items:center;flex-direction:column;padding:26px 12px 16px;border:1px solid var(--border);border-radius:32px;background:var(--bg-card);box-shadow:0 5px 0 var(--border)}.fitting-mirror{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;padding:12px 0}.fitting-mirror:before{content:"";position:absolute;inset:0 8%;z-index:-2;border:1px solid var(--border);border-radius:100px 100px 30px 30px;background:radial-gradient(ellipse at 50% 40%,var(--accent-soft),transparent 75%)}.fitting-platform{position:absolute;bottom:7px;width:158px;height:22px;z-index:-1;background:var(--accent-soft);border-radius:50%;border-bottom:3px solid var(--border)}.fitting-caption{font-size:12px;color:var(--text-2);margin:12px 0 4px;min-height:18px}.fitting-reset{background:none;border:0;color:var(--accent);font:inherit;font-weight:700;font-size:12px;min-height:36px;cursor:pointer}.fitting-reset:disabled{opacity:.4;cursor:default}
.fitting-closet{min-width:0}.fitting-tabs{display:flex;background:var(--bg-hover);border:1px solid var(--border);padding:4px;gap:4px;border-radius:15px;margin-bottom:14px}.fitting-tabs button{flex:1;border:0;min-height:40px;border-radius:11px;background:transparent;color:var(--text-2);font:inherit;font-size:13px;font-weight:800;cursor:pointer}.fitting-tabs [aria-selected=true]{background:var(--bg-card);color:var(--accent);box-shadow:0 2px 4px #16234212}
.fitting-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.fitting-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;border:2px solid var(--border);padding:10px 7px;background:var(--bg-card);border-radius:18px;min-width:0;color:var(--text);font:inherit;cursor:pointer;text-align:center;transition:border-color .15s,background .15s}.fitting-item[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}.fitting-item b{font-size:11px;line-height:1.4;min-height:31px;display:flex;align-items:center;overflow-wrap:anywhere}.fitting-item small{font-size:9px;color:var(--text-2);line-height:1.35}.fitting-thumb{display:grid;place-items:center;width:100%;height:66px;color:var(--text-3)}.fitting-thumb>svg{width:78px;max-width:100%;height:62px}.fitting-check{position:absolute;right:5px;top:5px;background:var(--accent);color:white;border-radius:50%;display:grid;place-items:center;width:18px;height:18px}.fitting-rare{background:linear-gradient(150deg,var(--bg-card),var(--accent-soft))}.fitting-rare small{color:var(--accent);font-weight:700}
.fitting-detail{display:flex;align-items:center;gap:10px;min-height:78px;padding:12px 2px;font-size:12px;line-height:1.55;color:var(--text-2)}.fitting-detail b{color:var(--text);font-size:12px}.fitting-detail p{margin:3px 0;font-size:11px}.fitting-medal{color:var(--accent);flex:none}.fitting-save{border-top:1px solid var(--border);padding-top:12px}.fitting-save>p:first-child{font-size:12px;line-height:1.5;color:var(--text-2);margin:0 0 12px;min-height:36px}.fitting-save .btn{width:100%;white-space:normal;min-height:48px;padding:12px;font-size:14px}.fitting-save .form-note{font-size:10px}.fitting-pagination{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12px}.fitting-pagination:empty{display:none}.fitting-pagination button{background:none;color:var(--accent);border:0;font:inherit;min-height:42px;cursor:pointer}
@media(max-width:700px){.fitting-layout{grid-template-columns:1fr;gap:20px}.fitting-heading{margin-bottom:14px}.fitting-heading h1{font-size:25px}.fitting-stage{position:relative;top:auto;padding:8px 10px 6px;border-radius:25px;box-shadow:0 3px 0 var(--border)}.fitting-mirror{padding:2px 0}.fitting-mirror .byte{width:170px!important}.fitting-mirror:before{inset:0 20%}.fitting-caption{margin:4px 0 0;font-size:11px}.fitting-reset{min-height:30px;font-size:11px}.fitting-items{gap:8px}.fitting-item{padding:8px 5px}.fitting-thumb{height:56px}.fitting-thumb>svg{height:52px}.fitting-detail{min-height:68px}.fitting-save .btn{min-height:48px}}
/* A stable fitting-room line; headwear alone chooses the greeting. */
.fitting-line{margin:8px 8px 0;min-height:42px;max-width:290px;text-align:center;font-size:13px;line-height:1.6;color:var(--text)}
.fitting-thumb>svg{width:100%;height:100%;overflow:hidden}.fitting-thumb{height:84px!important;align-items:center;justify-content:center}
.xp-potion{--potion-glass:#e4f4ff;--potion-edge:#667dc2;--potion-liquid:#7583e8;--potion-light:#bacaff;--potion-cork:#ceab87;position:relative;display:block!important;width:100px;height:110px;margin:0 auto 10px}
.potion-3{--potion-glass:#f1e9ff;--potion-edge:#9066b9;--potion-liquid:#a26ddd;--potion-light:#e0b6ff}
.xp-potion>svg{width:100%;height:100%;display:block}.xp-potion>b{position:absolute;inset:auto 0 19px;text-align:center;font-size:25px!important;color:#fff;text-shadow:0 2px 0 #49467755;line-height:1;pointer-events:none}
.xp-potion.is-empty{opacity:.55}.xp-potion.is-empty>b{color:var(--potion-edge);text-shadow:none}
.potion-bubbles circle{animation:potion-bubble 2.8s ease-in infinite;transform-box:fill-box;transform-origin:center}.potion-bubbles circle:nth-child(2){animation-delay:-1.2s}.potion-bubbles circle:nth-child(3){animation-delay:-2s}
@keyframes potion-bubble{0%{transform:translateY(0) scale(.6);opacity:0}25%{opacity:.9}90%,100%{transform:translateY(-22px) scale(.9);opacity:0}}
.booster-tile h3{font-size:18px;margin:8px 0}.booster-tile p{min-height:38px;font-size:12px;line-height:1.5}.booster-tile .btn{font-size:12px;width:100%;padding:12px 8px;white-space:normal}
.chest-reveal{text-align:center}.chest-reveal .xp-potion{width:136px;height:150px}.chest-reveal .xp-potion>b{bottom:26px;font-size:33px!important}.chest-reveal p{line-height:1.7;color:var(--text-2)}
.reward-odds{margin:18px 0;color:var(--text-2);font-size:12px;line-height:1.7}.reward-odds summary{cursor:pointer;font-weight:700}.reward-odds p{margin:10px 0}
@media(prefers-reduced-motion:reduce){.potion-bubbles circle{animation:none;opacity:.7}}
/* Locked lessons remain clear; an unopened chapter must not wash out its art. */
.unit-locked{opacity:1}.world-stage{border-radius:24px 24px 18px 18px}.world-scene{isolation:isolate}
.world-clearing .world-land{width:104px;height:88px}.world-clearing .world-art{width:100%;height:100%}
@media(max-width:700px){
 .fitting-stage{position:sticky;top:calc(var(--wardrobe-top,76px) + 6px);z-index:6;display:grid;grid-template-columns:minmax(132px,.9fr) 1fr;gap:0 8px;padding:10px;align-items:center}
 .fitting-mirror{grid-column:1;grid-row:1 / span 3;min-width:0}.fitting-mirror .byte{width:150px!important;max-width:100%}.fitting-mirror:before{inset:0 0}.fitting-platform{width:110px;height:14px;bottom:0}
 .fitting-line{grid-column:2;margin:0;text-align:left;font-size:12px;min-height:0;line-height:1.5;align-self:end}.fitting-caption{grid-column:2;margin-top:8px;line-height:1.45;min-height:32px}.fitting-reset{grid-column:2;text-align:left;padding:2px 0;justify-self:start}
 .fitting-thumb{height:64px!important}.fitting-item{scroll-margin-top:calc(var(--wardrobe-top,76px) + 186px)}.fitting-save{scroll-margin-top:calc(var(--wardrobe-top,76px) + 186px)}
}

/* Trail landmarks have their own generous space, never intruding on controls. */
.world-clearing{height:158px;margin:4px 0;width:calc(100% - 24px)}
.world-clearing .world-land{width:180px;height:150px;max-width:64%}
.world-clearing .world-trail{flex:1;min-width:36px;opacity:.55}
/* Generated 2D scenes: one lazily loaded atlas per theme, twelve distinct places. */
.scene-atlas{position:relative;overflow:hidden;aspect-ratio:2/1;contain:paint;background:linear-gradient(135deg,var(--bg-card),var(--accent-soft))}
.scene-atlas .atlas-image{position:absolute;width:300%;height:400%;max-width:none;opacity:0;pointer-events:none}
.scene-atlas.atlas-ready .atlas-image{opacity:1}
/* Generated trail objects keep their own reserved row and transparent outline. */
.generated-sprite { display:block; overflow:hidden; }
.sprite-loading { opacity:0; }
.sprite-unavailable { visibility:hidden; }
.world-land > .generated-sprite { width:100%; height:100%; }
.sprite-review { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.sprite-review article { display:grid; justify-items:center; min-width:0; padding:16px; border:1px solid var(--border); border-radius:24px; }
.sprite-review article > svg { height:160px; }
.sprite-review b { font-size:12px; margin-top:10px; }
@media(max-width:500px){.sprite-review {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.sprite-review article{padding:10px}.sprite-review article > svg{height:132px}}

/* Catalogue cards only reveal a fully composed outfit, never a bare loading layer. */
.fitting-thumb-image{display:block;width:100%;height:100%;object-fit:contain;min-height:0}
.fitting-thumb-status{font-size:10px;line-height:1.5;max-width:90px;color:var(--text-3)}
#fittingByte .byte-still:not([data-outfit]){visibility:hidden}

/* One vertical scroll area for the guide, task, code output and explanation. */
html.in-lesson .ses-body{overflow:visible;min-width:0}
html.in-lesson .ses-scroll{overflow-anchor:none;scroll-padding-block:12px;padding-bottom:12px}
html.in-lesson .ses-foot{flex:none}
html.in-lesson .ses-foot:empty{display:none}
html.in-lesson .ses-theory pre,html.in-lesson .quiz-code{max-height:none;overscroll-behavior:auto}

/* Beta review: readable progress and explicit ways to continue after feedback. */
.unit-challenge:hover,.unit-challenge:focus-visible{border-color:var(--accent);color:var(--accent)}
.unit-challenge>span{margin-left:8px}
.coach-retry{display:block;margin-top:16px;min-height:44px}
.coach-compare mark{background:#ffe09a;color:#372812;border-radius:3px;box-shadow:0 2px 0 #cb8300;padding:1px 0}
.knowledge-feedback{padding:18px;margin-top:18px;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:16px;background:var(--bg-card-2);color:var(--text);font-size:14px;line-height:1.6;text-align:left;overflow-wrap:anywhere}
.knowledge-feedback.ok{border-left-color:var(--green)}
.knowledge-feedback.fail{border-left-color:var(--red)}
.knowledge-feedback h3{font-size:17px;margin:0 0 10px}
.knowledge-feedback p{margin:8px 0;color:var(--text)}
.knowledge-explain{margin-top:12px;color:var(--text-2)}
.knowledge-summary{width:100%;margin:26px 0;text-align:left}
.knowledge-summary h2{font-size:20px;margin:0 0 8px}
.knowledge-summary>p{font-size:13px;color:var(--text-2)}
.knowledge-summary details{border:1px solid var(--border);border-radius:16px;background:var(--bg-card);padding:16px;margin:10px 0}
.knowledge-summary summary{cursor:pointer;font-size:14px;font-weight:800;line-height:1.5}
.review-status{margin-right:12px;color:var(--text-2)}
.review-question{font-weight:700;margin-top:18px;line-height:1.6}
.knowledge-summary .knowledge-feedback{border:0;padding:0;background:transparent}
.sound-setting{display:flex;align-items:center;gap:14px;padding:20px 0;margin-top:16px;border-top:1px solid var(--border)}
.sound-setting>.ic{flex:none;color:var(--accent)}
.sound-setting>div{flex:1;min-width:0}.sound-setting b{font-size:14px}.sound-setting p{font-size:12px;line-height:1.5;color:var(--text-2);margin:4px 0 0}.sound-setting .btn{padding:10px 12px;font-size:12px;min-height:44px}
html[data-theme="dark"] .lg-crown-title{color:var(--text)}
html[data-theme="dark"] .lg-step-badge,html[data-theme="dark"] .lg-crown-badge{color:color-mix(in srgb,var(--tier) 55%,white)}
html[data-theme="dark"] .fitting-mirror::before{background:radial-gradient(ellipse at 50% 40%,#32528155,transparent 75%)}
html[data-theme="dark"] .fitting-stage{background:var(--bg-card)}

html[data-theme="dark"] .fitting-check{color:#15213a}
html[data-theme="dark"] .node-verified{color:var(--text-2)}
html[data-theme="dark"] .lesson-receipt:not(.lesson-summary .lesson-receipt){color:#f0c97d}
html[data-theme="dark"] .lesson-summary-stats>div{color:var(--text-2)}
html[data-theme="dark"] .btn-red{color:#231323}
html[data-theme="dark"] .tok-com{color:#95a3c0}

.path-stat.streak,.path-stat.crowns,.path-stat.done{color:var(--text-2)}
.path-stat.streak>.ic,.path-stat.crowns>.ic{color:var(--yellow)}
.path-stat.done>.ic{color:var(--green)}
.unit-kicker{color:var(--text-2)}
.node-badge{color:var(--text);background:var(--bg-card);border:1px solid var(--border)}

.lg-legend-up,.lg-legend-down{color:var(--text-2)}
.lg-legend-up>.ic{color:var(--green)}