/* Beat Girl — garden photographs, pink chair, blue gloves. */
.page-beatgirl { --paper:#f5c7dc; --ink:#161713; background:var(--paper); }
.bg-world { --bg-pink:#f5c7dc; --bg-blue:#2538dc; color:#161713; }
.bg-world [hidden] { display:none !important; }
.bg-register { display:flex; justify-content:space-between; padding:16px var(--gutter); font:10px/1.4 var(--mono); letter-spacing:.04em; }
.bg-register nav { display:flex; gap:28px; }
.bg-stage { position:relative; height:calc(100svh - var(--header) - 46px); min-height:610px; max-height:1100px; overflow:hidden; isolation:isolate; background:#232c1e; }
.bg-stage-photo,.bg-stage-photo picture,.bg-stage canvas { position:absolute; inset:0; width:100%; height:100%; }
.bg-stage-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 44%; }
.bg-stage canvas { opacity:0; transition:opacity .25s; pointer-events:none; }
.bg-stage[data-ready] canvas { opacity:1; }
.bg-name { position:absolute; inset:0; margin:0; pointer-events:none; color:var(--bg-pink); font-size:clamp(140px,19vw,360px); letter-spacing:-.085em; line-height:.72; font-weight:800; }
.bg-name span { position:absolute; }
.bg-name span:first-child { left:1.7%; top:4%; }
.bg-name span:last-child { right:3%; bottom:4%; }
.bg-play { position:absolute; left:var(--gutter); bottom:28px; width:156px; height:156px; display:flex; flex-direction:column; justify-content:center; align-items:center; border:1px solid var(--bg-pink); border-radius:50%; background:var(--bg-pink); color:#171715; font:11px/1.4 var(--mono); transition:background .2s,color .2s,transform .2s; }
.bg-play-icon { font:43px/.95 var(--sans); margin-bottom:9px; }
.bg-play strong { font:11px/1.4 var(--mono); font-weight:400; max-width:130px; margin-top:4px; }
.bg-play:hover { background:#161713; color:var(--bg-pink); transform:rotate(-5deg); }
.bg-world[data-bg-playing=true] .bg-play-icon { font-size:0; }
.bg-world[data-bg-playing=true] .bg-play-icon::after { content:'Ⅱ'; font:40px/.95 var(--sans); }
.bg-stage-down { position:absolute; right:var(--gutter); top:24px; background:var(--bg-pink); color:#171715; border-radius:50%; width:44px; height:44px; display:grid; place-items:center; font-size:23px; }
.bg-console { display:flex; align-items:center; gap:18px; padding:10px var(--gutter); border-bottom:1px solid #171715; font:10px/1.4 var(--mono); }
.bg-console button { min-height:44px; padding:0 14px; }
.bg-modes { display:flex; gap:2px; }
.bg-modes [aria-pressed=true],.bg-hold[aria-pressed=true] { color:var(--bg-pink); background:#171715; }
.bg-motion-note { margin-left:auto; }
.bg-save { border:1px solid currentColor; }
.bg-contact-strip { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:16px var(--gutter) 24px; }
.bg-contact-strip button { padding:3px; border:1px solid transparent; width:78px; height:58px; flex:none; opacity:.65; transition:opacity .2s; }
.bg-contact-strip button[aria-pressed=true] { border-color:currentColor; opacity:1; }
.bg-contact-strip button:hover { opacity:1; }
.bg-contact-strip img { height:50px; width:70px; object-fit:cover; }
.bg-sound { padding:7vw var(--gutter) 8vw; display:grid; grid-template-columns:1fr 1.05fr; gap:9vw; background:var(--bg-blue); color:var(--bg-pink); }
.bg-listening h2 { font-size:clamp(70px,9.5vw,180px); line-height:.76; letter-spacing:-.08em; font-weight:600; margin:0 0 50px; }
.bg-listening h2 span { display:block; margin-left:8%; }
.bg-now { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; min-height:44px; }
.bg-now>span { font-size:18px; }
.bg-versions { display:flex; border:1px solid var(--bg-pink); padding:3px; }
.bg-versions button { min-height:38px; padding:0 10px; font:9px/1 var(--mono); }
.bg-versions [aria-pressed=true] { background:var(--bg-pink); color:#171715; }
.bg-listening audio { width:100%; height:40px; display:block; }
.bg-waveform { margin-top:25px; position:relative; }
.bg-waveform svg { display:block; width:100%; height:72px; stroke:var(--bg-pink); stroke-width:1.8; }
.bg-waveform::after { content:''; position:absolute; left:var(--bg-playhead); top:0; height:72px; width:2px; background:#fff; pointer-events:none; }
.bg-waveform input { position:absolute; inset:0 0 auto; width:100%; height:72px; opacity:0; margin:0; cursor:ew-resize; }
.bg-waveform:focus-within { outline:2px solid var(--bg-pink); outline-offset:6px; }
.bg-times { display:flex; justify-content:space-between; margin-top:8px; font:10px/1.4 var(--mono); }
.bg-player-status { font:11px/1.5 var(--mono); min-height:1.5em; margin:12px 0 0; }
.bg-recordings h3 { margin:0 0 23px; font:10px/1.4 var(--mono); letter-spacing:.05em; }
.bg-track { display:grid; grid-template-columns:24px 1fr 38px 18px; gap:12px; align-items:center; padding:23px 0; border-top:1px solid #f5c7dc70; font-size:clamp(16px,1.8vw,28px); transition:padding .2s,background .2s; }
.bg-track-number,.bg-track-duration { font:10px/1.4 var(--mono); }
.bg-track-arrow { font:23px/1 var(--sans); }
.bg-track:hover,.bg-track[aria-current=true] { background:var(--bg-pink); color:#171715; padding-left:12px; padding-right:12px; }
.bg-track[data-bg-track=pilots-club] { margin-top:32px; }
.bg-direct { margin-top:24px; }
.bg-direct a { display:block; padding:12px; }
.bg-photographs { padding:10vw var(--gutter) 0; }
.bg-photo-sequence { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:8vw 2vw; align-items:start; }
.bg-photo { margin:0; }
.bg-photo img { width:100%; height:auto; display:block; }
.bg-photo-1 { grid-column:1/10; }
.bg-photo-2 { grid-column:8/13; margin-top:-16vw; z-index:1; border:12px solid var(--bg-pink); border-right:0; }
.bg-photo-3 { grid-column:2/8; margin-top:-20vw; }
.bg-photo-4 { grid-column:1/5; }
.bg-photo-5 { grid-column:7/12; margin-top:12vw; }
.bg-photo-6 { grid-column:1/10; margin-top:2vw; }
.bg-photo-7 { grid-column:5/13; }
.bg-photo-8 { grid-column:1/13; margin:3vw calc(-1 * var(--gutter)) 4vw; }
.bg-photo-9 { grid-column:2/7; }
.bg-photo-10 { grid-column:8/13; margin-top:16vw; }
.bg-photo-11 { grid-column:1/8; margin-top:-12vw; }
.bg-photo-12 { grid-column:5/12; margin-top:3vw; }
.bg-colophon { margin-top:9vw; padding:25px var(--gutter) 0; display:grid; grid-template-columns:1fr 1fr; gap:12px; border-top:1px solid #171715; font:10px/1.4 var(--mono); }
.bg-colophon>a:nth-child(2) { text-align:right; }
.bg-colophon>span { grid-column:1/-1; font:600 43vw/.8 var(--sans); letter-spacing:-.09em; margin:6vw 0 0 -2.5vw; }
.page-beatgirl .site-footer { margin-top:0; }
@media(min-width:1800px) { .bg-stage { max-height:1200px; } }
@media(max-width:900px) { .bg-sound { gap:5vw; }.bg-now { align-items:flex-start; flex-direction:column; }.bg-motion-note { display:none; }.bg-save { margin-left:auto; } }
@media(max-width:760px) {
 .bg-register { padding-top:13px; padding-bottom:13px; font-size:9px; }
 .bg-stage { height:calc(100svh - var(--header) - 40px); min-height:540px; max-height:850px; }
 .bg-stage-photo img { object-position:51% 42%; }
 .bg-name { font-size:32vw; }
 .bg-name span:first-child { left:2%; top:4%; }
 .bg-name span:last-child { right:5%; bottom:5%; }
 .bg-play { width:104px; height:104px; left:16px; bottom:20px; font-size:9px; }
 .bg-play-icon { font-size:28px; margin-bottom:6px; }
 .bg-play strong { font-size:8px; max-width:90px; }
 .bg-stage-down { right:14px; top:32%; width:40px; height:40px; font-size:20px; }
 .bg-console { gap:5px; flex-wrap:wrap; padding:10px 12px; font-size:9px; }
 .bg-console button { padding:0 10px; }
 .bg-save { margin-left:auto; }
 .bg-contact-strip { justify-content:space-between; gap:4px; padding:12px 12px 20px; }
 .bg-contact-strip button { width:calc((100vw - 44px)/6); height:52px; padding:2px; }
 .bg-contact-strip img { width:100%; height:46px; }
 .bg-sound { display:block; padding:58px var(--gutter) 48px; }
 .bg-listening h2 { font-size:25vw; margin-bottom:35px; }
 .bg-now { align-items:center; flex-direction:row; }
 .bg-now>span { font-size:16px; }
 .bg-recordings { margin-top:40px; }
 .bg-recordings h3 { margin-bottom:15px; }
 .bg-track { padding-top:20px; padding-bottom:20px; font-size:19px; grid-template-columns:18px 1fr 34px 16px; gap:8px; }
 .bg-track[data-bg-track=pilots-club] { margin-top:24px; }
 .bg-photographs { padding-top:55px; }
 .bg-photo-sequence { gap:50px 12px; }
 .bg-photo-1 { grid-column:1/13; }
 .bg-photo-2 { grid-column:5/13; margin:0; border:0; }
 .bg-photo-3 { grid-column:1/11; margin:0; }
 .bg-photo-4 { grid-column:1/7; }
 .bg-photo-5 { grid-column:7/13; margin-top:30vw; }
 .bg-photo-6 { grid-column:1/13; margin:0; }
 .bg-photo-7 { grid-column:3/13; }
 .bg-photo-8 { margin-top:0; margin-bottom:0; }
 .bg-photo-9 { grid-column:1/9; }
 .bg-photo-10 { grid-column:5/13; margin:0; }
 .bg-photo-11 { grid-column:1/13; margin:0; }
 .bg-photo-12 { grid-column:2/12; margin:0; }
 .bg-colophon { margin-top:60px; padding-top:20px; font-size:8px; }
 .bg-colophon>span { margin-top:50px; margin-bottom:10px; }
}
@media(max-width:380px) { .bg-console { gap:0; }.bg-console button { padding:0 8px; }.bg-versions button { padding:0 7px; }.bg-name { font-size:31vw; }.bg-play { bottom:105px; } }
@media(prefers-reduced-motion:reduce) { .bg-world * { transition:none !important; scroll-behavior:auto !important; } }