/* Interactive Start Here. Scoped: the approved homepage remains untouched. */
.sy-start-play .demo-hero { padding-block: clamp(2.5rem,5vw,4rem); }
.sy-start-play .demo-hero-inner { display:grid; grid-template-columns:minmax(0,1fr) 16rem; gap:3rem; align-items:center; }
.sy-start-play .demo-hero h1 { max-width:15ch; }
.sy-start-play .demo-hero-lede { color:#d3e3f8; margin-top:1.2rem; font-size:1.15rem; max-width:55ch; }
.sy-start-play .demo-hero-aside { display:flex; flex-direction:column; gap:.7rem; border-left:1px solid #5b769f; padding-left:2rem; color:#a7c8ee; font-size:.85rem; }
.sy-start-play .demo-hero-aside strong { font:800 1.35rem var(--sy-display); color:white; padding-left:.65rem; }
.sy-start-play .demo-hero-aside p { margin-top:.5rem; }.sy-start-play .demo-hero-aside .sy-motion { align-self:start; }
.sy-start-play .demo-section { padding-block:clamp(2.5rem,5vw,4.5rem); }
.sy-start-play .demo-section-heading { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:end; margin-bottom:1.5rem; }
.sy-start-play .demo-section-heading > p { font-size:.95rem; color:var(--sy-muted); }
.sy-start-play .demo-workspace { border:1px solid #bccce4; border-radius:24px; box-shadow:0 18px 55px #142a4c10; overflow:clip; background:#fff; }
.sy-start-play .demo-tabs { display:grid; grid-template-columns:1fr 1fr; background:#edf2fb; border-bottom:1px solid #cdd9eb; padding:.75rem; gap:.75rem; }
.sy-start-play .demo-tabs button { border:1px solid transparent; background:transparent; border-radius:16px; padding:1rem; display:flex; align-items:center; gap:.9rem; text-align:left; color:#445775; min-width:0; }
.sy-start-play .demo-tabs button[aria-selected="true"] { background:#fff; color:#112b4a; border-color:#22aaff; box-shadow:0 4px 0 #22aaff; }
.sy-start-play .demo-tabs #tab-nback[aria-selected="true"] { border-color:#ff6f91; box-shadow:0 4px 0 #ff6f91; }
.sy-start-play .demo-tabs button:disabled { opacity:.55; cursor:not-allowed; }
.sy-start-play .demo-tabs strong { display:block; font:800 1.15rem/1.3 var(--sy-display); }
.sy-start-play .demo-tabs small { display:block; margin-top:.2rem; font-size:.8rem; }
.sy-start-play .demo-tab-icon { width:2.9rem; height:2.9rem; border-radius:12px; background:#dcf3ff; color:#135f98; display:grid; place-items:center; font-size:1.9rem; flex-shrink:0; }
.sy-start-play #tab-nback .demo-tab-icon { background:#ffe0eb; color:#9d3157; }
.sy-start-play .demo-tab-arrow { margin-left:auto; }.sy-start-play .demo-panel { padding:clamp(1.2rem,3vw,2.5rem); }
.sy-start-play .demo-panel h3 { font-size:clamp(1.65rem,2.4vw,2.25rem); margin:.6rem 0 1rem; }
.sy-start-play .demo-panel h4 { font:800 1.1rem/1.3 var(--sy-display); margin:0 0 .6rem; }
.sy-start-play .demo-panel p { font-size:1rem; color:#49607b; }
.sy-start-play .demo-intro-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:2.5rem; }
.sy-start-play .demo-eyebrow { font-size:.75rem; font-weight:800; letter-spacing:.1em; color:#245c91; text-transform:uppercase; }
.sy-start-play .demo-feature-list { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.sy-start-play .demo-feature-tile { padding:1.2rem; border:1px solid #cdddf2; border-top:3px solid #22aaff; border-radius:15px; background:#f4f8ff; }
.sy-start-play .demo-feature-tile:nth-child(2) { border-top-color:#7b61ff; }.sy-start-play .demo-feature-tile:nth-child(3) { border-top-color:#18b7a0; }.sy-start-play .demo-feature-tile:nth-child(4) { border-top-color:#ffb84d; }
.sy-start-play .demo-feature-tile strong { display:block; font:800 1.1rem var(--sy-display); }.sy-start-play .demo-feature-tile span { display:block; font-size:.85rem; color:#4c6381; margin-top:.35rem; }
.sy-start-play .demo-button { border:1px solid #b3e055; border-radius:13px; background:#ccff66; color:#193b35; font-size:1rem; font-weight:800; line-height:1.3; min-height:48px; padding:.8rem 1.25rem; box-shadow:0 4px 0 #8dbf3d; max-width:100%; }
.sy-start-play .demo-button:hover { background:#ddff99; }.sy-start-play .demo-button:disabled { opacity:.5; box-shadow:none; cursor:not-allowed; }
.sy-start-play .demo-small-button { border:1px solid #b7c9e1; border-radius:10px; background:#fff; color:#193b60; font-size:.9rem; font-weight:650; padding:.55rem .85rem; min-height:44px; }
.sy-start-play .demo-button-row { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.4rem; align-items:center; }
.sy-start-play .demo-notice { padding:.8rem 1rem; border-radius:12px; border:1px solid #cedcf0; background:#f3f7fc; margin-top:1rem; font-size:.85rem!important; line-height:1.6; }
.sy-start-play .demo-privacy { margin-top:1rem; font-size:.8125rem; color:#52667d; max-width:100ch; }
.sy-start-play .demo-topline { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; font-size:.85rem; color:#506582; }
.sy-start-play .demo-progress { display:flex; gap:4px; margin:1rem 0 1.5rem; }.sy-start-play .demo-progress span { height:5px; background:#dde6f3; flex:1; border-radius:4px; }.sy-start-play .demo-progress .done { background:#22aaff; }.sy-start-play .demo-progress .current { background:#7b61ff; }
.sy-start-play .demo-question { max-width:860px; margin-inline:auto; }.sy-start-play .demo-question h3 { font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.4; max-width:60ch; }
.sy-start-play .demo-stem { display:block; width:auto; max-width:100%; height:auto; max-height:430px; margin:1rem auto; border-radius:8px; }
.sy-start-play .demo-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; border:0; margin:1.2rem 0 0; padding:0; }
.sy-start-play .demo-options legend { font-size:.85rem; color:#536981; margin-bottom:.8rem; }
.sy-start-play .demo-option { position:relative; display:flex; align-items:center; justify-content:center; gap:.45rem; border:1px solid #b9cce4; border-radius:12px; background:#f6f9ff; padding:.85rem; font-size:1rem; min-height:52px; cursor:pointer; }
.sy-start-play .demo-option input { accent-color:#2764b7; }.sy-start-play .demo-option:has(input:checked) { border:2px solid #2764b7; background:#e7f2ff; padding:calc(.85rem - 1px); }.sy-start-play .demo-option:focus-within { outline:3px solid #2764b7; outline-offset:3px; }
.sy-start-play .demo-stats { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0; }
.sy-start-play .demo-stat { border:1px solid #bdd7f5; border-radius:18px; padding:1.5rem; background:#eff7ff; }
.sy-start-play .demo-stat:nth-child(2) { background:#f2efff; border-color:#d0c1f5; }.sy-start-play .demo-stat > span { display:block; font-size:.85rem; color:#395a80; }
.sy-start-play .demo-stat > strong { display:block; font:850 clamp(2.7rem,6vw,4.1rem)/1.15 var(--sy-display); letter-spacing:-.04em; color:#132f50; margin:.4rem 0; }
.sy-start-play .demo-result details { border-top:1px solid #d2ddec; margin-top:1rem; padding-top:.75rem; font-size:.85rem; }.sy-start-play .demo-result summary { cursor:pointer; font-weight:700; padding:.5rem 0; }.sy-start-play .demo-result details p { font-size:.85rem; }
.sy-start-play .demo-reflection { border:1px solid #d6c5f7; border-left:5px solid #7b61ff; border-radius:16px; padding:1.25rem; background:#f7f3ff; margin-top:1.5rem; }
.sy-start-play .demo-reflection fieldset { border:0; margin:0; padding:0; }.sy-start-play .demo-reflection legend { font-weight:700; line-height:1.5; padding:0 0 .65rem; }
.sy-start-play .demo-scale { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.4rem; margin-top:.4rem; }
.sy-start-play .demo-scale label { display:flex; align-items:center; justify-content:center; border:1px solid #b9acd3; border-radius:10px; background:#fff; padding:.6rem .35rem; min-height:44px; gap:.3rem; cursor:pointer; }.sy-start-play .demo-scale input { accent-color:#6b46bd; margin:0; }.sy-start-play .demo-scale label:has(input:checked) { background:#e2d6ff; border-color:#6b46bd; }
.sy-start-play .demo-scale-labels { display:flex; justify-content:space-between; font-size:.8rem; color:#595075; margin-top:.4rem; gap:1rem; }.sy-start-play .demo-reflection .demo-small-button { margin-top:.75rem; }.sy-start-play .demo-reflection p { font-size:.85rem; }.sy-start-play .demo-reflection [role="status"] { margin-top:.8rem; }
.sy-start-play .demo-face-guide { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; padding:1rem; background:#f8f2fb; border-radius:16px; border:1px solid #e5cce0; }
.sy-start-play .demo-face-guide figure { text-align:center; }.sy-start-play .demo-face-guide img { width:100%; max-width:96px; height:90px; object-fit:contain; }.sy-start-play .demo-face-guide figcaption { font-size:.8rem; margin-top:.3rem; }
.sy-start-play .demo-rules { padding-left:1.25rem; font-size:.95rem; color:#425973; line-height:1.65; margin:1rem 0; }.sy-start-play .demo-rules li + li { margin-top:.6rem; }
.sy-start-play .demo-game { max-width:720px; margin-inline:auto; padding:1.2rem; border:1px solid #bfd0e3; border-radius:20px; background:linear-gradient(180deg,#ffffff,#f3f7fc); color:#10283f; box-shadow:0 12px 34px #17335510; }
.sy-start-play .demo-game .demo-topline { color:#526a82; }.sy-start-play .demo-game h3 { font-size:1.3rem; color:#10283f; margin:.4rem 0; }.sy-start-play .demo-game p { color:#405a73; text-align:center; font-size:.9rem; }
.sy-start-play .demo-game-status { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.55rem .8rem; padding:.7rem 0; font-weight:700; font-size:.95rem; }
.sy-start-play .demo-level-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .7rem; border:1px solid #a9c4df; border-radius:11px; background:#eaf4ff; color:#2c557a; }
.sy-start-play .demo-level-badge small { font-size:.7rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.sy-start-play .demo-level-badge b { color:#155eb7; font:900 1.15rem/1 var(--sy-display); }
.sy-start-play .demo-target { color:#7f2448; border:1px solid #e7a7be; border-radius:9px; padding:.35rem .6rem; font-size:.85rem; background:#ffe8f0; }
.sy-start-play .demo-board { position:relative; width:min(100%,300px,40vh); aspect-ratio:1; margin:.7rem auto; border:1px solid #b8cadf; border-radius:50%; background:radial-gradient(circle at 50% 46%,#ffffff 0,#edf3fb 66%,#e4ecf7 100%); box-shadow:inset 0 0 34px #7b93b31f; }
.sy-start-play .demo-marker { position:absolute; width:10px; height:10px; border:1px solid #6682a4; border-radius:50%; transform:translate(-50%,-50%); }.sy-start-play .demo-face { position:absolute; width:clamp(42px,21%,64px); height:clamp(42px,21%,64px); object-fit:contain; transform:translate(-50%,-50%); }
.sy-start-play .demo-countdown { position:absolute; inset:0; display:grid; place-items:center; font:850 4rem var(--sy-display); color:#2764b7; }
.sy-start-play .demo-game .demo-button-row { justify-content:center; margin-top:.8rem; }.sy-start-play .demo-match { min-width:0; flex:1; max-width:240px; transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease,color .12s ease; }
.sy-start-play .demo-match.is-correct { background:#b9efcf; color:#174a2d; border-color:#55a978; box-shadow:0 3px 0 #3f855e,0 0 0 3px #55a97822; }
.sy-start-play .demo-match.is-wrong { background:#ffd6d6; color:#7b1f2a; border-color:#d95b68; box-shadow:0 3px 0 #aa3f4b,0 0 0 3px #d95b6822; }
.sy-start-play .demo-game .demo-small-button { background:#fff; color:#234566; border-color:#aebfd4; }.sy-start-play .demo-game :is(button,a):focus-visible { outline:3px solid #2764b7; outline-offset:4px; }
.sy-start-play .demo-game .demo-trial-note { min-height:1.5em; font-size:.8rem; color:#526a82; margin:.4rem 0 0; }
.sy-start-play .demo-block-path { display:flex; gap:.4rem; flex-wrap:wrap; margin:1rem 0; }.sy-start-play .demo-block-path span { width:2.2rem; height:2.2rem; display:grid; place-items:center; border-radius:8px; background:#f2eaff; color:#563c87; border:1px solid #ccb7ef; font-weight:800; }
.sy-start-play .demo-table-wrap { overflow-x:auto; }.sy-start-play .demo-table { width:100%; border-collapse:collapse; font-size:.85rem; margin-top:1rem; }.sy-start-play .demo-table th,.sy-start-play .demo-table td { padding:.55rem .7rem; border-bottom:1px solid #d6e0ed; text-align:left; }
.sy-start-play .demo-apply { background:#f3f7fd; }.sy-start-play .demo-apply-grid,.sy-start-play .demo-programme-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }.sy-start-play .demo-apply-grid p,.sy-start-play .demo-programme-grid p { margin-top:1.2rem; color:#4a6079; }
.sy-start-play .demo-application-card { border:1px solid #c5d8f0; border-top:4px solid #7b61ff; border-radius:20px; background:#fff; padding:1.75rem; }
.sy-start-play .demo-contexts { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.4rem; }.sy-start-play .demo-contexts button { border:1px solid #b9cbe5; background:#f2f6ff; color:#204a78; border-radius:9px; padding:.6rem .7rem; font-size:.8rem; min-height:44px; }.sy-start-play .demo-contexts [aria-pressed="true"] { color:#fff; background:#5c42ab; border-color:#5c42ab; }
.sy-start-play .demo-cue-label { display:block; font-size:.8rem; font-weight:800; color:#354c72; text-transform:uppercase; letter-spacing:.06em; margin:1.4rem 0 .6rem; }.sy-start-play textarea { width:100%; font:inherit; font-size:.9rem; color:#314c70; border:1px solid #bed0ea; border-radius:10px; padding:.8rem; resize:vertical; background:#f6f9ff; }.sy-start-play #copy-cue { margin-top:.7rem; }.sy-start-play .demo-copy-status { font-size:.8rem; margin-left:.5rem; }
.sy-start-play .demo-theory { background:#edf5ff; border-radius:18px; border-left:4px solid #22aaff; padding:1.6rem; }.sy-start-play .demo-theory p { font-size:.95rem; }.sy-start-play .demo-theory details { margin-top:1rem; border-top:1px solid #bdcfe6; padding-top:.8rem; font-size:.9rem; }.sy-start-play .demo-theory summary { cursor:pointer; font-weight:700; }
.sy-start-play .demo-endnote { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; border-top:1px solid #d4dfef; padding-top:1.5rem; margin-top:3rem; font-size:.875rem; }.sy-start-play .demo-endnote p { margin:0; }
.sy-start-play .demo-panel :is(p,h3,h4,button,label,span),.sy-start-play .demo-hero-lede { overflow-wrap:anywhere; }
.sy-start-play :is(.demo-intro-grid,.demo-hero-inner,.demo-section-heading,.demo-apply-grid,.demo-programme-grid) > * { min-width:0; }
.sy-start-play .demo-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .sy-start-play[data-motion="on"] .demo-button { transition:translate 150ms ease,background-color 150ms ease; }
 .sy-start-play[data-motion="on"] .demo-button:hover { translate:0 -1px; }.sy-start-play[data-motion="on"] .demo-button:active { translate:0 2px; }
}
@media (max-width:900px) {
 .sy-start-play .demo-hero-inner { grid-template-columns:minmax(0,1fr); gap:1.5rem; }.sy-start-play .demo-hero-aside { border:0; padding:0; flex-direction:row; flex-wrap:wrap; gap:1rem; align-items:center; }.sy-start-play .demo-hero-aside p { margin:0; }
 .sy-start-play .demo-section-heading,.sy-start-play .demo-apply-grid,.sy-start-play .demo-programme-grid,.sy-start-play .demo-intro-grid { grid-template-columns:minmax(0,1fr); gap:1.5rem; }
}
@media (max-width:620px) {
 .sy-start-play .demo-tabs { padding:.5rem; gap:.4rem; }.sy-start-play .demo-tabs button { display:block; padding:.8rem; }.sy-start-play .demo-tabs strong { font-size:.95rem; }.sy-start-play .demo-tabs small { font-size:.72rem; }.sy-start-play .demo-tab-icon { width:2.2rem; height:2.2rem; margin-bottom:.6rem; font-size:1.4rem; }.sy-start-play .demo-tab-arrow { display:none; }
 .sy-start-play .demo-panel { padding:1rem; }.sy-start-play .demo-options { grid-template-columns:repeat(2,minmax(0,1fr)); }.sy-start-play .demo-stats { gap:.6rem; }.sy-start-play .demo-stat { padding:1rem; }
 .sy-start-play .demo-feature-tile { padding:1rem; }.sy-start-play .demo-game { padding:.85rem; }.sy-start-play .demo-game-status { font-size:.85rem; }.sy-start-play .demo-game .demo-small-button { font-size:.8rem; }
 .sy-start-play .demo-application-card { padding:1.15rem; }.sy-start-play .demo-scale { gap:.25rem; }.sy-start-play .demo-scale label { flex-direction:column; font-size:.9rem; }
}
@media (max-width:360px) { .sy-start-play .demo-tabs small { display:none; }.sy-start-play .demo-face-guide { padding:.5rem; }.sy-start-play .demo-face-guide img { height:65px; } }
@media (forced-colors:active) {
 .sy-start-play :is(.demo-game,.demo-feature-tile,.demo-stat,.demo-reflection,.demo-theory,.demo-application-card,.demo-workspace,.demo-tabs button) { color:CanvasText; background:Canvas; border:1px solid CanvasText; box-shadow:none; }
 .sy-start-play :is(.demo-button,.demo-small-button,.demo-option,.demo-target) { color:ButtonText; background:ButtonFace; border:1px solid ButtonText; box-shadow:none; }
 .sy-start-play .demo-game :is(p,h3,b,span) { color:CanvasText; }
}

/* A clean task-focused surface while answering; no half-hidden selector. */
.sy-start-play .demo-workspace.is-focused .demo-tabs { display:none; }
.sy-start-play .demo-workspace { scroll-margin-top:calc(var(--sy-header-height,5.25rem) + 1.5rem); }
@media (max-width:620px) { .sy-start-play .demo-board { width:min(100%,300px,38dvh); } .sy-start-play .demo-game .demo-button-row { flex-wrap:nowrap; } }

/* Adaptive G one-shot embed */
.demo-adaptive-wrap{display:grid;gap:12px}
.demo-adaptive-frame{display:block;width:100%;height:460px;border:0;border-radius:18px;background:#081523;transition:height .18s ease}
@media(max-width:700px){.demo-adaptive-frame{height:520px;border-radius:14px}}