:root {
  color-scheme: dark;
  --bg: #0a0f1a;
  --surface: #141d2d;
  --surface-2: #1f2b3f;
  --text: #eef4ff;
  --muted: #9aa9bf;
  --accent: #4fe0c1;
  --blue: #3180ff;
  --purple: #8556ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}

a { color: inherit; text-decoration: none; }

.product-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 78% 8%, rgba(49, 128, 255, .20), transparent 34rem),
    radial-gradient(ellipse at 12% 42%, rgba(39, 224, 205, .08), transparent 28rem),
    var(--bg);
}

.site-header, .site-footer {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header { height: 88px; border-bottom: 1px solid rgba(150, 164, 186, .13); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 750; letter-spacing: -.03em; }
.brand img { width: 42px; height: 42px; object-fit: cover; border-radius: 12px; }
.header-link { color: var(--muted); font-size: 14px; }
.header-link:hover, .intro-link:hover { color: var(--accent); }

.hero {
  width: min(1120px, calc(100% - 40px));
  min-height: 525px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 56px;
  padding: 66px 0 82px;
}

.hero-copy { max-width: 680px; }
.eyebrow { margin: 0 0 16px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .17em; }
.hero h1 { margin: 0; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.28; letter-spacing: -.05em; word-break: keep-all; }
.hero h1 span { color: var(--accent); }
.hero-description { max-width: 530px; margin: 22px 0 28px; color: var(--muted); font-size: 17px; line-height: 1.8; word-break: keep-all; }
.solution-callout { margin: 30px 0 26px; padding: 23px 25px; border: 1px solid transparent; border-radius: 20px; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, rgba(79, 224, 193, .8), rgba(49, 128, 255, .7), rgba(133, 86, 255, .7)) border-box; }
.solution-callout .eyebrow { margin-bottom: 9px; font-size: 10px; }
.solution-callout h2 { margin: 0; font-size: clamp(23px, 3vw, 32px); line-height: 1.4; letter-spacing: -.04em; word-break: keep-all; }

.download-button {
  display: inline-flex;
  min-width: 252px;
  min-height: 70px;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border: 1px solid rgba(79, 224, 193, .55);
  border-radius: 17px;
  color: #07131d;
  background: linear-gradient(120deg, #55e6c5, #8af0d3);
  box-shadow: 0 14px 36px rgba(39, 224, 205, .16);
  transition: transform .18s ease, box-shadow .18s ease;
}
.download-button:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(39, 224, 205, .25); }
.download-button strong, .download-button small { display: block; }
.download-button strong { font-size: 16px; }
.download-button small { margin-top: 3px; font-size: 11px; opacity: .75; }
.download-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: rgba(7, 19, 29, .10); font-size: 25px; font-weight: 700; }
.download-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; }

.hero-art { position: relative; display: grid; justify-items: center; padding: 25px; }
.hero-glow { position: absolute; width: 84%; aspect-ratio: 1; border-radius: 50%; background: rgba(49, 128, 255, .18); filter: blur(50px); }
.hero-art img { position: relative; width: min(100%, 390px); aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(119, 148, 200, .38); border-radius: 34px; box-shadow: 0 32px 100px rgba(0, 0, 0, .42); }
.art-caption { position: relative; display: flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--text); font-size: 14px; font-weight: 700; }
.art-caption span:last-child { color: var(--muted); font-weight: 500; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }

