@charset "UTF-8";code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}:root{--cyan: #38bdf8;--purple: #c084fc;--text: #e2e8f0;--text-dim: #94a3b8;--muted: #64748b;--glass-fill: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .08);--code-bg: #111827}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:#0d1117;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;background-image:radial-gradient(ellipse at 15% 5%,rgba(56,189,248,.07) 0%,transparent 55%),radial-gradient(ellipse at 85% 95%,rgba(168,85,247,.07) 0%,transparent 55%);background-attachment:fixed}hr{border:none;border-top:1px solid var(--glass-border);margin:2rem 0}.anim-section{padding:4rem 0;border-bottom:1px solid var(--glass-border);scroll-margin-top:2rem}.anim-section:last-child{border-bottom:none}.anim-section__header{margin-bottom:1.5rem}.anim-section__title{font-size:1.5rem;font-weight:700;color:var(--text);margin-bottom:.375rem}.anim-section__desc{color:var(--muted);font-size:.9rem}.anim-section__controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}.anim-section__preview{background:var(--glass-fill);border:1px solid var(--glass-border);border-radius:12px;padding:2rem;min-height:160px;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);margin-bottom:1rem}.preview-box{background:linear-gradient(135deg,#38bdf81f,#a855f71f);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:1.25rem 2rem;color:var(--text);font-size:.95rem;text-align:center}.anim-section__preview--column{flex-direction:column;align-items:stretch;gap:.5rem}.preview-box--stagger-item{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.stagger-remove-btn{background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:4px;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:.15rem .4rem;transition:color .15s,border-color .15s}.stagger-remove-btn:hover{color:var(--text);border-color:#ffffff59}.btn-toggle{background:#38bdf81f;border:1px solid rgba(56,189,248,.3);border-radius:8px;color:var(--cyan);cursor:pointer;font-size:.875rem;font-weight:600;padding:.5rem 1.25rem;transition:background .15s}.btn-toggle:hover{background:#38bdf838}.btn-toggle:active{transform:scale(.97)}.btn-toggle--muted{opacity:.6}.picker{display:flex;gap:2px;background:#ffffff0a;border:1px solid var(--glass-border);border-radius:8px;padding:3px}.picker__btn{background:transparent;border:none;border-radius:6px;color:var(--muted);cursor:pointer;font-size:.8rem;padding:.3rem .65rem;transition:background .15s,color .15s}.picker__btn:hover{color:var(--text)}.picker__btn--active{background:#38bdf826;color:var(--cyan)}pre[class*=language-]{background:var(--code-bg)!important;border:1px solid var(--glass-border);border-radius:8px;font-size:.83rem;margin:0}
