.cte-layout{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"stage inspector""timeline timeline""code code";gap:1rem;display:grid}.cte-area-stage{flex-direction:column;grid-area:stage;gap:.75rem;min-width:0;display:flex}.cte-area-inspector{grid-area:inspector}.cte-area-timeline{grid-area:timeline}.cte-area-code{grid-area:code}.cte-stage{border:1px solid var(--border-card);border-radius:var(--radius-lg);background-color:var(--bg-secondary);background-image:linear-gradient(var(--border-card) 1px, transparent 1px), linear-gradient(90deg, var(--border-card) 1px, transparent 1px);background-position:50%;background-size:30px 30px;place-items:center;height:300px;display:grid;position:relative;overflow:hidden}.cte-stage-axis{background:linear-gradient(var(--border-input), var(--border-input)) center / 1px 100% no-repeat, linear-gradient(var(--border-input), var(--border-input)) center / 100% 1px no-repeat;position:absolute;inset:0}.cte-mover{grid-area:1/1;place-items:center;display:grid}.cte-box{background:linear-gradient(135deg, var(--accent-indigo), var(--accent-violet));width:88px;height:88px;box-shadow:var(--shadow-card);border-radius:18px}.cte-transport{flex-wrap:wrap;align-items:flex-end;gap:.75rem 1rem;display:flex}.cte-readout{min-width:7.5rem;color:var(--text-secondary);font:600 .85rem var(--font-mono);font-variant-numeric:tabular-nums;align-self:center}.cte-duration{width:7rem}.cte-transport .ui-switch{align-self:center}.cte-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;display:grid}.cte-easing{grid-template-columns:minmax(0,1fr) 120px;align-items:start;gap:.75rem;display:grid}.cte-bezier{grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;display:grid}.cte-bezier .ui-input{padding-left:.5rem;padding-right:.25rem}.cte-curve{width:120px;height:90px;margin-top:1.5rem}.cte-curve-box{fill:var(--bg-secondary);stroke:var(--border-input)}.cte-curve-arm{stroke:var(--text-secondary);stroke-width:1px;stroke-dasharray:3 3}.cte-curve-line{fill:none;stroke:var(--accent-indigo);stroke-width:2.5px;stroke-linecap:round}.cte-timeline{border:1px solid var(--border-card);border-radius:var(--radius-lg);background:var(--bg-card);grid-template-columns:150px minmax(0,1fr);grid-template-areas:"heads lanes""hint hint""actions actions";display:grid;overflow:hidden}.cte-heads{border-right:1px solid var(--border-card);grid-area:heads}.cte-corner,.cte-ruler{height:40px}.cte-corner{border-bottom:1px solid var(--border-card);color:var(--text-secondary);letter-spacing:.04em;text-transform:uppercase;align-items:center;padding:0 .75rem;font-size:.75rem;font-weight:700;display:flex}.cte-head{border-bottom:1px solid var(--border-card);height:44px;color:var(--text-primary);justify-content:space-between;align-items:center;gap:.25rem;padding:0 .25rem 0 .75rem;font-size:.85rem;font-weight:500;display:flex}.cte-head.is-active{box-shadow:inset 3px 0 0 var(--accent-indigo);background:var(--border-subtle)}.cte-head .ui-icon-btn{width:40px;height:40px}.cte-lanes{grid-area:lanes;min-width:0;padding:0 20px}.cte-lanes-inner{position:relative}.cte-ruler{border-bottom:1px solid var(--border-card);cursor:ew-resize;touch-action:none;position:relative}.cte-ruler:focus-visible{outline:2px solid var(--accent-indigo);outline-offset:-2px}.cte-tick{color:var(--text-secondary);pointer-events:none;font-size:.7rem;font-weight:600;position:absolute;top:50%;transform:translate(-50%,-50%)}.cte-lane{border-bottom:1px solid var(--border-card);background-image:linear-gradient(90deg, var(--border-card) 1px, transparent 1px);cursor:crosshair;touch-action:none;background-size:25% 100%;height:44px;position:relative}.cte-lane:before{content:"";border-top:1px dashed var(--border-input);position:absolute;top:50%;left:0;right:0}.cte-lane.is-active{background-color:var(--border-subtle)}.cte-kf{z-index:1;border-radius:var(--radius-sm);cursor:grab;touch-action:none;background:0 0;border:none;place-items:center;width:40px;height:40px;padding:0;display:grid;position:absolute;top:50%;transform:translate(-50%,-50%)}.cte-kf:active{cursor:grabbing}.cte-kf:focus-visible{outline:2px solid var(--accent-indigo);outline-offset:-4px}.cte-kf-diamond{border:2px solid var(--bg-card-solid);background:var(--text-secondary);border-radius:3px;width:14px;height:14px;transition:background .15s,transform .15s;transform:rotate(45deg)}.cte-kf:hover .cte-kf-diamond{background:var(--text-primary);transform:rotate(45deg)scale(1.15)}.cte-kf.is-selected{z-index:2}.cte-kf.is-selected .cte-kf-diamond{background:var(--accent-indigo);transform:rotate(45deg)scale(1.2)}.cte-playhead{background:var(--accent-red);pointer-events:none;z-index:3;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0}.cte-playhead:before{content:"";background:var(--accent-red);border-radius:0 0 6px 6px;width:12px;height:10px;position:absolute;top:0;left:50%;transform:translate(-50%)}.cte-timeline-hint{grid-area:hint;padding:.6rem .9rem 0}.cte-timeline-actions{grid-area:actions;padding:.4rem .6rem .6rem}.cte-code-options{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:.75rem;display:flex}.cte-name{width:min(100%,14rem)}@media (width<=900px){.cte-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage""timeline""inspector""code"}}@media (width<=640px){.cte-stage{height:220px}.cte-box{border-radius:14px;width:64px;height:64px}.cte-timeline{grid-template-columns:108px minmax(0,1fr)}.cte-head{padding-left:.5rem;font-size:.8rem}.cte-corner{padding:0 .5rem}.cte-lanes{padding:0 14px}.cte-easing{grid-template-columns:minmax(0,1fr)}.cte-curve{margin-top:0}.cte-bezier{grid-template-columns:repeat(2,minmax(0,1fr))}.cte .ui-input{font-size:1rem}.cte .ui-segment{min-height:40px}}