/* v20 — white, a slow blue atmosphere, and one typographic voice. */
:root{--paper:#fff;--surface-blue:#f7faff;--font-latin:var(--font)}
body{background:#fff;isolation:isolate}
body::before{content:"";position:fixed;inset:-18%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 18% 22%,#d9ebff70,transparent 46%),radial-gradient(ellipse at 82% 60%,#dde9ff5e,transparent 44%),radial-gradient(ellipse at 34% 88%,#e0f5ff70,transparent 44%);animation:white-drift 24s ease-in-out infinite alternate;transform-origin:center;will-change:transform}
@keyframes white-drift{0%{transform:translate3d(-3%,-2%,0) scale(1)}100%{transform:translate3d(4%,4%,0) scale(1.08)}}
.site-header{background:#ffffffed}
.hero,.concept,.life,.life-watch,.expressions,.personal,.details{background:transparent}
.encounter,.personality,.global{background:#f4f8fc9c}
.closing,.site-footer{background:#f0f7fdb3}
.brand{font-weight:500;letter-spacing:.13em}
.line-popup-trigger>strong,.benefit-button-copy>strong>b,.line-popup-register strong{font-weight:500;letter-spacing:-.035em}
.line-popup-trigger>strong{font-size:21px;line-height:1.15}
.benefit-button-copy>strong>b{font-size:31px}
.benefit-button-copy>strong>b>span{font-size:20px}
.kickstarter-copy h2{font-weight:500;letter-spacing:-.025em}
.system-result>strong,.expression-number .number,.launch-month,.announcement-date{font-family:var(--font);font-weight:400;font-variant-numeric:lining-nums}
.expression-number .number{letter-spacing:-.06em}
.announcement-date{line-height:1.35}
.launch-month{letter-spacing:-.075em}

/* Two readable signals, joining into one response. */
.concept-diagram{max-width:800px;margin-top:10px}
.system-node{height:280px;align-content:start;padding-top:70px}
.system-label{gap:5px;align-self:start}
.system-label span{font-size:14px;font-weight:400;letter-spacing:.045em}
.system-label strong,.system-language strong{font-family:var(--font);font-size:38px;font-weight:500;letter-spacing:0;line-height:1.4}
.system-cloud,.system-expression .system-cloud{inset:0 1%;filter:blur(12px);opacity:.64;background:radial-gradient(ellipse at 30% 30%,#c4dcff,transparent 55%),radial-gradient(ellipse at 73% 62%,#c3d9ff,transparent 58%),radial-gradient(ellipse at 28% 80%,#c3efff,transparent 60%);animation:signal-cloud 6s ease-in-out infinite;animation-play-state:paused}
.system-expression .system-cloud{animation-delay:.45s}
.system-cloud::after{inset:19%;background:radial-gradient(ellipse,#fffffff5,transparent 76%)}
.system-plus{top:48%;color:#7396b1;font-family:var(--font);font-weight:400;font-size:23px}
.system-wave{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:6px;height:42px;width:98px;color:#4e82ac}
.system-wave i{display:block;width:3px;height:18px;border-radius:3px;background:currentColor;transform-origin:center;animation:signal-wave 1.45s ease-in-out infinite;animation-delay:calc(var(--bar)*-.16s);animation-play-state:paused}
.system-wave i:nth-child(2n){height:30px}.system-wave i:nth-child(4){height:40px}
.system-face{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);width:88px;height:60px;overflow:visible;stroke:#4e82ac;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.face-outline{stroke:#98b8d1;stroke-width:1.2}
.face-eyes{transform-origin:44px 27px;animation:signal-blink 6s ease-in-out infinite;animation-play-state:paused}
.face-smile{opacity:1;animation:signal-smile 6s ease-in-out infinite;animation-play-state:paused}
.face-rest{opacity:0;animation:signal-rest 6s ease-in-out infinite;animation-play-state:paused}
.system-paths{height:80px;margin-top:-12px;z-index:0}
.concept-diagram .system-paths .system-track{stroke:#c4d6e6;stroke-width:1;stroke-dasharray:none;stroke-dashoffset:0;transition:none}
.concept-diagram .system-paths .system-pulse{stroke:#548bbc;stroke-width:2;stroke-dasharray:.13 .87;stroke-dashoffset:.13;opacity:0;transition:none;animation:signal-travel 6s linear infinite;animation-play-state:paused}
.system-result{padding-top:17px;isolation:isolate}
.system-arrival{position:absolute;top:-4px;width:7px;height:7px;border-radius:50%;background:#6598bf;animation:signal-arrival 6s ease-out infinite;animation-play-state:paused}
.system-result>span:not(.system-arrival){font-family:var(--font);font-size:10px;font-weight:400;line-height:1.8;letter-spacing:.16em;color:#678196}
.system-result>strong{font-size:42px;letter-spacing:.08em;line-height:1.4;margin-left:.08em;color:var(--ink)}
.system-result>p{font-size:15px;letter-spacing:.02em;color:var(--muted);line-height:1.8}
.system-answer{position:relative;display:inline-block;margin-top:18px;padding:11px 24px;border:1px solid #c8dcea;border-radius:22px 22px 22px 4px;background:#f2f8ff;color:#345d7d;font:500 15px/1.8 var(--font);animation:signal-answer 6s ease-in-out infinite;animation-play-state:paused}
.diagram-visible :is(.system-cloud,.system-wave i,.face-eyes,.face-smile,.face-rest,.system-arrival,.system-answer),.concept-diagram.diagram-visible .system-paths .system-pulse{animation-play-state:running}
@keyframes signal-cloud{0%,100%{transform:scale(.94);opacity:.54}45%{transform:translateY(-5px) scale(1.035);opacity:.82}}
@keyframes signal-wave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@keyframes signal-blink{0%,21%,25%,100%{transform:scaleY(1)}23%{transform:scaleY(.08)}}
@keyframes signal-smile{0%,28%,100%{opacity:0}40%,88%{opacity:1}}
@keyframes signal-rest{0%,28%,100%{opacity:1}40%,88%{opacity:0}}
@keyframes signal-travel{0%,35%{stroke-dashoffset:.13;opacity:0}38%{opacity:1}68%{stroke-dashoffset:-1;opacity:1}72%,100%{stroke-dashoffset:-1;opacity:0}}
@keyframes signal-arrival{0%,64%,100%{box-shadow:0 0 0 0 #70a9d200}70%{box-shadow:0 0 0 5px #70a9d233}85%{box-shadow:0 0 0 16px #70a9d200}}
@keyframes signal-answer{0%,61%,100%{opacity:.6;transform:translateY(3px)}72%,92%{opacity:1;transform:translateY(0)}}
@media(max-width:1100px) and (min-width:721px){.benefit-button-copy>strong>b{font-size:29px}}
@media(min-width:721px) and (max-width:900px){.launch-grid{grid-template-columns:1fr;gap:30px}.launch-intro>p:last-child{margin-top:18px}.launch-main{padding-top:30px;border-top:1px solid var(--line)}}
@media(max-width:720px){
 .line-popup-trigger>strong{font-size:20px}.benefit-button-copy>strong>b{font-size:29px}.benefit-button-copy>strong>b>span{font-size:19px}
 .concept-diagram{width:100%;margin-top:14px;max-width:480px}
 .system-node{height:204px;padding-top:41px}.system-label{gap:4px}.system-label span{font-size:11px;letter-spacing:0}
 .system-label strong,.system-language strong{font-size:28px;line-height:1.5}
 .system-cloud,.system-expression .system-cloud{inset:0 -5%;filter:blur(9px)}
 .system-wave{bottom:38px;width:75px;height:32px;gap:5px}.system-wave i{width:2px}.system-wave i:nth-child(4){height:32px}
 .system-face{bottom:28px;width:73px;height:50px;stroke-width:1.8}.system-plus{font-size:18px}
 .system-paths{height:61px;margin-top:-10px}.system-result{padding-top:15px}.system-result>strong{font-size:35px}.system-result>p{font-size:14px}.system-answer{font-size:14px;margin-top:15px;padding:9px 22px}
}
@media(max-width:360px){.line-popup-trigger>strong{font-size:18px}.benefit-button-copy>strong>b{font-size:26px}.benefit-button-copy>strong>b>span{font-size:17px}.system-node{height:188px}.system-label strong,.system-language strong{font-size:25px}.system-label span{font-size:10px}}
@media(prefers-reduced-motion:reduce){body::before,.concept-diagram *{animation:none!important}.system-answer{opacity:1;transform:none}.system-pulse{display:none}.face-rest{opacity:0}.face-smile{opacity:1}}
@media print{body::before{display:none}.hero,.concept,.life,.life-watch,.expressions,.personal,.details{background:white}.concept-diagram *{animation:none!important}.system-answer{opacity:1;transform:none}.system-pulse{display:none}}
