/* Chat Detective — editorial home 2026. Route-scoped visual redesign. */
body[data-view="home"]{
  --cde-accent:#ee3657;--cde-text:#f5f6fa;--cde-muted:#b6b9c7;
  background:#050713;color:var(--cde-text);
}
body[data-view="home"].cdh-dark .scene{
  background:
    radial-gradient(ellipse 34% 46% at 12% 50%,rgba(86,8,37,.14),transparent 100%),
    radial-gradient(ellipse 43% 50% at 80% 54%,rgba(82,12,44,.13),transparent 95%),
    linear-gradient(116deg,#080b16 0%,#050711 48%,#070813 100%);
  opacity:1;filter:none;
  animation:cde-scene-breathe 24s ease-in-out infinite alternate;
}
body[data-view="home"].cdh-dark .scene::before{
  background:radial-gradient(ellipse 75% 90% at 52% 54%,transparent 45%,rgba(1,3,9,.36));
}
body[data-view="home"] .grain{opacity:.028;mix-blend-mode:screen}
body[data-view="home"] .page-shell{padding:20px 24px 16px}
body[data-view="home"] #app{max-width:none;width:100%;display:block;flex:1}
body[data-view="home"] .site-header{
  width:min(100%,1280px);max-width:1280px;height:64px;
  padding:0 0 0 0;margin:0 auto;border:0;border-bottom:1px solid rgba(154,169,197,.12);
  border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;
}
body[data-view="home"] .brand{gap:12px;color:#fff}
body[data-view="home"] .brand svg{width:39px;height:39px;color:#ed3a5b}
body[data-view="home"] .brand span{
  max-width:none;color:#f8f8fa;letter-spacing:.035em;font-size:21px;
  font-family:Inter,'Segoe UI',system-ui,sans-serif;font-weight:800;
}
body[data-view="home"] .desktop-nav{margin-left:clamp(15px,4vw,70px);gap:37px;height:100%}
body[data-view="home"] .nav-link{height:100%;font-size:14px;font-weight:500;color:#b3b6c3}
body[data-view="home"] .nav-link:hover,
body[data-view="home"] .nav-link.active{color:#fff}
body[data-view="home"] .nav-link.active::after{background:#f0385c;bottom:12px;height:2px;border-radius:2px}
body:not([data-view="home"]) .cde-header-modes,
body:not([data-view="home"]) .cde-mobile-modes{display:none!important}
body[data-view="home"] .twitch-btn{
  min-height:38px;padding:8px 13px;border:1px solid rgba(178,168,206,.55);
  border-radius:6px;background:rgba(12,13,29,.55);color:#f2effc;
  font-size:12px;font-weight:650;box-shadow:none;
}
body[data-view="home"] .twitch-btn svg{color:#c4b7f4}
body[data-view="home"] .twitch-btn:hover{background:rgba(35,25,51,.85);border-color:#ac90dd;transform:none}
body[data-view="home"] .site-footer{max-width:1280px;border-color:rgba(137,151,177,.12);color:#858b9c}

.cde-home{position:relative;isolation:isolate;min-height:calc(100svh - 110px);display:flex;align-items:center;justify-content:center;padding:70px 0 86px}
.cde-atmosphere{position:absolute;z-index:-1;top:-66px;bottom:-100px;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;pointer-events:none}
.cde-haze{position:absolute;border-radius:50%;filter:blur(75px);pointer-events:none}
.cde-haze-a{width:460px;height:200px;left:-110px;top:52%;background:rgba(148,17,53,.13);animation:cde-haze-a 19s ease-in-out infinite alternate}
.cde-haze-b{width:520px;height:310px;right:-150px;top:32%;background:rgba(130,16,57,.10);animation:cde-haze-b 25s ease-in-out infinite alternate}
.cde-flow-svg{position:absolute;inset:0;width:100%;height:100%;opacity:.88;transform:translate(var(--cde-x,0px),var(--cde-y,0px));transition:transform .5s ease-out}
.cde-flow-breathe{transform-origin:center;animation:cde-lines-breathe 13s ease-in-out infinite alternate}
.cde-light-trail{stroke-dasharray:9 2800;stroke-dashoffset:0;filter:drop-shadow(0 0 5px rgba(255,81,118,.75))}
.cde-light-trail-one{animation:cde-light-run 19s linear infinite}
.cde-light-trail-two{stroke-dasharray:4 2800;animation:cde-light-run 27s linear infinite reverse;opacity:.8}
.cde-layout{
  position:relative;z-index:1;width:min(100%,1280px);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.90fr) minmax(0,1.10fr);
  align-items:center;gap:clamp(42px,5.2vw,90px);
}
.cde-copy{min-width:0;padding:15px 0 10px}
.cde-kicker{display:flex;align-items:center;gap:17px;margin:0 0 44px;color:#b7b8c7;font-size:11px;font-weight:600;letter-spacing:.27em;line-height:1.4}
.cde-kicker span{display:block;width:30px;height:2px;flex:none;background:#ef3158}
.cde-copy h1{margin:0;color:#f8f8fb;font:800 clamp(53px,4.1vw,66px)/1.07 Inter,'Segoe UI',Arial,sans-serif;letter-spacing:-.055em;text-wrap:balance}
.cde-copy h1 span{color:#f14364}
.cde-tagline{margin:27px 0 34px;color:#b9bdcb;font-size:21px;line-height:1.45;font-weight:400;letter-spacing:-.022em}
.cde-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:24px;
  min-height:49px;padding:0 22px;min-width:190px;border:1px solid rgba(255,94,126,.52);
  border-radius:7px;background:linear-gradient(110deg,#ee3458,#bd294d);
  box-shadow:0 9px 22px rgba(202,26,66,.17);color:#fff;
  font-weight:700;font-size:16px;transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.cde-cta svg{width:17px;height:17px}
.cde-cta:hover{color:#fff;background:linear-gradient(110deg,#fb4164,#db3255);box-shadow:0 12px 28px rgba(209,33,74,.23);transform:translateY(-2px)}
.cde-cta:focus-visible,.cde-option:focus-visible,.cde-mode-links a:focus-visible{outline:2px solid #ff8da5;outline-offset:3px}
.cde-mode-links{display:flex;flex-wrap:wrap;gap:0;align-items:center;margin-top:67px}
.cde-mode-links>*{position:relative;display:inline-flex;align-items:center;min-height:36px;margin-right:23px;padding-right:23px;white-space:nowrap;font-size:13px;color:#9297a8;font-weight:500}
.cde-mode-links>*:not(:last-child)::after{content:"";width:1px;height:19px;position:absolute;right:0;top:8px;background:rgba(158,164,188,.17)}
.cde-mode-links a.is-current{color:#fff;font-weight:700}
.cde-mode-links a.is-current::before{content:"";position:absolute;bottom:0;left:0;right:23px;height:2px;border-radius:2px;background:#ed3658}
.cde-mode-links a:hover{color:#fff}
.cde-mode-links span{cursor:default}

.cde-preview{position:relative;min-width:0;padding:7px 7px 15px;border:1px solid rgba(146,150,184,.18);border-radius:14px;background:rgba(14,17,35,.61);
  -webkit-backdrop-filter:blur(13px) saturate(115%);backdrop-filter:blur(13px) saturate(115%);
  box-shadow:0 24px 65px rgba(0,0,0,.30),0 0 35px rgba(194,24,67,.035);overflow:hidden}
.cde-frame{position:relative;overflow:hidden;aspect-ratio:11/6;background:#060b18;border-radius:8px 8px 5px 5px}
.cde-frame>img{display:block;width:100%;height:100%;object-fit:contain;filter:brightness(.91) saturate(.91)}
.cde-frame::after{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.20),transparent 18%,transparent 70%,rgba(2,4,13,.53))}
.cde-frame-top{position:absolute;top:14px;left:14px;right:14px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;z-index:2}
.cde-clip-label,.cde-clip-source{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:5px 9px;border-radius:5px;background:rgba(7,10,21,.65);color:#f1f2f8;font-size:11px;font-weight:700;line-height:1}
.cde-clip-label svg{width:13px;height:13px;color:#f0486a}
.cde-clip-source{font-weight:600;color:#c9cbd8;background:rgba(7,10,21,.55)}
.cde-freeze-label{position:absolute;left:14px;bottom:13px;z-index:2;display:inline-flex;align-items:center;gap:7px;color:#e7e9f0;text-shadow:0 1px 6px #000;font-size:11px;font-weight:600}
.cde-freeze-label svg{width:12px;height:12px;color:#ff6787}
.cde-quiz{padding:18px 15px 2px}
.cde-quiz h2{margin:0 0 15px;color:#f6f6fa;font-size:20px;font-weight:750;line-height:1.25;letter-spacing:-.028em}
.cde-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 11px}
.cde-option{display:flex;align-items:center;gap:10px;min-width:0;min-height:41px;padding:7px 12px;border:1px solid rgba(163,172,202,.26);border-radius:6px;background:rgba(24,27,46,.66);color:#e0e2ec;text-align:left;font-size:12px;line-height:1.3;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.cde-option b{display:grid;place-items:center;flex:none;width:21px;height:21px;border-radius:5px;background:rgba(166,171,193,.14);font-size:12px;font-weight:750;color:#ff6686}
.cde-option:hover:not(:disabled){border-color:rgba(239,67,107,.7);background:rgba(62,27,48,.61);transform:translateY(-1px)}
.cde-option.is-selected{border-color:#f04469;background:rgba(151,32,66,.28)}
.cde-option.is-right{border-color:rgba(65,210,134,.8);background:rgba(21,100,64,.36);color:#e6fff1}
.cde-option.is-right b{background:#1c935b;color:#fff}
.cde-option.is-wrong{border-color:rgba(245,78,99,.8);background:rgba(135,30,52,.43);color:#fff}
.cde-option:disabled{cursor:default;opacity:1}
.cde-quiz-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:26px;margin-top:8px}
.cde-quiz-hint{color:#8f96a9;font-size:11px}
.cde-retry{padding:4px 1px;border:0;background:transparent;color:#ff89a0;font-size:11px;font-weight:650}
.cde-retry:hover{color:#fff}
.cde-retry[hidden]{display:none}
.cde-reveal{position:absolute;z-index:3;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;opacity:0;pointer-events:none;background:rgba(3,8,18,.39);transform:translateY(7px);transition:opacity .24s ease,transform .3s ease}
.cde-reveal strong{font-size:27px;color:#f8f9ff;font-weight:800;text-shadow:0 3px 12px #000}
.cde-reveal span{font-size:13px;color:#d9e2ed}
.cde-home.is-revealed .cde-reveal{opacity:1;transform:translateY(0)}
.cde-home.is-checking .cde-preview{animation:cde-preview-check .65s ease}
.cde-home.is-revealed .cde-preview{box-shadow:0 24px 65px rgba(0,0,0,.3),0 0 25px rgba(232,51,88,.13)}
@keyframes cde-scene-breathe{from{filter:brightness(.88) saturate(.9)}to{filter:brightness(1.18) saturate(1.07)}}
@keyframes cde-haze-a{from{transform:translate(-25px,0) scale(.92);opacity:.7}to{transform:translate(90px,-38px) scale(1.15);opacity:1}}
@keyframes cde-haze-b{from{transform:translate(15px,20px) scale(1)}to{transform:translate(-70px,-10px) scale(1.13)}}
@keyframes cde-lines-breathe{from{opacity:.42;transform:translateY(10px)}to{opacity:1;transform:translateY(-13px)}}
@keyframes cde-light-run{from{stroke-dashoffset:0}to{stroke-dashoffset:-2809}}
@keyframes cde-preview-check{0%,100%{border-color:rgba(146,150,184,.18)}42%{border-color:rgba(246,76,108,.72)}}
@media(min-width:1600px){.cde-layout{grid-template-columns:minmax(0,475px) minmax(0,680px);gap:87px}}
@media(max-width:1080px){
  body[data-view="home"] .desktop-nav{gap:20px;margin-left:8px}
  body[data-view="home"] .brand span{font-size:18px}
  .cde-layout{gap:35px;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}
  .cde-copy h1{font-size:clamp(42px,5vw,56px)}
  .cde-kicker{margin-bottom:30px}
  .cde-mode-links{margin-top:42px}
}
@media(max-width:780px){
  body[data-view="home"] .page-shell{padding:12px 20px}
  body[data-view="home"] .site-header{height:58px}
  body[data-view="home"] .desktop-nav{display:none}
  body[data-view="home"] .mobile-menu-toggle{display:inline-flex}
  .cde-home{min-height:0;align-items:stretch;padding:76px 0 65px}
  .cde-layout{grid-template-columns:minmax(0,1fr);gap:42px;max-width:650px}
  .cde-copy{padding:0}
  .cde-copy h1{font-size:clamp(46px,8vw,62px)}
  .cde-tagline{margin:18px 0 25px;font-size:18px}
  .cde-kicker{margin-bottom:24px}
  .cde-mode-links{margin-top:36px}
  .cde-flow-svg{opacity:.45}
}
@media(max-width:520px){
  body[data-view="home"] .page-shell{padding:10px 14px}
  body[data-view="home"] .brand{gap:8px}
  body[data-view="home"] .brand svg{width:32px;height:32px}
  body[data-view="home"] .brand span{font-size:15px}
  body[data-view="home"] .twitch-btn{padding:7px 9px;min-height:36px;font-size:0;gap:0}
  body[data-view="home"] .twitch-btn svg{width:20px;height:20px}
  .cde-home{padding:53px 0 38px}
  .cde-copy h1{font-size:clamp(43px,10vw,56px)}
  .cde-kicker{font-size:9px;letter-spacing:.20em}
  .cde-cta{min-width:167px;min-height:44px;font-size:14px}
  .cde-mode-links>*{font-size:12px;margin-right:13px;padding-right:13px}
  .cde-mode-links a.is-current::before{right:13px}
  .cde-mode-links>*:not(:last-child)::after{right:0}
  .cde-preview{padding:5px 5px 10px;border-radius:10px}
  .cde-quiz{padding:13px 9px 0}
  .cde-quiz h2{font-size:17px;margin-bottom:11px}
  .cde-options{gap:7px}
  .cde-option{min-height:48px;padding:7px 8px;gap:6px;font-size:11px}
  .cde-option b{width:18px;height:20px}
  .cde-freeze-label{font-size:9px}
  .cde-clip-source{display:none}
}
@media(prefers-reduced-motion:reduce){
  body[data-view="home"].cdh-dark .scene,.cde-haze,.cde-flow-breathe,.cde-light-trail,.cde-home.is-checking .cde-preview{animation:none!important}
  .cde-flow-svg{transform:none!important;transition:none}
  .cde-reveal{transition:none}
}

/* v2 — transparent blurred chrome, raised hero and gently rolling ambient waves. */
body[data-view="home"] .site-header{
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(174,184,209,.24);
  border-radius:0;
  -webkit-backdrop-filter:blur(20px) saturate(125%);
  backdrop-filter:blur(20px) saturate(125%);
  box-shadow:0 1px 0 rgba(10,14,26,.16);
}
body[data-view="home"] .twitch-btn,
body[data-view="home"] #cd-settings-button{
  background:rgba(12,16,34,.13);
  border:1px solid rgba(176,181,214,.12);
  border-bottom:1px solid rgba(178,180,218,.43);
  border-radius:5px;
  color:#e7e8f3;
  -webkit-backdrop-filter:blur(17px) saturate(125%);
  backdrop-filter:blur(17px) saturate(125%);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
  transition:background .22s ease,border-color .22s ease,color .22s ease;
}
body[data-view="home"] .twitch-btn:hover,
body[data-view="home"] #cd-settings-button:hover{
  background:rgba(46,32,61,.23);
  border-bottom-color:rgba(242,100,139,.65);
  transform:none;
}
body[data-view="home"] .cde-home{align-items:flex-start;padding-top:clamp(50px,6vh,68px);padding-bottom:65px}
body[data-view="home"] .cde-cta{
  background:rgba(43,17,39,.22);
  color:#fff;
  border:1px solid rgba(236,70,107,.16);
  border-bottom:2px solid rgba(246,72,109,.89);
  -webkit-backdrop-filter:blur(17px) saturate(125%);
  backdrop-filter:blur(17px) saturate(125%);
  box-shadow:0 9px 25px rgba(16,6,16,.20),inset 0 1px rgba(255,255,255,.035);
}
body[data-view="home"] .cde-cta:hover{
  background:rgba(129,34,67,.36);
  border-bottom-color:#ff7c9d;
  box-shadow:0 12px 28px rgba(26,7,23,.3),0 0 22px rgba(232,44,84,.10);
}
body[data-view="home"] .cde-option{
  background:rgba(14,19,38,.25);
  border:1px solid rgba(168,179,211,.12);
  border-bottom-color:rgba(168,179,211,.31);
  -webkit-backdrop-filter:blur(12px) saturate(117%);
  backdrop-filter:blur(12px) saturate(117%);
}
body[data-view="home"] .cde-option:hover:not(:disabled){
  background:rgba(96,31,65,.25);
  border-bottom-color:rgba(253,87,127,.8);
}
body[data-view="home"] .cde-option.is-selected{
  background:rgba(151,32,66,.20);
  border-bottom-color:rgba(245,74,110,.95);
}
body[data-view="home"] .cde-option.is-right{
  background:rgba(21,100,64,.30);
  border-bottom-color:rgba(65,210,134,.92);
}
body[data-view="home"] .cde-option.is-wrong{
  background:rgba(135,30,52,.33);
  border-bottom-color:rgba(255,94,118,.92);
}
.cde-wave-field{transform-origin:center 58%;filter:drop-shadow(0 0 22px rgba(218,29,77,.10))}
.cde-wave-one{transform-origin:center;animation:cde-wave-one 18s ease-in-out infinite alternate;opacity:.9}
.cde-wave-two{transform-origin:center;animation:cde-wave-two 23s ease-in-out infinite alternate;opacity:.77}
.cde-wave-edge{animation:cde-wave-edge 15s ease-in-out infinite alternate}
@keyframes cde-wave-one{
  0%{transform:translate(-30px,21px) scaleY(.92);opacity:.55}
  50%{opacity:1}
  100%{transform:translate(37px,-25px) scaleY(1.08);opacity:.85}
}
@keyframes cde-wave-two{
  0%{transform:translate(35px,-27px) scaleY(1.07);opacity:.65}
  100%{transform:translate(-45px,21px) scaleY(.9);opacity:1}
}
@keyframes cde-wave-edge{
  0%{transform:translateY(9px);opacity:.24}
  100%{transform:translateY(-18px);opacity:.75}
}
@media(max-width:780px){
  body[data-view="home"] .cde-home{padding-top:48px;padding-bottom:46px}
  .cde-wave-field{opacity:.65}
}
@media(max-width:520px){
  body[data-view="home"] .cde-home{padding-top:36px;padding-bottom:32px}
  .cde-wave-field{opacity:.42}
}
@media(prefers-reduced-motion:reduce){
  .cde-wave-one,.cde-wave-two,.cde-wave-edge{animation:none!important}
}


/* v3 — ensure the home header truly stays transparent over shared game CSS,
   and let the filled waves fade into the background instead of forming a flat band. */
body.cdh-dark[data-view="home"] .site-header{
  background:rgba(6,9,22,.065);
  border:0;
  border-bottom:1px solid rgba(174,184,209,.25);
  border-radius:0;
  -webkit-backdrop-filter:blur(20px) saturate(125%);
  backdrop-filter:blur(20px) saturate(125%);
  box-shadow:none;
}
.cde-wave-field{
  opacity:.48;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 44%,rgba(0,0,0,.28) 78%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 44%,rgba(0,0,0,.28) 78%,transparent 100%);
}
.cde-wave-edge{stroke-opacity:.66;filter:drop-shadow(0 0 4px rgba(249,74,111,.33))}
@media(max-width:780px){.cde-wave-field{opacity:.37}}
@media(max-width:520px){.cde-wave-field{opacity:.26}}


/* v4 — two separated flowing wave bands, clean glass card and uniform button borders. */
.cde-haze-a{top:21%;width:520px;height:230px;opacity:.45}
.cde-haze-b{top:12%;right:-80px;width:610px;height:310px;opacity:.58}
.cde-wave-top,.cde-wave-bottom{transform-origin:center;filter:drop-shadow(0 0 10px rgba(225,49,100,.10))}
.cde-wave-top{opacity:.80;animation:cde-wave-float-top 22s ease-in-out infinite alternate}
.cde-wave-bottom{opacity:.78;animation:cde-wave-float-bottom 26s ease-in-out infinite alternate}
.cde-wave-glint{stroke-dasharray:7 2700;filter:drop-shadow(0 0 6px rgba(249,87,128,.57))}
.cde-wave-glint-top{animation:cde-wave-glide 23s linear infinite}
.cde-wave-glint-bottom{animation:cde-wave-glide 27s linear infinite reverse}
@keyframes cde-wave-float-top{
  from{transform:translate(-16px,9px);opacity:.52}
  to{transform:translate(28px,-12px);opacity:.84}
}
@keyframes cde-wave-float-bottom{
  from{transform:translate(25px,-11px);opacity:.67}
  to{transform:translate(-26px,14px);opacity:.94}
}
@keyframes cde-wave-glide{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-2707}
}
body[data-view="home"] .cde-preview{
  background:rgba(11,16,35,.23);
  border:1px solid rgba(169,182,216,.20);
  -webkit-backdrop-filter:blur(23px) saturate(120%);
  backdrop-filter:blur(23px) saturate(120%);
  box-shadow:0 17px 45px rgba(0,0,0,.21),inset 0 1px rgba(255,255,255,.035);
}
body[data-view="home"] .cde-quiz{background:transparent;padding-bottom:5px}
body[data-view="home"] .cde-clip-label{
  background:rgba(7,12,27,.22);
  border:1px solid rgba(237,243,255,.11);
  -webkit-backdrop-filter:blur(11px);
  backdrop-filter:blur(11px);
}
body[data-view="home"] .cde-quiz-footer{min-height:8px;margin-top:0}
body[data-view="home"] .cde-quiz-hint{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
body[data-view="home"] .cde-retry{margin-left:auto;padding:7px 3px;font-size:12px}
body[data-view="home"] .cde-cta{
  border:1px solid rgba(246,78,116,.50);
  background:rgba(29,17,35,.23);
  box-shadow:0 7px 20px rgba(7,6,17,.13),inset 0 1px rgba(255,255,255,.035);
}
body[data-view="home"] .cde-cta:hover{
  border:1px solid rgba(255,116,148,.82);
  background:rgba(104,34,63,.29);
}
body[data-view="home"] .cde-option{
  border:1px solid rgba(161,177,205,.26);
  background:rgba(13,20,42,.12);
}
body[data-view="home"] .cde-option:hover:not(:disabled){border:1px solid rgba(252,90,129,.70);background:rgba(93,30,59,.22)}
body[data-view="home"] .cde-option.is-selected{border:1px solid rgba(245,74,110,.94)}
body[data-view="home"] .cde-option.is-right{border:1px solid rgba(65,210,134,.88)}
body[data-view="home"] .cde-option.is-wrong{border:1px solid rgba(255,94,118,.90)}
body[data-view="home"] .twitch-btn,
body[data-view="home"] #cd-settings-button{
  border:1px solid rgba(180,186,214,.27);
}
body[data-view="home"] .twitch-btn:hover,
body[data-view="home"] #cd-settings-button:hover{
  border:1px solid rgba(243,116,157,.52);
}
@media(max-width:780px){.cde-wave-top{opacity:.56}.cde-wave-bottom{opacity:.52}}
@media(max-width:520px){.cde-wave-top{opacity:.38}.cde-wave-bottom{opacity:.32}}
@media(prefers-reduced-motion:reduce){
  .cde-wave-top,.cde-wave-bottom,.cde-wave-glint{animation:none!important}
}

/* v5 — layered, parallel luminous data streams and drifting micro-particles. */
.cde-atmosphere::before,.cde-atmosphere::after{
  content:"";position:absolute;pointer-events:none;border-radius:50%;
  mix-blend-mode:screen;filter:blur(35px);z-index:0;
}
.cde-atmosphere::before{
  width:78vw;height:330px;top:0;right:-16vw;
  background:radial-gradient(ellipse at 60% 45%,rgba(227,34,91,.115),rgba(109,12,62,.055) 48%,transparent 74%);
  animation:cde-aura-pulse 18s ease-in-out infinite alternate;
}
.cde-atmosphere::after{
  width:70vw;height:330px;bottom:7%;left:-14vw;
  background:radial-gradient(ellipse at 48% 50%,rgba(239,39,93,.105),rgba(113,17,60,.05) 52%,transparent 76%);
  animation:cde-aura-pulse 23s ease-in-out infinite alternate-reverse;
}
.cde-flow-svg{opacity:1}
.cde-wave-top,.cde-wave-bottom{filter:drop-shadow(0 0 12px rgba(235,40,94,.23))}
.cde-wave-top{animation:cde-wave-float-top 22s ease-in-out infinite alternate}
.cde-wave-bottom{animation:cde-wave-float-bottom 26s ease-in-out infinite alternate}
.cde-filament-hot{filter:drop-shadow(0 0 5px rgba(255,71,126,.62))}
.cde-mote-field{animation:cde-mote-drift 22s ease-in-out infinite alternate}
.cde-mote-bottom{animation-duration:28s;animation-direction:alternate-reverse}
.cde-mote-shine{filter:drop-shadow(0 0 6px rgba(255,102,149,.85))}
.cde-haze-a{top:18%;opacity:.58}
.cde-haze-b{top:8%;opacity:.72}
.cde-wave-glint{stroke-dasharray:12 2700;filter:drop-shadow(0 0 8px rgba(255,117,153,.75))}
@keyframes cde-mote-drift{from{transform:translate(-14px,9px);opacity:.65}to{transform:translate(20px,-17px);opacity:1}}
@keyframes cde-aura-pulse{from{transform:translate(-20px,10px) scale(.93);opacity:.55}to{transform:translate(35px,-12px) scale(1.09);opacity:1}}
@media(max-width:780px){.cde-mote-field{opacity:.6}.cde-atmosphere::before,.cde-atmosphere::after{opacity:.58}}
@media(max-width:520px){.cde-mote-field{opacity:.45}.cde-atmosphere::before,.cde-atmosphere::after{opacity:.42}}
@media(prefers-reduced-motion:reduce){.cde-mote-field,.cde-atmosphere::before,.cde-atmosphere::after{animation:none!important}}

/* v6 — reference-inspired flowing crimson mist and restrained refractive glass.
   Home-only; other SPA routes keep their own appearance. */
body[data-view="home"]{
  --cde-glass-rim:rgba(247,187,215,.35);
  --cde-glass-fill:rgba(17,18,39,.20);
  background:#050815;
}
body[data-view="home"].cdh-dark .scene{
  background:linear-gradient(115deg,#070b19,#080717 57%,#090614);
  animation:none;
}
.cde-mist-atmosphere{
  top:-86px;
  bottom:-108px;
  background:#070916;
  isolation:isolate;
  overflow:hidden;
}
.cde-mist-atmosphere::before,.cde-mist-atmosphere::after{display:none!important}
.cde-mist-base,.cde-mist-layer,.cde-mist-light{position:absolute;inset:-4%;pointer-events:none}
.cde-mist-base,.cde-mist-layer{
  background-image:url("assets/neon-mist-v1.webp");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  transform-origin:center;
  will-change:transform;
}
.cde-mist-base{
  opacity:.98;
  animation:cde-mist-ebb 31s ease-in-out infinite alternate;
}
.cde-mist-layer{
  mix-blend-mode:screen;
  background-size:cover;
  opacity:.11;
}
.cde-mist-layer-upper{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 37%,transparent 70%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 37%,transparent 70%);
  animation:cde-mist-flow-upper 24s ease-in-out infinite alternate;
}
.cde-mist-layer-lower{
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 35%,transparent 68%);
  mask-image:linear-gradient(to top,#000 0%,#000 35%,transparent 68%);
  animation:cde-mist-flow-lower 29s ease-in-out infinite alternate;
}
.cde-mist-light{
  z-index:1;
  background:
    radial-gradient(ellipse 26% 11% at 78% 18%,rgba(255,66,132,.11),transparent 95%),
    radial-gradient(ellipse 29% 15% at 26% 79%,rgba(251,28,105,.10),transparent 95%);
  mix-blend-mode:screen;
  filter:blur(32px);
  animation:cde-mist-breathe 15s ease-in-out infinite alternate;
}
@keyframes cde-mist-ebb{
  from{transform:translate(-1.1%,.9%) scale(1.045)}
  to{transform:translate(1.2%,-.7%) scale(1.075)}
}
@keyframes cde-mist-flow-upper{
  from{transform:translate(-2.3%,.4%) scale(1.045) skewX(-.7deg);opacity:.07}
  to{transform:translate(2.1%,-1.7%) scale(1.085) skewX(.6deg);opacity:.19}
}
@keyframes cde-mist-flow-lower{
  from{transform:translate(2.1%,1.5%) scale(1.065);opacity:.18}
  to{transform:translate(-2.2%,-1.2%) scale(1.035);opacity:.08}
}
@keyframes cde-mist-breathe{
  from{transform:translate(-1.5%,.8%);opacity:.56}
  to{transform:translate(1.9%,-1.2%);opacity:1}
}
/* Glass is a subtle material treatment, not exaggerated iOS bubbles. */
body.cdh-dark[data-view="home"] .site-header{
  background:rgba(6,8,22,.045);
  border-bottom:1px solid rgba(229,204,225,.22);
  -webkit-backdrop-filter:blur(17px) saturate(137%);
  backdrop-filter:blur(17px) saturate(137%);
  box-shadow:0 1px 0 rgba(255,239,250,.035);
}
body[data-view="home"] .cde-preview{
  position:relative;
  border:1px solid rgba(255,189,217,.32);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(239,215,246,.084),rgba(18,18,40,.22) 29%,rgba(15,16,39,.24) 72%,rgba(255,99,154,.09));
  -webkit-backdrop-filter:blur(18px) saturate(128%);
  backdrop-filter:blur(18px) saturate(128%);
  box-shadow:
    0 28px 65px rgba(1,2,12,.36),
    inset 0 1px 0 rgba(255,230,244,.19),
    inset 0 -1px 0 rgba(244,81,140,.19),
    0 0 19px rgba(235,46,104,.12);
}
body[data-view="home"] .cde-preview::after{
  content:"";pointer-events:none;position:absolute;z-index:4;inset:0;
  border-radius:inherit;
  background:
    linear-gradient(112deg,rgba(255,249,255,.18) 0%,transparent 16%,transparent 77%,rgba(252,101,161,.10) 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 22%,transparent 78%,#000);
  mask-image:linear-gradient(to bottom,#000,transparent 22%,transparent 78%,#000);
}
body[data-view="home"] .cde-quiz{
  background:linear-gradient(135deg,rgba(226,199,242,.035),rgba(189,47,112,.035));
  border-radius:0 0 10px 10px;
}
body[data-view="home"] .cde-option{
  border:1px solid rgba(228,213,238,.26);
  border-radius:8px;
  background:linear-gradient(125deg,rgba(247,234,255,.075),rgba(27,25,49,.17) 46%,rgba(225,62,126,.055));
  -webkit-backdrop-filter:blur(13px) saturate(137%);
  backdrop-filter:blur(13px) saturate(137%);
  box-shadow:inset 0 1px rgba(255,246,252,.09),0 1px 4px rgba(0,0,0,.10);
}
body[data-view="home"] .cde-option:hover:not(:disabled){
  border-color:rgba(255,177,209,.65);
  background:linear-gradient(125deg,rgba(255,222,243,.15),rgba(107,42,85,.21));
  box-shadow:inset 0 1px rgba(255,248,254,.17),0 0 12px rgba(247,61,124,.12);
}
body[data-view="home"] .cde-cta{
  border:1px solid rgba(250,206,228,.41);
  border-radius:9px;
  background:linear-gradient(125deg,rgba(246,225,246,.11),rgba(32,21,45,.16) 43%,rgba(235,65,119,.065));
  -webkit-backdrop-filter:blur(16px) saturate(138%);
  backdrop-filter:blur(16px) saturate(138%);
  box-shadow:inset 0 1px rgba(255,245,252,.17),0 7px 22px rgba(5,3,15,.22);
}
body[data-view="home"] .cde-cta:hover{
  border-color:rgba(255,199,221,.77);
  background:linear-gradient(125deg,rgba(248,219,241,.15),rgba(99,37,79,.23));
  box-shadow:inset 0 1px rgba(255,244,252,.22),0 0 19px rgba(235,50,118,.14);
  transform:translateY(-1px);
}
body[data-view="home"] .twitch-btn,
body[data-view="home"] #cd-settings-button{
  border:1px solid rgba(238,214,242,.32);
  border-radius:7px;
  background:linear-gradient(120deg,rgba(237,232,255,.075),rgba(15,16,38,.15));
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
  box-shadow:inset 0 1px rgba(255,240,252,.12);
}
body[data-view="home"] .twitch-btn:hover,
body[data-view="home"] #cd-settings-button:hover{
  border-color:rgba(250,177,211,.61);
  background:rgba(105,49,86,.23);
}
@media(max-width:780px){
  .cde-mist-base,.cde-mist-layer{background-position:59% center}
  .cde-mist-layer{opacity:.075}
  .cde-mist-light{opacity:.70}
}
@media(max-width:520px){
  .cde-mist-base,.cde-mist-layer{background-position:62% center}
  .cde-mist-light{opacity:.48}
  body[data-view="home"] .cde-preview{border-radius:11px}
}
@media(prefers-reduced-motion:reduce){
  .cde-mist-base,.cde-mist-layer,.cde-mist-light{animation:none!important;transform:none!important}
}

/* The mist responds gently to cursor movement without overriding its flow animation. */
.cde-mist-base,.cde-mist-layer{translate:var(--cde-x,0px) var(--cde-y,0px);transition:translate .5s ease-out}
@media(prefers-reduced-motion:reduce){.cde-mist-base,.cde-mist-layer{translate:0 0!important;transition:none!important}}

/* v7 — keep the transparent navigation and footer above the full-bleed mist. */
body[data-view="home"] .site-header{position:relative;z-index:10}
body[data-view="home"] .site-footer{position:relative;z-index:5}

/* v8 — procedural WebGL mist. Still-frame WebP remains an accessible fallback. */
.cde-mist-canvas{
  position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;
  pointer-events:none;background:#070916;opacity:0;transition:opacity .8s ease;
}
.cde-mist-atmosphere.cde-webgl-ready .cde-mist-canvas{opacity:1}
.cde-mist-atmosphere.cde-webgl-ready .cde-mist-base,
.cde-mist-atmosphere.cde-webgl-ready .cde-mist-layer{opacity:0!important;animation:none!important}
.cde-mist-atmosphere.cde-webgl-ready .cde-mist-light{z-index:3;opacity:.5;mix-blend-mode:screen}
@media(prefers-reduced-motion:reduce){.cde-mist-canvas{display:none!important}}

/* v9: keep the reference still beneath the animated canvas during fade-in. */
.cde-mist-canvas{transition:opacity .45s ease}
.cde-mist-atmosphere.cde-webgl-ready .cde-mist-base{opacity:.98!important;animation:none!important}

/* v10: procedural canvas replaces the reference fallback immediately on its first drawn frame. */
.cde-mist-canvas{transition:none!important}
.cde-mist-atmosphere.cde-webgl-ready .cde-mist-base,
.cde-mist-atmosphere.cde-webgl-ready .cde-mist-layer{
  opacity:0!important;animation:none!important;
}

/* Public catalog indicator uses the same quiet glass language as the mode selector. */
body[data-view="home"] .cde-live-availability {
  display:inline-flex;align-items:center;gap:12px;width:max-content;max-width:100%;
  padding:11px 16px;border:0;border-radius:15px;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.025) 50%,rgba(232,63,129,.08));
  -webkit-backdrop-filter:blur(12px) saturate(135%);
  backdrop-filter:blur(12px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 30px rgba(8,7,27,.12);
  color:#f7eefb;
}
body[data-view="home"] .cde-live-availability-icon{font-size:23px;color:#ff78ab;line-height:1}
body[data-view="home"] .cde-live-availability strong{display:block;font-size:13px;line-height:1.5}
body[data-view="home"] .cde-live-availability small{display:block;color:#aeb0ca;font-size:11px;line-height:1.5}

body[data-view="home"] .cde-live-availability .cde-beta-testers{margin-top:3px;color:#e6bdd6;font-size:11px}

body[data-view="home"] .cde-beta-testers a{color:inherit;text-decoration:none;text-underline-offset:3px;transition:color .18s ease,text-decoration-color .18s ease}
body[data-view="home"] .cde-beta-testers a:is(:hover,:focus-visible){color:#fff;text-decoration:underline;text-decoration-color:#ff85ba}