@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

/* KapeOS - every rule is scoped under .kos so nothing leaks into the host page.
   Look: warm ink surfaces, one amber accent, film grain. Palette and type mirror the
   landing site (KennethVillar-landing tokens.css); layout.js TOKENS is the canvas mirror. */

.kos {
  /* surfaces, stepped */
  --kos-ink: #12100E;
  --kos-graphite: #1B1815;
  --kos-graphite-hi: #211D19;
  --kos-hair: #2C2621;
  --kos-slate: #3A332C;
  /* text */
  --kos-paper: #F6F2EA;
  --kos-clay: #A79D91;
  --kos-clay-dim: #8C8378;
  /* the one accent */
  --kos-amber: #F0A726;
  --kos-amber-hi: #FFB93F;
  --kos-amber-deep: #B07B1E;
  --kos-amber-wash: rgb(240 167 38 / 0.10);
  --kos-amber-line: rgb(240 167 38 / 0.38);
  --kos-on-amber: #12100E;
  /* semantic, not an accent: errors and the bug in the game */
  --kos-warn: #D2694F;
  --kos-bean: #9A6238;
  --kos-bean-hi: #E9D5BA;
  /* material: grain blended into a surface's own background, lit top edge, soft sheen */
  --kos-grain: url('./assets/textures/grain.png') 0 0 / 160px;
  --kos-grain-amber: url('./assets/textures/grain-amber.png') 0 0 / 160px;
  --kos-sheen: linear-gradient(180deg, rgb(246 242 234 / 0.05), rgb(246 242 234 / 0) 48%);
  --kos-edge: inset 0 1px 0 rgb(246 242 234 / 0.08);
  --kos-edge-amber: inset 0 1px 0 rgb(255 185 63 / 0.22);
  --kos-shade-1: rgb(0 0 0 / 0.35);
  --kos-shade-2: rgb(0 0 0 / 0.6);
  /* shape */
  --kos-r-btn: 12px;
  --kos-r-panel: 14px;
  --kos-r-chip: 9px;
  /* motion */
  --kos-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --kos-ease: cubic-bezier(0.5, 0, 0.2, 1);
  /* type */
  --kos-display: "Archivo Black", "Arial Black", sans-serif;
  --kos-font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --kos-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --kos-u: 1;

  font-family: var(--kos-font);
  color: var(--kos-paper);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

/* zero-specificity resets so component classes always win */
:where(.kos) *, :where(.kos) *::before, :where(.kos) *::after { box-sizing: border-box; }
:where(.kos) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
:where(.kos) input, :where(.kos) textarea { font: inherit; color: inherit; margin: 0; }
:where(.kos) h2, :where(.kos) h3, :where(.kos) p { margin: 0; }
:where(.kos) * { scrollbar-width: thin; scrollbar-color: var(--kos-slate) transparent; }
.kos ::selection { background: var(--kos-amber); color: var(--kos-on-amber); }
.kos :focus-visible { outline: 2px solid var(--kos-amber); outline-offset: 2px; }
.kos .kos-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 0; }
.kos .kos-logo { --lh: 22px; display: inline-flex; flex: none; }
.kos .kos-logo img { display: block; height: var(--lh); width: auto; }
.kos .kos-logo.chip { padding: 4px; border-radius: 8px; background: var(--kos-paper); }
.kos .kos-logo.wide { --lh: 16px; }

