:root{
  color-scheme:light;
  --ink:#101318;
  --paper:#f7f2e8;
  --surface:#fffaf0;
  --surface-2:#fffdf7;
  --line:#211b1220;
  --muted:#5d6470;
  --green:#1f8a70;
  --blue:#246bfe;
  --coral:#ee6a4d;
  --yellow:#f0b429;
  --dark:#151a21;
  --shadow:0 24px 70px rgba(22,18,10,.14);
  --ease:cubic-bezier(.2,.8,.2,1);
  --focus:#246bfe;
  --focus-ring:0 0 0 4px rgba(36,107,254,.26);
  --ring-track:#e5dac7;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#f6f8fb;
  --paper:#0e131a;
  --surface:#151b24;
  --surface-2:#1b2430;
  --line:#ffffff24;
  --muted:#b8c3cf;
  --green:#5be0ba;
  --blue:#89aaff;
  --coral:#ff9a83;
  --yellow:#ffd76a;
  --dark:#080b10;
  --shadow:0 24px 70px rgba(0,0,0,.38);
  --focus:#ffd76a;
  --focus-ring:0 0 0 4px rgba(255,215,106,.34);
  --ring-track:#2b3543;
}
html[data-contrast="high"]{
  --line:currentColor;
  --muted:currentColor;
  --shadow:none;
  --focus:#ffbf00;
  --focus-ring:0 0 0 5px rgba(255,191,0,.55);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
html[data-font-size="large"] body{font-size:112.5%}
html[data-font-size="xlarge"] body{font-size:125%}
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--ink);
  background:
    linear-gradient(90deg, rgba(16,19,24,.035) 1px, transparent 1px),
    linear-gradient(rgba(16,19,24,.035) 1px, transparent 1px),
    radial-gradient(circle at 8% 12%, rgba(31,138,112,.12), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(238,106,77,.13), transparent 22%),
    var(--paper);
  background-size:32px 32px;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg, transparent 0 48%, rgba(16,19,24,.05) 48% 49%, transparent 49% 100%),
    repeating-linear-gradient(0deg, rgba(16,19,24,.025) 0 1px, transparent 1px 7px);
  opacity:.75;
  mix-blend-mode:multiply;
}
a,button,input,textarea{touch-action:manipulation}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea{font:inherit}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:0}
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:4px;
  box-shadow:var(--focus-ring);
}
.skip-link{
  position:fixed;
  left:16px;
  top:16px;
  z-index:999;
  padding:12px 16px;
  border-radius:8px;
  background:var(--ink);
  color:var(--paper);
  font-weight:900;
  transform:translateY(-140%);
  transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translateY(0)}
