/* TURN 02 — the lab's quiet interface, translated into a public brand. */
:root {
  --paper: #fff;
  --ink: #202326;
  --muted: #6c737c;
  --line: #e5e8eb;
  --accent: #4e7096;
  --blue: #657585;
  --serif: Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-family: var(--serif);
  background: var(--paper);
  color: var(--ink);
}
html { scroll-padding-top: 96px; }
body { font-size: 15px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 550; }
h2 { font-size: clamp(30px, 3.1vw, 43px); line-height: 1.25; letter-spacing: -.045em; text-wrap: balance; }
.wrap { max-width: 1320px; padding-inline: 56px; }
.section { padding-block: 104px; }
.eyebrow { font-size: 11px; font-weight: 450; letter-spacing: .075em; color: var(--muted); }
.status-dot { width: 5px; height: 5px; background: #6b7f76; }
.site-header { height: 92px; border-bottom: 1px solid var(--line); }
.brand { gap: 10px; font-size: 27px; font-weight: 650; letter-spacing: -.065em; }
.brand-mark { width: 42px; height: 42px; flex-shrink: 0; }
.brand-cn { font-size: 12px; color: #6c737c; border: 0; margin-left: 14px; padding: 0; letter-spacing: .16em; }
.site-header nav { gap: 28px; font-size: 12px; color: #747a82; }
.site-header nav a { transition: color .2s; }
.site-header nav a:hover { color: var(--ink); }
.language { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; min-height: 40px; font-size: 11px; }
.language:hover { background: #f7f8f9; }
.hero { grid-template-columns: 1.14fr 1fr; gap: 65px; padding-block: 78px 85px; min-height: 665px; }
.hero .eyebrow { margin-bottom: 27px; }
.hero h1 { font-size: clamp(48px, 5vw, 68px); font-weight: 550; line-height: 1.1; letter-spacing: -.065em; margin-bottom: 27px; }
.hero h1 em { color: #7a858e; font-style: normal; font-weight: inherit; }
.hero-lede { max-width: 425px; font-size: 15px; line-height: 1.9; }
.hero-actions { margin-top: 33px; gap: 20px; }
.button { background: #24282c; border-color: #24282c; border-radius: 9px; padding: 13px 19px; font-size: 12px; min-height: 48px; gap: 34px; }
.button:hover { background: #40474e; }
.release-note { font-size: 11px; color: #858b92; }
.hero-art { align-self: center; position: relative; padding: 18px 0; }
.art-top, .art-bottom { color: #8a9198; font-size: 10px; border-color: #eef0f2; padding-block: 14px; }
.art-top { font-family: var(--serif); }
.loop-art { min-height: 0; width: 100%; aspect-ratio: 560 / 500; overflow: visible; }
.route-grid { fill: none; stroke: #e7eaed; stroke-width: .7; stroke-dasharray: 2 6; }
.route-echo { fill: none; stroke: #b8c7d1; stroke-width: 1.2; opacity: .65; }
.route-echo use:first-child { stroke: #d8dfe5; }
.route-main { fill: none; stroke: #536778; stroke-width: 2.3; stroke-linejoin: round; stroke-linecap: round; }
.new-turn { fill: none; stroke: #202326; stroke-width: 3.2; stroke-linecap: round; }
.route-stop { fill: #fff; stroke: #6a7e8e; stroke-width: 1.7; }
.route-destination { fill: #202326; }
.route-labels text { font-family: var(--serif); font-size: 10px; fill: #7e8993; letter-spacing: .06em; }
.idea { grid-template-columns: 1fr 2.25fr; gap: 56px; }
.idea h2 { margin-bottom: 25px; }
.wide-copy { font-size: 15px; max-width: 670px; line-height: 2; }
.product-section { background: #f7f8fa; border-block: 1px solid #eef0f2; }
.section-heading { gap: 64px; margin-bottom: 42px; }
.section-heading > p { font-size: 13px; line-height: 1.9; }
.title-phrase { display: inline-block; }
.product-preview { background: #fff; border: 1px solid #e1e5e9; border-radius: 16px; box-shadow: 0 8px 34px #1e293b04; overflow: hidden; }
.preview-top { min-height: 64px; padding-inline: 26px; font-size: 12px; }
.preview-top > span:first-child { display: inline-flex; align-items: center; }
.tiny-mark { width: 23px; height: 23px; display: inline-flex; margin-right: 9px; }
.tiny-mark img { width: 100%; height: 100%; }
.demo-badge { font-size: 8px; border: 0; border-radius: 5px; background: #f4f5f6; padding: 5px 8px; letter-spacing: .08em; }
.chart-panel { padding: 23px; }
.chart-toolbar { font-size: 11px; }
.segmented { border-radius: 8px; background: #f3f4f5; }
.segmented button { border-radius: 6px; min-height: 38px; padding: 6px 13px; }
.chart-stage { height: 430px; }
.chart-base { background: #fff; border-color: #aebcc8; box-shadow: 0 12px 28px #1e293b06; }
.palace { border-color: #e1e6eb; color: #586978; }
.palace span { font-family: var(--serif); font-size: 12px; }
.palace small { color: #81909d; }
.chart-center { background: #f9fafb; border-color: #e1e6eb; }
.chart-center > span:first-child { font-weight: 600; font-size: 23px; }
.center-orbit { display: block; width: 33px; height: 33px; }
.center-orbit img { width: 100%; height: 100%; opacity: .6; }
.time-plane { background-color: color-mix(in srgb, var(--layer) 2%, transparent); }
.time-plane i { background: #fff; border-width: .75px; }
.stage-note { font-size: 9px; bottom: 12px; }
.layer-controls { gap: 6px; padding-top: 13px; }
.layer-controls button, .base-key { border-radius: 6px; min-height: 40px; font-size: 10px; padding: 6px 10px; }
.layer-controls button[aria-pressed=true] { border-color: transparent; color: var(--layer); background: color-mix(in srgb, var(--layer) 8%, white); }
.base-key b { background: #bc5e4d; }
.journal-panel { background: #fcfcfd; padding: 34px; }
.journal-panel .eyebrow { font-size: 9px; }
.journal-panel h3 { font-size: 28px; font-weight: 500; letter-spacing: -.04em; line-height: 1.25; }
.journal-entry { border-left: 1px solid #d5dce3; padding-left: 20px; }
.entry-label { font-size: 9px; color: #7c838b; }
.journal-entry > p:nth-child(2) { font-family: var(--serif); font-size: 19px; line-height: 1.6; color: #454c54; }
.entry-tag { border-radius: 5px; color: #5d7c76; background: #edf3f1; font-size: 10px; }
.reflection { color: #7b838d; font-size: 12px; line-height: 1.8; }
.reflection > span { color: #657585; }
.preview-disclaimer { color: #858c94; font-size: 10px; line-height: 1.8; }
.feature-list { margin-top: 45px; gap: 32px; }
.feature-list article { border-color: #e2e6ea; padding-top: 25px; gap: 16px; }
.feature-no { font-family: var(--serif); color: #8c959e; }
.feature-list h3 { font-size: 17px; font-weight: 550; }
.feature-list p { font-size: 13px; line-height: 1.9; }
.development-note { border-color: #e2e6ea; font-size: 11px; }
.company-section { gap: 90px; }
.company-copy { font-size: 14px; line-height: 2; }
.company-details > div { padding-block: 19px; }
.company-details dd { color: #454d55; }
.contact-band { background: #f7f8fa; color: var(--ink); border-block: 1px solid var(--line); padding-block: 64px; }
.contact-band h2 { font-size: 34px; font-weight: 500; }
.contact-band .eyebrow { color: #89919a; }
.contact-band p:last-child { color: #747d86; font-size: 13px; }
.button.light { color: var(--ink); border-color: #d9dfe4; background: #fff; }
.button.light:hover { background: #eef1f4; }
.footer-wordmark { display: inline-flex; align-items: center; font-size: 30px; font-weight: 600; }
.footer-wordmark > img { width: 36px; height: 36px; margin-right: 8px; }
.footer-wordmark span { font-weight: 400; font-size: 11px; margin-left: 14px; color: var(--muted); }
.footer-top > div { font-size: 11px; }
.footer-bottom { font-size: 10px; line-height: 1.8; }
.legal-content h1 { font-family: var(--serif); font-weight: 550; }
.legal-content h2 { font-family: var(--serif); font-weight: 550; }
html[lang=zh-CN] .hero h1 { font-family: var(--serif); font-weight: 550; font-size: clamp(46px, 5.2vw, 68px); line-height: 1.3; letter-spacing: -.055em; }
html[lang=zh-CN] h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.025em; line-height: 1.5; }
html[lang=zh-CN] .hero-lede { font-size: 14px; line-height: 2.1; }
html[lang=zh-CN] .journal-panel h3 { font-size: 26px; font-weight: 500; }
html[lang=zh-CN] .journal-entry > p:nth-child(2) { font-size: 17px; line-height: 1.9; }
html[lang=zh-CN] .eyebrow { letter-spacing: .06em; }
@media (min-width: 1500px) { .hero { min-height: 700px; } }
@media (max-width: 1100px) {
  .wrap { padding-inline: 36px; }
  .hero { gap: 35px; padding-block: 65px; min-height: 590px; }
  .hero h1 { font-size: 53px; }
  .hero-lede { font-size: 14px; }
  .journal-panel { padding: 26px; }
  .chart-panel { padding: 20px 15px; }
  .chart-stage { height: 390px; }
  .company-section { gap: 55px; }
}
@media (max-width: 800px) {
  .wrap { padding-inline: 24px; }
  .site-header { height: 78px; }
  .site-header nav { gap: 18px; }
  .hero { grid-template-columns: 1fr; gap: 28px; padding-block: 50px 58px; }
  .hero-copy { max-width: 600px; }
  .hero h1 { font-size: clamp(45px, 7.5vw, 62px); }
  .hero-lede { max-width: 480px; }
  .hero-art { width: 100%; max-width: 450px; padding: 0; }
  .hero-art .loop-art { max-height: 365px; }
  .section { padding-block: 65px; }
  .idea { grid-template-columns: 1fr; gap: 0; }
  .idea h2 { font-size: 32px; }
  .wide-copy { font-size: 14px; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
  .product-preview { border-radius: 12px; }
  .chart-panel { padding: 18px; }
  .chart-stage { height: 400px; }
  .journal-panel { padding: 30px; }
  .journal-panel h3 { max-width: 100%; }
  .feature-list { gap: 24px; }
  .company-section { grid-template-columns: 1fr; gap: 34px; }
  .contact-band h2 { font-size: 30px; }
  .footer-top > div { font-size: 10px; }
  html[lang=zh-CN] .hero h1 { font-size: clamp(44px, 7.7vw, 59px); }
  html[lang=zh-CN] h2, html[lang=zh-CN] .idea h2 { font-size: 28px; }
  .legal-content { padding-top: 45px; }
  .legal-content h1 { font-size: 38px; }
}
@media (max-width: 480px) {
  .wrap { padding-inline: 22px; }
  .site-header nav { gap: 12px; }
  .site-header nav a { font-size: 11px; }
  .brand { font-size: 24px; gap: 6px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-cn { font-size: 10px; margin-left: 9px; }
  .language { padding: 7px 10px; font-size: 10px; }
  .hero { padding-top: 44px; gap: 33px; }
  .hero h1 { font-size: 46px; margin-bottom: 23px; }
  .hero .eyebrow { font-size: 10px; margin-bottom: 22px; }
  .hero-actions { margin-top: 27px; gap: 17px; }
  .hero-art .loop-art { max-height: 320px; }
  .art-top, .art-bottom { font-size: 9px; }
  .preview-top { padding: 13px 15px; font-size: 10px; gap: 10px; }
  .preview-separator { margin-inline: 8px; }
  .demo-badge { font-size: 7px; padding: 5px 6px; }
  .chart-panel { padding: 16px 10px; }
  .chart-toolbar > span { font-size: 10px; }
  .chart-stage { height: 365px; }
  .chart-stack { width: 250px; height: 250px; transform: translate(0, 33px) scale(.76) rotateX(54deg) rotateZ(-30deg); }
  .layer-controls { gap: 3px; }
  .layer-controls button, .base-key { font-size: 9px; padding: 6px; }
  .journal-panel { padding: 25px 23px; }
  .company-details > div { grid-template-columns: 1fr 1.8fr; }
  .company-details dt { font-size: 10px; }
  .company-details dd { font-size: 12px; }
  .footer-top { gap: 18px; }
  .footer-wordmark { font-size: 25px; }
  .footer-wordmark > img { width: 30px; height: 30px; margin-right: 4px; }
  .footer-wordmark span { font-size: 10px; margin-left: 8px; }
  .footer-top > div { font-size: 9px; }
}
@media (max-width: 359px) {
  .wrap { padding-inline: 18px; }
  .site-header nav a { display: none; }
  .site-header nav a[data-home] { display: inline; }
  .hero h1 { font-size: 40px; }
  html[lang=zh-CN] .hero h1 { font-size: 42px; }
  .release-note { font-size: 10px; }
  .chart-toolbar > span { max-width: 100px; }
  .layer-controls { gap: 0; }
  .layer-controls button, .base-key { padding-inline: 5px; font-size: 8px; }
  .chart-stage { height: 345px; }
  .chart-stack { transform: translate(0, 30px) scale(.67) rotateX(54deg) rotateZ(-30deg); }
  .chart-stage[data-view=flat] .chart-stack { transform: scale(.94); }
  .footer-top { flex-direction: column; }
  .footer-top > div { flex-direction: row; gap: 20px; }
}