/* X-Modus concept preview: local authored data, no device or screen access. */
.x-flow { background: #fdfbf7; }
.x-intro-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; margin-bottom: 22px; color: #344951; }
.x-intro-label > span { font-size: 10px; padding: 4px 7px; background: #eff0e6; border-radius: 5px; color: #647064; margin-left: 4px; }
.x-demo { border-radius: 27px; background: #e7eff7; border: 1px solid #d5e0e9; overflow: hidden; box-shadow: 0 25px 55px -42px #49668080; }
.x-demo-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 25px; background: #f5f8fb; border-bottom: 1px solid #d8e3ec; }
.x-workspace-label { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #5b6e7d; }
.x-desktop-icon { display: block; width: 17px; height: 12px; border: 1px solid currentColor; border-radius: 2px; position: relative; }
.x-desktop-icon::after { content: ''; position: absolute; left: 5px; bottom: -5px; width: 5px; height: 3px; border-bottom: 1px solid currentColor; }
.x-power { display: inline-flex; gap: 10px; align-items: center; border: 1px solid #dedf9c; background: #f5ff4a; color: #28312e; padding: 10px 13px; min-height: 42px; border-radius: 10px; font-size: 12px !important; font-weight: 600 !important; transition: background .2s,box-shadow .2s; }
.x-power:hover { background: #edfa22; box-shadow: 0 4px 15px #777e1f20; }
.x-power[aria-pressed="true"] { border-color: #bfcbd8; background: #e8eef6; }
.x-switch { display: flex; align-items: center; width: 26px; height: 15px; padding: 2px; border-radius: 10px; background: #758037; }
.x-switch i { width: 11px; height: 11px; border-radius: 50%; background: white; transition: transform .22s; }
.x-power[aria-pressed="true"] .x-switch { background: #567499; }
.x-power[aria-pressed="true"] .x-switch i { transform: translateX(11px); }
.x-desktop { height: 640px; position: relative; isolation: isolate; background: url('assets/app-clouds-v1.webp') center 70% / cover; }
.x-desktop::before { position: absolute; content: ''; inset: 0; background: #dce8f533; z-index: -1; }
.x-edge-light { pointer-events: none; position: absolute; inset: 0; z-index: 4; opacity: 0; box-shadow: inset 14px 0 24px -11px #9d8dff,inset -14px 0 24px -11px #ffdd77,inset 0 -13px 24px -14px #aedaf9; transition: opacity .4s; }
.x-demo[data-x-state="listening"] .x-edge-light,.x-demo[data-x-state="draft"] .x-edge-light { opacity: 1; }
.x-mail { position: absolute; left: 30px; top: 28px; width: 790px; min-height: 530px; background: #fff; color: #35404c; border-radius: 12px; box-shadow: 0 19px 35px -18px #455b7970; overflow: hidden; border: 1px solid #e4e9ef; }
.x-mail-chrome { display: flex; justify-content: space-between; align-items: center; background: #f6f8fc; border-bottom: 1px solid #e7ecf1; padding: 11px 17px; font-size: 10px; color: #5c6a7a; }
.x-mail-chrome > span:first-child { display: flex; align-items: center; gap: 8px; }
.x-window-controls { font-size: 12px; word-spacing: 4px; }
.x-mail-layout { display: grid; grid-template-columns: 127px minmax(0,1fr); min-height: 482px; }
.x-mail-sidebar { padding: 22px 10px; background: #f6f8fb; border-right: 1px solid #e8edf1; font-size: 10px; color: #6b7888; }
.x-mail-sidebar > span { display: flex; justify-content: space-between; padding: 9px; margin-bottom: 5px; }
.x-mail-sidebar > span:first-child { background: #e5edf7; color: #375d8b; border-radius: 5px; }
.x-mail-sidebar b { font-weight: 500; }
.x-sidebar-line { border-top: 1px solid #e2e8ee; margin: 19px 6px; }
.x-mail-sidebar > small { display: block; font-size: 9px; padding: 0 9px 10px; }
.x-selected-mail { padding: 12px 9px; background: #fff; border-radius: 6px; border: 1px solid #e1e7ee; }
.x-selected-mail span,.x-selected-mail small { display: block; margin-top: 7px; font-size: 9px; }
.x-mail-main { padding: 25px 29px; }
.x-mail-main > h3 { font-size: 17px; font-weight: 600; letter-spacing: -.03em; margin: 0 0 22px; }
.x-sender { display: flex; gap: 10px; align-items: center; margin-bottom: 38px; }
.x-person { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #dfeaf3; color: #477291; font-size: 12px; }
.x-sender b { display: block; font-size: 12px; font-weight: 600; }
.x-sender small { display: block; font-size: 9px; color: #627180; margin-top: 4px; }
.x-context { position: relative; max-width: 394px; border-radius: 7px; outline: 1px solid transparent; outline-offset: 8px; transition: outline-color .3s, background .3s; }
.x-context p { font-size: 12px; line-height: 1.65; margin: 0 0 12px; }
.x-context p:last-child { margin-bottom: 0; }
.x-context mark { background: transparent; color: inherit; transition: background .3s; }
.x-demo[data-x-state="listening"] .x-context,.x-demo[data-x-state="draft"] .x-context { outline-color: #ccb968; background: #fffef7; }
.x-demo[data-x-state="listening"] .x-context mark,.x-demo[data-x-state="draft"] .x-context mark { background: #fbefb1; }
.x-context-label { position: absolute; top: -30px; right: -7px; display: flex; align-items: center; gap: 6px; color: #6c683e; font-size: 8px; background: #fffde8; border: 1px solid #ece2ac; padding: 4px 7px; border-radius: 5px; opacity: 0; transition: opacity .3s; }
.x-context-label .mini-check { transform: scale(.8); }
.x-demo[data-x-state="listening"] .x-context-label,.x-demo[data-x-state="draft"] .x-context-label { opacity: 1; }
.x-mail-reply { border: 1px solid #dce3ea; border-radius: 9px; margin-top: 21px; padding: 14px 15px; background: #fcfdff; }
.x-reply-label { display: block; font-size: 9px; color: #5f7182; margin-bottom: 13px; }
.x-inserted { font-size: 12px; line-height: 1.65; min-height: 60px; }
.x-inserted p { margin: 0 0 9px; }
.x-inserted p:last-child { margin: 0; }
.x-empty-cursor { display: inline-block; height: 16px; width: 1px; background: #56718d; vertical-align: text-bottom; margin-right: 6px; }
.x-empty-text { font-size: 11px; color: #596f7f; }
.x-inserted-note { display: flex; align-items: center; gap: 7px; font-size: 9px; color: #497967; line-height: 1.6; margin-top: 13px; }
.x-intent-note { position: absolute; top: 62px; right: 28px; width: 185px; padding: 18px 12px; transform: rotate(4deg); color: #243c55; transition: opacity .25s; }
.x-intent-note > span { font-size: 11px; }
.x-intent-note p { font: 400 21px/1.3 Georgia,serif; margin: 13px 0; }
.x-intent-note small { font-size: 11px; line-height: 1.7; color: #536b80; }
.x-intent-note svg { display: block; margin: 18px 0 0 18px; width: 86px; height: 43px; fill: none; stroke: #718193; stroke-width: 1.3; transform: rotate(-25deg); }
.x-demo:not([data-x-state="idle"]) .x-intent-note { opacity: 0; pointer-events: none; }
.x-listening { position: absolute; z-index: 5; bottom: 71px; left: 240px; right: 60px; display: flex; align-items: center; gap: 16px; color: #fff; background: #182837; padding: 16px 19px; border-radius: 14px; box-shadow: 0 18px 28px -17px #1a344e90; }
.x-listening .voice-bars { color: #f5ff27; flex-shrink: 0; }
.x-listening p { margin: 0; font-size: 13px; line-height: 1.6; }
.x-listening button { margin-left: auto; flex-shrink: 0; border: 1px solid #56616c; background: #2b3b49; color: #e3ebf3; border-radius: 7px; padding: 11px 12px; font-size: 10px; min-height: 40px; }
.x-listening button:hover { background: #405365; }
.x-agent { position: absolute; z-index: 5; top: 82px; right: 31px; width: 430px; color: #eef3f8; background: #142431; border: 1px solid #344652; border-radius: 18px; box-shadow: 0 25px 50px -17px #15294080; }
.x-agent > header { display: flex; align-items: center; justify-content: space-between; padding: 17px 19px 14px; }
.x-agent-brand { display: flex; align-items: center; gap: 7px; }
.x-agent-brand img { filter: invert(1); }
.x-agent-brand b { font-size: 14px; letter-spacing: -.025em; font-weight: 500; }
.x-agent-brand > span { font-size: 9px; color: #e4ef97; border: 1px solid #65744b; background: #354133; border-radius: 5px; padding: 4px 6px; margin-left: 5px; }
.x-close { width: 30px; height: 30px; display: grid; place-items: center; color: #b8c8d5; background: transparent; border: 1px solid #3b505f; border-radius: 50%; padding: 0; }
.x-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.x-close:hover { background: #344957; }
.x-agent :focus-visible,.x-listening :focus-visible { outline: 2px solid #f5ff4a; outline-offset: 3px; }
.x-request { display: flex; align-items: center; gap: 12px; background: #253543; margin: 0 17px; padding: 12px; border-radius: 9px; }
.x-request .voice-bars { color: #f5ff27; flex-shrink: 0; transform: scale(.7); margin-inline: -5px; }
.x-request p { color: #dbe5ed; font-size: 11px; line-height: 1.6; margin: 0; }
.x-context-tags { display: flex; gap: 8px; margin: 13px 21px 0; }
.x-context-tags > span { display: flex; gap: 5px; align-items: center; font-size: 9px; color: #bfcfd9; }
.x-context-tags > span + span::before { content: '+'; color: #8ca5b8; padding-right: 3px; }
.x-context-tags .mini-check { border-color: #9aaf7a; transform: scale(.8); }
.x-context-tags .mini-check::after { border-color: #bdd791; }
.x-answer { padding: 19px 23px 10px; min-height: 211px; }
.x-answer p { font-size: 13px; font-weight: 400; line-height: 1.7; margin: 0 0 13px; }
.x-answer p:last-child { margin-bottom: 0; }
.x-refinements { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; padding: 12px 20px 17px; }
.x-refinements > span { font-size: 9px; color: #bbccd8; margin-right: auto; }
.x-refinements button { background: #253846; color: #e1eaf2; border: 1px solid #405463; border-radius: 7px; padding: 8px 10px; min-height: 34px; font-size: 10px; }
.x-refinements button:hover,.x-refinements button[aria-pressed="true"] { background: #405667; border-color: #6d889b; }
.x-agent > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 19px; border-top: 1px solid #344552; background: #1e303d; border-radius: 0 0 18px 18px; }
.x-agent > footer > span { font-size: 9px; color: #b9ccd9; }
.x-accept { display: inline-flex; gap: 13px; align-items: center; padding: 11px 13px; min-height: 40px; background: #f3ff4c; color: #203124; border: 0; border-radius: 8px; font-size: 11px !important; font-weight: 600 !important; }
.x-accept:hover { background: #eaf634; }
.x-taskbar { display: flex; align-items: center; gap: 20px; position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background: #f4f7faeb; border: 1px solid #d9e3eb; border-radius: 12px; padding: 9px 18px; box-shadow: 0 6px 13px #52708a18; }
.x-taskbar > svg { width: 22px; height: 22px; fill: #4e81b2; }
.x-taskbar-brand { position: relative; display: flex; }
.x-demo:not([data-x-state="idle"]) .x-taskbar-brand::after { content: ''; position: absolute; bottom: -5px; left: 6px; right: 6px; height: 2px; border-radius: 2px; background: #678399; }
.x-demo-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 25px; min-height: 70px; background: #f7fafc; }
.x-demo-bottom p { margin: 0; font-size: 12px; line-height: 1.6; color: #576e7f; }
.x-replay { border: 0; background: transparent; color: #3b5e76; font-size: 11px !important; text-decoration: underline; text-underline-offset: 4px; padding: 10px 0 10px 10px; min-height: 40px; white-space: nowrap; }
.x-replay > span { margin-left: 9px; text-decoration: none; }
.x-explained { display: grid; grid-template-columns: repeat(3,1fr); gap: 35px; margin: 32px 10px 0; }
.x-explained-number { font-size: 10px; color: #607380; font-variant-numeric: tabular-nums; }
.x-explained h3 { font-size: 15px; font-weight: 600; line-height: 1.5; margin: 9px 0; }
.x-explained p { color: #5d6c75; font-size: 13px; line-height: 1.65; margin: 0; max-width: 37ch; }
.x-distinction { display: flex; gap: 30px; align-items: center; justify-content: center; margin: 39px 0 0; padding: 24px 0 0; border-top: 1px solid #e3e6e3; }
.x-distinction p { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #59696f; margin: 0; }
.x-distinction b { font-weight: 600; color: #253c49; }
.x-distinction-line { width: 1px; height: 24px; background: #dce1df; }
@media (min-width: 1051px) {
  .x-demo[data-x-state="inserted"] .x-desktop { height: 720px; }
}
@media (min-width: 761px) and (max-width: 1050px) {
  .x-desktop { height: 760px; }
  .x-mail { width: calc(100% - 54px); left: 24px; }
  .x-mail-layout { grid-template-columns: 90px 1fr; }
  .x-mail-sidebar { padding-inline: 6px; }
  .x-mail-main { padding: 24px; }
  .x-context { max-width: 300px; }
  .x-agent { top: 130px; right: 22px; width: 370px; }
  .x-intent-note { right: 23px; top: 352px; width: 160px; }
  .x-intent-note p { font-size: 19px; }
  .x-intent-note svg { display: none; }
  .x-listening { left: 45px; right: 35px; bottom: 88px; }
  .x-refinements > span { width: 100%; }
  .x-distinction { gap: 20px; }
  .x-distinction p { display: block; line-height: 1.7; }
  .x-distinction b { display: block; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .x-mail-layout { display: block; }
  .x-mail-sidebar { display: none; }
  .x-context { max-width: 240px; }
  .x-agent { width: 340px; }
  .x-intent-note { top: 215px; right: 50px; width: 220px; }
}
@media (max-width: 760px) {
  .x-intro-label { font-size: 12px; margin-bottom: 19px; }
  .x-demo { border-radius: 21px; }
  .x-demo-top { padding: 13px; gap: 10px; }
  .x-workspace-label { font-size: 10px; gap: 7px; }
  .x-desktop-icon { display: none; }
  .x-power { padding: 10px; font-size: 10px !important; gap: 7px; }
  .x-desktop { height: auto; min-height: 590px; padding: 18px 12px 77px; }
  .x-mail { position: relative; top: auto; left: auto; width: 100%; min-height: 0; }
  .x-mail-layout { display: block; min-height: 0; }
  .x-mail-sidebar { display: none; }
  .x-mail-main { padding: 20px 18px; }
  .x-mail-main > h3 { font-size: 15px; margin-bottom: 18px; }
  .x-mail-chrome { padding: 10px 13px; }
  .x-context { max-width: none; }
  .x-context p { font-size: 11px; line-height: 1.7; }
  .x-context-label { top: -27px; right: 0; font-size: 7px; }
  .x-context-label .mini-check { display: none; }
  .x-mail-reply { padding: 13px 12px; margin-top: 20px; }
  .x-empty-text { font-size: 10px; }
  .x-inserted { font-size: 11px; min-height: 54px; }
  .x-inserted-note { align-items: start; font-size: 8px; }
  .x-inserted-note > .mini-check { margin-top: 2px; }
  .x-intent-note { position: relative; top: auto; right: auto; width: auto; padding: 22px 15px 0; transform: none; }
  .x-intent-note p { font-size: 19px; line-height: 1.4; margin: 8px 0 0; }
  .x-intent-note p br { display: none; }
  .x-intent-note small,.x-intent-note svg { display: none; }
  .x-demo:not([data-x-state="idle"]) .x-intent-note { display: none; }
  .x-listening { position: relative; left: auto; right: auto; bottom: auto; margin-top: 20px; padding: 16px; flex-wrap: wrap; gap: 10px; }
  .x-listening > p { font-size: 12px; flex: 1; }
  .x-listening > button { width: 100%; margin: 4px 0 0; font-size: 11px; }
  .x-agent { position: relative; width: 100%; top: auto; right: auto; margin-top: 21px; border-radius: 15px; }
  .x-agent > header { padding: 15px 13px; }
  .x-agent-brand b { font-size: 13px; }
  .x-agent-brand > span { font-size: 8px; margin-left: 1px; }
  .x-request { margin: 0 12px; padding: 11px; gap: 9px; }
  .x-request p { font-size: 10px; }
  .x-context-tags { margin-inline: 16px; }
  .x-context-tags > span { font-size: 8px; }
  .x-answer { padding: 17px 17px 8px; min-height: 0; }
  .x-answer p { font-size: 12px; }
  .x-refinements { padding: 12px 16px 17px; }
  .x-refinements > span { width: 100%; font-size: 9px; margin-bottom: 2px; }
  .x-agent > footer { padding: 13px; gap: 8px; border-radius: 0 0 15px 15px; }
  .x-agent > footer > span { font-size: 8px; max-width: 13ch; line-height: 1.5; }
  .x-accept { font-size: 10px !important; gap: 8px; padding-inline: 10px; }
  .x-demo-bottom { flex-direction: column; align-items: start; gap: 4px; padding: 16px; min-height: 80px; }
  .x-demo-bottom p { font-size: 11px; }
  .x-replay { padding-left: 0; font-size: 10px !important; }
  .x-explained { grid-template-columns: 1fr; gap: 23px; margin: 27px 6px 0; }
  .x-explained > div { display: grid; grid-template-columns: 25px 1fr; column-gap: 11px; }
  .x-explained-number { padding-top: 5px; }
  .x-explained h3 { font-size: 14px; margin: 0 0 6px; }
  .x-explained p { font-size: 12px; grid-column: 2; max-width: none; }
  .x-distinction { gap: 20px; margin-top: 27px; align-items: start; }
  .x-distinction p { display: block; font-size: 11px; line-height: 1.6; max-width: 18ch; }
  .x-distinction b { display: block; margin-bottom: 4px; }
  .x-distinction-line { height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .x-demo *,.x-demo *::before,.x-demo *::after { transition: none !important; animation: none !important; }
}