:root { color: #f6faff; font-family: system-ui, sans-serif; background: var(--brand-deep); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(.3rem, 1vh, 1rem); padding: clamp(.6rem, 2.3vw, 3rem); background: radial-gradient(ellipse at 80% 110%, color-mix(in srgb, var(--brand), var(--brand-deep) 65%), var(--brand-deep) 72%); }
body.idle { cursor: none; }
body.idle a { cursor: none; }
a { color: inherit; }
a:focus-visible { outline: 3px solid #fff; outline-offset: .3rem; }
.screen-header, .screen-footer, .screen-brand { display: flex; justify-content: space-between; align-items: center; gap: clamp(.5rem, 1.1vw, 1.3rem); }
.screen-header { padding-bottom: .65rem; border-bottom: 2px solid #ffffff38; font-weight: 750; font-size: clamp(.78rem, 1.5vw, 1.8rem); }
.screen-header time { text-align: right; }
.screen-logo { width: clamp(5rem, 11.5vw, 13rem); height: auto; flex: 0 0 auto; }
.screen-name { opacity: .7; font-weight: 450; }
.screen-footer { border-top: 1px solid #ffffff35; padding-top: .65rem; color: var(--accent-light); font-size: clamp(.67rem, 1vw, 1.15rem); }
#connection { color: #ffe5ab; text-align: right; }
#stage { min-height: 0; min-width: 0; }
.frame { height: 100%; animation: fade .38s ease-out; }
@keyframes fade { from { opacity: .58; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .frame { animation: none; } }
.slide { display: flex; align-items: center; gap: clamp(.75rem, 3vw, 4rem); min-height: 0; }
.poster { flex: 1 1 49%; height: 100%; min-width: 0; display: grid; place-items: center; }
.poster img { display: block; width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }
.slide-text { flex: 1 1 51%; min-width: 0; padding-block: .4rem; }
.text-slide { max-width: 90rem; margin-inline: auto; }
h1, h2, p { margin: 0; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.65rem, min(4.35vw, 8vh), 5.6rem); line-height: 1.03; letter-spacing: -.045em; margin-bottom: .23em; }
.slide h1 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.slide p { font-size: clamp(1rem, min(2.35vw, 3.85vh), 3rem); line-height: 1.2; margin-block: .25em; }
.slide p:not(.when) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.screen-kicker { color: var(--accent-light); text-transform: uppercase; font-weight: 800; letter-spacing: .12em; font-size: clamp(.65rem, 1.1vw, 1.5rem); margin-bottom: .7em; }
.when { color: var(--accent-light); font-weight: 700; }
.organizer { color: #d9e8f4; }
.screen-qr { display: inline-flex; gap: .7em; align-items: center; margin-top: .6rem; max-width: 100%; color: var(--accent-light); font-size: clamp(.75rem, 1.1vw, 1.45rem); }
.screen-qr img { flex: 0 0 auto; width: clamp(5.5rem, min(14vw, 24vh), 18rem); aspect-ratio: 1; height: auto; border-radius: .35rem; background: white; }
.empty-frame { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-frame h1 { max-width: 16ch; }
.week-frame { display: flex; flex-direction: column; justify-content: center; gap: clamp(.45rem, 2vh, 1.5rem); }
.week-heading { display: flex; align-items: end; justify-content: space-between; gap: .75rem; }
.week-heading h1 { margin: 0; }
.week-heading .screen-kicker { margin-bottom: .4em; }
.week-tools { display: flex; align-items: center; gap: .8rem; }
.week-qr { margin: 0; }
.week-qr img { width: clamp(4rem, min(10vw, 18vh), 13rem); }
.week-count { color: var(--accent-light); white-space: nowrap; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(.25rem, .85vw, 1rem); }
.week-day { min-width: 0; min-height: min(52vh, 36rem); padding: clamp(.35rem, .85vw, 1rem); border: 1px solid #ffffff35; border-radius: .55rem; background: #ffffff0e; }
.week-today { border-top: .22rem solid var(--accent); }
.week-day h2 { font-size: clamp(.9rem, 1.55vw, 1.95rem); text-transform: capitalize; }
.week-date { margin-top: .15rem; color: var(--accent-light); font-size: clamp(.74rem, 1.1vw, 1.4rem); }
.week-events { display: grid; gap: clamp(.2rem, .8vh, .7rem); list-style: none; padding: 0; margin: .55rem 0 0; }
.week-event { padding: clamp(.25rem, .6vw, .7rem); border-radius: .35rem; background: #ffffff16; }
.week-time, .week-title, .week-location { display: block; overflow-wrap: anywhere; }
.week-time { color: var(--accent-light); font-size: clamp(.65rem, .95vw, 1.15rem); font-weight: 750; }
.week-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: clamp(.75rem, min(1.22vw, 2.55vh), 1.6rem); line-height: 1.16; }
.week-location { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: .15rem; color: #d9e8f4; font-size: clamp(.63rem, .87vw, 1.1rem); }
@media (max-width: 700px) {
  .week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .week-day { min-height: 0; }
  .week-frame { justify-content: start; }
  .week-qr span { display: none; }
}
@media (max-height: 560px) {
  .week-day { min-height: 0; }
  .week-location { display: none; }
}
.noscript { position: absolute; top: 3.5rem; left: 1rem; padding: .5rem; background: var(--brand-deep); }
@media (max-aspect-ratio: 1/1) {
  .slide { flex-direction: column; align-items: stretch; justify-content: center; }
  .slide .poster { flex: 1 1 44%; min-height: 0; }
  .slide-text { flex: 0 1 auto; }
  .screen-name { display: none; }
}
@media (max-height: 450px) { .slide h1 { -webkit-line-clamp: 2; } .slide p:not(.when) { -webkit-line-clamp: 1; } }