@keyframes riseIn{
  from{opacity:0;transform:translateY(24px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes floatSoft{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes glowSweep{
  from{transform:translateX(-120%) skewX(-16deg)}
  to{transform:translateX(180%) skewX(-16deg)}
}
@keyframes pulseLine{
  0%,100%{opacity:.35;transform:scaleX(.72)}
  50%{opacity:1;transform:scaleX(1)}
}
@keyframes borderPulse{
  0%,100%{box-shadow:var(--shadow)}
  50%{box-shadow:0 28px 88px rgba(36,107,254,.22)}
}
.entry-body{min-height:100vh;background:var(--dark);color:#fff}
.entry-layout{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.1fr .9fr;
}
.entry-visual{
  position:relative;
  display:grid;
  align-content:space-between;
  min-height:100vh;
  padding:36px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(31,138,112,.45), transparent 26%),
    radial-gradient(circle at 86% 74%, rgba(238,106,77,.38), transparent 28%),
    linear-gradient(135deg,#11161d,#202632 58%,#11161d);
}
.entry-visual::after{
  content:"";
  position:absolute;
  inset:10%;
  border:1px solid rgba(255,255,255,.12);
  transform:rotate(-4deg);
}
.brand-strip,.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
}
.brand-strip{position:relative;z-index:1}
.brand-strip img,.brand img{
  width:44px;
  height:44px;
  border-radius:8px;
  object-fit:cover;
}
.mission-board{
  position:relative;
  z-index:1;
  width:min(680px,100%);
  margin:auto;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:rgba(6,10,16,.78);
  box-shadow:0 34px 100px rgba(0,0,0,.38);
  overflow:hidden;
  animation:riseIn .8s var(--ease) both, floatSoft 7s ease-in-out 1s infinite;
}
.mission-board::before,.module-tile::after,.activity-panel::after,.review-card::after{
  content:"";
  position:absolute;
  inset:-20% auto -20% 0;
  width:42%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  opacity:.55;
  animation:glowSweep 5.6s ease-in-out infinite;
  pointer-events:none;
}
.board-top{display:flex;gap:8px;padding:18px;border-bottom:1px solid rgba(255,255,255,.1)}
.board-top span{width:12px;height:12px;border-radius:50%;background:var(--coral)}
.board-top span:nth-child(2){background:var(--yellow)}
.board-top span:nth-child(3){background:var(--green)}
.code-radar{
  position:absolute;
  right:28px;
  top:58px;
  width:150px;
  height:150px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  color:#c8ffea;
}
.radar-line{
  position:absolute;
  width:1px;
  height:68px;
  background:var(--green);
  transform-origin:bottom;
  animation:sweep 4s linear infinite;
}
@keyframes sweep{to{transform:rotate(360deg)}}
pre{margin:0;padding:92px 30px 34px;color:#e9fff6;font-size:clamp(.95rem,2vw,1.2rem);line-height:1.8;white-space:pre-wrap}
.entry-panel{
  display:grid;
  align-content:center;
  padding:clamp(28px,6vw,72px);
  background:var(--surface);
  color:var(--ink);
  animation:riseIn .7s var(--ease) .12s both;
}
.tag{
  display:inline-flex;
  width:max-content;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--green);
  background:#ffffffa8;
  font-weight:800;
  font-size:.82rem;
}
.entry-panel h1,.studio-hero h1,.module-hero h1{
  margin:16px 0;
  font-size:clamp(3.2rem,8vw,6.4rem);
  line-height:.9;
}
.entry-panel p,.hero-copy p,.studio-section p,.module-hero p,.lesson-card p,.activity-panel p{
  color:var(--muted);
  line-height:1.75;
}
.entry-highlights{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:22px 0 8px;
  max-width:520px;
}
.entry-highlights div{
  padding:16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 32px rgba(22,18,10,.08);
  animation:riseIn .65s var(--ease) both;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.entry-highlights div:nth-child(2){animation-delay:.08s}
.entry-highlights div:nth-child(3){animation-delay:.16s}
.entry-highlights div:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 46px rgba(22,18,10,.14);
}
.entry-highlights strong{
  display:block;
  font:800 1.55rem "Space Grotesk";
}
.entry-highlights span{
  color:var(--muted);
  font-size:.88rem;
  font-weight:700;
}
.entry-form{display:grid;gap:12px;margin-top:18px;max-width:460px}
label{font-weight:800}
input,textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  padding:15px 16px;
  background:#fff;
  color:var(--ink);
  outline:none;
}
input::placeholder,textarea::placeholder{color:color-mix(in srgb, var(--muted) 82%, transparent)}
textarea{min-height:130px;resize:vertical}
input:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(36,107,254,.12)}
.primary-action,.secondary-action,.ghost-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 22px;
  border-radius:8px;
  border:1px solid var(--line);
  font-weight:900;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.primary-action{background:var(--ink);color:#fff;border-color:var(--ink)}
.primary-action:hover,.secondary-action:hover,.ghost-action:hover,.ai-action:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(16,19,24,.18);
}
.primary-action::after,.secondary-action::after,.ghost-action::after,.ai-action::after{
  content:"";
  position:absolute;
  inset:-30% auto -30% -40%;
  width:36%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-120%) skewX(-16deg);
}
.primary-action:hover::after,.secondary-action:hover::after,.ghost-action:hover::after,.ai-action:hover::after{
  animation:glowSweep 1.1s ease;
}
.ai-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 22px;
  border-radius:8px;
  border:1px solid rgba(36,107,254,.28);
  font-weight:900;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--green));
  box-shadow:0 14px 34px rgba(36,107,254,.18);
  position:relative;
  overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.ai-action:disabled{opacity:.62;cursor:wait}
