.teaser{padding:110px 7%;display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;border-top:1px solid #d5b8ad;scroll-margin-top:25px}.teaser h2,.making h2{font-size:clamp(38px,4.4vw,68px);line-height:1.4;margin:12px 0 24px;color:#19254e}.teaser h2 span,.making h2 span{color:#682c3f}.teaser-copy>p{line-height:2;font-size:18px}.teaser-copy .teaser-rule{font-size:15px;color:#55444b}.calm-tag{display:inline-block;font-size:13px;border:1px solid #b59386;border-radius:30px;padding:7px 14px;margin:10px 0 20px}.teaser details{max-width:400px;font-size:14px;line-height:1.9}.teaser summary{cursor:pointer;text-decoration:underline;text-underline-offset:5px}.teaser-copy .teaser-note{font-size:12px;color:#66515a;margin-top:25px}.teaser-panel{background:#682c3f;border:1px solid #4e2535;border-radius:26px;padding:22px;box-shadow:0 18px 35px #682c3f18;max-width:520px;width:100%;justify-self:center}.teaser-top{display:flex;justify-content:space-between;gap:15px;color:#f1dfd3;font-size:12px;padding:0 3px 14px}.teaser-top span:last-child{opacity:.7}.teaser-screen{background:#f9f1e4;border:6px solid #271c24;border-radius:12px;padding:20px 12px 12px;color:#19254e}.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;direction:ltr;max-width:235px;margin:0 auto;padding:5px;border:2px solid transparent;border-radius:10px}.teaser-grid.solved{border-color:#355c46}.teaser-cell{position:relative;min-width:0;aspect-ratio:1;border:1px solid #b8a494;border-radius:8px;background:#fffaf3}.teaser-cell.fixed{background:#e5d4c4}.teaser-cell.selected{outline:3px solid #682c3f;outline-offset:2px}.teaser-cell.valid{border-bottom:4px solid #355c46}.teaser-cell input{width:100%;height:100%;padding:0;border:0;border-radius:7px;background:transparent;text-align:center;font:32px/1 inherit;font-family:inherit;font-size:32px;color:#19254e;cursor:pointer;caret-color:#682c3f;min-width:0}.teaser-cell input:focus{outline:none}.clue-dot{position:absolute;bottom:0;right:8px;font-size:15px;color:#682c3f;pointer-events:none}#teaser-status{font-size:13px;line-height:1.8;text-align:center;min-height:46px;margin:14px 0 0}#teaser-success{text-align:center;padding:12px 0 8px;border-top:1px solid #d5b8ad}#teaser-success[hidden]{display:none}#teaser-success strong{color:#355c46;font-size:19px}#teaser-success p{font-size:14px;margin:8px}#teaser-success .button{background:#fc9d0b;color:#19254e;font-size:14px;padding:12px 22px}.teaser-keyboard{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:20px;direction:rtl}.teaser-keyboard button{font:inherit;font-size:23px;min-height:46px;min-width:0;border:1px solid #e3c6b6;border-bottom:4px solid #bb9783;border-radius:7px;color:#19254e;background:#f9eee0;cursor:pointer}.teaser-keyboard button:active{transform:translateY(2px);border-bottom-width:2px}.teaser-actions{display:flex;gap:10px;justify-content:space-between;margin-top:18px}.teaser-actions button{font:inherit;font-size:12px;min-height:44px;padding:7px 10px;cursor:pointer;border-radius:7px;border:1px solid #e2b7a3;color:#fff5e9;background:transparent}.teaser-actions button:disabled{opacity:.45;cursor:default}.teaser button:focus-visible,.teaser summary:focus-visible{outline:3px solid #fc9d0b;outline-offset:3px}.hands-image figcaption{font-size:11px;line-height:1.8;text-align:center;color:#66515a;padding:10px 18px}.making{padding:90px 7%;border-top:1px solid #d5b8ad}.making-heading{max-width:650px}.making-heading>p:last-child{font-size:17px;line-height:2}.making-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:40px}.making figure{margin:0}.making img{display:block;width:100%;height:360px;object-fit:cover;border-radius:12px}.making figure:nth-child(2) img{object-fit:contain;background:#f4f7f7}.making figcaption{padding:18px 2px}.making figcaption>span{font-size:11px;color:#66515a}.making h3{font-size:24px;color:#682c3f;margin:10px 0}.making figcaption p{font-size:15px;line-height:1.9;max-width:500px}#teaser-reset-dialog{max-width:440px;padding:30px;background:#f1dfd3;color:#19254e;border:1px solid #682c3f;border-radius:15px}#teaser-reset-dialog h2{font-size:26px}#teaser-reset-dialog .teaser-actions button{background:#682c3f;color:#fff5e9}.theme-cream footer{flex-wrap:wrap;gap:20px}.dictionary-sources{max-width:850px;margin:auto;padding:45px 25px;line-height:1.9}.dictionary-sources h1{font-size:34px;color:#682c3f}.dictionary-sources a{color:#682c3f}.dictionary-sources li{margin-bottom:15px}
@media(max-width:850px){.teaser{gap:30px;padding:70px 6%;grid-template-columns:1fr}.teaser-copy{max-width:520px;justify-self:center;width:100%}.teaser h2{font-size:42px}.teaser-copy>p{font-size:16px}.teaser-panel{max-width:440px}.making{padding:60px 6%}.making-grid{gap:25px}.making img{height:260px}}
@media(max-width:550px){.teaser{padding:55px 5%}.teaser-panel{padding:14px;border-radius:19px}.teaser-screen{padding:16px 8px 10px}.teaser-grid{max-width:210px}.teaser-cell input{font-size:29px}.teaser-keyboard{gap:4px}.teaser-keyboard button{min-height:44px;font-size:22px}.teaser-actions{gap:6px}.teaser-actions button{font-size:11px;padding:6px}.making-grid{grid-template-columns:1fr}.making img{height:300px}.making h2{font-size:38px}.making figure:nth-child(2) img{height:auto}.teaser-top{font-size:11px}.teaser details{font-size:13px}}
@media(prefers-reduced-motion:reduce){.teaser-keyboard button:active{transform:none}}

/* Three-stage development story: bench, owner display photo, then detailed CAD. */
.photo-pending{height:360px;border:1px dashed #b18b85;border-radius:12px;background:#ead5ca;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;color:#682c3f}.photo-pending>span{font:600 22px/1.5 system-ui;letter-spacing:2px}.photo-pending p{font-size:18px}.photo-pending small{font-size:12px;color:#66515a}.making .cad-story{grid-column:1/-1}.making .cad-story img{height:auto;width:100%;max-height:740px;object-fit:contain;background:#121c36;border-radius:16px}.cad-story figcaption{display:flex;justify-content:space-between;gap:35px}.cad-story figcaption p{max-width:550px}.cad-story h3{font-size:32px}
@media(max-width:850px){.photo-pending{height:260px}.cad-story figcaption{display:block}}
@media(max-width:550px){.photo-pending{height:300px}.teaser-copy h2{font-size:35px;line-height:1.4;margin:8px 0 16px}.teaser-copy>p{font-size:14px;line-height:1.8}.teaser-copy .teaser-rule{font-size:13px}.teaser{padding-top:38px}.teaser-copy .teaser-note{margin-top:14px}.calm-tag{margin:4px 0 12px}.teaser-copy details{font-size:12px}}
@media(max-width:550px){.teaser-keyboard{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:360px){.teaser-keyboard{grid-template-columns:repeat(5,minmax(0,1fr))}}
.skip{opacity:0;pointer-events:none}.skip:focus{opacity:1;pointer-events:auto}

/* Owner-supplied prototype photograph and portrait bench clip. */
.prototype-watch{display:block;width:100%;padding:0;border:0;border-radius:12px;position:relative;overflow:hidden;cursor:pointer;background:#2c251f;color:#19254e;font:inherit;text-align:inherit}
.making .prototype-photo .prototype-watch img{height:360px;object-fit:contain;background:#2c251f}
.prototype-play{position:absolute;bottom:16px;right:16px;display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 16px;border-radius:28px;background:#fff4eb;box-shadow:0 3px 16px #0003;font-size:15px}
.prototype-play>span{font:26px/1 sans-serif}.prototype-play small{font-size:11px;color:#66515a}
.prototype-watch:focus-visible{outline:3px solid #682c3f;outline-offset:5px}.prototype-watch:hover .prototype-play{background:#f9dfb5}
.prototype-dialog{width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:20px;overflow-y:auto;box-sizing:border-box}
.prototype-dialog .dialog-head{gap:16px;margin-bottom:16px}.prototype-dialog h2{font-size:24px;line-height:1.5;margin:4px 0}
.prototype-dialog video{display:block;width:auto;height:auto;max-width:100%;max-height:65vh;max-height:65dvh;margin:0 auto;background:#201b18;border-radius:10px;object-fit:contain}
.prototype-dialog>p{font-size:12px;line-height:1.8;margin:14px 0 0}
@media(max-width:850px){.making .prototype-photo .prototype-watch img{height:260px}}
@media(max-width:550px){.making .prototype-photo .prototype-watch img{height:auto}.prototype-play{bottom:10px;right:10px;font-size:13px;padding:6px 12px;gap:8px}.prototype-dialog{padding:16px}.prototype-dialog h2{font-size:21px}}

/* Real bench pair and original CAD detail studies, 9 November. */
.making-grid{align-items:start}.making .bench-story img{height:auto;aspect-ratio:4/3;object-fit:contain;background:#2c251f}
.prototype-film{height:clamp(300px,33vw,520px);position:relative;border-radius:12px;overflow:hidden;background:#221d19;display:flex;justify-content:center}
.prototype-film video{display:block;width:100%;height:100%;object-fit:contain;background:#221d19}
#bench-playback{position:absolute;bottom:14px;right:14px;min-height:44px;padding:8px 16px;border:1px solid #e2c9b9;border-radius:24px;background:#fff4eb;color:#19254e;font:14px/1.5 inherit;cursor:pointer}
#bench-playback:focus-visible{outline:3px solid #fc9d0b;outline-offset:3px}.film-label{position:absolute;top:14px;right:14px;background:#211b19c9;color:#fff4eb;border-radius:20px;padding:6px 12px;font-size:11px;pointer-events:none}
.cad-details{grid-column:1/-1;margin-top:30px}.cad-details-heading>span,.cad-study-note{font-size:12px;color:#66515a}.cad-details-heading h3{font-size:32px}.cad-details-heading p{font-size:15px;line-height:1.9;max-width:650px}
.cad-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}.making .cad-detail-grid img{width:100%;height:auto;aspect-ratio:5/4;object-fit:contain;background:#19243a;border-radius:12px}.cad-detail-grid h4{color:#682c3f;font-size:19px;margin:0 0 8px}.cad-detail-grid figcaption p{font-size:13px;margin:0}.cad-study-note{line-height:1.9;margin-top:12px}.cad-detail-grid a:focus-visible{outline:3px solid #682c3f;outline-offset:4px;display:block;border-radius:12px}
@media(max-width:550px){.prototype-film{height:460px;max-height:70svh}.cad-detail-grid{grid-template-columns:1fr;gap:18px}.cad-details{margin-top:10px}.cad-details-heading h3{font-size:28px}}

/* Matching landscape frames for the new owner clip and bench photograph. */
.making .bench-story img{aspect-ratio:16/9;width:100%;height:auto;object-fit:cover;object-position:50% 40%}
.prototype-film{aspect-ratio:16/9;width:100%;height:auto;max-height:none}

/* Selected keyboard face and simplified hero CAD. */
.cad-detail-grid--selected{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.making .cad-detail-grid--selected img{aspect-ratio:10/7;object-fit:contain;background:#f5f6f8}
@media(max-width:700px){.cad-detail-grid--selected{grid-template-columns:1fr;gap:24px}}

/* Preserve the original three details; add two wider studies underneath. */
.cad-detail-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.cad-detail-grid>figure{grid-column:span 2}.cad-detail-grid>figure.cad-extra{grid-column:span 3}.making .cad-detail-grid .cad-extra img{aspect-ratio:4/3;object-fit:contain}.making .cad-detail-grid .keyboard-study img{background:#f6f4ee}
@media(max-width:550px){.cad-detail-grid{grid-template-columns:1fr}.cad-detail-grid>figure,.cad-detail-grid>figure.cad-extra{grid-column:1}}

/* One continuous row; preserve readable card sizes with scrolling on smaller screens. */
.cad-detail-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:5px 4px 14px;scrollbar-width:thin;scrollbar-color:#93616b #e6cfc2}
.cad-detail-grid>figure,.cad-detail-grid>figure.cad-extra{grid-column:auto;min-width:0;scroll-snap-align:start}
.making .cad-detail-grid img,.making .cad-detail-grid .cad-extra img,.making .cad-detail-grid .keyboard-study img{aspect-ratio:5/4;object-fit:contain;background:#19243a}
.cad-detail-grid h4{font-size:17px;line-height:1.7}.cad-detail-grid:focus-visible{outline:2px solid #682c3f;outline-offset:5px;border-radius:12px}
@media(max-width:1000px){.cad-detail-grid{grid-auto-columns:260px}}
@media(max-width:550px){.cad-detail-grid{grid-auto-columns:82%;gap:16px}}

/* Calm, event-based feedback. Existing clues and editable solved grid remain visible. */
@keyframes teaser-start-cue{0%,100%{box-shadow:0 0 0 0 #682c3f00}45%{box-shadow:0 0 0 7px #682c3f26}}
.teaser-cell.start-cue{animation:teaser-start-cue 1.5s ease-out 1}
@keyframes teaser-word-accepted{0%,100%{box-shadow:inset 0 0 0 0 #597b5f00}45%{box-shadow:inset 0 0 0 4px #597b5f66}}
.teaser-cell.word-accepted{animation:teaser-word-accepted 1.2s ease-out 1}
#teaser-status{min-height:5.4em}
#teaser-success{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:132px;box-sizing:border-box;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s linear .6s}
#teaser-success.is-visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .6s ease,visibility 0s}
#teaser-success strong{font-size:17px;line-height:1.8;max-width:100%}
#teaser-success .button{max-width:100%;white-space:normal;line-height:1.7}
@media(prefers-reduced-motion:reduce){.teaser-cell.start-cue,.teaser-cell.word-accepted{animation:none}#teaser-success,#teaser-success.is-visible{transition:none}}
/* Firmware-style independent direction cues and fixed markers. */
.teaser-cell{border-radius:3px;overflow:visible}.teaser-cell input{border-radius:2px}.teaser-cell.valid,.teaser-cell.fixed.valid,.teaser-cell.selected.valid{background:#c8e8c8;border-color:#003d1d;color:#003d1d;border-bottom-width:1px}.teaser-cell.valid input{color:#003d1d}
.teaser-cell.valid-horizontal::after{content:'';position:absolute;left:0;right:-7px;bottom:0;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23003d1d' d='M0 8V6L8 0V8Z'/%3E%3C/svg%3E") repeat-x;pointer-events:none;z-index:2}.teaser-cell.valid-horizontal.row-end::after{right:0}
.teaser-cell.valid-vertical::before{content:'';position:absolute;right:0;top:0;bottom:-7px;width:5px;background:repeating-linear-gradient(to bottom,#003d1d 0 12px,transparent 12px 18px);pointer-events:none;z-index:3}.teaser-cell.valid-vertical.column-end::before{bottom:0}
.teaser-cell .clue-dot{position:absolute;top:4px;left:4px;right:auto;bottom:auto;width:5px;height:5px;background:#080820;z-index:5}.teaser-cell.valid .clue-dot{background:#003d1d}.clue-dot[hidden]{display:none}
.teaser-cell.selected{outline:none}.selection-frame{display:none}.selected .selection-frame{display:block;position:absolute;inset:5px 8px 10px 5px;border:3px solid #e0982c;pointer-events:none;z-index:4}
/* Screen contains the grid and short guidance, without an empty victory reservation. */
.teaser{grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);gap:4%}.teaser-panel{max-width:820px;min-width:0}.teaser-screen{max-width:320px;width:100%;margin:0 auto;padding:12px 10px}.teaser-grid{max-width:220px}.teaser-top{max-width:320px;margin:auto}#teaser-status{min-height:0;margin:12px 0 2px;font-size:12px;line-height:1.7}
#teaser-success[hidden]{display:none!important}#teaser-success.is-visible{min-height:0;padding:10px 0 2px;gap:7px;transition:none;animation:teaser-success-reveal .5s ease-out}#teaser-success strong{font-size:14px;line-height:1.7}#teaser-success .button{font-size:12px;padding:8px 14px}
@keyframes teaser-success-reveal{from{opacity:0}to{opacity:1}}
/* 51 controls from the hero CAD centre coordinates; no alphabetic reordering. */
.hero-keyboard-scroll{overflow-x:auto;max-width:100%;direction:ltr;margin-top:16px;padding:4px 0;scrollbar-width:thin;scrollbar-color:#e7c8b6 #572433;border-radius:8px}.hero-keyboard-scroll:focus-visible{outline:2px solid #fc9d0b;outline-offset:3px}
.teaser-keyboard.hero-keyboard{position:relative;display:block;width:100%;min-width:720px;aspect-ratio:96/58;margin:0;direction:ltr}
.teaser-keyboard .hero-key{position:absolute;transform:translate(-50%,-50%);width:6.666667%;height:7.6%;min-width:44px;min-height:44px;font-size:25px;line-height:1;padding:0;border-radius:7px;touch-action:manipulation;user-select:none}
.teaser-keyboard .function-key{width:12.5%;font-size:15px}.teaser-keyboard .number-key{background:#ecdcc6}.teaser-keyboard .confirm-key{background:#fc9d0b;border-color:#df971f;border-radius:50%;width:6.1%}.teaser-keyboard .hero-key:active{transform:translate(-50%,calc(-50% + 2px));border-bottom-width:2px}.teaser-keyboard .hero-key:disabled{opacity:.45;cursor:default}.teaser-keyboard .is-holding{box-shadow:inset 0 0 0 3px #fc9d0b}
.keyboard-scroll-note{font-size:11px;color:#f1dfd3;text-align:center;line-height:1.7;margin:8px 0 0}
#teaser-help-dialog{width:min(440px,calc(100vw - 32px));padding:24px;background:#f1dfd3;color:#19254e;border:1px solid #682c3f;border-radius:16px}#teaser-help-dialog h2{font-size:24px}#teaser-help-text{font-size:16px;line-height:1.9}.help-actions{display:flex;gap:12px;flex-wrap:wrap}.help-actions button{font:inherit;background:#682c3f;color:#fff4eb;border:0;border-radius:8px;min-height:44px;padding:10px 16px;cursor:pointer}.help-actions button[hidden]{display:none}
@media(max-width:850px){.teaser{grid-template-columns:1fr}.teaser-panel{padding:14px}.teaser-copy{max-width:620px}}
@media(prefers-reduced-motion:reduce){#teaser-success.is-visible{animation:none}.teaser-keyboard .hero-key:active{transform:translate(-50%,-50%)}}

/* Web-specific compact pitch: same hero key order, without physical CAD spacing. */
.teaser{grid-template-columns:minmax(220px,.85fr) minmax(0,1.15fr)}
.teaser-panel{max-width:560px;padding:16px;border-radius:22px}
.teaser-top{max-width:270px;align-items:center;padding:0 0 10px;min-height:44px}
.teaser-top .teaser-logo{opacity:1;display:flex;align-items:center;justify-content:center;padding:3px 7px;border-radius:8px;background:#f9f1e4}
.teaser-logo img{display:block;width:82px;height:auto}
.teaser-screen{max-width:270px;padding:10px 8px}.teaser-grid{max-width:190px}.teaser-cell input{font-size:29px}
.hero-keyboard-scroll{margin-top:10px;padding:4px 0}
.teaser-keyboard.hero-keyboard{width:524px;min-width:524px;height:332px;aspect-ratio:auto;margin-inline:auto}
.teaser-keyboard .hero-key{width:44px;height:44px;min-width:44px;min-height:44px;font-size:23px}
.teaser-keyboard .function-key{width:88px;font-size:14px}
.teaser-keyboard .confirm-key{width:44px}
.keyboard-scroll-note{margin-top:5px}
@media(min-width:1100px){.keyboard-scroll-note{display:none}}
@media(max-width:850px){.teaser{grid-template-columns:1fr}.teaser-panel{padding:14px}}

/* Arabic keyboard: rotate only the delete glyph, keeping its key press intact. */
#teaser-delete .delete-symbol{display:inline-block;transform:rotate(180deg)}

/* Approved firmware viewport is 480 x 320 (3:2); web completion stays outside. */
.teaser-screen{max-width:400px;aspect-ratio:3/2;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:4px;padding:8px;box-sizing:border-box}
.teaser-screen .teaser-grid{height:100%;width:auto;aspect-ratio:1;max-height:190px;max-width:190px;min-height:0;grid-template-rows:repeat(3,minmax(0,1fr));align-self:center;justify-self:center;margin:0}
.teaser-screen .teaser-cell{min-height:0}.teaser-screen .teaser-cell input{min-height:0}
.teaser-screen #teaser-status{margin:0;font-size:12px;line-height:1.6}
.teaser-top{max-width:400px}
#teaser-panel>#teaser-success.is-visible{max-width:400px;margin:10px auto 0;padding:10px 12px;background:#f9f1e4;border:0;border-radius:10px}
@media(max-width:400px){.teaser-screen{padding:6px;gap:3px}.teaser-screen #teaser-status{font-size:11px}.teaser-screen .teaser-cell input{font-size:23px}}

/* Native FAQ, after signup: quiet separators and keyboard focus. */
.faq{max-width:680px;margin:4rem auto;padding:0 1.5rem}
#faq-title{color:#682c3f;margin-bottom:2rem;font-size:clamp(28px,3vw,40px);line-height:1.5}
.faq-list details{border-bottom:1px solid rgba(104,44,63,.15)}
.faq-list details:first-child{border-top:1px solid rgba(104,44,63,.15)}
.faq-list summary{padding:1.25rem 0;cursor:pointer;font-weight:bold;color:#682c3f;list-style-position:inside;line-height:1.8}
.faq-list summary:focus-visible{outline:2px solid #682c3f;outline-offset:4px;border-radius:4px}
.faq-list summary::marker{color:rgba(104,44,63,.5)}
.faq-list p{padding-bottom:1.25rem;margin:0;color:#682c3f;opacity:.85;line-height:1.8}

/* Owner-selected browser controls: circular clue dots and directional key silhouettes. */
.teaser-cell .clue-dot{border-radius:50%}
/* Segmented console-style directional pad: outer flats, inward tips, raised faces. */
.teaser-keyboard .hero-key[data-key^="Arrow"]{background:transparent;border:0;border-radius:7px;box-shadow:none;font-size:0;isolation:isolate}
.teaser-keyboard .hero-key[data-key^="Arrow"]::before{content:"";position:absolute;inset:0;border-radius:7px;background:linear-gradient(#fff6e9,#ead5bf);box-shadow:inset 0 2px 0 #ffffffb3,inset 0 -3px 0 #bb9783;pointer-events:none;z-index:-1}
.teaser-keyboard .hero-key[data-key="ArrowUp"]::before{clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%)}
.teaser-keyboard .hero-key[data-key="ArrowDown"]::before{clip-path:polygon(50% 0,100% 30%,100% 100%,0 100%,0 30%)}
.teaser-keyboard .hero-key[data-key="ArrowLeft"]::before{clip-path:polygon(0 0,70% 0,100% 50%,70% 100%,0 100%)}
.teaser-keyboard .hero-key[data-key="ArrowRight"]::before{clip-path:polygon(30% 0,100% 0,100% 100%,30% 100%,0 50%)}
.teaser-keyboard .hero-key[data-key^="Arrow"]::after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:14px/1 Arial,sans-serif;color:#682c3f;text-shadow:0 1px 0 #fff9;pointer-events:none}
.teaser-keyboard .hero-key[data-key="ArrowUp"]::after{content:"▲";padding-bottom:6px}
.teaser-keyboard .hero-key[data-key="ArrowDown"]::after{content:"▼";padding-top:6px}
.teaser-keyboard .hero-key[data-key="ArrowLeft"]::after{content:"◀";padding-right:6px}
.teaser-keyboard .hero-key[data-key="ArrowRight"]::after{content:"▶";padding-left:6px}

/* Smaller visible D-pad faces; retain the full 44px tap targets. */
.teaser-keyboard .hero-key[data-key^="Arrow"]::before{inset:6px;border-radius:5px}
.teaser-keyboard .hero-key[data-key^="Arrow"]::after{font-size:11px}