.ob-root{z-index:50;color:var(--fg);font-family:var(--font-sans,system-ui, sans-serif);font-feature-settings:"ss01", "cv11";font-variant-numeric:tabular-nums;--ob-violet:#8b5cf6;--ob-a1:#ff4d9d;--ob-a2:#ff7a45;--ob-b1:#22d3ee;--ob-b2:#3b82f6;--ob-c1:#10b981;--ob-c2:#84cc16;--ob-d1:#f59e0b;--ob-d2:#fbbf24;--ob-divider:var(--border);background:0 0;position:fixed;inset:0;overflow:hidden}.ob-root .ob-frost{z-index:0;pointer-events:none;background:var(--glass);border:1px solid var(--border);-webkit-backdrop-filter:blur(28px)saturate(140%);box-shadow:var(--shadow-card);position:absolute;inset:0}:root[data-theme=dark] .ob-root .ob-frost{-webkit-backdrop-filter:blur(26px)saturate(118%)brightness(.88);background:linear-gradient(165deg,#050318e0,#02010feb);background:linear-gradient(165deg,lab(1.29319% 3.49414 -9.92971/.88),lab(.507858% 2.00083 -5.47419/.92));border-color:#ffffff0f;border-color:lab(100% 0 0/.06);box-shadow:inset 0 1px #ffffff0a,0 24px 48px -18px #010005a6;box-shadow:inset 0 1px lab(100% 0 0/.04),0 24px 48px -18px lab(.0247211% 1.24422 -2.95719/.65)}.ob-root .grain{z-index:1;pointer-events:none;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");position:absolute;inset:0}.ob-root .particles{z-index:2;pointer-events:none;position:absolute;inset:0;overflow:hidden}.ob-root .particle{filter:blur(.4px);opacity:.7;background:radial-gradient(circle,#fff 0%,#ffffff4d 40%,#0000 70%);border-radius:50%;animation:linear infinite obDrift;position:absolute}@keyframes obDrift{0%{opacity:0;transform:translateY(110vh)scale(.6)}10%{opacity:.7}90%{opacity:.7}to{opacity:0;transform:translate(20px,-20vh)scale(1.1)}}.ob-root .stage{z-index:5;width:100%;height:100%;position:relative;overflow:hidden}.ob-root .topbar{z-index:40;pointer-events:none;justify-content:space-between;align-items:center;padding:24px 32px;display:flex;position:absolute;top:0;left:0;right:0}.ob-root .brand{letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);pointer-events:auto;align-items:center;gap:10px;font-size:13px;display:flex}.ob-root .brand .dot{background:linear-gradient(135deg, var(--ob-violet), #22d3ee);border-radius:50%;width:8px;height:8px;box-shadow:0 0 14px #8b5cf6b3}.ob-root .brand b{color:var(--fg);letter-spacing:.18em;font-weight:600}.ob-root .topbar .meta{pointer-events:auto;align-items:center;gap:18px;display:flex}.ob-root .grid{z-index:10;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:2px;display:grid;position:absolute;inset:0}.ob-root .qslide{z-index:8;animation:.45s cubic-bezier(.22,1,.36,1) both obSlideIn;position:absolute;inset:0}@keyframes obSlideIn{0%{opacity:0;filter:blur(6px);transform:translateY(14px)scale(.985)}to{opacity:1;filter:blur();transform:none}}.ob-root .quad{cursor:pointer;background:0 0;border:none;outline:none;transition:transform .4s cubic-bezier(.22,1,.36,1),filter .4s cubic-bezier(.22,1,.36,1);animation:.55s cubic-bezier(.22,1,.36,1) both obQuadIn;position:relative;overflow:hidden}@keyframes obQuadIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.ob-root .quad:before{content:"";background-image:var(--motif);opacity:.15;pointer-events:none;background-position:50%;background-size:cover;transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1);position:absolute;inset:0}:root[data-theme=light] .ob-root .quad:before{opacity:.42}:root[data-theme=light] .ob-root .stage[data-anyhover="1"][data-selected="0"] .quad.is-hover:before{opacity:.72}:root[data-theme=light] .ob-root .quad.is-selected:before{opacity:.8}:root[data-theme=light] .ob-root .stage[data-selected="1"] .quad:not(.is-selected).is-hover:before{opacity:.4}:root[data-theme=light] .ob-root .quad .vignette{background:linear-gradient(180deg, transparent 0%, color-mix(in oklch, var(--fg) 14%, transparent) 100%)}.ob-root .quad:after{content:"";background:radial-gradient(420px 420px at var(--mx,50%) var(--my,50%), var(--bloom), transparent 60%);opacity:0;pointer-events:none;transition:opacity .35s;position:absolute;inset:0}.ob-root .quad .vignette{pointer-events:none;background:linear-gradient(#0000 0%,#02000d73 50%,#010006c7 100%);background:linear-gradient(#0000 0%,lab(.309088% 2.08046 -5.43135/.45) 50%,lab(.0871391% 1.50163 -3.69624/.78) 100%);position:absolute;inset:0}.ob-root .quad .corner{letter-spacing:.24em;text-transform:uppercase;color:var(--fg-muted);align-items:center;gap:10px;font-size:11px;font-weight:600;display:flex;position:absolute;top:28px;left:32px}.ob-root .quad .corner .key{border:1px solid var(--border);width:22px;height:22px;color:var(--fg-muted);font-size:11px;font-family:var(--font-mono,monospace);border-radius:6px;justify-content:center;align-items:center;display:inline-flex}.ob-root .quad.q-b .corner,.ob-root .quad.q-d .corner{flex-direction:row-reverse;left:auto;right:32px}.ob-root .quad .body{pointer-events:none;max-width:70%;padding:0 56px;transition:transform .45s cubic-bezier(.22,1,.36,1),color .35s;position:absolute;top:38%;left:0;right:0}.ob-root .quad.q-b .body,.ob-root .quad.q-d .body{text-align:right;margin-left:auto;left:auto;right:0}.ob-root .quad .body h2{letter-spacing:-.01em;color:var(--fg);text-wrap:balance;margin:0 0 12px;font-size:38px;font-weight:600;line-height:1.05}.ob-root .quad .body p{color:color-mix(in oklch, var(--fg) 78%, transparent);text-wrap:pretty;max-width:34ch;margin:0;font-size:18px;line-height:1.5}.ob-root .quad.q-b .body p,.ob-root .quad.q-d .body p{margin-left:auto}.ob-root .q-a{--c-1:var(--ob-a1);--c-2:var(--ob-a2);--bloom:#ff4d9d38;animation-delay:0s}.ob-root .q-b{--c-1:var(--ob-b1);--c-2:var(--ob-b2);--bloom:#22d3ee38;animation-delay:60ms}.ob-root .q-c{--c-1:var(--ob-c1);--c-2:var(--ob-c2);--bloom:#10b98138;animation-delay:.12s}.ob-root .q-d{--c-1:var(--ob-d1);--c-2:var(--ob-d2);--bloom:#f59e0b38;animation-delay:.18s}.ob-root .stage[data-anyhover="1"][data-selected="0"] .quad:not(.is-hover){filter:brightness(.42)saturate(.7)blur(2px);transform:scale(.985)}.ob-root .stage[data-selected="1"] .quad:not(.is-selected),.ob-root .stage[data-selected="1"] .quad:not(.is-selected).is-hover{filter:brightness(.55)saturate(.7);transform:none}.ob-root .stage[data-selected="1"] .quad:not(.is-selected).is-hover:before{opacity:.15;transform:none}.ob-root .stage[data-selected="1"] .quad:not(.is-selected).is-hover:after{opacity:0}.ob-root .quad.is-hover{filter:brightness(1.05);z-index:20}.ob-root .stage[data-anyhover="1"][data-selected="0"] .quad.is-hover:before{opacity:.62;transform:scale(1.06) translate(var(--px,0), var(--py,0))}.ob-root .stage[data-anyhover="1"][data-selected="0"] .quad.is-hover:after{opacity:1}.ob-root .quad.q-a.is-hover{transform-origin:100% 100%;transform:scale(1.04)}.ob-root .quad.q-b.is-hover{transform-origin:0 100%;transform:scale(1.04)}.ob-root .quad.q-c.is-hover{transform-origin:100% 0;transform:scale(1.04)}.ob-root .quad.q-d.is-hover{transform-origin:0 0;transform:scale(1.04)}.ob-root .quad.is-hover .body{transform:scale(1.04)}.ob-root .stage[data-selected="1"] .quad:not(.is-selected).is-hover .body{transform:none}.ob-root .quad.is-hover .body h2,.ob-root .quad.is-hover .body p{color:var(--fg)}.ob-root .quad.is-selected{z-index:25}.ob-root .quad.is-selected:before{opacity:.7}.ob-root .quad .neon{border:1.5px solid var(--c-1);box-shadow:0 0 24px var(--c-1) inset, 0 0 24px var(--c-1);opacity:0;pointer-events:none;border-radius:6px;transition:opacity .4s;position:absolute;inset:6px}.ob-root .quad.is-selected .neon{opacity:.9;animation:2.4s ease-in-out infinite obNeonPulse}@keyframes obNeonPulse{0%,to{box-shadow:0 0 18px var(--c-1) inset, 0 0 18px var(--c-1)}50%{box-shadow:0 0 36px var(--c-1) inset, 0 0 36px var(--c-1)}}.ob-root .ripple{border:1.5px solid var(--c-1);width:10px;height:10px;left:var(--rx);top:var(--ry);opacity:.9;pointer-events:none;border-radius:50%;animation:.8s ease-out forwards obRipple;position:absolute;transform:translate(-50%,-50%)scale(.2)}@keyframes obRipple{0%{opacity:.9;transform:translate(-50%,-50%)scale(.2)}to{opacity:0;transform:translate(-50%,-50%)scale(28)}}.ob-root .hud{z-index:35;pointer-events:none;flex-direction:column;align-items:center;gap:18px;animation:.8s cubic-bezier(.22,1.2,.36,1) both obHudIn;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes obHudIn{0%{opacity:0;transform:translate(-50%,calc(-50% - 20px))}to{opacity:1;transform:translate(-50%,-50%)}}.ob-root .hud .label{text-transform:uppercase;letter-spacing:.24em;color:var(--fg-muted);align-items:center;gap:14px;font-size:11px;font-weight:600;display:flex}.ob-root .hud .label .vline{background:var(--border-strong);width:18px;height:1px}.ob-root .progress{gap:4px;display:flex}.ob-root .progress .seg{background:var(--quiz-progress-track);border-radius:2px;width:24px;height:3px;transition:background .4s,box-shadow .4s}.ob-root .progress .seg.done{background:var(--ob-violet);box-shadow:0 0 10px #8b5cf6b3}.ob-root .progress .seg.now{background:var(--ob-violet);animation:1.6s ease-in-out infinite obSegPulse;box-shadow:0 0 14px #8b5cf6e6}@keyframes obSegPulse{0%,to{opacity:.7}50%{opacity:1}}.ob-root .pill{pointer-events:auto;background:var(--quiz-hud-glass);-webkit-backdrop-filter:blur(24px)saturate(1.2);border:1px solid var(--quiz-hud-border);box-shadow:var(--quiz-hud-glow), inset 0 1px 0 var(--border-strong);border-radius:24px;padding:30px 56px;position:relative}.ob-root .pill:before{content:"";pointer-events:none;background:linear-gradient(135deg,#ffffff0f,#0000 30% 70%,#8b5cf614);border-radius:24px;position:absolute;inset:0}.ob-root .pill h1{text-align:center;color:var(--fg);letter-spacing:-.015em;text-wrap:balance;max-width:18ch;margin:0;font-size:42px;font-weight:500;line-height:1.18;transition:opacity .3s,transform .3s}.ob-root .pill .qmark{font-family:var(--font-mono,monospace);color:var(--fg-subtle);letter-spacing:.2em;font-size:10px;position:absolute;top:14px;left:18px}.ob-root .nav{z-index:40;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;bottom:32px;left:32px;right:32px}.ob-root .nav .nav-spacer{pointer-events:none;flex:1;min-width:0}.ob-root .nav .center{letter-spacing:.2em;text-transform:uppercase;color:var(--fg-subtle);flex-direction:column;align-items:center;gap:8px;font-size:11px;display:flex}.ob-root .nav .center .keys{gap:6px;display:flex}.ob-root .nav .center .keys span{border:1px solid var(--border);min-width:22px;height:22px;font-family:var(--font-mono,monospace);color:var(--fg-muted);border-radius:6px;justify-content:center;align-items:center;padding:0 6px;font-size:11px;display:inline-flex}.ob-root .navbtn{pointer-events:auto;background:var(--glass-soft);border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);width:56px;height:56px;color:var(--fg);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:transform .25s,border-color .25s,box-shadow .25s,opacity .25s;display:flex}.ob-root .navbtn:hover{border-color:var(--border-strong);box-shadow:0 0 24px var(--brand-purple-glow);transform:scale(1.08)}.ob-root .navbtn[disabled],.ob-root .navbtn.disabled{opacity:.3;cursor:not-allowed}.ob-root .navbtn svg{stroke:currentColor;stroke-width:1.5px;fill:none;width:20px;height:20px}.ob-root .navbtn.ready{animation:2s ease-in-out infinite obNextPulse}@keyframes obNextPulse{0%,to{transform:scale(1);box-shadow:0 0 24px #8b5cf666}50%{transform:scale(1.04);box-shadow:0 0 36px #8b5cf6b3}}.ob-root .navbtn.shake{animation:.5s obShake}@keyframes obShake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.ob-root .ob-complete{z-index:50;flex-direction:column;justify-content:center;align-items:center;gap:36px;animation:.6s both obFadeUp;display:flex;position:absolute;inset:0}@keyframes obFadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.ob-root .ob-complete .micro{letter-spacing:.3em;text-transform:uppercase;color:var(--fg-muted);font-size:11px;font-weight:600}.ob-root .ob-complete .ob-complete-icon{background:linear-gradient(135deg, var(--ob-violet), #22d3ee);border-radius:50%;place-items:center;width:80px;height:80px;display:grid;box-shadow:0 0 60px #8b5cf680}.ob-root .ob-complete-title{color:var(--fg);letter-spacing:-.015em;text-align:center;margin:0 0 12px;font-size:36px;font-weight:600}.ob-root .ob-complete-body{color:var(--fg-muted);text-align:center;max-width:48ch;margin:0;font-size:17px;line-height:1.6}.ob-root .ob-complete-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.ob-root .ob-btn{letter-spacing:.02em;cursor:pointer;border:1px solid #0000;border-radius:99px;align-items:center;gap:10px;padding:14px 26px;font-family:inherit;font-size:14px;font-weight:500;transition:transform .2s,box-shadow .2s,background .2s;display:inline-flex}.ob-root .ob-btn-primary{background:linear-gradient(135deg, var(--ob-violet), #22d3ee);color:#0a0e27;font-weight:600;box-shadow:0 0 32px #8b5cf673}.ob-root .ob-btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 40px #8b5cf699}.ob-root .ob-btn-secondary{background:var(--glass-soft);border:1px solid var(--border);color:var(--fg);box-shadow:none}.ob-root .ob-btn-secondary:hover{border-color:var(--border-strong);background:var(--glass);transform:translateY(-1px)}@media (max-width:640px){.ob-root .grid{grid-template-rows:repeat(4,1fr);grid-template-columns:1fr;gap:2px}.ob-root .quad{border-bottom:1px solid var(--ob-divider)}.ob-root .quad .body{max-width:100%;padding:0 24px;top:50%;transform:translateY(-50%)}.ob-root .quad.q-b .body,.ob-root .quad.q-d .body{text-align:left}.ob-root .quad .body h2{font-size:22px}.ob-root .quad .body p{color:color-mix(in oklch, var(--fg) 72%, transparent);margin-top:6px;font-size:14px}.ob-root .quad .corner{font-size:10px;top:14px;left:20px;right:auto}.ob-root .quad.q-b .corner,.ob-root .quad.q-d .corner{left:20px;right:auto}.ob-root .hud{background:linear-gradient(180deg, color-mix(in oklch, var(--glass) 92%, transparent), color-mix(in oklch, var(--glass) 70%, transparent));border-bottom:1px solid var(--ob-divider);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);align-items:flex-start;gap:8px;padding:14px 16px 12px;top:0;left:0;right:0;transform:none}.ob-root .hud .label{font-size:10px}.ob-root .pill{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:none;width:100%;padding:6px 0 0}.ob-root .pill:before{display:none}.ob-root .pill h1{text-align:left;max-width:100%;font-size:20px;font-weight:500}.ob-root .nav{background:linear-gradient(0deg, color-mix(in oklch, var(--glass) 95%, transparent), color-mix(in oklch, var(--glass) 70%, transparent));border-top:1px solid var(--ob-divider);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:12px 16px;bottom:0;left:0;right:0}.ob-root .nav .center{display:none}.ob-root .grid{padding-top:88px;padding-bottom:88px}.ob-root .topbar{display:none}}