:root{--cp-ink:#0b1020;--cp-ink2:#141b33;--cp-line:#e4e7f2;--cp-muted:#5b6478;--cp-bg:#f6f7fb;--cp-card:#fff;--cp-cyan:#22d3ee;--cp-violet:#8b5cf6;--cp-lime:#a3e635;--cp-pink:#f472b6;--cp-radius:18px;--cp-font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;--cp-display:"Inter","Segoe UI",system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--cp-font);color:var(--cp-ink);background:var(--cp-bg);-webkit-font-smoothing:antialiased}a{color:inherit}img{max-width:100%}:focus-visible{outline:3px solid var(--cp-cyan);outline-offset:2px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.cp-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none}.cp-logo b{font-family:var(--cp-display);font-size:1.32rem;font-weight:900;letter-spacing:-.02em}.cp-logo.light b{color:#fff}.cp-logo.dark b{color:var(--cp-ink)}.cp-logo em{font-style:normal;background:linear-gradient(90deg,var(--cp-cyan),var(--cp-violet));-webkit-background-clip:text;background-clip:text;color:transparent}.cp-logo .cp-eye{animation:cp-blink 5s infinite;transform-origin:center;transform-box:fill-box}@keyframes cp-blink{0%,92%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}.cp-app .cp-logo b,.cp-play .cp-logo b,.cp-print .cp-logo b{color:var(--cp-ink)}.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 18px;border:0;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;font:800 .92rem var(--cp-font);text-decoration:none;cursor:pointer;box-shadow:0 10px 24px -12px #6d28d9;transition:transform .15s,box-shadow .15s,filter .15s;white-space:nowrap}.cp-btn:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 14px 28px -12px #6d28d9}.cp-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.cp-btn.ghost{background:#ffffff14;color:inherit;box-shadow:inset 0 0 0 1.5px #7f8cb473}.cp-btn.ghost:hover{background:#7f8cb424}.cp-btn.big{min-height:52px;padding:12px 24px;font-size:1rem;border-radius:14px}.cp-btn.small{min-height:34px;padding:6px 12px;font-size:.8rem;border-radius:10px}.cp-btn.wide{width:100%}.cp-btn.danger{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 10px 22px -12px #dc2626}.cp-link{border:0;background:none;padding:0;color:#6d28d9;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}.cp-muted{color:var(--cp-muted)}.small{font-size:.85rem}.cp-err{margin:8px 0;padding:10px 14px;border-radius:12px;background:#fef2f2;color:#991b1b;font-weight:700;font-size:.9rem;border:1px solid #fecaca}.cp-ok{margin:8px 0;padding:10px 14px;border-radius:12px;background:#f0fdf4;color:#166534;font-weight:700;font-size:.9rem;border:1px solid #bbf7d0}.cp-loading{display:flex;align-items:center;justify-content:center;gap:12px;min-height:40vh;color:var(--cp-muted);font-weight:700}.cp-spinner{width:22px;height:22px;border-radius:50%;border:3px solid #ddd6fe;border-top-color:#7c3aed;animation:cp-rot .8s linear infinite}.cp-spin{animation:cp-rot .8s linear infinite}@keyframes cp-rot{to{transform:rotate(360deg)}}.cp-center{display:grid;place-items:center;min-height:100vh;padding:20px}.cp-card{background:#fff;border-radius:var(--cp-radius);padding:28px;box-shadow:0 20px 50px -30px #0b102055}.cp-narrow{max-width:440px;text-align:center}.cp-chip{display:inline-block;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--tone,#7c3aed) 14%,#fff);color:color-mix(in srgb,var(--tone,#7c3aed) 80%,#000);font-size:.74rem;font-weight:800}.cp-avatar{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--tone,#7c3aed),color-mix(in srgb,var(--tone,#7c3aed) 55%,#22d3ee));color:#fff;font-weight:900;flex:none}.cp-avatar.small{width:32px;height:32px;font-size:.85rem}.cp-hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}.cp-hero-bg i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:cp-float 18s ease-in-out infinite alternate}.cp-hero-bg .b1{width:520px;height:520px;left:-120px;top:-140px;background:#7c3aed}.cp-hero-bg .b2{width:460px;height:460px;right:-120px;top:10%;background:#0891b2;animation-delay:-6s}.cp-hero-bg .b3{width:380px;height:380px;left:35%;bottom:-200px;background:#db2777;opacity:.35;animation-delay:-12s}@keyframes cp-float{to{transform:translate(60px,40px) scale(1.12)}}.cp-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}.cp-land{background:#070b18;color:#e8ecff;overflow-x:hidden}.cp-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;padding:14px clamp(16px,4vw,48px);background:#070b18b8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}.cp-home{text-decoration:none}.cp-top nav{display:flex;gap:22px;margin-left:24px}.cp-top nav a{color:#b9c2e6;text-decoration:none;font-weight:700;font-size:.9rem}.cp-top nav a:hover{color:#fff}.cp-top-actions{display:flex;gap:10px;margin-left:auto}.cp-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:40px;min-height:calc(100vh - 70px);padding:60px clamp(16px,5vw,72px) 90px}.cp-hero>*:not(.cp-hero-bg){position:relative;z-index:1}.cp-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:#8b5cf629;border:1px solid rgba(139,92,246,.4);color:#d8ccff;font-size:.82rem;font-weight:800}.cp-hero h1{margin:20px 0 18px;font-family:var(--cp-display);font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.04em;font-weight:900;color:#fff}.cp-grad{background:linear-gradient(90deg,#22d3ee,#a78bfa 50%,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:cp-shine 6s linear infinite}@keyframes cp-shine{to{background-position:200% center}}.cp-hero p{max-width:560px;font-size:1.13rem;line-height:1.6;color:#b9c2e6}.cp-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.cp-land .cp-btn.ghost,.cp-auth .cp-btn.ghost{color:#fff}.cp-hero-proof{display:flex;flex-wrap:wrap;gap:10px 26px;margin:34px 0 0;padding:0;list-style:none;color:#8f9bc8;font-size:.9rem}.cp-hero-proof b{color:#fff;font-size:1.05rem;margin-right:4px}.cp-hero-stage{position:relative;perspective:1600px}.cp-device{position:relative;border-radius:22px;overflow:hidden;background:#0d1328;border:1px solid rgba(255,255,255,.12);box-shadow:0 60px 120px -40px #7c3aed,0 30px 60px -30px #000;transform:rotateY(-12deg) rotateX(6deg);transition:transform .6s;animation:cp-bob 8s ease-in-out infinite}.cp-hero-stage:hover .cp-device{transform:rotateY(-4deg) rotateX(2deg)}@keyframes cp-bob{50%{translate:0 -10px}}.cp-device-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#111a35;border-bottom:1px solid rgba(255,255,255,.06)}.cp-device-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.cp-device-bar i:nth-child(2){background:#febc2e}.cp-device-bar i:nth-child(3){background:#28c840}.cp-device-bar span{margin-left:12px;padding:3px 12px;border-radius:8px;background:#0b1020;color:#7f8bb5;font-size:.72rem;font-weight:700}.cp-clip{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#0d1328}.cp-float{position:absolute;display:grid;gap:5px;padding:12px;border-radius:14px;background:#111a35d1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 40px -20px #000;animation:cp-bob 7s ease-in-out infinite}.cp-float.f1{left:-34px;bottom:12%;animation-delay:-2s}.cp-float.f2{right:-20px;top:-26px;font-family:Cascadia Code,Consolas,monospace;font-size:.78rem;color:#cfe4f2;animation-delay:-4s}.cp-float.f2 .k{color:#c084fc}.cp-float.f2 .s{color:#a3e635}.cp-float.f2 .n{color:#fbbf24}.cp-float.f3{right:8%;bottom:-24px;display:flex;align-items:center;gap:4px;color:#fbbf24;font-weight:800;font-size:.85rem}.cp-float.f3 span{color:#fff;margin-left:6px}.cp-blk{display:inline-block;padding:6px 12px;border-radius:9px;color:#fff;font-weight:800;font-size:.8rem;box-shadow:inset 0 -3px #0003}.cp-blk.orange{background:#f59f00;border-radius:14px 14px 9px 9px}.cp-blk.blue{background:#4c6ef5;margin-left:10px}.cp-blk b{display:inline-block;margin-left:4px;padding:0 6px;border-radius:999px;background:#fff;color:#1e293b}.cp-scroll{position:absolute;left:50%;bottom:22px;translate:-50% 0;color:#8f9bc8;animation:cp-bob 2.5s ease-in-out infinite}.cp-sec{position:relative;padding:100px clamp(16px,5vw,72px)}.cp-sec.cp-dark{background:linear-gradient(180deg,#070b18,#0c1430 40%,#070b18)}.cp-sec-head{max-width:760px;margin:0 auto 46px;text-align:center}.cp-kicker{display:inline-block;margin-bottom:10px;color:#22d3ee;font-size:.78rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.cp-sec h2,.cp-final h2{margin:0;font-family:var(--cp-display);font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.1;letter-spacing:-.03em;color:#fff}.cp-sec-head p{margin-top:14px;color:#b9c2e6;font-size:1.05rem;line-height:1.6}.cp-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}.cp-reveal.in{opacity:1;transform:none}.cp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1150px;margin:0 auto}.cp-step{position:relative;padding:26px;border-radius:22px;background:linear-gradient(160deg,#ffffff0f,#ffffff05);border:1px solid rgba(255,255,255,.09)}.cp-step-n{position:absolute;right:20px;top:14px;font-size:3.4rem;font-weight:900;color:#ffffff0f}.cp-step-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,#7c3aed,#22d3ee);color:#fff;box-shadow:0 12px 24px -10px #7c3aed}.cp-step h3{margin:18px 0 8px;color:#fff;font-size:1.2rem}.cp-step p{margin:0;color:#aab4dc;line-height:1.55}.cp-show{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:22px;max-width:1150px;margin:46px auto 0}.cp-show-tabs{display:grid;gap:10px}.cp-show-tabs button{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:#ffffff08;color:#cfd6f5;text-align:left;cursor:pointer;overflow:hidden;font:inherit;transition:background .2s,border-color .2s}.cp-show-tabs button>span{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;background:#22d3ee1f;color:#22d3ee}.cp-show-tabs button.on{background:#8b5cf624;border-color:#8b5cf680}.cp-show-tabs strong{display:block;color:#fff}.cp-show-tabs small{display:block;margin-top:3px;color:#9aa5cf;line-height:1.45;font-size:.84rem}.cp-show-bar{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,#22d3ee,#8b5cf6);animation:cp-progress 9s linear}@keyframes cp-progress{0%{width:0}to{width:100%}}.cp-show-video{position:relative;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 80px -40px #0891b2;background:#0d1328;aspect-ratio:16/10}.cp-show-slide{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .5s}.cp-show-slide.on{opacity:1}.cp-show-slide .cp-clip{height:100%}.cp-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1150px;margin:0 auto}.cp-stage{overflow:hidden;border-radius:22px;background:#0e1631;border:1px solid color-mix(in srgb,var(--tone) 40%,transparent);transition:transform .3s,box-shadow .3s}.cp-stage:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px var(--tone)}.cp-stage-img{aspect-ratio:16/10;overflow:hidden}.cp-stage-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.cp-stage:hover img{transform:scale(1.06)}.cp-stage-body{padding:20px}.cp-stage-body small{color:color-mix(in srgb,var(--tone) 60%,#fff);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}.cp-stage-body h3{margin:6px 0 8px;color:#fff;font-size:1.35rem}.cp-stage-body p{margin:0;color:#aab4dc;line-height:1.5}.cp-numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1150px;margin:40px auto 0;padding:26px;border-radius:22px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);text-align:center}.cp-numbers b{display:block;font-size:2.4rem;font-weight:900;background:linear-gradient(135deg,#22d3ee,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}.cp-numbers span{color:#9aa5cf;font-weight:700}.cp-teach{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:center;max-width:1150px;margin:0 auto}.cp-feats{display:grid;gap:18px;margin:28px 0 30px;padding:0;list-style:none}.cp-feats li{display:flex;gap:14px}.cp-feats li>svg{flex:none;margin-top:2px;padding:9px;width:40px;height:40px;border-radius:12px;background:#a3e6351f;color:#a3e635}.cp-feats strong{display:block;color:#fff}.cp-feats span{color:#aab4dc;line-height:1.5}.cp-mock{padding:20px;border-radius:22px;background:#fff;color:#0b1020;box-shadow:0 50px 100px -40px #7c3aed;transform:rotate(1.5deg)}.cp-mock-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.cp-mock-head b{font-size:1.1rem}.cp-mock-code{font-size:.8rem;color:#5b6478}.cp-mock-code code{padding:3px 8px;border-radius:7px;background:#ede9fe;color:#6d28d9;font-weight:900}.cp-mock-grid{display:grid;gap:7px}.cp-mock-row{display:grid;grid-template-columns:28px 54px repeat(8,1fr);gap:5px;align-items:center}.cp-mock-pic{font-size:1.1rem}.cp-mock-name{font-weight:700;font-size:.82rem}.cp-mock-row i{height:22px;border-radius:6px}.cp-mock-foot{display:flex;justify-content:space-between;margin-top:14px;font-size:.82rem;font-weight:800;color:#5b6478}.cp-mock-foot span{display:inline-flex;gap:5px;align-items:center}.s3{background:#16a34a}.s2{background:#4ade80}.s1{background:#bbf7d0}.s0{background:#fed7aa}.s-1{background:#eef0f6}.cp-login-demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;max-width:1150px;margin:70px auto 0;padding:34px;border-radius:24px;background:linear-gradient(135deg,#7c3aed2e,#0891b21f);border:1px solid rgba(255,255,255,.1)}.cp-login-demo h3{margin:0 0 10px;color:#fff;font-size:1.5rem}.cp-login-demo p{color:#b9c2e6;line-height:1.6}.cp-pics{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.cp-pics span{display:grid;place-items:center;aspect-ratio:1;border-radius:16px;background:#ffffff14;font-size:1.9rem;transition:transform .2s}.cp-pics span.on{background:#fff;box-shadow:0 0 0 4px #a3e635,0 14px 30px -10px #a3e635;transform:scale(1.08);animation:cp-pulse 2s ease-in-out infinite}@keyframes cp-pulse{50%{box-shadow:0 0 0 7px #a3e63566,0 14px 30px -10px #a3e635}}.cp-final{position:relative;overflow:hidden;padding:110px 20px;text-align:center}.cp-final>*:not(.cp-hero-bg){position:relative;z-index:1}.cp-final p{color:#b9c2e6;font-size:1.1rem}.cp-final .cp-hero-cta{justify-content:center}.cp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:26px clamp(16px,5vw,72px);border-top:1px solid rgba(255,255,255,.07);color:#7f8bb5;font-size:.85rem}.cp-auth{position:relative;min-height:100vh;padding:24px;background:#070b18;color:#e8ecff;overflow:hidden}.cp-auth-logo{position:relative;z-index:2;display:inline-block;text-decoration:none}.cp-auth-wrap{position:relative;z-index:1;display:flex;justify-content:center;align-items:stretch;gap:0;max-width:960px;margin:6vh auto 0}.cp-auth-side{flex:0 0 340px;padding:34px;border-radius:24px 0 0 24px;background:linear-gradient(160deg,#7c3aed,#2563eb 70%,#0891b2);color:#fff}.cp-auth-side h2{margin:14px 0}.cp-auth-side ul{padding-left:18px;line-height:1.9;font-weight:600}.cp-auth-card{flex:1;max-width:520px;padding:34px;border-radius:24px;background:#fff;color:var(--cp-ink);box-shadow:0 40px 90px -40px #000}.cp-auth-side+.cp-auth-card{border-radius:0 24px 24px 0}.cp-auth-card h1{margin:0 0 6px;font-size:1.65rem;letter-spacing:-.02em}.cp-form{display:grid;gap:14px;margin-top:18px}.cp-form label{display:grid;gap:6px;font-weight:800;font-size:.88rem}.cp-form label small{font-weight:600;color:var(--cp-muted)}.cp-form input,.cp-field input,.cp-field select,.cp-field textarea,.cp-panel textarea,.cp-inline input{width:100%;min-height:46px;padding:10px 14px;border:1.5px solid #d6dbea;border-radius:12px;background:#fff;color:var(--cp-ink);font:600 1rem var(--cp-font)}.cp-form input:focus,.cp-field input:focus,.cp-field select:focus,.cp-panel textarea:focus{border-color:#7c3aed;outline:0;box-shadow:0 0 0 4px #ede9fe}.cp-pass{position:relative;display:block}.cp-pass button{position:absolute;right:8px;top:50%;translate:0 -50%;border:0;background:none;color:var(--cp-muted);cursor:pointer;padding:6px}.cp-switch{margin:16px 0 0;text-align:center;color:var(--cp-muted);font-weight:600}.cp-switch a{color:#6d28d9;font-weight:800}.cp-switch.small{display:flex;justify-content:center;align-items:center;gap:6px;font-size:.85rem;margin-top:8px}.cp-join-icon{display:grid;place-items:center;width:62px;height:62px;margin-bottom:14px;border-radius:18px;background:linear-gradient(135deg,#a3e635,#22d3ee);color:#0b1020}.cp-code-input{text-align:center;font-size:2.2rem!important;font-weight:900!important;letter-spacing:.35em;text-transform:uppercase;min-height:76px!important;font-family:Cascadia Code,Consolas,monospace!important}.cp-word-input{font-size:1.3rem!important;text-align:center}.cp-class-banner{display:grid;gap:2px;margin:-34px -34px 22px;padding:22px 34px;border-radius:24px 24px 0 0;background:linear-gradient(135deg,var(--tone),color-mix(in srgb,var(--tone) 50%,#22d3ee));color:#fff}.cp-class-banner small{opacity:.85;font-weight:700}.cp-class-banner strong{font-size:1.5rem}.cp-class-banner span{font-weight:800;opacity:.9}.cp-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:16px 0}.cp-names button{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border-radius:14px;border:1.5px solid #e4e7f2;background:#fff;font:800 .95rem var(--cp-font);color:var(--cp-ink);cursor:pointer;text-align:left;transition:transform .15s,border-color .15s}.cp-names button:hover{transform:translateY(-2px);border-color:#7c3aed}.cp-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;border:0;background:none;color:var(--cp-muted);font:700 .88rem var(--cp-font);cursor:pointer;text-decoration:none}.cp-picgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:16px 0}.cp-picgrid button{display:grid;place-items:center;aspect-ratio:1;border-radius:16px;border:1.5px solid #e4e7f2;background:#f8f9fd;font-size:2rem;cursor:pointer;transition:transform .15s,background .15s}.cp-picgrid button:hover{transform:scale(1.08);background:#fff;border-color:#7c3aed}.cp-picgrid button.shake{animation:cp-shake .5s;border-color:#dc2626;background:#fef2f2}@keyframes cp-shake{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.cp-play{min-height:100vh;background:#f4f6fb}.cp-playbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;padding:10px clamp(12px,3vw,28px);background:#ffffffe0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--cp-line)}.cp-playbar a{text-decoration:none}.cp-playbar-class{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--cp-muted);font-size:.9rem}.cp-playbar-right{display:flex;align-items:center;gap:10px;margin-left:auto}.cp-play .cp-btn.ghost{color:var(--cp-ink)}.cp-me{display:flex;align-items:center;gap:8px}.cp-me-pic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#f1edff;font-size:1.4rem}.cp-me b{display:block;font-size:.9rem}.cp-me small{display:block;color:var(--cp-muted);font-size:.72rem;font-weight:700}.cp-sync{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:.75rem;font-weight:800;background:#f0fdf4;color:#166534}.cp-sync.saving{background:#eff6ff;color:#1d4ed8}.cp-sync.off{background:#fff7ed;color:#9a3412}.cp-guest{max-width:1400px;margin:12px auto 0;padding:10px 16px;border-radius:12px;background:#eef2ff;color:#3730a3;font-weight:700;font-size:.88rem}.cp-guest a{color:#6d28d9}.cp-wide{max-width:1400px;margin:14px auto}.cp-sim{max-width:1500px;margin:0 auto;padding:12px clamp(8px,2vw,20px) 40px}.rb-classtitle{display:inline-flex;align-items:center;gap:8px;font-size:1.1rem;font-weight:900;color:var(--studio-ink)}.rb-classtrail .rb-crumbs nav{flex-direction:column;align-items:flex-start;gap:2px}.rb-classtrail .rb-crumbs nav small{color:var(--studio-muted);font-weight:700}.cp-app{min-height:100vh;background:var(--cp-bg)}.cp-appbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:22px;padding:10px clamp(12px,3vw,32px);background:#ffffffe6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--cp-line)}.cp-appbar>a{text-decoration:none}.cp-appbar nav{display:flex;gap:4px}.cp-appbar nav a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;text-decoration:none;font-weight:800;font-size:.88rem;color:var(--cp-muted)}.cp-appbar nav a:hover{background:#f1f3f9;color:var(--cp-ink)}.cp-appbar nav a.on{background:#f1edff;color:#6d28d9}.cp-appbar-user{display:flex;align-items:center;gap:10px;margin-left:auto;font-weight:800;font-size:.9rem}.cp-app .cp-btn.ghost{color:var(--cp-ink)}.cp-app-main{max-width:1320px;margin:0 auto;padding:26px clamp(12px,3vw,32px) 60px}.cp-page h1{margin:4px 0 6px;font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.02em}.cp-welcome{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:28px;border-radius:24px;background:linear-gradient(135deg,#1e1b4b,#4c1d95 55%,#0e7490);color:#fff;position:relative;overflow:hidden}.cp-welcome:after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(#22d3ee55,transparent 70%)}.cp-welcome small{font-weight:800;opacity:.75;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}.cp-welcome h1{color:#fff}.cp-welcome p{margin:0;opacity:.85}.cp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0}.cp-kpi{display:flex;align-items:center;gap:12px;padding:16px;border-radius:16px;background:#fff;border:1px solid var(--cp-line)}.cp-kpi>span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--tone,#7c3aed) 12%,#fff);color:var(--tone,#7c3aed)}.cp-kpi b{display:block;font-size:1.45rem}.cp-kpi small{color:var(--cp-muted);font-weight:700;font-size:.78rem}.cp-classes{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;margin-top:8px}.cp-classcard{position:relative;display:block;padding:20px;border-radius:20px;background:#fff;border:1px solid var(--cp-line);text-decoration:none;overflow:hidden;transition:transform .15s,box-shadow .15s}.cp-classcard:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--tone),color-mix(in srgb,var(--tone) 40%,#22d3ee))}.cp-classcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px var(--tone)}.cp-classcard-top{display:flex;justify-content:space-between;align-items:center}.cp-code-chip{font-family:Cascadia Code,Consolas,monospace;font-weight:900;color:var(--cp-muted);font-size:.85rem;letter-spacing:.08em}.cp-classcard h3{margin:12px 0 4px;font-size:1.25rem}.cp-classcard p{margin:0 0 14px;color:var(--cp-muted);font-size:.86rem;font-weight:600}.cp-bar{height:8px;border-radius:5px;background:#eef0f6;overflow:hidden}.cp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--tone,#7c3aed),#22d3ee)}.cp-classcard-foot{display:flex;justify-content:space-between;margin-top:8px;font-size:.78rem;font-weight:700;color:var(--cp-muted)}.cp-classcard-foot span{display:inline-flex;gap:4px;align-items:center}.cp-classcard.add{display:grid;place-items:center;align-content:center;gap:8px;min-height:180px;border:2px dashed #d6dbea;background:transparent;color:var(--cp-muted);font-weight:800}.cp-classcard.add:before{display:none}.cp-classcard.add:hover{border-color:#7c3aed;color:#6d28d9}.cp-empty{display:grid;justify-items:center;gap:8px;margin:30px auto;padding:46px 24px;max-width:640px;text-align:center;border-radius:24px;background:#fff;border:1px solid var(--cp-line)}.cp-empty.small{padding:30px}.cp-empty h2{margin:6px 0}.cp-empty p{margin:0 0 12px;color:var(--cp-muted)}.cp-empty-art{position:relative;width:120px;height:120px;display:grid;place-items:center;font-size:3.6rem}.cp-empty-art i{position:absolute;width:14px;height:14px;border-radius:4px;animation:cp-orbit 6s linear infinite}.cp-empty-art i:nth-child(2){background:#22d3ee}.cp-empty-art i:nth-child(3){background:#a3e635;animation-delay:-2s}.cp-empty-art i:nth-child(4){background:#f472b6;animation-delay:-4s}@keyframes cp-orbit{0%{transform:rotate(0) translate(58px) rotate(0)}to{transform:rotate(360deg) translate(58px) rotate(-360deg)}}.cp-steps-nav{display:flex;gap:10px;margin:14px 0 18px;padding:0;list-style:none;flex-wrap:wrap}.cp-steps-nav li{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--cp-line);font-weight:800;font-size:.85rem;color:var(--cp-muted)}.cp-steps-nav li span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#eef0f6;font-size:.78rem}.cp-steps-nav li.on{border-color:#7c3aed;color:#6d28d9}.cp-steps-nav li.on span{background:#7c3aed;color:#fff}.cp-steps-nav li.done span{background:#16a34a;color:#fff}.cp-panel{padding:22px;border-radius:20px;background:#fff;border:1px solid var(--cp-line)}.cp-panel h2{margin:0 0 10px;font-size:1.2rem}.cp-panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.cp-panel.danger{border-color:#fecaca}.cp-field{display:grid;gap:7px;margin-bottom:18px;font-weight:800;font-size:.9rem}.cp-field>span{display:block}.cp-field small{font-weight:600;color:var(--cp-muted)}.cp-field textarea,.cp-panel textarea{min-height:120px;resize:vertical;font-weight:600;line-height:1.5}.cp-colors{display:flex;gap:8px}.cp-colors button{width:32px;height:32px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px #d6dbea;cursor:pointer}.cp-colors button.on{box-shadow:0 0 0 3px var(--cp-ink)}.cp-stage-pick,.cp-mode-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.cp-stage-pick button,.cp-mode-pick button{display:grid;gap:4px;padding:16px;border-radius:16px;border:1.5px solid #e4e7f2;background:#fff;text-align:left;font:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s}.cp-stage-pick button small,.cp-mode-pick button small{color:var(--cp-muted);font-weight:600;line-height:1.4}.cp-stage-pick button.on,.cp-mode-pick button.on,.cp-grade-pick button.on{border-color:#7c3aed;box-shadow:0 0 0 4px #ede9fe}.cp-mode-pics{font-size:1.5rem;font-weight:900;color:#6d28d9}.cp-grade-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.cp-grade-pick button{display:grid;gap:2px;padding:0 0 10px;border-radius:16px;border:1.5px solid #e4e7f2;background:#fff;overflow:hidden;cursor:pointer;font:inherit;text-align:left}.cp-grade-pick img{width:100%;aspect-ratio:16/9;object-fit:cover}.cp-grade-pick b,.cp-grade-pick small{padding:0 12px}.cp-grade-pick small{color:var(--cp-muted);font-weight:600}.cp-gradeinfo{margin-top:6px;padding:14px 16px;border-radius:14px;background:#f5f3ff;color:#3b0764;line-height:1.5}.cp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.cp-tags span{padding:3px 10px;border-radius:999px;background:#fff;font-size:.76rem;font-weight:800;color:#6d28d9}.cp-wiz-actions{display:flex;justify-content:space-between;gap:10px;margin-top:16px}.cp-picker{display:grid;gap:10px}.cp-picker-head{position:sticky;top:60px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:#f5f3ff;font-weight:700}.cp-search{display:flex;align-items:center;gap:6px;flex:1;min-width:200px;padding:0 12px;border-radius:10px;background:#fff;border:1px solid #e4e7f2;color:var(--cp-muted)}.cp-search input{flex:1;border:0;min-height:36px;font:600 .9rem var(--cp-font);outline:0;background:transparent}.cp-pk-grade{border:1px solid var(--cp-line);border-radius:16px;overflow:hidden}.cp-pk-grade.mine{border-color:#c4b5fd}.cp-pk-ghead{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border:0;background:#fafbff;font:inherit;cursor:pointer;text-align:left}.cp-pk-ghead small{color:var(--cp-muted);font-weight:600}.cp-pk-count{margin-left:auto;font-weight:800;color:var(--cp-muted);font-size:.85rem}.cp-pk-trail{padding:10px 14px;border-top:1px solid var(--cp-line)}.cp-pk-trailhead{display:flex;align-items:center;gap:10px;cursor:pointer}.cp-pk-trailhead img{width:56px;height:35px;object-fit:cover;border-radius:7px}.cp-pk-trailhead small{display:block;color:var(--cp-muted);font-weight:600;font-size:.78rem}.cp-pk-levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;margin:10px 0 4px 26px}.cp-pk-levels label{display:flex;gap:8px;align-items:flex-start;padding:7px 9px;border-radius:10px;border:1px solid #eef0f6;cursor:pointer;font-weight:700;font-size:.86rem}.cp-pk-levels label.on{background:#f5f3ff;border-color:#c4b5fd}.cp-pk-levels small{display:block;color:var(--cp-muted);font-weight:600;font-size:.74rem}.cp-pk-levels input,.cp-pk-trailhead input{width:18px;height:18px;accent-color:#7c3aed;flex:none;margin-top:1px}.cp-classhead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;padding:24px;border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--tone) 12%,#fff),#fff);border:1px solid color-mix(in srgb,var(--tone) 30%,var(--cp-line))}.cp-classhead p{margin:0;color:var(--cp-muted);font-weight:600}.cp-codebox{display:grid;gap:6px;padding:16px 18px;border-radius:18px;background:#0b1020;color:#fff;min-width:280px}.cp-codebox small{color:#9aa5cf;font-weight:700}.cp-codebox>b{font-family:Cascadia Code,Consolas,monospace;font-size:2rem;letter-spacing:.2em;background:linear-gradient(90deg,#22d3ee,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}.cp-codebox>div{display:flex;flex-wrap:wrap;gap:6px}.cp-codebox .cp-btn.ghost,.cp-codebox-hint b{color:#fff}.cp-tabs{display:flex;gap:4px;margin:18px 0 14px;border-bottom:1px solid var(--cp-line);overflow-x:auto}.cp-tabs a{display:inline-flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:3px solid transparent;text-decoration:none;font-weight:800;font-size:.9rem;color:var(--cp-muted);white-space:nowrap}.cp-tabs a.on{border-color:#7c3aed;color:#6d28d9}.cp-help{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;padding:12px 14px;border-radius:14px;background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;font-size:.88rem;line-height:1.7}.cp-help>div{display:flex;flex-wrap:wrap;gap:4px 12px}.cp-help .cp-link{color:#9a3412}.cp-grid-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}.cp-seg{display:inline-flex;padding:3px;border-radius:11px;background:#eef0f6}.cp-seg button{border:0;background:none;padding:6px 12px;border-radius:9px;font:800 .82rem var(--cp-font);color:var(--cp-muted);cursor:pointer}.cp-seg button.on{background:#fff;color:var(--cp-ink);box-shadow:0 2px 6px -2px #0002}.cp-legend{display:inline-flex;align-items:center;gap:6px;margin-right:auto;font-size:.76rem;font-weight:700;color:var(--cp-muted)}.cp-legend i{width:14px;height:14px;border-radius:4px;margin-left:6px}.cp-heat-wrap{overflow:auto;border-radius:16px;border:1px solid var(--cp-line);background:#fff;max-height:70vh}.cp-heat{border-collapse:separate;border-spacing:0;font-size:.84rem}.cp-heat th,.cp-heat td{padding:4px;border-bottom:1px solid #f1f3f9}.cp-heat thead th{position:sticky;top:0;z-index:2;background:#fafbff;font-weight:800;color:var(--cp-muted)}.cp-heat thead th span{display:inline-grid;place-items:center;min-width:30px}.cp-heat .sticky{position:sticky;left:0;z-index:1;background:#fff;text-align:left;min-width:190px}.cp-heat thead .sticky{z-index:3;background:#fafbff;padding-left:14px}.cp-heat tbody th{display:flex;align-items:center;gap:8px;padding:6px 12px}.cp-heat tbody th small{display:block;color:var(--cp-muted);font-weight:600;font-size:.72rem}.cp-pic-sm{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#f5f3ff;font-size:1.2rem;flex:none}.cp-cell{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;font:900 .78rem var(--cp-font);color:#14532d;cursor:pointer;transition:transform .12s}.cp-cell:hover{transform:scale(1.15)}.cp-cell.s3{color:#fff}.cp-cell.s0{color:#9a3412}.cp-total{white-space:nowrap;text-align:center;padding:0 12px!important}.cp-total small{display:block;color:var(--cp-muted);font-weight:700}.cp-level-key{columns:3 220px;margin:14px 0 0;padding:0;list-style:none;font-size:.82rem;color:var(--cp-muted)}.cp-level-key li{padding:2px 0}.cp-level-key b{display:inline-block;min-width:24px;color:var(--cp-ink)}.cp-drawer-back{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0b102073;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;justify-content:flex-end}.cp-drawer{position:relative;width:min(540px,100%);height:100%;overflow:auto;padding:26px;background:#fff;box-shadow:-30px 0 60px -30px #000;animation:cp-slide .25s ease}@keyframes cp-slide{0%{transform:translate(40px);opacity:0}}.cp-drawer-x{position:absolute;right:16px;top:16px;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:#f1f3f9;cursor:pointer}.cp-drawer-who{display:flex;gap:14px;align-items:center;margin-bottom:16px}.cp-drawer-who h2{margin:2px 0 6px}.cp-drawer-who small{color:var(--cp-muted);font-weight:800}.cp-pic-lg{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:#f5f3ff;font-size:2rem}.cp-drawer-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}.cp-drawer-stats>div{padding:10px;border-radius:12px;background:#f8f9fd;text-align:center}.cp-drawer-stats b{font-size:1.2rem}.cp-drawer-stats small{display:block;color:var(--cp-muted);font-weight:700;font-size:.74rem}.cp-drawer h3{margin:20px 0 8px;font-size:1rem}.cp-code{margin:0;padding:14px 16px;border-radius:14px;background:#0b1020;color:#d7ecfa;font:600 .84rem/1.6 Cascadia Code,Consolas,monospace;overflow:auto;white-space:pre}.cp-stars{display:inline-flex;gap:2px;color:#cbd5e1}.cp-stars .got{color:#f59f00}.cp-cols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}.cp-roster{margin:0;padding:0;list-style:none}.cp-roster li{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid #f1f3f9}.cp-roster-name{flex:1;min-width:0}.cp-roster-name small{display:block;color:var(--cp-muted);font-weight:600;font-size:.76rem}.cp-roster-name code{padding:1px 6px;border-radius:6px;background:#f5f3ff;color:#6d28d9;font-weight:800}.cp-roster-actions{display:flex;gap:4px}.cp-icon{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:#f4f5fa;color:var(--cp-muted);cursor:pointer}.cp-icon:hover{background:#ede9fe;color:#6d28d9}.cp-icon.danger:hover{background:#fef2f2;color:#dc2626}.cp-inline{display:flex;flex:1;gap:6px}.cp-inline input{min-height:36px}.cp-toggle{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.85rem;color:var(--cp-muted)}.cp-panel .cp-btn.wide{margin-top:10px}.cp-print{padding:20px;background:#fff;min-height:100vh}.cp-print-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:1000px;margin:0 auto 16px;font-weight:700;color:var(--cp-muted)}.cp-print .cp-btn.ghost{color:var(--cp-ink)}.cp-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:0;max-width:1000px;margin:0 auto}.cp-logincard{padding:16px;border:1.5px dashed #c5cad9;break-inside:avoid;page-break-inside:avoid}.cp-lc-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:3px solid var(--tone);font-weight:900;color:var(--tone)}.cp-lc-body{display:flex;gap:14px;margin-top:12px}.cp-lc-secret{display:grid;place-items:center;align-content:center;width:110px;flex:none;padding:8px;border-radius:14px;background:color-mix(in srgb,var(--tone) 10%,#fff);text-align:center}.cp-lc-pic{font-size:3.4rem;line-height:1}.cp-lc-secret small{color:var(--cp-muted);font-weight:700}.cp-lc-secret b{font-size:1.05rem}.cp-lc-name{display:block;font-size:1.3rem;margin-bottom:4px}.cp-lc-info ol{margin:0;padding-left:18px;font-size:.8rem;line-height:1.55}.cp-lc-code{font-family:Cascadia Code,Consolas,monospace;letter-spacing:.12em;font-size:1rem}@media print{.cp-print-bar{display:none}.cp-print{padding:0}.cp-cards{max-width:none}body{background:#fff}@page{margin:10mm}}@media(max-width:1000px){.cp-hero,.cp-teach,.cp-show,.cp-login-demo{grid-template-columns:1fr}.cp-hero{min-height:auto;padding-top:40px}.cp-device{transform:none}.cp-float.f1{left:0}.cp-float.f2{right:0}.cp-steps,.cp-stages{grid-template-columns:1fr}.cp-numbers{grid-template-columns:repeat(2,1fr)}.cp-top nav{display:none}.cp-cols{grid-template-columns:1fr}.cp-auth-side{display:none}.cp-auth-side+.cp-auth-card{border-radius:24px}}@media(max-width:640px){.cp-top-actions .cp-btn{padding:8px 12px;font-size:.8rem}.cp-picgrid,.cp-pics{grid-template-columns:repeat(4,1fr)}.cp-appbar nav a span,.cp-hide-sm{display:none}.cp-appbar{gap:8px}.cp-appbar nav a{padding:8px}.cp-cards{grid-template-columns:1fr}.cp-auth-card{padding:24px}.cp-class-banner{margin:-24px -24px 18px;padding:18px 24px}.cp-float,.cp-playbar-class{display:none}}@media(max-width:640px){.cp-top-actions .cp-btn.ghost{display:none}}