:root{
  color-scheme:light;--bg:#f6f8fb;--surface:rgba(255,255,255,.84);--surface-solid:#fff;--surface-2:#edf2f7;
  --text:#171a1f;--muted:#626a73;--faint:#9098a3;--line:rgba(25,36,48,.12);--line-strong:rgba(25,36,48,.22);
  --blue:#0b57d0;--green:#188038;--violet:#6f5ed3;--orange:#b45f06;--header:rgba(246,248,251,.76);
  --shadow:0 24px 70px rgba(34,45,58,.09);--accent:var(--blue)
}
html[data-theme=dark]{color-scheme:dark;--bg:#0c0f13;--surface:rgba(21,25,31,.86);--surface-solid:#15191f;--surface-2:#10151b;
  --text:#edf1f5;--muted:#9ca5af;--faint:#69737f;--line:rgba(232,238,244,.11);--line-strong:rgba(232,238,244,.22);
  --blue:#8ab4f8;--green:#69d18e;--violet:#b7a9ff;--orange:#f2b568;--header:rgba(12,15,19,.76);--shadow:0 28px 78px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;min-width:320px;overflow-x:clip;background:var(--bg);color:var(--text);
  font-family:Inter,"Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{font:inherit}::selection{background:var(--blue);color:#fff}.shell{width:min(1180px,calc(100% - 44px));margin-inline:auto}
.site-header{position:fixed;z-index:100;top:12px;left:50%;transform:translateX(-50%);width:min(1160px,calc(100% - 28px));min-height:60px;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 10px 8px 13px;border:1px solid transparent;border-radius:15px;
  transition:background .25s ease,border-color .25s ease,top .25s ease,box-shadow .25s ease}
.site-header.is-scrolled{top:8px;background:var(--header);border-color:var(--line);box-shadow:0 8px 30px rgba(0,0,0,.07);backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25)}
.brand{display:inline-flex;align-items:center;gap:9px;width:max-content;font-size:13px;font-weight:780;letter-spacing:.09em}.brand img{width:35px;height:35px;object-fit:contain}
.brand-sub{color:var(--muted);font-weight:620;letter-spacing:.04em}.nav{display:flex;align-items:center;gap:2px}.nav a,.theme-toggle,.header-home{min-height:40px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 12px;border-radius:9px;font-size:13px;font-weight:650;color:var(--muted)}.nav a:hover,.theme-toggle:hover,.header-home:hover{background:var(--surface);color:var(--text)}
.header-actions{justify-self:end;display:flex;gap:6px;align-items:center}.theme-toggle{width:40px;border:0;background:transparent;cursor:pointer;padding:0}.theme-glyph{width:18px;height:18px;border:1.6px solid currentColor;border-radius:50%;position:relative;overflow:hidden}
.theme-glyph::after{content:"";position:absolute;inset:-2px 50% -2px -2px;background:currentColor}.theme-toggle[data-mode=light] .theme-glyph::after{inset:4px;border-radius:50%}
.theme-toggle[data-mode=dark] .theme-glyph::after{inset:-2px -2px -2px 50%}.header-home{border:1px solid var(--line);color:var(--text)}
.index-hero{min-height:88svh;display:grid;align-items:center;position:relative;overflow:hidden;padding-top:76px}.index-hero::before{content:"";position:absolute;width:62vw;aspect-ratio:1;border-radius:50%;right:-20vw;top:-24vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--blue) 19%,transparent),transparent 66%);pointer-events:none}.hero-grid{position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,transparent 8%,#000 45%,transparent 92%)}
.index-kicker,.section-label,.project-kind,.detail-kicker{margin:0;font-size:11px;font-weight:780;letter-spacing:.18em;text-transform:uppercase}.index-kicker,.detail-kicker{color:var(--blue);margin-bottom:18px}
.index-title{margin:0;max-width:1050px;font-size:clamp(76px,12.4vw,176px);line-height:.84;letter-spacing:-.075em;font-weight:850}.index-copy{margin:34px 0 0 auto;max-width:620px;color:var(--muted);font-size:clamp(17px,1.7vw,22px);line-height:1.55}
.hero-meta{margin-top:42px;display:flex;gap:10px;flex-wrap:wrap}.meta-pill{min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;display:inline-flex;align-items:center;color:var(--muted);font-size:12px;font-weight:650}
.project-index{padding:72px 0 150px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:34px}.section-label{color:var(--blue)}.section-head h2{margin:8px 0 0;font-size:clamp(38px,5vw,66px);line-height:1;letter-spacing:-.05em}
.project-list{display:grid;gap:16px}.project-card{--accent:var(--blue);min-height:370px;position:relative;overflow:hidden;display:grid;grid-template-columns:1.12fr .88fr;border:1px solid var(--line);
  border-radius:18px;background:var(--surface);box-shadow:var(--shadow);transition:transform .3s ease,border-color .3s ease}.project-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 38%,var(--line))}
