:root{--brand: #748df4;--brand-soft: #e8ecfe;--bg-top: #fef3e2;--bg-bottom: #dbeafe;--panel: #ffffff;--sunken: #f8fafc;--raised: #f1f5f9;--ink: #111827;--muted: #475569;--panel-border: #cbd5e1;--shadow: 0 12px 30px rgba(15, 23, 42, .12);--html: #f59e0b;--css: #3b82f6;--js: #8b5cf6;--wire: #22c55e;--accent: var(--wire);--ok: #22c55e;--err: #ef4444;--font: "Montserrat", system-ui, sans-serif;--mono: "Fira Code", ui-monospace, monospace;--radius: 18px}*{box-sizing:border-box;margin:0}body{font-family:var(--font);color:var(--ink);background:linear-gradient(160deg,var(--bg-top),var(--bg-bottom));background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased}code,pre{font-family:var(--mono)}.wrap{max-width:1040px;margin:0 auto;padding:28px 20px 80px}.head{text-align:center;margin-bottom:22px}.head h1{font-size:clamp(2.2rem,6vw,3.4rem);font-weight:900;letter-spacing:-.02em;line-height:1;color:#0f172a}.head h1 .zap{background:linear-gradient(90deg,var(--html),var(--js),var(--wire),var(--css));-webkit-background-clip:text;background-clip:text;color:transparent}.head p{margin-top:8px;font-size:1.1rem;color:var(--muted);font-weight:500}.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:8px}.tab{--c: var(--brand);font-family:inherit;font-size:1.05rem;font-weight:700;color:var(--ink);background:var(--panel);border:2px solid var(--panel-border);border-radius:999px;padding:9px 20px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.tab--html{--c: var(--html)}.tab--css{--c: var(--css)}.tab--js{--c: var(--js)}.tab--wire{--c: var(--wire)}.tab:hover{transform:translateY(-2px)}.tab.is-active{color:#fff;background:var(--c);border-color:var(--c);box-shadow:0 8px 18px color-mix(in srgb,var(--c) 40%,transparent)}.tagline{text-align:center;color:var(--muted);font-size:1.02rem;font-weight:500;margin:14px 0 26px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;animation:pop .32s ease both}.grid[data-accent=html]{--accent: var(--html)}.grid[data-accent=css]{--accent: var(--css)}.grid[data-accent=js]{--accent: var(--js)}.grid[data-accent=wire]{--accent: var(--wire)}@keyframes pop{0%{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}.demo{background:var(--panel);border-radius:var(--radius);border:1px solid #e6ebf2;border-top:5px solid var(--accent);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:12px}.demo__title{font-size:1.25rem;font-weight:700;color:var(--accent)}.demo__stage{background:var(--sunken);border:1px solid #eef2f7;border-radius:14px;padding:18px;min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.demo__caption{color:var(--muted);font-size:.95rem;line-height:1.4;font-weight:500}.code{border-radius:12px;background:var(--sunken);border:1px solid var(--panel-border);overflow:hidden}.code__file{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;color:var(--muted);padding:8px 14px 0}.code__pre{margin:0;padding:10px 14px 12px;overflow-x:auto;font-size:.82rem;line-height:1.55}.code__line{display:block}.btn{font-family:inherit;font-size:1rem;font-weight:700;color:#fff;background:var(--brand);border:none;border-radius:11px;padding:10px 20px;cursor:pointer;transition:transform .1s ease,filter .1s ease}.btn:hover{transform:translateY(-2px);filter:brightness(.96)}.btn:active{transform:translateY(0)}.btn--ghost{background:var(--panel);color:var(--ink);border:2px solid #94a3b8}.range{width:100%;accent-color:var(--brand);height:26px;cursor:pointer}.field{font-family:inherit;font-size:1rem;padding:10px 14px;border:2px solid #cbd5e1;border-radius:10px;width:100%;max-width:240px;color:var(--ink)}.field:focus{outline:3px solid rgba(116,141,244,.35);outline-offset:1px;border-color:var(--brand)}.tagchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.tagchip{font-family:var(--mono);font-size:.82rem;padding:6px 12px;border-radius:999px;border:2px dashed #b6c2d6;background:var(--panel);color:var(--muted);cursor:pointer}.tagchip.is-on{border-style:solid;border-color:var(--html);background:color-mix(in srgb,var(--html) 16%,#fff);color:var(--ink)}.preview{width:100%;background:var(--panel);border:1px solid #e6ebf2;border-radius:10px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:56px;justify-content:center}.preview h4{font-size:1.3rem;font-weight:700}.preview p{color:var(--muted)}.preview .demobtn{font-family:inherit;padding:7px 16px;border-radius:9px;border:none;background:var(--brand);color:#fff;font-weight:700}.preview .demoinput{font-family:inherit;padding:6px 10px;border:2px solid #cbd5e1;border-radius:8px}.preview .demodiv{border:2px dashed #b6c2d6;border-radius:8px;padding:8px 16px;color:var(--muted);font-size:.85rem}.preview .demoimg{font-size:2.4rem}.preview .empty{color:#9aa7bd;font-size:.9rem}.idstage{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}.idthing{position:relative;padding:14px 16px;border-radius:12px;background:var(--panel);border:2px solid #e6ebf2;font-weight:700}.idthing .nametag{position:absolute;top:-12px;left:50%;transform:translate(-50%);font-family:var(--mono);font-size:.72rem;background:var(--html);color:#fff;padding:2px 8px;border-radius:999px;white-space:nowrap}.proptabs{display:inline-flex;gap:4px;background:var(--raised);border-radius:999px;padding:4px}.proptab{font-family:var(--mono);font-size:.78rem;border:none;background:transparent;color:var(--muted);padding:5px 12px;border-radius:999px;cursor:pointer}.proptab.is-on{background:var(--css);color:#fff}.swatches{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.swatch{width:34px;height:34px;border-radius:9px;border:3px solid #fff;box-shadow:0 0 0 2px #cbd5e1;cursor:pointer;transition:transform .1s ease}.swatch:hover{transform:scale(1.12)}.swatch.is-sel{box-shadow:0 0 0 3px var(--brand)}.colorbox{min-width:120px;height:60px;padding:0 16px;border-radius:12px;display:grid;place-items:center;font-weight:700;background:#fff;border:1px solid #e6ebf2;transition:background .18s ease,color .18s ease}.sizetext{font-weight:700;color:var(--ink);transition:font-size .05s linear;line-height:1}.boxmodel{background:repeating-linear-gradient(45deg,#d9e6ff,#d9e6ff 6px,#c7d8ff 6px,#c7d8ff 12px);border-radius:12px;transition:padding .08s linear}.boxmodel__inner{background:var(--css);color:#fff;font-weight:700;border-radius:8px;padding:12px 18px}.bigmsg,.counternum{font-size:2rem;font-weight:800;color:var(--js)}.echo{font-size:1.3rem;font-weight:700;min-height:1.4em;color:var(--ink)}.echo .ph{color:#9aa7bd;font-weight:500}.verdict{font-size:1.2rem;font-weight:800;min-height:1.4em}.verdict.ok{color:var(--ok)}.verdict.no{color:var(--err)}.swappic{font-size:3rem;line-height:1}.hidebox{width:130px;height:56px;border-radius:12px;background:var(--js);color:#fff;font-weight:700;display:grid;place-items:center;transition:opacity .16s ease,transform .16s ease}.hidebox.is-hidden{opacity:0;transform:scale(.9);pointer-events:none}.wired{grid-column:1 / -1}.wired__layout{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:start}.wired__live{background:var(--sunken);border:1px solid #eef2f7;border-radius:14px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px}.wired__num{font-size:3rem;font-weight:800;color:var(--wire)}.wired__num.is-cut{color:var(--err)}.wired__panels{display:flex;flex-direction:column;gap:10px}.wpanel{border-radius:12px;background:var(--sunken);border:1px solid var(--panel-border);color:var(--ink);font-family:var(--mono);font-size:.82rem;padding:10px 14px;border-left:5px solid var(--accent)}.wpanel--html{border-left-color:var(--html)}.wpanel--css{border-left-color:var(--css)}.wpanel--js{border-left-color:var(--js)}.wpanel span.tag{font-size:.66rem;color:var(--muted);display:block;margin-bottom:2px}.namepill{background:var(--ok);color:#fff;border-radius:5px;padding:0 5px;font-weight:700}.namepill.is-cut{background:var(--err)}.wired__controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}.cutbadge{display:inline-block;background:#fee2e2;color:#b91c1c;font-weight:700;border-radius:999px;padding:4px 12px;font-size:.9rem}@media (max-width: 720px){.wired__layout{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){.grid{animation:none}}