:root{color-scheme:dark;--paper:#f7e8c4;--gold:#dfbb73;--ink:#332a23}*{box-sizing:border-box}body{margin:0;background:#241c19;color:var(--paper);font-family:system-ui,-apple-system,sans-serif;background-image:repeating-linear-gradient(0deg,transparent 0 78px,#08070644 78px 82px),repeating-linear-gradient(90deg,#33251d55 0 4px,transparent 4px 110px)}main{max-width:720px;margin:auto;padding:28px 24px 34px}header{text-align:center}.brand{font-size:12px;letter-spacing:.1em;color:#dac294}.brand span{font-size:10px;padding:4px 8px;background:#40382c;margin-left:8px}h1{font-family:serif;font-size:clamp(28px,5vw,40px);letter-spacing:.06em;margin:17px 0 10px;color:#ffeac0}p{line-height:1.8;font-size:14px;color:#ddceb0;margin:6px 0}header p{font-size:14px}.mobile{display:none}.status{margin:24px 0 4px;display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#e7c990}.desk{position:relative;border:4px solid #654735;box-shadow:0 4px #130f0e,inset 0 0 0 2px #a17c4d;background:#443026;overflow:hidden;line-height:0}canvas{width:100%;display:block;image-rendering:pixelated}.desk-caption{display:block;text-align:center;font-size:11px;line-height:1.4;color:#dcc79c;background:#30231c;padding:9px 4px;border-top:2px solid #6e5039}.feedback{text-align:center;min-height:81px;margin:22px 0 9px}.feedback strong{font-size:19px;color:#f4d494}.feedback p{font-size:13px;margin:7px 0}.primary{width:100%;min-height:60px;background:#cfa762;color:#302419;border:3px solid #f4d795;font-size:19px;font-weight:750;box-shadow:0 5px #785433;cursor:pointer;touch-action:manipulation}.primary:active{transform:translateY(2px);box-shadow:0 3px #785433}button:focus-visible,summary:focus-visible{outline:3px solid #fff;outline-offset:5px}button:hover{filter:brightness(1.08)}.keyboard{text-align:center;color:#c6b38e;font-size:11px;margin:13px 0 20px}.position-label{display:flex;justify-content:space-between;font-size:10px;color:#cbb891}.track{height:12px;background:#574636;position:relative;margin:9px 7px}.center-mark{position:absolute;left:50%;height:20px;width:2px;top:-4px;background:#e8cf93}#stop-mark{position:absolute;width:10px;height:16px;top:-2px;background:#b85f49;border:2px solid #ffe4bd;transform:translateX(-50%)}#position{text-align:center;font-size:12px}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.result{padding:12px 7px;text-align:center;background:#302820;border:2px solid #735939;font-size:11px;line-height:1.8;min-width:0}.result strong{display:block;font-size:27px;line-height:1.5;color:#f0ca7e}.result .offset{display:block}.result.near{border-color:#d2ac65;background:#3b3023}.summary{text-align:center;background:#efe0bc;color:#34291e;border:4px solid #a97d49;box-shadow:0 4px #130f0e;padding:23px 16px;margin-top:26px}.summary p{color:#635139;font-size:12px}.eyebrow{font-size:11px;letter-spacing:.15em;color:#715635}h2{font-family:serif;font-size:25px;margin:12px 0}.total{font-size:37px;font-weight:800;color:#58422b}.total small{font-size:17px;font-weight:400}#record{min-height:24px;font-weight:600}.secondary-actions{display:flex;justify-content:center;gap:10px;margin-top:13px}.secondary-actions button{background:#604735;border:2px solid #896946;color:#fff0cc;font-size:12px;min-height:44px;padding:8px 12px;cursor:pointer}#result-image{width:100%;max-width:480px;margin:14px auto;image-rendering:pixelated}textarea{width:100%;min-height:130px;background:#fff5db;color:#33291e;margin-top:12px;padding:10px;font:inherit;font-size:13px;resize:vertical}footer{text-align:center;font-size:11px;margin-top:25px;color:#bda783}footer>p{font-size:11px;color:#bda783}details{text-align:left;border-top:1px solid #7c6145;padding:16px 0}summary{font-size:12px;cursor:pointer;color:#d7c195}details p{font-size:12px;padding-top:8px}[hidden]{display:none!important}@media(max-width:430px){main{padding:22px 16px}.mobile{display:block}.status{font-size:10px;margin-top:20px;gap:5px}.brand{font-size:10px}.brand span{font-size:9px}.feedback{margin-top:18px;min-height:82px}.feedback strong{font-size:17px}.results{gap:6px}.result{padding:10px 3px;font-size:10px}.result strong{font-size:24px}.summary{padding:20px 12px}.desk-caption{font-size:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.desk.near{border-color:#e8c778;box-shadow:0 4px #130f0e,0 0 24px #dfb95d55,inset 0 0 0 2px #e2bc73}
#stop-mark{width:10px;height:20px;top:-6px;background:#b7644a;border:0;clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}.center-mark{top:0;height:17px;background:#eddaab}
#next-hint:not(:empty){display:block;color:#dec691;margin-bottom:5px}.result.pending{border-color:#594936;color:#bbaa88}.result.pending strong{color:#8c7c60}.desk,.primary,.feedback{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.desk{touch-action:manipulation}

footer a{color:#e4c58a;text-underline-offset:3px}footer a:hover{color:#ffe3a7}

.secondary-actions{flex-wrap:wrap}.secondary-actions button{max-width:100%;flex:1 1 130px}.secondary-actions button:disabled{opacity:.6;cursor:wait}#share-text{overflow-wrap:anywhere}

#result-download{display:block;max-width:100%;margin:14px auto 0;color:#604735;font-size:13px;text-underline-offset:3px;overflow-wrap:anywhere}#result-image{display:block;height:auto;image-rendering:auto}#export-status{min-height:3.6em}#result-download:focus-visible{outline:3px solid #604735;outline-offset:4px}

/* Finished covers never appear while timing the active book. */
.fio-guide{display:flex;align-items:center;gap:14px;margin:20px 0 14px;padding:10px 14px;background:#302820;border:2px solid #735939;min-height:122px}.fio-guide p{flex:1;min-width:0;font-size:13px}.fio-guide b{display:block;color:#e7c990;font-size:12px;margin-bottom:5px}.fio-portrait{flex:0 0 78px;width:78px;height:104px;background:url('assets/fio.png') 33.333333% 0/400% 200% no-repeat;image-rendering:pixelated}.fio-guide[hidden]{display:none}.book-shelf{display:flex;justify-content:flex-end;align-items:end;gap:12px;min-height:0;margin-top:12px}.book-cover{position:relative;width:84px;height:108px;border:4px solid #281f23;border-right-width:7px;box-shadow:3px 3px #130f0e,inset 4px 0 #ffffff22;background:#51435f;color:#f5e4bd;display:flex;align-items:center;justify-content:center;text-align:center;font:700 11px/1.8 serif;padding:8px 4px;white-space:pre-line;image-rendering:pixelated}.book-cover:before{content:'';position:absolute;inset:6px;border:2px solid #c2a970;pointer-events:none}.book-cover:after{content:'';position:absolute;width:7px;height:16px;right:8px;top:-7px;background:#b7644a;clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}.cover-0{background-color:#51435f;background-image:linear-gradient(90deg,transparent 40%,#d4bb7922 40% 60%,transparent 60%)}.cover-1{background-color:#415346;background-image:repeating-linear-gradient(45deg,transparent 0 12px,#bdca8b15 12px 16px)}.cover-2{background-color:#536274;background-image:repeating-linear-gradient(0deg,transparent 0 15px,#ddd1a520 15px 18px)}.book-shelf .book-cover{animation:none}.book-shelf .book-cover.just-added{animation:shelve .42s steps(6,end) both}#closing-cover{position:absolute;left:calc(50% - 42px);top:24%;transform-origin:left center;animation:close-book .42s steps(6,end) both}@keyframes close-book{from{transform:perspective(400px) rotateY(-85deg);opacity:.5}to{transform:perspective(400px) rotateY(0);opacity:0}}@keyframes shelve{from{transform:translate(-50px,-24px);opacity:0}to{transform:translate(0,0);opacity:1}}@media(max-width:430px){.fio-guide{gap:8px;padding:8px;min-height:108px}.fio-portrait{flex-basis:66px;width:66px;height:88px}.fio-guide p{font-size:12px}.book-shelf{gap:8px}.book-cover{width:76px;height:96px;font-size:10px}}@media(prefers-reduced-motion:reduce){.book-shelf .book-cover,#closing-cover{animation:none!important}#closing-cover{display:none!important}}

.book-shelf{position:absolute;right:12px;bottom:44px;margin:0;gap:8px;pointer-events:none}.book-shelf .book-cover{width:76px;height:96px}@media(min-width:600px){.book-shelf{right:18px;bottom:50px}.book-shelf .book-cover{width:84px;height:108px}}