:root { color-scheme:dark; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; background:#080a0b; color:#e4eeea; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:#080a0b; }
button,a { font:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible { outline:2px solid #d5fff2; outline-offset:3px; }
[hidden] { display:none !important; }
.study { min-height:100svh; display:grid; place-content:center; gap:12px; }
.handoff-surround { position:fixed; inset:0; z-index:4; opacity:0; pointer-events:none; background:radial-gradient(ellipse at 50% 20%,#193732,#07110f 85%); }
.stage[data-state="handoff"] + .handoff-surround { opacity:1; transition:opacity .3s ease .9s; }
.stage { position:relative; width:min(100vw,calc((100svh - 50px) * 16 / 9)); aspect-ratio:16/9; overflow:hidden; background:#111; }
.office-frame,.rack-frame,.turn-film { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:fill; }
.turn-film { visibility:hidden; }
.stage[data-state="travel"] .turn-film { visibility:visible; }
.stage[data-state="rack"] .office-frame,.stage[data-state="close"] .office-frame,.stage[data-state="handoff"] .office-frame { visibility:hidden; }
.rack-world { position:absolute; inset:0; transform-origin:81% 41%; transform:translateX(0) scale(1); transition:transform 1.3s cubic-bezier(.22,1,.36,1); }
.stage[data-state="close"] .rack-world { transform:translate(-31%,-12%) scale(1.8); }
.stage[data-state="handoff"] .rack-world { transform:translate(-30.4%,7.4%) scale(6.3); }
.handoff-message { position:absolute; inset:0; display:grid; place-items:center; color:#c0d8ce; font:500 clamp(12px,1.1vw,16px)/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.08em; text-align:center; }
.desk-display { position:absolute; left:33.3%; top:32.7%; width:32.8%; height:33%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2%; text-align:center; background:radial-gradient(ellipse at 50% 30%,#17302bdd,#07100fe8); border:1px solid #a9ded320; }
.screen-caption,.desk-display small,.board-caption,.whiteboard small,.rack-label,.rack-display-head,.rack-display p,.rack-status,.study-note,.service-bay { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.1em; }
.screen-caption { color:#b0d7c8; font-size:clamp(7px,.8vw,11px); }
h1,h2,p { margin:0; }
.desk-display h1 { margin-top:4%; font-size:clamp(14px,2.4vw,36px); letter-spacing:-.05em; font-weight:550; }
.desk-display h1 span,.whiteboard h2 span { color:#83cdb5; }
.desk-display p { margin-top:3%; color:#b5c8c0; font-size:clamp(8px,.9vw,13px); }
.screen-button { display:inline-flex; align-items:center; justify-content:space-between; gap:12px; margin-top:5%; padding:8px 12px; border:1px solid #bce7d960; background:rgba(131,194,174,.13); color:#d5f5e9; font-size:clamp(9px,.9vw,12px); font-weight:600; text-decoration:none; }
.screen-button:hover { background:#a5e8d02b; }
.desk-display small { margin-top:4%; color:#a0b5ac; font-size:clamp(6px,.65vw,9px); }
.demo-signin,.demo-welcome { width:100%; display:flex; flex-direction:column; align-items:center; }
.demo-signin h1,.demo-welcome h1 { margin-top:2%; }
.demo-signin form { width:min(100%,300px); margin-top:3%; }
.demo-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; text-align:left; }
.demo-fields label { display:grid; gap:3px; color:#b5c8c0; font-size:clamp(7px,.65vw,9px); }
.demo-fields input { min-width:0; width:100%; padding:5px 6px; border:1px solid #a7d8c147; border-radius:0; background:#07100fc9; color:#e4eeea; font:inherit; font-size:clamp(9px,.8vw,11px); }
.demo-fields input:focus-visible { outline:2px solid #d5fff2; outline-offset:2px; }
.demo-signin .screen-button { margin-top:4%; padding:5px 10px; }
.demo-signin small,.demo-welcome small { margin-top:2%; }
.demo-error { display:block; min-height:1em; margin-top:2px; color:#ffd2c5; font-size:clamp(7px,.65vw,9px); }
.demo-signout { margin-top:3%; padding:0; border:0; background:none; color:#b5d8c9; font-size:clamp(7px,.7vw,10px); }
.travel-control { position:absolute; bottom:4%; right:4%; }
.travel-control button { color:#e3f7ef; background:#091714db; border:1px solid #b0dec67a; padding:9px 12px; font-size:12px; }
.whiteboard { position:absolute; left:23.7%; top:18.3%; width:40.7%; height:46%; color:#1e2423; padding:2.4%; }
.board-caption { color:#4c5c58; font-size:clamp(6px,.7vw,10px); }
.whiteboard h2 { margin-top:8%; font:italic clamp(14px,2.2vw,30px)/1.07 Georgia,serif; color:#26352f; }
.whiteboard h2 span { color:#42725e; }
.board-rule { width:80%; height:1px; margin-top:7%; background:#4d625b80; }
.whiteboard p { margin-top:5%; color:#42534d; font-size:clamp(8px,.95vw,13px); line-height:1.55; }
.whiteboard small { position:absolute; bottom:8%; color:#5f6e68; font-size:clamp(6px,.6vw,8px); }
.task-list { margin-top:6%; padding:0; list-style:none; color:#2f3f39; font-size:clamp(7px,.85vw,12px); line-height:1.3; }
.task-list li { border-bottom:1px solid #4d625b33; white-space:nowrap; }
.task-link { display:flex; gap:3%; align-items:baseline; min-width:0; padding:1.4% 0; color:inherit; text-decoration:none; cursor:pointer; }
.task-link:hover { background:#4d625b1a; }
.task-link:focus-visible { outline:1px solid #42725e; outline-offset:2px; }
.task-link span { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.task-list .task-title { flex:1 1 auto; }
.task-list .task-project { flex:0 1 auto; max-width:35%; color:#5f6e68; font-size:.8em; letter-spacing:.04em; }
.task-list .task-due { flex:0 0 auto; color:#5f6e68; font-size:.8em; }
.task-list .task-flag { flex:0 0 auto; color:#42725e; font-weight:700; }
.task-list .task-empty { color:#5f6e68; font-style:italic; padding:1.4% 0; }
.task-list li:has(.task-empty) { border-bottom:0; }
.rack-label { position:absolute; left:72%; top:8.5%; width:18.2%; text-align:center; color:#1e2724; font-size:clamp(7px,.95vw,13px); font-weight:700; }
.rack-hotspot { position:absolute; z-index:1; left:68%; top:4%; width:26%; height:89%; padding:0; border:0; background:transparent; }
.rack-hotspot:hover { box-shadow:inset 0 0 0 1px #bce7d960; }
.service-plates { position:absolute; inset:0; z-index:3; pointer-events:none; }
.service-bay { position:absolute; left:70.8%; width:20%; height:3.4%; display:flex; align-items:center; gap:2%; font-size:clamp(6px,.55vw,8px); letter-spacing:.02em; }
.bay-buzz { top:58.3%; }.bay-vikunja { top:62.5%; }.bay-git { top:66.6%; }.bay-wiki { top:70.7%; }
.service-plate { position:relative; top:-12%; display:flex; align-items:center; justify-content:center; width:33%; height:50%; margin-left:18.5%; padding:0 7px; background:repeating-linear-gradient(0deg,#ffffff06 0 1px,#00000008 1px 2px),linear-gradient(180deg,#a4aaa2,#7e8780 52%,#929a91); color:#202924; border:1px solid #343c37; border-radius:2px; box-shadow:0 1px 2px #000e,inset 0 1px #d5ddd380,inset 0 -1px #424b46; font-weight:700; text-shadow:0 1px #d1d9cf88; }
.service-plate::before,.service-plate::after { content:""; position:absolute; top:50%; width:3px; height:3px; border-radius:50%; background:#49534c; box-shadow:inset 0 1px #d9e1d690,0 1px #101714; transform:translateY(-50%); }
.service-plate::before { left:3px; }.service-plate::after { right:3px; }
.service-led { position:absolute; left:58%; top:38%; width:4px; height:4px; transform:translateY(-50%); border-radius:50%; background:#858c87; box-shadow:0 0 0 1px #1b2420,inset 0 1px #b4bdb755; }
.service-led.is-up { background:#5fd17a; box-shadow:0 0 0 1px #1b2420,0 0 4px #5fd17a; }
.service-led.is-down { background:#e0524a; box-shadow:0 0 0 1px #1b2420,0 0 4px #e0524a; }
.bay-controls { position:absolute; inset:0; }
.bay-controls button,.bay-controls a { position:absolute; isolation:isolate; top:-12%; left:5%; display:flex; align-items:center; justify-content:center; width:10%; height:100%; padding:0; border:0; background:transparent; color:#263d43; font:inherit; font-size:clamp(5px,.38vw,6px); font-weight:700; text-decoration:none; text-shadow:0 1px #d2d7cc66; }
.bay-controls button::before,.bay-controls a::before { content:""; position:absolute; z-index:-1; inset:32% 12%; border:1px solid #3b413e; border-radius:1px; background:linear-gradient(180deg,#b8bdb5,#969e96 18%,#818983 78%,#5b635e); box-shadow:0 1px 2px #000d,inset 0 1px #e0e5dc99,inset 0 -1px #4f5954; }
.bay-controls .open-control { left:100%; width:7%; color:#b5c9b9; text-shadow:0 1px #000; }
.bay-controls .open-control::before { inset:32% 12%; border-color:#080d0c; border-radius:2px; background:linear-gradient(180deg,#414a44,#202824 25%,#121a16 75%,#090f0c); box-shadow:0 1px 2px #000e,inset 0 1px #94a49a4d,inset 0 -1px #040805; }
.stage[data-state="close"] .bay-controls button:not(:disabled),.stage[data-state="close"] .bay-controls a { pointer-events:auto; }
.bay-controls button:disabled { opacity:.55; cursor:not-allowed; }
.stage[data-state="close"] .bay-controls button:not(:disabled):hover::before,.stage[data-state="close"] .bay-controls a:hover::before { filter:brightness(1.3); }
.stage[data-state="close"] .bay-controls button:not(:disabled):active::before,.stage[data-state="close"] .bay-controls a:active::before { transform:perspective(30px) rotateX(-9deg); filter:brightness(.85); }
.rack-display { position:absolute; z-index:2; left:71.6%; top:32.6%; width:20.4%; height:18.1%; display:flex; flex-direction:column; padding:.8%; overflow:hidden; background:radial-gradient(ellipse at 50% 20%,#193732,#07110f 85%); box-shadow:inset 0 0 15px #0009; pointer-events:none; }
.rack-display-head,.rack-display p,.kvm-stats,.kvm-actions { transition:opacity .35s ease; }
.stage[data-state="handoff"] .rack-display-head,.stage[data-state="handoff"] .rack-display p,.stage[data-state="handoff"] .kvm-stats,.stage[data-state="handoff"] .kvm-actions { opacity:0; }
.stage[data-state="close"] .rack-display { pointer-events:auto; }
.stage[data-state="rack"] .rack-display .return-desk { pointer-events:auto; }
.rack-display-head { color:#b4dfd0; font-size:clamp(8px,.8vw,11px); font-weight:700; }
.rack-display p { margin:2% 0 0; color:#b1c7bb; font-size:clamp(6px,.55vw,8px); }
.rack-display .kvm-joke { margin-top:3%; color:#9fb9ad; font-size:clamp(6px,.55vw,8px); line-height:1.25; overflow-wrap:anywhere; }
.kvm-stats { display:grid; gap:2px; padding:2% 0 0; color:#d5eee3; }
.kvm-stats strong { font-size:clamp(9px,.8vw,11px); }
.kvm-stats span { color:#b4c6be; font-size:clamp(7px,.6vw,9px); line-height:1.3; }
.rack-display button { display:flex; justify-content:space-between; width:100%; margin-top:1%; padding:1.5% 3%; color:#e4f6ed; border:1px solid #a7d8c147; background:#b6e5d314; font-size:clamp(8px,.8vw,12px); line-height:1.1; text-align:left; }
.rack-display button:hover { background:#b6e5d333; }
.rack-status { position:absolute; left:71%; top:52.2%; color:#b5c3bb; font-size:clamp(6px,.5vw,8px); }
.rack-status span { display:inline-block; width:5px; height:5px; border-radius:50%; background:#949d97; }
.rack-status span.is-up { background:#5fd17a; box-shadow:0 0 4px #5fd17a; }
.rack-status span.is-down { background:#e0524a; box-shadow:0 0 4px #e0524a; }
.kvm-actions { display:flex; gap:12px; margin-top:auto; padding-top:2%; }
.rack-display .return-desk { width:auto; padding:0; margin:0; border:0; background:none; color:#b5d8c9; font-size:clamp(6px,.55vw,9px); }
.study-note { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media (min-aspect-ratio:17/9) {
  .study { position:relative; isolation:isolate; }
  .study::before,.study::after { content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(#05090999,#05090999),url("office.png") center / cover no-repeat; filter:blur(22px); transform:scale(1.06); }
  .study::after { background-image:linear-gradient(#05090999,#05090999),url("rack.png"); opacity:0; transition:opacity .8s ease; }
  .study:has(.stage:is([data-state="rack"],[data-state="close"],[data-state="handoff"]))::after { opacity:1; }
  .stage { z-index:1; box-shadow:0 0 45px #000b; transition:box-shadow .3s ease .9s; }
  .stage[data-state="handoff"] { box-shadow:none; }
}
@media (max-width:600px) { .study { min-height:100svh; }.desk-display { padding:1%; }.desk-display h1 { margin-top:2%; }.desk-display p { display:none; }.desk-display small { margin-top:2%; }.screen-button { margin-top:2%; padding:4px 6px; }.whiteboard { padding:2%; }.whiteboard h2 { margin-top:5%; }.whiteboard p { line-height:1.2; }.rack-display { padding:.7%; }.rack-display p { margin:2% 0; }.rack-display button { padding:2%; margin-top:1%; }.rack-display .return-desk { padding:0; }.rack-status { display:none !important; }.screen-view { border-width:4px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition-duration:0s !important; transition-delay:0s !important; scroll-behavior:auto !important; } }