.demo-root{--demo-plum:#3d2047;--demo-plum-2:#4d2763;--demo-rim:#e0c8ffcc;--demo-ease:cubic-bezier(.2, .8, .2, 1);--demo-bounce:cubic-bezier(.34, 1.56, .64, 1)}.demo-root .nav-link{cursor:default}.demo-nav{animation:demo-slide .6s var(--demo-ease) both;animation-delay:calc(var(--i) * 55ms)}.demo-sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.demo-main{min-height:100vh;padding:28px 34px;display:grid;position:relative;overflow:hidden}.demo-aurora{pointer-events:none;position:absolute;inset:0;overflow:hidden}.demo-aurora i{filter:blur(70px);opacity:.55;border-radius:50%;width:46vw;height:46vw;animation:22s ease-in-out infinite alternate demo-drift;position:absolute}.demo-aurora i:first-child{background:#c4a2ff;top:-18%;right:-10%}.demo-aurora i:nth-child(2){background:#f5b8ec;animation-duration:28s;animation-delay:-8s;bottom:-24%;right:12%}.demo-aurora i:nth-child(3){background:#b9c4ff;animation-duration:25s;animation-delay:-14s;top:30%;left:-16%}.demo-welcome{z-index:1;flex-direction:column;justify-content:center;align-items:center;gap:34px;display:flex;position:relative}.demo-forge{cursor:pointer;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);width:min(100%,1100px);height:340px;animation:demo-rise .9s var(--demo-ease) both;background:radial-gradient(600px 220px at 50% 100%,#c4a2ff59,#0000 70%),radial-gradient(400px 200px at 50% 0,#ffffffb3,#0000 70%),linear-gradient(#ffffffd9,#f3ecffbf);border:1px solid #ffffffe6;border-radius:30px;position:relative;overflow:hidden;box-shadow:0 30px 80px #5b3aa826,inset 0 1px #fff,inset 0 -30px 60px #e9dcff80;container-type:inline-size}.demo-forge:after{content:"";background:linear-gradient(90deg,#0000,#c4b5fd,#0000);border-radius:2px;height:2px;position:absolute;bottom:54px;left:8%;right:8%;box-shadow:0 0 18px #a855f780}.forge-rail{background:repeating-linear-gradient(90deg,#6b5a7c 0 6px,#0000 6px 12px) bottom/100% 5px no-repeat,linear-gradient(#9a8aa8,#5b4a6b 60%,#3e3249);height:16px;position:absolute;top:22px;left:0;right:0;box-shadow:0 6px 14px #3d204740,inset 0 1px #ffffff80}.forge-carriage{will-change:transform;background:linear-gradient(#8d7b9c,#4a3a59);border-radius:12px;place-items:center;width:104px;height:40px;display:grid;position:absolute;top:10px;left:0;box-shadow:0 10px 20px #3d204759,inset 0 1px #fff6}.forge-gear{fill:#d8c8ef;will-change:transform;width:34px;height:34px}.forge-gear circle{fill:#4a3a59}.forge-link{transform-origin:7px 7px;will-change:transform;background:linear-gradient(#a596b3,#4f3f5e);border-radius:8px;height:14px;position:absolute;top:-7px;left:-7px;box-shadow:0 6px 14px #3d204740,inset 0 1px #ffffff80}.forge-joint{will-change:transform;background:radial-gradient(circle at 35% 30%,#e9d5ff,#8b46e6 60%,#4c1d95);border-radius:50%;width:22px;height:22px;position:absolute;top:-11px;left:-11px;box-shadow:0 0 12px #a855f7}.forge-head{transform-origin:20px 40px;will-change:transform;background:linear-gradient(90deg,#4f3f5e,#b3a4c0 45%,#6d5b7e);border-radius:10px 10px 6px 6px;width:40px;height:40px;position:absolute;top:-40px;left:-20px;box-shadow:0 8px 16px #3d204759}.forge-head span{background:#c084fc;border-radius:3px;height:6px;transition:box-shadow .15s;position:absolute;bottom:-4px;left:4px;right:4px;box-shadow:0 0 10px #a855f7}.forge-head.hot span{background:#fdf4ff;box-shadow:0 0 18px #f0abfc,0 0 40px #a855f7}.forge-word{letter-spacing:-1px;color:#b8a6c9;white-space:nowrap;justify-content:center;font-family:Georgia,Times New Roman,serif;font-size:clamp(28px,9.4cqw,92px);line-height:1;display:flex;position:absolute;bottom:56px;left:0;right:0}.forge-word span{transform-origin:50% 100%;will-change:transform, opacity;display:inline-block}.forge-word span.keep{color:#2e1065}.forge-word span.set{color:#2e1065;text-shadow:0 0 22px #c084fc80;transition:text-shadow .6s}.forge-logo{opacity:0;filter:drop-shadow(0 10px 18px #7c3aed59);will-change:transform, opacity;width:64px;height:64px;position:absolute;top:0;left:0}.forge-logo.set{filter:drop-shadow(0 0 18px #c084fc)drop-shadow(0 10px 18px #7c3aed59);transition:filter .6s}.forge-dot{opacity:0;transform-origin:50% 100%;will-change:transform, opacity;background:radial-gradient(circle at 35% 30%,#ffc2d6,#ff4f8b 60%,#c2185b);border-radius:50%;position:absolute;top:0;left:0;box-shadow:0 0 14px #ff4f8b99}.forge-dust{opacity:0;pointer-events:none;will-change:transform, opacity;background:#c084fc;border-radius:2px;width:7px;height:7px;position:absolute;top:0;left:0;box-shadow:0 0 8px #e879f9}.forge-dust:nth-child(3n){background:#fff}.forge-shine{opacity:0;pointer-events:none;mix-blend-mode:soft-light;background:linear-gradient(90deg,#0000,#fff9,#0000);width:30%;position:absolute;top:0;bottom:0;left:0}.forge-replay{z-index:3;color:#5a2aa8;background:#ffffffb3;border:1px solid #ffffffe6;border-radius:50%;place-items:center;width:38px;height:38px;display:grid;position:absolute;bottom:14px;right:18px;box-shadow:0 6px 18px #5b3aa826}.demo-choices{z-index:1;perspective:1200px;flex-wrap:wrap;justify-content:center;gap:40px;display:flex;position:relative}.demo-choice{--mx:50%;--my:50%;isolation:isolate;color:#fff;cursor:pointer;width:320px;height:330px;transition:transform .5s var(--demo-ease), box-shadow .5s var(--demo-ease);animation:demo-rise .9s var(--demo-ease) both;animation-delay:calc(var(--i) * .14s);background:0 0;border:0;border-radius:30px;flex-direction:column;justify-content:flex-end;align-items:center;padding:0;display:flex;position:relative;overflow:hidden;box-shadow:0 30px 70px #3d204759}.demo-choice:before{content:"";z-index:-2;background:conic-gradient(from 0deg, transparent 0 45%, #f0abfc 60%, #c084fc 70%, #fff 78%, #a855f7 86%, transparent 96%);filter:blur(1px);animation:4.5s linear infinite demo-spin;position:absolute;inset:-50%}.demo-choice.student:before{animation-duration:5.2s;animation-direction:reverse}.demo-choice:after{content:"";z-index:-1;background:radial-gradient(260px 260px at var(--mx) var(--my), #c084fc40, transparent 70%), radial-gradient(300px 200px at 50% 0%, #a855f740, transparent 70%), linear-gradient(165deg, var(--demo-plum-2), var(--demo-plum) 60%, #2a1532);border-radius:27px;position:absolute;inset:3px;box-shadow:inset 0 0 22px #ead8ff59,inset 0 0 60px #a855f740,inset 0 1px #fff6}.demo-choice:hover,.demo-choice:focus-visible{transform:translateY(-10px)rotateX(4deg);box-shadow:0 40px 90px #3d204780,0 0 50px #a855f759}.demo-choice:focus-visible{outline-offset:6px;outline:3px solid #e9d5ff}.demo-choice-shine{z-index:-1;pointer-events:none;background:linear-gradient(110deg,#0000 30%,#ffffff1f 45%,#fff3 50%,#ffffff1f 55%,#0000 70%) 0 0/260% 100%;border-radius:27px;animation:6s linear infinite demo-shine;position:absolute;inset:3px}.demo-choice-art{place-items:center;display:grid;position:absolute;inset:0 0 96px}.demo-choice-label{letter-spacing:-.2px;border:1.5px solid var(--demo-rim);text-shadow:0 0 14px #e9d5ff99;background:#ffffff12;border-radius:999px;align-items:center;gap:12px;margin-bottom:32px;padding:14px 26px;font-size:18px;font-weight:700;display:flex;box-shadow:inset 0 0 16px #d8b4fe73,inset 0 0 34px #a855f74d}.demo-choice-label svg{transition:transform .4s var(--demo-ease)}.demo-choice:hover .demo-choice-label svg{transform:translate(6px)}.demo-mini-book{place-items:center;width:230px;height:200px;display:grid;position:relative}.demo-mini-ring,.demo-mini-track{width:230px;height:100px;position:absolute;top:50px;left:0;transform:rotate(-14deg)}.demo-mini-ring{border:1.5px solid #e9d5ff8c;border-radius:50%;box-shadow:0 0 26px #c084fc66,inset 0 0 22px #c084fc4d}.demo-mini-track i,.demo-book-track i{offset-path:path("M 0 50 A 115 50 0 1 1 230 50 A 115 50 0 1 1 0 50");offset-rotate:0deg;background:radial-gradient(circle at 35% 35%,#fdf4ff,#e879f9 45%,#a21caf);border-radius:50%;width:16px;height:16px;margin:-8px 0 0 -8px;animation:5s linear infinite demo-orbit;position:absolute;top:0;left:0;box-shadow:0 0 16px #e879f9}.demo-mini-tile,.demo-book-tile-face{background:linear-gradient(150deg,#ffffffd9,#f1e8ffb3 60%,#e4d4ff99);border:1.5px solid #fff;border-radius:28px;place-items:center;width:118px;height:112px;animation:5s ease-in-out infinite demo-float;display:grid;position:relative;box-shadow:0 26px 50px #1a0b2299,inset 0 -10px 22px #cdb4ff99,inset 0 2px #fff}.demo-mini-review{place-items:center;width:210px;height:210px;display:grid;position:relative}.demo-mini-gauge{position:absolute;inset:20px;transform:rotate(-90deg)}.demo-mini-gauge circle{fill:none;stroke-width:9px;stroke-linecap:round}.demo-mini-gauge .track{stroke:#ffffff1f}.demo-mini-gauge .fill{stroke:#e879f9;stroke-dasharray:100;filter:drop-shadow(0 0 8px #e879f9);animation:demo-gauge 4s var(--demo-ease) infinite}.demo-mini-orbit{animation:9s linear infinite demo-spin;position:absolute;inset:0}.demo-mini-orbit i{background:linear-gradient(135deg,#c084fc,#7c3aed);border:2px solid #fffc;border-radius:50%;width:24px;height:24px;position:absolute;box-shadow:0 0 14px #a855f7}.demo-mini-orbit i:first-child{top:0;left:calc(50% - 12px)}.demo-mini-orbit i:nth-child(2){background:linear-gradient(135deg,#f0abfc,#c026d3);bottom:22px;left:14px}.demo-mini-orbit i:nth-child(3){background:linear-gradient(135deg,#a5b4fc,#6366f1);bottom:22px;right:14px}.demo-mini-check{color:#fff;width:84px;height:84px;animation:demo-pop 4s var(--demo-bounce) infinite;background:radial-gradient(circle at 35% 30%,#d8b4fe,#8b46e6 60%,#5b21b6);border-radius:50%;place-items:center;display:grid;box-shadow:0 0 40px #a855f7aa,inset 0 2px #ffffff80}.demo-sparkles{pointer-events:none;position:absolute;inset:0}.demo-sparkles i{clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 6px #f0abfc);width:10px;height:10px;animation:2.8s ease-in-out infinite demo-twinkle;animation-delay:calc(var(--i) * .7s);background:#fff;position:absolute}.demo-sparkles i:first-child{top:8%;left:14%}.demo-sparkles i:nth-child(2){width:14px;height:14px;top:18%;right:8%}.demo-sparkles i:nth-child(3){width:8px;height:8px;bottom:10%;left:22%}.demo-sparkles i:nth-child(4){bottom:16%;right:18%}.demo-scene{z-index:1;grid-template-rows:1fr 1fr;grid-template-columns:1.55fr 1fr;gap:22px;min-height:calc(100vh - 56px);display:grid;position:relative}.demo-scene.student{grid-template-areas:"globe a""globe b"}.demo-scene.teacher{grid-template-columns:1fr 1.55fr;grid-template-areas:"a globe""b globe"}.demo-globe-tile{grid-area:globe}.demo-a{grid-area:a}.demo-b{grid-area:b}.demo-tile{-webkit-backdrop-filter:blur(18px)saturate(150%);backdrop-filter:blur(18px)saturate(150%);min-height:0;animation:demo-rise .9s var(--demo-ease) both;animation-delay:calc(var(--i) * .12s);background:#ffffff8f;border:1px solid #ffffffe0;border-radius:28px;place-items:center;display:grid;position:relative;overflow:hidden;box-shadow:0 12px 40px #5b3aa814,inset 0 1px #ffffffe6}.demo-globe-tile{background:radial-gradient(520px 420px at 50% 45%, #7c3aed4d, transparent 70%), linear-gradient(165deg, var(--demo-plum-2), var(--demo-plum) 55%, #24112c);border:1.5px solid var(--demo-rim);box-shadow:inset 0 0 22px #ead8ff59,inset 0 0 80px #a855f740,0 24px 60px #3d204759}.demo-switch{z-index:5;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffb3;border:1px solid #ffffffe6;border-radius:999px;align-items:center;gap:6px;padding:6px;display:flex;position:absolute;top:16px;right:16px;box-shadow:0 10px 30px #5b3aa826}.demo-scene.student .demo-switch{left:16px;right:auto}.demo-switch>span{background:#8a6fd040;width:1px;height:22px}.demo-switch button{color:#5a2aa8;background:0 0;border:0;border-radius:50%;place-items:center;width:40px;height:40px;display:grid}.demo-switch button[aria-pressed=true]{color:#fff;background:linear-gradient(135deg,#9550ee,#6a2fc0);box-shadow:0 6px 18px #8b46e666}.demo-globe{place-items:center;width:100%;height:100%;min-height:420px;display:grid;position:relative}.demo-globe canvas{cursor:grab;touch-action:none;border-radius:50%;outline:none}.demo-globe canvas.grabbing{cursor:grabbing}.demo-globe canvas:focus-visible{box-shadow:0 0 0 3px #e9d5ff}.demo-globe-badge{color:#fff;pointer-events:none;background:linear-gradient(135deg,#c084fc,#7c3aed);border-radius:18px;place-items:center;width:64px;height:64px;animation:4s ease-in-out infinite demo-float;display:grid;position:absolute;top:9%;right:9%;box-shadow:0 0 30px #a855f799,inset 0 2px #fff6}.demo-globe-hint{color:#e9d5ff;pointer-events:none;background:#ffffff14;border:1px solid #e0c8ff59;border-radius:999px;align-items:center;gap:10px;padding:8px 14px;animation:6s ease-in-out 1.2s both demo-hint;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.demo-globe-hint i{background:radial-gradient(circle at 35% 30%,#fff,#c084fc);border-radius:50%;width:16px;height:16px;animation:1.6s ease-in-out infinite demo-swipe;box-shadow:0 0 12px #c084fc}.demo-book-tile{background:radial-gradient(320px 200px at 50% 55%,#c9b2ff8c,#0000 70%),linear-gradient(160deg,#f6f0ffd9,#ece2ffc7)}.demo-book{place-items:center;width:320px;height:240px;display:grid;position:relative}.demo-book-halo{filter:blur(12px);background:radial-gradient(closest-side,#a855f74d,#0000);border-radius:50%;animation:4s ease-in-out infinite demo-breathe;position:absolute;inset:20px 40px}.demo-book-ring,.demo-book-track{width:320px;height:100px;position:absolute;top:70px;left:0;transform:rotate(-14deg)}.demo-book-ring{background:radial-gradient(closest-side,#c7a8ff80,#ddcbff33 70%,#0000);border:1.5px solid #ffffffe6;border-radius:50%;box-shadow:0 0 40px #b38bff80,inset 0 0 26px #fff9}.demo-book-track i{offset-path:path("M 0 50 A 160 50 0 1 1 320 50 A 160 50 0 1 1 0 50");animation-duration:6s}.demo-book-tile-face{border-radius:34px;width:140px;height:132px;box-shadow:0 30px 60px #6d28d940,inset 0 -12px 26px #cdb4ff99,inset 0 2px #fff}.demo-file-tile{background:radial-gradient(360px 260px at 55%,#ffe1cf,#0000 70%),linear-gradient(160deg,#fff4ec,#ffe7da)}.demo-cf{place-items:center;width:330px;height:300px;display:grid;position:relative}.demo-cf-orbit{border:1px solid #eebdaf99;border-radius:50%;animation:40s linear infinite demo-spin;position:absolute}.demo-cf-orbit.a{border-style:dashed;width:280px;height:280px;top:30px;left:-10px}.demo-cf-orbit.b{width:380px;height:380px;animation-duration:60s;animation-direction:reverse;top:-20px;left:-60px}.demo-cf-spark{z-index:2;color:#f08a5d;animation:3s ease-in-out infinite demo-twinkle;position:absolute}.demo-cf-spark.a{font-size:34px;top:6px;right:6px}.demo-cf-spark.b{font-size:28px;animation-delay:-1.5s;bottom:56px;left:-6px}.demo-cf-card{background:#fffdfa;border:1px solid #fff;border-radius:14px;width:230px;margin:-20px 0 0 -30px;padding:22px;animation:7s ease-in-out infinite demo-sway;position:relative;overflow:hidden;transform:rotate(-9deg);box-shadow:12px 22px 40px #b66a6626}.demo-cf-sheen{pointer-events:none;background:linear-gradient(100deg,#0000,#fffc,#0000);width:40%;animation:5s ease-in-out infinite demo-card-sheen;position:absolute;inset:-20% auto -20% -60%;transform:skew(-18deg)}.demo-cf-top{letter-spacing:.8px;color:#b98c9e;align-items:center;gap:10px;font-size:8px;display:flex}.demo-cf-top>span{color:#df9b55;background:#fff0da;border-radius:10px;place-items:center;width:40px;height:40px;display:grid}.demo-cf-top b{letter-spacing:0;color:#926278;margin-top:5px;font-size:10px;font-weight:500;display:block}.demo-cf-top i{background:#b1bfa1;border-radius:50%;width:7px;height:7px;margin-left:auto}.demo-cf-line{background:#f1e3dc;border-radius:5px;width:92%;height:5px;margin-top:22px}.demo-cf-line.short{width:62%;margin-top:8px}.demo-cf-rule{background:#f0e8e1;height:1px;margin:18px 0 12px}.demo-cf-check{color:#9c748a;align-items:center;gap:10px;margin:12px 0;font-size:10px;display:flex}.demo-cf-check>span{color:#8aa351;width:20px;height:20px;animation:demo-tick 5s var(--demo-bounce) infinite;animation-delay:calc(.4s + var(--i) * .4s);background:#e9f1d8;border-radius:50%;place-items:center;display:grid}.demo-cf-foot{letter-spacing:.8px;color:#b3879b;justify-content:space-between;margin-top:18px;font-size:7px;display:flex}.demo-cf-foot b{font-size:9px}.demo-cf-meter{background:#f0e4dd;border-radius:5px;height:4px;margin-top:6px;overflow:hidden}.demo-cf-meter span{transform-origin:0;width:75%;height:100%;animation:demo-grow 5s var(--demo-ease) infinite;background:linear-gradient(90deg,#f3aa76,#f08a5d);border-radius:5px;display:block}.demo-cf-stamp{z-index:3;color:#fff;width:58px;height:58px;animation:demo-stamp 5s var(--demo-bounce) infinite;background:#bed398;border:5px solid #ffe5d4;border-radius:50%;place-items:center;display:grid;position:absolute;top:40px;right:18px;box-shadow:0 8px 18px #8aa35140}.demo-cf-note{z-index:3;white-space:nowrap;background:#fffaf0;border:1px solid #fff;border-radius:12px;align-items:center;gap:10px;padding:14px;animation:6s ease-in-out infinite demo-note;display:flex;position:absolute;bottom:20px;right:-8px;transform:rotate(5deg);box-shadow:0 10px 26px #b3706926}.demo-cf-note>span{color:#e7a053;background:#fff0d1;border-radius:9px;place-items:center;width:36px;height:36px;display:grid}.demo-cf-note b{color:#a16c82;font-size:11px;font-weight:500}.demo-cf-note small{color:#b98d9f;margin-top:5px;font-size:9px;display:block}@keyframes demo-rise{0%{opacity:0;filter:blur(6px);transform:translateY(30px)scale(.94)}to{opacity:1;filter:none;transform:none}}@keyframes demo-slide{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:none}}@keyframes demo-drift{0%{transform:translate(0)scale(1)}to{transform:translate(-8vw,6vh)scale(1.15)}}@keyframes demo-spin{to{transform:rotate(360deg)}}@keyframes demo-shine{0%{background-position:130% 0}to{background-position:-130% 0}}@keyframes demo-orbit{to{offset-distance:100%}}@keyframes demo-float{0%,to{transform:translateY(0)rotate(-8deg)}50%{transform:translateY(-12px)rotate(-4deg)}}@keyframes demo-sway{0%,to{transform:rotate(-9deg)translateY(0)}50%{transform:rotate(-6deg)translateY(-8px)}}@keyframes demo-note{0%,to{transform:rotate(5deg)translateY(0)}50%{transform:rotate(3deg)translateY(-10px)}}@keyframes demo-breathe{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}@keyframes demo-gauge{0%{stroke-dashoffset:100px}55%,85%{stroke-dashoffset:12px}to{stroke-dashoffset:100px}}@keyframes demo-pop{0%,12%{opacity:.4;transform:scale(.6)}30%,85%{opacity:1;transform:scale(1)}to{opacity:.4;transform:scale(.6)}}@keyframes demo-stamp{0%,40%{transform:rotate(10deg)scale(1)}48%{transform:rotate(-6deg)scale(1.25)}58%,to{transform:rotate(10deg)scale(1)}}@keyframes demo-tick{0%,10%{transform:scale(0)}22%,86%{transform:scale(1)}to{transform:scale(0)}}@keyframes demo-grow{0%{transform:scaleX(0)}40%,85%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes demo-twinkle{0%,to{opacity:.35;transform:scale(.5)rotate(0)}50%{opacity:1;transform:scale(1.15)rotate(45deg)}}@keyframes demo-card-sheen{0%,50%{left:-60%}to{left:140%}}@keyframes demo-hint{0%{opacity:0}15%,75%{opacity:1}to{opacity:0}}@keyframes demo-swipe{0%,to{transform:translate(-10px)}50%{transform:translate(10px)}}@media (max-width:1250px){.demo-scene,.demo-scene.student,.demo-scene.teacher{grid-template:"globe globe""a b"/1fr 1fr}.demo-tile{min-height:320px}}@media (max-width:760px){.demo-main{padding:16px}.demo-forge{height:260px}.demo-scene,.demo-scene.student,.demo-scene.teacher{grid-template-columns:1fr;grid-template-areas:"globe""a""b"}.demo-globe{min-height:340px}.demo-choice{width:min(100%,320px)}.demo-choices{gap:24px}.demo-cf,.demo-book{transform:scale(.82)}}@media (prefers-reduced-motion:reduce){.demo-root *,.demo-root :before,.demo-root :after{transition:none!important;animation:none!important}}