/* ============ Anyvia — Signal Universe ============ */
:root{
  --ink:#111111;
  --ink-deep:#0C0C0B;
  --paper:#FAFAF8;
  --orange:#F97316;
  --line:#2A2A27;
  --line-soft:#1E1E1C;
  --mute:#8B8B84;
  --faint:#55554F;
  --sans:"Inter","Noto Sans SC",-apple-system,"PingFang SC","Helvetica Neue",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --panel:rgba(12,12,11,.55);
  --panel-strong:rgba(12,12,11,.78);
  --panel-solid:#141413;
  --pad:clamp(20px,5vw,96px);
  --maxw:1800px;
  --flow-w:1360px;
}
[data-theme="light"]{
  --ink-deep:#FAFAF8;
  --paper:#111111;
  --line:#D9D9D2;
  --line-soft:#E6E6DF;
  --mute:#6E6E67;
  --faint:#A6A69E;
  --panel:rgba(250,250,248,.68);
  --panel-strong:rgba(250,250,248,.85);
  --panel-solid:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--ink-deep)}
body{
  font-family:var(--sans);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .5s ease,color .5s ease;
}
::selection{background:var(--orange);color:var(--ink-deep)}

#field{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  transition:opacity .8s ease;
}
body.field-dim #field{opacity:.34}

.grain{
  position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-5%)}60%{transform:translate(-5%,-2%)}80%{transform:translate(4%,4%)}
}

main,footer{position:relative;z-index:2}

/* ============ mark primitives ============ */
.mark{display:block;overflow:visible}
.m-ink{fill:var(--paper)}
.m-paper{fill:var(--paper)}
.m-org{fill:var(--orange)}

/* ============ nav ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)));
  transition:background .4s ease,backdrop-filter .4s ease,padding .4s ease;
}
.nav.scrolled{
  background:var(--panel-strong);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  padding-top:14px;padding-bottom:14px;
}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper)}
.mark-s{width:30px;height:auto}
.nav-word{font-weight:700;font-size:19px;letter-spacing:-0.02em}
.nav-tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  color:var(--mute);
}
@media(max-width:640px){.nav-tag{display:none}}

/* ============ hero ============ */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:120px 24px 80px;
  position:relative;
}
.hero-mark{width:clamp(180px,26vmin,300px);margin-bottom:clamp(24px,4vh,48px)}
.mark-hero .draw{opacity:0;clip-path:inset(0 0 100% 0)}
.mark-hero .d1{animation:wipe-down .7s cubic-bezier(.7,0,.2,1) .15s forwards}
.mark-hero .d2{animation:wipe-right .5s cubic-bezier(.7,0,.2,1) .75s forwards;clip-path:inset(0 100% 0 0)}
.mark-hero .d3{animation:wipe-down .7s cubic-bezier(.7,0,.2,1) .45s forwards}
.mark-hero .d4{animation:wipe-up .8s cubic-bezier(.7,0,.2,1) 1.05s forwards;clip-path:inset(100% 0 0 0)}
@keyframes wipe-down{to{opacity:1;clip-path:inset(0 0 0% 0)}}
@keyframes wipe-up{to{opacity:1;clip-path:inset(0% 0 0 0)}}
@keyframes wipe-right{to{opacity:1;clip-path:inset(0 0% 0 0)}}
.mark-hero .beam{
  fill:none;stroke:var(--orange);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;opacity:0;
  animation:beam 1.4s cubic-bezier(.6,0,.2,1) 1.9s forwards;
  filter:drop-shadow(0 0 10px rgba(249,115,22,.8));
}
@keyframes beam{
  0%{opacity:0;stroke-dashoffset:1}
  15%{opacity:1}
  75%{opacity:1}
  100%{opacity:0;stroke-dashoffset:-1}
}

.hero-title{
  font-weight:700;
  font-size:clamp(2.6rem,8.2vw,7.2rem);
  line-height:1.02;
  letter-spacing:-0.045em;
}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero-title .w{display:inline-block;transform:translateY(115%);animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards}
.hero-title .line:nth-child(1) .w{animation-delay:.5s}
.hero-title .line:nth-child(2) .w{animation-delay:.68s}
@keyframes rise{to{transform:translateY(0)}}
.hero-title em{font-style:normal;color:var(--orange)}

