:root{--surface: #fbfcfd;--surface-alt: #f1f4f7;--surface-sunk: #e9eef2;--card: #ffffff;--border: #dde4ea;--border-strong: #7f8d9b;--text: #16202b;--text-secondary: #46525f;--text-muted: #646f7b;--brand: #16202b;--brand-text: #fbfcfd;--data: #2660a4;--data-soft: #2660a426;--data-far: #5b53c4;--grad-data: linear-gradient(90deg, #1f4f88 0%, var(--data) 42%, var(--data-far) 100%);--grad-ground: radial-gradient(1200px 560px at 6% -14%, rgba(38, 96, 164, .11), transparent 62%), radial-gradient(900px 480px at 98% -2%, rgba(91, 83, 196, .1), transparent 60%), linear-gradient(180deg, #fbfcfd 0%, #edf2f9 100%);--grad-panel: linear-gradient(158deg, #ffffff 0%, #f5f9fd 100%);--grad-track: linear-gradient(90deg, rgba(38, 96, 164, .09), rgba(91, 83, 196, .06));--danger: #b3453a;--danger-bg: #f8e4e1;--success: #2e7d5b;--success-bg: #e2f0ea;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 12px;--radius-xl: 16px;--shadow-card: 0 1px 2px rgba(22, 32, 43, .05), 0 6px 20px rgba(22, 32, 43, .07);--font-serif: "Iowan Old Style", "Georgia", "Times New Roman", serif;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace}@media(prefers-color-scheme:dark){:root{--surface: #0c1219;--surface-alt: #121a24;--surface-sunk: #29343f;--card: #1c2733;--border: #3b4855;--border-strong: #66788a;--text: #eef3f8;--text-secondary: #b7c2cd;--text-muted: #93a1af;--brand: #eef3f8;--brand-text: #131a22;--data: #7fb0e8;--data-soft: #7fb0e833;--data-far: #b79bf0;--grad-data: linear-gradient(90deg, #5f93d8 0%, var(--data) 45%, var(--data-far) 100%);--grad-ground: radial-gradient(1000px 520px at 76% -12%, rgba(127, 176, 232, .17), transparent 62%), radial-gradient(820px 460px at 4% 10%, rgba(150, 126, 240, .13), transparent 60%), linear-gradient(180deg, #0e151d 0%, #090e14 100%);--grad-panel: linear-gradient(158deg, #22313f 0%, #161f2a 100%);--grad-track: linear-gradient(90deg, rgba(127, 176, 232, .12), rgba(183, 155, 240, .09));--danger: #e09287;--danger-bg: #b3453a33;--success: #8cc6ab;--success-bg: #2e7d5b33;--shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35)}}*{box-sizing:border-box}html,body{margin:0;padding:0}html{color-scheme:light dark}body{font-family:var(--font-sans);background:var(--surface);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--text);text-decoration:underline;text-underline-offset:3px}a:hover{text-decoration-thickness:2px}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}button{cursor:pointer}input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{padding:8px 10px;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm);outline:none}input:focus,select:focus,textarea:focus{outline:2px solid var(--text);outline-offset:0}h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);font-weight:400;letter-spacing:-.015em;margin:0}code{font-family:var(--font-mono);font-size:12.5px;background:var(--surface-alt);padding:1px 5px;border:1px solid var(--border)}.card-surface,.panel-surface{background:var(--card);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}.card-surface{transition:transform .18s ease}.card-surface:hover{transform:translateY(-2px)}@media(prefers-reduced-motion:reduce){.card-surface,.card-surface:hover{transition:none;transform:none}}.nav-section-toggle{background:transparent;border:none}.nav-section-toggle:hover{background:var(--surface-sunk);color:var(--text-secondary)}.nav-section-toggle .nav-chevron{transition:transform .14s ease}@media(prefers-reduced-motion:reduce){.nav-section-toggle .nav-chevron{transition:none}}.micro{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}:root{--color-surface: var(--surface);--color-surface-alt: var(--surface-alt);--color-border: var(--border);--color-border-strong: var(--border-strong);--color-text: var(--text);--color-text-secondary: var(--text-secondary);--color-text-muted: var(--text-muted);--color-brand: var(--brand);--color-card: var(--card)}.bookmark-star{opacity:0;transition:opacity .14s ease}.bookmark-star[aria-pressed=true],.bookmark-star:focus-visible,.pipeline-card:hover .bookmark-star,.pipeline-card:focus-within .bookmark-star,.pipeline-row:hover .bookmark-star,.pipeline-row:focus-within .bookmark-star{opacity:1}.pipeline-card .bookmark-star{position:absolute;top:6px;right:6px}.prime-btn{position:absolute;right:10px;bottom:9px;font:inherit;font-size:12px;line-height:1;padding:3px 8px;border-radius:999px;border:1px solid var(--brand);background:transparent;color:var(--brand);cursor:pointer}.prime-btn:hover,.prime-btn:focus-visible{background:var(--brand);color:var(--brand-text)}.pipeline-card{-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:reduce){.bookmark-star{transition:none}}.a-panel{background:var(--grad-panel);border-radius:18px;padding:22px 24px;box-shadow:var(--shadow-card),inset 0 0 0 1px var(--data-soft)}.a-tile{background:var(--grad-panel);border-radius:16px;box-shadow:var(--shadow-card),inset 0 0 0 1px var(--data-soft);transition:transform .22s cubic-bezier(.22,.7,.24,1),box-shadow .22s ease}.a-tile:hover{transform:translateY(-2px)}.a-seg{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--surface-alt)}.a-seg button{padding:6px 14px;border:none;border-radius:999px;background:transparent;color:var(--text-secondary);font-size:12.5px}.a-seg button[aria-pressed=true]{background:var(--card);color:var(--text);font-weight:500;box-shadow:0 1px 2px #16202b14,0 2px 8px #16202b12}.a-bar-track{height:10px;border-radius:999px;background:var(--grad-track);overflow:hidden}.a-bar-fill{height:100%;border-radius:999px;background:var(--grad-data);transform-origin:left center;animation:a-grow .9s cubic-bezier(.22,.7,.24,1) both}@keyframes a-grow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.a-rise{animation:a-rise .7s cubic-bezier(.22,.7,.24,1) both}@keyframes a-rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.a-draw{stroke-dasharray:1400;animation:a-draw 1.6s cubic-bezier(.3,.6,.2,1) both}@keyframes a-draw{0%{stroke-dashoffset:1400}to{stroke-dashoffset:0}}.a-pulse{animation:a-pulse 2.2s ease-in-out infinite}@keyframes a-pulse{0%,to{box-shadow:0 0 color-mix(in srgb,var(--success) 35%,transparent)}50%{box-shadow:0 0 0 5px transparent}}.a-skeleton{border-radius:8px;background:linear-gradient(100deg,var(--data-soft) 8%,color-mix(in srgb,var(--data-far) 18%,transparent) 22%,var(--data-soft) 36%);background-size:400% 100%;animation:a-sweep 1.8s linear infinite}@keyframes a-sweep{0%{background-position:100% 0}to{background-position:0 0}}.a-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--surface-alt);color:var(--text-secondary);font-size:11.5px;white-space:nowrap}.a-chip-good{background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success);font-weight:500}.a-chip-data{background:var(--data-soft);color:var(--data);font-weight:500}.a-chip-warn{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);font-weight:500}.a-row{border-radius:10px;transition:background .16s ease}.a-row:hover{background:var(--surface-alt)}@media(prefers-reduced-motion:reduce){.a-tile,.a-tile:hover,.a-bar-fill,.a-rise,.a-draw,.a-pulse,.a-skeleton{transition:none;transform:none;animation:none}.a-draw{stroke-dasharray:none}}.demos h1{font-size:26px;margin-bottom:4px}.demos .muted{color:var(--text-secondary)}.demos .fine{font-size:12px;color:var(--text-secondary);line-height:1.5}.demos .micro{font-family:var(--font-sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.demos .mono{font-family:var(--font-mono);font-size:12px}.demos code.mono{background:transparent;border:none;padding:0}.demos .btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:7px 12px;cursor:pointer;font-size:13px;line-height:1.2;color:var(--text);text-decoration:none}.demos .btn:hover:not(:disabled){background:var(--surface-alt)}.demos .btn:active:not(:disabled){transform:scale(.98)}.demos .btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}.demos .btn:disabled{opacity:.5;cursor:not-allowed}.demos .btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-text)}.demos .btn-primary:hover:not(:disabled){opacity:.9;background:var(--brand)}.demos .btn-icon{width:32px;height:32px;padding:0;justify-content:center}.demos .card{background:var(--card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:16px}.demos .toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.demos .spacer{flex:1}.demos .section-top{margin-top:22px}.demos .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-sm)}.demos table{width:100%;border-collapse:collapse;font-size:13px}.demos th{text-align:left;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:8px 10px;border-bottom:1px solid var(--border);background:var(--surface-alt)}.demos td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle}.demos tr:last-child td{border-bottom:none}.demos .pill{display:inline-block;padding:2px 7px;border-radius:999px;font-size:11px;font-weight:500;border:1px solid var(--border-strong);white-space:nowrap}.demos .pill-published{color:var(--success);border-color:currentColor}.demos .pill-draft{color:var(--text-secondary);border-color:currentColor}.demos .pill-archived{color:var(--text-muted)}.demos .field{margin-bottom:12px}.demos .field label{display:block;margin-bottom:4px;font-size:12px;color:var(--text-secondary)}.demos input:not([type=checkbox]):not([type=range]):not([type=color]):not(.demo-title-input):not(.demo-description-input),.demos select:not(.demo-status-select),.demos textarea{width:100%;box-sizing:border-box;padding:7px 10px;font-size:13.5px;font-family:inherit;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.demos input:not([type=checkbox]):not([type=range]):not([type=color]):not(.demo-title-input):not(.demo-description-input):focus,.demos select:not(.demo-status-select):focus,.demos textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}.demos textarea{resize:vertical;line-height:1.45}.demos input[type=checkbox]{width:15px;height:15px;margin:0;accent-color:var(--brand)}.demos .demo-button-row input,.demos .demo-button-row select{width:auto}.demos .demo-button-row .demo-button-label{flex:1 1 12ch;min-width:8ch}.demos .demo-button-row .demo-button-action{flex:0 0 auto}.demos .demo-button-row .demo-button-url{flex:2 1 16ch;min-width:12ch}.demos .toolbar select{width:auto;min-width:180px}.demos .error{color:var(--danger);border:1px solid currentColor;border-radius:var(--radius-sm);padding:8px 10px;font-size:13px;margin-bottom:12px}.demos .empty{padding:32px;text-align:center;color:var(--text-secondary)}.demos .split{display:flex;gap:16px;align-items:flex-start}.demos .split-main{flex:2;min-width:0}.demos .split-side{flex:1;min-width:240px}@media(max-width:1100px){.demos .split{flex-direction:column}.demos .split-side{width:100%}}.demo-frame{position:relative;width:100%;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;-webkit-user-select:none;user-select:none}.demo-frame.demo-frame-backdrop{border:none;overflow:visible}.demo-frame.demo-frame-mobile{max-width:300px;margin:0 auto}.demo-variant-switch{display:inline-flex;gap:2px;padding:2px;margin-bottom:10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}.demo-variant-switch button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:4px;background:transparent;color:var(--text-muted);cursor:pointer;transition:background .12s ease,color .12s ease}.demo-variant-switch button:hover{color:var(--text)}.demo-variant-switch button[aria-pressed=true]{background:var(--brand);color:var(--brand-text)}.demo-variant-switch button:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}.demo-stage{position:absolute}.demo-stage-image{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:var(--surface-alt)}.demo-stage-image img{display:block;width:100%;height:100%;object-fit:cover}.demo-hotspot{position:absolute;border:2px solid var(--border);border-radius:6px;touch-action:none}.demo-hotspot:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.demo-hotspot-dim{box-shadow:0 0 0 2px #ffffffb3,0 0 0 9999px #11182738}.demo-hotspot-ring{box-shadow:0 0 0 2px #ffffffb3}.demo-hotspot-none{border-style:dashed;border-color:var(--border)}.demo-hotspot-handle{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;background:var(--success);border:2px solid #fff;border-radius:3px;cursor:nwse-resize}.demo-tip{position:absolute;max-width:min(260px,90%);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 12px;box-shadow:0 8px 24px #1018282e;font-size:13px;line-height:1.45;pointer-events:none}.demo-tip b{display:block;margin-bottom:2px}.demo-tip-draggable{pointer-events:auto;cursor:move;outline:1px dashed var(--brand);outline-offset:2px;touch-action:none}.demo-steps{display:flex;flex-direction:column;gap:6px}.demo-step{display:grid;grid-template-columns:20px 72px 1fr auto;gap:8px;align-items:center;padding:6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}.demo-step:hover{background:var(--surface-alt)}.demo-step.active{border-color:var(--brand)}.demo-step:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}.demo-step img,.demo-cover{width:72px;aspect-ratio:16 / 10;object-fit:cover;object-position:top left;border-radius:3px;border:1px solid var(--border);background:var(--surface-alt);display:block}.demo-cover{width:64px}.demo-step-actions{display:flex;gap:2px}.demo-step-actions .btn{padding:2px 6px;font-size:12px}.demo-frame-swatches{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.demo-frame-swatch{width:28px;height:28px;padding:0;border:2px solid transparent;border-radius:6px;box-shadow:inset 0 0 0 1px var(--border);cursor:pointer}.demo-frame-swatch.active{border-color:var(--brand)}.demo-frame-swatch:disabled{cursor:default;opacity:.6}.demo-frame-swatch-none{background:var(--surface)}.demo-gradient-row{display:flex;gap:12px}.demo-gradient-row .field{flex:0 0 auto}.demos input[type=color]{width:34px;height:34px;padding:2px;border-radius:var(--radius-sm);cursor:pointer}.demos input[type=color]:disabled{cursor:default;opacity:.6}.demo-outline-row{display:flex;gap:12px;align-items:flex-start}.demo-outline-row .field:first-child{flex:1}.demo-cursor-row{display:grid;grid-template-columns:1fr 120px;gap:12px;align-items:start}.demo-cursor-preview{position:relative;height:72px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden}.demo-cursor-preview-card{position:absolute;top:12px;right:12px;bottom:12px;left:12px;border-radius:4px;background:var(--surface);box-shadow:0 6px 16px #10182840}.demo-cursor-preview svg,.demo-cursor-preview .demo-cursor-dot{position:relative}.demo-cursor-preview .micro{position:relative}.demo-cursor-dot{display:block;border-radius:999px;box-shadow:0 0 0 2px #ffffffe6}.demo-cursor-detail-row{display:flex;gap:12px;align-items:flex-end}.demo-cursor-detail-row>label{display:block}.demo-cursor-detail-row>label>span:first-child{display:block;margin-bottom:4px;font-size:12px;color:var(--text-secondary)}.demo-cursor-size{flex:1;min-width:0}.demo-cursor-detail-row>label>input{display:block}.demos .card input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:34px;margin:0;padding:0;border:0;background:transparent;box-shadow:none;cursor:pointer}.demos .card input[type=range]:focus{box-shadow:none}.demos .card input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--border-strong)}.demos .card input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--brand);border:2px solid var(--surface);box-shadow:0 1px 3px #10182859}.demos .card input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:var(--border-strong)}.demos .card input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--brand);border:2px solid var(--surface);box-shadow:0 1px 3px #10182859}.demos .card input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}.demos .card input[type=range]:disabled{cursor:default;opacity:.5}.demos .switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}.demos .switch input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.demos .switch-track{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background:var(--border-strong);transition:background .15s ease}.demos .switch-track:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #10182859;transition:transform .15s ease}.demos .switch input:checked+.switch-track{background:var(--success)}.demos .switch input:checked+.switch-track:after{transform:translate(16px)}.demos .switch input:focus-visible+.switch-track{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}.demos .switch input:disabled{cursor:default}.demos .switch input:disabled+.switch-track{opacity:.5}.demo-shadow-box{display:flex;align-items:center;height:34px}.demo-shadow-box input{width:auto;margin:0}.demos .demo-title-input,.demos .demo-description-input{width:auto;field-sizing:content;max-width:60ch;min-width:12ch;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);padding:2px 6px;margin-left:-6px}.demo-header{margin-bottom:16px}.demos .demo-title-input{font-size:20px;font-weight:600;line-height:1.3;flex:0 1 auto}.demos .demo-description-input{font-size:14px;color:var(--text-secondary);margin-top:0;display:block}.demos .demo-title-input:hover:not(:disabled),.demos .demo-description-input:hover:not(:disabled){border-color:var(--border)}.demos .demo-title-input:focus,.demos .demo-description-input:focus{outline:none;background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}.demos .demo-title-input:disabled,.demos .demo-description-input:disabled{background:transparent;opacity:1}.demos .demo-status-select{width:auto;flex-shrink:0;padding:3px 8px;font-size:12px;font-weight:500;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);cursor:pointer}.demos .demo-status-select:disabled{cursor:not-allowed;opacity:.6}.demos .demo-status-select.demo-status-published{color:var(--success);border-color:currentColor}.demos .demo-status-select.demo-status-draft{color:var(--text-secondary);border-color:currentColor}.demos .demo-status-select.demo-status-archived{color:var(--text-muted)}.demo-button-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}.demo-button-row input,.demo-button-row select{width:auto}.demo-button-label{flex:1 1 12ch;min-width:8ch}.demo-button-action{flex:0 0 auto}.demo-button-url{flex:2 1 16ch;min-width:12ch}