.cs-body { background: #0b0c0e url(/assets/art/tx-noise.webp); color: #ece7dc; min-height: 100vh; }
.cs-shell { max-width: 1180px; margin: 0 auto; padding: 22px 16px 64px; }
.cs-vera { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; align-items: center; padding: 34px 28px; border-radius: 26px; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 85% 10%, rgb(57 255 136 / .12), transparent 55%), linear-gradient(180deg, #23262b, #101113);
  border: 1px solid rgb(255 255 255 / .1); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 -20px 50px rgb(0 0 0 / .4), 0 30px 70px rgb(0 0 0 / .55); }
.cs-vera::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgb(57 255 136 / .5) 22px 23px, transparent 23px 46px); -webkit-mask: linear-gradient(180deg, #000, transparent 85%); mask: linear-gradient(180deg, #000, transparent 85%); }
.cs-vera > * { position: relative; }
.cs-kicker { color: #39ff88; font: 700 12px/1 ui-monospace, monospace; letter-spacing: .2em; }
.cs-vera h1 { margin: 10px 0 10px; font: 900 clamp(42px, 8vw, 88px)/.92 "HAL Stencil", Impact, sans-serif; color: #f5efe2; text-shadow: 0 3px 0 #000; }
.cs-vera h1 em { font-style: normal; color: #39ff88; text-shadow: 0 0 22px rgb(57 255 136 / .35), 0 3px 0 #000; }
.cs-lede { color: #cfc9be; font-size: 17px; max-width: 560px; }
.cs-quote { margin: 14px 0; padding: 10px 14px; border-left: 3px solid #39ff88; color: #b9f7d0; font: 600 16px/1.4 ui-monospace, monospace; background: rgb(57 255 136 / .06); border-radius: 0 10px 10px 0; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 10px; }



.cs-vera-poster { margin: 0; justify-self: center; text-align: center; }
.cs-vera-poster img { width: min(300px, 70vw); height: auto; border-radius: 8px; background: #0d100e; padding: 12px; transform: rotate(2deg);
  box-shadow: 0 0 0 1px rgb(57 255 136 / .35), 0 0 40px rgb(57 255 136 / .18), 0 24px 50px rgb(0 0 0 / .6); }
.cs-vera-poster figcaption { margin-top: 12px; font: 700 12px/1 ui-monospace, monospace; letter-spacing: .2em; color: #8fe8b3; }
.cs-section { margin-top: 40px; scroll-margin-top: 70px; }
.cs-h2 { font: 900 clamp(28px, 5vw, 44px)/1 "HAL Stencil", Impact, sans-serif; color: #f5efe2; margin: 0 0 6px; }
.cs-sub { color: #bdb7ac; max-width: 760px; margin: 0 0 16px; } .cs-sub a { color: #ff8a45; }
.cs-group h3 { font-size: 16px; margin: 22px 0 10px; color: #ff8a45; } .cs-group h3 small { color: #9d978c; font-weight: 500; font-size: 12px; margin-left: 6px; }
.cs-grid, .cs-bugs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.cs-card, .cs-bug { position: relative; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #24262b, #16171a); border: 1px solid rgb(255 255 255 / .09);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 14px 30px rgb(0 0 0 / .4); display: flex; flex-direction: column; gap: 6px; }
.cs-card b, .cs-bug b { font-size: 17px; color: #f5efe2; } .cs-card p, .cs-bug p { margin: 0 0 8px; color: #c9c3b8; font-size: 14px; line-height: 1.45; flex: 1; }
.cs-badge { align-self: flex-start; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #a9a49a; padding: 4px 8px; border-radius: 999px; background: rgb(0 0 0 / .35); }
.cs-talk { align-self: flex-start; min-height: 44px; padding: 10px 16px; font-size: 14px; }
.cs-glyph .cs-talk { border-color: #39ff88; }
.cs-bug { align-items: flex-start; background: linear-gradient(180deg, #e9e3d6, #cfc7b6); color: #16171a; }
.cs-bug b { color: #16171a; } .cs-bug p { color: #3a3a3a; }
.cs-bug-art svg { width: 64px; height: 64px; display: block; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .cs-bug:hover .cs-bug-art { animation: cs-wiggle .5s ease-in-out 2; } }
@keyframes cs-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg) translateX(-3px); } 75% { transform: rotate(12deg) translateX(3px); } }
#crew .crew-grid { list-style: none; padding: 0; }
@media (max-width: 760px) { .cs-vera { grid-template-columns: 1fr; padding: 26px 18px; } .cs-vera-poster { order: -1; } .cs-vera-poster img { width: min(220px, 60vw); } .cs-grid, .cs-bugs { grid-template-columns: 1fr; } }
@media (max-width: 420px) { #crew .crew-grid { grid-template-columns: 1fr !important; } }

/* UI v2 S3 */
.cs-card { background: var(--ui-card-surface); background-blend-mode: var(--ui-card-blend); border-color: rgb(0 0 0 / .6); box-shadow: var(--ui-z2); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .cs-card { transition: transform var(--ui-t-hover) var(--ui-ease), box-shadow var(--ui-t-hover) var(--ui-ease); } .cs-card:hover { transform: translateY(-2px); box-shadow: var(--ui-z3); } }
.cs-vera { background: radial-gradient(120% 90% at 85% 10%, rgb(57 255 136 / .12), transparent 55%), var(--ui-plate-surface); background-blend-mode: normal, var(--ui-plate-blend); border-color: rgb(0 0 0 / .6); box-shadow: var(--ui-z3); }
.cs-bug { background: var(--ui-bone-surface); background-blend-mode: multiply, normal; box-shadow: var(--ui-z2); }