.craft-explorable{--cx-ground: oklch(.965 .003 80);--cx-ink: oklch(.17 .005 80);--cx-ink-2: oklch(.32 .005 80);--cx-muted: oklch(.45 .005 80);--cx-faint: oklch(.62 .005 80);--cx-line: oklch(.17 .005 80 / .09);--cx-line-2: oklch(.17 .005 80 / .18);--cx-accent: #D4805A;--cx-accent-ink: #A8532F;--cx-accent-soft: rgba(212, 128, 90, .14);--cx-mono: "Geist Mono", ui-monospace, monospace;color:var(--cx-ink);background:var(--cx-ground);border:1px solid var(--cx-line-2);border-radius:12px}:where(.dark) .craft-explorable{--cx-ground: oklch(.175 .003 80);--cx-ink: oklch(.98 .003 80);--cx-ink-2: oklch(.88 .003 80);--cx-muted: oklch(.62 .005 80);--cx-faint: oklch(.45 .005 80);--cx-line: oklch(.98 .003 80 / .09);--cx-line-2: oklch(.98 .003 80 / .16);--cx-accent-ink: #D4805A}.cx-stage{padding:36px 40px 28px;border-radius:inherit;cursor:default;-webkit-user-select:none;user-select:none;outline:none}.cx-stage:focus-visible{box-shadow:0 0 0 2px var(--cx-accent)}.cx-head>div{animation:cx-in .35s ease-out}.cx-line{margin:0;min-height:1.2em;font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-.02em;line-height:1.15}.cx-sub{max-width:70ch;min-height:3.2em;margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--cx-muted)}.cx-above{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:24px;transition:opacity .4s}.cx-above.is-off{opacity:.35}.cx-you{position:relative;width:40px;height:40px;border-radius:50%;background:var(--cx-ink)}.cx-you:after{content:"";position:absolute;left:50%;top:100%;width:1px;height:26px;background:var(--cx-line-2)}.cx-you-label{margin-top:22px;font-family:var(--cx-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cx-muted)}.cx-rail{position:relative;margin-top:26px;padding-top:18px}.cx-rail:before{content:"";position:absolute;left:10%;right:10%;top:47px;height:6px;background:radial-gradient(circle,var(--cx-accent) 1.6px,transparent 2.2px) 0 50% / 14px 6px repeat-x;animation:cx-flow 1.1s linear infinite;opacity:.9}.cx-return{position:absolute;left:30%;right:30%;top:-6px;height:24px;border:1px solid var(--cx-accent);border-bottom:0;border-radius:14px 14px 0 0;opacity:0;transition:opacity .3s}.cx-return.is-on{opacity:1}.cx-return span{position:absolute;left:50%;top:-9px;padding:0 8px;transform:translate(-50%);font-family:var(--cx-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--cx-accent-ink);background:var(--cx-ground)}.cx-stations{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.cx-station{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}.cx-knot{width:64px;height:64px;border:1px solid var(--cx-line-2);border-radius:50%;background:var(--cx-ground);transition:all .3s}.cx-station.is-on .cx-knot{border-color:var(--cx-accent);background:var(--cx-accent);box-shadow:0 0 0 10px var(--cx-accent-soft)}.cx-station.is-done .cx-knot{border-color:var(--cx-ink);background:var(--cx-ink)}.cx-name{font-family:var(--cx-mono);font-size:14px;color:var(--cx-muted);transition:color .3s}.cx-station.is-on .cx-name,.cx-station.is-done .cx-name{color:var(--cx-ink)}.cx-who{display:inline-flex;align-items:center;gap:6px;font-family:var(--cx-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}.cx-who i{width:6px;height:6px;border-radius:50%;background:currentColor}.cx-who.is-human{color:var(--cx-ink-2)}.cx-who.is-agent{color:var(--cx-accent-ink)}.cx-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:26px}.cx-chip{padding:4px 8px;border:1px solid var(--cx-accent);border-radius:4px;font-family:var(--cx-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--cx-accent-ink);background:var(--cx-accent-soft);animation:cx-in .3s ease-out}.cx-chip.is-ghost{border-color:var(--cx-line-2);color:var(--cx-muted);background:transparent}.cx-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:34px;padding-top:18px;border-top:1px solid var(--cx-line)}.cx-meter{display:flex;align-items:center;gap:14px;font-family:var(--cx-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cx-muted)}.cx-meter b{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--cx-ink)}.cx-meter{min-width:0}.cx-meter>span:first-child,.cx-meter b{white-space:nowrap}.cx-track{display:block;width:160px;min-width:24px;height:4px;overflow:hidden;border-radius:2px;background:var(--cx-line-2)}.cx-fill{display:block;height:100%;background:var(--cx-ink);transition:width .5s}.cx-dots{display:flex;gap:8px}.cx-dots i{width:6px;height:6px;border-radius:50%;background:var(--cx-line-2)}.cx-dots i.is-on{background:var(--cx-accent)}.cx-hint{font-family:var(--cx-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cx-muted)}@keyframes cx-flow{to{background-position-x:14px}}@keyframes cx-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media (max-width: 900px){.cx-stage{padding:24px 20px 20px}.cx-stations{gap:6px}.cx-rail:before{top:35px}.cx-knot{width:40px;height:40px}.cx-station.is-on .cx-knot{box-shadow:0 0 0 6px var(--cx-accent-soft)}.cx-name{font-size:12px}.cx-who,.cx-chips{display:none}.cx-foot{flex-wrap:wrap;gap:14px}.cx-hint{display:none}}@media (prefers-reduced-motion: reduce){.craft-explorable *,.craft-explorable *:before,.craft-explorable *:after{transition:none!important;animation:none!important}}
