:root{--color-bg:#fff;--color-text-primary:#111;--color-text-secondary:#444;--color-text-muted:#666;--color-border:#e5e7eb;--color-hover:#f3f4f6;--color-accent:#111;--color-error:#ef4444;--font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-size-body:14px;--font-size-meta:13px;--font-size-h1:24px;--font-size-h2:18px;--font-size-h3:16px;--radius:4px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);font-size:var(--font-size-body);color:var(--color-text-primary);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;line-height:1.5}h1,h2,h3,h4,h5,h6{color:var(--color-text-primary);margin-bottom:var(--spacing-sm);font-weight:600}h1{font-size:var(--font-size-h1)}h2{font-size:var(--font-size-h2)}h3{font-size:var(--font-size-h3)}p{margin-bottom:var(--spacing-md);color:var(--color-text-secondary)}a{color:var(--color-text-primary);text-decoration:none}a:hover{text-decoration:underline}.container{max-width:1200px;padding:0 var(--spacing-md);margin:0 auto}.panel{border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--spacing-md);margin-bottom:var(--spacing-md);background-color:var(--color-bg)}.button{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-body);color:var(--color-bg);background-color:var(--color-text-primary);border:1px solid var(--color-text-primary);border-radius:var(--radius);cursor:pointer;text-align:center;font-weight:500;transition:opacity .2s;display:inline-block}.button:hover{opacity:.9;text-decoration:none}.button-outline{color:var(--color-text-primary);background-color:#0000}.button-outline:hover{background-color:var(--color-hover)}.input,.textarea,.select{width:100%;padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius);font-family:inherit;font-size:var(--font-size-body);color:var(--color-text-primary);background-color:var(--color-bg)}.input:focus,.textarea:focus,.select:focus{border-color:var(--color-text-primary);outline:none}.label{font-size:var(--font-size-meta);color:var(--color-text-secondary);margin-bottom:var(--spacing-xs);font-weight:500;display:block}.tabs{border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-md);display:flex;overflow-x:auto}.tab{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-body);color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000}.tab:hover{color:var(--color-text-primary)}.tab.active{color:var(--color-text-primary);border-bottom-color:var(--color-text-primary);font-weight:500}table{border-collapse:collapse;width:100%;margin-bottom:var(--spacing-md)}th,td{padding:var(--spacing-sm);text-align:left;border-bottom:1px solid var(--color-border);font-size:var(--font-size-body)}th{color:var(--color-text-secondary);background-color:var(--color-hover);font-weight:500}td{color:var(--color-text-primary)}.meta-text{font-size:var(--font-size-meta);color:var(--color-text-muted)}.error-text{color:var(--color-error);font-size:var(--font-size-meta)}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.app-header{border-bottom:1px solid var(--color-border);padding:var(--spacing-md) 0;margin-bottom:var(--spacing-lg)}.brand-link{color:var(--color-text-primary);font-weight:600;text-decoration:none}.brand-subtitle{color:var(--color-text-muted);font-size:var(--font-size-meta);margin-left:var(--spacing-sm)}.dropzone{border:2px dashed var(--color-border);border-radius:var(--radius);padding:var(--spacing-xl);text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s}.dropzone:hover,.dropzone.active{border-color:var(--color-text-primary);background-color:var(--color-hover)}pre.code-output{background-color:var(--color-hover);padding:var(--spacing-md);border-radius:var(--radius);border:1px solid var(--color-border);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:var(--font-size-meta);white-space:pre-wrap;color:var(--color-text-primary);overflow-x:auto}.demo-controls{gap:8px;margin-bottom:12px;display:flex}.demo-controls button{border:1px solid var(--color-border);color:var(--color-text-primary);border-radius:var(--radius);cursor:pointer;background:#fff;padding:6px 10px;font-size:12px}.demo-controls button:hover{background:var(--color-hover)}