* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #fff; overflow: hidden; cursor: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body.pointer { cursor: default; }
[hidden] { display: none !important; }

#stage { position: fixed; left: 50%; top: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); overflow: hidden; background: #000; }
#stage.rot90 { width: 100vh; height: 100vw; transform: translate(-50%, -50%) rotate(90deg); }
#stage.rot180 { transform: translate(-50%, -50%) rotate(180deg); }
#stage.rot270 { width: 100vh; height: 100vw; transform: translate(-50%, -50%) rotate(270deg); }

#layers, .layer { position: absolute; inset: 0; }
.zone { position: absolute; overflow: hidden; container-type: size; }
.layer { opacity: 0; will-change: opacity, transform; }
.layer.on { opacity: 1; z-index: 2; }
.layer.fade { transition: opacity var(--ms, 600ms) ease; }
.layer.slide { transition: transform var(--ms, 600ms) ease, opacity 0s; transform: translateX(100%); opacity: 1; }
.layer.slide.on { transform: translateX(0); }
.layer.slide.out { transform: translateX(-100%); }
.layer img, .layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.layer .cover { object-fit: cover; }
.layer .stretch { object-fit: fill; }
.layer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }

.text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 6vmin 8vmin;
  background-size: cover; background-position: center; }
.text { padding: 6cqmin 8cqmin; }
.text h1 { margin: 0 0 0.35em; font-size: calc(9cqmin * var(--size, 1)); line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; }
.text p { margin: 0; font-size: calc(4.6cqmin * var(--size, 1)); line-height: 1.3; white-space: pre-wrap; opacity: 0.92; }
.text.left { text-align: left; } .text.center { text-align: center; } .text.right { text-align: right; }
.text .shade { position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
.text > *:not(.shade) { position: relative; }

#clock { position: absolute; z-index: 10; padding: 0.35em 0.6em; font-size: 4vmin; font-weight: 600; font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,0.55); border-radius: 0.3em; margin: 2.5vmin; }
#clock.top-left { top: 0; left: 0; } #clock.top-right { top: 0; right: 0; }
#clock.bottom-left { bottom: 0; left: 0; } #clock.bottom-right { bottom: 0; right: 0; }
#clock.withTicker.bottom-left, #clock.withTicker.bottom-right { bottom: 8vmin; }

#ticker { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: 7vmin; overflow: hidden; display: flex; align-items: center; }
#tickerText { white-space: nowrap; font-size: 3.6vmin; font-weight: 500; padding-left: 100%; will-change: transform; }

#black { position: absolute; inset: 0; z-index: 50; background: #000; }

#pairing { position: fixed; inset: 0; z-index: 100; background: radial-gradient(ellipse at 50% 30%, #1b2330 0%, #07090c 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 5vmin; }
#pairing .brand { position: absolute; top: 5vmin; left: 6vmin; font-weight: 700; font-size: 2.6vmin; letter-spacing: 0.04em; opacity: 0.8; }
#pairing .label { font-size: 3.4vmin; opacity: 0.75; margin-bottom: 2vmin; }
#code { font-size: 17vmin; font-weight: 800; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; line-height: 1;
  padding: 2.5vmin 5vmin; border-radius: 3vmin; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
#pairing .hint { margin-top: 4vmin; font-size: 3vmin; opacity: 0.85; }
.small { font-size: 2.2vmin; margin-top: 2vmin; }
.dim { opacity: 0.55; }

#identify { position: fixed; inset: 0; z-index: 200; background: #0a84ff; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; font-size: 11vmin; font-weight: 800; }
#identify small { display: block; font-size: 3vmin; font-weight: 500; margin-top: 2vmin; opacity: 0.9; }

#toast { position: fixed; z-index: 150; left: 50%; bottom: 4vmin; transform: translateX(-50%); background: rgba(20,20,22,0.92);
  padding: 1.2vmin 2.4vmin; border-radius: 1.2vmin; font-size: 2.2vmin; }

