/* Genuine app examples in one device stage; controls remain readable at every size. */
body[data-aioos-visual="20260910"] #app .app-heading { margin: 30px 0 34px; align-items: start; }
body[data-aioos-visual="20260910"] #app .app-showroom { display: block; min-height: 0; border: 0; }
body[data-aioos-visual="20260910"] #app .app-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px 32px;
  padding: 0 0 27px;
  background: transparent;
}
body[data-aioos-visual="20260910"] #app .index-type,
body[data-aioos-visual="20260910"] #app .app-editorial > .notebook-art { display: none; }
body[data-aioos-visual="20260910"] #app .tab-list {
  grid-column: 1 / -1;
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 40px;
  padding: 4px;
  gap: 4px;
}
body[data-aioos-visual="20260910"] #app .tab-list button {
  display: block;
  flex: 1 1 auto;
  border: 0;
  border-radius: 30px;
  min-height: 45px;
  padding: 10px 23px;
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--muted);
  text-align: center;
  overflow-wrap: normal;
  hyphens: none;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
body[data-aioos-visual="20260910"] #app .tab-list button span { display: none; }
body[data-aioos-visual="20260910"] #app .tab-list button[aria-selected="true"] { background: var(--accent); color: var(--panel); }
body[data-aioos-visual="20260910"] #app .tab-list button:hover:not([aria-selected="true"]) { background: var(--tint); color: var(--ink); }
body[data-aioos-visual="20260910"] #app .app-description { min-height: 0; max-width: 66ch; margin: 0; padding: 0; font-size: 15px; color: var(--muted); }
body[data-aioos-visual="20260910"] #app .app-editorial > .text-link { margin: 0; align-self: end; font-size: 14px; }
body[data-aioos-visual="20260910"] #app .app-panel {
  display: block;
  height: clamp(540px, 49vw, 720px);
  min-height: 0;
  background: linear-gradient(155deg, var(--tint), #c6b6d7 67%, var(--lilac));
  border: 1px solid #b5a6cd;
  border-radius: 2px;
  isolation: isolate;
}
body[data-aioos-visual="20260910"] #app .app-background-word,
body[data-aioos-visual="20260910"] #app .app-panel-dots,
body[data-aioos-visual="20260910"] #app .app-route,
body[data-aioos-visual="20260910"] #app .app-side-note { display: none; }
body[data-aioos-visual="20260910"] #app .app-floor {
  width: 114%;
  height: 29%;
  left: -7%;
  bottom: -6%;
  transform: rotate(-2deg);
  background: linear-gradient(180deg, #efe6f2 0%, #d4c4e1 54%, #b5a6cd 55%, #c6b6d7);
  box-shadow: 0 -1px 0 #f8f4e966;
  z-index: -1;
}
body[data-aioos-visual="20260910"] #app .app-preview-devices { position: relative; width: 100%; height: 100%; }
body[data-aioos-visual="20260910"] #app .app-desktop {
  position: absolute;
  left: 7%;
  top: 45px;
  width: 63%;
  border-width: 5px;
  transform: rotateZ(-1deg);
  box-shadow: 0 4px 0 #72706c, 0 28px 40px -18px #30263d55;
}
body[data-aioos-visual="20260910"] #app .app-phone {
  position: absolute;
  right: 6%;
  bottom: 54px;
  width: 19%;
  max-width: 260px;
  margin: 0;
  border-width: 5px;
  transform: rotateZ(2deg);
  translate: none;
}
body[data-aioos-visual="20260910"] #app .screen-caption { inset: auto 26px 17px; font-size: 12px; text-align: start; color: #473b70; }
body[data-aioos-visual="20260910"] #app [hidden] { display: none !important; }
body[data-aioos-visual="20260910"] #app [data-screen-mode="call-history"] .app-desktop { width: 64%; left: 18%; top: 32px; transform: none; }
body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] .app-phone { width: 26%; max-width: clamp(180px, 17.5vw, 245px); right: 12%; bottom: 48px; transform: rotateZ(1deg); }
body[data-aioos-visual="20260910"] #app .app-feature-note {
  position: absolute;
  top: 27%;
  left: 9%;
  max-width: 36%;
  padding: 30px;
  background: var(--panel);
  border: 1px solid #b6a6cb;
  box-shadow: 10px 16px 0 #473b7012;
  transform: rotate(-2deg);
}
body[data-aioos-visual="20260910"] #app .app-feature-note img { width: 50px; margin-bottom: 24px; }
body[data-aioos-visual="20260910"] #app .app-feature-note h3 { font-size: clamp(25px, 3vw, 44px); margin-bottom: 18px; }
body[data-aioos-visual="20260910"] #app .app-feature-note p { font-size: 16px; line-height: 1.7; color: var(--muted); }
body[data-aioos-visual="20260910"] #app .app-knowledge {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(30px, 6vw, 100px);
  align-items: center;
  padding: clamp(30px, 5vw, 75px);
  min-height: 100%;
}
body[data-aioos-visual="20260910"] #app .app-knowledge > img { width: 100%; max-width: 400px; filter: drop-shadow(15px 25px 20px #473b7026); }
body[data-aioos-visual="20260910"] #app .app-knowledge h3 { font-size: clamp(32px, 4vw, 55px); margin: 20px 0; }
body[data-aioos-visual="20260910"] #app .app-knowledge p { max-width: 38ch; font-size: 18px; margin-bottom: 28px; line-height: 1.7; }
body[data-aioos-visual="20260910"] #app .app-knowledge .text-link { font-size: 15px; }
#screen-dialog .dialog-scroll.is-mobile-view { min-width: 0; display: flex; justify-content: center; }
#screen-dialog .dialog-scroll.is-mobile-view #dialog-image { width: min(100%, 390px); min-width: 0; height: auto; }
#screen-dialog .dialog-scroll.is-mobile-view::after { display: none; }
html.no-js body[data-aioos-visual="20260910"] #app .tab-list,
html.no-js body[data-aioos-visual="20260910"] #app [data-zoom] { display: none; }

