:root{--ink:#26231d;--paper:#fffdf7;--bg:#f1eadb;--yellow:#ffd84f;--green:#63bf78;color:var(--ink);background:var(--bg);font-family:ui-rounded,SF Pro Rounded,system-ui,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0}body{background:radial-gradient(circle, #26231d12 1px, transparent 1.5px) 0 0/23px 23px, var(--bg);-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-width:320px;overflow:hidden}.paint-app{height:100svh;padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));grid-template-rows:auto minmax(0,1fr);gap:10px;display:grid}header{text-align:center;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;display:grid}header small{letter-spacing:.13em;font:800 .58rem/1 ui-monospace,monospace}h1{margin:3px 0 0;font-size:clamp(1.35rem,4vw,2rem);line-height:1}.icon-button,.save-button,footer button,.pages-close{border:3px solid var(--ink);background:var(--paper);min-height:50px;color:var(--ink);cursor:pointer;border-radius:16px;padding:0 16px;font-size:.95rem;font-weight:900;text-decoration:none;box-shadow:0 4px #26231d33}.icon-button{place-items:center;width:52px;padding:0;font-size:1.4rem;display:grid}.save-button{background:var(--green);min-width:78px}.workspace{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:clamp(260px,29vw,360px) minmax(0,1fr);gap:10px;min-height:0;display:grid}.tools{border:3px solid var(--ink);background:#fffdf7e6;border-radius:22px;flex-direction:column;grid-row:1/3;gap:12px;padding:10px;display:flex;overflow:auto}.tool-group{gap:6px;display:grid}.group-label{letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin:0;font:800 .58rem/1 ui-monospace,monospace}.tool-row{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.tool-row button{min-height:44px;color:var(--ink);cursor:pointer;background:#fff;border:2px solid #26231d2e;border-radius:12px;padding:4px;font-size:1.15rem;font-weight:900;position:relative}.tool-row button[aria-pressed=true]{border-color:var(--ink);background:var(--yellow);transform:translateY(-2px);box-shadow:0 3px #26231d33}.palette{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.palette button{aspect-ratio:1;background:var(--colour);cursor:pointer;border:2px solid #26231d2e;border-radius:50%;padding:0;position:relative}.palette button[aria-pressed=true]{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 3px #26231d33}.palette button[data-colour=\#ffffff]:after{content:"";border:1px solid #ccc;border-radius:50%;position:absolute;inset:6px}.custom-colour{aspect-ratio:1;background:var(--colour,conic-gradient(#f04f5f, #ffd84f, #53b96b, #45b9df, #8a5bd1, #f04f5f));cursor:pointer;border:2px dashed #26231d66;border-radius:50%;position:relative;overflow:hidden}.custom-colour.is-active{border:2px solid var(--ink);transform:translateY(-2px);box-shadow:0 3px #26231d33}.custom-colour input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.side-controls{gap:10px;margin-top:auto}.size-control{text-transform:uppercase;gap:5px;font:800 .65rem/1 ui-monospace,monospace;display:grid}.size-control input{accent-color:#5c69d8;width:100%}.size-preview{background:#fff;border:2px solid #26231d2e;border-radius:12px;place-items:center;height:52px;display:grid}.size-preview i{background:var(--ink);border:1px solid #26231d40;border-radius:50%;display:block}.mirror-toggle{min-height:44px;color:var(--ink);cursor:pointer;background:#fff;border:2px solid #26231d2e;border-radius:12px;font-size:.8rem;font-weight:900}.mirror-toggle[aria-pressed=true]{border-color:var(--ink);background:var(--yellow);box-shadow:0 3px #26231d33}.paper{border:3px solid var(--ink);background:#fff;border-radius:22px;min-height:0;position:relative;overflow:hidden;box-shadow:0 6px #26231d2e}canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.mirror-guide{pointer-events:none;border-left:2px dashed #26231d40;position:absolute;top:8px;bottom:8px;left:50%}footer{justify-content:flex-end;gap:8px;display:flex}footer button{background:var(--yellow);min-height:48px}footer button:disabled{opacity:.38;box-shadow:none}.workspace>footer{grid-column:2}.pages-overlay{z-index:10;background:#26231d73;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.pages-overlay[hidden]{display:none}.pages-card{border:3px solid var(--ink);background:var(--paper);text-align:center;border-radius:24px;gap:14px;width:min(520px,100%);max-height:86svh;padding:20px;display:grid;overflow:auto;box-shadow:0 8px #26231d4d}.pages-card h2{margin:0;font-size:1.3rem}.pages-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;display:grid}.pages-grid button{color:var(--ink);cursor:pointer;background:#fff;border:2px solid #26231d33;border-radius:16px;justify-items:center;gap:4px;padding:12px 6px 10px;font-size:.78rem;font-weight:900;display:grid}.pages-grid button:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 3px #26231d33}.pages-grid button span{font-size:2rem;line-height:1}.pages-close{background:var(--yellow);justify-self:center;min-width:130px}.celebration-layer{z-index:20;pointer-events:none;position:fixed;inset:0;overflow:hidden}.confetti-piece{border:2px solid var(--ink);width:13px;height:19px;animation:confetti-fall var(--fall-time,1.5s) cubic-bezier(.2, .65, .4, 1) forwards;position:absolute;top:-24px}@keyframes confetti-fall{to{transform:translate3d(var(--drift,20px), 110vh, 0) rotate(640deg)}}@media (width<=680px){.paint-app{gap:7px}.workspace{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:1fr}.tools{flex-direction:row;grid-area:1/1;align-items:stretch;gap:10px;padding:8px;overflow:auto hidden}.tool-group{flex:none;grid-template-rows:auto 1fr}.tool-row{grid-template-rows:repeat(2,1fr);grid-template-columns:none;grid-auto-flow:column}.tool-row button{width:46px;min-height:42px}.palette{grid-template-rows:repeat(2,1fr);grid-template-columns:none;grid-auto-flow:column}.palette button,.custom-colour{width:38px}.side-controls{grid-template-rows:repeat(2,auto);align-content:space-between;min-width:116px;margin:0;display:grid}.size-preview{height:auto;min-height:40px}.mirror-toggle{min-height:40px}.paper{grid-row:2}.workspace>footer{grid-area:3/1;justify-content:stretch}.workspace>footer button{flex:1;padding:0 7px;font-size:.78rem}header small{display:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important}.confetti-piece{display:none}}