:root{
    --void:#08090a;
    --panel:#1c1a22;
    --cream:#d8d0ae;
    --green:#8fd145;
    --green-hi:#b5f36a;
    --purple:#7540a8;
    --purple-hi:#a167db;
    --muted:#7e7a69;
    --alert-red:#ff4f3f;
    --alert-orange:#ff9c3d;
    --display:"Bebas Neue","Arial Narrow",Arial,sans-serif;
    --mono:"Courier New",Courier,monospace
}

*{box-sizing:border-box}

html,
body{
    margin:0;
    min-height:100%;
    background:#000;
    color:var(--cream)
}

body{
    min-height:100vh;
    display:grid;
    place-items:center;
    overflow:hidden;
    font-family:var(--mono)
}

.dashboard{
    position:relative;
    isolation:isolate;
    width:min(100vw,177.7778vh);
    aspect-ratio:16/9;
    display:grid;
    grid-template-rows:auto 1fr auto;
    overflow:hidden;
    background:
        radial-gradient(circle at 78% 18%,rgba(117,64,168,.25),transparent 28%),
        var(--void);
    border:1px solid var(--purple)
}

.dashboard-grid{
    position:absolute;
    inset:0;
    z-index:-1;
    background-image:
        linear-gradient(rgba(117,64,168,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(117,64,168,.08) 1px,transparent 1px);
    background-size:3.2% 5.7%
}

.dashboard::after{
    content:"";
    position:absolute;
    inset:1.3%;
    z-index:-1;
    border:1px solid rgba(143,209,69,.16);
    pointer-events:none
}

.dashboard-alert[hidden]{display:none}

.dashboard-alert{
    position:absolute;
    z-index:50;
    right:3.2%;
    bottom:8%;
    width:46.875%;
    max-width:93.6%;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:1.09375vw;
    padding:1.09375vw 1.25vw;
    border:1px solid var(--alert-orange);
    border-left:.46875vw solid var(--alert-red);
    background:linear-gradient(110deg,rgba(92,18,16,.9),rgba(68,28,13,.82));
    box-shadow:0 0 1.5625vw rgba(255,79,63,.2),.46875vw .46875vw 0 rgba(117,64,168,.52);
    backdrop-filter:blur(12px);
    color:#fff4df;
    animation:alert-enter .35s ease both,alert-float 3.2s ease-in-out .35s infinite
}

.dashboard-alert-icon{
    width:clamp(2.8125rem,3.59375vw,4.375rem);
    aspect-ratio:1;
    display:grid;
    place-items:center;
    border:1px solid var(--alert-orange);
    background:rgba(255,79,63,.13);
    color:var(--alert-orange);
    font:400 clamp(2.109375rem,2.96875vw,3.59375rem)/1 var(--display);
    text-shadow:0 0 12px rgba(255,156,61,.45)
}

.dashboard-alert-copy strong{
    display:block;
    color:var(--alert-orange);
    font:700 clamp(.859375rem,1.015625vw,1.25rem)/1 var(--mono);
    letter-spacing:.12em
}

.dashboard-alert-copy p{
    margin:.45em 0 0;
    color:#fff4df;
    font:400 clamp(1.328125rem,1.796875vw,2.1875rem)/1.1 var(--display);
    letter-spacing:.025em
}

@keyframes alert-enter{
    from{opacity:0;transform:translateY(1vw) scale(.97)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes alert-float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-.25vw)}
}

.dashboard-header{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:2vw;
    margin:2.4% 3.2% 0;
    padding-bottom:1.3%;
    border-bottom:1px solid var(--purple)
}

.dashboard-brand{
    display:inline-flex;
    width:max-content;
    flex-direction:column;
    color:var(--cream);
    font-family:var(--display);
    line-height:.82;
    text-decoration:none
}

.dashboard-brand > span{font-size:clamp(1.4rem,2.3vw,2.8rem)}
.dashboard-brand b{color:var(--purple-hi);font-weight:400}
.dashboard-brand small{margin-top:.28em;color:var(--green);font-size:.38em;letter-spacing:.18em}

.dashboard-status{
    display:flex;
    align-items:center;
    gap:.65em;
    color:var(--green);
    font-size:clamp(.55rem,.75vw,.95rem);
    font-weight:700;
    letter-spacing:.08em
}

.status-dot{
    width:.65em;
    aspect-ratio:1;
    background:var(--green-hi);
    box-shadow:0 0 12px var(--green)
}

.dashboard-clock{
    justify-self:end;
    color:var(--cream);
    font:400 clamp(1.5rem,2.4vw,3rem)/1 var(--display);
    letter-spacing:.05em
}

