@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Inter:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
.cls-1 { fill: #ffc541; }

.cls-2 { fill: #4e4066; }

.cls-3 { fill: #6f5b92; }

.cls-4 { fill: #f78d5e; }

.cls-5 { fill: #fa976c; }

.cls-6 { fill: #b65c32; opacity: 0.6; }

.cls-7 { fill: #b65c32; opacity: 0.4; }

.cls-8 { fill: #b65c32; }

.cls-9 { fill: #f4b73b; }

.cls-10 { opacity: 0.6; }

.cls-11 { fill: #f9c358; }

.cls-12 { fill: #9b462c; }

.cls-13 { fill: #aa512e; }

.cls-14 { fill: #7d6aa5; }

/* animations */
.wheel { animation: wheel-rotate 6s ease infinite; transform-origin: center; transform-box: fill-box; }

@keyframes wheel-rotate { 50% { transform: rotate(360deg); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  100% { transform: rotate(960deg); } }
.clock-hand-1 { animation: clock-rotate 3s linear infinite; transform-origin: bottom; transform-box: fill-box; }

.clock-hand-2 { animation: clock-rotate 6s linear infinite; transform-origin: bottom; transform-box: fill-box; }

@keyframes clock-rotate { 100% { transform: rotate(360deg); } }
#box-top { animation: box-top-anim 2s linear infinite; transform-origin: right top; transform-box: fill-box; }

@keyframes box-top-anim { 50% { transform: rotate(-5deg); } }
#umbrella { animation: umbrella-anim 6s linear infinite; transform-origin: center; transform-box: fill-box; }

@keyframes umbrella-anim { 25% { transform: translateY(10px) rotate(5deg); }
  75% { transform: rotate(-5deg); } }
#cup { animation: cup-rotate 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; transform-origin: top left; transform-box: fill-box; }

@keyframes cup-rotate { 50% { transform: rotate(-5deg); } }
#pillow { animation: pillow-anim 3s linear infinite; transform-origin: center; transform-box: fill-box; }

@keyframes pillow-anim { 25% { transform: rotate(10deg) translateY(5px); }
  75% { transform: rotate(-10deg); } }
#stripe { animation: stripe-anim 3s linear infinite; transform-origin: center; transform-box: fill-box; }

@keyframes stripe-anim { 25% { transform: translate(10px, 0) rotate(-10deg); }
  75% { transform: translateX(10px); } }
#bike { animation: bike-anim 6s ease infinite; }

@keyframes bike-anim { 0% { transform: translateX(-1300px); }
  50% { transform: translateX(0); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); }
  100% { transform: translateX(1300px); } }
#rucksack { animation: ruck-anim 3s linear infinite; transform-origin: top; transform-box: fill-box; }

@keyframes ruck-anim { 50% { transform: rotate(5deg); } }
.circle { animation: circle-anim ease infinite; transform-origin: center; transform-box: fill-box; perspective: 0px; }

.circle.c1 { animation-duration: 2s; }

.circle.c2 { animation-duration: 3s; }

.circle.c3 { animation-duration: 1s; }

.circle.c4 { animation-duration: 1s; }

.circle.c5 { animation-duration: 2s; }

.circle.c6 { animation-duration: 3s; }

@keyframes circle-anim { 50% { transform: scale(0.2) rotateX(360deg) rotateY(360deg); } }
.four, #ou { animation: four-anim cubic-bezier(0.39, 0.575, 0.565, 1) infinite; }

.four.a { transform-origin: bottom left; animation-duration: 3s; transform-box: fill-box; }

.four.b { transform-origin: bottom right; animation-duration: 3s; transform-box: fill-box; }

#ou { animation-duration: 6s; transform-origin: center; transform-box: fill-box; }

@keyframes four-anim { 50% { transform: scale(0.98); } }
.highlight .w { color: #bbbbbb; }

/* Text.Whitespace */
.highlight .k { color: #0000aa; }

/* Keyword */
.highlight .m { color: #009999; }

/* Literal.Number */
.highlight .s { color: #aa5500; }

/* Literal.String */
.highlight .c { color: #aaaaaa; font-style: italic; }

/* Comment */
.highlight .cp { color: #4c8317; }

/* Comment.Preproc */
.highlight .gd { color: #aa0000; }

/* Generic.Deleted */
.highlight .gr { color: #aa0000; }

/* Generic.Error */
.highlight .gi { color: #00aa00; }

/* Generic.Inserted */
.highlight .go { color: #888888; }

/* Generic.Output */
.highlight .gp { color: #555555; }

/* Generic.Prompt */
.highlight .gt { color: #aa0000; }

/* Generic.Traceback */
.highlight .kc { color: #0000aa; }

/* Keyword.Constant */
.highlight .kd { color: #0000aa; }

/* Keyword.Declaration */
.highlight .kn { color: #0000aa; }

/* Keyword.Namespace */
.highlight .kp { color: #0000aa; }

/* Keyword.Pseudo */
.highlight .kr { color: #0000aa; }

/* Keyword.Reserved */
.highlight .kt { color: #00aaaa; }

/* Keyword.Type */
.highlight .na { color: #1e90ff; }

/* Name.Attribute */
.highlight .nb { color: #00aaaa; }

/* Name.Builtin */
.highlight .nc { color: #00aa00; }

/* Name.Class */
.highlight .no { color: #aa0000; }

/* Name.Constant */
.highlight .nd { color: #888888; }

/* Name.Decorator */
.highlight .nf { color: #00aa00; }

/* Name.Function */
.highlight .nn { color: #00aaaa; }

/* Name.Namespace */
.highlight .nv { color: #aa0000; }

/* Name.Variable */
.highlight .ow { color: #0000aa; }

/* Operator.Word */
.highlight .mb { color: #009999; }

/* Literal.Number.Bin */
.highlight .mf { color: #009999; }

/* Literal.Number.Float */
.highlight .mh { color: #009999; }

/* Literal.Number.Hex */
.highlight .mi { color: #009999; }

/* Literal.Number.Integer */
.highlight .mo { color: #009999; }

/* Literal.Number.Oct */
.highlight .sa { color: #aa5500; }

/* Literal.String.Affix */
.highlight .sb { color: #aa5500; }

/* Literal.String.Backtick */
.highlight .sc { color: #aa5500; }

/* Literal.String.Char */
.highlight .dl { color: #aa5500; }

/* Literal.String.Delimiter */
.highlight .sd { color: #aa5500; }

/* Literal.String.Doc */
.highlight .s2 { color: #aa5500; }

/* Literal.String.Double */
.highlight .se { color: #aa5500; }

/* Literal.String.Escape */
.highlight .sh { color: #aa5500; }

/* Literal.String.Heredoc */
.highlight .si { color: #aa5500; }

/* Literal.String.Interpol */
.highlight .sx { color: #aa5500; }

/* Literal.String.Other */
.highlight .sr { color: #009999; }

/* Literal.String.Regex */
.highlight .s1 { color: #aa5500; }

/* Literal.String.Single */
.highlight .ss { color: #0000aa; }

/* Literal.String.Symbol */
.highlight .bp { color: #00aaaa; }

/* Name.Builtin.Pseudo */
.highlight .fm { color: #00aa00; }

/* Name.Function.Magic */
.highlight .vc { color: #aa0000; }

/* Name.Variable.Class */
.highlight .vg { color: #aa0000; }

/* Name.Variable.Global */
.highlight .vi { color: #aa0000; }

/* Name.Variable.Instance */
.highlight .vm { color: #aa0000; }

/* Name.Variable.Magic */
.highlight .il { color: #009999; }

/* Literal.Number.Integer.Long */
.highlight .ge { font-style: italic; }

/* Generic.Emph */
.highlight .gs { font-weight: bold; }

/* Generic.Strong */
.highlight .c1 { color: #aaaaaa; font-style: italic; }

/* Comment.Single */
.highlight .cs { color: #0000aa; font-style: italic; }

/* Comment.Special */
.highlight .ch { color: #aaaaaa; font-style: italic; }

/* Comment.Hashbang */
.highlight .cm { color: #aaaaaa; font-style: italic; }

/* Comment.Multiline */
.highlight .gh { color: #000080; font-weight: bold; }

/* Generic.Heading */
.highlight .gu { color: #800080; font-weight: bold; }

/* Generic.Subheading */
.highlight .ni { color: #880000; font-weight: bold; }

/* Name.Entity */
.highlight .nt { color: #1e90ff; font-weight: bold; }

/* Name.Tag */
.highlight .err { color: #FF0000; }

/* Error */
.highlight .cpf { color: #aaaaaa; font-style: italic; }

/* Comment.PreprocFile */
html { padding-left: calc(100vw - 100%); }

body { font-family: "Poppins", sans-serif; }

.badge { font-weight: 500; }

.search-box { box-shadow: none !important; }

.post.card { border-radius: 15px; text-decoration: none !important; padding: 15px; height: 100%; }
.post.card .card-footer { font-size: 14px; margin: 0 -15px -15px -15px; padding: 15px 35px; }

.post .post-metadata { font-size: 14px; margin-top: -6px; }
.post .tag:hover { background-color: #58a6ff; color: white !important; }
.post footer { font-size: 10px; color: #6c757d; text-decoration: underline; text-decoration-color: yellow; text-align: right; margin-top: 4em; margin-right: 2em; }
.post h1, .post h2 { margin-top: 32px; }
.post hr { background: #8b949e; }
.post img:not(.emoji) { display: block; max-width: 100%; height: auto; margin: 1rem auto; }
.post .video { position: relative; padding-bottom: 56.25%; margin-bottom: 1rem; width: 100%; }
.post .video iframe { position: absolute; height: 100%; width: 100%; }
.post a:not(.btn):not([class^="carousel-"]):not([class^="list-"]):not(.no-underline) { display: inline-block; text-decoration: none; }
.post a:not(.btn):not([class^="carousel-"]):not([class^="list-"]):not(.no-underline):hover { color: #58a6ff; }
.post a:not(.btn):not([class^="carousel-"]):not([class^="list-"]):not(.no-underline)::after { content: ""; display: block; height: 0.15em; margin-top: -0.15em; width: 0; background: #58a6ff; transition: width 0.35s; }
.post a:not(.btn):not([class^="carousel-"]):not([class^="list-"]):not(.no-underline):hover::after { width: 100%; }
.post pre { background: #f8f9fa; border: 1px solid #ddd; color: #343a40; font-family: monospace; font-size: 14px; line-height: 20px; margin-bottom: 1.6em; max-width: 100%; padding: 1em 1.5em; display: block; page-break-inside: avoid; overflow: auto; word-wrap: break-word; }
.post code.highlighter-rouge { background-color: #f8f9fa; color: #343a40; border-radius: 3px; margin: 0; padding: 0.2em 0.65em; }
.post blockquote { border-left: 0.25em solid #58a6ff; color: #8b949e; padding: 0 1em; }
.post table { display: block; overflow-x: auto; margin: 1rem 0; }
.post table td, .post table th { border: 1px solid #ddd; padding: 8px 16px; }
.post table th { padding-top: 12px; padding-bottom: 12px; font-weight: 500; text-align: left; background-color: #58a6ff; color: white; }
.post table tr:nth-child(even) { background-color: #f8f9fa; }

.social { text-decoration: none !important; }

#attribution { opacity: 0.5; }
#attribution a { text-decoration: none; font-weight: bold; }

@media only screen and (min-width: 768px) { #attribution { writing-mode: vertical-rl; transform: rotate(180deg); position: fixed; bottom: 56px; right: 22px; } }
#container { display: inline-block; position: relative; width: 100%; }

#dummy { padding-top: 100%; /* 1:1 aspect ratio */ }

#element { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.circle-image { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center; }

.link-after, .nav-link::after, .navbar-brand::after, .nav-item.active::after { content: ""; display: block; height: 0.15em; background: #58a6ff; }

.nav-link::after, .navbar-brand::after { width: 0; transition: width 0.35s; }
.nav-link:hover::after, .navbar-brand:hover::after { width: 100%; }

.nav-item.active { font-weight: bold; }
.nav-item.active::after { width: 100% !important; }

.navbar-brand { margin-bottom: -14px; }
.navbar-brand::after { margin-top: -0.25em; }

.project.card { border-radius: 15px; text-decoration: none !important; margin: 10px auto; transition: transform 400ms; }
.project.card .card-img-top { border-radius: 15px 15px 0 0; }
.project.card:hover:not(.post) { transform: translateY(-8px); box-shadow: -2px 8px 40px -12px rgba(0, 0, 0, 0.24); }

.skill { margin-bottom: 35px; position: relative; overflow: hidden; }
.skill > p { margin: 0; font-size: 18px; }
.skill:before { width: 100%; height: 5px; content: ""; display: block; position: absolute; background: #f8f9fa; bottom: 0; }

.skill-bar { width: 100%; height: 5px; background: #58a6ff; display: block; position: relative; }
.skill-bar span { position: absolute; border-top: 5px solid inherit; top: -30px; padding: 0; font-size: 18px; padding: 3px 0; font-weight: 500; right: 0; }

.skill-bar.skill-bar-secondary { background: #8b949e; }

.skill-bar.skill-bar-success { background: #28a745; }

.skill-bar.skill-bar-info { background: #17a2b8; }

.skill-bar.skill-bar-warning { background: #ffc107; }

.skill-bar.skill-bar-danger { background: #dc3545; }

.skill-bar.skill-bar-light { background: #f8f9fa; }

.skill-bar.skill-bar-dark { background: #343a40; }

.skill-0 { width: 0%; }

.skill-1 { width: 1%; }

.skill-2 { width: 2%; }

.skill-3 { width: 3%; }

.skill-4 { width: 4%; }

.skill-5 { width: 5%; }

.skill-6 { width: 6%; }

.skill-7 { width: 7%; }

.skill-8 { width: 8%; }

.skill-9 { width: 9%; }

.skill-10 { width: 10%; }

.skill-11 { width: 11%; }

.skill-12 { width: 12%; }

.skill-13 { width: 13%; }

.skill-14 { width: 14%; }

.skill-15 { width: 15%; }

.skill-16 { width: 16%; }

.skill-17 { width: 17%; }

.skill-18 { width: 18%; }

.skill-19 { width: 19%; }

.skill-20 { width: 20%; }

.skill-21 { width: 21%; }

.skill-22 { width: 22%; }

.skill-23 { width: 23%; }

.skill-24 { width: 24%; }

.skill-25 { width: 25%; }

.skill-26 { width: 26%; }

.skill-27 { width: 27%; }

.skill-28 { width: 28%; }

.skill-29 { width: 29%; }

.skill-30 { width: 30%; }

.skill-31 { width: 31%; }

.skill-32 { width: 32%; }

.skill-33 { width: 33%; }

.skill-34 { width: 34%; }

.skill-35 { width: 35%; }

.skill-36 { width: 36%; }

.skill-37 { width: 37%; }

.skill-38 { width: 38%; }

.skill-39 { width: 39%; }

.skill-40 { width: 40%; }

.skill-41 { width: 41%; }

.skill-42 { width: 42%; }

.skill-43 { width: 43%; }

.skill-44 { width: 44%; }

.skill-45 { width: 45%; }

.skill-46 { width: 46%; }

.skill-47 { width: 47%; }

.skill-48 { width: 48%; }

.skill-49 { width: 49%; }

.skill-50 { width: 50%; }

.skill-51 { width: 51%; }

.skill-52 { width: 52%; }

.skill-53 { width: 53%; }

.skill-54 { width: 54%; }

.skill-55 { width: 55%; }

.skill-56 { width: 56%; }

.skill-57 { width: 57%; }

.skill-58 { width: 58%; }

.skill-59 { width: 59%; }

.skill-60 { width: 60%; }

.skill-61 { width: 61%; }

.skill-62 { width: 62%; }

.skill-63 { width: 63%; }

.skill-64 { width: 64%; }

.skill-65 { width: 65%; }

.skill-66 { width: 66%; }

.skill-67 { width: 67%; }

.skill-68 { width: 68%; }

.skill-69 { width: 69%; }

.skill-70 { width: 70%; }

.skill-71 { width: 71%; }

.skill-72 { width: 72%; }

.skill-73 { width: 73%; }

.skill-74 { width: 74%; }

.skill-75 { width: 75%; }

.skill-76 { width: 76%; }

.skill-77 { width: 77%; }

.skill-78 { width: 78%; }

.skill-79 { width: 79%; }

.skill-80 { width: 80%; }

.skill-81 { width: 81%; }

.skill-82 { width: 82%; }

.skill-83 { width: 83%; }

.skill-84 { width: 84%; }

.skill-85 { width: 85%; }

.skill-86 { width: 86%; }

.skill-87 { width: 87%; }

.skill-88 { width: 88%; }

.skill-89 { width: 89%; }

.skill-90 { width: 90%; }

.skill-91 { width: 91%; }

.skill-92 { width: 92%; }

.skill-93 { width: 93%; }

.skill-94 { width: 94%; }

.skill-95 { width: 95%; }

.skill-96 { width: 96%; }

.skill-97 { width: 97%; }

.skill-98 { width: 98%; }

.skill-99 { width: 99%; }

.skill-100 { width: 100%; }

.timeline-body { position: relative; background-color: #f8f9fa; border-radius: 0 15px 15px 0; padding: 5px 0; }
.timeline-body:after { content: ""; width: 4px; height: 100%; background-color: #58a6ff; position: absolute; left: -4px; top: 0; }
.timeline-body .timeline-item { position: relative; }
.timeline-body .timeline-item:after { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 4px solid #58a6ff; background-color: #f8f9fa; position: absolute; left: -12px; top: 8px; z-index: 10; }
.timeline-body .timeline-item .content { margin: 40px; padding-bottom: 20px; border-bottom: 1px dashed #343a40; }
.timeline-body .timeline-item .content .date { margin-top: -5px; margin-bottom: 15px; color: #6c757d; }

/* ============================================ DARK THEME OVERRIDE ============================================ */
html, body { background-color: #0d1117; color: #c9d1d9; }

h1, h2, h3, h4, h5, h6 { color: #e6edf3; }

a { color: #58a6ff; }
a:hover { color: #79c0ff; }

hr { background-color: #30363d; border-color: #30363d; }

/* Navbar */
.navbar-brand, .navbar-brand h5, .navbar-brand b { color: #e6edf3 !important; }

.nav-link { color: rgba(201, 209, 217, 0.7) !important; }

.nav-link:hover, .nav-item.active .nav-link { color: #58a6ff !important; }

/* Cards (projects + blog posts) */
.card, .post.card, .project.card { background-color: #161b22; color: #c9d1d9; border: 1px solid #30363d; }

.card-footer { background-color: rgba(0, 0, 0, 0.2) !important; border-top: 1px solid #30363d; color: #8b949e; }

/* Code blocks */
pre, code.highlighter-rouge { background-color: #161b22 !important; color: #c9d1d9 !important; border-color: #30363d !important; }

/* Tables */
table td, .post table th, table th { border-color: #30363d !important; }

table th { background-color: #58a6ff !important; color: #fff !important; }

table tr:nth-child(even) { background-color: #161b22 !important; }

/* Blockquotes */
blockquote { color: #8b949e; border-left-color: #58a6ff; }

/* Timeline (about page) */
.timeline-body { background-color: #161b22; }
.timeline-body:after { background-color: #58a6ff; }

.timeline-item:after { border-color: #58a6ff; background-color: #161b22; }

.timeline .content { border-bottom-color: #30363d !important; }

/* Skills bars */
.skill:before { background: #30363d; }

/* Forms / search */
input, textarea, select, .search-box { background-color: #161b22 !important; color: #c9d1d9 !important; border-color: #30363d !important; }

::placeholder { color: #8b949e; }

/* Footer */
footer, #attribution, #attribution a { color: #8b949e; }

/* Hero section (used on index.md) */
.hero { font-family: "Poppins", sans-serif; background-color: #161b22; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 32px 32px; border-radius: 15px; padding: 3rem 2rem; margin-bottom: 1rem; }

.hero .eyebrow { color: #8b949e; font-size: 2.5rem; line-height: 1; }

.hero h1 { font-size: 3rem; font-weight: 800; line-height: 1.2; color: #e6edf3; margin-bottom: 1.5rem; }

.hero h1 .name { color: #79c0ff; font-style: italic; font-weight: 500; }

.hero .tagline { text-align: right; color: #8b949e; font-style: italic; font-size: 1.1rem; margin-top: 1rem; }

.hero .intro { font-family: "Poppins", sans-serif; font-size: 1.05rem; color: #8b949e; line-height: 1.6; max-width: 720px; margin: 0; }

.hero h1 .accent { color: #58a6ff; }

.projects-section { margin: 0 0 2.5rem 0; column-count: initial !important; }

.projects-section-title { color: #e6edf3; font-weight: 700; font-size: 1.4rem; border-left: 4px solid #58a6ff; padding-left: 12px; margin: 0 0 1.25rem 0; }

.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; column-count: initial !important; }

.project-grid .wow { height: 100%; }

.project-grid .project.card { margin: 0; height: 100%; display: flex; flex-direction: column; }

.project-grid .project.card img.card-img-top { height: 180px; object-fit: cover; width: 100%; }

.project-grid .project.card .card-body { display: flex; flex-direction: column; flex-grow: 1; }

.project-grid .project.card .card-text:last-child { margin-top: auto; }

@media (max-width: 480px) { .project-grid { grid-template-columns: 1fr; } }
@media (max-width: 576px) { .hero { padding: 2rem 1.25rem; }
  .hero h1 { font-size: 2rem; } }
/** Variables **/
:root { --color-background: #e7e7e7; --color-background-alt: #888888; --color-border-active: #da7105; --color-border-default: #d1d1d1; --color-highlight: #fdcf4c; --color-primary: #b64e08; --color-primary-active: #79320e; --color-text-default: #262626; --color-text-muted: #4f4f4f; --font-family-body: "Figtree", system-ui, sans-serif; --font-family-display: "Poppins", system-ui, sans-serif; }

/** Base **/
*, ::before, ::after { box-sizing: border-box; }

* { border: 0; margin: 0; padding: 0; }

body { -webkit-font-smoothing: antialiased; font-family: var(--font-family-body); font-optical-sizing: auto; font-style: normal; }

button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }

[type="checkbox"], [type="radio"], [type="range"] { appearance: none; flex-shrink: 0; padding: 0; user-select: none; }

[type="checkbox"]:focus, [type="radio"]:focus, [type="range"]:focus { outline: none; }

/** Components **/
.fs-form { display: grid; row-gap: 1.5rem; }

.fs-form:where(.fs-layout__2-column) { column-gap: 1.5rem; grid-template-columns: 1fr 1fr; }

fieldset { display: grid; margin: 1.5rem 0; row-gap: 1.5rem; }

.fs-form:where(.fs-layout__2-column) fieldset { column-gap: 1.5rem; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; }

.fs-fieldset-title { color: var(--color-text-default); font-family: var(--font-family-display); font-size: 1.25rem; line-height: 1.75rem; margin-bottom: 1.5rem; grid-column: 1 / -1; }

.fs-field { display: flex; flex-direction: column; row-gap: 0.5rem; }

.fs-label { color: var(--color-text-default); display: block; font-family: var(--font-family-display); font-size: 1rem; line-height: 1.25rem; }

.fs-description { color: var(--color-text-muted); display: block; font-size: 1rem; line-height: 1.25rem; }

.fs-button-group { display: flex; flex-direction: row-reverse; column-gap: 1.5rem; }

.fs-form:where(.fs-layout__2-column) .fs-button-group { grid-column: 1 / -1; }

.fs-button { background-color: var(--color-primary); border-radius: 9999px; color: white; cursor: pointer; font-size: 1.125rem; font-weight: 600; line-height: 1.5rem; padding: 0.75rem 2rem; transition-duration: 200ms; transition-property: background-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.fs-button:hover { background-color: var(--color-primary-active); }

.fs-button:focus-visible { background-color: var(--color-primary-active); outline: 4px solid var(--color-highlight); }

.fs-input, .fs-select { appearance: none; border-radius: 9999px; border-width: 0; box-shadow: var(--color-border-default) 0 0 0 1px inset; color: var(--color-text-default); font-size: 1rem; height: 3rem; line-height: 1.5rem; outline: none; padding-left: 1rem; padding-right: 1rem; }

.fs-input:focus-visible, .fs-select:focus-visible { box-shadow: var(--color-border-active) 0 0 0 1px inset; }

.fs-input::placeholder { color: var(--color-text-muted); }

.fs-checkbox-group, .fs-radio-group { display: flex; flex-direction: column; row-gap: 1rem; }

.fs-checkbox-field, .fs-radio-field { column-gap: 0.5rem; display: flex; }

:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description { margin-top: 0.25rem; }

.fs-checkbox-wrapper, .fs-radio-wrapper { align-items: center; display: flex; height: 1.25rem; }

.fs-checkbox, .fs-radio { background-color: #fff; border: 1px solid var(--color-border-default); height: 1.25rem; width: 1.25rem; }

.fs-checkbox { border-radius: 0.25rem; }

.fs-radio { border-radius: 100%; }

.fs-checkbox:checked, .fs-radio:checked { background-color: var(--color-primary); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; border-color: transparent; }

.fs-checkbox:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); }

.fs-radio:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); }

.fs-checkbox:focus-visible, .fs-radio:focus-visible { border-color: var(--color-border-active); outline: 4px solid var(--color-highlight); outline-offset: 0; }

.fs-checkbox:checked:focus-visible, .fs-radio:checked:focus-visible { border-color: transparent; }

.fs-select { background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.625em 1.625em; padding-right: 2.875rem; }

.fs-slider { background: transparent; cursor: pointer; height: 1.25rem; width: 100%; }

.fs-slider::-moz-range-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; }

.fs-slider::-webkit-slider-runnable-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; }

.fs-slider::-moz-range-thumb { background-color: var(--color-primary); border: none; /* Removes extra border that FF applies */ border-radius: 50%; height: 1.25rem; width: 1.25rem; }

.fs-slider::-webkit-slider-thumb { appearance: none; background-color: var(--color-primary); border-radius: 50%; height: 1.25rem; margin-top: -0.375rem; /* Centers thumb on the track */ width: 1.25rem; }

.fs-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.fs-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.fs-switch { background-color: var(--color-background-alt); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e"); background-position: left center; background-repeat: no-repeat; border-radius: 1.25rem; cursor: pointer; height: 1.25rem; transition-duration: 200ms; transition-property: background-color, background-position; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); width: 2.5rem; }

.fs-switch:checked { background-color: var(--color-primary); background-position: right center; }

.fs-switch:focus-visible { outline: 4px solid var(--color-highlight); outline-offset: 0; }

.fs-textarea { appearance: none; border-radius: 0.75rem; border-width: 0; box-shadow: var(--color-border-default) 0 0 0 1px inset; color: var(--color-text-default); font-size: 1rem; line-height: 1.5rem; outline: none; padding: 0.5rem 0.75rem; resize: vertical; }

.fs-textarea:focus-visible { box-shadow: var(--color-border-active) 0 0 0 1px inset; }

.fs-textarea::placeholder { color: var(--color-text-muted); }

/** Utilities **/
.col-span-full { grid-column: 1 / -1; }

.fs-textarea::placeholder { color: var(--color-text-muted); }

.slider-label-container { display: flex; justify-content: space-between; width: 100%; margin-top: 0.25rem; }

.slider-label-text { font-size: 0.75rem; color: var(--color-text-muted); text-align: center; white-space: nowrap; }