/* Interactive recoil study, integrated with the graphite site palette. */
.recoil-lab { display:grid; grid-template-columns:1.12fr minmax(230px,280px) 1fr; align-items:center; gap:42px; padding:28px 0 34px; font-family:'DM Sans',sans-serif; color:#eff0f4; }
.recoil-lab > * { min-width:0; }
.recoil-lab__eyebrow { display:flex; align-items:center; gap:9px; color:#beb8d2; font-size:12px; font-weight:500; margin-bottom:19px; }
.recoil-lab__eyebrow svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4; }
html body .recoil-lab h2 { font-family:'DM Sans',sans-serif; font-size:clamp(34px,3.55vw,46px); font-weight:600 !important; line-height:1.1; letter-spacing:-.045em !important; margin:0 0 20px; color:#f0f0f4; }
.recoil-lab h2 span { color:#c8c3d6; }
.recoil-lab__intro > p { margin:0; max-width:350px; color:#9998a4; font-size:15px; line-height:1.8; }
.recoil-lab__hint { display:flex; gap:9px; align-items:center; margin-top:27px; font-size:11px; color:#73727e; }
.recoil-lab__hint svg { width:14px; height:14px; fill:#0b0b0e; stroke:currentColor; stroke-width:1.5; }
.recoil-lab__visual { margin:0; }
.recoil-lab__visual figcaption { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:11px; font-weight:500; color:#aaa7b4; }
.recoil-lab__visual figcaption span { color:#676670; font-size:10px; font-weight:400; }
.recoil-lab__plot { position:relative; overflow:hidden; aspect-ratio:1; border:1px solid #ffffff12; border-radius:21px; background:radial-gradient(ellipse at 62% 42%,#bdb0eb0d,transparent 72%),linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px),#101013; background-size:auto,28px 28px,28px 28px,auto; box-shadow:inset 0 1px 0 #ffffff06,0 18px 38px -28px #000; }
.recoil-lab__plot svg { display:block; width:100%; height:auto; overflow:visible; }
.recoil-lab__crosshair { fill:none; stroke:#c5c0d6; stroke-opacity:.24; stroke-width:1; }
.recoil-lab__trail { fill:none; stroke:#cbc3e4; stroke-width:1; stroke-opacity:.22; stroke-dasharray:2 5; }
.recoil-lab__shot { fill:#ddd8ec; }
.recoil-lab__head { fill:#fff; filter:drop-shadow(0 0 4px #d3c3ff); }
.recoil-lab__glow { fill:#b9a5ee; opacity:.22; filter:blur(5px); }
.recoil-lab__plot-note { position:absolute; bottom:13px; left:0; right:0; text-align:center; font-size:9px; color:#6a6775; pointer-events:none; }
.recoil-lab__controls { padding-top:18px; }
.recoil-lab__live { display:flex; align-items:center; gap:9px; color:#c6bfd9; font-size:11px; font-weight:500; margin-bottom:29px; }
.recoil-lab__live > span { width:6px; height:6px; border-radius:50%; background:#bcb0dc; box-shadow:0 0 0 4px #bcb0dc0a,0 0 12px #bcb0dc30; }
.recoil-lab__field + .recoil-lab__field { margin-top:24px; }
.recoil-lab__label { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.recoil-lab__label label { color:#b5b2c0; font-size:12px; font-weight:500; }
.recoil-lab__label output { color:#e4dff0; font-size:13px; font-variant-numeric:tabular-nums; }
.recoil-lab__label output span { color:#76717f; font-size:10px; margin-left:2px; }
.recoil-lab__field p { color:#686773; font-size:10px; margin:4px 0 0; line-height:1.5; }
.recoil-lab input[type="range"] { --fill:0%; display:block; width:100%; height:28px; margin:0; padding:0; cursor:pointer; appearance:none; -webkit-appearance:none; border:0; border-radius:0; box-shadow:none; background:transparent; accent-color:#c1b6df; }
.recoil-lab input[type="range"]::-webkit-slider-runnable-track { height:3px; border-radius:4px; background:linear-gradient(to right,#c4b9e0 0%,#c4b9e0 var(--fill),#29272f var(--fill),#29272f 100%); }
.recoil-lab input[type="range"]::-moz-range-track { height:3px; border-radius:4px; background:#29272f; }
.recoil-lab input[type="range"]::-moz-range-progress { height:3px; border-radius:4px; background:#c4b9e0; }
.recoil-lab input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:13px; height:13px; margin-top:-5px; border:3px solid #17151e; border-radius:50%; background:#ded7ee; box-shadow:0 0 0 1px #9f93b95c; transition:box-shadow .18s; }
.recoil-lab input[type="range"]::-moz-range-thumb { width:8px; height:8px; border:3px solid #17151e; border-radius:50%; background:#ded7ee; box-shadow:0 0 0 1px #9f93b95c; }
.recoil-lab input[type="range"]:hover::-webkit-slider-thumb { box-shadow:0 0 0 4px #a99ac517; }
.recoil-lab input[type="range"]:focus-visible { outline:1px solid #bcb0dc; outline-offset:4px; border-radius:4px; }
.recoil-lab input[type="range"]:disabled { opacity:.4; cursor:default; }
@media(max-width:1000px) { .recoil-lab { grid-template-columns:1fr 240px; gap:32px; } .recoil-lab__intro { grid-column:1/-1; } .recoil-lab__intro > p { max-width:none; } .recoil-lab__visual { width:100%; max-width:310px; justify-self:center; } .recoil-lab__controls { padding-top:20px; } }
@media(max-width:600px) { .recoil-lab { grid-template-columns:1fr; gap:28px; padding:6px 0 16px; } .recoil-lab__intro { grid-column:auto; } html body .recoil-lab h2 { font-size:37px; margin-bottom:14px; } .recoil-lab__intro > p { font-size:14px; } .recoil-lab__hint { margin-top:17px; } .recoil-lab__visual { max-width:310px; } .recoil-lab__controls { padding:0 4px; } .recoil-lab__live { margin-bottom:21px; } .recoil-lab__label label { font-size:13px; } .recoil-lab__field p { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .recoil-lab input[type="range"]::-webkit-slider-thumb { transition:none; } }