:root{
  --bg:#06100f;
  --text:#f8f2e8;
  --muted:rgba(248,242,232,.86);
  --accent:#d98a1c;
  --teal:#0e5f63;
  --paper:#f3dfb6;
  --ink:#07100f;
  --bubble:rgba(7,16,15,.58);
  --bubbleBorder:rgba(243,223,182,.38);
  --bubbleText:#ffffff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;width:100%;height:100%;background:#020605;color:var(--text);font-family:Inter,Arial,sans-serif;overflow:hidden}
body{display:grid;place-items:center;background:radial-gradient(circle at 50% 0%, rgba(14,95,99,.3), transparent 42%),linear-gradient(115deg,rgba(217,138,28,.14),transparent 34%,rgba(14,95,99,.16) 72%,transparent),#020605}
.episode-layout{width:100%;height:100%;display:grid;grid-template-columns:minmax(320px,480px) minmax(280px,420px);justify-content:center;align-items:center;gap:clamp(22px,4vw,58px);padding:clamp(18px,3vw,36px)}
.device-frame{position:relative;width:min(440px,42vw);height:min(92vh,780px);padding:28px 12px 18px;border-radius:38px;background:linear-gradient(145deg,#151515,#030706);box-shadow:0 0 0 1px rgba(243,223,182,.14),0 0 0 7px rgba(217,138,28,.08),0 28px 90px rgba(0,0,0,.58),0 0 70px rgba(14,95,99,.18)}
.device-frame:before{content:"";position:absolute;inset:8px;border-radius:32px;border:1px solid rgba(243,223,182,.08);pointer-events:none}
.phone-speaker{position:absolute;top:13px;left:50%;width:78px;height:5px;transform:translateX(-50%);border-radius:999px;background:rgba(243,223,182,.28)}
.shell{position:relative;width:100%;height:100%;max-width:100vw;max-height:100vh;border-radius:26px;background:#000;overflow:hidden;box-shadow:0 0 0 1px rgba(217,138,28,.28),0 24px 90px rgba(0,0,0,.45)}
.desktop-companion{align-self:center;border:1px solid rgba(217,138,28,.36);border-radius:8px;padding:24px;background:linear-gradient(155deg,rgba(6,16,15,.9),rgba(2,6,5,.72));box-shadow:0 20px 70px rgba(0,0,0,.28);backdrop-filter:blur(16px);position:relative;overflow:hidden}
.desktop-companion:before{content:"";position:absolute;inset:-30%;background:linear-gradient(118deg,transparent 18%,rgba(243,223,182,.12) 44%,transparent 64%),radial-gradient(circle at 18% 18%,rgba(14,95,99,.28),transparent 32%);pointer-events:none}
.desktop-companion>*{position:relative;z-index:1}
.companion-kicker{display:block;margin-bottom:12px;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.desktop-companion h1{margin:0 0 12px;font-size:clamp(30px,4vw,52px);line-height:.92;letter-spacing:0;color:var(--paper)}
.desktop-companion p{margin:0 0 18px;color:var(--muted);font-size:15px;line-height:1.5}
.qr-code{width:176px;height:176px;display:block;margin:18px 0;border:1px solid rgba(243,223,182,.26);border-radius:6px;background:#fff;padding:8px}
.share-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}.share-actions a{border:1px solid rgba(217,138,28,.5);border-radius:6px;padding:11px 13px;background:rgba(217,138,28,.16);color:#fff;text-decoration:none;font-size:13px;font-weight:800}.share-actions a:first-child{background:var(--accent);color:#07100f;border-color:var(--accent)}
.share-note{margin-top:16px!important;font-family:"Space Mono",monospace;font-size:11px!important;letter-spacing:.08em;text-transform:uppercase;color:rgba(243,223,182,.72)!important}
@media (max-width:1024px){.episode-layout{grid-template-columns:minmax(300px,420px) minmax(240px,340px);gap:24px}.device-frame{width:min(400px,46vw)}.desktop-companion{padding:18px}.desktop-companion h1{font-size:34px}.qr-code{width:148px;height:148px}}
@media (max-width:768px){body{display:block}.episode-layout{display:block;width:100vw;height:100vh;padding:0}.device-frame{width:100vw;height:100vh;padding:0;border-radius:0;background:transparent;box-shadow:none}.device-frame:before,.phone-speaker,.desktop-companion{display:none}.shell{width:100vw;height:100vh;border-radius:0;box-shadow:none}}
.media-stage,.scene-image,.scene-video,.scene-dim,.scene-vignette,.fade-flash{position:absolute;inset:0}
.scene-image{z-index:1;background-position:center;background-size:cover;opacity:0;transform:scale(1.01);transition:opacity .7s ease, transform 8.5s ease-out, filter .45s ease}
.scene-image.show{opacity:1;transform:scale(1.04)}
.scene-video{z-index:2;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease, filter .45s ease;background:transparent}
.scene-video.show{opacity:1}
.media-stage[data-effect="tealMist"] .scene-image,.media-stage[data-effect="tealMist"] .scene-video{filter:contrast(1.06) saturate(1.08) hue-rotate(8deg)}
.media-stage[data-effect="goldenBeam"] .scene-image,.media-stage[data-effect="goldenBeam"] .scene-video{filter:contrast(1.08) saturate(1.12) sepia(.12)}
.media-stage[data-effect="archiveScan"] .scene-image,.media-stage[data-effect="archiveScan"] .scene-video{filter:contrast(1.2) saturate(.9)}
.media-stage[data-effect="dreamBlur"] .scene-image,.media-stage[data-effect="dreamBlur"] .scene-video{filter:contrast(1.04) saturate(1.05) blur(.35px)}
.media-stage[data-effect="noir"] .scene-image,.media-stage[data-effect="noir"] .scene-video{filter:grayscale(.72) contrast(1.18) sepia(.16)}
.media-stage[data-effect="pulseZoom"] .scene-image.show,.media-stage[data-effect="pulseZoom"] .scene-video.show{animation:pulseZoom 5.5s ease-in-out infinite alternate}
.media-stage:before{content:"";position:absolute;inset:-18%;z-index:3;opacity:0;pointer-events:none;mix-blend-mode:screen;transition:opacity .45s ease;background:linear-gradient(115deg,transparent 8%,rgba(243,223,182,.18) 28%,transparent 48%),radial-gradient(circle at 18% 18%,rgba(14,95,99,.28),transparent 32%)}
.media-stage[data-effect="goldenBeam"]:before,.media-stage[data-effect="tealMist"]:before{opacity:.75}
.media-stage[data-effect="archiveScan"]:before{opacity:.35;background:repeating-linear-gradient(to bottom,rgba(243,223,182,.12) 0 1px,transparent 1px 6px)}
@keyframes pulseZoom{from{transform:scale(1.01)}to{transform:scale(1.065)}}
.scene-dim{z-index:3;pointer-events:none;background:linear-gradient(to top, rgba(4,10,9,.24), rgba(4,10,9,.04) 38%, rgba(4,10,9,.16))}
.scene-vignette{z-index:4;pointer-events:none;background:radial-gradient(circle at center, rgba(0,0,0,0) 50%, rgba(1,5,5,.28) 100%),linear-gradient(90deg,rgba(14,95,99,.18),transparent 34%,rgba(217,138,28,.08))}
.top-ui{position:absolute;z-index:30;left:14px;right:14px;top:calc(12px + env(safe-area-inset-top,0px));display:flex;gap:10px;align-items:center}
.badge{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:rgba(4,10,9,.58);backdrop-filter:blur(8px);padding:8px 10px;border-radius:4px;border:1px solid rgba(217,138,28,.42)}
.progress{flex:1;height:3px;background:rgba(255,255,255,.14);border-radius:999px;overflow:hidden}
.progress>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--accent),#fff0cb);transition:width .35s ease}
.icon-btn{border:none;border-radius:4px;padding:9px 10px;background:rgba(4,10,9,.58);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(217,138,28,.32);font-family:"Space Mono",monospace;font-size:11px;cursor:pointer}
.dossier-card{position:absolute;z-index:28;left:14px;top:calc(54px + env(safe-area-inset-top,0px));padding:9px 10px;width:150px;background:rgba(4,10,9,.44);border-left:2px solid var(--accent);color:var(--paper);font-family:"Space Mono",monospace;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(10px)}
.dossier-card span{display:block;font-size:9px;color:rgba(243,223,182,.68);margin-bottom:3px}.dossier-card strong{font-size:12px;color:var(--accent)}
.bubble-wrap{position:absolute;z-index:35;inset:0;pointer-events:none}
.bubble{max-width:72%;background:var(--bubble);color:var(--bubbleText);border-radius:8px;padding:13px 15px 14px;box-shadow:0 18px 50px rgba(0,0,0,.30);opacity:0;transform:translateY(14px) scale(.985);transition:opacity .38s ease, transform .38s ease;pointer-events:auto;position:absolute;border:1px solid var(--bubbleBorder);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}
.bubble.show{opacity:1;transform:translateY(0) scale(1)}
.bubble:after{content:"";position:absolute;bottom:-10px;width:20px;height:12px;background:currentColor;color:rgba(7,16,15,.78);clip-path:polygon(0 0,100% 0,50% 100%);border:0}
.bubble[data-tail="left"]:after{left:22px}.bubble[data-tail="right"]:after{right:22px}.bubble[data-tail="none"]:after{display:none}
.bubble[data-tone="glass"]:after{color:rgba(7,16,15,.78)}
.bubble[data-tone="gold"]{background:rgba(217,138,28,.82);border-color:rgba(255,232,190,.46);color:#fff}
.bubble[data-tone="gold"]:after{color:rgba(217,138,28,.82)}
.bubble[data-tone="teal"]{background:rgba(10,72,76,.82);border-color:rgba(143,220,220,.42)}
.bubble[data-tone="teal"]:after{color:rgba(10,72,76,.82)}
.bubble[data-tone="dark"]{background:rgba(4,10,9,.82);border-color:rgba(217,138,28,.42)}
.bubble[data-tone="dark"]:after{color:rgba(4,10,9,.82)}
.kicker{display:block;margin-bottom:6px;font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.76);font-weight:700}
.bubble p{margin:0;font-size:13px;line-height:1.36;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.15)}
.choices{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.choice{border:none;border-radius:4px;padding:9px 12px;background:rgba(243,223,182,.96);color:var(--ink);font-size:12px;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.18);cursor:pointer}
.tap-hint{position:absolute;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:36;font-family:"Space Mono",monospace;font-size:10px;color:rgba(255,255,255,.86);background:rgba(4,10,9,.5);padding:8px 10px;border-radius:4px;border:1px solid rgba(217,138,28,.28)}
.start-overlay,.end-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top, rgba(0,0,0,.20), rgba(0,0,0,.02));z-index:40}
.start-overlay.hidden,.end-overlay.hidden{display:none}
.start-panel,.end-panel{width:min(92vw,420px);border-radius:8px;padding:18px 18px 16px;background:rgba(4,10,9,.62);border:1px solid rgba(217,138,28,.42);backdrop-filter:blur(10px);color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.24)}
.start-episode{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#f3deb1;margin-bottom:8px}
.start-title{font-size:26px;line-height:.98;margin:0 0 10px}.start-copy{font-size:13px;line-height:1.45;color:rgba(255,255,255,.92);margin:0 0 14px}.start-cta{display:inline-block;background:#fff;color:#111;padding:11px 14px;border-radius:999px;font-size:12px;font-weight:800}
.fade-flash{z-index:25;background:#000;opacity:0;pointer-events:none;transition:opacity .34s ease}.fade-flash.show{opacity:.12}
.end-overlay{display:none;background:linear-gradient(to top, rgba(0,0,0,.34), rgba(0,0,0,.04))}.end-overlay.show{display:flex}
.end-panel h2{margin:0 0 8px;font-size:24px}.end-panel p{margin:0 0 12px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.92)}
.end-actions{display:flex;gap:10px;flex-wrap:wrap}.end-actions a,.end-actions button{border:none;border-radius:999px;padding:11px 14px;background:#fff;color:#111;font-size:12px;font-weight:800;text-decoration:none}
.audio-debug{position:absolute;left:14px;bottom:6px;z-index:50;font-size:10px;color:rgba(255,255,255,.7);display:none}