.hero-sub{
  margin-top:clamp(18px,3vh,32px);
  font-size:clamp(1rem,2vw,1.35rem);
  font-weight:500;
  color:var(--mute);
  letter-spacing:.12em;
}

/* live signal ticker */
.ticker{
  margin-top:clamp(36px,7vh,72px);
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:clamp(10px,1.35vw,13px);
  color:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px 22px;
  max-width:min(92vw,880px);
  background:var(--panel);
  backdrop-filter:blur(6px);
  white-space:nowrap;overflow:hidden;
}
.ticker-dot{
  width:7px;height:7px;border-radius:50%;background:var(--orange);
  flex:none;animation:blink 1.6s ease infinite;
  box-shadow:0 0 10px rgba(249,115,22,.9);
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.ticker-label{color:var(--faint);letter-spacing:.18em;flex:none}
.ticker-text{color:var(--paper);overflow:hidden;text-overflow:clip}
.ticker-text .hl{color:var(--orange)}
.caret{width:8px;height:1.1em;background:var(--orange);flex:none;animation:blink 1s steps(1) infinite}
@media(max-width:640px){.ticker-label{display:none}}

.scroll-hint{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--faint);
}
.scroll-hint i{
  width:1px;height:44px;background:var(--line);position:relative;overflow:hidden;
}
.scroll-hint i::after{
  content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;
  background:var(--orange);animation:drip 1.8s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes drip{to{top:110%}}

/* ============ section headers ============ */
.sec-head{
  display:flex;align-items:flex-end;gap:clamp(16px,3vw,40px);
  padding:0 var(--pad);
  max-width:var(--maxw);margin-inline:auto;
  margin-bottom:clamp(32px,5vh,64px);
}
.sec-no{
  font-family:var(--mono);font-size:12px;color:var(--orange);
  letter-spacing:.2em;padding-bottom:8px;
  border-bottom:1px solid var(--orange);
}
.sec-titles{flex:1}
.sec-titles h2{
  font-size:clamp(1.8rem,4.2vw,3.4rem);font-weight:700;letter-spacing:-0.03em;
}
.sec-titles p{color:var(--mute);margin-top:6px;font-size:clamp(.85rem,1.4vw,1.02rem)}
.sec-mono{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--faint);
  padding-bottom:8px;white-space:nowrap;
}
@media(max-width:640px){.sec-mono{display:none}}

/* ============ 01 flow ============ */
.flow{padding:clamp(90px,14vh,160px) 0 clamp(70px,10vh,120px)}
.flow-stage{position:relative;padding:0 clamp(8px,2vw,40px)}
#flow-svg{
  display:block;width:100%;max-width:var(--flow-w);margin:0 auto;
  min-width:900px;
}
.flow-stage{overflow-x:auto;scrollbar-width:none}
.flow-stage::-webkit-scrollbar{display:none}

.conduit{
  fill:none;stroke:var(--line);stroke-width:1.4;
  stroke-dasharray:3 7;
}
.node-ring{
  fill:var(--panel);stroke:var(--line);stroke-width:1.4;
  transition:stroke .5s ease;
}
.node-icon{
  fill:none;stroke:var(--mute);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .5s ease;
}
.node.lit .node-ring{stroke:var(--orange)}
.node.lit .node-icon{stroke:var(--paper)}
.node-en{
  fill:var(--paper);font-family:var(--mono);font-size:13px;letter-spacing:.14em;
  text-anchor:middle;
}
.node-zh{fill:var(--faint);font-size:12px;text-anchor:middle;font-family:var(--sans)}

