/* The Practice Room — editorial cover, playable instrument, clear next steps. */
:root{--maxw:1264px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--gs-bg);color:var(--gs-ink);font-family:var(--gs-font-body);line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 36px}
a{color:inherit;text-decoration:none}h1,h2,h3,caption,summary{font-family:var(--gs-font-disp)}
.mono{font:500 .69rem/1.5 var(--gs-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gs-ink-mute)}
.tlink{color:#76520a;text-decoration:underline;text-underline-offset:4px}
.hero{display:grid;grid-template-columns:1fr 1.04fr;grid-template-areas:"head instrument" "body instrument";gap:20px 52px;padding-top:64px;padding-bottom:76px;align-items:start}
.hero-head{grid-area:head;padding-top:14px}.hero-body{grid-area:body}.hero-instrument{grid-area:instrument;min-width:0;position:relative;border-radius:16px;overflow:hidden;border:1px solid #303a31;background:#202b24;box-shadow:12px 14px 0 #dedecf;color:#f5f1e8}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:26px}.eyebrow .tick{width:8px;height:8px;background:#bb512f;border-radius:50%}.eyebrow .mono{font-size:.65rem;color:#515b50;letter-spacing:.1em}
h1{font-weight:800;font-size:clamp(3.4rem,6.1vw,5.5rem);line-height:.96;letter-spacing:-.055em;font-variation-settings:"opsz" 96;max-width:10ch}
h1 em{font-style:normal;display:block;color:#8b6014;margin-top:4px}
.lede{max-width:40ch;font-size:1.09rem;color:var(--gs-ink-soft);line-height:1.65}
.hero-note{font-size:.8rem;color:#5e685d;margin-top:14px;max-width:40ch}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.cta-row .gs-btn--primary{background:#202b24;color:#fffaf0}.cta-row .gs-btn--primary:hover{background:#3b5041}.cta-row .gs-btn--ghost{border:1px solid #a2ad9e;background:transparent;color:#202b24}
.facts{display:flex;justify-content:space-between;gap:14px;max-width:430px;border-top:1px solid #c5cabb;padding-top:20px;margin-top:32px}.fact .n{font:750 1.5rem/1 var(--gs-font-disp);letter-spacing:-.03em}.fact .l{font-size:.72rem;color:#626c60;margin-top:7px}
.record-scene{height:285px;position:relative;overflow:hidden;background:#e9bb57;border-bottom:1px solid #303a31;color:#202b24}
.record-caption{position:relative;z-index:1;display:flex;justify-content:space-between;gap:10px;padding:22px 24px;font:600 .62rem/1.5 var(--gs-font-mono);letter-spacing:.14em}
.record{width:310px;aspect-ratio:1;position:absolute;top:65px;left:-10px;border-radius:50%;border:9px solid #1c2721;background:repeating-radial-gradient(circle at center,#1b2721 0 2px,#3b4638 3px,#1b2721 4px,#1b2721 6px);box-shadow:12px 12px 0 #b58731}
.record::after{content:"";position:absolute;inset:10px;border-radius:50%;background:conic-gradient(from 30deg,transparent,#ffffff10,transparent 30%,#ffffff09,transparent 60%);pointer-events:none}
.record-label{position:absolute;inset:32%;border-radius:50%;background:#bb512f;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff1cc;text-align:center;transform:rotate(-15deg)}
.record-label::before{content:"";width:7px;height:7px;background:#17261c;border-radius:50%;position:absolute;top:12px}
.record-label span{font:800 1.05rem/.95 var(--gs-font-disp);letter-spacing:-.04em}.record-label small{font:500 5px/1.4 var(--gs-font-mono);letter-spacing:.11em;margin-top:8px}
.record-note{position:absolute;right:27px;top:95px;font:750 clamp(1.2rem,2vw,1.9rem)/1.1 var(--gs-font-disp);letter-spacing:-.04em;width:145px;max-width:32%}.record-side{position:absolute;right:23px;bottom:23px;writing-mode:vertical-rl;font:500 8px/1 var(--gs-font-mono);letter-spacing:.12em}
.groove{position:relative;padding:25px 22px 18px;background:#202b24;color:#f5f1e8}
.groove-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}.groove-title{font:700 1.05rem/1.3 var(--gs-font-disp)}.groove-title small{display:block;font:400 .58rem/1.5 var(--gs-font-mono);letter-spacing:.13em;color:#aab7a7;text-transform:uppercase;margin-top:6px}
.groove-play{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;border-radius:5px;padding:12px 14px;font:700 .85rem/1 var(--gs-font-body);background:#efbe57;color:#202b24}.groove-play:hover{background:#f8d78d}.groove-play svg{width:14px;height:14px;fill:currentColor}.groove-play[aria-pressed="true"]{background:#f29b73}.groove-play .i-stop,.groove-play[aria-pressed="true"] .i-play{display:none}.groove-play[aria-pressed="true"] .i-stop{display:block}
.grid{display:grid;grid-template-columns:48px 1fr;gap:11px 9px;align-items:center}.row-label{font:500 .58rem/1.3 var(--gs-font-mono);text-transform:uppercase;white-space:nowrap;color:#b6c0b2}.steps{display:grid;grid-template-columns:repeat(16,1fr);gap:4px}.step{height:21px;min-width:0;border-radius:3px;border:1px solid #52604e;background:#334132;cursor:pointer;padding:0}.step:nth-child(4n+1){background:#42513d}.step[aria-pressed="true"]{background:#efbe57;border-color:#efbe57;box-shadow:0 2px 0 #ac853b}.step:hover{outline:1px solid #f5f1e8;outline-offset:1px}.step.now{outline:2px solid #f5f1e8;outline-offset:2px}.step.now[aria-pressed="true"]{background:#f29b73}.counts{display:grid;grid-template-columns:48px 1fr;gap:9px;margin-top:8px}.counts ol{list-style:none;display:grid;grid-template-columns:repeat(16,1fr);gap:4px;text-align:center;font:400 .53rem/1.5 var(--gs-font-mono);color:#a5b29f}.counts li:nth-child(4n+1){color:#efbe57}.groove-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:9px;border-top:1px solid #43513f;margin-top:22px;padding-top:15px;font-size:.68rem;color:#b6c0b2}.groove-foot a{color:#f6d78a;font-weight:600}.groove-title a:hover,.groove-foot a:hover{text-decoration:underline;text-underline-offset:4px}
.section{padding-top:64px;padding-bottom:64px;border-top:1px solid #c5cabb}.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:30px}h2{font-weight:750;font-size:clamp(1.85rem,3.5vw,2.7rem);letter-spacing:-.045em;line-height:1.08;max-width:21ch;text-wrap:balance}
.studios{display:grid;grid-template-columns:1fr 1fr;gap:22px}.studio{position:relative;border:1px solid #bac2af;border-radius:10px;overflow:hidden;background:#e9eddf}.studio>a{position:relative;display:block;padding:30px;min-height:320px}.studio:last-child{background:#e9e2cd}.studio:hover{border-color:#65765d}.studio .num{display:block;font:600 .65rem/1.5 var(--gs-font-mono);letter-spacing:.13em;color:#496043}.studio:last-child .num{color:#77551c}.studio h3{position:relative;z-index:1;font:750 2rem/1.1 var(--gs-font-disp);letter-spacing:-.04em;margin:105px 0 14px}.studio p{max-width:44ch;color:#465442;font-size:.94rem}.tags{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0}.tag{font-size:.7rem;border:1px solid #aeb9a1;border-radius:3px;padding:4px 8px;background:#ffffff35;color:#3f4d39}.go{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:20px;border-top:1px solid #b4bca6;font-weight:700;font-size:.9rem;color:#233e28}.go .ar{display:grid;place-items:center;width:30px;height:30px;border:1px solid #89977c;border-radius:50%;transition:transform .15s}.studio:hover .ar{transform:translateX(3px)}
.room-art{position:absolute;right:30px;top:65px;display:flex;gap:5px;pointer-events:none}.room-art--pads{width:148px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;transform:rotate(-8deg)}.room-art--pads i{height:24px;border:1px solid #698364;border-radius:4px;background:#6d8965;box-shadow:0 3px 0 #44613b}.room-art--pads i:nth-child(3n+1){background:#e8bb51;border-color:#ad8b37}.room-art--keys{height:85px;transform:rotate(7deg);gap:3px;padding:10px;background:#313f32;border-radius:7px;box-shadow:4px 5px 0 #b9b09b}.room-art--keys i{position:relative;width:16px;background:#f9f2e0;border-radius:2px}.room-art--keys i:not(:nth-child(3n))::after{content:"";position:absolute;left:10px;top:0;z-index:1;width:10px;height:55%;background:#273025;border:1px solid #273025;border-radius:0 0 2px 2px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}.def{font:650 clamp(1.5rem,2.5vw,2rem)/1.3 var(--gs-font-disp);letter-spacing:-.03em;max-width:25ch}.def b{color:#8b6014}.about-grid h2{font-size:1.4rem;margin-bottom:14px}.lead{color:#4c5949;font-size:1rem}.lead strong{color:#253322}
.give{display:grid;grid-template-columns:1fr auto;gap:30px 44px;align-items:center;background:#e6bb57;border:1px solid #bd9337;border-radius:10px;padding:36px;color:#242c20}.give h2{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:16px}.give p{color:#4b482f;font-size:.94rem;max-width:52ch}.give .gs-kicker{color:#634612}.give .gs-pay-row{flex-direction:column}
.table-wrap{overflow-x:auto;border:1px solid #c5cabb;border-radius:8px;background:#fbf8ef}table{border-collapse:collapse;width:100%;min-width:550px}caption{text-align:left;padding:25px 26px;font:750 1.7rem/1.2 var(--gs-font-disp);letter-spacing:-.035em}th,td{text-align:left;padding:17px 24px;border-top:1px solid #d6d8ca;vertical-align:top;font-size:.94rem}thead th{background:#e5e9da;font-weight:700}tbody th{font:600 .67rem/1.7 var(--gs-font-mono);letter-spacing:.06em;text-transform:uppercase;color:#5e6a56;width:24%}tbody td{color:#4a5743}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:0 30px}.fcard{padding:24px 0;border-top:2px solid #849277}.fcard::before{content:attr(data-step);font:600 .7rem/1.5 var(--gs-font-mono);color:#806014}.fcard h3{font-size:1.2rem;letter-spacing:-.025em;margin:10px 0}.fcard p{color:#53604d;font-size:.94rem}
.faq{max-width:900px}details{border-bottom:1px solid #c5cabb}details:first-child{border-top:1px solid #c5cabb}summary{list-style:none;cursor:pointer;padding:23px 0;font-size:1.14rem;font-weight:700;letter-spacing:-.015em;display:flex;align-items:center;justify-content:space-between;gap:16px}summary::-webkit-details-marker{display:none}summary:hover{color:#806014}summary .pm{display:grid;place-items:center;width:28px;height:28px;flex:none;border:1px solid #b4bda6;border-radius:50%;font-family:var(--gs-font-mono)}details[open] summary .pm{transform:rotate(45deg);background:#e6bb57}details p{max-width:70ch;padding-bottom:24px;color:#53604d}
@media(min-width:1400px){.hero{padding-top:80px;padding-bottom:90px}.record-scene{height:310px}.record{width:340px;left:0}}
@media(max-width:980px){.hero{gap:24px 30px}.wrap{padding-left:24px;padding-right:24px}h1{font-size:clamp(3.3rem,6.6vw,5.1rem)}.record{width:280px;left:-50px}.record-note{right:18px}.hero-instrument{box-shadow:7px 9px 0 #dedecf}.facts{gap:10px}.groove{padding:20px 16px}.steps,.counts ol{gap:3px}.grid,.counts{grid-template-columns:42px 1fr;gap:9px 6px}.row-label{font-size:.5rem}.step{height:18px}}
@media(max-width:760px){.hero{grid-template-columns:1fr;grid-template-areas:"head" "body" "instrument";padding-top:28px;padding-bottom:48px;gap:22px}.hero-head{padding-top:0}h1{font-size:clamp(3.3rem,12vw,5.6rem);max-width:11ch}.eyebrow{margin-bottom:20px}.hero-body{padding-bottom:14px}.hero-instrument{max-width:560px;width:100%;justify-self:center}.record-scene{height:220px}.record{width:290px;left:14px;top:56px}.record-note{font-size:1.5rem;right:26px;top:82px}.groove{padding:22px 18px}.grid,.counts{grid-template-columns:46px 1fr;gap:9px}.step{height:24px}.row-label{font-size:.56rem}.facts{max-width:none;margin-top:25px}.studios{grid-template-columns:1fr}.studio>a{padding:24px}.section{padding-top:44px;padding-bottom:44px}.about-grid{grid-template-columns:1fr;gap:26px}.give{grid-template-columns:1fr;padding:26px}.feat{grid-template-columns:1fr 1fr;gap:0 22px}.sec-head{gap:14px}.give .gs-pay-row{flex-direction:row}}
@media(max-width:420px){.wrap{padding-left:20px;padding-right:20px}.record{left:-50px;width:235px}.record-note{font-size:1.35rem;right:18px}.record-caption{padding:18px;font-size:.55rem}.record-side{right:16px}.hero-instrument{box-shadow:5px 7px 0 #dedecf}.grid,.counts{grid-template-columns:39px 1fr;gap:8px 6px}.steps,.counts ol{gap:3px}.row-label{font-size:.48rem}.step{height:20px;border-radius:2px}.counts ol{font-size:.48rem}.groove-title{font-size:.95rem}.groove-play{padding:12px}.groove-foot{font-size:.67rem}.feat{grid-template-columns:1fr}.facts .l{font-size:.68rem}.give .gs-pay{width:100%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}