:root{color-scheme:dark;--ink:#151412;--text:#f6f2e9;--muted:#c0bbb2;--accent:#efb87b;--line:#ffffff25;--glass:#191715a8;--space:clamp(24px,5vw,80px)}
*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--text);font-family:Arial,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}button,input,a{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:0}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:6px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.environment,.shade{position:fixed;inset:0;pointer-events:none;z-index:-2}.environment{background:url('/hero.jpg') center 56%/cover no-repeat;filter:invert(1);opacity:.53;transform:translate3d(0,var(--parallax-y,0),0) scale(1.04);will-change:transform}.shade{z-index:-1;background:linear-gradient(90deg,#151412f0,#151412a6 39%,#1514120d 82%),linear-gradient(0deg,#151412,transparent 40%,#15141266)}.screen{min-height:100svh}.landing{display:flex;flex-direction:column;padding:0 var(--space)}.brand-bar{display:flex;align-items:center;justify-content:space-between;padding:34px 0}.wordmark{font-size:21px;font-weight:800;letter-spacing:-1px;white-space:nowrap}.brand-keys{color:var(--accent);font-size:26px;margin-right:8px}.brand-period{color:var(--accent)}.brand-note{font-size:14px;color:var(--muted)}.landing-content{padding:60px 0 54px;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.eyebrow,.small-label{font-size:14px;font-weight:500;color:var(--muted)}.eyebrow{letter-spacing:.13em;text-transform:uppercase;margin:0 0 24px}.landing h1{font-size:clamp(76px,8.9vw,150px);line-height:.88;letter-spacing:-.065em;font-weight:700;margin:0 0 32px}.landing h1 em{font-family:Georgia,serif;font-weight:400;color:var(--accent);letter-spacing:-.065em}.intro{max-width:445px;font-size:18px;line-height:1.6;margin:0 0 30px;color:#e0dbd2}.landing-actions{display:flex;align-items:center;gap:28px}.primary{background:var(--text);color:var(--ink);padding:18px 24px;border-radius:3px;font-weight:600;min-height:56px}.primary span{margin-left:28px}.primary:hover{background:var(--accent)}.text-button{background:transparent;min-height:44px;padding:10px 0;font-size:15px}.text-button:hover{color:var(--accent)}.landing-actions .text-button span{margin-left:12px}.file-hint{font-size:14px;color:var(--muted);margin:22px 0 0}.landing-footer{padding:24px 0;display:flex;justify-content:space-between;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}.landing-footer i{color:var(--accent);font-style:normal;margin:0 14px}.dragover{outline:2px dashed var(--accent);outline-offset:16px}.interlude{padding:36px var(--space);display:flex;flex-direction:column}.interlude-content{margin:auto 0;max-width:720px;padding:60px 0}.interlude h1{font-size:clamp(42px,6vw,80px);line-height:1.05;letter-spacing:-.055em;margin:20px 0}.interlude p{line-height:1.6}.muted{color:var(--muted)}.sound-bars{display:flex;gap:7px;align-items:center;height:70px;margin-bottom:40px}.sound-bars i{background:var(--accent);width:5px;height:40px;animation:listen 1.2s ease-in-out infinite alternate}.sound-bars i:nth-child(2n){animation-delay:.3s;height:65px}.sound-bars i:nth-child(3n){animation-delay:.6s;height:25px}@keyframes listen{to{transform:scaleY(.35)}}
.workspace{padding:0 var(--space)}.workspace-bar{display:flex;align-items:center;gap:40px;min-height:110px;border-bottom:1px solid var(--line)}.song-identity{flex:1;min-width:0}.song-identity h1{font-size:18px;font-weight:500;margin:7px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.key-identity strong{display:block;font-size:20px;margin-top:6px}.transpose{text-align:center}.transpose>div{display:flex;align-items:center;gap:6px}.transpose button{background:transparent;width:44px;height:44px;font-size:24px}.transpose output{min-width:26px;font-size:16px;font-variant-numeric:tabular-nums}.workspace-main{max-width:1200px;margin:auto}.moment{padding:26px 0 20px}.moment-heading{display:flex;justify-content:space-between;align-items:center}.moment-heading .eyebrow{margin:0}.moment-heading>.small-label{letter-spacing:.12em}.moment-body{display:flex;align-items:center;justify-content:space-between;padding:18px 6% 15px 3%;min-height:225px}.harmony{display:flex;align-items:center;gap:44px}.degree{font-size:clamp(100px,11vw,165px);font-weight:600;line-height:1;letter-spacing:-.08em;color:var(--accent)}.chord{font-size:clamp(32px,4.5vw,62px);line-height:1.1;letter-spacing:-.04em;margin-top:10px}.melody{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:20px}.melody>.small-label{grid-column:1/-1;margin-bottom:6px}.solfa{font-family:Georgia,serif;font-style:italic;font-size:86px;line-height:1}.note{font-size:32px;color:var(--muted)}.player{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px 36px;background:var(--glass);backdrop-filter:blur(14px);padding:18px 24px;border-radius:4px}.transport{display:flex;align-items:center;gap:12px}.icon-button{background:transparent;min-width:44px;height:48px;font-size:18px}.icon-button span{font-size:14px}.icon-button:hover{color:var(--accent)}.play-button{background:var(--text);color:var(--ink);border-radius:50px;padding:16px 24px;display:flex;align-items:center;gap:12px;font-weight:600;min-width:116px;justify-content:center}.play-button:hover{background:var(--accent)}.scrubber{min-width:0}input[type=range]{width:100%;accent-color:var(--accent);height:22px;margin:0;cursor:pointer}.time-row{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}.playback-notice{grid-column:1/-1;font-size:14px;margin:0;color:var(--accent)}.playback-notice:empty{display:none}.music-lanes{padding:27px 0 18px}.lane-title{display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--muted);font-size:14px}.lane-title h2{font-size:15px;font-weight:500;margin:0}.stream{display:flex;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent;padding:12px 0 7px;gap:4px;overscroll-behavior-x:contain}.stream button{background:transparent;flex:0 0 auto;color:var(--muted);border-bottom:2px solid transparent;transition:color .15s,background .15s}.chord-stream button{min-width:98px;padding:10px 22px 14px}.chord-item-degree{display:block;font-size:32px;line-height:1.1;font-weight:600;letter-spacing:-.04em}.chord-item-name{display:block;font-size:16px;margin-top:8px}.stream button.active{color:var(--text);background:#efb87b13;border-color:var(--accent)}.stream button.active .chord-item-degree{color:var(--accent)}.stream button:hover{color:var(--text);background:#ffffff0b}.solfa-title{margin-top:18px}.solfa-stream button{min-width:56px;padding:9px 12px}.solfa-item-syllable{display:block;font-family:Georgia,serif;font-style:italic;font-size:26px}.solfa-item-note{display:block;font-size:14px;margin-top:4px}.piano-section{padding:20px 0 0;border-top:1px solid var(--line)}.legend{display:flex;gap:20px}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:9px;height:9px;border-radius:50%}.chord-dot{background:var(--accent)}.melody-dot{background:#fff;outline:1px solid #fff;outline-offset:3px}.piano-viewport{padding:18px 0 0;overflow-x:auto}.piano{position:relative;height:145px;background:#10100f;border:5px solid #151412;box-shadow:0 10px 24px #0005;max-width:940px;min-width:300px;margin:auto;border-radius:3px}.piano-key{position:absolute;top:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;font-size:14px}.key-white{height:100%;background:linear-gradient(#dad6cd,#f5f2eb 18%,#e8e4db 94%,#b4b0a8);border:1px solid #393631;border-radius:0 0 4px 4px;color:#504b43;z-index:1}.key-black{height:62%;background:linear-gradient(90deg,#191816,#34322e 55%,#151412);border:1px solid #070706;border-bottom:5px solid #070706;border-radius:0 0 3px 3px;z-index:2;color:#eee}.active-chord{background:linear-gradient(#c28d54,var(--accent))!important;color:#271a0b}.active-melody{box-shadow:inset 0 0 0 3px #fff,inset 0 -20px 0 #fff!important}.active-melody:after{content:'●';position:absolute;bottom:25px;font-size:16px;color:#201d17}.key-black.active-melody{background:#7d766c}.key-black.active-melody:after{color:#fff}.piano-caption{font-size:14px;text-align:center;color:var(--muted);margin:12px 0 0}.workspace-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 0;color:var(--muted);font-size:14px}.workspace-footer .wordmark{font-size:17px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.landing-content{padding-left:6vw}.environment{background-position:center 60%}}
@media(max-width:700px){:root{--space:22px}.environment{background-position:38% center;opacity:.4}.shade{background:linear-gradient(0deg,#151412,#15141233 60%,#15141255),linear-gradient(90deg,#151412bb,#15141222)}.brand-bar{padding:24px 0}.brand-note{font-size:14px}.landing-content{padding:65px 0 45px}.landing h1{font-size:clamp(76px,19vw,110px);margin-bottom:30px}.intro{font-size:17px;max-width:340px}.eyebrow{margin-bottom:24px}.landing-actions{gap:22px}.primary{padding:17px 20px}.primary span{margin-left:12px}.file-hint{max-width:310px;line-height:1.6}.landing-footer{display:block;line-height:1.6}.landing-footer>span:last-child{display:none}.workspace-bar{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:16px 0}.workspace-bar>.text-button{text-align:left}.song-identity{text-align:right}.song-identity h1{font-size:15px;max-width:190px}.key-identity{display:flex;flex-direction:column;gap:0}.key-identity strong{font-size:18px}.transpose{display:flex;align-items:center;justify-content:flex-end;gap:6px}.transpose>div{gap:0}.transpose button{width:36px;min-height:44px}.transpose .small-label{font-size:14px}.moment{padding:22px 0 15px}.moment-heading>.small-label{display:none}.moment-heading .eyebrow{font-size:14px;letter-spacing:.08em}.moment-body{padding:18px 0 0;min-height:185px;align-items:center}.harmony{display:block}.degree{font-size:100px}.harmony .small-label{display:none}.chord{font-size:30px;margin:8px 0 0}.melody{display:flex;flex-direction:column;align-items:center;gap:4px;padding-right:12px}.solfa{font-size:58px}.note{font-size:24px}.player{display:flex;flex-direction:column;padding:16px;gap:12px}.transport{justify-content:center;width:100%;gap:10px}.scrubber{width:100%}.play-button{min-width:118px}.playback-notice{line-height:1.4;text-align:center}.music-lanes{padding-top:23px}.lane-title>span{font-size:14px}.chord-stream button{min-width:78px;padding:10px 16px}.chord-item-degree{font-size:30px}.solfa-title{margin-top:18px}.piano{height:124px}.piano-key{font-size:14px;padding-bottom:8px}.key-black{font-size:0}.piano-section .lane-title{align-items:flex-start}.legend{gap:12px}.piano-caption{font-size:14px}.workspace-footer{padding:26px 0;font-size:14px;align-items:flex-start}.workspace-footer>span:last-child{max-width:210px;text-align:right}.interlude-content{padding:40px 0}.interlude h1{font-size:48px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Landing story: one continuous musical environment, with editorial pacing. */
.landing-nav{display:flex;align-items:center;gap:26px;margin-left:auto;margin-right:34px;font-size:14px;color:var(--muted)}
.landing-nav a{padding:10px 0}.landing-nav a:hover{color:var(--text)}.landing-nav .nav-try{color:var(--text);border-bottom:1px solid var(--accent)}.landing-nav .nav-try span{color:var(--accent);margin-left:8px}
.hero-copy{width:min(650px,100%)}.hero-rail{display:flex;align-items:center;gap:16px;align-self:flex-end;margin-top:24px;color:var(--muted);font-size:11px;letter-spacing:.18em}.hero-rail i{display:block;width:32px;height:1px;background:var(--accent);opacity:.75}
.landing-story{position:relative;isolation:isolate}.story-section{width:min(1200px,100%);margin:0 auto;padding:clamp(120px,17vh,240px) 0;position:relative}.story-section:before{content:"";position:absolute;top:0;left:-10vw;right:-10vw;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}.story-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,9vw,150px);align-items:center}.story-copy{max-width:650px}.story-copy h2,.final-cta h2{font-size:clamp(48px,6vw,90px);line-height:.98;letter-spacing:-.065em;margin:0 0 28px;font-weight:600}.story-copy h2 em,.final-cta h2 em{font-family:Georgia,serif;font-weight:400;color:var(--accent);letter-spacing:-.06em}.story-lede{max-width:440px;font-size:18px;line-height:1.6;color:#e0dbd2}.problem-art{min-height:350px;display:flex;align-items:center;justify-content:center}.staff-svg{width:100%;overflow:visible}.staff-line{fill:none;stroke:#f6f2e980;stroke-width:2}.note-path{fill:none;stroke:var(--accent);stroke-width:3;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.4s cubic-bezier(.22,.61,.36,1)}.svg-note{fill:var(--accent);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .5s ease,transform .7s cubic-bezier(.22,.61,.36,1)}.svg-degree{fill:var(--text);font-family:Georgia,serif;font-size:28px;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .7s ease}.is-visible .note-path{stroke-dashoffset:0}.is-visible .svg-note{opacity:1;transform:scale(1)}.is-visible .svg-note:nth-of-type(3){transition-delay:.16s}.is-visible .svg-note:nth-of-type(4){transition-delay:.32s}.is-visible .svg-note:nth-of-type(5){transition-delay:.48s}.is-visible .svg-degree{opacity:1;transform:translateY(0);transition-delay:.55s}
.outputs-section{padding-top:clamp(100px,14vh,190px)}.outputs-heading{margin-bottom:clamp(50px,8vh,110px)}.output-list{border-top:1px solid var(--line)}.output-row{display:grid;grid-template-columns:60px 90px minmax(0,1fr) minmax(170px,.6fr);gap:24px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);min-height:126px}.output-index{font-size:14px;color:var(--accent);font-variant-numeric:tabular-nums}.output-mark{display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:28px;min-height:48px}.mark-path{font-size:42px;font-weight:300}.mark-solfa{font-family:Georgia,serif;font-style:italic;font-size:21px;white-space:nowrap}.mark-piano{gap:3px;align-items:flex-end}.mark-piano i{width:7px;height:31px;background:var(--muted);display:block}.mark-piano i:nth-child(2),.mark-piano i:nth-child(4){height:22px;background:var(--accent)}.output-row h3{font-size:25px;font-weight:500;margin:0 0 8px}.output-row p{font-size:15px;color:var(--muted);line-height:1.45;margin:0;max-width:430px}.output-row>strong{font-size:17px;font-weight:500;color:var(--accent);justify-self:end;text-align:right}.output-row:hover h3,.output-row:hover>strong{color:var(--accent)}
.preview-section{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:clamp(40px,9vw,140px);align-items:center}.preview-window{background:#151412d9;border:1px solid #ffffff2d;box-shadow:0 20px 60px #0006;border-radius:4px;padding:25px clamp(18px,3vw,38px);backdrop-filter:blur(12px);transform-origin:center}.preview-top,.preview-moment,.preview-sequence{display:flex;align-items:center;justify-content:space-between;gap:18px}.preview-top{font-size:14px;color:var(--text);border-bottom:1px solid var(--line);padding-bottom:18px}.preview-top small,.preview-moment small,.preview-sequence small{font-size:10px;letter-spacing:.14em;color:var(--muted)}.preview-moment{min-height:185px;padding:28px 5%}.preview-degree{font-size:clamp(72px,9vw,128px);font-weight:600;line-height:.85;color:var(--accent);letter-spacing:-.08em}.preview-moment strong{display:block;font-size:clamp(30px,4vw,54px);font-weight:500;margin-top:8px}.preview-solfa{display:grid;grid-template-columns:auto auto;column-gap:14px;align-items:baseline}.preview-solfa small{grid-column:1/-1}.preview-solfa strong{font-family:Georgia,serif;font-size:62px;font-style:italic;color:var(--text)}.preview-solfa em{font-style:normal;color:var(--muted);font-size:22px}.preview-timeline{height:3px;background:#ffffff25;margin:0 4% 30px;position:relative;overflow:hidden}.preview-timeline span{display:block;background:var(--accent);height:100%;width:57%;position:relative}.preview-timeline span:after{content:"";position:absolute;right:0;top:-5px;width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 20px var(--accent)}.preview-sequence{align-items:flex-end;padding:0 4%}.preview-sequence>div:first-child{flex:1}.preview-sequence p{display:flex;gap:clamp(18px,4vw,44px);margin:14px 0 0;color:var(--muted)}.preview-sequence p b{font-size:29px;font-weight:500}.preview-sequence p b.preview-active{color:var(--accent);transform:translateY(-4px)}.sequence-names{margin-top:3px!important;font-size:14px}.sequence-names span{min-width:20px;text-align:center}.preview-solfa-run{gap:20px!important}.preview-solfa-run b{font-family:Georgia,serif;font-size:25px!important;font-style:italic}.preview-piano{height:80px;margin:30px 4% 0;display:flex;align-items:stretch;gap:2px;background:#0b0a09;padding:3px}.preview-piano i{flex:1;background:linear-gradient(#e8e3d9,#bab4aa);border-radius:0 0 3px 3px}.preview-piano i.lit{background:linear-gradient(#f6c895,var(--accent));box-shadow:0 0 16px #efb87b66}.preview-piano i:nth-child(2),.preview-piano i:nth-child(6),.preview-piano i:nth-child(9),.preview-piano i:nth-child(12){height:62%;background:#27231e;flex:.62;margin:0 -10px;z-index:2}.preview-piano i.lit:nth-child(2),.preview-piano i.lit:nth-child(6),.preview-piano i.lit:nth-child(9),.preview-piano i.lit:nth-child(12){background:var(--accent)}
.steps-section{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:clamp(40px,8vw,130px);align-items:start}.steps-list{border-top:1px solid var(--line)}.step{display:grid;grid-template-columns:38px minmax(0,1fr) 150px;gap:24px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);min-height:150px}.step>span:first-child{color:var(--accent);font-size:14px}.step h3{font-size:25px;font-weight:500;margin:0 0 8px}.step p{font-size:15px;color:var(--muted);line-height:1.5;margin:0;max-width:430px}.step svg{width:100%;stroke:var(--accent);fill:none;stroke-width:1;stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 1.1s ease .15s}.step.is-visible svg{stroke-dashoffset:0}.step-finish{font-size:28px!important;justify-self:end;background:var(--accent);color:var(--ink)!important;width:54px;height:54px;border-radius:50%;display:grid;place-items:center}
.transformation-section{padding-bottom:clamp(150px,22vh,300px)}.transformation-section .story-copy{max-width:800px;margin-bottom:70px}.transform-map{height:480px;position:relative;max-width:1000px;margin:auto}.transform-node{position:absolute;display:flex;flex-direction:column;gap:9px;z-index:1}.transform-node small{font-size:11px;letter-spacing:.16em;color:var(--muted)}.transform-node strong{font-size:clamp(25px,3.4vw,48px);font-weight:500;letter-spacing:-.04em}.raw-node{top:10px;left:50%;transform:translateX(-50%);align-items:center;text-align:center}.waveform{height:55px;display:flex;align-items:center;gap:6px}.waveform i{width:4px;background:var(--accent);height:24px}.waveform i:nth-child(2),.waveform i:nth-child(6){height:45px}.waveform i:nth-child(3),.waveform i:nth-child(5){height:34px}.waveform i:nth-child(4){height:55px}.key-node{left:8%;top:190px}.degree-node{right:4%;top:190px;text-align:right}.solfa-node{left:8%;bottom:20px}.piano-node{right:4%;bottom:20px;text-align:right}.transform-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.transform-connectors path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:700;stroke-dashoffset:700;transition:stroke-dashoffset 1.5s ease .2s}.is-visible .transform-connectors path{stroke-dashoffset:0}.mini-piano{display:flex;justify-content:flex-end;gap:3px;height:42px}.mini-piano i{width:20px;background:#ebe5d8}.mini-piano i.lit{background:var(--accent);box-shadow:0 0 18px #efb87b66}
.final-cta{min-height:70vh;display:grid;place-items:center;text-align:center;padding-top:100px}.final-cta:before{background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5}.final-cta-inner{display:flex;align-items:center;flex-direction:column}.final-cta h2{font-size:clamp(56px,8vw,120px)}.final-cta .landing-actions{margin-top:15px}.landing-footer{position:relative;z-index:2}.reveal{opacity:0;transform:translateY(30px) scale(.98);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}.reveal.is-visible{opacity:1;transform:translateY(0) scale(1)}.reveal-delay-1{transition-delay:.12s}.reveal-delay-2{transition-delay:.24s}.reveal-delay-3{transition-delay:.36s}
@media(max-width:900px){.landing-nav{margin-right:0;gap:15px}.landing-nav a:first-child{display:none}.brand-note{display:none}.story-section{padding-left:0;padding-right:0}.preview-section,.steps-section{grid-template-columns:1fr;gap:55px}.story-copy h2,.final-cta h2{font-size:clamp(46px,10vw,74px)}.problem-grid{grid-template-columns:1fr;gap:30px}.problem-art{min-height:250px}.transform-map{height:530px}.key-node{left:2%;top:210px}.degree-node{right:2%;top:210px}.solfa-node{left:2%;bottom:38px}.piano-node{right:2%;bottom:38px}}
@media(max-width:700px){.landing-nav{font-size:13px}.landing-nav .nav-try{border-bottom:0}.hero-rail{align-self:flex-start;margin-top:8px;font-size:10px}.hero-rail i{width:18px}.story-section{padding-top:100px;padding-bottom:100px}.story-copy h2,.final-cta h2{font-size:clamp(43px,12vw,64px)}.story-lede{font-size:17px}.staff-svg{width:115%;margin-left:-7%}.output-row{grid-template-columns:32px 52px minmax(0,1fr);gap:13px;padding:24px 0;min-height:0}.output-row>strong{grid-column:3;justify-self:start;text-align:left;font-size:15px;margin-top:-4px}.output-row h3{font-size:21px}.output-row p{font-size:14px}.output-mark{font-size:23px}.mark-solfa{font-size:16px}.mark-piano i{width:5px;height:25px}.preview-window{padding:18px 14px}.preview-top{font-size:12px}.preview-top small{font-size:8px}.preview-moment{padding:25px 2%;min-height:150px}.preview-degree{font-size:75px}.preview-solfa strong{font-size:49px}.preview-solfa em{font-size:18px}.preview-sequence{display:block}.preview-sequence>div+div{margin-top:24px}.preview-sequence p{gap:26px}.preview-sequence p b{font-size:24px}.preview-piano{margin-top:26px;height:63px}.step{grid-template-columns:30px minmax(0,1fr);gap:15px;padding:25px 0}.step svg{display:none}.step-finish{grid-column:2;justify-self:start;width:46px;height:46px}.step h3{font-size:22px}.step p{font-size:14px}.transform-map{height:500px}.transform-node strong{font-size:28px}.transform-node small{font-size:10px}.raw-node{top:0}.key-node{top:175px}.degree-node{top:175px}.solfa-node{bottom:20px}.piano-node{bottom:20px}.transform-connectors{opacity:.7}.final-cta{min-height:58vh}.final-cta .landing-actions{flex-direction:column;gap:18px}.final-cta .primary{min-width:210px}.landing-footer{margin-top:0}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.note-path,.transform-connectors path,.step svg{stroke-dashoffset:0;transition:none}.environment{transform:none!important}}
.environment{transform:translate3d(0,var(--parallax-y,0),0)}
.story-section:before{left:0;right:0}
@keyframes previewProgress{0%,100%{width:42%}50%{width:70%}}
@keyframes previewBeat{0%,100%{opacity:.72;transform:translateY(-2px)}50%{opacity:1;transform:translateY(-7px)}}
.preview-timeline span{animation:previewProgress 6s ease-in-out infinite}
.preview-sequence p b.preview-active{animation:previewBeat 6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.preview-timeline span,.preview-sequence p b.preview-active{animation:none}}