.motion-showcase-shell{margin:8px 4px 12px;padding:10px;background:#080808;border:1px solid rgba(255,255,255,.075);border-radius:8px;font-family:inherit;box-sizing:border-box}.motion-showcase-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.motion-showcase-title{display:flex;align-items:center;gap:7px;color:#d2d2d2;font-size:9px;font-weight:850;letter-spacing:1px;text-transform:uppercase}.motion-showcase-title svg{width:14px;height:14px;color:var(--primary)}.motion-showcase-badge{padding:2px 5px;border:1px solid var(--primary-border);border-radius:4px;background:var(--primary-dim);color:var(--primary);font-size:6.5px;font-weight:900;letter-spacing:.7px}.motion-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.motion-template-card{min-width:0;padding:6px;border:1px solid rgba(255,255,255,.08);border-radius:7px;background:#101010;color:#858585;cursor:pointer;transition:border-color .16s,background .16s,color .16s,transform .16s;text-align:left;font-family:inherit}.motion-template-card:hover{border-color:var(--primary-border);color:#bbb;transform:translateY(-1px)}.motion-template-card.active{border-color:var(--primary);background:var(--primary-dim);color:var(--primary);box-shadow:0 0 0 1px var(--primary-dim)}.motion-template-preview{position:relative;height:48px;margin-bottom:5px;overflow:hidden;border:1px solid rgba(255,255,255,.06);border-radius:5px;background:#050505;perspective:180px}.motion-template-orbit{position:absolute;left:50%;top:50%;width:54px;height:28px;margin:-14px 0 0 -27px;transform-style:preserve-3d;animation:akiraMotionSpin 7s linear infinite}.motion-template-card.active .motion-template-orbit{animation-duration:4.5s}.motion-template-chip{position:absolute;left:50%;top:50%;width:15px;height:10px;margin:-5px 0 0 -7.5px;border:1px solid currentColor;border-radius:2px;background:#171717;transform:rotateY(calc(var(--i)*60deg)) translateZ(27px)}.motion-template-card[data-template="helix"] .motion-template-chip{transform:rotateY(calc(var(--i)*60deg)) translateY(calc((var(--i) - 2.5)*4px)) translateZ(23px)}.motion-template-card[data-template="depth"] .motion-template-orbit{transform:rotateX(8deg);animation:akiraMotionDepth 4s ease-in-out infinite}.motion-template-card[data-template="depth"] .motion-template-chip{transform:translate3d(calc((var(--i) - 2.5)*3px),calc((var(--i) - 2.5)*-1.5px),calc((var(--i) - 2.5)*13px))}.motion-template-name{display:block;overflow:hidden;color:inherit;font-size:7.5px;font-weight:850;letter-spacing:.4px;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}.motion-template-copy{display:block;margin-top:2px;color:#5f5f5f;font-size:6.5px;line-height:1.25}.motion-showcase-editor{display:none;margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07)}.motion-showcase-editor.open{display:block}.motion-editor-section{margin-bottom:10px}.motion-editor-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;color:#696969;font-size:7px;font-weight:850;letter-spacing:.7px;text-transform:uppercase}.motion-editor-label strong{color:var(--primary);font-size:7px}.motion-ratio-row,.motion-duration-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.motion-choice{height:25px;padding:0 3px;border:1px solid rgba(255,255,255,.08);border-radius:5px;background:#101010;color:#777;font-family:inherit;font-size:7px;font-weight:800;cursor:pointer}.motion-choice:hover{color:#aaa}.motion-choice.active{border-color:var(--primary);background:var(--primary-dim);color:var(--primary)}.motion-selection-bar{display:flex;align-items:center;gap:6px}.motion-selection-bar button,.motion-action-row button{height:29px;border-radius:6px;font-family:inherit;font-size:7.5px;font-weight:850;letter-spacing:.45px;text-transform:uppercase;cursor:pointer}.motion-use-selection{flex:1;border:1px solid var(--primary-border);background:var(--primary-dim);color:var(--primary)}.motion-refresh-selection{width:30px;border:1px solid rgba(255,255,255,.08);background:#111;color:#888}.motion-refresh-selection svg{width:12px;height:12px}.motion-slot-list{display:flex;flex-direction:column;gap:4px;max-height:148px;margin-top:6px;overflow-y:auto}.motion-slot-empty{padding:10px;border:1px dashed rgba(255,255,255,.09);border-radius:6px;color:#555;font-size:7px;line-height:1.4;text-align:center}.motion-slot{display:grid;grid-template-columns:16px 20px minmax(0,1fr) 22px;align-items:center;gap:5px;min-height:29px;padding:3px 4px;border:1px solid rgba(255,255,255,.065);border-radius:5px;background:#0d0d0d;color:#888}.motion-slot.dragging{opacity:.45}.motion-slot.drop-target{border-color:var(--primary)}.motion-slot-grip{color:#444;font-size:10px;cursor:grab;text-align:center}.motion-slot-number{display:flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:4px;background:var(--primary-dim);color:var(--primary);font-size:6.5px;font-weight:900}.motion-slot-name{overflow:hidden;font-size:7.5px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.motion-slot-remove{display:flex;width:20px;height:20px;align-items:center;justify-content:center;border:0;border-radius:4px;background:transparent;color:#555;cursor:pointer}.motion-slot-remove:hover{background:rgba(255,70,70,.1);color:#ff5d5d}.motion-controls{display:grid;grid-template-columns:1fr;gap:7px}.motion-control{display:grid;grid-template-columns:76px minmax(0,1fr) 34px;align-items:center;gap:6px}.motion-control label{overflow:hidden;color:#777;font-size:7px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.motion-control input[type="range"]{width:100%;height:3px;margin:0;accent-color:var(--primary)}.motion-control output{color:#aaa;font-size:7px;font-weight:800;text-align:right}.motion-control-color{grid-template-columns:76px minmax(0,1fr)}.motion-control input[type="color"]{width:100%;height:24px;padding:2px;border:1px solid rgba(255,255,255,.08);border-radius:5px;background:#0d0d0d}.motion-toggle-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.motion-toggle{display:flex;min-width:0;align-items:center;gap:6px;padding:7px;border:1px solid rgba(255,255,255,.07);border-radius:5px;background:#0d0d0d;color:#777;font-size:7px;font-weight:750;cursor:pointer}.motion-toggle input{margin:0;accent-color:var(--primary)}.motion-action-row{display:grid;grid-template-columns:1.35fr 1fr 30px;gap:5px}.motion-build{border:1px solid var(--primary);background:var(--primary);color:var(--primary-contrast,#050505)}.motion-update{border:1px solid var(--primary-border);background:var(--primary-dim);color:var(--primary)}.motion-render{display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.08);background:#111;color:#888}.motion-render svg{width:12px;height:12px}.motion-action-row button:disabled{cursor:not-allowed;filter:saturate(.2);opacity:.38}.motion-editor-note{margin-top:6px;color:#555;font-size:6.5px;line-height:1.4}.motion-ui-divider{display:flex;align-items:center;gap:7px;margin:10px 0 2px;color:#555;font-size:7px;font-weight:850;letter-spacing:.7px;text-transform:uppercase}.motion-ui-divider:before,.motion-ui-divider:after{height:1px;flex:1;background:rgba(255,255,255,.06);content:""}@keyframes akiraMotionSpin{to{transform:rotateX(-9deg) rotateY(360deg)}}@keyframes akiraMotionDepth{0%,100%{transform:translateZ(-15px) rotateX(8deg)}50%{transform:translateZ(28px) rotateX(8deg)}}@media(max-width:320px){.motion-template-grid{grid-template-columns:1fr}.motion-template-preview{height:42px}.motion-control{grid-template-columns:66px minmax(0,1fr) 31px}.motion-action-row{grid-template-columns:1fr 1fr}.motion-render{grid-column:1/-1;width:100%}}
