@font-face {
    font-family:Roboto;
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url('assets/roboto-variable.ttf') format('truetype');
}
* { box-sizing:border-box; }
html { color-scheme:dark; background:#10171b; }
body {
    margin:0;
    min-height:100vh;
    min-height:100svh;
    display:grid;
    place-items:center;
    padding:40px 20px;
    color:#f6f8f7;
    font:16px/1.6 Roboto,Arial,Helvetica,sans-serif;
    letter-spacing:0;
}
main { width:100%; max-width:640px; text-align:center; }
h1 { margin:0 0 24px; font-size:60px; font-weight:800; line-height:1.15; }
.brand-wordmark { display:inline-flex; flex-direction:column; align-items:center; gap:16px; white-space:nowrap; }
.brand-wordmark img { display:block; width:80px; height:80px; object-fit:contain; }
.brand-wordmark b { color:#69dcc1; font-weight:inherit; }
h2 { margin:0 0 12px; font-size:24px; font-weight:500; line-height:1.3; }
p { margin:0; color:#b9c6c7; }
.site-preview {
    width:min(320px, calc(100% - 24px));
    aspect-ratio:8/5;
    margin:32px auto 12px;
    transform:rotate(-4deg);
    border:1px solid #52605e;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 12px 28px #0006;
}
.site-preview img { display:block; width:100%; height:auto; }
.preview-access { display:grid; gap:12px; width:100%; max-width:320px; margin:24px auto 0; text-align:left; }
.preview-access input,.preview-access button { min-width:0; min-height:44px; border:1px solid #52605e; border-radius:4px; padding:10px 12px; font:inherit; }
.preview-access input { background:#fff; color:#10171b; }
.preview-access button { background:#74e0c2; color:#10171b; cursor:pointer; font-weight:600; }
.preview-access :focus-visible { outline:3px solid #74e0c2; outline-offset:3px; }
.preview-access [role=alert] { color:#ffc2ba; }
@media (max-width:600px) {
    h1 { font-size:44px; margin-bottom:32px; }
}
@media (max-width:400px) {
    h1 { font-size:34px; }
    h2 { font-size:22px; }
    p { font-size:15px; }
}