* {
    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; } }

/* A software sleeve for a studio: real load data, no simulated boot log. */
.cb-boot { position:fixed; inset:0; z-index:1000; display:block; overflow:auto; overscroll-behavior:contain; width:100%; height:100%; min-height:100dvh; padding:16px; box-sizing:border-box; color:#fff; background:#062c39; font-family:Arial,Helvetica,sans-serif; pointer-events:auto; background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px),radial-gradient(ellipse at 90% 5%,#17616a 0,transparent 65%); background-size:48px 48px,48px 48px,100% 100%; }
.cb-boot *, .cb-boot *::before,.cb-boot *::after { box-sizing:border-box; }
.cb-boot-frame { display:flex; flex-direction:column; min-height:calc(100dvh - 32px); width:100%; max-width:1600px; margin:0 auto; border:1px solid #ffffff4d; background:#05232c55; }
.cb-boot-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:20px clamp(16px,4vw,60px); border-bottom:1px solid #ffffff40; }
.cb-boot-brand { font-size:20px; font-weight:900; letter-spacing:-.7px; }
.cb-boot-system { font:700 11px monospace; }
.cb-boot-main { display:flex; flex-direction:column; justify-content:center; flex:1; min-width:0; padding:clamp(22px,4vw,56px) clamp(16px,4vw,60px); }
.cb-boot-intro { display:flex; align-items:center; gap:10px; margin-bottom:25px; font:700 12px monospace; line-height:1.5; }
.cb-boot-marker { display:block; flex:none; width:9px; height:9px; border:2px solid #fff; box-shadow:3px 3px 0 #ffffff50; }
.cb-boot .cb-boot-title { display:block; margin:0; padding:0; font-family:Arial,Helvetica,sans-serif; color:#fff; font-weight:900; }
.cb-boot-title-small { display:block; font-size:clamp(18px,2.5vw,32px); line-height:1.2; letter-spacing:-.5px; }
.cb-boot-exe { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:clamp(82px,23vw,320px); line-height:.94; letter-spacing:-.085em; margin:12px 0 15px; padding-right:.03em; }
.cb-boot-title-footer { display:block; font-size:clamp(14px,2vw,23px); line-height:1.4; letter-spacing:-.2px; }
.cb-boot-bottom { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:32px; margin-top:clamp(32px,5vw,70px); padding-top:25px; border-top:1px solid #ffffff40; }
.cb-boot .cb-boot-pitch { margin:0; color:#fff; font-family:Arial,Helvetica,sans-serif; font-size:clamp(20px,2.7vw,35px); font-weight:400; line-height:1.15; letter-spacing:-1px; }
.cb-boot-pitch strong { font-weight:800; }
.cb-boot-pitch>span { display:block; margin-top:14px; font:700 12px/1.5 monospace; letter-spacing:0; }
.cb-boot-launch { display:flex; flex-direction:column; min-width:0; }
.cb-boot-progress-wrap { display:block; }
.cb-boot-progress-label { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; font:700 11px/1.3 monospace; }
.cb-boot-progress { display:block; appearance:none; width:100%; height:14px; border:1px solid #ffffff66; border-radius:0; padding:2px; background:#06222d; accent-color:#fff; }
.cb-boot-progress::-webkit-progress-bar { background:#06222d; }
.cb-boot-progress::-webkit-progress-value { background:repeating-linear-gradient(90deg,#fff 0 6px,#06222d 6px 8px); }
.cb-boot-progress::-moz-progress-bar { background:repeating-linear-gradient(90deg,#fff 0 6px,#06222d 6px 8px); }
.cb-boot-resource-count { display:block; margin-top:8px; font:700 10px/1.4 monospace; }
.cb-boot .cb-boot-status { font:700 12px/1.5 monospace; margin:16px 0; color:#fff; }
.cb-boot-enter { display:flex; justify-content:space-between; align-items:center; gap:16px; width:100%; min-height:52px; border:1px solid #fff; border-radius:0; padding:13px 17px; background:#fff; color:#062c39; text-decoration:none; font:800 16px/1.3 Arial,Helvetica,sans-serif; text-align:left; box-shadow:4px 4px 0 #ffffff40; cursor:pointer; }
.cb-boot-enter:hover { background:#d4eeee; box-shadow:2px 2px 0 #ffffff40; }
.cb-boot-enter:active { transform:translate(2px,2px); box-shadow:none; }
.cb-boot-enter:focus-visible,.cb-boot-direct:focus-visible { outline:2px solid #fff; outline-offset:5px; }
.cb-boot-direct { align-self:flex-start; display:inline-flex; align-items:center; min-height:44px; margin-top:8px; color:#fff; text-decoration:underline; text-underline-offset:4px; font:700 11px monospace; }
.cb-boot-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:17px clamp(16px,4vw,60px); border-top:1px solid #ffffff40; font:700 10px/1.4 monospace; }
@media(max-width:650px) {
    .cb-boot { padding:10px; background-size:32px 32px,32px 32px,100% 100%; }
    .cb-boot-frame { min-height:calc(100dvh - 20px); }
    .cb-boot-header { padding:16px; gap:6px; }
    .cb-boot-brand { font-size:18px; }
    .cb-boot-system { font-size:10px; }
    .cb-boot-main { padding:26px 16px; }
    .cb-boot-intro { font-size:11px; margin-bottom:28px; }
    .cb-boot-exe { font-size:clamp(90px,25vw,160px); }
    .cb-boot-title-footer { max-width:270px; }
    .cb-boot-bottom { grid-template-columns:minmax(0,1fr); gap:24px; margin-top:30px; padding-top:22px; }
    .cb-boot .cb-boot-pitch { font-size:24px; }
    .cb-boot-footer { padding:15px 16px; font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
    .blinking-cursor { animation:none; }
    .cb-boot *, .cb-boot *::before,.cb-boot *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
    .cb-boot-enter:active { transform:none; }
}


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