.core-ring{fill:var(--panel-strong);stroke:var(--paper);stroke-width:1.6}
.core-halo{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 6}
.core-pulse{
  fill:none;stroke:var(--orange);stroke-width:1.4;opacity:0;
  transform-box:fill-box;transform-origin:center;
}
.core-pulse.go{animation:corepulse 1.1s cubic-bezier(.2,.6,.3,1) forwards}
.core-pulse.p2.go{animation-delay:.14s}
@keyframes corepulse{
  0%{opacity:.85;transform:scale(1)}
  100%{opacity:0;transform:scale(1.65)}
}
.core-label{
  fill:var(--faint);font-family:var(--mono);font-size:12px;letter-spacing:.3em;
  text-anchor:middle;
}
.core.flash .core-ring{stroke:var(--orange)}

.pkt{fill:var(--orange);filter:drop-shadow(0 0 7px rgba(249,115,22,.95))}
.pkt-out{fill:var(--paper);filter:drop-shadow(0 0 7px rgba(249,115,22,.7))}

.axis{
  font-family:var(--mono);font-size:15px;letter-spacing:.5em;
  fill:var(--faint);
}
.axis-in{text-anchor:start}
.axis-out{text-anchor:end}

.flow-console{
  max-width:var(--flow-w);margin:26px auto 0;
  min-height:120px;
  padding:0 clamp(12px,2vw,16px);
  font-family:var(--mono);font-size:clamp(10px,1.15vw,12.5px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
}
.flow-console .cl{
  display:flex;gap:14px;color:var(--mute);
  opacity:0;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s ease;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.flow-console .cl.show{opacity:1;transform:none}
.flow-console .cl .t{color:var(--faint);flex:none}
.flow-console .cl .dir-in{color:var(--orange);flex:none}
.flow-console .cl .dir-out{color:var(--paper);flex:none}
.flow-console .cl.old{opacity:.35}

/* ============ 02 devices ============ */
.devices{height:520vh;position:relative}
.devices-pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
}
.devices-pin .sec-head{padding-top:9vh}
.track{
  flex:1;display:flex;align-items:center;
  will-change:transform;
}
#thread-svg{
  height:clamp(420px,36vw,66vh);width:auto;flex:none;
  display:block;
}
#thread{
  fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 0 12px rgba(249,115,22,.55));
}
.device .dev-body > *{
  fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .8s ease;
}
.device .dev-body .dev-detail{stroke-width:2.4}
.device .node-dot{
  fill:var(--orange);opacity:.25;
  transform-box:fill-box;transform-origin:center;
  transition:opacity .6s ease;
}
.device.on .dev-body > *{stroke:var(--paper)}
.device.on .node-dot{
  opacity:1;
  animation:dotpulse 2.2s ease infinite;
  filter:drop-shadow(0 0 14px rgba(249,115,22,.9));
}
@keyframes dotpulse{
  0%,100%{transform:scale(1)}50%{transform:scale(1.45)}
}
.dev-en{
  fill:var(--paper);font-family:var(--mono);font-size:26px;letter-spacing:.08em;
  text-anchor:middle;opacity:.18;transition:opacity .8s ease;
}
.dev-zh{
  fill:var(--mute);font-size:21px;text-anchor:middle;font-family:var(--sans);
  opacity:0;transition:opacity .8s ease .15s;
}
.device.on .dev-en,.device.on .dev-zh{opacity:1}

/* ============ 03 manifesto ============ */
.manifesto{
  padding:clamp(120px,22vh,240px) clamp(24px,6vw,80px);
  text-align:center;
}
.mani-line{
  font-size:clamp(2.2rem,7vw,6rem);
  font-weight:700;letter-spacing:-0.02em;line-height:1.28;
  position:relative;
}
.mani-line small{
  display:block;font-family:var(--mono);font-size:clamp(9px,1vw,12px);
  letter-spacing:.42em;color:var(--faint);font-weight:400;margin-top:.8em;
}
.mani-line.accent{color:var(--orange)}

