/* TUOLO / 自转 — approved cube + internal planet wordmark, 2026-10-16. */
:root { --serif: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'PingFang TC', 'Microsoft YaHei', sans-serif; }
.brand, .footer-wordmark { gap: 8px; }
.brand .brand-lockup, .footer-wordmark .brand-lockup { width: 160px; height: auto; margin: 0; }
.brand .brand-cn, .footer-wordmark .brand-cn { margin: 0; padding: 0; font-size: 13px; font-weight: 500; color: #5e6871; letter-spacing: .16em; white-space: nowrap; }
.language { font: inherit; font-size: 12px; color: #434b53; background: #fff; padding: 9px 10px; min-height: 42px; cursor: pointer; max-width: 108px; }
.language:focus-visible { outline: 2px solid #6d899d; outline-offset: 3px; }
.hero { grid-template-columns: 1.16fr 1fr; gap: 60px; padding-block: 86px 92px; }
.hero h1 { font-weight: 650; font-size: clamp(42px, 4.2vw, 58px); line-height: 1.16; letter-spacing: -.055em; }
.hero h1 em { color: #7b8c96; }
html:lang(en) .hero h1 > span, html:lang(en) .hero h1 > em { display: block; text-wrap: balance; }
html:lang(en) .hero h1 > br { display: none; }
html:lang(zh) .hero h1 { font-family: var(--serif); font-size: clamp(34px, 3.6vw, 49px); font-weight: 600; line-height: 1.5; letter-spacing: -.045em; }
.hero-lede { max-width: 510px; font-size: 15px; white-space: pre-line; }
.hero-signoff { max-width: 510px; margin: 20px 0 0; color: #3d4f58; font-size: 15px; line-height: 1.9; }
.hero-signoff strong { font-weight: 550; }
.idea h2 { white-space: pre-line; text-wrap: balance; }
.hero-art { border: 1px solid #e7ebee; border-radius: 22px; background: #f7f9fa; padding: 23px 25px; min-height: 390px; justify-content: space-between; }
.art-top, .art-bottom { border: 0; padding-block: 4px; font-size: 10px; }
.brand-art { position: relative; min-height: 270px; display: grid; place-items: center; }
.brand-art::before { content: ''; position: absolute; inset: 15% 6%; background-image: radial-gradient(#c8d1d7 .7px, transparent .7px); background-size: 20px 20px; mask-image: radial-gradient(ellipse, #000 15%, transparent 70%); }
.brand-art img { position: relative; width: 100%; height: auto; }
.art-bottom { color: #77838c; }
.idea h2 { font-weight: 600; }
.brand-story { border-left: 2px solid #bccbc9; padding-left: 23px; }
.brand-story { white-space: pre-line; }
.brand-story strong { color: #3d4f58; font-weight: 550; }
html:lang(zh) h2 { font-family: var(--serif); letter-spacing: -.025em; line-height: 1.5; }
html:lang(zh) .hero-lede { line-height: 2; }
html:lang(zh) .journal-panel h3 { font-size: 26px; }
html:lang(zh) .journal-entry > p:nth-child(2) { font-size: 17px; line-height: 1.9; }
.legal-content h1 { font-weight: 600; }
.brand-transition { padding: 15px 18px; background: #f7f9fa; border-radius: 8px; }
@media (max-width: 1100px) { .hero { gap: 30px; } .hero-art { padding: 20px; min-height: 340px; } .brand-art { min-height: 220px; } .site-header nav { gap: 18px; } }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 55px 65px; } .hero-copy { max-width: 620px; } .hero-art { max-width: 620px; min-height: 310px; } .hero h1 { font-size: clamp(40px, 6.5vw, 56px); } html:lang(zh) .hero h1 { font-size: clamp(32px, 5.2vw, 44px); } .brand-art { min-height: 230px; } .brand-art img { max-width: 460px; } .site-header nav a[href='#company'] { display: none; } .brand .brand-lockup { width: 141px; } .site-header nav { gap: 14px; } }
@media (max-width: 540px) { .site-header { gap: 12px; } .site-header nav a[href='#product'] { display: none; } .site-header nav { gap: 10px; } .brand .brand-lockup { width: 118px; } .brand .brand-cn { font-size: 11px; letter-spacing: .08em; } .brand { gap: 3px; } .language { font-size: 11px; max-width: 93px; padding-inline: 6px; } .hero { padding-top: 44px; } .hero h1 { font-size: 41px; } html:lang(zh) .hero h1 { font-size: clamp(28px, 6.7vw, 36px); } .hero-art { min-height: 265px; padding: 18px; } .brand-art { min-height: 190px; } .art-top { font-size: 9px; } .art-top > span:last-child { text-align: right; } .hero-lede, .hero-signoff { font-size: 14px; } .footer-wordmark .brand-lockup { width: 135px; } .footer-wordmark .brand-cn { font-size: 11px; } }
@media (max-width: 359px) { .brand .brand-cn { display: none; } .brand .brand-lockup { width: 110px; } .hero h1 { font-size: 36px; } html:lang(zh) .hero h1 { font-size: 27px; } .hero-art { padding: 14px; } .art-top, .art-bottom { font-size: 8px; } }