:root {
    --win-bg: #d8d4cc;
    --win-light: #ffffff;
    --win-mid: #aaa69e;
    --win-dark: #4d4b48;
    --win-blue-dark: #000080;
    --win-blue-light: #168bd2;
    --win-purple: #7759b8;
    --desktop-blue: #5874bd;
    --desktop-purple: #745191;
    --ink: #101010;
    --yellow: #fff56b;
    --hard-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--ink);
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    background:
        radial-gradient(circle at 77% 18%, rgba(255,255,255,.35), transparent 22%),
        radial-gradient(circle at 18% 72%, rgba(255,155,224,.28), transparent 28%),
        linear-gradient(135deg, var(--desktop-blue), var(--desktop-purple) 55%, #263660);
    cursor: url("assests/icons/cursor-waiting.png"), auto;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .1;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.12) 0,
        rgba(255,255,255,.12) 1px,
        transparent 1px,
        transparent 4px
    );
}

button,
textarea,
input {
    font: inherit;
}

button {
    cursor: url("assests/icons/cursor-hover.png"), pointer;
}

img {
    display: block;
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

/* =========================
   Windows chrome
========================= */

.app-titlebar,
.windows-taskbar {
    background: linear-gradient(90deg, var(--win-blue-dark), var(--win-blue-light));
    color: #fff;
    text-shadow: 1px 1px 0 #000;
}

.app-titlebar {
    min-height: 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    border-bottom: 2px solid #000;
}

.app-title-left {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
}

.app-title-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.window-controls {
    display: flex;
    gap: 2px;
}

.win-btn-ctrl {
    width: 18px;
    height: 16px;
    padding: 0;
    position: relative;
    border: 2px solid;
    border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
    background: var(--win-bg);
}

.win-btn-ctrl:active {
    border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
}

.win-btn-ctrl.min::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 2px;
    left: 3px;
    bottom: 2px;
    background: #000;
}

.win-btn-ctrl.max::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 7px;
    left: 2px;
    top: 2px;
    border: 1px solid #000;
}

.win-btn-ctrl.close::before {
    content: "×";
    position: absolute;
    inset: -2px 0 0;
    color: #000;
    font-weight: 700;
    line-height: 14px;
}

.win-window {
    background: var(--win-bg);
    border: 2px solid;
    border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
    box-shadow: var(--hard-shadow);
}

.win-titlebar {
    min-height: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 3px 5px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(90deg, var(--win-blue-dark), var(--win-blue-light));
    text-shadow: 1px 1px 0 #000;
}

.win-content {
    padding: 12px;
}

.win-button,
.option-button,
.start-button {
    border: 2px solid;
    border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
    background: var(--win-bg);
    color: #111;
    padding: 7px 10px;
}

.win-button:active,
.option-button:active,
.start-button:active {
    border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
}

.win-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* =========================
   Main shell
========================= */

.app-shell {
    min-height: calc(100vh - 72px);
    display: grid;
    place-items: center;
    padding: 24px 24px 66px;
}

/* =========================
   Landing
========================= */

.landing-screen {
    width: min(1160px, 100%);
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 34px;
    align-items: center;
}

.landing-intro {
    color: #fff;
}

.logo-label {
    margin: 0 0 10px;
    color: var(--yellow);
    font-size: clamp(36px, 7vw, 88px);
    line-height: .9;
    font-weight: 900;
    letter-spacing: -.08em;
    text-shadow: 4px 4px 0 #1e245b;
}

.landing-intro h1 {
    margin: 0;
    max-width: 620px;
    font-size: clamp(22px, 3vw, 38px);
    line-height: 1.05;
    text-shadow: 2px 2px 0 #1c2048;
}

.intro-copy {
    margin: 16px 0 0;
    font-size: 15px;
}

.helper-card,
.mascot-card {
    margin-top: 18px;
    padding: 12px;
    color: #111;
    background: rgba(255,255,255,.72);
    border: 2px solid rgba(255,255,255,.85);
    box-shadow: var(--hard-shadow);
}

.helper-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: fit-content;
    transform: rotate(-1deg);
}

.mascot-card {
    width: min(360px, 100%);
    display: flex;
    align-items: center;
    gap: 12px;
}

.mascot-card img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.disc-interaction {
    min-height: 580px;
    position: relative;
    display: grid;
    place-items: center;
}

.cd-case {
    width: min(500px, 100%);
    position: relative;
    outline: 0 solid transparent;
    transition: transform .18s steps(2), filter .18s steps(2), outline-width .18s;
}

.cd-case:focus-visible {
    outline: 3px dotted var(--yellow);
    outline-offset: 8px;
}

.cd-case.is-drag-over {
    transform: scale(1.025);
    outline: 4px solid var(--yellow);
    outline-offset: 8px;
    filter: drop-shadow(0 0 16px rgba(255,245,107,.9));
}

.case-label {
    position: absolute;
    left: 4%;
    bottom: 7%;
    padding: 7px 10px;
    background: var(--yellow);
    border: 1px solid #000;
    box-shadow: 2px 2px 0 #000;
    transform: rotate(-5deg);
    font-weight: 700;
}

.case-drop-hint {
    position: absolute;
    top: 5%;
    right: 5%;
    padding: 6px 8px;
    color: #000;
    background: #fff;
    border: 1px solid #000;
    opacity: 0;
}

.cd-case.is-drag-over .case-drop-hint {
    opacity: 1;
}

.draggable-cd {
    width: 185px;
    position: absolute;
    right: -2%;
    bottom: 2%;
    display: grid;
    gap: 6px;
    place-items: center;
    border: 0;
    color: #fff;
    background: transparent;
    text-shadow: 1px 1px 0 #000;
    transition: transform .18s steps(2), opacity .18s;
}

.draggable-cd img {
    filter: drop-shadow(5px 6px 0 rgba(0,0,0,.25));
    animation: discFloat 2.1s ease-in-out infinite;
}

