/* The real controller photograph and a quiet, responsive operating story. */
.controller-story{overflow:hidden}
@font-face{font-family:JPHEATGuide;src:url(controller-guide/guide-jp.woff) format('woff');font-weight:100 900;font-display:swap}
.controller-video-stage{aspect-ratio:1!important;background:#edf0e9}
.controller-operation-video{display:block;width:100%;height:100%;object-fit:contain}
.controller-story .controller-zoom{right:2%;bottom:2%;width:32px;height:32px;font-size:16px;background:#edf0e9e6}
.controller-story.is-video-error .controller-operation-video{opacity:.65}
.controller-panels,.controller-key,.controller-readout p,.controller-readout small{font-family:JPHEATGuide,var(--sans)}
.controller-story-grid{display:grid;grid-template-columns:1.08fr .92fr;grid-template-areas:'visual intro' 'visual guide';column-gap:8%;align-items:start}
.controller-intro{grid-area:intro;padding-top:12px}
.controller-intro h2{margin:17px 0 14px;font-size:clamp(29px,2.7vw,39px);line-height:1.7}
.controller-intro.single-copy>p:not(.pdp-eyebrow){margin-top:14px;line-height:2.2}
.controller-visual{grid-area:visual;min-width:0;align-self:center;margin:0}
.controller-photo-stage{position:relative;aspect-ratio:1.04;width:100%;overflow:hidden}
.controller-cinema{position:absolute;inset:0;transform-origin:60% 40%;will-change:transform}
.controller-device-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.controller-story.is-ready .controller-device-layer{opacity:1}
.controller-press-shade{fill:#242b20;opacity:0}
.controller-film-caption{position:absolute;left:6%;right:15%;bottom:6%;display:flex;flex-direction:column;gap:8px;pointer-events:none;color:#37483c;text-shadow:0 1px 12px #fff,0 0 7px #fff}
.controller-film-caption>span{font-size:clamp(11px,1vw,15px);letter-spacing:.06em;line-height:1.8}
.controller-film-caption>small{font-size:8px;letter-spacing:.12em;color:#69796b}
.controller-original-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:55% 50%}
.controller-photo-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.controller-leader{fill:none;stroke:#6e7e6d;stroke-width:1.5;opacity:.65}
.controller-photo-callout{position:absolute;left:17.34%;top:18.5%;display:flex;flex-direction:column;gap:3px;pointer-events:none;color:#405040}
.controller-photo-callout>span{font-size:14px;letter-spacing:.09em}
.controller-photo-callout>small{font-size:10px;letter-spacing:.04em;color:#73816d}
.controller-key-ring{fill:none;opacity:0;transition:opacity .2s}
.controller-key-ring.is-active{opacity:1}
.controller-ring-track{stroke:#fff;stroke-width:2;opacity:.65}
.controller-ring-progress{stroke:#b98953;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.controller-ring-pulse{stroke:#fff;stroke-width:2}
.controller-key-options{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:15px 0 8px}
.controller-key{position:relative;min-height:52px;border:0;border-bottom:1px solid #ced7cb;background:transparent;color:#768371;cursor:pointer;padding:5px 2px 9px;text-align:center}
.controller-key>span{font-size:12px;letter-spacing:.08em}.controller-key>small{display:block;font-size:8px;line-height:1.8;margin-top:3px;letter-spacing:.015em}
.controller-key[aria-pressed=true]{color:#987141;border-color:#ac8659}
.controller-key:focus-visible{outline:2px solid #916837;outline-offset:4px}
.controller-zoom{border-color:#9da79d78;cursor:zoom-in;padding:0}
.controller-visual-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:7px 0 0;border-top:1px solid var(--single-line);margin-top:4px!important}
.controller-visual-footer>span{display:flex;align-items:center;gap:8px;font-size:10px;color:#73806f;letter-spacing:.04em}
.controller-visual-footer i{width:4px;height:4px;border-radius:50%;background:#b48a5f}
[data-controller-motion=paused] .controller-visual-footer i{background:#a2aca1}
.controller-play{width:44px;height:44px;border:0;background:transparent;color:#6b7a6e;cursor:pointer;display:grid;place-items:center}
.controller-play svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.controller-play-icon{display:none}
[data-controller-motion=paused] .controller-play-icon{display:block}
[data-controller-motion=paused] .controller-pause-icon{display:none}
.controller-guide{grid-area:guide;min-width:0;padding-top:20px}
.controller-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;border-bottom:1px solid #cbd5c9}
.controller-steps>button{position:relative;min-height:48px;padding:10px 0 14px;border:0;background:none;color:#7f897e;font:400 11px/1.8 var(--sans);text-align:left;letter-spacing:.04em;cursor:pointer}
.controller-steps>button>span{font:400 9px var(--pdp-type);margin-right:9px;color:#94a08f}
.controller-steps>button[aria-pressed=true]{color:#705433}
.controller-steps>button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#af8350;transform:scaleX(var(--controller-progress,0));transform-origin:left}
.controller-steps>button:focus-visible,.controller-play:focus-visible{outline:2px solid #a57b4c;outline-offset:3px}
.controller-panels{padding-top:23px;min-height:162px}
.controller-panels [hidden]{display:none!important}
.controller-step-eyebrow{font:400 8px/1.6 var(--pdp-type);letter-spacing:.21em;color:#a18a6b;margin:0 0 8px}
.single-product .controller-panels h3{font-size:20px;line-height:1.65;letter-spacing:.04em}
.controller-panels article>p:last-child{font-size:11px;line-height:2.2;color:#74816f;margin:11px 0 0}
.controller-readout{display:flex;align-items:center;gap:24px;min-height:89px;padding:9px 0 22px;border-bottom:1px solid #cbd5c9}
.controller-readout>div{min-width:128px;display:flex;align-items:baseline;gap:7px}
.controller-readout [data-controller-value]{font:300 57px/1.1 var(--pdp-type);font-variant-numeric:tabular-nums;letter-spacing:-.045em;color:#34453b}
.controller-readout small{font-size:12px;color:#6d7a69}
.controller-readout p{font-size:10px;line-height:1.9;letter-spacing:.025em;color:#907657;margin:0}
.controller-example-label{display:block;font-size:8px;letter-spacing:.16em;color:#87917e;margin-bottom:5px}
.controller-specs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:22px 0 0!important}
.controller-specs dt{font-size:9px;letter-spacing:.06em;color:#85917f}
.controller-specs dd{font:400 24px/1.8 var(--pdp-type);letter-spacing:-.02em;margin:3px 0 0}
.controller-specs dd small{font:400 10px var(--sans);margin-left:4px}
.controller-specs dd>span{display:block;font:400 9px/1.9 var(--sans);letter-spacing:.02em;color:#899681}
.single-product .controller-note{font-size:9px;line-height:1.9;margin:20px 0 0}
@media(min-width:1800px){.controller-story-grid{column-gap:9%}}
@media(max-width:1000px) and (min-width:761px){.controller-story-grid{column-gap:5%}.controller-readout{gap:10px}.controller-readout>div{min-width:100px}.controller-panels{min-height:183px}.controller-readout [data-controller-value]{font-size:48px}.controller-steps>button>span{margin-right:4px}}
@media(max-width:760px){
 .single-control.controller-story{padding:54px 0 48px}
 .controller-story-grid{grid-template-columns:1fr;grid-template-areas:'intro' 'visual' 'guide';gap:0}
 .controller-intro{padding:0}.controller-intro h2{font-size:29px;line-height:1.7;margin:14px 0 10px}.controller-intro.single-copy>p:not(.pdp-eyebrow){font-size:12px;line-height:2;margin-top:10px}
 .controller-photo-stage{width:100%;margin:22px 0 0}.controller-photo-callout{top:17.5%}.controller-photo-callout>span{font-size:11px}.controller-photo-callout>small{font-size:8px}
 .controller-key-options{gap:9px;padding-top:10px}.controller-key>small{font-size:8px}.controller-key{min-height:52px}
 .controller-visual-footer{padding-top:0}.controller-visual-footer>span{font-size:9px}
 .controller-guide{padding-top:14px}.controller-steps{gap:16px}.controller-steps>button{font-size:12px;min-height:48px}.controller-steps>button>span{font-size:9px;margin-right:8px}
 .controller-panels{padding-top:22px;min-height:157px}.single-product .controller-panels h3{font-size:21px}.controller-panels article>p:last-child{font-size:12px;line-height:2;max-width:100%}
 .controller-panels br{display:none}.controller-readout{padding-bottom:19px;gap:22px;min-height:84px}.controller-readout [data-controller-value]{font-size:53px}.controller-readout p{font-size:11px}
 .controller-specs{margin-top:20px!important}.controller-specs dt{font-size:10px}.controller-specs dd{font-size:27px}.single-product .controller-note{font-size:9px;line-height:2;margin-top:18px}
}
@media(prefers-reduced-motion:reduce){.controller-key-ring{transition:none}.controller-cinema{will-change:auto}}
.controller-specs>div{padding:13px 0 0;border-top:1px solid #cdd5cb;transition:border-color .2s}
.controller-specs dd{font-size:32px;line-height:1.6;transition:color .2s}
.controller-specs dd small{font-size:13px}
[data-controller-chapter="1"] .controller-specs>div:first-child,[data-controller-chapter="2"] .controller-specs>div:last-child{border-color:#b28a5e}
[data-controller-chapter="1"] .controller-specs>div:first-child dd,[data-controller-chapter="2"] .controller-specs>div:last-child dd{color:#8e633b}
@media(max-width:760px){.controller-specs{gap:18px}.controller-specs dd{font-size:32px}.controller-specs dt{font-size:10px}}
@media(prefers-reduced-motion:reduce){.controller-specs>div,.controller-specs dd{transition:none}}