.project-card[data-project=cid]{--accent:var(--blue)}.project-card[data-project=argosfs]{--accent:var(--green)}.project-card[data-project=capos]{--accent:var(--violet)}.project-card[data-project=cachereforge]{--accent:var(--orange)}
.project-copy{position:relative;z-index:2;padding:clamp(30px,5vw,52px);display:flex;flex-direction:column;justify-content:space-between}.project-kind{color:var(--accent)}.project-number{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.project-topline{display:flex;justify-content:space-between;align-items:center}.project-card h3{margin:30px 0 14px;font-size:clamp(42px,5.4vw,74px);line-height:.95;letter-spacing:-.055em}.project-summary{margin:0;max-width:680px;color:var(--muted);font-size:15px;line-height:1.72}
.project-action{margin-top:22px;font-size:13px;font-weight:720;color:var(--accent)}.project-visual{position:relative;min-height:100%;background:color-mix(in srgb,var(--accent) 3%,transparent);overflow:hidden}.project-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--surface),transparent 28%);pointer-events:none}
.cid-visual .channel{position:absolute;left:18%;right:12%;height:20%;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:14px}.cid-visual .channel::before{content:attr(data-label);position:absolute;left:14px;top:10px;font-size:10px;font-weight:780;letter-spacing:.18em;color:var(--accent)}
.cid-visual .channel:nth-child(1){top:14%;transform:translateX(-10%)}.cid-visual .channel:nth-child(2){top:40%;transform:translateX(4%)}.cid-visual .channel:nth-child(3){top:66%;transform:translateX(-2%)}.cid-visual .channel i{position:absolute;top:50%;left:24%;right:12%;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.argos-visual .disk{position:absolute;left:22%;width:58%;height:17%;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:50%}.argos-visual .disk::after{content:"";position:absolute;inset:14% 4%;border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);border-radius:50%}
.argos-visual .disk:nth-child(1){top:18%}.argos-visual .disk:nth-child(2){top:35%;left:28%}.argos-visual .disk:nth-child(3){top:52%;left:18%}.argos-visual .disk:nth-child(4){top:69%;left:26%}.argos-visual .rail{position:absolute;top:16%;bottom:13%;width:1px;background:linear-gradient(transparent,var(--accent),transparent);opacity:.45}.argos-visual .rail.a{left:32%}.argos-visual .rail.b{right:31%}
.capos-visual .desktop{position:absolute;inset:16% 12% 16% 17%;border:1px solid color-mix(in srgb,var(--accent) 46%,transparent);border-radius:16px;overflow:hidden}.capos-visual .desktop::before{content:"";position:absolute;left:0;right:0;top:0;height:18%;border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.capos-visual .desktop::after{content:"";position:absolute;left:8%;top:30%;width:38%;height:47%;border:1px solid color-mix(in srgb,var(--accent) 31%,transparent);border-radius:9px;box-shadow:94px 0 0 -1px color-mix(in srgb,var(--accent) 5%,transparent),94px 0 0 0 color-mix(in srgb,var(--accent) 28%,transparent)}
.cache-visual .layer{position:absolute;left:19%;right:16%;height:13%;border:1px solid color-mix(in srgb,var(--accent) 46%,transparent);transform:skewX(-18deg);border-radius:8px;background:color-mix(in srgb,var(--accent) 4%,transparent)}.cache-visual .layer:nth-child(1){top:18%}.cache-visual .layer:nth-child(2){top:34%;left:25%}.cache-visual .layer:nth-child(3){top:50%;left:16%}.cache-visual .layer:nth-child(4){top:66%;left:23%}
.cache-visual .restart{position:absolute;right:17%;top:15%;bottom:13%;width:2px;background:linear-gradient(transparent,var(--accent) 18% 80%,transparent)}.cache-visual .restart::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);left:50%;top:47%;transform:translate(-50%,-50%);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 11%,transparent)}
.detail-page{padding-top:82px}.detail-page[data-project=cid]{--accent:var(--blue)}.detail-page[data-project=argosfs]{--accent:var(--green)}.detail-page[data-project=capos]{--accent:var(--violet)}.detail-page[data-project=cachereforge]{--accent:var(--orange)}
.detail-hero{min-height:74svh;position:relative;overflow:hidden;display:grid;align-items:center;border-bottom:1px solid var(--line)}.detail-hero::before{content:"";position:absolute;width:min(62vw,860px);aspect-ratio:1;right:-20vw;top:-24vw;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 21%,transparent),transparent 66%)}
.detail-hero-inner{position:relative;z-index:2;padding:68px 0 74px}.back-link{display:inline-flex;gap:8px;align-items:center;color:var(--muted);font-size:13px;font-weight:650;margin-bottom:34px}.detail-kicker{color:var(--accent)}.detail-title{margin:0;max-width:1050px;font-size:clamp(66px,10vw,146px);line-height:.86;letter-spacing:-.07em;font-weight:850}.detail-subtitle{margin:22px 0 0;max-width:800px;color:var(--muted);font-size:clamp(18px,2vw,24px);line-height:1.5}
.resource-row{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px}.resource-link{min-height:44px;padding:0 15px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;font-size:13px;font-weight:700;background:var(--surface);transition:transform .2s ease,border-color .2s ease}
.resource-link.primary{background:var(--accent);color:#fff;border-color:var(--accent)}html[data-theme=dark] .resource-link.primary{color:#0b0e12}.resource-link:hover{transform:translateY(-1px);border-color:var(--line-strong)}
.detail-body{padding:88px 0 140px}.fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:84px}.fact{min-height:126px;padding:20px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}.fact-label{display:block;color:var(--faint);font-size:10px;font-weight:760;letter-spacing:.16em;text-transform:uppercase;margin-bottom:21px}.fact-value{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em}
.content-grid{display:grid;grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);gap:78px;margin-top:66px}.content-nav{position:sticky;top:110px;align-self:start}.content-nav .section-label{margin-bottom:10px}.content-nav h2{margin:0;font-size:clamp(36px,4vw,58px);line-height:1;letter-spacing:-.045em}
.prose{display:grid;gap:52px}.prose-section{border-top:1px solid var(--line);padding-top:27px}.prose-section h3{margin:0 0 14px;font-size:clamp(25px,3vw,38px);line-height:1.1;letter-spacing:-.035em}.prose-section p{margin:0;color:var(--muted);font-size:16px;max-width:780px}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.feature{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.feature strong{display:block;margin-bottom:7px;font-size:14px}.feature span{color:var(--muted);font-size:13px}
.architecture{min-height:320px;position:relative;overflow:hidden;margin-top:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}.architecture .arch-label{position:absolute;left:20px;top:18px;color:var(--faint);font-size:10px;letter-spacing:.16em;font-weight:760}
.cid-arch .lane{position:absolute;left:8%;right:8%;height:18%;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:12px}.cid-arch .lane:nth-of-type(1){top:20%}.cid-arch .lane:nth-of-type(2){top:43%}.cid-arch .lane:nth-of-type(3){top:66%}.cid-arch .lane::after{content:"";position:absolute;left:10%;right:10%;top:50%;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.argos-arch::after{content:"";position:absolute;left:10%;right:10%;top:51%;height:1px;background:color-mix(in srgb,var(--accent) 38%,transparent)}.argos-arch .node{position:absolute;width:76px;height:76px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:50%;background:var(--surface-solid)}
.argos-arch .n1{left:12%;top:35%}.argos-arch .n2{left:36%;top:22%}.argos-arch .n3{left:58%;top:49%}.argos-arch .n4{right:10%;top:30%}
.capos-arch .frame{position:absolute;inset:18% 10%;border:1px solid color-mix(in srgb,var(--accent) 47%,transparent);border-radius:16px}.capos-arch .frame::before{content:"";position:absolute;left:0;right:0;top:16%;height:1px;background:color-mix(in srgb,var(--accent) 32%,transparent)}
.capos-arch .pane{position:absolute;top:34%;height:42%;border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);border-radius:10px}.capos-arch .p1{left:16%;width:31%}.capos-arch .p2{right:16%;width:31%}
.cache-arch .block{position:absolute;left:12%;right:16%;height:15%;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);transform:skewX(-18deg);border-radius:8px}.cache-arch .b1{top:18%}.cache-arch .b2{top:38%;left:20%}.cache-arch .b3{top:58%;left:14%}.cache-arch .marker{position:absolute;right:15%;top:13%;bottom:13%;width:2px;background:var(--accent);opacity:.7}
.site-footer{border-top:1px solid var(--line)}.footer-inner{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--muted);font-size:12px}.footer-brand{display:flex;align-items:center;gap:9px;color:var(--text);font-weight:740;letter-spacing:.09em}.footer-brand img{width:27px;height:27px;object-fit:contain}.footer-links{display:flex;gap:18px;flex-wrap:wrap}.footer-links a:hover{color:var(--text)}
.has-js .reveal{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .75s cubic-bezier(.2,.7,.2,1)}.has-js .reveal.is-visible{opacity:1;transform:none}
@media(max-width:900px){.site-header{grid-template-columns:1fr auto}.nav{display:none}.project-card{grid-template-columns:1fr}.project-visual{min-height:240px}.project-visual::after{background:linear-gradient(180deg,var(--surface),transparent 28%)}.fact-grid{grid-template-columns:1fr 1fr}.content-grid{grid-template-columns:1fr;gap:36px}.content-nav{position:static}}
@media(max-width:600px){.shell{width:calc(100% - 28px)}.site-header{top:8px;width:calc(100% - 16px);min-height:56px;padding:6px 7px 6px 10px}.brand img{width:33px;height:33px}.brand-sub{display:none}.header-home{padding:0 10px}.index-hero{min-height:80svh;padding-top:70px}.index-title{font-size:clamp(64px,21vw,96px)}.index-copy{margin-top:26px;font-size:17px}.project-index{padding:60px 0 100px}.section-head{align-items:start;flex-direction:column}.project-card{min-height:560px}.project-copy{padding:26px}.project-card h3{font-size:44px;margin-top:24px}.project-summary{font-size:14px}.project-visual{min-height:220px}.detail-page{padding-top:72px}.detail-hero{min-height:auto}.detail-hero-inner{padding:48px 0 60px}.detail-title{font-size:clamp(56px,18vw,84px)}.detail-subtitle{font-size:17px}.detail-body{padding:68px 0 100px}.fact-grid{grid-template-columns:1fr;margin-bottom:60px}.fact{min-height:104px}.feature-list{grid-template-columns:1fr}.architecture{min-height:260px}.footer-inner{min-height:125px;flex-direction:column;align-items:flex-start;justify-content:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}.has-js .reveal{opacity:1;transform:none}}
/* CapOS project page */
.capos-detail-hero {
  min-height: 86svh;
}

