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

h1,
h2,
h3,
h4,
h5,
p {
    /* font-family: ocr-a-std, monospace; */
    font-family: monospace;
    font-weight: 400;
    font-style: normal;
    color: white;
    /* mobile friendly font size */
    font-size: 16px;
}

/* if on mobile */
@media only screen and (max-width: 768px) {
    h1,
    h2,
    h3,
    h4,
    h5,
    p {
        font-size: 10px;
    }
}

br {
    padding-top: 8px;
    padding-bottom: 8px;
    height: 16px;
}

/* ------------------------------------------------------------------ */
/* Loading screen: near-black, small status line, thin progress bar   */
/* ------------------------------------------------------------------ */

.loader {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
    color: #8c8c8c;
    font: 12px/1.4 ui-monospace, 'Cascadia Mono', Consolas, 'SFMono-Regular', Menlo, monospace;
    letter-spacing: 0.02em;
    opacity: 1;
    transition: opacity 0.5s ease;
}
.loader.is-leaving {
    opacity: 0;
    pointer-events: none;
}
.loader p {
    margin: 0;
    font: inherit;
    color: inherit;
}
.loader-box {
    width: min(220px, 70vw);
}
.loader-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.loader-pct {
    color: #5c5c5c !important;
    font-variant-numeric: tabular-nums;
}
.loader-bar {
    height: 1px;
    background: #ffffff1f;
    overflow: hidden;
}
.loader-bar span {
    display: block;
    height: 100%;
    background: #d6d6d6;
    transform-origin: left center;
    transition: transform 0.25s ease-out;
}

/* ------------------------------------------------------------------ */
/* Scene guidance: compact terminal labels and Back to desk           */
/* ------------------------------------------------------------------ */

.scene-ui {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    font: 11px/1.4 "Courier New", Courier, monospace;
    color: #e8edf3;
}
.scene-ui p {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.scene-hint {
    position: absolute;
    left: 50%;
    bottom: 108px;
    margin: 0;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 5px 9px;
    border: 1px solid #d9e3de50;
    border-radius: 0;
    background: #202b2bd9;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, 0);
    transition: opacity .18s ease;
}
.scene-hint.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.scene-back {
    pointer-events: auto;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: 1px solid #d9e3de50;
    background: #202b2be6;
    transition: background 0.15s, border-color 0.15s;
}
.scene-back:hover {
    background: #364443;
    border-color: #dce8df;
}
.scene-back:focus-visible {
    outline: 1px solid #e5eee8;
    outline-offset: 2px;
}


/* Sits in the side margin of the zoomed-in laptop view */
.scene-back {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 44px;
    min-height: 44px;
    padding: 6px 0;
    border-radius: 0;
    font-size: 11px;
    animation: scene-in 0.4s ease 0.6s both;
}
.scene-back svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Portrait: plenty of room above the screen */
@media (max-aspect-ratio: 1/1) {
    .scene-back {
        top: 20px;
        left: 16px;
        transform: none;
    }
}

@keyframes scene-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .loader {
        transition-duration: 0.15s;
    }
    .loader-bar span,
    .scene-hint {
        transition-duration: 0.01s;
    }
    .scene-back {
        animation: none;
    }
    .scene-hint,
    .scene-hint.is-visible {
        transform: translate(-50%, 0);
    }
}

