.article-experiment{--lab-soft:color-mix(in srgb,var(--brand) 8%,var(--card));--lab-focus:color-mix(in srgb,var(--brand) 55%,var(--line));margin:32px 0;padding:24px;border:1px solid var(--line);border-radius:24px;background:var(--card);font:400 .95rem/1.6 Inter,ui-sans-serif,system-ui,sans-serif;min-width:0}
.prose .article-experiment h3{font:800 1.25rem/1.3 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.025em;margin:0 0 14px}.prose .article-experiment p{margin:0 0 18px}.article-experiment label{display:grid;gap:8px;font-weight:650;margin:18px 0}.article-experiment select{min-width:0;width:100%;min-height:48px;padding:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;border-radius:12px}.article-experiment input[type=range]{width:100%;height:34px;margin:0;accent-color:var(--brand)}.article-experiment output{font-weight:750;color:var(--brand-dark);font-variant-numeric:tabular-nums}.experiment-controls{display:grid;grid-template-columns:1fr 1fr;gap:20px}.experiment-scene{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}.experiment-scene>div{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--paper);display:grid;gap:12px;min-width:0}.experiment-scene span{font-size:.78rem;color:var(--muted)}.experiment-scene strong{font-size:1.1rem;overflow-wrap:anywhere}.job-dots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;min-height:60px;align-content:start}.job-dots i{display:block;height:20px;border-radius:5px;border:1px solid var(--line)}.job-dots i[data-active=true]{background:var(--brand);border-color:var(--brand)}.prose .experiment-result{padding:18px;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:12px;min-height:4em;font-size:.95rem;margin:20px 0}.prose .experiment-limit{font-size:.78rem;color:var(--muted);line-height:1.6;margin:20px 0 0}.article-experiment button{cursor:pointer;min-height:44px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:10px 16px;font:700 .85rem/1.4 Inter,ui-sans-serif,system-ui,sans-serif}.article-experiment button:hover{border-color:var(--brand)}.article-experiment :is(button,select,input):focus-visible{outline:3px solid var(--brand);outline-offset:3px}.connection-scene{display:grid;grid-template-columns:1fr auto 1.3fr;gap:14px;align-items:center;border:1px solid var(--line);background:var(--paper);padding:22px 16px;border-radius:16px;font-size:.85rem;text-align:center;overflow-wrap:anywhere}.connection-scene span:nth-child(2){font-weight:700;color:var(--brand-dark)}.permission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.permission-grid span{border:1px solid var(--line);padding:16px 10px;border-radius:12px;text-align:center;font-size:.85rem}.permission-grid [data-allowed=true]{color:var(--brand-dark);background:var(--lab-soft);font-weight:700}.backup-scene{grid-template-columns:repeat(3,1fr)}.backup-scene [data-present=false]{color:var(--muted);font-weight:400}.experiment-actions{display:flex;gap:10px;flex-wrap:wrap}.network-sliders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.speed-lanes{display:grid;gap:16px;margin:20px 0}.speed-lanes span{display:block;color:var(--muted);font-size:.8rem;margin-bottom:6px}.speed-lanes>div>div{height:14px;border-radius:6px;background:var(--paper);border:1px solid var(--line);overflow:hidden}.speed-lanes i{display:block;height:100%;background:var(--line);transition:width .15s}.speed-lanes [data-limiting=true] i{background:var(--brand)}.speed-lanes [data-limiting=true] span{color:var(--brand-dark);font-weight:750}.article-experiment .journey-demo,.article-experiment .cache-demo,.article-experiment .hash-demo{box-shadow:none;border:0;padding:0;background:none}.article-experiment .journey-story h3{margin:8px 0}.article-experiment .journey-story p{font-size:.9rem;margin:0}.article-experiment .cache-actions button.lab-primary{color:var(--paper);background:var(--brand)}.article-experiment .hash-output code{background:none;padding:0}.article-experiment [hidden]{display:none!important}
html:has(.beginner-guide){scroll-behavior:auto}
@media(max-width:620px){.article-experiment{padding:18px;border-radius:20px}.experiment-controls,.network-sliders{grid-template-columns:1fr;gap:0}.backup-scene{grid-template-columns:1fr}.connection-scene{grid-template-columns:1fr;gap:12px}.permission-grid{grid-template-columns:1fr}.experiment-scene>div{padding:14px}.experiment-scene strong{font-size:.95rem}.article-experiment .journey-story{min-height:unset;margin:18px 0}}
@media(prefers-reduced-motion:reduce){.article-experiment *{transition:none!important;animation:none!important}}