.hero-workbench{--workbench-cycle:12s;--workbench-ink:var(--text-primary);--workbench-accent:var(--accent-purple);width:100%;max-width:600px;min-width:0;overflow:hidden;border:1px solid var(--border-subtle);background:var(--bg-terminal);color:var(--workbench-ink);font-family:var(--font-mono);text-align:left;container-type:inline-size}.hero-workbench *,.hero-workbench *::before,.hero-workbench *::after{box-sizing:border-box}.hero-workbench .workbench-titlebar{display:flex;align-items:center;gap:var(--space-3);min-height:48px;padding:0 var(--space-4);border-bottom:1px solid var(--border-subtle);font-size:var(--text-xs)}.hero-workbench .workbench-file{display:flex;align-items:center;gap:var(--space-2);white-space:nowrap}.hero-workbench .workbench-file>span{color:var(--workbench-accent);font-size:var(--text-base)}.hero-workbench .workbench-example{margin-left:auto;color:var(--text-secondary);font-size:var(--text-xs)}.hero-workbench .workbench-controls{display:flex;gap:3px}.hero-workbench .workbench-controls[hidden]{display:none}.hero-workbench .workbench-controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;background:0 0;border:1px solid transparent;color:var(--text-secondary);font-size:var(--text-md);font-family:var(--font-mono);cursor:pointer}.hero-workbench .workbench-controls button:hover{color:var(--workbench-accent);border-color:var(--border-subtle)}.hero-workbench .workbench-controls button:focus-visible{outline:2px solid var(--workbench-accent);outline-offset:1px}.hero-workbench .workbench-code{--workbench-code-size:var(--text-sm);--workbench-code-line:calc(var(--workbench-code-size) * var(--leading-normal));position:relative;overflow:hidden;padding:var(--space-4)var(--space-5);border-bottom:1px solid var(--border-subtle)}.hero-workbench .workbench-code pre{margin:0;padding:0;border:0;background:0 0;overflow-x:auto}.hero-workbench .workbench-code code{display:block;position:relative;z-index:var(--z-base);border:0;padding:0;margin:0;background:0 0;color:var(--text-secondary);font-family:var(--font-code);font-size:var(--workbench-code-size);line-height:var(--leading-normal);white-space:pre}.hero-workbench .workbench-code code b{color:var(--workbench-accent);font-weight:400}.hero-workbench .workbench-code-focus{position:absolute;top:var(--space-4);left:0;width:100%;height:var(--workbench-code-line);border-left:2px solid var(--workbench-accent);background:color-mix(in srgb,var(--workbench-accent) 9%,transparent)}.hero-workbench .workbench-preview{position:relative;height:326px;overflow:hidden;background:linear-gradient(var(--border-subtle) 1px,transparent 1px),linear-gradient(90deg,var(--border-subtle) 1px,transparent 1px);background-size:24px 24px;background-position:50%}.hero-workbench .workbench-preview-label{position:absolute;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;color:var(--text-muted);font-size:var(--text-xs);letter-spacing:var(--tracking-wider)}.hero-workbench .workbench-device{--workbench-phone-width:180px;position:absolute;top:43px;left:50%;width:180px;max-width:calc(100% - 40px);height:255px;transform:translateX(-50%);border:1px solid var(--workbench-accent);border-radius:var(--radius-none);padding:var(--space-1);background:var(--bg-terminal);box-shadow:none;overflow:hidden}.hero-workbench .workbench-app-bar{height:31px;display:flex;align-items:center;gap:var(--space-2);border-bottom:1px solid var(--border-subtle);padding:0 var(--space-1)var(--space-1);font-size:var(--text-xs)}.hero-workbench .workbench-app-mark{font-weight:700;font-size:var(--text-lg);color:var(--workbench-accent)}.hero-workbench .workbench-app-menu{margin-left:auto;font-size:var(--text-lg)}.hero-workbench .workbench-app-body{display:flex;height:calc(100% - 31px)}.hero-workbench .workbench-note-list{flex:0 0 166px;width:166px;padding:var(--space-2)}.hero-workbench .workbench-list-heading{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:var(--space-2)}.hero-workbench .workbench-list-heading>span{color:var(--workbench-accent);font-size:var(--text-base)}.hero-workbench .workbench-note{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--border-subtle)}.hero-workbench .workbench-note-selected{border-color:var(--workbench-accent);background:color-mix(in srgb,var(--workbench-accent) 13%,var(--bg-terminal))}.hero-workbench .workbench-note-tag{font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--workbench-accent)}.hero-workbench .workbench-note strong{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:500;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}.hero-workbench .workbench-note-foot{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--text-secondary)}.hero-workbench .workbench-note-secondary{margin-top:var(--space-2);padding:var(--space-2);gap:var(--space-1)}.hero-workbench .workbench-note-secondary strong{font-size:var(--text-xs)}.hero-workbench .workbench-note-detail{flex:1;min-width:155px;padding:var(--space-4)var(--space-3);border-left:1px solid var(--border-subtle)}.hero-workbench .workbench-note-detail>strong{display:block;margin-top:var(--space-2);font-weight:500;font-size:var(--text-md);line-height:var(--leading-tight);font-family:var(--font-ui);letter-spacing:var(--tracking-tight)}.hero-workbench .workbench-detail-art{display:flex;align-items:end;gap:var(--space-1);height:45px;margin:var(--space-3)0}.hero-workbench .workbench-detail-art span{display:block;width:32px;height:100%;background:var(--workbench-accent)}.hero-workbench .workbench-detail-art span:nth-child(2){height:70%;opacity:.6}.hero-workbench .workbench-detail-art span:nth-child(3){height:40%;opacity:.3}.hero-workbench .workbench-note-detail p{margin:0 0 var(--space-2);font-size:var(--text-xs);line-height:var(--leading-snug);font-family:var(--font-ui);color:var(--text-secondary)}.hero-workbench .workbench-detail-rule{display:block;width:100%;height:2px;background:var(--border-subtle);margin-top:var(--space-1)}.hero-workbench .workbench-detail-rule.short{width:70%}.hero-workbench .workbench-review{position:absolute;bottom:12px;right:15px;padding:var(--space-1)var(--space-2);background:var(--bg-terminal);border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:var(--text-xs)}.hero-workbench .workbench-review>span{color:var(--workbench-accent);margin-right:var(--space-1)}.hero-workbench .workbench-footer{min-height:42px;padding:var(--space-2)var(--space-4);display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);border-top:1px solid var(--border-subtle);font-size:var(--text-xs)}.hero-workbench .workbench-phase{color:var(--workbench-accent)}.hero-workbench .workbench-caption{color:var(--text-muted);font-size:var(--text-xs)}.hero-workbench .workbench-progress{height:2px;background:var(--border-subtle)}.hero-workbench .workbench-progress>span{display:block;height:100%;width:100%;background:var(--workbench-accent);transform-origin:left}.hero-workbench.is-animated .workbench-code-focus{animation:workbench-code var(--workbench-cycle)infinite}.hero-workbench.is-animated .workbench-device{animation:workbench-adapt var(--workbench-cycle)infinite}.hero-workbench.is-animated .workbench-note-list{animation:workbench-render var(--workbench-cycle)infinite}.hero-workbench.is-animated .workbench-note-detail{animation:workbench-detail var(--workbench-cycle)infinite}.hero-workbench.is-animated .workbench-review{animation:workbench-review var(--workbench-cycle)infinite}.hero-workbench.is-animated .workbench-progress>span{animation:workbench-progress var(--workbench-cycle)linear infinite}.hero-workbench.is-paused *,.hero-workbench.is-paused *::before,.hero-workbench.is-paused *::after{animation-play-state:paused!important}@keyframes workbench-code{0%,16%{transform:translateY(0)}22%,44%{transform:translateY(calc(var(--workbench-code-line) * 4))}50%,87%{transform:translateY(calc(var(--workbench-code-line) * 9))}94%,100%{transform:translateY(0)}}@keyframes workbench-adapt{0%,43%{width:var(--workbench-phone-width)}55%,87%{width:350px}98%,100%{width:var(--workbench-phone-width)}}@keyframes workbench-render{0%,12%{opacity:.18;transform:translateY(6px)}26%,92%{opacity:1;transform:translateY(0)}100%{opacity:.18;transform:translateY(6px)}}@keyframes workbench-detail{0%,48%{opacity:0;transform:translateX(10px)}59%,85%{opacity:1;transform:translateX(0)}94%,100%{opacity:0;transform:translateX(10px)}}@keyframes workbench-review{0%,70%{opacity:0;transform:translateY(5px)}77%,89%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(5px)}}@keyframes workbench-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}@container(max-width:480px){.hero-workbench .workbench-titlebar { padding: 0 var(--space-2); gap: var(--space-1); }
  .hero-workbench .workbench-example { font-size: var(--text-xs); }
  .hero-workbench .workbench-code { --workbench-code-size: var(--text-xs); padding-left: var(--space-3); }
  .hero-workbench .workbench-device { --workbench-phone-width: 159px; width: 159px; max-width: calc(100% - 24px); }
  .hero-workbench .workbench-note-list { flex-basis: 145px; width: 145px; }
  .hero-workbench .workbench-note-detail { min-width: 0; padding: var(--space-4) var(--space-2); }
  .hero-workbench .workbench-note-detail > strong { font-size: var(--text-base); }
  .hero-workbench .workbench-detail-art span { width: 23px; }
  .hero-workbench .workbench-footer { padding-inline: var(--space-2); }
  .hero-workbench .workbench-caption { font-size: var(--text-xs); }
}@media(prefers-reduced-motion:reduce){.hero-workbench.is-animated *{animation:none!important}}