/* KullDesktop — branded Windows/macOS/Ubuntu-style OS chrome.
   Link AFTER ../../styles.css. Shared across the 10 OS showcase pages. */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--kg-ink); color: var(--text); font-family: var(--font-sans); overflow: hidden; }
a { color: inherit; text-decoration: none; }

.kd { position: fixed; inset: 0; overflow: hidden; }
.kd-wall { position: absolute; inset: 0; background-size: cover; background-position: center; }
.kd-wall::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,9,31,.30), rgba(16,9,31,.12) 35%, rgba(16,9,31,.34)); }

/* window */
.kd-win { position: absolute; border-radius: 12px; overflow: hidden; background: var(--surface-card); box-shadow: 0 40px 90px -25px rgba(10,5,20,.75), 0 2px 0 rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.4); display: flex; flex-direction: column; }
.kd-title { height: 40px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--kg-ink); color: #fff; }
.kd-title .lights { display: flex; gap: 8px; }
.kd-title .lights i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.kd-title .t { font-size: 13px; font-weight: 600; }
.kd-title .t b { color: var(--kg-gold); }

/* glass panel */
.kd-glass { background: rgba(27,17,40,.72); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12); color: #fff; }

/* pixel app icon tile */
.kd-app { display: grid; place-items: center; border-radius: 12px; font-size: 22px; }