.capos-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr);
  gap: clamp(42px,6vw,86px);
  align-items: center;
  padding-top: 64px;
  padding-bottom: 66px;
}

.capos-hero-copy .detail-subtitle {
  max-width: 720px;
}

.capos-desktop-preview {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--accent) 38%,var(--line));
  border-radius: 20px;
  background:
    radial-gradient(circle at 84% 10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 34%),
    var(--surface);
  box-shadow: var(--shadow);
  transform: perspective(1100px) rotateY(-7deg) rotateX(2deg);
}

.capos-preview-bar {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb,var(--surface-solid) 52%,transparent);
}

.capos-preview-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb,var(--accent) 48%,var(--line-strong));
}

.capos-preview-title {
  margin-left: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .08em;
}

.capos-preview-main {
  display: grid;
  grid-template-columns: 64px 1fr;
  min-height: 365px;
}

.capos-preview-dock {
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border-right: 1px solid var(--line);
}

.capos-preview-dock i {
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  border-radius: 8px;
  background: color-mix(in srgb,var(--accent) 6%,transparent);
}

.capos-preview-workspace {
  position: relative;
  min-width: 0;
  padding: 26px;
}

.capos-preview-card {
  position: absolute;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb,var(--surface-solid) 88%,transparent);
  box-shadow: 0 18px 42px rgba(0,0,0,.08);
}

