* {
    margin: 0;
    padding: 0;
}

html,
body {
    overflow: hidden;
}

.webgl {
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
}

.jitter {
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: jittery;
    z-index: -10;
}

.interface-wrapper {
    width: 100%;
    top: 64px;
    left: 64px;
}

.icon-control-container {
    height: 26.5px;
    width: 26.5px;
}

@media only screen and (max-width: 768px) {
    .interface-wrapper {
        width: 100%;
        top: 24px;
        left: 24px;
    }

    .icon-control-container {
        height: 19.5px;
        width: 19.5px;
    }
}

@keyframes jittery {
    10% {
        transform: translate(-0.1px, -0.15px) scale(1, 1);
    }

    20% {
        transform: translate(0.15px, 0.1px) scale(1, 1);
    }

    30% {
        transform: translate(-0.2px, -0.25px) scale(1, 1);
    }

    40% {
        transform: translate(0.05px, 0.1px) scale(1, 1);
    }

    50% {
        transform: translate(-0.025px, -0.05px) scale(1, 1);
    }

    60% {
        transform: translate(0px, 0.075px) scale(1, 1);
    }

    70% {
        transform: translate(-0.075px, -0.1px) scale(1, 1);
    }

    80% {
        transform: translate(0.075px, 0.125px) scale(1, 1);
    }

    90% {
        transform: translate(-0.125px, -0.075px) scale(1, 1);
    }

    100% {
        transform: translate(0.075px, 0.025px) scale(1, 1);
    }
}


/* Portrait screen: real camera approach, then readable content inside a white CRT bezel. */
.mobile-desktop-panel[hidden] { display: none; }
.mobile-desktop-panel { position: fixed; z-index: 10000; inset: 6px; width: calc(100% - 12px); height: calc(100vh - 12px); height: calc(100dvh - 12px); display: flex; flex-direction: column; box-sizing: border-box; background: #c0c0c0; border: 7px solid #f6f5f1; border-radius: 12px; box-shadow: 0 0 0 1px #a2a5a9, inset 0 0 0 2px #777b80, 0 12px 40px #0003; overflow: hidden; transform-origin: center; padding-top: env(safe-area-inset-top); }
.scene-back-button { flex: 0 0 auto; width: 100%; min-height: 44px; padding: 10px 12px; border: 2px solid; border-color: #fff #777 #777 #fff; border-radius: 0; background: #c0c0c0; color: #111; font: bold 12px Tahoma, Arial, sans-serif; cursor: pointer; touch-action: manipulation; text-align: left; }
.scene-back-button:focus-visible { outline: 2px dotted #000; outline-offset: -5px; }
.mobile-crt-screen { position: relative; flex: 1; min-height: 0; overflow: hidden; isolation: isolate; background: #1d2e2f; }
.mobile-desktop-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Static glass layers preserve sharp text and let every touch reach the desktop. */
.mobile-crt-glass, .mobile-crt-glass::before, .mobile-crt-glass::after { position: absolute; inset: 0; pointer-events: none; }
.mobile-crt-glass { z-index: 1; background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(7, 17, 22, .09) 2px, rgba(7, 17, 22, .09) 3px); box-shadow: inset 0 0 22px 5px rgba(5, 15, 20, .19), inset 0 0 2px 1px rgba(0, 0, 0, .35); }
.mobile-crt-glass::before { content: ''; background: var(--crt-smudges) center / cover; mix-blend-mode: screen; opacity: .065; }
.mobile-crt-glass::after { content: ''; background-image: linear-gradient(125deg, rgba(255, 255, 255, .12), transparent 35%, transparent 75%, rgba(150, 205, 213, .035)), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.88%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Cpath fill=%27%23fff%27 filter=%27url%28%23n%29%27 opacity=%27.035%27 d=%27M0 0h160v160H0z%27/%3E%3C/svg%3E"); }

.desktop-is-open #css, .desktop-is-open #webgl, .desktop-is-open #overlay, .desktop-is-open #ui-interactive, .desktop-is-open #ui { visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .jitter { animation: none; } }

.scene-is-transitioning #ui-interactive { pointer-events: none!important; }
.scene-is-free-camera .scene-help-button { visibility: hidden; }

h1,h2,h3,h4,h5,p { font-family:monospace; font-weight:700; font-style:normal; color:white; font-size:16px; }
.info-wrapper { top:64px; left:64px; }
.blinking-cursor { background:#fff; width:.8em; height:.15em; animation:cb-blink .65s step-end infinite; }
@keyframes cb-blink { 0%,100% { opacity:0; } 50% { opacity:1; } }
.scene-help-button { background:transparent; color:#fff; font-weight:800; }
.scene-help-button:focus-visible { outline:2px solid #fff; outline-offset:4px; }
@media(max-width:768px) { .info-wrapper { top:16px; left:16px; } }

/* Only the approved monochrome symbol: its rotation communicates loading. */
.cb-boot { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; width:100%; height:100%; min-height:100dvh; background:#000; color:#fff; pointer-events:auto; }
.cb-boot-logo { display:block; width:clamp(88px,19vw,144px); height:auto; overflow:visible; transform-origin:center; animation:cb-logo-load 1.8s cubic-bezier(.65,0,.35,1) infinite; will-change:transform; }
@keyframes cb-logo-load { 0% { transform:rotate(0deg); } 82%,100% { transform:rotate(360deg); } }
.cb-boot-accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(prefers-reduced-motion:reduce) {
    .blinking-cursor, .cb-boot-logo { animation:none; }
    .cb-boot-logo { will-change:auto; }
}


/*# sourceMappingURL=main.css.map*/