body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;color:#111;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;font-size:12px}.page{max-width:620px;margin:0 auto;padding:32px 20px 64px}h1{margin:0 0 8px;font-size:22px}h2{margin:0 0 4px;font-size:15px}.sub,.blurb{margin:0 0 16px;font-size:13px;line-height:1.5;color:#6b7280}.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.tab{padding:6px 12px;font-size:13px;color:#374151;background:#fff;border:1px solid #d1d5db;border-radius:999px;cursor:pointer}.tab:hover{border-color:#9ca3af}.tab-active{color:#fff;background:#111;border-color:#111}.toggle{display:flex;gap:8px;align-items:center;margin-bottom:16px;font-size:13px;color:#6b7280}.stage{margin-bottom:40px}.panel{padding-top:24px;margin-top:8px;border-top:1px solid #e5e7eb}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 20px;margin:14px 0 18px}.ctl{display:flex;gap:8px;align-items:center;font-size:13px;color:#374151}.ctl-wide{flex-direction:column;gap:4px;align-items:stretch}.ctl input[type=range],.ctl select{width:100%}.ctl input:disabled+span{color:#9ca3af}.ctl code{padding:1px 4px;background:#f3f4f6;border-radius:4px}.snippet{padding:12px 14px;margin:0;overflow-x:auto;font-size:12px;line-height:1.6;color:#e5e7eb;background:#111827;border-radius:10px}.note{padding-top:20px;margin-top:24px;font-size:12px;line-height:1.6;color:#9ca3af;border-top:1px solid #e5e7eb}.card-item{padding:12px;margin-bottom:8px;list-style:none;background:#fafafa;border:1px solid #e5e7eb;border-radius:10px}.card-item-top{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:13px}.card-item-top button{padding:3px 8px;margin-left:4px;font-size:11px;background:#fff;border:1px solid #d1d5db;border-radius:6px;cursor:pointer}.card-item small{display:block;margin-top:6px;font-size:11px;color:#9ca3af}.stripe{position:relative;display:flex;align-items:center;gap:8px}.stripe-fill{height:14px;border-radius:3px;transition:width .15s linear}.stripe-value{font-size:11px;color:#6b7280;font-variant-numeric:tabular-nums}.headless ul{padding-left:18px;font-size:13px;line-height:1.8}.headless-total{display:flex;gap:12px;align-items:center;font-size:13px;font-weight:600}.headless-total button{padding:3px 8px;font-size:11px;font-weight:400;background:#fff;border:1px solid #d1d5db;border-radius:6px;cursor:pointer}