:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#17212d;background:#f7f8fa}*{box-sizing:border-box}body{margin:0}button,textarea{font:inherit}button{cursor:pointer}aside{position:fixed;inset:0 auto 0 0;width:258px;background:#101b2b;color:white;padding:27px 16px;overflow:auto}aside h1{font-size:21px;letter-spacing:-.7px;margin:0 8px 6px}aside .tag{color:#91a0b6;font-size:12px;margin:0 8px 28px}aside button{display:block;width:100%;text-align:left;border:0;background:none;color:#c4cfde;padding:12px 14px;border-radius:10px;margin:3px 0}aside button:hover,aside button.active{background:#26354b;color:white}aside button small{display:block;color:#8ea0b5;margin-top:4px}main{margin-left:258px;padding:35px 5vw 80px;max-width:1700px}.crumb{color:#7b8797;font-size:13px;margin-bottom:22px}.hero{background:#fff;border:1px solid #e7e9ef;border-radius:20px;padding:34px;margin-bottom:22px}.eyebrow{font-size:12px;letter-spacing:1.7px;text-transform:uppercase;color:#cbc5fa;font-weight:800}.hero h2{font-size:clamp(29px,4vw,48px);line-height:1.13;margin:12px 0}.hero p{color:#677487;line-height:1.7;max-width:760px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.card,.row{border:1px solid #e6e9ef;background:white;border-radius:16px;text-align:left;padding:23px;transition:.2s}.card:hover,.row:hover{border-color:#cbc5fa;transform:translateY(-2px)}.card h3{font-size:21px}.card p,.muted{color:#7c8897;font-size:13px}.pill{font-size:12px;color:#cbc5fa;font-weight:800}.rows{display:grid;gap:11px}.row{display:flex;align-items:center;justify-content:space-between}.row b{font-size:17px}.back{border:0;background:none;color:#cbc5fa;padding:0;margin:0 0 18px}.workspace{display:grid;grid-template-columns:minmax(270px,.85fr) minmax(380px,1.15fr);gap:20px;align-items:start}.panel{background:#fff;border:1px solid #e6e9ef;border-radius:17px;overflow:hidden;margin-bottom:18px}.panelhead{padding:17px 20px;border-bottom:1px solid #e8eaf0;font-weight:800;display:flex;justify-content:space-between;align-items:center}.body{padding:20px;line-height:1.75;color:#475569;white-space:pre-line}.task{padding:20px;border:1px solid #f3c8d1;background:#fff6f8;border-radius:16px;margin-bottom:16px}.task h3{margin:0 0 9px}.task p{line-height:1.7}.actions{display:flex;gap:9px;flex-wrap:wrap;padding:12px 16px}.primary,.secondary{border:0;border-radius:9px;padding:10px 15px;font-weight:700}.primary{background:#cbc5fa;color:white}.secondary{background:#eef1f5;color:#344256}.tabs{display:flex;gap:5px}.tabs button{border:0;background:#f0f2f5;border-radius:7px;padding:7px 12px}.tabs button.active{background:#172a44;color:#fff}textarea{display:block;width:100%;min-height:245px;padding:19px;background:#111d2d;color:#e3edf8;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;border:0;resize:vertical;tab-size:2}iframe{width:100%;height:265px;border:0;background:white}.feedback{margin-top:10px;color:#475569;font-size:13px}.link{color:#cbc5fa;text-decoration:none;font-weight:700}.small{font-size:12px;color:#6d7887}.source{padding:14px 20px;border-top:1px solid #eef0f3}.done{color:#14855b;font-weight:700}.search{padding:14px 16px;width:100%;border:1px solid #e2e5eb;border-radius:12px;margin-bottom:22px}.progress{height:7px;background:#e9edf2;border-radius:9px;overflow:hidden;margin:12px 0}.progress>div{height:100%;background:#cbc5fa;transition:.2s}@media(max-width:1100px){.workspace{grid-template-columns:1fr}}@media(max-width:760px){aside{position:static;width:auto;max-height:260px}main{margin-left:0;padding:24px 16px}.hero{padding:24px}}

