:root{--scroll-guide-font:500 10px/1 "IBM Plex Mono",ui-monospace,monospace;--scroll-guide-tracking:.24em;--scroll-guide-gap:6px}
.scroll-guide__label{font:var(--scroll-guide-font)!important;letter-spacing:var(--scroll-guide-tracking)!important;text-indent:var(--scroll-guide-tracking);text-transform:uppercase;text-decoration:none}
.scroll-guide__arrow{position:relative!important;display:block!important;flex:0 0 auto;width:1px!important;height:22px!important;margin:0!important;border:0!important;border-radius:0!important;background:linear-gradient(180deg,transparent,currentColor)!important;box-shadow:none!important;font-size:0!important;line-height:0!important;animation:scroll-cue-drop 1.9s cubic-bezier(.6,0,.35,1) infinite!important}
.scroll-guide__arrow::after{content:"";position:absolute;left:50%;bottom:0;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translate(-50%,1px) rotate(45deg)}
.scroll-cue{position:fixed;z-index:60;left:50%;bottom:max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:var(--scroll-guide-gap);padding:6px 10px;color:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;transform:translate(-50%,10px);transition:opacity .45s ease,transform .45s ease}
.scroll-cue.is-on{opacity:.85;transform:translate(-50%,0)}
@keyframes scroll-cue-drop{0%{transform:translateY(-5px);opacity:.15}35%{opacity:1}100%{transform:translateY(6px);opacity:0}}
@media(max-width:760px){.scroll-cue{bottom:max(10px,env(safe-area-inset-bottom))}.scroll-guide__arrow{height:18px!important}}
/* The compact portfolio uses the bottom area for its workmark and character. */
@media(max-width:760px){.scroll-cue.is-only-tva{top:max(92px,env(safe-area-inset-top));bottom:auto}.scroll-cue.is-portfolio{display:none}.scroll-cue.is-contact{top:auto;bottom:max(10px,env(safe-area-inset-bottom))}}
.scroll-cue.is-portfolio-landscape{bottom:max(10px,calc(env(safe-area-inset-bottom) + 8px));flex-direction:row;gap:6px;padding:3px 8px}
.scroll-cue.is-portfolio-landscape .scroll-cue__arrow{height:12px}
/* 2026-10-08 monitor A portfolio: on every width its bottom is the monitor stand and the character's floor, as the compact phone portfolio above. */
.scroll-cue.is-portfolio{display:none}

.hero[data-hero-visual="keyvisual-v1"] .hero-original__scroll{left:50%;right:auto;bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--scroll-guide-gap);padding:6px 10px;color:#f0e8d4;transform:translateX(-50%);text-shadow:0 1px 6px #000;text-decoration:none}
.hero[data-hero-visual="keyvisual-v1"] .hero-original__scroll b{opacity:.9}
.studio-scroll-label,.original-table__scroll-cue,.ending-scroll{flex-direction:column;align-items:center;justify-content:center;gap:var(--scroll-guide-gap);text-decoration:none!important}
.studio-scroll-label{display:flex}
.ending-scroll .scroll-guide__label{font:var(--scroll-guide-font)!important}

@media(max-width:760px){
  .studio-controls{right:112px;gap:5px}
  .studio-controls button{min-width:38px}
  .studio-stop-label{width:48px}
  .studio-scroll-label{display:flex;flex:0 0 50px;gap:var(--scroll-guide-gap)}
  .original-table__scroll-cue{gap:4px}
}

@media(prefers-reduced-motion:reduce){.scroll-guide__arrow{animation:none!important}.scroll-cue{transition:opacity .2s linear}}
.reduced-motion .scroll-guide__arrow{animation:none!important}