@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap");
/* Magic Hour: the live office as an enchanted diorama at night */
:root{--night0:#050B2E;--night1:#0B1A4A;--night2:#13296B;--royal:#1F3FA6;--glow:#3D7BFF;--sky:#6FC3FF;--gold:#FFD36E;--amber:#FFB13B;--pink:#FF6FAE;--cream:#FFF7E8;--text:#EAF0FF;--muted:#A9B6E0;--glass:rgba(255,255,255,.06);--glass-b:rgba(255,255,255,.13);
  --frost:rgba(11,26,74,.72);--edge:rgba(255,255,255,.13);--lift:0 1px 0 rgba(255,255,255,.06) inset,0 18px 44px -16px rgba(0,0,0,.6);--hud-h:84px;
  --fh:"Fredoka",ui-rounded,"Nunito",system-ui,sans-serif;--fb:"Nunito",system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--night0);color:var(--text);font:14px/1.45 var(--fb)}
#scene{position:fixed;inset:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Ccircle cx='64' cy='40' r='28' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='30' fill='%23FFF3C9' mask='url(%23m)'/%3E%3C/svg%3E") 4.2% 23%/92px auto no-repeat,
    radial-gradient(circle at 5% 27%,rgba(255,231,168,.30) 0 40px,rgba(255,231,168,.12) 41px 90px,rgba(255,231,168,0) 160px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cpath fill='%2313296B' d='M0 118C220 52 420 70 640 112S1040 52 1250 82C1350 96 1410 108 1440 102V260H0Z'/%3E%3Cpath fill='%230D1E58' d='M0 168C210 120 390 146 580 178S980 128 1190 150C1310 162 1390 174 1440 166V260H0Z'/%3E%3Cpath fill='%23081340' d='M0 214C260 184 520 198 770 222S1220 198 1440 210V260H0Z'/%3E%3C/svg%3E") center bottom/100% 30vh no-repeat,
    radial-gradient(ellipse 60% 50% at 55% 55%,rgba(61,123,255,.28),rgba(61,123,255,0) 70%),
    radial-gradient(ellipse 50% 40% at 85% 10%,rgba(31,63,166,.55),rgba(31,63,166,0) 70%),
    linear-gradient(var(--night0),var(--night1) 55%,#152f7a)}
/* the starfield twinkles on its own layer (opacity only, so the 3D canvas never repaints for it) */
#scene::before,#scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(1.4px 1.4px at 12% 14%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 38%,#fff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 31% 8%,#FFE7A8 50%,transparent 51%),radial-gradient(1px 1px at 44% 22%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 58% 6%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 67% 30%,#fff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 78% 16%,#FFE7A8 50%,transparent 51%),radial-gradient(1px 1px at 88% 34%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 95% 9%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 8% 52%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 93% 52%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 3% 70%,#fff 50%,transparent 51%);
  background-size:100% 100%;opacity:.85}
#scene::after{background-image:radial-gradient(1px 1px at 17% 26%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 38% 15%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 51% 33%,#FFE7A8 50%,transparent 51%),radial-gradient(1.2px 1.2px at 63% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 73% 4%,#fff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 84% 26%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 27% 4%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 97% 42%,#FFE7A8 50%,transparent 51%),radial-gradient(1px 1px at 6% 40%,#fff 50%,transparent 51%);
  animation:twinkle 5.5s ease-in-out infinite alternate}
#scene::before{animation:twinkle 7.5s ease-in-out -3s infinite alternate-reverse}
@keyframes twinkle{0%{opacity:.25}100%{opacity:.95}}
#scene canvas{display:block;position:relative}
a{color:inherit}
button{font:inherit}

/* top bar: frosted navy glass */
.hud-top{position:fixed;top:12px;left:12px;right:12px;display:flex;align-items:center;gap:14px;padding:9px 12px 9px 14px;background:var(--frost);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--edge);border-radius:24px;box-shadow:var(--lift);z-index:5;flex-wrap:wrap}
.brand{display:flex;gap:9px;align-items:center;font:600 21px/1 var(--fh);letter-spacing:-.01em;text-decoration:none;color:#fff;white-space:nowrap}.brand svg{width:32px;height:32px;flex:none;filter:drop-shadow(0 0 8px rgba(255,211,110,.45))}
.sub{color:var(--muted);font:700 12.5px/1.25 var(--fb);max-width:170px}
.kp{display:flex;gap:6px}.kp div{background:var(--glass);border:1px solid var(--glass-b);border-radius:14px;padding:4px 11px 5px;text-align:center;min-width:70px}.kp b{display:block;font:700 18px/1.15 var(--fh);color:var(--gold);text-shadow:0 0 14px rgba(255,211,110,.35)}.kp span{display:block;font:700 10.5px/1.2 var(--fb);color:var(--muted);white-space:nowrap}
.right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);font:800 13px/1.2 var(--fb);color:#fff;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s ease,box-shadow .2s ease,background .2s,border-color .2s}
a.pill:hover,button.pill:hover{transform:translateY(-1px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);box-shadow:0 8px 22px -8px rgba(61,123,255,.55)}a.pill:active,button.pill:active{transform:translateY(1px)}
.pill.solid{background:linear-gradient(135deg,var(--gold),var(--amber));border-color:transparent;color:#0B1A4A;box-shadow:0 6px 18px -6px rgba(255,177,59,.6)}.pill.solid:hover{background:linear-gradient(135deg,#FFE08F,var(--amber));border-color:transparent;box-shadow:0 0 0 3px rgba(255,211,110,.22),0 10px 28px -6px rgba(255,177,59,.75)}
.btnp{background:rgba(61,123,255,.22);border-color:rgba(111,195,255,.38)}button.btnp:hover{background:rgba(61,123,255,.34);border-color:rgba(111,195,255,.6)}
.pill:focus-visible,.lbl:focus-visible,.card-desk button:focus-visible,.mk:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#clock{cursor:default;background:rgba(61,214,160,.12);border-color:rgba(61,214,160,.28);color:var(--text);font-weight:700}
#clock:hover{transform:none;box-shadow:none;background:rgba(61,214,160,.12);border-color:rgba(61,214,160,.28)}
#clock .dot{width:9px;height:9px;border-radius:50%;background:#3DD6A0;box-shadow:0 0 0 0 rgba(61,214,160,.5);animation:beat 2s ease-out infinite;flex:none}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(61,214,160,.6)}80%,100%{box-shadow:0 0 0 7px rgba(61,214,160,0)}}

/* live feed: glass cards on frosted navy */
.feed{position:fixed;right:12px;top:calc(var(--hud-h) + 12px);bottom:12px;width:340px;background:var(--frost);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--edge);border-radius:24px;padding:16px 14px 14px;z-index:4;display:flex;flex-direction:column;box-shadow:var(--lift)}
.feed h4{margin:0 2px 12px;font:600 18px/1.2 var(--fh);color:#fff;display:flex;align-items:center;gap:9px}
.feed h4::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(255,211,110,.18),0 0 12px rgba(255,211,110,.8);flex:none}
#events{overflow:auto;flex:1;display:flex;flex-direction:column;gap:8px;padding:2px 4px 4px 2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.ev{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-b);color:var(--text);font-size:13.5px;animation:in .5s ease}
.ev i{font-style:normal;font-size:16px;line-height:1.35;flex:none}.ev b{color:#fff;font-weight:800}.ev small{display:block;color:var(--muted);font-size:11.5px;font-weight:700;margin-top:2px}
.ev.replay{background:rgba(255,211,110,.08);border-color:rgba(255,211,110,.28);box-shadow:inset 3px 0 0 var(--gold)}
@keyframes in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* books in production */
.making{position:fixed;left:12px;bottom:12px;display:flex;gap:10px;z-index:4;max-width:calc(100vw - 380px);flex-wrap:wrap}
.mk{background:var(--frost);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--edge);border-radius:18px;padding:10px 12px;display:flex;gap:11px;align-items:center;min-width:240px;text-decoration:none;box-shadow:var(--lift);transition:transform .2s,box-shadow .2s}
.mk:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 0 2px rgba(255,255,255,.75),0 18px 50px rgba(61,123,255,.35)}
.mk .c{width:46px;height:46px;border-radius:12px;flex:none;background:linear-gradient(145deg,var(--royal),var(--night2)) ;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 0 16px -4px rgba(255,211,110,.5);position:relative}
.mk .c::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M9 15c5-2 10-2 14 1v17c-4-3-9-3-14-1z' fill='%23FFF7E8' stroke='%23FFD36E' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M37 15c-5-2-10-2-14 1v17c4-3 9-3 14-1z' fill='%23FFF7E8' stroke='%23FFD36E' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='23' cy='9' r='3.5' fill='%23FFD36E'/%3E%3C/svg%3E") center/100% no-repeat}
.mk b{display:block;color:#fff;font:600 15px/1.2 var(--fh)}.mk span{font-size:12px;font-weight:700;color:var(--muted)}
.bar{height:6px;border-radius:6px;background:rgba(255,255,255,.1);margin-top:7px;overflow:hidden}.bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--amber));box-shadow:0 0 10px rgba(255,211,110,.6);transition:width .6s}

/* announcements */
.banner{position:fixed;left:50%;top:calc(var(--hud-h) + 18px);transform:translateX(-50%) translateY(-20px);opacity:0;transition:all .5s;background:linear-gradient(135deg,var(--gold),var(--amber));color:#0B1A4A;font:600 18px/1.3 var(--fh);padding:12px 24px;border-radius:22px;z-index:6;box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 0 40px -6px rgba(255,211,110,.7),0 22px 40px -14px rgba(0,0,0,.6);pointer-events:none;text-align:center;max-width:min(80vw,640px)}
.banner.show{opacity:1;transform:translateX(-50%)}
.hint{position:fixed;left:12px;top:calc(var(--hud-h) + 12px);font:700 12px var(--fb);color:var(--text);z-index:3;background:var(--frost);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--edge);padding:6px 12px;border-radius:999px}

