:root{--bg:#0b0f19;--bg2:#111827;--surface:#182030;--surface2:#1e293b;--border:#2a3a55;--border2:#374151;--text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;--accent:#3b82f6;--accent2:#60a5fa;--success:#10b981;--error:#ef4444;--warning:#eab308;--radius:12px;--radius-sm:6px;--font:'Inter',system-ui,-apple-system,sans-serif;--shadow:0 4px 24px rgba(0,0,0,0.4)}[data-theme="light"]{--bg:#f1f5f9;--bg2:#e2e8f0;--surface:#fff;--surface2:#f8fafc;--border:#cbd5e1;--border2:#94a3b8;--text:#0f172a;--text2:#334155;--text3:#64748b;--shadow:0 4px 24px rgba(0,0,0,0.08)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s}button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit;min-height:48px}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#loading-skeleton{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .4s}#loading-skeleton.hide{opacity:0;pointer-events:none}.skel-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.skel-bar{width:200px;height:4px;background:var(--border);border-radius:4px;overflow:hidden}.skel-bar::after{content:'';display:block;width:40%;height:100%;background:var(--accent);border-radius:4px;animation:skelSlide 1.2s ease-in-out infinite}@keyframes skelSlide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}.skel-text{width:140px;height:12px;background:var(--border);border-radius:4px;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.8}}#app{display:none;flex-direction:column;min-height:100vh}#app.ready{display:flex}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border);gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:100}.toolbar-title{font-size:15px;font-weight:700;letter-spacing:-0.01em;display:flex;align-items:center;gap:8px}.toolbar-title .badge{font-size:10px;background:var(--accent);color:#fff;padding:2px 8px;border-radius:20px;font-weight:600}.toolbar-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.toolbar-controls label{font-size:11px;color:var(--text2);font-weight:500}.toolbar-controls input[type="range"]{width:80px;accent-color:var(--accent);min-height:44px}.toolbar-controls select{min-height:44px;padding:0 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:13px}.toolbar-btn{min-height:48px;min-width:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-weight:600;transition:all .2s;gap:6px}.toolbar-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.viz-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;position:relative;overflow:hidden}.info-panel{position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--surface);border-top:2px solid var(--accent);padding:16px;box-shadow:0 -8px 32px rgba(0,0,0,0.5);transform:translateY(100%);transition:transform 0.35s cubic-bezier(.4,0,.2,1);max-height:60vh;overflow-y:auto}.info-panel.open{transform:translateY(0)}.info-panel-close{position:absolute;top:8px;right:8px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:20px;border-radius:50%;background:var(--surface2);cursor:pointer}.info-panel-title{font-size:16px;font-weight:700;margin-bottom:4px;padding-right:48px}.info-panel-sub{font-size:11px;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}.info-panel-body{display:flex;flex-direction:column;gap:12px;font-size:13px;line-height:1.5;color:var(--text2)}.info-panel-body .label{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text3);letter-spacing:.03em}.info-panel-body .value{color:var(--text)}@media(min-width:768px){.info-panel{left:auto;right:16px;bottom:16px;width:380px;border-radius:var(--radius);border:1px solid var(--border)}}.completion-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s}.completion-overlay.show{opacity:1;pointer-events:all}.completion-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;max-width:400px;width:90%;text-align:center;box-shadow:var(--shadow);transform:scale(0.9);transition:transform 0.35s cubic-bezier(.4,0,.2,1)}.completion-overlay.show .completion-card{transform:scale(1)}.completion-card .icon{font-size:48px;margin-bottom:12px}.completion-card h2{font-size:20px;font-weight:700;margin-bottom:8px}.completion-card p{font-size:13px;color:var(--text2);margin-bottom:20px;line-height:1.5}.completion-card .btn{min-height:48px;padding:0 24px;background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px}.challenge-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}.challenge-modal.show{opacity:1;pointer-events:all}.challenge-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;max-width:500px;width:92%;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow)}.challenge-card h2{font-size:18px;font-weight:700;margin-bottom:4px}.challenge-card .sub{font-size:12px;color:var(--text2);margin-bottom:16px}.challenge-q{font-size:14px;font-weight:600;margin-bottom:12px}.challenge-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.challenge-opts button{min-height:48px;padding:10px 14px;text-align:left;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;transition:all .2s}.challenge-opts button:hover{border-color:var(--accent)}.challenge-opts button.correct{background:rgba(16,185,129,0.15);border-color:var(--success);color:var(--success)}.challenge-opts button.wrong{background:rgba(239,68,68,0.15);border-color:var(--error);color:var(--error)}.challenge-feedback{font-size:13px;padding:12px;border-radius:var(--radius-sm);margin-bottom:12px;line-height:1.5}.challenge-progress{font-size:11px;color:var(--text3);text-align:center}.error-boundary{display:none;flex-direction:column;align-items:center;justify-content:center;padding:48px 16px;text-align:center;gap:16px;min-height:60vh}.error-boundary.show{display:flex}.error-boundary .icon{font-size:48px}.error-boundary h2{font-size:20px;font-weight:700}.error-boundary p{font-size:13px;color:var(--text2);max-width:400px;line-height:1.5}.error-boundary .btn{min-height:48px;padding:0 24px;background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-size:14px;font-weight:600}@media(max-width:640px){.toolbar{padding:8px 12px}.toolbar-title{font-size:13px}.toolbar-controls input[type="range"]{width:60px}.viz-area{padding:8px}}@media(prefers-reduced-motion){*,:after,:before{animation-duration:0s!important;transition-duration:0s!important}}.comp-node{cursor:pointer;transition:transform .3s,filter .3s}.comp-node:hover{transform:scale(1.05)}.comp-node.selected filter:drop-shadow(0 0 12px var(--accent))}.comp-node .lbl{font-size:10px;font-weight:600;fill:var(--text2);text-anchor:middle}.comp-node .slbl{font-size:8px;fill:var(--text3);text-anchor:middle}.node-conn{stroke:var(--border);stroke-width:1.5;opacity:0.3;fill:none}.flow-p{fill:var(--accent);opacity:0.6}.viz-exploded{position:relative;width:100%;max-width:700px;aspect-ratio:4/3;margin:0 auto}.viz-exploded svg{width:100%;height:100%;display:block}