/* Preserve the original physical monitor and page composition. */
[data-kbb2aea0d][data-dd-customization] [data-dd-intro-caption] {
  color:#edf3fb;font-size:22px;line-height:1.25;font-weight:500;letter-spacing:-.3px;
  bottom:calc(100% + 10px);
}
[data-kbb2aea0d][data-dd-customization] .dd-intro-controls {gap:8px 14px;min-height:24px;margin:12px 16px 0}
[data-kbb2aea0d][data-dd-customization] .dd-preview-label {color:#95a0ae;font:400 12px/1.4 "Segoe UI",sans-serif}
[data-kbb2aea0d][data-dd-customization] .dd-intro-controls > button {color:#bac9dc;font-size:12px;line-height:1.4}
[data-kbb2aea0d][data-dd-customization] #ce0d22821 {display:none}
[data-kbb2aea0d][data-dd-customization] .c5fc12485 {display:none}
[data-kbb2aea0d][data-dd-customization][data-dd-controls-open="true"] .c5fc12485 {display:flex}

/* Keep optional customization next to Replay, without a permanent swatch. */
[data-kbb2aea0d][data-dd-customization] .dd-intro-controls .cfb3b551e {
  position:relative;display:inline-flex;height:auto;margin:0;padding:0;gap:0;
  border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;
}
[data-kbb2aea0d][data-dd-customization] .dd-intro-controls #dd-demo-visibility-label,
[data-kbb2aea0d][data-dd-customization] .dd-intro-controls [data-k6de08665],
[data-kbb2aea0d][data-dd-customization] .dd-intro-controls .cd452e1ca {display:none}
[data-kbb2aea0d][data-dd-customization] .dd-intro-controls .c9ae71ce7 {width:auto;height:auto}
[data-kbb2aea0d][data-dd-customization] .dd-intro-controls .c908f4944 {
  display:inline-flex;width:auto;height:auto;min-height:20px;padding:2px 0;
  border:0;background:none;box-shadow:none;color:#bac9dc;font:400 12px/1.4 "Segoe UI",sans-serif;
}
[data-kbb2aea0d][data-dd-customization] .dd-intro-controls .c908f4944:hover {text-decoration:underline}
[data-kbb2aea0d][data-dd-customization] .dd-intro-controls .c908f4944:focus-visible {outline:2px solid #92baff;outline-offset:3px}
[data-kbb2aea0d][data-dd-customization] .dd-intro-controls .c87056274 {top:auto;bottom:30px;right:0}
@media(min-width:981px) {
  #app-ui [data-dd-customization] .cc3628e22 {
    top:var(--dd-window-center-y)!important;bottom:auto!important;
    left:var(--dd-window-center-x);right:auto!important;
    transform:translate(-50%,-50%);
  }
}

/* Give the main actions enough weight within the monitor hero. */
.home-page .cd2c96fcf .hero-actions {gap:12px;margin-top:24px}
.home-page .cd2c96fcf .hero-actions .button {
  width:176px;min-height:56px;padding:15px 24px;font-size:16px;line-height:20px;
}
@media(max-width:620px) {
  .home-page .cd2c96fcf .hero-actions .button {
    width:auto;min-width:0;min-height:52px;padding:13px 16px;font-size:15px;
  }
}
@media(max-width:960px) and (orientation:landscape) and (max-height:600px) {
  .home-page .cd2c96fcf .hero-actions .button {
    width:auto;min-width:0;min-height:44px;padding:10px 16px;font-size:14px;
  }
}

/* Keep the hand-drawn arrow attached to the live brightness track. */
@media(min-width:961px) {
  [data-kbb2aea0d][data-dd-customization] [data-k60e090e7] {
    top:var(--dd-brightness-label-y,79px);
    left:-100px;
  }
}

@media(max-width:960px) {
  [data-kbb2aea0d][data-dd-customization] [data-k60e090e7] .c137f8069 {
    transform:scaleY(var(--dd-drag-arrow-scale,1));transform-origin:top;
  }
}

/* Keep the shorter headline and supporting copy clear of the slider invitation. */
@media(min-width:981px) {
  .home-page .cd2c96fcf .hero-lead {max-width:42ch}
}

/* The compact app selector is a separate popup: square top, round bottom. */
.home-page .cdf9b2db3.is-compact-display{border-radius:0 0 5px 5px}
.home-page .cdf9b2db3.is-compact-display [role="option"]:first-child{border-radius:0}
.home-page .cdf9b2db3.is-compact-display [role="option"]:last-child{border-radius:0 0 5px 5px}
[data-dd-customization][data-dd-intro-locked="true"] .dd-intro-controls{cursor:default}
[data-dd-customization][data-dd-intro-locked="true"] .dd-intro-controls button{cursor:default;opacity:.65}

/* Keep the concise desktop headline on one line; let small screens wrap. */
.home-page #hero-title {max-width:none;font-size:clamp(28px,3.6vw,44px);white-space:nowrap}
.home-page #hero-title > span {display:inline;white-space:normal}
@media (max-width:600px) {
  .home-page #hero-title {font-size:clamp(30px,8.5vw,40px);white-space:normal;text-wrap:balance}
}
