/* One-touch white-light illustration. Isolated from the cycling demo. */
.touch-hero-copy{display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-width:0;align-self:stretch}
.touch-hero-photo{position:relative;margin:0;overflow:hidden;background:#fff;border:1px solid #d9d5c9;border-radius:22px}
.touch-hero-photo a{display:block;padding:14px 18px 0}.touch-hero-photo img{display:block;width:100%;height:clamp(240px,20vw,290px);object-fit:contain;background:#fff}
.touch-hero-photo figcaption{display:flex;justify-content:space-between;gap:12px;padding:12px 20px 16px;color:#6a5221;font-size:9px;font-weight:650;letter-spacing:.1em;line-height:1.5}.touch-hero-photo figcaption span{color:#777c74;font-weight:500}.touch-hero-photo a:focus-visible{outline:3px solid #b78b3c;outline-offset:-4px}
.touch-hero-text{min-width:0}
.touch-demo{--touch-color:#ffd399;--touch-brightness:.75;--touch-level:75%;width:100%;min-width:0;padding:28px;border:1px solid #43443e;border-radius:24px;color:#f5f4ee;background:linear-gradient(145deg,#242722,#181d21 58%,#161a1d);box-shadow:0 28px 70px #0005}
.touch-demo-topline{display:flex;justify-content:space-between;gap:12px;margin-bottom:22px;font-size:9px;font-weight:650;letter-spacing:.12em;line-height:1.5;color:#e0c48d}
.touch-demo-topline span:last-child{color:#b3bab6}
.touch-demo h2{font-size:clamp(1.45rem,2vw,1.85rem);font-weight:500;letter-spacing:-.04em;line-height:1.2;margin:0 0 10px}
.touch-demo-intro{font-size:.82rem;line-height:1.65;color:#acb6b2;margin:0}
.touch-demo-stage{position:relative;display:grid;place-items:center;min-height:300px;padding:42px 12px 35px;margin:24px -8px 0;overflow:hidden;border:1px solid #ffffff0d;border-radius:14px;background:radial-gradient(ellipse at center,#263039 0,#0c1217 75%)}
.touch-demo-stage-label,.touch-demo-stage-caption{position:absolute;left:15px;right:15px;color:#8e9b9b;font-size:8px;letter-spacing:.12em;line-height:1.5}
.touch-demo-stage-label{top:14px}.touch-demo-stage-caption{bottom:14px;text-align:center;letter-spacing:.04em}
.touch-lamp{position:relative;width:min(280px,100%);aspect-ratio:1;isolation:isolate}
.touch-lamp-body{position:absolute;inset:0;border-radius:50%;border:2px solid #5e635f;background:#343b3e;box-shadow:0 12px 30px #0009}
.touch-lamp-aura{position:absolute;inset:-35px;background:radial-gradient(circle,var(--touch-color),transparent 69%);opacity:calc(var(--touch-brightness) * .28);border-radius:50%;z-index:-1}
.touch-lamp-light{position:absolute;inset:3px;border:10px solid var(--touch-color);border-radius:50%;opacity:var(--touch-brightness);box-shadow:0 0 13px var(--touch-color),inset 0 0 14px var(--touch-color)}
.touch-lamp-face{position:absolute;inset:16px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(140deg,#354047 0,#222d34 38%,#111a20 72%);box-shadow:inset 0 0 20px #0008;color:#e5e8e6;text-align:center}
.touch-lamp-face>span{font-size:8px;letter-spacing:.22em;color:#9eaaa9}.touch-lamp-face strong{font-size:20px;font-weight:500;margin-top:12px;letter-spacing:-.02em}.touch-lamp-face i{display:block;width:24px;height:1px;background:var(--touch-color);margin:17px 0 14px}.touch-lamp-face small{font-size:6px;letter-spacing:.14em;color:#a8b1b0}
.touch-demo-tones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;list-style:none;margin:17px 0 22px;padding:0}
.touch-demo-tones li{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 2px;border-bottom:2px solid transparent;font-size:9px;line-height:1.5;color:#94a29b;text-align:center}
.touch-demo-tones li[data-active="true"]{color:#f3efe6;border-bottom-color:var(--touch-color)}
.touch-tone-swatch{display:block;width:9px;height:9px;flex:none;border-radius:50%;box-shadow:0 0 0 1px #ffffff18}.touch-tone-swatch--warm{background:#ffd399}.touch-tone-swatch--white{background:#edf5ff}.touch-tone-swatch--natural{background:#fff1dc}
.touch-demo-brightness>div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px;color:#b9c3bf;font-size:11px;line-height:1.5}.touch-demo-brightness strong{color:#f1eee5;font-size:18px;font-weight:500;font-variant-numeric:tabular-nums}
.touch-demo-meter{height:5px;border-radius:5px;background:#39413f;overflow:hidden}.touch-demo-meter>span{display:block;height:100%;width:var(--touch-level);background:var(--touch-color);border-radius:inherit}
.touch-demo-interaction{display:flex;align-items:center;gap:18px;margin:23px 0 17px}.touch-demo-button{display:grid;place-items:center;flex:none;width:68px;height:68px;padding:0;border:1px solid #7b8175;border-radius:50%;color:#e8d29d;background:radial-gradient(circle at 35% 30%,#3c423b,#202824);cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 5px 18px #0003}.touch-demo-button svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}.touch-demo-button svg>circle{opacity:.45}.touch-demo-button:disabled{cursor:default;opacity:.6}.touch-demo-button:hover:not(:disabled){border-color:#d9c38c;background:#354036}.touch-demo[data-dimming="down"] .touch-demo-button,.touch-demo[data-dimming="up"] .touch-demo-button{border-color:var(--touch-color);color:var(--touch-color);box-shadow:0 0 0 4px #e5c78214,0 5px 22px #0004}
.touch-demo-interaction>div{min-width:0}.touch-demo-interaction strong{display:block;font-size:10px;font-weight:650;letter-spacing:.13em;color:#e2c99a;margin-bottom:7px}.touch-demo-interaction [data-touch-status]{display:block;font-size:11px;line-height:1.6;min-height:18px;color:#c5cec8}
.touch-demo-help,.touch-demo-keyboard{font-size:.71rem;line-height:1.7;color:#b8c2bd;margin:0 0 10px}.touch-demo-keyboard{color:#8f9d97;font-size:.65rem}.touch-demo-note{padding-top:16px;margin-top:18px;border-top:1px solid #ffffff14}.touch-demo-note p{margin:0 0 11px;font-size:.67rem;line-height:1.65;color:#a1aea8}.touch-demo-note a{color:#dec58f;font-size:.7rem;line-height:1.6}.touch-demo-note a span{margin-left:6px}.touch-demo button:focus-visible,.touch-demo a:focus-visible{outline:3px solid #efd29b;outline-offset:5px}
.touch-board-reference{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;align-items:center;padding:28px;border:1px solid #d9d5c9;border-radius:18px;background:#fff;margin:36px 0 45px;scroll-margin-top:110px}.touch-board-reference figure img{height:280px;background:#fff}.touch-board-reference h3{font-size:clamp(1.5rem,2vw,2rem);letter-spacing:-.03em;margin:0 0 16px}.touch-board-reference p{color:#545e59;line-height:1.8;margin:0 0 12px}
@media(min-width:981px){.product-hero-grid:has(.touch-demo){grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);gap:clamp(35px,5vw,72px);align-items:stretch}}
@media(max-width:980px){.touch-demo{max-width:680px}.touch-board-reference{gap:24px}}
@media(max-width:540px){.touch-demo{padding:22px 16px;border-radius:18px}.touch-demo-stage{min-height:280px;margin:22px 0 0}.touch-lamp{width:min(240px,100%)}.touch-demo-topline{font-size:8px}.touch-demo-tones{gap:4px}.touch-demo-tones li{font-size:8px;gap:4px}.touch-demo-interaction{gap:15px}.touch-board-reference{grid-template-columns:minmax(0,1fr);padding:22px}.touch-board-reference figure img{height:245px}}
@media(prefers-reduced-motion:reduce){.touch-demo *{animation:none!important;transition:none!important}}