/* NEEDS IT BY FIVE - work.css : the office (cold fluorescent, claustrophobic) */
#screen-work { background: #0a1114; overflow: hidden; }
.wk-wall { position: absolute; inset: 0; background:
  radial-gradient(ellipse 55% 38% at 55% 0%, rgba(120,225,210,.20), transparent 72%),
  linear-gradient(#0f1c21, #091014 62%, #060a0c); }
.wk-wall::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 120px); }
.wk-light { position: absolute; left: 330px; top: 0; width: 640px; height: 12px; background: #dffcf5; box-shadow: 0 0 70px 34px rgba(159,232,220,.32); border-radius: 0 0 8px 8px; }
.wk-light.flick { animation: nbf-flicker .9s; }

/* the glass wall to Voss's office */
.wk-glass { position: absolute; left: 24px; top: 82px; width: 288px; height: 336px; border-radius: 10px; overflow: hidden; border: 7px solid #1a2a30;
  background: linear-gradient(165deg, rgba(190,240,232,.42), rgba(70,125,135,.38)); box-shadow: inset 0 0 50px #000c, 0 10px 28px #000a; --sx: 0px; --sc: .55; --blur: 4px; --door: 0; }
.wk-glass .plate { position: absolute; left: 12px; top: 10px; z-index: 6; font: 800 10px var(--font-mono); letter-spacing: .2em; color: #0d1c22; background: rgba(215,240,235,.75); padding: 2px 8px; border-radius: 3px; }
.wk-voss { position: absolute; left: 50%; bottom: -10px; width: 190px; transform-origin: 50% 100%; transform: translateX(calc(-50% + var(--sx))) scale(var(--sc)); z-index: 2; filter: brightness(calc(1 - var(--prox, 0) * .2)); }
.wk-voss.ghost { opacity: .5; z-index: 1; }
.wk-voss .glint { opacity: calc(.15 + var(--prox, 0) * .85); }
.wk-frost { position: absolute; inset: 0; z-index: 3; backdrop-filter: blur(var(--blur)); background: linear-gradient(120deg, rgba(210,245,240,.22), rgba(120,185,190,.12)); pointer-events: none; }
.wk-doorlight { position: absolute; right: 0; top: 0; bottom: 0; width: 26px; z-index: 4; background: linear-gradient(90deg, rgba(255,230,160,0), rgba(255,236,170,.9)); opacity: var(--door); transition: opacity .25s; pointer-events: none; }
.wk-bubble { position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 7; padding: 10px 12px; border-radius: 10px; background: #eef4f2; color: #0a1215; font: 800 15px/1.28 var(--font-ui); box-shadow: 0 8px 18px #000a; transform-origin: 50% 100%; }
.wk-bubble { animation: nbf-pop .25s both; }
.wk-bubble::before { content: ''; position: absolute; left: 50%; top: -9px; margin-left: -9px; border: 9px solid transparent; border-top: 0; border-bottom-color: #eef4f2; }
.wk-bubble.angry { background: #fff1ee; color: #7a0c0c; animation: nbf-pop .25s, wk-buzz .12s linear infinite; }
@keyframes wk-buzz { 0%,100% { margin-left: 0; } 50% { margin-left: 2px; } }
.reduce-shake .wk-bubble.angry { animation: nbf-pop .25s; }
.wk-bubble.nm, .wk-bubble.angry.nm { background: #1b0a0d; color: #ff6b6b; border: 1px solid #ff3a3a; font-family: var(--font-mono); animation: nbf-pop .25s; }
.wk-bubble.nm::before { border-bottom-color: #1b0a0d; }

.wk-heat { position: absolute; left: 24px; top: 428px; width: 288px; }
.wk-heat .lab { display: flex; justify-content: space-between; font: 800 11px var(--font-mono); letter-spacing: .18em; color: var(--w-dim); margin-bottom: 5px; }
.wk-heat .lab b { color: #ffc857; letter-spacing: .08em; }
.wk-heat .bar { position: relative; height: 16px; border-radius: 6px; background: #05090b; border: 2px solid #2c4750; overflow: hidden; }
.wk-heat .fill { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); background: linear-gradient(90deg, #4fb3a0, #ffc857 55%, #ff3b3b); }
.wk-heat.hot .bar { animation: hud-throb .5s infinite; }

.wk-actions { position: absolute; left: 24px; top: 490px; width: 288px; height: 100px; display: flex; gap: 10px; }
.wk-act { position: relative; border-radius: 12px; border: 2px solid #2c4750; background: linear-gradient(#17282f, #0f1c21); color: #dff1ec; cursor: pointer; font: 800 15px/1.2 var(--font-ui); letter-spacing: .02em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden; transition: transform .08s, border-color .15s; user-select: none; }
.wk-act:hover { border-color: #ffc857; } .wk-act:active { transform: scale(.97); }
.wk-act small { font: 700 11px var(--font-mono); color: var(--w-dim); letter-spacing: .12em; }
.wk-act .ico { font-size: 26px; line-height: 1; }
.wk-act.suck { flex: 1.65; } .wk-act.breath { flex: 1; }
.wk-act .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: rgba(0,0,0,.62); transform-origin: bottom; transform: scaleY(0); pointer-events: none; }
.wk-act.suck.ready.urgent { border-color: #ff5a5a; animation: wk-urgent .45s infinite; }
@keyframes wk-urgent { 50% { box-shadow: 0 0 0 4px rgba(255,90,90,.35), 0 0 24px rgba(255,90,90,.6); } }
.wk-act .pips { display: flex; gap: 5px; margin-top: 2px; } .wk-act .pips i { width: 12px; height: 12px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 8px #6ee7b788; } .wk-act .pips i.off { background: #25383e; box-shadow: none; }

/* the monitor */
.wk-monitor { position: absolute; left: 336px; top: 82px; width: 920px; height: 522px; border-radius: 16px; background: #04080a; border: 2px solid #1b2b31; box-shadow: 0 0 0 9px #0d171b, 0 0 0 11px #26383f, 0 24px 60px #000c; }
.wk-screen { position: absolute; left: 14px; top: 14px; right: 14px; bottom: 14px; border-radius: 6px; overflow: hidden; background: linear-gradient(#10232b, #0b171c); }
.wk-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 30% 0%, rgba(180,255,245,.07), transparent 60%); }
.wk-inbox { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 224px; display: flex; flex-direction: column; gap: 8px; }
.wk-inbox h4 { margin: 2px 4px 2px; font: 800 12px var(--font-mono); letter-spacing: .22em; color: var(--w-dim); display: flex; justify-content: space-between; }
.wk-inbox h4 b { color: #ffc857; }
.wk-list { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow: hidden; }
.wk-card { position: relative; display: flex; gap: 10px; align-items: center; padding: 10px 12px 12px; border-radius: 10px; background: #122229; border: 1px solid #2b4650; cursor: pointer; overflow: hidden; animation: wk-in .3s ease-out; transition: transform .12s, border-color .12s, background .12s; }
.wk-card:hover { border-color: #ffc857; transform: translateX(3px); }
.wk-card.on { background: #1a3a42; border-color: #6ee7b7; }
.wk-card .ico { font-size: 28px; line-height: 1; flex: none; }
.wk-card .tx { min-width: 0; flex: 1; }
.wk-card .tt { font: 800 15px/1.1 var(--font-ui); color: #eaf7f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-card .ss { font: 600 11px/1.25 var(--font-ui); color: var(--w-dim); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wk-card .sec { font: 800 15px var(--font-mono); color: #a8c7c1; flex: none; font-variant-numeric: tabular-nums; }
.wk-card .bar { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: #6ee7b7; transform-origin: left; }
.wk-card.mid .bar { background: #ffc857; } .wk-card.late .bar { background: #ff5a5a; }
.wk-card.late { border-color: #8f2a32; animation: wk-late .6s infinite; } .wk-card.late .sec { color: #ff7b7b; }
.wk-card.done { animation: wk-out .35s forwards; border-color: #46c19c; } .wk-card.fail { animation: wk-fail .5s forwards; }
.wk-card.ghost { opacity: .85; border-style: dashed; border-color: #ff3a3a; background: #1a0d10; }
.wk-card.ghost .tt { font-family: var(--font-mono); color: #ff8b8b; }
@keyframes wk-in { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes wk-late { 50% { background: #2a1519; } }
@keyframes wk-out { to { opacity: 0; transform: translateX(50px) scale(.9); } }
@keyframes wk-fail { 30% { transform: translateX(-8px); background: #5a1a22; } 100% { opacity: 0; transform: translateX(-60px); } }
.wk-inbox.ringing .wk-list { padding-bottom: 76px; }
.wk-empty { white-space: pre-line; margin: auto; color: #4d6c70; font: 700 13px var(--font-mono); letter-spacing: .12em; text-align: center; padding: 20px; }

.wk-call { position: absolute; left: 8px; bottom: 8px; width: 224px; padding: 11px 12px; border-radius: 12px; background: #3a1d1d; border: 2px solid #ff7b5a; z-index: 5; animation: wk-ring .5s infinite; cursor: pointer; }
.wk-call b { display: block; font: 900 15px var(--font-ui); color: #ffe6df; } .wk-call span { font: 700 11px var(--font-mono); color: #ffb09a; letter-spacing: .1em; }
.wk-call .bar { height: 5px; margin-top: 8px; background: #ff7b5a; transform-origin: left; border-radius: 3px; }
@keyframes wk-ring { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-2deg); } 40% { transform: rotate(2deg); } 60% { transform: rotate(-1.5deg); } }
.reduce-shake .wk-call { animation: none; }

.wk-win { position: absolute; left: 240px; top: 8px; width: 640px; height: 472px; border-radius: 8px; overflow: hidden; background: #0c171c; border: 1px solid #2b4650; box-shadow: 0 10px 30px #0009; }
.wk-wtitle { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: linear-gradient(#1d3841, #162b32); font: 800 13px var(--font-ui); color: #dff1ec; letter-spacing: .03em; }
.wk-wtitle .sp { flex: 1; } .wk-wtitle .tm { font: 800 13px var(--font-mono); color: #ffc857; font-variant-numeric: tabular-nums; }
.wk-host { width: 640px; height: 440px; }
.wk-idle { width: 640px; height: 440px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #3f6068; font: 800 14px var(--font-mono); letter-spacing: .2em; background:
  radial-gradient(ellipse at 50% 40%, #12303a, #0a161b 70%); text-align: center; }
.wk-idle .logo { font: 400 40px var(--font-display); letter-spacing: .12em; color: #2f5762; } .wk-idle small { letter-spacing: .1em; font-weight: 600; opacity: .8; }

/* desk */
.wk-desk { position: absolute; left: 0; right: 0; bottom: 0; height: 114px; background: linear-gradient(#352620, #1b130f); border-top: 3px solid #4a362c; box-shadow: 0 -12px 30px #0009; }
.wk-desk .plant { position: absolute; left: 136px; top: 2px; width: 82px; --droop: 0; }
.wk-desk .mug { position: absolute; left: 34px; top: 18px; width: 86px; }
.prop-plant .lf { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1.2s; }
.prop-plant .lf1 { transform: rotate(calc(var(--droop) * -38deg)); } .prop-plant .lf3 { transform: rotate(calc(var(--droop) * 42deg)); } .prop-plant .lf2 { transform: scaleY(calc(1 - var(--droop) * .35)); }
.prop-plant .leaves { fill: color-mix(in srgb, #4f9a5b calc(100% - var(--droop) * 70%), #8a7a3a); }
.prop-mug .steam { animation: wk-steam 3s ease-in-out infinite; } .prop-mug .s2 { animation-delay: 1.2s; }
@keyframes wk-steam { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-6px); opacity: .15; } }
.wk-desk .sticky { position: absolute; padding: 8px 10px; background: #ffe97a; color: #3a3210; font: 600 13px/1.25 "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; box-shadow: 0 5px 10px #0007; }
.wk-desk .s1 { left: 290px; top: 18px; transform: rotate(-4deg); width: 110px; } .wk-desk .s2 { left: 420px; top: 30px; transform: rotate(3deg); background: #ff9fb2; width: 122px; }
.wk-desk .kbd-art { position: absolute; left: 600px; top: 26px; width: 420px; height: 66px; border-radius: 8px; background: repeating-linear-gradient(90deg, #26333a 0 22px, #1c272c 22px 24px), #1c272c; border: 2px solid #3a4a52; transform: perspective(300px) rotateX(24deg); }
.wk-clockwall { position: absolute; left: 1100px; top: 8px; }

/* hallucination bits */
.wk-peek { position: absolute; right: 20px; bottom: 16px; width: 140px; z-index: 4; opacity: 0; pointer-events: none; transition: opacity .3s; }
.wk-peek.on { opacity: .9; }
.wk-ev { position: absolute; inset: 0; z-index: 30; display: none; }
.wk-ev.on { display: block; }
.ev-dark { background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,.86), #000 66%); }
.ev-eyes { position: absolute; left: 50%; top: 50%; width: 220px; height: 80px; transform: translate(-50%,-50%) scale(var(--s, .3)); transition: transform .3s linear; }
.ev-eyes i { position: absolute; top: 0; width: 84px; height: 56px; border-radius: 50%; background: radial-gradient(#fff, #cfe9ee 60%, #7fb7c4); box-shadow: 0 0 40px 14px rgba(223,250,255,.6); }
.ev-eyes i:first-child { left: 0; } .ev-eyes i:last-child { right: 0; }
.ev-prompt { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); text-align: center; font: 400 44px var(--font-display); letter-spacing: .12em; color: #eaf7f3; text-shadow: 0 0 20px #000; }
.ev-prompt small { display: block; font: 700 14px var(--font-mono); letter-spacing: .3em; color: #8aa8a2; margin-top: 8px; }
.ev-ring { position: absolute; left: 50%; bottom: 210px; width: 150px; height: 150px; transform: translateX(-50%); }
.ev-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ev-ring circle { fill: none; stroke-width: 10; } .ev-ring .bg { stroke: rgba(255,255,255,.12); } .ev-ring .fg { stroke: #6ee7b7; stroke-linecap: round; transition: stroke .2s; }
.ev-meeting { background: rgba(4,8,10,.9); display: none; align-items: center; justify-content: center; }
.ev-meeting.on { display: flex; }
.mt-card { width: 760px; padding: 26px 30px; border-radius: 16px; background: #0f1b20; border: 1px solid #2c4750; text-align: center; box-shadow: 0 20px 60px #000c; }
.mt-card h3 { margin: 0 0 8px; font: 400 40px var(--font-display); letter-spacing: .1em; color: #eaf7f3; }
.mt-board { margin: 14px 0; padding: 18px; min-height: 110px; border-radius: 10px; background: #e9efec; color: #0c1417; font: 700 24px/1.3 var(--font-ui); display: flex; align-items: center; justify-content: center; }
.mt-nod { margin: 8px auto; width: 100%; height: 12px; border-radius: 6px; background: #05090b; border: 2px solid #2c4750; position: relative; overflow: hidden; }
.mt-nod i { position: absolute; top: 0; bottom: 0; background: #6ee7b7; opacity: .35; } .mt-nod b { position: absolute; top: -3px; width: 4px; height: 18px; background: #fff; border-radius: 2px; }
.mt-score { font: 800 16px var(--font-mono); letter-spacing: .2em; color: #8aa8a2; }
.wk-tutor { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); z-index: 25; padding: 10px 16px; border-radius: 10px; background: rgba(8,16,19,.92); border: 1px solid #ffc857; color: #ffe9b0; font: 700 15px var(--font-ui); text-align: center; animation: nbf-pop .3s both; max-width: 640px; pointer-events: none; }
.wk-banner { position: absolute; left: 0; right: 0; top: 40%; text-align: center; z-index: 28; font: 400 96px var(--font-display); letter-spacing: .12em; color: #fff; text-shadow: 0 0 40px #ff3a3a, 0 6px 0 #000; pointer-events: none; animation: nbf-pop .4s both; }
.wk-banner small { display: block; font: 700 20px var(--font-mono); letter-spacing: .3em; color: #ffc857; margin-top: 6px; text-shadow: none; }