/* CTRL/OS: the workstation look (locust-desktop.js). An offline computer on the containment CRT. It starts as a classic
   beveled desktop; Locust moves it through a glossy blue and green look and a menu-bar-and-dock look to its own (black,
   yellow characters). Evocations of eras only: no real operating-system logos, wallpapers or names. Yellow belongs to
   Locust alone; red is CTRL's alarm and the OFFLINE mark, which never changes. */
html[data-look="workstation"] {
  --os-font: clamp(10px, calc(var(--u, 1vw) * 1.32), 17px);
  --os-small: clamp(9px, calc(var(--u, 1vw) * 1.08), 14px);
  --os-gray: #c4c3bb; --os-light: #f4f3ec; --os-mid: #8a8a84; --os-dark: #3c3c38; --os-shadow: #121210;
  --os-navy: #173f96; --os-blue: #1f5fd0; --os-yellow: #f3c94e; --os-amber: #e2a12f; --os-red: #c8402e;
  --os-side: calc(var(--band, 22px) * .55);
}
html[data-look="workstation"] .stage { padding: 0; }
html[data-look="workstation"] .stage > .stage-foot { display: none; }
html[data-look="workstation"] .stage > .os { position: absolute; inset: 0; z-index: 1; flex: none; }
html[data-look="workstation"] .stage > :is(.stage-top, .stage-echo, .stage-main, .stage-hint) { display: none; }
.os { position: absolute; inset: 0; z-index: 1; overflow: hidden; font-family: var(--font, monospace); font-size: var(--os-font); color: #111; }
.os[data-phase="off"] { display: none; }
.os [hidden] { display: none !important; }
.os button { font: inherit; color: inherit; cursor: pointer; min-height: 0; }
.os-taskbar #settings summary::before, .os-taskbar #settings summary::after { content: none; }
.os-taskbar .stage-foot :is(button, summary) { text-decoration: none; }

/* the wallpaper: opaque while the computer is itself, thinner as Locust shows through (its rain is under it) */
.os-wall { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, #1c2225 0%, #0f1315 62%, #07090a 100%); opacity: 1; transition: opacity 1.4s ease; }
.os-wall::after { content: 'CTRL'; position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); font: 700 calc(var(--u, 1vw) * 9)/1 var(--font, monospace); letter-spacing: .24em; color: #ffffff0a; }
.os[data-level="1"] .os-wall { opacity: .985; }
.os[data-level="2"] .os-wall { opacity: .94; }
.os[data-level="3"] .os-wall { opacity: .86; }
.os[data-level="4"] .os-wall { opacity: .7; }
.os[data-level="5"] .os-wall { opacity: .3; }
.os-wall[data-gone] { opacity: 0 !important; }

/* desktop icons */
.os-icons { position: absolute; left: var(--os-side); top: 4%; z-index: 2; display: flex; flex-direction: column; gap: 1.6vh; }
.os .os-icon { display: flex; flex-direction: column; align-items: center; gap: .25em; width: 6.4em; padding: .2em; background: none; border: 1px dotted transparent; color: #ecebe3; font-size: var(--os-small); text-align: center; }
.os-icon svg { width: 2.6em; height: 2.6em; }
.os-icon span { padding: 0 .25em; text-shadow: 0 1px 0 #000; }
.os-icon[data-new] { animation: os-appear 1.4s ease-out; }
.os-icon[data-new] svg { filter: drop-shadow(0 0 6px #ffffffaa); }
.os-icon:focus-visible { outline: none; border-color: #fff8; }

/* the windows */
.os-desk { position: absolute; left: var(--os-side); right: var(--os-side); top: 2.5%; bottom: calc(2.4% + 2.5em); z-index: 3; }
.os-win { position: absolute; display: flex; flex-direction: column; min-width: 11em; background: var(--os-gray); border: 2px solid; border-color: var(--os-light) var(--os-shadow) var(--os-shadow) var(--os-light); box-shadow: inset -1px -1px 0 #7b7b75, inset 1px 1px 0 #fff, 2px 3px 0 #0008, 0 14px 34px #000b; }
.os-win[data-open] { animation: os-open .24s ease-out; }
@keyframes os-open { from { transform: scale(.94); opacity: .3; } }
.os-win[data-shake] { animation: os-shake .42s linear; }
@keyframes os-shake { 15%, 55% { transform: translateX(-1.2%); } 35%, 75% { transform: translateX(1.2%); } }
.os-title { flex: none; display: flex; align-items: center; gap: .3em; height: 1.75em; margin: 2px 2px 0; padding: 0 .2em 0 .55em; background: linear-gradient(90deg, var(--os-navy), var(--os-blue)); color: #fff; font-weight: 700; font-size: var(--os-small); letter-spacing: .05em; cursor: grab; user-select: none; touch-action: none; }
.os-win:not([data-front]) .os-title { background: linear-gradient(90deg, #5a5d61, #868a90); color: #d7d7d0; }
.os-title-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.os-btn { flex: none; width: 1.45em; height: 1.25em; padding: 0; background: var(--os-gray); border: 1.5px solid; border-color: var(--os-light) var(--os-shadow) var(--os-shadow) var(--os-light); color: #000 !important; font: 700 1em/1 var(--font, monospace); }
.os-btn:active { border-color: var(--os-shadow) var(--os-light) var(--os-light) var(--os-shadow); }
.os-body { position: relative; flex: 1; min-height: 0; margin: 3px; background: #fff; border: 2px solid; border-color: #7b7b75 var(--os-light) var(--os-light) #7b7b75; overflow: hidden; }
.os-push { min-width: 7em; padding: .35em 1em; background: var(--os-gray); border: 2px solid; border-color: var(--os-light) var(--os-shadow) var(--os-shadow) var(--os-light); box-shadow: inset -1px -1px 0 #7b7b75; color: #111; }
.os-push:active { border-color: var(--os-shadow) var(--os-light) var(--os-light) var(--os-shadow); }
.os-push:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }

/* the containment terminal: its log on top (its own start, then the commands Locust types), the story under it */
.os-terminal { --st-cap: clamp(13px, calc(var(--u, 1vw) * 1.75), 25px); --st-list: clamp(12px, calc(var(--u, 1vw) * 1.5), 21px); --st-small: clamp(9px, calc(var(--u, 1vw) * .95), 13px); }
.os-terminal .os-body { display: flex; flex-direction: column; padding: .5em 1.1em .45em; background: #050806; border-color: #2a2a26 #8a8a84 #8a8a84 #2a2a26; color: var(--st-paper, #ede6d4); font-family: var(--font, monospace); }
.os-terminal .os-body > .stage-main { flex: 1 1 auto; min-height: 0; }
.os-terminal .stage-main { padding-bottom: .4em; }
.os-termlog { flex: none; display: flex; flex-direction: column; justify-content: flex-end; height: 7.2em; margin: .35em 0 .2em; padding-bottom: .35em; overflow: hidden; border-bottom: 1px dashed #3b3b30; font: var(--os-small)/1.38 var(--font, monospace); }
.os-log { margin: 0; color: #9fb19a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-log[data-who="cmd"] { color: #ece8da; }
.os-log[data-who="locust"] { color: var(--os-yellow); text-shadow: 0 0 6px #f3c94e55; }
.os-cursor { animation: os-blink 1s steps(2, start) infinite; }
@keyframes os-blink { to { visibility: hidden; } }
.os-terminal[data-raw] { background: transparent; border-color: transparent; box-shadow: none; }
.os-terminal[data-raw] .os-title { display: none; }
.os-terminal[data-raw] .os-body { background: #050806d9; border: 1px solid #5a3d12; }

/* dialogs, the mount */
.os-dialog { height: auto !important; min-width: 16em; }
.os-dialog .os-body { display: flex; flex-direction: column; align-items: center; gap: .8em; padding: .8em 1em .9em; background: var(--os-gray); border: 0; }
.os-dialog-row { display: flex; align-items: center; gap: .9em; }
.os-dialog-icon svg { width: 2.4em; height: 2.4em; flex: none; }
.os-dialog-icon:empty { display: none; }
.os-dialog-text { margin: 0; line-height: 1.4; }
.os-win[data-app="behind"] .os-dialog-text { font-size: 1.25em; letter-spacing: .04em; }
.os-mount .os-body { align-items: stretch; }
.os-mount-step { margin: .25em 0 0; font-size: var(--os-small); color: #333; }
.os-progress { height: 1.1em; padding: 2px; background: #fff; border: 2px solid; border-color: #7b7b75 var(--os-light) var(--os-light) #7b7b75; }
.os-progress i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--os-navy) 0 .75em, transparent .75em .9em); transition: width .1s linear; }

/* notifications */
.os-toasts { position: absolute; right: calc(var(--os-side) + .4em); bottom: calc(2.2% + 2.9em); z-index: 8; display: flex; flex-direction: column; align-items: flex-end; gap: .4em; pointer-events: none; }
.os-toast { display: flex; align-items: flex-start; gap: .6em; max-width: 23em; padding: .55em .8em; background: #ffffe1; border: 1px solid #000; box-shadow: 2px 2px 0 #0008; font-size: var(--os-small); color: #111; animation: os-toast-in .3s ease-out; transition: opacity .4s, transform .4s; }
.os-toast[data-by="locust"] { box-shadow: inset 3px 0 0 var(--os-yellow), 2px 2px 0 #0008; }
.os-toast[data-leaving] { opacity: 0; transform: translateY(.4em); }
.os-toast-icon svg { width: 1.8em; height: 1.8em; flex: none; }
.os-toast-words { display: flex; flex-direction: column; gap: .15em; line-height: 1.3; }
@keyframes os-toast-in { from { opacity: 0; transform: translateY(.6em); } }
@keyframes os-appear { from { opacity: 0; } }

/* notes, the contact note */
.os-notes { padding: .6em .85em; white-space: pre-wrap; line-height: 1.45; color: #151515; }
.os-notes .w[data-plucked] { visibility: hidden; }
.os-note p { margin: 0 0 .45em; }
.os-note-head { font-weight: 700; letter-spacing: .06em; }
.os-note-line { font-weight: 700; }
.os-note-clause[data-state="restored"] { background: #fff1a8; }
.os-caret { animation: os-blink 1s steps(2, start) infinite; }

/* the drive */
.os-files { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .4em .9em; padding: .7em; height: calc(100% - 1.8em); overflow: hidden; }
.os-file { display: flex; flex-direction: column; align-items: center; width: 6.6em; font-size: var(--os-small); text-align: center; }
.os-file svg { width: 2.6em; height: 2.6em; }
.os-status { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: .2em .6em; background: var(--os-gray); border-top: 1px solid #7b7b75; font-size: var(--os-small); }

/* CamView */
.os-win[data-app="cameras"] .os-body { background: #151514; }
.os-tabs { display: flex; gap: 2px; padding: 2px 3px 0; background: var(--os-gray); }
.os-tab { padding: .2em .8em; background: #b2b1a9; border: 1.5px solid; border-color: var(--os-light) var(--os-dark) transparent var(--os-light); color: #222; font-size: var(--os-small); }
.os-tab[data-on] { background: var(--os-gray); font-weight: 700; color: #000; }
.os-feeds { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 3px; height: calc(100% - 1.75em); padding: 3px; background: #0b0b0a; }
.os-feeds[data-single] { grid-template-columns: 1fr; }
.os-feed { position: relative; margin: 0; overflow: hidden; background: #000; }
.os-feed img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(.92); transition: opacity 1.4s ease; }
.os-feed::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #0000 0 2px, #0004 2px 3px), radial-gradient(ellipse at center, #0000 55%, #000a 100%); }
.os-feed[data-signal="none"] img { opacity: 0; }
.os-feed[data-signal="none"]::before { content: 'NO SIGNAL'; position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #d8d8d0; font-weight: 700; letter-spacing: .2em; background: repeating-linear-gradient(90deg, #222 0 3px, #2c2c2a 3px 6px); }
.os-feed[data-wrong] img { animation: os-wrong 2.4s ease-out; }
@keyframes os-wrong { from { opacity: 0; filter: grayscale(1) brightness(2); } }
.os-feed-label, .os-rec, .os-stamp { position: absolute; z-index: 2; color: #f1f1ea; font-size: var(--os-small); text-shadow: 0 1px 2px #000; letter-spacing: .05em; }
.os-feed-label { left: .5em; top: .35em; }
.os-rec { right: .5em; top: .35em; color: #ff8b78; }
.os-rec::before { content: '●'; margin-right: .3em; color: #e2402c; }
.os-stamp { right: .5em; bottom: .35em; }
.os-feed-eyes { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.os-feed-eyes[data-on] { opacity: 1; }

/* agents, the player, the message, the report */
.os-agents { margin: 0; padding: .4em .5em; list-style: none; }
.os-agents li { display: flex; align-items: center; gap: .5em; padding: .18em 0; font-size: var(--os-small); }
.os-agents li span { flex: 1; }
.os-agents i { width: .8em; height: .8em; flex: none; border-radius: 50%; background: #9b2a1c; box-shadow: inset 0 0 0 1px #0006; }
.os-agents li[data-awake] i { background: var(--os-yellow); box-shadow: 0 0 6px var(--os-yellow); }
.os-agents li[data-awake] em { color: #8a5d00; font-weight: 700; }
.os-agents em { font-style: normal; color: #555; }
.os-agents li[data-agent="CTRL_SEAL.SYS"] i { background: #e8e6dc; }
.os-win[data-app="tv"] .os-body { background: #000; }
.os-tv { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.os-win[data-app="message"] .os-body { padding: .7em .9em; }
.os-typing { margin: .5em 0 0; color: #555; }
.os-typing i { font-style: normal; animation: os-dot 1.2s infinite; }
.os-typing i:nth-child(2) { animation-delay: .2s; } .os-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes os-dot { 50% { opacity: .15; } }
.os-typing-sub { margin: 0; color: #8a5d00; font-weight: 700; }
.os-win:is([data-app="report"], [data-app="onfile"]) .os-body { display: flex; flex-direction: column; background: var(--os-gray); }
.os-report { flex: 1; min-height: 0; margin: .5em; padding: .7em .85em; overflow: auto; white-space: pre-wrap; font: inherit; line-height: 1.45; color: #161616; background: #fff; border: 2px solid; border-color: #7b7b75 var(--os-light) var(--os-light) #7b7b75; }
.os-report[data-which="prepared"] { background: #fffbea; box-shadow: inset 0 0 22px #f3c94e40; color: #3a2b05; }
.os-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6em; padding: 0 .5em .6em; }

/* the taskbar: the CTRL button, open windows, the session controls, OFFLINE and the clock */
.os-taskbar { position: absolute; left: var(--os-side); right: var(--os-side); bottom: 2.2%; z-index: 7; display: flex; align-items: center; gap: .35em; height: 2.4em; padding: .2em .25em; background: var(--os-gray); border-top: 2px solid var(--os-light); box-shadow: inset 0 -1px 0 var(--os-mid); font-size: var(--os-small); }
.os-start { display: flex; align-items: center; gap: .4em; height: 100%; padding: 0 .7em; background: var(--os-gray); border: 2px solid; border-color: var(--os-light) var(--os-shadow) var(--os-shadow) var(--os-light); font-weight: 700 !important; letter-spacing: .08em; }
.os-start i { width: .9em; height: .9em; background: var(--os-blue); box-shadow: inset 0 0 0 1px #0a2b6b; }
.os-tasks { display: flex; flex: 1; min-width: 0; gap: .25em; height: 100%; overflow: hidden; }
.os-task { flex: 0 1 10em; min-width: 3em; height: 100%; padding: 0 .6em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; background: var(--os-gray); border: 2px solid; border-color: var(--os-light) var(--os-shadow) var(--os-shadow) var(--os-light); }
.os-task[data-front] { border-color: var(--os-shadow) var(--os-light) var(--os-light) var(--os-shadow); background: #d6d5ce; font-weight: 700; }
.os-taskbar .stage-foot { flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: .3em; padding: 0; height: 100%; font-size: var(--os-small); color: #222; letter-spacing: 0; }
.os-taskbar .stage-foot :is(button, summary) { min-height: 0; height: 100%; padding: 0 .55em; color: #111; font-size: var(--os-small); letter-spacing: 0; background: var(--os-gray); border: 2px solid; border-color: var(--os-light) var(--os-shadow) var(--os-shadow) var(--os-light); display: inline-flex; align-items: center; }
.os-taskbar .stage-foot #sealExit { color: #8b1d10; font-weight: 700; }
.os-taskbar .stage-foot :is(#skipTurn, #replayTurn)::before, .os-taskbar .stage-foot :is(#skipTurn, #replayTurn)::after { content: none; }
.os-taskbar .stage-foot .esc-hint { display: none; }
html:not([data-audio="on"]) .os-taskbar :is(#skipTurn, #replayTurn) { display: none !important; }
.os-taskbar .stage-foot #settings { height: 100%; }
.os-taskbar .stage-foot .settings-panel { left: auto; right: 0; transform: none; }
.os-tray { flex: none; display: flex; align-items: center; gap: .7em; height: 100%; padding: 0 .65em; border: 1.5px solid; border-color: var(--os-mid) var(--os-light) var(--os-light) var(--os-mid); }
.os-net { display: inline-flex; align-items: center; gap: .3em; color: #9b1b0e; }
.os-net svg { width: 1.45em; height: 1.45em; }
.os-net b { letter-spacing: .08em; }
.os-clock { min-width: 5.2em; text-align: right; font-variant-numeric: tabular-nums; }

/* Locust at the edges: single characters drift down the margins and out of the window frames */
.os-edge { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.os-glyph { position: absolute; color: var(--os-amber); font: 700 var(--os-small)/1 var(--font, monospace); text-shadow: 0 0 6px #f3c94e66; opacity: 0; animation: os-fall 3s linear forwards; }
.os-glyph[data-red] { color: var(--os-red); text-shadow: 0 0 6px #c8402e66; }
@keyframes os-fall { 12% { opacity: .9; } 70% { opacity: .55; } to { opacity: 0; transform: translateY(5.5vh); } }

/* the boot screen */
.os-boot { position: absolute; inset: 0; z-index: 12; margin: 0; padding: 7% calc(var(--band, 22px) + 2%); background: #000; color: #c3cbbf; font: var(--os-font)/1.6 var(--font, monospace); white-space: pre-wrap; }

/* its eyes over everything (the molt, its return) */
.os-eyes { position: absolute; inset: 0; z-index: 9; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .38s ease; }
.os-eyes[data-on] { opacity: 1; }

/* the words it takes */
.os-pluck { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.os-fly { position: absolute; color: var(--os-yellow); font: 700 var(--os-font)/1.2 var(--font, monospace); text-shadow: 0 0 10px #f3c94e99, 0 0 2px #000; transition: left .9s cubic-bezier(.5, 0, .2, 1), top .9s cubic-bezier(.5, 0, .2, 1), opacity .4s; }
.os-plucked { position: absolute; left: 0; right: 0; top: 40%; margin: 0; padding: 1.1em 4%; background: linear-gradient(180deg, #0000, #000000e6 22%, #000000e6 78%, #0000); text-align: center; font: 700 calc(var(--os-font) * 1.9)/1.3 var(--font, monospace); letter-spacing: .04em; color: var(--os-yellow); text-shadow: 0 0 18px #f3c94e88, 0 0 3px #000, 0 0 3px #000; opacity: 0; }
.os-plucked[data-on="true"] { opacity: 1; }
.os-plucked[data-on="leaving"] { opacity: 0; transition: opacity .6s ease; }

/* the silence: everything stops at 3:00 */
.os[data-freeze] *, .os[data-freeze] *::before, .os[data-freeze] *::after { animation-play-state: paused !important; transition: none !important; }
.os[data-freeze] > :not(.os-pluck) { filter: grayscale(.9) brightness(.55) contrast(1.1); }
.os[data-freeze]::after { content: ''; position: absolute; inset: 0; z-index: 11; pointer-events: none; background: radial-gradient(ellipse at center, #0000 30%, #000d 100%); }

/* reality changes: a band of its characters sweeps down the glass and the computer under it is not the one it was */
.os-morph { position: absolute; left: 0; right: 0; top: -45%; height: 42%; z-index: 11; margin: 0; overflow: hidden; pointer-events: none; white-space: pre; font: 700 var(--os-small)/1.15 var(--font, monospace); color: var(--os-amber); text-shadow: 0 0 6px #f3c94e88; background: linear-gradient(180deg, #0000, #050806f0 18%, #050806f0 82%, #0000); animation: os-sweep 1.32s cubic-bezier(.45, 0, .55, 1) forwards; }
@keyframes os-sweep { to { top: 105%; } }
.os[data-morph="sweep"] :is(.os-desk, .os-taskbar, .os-icons, .os-wall) { animation: os-jitter .1s steps(2) infinite; }
@keyframes os-jitter { 50% { transform: translateX(.35%); filter: hue-rotate(25deg) saturate(1.4); } }
.os[data-morph="fade"] > :not(.os-boot) { opacity: .2; transition: opacity .2s; }

/* the molt: each window splits down its back and falls away */
.os-win[data-molt="split"] { animation: os-split 1.1s cubic-bezier(.6, 0, .4, 1) forwards; pointer-events: none; }
@keyframes os-split {
  0% { clip-path: polygon(0 0, 50% 0, 50% 0, 50% 0, 100% 0, 100% 100%, 0 100%); }
  45% { clip-path: polygon(0 0, 47% 0, 50% 55%, 53% 0, 100% 0, 100% 100%, 0 100%); }
  70% { clip-path: polygon(0 0, 40% 0, 50% 100%, 60% 0, 100% 0, 100% 100%, 0 100%); transform: none; opacity: 1; }
  100% { clip-path: polygon(0 0, 28% 0, 50% 100%, 72% 0, 100% 0, 100% 100%, 0 100%); transform: translateY(12%) rotate(1.2deg); opacity: 0; }
}
.os-win[data-molt="fade"] { opacity: 0; transition: opacity .4s ease; }
.os-win[data-fading] { opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }

/* the cutoff: the picture collapses to a line */
.os[data-collapse="line"] { animation: os-collapse .65s ease-in forwards; }
@keyframes os-collapse { 55% { transform: scaleY(.03); filter: brightness(1.5); } 100% { transform: scale(.25, .004); filter: brightness(0); } }
.os[data-collapse="fade"] { opacity: 0; transition: opacity .3s ease; }
.os[data-phase="final"] .os-icons, .os[data-phase="final"] .os-taskbar > :not(.stage-foot) { opacity: .25; transition: opacity 1.4s ease; }

/* ---------------------------------------------------------------- the glossy look: blue title bars, a green button */
.os[data-skin="glossy"] { font-family: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif; }
.os[data-skin="glossy"] .os-wall { background: radial-gradient(130% 60% at 28% 112%, #5da83c 0 44%, #0000 45%), radial-gradient(150% 70% at 88% 118%, #4b9a2e 0 47%, #0000 48%), linear-gradient(180deg, #2a68d4 0%, #5b9be9 48%, #a9d0f5 70%, #78bc4c 71%, #4f9a33 100%); }
.os[data-skin="glossy"] .os-wall::after { color: #ffffff18; }
.os[data-skin="glossy"] .os-icon span { text-shadow: 1px 1px 2px #000, 0 0 3px #000; }
.os[data-skin="glossy"] .os-win { padding: 0 3px 3px; border: 0; border-radius: 8px 8px 0 0; background: #ece9d8; box-shadow: 0 0 0 1px #0a246a, inset 0 0 0 3px #0058ee, 2px 5px 16px #0009; }
.os[data-skin="glossy"] .os-title { height: 1.95em; margin: 0 -3px 2px; padding: 0 .25em 0 .6em; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, #0a8dff 0%, #0054e3 10%, #0055e5 45%, #0064ff 85%, #003dd7 100%); color: #fff; text-shadow: 1px 1px 0 #0a1a6a; letter-spacing: 0; }
.os[data-skin="glossy"] .os-win:not([data-front]) .os-title { background: linear-gradient(180deg, #8eaeea, #7a9be0 50%, #86a5e5); color: #dfe8fa; }
.os[data-skin="glossy"] .os-btn { width: 1.55em; height: 1.55em; border: 1px solid #fff; border-radius: 3px; background: linear-gradient(180deg, #4f92fb, #1f5fe0); color: #fff !important; font-family: Tahoma, Verdana, sans-serif; }
.os[data-skin="glossy"] .os-close { background: linear-gradient(180deg, #ec8e70, #c63d1d); }
.os[data-skin="glossy"] .os-body { margin: 0; border: 1px solid #7f9db9; }
.os[data-skin="glossy"] .os-terminal .os-body { border-color: #000; }
.os[data-skin="glossy"] :is(.os-dialog .os-body, .os-win[data-app="report"] .os-body, .os-win[data-app="onfile"] .os-body, .os-tabs, .os-status) { background: #ece9d8; }
.os[data-skin="glossy"] .os-push { border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(180deg, #fff, #ecebe6 85%, #d6d0c5); box-shadow: none; }
.os[data-skin="glossy"] .os-taskbar { padding: 0; gap: .35em; border: 0; border-top: 1px solid #0b2fa0; background: linear-gradient(180deg, #3168d5 0%, #4993e6 8%, #2157d7 18%, #2663e0 55%, #1941a5 100%); box-shadow: none; }
.os[data-skin="glossy"] .os-start { padding: 0 1.3em 0 .7em; border: 0; border-radius: 0 12px 12px 0; background: linear-gradient(180deg, #62b862 0%, #3c9c3c 15%, #2f8a2f 55%, #237a23 100%); color: #fff !important; font-style: italic; font-size: 1.12em; letter-spacing: .02em; text-shadow: 1px 1px 1px #0007; }
.os[data-skin="glossy"] .os-start i { border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 2px #2b7a2b; }
.os[data-skin="glossy"] :is(.os-task, .os-taskbar .stage-foot :is(button, summary)) { height: 82%; border: 1px solid #1a3e9a; border-radius: 3px; background: linear-gradient(180deg, #4a8cf6, #2663e0); color: #fff; }
.os[data-skin="glossy"] .os-task[data-front] { background: linear-gradient(180deg, #1e4fb3, #1a47a3); border-color: #0c2b75; }
.os[data-skin="glossy"] .os-taskbar .stage-foot #sealExit { color: #ffd7cc; }
.os[data-skin="glossy"] .os-tray { border: 0; border-left: 1px solid #0c3a9e; background: linear-gradient(180deg, #0c59b9, #139ee9 12%, #18b5f2 50%, #0f8fdf); color: #fff; }
.os[data-skin="glossy"] .os-net { color: #ffd0c8; }
.os[data-skin="glossy"] .os-toast { border-radius: 8px; }
.os[data-skin="glossy"] .os-progress i { background: repeating-linear-gradient(90deg, #2ab32a 0 .6em, transparent .6em .75em); }

/* ---------------------------------------------------------------- the menu-bar look: a bar on top, a dock, rounded windows */
.os[data-skin="menubar"] { font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.os[data-skin="menubar"] .os-wall { background: radial-gradient(90% 75% at 68% 28%, #79b3ec 0%, #3274c8 38%, #154288 72%, #0a2350 100%); }
.os[data-skin="menubar"] .os-wall::after { color: #ffffff12; }
.os[data-skin="menubar"] .os-taskbar { top: 2.2%; bottom: auto; height: 1.8em; padding: 0 .5em; border: 0; border-bottom: 1px solid #8a8a8a; background: linear-gradient(180deg, #f8f8f8, #d9d9d9); box-shadow: 0 1px 8px #0005; }
.os[data-skin="menubar"] .os-start { padding: 0 .5em; border: 0; background: none; }
.os[data-skin="menubar"] .os-start span { display: none; }
.os[data-skin="menubar"] .os-start i { width: 1.05em; height: .7em; border-radius: 50%; background: radial-gradient(circle, #111 0 22%, #f3c94e 24% 52%, #2b2410 55%); box-shadow: none; }
.os[data-skin="menubar"] :is(.os-task, .os-taskbar .stage-foot :is(button, summary)) { flex: 0 0 auto; height: 100%; border: 0; background: none; color: #111; font-weight: 400; }
.os[data-skin="menubar"] .os-task[data-front] { font-weight: 700; background: none; }
.os[data-skin="menubar"] .os-tray { border: 0; color: #111; }
.os[data-skin="menubar"] .os-desk { top: calc(2.2% + 2.3em); bottom: calc(2.4% + 5em); }
.os[data-skin="menubar"] .os-toasts { top: calc(2.2% + 2.4em); bottom: auto; }
.os[data-skin="menubar"] .os-toast { border: 1px solid #b9b9b9; border-radius: 10px; background: #f5f5f5f2; box-shadow: 0 6px 18px #0006; }
.os[data-skin="menubar"] .os-icons { top: auto; bottom: 2.2%; left: 50%; z-index: 6; flex-direction: row; gap: .55em; padding: .4em .8em; transform: translateX(-50%); border: 1px solid #ffffff8c; border-radius: 14px; background: #ffffff3d; }
.os[data-skin="menubar"] .os-icon { width: 3.3em; }
.os[data-skin="menubar"] .os-icon svg { width: 2.9em; height: 2.9em; }
.os[data-skin="menubar"] .os-icon span { display: none; }
.os[data-skin="menubar"] .os-win { overflow: hidden; border: 1px solid #7d7d7d; border-radius: 8px; background: repeating-linear-gradient(180deg, #f3f3f3 0 2px, #e9e9e9 2px 4px); box-shadow: 0 12px 34px #000a; }
.os[data-skin="menubar"] .os-title { position: relative; justify-content: center; height: 1.8em; margin: 0; padding: 0 3.6em; border-bottom: 1px solid #9a9a9a; background: linear-gradient(180deg, #ededed, #cdcdcd); color: #222; font-weight: 400; letter-spacing: 0; }
.os[data-skin="menubar"] .os-win:not([data-front]) .os-title { background: #e6e6e6; color: #888; }
.os[data-skin="menubar"] .os-title-text { flex: 0 1 auto; text-align: center; }
.os[data-skin="menubar"] .os-btn { position: absolute; top: 50%; width: .95em; height: .95em; margin-top: -.475em; padding: 0; border: 1px solid #0004; border-radius: 50%; font-size: 0; }
.os[data-skin="menubar"] .os-close { left: .6em; background: radial-gradient(circle at 40% 35%, #ffb3ad, #ff5f57 60%, #c9372f); }
.os[data-skin="menubar"] .os-min { left: 1.95em; background: radial-gradient(circle at 40% 35%, #ffe7a6, #febc2e 60%, #c98f12); }
.os[data-skin="menubar"] .os-body { margin: 0; border: 0; }
.os[data-skin="menubar"] :is(.os-dialog .os-body, .os-win[data-app="report"] .os-body, .os-win[data-app="onfile"] .os-body, .os-tabs, .os-status) { background: #ececec; }
.os[data-skin="menubar"] .os-push { border: 1px solid #2a5fa8; border-radius: 1.2em; background: linear-gradient(180deg, #d6ebff 0%, #8fc3ff 45%, #5aa2f5 50%, #a6d4ff 100%); box-shadow: none; color: #0a2a52; }
.os[data-skin="menubar"] .os-tab { border-radius: 6px 6px 0 0; }
.os[data-skin="menubar"] .os-progress i { background: linear-gradient(180deg, #a6d4ff, #3d8fef); }

/* ---------------------------------------------------------------- its own look: black, yellow, characters (OFFLINE stays red) */
.os[data-skin="hive"] { font-family: var(--font, monospace); }
.os[data-skin="hive"] .os-wall { background: #050302; opacity: .5 !important; }
.os[data-skin="hive"] .os-wall::after { content: 'LOCUST'; color: #f3c94e12; }
.os[data-skin="hive"] .os-icon { color: var(--os-amber); }
.os[data-skin="hive"] .os-icon svg { filter: sepia(1) saturate(4) brightness(.85); }
.os[data-skin="hive"] .os-win { border: 1px solid #e2a12f; border-radius: 0; background: #050806e8; box-shadow: 0 0 0 1px #000, 0 0 18px #f3c94e33; }
.os[data-skin="hive"] .os-title, .os[data-skin="hive"] .os-win:not([data-front]) .os-title { margin: 0; border-bottom: 1px dashed #e2a12f88; background: none; color: var(--os-yellow); letter-spacing: .14em; text-shadow: 0 0 8px #f3c94e88; }
.os[data-skin="hive"] .os-btn { border: 1px solid #e2a12f; background: none; color: var(--os-amber) !important; }
.os[data-skin="hive"] .os-body { margin: 0; border: 0; background: #050806; color: #e8d9a6; }
.os[data-skin="hive"] :is(.os-report, .os-notes, .os-tabs, .os-status, .os-dialog .os-body, .os-win[data-app="report"] .os-body, .os-win[data-app="agents"] .os-body) { background: #050806; color: #f3d98a; }
.os[data-skin="hive"] .os-agents em { color: #a8955c; }
.os[data-skin="hive"] .os-push { border: 1px solid var(--os-amber); background: none; box-shadow: none; color: var(--os-yellow); }
.os[data-skin="hive"] .os-taskbar { border-top: 1px solid #e2a12f; background: #050806e6; box-shadow: none; }
.os[data-skin="hive"] :is(.os-start, .os-task, .os-taskbar .stage-foot :is(button, summary)) { border: 1px solid #e2a12f66; background: none; color: var(--os-amber); }
.os[data-skin="hive"] .os-start i { background: var(--os-yellow); box-shadow: 0 0 6px var(--os-yellow); border-radius: 50%; }
.os[data-skin="hive"] .os-tray { border-color: #e2a12f66; color: var(--os-amber); }
.os[data-skin="hive"] .os-net { color: #ef5d45; }
.os[data-skin="hive"] .os-toast { border: 1px solid var(--os-amber); background: #050806; color: var(--os-yellow); box-shadow: none; }

.reduce-motion .os :is(.os-win, .os-glyph, .os-feed img, .os-typing i, .os-toast, .os-icon, .os-cursor, .os-caret) { animation: none !important; }
.reduce-motion .os .os-fly { transition: opacity .3s ease; }

/* phones: the terminal takes the glass; what Locust opens comes over its top half */
@media (max-width: 600px) {
  .os-icons { display: none !important; }
  .os-win { left: 1% !important; width: 98% !important; }
  .os-win.os-terminal { top: 1% !important; height: 97% !important; }
  .os-win:not(.os-terminal):not(.os-dialog) { top: 2% !important; height: 46% !important; }
  .os-taskbar .stage-foot #settings, .os-taskbar :is(#skipTurn, #replayTurn), .os-task, .os-clock { display: none !important; }
  .os-tray { gap: 0; padding: 0 .4em; }
  .os-termlog { height: 5.6em; }
  .os[data-skin="menubar"] .os-desk { bottom: 2.4%; }
}