.motion-page { width: min(1460px, calc(100% - 36px)); margin: 0 auto; padding-bottom: 80px; }
.motion-page .page-intro { width: min(920px, 100%); }
.motion-workspace { overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: white; box-shadow: 0 18px 48px rgba(14,38,71,.09); }
.motion-commandbar, .motion-breakpoints { display: flex; min-height: 62px; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.command-label { margin-right: 4px; color: #708197; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.command-spacer { flex: 1; }
.motion-button { min-height: 36px; padding: 7px 12px; border: 1px solid #ced9e8; border-radius: 9px; color: #29415f; background: white; font-size: 11px; font-weight: 850; cursor: pointer; }
.motion-button:hover:not(:disabled) { border-color: #94b6ea; background: #f3f7ff; }
.motion-button.primary { border-color: var(--blue); color: white; background: var(--blue); }
.motion-button.icon { width: 37px; padding: 0; font-size: 17px; }
.motion-button:disabled { opacity: .4; cursor: not-allowed; }
.motion-breakpoints { justify-content: center; background: white; }
.motion-breakpoint { min-width: 105px; padding: 7px 14px; border: 0; border-radius: 9px; color: #6b7b90; background: transparent; cursor: pointer; }
.motion-breakpoint strong, .motion-breakpoint span { display: block; }
.motion-breakpoint strong { font-size: 12px; }
.motion-breakpoint span { margin-top: 2px; font-size: 9px; }
.motion-breakpoint.active { color: var(--navy); background: var(--blue-soft); }
.motion-breakpoints .motion-button { margin-left: 12px; }

.motion-grid { display: grid; min-height: 720px; grid-template-columns: 330px 1fr; }
.motion-inspector { overflow-y: auto; max-height: 790px; border-right: 1px solid var(--line); background: #f8fafd; }
.motion-inspector fieldset { min-width: 0; margin: 0; padding: 19px; border: 0; border-bottom: 1px solid var(--line); }
.motion-inspector legend { margin-bottom: 13px; padding: 0; color: var(--navy); font-size: 14px; font-weight: 900; }
.motion-inspector label { display: block; margin-top: 12px; color: #53647b; font-size: 10px; font-weight: 850; }
.motion-inspector label:first-of-type { margin-top: 0; }
.motion-field { width: 100%; min-height: 37px; padding: 7px 9px; border: 1px solid #ced9e8; border-radius: 8px; color: #203957; background: white; font-size: 11px; }
.motion-inspector label .motion-field { display: block; margin-top: 5px; }
.target-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 13px; }
.target-options button { min-width: 0; padding: 9px 4px; border: 1px solid #d7e0ec; border-radius: 9px; color: #60728a; background: white; cursor: pointer; }
.target-options button strong, .target-options button span { display: block; }
.target-options button strong { font-size: 10px; }
.target-options button span { margin-top: 2px; font-size: 8px; }
.target-options button.active { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.two-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.range-head { display: flex; justify-content: space-between; }
.range-head output { color: var(--blue); }
.motion-inspector input[type="range"] { width: 100%; margin-top: 8px; accent-color: var(--blue); }
.check-row { display: flex !important; align-items: flex-start; gap: 7px; line-height: 1.45; }
.check-row input { margin-top: 1px; accent-color: var(--blue); }

.motion-stage-column { display: grid; min-width: 0; grid-template-rows: auto 1fr auto auto; }
.motion-stage-toolbar { display: flex; min-height: 51px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.motion-view-toggle { display: inline-flex; padding: 3px; border-radius: 9px; background: #edf2f8; }
.motion-view-toggle button { padding: 7px 11px; border: 0; border-radius: 7px; color: #67798f; background: transparent; font-size: 10px; font-weight: 850; cursor: pointer; }
.motion-view-toggle button.active { color: var(--navy); background: white; box-shadow: 0 2px 7px rgba(14,38,71,.12); }
.motion-stage-toolbar label { color: #586b83; font-size: 10px; font-weight: 750; }
.motion-stage-toolbar input { accent-color: var(--blue); }

.motion-canvas { display: grid; min-height: 570px; place-items: center; overflow: hidden; padding: 48px; background: radial-gradient(circle at 15% 20%, rgba(74,138,241,.13), transparent 27%), linear-gradient(145deg, #eaf0f8, #f8fafc); }
.motion-canvas[data-breakpoint="tablet"] { padding-inline: 14%; }
.motion-canvas[data-breakpoint="mobile"] { padding-inline: 30%; }
.sample-section { position: relative; display: grid; width: min(100%, 920px); min-height: 410px; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 42px; overflow: hidden; padding: 46px; border: 1px solid rgba(255,255,255,.58); border-radius: 24px; color: white; background: linear-gradient(135deg, #0c203c, #173b66); box-shadow: 0 24px 65px rgba(10,33,63,.23); isolation: isolate; }
.sample-section::before { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; top: -160px; right: -80px; border-radius: 50%; background: rgba(70,133,241,.24); }
.sample-copy { display: flex; align-items: flex-start; flex-direction: column; gap: 14px; }
.sample-badge { padding: 6px 9px; border-radius: 999px; color: #d7e6ff; background: rgba(92,149,241,.22); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sample-copy h2 { margin: 0; font-size: clamp(30px, 4vw, 53px); line-height: .98; letter-spacing: -.05em; }
.sample-copy p { margin: 0; color: #b9cbe1; font-size: 12px; line-height: 1.6; }
.sample-copy button { min-height: 39px; padding: 0 14px; border: 0; border-radius: 9px; color: #0c203c; background: white; font-size: 10px; font-weight: 900; }
.sample-card { overflow: hidden; border: 1px solid rgba(255,255,255,.26); border-radius: 18px; background: rgba(255,255,255,.1); box-shadow: 0 20px 35px rgba(0,0,0,.22); backdrop-filter: blur(8px); }
.sample-card img { display: block; width: 100%; height: 220px; object-fit: cover; }
.sample-card div { display: grid; gap: 4px; padding: 16px; }
.sample-card strong { font-size: 13px; }
.sample-card span { color: #bdcde0; font-size: 9px; }
.motion-target-outline { outline: 2px solid #65a0ff; outline-offset: 6px; }
.motion-path { position: absolute; z-index: 9; height: 2px; border-top: 2px dashed rgba(117,168,255,.8); transform-origin: right center; pointer-events: none; }
.motion-path::before, .motion-path::after { content: ""; position: absolute; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: #75a8ff; box-shadow: 0 0 0 3px rgba(117,168,255,.18); }
.motion-path::before { left: 0; }
.motion-path::after { right: 0; }
.motion-path.hidden { display: none; }
.motion-canvas[data-breakpoint="mobile"] .sample-section { width: 350px; min-height: 560px; grid-template-columns: 1fr; gap: 24px; padding: 28px; }
.motion-canvas[data-breakpoint="mobile"] .sample-card img { height: 170px; }

.motion-timeline { display: flex; min-height: 61px; align-items: center; gap: 9px; padding: 10px 14px; border-top: 1px solid var(--line); background: white; }
.timeline-scrubber { display: flex; flex: 1; align-items: center; gap: 9px; }
.timeline-scrubber input { width: 100%; accent-color: var(--blue); }
.timeline-scrubber output { min-width: 55px; color: #61738b; font: 10px ui-monospace, monospace; }
.motion-field.speed { width: 72px; }
.motion-warnings { display: flex; min-height: 48px; flex-wrap: wrap; align-items: center; gap: 7px; padding: 9px 14px; border-top: 1px solid var(--line); background: white; }
.motion-warning { padding: 6px 9px; border-radius: 999px; color: #765217; background: #fff3d8; font-size: 9px; font-weight: 850; }
.motion-warning.ok { color: #225c41; background: #e5f6ed; }
.motion-warning.error { color: #8a3030; background: #ffe8e8; }

.motion-output { border-top: 1px solid var(--line); background: #0d213e; }
.motion-output-tabs { display: flex; gap: 4px; padding: 10px 14px 0; }
.motion-output-tabs button { padding: 9px 12px; border: 0; border-radius: 8px 8px 0 0; color: #aebed2; background: transparent; font-size: 10px; font-weight: 850; cursor: pointer; }
.motion-output-tabs button.active { color: white; background: #172f52; }
#motionGeneratedOutput { min-height: 250px; max-height: 450px; overflow: auto; margin: 0; padding: 22px; color: #dce8f7; white-space: pre-wrap; font: 11px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; }
.motion-output-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 15px; border-top: 1px solid rgba(255,255,255,.1); }
.motion-toast { position: fixed; z-index: 200; right: 22px; bottom: 22px; transform: translateY(20px); padding: 11px 14px; border-radius: 10px; color: white; background: #102b4e; box-shadow: 0 15px 35px rgba(0,0,0,.2); font-size: 11px; font-weight: 850; opacity: 0; pointer-events: none; transition: .2s ease; }
.motion-toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 1050px) {
  .motion-grid { grid-template-columns: 290px 1fr; }
  .motion-canvas { padding: 30px; }
  .sample-section { gap: 26px; padding: 34px; }
}
@media (max-width: 820px) {
  .motion-commandbar { flex-wrap: wrap; }
  .motion-grid { grid-template-columns: 1fr; }
  .motion-inspector { max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .motion-canvas { min-height: 520px; }
}
@media (max-width: 600px) {
  .motion-page { width: min(100% - 20px, 1460px); }
  .motion-breakpoints { overflow-x: auto; justify-content: flex-start; }
  .motion-breakpoint { min-width: 88px; }
  .motion-breakpoints .motion-button { white-space: nowrap; }
  .motion-canvas, .motion-canvas[data-breakpoint="mobile"] { padding: 20px 10px; }
  .sample-section, .motion-canvas[data-breakpoint="mobile"] .sample-section { width: min(350px, 100%); min-height: 550px; grid-template-columns: 1fr; padding: 25px; }
  .motion-timeline { flex-wrap: wrap; }
  .timeline-scrubber { min-width: 100%; order: 3; }
  .motion-output-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-toast { transition: none; }
}