/* SignLucid demo player (see player.js) and the mock-UI pieces the demo scenes are drawn with.
   Stage pixels are 1280×720 and scaled down, so sizes inside .sld-stage are in stage pixels. */
.sld { --sl-ink: #1F2A44; --sl-night: #131B2E; --sl-coral: #E8553A; --sl-coral-d: #C8432A; --sl-peach: #FF9478; --sl-paper: #FFF4EE; --sl-line: #EFE5DF; --sl-muted: #55607A; --sl-ok: #15936B; --sl-p2: #4C6FFF;
  max-width: 1080px; margin: 0 auto; font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif; }
.sld-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: var(--sl-night); box-shadow: 0 40px 100px -30px rgba(2, 10, 25, .55), 0 0 0 1px rgba(23, 32, 54, .08); cursor: pointer; isolation: isolate; }
.sld-host { position: absolute; inset: 0; }

/* captions sit outside the scaled stage so they stay readable on a phone */
.sld-view { position: relative; }
.sld-cap { position: absolute; left: 0; right: 0; bottom: 4.2%; display: flex; justify-content: center; padding: 0 6%; pointer-events: none; z-index: 5; }
.sld-cap span { background: rgba(10, 15, 28, .82); color: #fff; font-size: clamp(12.5px, 1.75vw, 19px); line-height: 1.45; font-weight: 500; padding: .45em .9em; border-radius: .6em; text-align: center; max-width: 860px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sld-cap.on span { opacity: 1; transform: none; }
.sld-cap b { color: var(--sl-peach); font-weight: 650; }
.sld-nocap .sld-cap { display: none; }

.sld-big { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; border: 0; color: #fff; font: inherit; cursor: pointer; background: radial-gradient(ellipse at center, rgba(19, 27, 46, .35), rgba(19, 27, 46, .7)); transition: opacity .35s; }
.sld-big svg { width: clamp(54px, 9vw, 84px); height: clamp(54px, 9vw, 84px); padding: clamp(14px, 2.2vw, 22px); padding-left: clamp(17px, 2.6vw, 26px); border-radius: 50%; background: linear-gradient(180deg, #FF7A5A, #E8553A); box-shadow: 0 18px 40px -10px rgba(232, 85, 58, .8); transition: transform .2s; }
.sld-big:hover svg { transform: scale(1.06); }
.sld-big b { font-size: clamp(15px, 2vw, 20px); font-weight: 650; }
.sld-big small { font-size: 13px; opacity: .75; }
.sld-started .sld-big { opacity: 0; pointer-events: none; }

.sld-bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.sld-pp, .sld-cc { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--sl-line); background: #fff; color: var(--sl-ink); cursor: pointer; transition: border-color .2s, color .2s; }
.sld-pp:hover, .sld-cc:hover { border-color: var(--sl-coral); color: var(--sl-coral); }
.sld-pp svg { width: 16px; height: 16px; } .sld-cc svg { width: 19px; height: 19px; }
.sld-cc { opacity: .55; } .sld-cc.on { opacity: 1; }
.sld-ch { flex: 1; display: flex; gap: 6px; min-width: 0; }
.sld-ch button { min-width: 0; border: 0; background: none; padding: 6px 0 0; text-align: left; cursor: pointer; font: inherit; color: var(--sl-muted); }
.sld-ch i { display: block; height: 5px; border-radius: 4px; background: #EADFD8; overflow: hidden; }
.sld-ch u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FF7A5A, #E8553A); border-radius: inherit; }
.sld-ch span { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sld-ch .now span { color: var(--sl-ink); }
.sld-ch button:hover span { color: var(--sl-coral); }
.sld-tx { margin-top: 14px; font-size: 14.5px; color: var(--sl-muted); }
.sld-tx summary { cursor: pointer; font-weight: 600; color: var(--sl-ink); width: max-content; }
.sld-tx ol { margin: .7rem 0 0; padding-left: 1.2rem; line-height: 1.65; } .sld-tx li { margin: .35rem 0; } .sld-tx b { color: var(--sl-ink); }
@media (max-width: 640px) { .sld-cap { position: static; padding: 0; margin-top: 10px; min-height: 4.4em; align-items: flex-start; } .sld-cap span { opacity: 1; transform: none; background: var(--sl-ink); font-size: 14px; width: 100%; } .sld-cap:not(.on) span { visibility: hidden; } .sld-frame { border-radius: 14px; } .sld-ch span { display: none; } .sld-ch .now span { display: block; position: absolute; } .sld-ch { position: relative; padding-bottom: 20px; } .sld-bar { align-items: flex-start; } }


@font-face { font-family: 'SigCaveat'; src: url('/fonts/sign/Caveat.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'SigBelle'; src: url('/fonts/sign/LaBelleAurore.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'SigNothing'; src: url('/fonts/sign/NothingYouCouldDo.ttf') format('truetype'); font-display: swap; }
.sld-snap .sld-big { display: none; }