:root {
  color-scheme: dark;
  font-family: Arial, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  color: #e9ece5;
  background: #101110;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; position: relative; isolation: isolate; }
::selection { color: #101110; background: #e6eeef; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.page { min-height: 100svh; max-width: 1800px; margin: auto; padding: 32px 5%; }
main { min-height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: center; }
.object { position: relative; width: 100%; height: clamp(240px, 42vw, 640px); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.object:active { cursor: grabbing; }
.fallback { position: absolute; inset: 0 -3%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.fallback span { font: 600 clamp(150px, 34vw, 530px)/1 Arial, sans-serif; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1px #c6d5dc88; }
.webgl-ready .fallback { display: none; }
.no-webgl #scene { display: none; }
.message { padding: 24px 0 32px; text-align: center; }
h1 { font-weight: 400; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: -.5px; line-height: 1.5; margin: 0; color: #c4cbd0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; }
@media (max-width: 700px) {
  .page { padding: 24px 6%; }
  main { min-height: calc(100svh - 48px); }
  .object { height: clamp(220px, 38svh, 400px); }
  .fallback { inset: 0 -5%; }
  .message { padding: 20px 0 28px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }