:root{
  --cyan:#39e1ff;
  --cyan-soft:#bdf5ff;
  --cyan-deep:#087aa0;
  --gold:#f0c86d;
  --gold-hot:#ffe49a;
  --white:#edf8ff;
  --quiet:#72b9c8;
  --panel:#03111e;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02070e;color:var(--white);font-family:Rajdhani,'Segoe UI',sans-serif}
#viewport{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 45%,#0c1825 0%,#030810 75%)}
#hud{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:#030a12;isolation:isolate}
.hud-shell{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;user-select:none;pointer-events:none;z-index:0}
.zone{position:absolute;z-index:4;overflow:hidden}

@font-face{
  font-family:'ScienceWeise';
  src:url('../assets/fonts/ScienceWeiseBold-Bold.otf') format('opentype');
  font-display:swap;
}

/* Header */
.brand-zone{left:62px;top:45px;width:515px;height:82px}
.brand-kicker{font-family:Orbitron,sans-serif;font-size:12px;font-weight:700;letter-spacing:2.2px;color:#83c9d9;line-height:1;margin-bottom:8px}
.brand-name{font-family:'ScienceWeise',Orbitron,sans-serif;font-size:42px;line-height:1;color:var(--gold);letter-spacing:1px;white-space:nowrap;font-feature-settings:"liga" 0,"calt" 0;font-variant-ligatures:none;text-shadow:0 0 10px rgba(240,200,109,.14)}
.brand-name span{color:var(--cyan)}
.date-zone{left:614px;top:46px;width:705px;height:75px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:47px;line-height:1;color:#f0f9ff;white-space:nowrap;text-shadow:0 0 10px rgba(86,221,255,.16)}
.clock-zone{left:1395px;top:46px;width:430px;height:86px;text-align:right}
.clock{font-family:'Share Tech Mono',Consolas,monospace;font-size:54px;line-height:1;color:#c8f7ff;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.5px;text-shadow:0 0 11px rgba(57,225,255,.18)}
.clock-kicker{margin-top:7px;font-family:Orbitron,sans-serif;color:var(--cyan);font-size:11px;font-weight:700;letter-spacing:1.7px;white-space:nowrap}

/* Calendar is intentionally fully code-rendered. The opaque surface hides the old baked calendar. */
.calendar-zone{left:39px;top:166px;width:516px;height:342px;overflow:visible}
.calendar-surface{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,12,22,.99),rgba(4,16,28,.985));border:1px solid rgba(58,219,255,.42);box-shadow:inset 0 0 25px rgba(19,111,145,.13),0 0 12px rgba(16,154,199,.06);overflow:hidden}
.calendar-surface::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(56,220,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(56,220,255,.025) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.calendar-month{position:relative;z-index:2;height:58px;display:flex;align-items:center;justify-content:center;font-family:'ScienceWeise',Orbitron,sans-serif;font-size:42px;color:#dff8ff;letter-spacing:1px;border-bottom:1px solid rgba(57,225,255,.52);font-feature-settings:"liga" 0,"calt" 0;font-variant-ligatures:none}
.calendar-weekdays,.calendar-days{position:relative;z-index:2;display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.calendar-weekdays{height:38px;align-items:center;color:#9ff4ff;font-family:Orbitron,sans-serif;font-size:18px;font-weight:800;border-bottom:1px solid rgba(57,225,255,.58)}
.calendar-weekdays span:not(:last-child){border-right:1px solid rgba(57,225,255,.42)}
.calendar-days{height:246px;grid-template-rows:repeat(6,41px)}
.cal-cell{position:relative;display:grid;place-items:center;font-family:'Share Tech Mono',Consolas,monospace;font-size:26px;color:#edf8ff;font-variant-numeric:tabular-nums;border-right:1px solid rgba(57,225,255,.38);border-bottom:1px solid rgba(57,225,255,.38);text-shadow:0 0 7px rgba(125,226,255,.12)}
.cal-cell:nth-child(7n){border-right:0}
.cal-cell:nth-last-child(-n+7){border-bottom:0}
.cal-cell.empty{color:transparent}
.cal-cell.weekend:not(.empty){color:#9cb7c8}
.cal-cell.today{background:linear-gradient(180deg,rgba(171,244,255,.97),rgba(108,226,244,.91));color:#02121f;font-weight:700;text-shadow:none;box-shadow:inset 0 0 0 1px #d8ffff,0 0 18px rgba(87,226,255,.54)}
.cal-cell.today::after{content:"";position:absolute;inset:3px;border:1px solid rgba(2,32,48,.36);pointer-events:none}

/* Expanded left-column mode area */
.mode-zone{left:137px;top:716px;width:424px;height:84px;padding-top:0}
.mode-code-label{display:none}
.mode-main{margin-top:27px;font-family:'ScienceWeise',Orbitron,sans-serif;font-size:34px;line-height:1;color:#f2fbff;text-transform:uppercase;white-space:nowrap;font-feature-settings:"liga" 0,"calt" 0;font-variant-ligatures:none;text-shadow:0 0 10px rgba(57,225,255,.12)}
.mode-sub{margin-top:6px;font-family:Orbitron,sans-serif;font-size:13px;line-height:1;color:#6fe9ff;text-transform:uppercase;letter-spacing:1.2px;white-space:nowrap}
.mode-sub:empty{display:none}

/* Central dynamic copy uses the blank fields in the illustrated shell. */
.directive-zone{left:620px;top:207px;width:680px;height:145px}
.lesson-title{margin:0;font-family:'ScienceWeise',Orbitron,sans-serif;font-size:50px;line-height:1.03;letter-spacing:.2px;text-transform:uppercase;color:var(--gold);max-width:670px;max-height:138px;overflow:hidden;font-feature-settings:"liga" 0,"calt" 0;font-variant-ligatures:none;text-shadow:0 0 11px rgba(240,200,109,.09)}
.objective-zone{left:622px;top:466px;width:650px;height:282px;padding-top:0}
.objective-text{width:620px;font-family:Rajdhani,'Segoe UI',sans-serif;font-size:45px;line-height:1.08;font-weight:600;color:#eef9ff;overflow-wrap:break-word;text-shadow:0 0 8px rgba(65,185,225,.08)}
.objective-text::before{content:'› ';color:var(--cyan);font-weight:700}
.objective-footer{position:absolute;left:2px;bottom:2px;font-family:Orbitron,sans-serif;font-size:10px;color:#3cb7cf;letter-spacing:1.3px;white-space:nowrap;opacity:.82}

/* Dynamic right-column panels. The surfaces hide baked placeholder graphics while preserving outer frame geometry. */
.counter-zone{width:304px;overflow:hidden}
.counter-surface{position:absolute;inset:0;background:radial-gradient(circle at 28% 60%,rgba(10,43,62,.68),rgba(2,12,21,.97) 62%),linear-gradient(180deg,rgba(2,12,22,.97),rgba(3,14,25,.99));border:1px solid rgba(45,202,239,.22);box-shadow:inset 0 0 28px rgba(14,97,128,.13)}
.counter-surface::after{content:"";position:absolute;left:16px;right:16px;top:50px;height:1px;background:linear-gradient(90deg,rgba(57,225,255,.7),rgba(57,225,255,.12),transparent)}
.full-zone{left:1572px;top:166px;height:194px}
.marking-zone{left:1572px;top:397px;height:190px}
.seniors-zone{left:1572px;top:618px;height:164px}
.counter-label{position:absolute;left:19px;top:15px;z-index:2;font-family:'ScienceWeise',Orbitron,sans-serif;font-size:17px;line-height:1;color:var(--gold);text-transform:uppercase;white-space:nowrap;font-feature-settings:"liga" 0,"calt" 0;font-variant-ligatures:none}
.count-number{position:absolute;z-index:3;right:19px;bottom:29px;font-family:'ScienceWeise',Orbitron,sans-serif;font-size:75px;line-height:.92;color:var(--gold-hot);min-width:105px;text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"liga" 0,"calt" 0;font-variant-ligatures:none;text-shadow:0 0 12px rgba(240,200,109,.16)}
.count-sub{position:absolute;z-index:3;right:20px;bottom:13px;font-family:Orbitron,sans-serif;font-size:9px;line-height:1;color:#72dced;letter-spacing:1.1px;text-transform:uppercase;white-space:nowrap}
.radar-svg{position:absolute;z-index:2;left:11px;bottom:13px;width:119px;height:119px;opacity:.66;overflow:visible}
.radar-svg circle,.radar-svg path{fill:none;stroke:rgba(54,220,255,.5);stroke-width:1}
.radar-svg circle:nth-child(2){stroke-dasharray:4 5}.radar-svg circle:nth-child(3){stroke-dasharray:2 5}
.counter-radar-sweep{position:absolute;z-index:2;left:22px;bottom:24px;width:97px;height:97px;border-radius:50%;background:conic-gradient(from 10deg,transparent 0deg,transparent 304deg,rgba(57,225,255,.03) 315deg,rgba(57,225,255,.32) 350deg,transparent 360deg);mix-blend-mode:screen;animation:radarSpin 8s linear infinite}
.quarter-badge{position:absolute;z-index:3;left:19px;top:57px;font-family:'Share Tech Mono',monospace;font-size:19px;color:#93f0ff;letter-spacing:1px}
.marking-zone .count-number{right:20px;top:53px;bottom:auto;font-size:65px}
.marking-zone .count-sub{right:20px;top:115px;bottom:auto}
.quarter-graph{position:absolute;z-index:2;left:12px;right:12px;bottom:8px;width:280px;height:70px;overflow:visible;opacity:.9}
.graph-grid path{stroke:rgba(57,225,255,.10);stroke-width:1;vector-effect:non-scaling-stroke}
.graph-trace{fill:none;vector-effect:non-scaling-stroke}
.graph-trace.ghost{stroke:rgba(53,199,236,.18);stroke-width:4;filter:drop-shadow(0 0 7px rgba(57,225,255,.25))}
.graph-trace.live{stroke:#43dcff;stroke-width:1.6;stroke-dasharray:12 7;animation:graphFlow 7s linear infinite;filter:drop-shadow(0 0 4px rgba(57,225,255,.38))}
.quarter-progress-line{stroke:rgba(255,224,128,.78);stroke-width:1.2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(255,224,128,.34))}
.senior-top-mask{position:absolute;left:0;right:0;top:0;height:94px;background:linear-gradient(180deg,rgba(2,12,22,.985),rgba(2,12,22,.92) 76%,rgba(2,12,22,0));z-index:1}
.seniors-zone .counter-label{z-index:3}
.seniors-zone .count-number{top:45px;right:18px;bottom:auto;font-size:66px}
.seniors-zone .count-sub{top:112px;right:18px;bottom:auto}

/* Communication area */
.communication-zone{left:236px;top:860px;width:1080px;height:70px}
.comm-text{font-family:Rajdhani,'Segoe UI',sans-serif;font-weight:600;font-size:29px;line-height:1.08;color:#f3f8fb;white-space:normal;overflow-wrap:break-word;text-shadow:0 0 7px rgba(66,182,219,.08)}

/* System status, countdown timer and progress are entirely live code. */
.status-zone{left:132px;top:965px;width:1290px;height:89px;overflow:visible}
.status-surface{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,11,20,.985),rgba(2,13,23,.985));box-shadow:inset 0 0 30px rgba(9,78,104,.11)}
.status-copy{position:absolute;left:15px;top:15px;width:300px}
.status-title{font-family:'ScienceWeise',Orbitron,sans-serif;font-size:21px;line-height:1;color:var(--gold);text-transform:uppercase;white-space:nowrap;font-feature-settings:"liga" 0,"calt" 0;font-variant-ligatures:none}
.status-title span{color:var(--cyan);font-family:Orbitron,sans-serif;font-size:15px}
.status-subline{margin-top:10px;font-family:Orbitron,sans-serif;font-size:9px;line-height:1.15;color:#59cfe5;letter-spacing:.75px;white-space:nowrap}
.timer-stack{position:absolute;left:320px;top:10px;width:160px;text-align:right}
.timer-value{font-family:'Share Tech Mono',Consolas,monospace;font-size:42px;line-height:1;color:var(--gold-hot);white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 0 9px rgba(240,200,109,.12)}
.timer-label{margin-top:4px;font-family:Orbitron,sans-serif;font-size:8px;color:#64d9eb;letter-spacing:1.05px;text-transform:uppercase;white-space:nowrap}
.progress-wrap{position:absolute;left:500px;top:19px;width:670px;height:50px;overflow:hidden}
.progress-svg{position:absolute;inset:0;width:100%;height:100%}
.progress-track{fill:rgba(0,14,25,.9);stroke:rgba(70,223,255,.74);stroke-width:1}
.progress-bar{fill:url(#progressGold);filter:drop-shadow(0 0 6px rgba(240,200,109,.25));transition:width .7s linear}
.progress-ticks path{stroke:rgba(4,22,31,.42);stroke-width:1;vector-effect:non-scaling-stroke}
.progress-scan{position:absolute;top:10px;bottom:10px;width:84px;left:-120px;background:linear-gradient(90deg,transparent,rgba(255,243,188,.18),transparent);transform:skewX(-18deg);animation:progressScan 8s ease-in-out infinite;pointer-events:none}
.percent-zone{position:absolute;left:1180px;top:21px;width:106px;text-align:right;font-family:Orbitron,sans-serif;font-size:27px;font-weight:800;line-height:1;color:#b5f5ff;font-variant-numeric:tabular-nums}

/* Ambient motion */
.ambient-light-sweep{position:absolute;z-index:1;top:-160px;left:-390px;width:340px;height:1450px;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(61,220,255,.045),rgba(255,221,126,.035),transparent);filter:blur(1px);mix-blend-mode:screen;pointer-events:none;animation:lightSweep 19s ease-in-out infinite}
.top-radar{position:absolute;z-index:2;left:1798px;top:38px;width:92px;height:92px;border-radius:50%;overflow:hidden;opacity:.34;pointer-events:none}
.top-radar span{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 306deg,rgba(57,225,255,.05) 316deg,rgba(57,225,255,.55) 354deg,transparent 360deg);animation:radarSpin 10s linear infinite}
.planet-orbit{position:absolute;z-index:2;left:81px;top:547px;width:332px;height:130px;border:1px solid rgba(240,185,68,.23);border-radius:50%;transform:rotate(-8deg);pointer-events:none;animation:orbitTilt 18s linear infinite}
.planet-orbit span{position:absolute;width:7px;height:7px;border-radius:50%;right:26px;top:12px;background:#ffe17d;box-shadow:0 0 9px rgba(255,221,126,.82)}
.molecule-pulses{position:absolute;z-index:2;left:1262px;top:430px;width:230px;height:170px;pointer-events:none}
.molecule-pulses i{position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;background:#67eaff;box-shadow:0 0 7px rgba(73,220,255,.75);animation:moleculePulse 4.2s ease-in-out infinite;animation-delay:var(--delay)}

.data-status{position:absolute;z-index:8;right:48px;bottom:8px;font-family:Orbitron,sans-serif;font-size:9px;line-height:1;color:#65cfc9;letter-spacing:.9px;text-transform:uppercase;white-space:nowrap;opacity:.78}
.data-status.warning{color:var(--gold)}
.preview-badge{position:absolute;z-index:9;left:50%;bottom:8px;transform:translateX(-50%);font:10px Orbitron,sans-serif;color:#f0c86d;letter-spacing:1.2px;opacity:.88;white-space:nowrap}
.value-flash{animation:valueFlash .55s ease-out}

@keyframes radarSpin{to{transform:rotate(360deg)}}
@keyframes graphFlow{to{stroke-dashoffset:-38}}
@keyframes progressScan{0%,20%{left:-120px;opacity:0}35%{opacity:1}55%{left:700px;opacity:.55}70%,100%{left:700px;opacity:0}}
@keyframes lightSweep{0%,12%{left:-390px;opacity:0}25%{opacity:.9}58%{left:2020px;opacity:.65}72%,100%{left:2020px;opacity:0}}
@keyframes orbitTilt{0%{transform:rotate(-8deg)}100%{transform:rotate(352deg)}}
@keyframes moleculePulse{0%,78%,100%{opacity:.25;transform:scale(.72)}84%{opacity:1;transform:scale(1.34)}91%{opacity:.52;transform:scale(.9)}}
@keyframes valueFlash{0%{filter:brightness(1.8);text-shadow:0 0 20px rgba(255,232,158,.72)}100%{filter:none}}

/* Optional calibration guide: ?preview=1&guides=1 */
.guides .zone{outline:1px dashed rgba(255,0,180,.45);outline-offset:-1px}
.guides .calendar-surface,.guides .counter-surface,.guides .status-surface{outline:1px solid rgba(255,220,0,.35)}

@media (prefers-reduced-motion:reduce){
  .ambient-light-sweep,.top-radar span,.planet-orbit,.molecule-pulses i,.counter-radar-sweep,.graph-trace.live,.progress-scan{animation:none!important}
  .progress-bar{transition:none}
}