:not(:defined) > * {
  display: none;
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

model-viewer {
  width: 100%;
  height: 90%;
  background-color: #ffffff;
}


.progress-bar {
  display: block;
  width: 33%;
  height: 10%;
  max-height: 2%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 25px;
  box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5), 0px 0px 5px 1px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  background-color: rgba(0, 0, 0, 0.5);
}

.progress-bar.hide {
  visibility: hidden;
  transition: visibility 0.3s;
}

.update-bar {
  background-color: rgba(255, 255, 255, 0.9);
  width: 0%;
  height: 100%;
  border-radius: 25px;
  float: left;
  transition: width 0.3s;
}

#ar-button {
  background-image: url(ar_icon.png);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 12px 50%;
  background-color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  bottom: 16px;
  padding: 0px 16px 0px 40px;
  font-family: Roboto Regular, Helvetica Neue, sans-serif;
  font-size: 14px;
  color:#4285f4;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  border: 1px solid #DADCE0;
}

#ar-button:active {
  background-color: #E8EAED;
}

#ar-button:focus {
  outline: none;
}

#ar-button:focus-visible {
  outline: 1px solid #4285f4;
}

@keyframes circle {
  from { transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); }
}

@keyframes elongate {
  from { transform: translateX(100px); }
  to   { transform: translateX(-100px); }
}

model-viewer > #ar-prompt {
  position: absolute;
  left: 50%;
  bottom: 60px;
  animation: elongate 2s infinite ease-in-out alternate;
  display: none;
}

model-viewer[ar-status="session-started"] > #ar-prompt {
  display: block;
}

model-viewer > #ar-prompt > img {
  animation: circle 4s linear infinite;
}
* {box-sizing:border-box}
html {height:auto;scroll-behavior:smooth}
body {height:auto;background:#101716;color:#eee9dc;font-family:Arial,sans-serif}
header {max-width:1440px;margin:auto;padding:28px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #34403b}
a {color:inherit;text-decoration:none}
.brand {font-family:Georgia,serif;font-size:38px;letter-spacing:.16em}
.brand span {display:block;font:11px Arial,sans-serif;letter-spacing:.16em;margin-top:6px}
.nav {font-size:14px;border-bottom:1px solid #c9a66a;padding:10px 0}
main {max-width:1440px;margin:auto;display:grid;grid-template-columns: minmax(280px, .8fr) minmax(0,1.3fr);gap:5%;padding:48px 5% 56px;align-items:center}
.eyebrow {color:#d4b781;letter-spacing:.15em;font-size:12px}
h1 {font:clamp(40px,4.5vw,70px)/1.08 Georgia,serif;font-weight:400;margin:26px 0}
.story {font:20px/1.6 Georgia,serif;color:#c6cfc5;max-width:360px}
.scene-note {border-top:1px solid #425046;margin-top:40px;padding-top:24px;max-width:380px}
.scene-note span {font-size:12px;color:#d4b781;letter-spacing:.12em}
h2 {font:26px Georgia,serif;margin:16px 0}
.scene-note p {color:#b9c3ba;font-size:16px;line-height:1.7}
.viewer-panel {min-width:0}
model-viewer {height:640px;max-height:75vh;min-height:400px;width:100%;background:#fff;border-radius:160px 160px 4px 4px;overflow:hidden}
.poster {position:absolute;inset:0;background:#fff;display:flex;align-items:center;justify-content:center}
.poster img {height:100%;width:100%;object-fit:contain}
#load-scene {position:absolute;bottom:30px;background:#172820;color:#fff;border:1px solid #c9a66a;padding:16px 24px;font-size:16px;cursor:pointer;box-shadow:0 4px 30px #0004}
#load-scene small {display:block;font-size:12px;margin-top:8px;color:#d7dece}
#viewer-status {font-size:14px;line-height:1.6;color:#bbc6bf;text-align:center;min-height:44px}
footer {border-top:1px solid #34403b;padding:24px 5%;display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.08em;color:#aebeb0}
button:focus-visible,a:focus-visible {outline:3px solid #e7b966;outline-offset:5px}
@media(max-width:700px){header{padding:20px 6%}.brand{font-size:30px}.brand span{font-size:9px}.nav{font-size:14px}main{display:flex;flex-direction:column;padding:28px 6%;gap:24px}.intro,.viewer-panel{width:100%}h1{font-size:42px;margin:18px 0}.story{font-size:18px;max-width:none}.scene-note{margin-top:24px;padding-top:18px;max-width:none}model-viewer{height:550px;max-height:70vh;min-height:360px;border-radius:100px 100px 4px 4px}footer{flex-direction:column;line-height:1.6}}

model-viewer[hidden]{display:none}.static-preview{background:#fff;border-radius:160px 160px 4px 4px;overflow:hidden;height:640px;max-height:75vh;min-height:360px}.static-preview img{width:100%;height:100%;object-fit:contain}