/* Dance Looper - the two-button skin.
   Every rule that changes the interface is scoped to html[data-skin="twobutton"]
   (set before first paint from localStorage), so the classic skin in
   dancelooper.css is untouched. Loaded after dancelooper.css so equal
   specificity wins here. Portrait phone only: on a wider screen the app is a
   phone-sized column, with iPhone-size presets (html[data-phone], chosen from
   the splash) for checking layouts while developing.

   Cross-browser rules for this file (older Safari on iPads is a real target):
   no gap on flex containers (margins instead), no <button> as a layout box
   (the pads are divs), no reliance on aspect-ratio or dvh without a fallback
   before them. */

/* Elements that belong to this skin are simply absent from the classic one. */
html:not([data-skin="twobutton"]) #dancelooper_splash_preview,
html:not([data-skin="twobutton"]) #dancelooper_strip,
html:not([data-skin="twobutton"]) #dancelooper_actions,
html:not([data-skin="twobutton"]) #dancelooper_tutorial
{
    display: none;
}

/* Classic-only parts, hidden here. */
html[data-skin="twobutton"] body #dancelooper_right,
html[data-skin="twobutton"] body #dancelooper_bottom
{
    display: none;
}

/* ---- Phone frame ---- */

html[data-skin="twobutton"] body
{
    margin: 0;
}

/* --dl-height is the app's height: the screen on a phone, the frame in the
   desktop preview. vh first (works everywhere), dvh where supported (it follows
   the address bar on modern phones). */
html[data-skin="twobutton"] body .dancelooper-app
{
    --dl-height: 100vh;
    box-sizing: border-box;
    width: 100%;
    max-width: 430px;
    height: var(--dl-height);
    min-height: 0;
    margin: 0 auto;
    padding: 8px 10px 8px 10px;
    background: #ffffff;
}

@supports (height: 100dvh)
{
    html[data-skin="twobutton"] body .dancelooper-app
    {
        --dl-height: 100dvh;
    }
}

@media (min-width: 601px)
{
    html[data-skin="twobutton"] body
    {
        background: #cfd4de;
    }

    html[data-skin="twobutton"] body .dancelooper-app
    {
        --dl-height: 860px;
        width: 430px;
        margin: 12px auto;
        border-radius: 30px;
        box-shadow: 0 0 0 10px #22252b, 0 24px 60px rgba(0, 0, 0, 0.4);
        overflow: hidden;
    }

    html[data-phone="se"][data-skin="twobutton"] body .dancelooper-app
    {
        --dl-height: 667px;
        width: 375px;
    }

    html[data-phone="mini"][data-skin="twobutton"] body .dancelooper-app
    {
        --dl-height: 812px;
        width: 375px;
    }

    html[data-phone="standard"][data-skin="twobutton"] body .dancelooper-app
    {
        --dl-height: 844px;
        width: 390px;
    }

    html[data-phone="max"][data-skin="twobutton"] body .dancelooper-app
    {
        --dl-height: 932px;
        width: 430px;
    }

    /* Tablet: a portrait iPad-sized frame on a desktop (never taller than the
       window). */
    html[data-phone="tablet"][data-skin="twobutton"] body .dancelooper-app
    {
        --dl-height: min(1024px, calc(100vh - 24px));
        width: 768px;
        max-width: 768px;
    }

    /* Which preview size is showing, so a layout problem can be tied to a
       size at a glance (text from html[data-phone-label], set with the size). */
    html[data-skin="twobutton"]::after
    {
        content: attr(data-phone-label);
        position: fixed;
        left: 8px;
        bottom: 6px;
        z-index: 8000;
        padding: 2px 7px;
        background: rgba(255, 255, 255, 0.85);
        border-radius: 4px;
        font: 11px monospace;
        color: #4b5563;
        pointer-events: none;
    }
}

/* Tablet on an actual tablet: a portrait iPad (up to 768px wide) is the size
   being previewed, so there is nothing to frame - the app fills the screen, no
   border, no rounded corners, no shadow. */
@media (min-width: 601px) and (max-width: 768px)
{
    html[data-phone="tablet"][data-skin="twobutton"] body
    {
        background: #ffffff;
    }

    html[data-phone="tablet"][data-skin="twobutton"] body .dancelooper-app
    {
        --dl-height: 100vh;
        width: 100%;
        max-width: 768px;
        margin: 0 auto;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }
}

@supports (height: 100dvh)
{
    @media (min-width: 601px) and (max-width: 768px)
    {
        html[data-phone="tablet"][data-skin="twobutton"] body .dancelooper-app
        {
            --dl-height: 100dvh;
        }
    }
}

