:root{--ui-primary:#5200ff;--ui-deep:#3700b3;--ui-ink:#160033;--ui-muted:#625b70;--ui-mint:#3dffd0;--ui-soft-purple:#f7f3ff;--ui-soft-mint:#e8fff8;--ui-warm:#fbfaf7;--ui-border:#ddd6ea;--ui-error:#b3261e;--ui-soft-error:#fff1f0;--ui-paper:#fff;--ui-workspace:#f7f3ff;--ui-shadow:#16003329;--font-ui:Roboto, Arial, sans-serif;--font-code:Consolas, "Courier New", monospace;--motion-fast:.15s;--motion-medium:.26s;--motion-ease:cubic-bezier(.2, 0, 0, 1);font-family:var(--font-ui);color:var(--ui-ink);background:var(--ui-workspace);font-synthesis:none;text-rendering:optimizelegibility}*{box-sizing:border-box}.visually-hidden{clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}body{min-width:320px;min-height:100vh;color:var(--ui-ink);background:var(--ui-workspace);margin:0}button,textarea,input,select{font:inherit}button,a,input,select{min-width:48px;min-height:48px}button,a,input,select,textarea{color:var(--ui-ink)}button{border:2px solid var(--ui-border);background:var(--ui-paper);cursor:pointer;border-radius:.65rem;font-weight:700}button:disabled,input:disabled,select:disabled{color:var(--ui-muted);background:var(--ui-soft-purple);cursor:not-allowed}.app-shell{background:var(--ui-workspace);grid-template-rows:auto auto minmax(0,1fr);height:100dvh;min-height:100vh;display:grid;overflow:hidden}.topbar{border-bottom:1px solid var(--ui-border);color:var(--ui-ink);background:var(--ui-paper);box-shadow:0 2px 10px var(--ui-shadow);grid-template-columns:minmax(11rem,.55fr) max-content minmax(0,1fr);align-items:center;gap:.75rem;padding:.55rem clamp(.75rem,1.4vw,1.4rem);display:grid}.brand-lockup{flex-flow:column wrap;align-items:flex-start;gap:.25rem;display:flex}#class-save-root{width:max-content;min-width:0;max-width:100%}.eyebrow{color:var(--ui-deep);letter-spacing:.09em;text-transform:uppercase;margin:0 0 .2rem;font-size:.76rem;font-weight:800}h1{margin:0;font-size:clamp(1.4rem,2vw,1.85rem);font-weight:800;line-height:1}h2{margin:0;font-size:clamp(1.1rem,1.8vw,1.45rem);font-weight:800}.mode-switcher{border:1px solid var(--ui-border);background:var(--ui-soft-purple);border-radius:.85rem;align-items:center;gap:.4rem;padding:.25rem;display:flex}.cluster-label{min-height:48px;color:var(--ui-deep);letter-spacing:.05em;text-transform:uppercase;align-items:center;padding:0 .25rem;font-size:.76rem;font-weight:800;display:inline-flex}.mode-switcher button{color:var(--ui-ink);background:var(--ui-paper);padding:.55rem .75rem}.mode-switcher button[aria-pressed=true],.viewer-toolbar button[aria-pressed=true]{border:3px solid var(--ui-deep);color:var(--ui-paper);background:var(--ui-primary);font-weight:800;box-shadow:inset 0 -4px #1600333d}.status-strip{border-bottom:1px solid var(--ui-border);background:var(--ui-paper);justify-content:space-between;align-items:baseline;gap:1rem;min-height:2.75rem;padding:.4rem clamp(.75rem,1.4vw,1.4rem);display:flex}.status-strip p{margin:0}#app-status{font-weight:800}#validation-status{color:var(--ui-muted);text-align:right;font-size:.86rem}.app-shell[data-status=loading] .status-strip{background:var(--ui-soft-purple)}.app-shell[data-status=ready] .status-strip{color:var(--ui-deep);background:var(--ui-soft-mint)}.app-shell[data-status=mismatch] .status-strip,.app-shell[data-status=load_failed] .status-strip,.app-shell[data-status=page_failed] .status-strip{border-left:5px solid var(--ui-error);color:var(--ui-error);background:var(--ui-soft-error)}.app-shell[data-status=mismatch] #validation-status,.app-shell[data-status=load_failed] #validation-status,.app-shell[data-status=page_failed] #validation-status{color:var(--ui-error)}.viewer-toolbar{border-bottom:1px solid var(--ui-border);background:var(--ui-paper);flex-wrap:nowrap;align-items:center;gap:.45rem .8rem;padding:.4rem clamp(.75rem,1.4vw,1.4rem);display:flex}.app-shell[data-mode=code_lab] .viewer-toolbar{display:none}.page-navigation,.zoom-controls,.ink-toolbar,.split-control,.lab-heading-actions{align-items:center;gap:.4rem;display:flex}.viewer-toolbar button,.viewer-toolbar select,.viewer-toolbar input,.lab-heading-actions button{border-color:var(--ui-border);color:var(--ui-ink);background:var(--ui-paper)}.viewer-toolbar button,.lab-heading-actions button{padding:.45rem .68rem}.viewer-toolbar button:disabled,.viewer-toolbar input:disabled,.viewer-toolbar select:disabled,.lab-heading-actions button:disabled{color:var(--ui-muted);background:var(--ui-soft-purple)}.page-navigation form{align-items:center;gap:.35rem;display:flex}.page-navigation input{width:4.25rem;padding:.45rem}.page-navigation select{max-width:7.6rem;padding:.45rem}.zoom-controls>span,.split-control label,.page-navigation label{font-size:.82rem;font-weight:700}.split-control{display:none}.app-shell[data-mode=split] .split-control{display:flex}.split-control input{min-width:9rem}.ink-toolbar{flex-wrap:wrap;flex:auto;align-items:center;gap:.4rem;min-width:0;display:flex}.page-navigation,.zoom-controls{flex:none}.zoom-controls{margin-left:auto}.ink-toolbar>strong{color:var(--ui-deep);margin-right:.2rem;font-size:.86rem}.ink-color-control{min-height:48px;color:var(--ui-deep);align-items:center;gap:.35rem;font-size:.82rem;font-weight:800;display:inline-flex}.ink-color-control input{border:2px solid var(--ui-border);background:var(--ui-paper);border-radius:.65rem;width:48px;height:48px;padding:.2rem}.ink-status{color:var(--ui-muted);flex:18rem;font-size:.84rem;font-weight:700}.workspace{background:var(--ui-workspace);grid-template-columns:minmax(0,1fr);min-height:0;padding:clamp(.45rem,1vw,.85rem);display:grid;overflow:hidden}.app-shell[data-mode=split] .workspace{grid-template-columns:minmax(25rem, var(--book-ratio,58fr)) minmax(23rem, var(--lab-ratio,42fr));gap:.85rem}.viewer-pane,.lab-pane{border:1px solid var(--ui-border);background:var(--ui-paper);min-width:0;min-height:0;box-shadow:0 8px 28px var(--ui-shadow);border-radius:.9rem;grid-template-rows:auto minmax(0,1fr);display:grid;overflow:hidden}.app-shell[data-mode=book] .lab-pane,.app-shell[data-mode=code_lab] .viewer-pane{display:none}.app-shell[data-mode=code_lab] .lab-pane{width:min(76rem,100%);margin:0 auto}.pane-heading{border-bottom:1px solid var(--ui-border);background:var(--ui-paper);justify-content:space-between;align-items:center;gap:1rem;min-height:3.55rem;padding:.48rem .85rem;display:flex}.pane-heading .eyebrow{color:var(--ui-deep)}.page-count,.availability{border:1px solid var(--ui-border);color:var(--ui-deep);background:var(--ui-soft-mint);border-radius:99rem;padding:.4rem .65rem;font-size:.83rem;font-weight:800}.viewer-scroll{background:var(--ui-workspace);min-height:0;padding:.7rem;overflow:auto}.page-stage{grid-template-columns:max-content 5.2rem;align-items:start;width:max-content;margin:0 auto;display:grid}.page-surface{border:1px solid var(--ui-border);background:var(--ui-paper);box-shadow:0 5px 18px var(--ui-shadow);position:relative;overflow:hidden}#pdf-canvas{display:block}#ink-canvas{z-index:2;pointer-events:none;display:block;position:absolute;inset:0}.hotspot-gutter{min-width:5.2rem;position:relative}.hotspot-button{border:2px solid var(--ui-paper);width:4.1rem;min-height:56px;color:var(--ui-paper);background:var(--ui-primary);box-shadow:0 3px 10px var(--ui-shadow);cursor:pointer;border-radius:.8rem;place-items:center;gap:.05rem;padding:.35rem .2rem;font-size:.72rem;font-weight:800;display:grid;position:absolute;left:.55rem;transform:translateY(-.2rem)}.hotspot-button span:first-child{font-family:var(--font-code);font-size:1.05rem}.hotspot-button:disabled{color:var(--ui-muted);background:var(--ui-soft-purple);box-shadow:none}.lab-pane{background:var(--ui-paper);grid-template-rows:auto auto minmax(12rem,1fr) minmax(12rem,1fr) auto;overflow:auto;container:runtime-lab/inline-size}.lab-heading{min-height:5.4rem;color:var(--ui-ink);border-color:var(--ui-border);background:var(--ui-soft-purple)}.lab-heading h2{font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.1}.lab-heading-actions{flex-wrap:wrap;justify-content:flex-end}.lab-heading-actions button{color:var(--ui-ink);background:var(--ui-paper)}#focus-return{display:none}.app-shell[data-mode=code_lab] #focus-return{display:inline-block}.editor-frame{background:var(--ui-paper);grid-template-rows:auto minmax(0,1fr);min-height:0;padding:1rem;display:grid}.editor-frame label{color:var(--ui-deep);padding:0 0 .45rem;font-size:.82rem;font-weight:800}#code-editor{resize:none;border:1px solid var(--ui-border);border-left:5px solid var(--ui-primary);width:100%;min-height:12rem;color:var(--ui-ink);background:var(--ui-soft-purple);font-family:var(--font-code);tab-size:4;border-radius:.7rem;padding:1rem;font-size:clamp(.92rem,1.25vw,1.1rem);line-height:1.62;overflow:auto}.lab-status{border-top:1px solid var(--ui-border);color:var(--ui-muted);background:var(--ui-soft-purple);margin:0;padding:.85rem 1rem;font-size:.9rem}.runtime-controls{border-bottom:1px solid var(--ui-border);background:var(--ui-paper);gap:.55rem;padding:.7rem 1rem;display:grid}.runtime-toolbar,.dialog-actions{flex-wrap:wrap;gap:.45rem;display:flex}#runtime-run,#runtime-reset-confirm{border-color:var(--ui-deep);color:var(--ui-paper);background:var(--ui-primary)}#runtime-stop{border-color:var(--ui-primary);color:var(--ui-deep)}.runtime-toolbar button:disabled,.input-queue button:disabled{border-color:var(--ui-border);color:var(--ui-muted);background:var(--ui-soft-purple)}.runtime-toolbar button,.dialog-actions button,.input-queue button,.runtime-diagnostic button{padding:.55rem .8rem}.runtime-status,.runtime-terminal,.runtime-truncation{margin:0;font-weight:700}.runtime-status{border-left:4px solid var(--ui-mint);color:var(--ui-deep);background:var(--ui-soft-mint);padding:.55rem .7rem}.runtime-results{border-top:1px solid var(--ui-border);background:var(--ui-soft-purple);grid-template-columns:minmax(15rem,.8fr) minmax(18rem,1.2fr);gap:.75rem;min-height:0;padding:.75rem 1rem 1rem;display:grid;overflow:auto}.input-queue,.runtime-evidence,.runtime-diagnostic{border:1px solid var(--ui-border);background:var(--ui-paper);border-radius:.75rem;min-width:0;padding:.75rem}.input-queue{container:input-queue/inline-size}.input-queue header,.runtime-evidence header{justify-content:space-between;align-items:center;gap:.6rem;display:flex}.input-queue h3,.runtime-evidence h3,.runtime-diagnostic h3,#runtime-reset-dialog h3{color:var(--ui-ink);margin:0;font-size:1rem}#runtime-input-rows,.runtime-transcript{margin:.65rem 0 0;padding:0;list-style:none}#runtime-input-rows{gap:.55rem;display:grid}#runtime-input-rows li{grid-template-columns:minmax(7rem,auto) minmax(7rem,1fr) auto;align-items:center;gap:.45rem;display:grid}#runtime-input-rows label{font-weight:700}@container runtime-lab (width<=42rem){.runtime-results{grid-template-columns:minmax(0,1fr)}}@container input-queue (width<=24rem){#runtime-input-rows li{grid-template-columns:minmax(0,1fr)}}#runtime-input-rows input{border:1px solid var(--ui-border);background:var(--ui-paper);border-radius:.55rem;padding:.5rem .65rem}#runtime-input-rows input[readonly]{color:var(--ui-muted);background:var(--ui-soft-purple)}.runtime-terminal{color:var(--ui-deep)}.runtime-transcript{gap:.4rem;max-height:14rem;display:grid;overflow:auto}.runtime-transcript li{border-left:4px solid var(--ui-primary);background:var(--ui-soft-purple);grid-template-columns:6.5rem minmax(0,1fr);gap:.55rem;padding:.5rem;display:grid}.runtime-transcript li[data-channel=stderr],.runtime-transcript li[data-channel=diagnostic]{border-left-color:var(--ui-error);background:var(--ui-soft-error)}.runtime-transcript pre,.runtime-traceback{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--font-code);margin:0;overflow:auto}.runtime-truncation{border-left:4px solid var(--ui-error);color:var(--ui-error);background:var(--ui-soft-error);margin-top:.65rem;padding:.6rem}.runtime-diagnostic{border-left:5px solid var(--ui-error);color:var(--ui-ink);background:var(--ui-soft-error);grid-column:1/-1}.runtime-diagnostic dl{grid-template-columns:max-content minmax(0,1fr);gap:.3rem .75rem;display:grid}.runtime-diagnostic dt{font-weight:800}.runtime-diagnostic dd{overflow-wrap:anywhere;margin:0}#runtime-reset-dialog{border:2px solid var(--ui-deep);width:min(34rem,100% - 2rem);color:var(--ui-ink);background:var(--ui-paper);box-shadow:0 12px 32px var(--ui-shadow);border-radius:.85rem;padding:1rem}#runtime-reset-dialog::backdrop{background:#16003352}#runtime-reset-dialog p{line-height:1.5}.class-save-cluster{border:1px solid var(--ui-border);background:var(--ui-paper);border-radius:.85rem;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:.5rem;min-width:0;padding:.35rem .45rem;display:flex}.class-picker,.save-actions{flex-wrap:nowrap;align-items:center;gap:.5rem;display:flex}.class-picker label{color:var(--ui-deep);font-weight:800}#active-class{border:2px solid var(--ui-border);min-width:9.5rem;min-height:48px;color:var(--ui-ink);background:var(--ui-paper);border-radius:.65rem;padding:0 .75rem}.primary-action{border-color:var(--ui-deep);color:var(--ui-paper);background:var(--ui-primary);font-weight:800}.save-status,.save-detail{margin:0}.save-status{border-left:5px solid var(--ui-border);background:var(--ui-soft-purple);min-width:8.75rem;padding:.45rem .6rem;font-weight:800}.save-status[data-state=clean]{border-left-color:var(--ui-mint);background:var(--ui-soft-mint)}.save-status[data-state=dirty],.save-status[data-state=saving]{border-left-color:var(--ui-primary)}.save-status[data-state=failed]{border-left-color:var(--ui-error);background:var(--ui-soft-error)}.save-detail:not(:empty){color:var(--ui-error);flex-basis:100%;font-weight:700}#new-class-dialog{border:2px solid var(--ui-deep);width:min(34rem,100% - 2rem);color:var(--ui-ink);background:var(--ui-paper);box-shadow:0 12px 32px var(--ui-shadow);border-radius:.85rem;padding:1.25rem}#new-class-dialog::backdrop{background:#16003352}#new-class-form{gap:.85rem;display:grid}#new-class-form h2,#new-class-form p{margin:0}#new-class-name{border:2px solid var(--ui-border);min-height:48px;font:inherit;border-radius:.65rem;padding:0 .75rem}.dialog-error{min-height:1.5em;color:var(--ui-error);font-weight:800}:where(button,a,input,select,textarea,summary,.viewer-scroll):focus-visible{outline:3px solid var(--ui-deep);outline-offset:3px;box-shadow:0 0 0 2px var(--ui-paper)!important}@media (hover:hover) and (pointer:fine){button:not(:disabled){transition:color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease)}button:not(:disabled):hover{border-color:var(--ui-primary);color:var(--ui-deep);background:var(--ui-soft-purple)}.mode-switcher button[aria-pressed=true]:hover,.viewer-toolbar button[aria-pressed=true]:hover,.hotspot-button:not(:disabled):hover{border-color:var(--ui-deep);color:var(--ui-paper);background:var(--ui-deep)}}@media (max-width:1100px){.app-shell{height:auto;min-height:100dvh;overflow:visible}.topbar{grid-template-columns:minmax(10rem,1fr) minmax(22rem,auto);align-items:center}.brand-lockup{flex-direction:row;align-items:center}#class-save-root{grid-area:2/1/auto/-1}.status-strip{flex-direction:column;align-items:flex-start}#validation-status{text-align:left}.mode-switcher{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.mode-switcher .cluster-label{grid-column:1/-1}.class-save-cluster,.class-picker,.save-actions{align-items:center}.viewer-toolbar{flex-wrap:wrap;align-items:center}.page-navigation,.zoom-controls{flex-flow:wrap;align-items:center}.ink-toolbar{flex:100%;order:2;align-items:center}.runtime-results,#runtime-input-rows li{grid-template-columns:minmax(0,1fr)}.page-navigation form{flex-wrap:wrap}.app-shell[data-mode=split] .workspace{grid-template-columns:minmax(0,1fr)}.app-shell[data-mode=split] .viewer-pane,.app-shell[data-mode=split] .lab-pane{min-height:42rem}}@media (max-width:560px){.topbar{grid-template-columns:1fr}#class-save-root,.mode-switcher{grid-column:1}.mode-switcher{grid-template-columns:1fr}.brand-lockup,.pane-heading,.lab-heading-actions{flex-direction:column;align-items:stretch}.class-save-cluster,.class-picker,.save-actions{flex-flow:column wrap;align-items:stretch}.page-stage{grid-template-columns:max-content 4.3rem}.hotspot-gutter{min-width:4.3rem}.hotspot-button{width:3.8rem;left:.25rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}@media (forced-colors:active){:where(button,a,input,select,textarea,summary,.viewer-scroll):focus-visible{outline:3px solid canvastext;box-shadow:none!important}}

/* Blockly-style compact bordboek controls. */
.topbar .brand-lockup{flex-flow:row nowrap;align-items:center;min-width:0}
.topbar .brand-lockup>div{min-width:0}
.topbar .brand-lockup .eyebrow{margin-bottom:1px;font-size:10px;font-weight:900;letter-spacing:.12em}
.topbar .brand-lockup h1{font-size:clamp(16px,1.25vw,21px);line-height:1.05}
.mode-switcher{display:flex;width:fit-content;max-width:100%;justify-self:end}
.mode-switcher select{min-width:10.75rem;max-width:100%;padding:.55rem .75rem;border:1px solid var(--ui-border);border-radius:8px;color:var(--ui-ink);background:var(--ui-paper);font-weight:700}
.viewer-toolbar button,.viewer-toolbar select,.viewer-toolbar input{min-width:32px;min-height:32px;height:32px;padding:5px 8px;border-width:1px;border-radius:8px;font-size:11px}
.viewer-toolbar .cluster-label{min-height:32px;font-size:11px}
.viewer-toolbar .ink-toolbar>button{flex:0 0 auto;min-width:32px;min-height:32px;padding:5px 8px;border-width:1px;border-radius:8px;font-size:11px;white-space:nowrap}
.viewer-toolbar .ink-toolbar>button[aria-pressed=true]{border:1px solid var(--ui-primary);color:var(--ui-paper);background:var(--ui-primary);font-weight:800;box-shadow:none}
.viewer-toolbar .ink-toolbar>button:disabled{color:var(--ui-muted);background:var(--ui-soft-purple)}
.ink-color-control{min-height:32px}
.ink-color-control input{width:32px;height:32px;min-width:32px;min-height:32px;padding:3px;border-width:1px;border-radius:8px}
.ink-width-select{height:32px;min-height:32px;max-width:76px;padding:0 24px 0 8px;font-size:11px}
.page-navigation .page-count{min-height:32px;display:inline-flex;align-items:center;padding:0 8px;font-size:11px}
.viewer-toolbar .thumbnail-toggle{width:26px;min-width:26px;height:32px;padding:0;font-size:18px;line-height:1}
.viewer-body{min-height:0;display:grid;grid-template-columns:104px minmax(0,1fr);overflow:hidden;background:var(--ui-workspace)}
.viewer-body.thumbs-hidden{grid-template-columns:minmax(0,1fr)}
.viewer-body.thumbs-hidden .thumbnail-rail{display:none}
.thumbnail-rail{min-height:0;padding:8px 7px 20px;overflow-x:hidden;overflow-y:auto;border-right:1px solid var(--ui-border);background:#f8f6fb;scrollbar-width:thin}
.thumbnail-button{width:100%;min-width:0;min-height:0;display:block;margin:0 0 8px;padding:4px;border:2px solid transparent;border-radius:9px;background:transparent}
.thumbnail-button:hover{border-color:var(--ui-border)}
.thumbnail-button[aria-current=page]{border-color:var(--ui-primary);background:var(--ui-soft-purple)}
.thumbnail-button canvas{width:100%;display:block;aspect-ratio:210/297;border:1px solid var(--ui-border);background:var(--ui-paper)}
.thumbnail-button span{display:block;margin-top:4px;color:var(--ui-muted);font-size:10px;font-weight:800}
.workspace{padding:0}
.app-shell[data-mode=split] .workspace{gap:8px}
.viewer-pane,.lab-pane{border:0;border-radius:0;box-shadow:none}
.viewer-pane{grid-template-rows:minmax(0,1fr)}
@media (max-width:560px){.topbar .brand-lockup{flex-flow:row nowrap;align-items:center}.mode-switcher{width:100%;justify-self:stretch}.mode-switcher select{width:auto;min-width:0;flex:1}}