* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: #f6f8fc; color: #172338; font: 16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
.page { width: min(100%, 1380px); padding: 20px 48px; margin: auto; min-height: 100svh; display: grid; grid-template-rows: 54px 1fr 28px; }
.site-header, .brand, nav, footer { display: flex; align-items: center; }
.site-header { justify-content: space-between; }
a { color: inherit; text-decoration: none; }
.brand { gap: 9px; font-size: 19px; font-weight: 750; letter-spacing: -.025em; }
.brand-mark, .relay { display: grid; place-items: center; color: white; background: #2852c6; font-weight: 750; }
.brand-mark { height: 29px; width: 29px; border-radius: 9px; font-size: 21px; }
.preview { margin-left: 3px; padding: 2px 7px; font-size: 10px; font-weight: 500; letter-spacing: 0; color: #65738a; border: 1px solid #dce3ee; border-radius: 20px; }
nav { gap: 24px; font-size: 13px; color: #52627c; }
nav a:hover { color: #2852c6; }
main { min-width: 0; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(28px, 4vw, 64px); padding: 24px 0; }
.eyebrow { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #617497; }
h1 { margin: 0; font-size: clamp(40px, 4.5vw, 64px); line-height: 1.09; letter-spacing: -.048em; font-weight: 730; }
h1 span { color: #2852c6; }
.subtitle { margin: 22px 0 26px; color: #596a84; font-size: 18px; line-height: 1.6; }
h2 { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 650; letter-spacing: -.015em; }
blockquote { margin: 12px 0; padding: 16px 18px; border: 1px solid #dce3ee; border-radius: 10px; background: #fff; color: #40516c; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; user-select: text; }
.copy-button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 44px; padding: 10px 16px; border: 1px solid #2852c6; border-radius: 9px; color: #fff; background: #2852c6; font-size: 14px; font-weight: 650; }
.copy-button:hover:not(:disabled) { background: #2044a7; }
.copy-button:disabled { opacity: .55; }
.copy-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.copy-status { min-height: 18px; margin: 8px 0 0; color: #64758d; font-size: 11px; }
.small { font-size: 12px; color: #64758d; }
.showcase { min-width: 0; padding: 24px; border: 1px solid #dce3ee; border-radius: 20px; background: #fff; box-shadow: 0 16px 44px #263d6510; }
.scene-heading .eyebrow { margin-bottom: 7px; }
.scene-heading h2 { min-height: 50px; font-size: 22px; line-height: 1.2; max-width: 370px; }
.stage { height: 290px; position: relative; margin-top: 8px; overflow: hidden; border: 1px solid #dce4f0; border-radius: 14px; background: #f8faff; }
.setting-panels { position: absolute; inset: 8px; display: flex; gap: 12px; pointer-events: none; }
.setting-panels > div { width: calc(50% - 6px); border: 1px solid #dce5f2; border-radius: 10px; background: #f2f6ff; }
.setting-panels > div:last-child { background: #faf6ff; border-color: #e6ddf1; }
.stage[data-scene="0"] .setting-panels > div:first-child { width: 100%; border-style: dashed; background: #f5f8fd; }
.stage[data-scene="0"] .setting-panels > div:last-child { display: none; }
.contexts { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 16px; color: #526580; font-size: 12px; }
.contexts > .context { display: flex; align-items: center; gap: 6px; max-width: 47%; }
.contexts > .context:last-child { justify-content: flex-end; text-align: right; }
.setting-icon { display: none; flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
[data-scene="0"] .workspace-icon, [data-scene="1"] .person-icon, [data-scene="2"] .device-icon { display: block; }
.actors { position: absolute; inset: 146px 14px 8px; display: flex; justify-content: space-between; }
.actor { width: 136px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.avatar-wrap { position: relative; }
.avatar { position: relative; width: 72px; height: 72px; border: 3px solid white; border-radius: 20px; display: grid; place-items: center; box-shadow: 0 3px 12px #20345210; font-size: 24px; font-weight: 700; }
.actor strong { font-size: 14px; line-height: 1.3; }
.actor-status { min-height: 19px; font-size: 12px; color: #526580; }
[data-scene="2"] .avatar-wrap::before { content: ""; position: absolute; inset: -6px -12px; border: 1.5px solid #b5c5dd; border-radius: 7px; }
[data-scene="2"] .actor-left .avatar-wrap::after { content: ""; position: absolute; bottom: -9px; left: -19px; right: -19px; height: 5px; background: #c6d4e8; border-radius: 0 0 5px 5px; }
[data-scene="2"] .actor-right .avatar-wrap::after { content: ""; position: absolute; bottom: -11px; left: 24px; right: 24px; height: 5px; border-bottom: 2px solid #b5c5dd; }
[data-scene="2"] .actor strong { margin-top: 4px; }
.warm { background: #f6e6d9; color: #a55e36; }
.cool { background: #e5eafa; color: #435a99; }
.violet { background: #ebe3fa; color: #7b5baf; }
.teal { background: #dcf1e9; color: #277d67; }
.rose { background: #f9e4e9; color: #ab526e; }
.connection { position: absolute; top: 173px; left: 74px; width: calc(100% - 148px); height: 18px; }
.connection path { fill: none; stroke: #ced9ed; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.relay { position: absolute; z-index: 1; width: 24px; height: 24px; left: calc(50% - 12px); top: 170px; border-radius: 8px; font-size: 16px; box-shadow: 0 0 0 6px #f8faff; }
.stage[data-scene="0"] .relay { display: none; }
.stage[data-scene="2"] .setting-panels > div:first-child { background: #eff8fb; border-color: #d1e6ec; }
.stage[data-scene="2"] .setting-panels > div:last-child { background: #f7f3fe; }
.packet-lane { position: absolute; top: 52px; left: 20px; right: 20px; height: 86px; }
.packet { position: absolute; top: 0; display: none; width: min(216px, 70%); padding: 10px 12px; border: 1px solid #bdceef; border-radius: 10px; box-shadow: 0 4px 12px #24457409; color: #2f528d; background: #fff; font-size: 14px; line-height: 1.4; }
.task-summary { display: none; position: absolute; right: 0; top: 0; width: min(216px, 78%); padding: 10px 12px; border: 1px solid #c5d5ed; border-left: 3px solid #5e83cb; border-radius: 9px; background: #fff; color: #304967; }
.task-label { display: block; margin-bottom: 3px; color: #526580; font-size: 12px; }
.task-summary strong { display: block; font-size: 14px; line-height: 1.4; }
[data-phase="thinking"] .task-summary, [data-phase="working"] .task-summary { display: block; }
[data-phase="thinking"] .actor-right .avatar, [data-phase="working"] .actor-right .avatar, [data-phase="progress"] .actor-right .avatar { animation: working-pulse 1.8s ease-in-out infinite; }
.packet::after { content: ""; position: absolute; bottom: -5px; left: 20px; width: 8px; height: 8px; transform: rotate(45deg); background: white; border-right: 1px solid #cbd9f4; border-bottom: 1px solid #cbd9f4; }
.ack { width: 112px; color: #287b65; border-color: #b7dacd; }
.ack::after { border-color: #b7dacd; }
.progress, .result { left: 100%; transform: translateX(-100%); }
[data-phase="intro"] .request { display: block; }
[data-phase="send"] .request { display: block; animation: travel-out 2s ease-in-out both; }
[data-phase="ack"] .ack { display: block; animation: travel-back 1.5s ease-in-out both; }
[data-phase="progress"] .progress { display: block; animation: travel-back 2s ease-in-out both; }
[data-phase="result"] .result { display: block; animation: travel-back 2s ease-in-out both; }
[data-phase="done"] .result { display: block; left: 0; transform: none; border-color: #b7dacd; color: #287b65; }
[data-phase="done"] .actor-status { color: #287b65; }
[data-phase="ack"] .actor-right .avatar { animation: received-pulse 1.5s ease-out both; }
.thought { position: absolute; z-index: 2; top: -8px; right: -8px; display: none; align-items: center; gap: 3px; padding: 7px 8px; background: white; border: 1px solid #dce3ee; border-radius: 12px; }
.thought i { width: 5px; height: 5px; border-radius: 50%; background: #6986bc; animation: thinking 1.1s ease-in-out infinite; }
.thought i:nth-child(2) { animation-delay: .15s; }
.thought i:nth-child(3) { animation-delay: .3s; }
[data-phase="thinking"] .thought, [data-phase="progress"] .thought, [data-phase="working"] .thought { display: flex; }
.is-paused *, .is-paused *::after { animation-play-state: paused !important; }
.scene-caption { min-height: 34px; margin: 13px 0 0; color: #526580; font-size: 13px; line-height: 1.45; }
.playback { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.scene-selectors { display: flex; gap: 7px; }
.scene-dot { width: 27px; height: 27px; padding: 0; border: 1px solid #dce3ee; border-radius: 50%; color: #6b7d95; background: white; font-size: 11px; }
.scene-dot[aria-pressed="true"] { border-color: #2852c6; background: #2852c6; color: white; }
.pause-button { border: 0; padding: 4px 2px; background: transparent; color: #596d8a; font-size: 12px; }
.pause-button:hover:not(:disabled) { color: #2852c6; }
.disclaimer { margin: 12px 0 0; font-size: 12px; color: #60718a; line-height: 1.4; }
footer { justify-content: space-between; gap: 14px; color: #8090a7; font-size: 11px; }
button:focus-visible, a:focus-visible { outline: 3px solid #527cdb; outline-offset: 4px; }
@keyframes travel-out { from { left: 0; transform: translateX(0); } to { left: 100%; transform: translateX(-100%); } }
@keyframes travel-back { from { left: 100%; transform: translateX(-100%); } to { left: 0; transform: translateX(0); } }
@keyframes received-pulse { 0%, 100% { box-shadow: 0 3px 12px #20345210; } 35% { box-shadow: 0 0 0 7px #a9c4f344; } }
@keyframes working-pulse { 0%, 100% { box-shadow: 0 0 0 3px #779edf12; } 50% { box-shadow: 0 0 0 8px #779edf30; } }
@keyframes thinking { 0%, 70%, 100% { opacity: .35; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }
@media (min-width: 960px) { .page { height: 100svh; } }
@media (min-width: 960px) and (max-height: 700px) {
  .page { padding: 12px 32px; grid-template-rows: 44px 1fr 24px; }
  main { padding: 6px 0; gap: 30px; }
  h1 { font-size: 43px; }
  .subtitle { font-size: 16px; margin: 15px 0 18px; }
  blockquote { padding: 12px 14px; font-size: 13px; }
  .showcase { padding: 12px 18px; }
  .scene-heading h2 { font-size: 18px; min-height: 26px; max-width: none; }
  .scene-heading .eyebrow { margin-bottom: 4px; }
  .stage { height: 256px; }
  .actors { top: 132px; }
  .avatar { width: 64px; height: 64px; font-size: 22px; }
  .connection { top: 155px; }
  .relay { top: 152px; }
  .packet-lane { top: 42px; }
  .packet { font-size: 14px; padding: 8px 10px; }
  .task-summary { padding: 8px 10px; }
  .contexts { padding-top: 12px; padding-bottom: 12px; }
  .scene-caption { display: none; }
  .disclaimer { margin-top: 8px; }
}
@media (max-width: 959px) {
  .page { max-width: 640px; padding: 18px 24px; }
  main { grid-template-columns: 1fr; gap: 32px; padding: 30px 0; }
  h1 { font-size: clamp(40px, 8vw, 60px); }
  .showcase { padding: 20px; }
  .subtitle { margin: 18px 0 24px; }
  footer { align-items: flex-start; font-size: 10px; }
}
@media (max-width: 380px) {
  .page { padding: 14px 16px; }
  nav { gap: 12px; font-size: 11px; }
  .brand { font-size: 16px; gap: 6px; }
  .preview { display: none; }
  .showcase { padding: 14px; }
  .scene-heading h2 { font-size: 19px; }
  .packet-lane { left: 12px; right: 12px; }
  .packet { font-size: 14px; padding: 9px; }
  .actors { left: 8px; right: 8px; }
  .actor { width: 100px; }
  .actor strong { font-size: 14px; }
  .contexts { padding: 14px 10px; font-size: 12px; }
  .contexts > .context { gap: 4px; }
  .setting-icon { width: 15px; height: 15px; }
  .packet-lane { top: 57px; }
  .actors { top: 159px; }
  .stage { height: 305px; }
  .connection { top: 186px; }
  .relay { top: 183px; }
}
@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; transition: none !important; } }