@font-face { font-family: "Pixel Display"; src: url("/announcement/display.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pixel Title"; src: url("/announcement/title.woff2") format("woff2"); font-display: swap; size-adjust: 125%; }
html, body { margin: 0; background: #51476f; }
.front-door { --door-s: 1; position: fixed; inset: 0; display: grid; place-items: center; overflow: auto; box-sizing: border-box; padding: 72px 24px 32px; color: #fbf2e2; background: #51476f; font-family: ui-rounded, "Avenir Next", "Segoe UI", system-ui, sans-serif; }
.front-door-group { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); width: min(340px, 100%); text-align: center; }
.front-door-crane { display: block; justify-self: center; width: 58px; height: 54px; margin-bottom: 30px; image-rendering: pixelated; }
.front-door-name { justify-self: center; margin: 0 0 22px; white-space: nowrap; font: 700 57px/1.1 "Pixel Display", monospace; }
.front-door-dots { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.front-door-dots > i { width: 12px; height: 12px; background: #f3e6cf; }
[data-crane="pink"] { background: #f7b5c5 !important; } [data-crane="sage"] { background: #a9c48e !important; }
[data-crane="lilac"] { background: #c9bfdc !important; } [data-crane="sky"] { background: #a9c0dc !important; } [data-crane="butter"] { background: #f2c46d !important; }
.front-door-line { margin: 0 0 54px; font-size: 20px; line-height: 1.35; }
.coming-soon { margin: 0; font: 400 32px/1.3 "Pixel Title", monospace; }
.front-door[data-door-opening] .front-door-group { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .front-door[data-door-opening] .front-door-group :is(.front-door-crane, .front-door-name, .front-door-dots > i, .front-door-line, .front-door-actions > *) { visibility: hidden; }
}
.front-door-opening { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.front-door-opening-canvas { position: absolute; width: 384px; height: 844px; image-rendering: pixelated; }
.front-door-opening-crane { position: absolute; width: 58px; height: 54px; visibility: hidden; image-rendering: pixelated; }
@media (max-width: 699px) {
  .front-door { place-items: stretch; padding: 0 20px calc(34px + env(safe-area-inset-bottom)); }
  .front-door-group { width: 100%; height: 100%; grid-template-rows: minmax(0, 1.27fr) auto auto auto auto minmax(0, 1fr) auto; }
  .front-door-crane { grid-row: 2; margin-bottom: 40px; }
  .front-door-name { grid-row: 3; margin-bottom: 13px; white-space: normal; font-size: 46px; line-height: 1.02; letter-spacing: .01em; }
  .front-door-name > span { display: block; }
  .front-door-dots { grid-row: 4; gap: 8px; }
  .front-door-dots > i { width: 10px; height: 10px; }
  .front-door-line { grid-row: 5; margin: 0; font-size: 18px; line-height: 1.4; }
  .front-door-actions { grid-row: 7; }
}
@media (min-width: 1000px) and (min-height: 700px) and (orientation: landscape) {
  .front-door { --door-s: 1.25; } .front-door-group { zoom: var(--door-s); }
  .front-door-crane { width: calc(87px / var(--door-s)); height: calc(81px / var(--door-s)); }
  .front-door-opening-crane { width: 87px; height: 81px; }
}
@media (min-width: 1360px) and (min-height: 860px) and (orientation: landscape) { .front-door { --door-s: 1.5; } }