.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:12px;min-height:48px;padding:0 15px;border-bottom:1px solid var(--border-subtle);font-size:12px}.hero-workbench .workbench-file{display:flex;align-items:center;gap:9px;white-space:nowrap}.hero-workbench .workbench-file>span{color:var(--workbench-accent);font-size:16px}.hero-workbench .workbench-example{margin-left:auto;color:var(--text-secondary);font-size:10px}.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:17px 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{position:relative;overflow:hidden;padding:17px 20px;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:1;border:0;padding:0;margin:0;background:0 0;color:var(--text-secondary);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:22px;white-space:pre}.hero-workbench .workbench-code code b{color:var(--workbench-accent);font-weight:400}.hero-workbench .workbench-code-focus{position:absolute;top:17px;left:0;width:100%;height:22px;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:9px;letter-spacing:.09em}.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:12px;padding:6px;background:var(--bg-terminal);box-shadow:8px 8px color-mix(in srgb,var(--workbench-accent) 10%,transparent);overflow:hidden}.hero-workbench .workbench-app-bar{height:31px;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--border-subtle);padding:0 6px 6px;font-size:11px}.hero-workbench .workbench-app-mark{font-weight:700;font-size:20px;color:var(--workbench-accent)}.hero-workbench .workbench-app-menu{margin-left:auto;font-size:20px}.hero-workbench .workbench-app-body{display:flex;height:calc(100% - 31px)}.hero-workbench .workbench-note-list{flex:0 0 166px;width:166px;padding:10px 7px}.hero-workbench .workbench-list-heading{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:var(--text-secondary);margin-bottom:9px}.hero-workbench .workbench-list-heading>span{color:var(--workbench-accent);font-size:15px}.hero-workbench .workbench-note{display:flex;flex-direction:column;gap:7px;padding:10px;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:7px;letter-spacing:.08em;color:var(--workbench-accent)}.hero-workbench .workbench-note strong{font-family:var(--font-ui);font-size:14px;font-weight:550;line-height:1.2;letter-spacing:-.025em}.hero-workbench .workbench-note-foot{display:flex;justify-content:space-between;font-size:7px;color:var(--text-secondary)}.hero-workbench .workbench-note-secondary{margin-top:7px;padding:8px 10px;gap:5px}.hero-workbench .workbench-note-secondary strong{font-size:11px}.hero-workbench .workbench-note-detail{flex:1;min-width:155px;padding:16px 14px;border-left:1px solid var(--border-subtle)}.hero-workbench .workbench-note-detail>strong{display:block;margin-top:10px;font:550 18px/1.12 var(--font-ui);letter-spacing:-.04em}.hero-workbench .workbench-detail-art{display:flex;align-items:end;gap:5px;height:45px;margin:12px 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 9px;font:11px/1.35 var(--font-ui);color:var(--text-secondary)}.hero-workbench .workbench-detail-rule{display:block;width:100%;height:2px;background:var(--border-subtle);margin-top:5px}.hero-workbench .workbench-detail-rule.short{width:70%}.hero-workbench .workbench-review{position:absolute;bottom:12px;right:15px;padding:6px 9px;background:var(--bg-terminal);border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:9px}.hero-workbench .workbench-review>span{color:var(--workbench-accent);margin-right:4px}.hero-workbench .workbench-footer{min-height:42px;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--border-subtle);font-size:10px}.hero-workbench .workbench-phase{color:var(--workbench-accent)}.hero-workbench .workbench-caption{color:var(--text-muted);font-size:9px}.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(88px)}50%,87%{transform:translateY(198px)}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:370px){.hero-workbench .workbench-titlebar { padding: 0 10px; gap: 5px; }
  .hero-workbench .workbench-example { font-size: 8px; }
  .hero-workbench .workbench-code { padding-left: 12px; }
  .hero-workbench .workbench-code code { font-size: 12px; }
  .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: 15px 9px; }
  .hero-workbench .workbench-note-detail > strong { font-size: 15px; }
  .hero-workbench .workbench-detail-art span { width: 23px; }
  .hero-workbench .workbench-footer { padding-inline: 10px; }
  .hero-workbench .workbench-caption { font-size: 8px; }
}@media(prefers-reduced-motion:reduce){.hero-workbench.is-animated *{animation:none!important}}