*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
:root{--b:clamp(52px,14.5vw,76px);--g:clamp(6px,2vw,12px);--ink:#2b2240}
html,body{margin:0;height:100%;overflow:hidden;font-family:'Nunito','Varela Round',system-ui,sans-serif;background:#ffd1ea;touch-action:none;color:var(--ink)}
.screen{position:fixed;left:0;right:0;top:0;height:100vh;height:100dvh;display:none;flex-direction:column;background:radial-gradient(circle at 20% 0%,#fff0f8 0,transparent 40%),linear-gradient(170deg,#ffd1ea,#d9c9ff 70%,#c2e4ff);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden}
.screen.active{display:flex}
#home{background:radial-gradient(circle at 50% 30%,#fff6fb 0,transparent 55%),linear-gradient(170deg,#ffc4e3,#d4c2ff 70%,#bfe3ff)}
#home::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff88 2px,transparent 3px);background-size:38px 38px;pointer-events:none}
#logo{margin:6vh auto 0;width:min(86vw,460px);filter:drop-shadow(0 6px 0 #0001)}
#logo svg{width:100%;display:block}
.bigbtns{flex:1;display:flex;flex-wrap:wrap;gap:6vmin;align-items:center;justify-content:center;padding:4vmin;position:relative}
.big{width:min(38vmin,230px);height:min(38vmin,230px);border-radius:44px;padding:0;background:none;box-shadow:0 10px 0 #0002,0 18px 30px #6a3f9a33;animation:bob 3s ease-in-out infinite}
#goGallery{animation-delay:-1.5s}
@keyframes bob{50%{transform:translateY(-6px)}}
.big .art,.big .art svg{display:block;width:100%;height:100%}
button{position:relative;border:none;background:#fff;border-radius:22px;box-shadow:0 5px 0 #6a3f9a33;cursor:pointer;color:var(--ink);flex:none;padding:0;transition:transform .08s}
button:active{transform:translateY(3px) scale(.96);box-shadow:0 2px 0 #6a3f9a33}
.ib{width:var(--b);height:var(--b);border-radius:calc(var(--b)*.3);display:flex;align-items:center;justify-content:center}
.ib svg{width:68%;height:68%}
.ib:disabled{opacity:.4;filter:grayscale(1);box-shadow:none}#undo:not(:disabled){background:#e9ffe9;box-shadow:0 0 0 3px #5cd65c,0 5px 0 #6a3f9a33}.ib.dis{opacity:.4;filter:grayscale(1)}.shake{animation:shk .35s}@keyframes shk{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.ib.gold{background:#fff7d6}
.corner{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom))}.left{left:16px}.right{right:16px}
.ring{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);pointer-events:none;opacity:0;transition:opacity .15s}.holding .ring{opacity:1}.ring circle{fill:none;stroke-width:7}.ring .rbg{stroke:#ffffffcc}.ring .rfg{stroke:#ff4fa3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.bar{display:flex;gap:var(--g);padding:var(--g);align-items:center;justify-content:space-between;flex:none}
.bar.tools{justify-content:center;padding-top:0}
.hdr{width:var(--b);height:var(--b);margin:0 auto}.hdr svg{width:100%;height:100%}
.tool.on{background:#ffe680;box-shadow:0 0 0 4px #fff,0 5px 0 #6a3f9a33}
#tMagic.on{background:linear-gradient(135deg,#ffd1ea,#c9b8ff,#bfe3ff);box-shadow:0 0 0 4px #fff,0 5px 0 #6a3f9a33}
#detail svg{width:78%;height:78%}
.stage{overflow:hidden;flex:1 1 0;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;padding:0 var(--g)}
.sq{position:relative;width:200px;height:200px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 6px 0 #6a3f9a22,0 10px 24px #6a3f9a22;flex:none}
.sq canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#lc,#sk{pointer-events:none}
.pal{display:grid;grid-template-columns:repeat(5,var(--sw));gap:var(--g);justify-content:center;padding:var(--g);flex:none;--sw:min(72px,calc((100vw - 6*var(--g)) / 5))}
.sw{width:var(--sw);height:var(--sw);border-radius:50%;border:5px solid #fff;padding:0;overflow:hidden;background-size:cover}
.sw.on{box-shadow:0 0 0 4px var(--ink),0 5px 0 #6a3f9a33;transform:scale(1.04)}
.sw img{width:100%;height:100%;display:block}
.pal.stickers .sw{background:#fff;border-color:#f3ecff;padding:6px}
/* landscape phones: canvas centre, tools left, colours right */
@media (orientation:landscape) and (max-height:620px){
 #color{display:none;flex-direction:row}
 #color.active{display:grid;grid-template-columns:auto auto 1fr auto;grid-template-rows:100%}
 #color .bar{display:grid;grid-template-columns:repeat(2,var(--b));grid-auto-rows:var(--b);align-content:center;justify-content:center;gap:var(--g);padding:var(--g) 0 var(--g) var(--g)}
 #color .bar.tools{padding:var(--g) 0 var(--g) var(--g)}
 :root{--b:clamp(48px,calc((100dvh - 5*var(--g)) / 3),68px)}
 .pal{grid-template-columns:repeat(2,var(--sw));align-content:center;--sw:min(68px,calc((100dvh - 6*var(--g)) / 5))}
 #logo{margin-top:2vh;width:min(50vw,360px)}
}
.grid{flex:1;min-height:0;overflow-y:auto;touch-action:pan-y;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));align-content:start;grid-auto-rows:max-content;gap:16px;padding:8px 16px 30px}
.grid>button,.grid>img{display:block;width:100%;height:auto;aspect-ratio:1;background:#fff;border-radius:26px;padding:8px;object-fit:contain;box-shadow:0 6px 0 #6a3f9a22}
.grid>button svg{display:block;width:100%;height:100%}
.grid .done{position:absolute;top:-6px;right:-6px;width:40px;height:40px}
#viewImg{flex:1;min-height:0;object-fit:contain;margin:12px;background:#fff;border-radius:24px}
.pcbox{margin:auto;background:#fff;border-radius:24px;padding:0 20px 22px;width:min(94vw,460px);font-size:17px;max-height:96%;overflow:auto;touch-action:pan-y;position:relative}.pcbox h3{margin:22px 0 6px;font-size:19px}
.row{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0}.row input{transform:scale(1.5);margin-right:6px}
.txt{font-size:18px;padding:10px 18px;margin:10px 0;display:block;min-height:56px;width:100%}
.small{font-size:14px;color:#555}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:8}
#toast{position:fixed;left:50%;top:42%;width:160px;height:160px;transform:translate(-50%,-50%) scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1);pointer-events:none;z-index:9}
#toast svg{width:100%;height:100%}
#toast.show{transform:translate(-50%,-50%) scale(1)}
@media (prefers-reduced-motion:reduce){.big{animation:none}}
#fact{position:fixed;left:50%;bottom:calc(var(--sw,64px)*2 + 40px);transform:translate(-50%,40px) scale(.8);opacity:0;max-width:min(92vw,520px);padding:16px 20px;border-radius:24px;background:#fffbe8;border:4px solid #ffd23b;box-shadow:0 8px 24px #0003;font:700 clamp(17px,4.6vw,24px)/1.3 system-ui,sans-serif;color:#4a3b5c;text-align:center;transition:.4s cubic-bezier(.3,1.6,.5,1);pointer-events:none;z-index:10}
#fact.show{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
.grid>button img.thumb{display:block;width:100%;height:100%;object-fit:contain;border-radius:18px}
#fact{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
#fact .fpic{width:84px;height:84px;background:#fff;border-radius:18px;display:block}#fact .fpic svg{width:100%;height:100%}#fact .fspk{width:48px;height:48px;animation:spk 1s ease-in-out infinite}#fact .fspk svg{width:100%;height:100%}#fact b{flex-basis:100%}
@keyframes spk{50%{transform:scale(1.15)}}
/* ---- who's coloring ---- */
#who{align-items:center;overflow-y:auto}
.wlogo{width:min(70vw,340px);margin:4vh auto 0}.wlogo svg,.wlogo img{width:100%;display:block}
.whoT{font:900 clamp(26px,7vw,40px)/1.1 system-ui,sans-serif;color:var(--ink);margin:2vh 0 3vh;text-align:center}
.whogrid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;padding:0 16px 30px;max-width:720px}
.whob{width:clamp(130px,40vw,170px);padding:12px 10px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:28px}
.whob .av{width:100%;aspect-ratio:1;display:block;background:#fff8fd;border-radius:22px;overflow:hidden}.whob .av svg{width:100%;height:100%}
.whob .nm{font:800 20px system-ui,sans-serif;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whob .st{color:#f5b300;font-size:16px;letter-spacing:2px}
.whob .plus{display:flex;align-items:center;justify-content:center;font:300 80px system-ui;color:#b49bd6}
.addbox{overflow-y:auto;padding:8px 16px 30px;max-width:640px;width:100%;margin:0 auto}
.addT{font:800 24px system-ui;margin:0 0 0 12px;align-self:center}
#apName{width:100%;font:700 24px system-ui;padding:14px 18px;border-radius:18px;border:3px solid #e6dcf5;margin:6px 0 10px}
.lbl{font:800 18px system-ui;margin:12px 4px 8px;color:var(--ink)}
.avgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.avb{aspect-ratio:1;padding:6px;border-radius:18px;border:4px solid transparent}.avb svg{width:100%;height:100%}.avb.on{border-color:#ff6fb5}
.lvrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.lvb{padding:10px 4px;border-radius:16px;border:4px solid transparent;display:flex;flex-direction:column;align-items:center;font:700 14px system-ui}.lvb span{color:#f5b300;font-size:15px}.lvb.on{border-color:#ff6fb5}
.txt.go{margin-top:20px;background:#ff6fb5;color:#fff;font-weight:900;font-size:22px}
.avbtn{position:absolute;top:calc(env(safe-area-inset-top) + 10px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 16px 6px 6px;border-radius:999px;z-index:2;font:800 17px system-ui}
.avbtn svg{width:40px;height:40px;background:#fff8fd;border-radius:50%}
.pcrow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #0001}.pcrow .av{width:44px;height:44px;flex:none}.pcrow .av svg{width:100%;height:100%}.pcrow b{flex:1;overflow:hidden;text-overflow:ellipsis}.pcrow .st{color:#d49a00;font-size:13px}
.mini{padding:8px 12px;font:700 14px system-ui;border-radius:12px;min-height:40px}
/* ---- grown-up theme (Hard/Expert profiles): calm, minimal, premium ---- */
body.pro{--ink:#22262e}
body.pro .screen,body.pro #home{background:#f4f1ec}
body.pro #home::before{display:none}
body.pro button{border-radius:14px;box-shadow:0 1px 2px #0000001a,0 0 0 1px #00000010;background:#fff}
body.pro button:active{transform:scale(.97);box-shadow:0 0 0 1px #00000018}
body.pro .ib.gold{background:#fff}
body.pro .ib.tool.on,body.pro #tMagic.on{background:#22262e}body.pro .ib.tool.on svg,body.pro #tMagic.on svg{filter:invert(1) grayscale(1) brightness(1.6)}
body.pro .ib svg{width:56%;height:56%}
body.pro .big{animation:none;border-radius:24px;box-shadow:0 2px 10px #0000001f}
body.pro .sw{border:2px solid #fff;box-shadow:0 0 0 1px #0000001f;border-radius:12px}
body.pro .sq{border-radius:10px;box-shadow:0 1px 4px #0000001f}
body.pro .whob,body.pro .avbtn{font-family:"Helvetica Neue",Inter,system-ui,sans-serif}
body.pro{font-family:"Helvetica Neue",Inter,system-ui,sans-serif}
@media (orientation:portrait){body.pro{--b:clamp(46px,12vw,58px)}}
.logoimg{display:block;width:100%;background:#fff;border-radius:28px;padding:4px 10px;box-shadow:0 6px 0 #0001}
.support{margin:14px 0;padding:12px;border-radius:14px;background:#f6f3ff}.support p{margin:0 0 8px;font-size:14px}.supb{display:inline-block;margin:4px 6px 0 0;padding:10px 14px;border-radius:12px;background:#222;color:#fff;text-decoration:none;font-weight:700}
.supb[hidden]{display:none}

.ib,.ring{-webkit-touch-callout:none}#parent,#clear{touch-action:none}
.holdtip{position:fixed;width:220px;padding:10px 12px;border-radius:16px;background:#3b2a4a;color:#fff;font-size:16px;font-weight:800;text-align:center;z-index:20;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s;pointer-events:none}.holdtip.show{opacity:1;transform:scale(1)}

.big{display:flex;flex-direction:column}.big .art{flex:1;min-height:0}.big .tlbl{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);background:#fff;border-radius:999px;padding:4px 14px;font:800 16px system-ui,sans-serif;white-space:nowrap;box-shadow:0 3px 0 #6a3f9a22}
.pchead{position:sticky;top:0;z-index:3;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0 10px;border-bottom:1px solid #0001}.pchead h2{margin:0;font-size:22px}
.donebtn{min-height:48px;min-width:96px;padding:0 16px;font:800 18px system-ui,sans-serif;background:#ff6fb5;color:#fff;border-radius:16px}
.tgrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:4px 0;font-size:17px}.tgrow span{flex:1}
.tog{appearance:none;-webkit-appearance:none;flex:none;width:76px;height:48px;border-radius:999px;background:#d9d2e6;position:relative;margin:0;cursor:pointer;transition:background .2s}
.tog::after{content:"";position:absolute;top:5px;left:5px;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #0003;transition:left .2s}
.tog:checked{background:#5cd65c}.tog:checked::after{left:33px}
.pcrow{min-height:60px}.mini{min-height:48px;min-width:72px;font-size:16px}
#pcLv .lvb{min-height:56px}
.supb{min-height:48px;display:inline-flex!important;align-items:center;gap:6px}.supb small{opacity:.75;font-weight:600}
.danger{margin-top:22px;padding:12px;border:2px solid #f3b4b4;border-radius:16px;background:#fff5f5}.danger h3{margin:0 0 4px;color:#b3261e}.txt.red{background:#d93025;color:#fff;font-weight:800}
#saved{position:fixed;left:50%;top:calc(42% + 100px);transform:translate(-50%,0) scale(0);background:#fff;color:var(--ink);padding:12px 22px;border-radius:999px;font:900 20px system-ui,sans-serif;box-shadow:0 6px 18px #0003;z-index:9;transition:transform .35s cubic-bezier(.3,1.6,.5,1);pointer-events:none;white-space:nowrap}#saved.show{transform:translate(-50%,0) scale(1)}
.gempty{grid-column:1/-1;text-align:center;margin:14vh auto 0;max-width:280px}.gempty .gic{width:140px;margin:0 auto;opacity:.7}.gempty p{font:800 20px system-ui,sans-serif;margin:14px 0}
.ib svg.ring,body.pro .ib svg.ring{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px)}
body.pro .donebtn{background:#22262e;color:#fff}body.pro .txt.red{background:#d93025;color:#fff}
.supb{flex-wrap:wrap;row-gap:0}.supb small{flex-basis:100%;font-size:13px}
.ib svg.ring,body.pro .ib svg.ring{position:absolute;left:-6px;top:-6px;right:auto;bottom:auto;inset:auto;left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px);margin:0;transform:none}
#color .bar.top{padding-top:calc(var(--g) + 10px)}
.corner{bottom:calc(18px + env(safe-area-inset-bottom))}.corner.left{left:calc(18px + env(safe-area-inset-left))}.corner.right{right:calc(18px + env(safe-area-inset-right))}
#color .bar.top{padding-left:calc(var(--g) + 4px + env(safe-area-inset-left));padding-right:calc(var(--g) + 4px + env(safe-area-inset-right))}
.supb[hidden]{display:none!important}
#color .bar.top{padding:calc(var(--g) + 10px) calc(var(--g) + 10px + env(safe-area-inset-right)) var(--g) calc(var(--g) + 10px + env(safe-area-inset-left))}