.landing { position: fixed; inset: 0; z-index: 100; background: var(--landing-background, #d1d1d1); color: #000; font-family: var(--font-main); }
.landing[hidden] { display: none; }
body.landing-visible { overflow: hidden; background: var(--landing-background, #d1d1d1); }
.landing-visible .site-shell { visibility: hidden; }
.landing-name { position: absolute; z-index: 3; left: 8px; top: 7px; font-size: 16px; font-weight: 700; line-height: normal; }
.landing-scene { position: absolute; inset: 0; touch-action: manipulation; }
.landing-scene canvas { display: block; width: 100%; height: 100%; }
.landing-scene.is-hovered { cursor: url('assets/cursor_click.svg') 0 0, pointer; }
.landing-enter { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); border: 0; background: none; padding: 12px 18px; color: inherit; font: 700 16px/1 var(--font-main); cursor: pointer; transition: opacity .25s; }
.landing-enter:focus-visible, .landing-name:focus-visible, .landing-color:focus-visible { outline: 2px solid #000; outline-offset: 5px; }
.landing-enter:disabled { cursor: default; }
.landing-status { position: absolute; bottom: 48px; left: 16px; right: 16px; margin: 0; text-align: center; font-size: 14px; }
.landing-status:empty { display: none; }
.landing.is-opening .landing-enter { opacity: 0; }
.landing.is-opening .landing-status { opacity: 0; }
@media (max-width:760px) { .landing-enter { bottom: 20%; font-size: 16px; } }
@media (prefers-reduced-motion:reduce) { .landing-enter { transition: none; } }

.landing { transition: opacity 400ms ease; }
.landing.is-exiting { opacity: 0; pointer-events: none; }
.landing.is-opening .landing-name, .landing.is-opening .landing-colors { opacity: 0; pointer-events: none; }
.landing-name, .landing-colors { transition: opacity 250ms ease; }
@media (prefers-reduced-motion: reduce) { .landing { transition: none; } }

.landing-home { position: fixed; bottom: 16px; right: 16px; left: auto; background: transparent; border: 0; box-shadow: none; padding: 0; z-index: 70; width: 96px; height: 72px; display: grid; place-items: center; }
.landing-home img { width: 96px; height: 72px; object-fit: contain; transform: rotate(30deg); transition: transform 180ms ease; }
.landing-home:hover img { transform: translateY(-3px) rotate(38deg); }
.landing-home:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.landing-visible .landing-home { display: none; }
@media (prefers-reduced-motion: reduce) { .landing-home img { transition: none; } }
.landing-colors { position: absolute; z-index: 3; top: 8px; right: 12px; display: flex; gap: 8px; }
.landing-color { width: 28px; height: 28px; padding: 0; border: 1px solid #000; border-radius: 50%; background: var(--swatch); cursor: pointer; }
.landing-color[aria-pressed="true"] { outline: 1px solid #000; outline-offset: 3px; }