:root {
  --bg: #071315;
  --panel: #0d2023;
  --panel-2: #11282b;
  --ink: #edf5f3;
  --muted: #8ea4a2;
  --accent: #8ecbc5;
  --accent-deep: #5e9a95;
  --paper: #e6ece9;
  --paper-ink: #182729;
  --paper-muted: #617370;
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; background: var(--bg); }
body { overflow-x: hidden; color: var(--ink); }
a { color: inherit; }
button, input { font: inherit; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -50px; padding: 10px 14px; color: #071315; background: var(--accent); text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }
.site-header { position: absolute; z-index: 50; inset: 0 0 auto; height: 84px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 36px; padding: 0 clamp(24px, 4.2vw, 72px); border-bottom: 1px solid rgba(190,224,220,.13); background: rgba(7,19,21,.64); backdrop-filter: blur(18px); }
.site-header.scrolled { position: fixed; height: 70px; background: rgba(7,19,21,.9); box-shadow: 0 10px 35px rgba(0,0,0,.18); }
.brand { width: max-content; display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(142,203,197,.58); color: #d8ece9; background: rgba(142,203,197,.08); transform: rotate(45deg); box-shadow: inset 0 0 18px rgba(142,203,197,.09), 0 0 24px rgba(142,203,197,.06); }
.brand-mark i { font: normal 17px/1 Georgia, serif; transform: rotate(-45deg); }
.brand-copy { display: grid; gap: 3px; }
.brand-copy b { font: 500 17px/1.1 Georgia, "Songti SC", serif; letter-spacing: .05em; }
.brand-copy small { color: #66817f; font: 600 7px/1 monospace; letter-spacing: .21em; }
.site-nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 42px); }
.site-nav a { color: #91a8a5; font-size: 12px; text-decoration: none; transition: color .2s; }
.site-nav a:hover { color: #fff; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.header-actions a { min-height: 40px; display: inline-flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 11px; text-decoration: none; }
.github-link { color: #b4c5c2; }
.header-download { border: 1px solid rgba(142,203,197,.34); background: rgba(142,203,197,.07); }
.header-actions span { color: var(--accent); }
.menu-button { display: none; }

.hero { position: relative; min-height: 900px; height: max(760px, 100vh); display: grid; grid-template-columns: minmax(340px,.84fr) minmax(580px,1.16fr); align-items: center; gap: clamp(38px,5vw,88px); padding: 130px clamp(24px,5.5vw,96px) 82px; background: radial-gradient(circle at 76% 46%, rgba(73,132,127,.23), transparent 31%), radial-gradient(circle at 12% 65%, rgba(56,104,101,.09), transparent 28%), linear-gradient(155deg,#071315 0%,#091719 52%,#071214 100%); }
.hero-grid { position: absolute; inset: 0; opacity: .22; pointer-events: none; background-image: linear-gradient(rgba(138,185,181,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(138,185,181,.08) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to right,#000,transparent 62%); }
.hero-glow { position: absolute; width: 720px; height: 720px; right: -230px; top: 110px; border: 1px solid rgba(142,203,197,.09); border-radius: 50%; pointer-events: none; }
.hero-glow::after { content: ""; position: absolute; inset: 17%; border: 1px solid rgba(142,203,197,.08); border-radius: 50%; }
.hero-copy { position: relative; z-index: 2; max-width: 650px; padding-left: clamp(0px,2.8vw,38px); }
.eyebrow { width: max-content; display: flex; align-items: center; gap: 9px; margin: 0 0 32px; color: #8fa7a4; font: 600 9px/1 monospace; letter-spacing: .22em; }
.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(142,203,197,.08),0 0 14px rgba(142,203,197,.45); }
.hero h1 { margin: 0; color: #e8f0ee; font: 400 clamp(58px,6vw,100px)/1.04 Georgia,"Noto Serif SC","Songti SC",serif; letter-spacing: -.055em; }
.hero h1 span { position: relative; color: var(--accent); }
.hero h1 span::after { content: ""; position: absolute; left: .06em; right: 0; bottom: -.08em; height: 1px; background: linear-gradient(90deg,var(--accent),transparent); }
.hero-lead { max-width: 570px; margin: 30px 0 0; color: #9aabaa; font-size: clamp(15px,1.25vw,18px); line-height: 1.95; }
.hero-actions { display: flex; align-items: stretch; gap: 14px; margin-top: 38px; }
.button { height: 66px; display: inline-flex; align-items: center; gap: 14px; padding: 0 18px; text-decoration: none; transition: transform .2s, background .2s; }
.button-primary { min-width: 244px; color: #081416; background: var(--accent); box-shadow: 0 14px 38px rgba(67,128,123,.2); }
.button-primary:hover { transform: translateY(-2px); background: #a4d7d2; }
.os-glyph { font-size: 27px; }
.button-primary > span:nth-child(2) { display: grid; gap: 4px; }
.button-primary small { font: 700 8px/1 monospace; letter-spacing: .18em; opacity: .62; }
.button-primary b { font-size: 14px; }
.button-primary > i { margin-left: auto; font: normal 22px/1 serif; }
.button-ghost { border: 1px solid rgba(184,215,211,.2); color: #becdcb; background: rgba(14,35,38,.38); font-size: 12px; }
.button-ghost span, .button-ghost i { color: var(--accent); font-style: normal; }
.button-ghost i { margin-left: 8px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 22px; margin: 25px 0 0; padding: 0; list-style: none; }
.hero-points li { color: #6f8986; font-size: 10px; }
.hero-points i { margin-right: 5px; color: var(--accent); font-style: normal; }

.app-visual { position: relative; z-index: 2; min-width: 0; perspective: 1500px; }
.visual-halo { position: absolute; inset: 8% -10% -10% 0; background: radial-gradient(ellipse,rgba(86,158,151,.22),transparent 66%); filter: blur(28px); }
.app-window { position: relative; width: min(860px,55vw); aspect-ratio: 1.42; margin-left: auto; overflow: hidden; border: 1px solid rgba(184,217,213,.25); border-radius: 7px; color: #263a3c; background: #d9e4e1; box-shadow: -12px 35px 95px rgba(0,0,0,.54),inset 0 1px 0 rgba(255,255,255,.18); transform: rotateY(-5deg) rotateX(1.5deg); transform-origin: center right; }
.app-topbar { height: 10.5%; display: flex; align-items: center; gap: 16px; padding: 0 2.2%; border-bottom: 1px solid rgba(30,58,59,.14); background: rgba(239,244,242,.9); }
.mini-brand { display: flex; align-items: center; gap: 8px; }
.mini-brand span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #638d89; color: #456b68; font: 10px/1 serif; transform: rotate(45deg); }
.mini-brand b { font: 700 7px/1 monospace; letter-spacing: .1em; }
.app-search { height: 54%; flex: 1; max-width: 330px; margin-left: 5%; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid rgba(39,70,71,.13); color: #617b78; background: #fff; font-size: 9px; }
.app-search span { flex: 1; }
.app-search kbd { padding: 2px 4px; border: 1px solid rgba(40,66,68,.13); font: 7px/1 monospace; }
.app-user { width: 25px; height: 25px; margin-left: auto; display: grid; place-items: center; border-radius: 50%; color: #d8e8e5; background: #365458; font: 7px/1 monospace; }
.app-body { height: 89.5%; display: grid; grid-template-columns: 7% 23% 70%; }
.app-rail { display: flex; align-items: center; flex-direction: column; gap: 8%; padding-top: 28%; color: #819491; background: #314a4d; font-size: 10px; }
.app-rail span { width: 64%; aspect-ratio: 1; display: grid; place-items: center; }
.app-rail span.active { color: #c3dfdb; background: rgba(142,203,197,.16); box-shadow: inset 2px 0 0 var(--accent); }
.character-list { position: relative; padding: 5% 6%; border-right: 1px solid rgba(38,63,65,.12); background: #e3ebe8; }
.character-list > small { display: flex; justify-content: space-between; margin: 0 4px 9%; color: #718582; font: 700 7px/1 monospace; letter-spacing: .12em; }
.character { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; padding: 7px; }
.character.active { background: linear-gradient(90deg,rgba(112,170,165,.23),rgba(255,255,255,.48)); box-shadow: inset 2px 0 0 #699b96; }
.character > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #dce8e5; background: linear-gradient(145deg,#536d70,#263e42); font: 10px/1 serif; }
.character > div { display: grid; gap: 3px; }
.character b { font: 600 8px/1 sans-serif; }
.character small { color: #7b8c89; font: 6px/1 monospace; }
.storage { position: absolute; left: 7%; right: 7%; bottom: 5%; color: #718582; font-size: 6px; }
.storage > span { display: inline-flex; align-items: center; gap: 4px; }
.storage > span i { width: 4px; height: 4px; border-radius: 50%; background: #6c9f9a; }
.storage > b { float: right; font: 6px/1 monospace; }
.storage > em { height: 2px; display: block; margin-top: 7px; background: linear-gradient(90deg,#6faaa4 68%,#c6d3d0 68%); }
.app-content { padding: 4% 5%; background: linear-gradient(150deg,#d3dfdc,#eef3f1); }
.profile { display: flex; align-items: center; gap: 5%; }
.portrait { position: relative; width: 27%; aspect-ratio: 1.35; overflow: hidden; display: grid; place-items: center; color: rgba(229,239,236,.7); background: radial-gradient(circle at 52% 32%,#8ba6a3 0 8%,transparent 9%),radial-gradient(ellipse at 50% 92%,#405f61 0 28%,transparent 29%),linear-gradient(145deg,#9ab2ae,#324d50); font: 700 19px/1 monospace; }
.portrait::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(225,241,237,.28); }
.portrait i { position: absolute; left: 8px; bottom: 7px; padding: 3px 5px; color: #d5e8e5; background: rgba(22,47,50,.72); font: normal 5px/1 monospace; }
.profile-copy > small { color: #66817e; font: 700 6px/1 monospace; letter-spacing: .15em; }
.profile h2 { margin: 7px 0 4px; color: #18292b; font: 500 clamp(18px,2vw,30px)/1 serif; }
.profile p { margin: 0 0 13px; color: #647a77; font-size: 7px; }
.profile-copy div { display: flex; gap: 5px; }
.profile-copy div span { padding: 4px 7px; border: 1px solid rgba(53,88,87,.14); color: #57726f; background: rgba(255,255,255,.48); font-size: 6px; }
.library-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 5% 0 2%; padding-bottom: 2%; border-bottom: 1px solid rgba(43,69,70,.12); }
.library-heading > div { display: grid; gap: 4px; }
.library-heading small { color: #77908c; font: 600 5px/1 monospace; letter-spacing: .14em; }
.library-heading b { font: 600 10px/1 sans-serif; }
.library-heading b i { color: #748985; font: normal 6px/1 monospace; }
.library-heading > span { color: #6d8480; font-size: 6px; }
.asset-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 3%; }
.asset-card { min-width: 0; padding: 4%; background: rgba(250,252,251,.82); box-shadow: 0 5px 13px rgba(45,69,68,.09); }
.asset-card > div { position: relative; aspect-ratio: 1.05; overflow: hidden; margin-bottom: 7%; background: #7f9996; }
.asset-card > div::before { content: ""; position: absolute; inset: 0; opacity: .38; background-image: linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size: 20% 20%; }
.asset-card.amber > div { background: linear-gradient(145deg,#b3aa91,#596765); }
.asset-card.night > div { background: linear-gradient(145deg,#4d6b6d,#1b3135); }
.asset-card > div i { position: absolute; z-index: 1; left: 36%; top: 18%; width: 30%; height: 65%; border-radius: 50% 50% 10% 10%; background: rgba(26,46,49,.55); box-shadow: 0 -14px 0 -7px rgba(26,46,49,.55); }
.asset-card b { display: block; color: #304744; font-size: 7px; }
.asset-card small { color: #81918e; font: 5px/1 monospace; }
.floating-note { position: absolute; z-index: 4; display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid rgba(166,211,206,.2); color: #dce9e7; background: rgba(9,27,29,.84); box-shadow: 0 18px 45px rgba(0,0,0,.34); backdrop-filter: blur(16px); }
.floating-note > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(142,203,197,.3); color: var(--accent); font: 600 12px/1 monospace; }
.floating-note > div { display: grid; gap: 4px; }
.floating-note small { color: #688986; font: 600 6px/1 monospace; letter-spacing: .14em; }
.floating-note b { font-size: 9px; font-weight: 500; }
.note-local { left: -4%; bottom: 4%; }
.note-index { right: -2%; top: 12%; }
.real-product .product-screenshot { position: relative; width: 106%; margin: 0 auto; overflow: hidden; border: 1px solid rgba(184,217,213,.25); border-radius: 6px; background: #0a1b1d; box-shadow: -12px 35px 95px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06); transform: rotateY(-4deg) rotateX(1deg) rotateZ(.35deg); transform-origin: center right; transition: transform .35s ease, box-shadow .35s ease; }
.real-product .product-screenshot figcaption { min-height: 42px; display: flex; align-items: center; gap: 18px; padding: 0 15px; border-bottom: 1px solid rgba(157,205,200,.14); color: #75918e; background: #0b2022; }
.real-product .product-screenshot figcaption > span { display: inline-flex; align-items: center; gap: 8px; font: 700 6px/1 monospace; letter-spacing: .16em; }
.real-product .product-screenshot figcaption > span i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(142,203,197,.45); }
.real-product .product-screenshot figcaption > b { margin-left: auto; color: #bbceca; font-size: 9px; font-weight: 500; }
@media (min-width:1121px) {
  .real-product .product-screenshot:hover { transform: rotateY(-2deg) rotateX(.5deg) rotateZ(.1deg) translateY(-3px); box-shadow: -10px 42px 110px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06); }
}
.screenshot-stage { position: relative; aspect-ratio: 2048/1048; overflow: hidden; background: #dbe4e1; }
.screenshot-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.screenshot-stage img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero-footer { position: absolute; z-index: 4; left: clamp(24px,5.5vw,96px); right: clamp(24px,5.5vw,96px); bottom: 24px; display: flex; align-items: center; gap: 18px; color: #496360; font: 600 7px/1 monospace; letter-spacing: .18em; }
.hero-footer i { height: 1px; flex: 1; background: rgba(128,170,166,.16); }
.asset-marquee { min-height: 84px; display: flex; align-items: center; justify-content: center; gap: clamp(18px,2.8vw,52px); padding: 16px 28px; border-block: 1px solid rgba(161,205,200,.13); color: #809995; background: #0a1a1c; white-space: nowrap; font: 600 clamp(8px,.8vw,11px)/1 monospace; letter-spacing: .12em; }
.asset-marquee i { color: #486d69; font-style: normal; }

.section-light, .section-dark { padding: clamp(84px,9vw,150px) clamp(24px,7vw,120px); }
.section-light { color: var(--paper-ink); background: var(--paper); }
.section-dark { background: #081719; }
.section-label { display: flex; align-items: center; gap: 13px; color: #70827f; font: 700 8px/1 monospace; letter-spacing: .18em; }
.section-label span { color: #3f5a57; }
.section-label i { width: 40px; height: 1px; background: #96a8a5; }
.section-label.dark { color: #6f8885; }
.section-label.dark span { color: var(--accent); }
.section-label.dark i { background: #355451; }
.split-heading { display: grid; grid-template-columns: 1.35fr .65fr; gap: 8vw; align-items: end; margin-top: 44px; }
.split-heading h2, .cases-heading h2, .download-heading h2 { margin: 0; font: 400 clamp(44px,5.6vw,82px)/1.1 Georgia,"Noto Serif SC","Songti SC",serif; letter-spacing: -.045em; }
.split-heading p { max-width: 520px; margin: 0 0 6px; color: var(--paper-muted); font-size: 14px; line-height: 1.9; }
.split-heading.dark h2 { color: #e4ecea; }
.split-heading.dark p { color: #869b98; }
.workflow { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 92px; border-top: 1px solid rgba(54,83,82,.2); }
.workflow::before { content: ""; position: absolute; top: -3px; left: 0; width: 25%; height: 5px; background: #679d98; }
.workflow article { min-height: 300px; padding: 25px clamp(18px,2vw,34px) 0; border-right: 1px solid rgba(54,83,82,.14); }
.workflow article:first-child { padding-left: 0; }
.workflow article:last-child { border: 0; }
.workflow article > small { color: #869895; font: 600 8px/1 monospace; }
.workflow article > div { width: 54px; height: 54px; display: grid; place-items: center; margin-top: 48px; border: 1px solid rgba(55,89,86,.18); color: #588783; background: rgba(255,255,255,.36); font: 21px/1 serif; }
.workflow h3 { margin: 26px 0 12px; font: 500 25px/1.2 Georgia,"Songti SC",serif; }
.workflow p { max-width: 240px; margin: 0; color: #71827f; font-size: 12px; line-height: 1.8; }

.feature-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; margin-top: 72px; }
.feature-card { position: relative; min-height: 430px; overflow: hidden; border: 1px solid rgba(166,207,203,.12); background: var(--panel); }
.feature-copy { position: relative; z-index: 2; padding: clamp(28px,4vw,58px); }
.feature-copy > small { color: #62817e; font: 700 7px/1 monospace; letter-spacing: .17em; }
.feature-copy h3 { margin: 22px 0 18px; color: #e5eeeb; font: 400 clamp(28px,3.2vw,47px)/1.17 Georgia,"Noto Serif SC","Songti SC",serif; letter-spacing: -.025em; }
.feature-copy p { max-width: 470px; margin: 0; color: #859a97; font-size: 12px; line-height: 1.85; }
.feature-archive { grid-row: span 2; min-height: 880px; background: radial-gradient(circle at 50% 75%,rgba(86,147,141,.21),transparent 34%),var(--panel); }
.contact-sheets { position: absolute; inset: auto 8% 7%; height: 50%; }
.sheet { position: absolute; width: 43%; height: 74%; padding: 14px; border: 1px solid rgba(193,224,220,.2); background: rgba(19,46,49,.82); box-shadow: 0 24px 55px rgba(0,0,0,.32); }
.sheet i { height: 76%; display: block; background: radial-gradient(circle at 50% 30%,#9cb2ae 0 7%,transparent 8%),radial-gradient(ellipse at 50% 93%,#435f61 0 30%,transparent 31%),linear-gradient(145deg,#7d9996,#243e41); }
.sheet span { display: block; margin-top: 10px; color: #78928f; font: 6px/1.6 monospace; letter-spacing: .12em; }
.sheet span b { color: #d5e5e2; font-size: 9px; }
.sheet.one { left: 0; top: 13%; transform: rotate(-7deg); }
.sheet.two { left: 29%; top: 3%; z-index: 2; transform: rotate(1deg); }
.sheet.two i { background: radial-gradient(circle at 65% 38%,rgba(196,210,196,.3),transparent 14%),linear-gradient(155deg,#78918d,#2f4b4e 58%,#172c30); }
.sheet.three { right: 0; top: 19%; transform: rotate(8deg); }
.sheet.three i { background: radial-gradient(circle at 55% 52%,#859e9a 0 10%,#334f52 11% 22%,transparent 23%),linear-gradient(145deg,#607d79,#172d30); }
.waveform { position: absolute; inset: auto 8% 12%; height: 100px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.waveform::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(139,199,193,.13); }
.waveform i { width: 3px; min-height: 5px; border-radius: 3px; background: linear-gradient(#9bd2cc,#3c726e); box-shadow: 0 0 12px rgba(142,203,197,.13); }
.feature-public { color-scheme: light; background: #dbe5e2; }
.feature-public .feature-copy > small { color: #718783; }
.feature-public .feature-copy h3 { color: #1b2d2f; }
.feature-public .feature-copy p { color: #637774; }
.feature-public > a { position: absolute; left: clamp(28px,4vw,58px); right: clamp(28px,4vw,58px); bottom: 42px; display: flex; justify-content: space-between; padding: 17px 0; border-block: 1px solid rgba(40,70,70,.18); color: #294744; font-size: 11px; text-decoration: none; }
.feature-public > a span { color: #4d817c; }
.feature-local { grid-column: 1/-1; min-height: 440px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; background: radial-gradient(circle at 22% 50%,rgba(98,160,154,.2),transparent 25%),#0b2022; }
.feature-local .feature-copy { grid-column: 2; }
.local-rings { position: absolute; left: 7%; top: 50%; width: 250px; height: 250px; display: grid; place-items: center; transform: translateY(-50%); }
.local-rings i { position: absolute; inset: 0; border: 1px solid rgba(142,203,197,.11); border-radius: 50%; }
.local-rings i:nth-child(2) { inset: 18%; }
.local-rings i:nth-child(3) { inset: 36%; border-color: rgba(142,203,197,.35); box-shadow: 0 0 30px rgba(142,203,197,.1); }
.local-rings span { color: #a9ceca; text-align: center; font: 600 8px/1.5 monospace; letter-spacing: .2em; }

.cases-heading { margin-top: 42px; }
.cases-heading > div { max-width: 980px; }
.cases-heading small { display: block; margin-bottom: 16px; color: #718581; font: 600 9px/1 monospace; letter-spacing: .08em; }
.cases-heading > p { margin: 0 0 6px; color: var(--paper-muted); font-size: 13px; line-height: 1.9; }
.case-grid { display: grid; grid-template-columns: 1.45fr .55fr; gap: 18px; margin-top: 72px; }
.case-card { min-height: 450px; border: 1px solid rgba(48,78,76,.16); text-decoration: none; }
.case-primary { display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; color: #e6efed; background: #0c2022; }
.case-art { position: relative; overflow: hidden; background: radial-gradient(circle at 52% 48%,rgba(137,195,188,.22),transparent 18%),linear-gradient(145deg,#183437,#081719); }
.case-art::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(143,190,186,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(143,190,186,.2) 1px,transparent 1px); background-size: 42px 42px; }
.case-art > span { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(201,227,223,.76); font: 400 clamp(90px,14vw,190px)/1 Georgia,serif; text-shadow: 0 0 50px rgba(142,203,197,.2); }
.orbit { position: absolute; z-index: 2; left: 50%; top: 50%; border: 1px solid rgba(165,212,207,.22); border-radius: 50%; transform: translate(-50%,-50%) rotate(-18deg); }
.orbit-a { width: 68%; aspect-ratio: 1; }
.orbit-b { width: 88%; aspect-ratio: 1; transform: translate(-50%,-50%) rotate(35deg); }
.case-sun { position: absolute; z-index: 3; left: 74%; top: 27%; width: 10px; height: 10px; border-radius: 50%; background: #b9ded9; box-shadow: 0 0 22px #8ecbc5; }
.case-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px,5vw,70px); }
.case-copy > p:first-child { display: flex; justify-content: space-between; margin: 0 0 54px; color: #66827f; font-size: 8px; }
.case-copy > p:first-child small { font: inherit; letter-spacing: .14em; }
.case-copy > p:first-child span { color: #91b8b3; }
.case-copy h3 { margin: 0; font: 400 clamp(40px,4vw,62px)/1 Georgia,serif; }
.case-copy > p:nth-of-type(2) { max-width: 310px; margin: 20px 0 42px; color: #839b97; font-size: 11px; line-height: 1.8; }
.case-copy > b { color: #a7c5c1; font: 600 9px/1 monospace; letter-spacing: .08em; }
.case-coming { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 45px; text-align: center; border-style: dashed; color: #5e7471; background: rgba(255,255,255,.2); }
.case-coming > span { color: #689590; font: 36px/1 Georgia,serif; }
.case-coming h3 { max-width: 250px; margin: 24px 0 14px; color: #314744; font: 500 23px/1.35 Georgia,"Songti SC",serif; }
.case-coming p { max-width: 290px; margin: 0; font-size: 11px; line-height: 1.8; }
.case-coming a { margin-top: 35px; padding-bottom: 6px; border-bottom: 1px solid rgba(64,96,92,.3); color: #486d69; font-size: 9px; text-decoration: none; }

.download { background: radial-gradient(circle at 50% 22%,rgba(67,126,121,.14),transparent 29%),#071416; }
.download-heading { max-width: 820px; margin: 0 auto 72px; text-align: center; }
.download-heading .section-label { justify-content: center; }
.download-heading h2 { margin-top: 38px; color: #e5eeeb; }
.download-heading > p { max-width: 580px; margin: 28px auto 0; color: #849a97; font-size: 13px; line-height: 1.85; }
.download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1180px; margin: 0 auto; }
.download-card { min-height: 620px; padding: clamp(28px,3.5vw,50px); border: 1px solid rgba(162,205,200,.14); background: #0d2022; }
.download-card > header { display: flex; align-items: center; gap: 18px; padding-bottom: 28px; border-bottom: 1px solid rgba(153,198,193,.13); }
.download-os { width: 60px; height: 60px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(142,203,197,.24); color: var(--accent); background: rgba(142,203,197,.06); font-size: 30px; }
.download-card header > div:nth-child(2) { display: grid; gap: 5px; }
.download-card header small { color: #60827f; font: 700 7px/1 monospace; letter-spacing: .15em; }
.download-card h3 { margin: 0; color: #e2ece9; font: 400 30px/1 Georgia,serif; }
.download-card header p { margin: 0; color: #708986; font-size: 9px; }
.download-card > header > span { margin-left: auto; color: #385451; font: 400 38px/1 Georgia,serif; }
.download-card ol { margin: 32px 0; padding: 0; list-style: none; counter-reset: steps; }
.download-card li { position: relative; min-height: 67px; display: grid; gap: 5px; padding: 8px 0 8px 44px; counter-increment: steps; }
.download-card li::before { content: counter(steps,decimal-leading-zero); position: absolute; left: 0; top: 9px; color: #6f9c98; font: 600 8px/1 monospace; }
.download-card li::after { content: ""; position: absolute; left: 7px; top: 28px; bottom: -2px; width: 1px; background: rgba(125,171,166,.16); }
.download-card li:last-child::after { display: none; }
.download-card li b { color: #cddbd8; font-size: 12px; }
.download-card li span { color: #718a87; font-size: 9px; }
.download-button { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #071315; background: var(--accent); font-size: 12px; text-decoration: none; }
.download-button b { font-size: 20px; }
.download-button.outline { border: 1px solid rgba(142,203,197,.3); color: #bed1ce; background: rgba(142,203,197,.04); }
.download-note { display: block; margin-top: 17px; color: #5f7774; font-size: 8px; line-height: 1.65; }
.terminal { position: relative; min-height: 242px; margin: 32px 0; border: 1px solid rgba(142,203,197,.13); background: #061113; }
.terminal header { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid rgba(142,203,197,.1); }
.terminal header span { color: #3d5c59; font: 7px/1 monospace; letter-spacing: .45em; }
.terminal header b { color: #58736f; font: 7px/1 monospace; }
.terminal pre { margin: 0; padding: 24px 18px 16px; color: #aabdb9; white-space: pre-wrap; font: 9px/2.15 Consolas,monospace; }
.terminal code i { color: #6fa9a3; font-style: normal; }
.terminal button { position: absolute; right: 11px; bottom: 10px; padding: 7px 9px; border: 1px solid rgba(142,203,197,.18); color: #78928f; background: #0b1b1d; font-size: 7px; cursor: pointer; }
.github-banner { max-width: 1180px; min-height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 26px; margin: 18px auto 0; padding: 20px 30px; border: 1px solid rgba(155,200,195,.13); background: rgba(13,31,33,.72); }
.github-banner > div { display: flex; align-items: center; gap: 17px; }
.github-banner > div > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: rgba(142,203,197,.08); font-size: 20px; }
.github-banner p { display: grid; gap: 6px; margin: 0; }
.github-banner small { color: #597874; font: 700 7px/1 monospace; letter-spacing: .14em; }
.github-banner b { color: #c8d6d3; font-size: 11px; }
.github-banner > a { padding-bottom: 7px; border-bottom: 1px solid rgba(142,203,197,.35); color: #9eb6b2; font: 9px/1 monospace; text-decoration: none; }
.github-banner > a span { margin-left: 10px; color: var(--accent); }

.deployment-help { position: relative; max-width: 1180px; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(230px,.55fr); gap: clamp(36px,6vw,92px); margin: 86px auto 0; padding: clamp(34px,5vw,72px); overflow: hidden; border: 1px solid rgba(162,205,200,.17); background: radial-gradient(circle at 85% 35%,rgba(78,147,140,.16),transparent 30%),linear-gradient(145deg,#10282b,#091b1d); }
.deployment-help::before { content: ""; position: absolute; inset: 0; opacity: .15; pointer-events: none; background-image: linear-gradient(rgba(142,203,197,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(142,203,197,.12) 1px,transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(90deg,transparent,#000); }
.deployment-copy { position: relative; z-index: 1; align-self: center; }
.deployment-copy h2 { max-width: 720px; margin: 34px 0 22px; color: #e4eeeb; font: 400 clamp(38px,4.7vw,68px)/1.12 Georgia,"Noto Serif SC","Songti SC",serif; letter-spacing: -.04em; }
.deployment-copy h2 > span { color: var(--accent); }
.deployment-copy > p { max-width: 680px; margin: 0; color: #8da29f; font-size: 13px; line-height: 1.9; }
.deployment-copy ul { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 38px 0 26px; padding: 0; list-style: none; }
.deployment-copy li { min-height: 116px; padding: 18px; border: 1px solid rgba(145,194,189,.12); background: rgba(7,20,22,.48); }
.deployment-copy li > span { color: #608f8a; font: 700 7px/1 monospace; }
.deployment-copy li > div { display: grid; gap: 8px; margin-top: 19px; }
.deployment-copy li b { color: #c8d8d5; font-size: 11px; }
.deployment-copy li small { color: #647f7b; font-size: 8px; line-height: 1.65; }
.free-support { display: flex; align-items: center; gap: 14px; padding: 15px 17px; border: 1px solid rgba(142,203,197,.18); background: rgba(7,20,22,.5); }
.free-support > span { min-width: 48px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(142,203,197,.35); color: var(--accent); background: rgba(142,203,197,.08); font: 700 8px/1 monospace; letter-spacing: .15em; }
.free-support > div { display: grid; gap: 5px; }
.free-support b { color: #c9d9d6; font-size: 10px; }
.free-support small { color: #627d79; font-size: 8px; line-height: 1.6; }
.wechat-card { position: relative; z-index: 2; align-self: center; width: min(100%,270px); justify-self: end; padding: 15px 15px 20px; border: 1px solid rgba(142,203,197,.25); color: #dce9e6; background: linear-gradient(145deg,rgba(17,45,47,.96),rgba(7,24,26,.96)); box-shadow: 0 24px 60px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.03); }
.wechat-card-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 15px; border-bottom: 1px solid rgba(42,77,73,.15); }
.wechat-card-head span { color: #79a9a4; font: 700 6px/1 monospace; letter-spacing: .13em; }
.wechat-card-head i { color: #688783; font: normal 7px/1 sans-serif; }
.qr-frame { width: 188px; margin: 17px auto 0; padding: 7px; border: 1px solid rgba(142,203,197,.22); background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.qr-frame img { width: 100%; height: auto; display: block; image-rendering: auto; }
.wechat-card h3 { margin: 19px 2px 8px; color: #dce9e6; font: 500 18px/1.25 Georgia,"Songti SC",serif; }
.wechat-card > p { margin: 0 2px 7px; color: #718c88; font-size: 8px; }
.wechat-card > b { display: block; margin: 0 2px; color: #8ebbb6; font-size: 9px; }

.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 70px; padding: 72px clamp(24px,7vw,120px) 32px; border-top: 1px solid rgba(151,197,192,.13); color: #b9cbc8; background: #050f11; }
.footer-brand { display: flex; align-items: center; gap: 18px; }
.footer-brand > div { display: grid; gap: 6px; }
.footer-brand b { color: #dce8e5; font: 500 22px/1 Georgia,serif; }
.footer-brand small { color: #5f7976; font-size: 10px; }
.footer-links { display: flex; gap: 90px; }
.footer-links > div { min-width: 90px; display: grid; gap: 12px; align-content: start; }
.footer-links small { margin-bottom: 6px; color: #54706d; font: 700 7px/1 monospace; letter-spacing: .17em; }
.footer-links a { color: #91a6a3; font-size: 10px; text-decoration: none; }
.footer-bottom { grid-column: 1/-1; display: flex; justify-content: space-between; gap: 25px; margin-top: 18px; padding-top: 25px; border-top: 1px solid rgba(146,187,183,.1); color: #3f5b58; font: 600 7px/1 monospace; letter-spacing: .13em; }

.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in-view { opacity: 1; transform: none; }

@media (max-width: 1120px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .hero { min-height: 1120px; height: auto; grid-template-columns: 1fr; padding-top: 150px; }
  .hero-copy { max-width: 740px; padding-left: 0; }
  .app-visual { width: 100%; max-width: 900px; margin: 20px auto 40px; }
  .app-window { width: min(900px,88vw); margin: 0 auto; transform: none; }
  .real-product { max-width: 1080px; }
  .real-product .product-screenshot { width: 88%; margin: 0 auto; transform: none; }
  .note-local { left: -1%; }
  .note-index { right: 0; }
  .split-heading, .cases-heading { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 820px) {
  .site-header, .site-header.scrolled { height: 72px; padding: 0 18px; }
  .brand-copy small, .github-link { display: none; }
  .header-actions a { padding: 0 12px; }
  .menu-button { justify-self: end; width: 42px; height: 42px; display: grid; place-content: center; gap: 4px; padding: 0; border: 1px solid rgba(142,203,197,.2); color: #9bb0ad; background: rgba(142,203,197,.05); cursor: pointer; }
  .menu-button span { width: 16px; height: 1px; display: block; background: currentColor; }
  .menu-button em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .site-header { grid-template-columns: 1fr auto auto; }
  .site-nav { position: fixed; left: 0; right: 0; top: 72px; display: grid; gap: 0; padding: 10px 18px 20px; border-bottom: 1px solid rgba(142,203,197,.15); background: rgba(7,19,21,.97); transform: translateY(-130%); opacity: 0; transition: transform .25s, opacity .25s; }
  .site-nav.open { transform: none; opacity: 1; }
  .site-nav a { padding: 14px 5px; border-bottom: 1px solid rgba(142,203,197,.09); }
  .hero { min-height: auto; padding: 126px 20px 94px; }
  .hero h1 { font-size: clamp(50px,14vw,72px); }
  .hero-lead { font-size: 14px; }
  .hero-actions { flex-direction: column; }
  .button { width: 100%; }
  .button-ghost { justify-content: center; }
  .app-visual { margin-top: 12px; }
  .app-window { width: 96vw; margin-left: -4vw; aspect-ratio: 1.15; }
  .real-product .product-screenshot { width: 100%; margin: 0; }
  .real-product .product-screenshot figcaption { min-height: 36px; padding: 0 10px; }
  .real-product .product-screenshot figcaption > b { font-size: 7px; }
  .character-list { display: none; }
  .app-body { grid-template-columns: 9% 91%; }
  .app-content { padding: 4%; }
  .floating-note, .hero-footer { display: none; }
  .asset-marquee { justify-content: flex-start; overflow: hidden; }
  .section-light, .section-dark { padding-left: 20px; padding-right: 20px; }
  .split-heading h2, .cases-heading h2, .download-heading h2 { font-size: clamp(40px,11vw,58px); }
  .workflow { grid-template-columns: 1fr 1fr; margin-top: 60px; }
  .workflow::before { width: 50%; }
  .workflow article { min-height: 260px; border-bottom: 1px solid rgba(54,83,82,.14); }
  .workflow article:nth-child(2) { border-right: 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-archive { min-height: 720px; }
  .feature-local { grid-column: auto; grid-template-columns: 1fr; padding-top: 250px; }
  .feature-local .feature-copy { grid-column: 1; }
  .local-rings { top: 145px; left: 50%; width: 210px; height: 210px; transform: translate(-50%,-50%); }
  .case-grid, .case-primary, .download-grid { grid-template-columns: 1fr; }
  .case-art { min-height: 360px; }
  .case-coming { min-height: 350px; }
  .github-banner { align-items: flex-start; flex-direction: column; }
  .deployment-help { grid-template-columns: 1fr; }
  .deployment-copy ul { grid-template-columns: 1fr 1fr 1fr; }
  .wechat-card { width: min(100%,270px); justify-self: center; }
  .site-footer { grid-template-columns: 1fr; gap: 50px; }
  .footer-links { gap: 50px; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 540px) {
  .brand-copy { display: none; }
  .header-download { font-size: 10px !important; }
  .eyebrow { letter-spacing: .12em; }
  .hero-points { gap: 10px 17px; }
  .app-window { width: 114vw; margin-left: -18vw; }
  .real-product .product-screenshot { width: 100%; margin: 0; }
  .real-product .product-screenshot figcaption > span { font-size: 5px; }
  .profile { gap: 14px; }
  .profile-copy > small { display: none; }
  .profile h2 { font-size: 20px; }
  .asset-cards { gap: 5px; }
  .workflow { grid-template-columns: 1fr; }
  .workflow::before { width: 100%; }
  .workflow article, .workflow article:nth-child(2) { min-height: 240px; padding-left: 0; border-right: 0; }
  .workflow article > div { margin-top: 32px; }
  .feature-card { min-height: 480px; }
  .feature-archive { min-height: 670px; }
  .contact-sheets { left: 4%; right: 4%; }
  .sheet { width: 49%; }
  .case-art { min-height: 290px; }
  .case-copy { padding: 30px 24px 40px; }
  .download-card { min-height: 0; padding: 25px 20px; }
  .download-card > header { gap: 12px; }
  .download-os { width: 50px; height: 50px; }
  .download-card > header > span { display: none; }
  .terminal pre { font-size: 8px; }
  .github-banner { padding: 20px; }
  .github-banner > div { align-items: flex-start; }
  .deployment-help { margin-top: 58px; padding: 28px 20px; }
  .deployment-copy ul { grid-template-columns: 1fr; }
  .deployment-copy li { min-height: 0; }
  .wechat-card { padding: 14px 14px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}