@media (min-width: 761px) {
  :root { --motion-rail-width: 72px; --motion-panel: #151515; --motion-line: #303030; --motion-muted: #929292; }
  .toolModeRail { position: fixed; inset: 0 auto 0 0; z-index: 500; width: var(--motion-rail-width); padding: 18px 8px; display: flex; flex-direction: column; gap: 18px; align-items: center; background: #111; border-right: 1px solid var(--motion-line); }
  .toolModeRailBrand { width:44px; height:44px; display:grid; place-items:center; color:#fff; font:400 28px/1 system-ui,sans-serif; text-decoration:none; }
  .toolModeRailBrand:hover { opacity:.72; }
  .toolModeButton { width:56px; min-height:62px; padding:6px 0; border:0; border-radius:0; background:transparent !important; color:rgba(255,255,255,.34); font:700 11px/1.2 system-ui,sans-serif; cursor:pointer; }
  .toolModeButton::before { content:""; display:block; width:21px; height:21px; margin:0 auto 8px; border:2px solid currentColor; border-radius:6px; }
  .toolModeButton[data-mode="motion"]::before { border-radius: 50%; box-shadow: 8px 0 0 -5px #111, 8px 0 0 -3px currentColor; }
  .toolModeButton:hover { color:rgba(255,255,255,.7); }
  .toolModeButton.is-active { color:#fff; }
  body > .app { margin-left: var(--motion-rail-width); width: calc(100% - var(--motion-rail-width)); }
  .motionWorkspace { display:none; position:fixed; inset:0 0 0 var(--motion-rail-width); z-index:420; width:auto; min-width:0; overflow:hidden; grid-template-columns:clamp(190px,14vw,240px) clamp(250px,18vw,320px) minmax(280px,1fr) clamp(280px,20vw,360px); grid-template-rows:minmax(0,1fr) 78px; background:#101010; color:#fff; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
  body[data-tool-mode="motion"] > .app { display: none !important; }
  body[data-tool-mode="motion"] .motionWorkspace { display: grid; }
  .motionLibrary, .motionScenePanel, .motionInspector { min-width: 0; min-height: 0; overflow-y: auto; background: var(--motion-panel); }
  .motionLibrary { grid-column: 1; grid-row: 1; border-right: 1px solid var(--motion-line); padding: 28px 20px; }
  .motionLibrary [hidden] { display: none !important; }
  .motionScenePanel { grid-column: 2; grid-row: 1; border-right: 1px solid var(--motion-line); }
  .motionInspector { grid-column:4; grid-row:1; width:100%; max-width:100%; overflow-x:hidden; border-left:1px solid var(--motion-line); box-sizing:border-box; }
  .motionInspector * { box-sizing:border-box; max-width:100%; }
  .motionPanelHeading { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .motionPanelHeading h2 { margin: 5px 0 0; font-size: 20px; letter-spacing: -.03em; }
  .motionEyebrow { color: var(--motion-muted); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
  .motionTemplateGrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows:max-content; align-items:start; gap: 12px 10px; margin-top: 22px; }
  .motionTemplateSearch { width: 100%; height: 44px; margin-top: 18px; padding: 0 14px; border: 1px solid #333; border-radius: 12px; outline: 0; background: #202020; color: #fff; }
  .motionCategoryList { display:grid; grid-template-columns:1fr; gap:0; margin-top:14px; }
  .motionCategory { min-height:42px; padding:0 4px !important; border:0 !important; border-bottom:1px solid #252525 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:#8a8a8a; font-weight:650; text-align:left; cursor:pointer; }
  .motionCategory::after { content:"›"; float:right; color:#555; font-size:18px; font-weight:400; }
  .motionCategory:hover,.motionCategory.is-active { background:#1b1b1b !important; color:#fff; }
  .motionTemplateBack { margin-top: 14px; padding: 0; border: 0; background: transparent; color: #aaa; font-weight: 700; cursor: pointer; }
  .motionTemplate { min-width:0; min-height:0 !important; height:auto !important; max-height:none !important; padding:7px !important; display:grid; grid-template-rows:auto 26px; align-content:start; align-self:start; gap:7px; overflow:hidden; border:1px solid transparent; border-radius:12px; background:transparent; color:#aaa; font-weight:700; cursor:pointer; }
  .motionTemplate:hover { background: #282828; color: #fff; }
  .motionTemplate.is-active { background: #303030; color: #fff; border-color: #383838; }
  .motionTemplateDemo { position: relative; width:100%; aspect-ratio:4/5; min-height:0; overflow: hidden; display: block; border-radius: 10px; background: #0d0d0d; transform:none !important; }
  .motionTemplateCanvas { display:block; width:100%; height:100%; object-fit:cover; background:#0d0d0d; }
  .motionTemplateDemo i { position: absolute; width: 34%; height: 46%; left: 33%; top: 27%; display:grid; place-items:center; border-radius: var(--demo-radius,4px); background: linear-gradient(145deg,#ededed,#888); animation: motionCardCarousel var(--demo-duration,2.8s) cubic-bezier(.33,0,0,1) infinite; }
  .motionTemplateDemo i::after { content:"ADD MEDIA"; color:#777; font:500 4px/1 system-ui,sans-serif; letter-spacing:.08em; }
  .motionTemplateDemo i:nth-child(2){animation-delay:-.55s}.motionTemplateDemo i:nth-child(3){animation-delay:-1.1s}.motionTemplateDemo i:nth-child(4){animation-delay:-1.65s}.motionTemplateDemo i:nth-child(5){animation-delay:-2.2s}
  .motionTemplate[data-renderer="orbit"] .motionTemplateDemo i,.motionTemplate[data-renderer="wheel"] .motionTemplateDemo i,.motionTemplate[data-renderer="three-d"] .motionTemplateDemo i{animation-name:motionCardOrbit}
  .motionTemplate[data-renderer="stack"] .motionTemplateDemo i{animation-name:motionCardStack}
  .motionTemplate[data-renderer="wipe"] .motionTemplateDemo i{inset:0;width:100%;height:100%;border-radius:12px;animation-name:motionCardWipe}
  .motionTemplate[data-template="wipe-03"] .motionTemplateDemo i,.motionTemplate[data-template="wipe-04"] .motionTemplateDemo i{inset:16% 15%;width:70%;height:68%;border-radius:0}
  .motionTemplate[data-renderer="stories"] .motionTemplateDemo i{width:30%;height:68%;top:16%;animation-name:motionCardStories}
  .motionTemplate[data-renderer="grid"] .motionTemplateDemo i{width:28%;height:28%;animation-name:motionCardGrid}
  .motionTemplate[data-renderer="marquee"] .motionTemplateDemo i{width:32%;height:72%;top:14%;animation-name:motionCardMarquee}
  .motionTemplate[data-renderer="field"] .motionTemplateDemo i,.motionTemplate[data-renderer="parallax"] .motionTemplateDemo i{width:27%;height:34%;animation-name:motionCardField}
  .motionTemplate[data-renderer="spin"] .motionTemplateDemo i,.motionTemplate[data-renderer="flip"] .motionTemplateDemo i{animation-name:motionCardSpin}
  .motionTemplate[data-renderer="flicker"] .motionTemplateDemo i{width:29%;height:29%;animation-name:motionCardFlicker}
  .motionTemplate[data-renderer="globe"] .motionTemplateDemo i,.motionTemplate[data-renderer="carousel-3d"] .motionTemplateDemo i{animation-name:motionCardGlobe}
  .motionTemplate[data-renderer="spiral"] .motionTemplateDemo i{width:27%;height:34%;animation-name:motionCardSpiral}
  .motionTemplate[data-renderer="tour"] .motionTemplateDemo i{width:42%;height:58%;animation-name:motionCardTour}
  .motionTemplate[data-renderer="magazine"] .motionTemplateDemo i,.motionTemplate[data-renderer="deck"] .motionTemplateDemo i,.motionTemplate[data-renderer="frames"] .motionTemplateDemo i{width:45%;height:62%;animation-name:motionCardDeck}
  .motionTemplate[data-renderer="gravity"] .motionTemplateDemo i{width:25%;height:32%;animation-name:motionCardGravity}
  .motionTemplate[data-renderer="scale-motion"] .motionTemplateDemo i,.motionTemplate[data-renderer="proximity"] .motionTemplateDemo i{width:26%;height:34%;animation-name:motionCardScale}
  .motionTemplate[data-renderer="blank"] .motionTemplateDemo i{inset:10%;width:80%;height:80%;animation:none}
  .motionTemplate[data-direction="left"] .motionTemplateDemo{transform:rotate(90deg)}
  .motionTemplate[data-direction="right"] .motionTemplateDemo{transform:rotate(-90deg)}
  .motionTemplate[data-direction="down"] .motionTemplateDemo{transform:rotate(180deg)}
  .motionTemplateLabel { display:flex; min-width:0; height:26px; align-items:center; justify-content:center; overflow:hidden; color:inherit; font-size:10px; line-height:1.2; text-align:center; white-space:nowrap; text-overflow:ellipsis; }
  @keyframes motionCardCarousel{0%,100%{transform:translateY(-95%) scale(.7);opacity:.25}50%{transform:translateY(95%) scale(1);opacity:1}}
  @keyframes motionCardOrbit{0%{transform:rotate(0deg) translateX(38px) rotate(0deg) scale(.55)}100%{transform:rotate(360deg) translateX(38px) rotate(-360deg) scale(.55)}}
  @keyframes motionCardStack{0%,100%{transform:translate(12px,14px) scale(.78);opacity:.45}50%{transform:translate(-8px,-10px) scale(1);opacity:1}}
  @keyframes motionCardWipe{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
  @keyframes motionCardStories{0%,100%{transform:translateX(-68px) scale(.72);opacity:.3}50%{transform:translateX(68px) scale(1);opacity:1}}
  @keyframes motionCardGrid{0%,100%{transform:translate(-42px,-25px)}50%{transform:translate(42px,25px)}}
  @keyframes motionCardMarquee{0%{transform:translateX(-95px)}100%{transform:translateX(95px)}}
  @keyframes motionCardField{0%,100%{transform:translate(-55px,-35px) scale(.55);opacity:.4}50%{transform:translate(55px,42px) scale(1.05);opacity:1}}
  @keyframes motionCardSpin{0%{transform:rotateY(0) rotate(0) scale(.7)}100%{transform:rotateY(360deg) rotate(360deg) scale(1)}}
  @keyframes motionCardFlicker{0%,18%,44%,72%,100%{opacity:1;transform:scale(1)}19%,43%,73%,88%{opacity:.08;transform:scale(.72)}}
  @keyframes motionCardGlobe{0%{transform:translateX(-52px) scale(.45)}50%{transform:translateX(52px) scale(1.05)}100%{transform:translateX(-52px) scale(.45)}}
  @keyframes motionCardSpiral{0%{transform:rotate(0) translateX(12px) scale(.35)}100%{transform:rotate(720deg) translateX(58px) scale(1)}}
  @keyframes motionCardTour{0%{transform:translateX(-110px)}100%{transform:translateX(110px)}}
  @keyframes motionCardDeck{0%,100%{transform:translate(28px,24px) rotate(8deg) scale(.72)}50%{transform:translate(-18px,-12px) rotate(-5deg) scale(1)}}
  @keyframes motionCardGravity{0%{transform:translateY(-100px) rotate(0)}100%{transform:translateY(110px) rotate(260deg)}}
  @keyframes motionCardScale{0%,100%{transform:scale(.2);opacity:.35}50%{transform:scale(1.25);opacity:1}}
  .motionStage { grid-column: 3; grid-row: 1; min-width: 0; min-height: 0; display: grid; grid-template-rows: 58px minmax(0,1fr); background: #383838; }
  .motionStageTopbar { display: flex; align-items: center; justify-content: space-between; padding: 0 26px; background: #111; border-bottom: 1px solid var(--motion-line); }
  .motionStageTopbar strong { font-size: 18px; }
  .motionStatus { margin-left: 12px; color: var(--motion-muted); font-size: 13px; }
  .motionUploadButton, .motionRatioGroup button { min-height: 42px; padding: 0 18px; display: inline-grid; place-items: center; border: 1px solid #3a3a3a; border-radius: 12px; background: #222; color: #fff; font-weight: 700; cursor: pointer; }
  .motionRatioGroup { display: flex; gap: 4px; padding: 4px; border: 1px solid #2e2e2e; border-radius: 14px; background: #191919; }
  .motionRatioGroup button { min-height: 34px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: #777; font-size: 12px; }
  .motionRatioGroup button.is-active { background: #303030; color: #fff; }
  .motionCanvasOptions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
  .motionCanvasOptions label { display: flex; align-items: center; gap: 6px; color: #888; font-size: 11px; font-weight: 700; }
  .motionCanvasOptions select { height: 34px; padding: 0 25px 0 10px; border: 1px solid #333; border-radius: 9px; background: #202020; color: #fff; }
  .motionSafeToggle input[type="checkbox"] { position:relative; display:block !important; flex:none; width:38px !important; height:22px !important; margin:0 !important; padding:0 !important; -webkit-appearance:none !important; appearance:none !important; border:0 !important; border-radius:99px !important; background:#242424 !important; box-shadow:inset 0 0 0 1px #4b4b4b !important; color:transparent !important; cursor:pointer; }
  .motionSafeToggle input[type="checkbox"]::before { content:none !important; display:none !important; }
  .motionSafeToggle input::after { content:""; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#777; transition:transform .18s ease,background .18s ease; }
  .motionSafeToggle input:checked { background:#f4f4f4 !important; box-shadow:none !important; }
  .motionSafeToggle input:checked::after { transform:translateX(16px); background:#222; }
  .motionCanvasShell { position: relative; min-height: 0; display: grid; place-items: center; padding: 34px; overflow: hidden; }
  .motionCanvas { grid-area: 1 / 1; display: block; max-width: min(78vh, 90%); max-height: min(78vh, 90%); width: auto; height: auto; aspect-ratio: 1; background: #111; box-shadow: 0 22px 55px #0007; }
  .motionSafeArea { grid-area: 1 / 1; z-index: 2; width: min(62vh, 72%); aspect-ratio: var(--safe-ratio,1); pointer-events: none; border: 1px dashed #fff9; box-shadow: inset 0 0 0 1px #0007; }
  .motionSafeArea[hidden] { display: none; }
  .motionInspectorSection { padding: 24px; border-bottom: 1px solid var(--motion-line); }
  .motionUploadButton { min-height: 36px; padding: 0 13px; font-size: 13px; }
  .motionUploadButton input { position: absolute; opacity: 0; pointer-events: none; }
  .motionAssetList { display: grid; gap: 10px; margin-top: 16px; }
  .motionAssetStatus { display:grid; gap:4px; }
  .motionAssetStatus strong { color:#eee; font-size:13px; }
  .motionAssetStatus span { color:#858585; line-height:1.4; }
  .motionAssetStatus em { color:#b9a26d; font-style:normal; line-height:1.4; }
  .motionAssetItem { display: grid; grid-template-columns: 58px minmax(0,1fr) auto auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid #303030; border-radius: 12px; background: #1d1d1d; }
  .motionAssetItem canvas { width: 58px; height: 44px; object-fit: cover; border-radius: 7px; }
  .motionAssetName { overflow: hidden; color: #ddd; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .motionAssetRemove { border: 0; background: transparent; color: #888; font-size: 11px; cursor: pointer; }
  .motionAssetOrder { display: flex; gap: 2px; }
  .motionAssetMove { width: 24px; height: 28px; border: 1px solid #363636; border-radius: 7px; background: #242424; color: #aaa; cursor: pointer; }
  .motionAssetMove:disabled { opacity: .25; cursor: default; }
  .motionEmptyState { color: #777; font-size: 13px; }
  .motionSettings > .motionPanelHeading { font-size: 18px; font-weight: 800; }
  .motionControl { position:relative; isolation:isolate; min-height:56px; margin-top:12px; padding:0 16px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; overflow:hidden; border-radius:12px; background:#222; color:#aaa; font-size:13px; }
  .motionControl::before { content:""; position:absolute; inset:0 auto 0 0; z-index:0; width:var(--fill,0%); border-radius:inherit; background:#303030; pointer-events:none; }
  .motionSettings [hidden] { display: none !important; }
  .motionControlTitle,.motionControlEditor { position:relative; z-index:4; }
  .motionControlTitle { pointer-events:none; }
  .motionControlEditor { display:flex; align-items:center; justify-content:flex-end; color:#bbb; font-variant-numeric:tabular-nums; }
  .motionControlValueInput { width:72px; height:38px; margin:0; padding:0; border:0; outline:0; background:transparent; color:#bbb; text-align:right; font:500 13px/1 system-ui,sans-serif; font-variant-numeric:tabular-nums; }
  .motionControlValueInput:focus { color:#fff; }
  .motionControlValueInput::-webkit-inner-spin-button,.motionControlValueInput::-webkit-outer-spin-button { margin:0; -webkit-appearance:none; }
  .motionControlValueInput { -moz-appearance:textfield; }
  .motionControlSuffix { margin-left:2px; }
  .motionControl input[type="range"] { position:absolute !important; inset:0 !important; z-index:3 !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; opacity:0 !important; -webkit-appearance:none !important; appearance:none !important; border:0 !important; background:transparent !important; cursor:ew-resize; }
  .motionControl input[type="range"]::-webkit-slider-runnable-track { width:100% !important; height:100% !important; border:0 !important; background:transparent !important; }
  .motionControl input[type="range"]::-webkit-slider-thumb { width:1px !important; height:100% !important; margin:0 !important; opacity:0 !important; -webkit-appearance:none !important; appearance:none !important; border:0 !important; background:transparent !important; }
  .motionControl input[type="range"]::-moz-range-track { width:100% !important; height:100% !important; border:0 !important; background:transparent !important; }
  .motionControl input[type="range"]::-moz-range-progress { background:transparent !important; }
  .motionControl input[type="range"]::-moz-range-thumb { width:1px !important; height:100% !important; opacity:0 !important; border:0 !important; background:transparent !important; }
  .motionTimeline input[type="range"] { --fill:50%; width:100%; height:18px; margin:2px 0 0; padding:0; -webkit-appearance:none; appearance:none; border:1px solid #4a4a4a; border-radius:999px; background:linear-gradient(90deg,#f4f4f4 0 var(--fill),rgba(255,255,255,.08) var(--fill) 100%); box-shadow:inset 0 0 0 1px #1118; }
  .motionTimeline input[type="range"]::-webkit-slider-runnable-track { height:18px; border-radius:999px; background:transparent; }
  .motionTimeline input[type="range"]::-webkit-slider-thumb { width:18px; height:18px; margin:0; -webkit-appearance:none; appearance:none; border:0; border-radius:50%; background:#777; box-shadow:none; }
  .motionTimeline input[type="range"]::-moz-range-thumb { width:18px; height:18px; border:0; border-radius:50%; background:#777; }
  .motionEasingControl { margin-top:32px; padding-top:24px; border-top:1px solid var(--motion-line); }
  .motionEasingGraph { margin-top:18px; padding:10px; border-radius:14px; background:#202020; }
  .motionEasingGraph svg { display:block; width:100%; height:auto; overflow:visible; touch-action:none; }
  .motionEasingGrid { fill:none; stroke:#343434; stroke-width:2; stroke-linecap:round; stroke-dasharray:1 10; }
  .motionEasingCurve { fill:none; stroke:#eee; stroke-width:3; stroke-linecap:round; }
  .motionEasingHandleLine { stroke:#777; stroke-width:1.5; stroke-dasharray:4 4; }
  .motionEasingHandles circle { fill:#f4f4f4; stroke:#555; stroke-width:2; cursor:grab; }
  .motionEasingHandles circle:active { cursor:grabbing; fill:#fff; stroke:#999; }
  .motionEasingHandles circle:focus-visible { outline:none; stroke:#fff; stroke-width:4; }
  .motionEasingValues { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-top:9px; }
  .motionEasingValues input { min-width:0; height:38px; padding:0 5px; border:0; border-radius:8px; outline:0; background:#202020; color:#bbb; text-align:center; font:600 12px/1 system-ui,sans-serif; }
  .motionEasingValues input:focus { box-shadow:inset 0 0 0 1px #777; color:#fff; }
  .motionEasingMode { display:grid; grid-template-columns:1fr 1fr; margin-top:10px; padding:4px; border-radius:11px; background:#202020; }
  .motionEasingMode button { height:38px; border:0; border-radius:8px; background:transparent; color:#777; font-weight:700; cursor:pointer; }
  .motionEasingMode button.is-active { background:#303030; color:#fff; }
  .motionEasingList { display:grid; gap:4px; margin-top:14px; max-height:420px; overflow:auto; }
  .motionEasingPreset { min-height:42px; padding:0 12px; display:flex; align-items:center; justify-content:space-between; border:0; border-radius:9px; background:transparent; color:#aaa; font-size:13px; text-align:left; cursor:pointer; }
  .motionEasingPreset:hover,.motionEasingPreset.is-active { background:#303030; color:#fff; }
  .motionEasingPreset svg { width:48px; height:28px; }
  .motionEasingPreset .motionEasingCurve { stroke:#999; stroke-width:2; }
  .motionEasingPreset.is-active .motionEasingCurve { stroke:#fff; }
  .motionColorControl { grid-template-columns: 1fr auto 34px; align-items: center; }
  .motionColorControl input[type="color"] { width: 34px; height: 34px; padding: 0; overflow: hidden; border: 1px solid #444; border-radius: 9px; background: transparent; }
  .motionColorCode { color: #ddd; font-variant-numeric: tabular-nums; }
  .motionTextControls { margin-top: 28px; padding-top: 24px; border-top: 1px solid #2c2c2c; }
  .motionToggleControl { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #aaa; font-size: 13px; }
  .motionSceneToggle { margin-top: 22px; }
  .motionToggleControl input[type="checkbox"] { position:relative; display:block !important; flex:none; width:42px !important; height:24px !important; margin:0 !important; padding:0 !important; -webkit-appearance:none !important; appearance:none !important; border:0 !important; border-radius:999px !important; background:#292929 !important; box-shadow:inset 0 0 0 1px #4b4b4b !important; color:transparent !important; transition:.2s ease; cursor:pointer; }
  .motionToggleControl input[type="checkbox"]::before { content:none !important; display:none !important; }
  .motionToggleControl input::after { content:""; position:absolute; left:2px; top:2px; display:block; width:18px; height:18px; margin:0; border-radius:50%; background:#777; transition:.2s ease; }
  .motionToggleControl input:checked { background:#f4f4f4 !important; box-shadow:none !important; }
  .motionToggleControl input:checked::after { transform: translateX(18px); background: #222; }
  .motionTextInput { width: 100%; height: 46px; margin-top: 18px; padding: 0 14px; border: 1px solid #3a3a3a; border-radius: 12px; outline: 0; background: #202020; color: #fff; font: 600 14px/1 system-ui,sans-serif; }
  .motionTextInput:focus { border-color: #777; box-shadow: 0 0 0 3px #ffffff10; }
  .motionTextControls :disabled { opacity: .4; cursor: not-allowed; }
  .motionSelectControl { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .motionSelectControl select, .motionExportOptions select { width: 100%; height: 44px; padding: 0 36px 0 12px; appearance: none; border: 1px solid #393939; border-radius: 11px; background: #202020 linear-gradient(45deg,transparent 50%,#aaa 50%) calc(100% - 16px) 18px/6px 6px no-repeat; color: #fff; font: 600 13px system-ui,sans-serif; }
  .motionSegmentedControl { width:100%; padding:4px; display:grid; grid-template-columns:repeat(var(--segment-count),minmax(0,1fr)); gap:3px; border-radius:12px; background:#202020; }
  .motionSegmentedControl[style*="--segment-count: 5"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .motionSegmentedControl > .motionSegmentOption { min-width:0; min-height:40px; padding:7px 5px; border:0 !important; border-radius:9px !important; background:transparent !important; color:#707070 !important; font:600 12px/1.15 system-ui,sans-serif; cursor:pointer; transition:background-color .16s ease,color .16s ease; }
  .motionSegmentedControl > .motionSegmentOption:hover { color:#b8b8b8 !important; }
  .motionSegmentedControl > .motionSegmentOption.is-active,
  .motionSegmentedControl > .motionSegmentOption[aria-pressed="true"] { background:#303030 !important; color:#fff !important; box-shadow:inset 0 0 0 1px #353535; }
  .motionGridPathControl { margin-top:28px; padding-top:24px; border-top:1px solid var(--motion-line); }
  .motionGridPathHeading { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#bbb; font-size:13px; }
  .motionGridPathActions { display:flex; gap:6px; }
  .motionGridPathAction { min-height:30px; padding:0 10px; border:1px solid #383838; border-radius:8px; background:#242424; color:#ddd; font:650 11px system-ui,sans-serif; cursor:pointer; }
  .motionGridPathGrid { position:relative; margin-top:14px; padding:10px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; aspect-ratio:1.65; border:1px solid #343434; border-radius:9px; background:#191919; }
  .motionGridPathCell { position:relative; min-width:0; padding:0; border:1px solid #343434 !important; border-radius:4px !important; background:#242424 !important; cursor:crosshair; }
  .motionGridPathCell:hover { background:#2a2a2a !important; }
  .motionGridPathCell::before { display:none; }
  .motionGridPathPin { position:absolute; left:calc(50% + var(--pin-offset, 0px)); top:50%; z-index:2; width:24px; height:24px; display:grid; place-items:center; border:2px solid #f2f2f2; border-radius:50%; background:#777; color:#181818; font:800 10px/1 system-ui,sans-serif; transform:translate(-50%,-50%); cursor:grab; box-shadow:0 2px 8px #0008; }
  .motionGridPathPin:active { cursor:grabbing; }
  .motionGridPathLoop { position:absolute; left:calc(50% + var(--loop-offset, 13px)); top:50%; z-index:3; color:#555; font:800 13px/1 system-ui,sans-serif; transform:translate(-50%,-50%); pointer-events:none; }
  .motionGridPathHelp { margin:9px 2px 0; color:#666; font-size:10px; line-height:1.35; }
  .motionLogoControls { margin-top: 28px; padding-top: 24px; border-top: 1px solid #2c2c2c; }
  .motionSubheading { color: #ddd; font-size: 14px; font-weight: 800; }
  .motionLogoActions { display: flex; gap: 8px; margin-top: 14px; }
  .motionSmallButton { position: relative; min-height: 40px; padding: 0 13px; display: inline-grid; place-items: center; border: 1px solid #3a3a3a; border-radius: 10px; background: #222; color: #ddd; font: 700 12px system-ui,sans-serif; cursor: pointer; }
  .motionSmallButton input { position: absolute; opacity: 0; pointer-events: none; }
  .motionExportSection .motionPanelHeading { font-size: 18px; font-weight: 800; }
  .motionExportOptions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 16px; }
  .motionExportOptions label { display: grid; gap: 7px; color: #888; font-size: 11px; font-weight: 700; }
  .motionExportOptions label[hidden] { display: none; }
  .motionExportOptions label:first-child { grid-column: 1 / -1; }
  .motionExportButton { width: 100%; min-height: 54px; border: 0; border-radius: 14px; background: #f4f4f4; color: #111; font-size: 15px; font-weight: 800; cursor: pointer; }
  .motionExportButton:disabled { opacity: .5; cursor: wait; }
  .motionExportProgress { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 99px; background: #333; }
  .motionExportProgress span { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; }
  .motionAssetStatus, .motionExportStatus { min-height: 16px; margin: 10px 0 0; color: #8f8f8f; font-size: 11px; line-height: 1.45; }
  .motionAudioStatus { margin: 10px 0 0; color: #8f8f8f; font-size: 11px; line-height: 1.45; }
  .motionAudioControls { margin-top: 14px; }
  .motionAssetStatus:empty, .motionExportStatus:empty { display: none; }
  .motionAssetStatus.is-error, .motionExportStatus.is-error { color: #ff8f8f; }
  .motionTimeline { grid-column: 1 / -1; grid-row: 2; z-index: 3; display: grid; grid-template-columns: 42px 110px minmax(120px,1fr); gap: 14px; align-items: center; padding: 0 22px; background: #111; border-top: 1px solid var(--motion-line); box-shadow: 0 -18px 40px #0004; }
  .motionTimelineToggle { width: 38px; height: 38px; border: 1px solid #383838; border-radius: 11px; background: #242424; color: #fff; font-weight: 800; cursor: pointer; }
  .motionTimelineReadout { display:flex; gap:6px; align-items:center; color:#666; font-size:12px; font-variant-numeric:tabular-nums; }
  .motionTimelineReadout b { color:#f1f1f1; font-size:14px; }
  .motionTimelineReadout i { font-style:normal; }
  .motionTimelineTrack { position:relative; min-width:0; padding-top:18px; }
  .motionTimelineTicks { position:absolute; inset:3px 0 auto; height:10px; opacity:.45; background:repeating-linear-gradient(90deg,#777 0 1px,transparent 1px 5%); }
  .motionTimelineTrack input[type="range"] { width:100%; }
}

@media (max-width: 760px) {
  .toolModeRail, .motionWorkspace { display: none !important; }
}

/* effects-controls-29: initial slider/dropdown paint */
.motionControl:has(>input[type="range"]),#settingsPanelBody .control.effectsFigmaRange{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"label label" "range value"!important;align-items:center!important;gap:6px 8px!important;min-height:0!important;height:auto!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;position:relative!important;overflow:visible!important}
.motionControl:has(>input[type="range"])>.motionControlTitle,#settingsPanelBody .control.effectsFigmaRange>.row>label{grid-area:label!important;color:#fff!important;font-size:13px!important;font-weight:400!important;line-height:normal!important;opacity:.6!important}
.motionControl>input[type="range"],#settingsPanelBody .control>input[type="range"]{grid-area:range!important;position:relative!important;z-index:2!important;display:block!important;width:100%!important;min-width:0!important;height:12px!important;min-height:12px!important;margin:0!important;padding:0!important;opacity:0!important;appearance:none!important;border:0!important;background:transparent!important;box-shadow:none!important}
.effectsRangeVisual{grid-area:range;position:relative;z-index:1;display:block;align-self:center;width:100%;height:12px;pointer-events:none}.effectsRangeTrack,.effectsRangeFill{position:absolute;top:50%;left:0;height:4px;border-radius:999px;transform:translateY(-50%)}.effectsRangeTrack{width:100%;background:rgba(255,255,255,.2)}.effectsRangeFill{width:var(--effects-progress,50%);background:rgba(255,255,255,.6)}.effectsRangeHandle{position:absolute;top:50%;left:clamp(8px,var(--effects-progress,50%),calc(100% - 8px));width:16px;height:12px;border-radius:999px;background:#fff;transform:translate(-50%,-50%)}
.motionNativeSelectControl{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;height:auto!important;padding:0!important;border:0!important;background:transparent!important}.motionNativeSelectControl>.motionControlTitle{color:#fff!important;font-size:13px!important;font-weight:400!important;opacity:.6!important}.motionNativeSelectControl>select{width:100%!important;height:44px!important;padding:0 44px 0 16px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important;background-color:#202020!important;background-image:var(--chevron-down)!important;background-repeat:no-repeat!important;background-position:right 16px center!important;background-size:20px 20px!important;color:#fff!important;font:inherit!important;appearance:none!important}

/* effects-controls-30: isolate slider visuals */
.effectsRangeVisual{margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}.effectsRangeTrack,.effectsRangeFill{display:block!important;height:4px!important;min-height:4px!important;margin:0!important;padding:0!important;border:0!important;border-radius:999px!important;box-shadow:none!important;transform:translateY(-50%)!important}.effectsRangeTrack{width:100%!important;background:rgba(255,255,255,.2)!important}.effectsRangeFill{width:var(--effects-progress,50%)!important;background:rgba(255,255,255,.6)!important}.effectsRangeHandle{display:block!important;width:16px!important;min-width:16px!important;height:12px!important;min-height:12px!important;margin:0!important;padding:0!important;border:0!important;border-radius:999px!important;background:#fff!important;box-shadow:none!important;transform:translate(-50%,-50%)!important}

/* effects-controls-31: disable legacy range paint */
.motionControl:has(>input[type="range"])::before,#settingsPanelBody .control.effectsFigmaRange::before{content:none!important;display:none!important;background:none!important}

/* effects-colors-32: initial motion color controls */
.motionHexColorControl{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;height:auto!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important}.motionHexColorControl>.motionControlTitle{color:#fff!important;font-size:13px!important;font-weight:400!important;line-height:normal!important;opacity:.6!important}.motionHexColorEditor{position:relative;display:flex!important;align-items:center!important;width:100%!important;height:44px!important;padding:5px 12px 5px 8px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important;background:#202020!important;box-sizing:border-box!important;overflow:hidden}.motionHexColorSwatch{flex:0 0 32px!important;width:32px!important;height:32px!important;min-width:32px!important;margin:0 12px 0 0!important;padding:0!important;border:0!important;border-radius:4px!important;background:transparent!important;appearance:none!important;cursor:pointer}.motionHexColorSwatch::-webkit-color-swatch-wrapper{padding:0!important}.motionHexColorSwatch::-webkit-color-swatch{border:0!important;border-radius:4px!important}.motionHexColorInput{flex:1 1 auto!important;width:100%!important;min-width:0!important;height:32px!important;margin:0!important;padding:0!important;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;font:inherit!important;font-size:14px!important;text-transform:uppercase}

/* effects-colors-33: dither pair and overlay */
#settingsPanelBody .colors{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;align-items:stretch!important}#settingsPanelBody .colors>.colorField{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;width:100%!important}#settingsPanelBody .colorField>label{color:#fff!important;font-size:13px!important;font-weight:400!important;line-height:normal!important;opacity:.6!important}#settingsPanelBody .colorInputShell{display:flex!important;align-items:center!important;width:100%!important;height:44px!important;padding:5px 12px 5px 8px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important;background:#202020!important;box-sizing:border-box!important;overflow:hidden!important}#settingsPanelBody .colorInputShell .codex-color-trigger{flex:0 0 32px!important;width:32px!important;height:32px!important;min-width:32px!important;margin:0 12px 0 0!important;padding:0!important;border:0!important;border-radius:4px!important;box-shadow:none!important}#settingsPanelBody .colorInputShell .colorHexEditor{flex:1 1 auto!important;width:100%!important;min-width:0!important;height:32px!important;margin:0!important;padding:0!important;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;font:inherit!important;font-size:14px!important;text-transform:uppercase}#settingsPanelBody .colors>button{justify-self:center!important;margin:-4px 0!important;transform:rotate(90deg)}

/* effects-layout-37: denser side panels */
@media (min-width:761px){.motionWorkspace{grid-template-columns:220px 250px minmax(0,1fr) 280px!important}.motionLibrary{padding-left:16px!important;padding-right:16px!important}.motionScenePanel>.motionInspectorSection,.motionInspector>.motionInspectorSection{padding-left:16px!important;padding-right:16px!important}.motionCategoryList{margin-left:-16px!important;margin-right:-16px!important}.motionCategory{padding-left:16px!important;padding-right:16px!important}.app>.side{flex:0 0 280px!important;width:280px!important;min-width:280px!important}.app>.side .head,.app>.side #settingsPanelBody,.assetPanel .assetPanelHeader,.assetPanel .assetPanelBody{padding-left:16px!important;padding-right:16px!important}}

/* effects-layout-38: remove nested export padding */
@media (min-width:761px){.assetPanel .assetPanelBody>.zoom,.assetPanel .assetPanelBody>.assetMeta,.assetPanel .assetPanelBody>.panel{padding-left:0!important;padding-right:0!important}}

/* effects-settings-40: template visibility authority */
.motionSettings [hidden],.motionSettings .motionControl[hidden],.motionSettings .motionToggleControl[hidden],.motionSettings .motionSegmentControl[hidden],.motionSettings .motionBackgroundControls[hidden],.motionSettings .motionEasingControl[hidden]{display:none!important}



/* effects-gradient-stops-2: compact value fields and unified color picker */
.motionGradientStops{display:grid!important;gap:0!important;margin-top:4px!important}
.motionGradientStops>.motionControlTitle{margin-bottom:2px!important}
.motionGradientStop{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px!important;gap:8px!important;align-items:center!important;margin:0!important;padding:12px 0!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
.motionGradientStopColor{grid-column:1/-1!important;width:100%!important;height:44px!important}
.motionGradientStopValue{display:flex!important;align-items:center!important;width:100%!important;height:44px!important;padding:0 12px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important;background:#202020!important;box-sizing:border-box!important;overflow:hidden!important}
.motionGradientStopNumberInput{flex:1 1 auto!important;width:100%!important;min-width:0!important;height:32px!important;margin:0!important;padding:0!important;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;font:inherit!important;font-size:14px!important;font-variant-numeric:tabular-nums!important;-moz-appearance:textfield!important}
.motionGradientStopNumberInput::-webkit-inner-spin-button,.motionGradientStopNumberInput::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important}
.motionGradientStopUnit{flex:0 0 auto!important;margin-left:4px!important;color:rgba(255,255,255,.6)!important;font-size:13px!important}
.motionGradientStopRemove{display:flex!important;align-items:center!important;justify-content:center!important;width:36px!important;height:36px!important;min-width:36px!important;padding:0!important;border-radius:50%!important;font-size:20px!important;line-height:1!important}
.motionGradientStops>.motionSmallButton:last-child{justify-self:start!important;margin-top:12px!important}


/* effects-gradient-stops-3: single-row compact stop controls */
.motionGradientStop{grid-template-columns:minmax(90px,1fr) 48px 48px 30px!important;gap:6px!important;padding:8px 0!important}
.motionGradientStopColor{grid-column:auto!important;height:36px!important;padding:4px 8px 4px 6px!important;border-radius:10px!important}
.motionGradientStopColor .motionHexColorSwatch{flex-basis:26px!important;width:26px!important;height:26px!important;min-width:26px!important;margin-right:8px!important}
.motionGradientStopColor .motionHexColorInput{height:28px!important;font-size:12px!important}
.motionGradientStopValue{height:36px!important;padding:0 8px!important;border-radius:10px!important}
.motionGradientStopNumberInput{height:28px!important;font-size:13px!important}
.motionGradientStopUnit{margin-left:2px!important;font-size:11px!important}
.motionGradientStopRemove{width:30px!important;height:30px!important;min-width:30px!important;font-size:18px!important}


/* effects-gradient-stops-4: preserve full 100% values in one row */
.motionGradientStop{grid-template-columns:minmax(76px,1fr) 55px 55px 28px!important;gap:5px!important}
.motionGradientStopColor{padding-left:5px!important;padding-right:6px!important}
.motionGradientStopColor .motionHexColorSwatch{flex-basis:22px!important;width:22px!important;height:22px!important;min-width:22px!important;margin-right:6px!important}
.motionGradientStopColor .motionHexColorInput{font-size:11px!important}
.motionGradientStopValue{padding:0 6px!important}
.motionGradientStopNumberInput{font-size:12px!important}
.motionGradientStopUnit{font-size:10px!important}
.motionGradientStopRemove{width:28px!important;height:28px!important;min-width:28px!important}


/* effects-gradient-stops-5: equal compact heights and square inner swatch */
.motionGradientStop{align-items:center!important}
.motionGradientStopColor,.motionGradientStopValue{height:28px!important;min-height:28px!important;max-height:28px!important;box-sizing:border-box!important}
.motionGradientStopColor{padding:2px 5px!important}
.motionGradientStopColor .motionHexColorSwatch{flex-basis:20px!important;width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;max-height:20px!important;margin-right:6px!important;padding:0!important;border:0!important;border-radius:3px!important;background:transparent!important;box-sizing:border-box!important;overflow:hidden!important}
.motionGradientStopColor .motionHexColorSwatch::-webkit-color-swatch-wrapper{padding:0!important}
.motionGradientStopColor .motionHexColorSwatch::-webkit-color-swatch{border:0!important;border-radius:3px!important}
.motionGradientStopColor .motionHexColorInput,.motionGradientStopNumberInput{height:22px!important;line-height:22px!important}
.motionGradientStopRemove{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;max-height:28px!important;box-sizing:border-box!important}
.motionSelectControl.isUnavailable{opacity:.48}
.motionSelectControl.isUnavailable .motionSegmentedControl{cursor:not-allowed}
.motionSelectControl.isUnavailable .motionSegmentOption{cursor:not-allowed}
.motionInspector .motionPanelHeading{min-height:32px!important}
.motionInspector .motionPanelHeading:has(> .effectsCanvasLayoutTools){display:block!important}
.motionInspector .motionPanelHeading>.effectsCanvasLayoutTools{width:100%!important;margin:10px 0 0!important}
.motionInspector .motionPanelHeading,.motionInspector .motionPanelHeading h2,.motionInspector>.motionInspectorSection>h2{font-size:15px!important;font-weight:650!important;line-height:18px!important;letter-spacing:-.02em!important}
.motionInspector .motionPanelHeading h2,.motionInspector>.motionInspectorSection>h2{margin:0!important}
.motionInspector>.motionInspectorSection{padding-top:16px!important;padding-bottom:16px!important}
.motionBackgroundSection .motionBackgroundControls{margin-top:12px!important}
.motionInspector .motionRatioGroup{padding:3px!important;border-radius:11px!important}
.motionInspector .motionRatioGroup button{min-height:30px!important;padding:0 7px!important;border-radius:8px!important;font-size:11px!important}
.motionInspector .motionExportOptions{gap:8px!important;margin:10px 0 12px!important}
.motionInspector .motionExportOptions label{gap:5px!important}
.motionInspector .motionExportOptions select{height:38px!important;border-radius:10px!important}
.motionInspector .motionExportButton{min-height:42px!important;border-radius:11px!important;font-size:13px!important}
.motionBackgroundSection .motionBackgroundControls{margin-top:8px!important;padding-top:0!important;border-top:0!important}
.motionBackgroundSection .motionSegmentedControl{padding:3px!important;border-radius:11px!important}
.motionBackgroundSection .motionSegmentedControl>.motionSegmentOption{min-height:34px!important;padding:5px 4px!important;border-radius:8px!important;font-size:12px!important}
.motionBackgroundSection .motionSelectControl{gap:6px!important;margin-top:16px!important}
.motionBackgroundSection .motionSelectControl select{height:38px!important;border-radius:10px!important}
.motionBackgroundSection .motionSmallButton,.motionInspector .motionUploadButton,.motionInspector .effectsLogoAddButton{min-height:34px!important;padding:0 12px!important;border:1px solid #3a3a3a!important;border-radius:9px!important;background:#222!important;color:#ddd!important;font:700 12px/1 system-ui,sans-serif!important}
.motionInspector .effectsLogoAdd{border-top:0!important}
.motionInspector .motionAssetList{gap:8px!important;margin-top:12px!important}
.motionInspector .motionAssetItem{grid-template-columns:48px minmax(0,1fr) auto auto!important;gap:6px!important;padding:7px!important;border-radius:10px!important}
.motionInspector .motionAssetItem canvas{width:48px!important;height:36px!important;border-radius:6px!important}
.motionInspector .motionAssetName{font-size:11px!important}

/* Canvas segmented fields and clearer Gradient grouping. */
.motionCanvasField{display:grid;gap:6px;margin-top:14px}.motionCanvasLabel{color:#fff;font-size:13px;font-weight:400;line-height:1.2;opacity:.6}.motionCanvasSegmented{width:100%;padding:3px;display:grid;gap:3px;border:0;border-radius:11px;background:#202020}.motionCanvasSegmented.motionRatioGroup{grid-template-columns:repeat(5,minmax(0,1fr))}.motionCanvasSegmented.motionFpsGroup{grid-template-columns:repeat(4,minmax(0,1fr))}.motionCanvasSegmented button{min-width:0;min-height:34px;padding:5px 4px;border:0;border-radius:8px;background:transparent;color:#707070;font:600 12px/1.15 system-ui,sans-serif;cursor:pointer}.motionCanvasSegmented button:hover{color:#b8b8b8}.motionCanvasSegmented button.is-active,.motionCanvasSegmented button[aria-pressed="true"]{background:#303030;color:#fff;box-shadow:inset 0 0 0 1px #353535}.motionCanvasSafeRow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;color:#aaa;font-size:13px}.motionGradientStops{display:grid!important;gap:8px!important;margin-top:18px!important;padding-top:0!important;border-top:0!important}.motionGradientStops>.motionControlTitle{margin-bottom:2px!important}.motionGradientStop{margin:0!important;padding:0!important;border:0!important}.motionGradientStops>.motionSmallButton:last-child{margin-top:8px!important}

/* Match Background field labels to the left settings panel hierarchy. */
.motionBackgroundSection .motionSelectControl>.motionControlTitle,.motionBackgroundSection .motionGradientStops>.motionControlTitle{color:#fff!important;font-size:13px!important;font-weight:400!important;line-height:1.2!important;opacity:.6!important}
.motionBackgroundSection .motionGradientStops>.motionControlTitle .motionValue{color:inherit!important;font-size:13px!important;font-weight:400!important;line-height:inherit!important}

/* Match left-panel segmented labels to range-control labels. */
.motionSettings .motionSegmentedField>.motionControlTitle{color:#fff!important;font-size:13px!important;font-weight:400!important;line-height:1.2!important;opacity:.6!important}

/* Align field-label typography and tighten label-to-control spacing. */
.motionCanvasField{gap:4px!important;margin-top:12px!important}.motionCanvasLabel,.motionCanvasSafeRow>span{color:rgba(255,255,255,.6)!important;font-size:13px!important;font-weight:400!important;line-height:1.2!important;opacity:1!important}.motionCanvasSafeRow{margin-top:14px!important}.motionExportOptions label{gap:4px!important;color:rgba(255,255,255,.6)!important;font-size:13px!important;font-weight:400!important;line-height:1.2!important}.motionSettings .motionSegmentedField{gap:4px!important;margin-top:16px!important}.motionBackgroundSection .motionSelectControl{gap:4px!important;margin-top:14px!important}.motionNativeSelectControl{gap:4px!important}
/* MOTION_TIMELINE_VIEWPORT_FIX */ .motionWorkspace{grid-template-rows:minmax(0,1fr) 270px!important;}body[data-tool-mode=motion] .motionWorkspace{grid-template-rows:minmax(0,1fr) 270px!important;}