#info { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; cursor: default; }
.infoBox { background: #16181c; border: 1px solid #2a2d33; border-radius: 14px; padding: 22px 26px; min-width: min(460px, 92vw); font-size: 14px; }
.infoBox h2 { margin: 0 0 12px; font-size: 18px; }
.infoBox dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 18px; }
.infoBox dt { opacity: 0.6; } .infoBox dd { margin: 0; word-break: break-all; }
.infoBox .row { display: flex; gap: 10px; justify-content: flex-end; }
.infoBox button { font: inherit; padding: 8px 16px; border-radius: 8px; border: 1px solid #3a3d44; background: #23262c; color: #fff; cursor: pointer; }
.infoBox button:focus { outline: 2px solid #0a84ff; }
.infoBox button.danger { border-color: #6b2a2a; background: #3a1a1a; }

/* widgets: sized to their zone (container query units) */
.widget { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 5cqmin; gap: 2cqmin; overflow: hidden; }
.widget .dim { opacity: .6; font-size: 6cqmin; }
.wHead { font-size: 7cqmin; font-weight: 700; opacity: .9; align-self: stretch; text-align: left; }
.clockTime { font-size: min(26cqw, 60cqh); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.02em; }
.clockDate, .clockLabel { font-size: min(7cqw, 12cqh); opacity: .8; }
.clockW svg.analog { width: 80cqmin; height: 80cqmin; flex: none; }
.cdTitle { font-size: min(9cqw, 14cqh); font-weight: 700; }
.cdRow { display: flex; gap: 3cqw; }
.cdCell { display: flex; flex-direction: column; align-items: center; }
.cdCell b { font-size: min(15cqw, 40cqh); font-variant-numeric: tabular-nums; line-height: 1; }
.cdCell span { font-size: min(4cqw, 8cqh); opacity: .7; text-transform: uppercase; letter-spacing: .08em; }
.cdEnd { font-size: min(12cqw, 30cqh); font-weight: 700; }
.weatherW .wPlace { font-size: min(7cqw, 10cqh); font-weight: 600; opacity: .85; }
.wNow { display: flex; align-items: center; gap: 3cqw; }
.wIcon svg { width: min(22cqw, 30cqh); height: min(22cqw, 30cqh); }
.wTemp { font-size: min(20cqw, 28cqh); font-weight: 700; }
.wTxt { font-size: min(6cqw, 8cqh); opacity: .8; }
.wDays { display: flex; gap: 2cqw; margin-top: 2cqh; }
.wDays > div { display: flex; flex-direction: column; align-items: center; font-size: min(4.5cqw, 6cqh); gap: .3em; }
.wDays svg { width: min(9cqw, 11cqh); height: min(9cqw, 11cqh); }
.wDays i { opacity: .6; font-style: normal; }
.rssW, .agendaW { align-items: stretch; justify-content: flex-start; text-align: left; }
.rssList, .agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.5cqmin; overflow: hidden; }
.rssList li b { display: block; font-size: 5.2cqmin; line-height: 1.2; }
.rssList li span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 3.6cqmin; opacity: .75; margin-top: .3em; }
.rssOne { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.rssOne h2 { font-size: 8cqmin; margin: 0 0 .4em; line-height: 1.15; }
.rssOne p { font-size: 4.6cqmin; margin: 0; opacity: .85; }
.agenda li { display: grid; grid-template-columns: auto 1fr; column-gap: 3cqmin; font-size: 4.6cqmin; padding: 1.2cqmin 2cqmin; border-radius: 1.5cqmin; }
.agenda li time { opacity: .75; font-variant-numeric: tabular-nums; }
.agenda li span { grid-column: 2; font-size: .8em; opacity: .7; }
.agenda li.now { background: rgba(255,255,255,.12); }
.agenda li.aDay { display: block; font-weight: 700; opacity: .8; padding-bottom: 0; }
.widget.qr img { width: min(80cqw, 75cqh); height: min(80cqw, 75cqh); object-fit: contain; image-rendering: pixelated; }
.widget.qr .caption { font-size: min(7cqw, 9cqh); font-weight: 600; }

/* emergency takeover: above everything */
#emergency { position: absolute; inset: 0; z-index: 90; background-color: var(--bg, #c40000); background-size: cover; background-position: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8vmin; gap: 3vmin; }
#emergency.flash { animation: eflash 1s steps(1) infinite; }
@keyframes eflash { 50% { background-color: color-mix(in srgb, var(--bg, #c40000) 55%, #000); } }
#emergency .eTitle { font-size: 13vmin; font-weight: 900; line-height: 1; letter-spacing: -0.01em; text-shadow: 0 0.04em 0.2em rgba(0,0,0,.35); }
#emergency .eBody { font-size: 5.5vmin; font-weight: 600; max-width: 85%; text-shadow: 0 0.04em 0.2em rgba(0,0,0,.35); }