/* CRA guide, re-skinned into Pixel Horizon. Original class names kept; everything scoped under .cra / .cra-bar. */
.cra-page .nav{background:rgba(var(--paper-rgb),.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:rgba(var(--plum-rgb),.16)}
.cra-bar{position:sticky;top:62px;z-index:40;margin-top:72px;background:rgba(var(--paper-rgb),.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(var(--plum-rgb),.35)}
.cra-bar-in{max-width:1180px;margin:0 auto;padding:9px var(--pad);display:flex;gap:16px;align-items:center}
.cra-bar .bar-brand{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--acc-d)}
.cra-bar .bar-links{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px}
.cra-bar .bar-links::-webkit-scrollbar{display:none}
.cra-bar .bar-links a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding:5px 11px;border:1px solid rgba(var(--plum-rgb),.5);background:rgba(255,255,255,.5);transition:background .15s,color .15s}
.cra-bar .bar-links a:hover{background:#fff}
.cra-bar .bar-links a.on{background:var(--plum);color:var(--paper);border-color:var(--plum)}

.cra{background:var(--paper);padding:clamp(24px,3vw,44px) 0 clamp(64px,7vw,110px)}
.cra .cwrap{max-width:1120px;margin:0 auto;padding:0 var(--pad)}
.cra p{margin:0 0 14px}
.cra .lede{font-size:clamp(17px,1.25vw,20px);line-height:1.55}
.cra ul,.cra ol{margin:0 0 14px;padding-left:22px}
.cra ul{list-style:square}
.cra ol{list-style:decimal}
.cra li{margin-bottom:9px}
.cra li::marker{color:var(--acc-d)}
.cra ul.tight li,.cra ol.tight li{margin-bottom:5px}
.cra strong{font-weight:700}
.cra a{color:var(--acc-d);text-decoration:underline;text-decoration-color:rgba(var(--plum-rgb),.35);text-underline-offset:3px}
.cra a:hover{background:var(--rose)}
.cra .intro-line{font-weight:600}

.cra .ccard{background:rgba(255,255,255,.62);border:1px solid var(--plum);border-radius:0;box-shadow:6px 6px 0 rgba(var(--plum-rgb),.85);padding:clamp(20px,3.4vw,44px);margin:26px 6px 26px 0;opacity:0;transform:translate3d(0,40px,0);transition:opacity 1.1s cubic-bezier(.2,.65,.2,1),transform 1.1s cubic-bezier(.2,.65,.2,1);position:relative}
.cra .ccard.in,.cra .ccard.chero{opacity:1;transform:none}
html:not(.js) .cra .ccard{opacity:1;transform:none}

.cra .spread{display:flex;flex-wrap:wrap;gap:0 .26em;margin:0}
.cra .spread span{display:block}
.cra .hero-line{font-weight:500;letter-spacing:-.05em;font-size:clamp(36px,7.4vw,96px);line-height:1;margin:0 0 4px;color:var(--ink)}
.cra .hero-line:nth-of-type(3){color:var(--acc)}
.cra h2.sec{font-weight:500;letter-spacing:-.045em;font-size:clamp(28px,4.4vw,64px);line-height:1;margin:0 0 14px;color:var(--ink)}
.cra h3{font-weight:600;letter-spacing:-.02em;font-size:clamp(18px,1.4vw,22px);margin:28px 0 8px}
.cra h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-d);margin:24px 0 8px;font-weight:500}
.cra .micro{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.cra .micro.top{margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid rgba(var(--plum-rgb),.4)}
.cra .micro.bot{margin:26px 0 0;padding-top:14px;border-top:1px solid rgba(var(--plum-rgb),.4)}
.cra .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-d);margin:0 0 10px}

