/* Character inspection, with native controls for touch and keyboard. */
.hero-scene-tools { position: absolute; z-index: 4; right: max(40px,calc((100% - 1120px)/2)); bottom: 65px; display: flex; align-items: center; gap: 18px; }
.hero-cursor-hint { color: #b6aaa1; font: 10px var(--mono); }
.hero-cursor-hint::before { content: '+'; color: #d87578; margin-right: 8px; }
.scene-pause { min-height: 36px; border: 1px solid #554440; border-radius: 3px; background: #100e0dbf; padding: 8px 12px; font-size: 10px; color: #c6bcb0; }
.scene-pause:hover { border-color: #cf6570; color: #fff3df; }
.character-study { padding-block: 34px 86px; }
.study-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 64px; align-items: center; }
.study-copy .eyebrow { color: #d88481; }
.study-copy h2 { font-size: clamp(34px,3.7vw,48px); font-weight: 650; }
.study-copy>p:not(.eyebrow) { color: #bcb7ae; font-size: 15px; line-height: 1.8; max-width: 350px; margin-top: 24px; }
.study-copy .text-link { margin-top: 26px; }
.study-console { min-width: 0; border: 1px solid #66514b; border-radius: 8px 4px 7px 4px; background: #100f0e; overflow: hidden; box-shadow: 0 18px 50px #0003; }
.study-topline { display: flex; justify-content: space-between; gap: 16px; padding: 17px 20px; border-bottom: 1px solid #423734; font: 10px var(--mono); text-transform: uppercase; letter-spacing: 1.1px; color: #b4a99b; }
.study-topline>span:last-child { color: #d1837f; }
.study-stage { position: relative; width: 100%; aspect-ratio: 1.5; overflow: hidden; background: radial-gradient(ellipse at 50% 46%,#52232944,transparent 68%),#080807; --reveal: 52%; }
.study-stage::before { content: ''; position: absolute; inset: 16px; border: 1px solid #6e514329; border-radius: 50%; background-image: linear-gradient(#ad8b7010 1px,transparent 1px),linear-gradient(90deg,#ad8b7010 1px,transparent 1px); background-size: 40px 40px; pointer-events: none; }
.study-stage>img { display: block; position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; object-position: center 42%; mix-blend-mode: screen; pointer-events: none; user-select: none; }
.study-stage>img:not(.study-form) { clip-path: inset(0 0 0 var(--reveal)); }
.study-stage>.study-form { clip-path: inset(0 calc(100% - var(--reveal)) 0 0); }
.study-axis { position: absolute; top: 20px; bottom: 20px; left: clamp(18px,var(--reveal),calc(100% - 18px)); width: 1px; background: linear-gradient(transparent,#da7776 20%,#da7776 80%,transparent); pointer-events: none; }
.study-axis>span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #c47873; background: #1b1213e6; border-radius: 50%; color: #f2d7c7; font: 16px var(--mono); }
.study-stage-label { position: absolute; bottom: 18px; padding: 6px 8px; background: #0b0a09ba; font: 9px var(--mono); letter-spacing: 1.4px; text-transform: uppercase; color: #d2bfae; pointer-events: none; }
.study-stage-label:first-of-type { left: 16px; }
.study-stage-label:last-of-type { right: 16px; }
.study-stage.all-wire .study-stage-label:first-of-type,
.study-stage.all-form .study-stage-label:last-of-type { visibility: hidden; }
.study-controls { padding: 20px; border-top: 1px solid #423734; background-image: var(--brand-grain); }
.study-control-label { display: flex; justify-content: space-between; gap: 12px; font: 11px var(--mono); color: #c6b9ac; }
.study-control-label output { color: #d88a81; }
.study-controls input { display: block; appearance: none; width: 100%; min-height: 32px; margin: 9px 0; background: transparent; accent-color: #cc4954; cursor: ew-resize; }
.study-controls input::-webkit-slider-runnable-track { height: 3px; background: #65504a; border-radius: 2px; }
.study-controls input::-moz-range-track { height: 3px; background: #65504a; border-radius: 2px; }
.study-controls input::-webkit-slider-thumb { appearance: none; width: 17px; height: 17px; margin-top: -7px; background: #c4404d; border: 2px solid #f0b09c; border-radius: 50%; box-shadow: 0 0 0 5px #c4404d15; }
.study-controls input::-moz-range-thumb { width: 13px; height: 13px; background: #c4404d; border: 2px solid #f0b09c; border-radius: 50%; box-shadow: 0 0 0 5px #c4404d15; }
.study-controls input:focus-visible { outline: 2px solid #e36c75; outline-offset: 4px; border-radius: 4px; }
.study-presets { display: flex; gap: 8px; }
.study-presets button { flex: 1; min-height: 38px; padding: 7px 12px; border: 1px solid #514440; border-radius: 3px; background: #171311; color: #c5b7a8; font: 11px var(--mono); }
.study-presets button:hover,.study-presets button[aria-pressed=true] { border-color: #ad5e5b; background: #331c20; color: #f5e8d7; }
.study-note { margin: 14px 0 0; font: 11px/1.7 var(--sans); color: #a89b8d; }
.study-controls, #study-help { display: none; }
.study-ready #study-help { display: block; }
.study-ready .study-controls { display: block; }
.study-ready .study-stage { cursor: ew-resize; touch-action: pan-y; }
.study-stage.is-dragging .study-axis>span { background: #92323d; border-color: #e49c8b; }
.study-note a { color: #d9b7a7; text-decoration: underline; text-underline-offset: 3px; }
.reactive-surface { position: relative; }
@supports (mask-composite: exclude) {
  .reactive-surface::after { content: ''; position: absolute; z-index: 3; inset: 0; padding: 1px; border-radius: inherit; background: radial-gradient(220px circle at var(--light-x,50%) var(--light-y,50%),#ee8b7d,transparent 75%); mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity .25s; pointer-events: none; }
  .reactive-surface.is-near::after { opacity: .8; }
}
@media(max-width:1000px) { .study-layout { gap: 32px; grid-template-columns: .8fr 1.2fr; } .hero-cursor-hint { display: none; } }
@media(max-width:800px) { .study-layout { grid-template-columns: 1fr; gap: 28px; } .study-copy>p:not(.eyebrow) { max-width: 560px; } .study-console { max-width: 650px; } }
@media(max-width:700px) {
  .hero-scene-tools { right: 20px; bottom: 62px; }
  .scene-pause { font-size: 9px; min-height: 32px; }
  .character-study { padding-block: 10px 58px; }
  .study-copy h2 { font-size: 36px; }
  .study-copy>p:not(.eyebrow) { font-size: 14px; }
  .study-topline { padding: 14px 16px; font-size: 9px; letter-spacing: .4px; }
  .study-controls { padding: 16px; }
  .study-stage { aspect-ratio: 1; }
  .study-presets button { padding-inline: 7px; }
}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce) { .hero-cursor-hint { display: none; } .reactive-surface::after { display: none; } }