@import"https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&display=swap";*,*:before,*:after{box-sizing:border-box}:root{--sans: "Source Sans Pro", sans-serif;--mono: "Source Code Pro", monospace;--size-5: 3.052rem;--size-4: 2.441rem;--size-3: 1.953rem;--size-2: 1.563rem;--size-1: 1.25rem;--size-0: 1rem;--size--1: .8rem;--red-1: #ffcecc;--red-2: #f6a8a5;--red-3: #e87a79;--red-4: #d54b4d;--red-5: #b03135;--red-6: #82282c;--red-7: #601e22;--red-8: #481619;--red-9: #381013;--red-10: #310c0e;--green-1: #e0ffcc;--green-2: #a8f084;--green-3: #6fd74d;--green-4: #43ac34;--green-5: #2c7a2d;--green-6: #22552b;--green-7: #183b24;--green-8: #10291d;--green-9: #0b1e19;--green-10: #081a18;--blue-1: #cceeff;--blue-2: #9ed6ff;--blue-3: #69b3fc;--blue-4: #3385f5;--blue-5: #1257da;--blue-6: #153ba0;--blue-7: #142872;--blue-8: #111c50;--blue-9: #0e143b;--blue-10: #0c1131;--highlight-1: #fff;--highlight-2: #fffa;--highlight-3: #fff7;--highlight-4: #fff4;--highlight-5: #fff2;--shadow-1: #000;--shadow-2: #000a;--shadow-3: #0007;--shadow-4: #0004;--shadow-5: #0002;--gray-1: #e4e5e7;--gray-2: #a2a5ad;--gray-3: #7a7d8b;--gray-4: #5f616f;--gray-5: #4a4b58;--gray-6: #393945;--gray-7: #2b2b36;--gray-8: #21212a;--gray-9: #1a1921;--gray-10: #16151c;--ease-out: cubic-bezier(.3, .9, .5, 1);--shadow-color: rgba(0, 0, 0, .1);--shadow-elevated: 0 1px 1px var(--shadow-color), 0 2px 8px var(--shadow-color);--body-background: var(--gray-7)}.theme--light{--fg-1: #222f;--fg-2: #222a;--fg-3: #2227;--fg-4: #2224;--fg-5: #2222;--bg-1: #fff;--bg-2: #eee;--bg-2: #ddd;--shadow-beveled: 0 10px 20px -20px var(--highlight-2) inset, 0 .5px .5px var(--highlight-2) inset, 0 1px 0 -.5px var(--shadow-4) inset, 0 -10px 20px -20px var(--shadow-5) inset;--shadow-recessed: 0 10px 20px -20px var(--shadow-4) inset, 0 -.5px .5px var(--highlight-2) inset, 0 1px 0 -.5px var(--shadow-4) inset, 0 -10px 20px -20px var(--highlight-2) inset}.theme--dark{--fg-1: #ffff;--fg-2: #fffa;--fg-3: #fff7;--fg-4: #fff4;--fg-5: #fff2;--bg-1: #333;--bg-2: #2a2a2a;--bg-2: #222;--shadow-beveled: 0 10px 20px -20px var(--highlight-5) inset, 0 .5px .5px var(--highlight-5) inset, 0 1px 0 -.5px var(--shadow-3) inset, 0 -10px 20px -20px var(--shadow-4) inset;--shadow-recessed: 0 10px 20px -20px var(--shadow-3) inset, 0 -.5px .5px var(--highlight-5) inset, 0 1px 0 -.5px var(--shadow-3) inset, 0 -10px 20px -20px var(--highlight-5) inset}html{font-size:16px}html,body,#root{overflow:hidden;height:100%;margin:0}.rounded{border-radius:12px}@supports (corner-shape: superellipse(2)){.rounded{corner-shape:superellipse(2);border-radius:28px}}.App{display:flex;height:100%;flex-flow:column;background:var(--body-background);background-color:var(--body-background);color:var(--fg-1);-webkit-user-select:none;user-select:none;font-family:var(--sans);font-size:var(--size-0)}.App .appBar{display:flex;align-items:center;justify-content:space-between;background-color:var(--body-background);box-shadow:var(--shadow-beveled),var(--shadow-elevated);z-index:100;padding:0 1rem}.App .activeTheme{display:flex;align-items:center}.App .activeThemeLabel{font-weight:700;display:flex;gap:.5rem;height:100%;align-items:center;padding-inline:1rem}.App .thumbnail{display:flex;width:3.5555555556rem;height:2rem;background:#0000001a;overflow:hidden;box-shadow:var(--shadow-recessed)}.App .thumbnailColumn{display:flex;flex:1 1 auto;flex-direction:column}.App .thumbnailSwatch{background:var(--color);flex:1 1 auto}.App .chevron{color:var(--fg-4);height:1rem;width:1rem}.App .tabs{display:flex;height:3rem}.App .breadcrumbs{display:flex;align-items:center}.App .tab-item{display:flex;align-items:center;line-height:3rem;position:relative;font-size:var(--size-0);padding:0 .8rem 0 .6rem;gap:.4rem;font-weight:700}.App .tab-item.inactive{color:var(--fg-3)}.App .tab-item.inactive svg{color:var(--fg-4)}.App .tab-item:after{background:#0003;opacity:0;z-index:-1}.App .tab-item.active:after,.App .tab-item:active:after{content:"";position:absolute;top:.5rem;right:.25rem;bottom:.5rem;left:.25rem;border-radius:12px}@supports (corner-shape: superellipse(2)){.App .tab-item.active:after,.App .tab-item:active:after{corner-shape:superellipse(2);border-radius:28px}}.App .tab-item.active:after,.App .tab-item:active:after{opacity:1}.App .tab-item input{opacity:0;position:absolute;width:0;height:0}.App .tab-item svg{color:var(--fg-2);height:24px;width:24px}.App .messages{margin-left:auto}.App .message{padding:.5rem 1rem;box-shadow:0 2px 8px var(--shadow-color)}.App .message.success{background:var(--green-8);color:var(--green-1)}.App .app-footer{padding:1rem;display:flex;align-items:center;gap:1rem;height:3rem;padding:0 2rem;background:var(--bg-2);z-index:1;transition:.3s var(--ease-out) height;background-color:var(--body-background);box-shadow:var(--shadow-beveled),var(--shadow-elevated);--unchecked-icon-color: var(--fg-4);--checked-icon-color: var(--fg-2)}.App .app-footer label{display:flex;align-items:center;gap:.5rem}.App .appFooterSection{position:absolute;display:flex;align-items:center;gap:1rem;bottom:0;left:0;width:100%;height:3rem}.App .shade-count{width:3rem;margin-left:.5rem;box-shadow:var(--shadow-recessed);background-color:var(--shadow-5)}.App .history{display:flex;margin-left:auto}.App .history button{padding:.5rem;display:flex;align-items:center}.App .history button[disabled]{color:var(--fg-4)}.App .history button svg{width:24px;height:24px}.App-logo{height:40vmin}button{border:0;background:none;font:inherit;color:inherit;padding:0;margin:0}select{font:inherit;font-weight:700;color:inherit;line-height:1.3;padding:.5rem 2rem .5rem 1rem;max-width:100%;margin:0;border:0;box-shadow:var(--shadow-beveled),var(--shadow-elevated);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--body-background);background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><polygon fill="gray" points="0,4 6,12 12,4" /></svg>');background-repeat:no-repeat,repeat;background-position:right .7rem top 50%;background-size:.5rem auto}select::-ms-expand{display:none}select:hover{border-color:#888}select:focus{border-color:#aaa;outline:none}select option{font-weight:400}input[type=text],input[type=number]{color:inherit;font:inherit;border:0;background:var(--body-background);line-height:1rem;padding:.5rem}.swatch{width:2rem;height:2rem;position:relative;border-radius:1rem;background:linear-gradient(to right,var(--base-color, var(--color)),var(--base-color, var(--color)) 49%,var(--color) 51%);flex:0 0 auto;overflow:hidden}.Button{padding:.5rem 1rem;display:inline-flex;align-items:center;justify-content:center;background:var(--background);border:0;color:inherit;font:inherit;font-weight:700;box-shadow:var(--shadow-beveled),var(--shadow-elevated);color:var(--color)}.Button:focus{outline:none}.Button:focus-visible{outline:1px solid var(--fg-3)}.Button.primary{--color: var(--blue-2);--background: var(--blue-7)}.Button,.Button.secondary{--color: var(--fg-2);--background: var(--body-background)}.Button:active,.Button.secondary:active{--color: var(--fg-1)}.Button.success{--color: var(--green-2);--background: var(--green-7)}.Button.danger{--color: var(--red-4);--background: var(--gray-7)}.Button.warning,.Button.info{--color: var(--gray-2);--background: var(--green-7)}.Button.text{transform:none;background:none;box-shadow:none}.Button:not(.text) svg:not(:last-child){margin-right:.5em}.Button:not(.text):hover,.Button:not(.text):focus{outline:0}.Button:not(.text):active{transition:all .1s var(--ease-out);transform:translateY(1px);background:var(--background);box-shadow:.5px 1px var(--highlight) inset,-.5px -1px var(--shading) inset,0 0 var(--shading),-1px -1px #0000001a}.LabeledCheckbox{display:flex;gap:.4rem;align-items:center}.LabeledCheckbox input{position:absolute;opacity:0}.LabeledCheckbox.checked{color:var(--checked-color, var(--fg-1))}.LabeledCheckbox.checked svg{color:var(--checked-icon-color, var(--fg-2))}.LabeledCheckbox.unchecked{color:var(--unchecked-color, var(--fg-1))}.LabeledCheckbox.unchecked svg{color:var(--unchecked-icon-color, var(--fg-4))}.ColorInput{cursor:pointer}.ColorInput input{position:absolute;opacity:0;width:0;height:0}.Overview{padding:1rem;overflow:auto}.Overview .themes-header{display:flex;align-items:center;gap:.4rem;font-size:var(--size-1);line-height:1}.Overview .themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));grid-auto-rows:12rem;margin-bottom:1rem;grid-gap:1rem}.Overview .data-controls{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}.ThemePreview{position:relative;box-shadow:var(--shadow-beveled),var(--shadow-elevated);overflow:hidden;display:flex;flex-direction:column}.ThemePreview .title{display:flex;margin:0;padding:.5rem;font-size:var(--size-1);line-height:1rem}.ThemePreview .title input{width:100%;flex:1 1 auto;background:var(--shadow-5);box-shadow:var(--shadow-recessed)}.ThemePreview .colors{display:flex;flex-flow:row;flex:1 1 auto}.ThemePreview .color{display:flex;flex-flow:column;flex:1 1 auto}.ThemePreview .shade{flex:1 1 auto;background:var(--color)}.ThemePreview .Button{padding:1rem}.ExportView{height:100%;padding-bottom:3rem;flex:1 1 auto;overflow:auto;-webkit-user-select:text;user-select:text;padding:2rem}.ExportView .methods{display:flex;flex-direction:row-reverse;justify-content:space-between}@media (max-width: 768px){.ExportView .methods{flex-direction:column}}.ExportView .methods{gap:1rem}.ExportView textarea{width:0;height:0;opacity:0;position:absolute;pointer-events:none}.ExportView .options{margin-bottom:1rem}.ExportView .options>*{margin-right:1rem}.ExportView .svg,.ExportView .json{display:flex;align-items:center;margin-bottom:2rem;gap:1rem}.ExportView .svg .buttons,.ExportView .json .buttons{display:flex;gap:1rem}.ExportView img{margin-bottom:1rem;display:block}.ExportView p{color:var(--fg-4);max-width:36ch}.Preview{display:flex;height:100%;flex-flow:column;padding:1rem 1rem 4rem;overflow:auto}.Preview .colors{display:flex;flex:1 1 auto;padding-top:6rem}.Preview .color{position:relative;scroll-snap-align:start;flex:0 0 auto}.Preview .color+.color{margin-left:1rem}.Preview .title{display:flex;align-items:center;margin:0 0 1rem}.Preview .title input[type=text]{border:0;background:none;font:inherit;color:inherit;padding:0;margin:0;width:100%;margin-left:.5rem}.Preview .title .checkbox{cursor:pointer}.Preview .title .checkbox input{position:absolute;opacity:0;width:0;height:0}.Preview .title .checkbox .viz{width:1rem;height:1rem;border:2px solid var(--gray-8);border-radius:1rem}.Preview .title .checkbox input:checked+.viz{border-color:var(--highlight-2)}.Preview .shade{position:relative;display:flex;text-align:left;white-space:nowrap;align-items:center}.Preview .shade+.shade{margin-top:1rem}.Preview .row-labels{padding-right:1rem}.Preview .row-label{width:3rem;display:block;line-height:2rem;margin-bottom:1rem;text-align:right;white-space:nowrap}.Preview .column-label{position:absolute;bottom:100%;right:0;transform:translate(-1rem,-1rem) rotate(45deg);transform-origin:bottom right;white-space:nowrap}.Preview .playground{max-width:30rem;line-height:2rem;-webkit-user-select:text;user-select:text;font-size:var(--size-0);line-height:var(--size-2)}.Preview .playground em{font-size:var(--size-1)}.Preview .playground *:focus{outline:0}.Editor{display:flex;height:100%;flex-flow:column;overflow:auto;scrollbar-color:var(--fg-4) transparent;scrollbar-width:thin}.Editor::-webkit-scrollbar{width:8px;height:8px}.Editor::-webkit-scrollbar-track{background:transparent}.Editor::-webkit-scrollbar-thumb{background:var(--fg-4);border-radius:4px}.Editor{padding-bottom:3rem;background:var(--body-background)}.Editor .graphs{position:sticky;top:0;z-index:1;display:grid;grid-gap:1rem;grid-template-areas:"l h" "c h";padding:1rem 0;margin-bottom:-1rem;background:var(--body-background)}.Editor .graph{position:relative;display:flex;justify-content:space-between}.Editor .graph-hue{grid-area:h}.Editor .graph-lightness h3,.Editor .graph-saturation h3{top:auto;bottom:.5rem}.Editor .graph-lightness{grid-area:l}.Editor .graph-saturation{grid-area:c}.Editor h3{position:absolute;pointer-events:none;color:var(--fg-3);line-height:1;margin:0;top:.5rem;left:.5rem;z-index:1}.Editor h3 abbr{text-decoration:none}.Editor .colors{display:flex;flex:1 1 auto;padding:0 2rem 3rem;width:min-content}.Editor .color{padding:1rem 0 0;width:17rem;flex:0 0 auto;text-overflow:ellipsis}.Editor .color+.color{margin-left:2rem}.Editor .color.values-hidden{width:128px}.Editor .title-line{font-size:var(--size-1);display:flex;align-items:center;margin:0;height:2rem;gap:.8rem;color:var(--fg-1);--unchecked-icon-color: var(--fg-2);--checked-icon-color: var(--fg-1)}.Editor .title-line input[type=text]{border:0;background:none;font:inherit;color:inherit;padding:0;margin:0;width:100%}.Editor .title-line svg{height:24px;width:24px}.Editor .title-line .checkbox{cursor:pointer}.Editor .title-line .checkbox input{position:absolute;opacity:0;width:0;height:0}.Editor .title-line .checkbox input:checked+svg{color:var(--fg-1)}.Editor .list{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.Editor.graphs-hidden .list-header{top:0}.Editor.graphs-visible .list-header{top:20rem}.Editor .list-header{position:sticky;display:flex;padding-left:5rem;font-family:var(--mono);font-size:var(--size-0);color:var(--fg-5);z-index:1;background:var(--body-background);box-shadow:0 7px 10px -7px var(--shadow-color)}.Editor .list-header .list-heading{display:flex;align-items:center;gap:.2rem;width:3rem;text-align:right;padding-right:1.1rem;color:var(--fg-3)}.Editor .list-header .list-heading svg{color:var(--fg-5)}.Editor .list-header .list-heading.active svg{color:var(--fg-3)}.Editor .list-header .link-button{background:none;border:none;padding:0;cursor:pointer;width:24px;height:24px}.Editor .list-header abbr{text-decoration:none}.Editor .shade{position:relative;display:flex;text-align:left;white-space:nowrap;align-items:center;gap:1rem}.Editor .shade:first-child,.Editor .shade:last-child{cursor:pointer}.Editor .shade:first-child:before,.Editor .shade:last-child:before{content:"";position:absolute;display:block;top:-.5rem;right:-1rem;bottom:-.5rem;left:-1rem;border-radius:inherit;background:var(--fg-3);opacity:0;z-index:-1}.Editor .shade:first-child:hover:before,.Editor .shade:last-child:hover:before{opacity:1}.Editor .shade-text{display:flex;flex:1 1 auto;align-items:baseline;margin:0;gap:1rem}.Editor .shade-background-field{flex:0 0 auto;color:var(--fg-4);width:1rem;position:relative}.Editor .shade-background-field:after{content:"";opacity:.2;position:absolute;width:1.6rem;height:1.6rem;top:50%;left:50%;transform:translate(-50%,-50%)}.Editor .shade-background-field.active{color:var(--fg-1)}.Editor .shade-background-field input{opacity:0;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;position:absolute}.Editor .shade-title{margin:0;font-size:var(--size-0);color:var(--fg-5)}.Editor .shade-title-padding{color:var(--fg-5)}.Editor .shade-value{display:flex;margin:0;font-size:var(--size-0);font-family:var(--mono);color:var(--fg-1)}.Editor .shade-value-insignificant{color:var(--fg-5)}.Editor .shade-value-value{display:inline-block;width:2.5em;text-align:right}.Editor .shade-value-unit{color:var(--fg-4)}.Editor .shade-value-separator{display:inline-block;color:var(--fg-5);opacity:0}.Editor .add-button-container{flex:0 0 auto;width:256px;margin:1rem 0 1rem 2rem}.Editor .add-button{width:100%;font:inherit;font-size:var(--size-1);font-weight:400;position:sticky;top:1rem}.Editor .remove-button{line-height:.5;z-index:11;padding-inline:0;font-size:var(--size-1)}.SplineGraph{position:relative;background:var(--body-background)}.SplineGraph.hue{--start-saturation: 100%;--end-saturation: 100%;--start-lightness: 50%;--end-lightness: 50%}.SplineGraph.menu-open .splineGraph{opacity:0}.SplineGraph.menu-open .easing-menu{display:grid}.SplineGraph .viz{width:100%;height:100%;position:absolute;z-index:0;opacity:.1;overflow:hidden;transition:opacity .5s ease-out;-webkit-mask-image:linear-gradient(to right,RGB(from black r g b/.966),RGB(from black r g b/.643),RGB(from black r g b/.401),RGB(from black r g b/.229),RGB(from black r g b/.115),RGB(from black r g b/.047),RGB(from black r g b/.014),RGB(from black r g b/.002),RGB(from black r g b/0),RGB(from black r g b/.002),RGB(from black r g b/.014),RGB(from black r g b/.047),RGB(from black r g b/.115),RGB(from black r g b/.229),RGB(from black r g b/.401),RGB(from black r g b/.643),RGB(from black r g b/.966));mask-image:linear-gradient(to right,RGB(from black r g b/.966),RGB(from black r g b/.643),RGB(from black r g b/.401),RGB(from black r g b/.229),RGB(from black r g b/.115),RGB(from black r g b/.047),RGB(from black r g b/.014),RGB(from black r g b/.002),RGB(from black r g b/0),RGB(from black r g b/.002),RGB(from black r g b/.014),RGB(from black r g b/.047),RGB(from black r g b/.115),RGB(from black r g b/.229),RGB(from black r g b/.401),RGB(from black r g b/.643),RGB(from black r g b/.966))}.SplineGraph .viz.saturation{background:linear-gradient(to bottom,oklch(var(--start-lightness) .5 var(--start-hue)),oklch(var(--start-lightness) 0 var(--start-hue))),linear-gradient(to bottom,oklch(var(--end-lightness) .5 var(--end-hue)),oklch(var(--end-lightness) 0 var(--end-hue)));background-size:50% 100%,50% 100%;background-position:left,right;background-repeat:no-repeat}.SplineGraph .viz.lightness{background:linear-gradient(to bottom,#fff,#aeaeae,#636363,#222 75%,#060606 87.5%,#010101,#000)}.SplineGraph .viz.rainbow{background:linear-gradient(to bottom,#92ac00,#a4a600,#b49f00,#c19900,#cd9200,#d98b00 10.42%,#df8600 11.46%,#e38400,#e68100 12.5%,#f67300,#ff682c,#ff6550 18.75%,#ff5856 19.79%,#ff585e 20.31%,#ff5d65,#ff616b 20.83%,#ff5f77,#ff5d83 22.92%,#ff5799 25%,#ff40d0,#e155ff 33.33%,#c76fff 35.42%,#bc77ff,#b27eff 37.5%,#ad81ff,#a884ff 38.54%,#9e89ff 39.58%,#8c90ff 41.67%,#8493ff,#7a97ff 43.75%,#7498ff,#6e9aff 44.79%,#6c9aff 45.05%,#6a9bff,#689bff 45.31%,#629dff 45.83%,#52a0ff,#3da3ff 47.92%,#00a9f7 50%,#01b0d5,#00b4bb,#00b8a1 62.5%,#00ba91 64.58%,#00ba87 65.62%,#00bb81,#00bb7b 66.67%,#00bc78,#00bc75 67.19%,#00bd6d 67.71%,#00be59,#00bf36,#3abd00,#61b800 71.88%,#68b700 72.14%,#6ab600,#6db600,#70b500,#72b500 72.66%,#77b300 72.92%,#86b000,#92ac00 75%,#a4a600,#b49f00,#c19900,#cd9200,#d98b00 85.42%,#df8600 86.46%,#e38400,#e68100 87.5%,#f67300,#ff682c,#ff6550 93.75%,#ff5856 94.79%,#ff585e 95.31%,#ff5d65,#ff616b 95.83%,#ff5f77,#ff5d83 97.92%,#ff5799);background:linear-gradient(to bottom,color(xyz 0.228 0.365 -0.138),color(xyz 0.287 0.351 -0.144),color(xyz 0.351 0.337 -0.148),color(xyz 0.42 0.323 -0.153),color(xyz 0.494 0.309 -0.156),color(xyz 0.538 0.301 -0.149) 10.42%,color(xyz 0.561 0.297 -0.144) 11.46%,color(xyz 0.573 0.295 -0.141),color(xyz 0.585 0.293 -0.138) 12.5%,color(xyz 0.633 0.285 -0.124),color(xyz 0.684 0.277 -0.105),color(xyz 0.68 0.277 -0.049) 18.75%,color(xyz 0.68 0.277 -0.012) 19.79%,color(xyz 0.68 0.277 0.01) 20.31%,color(xyz 0.681 0.276 0.021),color(xyz 0.681 0.276 0.033) 20.83%,color(xyz 0.683 0.275 0.086),color(xyz 0.687 0.274 0.147) 22.92%,color(xyz 0.7 0.27 0.297) 25%,color(xyz 0.652 0.273 0.754),color(xyz 0.658 0.265 1.44) 33.33%,color(xyz 0.632 0.269 1.688) 35.42%,color(xyz 0.622 0.271 1.822),color(xyz 0.615 0.273 1.961) 37.5%,color(xyz 0.612 0.273 2.033),color(xyz 0.61 0.274 2.107) 38.54%,color(xyz 0.607 0.275 2.259) 39.58%,color(xyz 0.608 0.276 2.583) 41.67%,color(xyz 0.582 0.283 2.551),color(xyz 0.556 0.291 2.518) 43.75%,color(xyz 0.544 0.295 2.502),color(xyz 0.531 0.299 2.485) 44.79%,color(xyz 0.525 0.3 2.477),color(xyz 0.519 0.302 2.469) 45.31%,color(xyz 0.507 0.306 2.453) 45.83%,color(xyz 0.483 0.314 2.421),color(xyz 0.46 0.321 2.389) 47.92%,color(xyz 0.416 0.337 2.326) 50%,color(xyz 0.27 0.375 1.587),color(xyz 0.152 0.406 1.01),color(xyz 0.091 0.415 0.443) 62.5%,color(xyz 0.076 0.416 0.245) 64.58%,color(xyz 0.072 0.415 0.164) 65.62%,color(xyz 0.071 0.415 0.128),color(xyz 0.071 0.414 0.095) 66.67%,color(xyz 0.074 0.413 0.082),color(xyz 0.077 0.411 0.07) 67.19%,color(xyz 0.084 0.409 0.047) 67.71%,color(xyz 0.099 0.403 0.005),color(xyz 0.116 0.397 -0.031),color(xyz 0.135 0.391 -0.061),color(xyz 0.155 0.385 -0.087) 71.88%,color(xyz 0.161 0.383 -0.093),color(xyz 0.166 0.381 -0.098),color(xyz 0.172 0.38 -0.103),color(xyz 0.178 0.378 -0.108) 72.92%,color(xyz 0.202 0.372 -0.125),color(xyz 0.228 0.365 -0.138) 75%,color(xyz 0.287 0.351 -0.144),color(xyz 0.351 0.337 -0.148),color(xyz 0.42 0.323 -0.153),color(xyz 0.494 0.309 -0.156),color(xyz 0.538 0.301 -0.149) 85.42%,color(xyz 0.561 0.297 -0.144) 86.46%,color(xyz 0.573 0.295 -0.141),color(xyz 0.585 0.293 -0.138) 87.5%,color(xyz 0.633 0.285 -0.124),color(xyz 0.684 0.277 -0.105),color(xyz 0.68 0.277 -0.049) 93.75%,color(xyz 0.68 0.277 -0.012) 94.79%,color(xyz 0.68 0.277 0.01) 95.31%,color(xyz 0.681 0.276 0.021),color(xyz 0.681 0.276 0.033) 95.83%,color(xyz 0.683 0.275 0.086),color(xyz 0.687 0.274 0.147) 97.92%,color(xyz 0.7 0.27 0.297))}.SplineGraph:hover .viz{opacity:.5;transition:opacity .1s var(--ease-out)}.SplineGraph .splineGraph{overflow:visible;width:8rem;height:100%;vector-effect:non-scaling-stroke;position:relative;box-shadow:var(--shadow-beveled),var(--shadow-elevated)}.SplineGraph .splineGraph path,.SplineGraph .splineGraph line,.SplineGraph .splineGraph circle{stroke-width:2px;fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}.SplineGraph .splineGraph line{stroke:var(--fg-4)}.SplineGraph .splineGraph path{stroke:var(--fg-1);pointer-events:none}.SplineGraph .splineGraph .point{fill:transparent;stroke-width:2px;touch-action:none}.SplineGraph .splineGraph .point--oncurve{r:.07px;fill:var(--body-background)}.SplineGraph .splineGraph .point--oncurve-2{r:.06px;stroke:var(--fg-4);stroke-width:2px;pointer-events:none}.SplineGraph .splineGraph .point--oncurve-sample{r:.03px;pointer-events:none}.SplineGraph .splineGraph .point--oncurve-sample.start{fill:oklch(var(--start-lightness) var(--start-saturation) var(--start-hue))}.SplineGraph .splineGraph .point--oncurve-sample.end{fill:oklch(var(--end-lightness) var(--end-saturation) var(--end-hue))}.SplineGraph .splineGraph .point--offcurve{fill:var(--body-background);r:.07px}.SplineGraph .splineGraph .point--offcurve-2{r:.06px;stroke:var(--fg-4);stroke-width:2.5px;pointer-events:none}.SplineGraph .splineGraph .point--offcurve-3{fill:var(--fg-4);r:.015px;pointer-events:none}.SplineGraph .easing-menu{display:none;position:absolute;top:0;right:0;bottom:0;left:0;grid-template-columns:1fr 1fr 1fr;overflow:auto;box-shadow:var(--shadow-beveled),var(--shadow-elevated)}.SplineGraph .easing-option{display:flex;background:none;border:none;padding:.5rem}.SplineGraph .easing-option:hover path,.SplineGraph .easing-option:focus path{stroke:var(--fg-2)}.SplineGraph .easing-option svg{overflow:visible;height:100%;width:100%}.SplineGraph .easing-option path{stroke:var(--fg-4);fill:none;vector-effect:non-scaling-stroke;stroke-width:2px;stroke-linecap:round}