.sandbox-hero{max-width:var(--maxw);min-height:70vh;padding:clamp(60px, 10vh, 100px) var(--pad-x);grid-template-columns:1fr 1.1fr;align-items:center;gap:56px;margin:0 auto;display:grid}@media (max-width:1024px){.sandbox-hero{grid-template-columns:1fr;gap:32px}}.sandbox-stage{aspect-ratio:1;border-radius:var(--r-xl);border:1px solid var(--line);background:radial-gradient(60% 60%,#ffffff0a,#0000 70%),linear-gradient(#ffffff06,#ffffff01);width:100%;max-width:560px;margin:0 auto;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0d,0 30px 60px #0006}.sandbox-stage canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.sandbox-stage:before{content:"";pointer-events:none;z-index:1;background-image:linear-gradient(90deg,#ffffff06 1px,#0000 1px),linear-gradient(0deg,#ffffff06 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0}.sandbox-stage:after{content:"";pointer-events:none;z-index:2;background:linear-gradient(#05070f00 60%,#05070f8c 100%),radial-gradient(70% 70%,#0000 50%,#05070f4d 100%);position:absolute;inset:0}.stage-meta{z-index:3;font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);pointer-events:none;justify-content:space-between;font-size:11px;display:flex;position:absolute;bottom:18px;left:18px;right:18px}.stage-meta strong{color:var(--ink-0);font-family:var(--font-display);letter-spacing:-.01em;margin-top:4px;font-size:20px;display:block}.stage-label{z-index:3;border:1px solid var(--line-strong);font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-1);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0006;border-radius:999px;align-items:center;gap:8px;padding:6px 11px;font-size:11px;display:inline-flex;position:absolute;top:18px;left:18px}.stage-label:before{content:"";background:var(--accent-live);width:6px;height:6px;box-shadow:0 0 8px var(--accent-live);border-radius:50%;animation:1.6s ease-in-out infinite rec-pulse}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.3}}.rules{max-width:var(--maxw);grid-template-columns:repeat(4,1fr);gap:14px;margin:0 auto;display:grid}@media (max-width:1024px){.rules{grid-template-columns:repeat(2,1fr)}}@media (max-width:720px){.rules{grid-template-columns:1fr}}.rule{border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(#ffffff08,#ffffff03);padding:24px;position:relative;overflow:hidden}.rule__id{font-family:var(--font-mono);letter-spacing:.18em;color:var(--ink-2);text-transform:uppercase;margin-bottom:14px;font-size:11px}.rule h3{margin:0 0 8px;font-size:18px}.rule p{color:var(--ink-2);margin:0;font-size:14px}.scenario{border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(#ffffff09,#ffffff03);grid-template-columns:200px 1fr auto;align-items:center;gap:32px;padding:28px 32px;display:grid}@media (max-width:720px){.scenario{grid-template-columns:1fr;gap:12px;padding:22px}}.scenario__tag{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-size:11px}.scenario__tag strong{color:var(--ink-0);font-family:var(--font-display);letter-spacing:-.01em;margin-top:6px;font-size:22px;display:block}.scenario h3{margin:0 0 6px;font-size:19px}.scenario p{color:var(--ink-2);margin:0;font-size:14.5px}.scenario code{font-family:var(--font-mono);border:1px solid var(--line);color:var(--ink-1);white-space:nowrap;background:#00000059;border-radius:8px;align-self:center;padding:8px 12px;font-size:12px}.scenario-list{max-width:var(--maxw);flex-direction:column;gap:14px;margin:0 auto;display:flex}.lifecycle{max-width:var(--maxw);border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(#ffffff08,#ffffff03);margin:0 auto;padding:32px}.lifecycle__track{grid-template-columns:repeat(5,1fr);gap:8px;margin-top:24px;display:grid;position:relative}.lifecycle__step{border-radius:var(--r-md);border:1px solid var(--line);background:#00000040;padding:18px 16px 16px;position:relative}.lifecycle__step:before{content:"";background:linear-gradient(90deg, transparent, var(--accent-live), transparent);opacity:.5;height:2px;position:absolute;top:-1px;left:-1px;right:-1px}.lifecycle__num{font-family:var(--font-mono);letter-spacing:.16em;color:var(--ink-2);margin-bottom:6px;font-size:11px}.lifecycle__name{font-family:var(--font-display);margin:0;font-size:16px}.lifecycle__desc{color:var(--ink-2);margin:6px 0 0;font-size:12.5px;line-height:1.45}@media (max-width:720px){.lifecycle__track{grid-template-columns:1fr}}
