:root{color-scheme:light;--ink:#243e3b;--leaf:#486b59;--paper:#f7f5eb;--honey:#f3c968}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}main{max-width:460px;margin:auto;padding:18px 16px max(22px,env(safe-area-inset-bottom))}header{display:flex;justify-content:space-between;gap:10px;font-size:11px;align-items:center}a{color:var(--leaf);text-decoration:none}header span{letter-spacing:1.4px;color:#6b7c70}.title{display:flex;align-items:center;justify-content:space-between;margin:22px 0 20px;gap:8px}.eyebrow{font-size:9px;letter-spacing:2.2px;color:#70806b;margin:0 0 8px}h1{font-size:30px;letter-spacing:-1px;margin:0;line-height:1.2}h1 span{display:block;font-size:12px;font-weight:400;letter-spacing:.3px;margin-top:8px}.badge{font-size:10px;text-align:center;line-height:1.6;background:#e8ecdf;border:1px solid #d2ddc8;border-radius:50%;padding:13px 8px;white-space:nowrap}.hud{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#e7eddf;border-radius:16px 16px 0 0;font-size:13px}.hud span{font-variant-numeric:tabular-nums;font-weight:700;min-width:85px;text-align:right}.board{position:relative;overflow:hidden;border:1px solid #d2ddc8;border-top:0;border-radius:0 0 18px 18px;background:#f1f3e7;box-shadow:0 8px 0 #e4e7d9}canvas{display:block;width:100%;height:auto;aspect-ratio:3/4;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}.message{min-height:42px;margin:20px 0 10px;font-size:12px;line-height:1.7}.controls{display:flex;gap:9px}button{font:inherit;min-height:48px;border:0;border-radius:13px;padding:12px;font-size:13px;font-weight:700;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #408ecb;outline-offset:3px}.primary{flex:1;background:var(--ink);color:#fff}.secondary{background:#e8ecdf;color:var(--ink)}button:disabled{opacity:.45;cursor:default}.guide{display:flex;justify-content:center;gap:16px;font-size:12px;margin:23px 0 10px}.guide span{color:#909c86}.note,footer{font-size:10px;color:#69796b;text-align:center;line-height:1.8}footer{margin-top:20px;letter-spacing:1px}.result{position:absolute;inset:0;background:#f7f5ebbd;display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}[hidden]{display:none!important}.result>div{width:100%;padding:30px 18px;text-align:center;background:#fffdf5;border:1px solid #d2ddc8;border-radius:24px;box-shadow:0 14px 50px #243e3b18}.result h2{font-size:26px;margin:10px 0}.result p{font-size:13px;line-height:1.7}.result #result-tag{font-size:11px;letter-spacing:3px;color:var(--leaf)}.result button{background:var(--honey);color:var(--ink);width:100%;margin-top:16px}@media(min-width:700px){main{padding-top:28px}.title{margin-top:25px}}@media(max-width:350px){main{padding:12px}h1{font-size:26px}.badge{font-size:9px}.controls button{font-size:12px}}
.stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:0 0 12px}.stages button{min-width:0;min-height:44px;padding:8px 2px;background:#e8ecdf;color:var(--ink);border:1px solid #d2ddc8;font-size:14px}.stages button[aria-current="step"]{background:var(--ink);color:#fff;border-color:var(--ink)}.stages button:disabled{opacity:.5}.stage-info{display:flex;flex-direction:column;gap:4px;min-height:59px;margin-bottom:12px;font-size:14px}.stage-info span{font-size:11px;color:#69796b;line-height:1.5}.result #next{display:block;width:100%;margin:16px 0 8px;background:var(--ink);color:#fff}.result #again{width:100%}.result #next[hidden]{display:none!important}
.ink{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px 9px;background:#e7eddf;color:#486b59;font-size:11px;font-variant-numeric:tabular-nums}.ink-track{display:block;width:96px;height:7px;border-radius:9px;background:#cbd7c3;overflow:hidden;flex:none}.ink-track #ink-fill{display:block;width:100%;height:100%;background:#486b59;transition:width .1s linear}
.pause-overlay{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:20px;background:#f7f5ebdd}.pause-overlay>div{text-align:center;width:100%;max-width:260px}.pause-overlay h2{font-size:24px;margin:0 0 10px}.pause-overlay p{font-size:13px;line-height:1.7}.pause-overlay button{width:100%;min-height:52px;background:var(--ink);color:#fff}
:root{--ink:#354a38;--leaf:#587450;--paper:#f8f4e8;--honey:#e7c275}
body{background-color:var(--paper);background-image:radial-gradient(#b9a98b20 .7px,transparent .7px);background-size:8px 8px}
header span{color:#8b7b5d}.eyebrow{color:#8a795a}.badge{background:#edf0df;border:1px solid #b7c5a1;box-shadow:inset 0 0 0 4px #f8f4e8;color:#587450}
.hud{background:#e2e8d3;border:1px solid #c0caa9;border-bottom:0}.ink{background:#e2e8d3;border-left:1px solid #c0caa9;border-right:1px solid #c0caa9}
.board{border-color:#b7c39f;box-shadow:0 7px 0 #d9dfc7,0 12px 24px #5364400c}
.stages button{background:#f0ecde;border-color:#d6ccb7;box-shadow:0 2px 0 #dfd7c3}.stages button[aria-current="step"]{background:#55744f;border-color:#55744f;box-shadow:0 2px 0 #3a5736}
.primary{background:var(--honey);color:#493f2d;box-shadow:0 3px 0 #c9a45c}.secondary{background:#e7e9d8;color:#4b6545;box-shadow:0 3px 0 #ccd2b8}
.controls button:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.result{background:#f8f4e8cc}.result>div{background:#fffaf0;border-color:#cbbf9f;box-shadow:0 10px 35px #475b3520,inset 0 0 0 6px #f2eedf}
.result>div::before{content:"";display:block;width:26px;height:18px;margin:0 auto 15px;background:#89a268;border-radius:0 100% 0 100%;transform:rotate(-20deg)}
.pause-overlay{background:#f8f4e8eb}.pause-overlay>div{padding:24px 16px;background:#fffaf0;border:1px solid #d4c9b0;border-radius:22px;box-shadow:0 8px 24px #475b3514}