*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{touch-action:manipulation;overscroll-behavior:none;width:100%;position:fixed;inset:0;overflow:hidden}.app{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea{-webkit-user-select:text;user-select:text}body{font-family:Comic Sans MS,Segoe UI,sans-serif}#root{height:100%}.app{overscroll-behavior:contain;background:linear-gradient(135deg,#ff9a9e,#fad0c4,#a1c4fd,#a8edea) 0 0/300% 300%;flex-direction:column;align-items:center;height:100%;padding:20px;animation:15s infinite bg;display:flex;overflow-y:auto}@keyframes bg{0%,to{background-position:0%}50%{background-position:100%}}h1{color:#fff;text-shadow:0 3px 6px #0003;text-align:center;margin-bottom:8px;font-size:28px}.hint{color:#fff;text-align:center;margin-bottom:18px;font-size:18px}.card{-webkit-user-select:none;user-select:none;background:#fff;border-radius:40px;flex-direction:column;justify-content:center;align-items:center;width:min(60vmin,300px);height:min(60vmin,300px);margin-bottom:10px;display:flex;box-shadow:0 15px 35px #0003}.card.pop{animation:.35s pop}.card.ok{box-shadow:0 0 0 6px #2ecc7180,0 15px 35px #0003}.card.err{animation:.4s shake;box-shadow:0 0 0 6px #e74c3c80,0 15px 35px #0003}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-12px)}40%{transform:translate(12px)}60%{transform:translate(-8px)}80%{transform:translate(8px)}}.progress-wrap{text-align:center;width:min(100%,560px);margin-bottom:16px}.progress-text{color:#fff;text-shadow:0 2px 4px #00000026;margin-bottom:6px;font-size:16px}.progress-bar{background:#ffffff73;border-radius:10px;height:16px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#2ecc71,#00b894);border-radius:10px;height:100%;transition:width .4s}@keyframes pop{0%{transform:scale(.6)rotate(-6deg)}60%{transform:scale(1.12)rotate(3deg)}to{transform:scale(1)rotate(0)}}.big{color:var(--c,#aaa);font-size:min(26vmin,130px);font-weight:700;line-height:1}.card-zone{position:relative}.card-wrap{justify-content:center;align-items:center;margin-bottom:10px;display:flex}.side-emoji{--e:min(16vmin, 80px);left:min(calc(100% + 16px), calc(50vw + 50% - 14px - var(--e)));top:calc(50% - var(--e) / 2);width:var(--e);font-size:var(--e);text-align:center;pointer-events:none;z-index:5;line-height:1;animation:.35s pop;position:absolute}@media (width<=520px){.side-emoji{--e:44px}}.emoji-mid{margin-top:6px;font-size:min(14vmin,70px);line-height:1}.slots{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;display:flex}.slot{color:#2ecc71;background:#ffffff8c;border:3px dashed #55555559;border-radius:14px;justify-content:center;align-items:center;width:min(11vmin,54px);height:min(11vmin,54px);font-size:min(8vmin,38px);font-weight:700;display:flex}.slot.filled{background:#fff;border-style:solid;border-color:#2ecc71;animation:.35s pop}.word-big{color:#555;font-size:min(13vmin,66px);font-weight:700;line-height:1.1}.emoji-big{margin-top:10px;font-size:min(22vmin,110px);line-height:1}.word-small{color:#888;margin-top:8px;font-size:min(8vmin,40px);font-weight:700}.toolbar{align-items:center;gap:10px;margin-bottom:16px;display:flex}.btn{color:#555;cursor:pointer;background:#ffffffd9;border:none;border-radius:20px;padding:10px 22px;font-family:inherit;font-size:17px;font-weight:700;box-shadow:0 4px 12px #0000001f}.btn:hover{background:#fff}.btn.small{padding:7px 16px;font-size:15px}.grid{box-sizing:border-box;flex-direction:column;gap:8px;width:fit-content;max-width:calc(100vw - 24px);margin:0 auto;padding:4px 18px 0;display:flex}.grid .kb-row{justify-content:center;gap:8px;display:flex}@media (width<=520px){.grid .kb-row{gap:5px}}.grid button{color:#444;cursor:pointer;background:#fffc;border:none;border-radius:14px;flex:0 48px;min-width:0;height:48px;font-family:inherit;font-size:min(22px,5.5vw);font-weight:700;transition:transform .12s,background .2s}@media (hover:hover){.grid button:hover{background:#fff}}.grid button:active{transform:scale(.9)}.grid button:focus,.grid button:focus-visible{outline:none}.grid button.active{background:var(--c,#3498db);color:#fff;transform:scale(1.15)}.grid button.star:after{content:"⭐";font-size:13px;line-height:1;position:absolute;top:-7px;right:-3px}.grid button{position:relative}@media (width<=600px){.grid button{border-radius:11px;width:38px;height:38px;font-size:18px}}.profiles{flex-wrap:wrap;justify-content:center;gap:14px;margin:20px 0;display:flex}.profile{color:#444;cursor:pointer;background:#ffffffe6;border:none;border-radius:24px;padding:18px 26px;font-family:inherit;font-size:20px;font-weight:700;transition:transform .15s;box-shadow:0 6px 16px #0000001f}.profile:hover{background:#fff;transform:scale(1.08)}.create-form{background:#ffffffe6;border-radius:28px;flex-direction:column;align-items:center;gap:14px;padding:26px;display:flex;box-shadow:0 10px 25px #00000026}.create-form input,.create-form textarea{text-align:center;border:2px solid #a1c4fd;border-radius:16px;outline:none;padding:12px 16px;font-family:inherit;font-size:19px}.create-form textarea{word-break:break-all;resize:none;width:260px;font-size:14px}.export-code{word-break:break-all;resize:none;color:#555;border:2px solid #a1c4fd;border-radius:16px;width:min(420px,90vw);margin-top:10px;padding:10px 14px;font-family:inherit;font-size:13px}.emoji-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.emoji-row button{cursor:pointer;background:#fff;border:2px solid #0000;border-radius:14px;padding:6px 10px;font-size:26px}.emoji-row button.selected{background:#e8f4fd;border-color:#3498db}.error{color:#d63031;margin:10px 0;font-weight:700}.gate-overlay{z-index:100;background:#00000073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.gate-card{text-align:center;background:#fff;border-radius:24px;max-width:320px;padding:28px 24px;position:relative;box-shadow:0 14px 40px #00000040}.gate-card h2{margin-bottom:8px}.gate-close{cursor:pointer;color:#888;background:0 0;border:none;font-size:18px;position:absolute;top:10px;right:12px}.gate-question{margin:12px 0 16px;font-size:24px}.gate-options{justify-content:center;gap:12px;display:flex}.shake{animation:.35s gate-shake}@keyframes gate-shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.title-row{justify-content:center;align-items:center;gap:12px;width:100%;display:flex}.title-row h1{margin-bottom:0}.gear-btn{cursor:pointer;background:#ffffff8c;border:none;border-radius:50%;flex:none;width:44px;height:44px;font-family:inherit;font-size:22px;transition:transform .15s;box-shadow:0 4px 12px #0000001f}.gear-btn:hover{background:#fff;transform:rotate(30deg)}.lang-switch{justify-content:center;gap:10px;display:flex}.lang-switch .btn.selected{color:#fff;background:#2ecc71}.gear-overlay{z-index:90;background:#00000073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.gear-panel{background:#fff;border-radius:26px;flex-direction:column;align-items:center;gap:12px;width:min(92vw,420px);max-height:86vh;padding:26px 22px;display:flex;position:relative;overflow-y:auto;box-shadow:0 14px 40px #00000040}.gear-close{cursor:pointer;color:#888;background:0 0;border:none;font-size:18px;position:absolute;top:10px;right:12px}.trace-card{background:#fff;border-radius:40px;padding:6px;box-shadow:0 15px 35px #0003}.trace-card.ok{box-shadow:0 0 0 6px #2ecc7180,0 15px 35px #0003}.trace-wrap{touch-action:none}.trace-wrap svg{width:min(86vmin,460px);height:min(64vmin,330px);display:block}.trace-path{fill:none;stroke:#f5b642;stroke-width:7px;stroke-linecap:round;stroke-dasharray:1 18}.trace-done{fill:none;stroke:#2ecc71;stroke-width:9px;stroke-linecap:round}.trace-runner,.trace-goal{text-anchor:middle;dominant-baseline:central;pointer-events:none;font-size:44px}.brush-pick{justify-content:center;align-items:center;gap:36px;padding:26px 10px;display:flex}.brush{touch-action:manipulation;background:#fff;border:none;border-radius:40px;flex-direction:column;align-items:center;gap:14px;padding:26px 30px;transition:transform .35s;display:flex;box-shadow:0 15px 35px #0003}.brush.big{transform:scale(1.3)}.brush-blob{border:6px solid #00000014;border-radius:50%;width:96px;height:96px}.brush.red .brush-blob{background:#e53935}.brush.yellow .brush-blob{background:#fdd835}.brush-icon{font-size:48px}.shape-done{stroke-width:22px}.shape-path{fill:none;stroke:#222;stroke-width:7px;stroke-linecap:round;stroke-dasharray:1 18}.shape-arrow{stroke:#222;stroke-width:3px;stroke-linecap:round;fill:#222;pointer-events:none}.modes{flex-wrap:wrap;justify-content:center;gap:20px;margin:30px 0 25px;display:flex}.mode-card{cursor:pointer;background:#ffffffe6;border:none;border-radius:30px;width:250px;padding:30px 22px;font-family:inherit;transition:transform .15s,box-shadow .15s;box-shadow:0 10px 25px #00000026}.mode-card:hover{transform:scale(1.06)rotate(-1deg);box-shadow:0 15px 35px #0003}.mode-emoji{margin-bottom:12px;font-size:64px;display:block}.mode-card h2{color:#444;margin-bottom:8px;font-size:22px}.mode-card p{color:#777;font-size:15px;line-height:1.4}.transfer-help{flex-direction:column;align-items:center;margin-top:12px;margin-bottom:12px;display:flex}.menu{flex-direction:column;align-items:center;gap:10px;margin-top:10px;display:flex}.code-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px;display:flex}.help-card{color:#444;text-align:left;background:#fffffff2;border-radius:24px;max-width:min(560px,92vw);margin-top:12px;padding:22px 24px;font-size:16px;line-height:1.5;box-shadow:0 10px 25px #00000026}.help-card h2{color:#444;text-align:center;margin-bottom:12px;font-size:20px}.help-card h3{color:#555;margin:14px 0 6px;font-size:17px}.help-card p{margin-bottom:6px}.help-card ol,.help-card ul{margin:0 0 8px 20px;padding:0}.help-card li{margin-bottom:8px}.help-card .btn{margin-top:6px}.emotion-keys{justify-content:center;gap:8px;margin-top:14px;margin-bottom:16px;display:flex}.emotion-keys button{cursor:pointer;touch-action:manipulation;background:#fffc;border:none;border-radius:14px;flex:0 64px;height:48px;font-size:30px;line-height:1;transition:transform .12s,background .2s}.emotion-keys button:active{transform:scale(.9)}.emotion-keys button:focus,.emotion-keys button:focus-visible{outline:none}@media (width<=600px){.emotion-keys button{border-radius:11px;flex-basis:54px;height:38px;font-size:24px}}