/* Native layouts rebuilt in text so these small scenes remain sharp when magnified. */
.demo-talk-scene, .demo-focus-scene {
  container-type:inline-size;
  color:#fff; font-family:ui-rounded,-apple-system,BlinkMacSystemFont,sans-serif;
  text-align:left;
}
.demo-face {
  display:block; position:relative; width:100%; aspect-ratio:580 / 55; overflow:hidden;
}
.demo-face img { position:absolute; top:0; left:0; display:block; width:100%; height:auto; }
.demo-chat {
  width:min(85%,470px); min-width:0; padding:0 0 4%;
  overflow:hidden; background:#030303; border-radius:0 0 18px 18px;
  box-shadow:0 14px 22px -17px #243642b0;
  font-size:clamp(12px,2.8cqw,17px); line-height:1.3; letter-spacing:-.016em;
}
.demo-chat > .demo-face { height:clamp(20px,6cqw,42px); aspect-ratio:auto; }
.demo-chat-head {
  display:flex; align-items:center; gap:.8em;
  margin:.47em 5% .75em; font-size:1.03em;
}
.demo-chat-head strong { font-weight:610; }
.demo-back, .demo-close { line-height:1; font-weight:400; font-family:system-ui,sans-serif; }
.demo-back { font-size:1.6em; }
.demo-close { margin-left:auto; font-size:1.2em; }
.demo-chat-observation { position:relative; margin:0 5%; min-height:11.2em; }
.demo-empty-chat { font-size:1.24em; font-weight:520; padding:.55em 0; }
.demo-conversation { display:flex; flex-direction:column; gap:.63em; }
.demo-sent {
  display:block; margin-left:auto; max-width:90%; padding:.53em .73em;
  border-radius:.65em; background:#242424; color:white;
}
.demo-message { position:relative; }
.demo-waiting { display:inline-flex; align-items:center; gap:.5em; font-size:.86em; color:#bcbcc0; }
.demo-waiting::before {
  content:""; width:.7em; height:.7em; border-radius:50%;
  border:1.7px solid #5f5f64; border-top-color:#e6e6e9;
}
.demo-reply small { display:block; margin-bottom:.2em; font-size:.77em; color:#b8b8bb; }
.demo-reply p { margin:0; color:#fff; font-size:inherit; line-height:1.3; }
.demo-compose {
  display:flex; align-items:center; gap:.6em; margin-top:.7em;
  padding:.47em .52em; background:#1a1a1c; color:#c9c9cb; border-radius:.62em;
  font-size:.86em;
}
.demo-compose-plus { font-size:1.4em; color:#d0d0d2; line-height:1; }
.demo-send { padding:.2em .4em; margin-left:auto; border-radius:.35em; background:#303033; }
.demo-typed { color:#fff; }
.demo-draft { padding:.8em; border-radius:.62em; background:#171719; }
.demo-draft-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.7em; font-size:.88em; }
.demo-draft-head strong { font-weight:600; }
.demo-draft-head span { color:#c3c3c7; }
.demo-field { padding:.55em .65em; border-radius:.37em; background:#27272a; }
.demo-due { display:flex; align-items:center; gap:.45em; margin:.64em 0; color:#d1d1d4; font-size:.82em; }
.demo-due i { width:.86em; height:.86em; border:1px solid #96969b; border-radius:.2em; }
.demo-save {
  padding:.55em .5em; border-radius:.39em; color:#121214; background:#f4f4f5;
  text-align:center; font-size:.84em; font-weight:620;
}
/* A reviewable draft is the held pose when motion is paused or JS is unavailable. */
.demo-talk-title, .demo-conversation, .demo-empty-chat, .demo-compose, .demo-typed, .demo-waiting { display:none; }
.story-talk-visual:is([data-demo-step="0"],[data-demo-step="1"],[data-demo-step="2"]) :is(.demo-review-title,.demo-draft) { display:none; }
.story-talk-visual:is([data-demo-step="0"],[data-demo-step="1"],[data-demo-step="2"]) .demo-talk-title { display:block; }
.story-talk-visual:is([data-demo-step="0"],[data-demo-step="1"],[data-demo-step="2"]) .demo-compose { display:flex; }
.story-talk-visual:is([data-demo-step="0"],[data-demo-step="1"]) .demo-compose { position:absolute; inset:auto 0 0; }
.story-talk-visual[data-demo-step="0"] :is(.demo-empty-chat,.demo-typed) { display:block; }
.story-talk-visual[data-demo-step="0"] .demo-placeholder,
.story-talk-visual[data-demo-step="1"] .demo-reply { display:none; }
.story-talk-visual[data-demo-step="0"] .demo-send { background:#fbfbfb; color:#171717; }
.story-talk-visual:is([data-demo-step="1"],[data-demo-step="2"]) .demo-conversation { display:flex; }
.story-talk-visual[data-demo-step="1"] .demo-waiting { display:inline-flex; }
.story-talk-visual:is(:not([data-demo-step]),[data-demo-step="3"]) .demo-conversation { display:block; }
.story-talk-visual:is(:not([data-demo-step]),[data-demo-step="3"]) .demo-sent { display:none; }
.story-talk-visual:is(:not([data-demo-step]),[data-demo-step="3"]) .demo-draft { margin-top:.65em; }

.demo-focus-stage {
  --seam:41%; position:relative; width:100%; height:100%; overflow:hidden;
  background:#f5f4f0; isolation:isolate;
}
.demo-display {
  position:absolute; width:260%; height:auto; max-width:none; left:-80%; top:var(--seam);
  transform:translateY(-13.25%); filter:sepia(.58) saturate(.64); pointer-events:none;
  mask-image:linear-gradient(to bottom,transparent,#000 8%);
}
.demo-focus-seat {
  position:absolute; top:var(--seam); left:50%; width:80%;
  transform:translateX(-50%);
}
.demo-focus-menu {
  display:block; width:100%; height:auto; border-radius:0 0 14px 14px;
  opacity:0; transform-origin:top center; transform:scaleY(.1); visibility:hidden;
  box-shadow:0 11px 18px -12px #2d241e7a;
}
.demo-focus-notch {
  position:absolute; top:-1px; left:0; width:100%; display:flex; align-items:center;
  padding-right:2.5%; box-sizing:border-box; background:#020202;
  border-radius:0 0 clamp(6px,2cqw,13px) clamp(6px,2cqw,13px); overflow:hidden;
}
.demo-focus-notch .demo-face { flex:1; min-width:0; }
.demo-countdown {
  display:flex; align-items:center; gap:.35em; flex:none; color:#fafafa;
  font-size:clamp(11px,3.6cqw,23px); font-weight:550; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.demo-countdown i { width:.43em; height:.43em; border-radius:50%; background:#e8624f; }
.demo-minute-start, .demo-minute-one { display:none; }
.story-focus-visual[data-demo-step="1"] .demo-minute-start,
.story-focus-visual[data-demo-step="2"] .demo-minute-one { display:inline; }
.story-focus-visual:is([data-demo-step="1"],[data-demo-step="2"]) .demo-minute-two { display:none; }
.story-focus-visual[data-demo-step="0"] .demo-focus-stage { --seam:7%; }
.story-focus-visual[data-demo-step="0"] .demo-focus-seat { width:min(78%,calc(var(--stage-height) * .82)); }
.story-focus-visual[data-demo-step="0"] .demo-focus-notch { opacity:0; }
.story-focus-visual[data-demo-step="0"] .demo-focus-menu { opacity:1; visibility:visible; transform:scaleY(1); }

@media (prefers-reduced-motion:no-preference) {
  body:not(.motion-paused) .story-focus-visual:is([data-demo-step="1"],[data-demo-step="2"],[data-demo-step="3"]) :is(.demo-focus-seat,.demo-display) {
    transition:top .4s cubic-bezier(.2,.65,.3,1),width .4s cubic-bezier(.2,.65,.3,1);
  }
  body:not(.motion-paused) .story-focus-visual[data-demo-step="1"] .demo-focus-menu {
    transition:transform .32s cubic-bezier(.2,.65,.3,1),opacity .18s,visibility 0s .32s;
  }
  body:not(.motion-paused) .story-focus-visual[data-demo-step="1"] .demo-focus-notch { transition:opacity .22s .12s; }
  body:not(.motion-paused) .story-talk-visual[data-demo-step="2"] .demo-reply,
  body:not(.motion-paused) .story-talk-visual[data-demo-step="3"] .demo-draft { animation:demo-arrive .23s ease-out; }
}
@keyframes demo-arrive { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
@media (max-width:600px) {
  .demo-chat { width:90%; padding-bottom:4%; }
  .demo-chat-observation { min-height:10.55em; }
}

/* One explicit save moves the sample task from Chii to its named list. */
.desktop-home-features .story-reminders-visual {
  background:linear-gradient(140deg,#edf2ed,#d7e7e0 66%,#deebe4);
}
.demo-save-scene {
  container-type:inline-size;
  text-align:left; font-family:ui-rounded,-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:clamp(13px,2.9cqw,17px); letter-spacing:-.016em; line-height:1.3;
}
.save-review, .save-result { width:min(84%,458px); min-width:0; }
.save-review { overflow:hidden; color:#fafafa; background:#030303; border-radius:0 0 18px 18px; box-shadow:0 13px 24px -18px #27372eb3; }
.save-review > .demo-face { height:clamp(21px,6cqw,41px); aspect-ratio:auto; }
.save-review-content { padding:.4em 6% 5%; }
.save-review-heading { font-size:1.06em; font-weight:610; }
.save-review-fields { margin-top:.7em; padding:.72em; border-radius:.64em; background:#171719; }
.save-field-label { display:block; margin-bottom:.43em; color:#cbcbce; font-size:.82em; font-weight:540; }
.save-title { margin:0; padding:.52em .62em; border-radius:.38em; color:white; background:#28282a; font-weight:530; }
.save-details { margin:.28em 0 .45em; font-size:.87em; }
.save-details div { display:flex; justify-content:space-between; align-items:center; gap:.7em; padding:.3em .2em; }
.save-details dt { color:#bcbcc2; }
.save-details dd { margin:0; color:#f4f4f6; }
.demo-save-scene [data-save-reminder] {
  display:block; width:100%; min-height:44px; padding:.5em .8em; border:0;
  border-radius:.44em; color:#121214; background:#f4f4f5;
  font:600 .91em/1.2 ui-rounded,-apple-system,BlinkMacSystemFont,sans-serif;
  cursor:pointer;
}
.demo-save-scene [data-save-reminder]:hover { background:#e0e0e3; }
.demo-save-scene [data-save-reminder]:focus-visible { outline:3px solid #4f9bed; outline-offset:3px; }
.demo-save-scene [hidden] { display:none; }
.save-result { padding:0; }
.save-result:focus-visible { outline:2px solid #356f66; outline-offset:5px; border-radius:9px; }
.save-receipt {
  width:82%; margin:0 auto 3.5%; overflow:hidden;
  color:#fff; background:#030303; border-radius:0 0 11px 11px;
}
.save-receipt .demo-face { height:clamp(17px,4.6cqw,30px); aspect-ratio:auto; }
.save-receipt-content { padding:0 8% .7em; }
.save-receipt-content strong { font-size:.97em; font-weight:560; }
.save-success { display:flex; align-items:center; gap:.42em; padding-top:.26em; color:#c6c8c8; font-size:.82em; font-weight:500; }
.save-success i { display:grid; place-items:center; width:1.12em; height:1.12em; border:1px solid; border-radius:50%; font-style:normal; line-height:1; color:#80c793; font-size:.93em; }
.save-list {
  overflow:hidden; background:#fff; color:#252527; border:1px solid #677a7026; border-radius:12px;
  box-shadow:0 12px 24px -16px #283d34a0;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
}
.save-list-toolbar {
  display:flex; align-items:center; gap:1em; min-height:2.25em; padding:0 5%;
  border-bottom:1px solid #e6e6e8;
  background:#f6f6f7; color:#57575d; font-size:.78em; font-weight:550;
}
.save-window-dots { display:flex; gap:4px; }
.save-window-dots i { width:clamp(6px,1.38cqw,9px); aspect-ratio:1; border-radius:50%; background:#ff6058; }
.save-window-dots i:nth-child(2) { background:#ffbd2e; }
.save-window-dots i:nth-child(3) { background:#26ba42; }
.save-list-content { padding:5% 6% 9%; }
.save-list-heading { display:flex; align-items:baseline; justify-content:space-between; color:#0876bd; font-size:clamp(24px,6.3cqw,39px); line-height:1.12; letter-spacing:-.045em; }
.save-list-heading strong { font-weight:670; }
.save-list-heading > span { font-weight:380; }
.save-list ul { list-style:none; margin:.68em 0 0; padding:0; }
.save-list li { display:flex; align-items:center; gap:.64em; padding:.34em 0 .65em; border-bottom:1px solid #e7e7e9; font-size:1.02em; }
.save-incomplete { display:inline-block; flex:none; width:1.03em; aspect-ratio:1; border:1.5px solid #a2a3a7; border-radius:50%; }
@media (prefers-reduced-motion:no-preference) {
  body:not(.motion-paused) [data-save-arrival] .save-success { animation:demo-arrive .2s ease-out both; }
  body:not(.motion-paused) [data-save-arrival] .save-list { animation:demo-arrive .28s .16s ease-out both; }
  body:not(.motion-paused) [data-save-arrival] :is(.save-list li, .save-list-heading > span) { animation:reminder-entry-arrive .3s .42s ease-out both; }
  @keyframes reminder-entry-arrive { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
}
@media (max-width:600px) {
  .save-review, .save-result { width:89%; }
  .save-review-content { padding-top:.2em; }
}