.guardrails-feature{margin:56px auto 0;width:80%;max-width:784px}
.guardrails-visual{position:relative}
.guardrails-preview{position:relative;width:100%;aspect-ratio:1000/370;overflow:hidden;background:#0a0b0f;pointer-events:none;user-select:none}
.guardrails-screen{position:absolute;left:0;top:0;width:1000px;height:370px;overflow:hidden;transform-origin:top left;font-family:Inter,system-ui,sans-serif;font-size:20px;line-height:1.4;color:#d7dbe5}
.guardrails-topbar{display:flex;justify-content:flex-end;align-items:center;gap:18px;padding:35px 28px 26px;height:132px}
.guardrails-alert{display:flex;align-items:center;gap:14px;white-space:nowrap;border:1px solid rgba(192,57,74,.4);background:rgba(192,57,74,.1);border-radius:999px;padding:13px 21px;font-size:20px}
.guardrails-alert-dot{flex:none;width:12px;height:12px;border-radius:50%;background:#c0394a;box-shadow:0 0 6px #c0394a;animation:guardrails-blink 1s infinite}
@keyframes guardrails-blink{0%,100%{opacity:1}50%{opacity:.15}}
.guardrails-tools,.guardrails-circles{display:flex;align-items:center;gap:10px}
.guardrails-tools{gap:12px}
.guardrails-circle{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:2px solid #454857;flex:none;font-size:20px;font-weight:800}
.guardrails-circle.loss{background:rgba(192,57,74,.14);color:#c0394a}
.guardrails-circle.empty{background:#12141c;color:#a6acbc;font-weight:600}
.guardrails-cooldown{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:152px;height:48px;border-radius:999px;background:rgba(191,54,54,.14);color:#c65a5a;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;flex:none}
.guardrails-ring{position:absolute;inset:0;width:100%;height:100%}
.guardrails-ring-bg,.guardrails-ring-fg{fill:none;stroke-width:1.6}
.guardrails-ring-bg{stroke:rgba(191,54,54,.22)}
.guardrails-ring-fg{stroke:#bf3636;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;filter:drop-shadow(0 0 3px rgba(191,54,54,.6));transition:stroke-dashoffset 1s linear}
.guardrails-clock{position:relative;width:19px;height:19px}
.guardrails-time{position:relative}
.guardrails-cooldown.finished{background:#12141c;color:#a6acbc}
.guardrails-add{display:grid;place-items:center;width:62px;height:62px;margin-left:12px;border-radius:18px;background:#bf3636;color:#eef0f6;font-size:34px;flex:none}
.guardrails-stats{display:grid;grid-template-columns:70px 1fr 1fr;gap:22px;padding-right:28px;padding-top:8px}
.guardrails-stat{height:204px;padding:25px;border-radius:20px;text-align:left}
.guardrails-stat .demo-label{font-size:23px}
.guardrails-stat .demo-value{font-size:38px;margin-top:13px}
.guardrails-stat .demo-note{font-size:20px}
.guardrails-stat .demo-icon{width:49px;height:49px}
.guardrails-stat .demo-meter{margin-top:12px}
.guardrails-partial{position:relative;height:204px;margin-left:-110px;border:1px solid #22242e;border-radius:20px;background:#12141c}
.guardrails-pulse{position:absolute;right:25px;top:25px;display:grid;place-items:center;width:49px;height:49px;border-radius:14px;background:#372b1e;color:#f2a93b;font-size:32px}
.guardrails-copy{text-align:center;margin:0 auto 32px;max-width:650px}
.guardrails-copy h3{color:var(--title);font-size:1.5rem;letter-spacing:-.02em}
.guardrails-copy p{color:var(--muted);font-size:.95rem;margin-top:10px}
@media(prefers-reduced-motion:reduce){.guardrails-alert-dot{animation:none}.guardrails-ring-fg{transition:none}}

.guardrails-pulse svg{width:26px;height:26px}

.guardrails-slide-track{display:flex;width:2000px;height:370px;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.guardrails-slide{position:relative;width:1000px;height:370px;flex:0 0 1000px;overflow:hidden}
.guardrails-news-slide .guardrails-add{background:#3b82f6}
@media(prefers-reduced-motion:reduce){.guardrails-slide-track{transition:none}}

.guardrails-controls{position:absolute;inset:40px 0 0;pointer-events:none}
.guardrails-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid rgba(154,163,186,.25);border-radius:50%;color:#9aa3ba;background:rgba(10,11,15,.88);pointer-events:auto;cursor:pointer}
.guardrails-arrow.previous{left:7px}
.guardrails-arrow.next{right:7px}
.guardrails-arrow svg{width:16px;height:16px}
.guardrails-arrow:hover{color:#eef0f6;border-color:#607ca8;background:#161b27}
.guardrails-dots{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:4px 7px;border-radius:99px;background:rgba(10,11,15,.8);pointer-events:auto}
.guardrails-dots button{width:6px;height:6px;padding:0;border-radius:99px;background:#51596b;transition:width .2s,background .2s;cursor:pointer}
.guardrails-dots button[aria-current="true"]{width:18px;background:#7ab0ff}
@media(max-width:600px){.guardrails-arrow{width:24px;height:24px}.guardrails-arrow.previous{left:4px}.guardrails-arrow.next{right:4px}.guardrails-dots{bottom:3px}}

/* Place arrows outside the frame while the indicators stay inside its lower edge. */
.guardrails-feature{position:relative}
.guardrails-controls{bottom:auto}
.guardrails-arrow.previous{left:-38px}
.guardrails-arrow.next{right:-38px}
@media(max-width:600px){.guardrails-arrow.previous{left:-29px}.guardrails-arrow.next{right:-29px}}
@media(max-width:700px){.guardrails-feature{margin-top:40px}.guardrails-copy{margin-bottom:24px}}