/* Captions > Highlight: the card list, the 9:16 picture and the three looks drawn on it
   (Captions with the blue pill, Big type for HL cards, the Kinetic word stack).
   Sizes are the panel's own look table (hl-look-table.js, a 1080 x 1920 frame) times
   212 / 1080, the width of the picture here. The fonts are the panel's own, cut down
   to Latin (licences: assets/v3/fonts/LICENSE-OFL-Inter.txt, assets/v3/fonts/LICENSE-OFL-Oswald.txt). */

@font-face{font-family:"KR Inter Display";font-weight:500;font-display:swap;src:url(/assets/v3/fonts/InterPFDisplay-Medium.woff2) format("woff2")}
@font-face{font-family:"KR Inter Display";font-weight:600;font-display:swap;src:url(/assets/v3/fonts/InterPFDisplay-SemiBold.woff2) format("woff2")}
@font-face{font-family:"KR Inter Display";font-weight:700;font-display:swap;src:url(/assets/v3/fonts/InterPFDisplay-Bold.woff2) format("woff2")}
@font-face{font-family:"KR Oswald";font-weight:500;font-display:swap;src:url(/assets/v3/fonts/Oswald-Medium.woff2) format("woff2")}
@font-face{font-family:"KR Oswald";font-weight:600;font-display:swap;src:url(/assets/v3/fonts/Oswald-SemiBold.woff2) format("woff2")}

.hl-split{display:grid;grid-template-columns:minmax(0,1fr) 212px;gap:12px;align-items:start;position:relative}
.hl-left{display:flex;flex-direction:column;gap:8px;min-width:0}

/* the two (or three) look chips at the top of the settings */
.hl-looks{display:flex;gap:6px;flex-wrap:wrap}
.hl-look{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;background:var(--bg-el);
         font-size:11px;color:var(--t1);border:1px solid transparent;transition:background .3s,border-color .3s,opacity .3s,transform .3s var(--ease)}
.hl-look i{font-style:normal;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.hl-look.on{background:var(--acc-sub);border-color:var(--acc-bd)}
.hl-look.k i{color:var(--coral)}
.hl-look.hide{opacity:0;transform:scale(.85)}

/* the card list */
.hl-cards{display:flex;flex-direction:column;gap:5px}
.hl-card{background:var(--bg-input);border:1px solid var(--bd);border-radius:7px;padding:6px 8px;transition:border-color .3s,background .3s}
.hl-card.now{border-color:var(--acc-bd);background:var(--acc-sub)}
.hl-ch{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--t3);margin-bottom:4px}
.hl-ch .tc{font-family:var(--mono);font-size:9.5px}
.hl-mk{margin-left:auto;min-width:22px;height:17px;padding:0 5px;border-radius:5px;background:var(--bg-el);color:var(--t2);font-size:9.5px;
       font-weight:700;display:inline-flex;align-items:center;justify-content:center;transition:background .25s,color .25s}
.hl-mk + .hl-mk{margin-left:0}
.hl-mk.on{background:#376CFF;color:#fff}
.hl-mk.k.on{background:var(--coral);color:#10211e}
.hl-ws{display:flex;flex-wrap:wrap;gap:3px}
.hl-w{font-size:11.5px;padding:1px 5px;border-radius:4px;color:var(--t2);transition:background .2s,color .2s}
.hl-w.said{color:var(--t1)}
.hl-w.on{background:#376CFF;color:#fff}

.hl-actions{display:flex;align-items:center;gap:8px}
.hl-play::before{content:"";width:0;height:0;border:5px solid transparent;border-left:8px solid currentColor;border-right:0;margin-right:7px}

/* the picture: 212 x 377, the sequence frame */
.hl-pic{position:relative;width:212px;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#000;
        font-family:"KR Inter Display",var(--sans)}
.hl-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% 50%}
.hl-shade{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55));
          opacity:0;transition:opacity .4s}
.hl-shade.on{opacity:1}
.hl-tag{position:absolute;left:8px;top:8px;font:600 9px/1 var(--mono);letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.55);
        padding:4px 6px;border-radius:4px;opacity:0;transition:opacity .3s}
.hl-tag.on{opacity:1}
.hl-tc{position:absolute;right:8px;top:8px;font:500 9px/1 var(--mono);color:rgba(255,255,255,.8);background:rgba(0,0,0,.45);padding:4px 6px;border-radius:4px}

/* Captions look (captions-pill): 72 px type, 96 px lines, x 80, last baseline at y 1440;
   said words white, coming words at 45 %, the blue pill jumps to the spoken word. */
