@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--ink:#111827;--muted:#68707d;--line:#111827;--cream:#f8f7f0;--yellow:#f7ed64;--mint:#c0f3df;--blue:#bbd3ff;--shadow:5px 5px 0 #111827;--radius:17px;--sans:'DM Sans',system-ui,sans-serif;--display:'Space Grotesk',system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-tap-highlight-color:transparent;overflow-x:hidden;line-height:1.5}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}svg{display:block;width:100%;height:100%}p{margin:0}img{max-width:100%}input,textarea,select{min-width:0}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.26;z-index:-1;background-image:radial-gradient(#929292 0.5px,transparent .5px);background-size:12px 12px}
.layout{width:min(1200px,calc(100% - 64px));margin:0 auto}.topbar{height:93px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);gap:16px}.brand{display:flex;gap:11px;align-items:center;font-family:var(--display);font-size:22px;line-height:1;font-weight:700;letter-spacing:-1.2px}.brand-mark{width:46px;height:46px;background:var(--yellow);border:2px solid var(--ink);border-radius:13px;box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;padding:8px;transform:rotate(-5deg)}.brand-light{font-weight:500}.brand small{display:block;font-size:9px;letter-spacing:3px;font-weight:700;margin-top:7px}.top-actions{display:flex;align-items:center;gap:23px;font-size:11px;font-weight:800;letter-spacing:1.1px}.online{display:flex;align-items:center;gap:7px}.online span,.live-dot{width:8px;height:8px;background:#13b873;border-radius:50%;box-shadow:0 0 0 4px #13b87323}.top-help{padding:11px 15px;border:2px solid var(--ink);background:#fff;border-radius:10px;box-shadow:3px 3px 0 var(--ink)}.top-help:hover{transform:translateY(-2px)}
.intro{position:relative;padding:61px 0 38px;max-width:850px}.eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:12px;letter-spacing:2.2px;font-weight:700}.spark{color:#f0902a;font-size:23px;line-height:1}.pill{font-size:10px;background:var(--yellow);border:2px solid var(--ink);border-radius:30px;padding:2px 8px;letter-spacing:.3px;transform:rotate(-4deg)}h1{font-family:var(--display);font-size:clamp(43px,6.25vw,82px);line-height:1.07;letter-spacing:-.075em;margin:20px 0 19px;font-weight:700}.underlined{position:relative;z-index:0}.underlined:after{content:'';height:.15em;position:absolute;bottom:.06em;left:0;right:0;background:var(--mint);transform:rotate(-2deg);z-index:-1}.flash{color:#755bf2}.intro>p{font-size:15px;line-height:1.85;color:#5b6270;max-width:580px}.stats{display:flex;gap:17px;align-items:center;margin-top:30px;font-size:11px;font-weight:700;letter-spacing:.2px}.stats span b{font-family:var(--display);display:inline-flex;background:var(--yellow);padding:4px 6px;border:1.5px solid var(--ink);border-radius:5px;margin-right:6px;font-size:11px}.arr{opacity:.45}.floating{position:absolute;right:-36px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--display);font-size:17px;font-weight:700;padding:11px 14px;animation:float 5s ease-in-out infinite;transform:rotate(12deg)}.deco-one{background:var(--mint);top:75px}.deco-two{background:var(--yellow);top:205px;right:25px;animation-delay:-1.7s;transform:rotate(-10deg)}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.65fr);align-items:start;gap:28px;margin-top:35px}.editor{display:flex;flex-direction:column;gap:24px;min-width:0}.panel,.preview-panel{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}.panel{padding:26px}.panel-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e8e8e8;padding-bottom:21px;margin-bottom:21px}.panel-head>div{display:flex;align-items:center;gap:12px;min-width:0}.step{display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font:700 15px var(--display);border-radius:8px;width:35px;height:35px;flex-shrink:0}.panel h2{margin:0;font:700 20px var(--display);letter-spacing:-.8px}.panel-icon{font-size:26px;color:#7c71a1}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#f5f5f3;border:1.5px solid #e5e6e6;border-radius:12px;padding:7px;margin-bottom:22px}.mode{border:2px solid transparent;background:transparent;min-height:52px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:9px;font-weight:800;font-size:12px;letter-spacing:-.1px}.mode svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mode.active{border-color:var(--ink);background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}label:not(.checkline):not(.upload-label):not(.pick-icon){font-size:12px;font-weight:800;display:block;margin-bottom:9px}label i{color:#ed7059;font-style:normal}input[type=text],input[type=url],textarea,select,.input-prefix,.color-field{border:1.5px solid #bcc4d2;background:#fff;border-radius:11px;width:100%;outline:none;transition:border-color .16s,box-shadow .16s;font-size:13px}input[type=text],input[type=url],select{height:47px;padding:0 13px}input:focus,textarea:focus,select:focus,.input-prefix:focus-within{border-color:#6853d9;box-shadow:0 0 0 3px #6853d925}.input-prefix{display:flex;align-items:center;padding:0 12px;gap:8px}.input-prefix span{font-size:19px}.input-prefix input{border:0;box-shadow:none!important;padding:0 1px;min-width:0}.hint{font-size:11px;line-height:1.6;color:#858e9a;margin-top:8px;overflow-wrap:anywhere}.hint code{background:#eef0f5;padding:2px 4px;border-radius:4px;color:#4b5490}.subtabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.subtab{border:1.5px solid #d8dae0;background:#fff;padding:8px 11px;border-radius:8px;font-size:11px;font-weight:800}.subtab.active{background:var(--mint);border-color:var(--ink)}textarea{height:180px;resize:vertical;padding:13px;line-height:1.65;font:12px/1.6 ui-monospace,'SFMono-Regular',Consolas,monospace}.editor-foot{display:flex;justify-content:space-between;color:#969daa;font-size:10px;margin:5px 0 0}.upload-zone{margin:6px 0 20px}.upload-zone input[type=file]{position:absolute;width:1px;height:1px;opacity:0}.upload-label{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:2px dashed #a5afbd;background:#f9fafb;border-radius:12px;min-height:160px;gap:5px;cursor:pointer;padding:16px}.upload-label:hover{border-color:#6853d9}.upload-symbol{font-size:30px}.upload-label b{font-size:13px}.upload-label span:last-child{font-size:11px;color:#7c8593;overflow-wrap:anywhere}
.fields-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{margin-bottom:19px;min-width:0}.icon-setting{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1.5px dashed #b7c4d1;border-radius:11px;padding:15px;margin:4px 0 20px;background:#fcfcff}.icon-setting>div:first-child{min-width:0}.icon-setting input{position:absolute;opacity:0;width:1px;height:1px}.pick-icon{display:inline-block!important;background:#ecf0ff;border:1.5px solid #7487bd;border-radius:8px;padding:9px 11px;font-size:11px;font-weight:800;cursor:pointer;margin:11px 0 0}.icon-setting small{display:block;max-width:270px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;color:var(--muted);margin-top:7px}.icon-preview{width:83px;height:83px;border:2px solid var(--ink);background:var(--yellow);border-radius:20px;display:grid;place-items:center;padding:20px;box-shadow:3px 3px 0 var(--ink);flex-shrink:0;overflow:hidden}.icon-preview img,.mini-icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.color-field{height:47px;display:flex;align-items:center;padding:7px;gap:11px;font-size:12px;font-weight:800}.color-field input{width:40px;height:32px;border:none;cursor:pointer;padding:0;background:none}.options{border-top:1px solid #e7e9ea;margin-top:5px;padding-top:7px}.checkline{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:12px 0;cursor:pointer}.checkline b{font-size:12px;display:block}.checkline small{display:block;color:#7b8490;font-size:10px;margin-top:3px;line-height:1.5}.checkline input{position:absolute;opacity:0;pointer-events:none}.toggle{width:45px;height:25px;border:2px solid var(--ink);border-radius:30px;background:#cbd0d5;position:relative;flex-shrink:0;transition:background .2s}.toggle:before{content:'';width:17px;height:17px;background:#fff;border:1.5px solid var(--ink);position:absolute;left:2px;top:2px;border-radius:50%;transition:transform .2s}.checkline input:checked+.toggle{background:var(--mint)}.checkline input:checked+.toggle:before{transform:translateX(19px)}.checkline input:focus-visible+.toggle{outline:3px solid #7461ea;outline-offset:3px}
.output-desc{font-size:12px;line-height:1.7;color:#737c88}.server-status{display:flex;align-items:center;gap:8px;margin:16px 0 18px;font-weight:700;font-size:11px;color:#616d7a}.status-dot{display:block;width:8px;height:8px;border-radius:50%;background:#f5bc4b}.server-status.ok .status-dot{background:#14b880}.server-status.no .status-dot{background:#f28b62}.action-grid{display:flex;flex-direction:column;gap:11px}.btn-primary,.btn-secondary{width:100%;display:flex;align-items:center;text-align:left;gap:13px;border:2px solid var(--ink);border-radius:12px;padding:12px 14px;min-height:66px;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}.btn-primary:hover,.btn-secondary:not(:disabled):hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}.btn-primary{background:var(--yellow)}.btn-secondary{background:var(--mint)}.btn-secondary:disabled{opacity:.53;cursor:not-allowed;box-shadow:2px 2px 0 #666}.btn-symbol{display:grid;place-items:center;flex-shrink:0;width:39px;height:39px;background:var(--ink);color:#fff;border-radius:9px;font:700 23px var(--display)}.btn-primary b,.btn-secondary b{display:block;font-size:13px;font-weight:800}.btn-primary small,.btn-secondary small{display:block;font-size:10px;opacity:.7;margin-top:3px}.btn-arrow{margin-left:auto;font-size:20px}.notice{margin-top:20px;display:flex;gap:9px;background:#f4f6fa;border-left:3px solid #8c92a2;padding:11px 13px;border-radius:0 7px 7px 0;font-size:11px;line-height:1.65;color:#717a86}.notice span{font-size:18px;color:#494f5e;line-height:1.2}.notice b{color:var(--ink)}.error{font-size:12px;font-weight:700;color:#ba3636;background:#fff0ee;border:1px solid #f4b3ad;border-radius:9px;padding:12px;margin-top:14px;overflow-wrap:anywhere}.progress{margin-top:15px;display:flex;align-items:center;gap:8px;color:#504c8f;font-size:12px;font-weight:800}.spinner{width:17px;height:17px;border:3px solid #d7d4f6;border-top-color:#6f5df2;border-radius:50%;animation:spin .8s linear infinite}
.preview-panel{position:sticky;top:18px;overflow:hidden;padding:21px 19px 19px;background:#e9f0ff}.preview-head{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1px;font-weight:800}.preview-head>div{display:flex;gap:8px;align-items:center}.preview-head>span{background:#fff;border:1.5px solid var(--ink);padding:6px 8px;border-radius:6px;font-size:9px}.phone-wrap{display:grid;place-items:center;padding:20px 5px 22px;overflow:hidden}.phone{width:min(100%,285px);aspect-ratio:285/560;border-radius:40px;border:7px solid #1e2330;box-shadow:0 0 0 2px #657184,11px 14px 0 #11182722;position:relative;background:#1e2330;padding:5px}.notch{width:92px;height:21px;background:#1e2330;border-radius:0 0 15px 15px;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2}.phone-screen{background:#fff;border-radius:27px;width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column}.phone-status{height:32px;display:flex;align-items:center;justify-content:space-between;padding:9px 24px 0;flex-shrink:0;font-size:10px;font-weight:800;color:#1b1d27}.webframe{flex:1;min-height:0;position:relative;background:#fff}.webframe iframe{width:100%;height:100%;border:0;background:#fff;display:block}.frame-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;position:absolute;inset:0;background:linear-gradient(140deg,#fdfbff,#d9e7ff);text-align:center}.frame-empty>span{display:grid;place-items:center;width:60px;height:60px;background:var(--yellow);border:2px solid var(--ink);border-radius:17px;font-size:25px;box-shadow:4px 4px 0 var(--ink)}.frame-empty b{font:700 17px var(--display)}.frame-empty small{font-size:10px;color:#6d7582}.nav-pill{width:94px;height:4px;border-radius:20px;background:#111827;margin:5px auto 8px;flex-shrink:0}.preview-app{display:flex;align-items:center;gap:11px;background:#fff;border:1.5px solid var(--ink);border-radius:12px;padding:11px}.mini-icon{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--ink);background:var(--yellow);border-radius:11px;padding:9px;flex-shrink:0;overflow:hidden}.preview-app>div:nth-child(2){min-width:0}.preview-app b{font:700 12px var(--display);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-app small{font-size:10px;color:#888f9b;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.android-badge{margin-left:auto;border-radius:5px;background:#def8e8;color:#11653e;font-size:9px;padding:5px;font-weight:800}.preview-hint{font-size:10px;line-height:1.65;color:#6f7b92;margin:12px 3px 0}
.howto{margin:65px 0 58px;background:var(--ink);border:2px solid var(--ink);border-radius:18px;box-shadow:7px 7px 0 var(--yellow);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:32px}.howto .eyebrow{color:var(--yellow);font-size:10px}.howto h2{font:700 clamp(20px,2.6vw,31px)/1.2 var(--display);letter-spacing:-1px;margin:14px 0 10px}.howto p{font-size:12px;color:#b3bac9;line-height:1.9;max-width:370px}.howto ol{padding:0;margin:0;list-style:none}.howto li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #4b5261}.howto li:last-child{border:0}.howto li>span{display:grid;place-items:center;width:31px;height:31px;flex-shrink:0;border-radius:7px;background:var(--yellow);color:var(--ink);font:800 11px var(--display)}.howto li b{display:block;font-size:12px}.howto li small{display:block;font-size:11px;color:#a8aebb;line-height:1.5;margin-top:4px}footer{border-top:2px solid var(--ink);padding:26px 0 38px;display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.6px;font-weight:800}footer span span{color:#7f63e7}
@keyframes float{50%{translate:0 -12px}}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition:none!important}}
@media(max-width:980px){.layout{width:min(100% - 35px,760px)}.workspace{grid-template-columns:minmax(0,1fr)}.preview-panel{position:static;order:-1}.phone{width:235px}.floating{right:15px}.deco-two{right:20px}.preview-panel{padding:17px}.phone-wrap{padding:14px}.howto{grid-template-columns:1fr}}
@media(max-width:550px){.layout{width:calc(100% - 26px)}.topbar{height:75px}.brand{font-size:17px}.brand-mark{width:39px;height:39px}.brand small{font-size:7px;letter-spacing:2px}.top-actions{gap:6px}.online{font-size:8px;letter-spacing:.4px}.top-help{display:none}.intro{padding:46px 0 14px}.eyebrow{font-size:9px;letter-spacing:1.5px;gap:6px}.pill{font-size:8px}.intro h1{font-size:clamp(42px,11vw,64px);letter-spacing:-.07em;margin:19px 0 14px}.intro>p{font-size:12px;line-height:1.75}.stats{gap:7px;font-size:9px;margin-top:22px;flex-wrap:wrap}.stats span b{font-size:9px;padding:3px}.floating{display:none}.workspace{gap:19px;margin-top:26px}.editor{gap:18px}.panel{padding:17px}.panel-head{padding-bottom:16px;margin-bottom:18px}.panel h2{font-size:17px}.step{width:31px;height:31px;font-size:12px}.mode-switch{gap:5px;padding:5px}.mode{min-height:47px;gap:6px;font-size:10px}.mode svg{width:17px;height:17px}.fields-two{gap:10px}.icon-setting{padding:12px}.icon-preview{width:67px;height:67px;padding:16px;border-radius:15px}.preview-panel{order:2}.preview-app{padding:10px}.phone{width:230px}.howto{margin:41px 0 37px;padding:21px;gap:20px;box-shadow:5px 5px 0 var(--yellow)}footer{display:block;line-height:2.5;font-size:9px}footer>span{display:block}}
@media(max-width:370px){.mode{font-size:9px;gap:4px}.mode svg{width:14px;height:14px}.fields-two{grid-template-columns:1fr}.stats{font-size:8px}.phone{width:210px}.android-badge{display:none}}
[hidden]{display:none!important}