.features { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 25px 0 82px; }
.core-benefits { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 4px 0 56px; }
.core-benefits-heading { margin-bottom: 22px; text-align: center; }
.core-benefits-heading .eyebrow { margin-bottom: 8px; letter-spacing: 0; }
.core-benefits-heading h2 { margin: 0; font-size: clamp(26px, 3.5vw, 36px); letter-spacing: -.04em; }
.benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.benefit-card { padding: 25px; border: 1px solid rgba(125, 151, 193, .2); border-radius: 20px; background: linear-gradient(150deg, rgba(31, 43, 63, .94), rgba(20, 29, 45, .92)); }
.benefit-card h3 { margin: 16px 0 10px; font-size: 21px; line-height: 1.45; letter-spacing: -.035em; word-break: keep-all; }
.benefit-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; word-break: keep-all; }
.live-demos { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 8px 0 70px; }
.live-demos .section-heading { margin-bottom: 25px; }
.demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.demo-card { min-width: 0; padding: 22px; border: 1px solid rgba(125, 151, 193, .2); border-radius: 22px; background: linear-gradient(155deg, rgba(24, 35, 52, .98), rgba(13, 20, 32, .98)); box-shadow: 0 22px 60px rgba(0, 0, 0, .16); }
.demo-card-heading { min-height: 120px; }
.demo-number { color: var(--accent); font: 800 11px/1 var(--font-geist-mono, monospace); letter-spacing: .15em; }
.demo-card-heading h3 { margin: 12px 0 7px; font-size: 21px; letter-spacing: -.035em; }
.demo-card-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; word-break: keep-all; }
.demo-screen { padding: 12px; border: 1px solid rgba(128, 151, 184, .26); border-radius: 17px; background: #080e17; box-shadow: inset 0 0 30px rgba(37, 64, 91, .18); }
.screen-toolbar { display: flex; align-items: center; gap: 9px; min-height: 25px; margin-bottom: 10px; color: #cfdae7; font-size: 10px; font-weight: 700; }
.screen-toolbar-end { margin-left: auto; color: #718197; font: 700 9px/1 var(--font-geist-mono, monospace); letter-spacing: .08em; }
.live-label { display: inline-flex; align-items: center; gap: 5px; color: #ff7381; font: 800 9px/1 var(--font-geist-mono, monospace); letter-spacing: .1em; }
.live-label i { width: 6px; height: 6px; border-radius: 50%; background: #ff5366; box-shadow: 0 0 8px rgba(255, 83, 102, .85); }
.layout-controls { display: flex; gap: 6px; margin-bottom: 9px; }
.layout-controls button { flex: 1; min-height: 32px; border: 1px solid rgba(143, 160, 185, .24); border-radius: 8px; color: #a6b4c7; background: #121b2a; font: 700 10px/1 system-ui, sans-serif; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.layout-controls button[aria-pressed="true"] { border-color: rgba(79, 224, 193, .7); color: #06151a; background: var(--accent); }
.layout-controls button:focus-visible, .replay-button:focus-visible { outline: 2px solid #a8ffe9; outline-offset: 3px; }
.split-photo-stage { position: relative; width: 100%; aspect-ratio: 380 / 287; margin: 0; overflow: hidden; border: 1px solid rgba(129, 159, 189, .23); border-radius: 8px; background: #080e17; }
.split-photo-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.split-photo-stage img.is-active { opacity: 1; }
.split-photo-stage.is-changing img.is-active { animation: split-layout-change .55s cubic-bezier(.2,.7,.2,1); }
@keyframes split-layout-change {
  0% { opacity: .45; transform: scale(.97); filter: blur(1px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.swap-tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid rgba(129, 159, 189, .23); border-radius: 6px; background: #1d2b38; }
.camera-label { position: absolute; z-index: 2; top: 4px; left: 5px; max-width: calc(100% - 10px); overflow: hidden; color: rgba(245, 250, 255, .88); font: 700 8px/1.2 var(--font-geist-mono, monospace); text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 4px rgba(0, 0, 0, .9); }
.camera-scene { position: absolute; inset: 0; display: block; opacity: .88; background-image: linear-gradient(155deg, transparent 51%, rgba(6, 14, 20, .65) 52%), repeating-linear-gradient(0deg, rgba(207, 233, 224, .08) 0 1px, transparent 1px 13px), linear-gradient(135deg, #385463, #182733 56%, #68746d); }
.camera-scene::before { position: absolute; inset: 32% 8% 0; content: ""; opacity: .55; background: linear-gradient(180deg, transparent 0 45%, rgba(7, 14, 19, .55) 46%), repeating-linear-gradient(90deg, transparent 0 18%, rgba(198, 219, 207, .16) 19% 20%, transparent 21% 38%); }
.scene-two { filter: hue-rotate(24deg) brightness(.84); background-position: 14px 0; }
.scene-three { filter: hue-rotate(68deg) brightness(.9); background-position: -11px 5px; }
.scene-four { filter: hue-rotate(120deg) brightness(.85); background-position: 20px -5px; }
.scene-five { filter: hue-rotate(185deg) brightness(.9); background-position: -20px 6px; }
.scene-six { filter: hue-rotate(225deg) brightness(.82); background-position: 5px -8px; }
.demo-caption { min-height: 30px; margin: 10px 1px 0; color: #8293a8; font-size: 10px; line-height: 1.5; }
.swap-grid { --swap-gap: 7px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--swap-gap); width: 100%; aspect-ratio: 380 / 287; }
.swap-tile { border-radius: 7px; background-image: url("assets/layout-9-swap.png"); background-size: 300% 300%; transition: transform .78s cubic-bezier(.2,.82,.25,1), border-color .25s ease, box-shadow .25s ease, filter .25s ease; }
.crop-1 { background-position: 0 0; }
.crop-2 { background-position: 50% 0; }
.crop-3 { background-position: 100% 0; }
.crop-4 { background-position: 0 50%; }
.crop-5 { background-position: 50% 50%; }
.crop-6 { background-position: 100% 50%; }
.crop-7 { background-position: 0 100%; }
.crop-8 { background-position: 50% 100%; }
.crop-9 { background-position: 100% 100%; }
.swap-tile[data-slot="first"] { z-index: 1; }
.swap-grid.is-holding .swap-tile[data-slot="first"] { z-index: 3; transform: scale(1.045); filter: brightness(1.18); }
.swap-grid.is-playing .swap-tile[data-slot="first"] { animation: channel-one-outline 3.25s ease-in-out 1 both; }
.swap-grid.is-playing .swap-tile[data-slot="last"] { animation: channel-five-outline 3.25s ease-in-out 1 both; }
.swap-grid.is-swapping .swap-tile[data-slot="first"] { z-index: 4; transform: translate(calc(100% + var(--swap-gap)), calc(100% + var(--swap-gap))) scale(1.025); }
.swap-grid.is-swapping .swap-tile[data-slot="last"] { z-index: 3; transform: translate(calc(-100% - var(--swap-gap)), calc(-100% - var(--swap-gap))) scale(1.025); }
.swap-grid.is-settled .swap-tile[data-slot="first"] { z-index: 4; transform: translate(calc(100% + var(--swap-gap)), calc(100% + var(--swap-gap))); }
.swap-grid.is-settled .swap-tile[data-slot="last"] { z-index: 3; transform: translate(calc(-100% - var(--swap-gap)), calc(-100% - var(--swap-gap))); }
.touch-indicator { position: absolute; z-index: 5; top: 4%; left: 5%; width: 27px; height: 37px; opacity: 0; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .65)); pointer-events: none; }
.swap-grid.is-playing .touch-indicator { animation: touch-and-swap 3.25s ease-in-out 1 both; }
/* The hand and channel outlines fade together at 2250 ms; the swapped layout stays for one second. */
@keyframes channel-one-outline {
  0%, 56.3% { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79, 224, 193, .38), 0 0 24px rgba(79, 224, 193, .24); }
  69.2%, 100% { border-color: rgba(129, 159, 189, .23); box-shadow: none; }
}
@keyframes channel-five-outline {
  0%, 56.3% { border-color: rgba(79, 224, 193, .75); box-shadow: 0 0 0 1px rgba(79, 224, 193, .25); }
  69.2%, 100% { border-color: rgba(129, 159, 189, .23); box-shadow: none; }
}
@keyframes touch-and-swap {
  0%, 32.2% { opacity: 1; left: calc(16.6667% - 8px); top: calc(16.6667% - 5px); transform: scale(1); }
  32.3% { opacity: 1; left: calc(16.6667% - 8px); top: calc(16.6667% - 5px); transform: scale(.82); animation-timing-function: cubic-bezier(.2,.82,.25,1); }
  56.3% { opacity: 1; left: calc(50% - 8px); top: calc(50% - 5px); transform: scale(.82); }
  69.2%, 100% { opacity: 0; left: calc(50% - 8px); top: calc(50% - 5px); transform: scale(1); }
}
.swap-demo-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 39px; margin-top: 8px; }
.swap-demo-footer p { margin: 0; color: #91a1b5; font-size: 10px; line-height: 1.5; }
.replay-button { flex: 0 0 auto; min-height: 30px; padding: 0 10px; border: 1px solid rgba(79, 224, 193, .3); border-radius: 8px; color: var(--accent); background: rgba(79, 224, 193, .07); font: 700 10px/1 system-ui, sans-serif; cursor: pointer; }
.replay-button span { margin-left: 3px; font-size: 13px; }
.section-heading { margin-bottom: 28px; text-align: center; }
.section-heading .eyebrow { margin-bottom: 10px; }
.section-heading h2, .download-panel h2, .compatibility h2 { margin: 0; letter-spacing: -.04em; }
.section-heading h2 { font-size: clamp(28px, 4vw, 38px); }
.section-heading > p:last-child { margin: 10px 0 0; color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.feature-card { min-height: 205px; padding: 23px; border: 1px solid rgba(125, 151, 193, .18); border-radius: 20px; background: linear-gradient(150deg, rgba(31, 43, 63, .94), rgba(20, 29, 45, .92)); }
.feature-number { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.feature-card h3 { margin: 25px 0 9px; font-size: 18px; letter-spacing: -.03em; }
.feature-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; word-break: keep-all; }

.compatibility, .download-panel { width: min(1120px, calc(100% - 40px)); margin: 0 auto 22px; border-radius: 22px; }
.compatibility { display: flex; align-items: flex-start; gap: 18px; padding: 25px 28px; border: 1px solid rgba(79, 224, 193, .22); background: rgba(20, 50, 61, .72); }
.compatibility-mark { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 12px; color: #07131d; background: var(--accent); font-weight: 900; }
.compatibility h2 { margin: 1px 0 7px; font-size: 18px; }
.compatibility p { margin: 0; color: #bdd0de; font-size: 13px; line-height: 1.75; word-break: keep-all; }
.download-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 42px; margin-bottom: 70px; padding: 28px 32px; border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, #27e0cd, #3180ff, #8556ff) border-box; border-width: 2px; }
.download-panel .eyebrow { margin-bottom: 9px; }
.download-panel h2 { font-size: 24px; }
.download-panel p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.download-button-compact { min-width: 210px; min-height: 60px; }
.site-footer { min-height: 76px; border-top: 1px solid rgba(150, 164, 186, .13); color: var(--muted); font-size: 12px; }

/* Login-page preview mirrors the existing page and adds the second link. */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 18px 12px; color-scheme: light; color: #111827; background: #edf2f5; }
.login-card { width: min(100%, 390px); padding: 37px 36px 27px; border: 1px solid #e4eaf0; border-radius: 2px; background: #fff; box-shadow: 0 18px 50px rgba(19, 38, 61, .08); }
.login-brand { margin-bottom: 37px; color: #101827; font-size: 13px; font-weight: 900; letter-spacing: .2em; }
.login-card .eyebrow { margin-bottom: 24px; color: #58b69f; font-size: 10px; letter-spacing: .16em; }
.login-card h1 { margin: 0 0 34px; font-size: 31px; letter-spacing: -.06em; }
.login-form label { display: block; margin: 0 0 9px; color: #5b6573; font-size: 12px; }
.login-form input { width: 100%; height: 42px; margin-bottom: 19px; border: 1px solid #cfd6de; border-radius: 4px; background: #fff; font: inherit; }
.login-submit { width: 100%; height: 44px; margin-top: 2px; border: 0; border-radius: 4px; color: #fff; background: #08111f; font: inherit; font-size: 14px; font-weight: 700; }
.intro-links { display: grid; gap: 6px; margin-top: 17px; text-align: center; }
.intro-link { display: block; padding: 8px; color: #929aa5; font-size: 12px; }
.intro-link-new { color: #236acb; font-weight: 750; }

@media (max-width: 820px) {
  .hero { min-height: 0; grid-template-columns: 1fr; gap: 32px; padding: 42px 0 48px; }
  .hero-art { grid-row: 1; padding: 0; }
  .hero-art img { width: min(74vw, 330px); border-radius: 27px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { gap: 13px; }
  .demo-grid { grid-template-columns: 1fr; gap: 14px; }
  .demo-card-heading { min-height: 0; margin-bottom: 17px; }
  .features { padding-bottom: 58px; }
}

@media (max-width: 520px) {
  .site-header, .site-footer, .hero, .features, .core-benefits, .live-demos, .compatibility, .download-panel { width: min(100% - 30px, 1120px); }
  .site-header { height: 72px; }
  .brand { gap: 8px; font-size: 14px; }
  .brand img { width: 36px; height: 36px; border-radius: 10px; }
  .header-link { font-size: 12px; }
  .hero { gap: 27px; padding: 29px 0 36px; }
  .hero-art img { width: min(74vw, 300px); border-radius: 24px; }
  .art-caption { margin-top: 14px; font-size: 14px; }
  .hero-copy .eyebrow { margin-bottom: 12px; font-size: 10px; }
  .hero h1 { font-size: clamp(29px, 8.4vw, 37px); line-height: 1.36; letter-spacing: -.045em; }
  .hero-description { margin: 17px 0 22px; font-size: 15px; line-height: 1.85; }
  .solution-callout { margin: 25px 0 22px; padding: 20px 18px; border-radius: 17px; }
  .solution-callout h2 { font-size: 24px; line-height: 1.45; }
  .download-button { min-width: 100%; }
  .core-benefits { padding: 5px 0 43px; }
  .core-benefits-heading { margin-bottom: 17px; text-align: left; }
  .core-benefits-heading h2 { font-size: 26px; }
  .benefit-grid { grid-template-columns: 1fr; gap: 11px; }
  .benefit-card { padding: 21px; border-radius: 17px; }
  .benefit-card h3 { margin: 14px 0 9px; font-size: 19px; }
  .benefit-card p { font-size: 14px; line-height: 1.9; }
  .live-demos { padding: 3px 0 48px; }
  .live-demos .section-heading { margin-bottom: 18px; text-align: left; }
  .live-demos .section-heading h2 { font-size: 26px; line-height: 1.35; }
  .live-demos .section-heading > p:last-child { font-size: 13px; line-height: 1.7; }
  .demo-card { padding: 17px; border-radius: 18px; }
  .demo-card-heading { margin-bottom: 14px; }
  .demo-card-heading h3 { margin: 9px 0 5px; font-size: 19px; }
  .demo-card-heading p { font-size: 12px; }
  .demo-screen { padding: 10px; border-radius: 14px; }
  .screen-toolbar { min-height: 22px; margin-bottom: 8px; }
  .layout-controls button { min-height: 34px; }
  .split-photo-stage, .swap-grid { aspect-ratio: 380 / 287; }
  .camera-label { top: 3px; left: 3px; max-width: calc(100% - 6px); font-size: 7px; }
  .demo-caption { font-size: 9px; }
  .swap-grid { --swap-gap: 5px; gap: var(--swap-gap); }
  .touch-indicator { width: 24px; height: 33px; }
  .swap-demo-footer { align-items: flex-start; }
  .swap-demo-footer p { font-size: 9px; }
  .replay-button { min-height: 32px; padding: 0 8px; }
  .feature-grid { grid-template-columns: 1fr; gap: 11px; }
  .feature-card { min-height: 0; padding: 20px; }
  .feature-card h3 { margin-top: 17px; }
  .compatibility { padding: 20px; }
  .download-panel { align-items: stretch; flex-direction: column; padding: 23px 20px; }
  .download-button-compact { min-width: 100%; }
  .site-footer { min-height: 65px; font-size: 11px; }
  .login-card { padding: 31px 25px 23px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Live-view guides extend the existing dark, mint-accented product page. */
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
.header-nav { display: flex; flex-wrap: wrap; gap: 22px; color: var(--muted); font-size: 14px; }
.header-nav a:hover { color: var(--accent); }
.header-nav a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.guide-interaction-note { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.demo-grid { align-items: start; }
.demo-card-heading { min-height: 122px; }
.demo-number, .feature-number { font-size: 14px; }
.demo-card-heading p, .benefit-card p, .feature-card p, .compatibility p { font-size: 16px; }
.screen-toolbar { font-size: 14px; flex-wrap: wrap; }
.screen-toolbar-end, .live-label { font-size: 12px; }
.layout-controls button { font-size: 14px; min-height: 40px; }
.demo-caption, .swap-demo-footer p, .guide-demo-footer p { color: #adbed2; font-size: 14px; line-height: 1.7; }
.replay-button { min-height: 40px; font-size: 14px; padding: 8px 12px; }
.guide-stage { position: relative; isolation: isolate; aspect-ratio: 1.18; overflow: hidden; border-radius: 10px; border: 1px solid #2c3c51; background: #080e17; }
.guide-camera-image { width: 100%; height: calc(100% - 68px); object-fit: cover; opacity: .75; transition: opacity .35s; }
.app-action-row { position: absolute; bottom: 0; inset-inline: 0; display: grid; grid-template-columns: .85fr 1.15fr 1fr; gap: 7px; align-items: center; min-height: 68px; padding: 10px 9px; background: #101827; font-size: 14px; font-weight: 700; text-align: center; perspective: 650px; }
.app-action-row > span { display: grid; align-items: center; min-height: 44px; padding: 5px 3px; border: 1px solid #3c4b61; border-radius: 9px; color: #c5d2e4; background: #202c40; }
.app-action-row .demo-action { border-color: var(--accent); color: #b9ffeb; box-shadow: 0 0 0 2px rgba(79,224,193,.12); }
.demo-action.flip-vertical { animation: guide-flip-vertical .65s ease both; }
.demo-action.flip-horizontal { animation: guide-flip-horizontal .65s ease both; }
@keyframes guide-flip-vertical { 0% { transform: rotateX(0); } 48% { transform: rotateX(-85deg); } 52% { transform: rotateX(85deg); } 100% { transform: rotateX(0); } }
@keyframes guide-flip-horizontal { 0% { transform: rotateY(0); } 48% { transform: rotateY(-85deg); } 52% { transform: rotateY(85deg); } 100% { transform: rotateY(0); } }
.gesture-hint { position: absolute; z-index: 3; bottom: 102px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); padding: 9px 12px; border: 1px solid rgba(79,224,193,.38); border-radius: 9px; background: rgba(8,22,32,.94); color: #b9ffeb; font-size: 14px; text-align: center; }
.gesture-pointer { position: absolute; z-index: 5; bottom: -10px; width: 38px; height: 46px; opacity: 0; transform-origin: 30% 12%; filter: drop-shadow(0 3px 6px rgba(0,0,0,.8)); pointer-events: none; }
.pointer-mic { left: calc(47% - 11px); }
.pointer-service { left: calc(82% - 11px); }
.guide-card[data-phase="drag"] .gesture-pointer { animation: guide-swipe-vertical 1.15s ease-in-out both; }
.guide-card[data-guide-demo="info"][data-phase="drag"] .gesture-pointer { animation-name: guide-swipe-horizontal; }
.guide-card[data-phase="flip"] .gesture-pointer { animation: guide-hand-lift .4s ease both; }
.guide-card[data-guide-demo="info"][data-phase="flip"] .gesture-pointer { animation-name: guide-hand-lift-horizontal; }
.guide-card[data-phase="press"] .gesture-pointer { animation: guide-press .5s ease both; }
.guide-card[data-phase="hold"] .gesture-pointer { opacity: 1; transform: scale(.87); }
.guide-card[data-phase="release"] .gesture-pointer { animation: guide-release .5s ease both; }
.guide-card[data-phase="press"] .demo-action, .guide-card[data-phase="hold"] .demo-action { box-shadow: inset 0 3px 7px rgba(0,0,0,.35), 0 0 0 3px rgba(79,224,193,.2); }
@keyframes guide-swipe-vertical { 0% { transform: translateY(0); opacity: 0; } 15%,30% { transform: translateY(0) scale(.88); opacity: 1; } 85%,100% { transform: translateY(-54px) scale(.88); opacity: 1; } }
@keyframes guide-swipe-horizontal { 0% { transform: translateX(0); opacity: 0; } 15%,30% { transform: translateX(0) scale(.88); opacity: 1; } 85%,100% { transform: translateX(-54px) scale(.88); opacity: 1; } }
@keyframes guide-hand-lift { from { transform: translateY(-54px) scale(.88); opacity: 1; } to { transform: translateY(-62px); opacity: 0; } }
@keyframes guide-hand-lift-horizontal { from { transform: translateX(-54px) scale(.88); opacity: 1; } to { transform: translateX(-60px) translateY(-8px); opacity: 0; } }
@keyframes guide-press { 0% { transform: translateY(14px); opacity: 0; } 30% { transform: translateY(0); opacity: 1; } 100% { transform: scale(.87); opacity: 1; } }
@keyframes guide-release { from { transform: scale(.87); opacity: 1; } to { transform: translateY(14px); opacity: 0; } }
.voice-feedback { position: absolute; top: 29%; left: 50%; transform: translate(-50%,-50%) scale(.95); display: grid; justify-items: center; gap: 12px; width: max-content; max-width: 92%; padding: 18px 24px; border: 1px solid #4fe0c1; border-radius: 13px; background: rgba(8,22,32,.95); opacity: 0; transition: opacity .35s, transform .35s; font-size: 14px; color: #b9ffeb; }
.voice-bars { height: 38px; display: flex; align-items: center; gap: 6px; }
.voice-bars i { width: 5px; height: 14px; border-radius: 3px; background: var(--accent); }
.guide-card[data-guide-demo="mic"][data-step="2"] .voice-feedback { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.guide-card[data-guide-demo="mic"][data-step="2"] .voice-bars i { animation: voice-wave .75s ease-in-out infinite alternate; }
.voice-bars i:nth-child(2n) { animation-delay: -.4s !important; }
.voice-bars i:nth-child(3n) { animation-delay: -.2s !important; }
@keyframes voice-wave { to { height: 36px; } }
.guide-card[data-guide-demo="mic"][data-step="2"] .demo-action { color: #07131d; background: var(--accent); }
.remote-demo-panel { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: #0a111d; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .4s, transform .4s; }
.remote-demo-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px; font-size: 14px; color: #b9ffeb; }
.remote-demo-title span + span { color: var(--muted); font-size: 12px; }
.remote-capture-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: auto 0; overflow: hidden; }
.remote-capture-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 49%; }
.remote-demo-menu { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 10px; background: #101827; font-size: 14px; text-align: center; }
.remote-demo-menu span { padding: 11px 4px; border: 1px solid #435168; border-radius: 8px; }
.guide-card[data-guide-demo="remote"][data-step="2"] .remote-demo-panel { opacity: 1; transform: none; }
.guide-card[data-guide-demo="remote"][data-step="2"] .remote-demo-menu span:first-child { border-color: var(--accent); color: var(--accent); }
.info-demo-panel { position: absolute; z-index: 6; inset: 14px 22px; overflow: auto; padding: 16px; border: 1px solid var(--accent); border-radius: 15px; background: #141d2d; box-shadow: 0 15px 40px rgba(0,0,0,.55); opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s; pointer-events: none; }
.info-demo-panel > p { margin: 0 0 6px; font-size: 12px; color: var(--accent); }
.info-demo-panel h4 { font-size: 18px; margin: 0 0 12px; }
.info-demo-panel dl { margin: 0; padding: 6px 12px; background: #1c2a3e; border-radius: 9px; }
.info-demo-panel dl div { display: grid; grid-template-columns: 70px 1fr; gap: 7px; padding: 7px 0; font-size: 14px; }
.info-demo-panel dt { color: #b1c0d4; }
.info-demo-panel dd { margin: 0; overflow-wrap: anywhere; }
.info-demo-confirm { display: block; margin-top: 12px; padding: 10px; border-radius: 8px; background: #233249; text-align: center; font-size: 14px; }
.guide-card[data-guide-demo="info"][data-step="2"] .info-demo-panel { opacity: 1; transform: none; }
.guide-demo-footer { display: flex; justify-content: space-between; align-items: start; gap: 10px; min-height: 65px; margin-top: 12px; }
.guide-demo-footer p { margin: 0; }
.guide-demo-footer .replay-button { flex: 0 0 auto; }
.guide-steps { display: grid; gap: 8px; padding: 0; margin: 20px 0 0; list-style: none; }
.guide-steps button { display: flex; gap: 12px; width: 100%; padding: 14px 12px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #b1c0d4; font: inherit; font-size: 16px; line-height: 1.7; text-align: left; cursor: pointer; transition: background .3s, border-color .3s; word-break: keep-all; overflow-wrap: anywhere; }
.guide-steps button > span:first-child { display: grid; flex: 0 0 26px; height: 26px; margin-top: 2px; place-items: center; border: 1px solid #415069; border-radius: 50%; font-size: 14px; line-height: 1; }
.guide-steps strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 16px; }
.guide-steps button[aria-current="step"] { border-color: rgba(79,224,193,.28); background: rgba(79,224,193,.07); }
.guide-steps button[aria-current="step"] > span:first-child { background: var(--accent); color: #07131d; border-color: var(--accent); }
.guide-steps button:hover { background: rgba(79,224,193,.09); }
.guide-note { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid #2b384c; color: #a6b8ce; font-size: 14px; line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; }
.guide-card-wide { grid-column: 1 / -1; }
.guide-card-wide .demo-card-heading { min-height: 0; margin-bottom: 24px; }
.wide-guide-content { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.wide-guide-content .guide-steps { margin-top: 0; }
.live-demos.is-paused *, .demo-card.is-suspended * { animation-play-state: paused !important; }
.download-note { font-size: 14px; line-height: 1.8; }
.download-button small { font-size: 12px; }
.hero-description { font-size: 16px; }
@media (max-width: 820px) {
  .demo-card-heading { min-height: 0; }
  .wide-guide-content { grid-template-columns: 1fr; gap: 0; }
  .wide-guide-content .guide-steps { margin-top: 20px; }
  .guide-stage { aspect-ratio: 1.35; }
}
@media (max-width: 520px) {
  .header-nav { gap: 12px; font-size: 14px; }
  .brand { font-size: 14px; }
  .brand img { width: 30px; height: 30px; }
  .demo-card-heading p, .live-demos .section-heading > p:last-child, .benefit-card p { font-size: 16px; }
  .guide-stage { aspect-ratio: 1; }
  .app-action-row { gap: 5px; padding-inline: 5px; font-size: 12px; }
  .gesture-hint { font-size: 14px; }
  .screen-toolbar-end { margin-left: 0; }
  .guide-demo-footer { min-height: 85px; }
  .guide-steps button { padding: 12px 8px; gap: 9px; }
  .info-demo-panel { inset: 8px; padding: 12px; }
  .info-stage { min-height: 365px; aspect-ratio: .76; }
  .info-demo-panel dl div { padding: 5px 0; }
  .demo-caption, .swap-demo-footer p { font-size: 14px; }
  .swap-demo-footer { flex-wrap: wrap; }
  .feature-card p, .compatibility p { font-size: 16px; }
}