.kos .kos-sys { position: absolute; inset: 0; overflow: hidden; background: var(--kos-ink); user-select: none; -webkit-user-select: none; isolation: isolate; }
.kos .kos-wall { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- top bar ---------- */
.kos .kos-bar {
  position: absolute; left: 0; right: 0; top: 0; height: var(--bar); z-index: 4;
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--bar-px);
  background: var(--kos-grain), var(--kos-sheen), var(--kos-graphite); background-blend-mode: overlay, normal, normal;
  border-bottom: 1px solid var(--kos-hair); box-shadow: var(--kos-edge); font-size: var(--fs-bar); line-height: 1;
}
.kos .kos-bar-l, .kos .kos-bar-r { display: flex; align-items: center; min-width: 0; }
.kos .kos-bar-l { gap: calc(8px * var(--u)); }
.kos .kos-bar-r { gap: calc(12px * var(--u)); }
.kos .kos-mark { background: var(--kos-paper); border-radius: calc(var(--fs-bar) * 0.5); padding: calc(var(--fs-bar) * 0.18); }
.kos .kos-mark svg, .kos .kos-mark img { width: calc(var(--fs-bar) * 1.5); height: calc(var(--fs-bar) * 1.5); }
.kos .kos-mark-img { display: block; object-fit: contain; user-select: none; }
.kos .kos-s-logo img { width: 46px; height: 46px; }
.kos .kos-brand { font-family: var(--kos-display); font-weight: 400; letter-spacing: -0.02em; margin-right: calc(10px * var(--u)); }
.kos .kos-appname {
  font-weight: 600; color: var(--kos-amber); background: var(--kos-amber-wash); border-radius: var(--kos-r-chip); white-space: nowrap;
  padding: calc(6px * var(--u)) calc(11px * var(--u));
}
.kos .kos-clock { font-weight: 500; color: var(--kos-clay); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kos .kos-cd { margin-right: 0.28em; }
.kos .kos-pill {
  height: var(--pill-h); padding: 0 calc(14px * var(--u)); border-radius: 999px; display: inline-flex; align-items: center; gap: calc(4px * var(--u));
  background: var(--kos-graphite-hi); border: 1px solid var(--kos-hair); box-shadow: var(--kos-edge); font-size: calc(var(--fs-bar) * 0.95); font-weight: 500; white-space: nowrap;
  transition: transform 0.35s var(--kos-spring), background 0.2s, color 0.2s;
}
.kos .kos-pill .kos-ic svg { width: calc(var(--pill-h) * 0.52); height: calc(var(--pill-h) * 0.52); }
.kos .kos-pill .kos-ic { margin-left: calc(-2px * var(--u)); }
.kos .kos-pill:hover { background: var(--kos-slate); transform: translateY(-1px); }
.kos .kos-pill:active { transform: scale(0.96); }
.kos .kos-snd.on { color: var(--kos-amber); background: var(--kos-amber-wash); border-color: var(--kos-amber-line); }
.kos .kos-short { display: none; }
.kos.kos-phone .kos-brand, .kos.kos-phone .kos-cd, .kos.kos-phone .kos-long, .kos.kos-phone .kos-snd-t { display: none; }
.kos.kos-phone .kos-short { display: inline; }
.kos.kos-phone .kos-snd { width: var(--pill-h); padding: 0; justify-content: center; }
.kos.kos-phone .kos-snd .kos-ic { margin: 0; }
.kos.kos-phone .kos-pill { padding: 0 10px; }
.kos.kos-phone .kos-bar-r { gap: 8px; }
.kos.kos-phone .kos-appname { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }

/* ---------- desktop icons + widget ---------- */
.kos .kos-desk { position: absolute; inset: 0; z-index: 1; }
.kos .kos-di { position: absolute; left: var(--desk-x); width: var(--desk-tile); height: var(--desk-tile); border-radius: 26%; }
.kos .kos-di { top: calc(var(--desk-y) + var(--desk-step) * var(--i, 0)); }   /* --i = its place in DESK, set in os.js */
.kos .kos-di .kos-tile { width: 100%; height: 100%; transition: transform 0.35s var(--kos-spring); }
.kos .kos-di:hover .kos-tile { transform: translateY(-3px) scale(1.04); }
.kos .kos-di.sel .kos-tile { box-shadow: var(--kos-edge), 0 0 0 2px var(--kos-amber); }
.kos .kos-di-l {
  position: absolute; left: 50%; top: calc(100% + 8px * var(--u)); transform: translateX(-50%); white-space: nowrap;
  height: calc(var(--desk-fs) + 8px * var(--u)); padding: 0 calc(8px * var(--u)); display: flex; align-items: center; border-radius: 999px;
  background: var(--kos-graphite); border: 1px solid var(--kos-hair); font-size: var(--desk-fs); font-weight: 500; line-height: 1;
}
.kos .kos-tile {
  display: grid; place-items: center; border-radius: 26%; color: var(--kos-paper);
  background: var(--kos-grain), var(--kos-sheen), var(--kos-graphite-hi); background-blend-mode: overlay, normal, normal;
  box-shadow: var(--kos-edge), 0 0 0 1px var(--kos-hair), 0 6px 14px -6px var(--kos-shade-2);
}
.kos .kos-tile .kos-ic { width: 58%; height: 58%; }
.kos .kos-tile .kos-ic svg { width: 100%; height: 100%; }

.kos .kos-widget {
  position: absolute; z-index: 1; right: var(--wid-right); top: var(--wid-top); width: var(--wid-w); height: var(--wid-h); border-radius: var(--wid-r);
  background: var(--kos-grain), var(--kos-sheen), var(--kos-graphite); background-blend-mode: overlay, normal, normal;
  border: 1px solid var(--kos-hair); box-shadow: var(--kos-edge), 0 12px 28px -12px var(--kos-shade-2); overflow: hidden;
}
.kos .kos-widget > div { position: absolute; left: calc(22px * var(--u)); right: calc(14px * var(--u)); line-height: 1; white-space: nowrap; }
.kos .kos-w-l { top: calc(24px * var(--u)); font-family: var(--kos-mono); font-weight: 700; font-size: calc(11px * var(--u)); letter-spacing: 0.2em; text-transform: uppercase; color: var(--kos-amber); }
.kos .kos-w-t { top: calc(42px * var(--u)); font-family: var(--kos-display); font-size: calc(50px * var(--u)); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.kos .kos-w-d { top: calc(102px * var(--u)); font-size: calc(14px * var(--u)); font-weight: 500; color: var(--kos-clay); }
.kos .kos-w-q { top: calc(123px * var(--u)); font-size: calc(13px * var(--u)); color: var(--kos-clay-dim); }

/* ---------- dock ---------- */
.kos .kos-dock-wrap { position: absolute; left: 0; right: 0; bottom: var(--dock-bottom); display: flex; justify-content: center; pointer-events: none; z-index: 3; }
.kos .kos-dock {
  pointer-events: auto; display: flex; gap: var(--dock-gap); padding: var(--dock-pad); border-radius: var(--dock-r);
  background: var(--kos-grain), var(--kos-sheen), var(--kos-graphite); background-blend-mode: overlay, normal, normal;
  border: 1px solid var(--kos-hair); box-shadow: var(--kos-edge), 0 14px 30px -10px var(--kos-shade-2);
}
.kos .kos-dk-item { position: relative; width: var(--dock-icon); height: var(--dock-icon); }
.kos .kos-dk-btn { display: block; width: 100%; height: 100%; border-radius: 26%; transform-origin: 50% 100%; transition: transform 0.45s var(--kos-spring); will-change: transform; }
.kos .kos-dock.mag .kos-dk-btn { transition: transform 0.09s linear; }
.kos .kos-dk-btn:active { filter: brightness(0.9); }
.kos .kos-dk-btn .kos-tile { width: 100%; height: 100%; }
.kos .kos-dk-dot { position: absolute; left: 50%; bottom: calc(var(--dock-pad) * -0.62); width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--kos-amber); opacity: 0; transform: scale(0); transition: opacity 0.2s, transform 0.4s var(--kos-spring); }
.kos .kos-dk-item.running .kos-dk-dot { opacity: 1; transform: scale(1); }
.kos .kos-dk-tip {
  position: absolute; left: 50%; bottom: calc(100% + var(--dock-icon) * 0.58); transform: translate(-50%, 6px); opacity: 0; pointer-events: none; white-space: nowrap;
  background: var(--kos-graphite-hi); color: var(--kos-paper); border: 1px solid var(--kos-hair); box-shadow: var(--kos-edge);
  font-family: var(--kos-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 8px; transition: opacity 0.15s, transform 0.3s var(--kos-spring); z-index: 2;
}
.kos .kos-dk-item:hover .kos-dk-tip { opacity: 1; transform: translate(-50%, 0); }

/* ---------- windows ---------- */
.kos .kos-wins { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.kos .kos-win {
  position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; flex-direction: column; border-radius: var(--kos-r-panel);
  background: var(--kos-grain), var(--kos-sheen), var(--kos-graphite); background-blend-mode: overlay, normal, normal;
  border: 1px solid var(--kos-hair);
  box-shadow: var(--kos-edge), 0 10px 24px -8px var(--kos-shade-1); transform-origin: 50% 50%; will-change: transform;
  user-select: none; transition: box-shadow 0.25s, border-color 0.25s;
}
.kos .kos-win.active { border-color: var(--kos-slate); box-shadow: var(--kos-edge), 0 30px 70px -14px var(--kos-shade-2), 0 8px 20px -6px var(--kos-shade-1); }
.kos .kos-win.min { display: none; }
.kos .kos-win.minimizing { pointer-events: none; }
.kos .kos-win.dragging { transition: none; }
.kos .kos-win.dragging .kos-wb { pointer-events: none; }
.kos .kos-win.max { border-radius: 0; }
.kos .kos-win.max .kos-tb { border-radius: 0; }
.kos .kos-win.max .kos-wb { border-radius: 0; }
.kos .kos-tb {
  height: 40px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: var(--kos-grain), var(--kos-sheen), var(--kos-graphite-hi); background-blend-mode: overlay, normal, normal;
  border-bottom: 1px solid var(--kos-hair); border-radius: calc(var(--kos-r-panel) - 1px) calc(var(--kos-r-panel) - 1px) 0 0; cursor: grab; touch-action: none;
}
.kos .kos-win.dragging .kos-tb { cursor: grabbing; }
.kos .kos-tl { display: flex; gap: 7px; align-items: center; }
.kos .kos-tb-btn { width: 12px; height: 12px; border-radius: 50%; display: grid; place-items: center; background: var(--kos-slate); color: var(--kos-paper); transition: transform 0.3s var(--kos-spring), background 0.2s; }
.kos .kos-win.active .kos-tb-btn.close { background: var(--kos-amber); color: var(--kos-on-amber); }
.kos .kos-tb-btn .kos-ic { opacity: 0; transition: opacity 0.15s; }
.kos .kos-tl:hover .kos-tb-btn .kos-ic { opacity: 1; }
.kos .kos-tb-btn:hover { transform: scale(1.2); }
.kos .kos-tb-btn.close:hover { background: var(--kos-amber-hi); color: var(--kos-on-amber); }
.kos .kos-tb-btn.min:hover, .kos .kos-tb-btn.max:hover { background: var(--kos-clay-dim); }
.kos .kos-tb-btn svg { width: 8px; height: 8px; stroke-width: 2.6; }
.kos .kos-tt { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--kos-clay); min-width: 0; flex: 1; }
.kos .kos-tt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kos .kos-tt-ic svg { width: 16px; height: 16px; }
.kos .kos-tr { display: none; }
.kos .kos-wb { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 0 0 calc(var(--kos-r-panel) - 1px) calc(var(--kos-r-panel) - 1px); }
.kos .kos-wb > * { width: 100%; height: 100%; }
.kos .kos-rz { position: absolute; z-index: 3; touch-action: none; }
.kos .kos-rz-n { top: -4px; left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.kos .kos-rz-s { bottom: -4px; left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.kos .kos-rz-e { right: -4px; top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
.kos .kos-rz-w { left: -4px; top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
.kos .kos-rz-ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: nesw-resize; }
.kos .kos-rz-nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nwse-resize; }
.kos .kos-rz-se { bottom: -4px; right: -4px; width: 18px; height: 18px; cursor: nwse-resize; }
.kos .kos-rz-sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: nesw-resize; }
.kos .kos-win.max .kos-rz { display: none; }

/* ---------- shared controls ---------- */
.kos .kos-btn {
  height: 32px; padding: 0 14px; border-radius: var(--kos-r-btn); display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  background: var(--kos-graphite-hi); border: 1px solid var(--kos-hair); box-shadow: var(--kos-edge); font-size: 13px; font-weight: 500; transition: transform 0.3s var(--kos-spring), background 0.2s;
}
.kos .kos-btn:hover { transform: translateY(-1px); background: var(--kos-slate); }
.kos .kos-btn:active { transform: scale(0.97); }
.kos .kos-btn.primary {
  background: var(--kos-grain-amber), var(--kos-amber); background-blend-mode: overlay, normal; color: var(--kos-on-amber); border: 0; box-shadow: var(--kos-edge-amber);
  font-family: var(--kos-mono); font-weight: 700; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.kos .kos-btn.primary:hover { background: var(--kos-grain-amber), var(--kos-amber-hi); background-blend-mode: overlay, normal; }
.kos .kos-btn.big { height: 46px; padding: 0 24px; border-radius: var(--kos-r-btn); font-size: 12.5px; }
.kos .kos-lbl { font-family: var(--kos-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kos-clay-dim); }
.kos .kos-tool { width: 34px; height: 34px; border-radius: var(--kos-r-chip); display: grid; place-items: center; transition: background 0.15s, transform 0.3s var(--kos-spring); }
.kos .kos-tool:hover { background: var(--kos-slate); }
.kos .kos-tool:active { transform: scale(0.92); }
.kos .kos-tool[aria-pressed="true"] { background: var(--kos-amber-wash); color: var(--kos-amber); }
.kos .kos-range { accent-color: var(--kos-amber); width: 150px; }

/* ---------- terminal ---------- */
.kos .kos-term-wrap { position: relative; background: var(--kos-grain), var(--kos-ink); background-blend-mode: overlay, normal; color: var(--kos-paper); }
.kos .kos-term { height: 100%; overflow: auto; padding: 14px 16px 18px; font-family: var(--kos-mono); font-size: 12.5px; line-height: 1.6; user-select: text; -webkit-user-select: text; }
.kos .kos-t-line { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.6em; }
.kos .kos-t-line .a { color: var(--kos-amber); }
.kos .kos-t-line .u { color: var(--kos-amber-hi); font-weight: 700; }
.kos .kos-t-line .p { color: var(--kos-clay); }
.kos .kos-t-line .c { color: var(--kos-clay-dim); }
.kos .kos-t-line .m, .kos .kos-t-line.m { color: var(--kos-clay-dim); }
.kos .kos-t-line.a { color: var(--kos-amber); }
.kos .kos-t-line.err { color: var(--kos-warn); }
.kos .kos-t-line .dir { color: var(--kos-amber); font-weight: 700; }
.kos .kos-t-cols { display: flex; flex-wrap: wrap; gap: 0 22px; }
.kos .kos-t-inline { display: flex; }
.kos .kos-t-prompt { white-space: pre; flex: none; }
.kos .kos-t-in { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; caret-color: var(--kos-amber); font-family: var(--kos-mono); font-size: 12.5px; padding: 0; }
.kos .kos-t-matrix { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.kos .kos-t-logos { display: flex; gap: 8px; align-items: center; padding: 4px 0 6px; }
.kos .kos-t-logos .kos-logo { --lh: 22px; }

/* ---------- paint ---------- */
.kos .kos-paint { display: flex; flex-direction: column; background: var(--kos-ink); }
.kos .kos-p-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; padding: 8px 10px; background: var(--kos-graphite-hi); border-bottom: 1px solid var(--kos-hair); }
.kos .kos-grp { display: flex; align-items: center; gap: 4px; padding: 0 10px; }
.kos .kos-grp + .kos-grp { border-left: 1px solid var(--kos-hair); }
.kos .kos-grp.kos-sp { margin-left: auto; }
.kos .kos-size { width: 34px; height: 34px; border-radius: var(--kos-r-chip); display: grid; place-items: center; transition: background 0.15s; }
.kos .kos-size i { display: block; border-radius: 50%; background: var(--kos-clay); }
.kos .kos-size:hover { background: var(--kos-slate); }
.kos .kos-size[aria-pressed="true"] { background: var(--kos-amber-wash); }
.kos .kos-size[aria-pressed="true"] i { background: var(--kos-amber); }
.kos .kos-sws { display: grid; grid-template-columns: repeat(6, 22px); gap: 5px; }
.kos .kos-sw { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--kos-slate); transition: transform 0.3s var(--kos-spring); }
.kos .kos-sw:hover { transform: scale(1.12); }
.kos .kos-sw[aria-pressed="true"] { transform: scale(1.18); box-shadow: 0 0 0 2px var(--kos-graphite-hi), 0 0 0 4px var(--kos-amber); }
.kos .kos-p-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.kos .kos-p-cv { position: absolute; left: 0; top: 0; display: block; touch-action: none; background: var(--kos-paper); }

/* ---------- drum pad ---------- */
.kos .kos-drums { container-type: inline-size; display: flex; flex-direction: column; gap: 12px; padding: 14px; overflow: auto; }
.kos .kos-d-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-radius: var(--kos-r-panel); background: var(--kos-graphite-hi); border: 1px solid var(--kos-hair); box-shadow: var(--kos-edge); }
.kos .kos-d-banner.hide { display: none; }
.kos .kos-d-banner b { display: block; font-size: 14px; font-weight: 600; }
.kos .kos-d-banner > div > span { font-size: 13px; color: var(--kos-clay); }
.kos .kos-d-main { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; flex: 1 1 auto; min-height: 330px; }
.kos .kos-d-pads { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 8px; min-height: 0; }
.kos .kos-pad {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; min-height: 54px; padding: 9px 10px; border-radius: var(--kos-r-panel);
  border: 1px solid var(--kos-hair); box-shadow: var(--kos-edge); touch-action: manipulation; user-select: none; will-change: transform;
}
.kos .kos-pad.r0 { background: color-mix(in srgb, var(--kos-amber) 6%, var(--kos-graphite-hi)); }
.kos .kos-pad.r1 { background: color-mix(in srgb, var(--kos-amber) 11%, var(--kos-graphite-hi)); }
.kos .kos-pad.r2 { background: color-mix(in srgb, var(--kos-amber) 17%, var(--kos-graphite-hi)); }
.kos .kos-pad.r3 { background: color-mix(in srgb, var(--kos-amber) 24%, var(--kos-graphite-hi)); }
.kos .kos-pad-n { font-size: 12.5px; font-weight: 600; position: relative; z-index: 1; }
.kos .kos-pad-k { align-self: flex-end; font-family: var(--kos-mono); font-size: 10.5px; color: var(--kos-clay); background: var(--kos-ink); border-radius: 6px; padding: 2px 6px; border: 1px solid var(--kos-hair); position: relative; z-index: 1; }
.kos .kos-pad-flash { position: absolute; inset: 0; background: var(--kos-amber-hi); opacity: 0; pointer-events: none; z-index: 0; }
.kos .kos-d-side { display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 0; overflow: hidden; border-radius: var(--kos-r-panel); background: var(--kos-graphite-hi); border: 1px solid var(--kos-hair); box-shadow: var(--kos-edge); }
.kos .kos-d-head { display: flex; flex-direction: column; gap: 8px; }
.kos .kos-d-scope { width: 100%; height: 56px; display: block; }
.kos .kos-d-tip { font-size: 13px; color: var(--kos-clay); line-height: 1.5; }
.kos .kos-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kos .kos-preset { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; width: 100%; height: 48px; padding: 0 12px; background: var(--kos-graphite); }
.kos .kos-preset small { font-family: var(--kos-mono); font-size: 10.5px; color: var(--kos-clay-dim); }
.kos .kos-d-seq { padding: 12px 14px; border-radius: var(--kos-r-panel); background: var(--kos-graphite-hi); border: 1px solid var(--kos-hair); box-shadow: var(--kos-edge); flex: none; }
.kos .kos-d-ctl { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.kos .kos-tempo { display: flex; align-items: center; gap: 10px; }
.kos .kos-bpm-w { display: flex; align-items: baseline; gap: 4px; min-width: 52px; }
.kos .kos-bpm { font-family: var(--kos-mono); font-weight: 700; font-size: 14px; color: var(--kos-amber); }
.kos .kos-bpm-w small { font-size: 11px; color: var(--kos-clay-dim); }
.kos .kos-sq { display: flex; flex-direction: column; gap: 5px; }
.kos .kos-sq-row { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 8px; }
.kos .kos-sq-l { font-family: var(--kos-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kos-clay-dim); }
.kos .kos-sq-cells { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; }
.kos .kos-st { height: 22px; border-radius: 6px; background: var(--kos-hair); transition: transform 0.25s var(--kos-spring), background 0.12s; }
.kos .kos-st.beat { background: var(--kos-slate); }
.kos .kos-st[aria-pressed="true"] { background: var(--kos-amber); }
.kos .kos-st.now { transform: translateY(-3px); background: var(--kos-clay-dim); }
.kos .kos-st.now[aria-pressed="true"] { background: var(--kos-amber-hi); }
@container (max-width: 640px) {
  .kos .kos-d-main { grid-template-columns: 1fr; }
  .kos .kos-d-side { display: none; }
  .kos .kos-d-pads { grid-auto-rows: minmax(54px, 1fr); }
  .kos .kos-d-banner { flex-direction: column; align-items: flex-start; }
  .kos .kos-sq-row { grid-template-columns: 1fr; gap: 2px; }
  .kos .kos-sq-l { display: none; }
}

/* ---------- game ---------- */
.kos .kos-game { position: relative; background: radial-gradient(70% 55% at 50% 100%, var(--kos-amber-wash), transparent 70%), var(--kos-ink); overflow: hidden; }
.kos .kos-g-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: 0; cursor: none; }
.kos .kos-g-hud { position: absolute; left: 18px; right: 18px; top: 14px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.kos .kos-g-l { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kos .kos-g-score { font-family: var(--kos-display); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.kos .kos-g-combo { font-family: var(--kos-mono); font-size: 14px; font-weight: 700; color: var(--kos-amber); }
.kos .kos-g-best { font-family: var(--kos-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kos-clay-dim); }
.kos .kos-g-r { display: flex; gap: 4px; padding-top: 4px; color: var(--kos-amber); }
.kos .kos-g-life { transition: transform 0.4s var(--kos-spring), opacity 0.3s; }
.kos .kos-g-life.off { opacity: 0.2; transform: scale(0.8); }
.kos .kos-g-ov { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--kos-ink) 62%, transparent); transition: opacity 0.3s; z-index: 2; }
.kos .kos-g-ov.hide { opacity: 0; pointer-events: none; visibility: hidden; }
.kos .kos-g-card {
  background: var(--kos-grain), var(--kos-sheen), var(--kos-graphite); background-blend-mode: overlay, normal, normal; border: 1px solid var(--kos-hair); border-radius: 20px;
  padding: 28px 30px; text-align: center; max-width: 330px; box-shadow: var(--kos-edge), 0 24px 50px -14px var(--kos-shade-2); display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.kos .kos-g-ot { font-family: var(--kos-display); font-size: 28px; letter-spacing: -0.035em; line-height: 1.05; }
.kos .kos-g-os { font-size: 14px; color: var(--kos-clay); line-height: 1.5; }
.kos .kos-g-ok { font-family: var(--kos-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kos-clay-dim); }

/* ---------- notes ---------- */
.kos .kos-notes { container-type: inline-size; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.kos .kos-n-side { display: flex; flex-direction: column; background: var(--kos-graphite-hi); border-right: 1px solid var(--kos-hair); min-height: 0; }
.kos .kos-n-sh { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 8px 16px; }
.kos .kos-n-list { flex: 1; overflow: auto; padding: 4px 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.kos .kos-n-item { display: block; width: 100%; padding: 10px 12px; border-radius: var(--kos-r-chip); transition: background 0.15s; }
.kos .kos-n-item:hover { background: var(--kos-slate); }
.kos .kos-n-item.sel { background: var(--kos-amber-wash); }
.kos .kos-n-item b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kos .kos-n-item.sel b { color: var(--kos-amber); }
.kos .kos-n-item span { display: block; font-size: 12px; color: var(--kos-clay); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kos .kos-n-item small { display: block; font-family: var(--kos-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kos-clay-dim); margin-top: 3px; }
.kos .kos-n-main { display: flex; flex-direction: column; padding: 16px 26px 14px; min-width: 0; min-height: 0; }
.kos .kos-n-title { border: 0; outline: 0; background: transparent; font-family: var(--kos-display); font-size: 26px; letter-spacing: -0.035em; padding: 4px 0 10px; width: 100%; user-select: text; }
.kos .kos-n-title[readonly] { cursor: default; }
.kos .kos-n-links { display: none; flex-direction: column; gap: 6px; padding-bottom: 14px; min-height: 0; overflow: auto; }
.kos .kos-n-links.on { display: flex; }
.kos .kos-n-links.row { flex-direction: row; flex-wrap: wrap; gap: 8px; flex: none; }
.kos .kos-n-links:not(.row) { flex: 1; }
.kos .kos-n-link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--kos-r-btn); border: 1px solid var(--kos-hair); background: var(--kos-graphite-hi); box-shadow: var(--kos-edge); color: var(--kos-paper); text-decoration: none; transition: transform 0.3s var(--kos-spring), border-color 0.15s; }
.kos .kos-n-link:hover { border-color: var(--kos-amber-line); transform: translateY(-1px); }
.kos .kos-n-link .kos-logo { --lh: 20px; }
.kos .kos-n-link span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kos .kos-n-link b { font-size: 14px; font-weight: 600; }
.kos .kos-n-link small { font-size: 12.5px; color: var(--kos-clay); }
.kos .kos-n-link i { font-style: normal; font-family: var(--kos-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--kos-amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kos .kos-n-links.row .kos-n-link { padding: 6px 12px 6px 6px; gap: 8px; }
.kos .kos-n-links.row .kos-n-link b { font-size: 13px; }
.kos .kos-n-body { flex: 1; min-height: 0; border: 0; outline: 0; background: transparent; resize: none; font-size: 15.5px; line-height: 1.7; color: var(--kos-clay); user-select: text; padding: 0; }
.kos .kos-n-tools { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--kos-hair); }
.kos .kos-n-status { font-family: var(--kos-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kos-clay-dim); margin-right: auto; }
.kos .kos-n-back { display: none; align-self: flex-start; margin-bottom: 6px; }
@container (max-width: 540px) {
  .kos .kos-notes { grid-template-columns: 1fr; }
  .kos .kos-n-side { border-right: 0; }
  .kos .kos-notes.editing .kos-n-side { display: none; }
  .kos .kos-notes:not(.editing) .kos-n-main { display: none; }
  .kos .kos-n-back { display: inline-flex; }
  .kos .kos-n-main { padding: 12px 16px; }
}

/* ---------- videos (reels) ---------- */
.kos .kos-reels, .kos .kos-course { display: flex; flex-direction: column; min-height: 0; padding: 22px 26px 0; }
.kos .kos-r-top, .kos .kos-c-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.kos .kos-r-top h2, .kos .kos-c-top h2 { font-family: var(--kos-display); font-weight: 400; font-size: 26px; letter-spacing: -0.035em; line-height: 1.05; }
.kos .kos-r-top p { margin-top: 6px; color: var(--kos-clay); font-size: 14px; max-width: 52ch; }
.kos a.kos-btn { text-decoration: none; color: var(--kos-paper); }
.kos a.kos-btn.primary { color: var(--kos-on-amber); }
.kos .kos-r-bar { display: flex; align-items: center; gap: 14px; margin: 16px 0 14px; }
.kos .kos-r-search { flex: 1; height: 40px; padding: 0 14px; border-radius: var(--kos-r-btn); border: 1px solid var(--kos-hair); background: var(--kos-ink); color: var(--kos-paper); outline: 0; font-size: 14px; user-select: text; transition: border-color 0.15s; }
.kos .kos-r-search::placeholder { color: var(--kos-clay-dim); }
.kos .kos-r-search:focus { border-color: var(--kos-amber-line); }
.kos .kos-r-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 16px; align-content: start; padding: 2px 2px 26px; }
.kos .kos-r-card { display: flex; flex-direction: column; gap: 8px; color: var(--kos-paper); text-decoration: none; }
.kos .kos-r-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--kos-r-panel); overflow: hidden; background: var(--kos-graphite-hi); border: 1px solid var(--kos-hair); box-shadow: var(--kos-edge); }
.kos .kos-r-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--kos-ease); }
.kos .kos-r-card:hover .kos-r-thumb img { transform: scale(1.05); }
.kos .kos-r-card:hover .kos-r-thumb { border-color: var(--kos-amber-line); }
.kos .kos-r-play { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--kos-amber); box-shadow: 0 6px 18px var(--kos-shade-2); transition: transform 0.35s var(--kos-spring); }
.kos .kos-r-play::after { content: ""; position: absolute; left: 16px; top: 12px; border: 8px solid transparent; border-left: 12px solid var(--kos-on-amber); border-right: 0; }
.kos .kos-r-card:hover .kos-r-play { transform: scale(1.12); }
.kos .kos-r-thumb small { position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 6px; background: var(--kos-ink); color: var(--kos-paper); font-family: var(--kos-mono); font-size: 10.5px; letter-spacing: 0.04em; }
.kos .kos-r-card b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.kos .kos-r-date { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--kos-clay-dim); }
.kos .kos-r-date .kos-logo { --lh: 13px; }
.kos .kos-r-none { grid-column: 1 / -1; padding: 30px 0; color: var(--kos-clay); font-size: 14px; }

