.desktop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: transparent;
    pointer-events: none;
}

/* Window shell */
.window {
    position: absolute;
    will-change: transform;
    pointer-events: auto;
}

.window-inner {
    background: var(--bg);
    border: 1px solid var(--lite-100);
}

/* Active window emphasis */
.window.is-active .window-inner {
    box-shadow: 3px 6px 48px var(--bg);
    /* border-color: var(--acc-600); */
}

/* Header (drag handle) */
.window-header,
.window-header * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--lite-100);
    background: var(--bg);
    font-size: 10px;
    font-weight: 200;
    letter-spacing: 0.12em;
    cursor: grab;
}

.window.is-dragging .window-header {
    cursor: grabbing;
}

.window-title {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--lite-100);
    text-transform: uppercase;
}

/* Close button */
.window-close {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid var(--lite-100);
    background: transparent;
    padding: 0;
    cursor: pointer;
}

/* Window body */
.window-body {
    /* padding: 10px 12px 12px; */
    background: var(--bg);
}

/* Mask region */
.window-mask {
    position: relative;
    overflow: hidden;
    /* border: 1px solid #ffffff; */
    background: var(--bg);
}

/* Window size variants */
.window-mask-wide {
    width: 60vw;
    min-width: 340px;
    max-width: 1440px;
    height: 30vh;
    min-height: 340px;
    max-height: 1440px;
}

.window-mask-square {
    aspect-ratio: 1 / 1;
    width: clamp(340px, 50vmin, 1440px);
    height: auto;
}

.window-mask-tall {
    width: 25vw;
    min-width: 340px;
    max-width: 1440px;
    height: 50vh;
    min-height: 340px;
    max-height: 1440px;
}

/* Scene inside mask */
.window-scene {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

img.window-scene {
    mix-blend-mode: screen;  /* grayscale looks bright/white over your BG */
}

/* Position presets (viewport-relative) */
.window-pos-center {
    top: 5%;
    left: 30%;
}

.window-pos-top {
    top: 10svh;
    left: 50%;
}

.window-pos-bottom {
    bottom: 10svh;
    left: 50%;
}

.window-pos-left {
    left: 8vw;
    top: 50%;
}

.window-pos-right {
    right: 8vw;
    top: 50%;
}

.window-pos-top-left {
    top: 8svh;
    left: 8vw;
}

.window-pos-top-right {
    top: 8svh;
    right: 8vw;
}

.window-pos-bottom-left {
    bottom: 8svh;
    left: 8vw;
}

.window-pos-bottom-right {
    bottom: 8svh;
    right: 8vw;
}

/* Two-panel vertical layout */

.layout-stack {
    min-height: 100vh;
}

.panel {
    position: relative;
    min-height: 100vh;
}

.panel--crt {
    position: relative;
    background: var(--bg);
}

.crt {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg);
    z-index: 0;
}

/* Dust over base, under windows */
.crt-dust {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 100;
}

/* Windows over dust, under CRT glass */
.crt .window {
    position: absolute;
}

/* Scanlines over windows */
.crt::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.035) 0px,
        rgba(255,255,255,0.035) 1px,
        rgba(0,0,0,0.22) 2px,
        rgba(0,0,0,0.22) 3px
    );
    background-size: 100% 3px;
    mix-blend-mode: soft-light;
    opacity: 0.8;
    filter: blur(0.25px);
    box-shadow: inset 20px 50px 100px var(--ink-900);
}

/* Glow + vignette topmost */
.crt::after {
    content: "";
    position: absolute;
    inset: -10%;
    pointer-events: none;
    z-index: 9001;
    background:
        radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.5), transparent 60%),
        radial-gradient(circle at 50% 100%, rgb(0, 0, 0), transparent 70%);
    mix-blend-mode: screen;
    opacity: 0.9;
    box-shadow: inset 20px 50px 100px var(--ink-900);
}