/* ── The application, drawn rather than photographed ───────────── */
.showcase-wrap{position:relative;width:100%;overflow:hidden;border-radius:var(--radius)}
.showcase-wrap .showcase{transform-origin:top left}

/* The application's own tokens, taken from Color.kt and Dimens.kt rather
   than eyeballed: nothing here is invented. */
.showcase{
  --bg:#070413; --surface:#0F0A1E; --elevated:#1A1230; --high:#241A40;
  --violet:#7C3AED; --violet-light:#A78BFA; --violet-pale:#EDE9FE;
  --cyan:#00E5FF; --live:#EF4444;
  --text:#FFFFFF; --text-2:#ADA6C9; --text-3:#6E6790;
  --hairline:rgba(167,139,250,.12); --hairline-strong:rgba(167,139,250,.34);
}
.showcase *{margin:0;padding:0;box-sizing:border-box}
.showcase{font-family:'Outfit',sans-serif;-webkit-font-smoothing:antialiased}

/* the pooled backdrop the app draws behind everything (Backdrop.kt) */
.showcase .screen{
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 62% 52% at 0% 0%, rgba(124,58,237,.10) 0%, transparent 62%),
    radial-gradient(ellipse 55% 45% at 100% 100%, rgba(0,229,255,.07) 0%, transparent 62%);
  overflow:hidden;position:relative;
}

/* ── the television ─────────────────────────────────────────── */
.showcase #tv{
  position:absolute;left:240px;top:10px;width:1060px;height:596px;
  border-radius:14px;border:1px solid rgba(255,255,255,.10);
  box-shadow:0 40px 90px rgba(0,0,0,.65), 0 0 0 8px #0b0b12, 0 0 0 9px #23202e;
  display:flex;
}
.showcase #tv .rail{width:212px;padding:22px 14px;display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.showcase .brand{display:flex;align-items:center;gap:9px;padding:4px 10px 22px}
.showcase .brand img{width:30px;height:30px;object-fit:contain}
.showcase .brand span{font-size:17px;font-weight:800;letter-spacing:-.3px;color:#fff}
.showcase .brand span em{font-style:normal;color:var(--violet-light)}

.showcase .item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;
  color:var(--text-2);font-size:14px;font-weight:500;position:relative}
.showcase .item svg{width:18px;height:18px;flex-shrink:0;opacity:.85}
.showcase .item.on{background:rgba(167,139,250,.14);color:#fff;font-weight:600}
.showcase .item.on::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:2px;background:linear-gradient(180deg,var(--violet-light),var(--violet))}
.showcase .item.on svg{opacity:1;color:var(--violet-light)}
.showcase .rail .spacer{flex:1}

.showcase #tv .body{flex:1;position:relative;padding:26px 30px 22px 6px;display:flex;flex-direction:column}

.showcase .hero{flex:1;border-radius:16px;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 90% at 78% 30%, rgba(124,58,237,.55) 0%, transparent 62%),
    radial-gradient(ellipse 60% 80% at 30% 80%, rgba(0,229,255,.16) 0%, transparent 60%),
    linear-gradient(120deg,#150d2c 0%, #0c0819 55%, #120b24 100%);
  border:1px solid var(--hairline);padding:34px 36px;display:flex;flex-direction:column;justify-content:flex-end}
.showcase .hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,4,19,0) 30%, rgba(7,4,19,.86) 100%)}
.showcase .hero > *{position:relative;z-index:2}
.showcase .eyebrow{font-size:10px;font-weight:700;letter-spacing:2.2px;color:var(--violet-light);margin-bottom:10px}
.showcase .hero h1{font-size:36px;font-weight:800;letter-spacing:-.8px;color:#fff;line-height:1.05;max-width:15ch}
.showcase .meta{margin-top:9px;color:var(--text-2);font-size:13px;display:flex;gap:9px;align-items:center}
.showcase .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text-3)}
.showcase .star{color:#F59E0B}
.showcase .actions{display:flex;gap:10px;margin-top:20px}
.showcase .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;
  font-size:13.5px;font-weight:600}
