#motionCard{max-width:1100px;margin:20px auto;padding:24px;min-height:60vh}
.motion-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}.motion-top h2{margin:0;flex:1}
.motion-tools{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin:18px 0}
.motion-cats{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.motion-cats button{font-size:13px!important;padding:8px 12px!important}.motion-cats button[aria-selected=true]{background:#ffdf52!important;border-color:#d5ac00!important}
#motionCard input,#motionCard textarea,#motionCard select,#motionDialog input,#motionDialog textarea,#motionDialog select{width:100%;min-height:44px;border:1px solid #d3d8df;border-radius:10px;padding:10px;background:white;color:#10141c;font:inherit}
#motionCard button,#motionDialog button{min-height:44px;border-radius:12px;padding:10px 16px;border:1px solid #cdd3dc;background:#fff;color:#10141c;cursor:pointer;font:inherit}
#motionCard button:focus-visible,#motionDialog button:focus-visible{outline:3px solid #e4b100;outline-offset:3px}
#motionCard .motion-primary,#motionDialog .motion-primary{background:#10141c;color:#fff;border-color:#10141c;font-weight:700}
#motionCard button:disabled,#motionDialog button:disabled{opacity:.55;cursor:wait}
.motion-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.motion-tile{display:flex;flex-direction:column;text-align:start!important;padding:0!important;overflow:hidden;min-width:0;border:1px solid #ddd!important}
.motion-art{height:120px;width:100%;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 65% 35%,#365a7a,#10141c);color:#ffcc00;font:700 32px Georgia,serif}
.motion-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.motion-tile-body{padding:14px}.motion-tile h3{margin:0 0 7px;font-size:17px}.motion-tile p{margin:0;font-size:13px;line-height:1.7;color:#606975}.motion-tag{font-size:12px;color:#68717d;margin-top:9px;display:block}
.motion-art img{object-fit:contain}.motion-art .motion-demo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.motion-art .motion-demo[hidden]{display:none}.motion-demo-mark{position:absolute;bottom:6px;right:6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#10141caa;color:white;font:12px Arial;pointer-events:none}.motion-dialog-demo{display:block;width:100%;max-height:260px;object-fit:contain;background:#10141c;border-radius:12px;margin:14px 0}#motionPreviewToggle{font-size:13px!important}
.motion-note{color:#606975;font-size:14px;line-height:1.8}.motion-empty{padding:32px;text-align:center}.motion-error{color:#b52d23;white-space:pre-line;line-height:1.8}
#motionDialog{width:min(760px,96vw);max-height:92vh;overflow:auto;border:1px solid #ddd;border-radius:20px;padding:24px;color:#10141c;background:white;font:inherit}
#motionDialog::backdrop{background:#10141c99}.motion-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.motion-dialog-head h2{margin:0;font-size:22px}.motion-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.motion-fields label{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:14px}.motion-wide{grid-column:1/-1}.motion-fields textarea{resize:vertical;min-height:80px}.motion-fields input[type=color]{height:44px;padding:3px}.motion-fields input[type=range]{padding:0}.motion-fields small{font-weight:400;color:#68717d;line-height:1.7}
.motion-screen{width:100%;max-height:240px;object-fit:contain;border:1px solid #ddd;cursor:crosshair;border-radius:12px}.motion-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}.motion-actions strong{flex:1}.motion-result{width:100%;max-height:440px;background:#10141c;border-radius:12px;margin-top:12px}.motion-history-row{padding:14px 0;border-bottom:1px solid #ddd}.motion-history-row a{display:inline-block;margin:8px}.motion-progress{padding:15px;background:#fff8d9;border:1px solid #eed369;border-radius:12px;margin-top:12px;line-height:1.8}
.motion-check{display:flex!important;flex-direction:row!important;align-items:center}#motionDialog input[type=checkbox]{width:20px;min-height:20px;flex:none}
#motionDialog details{margin-top:16px;border:1px solid #ddd;border-radius:12px;padding:12px}#motionDialog summary{cursor:pointer;min-height:30px;font-weight:600}
@media(max-width:600px){#motionCard{padding:16px}.motion-tools,.motion-fields{grid-template-columns:1fr}.motion-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.motion-art{height:90px}.motion-tile-body{padding:10px}.motion-tile h3{font-size:15px}.motion-tile p{font-size:12px}.motion-top{gap:8px}#motionDialog{padding:16px}.motion-wide{grid-column:auto}#motionBtn{font-size:12px;padding:6px 8px;white-space:normal}}

.motion-kind{display:inline-block;font-weight:700;font-size:13px;color:#684f00;background:#fff6cd;padding:6px 10px;border-radius:8px;margin-bottom:0}.motion-how ol{line-height:1.9;padding-inline-start:24px}.motion-data-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(65px,.55fr) 44px;gap:8px;margin:8px 0}.motion-data-row input{min-width:0;width:100%}.motion-data-row button{min-width:44px;min-height:44px}.motion-result-alpha{background-color:#ddd;background-image:conic-gradient(#bbb 25%,transparent 0 50%,#bbb 0 75%,transparent 0);background-size:24px 24px}#motionBackground[hidden]{display:none!important}