:root {
  --paper:#faf9f6;
  --ink:#251f20;
  --muted:#625c5a;
  --red:#a82138;
  --line:#dedad4;
  --serif:"Songti SC","Noto Serif CJK SC","Source Han Serif SC","STSong",serif;
  --sans:"DM Sans","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}
button,a {
  touch-action:manipulation;
}
a:focus-visible,button:focus-visible {
  outline:3px solid #3266a4;
  outline-offset:4px;
}
.wrap {
  width:min(1280px,88%);
  margin-inline:auto;
}
.skip {
  position:absolute;
  z-index:20;
  top:-90px;
  left:12px;
  background:white;
  padding:12px;
}
.skip:focus {
  top:12px;
}
header {
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(250,249,246,.97);
  border-bottom:1px solid var(--line);
}
.bar {
  height:77px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.logo {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font:700 31px/1 Arial,sans-serif;
  letter-spacing:-1.9px;
}
.brand-icon {
  width:34px;
  height:34px;
  object-fit:contain;
}
nav,.bar-actions {
  display:flex;
  align-items:center;
}
nav {
  gap:clamp(20px,3vw,48px);
  font-size:14px;
}
nav a:hover,.text-link:hover,footer a:hover,.back:hover {
  color:var(--red);
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:21px;
  background:var(--red);
  color:#fff;
  border-radius:30px;
  padding:15px 24px;
  font-weight:650;
  font-size:15px;
  transition:background .15s,transform .15s;
}
.button:hover {
  background:#81172a;
  transform:translateY(-1px);
}
.button.small {
  padding:10px 18px;
  gap:17px;
  font-size:13px;
}
.button span,.quiet span {
  font:20px/1 Arial,sans-serif;
}
.bar-actions {
  gap:14px;
}
#menu {
  display:none;
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--red);
  font-size:13px;
  line-height:1.6;
  font-weight:650;
  letter-spacing:.09em;
}
.rule {
  width:26px;
  height:2px;
  background:currentColor;
}
.devices {
  background:#302428;
  color:white;
}
.devices .eyebrow {
  color:#f2bbc2;
}
.devices>.wrap>p {
  color:#d8cdd0;
}
.platforms {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:#605154;
  border:1px solid #605154;
  margin-top:32px;
  border-radius:14px;
  overflow:hidden;
}
.platforms article {
  background:#392d31;
  padding:30px;
}
.platforms h3 {
  font:600 25px/1.5 Arial,sans-serif;
  letter-spacing:-.04em;
  margin:20px 0 12px;
}
.platforms p {
  color:#f2cbd2;
  font-size:14px;
}
.platforms small {
  display:block;
  margin-top:6px;
  color:#d6c8c8;
}
.device-icon {
  width:31px;
  height:20px;
  border:2px solid #e8ccd1;
  display:block;
  border-radius:3px;
  position:relative;
}
.phone {
  width:15px;
  height:24px;
}
.iphone { border-radius: 5px; }
.iphone::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  right: 3px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.laptop:after,.desktop:after {
  content:"";
  position:absolute;
  background:#e8ccd1;
  height:2px;
  width:40px;
  bottom:-6px;
  left:-6px;
}
.desktop:after {
  width:18px;
  left:5px;
}
.web-link {
  display:flex;
  gap:16px;
  margin-top:23px;
  font-size:14px;
  color:#ded2d4;
}
.web-link a {
  color:white;
  text-decoration:underline;
  text-underline-offset:4px;
}
footer {
  padding:32px 0;
}
.foot {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
}
.foot .logo {
  font-size:23px;
}
.foot p,.foot div {
  font-size:12px;
  color:var(--muted);
}
.foot div {
  margin-left:auto;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}
.information {
  max-width:840px;
  padding-block:50px 80px;
}
.back {
  display:inline-block;
  margin-bottom:40px;
  font-size:14px;
}
.intro {
  margin-bottom:35px;
}
.information section {
  padding:17px 0;
  border-top:1px solid var(--line);
}
.information section h2 {
  font-size:27px;
}
.information a {
  text-decoration:underline;
}

