/* The same line connects landscape, systems, and sound. */
:root { --strings-ready: 1; --string-boundary-ink: #8c9a7b; }
.hero-signature { width: min(100%, 26.25rem); margin-top: 1.35rem; }
.signature-touch { display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%; min-height: 66px; padding: 0; border: 0; color: #e0e7cb; background: transparent; text-align: left; font: .75rem/1.4 var(--sans); }
.signature-touch svg { display: block; grid-column: 1 / -1; width: 100%; height: 40px; overflow: visible; }
.signature-line { fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.signature-hint { color: #d1dbc0; font-size: .75rem; }
.signature-touch:hover, .signature-touch:focus-visible { color: #f5f3e9; }
.signature-touch:focus-visible { outline: 2px solid var(--paper); outline-offset: 6px; }
.signature-touch:disabled { cursor: default; }
.signature-touch:disabled .signature-hint { visibility: hidden; }
.string-positioned { position: relative; }
/* Idle borders remain authored CSS. Only active strings enter this viewport
   layer, above section clipping and always transparent to pointer events. */
.string-overlay { position: fixed; inset: 0; z-index: 30; display: block; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.separator-string { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; visibility: hidden; pointer-events: none; }
.separator-string[data-active="true"] { visibility: visible; }
[data-plucking-top] { border-top-color: transparent !important; }
[data-plucking-bottom] { border-bottom-color: transparent !important; }
/* These controls exist for keyboard exploration, not as invisible mouse hit
   areas. Pointer/touch activity is observed passively over the real page. */
.separator-control { position: absolute; left: 0; right: 0; z-index: 2; display: block; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: 0; pointer-events: none; }
.separator-control[data-string-edge="top"] { top: -22px; }
.separator-control[data-string-edge="bottom"] { bottom: -22px; }
.separator-control:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
.scenic-copy { transform: translate3d(0,var(--scenic-depth,0px),0); }
.companion-image picture { transform: translate3d(0,var(--portrait-depth,0px),0) scale(var(--portrait-scale,1)); }
@media (max-width: 760px) {
  .hero-signature { margin-top: .65rem; max-width: 23rem; }
  .signature-touch { min-height: 58px; }
  .signature-touch svg { height: 32px; }
}
@media (max-height: 700px) and (min-width: 761px) {
  .hero-signature { margin-top: .65rem; }
  .signature-touch { min-height: 54px; }
  .signature-touch svg { height: 30px; }
}
html.motion-paused .scenic-copy, html.motion-paused .companion-image picture { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .scenic-copy, html:not([data-motion="on"]) .companion-image picture { transform: none; }
}