:root{font-family:Arial,Helvetica,sans-serif;color:#f4f7fa;background:#111b27;color-scheme:dark;--accent:#caf473;--muted:#b9c8d9;--border:#344356}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;min-height:48px;padding:12px 16px;border:1px solid var(--border);border-radius:10px;background:#223448;color:#f4f7fa;font-weight:700}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.42;cursor:default}button.primary{background:var(--accent);color:#111b27;border-color:var(--accent);min-height:58px;width:100%}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}.shell{max-width:1120px;margin:auto;padding:28px 24px 8px}.brand-header{display:flex;position:relative;align-items:center;gap:20px;padding:0 145px 24px 0;border-bottom:1px solid var(--border)}.logo{width:104px;height:auto}.brand-text{display:flex;flex-direction:column;gap:6px;min-width:0}.brand-text>strong{font-size:28px}.brand-text>span{font-size:14px;color:var(--muted);line-height:1.4}.brand-text .app-name{align-self:flex-start;color:var(--accent);border:1px solid #526642;border-radius:5px;padding:4px 8px;font-size:12px}.intro{padding:36px 0 14px;max-width:730px}.eyebrow{font-size:11px;font-weight:bold;letter-spacing:.13em;color:var(--accent);margin:0 0 12px}h1{font-size:clamp(32px,5vw,50px);letter-spacing:-.035em;line-height:1.05;margin:0 0 16px}h2{font-size:21px;margin:0 0 20px;line-height:1.25}p,li{font-size:15px;line-height:1.65}p{margin:0 0 16px}.intro>p:last-child{font-size:17px;color:var(--muted)}.status-strip{display:flex;flex-wrap:wrap;gap:8px}.pill{border:1px solid var(--border);border-radius:20px;padding:7px 12px;font-size:12px;color:var(--muted)}.pill.ok{border-color:#71834e;color:var(--accent)}.message{margin:12px 0 22px;font-size:14px;min-height:23px}.message.error{color:#ffb3a5}.tabs{display:flex;gap:5px;background:#1a2737;border:1px solid var(--border);border-radius:12px;padding:5px;margin:0 0 24px}.tabs button{flex:1;background:none;border:0;font-size:14px}.tabs button span{font-size:11px;margin-right:8px;opacity:.65}.tabs button[aria-current=page]{background:var(--accent);color:#111b27}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.card{background:#1a2737;border:1px solid var(--border);border-radius:14px;padding:26px;min-width:0}.muted{color:var(--muted);font-size:14px}.steps{padding-left:22px;margin:0 0 24px}.steps li{padding-left:4px;margin-bottom:14px}.role-buttons{display:grid;gap:12px;margin-bottom:16px}details{border-top:1px solid var(--border);margin-top:20px;padding-top:4px}summary{font-size:14px;cursor:pointer;padding:14px 0;font-weight:bold;line-height:1.5}details p{font-size:14px;color:var(--muted)}.text-button{background:transparent;border:0;color:var(--muted);text-decoration:underline;margin-top:12px}label{display:block;font-size:14px;line-height:1.5;color:var(--muted);margin:14px 0 8px}input:not([type=checkbox]),select,textarea{display:block;width:100%;min-height:46px;border:1px solid var(--border);border-radius:8px;background:#111b27;color:#f4f7fa;padding:10px;margin-top:6px;min-width:0}textarea{resize:vertical;font-size:12px;line-height:1.5;overflow-wrap:anywhere}select{font-size:14px}fieldset{border:0;margin:0;padding:0;min-width:0}.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.check{display:flex;align-items:center;gap:10px;margin-bottom:20px}.check input{accent-color:var(--accent);width:20px;height:20px}.qr-wrap{background:white;border-radius:12px;padding:12px;max-width:360px;margin:20px auto 8px}#qr svg{display:block;width:100%;height:auto}.qr-controls{display:flex;align-items:center;justify-content:center;gap:16px}.qr-controls button{min-width:48px}#qr-count{font-size:13px}.readiness{border-top:1px solid var(--border);padding-top:16px;margin-top:12px}.readiness p{margin-bottom:6px;font-size:14px}#ready{margin:12px 0}#sync{width:100%;margin:8px 0 12px}.preview-target{height:230px;display:grid;place-items:center;background:#111b27;border-radius:20px;margin-bottom:20px}.preview-ring,#stage-ring{width:100px;height:100px;border:9px solid var(--accent);border-radius:50%;display:grid;place-items:center}.preview-ring i,#stage-ring i{width:14px;height:14px;background:white;border-radius:50%}.diagnostics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.diagnostics div{padding:14px;background:#111b27;border:1px solid var(--border);border-radius:10px;font-size:13px;overflow-wrap:anywhere}.diagnostics strong{display:block;margin:8px 0;font-size:17px}pre{font:12px/1.6 monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto}.version{font-size:11px;color:var(--muted);margin:0 0 20px}.care-card{position:relative;margin-top:32px;padding:24px}.care-card h2{padding-right:32px;font-size:18px}.care-card p{font-size:14px}.care-card .qualification{border-top:1px solid var(--border);padding-top:12px;font-size:12px}.qualification small{font-size:11px}.care-card a{color:var(--accent);font-size:14px}#care-close{position:absolute;right:8px;top:8px;width:40px;min-height:40px;padding:4px;background:transparent;border:0;font-size:22px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}dialog{color:#f4f7fa;background:#1a2737;border:1px solid var(--border);border-radius:14px;padding:24px;width:calc(100% - 32px);max-width:540px;max-height:calc(100dvh - 32px);overflow:auto}dialog::backdrop{background:#000c}#camera{width:100%;max-height:45dvh;background:#111b27;border-radius:10px}#scan-progress{margin:12px 0}#scan-close{width:100%}#stage{position:fixed;inset:0;background:#111b27;z-index:20;display:flex;flex-direction:column;padding:max(18px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));height:100dvh}.stage-top{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--muted)}.stage-center{position:relative;flex:1;display:grid;place-items:center;min-height:140px}#stage-ring{width:clamp(80px,24vmin,170px);height:clamp(80px,24vmin,170px);border-color:transparent;border-width:12px}#stage-ring.active{border-color:var(--signal-color,#caf473)}#stage-ring i{width:clamp(12px,3vmin,22px);height:clamp(12px,3vmin,22px)}#stage-symbol{position:absolute;bottom:calc(50% + 90px);font-size:clamp(32px,12vmin,80px);line-height:1;color:white}#countdown{position:absolute;top:calc(50% + 90px);font-size:18px;color:var(--muted)}#stop{background:#223448;min-height:58px;width:100%;max-width:560px;align-self:center;border-color:#b9c8d9}.running{overflow:hidden}
@media(max-width:720px){.grid{grid-template-columns:1fr;gap:16px}.shell{padding:20px 16px 8px}.logo{width:76px}.brand-header{gap:14px}.card{padding:22px}.diagnostics{grid-template-columns:1fr 1fr}.intro{padding-top:28px}}
@media(max-width:480px){.logo{width:64px}.brand-header{gap:12px;padding-right:0;align-items:flex-start;min-height:116px}.brand-text{flex:1}.brand-text>strong{padding-right:45px;font-size:25px;min-height:30px}.brand-text>span{font-size:12px}.brand-text .app-name{font-size:11px}.card{padding:18px}.tabs button{padding:10px 5px;font-size:13px}.tabs button span{display:none}.fields{grid-template-columns:1fr}.diagnostics{grid-template-columns:1fr}.qr-wrap{padding:8px}.intro>p:last-child{font-size:15px}.pill{font-size:11px}}
@media(max-height:450px){#stage-symbol{bottom:calc(50% + 45px);font-size:32px}#stage-ring{width:70px;height:70px;border-width:7px}#countdown{top:calc(50% + 42px);font-size:14px}#stage{padding:8px 16px}#stop{min-height:44px}}
.export-link{display:inline-block;color:#caf473;font-weight:bold;padding:16px 0;min-height:48px;overflow-wrap:anywhere}
#qr-enlarge,#message-copy{width:100%;margin:8px 0 14px}.qr-controls{margin:12px 0}.qr-controls span{text-align:center;flex:1;font-size:13px}#qr-large{width:calc(100% - 16px);max-width:700px;padding:16px}#qr-large .qr-wrap{width:min(100%,65dvh);max-width:600px;padding:0;margin:12px auto}#qr-large-code svg{display:block;width:100%;height:auto}#qr-large-close{width:100%}#qr-large h2{margin-bottom:8px}#qr-large p{margin-bottom:8px}#scanner{max-width:600px}#camera{max-height:38dvh;object-fit:contain}#focus-status{margin-top:10px}.scanner-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.scanner-actions #scan-close{width:100%}input[type=file]{max-width:100%;font-size:12px}#focus-distance{width:100%;min-height:44px;padding:0}#focus-controls .check{margin-bottom:4px}@media(max-height:500px){#qr-large .qr-wrap{width:min(100%,48dvh)}#qr-large h2,#qr-large p{display:none}}

#scan-progress{padding:12px;border:1px solid var(--border);border-radius:10px;font-weight:bold;line-height:1.5}#scan-health{font-variant-numeric:tabular-nums;min-height:22px;font-size:12px}@keyframes scan-confirm{from{background:#42562a;border-color:#caf473}to{background:transparent;border-color:var(--border)}}.scan-success{animation:scan-confirm 1s ease-out}#scan-reset{font-size:12px}#scanner h2{margin-bottom:10px}
.session-tools{margin-bottom:14px}.session-tools p{margin-bottom:6px}#recovery-panel{margin-bottom:18px;border-color:#caf473}#recheck{width:100%}

/* Android Chrome: suppress pull-to-refresh while retaining normal scrolling. */
html,body{overscroll-behavior-y:none}dialog{overscroll-behavior-y:contain}#qr-large-pause{width:100%;margin-bottom:8px}

.rule-settings{margin:20px 0;padding:16px;background:#111b27;border-left:3px solid var(--accent);border-radius:8px}.rule-settings>p{margin-bottom:4px}.task-instruction{font-size:20px;line-height:1.5;color:var(--accent)}.start-card .preview-target{height:160px}.start-card #audio-check{width:100%;margin-bottom:12px}#settings-error:empty{display:none}#settings-error{margin:12px 0 0}.report-actions{margin:20px 0}#run-summary{border-top:1px solid var(--border);padding-top:18px;margin-top:22px}#run-summary:empty{display:none}#run-summary details{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--border)}th{color:var(--muted)}#stage{--actual-target:min(var(--target-size,100px),30vmin)}#stage-ring{width:var(--actual-target);height:var(--actual-target);border-width:clamp(6px,2vmin,12px)}#stage-symbol{bottom:calc(50% + var(--actual-target)/2 + 12px);font-size:min(var(--symbol-size,72px),16vmin)}#countdown{top:calc(50% + var(--actual-target)/2 + 16px);text-align:center}#stage-phase{position:absolute;bottom:8px;text-align:center;color:var(--muted);font-size:15px}#stage-ring i{width:14px;height:14px}.stage-top{font-variant-numeric:tabular-nums}.stage-top span:last-child{text-align:right}@media(max-height:450px){#stage{--actual-target:min(var(--target-size,100px),18vmin)}#stage-symbol{font-size:min(var(--symbol-size,72px),10vmin);bottom:calc(50% + var(--actual-target)/2 + 6px)}#countdown{font-size:14px;top:calc(50% + var(--actual-target)/2 + 6px)}#stage-phase{bottom:2px;font-size:13px}.stage-center{min-height:160px}#stage-ring i{width:10px;height:10px}}
#test.peer-mode .grid{grid-template-columns:1fr}#test.peer-mode .start-card{max-width:700px;width:100%;margin:auto}
/* Shared display renderer: one scalable glyph, without an extra dot or ring. */
.brand-header{padding-right:0}
.target-surface{background:#111b27;color:#f4f7fa;overflow:hidden}
.visual-field{position:relative;min-width:0;min-height:0}
.target-glyph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.target-glyph svg{display:block;width:100%;height:100%;overflow:visible}
.preview-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 12px}
.preview-screen{position:relative;height:230px;border:1px solid var(--border);border-radius:12px}
.preview-screen .visual-field{position:absolute;inset:0 0 32px}
.preview-label{position:absolute;bottom:0;width:100%;text-align:center;font-size:12px;padding:8px 4px;color:#b9c8d9;background:#111b27}
.preview-pair.vertical{grid-template-columns:1fr}
.preview-pair.vertical .preview-screen{height:180px}
.preview-actions,.button-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0}
.preview-actions .check{margin:0;font-size:13px}
#preview-status{min-height:24px}
#stage .visual-field{flex:1;min-height:90px}
#stage .stage-top{z-index:1;background:#111b27dc;border-radius:6px;padding:8px 10px;color:#f4f7fa;flex:none}
#stage #countdown{left:0;right:0;top:12px;color:#f4f7fa;text-shadow:0 1px 5px #111b27;background:#111b27c9;width:max-content;max-width:100%;margin:auto;border-radius:6px;padding:4px 8px}
#stage #countdown:empty{display:none}
#stage #stage-phase{left:0;right:0;bottom:8px;margin:auto;width:max-content;max-width:100%;color:#f4f7fa;background:#111b27c9;border-radius:6px;padding:4px 8px}
#stage #stage-phase:empty{display:none}
#stage #stop{flex:none;background:#223448;color:#f4f7fa}
input[type=range]{padding:0;border:0;background:transparent;accent-color:var(--accent);min-height:42px;cursor:pointer}
output{float:right;color:var(--accent);font-variant-numeric:tabular-nums}
.range-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.size-control{margin:24px 0}
.sequence-colors{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.color-chip{border-left:12px solid var(--chip-color);padding:8px 10px;min-height:44px;font-size:13px}
.symbol-buttons{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.symbol-buttons button{font-size:23px;min-width:44px;padding:6px}
.drill-panel{margin-top:0;border-top:0;border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:16px}
#drill-status{margin-top:10px}
#completion{margin:18px 0 0;font-weight:bold;color:var(--accent)}
@media(min-width:1000px){.start-card{position:sticky;top:20px}}
@media(max-width:480px){.preview-screen{height:220px}.preview-pair{gap:8px}.preview-label{font-size:11px}.task-instruction{font-size:18px}}
@media(max-height:450px){#stage .visual-field{min-height:70px}#stage .stage-top{padding:4px 8px;font-size:12px}}
.preview-jump,.settings-jump{color:var(--accent);font-size:14px;display:inline-block;padding:8px 0 14px;min-height:44px}
#preview-pair,#training-settings{scroll-margin-top:20px}
@media(min-width:1000px){.preview-jump,.settings-jump{display:none}}
#test.peer-mode .settings-jump{display:none}
.slider-control{margin:18px 0 24px}
.slider-control output{white-space:nowrap;margin-left:10px}
.group-choices{display:flex;flex-wrap:wrap;gap:8px 20px}
.group-choices .check{margin:4px 0 12px}
#audio-check{background:#223448;color:#f4f7fa;-webkit-tap-highlight-color:transparent}
#audio-check[aria-pressed=true]{background:var(--accent);color:#111b27;border-color:var(--accent)}
@media(hover:none){#audio-check[aria-pressed=false]:hover{border-color:var(--border)}}