.showcase .btn.play{background:linear-gradient(120deg,var(--violet),var(--violet-light));color:#fff;
  box-shadow:0 8px 22px rgba(124,58,237,.42)}
.showcase .btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--hairline)}

.showcase .rowhead{margin:22px 0 11px;font-size:15px;font-weight:700;color:#fff}
.showcase .row{display:flex;gap:13px}
.showcase .poster{width:106px;height:152px;border-radius:12px;flex-shrink:0;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.07)}
.showcase .poster .lbl{position:absolute;left:0;right:0;bottom:0;padding:22px 9px 9px;
  background:linear-gradient(180deg,transparent,rgba(7,4,19,.94));
  font-size:10.5px;font-weight:600;color:#fff;line-height:1.25}
.showcase .poster.focused{border:2px solid var(--violet-light);transform:scale(1.06);
  box-shadow:0 14px 34px rgba(124,58,237,.5)}
.showcase .p1{background:linear-gradient(150deg,#3b1d6e,#7C3AED 55%,#1b1030)}
.showcase .p2{background:linear-gradient(150deg,#0d3b4a,#00E5FF 130%,#0a1a2c)}
.showcase .p3{background:linear-gradient(150deg,#4a1d3b,#A78BFA 120%,#1a0f26)}
.showcase .p4{background:linear-gradient(150deg,#1d2f4a,#5B21B6 120%,#0f1526)}
.showcase .p5{background:linear-gradient(150deg,#2c1d4a,#00E5FF 160%,#150e2a)}
.showcase .p6{background:linear-gradient(150deg,#4a2f1d,#7C3AED 140%,#241a2e)}

/* ── the telephone ──────────────────────────────────────────── */
.showcase #phone{position:absolute;left:10px;top:150px;width:250px;height:520px;z-index:3;
  border-radius:30px;padding:9px;background:#0b0b12;
  box-shadow:0 34px 74px rgba(0,0,0,.7), 0 0 0 1px #2a2636}
.showcase #phone .inner{width:100%;height:100%;border-radius:23px;overflow:hidden;display:flex;flex-direction:column}
.showcase #phone .top{padding:16px 15px 8px;display:flex;align-items:center;gap:8px}
.showcase #phone .top img{width:23px;height:23px}
.showcase #phone .top span{font-size:14px;font-weight:800;color:#fff}
.showcase #phone .top span em{font-style:normal;color:var(--violet-light)}
.showcase #phone .ph-hero{margin:6px 14px 0;height:132px;border-radius:14px;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 80% 90% at 70% 25%, rgba(124,58,237,.6) 0%, transparent 62%),
             linear-gradient(140deg,#170e2e,#0b0718)}
.showcase #phone .ph-hero .t{position:absolute;left:13px;right:13px;bottom:12px;font-size:14px;font-weight:700;color:#fff}
.showcase #phone .sec{padding:14px 14px 6px;font-size:12px;font-weight:700;color:#fff}
.showcase #phone .prow{display:flex;gap:8px;padding:0 14px}
.showcase #phone .prow .poster{width:62px;height:90px;border-radius:9px}
.showcase #phone .prow .poster .lbl{font-size:8px;padding:14px 5px 5px}
.showcase #phone .tabs{margin-top:auto;display:flex;justify-content:space-around;padding:11px 6px 15px;
  border-top:1px solid rgba(255,255,255,.06)}
.showcase #phone .tab{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:8.5px;color:var(--text-3)}
.showcase #phone .tab svg{width:17px;height:17px}
.showcase #phone .tab.on{color:var(--violet-light)}


/* On a narrow screen the telephone is put away and the television stands on
   its own: whoever is reading this on a telephone already holds that half of
   the product. It keeps the page's gutters rather than bleeding to the
   edges: the twelve per cent that would have bought was not worth a width
   that had to be measured at the right moment to come out right. */
.showcase-wrap.tv-only #phone{display:none}
.showcase-wrap.tv-only #tv{position:relative;left:0;top:0}