/* ---- Header: compact, one small row (the media chip wraps under it) ---- */

html[data-skin="twobutton"] body .dancelooper-app #dancelooper_header
{
    margin-bottom: 6px;
}

html[data-skin="twobutton"] body .dancelooper-app #dancelooper_header .dancelooper-logomark
{
    height: 26px;
    margin-right: 8px;
}

html[data-skin="twobutton"] body .dancelooper-app #dancelooper_header .dancelooper-wordmark
{
    font-size: 20px;
    margin-right: 8px;
}

html[data-skin="twobutton"] body .dancelooper-app #dancelooper_header .dancelooper-brand
{
    font-size: 12px;
    margin-bottom: 2px;
}

/* The media chip: right-aligned, as wide as its name needs (up to 90% of the
   header) before the name is cut off. */
html[data-skin="twobutton"] body .dancelooper-app #dancelooper_header #dancelooper_header_media
{
    flex: 0 1 auto;
    max-width: 90%;
    min-width: 0;
    margin-top: 4px;
    box-sizing: border-box;
    font-size: 14px;
    padding: 6px 12px;
}

html[data-skin="twobutton"] body .dancelooper-app #dancelooper_header #dancelooper_header_media_name
{
    max-width: none;
    min-width: 0;
    margin-right: 6px;
}

/* ---- Layout: header, video, Clip bar, two buttons ---- */

html[data-skin="twobutton"] body #dancelooper_grid,
html[data-skin="twobutton"] body #dancelooper_main
{
    flex-direction: column;
}

/* The video's 30% floor (of the app's height) that the strip and buttons
   cannot take back - the video is the one box that flexes. */
html[data-skin="twobutton"] body #dancelooper_center
{
    flex: 1 1 0;
    min-height: calc(var(--dl-height) * 0.3);
}

html[data-skin="twobutton"] body #dancelooper_strip,
html[data-skin="twobutton"] body #dancelooper_actions
{
    margin-top: 6px;
}

/* While a video shows, the box is a black stage the 16:9 player sits in (the
   box keeps its 30% floor on a tall phone; the video letterboxes inside it). */
html[data-skin="twobutton"] body #dancelooper_center[data-show="video"],
html[data-skin="twobutton"] body #dancelooper_center[data-show="youtube"]
{
    background: #000000;
    align-items: center;
}

/* Full width, 16:9. aspect-ratio where supported; the height is also set by
   script (twobutton_youtube_size()) so older Safari, which has no
   aspect-ratio, gets the same size. */
html[data-skin="twobutton"] body #dancelooper_center #dancelooper_youtube_target
{
    width: 100%;
    height: auto;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    align-self: center;
}

/* ---- The Load Media screen, sized for a phone-shaped box ----
   The classic css compacts this only for a small VIEWPORT (max-width 480px /
   max-height 700px), which is never true for a phone frame on a desktop or a
   tablet - so here it is always compact, top-aligned, and scrolls instead of
   clipping the pro tip. */

