:root {
  color-scheme: dark;
  --back: #090a18;
  --panel: #101225;
  --raised: #161a32;
  --ink: #f4f4fe;
  --muted: #aeb5d1;
  --line: #2b304e;
  --accent: #c3cdff;
  --highlight: #a4b3ff;
  --frame: 1240px;
  font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--back); color: var(--ink); font-size: 16px; line-height: 1.65; }
p, h1, h2, h3, h4, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .58; }
:focus-visible { outline: 2px solid #b5c4ff; outline-offset: 4px; }
[hidden] { display: none !important; }
.skip { position: fixed; z-index: 20; left: 14px; top: 12px; padding: 9px 15px; background: #fff; color: #0b1022; transform: translateY(-150%); }
.skip:focus { transform: none; }
.frame { width: min(var(--frame), calc(100% - 96px)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 5; background: #090a18ed; border-bottom: 1px solid #d5dbff17; backdrop-filter: blur(14px); }
.header-inner, .site-nav, .header-actions { display: flex; align-items: center; }
.header-inner { height: 71px; justify-content: space-between; gap: 23px; }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 19px; line-height: 1; font-weight: 760; letter-spacing: -.025em; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; color: #d5dcff; border: 1px solid #aebaff45; border-radius: 10px; background: radial-gradient(circle, #5666ac 0, #282e5c 60%, #171930 100%); font-size: 19px; box-shadow: inset 0 0 14px #8e9aff24; }
.site-nav { gap: 32px; }
.header-actions { gap: 22px; }
.site-nav a, .header-account { color: #c0c5dc; font-size: 14px; font-weight: 650; white-space: nowrap; }
.site-nav a:hover, .header-account:hover, .footer-links a:hover { color: white; }
.menu-toggle { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 47px; padding: 10px 17px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; line-height: 1.35; font-weight: 740; white-space: nowrap; transition: background .18s, border-color .18s, color .18s; }
.button.small { min-height: 36px; padding: 7px 13px; font-size: 13px; }
.button.primary { color: #10132a; background: #d3d9ff; }
.button.primary:hover { background: #edf0ff; }
.button.outline { border-color: #aebaff51; color: #e0e4ff; background: #191d3429; }
.button.outline:hover { background: #aebaff20; border-color: #bdc8ff8a; }
.button.ink { color: var(--ink); background: #24294a; }
.button.ink:hover { background: #373e67; }
.button.wide { width: 100%; }

#marketing { background: radial-gradient(ellipse 1000px 650px at 67% 230px, #171638 0%, #0c0d21 48%, #090a18 88%); }
.hero { min-height: 628px; padding-block: 47px 50px; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 32px; }
.hero-copy { position: relative; z-index: 1; }
.kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; color: var(--accent); font-size: 13px; line-height: 1.5; font-weight: 700; letter-spacing: .11em; }
.live-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #b1c6ff; box-shadow: 0 0 11px #7e9fff; }
.hero h1 { font-size: clamp(52px, 5.2vw, 80px); line-height: 1.1; letter-spacing: -.072em; font-weight: 800; }
.hero h1 em { color: #c5cbff; background: linear-gradient(108deg,#f4f2ff 5%,#a8baff 52%,#c4abff 94%); background-clip: text; -webkit-text-fill-color: transparent; font-style: normal; }
.hero-intro { margin-top: 22px; max-width: 410px; color: var(--muted); font-size: 16px; line-height: 1.95; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
.hero-actions .button.primary { box-shadow: 0 6px 30px #8a9bff36; }
.hero-lab { position: relative; isolation: isolate; overflow: hidden; height: 530px; border: 1px solid #7f8ed344; border-radius: 22px; background: radial-gradient(ellipse at 49% 48%,#24205f 0%,#131633 43%,#0a0d1f 72%); box-shadow: 0 16px 85px #38269c2b, inset 0 0 52px #5b4ed221; }
.hero-lab::before { content: ""; z-index: -1; position: absolute; inset: 0; opacity: .27; background-image: linear-gradient(#a3adff25 1px, transparent 1px), linear-gradient(90deg,#a3adff25 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at center, transparent 22%, black 97%); }
.hero-lab::after { content: ""; position: absolute; inset: auto 0 0; height: 106px; pointer-events: none; z-index: 1; background: linear-gradient(transparent,#090c1de8); }
#particle-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.lab-heading, .lab-tools { z-index: 2; position: absolute; top: 20px; font-size: 12px; color: #c2c9e9; letter-spacing: .09em; }
.lab-heading { left: 22px; display: flex; align-items: center; gap: 9px; font-weight: 710; }
.lab-tools { right: 22px; display: flex; align-items: center; gap: 11px; }
.palette-label { display: flex; align-items: center; gap: 5px; }
.palette-label select { min-height: 28px; padding: 2px 3px 2px 5px; border: 1px solid #9ca8db59; border-radius: 6px; background: #0d1024e8; color: #eef0ff; font-size: 12px; cursor: pointer; }
.hero-lab[data-palette="1"] .lab-fallback { filter: hue-rotate(-48deg) saturate(1.4); }
.hero-lab[data-palette="2"] .lab-fallback { filter: hue-rotate(151deg) saturate(1.35); }
.lab-fallback { position: absolute; width: min(54%, 330px); aspect-ratio: 1; top: 48%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; box-shadow: 0 0 50px #a99cff46, inset 0 0 80px #a99cff3b; background: radial-gradient(circle at 48% 47%,#f2e9ff 0%,#a4a3ff8c 8%,#656af64f 28%,transparent 69%); }
.lab-fallback i { position: absolute; inset: 19% -17%; border: 1px solid #b3afff8f; border-radius: 50%; transform: rotate(-25deg); box-shadow: 0 0 12px #9d88ff8c; }
.lab-fallback i:nth-child(2) { inset: 25% -10%; transform: rotate(-31deg); border-color: #8ac2ffe0; }
.lab-fallback i:nth-child(3) { inset: 20% -10%; transform: rotate(26deg); border-color: #d0a5ff92; }
.hero-lab[data-mode="spiral"] .lab-fallback i:nth-child(2) { transform: rotate(-67deg); inset: 16% -9%; }
.hero-lab[data-mode="spiral"] .lab-fallback i:nth-child(3) { transform: rotate(-67deg); inset: 30% 0; }
.hero-lab[data-mode="sphere"] .lab-fallback i { inset: 3%; transform: rotate(43deg); }
.hero-lab[data-mode="sphere"] .lab-fallback i:nth-child(2) { inset: 18% 3%; }
.hero-lab[data-mode="sphere"] .lab-fallback i:nth-child(3) { inset: 3% 25%; }
.hero-lab.is-rendering .lab-fallback { display: none; }
.lab-caption { position: absolute; bottom: 19px; left: 22px; right: 22px; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 12px; pointer-events: none; }
.lab-caption strong { font-size: 18px; line-height: 1.4; }
.lab-caption p { font-size: 12px; color: #bac2e3; margin-top: 3px; }
.lab-controls { display: flex; flex-wrap: wrap; gap: 5px; pointer-events: auto; }
.particle-mode, .particle-pause { min-height: 36px; padding: 5px 10px; border-radius: 8px; border: 1px solid #9ca8db59; background: #0d1024c9; color: #dce1fa; font-size: 12px; white-space: nowrap; }
.particle-mode:hover, .particle-pause:hover { background: #2a3154; }
.particle-mode[aria-pressed="true"] { background: #bdc6ff; border-color: #bdc6ff; color: #141936; font-weight: 740; }
.particle-pause { min-width: 35px; padding-inline: 7px; }

.lesson-rail { display: grid; grid-template-columns: repeat(4,1fr); border-block: 1px solid var(--line); padding-block: 16px; }
.lesson-rail > div { display: flex; align-items: baseline; justify-content: center; gap: 11px; }
.lesson-rail > div + div { border-left: 1px solid var(--line); }
.lesson-rail strong { color: #d9ddff; font-size: 30px; font-weight: 750; letter-spacing: -.035em; line-height: 1.3; }
.lesson-rail span { color: var(--muted); font-size: 13px; }
.section { padding-block: 94px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 26px; }
.section-heading > p { max-width: 380px; color: var(--muted); }
h2 { font-size: clamp(31px,3.6vw,49px); line-height: 1.19; letter-spacing: -.056em; font-weight: 790; }
h3 { font-size: 24px; line-height: 1.3; letter-spacing: -.025em; }
.project-grid { display: grid; grid-template-columns: .82fr 1.18fr; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 19px; }
.project-control { min-width: 0; }
.project-bar { display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); color: #c9d2ff; padding: 13px 23px; font-size: 12px; font-weight: 650; }
.project-body { padding: 25px 29px 29px; }
.project-art { position: relative; min-height: 350px; overflow: hidden; background: #211b47; }
.project-art img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: filter .24s; }
.project-art[data-scene="sunset"] img { filter: hue-rotate(42deg) saturate(1.16); }
.project-art[data-scene="forest"] img { filter: hue-rotate(278deg) saturate(.94); }
.project-art figcaption { position: absolute; bottom: 15px; left: 17px; background: #0e1123eb; color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 12px; }
.scene-choices { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 15px 0 9px; }
.scene-choices legend { padding: 0; margin-bottom: 7px; color: var(--muted); font-size: 13px; }
.scene { border: 1px solid #7986ba54; border-radius: 8px; padding: 5px 12px; min-height: 36px; background: #181c34; color: #d3dbff; font-size: 13px; }
.scene.active { background: #c0c9ff; color: #111630; border-color: #c0c9ff; font-weight: 700; }
.demo-line { min-height: 55px; margin-block: 10px; color: #e0e4f8; }
.quiet { color: var(--muted); font-size: 13px; }
.demo-note { margin-top: 10px; }

.curriculum-section { border-block: 1px solid #9ba9fa22; background: radial-gradient(ellipse at 10% 90%,#212048 0%,#111429 50%,#101225); }
.curriculum { display: grid; grid-template-columns: .82fr 1.18fr; align-items: start; gap: 52px; padding-block: 79px; }
.curriculum-intro > p:not(.kicker), .coaching-inner > div:first-child > p:not(.kicker) { color: var(--muted); margin-top: 15px; max-width: 390px; }
.text-link { display: inline-flex; gap: 8px; margin-top: 18px; color: #c5ceff; font-weight: 730; font-size: 14px; }
.text-link:hover { text-decoration: underline; }
.lesson-list, .faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 23px; line-height: 1; color: #bac5ff; }
details[open] > summary::after { content: "−"; }
.lesson-list summary { display: grid; grid-template-columns: 43px minmax(0,1fr) 83px; gap: 8px; align-items: center; padding: 16px 35px 16px 0; font-weight: 700; }
.lesson-number { color: #aabaff; font-size: 13px; font-weight: 760; font-variant-numeric: tabular-nums; }
.lesson-title { font-size: 17px; }
.lesson-time { text-align: right; font-size: 13px; color: var(--muted); font-weight: 520; }
.lesson-list details > p { padding: 0 34px 15px 51px; color: var(--muted); font-size: 14px; }
.coaching-inner { display: grid; grid-template-columns: .84fr 1.16fr; align-items: center; gap: 43px; }
.coaching-inner .button { margin-top: 21px; }
.conversation-sample { padding: 21px 24px 24px; border: 1px solid var(--line); border-radius: 17px; background: #13162b; }
.sample-title { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; color: #c3cbf5; font-size: 13px; }
.bubble { margin: 9px 28px 0 0; padding: 12px 14px; border-radius: 12px; background: #1d2342; color: #dbe0f8; font-size: 14px; }
.bubble.answer { margin: 9px 0 0 25px; background: #282c54; color: #eef0ff; }
.bubble b { display: block; margin-bottom: 2px; color: #bfcaff; font-size: 12px; }
.pricing-section { border-block: 1px solid #9ba9fa22; background: radial-gradient(ellipse at 65% 45%,#1a1c3f,#101225 73%); }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.price-card { display: flex; flex-direction: column; padding: 24px 26px 26px; border-radius: 17px; border: 1px solid #434a75; background: #161a34; }
.price-card.premium { background: #181831; border-color: #3c3f67; }
.price-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; align-items: baseline; }
.price { color: #e1e5ff; font-size: clamp(34px,4vw,54px); line-height: 1.1; letter-spacing: -.06em; font-weight: 780; white-space: nowrap; }
.price small { font-size: .54em; margin-right: 4px; }
.checklist { list-style: none; color: #d2d8ef; padding: 0; margin: 17px 0 20px; }
.checklist li { position: relative; padding-left: 21px; margin: 6px 0; }
.checklist li::before { position: absolute; left: 0; content: "✓"; color: #b6c4ff; }
.price-card .button { margin-top: auto; }
.price-note { margin-top: 14px; color: var(--muted); font-size: 14px; }
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 44px; }
.faq summary { padding: 15px 34px 15px 0; font-weight: 680; }
.faq details p { color: var(--muted); padding: 0 30px 14px 0; }
.footer { background: #0d0f20; border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 23px; min-height: 99px; padding-block: 20px; }
.footer-links { display: flex; flex-wrap: wrap; margin-left: auto; gap: 8px 17px; color: var(--muted); font-size: 13px; }
#operator-info { flex: 1 1 100%; text-align: right; }
#operator-info:empty { display: none; }

.workspace { padding-block: 48px 72px; min-height: 68vh; }
.workspace h1 { font-size: clamp(32px,4vw,50px); letter-spacing: -.05em; line-height: 1.18; }
.workspace .lead { max-width: 690px; margin: 12px 0 20px; color: var(--muted); }
.workspace-head { display: flex; justify-content: space-between; align-items: start; gap: 15px; margin-bottom: 24px; }
.workspace-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 15px; }
.panel { margin: 0 0 15px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); overflow-wrap: anywhere; }
.panel h2 { font-size: 24px; letter-spacing: -.035em; margin-bottom: 10px; }
.panel h3 { font-size: 18px; margin-bottom: 7px; }
.panel p + p { margin-top: 7px; }
.panel ul, .panel ol { padding-left: 20px; }
.panel .button { margin-top: 10px; }
.policy { max-width: 760px; }
.policy h2 { margin-top: 21px; font-size: 21px; }
.policy-text { white-space: pre-wrap; }
.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px 7px; }
.row-actions .button { min-height: 35px; margin-top: 3px; padding: 6px 10px; font-size: 13px; }
.status { background: #222b52; border-radius: 6px; color: #cad6ff; font-size: 13px; font-weight: 650; padding: 3px 8px; }
.subtle-link { color: #c4d0ff; text-decoration: underline; text-underline-offset: 3px; }
.form { display: grid; gap: 12px; margin-top: 13px; }
.form label { display: grid; gap: 5px; font-size: 14px; font-weight: 650; }
.form input, .form textarea, .form select { width: 100%; background: #101329; border: 1px solid #555e8a; border-radius: 8px; padding: 8px 10px; }
.form textarea { min-height: 80px; resize: vertical; }
.form .button { justify-self: start; margin: 0; }
.form .field-inline { display: flex; align-items: start; gap: 8px; font-weight: 500; }
.form .field-inline input { width: 18px; height: 18px; flex: 0 0 18px; margin: 4px 0 0; padding: 0; accent-color: #879cff; }
.thread { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.thread article { background: #1a203b; border-radius: 8px; padding: 8px 10px; margin: 7px 0; white-space: pre-wrap; }
.thread article p { margin: 3px 0 0; }
.notice { margin: 12px 0 0; padding: 10px 13px; border-radius: 8px; background: #262746; color: #e1e3fa; font-size: 14px; }
.notice.error { background: #4a2435; color: #ffe1e6; }
.modal { width: min(510px,calc(100% - 26px)); max-height: min(92dvh,780px); padding: 20px 23px 23px; border: 1px solid #566095; border-radius: 17px; background: #171b35; color: var(--ink); overflow: auto; box-shadow: 0 20px 65px #04050bcf; }
.modal::backdrop { background: #050617ba; backdrop-filter: blur(5px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 12px; }
.dialog-head h2 { font-size: 25px; }
.close { width: 37px; height: 37px; border: 0; border-radius: 8px; background: #282f54; font-size: 24px; line-height: 1; }
.modal .button { margin-top: 9px; }
.modal .button + .button { margin-left: 6px; }
.total { margin-block: 5px 8px; font-size: 32px; font-weight: 800; letter-spacing: -.04em; }
.qr { display: block; width: 210px; height: 210px; padding: 10px; margin: 12px auto; background: white; }
.player { width: 100%; border-radius: 12px; background: #080a15; margin-top: 12px; aspect-ratio: 16/9; }
.empty { color: var(--muted); padding: 12px 0; }
.video-preview { margin-bottom: 14px; }
.video-preview summary { font-weight: 700; padding: 12px 37px 12px 0; }
.video-preview video { max-width: 650px; }
#course-room { scroll-margin-top: 96px; }

@media (max-width: 1100px) {
  .frame { width: calc(100% - 66px); }
  .hero { grid-template-columns: .89fr 1.11fr; min-height: 550px; gap: 22px; }
  .hero h1 { font-size: clamp(42px,5.75vw,65px); }
  .hero-lab { height: 460px; }
  .site-nav { gap: 19px; }
}
@media (max-width: 810px) {
  .frame { width: calc(100% - 36px); }
  .header-inner { height: 59px; gap: 9px; }
  .brand { font-size: 16px; gap: 7px; }
  .brand-mark { width: 27px; height: 27px; border-radius: 8px; font-size: 16px; }
  .header-actions { gap: 8px; }
  .header-actions .button.small { display: none; }
  .header-account { font-size: 12px; }
  .menu-toggle { display: inline-block; min-height: 33px; margin-left: auto; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: #d6dbf6; font-size: 12px; }
  .site-nav { display: none; position: absolute; inset: 59px 0 auto; background: var(--panel); padding: 9px 18px; justify-content: space-between; border-bottom: 1px solid var(--line); }
  .site-nav.open { display: flex; }
  .site-nav a { font-size: 13px; padding-block: 7px; }
  .hero { display: block; min-height: auto; padding-block: 33px 28px; }
  .hero h1 { font-size: clamp(39px,8.8vw,62px); line-height: 1.12; }
  .kicker { margin-bottom: 11px; }
  .hero-intro { margin-top: 14px; line-height: 1.75; font-size: 15px; }
  .hero-actions { margin-top: 19px; }
  .hero-lab { margin-top: 23px; height: clamp(320px,81vw,470px); border-radius: 16px; }
  .lab-heading, .lab-tools { top: 13px; font-size: 11px; }
  .lab-heading { left: 13px; }
  .lab-tools { right: 13px; gap: 6px; }
  .lab-caption { left: 13px; right: 13px; bottom: 13px; flex-wrap: wrap; align-items: center; gap: 7px; }
  .lab-caption strong { font-size: 16px; }
  .lab-caption p { font-size: 11px; }
  .particle-mode, .particle-pause { min-height: 36px; padding-inline: 8px; }
  .lesson-rail { padding-block: 12px; }
  .lesson-rail > div { gap: 3px; align-items: center; flex-direction: column; }
  .lesson-rail strong { font-size: 23px; }
  .lesson-rail span { font-size: 11px; }
  .section, .curriculum { padding-block: 48px; }
  .section-heading { display: block; margin-bottom: 20px; }
  .section-heading > p { margin-top: 10px; }
  .project-grid, .coaching-inner, .price-grid, .faq, .curriculum, .workspace-grid { grid-template-columns: 1fr; }
  .project-art { grid-row: 1; min-height: 0; aspect-ratio: 1.55; }
  .project-body { padding: 19px; }
  .project-bar { padding: 10px 19px; }
  .curriculum, .coaching-inner, .faq { gap: 23px; }
  .price-card { padding: 19px; }
  .lesson-list summary { grid-template-columns: 28px minmax(0,1fr) 63px; padding-right: 25px; gap: 6px; }
  .lesson-title { font-size: 15px; }
  .lesson-time { font-size: 12px; }
  .lesson-list details > p { padding-left: 34px; padding-right: 6px; }
  .footer-inner { gap: 11px; }
  .footer-links { margin: 0; }
  #operator-info { text-align: left; }
  .workspace { padding-block: 28px 46px; }
  .workspace-head { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .lab-caption { display: block; }
  .lab-controls { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.hero-lab.is-creating { animation: creation-light 1.16s ease-out; }
@keyframes creation-light {
  0%, 100% { border-color: #7f8ed344; box-shadow: 0 16px 85px #38269c2b, inset 0 0 52px #5b4ed221; }
  36% { border-color: #c6c4ffb8; box-shadow: 0 8px 106px #6256e658, inset 0 0 100px #b6a5ff45; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-lab.is-creating { animation: none; }
}