/* Room UI: compact monochrome labels and a precise records plaque. */
#drawer-controls,
#cubing-records {
    position: fixed;
    z-index: 30;
    box-sizing: border-box;
    font-family: "Courier New", Courier, monospace;
    color: #f5f5f2;
}
#drawer-controls {
    left: 32px;
    bottom: 24px;
    display: grid;
    grid-template-columns: repeat(3, max-content);
    align-items: center;
    gap: 3px;
    width: max-content;
    max-width: calc(100vw - 40px);
}
#drawer-controls > span {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 4px 8px;
    margin-bottom: 3px;
    background: #202b2be6;
    color: #c7cbc8;
    font-size: 10px;
    line-height: 1.4;
}
#drawer-controls button {
    min-height: 36px;
    padding: 5px 8px;
    border: 1px solid #d9e3de50;
    border-radius: 0;
    background: #202b2be6;
    color: inherit;
    font: 11px/1.4 "Courier New", Courier, monospace;
    white-space: nowrap;
    cursor: pointer;
}
#drawer-controls button:hover:not(:disabled) { background: #eeefeb; color: #151715; }
#drawer-controls button:disabled { color: #777c78; cursor: default; }
#drawer-controls button:focus-visible,
#cubing-records button:focus-visible { outline: 1px dotted #fff; outline-offset: -3px; }
#drawer-controls[data-view="desk"] { display: flex; left: 50%; transform: translateX(-50%); }
#drawer-controls[data-view="desk"] > span,
#drawer-controls[data-view="desk"] button:disabled { display: none; }
/* Hidden state must win over the alternate desk-view display mode. */
#drawer-controls[hidden], #cubing-records[hidden] { display: none; }
#cubing-records {
    z-index: 35;
    width: 218px;
    max-width: calc(100vw - 32px);
    padding: 9px 12px 10px;
    background: #202b2bf0;
    border: 1px solid #d9e3de50;
}
.cubing-records-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 5px;
    margin-bottom: 2px;
    border-bottom: 1px solid #ffffff30;
}
.cubing-records-header strong { flex: 1; font-size: 11px; line-height: 1.4; font-weight: 400; white-space: nowrap; }
.cubing-records-format { position: relative; font: 11px/1.4 "Courier New", Courier, monospace; color: #c6d1ca; cursor: help; }
.cubing-records-format:focus-visible { outline: 1px dotted #f5f5f2; outline-offset: 3px; }
.cubing-records-help {
    position: absolute; right: -18px; top: calc(100% + 7px); z-index: 1;
    padding: 5px 7px; border: 1px solid #aebfb180; background: #25302b;
    color: #f5f5f2; font: 11px/1.35 "Courier New", Courier, monospace;
    white-space: nowrap; visibility: hidden; opacity: 0; pointer-events: none;
}
.cubing-records-format:hover .cubing-records-help,
.cubing-records-format:focus .cubing-records-help { visibility: visible; opacity: 1; }
.cubing-records-header button {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-right: -6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #aeb6b0;
    font: 17px/1 "Courier New", Courier, monospace;
    cursor: pointer;
}
.cubing-records-header button:hover { color: white; background: #ffffff13; }
#cubing-records dl { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 18px; margin: 0; }
#cubing-records dt, #cubing-records dd { padding: 6px 0; border-bottom: 1px solid #ffffff12; }
#cubing-records dt { display: flex; align-items: center; color: #aeb6b0; font-size: 11px; }
#cubing-records dd { margin: 0; font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
#cubing-records dt:nth-last-of-type(1), #cubing-records dd:last-child { border-bottom: 0; }

/* Two fitted typewriter labels, anchored at the bottom-left of the room. */
.scene-introduction {
    position: fixed;
    z-index: 25;
    left: 32px;
    bottom: 28px;
    display: grid;
    justify-items: start;
    row-gap: 4px;
    max-width: calc(100vw - 64px);
    pointer-events: none;
    opacity: 1;
    transition: opacity .18s ease, visibility .18s;
}
.scene-introduction p {
    display: flex;
    position: relative;
    min-height: 27px;
    margin: 0;
    color: #fff;
    font: 400 16px/19px "Courier New", Courier, monospace;
    white-space: nowrap;
}
.scene-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.scene-type-reveal { display: inline-block; padding: 4px 14px; background: #000; }
.scene-type-reveal[data-empty="true"] { visibility: hidden; }
.scene-utilities {
    position: fixed;
    z-index: 25;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 1;
    transition: opacity .18s ease, visibility .18s;
}
.scene-utilities button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid #d9e3de50;
    border-radius: 0;
    background: #202b2bd9;
    color: #ffffffe6;
    font: 11px/1.3 "Courier New", Courier, monospace;
    text-shadow: 0 1px 3px #111c24cc;
    cursor: pointer;
}
.scene-utilities svg { width: 14px; height: 14px; filter: drop-shadow(0 1px 2px #111c2499); }
.scene-utilities button:hover { background: #364443; color: #fff; }
.scene-utilities button[aria-pressed="true"] { color: #fff; background: #31413fe6; border-color: #dce8df99; }
.scene-utilities button:focus-visible { outline: 1px dotted #fff; outline-offset: -2px; }
.scene-introduction[aria-hidden="true"], .scene-utilities[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 600px) {
    .scene-hint { bottom: 114px; max-width: calc(100vw - 36px); }
    #drawer-controls { left: 18px; bottom: 64px; max-width: calc(100vw - 36px); }
    #drawer-controls[data-view="desk"] { bottom: 72px; }
    #drawer-controls button { min-height: 36px; }
    .scene-introduction { left: 18px; bottom: 19px; max-width: calc(100vw - 36px); }
    .scene-introduction p { min-height: 24px; font-size: 11px; line-height: 16px; }
    .scene-type-reveal { padding: 4px 10px; }
    .scene-utilities { right: 14px; bottom: 14px; }
    .scene-utilities button { min-width: 34px; min-height: 34px; padding: 7px; }
    .scene-utilities button span { display: none; }
}
@media (pointer: coarse) {
    #drawer-controls button, .cubing-records-header button, .scene-utilities button { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .scene-introduction, .scene-utilities { transition: none; }

}

/* Mobile utilities and help share the existing restrained scene labels. */
.scene-help-trigger { min-width: 32px; font-size: 15px !important; }
.scene-help {
    position: absolute; right: 0; bottom: calc(100% + 10px);
    width: 340px; max-width: calc(100vw - 28px); max-height: min(540px, 70dvh);
    box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 14px 14px; border: 1px solid #d9e3de70;
    background: #202b2bf5; color: #f2f4f0; font: 12px/1.5 "Courier New", monospace;
    text-shadow: none; text-align: left;
}
.scene-help header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scene-help strong { font-size: 13px; font-weight: 400; }
.scene-help header button { min-width: 44px; min-height: 44px; margin: -8px -10px -4px 0; border: 0; background: transparent; font-size: 20px; }
.scene-help dl { margin: 10px 0 0; }
.scene-help dt { margin-top: 10px; color: #bbc7c1; }
.scene-help dd { margin: 2px 0 0; }
.scene-touch-actions { display: none; }
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
    .scene-introduction { bottom: calc(76px + env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); }
    .scene-utilities { right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }
    .scene-utilities > button { min-width: 44px; min-height: 44px; }
    .scene-touch-actions {
        pointer-events: auto; position: absolute; left: max(16px, env(safe-area-inset-left));
        bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; gap: 4px;
    }
    .scene-touch-actions button {
        min-height: 44px; padding: 6px 9px; border: 1px solid #d9e3de50; border-radius: 0;
        background: #202b2be6; color: #f5f5f2; font: 11px/1.4 "Courier New", monospace;
    }
    .scene-touch-actions button:focus-visible { outline: 1px dotted white; outline-offset: -3px; }
    .scene-hint { bottom: calc(144px + env(safe-area-inset-bottom)); font-size: 12px; }
    #drawer-controls { left: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }
    #drawer-controls button { min-height: 44px; font-size: 12px; }
    #drawer-controls > span { font-size: 11px; }
    #cubing-records { width: 238px; }
    .cubing-records-header strong, .cubing-records-format, #cubing-records dt { font-size: 12px; }
    .cubing-records-header button { flex-basis: 44px; width: 44px; height: 44px; }
    .cubing-records-format { display: inline-flex; align-items: center; min-height: 44px; }
    .scene-back { top: max(4px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); transform: none; flex-direction: row; gap: 4px; width: auto; min-width: 72px; min-height: 44px; padding: 6px 10px; animation: none; }
}
/* Keep the iframe alive: override only its CSS3D ancestors during phone focus. */
body.mobile-desktop-active #css { position: fixed; inset: 0; z-index: 15; background: #202b2b; }
body.mobile-desktop-active #css > div { perspective: none !important; }
body.mobile-desktop-active #css > div > div { transform: none !important; }
.laptop-desktop-surface.is-mobile-desktop {
    position: fixed !important; left: 0 !important; top: max(52px, calc(env(safe-area-inset-top) + 48px)) !important;
    width: 100vw !important; height: calc(var(--mobile-viewport-height, 100dvh) - max(52px, calc(env(safe-area-inset-top) + 48px))) !important;
    transform: none !important; transform-origin: 0 0 !important;
}
body.mobile-desktop-active .scene-hint { display: none; }
@media (max-width: 360px) {
    .scene-touch-actions button { padding-inline: 6px; font-size: 10px; }
}