:root{font-family:system-ui,sans-serif;color:#202133;background:#f8f5f7;--primary:#805169;--cell:28px}
#test{width:calc(40 * var(--cell) + 26px);max-width:100%;margin-inline:auto}
body.pf-shell #viewport{overflow-x:hidden}
#grid{margin-inline:auto}
body.pf-shell main{padding:32px 24px}
body.pf-shell:not(.test-active) main{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
body.pf-shell header.page-head{width:100%;max-width:640px;margin:0 auto 18px;padding:0;background:transparent;border:0}
#setupLinks{width:100%;max-width:640px;margin:0 auto 16px}
body.pf-shell .card{width:100%;max-width:640px;margin:0 auto}
body.pf-shell .card p{line-height:1.6}
.setup-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.setup-actions .btn{margin:0}
body.pf-shell #qr{border:1px solid var(--pf-border);border-radius:12px;padding:20px}
body.pf-shell #timer{color:var(--brand-dark)}
@media(max-width:700px){body.pf-shell main{padding:24px 16px}}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}header{display:flex;align-items:center;gap:24px;padding:16px 28px;background:white;border-bottom:1px solid #e8e0e5}header a{color:var(--primary);font-weight:700;text-decoration:none}h1{font-size:22px;margin:0;flex:1}h2{font-size:22px}main{padding:24px}p{line-height:1.6}button,select{font:inherit;border-radius:12px;padding:12px 18px;border:1px solid var(--primary);background:var(--primary);color:white;cursor:pointer}button:disabled{opacity:.45;cursor:default}button.secondary,select{background:white;color:var(--primary)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #1976d2;outline-offset:3px}.card{max-width:850px;margin:24px auto;background:white;border:1px solid #e8e0e5;border-radius:20px;padding:28px}.card button{margin:8px 8px 0 0}.note{color:#606473;font-size:14px}.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:3;background:#f8f5f7;padding:12px 0}.toolbar label{display:flex;align-items:center;gap:8px;font-size:14px}.toolbar strong{font-variant-numeric:tabular-nums;min-width:64px;font-size:21px}#mode{min-height:26px;color:#604052;font-weight:600;margin:4px 0 12px}#viewport{overflow:auto;max-height:calc(100vh - 210px);border:1px solid #ded6da;background:white;border-radius:12px;overscroll-behavior:contain}#grid{width:max-content;padding:12px;display:grid;grid-template-columns:repeat(40,var(--cell));gap:0}#grid button{border:0;border-radius:0;background:white;color:#222;font-family:Georgia,'Times New Roman',serif;font-size:calc(var(--cell)*.66);width:var(--cell);height:calc(var(--cell)*1.25);padding:0;position:relative;user-select:none;touch-action:manipulation}#grid button:hover{background:#f0e8ed}#grid button.crossed:after{content:'';position:absolute;width:95%;height:2px;background:#1565c0;left:3%;top:50%;transform:rotate(45deg)}#grid button.boundary:before{content:'';position:absolute;right:0;top:6%;height:88%;width:2px;background:#1565c0}#grid button.selected{outline:2px solid var(--primary);outline-offset:-2px;background:#f0e8ed}#grid button:last-child{border:0}#qr{padding:24px;background:white;width:max-content;max-width:100%;margin:24px auto}#qr img,#qr canvas{max-width:100%;height:auto}#notice{color:#a22d20;text-align:center}dialog{max-width:520px;border:1px solid #e8e0e5;border-radius:20px;padding:28px}dialog::backdrop{background:#0006}.actions{display:flex;justify-content:flex-end;gap:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:700px){header{padding:16px;gap:12px}main{padding:12px}.card{padding:20px}h1{font-size:18px}}