body[data-screen="intro"] header{position:fixed;left:0;right:0;background:transparent}
body[data-screen="intro"] header img,body[data-screen="intro"] header span,body[data-screen="intro"] header button,body[data-screen="intro"] .progress{opacity:0;pointer-events:none}
.screen.intro{max-width:none;padding:0;position:relative;min-height:100svh;background:var(--rose);color:white;overflow:hidden}
.intro .visual{position:absolute;inset:0;background:linear-gradient(90deg,rgba(43,64,69,.08),rgba(43,64,69,.26) 58%,rgba(43,64,69,.58)),url('/assets/pink-liquid-hero.png') center/cover;animation:heroDrift 16s ease-in-out infinite alternate;transform:scale(1.04)}
.intro-shell{position:relative;z-index:1;width:min(1180px,100%);min-height:100svh;margin:0 auto;padding:32px clamp(28px,6vw,72px) 26px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(390px,.7fr);grid-template-rows:auto 1fr auto;column-gap:clamp(48px,8vw,110px)}
.intro-brand{grid-column:1/-1;display:flex;align-items:flex-start;padding-bottom:22px;border-bottom:1px solid rgba(243,246,251,.72)}
.intro-brand img{width:126px;height:auto;filter:brightness(0) invert(1)}
.intro-brand span{margin-left:auto;padding-top:12px;font-family:Copperplate,'Copperplate Light','Times New Roman',serif;font-size:.68rem;letter-spacing:.28em;color:rgba(255,255,255,.78)}
.intro-copy{align-self:center;padding:54px 0 56px}
.intro-label{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.intro-label p{margin:0;font-family:Copperplate,'Copperplate Light','Times New Roman',serif;font-size:.72rem;letter-spacing:.26em;color:var(--rose)}
.intro-copy h1{color:white;font-size:clamp(2.75rem,4.1vw,3.55rem);line-height:1.18;letter-spacing:-.05em;text-shadow:0 1px 24px rgba(31,48,52,.16)}
.intro-lead{margin:22px 0 0;color:rgba(255,255,255,.8);font-size:1rem;line-height:1.85}
.sound-toggle{width:40px;height:40px;margin:0;padding:0;border:1px solid rgba(255,255,255,.68);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:white;font-family:Georgia,'Times New Roman',serif;font-size:1.05rem;line-height:1;cursor:pointer;transition:.2s ease}
.sound-toggle:hover{transform:scale(1.05);background:rgba(255,255,255,.2)}
.sound-toggle:focus-visible{outline:3px solid white;outline-offset:3px}
.sound-toggle.is-playing{background:rgba(255,255,255,.94);color:var(--green);animation:soundPulse 2.2s ease-in-out infinite}
.entry-paths{align-self:center;display:grid;gap:12px;padding:40px 0 42px}
.entry-path{position:relative;min-height:148px;padding:20px 23px;border:1px solid rgba(255,255,255,.48);display:grid;grid-template-columns:34px 1fr;gap:5px 11px;text-align:left;cursor:pointer;transition:transform .2s ease,background .2s ease}
.entry-path:hover{transform:translateY(-2px)}
.path-index{grid-row:1/span 2;padding-top:4px;font-family:Copperplate,'Copperplate Light',serif;font-size:.68rem;letter-spacing:.12em}
.path-copy{display:block;padding-right:4px}
.path-copy b{display:block;font-weight:300;font-size:1.42rem;line-height:1.4;letter-spacing:-.025em}
.path-copy small{display:block;margin-top:9px;font-size:.86rem;line-height:1.65;font-weight:300}
.path-action{grid-column:2;display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:12px;border-top:1px solid;font-family:Copperplate,'Copperplate Light','Times New Roman',serif;font-size:.73rem;letter-spacing:.08em}
.path-action i{font-style:normal;font-size:1.1rem}
.primary-path{background:rgba(243,246,251,.97);border-color:var(--snow);color:var(--green)}
.primary-path .path-index{color:#b88f89}.primary-path small{color:#617075}.primary-path .path-action{border-color:rgba(43,64,69,.18)}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-actions button,.quick-actions a{box-sizing:border-box;min-height:66px;padding:15px 17px;border:1px solid rgba(255,255,255,.74);background:var(--green);color:var(--snow);display:flex;align-items:center;justify-content:space-between;text-align:left;text-decoration:none;cursor:pointer;font:inherit;font-size:.94rem;transition:.2s ease}.quick-actions button:hover,.quick-actions button:focus-visible,.quick-actions a:hover,.quick-actions a:focus-visible{background:#203439;border-color:var(--rose);transform:translateY(-1px)}.quick-actions i{font-style:normal;color:var(--rose);font-size:1.05rem}
.special-program{border:1px solid rgba(243,246,251,.62);background:rgba(43,64,69,.82);color:var(--snow)}.special-program[hidden]{display:none}.special-program-heading{min-height:32px;padding:7px 13px 5px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(236,197,192,.38);font-family:Copperplate,'Copperplate Light',serif;font-size:.62rem;letter-spacing:.13em;color:var(--rose)}.special-program-controls{display:flex;align-items:center;gap:8px;letter-spacing:.04em;color:rgba(255,255,255,.75)}.special-program-controls[hidden]{display:none}.special-program-controls button{width:26px;height:24px;padding:0;border:0;background:transparent;color:var(--snow);cursor:pointer}.special-program>a{min-height:62px;padding:11px 15px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:inherit;text-decoration:none;transition:background .2s ease}.special-program>a:hover,.special-program>a:focus-visible{background:var(--green)}.special-program>a>span{min-width:0}.special-program strong{display:block;font-size:.93rem;font-weight:400}.special-program small{display:block;margin-top:3px;color:rgba(255,255,255,.72);font-size:.72rem}.special-program em{flex:0 0 auto;font-family:Copperplate,'Copperplate Light',serif;font-size:.65rem;letter-spacing:.06em;font-style:normal;color:var(--rose);white-space:nowrap}.special-program em i{font-style:normal;margin-left:5px}
.open-class-entry{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px 14px;min-height:58px;padding:12px 17px;border:1px solid rgba(243,246,251,.75);background:rgba(43,64,69,.82);color:var(--snow);text-align:left;cursor:pointer}
.open-class-entry[hidden]{display:none}
.open-class-entry span:first-child{font-family:Copperplate,'Copperplate Light',serif;font-size:.7rem;letter-spacing:.08em;color:var(--rose)}
.open-class-entry strong{font-size:.93rem;font-weight:400}.open-class-entry span:last-child{font-size:.75rem;white-space:nowrap}
.open-class-entry strong small{display:block;margin-top:3px;font-size:.72rem;font-weight:300;color:rgba(255,255,255,.78)}
.open-class-entry:hover,.open-class-entry:focus-visible{background:var(--green);outline-color:var(--rose)}
.member-entry{grid-column:1/-1;margin-top:-28px;padding:17px 0;display:flex;align-items:center;justify-content:flex-end;gap:26px;border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);color:white;text-decoration:none}
.member-entry span{font-size:.78rem;color:rgba(255,255,255,.65)}
.member-entry strong{font-family:Copperplate,'Copperplate Light','Times New Roman',serif;font-size:.7rem;letter-spacing:.09em;font-weight:400}.member-entry i{font-style:normal;margin-left:7px;color:var(--rose)}
.intro-foot{grid-column:1/-1;padding-top:20px;display:flex;justify-content:space-between;font-family:Copperplate,'Copperplate Light','Times New Roman',serif;font-size:.58rem;letter-spacing:.18em;color:rgba(255,255,255,.55)}
@keyframes heroDrift{from{transform:scale(1.04) translate3d(-.6%,0,0)}to{transform:scale(1.09) translate3d(.8%,-.7%,0)}}
@keyframes soundPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.28)}50%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}

