:root {
    color-scheme: light;
    --paper: #000;
}

* { box-sizing: border-box; }

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: var(--paper);
}

body { overflow: hidden; }

.canvas {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #000;
}

.canvas::before {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 28px;
    pointer-events: none;
}

.canvas::after {
    content: none;
}

.halo {
    display: none;
}

.logo {
    display: block;
    width: min(28.8vw, 320px);
    height: auto;
    max-width: calc(100vw - 72px);
    max-height: 54.4vh;
    object-fit: contain;
    position: relative;
    z-index: 1;
    border-radius: 3px;
    box-shadow: none;
    animation: settle 900ms cubic-bezier(.22,.8,.24,1) both;
}

@keyframes settle {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 700px) {
    .canvas::before { inset: 12px; border-radius: 20px; }
    .logo { width: min(49.6vw, 272px); max-width: calc(100vw - 48px); max-height: 52.8svh; }
    .halo { width: 115vw; }
}

@media (prefers-reduced-motion: reduce) {
    .logo { animation: none; }
}