:root{--ink:#5b3946;--muted:#a88893;--bg:#fff7f4;--card:#fff;--pink:#f46f9d;--violet:#ffa0bf;--line:#fbe3e3;
  --sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left);--sar:env(safe-area-inset-right)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:15px/1.35 ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Arial Rounded MT Bold","Nunito","Quicksand",-apple-system,system-ui,sans-serif;overscroll-behavior:none;touch-action:manipulation}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:flex;flex-direction:column}
/* gallery */
#gallery{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(var(--sat) + 14px) calc(var(--sar) + 16px) calc(var(--sab) + 24px) calc(var(--sal) + 16px);display:block}
.ghead{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto}
.brand{display:flex;gap:12px;align-items:center}.logo{font-size:30px;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#f46f9d,#ffa0bf);display:grid;place-items:center;box-shadow:0 6px 16px #ffa0bf40}
h1{margin:0;font-size:24px;letter-spacing:-.3px}.brand p{margin:2px 0 0;color:var(--muted);font-size:13px}
.iconbtn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:20px;background:#fff;box-shadow:0 1px 3px #0001}
.chips{display:flex;gap:8px;overflow-x:auto;margin:16px auto 14px;max-width:1100px;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 14px;border-radius:999px;background:#fff;color:var(--muted);font-weight:600;font-size:14px;box-shadow:0 1px 2px #0001}
.chip.on{background:var(--ink);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;max-width:1100px;margin:0 auto}
.card{position:relative;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 2px 10px #8a4a6014;text-align:left;padding:0;transition:transform .15s}
.card:active{transform:scale(.97)}
.card .art{aspect-ratio:3/4;width:100%;display:block;object-fit:cover;background:#fdf0ee}
.card.new .art{background:#fff}
.card .meta{padding:8px 10px 10px}.card .name{font-weight:700;font-size:14px}.card .tags{color:var(--muted);font-size:12px;margin-top:1px}
.card .bar{height:4px;border-radius:2px;background:#fdeeea;margin-top:7px;overflow:hidden}.card .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--violet))}
.badge{position:absolute;top:8px;right:8px;background:#f46f9d;color:#fff;font-weight:800;font-size:12px;padding:4px 8px;border-radius:999px;box-shadow:0 2px 6px #0003}
.badge.pct{background:#fffffff0;color:var(--ink)}
/* paint */
#paint{background:var(--bg)}
.topbar{display:flex;align-items:center;gap:10px;padding:calc(var(--sat) + 8px) calc(var(--sar) + 12px) 8px calc(var(--sal) + 12px);background:#fff;border-bottom:1px solid var(--line);z-index:2}
.topbar .iconbtn{box-shadow:none;background:transparent}.topbar .iconbtn.small{width:36px;font-size:22px;color:var(--muted)}
.hintbtn{background:#fff0f3!important;font-size:22px}
.tcenter{flex:1;min-width:0;text-align:center}
.tcenter h2{margin:0;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:5px}
.pbar{flex:1;max-width:240px;height:8px;border-radius:4px;background:#fde1e6;overflow:hidden}
#pfill{height:100%;width:0;background:linear-gradient(90deg,#f46f9d,#ffa6c4);border-radius:4px;transition:width .25s}
#ppct{color:var(--pink);font-weight:700;font-size:14px;min-width:38px}
.stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#fdeeea}
#cv,#fx{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
#fx{pointer-events:none}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-weight:600}
.toast{position:absolute;left:50%;top:14px;transform:translate(-50%,-20px);background:#8a4a60e6;color:#fff;padding:8px 14px;border-radius:999px;font-weight:600;font-size:14px;opacity:0;transition:.2s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.palette{background:#fff;border-top:1px solid var(--line);padding:10px calc(var(--sar) + 8px) calc(var(--sab) + 10px) calc(var(--sal) + 8px);z-index:2}
.phead{display:flex;justify-content:space-between;padding:0 8px 6px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.6px}
.swatches{display:flex;gap:6px;overflow-x:auto;padding:4px 4px 2px;scrollbar-width:none;scroll-behavior:smooth}
.swatches::-webkit-scrollbar{display:none}
.sw{flex:none;width:52px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;transition:opacity .2s}
.sw .ring{position:relative;width:50px;height:50px}
.sw svg{position:absolute;inset:0;transform:rotate(-90deg)}
.sw .dot{position:absolute;inset:6px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;box-shadow:inset 0 0 0 1px #0000001a;transition:transform .15s}
.sw.sel .dot{transform:scale(1.08)}
.sw .num{font-size:11px;color:var(--muted);font-weight:700;height:13px}
.sw.done{opacity:.38}.sw.done .dot{font-size:20px}
.donebar{text-align:center}.donetitle{font-size:18px;font-weight:800;margin:4px 0 10px}
.donebtns{display:flex;gap:10px;justify-content:center}
.btn{padding:12px 22px;border-radius:14px;background:#fff0f3;font-weight:700}.btn.primary{background:linear-gradient(90deg,#f46f9d,#ffa0bf);color:#fff}
.sheet{position:fixed;inset:0;background:#8a4a6055;display:flex;align-items:flex-end;justify-content:center;z-index:10}
.sheetcard{background:#fff;width:100%;max-width:480px;border-radius:20px 20px 0 0;padding:10px 10px calc(var(--sab) + 10px)}
.row{display:block;width:100%;text-align:left;padding:15px 14px;border-radius:12px;font-weight:600;font-size:16px}.row:active{background:#fff0f3}.row.danger{color:#e23b5a}
@media (orientation:landscape) and (max-height:520px){
  .topbar{padding-top:calc(var(--sat) + 4px);padding-bottom:4px}.tcenter h2{font-size:16px}.prow{margin-top:2px}
  .phead{display:none}.palette{padding-top:6px;padding-bottom:calc(var(--sab) + 6px)}.sw .num{display:none}
}
.sw.sel .ring{border-radius:50%;box-shadow:0 0 0 2.5px #ffa0bf}

.hero{position:relative;display:block;width:100%;max-width:1100px;margin:16px auto 0;height:min(56vw,320px);border-radius:22px;overflow:hidden;padding:0;text-align:left;box-shadow:0 10px 26px #c2607f33;background:#fde4e4}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero .hshade{position:absolute;inset:0;background:linear-gradient(180deg,#0000 35%,#5b2a3ad0)}
.hero .htext{position:absolute;left:16px;right:16px;bottom:14px;color:#fff}
.hero .hkicker{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;opacity:.85}
.hero .hname{font-size:24px;font-weight:800;letter-spacing:-.3px;margin:1px 0 8px;text-shadow:0 2px 8px #0006}
.hero .hgo{display:inline-block;background:linear-gradient(90deg,#f46f9d,#ffa0bf);padding:8px 16px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:0 4px 12px #ffa0bf66}
.hero:active{transform:scale(.99)}

/* v5: canvas never takes part in layout; the stage is the only measured box */
#cv,#fx{max-width:none;max-height:none;margin:0;padding:0;border:0}
.gfoot{text-align:center;color:var(--muted);font-size:12px;margin:22px auto 4px;opacity:.75}
.ver{text-align:center;color:var(--muted);font-size:12px;padding:8px 0 2px}
.dbg{position:absolute;left:6px;top:52px;opacity:.9;z-index:5;margin:0;max-width:calc(100% - 12px);background:#8a4a60d9;color:#d7ffe0;font:10.5px/1.35 ui-monospace,Menlo,monospace;padding:6px 8px;border-radius:8px;pointer-events:none;white-space:pre-wrap;word-break:break-all}
#ptitle{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* ---- Highland Calf Paint: soft pastel kawaii theme ---- */
body{background:var(--bg)}
.logo{background:#ffe3ea;overflow:hidden;border-radius:50%;box-shadow:0 6px 16px #f46f9d33}.logo img{width:100%;height:100%;object-fit:cover}
h1{color:var(--pink);font-weight:800}
.chip{border-radius:999px;box-shadow:0 2px 6px #f46f9d1a}.chip.on{background:var(--pink);color:#fff}
.card{border-radius:24px;box-shadow:0 4px 14px #f46f9d22}.card .name{color:var(--ink)}
.badge.pct{color:var(--pink)}
.topbar{background:#fffdfc;border-bottom:0;box-shadow:0 2px 10px #f46f9d14}
.topbar .iconbtn{width:44px;height:44px;border-radius:50%;background:#fff!important;box-shadow:0 2px 8px #8a4a6026;color:var(--pink)}
.topbar .iconbtn.small{box-shadow:none;background:transparent!important;width:30px}
.hintbtn{font-size:24px!important;font-weight:800;color:#8b7a80!important}
.ttl{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--pink);font-weight:800;font-size:20px!important}
.ttl #ptitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ttl .hrt{font-size:14px;color:#ff8fb3;flex:none;letter-spacing:2px}
.pbar{height:16px;border-radius:999px;background:#fde1e6;box-shadow:inset 0 1px 2px #f46f9d22}
#pfill{background:linear-gradient(90deg,#f7a1bd,#f46f9d);border-radius:999px}
#ppct{background:var(--pink);color:#fff;border-radius:999px;padding:5px 8px;font-size:13px;min-width:44px;text-align:center;box-shadow:0 3px 8px #f46f9d55}
.palette{background:#fffdfc;border-top:0;box-shadow:0 -2px 12px #f46f9d14}
.phead{color:#c39aa8}
.sw{width:56px}.sw .ring{width:54px;height:54px}.sw .dot{inset:6px;box-shadow:inset 0 -3px 6px #0000000f,0 2px 5px #8a4a6022}
.sw.sel .ring{box-shadow:0 0 0 3px #f46f9d,0 0 0 6px #ffe3ea}
.sw .num{color:#8b7a80}
.btn{border-radius:999px}.btn.primary{background:linear-gradient(90deg,#ff8fb3,#f46f9d);box-shadow:0 4px 12px #f46f9d55}
.toast{background:#f46f9de8}
.hero{border-radius:28px}
.hero .hgo{background:linear-gradient(90deg,#ff8fb3,#f46f9d)}
.sheetcard{border-radius:26px 26px 0 0}
.row.danger{color:#e0567f}
@media (orientation:landscape) and (max-height:520px){.ttl{font-size:17px!important}.pbar{height:10px}}
.topbar{gap:6px}.topbar .iconbtn.small{width:26px;margin-right:-2px}