[data-tone=dark]{--app-window-edge:var(--edge-control);--app-window-strong:var(--color-on-dark);--app-window-body:var(--color-on-dark-body);--app-window-muted:var(--color-on-dark-muted)}.app-window{gap:var(--space-3);min-width:0;padding:var(--space-3);border:var(--line-width) solid var(--app-window-edge);border-radius:var(--radius-lg);background-color:var(--fill-raised);box-shadow:var(--shadow-lg);backdrop-filter:var(--raised-backdrop);color:var(--app-window-body);font-size:var(--text-small);line-height:var(--text-small-leading);flex-direction:column;margin:0;display:flex;overflow:clip}.card .app-window{backdrop-filter:none;background-color:#0000}.app-window>.chrome{gap:var(--space-3);flex-wrap:wrap;align-items:center;display:flex}.app-window>.chrome>.dots{gap:var(--space-1);flex:none;display:flex}.app-window>.chrome>.dots>span{inline-size:var(--space-2);block-size:var(--space-2);border-radius:var(--radius-pill);background-color:var(--fill-alt-strong)}.app-window>.chrome>.title{min-width:0;max-inline-size:calc(100% - 3 * var(--space-2) - 2 * var(--space-1) - var(--space-3));color:var(--app-window-muted);font-family:var(--font-body);font-size:var(--text-caps);font-weight:var(--weight-chrome);letter-spacing:var(--text-caps-tracking);line-height:var(--text-caps-leading);text-transform:uppercase;overflow-wrap:anywhere}.app-window>.chrome>.sample{flex:none;margin-inline-start:auto}.app-window>.body{gap:var(--space-3);flex-direction:column;flex:1;min-width:0;display:flex}.app-window>.body>.intro>.heading,.app-window>.body>.intro>.copy{inline-size:fit-content;max-inline-size:100%}.app-window>.body>.intro>.heading{color:var(--app-window-strong);font-family:var(--font-heading);font-size:var(--text-body);font-weight:var(--weight-heading);line-height:var(--text-body-leading)}.app-window>.body>.intro>.copy{margin-block-start:var(--space-1)}.tilt{visibility:hidden;perspective:var(--tilt-perspective);display:grid}.tilt>.plane{transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(calc(var(--tilt-depth) * var(--space-5)));display:grid}.tilt>.plane>*{visibility:visible}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.tilt>.lift{animation-name:tilt-lift;animation-timing-function:linear;animation-fill-mode:backwards}.tilt>.plane.lift{animation-timeline:view();animation-range:entry 30% cover 45%}}}@keyframes tilt-lift{0%{transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(calc(var(--tilt-depth) * var(--space-5) / 4))}}.app-window>.body>.placeholder-stage{justify-content:center;align-items:center;gap:var(--space-4);aspect-ratio:16/9;padding:var(--space-5);text-align:center;flex-direction:column;display:flex}.app-window>.body>.placeholder-stage>.glyph{inline-size:var(--space-8);block-size:var(--space-8);border-radius:var(--radius-pill);background-color:var(--mark-emphasis);color:var(--mark-emphasis-on);place-items:center;display:grid}.app-window>.body>.placeholder-stage>.line{font-size:var(--text-small);line-height:var(--text-small-leading)}