h1,h2,h3,p,figure { margin: 0; }
h1,h2,h3 { font-family: var(--serif); }
h2,.information h1 { font-size: clamp(34px,3.45vw,55px); line-height: 1.28; font-weight: 620; letter-spacing: -.045em; margin: 14px 0 20px; }
.lead,.section-description,.story-intro>p,.continuity-grid article>p:not(.cap),.devices>.wrap>p,.information p { color: var(--muted); font-size: 16px; line-height: 1.85; }
.devices>.wrap>p { color: #d8cdd0; }
.cover { display: grid; grid-template-columns: .98fr 1.02fr; align-items: center; column-gap: 6%; padding-block: clamp(28px,4vw,60px); }
.cover-copy { padding-block: 16px; }
.cover h1 { font-size: clamp(58px,6.05vw,93px); line-height: 1.14; font-weight: 620; letter-spacing: -.065em; margin: 22px 0; }
.cover h1 em { color: var(--red); font-style: normal; }
.cover .lead { max-width: 29em; }
.cover-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 29px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; }
.text-link span { font: 20px/1 Arial,sans-serif; }
.cast { display: flex; gap: 6px; margin-top: 38px; border-top: 1px solid var(--line); padding-top: 19px; width: fit-content; }
.cast button { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: transparent; border: 1px solid transparent; border-radius: 25px; font-size: 13px; }
.cast button:hover { background: #ede7df; }
.cast button[aria-pressed=true] { border-color: #c98f98; background: #f4e7e6; color: #7d1b2d; }
.cast img { width: 32px; height: 32px; object-fit: cover; object-position: 50% 18%; border-radius: 50%; }
.feature-portrait { position: relative; height: clamp(420px,39vw,590px); overflow: hidden; border-radius: 7px 7px 50px 7px; isolation: isolate; background: #dfd1bc; }
.feature-portrait>img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 23%; }
.feature-portrait figcaption { position: absolute; inset: auto 0 0; padding: 54px 7% 22px; background: linear-gradient(transparent,rgba(36,27,21,.65) 54%,rgba(31,25,21,.83)); color: #fffaf0; }
.portrait-tag { font-size: 12px; letter-spacing: .12em; }
.portrait-name { display: flex; align-items: baseline; gap: 13px; margin: 2px 0 5px; }
.portrait-name b { font: 600 clamp(29px,3.15vw,48px)/1.18 var(--serif); letter-spacing: .015em; }
.portrait-name span { font-size: 14px; }
.portrait-line { font-family: var(--serif); font-size: clamp(15px,1.32vw,20px); line-height: 1.55; }
.feature-portrait small { font-size: 10px; color: #efe1d5; }
.weekend { padding-block: clamp(44px,5.8vw,83px); background: #eeeae3; }
.story-intro { display: grid; grid-template-columns: 1fr .82fr; gap: 10%; align-items: end; margin-bottom: 28px; }
.story-intro h2 { margin-bottom: 0; }
.story-intro>p { max-width: 30em; padding-bottom: 4px; }
.contact-book { display: grid; grid-template-columns: .72fr 1.4fr; background: #fdfbf6; border: 1px solid #d7d0c4; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 26px -24px #4f3c37; }
.contacts { padding: 25px; border-right: 1px solid #d9d1c8; }
.contacts-label { color: #5e544e; font-size: 12px; letter-spacing: .12em; margin-bottom: 17px; }
.contacts button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; }
.contacts button[aria-pressed=true] { background: #f2e7e3; border-color: #ddc6c1; }
.contacts button img,.friend-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; object-fit: cover; object-position: 50% 18%; }
.friend-icon { color: #454b3f; background: #e3e7d4; font: 600 20px var(--serif); }
.contacts button b,.contacts button small { display: block; }
.contacts button b { font-size: 15px; } .contacts button small,.contact-foot,.chat-top small { font-size: 12px; color: #6c605b; }
.contacts button i { margin-left: auto; color: #9e7774; font-style: normal; font-size: 22px; }
.contact-foot { margin: 19px 0 0 5px; }
.chat-paper { padding: 25px clamp(20px,4vw,60px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.chat-top { width: 100%; padding-bottom: 11px; margin-bottom: 4px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 14px; }
.bubble { font-size: 14px; line-height: 1.65; padding: 9px 14px; border-radius: 14px; max-width: 86%; }
.incoming { background: #eeebe4; border-bottom-left-radius: 2px; }
.outgoing { color: #fff; background: #913042; align-self: flex-end; border-bottom-right-radius: 2px; }
.continuity,.devices { padding-block: clamp(46px,6.1vw,88px); }
.section-description { max-width: 42em; }
.continuity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 30px; }
.continuity-grid article { display: flex; flex-direction: column; padding: clamp(23px,3vw,44px); border-radius: 14px; }
.memory-panel { background: #f1e7e3; }
.task-panel { background: #e9ece4; }
.cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; color: #722c3b; font-weight: 600; font-size: 14px; }
.task-panel .cap { color: #37543e; }
.cap span { font-size: 11px; font-weight: 400; }
.continuity-grid h3 { font-size: clamp(22px,2.05vw,34px); line-height: 1.4; margin: 16px 0 10px; }
.continuity-grid article>p:not(.cap) { font-size: 14px; }
.decision { margin-top: auto; padding-top: 20px; }
#memory-state,#route-result { font-size: 13px; line-height: 1.65; }
#memory-state { margin-bottom: 10px; }
.demo-button { background: #fff9; border: 1px solid #b7a49c; border-radius: 22px; padding: 9px 16px; font-size: 13px; }
.demo-button:hover { background: #fff; }
#route-result:not([hidden]) { display: grid; gap: 4px; margin-top: 14px; border-top: 1px solid #bac5b6; padding-top: 12px; }
.phone-break { display: none; }
@media (max-width:900px) {
  .platforms { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wrap { width: 90%; }
  .bar { height: 66px; }
  .cover { gap: 4%; }
  .cover h1 { font-size: clamp(45px,6vw,55px); }
  .cover .lead { font-size: 14px; }
  .cover-actions { gap: 12px; }
  .cast { margin-top: 23px; }
  .contacts { padding: 16px; }
}
@media (max-width:700px) {
  html { scroll-padding-top: 72px; }
  .bar { height: 61px; gap: 8px; }
  .logo { font-size: 25px; }
  .brand-icon { width: 29px; height: 29px; }
  .bar-actions { gap: 8px; }
  .bar .button.small { padding: 8px 12px; gap: 7px; font-size: 12px; }
  #menu { display: block; width: 34px; height: 34px; background: transparent; border: 1px solid var(--line); border-radius: 50%; font-size: 18px; }
  nav { display: none; }
  header.open nav { display: grid; position: absolute; inset: 100% 0 auto; gap: 0; padding: 6px 5%; background: var(--paper); border-bottom: 1px solid var(--line); }
  header.open nav a { padding: 11px 0; }
  .cover { grid-template-columns: 1fr; gap: 19px; padding-block: 26px; }
  .cover-copy { padding: 0; }
  .cover h1 { font-size: clamp(44px,10.5vw,65px); line-height: 1.13; margin: 13px 0; }
  .cover .lead { max-width: 36em; line-height: 1.75; }
  .cover-actions { margin-top: 15px; gap: 20px; }
  .button { font-size: 14px; padding: 11px 17px; }
  .text-link { font-size: 13px; }
  .cast { margin-top: 16px; border: 0; padding-top: 0; }
  .cast img { width: 26px; height: 26px; }
  .feature-portrait { height: clamp(290px,74vw,390px); border-bottom-right-radius: 33px; }
  .feature-portrait>img { object-position: 50% 23%; }
  .feature-portrait figcaption { padding: 38px 5% 13px; }
  .portrait-tag { font-size: 10px; }
  .portrait-name { margin: 0 0 3px; }
  .portrait-name b { font-size: 27px; }
  .portrait-line { font-size: 14px; }
  .story-intro,.contact-book,.continuity-grid { grid-template-columns: 1fr; gap: 16px; }
  .story-intro>p,.section-description,.devices>.wrap>p { font-size: 14px; }
  .contact-book { gap: 0; }
  .contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border: 0; border-bottom: 1px solid var(--line); padding: 13px; }
  .contacts-label,.contact-foot { grid-column: 1/-1; margin: 0 0 3px; }
  .contacts button { padding: 6px; gap: 7px; }
  .contacts button i { display: none; }
  .chat-paper { padding: 17px; }
  .bubble { font-size: 13px; }
  .phone-break { display: inline; }
  .platforms { grid-template-columns: 1fr; }
  .platforms article { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 0 9px; padding: 18px; }
  .platforms h3 { margin: 0; font-size: 21px; }
  .platforms small { grid-column: 2/4; }
  .foot { gap: 13px; }
  .foot div { width: 100%; margin: 0; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition: none !important; animation: none !important; }
}

.next-message { padding: 12px 15px; border-left: 2px solid #b5868f; background: #fff6; margin: 0 0 12px; }
.next-message small { color: #6d4e53; font-size: 11px; }
.next-message p { font-family: var(--serif); font-size: 16px; line-height: 1.55; margin-top: 3px; }

.next-chapter { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; color: #80505a; font-size: 12px; }
.next-chapter:hover { text-decoration: underline; }