:root{--ink:#0e1831;--paper:#f2eee5;--violet:#8d7ea4;--amber:#efc877;--indigo:#111d3d}*{box-sizing:border-box}html,body{background:var(--indigo);min-height:100%;margin:0}body{color:var(--paper);font-family:Inter,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}button{color:inherit;font:inherit}button:focus-visible{outline-offset:3px;outline:2px solid #f7dfa8}.opening-screen,.hub-shell{isolation:isolate;background:#101a37;min-height:100svh;position:relative;overflow:hidden}.opening-image,.hub-scene{z-index:-3;background-position:50%;background-size:cover;position:fixed;inset:0;transform:scale(1.01)}.opening-image{background-image:url(/stills/opening.png);animation:16s ease-in-out infinite alternate drift}.opening-wash{z-index:-2;background:linear-gradient(90deg,#091127d1,#0b142a8c 42%,#0e162b14 72%),linear-gradient(#0000 44%,#0a10239e);position:fixed;inset:0}.opening-wash:after{content:"";mix-blend-mode:screen;background:radial-gradient(circle at 68% 31%,#efc8771f,#0000 22%);position:absolute;inset:0}.opening-header,.hub-header{z-index:4;align-items:center;padding:28px clamp(24px,4vw,64px);display:flex;position:relative}.brand-mark{aspect-ratio:1;background:#f1ecdf1c;border:1px solid #f7efdc94;place-items:center;width:44px;display:grid;transform:rotate(45deg);box-shadow:inset 0 0 0 5px #ffffff0a,0 9px 30px #080e1e2e}.brand-mark span{font-family:Songti SC,serif;font-size:17px;transform:rotate(-45deg)}.brand-mark.compact{flex:none;width:38px}.brand-copy{flex-direction:column;margin-left:15px;display:flex}.brand-copy b,.brand-button b{letter-spacing:.12em;font-size:15px}.brand-copy small,.brand-button small{letter-spacing:.22em;opacity:.58;margin-top:3px;font-size:8px}.demo-badge{letter-spacing:.16em;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0c142c2e;border:1px solid #f7efdc42;border-radius:999px;margin-left:auto;padding:8px 13px;font-size:9px}.opening-copy{z-index:2;width:min(620px,100% - 48px);margin:clamp(88px,16vh,160px) 0 0 clamp(24px,8vw,128px);position:relative}.opening-kicker{color:#ead8ae;letter-spacing:.32em;margin:0 0 14px;font-size:12px}.opening-copy h1{letter-spacing:.06em;text-shadow:0 16px 60px #0409177a;margin:0;font-family:Songti SC,STSong,serif;font-size:clamp(55px,8vw,112px);font-weight:400;line-height:.98}.opening-poem{color:#f5f1e7b8;letter-spacing:.12em;width:min(460px,100%);margin:27px 0 0;font-family:Songti SC,serif;font-size:clamp(15px,1.5vw,20px);line-height:1.8}.primary-cta{cursor:pointer;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(120deg,#f0dfb830,#70669124);border:1px solid #f5ecd970;border-radius:999px;align-items:center;gap:42px;margin-top:42px;padding:15px 18px 15px 25px;transition:all .25s;display:inline-flex;box-shadow:0 15px 45px #060c1e59}.primary-cta:hover{background-color:#f4e5c51f;transform:translateY(-2px)}.primary-cta span{letter-spacing:.15em;font-size:14px}.primary-cta i{color:#19203a;background:#ead29a;border-radius:50%;place-items:center;width:31px;height:31px;font-style:normal;display:grid}.opening-footnote{color:#f5f1e780;letter-spacing:.17em;align-items:center;gap:15px;font-size:10px;display:flex;position:absolute;bottom:33px;left:clamp(24px,8vw,128px)}.opening-footnote i{background:#f5f1e747;width:26px;height:1px}.hub-shell{--scene:url(/stills/free-play.png);grid-template-rows:auto auto auto 1fr;min-height:100svh;padding-bottom:24px;display:grid}.hub-scene{background-image:var(--scene);transition:background-image .5s}.hub-veil{z-index:-2;background:linear-gradient(#08102452,#08102440 32%,#080e1fe0 72%,#0b142d),linear-gradient(90deg,#09112680,#0000 55%);position:fixed;inset:0}.hub-header{justify-content:space-between;padding-block:18px}.brand-button{cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:13px;display:flex}.brand-button>span:last-child{flex-direction:column;display:flex}.connect-pill{cursor:pointer;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);letter-spacing:.08em;background:#121c3973;border:1px solid #efe1c552;border-radius:999px;align-items:center;gap:10px;padding:10px 14px;font-size:12px;display:flex;box-shadow:0 8px 30px #070d1d3d}.connect-pill>span{color:#e7cf9c;font-size:17px}.signal-dot{background:#e7cf9c;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 5px #e7cf9c1a,0 0 18px #e7cf9c}.round-button{cursor:pointer;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#121c3961;border:1px solid #efe1c547;border-radius:50%;width:38px;height:38px}.hub-intro{text-shadow:0 6px 24px #040a1880;padding:clamp(8px,2vh,20px) clamp(24px,5vw,76px) 14px}.hub-intro p{color:#e7cf9c;letter-spacing:.34em;margin:0 0 4px;font-size:9px}.hub-intro h1{letter-spacing:.08em;margin:0;font-family:Songti SC,serif;font-size:clamp(36px,5vw,68px);font-weight:400;line-height:1.1}.hub-intro span{color:#f5f1e8ad;letter-spacing:.12em;margin-top:8px;font-family:Songti SC,serif;font-size:13px;display:block}.mode-switcher{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px clamp(24px,5vw,76px) 16px;display:grid}.mode-card{cursor:pointer;text-align:left;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0d173080;border:1px solid #ebe2cf33;border-radius:8px;min-height:116px;transition:transform .25s,border-color .25s,background .25s;position:relative;overflow:hidden;box-shadow:0 18px 42px #040a1833}.mode-card:after{content:"";background:linear-gradient(90deg,#081023e6,#0810237a 65%,#0000);position:absolute;inset:0}.mode-card:hover{border-color:#eed5a28f;transform:translateY(-3px)}.mode-card.active{background:#4036538c;border-color:#eed5a2c7;box-shadow:0 14px 44px #060c1c59,inset 0 -3px #dfc484}.mode-thumb{opacity:.62;filter:saturate(.72);background-position:50%;background-size:cover;position:absolute;inset:0}.mode-card-copy{z-index:2;flex-direction:column;width:82%;padding:18px;display:flex;position:relative}.mode-card-copy small{color:#ddc896;letter-spacing:.2em;font-size:8px}.mode-card-copy b{letter-spacing:.08em;margin-top:6px;font-family:Songti SC,serif;font-size:21px;font-weight:400}.mode-card-copy em{color:#f2ede2a1;letter-spacing:.06em;margin-top:7px;font-size:10px;font-style:normal;line-height:1.5}.mode-card>i{z-index:2;color:#f6edd9b3;font-style:normal;position:absolute;top:13px;right:13px}.chapter-dock{-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);background:#0a132ab8;border:1px solid #ede1c933;border-radius:10px;align-self:end;width:calc(100% - clamp(32px,8vw,122px));margin:0 auto;padding:16px 18px 14px;box-shadow:0 25px 80px #0308155c}.chapter-heading{justify-content:space-between;align-items:end;gap:16px;margin-bottom:12px;display:flex}.chapter-heading small{color:#d6bd87;letter-spacing:.22em;font-size:8px}.chapter-heading h2{letter-spacing:.08em;margin:3px 0 0;font-family:Songti SC,serif;font-size:16px;font-weight:400}.chapter-heading>span{color:#f2ece094;letter-spacing:.08em;font-size:10px}.chapter-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;display:grid}.chapter-card{cursor:pointer;text-align:left;background:#ece7db0d;border:1px solid #ebe1cc24;border-radius:6px;grid-template-columns:76px 1fr auto;align-items:center;gap:10px;min-height:104px;padding:9px;transition:all .2s;display:grid;position:relative;overflow:hidden}.chapter-card:hover{background:#ece7db1a}.chapter-card.selected{background:linear-gradient(120deg,#876f8947,#dfc1851a);border-color:#e4c990b3;box-shadow:inset 0 -2px #e8cc94cc}.chapter-image{filter:saturate(.7)brightness(.8);background-position:50%;background-size:cover;border-radius:4px;width:76px;height:84px}.chapter-card.selected .chapter-image{filter:saturate(.9)brightness(.95)}.chapter-number{color:#fff9e9b8;text-shadow:0 2px 8px #050b19;font-family:Georgia,serif;font-size:15px;position:absolute;top:12px;left:15px}.chapter-copy{flex-direction:column;min-width:0;display:flex}.chapter-copy small{color:#d5be8b;letter-spacing:.08em;font-size:7px}.chapter-copy b{letter-spacing:.06em;margin-top:5px;font-family:Songti SC,serif;font-size:16px;font-weight:400}.chapter-copy em{color:#f2ede18a;margin-top:5px;font-size:9px;font-style:normal;line-height:1.4}.chapter-state{color:#f2ece073;background:#ebdcbd14;border-radius:999px;align-self:start;padding:4px 6px;font-size:7px}.chapter-card.selected .chapter-state{color:#17203a;background:#ddc389}.dock-footer{align-items:center;gap:18px;margin-top:12px;display:flex}.knowledge-strip{color:#f2ece0a8;letter-spacing:.04em;flex:1;align-items:center;gap:12px;min-width:0;font-family:Songti SC,serif;font-size:11px;display:flex}.knowledge-strip b{color:#ddc389;white-space:nowrap;letter-spacing:.12em;font-family:Inter,sans-serif;font-size:8px}.knowledge-strip i{background:#ebdbbb47;width:1px;height:17px}.knowledge-strip span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.enter-button{cursor:pointer;letter-spacing:.09em;white-space:nowrap;background:#e5ca911f;border:1px solid #eed6a57a;border-radius:999px;align-items:center;gap:18px;padding:10px 12px 10px 17px;font-size:11px;display:flex}.enter-button span{color:#17203a;background:#ddc389;border-radius:50%;place-items:center;width:25px;height:25px;display:grid}@keyframes drift{0%{transform:scale(1.01)translate(0,0)}to{transform:scale(1.055)translate(-.7%,-.4%)}}@media (width<=1050px){.chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chapter-dock{margin-top:4px}.hub-shell{overflow:auto}}@media (width<=720px){.opening-header,.hub-header{padding-inline:18px}.opening-copy{margin-left:24px}.opening-copy h1{font-size:clamp(50px,16vw,72px)}.opening-footnote{flex-wrap:wrap;left:24px;right:24px}.connect-pill{z-index:10;background:#101a36e6;position:fixed;bottom:14px;left:50%;transform:translate(-50%)}.hub-intro,.mode-switcher{padding-inline:18px}.mode-switcher{grid-template-columns:1fr}.mode-card{min-height:88px}.mode-card-copy{padding:13px 15px}.mode-card-copy em{display:none}.chapter-dock{width:calc(100% - 24px);margin-bottom:58px}.chapter-grid{grid-template-columns:1fr}.chapter-card{min-height:90px}.chapter-image{height:72px}.chapter-heading>span{display:none}.dock-footer{flex-direction:column;align-items:stretch}.knowledge-strip span{white-space:normal}.enter-button{justify-content:center}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.practice-shell{isolation:isolate;background:#0b1430;grid-template-rows:auto auto 1fr auto auto auto;min-height:100svh;display:grid;position:relative;overflow:hidden}.practice-background{z-index:-3;background-image:var(--practice-frame);background-position:50%;background-size:cover;transition:background-image .55s;position:fixed;inset:0}.practice-veil{z-index:-2;background:linear-gradient(#070e2099,#0810252e 30%,#080f2275 60%,#070d1ef0 91%),radial-gradient(circle at 50% 44%,#0000 0 18%,#070e2033 56%);position:fixed;inset:0}.practice-header{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:16px clamp(18px,4vw,58px);display:grid}.back-pill{cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0912285c;border:1px solid #eee1c93d;border-radius:999px;justify-self:start;align-items:center;gap:10px;padding:8px 12px;font-size:11px;display:flex}.back-pill span{opacity:.72;letter-spacing:.05em}.practice-title{text-shadow:0 4px 16px #030816b3;flex-direction:column;align-items:center;display:flex}.practice-title small{color:#e3ca93;letter-spacing:.2em;font-size:8px}.practice-title b{letter-spacing:.12em;margin-top:3px;font-family:Songti SC,serif;font-size:22px;font-weight:400}.connect-pill.in-stage{justify-self:end}.practice-caption{text-align:center;text-shadow:0 5px 20px #050b1c;padding:0 clamp(20px,5vw,76px) 10px}.practice-caption span{color:#e3ca93;letter-spacing:.18em;font-size:9px}.practice-caption p{color:#f6f1e5b8;letter-spacing:.08em;margin:7px auto 0;font-family:Songti SC,serif;font-size:12px}.practice-workspace{grid-template-columns:minmax(150px,210px) minmax(320px,1fr) minmax(110px,150px);align-items:center;gap:clamp(18px,4vw,70px);width:min(1160px,100% - 48px);margin:0 auto;display:grid}.chord-bank{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0a132a80;border:1px solid #efe3cc29;border-radius:8px;gap:7px;padding:10px;display:grid}.chord-bank>small,.journey-meter>small{color:#efe1c594;letter-spacing:.18em;text-transform:uppercase;padding:4px 5px;font-size:7px}.chord-bank button{cursor:pointer;text-align:left;background:#f1eadb0a;border:1px solid #0000;border-radius:5px;grid-template-columns:25px 1fr auto;align-items:center;gap:7px;min-height:43px;padding:6px 8px;display:grid}.chord-bank button.active{background:linear-gradient(100deg,#846f8d59,#e5c9901a);border-color:#e8cf9d8c}.chord-bank button>span{color:#d9c28f;font-family:Georgia,serif;font-size:9px}.chord-bank button b{font-size:clamp(12px,1.2vw,17px);font-weight:500}.chord-bank button em{color:#f4efe373;font-size:8px;font-style:normal}.target-orbit{text-align:center;text-shadow:0 4px 18px #02071299;align-self:center}.lamp-core{aspect-ratio:1;-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);background:radial-gradient(circle,#efc7772e,#74638b21 42%,#0b152f61 72%);border:1px solid #e8d3a95c;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:clamp(178px,18vw,242px);margin:0 auto;display:flex;position:relative;box-shadow:inset 0 0 45px #f5d38e17,0 0 80px #060d1e59}.lamp-core:before,.lamp-core:after{content:"";border:1px solid #e9d3a829;border-radius:50%;animation:4.5s ease-out infinite pulse-ring;position:absolute;inset:-14px}.lamp-core:after{animation-delay:1.4s;inset:-31px}.lamp-core.awake{box-shadow:inset 0 0 65px #f9d89140,0 0 90px #efc77738}.lamp-core span{color:#d7bf8b;letter-spacing:.18em;font-size:8px}.lamp-core b{letter-spacing:.05em;width:78%;margin-top:8px;font-family:Songti SC,serif;font-size:clamp(23px,2.7vw,39px);font-weight:400;line-height:1.12}.lamp-core small{color:#f6f0e294;width:76%;margin-top:7px;font-size:9px;line-height:1.45}.target-notes{justify-content:center;gap:7px;margin-top:22px;display:flex}.target-notes span{color:#f4eee199;background:#0a142c5c;border:1px solid #eee0c238;border-radius:999px;min-width:42px;padding:6px 8px;font-size:9px}.target-notes span.caught{color:#fff2cf;background:#e0c28438;border-color:#e5c987;box-shadow:0 0 22px #e5c98733}.practice-feedback{color:#f7f1e3b3;letter-spacing:.07em;min-height:17px;margin:13px 0 0;font-family:Songti SC,serif;font-size:10px}.stage-actions{justify-content:center;gap:8px;margin-top:10px;display:flex}.stage-actions button{cursor:pointer;color:#f7f0e1b8;letter-spacing:.07em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0b152e70;border:1px solid #eddbb540;border-radius:999px;padding:7px 11px;font-size:8px}.stage-actions button:hover{color:#fff4dc;border-color:#e5c98e94}.journey-meter{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0a132a7a;border:1px solid #efe3cc26;border-radius:8px;flex-direction:column;align-self:stretch;align-items:center;padding:11px 12px;display:flex}.journey-meter strong{margin:4px 0 10px;font-family:Georgia,serif;font-size:25px;font-weight:400}.meter-track{background:#f2ead91a;border-radius:999px;flex:1;width:7px;min-height:116px;position:relative;box-shadow:inset 0 0 0 1px #f2ead914}.meter-track>i{border-radius:inherit;background:linear-gradient(#e6c985,#807399);transition:height .35s;position:absolute;bottom:0;left:0;right:0;box-shadow:0 0 22px #dec3894d}.meter-track .line{color:#f3ebdb73;font-family:Georgia,serif;font-size:7px;position:absolute;left:15px}.meter-track .line:before{content:"";background:#efdfbf47;width:12px;height:1px;position:absolute;top:50%;right:calc(100% + 4px)}.meter-track .sixty{bottom:60%}.meter-track .ninety{bottom:90%}.journey-meter p{color:#f5efe275;text-align:center;font-size:7px;line-height:1.7}.bpm-select{color:#f2ecde85;grid-template-columns:auto auto auto;align-items:center;gap:4px;margin-top:10px;font-size:7px;display:grid}.bpm-select select{appearance:none;color:#f3e6c7;text-align:center;background:#eddcb81f;border:0;border-radius:4px;outline:0;width:35px;padding:4px}.bpm-select i{font-style:normal}.step-rail{grid-template-columns:repeat(16,minmax(0,1fr));gap:4px;width:min(1080px,100% - 48px);margin:7px auto 8px;display:grid}.step-rail span{color:#f2ebde59;background:#09122770;border:1px solid #ede0c61f;border-radius:3px;place-items:center;height:21px;font-family:Georgia,serif;font-size:7px;display:grid}.step-rail span.current{color:#fff1cb;background:#e2c47f2e;border-color:#e2c47f;box-shadow:0 0 16px #e2c47f2e}.step-rail span.done{color:#d9f4e5;background:#4f876c54;border-color:#8ec7ac80}.step-rail span.missed{color:#d8cada;background:#66567a47;border-color:#9f91ae57}.screen-keyboard{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#081023a8;border:1px solid #efe1c72e;border-bottom:0;border-radius:9px 9px 0 0;grid-template-columns:repeat(36,minmax(10px,1fr));align-items:end;gap:1px;width:min(1180px,100% - 32px);height:clamp(74px,12vh,116px);margin:0 auto;padding:7px 7px 0;display:grid;box-shadow:0 -18px 50px #03081433}.screen-keyboard button{cursor:pointer;border:0;border-radius:2px 2px 0 0;min-width:0;height:100%;padding:0;transition:background 80ms,box-shadow 80ms,transform 80ms;position:relative}.screen-keyboard button.white{background:linear-gradient(#eee9df,#bfc2c2)}.screen-keyboard button.black{z-index:2;background:linear-gradient(#182039,#090f20);align-self:start;height:66%;box-shadow:0 7px 8px #02060f7a}.screen-keyboard button.target{box-shadow:inset 0 -9px #dabc7dbf,0 0 15px #e0c38624}.screen-keyboard button.black.target{background:linear-gradient(#6e617e,#262039);box-shadow:inset 0 -7px #e5c787b3,0 7px 8px #02060f7a}.screen-keyboard button.pressed,.screen-keyboard button.caught{background:linear-gradient(#ffe8ad,#d2a95f);transform:translateY(2px);box-shadow:0 0 22px #f4cd7d8c}.screen-keyboard button small{color:#4c5260;writing-mode:vertical-rl;font-size:5px;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.screen-keyboard button.black small{color:#f2ebdb66}.practice-footer{color:#f2eada59;letter-spacing:.05em;background:#070d1df0;justify-content:space-between;align-items:center;gap:14px;padding:7px clamp(18px,4vw,58px) 9px;font-size:7px;display:flex}.practice-footer p{text-align:center;margin:0}@keyframes pulse-ring{0%{opacity:0;transform:scale(.93)}20%{opacity:.8}to{opacity:0;transform:scale(1.1)}}@media (width<=880px){.practice-shell{min-height:100svh;overflow:auto}.practice-workspace{grid-template-columns:1fr 115px;gap:13px;width:calc(100% - 28px)}.chord-bank{order:2;grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}.chord-bank>small{display:none}.chord-bank button{text-align:center;grid-template-columns:auto;gap:2px}.chord-bank button>span,.chord-bank button em{display:none}.target-orbit,.journey-meter{order:1}.screen-keyboard{min-height:88px;overflow-x:auto}.practice-footer{flex-wrap:wrap;justify-content:center}}@media (width<=620px){.practice-header{grid-template-columns:1fr auto}.practice-title{align-items:end}.connect-pill.in-stage{z-index:20;position:fixed;bottom:8px;left:50%;right:auto;transform:translate(-50%)}.practice-workspace{grid-template-columns:1fr}.journey-meter{grid-template-columns:auto auto 1fr;align-items:center;gap:9px;min-height:46px;display:grid}.journey-meter strong{margin:0}.meter-track{width:100%;height:6px;min-height:6px}.meter-track>i{width:var(--meter-width,0);top:0;height:100%!important}.meter-track .line,.journey-meter p,.bpm-select{display:none}.chord-bank{grid-template-columns:repeat(2,1fr)}.lamp-core{width:165px}.lamp-core:after{display:none}.target-notes{flex-wrap:wrap;margin-top:14px}.step-rail{grid-template-columns:repeat(8,1fr);width:calc(100% - 24px)}.screen-keyboard{grid-template-columns:repeat(36,24px);justify-content:start;width:calc(100% - 12px);margin-bottom:46px}.practice-footer{display:none}}