/* ============================================================
   05 · 第一个像素 — 纸 / 浏览器 / 部署
   ============================================================ */

.scene--web{
  background:#F3EEE5;
  color:#1C1712;
  --sh-line:rgba(28,23,18,.20);
  --sh-num:#B0661F;
  --sh-dim:#6F6353;
  --sh-title:#14100C;
  --prose-lead:#14100C;
  --prose-em:#B0661F;
  --prose-hl:rgba(201,123,46,.20);
}
.web-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.web-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(40,60,80,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,60,80,.055) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 80% 70% at 55% 30%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 55% 30%,#000,transparent 80%);
}
.web-glow{
  position:absolute;width:55vw;height:55vw;right:-12vw;top:-16vw;
  background:radial-gradient(circle,rgba(201,123,46,.16),transparent 66%);
  filter:blur(50px);
}

.web-layout{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(34px,4.6vw,66px);
  margin-top:clamp(44px,6.4vh,72px);
  align-items:start;
}
.web-prose{max-width:30em;padding-top:4px}
.web-demo{display:flex;flex-direction:column;gap:22px}

/* ---------- 浏览器 ---------- */
.web-browser{
  background:#FFFFFF;
  border:1px solid #2B241B;
  border-radius:6px;
  overflow:hidden;
  box-shadow:
    12px 12px 0 rgba(28,23,18,.07),
    0 30px 60px -40px rgba(28,23,18,.5);
}
.web-chrome{
  height:38px;display:flex;align-items:center;gap:14px;
  padding:0 12px;
  background:linear-gradient(180deg,#F4F0E8,#E9E3D8);
  border-bottom:1px solid #D6CDBD;
}
.web-dots{display:flex;gap:5px}
.web-dots i{width:8px;height:8px;border-radius:50%;background:#C9BEAC;display:block}
.web-dots i:nth-child(1){background:#D98A72}
.web-dots i:nth-child(2){background:#D9BE72}
.web-dots i:nth-child(3){background:#94B47C}
.web-url{
  flex:1;height:24px;display:flex;align-items:center;gap:7px;
  padding:0 9px;
  background:#fff;border:1px solid #D8D0C2;border-radius:3px;
  font-family:var(--f-mono);font-size:9px;color:#4D4538;
  min-width:0;
}
.web-url svg{width:10px;height:10px;stroke:#8E8371;stroke-width:1.8;flex:none}
.web-url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web-url em{
  margin-left:auto;font-size:7.5px;letter-spacing:.08em;
  color:#8A7D6B;border:1px solid #DDD4C4;padding:1px 5px;border-radius:2px;
  transition:color .3s,border-color .3s,background .3s;
}
.web-url em.is-live{color:#2E6B3E;border-color:#A9C9AF;background:#EDF6EE}
.web-more{color:#8A7D6B;font-size:14px;letter-spacing:.1em}

.web-view{position:relative;background:#FAF7F0;height:392px;overflow:hidden}
.web-mini{
  padding:30px 34px;
  height:100%;
  display:flex;flex-direction:column;
  position:relative;
  transition:box-shadow .4s;
}
.web-mini.is-live{box-shadow:inset 0 0 0 3px rgba(46,107,62,.28)}
.web-mini-nav{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:12px;border-bottom:1px solid rgba(28,23,18,.16);
  font-family:var(--f-serif);font-size:12px;letter-spacing:.02em;
}
.web-mini-nav span{font-family:var(--f-mono);font-size:8px;letter-spacing:.1em;color:#8A7D6B}
.web-mini-kicker{
  margin-top:26px;
  font-family:var(--f-mono);font-size:7.5px;letter-spacing:.22em;color:#B0661F;
}
.web-mini h3{
  font-family:var(--f-serif);font-weight:300;
  font-size:clamp(26px,3.2vw,40px);line-height:1.24;letter-spacing:-.01em;
  margin-top:10px;color:#14100C;
}
.web-mini-p{
  margin-top:12px;font-size:11.5px;line-height:1.85;color:#6B6053;max-width:28em;
}
.web-mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.web-mini-cards i{
  display:block;height:62px;
  background:linear-gradient(160deg,#EDE6D9,#E4DACB);
  border:1px solid #DED3C0;
  position:relative;
}
.web-mini-cards i::after{
  content:"";position:absolute;left:8px;right:8px;bottom:8px;height:1px;background:#C9BCA6;
}
.web-mini-cards i:nth-child(2){background:linear-gradient(160deg,#E9E0CF,#DCD0BB)}
.web-mini-foot{
  margin-top:auto;padding-top:16px;
  font-family:var(--f-mono);font-size:7.5px;letter-spacing:.1em;color:#A2957F;
}
.web-scan{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(201,123,46,.06),transparent);
  transform:translateY(-100%);
}
.web-browser.is-live .web-scan{animation:webScan 1.1s var(--ease) .1s}
@keyframes webScan{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(100%)}
}

/* ---------- 部署 ---------- */
.web-pipeline{
  background:#FBF7EF;
  border:1px solid #D8CDBB;
  padding:16px 18px 14px;
  box-shadow:8px 8px 0 rgba(28,23,18,.04);
}
.web-pipe-head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding-bottom:12px;border-bottom:1px solid #E4DACA;
}
.web-pipe-head p{display:flex;align-items:center;gap:10px;min-width:0}
.web-pipe-head .label{color:#8A7D6B}
.web-pipe-head b{
  font-family:var(--f-mono);font-size:9px;font-weight:400;color:#8A7D6B;
  letter-spacing:.04em;
  transition:color .3s;
}
.web-pipe-head b.is-done{color:#2E6B3E}
.web-btn{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;
  background:#1C1712;color:#F7F2E8;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;
  transition:background .25s,transform .25s var(--ease);
  white-space:nowrap;
}
.web-btn svg{width:11px;height:11px;stroke-width:1.6;transition:transform .3s var(--ease)}
.web-btn:hover{background:#B0661F;transform:translate(-1px,-1px)}
.web-btn:hover svg{transform:translate(2px,-2px)}
.web-btn:disabled{opacity:.6;pointer-events:none}
.web-steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;margin-top:14px;
}
.web-steps li{
  position:relative;padding-right:14px;
  display:flex;flex-direction:column;gap:4px;
}
.web-steps li::before{
  content:"";position:absolute;left:0;right:100%;top:-14px;height:1px;
  background:#D8CDBB;
  transition:right .3s;
}
.web-steps li b{
  font-family:var(--f-serif);font-size:13px;font-weight:400;color:#2A231B;
  display:flex;align-items:center;gap:6px;
}
.web-steps li span{
  font-family:var(--f-mono);font-size:7.5px;letter-spacing:.02em;
  color:#6F6353;display:flex;align-items:center;gap:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.web-steps li span img{width:10px;height:10px;object-fit:contain}
.web-steps li i{
  position:absolute;left:0;top:-18px;width:7px;height:7px;
  border:1px solid #C9BEAC;background:#FBF7EF;border-radius:50%;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.web-steps li.is-active i{border-color:#B0661F;background:#E9B77C;box-shadow:0 0 0 4px rgba(201,123,46,.14)}
.web-steps li.is-done i{border-color:#2E6B3E;background:#2E6B3E;box-shadow:none}
.web-steps li.is-done span{color:#5B6F58}
.web-steps li.is-done b::after{content:"✓";color:#2E6B3E;font-size:10px}

/* ---------- 项目 ---------- */
.web-projects{margin-top:clamp(64px,9vh,104px)}
.web-projects-title{
  display:flex;align-items:baseline;gap:22px;
  padding-top:16px;border-top:1px solid rgba(28,23,18,.22);
  font-family:var(--f-serif);font-size:15px;color:#4A4034;
}
.web-projects-title .label{color:#B0661F;flex:none;padding-top:2px}
.web-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,40px);
  margin-top:26px;
}
.web-card{
  border-top:2px solid #1C1712;
  padding:16px 2px 22px;
  position:relative;
  transition:transform .4s var(--ease),background .4s,box-shadow .4s;
}
.web-card::after{
  content:"";position:absolute;left:0;top:-2px;height:2px;width:0;
  background:#B0661F;transition:width .5s var(--ease);
}
.web-card:hover{transform:translateY(-5px);background:#FBF7EF;box-shadow:8px 10px 0 rgba(28,23,18,.05)}
.web-card:hover::after{width:100%}
.web-card-num{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;color:#B0661F;
}
.web-card h3{
  font-family:var(--f-serif);font-weight:400;font-size:22px;line-height:1.35;
  margin-top:9px;color:#14100C;letter-spacing:-.01em;
}
.web-card p{margin-top:9px;font-size:12.5px;line-height:1.85;color:#655A4C}
.web-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:16px}
.web-tags span{
  font-family:var(--f-mono);font-size:7.5px;letter-spacing:.04em;
  color:#6B5F50;border:1px solid #D6CAB6;padding:2.5px 6px;
  background:rgba(255,255,255,.4);
}

@media (max-width:1100px){
  .web-layout{grid-template-columns:1fr;gap:44px}
  .web-prose{max-width:38em}
  .web-browser{max-width:720px}
  .web-view{height:360px}
}
@media (max-width:860px){
  .web-cards{grid-template-columns:1fr;gap:6px}
  .web-card{padding-bottom:18px}
  .web-card p{max-width:42em}
}
@media (max-width:620px){
  .web-view{height:320px}
  .web-mini{padding:20px 18px}
  .web-mini h3{font-size:26px}
  .web-mini-cards i{height:46px}
  .web-steps{grid-template-columns:1fr 1fr;row-gap:20px}
  .web-steps li::before{display:none}
  .web-steps li i{position:static;display:none}
  .web-projects-title{flex-direction:column;gap:6px}
  .web-browser{box-shadow:6px 6px 0 rgba(28,23,18,.06)}
}