:root {
  --ink: #2b2230;
  --paper: #f2f3f6;
  --white: #ffffff;
  --line: #d9d9df;
  --muted: #77747c;
  --coral: #ee725e;
  --coral-soft: #f9dfda;
  --cobalt: #5b73e8;
  --cobalt-soft: #e2e6fa;
  --sage: #86a88c;
  --sage-soft: #e2ece4;
  --yellow: #f1c75b;
  --shadow: 0 30px 90px rgba(43,34,48,.2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", "Noto Sans SC", sans-serif; letter-spacing: 0; }
button, input { color: inherit; font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.site-header { height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; border-bottom: 1px solid var(--line); background: rgba(242,243,246,.94); backdrop-filter: blur(12px); position: relative; z-index: 20; }
.company { display: flex; align-items: center; gap: 10px; }.company-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 4px; background: var(--ink); color: var(--coral); font-weight: 700; }.company b { display: block; font-size: 14px; }.company small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; letter-spacing: 1px; }
.site-header nav { display: flex; gap: 30px; font-size: 12px; color: #55515a; }.site-header nav a:hover { color: var(--coral); }.case-link { display: flex; align-items: center; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--ink); font-size: 10px; font-weight: 700; }.case-link svg { width: 14px; }

.hero { min-height: calc(100vh - 74px); display: grid; grid-template-columns: minmax(260px,.75fr) minmax(320px,.88fr) minmax(390px,470px); align-items: center; gap: 3.5vw; padding: 48px 4vw; overflow: hidden; }
.hero-art { height: min(680px, calc(100vh - 140px)); min-height: 560px; position: relative; overflow: hidden; }.hero-art>img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.05); }.photo-label { position: absolute; left: 0; bottom: 0; width: 72%; padding: 20px; background: var(--coral); color: var(--white); }.photo-label span { display: block; margin-bottom: 8px; font-size: 9px; letter-spacing: 1px; }.photo-label b { font-family: "Noto Serif SC", serif; font-size: clamp(25px,2.5vw,40px); line-height: 1.25; }.photo-date { position: absolute; right: 0; top: 0; padding: 14px; background: var(--ink); color: var(--white); font-size: 9px; line-height: 1.5; letter-spacing: .5px; }
.hero-copy { max-width: 500px; }.overline { margin: 0 0 18px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }.hero-copy h1 { margin: 0; font-family: "Noto Serif SC", serif; font-size: clamp(54px,6vw,94px); line-height: 1.04; letter-spacing: 0; }.hero-position { display: inline-block; margin: 18px 0 14px; padding: 6px 10px; background: var(--cobalt); color: var(--white); font-size: 13px; font-weight: 700; }.hero-desc { max-width: 440px; margin: 0; color: #5d5962; font-size: clamp(15px,1.3vw,18px); line-height: 1.85; }.hero-actions { display: flex; gap: 24px; align-items: center; margin-top: 30px; }.hero-actions button { display: flex; gap: 8px; align-items: center; padding: 14px 18px; border: 0; border-radius: 4px; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 700; }.hero-actions button:hover { background: #45364c; }.hero-actions button svg, .hero-actions a svg { width: 15px; }.hero-actions a { display: flex; gap: 6px; align-items: center; font-size: 11px; font-weight: 700; }.hero-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--line); }.hero-meta div { min-width: 0; }.hero-meta span { display: block; color: var(--muted); font-size: 8px; }.hero-meta strong { display: block; margin-top: 5px; font-size: 10px; line-height: 1.4; }

.prototype-stage { display: flex; flex-direction: column; align-items: center; position: relative; }.prototype-stage::before { content: ""; width: 410px; height: 410px; position: absolute; top: 20%; border-radius: 50%; background: var(--cobalt-soft); }.phone { width: 390px; height: min(790px, calc(100vh - 110px)); min-height: 660px; position: relative; z-index: 2; padding: 10px; border-radius: 42px; background: #211a25; box-shadow: var(--shadow); }.phone-bar { position: absolute; z-index: 10; top: 16px; left: 50%; width: 96px; height: 27px; border-radius: 20px; background: #211a25; transform: translateX(-50%); }.mini-program { height: 100%; position: relative; overflow: hidden; border-radius: 33px; background: #f7f7f9; }.status-bar { height: 38px; display: flex; justify-content: space-between; align-items: center; padding: 0 18px; font-size: 9px; }.status-bar span { display: flex; gap: 4px; }.status-bar svg { width: 12px; height: 12px; }.app-body { height: calc(100% - 38px); position: relative; overflow-y: auto; padding-bottom: 69px; scrollbar-width: none; }.app-body::-webkit-scrollbar { display: none; }.app-page { min-height: 100%; padding: 0 15px 25px; }.app-header, .simple-app-header { display: flex; align-items: center; justify-content: space-between; padding: 7px 0 15px; }.app-brand { display: flex; align-items: center; gap: 8px; }.app-brand>span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--coral); }.app-brand svg { width: 17px; }.app-brand b { display: block; font-family: "Noto Serif SC",serif; font-size: 14px; }.app-brand small { display: block; color: var(--muted); font-size: 8px; }.round-btn { width: 34px; height: 34px; display: grid; place-items: center; position: relative; border: 1px solid #e2e2e7; border-radius: 50%; background: var(--white); }.round-btn svg { width: 15px; }.round-btn>span { width: 6px; height: 6px; position: absolute; top: 3px; right: 3px; border: 1px solid var(--white); border-radius: 50%; background: var(--coral); }
.greeting { padding: 4px 2px 16px; }.greeting p { margin: 0 0 4px; color: var(--muted); font-size: 9px; }.greeting h2 { margin: 0; font-family: "Noto Serif SC",serif; font-size: 24px; line-height: 1.35; }
.daily-question { padding: 15px; border-radius: 8px; background: var(--ink); color: var(--white); }.question-top { display: flex; justify-content: space-between; align-items: center; color: #bbb3c0; font-size: 8px; letter-spacing: .6px; }.question-top button { display: flex; align-items: center; gap: 3px; padding: 0; border: 0; background: transparent; color: var(--coral); font-size: 8px; }.question-top svg { width: 11px; }.daily-question blockquote { min-height: 76px; margin: 18px 0; font-family: "Noto Serif SC",serif; font-size: 17px; line-height: 1.55; font-weight: 700; }.ask-person { display: grid; grid-template-columns: 32px 1fr 20px; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid #4c424f; border-bottom: 1px solid #4c424f; }.person-avatar, .avatar { display: grid; place-items: center; border-radius: 50%; font-weight: 700; }.person-avatar { width: 32px; height: 32px; background: var(--coral); font-size: 10px; }.ask-person b { display: block; font-size: 9px; }.ask-person small { display: block; margin-top: 2px; color: #a9a1ae; font-size: 7px; }.ask-person button { border: 0; background: transparent; color: #aaa2af; }.ask-person svg { width: 13px; }
.record-main { width: 100%; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: 1fr 1fr; gap: 0 9px; align-items: center; margin-top: 13px; padding: 10px; border: 0; border-radius: 6px; background: var(--coral); color: var(--white); text-align: left; }.record-main>span { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--white); color: var(--coral); }.record-main svg { width: 18px; }.record-main b { align-self: end; font-size: 10px; }.record-main small { align-self: start; color: #ffe6e1; font-size: 7px; }
.writing-progress { padding: 18px 2px 15px; }.writing-progress>div:first-child { display: flex; justify-content: space-between; font-size: 9px; }.writing-progress>div:first-child b { color: var(--cobalt); }.progress-track { height: 5px; margin: 9px 0 11px; overflow: hidden; border-radius: 4px; background: #e1e1e6; }.progress-track i { display: block; width: 60%; height: 100%; border-radius: inherit; background: var(--cobalt); }.member-dots { display: flex; align-items: center; }.member-dots>span { width: 23px; height: 23px; display: grid; place-items: center; margin-right: -4px; border: 2px solid #f7f7f9; border-radius: 50%; background: var(--coral-soft); color: #7a3329; font-size: 7px; font-weight: 700; }.member-dots>span:nth-child(2){background:var(--cobalt-soft);color:#344997}.member-dots>span:nth-child(3){background:var(--sage-soft);color:#426247}.member-dots>span:nth-child(4){background:var(--ink);color:var(--white)}.member-dots small { margin-left: 10px; color: var(--muted); font-size: 7px; }
.app-section-title { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px; }.app-section-title h3 { margin: 0; font-size: 13px; }.app-section-title button, .app-section-title>span { display: flex; align-items: center; gap: 3px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 8px; }.app-section-title svg { width: 11px; }
.memory-list { display: grid; gap: 10px; }.memory-card { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 9px; border-radius: 7px; background: var(--white); box-shadow: 0 3px 14px rgba(43,34,48,.05); cursor: pointer; }.memory-image { height: 74px; position: relative; overflow: hidden; border-radius: 5px; }.memory-image img { width: 100%; height: 100%; object-fit: cover; }.memory-image>span { position: absolute; left: 4px; bottom: 4px; display: flex; align-items: center; gap: 3px; padding: 3px 5px; border-radius: 3px; background: rgba(43,34,48,.8); color: var(--white); font-size: 7px; }.memory-image svg { width: 9px; }.memory-card p { margin: 2px 0 4px; color: var(--muted); font-size: 7px; }.memory-card h4 { min-height: 32px; margin: 0 0 5px; font-family: "Noto Serif SC",serif; font-size: 11px; line-height: 1.45; }.memory-card small { color: var(--cobalt); font-size: 7px; }

.simple-app-header small { color: var(--muted); font-size: 8px; }.simple-app-header h2 { margin: 2px 0 0; font-family: "Noto Serif SC",serif; font-size: 23px; }.timeline-filter { display: grid; grid-template-columns: repeat(3,1fr); margin: 2px 0 18px; padding: 3px; border-radius: 6px; background: #e7e7eb; }.timeline-filter button { padding: 7px 4px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 8px; }.timeline-filter button.is-selected { background: var(--white); color: var(--ink); font-weight: 700; box-shadow: 0 1px 4px rgba(43,34,48,.07); }.timeline { position: relative; padding-left: 31px; }.timeline::before { content: ""; position: absolute; left: 10px; top: 16px; bottom: 0; width: 1px; background: #cbcbd2; }.year-marker { position: relative; display: flex; justify-content: space-between; align-items: baseline; padding: 0 0 13px; }.year-marker::before { content:""; width: 9px; height: 9px; position:absolute; left:-25px; top:6px; border:3px solid #f7f7f9; border-radius:50%; background:var(--cobalt); box-shadow:0 0 0 1px var(--cobalt); }.year-marker b { font-size: 19px; }.year-marker span { color: var(--muted); font-size: 7px; }.timeline article { position: relative; margin-bottom: 13px; padding: 12px; border-radius: 7px; background: var(--white); }.timeline-dot { width: 6px; height: 6px; position: absolute; left: -24px; top: 18px; border-radius: 50%; background: var(--coral); }.timeline article small { color: var(--muted); font-size: 7px; }.timeline article h3 { margin: 5px 0 8px; font-family: "Noto Serif SC",serif; font-size: 12px; line-height: 1.45; }.timeline article>img { width: 100%; height: 108px; margin: 8px 0; border-radius: 5px; object-fit: cover; }.timeline article>p { margin: 5px 0 0; color: #65616a; font-size: 8px; line-height: 1.6; }.audio-strip { display: flex; align-items: center; gap: 4px; }.audio-strip button { width: 25px; height: 25px; display: grid; place-items:center; border:0; border-radius:50%; background:var(--coral); color:var(--white); }.audio-strip button svg { width: 11px; fill: currentColor; }.audio-strip>i { width: 3px; border-radius:2px; background:var(--coral); }.audio-strip>i:nth-of-type(1){height:7px}.audio-strip>i:nth-of-type(2){height:14px}.audio-strip>i:nth-of-type(3){height:9px}.audio-strip>i:nth-of-type(4){height:17px}.audio-strip>i:nth-of-type(5){height:11px}.audio-strip>i:nth-of-type(6){height:6px}.audio-strip span { margin-left: auto; color: var(--muted); font-size: 7px; }

.family-cover { height: 180px; position: relative; overflow: hidden; border-radius: 8px; }.family-cover img { width:100%;height:100%;object-fit:cover; }.family-cover::after { content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(43,34,48,.78)); }.family-cover>div { position:absolute;z-index:2;left:13px;bottom:12px;color:var(--white); }.family-cover span { display:block;font-size:8px; }.family-cover b { display:block;margin-top:3px;font-family:"Noto Serif SC",serif;font-size:14px; }.family-stats { display:grid;grid-template-columns:repeat(3,1fr);padding:17px 0;border-bottom:1px solid #dfdfe4; }.family-stats div { display:flex;flex-direction:column;align-items:center;border-right:1px solid #dfdfe4; }.family-stats div:last-child{border:0}.family-stats strong{font-size:17px}.family-stats span{color:var(--muted);font-size:7px}.family-members article { display:grid;grid-template-columns:38px 1fr 15px;gap:9px;align-items:center;padding:11px 0;border-bottom:1px solid #e4e4e8; }.avatar { width:36px;height:36px;font-size:9px; }.avatar.coral{background:var(--coral-soft);color:#923c2e}.avatar.blue{background:var(--cobalt-soft);color:#374b9c}.avatar.green{background:var(--sage-soft);color:#48674c}.avatar.ink{background:var(--ink);color:var(--white)}.family-members b{display:block;font-size:10px}.family-members small{display:block;margin-top:2px;color:var(--muted);font-size:7px}.family-members svg{width:12px;color:#aaa8af}.privacy-note{display:flex;gap:9px;align-items:center;margin-top:15px;padding:11px;border-radius:6px;background:var(--cobalt-soft);color:#344892}.privacy-note>svg{width:18px}.privacy-note b{display:block;font-size:8px}.privacy-note small{display:block;margin-top:2px;font-size:7px;color:#5d6cac}
.book-preview { height: 330px; position: relative; display: grid; place-items: center; overflow:hidden; }.book-shadow{position:absolute;width:190px;height:25px;bottom:20px;border-radius:50%;background:rgba(43,34,48,.18);filter:blur(11px)}.book-cover{width:180px;height:250px;position:relative;z-index:2;padding:13px;border-left:9px solid #211a25;background:var(--ink);color:var(--white);transform:rotate(-4deg);box-shadow:12px 18px 26px rgba(43,34,48,.28)}.book-cover>p{margin:0;color:var(--coral);font-size:7px;line-height:1.4;letter-spacing:1px}.cover-photo{height:125px;margin:13px 0 10px;overflow:hidden}.cover-photo img{width:100%;height:100%;object-fit:cover}.book-cover h3{margin:0;font-family:"Noto Serif SC",serif;font-size:13px}.book-cover>span{display:block;margin-top:7px;color:#aaa2af;font-size:7px}.book-progress>div:first-child{display:flex;justify-content:space-between;font-size:9px}.book-progress>div:nth-child(2){height:5px;margin:8px 0;border-radius:4px;background:#dddde3}.book-progress i{display:block;width:72%;height:100%;border-radius:inherit;background:var(--coral)}.book-progress p{margin:0;color:var(--muted);font-size:7px}.book-actions{display:grid;grid-template-columns:1.2fr 1fr;gap:8px;margin:16px 0}.book-actions button{display:flex;align-items:center;justify-content:center;gap:5px;padding:11px;border:1px solid #dcdce2;border-radius:5px;background:var(--white);font-size:9px;font-weight:700}.book-actions .book-primary{border-color:var(--ink);background:var(--ink);color:var(--white)}.book-actions svg{width:14px}.print-option{padding:13px;border-radius:7px;background:var(--cobalt-soft)}.print-option>div{display:flex;gap:8px;align-items:center}.print-option>div>span{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--white);color:var(--cobalt)}.print-option svg{width:15px}.print-option b{display:block;font-size:9px}.print-option small{display:block;margin-top:2px;color:#6370a8;font-size:7px}.print-option>button{width:100%;display:flex;justify-content:space-between;margin-top:10px;padding:9px;border:0;border-radius:4px;background:var(--cobalt);color:var(--white);font-size:8px;font-weight:700}.print-option>button svg{width:12px}

.app-nav { height:66px;position:absolute;z-index:20;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr 52px 1fr 1fr;align-items:end;padding:6px 10px 8px;border-top:1px solid #e1e1e6;background:rgba(255,255,255,.95);backdrop-filter:blur(10px) }.app-nav button{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;color:#99969d;font-size:7px}.app-nav svg{width:18px;height:18px}.app-nav button.is-active{color:var(--ink);font-weight:700}.app-nav button.is-active svg{color:var(--coral)}.app-nav .central-add{width:45px;height:45px;align-self:center;justify-self:center;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--white);transform:translateY(-9px);box-shadow:0 4px 12px rgba(43,34,48,.2)}.app-nav .central-add svg{width:20px}
.prototype-note{display:flex;align-items:center;gap:7px;margin:17px 0 0;color:var(--muted);font-size:8px;letter-spacing:.7px}.prototype-note i{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(238,114,94,.16);animation:pulse 1.8s infinite}@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(238,114,94,0)}}

.record-sheet{position:absolute;z-index:40;inset:0}.sheet-mask{position:absolute;inset:0;width:100%;border:0;background:rgba(43,34,48,.56)}.record-panel{position:absolute;left:0;right:0;bottom:0;padding:8px 18px 22px;border-radius:18px 18px 0 0;background:var(--white);text-align:center}.sheet-handle{width:34px;height:4px;margin:0 auto 15px;border-radius:4px;background:#d5d4da}.close-record{width:28px;height:28px;position:absolute;right:14px;top:15px;display:grid;place-items:center;border:0;border-radius:50%;background:#ededf1}.close-record svg{width:13px}.record-label{color:var(--coral);font-size:8px;font-weight:700}.record-panel h3{max-width:280px;margin:8px auto 20px;font-family:"Noto Serif SC",serif;font-size:15px;line-height:1.55}.record-time{font-size:30px;font-weight:700}.waveform{height:65px;display:flex;align-items:center;justify-content:center;gap:4px;margin:8px 0}.waveform i{width:3px;height:10px;border-radius:3px;background:var(--coral);animation:wave .8s ease-in-out infinite alternate}.waveform i:nth-child(3n){height:34px;animation-delay:.2s}.waveform i:nth-child(4n){height:50px;animation-delay:.4s}.waveform i:nth-child(5n){height:25px;animation-delay:.1s}@keyframes wave{to{transform:scaleY(.45)}}.record-hint{margin:0 0 18px;color:var(--muted);font-size:8px}.stop-record{display:flex;flex-direction:column;align-items:center;gap:7px;margin:auto;border:0;background:transparent;font-size:9px}.stop-record>span{width:54px;height:54px;display:grid;place-items:center;border:5px solid var(--coral-soft);border-radius:50%;background:var(--coral);color:var(--white)}.stop-record svg{width:17px;fill:currentColor}
.processing-view,.result-view,.story-view{position:absolute;z-index:45;inset:0;min-height:100%;background:var(--ink);color:var(--white)}.processing-view{display:flex;flex-direction:column;align-items:center;padding:95px 25px 30px;text-align:center}.processing-mark{width:62px;height:62px;display:grid;place-items:center;border-radius:50%;background:var(--coral);animation:processing 1.3s ease-in-out infinite}.processing-mark svg{width:25px}@keyframes processing{50%{transform:scale(1.08)}}.processing-view>span{margin-top:22px;color:var(--coral);font-size:8px;letter-spacing:1px}.processing-view h2{margin:8px 0;font-family:"Noto Serif SC",serif;font-size:25px;line-height:1.45}.process-lines{width:180px;display:grid;gap:7px;margin:28px 0}.process-lines i{height:5px;border-radius:4px;background:#4a3e4d;overflow:hidden}.process-lines i::after{content:"";display:block;width:45%;height:100%;background:var(--cobalt);animation:lineMove 1.3s infinite}.process-lines i:nth-child(2)::after{animation-delay:.25s}.process-lines i:nth-child(3)::after{animation-delay:.5s}@keyframes lineMove{from{transform:translateX(-110%)}to{transform:translateX(240%)}}.processing-view p{color:#aaa2af;font-size:8px;line-height:1.6}
.result-view{overflow-y:auto;background:#ececf0;color:var(--ink);padding-bottom:20px}.result-view>header{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:var(--white)}.result-view header button{border:0;background:transparent;font-size:9px}.result-view header button:last-child{color:var(--cobalt);font-weight:700}.result-view header svg{width:15px}.result-view header span{font-size:10px;font-weight:700}.result-paper{margin:13px;padding:20px 17px;border-radius:7px;background:var(--white);box-shadow:0 3px 16px rgba(43,34,48,.07)}.result-kicker{margin:0;color:var(--coral)!important;font-size:8px!important;font-weight:700}.result-paper h2{margin:8px 0 18px;font-family:"Noto Serif SC",serif;font-size:22px}.result-paper>p{margin:0 0 13px;color:#55515a;font-family:"Noto Serif SC",serif;font-size:10px;line-height:1.9}.source-audio{display:grid;grid-template-columns:36px 1fr 100px;gap:8px;align-items:center;margin-top:18px;padding:10px;border-radius:6px;background:var(--coral-soft)}.source-audio>button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--coral);color:var(--white)}.source-audio button svg{width:13px;fill:currentColor}.source-audio b,.source-audio span{display:block;font-size:8px}.source-audio span{margin-top:2px;color:#8a605a;font-size:7px}.mini-wave{display:flex;align-items:center;gap:3px}.mini-wave i{width:2px;height:8px;background:var(--coral)}.mini-wave i:nth-child(even){height:17px}.result-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 13px}.result-tools button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 5px;border:0;border-radius:6px;background:var(--white);font-size:7px}.result-tools svg{width:16px;color:var(--cobalt)}
.story-view{overflow-y:auto;background:#f7f7f9;color:var(--ink)}.story-photo{height:280px;position:relative}.story-photo img{width:100%;height:100%;object-fit:cover}.story-photo::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(43,34,48,.65))}.story-photo button{position:absolute;z-index:2;left:12px;top:12px;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.92)}.story-photo button svg{width:15px}.story-photo>span{position:absolute;z-index:2;right:13px;bottom:12px;color:var(--white);font-size:22px;font-weight:700}.story-view>article{padding:18px 17px 30px}.story-view article>p:first-child{margin:0;color:var(--coral);font-size:8px}.story-view h2{margin:7px 0 15px;font-family:"Noto Serif SC",serif;font-size:21px;line-height:1.45}.story-player{display:grid;grid-template-columns:36px 1fr 35px;gap:8px;align-items:center;padding:10px;border-radius:6px;background:var(--ink);color:var(--white)}.story-player button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--coral);color:var(--white)}.story-player button svg{width:13px;fill:currentColor}.story-wave{display:flex;align-items:center;gap:3px}.story-wave i{width:2px;height:10px;background:#8c818f}.story-wave i:nth-child(3n){height:20px}.story-player span{font-size:7px}.story-view article>p:nth-of-type(2){color:#59555e;font-family:"Noto Serif SC",serif;font-size:10px;line-height:2}.story-view article footer{display:flex;gap:9px;align-items:center;margin-top:20px;padding-top:15px;border-top:1px solid #dddde2}.story-view footer b{display:block;font-size:9px}.story-view footer small{display:block;margin-top:2px;color:var(--muted);font-size:7px}

.case-title-band{display:grid;grid-template-columns:1fr auto 1fr;gap:35px;align-items:center;padding:18px 5vw;background:var(--ink);color:var(--white)}.case-title-band span{font-size:9px;letter-spacing:1px}.case-title-band span:last-child{text-align:right}.case-title-band b{font-family:"Noto Serif SC",serif;font-size:15px;color:var(--coral)}
.insight-section{display:grid;grid-template-columns:160px 1fr;gap:6vw;padding:125px 7vw;background:var(--white)}.section-mark{display:flex;gap:10px;align-items:flex-start}.section-mark>span{color:var(--coral);font-size:58px;font-weight:700;line-height:.8}.section-mark p{margin:0;color:var(--muted);font-size:8px;line-height:1.5;letter-spacing:1px}.insight-content{max-width:1080px}.insight-content>h2,.design-head h2,.visual-copy h2,.business-copy h2{margin:0;font-family:"Noto Serif SC",serif;font-size:clamp(42px,5vw,74px);line-height:1.25;letter-spacing:0}.insight-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:6vw;margin:35px 0 65px}.insight-layout .lead{margin:0;color:#5d5962;font-size:16px;line-height:1.95}.quote-block{padding-left:25px;border-left:3px solid var(--coral)}.quote-block svg{width:20px;color:var(--coral)}.quote-block blockquote{margin:12px 0 15px;font-family:"Noto Serif SC",serif;font-size:16px;line-height:1.8}.quote-block span{color:var(--muted);font-size:8px;letter-spacing:.7px}.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.problem-grid article{padding:25px 30px 5px 0;border-right:1px solid var(--line)}.problem-grid article+article{padding-left:30px}.problem-grid article:last-child{border:0}.problem-grid span{color:var(--cobalt);font-size:9px}.problem-grid h3{margin:22px 0 10px;font-size:17px}.problem-grid p{margin:0;color:var(--muted);font-size:11px;line-height:1.8}
.design-section{padding:120px 7vw;background:var(--paper)}.design-head{max-width:880px;margin-bottom:65px}.design-head>p:last-child{max-width:650px;margin:28px 0 0;color:var(--muted);font-size:14px;line-height:1.9}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.principles article{min-height:360px;padding:25px;border:1px solid var(--line);background:var(--white)}.principle-icon{height:145px;display:grid;place-items:center;margin-bottom:25px}.principle-icon svg{width:48px;height:48px}.principle-icon.voice{background:var(--coral-soft);color:var(--coral)}.principle-icon.thread{background:var(--cobalt-soft);color:var(--cobalt)}.principle-icon.paper{background:var(--sage-soft);color:#517257}.principles article>span{color:var(--muted);font-size:8px;letter-spacing:1px}.principles h3{margin:11px 0;font-family:"Noto Serif SC",serif;font-size:19px}.principles p{margin:0;color:var(--muted);font-size:11px;line-height:1.8}
.visual-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;padding:120px 7vw;background:var(--white)}.visual-copy>p:last-child{margin:28px 0 0;color:var(--muted);font-size:13px;line-height:1.9}.visual-board{border-top:1px solid var(--line)}.palette{height:260px;display:grid;grid-template-columns:repeat(4,1fr);align-items:end}.palette span{height:100%;position:relative;padding:10px;color:var(--white);font-size:8px;letter-spacing:.5px}.palette b{position:absolute;left:10px;bottom:10px;font-size:8px}.palette .plum{background:var(--ink)}.palette .coral{height:82%;background:var(--coral)}.palette .cobalt{height:65%;background:var(--cobalt)}.palette .sage{height:48%;background:var(--sage)}.wave-study{display:grid;grid-template-columns:1.1fr .9fr;gap:25px;align-items:center;padding-top:30px}.wave-sample{height:100px;display:flex;align-items:center;gap:7px}.wave-sample i{width:5px;height:22px;border-radius:4px;background:var(--coral)}.wave-sample i:nth-child(2n){height:58px;background:var(--cobalt)}.wave-sample i:nth-child(3n){height:83px;background:var(--sage)}.wave-study b,.wave-study span{display:block}.wave-study b{font-family:"Noto Serif SC",serif;font-size:15px}.wave-study span{margin-top:8px;color:var(--muted);font-size:10px;line-height:1.7}
.business-section{padding:125px 7vw 95px;background:var(--ink);color:var(--white)}.business-copy{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:end}.business-copy .overline,.business-copy h2{grid-column:1}.business-copy .overline{color:var(--coral)}.business-copy>p:last-child{grid-column:2;grid-row:1/3;margin:0 0 8px;color:#ada5b1;font-size:13px;line-height:1.9}.revenue-model{display:grid;grid-template-columns:repeat(3,1fr);margin-top:70px;border-top:1px solid #4a404d;border-bottom:1px solid #4a404d}.revenue-model article{padding:28px;border-right:1px solid #4a404d}.revenue-model article:first-child{padding-left:0}.revenue-model article:last-child{border:0;padding-right:0}.revenue-model article>span{color:#918895;font-size:8px;letter-spacing:1px}.revenue-model article>svg{display:block;width:27px;height:27px;margin:35px 0 20px;color:var(--coral)}.revenue-model article:nth-child(2)>svg{color:#8da0ff}.revenue-model article:nth-child(3)>svg{color:#a7c2ac}.revenue-model h3{margin:0 0 9px;font-family:"Noto Serif SC",serif;font-size:18px}.revenue-model strong{font-size:31px}.revenue-model strong small{font-size:10px;color:#a9a1ac}.revenue-model p{margin:15px 0 0;color:#aaa2ae;font-size:10px;line-height:1.7}.growth-loop{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:45px}.growth-loop span{font-size:11px;font-weight:700}.growth-loop svg{width:16px;color:var(--coral)}
.seo-section{display:grid;grid-template-columns:1fr 1fr;gap:7vw;padding:90px 7vw;background:var(--cobalt);color:var(--white)}.seo-section .overline{color:#cbd2ff}.seo-section h2{margin:0;font-family:"Noto Serif SC",serif;font-size:clamp(29px,3.5vw,51px);line-height:1.45}.seo-section>p{align-self:end;margin:0;color:#e5e8ff;font-size:12px;line-height:2}
.site-footer{display:grid;grid-template-columns:1fr auto 42px;gap:30px;align-items:center;padding:35px 4vw;background:#19131c;color:var(--white)}.site-footer .company small{color:#7f7582}.site-footer>div:nth-child(2){display:flex;flex-direction:column;align-items:flex-end;gap:4px}.site-footer>div:nth-child(2) span{color:#786e7b;font-size:7px}.site-footer>div:nth-child(2) b{font-size:9px}.site-footer>a{width:40px;height:40px;display:grid;place-items:center;border:1px solid #433a46;border-radius:50%}.site-footer>a svg{width:15px}.toast{position:fixed;z-index:100;left:50%;bottom:28px;max-width:calc(100% - 30px);padding:10px 14px;border-radius:5px;background:var(--ink);color:var(--white);font-size:11px;opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:.25s}.toast.is-visible{opacity:1;transform:translate(-50%,0)}

@media(max-width:1180px){.hero{grid-template-columns:minmax(260px,.8fr) 390px}.hero-art{display:none}.hero-copy{justify-self:end}.phone{height:750px}.visual-section{grid-template-columns:1fr}.visual-copy{max-width:750px}.visual-board{max-width:800px}}
@media(max-width:820px){.site-header{height:64px;padding:0 18px}.site-header nav{display:none}.hero{grid-template-columns:1fr;padding:55px 20px 0}.hero-copy{justify-self:start;max-width:650px}.hero-copy h1{font-size:62px}.prototype-stage{margin-top:35px}.phone{height:770px}.prototype-note{margin-bottom:35px}.insight-section{grid-template-columns:1fr;padding:90px 24px}.section-mark{display:none}.insight-layout{grid-template-columns:1fr}.problem-grid{grid-template-columns:1fr}.problem-grid article,.problem-grid article+article{padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}.design-section,.visual-section,.business-section{padding:90px 24px}.principles{grid-template-columns:1fr}.principles article{min-height:0}.business-copy{grid-template-columns:1fr}.business-copy .overline,.business-copy h2,.business-copy>p:last-child{grid-column:auto;grid-row:auto}.business-copy>p:last-child{margin-top:25px}.revenue-model{grid-template-columns:1fr}.revenue-model article,.revenue-model article:first-child,.revenue-model article:last-child{padding:25px 0;border-right:0;border-bottom:1px solid #4a404d}.revenue-model article:last-child{border:0}.growth-loop{flex-wrap:wrap;justify-content:flex-start}.seo-section{grid-template-columns:1fr;padding:75px 24px}}
@media(max-width:480px){.site-header{background:var(--paper)}.company small{display:none}.case-link{border:0}.case-link svg{display:none}.hero{padding:38px 0 0;overflow:visible}.hero-copy{padding:0 20px}.hero-copy h1{font-size:50px}.hero-position{margin-top:16px}.hero-desc{font-size:14px}.hero-meta{display:none}.prototype-stage{width:100%;margin-top:38px}.prototype-stage::before,.prototype-note{display:none}.phone{width:100%;height:780px;min-height:0;padding:0;border-radius:0;background:#f7f7f9;box-shadow:none}.phone-bar{display:none}.mini-program{border-radius:0}.status-bar{display:none}.app-body{height:100%}.case-title-band{grid-template-columns:1fr;text-align:center}.case-title-band span{display:none}.case-title-band b{font-size:13px}.insight-content>h2,.design-head h2,.visual-copy h2,.business-copy h2{font-size:38px}.insight-layout .lead{font-size:14px}.palette{height:210px}.wave-study{grid-template-columns:1fr}.visual-board{overflow:hidden}.business-section{padding-left:20px;padding-right:20px}.seo-section{padding-left:20px;padding-right:20px}.site-footer{grid-template-columns:1fr 40px}.site-footer>div:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}