:root{--acc:#7c5cff;--pink:#ff4fa3;--ink:#2a2350;--panel:rgba(255,255,255,.82);--cell:52px;--tb:52px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);
 background:radial-gradient(1200px 700px at 10% -10%,#ffd9f0 0,transparent 60%),radial-gradient(1000px 700px at 110% 10%,#d4ecff 0,transparent 60%),radial-gradient(900px 700px at 50% 120%,#e3dcff 0,transparent 60%),#fff7fb;
 position:fixed;inset:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#bgdots{position:fixed;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(#ffb5dc 2px,transparent 2.5px),radial-gradient(#b8dcff 2px,transparent 2.5px);background-size:46px 46px,46px 46px;background-position:0 0,23px 23px}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
.hidden{display:none!important}
.screen{position:absolute;inset:0}
/* Picker */
#picker{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(14px + env(safe-area-inset-top)) 16px calc(30px + env(safe-area-inset-bottom));touch-action:pan-y}
.phead{display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto}
.logo{display:flex;align-items:center;gap:12px}
.logo-badge{width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,#7c5cff,#ff4fa3);display:grid;place-items:center;box-shadow:0 8px 22px rgba(124,92,255,.35)}
.logo-badge svg{width:46px;height:46px}
h1{margin:0;font-size:clamp(26px,4.4vw,44px);font-weight:900;letter-spacing:-.5px;line-height:1;background:linear-gradient(90deg,#7c5cff,#ff4fa3 50%,#ff9b2f);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{display:inline-block;margin-top:5px;font-weight:800;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:#fff;background:#2a2350;border-radius:999px;padding:3px 12px}
.tag{max-width:1180px;margin:16px auto 14px;font-size:clamp(17px,2.2vw,22px);font-weight:700;color:#5a4f86}
#grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.sechead{grid-column:1/-1;margin:14px 2px 0;font-size:clamp(19px,2.4vw,24px);font-weight:900;color:#2a2350;display:flex;align-items:center;gap:8px}
.sechead span{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#ffd60a,#ff9b2f);font-size:20px;box-shadow:0 4px 12px rgba(255,155,47,.35)}
.pcard{position:relative;background:#fff;border-radius:24px;padding:10px 10px 12px;box-shadow:0 10px 28px rgba(60,40,140,.12),0 0 0 1px rgba(124,92,255,.08);text-align:center;transition:transform .15s,box-shadow .15s}
.pcard:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 18px 36px rgba(60,40,140,.2),0 0 0 3px #ffd1ea}
.pcard:active{transform:scale(.97)}
.pcard img{width:100%;aspect-ratio:1;border-radius:16px;display:block;background:#fff;border:1px solid #eee}
.pcard .nm{margin-top:9px;font-weight:800;font-size:16px}
.pcard .chip{position:absolute;top:16px;right:16px;background:linear-gradient(90deg,#7c5cff,#ff4fa3);color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:4px 10px;box-shadow:0 4px 10px rgba(255,79,163,.35)}
.pcard.free .fimg{width:100%;aspect-ratio:1;border-radius:16px;display:grid;place-items:center;background:conic-gradient(from 0deg,#ff6b6b,#ffd60a,#46d17a,#3fb8ff,#7c5cff,#ff4fa3,#ff6b6b);}
.pcard.free .fimg div{width:62%;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:40px;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.round{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 6px 16px rgba(60,40,140,.15)}
.round svg,.tb svg{width:26px;height:26px}
/* Editor */
#editor{display:grid;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.bar{display:flex;align-items:center;gap:8px;padding:8px 10px}
.ttl{font-weight:900;font-size:20px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.acts{display:flex;gap:8px}
.tb{min-width:var(--tb);height:var(--tb);border-radius:16px;background:#fff;display:grid;place-items:center;box-shadow:0 4px 12px rgba(60,40,140,.13);color:var(--ink)}
.tb:active,.tool:active,.sw:active,.stk:active{transform:scale(.92)}
.tb:disabled{opacity:.35}
.tb.save{background:linear-gradient(135deg,#3fb8ff,#7c5cff);color:#fff}
.tb.done{background:linear-gradient(135deg,#ff4fa3,#ff9b2f);color:#fff;font-weight:900;padding:0 16px;font-size:18px}
.tb.on{background:#2a2350;color:#fff}
.panel{background:var(--panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:24px;box-shadow:0 10px 30px rgba(60,40,140,.12);padding:8px}
.toolset{display:grid;gap:6px}
.tool{width:var(--cell);height:var(--cell);border-radius:16px;background:#fff;display:grid;place-items:center;position:relative;box-shadow:0 2px 6px rgba(60,40,140,.1)}
.tool svg{width:60%;height:60%}
.tool.on{background:linear-gradient(135deg,#7c5cff,#ff4fa3);color:#fff;box-shadow:0 6px 16px rgba(124,92,255,.45)}
.sizes{display:grid;gap:6px;margin-top:6px}
.sz{width:var(--cell);height:var(--cell);border-radius:16px;background:#fff;display:grid;place-items:center}
.sz i{display:block;border-radius:50%;background:var(--ink)}
.sz.on{box-shadow:0 0 0 3px var(--acc) inset}
#stage{min-width:0;min-height:0;position:relative;overflow:hidden}
#cvwrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 16px 44px rgba(60,40,140,.22),0 0 0 6px #fff}
#cv,#fx{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
#fx{pointer-events:none}
#side{min-width:0;min-height:0}
#palette,#stickers{display:grid;gap:7px;justify-content:center;align-content:start}
.sw{width:var(--cell);height:var(--cell);border-radius:50%;position:relative;box-shadow:0 3px 8px rgba(0,0,0,.15),inset 0 -4px 0 rgba(0,0,0,.12)}
.sw.white{box-shadow:0 0 0 2px #ddd inset,0 3px 8px rgba(0,0,0,.12)}
.sw.on{transform:scale(1.08);box-shadow:0 0 0 4px #fff,0 0 0 7px var(--ink)}
.sw.rainbow{background:conic-gradient(#ff3b30,#ff9500,#ffd60a,#34c759,#0a84ff,#5856d6,#af52de,#ff3b30)}
.stk{width:var(--cell);height:var(--cell);border-radius:16px;background:#fff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(60,40,140,.1)}
.stk img{width:78%;height:78%}
.stk.on{box-shadow:0 0 0 3px var(--acc)}
/* portrait */
#editor.portrait{grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr)}
#editor.portrait .sz:not(.on){display:none}
#editor.portrait #topbar{grid-row:1}
#editor.portrait #stage{grid-row:2;padding:4px 8px}
#editor.portrait #tools{grid-row:3;margin:6px 8px 0;display:flex;gap:6px;justify-content:center;align-items:center;padding:6px;border-radius:20px;overflow-x:auto}
#editor.portrait .toolset{grid-auto-flow:column}
#editor.portrait .sizes{grid-auto-flow:column;margin:0 0 0 4px;padding-left:8px;border-left:2px solid #eee}
#editor.portrait #side{grid-row:4;margin:6px 8px 8px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;padding:8px 8px}
#editor.portrait #palette,#editor.portrait #stickers{grid-auto-flow:column;grid-template-rows:repeat(var(--rows),var(--cell));justify-content:start;width:max-content;margin:0 auto}
#editor.portrait .tb{--tb:44px;border-radius:14px}
#editor.portrait .tb.done{padding:0 12px;font-size:16px}
#editor.portrait .bar{padding:8px 8px 4px;gap:5px}
#editor.portrait .ttl{display:none}
#editor.portrait .acts{flex:1;justify-content:flex-end;gap:5px}
/* landscape */
#editor.land{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr)}
#editor.land #topbar{grid-column:1/4}
#editor.land #tools{grid-row:2;grid-column:1;margin:4px 0 14px 14px;align-self:center;overflow-y:auto;max-height:100%}
#editor.land #stage{grid-row:2;grid-column:2;padding:6px 14px 16px}
#editor.land #side{grid-row:2;grid-column:3;margin:4px 14px 14px 0;align-self:center;overflow-y:auto;max-height:100%;padding:12px}
#editor.land #palette,#editor.land #stickers{grid-template-columns:repeat(var(--cols),var(--cell))}
#editor.land .toolset{grid-template-columns:repeat(var(--tcols),var(--cell))}
#editor.land .sizes{grid-template-columns:repeat(var(--tcols),var(--cell));padding-top:6px;border-top:2px solid #eee}
/* short landscape (phones) : no top bar */
#editor.short{grid-template-rows:minmax(0,1fr)}
#editor.short #topbar{display:none}
#editor.short #tools,#editor.short #stage,#editor.short #side{grid-row:1}
#editor.short #tools{margin:8px 0 8px 8px;padding:6px}
#editor.short #side{margin:8px 8px 8px 0;padding:8px}
#editor.short #stage{padding:8px}
#editor.short .acts2{display:grid;grid-template-columns:repeat(var(--tcols),var(--cell));gap:6px;margin-bottom:6px;padding-bottom:6px;border-bottom:2px solid #eee}
#editor.short .acts2 .tb{min-width:0;width:var(--cell);height:var(--cell);border-radius:16px;padding:0;font-size:13px}
.selbox{position:absolute;pointer-events:none}
/* modal */
.modal{position:fixed;inset:0;background:rgba(30,20,70,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;z-index:20;padding:16px}
.card{background:#fff;border-radius:28px;padding:22px;max-width:min(520px,94vw);max-height:92vh;overflow:auto;text-align:center;box-shadow:0 30px 80px rgba(30,20,70,.35);animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.card h2{margin:4px 0 8px;font-size:30px;font-weight:900;background:linear-gradient(90deg,#7c5cff,#ff4fa3,#ff9b2f);-webkit-background-clip:text;background-clip:text;color:transparent}
.card p{margin:6px 0 12px;color:#5a4f86;font-weight:700}
.card img.prev{width:min(340px,70vw,48vh);aspect-ratio:1;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.15);-webkit-touch-callout:default;user-select:auto;-webkit-user-select:auto}
.btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.big{min-height:54px;padding:0 22px;border-radius:999px;font-weight:900;font-size:18px;background:#f1edff;color:var(--ink);display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.big.pri{background:linear-gradient(135deg,#7c5cff,#ff4fa3);color:#fff;box-shadow:0 8px 20px rgba(124,92,255,.4)}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#2a2350;color:#fff;font-weight:800;padding:12px 20px;border-radius:999px;z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:pop .3s}

#editor.land:not(.short) .tool,#editor.land:not(.short) .stk{border-radius:20px}
#editor.land:not(.short) #tools,#editor.land:not(.short) #side{padding:12px;border-radius:28px}
#editor.land:not(.short) .bar{padding:12px 18px 6px}
#editor.land:not(.short) .ttl{font-size:24px}
@media (hover:hover){.tool:hover,.tb:hover,.stk:hover{transform:translateY(-2px)}.sw:hover{transform:scale(1.08)}}

/* ---------- words tool ---------- */
@font-face{font-family:'Amatic SC';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/AmaticSC-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:'Amatic SC';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/AmaticSC-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Bungee';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Bungee-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Fredoka-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Fredoka-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Pacifico';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Pacifico-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/Rubik-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/Rubik-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Secular One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/SecularOne-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:'Secular One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/SecularOne-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
.tool .aa{display:flex;align-items:center;font-weight:900;font-size:21px;letter-spacing:-.5px;line-height:1}
.tool .aa i{font-style:normal;font-size:17px;margin-right:2px}
.tool.txtool{width:auto;min-width:max(58px,var(--cell));height:max(56px,var(--cell));padding:0 7px}
#editor.portrait .tool,#editor.portrait .sz{width:var(--tcell,var(--cell));height:var(--tcell,var(--cell))}
#editor.portrait .tool.txtool{width:auto;min-width:58px;height:58px}
#editor.land .tool.txtool{grid-column:1/-1;width:auto;min-width:0}
.txsheet{position:fixed;left:50%;top:8px;transform:translateX(-50%);width:min(580px,calc(100vw - 16px));max-height:calc(100% - 16px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:#fff;border-radius:24px;box-shadow:0 20px 60px rgba(30,20,70,.35),0 0 0 3px #e9e2ff;z-index:25;padding:10px 12px 12px;animation:pop .25s}
.txhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:19px}
.txx{width:44px;height:44px;border-radius:50%;background:#f1edff;font-size:20px;font-weight:900}
.txrow{display:flex;gap:8px;align-items:stretch}
.txrow textarea{flex:1;min-width:0;min-height:56px;max-height:120px;font:800 22px/1.25 inherit;font-family:inherit;color:var(--ink);border:3px solid #e4ddff;border-radius:16px;padding:12px 14px;resize:none;outline:none;background:#fbfaff;user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}
.txrow textarea:focus{border-color:var(--acc);background:#fff}
.txadd{min-height:56px;padding:0 18px;white-space:nowrap}
.txadd:disabled{opacity:.45}
.txchips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}
.txchip{min-height:44px;padding:0 14px;border-radius:999px;background:#fff2fa;border:2px solid #ffd1ea;font-weight:800;font-size:16px;color:#7a2457}
.txchip:active,.txfont:active,.txmode:active,.txcol:active{transform:scale(.94)}
.txlab{font-weight:900;font-size:14px;color:#6b5fa0;margin:6px 2px 6px;text-transform:uppercase;letter-spacing:1px}
.txfonts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.txfont{min-height:64px;border-radius:16px;background:#f6f3ff;display:grid;place-items:center;padding:4px 2px;overflow:hidden}
.txfont span{line-height:1.15;color:var(--ink)}
.txfont small{font-size:12px;font-weight:800;color:#6b5fa0}
.txfont.on,.txmode.on{background:#fff;box-shadow:0 0 0 3px var(--acc) inset}
.txmodes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.txmode{min-height:58px;border-radius:16px;background:#f6f3ff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px}
.txmode .mo,.txmode .ms{font:900 32px/1 Fredoka,sans-serif;-webkit-text-stroke:2px #1c1c1c;paint-order:stroke fill}
.txmode .mo{color:#fff}
.txcols{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px;justify-content:center}
.txcol{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.15)}
.txcol.on{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}
.txbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:10px;z-index:5;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px;border-radius:24px;box-shadow:0 10px 30px rgba(60,40,140,.25);white-space:nowrap}
.txbar.top{bottom:auto;top:14px}
#editor .txbar .tb{min-width:58px;height:58px;padding:0 16px;font-weight:900;font-size:18px;border-radius:18px}
#editor .txbar .tb.done{font-size:19px}

/* mode switch (Magic / Detailed) — v8 */
.modesw{max-width:1180px;margin:14px auto 0;display:flex;gap:8px;background:rgba(255,255,255,.75);border-radius:999px;padding:5px;box-shadow:0 6px 18px rgba(60,40,140,.1)}
.msw{flex:1;min-height:56px;display:flex;align-items:center;justify-content:center;border-radius:999px;font-weight:900;font-size:clamp(15px,2vw,19px);color:#5a4f86;text-decoration:none;text-align:center;line-height:1.1;padding:0 10px}
.msw.on{background:linear-gradient(135deg,#7c5cff,#ff4fa3);color:#fff;box-shadow:0 6px 16px rgba(124,92,255,.35)}
.msw:active{transform:scale(.97)}