.hero{position:relative;overflow:hidden}.hero .wrap{grid-template-columns:1fr 1.05fr;align-items:center;gap:clamp(32px,5vw,72px);padding-top:clamp(24px,4vh,56px);padding-bottom:clamp(40px,7vh,88px);display:grid}.hero .col-copy{max-width:34rem}.hero .h-wordmark{width:clamp(230px,20vw,300px);height:auto;margin:0 0 var(--sp-5);display:block}.hero .hero-claim{margin-bottom:var(--sp-4);white-space:nowrap;font-size:clamp(28px,3.1vw,42px)}.hero .hero-sub{color:var(--ink-2);font-size:var(--fs-h3);max-width:38ch;margin-bottom:var(--sp-5);font-weight:400;line-height:1.5}.hero .storerow{gap:var(--sp-3);flex-wrap:wrap;display:flex}.hero .badge-note{font-size:var(--fs-caption);color:var(--ink-3);margin-top:var(--sp-4)}.hero .col-app{position:relative}.hero .col-app .appframe{filter:drop-shadow(0 40px 90px #1f1c1747);max-width:none;margin:0;transform:rotate(1.2deg)}@media (width<=860px){.hero .wrap{text-align:center;gap:var(--sp-6);grid-template-columns:1fr}.hero .h-wordmark{margin-inline:auto}.hero .hero-claim{white-space:normal}.hero .hero-sub{margin-inline:auto}.hero .storerow{justify-content:center}.hero .col-app{order:-1}.hero .col-app .appframe{max-width:560px;margin:0 auto;transform:none}}.intro{padding:clamp(64px,11vh,130px) 0}.intro .wrap{text-align:center;max-width:820px}.intro h2{font-size:var(--fs-display);margin-bottom:var(--sp-5)}.intro p{font-size:var(--fs-h3);color:var(--ink-2);max-width:54ch;margin:0 auto;line-height:1.55}.intro .em{color:var(--ink);font-weight:600}.feature{align-items:center;min-height:100vh;padding:clamp(48px,7vh,96px) 0;display:flex}.feature>.wrap{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,6vw,100px);width:100%;display:grid}.feature .f-text{max-width:34rem}.feature.alt .f-media{order:-1}.feature h2{font-size:var(--fs-h2);margin:var(--sp-3) 0 var(--sp-4)}.feature .f-lead{color:var(--ink-2);font-size:var(--fs-h3);margin-bottom:var(--sp-5);line-height:1.5}.f-list{gap:var(--sp-4);flex-direction:column;list-style:none;display:flex}.f-list li{gap:var(--sp-3);align-items:flex-start;display:flex}.f-list .ic{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:1px}.f-list b{font-family:var(--serif);color:var(--ink);margin-bottom:2px;font-size:18px;font-weight:600;display:block}.f-list p{color:var(--ink-2);font-size:var(--fs-caption);margin:0;line-height:1.5}.f-media .appframe{filter:drop-shadow(0 40px 90px #1f1c1738);max-width:none;margin:0}.f-cap{margin-top:var(--sp-4);font-size:var(--fs-caption);color:var(--ink-3);font-style:italic;font-family:var(--serif);text-align:center}.f-media.annotated{padding:58px 0 62px;position:relative}.anno{z-index:5;pointer-events:none;max-width:190px;color:var(--accent);font-family:Bradley Hand,Marker Felt,Segoe Print,Comic Sans MS,cursive;font-size:clamp(14px,1.2vw,18px);font-weight:700;line-height:1.12;position:absolute}.anno.r{text-align:right}.f-media.annotated .arw{z-index:5;stroke:var(--accent);fill:none;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;position:absolute;overflow:visible}@media (width<=860px){.f-media.annotated{padding:0}.anno{display:none}}.feature-sunken{background:var(--paper-sunken)}@media (width<=860px){.feature{min-height:0;padding:var(--sp-7) 0}.feature>.wrap{gap:var(--sp-6);grid-template-columns:1fr}.feature .f-media{order:-1!important}}.imp{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;min-height:0;padding:5% 7%;display:flex}.imp-drop{border:2px dashed var(--line-strong);background:var(--paper-sunken);text-align:center;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;padding:7%;display:flex}.imp-drop .up{width:36px;height:36px;stroke:var(--ink-3);fill:none;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.imp-drop .t{font-family:var(--serif);color:var(--ink);font-size:19px}.imp-drop .s{color:var(--ink-3);font-size:13px}.imp-chips{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.imp-chips span{color:var(--ink-2);background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:6px 13px;font-size:12px;font-weight:600}.imp-chips .soon{color:var(--ink-3);border-style:dashed}.freebody{text-align:center;flex-direction:column;flex:1;justify-content:center;gap:10px;min-height:0;padding:5% 9%;display:flex}.freebody .adtag{letter-spacing:.14em;color:var(--ink-3);border:1px solid var(--line-strong);border-radius:6px;align-self:center;padding:3px 10px;font-size:10px;font-weight:700}.freebody .fh{font-family:var(--serif);color:var(--ink);font-size:21px;line-height:1.2}.freebody .fp{color:var(--ink-2);max-width:32ch;margin:0 auto;font-size:13.5px;line-height:1.45}.freeline{color:var(--ink-2);justify-content:center;align-items:center;gap:10px;margin-top:2px;font-size:12px;font-weight:600;display:flex}.freeline .seg{background:var(--paper-sunken);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px}.freeline .seg.play{color:var(--accent)}.freeline .arw{color:var(--ink-3)}.freefoot{color:var(--ink-3);margin-top:2px;font-size:12px}.appframe{filter:drop-shadow(0 40px 90px #0000008c);max-width:920px;margin:0 auto}.af-bezel{background:linear-gradient(#2b2720,#1b1813);border:1px solid #3a3529;border-radius:22px;padding:12px}.af-screen{background:var(--paper);aspect-ratio:16/10;border-radius:12px;flex-direction:column;display:flex;overflow:hidden}.af-top{border-bottom:1px solid var(--line);align-items:center;gap:10px;height:11%;min-height:34px;padding:0 16px;display:flex}.af-top .ic{width:20px;height:20px;stroke:var(--ink-3);fill:none;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.af-ttl{text-align:center;flex-direction:column;flex:1;gap:1px;display:flex}.af-ttl .er{letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-size:8px;font-weight:600}.af-ttl .sg{font-family:var(--serif);color:var(--ink);font-size:14px;font-weight:600}.af-score{flex:1;align-items:center;min-height:0;padding:14px 20px 4px;display:flex}.af-score svg{width:100%;height:100%;overflow:visible}.af-scrub{border-radius:var(--r-pill);background:var(--paper-sunken);border:1px solid var(--line);height:5px;margin:0 20px 12px;position:relative}.af-scrub i{border-radius:var(--r-pill);background:color-mix(in srgb,var(--note) 42%,transparent);width:38%;position:absolute;top:-1px;bottom:-1px;left:0}.af-scrub i:after{content:"";background:var(--note);border-radius:50%;width:12px;height:12px;position:absolute;top:50%;right:-6px;transform:translateY(-50%)}.af-kbd{height:26%;min-height:78px;padding:0 8px 8px}.curwash{fill:var(--app-accent-tint);opacity:.85}.staff-line{stroke:var(--line-strong);stroke-width:1.3px}.barline{stroke:var(--line-strong);stroke-width:1.4px}.note{fill:var(--ink)}.clef{fill:var(--ink);font-family:var(--serif)}.props{gap:var(--sp-6);grid-template-columns:repeat(3,1fr);display:grid}.prop{gap:var(--sp-3);flex-direction:column;display:flex}.prop .pico{width:40px;height:40px;stroke:var(--accent);fill:none;stroke-width:1.4px;stroke-linecap:round;stroke-linejoin:round}.prop h3{margin-top:var(--sp-2)}.prop p{color:var(--ink-2);font-size:var(--fs-body)}.prop .link{margin-top:var(--sp-2);align-self:flex-start}@media (width<=760px){.props{gap:var(--sp-5);grid-template-columns:1fr}}.lib-head{justify-content:space-between;align-items:flex-end;gap:var(--sp-4);margin-bottom:var(--sp-6);flex-wrap:wrap;display:flex}.lib-head h2{max-width:20ch}.gal-label{font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:var(--sp-6) 0 var(--sp-4);font-weight:600}.gallery{gap:var(--sp-4);grid-template-columns:repeat(6,1fr);display:grid}@media (width<=900px){.gallery{grid-template-columns:repeat(3,1fr)}}@media (width<=520px){.gallery{grid-template-columns:repeat(2,1fr)}}.getapp{text-align:center}.getapp h2{max-width:20ch;margin:0 auto var(--sp-5)}.getapp .plat{color:var(--ink-2);margin:0 auto var(--sp-6)}.badges{gap:var(--sp-3);flex-wrap:wrap;justify-content:center;display:flex}.storebadge{background:var(--ink);color:var(--paper-raised);border-radius:12px;align-items:center;gap:10px;min-width:190px;padding:11px 18px;text-decoration:none;display:inline-flex}.storebadge svg{fill:currentColor;flex:none;width:24px;height:24px}.storebadge .bt{text-align:left;line-height:1.1}.storebadge .bt small{opacity:.75;letter-spacing:.02em;font-size:10px;display:block}.storebadge .bt b{font-size:16px;font-weight:600;font-family:var(--serif)}.badge-note{font-size:var(--fs-caption);color:var(--ink-3);margin:var(--sp-4) auto 0}
