.animation-lab{--animation-sky:#0a1625;--animation-grid:#7fb7d123;--animation-ground:#14333b;--animation-ground-alt:#17383e;max-width:1240px;margin:0 auto}.animation-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:8px 0 26px}.animation-heading h1{font-size:clamp(28px,3.5vw,42px);letter-spacing:-1.3px;margin:8px 0 12px}.animation-heading p:not(.eyebrow){max-width:650px;color:var(--muted);margin:0}.animation-heading .eyebrow{margin:0}.animation-heading>a{white-space:nowrap;flex-shrink:0}.animation-workspace{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:18px;align-items:start}.animation-viewer{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);min-width:0}.animation-viewer-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:59px;padding:13px 18px;border-bottom:1px solid var(--line)}.animation-viewer-heading>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.animation-viewer-heading strong{font-size:15px}.animation-status-dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 10%,transparent)}.animation-form-label{font-size:12px;color:var(--muted)}.animation-local-badge{font:10px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.6px}.animation-stage{position:relative;background:var(--animation-sky);isolation:isolate}.animation-stage canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;image-rendering:pixelated;cursor:crosshair;touch-action:pan-y;outline-offset:-5px}.animation-stage canvas:focus-visible{outline:3px solid var(--accent)}.animation-loading{position:absolute;inset:0;background:color-mix(in srgb,var(--animation-sky) 90%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#cadbeb;font-size:14px;padding:28px;text-align:center;pointer-events:none}.animation-loading-mark{font-size:40px;color:#efbc67}.animation-playback{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-top:1px solid var(--line)}.animation-playback-buttons,.animation-playback-fields{display:flex;gap:8px;align-items:center}.animation-playback-buttons button{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;padding:8px 11px;min-height:42px}.animation-playback-buttons button>span:first-child{font-size:16px;line-height:1;min-width:12px}.animation-playback-fields .animation-field{display:flex;align-items:center;gap:7px;margin:0}.animation-playback-fields .animation-field>span{font-size:11px;color:var(--muted)}.animation-playback-fields select{width:70px;min-height:36px;font-size:12px;padding:6px}.animation-map-help{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:0 18px 13px;font-size:11px;color:var(--muted);margin:0}.animation-map-help>[data-animation-position]{margin-left:auto;font-family:var(--mono);white-space:nowrap}.animation-settings{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:16px}.animation-mode{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--paper);padding:4px;border:1px solid var(--line);border-radius:7px;margin-bottom:17px}.animation-mode button{font-size:11px;min-height:38px;padding:6px 3px;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:4px}.animation-mode button[aria-pressed=true]{background:var(--surface-soft);color:var(--ink);border-color:var(--line);box-shadow:0 2px 4px #0001}.animation-settings fieldset{border:0;margin:0;padding:0;min-width:0}.animation-field{display:grid;gap:5px;margin-bottom:12px;min-width:0}.animation-field>span,.animation-section-label{font-size:12px;font-weight:600;color:var(--muted)}.animation-field select{width:100%;min-width:0;font-size:13px;min-height:42px;background-color:var(--paper);padding:8px 28px 8px 10px}.animation-field-note{font-size:11px;line-height:1.6;color:var(--muted);margin:-1px 0 14px}.animation-custom-fields{padding:12px 0 0;margin:0 0 12px;border-block:1px dashed var(--line)}.animation-transform{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;background:var(--action);color:var(--action-ink);font-size:13px;font-weight:650;margin:4px 0 10px;min-height:44px}.animation-transform:hover:not(:disabled){background:color-mix(in srgb,var(--action) 88%,white);border-color:transparent}.animation-transform>span{font-size:20px}.animation-action-row{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:5px}.animation-action-row button{font-size:11px;min-height:40px;padding:6px 4px}.animation-action-row button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}.animation-direction-block{display:flex;align-items:center;gap:12px;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px;margin-top:16px}.animation-direction-block>div:first-child{max-width:110px}.animation-direction-block p{font-size:11px;line-height:1.6;color:var(--muted);margin:6px 0 0}.animation-directions{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px);gap:4px}.animation-directions button{min-width:34px;min-height:34px;padding:0;line-height:1;font-size:17px;border-radius:4px}.animation-directions [data-animation-direction="7"]{grid-column:3}.animation-directions button[aria-pressed=true]{background:var(--surface-soft);color:var(--accent);border-color:var(--accent)}.animation-feedback{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 3px;color:var(--muted);font-size:12px}.animation-feedback p{margin:0}.animation-feedback button{font-size:12px;min-height:36px;white-space:nowrap}.animation-lab[data-state=error] .animation-feedback{color:var(--warning)}.animation-inspector{padding:18px 20px;border-radius:10px;margin:16px 0 0}.animation-inspector>summary{display:flex;gap:12px;align-items:center;position:relative;padding-left:22px;list-style:none;min-height:30px}.animation-inspector>summary::-webkit-details-marker{display:none}.animation-inspector>summary::before{content:'›';position:absolute;left:0;top:0;transform:rotate(0);font-size:22px;line-height:28px;color:var(--accent)}.animation-inspector[open]>summary::before{transform:rotate(90deg)}.animation-inspector>summary>span{font-size:11px;font-weight:400;color:var(--muted);margin-left:auto}.animation-inspector-tools{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:12px 0 3px}.animation-layer-toggles{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-right:auto}.animation-layer-toggle{display:flex;align-items:center;gap:7px;font-size:12px;min-height:32px;cursor:pointer}.animation-layer-toggle input{width:16px;height:16px;min-height:16px;margin:0}.animation-layer-table{margin:14px 0 8px}.animation-layer-table table{font-size:12px;min-width:530px}.animation-layer-table td,.animation-layer-table th{padding:9px 12px;white-space:nowrap}.animation-layer-table code{font-size:11px;color:var(--accent)}.animation-layer-table [data-hidden=true]{opacity:.45}.animation-inspector-note{font-size:11px;color:var(--muted);margin:12px 0 0}.animation-reading{display:flex;align-items:center;justify-content:space-between;gap:40px;margin:40px 0 20px;padding-top:32px;border-top:1px solid var(--line)}.animation-reading>div{max-width:590px}.animation-reading h2{margin:8px 0 12px;font-size:24px}.animation-reading p:not(.eyebrow){font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:12px}.animation-reading .eyebrow{margin:0}.animation-reading dl{display:flex;gap:32px;margin:0;flex-shrink:0}.animation-reading dl>div{display:flex;flex-direction:column;gap:4px}.animation-reading dt{font-size:30px;font-weight:700;letter-spacing:-1px;color:var(--accent)}.animation-reading dd{margin:0;font-size:11px;color:var(--muted)}.animation-scope{font-size:11px;color:var(--muted);max-width:920px;padding-bottom:10px}html[data-theme=light] .animation-lab{--animation-sky:#dae6ed;--animation-grid:#32566824;--animation-ground:#b7cec2;--animation-ground-alt:#b0c8bc}html[data-theme=light] .animation-loading{color:#203045}.animation-lab button:focus-visible,.animation-lab select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(max-width:1150px){.animation-workspace{grid-template-columns:minmax(0,1fr) 260px;gap:12px}.animation-heading{align-items:flex-start}.animation-heading>a{font-size:12px}.animation-viewer-heading{align-items:flex-start;flex-direction:column;gap:4px;padding:12px 15px}.animation-local-badge{font-size:9px}.animation-playback{flex-wrap:wrap;padding:12px}.animation-playback-fields{margin-left:auto}.animation-playback-fields .animation-field{gap:4px}.animation-playback-fields .animation-field>span{display:none}.animation-settings{padding:12px}.animation-reading{gap:24px}.animation-reading dl{gap:20px}}
@media(max-width:980px){.animation-workspace{grid-template-columns:1fr}.animation-viewer-heading{flex-direction:row;align-items:center}.animation-settings fieldset{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:start}.animation-mode{max-width:340px}.animation-settings .animation-field-note,.animation-custom-fields,.animation-direction-block{grid-column:1/-1}.animation-custom-fields{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}.animation-transform{margin:0}.animation-action-row button{min-height:44px}.animation-direction-block>div:first-child{max-width:none}.animation-directions{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,36px)}.animation-playback-fields .animation-field>span{display:block}.animation-reading{align-items:flex-start}.animation-reading dl{gap:16px}.animation-reading dt{font-size:24px}}
@media(max-width:600px){.animation-heading{display:block;margin-bottom:20px}.animation-heading>a{margin-top:16px}.animation-heading h1{letter-spacing:-.7px}.animation-heading p:not(.eyebrow){font-size:13px}.animation-workspace{gap:14px}.animation-viewer-heading{padding:12px;gap:6px;flex-wrap:wrap}.animation-form-label{font-size:11px}.animation-local-badge{font-size:9px}.animation-playback{gap:10px}.animation-playback-buttons{gap:5px}.animation-playback-buttons button{padding:8px;font-size:11px}.animation-playback-fields{gap:5px}.animation-playback-fields select{width:61px}.animation-playback-fields .animation-field>span{display:none}.animation-map-help{padding:0 12px 12px;font-size:10px}.animation-map-help>[data-animation-position]{margin-left:0}.animation-settings{padding:14px}.animation-settings fieldset{display:block}.animation-custom-fields{grid-template-columns:1fr}.animation-transform{margin:3px 0 10px}.animation-inspector{padding:13px;margin-top:10px}.animation-inspector>summary{display:block;font-size:13px}.animation-inspector>summary>span{display:block;font-size:10px;margin:3px 0 0}.animation-layer-toggles{gap:12px}.animation-inspector-tools{gap:10px}.animation-reading{display:block;margin-top:28px;padding-top:24px}.animation-reading h2{font-size:22px}.animation-reading dl{justify-content:space-between;margin-top:22px;gap:20px}.animation-reading dt{font-size:28px}.animation-feedback{font-size:11px;align-items:flex-start;flex-direction:column;gap:7px}.animation-lab .animation-directions{grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,38px)}}
@media(prefers-reduced-motion:reduce){.animation-lab *{animation:none!important;transition:none!important}}
.animation-lab .animation-directions{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px)}.animation-lab .animation-directions button{min-width:44px;min-height:44px}.animation-direction-block>div:first-child{max-width:82px}@media(max-width:980px){.animation-direction-block>div:first-child{max-width:160px}}
.animation-playback-fields .animation-field{display:grid;gap:3px}.animation-playback-fields .animation-field>span{display:block;font-size:10px}.animation-playback-fields .animation-field select{appearance:none;width:76px;min-height:38px;font-size:12px;padding:7px 22px 7px 9px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%;background-size:4px 4px;background-repeat:no-repeat}