.form{max-width:600px;margin:24px auto;padding:24px;background:#1e1e1e;border-radius:12px;display:flex;flex-direction:column;gap:12px}.form input,.form textarea{padding:10px 12px;font-size:14px;border-radius:6px;border:1px solid #444;background:#111;color:#eee}.form textarea{min-height:200px;resize:vertical;font-family:monospace}.form button{margin-top:12px;padding:10px;border:none;border-radius:8px;background:#4f46e5;color:#fff;cursor:pointer}.form button:hover{background:#4338ca}.canvas{position:relative;min-height:calc(100vh - 140px);background:radial-gradient(1200px 500px at top center,#0f172a,#020617);overflow:hidden}.canvas.dim .bubble{opacity:.25;filter:blur(.5px)}.bubble-grid{width:100%;max-width:1200px;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:28px;padding:60px 40px;justify-items:center}.bubble{width:clamp(72px,8vw,110px);height:clamp(72px,8vw,110px);border-radius:50%;background:linear-gradient(145deg,#38bdf8,#2563eb);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;font-size:clamp(11px,1vw,14px);font-weight:600;letter-spacing:.2px;cursor:pointer;box-shadow:0 10px 30px #2563eb59,inset 0 1px #ffffff40;transition:all .3s ease}.bubble:hover{transform:translateY(-6px) scale(1.08);box-shadow:0 20px 40px #38bdf873,inset 0 1px #ffffff4d}.bubble.open{transform:scale(1.15);box-shadow:0 0 0 4px #38bdf899,0 30px 80px #0009}.bubble-overlay{position:fixed;inset:0;background:#020617bf;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000}.bubble-content{background:#fffffff2;color:#0f172a;width:min(900px,92vw);max-height:85vh;padding:32px 36px;border-radius:20px;overflow-y:auto;box-shadow:0 40px 120px #000000b3;animation:scaleIn .25s ease-out}.bubble-content h2{margin-top:0;margin-bottom:16px}.html-content p{line-height:1.6;margin-bottom:12px}.html-content code{background:#f3f4f6;padding:2px 6px;border-radius:4px}.html-content pre{background:#0b1020;color:#e5e7eb;padding:14px;border-radius:10px;overflow-x:auto}@keyframes popIn{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}@media(max-width:600px){.bubble-grid{gap:14px;padding:20px}.bubble-content{padding:20px}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:#f8fafc;color:#0f172a}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.subject-bar{margin:16px auto 0;padding-bottom:16px;border-bottom:1px solid rgba(0,0,0,.05)}.tag{padding:8px 16px;border-radius:999px;background:#0f172ad9;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all .25s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.tag:hover{background:#2563eb;transform:translateY(-1px)}.tag.active{background:linear-gradient(135deg,#2563eb,#38bdf8)}.app-header{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:20px 36px;background:#ffffffbf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06)}.header-left{display:flex;flex-direction:column}.app-title{margin:0;font-size:22px;font-weight:700;letter-spacing:-.3px}.app-subtitle{margin:4px 0 0;font-size:13px;color:#475569}.header-actions{display:flex;gap:12px}.header-btn{padding:8px 18px;border-radius:999px;border:none;background:#0f172ad9;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all .25s ease}.header-btn:hover{transform:translateY(-1px);background:#2563eb}.header-btn.primary{background:linear-gradient(135deg,#2563eb,#38bdf8);box-shadow:0 8px 20px #2563eb59}