.secondary-action,.ghost-action{background:#fff;color:var(--ink)}
.compact{min-height:46px;width:max-content}
.form-alert,.activity-status{min-height:24px;color:var(--coral);font-weight:700}
.a11y-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-left:auto;
}
.entry-panel .a11y-toolbar{
  justify-content:flex-start;
  margin:0 0 18px;
}
.a11y-toolbar .ghost-action{
  min-height:42px;
  padding:0 14px;
}
.a11y-font-group{
  display:inline-flex;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-2);
}
.a11y-font-group .ghost-action{
  border:0;
  border-radius:0;
  background:transparent;
}
.a11y-font-group .ghost-action + .ghost-action{border-left:1px solid var(--line)}
.settings-menu{
  position:relative;
  z-index:20;
}
.settings-menu summary{
  list-style:none;
  user-select:none;
}
.settings-menu summary::-webkit-details-marker{display:none}
.settings-menu summary::after{
  content:"";
  width:8px;
  height:8px;
  margin-left:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s var(--ease);
}
.settings-menu[open] summary::after{
  transform:rotate(225deg) translateY(-1px);
}
.settings-panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:min(260px, calc(100vw - 36px));
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  color:var(--ink);
  box-shadow:var(--shadow);
}
.settings-panel .ghost-action,
.settings-panel .primary-action,
.settings-panel .secondary-action{
  width:100%;
}
.settings-panel .a11y-font-group{
  width:100%;
}
.settings-panel .a11y-font-group .ghost-action{
  flex:1;
}
.danger-action{
  color:var(--coral);
}
.a11y-status{
  min-width:1px;
  min-height:1px;
}
.visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.app-header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px clamp(18px,4vw,48px);
  background:rgba(247,242,232,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
  animation:riseIn .55s var(--ease) both;
}
.desktop-nav{display:flex;gap:22px;font-weight:800;color:var(--muted)}
.desktop-nav a{
  position:relative;
  transition:color .2s var(--ease);
}
.desktop-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background:linear-gradient(90deg,var(--green),var(--blue));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .24s var(--ease);
}
.desktop-nav a:hover{color:var(--ink)}
.desktop-nav a:hover::after{transform:scaleX(1)}
.studio-hero{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:28px;
  align-items:stretch;
  padding:clamp(40px,8vw,92px) clamp(18px,4vw,48px);
}
.hero-copy{
  min-height:430px;
  display:grid;
  align-content:end;
  padding:34px;
  border-radius:8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,250,240,.76)),
    linear-gradient(120deg, var(--green), var(--blue));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  animation:riseIn .75s var(--ease) both;
}
.hero-copy::before{
  position:absolute;
  right:-80px;
  top:-80px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:conic-gradient(from 80deg,var(--green),var(--blue),var(--coral),var(--green));
  opacity:.18;
  animation:floatSoft 6s ease-in-out infinite;
}
.hero-copy::after{
  content:"";
  position:absolute;
  right:34px;
  top:34px;
  width:170px;
  height:170px;
  border:1px solid rgba(16,19,24,.14);
  border-radius:50%;
  box-shadow:inset 0 0 0 28px rgba(255,255,255,.28);
}
.hero-copy > *{position:relative;z-index:1}
.hero-actions-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}
.status-console,.lesson-card,.activity-panel,.certificate-zone,.feature-list{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  box-shadow:var(--shadow);
  animation:riseIn .7s var(--ease) both;
}
.command-center{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:28px;
  align-items:stretch;
}
.command-copy{
  min-height:360px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,250,240,.74)),
    radial-gradient(circle at right bottom, rgba(36,107,254,.16), transparent 34%);
  box-shadow:var(--shadow);
}
.approval-board{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.approval-board article{
  min-height:300px;
  display:grid;
  align-content:space-between;
  padding:22px;
  border-radius:8px;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(21,26,33,.84), rgba(21,26,33,.98)),
    radial-gradient(circle at 100% 0%, rgba(31,138,112,.7), transparent 35%);
  box-shadow:0 24px 60px rgba(16,19,24,.22);
  animation:riseIn .65s var(--ease) both;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.approval-board article:nth-child(2){animation-delay:.08s}
.approval-board article:nth-child(3){animation-delay:.16s}
.approval-board article:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 76px rgba(16,19,24,.3);
}
.approval-board article:nth-child(2){
  background:
    linear-gradient(180deg, rgba(21,26,33,.84), rgba(21,26,33,.98)),
    radial-gradient(circle at 100% 0%, rgba(238,106,77,.7), transparent 35%);
}
.approval-board article:nth-child(3){
  background:
    linear-gradient(180deg, rgba(21,26,33,.84), rgba(21,26,33,.98)),
    radial-gradient(circle at 100% 0%, rgba(36,107,254,.7), transparent 35%);
}
.approval-board span{
  width:max-content;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
}
.approval-board strong{font:800 1.5rem "Space Grotesk"}
.approval-board p{color:#dce6ef;margin:0;line-height:1.6}
.status-console{display:grid;align-content:center;justify-items:center;gap:20px;padding:28px;text-align:center}
.console-head span{display:block;color:var(--muted);font-weight:800;text-transform:uppercase;font-size:.78rem}
.progress-ring{
  width:190px;
  height:190px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(var(--green) 0deg, var(--ring-track) 0deg);
  animation:borderPulse 4s ease-in-out infinite;
}
.progress-ring span{
  width:138px;
  height:138px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--surface);
  font:800 2.1rem "Space Grotesk";
}
.console-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.console-grid div{
  padding:12px;
  border-radius:8px;
  background:#fff;
  border:1px solid var(--line);
  transition:transform .22s var(--ease), background .22s var(--ease);
}
.console-grid div:hover{transform:translateY(-4px);background:#f3fff9}
.console-grid strong{display:block;font:800 1.35rem "Space Grotesk"}
.console-grid span{color:var(--muted);font-size:.82rem;font-weight:800}
.studio-section{padding:64px clamp(18px,4vw,48px)}
.split-section{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.studio-section h2{font-size:clamp(2rem,5vw,3.6rem);line-height:1;margin:14px 0}
.feature-list{display:grid}
.feature-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.feature-list div{display:grid;grid-template-columns:80px 1fr;gap:16px;padding:22px;border-bottom:1px solid var(--line)}
.feature-grid div{
  grid-template-columns:1fr;
  min-height:160px;
  border-bottom:0;
  border-right:1px solid var(--line);
}
.feature-grid div:last-child{border-right:0}
.feature-list div:last-child{border-bottom:0}
.feature-list strong{font:800 1.8rem "Space Grotesk";color:var(--coral)}
.feature-list span{align-self:center;font-weight:800}
.feature-grid div{
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.feature-grid div:hover{
  transform:translateY(-6px);
  background:#fff;
}
.lab-preview{
  min-height:360px;
  padding:24px;
  border-radius:8px;
  background:
    linear-gradient(135deg, rgba(36,107,254,.12), rgba(238,106,77,.10)),
    var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.video-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.video-card{
  min-height:320px;
  display:grid;
  align-content:space-between;
  gap:16px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  box-shadow:var(--shadow);
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.video-card:hover{
  transform:translateY(-7px);
  background:var(--surface-2);
  border-color:rgba(36,107,254,.3);
}
.video-card video{
  width:100%;
  aspect-ratio:16/9;
  border:1px solid var(--line);
  border-radius:8px;
  background:#0f141b;
  object-fit:cover;
}
.video-thumb{
  min-height:110px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:
    linear-gradient(135deg, rgba(21,26,33,.7), rgba(21,26,33,.94)),
    radial-gradient(circle at 78% 25%, rgba(36,107,254,.5), transparent 32%);
}
.video-thumb span{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  font-weight:900;
}
.video-card strong{font:800 1.35rem "Space Grotesk"}
.video-card p{margin:0;color:var(--muted);line-height:1.6}
.video-card .secondary-action{width:100%;margin-top:4px}
.lab-window{
  height:100%;
  min-height:312px;
  border-radius:8px;
  background:#11161d;
  color:#fff;
  overflow:hidden;
  box-shadow:0 28px 60px rgba(16,19,24,.28);
  animation:floatSoft 7.5s ease-in-out infinite;
}
.lab-window-top{
  display:flex;
  gap:8px;
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.lab-window-top span{width:11px;height:11px;border-radius:50%;background:var(--coral)}
.lab-window-top span:nth-child(2){background:var(--yellow)}
.lab-window-top span:nth-child(3){background:var(--green)}
.lab-lines{display:grid;gap:13px;padding:28px}
.lab-lines span{
  height:12px;
  border-radius:999px;
  background:linear-gradient(90deg,#73e6c1,#7ca5ff,#ff9d87);
  opacity:.86;
  transform-origin:left;
  animation:pulseLine 2.4s ease-in-out infinite;
}
.lab-lines span:nth-child(2){animation-delay:.25s}
.lab-lines span:nth-child(3){animation-delay:.5s}
.lab-lines span:nth-child(4){animation-delay:.75s}
.lab-lines .wide{width:90%}
.lab-lines .mid{width:66%}
.lab-lines .short{width:42%}
.lab-output{
  margin:0 28px 28px;
  padding:18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(255,255,255,.06);
}
.lab-output strong{color:#73e6c1;text-transform:uppercase;font-size:.82rem}
.lab-output p{margin:8px 0 0;color:#dce6ef}
.section-heading{max-width:850px;margin-bottom:26px}
.module-track{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.module-tile{
  position:relative;
  min-height:310px;
  display:grid;
  align-content:space-between;
  padding:22px;
  border:1px solid var(--line);
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,253,247,.98)),
    var(--surface-2);
  box-shadow:var(--shadow);
  transition:transform .22s ease, border-color .22s ease;
  overflow:hidden;
  animation:riseIn .65s var(--ease) both;
}
.module-tile::before{
  content:"";
  position:absolute;
  inset:auto -40px -70px auto;
  width:170px;
  height:170px;
  border-radius:50%;
  background:rgba(36,107,254,.10);
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.module-tile::after{
  opacity:.32;
  animation-delay:1.4s;
}
.module-tile:nth-child(2)::before{background:rgba(31,138,112,.12)}
.module-tile:nth-child(3)::before{background:rgba(238,106,77,.12)}
.module-tile:nth-child(4)::before{background:rgba(240,180,41,.16)}
.module-tile:hover{transform:translateY(-10px) rotate(-.4deg);border-color:rgba(31,138,112,.42)}
.module-tile:hover::before{transform:scale(1.18);opacity:.85}
.module-tile.locked{opacity:.52;filter:saturate(.6)}
.module-tile.pending{border-color:rgba(240,180,41,.48);background:#fff8df}
.module-tile.revision{border-color:rgba(238,106,77,.5);background:#fff0eb}
.module-tile.done{background:#e9f7ee;border-color:rgba(31,138,112,.34)}
.module-number{
  display:inline-grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font:800 1.2rem "Space Grotesk";
}
.module-tile strong{font:800 1.55rem "Space Grotesk"}
.module-tile p{color:var(--muted);line-height:1.65}
.module-tile em{font-style:normal;font-weight:900;color:var(--green)}
.certificate-zone{
  margin:20px clamp(18px,4vw,48px) 70px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.certificate-card{
  position:relative;
  overflow:hidden;
  min-height:680px;
  display:grid;
  gap:28px;
  padding:34px;
  border:1px solid var(--line);
  border-radius:8px;
  background:
    linear-gradient(90deg, rgba(16,19,24,.035) 1px, transparent 1px),
    linear-gradient(rgba(16,19,24,.035) 1px, transparent 1px),
    radial-gradient(circle at 12% 18%, rgba(31,138,112,.16), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(238,106,77,.18), transparent 24%),
    var(--surface);
  background-size:32px 32px;
  box-shadow:var(--shadow);
}
.certificate-card::before{
  content:"";
  position:absolute;
  inset:18px;
  border:2px solid rgba(31,138,112,.22);
  border-radius:8px;
  pointer-events:none;
}
.certificate-card::after{
  content:"";
  position:absolute;
  right:-8%;
  top:-20%;
  width:38%;
  height:140%;
  transform:rotate(28deg);
  background:rgba(16,19,24,.045);
  pointer-events:none;
}
.certificate-header,.certificate-body,.certificate-details,.certificate-footer{
  position:relative;
  z-index:1;
}
.certificate-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.certificate-brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.certificate-brand img{
  width:58px;
  height:58px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid var(--line);
}
.certificate-brand strong{
  display:block;
  font:900 1.35rem "Space Grotesk";
}
.certificate-brand span,.certificate-badge,.certificate-details span,.certificate-note,.signature-block p{
  color:var(--muted);
}
.certificate-badge{
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-2);
  font-weight:800;
}
.certificate-body{
  max-width:980px;
  align-self:center;
}
.certificate-card h2{
  max-width:980px;
  margin:12px 0 18px;
  font-size:clamp(2.2rem,5vw,4.8rem);
  line-height:.98;
}
.certificate-card h2 span{
  color:var(--green);
}
.certificate-body p{
  max-width:860px;
  margin:0;
  color:var(--muted);
  font-size:1.12rem;
  line-height:1.75;
}
.certificate-details{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.certificate-details div{
  min-height:100px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.38);
}
.certificate-details span{
  display:block;
  margin-bottom:10px;
  font-weight:800;
  text-transform:uppercase;
  font-size:.72rem;
}
.certificate-details strong{
  font:900 1.15rem "Space Grotesk";
}
.certificate-footer{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
}
.signature-block{
  min-width:280px;
}
.signature-block span{
  display:block;
  width:100%;
  height:2px;
  margin-bottom:12px;
  background:var(--ink);
}
.signature-block strong{
  font:900 1.05rem "Space Grotesk";
  color:var(--green);
  text-transform:uppercase;
}
.signature-block p,.certificate-note{
  margin:4px 0 0;
}
.certificate-note{
  max-width:360px;
  text-align:right;
  line-height:1.6;
}
.certificate-zone [data-print-certificate]{
  margin-top:18px;
}
.module-page{padding:42px clamp(18px,4vw,48px) 70px}
.module-hero{
  min-height:330px;
  display:grid;
  align-content:end;
  padding:34px;
  border-radius:8px;
  background:
    radial-gradient(circle at right top, rgba(238,106,77,.22), transparent 28%),
    radial-gradient(circle at left bottom, rgba(31,138,112,.22), transparent 26%),
    var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  animation:riseIn .75s var(--ease) both;
}
.module-hero h1{font-size:clamp(3rem,7vw,5.5rem)}
.module-video-panel{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:22px;
  align-items:center;
  margin:22px 0;
  padding:24px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  box-shadow:var(--shadow);
  animation:riseIn .7s var(--ease) both;
}
.module-video-panel h2{
  margin:14px 0 10px;
  font-size:clamp(1.7rem,3vw,2.6rem);
  line-height:1;
}
.module-video-panel p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}
.module-video-panel video{
  width:100%;
  aspect-ratio:16/9;
  display:block;
  border:1px solid var(--line);
  border-radius:8px;
  background:#11161d;
  box-shadow:0 18px 42px rgba(16,19,24,.18);
}
.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0}
.lesson-card{padding:24px}
.lesson-card{
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}
.lesson-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 56px rgba(22,18,10,.16);
}
.lesson-card h2{margin:0 0 10px;font-size:1.55rem}
.mission-deck{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin:0 0 22px;
}
.mission-deck div{
  min-height:190px;
  display:grid;
  align-content:end;
  gap:10px;
  padding:22px;
  border-radius:8px;
  color:#fff;
  background:
    linear-gradient(135deg, rgba(16,19,24,.68), rgba(16,19,24,.86)),
    radial-gradient(circle at right top, rgba(238,106,77,.55), transparent 38%),
    var(--dark);
  box-shadow:0 24px 60px rgba(16,19,24,.18);
  animation:riseIn .68s var(--ease) both;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mission-deck div:nth-child(2){animation-delay:.08s}
.mission-deck div:nth-child(3){animation-delay:.16s}
.mission-deck div:hover{
  transform:translateY(-8px) scale(1.015);
  box-shadow:0 32px 78px rgba(16,19,24,.28);
}
.mission-deck div:nth-child(2){
  background:
    linear-gradient(135deg, rgba(16,19,24,.68), rgba(16,19,24,.86)),
    radial-gradient(circle at right top, rgba(31,138,112,.55), transparent 38%),
    var(--dark);
}
.mission-deck div:nth-child(3){
  background:
    linear-gradient(135deg, rgba(16,19,24,.68), rgba(16,19,24,.86)),
    radial-gradient(circle at right top, rgba(36,107,254,.55), transparent 38%),
    var(--dark);
}
.mission-deck span{
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
}
.mission-deck strong{font:800 1.35rem "Space Grotesk"}
.mission-deck p{margin:0;color:#dce6ef;line-height:1.6}
.example-panel{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:18px;
  align-items:stretch;
  margin:0 0 22px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.example-panel h2{margin:10px 0 12px}
.example-panel p{margin:0;color:var(--muted);line-height:1.7}
.code-example{
  margin:0;
  padding:20px;
  border-radius:8px;
  background:#11161d;
  color:#dfffea;
  overflow:auto;
  font-size:.95rem;
  line-height:1.65;
}
.submission-checklist{
  display:grid;
  gap:10px;
  margin:18px 0;
  padding:18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-2);
}
.submission-checklist strong{font:800 1.2rem "Space Grotesk"}
.submission-checklist label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:700;
  color:var(--muted);
  line-height:1.5;
}
.submission-checklist input{
  width:auto;
  margin-top:3px;
  accent-color:var(--green);
}
.roadmap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.roadmap article{
  min-height:240px;
  display:grid;
  align-content:space-between;
  padding:22px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:var(--shadow);
  animation:riseIn .65s var(--ease) both;
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.roadmap article:hover{
  transform:translateY(-7px);
  border-color:rgba(36,107,254,.3);
}
.roadmap span{
  width:max-content;
  padding:7px 10px;
  border-radius:999px;
  background:#f0f4ff;
  color:var(--blue);
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
}
.roadmap strong{font:800 1.35rem "Space Grotesk"}
.roadmap p{margin:0}
.dossier{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:24px;
  padding:28px;
  border-radius:8px;
  color:#fff;
  background:
    linear-gradient(135deg, rgba(21,26,33,.92), rgba(21,26,33,.98)),
    radial-gradient(circle at 85% 25%, rgba(240,180,41,.28), transparent 24%),
    radial-gradient(circle at 12% 80%, rgba(31,138,112,.32), transparent 22%);
  box-shadow:0 30px 80px rgba(16,19,24,.24);
  animation:riseIn .75s var(--ease) both;
}
.dossier h2{color:#fff}
.dossier .tag{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2)}
.dossier-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.dossier-grid article{
  padding:18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(255,255,255,.06);
}
.dossier-grid strong{font:800 1.25rem "Space Grotesk"}
.dossier-grid p{color:#dce6ef;margin:10px 0 0}
.activity-panel{padding:26px}
.activity-panel{position:relative;overflow:hidden}
.activity-panel::after{opacity:.26;animation-delay:2.2s}
.activity-brief{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:16px 0 18px;
  max-width:920px;
}
.activity-brief article{
  padding:18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.72);
}
.activity-brief span{
  display:block;
  margin-bottom:8px;
  color:var(--green);
  font-weight:900;
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.08em;
}
.activity-brief p{margin:0;color:var(--ink);line-height:1.6}
.activity-brief code{font-weight:800;color:var(--green)}
.activity-panel form{display:grid;gap:12px;max-width:760px}
.module-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.evaluation-board{
  padding:26px;
  margin:0 0 22px;
  border:1px solid var(--line);
  border-radius:8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,250,240,.78)),
    radial-gradient(circle at right top, rgba(240,180,41,.16), transparent 28%);
  box-shadow:var(--shadow);
  animation:riseIn .68s var(--ease) both;
}
.evaluation-board h2{margin:0 0 16px;font-size:2rem}
.score-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.score-grid article{
  padding:18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  transition:transform .22s var(--ease), background .22s var(--ease);
}
.score-grid article:hover{transform:translateY(-5px);background:#fafff7}
.score-grid strong{display:block;font:800 1.2rem "Space Grotesk"}
.score-grid span{display:inline-flex;margin:10px 0;padding:6px 10px;border-radius:999px;background:#eef8f3;color:var(--green);font-weight:900}
.score-grid p{margin:0;color:var(--muted);line-height:1.6}
.evaluator-page{padding:42px clamp(18px,4vw,48px) 70px}
.evaluator-hero{margin-bottom:22px}
.teacher-login{
  min-height:calc(100vh - 160px);
  display:grid;
  place-items:center;
}
.teacher-login-card{
  width:min(620px,100%);
  padding:34px;
  border:1px solid var(--line);
  border-radius:8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,250,240,.86)),
    radial-gradient(circle at right top, rgba(36,107,254,.16), transparent 30%);
  box-shadow:var(--shadow);
  animation:riseIn .72s var(--ease) both;
}
.teacher-login-card h1{
  margin:14px 0;
  font-size:clamp(2.4rem,6vw,4.5rem);
  line-height:.95;
}
.teacher-login-card p{
  color:var(--muted);
  line-height:1.75;
}
.teacher-login-card form{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.access-layer{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 30%, rgba(36,107,254,.18), transparent 24%),
    rgba(16,19,24,.58);
  backdrop-filter:blur(16px);
  animation:layerFade .28s var(--ease) both;
}
.access-layer[hidden]{display:none}
.access-layer-card{
  width:min(560px,100%);
  padding:34px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  background:
    linear-gradient(135deg, rgba(21,26,33,.92), rgba(21,26,33,.98)),
    radial-gradient(circle at right top, rgba(31,138,112,.42), transparent 34%);
  box-shadow:0 34px 100px rgba(0,0,0,.34);
  animation:modalPop .42s var(--ease) both;
}
.access-layer-card .tag{
  color:#dfffea;
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.22);
}
.access-layer-card h2{
  margin:16px 0 12px;
  font-size:clamp(2rem,5vw,3.3rem);
  line-height:1;
}
.access-layer-card p{
  color:#dce6ef;
  line-height:1.75;
  margin:0 0 22px;
}
@keyframes layerFade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes modalPop{
  from{opacity:0;transform:translateY(22px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.rubric-panel{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:22px;
}
.rubric-panel article,.review-card{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.rubric-panel article{
  padding:22px;
  display:grid;
  gap:8px;
  animation:riseIn .65s var(--ease) both;
}
.rubric-panel article:nth-child(2){animation-delay:.08s}
.rubric-panel article:nth-child(3){animation-delay:.16s}
.rubric-panel strong{
  font:800 1.6rem "Space Grotesk";
  color:var(--green);
}
.rubric-panel span,.review-muted{color:var(--muted);line-height:1.65}
.review-list{
  display:grid;
  gap:18px;
}
.review-card{
  padding:24px;
  display:grid;
  gap:14px;
  position:relative;
  overflow:hidden;
  animation:riseIn .65s var(--ease) both;
}
.review-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.review-head span{
  font:800 1.4rem "Space Grotesk";
}
.review-head strong{
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--green);
}
.review-meta{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.review-meta p,.review-answer{
  margin:0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.review-answer p{margin:8px 0 0;color:var(--muted);line-height:1.7}
.review-answer pre{
  max-height:260px;
  overflow:auto;
  margin:10px 0 0;
  padding:14px;
  border-radius:8px;
  background:#11161d;
  color:#dfffea;
  font-size:.9rem;
  line-height:1.6;
  white-space:pre-wrap;
}
.review-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.feedback-shortcuts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.feedback-shortcuts button{
  min-height:40px;
  padding:0 12px;
  font-size:.86rem;
}
.ai-status{
  min-height:22px;
  margin:0;
  color:var(--blue);
  font-weight:900;
}
.teacher-note{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  margin-bottom:22px;
  padding:22px;
  border-radius:8px;
  background:var(--dark);
  color:#fff;
  box-shadow:0 24px 60px rgba(16,19,24,.18);
  animation:riseIn .65s var(--ease) both;
}
.teacher-note strong{font:800 1.35rem "Space Grotesk";color:#73e6c1}
.teacher-note p{margin:0;color:#dce6ef;line-height:1.6}
body.printing .app-header,
body.printing main > section:not(.certificate-zone),
body.printing [data-print-certificate],
body.printing .a11y-toolbar{
  display:none !important;
}
body.printing main{
  padding:0;
}
html[data-theme="dark"] body{
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 8% 12%, rgba(91,224,186,.12), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(255,154,131,.10), transparent 22%),
    var(--paper);
}
html[data-theme="dark"] body::before{
  opacity:.35;
  mix-blend-mode:screen;
}
html[data-theme="dark"] .entry-body{background:var(--dark);color:var(--ink)}
html[data-theme="dark"] .entry-panel,
html[data-theme="dark"] .app-header,
html[data-theme="dark"] .hero-copy,
html[data-theme="dark"] .command-copy,
html[data-theme="dark"] .evaluation-board,
html[data-theme="dark"] .teacher-login-card,
html[data-theme="dark"] .module-hero{
  background:var(--surface);
  color:var(--ink);
}
html[data-theme="dark"] .tag,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .secondary-action,
html[data-theme="dark"] .ghost-action,
html[data-theme="dark"] .settings-panel,
html[data-theme="dark"] .entry-highlights div,
html[data-theme="dark"] .console-grid div,
html[data-theme="dark"] .module-tile,
html[data-theme="dark"] .roadmap article,
html[data-theme="dark"] .score-grid article,
html[data-theme="dark"] .activity-brief article,
html[data-theme="dark"] .review-head strong,
html[data-theme="dark"] .review-meta p,
html[data-theme="dark"] .review-answer{
  background:var(--surface-2);
  color:var(--ink);
}
html[data-theme="dark"] .primary-action{
  background:#f6f8fb;
  color:#0e131a;
  border-color:#f6f8fb;
}
html[data-theme="dark"] .secondary-action:hover,
html[data-theme="dark"] .ghost-action:hover,
html[data-theme="dark"] .feature-grid div:hover,
html[data-theme="dark"] .console-grid div:hover,
html[data-theme="dark"] .score-grid article:hover,
html[data-theme="dark"] .module-tile:hover,
html[data-theme="dark"] .roadmap article:hover,
html[data-theme="dark"] .lesson-card:hover{
  background:var(--surface-2);
  color:var(--ink);
}
html[data-theme="dark"] .primary-action:hover{
  background:#f6f8fb;
  color:#0e131a;
}
html[data-theme="dark"] .progress-ring{background:conic-gradient(var(--green) 0deg, var(--ring-track) 0deg)}
html[data-theme="dark"] .module-tile.pending{background:#3a3112}
html[data-theme="dark"] .module-tile.revision{background:#3a211f}
html[data-theme="dark"] .module-tile.done{background:#143326}
html[data-theme="dark"] .review-answer pre,
html[data-theme="dark"] .lab-window,
html[data-theme="dark"] .code-example,
html[data-theme="dark"] .mission-board{background:#080b10}
html[data-contrast="high"] body,
html[data-contrast="high"] .entry-panel,
html[data-contrast="high"] .app-header,
html[data-contrast="high"] .hero-copy,
html[data-contrast="high"] .command-copy,
html[data-contrast="high"] .module-hero,
html[data-contrast="high"] .lesson-card,
html[data-contrast="high"] .activity-panel,
html[data-contrast="high"] .certificate-zone,
html[data-contrast="high"] .feature-list,
html[data-contrast="high"] .status-console{
  background:var(--paper) !important;
  color:var(--ink) !important;
}
html[data-contrast="high"] .primary-action,
html[data-contrast="high"] .secondary-action,
html[data-contrast="high"] .ghost-action,
html[data-contrast="high"] input,
html[data-contrast="high"] textarea,
html[data-contrast="high"] article,
html[data-contrast="high"] .module-tile{
  border:2px solid currentColor !important;
}
html[data-contrast="high"] .primary-action,
html[data-contrast="high"] .secondary-action,
html[data-contrast="high"] .ghost-action,
html[data-contrast="high"] .ai-action{
  background:var(--surface) !important;
  color:var(--ink) !important;
}
html[data-contrast="high"] .primary-action:hover,
html[data-contrast="high"] .secondary-action:hover,
html[data-contrast="high"] .ghost-action:hover,
html[data-contrast="high"] .ai-action:hover,
html[data-contrast="high"] .feature-grid div:hover,
html[data-contrast="high"] .console-grid div:hover,
html[data-contrast="high"] .score-grid article:hover,
html[data-contrast="high"] .module-tile:hover,
html[data-contrast="high"] .roadmap article:hover,
html[data-contrast="high"] .lesson-card:hover{
  background:var(--surface) !important;
  color:var(--ink) !important;
}
html[data-contrast="high"] .primary-action::after,
html[data-contrast="high"] .secondary-action::after,
html[data-contrast="high"] .ghost-action::after,
html[data-contrast="high"] .ai-action::after{
  display:none;
}
@media print{
  @page{
    size:A4 landscape;
    margin:10mm;
  }
  html,body{
    width:100%;
    min-height:100%;
    background:#fff !important;
    color:#101318 !important;
  }
  body::before,
  .app-header,
  main > section:not(.certificate-zone),
  [data-print-certificate],
  .a11y-toolbar{
    display:none !important;
  }
  main{
    padding:0 !important;
  }
  .certificate-zone{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .certificate-card{
    min-height:186mm;
    height:186mm;
    padding:14mm;
    border:1.5mm solid rgba(31,138,112,.45);
    box-shadow:none !important;
    background:
      linear-gradient(90deg, rgba(16,19,24,.035) 1px, transparent 1px),
      linear-gradient(rgba(16,19,24,.035) 1px, transparent 1px),
      radial-gradient(circle at 12% 18%, rgba(31,138,112,.14), transparent 28%),
      radial-gradient(circle at 88% 16%, rgba(238,106,77,.16), transparent 24%),
      #fffaf0 !important;
    background-size:10mm 10mm;
  }
  .certificate-card::before{
    inset:6mm;
  }
  .certificate-card h2{
    font-size:30pt;
  }
  .certificate-body p{
    font-size:11pt;
  }
  .certificate-details{
    grid-template-columns:repeat(4,1fr);
  }
  .certificate-details div{
    min-height:26mm;
    padding:5mm;
    background:rgba(255,255,255,.58) !important;
  }
}
@media (max-width:980px){
  .entry-layout,.studio-hero,.split-section,.module-grid,.module-video-panel,.command-center,.dossier,.example-panel{grid-template-columns:1fr}
  .module-track,.feature-grid,.video-grid,.roadmap,.mission-deck,.rubric-panel,.approval-board,.dossier-grid,.score-grid,.certificate-details{grid-template-columns:repeat(2,minmax(0,1fr))}
  .entry-visual{min-height:520px}
  .feature-grid div{border-right:0;border-bottom:1px solid var(--line)}
  .certificate-footer{align-items:start;flex-direction:column}
  .certificate-note{text-align:left}
}
@media (max-width:640px){
  .desktop-nav{display:none}
  .app-header{align-items:flex-start;flex-direction:column}
  .a11y-toolbar{justify-content:flex-start;margin-left:0}
  .settings-panel{left:0;right:auto}
  .module-track,.feature-grid,.video-grid,.roadmap,.mission-deck,.entry-highlights,.rubric-panel,.review-meta,.approval-board,.dossier-grid,.score-grid,.activity-brief,.certificate-details{grid-template-columns:1fr}
  .teacher-note{display:grid}
  .entry-panel h1,.studio-hero h1,.module-hero h1{font-size:3rem}
  .hero-copy,.module-hero{padding:24px}
  .certificate-card{padding:22px;min-height:auto}
  .certificate-header{flex-direction:column}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition:none !important;
  }
}