/* ---------- course ---------- */
.kos .kos-c-by { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.kos .kos-c-tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--kos-r-btn); background: var(--kos-ink); border: 1px solid var(--kos-hair); flex: none; }
.kos .kos-c-tab { padding: 8px 14px; border-radius: var(--kos-r-chip); font-size: 13px; font-weight: 600; color: var(--kos-clay); transition: background 0.15s, color 0.15s; white-space: nowrap; }
.kos .kos-c-tab.on { background: var(--kos-amber-wash); color: var(--kos-amber); }
.kos .kos-c-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 14px; padding: 16px 18px; border-radius: var(--kos-r-panel); border: 1px solid var(--kos-hair); background: var(--kos-graphite-hi); box-shadow: var(--kos-edge); }
.kos .kos-c-head h3 { font-family: var(--kos-display); font-weight: 400; font-size: 19px; letter-spacing: -0.03em; }
.kos .kos-c-head p { margin-top: 4px; font-size: 13px; color: var(--kos-clay); }
.kos .kos-c-mods { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 26px; }
.kos .kos-c-mod { border: 1px solid var(--kos-hair); border-radius: var(--kos-r-panel); background: var(--kos-graphite-hi); flex: none; }
.kos .kos-c-mod header { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 16px; padding: 16px 18px 14px; border-bottom: 1px solid var(--kos-hair); }
.kos .kos-c-mod header .kos-lbl { grid-column: 1 / -1; color: var(--kos-amber); }
.kos .kos-c-mod header b { font-family: var(--kos-display); font-weight: 400; font-size: 17px; letter-spacing: -0.03em; }
.kos .kos-c-mod header small { font-family: var(--kos-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kos-clay-dim); }
.kos .kos-c-mod ol { list-style: none; margin: 0; padding: 6px 0; }
.kos .kos-c-mod li { display: grid; grid-template-columns: 62px 1fr auto; align-items: baseline; gap: 12px; padding: 7px 18px; font-size: 14px; }
.kos .kos-c-mod li i { font-style: normal; font-family: var(--kos-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--kos-clay-dim); }
.kos .kos-c-mod li em { font-style: normal; font-family: var(--kos-mono); font-size: 11px; color: var(--kos-clay-dim); white-space: nowrap; }
.kos .kos-c-mod li.recap span { color: var(--kos-clay); }
.kos .kos-c-mod li.check i, .kos .kos-c-mod li.check span { color: var(--kos-amber); }
.kos.kos-phone .kos-r-top, .kos.kos-phone .kos-c-top, .kos.kos-phone .kos-c-head { flex-direction: column; align-items: stretch; }
.kos.kos-phone .kos-r-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.kos.kos-phone .kos-c-mod li { grid-template-columns: 50px 1fr auto; }