.draggable-cd:hover {
    transform: translateY(-5px) rotate(3deg);
}

.draggable-cd.is-dragging {
    opacity: .62;
    transform: scale(.94) rotate(8deg);
}

.landing-screen.is-fading {
    opacity: 0;
    transform: scale(.97);
    transition: opacity .3s ease, transform .3s ease;
}

/* =========================
   Boot
========================= */

.boot-screen {
    width: min(520px, 100%);
}

.boot-content {
    display: grid;
    gap: 13px;
}

.boot-message,
.boot-small-copy {
    margin: 0;
}

.boot-message {
    font-weight: 700;
    font-size: 15px;
}

.boot-progress-track {
    height: 20px;
    padding: 2px;
    overflow: hidden;
    background: #fff;
    border: 2px solid;
    border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
}

.boot-progress-bar {
    width: 0;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        #173fd3 0 18px,
        #173fd3 18px 20px,
        #8fb7ff 20px 22px
    );
    transition: width .35s steps(4);
}

/* =========================
   Playground
========================= */

.playground-screen {
    width: 100%;
}

.playground-desktop {
    width: min(1240px, 100%);
    min-height: 720px;
    margin: 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr);
    grid-template-areas:
        "message mascot"
        "context context"
        "output output";
    gap: 18px;
    align-content: start;
}

.message-window {
    grid-area: message;
    min-height: 250px;
    animation: windowPop .34s steps(4) both;
}

.message-window label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.message-window textarea {
    width: 100%;
    min-height: 135px;
    resize: vertical;
    padding: 10px;
    border: 2px solid;
    border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
    background: #fff;
    color: #111;
    outline: 0;
}

