@charset "UTF-8";
:root { font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif; color:#141a2d; background:#f8f8fa; }
* { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid #627dbc; outline-offset:7px; }
header { display:flex; align-items:center; justify-content:space-between; padding:30px 4.4vw; font-size:10px; letter-spacing:1.5px; }
.brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:600; letter-spacing:0; }
.brand>span { font-size:23px; color:#627dbc; font-weight:400; }
.brand small { font-size:10px; font-weight:400; letter-spacing:2px; margin-left:8px; }
main { margin:45px 4.4vw 0; }
.introduction { display:flex; align-items:flex-end; justify-content:space-between; margin:0 0 42px; gap:35px; }
h1 { font-size:clamp(34px,3.5vw,65px); line-height:1.4; font-weight:400; letter-spacing:-.06em; margin:0; }
.introduction p { font-size:13px; line-height:2.3; margin:0 0 7px; }
.introduction p span { font-size:11px; opacity:.6; }
.studies { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.study { --surface:#b5d8e7; --text:#141a2d; --login-bg:#f8f8fa; --login-ink:#172239; --button-bg:#172239; --button-ink:#f8f8fa; }
.palette-pearl { --surface:#f8f8fa; --text:#172239; --login-bg:#e4edf5; }
.palette-night { --surface:#172239; --text:#e4edf5; --login-bg:#172239; --login-ink:#e4edf5; --button-bg:#c7d9ed; --button-ink:#172239; }
.palette-aurora { --surface:linear-gradient(112deg,#d2ccdf 0%,#c7d9ed 48%,#acdaf0 100%); --text:#141a2d; --login-bg:#e9edf3; }
.study-canvas { position:relative; aspect-ratio:9/10; overflow:hidden; background:var(--surface); color:var(--text); container-type:inline-size; outline:1px solid #141a2d12; outline-offset:-1px; }
.canvas-label { position:absolute; left:8%; top:9%; font-size:6px; letter-spacing:.7px; opacity:.65; }
.mini-wordmark { position:absolute; left:3.6%; top:30%; font-size:25.3cqw; letter-spacing:-.08em; line-height:.83; white-space:nowrap; font-weight:500; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.mini-wordmark>span { opacity:.4; }
.mini-story { position:absolute; bottom:15%; left:8%; margin:0; font-size:clamp(15px,1.25vw,27px); line-height:1.5; }
.canvas-arrow { position:absolute; right:8%; bottom:9%; border:1px solid currentColor; font-style:normal; font-size:18px; width:35px; height:35px; border-radius:50%; display:grid; place-items:center; transition:transform .5s; opacity:.65; }
.login-preview { display:flex; align-items:center; gap:12px; height:55px; padding:0 8%; background:var(--login-bg); color:var(--login-ink); border:1px solid #141a2d12; border-top:0; font-size:7px; }
.login-preview>span:first-child { opacity:.6; white-space:nowrap; }
.login-preview-line { flex:1; border-bottom:1px solid currentColor; opacity:.4; height:8px; }
.login-preview-button { padding:6px 8px; background:var(--button-bg); color:var(--button-ink); white-space:nowrap; }
.study-caption { padding:25px 0 13px; }
.study-caption small { font-size:8px; letter-spacing:1.2px; opacity:.6; }
h2 { font-size:27px; font-weight:400; letter-spacing:-.03em; margin:14px 0 12px; }
.study-caption p { font-size:11px; opacity:.65; margin:0; line-height:1.9; }
.watch { display:flex; align-items:center; justify-content:space-between; margin-top:24px; border-top:1px solid #141a2d20; padding-top:16px; font-size:11px; }
.watch i { font-style:normal; font-size:20px; }
.study:hover .canvas-arrow { transform:rotate(45deg); }
.study:hover .mini-wordmark { transform:translateY(-6px); }
.study[aria-current="true"] .watch { border-top-color:#627dbc; color:#476194; }
footer { margin:32px 4.4vw 30px; border-top:1px solid #141a2d26; padding-top:23px; display:flex; justify-content:space-between; font-size:10px; opacity:.6; }
@media(min-width:1800px) { .study-canvas { aspect-ratio:1; } }
@media(max-width:1100px) {
 .studies { grid-template-columns:repeat(2,minmax(0,1fr)); gap:35px 24px; }
 .study-canvas { aspect-ratio:16/10; } .mini-wordmark { top:25%; } .mini-story { font-size:24px; bottom:12%; } .canvas-label { font-size:8px; }
 .introduction p { max-width:275px; } .study-caption { padding-top:20px; }
}
@media(max-width:620px) {
 header { padding:24px 6vw; } .brand small { display:none; } header>span { font-size:8px; letter-spacing:.5px; }
 main { margin:40px 6vw 0; } .introduction { display:block; margin-bottom:30px; } .introduction p { margin-top:22px; max-width:none; font-size:11px; } .introduction p span { font-size:10px; }
 .studies { grid-template-columns:1fr; gap:28px; } .mini-story { font-size:21px; bottom:12%; } .canvas-label { font-size:6px; }
 .study-caption { padding-top:18px; } h2 { font-size:25px; margin-top:11px; } .watch { margin-top:18px; }
 footer { margin:30px 6vw; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none !important; } }