:root{--ink:#1d1d1f;--blue:#0071e3;--muted:#666b73}html{scroll-behavior:smooth}body{font-size:16px;background:#f5f5f7;overflow-x:hidden}main{max-width:1200px;padding-top:0}nav{padding-top:13px;padding-bottom:13px;background:#f9f9fbea}.brand{color:var(--ink);font-size:21px;letter-spacing:-.8px;display:flex;align-items:center;gap:7px}.brand-light{font-size:13px;color:#737781;letter-spacing:0;font-weight:500}.brand-dot{height:6px;width:6px;background:#0071e3;border-radius:50%;margin-left:2px}nav .links{gap:32px}nav .links a{color:#686d75;padding:8px 0}nav .links a.active{color:#0071e3}.nav-settings{padding:5px 12px;font-size:21px;background:transparent}button,a,input,select,textarea{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #62aaff}button{min-height:44px;transition:background .2s,transform .2s}button:active{transform:scale(.98)}.muted{color:var(--muted)}.small{font-size:13px}h1,h2,h3{font-weight:650}.card{border-radius:24px;padding:30px}.label{color:#6e747e;font-size:11px}.dark .label,.dark .muted{color:#afb4c1}.cinema{position:relative;margin:24px -4px 0;min-height:530px;border-radius:28px;overflow:hidden;background:#131923;display:flex;align-items:center;color:white;isolation:isolate}.scene-photo{position:absolute;inset:0;z-index:-3;background-position:65% 48%;background-size:cover;transform:scale(1.04);animation:cinemaDrift 24s ease-in-out infinite alternate;filter:saturate(.6);transition:background-image 1s}.cinema:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,10,18,.9) 0%,rgba(7,13,22,.65) 40%,rgba(5,9,15,.1) 78%),linear-gradient(0deg,#090f1ad9,transparent 35%)}.stage-glow{position:absolute;inset:-30%;background:radial-gradient(ellipse at 72% 30%,#2895ff4d,transparent 45%),radial-gradient(ellipse at 15% 80%,#ec7d2426,transparent 40%);animation:glowDrift 16s ease-in-out infinite alternate;z-index:-2;pointer-events:none;mix-blend-mode:screen}.film-grain{position:absolute;inset:0;z-index:-1;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.3' d='M0 0h180v180H0z'/%3E%3C/svg%3E");pointer-events:none}.cinema-copy{padding:70px 58px 110px;max-width:690px}.cinema .eyebrow{color:#9ecbfa;font-size:10px;letter-spacing:2.7px}.cinema h1{font-size:clamp(45px,5.8vw,76px);letter-spacing:-3px;line-height:1.1;margin:25px 0}.cinema-copy p{color:#d2d7df;font-size:17px;margin:22px 0 30px}.cinema-copy .primary{padding:14px 24px}.cinema-copy .primary span{margin-left:20px}.glass{color:white;background:#ffffff14;border:1px solid #ffffff2b;backdrop-filter:blur(10px)}.scene-bottom{position:absolute;bottom:25px;left:40px;right:30px;display:flex;justify-content:space-between;align-items:center;color:#c2c8d2;font-size:11px;gap:10px}.scene-dot{min-height:36px;width:36px;padding:5px;background:transparent;color:#a7aeb9;border-bottom:1px solid #ffffff45;border-radius:0;font-size:11px}.scene-dot.on{color:white;border-bottom:2px solid white}.scene-bottom .glass{min-height:36px;padding:5px 12px;font-size:11px}.home-intro{margin:46px 0 25px}.home-intro h2{font-size:29px;margin-top:12px}.home-intro .eyebrow{font-size:12px;letter-spacing:1px}.text-button{background:transparent;color:#0071e3;font-size:13px;padding-right:0}.route-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}.route-switch button{text-align:left;display:grid;grid-template-columns:30px 1fr;padding:18px 24px;border-radius:18px;color:#7e8490;background:#eceef2;border:1px solid transparent;font-size:12px}.route-switch b{font-size:16px;color:#333a46;font-weight:550}.route-switch small{grid-column:2;margin-top:5px}.route-switch button.selected{background:#fff;border-color:#c8dcf6;color:#0071e3;box-shadow:0 2px 10px #00000003}.route-switch button.selected b{color:#0071e3}.plan-card{padding:30px 34px}.plan-card h2{font-size:26px}.plan-line{display:flex;gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid #f0f1f4;font-size:14px}.plan-line .num{color:#8b93a1;font-size:12px;width:22px}.plan-line .name{flex:1}.plan-line small{font-size:12px;color:#818894}.plan-line button{min-height:32px;padding:4px 10px;font-size:11px}.plan-line.done .name{text-decoration:line-through;color:#969da7}.plan-line.current .num{color:#0071e3}.mood-card{background:linear-gradient(140deg,#e7edf6,#eff2f5);position:relative;min-height:410px}.mood-card h2{font-size:38px;line-height:1.2;margin-top:28px;letter-spacing:-1px}.mood-card .stats{margin-top:35px;gap:30px}.mood-card .stat{font-size:35px}.mood-card>.small{position:relative;margin-top:42px}.string-art{position:absolute;right:-80px;top:80px;width:290px;height:330px;transform:rotate(-30deg);opacity:.27;pointer-events:none}.string-art i{position:absolute;display:block;width:1px;background:linear-gradient(transparent,#6c839f,transparent);height:100%;left:calc(20% + var(--n)*18px);animation:stringPulse 6s ease-in-out infinite alternate}.string-art i:nth-child(1){--n:1}.string-art i:nth-child(2){--n:2}.string-art i:nth-child(3){--n:3}.string-art i:nth-child(4){--n:4}.string-art i:nth-child(5){--n:5}.string-art i:nth-child(6){--n:6}.inspiration{position:relative;overflow:hidden;border-radius:24px;min-height:270px;color:white;padding:40px;margin:24px 0;background:#121b25;isolation:isolate;display:flex;justify-content:space-between;align-items:center}.inspiration:before{content:'';position:absolute;inset:0;background-image:var(--inspiration-image);background-size:cover;background-position:center 40%;z-index:-2;filter:grayscale(1);opacity:.42}.inspiration:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0d1724eb,#13202d77);z-index:-1}.inspiration .eyebrow{font-size:9px;color:#94b2d2}.inspiration h2{font-size:31px;margin:14px 0}.inspiration p{font-size:13px;line-height:1.8;color:#ccd2db}.inspiration button{font-size:12px}.inspiration-note{font-size:50px;font-weight:700;letter-spacing:4px;opacity:.7;text-align:right}.inspiration-note span{font-size:10px;letter-spacing:6px}.section.page{margin-top:40px;min-height:65vh;animation:pageIn .25s ease}.section h2{font-size:32px}.session-header{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-bottom:30px;background:white;padding:22px 26px;border-radius:20px}.session-header h3{margin-top:10px;margin-bottom:5px}.session-header button{font-size:12px}.score-player{margin:22px 0}.measure-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.measure{padding:16px;border:1px solid #e7ebf0;border-radius:14px;background:#fafbfd;transition:background .15s;position:relative}.measure.active{background:#e7f1ff;border-color:#0071e3}.measure .measure-number{font-size:11px;color:#8290a1}.measure .chord{font-size:25px;margin:7px 0;color:#1e4f86}.measure pre{font-size:12px;line-height:1.8;overflow:auto;margin:8px 0 0}.measure .step-cursor{display:flex;gap:4px;margin-top:10px}.step-cursor i{height:3px;flex:1;background:#dae1eb;border-radius:3px}.step-cursor i.active{background:#0071e3}.custom-chords{border-top:1px solid #eee;padding-top:16px;margin:12px 0}.custom-chords input{margin:10px 0}.diatonic{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.diatonic button{border-radius:12px;min-width:75px;flex:1;background:#f3f6fa}.diatonic small{display:block;color:#7c8a9c;font-size:10px;margin-bottom:5px}.transport{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);width:min(800px,calc(100% - 40px));z-index:12;background:#ffffffeb;backdrop-filter:blur(24px);border:1px solid #e6e6e6;box-shadow:0 4px 40px #00000012;border-radius:20px;padding:12px 18px;display:flex;align-items:center;gap:18px;justify-content:space-between}.transport>button:first-child{border-radius:50%;width:44px;padding:5px}.transport b{font-size:13px}.transport small{font-size:11px;color:#818892;display:block;margin-top:4px}.transport .row button{font-size:16px;min-width:36px;padding:5px;background:transparent}.transport span{font-size:12px}.transport>button:last-child{font-size:12px}.mobile-nav{display:none}.setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:25px 0}.setting-grid label{font-size:13px;color:#68717d;display:flex;flex-direction:column;gap:8px}.dialog-close{float:right;font-size:12px;background:transparent}.setting-grid input,.setting-grid select{width:100%}dialog h2{margin:24px 0 10px;font-size:29px}.credit-button{font-size:11px;background:transparent;color:#788493;margin-top:10px}#recordExtras{margin:0 0 24px}#recordExtras h2{font-size:28px}.wave-bars{display:flex;height:60px;gap:5px;align-items:center;margin:20px 0}.wave-bars i{display:block;flex:1;height:12px;background:#c8d7eb;border-radius:3px}.is-recording .wave-bars i{animation:wave .8s ease-in-out infinite alternate;background:#dd5769;animation-delay:calc(var(--i)*.06s)}.recording-status{color:#ac344a}.audio-item{margin-top:16px;padding-top:15px;border-top:1px solid #eee}.audio-item audio{width:100%;height:38px;margin-top:10px}.audio-item .row button{font-size:11px;padding:5px 12px;min-height:32px}.tone-item{padding:16px 0;border-bottom:1px solid #eee}.viewer-toolbar{position:sticky;top:0;background:white;z-index:2;margin:15px 0;display:flex;gap:10px}.image-view{overflow:auto;max-height:65vh;background:#e8eaed;text-align:center;padding:10px}.image-view img{max-width:none;display:block;margin:auto}.onboarding-note{padding:12px 16px;background:#edf4ff;border-radius:12px;color:#456389;font-size:12px}.lesson-chip{display:inline-block;margin:4px;padding:4px 9px;border-radius:20px;background:#eef2f7;font-size:11px;color:#637b96}#history .lesson{position:relative;padding-right:55px}.edit-history{position:absolute;right:0;top:15px;font-size:11px;min-height:32px;padding:4px 10px}footer{padding-bottom:105px}.no-motion *,.no-motion *:before,.no-motion *:after{animation:none!important;scroll-behavior:auto!important}.practicing .scene-photo,.practicing .stage-glow,.practicing .string-art i{animation-play-state:paused!important}@keyframes cinemaDrift{from{transform:scale(1.04) translateX(-.4%)}to{transform:scale(1.12) translateX(1.2%)}}@keyframes glowDrift{from{transform:translate(-2%,1%) rotate(-4deg)}to{transform:translate(3%,-2%) rotate(8deg)}}@keyframes stringPulse{from{opacity:.25;transform:translateX(0)}to{opacity:.8;transform:translateX(6px)}}@keyframes wave{from{height:8px}to{height:48px}}@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}@media(max-width:900px){.cinema-copy{padding-left:35px}.measure-grid{grid-template-columns:repeat(2,1fr)}.session-header{align-items:flex-start;flex-direction:column}.cinema{min-height:490px}.cinema h1{font-size:62px}.cinema-copy p{font-size:15px}.inspiration-note{font-size:40px}.route-switch button{padding:16px}.card{padding:24px}.section h2{font-size:28px}}@media(max-width:700px){nav{padding:10px 18px;min-height:60px}nav .links{display:none}.brand{font-size:20px}.brand-light{font-size:12px}main{padding:0 16px 30px}.cinema{margin:12px -4px 0;min-height:515px;border-radius:22px}.cinema-copy{padding:50px 26px 125px}.cinema h1{font-size:56px;letter-spacing:-2px}.cinema-copy p{max-width:220px;line-height:1.7}.cinema-copy .row{gap:10px}.cinema-copy .glass{font-size:12px}.scene-bottom{left:24px;right:24px;bottom:20px;align-items:flex-start;flex-direction:column;font-size:10px;gap:13px}.scene-bottom .row{gap:10px}.cinema:after{background:linear-gradient(90deg,#070e1ad4,#09122277),linear-gradient(0deg,#0a111e,transparent 70%)}.scene-photo{background-position:65% center}.home-intro{margin:30px 0 20px}.home-intro h2{font-size:23px;margin-bottom:0}.home-intro .text-button{font-size:11px;padding-top:0;padding-bottom:0;min-height:30px}.route-switch{gap:7px;margin-bottom:16px}.route-switch button{display:flex;flex-direction:column;align-items:flex-start;padding:14px 12px;font-size:10px;gap:5px;border-radius:14px}.route-switch b{font-size:14px}.route-switch small{font-size:10px;margin:0}.grid{gap:16px}.plan-card{padding:24px}.plan-card h2{font-size:23px}.mood-card{min-height:310px}.mood-card h2{font-size:30px}.mood-card .stats{margin-top:25px}.mood-card>.small{margin-top:30px}.mood-card .stat{font-size:30px}.inspiration{padding:26px;min-height:300px;margin-top:16px}.inspiration h2{font-size:24px}.inspiration-note{font-size:24px;position:absolute;right:18px;top:36px;opacity:.4}.inspiration-note span{font-size:8px;letter-spacing:2px}.inspiration .eyebrow{font-size:8px;max-width:180px;line-height:1.6}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;padding:9px 16px max(9px,env(safe-area-inset-bottom));background:#ffffffed;backdrop-filter:blur(24px);border-top:1px solid #e5e7eb;z-index:15;justify-content:space-between}.mobile-nav a{display:flex;align-items:center;flex-direction:column;gap:3px;color:#7f8794;min-width:46px;min-height:44px;font-size:21px}.mobile-nav a span{font-size:10px}.mobile-nav a.active{color:#0071e3}.transport{bottom:80px;width:calc(100% - 24px);padding:9px 12px;gap:8px;border-radius:16px}.transport>div:nth-child(2){max-width:95px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transport b{font-size:11px}.transport .row{gap:2px}.transport .row button{min-width:27px}.transport>button:last-child{padding:8px;font-size:11px}.transport small{font-size:10px}.transport span{font-size:10px}.section.page{margin-top:25px}.section h2{font-size:25px}.score-player{padding:20px}.measure-grid{gap:7px}.measure{padding:12px}.measure pre{font-size:10px}.measure .chord{font-size:22px}.setting-grid{gap:14px}.session-header{padding:20px}.session-header .row{gap:6px}.session-header button{font-size:11px;padding:8px 12px}.tabs button{font-size:12px;padding:9px 13px}.tabs{margin:16px 0}.lesson{padding-right:0}.lesson>button{float:none;display:block;margin:12px 0 0 24px;min-height:34px}.lesson label{display:flex;align-items:flex-start;line-height:1.5}.lesson label input{margin-right:8px}dialog{padding:24px}.card h3{font-size:19px}.inspiration:before{background-position:60% center}footer{padding-bottom:160px}.drumgrid{gap:4px;grid-template-columns:42px repeat(8,1fr)}.drumgrid button{min-height:38px}.bpm{font-size:56px}.scene-bottom button{min-height:38px}}
/* Clip without creating a focus-scroll container when switching views. */
.cinema,.inspiration{overflow:clip}
/* Portrait edition: edge-to-edge, almost a full screen, with a quiet photo backdrop. */
body{isolation:isolate}
body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#f5f5f7eb,#f5f5f7ed),var(--page-photo);background-size:cover;background-position:center 25%}
.cinema{width:100vw;max-width:none;margin:0 calc(50% - 50vw);min-height:calc(100svh - 66px);border-radius:0}
.cinema-copy{padding:90px 24px 140px 0;margin-left:max(6vw,calc((100vw - 1120px)/2));max-width:650px;width:52vw}
.cinema h1{font-size:clamp(64px,7.3vw,108px);line-height:1.06;letter-spacing:-4px}
.scene-photo{filter:saturate(.72);background-position:62% 22%;animation-duration:32s}
.cinema[data-scene="2"] .scene-photo{background-position:65% 16%}
.cinema[data-scene="3"] .scene-photo{background-position:70% 10%}
.cinema:after{background:linear-gradient(90deg,#070b10d9 0%,#0a1018a6 32%,#0a101838 62%,#0a101800 90%),linear-gradient(0deg,#070b10c9,transparent 30%)}
.cinema-copy p{font-size:19px;color:#e1e3e8}
.scene-bottom{left:max(6vw,calc((100vw - 1120px)/2));right:max(6vw,calc((100vw - 1120px)/2));bottom:32px}
.scene-dot.on{background:#ffffff18}
.inspiration{min-height:340px}
.inspiration:before{background-position:center 20%;filter:grayscale(.35);opacity:.6}
.home-intro{margin-top:52px}
@media(min-width:1500px){.cinema-copy{width:620px}.scene-photo{background-position:65% 28%}}
@media(max-width:700px){.cinema{width:100vw;margin:0 calc(50% - 50vw);border-radius:0;min-height:calc(100svh - 60px);align-items:flex-end}.cinema-copy{width:100%;max-width:none;margin:0;padding:160px 26px 145px}.cinema h1{font-size:clamp(54px,14vw,76px);letter-spacing:-2px}.cinema-copy p{font-size:16px;max-width:260px}.scene-photo{background-position:62% 24%}.cinema[data-scene="2"] .scene-photo{background-position:50% 15%}.cinema[data-scene="3"] .scene-photo{background-position:50% 12%}.cinema:after{background:linear-gradient(0deg,#070c15f0 0%,#070c15b0 30%,#070c1520 75%)}.scene-bottom{left:26px;right:26px;bottom:24px;gap:14px}.cinema .eyebrow{font-size:9px;letter-spacing:1.8px}.home-intro{margin-top:32px}.inspiration{min-height:320px}}