.dl-art { overflow: visible }
.dl-art :is(path, rect, circle, ellipse, use) { stroke-linecap: round; stroke-linejoin: round }
.dl-art text { font-family: var(--font-ui); letter-spacing: -.01em }
.dl-art .t-mid { text-anchor: middle }
.dl-art .mark { fill: var(--mark) }                .dl-art .check { fill: var(--art-check) }
.dl-art .paper { fill: var(--art-paper) }          .dl-art .rule { fill: var(--art-rule) }
.dl-art .shade { fill: var(--art-shade) }          .dl-art .ink { fill: var(--art-ink) }
.dl-art .leaf { fill: var(--art-leaf) }            .dl-art .leaf-deep { fill: var(--art-leaf-deep) }
.dl-art .alu { fill: var(--art-laptop) }           .dl-art .alu-deep { fill: var(--art-laptop-deep) }
.dl-art .alu-shade { fill: var(--art-shade) }      .dl-art .cam { fill: var(--art-ink) }
.dl-art [class*="stroke-"] { fill: none }
.dl-art .stroke-paper { stroke: var(--art-paper) } .dl-art .stroke-vein { stroke: var(--art-vein) }
.dl-art .stroke-leaf-deep { stroke: var(--art-leaf-deep) }
.dl-art .paper.stroke-ink-line { fill: var(--art-paper); stroke: var(--art-ink) }
.dl-art .screen { fill: var(--stage) }             .dl-art .chrome { fill: var(--stage-raised) }
.dl-art .chrome-hi { fill: var(--stage-card) }     .dl-art .ui-card { fill: var(--stage-card) }
.dl-art .rule-ui { fill: var(--stage-line-soft) }  .dl-art .dot { fill: var(--stage-line) }
.dl-art .subtle { fill: var(--subtle) }            .dl-art .mark-tint { fill: var(--mark-tint) }
.dl-art .stroke-subtle { stroke: var(--subtle) }   .dl-art .stroke-dim { stroke: var(--stage-line) }
.dl-art .stroke-cream { stroke: var(--cream) }     .dl-art .cream { fill: var(--cream) }
.dl-art .box { fill: none; stroke: color-mix(in srgb, var(--subtle) 70%, transparent); stroke-width: 1.4 }
.dl-art .ring { stroke: var(--stage); stroke-width: 2 }
.dl-art .t-cream { fill: var(--cream) }            .dl-art .t-subtle { fill: var(--subtle) }
.dl-art .t-mark { fill: var(--mark) }              .dl-art .t-ink { fill: var(--art-ink) }
.dl-art .t-paper { fill: var(--art-paper) }        .dl-art .t-ink-subtle { fill: var(--ink-subtle) }
.dl-art .todo { fill: var(--art-rule) }            .dl-art .doing { fill: var(--art-peach) }
.dl-art .review { fill: var(--art-lavender) }      .dl-art .done { fill: var(--art-check) }
.dl-art .av-1 { fill: var(--av-1) }  .dl-art .av-2 { fill: var(--av-2) }  .dl-art .av-3 { fill: var(--av-3) }
.dl-art .av-4 { fill: var(--av-4) }
.dl-hero, .dl-install, .dl-apps, .dl-faq, .dl-close { --g: clamp(72px, 9vw, 136px) }
.dl-hero { padding-block: clamp(24px, 5vw, 64px) clamp(64px, 8vw, 112px) }
.dl-hero__grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center }
.dl-hero h1 { font-size: clamp(2.5rem, 3.4vw + 1.1rem, 4.5rem); max-inline-size: 11ch }
.dl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-block-start: 36px }
.dl-hero__access { font-size: var(--text-sm); color: var(--ink-subtle); max-inline-size: 24ch; line-height: 1.5 }
.dl-hero__access a { color: var(--ink); font-weight: 600 }
.dl-hero__art { position: relative; min-inline-size: 0 }
.dl-scene { inline-size: 100%; block-size: auto }
.terrain.dl-hero__terrain { inset-inline: 0; inset-block-start: 44%; inline-size: 100%; block-size: calc(56% + 56px) }
.dl-hero__exit { inset-block-end: -1px; inset-inline-start: calc(100% * 130 / 780 - 1px) }
.dl-hero__in { display: none }
.dl-prop { position: absolute; pointer-events: none; block-size: auto }
.dl-hero__bush { inline-size: 70px; inset-block-start: calc(100% + 26px); inset-inline-start: calc(100% * 130 / 780 + 28px) }
.dl-scene :is(.dl-road, .dl-road-trace) { fill: none; stroke-linecap: butt; vector-effect: non-scaling-stroke }
.dl-scene .dl-road { stroke: var(--art-road); stroke-width: var(--road-w) }
.dl-scene .dl-road-trace { stroke: var(--mark); stroke-width: var(--trace-w); stroke-dasharray: 10 10 }
@media (min-width: 1000px) {
  .dl-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) }
  .dl-hero__art { margin-inline-end: calc(var(--gutter) * -.4) }
}
@media (max-width: 999px) {
  .terrain.dl-hero__terrain { inset-block-start: 52%; block-size: calc(48% + 24px) }
}
@media (max-width: 559px) { .dl-hero__actions > .btn { inline-size: 100% } .dl-hero__access { max-inline-size: none } }
.dl-scene :is(.dl-scene__laptop, .dl-scene__phone, .dl-scene__bush, .dl-scene__clock, .dl-scene__installer, .dl-scene__cursor) { transform-box: fill-box }
.dl-scene :is(.dl-scene__laptop, .dl-scene__phone, .dl-scene__bush) { transform-origin: 50% 100% }
.dl-scene :is(.dl-scene__clock, .dl-scene__installer) { transform-origin: 50% 50% }
.dl-scene .dl-scene__cursor { transform-origin: 0 0 }
.dl-scene .dl-scene__bubble { transform-box: view-box; transform-origin: 478px 105px }
@media (prefers-reduced-motion: no-preference) {
  .dl-hero h1 { animation: enter-rise 1000ms var(--ease-out) 150ms both }
  .dl-hero__actions { animation: enter-up 800ms var(--ease-out) 450ms both }
}
.dl-scene .dl-scene__laptop { animation: dl-rise 700ms var(--ease-out) 100ms both }
.dl-scene .dl-scene__road { animation: dl-on 600ms ease-out 250ms both }
.dl-scene .dl-scene__app { animation: dl-on 500ms ease-out 500ms both }
.dl-scene .dl-scene__bush { animation: dl-unfold 650ms var(--ease-snap) 300ms both }
.dl-scene .dl-scene__bush--2 { animation-delay: 950ms }
.dl-scene .dl-scene__phone { animation: dl-rise 650ms var(--ease-snap) 650ms both }
.dl-scene .dl-scene__phone-app { animation: dl-on 450ms ease-out 1000ms both }
.dl-scene .dl-scene__clock { animation: dl-pop 450ms var(--ease-snap) 1500ms both }
.dl-scene .dl-scene__installer { animation: dl-pulse 600ms var(--ease-out) 1100ms both }
.dl-scene .dl-scene__bubble { animation: dl-pop 520ms var(--ease-snap) 1300ms both }
.dl-scene .dl-scene__cursor { animation: dl-point 900ms var(--ease-out) 1800ms both }
@keyframes dl-rise { from { opacity: 0; translate: 0 26px } }
@keyframes dl-on { from { opacity: 0 } }
@keyframes dl-unfold { from { scale: 0 } }
@keyframes dl-pop { from { opacity: 0; scale: .55 } }
@keyframes dl-pulse { 0% { scale: 1 } 45% { scale: 1.4 } 100% { scale: 1 } }
@keyframes dl-point { 0% { opacity: 0; translate: 30px 34px } 65% { opacity: 1; translate: 0 0; scale: 1 } 82% { scale: .82 } 100% { scale: 1 } }
.dl-install { padding-block: clamp(32px, 5vw, 64px) }
.dl-install__grid { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start }
.dl-install__text h2 { font-size: clamp(2rem, 2.2vw + 1.1rem, 3rem) }
.dl-install__text p { margin-block-start: 18px; color: var(--ink-subtle); max-inline-size: 42ch }
.dl-install__way { inset-block-start: 0; inset-inline-start: 50% }
.dl-install__way--end { inset-block-start: 100% }
@media (min-width: 1000px) {
  .dl-install__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--g) }
  .dl-install__text { grid-column: 2; grid-row: 1; padding-block-start: 12px }
  .dl-guide { grid-column: 1; grid-row: 1 }
  .dl-install__way { inset-inline-start: calc(var(--gutter) + (100% - 2 * var(--gutter) - var(--g)) * 6 / 11 + var(--g) / 2 - 1px) }
}
.dl-guide {
  padding: 6px clamp(20px, 3vw, 32px); border: 1px solid var(--ink-line); border-radius: var(--radius-lg);
  background: var(--surface-warm); box-shadow: var(--shadow);
}
.dl-guide .dl-q:last-child { border-block-end: 0 }
.dl-steps { list-style: none; padding: 0; display: grid; gap: 12px; counter-reset: dl-step }
.dl-steps > li { position: relative; padding-inline-start: 36px; counter-increment: dl-step; color: var(--ink) }
.dl-steps > li::before {
  content: counter(dl-step); position: absolute; inset-inline-start: 0; inset-block-start: .1em;
  display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%;
  border: 1.5px solid var(--ink); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; line-height: 1;
}
.dl-steps strong { font-weight: 600 }
.dl-note { margin-block-start: 14px; font-size: var(--text-sm); color: var(--ink-subtle) }
.dl-q { border-block-end: 1px solid var(--ink-line) }
.dl-q > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 18px; list-style: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink);
}
.dl-q > summary::-webkit-details-marker { display: none }
.dl-q__mark {
  inline-size: 20px; block-size: 20px; flex: none; fill: var(--art-mustard-deep);
  transition: rotate var(--dur) var(--ease-out), translate var(--dur-fast) ease-out;
}
.dl-q[open] > summary .dl-q__mark { rotate: 90deg }
@media (any-hover: hover) { .dl-q:not([open]) > summary:hover .dl-q__mark { translate: 3px 0 } }
.dl-q__a { padding-block-end: 22px; color: var(--ink-subtle) }
.dl-q__a a { color: var(--ink); font-weight: 600 }
.dl-q.is-closing > summary .dl-q__mark { rotate: 0deg }
.dl-apps { padding-block: clamp(48px, 6vw, 88px) clamp(48px, 6vw, 88px) }
.dl-apps__grid { display: grid; gap: clamp(28px, 4vw, 40px); align-items: start }
.dl-apps__side h2 { font-size: clamp(2rem, 2.2vw + 1.1rem, 3rem); max-inline-size: 13ch }
.dl-apps__side p { margin-block-start: 18px; color: var(--ink-subtle); max-inline-size: 34ch }
.terrain.dl-apps__terrain { inset-inline: 0; inset-block-start: 46%; inline-size: 100%; block-size: 50% }
@media (min-width: 1000px) {
  .dl-apps__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--g) }
  .dl-apps__side { position: sticky; inset-block-start: 112px }
}
.dl-apps__list { list-style: none; padding: 0; container-type: inline-size }
.dl-apps__way { inset-block-start: 0; inset-inline-start: 14px }
.dl-apps__way--end { inset-block-start: 100% }
@media (min-width: 1000px) {
  .dl-apps__way { inset-inline-start: calc(var(--gutter) + (100% - 2 * var(--gutter) - var(--g)) * 5 / 11 + var(--g) / 2 - 1px) }
}
.dl-app { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: center; padding-block: 22px }
.dl-app + .dl-app { border-block-start: 1px solid var(--ink-line) }
.dl-app:first-child { padding-block-start: 0 }
.dl-app__way { inset-block-start: 50%; inset-inline-start: calc(var(--g) / -2 - 1px) }
.dl-app__device { inline-size: 112px }
.dl-app__body { display: grid; gap: 12px; min-inline-size: 0 }
.dl-app__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--text-xl); letter-spacing: -.015em }
.dl-app__here {
  padding: 3px 10px; border-radius: var(--radius-pill); background: var(--butter-bg); color: var(--butter-text);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0;
}
@container (max-width: 519px) {
  .dl-app { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start }
  .dl-app__device { inline-size: 76px; margin-block-start: 2px }
}
.dl-app__device .art__app { transform-box: fill-box; transform-origin: 50% 50% }
@media (prefers-reduced-motion: no-preference) {
  .js [data-trail] .dl-app .art__app { animation: dl-pop 520ms var(--ease-snap) 150ms both paused }
  .js [data-trail] .dl-app.is-reached .art__app { animation-play-state: running }
}
.notify-form { display: grid; gap: 8px 10px }
.notify-form .btn { justify-self: start }
.notify-form .field { display: contents }
@container (min-width: 520px) {
  .notify-form { grid-template-columns: minmax(0, 1fr) auto }
  .notify-form .input { grid-column: 1; grid-row: 1 }
  .notify-form .btn { grid-column: 2; grid-row: 1 }
  .notify-form .field__error { grid-column: 1 / -1; grid-row: 2 }
  .notify-form .form-status { grid-column: 1 / -1 }
}
.dl-faq { padding-block: clamp(56px, 8vw, 112px) }
.dl-faq__grid { display: grid; gap: 20px }
.dl-faq__title { font-size: clamp(2rem, 2.2vw + 1.1rem, 3rem) }
.dl-faq__way { inset-block-start: 0; inset-inline-start: 34% }
.dl-faq__way--end { inset-block-start: 100% }
.dl-faq .dl-q > summary { font-size: var(--text-lg); font-weight: 700; letter-spacing: -.01em; padding-block: 22px }
.dl-faq .dl-q__a { max-inline-size: 64ch }
.dl-faq__list { border-block-start: 1px solid var(--ink-line) }
.dl-faq__bench { display: none }
@media (min-width: 1000px) {
  .dl-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--g); align-items: start }
  .dl-faq__way { inset-inline-start: calc(var(--gutter) + (100% - 2 * var(--gutter) - var(--g)) * 4 / 11 + var(--g) / 2 - 1px) }
  .dl-faq__bench { display: block; inline-size: clamp(130px, 12vw, 172px); inset-block-start: 170px; inset-inline-start: var(--gutter) }
}
.dl-close { padding-block: clamp(48px, 7vw, 96px) clamp(72px, 9vw, 120px) }
.dl-close__inner { display: grid; gap: 36px; justify-items: start }
.dl-close__who { position: relative; inline-size: clamp(150px, 17vw, 200px); margin-inline-start: clamp(0px, 4vw, 40px) }
.dl-close__way { inset-inline-start: calc(50% - 1px); inset-block-start: calc(100% - 1px) }
.dl-close__approach { display: none }
.dl-close__typing { position: absolute; inline-size: 30%; block-size: auto; inset-block-start: -13%; inset-inline-start: 98% }
.dl-close__text { display: grid; gap: 18px; justify-items: start }
.dl-close__text h2 { font-size: clamp(2rem, 2.4vw + 1.1rem, 3.25rem) }
.dl-close__text p { color: var(--ink-subtle); max-inline-size: 46ch }
.terrain.dl-close__terrain { inset-inline: 0; inset-block-start: 10%; inline-size: 100%; block-size: 62% }
@media (min-width: 760px) and (max-width: 999px) {
  .dl-close__inner { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(64px, 8vw, 120px) }
}
@media (min-width: 1000px) {
  .dl-close__inner { --w: clamp(150px, 17vw, 200px); grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; column-gap: var(--g) }
  .dl-close__who { inline-size: var(--w); justify-self: end; margin-inline: 0 calc(var(--g) / -2 - var(--w) / 2) }
  .dl-close__text { padding-inline-start: calc(var(--w) * .78 - var(--g) / 2 + 24px) }
}
.dl-close__typing { transform-origin: 0% 100% }
.dl-close__dot { transform-box: fill-box; transform-origin: 50% 50% }
@media (prefers-reduced-motion: no-preference) {
  .js [data-trail] .dl-close__typing { animation: dl-pop 500ms var(--ease-snap) 1500ms both paused }
  .js [data-trail] .dl-close__dot { animation: dl-dot 520ms ease-in-out 2000ms 3 paused }
  .js [data-trail] .dl-close__dot:nth-child(2) { animation-delay: 2100ms }
  .js [data-trail] .dl-close__dot:nth-child(3) { animation-delay: 2200ms }
  .js [data-trail] .is-reached :is(.dl-close__typing, .dl-close__dot) { animation-play-state: running }
}
@keyframes dl-dot { 50% { translate: 0 -4px } }
@media (max-width: 999px) {
  :is(.dl-hero, .dl-install, .dl-apps, .dl-faq, .dl-close) > .wrap { padding-inline-start: calc(var(--gutter) + 26px) }
  :is(.dl-hero__in, .dl-install__way, .dl-faq__way, .dl-apps__way) { inset-inline-start: 14px }
  .dl-hero__in { display: block; inset-block-start: 0 }
  .dl-app__way { inset-inline-start: calc(14px - var(--gutter) - 26px) }
  :is(.dl-hero__exit, .dl-hero__bush) { display: none }
  .dl-scene .dl-scene__road { display: none }
  .dl-close__who { margin-inline-start: 0 }
  .dl-close__approach { display: block; inset-inline-start: calc(14px - var(--gutter) - 26px); inset-block-start: 40% }
}