.tm-demo-bar{background:var(--bg-subtle,#6366f10f);border:1px solid var(--border,#94a3b833);border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;padding:10px 14px;display:flex}.tm-demo-bar-left{color:var(--fg-muted,#64748b);align-items:center;gap:8px;font-size:13px;display:flex}.tm-demo-tabs{flex-wrap:wrap;align-items:center;gap:6px;display:inline-flex}.tm-demo-tab{appearance:none;border:1px solid var(--border,#94a3b847);background:var(--bg-elevated,#fff);color:var(--fg,#0f172a);cursor:pointer;border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600;transition:all .15s}.tm-demo-tab:hover{border-color:var(--accent,#6366f1)}.tm-demo-tab.active{background:var(--fg,#0f172a);color:var(--bg-elevated,#fff);border-color:var(--fg,#0f172a)}.tm-workspace{grid-template-columns:minmax(320px,460px) minmax(0,1fr);align-items:start;gap:28px;margin-top:12px;display:grid}@media (max-width:920px){.tm-workspace{grid-template-columns:1fr}}.tm-preview-col{flex-direction:column;gap:14px;display:flex}.tm-canvas-card{cursor:zoom-in;background:#070c24;border:2px solid #8b5cf66b;border-radius:22px;width:100%;max-width:440px;margin:0 auto;transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden;box-shadow:0 18px 42px -14px #0f172a59}.tm-canvas-card:hover{transform:translateY(-2px);box-shadow:0 22px 48px -12px #6366f161}.tm-canvas{width:100%;height:auto;display:block}.tm-zoom-pill{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;background:#0f172ac7;border:1px solid #ffffff29;border-radius:999px;align-items:center;gap:5px;padding:6px 11px;font-size:12px;font-weight:600;display:inline-flex;position:absolute;bottom:12px;right:12px}.tm-controls-row{background:var(--bg-elevated,#fff);border:1px solid var(--border,#94a3b838);border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex}.tm-control-group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.tm-control-label{color:var(--fg-muted,#64748b);text-transform:uppercase;letter-spacing:.04em;margin-right:4px;font-size:12px;font-weight:700}.tm-format-btn{border:1px solid var(--border,#94a3b847);color:var(--fg,#0f172a);cursor:pointer;background:0 0;border-radius:9px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:600;transition:all .15s;display:inline-flex}.tm-format-btn.active{background:var(--fg,#0f172a);color:var(--bg-elevated,#fff);border-color:var(--fg,#0f172a)}.tm-color-btn{border:1.5px solid var(--border,#94a3b847);background:var(--bg-elevated,#fff);color:var(--fg,#0f172a);cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:5px 10px;font-size:12.5px;font-weight:600;transition:all .15s;display:inline-flex}.tm-color-btn.active{border-color:var(--fg,#0f172a);box-shadow:0 0 0 2px #6366f12e}.tm-color-dot{border:1px solid #ffffff59;border-radius:50%;width:13px;height:13px}.tm-actions-bar{flex-wrap:wrap;gap:8px;display:flex}.tm-copy-toast{color:#059669;background:#10b9811a;border:1px solid #10b9814d;border-radius:10px;padding:9px 13px;font-size:13px;font-weight:600}.tm-details-col{flex-direction:column;gap:18px;display:flex}.tm-panel{background:var(--bg-elevated,#fff);border:1px solid var(--border,#94a3b838);border-radius:18px;padding:20px 22px}.tm-panel-title{color:var(--fg,#0f172a);margin:0 0 4px;font-size:18px;font-weight:800}.tm-panel-sub{color:var(--fg-muted,#64748b);margin:0 0 16px;font-size:13.5px;line-height:1.5}.tm-post-list{flex-direction:column;gap:10px;display:flex}.tm-post-item{background:var(--bg-subtle,#94a3b80f);border:1.5px solid var(--border,#94a3b833);border-radius:13px;flex-direction:column;gap:8px;padding:13px 15px;transition:border-color .15s,background .15s;display:flex}.tm-post-item.selected{background:#6366f10d;border-color:#6366f1}.tm-post-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.tm-post-badges{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.tm-time-badge{color:var(--fg,#0f172a);background:#0f172a12;border-radius:6px;padding:3px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700}.tm-type-badge{color:var(--fg-muted,#475569);background:#94a3b826;border-radius:999px;padding:2px 8px;font-size:11.5px;font-weight:700}.tm-oncard-badge{color:#fff;background:#6366f1;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:700}.tm-post-text{color:var(--fg,#0f172a);word-break:break-word;margin:0;font-size:14px;line-height:1.55}.tm-post-bottom{color:var(--fg-muted,#64748b);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;display:flex}.tm-post-metrics{align-items:center;gap:10px;display:flex}.tm-post-actions{align-items:center;gap:8px;display:flex}.tm-pick-btn{appearance:none;border:1px solid var(--border,#94a3b852);background:var(--bg-elevated,#fff);color:var(--fg,#0f172a);cursor:pointer;border-radius:7px;padding:4px 10px;font-size:12px;font-weight:600}.tm-pick-btn:hover{color:#6366f1;border-color:#6366f1}.tm-ext-link{color:#6366f1;align-items:center;gap:4px;font-size:12px;font-weight:600;text-decoration:none;display:inline-flex}.tm-ext-link:hover{text-decoration:underline}.tm-footnote{color:var(--fg-muted,#64748b);margin-top:12px;font-size:12px;line-height:1.5}.tm-cases-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}@media (max-width:640px){.tm-cases-grid{grid-template-columns:1fr}}.tm-case-box{background:var(--bg-subtle,#94a3b80f);border:1px solid var(--border,#94a3b82e);border-radius:12px;padding:12px 13px}.tm-case-box strong{color:var(--fg,#0f172a);margin-bottom:4px;font-size:13px;font-weight:700;display:block}.tm-case-box p{color:var(--fg-muted,#64748b);margin:0;font-size:12.5px;line-height:1.45}.tm-lightbox{z-index:9999;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#070c24d9;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.tm-lightbox-inner{flex-direction:column;align-items:center;gap:12px;max-width:min(92vw,620px);max-height:90vh;display:flex;position:relative}.tm-lightbox-canvas{border-radius:20px;width:auto;max-width:100%;height:auto;max-height:82vh;box-shadow:0 25px 60px #0000008c}.tm-lightbox-close{color:#0f172a;cursor:pointer;background:#fff;border:none;border-radius:50%;width:36px;height:36px;font-size:18px;font-weight:800;position:absolute;top:-14px;right:-14px;box-shadow:0 6px 18px #00000040}
