*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;background:#f4f7fb;color:#172033}.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2563eb,#7c3aed,#06b6d4)}header{height:64px;position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:12px;padding:0 16px;background:#fffffff2;backdrop-filter:blur(12px);border-bottom:1px solid #e5e7eb}.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#111827;font-weight:900;font-size:20px}.brand b{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff}.brand+nav{margin-left:auto}nav{display:flex;gap:4px}nav a{font-size:12px;font-weight:800;color:#475569;text-decoration:none;padding:9px}.run{background:linear-gradient(135deg,#2563eb,#4f46e5)!important;color:#fff!important;border:0!important}.hamb{display:none}.topbar button,header button,.head button,.bar button,.exports button,.device{padding:9px 11px;border:1px solid #d5deea;background:#fff;border-radius:8px;cursor:pointer;font-weight:700}.layout{display:flex}.sidebar{position:fixed;top:64px;bottom:0;width:220px;background:#111827;padding:18px 12px;color:#cbd5e1;overflow:auto}.sidebar h3{color:#fff;margin:5px 10px 16px}.sidebar a,.sidebar button{display:block;width:100%;padding:10px 11px;border:0;background:transparent;color:#cbd5e1;text-align:left;text-decoration:none;border-radius:8px;cursor:pointer}.sidebar a:hover,.sidebar button:hover{background:#1e293b;color:#fff}.sidebar hr{border:0;border-top:1px solid #334155;margin:13px 8px}.main{margin-left:220px;width:calc(100% - 220px);padding:24px;max-width:1700px}.hero{min-height:255px;padding:32px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#172554,#312e81 55%,#075985);display:flex;align-items:center;justify-content:space-between;box-shadow:0 18px 45px #17255422}.hero small{font-weight:900;letter-spacing:1.5px}.hero h1{font-size:clamp(30px,5vw,52px);margin:14px 0 8px}.hero p{max-width:750px;line-height:1.7;color:#dbeafe}.hero button{padding:11px 15px;border-radius:9px}.art{display:flex;gap:8px;align-items:center}.art span{padding:22px 14px;background:#fff;color:#2563eb;border-radius:13px;font-weight:900;animation:f 4s ease-in-out infinite;box-shadow:0 15px 30px #0003}.art span:nth-of-type(2){color:#7c3aed;animation-delay:.5s}.art span:nth-of-type(3){color:#b45309;animation-delay:1s}.art em{font-size:25px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}.stats div{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px;text-align:center}.stats b{display:block;font-size:19px}.stats small{color:#64748b}.card{background:#fff;border:1px solid #e2e8f0;border-radius:15px;padding:17px;margin:14px 0;box-shadow:0 8px 25px #0f172a0a}.head{display:flex;gap:8px;justify-content:space-between;align-items:center;flex-wrap:wrap}.head h2,.card h2{margin:0 0 4px;font-size:20px}.head p,.card p{color:#64748b;font-size:13px}.editors{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.editors label{font-size:12px;font-weight:800}.editors textarea{display:block;margin-top:6px;width:100%;height:390px;resize:vertical;border:1px solid #cbd5e1;border-radius:9px;background:#07111f;color:#dbeafe;padding:13px;font:13px/1.6 Consolas,monospace;outline:0}.bar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:10px}.bar span{margin-left:auto;color:#64748b;font-size:12px}.work{display:grid;grid-template-columns:2fr 1fr;gap:14px}.work .card{min-width:0}.work iframe{display:block;width:100%;height:500px;background:#fff;border:0;border-radius:6px}.work #framebox{background:#cbd5e1;padding:10px;border-radius:10px;margin-top:10px;display:flex;justify-content:center}.work #framebox.tablet iframe{width:768px;max-width:100%}.work #framebox.mobile iframe{width:390px;max-width:100%}.device.on{background:#2563eb;color:#fff;border-color:#2563eb}.work pre{height:500px;overflow:auto;background:#07111f;color:#dbeafe;border-radius:9px;padding:13px;font:12px/1.6 Consolas,monospace}.exports{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.exports button{min-height:46px}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.features div{border:1px solid #e5e7eb;padding:14px;border-radius:10px;background:#fafcff;font-size:13px}.guide{line-height:1.7}.guide h3{margin-top:22px}.guide li{font-size:13px;color:#526176}.question{border:1px solid #e2e8f0;background:#f8fafc;padding:11px;border-radius:9px;margin:8px 0}.question label{display:block;margin:5px 0;font-size:13px}.question button{padding:6px 9px;border:1px solid #cbd5e1;background:#fff;border-radius:7px;cursor:pointer}.result{margin-left:8px;font-weight:800}details{padding:12px;border-bottom:1px solid #e5e7eb}summary{font-weight:800;cursor:pointer}footer{text-align:center;padding:30px;color:#64748b;font-size:12px}@keyframes f{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.ide-full{position:fixed;inset:75px 12px 12px;z-index:7;overflow:auto}@media(max-width:1100px){.work{grid-template-columns:1fr}.editors{grid-template-columns:1fr}.features{grid-template-columns:repeat(2,1fr)}}@media(max-width:850px){.hamb{display:block}.topbar nav{display:none}.topbar nav.open{display:flex;position:absolute;left:8px;right:8px;top:58px;background:#fff;border:1px solid #ddd;border-radius:10px;flex-direction:column;padding:7px}.sidebar{transform:translateX(-100%);transition:.25s;z-index:10}.sidebar.open{transform:translateX(0)}.main{margin-left:0;width:100%;padding:12px}.art{display:none}.hero{padding:25px}.stats{grid-template-columns:repeat(2,1fr)}.exports{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.main{padding:8px}.card{padding:13px}.hero h1{font-size:30px}.hero{min-height:290px}.features{grid-template-columns:1fr}.exports{grid-template-columns:1fr}.work iframe{height:390px}.editors textarea{height:320px}.brand{font-size:17px}}body.dark{background:#09111e;color:#e5e7eb}body.dark header,body.dark .card,body.dark .stats div{background:#111827;color:#e5e7eb}