/* ---------- settings ---------- */
.kos .kos-settings { overflow-y: auto; padding: 22px 26px 30px; }
.kos .kos-s-sec { padding: 20px 0; border-top: 1px solid var(--kos-hair); }
.kos .kos-s-sec:first-child { border-top: 0; padding-top: 0; }
.kos .kos-s-sec h3 { font-family: var(--kos-display); font-weight: 400; font-size: 16px; letter-spacing: -0.02em; }
.kos .kos-s-sec p { margin-top: 4px; color: var(--kos-clay); font-size: 13.5px; line-height: 1.5; }
.kos .kos-s-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.kos .kos-s-bn { font-family: var(--kos-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kos-amber); }
.kos .kos-s-big { width: 100%; aspect-ratio: 7 / 3; display: block; border-radius: var(--kos-r-panel); box-shadow: var(--kos-edge), 0 0 0 1px var(--kos-hair), 0 16px 30px -16px var(--kos-shade-2); }
.kos .kos-s-ths { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.kos .kos-s-th { width: 100%; border-radius: var(--kos-r-chip); transition: transform 0.35s var(--kos-spring); }
.kos .kos-s-th:hover { transform: translateY(-2px); }
.kos .kos-s-th canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 9px; box-shadow: 0 0 0 1px var(--kos-hair); transition: box-shadow 0.2s; }
.kos .kos-s-th[aria-pressed="true"] canvas { box-shadow: 0 0 0 2px var(--kos-graphite), 0 0 0 4px var(--kos-amber); }
.kos .kos-s-th span { display: block; margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--kos-clay); text-align: center; }
.kos .kos-s-th[aria-pressed="true"] span { color: var(--kos-amber); }
.kos .kos-s-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.kos .kos-s-ctl { display: flex; align-items: center; gap: 12px; }
.kos .kos-s-state { font-family: var(--kos-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kos-clay-dim); }
.kos .kos-switch { width: 48px; height: 28px; border-radius: 999px; background: var(--kos-slate); position: relative; transition: background 0.25s; flex: none; }
.kos .kos-switch i { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--kos-paper); box-shadow: 0 2px 5px var(--kos-shade-1); transition: transform 0.4s var(--kos-spring); }
.kos .kos-switch[aria-checked="true"] { background: var(--kos-amber); }
.kos .kos-switch[aria-checked="true"] i { transform: translateX(20px); }
.kos .kos-s-about { display: flex; gap: 18px; align-items: flex-start; }
.kos .kos-s-logo { width: 68px; height: 68px; border-radius: 26%; display: grid; place-items: center; flex: none; background: var(--kos-paper); box-shadow: 0 8px 20px -8px var(--kos-shade-2); }
.kos .kos-s-fine { font-size: 12.5px !important; color: var(--kos-clay-dim) !important; }