html[data-skin="twobutton"] body #dancelooper_center .dancelooper-media-zone
{
    padding: 10px;
    gap: 0;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

html[data-skin="twobutton"] body #dancelooper_center .dancelooper-media-zone > *
{
    flex-shrink: 0;
    margin-bottom: 8px;
}

/* The big decorative play icon costs height a phone-shaped box needs for the
   how-to, so it is left out. */
html[data-skin="twobutton"] body #dancelooper_center .dancelooper-media-zone > svg
{
    display: none;
}

html[data-skin="twobutton"] body #dancelooper_center button.dancelooper-cta
{
    font-size: 15px;
    padding: 10px 22px;
}

html[data-skin="twobutton"] body #dancelooper_center .dancelooper-load-card
{
    flex-basis: 130px;
    padding: 10px 8px;
    font-size: 13px;
}

html[data-skin="twobutton"] body #dancelooper_center .dancelooper-load-card svg
{
    width: 24px;
    height: 24px;
}

/* margin, not gap, between the steps (older Safari ignores flex gap and the
   steps ran into each other). */
html[data-skin="twobutton"] body #dancelooper_center .dancelooper-howto
{
    margin-top: 4px;
    display: block;
}

html[data-skin="twobutton"] body #dancelooper_center .dancelooper-howto > div
{
    margin-bottom: 8px;
    padding: 2px 0 2px 38px;
    min-height: 30px;
}

html[data-skin="twobutton"] body #dancelooper_center .dancelooper-howto > div:nth-child(-n+2)::before
{
    width: 28px;
    height: 28px;
    font-size: 15px;
    line-height: 28px;
}

html[data-skin="twobutton"] body #dancelooper_center .dancelooper-howto > div > div:first-child
{
    font-size: 15px;
}

html[data-skin="twobutton"] body #dancelooper_center .dancelooper-howto > div > div:last-child
{
    font-size: 12px;
    line-height: 1.3;
}

html[data-skin="twobutton"] body #dancelooper_center .dancelooper-howto > div:nth-child(3)
{
    margin-top: 2px;
    padding: 6px 10px 6px 38px;
}

html[data-skin="twobutton"] body #dancelooper_center .dancelooper-howto > div:nth-child(3)::before
{
    left: 8px;
    top: 6px;
    font-size: 20px;
}

/* ---- Clip bar ---- */

html[data-skin="twobutton"] .dancelooper-strip
{
    flex: 0 0 auto;
    padding: 2px 4px;
}

html[data-skin="twobutton"] .dancelooper-strip > div:nth-child(1)
{
    display: flex;
    align-items: center;
    min-height: 20px;
    font-size: 13px;
    font-weight: bold;
    color: #22252b;
    font-variant-numeric: tabular-nums;
}

/* The delay countdown ring, beside the status: shown only while counting. */
html[data-skin="twobutton"] .dancelooper-strip #dancelooper_strip_ring
{
    display: none;
}

html[data-skin="twobutton"] .dancelooper-strip #dancelooper_strip_ring[data-counting]
{
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 50%;
    background: conic-gradient(#f0b93d calc(var(--delay-fraction) * 360deg), rgba(34, 37, 43, 0.15) 0);
    transition: --delay-fraction 0.15s linear;
}

html[data-skin="twobutton"] .dancelooper-strip[data-delaying="1"] #dancelooper_strip_status
{
    color: #b7791f;
}

html[data-skin="twobutton"] .dancelooper-strip > div:nth-child(2)
{
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #6b7280;
}

html[data-skin="twobutton"] .dancelooper-strip #dancelooper_strip_start
{
    margin-right: 8px;
}

html[data-skin="twobutton"] .dancelooper-strip #dancelooper_strip_end
{
    margin-left: 8px;
}

/* The track is a tall, easy touch target with a slim bar drawn in the middle. */
html[data-skin="twobutton"] .dancelooper-strip #dancelooper_strip_track
{
    position: relative;
    flex: 1;
    height: 34px;
    background: linear-gradient(#e3e6ec, #e3e6ec) center / 100% 10px no-repeat;
    border-radius: 5px;
    touch-action: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

html[data-skin="twobutton"] .dancelooper-strip #dancelooper_strip_fill
{
    position: absolute;
    top: 50%;
    height: 10px;
    margin-top: -5px;
    background: #2f6fed;
    border-radius: 5px;
}

html[data-skin="twobutton"] .dancelooper-strip[data-marking="1"] #dancelooper_strip_fill
{
    animation: dancelooper-cue-marking-pulse 1s ease-in-out infinite;
}

html[data-skin="twobutton"] .dancelooper-strip #dancelooper_strip_playhead
{
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 4px;
    margin-left: -2px;
    background: #22252b;
    border-radius: 2px;
    pointer-events: none;
}

/* ---- The two pads ---- */

html[data-skin="twobutton"] .dancelooper-actions
{
    flex: 0 0 auto;
    padding: 4px 0 0 0;
    background: #ffffff;
    border-radius: 16px;
}

/* Two equal pads side by side (flex, margin - no grid, no gap). */
html[data-skin="twobutton"] .dancelooper-actions > div:first-child
{
    display: flex;
    align-items: stretch;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"]
{
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px;
    text-align: left;
    color: #22252b;
    background: #f4f5f7;
    border: 2px solid #c7cdd6;
    border-radius: 18px;
    box-shadow: 0 4px 0 #b8bec9;
    cursor: pointer;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s, border-color 0.1s;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"] + [role="button"]
{
    margin-left: 10px;
}

/* The key that does the same thing (left or right arrow) is a little keycap at
   the right end of the title's line - first in the markup so it can float. */
html[data-skin="twobutton"] .dancelooper-actions [role="button"] > span:nth-child(1)
{
    float: right;
    min-width: 18px;
    margin-left: 6px;
    padding: 1px 7px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
    color: #4b5563;
    background: #ffffff;
    border: 1px solid #c7cdd6;
    border-bottom-width: 2px;
    border-radius: 6px;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"] > span:nth-child(1):empty
{
    display: none;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"] > span:nth-child(2)
{
    display: block;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"] > span:nth-child(3)
{
    display: block;
    clear: both;
    margin-top: 6px;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"] > span:nth-child(3) > span
{
    display: block;
    margin-bottom: 5px;
    line-height: 1.15;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"] > span:nth-child(3) > span > span
{
    display: block;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"] > span:nth-child(3) > span > span:first-child:not(:last-child)
{
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"] > span:nth-child(3) > span > span:last-child
{
    font-size: 14px;
    font-weight: bold;
}

/* What the press is doing, by color (data-state is set from the engine's
   gesture events - see twobutton_gesture_state()). */
html[data-skin="twobutton"] .dancelooper-actions [role="button"][data-state="down"]
{
    background: #e2e5ea;
    border-color: #8b93a3;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    box-shadow: 0 1px 0 #2f6fed;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"][data-state="click"]
{
    background: #d3f3df;
    border-color: #2e9e58;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"][data-state="double"]
{
    background: #eadcfb;
    border-color: #7c4dd6;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"][data-state="hold"]
{
    background: #ffe7b0;
    border-color: #e0a100;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    box-shadow: 0 1px 0 #e0a100;
    animation: dancelooper-twobutton-hold 0.9s ease-in-out infinite;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"][data-state="release"]
{
    background: #d7f0f4;
    border-color: #1f8aa0;
}

@keyframes dancelooper-twobutton-hold
{
    0%, 100% { background: #ffe7b0; }
    50%      { background: #ffd070; }
}

/* Connect mode: the same pads ask for the real pedals. */
html[data-skin="twobutton"] .dancelooper-actions[data-mode="connect"] [role="button"] > span:nth-child(3) > span > span:last-child
{
    font-size: 16px;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"][data-listening="1"]
{
    border-color: #f0b93d;
    background: #fff8e6;
    animation: dancelooper-twobutton-listen 1s ease-in-out infinite;
}

@keyframes dancelooper-twobutton-listen
{
    0%, 100% { box-shadow: 0 4px 0 #b8bec9, 0 0 0 0 rgba(240, 185, 61, 0.7); }
    50%      { box-shadow: 0 4px 0 #b8bec9, 0 0 0 10px rgba(240, 185, 61, 0); }
}

/* A narrow screen: the pads scale down rather than wrap or overflow. */
@media (max-width: 350px)
{
    html[data-skin="twobutton"] .dancelooper-actions [role="button"]
    {
        padding: 9px;
    }

    html[data-skin="twobutton"] .dancelooper-actions [role="button"] > span:nth-child(2)
    {
        font-size: 17px;
    }

    html[data-skin="twobutton"] .dancelooper-actions [role="button"] > span:nth-child(1)
    {
        padding: 0 5px;
        font-size: 13px;
    }

    html[data-skin="twobutton"] .dancelooper-actions [role="button"] > span:nth-child(3) > span > span:last-child
    {
        font-size: 13px;
    }
}

/* ---- Pedal connection, under the pads ---- */

html[data-skin="twobutton"] .dancelooper-actions #dancelooper_connect_links
{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 6px;
    min-height: 28px;
}

html[data-skin="twobutton"] .dancelooper-actions #dancelooper_connect_links[data-state="none"]
{
    justify-content: space-between;
}

html[data-skin="twobutton"] .dancelooper-actions #dancelooper_connect_links[data-state="connecting"]
{
    justify-content: center;
}

html[data-skin="twobutton"] .dancelooper-actions #dancelooper_connect_note
{
    font-size: 13px;
    font-weight: bold;
    color: #7a4b00;
}

html[data-skin="twobutton"] .dancelooper-actions #dancelooper_connect_links button
{
    min-height: 0;
    margin-left: 12px;
    padding: 6px 10px;
    background: none;
    border: none;
    box-shadow: none;
    color: #6b7280;
    font-size: 13px;
    text-decoration: underline;
    touch-action: auto;
    display: inline-block;
}

/* Nothing connected yet: the way to connect is the obvious thing to tap. */
html[data-skin="twobutton"] .dancelooper-actions #dancelooper_connect_links[data-state="none"] #dancelooper_connect_start
{
    background: #fff8e6;
    border: 1px solid #f0c36d;
    border-radius: 16px;
    color: #7a4b00;
    font-weight: bold;
    text-decoration: none;
}

/* ---- Walkthrough: dims the whole app; the recreated pads inside the card are the live ones ---- */

.dancelooper-tutorial
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px;
    background: rgba(29, 27, 22, 0.62);
}

.dancelooper-tutorial > div
{
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding: 16px;
    background: #fffdf8;
    border: 3px solid transparent;
    border-radius: 16px;
    text-align: center;
}

.dancelooper-tutorial[data-done="1"] > div
{
    border-color: #2e9e58;
}

.dancelooper-tutorial > div > div:nth-child(1)
{
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}

.dancelooper-tutorial > div > div:nth-child(2)
{
    margin: 4px 0;
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-size: 26px;
    font-weight: 600;
    color: #1D1B16;
}

@keyframes dancelooper-demo-click
{
    0%, 55%, 100% { background: #f4f5f7; border-color: #c7cdd6; }
    10%, 30%      { background: #d3f3df; border-color: #2e9e58; }
}

@keyframes dancelooper-demo-double
{
    0%, 70%, 100% { background: #f4f5f7; border-color: #c7cdd6; }
    5%, 15%       { background: #eadcfb; border-color: #7c4dd6; }
    25%, 35%      { background: #eadcfb; border-color: #7c4dd6; }
    20%           { background: #f4f5f7; border-color: #c7cdd6; }
}

@keyframes dancelooper-demo-hold
{
    0%, 85%, 100% { background: #f4f5f7; border-color: #c7cdd6; }
    8%, 60%       { background: #ffe7b0; border-color: #e0a100; }
}

.dancelooper-tutorial > div > div:last-child
{
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

.dancelooper-tutorial button
{
    margin: 0 4px;
    padding: 10px 12px;
    white-space: nowrap;
    font-size: 15px;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: #eef0f4;
    color: #22252b;
}

.dancelooper-tutorial #dancelooper_tutorial_next,
.dancelooper-tutorial #dancelooper_tutorial_connect
{
    background: #2f6fed;
    color: #ffffff;
}

/* ---- Splash: the preview picker only matters on a wide screen ---- */

.dancelooper-splash-card #dancelooper_splash_options > #dancelooper_splash_preview
{
    display: none;
}

@media (min-width: 601px)
{
    html[data-skin="twobutton"] .dancelooper-splash-card #dancelooper_splash_options > #dancelooper_splash_preview
    {
        display: flex;
    }
}

/* ---- Walkthrough visuals: a recreation of what each slide is about ----
   Built by twobutton_tutorial_visual_html() from parts (data-part), animated per
   slide kind (data-kind on the container). Independent of the page behind the
   overlay - there may be no video and no pedal there. */

.dancelooper-tutorial #dancelooper_tutorial_visual
{
    box-sizing: border-box;
    width: 100%;
    max-width: 290px;
    margin: 10px auto 8px auto;
    padding: 8px;
    background: #eef0f4;
    border-radius: 14px;
    text-align: left;
}

.dancelooper-tutorial #dancelooper_tutorial_visual > div + div
{
    margin-top: 6px;
}

/* the video */
.dancelooper-tutorial [data-part="video"]
{
    position: relative;
    height: 64px;
    background: #14161b;
    border-radius: 8px;
    color: #ffffff;
}

.dancelooper-tutorial [data-part="video"] > span
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 28px;
    line-height: 64px;
    text-align: center;
    opacity: 0;
}@keyframes dancelooper-mock-show-first
{
    0%, 45%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes dancelooper-mock-show-second
{
    0%, 45%   { opacity: 0; }
    50%, 95%  { opacity: 1; }
    100%      { opacity: 0; }
}

/* the Clip bar */
.dancelooper-tutorial [data-part="bar"]
{
    position: relative;
    height: 16px;
    background: #e3e6ec;
    border-radius: 8px;
}

.dancelooper-tutorial [data-part="bar"] > i:nth-child(1)
{
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 20%;
    width: 50%;
    background: #2f6fed;
    border-radius: 5px;
}

.dancelooper-tutorial [data-part="bar"] > i:nth-child(2)
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20%;
    width: 4px;
    margin-left: -2px;
    background: #22252b;
    border-radius: 2px;
}.dancelooper-tutorial [data-kind="create"] [data-part="bar"] > i:nth-child(1)
{
    width: 0;
}.dancelooper-tutorial [data-kind="jump"] [data-part="bar"] > i:nth-child(2)
{
    width: 14px;
    margin-left: -7px;
    border-radius: 50%;
}

@keyframes dancelooper-mock-play
{
    0%   { left: 20%; }
    100% { left: 70%; }
}

@keyframes dancelooper-mock-rewind
{
    0%       { left: 55%; }
    45%      { left: 65%; }
    50%, 100% { left: 0%; }
}

@keyframes dancelooper-mock-loop
{
    0%   { left: 20%; }
    100% { left: 70%; }
}

@keyframes dancelooper-mock-grow
{
    0%, 8%    { width: 0; }
    60%, 85%  { width: 50%; }
    100%      { width: 0; }
}

@keyframes dancelooper-mock-follow
{
    0%, 8%    { left: 20%; }
    60%, 85%  { left: 70%; }
    100%      { left: 20%; }
}

@keyframes dancelooper-mock-drag
{
    0%, 100% { left: 5%; }
    50%      { left: 92%; }
}

/* the two pads */
.dancelooper-tutorial [data-part="pads"]
{
    display: flex;
}

.dancelooper-tutorial [data-part="pads"] > div
{
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px 8px;
    background: #f4f5f7;
    border: 2px solid #c7cdd6;
    border-radius: 10px;
}

.dancelooper-tutorial [data-part="pads"] > div + div
{
    margin-left: 8px;
}

.dancelooper-tutorial [data-part="pads"] span
{
    display: block;
    font-size: 11px;
    color: #4b5563;
}

.dancelooper-tutorial [data-part="pads"] span:first-child
{
    font-size: 13px;
    font-weight: bold;
    color: #22252b;
}/* the words under the pads change with the slide's gesture */
.dancelooper-tutorial [data-kind="double-1"] [data-part="pads"] > div:nth-child(1) span:last-child::after
{
    content: " (double)";
}

.dancelooper-tutorial [data-kind="loop"] [data-part="pads"] > div:nth-child(2) span:last-child::after
{
    content: " (double)";
}

/* Load Media screen recreation */
.dancelooper-tutorial [data-part="cards"] > span
{
    display: block;
    width: 120px;
    margin: 0 auto;
    padding: 8px 0;
    background: #2f6fed;
    border-radius: 6px;
    color: #ffffff;
    font-size: 13px;
    text-align: center;
}

.dancelooper-tutorial [data-part="cards"] > div
{
    display: flex;
    margin-top: 8px;
}

.dancelooper-tutorial [data-part="cards"] > div > span
{
    flex: 1 1 0;
    padding: 12px 4px;
    background: #f7f9fc;
    border: 1px solid #d8dbe2;
    border-radius: 8px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    color: #22252b;
}

.dancelooper-tutorial [data-part="cards"] > div > span + span
{
    margin-left: 8px;
}

@keyframes dancelooper-mock-pulse
{
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* the keys */
.dancelooper-tutorial [data-part="keys"]
{
    display: flex;
    justify-content: center;
}

.dancelooper-tutorial [data-part="keys"] > div
{
    flex: 1 1 0;
    text-align: center;
}

.dancelooper-tutorial [data-part="keys"] > div > span:first-child
{
    display: inline-block;
    min-width: 34px;
    padding: 6px 10px;
    background: #ffffff;
    border: 1px solid #c7cdd6;
    border-bottom-width: 3px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    color: #22252b;
}

.dancelooper-tutorial [data-part="keys"] > div > span:last-child
{
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #4b5563;
}@keyframes dancelooper-mock-key
{
    0%, 40%, 100% { background: #ffffff; }
    10%, 30%      { background: #d3f3df; }
}

/* the two foot pedals (a drawing, for the connect slide) */
.dancelooper-tutorial [data-part="pedals"]
{
    display: flex;
    justify-content: center;
}

.dancelooper-tutorial [data-part="pedals"] > span
{
    width: 64px;
    height: 20px;
    background: #22252b;
    border-radius: 10px 10px 4px 4px;
}

.dancelooper-tutorial [data-part="pedals"] > span + span
{
    margin-left: 14px;
}

/* the "no pedal yet" note and the button that fixes it */
.dancelooper-tutorial [data-part="connect"]
{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dancelooper-tutorial [data-part="connect"] > span:first-child
{
    font-size: 11px;
    font-weight: bold;
    color: #7a4b00;
}

.dancelooper-tutorial [data-part="connect"] > span:last-child
{
    padding: 4px 10px;
    background: #fff8e6;
    border: 1px solid #f0c36d;
    border-radius: 14px;
    font-size: 11px;
    font-weight: bold;
    color: #7a4b00;
}

/* Short screens: the real pads sit at the bottom, live, and the card must not
   run into them - the recreation shrinks. */
@media (max-height: 720px)
{
    .dancelooper-tutorial #dancelooper_tutorial_visual
    {
        padding: 6px;
        max-width: 250px;
    }

    .dancelooper-tutorial [data-part="video"]
    {
        height: 44px;
    }

    .dancelooper-tutorial [data-part="video"] > span
    {
        font-size: 22px;
        line-height: 44px;
    }

    .dancelooper-tutorial [data-part="pedals"] > span
    {
        height: 14px;
    }
}

/* ---- "See this again" note, under the logo after the demo is skipped ---- */

html[data-skin="twobutton"] body .dancelooper-app
{
    position: relative;
}

.dancelooper-hint-toast
{
    position: absolute;
    top: 48px;
    left: 10px;
    z-index: 9500;
    max-width: 250px;
    box-sizing: border-box;
    padding: 9px 13px;
    /* The splash's own colors: its cream card, outlined in the logo's red. */
    background: #fffdf8;
    border: 2px solid #C8472F;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    color: #1D1B16;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* The countdown pie: drawn by dancelooper_hint_toast_show() (full at first,
   empty when the note goes away). */
.dancelooper-hint-toast #dancelooper_hint_toast_pie
{
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    border-radius: 50%;
    background: #C8472F;
}

/* the little arrow up at the logo: an outlined triangle in the same colors */
.dancelooper-hint-toast::before,
.dancelooper-hint-toast::after
{
    content: "";
    position: absolute;
    left: 18px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.dancelooper-hint-toast::before
{
    top: -10px;
    border-bottom: 8px solid #C8472F;
}

.dancelooper-hint-toast::after
{
    top: -7px;
    border-bottom: 8px solid #fffdf8;
}

/* ---- Walkthrough slide text: what they're doing, how, short bullets ---- */

/* HOW: the gesture, as a pill under the title. */
.dancelooper-tutorial #dancelooper_tutorial_how
{
    display: inline-block;
    margin: 2px 0 6px 0;
    padding: 4px 12px;
    background: #e9f0ff;
    border-radius: 14px;
    font-size: 14px;
    font-weight: bold;
    color: #1f4fb0;
}

.dancelooper-tutorial #dancelooper_tutorial_list
{
    margin: 4px 0 0 0;
    padding: 0 0 0 4px;
    list-style: none;
    text-align: left;
}

.dancelooper-tutorial #dancelooper_tutorial_list > li
{
    position: relative;
    margin-bottom: 5px;
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.35;
    color: #22252b;
}

.dancelooper-tutorial #dancelooper_tutorial_list > li::before
{
    content: "";
    position: absolute;
    left: 4px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2f6fed;
}

/* the "Try it" line reads as the call to action */
.dancelooper-tutorial #dancelooper_tutorial_list > li:last-child:not(:only-child)
{
    font-weight: bold;
}

/* The recreated pads are live: they take presses like the real ones and show the
   same colors, pausing their demo animation while one is being pressed. */
.dancelooper-tutorial [data-part="pads"] > div
{
    cursor: pointer;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}.dancelooper-tutorial [data-part="pads"] > div[data-state="down"]
{
    background: #dbe7ff;
    border-color: #2f6fed;
}

.dancelooper-tutorial [data-part="pads"] > div[data-state="click"]
{
    background: #d3f3df;
    border-color: #2e9e58;
}

.dancelooper-tutorial [data-part="pads"] > div[data-state="double"]
{
    background: #eadcfb;
    border-color: #7c4dd6;
}

.dancelooper-tutorial [data-part="pads"] > div[data-state="hold"]
{
    background: #ffe7b0;
    border-color: #e0a100;
}

.dancelooper-tutorial [data-part="pads"] > div[data-state="release"]
{
    background: #d7f0f4;
    border-color: #1f8aa0;
}

/* Exit demo is the quiet way out, at the right of Next. */
.dancelooper-tutorial #dancelooper_tutorial_skip
{
    background: none;
    color: #4b5563;
    text-decoration: underline;
    font-weight: normal;
}

/* ---- Walkthrough practice: still until it is done ----
   Nothing moves while waiting - a press either colors the pad (recognized), or
   shows "please try ... again" (wrong one). Only a correct gesture plays the
   motion below, once, while the Next button counts down (data-success). */

.dancelooper-tutorial [data-part="video"] > span:nth-child(1)
{
    opacity: 1;
}

.dancelooper-tutorial [data-kind="jump"] [data-part="bar"] > i:nth-child(2)
{
    left: 40%;
}

.dancelooper-tutorial #dancelooper_tutorial_visual[data-success="1"][data-kind="play-pause"] [data-part="video"] > span:nth-child(1)
{
    animation: dancelooper-mock-show-first 2.4s infinite;
}

.dancelooper-tutorial #dancelooper_tutorial_visual[data-success="1"][data-kind="play-pause"] [data-part="video"] > span:nth-child(2)
{
    animation: dancelooper-mock-show-second 2.4s infinite;
}

.dancelooper-tutorial #dancelooper_tutorial_visual[data-success="1"][data-kind="play-clip"] [data-part="bar"] > i:nth-child(2)
{
    animation: dancelooper-mock-play 2.4s linear infinite;
}

.dancelooper-tutorial #dancelooper_tutorial_visual[data-success="1"][data-kind="loop"] [data-part="bar"] > i:nth-child(2)
{
    animation: dancelooper-mock-loop 1.6s linear infinite;
}

.dancelooper-tutorial #dancelooper_tutorial_visual[data-success="1"][data-kind="create"] [data-part="bar"] > i:nth-child(1)
{
    animation: dancelooper-mock-grow 2.2s ease-in-out infinite;
}

.dancelooper-tutorial #dancelooper_tutorial_visual[data-success="1"][data-kind="create"] [data-part="bar"] > i:nth-child(2)
{
    animation: dancelooper-mock-follow 2.2s ease-in-out infinite;
}

/* ---- Feedback line: wrong gesture / success ---- */

.dancelooper-tutorial #dancelooper_tutorial_feedback
{
    margin: 6px 0 0 0;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
}

.dancelooper-tutorial #dancelooper_tutorial_feedback[data-kind="wrong"]
{
    background: #fdebd0;
    color: #8a4b00;
}

.dancelooper-tutorial #dancelooper_tutorial_feedback[data-kind="ok"]
{
    background: #d3f3df;
    color: #1d6b3a;
}

/* ---- The countdown pie on the Next button ---- */

.dancelooper-tutorial #dancelooper_tutorial_next_pie
{
    display: none;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border-radius: 50%;
    background: #ffffff;
}

/* "Connect a pedal to run this demo with the pedal." under each slide's demo */
.dancelooper-tutorial #dancelooper_tutorial_connect_link
{
    display: block;
    width: 100%;
    margin: 8px 0 0 0;
    padding: 8px 10px;
    background: #fff8e6;
    border: 1px solid #f0c36d;
    border-radius: 10px;
    color: #7a4b00;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.25;
    cursor: pointer;
}

/* "Pedals connected" note on the pedals-ready slide */
.dancelooper-tutorial [data-part="connected"]
{
    text-align: center;
}

.dancelooper-tutorial [data-part="connected"] > span
{
    display: inline-block;
    padding: 4px 12px;
    background: #d3f3df;
    border-radius: 14px;
    font-size: 12px;
    font-weight: bold;
    color: #1d6b3a;
}


/* ---- What is on, in color ----
   One color per thing, the same in three places: the pad that owns it (steady,
   data-on), the flash when a gesture is recognized (data-state, above), and the
   status line's stripe (data-mode on the strip).
     green  = playing straight through     blue   = playing the clip
     purple = looping the clip             amber  = creating a clip
     orange = counting down a delay        dashed blue = paused, clip armed
   A recognized press still flashes over the steady color while it lasts. */

html[data-skin="twobutton"] .dancelooper-actions [role="button"][data-on="play"]
{
    background: #d9f3e3;
    border-color: #2e9e58;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"][data-on="clip"]
{
    background: #dbe7ff;
    border-color: #2f6fed;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"][data-on="loop"]
{
    background: #eadcfb;
    border-color: #7c4dd6;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"][data-on="create"]
{
    background: #ffe7b0;
    border-color: #e0a100;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"][data-on="delay"]
{
    background: #ffefd2;
    border-color: #f0b93d;
}

html[data-skin="twobutton"] .dancelooper-actions [role="button"][data-on="paused_clip"]
{
    background: #f0f5ff;
    border: 2px dashed #2f6fed;
}

/* the status line: a colored stripe and matching text */
html[data-skin="twobutton"] .dancelooper-strip > div:nth-child(1)
{
    padding-left: 8px;
    border-left: 6px solid #c7cdd6;
    border-radius: 3px;
}

html[data-skin="twobutton"] .dancelooper-strip[data-mode="play"] > div:nth-child(1)
{
    border-left-color: #2e9e58;
    color: #1d6b3a;
}

html[data-skin="twobutton"] .dancelooper-strip[data-mode="clip"] > div:nth-child(1)
{
    border-left-color: #2f6fed;
    color: #1f4fb0;
}

html[data-skin="twobutton"] .dancelooper-strip[data-mode="loop"] > div:nth-child(1)
{
    border-left-color: #7c4dd6;
    color: #5a34a8;
}

html[data-skin="twobutton"] .dancelooper-strip[data-mode="create"] > div:nth-child(1)
{
    border-left-color: #e0a100;
    color: #8a6100;
}

html[data-skin="twobutton"] .dancelooper-strip[data-mode="delay"] > div:nth-child(1)
{
    border-left-color: #f0b93d;
    color: #b7791f;
}

html[data-skin="twobutton"] .dancelooper-strip[data-mode="paused_clip"] > div:nth-child(1)
{
    border-left-color: #2f6fed;
    color: #22252b;
}