:root{--bg:#fafafa;--surface:#fff;--border:#e0e0e0;--border-strong:#c8c8c8;--text:#1f2328;--text-muted:#586069;--accent:#2962ff;--accent-soft:#e3f2fd;--danger:#c62828;--code-bg:#0d1117;--code-fg:#e6edf3}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.5}main{max-width:960px;margin:0 auto;padding:32px 24px 80px}.example-header{margin-bottom:24px}.example-header h1{margin:0 0 8px;font-size:1.75rem}.example-header p{color:var(--text-muted);max-width:60ch;margin:0}.back-link{color:var(--accent);margin-bottom:16px;font-size:.875rem;text-decoration:none;display:inline-block}.back-link:hover{text-decoration:underline}.demo{background:var(--surface);border:1px solid var(--border);border-radius:8px;margin:24px 0;padding:20px}.sortable-list{border:2px dashed var(--border);background:var(--bg);border-radius:8px;min-height:80px;margin:0;padding:8px;list-style:none}.sortable-item{background:var(--surface);border:1px solid var(--border);cursor:grab;-webkit-user-select:none;user-select:none;border-radius:6px;margin:6px 0;padding:12px 14px;transition:background-color .12s,border-color .12s,transform .12s}.sortable-item:hover{background:#f5f7fa}.sortable-item:active{cursor:grabbing}.sortable-ghost{opacity:.4;background:var(--accent-soft)}.sortable-chosen{background:var(--accent-soft);border-color:var(--accent)}.sortable-drag{opacity:.6}.sortable-selected{background:#fff8e1;border-color:#f9a825}.sortable-focused{outline:2px solid var(--accent);outline-offset:2px}.sortable-duplicate{outline:2px dashed var(--accent);outline-offset:2px}.code-section{margin-top:32px}.code-section h2{margin:0 0 12px;font-size:1.125rem}pre.code-block{background:var(--code-bg);color:var(--code-fg);border-radius:8px;margin:0;padding:16px 18px;font-size:.8125rem;line-height:1.55;overflow-x:auto}pre.code-block code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}.notes{background:#fff8e1;border-left:4px solid #f9a825;border-radius:4px;margin:16px 0;padding:12px 16px;font-size:.9375rem}.notes strong{color:#6d4c00}