/* Intention-driven details. The page keeps its existing silhouette. */
@property --intent-x { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --intent-y { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --intent-rx { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --intent-ry { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.hero,.workspace-chapter { transition: --intent-x .16s ease-out,--intent-y .16s ease-out,--intent-rx .16s ease-out,--intent-ry .16s ease-out; }
.hero-console { transform: translate3d(calc(var(--console-x,36px) + var(--intent-x,0px)),calc(var(--console-y,80px) + var(--intent-y,0px)),0) rotateX(calc(var(--console-rx,8deg) + var(--intent-rx,0deg))) rotateY(calc(var(--console-ry,-14deg) + var(--intent-ry,0deg))) rotateZ(var(--console-rz,-7deg)) scale(var(--console-scale,.78)); }
.hero-saki { transform: translate3d(calc(var(--saki-x,0px) + var(--intent-x,0px) * 1.5),calc(var(--saki-y,0px) + var(--intent-y,0px) * 1.5),0) rotate(var(--saki-angle,0deg)) scale(var(--saki-scale,1)); }
.product-reel { transform: translate3d(var(--intent-x,0px),calc(var(--workspace-screen-y,0px) + var(--intent-y,0px)),0) rotateX(calc(var(--workspace-screen-tilt,2deg) + var(--intent-rx,0deg))) rotateY(var(--intent-ry,0deg)) rotateZ(var(--workspace-screen-angle,-1deg)); }
.product-viewport { border-radius: 12px; overflow: hidden; }
.product-screen { aspect-ratio: 1200 / 764; position: relative; }
.product-screen > img { width: 100%; height: 100%; object-fit: cover; }
.product-reel figcaption { padding-block: 7px; }
.workspace-views { display: flex; align-items: center; gap: 20px; }
.workspace-views > button { position: relative; padding: 9px 0; background: none; border: 0; font: inherit; font-size: 10px; color: #9e8c95; cursor: pointer; }
.workspace-views > button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: #ad627f; transform: scaleX(0); transform-origin: left; transition: transform .18s; }
.workspace-views > button[aria-selected="true"] { color: #a25372; }
.workspace-views > button[aria-selected="true"]::after { transform: scaleX(1); }
.workspace-views > button:hover { color: #a25372; }
.product-viewport[aria-busy="true"] { cursor: progress; }
/* Keep the footer's hidden motion menu inside the viewport too. */
.site-footer .motion-control .lang-menu { left: auto; right: 0; }

.chapter-link { position: relative; }
.chapter-link::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 23px; height: 1px; background: currentColor; opacity: .45; transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.chapter-link:hover::after,.chapter-link:focus-visible::after,.evidence-trigger.is-expanded::after { transform: scaleX(1); }
.evidence-trigger.is-expanded > span { transform: rotate(90deg); }
.case-evidence[hidden] { display: none; }
.case-evidence { position: relative; z-index: 2; display: block; max-width: 1100px; margin: 35px auto 0; overflow: hidden; }
.case-evidence > figcaption { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 25px 0 17px; border-top: 1px solid #dfcfd5; }
.evidence-kicker { display: block; font: 7px/1.5 ui-monospace,monospace; letter-spacing: .12em; color: #af8799; }
.case-evidence h3 { font-size: 16px; font-weight: 500; line-height: 1.7; margin-top: 7px; letter-spacing: -.02em; }
.evidence-collapse { flex-shrink: 0; display: flex; gap: 13px; align-items: center; min-height: 36px; background: transparent; border: 0; color: #a27489; font-size: 10px; cursor: pointer; padding: 6px 0 6px 14px; }
.evidence-collapse > span { font-size: 18px; font-weight: 300; }
.evidence-screen { display: block; width: 100%; padding: 0; border: 1px solid #e0d5db; border-radius: 8px; background: #f2e9e8; overflow: hidden; cursor: zoom-in; }
.evidence-screen > img { display: block; width: 100%; height: auto; }
.evidence-caption { display: flex; justify-content: space-between; gap: 15px; padding-top: 11px; color: #9f8c96; font-size: 9px; }

.theme-landscape { position: relative; overflow: hidden; }
.theme-landscape::after { content: ""; position: absolute; inset: 0; background: url('./assets/painted-night.webp') 65% 65% / cover; opacity: 0; transition: opacity .3s ease; }
.theme-preview[data-theme="night"] .theme-landscape::after { opacity: 1; }
.theme-swatches { align-items: center; gap: 2px; margin-right: -6px; }
.theme-swatches > button { position: relative; width: 26px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.theme-swatches > button::before { content: ""; position: absolute; inset: 7px 6px; border-radius: 50%; background: #e8b3be; box-shadow: 0 0 0 2px #fff; }
.theme-swatches > button[data-preview-theme="night"]::before { background: #6e7597; }
.theme-swatches > button::after { content: ""; position: absolute; inset: 4px 3px; border: 1px solid #c7a5b4; border-radius: 50%; opacity: 0; transform: scale(.85); transition: opacity .18s,transform .18s; }
.theme-swatches > button[aria-pressed="true"]::after { opacity: 1; transform: scale(1); }

.button:not(.hero-actions .button) { transition: color .18s,background-color .18s,border-color .18s,box-shadow .18s,transform .18s; }
@media (hover:hover) and (pointer:fine) {
  .button:not(.hero-actions .button):hover { transform: translateY(-1px); }
  .button-primary:not(.hero-actions .button):hover { box-shadow: 0 6px 16px -8px #96395860; }
}
.button:not(.hero-actions .button):active { transform: translateY(1px); box-shadow: none; }
.install-tabs { position: relative; }
.install-tabs.has-ink::after { content: ""; position: absolute; bottom: -1px; left: var(--tab-left,0px); width: var(--tab-width,0px); height: 2px; background: var(--rose); transition: left .24s cubic-bezier(.2,.65,.3,1),width .24s cubic-bezier(.2,.65,.3,1); pointer-events: none; }
.install-tabs.has-ink > button[aria-selected="true"]::after { display: none; }

.screenshot-viewer { border-radius: 12px; box-shadow: 0 32px 100px -20px #322a415c; }
.screenshot-viewer::backdrop { background: #342b3c80; backdrop-filter: blur(8px); }
.viewer-stage { background: #eee9e5; scrollbar-color: #baa8b2 #eee9e5; }
.viewer-stage > img { display: block; }
.viewer-stage:not(.is-zoomed) > img { cursor: zoom-in; }
.viewer-stage.is-zoomed { touch-action: none; cursor: grab; user-select: none; }
.viewer-stage.is-zoomed.is-dragging { cursor: grabbing; }
.viewer-stage.is-zoomed > img { touch-action: none; pointer-events: auto; }
.viewer-stage:focus-visible { outline: 2px solid #ac6c86; outline-offset: -3px; }
@media (max-width:1199px) { .case-evidence { max-width: calc(100% - 120px); } }
@media (max-width:999px) { .case-evidence { max-width: calc(100% - 80px); } }
@media (max-width:719px) {
  .workspace-views { gap: 15px; }
  .workspace-views > button { font-size: 8px; padding: 9px 0; }
  .product-reel figcaption { padding: 2px 3px; }
  .product-reel figcaption > span { font-size: 6px; }
  .product-viewport { border-radius: 6px; }
  .case-journal .case-evidence { width: calc(100% + 44px); max-width: none; margin: 23px 0 0 -44px; }
  .case-evidence > figcaption { padding-top: 19px; gap: 13px; }
  .case-evidence h3 { font-size: 12px; }
  .evidence-kicker { font-size: 6px; }
  .evidence-caption { font-size: 7px; }
  .evidence-screen { border-radius: 5px; }
  .theme-preview-bottom { gap: 3px; align-items: center; }
  .theme-swatches > button { width: 24px; height: 26px; }
  .theme-swatches > button::before { inset: 7px 6px; }
  .theme-swatches > button::after { inset: 4px 3px; }
}
.motion-reduced .hero-console { transform: rotate(-3deg) scale(.87); }
.motion-reduced .hero-saki,.motion-reduced .product-reel { transform: none; }
.motion-reduced .button,.motion-reduced .chapter-link span,.motion-reduced .chapter-link::after,
.motion-reduced .workspace-views > button::after,.motion-reduced .theme-landscape::after,
.motion-reduced .theme-swatches > button::after,.motion-reduced .install-tabs.has-ink::after { transition: none; }
.motion-reduced .button:hover,.motion-reduced .button:active { transform: none; }
.motion-reduced .hero,.motion-reduced .workspace-chapter { transition: none; }