/* Codewaala Learning Guide. Dark site theme (styles.css tokens) + light mock screens. */
:root { --g-card: rgba(255,255,255,.04); --g-line: rgba(255,255,255,.10); }

.g-hero { padding: 56px 0 24px; }
.g-hero-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }
.g-hero h1 { font-size: clamp(32px, 4.6vw, 54px); }
.g-map svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-path { animation: g-dash 30s linear infinite; }
@keyframes g-dash { to { stroke-dashoffset: -600; } }
.g-node { cursor: pointer; opacity: 0; animation: g-pop .5s cubic-bezier(.2,1.4,.4,1) var(--d) forwards; transform-box: fill-box; transform-origin: center; }
.g-node:hover circle, .g-node:focus circle { fill-opacity: .4; }
.g-node-t { fill: #c7d2fe; font: 600 12px Inter, sans-serif; }
.g-traveller { filter: drop-shadow(0 0 8px #a5b4fc); }
@keyframes g-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* grade picker */
.g-grade { position: sticky; top: var(--g-top, 58px); z-index: 40; padding: 10px 0; background: rgba(11,16,32,.82); backdrop-filter: blur(12px); border-block: 1px solid var(--g-line); }
.g-grade-bar { display: flex; align-items: center; gap: 14px; }
.g-grade-q { font-weight: 700; color: var(--mut); white-space: nowrap; }
.g-bands { display: flex; gap: 10px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.g-band { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--g-line); background: var(--g-card); color: var(--txt); cursor: pointer; font: inherit; text-align: left; white-space: nowrap; transition: transform .15s, border-color .2s, background .2s; }
.g-band:hover { transform: translateY(-1px); border-color: rgba(168,85,247,.5); }
.g-band.on { background: linear-gradient(120deg, rgba(168,85,247,.28), rgba(6,182,212,.18)); border-color: #a855f7; box-shadow: 0 8px 22px -12px #a855f7; }
.g-band-e { font-size: 22px; }
.g-band b { display: block; font-size: 14px; }
.g-band small { color: var(--mut); font-size: 12px; }
.g-meter { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--mut); line-height: 1.2; }
.g-ring { --p: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#10b981 calc(var(--p) * 360deg), rgba(255,255,255,.1) 0); transition: background .6s; }
.g-ring b { width: 36px; height: 36px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 12px; color: #fff; }

/* section scaffolding */
.g-section { padding: 56px 0; }
/* Anchored sections land below the sticky site header + grade bar. */
#g-portals, #g-week, #g-habits, #g-future { scroll-margin-top: calc(var(--g-top, 58px) + 80px); }
#g-grade { scroll-margin-top: var(--g-top, 58px); }
.g-now { display: none; margin-top: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--a, #a855f7); background: color-mix(in srgb, var(--a, #a855f7) 12%, transparent); }
.g-now b { font-size: 15px; }
.g-now p { margin: 4px 0 0; font-size: 14px; color: #c4cdee; line-height: 1.5; }
.g-section.alt { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.035)); }
.g-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; margin-top: 22px; align-items: start; }
.g-rail { position: sticky; top: calc(var(--g-top, 58px) + 86px); display: flex; flex-direction: column; gap: 6px; }
.g-rail-i { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; color: #cdd5f3; font-weight: 600; font-size: 14.5px; transition: background .2s, border-color .2s; }
.g-rail-i:hover { background: var(--g-card); }
.g-rail-i.on { background: var(--g-card); border-color: var(--a); color: #fff; box-shadow: inset 3px 0 0 var(--a); }
.g-rail-i.later { opacity: .6; }
.g-rail-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(255,255,255,.08); color: var(--mut); flex: none; }
.g-rail-i.on .g-rail-n { background: var(--a); color: #0b1020; }
.g-rail-ic { font-size: 18px; }

.g-pane { min-width: 0; }
.g-pane.g-in > * { animation: g-rise .45s ease both; }
.g-pane.g-in > *:nth-child(2) { animation-delay: .05s; } .g-pane.g-in > *:nth-child(3) { animation-delay: .1s; } .g-pane.g-in > *:nth-child(4) { animation-delay: .15s; } .g-pane.g-in > *:nth-child(5) { animation-delay: .2s; }
@keyframes g-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.g-ph { display: flex; align-items: center; gap: 14px; }
.g-ph-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: color-mix(in srgb, var(--a) 22%, transparent); border: 1px solid color-mix(in srgb, var(--a) 60%, transparent); flex: none; }
.g-ph h3 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.g-ph p { margin: 0; color: var(--mut); }
.g-open { margin-left: auto; padding: 10px 16px; font-size: 14px; }
.g-what { color: #c4cdee; margin: 14px 0 10px; max-width: 760px; }
.g-intro { font-size: 17px; color: #e8ecf8; margin: 14px 0 16px; padding: 12px 16px; border-left: 3px solid var(--a); background: var(--g-card); border-radius: 0 12px 12px 0; }
.g-words { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.g-words > b { color: var(--mut); font-weight: 600; margin-right: 4px; }
.g-word { font: inherit; font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--a) 70%, transparent); background: none; color: var(--txt); cursor: pointer; transition: background .15s; }
.g-word:hover, .g-word.on { background: color-mix(in srgb, var(--a) 22%, transparent); border-style: solid; }
.g-def { margin: 8px 0 0; font-size: 14px; color: var(--mut); min-height: 1.5em; }
.g-def b { color: #fff; }

/* player */
.g-player { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; margin-top: 18px; align-items: start; }
.g-stage-wrap { position: sticky; top: calc(var(--g-top, 58px) + 86px); }
.g-stage { position: relative; width: 100%; overflow: hidden; border-radius: 16px; background: #0e1430; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px var(--g-line); }
.g-stage-in { position: absolute; left: 0; top: 0; width: 640px; height: 400px; transform-origin: 0 0; }
.g-ctrl { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.g-ctrl button { font: inherit; font-weight: 700; font-size: 14px; color: #fff; background: var(--g-card); border: 1px solid var(--g-line); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.g-ctrl .g-play { background: var(--grad); border: 0; min-width: 118px; }
.g-ctrl button:hover { border-color: #a855f7; }
.g-count { color: var(--mut); font-size: 13px; margin-left: 4px; }
.g-bar { flex-basis: 100%; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.g-fill { display: block; height: 100%; width: 0; background: var(--a, #a855f7); transition: width .4s ease; }
.g-steps { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 470px; overflow: auto; }
.g-step { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--g-line); background: var(--g-card); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.g-step:hover { transform: translateX(2px); }
.g-step.on { border-color: var(--a); background: color-mix(in srgb, var(--a) 12%, transparent); }
.g-step.past .g-step-n { background: #10b981; color: #0b1020; }
.g-step-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); font-size: 13px; font-weight: 800; flex: none; }
.g-step.on .g-step-n { background: var(--a); color: #0b1020; }
.g-step b { font-size: 15px; }
.g-step p { margin: 3px 0 0; color: #b9c3e6; font-size: 14px; line-height: 1.5; }

.g-cursor { position: absolute; left: 0; top: 0; z-index: 20; margin: -4px 0 0 -4px; transition: transform .6s cubic-bezier(.45,.05,.25,1), opacity .3s; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.g-cursor i { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -16px 0 0 -16px; border-radius: 50%; border: 3px solid #a855f7; opacity: 0; }
.g-cursor.tap i { animation: g-ripple .7s ease-out; }
.g-cursor.tap svg { animation: g-press .25s ease; }
@keyframes g-ripple { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }
@keyframes g-press { 50% { transform: scale(.82); } }
.g-cap { position: absolute; z-index: 21; width: max-content; transform: translate(-50%, 0) scale(.9); max-width: 250px; padding: 7px 12px; border-radius: 10px; background: #0b1020; color: #fff; font: 700 13px/1.35 Inter, sans-serif; box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); border: 1px solid #a855f7; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; text-align: center; }
.g-cap.above { transform: translate(-50%, -100%) scale(.9); }
.g-cap.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.g-cap.above.show { transform: translate(-50%, -100%) scale(1); }

.g-after { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.g-card { padding: 18px 20px; border-radius: 16px; background: var(--g-card); border: 1px solid var(--g-line); }
.g-card h4 { margin: 0 0 8px; font-size: 16px; }
.g-tips { margin: 0; padding-left: 18px; color: #c4cdee; font-size: 14.5px; }
.g-tips li { margin: 5px 0; }
.g-trial { margin: 12px 0 0; font-size: 13.5px; color: var(--mut); }
.g-q { margin: 0 0 10px; font-weight: 600; }
.g-opts { display: flex; flex-direction: column; gap: 8px; }
.g-opt { font: inherit; font-size: 14.5px; text-align: left; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--g-line); background: rgba(255,255,255,.03); color: var(--txt); cursor: pointer; transition: .15s; }
.g-opt:hover { border-color: #a855f7; }
.g-opt.right { border-color: #10b981; background: rgba(16,185,129,.16); }
.g-opt.wrong { border-color: #f87171; background: rgba(248,113,113,.12); animation: g-shake .35s; }
@keyframes g-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.g-why { margin: 10px 0 0; font-size: 14px; color: #c4cdee; min-height: 1em; }
.g-check.solved { border-color: rgba(16,185,129,.5); }
.g-later { margin-top: 18px; padding: 26px; border-radius: 16px; border: 1px dashed var(--g-line); text-align: center; }
.g-later-e { font-size: 40px; }
.g-later p { font-size: 17px; max-width: 560px; margin: 8px auto 12px; }
.g-later .g-tips { display: inline-block; text-align: left; }
.g-pn { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.g-confetti { position: absolute; z-index: 200; pointer-events: none; font-size: 20px; animation: g-burst 1.1s ease-out forwards; }
@keyframes g-burst { to { transform: translate(var(--dx), var(--dy)) rotate(200deg); opacity: 0; } }

/* week + habits */
.g-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 22px; }
.g-day, .g-habit { padding: 16px; border-radius: 16px; background: var(--g-card); border: 1px solid var(--g-line); animation: g-rise .5s ease both; animation-delay: var(--d); }
.g-day { border-top: 3px solid var(--a); display: flex; flex-direction: column; gap: 2px; }
.g-day-n { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.g-day-ic { font-size: 26px; margin: 4px 0; }
.g-day b { font-size: 14px; }
.g-day small { color: var(--a); font-weight: 700; }
.g-day p, .g-habit p { margin: 6px 0 0; font-size: 13.5px; color: #b9c3e6; line-height: 1.5; }
.g-habits { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 22px; }
.g-habit-ic { display: block; font-size: 30px; margin-bottom: 6px; }
.g-habit:hover .g-habit-ic { animation: g-wiggle .5s; }
@keyframes g-wiggle { 30% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } }

/* future */
.g-future { background: radial-gradient(900px 400px at 50% 0, rgba(168,85,247,.22), transparent 70%); }
.g-fut-head { text-align: center; max-width: 760px; margin: 0 auto; }
.g-fut-head .sub { margin-inline: auto; }
.g-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 30px 0; }
.g-stat { padding: 20px; border-radius: 16px; background: var(--g-card); border: 1px solid var(--g-line); display: flex; flex-direction: column; gap: 4px; transition: border-color .2s; }
.g-stat:hover { border-color: #a855f7; }
.g-stat b { font-size: 38px; font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; }
.g-stat span { color: #e8ecf8; font-size: 14.5px; }
.g-stat small { color: var(--mut); font-size: 12px; }
.g-tree { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.g-pillar { display: flex; gap: 12px; padding: 18px; border-radius: 16px; background: var(--g-card); border: 1px solid var(--g-line); border-left: 3px solid var(--a); animation: g-rise .5s ease both; animation-delay: var(--d); }
.g-pillar-ic { font-size: 26px; }
.g-pillar small { color: var(--a); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.g-pillar b { display: block; font-size: 15.5px; margin: 2px 0; }
.g-pillar p { margin: 0; font-size: 14px; color: #b9c3e6; }
.g-fut-cols { display: grid; grid-template-columns: .9fr 1.4fr; gap: 16px; margin-top: 22px; }
.g-cando ul { margin: 0; padding: 0; list-style: none; }
.g-cando li { padding: 8px 0 8px 30px; position: relative; color: #e8ecf8; border-bottom: 1px dashed var(--g-line); }
.g-cando li::before { content: '✓'; position: absolute; left: 0; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: #10b981; color: #0b1020; font-size: 12px; font-weight: 900; display: grid; place-items: center; }
.g-careers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.g-career { padding: 14px; border-radius: 14px; background: var(--g-card); border: 1px solid var(--g-line); }
.g-career span { font-size: 24px; }
.g-career b { display: block; margin: 4px 0 2px; }
.g-career p { margin: 0; font-size: 13px; color: #b9c3e6; }
.g-close { text-align: center; font-size: clamp(20px, 2.6vw, 28px); font-weight: 800; margin: 34px auto 18px; max-width: 760px; letter-spacing: -.02em; }
.g-fut-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ================= mock screens (light, like the real portals) ================= */
.m-frame { width: 640px; height: 400px; background: #f5f6fb; color: #0b1020; font: 12px/1.35 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.m-bar { height: 28px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #e7e9f3; border-bottom: 1px solid #d7dbea; }
.m-bar i { width: 9px; height: 9px; border-radius: 50%; background: #f87171; } .m-bar i:nth-child(2) { background: #fbbf24; } .m-bar i:nth-child(3) { background: #34d399; }
.m-bar span { margin-left: 10px; padding: 2px 10px; border-radius: 6px; background: #fff; color: #64748b; font-size: 11px; flex: 1; }
.m-body { flex: 1; position: relative; padding: 12px; overflow: hidden; }
.m-cols { display: flex; gap: 12px; height: 100%; }
.m-side { width: 150px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.m-side.wide { width: 190px; }
.m-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.m-row { display: flex; gap: 6px; align-items: center; }
.m-sp { flex: 1; }
.m-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 8px; font-weight: 700; background: #e2e8f0; color: #0b1020; white-space: nowrap; }
.m-primary { background: linear-gradient(120deg, #7c3aed, #6366f1); color: #fff; }
.m-run { background: #0ea5e9; color: #fff; }
.m-ok { background: #10b981; color: #fff; }
.m-ghost { background: #fff; border: 1px solid #d7dbea; }
.m-input { display: flex; flex-direction: column; padding: 6px 10px; border: 1px solid #d7dbea; border-radius: 8px; background: #fff; min-height: 38px; }
.m-input small { color: #64748b; font-size: 10px; }
.m-input.wide { width: 100%; }
.m-input.sm { flex-direction: row; gap: 8px; align-items: center; min-height: 0; }
.m-link { color: #6366f1; font-weight: 600; }
.m-chip { padding: 3px 9px; border-radius: 999px; background: #eef2ff; color: #4338ca; font-weight: 700; }
.m-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.m-chips span { padding: 4px 9px; border-radius: 999px; background: #fff; border: 1px solid #d7dbea; font-weight: 600; }
.m-chips span.on { background: #0b1020; color: #fff; border-color: #0b1020; }
.m-note { padding: 7px 10px; border-radius: 8px; background: #fef3c7; border: 1px solid #fde68a; }
.m-code { margin: 0; padding: 8px 10px; border-radius: 8px; background: #0f172a; color: #a5f3fc; font: 11px/1.5 ui-monospace, Menlo, monospace; white-space: pre; min-height: 54px; }
.m-pop { position: absolute; left: 50%; bottom: 8px; transform: translate(-50%, 20px); padding: 7px 14px; border-radius: 10px; background: #10b981; color: #fff; font-weight: 800; opacity: 0; transition: .35s; z-index: 5; white-space: nowrap; }
.m-cover { position: absolute; inset: 28px 0 0; display: grid; place-items: center; background: rgba(11,16,32,.55); opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 8; }
.m-cover > div { background: #fff; border-radius: 14px; padding: 18px 26px; text-align: center; display: flex; flex-direction: column; gap: 4px; transform: scale(.85); transition: transform .35s cubic-bezier(.2,1.4,.4,1); box-shadow: 0 20px 40px rgba(0,0,0,.3); }
.m-cover b { font-size: 16px; }
.m-cover span { color: #475569; }
.m-big { font-size: 40px; }
.is-hot { outline: 3px solid #a855f7; outline-offset: 2px; border-radius: 8px; animation: m-glow 1.4s ease-in-out infinite; position: relative; z-index: 3; }
@keyframes m-glow { 50% { outline-color: rgba(168,85,247,.35); } }

/* login */
.m-login { width: 300px; margin: 6px auto 0; padding: 16px; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(15,23,42,.12); display: flex; flex-direction: column; gap: 8px; }
.m-logo { font-weight: 900; font-size: 16px; text-align: center; }
.m-tabs { display: flex; background: #f1f5f9; border-radius: 9px; padding: 3px; }
.m-tab { flex: 1; text-align: center; padding: 5px; border-radius: 7px; font-weight: 700; color: #64748b; }
.m-tab.on { background: #fff; color: #0b1020; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.m-fields { display: flex; flex-direction: column; gap: 6px; }
.m-f-email { display: none; }
[data-cur="tab-email"] .m-f-school { display: none; } [data-cur="tab-email"] .m-f-email { display: flex; }
[data-cur="tab-email"] .m-tab.on { background: none; box-shadow: none; color: #64748b; }
[data-cur="tab-email"] [data-hot="tab-email"].m-tab { background: #fff; color: #0b1020; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.m-login .m-link { text-align: center; }
.m-pop-in { background: #6366f1; }
[data-cur="signin"] .m-pop-in { opacity: 1; transform: translate(-50%, 0); }

/* learn */
.m-gradeset, .m-weeks { background: #fff; border-radius: 10px; padding: 8px; display: flex; flex-wrap: wrap; gap: 4px; border: 1px solid #e2e8f0; }
.m-gradeset b, .m-weeks b { width: 100%; font-size: 11px; color: #64748b; }
.m-gradeset span { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: #f1f5f9; font-weight: 700; }
.m-gradeset span.on { background: linear-gradient(150deg, #10b981, #3b82f6); color: #fff; }
.m-weeks span { width: 100%; padding: 5px 8px; border-radius: 7px; background: #f8fafc; font-weight: 600; }
.m-weeks span.on { background: #eef2ff; color: #4338ca; }
.m-head { font-weight: 800; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.m-icon { padding: 2px 6px; border-radius: 6px; background: #eef2ff; }
.m-dots { display: flex; gap: 5px; }
.m-dots i { width: 22px; height: 6px; border-radius: 3px; background: #e2e8f0; }
.m-dots i.on { background: #10b981; } .m-dots i.cur { background: #7c3aed; }
.m-badge { align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: #ede9fe; color: #6d28d9; font-weight: 800; font-size: 11px; }
.m-work { display: flex; gap: 10px; align-items: stretch; flex: 1; max-height: 190px; }
.m-work .m-code { flex: 1; }
.m-canvas { width: 130px; background: #fff; border-radius: 8px; border: 1px solid #e2e8f0; display: grid; place-items: center; }
.m-square { width: 60px; height: 60px; border: 3px solid #7c3aed; clip-path: inset(0 100% 100% 0); transition: clip-path 1.2s ease; }
[data-seen~="run"] .m-square { clip-path: inset(0 0 0 0); }
.m-blocks { display: flex; flex-direction: column; gap: 3px; width: 150px; }
.m-blk { padding: 6px 9px; border-radius: 6px; color: #fff; font-weight: 700; transition: transform .4s; }
.b-go { background: #f59e0b; } .b-mv { background: #3b82f6; } .b-tn { background: #8b5cf6; }
[data-cur="code"] .m-blk:nth-child(3) { animation: m-snap .8s ease .3s both; }
@keyframes m-snap { from { transform: translate(60px, -10px) rotate(4deg); } to { transform: none; } }
.m-maze { flex: 1; background: repeating-linear-gradient(0deg, #dcfce7 0 30px, #bbf7d0 30px 60px); border-radius: 8px; position: relative; }
.m-bee { position: absolute; left: 14px; bottom: 14px; font-size: 22px; transition: transform 1.4s ease; }
.m-flower { position: absolute; right: 18px; top: 14px; font-size: 22px; }
[data-seen~="run"] .m-bee { transform: translate(140px, -70px); }
.m-stars i { font-style: normal; color: #cbd5e1; font-size: 16px; transition: color .3s, transform .3s; display: inline-block; }
[data-seen~="stars"] .m-stars i, [data-seen~="check"] .m-stars i { color: #f59e0b; transform: scale(1.15); }
[data-seen~="stars"] .m-stars i:nth-child(2) { transition-delay: .15s; } [data-seen~="stars"] .m-stars i:nth-child(3) { transition-delay: .3s; }
[data-cur="check"] .m-pop-ok { opacity: 1; transform: translate(-50%, 0); }
[data-cur="finish"] .m-cover-finish { opacity: 1; } [data-cur="finish"] .m-cover-finish > div { transform: none; }

/* coderland */
.m-tabs2 { display: flex; gap: 4px; }
.m-tabs2 span { padding: 5px 10px; border-radius: 8px 8px 0 0; background: #e2e8f0; font-weight: 700; }
.m-tabs2 span.on { background: #fff; color: #4338ca; }
.m-tabs2.sm span { border-radius: 999px; padding: 3px 10px; }
.m-out { padding: 4px 10px; border-radius: 6px; background: #0f172a; color: #86efac; font-family: ui-monospace, monospace; opacity: 0; transition: .3s; }
[data-seen~="run"] .m-out { opacity: 1; }
.m-cl-test { display: none; flex-direction: column; gap: 8px; }
[data-seen~="practice"] .m-cl-lesson { display: none; } [data-seen~="practice"] .m-cl-test { display: flex; }
[data-seen~="practice"] [data-hot="lesson"] { background: #e2e8f0; color: inherit; } [data-seen~="practice"] [data-hot="practice"] { background: #fff; color: #4338ca; }
.m-qdots { display: flex; gap: 4px; margin-left: 6px; }
.m-qdots i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #e2e8f0; font-style: normal; font-weight: 800; font-size: 10px; transition: background .3s; }
[data-seen~="checkq"] .m-qdots i { background: #10b981; color: #fff; }
[data-seen~="checkq"] .m-qdots i:nth-child(2) { transition-delay: .2s; } [data-seen~="checkq"] .m-qdots i:nth-child(3) { transition-delay: .4s; }
.m-prog { margin-top: auto; display: flex; align-items: center; gap: 8px; background: #fff; padding: 8px 10px; border-radius: 10px; border: 1px solid #e2e8f0; }
.m-prog span { font-weight: 700; white-space: nowrap; }
.m-prog b { flex: 1; height: 8px; border-radius: 4px; background: #e2e8f0; overflow: hidden; }
.m-prog b i { display: block; height: 100%; width: 35%; background: linear-gradient(90deg, #10b981, #3b82f6); transition: width 1s ease; }
.m-prog em { font-style: normal; font-weight: 800; color: #059669; opacity: 0; transition: .4s; white-space: nowrap; }
[data-seen~="progress"] .m-prog b i { width: 100%; } [data-seen~="progress"] .m-prog em { opacity: 1; }

/* battles */
.m-topnav { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.m-topnav > span:not(.m-sp):not(.m-chip) { padding: 5px 11px; border-radius: 8px; font-weight: 700; color: #475569; background: #fff; border: 1px solid #e2e8f0; }
.m-topnav > span.on { background: #0b1020; color: #fff; border-color: #0b1020; }
.m-cards { display: flex; flex-direction: column; gap: 6px; }
.m-cards.row { flex-direction: row; }
.m-cards span { padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0; display: flex; flex-direction: column; flex: 1; }
.m-cards span.on { border-color: #7c3aed; box-shadow: 0 0 0 2px #ede9fe; }
.m-cards span.lock { opacity: .55; }
.m-cards small { color: #64748b; }
.m-prob { background: #fff; padding: 8px 10px; border-radius: 10px; border: 1px solid #e2e8f0; }
.m-ex { margin-top: 4px; font-family: ui-monospace, monospace; color: #475569; }
.m-hint-body { display: none; color: #92400e; }
[data-seen~="hint"] .m-hint-body { display: inline; }
.m-ed { min-height: 64px; }
[data-cur="submit"] .m-pop-ok { opacity: 1; transform: translate(-50%, 0); }
[data-seen~="submit"] .m-pts { color: #059669; }
[data-cur="contest"] .m-cover-contest, [data-cur="leaderboard"] .m-cover-board { opacity: 1; }
[data-cur="contest"] .m-cover-contest > div, [data-cur="leaderboard"] .m-cover-board > div { transform: none; }
[data-cur="contest"] [data-hot="contest"], [data-cur="leaderboard"] [data-hot="leaderboard"] { position: relative; z-index: 9; background: #0b1020; color: #fff; }

/* ai */
.m-unlock { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #fff; border-radius: 10px; border: 1px solid #e2e8f0; margin-bottom: 8px; font-weight: 700; }
.m-unlock b { flex: 1; height: 7px; border-radius: 4px; background: #e2e8f0; overflow: hidden; }
.m-unlock b i { display: block; height: 100%; width: 17%; background: linear-gradient(90deg, #a855f7, #06b6d4); }
.m-ai-pick { display: flex; flex-direction: column; gap: 8px; }
.m-ai-work { display: none; height: 250px; }
[data-seen~="build"] .m-ai-pick { display: none; } [data-seen~="build"] .m-ai-work { display: flex; }
.m-term { flex: 1; background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 10px; font: 11px/1.6 ui-monospace, Menlo, monospace; position: relative; }
.m-dim { color: #86efac; opacity: 0; transition: .4s .9s; }
[data-seen~="terminal"] .m-dim { opacity: 1; }
.m-count { position: absolute; right: 8px; top: 8px; padding: 2px 7px; border-radius: 6px; background: #1e293b; color: #fbbf24; }
.m-prev { flex: 1.1; display: flex; flex-direction: column; gap: 6px; }
.m-stagebox { flex: 1; background: radial-gradient(circle at 30% 20%, #4c1d95, #1e1b4b); border-radius: 10px; position: relative; overflow: hidden; }
.m-ball { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fbbf24; left: 20px; top: 20px; animation: m-bounce 2.2s linear infinite alternate; }
[data-seen~="terminal"] .m-ball { animation-duration: 1s; }
.m-paddle { position: absolute; bottom: 12px; left: 40%; width: 60px; height: 8px; border-radius: 4px; background: #a855f7; animation: m-pad 2.2s ease-in-out infinite alternate; }
@keyframes m-bounce { 0% { transform: translate(0, 0); } 25% { transform: translate(200px, 130px); } 50% { transform: translate(40px, 150px); } 75% { transform: translate(220px, 10px); } 100% { transform: translate(90px, 120px); } }
@keyframes m-pad { to { left: 15%; } }
.m-codeview { position: absolute; inset: 0; padding: 10px; background: #0f172a; color: #a5f3fc; font: 11px ui-monospace, monospace; display: none; }
[data-cur="showcode"] .m-codeview { display: block; }
[data-cur="stop"] .m-ball, [data-cur="stop"] .m-paddle { display: none; }
.m-modal { position: absolute; left: 50%; top: 50%; width: 300px; transform: translate(-50%, -40%) scale(.9); background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 20px 50px rgba(15,23,42,.35); display: flex; flex-direction: column; gap: 10px; opacity: 0; pointer-events: none; transition: .3s; z-index: 6; }
[data-cur="picker"] .m-modal, [data-cur="build"] .m-modal { opacity: 1; transform: translate(-50%, -50%); }

/* si */
.m-strip { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; border-radius: 8px; background: #1e1b4b; color: #e0e7ff; margin-bottom: 8px; }
.m-si-hub { display: flex; flex-direction: column; gap: 8px; }
.m-continue { padding: 10px 12px; border-radius: 12px; background: linear-gradient(120deg, #7c3aed, #06b6d4); color: #fff; display: flex; flex-direction: column; }
.m-doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.m-doors > span { padding: 8px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0; text-align: center; font-size: 18px; display: flex; flex-direction: column; }
.m-doors b { font-size: 11px; }
.m-doors small, .m-ys-cards small { font-size: 9px; color: #b45309; font-weight: 700; }
.m-doors .lock, .m-ys-cards .lock { opacity: .55; }
.m-unit { display: flex; align-items: center; padding: 8px 12px; background: #fff; border-radius: 10px; border: 1px solid #e2e8f0; }
.m-unit i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #e2e8f0; font-style: normal; font-weight: 800; }
.m-unit i.d { background: #10b981; color: #fff; } .m-unit i.c { background: #7c3aed; color: #fff; }
.m-unit em { flex: 1; height: 3px; background: #e2e8f0; }
.m-si-lesson { display: none; flex-direction: column; gap: 8px; }
[data-seen~="predict"] .m-si-hub { display: none; } [data-seen~="predict"] .m-si-lesson { display: flex; }
.m-prim { display: flex; gap: 3px; flex-wrap: wrap; }
.m-prim span { padding: 3px 7px; border-radius: 999px; background: #e2e8f0; font-weight: 700; font-size: 10.5px; }
.m-prim span.on { background: #7c3aed; color: #fff; }
.m-q { padding: 18px; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; font-size: 14px; font-weight: 700; text-align: center; }
.m-si-lesson .m-run { opacity: .4; }
[data-seen~="predict"] [data-hot="predict"] { background: #059669; }
[data-seen~="run"] .m-si-lesson .m-run, [data-cur="run"] .m-si-lesson .m-run { opacity: 1; }
[data-seen~="dojo"] .m-si-hub [data-hot="dojo"], [data-seen~="desk"] .m-si-hub [data-hot="desk"] { background: #ede9fe; }
[data-cur="sticker"] .m-cover-sticker { opacity: 1; } [data-cur="sticker"] .m-cover-sticker > div { transform: none; }
[data-cur="dojo"] .m-si-hub, [data-cur="arena"] .m-si-hub, [data-cur="desk"] .m-si-hub, [data-cur="doors"] .m-si-hub, [data-cur="continue"] .m-si-hub, [data-cur="unitmap"] .m-si-hub, [data-cur="settings"] .m-si-hub { display: flex; }
[data-cur="dojo"] .m-si-lesson, [data-cur="arena"] .m-si-lesson, [data-cur="desk"] .m-si-lesson, [data-cur="doors"] .m-si-lesson, [data-cur="continue"] .m-si-lesson, [data-cur="unitmap"] .m-si-lesson, [data-cur="settings"] .m-si-lesson { display: none; }

/* yourspace (warm, its own look) */
.m-frame.m-warm { background: #f5f1ea; }
.m-ys { display: flex; flex-direction: column; gap: 9px; height: 100%; position: relative; }
.m-ys-top { display: flex; align-items: center; gap: 10px; }
.m-ys-top small { display: block; color: #57534e; }
.m-diya { font-size: 32px; animation: m-flicker 2.4s ease-in-out infinite; display: inline-block; }
@keyframes m-flicker { 50% { transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 0 8px #fbbf24); } }
.m-ys-main { background: #0f766e; color: #fff; padding: 10px; font-size: 13px; border-radius: 12px; }
.m-ys-weather { display: none; gap: 8px; align-items: center; font-size: 22px; padding: 4px 10px; background: #fff; border-radius: 12px; }
.m-ys-weather span.on { background: #ccfbf1; border-radius: 10px; padding: 0 4px; }
.m-ys-weather .m-link { font-size: 12px; margin-left: auto; color: #0f766e; }
[data-seen~="weather"] .m-ys-weather { display: flex; }
.m-ys-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.m-ys-cards > span { padding: 8px; border-radius: 12px; background: #fff; text-align: center; font-size: 18px; display: flex; flex-direction: column; border: 1px solid #e7e0d4; }
.m-ys-cards b { font-size: 11px; color: #134e4a; }
.m-talk { position: absolute; right: 4px; bottom: 4px; padding: 7px 12px; border-radius: 999px; background: #b45309; color: #fff; font-weight: 800; box-shadow: 0 6px 14px rgba(180,83,9,.35); }
[data-seen~="garden"] [data-hot="garden"] { animation: m-grow .8s ease; }
@keyframes m-grow { 40% { transform: scale(1.12); } }

/* app */
.m-app-explore { display: flex; flex-direction: column; gap: 8px; }
.m-list { display: flex; flex-direction: column; gap: 5px; }
.m-list > div { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: #fff; border-radius: 9px; border: 1px solid #e2e8f0; font-weight: 600; }
.m-done { color: #059669; font-weight: 800; }
.m-app-progress { display: none; gap: 8px; }
.m-app-progress span { flex: 1; padding: 16px; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; text-align: center; color: #475569; }
.m-app-progress b { display: block; font-size: 26px; color: #0b1020; }
[data-cur="tab-progress"] .m-app-explore, [data-cur="counters"] .m-app-explore { display: none; }
[data-cur="tab-progress"] .m-app-progress, [data-cur="counters"] .m-app-progress { display: flex; }
[data-cur="tab-progress"] .m-topnav > span.on, [data-cur="counters"] .m-topnav > span.on { background: #fff; color: #475569; border-color: #e2e8f0; }
[data-cur="tab-progress"] [data-hot="tab-progress"], [data-cur="counters"] [data-hot="tab-progress"] { background: #0b1020; color: #fff; }

/* responsive */
@media (max-width: 1080px) {
  .g-player { grid-template-columns: 1fr; }
  .g-now { display: block; }
  .g-stage-wrap { position: static; }
  .g-steps { max-height: none; }
  .g-week { grid-template-columns: repeat(4, 1fr); }
  .g-tree { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .g-hero-in { grid-template-columns: 1fr; }
  .g-layout { grid-template-columns: 1fr; }
  .g-rail { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .g-rail-i { white-space: nowrap; flex: none; }
  .g-after, .g-fut-cols { grid-template-columns: 1fr; }
  .g-meter span:last-child { display: none; }
  .g-grade-q { display: none; }
  .g-ph { flex-wrap: wrap; }
  .g-open { margin-left: 0; }
}
@media (max-width: 560px) {
  .g-grade { position: static; }
  #g-portals, #g-week, #g-habits, #g-future { scroll-margin-top: calc(var(--g-top, 58px) + 8px); }
  .wrap { padding: 0 16px; }
  .g-week { grid-template-columns: repeat(2, 1fr); }
  .g-tree { grid-template-columns: 1fr; }
  .g-band { padding: 7px 10px; }
  .g-band small { display: none; }
  .g-section { padding: 40px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .g-node { opacity: 1; }
}