/* Stream Hearts 1.0.1 editor identity, adapted to the public showcase. */
:root {
  --paper:#f4f7fc; --surface:#fbfcff; --panel:#fbfcff;
  --surface-alt:#ecf1f8; --panel-soft:#ecf1f8; --input:#f7f9ff;
  --ink:#293c58; --muted:#536983; --line:#c5d1e3;
  --accent:#b01c6c; --pink:#b01c6c; --hot:#ed168d;
  --accent-soft:#fae5f2; --soft:#fae5f2; --rose:#ecf1f8;
  --mint:#05748c; --cyan:#05748c; --cyan-edge:#08bcd9;
  --focus:#05748c; --grid:#678bad0a;
  --primary:linear-gradient(135deg,#cb1c78,#a92475);
  --primary-hover:linear-gradient(135deg,#d81b80,#b0207c);
  --primary-edge:#e768ad;
  --primary-shadow:inset 0 1px #ffffff30,0 3px 12px #d71d8a28;
  --panel-fill:linear-gradient(180deg,#fcfdff,#f8fafd);
  --heading-fill:linear-gradient(180deg,#f5f7fb,#eef2f8);
  --chrome-fill:linear-gradient(110deg,#eef3fa,#f2eff5 65%,#f5eaf1);
  --panel-shadow:inset 0 1px #ffffffd9,0 7px 20px #17314110,0 1px 3px #1731410c;
  --shadow:#17314112; --halo:#f9e5f2;
  --frame:#eef2f8; --frame-ink:#293c58; --frame-paper:#fbfcff;
  --frame-border:#c5d1e3; --frame-caption:#536983;
  --letter-fill:#b01c6c; --letter-outline:#fbfcff;
  --letter-edge:#703b85; --letter-depth:#c5d1e3;
  --name-fill:linear-gradient(135deg,#b51b65 5%,#703b85 48%,#096f91 95%);
  --radius:10px; color-scheme:light;
}
:root[data-theme=dark] {
  --paper:#101a2b; --surface:#1c2b43; --panel:#1c2b43;
  --surface-alt:#223249; --panel-soft:#223249; --input:#14233a;
  --ink:#ecf1fb; --muted:#b3c3db; --line:#42607a;
  --accent:#ff82ca; --pink:#ff82ca; --hot:#ff45b5;
  --accent-soft:#3e2c49; --soft:#3e2c49; --rose:#223249;
  --mint:#67e6ff; --cyan:#67e6ff; --cyan-edge:#55e6ff;
  --focus:#67e6ff; --grid:#62bbd00a;
  --primary-edge:#ff69c0;
  --primary-shadow:inset 0 1px #ffffff30,0 3px 16px #ff2da728;
  --panel-fill:linear-gradient(180deg,#223148,#1c2b43 90%);
  --heading-fill:linear-gradient(180deg,#27364c,#233147);
  --chrome-fill:linear-gradient(110deg,#243249,#2c3046 65%,#393046);
  --panel-shadow:inset 0 1px #ffffff08,0 7px 20px #050b112a,0 1px 2px #050b1122;
  --shadow:#050b1130; --halo:#472a4b;
  --frame:#233147; --frame-ink:#ecf1fb; --frame-paper:#1c2b43;
  --frame-border:#42607a; --frame-caption:#b3c3db;
  --letter-fill:#ffc0e8; --letter-outline:#101a2b;
  --letter-edge:#8f4779; --letter-depth:#223249;
  --name-fill:linear-gradient(135deg,#f8f4ff 5%,#ffc0e8 48%,#89eeff 95%);
  color-scheme:dark;
}
body,body.showcase {
  background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/64px 64px,var(--paper);
  color:var(--ink);
}
body.showcase,:root[data-theme=dark] body.showcase { --mint:var(--cyan); }
.header {
  background:var(--chrome-fill); border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px var(--shadow);
}
.header::after {
  content:""; position:absolute; bottom:-1px; left:0; width:min(540px,55%); height:2px;
  background:linear-gradient(90deg,var(--cyan-edge),var(--hot),transparent);
  pointer-events:none;
}
.brand { gap:10px; }
.brand img { border-radius:0; object-fit:contain; filter:drop-shadow(0 2px 5px #ed168d22); }
.brand :is(span,b) {
  background:var(--name-fill); background-clip:text; -webkit-background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.nav-links a { padding:8px 0; }
.nav-links a:hover { color:var(--cyan); }
.nav-status { color:var(--muted); }
.nav-status i { background:var(--hot); border-radius:1px; transform:rotate(45deg); }
:is(.theme-toggle,.language-setting) {
  border:1px solid var(--line); border-radius:6px;
  background:var(--panel-fill); color:var(--ink); box-shadow:inset 0 1px #ffffff12;
}
.language-setting select { color:var(--ink); background:transparent; }
.language-setting option { background:var(--panel); color:var(--ink); }
.language-icon { color:var(--cyan); }
.theme-toggle:hover { border-color:var(--cyan); background:var(--panel-soft); }
:is(a,button,input,select,summary):focus-visible { outline-color:var(--focus); }
.showcase .hero {
  background:radial-gradient(ellipse at 88% 12%,var(--halo),transparent 66%),
    radial-gradient(ellipse at 12% 85%,color-mix(in srgb,var(--cyan-edge) 8%,transparent),transparent 65%);
}
.showcase .hero::before { background-size:64px 64px; opacity:.22; }
.showcase :is(.eyebrow,.player-overline,.feature-category) { color:var(--cyan); }
.showcase .hero h1 { font-weight:800; letter-spacing:-.045em; }
.showcase .hero h1 .type-ribbon {
  -webkit-text-stroke:.7px var(--letter-outline);
  text-shadow:1px 1px var(--letter-edge),1px 2px var(--letter-depth);
}
.showcase .type-ribbon::before { height:2px; clip-path:none; background:var(--cyan-edge); opacity:.6; }
.showcase .letter-glyph { -webkit-text-stroke:.4px var(--letter-outline); text-shadow:1px 1px var(--letter-edge); }
.showcase .button,.button {
  color:#fff; background:var(--primary); border:1px solid var(--primary-edge);
  border-radius:6px; box-shadow:var(--primary-shadow); font-weight:700;
  transition:background .12s,border-color .12s,box-shadow .12s; transform:none;
}
.showcase .button:hover,.button:hover { background:var(--primary-hover); border-color:var(--hot); transform:none; }
.button.light { background:var(--panel-fill); color:var(--ink); border-color:var(--line); box-shadow:var(--panel-shadow); }
.showcase :is(.hero-player,.play-feature,.tool-showcase) {
  background:var(--panel-fill); border:1px solid var(--line); border-top:2px solid var(--cyan-edge);
  border-radius:10px; box-shadow:var(--panel-shadow);
}
.showcase .hero-player { box-shadow:var(--panel-shadow),0 16px 40px var(--shadow); }
.showcase .video-frame { background:#101a2b; }
.showcase .video-frame video { background:#101a2b; }
.showcase .player-bar { background:var(--heading-fill); color:var(--ink); border-top:1px solid var(--line); }
.showcase :is(.clip-length,.clip-sound-note) { color:var(--muted); }
.showcase :is(.clip-toggle,.expand-video,.sound-toggle) {
  color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:6px;
  font-size:12px; min-height:36px;
}
.showcase :is(.clip-toggle,.expand-video,.sound-toggle):hover { border-color:var(--cyan); background:var(--panel-soft); }
.showcase .sound-toggle[aria-pressed=true] { color:var(--accent); background:var(--accent-soft); border-color:var(--line); }
.showcase .ribbon-label { color:var(--cyan); background:var(--heading-fill); border-color:var(--line); border-radius:5px; }
.showcase .media-name { color:var(--ink); }
.showcase :is(.together-strip,.fan-character-intro) { background:var(--panel-fill); border-color:var(--line); }
.showcase .fan-character-intro { border-radius:10px; box-shadow:var(--panel-shadow); }
.showcase :is(.category-tabs button,.game-tabs .game-card,.tool-switch,.hero-switch) {
  background:var(--panel-fill); color:var(--ink); border:1px solid var(--line); border-radius:6px;
  box-shadow:inset 0 1px #ffffff12; transition:background-color .12s,border-color .12s;
}
.showcase :is(.category-tabs button,.game-tabs .game-card,.tool-switch,.hero-switch):hover { background:var(--panel-soft); border-color:var(--cyan); }
.showcase .category-tabs button[aria-selected=true] {
  background:var(--primary); color:#fff; border-color:var(--primary-edge); box-shadow:var(--primary-shadow);
}
.showcase :is(.game-tabs .game-card,.tool-switch,.hero-switch)[aria-pressed=true] {
  background:linear-gradient(100deg,var(--accent-soft),var(--panel-soft)); color:var(--accent);
  border-color:var(--line); box-shadow:inset 3px 0 var(--hot),0 0 12px #ed168d12;
}
.showcase .hero-switch[aria-pressed=true]::before { background:var(--cyan-edge); }
.showcase :is(.feature-copy,.tool-copy) { background:var(--panel-fill); }
.showcase .participation {
  background:linear-gradient(120deg,var(--accent-soft),var(--panel-soft));
  border:1px solid var(--line); border-left:3px solid var(--hot); border-radius:6px;
}
.showcase .participation>span { color:var(--accent); font-size:14px; }
.showcase :is(.feature-category,.copy-label,.game-guide-more>summary) { font-size:14px; }
.showcase .game-guide-inputs { background:var(--panel-soft); border-color:var(--line); border-radius:6px; }
.showcase .game-guide-inputs code { background:var(--accent-soft); color:var(--accent); border-color:var(--line); }
.showcase .tools-section { background:var(--panel-soft); border-block:1px solid var(--line); }
.showcase .connection {
  color:var(--ink); background:radial-gradient(ellipse at 15% 30%,color-mix(in srgb,var(--cyan-edge) 7%,transparent),transparent 70%),var(--paper);
  border-block:1px solid var(--line);
}
.showcase :is(.platform-card,.connect-card,.steps li,.support-card) { background:var(--panel-fill); border-color:var(--line); border-radius:10px; box-shadow:var(--panel-shadow); }
.showcase .connection h2,.showcase .connection .section-intro { color:var(--ink); }
.showcase :is(.connection p,.connection-foot) { color:var(--muted); }
.showcase .faq details { border-color:var(--line); }
.showcase .faq summary { color:var(--ink); }
.showcase .launch {
  background:radial-gradient(ellipse at 85% 38%,var(--halo),transparent 68%),
    radial-gradient(ellipse at 45% 100%,color-mix(in srgb,var(--cyan-edge) 10%,transparent),transparent 65%),var(--panel-soft);
  border-block:1px solid var(--line); color:var(--ink);
}
.showcase .launch::before { background:none; }
.showcase .launch h2 { color:var(--ink); }
.showcase .launch :is(p:not(.eyebrow),.store-marks,.store-marks span) { color:var(--muted); }
.showcase .launch .type-ribbon { color:var(--letter-fill); }
.showcase .launch .button { background:var(--primary); color:#fff; border-color:var(--primary-edge); }
.showcase .launch-portrait>img:first-child { mix-blend-mode:normal; }
.footer { background:var(--chrome-fill); border-color:var(--line); }
:is(.music-controls,.music-panel) { background:var(--panel-fill); border:1px solid var(--line); border-radius:8px; box-shadow:var(--panel-shadow); }
.music-controls button { color:var(--muted); }
.music-on #music-toggle { color:var(--accent); background:var(--accent-soft); }
.music-panel :is(p,small) { color:var(--muted); }
.document-hero {
  background:radial-gradient(ellipse at top right,var(--halo),transparent 70%),var(--heading-fill);
  border-color:var(--line);
}
.document-hero h1,.document h2 { color:var(--ink); }
:is(.support-card,.table-scroll,.draft-banner) { border-radius:8px; }
.support-card { background:var(--panel-fill); border:1px solid var(--line); box-shadow:var(--panel-shadow); }
.document a { color:var(--accent); }
.document code { background:var(--panel-soft); color:var(--ink); }
.table-scroll { border-color:var(--line); }
th { background:var(--heading-fill); color:var(--ink); }
td { color:var(--muted); }
th,td { border-color:var(--line); }
.wind-fragment:nth-child(3n) { --pink:var(--cyan-edge); }
.site-atmosphere { z-index:0; }
@media(max-width:760px) {
  .nav-tools { flex-wrap:wrap; justify-content:flex-end; }
  .showcase .hero .lead,.showcase .section-intro { font-size:16px; }
  .showcase :is(.theme-toggle,.category-tabs button,.game-tabs .game-card,.tool-switch,.hero-switch,.nav-links a) { font-size:14px; }
  .showcase .language-setting select { font-size:14px; }
  .showcase :is(.clip-toggle,.expand-video,.sound-toggle) { padding:7px 9px; }
  .showcase :is(.feature-copy,.tool-copy) { padding:22px; }
  .showcase .hero h1 .type-ribbon { -webkit-text-stroke:.5px var(--letter-outline); }
}
@media(prefers-reduced-motion:reduce) {
  :is(.button,.theme-toggle,.hero-switch,.game-tabs .game-card,.tool-switch,.category-tabs button) { transition:none; }
}

/* Keep the connection steps comfortably inside their card boundaries. */
.showcase .steps { display:grid; gap:16px; }
.showcase .steps li,
.showcase .steps li:first-child {
  display:grid; grid-template-columns:44px minmax(0,1fr); align-items:start;
  gap:18px; padding:26px 28px; margin:0; border:1px solid var(--line);
}
.showcase .steps li>span {
  display:grid; place-items:center; width:44px; height:44px; margin:0;
  border:1px solid var(--line); border-radius:10px;
  background:var(--panel-soft); color:var(--accent);
  font:700 16px/1 "Segoe UI",sans-serif; font-variant-numeric:tabular-nums;
}
.showcase .steps li>div { min-width:0; }
.showcase .steps h3 { margin:0 0 10px; line-height:1.5; }
.showcase .steps p { margin:0; line-height:1.8; overflow-wrap:anywhere; }
@media(max-width:600px) {
  .showcase .steps { gap:14px; }
  .showcase .steps li,
  .showcase .steps li:first-child {
    grid-template-columns:36px minmax(0,1fr); gap:12px; padding:20px 16px;
  }
  .showcase .steps li>span { width:36px; height:36px; font-size:14px; border-radius:8px; }
  .showcase .steps h3 { margin-bottom:8px; }
}