/* The field belongs to the whole hero; content and controls sit above it. */
.hero{min-height:800px;padding-bottom:210px;background:radial-gradient(ellipse at 75% 35%,#27203f60,transparent 65%),#0b0912}
.hero-art.motion-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:none;opacity:1;z-index:0;isolation:isolate}
.motion-field canvas{width:100%;height:100%;display:block;position:absolute;inset:0;pointer-events:none;mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 85%,transparent 100%)}
.hero-art.motion-field::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:0;background:linear-gradient(90deg,#0b0912b8 0%,#0b091287 30%,#0b091242 49%,transparent 72%)}
.hero-copy{z-index:2;pointer-events:none}.hero-copy a,.hero-copy button,.hero-copy h1,.hero-copy .intro{pointer-events:auto}
.hero-copy h1{text-shadow:0 2px 30px #0b091240}.hero-copy .intro{color:#b6b4c5;text-shadow:0 1px 15px #0b0912}
.hero-bottom{z-index:3}
.field-tools{position:absolute;right:5.5%;bottom:105px;z-index:3;display:flex;flex-direction:column;gap:12px;pointer-events:auto;max-width:310px}
.field-label{position:static;font-size:8px;letter-spacing:1.8px;color:#b3a8c6}.field-label .live-dot{width:4px;height:4px;margin-right:6px}
.field-controls-line{display:flex;align-items:center;gap:10px}
.field-controls{position:static;transform:none;display:flex;gap:3px;padding:5px;border-radius:30px;border:1px solid #ffffff26;background:#171321a6;backdrop-filter:blur(20px)}
.field-controls button{min-width:74px;min-height:42px;border-radius:24px;background:transparent;color:#bdb3d0;font-size:12px;transition:background .3s,color .3s}
.field-controls button[aria-pressed=true]{background:linear-gradient(120deg,#7253aa99,#485d8d88);color:#fff;box-shadow:inset 0 1px 0 #ffffff22}
.field-pause{position:static;flex:0 0 44px;width:44px;height:44px;background:#201b2d88;border:1px solid #ffffff25;border-radius:50%;font-size:14px;color:#d5c4ed;backdrop-filter:blur(12px)}
.field-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.field-hint{position:static;text-align:left;font-size:9px;color:#a89db9;letter-spacing:.2px}
.motion-field .intro-replay{position:static;min-height:32px;padding:4px 0;background:none;color:#bfb0d5;font-size:9px;white-space:nowrap}
.intro-replay:hover{color:white}.intro-replay:disabled{opacity:.45;cursor:default}
@media(min-width:1600px){.field-tools{right:max(5.5%,calc((100vw - 1600px)/2 + 88px))}}
@media(max-width:1100px) and (min-width:701px){.hero{min-height:830px}.hero-copy{max-width:620px}.hero-art.motion-field::before{background:linear-gradient(90deg,#0b0912ce,#0b091298 35%,#0b091230 70%,transparent)}.field-tools{bottom:90px}}
@media(max-width:700px){
 .hero{height:auto;max-height:none;min-height:800px;padding:40px 6% 290px}
 .hero-art.motion-field{inset:0;width:100%;height:100%;opacity:1}
 .hero-art.motion-field::before{background:linear-gradient(180deg,#0b0912b8,#0b091285 28%,#0b091235 57%,transparent 80%),linear-gradient(90deg,#0b09123b,transparent 75%)}
 .motion-field canvas{mask-image:linear-gradient(180deg,#0009,#000 20%,#000 85%,transparent)}
 .field-tools{left:6%;right:auto;bottom:100px;gap:10px;max-width:calc(100% - 12%)}
 .field-controls button{min-width:72px;min-height:44px;font-size:11px}
 .field-label{font-size:7px;letter-spacing:1.5px}.field-hint{font-size:8px}
 .motion-field .intro-replay{font-size:9px;min-height:36px}
 .hero-bottom{bottom:24px}.hero-copy .intro{color:#b6b4c5}
}
@media(max-width:360px){.field-controls button{min-width:63px}.field-controls-line{gap:8px}.hero h1{font-size:54px;letter-spacing:-3px}}
@media(prefers-reduced-motion:reduce){.field-controls button{transition:none}.motion-field .intro-replay{display:none}}