*{box-sizing:border-box}
body{font-family:var(--talas-font);font-size:var(--talas-font-size);color:var(--talas-text);background:var(--talas-page-bg);margin:0;padding:20px;line-height:1.5;transition:background .2s,color .2s}
h1{color:var(--talas-selected);margin:0 0 8px;font-size:24px}
.subtitle{color:var(--talas-text-muted);margin-bottom:24px}
.theme-switcher{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px;padding:12px 14px;background:var(--talas-content-bg);border:1px solid var(--talas-header-border);border-radius:var(--talas-radius);box-shadow:var(--talas-elevation)}
.theme-switcher .ts-label{font-weight:600;margin-right:4px;color:var(--talas-text)}
.theme-btn{border:2px solid var(--talas-button-border);border-radius:var(--talas-radius);padding:6px 12px;cursor:pointer;font:inherit;background:var(--talas-button-bg);color:var(--talas-text);display:inline-flex;align-items:center;gap:6px}
.theme-btn:hover{border-color:var(--talas-primary)}
.theme-btn.active{border-color:var(--talas-primary);background:var(--talas-primary);color:var(--talas-selected-text);font-weight:600}
.theme-btn .swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex-shrink:0}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:20px}
talas-card{display:block}
.k-button,button.k-button{display:inline-flex;align-items:center;justify-content:center;padding:4px 12px;margin:2px 4px 2px 0;border:1px solid var(--talas-button-border);border-radius:var(--talas-radius);background:linear-gradient(to bottom,rgba(255,255,255,.45) 0,rgba(255,255,255,0) 100%),var(--talas-button-bg);color:var(--talas-text);font:inherit;cursor:pointer;outline:none}
.k-button:hover{background:linear-gradient(to bottom,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%),var(--talas-hover-bg);border-color:var(--talas-hover-border)}
.k-button.primary{background:linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.23) 100%),var(--talas-primary);border-color:var(--talas-primary-border);color:#fff}
.k-button.primary:hover{background:var(--talas-primary-hover);border-color:var(--talas-primary-border)}
pre.log{background:#f5f5f5;border:1px solid var(--talas-header-border);border-radius:var(--talas-radius);padding:8px;margin-top:10px;max-height:120px;overflow:auto;font-size:11px;white-space:pre-wrap}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.row>*{flex:1;min-width:180px}
.guide-list{margin:0;padding-left:18px}
.guide-list li{margin:4px 0}
.guide-list code{background:var(--talas-alt-bg);padding:1px 5px;border-radius:3px;font-size:11px}