.capos-preview-card small {
  display: block;
  margin-bottom: 17px;
  color: var(--faint);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .17em;
}

.capos-preview-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 20px;
  letter-spacing: -.03em;
}

.capos-preview-card span {
  color: var(--muted);
  font-size: 11px;
}

.card-status {
  left: 8%;
  top: 10%;
  width: 45%;
  height: 128px;
}

.card-apps {
  right: 5%;
  top: 28%;
  width: 43%;
  height: 146px;
}

.card-network {
  left: 14%;
  right: 16%;
  bottom: 8%;
  height: 104px;
}

.mini-chart {
  height: 42px;
  display: flex;
  align-items: end;
  gap: 8px;
}

.mini-chart i {
  flex: 1;
  min-width: 8px;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb,var(--accent) 52%,transparent);
}

.mini-chart i:nth-child(1){height:28%}
.mini-chart i:nth-child(2){height:62%}
.mini-chart i:nth-child(3){height:45%}
.mini-chart i:nth-child(4){height:84%}
.mini-chart i:nth-child(5){height:68%}

.capos-detail-body {
  padding-top: 78px;
}

.capos-intro {
  display: grid;
  grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr);
  gap: clamp(44px,8vw,110px);
  align-items: end;
  padding: 18px 0 70px;
}

