/* Udio studio: paper, ink and sound. */
:root{--paper:#f7f6f2;--ink:#22231f;--pink:#bd2150;--muted:#62635d;--border:#d5d5cc}
body{background:var(--paper);color:var(--ink);letter-spacing:0}
.site-header{background:var(--paper);height:96px;border-bottom:1px solid var(--border);padding:22px 4%}
.brand img{width:126px}.language-switch{font-size:13px}
.button{background:var(--ink);border-color:var(--ink);border-radius:100px;padding:13px 25px;font-weight:500;box-shadow:none;transition:background .22s,border-color .22s,transform .22s}
.button:hover{background:var(--pink);border-color:var(--pink);transform:translateY(-2px)}
.header-cta{min-height:43px;padding:10px 24px}
.button:active{transform:translateY(0)}
.topic-hero{width:calc(100% - 112px);max-width:1328px;margin:0 auto;padding:162px 0 64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);grid-template-rows:auto auto 1fr;column-gap:70px;text-align:left;align-items:start}
.topic-hero h1{grid-column:1;grid-row:1;font-size:clamp(40px,4.3vw,65px);line-height:1.04;letter-spacing:-.045em;max-width:650px;margin:42px 0 0;text-wrap:pretty}
.topic-subtitle{grid-column:1;grid-row:2;font-size:18px;line-height:1.65;max-width:460px;margin:27px 0 0;text-wrap:pretty}
.topic-hero .hero-action{grid-column:1;grid-row:3;justify-content:flex-start;margin:30px 0 0;height:auto;max-width:none;gap:0}
.topic-hero .hero-action .soundwave{display:none}
.hero-cta{min-width:190px;height:58px;padding:14px 30px;font-size:17px;border-width:1px}
.topic-visual{grid-column:2;grid-row:1/4;width:100%;min-width:0;margin:0;align-self:center;position:relative;isolation:isolate;background:#eeeee6;border-radius:4px;padding:44px 24px 24px;box-shadow:12px 12px 0 #e5e5da;border:1px solid #d4d4c9;overflow:hidden}
.topic-visual:before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#7374630c 1px,transparent 1px),linear-gradient(90deg,#7374630c 1px,transparent 1px);background-size:24px 24px}
.topic-visual img{border-radius:0;width:100%;height:auto;mix-blend-mode:multiply}
.topic-visual figcaption{border-top:1px solid #c8c9bd;padding-top:17px;margin-top:36px;font-size:13px;line-height:1.55;letter-spacing:0;color:#4e5047}
.topic-section,.content-addition{max-width:1180px;width:calc(100% - 112px)}
.topic-intro{border-top:1px solid var(--border);padding-top:52px;margin-top:64px;gap:100px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.topic-section h2,.content-addition h2{font-size:clamp(30px,3vw,43px);letter-spacing:-.035em;line-height:1.12;text-wrap:pretty}
.topic-prose p,.addition-prose>p{font-size:17px;line-height:1.8}
.topic-how{margin-top:80px;padding:56px 0 64px}
.topic-how>h2{max-width:790px}.topic-steps{gap:50px;margin-top:45px}
.step-number{font-size:38px;line-height:1;color:#8d9182;letter-spacing:-.07em;margin-bottom:24px;font-weight:400}
.topic-steps h3{font-size:23px;letter-spacing:-.025em;line-height:1.2}.topic-steps p{font-size:16px;line-height:1.7}
.content-addition{margin-top:100px;gap:76px}.addition-topic{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#8f253f}
.diagram{border-radius:4px;background:#edece6;border-color:#d4d5c9;padding:32px;box-shadow:7px 7px 0 #e2e3d9}
.addition-inset{border-radius:4px;padding:55px;background:#e9ecdf;border-color:#d8ddcb}
.addition-inset .diagram{background:#f8f8f2;box-shadow:none}
.addition-band{border-top:1px solid var(--border)}
.addition-figure figcaption{font-size:12px;color:#717267;line-height:1.55;margin-top:19px}
.addition-copy{max-width:550px}.addition-inset .addition-copy,.addition-band .addition-copy{max-width:none}
.diagram h3{font-size:19px;letter-spacing:-.02em}.diagram-table thead th{letter-spacing:.02em}
.faq-section{max-width:1180px;width:calc(100% - 112px);display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:70px;padding-top:56px;border-top:1px solid var(--border);margin-top:120px}
.faq-section>h2{text-align:left;font-size:44px;line-height:1.05;letter-spacing:-.04em;margin:6px 0 0;max-width:290px}
.faq-question{font-size:18px;padding:25px 0;line-height:1.5}.faq-item:first-child .faq-question{padding-top:5px}.faq-item{border-color:var(--border)}
.faq-answer p{font-size:16px;color:#62635d;line-height:1.8}
.final-cta,.topic-page .final-cta{max-width:1328px;width:calc(100% - 64px);margin:110px auto 70px;padding:64px 70px;background:#eacbd0;border:1px solid #ddb8bf;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:42px;align-items:center;text-align:left;border-radius:4px;overflow:hidden}
.final-cta p,.topic-page .final-cta p{font-size:clamp(36px,4.2vw,60px);letter-spacing:-.045em;line-height:1.05;max-width:780px;margin:0;text-wrap:pretty}
.final-cta .button,.topic-page .final-cta .button{font-size:18px;padding:17px 34px;min-height:62px;position:relative;z-index:2}
.site-footer.compact-footer{padding-top:32px;padding-bottom:36px;border-color:var(--border);max-width:1180px}
.compact-links{font-size:13px;line-height:1.6}
@media(max-width:1100px){.topic-hero{width:calc(100% - 72px);column-gap:40px;padding-top:144px}.topic-hero h1{font-size:47px;margin-top:25px}.topic-subtitle{font-size:17px}.topic-section,.content-addition,.faq-section{width:calc(100% - 80px)}.topic-intro{gap:50px}.topic-visual{padding:28px 18px 20px}.topic-visual figcaption{margin-top:28px}.content-addition{gap:46px}.faq-section{gap:45px}.faq-section>h2{font-size:36px}.final-cta,.topic-page .final-cta{padding:52px 44px}}
@media(max-width:800px){.topic-hero{width:calc(100% - 48px);column-gap:26px;padding-top:145px}.topic-hero h1{font-size:39px;margin-top:10px}.topic-subtitle{font-size:16px;line-height:1.65}.topic-visual{padding:30px 12px 20px}.topic-visual figcaption{font-size:12px}.topic-section,.content-addition,.faq-section{width:calc(100% - 48px)}.topic-intro,.topic-detail{gap:36px}.content-addition{gap:32px}.diagram{padding:24px}.addition-inset{padding:36px}.faq-section{grid-template-columns:1fr;gap:38px}.faq-section>h2{max-width:none}.final-cta,.topic-page .final-cta{grid-template-columns:1fr;gap:30px;padding:44px 32px}.final-cta .button{justify-self:start}.final-cta p{max-width:650px}}
@media(max-width:600px){.site-header{height:109px;padding:12px 22px 9px}.brand img{width:108px}.header-cta{padding:10px 21px;min-height:40px}.language-switch{font-size:12px}.topic-hero{display:flex;flex-direction:column;padding:145px 0 40px;gap:0;width:calc(100% - 44px)}.topic-hero h1{font-size:43px;max-width:500px;line-height:1.07;margin:0;letter-spacing:-.042em}.topic-subtitle{font-size:16px;line-height:1.7;margin-top:21px;max-width:480px}.topic-hero .hero-action{margin-top:25px}.hero-cta{height:54px;min-width:182px;font-size:16px}.topic-visual{margin-top:38px;padding:26px 15px 18px;box-shadow:7px 7px 0 #e5e5da}.topic-visual figcaption{margin-top:20px;padding-top:15px}.topic-section,.content-addition,.faq-section{width:calc(100% - 44px)}.topic-intro{margin-top:46px;padding-top:33px;display:grid;grid-template-columns:1fr;gap:22px}.topic-section h2,.content-addition h2{font-size:32px}.topic-prose p,.addition-prose>p{font-size:16px;line-height:1.75}.topic-how{margin-top:56px;padding:36px 0 44px}.topic-steps{margin-top:34px;gap:32px}.topic-steps li{padding-left:50px}.step-number{font-size:26px;letter-spacing:-.05em;top:0}.topic-steps h3{font-size:21px}.topic-detail{margin-top:60px}.content-addition{margin-top:65px;grid-template-columns:1fr;gap:28px}.addition-copy{max-width:none}.addition-inset{padding:29px 22px}.addition-band .addition-copy{display:block}.addition-prose{margin-top:21px}.diagram{padding:24px 20px}.addition-figure figcaption{font-size:12px}.topic-page .faq-section,.faq-section{margin-top:76px;padding-top:35px;gap:30px}.faq-section>h2{font-size:34px}.faq-question{font-size:17px;padding:21px 0}.faq-answer p{font-size:15px}.final-cta,.topic-page .final-cta{width:calc(100% - 28px);margin:72px auto 44px;padding:40px 26px;gap:28px}.final-cta p,.topic-page .final-cta p{font-size:38px}.site-footer.compact-footer{width:calc(100% - 44px);gap:25px}.compact-links{font-size:12px;gap:14px 18px}}
@media(max-width:359px){.topic-hero h1{font-size:36px}.topic-hero,.topic-section,.content-addition,.faq-section{width:calc(100% - 36px)}.topic-section h2,.content-addition h2{font-size:28px}.final-cta p,.topic-page .final-cta p{font-size:32px}.diagram{padding:22px 16px}}
@media(prefers-reduced-motion:reduce){.button{transition:none}.button:hover{transform:none}}
/* Photography and the short, responsive sound gesture. */
body:before{content:'';position:fixed;inset:0 auto auto 0;width:100%;height:2px;background:var(--pink);transform:scaleX(var(--reading-progress,0));transform-origin:left;z-index:30;pointer-events:none}
.hero-cta{background:var(--ink);border-color:var(--ink)}
.topic-visual.photo-scene{padding:0;background:transparent;border:0;box-shadow:none;overflow:visible}
.topic-visual.photo-scene:before{display:none}
.studio-photo-frame{height:520px;position:relative;overflow:hidden;border-radius:4px;background:#e4dfd5}
.topic-visual .studio-photo,.home-studio .studio-photo{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal;transform:translate(var(--photo-x,0px),var(--photo-y,0px)) scale(1.025);transition:transform .55s cubic-bezier(.2,.7,.2,1);border-radius:0}
.topic-visual.photo-scene figcaption{margin-top:17px;border:0;padding:0;color:#79786d;font-size:12px;max-width:470px}
.studio-signal{position:relative;margin-top:24px;padding:18px 20px 12px;background:#f7f6ef;border:1px solid #cdcec0;border-radius:3px;overflow:hidden}
.studio-photo-frame .studio-signal{position:absolute;bottom:22px;left:22px;right:22px;background:#f7f6efed;margin:0;box-shadow:0 5px 20px #25251b12}
.signal-label{display:block;font-size:11px;letter-spacing:.05em;margin-bottom:13px;color:#636252}
.signal-bars{height:53px;display:flex;align-items:center;justify-content:space-between;gap:3px;overflow:hidden}
.signal-bars i{display:block;height:var(--bar);background:#b33253;flex:1;max-width:4px;min-width:1px;transform-origin:center;border-radius:1px}
.signal-ruler{display:flex;justify-content:space-between;border-top:1px solid #d5d5c8;margin-top:12px;padding-top:5px;font:9px ui-monospace,monospace;color:#777969}
.signal-active .signal-bars i{animation:studio-pulse 1.45s cubic-bezier(.4,0,.2,1) 1 both;animation-delay:calc(var(--n) * 9ms)}
@keyframes studio-pulse{0%,100%{transform:scaleY(1)}20%{transform:scaleY(.3)}45%{transform:scaleY(1.16)}70%{transform:scaleY(.55)}}
.photo-scene{animation:photo-reveal .95s cubic-bezier(.2,.7,.2,1) both}
@keyframes photo-reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.studio-diagram-frame{margin:10px -15px 12px}.studio-diagram-frame img{min-height:200px;object-fit:contain}
.topic-visual.signal-scene{padding-top:47px;min-height:480px;display:flex;flex-direction:column;justify-content:center}
.signal-scene .studio-signal{margin-top:26px;background:#f8f8f1}
.closing-signal{position:absolute;right:-25px;bottom:-42px;width:56%;z-index:-1;opacity:.32;transform:rotate(-8deg);pointer-events:none}
.closing-signal .signal-bars{height:240px;gap:7px}.closing-signal .signal-bars i{max-width:6px;background:#b35069}
/* The home page follows the same studio composition, with its own image. */
body[data-studio="home"] .hero{width:calc(100% - 112px);max-width:1328px;min-height:0;margin:auto;padding:157px 0 72px;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:70px;text-align:left;overflow:visible}
body[data-studio="home"] .hero h1{grid-column:1;grid-row:1;margin:35px 0 0;font-size:clamp(42px,4.65vw,68px);letter-spacing:-.047em;line-height:1.06;max-width:650px;text-wrap:pretty}
body[data-studio="home"] .hero-subtitle{grid-column:1;grid-row:2;margin:25px 0 0;font-size:18px;line-height:1.65;max-width:440px}
body[data-studio="home"] .hero-action{grid-column:1;grid-row:3;justify-content:flex-start;height:auto;margin:30px 0 0}
body[data-studio="home"] .soundwave{display:none}
body[data-studio="home"] .creation-icons{grid-column:1;grid-row:4;margin:44px 0 0;justify-content:flex-start;gap:24px;align-self:start}
body[data-studio="home"] .creation-icons img{width:40px;height:40px;opacity:.7}
.home-studio{grid-column:2;grid-row:1/5;position:relative;height:570px;margin:0;overflow:hidden;border-radius:4px;background:#e4dfd5}
.home-signal{position:absolute;left:24px;right:24px;bottom:24px;padding:19px 22px;background:#f7f6efed;border:1px solid #d5d5c8;border-radius:3px}
.home-signal .signal-bars{height:40px}
.feature h2,.film-section h2{font-size:clamp(30px,3vw,43px);letter-spacing:-.035em;line-height:1.12}
.feature{border-bottom:1px solid var(--border);padding:95px 0;min-height:0}.feature-copy{padding-left:0}.feature-copy>p:not(.eyebrow){font-size:18px;line-height:1.65}
.video-card{border-radius:4px}.album img{border-radius:3px}.film-frame{border-radius:4px}
@media(max-width:1100px){.studio-photo-frame{height:485px}body[data-studio="home"] .hero{width:calc(100% - 72px);padding-top:144px;column-gap:40px}body[data-studio="home"] .hero h1{font-size:49px;margin-top:25px}.home-studio{height:540px}}
@media(max-width:800px){.studio-photo-frame{height:440px}.studio-photo-frame .studio-signal{left:13px;right:13px;bottom:14px;padding:15px 13px 10px}.signal-bars{gap:2px}.studio-diagram-frame{margin:0 -8px}.topic-visual.signal-scene{min-height:420px}.studio-signal{padding:15px 12px}.signal-scene .signal-bars{height:42px}body[data-studio="home"] .hero{width:calc(100% - 48px);column-gap:28px}body[data-studio="home"] .hero h1{font-size:41px;margin-top:10px}body[data-studio="home"] .hero-subtitle{font-size:16px}.home-studio{height:490px}.home-signal{left:14px;right:14px;bottom:14px;padding:16px}.home-signal .signal-bars{height:35px}}
@media(max-width:600px){.studio-photo-frame{height:405px}.topic-visual.photo-scene{margin-top:38px}.topic-visual.photo-scene figcaption{margin-top:13px}.topic-visual.signal-scene{min-height:350px;padding-top:25px}.studio-diagram-frame img{min-height:150px}.signal-scene .studio-signal{margin-top:15px}.closing-signal{width:100%;bottom:-90px;right:-70px}.closing-signal .signal-bars{height:260px}body[data-studio="home"] .hero{display:flex;flex-direction:column;width:calc(100% - 44px);padding:145px 0 45px}body[data-studio="home"] .hero h1{font-size:44px;margin:0;line-height:1.06}body[data-studio="home"] .hero-subtitle{font-size:16px;margin-top:22px;max-width:440px}body[data-studio="home"] .hero-action{margin-top:26px}body[data-studio="home"] .creation-icons{margin:27px 0 0;gap:23px}body[data-studio="home"] .creation-icons img{width:32px;height:32px}.home-studio{width:100%;height:410px;margin-top:36px;flex-shrink:0}.feature{padding:70px 0}.feature-copy>p:not(.eyebrow){font-size:17px}}
@media(max-width:359px){.studio-photo-frame{height:340px}.home-studio{height:355px}body[data-studio="home"] .hero{width:calc(100% - 36px)}body[data-studio="home"] .hero h1{font-size:37px}.topic-visual.signal-scene{min-height:310px}.studio-diagram-frame img{min-height:130px}}
@media(prefers-reduced-motion:reduce){.photo-scene{animation:none}.topic-visual .studio-photo,.home-studio .studio-photo{transform:none;transition:none}.signal-active .signal-bars i{animation:none}}
/* Responsive diagrams keep labels legible, including on a 320px screen. */
.signal-scene .studio-diagram-frame{margin:0}.topic-visual.signal-scene{padding:34px;min-height:520px;background:#e8e9df}
.signal-scene figcaption{margin-top:34px}.studio-track{padding:23px;background:#f9f9f2;border:1px solid #cecfbf;border-radius:3px}
.studio-track>span{display:block;font-size:13px;color:#4d5144;margin-bottom:22px;line-height:1.5}
.studio-track .diagram-wave{height:70px}.studio-track+.studio-track{margin-top:18px}.track-source .signal-bars i{background:#84897c}
.effect-map .track-effect{border-color:#b44763;background:#f6e7eb}.track-effect .diagram-wave{height:92px}.track-effect .signal-bars i{max-width:5px}
.format-map{display:grid;grid-template-columns:minmax(0,.85fr) 30px minmax(0,1fr);gap:13px;align-items:center;min-height:325px}.format-map b{display:block;font-weight:400;font-size:36px;letter-spacing:-.035em;line-height:1.2;margin-bottom:13px}.format-map span:not(.format-arrow){display:block;font-size:12px;line-height:1.5}.format-original,.format-outputs>div{border:1px solid #c5c7b6;background:#f9f9f2;border-radius:3px;padding:25px 20px}.format-original{min-height:169px;display:flex;flex-direction:column;justify-content:center}.format-arrow{font-size:30px;font-weight:400;color:#929883;text-align:center}.format-outputs{display:grid;gap:18px}.format-outputs>div:first-child{background:#eed2da;border-color:#c88096;color:#8c2040}.format-outputs>div:last-child{background:#d9e0cd;border-color:#9baa84;color:#4c6234}
.split-tracks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:22px;border-top:1px solid #b8bda9;padding-top:22px}.split-tracks .studio-track{margin:0;padding:20px 14px}.split-tracks .studio-track>span{font-size:12px}.track-instrument .signal-bars i{background:#6b8050}.separation-map>.studio-track .diagram-wave{height:60px}.track-noisy{background:#ece7df}.track-noisy .signal-bars{background:repeating-linear-gradient(0deg,transparent 0 4px,#9b91814d 4px 5px);height:84px}.track-noisy .signal-bars i{background:#867b6b}.track-clean{background:#f8f8f1;border-color:#9aaa87}.track-clean .signal-bars i{background:#647e47}.voice-sample{display:flex;align-items:center;gap:26px;border-bottom:1px solid #b8bda9;padding-bottom:28px;margin-bottom:28px}.voice-sample>span{font-size:14px;max-width:150px;line-height:1.5}.voice-print{position:relative;flex:none;width:130px;height:130px;overflow:hidden;border-radius:50%;background:#e5cad2;transform:rotate(-25deg)}.voice-print i{position:absolute;border:1px solid #9f3652;border-radius:50%;inset:calc(var(--ring) * 3.5px - 12px);transform:translateX(calc(var(--ring) * 1.5px))}.voice-map .studio-track{background:#f9f9f2}
@media(max-width:1100px){.topic-visual.signal-scene{padding:26px;min-height:485px}.format-map{gap:8px;grid-template-columns:minmax(0,.85fr) 22px minmax(0,1fr)}.format-original,.format-outputs>div{padding:20px 13px}.format-map b{font-size:30px}.studio-track{padding:20px}}
@media(min-width:601px) and (max-width:800px){.topic-visual.signal-scene{padding:20px 15px;min-height:450px}.format-map{grid-template-columns:1fr;min-height:0;gap:14px}.format-original{min-height:0;padding:18px;display:block}.format-arrow{display:none}.format-outputs{grid-template-columns:1fr 1fr;gap:9px}.format-map b{font-size:25px;margin-bottom:7px}.format-map span:not(.format-arrow){font-size:11px}.format-outputs>div{padding:16px 10px}.split-tracks{grid-template-columns:1fr;gap:12px}.split-tracks .diagram-wave{height:32px}.voice-sample{gap:18px}.voice-print{width:80px;height:80px}.voice-sample>span{font-size:12px}}
@media(max-width:600px){.topic-visual.signal-scene{padding:26px 21px;min-height:390px}.format-map{min-height:245px;grid-template-columns:minmax(0,.85fr) 16px minmax(0,1fr);gap:8px}.format-original,.format-outputs>div{padding:19px 13px}.format-map b{font-size:29px}.format-arrow{font-size:23px}.format-map span:not(.format-arrow){font-size:11px}.studio-track{padding:20px 16px}.studio-track>span{margin-bottom:17px;font-size:12px}.studio-track .diagram-wave{height:60px}.split-tracks{gap:10px}.split-tracks .studio-track{padding:17px 10px}.split-tracks .studio-track>span{font-size:11px}.voice-print{width:100px;height:100px}.voice-sample{gap:22px}.voice-sample>span{font-size:13px}.signal-scene figcaption{margin-top:28px}}
@media(max-width:359px){.topic-visual.signal-scene{padding:22px 16px;min-height:360px}.format-map{grid-template-columns:1fr;gap:14px;min-height:0}.format-original{min-height:0;padding:17px}.format-original b{margin-bottom:7px}.format-arrow{display:none}.format-outputs{grid-template-columns:1fr 1fr;gap:10px}.format-outputs>div{padding:18px 11px}.format-map b{font-size:26px}.voice-sample{gap:16px}.voice-print{width:80px;height:80px}.voice-sample>span{font-size:12px}}