/* Motion keeps the studio's paper edges, pink accents and blue guide lines. */
#motionEntry { margin: 0 0 16px; padding: 14px; border: 1px solid #f1bfd4; border-radius: 20px; background: linear-gradient(145deg, #fffafd, #edf6ff); }
.motion-entry-heading { display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; }
.motion-entry-heading svg { flex-shrink:0; margin-top:2px; }
.motion-entry-heading strong { font-size:15px; }
.motion-entry-heading p, .motion-heading p { margin:4px 0 0; font-size:12px; line-height:1.5; color:#89677c; }
#motionEntry > .btn { width:100%; margin:4px 0; }
.motion-fineprint, .motion-hint { color:#89677c; font-size:12px; line-height:1.65; margin:10px 0; }
.designing-motion .topbar-actions, .designing-motion .panel-tabs { display:none; }
.designing-motion .panel { display:flex; flex-direction:column; min-height:0; overflow:hidden; padding:12px; }
.designing-motion #motionEntry { display:flex; flex:1; min-height:0; width:100%; margin:0; padding:0; border:0; background:none; }
.designing-motion #panel > .group:not([data-group="motion"]),
.designing-motion [data-group="motion"] > .group-head,
.designing-motion [data-group="motion"] .group-body > :not(#motionEntry) { display:none !important; }
.designing-motion [data-group="motion"] { display:flex; flex-direction:column; flex:1; min-height:0; margin:0; border:0; box-shadow:none; background:none; }
.designing-motion [data-group="motion"] .group-body { display:flex; flex:1; min-height:0; padding:0; }
.designing-motion .object-toolbar, .designing-motion .resize-frame, .designing-motion #stageHint { visibility:hidden; }
.designing-motion .statusbar:not(.error):not(.busy) { visibility:hidden; }
.designing-motion .panel-head, .designing-motion .resize-visibility, .designing-motion .panel-foot { display:none; }
#motionDesigner { display:flex; flex-direction:column; flex:1; min-height:0; width:100%; }
.motion-heading { display:flex; flex:none; align-items:flex-start; justify-content:space-between; gap:10px; margin:0 0 10px; }
.motion-heading > div { min-width:0; }
.motion-eyebrow { font-size:10px; font-weight:700; letter-spacing:.12em; color:#a34875; }
.motion-heading h3 { margin:5px 0 0; font-size:23px; letter-spacing:-.04em; }
.motion-heading p { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#motionDesigner .btn, #motionTransport .btn { justify-content:center; }
#motionClose { display:grid; place-items:center; flex:none; width:38px; min-width:38px; height:36px; padding:0; font-size:24px; line-height:1; }
.motion-history { display:flex; flex:none; align-items:center; gap:7px; padding:0 0 12px; }
.motion-history > span { margin-left:auto; font-size:11px; line-height:1.4; color:#89677c; text-align:right; }
.motion-history .btn { min-width:58px; height:30px; padding:0 10px; font-size:11px; }
.motion-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:2px 4px 6px 0; scrollbar-width:thin; scrollbar-color:#e6aecb transparent; scroll-padding-block:8px; }
.motion-section { margin:0 0 12px; padding:12px; border:1.5px solid #efc4d9; border-radius:18px; background:#fffafd; }
.motion-section-title { display:flex; align-items:center; gap:8px; margin:0 0 12px; color:#67435c; font-size:13px; line-height:1.4; }
.motion-step { display:grid; place-items:center; flex:none; width:23px; height:23px; border-radius:8px; background:#fce4ef; color:#a44e7b; font-size:11px; }
.motion-style-status { margin-left:auto; font-size:10px; font-weight:400; }
.motion-recipes { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.motion-recipe { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; padding:3px 6px 8px; border:2px solid #e6b8d0; border-radius:14px; background:#fffafd; color:#3b2b38; font:inherit; font-size:12px; font-weight:700; cursor:pointer; box-shadow:0 3px 0 #edbfd3; transition:transform .22s, border-color .22s, background .22s; overflow:hidden; }
.motion-recipe[aria-pressed="true"] { border-color:#3b2b38; background:#ffe6f0; box-shadow:0 3px 0 #3b2b38; }
.motion-recipe[aria-pressed="true"]::after { content:'✓'; position:absolute; top:5px; right:7px; color:#a14675; font-size:11px; }
.motion-recipe-label { text-align:center; line-height:1.4; }
.motion-recipe:hover, .motion-recipe:focus-visible { transform:translateY(-2px); border-color:#3b2b38; background:#fff2f8; }
.motion-recipe:active { transform:translateY(2px); box-shadow:0 1px 0 #edbfd3; }
.motion-recipe-art { display:block; width:100%; height:38px; }
.motion-recipe-art svg { height:100%; width:100%; overflow:visible; }
.recipe-sticker { transform-origin:50px 23px; }
.recipe-shine { opacity:0; }
.motion-recipe:is(:hover,:focus-visible)[data-recipe="slide"] .recipe-sticker { animation:recipe-slide 1.8s cubic-bezier(.22,1,.36,1) infinite; }
.motion-recipe:is(:hover,:focus-visible)[data-recipe="float"] .recipe-sticker { animation:recipe-float 2.4s ease-in-out infinite; }
.motion-recipe:is(:hover,:focus-visible)[data-recipe="pop"] .recipe-sticker { animation:recipe-pop 1.8s cubic-bezier(.22,1,.36,1) infinite; }
.motion-recipe:is(:hover,:focus-visible)[data-recipe="light"] .recipe-shine { animation:recipe-light 1.8s ease-in-out infinite; }
@keyframes recipe-slide { 0%,100% { transform:translateX(-12px) rotate(-12deg); opacity:.35; } 35%,75% { transform:translateX(5px) rotate(0); opacity:1; } }
@keyframes recipe-float { 0%,100% { transform:translateY(4px) rotate(-9deg); } 50% { transform:translateY(-4px) rotate(9deg); } }
@keyframes recipe-pop { 0%,100% { transform:scale(.55) rotate(-12deg); opacity:.4; } 35% { transform:scale(1.12); opacity:1; } 60%,85% { transform:scale(1); opacity:1; } }
@keyframes recipe-light { 0%,100% { opacity:0; transform:translateX(-8px); } 50% { opacity:.9; transform:translateX(6px); } }
.motion-endpoints { display:flex; gap:4px; padding:4px; background:#f7e5ee; border-radius:14px; }
.motion-endpoints .btn { flex:1; min-width:0; padding:0 4px; height:36px; font-size:11px; box-shadow:none; border:2px solid transparent; background:transparent; }
.motion-endpoints [aria-pressed="true"] { background:#ffc1da; border-color:#3b2b38; box-shadow:0 3px 0 #3b2b38; }
.motion-endpoints [data-endpoint="end"][aria-pressed="true"] { background:#c4e2ff; }
.motion-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0; border:0; margin:14px 0; min-width:0; }
#motionDesigner [hidden] { display:none; }
.motion-fields legend { font-size:12px; font-weight:700; margin-bottom:10px; }
.motion-field { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; font-size:12px; font-weight:600; color:#806276; }
.motion-fields .motion-field { flex-direction:column; align-items:stretch; gap:5px; }
.motion-field-value { display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:38px; background:#fff; border:2px solid #edc0d5; border-radius:11px; padding:5px 8px; color:#96778b; width:100%; box-sizing:border-box; }
.motion-field-value:focus-within { border-color:#ae5f8c; box-shadow:0 0 0 3px #f9e0ed; }
.motion-field-value input { appearance:auto; width:100%; min-width:0; border:0; box-shadow:none; background:transparent; color:#3b2b38; font:inherit; font-size:14px; outline-offset:2px; padding:0; }
.motion-field:has(input:disabled) { opacity:.5; }
#motionPoseFields:disabled { opacity:.55; }
.motion-reset-pose { align-self:end; height:36px; padding:0 5px !important; font-size:12px !important; }
.motion-settings { display:grid; gap:12px; }
.motion-settings > .motion-field .motion-field-value { width:112px; }
.motion-field select { flex:0 1 66%; width:66%; max-width:66%; min-width:0; height:38px; padding-inline:10px; font-size:12px; }
.motion-timing-strip { display:flex; height:12px; gap:2px; border-radius:9px; overflow:hidden; }
.motion-timing-strip span { background:#f6b3d0; }
.motion-timing-strip span:nth-child(2) { background:#c9e3fb; }
.motion-timing-strip span:nth-child(3) { background:#d9cff5; }
.motion-timing-strip span:nth-child(4) { background:#efe1ed; }
.motion-timing-strip [hidden] { display:none; }
.motion-timing-legend { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; font-size:11px; color:#806276; }
.motion-timing-legend > span { display:flex; align-items:center; gap:6px; }
.motion-timing-legend b { margin-left:auto; font-weight:400; font-variant-numeric:tabular-nums; }
.motion-timing-legend i { width:8px; height:8px; border-radius:3px; background:#f6b3d0; }
.motion-timing-legend > span:nth-child(2) i { background:#c9e3fb; }
.motion-timing-legend > span:nth-child(3) i { background:#d9cff5; }
.motion-timing-legend > span:nth-child(4) i { background:#efe1ed; }
.motion-light { border:2px solid #d1dfef; background:#f4f9ff; border-radius:16px; padding:12px; }
.motion-light summary { font-size:13px; font-weight:700; cursor:pointer; }
.motion-light[open] summary { margin-bottom:12px; }
.motion-actions { display:grid; flex:none; grid-template-columns:1fr 1fr; gap:10px; background:#fff7fb; padding:12px 0 5px; border-top:2px dotted #edbfd3; }
.motion-actions .btn { height:40px; padding:0 8px; font-size:13px; }
#motionTransport { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:35; display:flex; align-items:center; gap:10px; width:min(640px,calc(100% - 32px)); box-sizing:border-box; padding:10px 14px; border:2px solid #3b2b38; border-radius:22px; background:#fffafd; box-shadow:0 5px 0 #3b2b38, 0 12px 28px #58476322; }
#motionTransport .btn { flex-shrink:0; font-size:12px; padding:7px 11px; }
#motionTransport input { flex:1; min-width:50px; accent-color:#ef77ac; cursor:ew-resize; }
#motionTime { font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; color:#89677c; }
#motionOverlay { position:absolute; inset:0; z-index:30; touch-action:none; }
.motion-guides { width:100%; height:100%; overflow:hidden; pointer-events:none; }
.motion-ghost { fill:none; stroke:#ff88b9; stroke-width:1.5; stroke-dasharray:5 6; opacity:.6; }
.motion-ghost.end { stroke:#468ecd; }
.motion-current { fill:#fff5fc12; stroke:#fff; stroke-width:3; stroke-linejoin:round; filter:drop-shadow(0 1px 1px #4e355c88); pointer-events:all; cursor:grab; }
.motion-trail { stroke:#fff9; stroke-width:2; stroke-dasharray:4 6; }
.motion-rotate-stem { stroke:#fff; stroke-width:2; }
.motion-grip { position:absolute; transform:translate(-50%,-50%); display:grid; place-items:center; width:34px; height:34px; background:#fffafd; color:#3b2b38; border:2px solid #3b2b38; border-radius:50%; box-shadow:0 3px 0 #3b2b38; font-size:20px; touch-action:none; cursor:grab; }
.motion-grip.move { width:44px; height:44px; background:#ffc1da; font-size:27px; }
.motion-grip.scale { border-radius:10px; background:#c4e2ff; cursor:nwse-resize; }
.motion-grip:active { cursor:grabbing; box-shadow:0 1px 0 #3b2b38; }
.motion-end-label { position:absolute; padding:3px 8px; background:#ffd1e3; border-radius:8px; font-size:10px; color:#573a50; font-weight:700; pointer-events:none; }
.motion-end-label.end { background:#d0e8ff; }
#motionOverlay[hidden], #motionTransport[hidden], #motionTransport [hidden] { display:none; }
@media (max-width:700px) {
  #motionTransport { display:grid; grid-template-columns:auto auto 1fr auto; gap:8px; padding:10px 12px; bottom:12px; }
  #motionTransport input { grid-column:1 / -1; grid-row:2; width:100%; margin:4px 0; }
  #motionTransport .btn { font-size:11px; padding:0 9px; }
  #motionTime { min-width:62px; }
  .motion-heading h3 { font-size:21px; }
}
@media (max-width:960px) {
  body.designing-motion { overflow:hidden; --motion-sheet-height:56dvh; }
  .designing-motion .topbar { display:none; }
  .designing-motion .layout { display:flex; height:100dvh; }
  .designing-motion .stage { position:fixed; inset:0 0 var(--motion-sheet-height); min-height:0; }
  .designing-motion .panel-wrap { position:fixed; inset:auto 0 0; height:var(--motion-sheet-height); width:100%; z-index:40; border:2px solid var(--ink); border-radius:24px 24px 0 0; padding-top:8px; box-shadow:0 -5px 24px #4e355c22; }
  .designing-motion .panel-tabs { display:none; }
  .designing-motion .properties-pane { height:100%; min-height:0; }
  .designing-motion .panel { overflow-y:auto; max-height:none; min-height:0; height:100%; }
  .designing-motion .motion-heading { margin-bottom:8px; }
  .designing-motion .panel { overflow:hidden; padding:10px 14px max(10px,env(safe-area-inset-bottom)); }
  .motion-recipes { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .motion-recipe { padding:3px 3px 6px; }
  .motion-recipe-art { height:32px; }
  .motion-recipe-label { display:grid; place-items:center; min-height:31px; font-size:11px; }
  .designing-motion #motionTime { grid-column:3 / -1; justify-self:end; }
}
@media (max-width:960px) and (max-height:650px) { .motion-heading .motion-eyebrow, .motion-heading p { display:none; } }
@media (prefers-reduced-motion:reduce) { .motion-recipe * { animation:none !important; } .motion-recipe { transition:none; } }
@media (pointer:coarse) { .motion-grip { width:44px; height:44px; } .motion-grip.move { width:48px; height:48px; } #motionTransport .btn, .motion-endpoints .btn, .motion-actions .btn, .motion-history .btn, #motionClose { min-height:44px; } .motion-field-value, .motion-field select { min-height:44px; } .motion-field-value input { font-size:16px; } }