.experience { position: relative; isolation: isolate; min-height: 42rem; height: 100vh; height: 100svh; overflow: hidden; background: #050812; }
.scene { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 47%, #111b3433, transparent 65%); }
#signature { width: 100%; height: 100%; display: block; }
.scene-brand { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); font-size: clamp(2.25rem, 4.8vw, 4.5rem); font-weight: 450; letter-spacing: .32em; padding-left: .32em; color: #edf0ff; opacity: .7; }
.overload { position: absolute; inset: 20% 1.5rem auto; margin: 0; text-align: center; font-size: clamp(2rem, 5vw, 5rem); font-weight: 650; line-height: 1.12; letter-spacing: -.045em; text-shadow: 0 3px 35px #02040b; opacity: 0; }
.resolution { position: absolute; inset: 17% 1.25rem auto; text-align: center; }
.resolution p, .final-identity p { margin: 0; }
.question { color: #ccd6e9; font-size: clamp(1rem, 2vw, 1.6rem); font-weight: 400; letter-spacing: -.01em; line-height: 1.4; }
.you { color: #fff4e4; font-size: clamp(3rem, 6.2vw, 5.25rem); letter-spacing: .08em; padding-left: .08em; font-weight: 500; line-height: 1.2; margin-top: .6rem !important; text-shadow: 0 0 40px #ffaa5120; }
.human-line { position: absolute; inset: 63% 1.25rem auto; margin: 0; text-align: center; font-size: clamp(.875rem, 1.5vw, 1.125rem); color: #b8c4d9; }
.final-identity { position: absolute; inset: 72% 1.25rem auto; text-align: center; }
.final-logo { font-size: clamp(1.35rem, 2.1vw, 2rem); letter-spacing: .15em; font-weight: 550; line-height: 1.2; }
.final-logo span { color: #b4c3ff; }
.tagline { padding-top: .8rem; font-size: clamp(.875rem, 1.45vw, 1.125rem); color: #cbd4e6; line-height: 1.6; }
.controls { position: absolute; z-index: 5; right: clamp(1.25rem, 4vw, 4rem); bottom: max(1.25rem, env(safe-area-inset-bottom)); display: flex; gap: .35rem; }
.controls button { border: 1px solid transparent; background: transparent; color: #acb6cc; font-size: .875rem; padding: .65rem .85rem; min-height: 44px; cursor: pointer; border-radius: 30px; }
.controls button:hover { color: #fff; background: #a5b5df0e; border-color: #a5b5df25; }
#replay { border-color: #a5b5df30; }
#replay span { margin-left: .35rem; }
.controls button:disabled { opacity: .45; cursor: default; }
.prototype-note { position: absolute; bottom: 2rem; left: clamp(1.5rem, 5vw, 5rem); color: #8591a8; font-size: .75rem; }
.static-mark { position: absolute; top: 35%; left: 50%; transform: translateX(-50%); color: #b2b8fa; font-size: clamp(8rem, 24vw, 16rem); font-family: Georgia, serif; line-height: 1; }
.is-rendering .static-mark { display: none; }
.no-script { position: absolute; bottom: 1rem; width: 100%; text-align: center; color: #abb6cf; font-size: .875rem; }
@media (max-width: 600px) {
  .experience { min-height: 40rem; }
  .scene-brand { top: 27%; font-size: 2.6rem; }
  .overload { top: 23%; font-size: clamp(2rem, 8vw, 3rem); }
  .resolution { top: 20%; }
  .human-line { top: 59%; font-size: .875rem; }
  .final-identity { top: 67%; }
  .prototype-note { bottom: 4.6rem; left: 0; text-align: center; width: 100%; }
  .controls { left: 0; right: 0; justify-content: center; }
  .experience-label { font-size: .75rem; }
}
@media (max-height: 550px) and (min-width: 601px) {
  .experience { min-height: 34rem; }
}

/* Static fallback keeps the same human-centred meaning without Canvas. */
.static-mark::after { content: ''; position: absolute; left: 50%; top: 50%; width: .45rem; height: .45rem; border-radius: 50%; background: #ffd38c; box-shadow: 0 0 20px #ffa83d; transform: translate(-50%,-50%); }

.human-line { line-height: 1.5; top: 61%; }
@media(max-width:600px) {
  .prototype-note { display: none; }
  .human-line { top: 57%; }
  .final-identity { top: 67%; }
}

.tuning { position:fixed; z-index:20; left:20px; top:95px; width:300px; color:#d7e1f5; background:#091223ec; border:1px solid #90b7ed40; border-radius:16px; font:13px -apple-system,BlinkMacSystemFont,sans-serif; box-shadow:0 10px 45px #0006; }
.tuning summary { padding:14px 16px; cursor:pointer; }
.tuning-body { padding:0 16px 16px; max-height:calc(100vh - 180px); overflow:auto; }
.tuning h2 { font-size:16px; margin:4px 0 10px; }
.tuning p { color:#9aaeca; line-height:1.4; font-size:12px; }
.tuning label { display:block; margin:12px 0; }
.tuning output { float:right; font-variant-numeric:tabular-nums; color:#82d8ff; }
.tuning input[type=range] { display:block; width:100%; margin-top:8px; accent-color:#65c7fb; }
.tuning button { background:#172943; border:1px solid #8ab0df40; border-radius:7px; padding:8px; color:#e0eaff; cursor:pointer; }
.tuning .presets { display:flex; gap:6px; flex-wrap:wrap; }
.tuning .selection { display:flex; gap:12px; }
.tuning input[type=number] { width:110px; display:block; margin-top:7px; color:#fff; background:#101d32; border:1px solid #7d99be60; border-radius:5px; padding:7px; }
.tuning hr { border:0; border-top:1px solid #ffffff20; margin-top:18px; }
.tuning textarea { width:100%; height:140px; margin-top:10px; background:#050d1a; color:#cde9ff; }

/* LOT WEB 1: small screens and safe areas, including landscape. */
.tuning { position:absolute; }
@media(max-width:900px) {
 .experience { height:100svh; min-height:560px; }
 .masthead { padding: max(16px, env(safe-area-inset-top)) 20px 12px; }
 .experience-label { font-size:11px; }
 .wordmark { font-size:17px; }
 .controls { bottom:max(12px,env(safe-area-inset-bottom)); }
 .controls button { min-height:48px; padding:10px 15px; touch-action:manipulation; }
 .resolution { top:20%; }
 .question { font-size:clamp(15px,3.6vw,24px); }
 .you { font-size:clamp(42px,10vw,72px); }
 .human-line { top:59%; font-size:14px; }
 .final-identity { top:71%; }
 .tagline { font-size:14px; line-height:1.5; padding-top:10px; }
 .overload { font-size:clamp(24px,6.8vw,44px); }
 .prototype-note { display:none; }
 .tuning { top:65px; left:12px; width:min(300px,calc(100vw - 24px)); font-size:12px; }
 .tuning:not([open]) { width:auto; }
 .tuning summary { padding:10px 12px; min-height:44px; }
 .tuning[open] { right:12px; width:auto; max-height:calc(100svh - 145px); }
 .tuning-body { max-height:calc(100svh - 200px); overscroll-behavior:contain; }
 .tuning input[type=range] { height:28px; }
 .tuning button { min-height:44px; }
 .tuning input[type=number] { font-size:16px; }
}
@media(max-width:900px) and (orientation:landscape) {
 .experience { height:100svh; min-height:360px; }
 .resolution { top:17%; }
 .question { font-size:15px; }
 .you { font-size:34px; margin-top:0!important; }
 .human-line { top:60%; font-size:12px; }
 .final-identity { top:74%; }
 .final-logo { font-size:19px; }
 .tagline { font-size:12px; line-height:1.25; padding-top:5px; }
 .controls { right:12px; left:auto; bottom:8px; }
 .controls button { padding:8px; }
 .tuning { top:60px; }
}