.animations-page{min-height:100vh;background:#fafafa;padding-bottom:var(--space-3xl)}.animations-header{background:#fff;border-bottom:1px solid var(--color-border);padding:var(--space-lg);position:-webkit-sticky;position:sticky;top:0;z-index:100}.animations-nav{display:flex;gap:var(--space-sm);margin-bottom:var(--space-base);flex-wrap:wrap}.animations-back{display:inline-flex;align-items:center;gap:.5em;padding:.5em 1em;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-base);text-decoration:none;color:var(--color-text);font-size:14px;font-weight:500;transition:all var(--transition-base)}.animations-back:hover{background:var(--color-text);color:#fff}.animations-header h1{font-size:32px;font-weight:700;display:flex;align-items:center;gap:.5em;margin:0}.animations-content{max-width:900px;margin:0 auto;padding:var(--space-xl) var(--space-base)}.animations-section{background:#fff;border-radius:var(--radius-md);border:1px solid var(--color-border);padding:var(--space-xl);margin-bottom:var(--space-2xl)}.animations-section h2{font-size:28px;margin-bottom:var(--space-base);text-align:left}.animations-desc{color:var(--color-text-secondary);margin-bottom:var(--space-lg);font-style:italic}.animation-demo{padding:var(--space-xl) var(--space-base);border-left:3px solid var(--color-border);margin:var(--space-lg) 0}.animation-demo h3{font-size:24px;font-weight:600;margin-bottom:var(--space-sm)}.large-text{font-size:22px;line-height:1.6}.animations-controls{display:flex;gap:var(--space-base);align-items:center;flex-wrap:wrap}.animations-btn{padding:.8em 1.5em;background:#fff;border:2px solid var(--color-text);border-radius:var(--radius-base);font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:all var(--transition-base)}.animations-btn:hover{background:var(--color-text);color:#fff}.animations-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text)}.cursor-tools{display:flex;gap:var(--space-xs)}.tool-btn{padding:.5em 1em;background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-base);font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-base)}.tool-btn:hover{background:#fff;border-color:var(--color-text)}.tool-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text)}.drawing-info{margin-top:var(--space-base);padding:var(--space-base);background:var(--color-bg-alt);border-radius:var(--radius-base);border-left:4px solid var(--color-accent)}.drawing-info p{margin-bottom:.5em;font-size:16px}.drawing-info ol{margin:0;padding-left:1.5em;font-size:14px;color:var(--color-text-secondary)}.drawing-info li{margin:.25em 0;line-height:1.5}.use-case{padding:var(--space-lg);background:var(--color-bg-alt);border-radius:var(--radius-base);margin:var(--space-base) 0}.use-case h3{font-size:18px;font-weight:600;margin-bottom:var(--space-sm);color:var(--color-text-secondary)}.hero-example{font-size:36px;font-weight:700;line-height:1.3}.cta-example{margin-top:var(--space-base);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.cta-button{padding:1em 2em;background:var(--color-text);color:#fff;border:none;border-radius:var(--radius-base);font-family:inherit;font-size:18px;font-weight:600;cursor:pointer;transition:all var(--transition-base)}.arrow-label{display:inline-block;font-size:14px;color:var(--color-text-secondary);font-style:italic}.features-list{list-style:none;padding:0}.features-list li{display:flex;align-items:center;gap:var(--space-base);padding:var(--space-sm) 0;font-size:18px}.feature-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;position:relative}.feature-text{flex:1 1}.code-example{margin:var(--space-base) 0}.code-example h4{font-size:16px;font-weight:600;margin-bottom:var(--space-xs);color:var(--color-text-secondary)}.code-example pre{background:#1e1e1e;color:#d4d4d4;padding:var(--space-base);border-radius:var(--radius-base);overflow-x:auto;font-family:Courier New,monospace;font-size:14px;line-height:1.6}@media (max-width:768px){.animations-header{flex-direction:column;align-items:flex-start}.animations-header h1{font-size:24px}.animations-section{padding:var(--space-base)}.animations-controls{flex-direction:column;align-items:stretch}.hero-example{font-size:24px}.large-text{font-size:18px}}