body.dev-page{background:var(--paper);color:var(--ink)}
.dev-page .site-header{background:rgba(8,16,21,.9)}
.dev-hero{padding:82px 0 72px;background:var(--paper);color:var(--ink)}
.dev-hero__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.dev-hero h1{font-size:clamp(46px,6vw,78px);line-height:.98;letter-spacing:-.06em;max-width:10ch;margin:20px 0}
.dev-hero p{font-size:19px;color:var(--ink-2);max-width:58ch}
.dev-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.dev-actions .btn-ghost{color:var(--ink);border-color:#bac5c8}
.source-window{background:#091015;color:var(--text);border:1px solid #1e303a;box-shadow:0 30px 70px rgba(17,31,39,.16);min-height:0;position:relative;overflow:hidden}
.source-window__bar{height:44px;border-bottom:1px solid #1d2e38;display:flex;align-items:center;gap:8px;padding:0 16px}
.source-window__bar i{width:9px;height:9px;border-radius:50%;background:#324650}.source-window__bar i:last-child{background:var(--teal-2)}
.source-window__body{padding:28px}
.code-line{display:grid;grid-template-columns:38px 1fr;gap:16px;font:13px/1.8 var(--mono);color:#98aab3;transition:background .2s ease,color .2s ease,transform .2s ease}
.code-line:hover{background:rgba(146,202,212,.05);color:#dce8ec;transform:translateX(4px)}
.code-line span:first-child{color:#4b626d}.code-line b{color:var(--teal-3);font-weight:500}.code-line em{color:#d6b46a;font-style:normal}
.source-window__note{position:absolute;right:0;bottom:0;padding:12px 16px;border-top:1px solid #1d2e38;border-left:1px solid #1d2e38;background:#0c151b;font:11px var(--mono);color:var(--muted)}
.dev-principles{background:#0a1116;color:var(--text)}
.principle-list{border-top:1px solid rgba(255,255,255,.09)}
.principle{position:relative;display:grid;grid-template-columns:100px .8fr 1.2fr;gap:24px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.09);overflow:hidden}
.principle::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal-3);transform:scaleY(.15);transform-origin:top;transition:transform .3s ease}
.principle:hover::before{transform:scaleY(1)}
.principle>*{position:relative}.principle .n{font:12px var(--mono);color:var(--teal-3)}.principle h3{font-size:25px;line-height:1.12}.principle p{color:var(--text-2)}
.inspection{background:var(--paper);color:var(--ink)}
.inspect-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px}
.inspect-rail{position:sticky;top:110px;align-self:start}
.inspect-rail h2{font-size:clamp(34px,4vw,52px);line-height:1.02;letter-spacing:-.05em;margin-top:14px}
.inspect-rail p{color:var(--ink-2);margin-top:14px}
.inspect-list{border-top:1px solid #cdd6d7}
.inspect-row{position:relative;display:grid;grid-template-columns:180px 1fr;gap:24px;padding:25px 0;border-bottom:1px solid #cdd6d7}
.inspect-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.inspect-row:hover::after{transform:scaleX(1)}
.inspect-row strong{font:12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.inspect-row p{color:var(--ink-2)}
.dev-flow{background:#dfe7e6;color:var(--ink);padding:78px 0}
.flow-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #aebcbc;border-bottom:1px solid #aebcbc}
.flow-step{padding:28px 24px;min-height:220px;border-right:1px solid #aebcbc;position:relative;overflow:hidden}
.flow-step:last-child{border-right:0}
.flow-step::before{content:"";position:absolute;inset:auto 0 0;height:100%;background:linear-gradient(to top,rgba(31,140,160,.14),transparent 56%);transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.flow-step:hover::before{transform:none}.flow-step>*{position:relative}
.flow-step small{font:11px var(--mono);color:var(--teal)}.flow-step h3{font-size:23px;margin:18px 0 9px}.flow-step p{color:var(--ink-2);font-size:14px}
@media(max-width:980px){.dev-hero__grid,.inspect-grid{grid-template-columns:1fr}.inspect-rail{position:static}.principle{grid-template-columns:70px 1fr}.principle p{grid-column:2}.flow-strip{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.source-window{min-height:auto}.source-window__body{padding:20px}.flow-strip{grid-template-columns:1fr}.flow-step{border-right:0;border-bottom:1px solid #aebcbc}.principle,.inspect-row{grid-template-columns:1fr}.principle p{grid-column:auto}}
.terminal-title{margin-left:auto;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#607783}
.terminal-body{height:318px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;gap:2px;padding:26px 28px 52px;background:linear-gradient(180deg,#091015,#071016)}
.terminal-line{flex:none;font:12.5px/1.58 var(--mono);white-space:pre-wrap;color:#9eb0b8;min-height:22px}
.terminal-line--cmd{color:#e4edf0}.terminal-line--cmd::first-letter{color:var(--teal-3)}
.terminal-line--ok{color:#87d7ac}.terminal-line--info{color:#89a7b3}.terminal-line--prompt{color:var(--teal-3)}
.terminal-line--enter{animation:terminalIn .28s ease both}
@keyframes terminalIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:650px){
  .dev-hero{padding:58px 0 48px}
  .dev-hero h1{font-size:clamp(42px,13vw,58px);max-width:none}
  .source-window{width:100%;min-width:0;box-shadow:0 20px 45px rgba(17,31,39,.13)}
  .source-window__bar{height:40px;padding:0 12px}.terminal-title{font-size:9px}
  .terminal-body{height:286px;padding:18px 14px 42px;overflow:hidden}
  .terminal-line{font-size:11.5px;line-height:1.65;overflow-wrap:anywhere}
  .source-window__note{max-width:86%;font-size:9px}
  .principle{padding:22px 0}.principle h3{font-size:22px}
  .inspect-list{min-width:0}.inspect-row{gap:8px;padding:21px 0}.inspect-row strong{font-size:11px}
  .flow-step{min-height:0;padding:24px 18px}
}