.dc:has(> .dl) { padding: 0; min-height: 0; }
html:not(.is-me) .dc:has(> .dl) { cursor: auto; }
html.is-me .dc[aria-busy='true'] > .dl { visibility: hidden; }
.dc-static.dl {
--dl-ink: #f2f2f5;
--dl-ink: light-dark(#17171a, #f2f2f5);
--dl-2: #ccccd6;
--dl-2: light-dark(#45454d, #ccccd6);
--dl-3: #b8b8c2;
--dl-3: light-dark(#5c5c66, #b8b8c2);
--dl-faint: #85858f;
--dl-faint: light-dark(#aeaeb2, #85858f);
--dl-card: #111114;
--dl-card: light-dark(#ffffff, #111114);
--dl-soft: #1c1c21;
--dl-soft: light-dark(#f4f4f7, #1c1c21);
--dl-line: #2f2f37;
--dl-line: light-dark(#e3e3e8, #2f2f37);
--dl-band: #19191e;
--dl-band: light-dark(#f6f3ee, #19191e);
--dl-cream: #4a3820;
--dl-cream: light-dark(#f7f0e6, #4a3820);
--dl-cream-band: #2a2219;
--dl-cream-band: light-dark(#f7f0e6, #2a2219);
--dl-amber: #ffc170;
--dl-amber: light-dark(#a35300, #ffc170);
--dl-green: #5cedac;
--dl-green: light-dark(#0f7b4d, #5cedac);
--dl-green-bg: #1c4a35;
--dl-green-bg: light-dark(#e8f3ec, #1c4a35);
--dl-red: #ff8590;
--dl-red: light-dark(#d90429, #ff8590);
--dl-red-bg: #5a2431;
--dl-red-bg: light-dark(#fdecef, #5a2431);
--dl-wine: #5c1f2b;
--dl-wine: light-dark(#7a1f2e, #5c1f2b);
--dl-btn: #f2f2f5;
--dl-btn: light-dark(#17171a, #f2f2f5);
--dl-btn-ink: #111114;
--dl-btn-ink: light-dark(#ffffff, #111114);
--dl-bar: #2f2f37;
--dl-bar: light-dark(#dfe3f3, #2f2f37);
--dl-btn-hover: #ffffff;
--dl-btn-hover: light-dark(#34343a, #ffffff);
--dl-eo: cubic-bezier(0, 0, 0.58, 1);
--dl-eio: cubic-bezier(0.42, 0, 0.58, 1);
--dl-cb: cubic-bezier(0.5, 0, 0.5, 1);
--dl-ease: cubic-bezier(0.22, 1, 0.36, 1);
max-width: 1200px;
margin: 0 auto;
color: var(--dl-ink);
font-size: 15px;
line-height: 1.4;
letter-spacing: 0;
text-wrap: wrap;
}
.dl :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
.dl :where(ul, ol) { padding: 0; list-style: none; }
.dl :where(h1, h2, h3) { letter-spacing: 0; text-wrap: wrap; }
.dl a { color: inherit; text-decoration: none; }
.dl svg { flex: none; }
.dl s { text-decoration-thickness: 1px; }
.dl-ms, .dl .dl-practice, .dl-tab-short { display: none; }
.dl-k { font-size: 12px; line-height: 1.4; font-weight: 800; text-transform: uppercase; color: var(--dl-amber); }
.dl-k.is-grey { color: var(--dl-3); }
.dl .dl-h2 { margin-top: 10px; font-size: 40px; line-height: 1.12; font-weight: 800; color: var(--dl-ink); }
.dl .dl-h2.is-44 { font-size: 44px; line-height: 1.1; }
.dl-sec { padding: 88px 0; }
.dl-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 24px 0 22px;
border-radius: 999px; font-size: 16px; line-height: 1.4; font-weight: 700; white-space: nowrap;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
@media (prefers-reduced-motion: no-preference) { .dl-btn:active { transform: scale(0.97); } }
.dl-btn.is-dark { background: var(--dl-btn); color: var(--dl-btn-ink); }
.dl-btn.is-dark:hover { background: var(--dl-btn-hover); }
.dl-btn.is-ghost { gap: 6px; padding: 0 20px 0 18px; border: 1.5px solid var(--dl-line); background: var(--dl-card); color: var(--dl-ink); font-size: 15px; }
.dl-btn.is-ghost:hover { border-color: var(--dl-3); }
.dl-btn.is-white { height: 49px; padding: 0 24px; background: #fff; color: #17171a; font-size: 15px; }
.dl-btn.is-white:hover { background: #f4eef0; }
.dl-g { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; }
.dl-g img { display: block; width: 18px; height: 18px; }
.dl-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.dl-checks li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--dl-2); }
.dl-checks svg { color: var(--dl-green); }
.dl-checks.is-white li { color: rgba(255, 255, 255, 0.9); }
.dl-checks.is-white svg { color: #fff; }
.dl-chip {
position: absolute; z-index: 2; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff;
font-size: 12px; line-height: 1.4; font-weight: 700;
}
.dl-chip.is-sm { top: 12px; left: 12px; font-size: 11px; line-height: 1.35; }
.dl-chip.is-xs { top: 12px; left: 14px; padding: 4px 10px; background: rgba(0, 0, 0, 0.55); font-size: 11px; }
.dl-dots { display: flex; flex: none; gap: 4px; }
.dl-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--dl-line); }
.dl-dots i.is-ok { background: var(--dl-green); }
.dl-dots i.is-on { width: 18px; background: var(--dl-amber); }
.dl-dots.is-sm i { width: 7px; height: 7px; }
.dl-dots.is-sm i.is-on { width: 16px; }
.dl-caret { display: inline-block; flex: none; width: 2px; height: 18px; background: currentColor; }
.dl-bars { display: flex; align-items: center; gap: 2px; height: 20px; }
.dl-bars i { width: 3px; border-radius: 1.5px; background: var(--dl-line); }
.dl-bars i.is-on { background: var(--dl-amber); }
.dl-bars.is-big { gap: 3px; height: 22px; }
.dl-bars.is-big i { width: 4px; border-radius: 2px; }
.dl-line { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 8px; font-weight: 700; color: var(--dl-ink); }
.dl-line.is-24 { font-size: 24px; line-height: 1.4; }
.dl-fix { display: inline-flex; flex-direction: column; align-items: center; }
.dl-fix s { font-size: 13px; line-height: 1.4; font-weight: 700; color: var(--dl-red); }
.dl-fix s.is-plain { text-decoration: none; }
.dl-fix b { padding: 0 8px 2px; border-bottom: 2px solid var(--dl-amber); border-radius: 6px; background: var(--dl-cream); color: var(--dl-amber); font-weight: 800; }
.dl-fix.is-left { align-items: flex-start; gap: 2px; }
.dl-fix.is-left s { padding-left: 8px; }
.dl-fb { padding: 10px 14px; border-radius: 14px; background: var(--dl-cream); color: var(--dl-ink); font-size: 13px; line-height: 1.45; font-weight: 600; }
.dl-fb.is-slide { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; color: var(--dl-2); line-height: 1.4; font-weight: 500; }
.dl-tag { display: inline-block; padding: 0 6px; border-bottom: 2px solid; border-radius: 6px; font-weight: 700; }
.dl-tag.is-ok { border-color: var(--dl-green); background: var(--dl-green-bg); color: var(--dl-green); }
.dl-tag.is-bad { border-color: var(--dl-red); background: var(--dl-red-bg); color: var(--dl-red); }
.dl-fix > .dl-tag { padding: 0 6px; font-weight: 700; }
.dl-fix.is-sm s { font-size: 10px; line-height: 1.4; }
.dl-blank { display: inline-flex; align-items: center; flex: none; width: 84px; height: 26px; padding-left: 8px; border-bottom: 2px solid var(--dl-ink); border-radius: 6px; color: var(--dl-ink); }
.dl-blank.is-white { background: var(--dl-card); }
.dl-blank.is-grey { width: 44px; height: 24px; padding-left: 6px; background: var(--dl-soft); }
.dl-blank.is-grey .dl-caret { height: 16px; }
.dl-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 56px; align-items: center; padding: 64px 0 72px; }
.dl-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.dl-pill {
display: inline-flex; align-items: center; gap: 8px; height: 29px; padding: 0 12px; border-radius: 999px;
background: var(--dl-cream); color: var(--dl-amber); font-size: 12px; line-height: 1.4; font-weight: 800; text-transform: uppercase;
}
.dl .dl-h1 { max-width: 560px; font-size: clamp(40px, 4.2cqi, 60px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; color: var(--dl-ink); }
.dl-h1 em { font-style: normal; color: var(--dl-amber); }
.dl-lede { max-width: 540px; font-size: 19px; line-height: 1.55; color: var(--dl-3); }
.dl-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.dl-noscript { color: var(--dl-3); font-size: 14px; }
.dl-demo {
justify-self: end; width: 100%; max-width: 540px; border: 1px solid var(--dl-line); border-radius: 26px; overflow: hidden;
background: var(--dl-card); box-shadow: 0 24px 56px light-dark(rgba(23, 23, 26, 0.12), rgba(0, 0, 0, 0.5));
}
.dl-demo-top { display: flex; align-items: center; gap: 8px; height: 41px; padding: 0 18px; font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--dl-faint); }
.dl-demo-top > span:first-child { flex: 1; min-width: 0; }
.dl-demo-video { position: relative; aspect-ratio: 538 / 264; overflow: hidden; background: #1d1d22; }
.dl-demo-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dl-play {
position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center;
width: 44px; height: 46px; border-radius: 999px; background: #fff; color: #17171a;
}
.dl-play svg { margin-left: 2px; }
.dl-demo-answer { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; }
.dl-demo-q { display: flex; flex-direction: column; gap: 8px; }
.dl-demo-k { font-size: 12px; line-height: 1.4; font-weight: 800; color: var(--dl-3); }
.dl-facts { background: var(--dl-cream-band); box-shadow: 0 0 0 100vmax var(--dl-cream-band); clip-path: inset(0 -100vmax); }
.dl-facts ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 48px; padding: 22px 0; }
.dl-facts li { display: flex; align-items: baseline; gap: 8px; }
.dl-facts b { font-size: 20px; line-height: 1.4; font-weight: 800; color: var(--dl-ink); }
.dl-facts span { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--dl-2); }
.dl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.dl-step { display: flex; flex-direction: column; border: 1px solid var(--dl-line); border-radius: 24px; overflow: hidden; background: var(--dl-card); }
.dl-step-pic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 170px; background: var(--dl-cream-band); }
.dl-step-t { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px 24px; }
.dl-step h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; line-height: 1.4; font-weight: 700; }
.dl-n { display: grid; place-items: center; height: 23px; padding: 0 9px; border-radius: 999px; background: var(--dl-btn); color: var(--dl-btn-ink); font-size: 12px; line-height: 1.4; font-weight: 800; }
.dl-step p { font-size: 15px; line-height: 1.5; color: var(--dl-3); }
.dl-player { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--dl-card); }
.dl-player-go { display: grid; place-items: center; width: 27px; height: 26px; border-radius: 999px; background: var(--dl-btn); color: var(--dl-btn-ink); }
.dl-player-go svg { margin-left: 1px; }
.dl-chips { display: flex; gap: 6px; }
.dl-chips span { padding: 5px 10px; border-radius: 999px; background: var(--dl-card); font-size: 12px; line-height: 1.4; font-weight: 700; }
.dl-card-sm { display: inline-flex; align-items: center; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--dl-card); font-size: 16px; line-height: 1.4; font-weight: 700; }
.dl-typing { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px 2px; border-bottom: 2px solid var(--dl-amber); color: var(--dl-amber); font-weight: 800; }
.dl-card-sm.is-col { flex-direction: column; align-items: flex-start; gap: 8px; }
.dl-verdict, .dl-verdict > span { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; line-height: 1.4; }
.dl-verdict .is-bad { color: var(--dl-red); }
.dl-verdict .is-ok { color: var(--dl-green); }
.dl-verdict b { font-weight: 800; }
.dl-card-sm small { font-size: 11px; line-height: 1.4; font-weight: 700; color: var(--dl-2); }
.dl-modes { padding: 96px 0 88px; background: var(--dl-band); box-shadow: 0 0 0 100vmax var(--dl-band); clip-path: inset(0 -100vmax); }
.dl-modes-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.dl-aside { font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--dl-3); }
.dl-show { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 36px; }
.dl-tabs { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dl-tab {
position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 13px 18px; margin: 0;
border: 1px solid var(--dl-line); border-radius: 20px; background: var(--dl-card); color: var(--dl-ink);
font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dl-tab:hover { border-color: light-dark(#cfcfd6, #45454f); }
.dl-tab::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--dl-amber); opacity: 0; pointer-events: none; }
.dl-tab[aria-selected='true']:not(.is-leaving)::after { opacity: 1; }
.dl-tab:focus-visible { outline-offset: 3px; border-radius: 20px; }
.dl-tab-name { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 1.4; font-weight: 800; }
.dl-tab-name svg { color: var(--dl-amber); }
.dl-tab-line { font-size: 13px; line-height: 1.45; font-weight: 500; color: var(--dl-3); }
.dl-stage {
display: grid; place-items: center; min-width: 0; min-height: 442px; padding: 51px 44px; border-radius: 24px;
background: var(--dl-cream-band); container: dls / inline-size;
}
.dl-slide {
grid-area: 1 / 1; width: 100%; max-width: 700px; height: 340px; border-radius: 18px; overflow: hidden;
background: var(--dl-card); box-shadow: 0 8px 24px light-dark(rgba(89, 64, 26, 0.07), rgba(0, 0, 0, 0.35));
}
.dl-slide:focus-visible { outline-offset: 4px; border-radius: 18px; }
.dl-slide:not(.is-on):not(.is-out) { visibility: hidden; opacity: 0; translate: 0 14px; }
.dl-slide.is-out { opacity: 0; translate: 0 -10px; }
.dl-slide.is-daily { display: flex; }
.dl-sd-video { position: relative; flex: none; width: 340px; height: 100%; background: #1d1d22; }
.dl-sd-video img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dl-sd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.dl-sd-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; line-height: 1.35; font-weight: 800; text-transform: uppercase; color: var(--dl-amber); }
.dl-sd-k { font-size: 12px; line-height: 1.35; font-weight: 700; color: var(--dl-3); }
.dl-sd-answer { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; }
.dl-sd-answer .dl-line { column-gap: 6px; }
.dl-sd-answer .dl-line > span:not(.dl-fix) { margin-bottom: 2px; }
.dl-sd-answer .dl-fix b { padding: 1px 8px; }
.dl-slide.is-endless { display: flex; flex-direction: column; justify-content: space-between; padding: 24px 28px; }
.dl-se-top { display: flex; align-items: center; gap: 10px; }
.dl-se-top .dl-k { flex: 1; min-width: 0; color: var(--dl-2); }
.dl-seg { display: flex; flex: none; padding: 3px; border-radius: 999px; background: var(--dl-band); }
.dl-seg span { padding: 5px 12px; border-radius: 999px; font-size: 12px; line-height: 1.4; font-weight: 700; color: var(--dl-2); white-space: nowrap; }
.dl-seg .is-on { background: var(--dl-btn); color: var(--dl-btn-ink); }
.dl-se-stream { display: flex; align-items: center; gap: 12px; min-width: 0; height: 147px; }
.dl-se-done {
display: grid; grid-template-columns: 14px auto; align-items: center; gap: 6px; flex: none; padding: 14px; border-radius: 14px;
background: var(--dl-green-bg); color: var(--dl-green); opacity: 0.75;
}
.dl-se-done b { font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--dl-ink); }
.dl-se-done small { grid-column: 1 / -1; font-size: 11px; line-height: 1.4; font-weight: 600; }
.dl-se-now {
flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border: 2px solid var(--dl-ink);
border-radius: 18px; background: var(--dl-card); box-shadow: 0 6px 16px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.4));
}
.dl-se-in { display: flex; align-items: center; gap: 1px; height: 44px; padding: 0 12px; border-radius: 10px; background: var(--dl-cream); font-size: 20px; line-height: 1.4; font-weight: 800; }
.dl-se-in .dl-caret { height: 22px; background: var(--dl-ink); }
.dl-se-now small { font-size: 12px; line-height: 1.4; font-weight: 600; color: var(--dl-3); }
.dl-se-next { display: grid; place-items: center; flex: none; width: 84px; height: 72px; border-radius: 14px; background: var(--dl-band); color: var(--dl-3); opacity: 0.9; }
.dl-se-next.is-far { opacity: 0.45; }
.dl-se-foot { display: flex; align-items: center; gap: 10px; }
.dl-se-foot p { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--dl-2); }
.dl-combo { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border-radius: 999px; background: var(--dl-cream); font-size: 12px; line-height: 1.4; font-weight: 800; }
.dl-combo b { font-size: 14px; color: var(--dl-amber); }
.dl-slide.is-decks { display: flex; gap: 20px; padding: 20px 24px 20px 20px; }
.dl-sk-list { display: flex; flex-direction: column; gap: 4px; flex: none; width: 250px; }
.dl-sk-list .dl-k { padding: 0 0 8px 10px; }
.dl-sk-row { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 10px; border-radius: 10px; color: var(--dl-3); }
.dl-sk-row b { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--dl-2); }
.dl-sk-row small { font-size: 12px; line-height: 1.4; font-weight: 600; color: var(--dl-3); }
.dl-sk-row small.is-due { color: var(--dl-amber); }
.dl-sk-row.is-on { background: var(--dl-band); color: var(--dl-ink); }
.dl-sk-row.is-on b { font-weight: 700; color: var(--dl-ink); }
.dl-sk-clip { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; background: var(--dl-soft); }
.dl-sk-clip img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 12px; }
.dl-sk-cap { font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--dl-3); }
.dl-sk-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--dl-2); }
.dl-sk-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--dl-3); }
.dl-slide.is-yt { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; }
.dl-sy-bar { display: flex; align-items: center; gap: 10px; }
.dl-sy-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--dl-soft); }
.dl-ytlogo { flex: none; }
.dl-sy-mask { display: block; width: 207px; min-width: 0; height: 20px; overflow: hidden; }
.dl-sy-mask span { display: block; white-space: nowrap; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--dl-3); }
.dl-sy-go { display: inline-flex; align-items: center; flex: none; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--dl-btn); color: var(--dl-btn-ink); font-size: 14px; line-height: 1.4; font-weight: 800; white-space: nowrap; }
.dl-sy-video { position: relative; flex: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 213px; padding: 12px 16px 16px; border-radius: 16px; overflow: hidden; background: #1d1d22; }
.dl-sy-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dl-sy-video::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55)); }
.dl-sy-cap {
position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px; max-width: 100%;
padding: 10px 16px; border-radius: 14px; background: var(--dl-card); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--dl-2);
}
.dl-pro { display: flex; align-items: center; gap: 32px; margin-top: 36px; padding: 28px 32px 28px 40px; border-radius: 28px; background: var(--dl-wine); color: #fff; }
.dl-pro-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dl-pro-k { font-size: 11px; line-height: 1.4; font-weight: 800; text-transform: uppercase; opacity: 0.75; }
.dl-pro h3 { font-size: 28px; line-height: 1.4; font-weight: 800; }
.dl-pro .dl-checks { padding-top: 4px; }
.dl-pro-go { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.dl-pro-go p { font-size: 11px; line-height: 1.4; font-weight: 600; opacity: 0.75; }
.dl-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.dl-benefits li { display: flex; flex-direction: column; gap: 12px; min-height: 202px; padding: 24px 24px 26px; border-radius: 22px; background: var(--dl-card); }
.dl-tile { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--dl-cream); color: var(--dl-amber); }
.dl-benefits h3 { font-size: 18px; line-height: 1.3; font-weight: 700; }
.dl-benefits p { font-size: 14px; line-height: 1.5; color: var(--dl-3); }
.dl-faq { display: flex; flex-direction: column; gap: 12px; padding: 16px 0 80px; }
.dl-faq h2 { font-size: 28px; line-height: 1.4; font-weight: 800; }
.dl-q { border-radius: 16px; background: var(--dl-band); }
.dl-q summary { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-radius: 16px; font-size: 16px; line-height: 1.4; font-weight: 700; cursor: pointer; list-style: none; }
.dl-q summary::-webkit-details-marker { display: none; }
.dl-q summary svg { margin-left: auto; color: var(--dl-3); transition: rotate 0.2s ease; }
.dl-q[open] summary svg { rotate: 180deg; }
.dl-q p { margin-top: -8px; padding: 0 22px 16px; font-size: 14px; line-height: 1.5; color: var(--dl-3); }
.dl-end { padding: 0 0 88px; }
.dl-end-box { display: flex; align-items: center; gap: 36px; padding: 40px 48px; border-radius: 32px; background: var(--dl-cream-band); }
.dl-end-box > img { flex: none; width: 110px; height: 158px; object-fit: contain; }
.dl-end-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dl-end h2 { font-size: 32px; line-height: 1.4; font-weight: 800; }
.dl-end p { max-width: 560px; font-size: 17px; line-height: 1.5; color: var(--dl-3); }
@container main (max-width: 1180px) {
.dl-show { grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: 24px; }
.dl-stage { padding: 32px 24px; }
}
@container main (max-width: 1100px) {
.dl-facts ul { column-gap: 32px; }
.dl-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container main (max-width: 1000px) {
.dl-modes-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.dl-show { grid-template-columns: minmax(0, 1fr); }
.dl-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl-stage { min-height: 0; }
}
@container main (max-width: 900px) {
.dl-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 40px; }
.dl-demo { justify-self: start; }
.dl-pro { flex-direction: column; align-items: flex-start; gap: 20px; }
.dl-pro-go { align-items: flex-start; }
.dl-end-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 32px; }
.dl-end-box > img { grid-row: span 2; }
.dl-end-box > .dl-btn { justify-self: start; }
}
@container dls (max-width: 660px) {
.dl-sd-video { width: 44%; }
.dl-se-next.is-far { display: none; }
.dl-sk-list { width: 210px; }
}
@container dls (max-width: 540px) {
.dl-slide { height: auto; }
.dl-slide.is-daily, .dl-slide.is-decks { flex-direction: column; }
.dl-sd-video { width: 100%; height: 190px; }
.dl-sd-video img { object-position: 50% 30%; }
.dl-sd-main { padding: 18px 18px 20px; gap: 12px; }
.dl-sd-answer { padding-top: 6px; gap: 14px; }
.dl-slide.is-endless { gap: 18px; padding: 20px 18px; }
.dl-se-top { flex-wrap: wrap; row-gap: 12px; }
.dl-se-top .dl-k { flex-basis: 100%; }
.dl-se-stream { height: auto; }
.dl-se-done, .dl-se-next { display: none; }
.dl-se-foot { flex-wrap: wrap; }
.dl-slide.is-decks { gap: 14px; padding: 18px; }
.dl-sk-list { width: auto; gap: 2px; }
.dl-sk-list .dl-k { padding-bottom: 4px; }
.dl-sk-row { height: 34px; }
.dl-sk-clip img { height: auto; aspect-ratio: 358 / 150; }
.dl-slide.is-yt { padding: 18px; }
.dl-sy-url { height: 38px; padding: 0 10px; }
.dl-sy-go { height: 38px; padding: 0 12px; font-size: 13px; }
.dl-sy-video { height: auto; min-height: 210px; padding: 44px 10px 12px; }
.dl-sy-cap { padding: 8px 12px; gap: 4px 5px; font-size: 15px; }
}
@container main (max-width: 760px) {
.dc-static.dl { padding-inline: max(0px, calc(20px - var(--gutter))); }
.dl-sec { padding: 53px 0; }
.dl .dl-h2 { font-size: 30px; line-height: 1.12; }
.dl .dl-h2.is-44 { font-size: 30px; line-height: 1.1; }
.dl-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 38px 0 43px; }
.dl-hero-copy { display: contents; }
.dl-pill { order: 1; justify-self: start; }
.dl .dl-h1 { order: 2; font-size: 34px; }
.dl-lede { order: 3; line-height: 29px; }
.dl-demo { order: 4; justify-self: stretch; max-width: none; }
.dl-ctas { order: 5; flex-direction: column; gap: 10px; }
.dl-ctas .dl-btn { width: 100%; }
.dl-noscript { order: 7; }
.dl-demo-video { aspect-ratio: 348 / 200; }
.dl-demo-q { gap: 6px; }
.dl-line.is-24 { font-size: 20px; }
.dl-hx { display: none; }
.dl-hero .dl-checks { order: 6; justify-content: center; gap: 0; }
.dl-hero .dl-checks li { display: block; font-weight: 500; line-height: normal; color: var(--dl-3); }
.dl-hero .dl-checks li + li::before { content: '\a0\a0·\a0\a0'; }
.dl-hero .dl-checks svg { display: none; }
.dl-facts ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 20px 0; }
.dl-facts li { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--dl-card); }
.dl-facts b { font-size: 16px; }
.dl-facts span { font-size: 13px; }
.dl-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
.dl-step-pic { height: 130px; }
.dl-modes { padding: 58px 0 53px; }
.dl-modes-head { display: block; }
.dl-aside { display: none; }
.dl-show { gap: 16px; margin-top: 24px; }
.dl-tabs { display: flex; flex-direction: row; gap: 4px; padding: 4px; border-radius: 16px; background: var(--dl-card); }
.dl-tab { flex: 1 1 0; min-width: 0; align-items: center; justify-content: center; height: 54px; padding: 8px 4px; border: 0; border-radius: 12px; background: none; isolation: isolate; }
.dl-tab:hover { border-color: transparent; }
.dl-tab:focus-visible { border-radius: 12px; }
.dl-tab::after { inset: 0; z-index: -1; background: var(--dl-band); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.dl-tab-name { flex-direction: column; gap: 4px; font-size: 12px; line-height: 1.4; white-space: nowrap; color: var(--dl-3); transition: color 0.22s ease; }
.dl-tab[aria-selected='true']:not(.is-leaving) .dl-tab-name { color: var(--dl-ink); }
.dl-tab-line, .dl-tab-long { display: none; }
.dl-tab-short { display: inline; }
.dl-stage { place-items: stretch; min-height: 0; padding: 0; border-radius: 0; background: none; }
.dl .dl-slide { display: flex; flex-direction: column; gap: 0; height: auto; max-width: none; padding: 0; border-radius: 20px; background: linear-gradient(#0e0e10 calc(100% - 40px), var(--dl-soft) 0); }
.dl .dl-slide > :not(.dl-ms) { display: none; }
.dl .dl-ms { display: flex; flex: 1; flex-direction: column; }
.dl-ms-video { position: relative; aspect-ratio: 350 / 176; overflow: hidden; background: #1d1d22; }
.dl-ms-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dl-chip.is-ms { top: 12px; left: 12px; gap: 8px; background: rgba(0, 0, 0, 0.55); line-height: 1.45; }
.dl-ms-bar { display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 16px; background: #0e0e10; color: #fff; }
.dl-ms-tool { display: grid; place-items: center; flex: none; height: 34px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 13px; line-height: 1.4; font-weight: 700; }
.dl-ms-tool.is-36 { width: 36px; height: 36px; padding: 0; }
.dl-ms-tool.is-34 { width: 34px; padding: 0; }
.dl-ms-hint { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 36px; margin-left: auto; padding: 0 12px 0 14px; border-radius: 999px; background: #fff; color: #17171a; font-size: 13px; line-height: 1.4; font-weight: 700; }
.dl-ms-panel { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 263px; padding: 16px; border-radius: 18px 18px 0 0; background: var(--dl-soft); color: var(--dl-ink); }
.dl-ms-k { overflow: hidden; font-size: 11px; line-height: 1.45; font-weight: 800; color: var(--dl-3); white-space: nowrap; text-overflow: ellipsis; }
.dl-ms-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 19px; line-height: 1.5; font-weight: 700; }
.dl-slide.is-daily .dl-ms-line { align-items: flex-end; }
.dl-ms-fix { display: inline-flex; flex-direction: column; align-items: flex-start; }
.dl-ms-fix s { font-size: 12px; line-height: 1.5; color: var(--dl-red); }
.dl-ms-fix b { padding: 0 8px 1px; border-bottom: 2px solid var(--dl-amber); border-radius: 8px; background: var(--dl-cream); color: var(--dl-amber); font-weight: 700; }
.dl-ms-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--dl-card); }
.dl-ms-w { display: flex; align-items: center; gap: 8px; }
.dl-ms-w b { font-size: 15px; line-height: 1.5; font-weight: 800; }
.dl-ms-w span, .dl-ms-fold b + span { font-size: 12px; line-height: 1.5; font-weight: 500; color: var(--dl-3); }
.dl-ms-def { font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--dl-2); }
.dl-ms-back { font-size: 12px; line-height: 1.5; font-weight: 700; color: var(--dl-amber); }
.dl-ms-note { font-size: 12px; line-height: 1.45; font-weight: 500; color: var(--dl-3); }
.dl-ms-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 23px; line-height: 1.45; font-weight: 800; }
.dl-ms-ok { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-bottom: 2px solid var(--dl-green); border-radius: 10px; background: var(--dl-green-bg); color: var(--dl-green); }
.dl-ms-ok.is-sm { gap: 4px; padding: 0 8px 1px; border-radius: 8px; }
.dl-slide.is-decks .dl-ms-panel { justify-content: space-between; }
.dl-ms-top, .dl-ms-end { display: flex; flex-direction: column; gap: 12px; }
.dl-ms-blank { display: inline-flex; align-items: center; gap: 1px; width: 110px; padding: 1px 10px; border-bottom: 2px solid var(--dl-ink); border-radius: 8px; background: var(--dl-soft); }
.dl-ms-blank .dl-caret { height: 22px; background: var(--dl-red); }
.dl-ms-check { display: grid; place-items: center; height: 51px; border-radius: 999px; background: #d90429; color: #fff; font-size: 16px; line-height: 1.45; font-weight: 800; }
.dl-ms-end .dl-ms-note { text-align: center; }
.dl-ms-right { padding: 14px 16px; border-radius: 14px; background: var(--dl-green-bg); color: var(--dl-green); font-size: 14px; line-height: 1.5; font-weight: 700; }
.dl-ms-fold { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 15px; }
.dl-ms-fold::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; border-radius: 2px; background: var(--dl-bar); }
.dl-ms-fold b { font-size: 14px; line-height: 1.5; font-weight: 700; }
.dl-ms-show { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; line-height: 1.5; font-weight: 600; color: var(--dl-2); }
.dl-ms-show svg { color: var(--dl-3); }
.dl .dl-practice { display: flex; gap: 8px; height: 48px; margin-top: 20px; padding: 0 24px; font-size: 15px; line-height: normal; }
.dl-pro { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 36px; padding: 24px 16px 24px 20px; }
.dl-pro h3 { font-size: 24px; }
.dl-pro .dl-checks { flex-direction: column; gap: 6px; }
.dl-pro-go { align-items: center; }
.dl-pro-go .dl-btn { width: 100%; }
.dl-benefits { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 40px; }
.dl-benefits li { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 0; padding: 20px; }
.dl-benefits p { grid-column: 1 / -1; }
.dl-faq { padding: 24px 0 40px; }
.dl-faq h2 { font-size: 24px; }
.dl-end { padding: 0 0 53px; }
.dl-end-box { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 28px 24px; text-align: center; }
.dl-end-box > img { width: auto; height: 158px; }
.dl-end-t { align-self: stretch; align-items: center; }
.dl-end h2 { font-size: 26px; }
.dl-end-box > .dl-btn { align-self: stretch; justify-content: flex-start; }
}
@container main (max-width: 359px) {
.dl-hero .dl-checks { gap: 2px 14px; }
.dl-hero .dl-checks li + li::before { content: none; }
.dl-ms-tool.is-34 { display: none; }
}
@keyframes dl-op { from { opacity: 0; } to { opacity: 1; } }
@keyframes dl-rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes dl-glide { from { opacity: 0; translate: 48px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes dl-type { from { clip-path: inset(0 calc(100% - 1px) 0 0); } to { clip-path: inset(0); } }
@keyframes dl-press { 0% { scale: 1; animation-timing-function: var(--dl-eio); } 40% { scale: 0.94; animation-timing-function: var(--dl-eo); } 100% { scale: 1; } }
@keyframes dl-grow { from { scale: 0.98; } to { scale: 1; } }
@keyframes dl-up8 { from { translate: 0 8px; } to { translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
.dl.is-armed .dl-steps:not(.is-live) .dl-step { opacity: 0; }
@container main (min-width: 761px) {
.dl-steps.is-live .dl-step { animation: dl-glide 0.6s var(--dl-ease) both; }
}
@container main (max-width: 760px) {
.dl-steps.is-live .dl-step { animation: dl-rise 0.55s var(--dl-ease) both; }
}
.dl-steps.is-live .dl-step:nth-child(2) { animation-delay: 0.12s; }
.dl-steps.is-live .dl-step:nth-child(3) { animation-delay: 0.24s; }
.dl-tab::after { transition: opacity 0.22s var(--dl-ease); }
.dl-slide.is-on { transition: opacity 0.25s var(--dl-ease), translate 0.3s var(--dl-ease); }
.dl-slide.is-out { transition: opacity 0.2s ease-out, translate 0.2s ease-out; }
.dl-slide.is-yt.is-on .dl-sy-mask { animation: dl-type 0.35s steps(14, end) 0.2s both; }
.dl-slide.is-yt.is-on .dl-sy-go { animation: dl-press 0.25s linear 0.6s both; }
.dl-slide.is-yt.is-on .dl-sy-video { animation: dl-op 0.3s var(--dl-ease) 0.8s both, dl-grow 0.35s var(--dl-ease) 0.8s both; }
.dl-slide.is-yt.is-on .dl-sy-cap { animation: dl-op 0.25s var(--dl-ease) 1.1s both, dl-up8 0.3s var(--dl-ease) 1.1s both; }
}