/* The artwork ends at 75.7% of the stage. Guide begins below it at 78%. */
#experience { container-type:inline-size; }
#gesture-guide {
  position:absolute; left:23%; right:23%; top:78%; height:15.5%;
  display:flex; align-items:center; gap:1.25cqw; padding:.5cqw 1.35cqw .5cqw .6cqw;
  background:linear-gradient(105deg,#17110bb8,#100d09b0 75%,#100d0950);
  border-top:1px solid #ae906038; border-bottom:1px solid #ae906016;
  color:#d8c7a8; pointer-events:none; transition:border-color .5s,box-shadow .5s;
}
.guide-demo { width:8.8cqw; height:100%; flex-shrink:0; overflow:visible; opacity:.85; transition:opacity .6s ease; }
.silk { fill:none; stroke:#c6af81; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.silk.ghost { stroke:#d8d0ba; opacity:.3; stroke-width:.7; }
.ground { opacity:.25; }
.guide-person { animation:guide-breathe 2.8s ease-in-out infinite; transform-origin:80px 100px; }
.guide-arm .arm-line { animation:guide-rest 2.8s ease-in-out infinite; }
.guide-waves { opacity:0; stroke-width:.7; }
.guide-ascent { display:none; }
.guide-mouse { display:none; stroke-width:1; }
#gesture-guide[data-input="mouse"]:is([data-mode="open"],[data-mode="close"],[data-mode="lift"]) .guide-mouse { display:block; }
.mouse-trail { opacity:.45; }
.mouse-cursor { animation:mouse-right 2.8s ease-in-out infinite; }
#gesture-guide[data-mode="close"] .guide-mouse { transform:translate(160px,0) scaleX(-1); }
#gesture-guide[data-mode="lift"] .guide-mouse { transform:translate(-30px,155px) rotate(-90deg); }
@keyframes mouse-right { 0%,12%,100% { transform:translate(25px,103px); opacity:.4; } 65%,82% { transform:translate(116px,103px); opacity:.9; } }
.guide-copy { min-width:0; flex:1; }
.guide-heading { min-height:1.1em; display:flex; gap:1.3em; color:#a99064; font-size:.72cqw; letter-spacing:.15em; white-space:nowrap; }
[data-guide-confirmation] { color:#e3d2aa; letter-spacing:.07em; }
#gesture-guide h2 { font-family:"SimSun",serif; font-size:1.2cqw; line-height:1.5; letter-spacing:.08em; font-weight:400; margin:.45cqw 0 .25cqw; }
#gesture-guide p { margin:0; font-size:.78cqw; line-height:1.6; letter-spacing:.035em; color:#a5947b; }
.guide-progress { display:flex; align-items:center; gap:.75cqw; margin-top:.55cqw; font-size:.68cqw; letter-spacing:.06em; color:#9c896b; }
.guide-track { flex:1; height:2px; background:#b4966124; }
[data-guide-fill] { display:block; height:100%; background:#baa071; width:0; } /* No tween: held/missing input freezes exactly. */
[data-guide-value] { min-width:2.5em; text-align:right; font-variant-numeric:tabular-nums; }
.guide-ring { display:none; width:3.3cqw; height:3.3cqw; flex-shrink:0; fill:none; stroke:#c7aa6d; stroke-width:1; }
.ring-base { opacity:.18; }
[data-guide-ring] { transform:rotate(-90deg); transform-origin:center; stroke-dasharray:100; stroke-dashoffset:100; stroke-width:1.7; }
.ring-seal { opacity:0; }
#gesture-guide[data-ring="true"] .guide-ring { display:block; }
#gesture-guide[data-engaged="true"] .guide-demo { opacity:.32; }
#gesture-guide[data-issue="true"] p { color:#d0b48a; }
#gesture-guide[data-confirmed="true"] { border-top-color:#ceb37885; box-shadow:0 -6px 22px -15px #d2b07888; }
#gesture-guide[data-confirmed="true"] .ring-seal { opacity:.7; }
#gesture-guide[data-mode="open"] .arm-line { animation-name:guide-open; }
#gesture-guide[data-mode="close"] .arm-line { animation-name:guide-close; }
#gesture-guide[data-mode="lift"] .arm-line { animation-name:guide-lift; }
#gesture-guide[data-mode="replay"] .arm-line { animation-name:guide-close; }
#gesture-guide:is([data-mode="open"],[data-mode="close"]) .guide-waves { animation:guide-thread 2.8s ease-in-out infinite; }
#gesture-guide[data-mode="close"] .guide-waves { animation-direction:reverse; }
#gesture-guide[data-mode="ascend"] .guide-person { display:none; }
#gesture-guide[data-mode="ascend"] .guide-ascent { display:block; animation:guide-rise 2.8s ease-in-out infinite; }
#gesture-guide[data-paused="true"] *, #gesture-guide[data-paused="true"] { animation-play-state:paused!important; transition:none!important; }
@keyframes guide-rest {
  0%,100% { d:path("M64 46 Q53 52 53 68 Q52 82 51 93"); }
  50% { d:path("M64 46 Q52 52 52 68 Q51 82 50 93"); }
}
@keyframes guide-open {
  0%,12%,100% { d:path("M64 46 Q44 55 48 67 Q53 69 67 62"); }
  65%,82% { d:path("M64 46 Q43 47 28 47 Q18 46 9 44"); }
}
@keyframes guide-close {
  0%,12%,100% { d:path("M64 46 Q43 47 28 47 Q18 46 9 44"); }
  65%,82% { d:path("M64 46 Q44 55 48 67 Q53 69 67 62"); }
}
@keyframes guide-lift {
  0%,12%,100% { d:path("M64 46 Q53 52 53 68 Q52 82 51 93"); }
  65%,82% { d:path("M64 46 Q45 35 44 21 Q41 11 37 7"); }
}
@keyframes guide-breathe { 0%,100% { opacity:.66; transform:translateY(0); } 50% { opacity:1; transform:translateY(-1px); } }
@keyframes guide-thread { 0%,15%,100% { opacity:0; transform:scaleX(.5); transform-origin:center; } 60%,80% { opacity:.5; transform:scaleX(1); transform-origin:center; } }
@keyframes guide-rise { 0% { opacity:0; transform:translateY(15px); } 35% { opacity:.8; } 100% { opacity:0; transform:translateY(-20px); } }
/* On compact screens, place guidance below the canvas, never over the figures/HUD. */
@media (max-width:900px) {
  #experience:has(#debug-panel:not([hidden])) { margin-bottom:410px; }
  #debug-panel { top:calc(100% + 160px); }
  #experience { overflow:visible; margin-bottom:156px; }
  #gesture-guide { top:calc(100% + 12px); left:4%; right:4%; height:132px; gap:12px; padding:12px; }
  .guide-demo { width:90px; }
  .guide-heading { font-size:10px; white-space:normal; gap:10px; }
  #gesture-guide h2 { font-size:15px; margin:6px 0 4px; letter-spacing:.03em; }
  #gesture-guide p { font-size:11px; }
  .guide-progress { font-size:10px; margin-top:7px; gap:9px; }
  .guide-ring { width:34px; height:34px; }
  #hud { min-width:0; width:20%; font-size:9px; }
  #preview-note { font-size:8px; text-align:center; }
  #device-message { display:none; }
  #debug-banner { left:32%; }
  #asset-warning { bottom:22%; max-width:26%; font-size:9px; }
}
@media (max-width:550px) {
  #experience { margin-bottom:172px; }
  #gesture-guide { height:148px; }
  .guide-demo { width:62px; }
  #gesture-guide h2 { font-size:14px; }
  .guide-ring { width:28px; height:28px; }
  #hud { top:3%; right:2%; padding-top:3px; font-size:7px; width:21%; }
  .hud-top { gap:3px; font-size:7px; margin-bottom:3px; }
  .local-label { display:none; }
  #preview-note { font-size:7px; }
  .hud-row { margin-top:3px; gap:2px; }
  .progress-track { margin:4px 0; }
  .hud-actions { margin-top:3px; }
  .hud-actions button { font-size:8px; padding:3px; }
  .identity h1 { font-size:12px; letter-spacing:.08em; }
  .chapter { font-size:8px; }
  .chapter span { display:none; }
  footer { font-size:8px; }
  .footer-actions { gap:9px; }
  .footer-actions button { font-size:8px; }
  #debug-banner { left:34%; font-size:6px; }
  #debug-panel { top:calc(100% + 176px); bottom:auto; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  /* Retain the essential gesture demonstration; remove ambient breathing and trails. */
  .guide-person,.guide-waves { animation:none!important; }
  .guide-person { opacity:.85; }
  .guide-demo { transition:none; }
}