:root {
    color-scheme: dark;
    --page-bg: #000000;
    --text: #f2f2f2;
    --muted: #b8b8b8;
    --focus: #5aa9ff;
    --phone-max-width: 20.5rem;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--page-bg);
}

body {
    min-width: 0;
    min-height: 100%;
    margin: 0;
    color: var(--text);
    background: var(--page-bg);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.phone-page {
    display: grid;
    justify-items: center;
    align-content: start;
    min-height: 100svh;
    padding: clamp(0.5rem, 2vw, 1.5rem);
}

@supports (align-content: safe center) {
    .phone-page {
        align-content: safe center;
    }
}

.phone-stage {
    width: min(94vw, var(--phone-max-width));
    height: min(782px, calc(100svh - 1rem));
    max-width: 100%;
}

.retro-phone {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.phone-control {
    cursor: pointer;
    outline: none;
}

.control-hit-area {
    fill: #ffffff;
    fill-opacity: 0.001;
    stroke: transparent;
    stroke-width: 4;
    pointer-events: fill;
    transition: fill-opacity 80ms ease, stroke 80ms ease;
}

.phone-control:hover .control-hit-area {
    fill-opacity: 0.075;
}

.phone-control:active .control-hit-area,
.phone-control.is-pressed .control-hit-area {
    fill-opacity: 0.14;
}

.phone-control:focus-visible .control-hit-area {
    fill-opacity: 0.08;
    stroke: var(--focus);
    stroke-width: 5;
}

.phone-info[hidden] {
    display: none !important;
}

.phone-help,
.phone-status {
    width: min(94vw, 34rem);
    margin: 0.55rem 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}

.phone-status {
    min-height: 1.25rem;
    margin-top: 0.2rem;
    color: var(--text);
}

kbd {
    display: inline-block;
    min-width: 1.4em;
    padding: 0.08em 0.28em;
    border: 1px solid #666666;
    border-bottom-width: 2px;
    border-radius: 0.28em;
    background: #1a1a1a;
    color: var(--text);
    font: inherit;
    font-size: 0.86em;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 32rem) {
    .phone-page {
        padding-inline: 0.35rem;
    }

    .phone-stage {
        width: min(97vw, var(--phone-max-width));
    }
}

@media (orientation: landscape) and (max-height: 42rem) {
    .phone-stage {
        width: min(44vw, 18rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .control-hit-area {
        transition: none;
    }
}