:root{--ink:#24483e;--coral:#bd4d35;--paper:#fff9eb;--line:#234b3c2c}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#c6b396;color:var(--ink);font:14px/1.5 Georgia,'Yu Mincho',serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:1px solid var(--line);background:var(--paper);border-radius:6px;min-height:42px;padding:7px 14px;touch-action:none}button:hover{background:#eee6d4}button:focus-visible,a:focus-visible{outline:3px solid #bc5338;outline-offset:3px}button:disabled{opacity:.45;cursor:default}button:active{transform:translateY(1px)}[hidden]{display:none!important}#scene{position:fixed;inset:0;width:100%;height:100%;touch-action:none}header{position:absolute;top:24px;left:30px;right:30px;display:flex;justify-content:space-between;pointer-events:none;align-items:center}.wordmark{display:flex;align-items:center;gap:12px}.wordmark b{font-size:24px;letter-spacing:.09em;font-weight:500}.wordmark small{display:block;font:9px/1.7 sans-serif;letter-spacing:.26em;opacity:.6}.mark{border:1px solid var(--ink);border-radius:50%;font:italic 34px Georgia;width:45px;height:45px;display:grid;place-items:center}.settings{display:flex;gap:7px;pointer-events:auto}.settings button{background:#fff8e7e8}#live{position:absolute;right:30px;top:115px;width:150px;text-align:right}.score-line{display:flex;gap:12px;align-items:baseline;justify-content:flex-end}#live span{font-size:11px;opacity:.7}#live b{font:32px/1.4 Georgia}#coverage{font:10px/2 monospace;opacity:.7}.progress{height:3px;background:#29493f22;margin-top:9px}.progress i{display:block;background:var(--ink);height:100%;width:0;transition:width .15s linear}#first-hint{position:absolute;left:50%;bottom:181px;transform:translateX(-50%);text-align:center;white-space:nowrap;pointer-events:none;transition:opacity .4s}#first-hint span{background:#fff9ebce;padding:7px 16px;border-radius:30px;font-size:14px}#first-hint small{display:block;font:10px/2.6 sans-serif;opacity:.65}#controls{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:30px;right:30px;display:flex;gap:20px;align-items:flex-end;justify-content:center;pointer-events:none}#controls>*{pointer-events:auto}.center-controls{width:330px;text-align:center}nav{display:flex;justify-content:center;gap:8px;margin-bottom:12px}nav button{min-height:33px;padding:4px 17px;background:#fff8e4c9;font-size:12px}nav button.active{background:#24483ee8;color:var(--paper)}#start{display:block;width:100%;height:55px;font-size:17px;letter-spacing:.08em;box-shadow:0 4px 0 #173c31}#run-caption{display:none;font-size:12px;background:#fff8e4d9;padding:6px 18px;border-radius:30px}body[data-mode=running] #orders,body[data-mode=countdown] #orders,body[data-mode=paused] #orders{visibility:hidden}body[data-mode=running] #start,body[data-mode=countdown] #start{visibility:hidden}body[data-mode=running] #run-caption,body[data-mode=countdown] #run-caption{display:inline-block}body[data-mode=running] .center-controls,body[data-mode=countdown] .center-controls{height:51px}body[data-mode=running] #first-hint,body[data-mode=done] #first-hint{opacity:0}#countdown{position:absolute;width:76px;height:76px;pointer-events:none;transform:translate(-50%,-100%);background:#fff9ebe3;border-radius:50%;display:grid;place-items:center;box-shadow:0 4px 25px #14352c1c}#countdown svg{position:absolute;inset:0;transform:rotate(-90deg)}#countdown circle{stroke:var(--coral);stroke-width:2.5;fill:none;stroke-dasharray:214;stroke-dashoffset:0}#countdown b{font:32px Georgia;font-weight:400}dialog{color:var(--ink);background:var(--paper);border:0;border-radius:9px;max-width:min(780px,94vw);width:740px;padding:24px;max-height:94dvh;overflow-y:auto;box-shadow:0 24px 90px #152b2466}dialog::backdrop{background:#182e2369;backdrop-filter:blur(6px)}.result-head{display:flex;justify-content:space-between;align-items:center;font-size:23px}.result-head button,.close{font:24px Georgia;padding:0;width:40px;min-height:40px;background:transparent;border:0}#finish-art{display:block;width:100%;height:auto;border-radius:5px;margin-top:12px;background:#bcaa8b}.rating{display:flex;align-items:center;gap:25px;margin:17px 0 23px}.rating strong{font:62px/1 Georgia;white-space:nowrap}.rating strong span{font-size:20px;opacity:.5}.rating b{font-size:20px;font-weight:400}.rating p{font-size:12px;margin:6px 0 0;opacity:.7}.rating small{font-size:11px;color:var(--coral)}.result-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.result-actions a{display:block;font-size:12px;padding:10px;margin-left:auto;color:var(--ink)}.primary{background:var(--ink);color:var(--paper)}.primary:hover{background:#396556}#image-dialog{width:540px;text-align:center}#image-dialog .close{position:absolute;right:10px;top:10px;background:var(--paper)}#result-image{display:block;width:100%;max-height:67vh;object-fit:contain}#image-status{font-size:12px}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#efe7d5;z-index:10;letter-spacing:.1em}.lite dialog::backdrop{backdrop-filter:none}@media(max-width:700px){header{left:16px;right:16px;top:16px}.wordmark b{font-size:17px}.wordmark small{font-size:7px}.mark{width:33px;height:33px;font-size:25px}.wordmark{gap:8px}.settings{gap:5px}.settings button{font-size:11px;min-height:34px;padding:5px 8px}#pause{font-size:10px}#live{top:82px;right:17px;width:110px}#live span{font-size:9px}#live b{font-size:27px}.score-line{gap:7px}#controls{left:15px;right:15px;gap:13px;bottom:max(24px,env(safe-area-inset-bottom))}.center-controls{width:auto;flex:1;max-width:300px}nav{gap:5px;margin-bottom:10px}nav button{font-size:10px;min-height:32px;padding:4px 9px}#start{font-size:13px;height:49px}#first-hint{bottom:161px;width:100%}#first-hint span{font-size:12px;padding:6px 12px}#first-hint small{font-size:9px}#run-caption{font-size:10px;padding:6px 12px}.rating{gap:16px}.rating strong{font-size:46px}.rating b{font-size:17px}.rating p{font-size:10px}.result-head{font-size:19px}dialog{padding:17px}.result-actions button{font-size:12px}.result-actions a{margin:0;padding:4px}#countdown{width:64px;height:64px}#countdown b{font-size:28px}}

/* Five numbered exercise tabs; keep the cloth dominant. */
.center-controls{width:440px}#orders{gap:5px}#orders button{padding:5px 7px;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0}#orders b{font:20px/1.1 Georgia;font-weight:400}#orders span{font-size:11px}#orders small{font:10px/1.4 sans-serif;opacity:.7}#lesson-name{font-size:12px;margin:0 0 8px}#first-hint{bottom:214px}#total-best{display:block;margin-top:4px}#result-lesson{font-size:13px;margin:10px 0 0}body[data-mode=running] #lesson-name,body[data-mode=countdown] #lesson-name{display:none}@media(max-width:700px){.center-controls{max-width:none}#controls{gap:7px;left:10px;right:10px;flex-wrap:wrap}#orders{position:fixed;left:14px;right:14px;bottom:calc(92px + env(safe-area-inset-bottom));gap:5px;margin:0}#orders button{padding:4px 3px;min-height:54px}#orders b{font-size:17px}#orders span{font-size:10px}#lesson-name{position:fixed;left:0;right:0;bottom:calc(151px + env(safe-area-inset-bottom));font-size:11px}#first-hint{bottom:calc(183px + env(safe-area-inset-bottom))}body[data-mode=paused] #lesson-name{display:none}.wordmark small{letter-spacing:.10em}#total-best{font-size:10px}}