.capos-intro h2,
.capos-deployment-head h2,
.capos-reference h2 {
  margin: 8px 0 0;
  font-size: clamp(40px,5.4vw,72px);
  line-height: .98;
  letter-spacing: -.055em;
}

.capos-intro > p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.capos-stack {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.capos-stack-row {
  min-height: 104px;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 18px 26px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.capos-stack-row:last-child { border-bottom: 0; }

.capos-stack-row::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background: color-mix(in srgb,var(--accent) 60%,transparent);
  opacity: .3;
}

.capos-stack-row:nth-child(1)::before{opacity:.95}
.capos-stack-row:nth-child(2)::before{opacity:.72}
.capos-stack-row:nth-child(3)::before{opacity:.50}
.capos-stack-row:nth-child(4)::before{opacity:.30}

.stack-index {
  color: var(--faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.capos-stack-row strong {
  display:block;
  font-size: 20px;
  letter-spacing: -.025em;
}

.capos-stack-row small {
  color: var(--muted);
  font-size: 13px;
}

.capos-stack-row b {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--faint);
  font-size: 9px;
  letter-spacing: .14em;
}

.capos-bento {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: 14px;
  margin-top: 88px;
}

.capos-panel {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
}

.panel-web { grid-column: span 7; min-height: 430px; }
.panel-apps { grid-column: span 5; }
.panel-compat { grid-column: span 5; }
.panel-rootfs { grid-column: span 7; }

.panel-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 56px;
}

.panel-heading span,
.panel-heading p {
  margin:0;
  color:var(--faint);
  font-size:10px;
  font-weight:760;
  letter-spacing:.16em;
}

.capos-panel h3 {
  margin:0 0 12px;
  max-width:540px;
  font-size:clamp(30px,3.8vw,52px);
  line-height:1;
  letter-spacing:-.045em;
}

.capos-panel > p {
  margin:0;
  max-width:600px;
  color:var(--muted);
  font-size:14px;
}

.capos-panel code,
.deployment-card code {
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;
}

.panel-window {
  position:absolute;
  width:46%;
  height:44%;
  right:28px;
  bottom:26px;
  border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));
  border-radius:11px;
  overflow:hidden;
  opacity:.7;
}

.panel-window-bar {
  height:20%;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  background:color-mix(in srgb,var(--accent) 5%,transparent);
}

.panel-window-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  padding:12px;
}

.panel-window-grid i {
  aspect-ratio:1.7;
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  border-radius:6px;
}

.app-flow {
  position:absolute;
  left:28px;
  right:28px;
  bottom:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.app-flow span {
  padding:8px 10px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-radius:7px;
  font-size:10px;
  color:var(--muted);
  white-space:nowrap;
}

.app-flow i {
  flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--line),var(--accent),var(--line));
}

.compat-lines {
  position:absolute;
  right:28px;
  bottom:28px;
  width:42%;
  height:96px;
}

.compat-lines i {
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.5;
}

