/* Coding Classroom v0.6.3 — visual system refresh */
:root{
  --cc-navy:#102f57;
  --cc-blue:#2f6edc;
  --cc-blue-2:#5b8ff0;
  --cc-sky:#eaf3ff;
  --cc-cyan:#38a6ea;
  --cc-mint:#72c8f4;
  --cc-gold:#f4b642;
  --cc-paper:#ffffff;
  --cc-bg:#f4f7fb;
  --cc-ink:#16304f;
  --cc-muted:#667890;
  --cc-line:#dce5f0;
  --cc-soft-shadow:0 12px 34px rgba(23,55,96,.08);
  --cc-card-shadow:0 18px 50px rgba(31,67,111,.10);
  --cc-radius:20px;
}
html{scroll-behavior:smooth}
body{
  color:var(--cc-ink);
  background:
    radial-gradient(circle at 7% 3%,rgba(91,143,240,.10),transparent 24rem),
    radial-gradient(circle at 96% 12%,rgba(56,166,234,.10),transparent 22rem),
    linear-gradient(180deg,#f8fbff 0,#f4f7fb 42%,#f7f9fc 100%);
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(22,48,79,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(22,48,79,.018) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,#000 0,transparent 58%)}

.site-header{
  min-height:78px;
  padding:12px max(24px,calc((100vw - 1280px)/2));
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(205,219,235,.82);
  box-shadow:0 10px 36px rgba(28,61,101,.07);
  backdrop-filter:blur(20px) saturate(135%);
}
.site-brand{gap:12px;font-weight:800;color:var(--cc-navy)}
.brand-mark{width:48px;height:48px;padding:5px;border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(30,72,120,.13);border:1px solid #e2eaf4}
.brand-secondary{font-weight:550;color:#55708f}
.main-nav{gap:6px}
.main-nav a{position:relative;border-radius:11px;padding:10px 14px;font-weight:650;color:#51657e;transition:background .18s,color .18s,transform .18s}
.main-nav a:hover{background:#f2f6fb;color:#244d80;transform:translateY(-1px)}
.main-nav a.active{background:linear-gradient(180deg,#edf4ff,#e7f0fd);border-color:#d6e4f7;color:#174f9f;box-shadow:inset 0 0 0 1px rgba(47,110,220,.06)}
.xp-pill{background:linear-gradient(180deg,#fffaf0,#fff6dc);border-color:#f0dda7;color:#7b5a15;border-radius:11px;padding:8px 13px}
.sound-button,.header-right select{border-radius:11px;border-color:#d7e1ec;background:rgba(255,255,255,.92)}
.sound-button:hover,.header-right select:hover{border-color:#acc3df}

main{width:min(1280px,calc(100% - 48px));margin-bottom:56px}.page-view{padding-top:38px}
.home-hero{
  position:relative;
  overflow:hidden;
  border:1px solid #d9e7f7;
  border-radius:28px;
  padding:50px 48px;
  gap:50px;
  background:
    radial-gradient(circle at 88% 15%,rgba(255,255,255,.90),transparent 23%),
    radial-gradient(circle at 75% 90%,rgba(80,178,238,.16),transparent 28%),
    linear-gradient(135deg,#edf5ff 0%,#f8fbff 55%,#eef8ff 100%);
  box-shadow:0 24px 65px rgba(34,76,123,.10);
}
.home-hero:before{content:"</>";position:absolute;right:-18px;top:-46px;font:900 150px/1 ui-monospace,monospace;color:rgba(47,110,220,.055);transform:rotate(-8deg);pointer-events:none}
.home-hero:after{content:"";position:absolute;left:32px;bottom:0;width:220px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--cc-blue),var(--cc-cyan),transparent);opacity:.7}
.hero-content{position:relative;z-index:1}.hero-label{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid #dbe8f7;color:#245fae;font-weight:800;letter-spacing:.06em;margin-bottom:20px;box-shadow:0 6px 18px rgba(34,76,123,.06)}
.hero-label>span{border-left:1px solid #d3e0ef;color:#637995;padding-left:11px}
.home-hero h1{font-size:clamp(2.25rem,3.3vw,3.25rem);font-weight:780;line-height:1.26;letter-spacing:-.035em;color:#112f55}
.home-hero h1>span{color:#2d6ed1;background:linear-gradient(90deg,#2e6ed3,#3188b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-content>p:not(.hero-label){max-width:720px;color:#5c7089;font-size:1.02rem;line-height:1.95}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:11px}
.primary-cta,.secondary-cta,.teacher-cta{border-radius:12px;min-height:50px;padding:11px 20px;font-weight:750;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s}
.primary-cta{background:linear-gradient(135deg,#2f6edc,#265fc4);border-color:#2f6edc;box-shadow:0 10px 24px rgba(47,110,220,.22)}
.primary-cta:hover{background:linear-gradient(135deg,#2864cf,#1f56b5);box-shadow:0 14px 30px rgba(47,110,220,.26);transform:translateY(-2px)}
.secondary-cta,.teacher-cta{background:rgba(255,255,255,.86);border:1px solid #cfdeef;color:#284e79;box-shadow:0 7px 18px rgba(34,76,123,.06)}
.secondary-cta:hover,.teacher-cta:hover{background:#fff;border-color:#a9c2e0;transform:translateY(-1px)}
.hero-footnote{margin-top:24px;color:#6d7e93}.hero-footnote i{width:4px;height:4px;border-radius:999px;background:#90a6bd;align-self:center}

.continue-card{position:relative;border-radius:22px;padding:30px 30px 26px;background:linear-gradient(155deg,#102f57 0%,#173d69 55%,#215381 100%);border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 48px rgba(16,47,87,.22)}
.continue-card:after{content:"";position:absolute;inset:auto -50px -65px auto;width:190px;height:190px;border-radius:50%;border:34px solid rgba(255,255,255,.045);pointer-events:none}
.continue-card h2{font-size:1.42rem;font-weight:750}.continue-track{border-radius:999px;background:rgba(255,255,255,.08)}
.continue-link{position:relative;z-index:1;border-radius:11px;background:#fff;color:#173a65;font-weight:750;transition:transform .18s,box-shadow .18s}.continue-link:hover{background:#fff;transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.10)}
.continue-card .meter{height:6px;border-radius:999px}.continue-card .meter>span{background:linear-gradient(90deg,#75b6ff,#73c5f2)}

.audience-gateway{gap:20px;margin:28px 0 38px}
.audience-card{overflow:hidden;border-radius:18px;padding:25px 27px;border-color:#dbe5f0;box-shadow:0 12px 30px rgba(31,67,111,.055);background:rgba(255,255,255,.88)}
.audience-card:after{content:"";position:absolute;right:-38px;bottom:-55px;width:145px;height:145px;border-radius:50%;background:rgba(47,110,220,.045);transition:transform .25s}
.audience-card.teacher:after{background:rgba(63,87,115,.05)}
.audience-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(31,67,111,.10)}.audience-card:hover:after{transform:scale(1.15)}
.audience-icon{border-radius:16px;width:54px;height:54px;box-shadow:inset 0 0 0 1px rgba(47,110,220,.08)}
.audience-card h2{font-size:1.24rem;font-weight:760;color:#17375f}.audience-card strong{color:#2b64b7}

.section-heading h2{font-weight:760;color:#173557}.eyebrow{font-weight:750;color:#6d7e94;letter-spacing:.035em}.focus-section{border-top:0;padding-top:4px}.focus-grid{gap:18px}
.focus-card{position:relative;overflow:hidden;border-radius:18px;padding:28px;border-color:#d9e4f0;box-shadow:0 10px 28px rgba(31,67,111,.05);transition:transform .18s,border-color .18s,box-shadow .18s}
.focus-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#2f6edc,#4aaee8)}
.focus-card.middle{background:linear-gradient(135deg,#f3f7ff,#edf5ff)}.focus-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(31,67,111,.09)}
.focus-age{font-weight:750}.focus-card h3{font-size:1.48rem;font-weight:760;color:#17375f}.focus-card-bottom{border-color:#e1e9f2}
.other-tracks{border:1px solid #e0e8f1;background:rgba(255,255,255,.72);border-radius:14px;padding:2px 18px}.other-tracks summary{font-weight:650;color:#526983}
.home-progress{border-radius:18px;padding:28px 30px;border-color:#dce5ef;box-shadow:0 12px 30px rgba(31,67,111,.05)}
.meter{height:7px;border-radius:999px;overflow:hidden}.meter>span{background:linear-gradient(90deg,#2f6edc,#54a0df,#79c9f2)}
.mini-badge>span{border-radius:12px;background:#f5f8fc}

.page-heading{padding:8px 0 30px}.page-heading h1{font-size:clamp(1.9rem,3vw,2.5rem);font-weight:780;color:#173557}.page-heading p:not(.eyebrow){max-width:760px;color:#6a7a90}
.track-tab{border-radius:13px;padding:12px 15px;transition:transform .18s,border-color .18s,box-shadow .18s}.track-tab:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,67,111,.06)}.track-tab.selected{background:linear-gradient(180deg,#eff5ff,#eaf2fd);border-color:#9fbbe0;box-shadow:inset 0 0 0 1px rgba(47,110,220,.04)}
.map-summary{border-radius:16px;box-shadow:0 9px 24px rgba(31,67,111,.045)}
.world-section{border-radius:18px;padding:28px;background:rgba(255,255,255,.88);box-shadow:0 13px 34px rgba(31,67,111,.05)}
.world-number{border-radius:13px;background:linear-gradient(145deg,#edf3fb,#e3edf9);color:#365e8d;font-weight:750}
.lesson-node{border-radius:14px;min-height:195px;box-shadow:0 7px 18px rgba(31,67,111,.035);transition:transform .18s,border-color .18s,box-shadow .18s}.lesson-node.available:hover,.lesson-node.completed:hover{transform:translateY(-3px);border-color:#7ea3d0;box-shadow:0 13px 26px rgba(31,67,111,.08)}
.node-index{border-radius:9px}.node-state{border-radius:999px;padding:4px 9px}

.unit-nav a,.unit-article,.unit-progress-summary article{border-radius:15px}.unit-article{padding:36px 42px;box-shadow:0 14px 36px rgba(31,67,111,.055)}
.quiz-options label{border-radius:11px;transition:border-color .15s,background .15s}.quiz-options label:hover{border-color:#a9bed8}
.demo-grid{border-radius:13px}.demo-line{border-radius:9px;margin-bottom:6px;border:1px solid #e2e9f2}.demo-line.active{border-color:#719bd5}

/* Coding Lab: unify the visual language while keeping strong editor affordances. */
.lab-heading{margin-bottom:14px;color:#60738a}.lab-heading>a{color:#2d64b4;font-weight:650}
.mission-strip{border-radius:16px;padding:17px 19px;border-color:#dce6f0;box-shadow:0 10px 28px rgba(31,67,111,.055)}
.mission-tab{border-radius:10px;padding:10px 14px}.mission-tab.active{background:#eaf6ff;border-color:#9bcff0;color:#246aa2}
.workspace-shell{gap:18px}
.lesson-panel,.program-panel,.stage-panel,.senior-mode .lesson-panel,.senior-mode .program-panel,.senior-mode .stage-panel{border-radius:18px;border-color:#dce5ef;box-shadow:0 14px 34px rgba(31,67,111,.065)}
.lesson-panel{background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}
.lesson-badge{border-radius:999px;background:#ebf4ff;color:#2865b5}.lesson-head h2{font-size:1.32rem;font-weight:760;color:#173557}
.goal-card{border-radius:12px;background:linear-gradient(135deg,#fff9e8,#fffdf7);border-color:#efdeb1}.tips,.lesson-prep,.hint-panel{border-radius:12px}
.program-panel{position:relative;overflow:hidden}.program-panel:before{content:"WORKSPACE";position:absolute;right:20px;top:12px;font:750 10px/1 ui-monospace,monospace;letter-spacing:.13em;color:#a4b3c4;pointer-events:none}
.editor-modes{border-radius:10px;background:#eef3f8;padding:4px}.editor-modes button{border-radius:8px;font-weight:700}.editor-modes button.active{box-shadow:0 4px 10px rgba(31,67,111,.08)}
.dropzone{border-radius:12px;background:linear-gradient(180deg,#fbfdff,#f7fafe);border-color:#bed0e1}
.code-block,.program-item{border-radius:10px}.code-block:hover{transform:translateY(-1px)}
.run-btn,.reset-btn,.stop-btn,.ghost-btn,.next-btn{border-radius:10px}.run-btn{background:linear-gradient(135deg,#178a67,#1b765d);box-shadow:0 8px 18px rgba(24,128,96,.16)}
.code-preview{border-radius:11px}.code-preview summary{background:#f4f7fa}.code-preview pre{background:#122131;color:#d8f7e8}
.stage-panel{background:linear-gradient(180deg,#fff,#fbfdff)}.stage-wrap{border-radius:13px;background:#f4f8fc}.stage{border-radius:10px;box-shadow:inset 0 0 0 1px rgba(34,73,118,.06)}
.mobile-lab-tabs{border-radius:13px;box-shadow:0 8px 20px rgba(31,67,111,.06)}

.progress-summary article,.badge-section,.track-progress,.transfer-card{border-radius:16px;box-shadow:0 10px 26px rgba(31,67,111,.045)}
.badge-card,.badge-card.earned{border-radius:13px}.badge-medal,.badge-card.earned .badge-medal{border-radius:16px}

.info-heading{padding-top:4px}.info-card{border-radius:16px;border-color:#dce5ef;box-shadow:0 10px 28px rgba(31,67,111,.045)}
.share-classroom{border-radius:20px;background:linear-gradient(135deg,#12335d 0%,#1d5790 72%,#247aa0 100%);box-shadow:0 18px 44px rgba(23,55,96,.16)}
.share-box{border-radius:14px}.share-row input{border-radius:10px}.qr-panel{border-radius:14px}.teacher-note{border-radius:14px}
.about-main,.developer-card{border-radius:18px}.about-main{box-shadow:0 10px 28px rgba(31,67,111,.045)}.developer-card{background:linear-gradient(155deg,#12335d,#1d5689);box-shadow:0 18px 42px rgba(23,55,96,.16)}
.feature-pills span{border-radius:999px;background:#edf4fd;color:#345d8d}

.site-footer-v062{position:relative;margin-top:18px;padding-top:30px;padding-bottom:30px;background:linear-gradient(180deg,#fff,#f9fbfd);border-top:1px solid #dce5ef;box-shadow:0 -10px 32px rgba(31,67,111,.035)}
.site-footer-v062:before{content:"";position:absolute;left:max(18px,calc((100% - 1280px)/2));right:max(18px,calc((100% - 1280px)/2));top:0;height:3px;background:linear-gradient(90deg,#2f6edc,#4ab5cc,#65bb9f,transparent 82%);border-radius:999px}
.footer-brand img{width:42px;height:42px;padding:3px;border-radius:12px;background:#fff;border:1px solid #e1e8f1;box-shadow:0 7px 18px rgba(31,67,111,.07)}
.footer-developer strong{font-size:.94rem;color:#294e78}.footer-version strong{display:inline-flex;padding:4px 9px;border-radius:999px;background:#edf3fb;color:#294f7c;width:max-content;margin-left:auto}

:focus-visible{outline:3px solid rgba(47,110,220,.32);outline-offset:3px}

@media(max-width:1200px){
  .home-hero{padding:40px 34px;gap:32px}
  .site-header{padding-left:24px;padding-right:24px}
}
@media(max-width:960px){
  .home-hero{grid-template-columns:1fr 1fr;padding:34px 28px}.home-hero h1{font-size:2.25rem}
  .continue-card{padding:25px}
}
@media(max-width:700px){
  body{background:linear-gradient(180deg,#f8fbff,#f5f8fb)}body:before{display:none}
  main{width:calc(100% - 28px)}.page-view{padding-top:24px}
  .site-header{padding:10px 14px;gap:8px}.brand-mark{width:40px;height:40px;border-radius:12px}.site-brand{gap:8px}
  .main-nav{padding:3px 0 1px;overflow:auto;justify-content:flex-start}.main-nav a{padding:8px 11px;border-radius:9px;font-size:.83rem}
  .home-hero{grid-template-columns:1fr;padding:25px 20px 27px;border-radius:20px;gap:24px}.home-hero:before{font-size:96px;top:-28px}.home-hero h1{font-size:clamp(2rem,8.5vw,2.55rem);line-height:1.32}.hero-label{width:auto;font-size:.7rem}.hero-content>p:not(.hero-label){font-size:.94rem;line-height:1.8}.desktop-break{display:none}
  .hero-actions>*{flex:1 1 calc(50% - 6px);min-width:132px}.hero-actions .primary-cta{flex-basis:100%}
  .hero-footnote{flex-wrap:wrap}.hero-footnote i{display:none}
  .continue-card{border-radius:16px;padding:23px}.audience-card{border-radius:15px;padding:20px}.focus-card{border-radius:15px;padding:22px}.home-progress{border-radius:15px;padding:22px}
  .world-section{border-radius:15px;padding:18px}.lesson-node{border-radius:12px}
  .unit-article{border-radius:15px;padding:22px 18px}
  .lesson-panel,.program-panel,.stage-panel,.senior-mode .lesson-panel,.senior-mode .program-panel,.senior-mode .stage-panel{border-radius:14px}
  .site-footer-v062{padding-top:26px;padding-bottom:26px}.footer-version strong{margin-left:0}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.main-nav a,.primary-cta,.secondary-cta,.teacher-cta,.audience-card,.focus-card,.lesson-node,.continue-link{transition:none!important}.main-nav a:hover,.primary-cta:hover,.secondary-cta:hover,.teacher-cta:hover,.audience-card:hover,.focus-card:hover,.lesson-node:hover,.continue-link:hover{transform:none!important}}