.ts-modes{border:1px solid var(--rule);border-radius:999px;display:inline-flex;overflow:hidden}.ts-mode{font:600 .78rem var(--sans);background:var(--paper-raised);color:var(--text-soft);cursor:pointer;border:0;padding:.3rem .85rem}.ts-mode[aria-pressed=true]{background:var(--accent);color:#fff}.ts-read{padding:1.5rem 0 2rem}.ts-read__grid{grid-template-columns:minmax(0,1fr) 22rem;align-items:start;gap:2rem;display:grid}.ts-read__left,.ts-read__right{align-content:start;gap:.75rem;min-width:0;display:grid}.ts-read__actions{flex-wrap:wrap;gap:.5rem;display:flex}.ts-drop{border:1px dashed var(--rule);text-align:center;border-radius:.6rem;padding:1.4rem 1rem}.ts-drop.is-over{border-color:var(--accent);background:var(--accent-soft)}.ts-drop p{color:var(--text-soft);margin:0;font-size:.85rem}.ts-stage{border:1px solid var(--rule);background:#111;border-radius:.6rem;line-height:0;position:relative;overflow:hidden}.ts-stage video,.ts-shot{object-fit:contain;width:100%;max-height:60vh;display:block}.ts-marks{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.ts-status{border:1px solid var(--rule);background:var(--paper-raised);color:var(--text-soft);border-radius:.4rem;margin:0;padding:.5rem .7rem;font-size:.86rem}.ts-status[data-state=good]{color:#14532d;background:#dcfce7;border-color:#86efac}.ts-status[data-state=bad]{color:#92400e;background:#fef3c7;border-color:#fcd34d}.ts-status[data-state=busy]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.ts-result{gap:.6rem;display:grid}.ts-readout{border:1px solid var(--rule);background:var(--paper-raised);white-space:pre-wrap;word-break:break-word;border-radius:.5rem;max-height:40vh;margin:0;padding:.7rem;font-size:.82rem;overflow:auto}.ts-read__buttons{flex-wrap:wrap;gap:.4rem;display:flex}@media (width<=900px){.ts-read__grid{grid-template-columns:minmax(0,1fr)}}.ts{grid-template-columns:minmax(0,1fr) 21rem;align-items:start;gap:2rem;padding:1.5rem 0 2rem;display:grid}.ts-kinds{flex-wrap:wrap;gap:.35rem;margin-bottom:.6rem;display:flex}.ts-kind{font:600 .82rem var(--sans);cursor:pointer;background:var(--paper-raised);border:1px solid var(--rule);color:var(--text-soft);border-radius:999px;padding:.45rem .8rem}.ts-kind:hover{border-color:var(--accent);color:var(--accent)}.ts-kind.is-active{background:var(--accent);border-color:var(--accent);color:#fff}.ts-kind-blurb{color:var(--text-soft);margin:0 0 1.1rem;font-size:.86rem}.ts-form{gap:.85rem;display:grid}.ts-field{gap:.3rem;display:grid}.ts-field__label{font:600 .78rem var(--sans);color:var(--text-soft)}.ts-field__help{color:var(--text-faint);font-size:.76rem}.ts-field--check{grid-auto-flow:column;justify-content:start;align-items:center;gap:.5rem}.ts-field--check span{font-size:.86rem}.ts-field--color{grid-auto-flow:row}.ts-field--color input[type=color]{border:1px solid var(--rule-strong);border-radius:var(--radius-sm);background:var(--paper-raised);cursor:pointer;width:100%;height:2.3rem;padding:.15rem}.ts-range{width:100%;accent-color:var(--accent)}.ts-style{border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper-raised);margin-top:1.25rem}.ts-style summary{cursor:pointer;padding:.75rem .9rem;font-size:.9rem;font-weight:650}.ts-style__grid{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));align-items:end;gap:.9rem;padding:0 .9rem .5rem;display:grid}.ts-colors{grid-template-columns:1fr 1fr auto;align-items:end;gap:.5rem;display:grid}.ts-note{color:var(--text-faint);margin:0;padding:0 .9rem .9rem;font-size:.78rem}.ts-output{top:calc(var(--header-h) + 1rem);gap:.85rem;display:grid;position:sticky}.ts-preview{background:var(--paper-raised);border:1px solid var(--rule);border-radius:var(--radius);background-image:linear-gradient(45deg, var(--paper-sunk) 25%, transparent 25%), linear-gradient(-45deg, var(--paper-sunk) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--paper-sunk) 75%), linear-gradient(-45deg, transparent 75%, var(--paper-sunk) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;place-items:center;min-height:15rem;padding:1rem;display:grid}.ts-preview canvas{max-width:100%;height:auto;image-rendering:pixelated}.ts-preview[data-state=empty] canvas,.ts-preview[data-state=error] canvas{display:none}.ts-problem{color:var(--text-soft);text-align:center;max-width:18rem;margin:0;font-size:.86rem}.ts-preview[data-state=error] .ts-problem{color:var(--danger)}.ts-download{flex-wrap:wrap;gap:.4rem;display:flex}.ts-download .btn{flex:1}.ts-facts{grid-template-columns:1fr 1fr;gap:.4rem;margin:0;display:grid}.ts-fact{background:var(--paper-raised);border:1px solid var(--rule);border-radius:var(--radius-sm);padding:.4rem .55rem}.ts-fact dt{font:600 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}.ts-fact dd{font:600 .88rem var(--sans);margin:.1rem 0 0}.ts-raw{font-size:.82rem}.ts-raw summary{cursor:pointer;color:var(--text-soft)}.ts-raw pre{background:var(--paper-raised);border:1px solid var(--rule);border-radius:var(--radius-sm);font:.76rem var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;max-height:12rem;margin:.5rem 0 0;padding:.6rem;overflow-y:auto}.ts-library-wrap{padding-bottom:3rem}.ts-subhead{font:600 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin:0 0 .75rem}.ts-library{grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:.7rem;display:grid}.ts-saved{background:var(--paper-raised);border:1px solid var(--rule);border-radius:var(--radius);grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;padding:.6rem .7rem;display:grid}.ts-saved__thumb{width:3.5rem;height:3.5rem;image-rendering:pixelated;background:#fff;border-radius:4px}.ts-saved__body{gap:.1rem;min-width:0;display:grid}.ts-saved__body strong{font-size:.92rem}.ts-saved__body span{color:var(--text-faint);font-size:.75rem}.ts-saved__snippet{text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);overflow:hidden}.ts-saved__actions{gap:.25rem;display:grid}@media (width<=940px){.ts{grid-template-columns:1fr}.ts-output{position:static}.ts-facts{grid-template-columns:repeat(3,1fr)}}@media (width<=560px){.ts-facts{grid-template-columns:1fr 1fr}}