.compat-lines i:nth-child(1){top:18%;transform:rotate(-8deg)}
.compat-lines i:nth-child(2){top:50%}
.compat-lines i:nth-child(3){top:82%;transform:rotate(8deg)}

.rootfs-layers {
  position:absolute;
  width:44%;
  right:28px;
  bottom:22px;
  height:128px;
}

.rootfs-layers i {
  position:absolute;
  left:5%;
  right:0;
  height:38px;
  border:1px solid color-mix(in srgb,var(--accent) 36%,var(--line));
  border-radius:8px;
  transform:skewX(-14deg);
  background:color-mix(in srgb,var(--accent) 4%,transparent);
}

.rootfs-layers i:nth-child(1){top:0}
.rootfs-layers i:nth-child(2){top:38px;left:13%}
.rootfs-layers i:nth-child(3){top:76px;left:2%}

.capos-deployment {
  margin-top: 110px;
}

.capos-deployment-head {
  margin-bottom: 34px;
}

.deployment-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.deployment-card {
  min-height:320px;
  padding:30px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
}

.deployment-tag {
  width:max-content;
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:7px;
  color:var(--faint);
  font-size:9px;
  font-weight:760;
  letter-spacing:.16em;
}

.deployment-card h3 {
  margin:58px 0 12px;
  font-size:clamp(32px,4vw,50px);
  letter-spacing:-.045em;
  line-height:1;
}

.deployment-card p {
  margin:0;
  color:var(--muted);
  max-width:540px;
}

.deployment-card code {
  display:block;
  margin-top:auto;
  padding-top:28px;
  color:var(--accent);
  line-height:1.8;
}

.capos-reference {
  margin-top:110px;
  padding-top:34px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);
  gap:70px;
}

.reference-list {
  border-top:1px solid var(--line);
}

.reference-list > div {
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line);
}

.reference-list span {
  color:var(--muted);
  font-size:13px;
}

.reference-list strong {
  font-size:14px;
  text-align:right;
}

@media(max-width:980px){
  .capos-hero-grid {
    grid-template-columns:1fr;
    padding-top:54px;
  }
  .capos-desktop-preview {
    min-height:360px;
    transform:none;
  }
  .capos-intro {
    grid-template-columns:1fr;
    gap:24px;
  }
  .panel-web,.panel-apps,.panel-compat,.panel-rootfs {
    grid-column:span 6;
  }
  .capos-reference {
    grid-template-columns:1fr;
    gap:30px;
  }
}

@media(max-width:640px){
  .capos-detail-hero { min-height:auto; }
  .capos-hero-grid { padding:42px 0 54px; }
  .capos-desktop-preview { min-height:310px; border-radius:15px; }
  .capos-preview-main { grid-template-columns:48px 1fr; min-height:256px; }
  .capos-preview-dock i { width:22px; height:22px; }
  .capos-preview-workspace { padding:16px; }
  .capos-preview-card { padding:12px; }
  .card-status { left:5%; width:48%; height:98px; }
  .card-apps { right:4%; width:47%; height:112px; }
  .card-network { left:8%; right:8%; height:80px; }
  .capos-facts { margin-bottom:54px; }
  .capos-intro { padding-bottom:48px; }
  .capos-intro h2,.capos-deployment-head h2,.capos-reference h2 { font-size:40px; }
  .capos-stack-row {
    grid-template-columns:34px 1fr;
    gap:12px;
    padding:17px 16px;
  }
  .capos-stack-row b { display:none; }
  .capos-stack-row strong { font-size:17px; }
  .capos-stack-row small { font-size:12px; }
  .capos-bento { grid-template-columns:1fr; margin-top:64px; }
  .panel-web,.panel-apps,.panel-compat,.panel-rootfs {
    grid-column:1;
    min-height:360px;
  }
  .panel-heading { margin-bottom:42px; }
  .panel-window,.compat-lines,.rootfs-layers { opacity:.45; }
  .panel-window { width:55%; }
  .app-flow { gap:5px; }
  .app-flow span { padding:7px 7px; font-size:9px; }
  .deployment-grid { grid-template-columns:1fr; }
  .capos-deployment { margin-top:78px; }
  .deployment-card { min-height:280px; }
  .capos-reference { margin-top:78px; }
  .reference-list > div { align-items:flex-start; flex-direction:column; justify-content:center; gap:3px; padding:12px 0; }
  .reference-list strong { text-align:left; }
}