:root{--motion-duration:220ms;--motion-ease:cubic-bezier(.2,.7,.2,1)}
html[data-motion] button,html[data-motion] .secondary,html[data-motion] .card,html[data-motion] input,html[data-motion] select{transition:background-color var(--motion-duration),border-color var(--motion-duration),box-shadow var(--motion-duration),opacity var(--motion-duration)}
html[data-motion] button:active:not(:disabled){filter:brightness(.96)}
html[data-motion] .card:hover{border-color:color-mix(in srgb,var(--stroke) 65%,var(--accent))}
html[data-motion] [role=tabpanel],html[data-motion] dialog{transition:opacity var(--motion-duration) var(--motion-ease),transform var(--motion-duration) var(--motion-ease),display var(--motion-duration) allow-discrete,overlay var(--motion-duration) allow-discrete}
html[data-motion] dialog{opacity:0;transform:translateY(8px)}
html[data-motion] dialog[open]{opacity:1;transform:none}
@starting-style{html[data-motion] dialog[open]{opacity:0;transform:translateY(8px)}}
html[data-motion] dialog::backdrop{background:#061c2b77;transition:background var(--motion-duration),display var(--motion-duration) allow-discrete,overlay var(--motion-duration) allow-discrete}
.motion-tab-host{position:relative}.motion-tab-line{position:absolute;left:0;top:0;height:3px;border-radius:4px;background:var(--accent);pointer-events:none;transition:transform var(--motion-duration) var(--motion-ease),width var(--motion-duration);z-index:2}
.motion-settings-button{font-size:12px!important;white-space:normal}.user-popover .motion-settings-button{width:100%;margin-block:7px}
.presentation-controls>.motion-settings-button{align-self:center;min-height:40px}
.motion-settings-dialog{width:min(520px,calc(100vw - 32px));border:1px solid var(--stroke);background:var(--surface);color:var(--text);border-radius:18px;padding:24px;max-height:85vh;overflow:auto}
.motion-settings-dialog label{display:grid;gap:8px}.motion-settings-dialog select{width:100%;padding:10px;background:var(--surface-soft);color:var(--text);border:1px solid var(--stroke);border-radius:8px}
.motion-settings-dialog p{line-height:1.7;color:var(--text-muted)}.motion-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}.motion-heading h2{margin:0;font-size:22px}.motion-heading button{flex:none}
.motion-focus-guide{position:fixed;z-index:9998;pointer-events:none;border:2px solid var(--accent);border-radius:10px;transition:left var(--motion-duration),top var(--motion-duration),width var(--motion-duration),height var(--motion-duration);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.motion-working{position:relative}.motion-working:after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:200% 100%;animation:motion-working 1.6s linear infinite;pointer-events:none;z-index:2}
.motion-action[aria-busy=true]{box-shadow:inset 0 -2px var(--accent);opacity:.75}
.camera-view[aria-busy=true] .camera-stage:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:200% 100%;animation:motion-working 1.6s linear infinite;pointer-events:none}
html[data-motion] .data-state.state-loading{background:linear-gradient(100deg,var(--surface-soft),var(--surface),var(--surface-soft));background-size:200% 100%;animation:motion-working 2s linear infinite}
html[data-motion] .data-state.state-loading:after{content:'';display:block;width:70%;height:48px;opacity:.35;background:repeating-linear-gradient(0deg,transparent 0 10px,var(--stroke) 10px 18px);border-radius:6px}
.motion-skeleton{display:grid;gap:14px;padding:22px;min-height:150px;pointer-events:none}.motion-skeleton i{height:18px;border-radius:6px;background:linear-gradient(100deg,var(--surface-soft) 25%,color-mix(in srgb,var(--accent) 12%,var(--surface)) 45%,var(--surface-soft) 65%);background-size:250% 100%;animation:motion-working 2.2s linear infinite}.motion-skeleton i:nth-child(2){width:80%}.motion-skeleton i:nth-child(3){width:60%}
@keyframes motion-working{to{background-position:-200% 0}}
html[data-motion=expressive] .auth-story:before,html[data-motion=expressive] .empty-message:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 30% 25%,#78dfda28,transparent 65%);animation:motion-breathe 14s ease-in-out infinite;z-index:-1}
html[data-motion=expressive] .empty-message{position:relative;isolation:isolate;overflow:hidden}
@keyframes motion-breathe{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}
.motion-refresh-ring{width:12px;height:12px;flex:0 0 12px;align-self:center;display:inline-block;border-radius:50%;background:conic-gradient(var(--accent) var(--refresh-progress,0deg),var(--stroke) 0);position:relative}.motion-refresh-ring:after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--surface-soft)}
.motion-refresh-ring[data-state=busy]{animation:motion-spin 1.2s linear infinite;background:conic-gradient(var(--accent) 90deg,var(--stroke) 0)}
.motion-refresh-ring[data-state=paused],.motion-refresh-ring[data-state=manual],.motion-refresh-ring[data-state=static],.motion-refresh-ring[data-state=off]{opacity:.45;background:var(--stroke)}
@keyframes motion-spin{to{transform:rotate(360deg)}}
.motion-filter-chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;color:var(--text-muted);font-size:11px}.motion-filter-chips span{border:1px solid var(--stroke);border-radius:16px;padding:4px 9px;background:var(--surface-soft);overflow-wrap:anywhere}.motion-filter-chips[data-dirty=true]{border-left:3px solid var(--out,#b27925);padding-left:8px}
.motion-map-focus{filter:drop-shadow(0 0 5px var(--accent));outline:2px solid var(--accent);outline-offset:4px;border-radius:50%}.map-pin.selected:after{content:'';position:absolute;inset:-8px;border:1px solid currentColor;border-radius:50%;animation:motion-map-ring 3s ease-out infinite;pointer-events:none}
@keyframes motion-map-ring{0%{opacity:.5;transform:scale(.7)}100%{opacity:0;transform:scale(1.5)}}
.motion-row-focus{box-shadow:inset 3px 0 var(--accent);background:var(--surface-soft)!important}
.motion-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}.motion-toolbar button,.motion-toolbar select{font-size:12px}.motion-toolbar input[type=range]{flex:1;min-width:140px;width:auto;accent-color:var(--accent)}
.motion-feature-card{padding:16px;border:1px solid var(--stroke);border-radius:12px;background:var(--surface);margin:14px 0;color:var(--text)}.motion-feature-card h3{margin:0 0 10px}.motion-feature-card p{font-size:12px;color:var(--text-muted);line-height:1.6}.motion-feature-card select{background:var(--surface-soft);color:var(--text);padding:7px;border:1px solid var(--stroke);border-radius:6px}
.motion-replay-values{display:flex;gap:20px;flex-wrap:wrap;font-variant-numeric:tabular-nums}.motion-replay-values strong{font-size:22px}.motion-comparison-chart{height:270px;min-width:0}.motion-replay-label{font-size:12px;font-variant-numeric:tabular-nums}
.motion-layout-handle{display:none}.motion-layout-edit .motion-layout-card{outline:1px dashed var(--accent);outline-offset:3px}.motion-layout-edit .motion-layout-handle{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-bottom:8px}.motion-layout-handle button{font-size:11px;padding:4px 8px}.motion-layout-grab{cursor:grab;touch-action:none}.motion-layout-card[aria-grabbed=true]{opacity:.6}.motion-layout-target{outline:3px solid var(--accent)!important}
.motion-direction-focus{box-shadow:inset 0 0 0 2px var(--accent)!important}.motion-direction-button{font-size:11px;padding:4px 8px;margin-left:auto;background:var(--surface-soft);color:var(--accent);border:1px solid var(--stroke)}
.motion-timeline{margin-block:14px}.motion-timeline summary{cursor:pointer;font-weight:600}.motion-timeline ol{list-style:none;margin:15px 0;padding-left:15px;border-left:1px solid var(--stroke);max-height:340px;overflow:auto}.motion-timeline li{position:relative;padding:0 0 18px 16px;overflow-wrap:anywhere}.motion-timeline li:before{content:'';position:absolute;left:-20px;top:6px;width:8px;height:8px;background:var(--accent);border:2px solid var(--surface);border-radius:50%}.motion-timeline time{display:block;color:var(--text-muted);font-size:11px}.motion-timeline p{margin:3px 0;font-size:12px}
.motion-connection-diagram{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}.motion-connection-node{flex:1;min-width:130px;border:1px solid var(--stroke);border-radius:10px;padding:12px;background:var(--surface-soft);display:grid;gap:8px}.motion-connection-node small{color:var(--text-muted)}.motion-connection-node[data-state=busy]{border-color:var(--accent)}.motion-connection-node[data-state=error]{border-color:var(--danger)}.motion-connection-edge{align-self:center;color:var(--accent)}
.motion-tour-dialog{position:fixed;margin:0;inset:auto;width:min(350px,calc(100vw - 24px));padding:18px;border:1px solid var(--accent);border-radius:14px;box-shadow:var(--shadow);background:var(--surface);color:var(--text);z-index:9999}.motion-tour-dialog h3{margin:0 0 8px}.motion-tour-dialog p{font-size:13px;line-height:1.6}.motion-tour-dialog::backdrop{background:#061c2b66}.motion-tour-target{outline:3px solid var(--accent)!important;outline-offset:4px}.motion-tour-step{font-size:11px;color:var(--text-muted)}
html[data-motion=calm] .map-pin.selected:after,html[data-motion=off] .map-pin.selected:after{display:none}
html[data-motion-visible=false] *,html[data-motion-visible=false] *:before,html[data-motion-visible=false] *:after{animation-play-state:paused!important}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion=off] .motion-focus-guide{display:none}
@media(max-width:720px){.motion-toolbar{gap:6px}.motion-toolbar button{padding:7px 10px}.motion-settings-button{font-size:11px!important}.auth-layout .presentation-controls{flex-wrap:wrap}.motion-feature-card{padding:12px}.motion-connection-node{min-width:110px}}
@media print{.motion-layout-handle,.motion-toolbar,.motion-tab-line,.motion-focus-guide,.motion-settings-button,.motion-tour-dialog,.motion-direction-button,.motion-refresh-ring,.motion-skeleton{display:none!important}.motion-working:after{display:none}}

html[data-motion=standard] header.top,html[data-motion=expressive] header.top{animation:motion-header-breathe 12s ease-in-out infinite}
@keyframes motion-header-breathe{0%,100%{box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 12%,transparent)}50%{box-shadow:0 2px 14px color-mix(in srgb,var(--accent) 19%,transparent)}}

.motion-tour-dialog::backdrop{backdrop-filter:none;background:#061c2b33}
.motion-layout-grab{user-select:none}