/* leow3bot 产品介绍页 — 参考 Kimi Code 页风格
   两屏结构：第一屏 安装方式 + 使用场景；第二屏 案例演示。
   白底黑字、蓝色点缀、黑色胶囊、灰色命令条。 */

:root{
  --ink:#1f1d18;
  --copy:#43403a;
  --muted:#8a857a;
  --body:#63605a;
  --bg:#f6f3ea;      /* 纸张底色 */
  --bg2:#efebde;     /* 页脚深纸色 */
  --field:#fbfaf5;   /* 命令框纸面 */
  --line:#e5e0d0;    /* 暖色描边 */
  --blue:#377cf6;
  --blue-deep:#2a68d8;
  --blue-soft:#edf2fe;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --serif:Georgia,"Times New Roman","Songti SC","STSong",serif;
  --hand:"Bradley Hand","Chalkboard SE","Segoe Script","Comic Sans MS",cursive;
  --sig:"Snell Roundhand","Segoe Script","Brush Script MT",cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--ink);
  background-color:#efe9da;
  /* 纸张质感：顶部受光 + 边角暗角 + 纸面纤维浮雕 + 细颗粒 */
  background-image:
    radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.32),rgba(255,255,255,0) 52%),
    radial-gradient(150% 90% at 50% 112%,rgba(118,96,54,.09),rgba(118,96,54,0) 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='r' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.11 0.28' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23f4f0e3' surfaceScale='0.45' diffuseConstant='1.25'%3E%3CfeDistantLight azimuth='55' elevation='62'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23r)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:0;background:none;cursor:pointer;padding:0;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
