.trn{display:flex;flex-direction:column;gap:20px}.trn__presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 16px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border:1px solid var(--color-border);border-radius:var(--radius-md)}.trn__presets-label{font-size:14px;font-weight:600;color:var(--color-text)}.trn__preset-btn{padding:6px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-size:13px;cursor:pointer;transition:background var(--transition-fast, .15s),border-color var(--transition-fast, .15s)}.trn__preset-btn:hover{border-color:var(--color-primary, #2b6cff);color:var(--color-primary, #2b6cff)}.trn__main{display:grid;grid-template-columns:1fr 1fr;gap:20px}.trn__config{display:flex;flex-direction:column;gap:16px;padding:18px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border:1px solid var(--color-border);border-radius:var(--radius-md)}.trn__field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--color-text-soft)}.trn__field label{font-weight:500}.trn__field strong{color:var(--color-primary, #2b6cff);font-family:var(--font-mono)}.trn__field input[type=range]{width:100%;accent-color:var(--color-primary, #2b6cff)}.trn__field select{width:100%;padding:6px 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-size:13px}.trn__btn-group{display:flex;gap:6px}.trn__type-btn{flex:1;padding:7px 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text-soft);font-size:13px;cursor:pointer;transition:all var(--transition-fast, .15s)}.trn__type-btn:hover{border-color:var(--color-primary, #2b6cff)}.trn__type-btn.is-active{background:var(--color-primary, #2b6cff);border-color:var(--color-primary, #2b6cff);color:#fff}.trn__bezier{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg)}.trn__bezier-svg{display:flex;justify-content:center}.trn__bezier-svg svg{width:220px;height:220px;overflow:visible;touch-action:none}.trn__bezier-grid{fill:var(--color-bg-soft, rgba(0, 0, 0, .03));stroke:var(--color-border);stroke-width:1}.trn__bezier-ref{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3;opacity:.6}.trn__bezier-ctrl{stroke:var(--color-text-soft, #999);stroke-width:1.5;stroke-dasharray:4 3}.trn__bezier-curve{fill:none;stroke:var(--color-primary, #2b6cff);stroke-width:2.5}.trn__bezier-end{fill:var(--color-text-soft, #999)}.trn__bezier-handle{fill:var(--color-primary, #2b6cff);stroke:#fff;stroke-width:2;cursor:grab}.trn__bezier-handle:active{cursor:grabbing;r:8}.trn__bezier-vals{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.trn__bezier-vals label{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--color-text-soft)}.trn__bezier-vals input{width:100%;padding:4px 6px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-family:var(--font-mono);font-size:12px}.trn__steps{display:flex;flex-direction:column;gap:14px}.trn__output{display:flex;flex-direction:column;gap:16px}.trn__preview{padding:16px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border:1px solid var(--color-border);border-radius:var(--radius-md)}.trn__preview-hint{margin:0 0 12px;font-size:13px;color:var(--color-text-soft);text-align:center}.trn__stage{display:flex;align-items:center;justify-content:center;min-height:200px;padding:24px;border:1px dashed var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-bg);background-image:linear-gradient(var(--color-border) 1px,transparent 1px),linear-gradient(90deg,var(--color-border) 1px,transparent 1px);background-size:20px 20px}.trn__box{display:flex;align-items:center;justify-content:center;width:100px;height:100px;border-radius:12px;background:linear-gradient(135deg,#2b6cff,#7a4cff);color:#fff;font-size:14px;font-weight:600;box-shadow:0 4px 16px #2b6cff4d}.trn__timing-display{margin-top:12px;font-size:13px;color:var(--color-text-soft);text-align:center}.trn__timing-display code{color:var(--color-primary, #2b6cff);font-family:var(--font-mono);word-break:break-all}.trn__code{position:relative;padding:16px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border:1px solid var(--color-border);border-radius:var(--radius-md)}.trn__copy{position:absolute;top:12px;right:12px;padding:5px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-size:12px;cursor:pointer;transition:all var(--transition-fast, .15s)}.trn__copy:hover{border-color:var(--color-primary, #2b6cff);color:var(--color-primary, #2b6cff)}.trn__code pre{margin:0;padding:12px 14px;background:var(--color-bg);border-radius:var(--radius-sm);overflow-x:auto}.trn__code code{font-family:var(--font-mono);font-size:13px;color:var(--color-text);white-space:pre;line-height:1.6}@media(prefers-color-scheme:dark){.trn__bezier-grid{fill:#ffffff08}}@media(max-width:768px){.trn__main{grid-template-columns:1fr}.trn__bezier-vals{grid-template-columns:repeat(2,1fr)}}@media(max-width:414px){.trn__config,.trn__preview,.trn__code{padding:12px}.trn__bezier-svg svg{width:180px;height:180px}.trn__stage{min-height:160px;padding:16px}.trn__box{width:80px;height:80px;font-size:12px}}