/* Product storytelling. Content stays readable before JS and without motion. */
.sc-experience, .sc-frontdesk, .sc-media-dialog { --ex-ink:#171716; --ex-paper:#f6f6f2; --ex-line:#dcdcd5; --ex-muted:#61615b; color:var(--ex-ink); font-family:Inter,'Noto Sans TC','Noto Sans Thai',sans-serif; }
.sc-experience *, .sc-frontdesk *, .sc-media-dialog * { box-sizing:border-box; }
.sc-experience { padding:88px 0; background:#fff; scroll-margin-top:100px; }
.sc-experience [hidden], .sc-media-dialog [hidden], .sc-frontdesk [hidden] { display:none!important; }
.sc-experience .container { max-width:1280px; }
.sc-experience-header { display:flex; gap:40px; justify-content:space-between; align-items:end; margin-bottom:34px; }
.sc-experience-kicker { display:block; font-size:12px; font-weight:600; letter-spacing:.09em; margin-bottom:18px; color:var(--ex-muted); }
.sc-experience h2 { max-width:750px; font-size:clamp(30px,3.4vw,50px); line-height:1.22; font-weight:550; letter-spacing:-.045em; margin:0; text-wrap:balance; }
.sc-experience-header p { max-width:340px; margin:0; font-size:15px; line-height:1.8; color:var(--ex-muted); }
.sc-scene-nav { display:flex; border-bottom:1px solid var(--ex-line); gap:32px; margin-bottom:40px; }
.sc-scene-nav button { position:relative; min-height:62px; padding:14px 0; border:0; background:none; color:var(--ex-muted); text-align:left; font-family:inherit; font-weight:600; font-size:16px; line-height:1.5; cursor:pointer; }
.sc-scene-nav button[aria-selected=true] { color:var(--ex-ink); }
.sc-scene-nav button[aria-selected=true]::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:3px; background:var(--ex-ink); }
.sc-scene-nav button span { margin-right:10px; font-size:12px; font-weight:400; }
.sc-scene-panel { scroll-margin-top:110px; }
.sc-scene-panel + .sc-scene-panel { margin-top:60px; }
.sc-experience.is-enhanced .sc-scene-panel { margin-top:0; }
.sc-scene-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:64px; align-items:center; }
.sc-scene-copy h3, .sc-frontdesk h3 { font-size:clamp(26px,2.6vw,38px); line-height:1.3; letter-spacing:-.035em; font-weight:550; margin:12px 0 18px; text-wrap:balance; }
.sc-scene-copy > p, .sc-frontdesk-copy > p { font-size:16px; line-height:1.85; color:var(--ex-muted); max-width:520px; margin:0 0 22px; }
.sc-scene-meta { font-size:13px; line-height:1.6; color:var(--ex-muted); }
.sc-feature-picker { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:24px 0; }
.sc-feature-picker button, .sc-frontdesk-topics button { padding:12px 16px; min-height:46px; border:1px solid var(--ex-line); border-radius:6px; background:transparent; color:var(--ex-muted); text-align:left; cursor:pointer; font:inherit; font-size:14px; line-height:1.5; transition:background-color .18s,border-color .18s; }
.sc-feature-picker button[aria-pressed=true], .sc-frontdesk-topics button[aria-pressed=true] { color:var(--ex-ink); background:#f1f1eb; border-color:#6d6d65; }
.sc-feature-description { min-height:3.7em; font-size:15px!important; }
.sc-ex-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:24px; }
.sc-ex-link { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 18px; border:1px solid var(--ex-line); border-radius:6px; font-size:14px; font-weight:550; line-height:1.5; text-decoration:none!important; color:var(--ex-ink)!important; background:transparent; cursor:pointer; gap:9px; }
.sc-ex-link--dark { background:var(--ex-ink); border-color:var(--ex-ink); color:white!important; }
.sc-ex-link:hover { border-color:var(--ex-ink); background:#eaeae4; }
.sc-ex-link--dark:hover { background:#343430; color:#fff!important; }
.sc-device-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:650px; background:#eeeee8; border-radius:12px; padding:30px 20px 18px; overflow:hidden; }
.sc-device-button { display:block; padding:0; background:none; border:0; cursor:zoom-in!important; max-width:100%; }
.sc-device-phone { width:268px; max-width:100%; border:7px solid #262624; border-radius:34px; background:#fff; overflow:hidden; box-shadow:0 0 0 1px #8d8d86,0 18px 36px #17171620; }
.sc-device-phone img { width:100%; height:548px; object-fit:contain; object-position:top; display:block; background:#fff; }
.sc-device-caption { display:flex; justify-content:center; align-items:center; gap:10px; font-size:12px; color:var(--ex-muted); margin-top:20px; line-height:1.6; }
.sc-device-caption svg { width:16px; height:16px; }
.sc-frontdesk { padding:0; }
.sc-frontdesk-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); gap:48px; align-items:center; }
.sc-frontdesk-topics { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; }
.sc-frontdesk-story { border-left:2px solid var(--ex-line); padding-left:18px; margin-top:24px; }
.sc-frontdesk-story small { font-size:12px; color:var(--ex-muted); }
.sc-frontdesk-story p { font-size:16px; line-height:1.7; margin:6px 0 18px; color:var(--ex-ink); }
.sc-tablet-stage { padding:44px 26px 22px; background:#eeeee8; border-radius:12px; }
.sc-device-tablet { border:10px solid #242425; border-radius:25px; overflow:hidden; background:#10131d; box-shadow:0 0 0 1px #898982,0 18px 30px #1717161a; }
.sc-device-tablet img { display:block; width:100%; height:auto; aspect-ratio:1194 / 834; object-fit:contain; }
.sc-frontdesk-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:30px 0 0; padding:0; list-style:none; }
.sc-frontdesk-steps li { border-top:1px solid var(--ex-line); padding-top:15px; font-size:14px; line-height:1.7; color:var(--ex-muted); }
.sc-frontdesk-steps b { display:block; color:var(--ex-ink); margin-bottom:5px; font-weight:550; }
.sc-ex-note { font-size:12px!important; line-height:1.7!important; color:var(--ex-muted); margin:16px 0 0; }
.sc-film-teaser { display:block; width:100%; padding:0; border:0; border-radius:12px; background:#e8e7e1; overflow:hidden; color:#171716; text-align:left; cursor:pointer; }
.sc-film-teaser img { width:100%; height:auto; display:block; aspect-ratio:16 / 9; object-fit:contain; }
.sc-film-bar { display:flex; align-items:center; gap:16px; padding:20px 24px; background:#eae9e3; }
.sc-film-play { width:48px; height:48px; border:1px solid #9c9c94; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background-color .18s; }
.sc-film-teaser:hover .sc-film-play { background:white; }
.sc-film-bar strong { display:block; font-size:15px; font-weight:550; }
.sc-film-bar small { display:block; font-size:12px; line-height:1.6; margin-top:4px; color:#61615b; }
.sc-film-bar > span:last-child { margin-left:auto; font-size:12px; }
.sc-media-dialog { position:fixed; inset:0; padding:0; width:calc(100% - 48px); max-width:1440px; max-height:calc(100dvh - 48px); margin:auto; border:1px solid #dcdcd5; border-radius:12px; background:var(--ex-paper); box-shadow:0 20px 100px #0006; overflow:hidden; }
.sc-media-dialog::backdrop { background:#111c; }
.sc-media-toolbar { display:flex; gap:12px; justify-content:space-between; align-items:center; padding:12px 20px; background:var(--ex-paper); border-bottom:1px solid var(--ex-line); }
.sc-media-toolbar h2 { font-size:16px; line-height:1.5; font-weight:550; margin:0; }
.sc-media-tools { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.sc-media-tools button, .sc-media-tools select { min-height:44px; padding:8px 12px; border:1px solid var(--ex-line); border-radius:5px; background:transparent; color:var(--ex-ink); font:inherit; font-size:13px; cursor:pointer; }
.sc-media-viewport { overflow:auto; max-height:calc(100dvh - 166px); padding:20px; overscroll-behavior:contain; text-align:center; }
.sc-media-viewport img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 206px); object-fit:contain; margin:auto; }
.sc-media-viewport.is-zoomed img { max-height:none; max-width:none; width:var(--media-width); }
.sc-media-viewport video { display:block; width:100%; height:auto; max-height:calc(100dvh - 206px); background:#101110; margin:auto; }
.sc-media-error { font-size:14px; line-height:1.7; margin:12px; }
.sc-media-fallback { color:var(--ex-ink); text-decoration:underline; }
.sc-media-caption { margin:0; padding:10px 20px; font-size:12px; line-height:1.6; color:var(--ex-muted); border-top:1px solid var(--ex-line); }
.sc-rail-controls { display:flex; justify-content:flex-end; gap:8px; margin:12px 0; }
.sc-rail-controls button { width:44px; height:44px; border:1px solid #bdbdb5; border-radius:50%; background:transparent; color:inherit; cursor:pointer; font-size:20px; }
.sc-rail-controls button:disabled { opacity:.35; cursor:default; }
[data-media-image] { cursor:zoom-in!important; }
.sc-experience :focus-visible, .sc-frontdesk :focus-visible, .sc-film-teaser:focus-visible, .sc-media-dialog :focus-visible, .sc-rail-controls :focus-visible, [data-media-image]:focus-visible { outline:2px solid #6863b5; outline-offset:4px; }
body.sc-media-open { overflow:hidden; }
@media(min-width:1000px) { .sc-scene-panel:not([hidden]) { animation:sc-scene-in .2s ease-out; } }
@keyframes sc-scene-in { from { opacity:.6; transform:translateY(5px); } to { opacity:1; transform:none; } }
@media(max-width:1000px) {
  .sc-scene-grid { gap:32px; }
  .sc-frontdesk-layout { grid-template-columns:1fr; gap:24px; }
  .sc-frontdesk-copy { max-width:680px; }
  .sc-frontdesk-story { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
}
@media(max-width:700px) {
  .sc-experience { padding:48px 0; }
  .sc-experience-header { display:block; margin-bottom:22px; }
  .sc-experience-header p { margin-top:18px; max-width:none; }
  .sc-experience-kicker { margin-bottom:12px; }
  .sc-scene-nav { gap:0; justify-content:space-between; margin-bottom:28px; }
  .sc-scene-nav button { width:33.333%; padding:12px 8px; font-size:14px; min-height:62px; text-align:center; }
  .sc-scene-nav button span { display:block; margin:0; font-size:11px; }
  .sc-scene-grid { grid-template-columns:1fr; gap:28px; }
  .sc-scene-copy h3, .sc-frontdesk h3 { margin-top:8px; font-size:28px; }
  .sc-scene-copy > p, .sc-frontdesk-copy > p { font-size:15px; line-height:1.8; }
  .sc-feature-picker { margin:18px 0; }
  .sc-device-stage { min-height:0; padding:26px 18px 18px; }
  .sc-device-phone { width:min(100%,280px); }
  .sc-device-phone img { height:550px; }
  .sc-ex-actions { gap:8px; }
  .sc-ex-link { padding:11px 14px; }
  .sc-tablet-stage { padding:22px 12px 16px; }
  .sc-device-tablet { border-width:7px; border-radius:17px; }
  .sc-frontdesk-story { display:block; }
  .sc-frontdesk-steps { gap:14px; grid-template-columns:1fr; }
  .sc-frontdesk-steps li { padding-top:12px; }
  .sc-frontdesk-steps b { display:inline; margin-right:8px; }
  .sc-media-dialog { width:100%; max-height:100dvh; height:100dvh; border:0; border-radius:0; }
  .sc-media-toolbar { padding:calc(10px + env(safe-area-inset-top)) 12px 10px; gap:8px; flex-wrap:wrap; }
  .sc-media-toolbar h2 { font-size:14px; flex:1; min-width:110px; }
  .sc-media-tools { gap:4px; }
  .sc-media-tools button, .sc-media-tools select { font-size:12px; padding:8px; }
  .sc-media-viewport { padding:12px; max-height:calc(100dvh - 170px); }
  .sc-media-viewport img, .sc-media-viewport video { max-height:calc(100dvh - 210px); }
  .sc-media-caption { padding:10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .sc-film-bar { padding:16px; gap:12px; }
}
@media(prefers-reduced-motion:reduce) { .sc-experience *, .sc-frontdesk *, .sc-film-teaser * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

body.website-home .sc-hero-art { grid-template-rows:auto auto; align-content:center; gap:12px; }
body.website-home .sc-film-teaser { text-decoration:none; }
body.website-home .sc-hero-explore { justify-self:start; margin-top:0; }

.sc-scene-nav { position:sticky; top:calc(76px + env(safe-area-inset-top,0px)); z-index:20; background:#fff; }
@media(max-width:700px) {
 .sc-frontdesk-layout { gap:14px; }
 .sc-frontdesk-copy { display:contents; }
 .sc-frontdesk-visual { grid-row:4; }
 .sc-frontdesk-topics { margin:8px 0; }
 .sc-frontdesk-story { margin-top:8px; }
 .sc-frontdesk h3, .sc-frontdesk-copy > p { margin:0; }
 .sc-frontdesk .sc-ex-actions { margin-top:0; }
}

.sc-tool-row{color:inherit;text-decoration:none}.sc-tool-row:focus-visible{outline:2px solid #4f654e;outline-offset:4px}