:root{--color-base: hsl(0 0% 100%);--color-reverse: hsl(0 0% 0%);--color-key: #4568DC;--color-sub: #8e6ab3;--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--font-code: "Monaco", monospace, -apple-system, sans-serif}html{min-height:100%;box-sizing:border-box}body{margin:0;padding:0 24px 36px;min-width:320px;min-height:100dvh;font-size:16px;line-height:1.5;background:var(--color-key);background:radial-gradient(circle at 50% 90%,var(--color-sub) 0%,var(--color-key) 100%);background-size:contain;box-sizing:border-box}@media (min-width: 768px){body{padding-inline:64px}}body,button,input,textarea,select{font-family:var(--font-base);-webkit-text-size-adjust:100%;text-size-adjust:none;color:var(--color-base)}code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace}main{max-width:860px;margin:0 auto;box-sizing:border-box}::selection{background-color:#1f1f1f;color:var(--color-base)}.header{padding:42px 0 0;text-align:center}.header h1{margin:0;font-weight:900;letter-spacing:-1px;text-align:center;font-size:32px;line-height:1.15;text-shadow:0 1px 8px hsla(0 0% 0% / 25%);-webkit-user-select:none;user-select:none}.header p{margin:16px 0 0;font-size:13px;line-height:1.42}@media (min-width: 1024px){.header h1{font-size:42px}}section{margin:64px 0}section>h1{margin:0;font-size:24px;line-height:1.25;font-weight:800;-webkit-user-select:none;user-select:none}section>p{margin:4px 0 20px;font-size:13px;line-height:1.25;color:#ffffffbf;-webkit-user-select:none;user-select:none}section>.body{--source-height: 40px;display:grid;grid-template-areas:"source button" "demo demo";grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:12px}section>.body>input{grid-area:source;color-scheme:light;display:block;width:100%;height:var(--source-height);border:none;color:#141414;padding:0 16px;font-size:16px;border-radius:2px;box-sizing:border-box}section>.body>input:focus-visible{outline:3px dashed #000}section>.body>button{grid-area:button;display:block;box-sizing:border-box;height:var(--source-height);padding:0 36px;background-color:var(--color-key);border:none;border-radius:2px;font-weight:800;font-size:16px;letter-spacing:-.5px;color:#fff;outline:none;cursor:pointer;box-shadow:inset 0 0 0 1px #ffffffbf,0 1px 12px #00000040;-webkit-user-select:none;user-select:none}section>.body>button:active{opacity:.5}section>.body>button:focus-visible{outline:3px dashed #000}section>.body>.demo{grid-area:demo;margin:0;padding:30px;box-sizing:border-box;border-radius:12px;background-color:#fff;box-shadow:0 0 0 1px #0003,0 2px 12px #00000026,0 4px 24px #0003;transition:box-shadow .2s ease-out}section>.body>.demo:hover{box-shadow:0 0 0 1px #0000004d,0 4px 12px #00000026,0 8px 32px #0000004d}section>.body>.demo>p{margin:0;font-family:var(--font-code);font-size:18px;line-height:1.42;min-height:22.5px;color:#000;letter-spacing:-.5px;white-space:normal;word-break:break-all;-webkit-user-select:none;user-select:none}section>.body>.demo>p:empty:before{content:"Animation text area..";color:#00000040}section>.code{padding:30px;border-radius:4px;background:#00000040;box-shadow:0 0 0 1px #00000059,0 4px 32px #0003;font-family:var(--font-code);font-size:13px;line-height:1.52}.github-corner svg{fill:#222;color:#fff;position:absolute;top:0;border:0;right:0}.github-corner a:hover .octo-arm{animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner a:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}