/* CSS motion generator */
.motion-mode-selector{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;margin-bottom:1.25rem}.motion-mode-selector h2,.motion-mode-selector p{margin:.1rem 0}.motion-mode-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;flex:1;max-width:650px}.motion-mode-tabs button{min-width:0;min-height:44px;border:1px solid var(--color-border);border-radius:10px;background:#fff;color:var(--color-text);font:inherit;font-weight:800;padding:.7rem .45rem;cursor:pointer}.motion-mode-tabs button[aria-selected="true"]{border-color:var(--color-primary);background:var(--color-primary);color:#fff}.motion-mode-tabs button:focus-visible{outline:3px solid rgb(20 107 99 / 34%);outline-offset:3px}.motion-mode-panel[hidden]{display:none}.motion-mode-panel{min-width:0}
.container--animation-tool{max-width:1180px}.animation-app{display:grid;gap:1.25rem}.animation-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.animation-panel-heading h2,.animation-panel-heading p{margin:.1rem 0}.animation-preset-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.55rem}.animation-preset-grid button{min-width:0;border:1px solid var(--color-border);border-radius:10px;background:#fff;color:var(--color-text);font:inherit;font-weight:750;padding:.7rem .45rem;cursor:pointer}.animation-preset-grid button:hover{border-color:var(--color-primary);background:var(--color-surface-soft)}.animation-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin-top:1rem}.animation-field{display:grid;gap:.4rem;min-width:0;font-weight:750}.animation-field input,.animation-field select{box-sizing:border-box;width:100%;min-width:0;border:1px solid var(--color-border);border-radius:10px;background:#fff;color:var(--color-text);font:inherit;padding:.7rem}.animation-unit-field{display:grid;grid-template-columns:minmax(0,1fr) 4.5rem;gap:.45rem}.animation-advanced-details{min-width:0;margin-top:1rem;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface-soft);overflow:hidden}.animation-advanced-details summary{position:relative;display:flex;min-height:44px;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem .85rem;color:var(--color-text);font-weight:800;cursor:pointer;list-style:none}.animation-advanced-details summary::-webkit-details-marker{display:none}.animation-advanced-details summary::after{content:"＋";flex:0 0 auto;font-size:1.2rem;line-height:1}.animation-advanced-details[open] summary::after{content:"−"}.animation-advanced-details summary small{color:var(--color-muted);font-size:.82rem;font-weight:650}.animation-details-body{margin:0;padding:0 .85rem .85rem}.animation-properties{display:flex;flex-wrap:wrap;gap:.55rem 1rem;margin:1.1rem 0 0;border:0;padding:0}.animation-properties legend{width:100%;margin-bottom:.45rem;font-weight:800}.animation-properties label{display:flex;align-items:center;gap:.4rem}.animation-frames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:1rem}.animation-frame-card{min-width:0;border:1px solid var(--color-border);border-radius:12px;padding:1rem}.animation-frame-card legend{font-weight:850;padding-inline:.25rem}.animation-frame-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin:.7rem 0}.animation-frame-card>.button{margin-top:.15rem}.animation-error{min-height:1.5em;margin:.8rem 0 0;color:#a12222;font-weight:750}.animation-preview-actions{display:flex;flex-wrap:wrap;gap:.5rem}.animation-preview-stage{display:grid;place-items:center;min-height:240px;margin-top:1rem;border:1px dashed var(--color-border);border-radius:14px;background:linear-gradient(135deg,#f4fbf9,#eef5ff);overflow:hidden}.animation-preview-object{display:grid;place-items:center;width:92px;height:92px;border-radius:22px;background:#146b63;color:#fff;font-weight:900;box-shadow:0 12px 28px rgb(20 107 99 / 22%);will-change:transform,opacity}.animation-motion-note,.animation-status{margin:.7rem 0 0;color:var(--color-muted)}.animation-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}.animation-result-grid section{min-width:0}.animation-result-grid h3{margin:.1rem 0 .55rem}.animation-result-grid pre{max-width:100%;min-height:12rem;margin:0;overflow:auto;white-space:pre;padding:1rem;border-radius:12px;background:#102a2a;color:#efffff}.animation-result-grid code{font-size:.86rem}.animation-field input:focus-visible,.animation-field select:focus-visible,.animation-properties input:focus-visible,.animation-preset-grid button:focus-visible,.animation-preview-actions button:focus-visible,.animation-panel-heading button:focus-visible,.animation-frame-card button:focus-visible,.animation-advanced-details summary:focus-visible{outline:3px solid rgb(20 107 99 / 34%);outline-offset:3px}.animation-article code{overflow-wrap:anywhere}
@media(max-width:920px){.animation-preset-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.animation-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.motion-mode-selector{align-items:stretch;flex-direction:column}.motion-mode-tabs{width:100%;max-width:none}}
@media(max-width:680px){.animation-panel-heading{align-items:stretch;flex-direction:column}.animation-frames,.animation-result-grid{grid-template-columns:1fr}.animation-preview-actions{display:grid;grid-template-columns:1fr 1fr}.animation-preview-actions .button:first-child{grid-column:1/-1}}
@media(max-width:560px){.motion-mode-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.container--animation-tool{width:min(100% - 1rem,1180px);padding-inline:0}.animation-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.animation-settings-grid,.animation-frame-values{grid-template-columns:1fr}.animation-advanced-details summary{align-items:flex-start;flex-direction:column;gap:.15rem}.animation-advanced-details summary::after{position:absolute;right:.85rem}.animation-app,.animation-settings-grid,.animation-frames,.animation-frame-card,.animation-result-grid,.animation-result-grid section,.animation-result-grid pre{width:100%;max-width:100%;min-width:0}.animation-panel-heading>.button{width:100%}.animation-preview-stage{min-height:210px}}