/* ============ 04 principles ============ */
.principles{padding:0 0 clamp(90px,14vh,160px)}
.prin-grid{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line-soft);
  width:min(calc(100% - 2 * var(--pad)),calc(var(--maxw) - 2 * var(--pad)));
  margin-inline:auto;
}
.prin{
  padding:clamp(28px,4vw,52px);
  border-bottom:1px solid var(--line-soft);
  position:relative;
  transition:background .5s ease;
}
.prin:nth-child(odd){border-right:1px solid var(--line-soft)}
.prin:hover{background:rgba(250,250,248,.025)}
.prin-no{
  font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.2em;
  transition:color .4s ease;
}
.prin:hover .prin-no{color:var(--orange)}
.prin h3{
  margin:14px 0 12px;font-size:clamp(1.25rem,2.2vw,1.7rem);font-weight:700;
  letter-spacing:-0.02em;
}
.prin h3 i{
  font-style:normal;font-weight:500;color:var(--mute);
  font-size:.72em;margin-left:.6em;
}
.prin p{color:var(--mute);font-size:clamp(.85rem,1.2vw,.98rem);line-height:1.75;max-width:34em}
@media(max-width:720px){
  .prin-grid{grid-template-columns:1fr}
  .prin:nth-child(odd){border-right:none}
}

/* ============ footer ============ */
.footer{
  border-top:1px solid var(--line-soft);
  padding:clamp(70px,12vh,130px) 24px 48px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
}
.mark-f{width:64px}
.foot-word{font-size:26px;font-weight:700;letter-spacing:-0.02em}
.foot-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;color:var(--mute)}
.foot-copy{
  margin-top:36px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.2em;color:var(--faint);
}

/* ============ reveal ============ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .mark-hero .draw{opacity:1;clip-path:none}
  .hero-title .w{transform:none}
  .rv{opacity:1;transform:none}
  .grain{animation:none}
}

/* ============ field handoff: hide canvas thread while device thread owns the stage ============ */
body.field-hide #field{opacity:0}

/* ============ nav right: github + theme toggle ============ */
.nav-right{display:flex;align-items:center;gap:18px}
.nav-icon{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);color:var(--paper);
  background:transparent;cursor:pointer;
  transition:border-color .3s ease,color .3s ease,transform .3s ease;
}
.nav-icon:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-1px)}
.nav-icon svg{width:16px;height:16px;fill:currentColor}
#theme-toggle svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#theme-toggle .ic-sun{display:none}
[data-theme="light"] #theme-toggle .ic-moon{display:none}
[data-theme="light"] #theme-toggle .ic-sun{display:block}
@media(max-width:640px){.nav-right{gap:10px}.nav-icon{width:30px;height:30px}}

