:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #142d3c; background: #eef3f6; font-size: 16px; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; background: #102b3b; color: white; padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 18px max(20px, env(safe-area-inset-left)); }
main { max-width: 860px; margin: auto; padding: 20px max(18px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
h1 { font-size: 1.55rem; line-height: 1.4; margin: 12px 0; }
p { line-height: 1.7; }
label { display: block; margin: 16px 0; line-height: 1.5; }
input, select { display: block; width: 100%; margin-top: 6px; font: inherit; padding: 12px; border: 1px solid #8297a4; background: white; color: #142d3c; border-radius: 6px; }
button { font: inherit; min-height: 48px; padding: 12px 18px; border: 1px solid #637e8c; border-radius: 6px; background: white; color: #142d3c; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #00789a; outline-offset: 3px; }
#start, #ok { background: #00617d; color: white; border-color: #00617d; }
#status { margin: 18px 0; padding: 14px; border-left: 4px solid #08778c; background: #dceef2; overflow-wrap: anywhere; }
#status[data-error="true"] { background: #fff0dd; border-color: #a34b00; color: #733600; }
.metadata { font-size: .875rem; overflow-wrap: anywhere; }
progress { width: 100%; accent-color: #00617d; }
#stage { position: relative; min-height: 260px; height: 38vh; height: 38dvh; border: 2px solid #456e82; background: white; overflow: hidden; }
#stage::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed #567d92; pointer-events: none; }
.corner { position: absolute; padding: 5px; font-size: .875rem; background: #102b3b; color: white; pointer-events: none; }
.tl { top: 0; left: 0; } .tr { top: 0; right: 0; } .bl { bottom: 0; left: 0; } .br { bottom: 0; right: 0; }
#sample { padding: 38px 30px; height: 100%; overflow: auto; }
#pageNumber { font-size: 3rem; }
#stage.spread #sample { width: 50%; }
.tools, .answers { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.answers button { flex: 1 1 160px; }
fieldset { border: 1px solid #8297a4; }
#safeProbe { position: fixed; visibility: hidden; pointer-events: none; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
[hidden] { display: none !important; }