.scene-stage{position:relative;min-height:0}

.scene{
    position:absolute;
    inset:0;
    display:grid;
    align-content:center;
    padding:3% 5.2%;
    opacity:0;
    visibility:hidden;
    transform:translateX(2.5%);
    transition:opacity .6s ease,transform .6s ease,visibility 0s linear .6s
}

.scene.is-active{
    opacity:1;
    visibility:visible;
    transform:none;
    transition-delay:0s
}

.scene-heading{margin-bottom:2.2%}
.scene-kicker{margin:0;color:var(--green);font-size:clamp(.55rem,.8vw,1rem);font-weight:700;letter-spacing:.12em}

.scene h2{
    margin:.2em 0 0;
    color:var(--cream);
    font:400 clamp(3.5rem,6vw,7.2rem)/.9 var(--display);
    text-transform:uppercase
}

.scene-copy-centered{text-align:center}

.scene-welcome h1{
    margin:2% 0 0;
    color:var(--purple-hi);
    font:400 clamp(7rem,16vw,19rem)/.66 var(--display);
    letter-spacing:-.025em;
    text-shadow:.035em .035em 0 rgba(143,209,69,.18)
}

.scene-welcome h1 > span{color:var(--cream)}
.scene-welcome h1 small{display:block;margin-top:4%;color:var(--cream);font-size:.3em;letter-spacing:.06em}
.welcome-date{margin:3% 0 0;color:var(--green-hi);font:400 clamp(1.7rem,3vw,3.7rem)/1 var(--display);letter-spacing:.08em}

.system-ready{position:absolute;right:5.2%;bottom:7%;display:flex;gap:.35vw}
.system-ready i{width:.8vw;min-width:6px;aspect-ratio:1;background:var(--green)}

.schedule-board{display:grid;grid-template-columns:1.15fr .85fr;gap:2vw}

.schedule-card{
    min-height:30vh;
    padding:2vw;
    background:rgba(28,26,34,.92);
    border:1px solid var(--purple)
}

.schedule-card-now{border-color:var(--green);box-shadow:.65vw .65vw 0 rgba(117,64,168,.62)}
.schedule-meta{display:flex;justify-content:space-between;color:var(--green);font-size:clamp(.65rem,.9vw,1.1rem);font-weight:700;letter-spacing:.08em}
.schedule-card h3{margin:8% 0 2%;color:var(--cream);font:400 clamp(2.2rem,4vw,4.8rem)/.9 var(--display);text-transform:uppercase}
.schedule-card p{max-width:30em;margin:0;color:var(--muted);font-size:clamp(.7rem,1vw,1.2rem);line-height:1.5}

.activity-meter{display:flex;gap:.45vw;margin-top:7%}
.activity-meter i{width:1.1vw;aspect-ratio:1;background:var(--green)}
.activity-meter i:nth-child(4),.activity-meter i:nth-child(5){opacity:.2}