/* ============ 03 demo — on every screen ============ */
.demo{padding:clamp(90px,14vh,160px) 0 clamp(70px,10vh,120px)}
.demo-row{
  display:flex;gap:clamp(20px,2.6vw,44px);
  padding:8px var(--pad) 28px;
  max-width:var(--maxw);margin-inline:auto;
  justify-content:safe center;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.demo-row::-webkit-scrollbar{display:none}
.demo-card{flex:none;scroll-snap-align:center;display:flex;flex-direction:column;gap:18px}
.demo-card figcaption{display:flex;flex-direction:column;gap:4px}
.demo-card figcaption b{font-family:var(--mono);font-size:13px;letter-spacing:.1em;font-weight:500}
.demo-card figcaption span{font-size:12.5px;color:var(--mute)}

.frame{
  border-radius:36px;padding:10px;
  background:linear-gradient(160deg,#232320,#121210);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.55),inset 0 1px 0 rgba(250,250,248,.09);
}
[data-theme="light"] .frame{box-shadow:0 24px 60px -28px rgba(17,17,17,.35),inset 0 1px 0 rgba(250,250,248,.12)}
.scr{width:100%;height:100%;border-radius:26px;overflow:hidden;position:relative}
.scr-paper{background:#FAFAF8;color:#111111}
.scr-ink{background:#0E0E0D;color:#FAFAF8}

/* iPhone */
.f-phone{width:250px;height:510px}
.statusbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 22px 6px;font-size:12px;font-weight:600;
}
.sb-ic{display:flex;gap:5px;align-items:center}
.sb-sig{width:15px;height:10px;border-radius:2px;background:#111}
.sb-bat{width:20px;height:10px;border-radius:3px;border:1.4px solid #111;position:relative}
.sb-bat::after{content:"";position:absolute;inset:1.6px 4px 1.6px 1.6px;background:#111;border-radius:1px}
.app-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 20px 6px;font-size:22px;
}
.bell{width:18px;height:18px;border:1.6px solid #8b8b84;border-radius:50% 50% 40% 40%;position:relative}
.bell i{position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.tabs{display:flex;gap:16px;padding:8px 20px;font-size:12px;color:#8b8b84;border-bottom:1px solid #ecece6}
.tabs b{color:#111;border-bottom:2px solid #111;padding-bottom:6px}
.msg-list{list-style:none;padding:6px 12px}
.msg-list li{
  display:flex;gap:10px;align-items:center;
  padding:11px 10px;border-radius:12px;font-size:12.5px;
}
.msg-list li>i{flex:none;width:7px;height:7px;border-radius:50%;background:#d8d8d2}
.msg-list li b{display:block;font-weight:600;font-size:12.5px}
.msg-list li small{color:#9a9a92;font-size:10.5px}
.msg-list li em{font-style:normal;color:#c8c8c0;margin-left:auto}
.msg-list li.unread{background:#F4F4EF}
.msg-list li.unread>i{background:var(--orange);animation:blink 2s ease infinite}
.dock{
  position:absolute;bottom:0;left:0;right:0;height:52px;
  border-top:1px solid #ecece6;display:flex;justify-content:space-around;align-items:center;
}
.dock b,.dock span{width:20px;height:20px;border-radius:6px;background:#e4e4de}
.dock b{background:var(--orange)}

/* Watch */
.f-watch{width:212px;height:510px;border-radius:44px;background:none;box-shadow:none;padding:0;display:flex;align-items:center;justify-content:center}
.f-watch .scr{
  width:196px;height:240px;border-radius:44px;flex:none;
  border:7px solid #1c1c1a;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.55),0 0 0 2px #2a2a27;
  padding:16px 14px;display:flex;flex-direction:column;gap:10px;
}
.w-time{text-align:right;font-size:13px;font-weight:600;color:var(--orange)}
.w-card{background:#1c1c1a;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:5px}
.w-card small{display:flex;align-items:center;gap:4px;color:#8b8b84;font-size:10px}
.w-card small svg{width:9px;height:9px;fill:none;stroke:#F97316;stroke-width:1.6}
.w-card b{font-size:13px;line-height:1.4}
.w-card span{font-size:10px;color:#8b8b84}
.w-btn{background:#262623;border-radius:999px;text-align:center;font-size:12px;padding:9px}

/* Tabletop */
.f-tab{width:380px;height:300px;border-radius:26px}
.f-tab .scr{border-radius:18px}
.t-time{
  position:absolute;top:16px;right:20px;text-align:right;
  font-size:17px;font-weight:600;line-height:1.2;
}
.t-time small{display:block;font-size:10px;color:#8b8b84;font-weight:400}
.t-card{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  width:76%;background:#FAFAF8;color:#111;border-radius:18px;
  padding:20px 24px;text-align:left;
  display:flex;flex-direction:column;gap:6px;
}
.t-mark svg{width:26px;display:block}
.t-card b{font-size:17px;line-height:1.35}
.t-card>span{font-size:11px;color:#8b8b84}
.t-btns{display:flex;gap:10px;margin-top:8px}
.t-btns i{
  font-style:normal;font-size:12px;padding:8px 16px;border-radius:999px;
  border:1.4px solid #111;
}
.t-btns i.solid{background:#111;color:#FAFAF8}

/* Voice badge */
.f-badge{width:240px;height:510px;border-radius:0;background:none;box-shadow:none;padding:0;display:flex;align-items:center;justify-content:center}
.f-badge .scr.round{
  width:228px;height:228px;border-radius:50%;flex:none;
  border:6px solid #1c1c1a;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.55),0 0 0 2px #2a2a27;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.b-mark{width:44px}
.b-state{font-size:11.5px;color:#c9c9c2;letter-spacing:.06em}
.wave{display:flex;gap:4px;align-items:center;height:22px}
.wave i{width:3px;border-radius:2px;background:var(--orange);animation:wave 1.1s ease-in-out infinite}
.wave i:nth-child(1){height:8px;animation-delay:0s}
.wave i:nth-child(2){height:16px;animation-delay:.12s}
.wave i:nth-child(3){height:22px;animation-delay:.24s}
.wave i:nth-child(4){height:14px;animation-delay:.36s}
.wave i:nth-child(5){height:7px;animation-delay:.48s}
@keyframes wave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.15)}}

/* Mac */
.f-mac{width:400px;height:300px;border-radius:20px}
.f-mac .scr{border-radius:12px}
.scr-desk{
  background:
    radial-gradient(120% 130% at 18% 0%,#3a2a1c 0%,transparent 55%),
    radial-gradient(120% 140% at 85% 100%,#1c2a3a 0%,transparent 60%),
    #14130f;
}
.mac-banner{
  position:absolute;top:18px;right:18px;
  display:flex;gap:12px;align-items:center;
  background:rgba(250,250,248,.94);color:#111;
  border-radius:16px;padding:12px 16px;width:74%;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.5);
  animation:banner 5s ease infinite;
}
@keyframes banner{
  0%,8%{transform:translateY(-140%);opacity:0}
  18%,86%{transform:translateY(0);opacity:1}
  96%,100%{transform:translateY(-140%);opacity:0}
}
.mb-icon svg{width:30px;display:block}
.mb-text b{display:flex;justify-content:space-between;font-size:13px;gap:30px}
.mb-text b em{font-style:normal;font-weight:400;color:#8b8b84;font-size:11px}
.mb-text span{font-size:12px;color:#55554f}

@media(max-width:760px){
  .f-tab{width:320px;height:256px}
  .f-mac{width:320px;height:256px}
  .mac-banner{width:82%}
}

/* ============ 05 install ============ */
.install{padding:0 0 clamp(100px,15vh,180px)}
.inst-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1px;background:var(--line-soft);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  width:min(calc(100% - 2 * var(--pad)),calc(var(--maxw) - 2 * var(--pad)));
  margin-inline:auto;
}
.inst-step{
  background:var(--ink-deep);padding:clamp(26px,3vw,44px);
  display:flex;flex-direction:column;gap:14px;
  transition:background .5s ease;
}
.inst-no{font-family:var(--mono);font-size:12px;color:var(--orange);letter-spacing:.2em}
.inst-step h3{font-size:1.15rem;font-weight:700;letter-spacing:-0.01em}
.inst-step p{color:var(--mute);font-size:.88rem;line-height:1.7}
.inst-step pre{
  background:var(--panel-solid);border:1px solid var(--line-soft);
  border-radius:12px;padding:16px 18px;
  overflow-x:auto;scrollbar-width:thin;
  transition:background .5s ease,border-color .5s ease;
}
.inst-step code{
  font-family:var(--mono);font-size:11.5px;line-height:1.85;
  color:var(--paper);white-space:pre;
}
.inst-link{
  font-family:var(--mono);font-size:12px;color:var(--orange);
  text-decoration:none;letter-spacing:.04em;margin-top:auto;
}
.inst-link i{font-style:normal;transition:transform .3s ease;display:inline-block}
.inst-link:hover i{transform:translate(2px,-2px)}

/* ============ footer labs ============ */
.foot-labs{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;color:var(--mute)}
.foot-labs a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .3s ease,border-color .3s ease}
.foot-labs a:hover{color:var(--orange);border-color:var(--orange)}

/* ============ ultra-wide adaptation ============ */
@media (min-width:2100px){
  html{font-size:19px}
  .hero-mark{width:clamp(220px,22vmin,360px)}
  .demo-card{zoom:1.2}
}
@media (min-width:3400px){
  html{font-size:23px}
  .demo-card{zoom:1.5}
}