@font-face {
    font-family: Pixelify;
    src: url("/brand/pixelify.ttf") format("truetype");
    font-weight: 400 700;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --ink: #272736;
    --edge: #17191b;
    --lavender: #c2c2d1;
    --muted: #bcbccc;
    --tab-muted: #5b5b70;
    --white: #fff;
    --pink: #ff6b97;
    --green: #a9d962;
    --gold: #ffcc11;
    --font: Pixelify;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: var(--ink); color: var(--white); font: 400 17px/1.25 var(--font); }
a { color: inherit; }
button, input, select, ::file-selector-button { font: inherit; }
button, summary, select, input[type="range"] { cursor: pointer; }
button:disabled, select:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-size: clamp(21px, 4vw, 28px); font-weight: 500; text-transform: uppercase; }
h3 { font-size: 17px; font-weight: 700; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
select, input:not([type="range"]) { max-width: 100%; min-width: 0; }
input:not([type="range"]), select {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--edge);
    border-radius: 0;
    background-color: var(--white);
    color: var(--ink);
}
select {
    appearance: none;
    padding-right: 36px;
    background: var(--white) url("/brand/arrow.svg") right 12px center / 17px 17px no-repeat;
}
input[type="file"] { background: transparent; color: var(--white); padding-inline: 0; border: 0; }
input[type="file"]::file-selector-button { margin-right: 8px; color: var(--ink); background: var(--white); border: 0; padding: 6px 10px; }
button { border: 1px solid var(--edge); border-radius: 0; background: var(--edge); color: var(--white); padding: 8px 12px; min-height: 44px; text-transform: uppercase; }
button.quiet { background: transparent; border-color: #858598; }
button:not(:disabled):hover { border-color: var(--pink); }
details > summary { text-transform: uppercase; font-weight: 500; }
details[open] > summary { margin-bottom: 14px; }
.note { color: var(--muted); font-size: 14px; margin-top: 8px; }
.center { text-align: center; }
.field { display: grid; gap: 6px; margin: 13px 0; }
.buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.centered { justify-content: center; }

.masthead-background {
    position: absolute;
    inset: 0 0 auto;
    height: min(78vw, 470px);
    pointer-events: none;
    background: var(--lavender);
    overflow: hidden;
}
.masthead-background::after {
    content: "";
    position: absolute;
    inset: 14% 0 2%;
    background: url("/brand/wave.svg") center / max(100%, 450px) 100% no-repeat;
    opacity: .15;
}
.shell { position: relative; width: min(81%, 560px); min-width: min(278px, 92%); margin: 0 auto; padding: clamp(14px, 4vw, 30px) 0 50px; }
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink); }
.brand { display: block; width: clamp(128px, 34vw, 220px); }
.brand img { display: block; width: 100%; }
.tools { display: flex; gap: clamp(0px, 2vw, 12px); }
.icon-link { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.icon-link img { width: clamp(21px, 6vw, 32px); height: auto; }
.icon-link[aria-current="page"] { box-shadow: inset 0 -3px var(--pink); }
.device-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin: clamp(26px, 7.5vw, 54px) 0 clamp(23px, 7vw, 52px);
    color: var(--ink);
}
.device-nav a {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 3px;
    color: var(--tab-muted);
    text-decoration: none;
    font-size: clamp(20px, 6.3vw, 39px);
    text-transform: uppercase;
    line-height: 1;
}
.device-nav a[aria-current] { color: var(--ink); font-weight: 700; }
.device-icon { width: clamp(27px, 7.1vw, 46px); aspect-ratio: 1; display: block; background: currentColor; }
[data-device="home"] .device-icon { --icon: url("/brand/home.svg"); }
[data-device="dionte"] .device-icon { --icon: url("/brand/dionte.svg"); }
[data-device="eric"] .device-icon { --icon: url("/brand/eric.svg"); }
.device-icon { -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }

