:root { color-scheme: dark; font-family: Georgia, 'Times New Roman', serif; color: #fff2db; background: #081329; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; }
main { height: 100vh; height: 100dvh; overflow: clip; position: relative; isolation: isolate; }
#landscape { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
#landscape.ready { opacity: 1; }
#landscape img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: center; opacity: 0; will-change: opacity; pointer-events: none; }
.phase-layer { position: absolute; inset: 0; opacity: 0; isolation: isolate; will-change: opacity; }
.phase-layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; pointer-events: none; }
.clock { position: absolute; top: max(28px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; text-shadow: 0 2px 16px #000a; padding: 16px 34px; border-radius: 20px; background: radial-gradient(ellipse, #07112650, transparent 72%); }
#clock-label, #phase { font: 10px/1.5 system-ui, sans-serif; letter-spacing: .24em; }
#clock-label { color: #fff0d3; }
#time { display: block; font-size: clamp(28px, 4vw, 42px); font-variant-numeric: tabular-nums; letter-spacing: .06em; margin: 5px 0; }
#phase { text-transform: uppercase; opacity: .8; }
footer { position: absolute; left: 36px; right: 36px; bottom: max(28px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; text-shadow: 0 2px 12px #000; }
h1 { font-size: 15px; font-weight: 400; letter-spacing: .42em; margin: 0 0 12px; }
.controls { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#mode { font: 11px system-ui, sans-serif; letter-spacing: .05em; }
button { cursor: pointer; font: 12px system-ui, sans-serif; color: #fff2db; border: 1px solid #efd6ad66; border-radius: 100px; padding: 13px 20px; min-height: 44px; background: #101a2eb3; backdrop-filter: blur(16px); transition: background .2s, border-color .2s; }
button span { margin-right: 7px; }
button:hover { background: #28334cdd; border-color: #efd6ad; }
button[aria-pressed="true"] { background: #513f36cc; border-color: #f4ce84; }
button:focus-visible { outline: 2px solid #ffdb91; outline-offset: 5px; }
button:disabled { opacity: .5; cursor: wait; }
#loading, noscript { position: absolute; top: 48%; width: 100%; text-align: center; padding: 20px; }
@media (max-width: 600px) { footer { left: 20px; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); } .clock { top: max(16px, env(safe-area-inset-top)); } h1 { font-size: 12px; } #mode { font-size: 10px; } button { padding: 12px 15px; } }
@media (prefers-reduced-motion: reduce) { #landscape, button { transition: none; } }
#landscape { transform-origin: 52% 44.5%; transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2,.65,.2,1), filter 1.2s ease; }
.inside #landscape { transform: scale(2.6); filter: blur(7px); }
#enter-sphere { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; padding: 0; min-height: 0; background: transparent; border: 1px solid transparent; backdrop-filter: none; }
#enter-sphere span { opacity: 0; margin: 0; padding: 8px 16px; border-radius: 20px; background: #142039a8; transition: opacity .25s; }
#enter-sphere:hover { border-color: #ffefd366; box-shadow: 0 0 32px #fff0d333; }
#enter-sphere:hover span, #enter-sphere:focus-visible span { opacity: 1; }
#interior { position: absolute; inset: 0; z-index: 4; background: #101820; opacity: 0; visibility: hidden; transform: scale(.97); transition: opacity 1s ease, transform 1.4s ease, visibility 1.4s; }
.inside #interior { visibility: visible; opacity: 1; transform: scale(1); }
#interior-stage { position: absolute; width: 100%; height: 100%; }
#interior-stage > img, #interior-stage video { position: absolute; width: 100%; height: 100%; object-fit: cover; inset: 0; }
#interior-stage .phase-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#leave-sphere { position: absolute; left: 24px; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 5; }
#leave-sphere span { margin-left: 12px; opacity: .6; font-size: 10px; }
#interior-status { position: absolute; bottom: 25px; right: 24px; z-index: 5; }
.inside > .clock, .inside > footer, .inside > #enter-sphere { opacity: 0; pointer-events: none; }
.clock, footer { transition: opacity .5s; }
#account { position: absolute; top: max(24px, env(safe-area-inset-top)); left: 24px; z-index: 8; max-width: min(390px, calc(100% - 48px)); font-family: system-ui, sans-serif; }
.account-row { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid #c5a0db60; background: #1a1029dd; backdrop-filter: blur(12px); }
.account-row img { border-radius: 4px; flex-shrink: 0; }
.account-row > div { min-width: 0; }
.account-row small { display: block; color: #d6bb89; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 4px; }
#account-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sign-out { padding: 7px 10px; font-size: 10px; border-radius: 4px; margin-left: auto; }
#account-message { background: #1a1029dd; margin: 0; padding: 12px; font-size: 12px; }
#greeting { position: absolute; z-index: 10; top: max(155px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(380px, calc(100% - 32px)); padding: 20px; border: 1px solid #efd6ad66; border-radius: 12px; background: #101a2ee8; backdrop-filter: blur(16px); box-shadow: 0 8px 35px #0004; }
#greeting-message { display: block; font-size: 17px; line-height: 1.5; }
#greeting-entry { display: flex; gap: 10px; margin-top: 14px; }
#greeting input { width: 100%; min-width: 0; border: 1px solid #efd6ad66; border-radius: 6px; padding: 10px; color: #fff2db; background: #080e1c; font: 16px system-ui, sans-serif; }
@media (max-width: 700px) { #account { top: 135px; left: 16px; max-width: calc(100% - 32px); } #account:not([hidden]) ~ #greeting { top: 255px; } }
/* Keep the complete whiteboard and its button visible on portrait screens. */
@media (min-aspect-ratio: 1916/1080) {
  #interior-stage { width: auto; aspect-ratio: 1916 / 1080; left: 50%; transform: translateX(-50%); }
}
@media (max-aspect-ratio: 1916/1080) {
  #interior-stage { height: auto; aspect-ratio: 1916 / 1080; top: 50%; transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  #landscape, #interior { transform: none !important; filter: none !important; transition-duration: .15s; }
}