.frame:has(.aud-screen){aspect-ratio:auto;background:#fbfaf6}
.frame:has(.aud-screen)::before{display:none}
.frame:has(.aud-screen) #content{height:auto;display:block}
.frame:fullscreen:has(.aud-screen),#expanded-view .frame:has(.aud-screen){overflow-y:auto}
.aud-screen{padding:clamp(15px,2.4cqw,38px);color:#1d3125;font:15px/1.48 PanoManrope,"Segoe UI",sans-serif}
.aud-screen [hidden]{display:none}
.aud-switch{display:flex;flex-wrap:wrap;gap:5px;max-width:calc(100% - 50px);margin-bottom:18px}
.aud-switch button{border:1px solid #d3d7cb;background:#f4f3eb;color:#243e2e;border-radius:9px;min-height:44px;padding:8px 15px;font-family:inherit;font-size:14px;line-height:1.3;font-weight:650;cursor:pointer}
.aud-switch button[aria-pressed=true]{background:#233e2e;color:white;border-color:#233e2e}
.aud-screen .aud-label{display:inline-block;font-weight:700;color:#435932;background:#eaece0;padding:4px 12px;border-radius:20px;font-size:13px;margin:0 0 12px}
.aud-screen h1{padding:0;margin:0 0 14px;font:750 clamp(26px,3.55cqw,56px)/1.06 PanoManrope,"Segoe UI",sans-serif;letter-spacing:-.045em}
.aud-screen h2{font-size:clamp(20px,2.25cqw,34px);line-height:1.2;letter-spacing:-.03em;margin:20px 0 14px}
.aud-result{margin:17px 0 0;background:#eaece1;padding:15px 18px;border-radius:13px}
#aud-segments, #aud-plan { position: relative }
#aud-segments {
  --intro-image: url('./assets/segments/tent.png');
  --label-icon: url('./assets/segments/people.png');
  --result-icon: url('./assets/segments/target.png');
}
#aud-plan {
  --intro-image: url('./assets/content-plan/tent.png');
  --label-icon: url('./assets/content-plan/calendar.png');
  --result-icon: url('./assets/content-plan/target.png');
}
.frame .aud-sheet, .frame .aud-cards img { display:block; width:100%; height:auto }
.aud-cards { list-style:none; padding:0; margin:16px 0; display:grid; gap:12px }
.aud-cards li, .aud-screen .aud-cards h2 { margin:0; line-height:1 }
.segment-card { position:relative }
.aud-visually-hidden {
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}
@container (width > 900px) {
  .aud-reading { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
}
@container (max-width:900px) {
  .frame .aud-sheet { display:none }
  .aud-intro::before {
    content:""; display:block; aspect-ratio:3/1; margin-bottom:16px; border-radius:12px;
    background:var(--intro-image) center 57%/cover;
  }
  .aud-intro p { margin:8px 0 0 }
  .aud-intro .aud-label { display:inline-flex; align-items:center; gap:7px; background-color:#ebe9db }
  .aud-intro .aud-label::before {
    content:""; width:18px; height:18px; background:var(--label-icon) center/contain no-repeat;
  }
  .aud-cards { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start }
  .aud-reading .aud-result {
    background:#edece3 var(--result-icon) 12px center/32px auto no-repeat; padding-left:56px;
  }
}
@container (max-width:600px) {
  .aud-cards { grid-template-columns:1fr }
}
@container (max-width:540px) {
  .aud-switch button { padding:6px 9px }
}