::selection{background:rgba(55,124,246,.16)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- 顶部导航 ---------- */
.nav{
  position:sticky;top:0;z-index:100;height:64px;
  background:rgba(246,243,234,.88);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(31,29,24,.08);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,4vw,44px);
}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  background:#111114;color:#fff;border-radius:10px;
  height:30px;padding:0 10px;
  font:700 13px/1 var(--mono);letter-spacing:-.06em;
}
.brand-name{font-size:17px;font-weight:650;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links > a{font-size:14px;color:var(--copy);transition:color .15s ease}
.nav-links > a:hover{color:var(--ink)}
.nav-pill{
  background:#111114;color:#fff;font-size:14px;font-weight:500;
  border-radius:999px;padding:9px 18px;
  transition:background-color .2s ease,transform .15s ease;
}
.nav-pill:hover{background:#000}
.nav-pill:active{transform:scale(.97)}

/* ---------- 两屏公共 ---------- */
.screen{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:78px clamp(20px,4vw,44px) 40px;
}
@supports (min-height:100svh){.screen{min-height:100svh}}

/* ---------- 第一屏：安装 + 使用场景 ---------- */
.announce{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blue-soft);color:var(--blue);
  border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:500;
}
.announce a{font-weight:600;color:var(--blue-deep);white-space:nowrap}
.announce a:hover{text-decoration:underline}
.screen-install h1{
  font-size:clamp(46px,6.4vw,72px);font-weight:700;
  letter-spacing:-.035em;line-height:1.05;
  margin:20px 0 12px;
}
.screen-install .sub{
  font-size:clamp(16px,2vw,19px);line-height:1.75;color:var(--copy);
  margin:0 auto;max-width:640px;
}

/* ---------- 背景装饰：散落的公式、图表与手写批注 ---------- */
.screen-install{position:relative}
.screen-install > :not(.desk-decor){position:relative;z-index:1}
.desk-decor{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  pointer-events:none;user-select:none;-webkit-user-select:none;
}
.dd{
  position:absolute;transform:rotate(var(--r,0deg));white-space:nowrap;
  font:italic 600 24px/1 var(--serif);color:rgba(93,82,58,.17);letter-spacing:.01em;
}
.dd.h{font:600 20px/1.2 var(--hand);color:rgba(58,92,168,.16);font-style:normal}
.dd.sig{
  font:700 42px/1 var(--sig);color:rgba(58,92,168,.24);font-style:normal;
  padding:0 .12em .14em;
}
.dd.sig::after{
  content:"";display:block;height:10px;margin-top:-4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 Q 28 1 55 5 T 98 4' fill='none' stroke='rgba(58,92,168,.3)' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* 论文截图公式/图表：正片叠底融进纸面 */
.dd.img{
  mix-blend-mode:multiply;opacity:.5;
  filter:sepia(.14) saturate(.75) contrast(.92);
}

/* 安装命令条（仿 Kimi：黑色胶囊 + 灰色命令框 + 复制） */
.install-bar{
  position:relative;margin-top:28px;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--field);border:1px solid var(--line);
  border-radius:999px;padding:5px;max-width:100%;
  box-shadow:0 1px 3px rgba(88,74,40,.06);
}
.install-label{
  display:inline-flex;align-items:center;gap:7px;
  background:#111114;color:#fff;font-size:14px;font-weight:500;
  border-radius:999px;padding:11px 18px;white-space:nowrap;
  transition:background-color .2s ease,transform .15s ease;
}
.install-label:hover{background:#000}
.install-label:active{transform:scale(.97)}
.install-label .chev{font-size:10px;transform:translateY(-1px);transition:transform .2s ease}
.install-bar.open .chev{transform:translateY(-1px) rotate(180deg)}
.cmd-side{display:flex;align-items:center;gap:2px;min-width:0}
.install-cmd{
  font:500 13.5px/1.4 var(--mono);color:var(--copy);
  padding:0 8px;white-space:nowrap;overflow-x:auto;scrollbar-width:none;
}
.install-cmd::-webkit-scrollbar{display:none}
.copy-icon{
  flex:none;width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:#6d6d74;transition:background-color .15s ease,color .15s ease,transform .15s ease;
}
.copy-icon:hover{background:#ece7d8;color:var(--ink)}
.copy-icon:active{transform:scale(.92)}
.copy-icon svg{width:16px;height:16px}
.copy-icon .icon-check{display:none;color:#1d9d4c}
.copy-icon.ok .icon-copy{display:none}
.copy-icon.ok .icon-check{display:block}

.install-menu{
  position:absolute;z-index:40;top:calc(100% + 10px);left:5px;
  margin:0;padding:6px;list-style:none;min-width:210px;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 14px 40px rgba(17,17,20,.12);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.install-bar.open .install-menu{opacity:1;transform:none;pointer-events:auto}
.install-menu li button{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:10px 14px;border-radius:9px;
  font-size:13.5px;color:var(--copy);transition:background-color .12s ease;
}
.install-menu li button:hover{background:#f2eee1;color:var(--ink)}
.install-menu li button .tick{color:var(--blue);opacity:0}
.install-menu li button.active{color:var(--ink);font-weight:600}
.install-menu li button.active .tick{opacity:1}

/* 使用场景 */
.usecases{margin-top:32px;width:min(1080px,100%)}
.uc-head h2{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0}
.uc-head p{font-size:14px;color:var(--muted);margin:9px 0 0}
.uc-grid{margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.uc-card{
  text-align:left;background:#fffefb;border:1px solid var(--line);border-radius:16px;
  padding:18px 18px 20px;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.uc-card:hover{
  border-color:#d6d0bd;transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(88,74,40,.09);
}
.uc-art{
  position:relative;margin:-18px -18px 14px;
  background:#f5f2e8;border-bottom:1px solid #ece7d8;
  border-radius:15px 15px 0 0;padding:8px 10px 0;overflow:hidden;
}
.uc-art svg{display:block;width:100%;height:auto}
.uc-file{
  position:absolute;z-index:2;top:10px;left:10px;
  display:inline-flex;align-items:center;gap:5px;
  background:#fff;border:1px solid var(--line);border-radius:7px;
  padding:4px 8px;font:600 10px/1 var(--mono);color:#5d6b77;
  box-shadow:0 2px 6px rgba(17,17,20,.06);
}
.uc-file i{width:8px;height:10px;border-radius:2px}
.uc-num{font:italic 600 15px/1 var(--serif);color:var(--blue)}
.uc-card h3{
  margin:12px 0 7px;font:600 17px/1.45 var(--serif);letter-spacing:.01em;
}
.uc-card p{margin:0;font-size:13.5px;line-height:1.7;color:var(--body)}

/* ---------- 卡片点击进入演示 ---------- */
.uc-card{cursor:pointer}
.uc-art::after{
  content:"▶";position:absolute;z-index:3;right:10px;bottom:9px;
  width:26px;height:26px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:9px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(55,124,246,.3);
  opacity:0;transform:scale(.85);transition:opacity .18s ease,transform .18s ease;
}
.uc-card:hover .uc-art::after,
.uc-card:focus-visible .uc-art::after{opacity:1;transform:none}
.usecases{scroll-margin-top:76px}

/* ---------- 页脚 ---------- */
.site-foot{background:var(--bg2);border-top:1px solid var(--line);padding:20px clamp(20px,4vw,44px) 26px}
.foot-inner{
  max-width:1080px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;
}
.foot-inner > span{font-size:12.5px;color:var(--muted)}
.foot-inner nav{display:flex;gap:22px}
.foot-inner nav a{font-size:12.5px;color:var(--muted)}
.foot-inner nav a:hover{color:var(--ink)}

/* ---------- 案例演示弹层 ---------- */
.demo-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.demo-modal[hidden]{display:none}
.demo-backdrop{
  position:absolute;inset:0;background:rgba(17,17,20,.52);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.demo-dialog{
  position:relative;width:min(860px,100%);
  background:#171719;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.45);color:#efeff1;
  animation:pop .28s cubic-bezier(.25,.1,.25,1) both;
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.demo-bar{position:relative;display:flex;align-items:center;gap:7px;padding:12px 14px;background:#1e1e21;border-bottom:1px solid #303034}
.demo-dot{width:11px;height:11px;border-radius:50%}
.demo-title{position:absolute;left:50%;transform:translateX(-50%);font:500 12px/1 var(--mono);color:#9a9aa2;white-space:nowrap}
.demo-close{
  margin-left:auto;width:28px;height:28px;border-radius:8px;
  color:#9a9aa2;font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .15s ease,color .15s ease;
}
.demo-close:hover{background:#303034;color:#fff}
.demo-body{display:grid;grid-template-columns:190px 1fr}
.demo-side{background:#1e1e21;border-right:1px solid #303034;padding:20px 16px;text-align:left}
.demo-files-title{font:700 9px/1 var(--mono);color:#a5a5aa;letter-spacing:.12em}
.demo-file{display:flex;align-items:center;gap:8px;margin-top:12px;font:11px/1.5 var(--mono);color:#c8c8cd}
.demo-file i{width:9px;height:12px;border-radius:2px;background:#86abc4;flex:none}
.demo-meta{margin-top:22px;font:10px/1.9 var(--mono);color:#77777e}
.demo-main{position:relative;min-height:360px;padding:22px 24px;font:12.5px/1.95 var(--mono);text-align:left}
.demo-main .prompt{color:#75b9f6}
.demo-main .dim{color:#7f7f86}
.demo-main .tool{color:#c8c8cd}
.demo-main .ok{color:#98cf9e}
.demo-main .caret{
  display:inline-block;width:.56em;height:1.05em;margin-left:2px;
  background:#75b9f6;vertical-align:-.15em;
  animation:blink 1.1s steps(2,start) infinite;
}
@keyframes blink{to{visibility:hidden}}
.demo-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid #303034;background:#1e1e21}
.demo-replay{
  font:500 11px/1 var(--mono);color:#c8c8cd;
  border:1px solid #3a3a40;border-radius:8px;padding:7px 12px;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.demo-replay:hover{background:#26262a;color:#fff;border-color:#4a4a52}
.demo-replay:disabled{opacity:.4;cursor:default}
.demo-foot-hint{font:10px/1 var(--mono);color:#65656c}

/* ---------- 入场动画 ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.screen-install .announce{animation:fadeUp .6s cubic-bezier(.25,.1,.25,1) both}
.screen-install h1{animation:fadeUp .6s .06s cubic-bezier(.25,.1,.25,1) both}
.screen-install .sub{animation:fadeUp .6s .12s cubic-bezier(.25,.1,.25,1) both}
.screen-install .install-bar{animation:fadeUp .6s .18s cubic-bezier(.25,.1,.25,1) both}
.screen-install .usecases{animation:fadeUp .7s .3s cubic-bezier(.25,.1,.25,1) both}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .uc-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .desk-decor{display:none}
}
@media (max-width:700px){
  .nav-links > a:not(.nav-pill){display:none}
  .screen{min-height:auto;padding:64px 20px 56px}
  .screen-install{padding-top:84px}
  .usecases{margin-top:60px}
}
@media (max-width:620px){
  .install-bar{
    flex-direction:column;align-items:stretch;
    border-radius:22px;padding:8px;width:min(420px,100%);
  }
  .install-label{justify-content:center}
  .install-menu{left:8px;right:8px;min-width:0}
  .uc-grid{grid-template-columns:1fr}
  .demo-modal{padding:12px}
  .demo-body{grid-template-columns:1fr}
  .demo-side{display:none}
  .demo-main{min-height:300px;padding:18px;font-size:11.5px}
  .foot-inner{justify-content:center;text-align:center}
}