* {
    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::after {
    display: inline-block;
    animation: dotty steps(1, end) 1s infinite;
    content: '';
}

@keyframes dotty {
    0% {
        content: '   ';
    }
    25% {
        content: '. ';
    }
    50% {
        content: '.. ';
    }
    75% {
        content: '...';
    }
    100% {
        content: '   ';
    }
}
.blinking-cursor {
    background-color: #fff;
    width: 0.8em;
    height: 0.15em;
    -webkit-animation: 0.65s blink step-end infinite;
    -moz-animation: 0.65s blink step-end infinite;
    -ms-animation: 0.65s blink step-end infinite;
    -o-animation: 0.65s blink step-end infinite;
    animation: 0.65s blink step-end infinite;
}

@keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-moz-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-webkit-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-ms-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-o-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

.bios-start-button {
    background-color: #000;
    border: 4px solid #fff;
    border-width: 4px 3px 4px 3px;
}

.bios-start-button p {
    box-sizing: border-box;
    padding: 8px;
}

.bios-start-button:hover p {
    background-color: #fff;
    cursor: pointer;
    color: #000;
}

.loading-screen-header {
    padding: 48px;
}

.loading-screen-body {
    padding-left: 48px;
    padding-right: 48px;
}

.loading-screen-footer {
    padding: 48px;
    padding-bottom: 64px;
}

.info-wrapper {
    top: 64px;
    left: 64px;
}

/* if on mobile make all loading screen elements have a padding of 16 */
@media only screen and (max-width: 768px) {
    .loading-screen-header {
        padding: 16px;
    }

    .info-wrapper {
        top: 16px;
        left: 16px;
    }

    .blinking-cursor {
        background-color: #fff;
        width: 0.4em;
        height: 0.08em;
        -webkit-animation: 0.65s blink step-end infinite;
        -moz-animation: 0.65s blink step-end infinite;
        -ms-animation: 0.65s blink step-end infinite;
        -o-animation: 0.65s blink step-end infinite;
        animation: 0.65s blink step-end infinite;
    }
    
    .loading-screen-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .loading-screen-footer {
        padding: 16px;
        padding-bottom: 32px;
    }
}
/* A compact terminal welcome. The mascot uses the original terminal glyphs. */
.terminal-boot{position:fixed;inset:0;background:#171715;display:grid;place-items:center;color:#e9e5dc;padding:32px;overflow:auto;font:14px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;pointer-events:auto}
.terminal-boot *{box-sizing:border-box}.terminal-session{width:min(610px,100%)}.terminal-caption{display:flex;align-items:center;justify-content:space-between;color:#d77757;padding-bottom:28px;border-bottom:1px solid #36342e}.terminal-caption small{color:#858178;font-size:12px}.terminal-caption button{font:inherit;background:none;color:#d6d1c6;border:1px solid #514d44;border-radius:4px;padding:3px 10px;cursor:pointer}.terminal-identity{display:flex;align-items:center;gap:32px;margin:44px 0 28px}.clawd{font:24px/1 monospace;white-space:pre;letter-spacing:0;color:rgb(215,119,87);margin:0;flex:none;animation:clawd-hello 4s ease-in-out infinite}.terminal-identity h1{font:600 30px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-1.3px;margin:5px 0 10px}.terminal-boot p{font:inherit;color:inherit;margin:0}.terminal-identity .terminal-eyebrow{font-size:10px;letter-spacing:2px;color:#baab93}.terminal-identity>div>p:last-child{font-size:12px;color:#a6a195}.terminal-description{padding-bottom:36px!important}.terminal-description span{color:#8e897d}.terminal-output{border-top:1px solid #36342e;padding-top:22px;font-size:12px}.terminal-output>div:first-child{display:flex;gap:10px;align-items:center}.terminal-star{color:#d77757}.terminal-percent{margin-left:auto;color:#888377}.terminal-progress{height:2px;background:#34312b;margin:16px 0 24px}.terminal-progress>span{display:block;height:100%;background:#d77757;transition:width .25s}.terminal-enter{display:flex;justify-content:space-between;align-items:center;width:100%;font:inherit;font-weight:600;padding:14px 18px;background:#d77757;color:#1c1915;border:0;border-radius:4px;cursor:pointer}.terminal-enter:hover{background:#e18e72}.terminal-enter:disabled{background:#37322c;color:#928475;cursor:wait}.terminal-enter:focus-visible,.terminal-caption button:focus-visible{outline:2px solid #efb497;outline-offset:5px}.terminal-foot{display:flex;justify-content:space-between;padding-top:16px;font-size:10px;color:#807a6f}.terminal-foot span:first-child{color:#baaa94}@keyframes clawd-hello{0%,80%,100%{transform:translateY(0)}88%{transform:translateY(-3px)}}@media(max-width:600px){.terminal-boot{padding:28px 24px}.terminal-caption{padding-bottom:22px}.terminal-identity{gap:18px;margin:35px 0 26px}.clawd{font-size:19px}.terminal-identity h1{font-size:25px}.terminal-identity>div>p:last-child{font-size:10px;max-width:180px}.terminal-description{font-size:12px!important}.terminal-output{font-size:10px}.terminal-foot{font-size:9px}}@media(prefers-reduced-motion:reduce){.clawd{animation:none}.terminal-progress>span{transition:none}}
.world-host{position:fixed;inset:0;z-index:100000;pointer-events:auto;background:#eddabe}.world-host iframe{border:0;width:100%;height:100%;display:block}.world-host-close{position:absolute;z-index:2;left:22px;top:20px;border:1px solid #d1bba0;border-radius:30px;padding:12px 17px;background:#fff7e9;color:#493928;font:600 12px/1.2 system-ui;cursor:pointer}.world-host-close:focus-visible{outline:3px solid #955334}@media(max-width:600px){.world-host-close{left:12px;top:12px;padding:10px 12px}}
@media(pointer:coarse),(max-width:600px){.world-host-close{left:max(10px,env(safe-area-inset-left));top:calc(env(safe-area-inset-top) + 10px);min-height:44px;padding:8px 10px;font-size:10px;max-width:calc(100% - 206px)}}