/* EduTech STEM Academy — themed skins for the explainer libraries.
   The page sets <html data-skin data-font data-size> (see edutech-skins.js); every library shares the same
   colour variables, so a skin only has to redefine them. "classic" keeps the original notebook look. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Fredoka:wght@500;600;700&family=Lexend:wght@400;600;700&display=swap');

/* ------------------------------------------------------------------ skin palettes */
html[data-skin="tropical"]{
  --ink:#16324F; --ink-soft:#35506b; --muted:#5b6f84; --paper:#FFFBF0; --paper-deep:#FFF0C9; --white:#FFFFFF; --line:#F1CF86;
  --leaf:#13996A; --leaf-soft:#DDF6EA; --rust:#E8505B; --rust-soft:#FDE2E4; --teal:#0A9CC2; --teal-soft:#DDF4FA; --gold:#F29E1F; --gold-soft:#FFF0D2;
  --sec-a:#13996A; --sec-b:#E8505B; --sec-c:#7B61FF; --sec-e:#F29E1F; --sec-l:#0A9CC2; --sec-x:#F29E1F;
  --skin-bg:radial-gradient(circle at 88% 8%,#FFE680 0 70px,rgba(255,230,128,.35) 71px 110px,transparent 111px),
            radial-gradient(ellipse at 50% 120%,#FFE7A8 0 38%,transparent 39%),
            linear-gradient(180deg,#38C6F0 0%,#8EE3F5 45%,#C9F3F6 70%,#FFF1C1 100%);
  --skin-hero:linear-gradient(120deg,#CF3B5B 0%,#BC521C 55%,#0C808B 100%);
  --skin-accent:#FF7E5F;
}
html[data-skin="ocean"]{
  --ink:#0B2545; --ink-soft:#24476b; --muted:#4d6a86; --paper:#F0FBFF; --paper-deep:#D7F1FB; --white:#FFFFFF; --line:#9ED8EE;
  --leaf:#0F9D77; --leaf-soft:#D9F5EC; --rust:#E4572E; --rust-soft:#FCE3DA; --teal:#0A81AB; --teal-soft:#DCF1F9; --gold:#F4A259; --gold-soft:#FDEBD9;
  --sec-a:#0F9D77; --sec-b:#E4572E; --sec-c:#3A5BD9; --sec-e:#F4A259; --sec-l:#0A81AB; --sec-x:#F4A259;
  --skin-bg:radial-gradient(circle at 12% 30%,rgba(255,255,255,.35) 0 10px,transparent 11px),
            radial-gradient(circle at 80% 60%,rgba(255,255,255,.28) 0 16px,transparent 17px),
            radial-gradient(circle at 40% 80%,rgba(255,255,255,.25) 0 7px,transparent 8px),
            radial-gradient(circle at 65% 20%,rgba(255,255,255,.3) 0 5px,transparent 6px),
            linear-gradient(180deg,#0A9CC2 0%,#0B6FA4 50%,#0B4F8A 100%);
  --skin-bg-size:260px 340px,320px 300px,200px 260px,240px 220px,100% 100%;
  --skin-hero:linear-gradient(120deg,#0B4F8A 0%,#0E7F96 55%,#15836C 100%);
  --skin-accent:#13A7C4;
}
html[data-skin="rainforest"]{
  --ink:#1B3A24; --ink-soft:#33553c; --muted:#5a7360; --paper:#FBFFF5; --paper-deep:#E6F5D6; --white:#FFFFFF; --line:#B7DB9C;
  --leaf:#2E9E4F; --leaf-soft:#DDF3E1; --rust:#D9534F; --rust-soft:#F9E0DF; --teal:#138A72; --teal-soft:#D9F0EA; --gold:#E8A33D; --gold-soft:#FBEBD3;
  --sec-a:#2E9E4F; --sec-b:#D9534F; --sec-c:#3F6FD8; --sec-e:#E8A33D; --sec-l:#138A72; --sec-x:#E8A33D;
  --skin-bg:radial-gradient(ellipse 60px 26px at 20% 20%,rgba(255,255,255,.14) 98%,transparent),
            radial-gradient(ellipse 40px 18px at 70% 65%,rgba(255,255,255,.12) 98%,transparent),
            linear-gradient(160deg,#1F6F43 0%,#2F8F4E 45%,#7CC36B 100%);
  --skin-bg-size:180px 160px,140px 150px,100% 100%;
  --skin-hero:linear-gradient(120deg,#1F6F43 0%,#348142 55%,#4F8222 100%);
  --skin-accent:#7CC36B;
}
html[data-skin="space"]{
  --ink:#1D1840; --ink-soft:#3b3566; --muted:#625d88; --paper:#F6F4FF; --paper-deep:#E6E1FF; --white:#FFFFFF; --line:#CBC2FF;
  --leaf:#12A37F; --leaf-soft:#DAF4EC; --rust:#E5487A; --rust-soft:#FCE0EA; --teal:#6C5CE7; --teal-soft:#E8E5FD; --gold:#FFB020; --gold-soft:#FFF0CF;
  --sec-a:#12A37F; --sec-b:#E5487A; --sec-c:#6C5CE7; --sec-e:#FFB020; --sec-l:#2D9CDB; --sec-x:#FFB020;
  --skin-bg:radial-gradient(1.5px 1.5px at 20% 30%,#fff 99%,transparent),radial-gradient(1px 1px at 70% 80%,#fff 99%,transparent),
            radial-gradient(2px 2px at 40% 60%,#cfd8ff 99%,transparent),radial-gradient(1px 1px at 85% 25%,#fff 99%,transparent),
            radial-gradient(circle at 85% 12%,#7b5cff55 0 120px,transparent 121px),
            linear-gradient(180deg,#0B1026 0%,#1B1A4A 55%,#3A2A6B 100%);
  --skin-bg-size:120px 130px,170px 150px,210px 190px,90px 110px,100% 100%,100% 100%;
  --skin-hero:linear-gradient(120deg,#2B1055 0%,#5B3FD6 55%,#2B71D3 100%);
  --skin-accent:#7B5CFF;
}
html[data-skin="candy"]{
  --ink:#3D2352; --ink-soft:#5a4170; --muted:#7f6a91; --paper:#FFF7FB; --paper-deep:#FFE3F0; --white:#FFFFFF; --line:#F7B8D2;
  --leaf:#23A86B; --leaf-soft:#DDF6E9; --rust:#EF476F; --rust-soft:#FDE0E7; --teal:#8E7DFF; --teal-soft:#ECE8FF; --gold:#FFB703; --gold-soft:#FFF1CC;
  --sec-a:#23A86B; --sec-b:#EF476F; --sec-c:#8E7DFF; --sec-e:#FFB703; --sec-l:#3EC1D3; --sec-x:#FFB703;
  --skin-bg:radial-gradient(circle at 25% 25%,rgba(255,255,255,.75) 0 9px,transparent 10px),
            radial-gradient(circle at 75% 75%,rgba(255,255,255,.6) 0 6px,transparent 7px),
            linear-gradient(135deg,#FFC2DD 0%,#E7C6FF 50%,#BDE0FE 100%);
  --skin-bg-size:70px 70px,70px 70px,100% 100%;
  --skin-hero:linear-gradient(120deg,#D6336C 0%,#9B3FD6 55%,#2173B8 100%);
  --skin-accent:#FF8FAB;
}
html[data-skin="carnival"]{
  --ink:#2A1A40; --ink-soft:#47355e; --muted:#6f6082; --paper:#FFFAF0; --paper-deep:#FFEBC2; --white:#FFFFFF; --line:#FFC97A;
  --leaf:#12A454; --leaf-soft:#DBF5E5; --rust:#E63946; --rust-soft:#FCDDE0; --teal:#00A6A6; --teal-soft:#D6F4F4; --gold:#FF9F1C; --gold-soft:#FFEBCF;
  --sec-a:#12A454; --sec-b:#E63946; --sec-c:#8338EC; --sec-e:#FF9F1C; --sec-l:#00A6A6; --sec-x:#FF9F1C;
  --skin-bg:radial-gradient(circle at 10% 20%,#FFBE0B 0 5px,transparent 6px),radial-gradient(circle at 60% 70%,#3A86FF 0 4px,transparent 5px),
            radial-gradient(circle at 85% 30%,#06D6A0 0 5px,transparent 6px),radial-gradient(circle at 35% 85%,#FFFFFF 0 4px,transparent 5px),
            linear-gradient(135deg,#FF006E 0%,#FB5607 45%,#FFBE0B 100%);
  --skin-bg-size:90px 90px,110px 120px,130px 100px,80px 95px,100% 100%;
  --skin-hero:linear-gradient(120deg,#8338EC 0%,#D9005E 55%,#C24A08 100%);
  --skin-accent:#FF006E;
}

/* ------------------------------------------------------------------ shared look for every non-classic skin */
html:not([data-skin="classic"]) body{background:var(--skin-bg)!important;background-size:var(--skin-bg-size,100% 100%)!important;background-attachment:fixed!important}
html:not([data-skin="classic"]) .wrap{background:color-mix(in srgb,var(--paper) 94%,transparent);border-radius:26px;padding:20px clamp(12px,3vw,28px) 26px;box-shadow:0 18px 50px rgba(0,0,0,.18)}
html:not([data-skin="classic"]) header.top{background:var(--skin-hero);border:none;border-radius:20px;padding:20px clamp(16px,3vw,26px);color:#fff;box-shadow:0 8px 0 rgba(0,0,0,.08)}
html:not([data-skin="classic"]) header.top h1,html:not([data-skin="classic"]) header.top p,html:not([data-skin="classic"]) header.top .eyebrow{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.18)}
html:not([data-skin="classic"]) header.top .crumbs a,html:not([data-skin="classic"]) header.top a.jump{color:#fff!important;border-color:rgba(255,255,255,.75)!important;background:rgba(255,255,255,.16)}
html:not([data-skin="classic"]) header.top .chip{background:rgba(255,255,255,.92)}
html:not([data-skin="classic"]) .panel{border-radius:20px;border:2px solid var(--line);box-shadow:0 6px 0 var(--line)}
html:not([data-skin="classic"]) .card{border-radius:18px;transition:transform .15s,box-shadow .15s}
html:not([data-skin="classic"]) .card:hover{transform:translateY(-4px) rotate(-.4deg)}
html:not([data-skin="classic"]) button,html:not([data-skin="classic"]) .jump{border-radius:999px}
/* game pieces that are buttons keep their own card shape */
html:not([data-skin="classic"]) :is(.g-card,.g-bopts button,.g-mf-btns button,.sl-c,.skin-opt){border-radius:14px}
html:not([data-skin="classic"]) button.primary{background:linear-gradient(135deg,var(--leaf),color-mix(in srgb,var(--leaf) 70%,var(--teal)));border-color:transparent;box-shadow:0 3px 0 color-mix(in srgb,var(--leaf) 60%,#000)}
html:not([data-skin="classic"]) .step-tag{display:inline-block;background:var(--teal-soft);color:var(--teal);border-radius:999px;padding:3px 10px}
html:not([data-skin="classic"]) .note,html:not([data-skin="classic"]) .q,html:not([data-skin="classic"]) .we,html:not([data-skin="classic"]) .res,html:not([data-skin="classic"]) .gstage{border-radius:14px}
html:not([data-skin="classic"]) .chip{border-radius:999px}
html:not([data-skin="classic"]) footer{color:var(--muted)}
html:not([data-skin="classic"]) .edu-brandbar{border-bottom-color:var(--line)}
/* CAPE IT explainers use their own masthead */
html:not([data-skin="classic"]) .masthead{background:var(--skin-hero);border:none!important;border-radius:18px;padding:14px 18px!important;color:#fff}
html:not([data-skin="classic"]) .masthead h1,html:not([data-skin="classic"]) .masthead .tag{color:#fff!important}
html:not([data-skin="classic"]) .stage{border-radius:18px}
html:not([data-skin="classic"]) .stage::before{background:var(--skin-hero)}

/* ------------------------------------------------------------------ fonts */
html[data-font="playful"] body *:not(svg):not(svg *):not(.katex *){font-family:'Nunito',system-ui,sans-serif!important}
html[data-font="playful"] :is(h1,h2,h3,.eyebrow,.step-tag,.chip,.obj,.k,.we-n,.gz-title,.gz-lv,.g-big,.board-head,.tips h4,.res h4,.g-bin-h,.gtab,button,.jump,.edu-brand span,.mono,.src){font-family:'Fredoka','Nunito',sans-serif!important;letter-spacing:.2px}
html[data-font="easy"] body *:not(svg):not(svg *):not(.katex *){font-family:'Lexend',system-ui,sans-serif!important;letter-spacing:.01em}
html[data-font="easy"] body{line-height:1.65}
@media (min-width:700px){html[data-size="large"] .wrap{zoom:1.12;width:calc(100% / 1.12)}}
@media (max-width:699px){html[data-size="large"] .wrap{overflow-x:clip}html[data-size="large"] .card-grid{grid-template-columns:minmax(0,1fr)!important}html[data-size="large"] .wrap :is(p,li,dd,dt,.stem,.q label span,.we-prob,.g-txt,.g-chip,.g-intro,.sub){font-size:max(16.5px,1.1em)!important}}
/* phones: slimmer frame so the content keeps its width */
@media (max-width:560px){html:not([data-skin="classic"]) .wrap{padding:12px 10px 18px;border-radius:18px}html:not([data-skin="classic"]) body{padding-left:8px!important;padding-right:8px!important}}

/* ------------------------------------------------------------------ theme picker */
.skin-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#003b5f;background:#fff;border:1.5px solid #003b5f;border-radius:999px;padding:6px 12px;cursor:pointer;margin-left:auto}
.skin-btn:hover{background:#003b5f;color:#fff}
.skin-btn.nudge{animation:skinPulse 1.6s ease-in-out 3}
@keyframes skinPulse{50%{box-shadow:0 0 0 7px rgba(255,126,95,.35)}}
.edu-brandbar .edu-home{margin-left:6px}
.skin-pop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(10,20,40,.45);padding:16px}
.skin-pop[hidden]{display:none}
.skin-card{background:#fff;color:#1c2541;border-radius:22px;max-width:640px;width:100%;max-height:90vh;overflow:auto;padding:20px 22px;box-shadow:0 30px 80px rgba(0,0,0,.35);font-family:'Nunito',system-ui,sans-serif}
.skin-card h2{margin:0 0 4px;font-family:'Fredoka','Nunito',sans-serif;font-size:24px}
.skin-card .sub{margin:0 0 14px;color:#5b6f84;font-size:14px}
.skin-card h3{font-family:'Fredoka','Nunito',sans-serif;font-size:15px;margin:16px 0 8px}
.skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.skin-opt{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;border:2px solid #e3e6ee;border-radius:16px;background:#fff;cursor:pointer;text-align:left;font:inherit;color:inherit}
.skin-opt .sw{height:62px;border-radius:12px;position:relative;overflow:hidden}
.skin-opt .sw i{position:absolute;left:10px;right:10px;bottom:8px;height:16px;border-radius:8px;background:rgba(255,255,255,.92)}
.skin-opt b{font-family:'Fredoka','Nunito',sans-serif;font-size:14px}
.skin-opt small{font-size:12px;color:#5b6f84}
html .skin-card .skin-opt{border-radius:16px!important;box-shadow:none}
html .skin-card .skin-opt[aria-pressed="true"]{border-color:#FF7E5F;box-shadow:0 0 0 3px rgba(255,126,95,.3)}
.skin-row{display:flex;flex-wrap:wrap;gap:8px}
.skin-row button{font:inherit;font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;border:2px solid #e3e6ee;background:#fff;cursor:pointer;color:#1c2541}
.skin-row button[aria-pressed="true"]{border-color:#FF7E5F;background:#FFF1EC}
.skin-close{float:right;font-size:20px;line-height:1;border:none;background:none;cursor:pointer;color:#5b6f84;padding:4px}
@media (prefers-reduced-motion:reduce){.skin-btn.nudge{animation:none}html:not([data-skin="classic"]) .card:hover{transform:none}}
@media print{html:not([data-skin="classic"]) body{background:#fff!important}.skin-btn{display:none}}
/* feedback button in the brand bar (added by edutech-skins.js) */
.fb-btn{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:13px;font-weight:800;color:#02283f;background:#f4b942;border:1.5px solid #e0a12a;border-radius:999px;padding:6px 12px;text-decoration:none}
.fb-btn:hover,.fb-btn:focus-visible{background:#02283f;border-color:#02283f;color:#fff}
.fb-btn + .skin-btn{margin-left:0}
@media (max-width:420px){.skin-btn span{display:none}.skin-btn{padding:6px 10px;font-size:15px}}
@media print{.fb-btn{display:none}}
.fb-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:18px 0 12px;padding:14px 18px;border-radius:16px;background:#fff8e6;border:1.5px solid #f4d48a;color:#02283f;font-family:Inter,system-ui,sans-serif;font-size:15px;font-weight:600;line-height:1.4}
.fb-ask a{flex:none;padding:8px 16px;border-radius:999px;background:#f4b942;border:1.5px solid #e0a12a;color:#02283f;font-weight:800;text-decoration:none}
.fb-ask a:hover,.fb-ask a:focus-visible{background:#02283f;border-color:#02283f;color:#fff}
@media print{.fb-ask{display:none}}