:root{--zc-background:#f3efe4;--zc-surface:#fdfaf2;--zc-ink:#26302b;--zc-muted:#6c756c;--zc-accent:#3f6150;--zc-accent-ink:#fbfaf3;--zc-border:#dcd8cb;--zc-soft:#ebe7da;--zc-radius:12px;--zc-font:Georgia,"Times New Roman",serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-mode]){--zc-background:#1b1f1d;--zc-surface:#232826;--zc-ink:#e6e2d6;--zc-muted:#9ea69d;--zc-accent:#8fb5a0;--zc-accent-ink:#15201a;--zc-border:#3a413d;--zc-soft:#2c3230;color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--zc-background);color:var(--zc-ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
.ink{width:min(600px,100%);margin:0 auto;padding:12px 16px 18px;display:flex;flex-direction:column;gap:8px;min-height:100svh}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.eyebrow{font-size:10px;letter-spacing:2px;color:var(--zc-muted);font-weight:600}
.top-tools{display:flex;align-items:center;gap:6px}
.modes{display:flex;border:1px solid var(--zc-border);border-radius:999px;padding:2px;background:var(--zc-surface)}
.modes button{border:0;background:none;min-height:40px;padding:0 12px;border-radius:999px;font-size:13px;color:var(--zc-muted)}
.modes button[aria-pressed=true]{background:var(--zc-soft);color:var(--zc-ink);font-weight:600}
button{white-space:nowrap;font:inherit;color:var(--zc-ink);background:var(--zc-surface);border:1px solid var(--zc-border);border-radius:var(--zc-radius);min-height:44px;min-width:44px;padding:0 14px;cursor:pointer;touch-action:manipulation;transition:background .15s,border-color .15s}
button:hover:not(:disabled){border-color:var(--zc-muted)}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--zc-accent);border-color:var(--zc-accent);color:var(--zc-accent-ink)}
button.quiet{border-color:transparent;background:none;color:var(--zc-muted);text-decoration:underline;text-underline-offset:3px;padding:0 8px}
:focus-visible{outline:2px solid var(--zc-accent);outline-offset:3px}
.icon-button{width:44px;padding:0;display:grid;place-items:center;border-radius:999px}
.icon-button svg{width:20px;height:20px}
.icon-button[aria-pressed=false] .wave{opacity:0}
.icon-button[aria-pressed=false]{color:var(--zc-muted)}
.title-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:4px}
h1{font:400 clamp(20px,5.4vw,26px)/1.2 var(--zc-font);margin:0}
h1 .num{display:inline-block;min-width:1.4em;color:var(--zc-muted);font-variant-numeric:tabular-nums}
h1 .found{font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--zc-accent);border:1px solid currentColor;border-radius:999px;padding:3px 7px;vertical-align:middle;margin-left:4px}
.note{margin:2px 0 0;color:var(--zc-muted);font-size:13px}
.goals{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-height:30px}
.goal{display:flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px 4px 6px;border:1px solid var(--zc-border);border-radius:999px;background:var(--zc-surface)}
.goal.free{padding-left:10px;color:var(--zc-muted)}
.goal .mark{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--zc-muted);display:grid;place-items:center}
.goal.done .mark{background:var(--zc-accent);border-color:var(--zc-accent);color:var(--zc-accent-ink)}
.goal .mark svg{width:12px;height:12px}
.goal .bar{width:34px;height:4px;border-radius:2px;background:var(--zc-soft);overflow:hidden}
.goal .bar i{display:block;height:100%;background:var(--zc-ink);opacity:.55;transition:width .4s}
.goal.done .bar{display:none}
.paper-wrap{position:relative;display:flex;justify-content:center}
canvas{display:block;border-radius:6px;box-shadow:0 1px 2px color-mix(in srgb,var(--zc-ink) 12%,transparent),0 10px 30px -18px color-mix(in srgb,var(--zc-ink) 40%,transparent);touch-action:none;cursor:crosshair;max-width:100%}
.goal-row{display:flex;align-items:flex-start;gap:8px}.goal-row .goals{flex:1}
.preview-flag{flex:none;font-size:11px;line-height:1.3;padding:5px 10px;border-radius:999px;border:1px dashed var(--zc-muted);color:var(--zc-muted);white-space:nowrap;text-align:center}
.done-card{position:absolute;left:50%;top:22px;transform:translateX(-50%);width:min(92%,340px);background:var(--zc-surface);border:1px solid var(--zc-border);border-radius:14px;padding:14px 16px;box-shadow:0 12px 32px -14px color-mix(in srgb,var(--zc-ink) 45%,transparent);text-align:center;animation:rise .5s ease-out}
.done-card strong{font:400 19px/1.3 var(--zc-font)}
.done-card p{margin:4px 0 12px;color:var(--zc-muted);font-size:13px}
.done-actions{display:flex;gap:8px;justify-content:center}
.done-actions button{flex:1}
@keyframes rise{from{opacity:0;transform:translate(-50%,10px)}}
.tray,.actions{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.piece{display:flex;align-items:center;gap:6px;padding:0 12px 0 8px;flex:1;max-width:150px;justify-content:center}
.piece svg{width:24px;height:24px;color:var(--zc-ink);flex:none}
.piece[data-kind=bamboo] svg{color:var(--zc-accent)}
.piece b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--zc-muted);min-width:.7em}
.piece[aria-pressed=true]{border-color:var(--zc-accent);background:var(--zc-soft);box-shadow:inset 0 0 0 1px var(--zc-accent)}
.actions button{flex:1;max-width:190px;font-size:13px}
.actions .sel-label{align-self:center;font-size:12px;color:var(--zc-muted);letter-spacing:1px;text-transform:uppercase;padding:0 4px}
.actions button.quiet{flex:0 0 auto}
.wide{flex:1;max-width:260px}
.status{margin:2px 0 0;min-height:1.45em;text-align:center;font-size:13px;color:var(--zc-ink)}
.save-status{margin:0;text-align:center;font-size:11px;color:var(--zc-muted)}
dialog{border:1px solid var(--zc-border);border-radius:16px;background:var(--zc-surface);color:var(--zc-ink);padding:16px;width:min(560px,calc(100% - 24px));max-height:calc(100% - 32px)}
dialog::backdrop{background:color-mix(in srgb,var(--zc-ink) 35%,transparent)}
.dialog-head{display:flex;justify-content:space-between;align-items:center}
dialog h2{font:400 22px/1.2 var(--zc-font);margin:0}
.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:12px}
.level-card{white-space:normal;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;text-align:left;padding:10px 12px;min-height:64px;align-items:center}
.level-card .num{grid-row:span 2;font:400 22px/1 var(--zc-font);color:var(--zc-muted);font-variant-numeric:tabular-nums;min-width:1.2em}
.level-card .name{font-size:13px;line-height:1.25}
.level-card .state{font-size:11px;color:var(--zc-muted);min-height:1em}
.level-card.done{border-color:color-mix(in srgb,var(--zc-accent) 55%,var(--zc-border))}
.level-card.done .state{color:var(--zc-accent);font-weight:600}
.level-card.current{box-shadow:inset 0 0 0 1px var(--zc-accent)}
@media (max-width:380px){.modes button{padding:0 9px;font-size:12px}.piece span{display:none}.piece{max-width:none}}
@media (min-width:900px){.ink{width:min(1040px,100%);display:grid;grid-template-columns:auto 300px;justify-content:center;grid-template-rows:auto auto auto auto auto auto 1fr;grid-template-areas:"top top" "paper goals" "paper tray" "paper actions" "paper status" "paper save" "paper rest";column-gap:28px;align-content:start;padding-top:20px}.top{grid-area:top}.paper-wrap{grid-area:paper;justify-content:center}.goal-row{grid-area:goals;flex-direction:column;align-items:stretch}.goals{flex-direction:column;align-items:stretch}.preview-flag{max-width:none}.tray{grid-area:tray;justify-content:stretch}.actions{grid-area:actions;justify-content:stretch}.status{grid-area:status;text-align:left}.save-status{grid-area:save;text-align:left}.piece,.actions button{max-width:none}.goal{border-radius:10px;padding:8px 10px}.goal .bar{flex:1;width:auto}.tray,.actions{flex-direction:column}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[data-motion=reduced] *{animation:none!important;transition:none!important}

/* A worktable for living ink: mounted paper, generous margins and a material tray. */
body{background-image:repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in srgb,var(--zc-border) 9%,transparent) 3px 4px)}.ink{width:min(1140px,100%);padding:24px 26px;gap:14px}.top{padding-bottom:12px;border-bottom:1px solid var(--zc-border)}.brand-row{align-items:center}.brand-row>.eyebrow{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.15em}.ink-seal{width:38px;height:38px;fill:none;stroke:var(--zc-accent);stroke-width:1.6;stroke-linecap:round;flex:none}.brand-subtitle{font:italic 13px var(--zc-font);letter-spacing:0;border-left:1px solid var(--zc-border);padding-left:12px}.modes{border:0;background:transparent;padding:0;gap:3px}.modes button{font-size:11px;min-height:42px;padding:0 15px}.modes button[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--zc-accent);font-weight:400}.icon-button{background:transparent;border-color:var(--zc-border)}.title-row{margin-top:14px}h1{font-size:clamp(29px,3.6vw,46px);line-height:1.15;letter-spacing:-.035em}h1 .num{font-size:.6em;min-width:1.2em;vertical-align:middle}.note{font-size:12px;line-height:1.65}.paper-wrap{background:color-mix(in srgb,var(--zc-soft) 70%,transparent);border:1px solid var(--zc-border);border-radius:2px;box-shadow:inset 0 0 35px color-mix(in srgb,var(--zc-ink) 3%,transparent)}canvas{border-radius:0;box-shadow:0 12px 35px -23px var(--zc-ink)}.material-label{font-size:9px;letter-spacing:.15em;color:var(--zc-muted);display:flex;flex-direction:column;gap:8px}.material-label span{font:italic 16px var(--zc-font);letter-spacing:0;color:var(--zc-ink)}.piece{border-radius:calc(var(--zc-radius)*.6);background:transparent;min-height:57px;gap:14px;justify-content:flex-start;padding:8px 14px}.piece svg{width:32px;height:32px}.piece span{font-family:var(--zc-font);font-size:19px}.piece b{margin-left:auto;font-size:13px;font-weight:400}.piece[aria-pressed=true]{box-shadow:none;border-color:var(--zc-accent);background:color-mix(in srgb,var(--zc-accent) 9%,var(--zc-surface))}.actions button{min-height:46px;border-radius:99px;font-size:11px}.goals{gap:8px}.goal{background:transparent;border:0;border-bottom:1px solid var(--zc-border);border-radius:0!important;padding:10px 0!important;gap:10px}.goal .mark{width:14px;height:14px}.goal .bar{height:2px}.preview-flag{border:0;padding:4px 0;font-size:9px;text-align:left}.status{font:italic 15px/1.7 var(--zc-font);padding-top:4px}.save-status{font-size:9px}.done-card{padding:24px 20px;border-radius:3px;border-color:var(--zc-accent)}.done-card strong{font-size:25px}.done-card p{line-height:1.7}.level-card{min-height:80px;border-radius:3px}.level-card .num{font-size:30px}.level-card .name{font:17px var(--zc-font)}
@media(min-width:900px){.ink{grid-template-columns:auto 300px;grid-template-rows:auto auto auto auto auto auto auto 1fr;grid-template-areas:'top top' 'paper goals' 'paper materials' 'paper tray' 'paper actions' 'paper status' 'paper save' 'paper rest';column-gap:28px}.material-label{grid-area:materials;margin-top:12px}.paper-wrap{padding:0 12px}.tray{gap:8px}.actions{margin-top:10px;gap:7px}}
@media(max-width:899px){.ink{max-width:650px}.paper-wrap{border:0;background:transparent;box-shadow:none}.material-label{display:none}.tray{gap:6px}.piece{justify-content:center;min-height:46px;padding:4px 8px;gap:6px}.piece svg{width:25px;height:25px}.piece span{font:12px sans-serif}.piece b{margin-left:0;font-size:11px}.status{font-size:13px}.brand-subtitle{display:none}}
@media(max-width:600px){.ink{padding:14px;gap:9px}.brand-row{flex-wrap:wrap;gap:8px}.brand-row>.eyebrow{font-size:8px;gap:5px}.ink-seal{width:25px;height:25px}.modes button{padding:0 10px;min-height:40px;font-size:10px}.top-tools{margin-left:auto;gap:3px}.icon-button{width:40px;min-width:40px;min-height:40px}.title-row{margin-top:10px}h1{font-size:28px}.top{padding-bottom:8px}.note{font-size:11px;margin-bottom:0}.goal{padding:4px 0!important;font-size:11px}.goals{gap:8px}.preview-flag{font-size:8px}.actions button{min-height:44px}.piece{min-width:0;padding:4px 7px}.piece span{font-size:11px}.piece svg{width:22px;height:22px}.status{margin:0}.title-row .quiet{font-size:11px}}
.modes button,.icon-button{min-height:44px}.icon-button{min-width:44px;width:44px}