:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding: 22px 16px 20px;
  background: radial-gradient(ellipse 60% 65% at 50% 42%, #202735 0%, #171c24 70%);
  color: #eef0f4;
  font-family: "Anonymous Pro", "Courier New", monospace;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.page {
  width: 100%;
  margin: 0 auto;
  min-height: calc(100svh - 42px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.intro { width: 100%; max-width: 680px; margin: 0 auto; text-align: center; }
.avatar {
  display: block;
  width: 102px;
  height: 102px;
  margin: 0 auto 19px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 33px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.intro p {
  margin: 9px 0 0;
  color: #abb4c0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}
.showcase {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(18px, 3vh, 30px);
}
.turntable {
  position: relative;
  width: min(360px, 36svh, calc(100vw - 32px));
  aspect-ratio: 2 / 3;
  flex: 0 0 auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.turntable.dragging { cursor: grabbing; }
.turntable.moving { cursor: move; }
.model {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  pointer-events: none;
  -webkit-user-drag: none;
  transform-origin: 50% 50%;
  will-change: transform;
}
.turntable.is-ready .model { opacity: 1; }
.placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px;
  text-align: center;
  color: #aab4be;
  font-size: 13px;
  letter-spacing: 0;
}
.placeholder-mark { font-size: 35px; font-weight: 400; color: #c2cbd4; line-height: 1; }
.turntable.is-ready .placeholder { display: none; }
.instructions {
  margin: 13px 0 0;
  max-width: 100%;
  font-size: clamp(11px, 2.5vw, 13px);
  line-height: 1.4;
  color: #abb4c0;
  text-align: center;
}
.instructions a { color: #e1e9f3; text-decoration: underline; text-underline-offset: 3px; }
.instructions a:hover { color: #fff; }
.instructions a:focus-visible { outline: 2px solid #adc8e7; outline-offset: 3px; }
.touch-help { display: none; }
.copyright {
  margin-top: clamp(16px, 3vh, 26px);
  color: #8793a1;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  font-weight: 400;
  letter-spacing: 0;
}
@media (max-width: 500px) {
  .avatar { width: 88px; height: 88px; margin-bottom: 16px; border-radius: 14px; }
  h1 { font-size: clamp(18px, 5.6vw, 23px); }
  .intro p { font-size: 14px; }
  .turntable { width: min(360px, 40svh, calc(100vw - 32px)); }
  .showcase { margin-top: 21px; }
  .desktop-help { display: none; }
  .touch-help { display: inline; }
  .instructions { font-size: clamp(10px, 3vw, 12px); }
}
@media (hover: none), (pointer: coarse) {
  .desktop-help { display: none; }
  .touch-help { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .model { will-change: auto; } }