{"product_id":"my-sweet-piano-5108-v5-mechanical-keyboard","title":"My Sweet Piano 5108 V5 Mechanical Keyboard","description":"\u003cbody\u003e\n\u003c!-- ==========================================================================\n     AKKO — MY SWEET PIANO 5108 V5 — PRODUCT PAGE SECTION\n     Shopify-compatible custom HTML\/CSS\/JS. Paste into a \"Custom Liquid\" \/\n     \"Custom HTML\" section on the product template, below the existing\n     Shopify product form (gallery + variant picker + native Add to Cart).\n\n     WHAT THIS FILE DOES\n     - Preserves the original page's layout, section order and content:\n       V5 upgrade badges -\u003e hero -\u003e feature grid -\u003e Full-Body Themed Design\n       -\u003e Dual 8K Hz Polling -\u003e Pro Gaming (Snap Key \/ Mod-Tap) -\u003e Specs\n       -\u003e Add to Cart CTA -\u003e footer banner.\n     - Feature-grid icons redrawn to match Akko's own official icon set:\n       framed line-art glyphs (keyboard, polling graph, flex-cut slots,\n       gasket stack, switch, RGB venn, keycap profile, wireless + BT) on\n       soft-pink rounded tiles.\n     - Type scale enlarged across the whole page (base 17px, larger\n       headings, body copy, chips, spec values and CTA).\n     - The bottom CTA scrolls up to the theme's REAL Add to Cart button and\n       then makes that button itself glow.\n\n     HOW THE ADD TO CART GLOW WORKS (rewritten)\n     The previous build injected an absolutely-positioned overlay div into\n     \u003cbody\u003e and measured the button's rect before the smooth scroll had\n     finished — so the halo was drawn at a stale, usually off-screen\n     position and was never seen. That approach is gone.\n\n     Now the script is strictly read-only with respect to the storefront:\n       1. Finds the real Add to Cart button by selector (never duplicates,\n          restyles, hides or rebinds it).\n       2. Scrolls it to the centre of the viewport with a cubic ease-in-out\n          rAF animation (~1700ms), then re-checks for layout drift caused\n          by lazy-loaded images and corrects.\n       3. Adds ONE additive CSS class (.ak-atc-pulse) to that button, which\n          runs a pure box-shadow\/brightness animation for ~4.5s and is then\n          removed automatically.\n     Because the glow is painted by the button itself, it can never be\n     mis-positioned. No new nodes are created outside this description, no\n     payment or checkout UI is ever touched, and no pre-existing class or\n     attribute on the button is modified or removed.\n\n     STORE-OWNER NOTES\n     - Paste this into a \"Custom Liquid\" \/ raw HTML code section, NOT a\n       WYSIWYG \"Rich text\" block. Rich-text editors routinely strip\n       elements they consider \"empty\" (used here for the Snap Key\n       animation's moving dot\/underline) the next time the page is\n       saved — that will silently kill the animation.\n     - If the CTA button can't find your theme's Add to Cart button\n       automatically, add  data-atc-target  to the native add-to-cart\n       \u003cbutton\u003e and it will be used first, every time — see\n       AKKO_ATC_SELECTORS below.\n     ========================================================================== --\u003e\n\n\u003cstyle\u003e\n\/* ==========================================================================\n   0. ADD TO CART PULSE  (intentionally OUTSIDE the .ak-page scope)\n   This is the only rule set in this file that can affect an element beyond\n   the description container, and it only ever applies while our script has\n   temporarily added the class. It animates box-shadow and brightness only —\n   never size, shape, colour, radius, position or behaviour of the button.\n   ========================================================================== *\/\n.ak-atc-pulse{\n  animation: akAtcPulse 1.5s ease-in-out 3 !important;\n  will-change: box-shadow;\n}\n@keyframes akAtcPulse{\n  0%{\n    box-shadow: 0 0 0 0 rgba(214, 35, 107, 0.60), 0 0 26px 4px rgba(244, 174, 201, 0.55);\n    filter: brightness(1);\n  }\n  50%{\n    box-shadow: 0 0 0 16px rgba(214, 35, 107, 0), 0 0 48px 16px rgba(244, 174, 201, 0.95);\n    filter: brightness(1.07);\n  }\n  100%{\n    box-shadow: 0 0 0 0 rgba(214, 35, 107, 0), 0 0 26px 4px rgba(244, 174, 201, 0.45);\n    filter: brightness(1);\n  }\n}\n@media (prefers-reduced-motion: reduce){\n  .ak-atc-pulse{ animation: akAtcPulseStill 1.6s ease-in-out 1; }\n}\n@keyframes akAtcPulseStill{\n  0%, 100%{ box-shadow: 0 0 0 0 rgba(244, 174, 201, 0); }\n  30%, 70%{ box-shadow: 0 0 40px 12px rgba(244, 174, 201, 0.9); }\n}\n\n\/* ==========================================================================\n   1. DESIGN TOKENS\n   Palette pulled from the My Sweet Piano keyboard itself: powder pink body,\n   deep berry ink accents, warm cream base, mint\/lavender\/peach reserved for\n   accents so the CTA moment reads as distinct and premium.\n   ========================================================================== *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,450;9..144,560;9..144,650;9..144,720\u0026family=Manrope:wght@400;500;600;700;800\u0026family=JetBrains+Mono:wght@400;500;600;700\u0026display=swap');\n\n.ak-page{\n  --pink:        #F4AEC9;\n  --pink-soft:   #FCE3EC;\n  --pink-pale:   #FFF8FB;\n  --rose-deep:   #B23F6E;\n  --magenta:     #D6236B;\n  --magenta-dk:  #B01756;\n  --ink:         #3A2233;\n  --ink-soft:    #6E4A5B;\n  --cream:       #FFFFFF;\n  --cream-deep:  #FBEFD6;\n  --line:        #F1D3DF;\n  --mint:        #BFEAD0;\n  --lavender:    #D9CCF5;\n  --peach:       #FFD9B8;\n  --sky:         #BFE0F5;\n\n  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;\n  --font-body:    'Manrope', -apple-system, sans-serif;\n  --font-mono:    'JetBrains Mono', 'SFMono-Regular', monospace;\n\n  --radius-lg: 26px;\n  --radius-md: 18px;\n  --radius-sm: 10px;\n\n  --shadow-soft: 0 22px 48px -26px rgba(178, 63, 110, 0.45);\n  --shadow-card: 0 14px 32px -20px rgba(58, 34, 51, 0.28);\n\n  --container: 1180px;\n\n  background: var(--cream);\n  color: var(--ink);\n  font-family: var(--font-body);\n  font-size: 19.04px;            \/* base bumped from 16px *\/\n  line-height: 1.68;\n  -webkit-font-smoothing: antialiased;\n  overflow-x: hidden;\n}\n\n.ak-page, .ak-page *, .ak-page *::before, .ak-page *::after{ box-sizing: border-box; }\n.ak-page img{ max-width: 100%; display: block; }\n.ak-page a{ color: inherit; }\n\n.ak-page :focus-visible{\n  outline: 3px solid var(--magenta);\n  outline-offset: 3px;\n  border-radius: 6px;\n}\n\n@media (prefers-reduced-motion: reduce){\n  .ak-page *, .ak-page *::before, .ak-page *::after{\n    animation-duration: 0.001ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.001ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n\n.ak-container{\n  width: 100%;\n  max-width: var(--container);\n  margin: 0 auto;\n  padding: 0 24px;\n}\n\n.ak-page h1, .ak-page h2, .ak-page h3{\n  font-family: var(--font-display);\n  color: var(--ink);\n  margin: 0 0 16px;\n  line-height: 1.12;\n  letter-spacing: -0.01em;\n}\n.ak-page h1{ font-size: clamp(2.8rem, 5.6vw, 4.37rem); font-weight: 650; }\n.ak-page h2{ font-size: clamp(2.07rem, 4.26vw, 3.02rem); font-weight: 650; }\n.ak-page h3{ font-size: 1.46rem; font-weight: 650; }\n.ak-page p{ margin: 0 0 13px; color: var(--ink-soft); font-size: 1.14rem; }\n\n\/* Gentle scroll-reveal, disabled automatically under reduced-motion *\/\n.ak-reveal{ opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }\n.ak-reveal.is-visible{ opacity: 1; transform: translateY(0); }\n\n\/* ==========================================================================\n   2. SIGNATURE ELEMENT — Scallop divider (keyboard-bezel curve motif)\n   ========================================================================== *\/\n.ak-scallop{\n  position: relative;\n  width: 100%;\n  height: 30px;\n  background: radial-gradient(circle at 18px 0, transparent 17px, var(--ak-target, var(--cream)) 18px) top \/ 36px 30px repeat-x;\n}\n.ak-scallop.to-pink{ --ak-target: var(--pink-soft); }\n.ak-scallop.to-cream{ --ak-target: var(--cream); }\n.ak-scallop.flip{ transform: rotate(180deg); }\n\n\/* ==========================================================================\n   3. HEADER STRIP + BRAND HEADER\n   ========================================================================== *\/\n.ak-top-strip{\n  background: var(--ink);\n  color: var(--cream-deep);\n  text-align: center;\n  font-family: var(--font-mono);\n  font-size: 0.94rem;\n  letter-spacing: 0.08em;\n  padding: 10px 12px;\n}\n.ak-brand-header{ padding: 32px 0 14px; text-align: center; }\n.ak-eyebrow{\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: var(--pink-soft);\n  color: var(--rose-deep);\n  font-family: var(--font-mono);\n  font-weight: 600;\n  font-size: 0.96rem;\n  letter-spacing: 0.09em;\n  text-transform: uppercase;\n  padding: 8px 20px;\n  border-radius: 999px;\n  border: 1px solid var(--line);\n  margin-bottom: 18px;\n}\n.ak-brand-header .ak-sub{\n  max-width: 690px;\n  margin: 0 auto;\n  color: var(--ink-soft);\n  font-size: 1.37rem;\n  line-height: 1.7;\n}\n\n\/* ==========================================================================\n   4. HERO BANNER\n   ========================================================================== *\/\n.ak-hero{ position: relative; background: linear-gradient(180deg, var(--pink-soft) 0%, var(--pink) 100%); padding: 10px 0 0; }\n.ak-hero-frame{ position: relative; max-width: 1400px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }\n.ak-hero-frame img{ width: 100%; height: auto; }\n\n\/* ==========================================================================\n   5. V5 UPGRADE BADGE ROW\n   ========================================================================== *\/\n.ak-badge-section{ padding: 32px 0 12px; background: var(--pink-soft); }\n.ak-badge-title{ text-align: center; margin-bottom: 28px; }\n.ak-badge-title .ak-pill{\n  display: inline-block;\n  background: var(--magenta);\n  color: #fff;\n  font-family: var(--font-mono);\n  font-size: 0.92rem;\n  font-weight: 600;\n  letter-spacing: 0.09em;\n  text-transform: uppercase;\n  padding: 7px 18px;\n  border-radius: 999px;\n  margin-bottom: 13px;\n}\n.ak-badge-row{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }\n.ak-badge-chip{\n  display: flex; align-items: center; gap: 8px;\n  background: var(--cream);\n  border: 1.5px solid var(--line);\n  color: var(--rose-deep);\n  font-weight: 700; font-size: 1.12rem;\n  padding: 12px 22px; border-radius: 999px;\n  box-shadow: var(--shadow-card);\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n.ak-badge-chip, .ak-badge-chip a, .ak-badge-chip span{ color: var(--rose-deep) !important; text-decoration: none !important; background-image: none !important; }\n.ak-badge-chip:hover{ transform: translateY(-3px); box-shadow: 0 16px 28px -18px rgba(178,63,110,0.4); }\n\n\/* ==========================================================================\n   6. FEATURE ICON GRID\n   Uses Akko's own official icon artwork (transparent AVIF, hosted on\n   en.akkogear.com) inside a soft pink disc — identical set to the one on\n   Akko's product page, so nothing is re-drawn or approximated.\n   ========================================================================== *\/\n.ak-feature-grid-section{ padding: 36px 0; }\n.ak-feature-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }\n.ak-feat-card{\n  background: var(--cream);\n  border-radius: var(--radius-md);\n  padding: 30px 16px 24px;\n  text-align: center;\n  border: 1px solid var(--line);\n  transition: transform 0.25s ease, box-shadow 0.25s ease;\n}\n.ak-feat-card:hover{ transform: translateY(-6px) rotate(-0.4deg); box-shadow: var(--shadow-card); }\n.ak-feat-icon{\n  width: 78px; height: 78px; margin: 0 auto 16px;\n  border-radius: 50%;\n  background: var(--pink-soft);\n  display: flex; align-items: center; justify-content: center;\n  overflow: hidden;\n}\n\/* Official Akko icon artwork — transparent PNG\/AVIF that already carries its\n   own rounded-square outline, so the container adds no second frame. *\/\n.ak-feat-icon img{ width: 68%; height: 68%; object-fit: contain; }\n\/* Forced color\/no-underline: some storefronts run keyword-highlighting or\n   glossary-link apps that recolor recognized product terms (e.g. \"RGB\",\n   \"Hot-Swappable\"). These rules keep every feature label visually\n   consistent no matter what wraps around the text. *\/\n.ak-feat-card h3,\n.ak-feat-card h3 a,\n.ak-feat-card h3 span{\n  font-size: 1.19rem; margin: 0; font-family: var(--font-body); font-weight: 700;\n  color: var(--ink) !important;\n  text-decoration: none !important;\n  background: none !important;\n}\n\n\/* ==========================================================================\n   7. ALTERNATING TEXT \/ IMAGE MODULES  (product description modules)\n   ========================================================================== *\/\n.ak-feature-module{ padding: 48px 0; }\n.ak-feature-module.on-pink{ background: var(--pink-pale); }\n.ak-module-grid{ display: grid; grid-template-columns: 1fr 1.05fr; gap: 42px; align-items: center; }\n.ak-module-grid.reverse{ grid-template-columns: 1.05fr 1fr; }\n.ak-module-grid.reverse .ak-text-col{ order: 2; }\n.ak-module-grid.reverse .ak-image-col{ order: 1; }\n\n.ak-text-col{ display: flex; flex-direction: column; justify-content: center; min-height: 100%; }\n.ak-eyebrow-tag{\n  display: inline-block; width: fit-content;\n  font-family: var(--font-mono);\n  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;\n  color: var(--rose-deep); background: var(--pink-soft);\n  padding: 6px 16px; border-radius: 999px; margin-bottom: 17px;\n}\n.ak-text-col h2{ margin-bottom: 19px; }\n.ak-text-col p{ font-size: 1.39rem; line-height: 1.8; }\n.ak-text-col .ak-fine-print{ font-family: var(--font-mono); font-size: 0.96rem; color: var(--ink-soft); opacity: 0.85; margin-top: 15px; line-height: 1.6; }\n\n\/* Small highlight chips used to balance tall image columns without\n   inflating font sizes past a readable point *\/\n.ak-highlight-row{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }\n.ak-highlight-chip{\n  display: inline-flex; align-items: center; gap: 8px;\n  font-family: var(--font-mono); font-size: 0.99rem; font-weight: 600;\n  color: var(--rose-deep); background: var(--cream);\n  border: 1.5px solid var(--line); padding: 9px 15px; border-radius: 999px;\n}\n.ak-highlight-chip svg{ width: 15px; height: 15px; }\n\n.ak-image-col{\n  border-radius: var(--radius-lg); overflow: hidden;\n  box-shadow: var(--shadow-card); border: 1px solid var(--line);\n  min-height: 320px;\n}\n.ak-image-col img{ width: 100%; height: 100%; object-fit: cover; display: block; }\n\n\/* ==========================================================================\n   8. ADD TO CART — JUMP CTA\n   Sits at the bottom of the page. Never renders a cart form of its own —\n   it only scrolls to, and briefly haloes, the store's real one.\n   ========================================================================== *\/\n.ak-cta-section{ padding: 8px 0 56px; }\n.ak-cta-panel{\n  max-width: 800px; margin: 0 auto; text-align: center;\n  background: linear-gradient(180deg, var(--pink-pale) 0%, var(--pink-soft) 100%);\n  border: 1px solid var(--line);\n  border-radius: var(--radius-lg);\n  padding: 44px 38px 40px;\n  box-shadow: var(--shadow-card);\n}\n.ak-cta-panel p{\n  font-size: 1.3rem; line-height: 1.8; color: var(--ink-soft);\n  max-width: 640px; margin: 0 auto 28px;\n}\n.ak-cta-button{\n  appearance: none; border: none; cursor: pointer;\n  display: inline-flex; align-items: center; gap: 12px;\n  background: linear-gradient(135deg, var(--magenta) 0%, var(--magenta-dk) 100%);\n  color: #fff; font-family: var(--font-body); font-weight: 800; font-size: 1.32rem;\n  padding: 19px 44px; border-radius: 999px;\n  box-shadow: 0 18px 34px -14px rgba(178, 23, 86, 0.55);\n  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;\n}\n.ak-cta-button svg{ width: 25px; height: 25px; flex-shrink: 0; }\n.ak-cta-button:hover{ transform: translateY(-3px); box-shadow: 0 22px 40px -14px rgba(178, 23, 86, 0.6); filter: brightness(1.04); }\n.ak-cta-button:active{ transform: translateY(-1px) scale(0.98); }\n.ak-cta-note{\n  display: flex; align-items: center; justify-content: center; gap: 7px;\n  margin-top: 17px; font-family: var(--font-mono); font-size: 0.94rem;\n  color: var(--ink-soft); opacity: 0.9;\n}\n.ak-cta-note svg{ width: 15px; height: 15px; }\n\n\/* ==========================================================================\n   9. SECTION TRANSITION BANNER\n   ========================================================================== *\/\n.ak-trans-banner{\n  position: relative; margin: 16px auto; max-width: 900px;\n  padding: 32px 30px; text-align: center;\n  background: var(--ink); border-radius: var(--radius-lg); color: var(--cream); overflow: hidden;\n}\n.ak-trans-banner::before, .ak-trans-banner::after{\n  content: \"\"; position: absolute; width: 160px; height: 160px; border-radius: 50%;\n  background: var(--magenta); opacity: 0.2;\n}\n.ak-trans-banner::before{ top: -60px; left: -60px; }\n.ak-trans-banner::after{ bottom: -70px; right: -70px; }\n.ak-trans-banner .ak-tag{\n  display: inline-block; font-family: var(--font-mono); font-size: 0.87rem;\n  letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink);\n  border: 1px solid rgba(244,174,201,0.4); padding: 6px 17px; border-radius: 999px;\n  margin-bottom: 15px; position: relative;\n}\n.ak-trans-banner h2{ color: #fff; position: relative; margin: 0; }\n.ak-trans-banner .ak-notes{ position: absolute; inset: 0; pointer-events: none; font-size: 1.34rem; color: rgba(244,174,201,0.35); font-family: var(--font-display); }\n.ak-trans-banner .ak-notes span{ position: absolute; }\n.ak-trans-banner .ak-notes span:nth-child(1){ top: 18px; left: 30px; }\n.ak-trans-banner .ak-notes span:nth-child(2){ top: 24px; right: 40px; }\n.ak-trans-banner .ak-notes span:nth-child(3){ bottom: 20px; left: 60px; }\n.ak-trans-banner .ak-notes span:nth-child(4){ bottom: 26px; right: 70px; }\n\n\/* ==========================================================================\n   10. PRO GAMING — SNAP KEY \/ MOD-TAP DEMOS\n   ========================================================================== *\/\n.ak-gaming-header{ text-align: center; padding: 36px 0 8px; }\n.ak-demo-section{ padding: 14px 0 36px; }\n.ak-demo-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }\n.ak-demo-card{\n  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);\n  padding: 32px; box-shadow: var(--shadow-card);\n}\n.ak-demo-num{ font-family: var(--font-mono); color: var(--pink); font-weight: 700; font-size: 1.03rem; letter-spacing: 0.06em; }\n.ak-demo-visual{ background: var(--pink-pale); border-radius: var(--radius-md); padding: 28px 20px 24px; margin: 14px 0 20px; }\n\n\/* --- Snap Key demo: two tracks with a sliding dot + a settle-timing bar\n       under the key row, mirroring the reference animation. --- *\/\n.ak-snap-compare{ display: flex; align-items: flex-start; gap: 18px; }\n.ak-snap-col{ flex: 1; text-align: center; }\n.ak-snap-label{\n  font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-soft);\n  margin-bottom: 11px; min-height: 32px; line-height: 1.45;\n}\n.ak-snap-track{\n  position: relative; height: 36px; background: var(--cream);\n  border-radius: 999px; border: 1px solid var(--line); overflow: hidden; margin-bottom: 10px;\n}\n.ak-snap-dot{ position: absolute; top: 5px; width: 24px; height: 24px; border-radius: 50%; left: 4%; z-index: 2; background: #7CC48C; font-size: 0; line-height: 0; color: transparent; }\n.ak-snap-dot.off{ background: #7CC48C; animation: akDotJitter 3.6s ease-in-out infinite; }\n.ak-snap-dot.on{ background: #2E6E7E; animation: akDotClean 3.6s ease-in-out infinite; }\n@keyframes akDotJitter{\n  0%{ left: 4%; } 14%{ left: 52%; } 28%{ left: 22%; } 42%{ left: 68%; }\n  56%{ left: 34%; } 72%{ left: calc(100% - 28px); } 100%{ left: calc(100% - 28px); }\n}\n@keyframes akDotClean{\n  0%{ left: 4%; } 55%{ left: calc(100% - 28px); } 100%{ left: calc(100% - 28px); }\n}\n.ak-snap-timeline{ height: 4px; border-radius: 999px; background: var(--line); margin: 0 auto 15px; width: 92%; position: relative; overflow: hidden; font-size: 0; line-height: 0; color: transparent; }\n.ak-snap-timeline::after{\n  content: \"\"; position: absolute; left: 0; top: 0; bottom: 0; width: 0;\n  background: linear-gradient(90deg, var(--peach), var(--magenta)); border-radius: 999px;\n}\n.ak-snap-timeline.off::after{ animation: akLineOff 3.6s ease-in-out infinite; }\n.ak-snap-timeline.on::after{ animation: akLineOn 3.6s ease-in-out infinite; }\n@keyframes akLineOff{ 0%, 68%{ width: 0; } 100%{ width: 100%; } }\n@keyframes akLineOn{ 0%, 40%{ width: 0; } 100%{ width: 72%; } }\n.ak-snap-keys{ display: flex; justify-content: center; gap: 8px; align-items: center; }\n.ak-demo-key{\n  width: 34px; height: 34px; border-radius: 8px; background: var(--cream);\n  border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center;\n  font-family: var(--font-mono); font-size: 0.99rem; font-weight: 700; color: var(--ink-soft);\n}\n.ak-demo-key.active{ background: var(--rose-deep); color: #fff; border-color: var(--rose-deep); }\n.ak-key-plus{ color: var(--ink-soft); font-weight: 700; }\n\n\/* --- Mod-Tap demo --- *\/\n.ak-modtap-demo{ display: flex; align-items: center; justify-content: center; gap: 30px; }\n.ak-modtap-key{\n  width: 60px; height: 60px; border-radius: 12px; background: var(--rose-deep); color: #fff;\n  font-family: var(--font-mono); font-weight: 700; font-size: 1.34rem;\n  display: flex; align-items: center; justify-content: center; animation: akKeyPress 2.6s ease-in-out infinite;\n}\n@keyframes akKeyPress{ 0%, 40%, 100%{ transform: scale(1); } 10%{ transform: scale(0.9); } 20%{ transform: scale(1); } }\n.ak-modtap-actions{ display: flex; gap: 18px; }\n.ak-modtap-action{ text-align: center; }\n.ak-modtap-result{\n  width: 46px; height: 46px; border-radius: 10px; background: var(--cream);\n  border: 1.5px solid var(--line); font-family: var(--font-mono); font-weight: 700; font-size: 1.12rem;\n  display: flex; align-items: center; justify-content: center; margin: 0 auto 7px;\n}\n.ak-modtap-action span{ font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-soft); }\n.ak-demo-card h3{ margin: 5px 0 11px; }\n.ak-demo-card p{ font-size: 1.18rem; line-height: 1.72; }\n\n\/* ==========================================================================\n   11. SPECS TABLE\n   ========================================================================== *\/\n.ak-specs-section{ padding: 32px 0 42px; }\n.ak-specs-panel{ background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 44px; box-shadow: var(--shadow-card); }\n.ak-specs-header{ margin-bottom: 26px; }\n.ak-specs-label{ font-family: var(--font-mono); font-size: 0.94rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 9px; }\n.ak-specs-header p{ max-width: 580px; font-size: 1.23rem; }\n.ak-manual-btn{\n  display: inline-flex; align-items: center; gap: 9px;\n  border: 1.5px solid var(--rose-deep); color: var(--rose-deep) !important; text-decoration: none;\n  font-weight: 700; font-size: 1.1rem; padding: 11px 22px; border-radius: 999px; margin-top: 11px;\n  transition: background 0.2s ease, color 0.2s ease;\n}\n.ak-manual-btn svg{ width: 17px; height: 17px; }\n.ak-manual-btn:hover{ background: var(--rose-deep); color: #fff !important; }\n\n.ak-specs-list{ margin-top: 24px; }\n.ak-specs-row{ display: grid; grid-template-columns: 240px 1fr; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }\n.ak-specs-row:last-child{ border-bottom: none; }\n.ak-specs-row.ak-hidden{ display: none; }\n.ak-spec-label{ font-weight: 700; color: var(--ink); font-size: 1.15rem; }\n.ak-spec-value{ font-family: var(--font-mono); color: var(--ink-soft); font-size: 1.12rem; }\n\n.ak-specs-toggle{ text-align: center; margin-top: 28px; }\n.ak-specs-toggle button{\n  display: inline-flex; align-items: center; gap: 9px;\n  background: var(--pink-soft); border: 1px solid var(--line); color: var(--rose-deep);\n  font-weight: 700; font-family: var(--font-body); font-size: 1.12rem;\n  padding: 13px 30px; border-radius: 999px; cursor: pointer; transition: background 0.2s ease;\n}\n.ak-specs-toggle button:hover{ background: var(--pink); color: var(--ink); }\n.ak-toggle-icon{ display: inline-block; transition: transform 0.25s ease; }\n.ak-specs-toggle button.expanded .ak-toggle-icon{ transform: rotate(180deg); }\n\n\/* ==========================================================================\n   12. FOOTER BANNER\n   ========================================================================== *\/\n.ak-footer-banner{ position: relative; max-width: 1400px; margin: 8px auto 40px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }\n.ak-footer-banner img{ width: 100%; }\n.ak-footer-note{ text-align: center; padding: 0 20px 56px; color: var(--ink-soft); font-size: 1.03rem; line-height: 1.7; }\n.ak-footer-note strong{ color: var(--rose-deep); }\n\n\/* ==========================================================================\n   13. RESPONSIVE — TABLET (\u003c=980px)\n   ========================================================================== *\/\n@media (max-width: 980px){\n  .ak-feature-grid{ grid-template-columns: repeat(3, 1fr); }\n  .ak-module-grid, .ak-module-grid.reverse{ grid-template-columns: 1fr; gap: 28px; }\n  .ak-module-grid .ak-text-col, .ak-module-grid.reverse .ak-text-col{ order: 1; }\n  .ak-module-grid .ak-image-col, .ak-module-grid.reverse .ak-image-col{ order: 2; }\n  .ak-image-col{ min-height: 260px; }\n  .ak-demo-grid{ grid-template-columns: 1fr; }\n  .ak-specs-panel{ padding: 34px; }\n  .ak-cta-panel{ padding: 36px 26px; }\n}\n\n\/* ==========================================================================\n   14. RESPONSIVE — MOBILE (\u003c=620px)\n   ========================================================================== *\/\n@media (max-width: 620px){\n  .ak-page{ font-size: 18.48px; }\n  .ak-container{ padding: 0 16px; }\n  .ak-page h1{ font-size: 2.41rem; }\n  .ak-page h2{ font-size: 1.88rem; }\n  .ak-brand-header .ak-sub{ font-size: 1.23rem; }\n  .ak-feature-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }\n  .ak-feat-card{ padding: 24px 10px 18px; }\n  .ak-feat-icon{ width: 66px; height: 66px; }\n  .ak-feat-card h3{ font-size: 1.05rem; }\n  .ak-badge-row{ flex-direction: column; align-items: stretch; }\n  .ak-badge-chip{ justify-content: center; }\n  .ak-trans-banner{ padding: 32px 18px; }\n  .ak-specs-panel{ padding: 26px 18px; }\n  .ak-specs-row{ grid-template-columns: 1fr; gap: 4px; }\n  .ak-text-col p{ font-size: 1.25rem; }\n  .ak-cta-button{ width: 100%; justify-content: center; padding: 18px 20px; font-size: 1.21rem; }\n  .ak-cta-panel{ padding: 32px 20px; }\n  .ak-cta-panel p{ font-size: 1.21rem; }\n  .ak-snap-compare{ gap: 10px; }\n  .ak-modtap-demo{ gap: 18px; }\n}\n\n\/* ==========================================================================\n   15. RESPONSIVE — SMALL PHONES (\u003c=360px)\n   ========================================================================== *\/\n@media (max-width: 360px){\n  .ak-page h1{ font-size: 2.07rem; }\n  .ak-feature-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }\n  .ak-badge-chip{ font-size: 1.03rem; padding: 11px 16px; }\n  .ak-demo-card{ padding: 22px 18px; }\n}\n\n\/* ==========================================================================\n   16. RESPONSIVE — LARGE \/ ULTRA-WIDE (\u003e=1600px)\n   ========================================================================== *\/\n@media (min-width: 1600px){\n  .ak-page{ --container: 1320px; }\n  .ak-hero-frame, .ak-footer-banner{ max-width: 1600px; }\n}\n\u003c\/style\u003e\n\n\u003cdiv class=\"ak-page\"\u003e\n\n  \u003c!-- ============================================================\n       TOP STRIP\n       ============================================================ --\u003e\n  \u003cdiv class=\"ak-top-strip\"\u003eSANRIO LICENSED DESIGN · AKKO 5108 V5 SERIES · LIMITED COLLECTION\u003c\/div\u003e\n\n  \u003c!-- ============================================================\n       BRAND HEADER\n       ============================================================ --\u003e\n  \u003cheader class=\"ak-brand-header\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cspan class=\"ak-eyebrow\"\u003e\n        \u003csvg width=\"15\" height=\"15\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 21s-7.5-4.6-10-9.3C.4 8.1 2 4.5 5.4 3.6c2.2-.6 4.4.4 5.6 2.2C12.2 4 14.4 3 16.6 3.6c3.4.9 5 4.5 3.4 8.1C17.5 16.4 12 21 12 21z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n        V5 Upgrade · My Sweet Piano Series\n      \u003c\/span\u003e\n      \u003ch1\u003eAkko My Sweet Piano 5108 V5\u003cbr\u003eMechanical Keyboard\u003c\/h1\u003e\n      \u003cp class=\"ak-sub\"\u003e100% layout, gasket-mount softness and full My Sweet Piano theming on every surface — with near-zero latency at 8,000 Hz polling, wired or wireless.\u003c\/p\u003e\n    \u003c\/div\u003e\n  \u003c\/header\u003e\n\n  \u003c!-- ============================================================\n       HERO BANNER\n       ============================================================ --\u003e\n  \u003csection class=\"ak-hero\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-hero-frame\"\u003e\n        \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/06\/My-Sweet-Piano-5108-V5-XQ-Q.avif\" alt=\"Akko My Sweet Piano 5108 V5 mechanical keyboard, full view\"\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003cdiv class=\"ak-scallop to-pink\"\u003e\u003c\/div\u003e\n\n  \u003c!-- ============================================================\n       V5 UPGRADE BADGE ROW\n       ============================================================ --\u003e\n  \u003csection class=\"ak-badge-section\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-badge-title ak-reveal\"\u003e\n        \u003cspan class=\"ak-pill\"\u003eV5 Upgrade\u003c\/span\u003e\n        \u003ch2\u003eWhat's New in the 5108 V5?\u003c\/h2\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"ak-badge-row ak-reveal\"\u003e\n        \u003cdiv class=\"ak-badge-chip\"\u003eWired \u0026amp; 2.4G Wireless · 8K Hz\u003c\/div\u003e\n        \u003cdiv class=\"ak-badge-chip\"\u003eUpgraded ARGB Backlight\u003c\/div\u003e\n        \u003cdiv class=\"ak-badge-chip\"\u003e10,000 mAh · Long-Lasting Battery\u003c\/div\u003e\n        \u003cdiv class=\"ak-badge-chip\"\u003eBottom Case Art · Aesthetic Unity\u003c\/div\u003e\n        \u003cdiv class=\"ak-badge-chip\"\u003eUltra-Narrow Gasket Structure\u003c\/div\u003e\n        \u003cdiv class=\"ak-badge-chip\"\u003eDual-Section Split PC Plate\u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003cdiv class=\"ak-scallop to-cream flip\"\u003e\u003c\/div\u003e\n\n  \u003c!-- ============================================================\n       FEATURE ICON GRID\n       Akko's official icon files (en.akkogear.com), transparent AVIF —\n       each already carries its own rounded-square outline, so the pink\n       disc behind it is a plain background, never a second frame.\n       ============================================================ --\u003e\n  \u003csection class=\"ak-feature-grid-section\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-feature-grid\"\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-100-Layout.avif\" alt=\"Akko 5108 V5 — 100% Layout icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003e100% Layout\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-100-8K.avif\" alt=\"Akko 5108 V5 — 8K Polling Rate icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003e8K Polling Rate\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-Per-Key-Flex-Cut.avif\" alt=\"Akko 5108 V5 — Per-Key Flex-Cut icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003ePer-Key Flex-Cut\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-Gasket-Mount.avif\" alt=\"Akko 5108 V5 — Gasket Mount icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003eGasket Mount\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-Hot-Swappable.avif\" alt=\"Akko 5108 V5 — Hot-Swappable icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003eHot-Swappable\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-RGB.avif\" alt=\"Akko 5108 V5 — RGB Backlit icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003eRGB Backlit\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-PBT-Dye-Sub.avif\" alt=\"Akko 5108 V5 — PBT Dye-Sub icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003ePBT Dye-Sub\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-Multi-mode.avif\" alt=\"Akko 5108 V5 — Multi-mode icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003eMulti-mode\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       FULL-BODY THEMED DESIGN  (product description module)\n       ============================================================ --\u003e\n  \u003csection class=\"ak-feature-module\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-module-grid\"\u003e\n        \u003cdiv class=\"ak-text-col ak-reveal\"\u003e\n          \u003cspan class=\"ak-eyebrow-tag\"\u003eTheme Design\u003c\/span\u003e\n          \u003ch2\u003eFull-Body Themed Design\u003c\/h2\u003e\n          \u003cp\u003eThe keyboard features My Sweet Piano artwork across the top case and the entire back panel. Paired with matching themed keycaps, it presents a perfectly cohesive design from every angle — top, bottom and everywhere in between.\u003c\/p\u003e\n          \u003cdiv class=\"ak-highlight-row\"\u003e\n            \u003cspan class=\"ak-highlight-chip\"\u003e\n              \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003cpath d=\"M4 15c4.4-4.4 11.6-4.4 16 0\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n              Bottom case art\n            \u003c\/span\u003e\n            \u003cspan class=\"ak-highlight-chip\"\u003e\n              \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003cpath d=\"M8.5 4.4 19.6 7.9 15.5 12 4.4 8.5Z\"\u003e\u003c\/path\u003e\u003cpath d=\"M4.4 8.5 3.2 15.2l11.1 4.2 1.2-7.4\"\u003e\u003c\/path\u003e\u003cpath d=\"M19.6 7.9l1.2 6.3-6.5 5.2\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n              Matching keycap set\n            \u003c\/span\u003e\n            \u003cspan class=\"ak-highlight-chip\"\u003e\n              \u003csvg viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 2 14 10 22 12 14 14 12 22 10 14 2 12 10 10Z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n              ARGB accents\n            \u003c\/span\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"ak-image-col ak-reveal\"\u003e\n          \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/06\/My-Sweet-Piano-5108-V5-XQ-CT-CM.avif\" alt=\"My Sweet Piano full-body themed design, top case and back panel\"\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       DUAL 8K HZ POLLING RATE\n       ============================================================ --\u003e\n  \u003csection class=\"ak-feature-module on-pink\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-module-grid reverse\"\u003e\n        \u003cdiv class=\"ak-image-col ak-reveal\"\u003e\n          \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/06\/My-Sweet-Piano-5108-V5-XQ-CT-8Kz.avif\" alt=\"8K Hz polling rate performance visual\"\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"ak-text-col ak-reveal\"\u003e\n          \u003cspan class=\"ak-eyebrow-tag\"\u003ePerformance\u003c\/span\u003e\n          \u003ch2\u003eDual 8K Hz Polling Rate\u003c\/h2\u003e\n          \u003cp\u003eFeaturing an 8,000 Hz polling rate in both wired and 2.4G modes, this keyboard reports its state up to 8 times more often per second than a standard board — delivering near-zero latency, ultra-responsive performance and precise control for gaming and typing alike.\u003c\/p\u003e\n          \u003cp class=\"ak-fine-print\"\u003e*When testing 8K polling rate with Keyboard Inspector, please ensure your computer is in Safe Mode for accurate results.\u003c\/p\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       PRO GAMING FEATURES HEADER\n       ============================================================ --\u003e\n  \u003cdiv class=\"ak-scallop to-cream\"\u003e\u003c\/div\u003e\n  \u003csection class=\"ak-gaming-header\"\u003e\n    \u003cdiv class=\"ak-container ak-reveal\"\u003e\n      \u003cspan class=\"ak-eyebrow-tag\"\u003eCompetitive Gaming\u003c\/span\u003e\n      \u003ch1\u003ePro Gaming Features\u003c\/h1\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       SNAP KEY \u0026 MOD-TAP DEMO CARDS\n       ============================================================ --\u003e\n  \u003csection class=\"ak-demo-section\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-demo-grid\"\u003e\n\n        \u003c!-- Snap Key: Off vs On, sliding dot + settle-timing bar --\u003e\n        \u003cdiv class=\"ak-demo-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-demo-visual\"\u003e\n            \u003cdiv class=\"ak-snap-compare\"\u003e\n              \u003cdiv class=\"ak-snap-col\"\u003e\n                \u003cdiv class=\"ak-snap-label\"\u003eAkko Snap Keys\u003cbr\u003eOff\u003c\/div\u003e\n                \u003cdiv class=\"ak-snap-track\"\u003e\u003cdiv class=\"ak-snap-dot off\" aria-hidden=\"true\"\u003e\u003cspan\u003e \u003c\/span\u003e\u003c\/div\u003e\u003c\/div\u003e\n                \u003cdiv class=\"ak-snap-timeline off\" aria-hidden=\"true\"\u003e\u003cspan\u003e \u003c\/span\u003e\u003c\/div\u003e\n                \u003cdiv class=\"ak-snap-keys\"\u003e\n                  \u003cdiv class=\"ak-demo-key active\"\u003eA\u003c\/div\u003e\n\u003cspan class=\"ak-key-plus\"\u003e+\u003c\/span\u003e\u003cdiv class=\"ak-demo-key active\"\u003eD\u003c\/div\u003e\n                \u003c\/div\u003e\n              \u003c\/div\u003e\n              \u003cdiv class=\"ak-snap-col\"\u003e\n                \u003cdiv class=\"ak-snap-label\"\u003eAkko Snap Keys\u003cbr\u003eOn\u003c\/div\u003e\n                \u003cdiv class=\"ak-snap-track\"\u003e\u003cdiv class=\"ak-snap-dot on\" aria-hidden=\"true\"\u003e\u003cspan\u003e \u003c\/span\u003e\u003c\/div\u003e\u003c\/div\u003e\n                \u003cdiv class=\"ak-snap-timeline on\" aria-hidden=\"true\"\u003e\u003cspan\u003e \u003c\/span\u003e\u003c\/div\u003e\n                \u003cdiv class=\"ak-snap-keys\"\u003e\n                  \u003cdiv class=\"ak-demo-key\"\u003eA\u003c\/div\u003e\n\u003cspan class=\"ak-key-plus\"\u003e+\u003c\/span\u003e\u003cdiv class=\"ak-demo-key active\"\u003eD\u003c\/div\u003e\n                \u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"ak-demo-num\"\u003e01\u003c\/div\u003e\n          \u003ch3\u003eSnap Key\u003c\/h3\u003e\n          \u003cp\u003eSnap Key is Akko's implementation of SOCD, prioritizing the most recent keypress for swift directional changes without releasing previous inputs. This ensures fluid, responsive control in FPS games, where quick reactions and precise movement are crucial.\u003c\/p\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- Mod-Tap --\u003e\n        \u003cdiv class=\"ak-demo-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-demo-visual\"\u003e\n            \u003cdiv class=\"ak-modtap-demo\"\u003e\n              \u003cdiv class=\"ak-modtap-key\"\u003eG\u003c\/div\u003e\n              \u003cdiv class=\"ak-modtap-actions\"\u003e\n                \u003cdiv class=\"ak-modtap-action\"\u003e\n\u003cdiv class=\"ak-modtap-result\"\u003eG\u003c\/div\u003e\n\u003cspan\u003eTap\u003c\/span\u003e\n\u003c\/div\u003e\n                \u003cdiv class=\"ak-modtap-action\"\u003e\n\u003cdiv class=\"ak-modtap-result\"\u003eF\u003c\/div\u003e\n\u003cspan\u003eHold\u003c\/span\u003e\n\u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"ak-demo-num\"\u003e02\u003c\/div\u003e\n          \u003ch3\u003eMod-Tap\u003c\/h3\u003e\n          \u003cp\u003eMod Tap is a design that provides convenience for gaming. It enables the creation of dedicated or dual-functional keys based on key press behavior — holding down the key for one function, and briefly pressing it for another — improving efficiency and control.\u003c\/p\u003e\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       SPECS TABLE\n       ============================================================ --\u003e\n  \u003csection class=\"ak-specs-section\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-specs-panel ak-reveal\"\u003e\n        \u003cdiv class=\"ak-specs-header\"\u003e\n          \u003cp class=\"ak-specs-label\"\u003eMy Sweet Piano 5108 V5\u003c\/p\u003e\n          \u003ch2\u003eSpecs\u003c\/h2\u003e\n          \u003cp\u003eLearn more about the 5108 V5, such as hotkeys, system commands, backlight settings and more, in the user manual.\u003c\/p\u003e\n          \u003ca class=\"ak-manual-btn\" href=\"https:\/\/file.akkogear.com\/5108_V5.pdf\" target=\"_blank\" rel=\"noopener\"\u003e\n            \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003cpath d=\"M4 5a2 2 0 0 1 2-2h11v16H6a2 2 0 0 0-2 2V5Z\"\u003e\u003c\/path\u003e\u003cpath d=\"M6 3v16\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n            User Manual\n          \u003c\/a\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"ak-specs-list\" id=\"ak-specs-list\"\u003e\n          \u003cdiv class=\"ak-specs-row\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eStructure:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eGasket Mount\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eConnection:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eBluetooth 5.0 \/ 2.4GHz \/ USB Type-C\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eBacklight:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eARGB Backlit\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eHot Swappable:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003e3-Pin \/ 5-Pin Support\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eN-Key Rollover:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eSupport\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eBattery Capacity:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003e10,000mAh\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003ePolling Rate:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003e8000Hz in wired and 2.4G mode, 125Hz in Bluetooth mode\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eMacro:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eAkko Macro V1.0\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eSwitches:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eAkko V3 Piano Pro\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eMaterials:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003ePBT Keycaps + ABS Case\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eLegends Printing:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eDye-Sublimation\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eKeycap Profile:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eCherry\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eProduct Weight:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eApproximately 1.41KG\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eDimensions:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003e440.5 × 130 × 30.1mm (excluding keycap height)\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eOperating Systems:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eWindows \/ macOS \/ iOS \/ Android\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003ePackage List:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eKeyboard×1, Manual×1, Cable×1, Receiver×1, Keycap Puller×1, Switch Puller×1, Dust Cover×1, Extra Switches\u003c\/span\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"ak-specs-toggle\"\u003e\n          \u003cbutton type=\"button\" id=\"ak-specs-toggle-btn\"\u003e\n            \u003cspan id=\"ak-specs-toggle-label\"\u003eView all\u003c\/span\u003e\n            \u003cspan class=\"ak-toggle-icon\"\u003e\n              \u003csvg viewbox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003cpath d=\"M6 9l6 6 6-6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n            \u003c\/span\u003e\n          \u003c\/button\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       ADD TO CART — JUMP CTA\n       Scrolls up to the theme's real Add to Cart button and makes that\n       button glow. See the script below for the selector list and the\n       additive, self-removing pulse class.\n       ============================================================ --\u003e\n  \u003csection class=\"ak-cta-section\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-cta-panel ak-reveal\"\u003e\n        \u003cp\u003eA 100% layout with Gasket Mount softness and full-body My Sweet Piano theming, front to back. Wired, 2.4GHz and Bluetooth 5.0 keep you connected with near-zero latency, backed by 8K Hz polling and a 10,000mAh battery.\u003c\/p\u003e\n        \u003cbutton type=\"button\" class=\"ak-cta-button\" data-scroll-to-cart\u003e\n          \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n            \u003ccircle cx=\"9\" cy=\"20\" r=\"1.3\"\u003e\u003c\/circle\u003e\u003ccircle cx=\"17\" cy=\"20\" r=\"1.3\"\u003e\u003c\/circle\u003e\u003cpath d=\"M2 3h2l2.6 12.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.6L21 7H6\"\u003e\u003c\/path\u003e\n          \u003c\/svg\u003e\n          Add to Cart\n        \u003c\/button\u003e\n        \u003cdiv class=\"ak-cta-note\"\u003e\n          \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003cpath d=\"M12 19V5M6 11l6-6 6 6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n          Takes you straight to the purchase panel above\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       FOOTER BANNER\n       ============================================================ --\u003e\n  \u003csection class=\"ak-container\"\u003e\n    \u003cdiv class=\"ak-footer-banner ak-reveal\"\u003e\n      \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/06\/My-Sweet-Piano-5108-V5-XQ-CC.avif\" alt=\"Akko My Sweet Piano 5108 V5 closing image\"\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n  \u003cp class=\"ak-footer-note\"\u003eThis product is manufactured by \u003cstrong\u003eAkko\u003c\/strong\u003e and features a \u003cstrong\u003eSanrio My Sweet Piano\u003c\/strong\u003e licensed design. Images are for illustrative purposes; actual product and packaging may differ slightly.\u003c\/p\u003e\n\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\/* ==========================================================================\n   AKKO 5108 V5 — page behaviour (vanilla JS, no dependencies)\n   1. Specs \"view all \/ view less\" toggle\n   2. Add to Cart CTA: locate the theme's real Add to Cart button, scroll it\n      to the middle of the viewport with a cubic ease-in-out animation, then\n      add ONE temporary, self-removing CSS class to it so the button itself\n      glows. Nothing outside this description is created, removed, restyled\n      or rebound.\n   3. Lightweight scroll-reveal for .ak-reveal blocks\n   ========================================================================== *\/\n(function () {\n  \"use strict\";\n\n  var reduceMotion = window.matchMedia \u0026\u0026 window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n  \/* -------------------------------------------------------------\n     1. Specs toggle\n     ------------------------------------------------------------- *\/\n  var toggleBtn = document.getElementById(\"ak-specs-toggle-btn\");\n  var toggleLabel = document.getElementById(\"ak-specs-toggle-label\");\n  if (toggleBtn) {\n    toggleBtn.addEventListener(\"click\", function () {\n      var rows = document.querySelectorAll(\"#ak-specs-list .ak-hidden, #ak-specs-list .ak-visible-extra\");\n      var expanded = toggleBtn.classList.contains(\"expanded\");\n      if (!expanded) {\n        document.querySelectorAll(\"#ak-specs-list .ak-hidden\").forEach(function (row) {\n          row.classList.remove(\"ak-hidden\");\n          row.classList.add(\"ak-visible-extra\");\n        });\n        toggleLabel.textContent = \"View less\";\n        toggleBtn.classList.add(\"expanded\");\n      } else {\n        rows.forEach(function (row) {\n          row.classList.add(\"ak-hidden\");\n          row.classList.remove(\"ak-visible-extra\");\n        });\n        toggleLabel.textContent = \"View all\";\n        toggleBtn.classList.remove(\"expanded\");\n      }\n    });\n  }\n\n  \/* -------------------------------------------------------------\n     2. Add to Cart — find target, scroll, glow\n\n     Selector list is tried top to bottom, first usable match wins.\n     The BUTTON is targeted (not its wrapper) so the glow traces the\n     pill exactly, as in the reference. Add data-atc-target to your\n     theme's add-to-cart \u003cbutton\u003e to pin it permanently.\n     ------------------------------------------------------------- *\/\n  var AKKO_ATC_SELECTORS = [\n    \"[data-atc-target]\",\n    \"button[name=\\\"add\\\"]\",\n    \"input[name=\\\"add\\\"]\",\n    \".product-form__submit\",\n    \".product-form__cart-submit\",\n    \".product-form__buttons button[type=\\\"submit\\\"]\",\n    \"#AddToCart\",\n    \"#AddToCart-product-template\",\n    \"#ProductSubmitButton\",\n    \"[data-add-to-cart-btn]\",\n    \"[data-add-to-cart]\",\n    \".add-to-cart-button\",\n    \".add-to-cart\",\n    \".btn--add-to-cart\",\n    \".ProductForm__AddToCart\",\n    \".product__add-to-cart\",\n    \"form[action*=\\\"\/cart\/add\\\"] button[type=\\\"submit\\\"]\",\n    \"form[action*=\\\"\/cart\/add\\\"] [type=\\\"submit\\\"]\"\n  ];\n\n  var PULSE_CLASS = \"ak-atc-pulse\";\n  var PULSE_MS = 4600;          \/* 3 × 1.5s animation + small buffer *\/\n  var SCROLL_MS = 1700;         \/* cubic ease-in-out duration *\/\n\n  \/* A candidate is only usable if it is our storefront's own button,\n     genuinely on-page, laid out in normal flow, and not part of a\n     fixed\/sticky buy-bar (those never need scrolling to). *\/\n  function akUsable(el) {\n    if (!el || !el.getBoundingClientRect) return false;\n    if (el.closest \u0026\u0026 el.closest(\".ak-page\")) return false;   \/\/ never our own CTA\n    var rect = el.getBoundingClientRect();\n    if (rect.width \u003c 10 || rect.height \u003c 10) return false;\n\n    var cs = window.getComputedStyle(el);\n    if (cs.display === \"none\" || cs.visibility === \"hidden\" || parseFloat(cs.opacity) === 0) return false;\n    \/* Only position:fixed is rejected — a fixed buy-bar is already on screen,\n       so scrolling to it is meaningless. position:sticky is NOT rejected:\n       most themes make the whole product info column sticky, and that column\n       holds the one real Add to Cart button we actually want. *\/\n    if (cs.position === \"fixed\") return false;\n\n    var parent = el.parentElement, hops = 0;\n    while (parent \u0026\u0026 hops \u003c 10) {\n      var ps = window.getComputedStyle(parent);\n      if (ps.position === \"fixed\") return false;\n      if (ps.display === \"none\" || ps.visibility === \"hidden\") return false;\n      parent = parent.parentElement;\n      hops++;\n    }\n    return true;\n  }\n\n  function akFindAtcTarget() {\n    for (var i = 0; i \u003c AKKO_ATC_SELECTORS.length; i++) {\n      var nodes = document.querySelectorAll(AKKO_ATC_SELECTORS[i]);\n      for (var j = 0; j \u003c nodes.length; j++) {\n        if (akUsable(nodes[j])) return nodes[j];\n      }\n    }\n    return null;\n  }\n\n  \/* Additive only: the class is appended, never replaces anything, and\n     removes itself once the animation has run. *\/\n  function akGlow(target) {\n    if (!target || !target.classList) return;\n    target.classList.remove(PULSE_CLASS);\n    void target.offsetWidth;                 \/\/ restart if clicked twice\n    target.classList.add(PULSE_CLASS);\n    window.setTimeout(function () {\n      target.classList.remove(PULSE_CLASS);\n    }, PULSE_MS);\n  }\n\n  function akEase(t) {\n    return t \u003c 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) \/ 2;\n  }\n\n  function akCenterOffset(target) {\n    var rect = target.getBoundingClientRect();\n    var scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;\n    var docHeight = Math.max(\n      document.body.scrollHeight, document.documentElement.scrollHeight,\n      document.body.offsetHeight, document.documentElement.offsetHeight\n    );\n    var maxScroll = Math.max(0, docHeight - window.innerHeight);\n    var wanted = rect.top + scrollY - (window.innerHeight \/ 2 - rect.height \/ 2);\n    return Math.max(0, Math.min(wanted, maxScroll));\n  }\n\n  function akScrollTo(target, done) {\n    var startY = window.pageYOffset || document.documentElement.scrollTop || 0;\n    var endY = akCenterOffset(target);\n\n    if (reduceMotion || Math.abs(endY - startY) \u003c 4) {\n      window.scrollTo(0, endY);\n      done();\n      return;\n    }\n\n    var t0 = null;\n    function step(ts) {\n      if (t0 === null) t0 = ts;\n      var p = Math.min((ts - t0) \/ SCROLL_MS, 1);\n      window.scrollTo(0, startY + (endY - startY) * akEase(p));\n      if (p \u003c 1) {\n        requestAnimationFrame(step);\n      } else {\n        \/* Lazy-loaded images above the fold can shift layout mid-scroll,\n           so re-measure once and correct before glowing. *\/\n        var drift = akCenterOffset(target) - (window.pageYOffset || 0);\n        if (Math.abs(drift) \u003e 20) window.scrollBy(0, drift);\n        done();\n      }\n    }\n    requestAnimationFrame(step);\n  }\n\n  var ctaButtons = document.querySelectorAll(\".ak-cta-button[data-scroll-to-cart]\");\n  ctaButtons.forEach(function (btn) {\n    btn.addEventListener(\"click\", function (e) {\n      e.preventDefault();\n      if (btn._busy) return;                 \/\/ double-trigger guard\n      btn._busy = true;\n\n      var release = function () { btn._busy = false; };\n      var run = function (target) {\n        akScrollTo(target, function () {\n          akGlow(target);\n          release();\n        });\n      };\n\n      var target = akFindAtcTarget();\n      if (target) { run(target); return; }\n\n      \/* Some themes render the form slightly after load (dynamic checkout\n         buttons, lazy sections) — retry briefly before giving up. *\/\n      var attempts = 0;\n      var retry = window.setInterval(function () {\n        attempts++;\n        var found = akFindAtcTarget();\n        if (found) {\n          window.clearInterval(retry);\n          run(found);\n        } else if (attempts \u003e= 8) {\n          window.clearInterval(retry);\n          release();\n          console.warn(\"Akko CTA: could not locate the Add to Cart button. Add data-atc-target to it.\");\n        }\n      }, 250);\n    });\n  });\n\n  \/* -------------------------------------------------------------\n     3. Gentle scroll-reveal\n     ------------------------------------------------------------- *\/\n  var revealEls = document.querySelectorAll(\".ak-reveal\");\n  if (\"IntersectionObserver\" in window \u0026\u0026 revealEls.length) {\n    var io = new IntersectionObserver(\n      function (entries) {\n        entries.forEach(function (entry) {\n          if (entry.isIntersecting) {\n            entry.target.classList.add(\"is-visible\");\n            io.unobserve(entry.target);\n          }\n        });\n      },\n      { threshold: 0.15, rootMargin: \"0px 0px -40px 0px\" }\n    );\n    revealEls.forEach(function (el) { io.observe(el); });\n  } else {\n    revealEls.forEach(function (el) { el.classList.add(\"is-visible\"); });\n  }\n})();\n\u003c\/script\u003e\n\u003c\/body\u003e","brand":"Akko","offers":[{"title":"Akko V3 Piano Pro","offer_id":48747192680605,"sku":null,"price":154.9,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0684\/6962\/0893\/files\/My-Sweet-Piano-5108-V5.png?v=1785846393","url":"https:\/\/keyartisan.net\/products\/my-sweet-piano-5108-v5-mechanical-keyboard","provider":"KeyArtisan","version":"1.0","type":"link"}