/* Web Essentials — editorial / vibrant redesign inspired by supplied reference */
:root{font-family:Inter,Arial,Helvetica,sans-serif;color:#171717;background:#ededeb;--orange:#cbc5fa;--purple:#a66bea;--lime:#c4fb55;--ink:#171717;--paper:#fff;--line:#dfdfdc}
body{background:#ededeb;color:var(--ink)}
aside{width:270px;background:#f8f8f6;color:var(--ink);border-right:1px solid #dededb;padding:30px 18px}
aside:before{content:none;display:none}
aside h1{font-size:26px;font-weight:850;letter-spacing:-1.6px;margin:0 10px 5px}
aside .tag{font-size:10px;letter-spacing:1.6px;color:#6e6e6b;margin:0 10px 36px}
aside button{color:#333;font-weight:650;border:1px solid transparent;border-radius:12px;padding:13px 12px;margin:4px 0;transition:.2s}
aside button:hover{background:#ecece9;color:#111}
aside button.active,aside button.active:hover{background:var(--ink);color:white}
aside button small{color:#777;font-size:11px;font-weight:450}
aside button.active small{color:#d1d1d1}
main{margin-left:270px;padding:40px clamp(22px,4vw,75px) 90px;max-width:1750px}
.crumb{color:#777;font-size:12px;letter-spacing:.25px;margin-bottom:24px}
.hero{background:#fdfdfb;border:0;border-radius:5px;padding:clamp(30px,5vw,65px);margin-bottom:22px;position:relative;overflow:hidden;min-height:260px}
.hero:after{content:'↗';position:absolute;right:30px;top:20px;font-size:44px;line-height:1;color:#151515;font-weight:300;transform:rotate(-2deg)}
.hero .eyebrow{color:#151515;background:var(--lime);display:inline-block;padding:7px 12px;border-radius:30px;font-size:10px;letter-spacing:1px;font-weight:800}
.hero h2{font-size:clamp(38px,5vw,72px);font-weight:820;letter-spacing:-3.1px;line-height:1.04;margin:22px 0 17px;max-width:900px}
.hero h2 span{color:var(--orange)!important}
.hero p{color:#595959;font-size:15px;line-height:1.65;max-width:660px}
.hero b{font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.progress{height:9px;background:#e8e8e4;border-radius:50px;max-width:500px;margin-top:15px}
.progress>div{background:var(--orange);border-radius:50px}
.cards{grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:16px}
.card{min-height:235px;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:26px;border:0;border-radius:22px;color:#171717;overflow:hidden}
.card:nth-child(6n + 1){background:var(--orange);color:white}
.card:nth-child(6n + 2){background:var(--purple);color:white}
.card:nth-child(6n + 3){background:var(--lime)}
.card:nth-child(6n + 4){background:#1d1d1d;color:white}
.card:nth-child(6n + 5){background:#fff}
.card:nth-child(6n){background:#d6a1f4}

.card h3{font-size:clamp(22px,2.2vw,29px);letter-spacing:-1px;line-height:1.13;margin:26px 0 20px;max-width:215px}
.card p{color:inherit;opacity:.8;font-size:12px;margin:0;max-width:180px}
.card .pill{color:inherit;background:#ffffff40;padding:6px 10px;border-radius:20px;font-size:10px;letter-spacing:1px}
.card:hover{transform:translateY(-5px);border-color:transparent;filter:brightness(.98)}
.search{border:0;border-radius:7px;background:white;padding:18px 20px;margin:0 0 18px;outline-color:var(--purple)}
.rows{gap:8px}.row{background:#fdfdfb;border:0;border-bottom:1px solid #dededb;border-radius:5px;padding:24px 28px;min-height:90px}
.row:hover{border-color:var(--orange);background:#f7f7f3;transform:translateX(3px)}
.row b{font-size:21px;letter-spacing:-.5px}.pill{color:#111;font-size:10px;letter-spacing:1.3px}
.back{color:#111;font-size:13px;font-weight:700;border:1px solid #bbb;padding:10px 14px;border-radius:30px;margin-bottom:18px}
.workspace{grid-template-columns:minmax(260px,.85fr) minmax(370px,1.15fr);gap:17px}
.panel{background:#fdfdfb;border:0;border-radius:9px;margin-bottom:17px}
.panelhead{border-bottom:1px solid #e9e9e6;padding:19px 22px;font-size:14px;letter-spacing:-.15px}
.body{color:#404040;padding:24px;line-height:1.75}
.task{background:var(--lime);border:0;border-radius:20px;padding:26px}
.task h3{font-size:23px;letter-spacing:-.7px}.task p{color:#333}
.primary{background:var(--orange);color:white;border-radius:30px;padding:12px 20px}
.secondary{background:#ededeb;color:#151515;border-radius:30px;padding:12px 20px}
.tabs button{border-radius:30px;background:#eee;color:#333;padding:8px 16px}
.tabs button.active{background:var(--purple);color:white}
textarea{background:#202020;color:#f7f7f7;min-height:290px;font-size:13px}
iframe{height:290px}
.link{color:#161616;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px}
.source{border-top:1px solid #e8e8e5}.small{color:#777}
@media(max-width:1100px){.workspace{grid-template-columns:1fr}}
@media(max-width:760px){aside{position:static;width:auto;max-height:280px;padding:18px}aside .tag{margin-bottom:12px}main{margin-left:0;padding:20px 15px 55px}.hero{padding:30px 23px;min-height:0}.hero h2{letter-spacing:-1.7px}.hero:after{font-size:25px;right:17px}.card{min-height:215px}.cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}

/* Lessenpagina: gekleurde tegels */
.topic-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:24px}
.topic-card{min-height:225px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;padding:26px;border:0;border-radius:22px;cursor:pointer;color:#171717;transition:transform .2s,filter .2s}
.topic-card:nth-child(6n + 1){background:#cbc5fa;color:white}
.topic-card:nth-child(6n + 2){background:#8d72eb;color:white}
.topic-card:nth-child(6n + 3){background:#bcfa54;color:#171717}
.topic-card:nth-child(6n + 4){background:#1d1d1d;color:white}
.topic-card:nth-child(6n + 5){background:#fff;color:#171717}
.topic-card:nth-child(6n){background:#d6a1f4;color:#171717}
.topic-card:hover{transform:translateY(-5px);filter:brightness(.98)}
.topic-card .topic-label{font-size:11px;letter-spacing:1.1px;font-weight:800;border-radius:100px;padding:7px 11px;background:#ffffff40}
.topic-card h3{font-size:clamp(23px,2.2vw,31px);letter-spacing:-1px;line-height:1.12;margin:25px 0 18px;overflow-wrap:anywhere}
.topic-card .topic-status{font-size:12px;opacity:.82;font-weight:600}
@media(max-width:760px){.topic-cards{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.topic-card{min-height:200px}}

/* Pijlknop op alle les- en onderwerptegels */
.card,.topic-card{position:relative;padding-bottom:78px}
.card::after,.topic-card::after{
  content:"↗";
  position:absolute;
  right:22px;
  bottom:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:49px;
  height:49px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#171717;
  font-family:Arial,Helvetica,sans-serif;
  font-size:35px;
  font-weight:400;
  line-height:1;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
  pointer-events:none;
}
.card:hover::after,.card:focus-visible::after,
.topic-card:hover::after,.topic-card:focus-visible::after{
  background:#171717;
  color:#fff;
}
.card:focus-visible,.topic-card:focus-visible{outline:3px solid #171717;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.card::after,.topic-card::after{transition:none}}

/* Downloadmateriaal bij zelfstandige oefeningen */
.materials{margin:22px 0 20px;padding:20px;border:1px solid rgba(0,0,0,.17);background:rgba(255,255,255,.56);border-radius:15px}
.materials h4{font-size:15px;margin:0 0 7px;font-weight:800;letter-spacing:-.3px}
.materials-intro{font-size:13px;margin:0 0 13px;color:#343434;line-height:1.45}
.material-link{display:flex;align-items:center;gap:11px;padding:12px 13px;margin:8px 0;background:#fff;border-radius:10px;color:#151515;text-decoration:none;font-size:13px;font-weight:750;transition:background .2s}
.material-link:hover,.material-link:focus-visible{background:#1d1d1d;color:#fff}
.material-link .material-icon{font-size:19px;flex:0 0 auto}
.material-link .material-action{margin-left:auto;font-size:19px}
.material-placeholder{display:flex;align-items:center;gap:10px;padding:12px 13px;margin:8px 0;border:1px dashed #777;border-radius:10px;font-size:13px;color:#4c4c4c;background:#ffffff4d}
.material-note{font-size:11px!important;line-height:1.5;color:#555!important;margin:12px 0 0!important}

/* Eén opdracht per les, na alle leeronderwerpen */
.assignment-card{background:#b9ff4a!important;color:#171717!important;min-height:210px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px}
.assignment-card h3{font-size:clamp(25px,2.5vw,36px)!important;line-height:1.05;margin:10px 0!important;max-width:75%}
.assignment-badge{display:inline-block;font-size:11px;font-weight:900;letter-spacing:1.2px;border-radius:30px;background:#171717;color:#fff;padding:8px 12px}
.assignment-subtitle{font-size:13px;font-weight:650}
.assignment-hero{border-bottom:7px solid #b9ff4a}
.assignment-panel{background:white;border-radius:16px;padding:clamp(22px,4vw,45px);max-width:920px}
.assignment-panel h3{font-size:clamp(27px,3vw,42px);margin:20px 0 12px}
.assignment-panel>p{font-size:17px;line-height:1.6;max-width:700px}
.assignment-next{padding:20px;background:#f2f2f0;border-radius:12px;margin-top:20px;line-height:1.8}
.assignment-next ol{padding-left:22px;margin:8px 0 0}
.topic-finish{background:#b9ff4a;border-radius:15px;padding:24px;margin-top:20px}
.topic-finish label{font-weight:750;line-height:1.5}
.topic-finish input{width:18px;height:18px;vertical-align:middle;margin-right:6px}
.topic-finish .secondary{margin-top:10px}

/* Navigatie: les als hoofdniveau, inhoud en opdracht als subniveau */
.nav-lesson{margin-bottom:3px}
.nav-sub{display:none;margin:1px 0 11px 12px;padding:4px 0 3px 12px;border-left:2px solid #dededb}
.nav-sub.open{display:block}
aside .nav-sub button{display:block;width:100%;font-size:13px;text-align:left;padding:10px 12px;margin:2px 0;border-radius:9px;font-weight:600}
aside .nav-sub button.active{background:#c4fb55;color:#171717}
aside .nav-parent.active{background:#171717;color:white}
.brand-home{cursor:pointer;border-radius:8px}.brand-home:focus-visible{outline:3px solid #8b5cf6;outline-offset:5px}.search-label{display:block;font-weight:700;margin:4px 0 9px}.search-topic{position:relative}.search-topic .pill{letter-spacing:.05em}.empty-search{grid-column:1/-1;padding:22px;background:#fff;border-radius:12px}
/* Designverfijning: afgeronde grote vlakken, rustigere navigatie en opdracht-CTA */
.hero, .assignment-hero { border-radius: 24px; }
.panel, .assignment-panel { border-radius: 22px; }
aside button, aside .nav-parent, aside .nav-sub button { font-weight: 500; }
aside button.active, aside .nav-parent.active, aside .nav-sub button.active { font-weight: 800; }
.topic-finish { border-radius: 22px; padding: 30px; }
.topic-finish h3 { margin: 0 0 12px; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2; }
.topic-finish .small { font-size: 17px; line-height: 1.55; color: #414141; margin: 0 0 22px; }
.topic-finish .secondary { margin-top: 0; background: #f1f1ef; color: #171717; border-radius: 100px; padding: 15px 24px; transition: background .2s ease, color .2s ease, transform .2s ease; }
.topic-finish .secondary:hover { background: #171717; color: #fff; transform: translateY(-2px); }
.topic-finish .secondary:focus-visible { outline: 3px solid #7b4ce2; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .topic-finish .secondary { transition: none; } }

/* Prominente terugknoppen, consistent met de kleurrijke interface */
button.back{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:13px 22px;margin:0 0 24px;
  background:#171717;color:#fff;border:2px solid #171717;
  border-radius:999px;font-size:16px;font-weight:800;
  line-height:1.25;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
button.back:hover{background:#cbc5fa;color:#171717;border-color:#cbc5fa;transform:translateY(-2px)}
button.back:focus-visible{outline:3px solid #7b61e8;outline-offset:4px}
button.back:active{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){button.back{transition:none}button.back:hover{transform:none}}


/* Ruimere playground: twee gelijktijdige editors, zonder tabs */
.workspace{grid-template-columns:minmax(240px,.72fr) minmax(0,1.7fr);gap:24px}
.workspace>div{min-width:0}
.split-editors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:#383838}
.editor-column{min-width:0;background:#202020}
.editor-label{display:flex;align-items:center;gap:9px;padding:13px 16px;color:#fff;font-size:14px;font-weight:800;background:#292929}
.editor-label span:last-child{margin-left:auto;font-size:11px;color:#a5a5a5;font-weight:500}
.editor-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.html-dot{background:#cbc5fa}.css-dot{background:#b9ff4d}
.split-editors textarea{min-height:370px;height:370px;resize:vertical;border-radius:0;line-height:1.6;padding:18px;font-size:13px}
@media(max-width:1200px){.workspace{grid-template-columns:1fr}}
@media(max-width:700px){.split-editors{grid-template-columns:1fr}.split-editors textarea{height:230px;min-height:230px}}

/* Topic: uitleg, daarna een volledige-breedte playground, daarna de opdracht-CTA */
.topic-stack{display:flex;flex-direction:column;gap:22px;margin-top:22px;min-width:0}
.topic-stack .explainer{width:100%;min-width:0}
.topic-stack .explainer .body{font-size:17px;line-height:1.7;white-space:pre-line}
.topic-stack .playground-wide{width:100%;min-width:0;overflow:hidden}
.playground-three{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:2px;background:#383838;min-width:0}
.playground-three>.editor-column,.playground-three>.preview-column{min-width:0;background:#202020;display:flex;flex-direction:column}
.playground-three textarea{display:block;box-sizing:border-box;width:100%;height:410px;min-height:410px;resize:vertical;border:0;border-radius:0;padding:18px;color:#fff;background:#202020;font-size:13px;line-height:1.6}
.playground-three .preview-label{background:#f2f2f0;color:#171717}
.playground-three .preview-label span{color:#666}
.playground-three iframe{box-sizing:border-box;width:100%;height:410px;min-height:410px;flex:1;border:0;background:#fff;display:block}
.playground-wide .actions{padding:18px 20px;display:flex;flex-wrap:wrap;gap:10px}
.topic-stack .topic-finish{margin-top:0}
@media(max-width:1150px){.playground-three{grid-template-columns:repeat(2,minmax(0,1fr))}.playground-three .preview-column{grid-column:1/-1}.playground-three iframe{height:300px;min-height:300px}}
@media(max-width:650px){.playground-three{grid-template-columns:1fr}.playground-three .preview-column{grid-column:auto}.playground-three textarea{height:250px;min-height:250px}.playground-three iframe{height:270px;min-height:270px}}

/* Pastel palette — reference image inspired */
:root{--orange:#cbc5fa;--purple:#cbc5fa;--lime:#f3ef67;--ink:#101010;--paper:#fff;--line:#e2e0de;--mint:#76b69e;--pink:#eec4d9;--blue:#acc8e8;--clay:#ff7a50;background:#ededeb}
.card:nth-child(6n + 1){background:var(--orange);color:#101010}
.card:nth-child(6n + 2){background:var(--purple);color:#101010}
.card:nth-child(6n + 3){background:var(--lime);color:#101010}
.card:nth-child(6n + 4){background:var(--pink);color:#101010}
.card:nth-child(6n + 5){background:var(--blue);color:#101010}
.card:nth-child(6n + 6){background:var(--mint);color:#101010}
.row:nth-child(6n + 1){background:var(--orange)}
.row:nth-child(6n + 2){background:var(--purple)}
.row:nth-child(6n + 3){background:var(--pink)}
.row:nth-child(6n + 4){background:var(--lime)}
.row:nth-child(6n + 5){background:var(--blue)}
.row:nth-child(6n + 6){background:var(--mint)}
.hero .eyebrow,.topic-finish{background:var(--lime);color:#101010}
.topic-finish .small{color:#262626}
.primary,.back{background:#101010;color:#fff}
.primary:hover,.back:hover{background:var(--orange);color:#101010}
.card .card-arrow,.row .card-arrow{border:0}
.explainer .body{font-size:18px;line-height:1.8;color:#292929;white-space:pre-line;max-width:78ch}
.explainer .panelhead{font-size:18px}


/* COMPLETE SITE PALETTE — applied to every page and state */
:root{
 --orange:#cbc5fa;--purple:#cbc5fa;--lime:#f3ef67;
 --pink:#eec4d9;--blue:#acc8e8;--mint:#76b69e;--clay:#ff7a50;
 --ink:#101010;--paper:#fff;--line:#deddda;
}
body{background:#ededeb;color:var(--ink)}
aside{background:#f8f8f6;border-right-color:var(--line)}
aside button{color:var(--ink)}
aside button:hover{background:var(--purple);color:var(--ink)}
aside button.active,aside button.active:hover,
aside .nav-parent.active{background:var(--ink);color:#fff}
aside .nav-sub button.active,aside .nav-sub button.active:hover{background:var(--lime);color:var(--ink)}
aside .nav-sub{border-left-color:var(--purple)}
.brand-home:focus-visible{outline-color:var(--orange)}
.hero,.panel,.assignment-panel,.empty-search{background:var(--paper)}
.hero .eyebrow{background:var(--lime);color:var(--ink)}
.hero h2 span{color:var(--orange)!important}
.card,.topic-card,.row{color:var(--ink)!important}
.card:nth-child(6n + 1),.topic-card:nth-child(6n + 1),.row:nth-child(6n + 1){background:var(--orange)}
.card:nth-child(6n + 2),.topic-card:nth-child(6n + 2),.row:nth-child(6n + 2){background:var(--purple)}
.card:nth-child(6n + 3),.topic-card:nth-child(6n + 3),.row:nth-child(6n + 3){background:var(--pink)}
.card:nth-child(6n + 4),.topic-card:nth-child(6n + 4),.row:nth-child(6n + 4){background:var(--lime)}
.card:nth-child(6n + 5),.topic-card:nth-child(6n + 5),.row:nth-child(6n + 5){background:var(--blue)}
.card:nth-child(6n + 6),.topic-card:nth-child(6n + 6),.row:nth-child(6n + 6){background:var(--mint)}
.card .pill,.topic-card .topic-label{background:#ffffff80;color:var(--ink)}
.card::after,.topic-card::after{background:#fff;color:var(--ink);border:0}
.card:hover::after,.topic-card:hover::after,.card:focus-visible::after,.topic-card:focus-visible::after{background:var(--ink);color:#fff}
.card:focus-visible,.topic-card:focus-visible{outline-color:var(--orange)}
.search{border:2px solid var(--line);border-radius:16px;background:#fff;color:var(--ink)}
.search:focus{outline:3px solid var(--purple);outline-offset:2px;border-color:var(--ink)}
button.back,.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
button.back:hover,.primary:hover{background:var(--orange);color:var(--ink);border-color:var(--orange)}
button.back:focus-visible,.primary:focus-visible{outline-color:var(--purple)}
.secondary{background:var(--purple);color:var(--ink)}
.secondary:hover{background:var(--ink);color:#fff}
.link{color:var(--ink);text-decoration-color:var(--orange)}
.link:hover{color:#b3482b;text-decoration-color:var(--purple)}
.panelhead{border-bottom-color:var(--line)}
.source{border-top-color:var(--line)}
.topic-finish,.task,.assignment-card{background:var(--lime)!important;color:var(--ink)!important}
.topic-finish .small,.task p{color:var(--ink)}
.topic-finish .secondary{background:#fff;color:var(--ink)}
.topic-finish .secondary:hover{background:var(--ink);color:#fff}
.topic-finish .secondary:focus-visible{outline-color:var(--orange)}
.assignment-badge{background:var(--ink);color:#fff}
.assignment-hero{border-bottom-color:var(--lime)}
.assignment-next{background:var(--blue)}
.materials{background:#f6f3f8;border-color:var(--purple)}
.material-link{background:#fff;color:var(--ink)}
.material-link:hover,.material-link:focus-visible{background:var(--purple);color:var(--ink)}
.material-placeholder{background:#fff9;border-color:var(--clay)}
.editor-label{background:#292929;color:#fff}
.html-dot{background:var(--orange)}.css-dot{background:var(--mint)}
.playground-three .preview-label{background:var(--blue);color:var(--ink)}
.playground-three .preview-label span{color:#343434}
.tabs button.active{background:var(--purple);color:var(--ink)}
/* Keep dark code editors and white live preview for readability. */
@media(prefers-reduced-motion:reduce){.card,.topic-card,.primary,.secondary{transition:none}}


/* Visuele uitleg: tekst + topicspecifieke illustratie */
.topic-stack .explainer .explain-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(220px,.85fr);gap:28px;align-items:stretch;padding:30px 36px}
.topic-stack .explainer .explain-layout .body{padding:0;min-width:0}
.topic-visual{border-radius:23px;min-height:220px;padding:23px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;color:#101010}
.topic-visual[data-tone="0"]{background:var(--purple)}.topic-visual[data-tone="1"]{background:var(--pink)}.topic-visual[data-tone="2"]{background:var(--blue)}.topic-visual[data-tone="3"]{background:var(--mint)}.topic-visual[data-tone="4"]{background:var(--lime)}.topic-visual[data-tone="5"]{background:var(--orange)}
.topic-visual .visual-kicker{font-size:11px;letter-spacing:1.5px;font-weight:900;text-transform:uppercase;position:relative;z-index:1}
.topic-visual .visual-mark{font-size:clamp(58px,8vw,115px);font-weight:900;letter-spacing:-.09em;line-height:1.05;align-self:center;white-space:nowrap;position:relative;z-index:1}
.topic-visual .visual-foot{font-size:13px;font-weight:750;line-height:1.4;position:relative;z-index:1}
.topic-visual:after{content:"";width:190px;height:190px;border:2px solid #10101025;border-radius:50%;position:absolute;right:-55px;top:-60px}
.assignment-panel{max-width:none;width:100%;box-sizing:border-box}
@media(max-width:760px){.topic-stack .explainer .explain-layout{grid-template-columns:1fr;padding:22px;gap:18px}.topic-visual{min-height:160px}.topic-visual .visual-mark{font-size:76px}}

/* Lavender accent retained; former brown tiles replaced with coral orange. */
:root{--orange:#cbc5fa}
.card:nth-child(6n + 2),.topic-card:nth-child(6n + 2),.row:nth-child(6n + 2){background:var(--clay)}
.hero h2 span{color:#8174d9!important}
.link:hover{color:#6253b5;text-decoration-color:var(--purple)}

/* Home hero only: pastel blue surface, no decorative corner arrow */
#view > .hero:first-child:not(.assignment-hero){background:#fdfdfb!important;border-color:transparent!important;}
#view > .hero:first-child:not(.assignment-hero)::before,
#view > .hero:first-child:not(.assignment-hero)::after{content:none!important;display:none!important;}
#view > .hero:first-child:not(.assignment-hero) .eyebrow{background:#f3ef67!important;color:#111!important;}


/* Try it yourself — eerste interactieve mini-oefening */
.try-panel{border:0;overflow:hidden}
.try-panel .panelhead{background:#f3ef67;color:#171717;font-size:18px}
.try-intro{padding:24px 26px 20px;line-height:1.65}
.try-intro strong{font-size:22px;letter-spacing:-.5px}
.try-intro p{max-width:75ch;margin:10px 0}
.try-panel .actions{padding:18px 20px}
.try-feedback,.try-hint{margin:0 20px 20px;padding:14px 18px;border-radius:12px;background:#f3f1fa;color:#262238;font-size:14px;line-height:1.6}
.try-feedback.try-success{background:#e0f4e7;color:#125332;font-weight:750}
.try-hint{background:#fff5d9}
.try-hint[hidden]{display:none}

/* Gelijke titelgrootte voor uitleg en code playground */
.topic-stack .playground-wide .panelhead{font-size:18px;line-height:1.4}

/* Klikbare breadcrumbs met behoud van de bestaande rustige stijl */
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.crumb-link{appearance:none;background:transparent;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-decoration:none}
.crumb-link:hover{text-decoration:underline;color:#28233c}
.crumb-link:focus-visible{outline:2px solid #8174df;outline-offset:4px;border-radius:2px}
.crumb-current{color:inherit}
.crumb-separator{user-select:none}

/* Breadcrumbs: oorspronkelijke tekststijl, enkel onderlijnen bij hover */
.crumb .crumb-link{display:inline!important;appearance:none!important;-webkit-appearance:none!important;background:none!important;background-color:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;outline-offset:3px;margin:0!important;padding:0!important;min-height:0!important;min-width:0!important;width:auto!important;height:auto!important;line-height:inherit!important;font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;letter-spacing:inherit!important;color:inherit!important;vertical-align:baseline!important;text-decoration:none!important;cursor:pointer}
.crumb .crumb-link:hover{text-decoration:underline!important;color:inherit!important}
.crumb .crumb-link:focus-visible{outline:2px solid #8174df!important}

/* Onderwerptegels: breek woorden niet willekeurig middenin af. */
.topic-card h3{overflow-wrap:normal;word-break:normal;hyphens:auto;-webkit-hyphens:auto}

/* Credittekst onderaan de vaste zijbalk */
@media(min-width:761px){aside{display:flex;flex-direction:column}aside #nav{flex:0 0 auto}aside .small.nav-credit{margin-top:auto;padding-top:28px!important}}


/* Compacte homepage-hero met een eigen HTML/CSS-illustratie */
.home-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr);gap:26px;align-items:center;min-height:340px;padding:44px 48px;overflow:hidden}
.home-hero-copy{min-width:0;position:relative;z-index:1}
.home-hero .eyebrow{display:inline-block;background:#f2ef50;color:#17171c;border-radius:100px;padding:8px 13px;font-size:11px;letter-spacing:1px}
.home-hero h2{font-size:clamp(42px,4.5vw,76px);line-height:1.06;letter-spacing:-.055em;margin:22px 0 20px;color:#15151b}
.home-hero-accent{color:#8274dc}
.home-hero p{max-width:590px;font-size:15px;line-height:1.7;margin:0}
.home-hero-art{position:relative;min-width:0;max-width:540px;width:100%;height:300px;justify-self:center}
.art-editor{position:absolute;left:0;top:26px;width:87%;height:185px;border-radius:14px;background:#23243a;box-shadow:0 20px 42px #30264b23;transform:rotate(-5deg);overflow:hidden}
.art-editor-bar{height:39px;display:flex;align-items:center;gap:14px;padding:0 14px;background:#30314a;color:#d4d2ed;font:600 11px system-ui}
.art-dots{display:flex;gap:5px}.art-dots i{width:8px;height:8px;border-radius:50%;background:#f5a3a7}.art-dots i:nth-child(2){background:#f2e478}.art-dots i:nth-child(3){background:#a5d9ba}.art-editor-code{margin-left:auto;color:#bdb2ff;font-size:14px}
.art-code{padding:17px 13px;font:12px/2 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}.art-number{display:inline-block;width:30px;color:#777b9b}.art-tag{color:#a9a0ff}.art-plain{color:#f3de99}
.art-preview{position:absolute;right:0;bottom:10px;width:64%;min-width:225px;border:1px solid #e9e4fa;border-radius:15px;background:white;box-shadow:0 18px 40px #30264b20;transform:rotate(5deg);overflow:hidden}
.art-preview-bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 12px;background:#f6f4ff;font:700 10px system-ui;color:#67617f}.art-preview-dot{width:7px;height:7px;border-radius:50%;background:#6bca9e}.art-preview-check{margin-left:auto;color:#40a67a}
.art-preview-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px 20px 21px;color:#44415c;font:12px system-ui}.art-preview-kicker{font-size:9px;font-weight:800;letter-spacing:1px;color:#8174dc}.art-preview-body strong{font-size:26px;line-height:1.1;letter-spacing:-.04em;color:#242137}.art-preview-button{display:inline-block;margin-top:3px;padding:8px 12px;border-radius:8px;background:#f2ef50;color:#222;font-weight:800;font-size:10px}
.art-sticker{position:absolute;top:5px;right:6px;z-index:1;padding:9px 12px;border-radius:9px;background:#f2ef50;color:#26233a;font:800 12px system-ui;transform:rotate(12deg);box-shadow:0 7px 15px #30264b15}.art-spark{position:absolute;color:#8b7be6;font-size:28px}.art-spark-one{right:1%;top:65px}.art-spark-two{left:2%;bottom:6px;color:#ef9ba9}
@media(max-width:1100px){.home-hero{padding:32px;gap:12px;grid-template-columns:minmax(0,1fr) minmax(240px,.8fr)}.home-hero h2{font-size:clamp(38px,4vw,60px)}.art-code{font-size:10px}.art-preview{min-width:205px}}
@media(max-width:760px){.home-hero{grid-template-columns:1fr;padding:28px 24px;gap:20px}.home-hero h2{font-size:clamp(40px,9vw,62px)}.home-hero-art{height:270px;max-width:460px}.home-hero p{font-size:14px}}
@media(max-width:420px){.home-hero-art{height:245px}.art-editor{height:166px}.art-code{font-size:9px}.art-preview{min-width:190px;width:69%}.art-preview-body{padding:14px}.art-preview-body strong{font-size:22px}.home-hero .eyebrow{font-size:9px}}
@media(prefers-reduced-motion:no-preference){.art-sticker{animation:artFloat 5s ease-in-out infinite}@keyframes artFloat{0%,100%{transform:translateY(0) rotate(12deg)}50%{transform:translateY(-7px) rotate(9deg)}}}


/* Kleurenpalet 2026 — Cool Blue, Jade, Plum Noir, Wasabi, Persimmon.
   Alleen kleuren: de hero-illustratie en lay-out blijven voorlopig ongewijzigd. */
:root{
  --cool-blue:#D7EFFF;
  --jade:#AEB8A0;
  --plum-noir:#351F28;
  --wasabi:#E9F056;
  --persimmon:#FF5C34;
  --orange:var(--persimmon);
  --purple:var(--jade);
  --lime:var(--wasabi);
  --ink:var(--plum-noir);
  --paper:#fffefa;
  --line:#e7e3df;
}
body{background:#f5f4f0;color:var(--plum-noir)}
aside{background:#f8f8f3;color:var(--plum-noir);border-right-color:#e5e3dc}
aside h1,aside button{color:var(--plum-noir)}
aside button:hover{background:var(--cool-blue);color:var(--plum-noir)}
aside button.active,aside button.active:hover,aside .nav-parent.active{background:var(--plum-noir);color:white}
aside .nav-sub button.active{background:var(--wasabi);color:var(--plum-noir)}
.hero{background:#fffefa}
.hero .eyebrow,.home-hero .eyebrow{background:var(--wasabi);color:var(--plum-noir)}
.hero h2,.home-hero h2{color:var(--plum-noir)}
.hero h2 span,.home-hero .home-hero-accent{color:var(--persimmon)!important}
.hero:after{color:var(--plum-noir)}
/* Leskaarten: vijf herkenbare tinten, met leesbare tekst. */
.card:nth-child(5n + 1),.topic-card:nth-child(5n + 1){background:var(--cool-blue);color:var(--plum-noir)}
.card:nth-child(5n + 2),.topic-card:nth-child(5n + 2){background:var(--jade);color:var(--plum-noir)}
.card:nth-child(5n + 3),.topic-card:nth-child(5n + 3){background:var(--plum-noir);color:#fff}
.card:nth-child(5n + 4),.topic-card:nth-child(5n + 4){background:var(--wasabi);color:var(--plum-noir)}
.card:nth-child(5n),.topic-card:nth-child(5n){background:var(--persimmon);color:#241b1e}
.card::after,.topic-card::after{background:#fffefa;color:var(--plum-noir)}
.card:hover::after,.card:focus-visible::after,.topic-card:hover::after,.topic-card:focus-visible::after{background:var(--plum-noir);color:#fff}
.card:focus-visible,.topic-card:focus-visible{outline-color:var(--plum-noir)}
.back{color:var(--plum-noir);border-color:var(--jade)}
.panel,.assignment-panel,.row{background:#fffefa}
.panelhead{border-bottom-color:#e7e3df}
.primary{background:var(--plum-noir);color:#fff}
.secondary{background:var(--cool-blue);color:var(--plum-noir)}
.link{color:var(--plum-noir);text-decoration-color:var(--persimmon)}
.search{background:#fffefa;outline-color:var(--persimmon)}
.task,.topic-finish,.assignment-card{background:var(--wasabi)!important;color:var(--plum-noir)!important}
.assignment-hero{border-bottom-color:var(--persimmon)}
.assignment-badge{background:var(--plum-noir)}
.topic-finish .secondary:hover{background:var(--plum-noir);color:white}
.nav-sub{border-left-color:var(--jade)}
/* Accentkleuren in de bestaande code-illustratie */
.art-editor{background:var(--plum-noir)}
.art-editor-bar{background:#4b303b}
.art-tag{color:var(--cool-blue)}
.art-plain{color:var(--wasabi)}
.art-preview-bar{background:var(--cool-blue);color:var(--plum-noir)}
.art-preview-kicker{color:var(--plum-noir)}
.art-preview-button,.art-sticker{background:var(--wasabi);color:var(--plum-noir)}
.art-spark{color:var(--persimmon)}
.art-spark-two{color:var(--jade)}


/* Afwisselende kleurverdeling: geen identieke kleuren direct naast of onder elkaar.
   Bij vijf kolommen krijgt elke rij een andere verschuiving. */
.cards>.card:nth-child(10n + 1),.cards>.card:nth-child(10n + 7),
.topic-cards>.topic-card:nth-child(10n + 1),.topic-cards>.topic-card:nth-child(10n + 7){background:var(--cool-blue);color:var(--plum-noir)}
.cards>.card:nth-child(10n + 2),.cards>.card:nth-child(10n + 8),
.topic-cards>.topic-card:nth-child(10n + 2),.topic-cards>.topic-card:nth-child(10n + 8){background:var(--jade);color:var(--plum-noir)}
.cards>.card:nth-child(10n + 3),.cards>.card:nth-child(10n + 9),
.topic-cards>.topic-card:nth-child(10n + 3),.topic-cards>.topic-card:nth-child(10n + 9){background:var(--plum-noir);color:#fff}
.cards>.card:nth-child(10n + 4),.cards>.card:nth-child(10n + 10),
.topic-cards>.topic-card:nth-child(10n + 4),.topic-cards>.topic-card:nth-child(10n + 10){background:var(--wasabi);color:var(--plum-noir)}
.cards>.card:nth-child(10n + 5),.cards>.card:nth-child(10n + 6),
.topic-cards>.topic-card:nth-child(10n + 5),.topic-cards>.topic-card:nth-child(10n + 6){background:var(--persimmon);color:#241b1e}
/* Correcte contrasterende labels, beschrijvingen en pijlen op Plum Noir. */
.cards>.card:nth-child(10n + 3) *, .cards>.card:nth-child(10n + 9) *,
.topic-cards>.topic-card:nth-child(10n + 3) *, .topic-cards>.topic-card:nth-child(10n + 9) *{color:#fff}
.cards>.card:nth-child(10n + 3)::after,.cards>.card:nth-child(10n + 9)::after,
.topic-cards>.topic-card:nth-child(10n + 3)::after,.topic-cards>.topic-card:nth-child(10n + 9)::after{color:var(--plum-noir)}
.cards>.card:nth-child(10n + 3):hover::after,.cards>.card:nth-child(10n + 9):hover::after,
.topic-cards>.topic-card:nth-child(10n + 3):hover::after,.topic-cards>.topic-card:nth-child(10n + 9):hover::after{background:var(--wasabi);color:var(--plum-noir)}
/* Tweede rij met andere volgorde: blauw, jade, plum, wasabi, persimmon
   wordt persimmon, blauw, jade, plum, wasabi. */
.cards>.card:nth-child(10n + 6),.topic-cards>.topic-card:nth-child(10n + 6){background:var(--persimmon);color:#241b1e}
.cards>.card:nth-child(10n + 7),.topic-cards>.topic-card:nth-child(10n + 7){background:var(--cool-blue);color:var(--plum-noir)}
.cards>.card:nth-child(10n + 8),.topic-cards>.topic-card:nth-child(10n + 8){background:var(--jade);color:var(--plum-noir)}
.cards>.card:nth-child(10n + 9),.topic-cards>.topic-card:nth-child(10n + 9){background:var(--plum-noir);color:#fff}
.cards>.card:nth-child(10n + 10),.topic-cards>.topic-card:nth-child(10n + 10){background:var(--wasabi);color:var(--plum-noir)}

/* Weekopdrachten: geen oranje onderrand/accent onder de hero. */
.assignment-hero{border-bottom:0!important}

/* Typografie-test: Helvetica Neue in plaats van Inter, met systeemfallbacks. */
:root{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
body,button,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
/* Codevelden behouden een monospace-lettertype. */
textarea,.art-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}