@media (max-width: 1100px) {
  body[data-aioos-visual="20260910"] #app .app-desktop { width: 64%; left: 6%; top: 35px; }
  body[data-aioos-visual="20260910"] #app .app-phone { width: 22%; max-width: 200px; right: 5%; }
  body[data-aioos-visual="20260910"] #app [data-screen-mode="call-history"] .app-desktop { top: 34px; }
}
@media (max-width: 767px) {
  body[data-aioos-visual="20260910"] #app .app-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 28px; }
  body[data-aioos-visual="20260910"] #app .app-heading p { max-width: 48ch; }
  body[data-aioos-visual="20260910"] #app .app-editorial { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  body[data-aioos-visual="20260910"] #app .tab-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 24px; }
  body[data-aioos-visual="20260910"] #app .tab-list button { padding: 10px 12px; font-size: 14px; }
  body[data-aioos-visual="20260910"] #app .app-editorial > .text-link { justify-self: start; max-width: 100%; }
  body[data-aioos-visual="20260910"] #app .app-panel { height: clamp(310px, 75vw, 490px); }
  body[data-aioos-visual="20260910"] #app .app-desktop { width: 76%; left: 3%; top: 47px; border-width: 3px; border-radius: 7px; }
  body[data-aioos-visual="20260910"] #app .desktop-chrome { height: 17px; padding-inline: 6px; font-size: 5px; gap: 8px; }
  body[data-aioos-visual="20260910"] #app .app-phone { width: 27%; right: 4%; bottom: 42px; border-width: 3px; border-radius: 20px; }
  body[data-aioos-visual="20260910"] #app .phone-top { height: 16px; padding-inline: 7px; font-size: 5px; }
  body[data-aioos-visual="20260910"] #app .phone-island { width: 32px; height: 8px; top: 4px; }
  body[data-aioos-visual="20260910"] #app .screen-caption { inset: auto 14px 12px; font-size: 10px; }
  body[data-aioos-visual="20260910"] #app [data-screen-mode="call-history"] .app-desktop { width: 82%; left: 9%; top: 28px; }
  body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] { height: 550px; }
  body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] .app-phone { width: 49%; max-width: 215px; right: 5%; bottom: 45px; }
  body[data-aioos-visual="20260910"] #app .app-feature-note { top: 54px; left: 5%; max-width: 43%; padding: 20px 16px; }
  body[data-aioos-visual="20260910"] #app .app-feature-note img { width: 35px; margin-bottom: 18px; }
  body[data-aioos-visual="20260910"] #app .app-feature-note h3 { font-size: 23px; overflow-wrap: anywhere; }
  body[data-aioos-visual="20260910"] #app .app-feature-note p { font-size: 13px; }
  body[data-aioos-visual="20260910"] #app [data-screen-mode="train"] { height: auto; min-height: 470px; }
  body[data-aioos-visual="20260910"] #app .app-knowledge { grid-template-columns: minmax(0, 1fr); padding: 26px; gap: 4px; }
  body[data-aioos-visual="20260910"] #app .app-knowledge > img { width: 160px; justify-self: end; }
  body[data-aioos-visual="20260910"] #app .app-knowledge h3 { margin: 14px 0; }
  body[data-aioos-visual="20260910"] #app .app-knowledge p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-aioos-visual="20260910"] #app .tab-list button { transition: none; }
}
@media (forced-colors: active) {
  body[data-aioos-visual="20260910"] #app .app-panel,
  body[data-aioos-visual="20260910"] #app .app-feature-note { background: Canvas; border-color: CanvasText; }
  body[data-aioos-visual="20260910"] #app .tab-list button[aria-selected="true"] { background: Highlight; color: HighlightText; }
}