/* Home evolves the existing black/champagne studio, retaining the live form. */
.landing-nav { display: flex; align-items: center; gap: 28px; color: #beb4a4; font-size: 12px; }
.landing-nav a { text-decoration: none; padding: 12px 0; }
.landing-nav a:hover { color: #f0d2a1; }
.landing-nav > span { font: 15px/1.5 "Moments Hand",serif; color: #a99d89; }
.landing { display: contents; }
.landing-only,.landing-eyebrow { display: none; }
body[data-has-account="false"] { height: auto; overflow: auto; background: #050605; }
body[data-has-account="false"] .topbar { max-width: 1280px; height: 80px; left: 48px; right: 48px; margin-inline: auto; }
body[data-has-account="false"] #composer { display: none; }
body[data-has-account="false"] .landing {
  display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: center;
  column-gap: 56px; row-gap: 34px; width: calc(100% - 112px); max-width: 1264px;
  min-height: min(100dvh,1000px); margin-inline: auto; padding: 126px 0 32px; align-content: center;
}
body[data-has-account="false"] #account-panel {
  position: relative; z-index: 2; inset: auto; transform: none; width: 100%; max-width: 530px; max-height: none;
  padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
body[data-has-account="false"] .landing-eyebrow { display: block; color: #b7a487; font-size: 12px; letter-spacing: 1px; margin: 0 0 24px; }
body[data-has-account="false"] .studio-intro #studio-title { font: 400 clamp(42px,4.5vw,66px)/1.35 "Moments Hand",serif; letter-spacing: -.8px; color: #eee7db; margin: 0 0 22px; }
body[data-has-account="false"] #studio-title span { color: #e0bd85; }
body[data-has-account="false"] .studio-intro .description { margin: 0 0 32px; color: #b2ada3; font: 14px/1.95 var(--font-ui); }
body[data-has-account="false"] .online-search > label { color: #c2b8a5; font-size: 12px; margin-bottom: 10px; }
body[data-has-account="false"] .online-input { gap: 10px; min-height: 60px; padding: 5px 5px 5px 16px; border: 1px solid #766447; border-radius: 12px 12px 5px 12px; background: #141410; box-shadow: inset 0 1px 7px #0005; }
body[data-has-account="false"] .online-input:focus-within { border-color: #e0bd85; box-shadow: 0 0 0 2px #e0bd8524; }
body[data-has-account="false"] .online-input input { color: #f2e7d4; font-size: 14px; min-height: 44px; }
body[data-has-account="false"] .online-input input::placeholder { color: #a79f91; }
body[data-has-account="false"] .online-input > span { color: #d0b482; font-size: 18px; }
body[data-has-account="false"] .online-input button { min-height: 48px; padding: 11px 17px; border-color: #e4c18c; border-radius: 8px 8px 3px 8px; background: linear-gradient(135deg,#eed0a0,#d3ad74); color: #272014; font-size: 13px; box-shadow: inset 0 1px #fff4dba6; }
body[data-has-account="false"] .online-input button:hover:not(:disabled) { background: #f0d2a1; border-color: #f0d2a1; }
body[data-has-account="false"] #online-status { margin: 10px 0 0; font-size: 11px; color: #a59e91; min-height: 20px; }
body[data-has-account="false"] .online-search[data-error="true"] #online-status { color: #e8ba91; }
body[data-has-account="false"] .landing-example { display: flex; align-items: center; gap: 13px; margin-top: 22px; }
.landing-example button { padding: 5px 0; min-height: 36px; color: #dec193; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 12px; }
.landing-example button span { margin-left: 6px; }
.landing-example button:hover:not(:disabled) { color: #f4dab0; text-decoration: underline; text-underline-offset: 5px; }
.landing-example > span { font: 10px/1.5 var(--font-mono); color: #a69c88; }
body[data-has-account="false"] .landing-visual { display: block; position: relative; min-width: 0; height: clamp(440px,58dvh,640px); overflow: visible; }
.landing-visual::before { content: ''; position: absolute; inset: 10% -8% 0; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse at 44% 40%,#9d7f3020,transparent 62%); }
.landing-orbit { position: absolute; inset: -2% 1% 0 -12%; }
#landing-orbit { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; outline-offset: -8px; border-radius: 16px; }
#landing-orbit:active { cursor: grabbing; }
#landing-orbit-note { position: absolute; left: 10%; top: 6%; color: #c3b393; font-size: 11px; pointer-events: none; }
#landing-orbit-note span { display: block; color: #9c9687; font-size: 10px; margin-top: 4px; }
#landing-orbit-note strong { font-weight: 500; }
#landing-refresh-note { max-width: 230px; }
.landing-print { position: absolute; width: 43%; max-width: 256px; right: 0; bottom: 3%; margin: 0; pointer-events: none; opacity: 0; transform: translateY(12px); transition: opacity .55s ease,transform .55s ease; }
.landing-visual[data-preview-ready="true"] .landing-print { opacity: 1; transform: translateY(0); }
#landing-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 2px; box-shadow: 0 22px 44px #000b,2px 3px 0 #9c957352; transform: perspective(1000px) rotateY(-9deg) rotateZ(3deg); }
.landing-print figcaption { margin: 15px -6px 0; text-align: center; color: #c7b592; font: 13px/1.65 "Moments Hand",serif; }
#landing-top-friend { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-has-account="false"] .landing-how { display: block; grid-column: 1 / -1; padding-top: 25px; border-top: 1px solid #8e785a38; scroll-margin-top: 25px; }
.landing-how ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 45px; list-style: none; padding: 0; margin: 0; }
.landing-how li { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.landing-step { font: 500 20px/1.4 "Falao Figures",sans-serif; color: #a58e65; }
.landing-how h2 { color: #e0d7c7; font: 500 13px/1.5 var(--font-ui); margin-bottom: 4px; }
.landing-how li p { color: #aaa396; font-size: 11px; line-height: 1.8; }
.landing-how .landing-data-note { margin-top: 23px; color: #999284; font-size: 10px; line-height: 1.7; }
body[data-has-account="true"] .landing-nav { display: none; }
body[data-has-account="true"] .landing-only { display: none; }
body[data-has-account="true"] #account-panel { position: fixed; background: #141311fa; border-color: #766447; }
body[data-has-account="true"] #account-panel .online-input button { background: #e0bd85; color: #272014; border-color: #e0bd85; }
body[data-has-account="false"] .landing [data-searching="true"] { cursor: progress; }
@media(min-width:761px) and (max-width:1100px) {
  body[data-has-account="false"] .topbar { left: 28px; right: 28px; }
  body[data-has-account="false"] .landing { width: calc(100% - 64px); gap: 28px; padding-top: 116px; }
  body[data-has-account="false"] .studio-intro #studio-title { font-size: 43px; }
  body[data-has-account="false"] .studio-intro .description { font-size: 12px; }
  body[data-has-account="false"] .online-input { flex-wrap: wrap; gap: 0 8px; padding: 7px 10px; }
  body[data-has-account="false"] .online-input input { width: calc(100% - 30px); font-size: 13px; }
  body[data-has-account="false"] .online-input button { flex: 1 0 100%; margin: 3px 0; min-height: 44px; }
  body[data-has-account="false"] .landing-visual { height: 460px; }
  .landing-print { width: 49%; }
  .landing-how ol { gap: 20px; }
  .landing-how li { gap: 10px; }
}
@media(max-width:760px) {
  body[data-has-account="false"] .topbar { height: 72px; left: 20px; right: 20px; }
  .landing-nav { gap: 0; font-size: 11px; }
  .landing-nav > span { display: none; }
  body[data-has-account="false"] .landing { width: calc(100% - 40px); display: flex; flex-direction: column; gap: 30px; padding: 116px 0 28px; min-height: 100dvh; }
  body[data-has-account="false"] #account-panel { max-width: none; }
  body[data-has-account="false"] .landing-eyebrow { font-size: 11px; margin-bottom: 17px; }
  body[data-has-account="false"] .studio-intro #studio-title { font-size: clamp(37px,10vw,56px); line-height: 1.35; margin-bottom: 18px; }
  body[data-has-account="false"] .studio-intro .description { font-size: 12px; margin-bottom: 26px; }
  body[data-has-account="false"] .online-input { padding: 4px 4px 4px 11px; min-height: 54px; gap: 6px; }
  body[data-has-account="false"] .online-input input { font-size: 16px; }
  body[data-has-account="true"] #account-panel .online-input input { font-size: 16px; }
  body[data-has-account="false"] .online-input button { min-height: 44px; font-size: 11px; padding: 8px 10px; }
  body[data-has-account="false"] .landing-example { margin-top: 13px; gap: 11px; }
  .landing-example button { min-height: 44px; font-size: 11px; }
  body[data-has-account="false"] .landing-visual { width: 100%; height: min(110vw,500px); flex: 0 0 auto; }
  .landing-visual::before { inset: 10% 0 0; }
  .landing-orbit { inset: 0 0 0 -6%; }
  .landing-print { width: 43%; bottom: 2%; right: 1%; }
  #landing-orbit-note { left: 7%; top: 2%; }
  .landing-print figcaption { font-size: 11px; }
  body[data-has-account="false"] .landing-how { width: 100%; padding-top: 23px; }
  .landing-how ol { grid-template-columns: 1fr; row-gap: 22px; }
  .landing-how h2 { font-size: 13px; }
  .landing-how li p { font-size: 12px; }
  .landing-how .landing-data-note { font-size: 10px; margin-top: 26px; }
}
@media(max-width:360px) {
  body[data-has-account="false"] .online-input { flex-wrap: wrap; padding-inline: 10px; }
  body[data-has-account="false"] .online-input input { width: calc(100% - 28px); }
  body[data-has-account="false"] .online-input button { flex: 1 0 100%; margin-bottom: 5px; }
  .landing-example > span { display: none; }
}
@media(prefers-reduced-motion:reduce) { .landing-print { transition: none; } }

/* A complete 3D viewport, with its daily photograph in a separate row below. */
body[data-has-account="false"] .landing { grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); column-gap:42px; }
body[data-has-account="false"] .landing-visual { display:flex; flex-direction:column; gap:17px; height:auto; }
.landing-visual::before { inset:10% 0 20%; }
.landing-orbit { position:relative; inset:auto; width:100%; }
.landing-orbit-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:45px; }
.landing-orbit #landing-orbit-note { position:static; left:auto; top:auto; margin:0; min-width:0; }
.landing-sphere-actions { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.landing-sphere-actions button { height:32px; min-width:32px; padding:0 9px; font:10px/1.4 var(--font-ui); border:1px solid #a68b533d; border-radius:7px 7px 3px 7px; background:#1b1914bd; color:#d6c4a4; }
.landing-sphere-actions button:hover:not(:disabled) { color:#f5d9a8; border-color:#c9ab71; background:#30271b; }
.landing-sphere-actions button:disabled { opacity:.4; }
.landing-sphere-actions button[aria-pressed="true"] { background:#392e1e; border-color:#ad915f; }
.landing-sphere-stage { position:relative; width:100%; height:clamp(330px,38vw,510px); overflow:hidden; }
#landing-sphere-stage #landing-orbit { width:100%; height:100%; object-fit:contain; }
.landing-person { position:absolute; z-index:5; pointer-events:none; padding:10px 13px; width:190px; max-width:calc(100% - 16px); background:#1b1711f5; border:1px solid #a187555e; border-radius:9px; box-shadow:0 8px 24px #0007; }
.landing-person strong,.landing-person span,.landing-person small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.landing-person strong { font:500 12px/1.6 var(--font-ui); color:#eee1ca; }
.landing-person span,.landing-person small { font:10px/1.6 var(--font-ui); color:#baaa8d; }
.landing-person small { margin-top:4px; }
.landing-sphere-help { margin:0; font:10px/1.7 var(--font-ui); color:#aaa08d; text-align:center; }
.landing-print { position:relative; display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:25px; width:100%; max-width:none; inset:auto; margin:0; padding:22px 16px 7px; border-top:1px solid #c7aa7126; pointer-events:auto; background:radial-gradient(ellipse at 11% 52%,#b9903f0e,transparent 46%); }
#landing-photo { width:112px; height:140px; transform:none; border-radius:2px; outline:1px solid #d5b77c38; outline-offset:0; box-shadow:1px 1px 0 #d5b77c26,0 9px 23px #0007; }
.landing-print figcaption { margin:0; text-align:left; min-width:0; font:12px/1.8 var(--font-ui); }
.landing-print figcaption>small { color:#ad9b7a; font-size:10px; letter-spacing:1px; }
.landing-print .landing-keepsake-line { color:#e2d3b5; font:400 21px/1.65 "Moments Hand",serif; letter-spacing:.2px; margin:7px 0 6px; text-wrap:balance; }
.landing-print #landing-top-friend { display:block; color:#b6aa94; font:400 11px/1.8 var(--font-ui); margin:0 0 8px; }
#landing-open-circle { padding:0; min-height:30px; border:0; background:none; color:#c7ae7c; font:11px/1.5 var(--font-ui); text-align:left; }
#landing-open-circle:hover:not(:disabled) { color:#f3dcb3; text-decoration:underline; text-underline-offset:4px; }
@media(min-width:761px) and (max-width:1100px) {
  body[data-has-account="false"] .landing { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:28px; }
  .landing-orbit-heading { flex-wrap:wrap; }
  .landing-sphere-stage { height:350px; }
}
@media(max-width:760px) {
  body[data-has-account="false"] .landing-visual { height:auto; gap:14px; }
  .landing-sphere-stage { height:clamp(300px,90vw,450px); }
  .landing-orbit-heading { flex-wrap:wrap; gap:10px; }
  .landing-sphere-actions { margin-left:auto; }
  .landing-sphere-actions button { height:36px; min-width:36px; }
  .landing-print { grid-template-columns:88px minmax(0,1fr); gap:19px; padding:18px 4px 4px; }
  #landing-photo { width:88px; height:110px; }
  .landing-print .landing-keepsake-line { font-size:18px; line-height:1.65; }
  .landing-print #landing-top-friend { font-size:10px; white-space:normal; overflow-wrap:anywhere; }
  #landing-open-circle { min-height:40px; }
}