/* A revolving collection of the tools I build with. */
.toolkit-main { padding-top:76px; }
.stack-console { position:relative; isolation:isolate; overflow:hidden; margin:0; max-width:none; padding:24px 6vw 30px; color:var(--paper); background:var(--navy); }
.stack-console:before { content:''; position:absolute; pointer-events:none; inset:0; z-index:-1; opacity:.18; background-image:radial-gradient(var(--light-blue) .6px,transparent .6px); background-size:7px 7px; mask-image:linear-gradient(transparent,#000,transparent); }
.stack-topline { display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid #dbe2ef33; font:10px var(--heading-font); letter-spacing:.1em; }
.stack-reset { background:transparent; color:var(--paper); border:1px solid #dbe2ef66; border-radius:30px; padding:10px 18px; font:11px var(--heading-font); transition:background .3s,color .3s; }
.stack-reset:hover,.stack-reset[aria-pressed=true] { background:var(--paper); color:var(--navy); }
.console-title { display:grid; grid-template-columns:1fr auto; align-items:end; gap:12px 30px; margin:28px 0 24px; }
.console-title h1 { margin:0; font:500 clamp(45px,5.6vw,88px)/.95 var(--heading-font); letter-spacing:-.075em; }
.console-title p { grid-column:1; margin:0; font-size:13px; color:var(--light-blue); }
.console-edition { grid-column:2; grid-row:1/3; font:9px var(--heading-font); letter-spacing:.09em; color:var(--light-blue); }
.stack-filters { display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin:25px 0 0; position:relative; z-index:30; }
.stack-filters button { position:relative; background:transparent; color:var(--light-blue); padding:9px 0; font:11px var(--heading-font); transition:color .3s; }
.stack-filters button:after { content:''; position:absolute; bottom:0; left:0; height:1px; width:100%; background:var(--paper); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.stack-filters button[aria-pressed=true],.stack-filters button:hover { color:var(--paper); }.stack-filters button[aria-pressed=true]:after { transform:scaleX(1); }
.stack-workspace { position:relative; height:490px; margin:0 -3vw; }
.stack-board { position:absolute; inset:0; touch-action:pan-y; cursor:grab; }
.stack-board.is-dragging { cursor:grabbing; }
.orbit-track { position:absolute; top:50%; left:50%; width:81%; height:64%; border:1px solid #dbe2ef25; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.orbit-track:before,.orbit-track:after { content:''; position:absolute; inset:8px -12px; border:1px solid #dbe2ef12; border-radius:50%; transform:rotate(-7deg); }
.orbit-track:after { transform:rotate(7deg); }
.orbit-caption { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; pointer-events:none; }
.orbit-category { font:10px var(--heading-font); letter-spacing:.24em; color:var(--light-blue); }
.orbit-name { max-width:80%; font:500 clamp(55px,8.9vw,150px)/1.05 var(--heading-font); letter-spacing:-.08em; white-space:nowrap; color:var(--paper); }
.orbit-number { font:10px var(--heading-font); letter-spacing:.16em; color:var(--light-blue); }
.stack-module { position:absolute; top:50%; left:50%; width:110px; height:110px; border:1px solid #dbe2efcc; border-radius:50%; background:var(--paper); color:var(--navy); display:flex; align-items:center; justify-content:center; padding:17px; box-shadow:0 8px 24px #061a3044,inset 0 0 0 5px #dbe2ef77; transform:translate(-50%,-50%); will-change:transform; user-select:none; touch-action:pan-y; }
.stack-module:before { content:''; position:absolute; inset:8px; border:1px solid #3f72af22; border-radius:50%; pointer-events:none; transition:inset .4s,border-color .4s; }
.stack-module.is-selected:before { inset:-8px; border-color:#dbe2ef99; }
.module-logos { height:48px; display:flex; align-items:center; justify-content:center; gap:1px; pointer-events:none; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.module-logos img { display:block; width:45px; height:45px; object-fit:contain; pointer-events:none; }
.module-logos img[src$="html5.svg"],.module-logos img[src$="css3.svg"] { width:33px; }
.module-logos img[src$="php.svg"] { width:62px; }.module-logos img[src$="filament.svg"] { width:78px; }.module-logos img[src$="mysql.svg"] { width:64px; }
.module-index { position:absolute; top:11px; left:0; width:100%; text-align:center; font:6px var(--heading-font); color:var(--blue); pointer-events:none; }
.module-name { position:absolute; top:calc(100% + 13px); left:50%; transform:translateX(-50%) translateY(-4px); white-space:nowrap; padding:5px 8px; color:var(--paper); background:var(--navy); border-radius:3px; font:10px var(--heading-font); opacity:0; pointer-events:none; transition:opacity .25s,transform .3s; }
.module-port { display:none; }
.stack-module:hover .module-logos,.stack-module:focus-visible .module-logos { transform:scale(1.15) rotate(-7deg); }
.stack-module:hover .module-name,.stack-module:focus-visible .module-name { opacity:1; transform:translateX(-50%) translateY(0); }
.stack-console :focus-visible { outline:2px solid var(--paper); outline-offset:6px; }
.stack-bottomline { display:flex; align-items:center; justify-content:center; gap:30px; position:relative; z-index:25; max-width:560px; margin:15px auto 0; }
.orbit-prev,.orbit-next { width:48px; height:48px; flex-shrink:0; border:1px solid #dbe2ef66; border-radius:50%; font:24px var(--heading-font); background:transparent; color:var(--paper); transition:background .3s,color .3s,transform .3s; }
.orbit-prev:hover,.orbit-next:hover { background:var(--paper); color:var(--navy); transform:rotate(-15deg); }
.orbit-scrubber { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:9px; }
.orbit-scrubber label { font:10px var(--heading-font); letter-spacing:.05em; color:var(--light-blue); }
.orbit-scrubber input { width:100%; height:18px; accent-color:var(--paper); cursor:ew-resize; }
.stack-selection-summary { font:9px var(--heading-font); color:var(--light-blue); text-align:center; min-height:14px; }
.orbit-to-notes { display:block; width:fit-content; margin:30px auto 0; padding:10px; font:11px var(--heading-font); color:var(--light-blue); transition:transform .3s; }.orbit-to-notes:hover { transform:translateY(4px); }
.stack-console.is-overview .stack-workspace { height:auto; margin:30px 0; }
.stack-console.is-overview .stack-board { position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:34px 20px; padding:20px 0; cursor:default; }
.stack-console.is-overview .stack-module { position:relative; top:auto; left:auto; justify-self:center; }
.stack-console.is-overview .orbit-track,.stack-console.is-overview .orbit-caption { display:none; }
.stack-console.is-overview .module-name { opacity:1; transform:translateX(-50%); }
.stack-console.is-overview .stack-module[hidden] { display:none; }
.learning-notebook { position:relative; border-top:0; padding-top:100px; }
.learning-heading { position:relative; }.learning-heading:before { content:'02'; position:absolute; right:0; top:-30px; font:500 clamp(90px,15vw,210px)/1 var(--heading-font); letter-spacing:-.09em; color:var(--light-blue); z-index:-1; }
#learning-title { scroll-margin-top:100px; }
@media(min-width:1600px) { .stack-workspace { max-width:1500px; margin-left:auto; margin-right:auto; } }
@media(max-width:1050px) { .stack-console.is-overview .stack-board { grid-template-columns:repeat(5,minmax(0,1fr)); }.stack-filters { gap:16px; } }
@media(max-width:767px) {
 .toolkit-main { padding-top:70px; }.stack-console { padding:20px 6vw 25px; }.stack-topline { font-size:8px; }.stack-reset { font-size:10px; padding:8px 12px; }
 .console-title { margin-top:28px; gap:15px; }.console-title h1 { font-size:48px; }.console-title p { font-size:12px; }.console-edition { font-size:7px; max-width:63px; line-height:1.8; }
 .stack-filters { gap:3px 15px; justify-content:start; margin-top:25px; }.stack-filters button { font-size:9px; }
 .stack-workspace { height:420px; margin:0 -6vw; }.orbit-name { font-size:clamp(35px,10vw,76px); max-width:94%; }.orbit-category { font-size:8px; letter-spacing:.12em; }.orbit-number { font-size:8px; }.orbit-track { width:86%; height:70%; }
 .stack-module { width:76px; height:76px; padding:12px; box-shadow:0 5px 18px #061a3044,inset 0 0 0 4px #dbe2ef77; }.module-logos img { width:32px; height:32px; }.module-logos img[src$="html5.svg"],.module-logos img[src$="css3.svg"] { width:24px; }.module-logos img[src$="php.svg"] { width:44px; }.module-logos img[src$="filament.svg"] { width:57px; }.module-logos img[src$="mysql.svg"] { width:47px; }.module-index { top:7px; font-size:5px; }.module-name { font-size:9px; top:calc(100% + 9px); }
 .stack-bottomline { gap:18px; margin-top:5px; }.orbit-prev,.orbit-next { width:40px; height:40px; font-size:20px; }.orbit-scrubber label { font-size:9px; }.stack-selection-summary { font-size:8px; }
 .stack-console.is-overview .stack-board { grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px 10px; }.stack-console.is-overview .stack-workspace { margin-top:20px; margin-bottom:35px; }
 .learning-notebook { padding-top:65px; }.learning-heading:before { top:-20px; right:-5px; }
}
@media(prefers-reduced-motion:reduce) { .stack-console * { transition:none !important; }.stack-module { will-change:auto; } }
.stack-module[hidden] { display:none !important; }

/* Keep the collection controls together, with the overview at the lower right. */
.stack-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; margin-top:30px; }
.stack-footer .orbit-to-notes { grid-column:2; margin:0; }
.stack-footer .stack-reset { grid-column:3; justify-self:end; }
@media(max-width:600px) { .stack-footer { grid-template-columns:1fr; gap:16px; }.stack-footer .orbit-to-notes { grid-column:1; justify-self:center; }.stack-footer .stack-reset { grid-column:1; } }
/* One complete viewport below the fixed navigation, at every screen height. */
body[data-page=programeertalen] { --toolkit-header-height:80px; }
body[data-page=programeertalen] .toolkit-main { padding-top:var(--toolkit-header-height); }
.stack-console { display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; height:calc(100svh - var(--toolkit-header-height,80px)); min-height:0; padding:clamp(12px,2.5svh,24px) 6vw clamp(14px,2.5svh,24px); row-gap:clamp(8px,1.4svh,14px); box-sizing:border-box; }
.stack-console .stack-filters { margin:0; }
.stack-console .stack-workspace { height:auto; min-height:0; margin:0 -3vw; }
.stack-console .stack-bottomline { width:min(100%,560px); margin:0 auto; }
.stack-console .stack-footer { margin:0; gap:12px; }
.stack-console .stack-module { width:clamp(74px,13svh,110px); height:clamp(74px,13svh,110px); }
.stack-console.is-overview .stack-workspace { height:auto; min-height:0; margin:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#dbe2ef80 transparent; }
.stack-console.is-overview .stack-board { min-height:100%; align-content:center; padding:18px 8px 34px; }
@media(max-width:767px) {
 body[data-page=programeertalen] { --toolkit-header-height:64px; }
 .stack-console .stack-workspace { margin:0 -6vw; }
 .stack-console .stack-module { width:clamp(60px,10svh,76px); height:clamp(60px,10svh,76px); }
 .stack-console .stack-footer { grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
 .stack-console .stack-footer .orbit-to-notes { grid-column:1; justify-self:start; padding:8px 0; max-width:180px; line-height:1.5; }
 .stack-console .stack-footer .stack-reset { grid-column:2; grid-row:1; }
 .stack-console.is-overview .stack-board { align-content:start; }
}
@media(max-height:650px) {
 .stack-console .stack-filters button { padding:6px 0; }
 .stack-console .stack-footer .stack-reset { padding:8px 12px; }
 .stack-console .stack-bottomline { gap:14px; }
 .stack-console .orbit-name { font-size:clamp(34px,8vw,100px); }
 .stack-console .orbit-caption { gap:6px; }
}