.scene-sessions{align-content:start;padding-top:2.2%}
.scene-sessions .scene-heading{margin-bottom:1.2%}
.session-hint{width:max-content;max-width:100%;margin:0 0 1.4vw;padding:.55em .9em;border:1px solid rgba(143,209,69,.5);border-left:.28vw solid var(--green);background:linear-gradient(90deg,rgba(143,209,69,.12),rgba(28,26,34,.82));color:var(--cream);font-size:clamp(.58rem,.78vw,.95rem);font-weight:700;letter-spacing:.045em;box-shadow:.28vw .28vw 0 rgba(117,64,168,.28)}
.session-hint span{color:var(--green-hi);letter-spacing:.1em}
.session-viewport{overflow:hidden;transition:height .45s ease}
.session-grid{display:grid;gap:1vw;transform:translateY(0)}
.session-grid.is-scrollable{will-change:transform}
.session-grid.is-scrolling{animation:session-marquee var(--session-scroll-duration,24s) linear infinite}
.session-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4vw;padding:1.3vw 1.6vw;overflow:hidden;background:rgba(28,26,34,.93);border:1px solid var(--purple);color:inherit}
.session-card.is-full{border-color:var(--alert-red);background:linear-gradient(rgba(4,4,5,.68),rgba(4,4,5,.68)),rgba(28,26,34,.93);box-shadow:inset 0 0 1.2vw rgba(255,79,63,.12)}
.session-card.is-full .session-number,.session-card.is-full .session-copy{filter:grayscale(1);opacity:.3}
.session-card.is-full strong{position:relative;z-index:4;color:var(--alert-red);border-color:var(--alert-red);background:rgba(18,4,4,.9);box-shadow:0 0 .8vw rgba(255,79,63,.24)}
.session-number{color:var(--purple-hi);font-size:clamp(.6rem,.8vw,1rem)}
.session-copy{min-width:0}
.session-card h3{margin:0;color:var(--cream);font:400 clamp(1.7rem,2.6vw,3.2rem)/1 var(--display);text-transform:uppercase}
.session-card p{margin:.35em 0 0;color:var(--muted);font-size:clamp(.6rem,.8vw,1rem)}
.session-card p.session-creator{color:var(--green-hi);font-weight:700}
.session-card strong{padding:.55em .7em;color:var(--green-hi);border:1px solid var(--green);font-size:clamp(.75rem,1.1vw,1.35rem)}
.session-tags{display:flex;flex-wrap:wrap;gap:.35vw;margin:.35vw 0 .15vw}
.session-tag{padding:.22em .55em;border:1px solid rgba(161,103,219,.72);background:rgba(117,64,168,.16);color:var(--purple-hi);font-size:clamp(.5rem,.68vw,.82rem);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.session-full-banner{position:absolute;z-index:3;left:18%;top:50%;width:52%;padding:.32em 4%;transform:translateY(-50%) rotate(20deg);border-top:2px solid var(--alert-red);border-bottom:2px solid var(--alert-red);background:repeating-linear-gradient(135deg,rgba(18,5,6,.97) 0,rgba(18,5,6,.97) 1.1vw,rgba(47,9,10,.97) 1.1vw,rgba(47,9,10,.97) 2.2vw);box-shadow:0 .25vw .8vw rgba(0,0,0,.72);color:#fff4df;font:400 clamp(1.25rem,2.1vw,2.55rem)/1 var(--display);letter-spacing:.1em;text-align:center;text-shadow:.08em .08em 0 rgba(255,79,63,.42)}
.session-state{display:grid;min-height:22vh;place-items:center;padding:2vw;border:1px dashed var(--purple);background:rgba(28,26,34,.72);color:var(--muted);font-size:clamp(.7rem,1vw,1.2rem);font-weight:700;letter-spacing:.08em;text-align:center}
.session-state.is-error{color:var(--alert-orange);border-color:rgba(255,156,61,.55)}

@keyframes session-marquee{
    from{transform:translateY(0)}
    to{transform:translateY(var(--session-scroll-distance,0))}
}

.scene-voting{align-content:start;padding-top:2.2%}
.scene-voting .scene-heading{margin-bottom:1.2%}
.poll-hint{width:max-content;max-width:100%;margin:0 0 1.2vw;padding:.5em .85em;border-left:.28vw solid var(--purple-hi);background:linear-gradient(90deg,rgba(117,64,168,.22),rgba(28,26,34,.72));color:var(--cream);font-size:clamp(.58rem,.78vw,.95rem);font-weight:700;letter-spacing:.045em}
.poll-hint span{color:var(--purple-hi);letter-spacing:.1em}
.poll-viewport{min-height:0;overflow:hidden;transition:height .45s ease}
.poll-grid{display:grid;gap:1.2vw;min-height:0;transform:translateY(0)}
.poll-grid.is-scrollable{will-change:transform}
.poll-grid.is-scrolling{animation:poll-marquee var(--poll-scroll-duration,30s) linear var(--poll-scroll-delay,0s) infinite}
.poll-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2vw}
.poll-set.is-single{grid-template-columns:minmax(0,1fr)}
.poll-card{position:relative;min-width:0;padding:.85vw 1.05vw .75vw;overflow:hidden;border:1px solid var(--purple);background:linear-gradient(115deg,rgba(28,26,34,.97),rgba(12,12,16,.94));box-shadow:.42vw .42vw 0 rgba(117,64,168,.35)}
.poll-card::after{content:"";position:absolute;right:-1.5vw;top:-1.5vw;width:4vw;aspect-ratio:1;border:1px solid rgba(143,209,69,.28);transform:rotate(45deg)}
.poll-meta{display:flex;justify-content:space-between;gap:1vw;color:var(--muted);font-size:clamp(.5rem,.66vw,.8rem);font-weight:700;letter-spacing:.08em}
.poll-live{color:var(--green-hi);text-shadow:0 0 .7vw rgba(143,209,69,.5)}
.poll-card h3{max-width:92%;margin:.38em 0 .48em;color:var(--cream);font:400 clamp(1.25rem,1.75vw,2.15rem)/.95 var(--display);letter-spacing:.015em;text-transform:uppercase}
.poll-chart{display:grid;gap:.32vw}
.poll-answer{display:grid;grid-template-columns:minmax(7rem,.9fr) minmax(6rem,1.8fr) auto;align-items:center;gap:.6vw}
.poll-answer-label{min-width:0;display:flex;align-items:center;gap:.6vw;color:var(--cream);font-size:clamp(.58rem,.78vw,.95rem)}
.poll-answer-label > span{flex:0 0 auto;color:var(--purple-hi);font-size:.8em}
.poll-answer-label > strong{overflow:hidden;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.poll-track{position:relative;height:clamp(.65rem,.9vw,1.1rem);overflow:hidden;border:1px solid rgba(117,64,168,.68);background:repeating-linear-gradient(90deg,rgba(117,64,168,.12) 0,rgba(117,64,168,.12) 9%,rgba(8,9,10,.7) 9%,rgba(8,9,10,.7) 10%)}
.poll-track i{display:block;height:100%;background:linear-gradient(90deg,var(--purple),var(--purple-hi));box-shadow:0 0 .65vw rgba(161,103,219,.35);transition:width 1.4s cubic-bezier(.22,.8,.28,1)}
.poll-answer.is-leading .poll-track{border-color:rgba(143,209,69,.8)}
.poll-answer.is-leading .poll-track i{background:linear-gradient(90deg,var(--green),var(--green-hi));box-shadow:0 0 .75vw rgba(143,209,69,.42)}
.poll-value{min-width:3.2vw;display:flex;align-items:baseline;justify-content:flex-end;gap:.35em;color:var(--muted)}
.poll-value strong{color:var(--cream);font:400 clamp(1rem,1.35vw,1.65rem)/1 var(--display)}
.poll-value small{font-size:clamp(.45rem,.58vw,.7rem)}
.poll-value.is-changing{animation:poll-value-update 1.4s cubic-bezier(.22,.8,.28,1) both}
.poll-footer{display:flex;justify-content:space-between;margin-top:.52vw;padding-top:.45vw;border-top:1px solid rgba(117,64,168,.55);color:var(--green);font-size:clamp(.5rem,.62vw,.75rem);font-weight:700;letter-spacing:.08em}
.poll-state{display:grid;min-height:25vh;place-items:center;padding:2vw;border:1px dashed var(--purple);background:rgba(28,26,34,.72);color:var(--muted);font-size:clamp(.7rem,1vw,1.2rem);font-weight:700;letter-spacing:.08em;text-align:center}
.poll-state.is-error{color:var(--alert-orange);border-color:rgba(255,156,61,.55)}

@keyframes poll-value-update{
    from{opacity:.15;clip-path:inset(0 100% 0 0);transform:translateX(-.45vw)}
    to{opacity:1;clip-path:inset(0);transform:translateX(0)}
}

@keyframes poll-marquee{
    from{transform:translateY(0)}
    to{transform:translateY(var(--poll-scroll-distance,0))}
}

.dashboard-footer{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:2vw;
    margin:0 3.2% 2.4%;
    padding-top:1.2%;
    border-top:1px solid var(--purple)
}

.scene-controls{display:flex;gap:.45vw}
.scene-controls button{min-width:2.2rem;padding:.45em .65em;border:1px solid var(--purple);background:var(--panel);color:var(--cream);font:700 clamp(.55rem,.7vw,.85rem)/1 var(--mono);cursor:pointer}
.scene-controls button:hover,.scene-controls button:focus-visible{color:var(--green-hi);border-color:var(--green);outline:none}
.scene-position{display:flex;align-items:center;gap:.8vw;color:var(--muted);font-size:clamp(.5rem,.65vw,.8rem)}
.scene-progress{width:12vw;height:3px;overflow:hidden;background:var(--panel)}
.scene-progress i{display:block;width:0;height:100%;background:var(--green)}
.scene-label{justify-self:end;color:var(--green);font-size:clamp(.5rem,.7vw,.85rem);font-weight:700;letter-spacing:.1em}

@media(max-aspect-ratio:4/3){
    .dashboard{width:100vw;height:auto}
}

@media(prefers-reduced-motion:reduce){
    .scene{transition:none}
    .dashboard-alert{animation:none}
    .poll-track i{transition:none}
    .poll-value.is-changing{animation:none}
    .poll-viewport{transition:none}
    .poll-grid.is-scrolling{animation:none}
    .session-viewport{transition:none}
    .session-grid.is-scrolling{animation:none}
}