/* Physical paper and pigment, set out with a ceramic inkstone and a bamboo brush. */
:root{--zc-ink-paper:#eee6d0;--zc-ink-pigment:#303932;--zc-ink-fibre:#8a846e;--zc-ink-brush:#52694f;--zc-ink-timber:color-mix(in srgb,var(--zc-background) 65%,#c4ad89);--zc-ink-rim:#8f7b5c;--zc-ink-stone:#343b36;--zc-ink-stone-light:#646b5f;--zc-ink-stamp:#9a513d}
:root[data-mode=dark]{--zc-ink-paper:#c9c3ad;--zc-ink-pigment:#26312b;--zc-ink-fibre:#807b69;--zc-ink-brush:#385441;--zc-ink-timber:color-mix(in srgb,var(--zc-background) 72%,#77674f);--zc-ink-rim:#61543e}
body{background:var(--zc-ink-timber);background-image:repeating-linear-gradient(1deg,transparent 0 38px,color-mix(in srgb,var(--zc-ink-rim) 8%,transparent) 38px 39px)}.ink{max-width:1100px;padding:28px 34px;column-gap:36px;row-gap:15px}.top{border:0;padding-bottom:8px}.title-row{margin-top:20px}h1{font:400 clamp(30px,3.8vw,45px)/1.08 var(--zc-font);letter-spacing:-.035em}.brand-row>.eyebrow{font-size:8px}.ink-seal{color:var(--zc-ink-stamp);stroke:currentColor;stroke-width:2}.brand-subtitle{font-size:12px;border-color:var(--zc-ink-rim)}.modes button{border-radius:2px}.modes button[aria-pressed=true]{background:transparent;box-shadow:inset 0 -2px var(--zc-accent)}.icon-button{border:0}.note{font:13px/1.6 var(--zc-font);color:var(--zc-muted);max-width:34em}.paper-wrap{position:relative;border:0;border-radius:0;padding:17px 23px!important;background:color-mix(in srgb,var(--zc-ink-rim) 22%,transparent);box-shadow:inset 0 0 1px var(--zc-ink-rim),0 16px 35px #1e201e20}.paper-wrap::before{content:'';position:absolute;z-index:1;pointer-events:none;top:9px;left:22%;right:22%;height:7px;background:var(--zc-ink-stone);box-shadow:0 3px 3px #20202025;border-radius:2px}.paper-wrap::after{content:'';pointer-events:none;position:absolute;right:29px;bottom:23px;width:18px;height:25px;border:2px double var(--zc-ink-stamp);opacity:.65;box-shadow:inset 0 0 0 2px var(--zc-ink-paper)}canvas{box-shadow:0 3px 8px #21190d24;outline-offset:-3px}.material-label{position:relative;min-height:100px;padding:17px 0 0 101px;font-size:8px;letter-spacing:.14em;margin:4px 0 3px;justify-content:center}.material-label span{font-size:16px;max-width:11em;line-height:1.5}.inkwell{position:absolute;left:3px;top:10px;width:72px;height:80px;border-radius:42% 40% 35% 37%;background:var(--zc-ink-stone);box-shadow:inset 4px 4px 0 var(--zc-ink-stone-light),3px 7px 8px #211d152c;transform:rotate(-9deg);border:1px solid var(--zc-ink-stone)}.inkwell::before{content:'';position:absolute;left:13px;top:16px;width:44px;height:49px;border-radius:50%;background:var(--zc-ink-pigment);box-shadow:inset 3px 3px 4px #0004,0 1px 1px var(--zc-ink-stone-light)}.inkwell i{position:absolute;left:58px;top:-13px;width:5px;height:103px;border-radius:2px;background:var(--zc-ink-rim);transform:rotate(16deg);box-shadow:1px 2px 3px #0002}.inkwell i::after{content:'';position:absolute;bottom:-20px;width:7px;height:28px;background:var(--zc-ink-stone);border-radius:0 0 80% 80%;left:-1px}.piece{border:0;border-bottom:1px solid color-mix(in srgb,var(--zc-ink-rim) 35%,transparent);border-radius:0;background:transparent;padding:12px 3px;min-height:60px}.piece svg{width:33px;height:33px}.piece[aria-pressed=true]{border-color:var(--zc-accent);background:color-mix(in srgb,var(--zc-surface) 48%,transparent);box-shadow:inset 3px 0 var(--zc-accent);padding-left:12px}.piece span{font-size:19px}.piece b{font-size:12px}.actions{gap:0!important;border-top:1px solid color-mix(in srgb,var(--zc-ink-rim) 35%,transparent);padding-top:10px}.actions button{border:0;border-radius:0;background:transparent;text-align:left;font:12px var(--zc-font);min-height:44px;padding:8px 4px}.actions button::before{content:'—';color:var(--zc-muted);margin-right:10px}.actions button:hover{background:color-mix(in srgb,var(--zc-surface) 30%,transparent)}.goal{border-color:color-mix(in srgb,var(--zc-ink-rim) 35%,transparent)}.status{font-size:13px;line-height:1.8}.save-status{font-size:8px}.done-card{box-shadow:0 12px 40px #14191430;border:0;border-top:3px solid var(--zc-ink-stamp);border-radius:0}.done-card strong{font-size:27px}
@media(max-width:899px){.ink{padding:17px 20px;gap:11px;max-width:660px}.material-label{display:none}.paper-wrap{padding:10px 12px!important;width:fit-content;max-width:100%;align-self:center;background:color-mix(in srgb,var(--zc-ink-rim) 18%,transparent);box-shadow:0 8px 20px #1e201e17}.paper-wrap::before{top:4px;height:4px}.paper-wrap::after{right:16px;bottom:15px;width:12px;height:16px;border-width:1px}.tray{gap:5px}.piece{padding:5px 8px;min-height:46px;border:1px solid color-mix(in srgb,var(--zc-ink-rim) 35%,transparent);gap:6px}.piece[aria-pressed=true]{padding-left:8px;box-shadow:inset 0 -2px var(--zc-accent)}.piece span{font:12px sans-serif}.piece svg{width:25px;height:25px}.actions{padding-top:5px;display:flex;flex-direction:row}.actions button{text-align:center;flex:1;font-size:11px}.actions button::before{display:none}.status{font-size:12px;margin:0}.top{padding:0}.title-row{margin-top:12px}.note{font-size:12px;margin:7px 0 0}}
@media(max-width:600px){.ink{padding:12px 14px;gap:8px}h1{font-size:29px}.brand-row>.eyebrow{font-size:7px}.ink-seal{width:22px;height:22px}.top-tools{gap:0}.modes button{font-size:10px;padding:0 8px}.piece span{font-size:11px}.actions button{font-size:10px}.brand-row{gap:5px}.title-row .quiet{font-size:10px}.status{font-size:11px}.preview-flag{font-size:7px}}