@media(max-width:760px){
  .intro .visual{background:linear-gradient(180deg,rgba(43,64,69,.02),rgba(43,64,69,.13) 31%,rgba(43,64,69,.54) 66%,rgba(43,64,69,.78)),url('/assets/pink-liquid-hero.png') 50% 44%/cover}
  .intro-shell{padding:18px 16px 18px;display:flex;flex-direction:column;min-height:100svh}
  .intro-brand{height:72px;padding:0 6px 12px}.intro-brand img{width:102px}.intro-brand span{padding-top:10px}
  .intro-copy{padding:27px 6px 20px;align-self:stretch}.intro-label{margin-bottom:11px}.intro-copy h1{font-size:clamp(2rem,10vw,2.7rem);line-height:1.2}.intro-lead{margin-top:13px;font-size:.92rem;line-height:1.7}
  .sound-toggle{width:36px;height:36px;font-size:.95rem}
  .entry-paths{padding:0;gap:10px}.entry-path{min-height:116px;padding:15px 17px;grid-template-columns:29px 1fr;gap:3px 8px}.path-copy b{font-size:1.15rem}.path-copy small{font-size:.78rem;line-height:1.5;margin-top:5px}.path-action{font-size:.67rem;margin-top:3px;padding-top:7px}
  .quick-actions{gap:8px}.quick-actions button,.quick-actions a{min-height:62px;padding:13px 14px;font-size:.85rem}
  .special-program-heading{padding-left:12px;padding-right:12px}.special-program>a{padding:11px 12px;gap:10px}.special-program strong{font-size:.86rem}.special-program em{font-size:.58rem}
  .open-class-entry{padding:13px 15px}.open-class-entry span:first-child{font-size:.68rem}.open-class-entry strong{font-size:.9rem}.open-class-entry span:last-child{font-size:.72rem}
  .member-entry{margin:16px 6px 0;padding:0 0 13px;justify-content:space-between;gap:12px}.member-entry span{font-size:.67rem}.member-entry strong{font-size:.61rem;white-space:nowrap}
  .intro-foot{margin-top:auto;padding:18px 6px 0;font-size:.51rem}
}
@media(max-width:380px){.intro-copy{padding-top:20px}.intro-copy h1{font-size:1.95rem}.intro-lead{font-size:.85rem}.entry-path{min-height:110px;padding:13px 14px}.path-copy b{font-size:1.06rem}.path-copy small{font-size:.73rem}.quick-actions button,.quick-actions a{padding:12px 11px;font-size:.8rem}.member-entry{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.intro .visual,.sound-toggle.is-playing{animation:none}.entry-path{transition:none}}

.special-program>a.has-poster{display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px 15px;align-items:center}
.special-program>a.has-poster .special-program-poster{display:block;grid-row:1 / 3;width:104px;max-width:100%;height:auto;object-fit:contain}
.special-program>a.has-poster>span{align-self:end}
.special-program>a.has-poster>em{grid-column:2;align-self:start;white-space:normal}
.special-program>a.has-poster small{line-height:1.6}
@media(max-width:380px){.special-program>a.has-poster{grid-template-columns:88px minmax(0,1fr);gap:8px 12px}.special-program>a.has-poster .special-program-poster{width:88px}}
