.cms-case { --cms-green:#61daba; --cms-cyan:#89d9ff; --cms-paper:#e6e1d7; }
.cms-hero h1 { font-size:clamp(4.9rem,12.8vw,11.5rem); }

.cms-stage { position:relative; min-height:min(80vw,940px); overflow:hidden; border-block:1px solid var(--line); background:radial-gradient(circle at 48% 40%,#18352f 0,#101a18 28%,#0b0d0d 64%,#080909 100%); }
.cms-stage::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:4.5vw 4.5vw; mask-image:linear-gradient(to bottom,transparent 2%,black 18%,black 82%,transparent 98%); }
.cms-authority-shell { position:absolute; left:50%; top:50%; width:min(88vw,1240px); height:min(58vw,650px); transform:translate(-50%,-50%); display:grid; grid-template-columns:72px repeat(4,1fr); gap:clamp(.7rem,1.5vw,1.4rem); align-items:stretch; }
.authority-spine { display:grid; grid-template-rows:auto repeat(4,1fr); justify-items:center; color:rgba(255,255,255,.34); font:500 .5rem/1 monospace; letter-spacing:.14em; writing-mode:vertical-rl; transform:rotate(180deg); padding:.8rem 0; }
.authority-spine i { width:1px; height:100%; background:linear-gradient(to bottom,rgba(97,218,186,.15),rgba(97,218,186,.75),rgba(97,218,186,.15)); }
.authority-card { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; padding:clamp(1rem,2vw,2rem); border:1px solid rgba(255,255,255,.11); background:rgba(12,14,14,.72); backdrop-filter:blur(18px); box-shadow:0 24px 80px rgba(0,0,0,.28); }
.authority-card::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:var(--cms-green); opacity:.75; }
.authority-card small { position:absolute; top:1.2rem; left:1.2rem; color:rgba(255,255,255,.38); font:.54rem monospace; letter-spacing:.11em; }
.authority-card strong { font-family:var(--display); font-size:clamp(2.4rem,4.7vw,5.2rem); font-weight:400; letter-spacing:-.05em; }
.authority-card p { margin:.65rem 0 1.8rem; color:#aaa9a2; line-height:1.45; font-size:clamp(.72rem,1vw,.95rem); }
.authority-card > span { align-self:flex-start; padding:.48rem .55rem; border:1px solid rgba(255,255,255,.12); color:#c2bdb4; font:.53rem monospace; letter-spacing:.08em; text-transform:uppercase; }
.authority-card.database::before { background:var(--cms-cyan); }.authority-card.projection::before { background:#ffc44d; }.authority-card.host::before { background:#ff7952; }
.authority-flow { position:absolute; left:calc(72px + .7rem); right:0; bottom:-58px; display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; color:rgba(255,255,255,.35); font:.55rem monospace; text-transform:uppercase; letter-spacing:.12em; }
.authority-flow span { display:flex; align-items:center; gap:.7rem; }.authority-flow span::before,.authority-flow span::after { content:""; height:1px; flex:1; background:rgba(97,218,186,.3); }

.authority-section { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); min-height:760px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.authority-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(4rem,8vw,8rem) var(--pad); border-right:1px solid var(--line); }
.authority-copy h2,.composer-copy h2 { margin:0 0 2rem; max-width:760px; font-family:var(--display); font-size:clamp(3.4rem,6.5vw,6.8rem); line-height:.9; letter-spacing:-.055em; font-weight:400; }
.authority-copy > p:not(.eyebrow),.composer-copy > p:not(.eyebrow) { max-width:620px; margin:0; color:#aaa49a; font-size:1.05rem; line-height:1.6; }
.authority-diagram { position:relative; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; align-content:center; padding:clamp(2rem,5vw,5rem); background:#0e1110; }
.authority-diagram::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at center,rgba(97,218,186,.09),transparent 55%); pointer-events:none; }
.source-node { position:relative; width:100%; max-width:330px; padding:1.5rem; border:1px solid rgba(97,218,186,.4); background:#101817; box-shadow:0 0 0 10px rgba(97,218,186,.03); }
.source-node small { color:#76cbb6; font:.65rem monospace; letter-spacing:.13em; }.source-node strong { display:block; margin-top:.65rem; font-family:var(--display); font-size:clamp(2rem,4vw,2.5rem); font-weight:400; }
.flow-line { position:relative; width:1px; height:3rem; background:linear-gradient(var(--cms-green),rgba(97,218,186,.2)); }
.projection-stack { position:relative; width:100%; max-width:330px; display:grid; gap:.55rem; }
.projection-stack span { padding:.8rem 1rem; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.025); color:#aaa49a; font:.7rem monospace; overflow-wrap:anywhere; }
.authority-diagram > p { position:relative; margin:1.5rem 0 0; color:#999; font:.65rem monospace; text-transform:uppercase; letter-spacing:.13em; }

.composer-section { padding:clamp(5rem,9vw,9rem) var(--pad); border-bottom:1px solid var(--line); background:#0c0d0d; }
.composer-copy { display:grid; grid-template-columns:.7fr 1.3fr; gap:7vw; align-items:end; max-width:var(--max); margin:0 auto clamp(3rem,6vw,5rem); }
.composer-copy .eyebrow { align-self:start; }
.composer-copy h2 { grid-column:2; grid-row:1 / span 2; margin-bottom:1.2rem; }
.composer-copy > p:not(.eyebrow) { grid-column:2; }
.composer-window { width:min(100%,1360px); margin:0 auto; border:1px solid rgba(255,255,255,.14); background:#f4f1eb; color:#171816; box-shadow:0 40px 120px rgba(0,0,0,.38); }
.composer-window > header { min-height:70px; display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center; padding:.9rem 1.1rem; border-bottom:1px solid #d0ccc4; background:#fbf9f5; }
.composer-window header div span { display:block; color:#5f6e68; font:.5rem monospace; letter-spacing:.12em; }.composer-window header strong { font-size:.8rem; }
.composer-window nav { display:flex; gap:.25rem; flex-wrap:wrap; }.composer-window nav b { padding:.5rem .65rem; color:#716d67; font-size:.61rem; font-weight:600; }.composer-window nav b.active { background:#17211e; color:white; }.composer-window header > i { font-style:normal; font-size:.62rem; color:#706d68; }
.composer-body { display:grid; grid-template-columns:260px 1fr; min-height:610px; }
.composer-body aside { padding:1.4rem; border-right:1px solid #d6d1c9; background:#ece9e2; }
.composer-body aside small,.composer-context > span,.fake-block small { color:#5d726b; font:.53rem monospace; letter-spacing:.12em; }.composer-body aside h3 { margin:.5rem 0 1.4rem; font-family:var(--display); font-size:1.7rem; font-weight:400; }.composer-body aside label { display:block; padding:.65rem; border:1px solid #cbc7bf; background:#f6f3ed; color:#929089; font-size:.62rem; }
.composer-body aside button { width:100%; display:flex; justify-content:space-between; margin-top:.55rem; padding:.72rem .65rem; border:0; background:transparent; color:#5f5d59; text-align:left; }.composer-body aside button.selected { background:white; color:#171816; box-shadow:0 2px 12px rgba(0,0,0,.06); }.composer-body aside > div { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin-top:1.4rem; }.composer-body aside > div b { padding:.65rem; border:1px solid #c9c4bc; font-size:.56rem; text-align:center; }
.composer-body main { min-width:0; background:#ddd9d1; }.composer-context { height:68px; display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:.65rem; padding:0 1rem; background:#f8f5ef; border-bottom:1px solid #d2cec6; }.composer-context strong { font-size:.72rem; }.composer-context div { justify-self:end; display:flex; gap:.4rem; }.composer-context b { padding:.5rem .6rem; border:1px solid #c9c5bd; font-size:.55rem; }.composer-context b.save { background:#17211e; color:white; border-color:#17211e; }
.page-frame { position:relative; margin:1.8rem; min-height:490px; padding:2rem 3rem; overflow:hidden; background:#101312; color:#f3efe8; box-shadow:0 20px 50px rgba(0,0,0,.16); }.fake-site-nav { color:#7f8984; font:.58rem monospace; letter-spacing:.1em; }.page-frame h4 { margin:5.2rem 0 1.1rem; font-family:var(--display); font-size:clamp(3rem,6vw,6rem); line-height:.82; letter-spacing:-.06em; font-weight:400; }.page-frame > p { max-width:430px; color:#a8aaa5; line-height:1.5; }.fake-block { position:absolute; left:2rem; right:2rem; bottom:2rem; display:flex; justify-content:space-between; align-items:center; padding:1rem; border:1px solid rgba(97,218,186,.5); background:rgba(97,218,186,.05); }.fake-block strong { font-size:.68rem; }

.cms-green { background:var(--cms-green); color:#0c1915; }.cms-paper { background:var(--cms-paper); color:#171614; }

@media (max-width:900px) {
  .cms-hero h1 { font-size:clamp(4.3rem,19vw,8rem); }
  .cms-stage { min-height:1050px; }
  .cms-authority-shell { width:86vw; height:auto; grid-template-columns:48px 1fr; top:47%; gap:.75rem; }
  .authority-spine { grid-row:1 / span 4; grid-template-rows:auto repeat(4,1fr); }.authority-card { min-height:180px; }.authority-flow { left:0; bottom:-54px; }
  .authority-section { grid-template-columns:1fr; }.authority-copy { border-right:0; border-bottom:1px solid var(--line); }.authority-diagram { min-height:0; }
  .composer-copy { grid-template-columns:1fr; }.composer-copy h2,.composer-copy > p:not(.eyebrow) { grid-column:1; grid-row:auto; }.composer-window > header { grid-template-columns:1fr auto; }.composer-window nav { grid-column:1 / -1; grid-row:2; }.composer-body { grid-template-columns:190px 1fr; }.page-frame { padding:2rem; }
}

@media (max-width:620px) {
  .cms-stage { min-height:980px; }.cms-authority-shell { width:92vw; grid-template-columns:32px 1fr; }.authority-card { min-height:160px; padding:1rem; }.authority-card strong { font-size:2.4rem; }.authority-card p { margin-bottom:1rem; }.authority-card small { top:.8rem; left:.8rem; }
  .authority-diagram { padding:3rem var(--pad); }
  .composer-section { padding-inline:0; }.composer-copy { padding-inline:var(--pad); }.composer-window { border-inline:0; }.composer-window > header { gap:.6rem; padding:.75rem; }.composer-window nav { overflow:hidden; flex-wrap:nowrap; }.composer-window nav b:nth-child(n+5) { display:none; }.composer-body { grid-template-columns:1fr; }.composer-body aside { display:none; }.composer-context { grid-template-columns:auto 1fr; }.composer-context div { grid-column:1/-1; justify-self:start; padding-bottom:.6rem; }.composer-context { height:auto; padding-block:.65rem; }.page-frame { margin:.75rem; min-height:440px; padding:1.4rem; }.page-frame h4 { margin-top:4.5rem; font-size:3.5rem; }.fake-block { left:1rem; right:1rem; bottom:1rem; }
}