/* ---------- boot ---------- */
.kos .kos-boot {
  position: absolute; inset: 0; z-index: 20; display: none; place-items: center; cursor: pointer;
  background: var(--kos-grain), radial-gradient(55% 45% at 50% 50%, color-mix(in srgb, var(--kos-amber) 22%, transparent), transparent 70%), var(--kos-ink);
  background-blend-mode: overlay, normal, normal;
}
.kos .kos-boot.on { display: grid; }
.kos .kos-boot.out { opacity: 0; transition: opacity 0.55s var(--kos-ease); pointer-events: none; }
.kos .kos-boot-in { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.kos .kos-boot-logo {
  width: calc(132px * var(--u)); height: calc(132px * var(--u)); border-radius: 28%; display: grid; place-items: center; background: var(--kos-paper);
  box-shadow: 0 24px 44px -14px var(--kos-shade-2), 0 0 0 1px var(--kos-hair);
  opacity: 0; transform: scale(0.6);
}
.kos .kos-boot.on .kos-boot-logo { animation: kos-logo 0.9s var(--kos-spring) 0.1s forwards; }
.kos .kos-boot-cup svg, .kos .kos-boot-cup img { width: calc(84px * var(--u)); height: calc(84px * var(--u)); }
.kos .kos-boot-name { font-family: var(--kos-display); font-size: calc(38px * var(--u)); letter-spacing: -0.035em; opacity: 0; transform: translateY(8px); }
.kos .kos-boot.on .kos-boot-name { animation: kos-fade 0.7s var(--kos-spring) 0.45s forwards; }
.kos .kos-boot-track { width: calc(220px * var(--u)); height: 3px; border-radius: 3px; background: var(--kos-hair); overflow: hidden; }
.kos .kos-boot-track i { display: block; height: 100%; width: 100%; background: var(--kos-amber); transform: scaleX(0); transform-origin: 0 50%; }
.kos .kos-boot.run .kos-boot-track i { animation: kos-prog 1.8s var(--kos-ease) 0.25s forwards; }
.kos .kos-boot-hint { position: absolute; bottom: 28px; font-family: var(--kos-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kos-clay-dim); }
@keyframes kos-logo { to { opacity: 1; transform: scale(1); } }
@keyframes kos-prog { to { transform: scaleX(1); } }
.kos .kos-sys.kos-in .kos-bar, .kos .kos-sys.kos-in .kos-desk, .kos .kos-sys.kos-in .kos-widget { animation: kos-rise 0.8s var(--kos-spring) both; }
.kos .kos-sys.kos-in .kos-dock { animation: kos-rise-dock 0.9s var(--kos-spring) both; }
.kos .kos-sys.kos-in .kos-wall { animation: kos-fade-in 0.6s ease both; }
@keyframes kos-rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes kos-rise-dock { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes kos-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .kos *, .kos *::before, .kos *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
}

/* scrolling lists get their own layer, so os/scroll.js can move them every frame without repainting the window */
.kos :is(.kos-c-mods, .kos-r-grid, .kos-n-list, .kos-n-links, .kos-settings, .kos-term, .kos-drums) { will-change: scroll-position; overscroll-behavior: contain; }

/* ---- Portfolio / Kape Tools: a small browser on a capture of the live site (os/apps/site.js) */
.kos .kos-site { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.kos .kos-s-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--kos-hair); }
.kos .kos-s-nav { display: flex; gap: 6px; color: var(--kos-clay-dim); }
.kos .kos-s-nav .fwd { display: inline-flex; transform: scaleX(-1); opacity: .45; }
.kos .kos-s-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--kos-ink); border: 1px solid var(--kos-hair); color: var(--kos-paper); text-decoration: none; font-family: var(--kos-mono); font-size: 12px; transition: border-color .2s; }
.kos .kos-s-url:hover { border-color: var(--kos-amber-deep); }
.kos .kos-s-url i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--kos-amber); }
.kos .kos-s-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kos .kos-s-view { flex: 1; min-height: 0; overflow-y: auto; will-change: scroll-position; overscroll-behavior: contain; background: var(--kos-ink); }
.kos .kos-s-page { display: block; cursor: pointer; }
.kos .kos-s-page img { display: block; width: 100%; height: auto; }
.kos .kos-s-note { display: flex; align-items: center; gap: 12px; padding: 14px 18px 20px; color: var(--kos-clay); font-size: 13px; }
.kos.kos-phone .kos-s-nav { display: none; }