html{--pink:#f59ac0;--blue:#7cc3f2;--bgl:#fbf8fd;--bgd:#1b1a26;--deco:radial-gradient(900px 400px at 10% -10%,var(--pink-soft),transparent),radial-gradient(900px 400px at 100% 0,var(--blue-soft),transparent),var(--bg)}
html[data-theme=circuit]{--pink:#4ade80;--blue:#22d3ee;--bgl:#eef8f4;--bgd:#0b1816}
html[data-theme=nature]{--pink:#8fd18f;--blue:#f5d68a;--bgl:#f6fbf1;--bgd:#121f17}
html[data-theme=sunset]{--pink:#ffa987;--blue:#c3a6f5;--bgl:#fff6f0;--bgd:#241520}
html[data-theme=galaxy]{--pink:#b9a2ff;--blue:#7fb7ff;--bgl:#f3f1fb;--bgd:#100f23}
html[data-theme=desert]{--pink:#e8b87a;--blue:#e39a85;--bgl:#fcf6ec;--bgd:#241b14}
html{--bg:var(--bgl);--card:#fff;--ink:#35405a;--mute:#6f7a92;--line:color-mix(in srgb,var(--pink) 28%,#fff)}
html[data-mode=dark]{--bg:var(--bgd);--card:color-mix(in srgb,var(--bgd) 88%,#fff);--ink:#eef0f8;--mute:#aab0cc;--line:color-mix(in srgb,var(--bgd) 78%,#fff)}
html{--pink-soft:color-mix(in srgb,var(--pink) 22%,var(--bg));--blue-soft:color-mix(in srgb,var(--blue) 22%,var(--bg))}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--deco);color:var(--ink);font-family:'Nunito',system-ui,sans-serif;line-height:1.6;min-height:100vh}
.wrap{max-width:720px;margin:0 auto;padding:24px 18px 48px}
.logo{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:2rem;letter-spacing:-.5px}
.logo .i,.logo .p{color:#7cc3f2}.logo .f{color:#f59ac0}
h1{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:clamp(1.9rem,6vw,2.8rem);line-height:1.15;margin:36px 0 10px}
.sub{color:var(--mute);margin:0 0 26px;font-size:1.05rem}
.tabs{display:flex;flex-wrap:wrap;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:26px;justify-content:center;padding:6px;margin-bottom:16px}
.tab{flex:0 0 auto;border:0;background:none;border-radius:999px;padding:10px 18px;font:600 1rem 'Nunito',sans-serif;color:var(--mute);cursor:pointer}
.tab[aria-selected=true]{background:var(--pink-soft);color:var(--ink);box-shadow:inset 0 0 0 2px var(--pink)}
.tab[data-mode=d2p][aria-selected=true],.tab[data-mode=split][aria-selected=true],.tab[data-mode=remove][aria-selected=true]{background:var(--blue-soft);box-shadow:inset 0 0 0 2px var(--blue)}
.drop{background:var(--card);border:2px dashed var(--pink);border-radius:28px;padding:44px 20px;text-align:center;cursor:pointer;transition:background .2s}
.drop.blue{border-color:var(--blue)}.drop.over{background:var(--pink-soft)}.drop.blue.over{background:var(--blue-soft)}
.drop:focus-visible,.tab:focus-visible,.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.drop b{font-family:'Fredoka',sans-serif;font-size:1.3rem;font-weight:500;display:block;margin:8px 0 2px}
.drop span{color:var(--mute);font-size:.95rem}
.ico{font-size:2.4rem}
.btn{display:inline-block;border:0;border-radius:999px;padding:14px 28px;font:700 1.05rem 'Nunito',sans-serif;background:var(--pink);color:#3a1730;cursor:pointer;text-decoration:none;margin-top:14px}
.btn.blue{background:var(--blue);color:#102b44}
.panel{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px;margin-top:16px;text-align:center}
.bar{height:10px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--blue));transition:width .25s}
.err{color:#c0394f;font-weight:600}
.hide{display:none}
.rng{width:100%;max-width:320px;border:2px solid var(--blue);border-radius:999px;padding:12px 18px;font:600 1rem Nunito,sans-serif;background:var(--bg);color:var(--ink);text-align:center}
.notes{margin-top:30px;color:var(--mute);font-size:.92rem}
.notes p{margin:6px 0}
.info{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:6px 22px 14px;margin-top:16px}
.info h2{font-family:'Fredoka',sans-serif;font-weight:500;font-size:1.25rem;margin:14px 0 4px}
.info p{margin:0;color:var(--mute)}
footer a{color:var(--pink);font-weight:700;text-decoration:none}
footer{margin-top:30px;color:var(--mute);font-size:.85rem;text-align:center}

.tab{text-decoration:none;text-align:center;display:block}
a.logo{text-decoration:none;display:inline-block}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:24px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;text-decoration:none;color:var(--ink)}
.card b{font-family:'Fredoka',sans-serif;font-weight:500;font-size:1.15rem;display:block}.card span{color:var(--mute);font-size:.95rem}
.card:hover{border-color:var(--pink)}
.prose{margin-top:34px}.prose h2{font-family:'Fredoka',sans-serif;font-weight:500;font-size:1.3rem;margin:22px 0 6px}
.prose p,.prose li{color:var(--mute)}.prose ol{padding-left:22px}.prose a{color:var(--pink);font-weight:700}

.tool{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:20px;margin-top:16px;text-align:left}
.tool h3{margin:0 0 8px;font-family:'Fredoka',sans-serif;font-weight:500;font-size:1.15rem}.tool small{color:var(--mute);font-family:'Nunito',sans-serif}
.frow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;margin-bottom:8px;background:var(--bg)}
.frow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.frow .rw{flex:1;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ib{border:0;background:var(--blue-soft);color:var(--ink);border-radius:10px;width:36px;height:36px;cursor:pointer;font-size:1rem;flex:none}.ib:disabled{opacity:.35;cursor:default}
.num{width:84px;border:2px solid var(--blue);border-radius:12px;padding:8px;font:600 1rem 'Nunito',sans-serif;background:var(--card);color:var(--ink);text-align:center}
.acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}.acts .btn{margin-top:6px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin-top:10px;max-height:60vh;overflow:auto;padding:4px}
.pg{position:relative;border:2px solid var(--line);border-radius:12px;background:#fff;padding:4px;cursor:pointer}
.pg canvas{width:100%;height:auto;display:block;border-radius:6px}
.pg .n{position:absolute;left:8px;bottom:8px;background:rgba(53,64,90,.85);color:#fff;border-radius:8px;font:700 .75rem Nunito,sans-serif;padding:1px 8px}
.pg.sel{border-color:#e5484d}.pg.sel canvas{opacity:.3}
.pg.sel::after{content:'✕';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#e5484d;font-size:4rem;font-weight:700}
.btn.ghost{background:transparent;border:2px solid var(--line);color:var(--ink)}

.wrap{position:relative}
.ctl{position:absolute;top:24px;right:18px;display:flex;gap:8px;align-items:flex-start}
.tw{position:relative}
.cb{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 14px;font:700 .9rem 'Nunito',sans-serif;cursor:pointer;white-space:nowrap}
.cb:focus-visible,.tmenu button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.tmenu{position:absolute;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:8px;min-width:200px;box-shadow:0 12px 30px rgba(0,0,0,.18);z-index:50}
.tmenu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:var(--ink);padding:9px 10px;border-radius:12px;font:600 .95rem 'Nunito',sans-serif;cursor:pointer;text-align:left}
.tmenu button:hover,.tmenu button[aria-pressed=true]{background:var(--pink-soft)}
.tmenu i{width:22px;height:22px;border-radius:50%;flex:none;border:1px solid var(--line)}
@media(max-width:480px){.cb .lbl{display:none}.cb{padding:9px 12px}}
html[data-theme=circuit]{--l1:#e4f8f0;--l2:#b9ecd6;--d1:#03110e;--d2:#0b2b24}
html[data-theme=nature]{--l1:#d7efff;--l2:#e4f6cf;--d1:#08182a;--d2:#123626}
html[data-theme=sunset]{--l1:#ffe0c2;--l2:#f9b4cf;--d1:#1f0c33;--d2:#7a2f5f}
html[data-theme=galaxy]{--l1:#e9e3fc;--l2:#c4d4fa;--d1:#05040f;--d2:#1c1146}
html[data-theme=desert]{--l1:#ffeccb;--l2:#f4c995;--d1:#1a0f1e;--d2:#55291f}
html:not([data-theme=flirt]){--c1:var(--l1);--c2:var(--l2);--deco:linear-gradient(180deg,var(--c1),var(--c2));--mute:#505b75}
html:not([data-theme=flirt])[data-mode=dark]{--c1:var(--d1);--c2:var(--d2);--mute:#c0c6e0}
html{--star:var(--pink)}html[data-mode=dark]{--star:#fff}
.scene{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.scene *{transform-box:fill-box;transform-origin:center}
.sp{fill:var(--pink)}.sb{fill:var(--blue)}.sg{fill:color-mix(in srgb,var(--pink) 50%,#14502a)}.sg2{fill:color-mix(in srgb,var(--pink) 30%,#0f4021)}.sd{fill:color-mix(in srgb,var(--blue) 45%,#2a1040)}.sx{fill:color-mix(in srgb,var(--pink) 55%,#6b3e1c)}.sc{fill:color-mix(in srgb,var(--pink) 35%,#2f6b3a)}
.lp{fill:none;stroke:var(--pink)}.lb{fill:none;stroke:var(--blue)}.li{fill:none;stroke:var(--ink)}
.st{fill:var(--star);animation:tw 3s ease-in-out infinite}@keyframes tw{0%,100%{opacity:.2}50%{opacity:1}}
.flow{stroke-dasharray:16 240;animation:flow 7s linear infinite;filter:drop-shadow(0 0 5px var(--blue))}@keyframes flow{to{stroke-dashoffset:-1000}}
.lf{animation:fall 16s linear infinite}@keyframes fall{from{transform:translate(0,-80px) rotate(0)}to{transform:translate(160px,900px) rotate(540deg)}}
.cl{animation:drift 60s linear infinite alternate}@keyframes drift{to{transform:translateX(120px)}}
.shoot{animation:shoot 7s linear infinite;opacity:0}@keyframes shoot{0%{transform:translate(0,0);opacity:0}4%{opacity:1}12%{transform:translate(-320px,180px);opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.scene *{animation:none!important}}
.tag{margin:6px 0 0;padding-right:0;color:var(--mute);font-weight:700;font-size:.95rem;max-width:62%}
@media(min-width:560px){.tag{max-width:none}}

.drop{transition:background .2s,box-shadow .2s,transform .2s}
.drop.over{box-shadow:0 0 0 6px var(--pink-soft),0 16px 40px rgba(0,0,0,.14);transform:scale(1.015)}
.more{margin-top:16px;color:var(--mute);font-size:.95rem}.more a{color:var(--ink);font-weight:700;margin:0 2px}
.prose ul{padding-left:22px}
.fl{display:flex;flex-direction:column;gap:18px;margin-top:6px}
.tool label{display:block;font-weight:700;margin:12px 0 6px}
.tool input[type=text],.tool textarea{width:100%;border:2px solid var(--line);border-radius:14px;padding:11px 14px;font:600 1rem 'Nunito',sans-serif;background:var(--bg);color:var(--ink)}
.tool textarea{resize:vertical}
.cnt{float:right;color:var(--mute);font-weight:600;font-size:.85rem}
.dgrid{display:flex;flex-wrap:wrap;gap:8px}
.dsw{border:3px solid transparent;border-radius:14px;padding:9px 14px;font:700 .85rem 'Nunito',sans-serif;cursor:pointer}
.dsw[aria-pressed=true]{border-color:var(--ink)}
.fprev{display:flex;justify-content:center}
.fprev canvas{width:100%;max-width:420px;height:auto;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.2)}
.grid .hero{grid-column:1/-1;justify-self:center;width:100%;max-width:460px;text-align:center;padding:22px 20px;border:2px solid var(--pink);background:linear-gradient(135deg,color-mix(in srgb,var(--pink) 28%,var(--card)),color-mix(in srgb,var(--blue) 28%,var(--card)));box-shadow:0 10px 30px color-mix(in srgb,var(--pink) 40%,transparent);animation:glow 3s ease-in-out infinite}
.hero::before{content:'💗';display:block;font-size:1.7rem;line-height:1.2}
.hero b{font-size:1.5rem;background:linear-gradient(90deg,color-mix(in srgb,var(--pink) 55%,var(--ink)),color-mix(in srgb,var(--blue) 55%,var(--ink)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero span{color:var(--ink);opacity:.85;margin-top:4px;display:block}
@keyframes glow{50%{box-shadow:0 12px 40px color-mix(in srgb,var(--pink) 70%,transparent)}}
@media(prefers-reduced-motion:reduce){.grid .hero{animation:none}}
.tab[data-mode=flirty]{font-weight:800;color:color-mix(in srgb,var(--pink) 55%,var(--ink))}

.tab{padding:8px 14px;font-size:.92rem}
.grab{cursor:grab;touch-action:none;user-select:none}.drag{opacity:.55;outline:2px dashed var(--pink)}
.th{width:44px;height:44px;object-fit:cover;border-radius:8px;flex:none}
.opts{display:flex;flex-wrap:wrap;gap:10px 16px;margin:10px 0}.opts label{display:flex;flex-direction:column;font-weight:700;font-size:.9rem;margin:0}
.opts .wide{flex:1 1 100%}.opts .ck{flex-direction:row;align-items:center;gap:8px}
.tool select{border:2px solid var(--line);border-radius:12px;padding:9px 10px;font:600 1rem 'Nunito',sans-serif;background:var(--bg);color:var(--ink);margin-top:4px}
.pgc{position:relative;border:2px solid var(--line);border-radius:12px;background:var(--card);padding:6px}
.pth{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;overflow:hidden}
.pth canvas{max-width:100%;max-height:100%;transition:transform .2s}
.pgc .n{position:absolute;left:10px;top:10px;background:rgba(53,64,90,.85);color:#fff;border-radius:8px;font:700 .75rem 'Nunito',sans-serif;padding:1px 8px}
.pgb{display:flex;gap:4px;justify-content:center;margin-top:6px;flex-wrap:wrap}.pgb .ib{width:30px;height:30px}
.pgc.gone .pth{opacity:.3}.pgc.gone::after{content:'✕';position:absolute;left:0;right:0;top:0;height:calc(100% - 44px);display:flex;align-items:center;justify-content:center;color:#e5484d;font-size:3.5rem;font-weight:700;pointer-events:none}
html[dir=rtl] .ctl{right:auto;left:18px}html[dir=rtl] .tmenu{right:auto;left:0}html[dir=rtl] .tool{text-align:right}

.wrap{padding-bottom:88px}
.fbbtn{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;border:0;border-radius:999px;padding:11px 16px;font:700 .95rem 'Nunito',sans-serif;background:var(--pink);color:#3a1730;box-shadow:0 8px 24px rgba(0,0,0,.22);cursor:pointer}
.fbmodal{position:fixed;left:0;top:0;right:0;bottom:0;z-index:100;background:rgba(20,20,35,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.fbmodal.hide{display:none}
.fbcard{background:var(--card);color:var(--ink);border-radius:24px;padding:20px;width:100%;max-width:440px;max-height:90vh;overflow:auto;position:relative;text-align:left}
.fbcard h3{margin:0 0 6px;font-family:'Fredoka',sans-serif;font-weight:500;font-size:1.3rem}
.fbcard select,.fbcard textarea,.fbcard input[type=email]{width:100%;border:2px solid var(--line);border-radius:14px;padding:10px 12px;font:600 1rem 'Nunito',sans-serif;background:var(--bg);color:var(--ink)}
.fbcard .lb{display:block;font-weight:700;margin:10px 0 4px}
.fbnote{min-height:1.2em;color:#c0394f;font-weight:600;margin:8px 0 0}.fbnote.ok{color:#2f8f5b}
html[dir=rtl] .fbbtn{right:auto;left:16px}html[dir=rtl] .fbcard{text-align:right}

.thwrap{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-top:8px}
.thprev{width:190px;max-width:100%;height:auto;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);flex:none}
.thside{flex:1 1 220px;min-width:0}.thside>label{display:block;font-weight:700;margin:0 0 6px}
.tab[data-mode=theme]{font-weight:800;color:color-mix(in srgb,var(--pink) 55%,var(--ink))}

.hfi{border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:10px;background:var(--bg)}
.hft{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hfr{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.hfh{margin:-4px 0 6px;font-size:.9rem}
.hfi .opts label span{font-weight:700}
.hfi .hftx{width:100%;border:2px solid var(--line);border-radius:12px;padding:9px 12px;font:600 1rem 'Nunito',sans-serif;background:var(--bg);color:var(--ink);margin-top:4px}

.logo .logo-img{height:2.2rem;width:auto;vertical-align:middle;margin-right:.45rem;margin-top:-.2rem;background:none}