.input-footer {
    margin-top: 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.primary-button {
    min-width: 130px;
    font-weight: 700;
}

.mascot-window {
    grid-area: mascot;
    animation: windowPop .34s .12s steps(4) both;
}

.mascot-content {
    min-height: 205px;
    display: grid;
    place-items: center;
    text-align: center;
    background: linear-gradient(#ddd1ff, #b2a0e7);
}

.mascot-content img {
    width: 118px;
    max-height: 120px;
    object-fit: contain;
}

.mascot-content p {
    margin: 4px 0 0;
    padding: 5px 7px;
    background: #fff;
    border: 1px solid #000;
}

.thinking-window {
    position: absolute;
    z-index: 45;
    width: min(380px, 80vw);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.thinking-dots {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.thinking-dots span {
    width: 12px;
    height: 12px;
    background: var(--win-blue-dark);
    animation: blinkDot .7s infinite steps(2);
}

.thinking-dots span:nth-child(2) {
    animation-delay: .15s;
}

.thinking-dots span:nth-child(3) {
    animation-delay: .3s;
}

.thought-space {
    position: absolute;
    inset: 0;
    z-index: 30;
    overflow: hidden;
    pointer-events: none;
}

.thought-fragment {
    position: absolute;
    max-width: min(390px, 65vw);
    padding: 6px 8px;
    color: #111;
    background: rgba(255,255,255,.88);
    border: 1px solid #111;
    box-shadow: 2px 2px 0 rgba(0,0,0,.35);
    font-size: clamp(12px, 1.5vw, 18px);
    transform: rotate(var(--rotation));
    animation: fragmentLife 2.3s ease both;
}

/* =========================
   Context stage
========================= */

.context-stage {
    grid-area: context;
    display: grid;
    grid-template-columns: 1fr 1fr .78fr;
    gap: 16px;
    align-items: start;
}

.context-message {
    grid-column: 1 / -1;
    width: fit-content;
    margin: 0;
    padding: 8px 10px;
    background: var(--yellow);
    border: 1px solid #000;
    box-shadow: 2px 2px 0 #000;
    font-weight: 700;
}

.context-window {
    opacity: 0;
    animation: windowPop .34s steps(4) forwards;
}

.context-window:nth-of-type(1) {
    animation-delay: .04s;
}

.context-window:nth-of-type(2) {
    animation-delay: .18s;
}

.context-window:nth-of-type(3) {
    animation-delay: .32s;
}

.option-grid {
    display: grid;
    gap: 8px;
}

.era-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vibe-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.option-button {
    min-width: 0;
    min-height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.option-button img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.option-button small {
    opacity: .76;
}

.option-button.is-selected {
    outline: 2px dotted #000080;
    outline-offset: -5px;
    background: #e4e7ff;
}

.mutation-window input[type="range"] {
    width: 100%;
    accent-color: var(--win-blue-dark);
}

.range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
}

.generate-button {
    width: 100%;
    margin-top: 16px;
    min-height: 48px;
    font-weight: 900;
    background:
        linear-gradient(110deg, #d8e2ff, #f6c8ff 38%, #d7fff6 62%, #d5ccff);
}

/* =========================
   Output
========================= */

.output-window {
    grid-area: output;
    animation: windowPop .34s steps(4) both;
}

.output-label {
    margin: 0 0 8px;
    font-weight: 700;
}

.generated-output {
    min-height: 100px;
    margin: 0;
    padding: 16px;
    display: grid;
    align-items: center;
    background: #fff;
    border: 2px solid;
    border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
    font-size: clamp(18px, 2.3vw, 32px);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.output-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.copy-status {
    min-height: 1em;
    margin: 8px 0 0;
}

/* =========================
   Taskbar
========================= */

.windows-taskbar {
    position: fixed;
    z-index: 200;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 38px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-top: 2px solid #fff;
    box-shadow: 0 -2px 0 #000;
}

.start-button {
    min-width: 72px;
    font-weight: 700;
}

.taskbar-status {
    min-width: 0;
    padding: 6px 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: rgba(106,65,157,.9);
    border: 1px solid rgba(255,255,255,.55);
}

.taskbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.taskbar-time {
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,.5);
}

/* =========================
   State styling
========================= */

body.state-thinking .message-window,
body.state-thinking .mascot-window {
    filter: saturate(.75) brightness(.88);
}

body.state-context .message-window {
    opacity: .93;
}

/* =========================
   Animations
========================= */

@keyframes discFloat {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-7px) rotate(4deg); }
}

@keyframes windowPop {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes blinkDot {
    0%, 45% { opacity: .2; }
    46%, 100% { opacity: 1; }
}

@keyframes fragmentLife {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(.92) rotate(var(--rotation));
    }
    15%, 70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-45px) scale(1.04) rotate(var(--rotation));
    }
}

/* =========================
   Responsive
========================= */

@media (max-width: 900px) {
    .landing-screen {
        grid-template-columns: 1fr;
    }

    .disc-interaction {
        min-height: 480px;
    }

    .draggable-cd {
        right: 4%;
    }

    .playground-desktop {
        grid-template-columns: 1fr;
        grid-template-areas:
            "message"
            "mascot"
            "context"
            "output";
    }

    .context-stage {
        grid-template-columns: 1fr;
    }

    .context-message {
        grid-column: auto;
    }
}

@media (max-width: 620px) {
    .app-titlebar {
        align-items: flex-start;
    }

    .app-title-left span {
        max-width: 72vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .app-shell {
        padding: 16px 12px 78px;
    }

    .disc-interaction {
        min-height: 370px;
    }

    .draggable-cd {
        width: 125px;
        right: 0;
    }

    .vibe-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .windows-taskbar {
        grid-template-columns: auto 1fr;
    }

    .taskbar-status {
        display: none;
    }

    .taskbar-right {
        justify-self: end;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ================================================================
   VjEt.N3t pipeline alignment overrides
   ================================================================ */
body.state-input .context-stage,
body.state-input .output-window,
body.state-input .reconstruction-window { display: none !important; }

.reading-strip {
  margin-top: 8px;
  min-height: 28px;
  padding: 6px 8px;
  background: #fff;
  border: 1px inset #777;
  overflow-wrap: anywhere;
}
.reading-strip span { opacity: .65; }

.boot-ghost { width: 76px; justify-self: center; animation: ghostRun .6s steps(4) both; }

.context-window.is-pending { visibility: hidden; opacity: 0; pointer-events: none; }
.context-window.is-visible { visibility: visible; opacity: 1; animation: windowPop .34s steps(4) both; }

.reconstruction-window { grid-area: context; width: min(720px, 100%); justify-self: center; z-index: 50; }
.reconstruction-content { display: grid; gap: 12px; }
.candidate-stack { display: grid; gap: 8px; }
.candidate {
  padding: 10px;
  background: #fff;
  border: 2px solid;
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
  font-size: 15px;
  transition: opacity .25s, transform .25s, filter .25s;
}
.candidate-testing { animation: candidateTest .6s steps(3); }
.candidate-approved { outline: 3px solid var(--yellow); animation: approvePulse .55s steps(3); }
.candidate.is-rejected { opacity: .25; filter: grayscale(1); transform: translateX(22px) scale(.97); text-decoration: line-through; }

.result-card { border: 1px solid #111; background: #fff; box-shadow: 2px 2px 0 rgba(0,0,0,.28); }
.result-card > span { display: block; padding: 5px 8px; font-weight: 900; background: var(--yellow); border-bottom: 1px solid #111; }
.result-card p { margin: 0; padding: 12px; overflow-wrap: anywhere; }
.final-card { margin-bottom: 12px; }
.final-card .generated-output { border: 0; min-height: 90px; }
.alternate-output { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.alternate-card { cursor: pointer; transition: transform .15s; }
.alternate-card:hover { transform: translateY(-3px); }
.alternate-card > span { background: #dce4ff; }
.replay-actions { margin-top: 16px; }

.mascot-window[data-ghost-state="searching"] img,
.mascot-window[data-ghost-state="testing"] img { animation: ghostResearch .8s steps(4) infinite alternate; }
.mascot-window[data-ghost-state="approving"] img { animation: ghostApprove .5s steps(3) infinite alternate; }
.mascot-window[data-ghost-state="celebrating"] img { animation: ghostCelebrate .55s ease-in-out infinite alternate; }
.mascot-window[data-ghost-state="error"] .mascot-content { background: linear-gradient(#eee, #bcbcbc); }

.thought-pop { animation: fragmentLife 2.3s ease both; }
.thought-shake { animation: thoughtShake 2.4s steps(5) both; }
.thought-glitch { animation: thoughtGlitch 2.2s steps(4) both; }
.thought-stamp { animation: thoughtStamp 2.5s steps(3) both; }
.thought-bounce { animation: thoughtBounce 2.5s ease both; }
.thought-slide { animation: thoughtSlide 2.5s ease both; }
.thought-scatter { animation: thoughtScatter 2.6s ease both; }
.thought-fragment.is-rejected { text-decoration: line-through; background: rgba(220,220,220,.88); }

@keyframes ghostRun { from { opacity:0; transform:translateX(-140px) rotate(-12deg); } to { opacity:1; transform:translateX(0); } }
@keyframes ghostResearch { from { transform:translate(-8px,4px) rotate(-4deg); } to { transform:translate(9px,-7px) rotate(5deg); } }
@keyframes ghostApprove { from { transform:scale(.96); } to { transform:scale(1.08) rotate(2deg); } }
@keyframes ghostCelebrate { from { transform:translateY(0) rotate(-4deg); } to { transform:translateY(-10px) rotate(5deg); } }
@keyframes candidateTest { 0% { opacity:0; transform:translateX(-18px); } 60% { opacity:1; transform:translateX(6px); } 100% { transform:translateX(0); } }
@keyframes approvePulse { 0% { transform:scale(.95); } 60% { transform:scale(1.03); } 100% { transform:scale(1); } }
@keyframes thoughtShake { 0% {opacity:0} 15% {opacity:1} 25%,45%,65% {transform:translateX(-5px) rotate(var(--rotation))} 35%,55% {transform:translateX(6px) rotate(var(--rotation))} 100% {opacity:0; transform:translateY(-35px)} }
@keyframes thoughtGlitch { 0%{opacity:0} 20%{opacity:1;transform:translate(0) rotate(var(--rotation))} 35%{transform:translate(8px,-4px)} 45%{transform:translate(-7px,5px)} 100%{opacity:0;filter:blur(2px)} }
@keyframes thoughtStamp { 0%{opacity:0;transform:scale(2) rotate(var(--rotation))} 18%{opacity:1;transform:scale(.92) rotate(var(--rotation))} 25%{transform:scale(1)} 100%{opacity:0} }
@keyframes thoughtBounce { 0%{opacity:0;transform:translateY(50px)} 25%{opacity:1;transform:translateY(-12px)} 40%{transform:translateY(0)} 100%{opacity:0;transform:translateY(-50px)} }
@keyframes thoughtSlide { 0%{opacity:0;transform:translateX(-80px)} 20%{opacity:1;transform:translateX(0)} 80%{opacity:1} 100%{opacity:0;transform:translateX(100px)} }
@keyframes thoughtScatter { 0%{opacity:0;letter-spacing:20px} 25%{opacity:1;letter-spacing:0} 75%{opacity:1} 100%{opacity:0;letter-spacing:16px;transform:rotate(8deg)} }

@media (max-width: 900px) { .alternate-output { grid-template-columns: 1fr; } }

/* =========================================================
   UI SCALE PASS — larger windows, controls, icons and type
   ========================================================= */

:root {
    --hard-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
}

body {
    font-size: 15px;
}

.app-titlebar {
    min-height: 48px;
    padding: 8px 12px;
    font-size: 15px;
}

.app-title-left {
    gap: 10px;
}

.app-title-icon {
    width: 26px;
    height: 26px;
}

.window-controls {
    gap: 4px;
}

.win-btn-ctrl {
    width: 27px;
    height: 24px;
    border-width: 3px;
}

.win-btn-ctrl.min::before {
    width: 12px;
    height: 3px;
    left: 4px;
    bottom: 3px;
}

.win-btn-ctrl.max::before {
    width: 13px;
    height: 10px;
    left: 4px;
    top: 3px;
    border-width: 2px;
}

.win-btn-ctrl.close::before {
    inset: -2px 0 0;
    font-size: 22px;
    line-height: 20px;
}

.win-window {
    border-width: 3px;
}

.win-titlebar {
    min-height: 36px;
    gap: 12px;
    padding: 6px 8px;
    font-size: 15px;
}

.win-content {
    padding: 18px;
}

.win-button,
.option-button,
.start-button {
    min-height: 44px;
    padding: 10px 15px;
    border-width: 3px;
    font-size: 15px;
}

.app-shell {
    min-height: calc(100vh - 96px);
    padding: 34px 34px 88px;
}

.landing-screen {
    width: min(1380px, 100%);
    gap: 54px;
}

.logo-label {
    font-size: clamp(54px, 8vw, 112px);
}

.landing-intro h1 {
    max-width: 760px;
    font-size: clamp(28px, 3.4vw, 48px);
}

.intro-copy {
    margin-top: 22px;
    font-size: 19px;
}

.helper-card,
.mascot-card {
    margin-top: 24px;
    padding: 17px;
    font-size: 15px;
}

.mascot-card {
    width: min(460px, 100%);
    gap: 17px;
}

.mascot-card img {
    width: 88px;
    height: 88px;
}

.disc-interaction {
    min-height: 680px;
}

.cd-case {
    width: min(610px, 100%);
}

.case-label,
.case-drop-hint {
    padding: 10px 13px;
    font-size: 15px;
}

.draggable-cd {
    width: 235px;
    gap: 9px;
    font-size: 16px;
}

.boot-screen {
    width: min(660px, 100%);
}

.boot-content {
    gap: 18px;
}

.boot-message {
    font-size: 19px;
}

.boot-progress-track {
    height: 28px;
    padding: 3px;
    border-width: 3px;
}

.playground-desktop {
    width: min(1460px, 100%);
    min-height: 820px;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr);
    gap: 26px;
}

.message-window {
    min-height: 320px;
}

.message-window label {
    margin-bottom: 12px;
    font-size: 16px;
}

.message-window textarea {
    min-height: 185px;
    padding: 15px;
    border-width: 3px;
    font-size: 18px;
    line-height: 1.45;
}

.input-footer {
    margin-top: 13px;
}

.primary-button {
    min-width: 170px;
}

.mascot-content {
    min-height: 275px;
}

.mascot-content img {
    width: 165px;
    max-height: 175px;
}

.mascot-content p {
    margin-top: 8px;
    padding: 8px 11px;
    font-size: 16px;
}

.thinking-window {
    width: min(500px, 88vw);
}

.thinking-dots span {
    width: 17px;
    height: 17px;
}

.thought-fragment {
    max-width: min(500px, 72vw);
    padding: 10px 13px;
    font-size: clamp(15px, 1.65vw, 23px);
}

.context-stage {
    grid-template-columns: 1fr 1fr .82fr;
    gap: 24px;
}

.context-message {
    padding: 11px 14px;
    font-size: 16px;
}

.option-grid {
    gap: 12px;
}

.option-button {
    min-height: 94px;
    gap: 7px;
}

.option-button img {
    width: 58px;
    height: 58px;
}

.option-button small {
    font-size: 13px;
}

.mutation-window input[type="range"] {
    min-height: 28px;
}

.generate-button {
    min-height: 62px;
    margin-top: 22px;
    font-size: 17px;
}

.reconstruction-window {
    width: min(900px, 100%);
}

.reconstruction-content {
    gap: 17px;
}

.candidate-stack {
    gap: 12px;
}

.candidate {
    padding: 13px 15px;
    font-size: 17px;
}

.result-card > span {
    padding: 8px 11px;
    font-size: 15px;
}

.result-card p {
    padding: 17px;
    font-size: 18px;
}

.generated-output {
    min-height: 140px;
    padding: 22px;
    border-width: 3px;
    font-size: clamp(24px, 2.7vw, 40px);
}

.alternate-output {
    gap: 15px;
}

.output-actions {
    margin-top: 17px;
    gap: 12px;
}

.windows-taskbar {
    min-height: 50px;
    gap: 11px;
    padding: 6px 9px;
}

.start-button {
    min-width: 94px;
}

.taskbar-status {
    padding: 9px 11px;
    font-size: 14px;
}

.taskbar-right {
    gap: 11px;
    font-size: 14px;
}

@media (max-width: 1100px) {
    body {
        font-size: 14px;
    }

    .app-shell {
        padding-inline: 22px;
    }

    .playground-desktop {
        grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
    }

    .context-stage {
        grid-template-columns: 1fr 1fr;
    }

    .mutation-window {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .landing-screen {
        gap: 28px;
    }

    .disc-interaction {
        min-height: 560px;
    }

    .playground-desktop {
        grid-template-columns: 1fr;
    }

    .context-stage {
        grid-template-columns: 1fr;
    }

    .mutation-window {
        grid-column: auto;
    }

    .alternate-output {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    body {
        font-size: 13px;
    }

    .app-titlebar {
        min-height: 44px;
        padding: 7px 9px;
    }

    .app-title-icon {
        width: 23px;
        height: 23px;
    }

    .win-btn-ctrl {
        width: 24px;
        height: 22px;
    }

    .app-shell {
        padding: 20px 12px 86px;
    }

    .logo-label {
        font-size: clamp(48px, 18vw, 78px);
    }

    .landing-intro h1 {
        font-size: clamp(25px, 8vw, 37px);
    }

    .disc-interaction {
        min-height: 430px;
    }

    .cd-case {
        width: min(440px, 100%);
    }

    .draggable-cd {
        width: 155px;
    }

    .win-content {
        padding: 14px;
    }

    .message-window textarea {
        min-height: 155px;
        font-size: 16px;
    }

    .mascot-content {
        min-height: 230px;
    }

    .mascot-content img {
        width: 140px;
    }

    .era-grid,
    .vibe-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .option-button {
        min-height: 86px;
        padding: 9px;
    }

    .option-button img {
        width: 50px;
        height: 50px;
    }

    .generated-output {
        font-size: clamp(22px, 7vw, 32px);
    }

    .windows-taskbar {
        min-height: 48px;
    }
}

/* =========================================================
   EXPRESSION ARCHIVE + FINAL SCALE PASS
   ========================================================= */
.vibe-icon {
  display: block;
  font-size: 42px;
  line-height: 1;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.18));
}
.vibe-option strong { font-size: 15px; }
.expression-button { background: linear-gradient(110deg,#fff7bd,#ffc8ef,#c8e3ff); font-weight: 800; }
.expression-window {
  grid-area: output;
  width: min(1180px, 100%);
  margin-inline: auto;
  z-index: 70;
  animation: windowPop .3s steps(4) both;
}
.expression-content { padding: 22px; }
.expression-browser {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr);
  gap: 22px;
  align-items: start;
}
.expression-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px;
  max-height: 520px;
  overflow: auto;
  padding: 5px;
  background: #fff;
  border: 3px inset #aaa;
}
.expression-tile {
  min-height: 76px;
  padding: 8px;
  border: 3px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  background: #ece9ff;
  font-size: clamp(20px,2vw,30px);
  cursor: pointer;
}
.expression-tile:hover,
.expression-tile:focus-visible { outline: 3px dotted var(--win-blue-dark); outline-offset: -6px; background: #fff5b8; }
.expression-detail {
  padding: 18px;
  background: #f8f8f8;
  border: 3px solid;
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
}
.expression-symbol {
  min-height: 140px;
  display: grid;
  place-items: center;
  padding: 14px;
  background: #fff;
  border: 2px solid #111;
  font-size: clamp(46px,6vw,84px);
  overflow-wrap: anywhere;
}
.expression-symbol.is-popping { animation: expressionPop .36s steps(4); }
.expression-detail h2 { margin: 14px 0 8px; font-size: 24px; text-transform: uppercase; }
.expression-detail p { font-size: 16px; line-height: 1.5; }
.expression-detail dl { display: grid; gap: 10px; margin: 16px 0; }
.expression-detail dl div { padding: 9px; background: #fff; border: 1px solid #111; }
.expression-detail dt { font-weight: 900; text-transform: uppercase; color: #000080; }
.expression-detail dd { margin: 4px 0 0; font-size: 15px; }
.candidate { display: grid; gap: 6px; }
.candidate strong { color: #000080; font-size: 12px; letter-spacing: .04em; }
.candidate span { font-size: 17px; }
.final-card > span,
.alternate-card > span { font-weight: 900; }
.mascot-window[data-ghost-state="error"] img { animation: ghostError .28s steps(3) 3; filter: grayscale(1) contrast(1.25); }
@keyframes expressionPop { 0%{transform:scale(.4) rotate(-8deg);opacity:0} 70%{transform:scale(1.12) rotate(3deg);opacity:1} 100%{transform:scale(1)} }
@keyframes ghostError { 0%,100%{transform:translateX(0)} 33%{transform:translateX(-10px) rotate(-5deg)} 66%{transform:translateX(10px) rotate(5deg)} }

/* Larger visual assets across the whole desktop */
.app-title-icon { width: 32px; height: 32px; }
.cd-case { width: min(700px,100%); }
.draggable-cd { width: 275px; }
.mascot-card img { width: 108px; height: 108px; }
.boot-ghost { width: 150px; }
.mascot-content img { width: 205px; max-height: 215px; }
.option-button img { width: 72px; height: 72px; }
.option-button { min-height: 116px; }
.vibe-option { min-height: 106px; }
.playground-desktop { width: min(1580px,100%); }
.message-window textarea { min-height: 210px; }

@media (max-width: 1050px) {
  .expression-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .expression-browser { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .vibe-icon { font-size: 34px; }
  .expression-grid { grid-template-columns: repeat(3,minmax(0,1fr)); max-height: 430px; }
  .expression-tile { min-height: 64px; font-size: 21px; }
  .expression-symbol { min-height: 110px; }
  .cd-case { width: min(500px,100%); }
  .draggable-cd { width: 180px; }
  .mascot-content img { width: 165px; }
  .option-button img { width: 58px; height: 58px; }
}

/* ========================= Living desktop expansion ========================= */
.logo-button{border:0;background:transparent;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.logo-button.is-spinning{animation:logoSpin .75s steps(8)}
.desktop-icons{position:absolute;left:18px;top:18px;z-index:8;display:grid;gap:16px;width:112px}
.desktop-icon{border:0;background:transparent;color:#fff;text-shadow:1px 1px #000;display:grid;justify-items:center;gap:6px;padding:6px;font-weight:700}
.desktop-icon span{font-size:42px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.45))}
.desktop-icon:hover,.desktop-icon:focus-visible{background:rgba(0,0,128,.35);outline:1px dotted #fff}
.utility-window{position:absolute;z-index:100;width:min(520px,calc(100vw - 36px));animation:windowPop .28s steps(4) both}
.memory-window{left:12%;top:18%}.cache-window{right:8%;top:12%}.recycle-window{left:18%;bottom:10%}.secret-window{right:14%;bottom:14%}
.utility-copy{margin-top:0}.memory-bars{display:grid;gap:10px}.memory-row{display:grid;grid-template-columns:120px 1fr 34px;gap:10px;align-items:center}.memory-track{height:18px;background:#fff;border:2px inset #999}.memory-fill{height:100%;background:linear-gradient(90deg,#000080,#25a3ef)}
.memory-insight,.secret-badge{padding:10px;background:var(--yellow);border:1px solid #000;box-shadow:2px 2px #000;font-weight:800}
.cache-list{display:grid;gap:12px}.cache-list>div{display:grid;grid-template-columns:130px 1fr auto;gap:10px;align-items:center}.cache-list progress{width:100%;height:20px}
.rejected-list{display:flex;flex-wrap:wrap;gap:8px}.rejected-chip{padding:8px 10px;background:#fff;border:1px solid #111;text-decoration:line-through;transform:rotate(var(--chip-rotate,-2deg));animation:chipDrop .3s both}
.context-window.is-visible{position:relative}.context-stage.random-layout .era-window{transform:translate(var(--era-x,0),var(--era-y,0)) rotate(var(--era-r,0deg))}.context-stage.random-layout .vibe-window{transform:translate(var(--vibe-x,0),var(--vibe-y,0)) rotate(var(--vibe-r,0deg))}.context-stage.random-layout .mutation-window{transform:translate(var(--mut-x,0),var(--mut-y,0)) rotate(var(--mut-r,0deg))}
.rare-event-banner{position:fixed;left:50%;top:15%;transform:translateX(-50%);z-index:500;padding:16px 22px;background:#000080;color:#fff;border:3px outset #ddd;box-shadow:8px 8px 0 rgba(0,0,0,.4);font-size:18px;font-weight:900;animation:rareGlitch .8s steps(6)}
.screensaver{position:fixed;inset:34px 0 38px;z-index:9000;background:radial-gradient(circle at center,#152675,#030526 70%);color:#fff;display:grid;place-items:center;text-align:center;cursor:none}
.screensaver[hidden]{display:none!important}.screensaver-ghost{position:absolute;animation:saverWalk 14s linear infinite}.screensaver-ghost img{width:180px}.screensaver-ghost span{position:absolute;right:-25px;top:10px;font-size:38px}.screensaver p{align-self:end;margin-bottom:70px;font-size:16px;opacity:.8}
body.msn-ultra .playground-desktop{filter:saturate(1.2)}body.msn-ultra .thought-fragment{box-shadow:3px 3px 0 #ff4fce}
body.is-learning #message-input{animation:learningPulse .55s steps(3) 2}
@keyframes logoSpin{to{transform:rotate(360deg) scale(1.08)}}
@keyframes chipDrop{from{opacity:0;transform:translateY(-25px) rotate(10deg)}to{opacity:1;transform:translateY(0) rotate(var(--chip-rotate,-2deg))}}
@keyframes rareGlitch{0%,100%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 8px))}50%{transform:translateX(calc(-50% + 9px))}75%{filter:hue-rotate(120deg)}}
@keyframes saverWalk{0%{left:5%;top:18%;transform:rotate(-5deg)}25%{left:70%;top:14%;transform:rotate(6deg)}50%{left:68%;top:65%;transform:rotate(-4deg)}75%{left:8%;top:60%;transform:rotate(5deg)}100%{left:5%;top:18%;transform:rotate(-5deg)}}
@keyframes learningPulse{50%{background:#fff7b0;transform:scale(1.01)}}
@media(max-width:900px){.desktop-icons{position:relative;left:auto;top:auto;width:100%;grid-template-columns:repeat(4,1fr);grid-column:1/-1}.desktop-icon span{font-size:34px}.desktop-icon strong{font-size:10px}.utility-window{position:fixed;left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important}.context-stage.random-layout .context-window{transform:none!important}}


/* ========================= Utility layout + expression fit fix ========================= */
/* Keep all archive / memory pop-up windows in a dedicated top-left dock. */
.utility-window,
.expression-window {
  position: absolute;
  left: 132px !important;
  right: auto !important;
  top: 12px !important;
  bottom: auto !important;
  margin: 0;
}

.utility-window {
  width: min(470px, calc(100% - 156px));
  max-height: min(430px, calc(100vh - 132px));
  overflow: auto;
}

.expression-window {
  grid-area: unset;
  width: min(1180px, calc(100% - 156px));
  max-height: min(650px, calc(100vh - 132px));
  overflow: auto;
}

/* Reserve vertical room while a top-left dock window is open so it never covers message_in.exe. */
.playground-desktop:has(.utility-window:not([hidden])) {
  padding-top: 455px;
}

.playground-desktop:has(.expression-window:not([hidden])) {
  padding-top: 675px;
}

/* One complete expression per tile: never wrap emoticons or kaomoji onto another line. */
.expression-grid {
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  align-items: stretch;
}

.expression-tile {
  min-width: 0;
  min-height: 86px;
  display: grid;
  place-items: center;
  padding: 8px 5px;
  white-space: nowrap;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(18px, 1.55vw, 29px);
}

.expression-tile.is-long-expression {
  font-size: clamp(14px, 1.15vw, 22px);
  letter-spacing: -0.04em;
}

.expression-tile.is-very-long-expression {
  font-size: clamp(11px, .88vw, 17px);
  letter-spacing: -0.08em;
}

.expression-symbol {
  white-space: nowrap;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  font-size: clamp(34px, 5vw, 76px);
}

.expression-symbol.is-long-expression {
  font-size: clamp(24px, 3.4vw, 52px);
  letter-spacing: -0.04em;
}

.expression-symbol.is-very-long-expression {
  font-size: clamp(18px, 2.4vw, 38px);
  letter-spacing: -0.08em;
}

@media (max-width: 1050px) {
  .expression-grid { grid-template-columns: repeat(4, minmax(112px, 1fr)); }
  .playground-desktop:has(.expression-window:not([hidden])) { padding-top: 900px; }
}

@media (max-width: 900px) {
  .utility-window,
  .expression-window {
    position: fixed;
    left: 12px !important;
    right: 12px !important;
    top: 58px !important;
    bottom: auto !important;
    width: auto;
    max-height: calc(100vh - 126px);
    transform: none !important;
  }

  .playground-desktop:has(.utility-window:not([hidden])),
  .playground-desktop:has(.expression-window:not([hidden])) {
    padding-top: 0;
  }
}

@media (max-width: 620px) {
  .expression-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expression-tile { min-height: 76px; font-size: 20px; }
  .expression-tile.is-long-expression { font-size: 15px; }
  .expression-tile.is-very-long-expression { font-size: 12px; }
}


/* ========================= Left desktop shortcut rail fix ========================= */
@media (min-width: 901px) {
  .playground-desktop {
    padding-left: 142px;
  }

  .desktop-icons {
    left: 4px;
    top: 12px;
    width: 112px;
    gap: 12px;
  }

  .desktop-icon {
    width: 104px;
    padding: 5px 2px;
  }

  .desktop-icon strong {
    max-width: 100px;
    line-height: 1.15;
    text-align: center;
  }

  .utility-window,
  .expression-window {
    left: 142px !important;
  }
}

/* =========================
   Y2K language-rain background + landing composition
   ========================= */
body {
  position: relative;
  isolation: isolate;
}

.y2k-code-rain {
  position: fixed;
  inset: 34px 0 38px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .5;
  mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.y2k-code-rain::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 49.6%, rgba(255,255,255,.04) 50%, transparent 50.4%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 90px 100%, 100% 26px;
}

.y2k-code-rain span {
  --x: 5%;
  --speed: 18s;
  --delay: -4s;
  --scale: 1;
  position: absolute;
  top: -18vh;
  left: var(--x);
  max-width: 330px;
  overflow: hidden;
  white-space: nowrap;
  color: rgba(205, 238, 255, .78);
  font: 700 clamp(12px, 1.15vw, 17px)/1.2 "Courier New", monospace;
  letter-spacing: .03em;
  text-shadow: 0 0 5px rgba(114, 214, 255, .72), 1px 1px 0 rgba(32, 31, 91, .8);
  filter: blur(.15px);
  transform: translate3d(0, -25vh, 0) scale(var(--scale));
  animation: y2kTextFall var(--speed) linear var(--delay) infinite, y2kTextBlink 2.8s steps(2) infinite;
}

.y2k-code-rain span::after {
  content: "_";
  color: var(--yellow);
  animation: y2kCursor .7s steps(2) infinite;
}

.y2k-code-rain span:nth-child(3n) { color: rgba(255, 199, 245, .72); }
.y2k-code-rain span:nth-child(4n) { color: rgba(255, 246, 132, .72); }
.y2k-code-rain span:nth-child(5n) { color: rgba(196, 255, 231, .72); }
.y2k-code-rain span:nth-child(1)  { --x: 2%;  --speed: 21s; --delay: -13s; --scale: .88; }
.y2k-code-rain span:nth-child(2)  { --x: 15%; --speed: 17s; --delay: -6s; }
.y2k-code-rain span:nth-child(3)  { --x: 31%; --speed: 24s; --delay: -18s; --scale: .86; }
.y2k-code-rain span:nth-child(4)  { --x: 52%; --speed: 19s; --delay: -4s; }
.y2k-code-rain span:nth-child(5)  { --x: 72%; --speed: 23s; --delay: -16s; --scale: .9; }
.y2k-code-rain span:nth-child(6)  { --x: 88%; --speed: 16s; --delay: -9s; }
.y2k-code-rain span:nth-child(7)  { --x: 7%;  --speed: 26s; --delay: -22s; }
.y2k-code-rain span:nth-child(8)  { --x: 24%; --speed: 18s; --delay: -11s; --scale: .8; }
.y2k-code-rain span:nth-child(9)  { --x: 42%; --speed: 20s; --delay: -2s; }
.y2k-code-rain span:nth-child(10) { --x: 64%; --speed: 27s; --delay: -20s; --scale: .86; }
.y2k-code-rain span:nth-child(11) { --x: 81%; --speed: 18s; --delay: -14s; }
.y2k-code-rain span:nth-child(12) { --x: 94%; --speed: 25s; --delay: -7s; --scale: .78; }
.y2k-code-rain span:nth-child(13) { --x: 0%;  --speed: 19s; --delay: -1s; }
.y2k-code-rain span:nth-child(14) { --x: 19%; --speed: 28s; --delay: -25s; --scale: .82; }
.y2k-code-rain span:nth-child(15) { --x: 37%; --speed: 17s; --delay: -10s; }
.y2k-code-rain span:nth-child(16) { --x: 57%; --speed: 22s; --delay: -17s; }
.y2k-code-rain span:nth-child(17) { --x: 75%; --speed: 16s; --delay: -5s; --scale: .84; }
.y2k-code-rain span:nth-child(18) { --x: 90%; --speed: 24s; --delay: -21s; }
.y2k-code-rain span:nth-child(19) { --x: 10%; --speed: 23s; --delay: -8s; --scale: .9; }
.y2k-code-rain span:nth-child(20) { --x: 29%; --speed: 18s; --delay: -15s; }
.y2k-code-rain span:nth-child(21) { --x: 48%; --speed: 25s; --delay: -12s; --scale: .8; }
.y2k-code-rain span:nth-child(22) { --x: 68%; --speed: 19s; --delay: -3s; }
.y2k-code-rain span:nth-child(23) { --x: 84%; --speed: 27s; --delay: -23s; --scale: .86; }
.y2k-code-rain span:nth-child(24) { --x: 39%; --speed: 30s; --delay: -27s; --scale: .76; }

.app-titlebar,
.windows-taskbar,
.app-shell {
  position: relative;
  z-index: 2;
}

.landing-screen {
  width: min(1540px, 100%);
  min-height: min(760px, calc(100vh - 150px));
  grid-template-columns: minmax(300px, .9fr) minmax(520px, 1.2fr) minmax(260px, .7fr);
  gap: clamp(24px, 4vw, 70px);
  align-items: center;
}

.landing-brand {
  color: #fff;
  align-self: center;
  position: relative;
  z-index: 3;
}

.landing-brand .logo-label {
  display: block;
  font-size: clamp(72px, 9.5vw, 150px);
  line-height: .78;
  max-width: 650px;
  text-wrap: balance;
}

.landing-brand h1 {
  margin: 30px 0 0;
  max-width: 560px;
  font-size: clamp(25px, 2.45vw, 42px);
  line-height: 1.05;
  text-shadow: 2px 2px 0 #1c2048;
}

.landing-brand .intro-copy {
  max-width: 470px;
}

.landing-companion {
  display: grid;
  gap: 22px;
  align-content: center;
  justify-items: end;
  color: #fff;
}

.landing-companion .mascot-card,
.landing-companion .helper-card {
  margin-top: 0;
}

.landing-ghost-card {
  width: min(340px, 100%);
  min-height: 240px;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  transform: rotate(1.5deg);
}

.landing-ghost-card img {
  width: clamp(135px, 12vw, 205px);
  height: auto;
  max-height: 210px;
}

.landing-ghost-card p {
  margin: 10px 0 0;
  font-size: 15px;
}

.landing-companion .helper-card {
  width: min(330px, 100%);
  font-size: 14px;
}

.landing-side-note {
  width: min(330px, 100%);
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--yellow);
  color: rgba(255,255,255,.85);
  font-size: 13px;
  line-height: 1.5;
  text-shadow: 1px 1px #252657;
}

.disc-interaction {
  min-height: 700px;
  width: 100%;
  justify-self: center;
}

.cd-case {
  width: min(650px, 100%);
}

.draggable-cd {
  width: clamp(210px, 18vw, 285px);
  right: 0;
  bottom: 0;
}

.boot-screen {
  position: fixed;
  inset: 34px 0 38px;
  z-index: 500;
  width: auto;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(24, 30, 93, .12);
  backdrop-filter: blur(1px);
}

.boot-screen[hidden] {
  display: none !important;
}

.boot-window {
  width: min(660px, calc(100vw - 40px));
}

@keyframes y2kTextFall {
  from { transform: translate3d(0, -28vh, 0) scale(var(--scale)); }
  to   { transform: translate3d(0, 138vh, 0) scale(var(--scale)); }
}

@keyframes y2kTextBlink {
  0%, 20%, 100% { opacity: .25; }
  21%, 78% { opacity: .85; }
  79%, 86% { opacity: .4; }
}

@keyframes y2kCursor {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@media (max-width: 1180px) {
  .landing-screen {
    grid-template-columns: minmax(280px, .85fr) minmax(460px, 1.15fr);
  }

  .landing-companion {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    justify-items: stretch;
  }

  .landing-ghost-card {
    min-height: 180px;
  }

  .landing-ghost-card img {
    width: 130px;
  }
}

@media (max-width: 820px) {
  .y2k-code-rain { opacity: .38; }

  .landing-screen {
    grid-template-columns: 1fr;
    min-height: auto;
    text-align: center;
  }

  .landing-brand .logo-label {
    margin-inline: auto;
  }

  .landing-brand h1,
  .landing-brand .intro-copy {
    margin-inline: auto;
  }

  .disc-interaction {
    min-height: 550px;
    grid-row: 2;
  }

  .landing-companion {
    grid-column: auto;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .landing-side-note { text-align: left; }
}

@media (max-width: 620px) {
  .y2k-code-rain span {
    font-size: 11px;
    max-width: 210px;
  }

  .landing-brand .logo-label {
    font-size: clamp(62px, 22vw, 92px);
  }

  .landing-brand h1 {
    margin-top: 22px;
  }

  .disc-interaction {
    min-height: 430px;
  }

  .landing-ghost-card {
    min-height: 170px;
  }

  .boot-screen {
    inset: 44px 0 40px;
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .y2k-code-rain span {
    animation: none !important;
    transform: none;
    top: calc(var(--x) * 8);
  }
}