:root{
  color-scheme:light;
  --paper:#eae8e0;--glow:#f7f5ee;--ink:#303b2f;--muted:#626f5c;
  --soft:#8c9685;--line:#cbd2c1;--accent:#819b69;
  --control-bg:#f4f4eb;--control-hover:#e2e8d7;--control-border:#d1d8c8;
  --panel-bg:#fbfaf7;--panel-border:#c2cab9;
  --panel-shadow:0 24px 50px -28px #414e3438,0 2px 6px #414e340a;
  --cta-bg:linear-gradient(180deg,#4d6040,#3c4e31);--cta-ink:#f5f7ef;--cta-border:#3d5031;
  --cta-shadow:inset 0 1px 0 #ffffff21,0 5px 14px -7px #3e543a45;
  --cta-hover-border:#607b4c;--cta-hover-shadow:inset 0 1px 0 #ffffff30,0 10px 20px -10px #3e543a66;
  --arrow-bg:#d0dfbc;--arrow-ink:#3b542e;--arrow-hover:#e2edcf;
  --focus:#8aa775;--footer:#6b775f;
  --title-image:url('./assets/split-title.svg');--demo-image:url('./assets/terminal-demo.svg');
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#151b17;--glow:#243127;--ink:#e0e8d8;--muted:#9aa990;
  --soft:#77866e;--line:#3e4b39;--accent:#b5cc98;
  --control-bg:#283329;--control-hover:#344530;--control-border:#43543b;
  --panel-bg:#202622;--panel-border:#45523e;
  --panel-shadow:0 24px 60px -25px #0008,0 0 0 1px #d5e9b905;
  --cta-bg:linear-gradient(180deg,#cadbb5,#b9d09e);--cta-ink:#293d24;--cta-border:#cee0b9;
  --cta-shadow:inset 0 1px 0 #f2f9e67a,0 5px 22px -10px #a4c77d26;
  --cta-hover-border:#e4efcf;--cta-hover-shadow:inset 0 1px 0 #f2f9e6aa,0 12px 28px -14px #adce8459;
  --arrow-bg:#e0ebce;--arrow-ink:#3d5a2c;--arrow-hover:#f1f6e5;
  --focus:#b6d394;--footer:#839477;
  --title-image:url('./assets/split-title-dark.svg');--demo-image:url('./assets/terminal-demo-dark.svg');
}
*{box-sizing:border-box}
html{width:100%;height:100%;overflow:hidden}
body{display:grid;place-items:center;width:100%;height:100dvh;overflow:hidden;margin:0;background:radial-gradient(ellipse at 50% 0,var(--glow),transparent 72%),var(--paper);color:var(--ink)}
a{color:inherit}
.viewport-stage{container-type:inline-size;width:min(100vw,calc(100dvh * 1.2));aspect-ratio:6 / 5;flex:none}
.page{--u:calc(100cqw / 1248);width:100%;height:100%;padding:0 calc(56 * var(--u));display:flex;flex-direction:column}
.masthead{height:calc(88 * var(--u));flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:calc(20 * var(--u))}
.brand{display:inline-flex;align-items:center;gap:calc(12 * var(--u));text-decoration:none;font-size:calc(19 * var(--u));font-weight:650;letter-spacing:calc(-.6 * var(--u));white-space:nowrap}
.brand img{border-radius:calc(8 * var(--u))}
.brand-dot{color:var(--accent);margin-left:calc(1 * var(--u))}
.header-tools{display:flex;align-items:center;gap:calc(18 * var(--u))}
.platform{display:inline-flex;align-items:center;gap:calc(9 * var(--u));white-space:nowrap;font-size:calc(10 * var(--u));letter-spacing:calc(1.3 * var(--u));color:var(--muted);font-weight:500}
.platform img,.platform .apple-logo{display:block;flex-shrink:0}
.platform .platform-divider{padding:0 calc(5 * var(--u));color:var(--line)}
.theme-toggle{position:relative;display:flex;align-items:center;justify-content:center;width:calc(24 * var(--u));height:calc(28 * var(--u));padding:0;border-radius:calc(5 * var(--u));border:0;background:transparent;color:var(--muted);cursor:pointer;flex-shrink:0;transition:color .2s,transform .2s}.theme-toggle::before{content:"";position:absolute;inset:calc(-6 * var(--u))}
.theme-toggle:hover{color:var(--ink)}
.theme-toggle svg{width:calc(17 * var(--u));height:calc(17 * var(--u))}
.theme-toggle .sun-icon{display:none}
[data-theme="dark"] .theme-toggle .moon-icon{display:none}
[data-theme="dark"] .theme-toggle .sun-icon{display:block}
main{width:100%;margin:auto 0}
.hero-title{display:flex;justify-content:center;align-items:center;height:calc(86 * var(--u));margin:0 0 calc(18 * var(--u));font-size:0;line-height:0}
.hero-title img{display:block;width:calc(244 * var(--u));height:calc(86 * var(--u));content:var(--title-image)}
.demo{width:88%;margin:0 auto}
.demo-image{display:block;width:100%;height:auto;border-radius:calc(13 * var(--u));border:calc(1 * var(--u)) solid var(--panel-border);box-shadow:var(--panel-shadow);background:var(--panel-bg);content:var(--demo-image)}
.download-area{position:relative;height:calc(140 * var(--u));display:flex;justify-content:center;align-items:flex-start;padding-top:calc(42 * var(--u))}
.download-content{text-align:center}
.download-button{display:inline-flex;align-items:center;justify-content:center;gap:calc(14 * var(--u));min-height:calc(62 * var(--u));padding:0 calc(18 * var(--u)) 0 calc(23 * var(--u));background:var(--cta-bg);color:var(--cta-ink);border:calc(1 * var(--u)) solid var(--cta-border);border-radius:calc(16 * var(--u));text-decoration:none;font-size:calc(14 * var(--u));font-weight:600;letter-spacing:calc(.05 * var(--u));white-space:nowrap;box-shadow:var(--cta-shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
.download-icon{display:block;flex-shrink:0;width:calc(22 * var(--u));height:calc(22 * var(--u))}
.button-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:calc(30 * var(--u));height:calc(30 * var(--u));border-radius:50%;margin-left:calc(7 * var(--u));background:var(--arrow-bg);color:var(--arrow-ink);transition:background .2s}
.button-arrow svg{width:calc(18 * var(--u));height:calc(18 * var(--u));transition:transform .2s}
.download-button:hover{transform:translateY(calc(-2 * var(--u)));border-color:var(--cta-hover-border);box-shadow:var(--cta-hover-shadow)}
.download-button:hover .button-arrow{background:var(--arrow-hover)}
.download-button:hover .button-arrow svg{transform:translate(calc(1 * var(--u)),calc(-1 * var(--u)))}
.download-button:active{transform:translateY(0);box-shadow:inset 0 calc(1 * var(--u)) calc(3 * var(--u)) #32452620}
.download-button:focus-visible,.brand:focus-visible,.theme-toggle:focus-visible{outline:calc(3 * var(--u)) solid var(--focus);outline-offset:calc(5 * var(--u))}
footer{display:flex;justify-content:flex-end;flex-shrink:0;height:calc(46 * var(--u));align-items:center;padding:0;color:var(--footer);font-size:calc(8 * var(--u));letter-spacing:calc(1.7 * var(--u))}
@media(max-aspect-ratio:4/5){
  .viewport-stage{width:min(100vw,calc(100dvh * 390 / 740));aspect-ratio:390 / 740}
  .page{--u:calc(100cqw / 390);padding:0 calc(18 * var(--u))}
  .masthead{height:calc(72 * var(--u));gap:calc(12 * var(--u))}.header-tools{gap:calc(9 * var(--u))}
  .platform{font-size:calc(7 * var(--u));letter-spacing:calc(.5 * var(--u));gap:calc(5 * var(--u))}.platform img{width:calc(15 * var(--u));height:calc(15 * var(--u))}.platform .apple-logo{width:calc(14 * var(--u));height:calc(14 * var(--u))}.platform .platform-divider{padding:0 calc(1 * var(--u))}
  .theme-toggle{width:calc(24 * var(--u));height:calc(26 * var(--u))}.theme-toggle svg{width:calc(14 * var(--u));height:calc(14 * var(--u))}
  .brand{font-size:calc(16 * var(--u));gap:calc(7 * var(--u))}.brand img{height:calc(24 * var(--u));width:calc(24 * var(--u))}
  main{margin:calc(24 * var(--u)) 0 auto}.hero-title{height:calc(80 * var(--u));margin-bottom:calc(20 * var(--u))}.hero-title img{width:calc(238 * var(--u));height:calc(84 * var(--u))}
  .demo-image{border-radius:calc(8 * var(--u))}.download-area{height:calc(140 * var(--u));padding-top:calc(36 * var(--u))}
  .download-button{min-height:calc(58 * var(--u));font-size:calc(12 * var(--u));padding:0 calc(12 * var(--u)) 0 calc(16 * var(--u));gap:calc(11 * var(--u));border-radius:calc(15 * var(--u))}.download-icon{width:calc(21 * var(--u));height:calc(21 * var(--u))}
  .button-arrow{width:calc(27 * var(--u));height:calc(27 * var(--u));margin-left:calc(3 * var(--u))}footer{height:calc(46 * var(--u))}
}
@media(prefers-reduced-motion:reduce){
  :root{--title-image:url('./assets/split-title-poster.svg');--demo-image:url('./assets/terminal-poster.svg')}
  :root[data-theme="dark"]{--title-image:url('./assets/split-title-poster-dark.svg');--demo-image:url('./assets/terminal-poster-dark.svg')}
  .download-button,.button-arrow,.button-arrow svg,.theme-toggle{transition:none}
  .download-button:hover,.download-button:hover .button-arrow svg,.theme-toggle:hover{transform:none}
}
