.code-intro{padding:64px 0 32px;background:var(--ink);color:#fff}.code-intro h1{font-size:clamp(2.7rem,5vw,4.8rem);margin:10px 0 20px}.code-intro p:not(.eyebrow){color:#d4ded7;max-width:760px;font-size:1.1rem}.code-construction{background:var(--ink);padding:0 0 64px;color:#d4ded7}.code-construction img{display:block;width:100%;height:auto}.code-construction p{max-width:850px;margin:28px auto 0;text-align:center;line-height:1.7}
.code-book-stripe{display:block;position:relative;width:100%;color:#fff;text-decoration:none;background:#06100a url("images/code-book-workshop-v118.webp") center/cover no-repeat;border-top:1px solid #64aa7c55;border-bottom:1px solid #64aa7c44;isolation:isolate}
.code-book-stripe::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,10,6,.6),rgba(2,10,6,.28) 42%,transparent 67%);z-index:-1;transition:background-color .2s}
.code-book-stripe-content{display:flex;align-items:center;min-height:clamp(340px,33.333vw,700px);padding-top:48px;padding-bottom:48px}
.code-book-stripe-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;width:43%;max-width:510px;text-shadow:0 2px 12px #000}
.code-book-stripe-copy .eyebrow{margin:0;color:#72f09d}
.code-book-stripe-copy>strong{font-size:clamp(2rem,3.5vw,3.8rem);line-height:1.08;letter-spacing:-.035em}
.code-book-stripe-copy>span:not(.eyebrow){color:#e0ece4;line-height:1.6}
/* Preserve the original action row height, so preceding text never shifts.
   The larger link is positioned at that row's top and extends downward. */
.code-book-action-slot{position:relative;display:block;align-self:stretch;flex:none;height:calc(1.6em + 7px)}
.code-book-stripe-action{position:absolute;top:0;left:0;display:inline-block;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.4;font-weight:800;color:#e0ece4;text-decoration:none;padding-bottom:6px;border-bottom:1px solid transparent;white-space:nowrap}



.code-book-stripe-action:focus-visible{outline:2px solid #72f09d;outline-offset:6px}.code-book-stripe-action:hover{color:#72f09d}
@media(max-width:740px){.code-intro{padding-top:40px}.code-construction{padding-bottom:40px}.code-book-stripe{background-position:70% top;background-size:auto 290px;background-repeat:no-repeat}.code-book-stripe::before{background:linear-gradient(0deg,#06100a 0%,#06100a 38%,transparent 75%)}.code-book-stripe-content{min-height:490px;align-items:flex-end;padding-top:225px;padding-bottom:32px}.code-book-stripe-copy{width:100%;max-width:520px;gap:12px}.code-book-stripe-copy>strong{font-size:2rem}.code-book-stripe-copy>strong br{display:none}.code-book-stripe-copy>strong br::after{content:" "}}
@media(prefers-reduced-motion:reduce){.code-book-stripe::before,.code-book-stripe-action span{transition:none}}

/* One luminous sweep per pointer entry; no motion or looping arrow. */
.code-book-glow-arrow{position:relative;display:inline-block;vertical-align:-.06em;width:1.15em;height:.76em;margin-left:12px;color:#32e612;filter:drop-shadow(0 0 3px #32e61299) drop-shadow(0 0 8px #32e61255)}
.code-book-glow-arrow svg{display:block;width:100%;height:100%;fill:currentColor}
.code-book-glow-arrow::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#d7ffc0 44%,#fff 50%,#d7ffc0 56%,transparent 70%);background-size:300% 100%;background-position:150% 0;opacity:0;clip-path:polygon(6.25% 40.625%,66.667% 40.625%,45.833% 9.375%,62.5% 9.375%,93.75% 50%,62.5% 90.625%,45.833% 90.625%,66.667% 59.375%,6.25% 59.375%);pointer-events:none}
.code-book-stripe-action:hover .code-book-glow-arrow::after,.code-book-stripe-action:focus-visible .code-book-glow-arrow::after{animation:code-arrow-flash 650ms ease-out 1}
@keyframes code-arrow-flash{0%{background-position:150% 0;opacity:0}15%{opacity:1}80%{opacity:1}100%{background-position:-50% 0;opacity:0}}
@media(prefers-reduced-motion:reduce){.code-book-stripe-action:hover .code-book-glow-arrow::after,.code-book-stripe-action:focus-visible .code-book-glow-arrow::after{animation:none}}

/* Decorative swamp light: isolated from links and text. */
.swamp-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:paint}
.swamp-effects-stage{position:absolute;inset:0;pointer-events:none}
.code-book-stripe-content{position:relative;z-index:1}
.swamp-firefly{position:absolute;left:var(--x);top:var(--y);display:block;width:var(--size);height:var(--size);border-radius:50%;background:#e1ff9c;box-shadow:0 0 5px 1px #b5f55caa,0 0 13px 3px #7fe44255;opacity:0;animation:swamp-firefly-drift var(--duration) ease-in-out var(--delay) 1;pointer-events:none}
.swamp-firefly:nth-of-type(3n){background:#ffe6a1;box-shadow:0 0 5px 1px #ffd06caa,0 0 12px 3px #e7c14f44}
@keyframes swamp-firefly-drift{0%,12%{opacity:0;transform:translate3d(0,0,0) scale(.7)}28%{opacity:.9}48%{opacity:.3;transform:translate3d(calc(var(--dx)*.4),calc(var(--dy)*.5),0) scale(.85)}66%{opacity:1}86%,100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(.6)}}
.workshop-glow{position:absolute;display:block;pointer-events:none;border-radius:50%;mix-blend-mode:screen;opacity:.2;animation:swamp-workshop-breathe 7.3s ease-in-out infinite alternate}
.workshop-glow-amber{left:62%;top:7%;width:35%;height:48%;background:radial-gradient(ellipse,rgba(255,174,65,.55),rgba(255,145,30,.13) 43%,transparent 73%)}
.workshop-glow-green{left:81%;top:24%;width:8%;height:21%;background:radial-gradient(ellipse,rgba(126,255,57,.75),rgba(65,239,34,.16) 45%,transparent 72%);animation-duration:5.7s;animation-delay:-2s}
@keyframes swamp-workshop-breathe{0%{opacity:.12;transform:scale(.96)}55%{opacity:.32}100%{opacity:.2;transform:scale(1.04)}}
@media(max-width:740px){.swamp-effects-stage{inset:auto;top:0;left:calc(70% - 609px);width:870px;height:290px}}
@media(prefers-reduced-motion:reduce){.swamp-atmosphere{display:none}}

.swamp-firefly-zone{position:absolute;inset:0;display:block;pointer-events:none}

/* More visible V123-style points, still soft rather than oversized orbs. */
.swamp-firefly{box-shadow:0 0 6px 1px #c5ff79cc,0 0 15px 3px #7fe44277}
.swamp-firefly:nth-of-type(3n){box-shadow:0 0 6px 1px #ffdf8fcc,0 0 14px 3px #e7c14f66}