.hero{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"title stage""copy stage";column-gap:clamp(24px,4vw,64px);padding-block:clamp(28px,4vw,56px) clamp(56px,8vw,112px);display:grid;container-type:inline-size}.hero-title{grid-area:title;align-self:end;font-size:clamp(3.2rem,8.6cqi,9.4rem);line-height:.88}.hero-title>span{animation:rise .76s var(--ease) both;display:block}.hero-title>span:nth-child(2){animation-delay:90ms}.hero-title>span:nth-child(3){animation-delay:.18s}.hero-title mark{white-space:nowrap;background:linear-gradient(var(--red), var(--red)) no-repeat 0 0 / 100% 100%;animation:wipe .62s .42s var(--ease) both}.hero-copy{grid-area:copy;margin-top:clamp(20px,2.4vw,32px)}@keyframes rise{0%{opacity:0;transform:translateY(.35em)}}@keyframes wipe{0%{background-size:0 100%}}@keyframes pop{0%{opacity:0;transform:scale(.82)}}.stage{grid-area:stage;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);align-self:end;align-items:end;gap:4px;display:grid}.stage-art img{object-fit:contain;object-position:left bottom;width:100%;max-height:500px}.mic-zone{text-align:center;flex-direction:column;align-items:center;gap:14px;padding-bottom:6px;display:flex}.mic-timer{min-height:1.6rem;font:700 1.5rem/1 var(--label);letter-spacing:.04em;font-variant-numeric:tabular-nums}.mic{aspect-ratio:1;background:var(--red);width:clamp(164px,15vw,214px);color:var(--on-red);border:2.5px solid var(--ink);box-shadow:8px 8px 0 var(--ink);animation:pop .52s .3s var(--ease) both;transition:transform .12s var(--ease), box-shadow .12s var(--ease);border-radius:50%;place-items:center;margin:44px 0 26px;display:grid;position:relative}.mic:hover{box-shadow:10px 10px 0 var(--ink);transform:translate(-2px,-2px)}.mic:active{box-shadow:3px 3px 0 var(--ink);transform:translate(4px,4px)}.mic .icon{stroke-width:1.7px;width:30%;height:30%}.ring{border:2px dashed var(--stone);pointer-events:none;transform:scale(calc(var(--s) * var(--level,1)));border-radius:50%;transition:transform 90ms linear,border-color .2s;position:absolute;inset:-2px}.ring:first-child{--s:1.18}.ring:nth-child(2){--s:1.36}.ring:nth-child(3){--s:1.54;opacity:.7}.stage[data-state=recording] .ring{border-color:var(--graphite)}.stage[data-state=opening] .mic .icon,.stage[data-state=processing] .mic .icon{animation:.7s ease-in-out infinite alternate breathe}.stage[data-state=processing] .mic{box-shadow:4px 4px 0 var(--ink);transform:translate(4px,4px)}@keyframes breathe{to{transform:scale(.8)}}.scope{visibility:hidden;width:min(100%,280px);height:32px}.stage[data-state=recording] .scope{visibility:visible}.mic-status{max-width:30ch;min-height:3.2em;font-size:1.0625rem;font-weight:600}.mic-actions{flex-wrap:wrap;justify-content:center;gap:4px 20px;display:flex}.mic-note{color:var(--graphite);max-width:30ch;font-size:.875rem}@media (max-width:1099px){.hero{grid-template-columns:1fr;grid-template-areas:"title""copy""stage"}.hero-title{font-size:clamp(3rem,14.5cqi,9rem)}.stage{max-width:760px;margin-top:40px}}@media (max-width:560px){.stage{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);align-items:center}.stage-art img{max-height:300px}.mic{width:150px;margin-top:30px}}.how{background:var(--ink);color:var(--paper);--soft:color-mix(in srgb, var(--paper) 74%, var(--ink));padding-block:clamp(64px,9vw,128px)}.how :focus-visible{outline-color:var(--red)}.how-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px;display:flex}.song-map{width:min(100%,520px);padding-top:14px;position:relative}.song-map ol{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.song-map a{border:2px solid var(--paper);text-align:center;font:700 1rem/1 var(--label);letter-spacing:.06em;text-transform:uppercase;padding:12px 0 11px;text-decoration:none;transition:background .2s,color .2s;display:block}.song-map a[aria-current]{background:var(--red);color:var(--on-red)}.playhead{height:18px;top:0;left:calc((var(--at) + .5) * 25% - 1.5px);background:var(--paper);width:3px;transition:left .52s var(--ease);pointer-events:none;position:absolute}.playhead:before{content:"";background:var(--red);width:8px;height:8px;position:absolute;top:0;left:-2.5px}.how-body{grid-template-columns:minmax(280px,5fr) 7fr;gap:clamp(32px,6vw,112px);margin-top:clamp(32px,4vw,56px);display:grid}.how-phone{top:calc(var(--header) + 24px);height:calc(100vh - var(--header) - 48px);align-self:start;place-items:center;display:grid;position:sticky}.how-phone .phone{height:min(100%,720px);transform:perspective(1600px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .9s var(--ease)}.how-phone .phone[data-tilt="0"]{--ry:-10deg;--rx:3deg}.how-phone .phone[data-tilt="1"]{--ry:8deg;--rx:2deg}.how-phone .phone[data-tilt="2"]{--ry:-5deg;--rx:-2deg}.layer,.layer img,.step-shot video,.step-shot img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.layer{opacity:0;transition:opacity .42s, transform .62s var(--ease);transform:translateY(16px)scale(.985)}.layer.is-on{opacity:1;transform:none}.steps{flex-direction:column;display:flex}.step{opacity:.32;flex-direction:column;justify-content:center;gap:18px;min-height:76vh;transition:opacity .42s;display:flex}.step.is-active{opacity:1}.step-n{font:400 clamp(3.5rem, 6vw, 5.5rem)/.8 var(--display);color:var(--red)}.step h3{font-size:clamp(2.2rem,4.4vw,4rem);line-height:.92}.step p{max-width:40ch;color:var(--soft);font-size:clamp(1.0625rem,1.3vw,1.25rem)}.step-shot{display:none}@media (max-width:900px){.how-body{grid-template-columns:1fr}.how-phone{display:none}.step{opacity:1;border-top:1px solid color-mix(in srgb, var(--paper) 22%, var(--ink));min-height:0;padding-block:36px}.step-shot{width:min(74vw,300px);margin:16px auto 0;display:block}}@media (prefers-reduced-motion:reduce){.how-phone .phone{transform:none!important}.layer{transform:none}}