.motion-demo{--motion-line:#ddded9;--motion-ink:#232426;--motion-muted:#777a75;min-width:0;overflow:hidden;border:0;border-radius:0;background:#fafaf8;color:var(--motion-ink);font-family:Outfit,Pretendard,-apple-system,BlinkMacSystemFont,sans-serif}
.motion-stage{position:relative;overflow:hidden;width:100%;background:#fafaf8}
.motion-view-label{margin:0;padding:12px 18px;color:#777a75;font-size:12px;line-height:1.5;font-weight:400}
.motion-plan-area{padding:0 18px 12px;background:#fff;border-top:0}
.motion-plan-summary{width:fit-content;list-style:none;color:#73796f;font-size:12px;line-height:1.7;cursor:pointer}.motion-plan-summary::-webkit-details-marker{display:none}.motion-plan-summary:after{content:'＋';margin-left:7px;color:#999e94}.motion-plan-area[open]>.motion-plan-summary:after{content:'−'}
.motion-plan-area .motion-view-label{padding:10px 0 0;color:#9b9e96;font-size:12px}
.motion-plan-canvas{display:block;width:100%;height:72px}
.motion-plan-legend{margin:0;text-align:center;color:#868a80;font-size:12px;word-spacing:10px;line-height:1.5}
.motion-canvas{display:block;width:100%;max-width:100%}
.motion-stage-badge{display:none}
.motion-controls{display:flex;align-items:center;gap:10px;padding:15px 18px;border-top:1px solid var(--motion-line);background:#fff}
.motion-controls button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:7px 12px;border:1px solid var(--motion-line);border-radius:6px;background:#fff;color:var(--motion-ink);font:inherit;font-size:13px;line-height:1.3;white-space:nowrap;cursor:pointer}
.motion-controls .motion-play{min-width:66px;border-color:#232426;background:#232426;color:#fff;font-weight:500}
.motion-controls button:hover{background:#f0f0eb}.motion-controls .motion-play:hover{background:#3c3f3a}
.motion-controls button:focus-visible,.motion-scrubber:focus-visible,.motion-repeat input:focus-visible,.motion-calculations summary:focus-visible,.motion-plan-summary:focus-visible{outline:2px solid #232426;outline-offset:3px}
.motion-scrub-label{display:flex;align-items:center;flex:1;min-width:36px}
.motion-scrubber{width:100%;height:28px;margin:0;accent-color:#343834;cursor:pointer}
.motion-time{color:#757972;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.motion-repeat{display:flex;align-items:center;gap:5px;color:#70756e;font-size:13px;white-space:nowrap;cursor:pointer}
.motion-repeat input{width:13px;height:13px;margin:0;accent-color:#343834;cursor:pointer}
.motion-readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 18px 15px;background:#fff}
.motion-metric{display:flex;flex-direction:column;gap:5px;padding-top:13px;border-top:1px solid #e9eae5}
.motion-metric-name{color:#858980;font-size:12px;line-height:1.4}
.motion-metric-value{color:#3e443c;font-size:14px;font-weight:400;white-space:nowrap}
.motion-calculations{padding:0 18px 14px;background:#fff;color:#73796f;font-size:12px;line-height:1.7}
.motion-calculations summary{width:fit-content;cursor:pointer;color:#73796f;font-size:12px;list-style:none}.motion-calculations summary::-webkit-details-marker{display:none}
.motion-calculations summary:after{content:'＋';margin-left:7px;color:#999e94}.motion-calculations[open] summary:after{content:'−'}
.motion-calculation-values{margin:8px 0 4px;color:#5c6558;font-size:12px;font-variant-numeric:tabular-nums}
.motion-calculation-note{margin:0;color:#8a9084;font-size:12px;line-height:1.7;word-break:keep-all}
.motion-note{margin:0;padding:0 18px 16px;background:#fff;color:#969c90;font-size:12px;line-height:1.65;word-break:keep-all}
.motion-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.motion-demo--compact .motion-controls{justify-content:flex-end;padding:8px 12px}
.motion-demo--compact .motion-readout,.motion-demo--compact .motion-note,.motion-demo--compact .motion-calculations{display:none}
.motion-demo--compact>.motion-view-label,.motion-demo--compact .motion-plan-area{display:none}
.motion-demo--compact .motion-stage-badge{top:12px;left:12px;font-size:8px}
@media(max-width:520px){.motion-controls{flex-wrap:wrap;gap:9px;padding:12px 14px}.motion-controls button{min-height:44px;padding:7px 11px}.motion-scrub-label{order:4;flex-basis:100%}.motion-time{margin-left:auto}.motion-readout{gap:9px;padding:0 14px 13px}.motion-metric-value{font-size:13px}.motion-calculations{padding:0 14px 12px}.motion-note{padding:0 14px 14px}.motion-stage-badge{top:14px;left:16px;font-size:12px}}

.motion-demo{container-type:inline-size}.motion-repeat{min-height:44px}.motion-calculations summary,.motion-plan-summary{min-height:44px;display:flex;align-items:center}.motion-note{color:#61636a}.motion-view-label{color:#61636a}.motion-metric-name{color:#61636a}
@container(max-width:520px){.motion-controls{flex-wrap:wrap;gap:9px;padding:12px 14px}.motion-controls button{min-height:44px;padding:8px 12px}.motion-scrub-label{order:4;flex-basis:100%}.motion-time{margin-left:auto}.motion-metric-value{font-size:13px}}