/* vacuum linux — a dark desktop, one green, sharp corners. Every size is in em of .vos. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap');

.vos {
  --bg: #0b0d0c; --bg1: #101312; --bg2: #161a18; --line: #2a2f2c; --dim: #5d6861; --mid: #8a938d; --fg: #c8d0c9; --hi: #e6ebe7;
  --acc: #478061; --acc2: #6fbf8f; --acc3: #abc2ab; --accbg: #16241c; --red: #b0776c; --warm: #c7a777;
  --px: max(1px, 0.06em);
  position: absolute; left: 0; top: 0; overflow: hidden; background: var(--bg); color: var(--fg);
  font-family: 'JetBrains Mono', ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace; font-size: 15px; line-height: 1.4;
  font-variant-ligatures: none; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; cursor: default;
  text-align: left; box-sizing: border-box; contain: strict;
}
.vos *, .vos *::before, .vos *::after { box-sizing: border-box; }
.vos button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; border-radius: 0; }
.vos kbd { font: inherit; font-size: 0.78em; color: var(--mid); border: 0.08em solid var(--line); padding: 0 0.35em; margin: 0 0.4em; }
.vos h1, .vos h2, .vos h3, .vos p, .vos ul, .vos pre { margin: 0; padding: 0; font: inherit; }
.vos .dim { color: var(--dim); } .vos .acc { color: var(--acc2); } .vos .err { color: var(--hi); } .vos .b { font-weight: 700; }
.vos .grow { flex: 1 1 auto; }
.vos ::-webkit-scrollbar { width: 0.5em; height: 0.5em; }
.vos ::-webkit-scrollbar-thumb { background: var(--line); }
.vos ::-webkit-scrollbar-track { background: transparent; }
.vos * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* standby and wake */
.vos-cover { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 90; transition: opacity 0.65s ease-out; }
.vos.standby .vos-cover { opacity: 1; pointer-events: auto; transition: none; }
.vos.instant .vos-cover { transition: none; }
.vos.standby .vos-bar, .vos.standby .vos-desk { visibility: hidden; }
.vos.waking .vos-bar { animation: vos-bar-in 0.7s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes vos-bar-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* bar */
.vos-bar { position: absolute; left: 0; top: 0; right: 0; height: 2.1em; background: var(--bg1); border-bottom: var(--px) solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; font-size: 0.86em; z-index: 40; white-space: nowrap; line-height: 1; }
.bar-left, .bar-right { display: flex; align-items: stretch; min-width: 0; }
.bar-right { justify-content: flex-end; }
.bar-title { overflow: hidden; text-overflow: ellipsis; padding: 0 1.2em; color: var(--mid); display: flex; align-items: center; justify-content: center; max-width: 46em; }
.bar-item { display: flex; align-items: center; padding: 0 0.8em; border-left: var(--px) solid var(--line); gap: 0.5em; }
.bar-item b { font-weight: 500; color: var(--fg); }
.bar-left .bar-item { border-left: 0; border-right: var(--px) solid var(--line); }
.bar-emblem { gap: 0.55em; color: var(--hi); font-weight: 500; padding: 0 0.9em 0 0.7em !important; }
.bar-emblem:hover, .bar-emblem.on { background: var(--accbg); }
.vos .emblem { width: 1.35em; height: 1.35em; display: block; flex: 0 0 auto; }
.bar-ws { display: flex; border-right: var(--px) solid var(--line); }
.bar-ws .ws { width: 2.1em; text-align: center; color: var(--dim); position: relative; }
.bar-ws .ws i { position: absolute; left: 50%; bottom: 0.22em; width: 0.3em; height: 0.3em; margin-left: -0.15em; background: transparent; }
.bar-ws .ws.occ { color: var(--fg); }
.bar-ws .ws.occ i { background: var(--acc2); }
.bar-ws .ws.cur { background: var(--acc); color: #06110b; font-weight: 700; }
.bar-ws .ws.cur.occ i { background: #06110b; }
.bar-ws .ws:hover:not(.cur) { background: var(--bg2); }
.bar-tabs { display: none; }
.bar-can .can-ico { height: 1.25em; width: 0.7em; }
.bar-can:hover, .bar-pi:hover { background: var(--bg2); }
.bar-can.flash { animation: vos-flash 0.5s; }
@keyframes vos-flash { from { background: var(--acc); } to { background: transparent; } }
.bar-stat { color: var(--mid); white-space: pre; }
.bar-pi i { display: block; width: 0.55em; height: 0.55em; background: #1c2420; outline: var(--px) solid var(--dim); }
.bar-pi.on i { background: #9af0be; outline-color: #e6ebe7; }
.bar-date { color: var(--mid); }
.bar-clock { color: var(--hi); font-weight: 500; }
.bar-room { color: var(--acc2); padding-right: 0.45em; gap: 0.2em; }
.bar-room:hover { background: var(--accbg); }

/* launcher, tooltip */
.vos-launcher { position: absolute; left: 0.6em; top: 2.25em; width: 27em; max-width: 96%; background: var(--bg1); border: var(--px) solid var(--acc); outline: var(--px) solid var(--acc); z-index: 60; display: none; font-size: 0.92em; }
.vos-launcher.open { display: block; }
.l-head { padding: 0.5em 0.7em; color: var(--hi); border-bottom: var(--px) solid var(--line); display: flex; align-items: center; gap: 0.6em; }
.l-head .dim { margin-left: auto; }
.l-row { display: flex !important; width: 100%; align-items: baseline; padding: 0.42em 0.5em !important; gap: 0.3em; }
.l-row.sel { background: var(--accbg); }
.l-name { color: var(--hi); width: 6em; flex: 0 0 auto; }
.l-row.sel .l-name { color: var(--acc2); }
.l-desc { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-foot { padding: 0.45em 0.8em; color: var(--dim); border-top: 0.07em solid var(--line); font-size: 0.82em; }
.vos-tip { position: absolute; display: none; z-index: 70; background: var(--hi); color: #0b0d0c; padding: 0.15em 0.6em; font-size: 0.8em; white-space: nowrap; pointer-events: none; }

/* desk, wallpaper, windows */
.vos-desk { position: absolute; left: 0; right: 0; top: 1.8em; bottom: 0; padding: 0.3em; }
.vos-wall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background-color: #080a09;
  background-image: radial-gradient(circle, #1d2320 0.07em, transparent 0.09em); background-size: 1.5em 1.5em; background-position: 0.4em 0.4em; }
.vos .wall-emblem { position: absolute; right: 7%; top: 50%; width: 34em; height: 34em; margin-top: -17em; opacity: 0.085; }
.wall-line { position: absolute; left: 1.4em; bottom: 1.1em; font-size: 0.8em; color: #35403a; letter-spacing: 0.04em; }
.wall-hint { position: absolute; right: 1.4em; bottom: 1.1em; font-size: 0.8em; color: #35403a; }
.vos-win { position: absolute; padding: 0.3em; }
.vos-win.floating { z-index: 20; padding: 0; }
.win-frame { position: relative; width: 100%; height: 100%; border: var(--px) solid #343b37; background: var(--bg); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.vos-win.focused .win-frame { border-color: var(--acc); outline: var(--px) solid var(--acc); }
.win-strip { flex: 0 0 auto; height: 1.6em; display: flex; align-items: center; gap: 0.6em; padding: 0 0.3em 0 0.7em; font-size: 0.78em; color: var(--dim); background: var(--bg1); border-bottom: var(--px) solid var(--line); cursor: grab; white-space: nowrap; overflow: hidden; touch-action: none; }
.vos-win.focused .win-strip { color: var(--mid); }
.win-app { color: var(--dim); }
.vos-win.focused .win-app { color: var(--acc2); }
.win-app::after { content: ' ·'; color: var(--line); }
.win-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.win-btn { width: 1.6em; height: 1.4em; text-align: center !important; color: var(--dim) !important; }
.win-btn:hover { background: var(--line) !important; color: var(--hi) !important; }
.win-body { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; container-type: size; container-name: win; }
.win-grip { position: absolute; right: 0; bottom: 0; width: 0.9em; height: 0.9em; display: none; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--acc) 50%); touch-action: none; }
.vos-win.floating .win-grip { display: block; }
.vos-ghost { position: absolute; display: none; align-items: center; justify-content: center; z-index: 30; border: 0.13em dashed var(--mid); background: rgba(71, 128, 97, 0.1); color: var(--mid); font-size: 0.8em; padding: 0.4em 0.7em; pointer-events: none; }
.vos-ghost.hit { border: 0.13em solid var(--acc2); background: rgba(71, 128, 97, 0.28); color: var(--hi); }
.vos.dragging, .vos.dragging * { cursor: grabbing !important; }

/* terminal */
.app-terminal { background: var(--bg); cursor: text; }
.term-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 0.5em 0.8em 0.6em; }
.term-out .ln, .term-prompt, .term-full .ln { white-space: pre-wrap; word-break: break-all; min-height: 1.4em; }
.term-out .ln.pre { word-break: normal; overflow-wrap: anywhere; }
.term-input { position: absolute; left: 0; bottom: 0; width: 2em; height: 1.4em; opacity: 0; border: 0; padding: 0; margin: 0; font-size: 16px; pointer-events: none; background: transparent; color: transparent; outline: none; }
.p-path { color: var(--acc2); } .p-br { color: var(--mid); } .p-sym { color: var(--hi); font-weight: 700; }
.vos .cur { background: var(--dim); color: var(--bg); }
.has-focus .cur { background: var(--acc2); animation: vos-blink 1.1s steps(1) infinite; }
.vos.frozen .cur { animation: none !important; }
@keyframes vos-blink { 50% { background: transparent; color: inherit; } }
.ln .dir { color: var(--acc2); font-weight: 500; } .ln .hash { color: var(--acc3); } .ln .art { color: var(--acc); font-weight: 700; }
.ln .add, .ln .d-add { color: var(--acc2); } .ln .del, .ln .d-del { color: var(--red); } .ln .d-hunk { color: var(--acc3); } .ln .d-b { color: var(--hi); font-weight: 700; } .ln .d-ctx { color: var(--fg); }
.ln .inv, .ln.inv { background: var(--line); color: var(--hi); }
.swatches i { display: inline-block; width: 1.8em; height: 0.95em; vertical-align: middle; }
.term-full { position: absolute; inset: 0; background: var(--bg); padding: 0.5em 0.8em; display: none; overflow: hidden; }
.term-full.on { display: block; }

/* shared rows */
.commit-row { display: flex; gap: 0.9em; padding: 0.16em 0; white-space: nowrap; overflow: hidden; }
.commit-row.local .c-hash { color: var(--acc2); }
.c-time { color: var(--dim); flex: 0 0 auto; } .c-hash { color: var(--acc3); flex: 0 0 auto; } .c-repo { color: var(--acc2); flex: 0 0 5.4em; overflow: hidden; text-overflow: ellipsis; } .c-msg { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.lang-dot { display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.45em; }
.star { color: var(--acc3); }
.tree-row { display: block !important; width: 100%; padding: 0.08em 0.6em 0.08em calc(0.6em + var(--d, 0) * 1.15em) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-row.is-dir { color: var(--acc2) !important; cursor: default !important; }
.tree-row.is-file:hover { background: var(--accbg); color: var(--hi); }
.tree-row.cur { background: var(--bg2); color: var(--hi); }
.vos .big { display: block; font-size: 1.7em; font-weight: 500; color: var(--acc2); line-height: 1.2; }

/* profile */
.app-profile, .app-repos, .app-amp, .app-pi { overflow-y: auto; user-select: text; -webkit-user-select: text; }
.prof { display: block; padding: 1.0em 1.3em 1.4em; min-height: 100%; max-width: 86em; }
.prof-head { display: flex; gap: 1.1em; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.0em; }
.prof-avatar .avatar { width: 6.2em; height: 6.2em; border: 0.13em solid var(--line); display: block; }
.prof-id { flex: 1 1 16em; min-width: 0; }
.prof-id h1 { font-size: 1.45em; font-weight: 700; color: var(--hi); line-height: 1.1; }
.prof-host { color: var(--dim); font-weight: 400; font-size: 0.62em; }
.prof-bio { color: var(--fg); margin-top: 0.35em; font-size: 0.9em; max-width: 44em; }
.prof-facts { list-style: none; margin-top: 0.45em; font-size: 0.8em; color: var(--mid); display: flex; flex-wrap: wrap; column-gap: 1.4em; }
.prof-facts b { display: inline-block; margin-right: 0.6em; color: var(--dim); font-weight: 400; }
.prof-stats { display: flex; gap: 0.5em; flex: 0 0 auto; }
.prof-stats > div { min-width: 5.6em; border: 0.08em solid var(--line); padding: 0.4em 0.6em; font-size: 0.72em; color: var(--dim); display: flex; flex-direction: column; }
.prof-stats .big { font-size: 2.1em; line-height: 1.1; color: var(--acc2); }
.prof-main { min-width: 0; }
.prof-main h2 { font-size: 0.86em; color: var(--mid); font-weight: 400; margin: 0 0 0.5em; }
.prof-main h2 b { color: var(--hi); font-weight: 700; }
.prof-main h2.pins-h { margin-top: 1.2em; }
.pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5em, 1fr)); gap: 0.45em; margin-bottom: 0.4em; }
.pin { display: flex !important; flex-direction: column; gap: 0.25em; border: 0.08em solid var(--line) !important; padding: 0.55em 0.7em !important; min-height: 5.6em; }
.pin:hover { border-color: var(--acc) !important; background: var(--bg1) !important; }
.pin b { color: var(--acc2); }
.pin-desc { font-size: 0.8em; color: var(--mid); flex: 1; }
.pin-meta { font-size: 0.78em; color: var(--mid); }
.heat { border: 0.08em solid var(--line); padding: 0.7em 0.8em 0.6em; }
.heat-top { padding-left: 2.6em; }
.heat-months { display: grid; column-gap: 0.17em; grid-template-columns: repeat(53, minmax(0, 1fr)); font-size: 0.7em; color: var(--dim); height: 1.6em; }
.heat-months span { white-space: nowrap; overflow: visible; }
.heat-body { display: flex; align-items: stretch; }
.heat-days { flex: 0 0 2.6em; display: grid; grid-template-rows: repeat(7, 1fr); font-size: 0.7em; color: var(--dim); }
.heat-days span { display: flex; align-items: center; }
.heat-grid { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(53, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); grid-auto-flow: column; gap: 0.17em; }
.heat-grid .cell { aspect-ratio: 1 / 1; width: 100%; }
.vos .cell { display: block; background: #131614; cursor: pointer; outline-offset: 0; font-style: normal; }
.cell.l1 { background: #1a3f2c; } .cell.l2 { background: #2b6a47; } .cell.l3 { background: #46a06e; } .cell.l4 { background: #9af0be; }
.cell.none { background: transparent; cursor: default; }
.cell:hover:not(.none) { outline: 0.1em solid var(--hi); }
.cell.sel { outline: 0.12em solid var(--hi); }
.cell.pulse { animation: vos-pulse 1.6s ease-out 2; }
@keyframes vos-pulse { 0% { outline: 0.5em solid rgba(134, 220, 170, 0.9); } 100% { outline: 0.12em solid var(--hi); } }
.heat-legend { display: flex; align-items: center; gap: 0.3em; font-size: 0.72em; color: var(--dim); margin-top: 0.6em; }
.heat-legend .cell { width: 0.95em; height: 0.95em; cursor: default; }
.prof-day { margin-top: 0.9em; font-size: 0.86em; }
.prof-day h3 { color: var(--hi); margin-bottom: 0.3em; }

/* repos */
.repos { padding: 1em 1.3em 1.4em; }
.repos-head { display: flex; align-items: baseline; gap: 1em; flex-wrap: wrap; margin-bottom: 0.7em; }
.repos-head h1 { font-size: 1.15em; color: var(--mid); } .repos-head h1 b { color: var(--hi); }
.r-back { color: var(--acc2) !important; }
.r-back:hover { text-decoration: underline; }
.repo-row { display: grid !important; grid-template-columns: 8em 1fr; gap: 0.1em 1em; width: 100%; border-top: 0.08em solid var(--line) !important; padding: 0.7em 0.5em !important; }
.repo-row:last-child { border-bottom: 0.08em solid var(--line) !important; }
.repo-row:hover { background: var(--bg1) !important; }
.r-name { color: var(--acc2); font-weight: 700; grid-row: span 2; }
.r-desc { color: var(--fg); } .r-meta { font-size: 0.8em; color: var(--mid); }
.r-about { color: var(--fg); margin-bottom: 0.7em; }
.lang-bar { display: flex; height: 0.45em; gap: 0.12em; } .lang-bar i { display: block; }
.lang-key { font-size: 0.78em; color: var(--mid); margin: 0.4em 0 1em; }
.r-cols { display: flex; gap: 1.2em; align-items: flex-start; }
.r-left { flex: 0 0 42%; min-width: 0; font-size: 0.88em; }
.r-left h3 { color: var(--mid); font-weight: 400; margin: 0.2em 0 0.35em; }
.r-tree { border: 0.08em solid var(--line); padding: 0.3em 0; margin-bottom: 1em; }
.r-commits .commit-row { font-size: 0.94em; }
.r-readme { flex: 1 1 auto; min-width: 0; border: 0.08em solid var(--line); padding: 0 1em 1em; font-size: 0.9em; }
.readme-tab { margin: 0 -1em 0.8em; padding: 0.3em 1em; border-bottom: 0.08em solid var(--line); color: var(--dim); font-size: 0.86em; background: var(--bg1); }
.r-readme h2 { font-size: 1.35em; color: var(--hi); font-weight: 700; margin: 0.2em 0 0.5em; }
.r-readme h3 { color: var(--acc2); margin: 1em 0 0.35em; font-weight: 500; }
.r-readme p { margin: 0.45em 0; } .r-readme ul { margin: 0.4em 0 0.4em 1.3em; }
.r-readme pre { background: var(--bg1); border-left: 0.16em solid var(--acc); padding: 0.5em 0.8em; margin: 0.5em 0; overflow-x: auto; color: var(--acc3); }
.r-readme code { color: var(--acc3); }

/* editor */
.app-editor { display: flex; cursor: text; }
.ed-side { flex: 0 0 11.5em; border-right: 0.08em solid var(--line); overflow-y: auto; font-size: 0.82em; padding-bottom: 0.5em; background: var(--bg1); cursor: default; }
.ed-side-head { padding: 0.4em 0.6em; color: var(--dim); border-bottom: 0.08em solid var(--line); margin-bottom: 0.3em; }
.ed-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ed-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: flex-start; padding: 0.3em 0 2em; }
.ed-gutter { flex: 0 0 auto; text-align: right; color: #3d4641; padding: 0 0.8em 0 0.7em !important; line-height: 1.5em; user-select: none; }
.ed-area { position: relative; flex: 1 0 auto; padding-right: 2em; }
.ed-code { line-height: 1.5em; white-space: pre; color: var(--fg); tab-size: 4; }
.ed-cursor { position: absolute; height: 1.5em; pointer-events: none; }
.ed-cursor.blk { width: 1ch; background: rgba(111, 191, 143, 0.45); }
.ed-cursor.ins { width: 0.14em; background: var(--acc2); }
.has-focus .ed-cursor.ins { animation: vos-blink2 1.1s steps(1) infinite; }
.vos.frozen .ed-cursor { animation: none !important; }
@keyframes vos-blink2 { 50% { opacity: 0; } }
.app-editor:not(.has-focus) .ed-cursor.blk { background: transparent; outline: 0.08em solid var(--dim); }
.t-k { color: var(--acc2); } .t-s { color: #9db8a2; } .t-c { color: #515b55; font-style: italic; } .t-n { color: var(--acc3); } .t-f { color: var(--hi); } .t-t { color: #8fae9b; } .t-p { color: var(--mid); } .t-b { font-weight: 700; }
.ed-status { flex: 0 0 auto; display: flex; align-items: center; gap: 0.9em; background: var(--bg1); border-top: 0.08em solid var(--line); font-size: 0.82em; height: 1.75em; padding-right: 0.8em; white-space: nowrap; overflow: hidden; cursor: default; }
.ed-mode { padding: 0 0.8em; height: 100%; display: flex; align-items: center; background: var(--line); color: var(--hi); font-weight: 700; }
.ed-mode.m-insert { background: var(--acc); color: #06110b; }
.ed-mode.m-command { background: var(--acc3); color: #06110b; }
.ed-file { color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
.ed-save { border: 0.08em solid var(--line) !important; padding: 0 0.6em !important; color: var(--acc2) !important; }
.ed-save:hover { border-color: var(--acc) !important; }
.ed-cmd { flex: 0 0 auto; height: 1.7em; padding: 0.12em 0.8em; font-size: 0.86em; white-space: nowrap; overflow: hidden; }

/* amp */
.amp { padding: 1em 1.3em 1.3em; display: flex; flex-direction: column; min-height: 100%; }
.amp-head, .pi-head { display: flex; align-items: baseline; gap: 1em; margin-bottom: 0.9em; flex-wrap: wrap; }
.amp-head h1, .pi-head h1 { font-size: 1.3em; font-weight: 700; color: var(--hi); }
.amp-sound { font-size: 0.8em; }
.amp-strings { border: 0.08em solid var(--line); padding: 0.9em 0; display: grid; gap: 0.75em; background: var(--bg1); }
.amp-strings i { display: block; height: 0.1em; background: var(--dim); transform-origin: center; }
.amp-strings i:nth-child(n+4) { height: 0.07em; }
.amp-strings i.vib { animation: vos-vib 0.5s linear; background: var(--acc2); }
@keyframes vos-vib { 0% { transform: scaleY(3.2); } 20% { transform: scaleY(1) translateY(0.14em); } 40% { transform: scaleY(2.4) translateY(-0.1em); } 60% { transform: translateY(0.07em); } 80% { transform: scaleY(1.6); background: var(--acc); } 100% { transform: none; background: var(--dim); } }
.amp-meter { display: grid; grid-template-columns: repeat(28, 1fr); gap: 0.16em; height: 0.9em; margin: 0.5em 0 1em; }
.amp-meter i { background: var(--bg2); }
.amp-meter i.on { background: var(--acc); }
.amp-meter i.on:nth-child(n+19) { background: var(--acc2); }
.amp-meter i.on:nth-child(n+25) { background: var(--hi); }
.amp-label, .pi-label { font-size: 0.86em; color: var(--mid); margin: 0.9em 0 0.4em; }
.amp-pads { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4em; flex: 1 1 4em; max-height: 15em; }
.pad { border: 0.13em solid var(--line) !important; padding: 0.9em 0.4em 0.7em !important; text-align: center !important; display: flex !important; align-items: center; justify-content: center; font-size: 1.25em; font-weight: 700; color: var(--fg) !important; position: relative; touch-action: manipulation; }
.pad kbd { position: absolute; left: 0.2em; top: 0.25em; font-size: 0.5em; border: 0; margin: 0; }
.pad:hover { border-color: var(--dim) !important; }
.pad.sel { border-color: var(--acc) !important; color: var(--acc2) !important; }
.pad.hit { animation: vos-hit 0.35s ease-out; }
@keyframes vos-hit { from { background: var(--acc); color: #06110b; } to { background: transparent; } }
.amp-grid { display: grid; grid-template-columns: repeat(16, 1fr); gap: 0.2em; }
.cellb { border: 0.08em solid var(--line) !important; text-align: center !important; padding: 0.55em 0 !important; font-size: 0.82em; color: var(--dim) !important; }
.cellb.beat { border-bottom: 0.16em solid var(--dim) !important; }
.cellb.on { color: var(--hi) !important; background: var(--accbg) !important; border-color: var(--acc) !important; }
.cellb.now { background: var(--acc) !important; color: #06110b !important; }
.amp-ctl { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; margin-top: 1em; }
.amp-scope { display: block; width: 100%; flex: 1 1 5em; min-height: 5em; max-height: 17em; border: 0.08em solid var(--line); background: var(--bg1); }
.amp-btn { border: 0.1em solid var(--line) !important; padding: 0.3em 0.8em !important; color: var(--fg) !important; font-size: 0.9em; }
.amp-btn:hover { border-color: var(--dim) !important; }
.amp-btn.on { border-color: var(--acc) !important; color: var(--acc2) !important; background: var(--accbg) !important; }
.amp-btn.play { min-width: 4.6em; text-align: center !important; font-weight: 700; color: var(--acc2) !important; border-color: var(--acc) !important; }
.amp-btn.play.on { background: var(--acc) !important; color: #06110b !important; }
.amp-btn.sm { padding: 0.3em 0.6em !important; }
.amp-tempo { display: flex; align-items: center; gap: 0.5em; font-size: 0.9em; color: var(--mid); margin-left: 0.4em; }

/* pi */
.pi { padding: 1em 1.3em 1.3em; display: flex; flex-direction: column; min-height: 100%; }
.pi-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
.pi .tile { border: 0.08em solid var(--line); padding: 0.55em 0.75em; font-size: 0.86em; min-width: 0; overflow: hidden; white-space: nowrap; }
.pi-graph { position: relative; flex: 1 1 6.5em; min-height: 6.5em; max-height: 22em; border: 0.08em solid var(--line); background: var(--bg1); }
.pi-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pi-graph span { position: absolute; right: 0.4em; font-size: 0.7em; color: var(--dim); }
.pi-graph .g-max { top: 0.2em; } .pi-graph .g-min { bottom: 0.2em; }
.pi-gpio { display: flex; gap: 0.8em; align-items: center; flex-wrap: wrap; }
.pi-led { display: grid !important; grid-template-columns: auto auto; column-gap: 0.8em; align-items: center; border: 0.13em solid var(--line) !important; padding: 0.55em 0.9em !important; }
.pi-led i { grid-row: span 2; width: 1.9em; height: 1.9em; background: #1a211d; border: 0.13em solid var(--line); display: block; }
.pi-led.on { border-color: var(--acc) !important; }
.pi-led.on i { background: #9af0be; border-color: #e6ebe7; outline: 0.2em solid rgba(134, 220, 170, 0.28); }
.pi-led span:first-of-type { color: var(--hi); font-weight: 700; }
.pi-led span.dim { font-size: 0.8em; }
.pi-pins { display: grid; grid-template-columns: repeat(20, 0.5em); grid-template-rows: repeat(2, 0.5em); grid-auto-flow: column; gap: 0.2em; padding: 0.35em; border: 0.08em solid var(--line); }
.pi-pins i { background: var(--line); display: block; }
.pi-pins i.gnd { background: var(--dim); }
.pi-pins i.p17 { background: var(--acc); } .pi-pins i.p17.on { background: #9af0be; outline: 0.12em solid rgba(134, 220, 170, 0.4); }
.pi-svc { font-size: 0.88em; }

/* portrait / phone: monocle */
.vos.portrait .bar-ws, .vos.portrait .bar-stat, .vos.portrait .bar-title, .vos.portrait .bar-date, .vos.portrait .bar-pi, .vos.portrait .bar-emblem span, .vos.portrait .bar-room kbd { display: none; }
.vos.portrait .vos-bar { grid-template-columns: 1fr 0 auto; }
.vos.portrait .vos-desk { padding: 0; } .vos.portrait .vos-win { padding: 0; }
.vos.portrait .bar-tabs { display: flex; flex: 1 1 auto; overflow-x: auto; }
.vos.portrait .bar-left { flex: 1 1 auto; min-width: 0; }
.vos.portrait .bar-tabs .tab { padding: 0 0.6em; color: var(--dim); border-right: 0.07em solid var(--line); }
.vos.portrait .bar-tabs .tab.cur { color: #06110b; background: var(--acc); font-weight: 700; }
.vos.portrait .bar-item { padding: 0 0.55em; }
.vos.portrait .vos-bar { height: 2.3em; }
.vos.portrait .vos-desk { top: 1.98em; }
.vos.portrait .win-btn:first-of-type { display: none; }
.vos.portrait .prof { padding: 0.9em; }
.vos.portrait .prof-avatar .avatar { width: 4.6em; height: 4.6em; }
.vos.portrait .heat { overflow-x: auto; }
.vos.portrait .heat-top, .vos.portrait .heat-body { min-width: 46em; }
.vos.portrait .r-cols { flex-direction: column; }
.vos.portrait .r-left { flex: 0 0 auto; width: 100%; }
.vos.portrait .r-readme { width: 100%; }
.vos.portrait .ed-side { display: none; }
.vos.portrait .amp-pads { grid-template-columns: repeat(3, 1fr); }
.vos.portrait .amp-grid { grid-template-columns: repeat(8, 1fr); }
.vos.portrait .pi-tiles { grid-template-columns: 1fr 1fr; }
.vos.portrait .repo-row { grid-template-columns: 1fr; } .vos.portrait .r-name { grid-row: auto; }
.vos.portrait .vos-launcher { left: 2%; width: 96%; }

/* fetch block, push progress */
.fetch { display: flex; flex-wrap: wrap; gap: 0.8em 2.4em; align-items: center; padding-left: 1em; white-space: normal; word-break: normal; }
.fetch.narrow { flex-direction: column; align-items: flex-start; gap: 0.8em; }
.vos .fetch-art { line-height: 1.3; color: var(--acc); white-space: pre; letter-spacing: 0; font-family: 'JetBrains Mono', ui-monospace, 'DejaVu Sans Mono', monospace; }
.fetch-art .art2 { color: var(--acc2); }
.fetch-info > div { white-space: pre; min-height: 1.4em; }
.pbar-row { display: flex; align-items: center; gap: 1em; height: 1.4em; color: var(--mid); white-space: pre; }
.pbar { position: relative; flex: 0 1 24em; height: 0.22em; background: var(--line); }
.pbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--acc2); }
.pbar-row.done .pbar i { background: var(--acc); }
.pbar-row.done { color: var(--acc2); }