:root{--board:380px}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#f8f5f7;color:#202133;font-family:'DM Sans',system-ui,sans-serif}main{max-width:688px;margin:auto;padding:24px}#header{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}#header .btn{height:30px;min-height:30px;padding:0 12px;font-size:.75rem;border-radius:3px;text-decoration:none}#ready{margin:0 auto}#ready h2,#complete h2{font-size:20px;font-weight:600}p{line-height:1.6}#ready p{font-size:.92rem}#start{min-width:104px}#researcher{margin-top:24px;color:var(--pf-muted);font-size:.85rem}summary{cursor:pointer}#researcherContent{overflow:hidden}#saved .saved-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--pf-border)}.saved-actions{display:flex;gap:8px}.saved-actions .btn{min-height:32px;font-size:.8rem}.sizing{display:flex;gap:12px;align-items:center;margin:24px 0;font-size:.85rem}input[type=range]{accent-color:var(--brand);max-width:160px}body.active main{height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:none;padding:12px}body.active #header{display:none}#test{width:var(--board);margin:0 auto}.test-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 14px}.progress{flex:1;max-width:240px;font-size:.8rem;color:var(--pf-muted)}.progress-track{height:3px;background:var(--pf-border);margin-top:8px}#progressFill{height:3px;background:var(--brand);transition:none}#abort{font-size:.8rem;padding:8px}#board{width:var(--board);height:var(--board);display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);border:1px solid #cfc5cb;background:#fff;user-select:none;touch-action:none}#board button{font-family:inherit;font-size:calc(var(--board)*.065);font-variant-numeric:tabular-nums;font-weight:500;line-height:1;color:#202133;background:#fff;border:0;border-right:1px solid var(--pf-border);border-bottom:1px solid var(--pf-border);border-radius:0;padding:0;touch-action:none;user-select:none;-webkit-tap-highlight-color:transparent}#board button:nth-child(5n){border-right:0}#board button:nth-child(n+21){border-bottom:0}#board button.pressed{background:var(--pf-border)}#board.gap{visibility:hidden}#board button:hover{color:#202133}#board button:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}#complete{margin:0 auto}#qr,#savedQrCode{width:420px;max-width:100%;margin:16px auto;background:#fff;padding:12px}#qr img,#qr canvas,#savedQrCode img,#savedQrCode canvas{display:block;width:100%;height:auto}#qrParts,#savedQrParts{text-align:center;font-size:.8rem;color:var(--pf-muted)}#notice,#small,#qrError{color:#a22d20}dialog{border:1px solid var(--pf-border);border-radius:6px;padding:24px;max-width:calc(100vw - 32px);background:white;color:#202133}dialog h2{font-size:18px;margin:0 0 12px}dialog p{font-size:.9rem;margin:0 0 24px}.actions{display:flex;justify-content:flex-end;gap:12px}.actions .btn{min-width:104px}dialog::backdrop{background:#20213366}#savedQr{width:468px}#clearAll{margin-top:12px}body #complete{max-width:640px}@media(max-width:480px){main{padding:16px}body.pf-shell #ready{padding:22px}#ready h2{font-size:18px}.sizing{flex-wrap:wrap}#header{gap:8px}#header nav{display:flex;gap:8px}#header .btn{padding:0 10px;font-size:.75rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
html,body{overscroll-behavior-y:none}
/* Match Bourdon: instructions overlay the blurred preparation board. */
body{background:var(--pf-background,#f8f5f7)}
main{width:100%;max-width:none;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:32px 24px}
body:has(#preparation:not([hidden])) main{height:100svh}
#header{width:100%;max-width:1200px;justify-content:flex-start;gap:12px;flex-wrap:wrap;margin:12px auto 44px}
#header #start{height:36px;min-height:36px;min-width:104px;font-size:.84rem}
#header .sizing{margin:0 0 0 auto;gap:12px;flex:0 0 auto;font-size:.8rem;white-space:nowrap}
#header nav{margin-left:0}
#header #language{margin-left:0}
.sizing input[type=range]{appearance:none;-webkit-appearance:none;height:24px;width:150px;max-width:100%;background:transparent;cursor:pointer}
.sizing input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--pf-border);border-radius:1px}
.sizing input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;margin-top:-4px;border:0;border-radius:50%;background:var(--brand)}
.sizing input[type=range]::-moz-range-track{height:2px;background:var(--pf-border);border-radius:1px}
.sizing input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--brand)}
#preparation{position:relative;display:grid;grid-template-columns:1fr;align-items:center;justify-items:center;width:100%;max-width:none;min-height:0;flex:1;margin:0 auto;padding:0;overflow:visible}
#previewBoard{grid-area:1/1;width:var(--board);height:var(--board);display:grid;grid-template:repeat(5,1fr)/repeat(5,1fr);background:white;border:1px solid var(--pf-border);filter:blur(12px);opacity:.45;user-select:none;pointer-events:none;transition:filter .16s,opacity .16s}
#previewBoard span{display:flex;align-items:center;justify-content:center;font-size:calc(var(--board)*.065);font-variant-numeric:tabular-nums;font-weight:500;border-right:1px solid var(--pf-border);border-bottom:1px solid var(--pf-border)}
body.sizing-preview #previewBoard{filter:none;opacity:1}
body.sizing-preview .preparation-copy{visibility:hidden;pointer-events:none}
#ready{transition:opacity .16s;width:100%;box-shadow:none}
#ready h2{font-size:24px}
#ready p{font-size:1rem;line-height:1.6}
#ready p:last-child{margin-bottom:0}
.preparation-copy{position:relative;grid-area:1/1;z-index:2;min-width:0;width:100%;max-width:640px}
#researcher{position:absolute;top:100%;left:0;right:0;margin:0;padding:16px 24px;background:#f8f5f7;border-radius:6px}
body:has(#complete:not([hidden])) #start,body:has(#complete:not([hidden])) .sizing{display:none}
@media(max-width:850px){.preparation-copy{width:100%;max-width:640px}main{justify-content:flex-start}#header{gap:12px;margin-bottom:24px}}
@media(max-width:899px){#header .sizing{display:none}#header{flex-wrap:nowrap;align-items:center;gap:8px}#header #start{min-width:72px;min-height:30px;height:30px;padding:0 10px;font-size:.75rem;flex-shrink:0}#header nav{margin-left:auto;flex-shrink:0}#header #language{flex-shrink:0}}
@media(max-width:480px){main{padding:16px}#previewBoard{max-width:100%}}
#header #abort{display:none;min-width:104px;height:36px;min-height:36px;font-size:.84rem;padding:0 14px}
body.active main{justify-content:flex-start;padding:32px 24px}
body.active #header{display:flex;margin-bottom:24px}
body.active #header>:not(#abort){display:none}
body.active #header #abort{display:inline-flex}
body.active #test{position:relative;width:100%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding-top:56px}
body.active .test-head{position:absolute;top:0;width:min(var(--board),640px);margin:0}
body.active .progress{width:100%;max-width:none}
@media(max-width:899px){#header #abort{min-width:72px;height:30px;min-height:30px;padding:0 10px;font-size:.75rem}}
@media(max-width:480px){body.active main{padding:16px}}
#backInstructions{display:none}
body.completed #backInstructions{display:inline-flex}
body.completed main{height:auto;min-height:100svh;justify-content:center}
body.completed #header{max-width:640px;justify-content:flex-end;margin:0 auto 18px}
body.completed #header nav{display:flex;gap:10px;align-items:center;margin-left:auto}
body.completed #header #language{margin-left:0}
body.completed #complete{width:100%;max-width:640px;margin:0 auto;padding:32px}
body.completed #qr{width:min(420px,100%,calc(100svh - 300px));margin:20px auto 0;padding:12px;border:1px solid var(--pf-border);border-radius:6px}
#qrParts:empty,#savedQrParts:empty{display:none}
#savedQrCode{width:min(420px,100%,calc(100svh - 112px));margin:0 auto}
@media(max-width:480px){body.completed #complete{padding:24px 20px}body.completed #complete h2{font-size:20px}body.completed #complete p{font-size:.9rem}body.completed #header{gap:8px}body.completed #header nav{gap:8px}body.completed #header .btn{padding:0 9px}}