/* Mobile layout with its own bounded composition; desktop keeps its current hero. */
.studio-mobile { display: none; }
.dino-game { display: flex; flex-direction: column; }
.dino-hud { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 5px; color: #9e613e; font: 12px/1.5 'Noto Sans TC',sans-serif; }
#dino-power { color: #506b52; font-size: 10px; }
.dino-rules { color: #506b52; font: 12px/1.8 'Noto Sans TC',sans-serif; }
.dino-rules summary { cursor: pointer; padding: 12px 0; min-height: 44px; }
.dino-rules p { margin: 0 0 10px; }
.dino-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 12px; font: 10px/1.5 'Noto Sans TC',sans-serif; color: #506b52; }
#dino-score { font: 13px monospace; font-variant-numeric: tabular-nums; }
.dino-play { display: block; flex: 1; min-height: 0; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y pinch-zoom; }
#dino-canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.dino-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #506b52; font: 11px/1.5 'Noto Sans TC',sans-serif; }
#dino-pause { min-width: 48px; min-height: 44px; border: 0; background: transparent; font: inherit; color: #294a3a; cursor: pointer; }
#dino-pause:disabled { opacity: .4; cursor: default; }
.dino-best { padding-bottom: 9px; color: #62715a; font: 9px/1.5 'Noto Sans TC',sans-serif; }
.dino-play:focus-visible, #dino-pause:focus-visible { outline: 2px solid #a96f48; outline-offset: -2px; }
.sketch-control { position: absolute; inset: 29px 0 48px; display: block; width: 100%; border: 0; padding: 0; background: transparent; color: #506b52; cursor: grab; touch-action: pan-y pinch-zoom; }
.sketch-control:active { cursor: grabbing; }
.sketch-control:focus-visible, .sketch-pause:focus-visible { outline: 2px solid #9e613e; outline-offset: -2px; }
.sketch-art { display: block; width: 100%; height: 100%; overflow: visible; }
.sketch-lines path { fill: none; stroke: currentColor; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.sketch-nodes circle { fill: #506b52; }
.sketch-nodes .sketch-accent { fill: #b5744b; }
.sketch-pause { position: absolute; right: 0; bottom: 0; min-width: 60px; min-height: 44px; border: 0; background: transparent; color: #506b52; font: 11px 'Noto Sans TC',sans-serif; cursor: pointer; }
@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { padding-bottom: 0; background: #f5f1e8; }
  #home .app-hero { display: none; }
  .navbar, .navbar.solid { background: rgba(245,241,232,.96); padding: env(safe-area-inset-top) 0 0; box-shadow: none; border-bottom: 1px solid #d8d9cd; color: #253e37; }
  .nav-container { padding: 12px 22px; flex-wrap: nowrap; }
  .navbar .logo { color: #253e37; font-size: 24px; letter-spacing: -.06em; }
  .logo span { color: #557864; }
  .logo small { display: none; }
  .menu-toggle { width: 44px; height: 44px; border: 1px solid #a5b1a2; background: transparent; border-radius: 50%; padding: 12px; }
  .menu-toggle span { background: #253e37; }
  .navbar .nav-links { width: auto; max-height: calc(100svh - 95px); overflow-y: auto; background: #f5f1e8; border-color: #c9cec0; box-shadow: 0 20px 35px #233c3720; }
  .navbar .nav-link, .navbar .nav-link.active, .navbar .nav-link:hover { color: #253e37; }
  .navbar .nav-link.active { background: #e4e8db; }
  .studio-mobile { display: block; padding: calc(96px + env(safe-area-inset-top)) 24px 0; overflow: hidden; background: radial-gradient(ellipse at 95% 45%, #dbe1ce66, transparent 55%), #f5f1e8; color: #253e37; }
  .studio-edition { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 25px; font: 9px/1.5 monospace; letter-spacing: .07em; color: #607462; }
  .studio-mobile h1 { margin: 0; font-family: 'Noto Serif TC', 'Songti TC', 'Noto Serif CJK TC', serif; font-weight: 500; font-size: clamp(38px, 10.5vw, 65px); line-height: 1.4; letter-spacing: .045em; }
  .studio-mobile h1 em { color: #9e613e; font-style: normal; }
  .studio-description { margin: 17px 0 12px; color: #5b685b; font-size: 13px; line-height: 1.95; letter-spacing: .07em; }
  .studio-sculpture { position: relative; height: clamp(220px, 65vw, 340px); margin: 8px 0 0; overflow: hidden; border-top: 1px solid #bac5ae; border-bottom: 1px solid #bac5ae; background-image: linear-gradient(#81947b12 1px, transparent 1px), linear-gradient(90deg,#81947b12 1px, transparent 1px); background-size: 24px 24px; }
  .sculpture-label { position: absolute; top: 12px; left: 0; font: 9px monospace; letter-spacing: .05em; }
  .sculpture-coordinate { position: absolute; bottom: 12px; left: 0; font: 9px/1.8 'Noto Sans TC', sans-serif; letter-spacing: .1em; }
  .sculpture-plus { position: absolute; right: 0; bottom: 8px; font: 24px monospace; font-weight: 200; }
  .sculpture-orbits { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; transform: translate(-50%,-50%); perspective: 600px; }
  .sculpture-orbits i { position: absolute; inset: 0; border: 1px solid #506b52; border-radius: 50%; animation: editorial-orbit 16s linear infinite; }
  .sculpture-orbits i:nth-child(2) { animation-delay: -2.6s; }
  .sculpture-orbits i:nth-child(3) { animation-delay: -5.2s; }
  .sculpture-orbits i:nth-child(4) { animation-delay: -7.8s; }
  .sculpture-orbits i:nth-child(5) { animation-delay: -10.4s; }
  .sculpture-orbits i:nth-child(6) { animation-delay: -13s; }
  .sculpture-core { position: absolute; width: 66px; height: 66px; top: 50%; left: 50%; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #f6cf9c, #b5744b 50%, #674d38); box-shadow: 12px 16px 25px #263c3622; transform: translate(-50%,-50%); animation: editorial-float 6s ease-in-out infinite; }
  .studio-mobile-links { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 0 22px; }
  .studio-mobile-links a { text-decoration: none; font-size: 12px; color: #253e37; min-height: 44px; display: inline-flex; align-items: center; }
  .studio-mobile-links a:first-child { padding: 0 16px; gap: 25px; background: #253e37; color: #f5f1e8; border-radius: 2px; }
  .studio-ticker { margin: 0 -24px; padding: 11px 0; overflow: hidden; border-top: 1px solid #bac5ae; border-bottom: 1px solid #bac5ae; color: #63795d; font: 10px/1.5 monospace; letter-spacing: .2em; }
  .studio-ticker span { display: block; white-space: nowrap; width: max-content; animation: editorial-ticker 24s linear infinite; }
  .mobile-preorder-bar { display: none; }
  #about h2, #profile h2, #services h2, .product-intro h2 { font-family: 'Noto Serif TC','Songti TC',serif; font-size: clamp(27px,7.5vw,42px); line-height: 1.55; letter-spacing: .025em; font-weight: 500; text-align: left; margin: 12px 0 24px; }
  #about, #services, #products, #summary { background: #f5f1e8; }
  #about::before, #products::after { display: none; }
  #services .container, .container { padding: 56px 24px; }
  .about-layout { gap: 0; }
  .about-content > p { font-size: 14px; }
  .section-lead { font-size: 14px; }
  .section-heading-centered { margin-bottom: 24px; }
  .profile-grid { grid-template-columns: 1fr; max-width: none; }
  .profile-card { box-shadow: none; border-radius: 3px; }
  #products { padding: 56px 0; }
  #products .product-container { padding: 0 24px; }
  .product-grid { max-width: none; gap: 28px; }
  .product-card { display: block; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .product-image { aspect-ratio: 4 / 3; min-height: 0; border-radius: 3px; background: #e7e4d8; }
  .product-image img { object-fit: contain; }
  .product-image::after { display: none; }
  .product-number { font-size: 18px; color: #253e37; }
  .product-info { background: transparent; padding: 18px 0 0; }
  .product-info h3 { font-size: 22px; }
  .product-info > p:not(.product-type) { font-size: 14px; }
  .product-info a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
  .product-actions { flex-direction: row; gap: 24px; }
  .exhibition-note { border-radius: 3px; }
  #preorder { padding: 56px 0; background: #253e37; }
  .preorder-container { padding: 0 24px; }
  .preorder-intro h2, .footer-intro h2 { font-family: 'Noto Serif TC','Songti TC',serif; font-weight: 500; letter-spacing: .02em; font-size: 32px; line-height: 1.5; }
  .preorder-form { border-radius: 4px; box-shadow: none; background: #ffffff08; }
  .form-grid { grid-template-columns: 1fr; }
  .services-list { gap: 32px; }
  .service-card, .service-card:nth-child(even), .service-card:nth-child(odd) { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .service-image, .service-image img { border-radius: 3px; }
  .service-content { padding: 18px 0 0; }
  .service-content h3 { font-size: 19px; letter-spacing: 0; line-height: 1.6; }
  .summary-container { padding-top: 0; padding-bottom: 0; grid-template-columns: 1fr; }
  .summary-card { border-radius: 3px; box-shadow: none; }
  .footer-container { padding: 56px 24px 32px; }
  [data-reveal] { opacity: 1; transform: none; }
}
@keyframes editorial-orbit { from { transform: rotate(-28deg) rotateY(0deg); } to { transform: rotate(-28deg) rotateY(360deg); } }
@keyframes editorial-float { 50% { transform: translate(-50%,-65%); } }
@keyframes editorial-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .sculpture-orbits i, .sculpture-core, .studio-ticker span { animation: none; }
  .sculpture-orbits i:nth-child(2) { transform: rotateY(40deg); }
  .sculpture-orbits i:nth-child(3) { transform: rotateY(70deg); }
}