*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{position:fixed;inset:0;overflow:hidden;font-family:Zen Maru Gothic,Hiragino Maru Gothic ProN,sans-serif;background:radial-gradient(120% 120% at 50% 32%,#fff,#f3f5f8 52%,#e2e7ee);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}body:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(115% 115% at 50% 45%,transparent 58%,rgba(196,206,219,.4) 100%)}#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}#menuBtn{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:calc(env(safe-area-inset-left,0px) + 12px);display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(176,187,203,.45);border-radius:999px;background:#ffffffb3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 16px #606e841f;color:#6b7686;cursor:pointer;transition:transform .16s,background .2s;z-index:12}#menuBtn svg{width:20px;height:20px;fill:currentColor}#menuBtn:active{transform:scale(.94)}#menuBtn.on{background:#5b739129}#menu{position:fixed;top:calc(env(safe-area-inset-top,0px) + 58px);left:calc(env(safe-area-inset-left,0px) + 12px);display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid rgba(176,187,203,.45);border-radius:20px;background:#ffffffeb;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 32px #505e7438;transform-origin:0 0;transform:translateY(-8px) scale(.92);opacity:0;pointer-events:none;transition:transform .24s cubic-bezier(.2,.9,.3,1),opacity .18s;z-index:11}#menu.open{transform:none;opacity:1;pointer-events:auto}.menuOpt{display:flex;align-items:center;gap:8px;padding:11px 16px 11px 12px;border:0;border-radius:14px;background:transparent;color:#5d6878;font-family:inherit;font-size:14.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:transform .16s,background .16s}.menuOpt:active{transform:scale(.96);background:#5b73911f}.menuOpt svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none}#toolbox{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);left:50%;transform:translate(-50%);width:max-content;max-width:calc(100vw - 24px);display:flex;align-items:center;gap:8px;z-index:10}#done{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:calc(env(safe-area-inset-left,0px) + 60px);display:flex;align-items:center;justify-content:center;height:38px;gap:6px;padding:0 16px;border:1px solid transparent;border-radius:999px;font-family:inherit;font-size:13.5px;cursor:pointer;transition:transform .16s;z-index:10}#done:active{transform:scale(.96)}#done svg{width:16px;height:16px;stroke:currentColor;fill:none}#modes{display:flex;gap:4px;padding:4px;border-radius:999px;background:#ffffffb3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(176,187,203,.45);box-shadow:0 4px 16px #606e841f;z-index:10}.mode{display:flex;align-items:center;gap:5px;padding:8px 14px;border:0;border-radius:999px;background:transparent;color:#6b7686;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .18s,color .18s}.mode svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.6;fill:none}.mode.on{background:#5b7391;color:#fff;box-shadow:0 2px 8px #465a764d}#mode-paint.on{background:#8b7bb8;box-shadow:0 2px 8px #7060a04d}#mode-del.on{background:#d97b6c;box-shadow:0 2px 8px #b45a4a4d}#color-btn{display:grid;place-items:center;width:43px;height:43px;padding:0;border:1px solid rgba(176,187,203,.45);border-radius:999px;background:#ffffffb3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 16px #606e841f;cursor:pointer;transition:transform .16s}#color-btn:active{transform:scale(.94)}#color-now{display:block;width:25px;height:25px;overflow:visible}#color-now .f-top{fill:var(--c-top, #ffffff)}#color-now .f-left{fill:var(--c-left, #d9d9d9)}#color-now .f-right{fill:var(--c-right, #b3b3b3)}#color-now path{fill:none;stroke:#58647880;stroke-width:1.3}#palette-modal{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:#e2e7ee8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:30;animation:paletteFade .16s ease-out}#palette-modal[hidden]{display:none}#palette-card{width:min(86vw,300px);max-height:100%;overflow-y:auto;padding:18px 22px 22px;border-radius:26px;background:#fffffff2;border:1px solid rgba(176,187,203,.45);box-shadow:0 14px 40px #505e743d;animation:paletteRise .2s cubic-bezier(.2,.9,.3,1)}#palette-title{margin-bottom:13px;color:#5d6878;font-size:15px;font-weight:900;text-align:center}#pal-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:14px;padding:3px;border-radius:999px;background:#e2e7eebf}.pal-tab{padding:6px 2px;border:0;border-radius:999px;background:transparent;color:#7b8697;font-family:inherit;font-size:11.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .16s,color .16s}.pal-tab.on{background:#fff;color:#4e5b6d;box-shadow:0 1px 3px #606e8438}.pal-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pal-group[hidden]{display:none}.chip{aspect-ratio:1;padding:0;border:0;border-radius:9px;background:var(--c);cursor:pointer;box-shadow:inset 0 4px 7px #ffffff8c,inset 0 -6px 10px #00000029,0 0 0 1px #96a2b473,0 2px 5px #606e8433;transition:transform .16s,box-shadow .16s}.chip.on{box-shadow:inset 0 4px 7px #ffffff8c,inset 0 -6px 10px #00000029,0 0 0 3px #5b7391,0 3px 9px #465a764d}.chip:active{transform:scale(.93)}@keyframes paletteFade{0%{opacity:0}}@keyframes paletteRise{0%{opacity:0;transform:translateY(10px) scale(.96)}}@media(max-width:400px){.mode{padding:7px 10px;gap:4px;font-size:12.5px}.mode svg{width:14px;height:14px}#color-btn{width:39px;height:39px}#color-now{width:23px;height:23px}#menuBtn{width:36px;height:36px}#done{height:36px;left:calc(env(safe-area-inset-left,0px) + 56px);padding:0 13px;font-size:12.5px}#menu{top:calc(env(safe-area-inset-top,0px) + 56px)}#count{font-size:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 64px)}#count svg{width:16px;height:16px}}@media(max-height:520px){#palette-modal{padding:12px}#palette-card{width:min(86vw,240px);padding:12px 14px 14px;border-radius:20px}#palette-title{margin-bottom:9px;font-size:13px}#pal-tabs{margin-bottom:10px;gap:2px}.pal-tab{padding:5px 1px;font-size:10px}.pal-group{gap:8px}.chip{border-radius:8px}}#count{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 68px);right:calc(env(safe-area-inset-right,0px) + 18px);display:flex;align-items:center;gap:6px;color:#7c8797;font-size:16px;font-weight:900;z-index:10;pointer-events:none}#count svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}#count-num{min-width:1.2em;text-align:right;font-variant-numeric:tabular-nums}#hint{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 100px);left:50%;transform:translate(-50%);max-width:min(92vw,460px);padding:8px 16px;border-radius:999px;background:#ffffffd1;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(176,187,203,.4);box-shadow:0 4px 16px #606e841f;color:#5d6878;font-size:13.5px;font-weight:700;text-align:center;opacity:1;transition:opacity .6s;pointer-events:none;z-index:10}#hint.hide{opacity:0}#nowebgl{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:#f4f6f9;color:#5d6878;font-size:16px;font-weight:700;text-align:center;z-index:40}#nowebgl[hidden]{display:none}#done{background:linear-gradient(#7d9ab8,#5b7391);box-shadow:0 4px 14px #465a7657;color:#fff;font-weight:900;white-space:nowrap}#done svg{stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#doneModal{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:#e2e7ee8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:30;animation:paletteFade .16s ease-out}#doneModal[hidden]{display:none}.dm-card{width:min(86vw,320px);padding:20px 20px 14px;border-radius:26px;background:#fffffff5;border:1px solid rgba(176,187,203,.45);box-shadow:0 14px 40px #505e743d;text-align:center;animation:paletteRise .2s cubic-bezier(.2,.9,.3,1)}.dm-title{margin-bottom:14px;color:#5d6878;font-size:16px;font-weight:900}.dm-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-bottom:9px;padding:13px 16px;border:0;border-radius:18px;background:linear-gradient(#7d9ab8,#5b7391);box-shadow:0 3px 10px #465a7647;color:#fff;font-family:inherit;font-size:15px;font-weight:900;cursor:pointer;transition:transform .16s}.dm-btn:active{transform:scale(.97)}.dm-btn:disabled{opacity:.5}.dm-btn[hidden]{display:none}.dm-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linejoin:round;fill:none}.dm-btn.ghost{background:#ffffffe6;border:1px solid rgba(176,187,203,.55);box-shadow:none;color:#6b7686}.dm-btn.ghost.danger{border-color:#ce969680;color:#b07272}.dm-note{margin:-2px 0 6px;color:#9aa4b3;font-size:11.5px;font-weight:700;line-height:1.4}#keepModal,#cardModal{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:#e2e7ee8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:32;animation:paletteFade .16s ease-out}#keepModal[hidden],#cardModal[hidden]{display:none}.dm-cancel{padding:9px 14px;border:0;background:transparent;color:#8d97a7;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer}#title{position:fixed;inset:auto 0 0;display:flex;justify-content:center;padding:0 20px calc(env(safe-area-inset-bottom,0px) + 34px);pointer-events:none;z-index:20}#title[hidden]{display:none}#title-btns{display:flex;gap:10px;pointer-events:auto}#title.boot #title-btns{animation:titleRise .5s 1.25s backwards cubic-bezier(.2,.9,.3,1)}.t-btn{padding:14px 26px;border:1px solid rgba(176,187,203,.5);border-radius:999px;background:#ffffffdb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 20px #606e842e;color:#4e5b6d;font-family:inherit;font-size:16px;font-weight:900;cursor:pointer;transition:transform .16s}.t-btn:active{transform:scale(.96)}.t-btn[hidden]{display:none}#t-new{border-color:transparent;background:linear-gradient(#7d9ab8,#5b7391);box-shadow:0 6px 20px #465a7657;color:#fff}@keyframes titleRise{0%{opacity:0;transform:translateY(14px)}}body.titling #menuBtn,body.titling #done,body.titling #toolbox,body.titling #count,body.titling #hint{opacity:0;pointer-events:none}#menuBtn,#done,#toolbox,#count{transition:opacity .45s}#gallery{position:fixed;inset:0;display:flex;flex-direction:column;background:#f0f3f7f0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:25;animation:paletteFade .18s ease-out}#gallery[hidden]{display:none}#gl-head{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 12px) 12px 10px;padding-right:58px}#gl-back{display:flex;align-items:center;gap:3px;padding:8px 14px 8px 10px;border:1px solid rgba(176,187,203,.45);border-radius:999px;background:#fffc;color:#6b7686;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer}#gl-back:active{transform:scale(.96)}#gl-back svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none}#gl-title{color:#5d6878;font-size:15px;font-weight:900}#gl-grid{flex:1;align-content:start;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 14px 14px}.gl-card{position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;padding:0;border:1px solid rgba(176,187,203,.45);border-radius:18px;background:#fff;box-shadow:0 3px 10px #606e8424;overflow:hidden;cursor:pointer;transition:transform .5s cubic-bezier(.3,.9,.3,1),box-shadow .16s}.gl-card.hold{transform:scale(.9)}.gl-thumb{display:block;pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none;width:100%;aspect-ratio:1;object-fit:cover}.gl-noimg{display:grid;place-items:center;background:radial-gradient(120% 120% at 50% 32%,#fff,#e6eaf0)}.gl-noimg svg{width:42%;height:42%;stroke:#b6c0cd;stroke-width:1.4;stroke-linejoin:round;fill:none}.gl-n{position:absolute;right:6px;bottom:6px;display:flex;align-items:center;gap:4px;padding:3px 8px 3px 6px;border-radius:999px;background:#ffffffdb;color:#6b7686;font-size:11.5px;font-weight:900;font-variant-numeric:tabular-nums}.gl-n svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;fill:none}#gl-empty{padding:40px 20px;color:#8d97a7;font-size:14px;font-weight:700;text-align:center}#gl-empty[hidden]{display:none}#gl-note{padding:0 20px calc(env(safe-area-inset-bottom,0px) + 14px);color:#9aa4b3;font-size:12px;font-weight:700;text-align:center}#gl-note[hidden]{display:none}