.screen { position: relative; width: 100%; aspect-ratio: 1; border: 1.5px solid #231f20; background: #a7a7b7; overflow: hidden; }
.screen.has-art { background: #060509; }
#empty-preview { position: absolute; inset: 0; }
.screen img, .screen canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; }
#panel-preview, #weather-screen { width: 100%; height: 100%; }
#weather-screen { position: relative; background: #000; }
#weather-screen img { position: absolute; inset: 0; }
.panel-dots {
    -webkit-mask: url("/panel-dots.svg") center / 100% 100% no-repeat;
    mask: url("/panel-dots.svg") center / 100% 100% no-repeat;
}
.panel-tones { filter: brightness(.95) contrast(1.11); }
.mode-bar { display: flex; align-items: center; justify-content: center; gap: clamp(13px, 5vw, 38px); margin: clamp(23px, 7vw, 44px) 0 clamp(26px, 8vw, 53px); }
.mode-bar label { font-size: clamp(20px, 5.6vw, 34px); text-transform: uppercase; }
.mode-bar select { width: min(58%, 265px); min-height: 44px; text-transform: uppercase; text-align: center; font-size: clamp(17px, 4.6vw, 27px); }
.device-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 8px; margin-bottom: 8px; }
.text-button { background: none; border: 0; color: var(--white); padding: 0; font-size: clamp(12px, 3.2vw, 18px); display: inline-flex; align-items: center; gap: 5px; text-align: left; }
.text-button[aria-expanded="true"] { text-underline-offset: 4px; }
#show-calibration[aria-expanded="true"] { text-decoration: underline; }
#show-connection.is-connected { color: var(--green); }
#connected-icon { width: 13px; height: 13px; }
.outline { border: 2px solid var(--edge); background: var(--ink); padding: clamp(14px, 4vw, 27px); margin-bottom: 16px; }
.device-panel { min-height: clamp(218px, 55vw, 365px); }
.device-panel h1 { text-align: center; margin: 5px 0 clamp(17px, 5vw, 30px); font-size: clamp(18px, 4vw, 25px); }
.connection-row { display: flex; justify-content: center; align-items: center; gap: 10px; text-transform: uppercase; }
.connection-row select { width: auto; max-width: 62%; text-transform: uppercase; }
.connection-buttons { display: grid; justify-content: center; gap: 7px; margin: 15px 0; }
#panel-assignment, #controller-status { overflow-wrap: anywhere; }
.recovery-check { display: flex !important; align-items: flex-start; gap: 9px; text-align: left; margin: 12px 0; }
.recovery-check input { width: auto; flex: 0 0 auto; margin-top: 3px; }
#controller-recovery button { margin-top: 8px; }
.assignment-confirm { border: 2px solid var(--gold); padding: 12px; margin-top: 12px; }
#connection-panel details { text-align: center; }
#connection-panel details select { margin-top: 6px; }
#connection-panel details label { display: block; margin-top: 14px; }
#connection-panel details summary { color: var(--muted); font-size: 16px; }
.inner-view { background: var(--ink); padding: 16px 0; }
.inner-view > h1 { margin-bottom: 17px; }
.feature-link { display: block; text-transform: uppercase; }
#message { padding: 9px 12px; margin-bottom: 12px; background: var(--edge); border-left: 3px solid var(--pink); overflow-wrap: anywhere; }
.calibration-grid { display: grid; gap: 6px; }
.calibration-grid label > span:first-child { display: flex; justify-content: space-between; }
.calibration-grid output { color: var(--gold); }
.pixel-range { position: relative; display: flex; height: 42px; align-items: center; }
.pixel-range::before {
    content: "";
    position: absolute;
    inset: 13px 2px;
    border: 3px solid var(--edge);
    background: linear-gradient(to right, transparent var(--position, 50%), #3b3b49 var(--position, 50%)), linear-gradient(#f5a400 0 22%, #ffdf22 22% 70%, #ffbb00 70%);
}
.pixel-range input { appearance: none; -webkit-appearance: none; position: relative; display: block; width: 100%; height: 38px; margin: 0; background: transparent; border: 0; padding: 0; }
.pixel-range input::-webkit-slider-runnable-track { background: transparent; }
.pixel-range input::-moz-range-track { background: transparent; }
.pixel-range input::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none; width: 22px; height: 36px; border: 0;
    background: linear-gradient(#ffdd22 0 18%, #ffd000 18% 35%, #ffef4f 35% 62%, #ffb600 62% 82%, #ffce14 82%) center / 12px 28px no-repeat, var(--edge);
    clip-path: polygon(24% 0,76% 0,76% 11%,100% 11%,100% 89%,76% 89%,76% 100%,24% 100%,24% 89%,0 89%,0 11%,24% 11%);
}
.pixel-range input::-moz-range-thumb {
    width: 22px; height: 36px; border: 0;
    background: linear-gradient(#ffdd22 0 18%, #ffd000 18% 35%, #ffef4f 35% 62%, #ffb600 62% 82%, #ffce14 82%) center / 12px 28px no-repeat, var(--edge);
    clip-path: polygon(24% 0,76% 0,76% 11%,100% 11%,100% 89%,76% 89%,76% 100%,24% 100%,24% 89%,0 89%,0 11%,24% 11%);
}
.accounts, .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.accounts button, .saver-upload button, #refresh { margin-top: 10px; }
.saver-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.saver-item { min-width: 0; border: 1px solid #858598; padding: 8px; }
.saver-item img { width: 100%; aspect-ratio: 1; image-rendering: pixelated; display: block; background: #000; margin-bottom: 5px; }
.saver-item h3 { overflow-wrap: anywhere; }
.saver-item button { margin-top: 6px; width: 100%; }
.saver-item select { min-height: 38px; }
.saver-upload { border-top: 1px solid #858598; padding-top: 12px; }
.weather-field { display: flex; align-items: stretch; gap: 6px; margin: 6px 0; }
.weather-field input, .weather-field select { flex: 1 1 auto; }
#weather-locations { list-style: none; padding: 0; }
#weather-locations button { margin-bottom: 4px; }
#weather-preview-controls { margin-top: 12px; }
.preview-title { margin: 22px 0 16px; }
.preview-figure { margin: 12px 0 0; }
.preview-panel { display: grid; place-items: center; aspect-ratio: 1; background: var(--edge); }
.preview-panel img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.preview-placeholder { color: var(--muted); }
.preview-page .masthead { color: var(--white); }
.preview-page .masthead .brand { background: var(--lavender); padding: 6px; }
.auth-page { display: grid; align-content: center; min-height: 100vh; }
.auth-page .brand { padding: 7px; background: var(--lavender); margin-bottom: 20px; }
.auth-page .outline { margin: 0; }
.qr-page {
    background: radial-gradient(circle, #4a4a5e 1px, transparent 1px) var(--ink);
    background-size: 12px 12px;
}
.qr-page .shell { width: min(92%, 500px); }
.qr-masthead, .qr-page #dashboard .masthead { background: var(--lavender); padding: 10px 12px; margin-bottom: 18px; }
.qr-card { display: grid; gap: 14px; }
.qr-action {
    display: flex; align-items: center; justify-content: center; min-height: 48px;
    background: var(--pink); color: var(--edge); padding: 10px 14px;
    text-decoration: none; text-transform: uppercase; font-weight: 700;
}
.qr-secondary { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; text-align: center; }
.qr-help { background: var(--edge); padding: 12px; }
.qr-help summary { min-height: 24px; }
.qr-help ol { padding-inline-start: 1.4em; margin: 0; }
.qr-help li + li { margin-top: 8px; }
.qr-copy { display: flex; gap: 6px; margin: 8px 0; }
.qr-copy input { font: 14px/1.3 ui-monospace, monospace; }
.qr-help > a { display: inline-block; margin-top: 9px; }
.qr-login-note { margin: 10px 0; }
.qr-login-warning { display: grid; gap: 8px; margin: 14px 0; }
.qr-pair-code h1 { margin: 0 0 14px; }
.qr-code-card { background: var(--edge); border: 1px solid var(--pink); padding: 12px 10px; text-align: center; }
.qr-code-card > p { color: var(--muted); }
.qr-radio {
    display: flex; justify-content: center; align-items: center; gap: clamp(5px, 1.5vw, 10px);
    margin: 8px 0; color: var(--white); font: 700 clamp(24px, 9vw, 45px)/1.15 ui-monospace, monospace;
}
.qr-radio img { width: .65em; height: .9em; }
.qr-unit { font-size: 15px; }
[data-qr-panel]:not([data-qr-capable]) #dashboard,
[data-qr-panel][data-qr-capable] #qr-guide,
[data-qr-panel] .masthead-background,
[data-qr-panel] .device-nav,
[data-qr-panel] #connection-title,
[data-qr-panel] #mac-connection,
[data-qr-panel] #device-unpaired,
[data-qr-panel] #panel-assignment,
[data-qr-panel] #expected-bluetooth,
[data-qr-panel] :is(#test-bluetooth, #identify-bluetooth):disabled { display: none; }
[data-qr-panel] .device-panel { min-height: auto; }
[data-qr-panel] #direct-connection > .connection-buttons { justify-content: stretch; margin: 12px 0; }
[data-qr-panel] #connection-panel .qr-help { margin-top: 18px; text-align: left; }
#connect-bluetooth, #open-playback { display: block; width: 100%; margin: 12px 0; background: var(--pink); color: var(--edge); font-weight: 700; }
[data-hosted] #mac-playback { border: 1px solid var(--edge); padding: 12px; margin-bottom: 16px; }
[data-hosted] #mac-playback .mode-bar { margin: 12px 0; }
[data-hosted] #resume-mac { margin-top: 10px; }
#device-view { display: flex; flex-direction: column; }
body:not([data-hosted]) #screen { order: -2; }
body:not([data-hosted]) #mac-playback { order: -1; }
[data-hosted] #screen { margin-top: 16px; }
#phone-playback #screensaver-title { scroll-margin-top: 16px; }
[data-qr-panel] #bluetooth-feedback { margin: 10px 0; font-size: 16px; }
@media (max-width: 390px) {
    .accounts { grid-template-columns: 1fr; }
    .saver-item { padding: 5px; }
    .saver-item select { font-size: 13px; }
}