@import url(https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap);
* {
    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);
    }
}

/* Parent-page chrome — the same studio tokens as FloPro OS (src/os/style.css, src/os/site/studio.css). */

:root {
    --paper: #0b0b0b;
    --ink: #f0eee9;
    --ink-muted: #a7a49f;
    --ink-faint: #6f6c67;
    --hairline: #ffffff15;
    --hairline-strong: #ffffff28;
    --accent-ink: #ff5b23;
    /* --phosphor now means "highlight ink"; --crt-blue now means "live signal". */
    --phosphor: #f0eee9;
    --phosphor-dim: #a7a49f;
    --crt-blue: #3ecf8e;
    --ff-display: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --ff-text: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --ff-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-micro: cubic-bezier(0.4, 0, 0.2, 1);
}

#ui { font-family: var(--ff-text); color: var(--ink); font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; }
#ui a { color: inherit; text-decoration: none; }
#ui :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

.term { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1.6; color: var(--ink-faint); white-space: nowrap; }
.term--muted { color: var(--ink-muted); }
.term--dim { color: #ff5b23; }
@keyframes crt-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.crt-cursor { display: inline-block; width: 2px; height: 0.9em; margin-left: 0.3em; vertical-align: -0.08em; background: #ff5b23; animation: crt-blink 1.1s steps(1) infinite; }

/* ── Loading veil ───────────────────────────────────────────────────────────── */
.veil {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background-color: var(--paper);
    background-image: radial-gradient(ellipse 70% 50% at 50% 28%, #ff5b2312, transparent 70%);
    transition: opacity 900ms var(--ease-micro);
    z-index: 3;
}
.veil--lift { opacity: 0; pointer-events: none; }
.veil__box { display: grid; gap: 6px; min-width: 340px; }
.veil__box .term { font-size: 12px; letter-spacing: 1.8px; }
.veil__bar { margin-top: 14px; height: 1px; background: var(--hairline-strong); overflow: hidden; }
.veil__bar i { display: block; height: 100%; background: #ff5b23; transform-origin: left; transform: scaleX(0); transition: transform 300ms var(--ease-micro); }
.veil__skip { position: absolute; right: 32px; bottom: 28px; font-size: 12.5px; color: var(--ink-faint); }
.veil__skip:hover { color: var(--ink); }

/* ── HUD ────────────────────────────────────────────────────────────────────── */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hud > * { pointer-events: auto; }
.hud__brand { position: absolute; top: 28px; left: 34px; display: grid; gap: 4px; }
.hud__wordmark { font-family: var(--ff-display); font-weight: 700; font-size: 20px; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.hud__wordmark span { color: var(--accent-ink); }
.hud__clock { font-variant-numeric: tabular-nums; }
.hud__controls { position: absolute; top: 26px; right: 32px; display: flex; gap: 8px; }
.hud__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px;
    border: 1px solid var(--hairline-strong);
    border-radius: 4px;
    background: rgba(11, 11, 11, 0.72);
    backdrop-filter: blur(6px);
    font: 500 12.5px/1 var(--ff-text);
    color: var(--ink);
    cursor: pointer;
    transition: border-color 150ms var(--ease-micro), background-color 150ms var(--ease-micro), opacity 400ms var(--ease-micro);
}
.hud__btn:hover { border-color: #ffffff4d; background: rgba(18, 18, 18, 0.9); }
.hud__btn[aria-pressed="true"] { border-color: #ff5b23; color: #ff5b23; }
.hud__hint { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); padding: 9px 16px; border: 1px solid var(--hairline-strong); border-radius: 4px; background: rgba(11, 11, 11, 0.78); backdrop-filter: blur(6px); font-size: 12px; animation: hint-in 600ms var(--ease-out); }
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.hud--loading { opacity: 0; }
.hud--monitor .hud__brand, .hud--sitting .hud__brand { opacity: 0.6; }

/* Only the HUD chrome is clickable over the screen; the iframe takes everything else. */
html[data-studio-entered="true"] #ui { pointer-events: none; }
html:not([data-studio-entered="true"]) #css { pointer-events: none; }
/* At the desk, a click anywhere sits you down. */
html[data-studio-entered="false"] body { cursor: pointer; }

@media (max-width: 767px) {
    .hud__brand { top: 20px; left: 20px; }
    .hud__controls { top: 18px; right: 18px; }
    .hud__clock { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}


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