:root { color-scheme: dark; font: 14px/1.45 system-ui, sans-serif; color: #e8ebef; background: #15171b; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button { padding: .48rem .78rem; color: inherit; background: #282c33; border: 1px solid #414751; border-radius: 6px; cursor: pointer; }
button:hover:not(:disabled) { background: #363d47; border-color: #677282; }
button:disabled { opacity: .4; cursor: default; }
:focus-visible { outline: 2px solid #a7c6f9; outline-offset: 3px; }
.primary { color: #14243b; background: #b8d2f9; border-color: #b8d2f9; font-weight: 600; }
.primary:hover:not(:disabled) { background: #d0e2ff; }
#welcome { width: min(100% - 48px, 530px); margin: clamp(40px, 17vh, 180px) auto; }
.eyebrow { color: #929ba8; letter-spacing: .13em; }
h1 { margin: 0; font-size: 42px; font-weight: 600; letter-spacing: -.04em; }
.intro { color: #b1b8c3; font-size: 18px; margin: 10px 0 30px; }
.hint { color: #969fac; font-size: 13px; margin: 20px 0; }
#resume-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid #363b44; }
label { display: block; margin-bottom: 16px; }
input[type=file] { display: block; width: 100%; margin-top: 6px; color: #abb4c0; }
#session { height: 100dvh; display: flex; flex-direction: column; }
header { flex: 0 0 auto; padding: 12px 18px 6px; border-bottom: 1px solid #343941; }
.session-title { display: flex; align-items: center; gap: 16px; }
#disk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #aeb7c5; }
#ips { margin-left: auto; color: #929ba8; white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums; }
#fullscreen { flex-shrink: 0; padding: .8rem 1.3rem; font-size: 16px; }
#controls { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
legend { color: #929ba8; font-size: 11px; padding: 0 0 4px; }
.media span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #b1bac7; }
#controls button { padding: .3rem .55rem; font-size: 12px; }
[role=status] { min-height: 1.45em; color: #b8c6d9; }
#session-status { margin: 6px 0 0; font-size: 12px; }
[role=status].error { color: #ffb7b0; }
#display { flex: 1 1 auto; min-height: 120px; overflow: hidden; position: relative; background: #000; outline: none; }
#screen_container { position: absolute; top: 50%; left: 50%; transform-origin: 0 0; }
#screen { white-space: pre; font: 16px/16px monospace; }
#screen_container canvas { display: block; }
#display:fullscreen { width: 100vw; height: 100vh; }
#display:-webkit-full-screen { width: 100vw; height: 100vh; }
@media (max-width: 640px) { header { padding: 8px; } #controls { gap: 8px; } #session { min-height: 650px; } }

@media (max-width: 640px) { .session-title { flex-wrap: wrap; gap: 8px; } #fullscreen { width: 100%; } }

/* Local encrypted disk stays outside the guest fullscreen surface. */
#disk-panel { margin: 1rem auto; padding: 1rem; max-width: 64rem; border: 1px solid #687b89; border-radius: .5rem; }
#disk-panel summary { cursor: pointer; font-weight: 600; }
#disk-panel label { display: block; margin: .6rem 0; }
#disk-panel input, #disk-panel select { max-width: 100%; padding: .4rem; }
#disk-panel button { margin: .25rem; }
#disk-identity { overflow-wrap: anywhere; }
#disk-status { min-height: 1.5em; }