/* Brand colors and artwork from the existing YDS 5000 site. */
html { color-scheme:dark; background:#0A0F1E; }
body { margin:0; }
#yds-cinema-board .yds-motion-toggle { position:absolute; top:18px; right:24px; z-index:3; padding:10px 13px; min-height:44px; border:1px solid #8b7fff55; border-radius:8px; background:#0f1626df; color:#cbd5e1; font-size:11px; cursor:pointer; }
@media(max-width:650px){#yds-cinema-board .yds-motion-toggle { top:auto; bottom:88px; right:auto; left:20px; }}
@media(max-width:650px){#yds-cinema-board[data-scene="0"] .yds-stage { min-height:max(755px,calc(390px + 100vw)); }}
    #yds-cinema-board { --yds-navy:#0A0F1E; --yds-blue:#0F1626; --yds-purple:#272052; --yds-amber:#F5A524; --yds-white:#f8fafc; --yds-muted:#a9b6cd; color:var(--yds-white); background:var(--yds-navy); font-family:Inter,system-ui,sans-serif; width:100%; overflow:clip; border-radius:14px; }
    #yds-cinema-board * { box-sizing:border-box; }
    #yds-cinema-board button,#yds-cinema-board a { font-family:inherit; }
    #yds-cinema-board [hidden] { display:none!important; }
    #yds-cinema-board .yds-head { padding:20px 30px; display:flex; align-items:center; justify-content:space-between; gap:15px; position:relative; z-index:4; border-bottom:1px solid #f5a52424; }
    #yds-cinema-board .yds-brand { display:flex; align-items:center; gap:10px; color:var(--yds-white); font-size:16px; font-weight:800; letter-spacing:-.5px; }
    #yds-cinema-board .yds-logo { width:42px; height:42px; border-radius:10px; }
    #yds-cinema-board .yds-head-note { font-size:11px; font-weight:500; letter-spacing:1.7px; color:#8997b0; }
    #yds-cinema-board .yds-small-cta { color:var(--yds-white); padding:10px 14px; font-size:12px; border:1px solid #8b7fff55; border-radius:7px; background:var(--yds-purple); cursor:pointer; }
    #yds-cinema-board .yds-stage { min-height:570px; position:relative; isolation:isolate; background:radial-gradient(ellipse at 72% 45%,#27205277,transparent 60%),var(--yds-navy); }
    #yds-cinema-board canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; }
    #yds-cinema-board .yds-shade { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,#0a0f1ef0 0%,#0a0f1ea0 29%,transparent 56%); }
    #yds-cinema-board .yds-copy { position:relative; z-index:3; width:46%; padding:90px 0 75px 42px; pointer-events:none; }
    #yds-cinema-board .yds-eyebrow { font-size:11px; line-height:1.4; font-weight:500; letter-spacing:2.2px; color:var(--yds-amber); margin-bottom:22px; display:block; }
    #yds-cinema-board .yds-title { font-size:clamp(36px,5.5vw,63px); font-weight:800; line-height:1.06; letter-spacing:-2.5px; margin:0 0 22px; color:var(--yds-white); }
    #yds-cinema-board .yds-title span { color:var(--yds-amber); }
    #yds-cinema-board .yds-description { color:var(--yds-muted); font-size:13px; line-height:1.8; max-width:310px; margin:0 0 28px; }
    #yds-cinema-board .yds-main-cta { pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; gap:27px; background:var(--yds-amber); color:#19130a; font-size:13px; font-weight:700; padding:15px 19px; border:0; border-radius:7px; cursor:pointer; }
    #yds-cinema-board .yds-subline { display:block; color:#8d9ab2; font-size:11px; line-height:1.5; margin-top:17px; }
    #yds-cinema-board .yds-chapter { position:absolute; bottom:24px; right:30px; color:#8290aa; font-size:11px; letter-spacing:1.5px; z-index:3; }
    #yds-cinema-board .yds-chapter strong { color:var(--yds-amber); font-weight:500; }
    #yds-cinema-board .yds-scenes { display:flex; gap:0; padding:0 24px; border-top:1px solid #f5a52420; background:#0f1626; }
    #yds-cinema-board .yds-scene { flex:1; min-width:0; padding:17px 8px; display:flex; align-items:center; justify-content:center; gap:9px; border:0; border-top:2px solid transparent; background:none; color:#9aa7bc; font-size:12px; font-weight:500; cursor:pointer; }
    #yds-cinema-board .yds-scene span { font-size:10px; color:#6f7c95; }
    #yds-cinema-board .yds-scene[aria-selected="true"] { color:var(--yds-amber); border-top-color:var(--yds-amber); }
    #yds-cinema-board .yds-scene[aria-selected="true"] span { color:var(--yds-amber); }
    #yds-cinema-board .yds-pair { position:absolute; z-index:2; right:6%; top:30px; width:44%; height:490px; perspective:1000px; }
    #yds-cinema-board .yds-comic { position:absolute; top:65px; left:-18px; width:56%; padding:7px; background:#eee8dc; border-radius:9px; box-shadow:0 20px 55px #0009; transform:rotate(-10deg) rotateY(15deg); }
    #yds-cinema-board .yds-comic img { display:block; width:100%; border-radius:4px; }
    #yds-cinema-board .yds-info { position:absolute; top:0; right:0; width:auto; height:450px; max-width:72%; object-fit:contain; border-radius:8px; box-shadow:0 22px 75px #000a; transform:rotate(5deg); }
    #yds-cinema-board .yds-info-label { position:absolute; bottom:0; left:0; border:1px solid #f5a52455; background:#0f1626ef; padding:12px 16px; font-size:12px; line-height:1.6; color:var(--yds-muted); border-radius:8px; }
    #yds-cinema-board .yds-info-label strong { color:var(--yds-amber); font-size:17px; }
    #yds-cinema-board .yds-question { position:absolute; z-index:3; right:5%; top:55px; width:47%; background:#141e32f5; border:1px solid #f5a52438; border-radius:16px; padding:24px; box-shadow:0 20px 65px #0008; }
    #yds-cinema-board .yds-question-label { font-size:11px; color:var(--yds-amber); letter-spacing:1.5px; }
    #yds-cinema-board .yds-question p { color:var(--yds-white); font-size:16px; line-height:1.6; margin:18px 0; }
    #yds-cinema-board .yds-answers { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    #yds-cinema-board .yds-answer { border:1px solid #ffffff25; border-radius:6px; background:#1a2740; color:var(--yds-white); padding:12px; text-align:left; font-size:13px; cursor:pointer; }
    #yds-cinema-board .yds-answer.correct { background:#1b493b; border-color:#22c55e; }
    #yds-cinema-board .yds-answer.wrong { background:#522c35; border-color:#df787b; }
    #yds-cinema-board .yds-feedback { color:#cbd5e1; font-size:12px; line-height:1.7; margin-top:17px; }
    #yds-cinema-board .yds-phone { position:absolute; z-index:2; right:17%; top:23px; width:218px; height:495px; border:7px solid #202d46; border-radius:32px; transform:rotate(6deg); box-shadow:0 35px 85px #000a,0 0 40px #f5a52418; background:var(--yds-navy); overflow:hidden; }
    #yds-cinema-board .yds-phone img { width:100%; height:100%; object-fit:contain; }
    #yds-cinema-board .yds-store-row { display:flex; gap:9px; flex-wrap:wrap; pointer-events:auto; }
    #yds-cinema-board .yds-store { border:1px solid #f5a52466; background:#f5a524; color:#19130a; border-radius:6px; font-size:12px; font-weight:700; padding:13px 16px; cursor:pointer; text-decoration:none; }
    #yds-cinema-board .yds-finish-logo { width:64px; height:64px; border-radius:15px; margin-bottom:20px; }
    #yds-cinema-board button:focus-visible,#yds-cinema-board a:focus-visible { outline:2px solid #f8fafc; outline-offset:4px; }
    #yds-cinema-board .yds-zoom { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; background:#0a0f1ef8; padding:16px; }
    #yds-cinema-board .yds-zoom img { max-height:535px; max-width:90%; object-fit:contain; }
    #yds-cinema-board .yds-zoom-close { position:absolute; right:16px; top:16px; padding:10px 15px; color:var(--yds-white); background:#272052; border:1px solid #8b7fff66; border-radius:7px; font-size:12px; cursor:pointer; }
    @media(max-width:650px) {
      #yds-cinema-board .yds-head { padding:14px 17px; }#yds-cinema-board .yds-brand { font-size:13px; gap:7px; }#yds-cinema-board .yds-logo { width:36px;height:36px; }#yds-cinema-board .yds-head-note { display:none; }#yds-cinema-board .yds-small-cta { font-size:11px; padding:9px 11px; }
      #yds-cinema-board .yds-stage { min-height:755px; }#yds-cinema-board .yds-copy { width:100%; padding:33px 22px 0; text-align:center; }#yds-cinema-board .yds-eyebrow { margin-bottom:13px;font-size:10px; }#yds-cinema-board .yds-title { font-size:42px;letter-spacing:-1.8px;margin-bottom:14px; }#yds-cinema-board .yds-description { margin:0 auto 17px; font-size:12px;max-width:310px; }#yds-cinema-board .yds-subline { margin-top:11px;font-size:10px; }
      #yds-cinema-board .yds-shade { background:linear-gradient(#0a0f1ef5 0%,#0a0f1ed0 24%,transparent 51%); }#yds-cinema-board .yds-chapter { right:20px; bottom:20px; font-size:10px; }
      #yds-cinema-board .yds-scenes { padding:0 8px; }#yds-cinema-board .yds-scene { flex-direction:column; gap:5px; font-size:10px; padding:13px 2px; }
      #yds-cinema-board .yds-pair { width:80%; max-width:350px; right:10%; top:310px; height:390px; }#yds-cinema-board .yds-info { width:67%; max-height:360px;object-fit:contain; }#yds-cinema-board .yds-comic { top:50px;left:-8px; }#yds-cinema-board .yds-info-label { bottom:-6px;font-size:11px;padding:8px 12px; }
      #yds-cinema-board .yds-question { top:310px; right:5%; width:90%; padding:19px; }#yds-cinema-board .yds-question p { font-size:14px; }#yds-cinema-board .yds-answer { font-size:12px; padding:11px; }#yds-cinema-board .yds-feedback {font-size:11px;}
      #yds-cinema-board .yds-phone { width:173px;height:389px;right:calc(50% - 86px);top:335px; }#yds-cinema-board .yds-finish-logo { display:none; }#yds-cinema-board .yds-store-row { justify-content:center; }#yds-cinema-board .yds-zoom img { max-height:690px; }
      #yds-cinema-board[data-scene="4"] .yds-stage { min-height:860px; }
      #yds-cinema-board[data-scene="4"] .yds-phone { top:420px; }
    }
/* Full-page implementation of the approved five-scene storyboard. */
#yds-cinema-board { border-radius:0; min-height:100svh; }
#yds-cinema-board .yds-brand { text-decoration:none; }
#yds-cinema-board .yds-stage { min-height:max(570px, calc(100svh - 150px)); }
#yds-cinema-board .yds-scenes { position:sticky; bottom:0; z-index:4; padding-bottom:env(safe-area-inset-bottom); }
#yds-cinema-board .yds-scene { min-height:62px; }
#yds-cinema-board .yds-web-link { display:inline-block; margin-top:17px; color:var(--yds-muted); font-size:12px; pointer-events:auto; text-underline-offset:4px; }
#yds-cinema-board canvas { cursor:grab; }
#yds-cinema-board canvas:active { cursor:grabbing; }
#yds-cinema-board canvas:focus-visible { outline:2px solid var(--yds-amber); outline-offset:-4px; }
#yds-cinema-board[data-scene="1"] canvas, #yds-cinema-board[data-scene="2"] canvas { cursor:pointer; }
#yds-cinema-board[data-scene="3"] canvas, #yds-cinema-board[data-scene="4"] canvas { pointer-events:none; }
#yds-cinema-board .yds-pair { cursor:pointer; touch-action:pan-y; }
#yds-cinema-board .yds-pair img { -webkit-user-drag:none; user-select:none; }
#yds-cinema-board .yds-pair:focus-visible { outline:2px solid var(--yds-amber); outline-offset:8px; border-radius:10px; }
#yds-cinema-board .yds-zoom { position:fixed; margin:auto; width:min(920px,96vw); height:92dvh; max-width:96vw; max-height:92dvh; inset:0; border:1px solid #8b7fff66; border-radius:12px; overflow:auto; }
#yds-cinema-board .yds-zoom:not([open]) { display:none; }
#yds-cinema-board .yds-zoom::backdrop { background:#030713e8; }
#yds-cinema-board .yds-zoom img { max-height:none; height:auto; width:min(720px,100%); max-width:100%; margin:auto; display:block; }
#yds-cinema-board .yds-zoom[open] { display:block; padding:64px 16px 20px; }
#yds-cinema-board .yds-zoom-close { position:fixed; z-index:1; right:max(4vw,calc((100vw - 860px) / 2)); top:6dvh; }
#yds-cinema-board .yds-answer:disabled { cursor:default; opacity:1; }
.no-script { position:relative; padding:24px; color:#f8fafc; font:16px system-ui; }
.no-script a { color:#F5A524; }
@media(min-width:651px) {
 #yds-cinema-board .yds-copy { padding-top:max(90px,calc((100svh - 550px) / 2)); }
 #yds-cinema-board .yds-pair { top:calc(50% - 245px); }
 #yds-cinema-board .yds-question { top:calc(50% - 230px); }
 #yds-cinema-board .yds-phone { top:calc(50% - 250px); }
}
@media(max-width:650px) {
 #yds-cinema-board .yds-stage { min-height:755px; }
 #yds-cinema-board .yds-pair { position:relative; top:auto; right:auto; margin:36px auto 75px; }
 #yds-cinema-board .yds-question { position:relative; top:auto; right:auto; margin:35px auto 60px; }
 #yds-cinema-board[data-scene="4"] .yds-stage { min-height:860px; }
 #yds-cinema-board[data-scene="4"] .yds-phone { position:relative; top:auto; right:auto; margin:35px auto 65px; }
 #yds-cinema-board .yds-scene { min-height:62px; }
 #yds-cinema-board .yds-small-cta { min-height:44px; }
 #yds-cinema-board .yds-title { font-size:clamp(34px,10.8vw,42px); }
}
@media(prefers-reduced-motion:reduce) { #yds-cinema-board * { scroll-behavior:auto; } }


/* Site navigation and discovery stay available outside the cinematic flow. */
#yds-cinema-board .yds-head { z-index:6; }
#yds-cinema-board .yds-site-nav { display:flex; align-items:center; gap:30px; margin-left:auto; margin-right:18px; }
#yds-cinema-board .yds-site-nav a { color:#c6d0e0; text-decoration:none; font-size:13px; padding:12px 0; }
#yds-cinema-board .yds-site-nav a:hover, #yds-cinema-board .yds-footer a:hover { color:var(--yds-amber); }
#yds-cinema-board .yds-menu-toggle { display:none; }
#yds-cinema-board .yds-word-detail { display:block; pointer-events:auto; width:fit-content; color:var(--yds-muted); font-size:12px; margin-top:17px; text-underline-offset:4px; }
#yds-cinema-board .yds-explore { max-width:1180px; margin:auto; padding:85px 42px; scroll-margin-top:24px; }
#yds-cinema-board .yds-explore h2 { font-size:clamp(28px,4vw,40px); letter-spacing:-1.3px; margin:0 0 14px; }
#yds-cinema-board .yds-explore-heading p { color:var(--yds-muted); line-height:1.7; font-size:15px; margin-bottom:30px; }
#yds-cinema-board .yds-search { max-width:760px; }
#yds-cinema-board .yds-search label { display:block; color:#c6d0e0; font-size:12px; margin-bottom:10px; }
#yds-cinema-board .yds-search-row { display:flex; gap:10px; }
#yds-cinema-board .yds-search input { min-width:0; width:100%; background:#141e32; color:var(--yds-white); border:1px solid #8b7fff55; padding:17px; border-radius:8px; font:15px Inter,system-ui,sans-serif; }
#yds-cinema-board .yds-search input:focus { outline:2px solid var(--yds-amber); outline-offset:2px; }
#yds-cinema-board .yds-search-row button { background:var(--yds-amber); color:#19130a; padding:12px 22px; border:0; border-radius:8px; white-space:nowrap; font-weight:700; cursor:pointer; }
#yds-cinema-board #yds-search-status { font-size:12px; color:var(--yds-muted); line-height:1.7; }
#yds-cinema-board .yds-search-results { padding:0; list-style:none; border:1px solid #8b7fff44; border-radius:10px; overflow:hidden; }
#yds-cinema-board .yds-search-results a { display:flex; justify-content:space-between; gap:20px; padding:15px; border-bottom:1px solid #ffffff12; color:var(--yds-white); text-decoration:none; font-size:14px; }
#yds-cinema-board .yds-search-results a:hover { background:#272052; }
#yds-cinema-board .yds-search-results span { color:var(--yds-muted); text-align:right; }
#yds-cinema-board .yds-alphabet { display:flex; flex-wrap:wrap; gap:6px; margin:26px 0 18px; }
#yds-cinema-board .yds-alphabet a { display:grid; place-items:center; width:38px; min-height:44px; border:1px solid #ffffff20; border-radius:6px; color:var(--yds-white); text-decoration:none; font-size:13px; }
#yds-cinema-board .yds-alphabet a:hover { background:var(--yds-purple); border-color:var(--yds-amber); }
#yds-cinema-board .yds-text-link { color:var(--yds-amber); font-size:13px; text-decoration:none; display:inline-block; padding:12px 0; }
#yds-cinema-board .yds-topics { padding-top:70px; scroll-margin-top:20px; }
#yds-cinema-board .yds-topic-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:25px 0; }
#yds-cinema-board .yds-topic-grid a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:17px; background:#0f1626; border:1px solid #8b7fff30; border-radius:8px; text-decoration:none; color:var(--yds-white); font-size:13px; }
#yds-cinema-board .yds-topic-grid a:hover { border-color:var(--yds-amber); }
#yds-cinema-board .yds-topic-grid span { color:var(--yds-amber); }
#yds-cinema-board .yds-footer { display:flex; justify-content:space-between; gap:35px; border-top:1px solid #f5a52424; padding:38px 42px; background:#0f1626; }
#yds-cinema-board .yds-footer p { color:var(--yds-muted); font-size:12px; line-height:1.8; }
#yds-cinema-board .yds-footer nav { display:flex; align-items:center; flex-wrap:wrap; gap:22px; }
#yds-cinema-board .yds-footer nav a { color:var(--yds-muted); font-size:12px; text-decoration:none; padding:12px 0; }
@media(max-width:760px) {
 #yds-cinema-board .yds-head { gap:10px; flex-wrap:wrap; }
 #yds-cinema-board .yds-head > .yds-small-cta { margin-left:auto; }
 #yds-cinema-board .yds-menu-toggle { display:block; order:3; background:#141e32; border:1px solid #8b7fff55; border-radius:7px; width:44px; height:44px; color:var(--yds-white); font-size:21px; cursor:pointer; }
 #yds-cinema-board .yds-site-nav { display:none; order:4; width:100%; margin:0; padding-top:12px; border-top:1px solid #ffffff16; }
 #yds-cinema-board.yds-menu-open .yds-site-nav { display:flex; flex-direction:column; align-items:stretch; gap:0; }
 #yds-cinema-board .yds-site-nav a { padding:16px 10px; border-radius:5px; }
 #yds-cinema-board .yds-explore { padding:55px 22px; }
 #yds-cinema-board .yds-topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #yds-cinema-board .yds-footer { padding:32px 22px; flex-direction:column; gap:10px; }
}
@media(max-width:650px) {
 #yds-cinema-board .yds-word-detail { margin:15px auto 0; }
 #yds-cinema-board .yds-search-row button { padding:12px 17px; }
 #yds-cinema-board .yds-search input { font-size:16px; }
 #yds-cinema-board .yds-search-results a { flex-direction:column; gap:5px; }
 #yds-cinema-board .yds-search-results span { text-align:left; }
}

#yds-cinema-board .yds-site-nav { gap:22px; }
#yds-cinema-board .yds-more { position:relative; font-size:13px; color:#c6d0e0; }
#yds-cinema-board .yds-more summary { cursor:pointer; padding:14px 0; }
#yds-cinema-board .yds-more > div { position:absolute; top:100%; right:0; min-width:220px; display:flex; flex-direction:column; padding:10px; background:#141e32; border:1px solid #8b7fff55; border-radius:10px; box-shadow:0 16px 40px #0008; }
#yds-cinema-board .yds-more > div a { padding:12px; }
#yds-cinema-board .yds-more > div a:hover { background:#272052; border-radius:6px; }
#yds-cinema-board .yds-more summary:focus-visible { outline:2px solid #F5A524; outline-offset:4px; }
#yds-cinema-board .yds-live-demo { position:absolute; left:8%; bottom:14px; width:84%; border:0; border-radius:8px; background:#F5A524; color:#19130a; padding:13px 6px; font-weight:700; font-size:12px; cursor:pointer; }
#yds-cinema-board .yds-phone-live { transform:none; width:310px; height:540px; top:calc(50% - 270px); right:12%; }
#yds-cinema-board .yds-phone iframe { width:100%; height:100%; border:0; }
@media(max-width:1000px) and (min-width:761px){#yds-cinema-board .yds-site-nav { gap:12px; margin-right:0; } #yds-cinema-board .yds-site-nav a,#yds-cinema-board .yds-more { font-size:12px; }}
@media(max-width:760px){#yds-cinema-board .yds-more summary { padding:16px 10px; } #yds-cinema-board .yds-more > div { position:static; box-shadow:none; background:#0A0F1E; } #yds-cinema-board .yds-site-nav { gap:0; }}
@media(max-width:650px){#yds-cinema-board .yds-phone-live { width:min(330px,calc(100% - 44px)); height:600px; } #yds-cinema-board[data-scene="4"] .yds-phone-live { top:auto; right:auto; }}
