/* CG170 · the Studio to the Tiny bar: the prize piece (hvhh.ai in device frames, on a dark full-bleed ground), the podcast
   production showcase (two shows, the art wall, how a note ships), and buttons for light grounds. Loaded last on the Studio. */
:root{--st-night:#0a1230;--st-night2:#111c4a}

/* ---------- the prize piece */
html body main section.st-prize:not(#a):not(#b):not(#c){position:relative;overflow:hidden;padding:140px 0 120px;color:#fff;
  background:radial-gradient(70% 50% at 70% 0%,rgba(21,89,245,.45),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(21,89,245,.25),transparent 70%),linear-gradient(180deg,var(--st-night),var(--st-night2))}
html body main section.st-prize h2:not(#a):not(#b):not(#c){color:#fff;max-width:14ch}
html body main section.st-prize h2 em:not(#a):not(#b):not(#c){color:#9fc0ff!important}
.st-plead{margin:24px 0 0;max-width:720px;font-size:20px;line-height:1.55;color:rgba(255,255,255,.82)}
.st-stage{position:relative;margin:72px 0 0;height:min(46vw,600px)}
.st-stage figure{margin:0;position:absolute}
.st-bezel{padding:12px 12px 16px;border-radius:20px;background:#0d1018;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 100px rgba(0,0,0,.55)}
.st-bezel img{display:block;width:100%;height:auto;border-radius:8px}
.st-base{height:14px;margin:0 -7%;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#c9ced8,#8c93a1);box-shadow:0 24px 40px rgba(0,0,0,.45)}
.st-lap-a{left:0;top:0;width:72%;z-index:2}
.st-lap-b{right:0;top:9%;width:46%;z-index:1;opacity:.9}
.st-phone{right:6%;bottom:0;width:21%;z-index:3}
.st-pbezel{padding:9px;border-radius:44px;background:#0d1018;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 40px 90px rgba(0,0,0,.6)}
.st-pbezel img{display:block;width:100%;height:auto;border-radius:36px}
.st-pstats{margin:64px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:24px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.st-pstats>div{padding:28px 24px;border-left:1px solid rgba(255,255,255,.12)}
.st-pstats>div:first-child{border-left:0}
.st-pstats dt{font:800 40px/1 Rubik,system-ui,sans-serif;letter-spacing:-.03em;color:#fff}
.st-pstats dd{margin:12px 0 0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.78)}
.st-pfeat{margin:48px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
html body main .st-pfeat h3:not(#a):not(#b):not(#c){margin:0 0 8px;font-size:24px!important;color:#fff}
.st-pfeat p{margin:0;font-size:17px;line-height:1.55;color:rgba(255,255,255,.78)}
.st-pctas{margin-top:48px!important;justify-content:flex-start!important}
.st-pcap{margin:20px 0 0;font-size:13px;color:rgba(255,255,255,.6)}

/* ---------- the podcast showcase */
html body main section.st-shows:not(#a):not(#b):not(#c){background:var(--t9-mist,#f4f6fa)}
.st-showpair{margin:56px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.st-showpair figure{margin:0;display:flex;align-items:center;gap:28px;padding:24px;border-radius:28px;background:#fff;box-shadow:inset 0 0 0 1px var(--t9-line,#e3e7ef)}
.st-showpair img{flex:none;width:168px;height:168px;border-radius:20px;box-shadow:0 18px 40px rgba(10,22,51,.12)}
.st-showpair b{display:block;font:800 28px/1.1 Rubik,system-ui,sans-serif;letter-spacing:-.03em;color:var(--t9-ink,#0a1633)}
.st-showpair figcaption span{display:block;margin-top:8px;font-size:17px;color:var(--t9-char,#454d5c)}
.st-wall{margin:24px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.st-wall li{min-width:0}
.st-wall a{display:block;border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(10,22,51,.1);transition:transform .25s,box-shadow .25s}
.st-wall a:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 24px 48px rgba(10,22,51,.16)}
.st-wall a:focus-visible{outline:2px solid var(--t9-blue,#1559F5);outline-offset:3px}
.st-wall img{display:block;width:100%;height:auto;aspect-ratio:1}
.st-ship{margin:56px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:s}
.st-ship li{position:relative;padding:28px 24px 28px;border-radius:24px;background:#fff;box-shadow:inset 0 0 0 1px var(--t9-line,#e3e7ef);counter-increment:s}
.st-ship li::before{content:counter(s,decimal-leading-zero);display:block;margin-bottom:16px;font:800 24px/1 Rubik,system-ui,sans-serif;color:var(--t9-blue,#1559F5)}
.st-ship b{display:block;font:700 20px/1.2 Rubik,system-ui,sans-serif;color:var(--t9-ink,#0a1633)}
.st-ship span{display:block;margin-top:8px;font-size:15px;line-height:1.5;color:var(--t9-char,#454d5c)}
.st-shctas{margin-top:40px!important;justify-content:flex-start!important}
.t9-btn.b{background:var(--t9-blue,#1559F5);color:#fff}
.t9-btn.o{background:#fff;color:var(--t9-ink,#0a1633);box-shadow:inset 0 0 0 1px #c9d1e0}
.t9-btn.b:focus-visible,.t9-btn.o:focus-visible{outline:2px solid var(--t9-blue,#1559F5);outline-offset:3px}

/* ---------- tablets */
@media (width<=1100px){
  .st-stage{height:auto;display:grid;grid-template-columns:1fr;gap:24px}
  .st-stage figure{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;opacity:1}
  .st-lap-b{display:none}
  .st-phone{width:40%;margin:-28% 0 0 auto}
  .st-pstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-pstats>div:nth-child(3){border-left:0}
  .st-pstats>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
  .st-pfeat{grid-template-columns:1fr;gap:24px}
  .st-wall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .st-ship{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- phones: the app */
@media (width<=760px),(max-height:500px) and (pointer:coarse){
  html body main section.st-prize:not(#a):not(#b):not(#c){padding:56px 0;border-radius:28px;margin:16px 12px}
  html body main section.st-prize .px-wrap:not(#a):not(#b):not(#c){padding:0 20px}
  .st-plead{font-size:17px}
  .st-stage{margin-top:32px}
  .st-bezel{padding:6px 6px 8px;border-radius:12px}
  .st-base{height:8px}
  .st-phone{width:48%;margin-top:-24%}
  .st-pbezel{padding:6px;border-radius:32px}.st-pbezel img{border-radius:26px}
  .st-pstats{margin-top:32px}
  .st-pstats>div{padding:20px 16px}
  .st-pstats dt{font-size:32px}
  .st-pctas .t9-btn{flex:1 1 140px;justify-content:center}
  .st-showpair{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .st-showpair figure{gap:16px;padding:16px;border-radius:20px}
  .st-showpair img{width:96px;height:96px;border-radius:16px}
  .st-showpair b{font-size:20px}
  .st-showpair figcaption span{font-size:15px}
  .st-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .st-wall a{border-radius:12px}
  .st-wall li:nth-child(n+10){display:none}
  .st-ship{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .st-ship li{padding:20px}
  .st-shctas .t9-btn{flex:1 1 140px;justify-content:center}
}