header[data-v-1da2d359]{position:sticky;display:flex;flex-direction:row;justify-content:space-between;padding:16px;top:0;background:#fff}header .header[data-v-1da2d359]{display:flex;align-items:center}header .header.left[data-v-1da2d359]{display:flex;flex-direction:row;gap:8px}header .header.right[data-v-1da2d359]{display:flex;gap:8px}header .header.right a[data-v-1da2d359]{padding:4px 8px;cursor:pointer}header .header.right a[data-v-1da2d359]:hover{background:var(--grey-3);color:var(--grey-7)}header .header.right a[data-v-1da2d359]:active{background:var(--grey-5);color:#fff}.out-wrap .wrap[data-v-8ff8e34f]{display:flex;justify-content:center;align-items:center;width:inherit;height:100vh}.out-wrap .wrap[data-v-8ff8e34f]:nth-of-type(1){background:#ffe4e1}.out-wrap .wrap[data-v-8ff8e34f]:nth-of-type(2){background:ivory}.out-wrap .wrap[data-v-8ff8e34f]:nth-of-type(3){background:#fffaf0}input[type=checkbox][data-v-f6e61e7e]{outline:3px solid red}.animation-wrap .wrap[data-v-779e21ef]{display:flex;gap:8px}.animation-wrap .wrap .input-wrap[data-v-779e21ef]{position:relative;width:200px}.animation-wrap .wrap .input-wrap input[data-v-779e21ef]{width:100%;height:30px;border:1px solid var(--grey-8);outline:0;box-sizing:border-box;border-top:none;border-left:none;border-right:none}.animation-wrap .wrap .input-wrap[data-v-779e21ef]:after{content:"";position:absolute;left:50%;right:1px;bottom:0;width:0px;height:1px;background:var(--grey-3);transform:translate(-50%);transform-origin:center;transition:width .25s linear}.animation-wrap .wrap .input-wrap[data-v-779e21ef]:focus-within:after{width:100%}.test-wrap[data-v-36f1a19f]{padding:2rem}:root{color-scheme:light;--grey-1: #f5f5f5;--grey-2: #e6e6e6;--grey-3: #d6d6d6;--grey-4: #bfbfbf;--grey-5: #a8a8a8;--grey-6: #8f8f8f;--grey-7: #6f6f6f;--grey-8: #4f4f4f;--grey-9: #2f2f2f;--grey-10: #1a1a1a}html.theme-dark{color-scheme:dark;--grey-1: #1a1a1a;--grey-2: #2f2f2f;--grey-3: #4f4f4f;--grey-4: #6f6f6f;--grey-5: #8f8f8f;--grey-6: #a8a8a8;--grey-7: #bfbfbf;--grey-8: #d6d6d6;--grey-9: #e6e6e6;--grey-10: #f5f5f5}html{font-size:14px}body{box-sizing:border-box;margin:0;background:var(--grey-1);color:var(--grey-10)}h1,h2,h3,h4,h5,h6{margin:0}a{text-decoration:none;color:var(--grey-10)}button{margin:0;padding:4px 8px;min-width:30px;min-height:30px;background:var(--grey-2);cursor:pointer;font-size:14px;border-radius:4px;border-color:transparent;border-style:hidden}button:hover{background:var(--grey-3)}