:root { font-family: "Space Grotesk", Arial, sans-serif; color: #191919; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { margin: 0; overflow: hidden; background: #fff; }
button { font: inherit; }
.project-hover-label {
  position: fixed;
  z-index: 15;
  padding: 9px 12px;
  border: 1px solid #d9d9d9;
  background: rgba(255,255,255,.96);
  color: #292929;
  font-size: 13px;
  letter-spacing: -.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s;
}
.project-hover-label.visible { opacity: 1; transform: translateY(0); }
main, .mobile-scene { width: 100%; height: 100%; }
.mobile-scene { position: relative; cursor: grab; touch-action: none; user-select: none; }
.mobile-scene.dragging { cursor: grabbing; }
#mobileCanvas { display: block; width: 100%; height: 100%; outline: none; }
.back-button { position: fixed; z-index: 10; top: 25px; left: 3.8%; color: #555; text-decoration: none; font-size: 23px; line-height: 1; }
.back-button { color: #555; }
.back-button:hover { color: #111; }
.back-button:focus-visible { outline: 2px solid #171717; outline-offset: 5px; }
.detail-card { position: fixed; z-index: 20; right: 3.8%; bottom: 5%; width: min(350px, 29vw); min-height: 300px; padding: 32px 34px 36px; background: #fff; border: 1.5px solid #242424; transform: translateX(calc(100% + 5vw)); opacity: 0; visibility: hidden; transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .25s, visibility .25s; }
.detail-card.open { transform: translateX(0); opacity: 1; visibility: visible; }
.close-card { position: absolute; top: 12px; right: 16px; padding: 0; border: 0; background: none; font-size: 29px; line-height: 1; cursor: pointer; }
.detail-number { margin: 0 0 28px; color: #858585; font-size: 12px; letter-spacing: .08em; }
.detail-card h2 { margin: 0 0 8px; font-size: clamp(24px, 2vw, 34px); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }
.detail-meta { margin: 0 0 26px; color: #737373; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.detail-description { margin: 0; font-size: 15px; line-height: 1.45; }
.detail-note { margin: 35px 0 0; padding-top: 15px; border-top: 1px solid #d1d1d1; color: #858585; font-size: 12px; line-height: 1.4; }
.webgl-error { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; color: #777; font-size: 14px; text-align: center; }
@media (max-width: 760px) {
  .back-button { top: 20px; left: 22px; }
  .detail-card { right: 18px; bottom: 18px; left: 18px; width: auto; min-height: 0; max-height: 54vh; overflow: auto; padding: 27px 28px 30px; transform: translateY(calc(100% + 30px)); }
  .detail-card.open { transform: translateY(0); }
  .detail-number { margin-bottom: 18px; }
  .detail-note { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .detail-card { transition: none; } }