:root { --bg:#0b0d12; --ink:#eef1f6; --dim:#8b93a3; --accent:#7c9cff; --ok:#5fd4a0; --bad:#ff6b5e; --lvl:0; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:"Segoe UI", system-ui, -apple-system, sans-serif; overflow:hidden; }
[hidden] { display:none !important; }
button { font:inherit; cursor:pointer; }
kbd { background:#1b2030; border:1px solid #2c3347; border-radius:4px; padding:1px 6px; font-size:.9em; }

/* ---------- intro / setup / end ---------- */
.screen { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px; text-align:center; animation:fadeUp .6s ease both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } }
h1 { font-size:clamp(48px,9vw,112px); margin:0; letter-spacing:-.04em; }
h2 { font-size:clamp(28px,4vw,44px); margin:0; }
.tag { font-size:clamp(17px,2vw,22px); color:var(--dim); margin:0; line-height:1.5; }
.fine { font-size:13px; color:var(--dim); margin:0; }
.primary { background:var(--accent); color:#08101f; border:0; border-radius:999px; padding:15px 34px; font-weight:700; font-size:18px; transition:transform .15s, opacity .2s; }
.primary:hover:not(:disabled) { transform:scale(1.04); }
.primary:disabled { opacity:.35; cursor:not-allowed; }
.mini { background:#1b2030; color:var(--ink); border:1px solid #2c3347; border-radius:999px; padding:3px 12px; font-size:13px; margin-left:8px; }

.logo { display:flex; gap:22px; }
.eye { width:86px; height:86px; background:#fff; border-radius:50%; display:grid; place-items:center; animation:blink 3.2s infinite; transform-origin:center; }
.eye i { width:34px; height:34px; background:#0b0d12; border-radius:50%; animation:look 5s ease-in-out infinite; }
@keyframes blink { 0%,44%,50%,92%,100% { transform:scaleY(1); } 47%,96% { transform:scaleY(.06); } }
@keyframes look { 0%,100% { transform:translate(0,0); } 30% { transform:translate(14px,4px); } 60% { transform:translate(-12px,-3px); } }

.setup-grid { display:grid; grid-template-columns:minmax(0,460px) 300px; gap:28px; align-items:center; text-align:left; }
.checks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.checks li { display:grid; grid-template-columns:22px 110px 1fr; gap:10px; align-items:center; background:#12151e; border:1px solid #1f2535; border-radius:10px; padding:11px 14px; font-size:15px; }
.checks li::before { content:""; width:12px; height:12px; border-radius:50%; background:#3a4257; }
.checks li.ok::before { background:var(--ok); box-shadow:0 0 10px var(--ok); }
.checks li.bad::before { background:var(--bad); }
.checks li.wait::before { background:var(--accent); animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.3; } }
.checks span { color:var(--dim); line-height:1.35; }
.cam { position:relative; border-radius:14px; overflow:hidden; background:#12151e; aspect-ratio:4/3; border:1px solid #1f2535; }
.cam video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.eye-state { position:absolute; left:10px; top:10px; background:#000a; padding:4px 12px; border-radius:999px; font-weight:700; font-size:14px; }
.eye-state.closed { background:var(--accent); color:#08101f; }
.meter { position:absolute; left:0; right:0; bottom:0; height:6px; background:#0008; }
.meter i { display:block; height:100%; width:0; background:var(--accent); transition:width .08s; }
@media (max-width:820px) { .setup-grid { grid-template-columns:1fr; } .cam { max-width:260px; margin:0 auto; } }

/* ---------- stage ---------- */
#stage { position:fixed; inset:0; background:#000; overflow:hidden; }
#world { position:absolute; inset:0; transform-origin:50% 55%; will-change:transform, filter; }
#bg, #fx, #liveBg { position:absolute; inset:0; width:100%; height:100%; background-size:100% 100%; background-position:center; }
#liveBg { object-fit:contain; background:#000; }
#liveBg { opacity:0; pointer-events:none; }   /* decoded for the shader, never painted */
.wall { background:radial-gradient(120% 90% at 20% 10%, #3b5bdb 0%, #1b2a6b 45%, #0b1030 100%); }

#desk { position:absolute; inset:0; }
.win { position:absolute; background:#fbfbfd; color:#1a1d26; border-radius:10px; box-shadow:0 24px 60px #0009; display:flex; flex-direction:column; overflow:hidden; min-width:240px; }
.win header { background:#e9ebf1; padding:9px 12px; font-size:13px; font-weight:600; display:flex; gap:10px; align-items:center; cursor:grab; user-select:none; }
.dots { display:flex; gap:6px; } .dots i { width:11px; height:11px; border-radius:50%; background:#ff6058; } .dots i:nth-child(2) { background:#ffbd2e; } .dots i:nth-child(3) { background:#28c941; }
.win textarea { flex:1; border:0; outline:0; resize:none; padding:22px 26px; font:16px/1.6 Georgia, serif; color:inherit; background:transparent; }
.chat { background:#1a1d21; color:#d1d2d3; } .chat header { background:#121416; color:#fff; }
.chatlog { flex:1; overflow:auto; padding:12px 14px; font-size:14px; display:flex; flex-direction:column; gap:10px; }
.chatlog p { margin:0; } .chatlog b { color:#fff; margin-right:6px; }
#chatform { padding:10px; } #chatform input { width:100%; background:#222529; border:1px solid #565856; color:#fff; border-radius:8px; padding:10px 12px; font:inherit; font-size:14px; outline:0; }
.taskbar { position:absolute; left:0; right:0; bottom:0; height:46px; background:#101422e6; backdrop-filter:blur(12px); display:flex; align-items:center; gap:10px; padding:0 14px; }
.startbtn { width:24px; height:24px; border-radius:6px; background:conic-gradient(#4f8cff, #6fd3ff, #4f8cff); }
.tb-app { width:30px; height:30px; border-radius:7px; background:#2a3147; position:relative; } .tb-app.on::after { content:""; position:absolute; left:9px; right:9px; bottom:-5px; height:3px; border-radius:2px; background:#7c9cff; }
.clock { margin-left:auto; font-size:13px; color:#cfd6e6; }

/* ---------- notifications: Windows 11 toast look ---------- */
#toasts { position:absolute; right:16px; bottom:60px; width:min(364px, 92vw); display:flex; flex-direction:column; gap:8px; pointer-events:none; z-index:2; }
.toast { pointer-events:auto; background:#2c2c2cf5; color:#fff; border:1px solid #ffffff14; border-radius:8px; padding:12px 16px 14px; box-shadow:0 8px 28px #0009; font-family:"Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; animation:toastIn .3s cubic-bezier(.1,.9,.2,1) both; cursor:default; }
.toast.out { animation:toastOut .25s ease forwards; }
@keyframes toastIn { from { transform:translateX(110%); } }
@keyframes toastOut { to { transform:translateX(110%); opacity:0; } }
.toast .th { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.toast .ti { width:16px; height:16px; border-radius:3px; display:inline-grid; place-items:center; font-weight:800; line-height:1; flex:none; }
.toast .ti img { width:11px; height:11px; filter:invert(1); }
.toast .row { display:flex; gap:12px; align-items:flex-start; }
.toast .av { width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:700; font-size:15px; color:#fff; }
.toast .reply { margin-top:10px; background:#ffffff0f; border:1px solid #ffffff1f; border-bottom-color:#ffffff8c; border-radius:4px; padding:7px 10px; font-size:13px; color:#ffffff8c; display:flex; justify-content:space-between; }
.toast .app { font-size:12px; color:#ffffffc9; flex:1; }
.toast .x { font-size:11px; color:#ffffff99; }
.toast .who { font-weight:600; font-size:14px; }
.toast .msg { font-size:14px; color:#ffffffc9; line-height:1.35; margin-top:2px; }
.toast .acts { display:flex; gap:8px; margin-top:12px; }
.toast .acts button { flex:1; background:#ffffff14; color:#fff; border:1px solid #ffffff1a; border-radius:4px; padding:6px 0; font-size:13px; }
.toast .acts .go { background:#107c10; border-color:#107c10; } .toast .acts .no { background:#c42b1c; border-color:#c42b1c; }
.toast.dank { font-family:"Comic Sans MS", "Chalkboard SE", cursive; background:#0d0; color:#000; border:3px solid #f0f; animation:toastIn .3s both, hue 1.2s linear infinite; }
.toast.dank .msg, .toast.dank .app, .toast.dank .x { color:#000; }
@keyframes hue { to { filter:hue-rotate(360deg); } }

/* ---------- hud, rest, mlg ---------- */
/* the two things that are Rest Easy and not your screen wear the same ring */
#hud, #facecam { --ring:var(--ok); box-shadow:0 0 0 2px var(--ring), 0 0 18px 2px color-mix(in srgb, var(--ring) 55%, transparent), 0 6px 20px #000a; z-index:5; }
#hud { position:absolute; top:10px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; background:#0b0d12f2; color:#fff; padding:5px 6px 5px 14px; border-radius:999px; font:600 12px/1 ui-monospace, Consolas, monospace; white-space:nowrap; }
#hud .brand { font-family:"Segoe UI", system-ui, sans-serif; font-weight:700; letter-spacing:.02em; }
#hudBac { color:var(--ring); }
#endBtn { background:#ffffff1a; color:#fff; border:0; border-radius:999px; padding:5px 12px; font:700 11px/1 "Segoe UI", system-ui, sans-serif; }
#endBtn:hover { background:var(--bad); }
#facecam { position:absolute; left:16px; bottom:62px; width:112px; height:112px; border-radius:50%; overflow:hidden; background:#12151e; }
#facecam video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
#faceState { position:absolute; left:0; right:0; bottom:8px; text-align:center; font:700 11px/1 "Segoe UI", system-ui, sans-serif; color:#fff; text-shadow:0 1px 4px #000; z-index:1; }
.speed { font-size:14px; color:var(--dim); display:flex; gap:10px; align-items:center; }
.speed select { background:#1b2030; color:var(--ink); border:1px solid #2c3347; border-radius:8px; padding:6px 10px; font:inherit; }
#rest { position:absolute; inset:0; background:#05060c; display:grid; place-items:center; text-align:center; opacity:0; pointer-events:none; transition:opacity .35s; }
#rest.on { opacity:.94; }
#rest b { display:block; font-size:clamp(40px,7vw,90px); }
#rest span { color:var(--dim); font-size:20px; }
.zz { font-size:34px; letter-spacing:.4em; color:var(--accent); animation:pulse 1.6s infinite; }
#morning { --c:#fff; position:absolute; left:50%; top:74px; transform:translateX(-50%); text-align:center; padding:14px 26px; border-radius:16px; background:#0b0d12f2; box-shadow:0 0 0 2px var(--c), 0 0 26px color-mix(in srgb, var(--c) 60%, transparent); opacity:0; pointer-events:none; z-index:5; white-space:nowrap; }
#morning b { display:block; font-size:clamp(26px,3.4vw,46px); color:var(--c); }
#morning span { font:600 14px/1.6 ui-monospace, Consolas, monospace; color:#dfe4ee; }
#morning.on { animation:morning 3s ease both; }
@keyframes morning { 0% { opacity:0; transform:translateX(-50%) translateY(-10px) scale(.9); } 10%,80% { opacity:1; transform:translateX(-50%) scale(1); } 100% { opacity:0; transform:translateX(-50%) translateY(-8px); } }

.music { position:fixed; left:-400px; bottom:0; width:320px; height:180px; border:0; opacity:0; pointer-events:none; }
.credit { font-size:12px; opacity:.55; margin-top:18px; }
#mlg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hit { position:absolute; width:46px; height:46px; margin:-23px; animation:hit .35s ease-out forwards; }
.hit::before, .hit::after { content:""; position:absolute; inset:0; background:
  linear-gradient(45deg, transparent 46%, #fff 46% 54%, transparent 54%) 0 0/38% 38% no-repeat,
  linear-gradient(45deg, transparent 46%, #fff 46% 54%, transparent 54%) 100% 100%/38% 38% no-repeat; filter:drop-shadow(0 0 2px #000); }
.hit::after { transform:scaleX(-1); }
@keyframes hit { from { transform:scale(.5); opacity:1; } to { transform:scale(1.3); opacity:0; } }
.pop { position:absolute; font:900 clamp(28px,5vw,72px)/1 Impact, "Arial Black", sans-serif; color:#fff; -webkit-text-stroke:2px #000; text-shadow:4px 4px 0 #f0f, -4px -4px 0 #0ff; animation:pop 1.4s ease-out forwards, hue .5s linear infinite; white-space:nowrap; }
@keyframes pop { 0% { transform:scale(.2) rotate(-20deg); opacity:0; } 15% { transform:scale(1.2) rotate(8deg); opacity:1; } 100% { transform:scale(1) rotate(-6deg) translateY(-90px); opacity:0; } }
.tri { position:absolute; width:0; height:0; border-left:60px solid transparent; border-right:60px solid transparent; border-bottom:104px solid #2f2; filter:drop-shadow(0 0 14px #2f2); animation:spin 2.4s linear forwards; }
.tri::after { content:"👁"; position:absolute; left:-17px; top:44px; font-size:30px; }
@keyframes spin { from { transform:rotate(0) scale(.3); opacity:0; } 20% { opacity:1; } to { transform:rotate(720deg) scale(1.4); opacity:0; } }
.chip { position:absolute; top:-60px; width:0; height:0; border-left:16px solid transparent; border-right:16px solid transparent; border-bottom:28px solid #ff9d1c; animation:fall linear forwards; }
@keyframes fall { to { transform:translateY(115vh) rotate(900deg); } }
.shades { position:absolute; left:50%; top:-120px; width:300px; height:64px; margin-left:-150px; animation:shades 3s ease-in forwards; background:
  linear-gradient(#000,#000) 0 0/100% 12px no-repeat, linear-gradient(#000,#000) 12px 12px/120px 40px no-repeat, linear-gradient(#000,#000) 168px 12px/120px 40px no-repeat,
  linear-gradient(#000,#000) 24px 52px/96px 12px no-repeat, linear-gradient(#000,#000) 180px 52px/96px 12px no-repeat; }
@keyframes shades { 0% { top:-120px; } 60%,90% { top:38%; } 100% { top:38%; opacity:0; } }
.rainbow { position:absolute; inset:0; background:linear-gradient(120deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); mix-blend-mode:overlay; opacity:0; animation:hue 1s linear infinite; }

/* ---------- desktop app: the window is transparent, the stage shows the live screen ---------- */
body.desktop, body.desktop #stage { background:transparent; }
body.desktop .screen { background:var(--bg); }

.checks select { grid-column:2 / -1; background:#1b2030; color:var(--ink); border:1px solid #2c3347; border-radius:8px; padding:6px 10px; font:inherit; font-size:14px; width:100%; }

/* Teams chat banner: the purple card Teams draws itself */
.toast.teams { background:#4f52b2; border-color:#ffffff26; }
.toast.teams .app, .toast.teams .msg, .toast.teams .x { color:#fffffff0; }
.toast.teams .reply { background:none; border:0; border-top:1px solid #ffffff33; border-radius:0; margin:12px -16px -14px; padding:10px 16px; color:#fff; }
/* Teams incoming call */
.toast.call { position:relative; text-align:center; padding:18px 16px 16px; background:radial-gradient(120% 120% at 50% 30%, #6b6b6b, #2b2b2b); }
.toast.call .x { position:absolute; right:12px; top:10px; }
.toast.call .who { font-size:15px; font-weight:400; } .toast.call .msg { color:#fff; margin:2px 0 12px; }
.toast.call .av { margin:0 auto 14px; width:44px; height:44px; background:#e6e6e6 !important; color:#333; }
.toast.call .rounds { display:flex; justify-content:center; gap:14px; }
.toast.call .rounds i { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:17px; color:#fff; background:#5b5fc7; }
.toast.call .rounds .end { background:#c4314b; transform:rotate(135deg); }