:root{
  --ground:#E6F2F1;
  --ink:#2B2350;
  --muted:#5F6B80;
  --paper:#FFFFFF;
  --line:rgba(43,35,80,.12);
  --accent:#FF7EB6;
  --font:"Baloo 2", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--ground)}
body{
  margin:0;color:var(--ink);font:16px/1.4 var(--font);
  background-color:var(--ground);
  background-image:radial-gradient(rgba(43,35,80,.07) 1.5px, transparent 1.5px);
  background-size:22px 22px;
  padding-inline:16px;padding-block:10px 12px;-webkit-tap-highlight-color:transparent;
}
.app{max-width:1200px;margin-inline:auto;height:calc(100vh - 22px);height:calc(100dvh - 22px);min-height:480px;display:grid;grid-template-rows:auto 1fr;gap:10px}

.bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.back{color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.85)}
.title{margin:0;font-weight:800;font-size:clamp(1.2rem,3.4vw,1.8rem)}
.icon-btn{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.85);display:grid;place-items:center;cursor:pointer;color:var(--ink);padding:0;font-size:18px}
.icon-btn span{display:grid;place-items:center}
.icon-btn span[hidden]{display:none}
.icon-btn svg{width:24px;height:24px}
.icon-btn.light{background:#F1F3F7}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.studio{min-height:0;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"palette paper tools";gap:16px;align-items:center}

.palette{grid-area:palette;display:grid;grid-template-columns:repeat(2,52px);gap:10px;align-content:center;background:var(--paper);border-radius:26px;padding:14px;box-shadow:0 6px 0 var(--line)}
.swatch{width:52px;height:52px;border-radius:50%;border:4px solid #fff;background:var(--c);box-shadow:0 0 0 2px var(--line), 0 3px 0 rgba(0,0,0,.12);padding:0;transition:transform .12s}
.swatch[aria-checked="true"]{transform:scale(1.12);box-shadow:0 0 0 4px var(--ink), 0 4px 0 rgba(0,0,0,.15)}
.swatch.white{background:#fff;box-shadow:0 0 0 2px rgba(43,35,80,.25), 0 3px 0 rgba(0,0,0,.12);display:grid;place-items:center;font-size:22px}

.paper-wrap{grid-area:paper;min-height:0;min-width:0;height:100%;display:grid;place-items:center}
.paper{width:min(100%, calc(100vh - 110px));width:min(100%, calc(100dvh - 110px));aspect-ratio:1;max-height:100%;background:#fff;border-radius:22px;padding:10px;box-shadow:0 10px 0 var(--line), 0 20px 40px rgba(43,35,80,.12)}
.paper svg{display:block;width:100%;height:100%;border-radius:14px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.art [data-r]{fill:#fff;cursor:pointer;transition:fill .18s}
.art [data-r]:hover{filter:brightness(.97)}

.tools{grid-area:tools;display:grid;gap:10px;align-content:center;width:130px}
.tool-toggle{display:grid;gap:6px;background:var(--paper);border-radius:18px;padding:6px;box-shadow:0 4px 0 var(--line)}
.tool{border:0;border-radius:16px;background:var(--paper);color:var(--ink);display:flex;align-items:center;gap:8px;padding:10px 12px;font-weight:800;box-shadow:0 4px 0 var(--line);text-align:left}
.tool span{font-size:24px;line-height:1}
.tool:active{transform:translateY(2px)}
.tool:disabled{opacity:.4}
.tool-toggle .tool{box-shadow:none}
.tool[aria-checked="true"]{background:var(--ink);color:#fff}
.stickers{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--paper);border-radius:16px;padding:6px;box-shadow:0 4px 0 var(--line)}
.stickers[hidden]{display:none}
.stk{border:0;background:transparent;font-size:26px;line-height:1;padding:6px 0;border-radius:10px}
.stk[aria-checked="true"]{background:#FFE3F0;box-shadow:inset 0 0 0 2px var(--accent)}

.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding-inline:16px;padding-block:16px;background:rgba(43,35,80,.45);overflow-y:auto}
.overlay[hidden]{display:none}
.sheet{width:100%;max-width:760px;background:#fff;border-radius:26px;padding:18px 20px 22px;display:grid;gap:14px;box-shadow:0 20px 50px rgba(43,35,80,.3)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sheet h2{margin:0;font-weight:800;font-size:1.6rem}
.pic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pic{border:3px solid var(--line);background:#fff;border-radius:18px;padding:8px;display:grid;gap:4px;justify-items:center;font-weight:800;color:var(--ink)}
.pic svg{width:100%;height:auto;aspect-ratio:1;border-radius:10px;pointer-events:none}
.pic.current{border-color:var(--ink)}
.pic:hover{border-color:var(--accent)}

#sparkles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:10}
#sparkles i{position:absolute;width:10px;height:10px;border-radius:50%;animation:spark .6s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx), var(--dy)) scale(.3);opacity:0}}

@media (max-width:820px), (orientation:portrait){
  .studio{grid-template-columns:1fr;grid-template-rows:1fr auto auto;grid-template-areas:"paper" "palette" "tools";gap:10px}
  .paper{width:min(100%, calc(100dvh - 330px));min-width:260px}
  .palette{grid-template-columns:repeat(7,1fr);grid-auto-flow:row;padding:10px;border-radius:20px;gap:8px;justify-items:center}
  .swatch{width:40px;height:40px;border-width:3px}
  .tools{width:auto;grid-template-columns:repeat(4,1fr);gap:6px}
  .tool-toggle{grid-column:1 / -1;grid-template-columns:1fr 1fr}
  .stickers{grid-column:1 / -1;grid-template-columns:repeat(6,1fr)}
  .tool{flex-direction:column;gap:0;padding:6px 4px;font-size:13px;text-align:center}
  .tool-toggle .tool{flex-direction:row;justify-content:center;font-size:15px}
  .tool span{font-size:22px}
}
@media (max-width:420px){
  .swatch{width:34px;height:34px}
  .title{font-size:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  .art [data-r],.swatch{transition:none}
  #sparkles{display:none}
}