/* desk name plates (CSS2D labels): glass pills with a coloured dot */
.lbl{transform:translateY(-6px);background:rgba(11,26,74,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--glass-b);color:#fff;border-radius:16px;padding:5px 11px 5px;font:800 12.5px/1.2 var(--fb);white-space:nowrap;text-align:center;cursor:pointer;pointer-events:auto;box-shadow:0 10px 22px -10px rgba(0,0,0,.7);transition:box-shadow .3s,border-color .3s}
.lbl:hover{border-color:rgba(255,255,255,.55)}
.lbl small{display:block;font:700 10.5px/1.25 var(--fb);color:var(--muted)}
.lbl .nm{display:inline-flex;align-items:center;gap:6px}.lbl .dt{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 8px rgba(255,255,255,.4)}.lbl .ic{font-size:12px;line-height:1}
.lbl.on{border-color:rgba(255,211,110,.9);box-shadow:0 0 0 2px rgba(255,211,110,.55),0 0 22px rgba(255,211,110,.6),0 10px 22px -8px rgba(0,0,0,.6);animation:glowon 2.2s ease-in-out infinite}
.lbl.on .dt{animation:dot 1.4s ease-in-out infinite}
@keyframes dot{50%{transform:scale(1.3)}}
@keyframes glowon{50%{box-shadow:0 0 0 3px rgba(255,211,110,.75),0 0 30px rgba(255,211,110,.85),0 10px 22px -8px rgba(0,0,0,.6)}}

/* speech bubbles */
.bub{background:#fff;color:#0B1A4A;border-radius:16px;padding:6px 11px;font:700 12.5px/1.3 var(--fb);max-width:200px;white-space:normal;text-align:center;box-shadow:0 0 18px -4px rgba(255,255,255,.45),0 10px 22px -8px rgba(0,0,0,.6);opacity:0;transition:opacity .3s;position:relative}
.bub.show{opacity:1}
.bub:after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-top-color:#fff;border-bottom:0}

/* desk card */
.card-desk{position:fixed;left:12px;top:calc(var(--hud-h) + 52px);width:310px;background:var(--frost);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--edge);border-radius:22px;padding:18px 18px 16px;z-index:6;color:var(--text);box-shadow:var(--lift)}
.card-desk .ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:color-mix(in srgb,var(--c,#9B84FF) 38%,#0B1A4A);box-shadow:0 0 0 2px color-mix(in srgb,var(--c,#9B84FF) 70%,#fff),0 0 26px color-mix(in srgb,var(--c,#9B84FF) 65%,transparent)}
.card-desk h3{margin:12px 0 6px;font:600 22px/1.15 var(--fh);color:#fff}
.card-desk .tag{display:inline-block;font:800 11px/1 var(--fb);padding:6px 10px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);color:var(--sky)}
.card-desk .role{color:var(--text);margin:12px 0 10px}
.card-desk .now{margin:0;color:var(--muted);font-weight:700}.card-desk .now.on{display:inline-block;color:#0B1A4A;background:linear-gradient(135deg,var(--gold),var(--amber));padding:6px 10px;border-radius:12px;box-shadow:0 0 18px -4px rgba(255,211,110,.7)}
.card-desk button{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-b);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center}
.card-desk button:hover{background:rgba(255,255,255,.14)}

@media(max-width:1500px){.sub{display:none}}
@media(max-width:1180px){.kp{display:none}}
@media(max-width:900px){
  .hud-top{top:8px;left:8px;right:8px;gap:8px;padding:8px 10px;border-radius:20px}
  .brand{font-size:19px}.brand svg{width:28px;height:28px}
  .right{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.right::-webkit-scrollbar{display:none}
  .pill{padding:7px 12px;font-size:12.5px}
  .right .pill.solid{order:-3}#replay{order:-2}#clock{order:3}
  .feed{top:auto;height:34vh;left:8px;right:8px;bottom:8px;width:auto;border-radius:20px;padding:12px}
  .feed h4{font-size:16px;margin-bottom:8px}
  .making{left:8px;bottom:calc(34vh + 18px);max-width:calc(100vw - 16px);flex-wrap:nowrap;overflow-x:auto}
  .mk{min-width:220px}
  .card-desk{left:8px;right:8px;width:auto;top:calc(var(--hud-h) + 12px)}
  .banner{font-size:16px;padding:10px 18px}
  .lbl{font-size:10.5px;padding:3px 8px;border-radius:12px}.lbl small{display:none}.lbl .dt{width:8px;height:8px}
  .bub{font-size:11px;max-width:150px;padding:5px 9px}
  .kp,.sub,.hint{display:none}
  #scene{background-position:3% 16%,4% 19%,center bottom,0 0,0 0,0 0}
}
@media (prefers-reduced-motion:reduce){#clock .dot,.lbl.on,.lbl.on .dt,.ev,#scene::before,#scene::after{animation:none}}