.tuneful-case{--tn-panel:#19191c}
:root[data-theme=light] .tuneful-case{--tn-panel:#f3f3f5}
.tn-hero{height:clamp(300px,52svh,540px);border-radius:8px;overflow:hidden}
.tn-hero-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:20px}
.tn-hero-foot>span{font:400 12px/1.6 var(--sans);color:var(--secondary-text)}
.tn-links{display:flex;align-items:center;gap:24px;flex-shrink:0;font:400 13px/1.5 var(--sans)}
.tn-links a{min-height:38px;display:inline-flex;align-items:center;gap:18px;border-bottom:1px solid var(--hairline)}
.tn-links .tn-play{border:1px solid var(--hairline);border-radius:24px;padding:10px 18px}
.tn-links a:hover{background:var(--tn-panel);color:var(--page-text)}
.tuneful-case :is(a,summary):focus-visible{outline:2px solid currentColor;outline-offset:5px}
.tuneful-case .case-section{scroll-margin-top:100px;padding:64px 0}
.tuneful-case .case-overview{grid-template-columns:1.45fr 1fr;gap:8%}
.tuneful-case .case-overview p,.tn-heading>p,.tn-iteration-copy>p,.tn-build-note>p{font:400 17px/1.7 var(--sans);color:var(--secondary-text);max-width:none;margin:20px 0 0}
.tn-heading{margin-bottom:32px}.tn-kicker{display:block;font:400 12px/1.5 var(--sans);color:var(--secondary-text);margin-bottom:16px}
.tn-heading>p{max-width:80ch}
.tn-decisions{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.tn-decisions article{border-top:1px solid var(--hairline);padding-top:24px}
.tuneful-case h3{font:500 20px/1.4 var(--sans);letter-spacing:-.02em;margin:0 0 12px}
.tn-decisions p,.tn-examples figcaption p{font:400 16px/1.7 var(--sans);color:var(--secondary-text);margin:0}
.tn-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tn-examples figure{margin:0;min-width:0}
.tn-example-stage{height:410px;display:flex;align-items:center;justify-content:center;background:var(--tn-panel);border-radius:8px;padding:22px 12px}
.tn-example-stage .tn-phone{width:158px;max-width:100%;padding:5px;border-radius:24px}
.tn-example-stage .tn-screen{border-radius:16px}
.tn-examples figcaption{margin-top:24px}.tn-examples figcaption h3{font-size:18px}
.tn-iteration{display:grid;grid-template-columns:.8fr 1.2fr;gap:7%;align-items:center}
.tn-iteration figure{margin:0}.tn-input-stage{background:var(--tn-panel);border-radius:8px;padding:30px 20px;display:flex;justify-content:center}
.tn-input-stage .tn-phone{width:200px}
.tn-iteration figcaption{font:400 12px/1.6 var(--sans);color:var(--secondary-text);margin-top:16px}
.tn-iteration-copy strong{color:var(--page-text);font-weight:500}
.tn-iteration-copy h2{font-size:clamp(26px,2.2vw,32px)}
.tn-build-note{margin-top:48px;padding-top:28px;border-top:1px solid var(--hairline)}
.tn-build-note .tn-validation{font-size:13px;margin-top:16px}
.tn-end{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:36px}
.tn-end>p{font:500 20px/1.4 var(--sans);margin:0}
.tuneful-case .project-nav{margin-top:0}
@media(max-width:1000px){.tn-example-stage{height:350px}.tn-example-stage .tn-phone{width:138px}.tn-hero-foot{align-items:flex-start}.tn-hero-foot>span{max-width:34ch}}
@media(max-width:760px){.tuneful-case .case-overview{grid-template-columns:1fr;gap:32px}.tn-iteration{grid-template-columns:1fr;gap:28px}.tn-iteration-copy{grid-row:1}.tn-input-stage .tn-phone{width:190px}.tn-examples{gap:16px}.tn-hero{height:360px}.tn-hero-foot{flex-direction:column;gap:12px}.tn-hero-foot>span{max-width:none}.tn-decisions{gap:24px}}
@media(max-width:580px){.tn-hero{height:auto;aspect-ratio:16/10}.tuneful-case .case-section{padding:44px 0;scroll-margin-top:130px}.tn-decisions,.tn-examples{grid-template-columns:1fr;gap:28px}.tn-example-stage{height:390px}.tn-example-stage .tn-phone{width:158px}.tn-examples figcaption{margin-top:18px}.tn-end{align-items:flex-start;flex-direction:column}.tn-links{gap:18px;font-size:12px}.tn-iteration-copy h2 br{display:none}}