.hl-cap{position:absolute;left:15.7px;right:16px;bottom:25%;font-weight:600;font-size:14.1px;line-height:18.8px;letter-spacing:-.04em;
        color:#EDF2F5;text-shadow:0 .4px 4.7px rgba(0,0,0,.35)}
.hl-cap span{color:rgba(237,242,245,.45);border-radius:2.4px;padding:3.9px 2.4px;margin:-3.9px -2.4px;transition:color .1s}
.hl-cap span.said{color:#fff}
.hl-cap span.on{color:#fff;background:#376CFF;text-shadow:none}

/* Big type (big-type): 130 px type, 119 px lines, x 80, last baseline at y 1592, the rest at 60 %,
   the spoken word bold. Each word rises 8 px as it fades in. */
.hl-big{position:absolute;left:15.7px;width:62%;bottom:17%;font-size:25.5px;line-height:23.4px;letter-spacing:-.05em;color:#EDF2F5;
        text-shadow:0 .8px 7.8px rgba(0,0,0,.35)}
.hl-big div{white-space:nowrap}
.hl-big span{display:inline-block;font-weight:500;opacity:0;transform:translateY(1.6px);
             transition:opacity .3s var(--ease),transform .3s var(--ease)}
.hl-big span.in{opacity:.6;transform:none}
.hl-big span.on{opacity:1;font-weight:700}

/* Kinetic word stack (kinetic-stack): 140 px type, three words to a row, each word its own block,
   gap 28, centred on the middle of the frame. */
.hl-kin{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;
        gap:5.5px;font-weight:500;font-size:27.5px;line-height:1;letter-spacing:-.02em;color:#fff;text-shadow:0 .8px 7.8px rgba(0,0,0,.35)}
.hl-kin div{display:flex;gap:5.5px}
.kb{position:relative;display:inline-block;padding:1px 2px;opacity:0;outline:1px dashed transparent;outline-offset:2px;transition:outline-color .2s}
.kb.sel{outline-color:rgba(69,224,200,.95)}
.kb.drop{animation:kDrop .42s cubic-bezier(.2,.8,.3,1) forwards}
.kb.slam{animation:kSlam .34s cubic-bezier(.5,0,.75,0) forwards}
.kb.shown{opacity:1}
@keyframes kDrop{0%{opacity:0;transform:translateY(-14px)}30%{opacity:1}66%{transform:translateY(2px)}100%{opacity:1;transform:none}}
@keyframes kSlam{0%{opacity:0;transform:scale(1.8);filter:blur(4px)}25%{opacity:1}60%{transform:scale(.95);filter:blur(0)}100%{opacity:1;transform:none}}

/* the block's right-click menu and the animation picker, over the card list */
.k-menu,.k-pick{position:absolute;z-index:3;background:#2C2C33;border:1px solid var(--bd2);border-radius:8px;
                box-shadow:0 14px 34px -10px rgba(0,0,0,.75);opacity:0;transform:translateY(4px) scale(.98);transform-origin:top right;
                transition:opacity .2s,transform .25s var(--ease);pointer-events:none}
.k-menu.in,.k-pick.in{opacity:1;transform:none}
.k-menu{right:224px;top:118px;width:148px;padding:4px}
.k-menu div{display:flex;align-items:center;padding:5px 8px;border-radius:5px;font-size:11px;color:var(--t1)}
.k-menu div.on{background:var(--acc-sub)}
.k-menu div em{margin-left:auto;font-style:normal;color:var(--t3)}
.k-menu hr{border:0;border-top:1px solid var(--bd);margin:3px 2px}
.k-pick{right:224px;top:40px;width:330px;padding:8px}
.k-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.k-tile{background:var(--bg-input);border:1px solid var(--bd);border-radius:6px;padding:6px 4px 5px;text-align:center;font-size:9.5px;color:var(--t2);
        transition:border-color .2s,background .2s}
.k-tile.on{border-color:var(--coral);background:rgba(69,224,200,.12);color:var(--t1)}
.k-tile b{display:block;height:18px;font:500 13px/18px "KR Inter Display",var(--sans);color:#fff;margin-bottom:2px}
.k-pick.in .k-tile b{animation:kTile 1.6s var(--ease) infinite}
.k-pick.in .k-tile:nth-child(odd) b{animation-delay:.4s}
@keyframes kTile{0%{opacity:0;transform:translateY(-5px)}25%,80%{opacity:1;transform:none}100%{opacity:0}}
.k-sliders{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;font-size:9.5px;color:var(--t3)}
.k-sliders i{display:block;height:3px;border-radius:2px;background:var(--bg-el);margin-top:4px;position:relative}
.k-sliders i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v,50%);border-radius:2px;background:var(--coral)}