/* ============================================================
   CHAPTERED DEMO PLAYER (Aryza page, 27 Oct 2026). The script and
   the engine are in js/demo-player.js; a demo's app screens bring
   their own styles (css/demo-advize.css).
     .dp-frame     the "video", 16:10 (square on phones, 30 Oct 2026,
                   so a dialog or the iPhone fits in the picture), with
                   the screens' black outline
     .dp-ctl       the caption on phones, the timeline, the chapter
                   titles under their segments, and the bar
   Fixed heights everywhere, so nothing on the page moves while it
   plays (phone stability rules).
   ============================================================ */

.dp { position: relative; max-width: 1040px; margin: 0 auto; outline: none; }
.dp:focus-visible .dp-frame { box-shadow: 0 0 0 3px var(--brand-blue, #4C6BEE); }

/* ---------- the frame ---------- */
.dp-frame {
    position: relative; aspect-ratio: 16 / 10; width: 100%; overflow: hidden; cursor: pointer;
    border: 1.5px solid var(--ink, #16121A); border-radius: 20px; background: #E2E5E9;
    box-shadow: 0 30px 60px -34px rgba(20, 17, 26, .35), 0 2px 6px rgba(20, 17, 26, .05);
    -webkit-user-select: none; user-select: none; isolation: isolate;
}
.dp-viewport { position: absolute; inset: 0; overflow: hidden; }
.dp-stage { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; will-change: transform; }
/* while the player measures where the cursor and the camera go, nothing
   is half way through a transition */
.dp-stage.dp-measure, .dp-stage.dp-measure * { transition: none !important; animation: none !important; }

/* the pointer and the click ring, drawn over the stage at a fixed size */
.dp-cursor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.dp-cursor svg { display: block; width: 24px; height: 24px; margin: -3px 0 0 -5px; filter: drop-shadow(0 2px 3px rgba(20, 17, 26, .35)); }
.dp-cursor path { fill: #16121A; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.dp-cursor svg { transition: opacity .25s ease; }
.dp-cursor.is-off svg { opacity: 0; }
.dp-ring {
    position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; z-index: 4; pointer-events: none; opacity: 0;
    border-radius: 50%; background: rgba(213, 59, 213, .28); border: 2px solid rgba(213, 59, 213, .65); will-change: transform, opacity;
}

/* the caption, over the picture */
.dp-caption {
    /* width: max-content, or a box pinned at left: 50% can only use half the
       frame and every longer caption wraps early (29 Oct 2026) */
    position: absolute; left: 50%; bottom: 18px; z-index: 6; width: max-content; max-width: 82%; transform: translateX(-50%);
    pointer-events: none; text-align: center; opacity: 0;
}
.dp-caption.is-top { top: 18px; bottom: auto; }
.dp-caption span {
    display: inline-block; padding: 9px 16px; border-radius: 12px; background: rgba(22, 18, 26, .86); color: #fff;
    font-size: 15px; font-weight: 650; line-height: 1.35; letter-spacing: -.005em;
    box-shadow: 0 10px 24px -12px rgba(20, 17, 26, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* play over the picture while it isn't playing */
.dp-frame::after {
    content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
    background: rgba(22, 18, 26, .10); opacity: 0; transition: opacity .25s ease;
}
.dp:not(.is-playing) .dp-frame::after { opacity: 1; }
.dp-big {
    position: absolute; left: 50%; top: 50%; z-index: 7; display: flex; align-items: center; gap: 12px;
    padding: 8px 20px 8px 8px; border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(22, 18, 26, .88); color: #fff; font: inherit; text-align: left;
    transform: translate(-50%, -50%) scale(.96); opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    box-shadow: 0 18px 40px -16px rgba(20, 17, 26, .6);
}
.dp:not(.is-playing) .dp-big { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.dp-big-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--ink, #16121A); flex: none; }
.dp-big-ico svg { width: 20px; height: 20px; margin-left: 2px; }
.dp.is-ended .dp-big-ico svg { margin-left: 0; }
.dp-big-t { display: grid; font-size: 15px; font-weight: 700; line-height: 1.25; }
.dp-big-t small { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .65); }
.dp-big:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- caption on phones, timeline, bar ---------- */
.dp-ctl { margin-top: 14px; }
.dp-caption-m { display: none; }

.dp-line { position: relative; height: 24px; cursor: pointer; touch-action: none; outline: none; }
.dp-track { position: absolute; left: 0; right: 0; top: 9px; height: 6px; transition: top .15s ease, height .15s ease; }
.dp-line:hover .dp-track, .dp-line.is-drag .dp-track, .dp-line:focus-visible .dp-track { top: 8px; height: 8px; }
.dp-seg { position: absolute; top: 0; height: 100%; }
.dp-seg::before, .dp-seg i { content: ''; position: absolute; top: 0; bottom: 0; left: 2px; right: 2px; border-radius: 4px; }
.dp-seg::before { background: #E7E0DD; transition: background-color .15s ease; }
.dp-seg.is-hover::before { background: #D9CFCB; }
.dp-seg i { background: linear-gradient(90deg, #D53BD5, #8B5CF6); transform-origin: 0 50%; transform: scaleX(0); }
.dp-head {
    position: absolute; top: 12px; z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
    background: #fff; border: 2px solid var(--ink, #16121A); box-shadow: 0 2px 6px rgba(20, 17, 26, .25); pointer-events: none;
}
.dp-line:focus-visible .dp-head { box-shadow: 0 0 0 3px rgba(76, 107, 238, .45); }
.dp-tip {
    position: absolute; bottom: 30px; z-index: 3; display: grid; gap: 1px; padding: 7px 10px; border-radius: 9px;
    background: var(--ink, #16121A); color: #fff; white-space: nowrap; transform: translateX(-50%);
    pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
.dp-tip b { font-size: 12.5px; font-weight: 700; }
.dp-tip small { font-size: 11.5px; color: rgba(255, 255, 255, .65); font-variant-numeric: tabular-nums; }
.dp-line:hover .dp-tip, .dp-line.is-drag .dp-tip { opacity: 1; }

.dp-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-height: 40px; }
.dp-btn {
    display: grid; place-items: center; flex: none; height: 36px; min-width: 36px; padding: 0 8px; border-radius: 999px;
    border: 1px solid var(--line, #EAE3E1); background: #fff; color: var(--ink, #16121A); cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
    transition: background-color .15s ease, border-color .15s ease;
}
.dp-btn svg { width: 16px; height: 16px; }
.dp-btn:hover { background: var(--soft, #F4EFED); }
.dp-btn:focus-visible { outline: 2px solid var(--brand-blue, #4C6BEE); outline-offset: 2px; }
.dp-play { width: 40px; height: 40px; border-color: var(--ink, #16121A); background: var(--ink, #16121A); color: #fff; }
.dp-play:hover { background: #2a2430; }
.dp-play svg { width: 17px; height: 17px; }
.dp-time { flex: none; font-size: 13px; color: var(--muted, #8B8492); font-variant-numeric: tabular-nums; }
.dp-time b { color: var(--ink, #16121A); font-weight: 700; }
.dp-now-chap { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--ink, #16121A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp:not(.is-compact) .dp-now-chap { visibility: hidden; }
.dp-speed { width: 48px; }

/* ---------- the chapter titles, each under its segment ---------- */
.dp-labels { display: flex; margin: 0; padding: 0; list-style: none; }
.dp-labels li { flex: none; min-width: 0; }
.dp-label {
    display: flex; align-items: baseline; gap: 7px; width: 100%; padding: 3px 4px 4px 2px; border: 0; border-radius: 6px;
    background: none; color: var(--muted, #8B8492); font: inherit; text-align: left; cursor: pointer;
    transition: color .15s ease;
}
.dp-label-n { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.dp-label-t {
    min-width: 0; font-size: 13.5px; font-weight: 650; line-height: 1.32; letter-spacing: -.005em; overflow-wrap: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dp-label.is-done { color: var(--body, #4E4854); }
.dp-label.is-on, .dp-label:hover, .dp-label.is-hover { color: var(--ink, #16121A); }
.dp-label.is-on .dp-label-n { color: var(--pink-deep, #D53BD5); }
.dp-label:focus-visible { outline: 2px solid var(--brand-blue, #4C6BEE); outline-offset: 0; }
/* where a title does not fit, numbers only, and the bar names the chapter */
.dp.is-compact .dp-label-t { display: none; }
.dp.is-compact .dp-label { padding: 4px 2px 6px; }
.dp.is-compact .dp-label-n { font-size: 12px; }

/* ---------- full screen ---------- */
.dp:fullscreen { max-width: none; padding: 24px 32px; background: var(--cream, #FCF9F7); display: flex; flex-direction: column; justify-content: center; }
.dp:fullscreen .dp-frame { width: min(100%, calc((100vh - 190px) * 1.6)); margin: 0 auto; }
.dp:fullscreen .dp-ctl { width: min(100%, calc((100vh - 190px) * 1.6)); margin: 14px auto 0; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
    .dp-frame { aspect-ratio: 1 / 1; border-radius: 16px; }
    .dp-caption { display: none; }
    .dp-caption-m {
        display: flex; align-items: center; min-height: 44px; margin: 0 0 6px; font-size: 14.5px; font-weight: 700;
        line-height: 1.35; color: var(--ink, #16121A);
    }
    .dp-big { padding: 6px 16px 6px 6px; gap: 10px; }
    .dp-big-ico { width: 40px; height: 40px; }
    .dp-big-t { font-size: 14px; }
    .dp-full { display: none; }
    .dp-now-chap { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .dp-track, .dp-seg::before, .dp-label, .dp-big, .dp-frame::after { transition: none; }
}