.cra .ccard.chero{background:var(--bg1);overflow:hidden}
.cra .hero-sub{font-size:clamp(16px,1.2vw,19px);max-width:60ch;margin:0;color:var(--ink2)}
.cra .mesh{height:clamp(120px,22vw,220px);margin:22px 0 18px;border:1px solid var(--plum);position:relative;
  background:
    radial-gradient(58% 78% at 6% 8%,#f7ecf4 0%,rgba(247,236,244,0) 62%),
    radial-gradient(62% 74% at 34% 46%,#fff 0%,rgba(255,255,255,0) 66%),
    radial-gradient(58% 68% at 74% 78%,#b9a5da 0%,rgba(185,165,218,0) 68%),
    radial-gradient(52% 64% at 96% 34%,#a9c2de 0%,rgba(169,194,222,0) 70%),
    linear-gradient(120deg,#e8e3ee 0%,#ddd6e6 55%,#d8dde6 100%)}
.cra .mesh::after{content:"";position:absolute;inset:0;background:
    repeating-linear-gradient(0deg,rgba(var(--paper-rgb),.55) 0 2px,transparent 2px 6px),
    repeating-linear-gradient(90deg,rgba(var(--paper-rgb),.55) 0 2px,transparent 2px 6px);mix-blend-mode:soft-light}

.cra .insert{padding:16px 18px;margin:16px 0;border:1px solid var(--plum);border-left-width:4px;background:rgba(255,255,255,.6)}
.cra .insert p:last-child{margin-bottom:0}
.cra .insert .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:8px;font-weight:500}
.cra .plain{border-left-color:var(--ok-t);background:rgba(77,154,112,.09)}
.cra .plain .tag{color:var(--ok-t)}
.cra .ex{border-left-color:var(--acc);background:rgba(118,104,154,.09)}
.cra .ex .tag{color:var(--acc-d)}
.cra .trap{border-left-color:#9b2c3c;background:rgba(155,44,60,.07)}
.cra .trap .tag{color:#9b2c3c}
.cra .status{border-left-color:var(--warn-t);background:rgba(138,90,31,.08)}
.cra .status .tag{color:var(--warn-t)}
.cra .a{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;background:rgba(118,104,154,.14);color:var(--acc-d);padding:2px 8px;white-space:nowrap;border:1px solid rgba(118,104,154,.3)}
.cra .a.k{background:rgba(107,124,140,.14);color:var(--acc2-d);border-color:rgba(107,124,140,.35)}

.cra .rail{height:10px;margin:10px 0 0;border:1px solid var(--plum);background:linear-gradient(90deg,var(--rose) 0%,#fff 24%,var(--acc) 60%,var(--acc2) 100%)}
.cra .tl{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:14px}
.cra .tl .t{border-top:1px solid var(--plum);padding-top:10px}
.cra .tl .d{font-family:var(--mono);font-size:12px;letter-spacing:.06em;font-weight:700;display:block;margin-bottom:4px}
.cra .tl .l{font-size:14px;line-height:1.4;color:var(--ink2)}
.cra .tl .t.now .d{color:var(--acc-d)}
.cra .tl .t.now{border-top-width:3px}
.cra .tbl{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
.cra .tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);text-align:left;font-weight:500;border-bottom:1px solid var(--plum);padding:0 10px 8px 0;vertical-align:bottom}
.cra .tbl td{border-bottom:1px dashed rgba(var(--plum-rgb),.35);padding:12px 10px 12px 0;vertical-align:top;line-height:1.45}
.cra .tbl tr:last-child td{border-bottom:none}
.cra .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cra .scroll .tbl{min-width:620px}
.cra .steps{list-style:none;padding:0;margin:16px 0;counter-reset:s}
.cra .steps li{counter-increment:s;position:relative;padding:14px 0 14px 46px;border-top:1px solid rgba(var(--plum-rgb),.4);margin:0}
.cra .steps li:last-child{border-bottom:1px solid rgba(var(--plum-rgb),.4)}
.cra .steps li::before{content:counter(s);position:absolute;left:0;top:14px;font-family:var(--mono);font-size:11px;color:var(--paper);background:var(--plum);width:26px;height:26px;display:grid;place-items:center}
.cra .steps .q{font-weight:700;font-size:16px;display:block;margin-bottom:5px}
.cra .clocks{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.cra .clock{border:1px solid var(--plum);padding:16px;background:rgba(255,255,255,.55)}
.cra .clock b{font-size:clamp(26px,4vw,40px);font-weight:500;letter-spacing:-.04em;display:block;line-height:1;color:var(--acc-d)}
.cra .clock span{font-size:14px;color:var(--ink2);display:block;margin-top:8px;line-height:1.4}
.cra .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cra .mini{border:1px solid var(--plum);padding:18px;height:auto;background:rgba(255,255,255,.55)}
.cra .mini h5{font-size:16px;margin:0 0 8px;font-weight:600}
.cra .mini p{font-size:15px;line-height:1.5;margin:0 0 10px}
.cra .mini p:last-child{margin:0}
.cra .foot{margin-top:26px;font-size:14px;color:var(--ink2);background:none;padding:0;border:0}
.cra .foot .ccard{background:var(--plum);color:var(--paper);border-color:var(--plum);box-shadow:6px 6px 0 var(--acc)}
.cra .foot .ccard a{color:var(--paper);text-decoration-color:var(--rose)}
.cra .foot .ccard a:hover{background:rgba(var(--paper-rgb),.15)}
.cra .foot .micro{color:rgba(var(--paper-rgb),.78)}
.cra .foot .micro.top,.cra .foot .micro.bot{border-color:rgba(var(--paper-rgb),.3)}
.cra .foot h2.sec,.cra .foot .eyebrow,.cra .foot h4{color:var(--paper)}
.cra .foot .eyebrow,.cra .foot h4{color:var(--rose)}
.cra .foot p,.cra .foot li{color:var(--paper)}
.cra .foot .micro span{color:rgba(var(--paper-rgb),.82)}
.cra .foot .micro{color:rgba(var(--paper-rgb),.82)}
@media(max-width:900px){
  .cra .tl{grid-template-columns:1fr 1fr}
  .cra-bar .bar-brand{display:none}
}
@media(max-width:760px){.cra .clocks{grid-template-columns:1fr 1fr}.cra .grid2{grid-template-columns:1fr}}
@media(max-width:520px){.cra .tl{grid-template-columns:1fr}.cra .ccard{margin-right:0}}
@media print{.nav,.cra-bar,.footer{display:none}.cra .ccard{opacity:1;transform:none;break-inside:avoid}}
@media (prefers-reduced-motion:reduce){.cra .ccard{opacity:1;transform:none;transition:none}}