commit cc4bd9febc9458246313c82f5ac3078f1ee1ecf4
Author: itsig0 <pascal@wolfenbach.de>
Date:   Wed Mar 20 22:56:17 2024 +0100

    + to the git

diff --git a/.air.toml b/.air.toml
new file mode 100644
index 0000000..031eead
--- /dev/null
+++ b/.air.toml
@@ -0,0 +1,45 @@
+root = "."
+tmp_dir = "tmp"
+
+[build]
+  args_bin = []
+  bin = "./tmp/main"
+  cmd = "go build -o ./tmp/main ."
+  delay = 1000
+  exclude_dir = ["assets", "tmp", "vendor"]
+  exclude_file = []
+  exclude_regex = ["_test.go"]
+  exclude_unchanged = false
+  follow_symlink = false
+  full_bin = ""
+  include_dir = []
+  include_ext = ["go", "tpl", "tmpl", "templ", "html", "css"]
+  include_file = []
+  kill_delay = "0s"
+  log = "build-errors.log"
+  poll = false
+  poll_interval = 0
+  post_cmd = []
+  pre_cmd = []
+  rerun = false
+  rerun_delay = 500
+  send_interrupt = false
+  stop_on_error = false
+
+[color]
+  app = ""
+  build = "yellow"
+  main = "magenta"
+  runner = "green"
+  watcher = "cyan"
+
+[log]
+  main_only = false
+  time = false
+
+[misc]
+  clean_on_exit = false
+
+[screen]
+  clear_on_rebuild = false
+  keep_scroll = true
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..6bd35d1
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+tmp
+# we do not want these
+*_templ.txt
\ No newline at end of file
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..ccd9cf6
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,9 @@
+run:
+	@templ generate
+	@go run main.go
+
+templ:
+	@templ generate -watch -proxy=http://localhost:3000
+
+sass:
+	@sass --no-source-map --watch  public/stylesheets/tallytome.scss public/stylesheets/tallytome.css
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..0cc30d3
--- /dev/null
+++ b/README.md
@@ -0,0 +1,3 @@
+## Should have put it to Git sooner
+
+when will I learn
\ No newline at end of file
diff --git a/go.mod b/go.mod
new file mode 100644
index 0000000..4224f2f
--- /dev/null
+++ b/go.mod
@@ -0,0 +1,22 @@
+module github.com/itsig0/tallytome
+
+go 1.22.1
+
+require (
+	github.com/a-h/templ v0.2.598
+	github.com/gofiber/fiber/v2 v2.52.2
+)
+
+require (
+	github.com/andybalholm/brotli v1.0.5 // indirect
+	github.com/google/uuid v1.5.0 // indirect
+	github.com/klauspost/compress v1.17.0 // indirect
+	github.com/mattn/go-colorable v0.1.13 // indirect
+	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/mattn/go-runewidth v0.0.15 // indirect
+	github.com/rivo/uniseg v0.2.0 // indirect
+	github.com/valyala/bytebufferpool v1.0.0 // indirect
+	github.com/valyala/fasthttp v1.51.0 // indirect
+	github.com/valyala/tcplisten v1.0.0 // indirect
+	golang.org/x/sys v0.15.0 // indirect
+)
diff --git a/go.sum b/go.sum
new file mode 100644
index 0000000..c263190
--- /dev/null
+++ b/go.sum
@@ -0,0 +1,31 @@
+github.com/a-h/templ v0.2.598 h1:6jMIHv6wQZvdPxTuv87erW4RqN/FPU0wk7ZHN5wVuuo=
+github.com/a-h/templ v0.2.598/go.mod h1:SA7mtYwVEajbIXFRh3vKdYm/4FYyLQAtPH1+KxzGPA8=
+github.com/andybalholm/brotli v1.0.5 h1:8uQZIdzKmjc/iuPu7O2ioW48L81FgatrcpfFmiq/cCs=
+github.com/andybalholm/brotli v1.0.5/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
+github.com/gofiber/fiber/v2 v2.52.2 h1:b0rYH6b06Df+4NyrbdptQL8ifuxw/Tf2DgfkZkDaxEo=
+github.com/gofiber/fiber/v2 v2.52.2/go.mod h1:KEOE+cXMhXG0zHc9d8+E38hoX+ZN7bhOtgeF2oT6jrQ=
+github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
+github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
+github.com/google/uuid v1.5.0 h1:1p67kYwdtXjb0gL0BPiP1Av9wiZPo5A8z2cWkTZ+eyU=
+github.com/google/uuid v1.5.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/klauspost/compress v1.17.0 h1:Rnbp4K9EjcDuVuHtd0dgA4qNuv9yKDYKK1ulpJwgrqM=
+github.com/klauspost/compress v1.17.0/go.mod h1:ntbaceVETuRiXiv4DpjP66DpAtAGkEQskQzEyD//IeE=
+github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
+github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
+github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
+github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/mattn/go-runewidth v0.0.15 h1:UNAjwbU9l54TA3KzvqLGxwWjHmMgBUVhBiTjelZgg3U=
+github.com/mattn/go-runewidth v0.0.15/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
+github.com/rivo/uniseg v0.2.0 h1:S1pD9weZBuJdFmowNwbpi7BJ8TNftyUImj/0WQi72jY=
+github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
+github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
+github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
+github.com/valyala/fasthttp v1.51.0 h1:8b30A5JlZ6C7AS81RsWjYMQmrZG6feChmgAolCl1SqA=
+github.com/valyala/fasthttp v1.51.0/go.mod h1:oI2XroL+lI7vdXyYoQk03bXBThfFl2cVdIA3Xl7cH8g=
+github.com/valyala/tcplisten v1.0.0 h1:rBHj/Xf+E1tRGZyWIWwJDiRY0zc1Js+CV5DqwacVSA8=
+github.com/valyala/tcplisten v1.0.0/go.mod h1:T0xQ8SeCZGxckz9qRXTfG43PvQ/mcWh7FwZEA7Ioqkc=
+golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.15.0 h1:h48lPFYpsTvQJZF4EKyI4aLHaev3CxivZmv7yZig9pc=
+golang.org/x/sys v0.15.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
diff --git a/handler/index.go b/handler/index.go
new file mode 100644
index 0000000..e1c26eb
--- /dev/null
+++ b/handler/index.go
@@ -0,0 +1,11 @@
+package handler
+
+import (
+	"github.com/gofiber/fiber/v2"
+	"github.com/itsig0/tallytome/view/home"
+)
+
+func Index(c *fiber.Ctx) error {
+	hx := len(c.GetReqHeaders()["Hx-Request"]) > 0
+	return render(c, home.Show(hx))
+}
diff --git a/handler/tracker.go b/handler/tracker.go
new file mode 100644
index 0000000..7367959
--- /dev/null
+++ b/handler/tracker.go
@@ -0,0 +1,96 @@
+package handler
+
+import (
+	"github.com/gofiber/fiber/v2"
+	"github.com/gofiber/fiber/v2/log"
+	"github.com/itsig0/tallytome/view/hptracker"
+)
+
+func Tracker(c *fiber.Ctx) error {
+	hx := len(c.GetReqHeaders()["Hx-Request"]) > 0
+
+	data := hptracker.TrackerData{
+		HP:                  "0",
+		HPBase:              "0",
+		HPStartPercentage:   "0",
+		HPPercentage:        "0",
+		Mana:                "0",
+		ManaBase:            "0",
+		ManaRegen:           "0",
+		ManaStartPercentage: "0",
+		ManaPercentage:      "0",
+	}
+
+	return render(c, hptracker.Show(hx, data))
+}
+
+func TrackerUpdate(c *fiber.Ctx) error {
+
+	_, err := store.Get(c)
+	if err != nil {
+		return err
+	}
+
+	// Parse the form data
+	formdata := c.Context().PostArgs()
+
+	// Create an instance of TrackerData
+	data := hptracker.TrackerData{
+		HP:                  string(formdata.Peek("hp")),
+		HPBase:              string(formdata.Peek("hp")),
+		HPStartPercentage:   "0",
+		HPPercentage:        "100",
+		Mana:                string(formdata.Peek("mana")),
+		ManaBase:            string(formdata.Peek("mana")),
+		ManaRegen:           string(formdata.Peek("manaregen")),
+		ManaStartPercentage: "0",
+		ManaPercentage:      "100",
+	}
+
+	// why no work?
+	// values := reflect.ValueOf(data)
+	// types := values.Type()
+	// prefix := "tracker_"
+	// for i := 0; i < values.NumField(); i++ {
+	// 	sess.Set(prefix+types.Field(i).Name, values.Field(i))
+	// 	log.Info("test")
+	// }
+	// pre := "tracker_"
+	// sess.Set(pre+"HP", data.HP)
+	// sess.Set(pre+"HPBase", data.HPBase)
+	// sess.Set(pre+"HPStartPercentage", data.HPStartPercentage)
+	// sess.Set(pre+"HPStartPercentage", data.HPStartPercentage)
+
+	// sess.Set(pre+"Mana", data.Mana)
+	// sess.Set(pre+"ManaBase", data.ManaBase)
+	// sess.Set(pre+"ManaRegen", data.ManaRegen)
+	// sess.Set(pre+"ManaStartPercentage", data.ManaStartPercentage)
+	// sess.Set(pre+"ManaPercentage", data.ManaPercentage)
+
+	// sess.Save()
+
+	return render(c, hptracker.TrackerColumn(data))
+}
+
+func TrackerDamage(c *fiber.Ctx) error {
+
+	// formdata := c.Context().PostArgs()
+
+	data := hptracker.TrackerData{
+		HPStartPercentage: "100",
+		HPPercentage:      "66",
+	}
+
+	// log.Info(data)
+
+	return render(c, hptracker.HPTracker(data))
+}
+
+func CheckStore(c *fiber.Ctx) error {
+	sess, err := store.Get(c)
+	if err != nil {
+		return err
+	}
+	log.Info(sess.Keys())
+	return nil
+}
diff --git a/handler/util.go b/handler/util.go
new file mode 100644
index 0000000..4d4ba4c
--- /dev/null
+++ b/handler/util.go
@@ -0,0 +1,15 @@
+package handler
+
+import (
+	"github.com/a-h/templ"
+	"github.com/gofiber/fiber/v2"
+	"github.com/gofiber/fiber/v2/middleware/session"
+)
+
+var store = session.New()
+
+func render(c *fiber.Ctx, component templ.Component) error {
+	// or templ wil bork...
+	c.Set("Content-type", "text/html")
+	return component.Render(c.Context(), c.Response().BodyWriter())
+}
diff --git a/main.go b/main.go
new file mode 100644
index 0000000..d319a59
--- /dev/null
+++ b/main.go
@@ -0,0 +1,32 @@
+package main
+
+import (
+	"github.com/gofiber/fiber/v2"
+	"github.com/gofiber/fiber/v2/middleware/compress"
+	"github.com/itsig0/tallytome/handler"
+)
+
+func main() {
+
+	app := fiber.New(fiber.Config{
+		ServerHeader: "TallyTome",
+	})
+
+	// compression baby
+	app.Use(compress.New())
+
+	app.Static("/", "./public")
+
+	app.Get("/", handler.Index)
+
+	tracker := app.Group("/hp-mana-tracker")
+	tracker.Get("/", handler.Tracker)
+	tracker.Post("/update", handler.TrackerUpdate)
+	tracker.Post("/damage", handler.TrackerDamage)
+	tracker.Get("/check", handler.CheckStore)
+	// app.Get("/*", func(c *fiber.Ctx) error {
+	// 	return c.SendString("Hello, World!")
+	// })
+
+	app.Listen(":3000")
+}
diff --git a/public/gopher.png b/public/gopher.png
new file mode 100644
index 0000000..e12a5ec
Binary files /dev/null and b/public/gopher.png differ
diff --git a/public/scripts/alpine.js b/public/scripts/alpine.js
new file mode 100644
index 0000000..f750e64
--- /dev/null
+++ b/public/scripts/alpine.js
@@ -0,0 +1,5 @@
+(()=>{var rt=!1,nt=!1,U=[],it=-1;function Vt(e){Sn(e)}function Sn(e){U.includes(e)||U.push(e),An()}function ve(e){let t=U.indexOf(e);t!==-1&&t>it&&U.splice(t,1)}function An(){!nt&&!rt&&(rt=!0,queueMicrotask(On))}function On(){rt=!1,nt=!0;for(let e=0;e<U.length;e++)U[e](),it=e;U.length=0,it=-1,nt=!1}var R,D,L,st,ot=!0;function qt(e){ot=!1,e(),ot=!0}function Ut(e){R=e.reactive,L=e.release,D=t=>e.effect(t,{scheduler:r=>{ot?Vt(r):r()}}),st=e.raw}function at(e){D=e}function Wt(e){let t=()=>{};return[n=>{let i=D(n);return e._x_effects||(e._x_effects=new Set,e._x_runEffects=()=>{e._x_effects.forEach(o=>o())}),e._x_effects.add(i),t=()=>{i!==void 0&&(e._x_effects.delete(i),L(i))},i},()=>{t()}]}function Se(e,t){let r=!0,n,i=D(()=>{let o=e();JSON.stringify(o),r?n=o:queueMicrotask(()=>{t(o,n),n=o}),r=!1});return()=>L(i)}function W(e,t,r={}){e.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:!0,composed:!0,cancelable:!0}))}function C(e,t){if(typeof ShadowRoot=="function"&&e instanceof ShadowRoot){Array.from(e.children).forEach(i=>C(i,t));return}let r=!1;if(t(e,()=>r=!0),r)return;let n=e.firstElementChild;for(;n;)C(n,t,!1),n=n.nextElementSibling}function E(e,...t){console.warn(`Alpine Warning: ${e}`,...t)}var Gt=!1;function Jt(){Gt&&E("Alpine has already been initialized on this page. Calling Alpine.start() more than once can cause problems."),Gt=!0,document.body||E("Unable to initialize. Trying to load Alpine before `<body>` is available. Did you forget to add `defer` in Alpine's `<script>` tag?"),W(document,"alpine:init"),W(document,"alpine:initializing"),le(),rr(t=>S(t,C)),ee(t=>ce(t)),Ce((t,r)=>{ue(t,r).forEach(n=>n())});let e=t=>!G(t.parentElement,!0);Array.from(document.querySelectorAll(Zt().join(","))).filter(e).forEach(t=>{S(t)}),W(document,"alpine:initialized")}var ct=[],Yt=[];function Xt(){return ct.map(e=>e())}function Zt(){return ct.concat(Yt).map(e=>e())}function Ae(e){ct.push(e)}function Oe(e){Yt.push(e)}function G(e,t=!1){return j(e,r=>{if((t?Zt():Xt()).some(i=>r.matches(i)))return!0})}function j(e,t){if(e){if(t(e))return e;if(e._x_teleportBack&&(e=e._x_teleportBack),!!e.parentElement)return j(e.parentElement,t)}}function Qt(e){return Xt().some(t=>e.matches(t))}var er=[];function tr(e){er.push(e)}function S(e,t=C,r=()=>{}){ir(()=>{t(e,(n,i)=>{r(n,i),er.forEach(o=>o(n,i)),ue(n,n.attributes).forEach(o=>o()),n._x_ignore&&i()})})}function ce(e,t=C){t(e,r=>{lt(r),nr(r)})}var or=[],sr=[],ar=[];function rr(e){ar.push(e)}function ee(e,t){typeof t=="function"?(e._x_cleanups||(e._x_cleanups=[]),e._x_cleanups.push(t)):(t=e,sr.push(t))}function Ce(e){or.push(e)}function Re(e,t,r){e._x_attributeCleanups||(e._x_attributeCleanups={}),e._x_attributeCleanups[t]||(e._x_attributeCleanups[t]=[]),e._x_attributeCleanups[t].push(r)}function lt(e,t){e._x_attributeCleanups&&Object.entries(e._x_attributeCleanups).forEach(([r,n])=>{(t===void 0||t.includes(r))&&(n.forEach(i=>i()),delete e._x_attributeCleanups[r])})}function nr(e){if(e._x_cleanups)for(;e._x_cleanups.length;)e._x_cleanups.pop()()}var ut=new MutationObserver(mt),ft=!1;function le(){ut.observe(document,{subtree:!0,childList:!0,attributes:!0,attributeOldValue:!0}),ft=!0}function dt(){Cn(),ut.disconnect(),ft=!1}var fe=[];function Cn(){let e=ut.takeRecords();fe.push(()=>e.length>0&&mt(e));let t=fe.length;queueMicrotask(()=>{if(fe.length===t)for(;fe.length>0;)fe.shift()()})}function _(e){if(!ft)return e();dt();let t=e();return le(),t}var pt=!1,Te=[];function cr(){pt=!0}function lr(){pt=!1,mt(Te),Te=[]}function mt(e){if(pt){Te=Te.concat(e);return}let t=new Set,r=new Set,n=new Map,i=new Map;for(let o=0;o<e.length;o++)if(!e[o].target._x_ignoreMutationObserver&&(e[o].type==="childList"&&(e[o].addedNodes.forEach(s=>s.nodeType===1&&t.add(s)),e[o].removedNodes.forEach(s=>s.nodeType===1&&r.add(s))),e[o].type==="attributes")){let s=e[o].target,a=e[o].attributeName,c=e[o].oldValue,l=()=>{n.has(s)||n.set(s,[]),n.get(s).push({name:a,value:s.getAttribute(a)})},u=()=>{i.has(s)||i.set(s,[]),i.get(s).push(a)};s.hasAttribute(a)&&c===null?l():s.hasAttribute(a)?(u(),l()):u()}i.forEach((o,s)=>{lt(s,o)}),n.forEach((o,s)=>{or.forEach(a=>a(s,o))});for(let o of r)t.has(o)||(sr.forEach(s=>s(o)),ce(o));t.forEach(o=>{o._x_ignoreSelf=!0,o._x_ignore=!0});for(let o of t)r.has(o)||o.isConnected&&(delete o._x_ignoreSelf,delete o._x_ignore,ar.forEach(s=>s(o)),o._x_ignore=!0,o._x_ignoreSelf=!0);t.forEach(o=>{delete o._x_ignoreSelf,delete o._x_ignore}),t=null,r=null,n=null,i=null}function Me(e){return B(F(e))}function P(e,t,r){return e._x_dataStack=[t,...F(r||e)],()=>{e._x_dataStack=e._x_dataStack.filter(n=>n!==t)}}function F(e){return e._x_dataStack?e._x_dataStack:typeof ShadowRoot=="function"&&e instanceof ShadowRoot?F(e.host):e.parentNode?F(e.parentNode):[]}function B(e){return new Proxy({objects:e},Tn)}var Tn={ownKeys({objects:e}){return Array.from(new Set(e.flatMap(t=>Object.keys(t))))},has({objects:e},t){return t==Symbol.unscopables?!1:e.some(r=>Object.prototype.hasOwnProperty.call(r,t)||Reflect.has(r,t))},get({objects:e},t,r){return t=="toJSON"?Rn:Reflect.get(e.find(n=>Reflect.has(n,t))||{},t,r)},set({objects:e},t,r,n){let i=e.find(s=>Object.prototype.hasOwnProperty.call(s,t))||e[e.length-1],o=Object.getOwnPropertyDescriptor(i,t);return o?.set&&o?.get?Reflect.set(i,t,r,n):Reflect.set(i,t,r)}};function Rn(){return Reflect.ownKeys(this).reduce((t,r)=>(t[r]=Reflect.get(this,r),t),{})}function Ne(e){let t=n=>typeof n=="object"&&!Array.isArray(n)&&n!==null,r=(n,i="")=>{Object.entries(Object.getOwnPropertyDescriptors(n)).forEach(([o,{value:s,enumerable:a}])=>{if(a===!1||s===void 0||typeof s=="object"&&s!==null&&s.__v_skip)return;let c=i===""?o:`${i}.${o}`;typeof s=="object"&&s!==null&&s._x_interceptor?n[o]=s.initialize(e,c,o):t(s)&&s!==n&&!(s instanceof Element)&&r(s,c)})};return r(e)}function De(e,t=()=>{}){let r={initialValue:void 0,_x_interceptor:!0,initialize(n,i,o){return e(this.initialValue,()=>Mn(n,i),s=>_t(n,i,s),i,o)}};return t(r),n=>{if(typeof n=="object"&&n!==null&&n._x_interceptor){let i=r.initialize.bind(r);r.initialize=(o,s,a)=>{let c=n.initialize(o,s,a);return r.initialValue=c,i(o,s,a)}}else r.initialValue=n;return r}}function Mn(e,t){return t.split(".").reduce((r,n)=>r[n],e)}function _t(e,t,r){if(typeof t=="string"&&(t=t.split(".")),t.length===1)e[t[0]]=r;else{if(t.length===0)throw error;return e[t[0]]||(e[t[0]]={}),_t(e[t[0]],t.slice(1),r)}}var ur={};function y(e,t){ur[e]=t}function de(e,t){return Object.entries(ur).forEach(([r,n])=>{let i=null;function o(){if(i)return i;{let[s,a]=ht(t);return i={interceptor:De,...s},ee(t,a),i}}Object.defineProperty(e,`$${r}`,{get(){return n(t,o())},enumerable:!1})}),e}function fr(e,t,r,...n){try{return r(...n)}catch(i){te(i,e,t)}}function te(e,t,r=void 0){e=Object.assign(e??{message:"No error message given."},{el:t,expression:r}),console.warn(`Alpine Expression Error: ${e.message}
+
+${r?'Expression: "'+r+`"
+
+`:""}`,t),setTimeout(()=>{throw e},0)}var Pe=!0;function ke(e){let t=Pe;Pe=!1;let r=e();return Pe=t,r}function M(e,t,r={}){let n;return x(e,t)(i=>n=i,r),n}function x(...e){return dr(...e)}var dr=xt;function pr(e){dr=e}function xt(e,t){let r={};de(r,e);let n=[r,...F(e)],i=typeof t=="function"?Nn(n,t):Pn(n,t,e);return fr.bind(null,e,t,i)}function Nn(e,t){return(r=()=>{},{scope:n={},params:i=[]}={})=>{let o=t.apply(B([n,...e]),i);Ie(r,o)}}var gt={};function Dn(e,t){if(gt[e])return gt[e];let r=Object.getPrototypeOf(async function(){}).constructor,n=/^[\n\s]*if.*\(.*\)/.test(e.trim())||/^(let|const)\s/.test(e.trim())?`(async()=>{ ${e} })()`:e,o=(()=>{try{let s=new r(["__self","scope"],`with (scope) { __self.result = ${n} }; __self.finished = true; return __self.result;`);return Object.defineProperty(s,"name",{value:`[Alpine] ${e}`}),s}catch(s){return te(s,t,e),Promise.resolve()}})();return gt[e]=o,o}function Pn(e,t,r){let n=Dn(t,r);return(i=()=>{},{scope:o={},params:s=[]}={})=>{n.result=void 0,n.finished=!1;let a=B([o,...e]);if(typeof n=="function"){let c=n(n,a).catch(l=>te(l,r,t));n.finished?(Ie(i,n.result,a,s,r),n.result=void 0):c.then(l=>{Ie(i,l,a,s,r)}).catch(l=>te(l,r,t)).finally(()=>n.result=void 0)}}}function Ie(e,t,r,n,i){if(Pe&&typeof t=="function"){let o=t.apply(r,n);o instanceof Promise?o.then(s=>Ie(e,s,r,n)).catch(s=>te(s,i,t)):e(o)}else typeof t=="object"&&t instanceof Promise?t.then(o=>e(o)):e(t)}var Et="x-";function T(e=""){return Et+e}function mr(e){Et=e}var yt={};function d(e,t){return yt[e]=t,{before(r){if(!yt[r]){console.warn(String.raw`Cannot find directive \`${r}\`. \`${e}\` will use the default order of execution`);return}let n=J.indexOf(r);J.splice(n>=0?n:J.indexOf("DEFAULT"),0,e)}}}function ue(e,t,r){if(t=Array.from(t),e._x_virtualDirectives){let o=Object.entries(e._x_virtualDirectives).map(([a,c])=>({name:a,value:c})),s=vt(o);o=o.map(a=>s.find(c=>c.name===a.name)?{name:`x-bind:${a.name}`,value:`"${a.value}"`}:a),t=t.concat(o)}let n={};return t.map(hr((o,s)=>n[o]=s)).filter(xr).map(kn(n,r)).sort(Ln).map(o=>In(e,o))}function vt(e){return Array.from(e).map(hr()).filter(t=>!xr(t))}var bt=!1,pe=new Map,_r=Symbol();function ir(e){bt=!0;let t=Symbol();_r=t,pe.set(t,[]);let r=()=>{for(;pe.get(t).length;)pe.get(t).shift()();pe.delete(t)},n=()=>{bt=!1,r()};e(r),n()}function ht(e){let t=[],r=a=>t.push(a),[n,i]=Wt(e);return t.push(i),[{Alpine:z,effect:n,cleanup:r,evaluateLater:x.bind(x,e),evaluate:M.bind(M,e)},()=>t.forEach(a=>a())]}function In(e,t){let r=()=>{},n=yt[t.type]||r,[i,o]=ht(e);Re(e,t.original,o);let s=()=>{e._x_ignore||e._x_ignoreSelf||(n.inline&&n.inline(e,t,i),n=n.bind(n,e,t,i),bt?pe.get(_r).push(n):n())};return s.runCleanups=o,s}var Le=(e,t)=>({name:r,value:n})=>(r.startsWith(e)&&(r=r.replace(e,t)),{name:r,value:n}),$e=e=>e;function hr(e=()=>{}){return({name:t,value:r})=>{let{name:n,value:i}=gr.reduce((o,s)=>s(o),{name:t,value:r});return n!==t&&e(n,t),{name:n,value:i}}}var gr=[];function re(e){gr.push(e)}function xr({name:e}){return yr().test(e)}var yr=()=>new RegExp(`^${Et}([^:^.]+)\\b`);function kn(e,t){return({name:r,value:n})=>{let i=r.match(yr()),o=r.match(/:([a-zA-Z0-9\-_:]+)/),s=r.match(/\.[^.\]]+(?=[^\]]*$)/g)||[],a=t||e[r]||r;return{type:i?i[1]:null,value:o?o[1]:null,modifiers:s.map(c=>c.replace(".","")),expression:n,original:a}}}var wt="DEFAULT",J=["ignore","ref","data","id","anchor","bind","init","for","model","modelable","transition","show","if",wt,"teleport"];function Ln(e,t){let r=J.indexOf(e.type)===-1?wt:e.type,n=J.indexOf(t.type)===-1?wt:t.type;return J.indexOf(r)-J.indexOf(n)}var St=[],At=!1;function ne(e=()=>{}){return queueMicrotask(()=>{At||setTimeout(()=>{je()})}),new Promise(t=>{St.push(()=>{e(),t()})})}function je(){for(At=!1;St.length;)St.shift()()}function br(){At=!0}function me(e,t){return Array.isArray(t)?wr(e,t.join(" ")):typeof t=="object"&&t!==null?$n(e,t):typeof t=="function"?me(e,t()):wr(e,t)}function wr(e,t){let r=o=>o.split(" ").filter(Boolean),n=o=>o.split(" ").filter(s=>!e.classList.contains(s)).filter(Boolean),i=o=>(e.classList.add(...o),()=>{e.classList.remove(...o)});return t=t===!0?t="":t||"",i(n(t))}function $n(e,t){let r=a=>a.split(" ").filter(Boolean),n=Object.entries(t).flatMap(([a,c])=>c?r(a):!1).filter(Boolean),i=Object.entries(t).flatMap(([a,c])=>c?!1:r(a)).filter(Boolean),o=[],s=[];return i.forEach(a=>{e.classList.contains(a)&&(e.classList.remove(a),s.push(a))}),n.forEach(a=>{e.classList.contains(a)||(e.classList.add(a),o.push(a))}),()=>{s.forEach(a=>e.classList.add(a)),o.forEach(a=>e.classList.remove(a))}}function Y(e,t){return typeof t=="object"&&t!==null?jn(e,t):Fn(e,t)}function jn(e,t){let r={};return Object.entries(t).forEach(([n,i])=>{r[n]=e.style[n],n.startsWith("--")||(n=Bn(n)),e.style.setProperty(n,i)}),setTimeout(()=>{e.style.length===0&&e.removeAttribute("style")}),()=>{Y(e,r)}}function Fn(e,t){let r=e.getAttribute("style",t);return e.setAttribute("style",t),()=>{e.setAttribute("style",r||"")}}function Bn(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function _e(e,t=()=>{}){let r=!1;return function(){r?t.apply(this,arguments):(r=!0,e.apply(this,arguments))}}d("transition",(e,{value:t,modifiers:r,expression:n},{evaluate:i})=>{typeof n=="function"&&(n=i(n)),n!==!1&&(!n||typeof n=="boolean"?Kn(e,r,t):zn(e,n,t))});function zn(e,t,r){Er(e,me,""),{enter:i=>{e._x_transition.enter.during=i},"enter-start":i=>{e._x_transition.enter.start=i},"enter-end":i=>{e._x_transition.enter.end=i},leave:i=>{e._x_transition.leave.during=i},"leave-start":i=>{e._x_transition.leave.start=i},"leave-end":i=>{e._x_transition.leave.end=i}}[r](t)}function Kn(e,t,r){Er(e,Y);let n=!t.includes("in")&&!t.includes("out")&&!r,i=n||t.includes("in")||["enter"].includes(r),o=n||t.includes("out")||["leave"].includes(r);t.includes("in")&&!n&&(t=t.filter((g,b)=>b<t.indexOf("out"))),t.includes("out")&&!n&&(t=t.filter((g,b)=>b>t.indexOf("out")));let s=!t.includes("opacity")&&!t.includes("scale"),a=s||t.includes("opacity"),c=s||t.includes("scale"),l=a?0:1,u=c?he(t,"scale",95)/100:1,p=he(t,"delay",0)/1e3,m=he(t,"origin","center"),w="opacity, transform",$=he(t,"duration",150)/1e3,Ee=he(t,"duration",75)/1e3,f="cubic-bezier(0.4, 0.0, 0.2, 1)";i&&(e._x_transition.enter.during={transformOrigin:m,transitionDelay:`${p}s`,transitionProperty:w,transitionDuration:`${$}s`,transitionTimingFunction:f},e._x_transition.enter.start={opacity:l,transform:`scale(${u})`},e._x_transition.enter.end={opacity:1,transform:"scale(1)"}),o&&(e._x_transition.leave.during={transformOrigin:m,transitionDelay:`${p}s`,transitionProperty:w,transitionDuration:`${Ee}s`,transitionTimingFunction:f},e._x_transition.leave.start={opacity:1,transform:"scale(1)"},e._x_transition.leave.end={opacity:l,transform:`scale(${u})`})}function Er(e,t,r={}){e._x_transition||(e._x_transition={enter:{during:r,start:r,end:r},leave:{during:r,start:r,end:r},in(n=()=>{},i=()=>{}){Fe(e,t,{during:this.enter.during,start:this.enter.start,end:this.enter.end},n,i)},out(n=()=>{},i=()=>{}){Fe(e,t,{during:this.leave.during,start:this.leave.start,end:this.leave.end},n,i)}})}window.Element.prototype._x_toggleAndCascadeWithTransitions=function(e,t,r,n){let i=document.visibilityState==="visible"?requestAnimationFrame:setTimeout,o=()=>i(r);if(t){e._x_transition&&(e._x_transition.enter||e._x_transition.leave)?e._x_transition.enter&&(Object.entries(e._x_transition.enter.during).length||Object.entries(e._x_transition.enter.start).length||Object.entries(e._x_transition.enter.end).length)?e._x_transition.in(r):o():e._x_transition?e._x_transition.in(r):o();return}e._x_hidePromise=e._x_transition?new Promise((s,a)=>{e._x_transition.out(()=>{},()=>s(n)),e._x_transitioning&&e._x_transitioning.beforeCancel(()=>a({isFromCancelledTransition:!0}))}):Promise.resolve(n),queueMicrotask(()=>{let s=vr(e);s?(s._x_hideChildren||(s._x_hideChildren=[]),s._x_hideChildren.push(e)):i(()=>{let a=c=>{let l=Promise.all([c._x_hidePromise,...(c._x_hideChildren||[]).map(a)]).then(([u])=>u());return delete c._x_hidePromise,delete c._x_hideChildren,l};a(e).catch(c=>{if(!c.isFromCancelledTransition)throw c})})})};function vr(e){let t=e.parentNode;if(t)return t._x_hidePromise?t:vr(t)}function Fe(e,t,{during:r,start:n,end:i}={},o=()=>{},s=()=>{}){if(e._x_transitioning&&e._x_transitioning.cancel(),Object.keys(r).length===0&&Object.keys(n).length===0&&Object.keys(i).length===0){o(),s();return}let a,c,l;Hn(e,{start(){a=t(e,n)},during(){c=t(e,r)},before:o,end(){a(),l=t(e,i)},after:s,cleanup(){c(),l()}})}function Hn(e,t){let r,n,i,o=_e(()=>{_(()=>{r=!0,n||t.before(),i||(t.end(),je()),t.after(),e.isConnected&&t.cleanup(),delete e._x_transitioning})});e._x_transitioning={beforeCancels:[],beforeCancel(s){this.beforeCancels.push(s)},cancel:_e(function(){for(;this.beforeCancels.length;)this.beforeCancels.shift()();o()}),finish:o},_(()=>{t.start(),t.during()}),br(),requestAnimationFrame(()=>{if(r)return;let s=Number(getComputedStyle(e).transitionDuration.replace(/,.*/,"").replace("s",""))*1e3,a=Number(getComputedStyle(e).transitionDelay.replace(/,.*/,"").replace("s",""))*1e3;s===0&&(s=Number(getComputedStyle(e).animationDuration.replace("s",""))*1e3),_(()=>{t.before()}),n=!0,requestAnimationFrame(()=>{r||(_(()=>{t.end()}),je(),setTimeout(e._x_transitioning.finish,s+a),i=!0)})})}function he(e,t,r){if(e.indexOf(t)===-1)return r;let n=e[e.indexOf(t)+1];if(!n||t==="scale"&&isNaN(n))return r;if(t==="duration"||t==="delay"){let i=n.match(/([0-9]+)ms/);if(i)return i[1]}return t==="origin"&&["top","right","left","center","bottom"].includes(e[e.indexOf(t)+2])?[n,e[e.indexOf(t)+2]].join(" "):n}var I=!1;function A(e,t=()=>{}){return(...r)=>I?t(...r):e(...r)}function Sr(e){return(...t)=>I&&e(...t)}var Ar=[];function K(e){Ar.push(e)}function Or(e,t){Ar.forEach(r=>r(e,t)),I=!0,Tr(()=>{S(t,(r,n)=>{n(r,()=>{})})}),I=!1}var Be=!1;function Cr(e,t){t._x_dataStack||(t._x_dataStack=e._x_dataStack),I=!0,Be=!0,Tr(()=>{Vn(t)}),I=!1,Be=!1}function Vn(e){let t=!1;S(e,(n,i)=>{C(n,(o,s)=>{if(t&&Qt(o))return s();t=!0,i(o,s)})})}function Tr(e){let t=D;at((r,n)=>{let i=t(r);return L(i),()=>{}}),e(),at(t)}function ge(e,t,r,n=[]){switch(e._x_bindings||(e._x_bindings=R({})),e._x_bindings[t]=r,t=n.includes("camel")?Zn(t):t,t){case"value":qn(e,r);break;case"style":Wn(e,r);break;case"class":Un(e,r);break;case"selected":case"checked":Gn(e,t,r);break;default:Mr(e,t,r);break}}function qn(e,t){if(e.type==="radio")e.attributes.value===void 0&&(e.value=t),window.fromModel&&(typeof t=="boolean"?e.checked=xe(e.value)===t:e.checked=Rr(e.value,t));else if(e.type==="checkbox")Number.isInteger(t)?e.value=t:!Array.isArray(t)&&typeof t!="boolean"&&![null,void 0].includes(t)?e.value=String(t):Array.isArray(t)?e.checked=t.some(r=>Rr(r,e.value)):e.checked=!!t;else if(e.tagName==="SELECT")Xn(e,t);else{if(e.value===t)return;e.value=t===void 0?"":t}}function Un(e,t){e._x_undoAddedClasses&&e._x_undoAddedClasses(),e._x_undoAddedClasses=me(e,t)}function Wn(e,t){e._x_undoAddedStyles&&e._x_undoAddedStyles(),e._x_undoAddedStyles=Y(e,t)}function Gn(e,t,r){Mr(e,t,r),Yn(e,t,r)}function Mr(e,t,r){[null,void 0,!1].includes(r)&&Qn(t)?e.removeAttribute(t):(Nr(t)&&(r=t),Jn(e,t,r))}function Jn(e,t,r){e.getAttribute(t)!=r&&e.setAttribute(t,r)}function Yn(e,t,r){e[t]!==r&&(e[t]=r)}function Xn(e,t){let r=[].concat(t).map(n=>n+"");Array.from(e.options).forEach(n=>{n.selected=r.includes(n.value)})}function Zn(e){return e.toLowerCase().replace(/-(\w)/g,(t,r)=>r.toUpperCase())}function Rr(e,t){return e==t}function xe(e){return[1,"1","true","on","yes",!0].includes(e)?!0:[0,"0","false","off","no",!1].includes(e)?!1:e?Boolean(e):null}function Nr(e){return["disabled","checked","required","readonly","hidden","open","selected","autofocus","itemscope","multiple","novalidate","allowfullscreen","allowpaymentrequest","formnovalidate","autoplay","controls","loop","muted","playsinline","default","ismap","reversed","async","defer","nomodule"].includes(e)}function Qn(e){return!["aria-pressed","aria-checked","aria-expanded","aria-selected"].includes(e)}function Dr(e,t,r){return e._x_bindings&&e._x_bindings[t]!==void 0?e._x_bindings[t]:Ir(e,t,r)}function Pr(e,t,r,n=!0){if(e._x_bindings&&e._x_bindings[t]!==void 0)return e._x_bindings[t];if(e._x_inlineBindings&&e._x_inlineBindings[t]!==void 0){let i=e._x_inlineBindings[t];return i.extract=n,ke(()=>M(e,i.expression))}return Ir(e,t,r)}function Ir(e,t,r){let n=e.getAttribute(t);return n===null?typeof r=="function"?r():r:n===""?!0:Nr(t)?!![t,"true"].includes(n):n}function ze(e,t){var r;return function(){var n=this,i=arguments,o=function(){r=null,e.apply(n,i)};clearTimeout(r),r=setTimeout(o,t)}}function Ke(e,t){let r;return function(){let n=this,i=arguments;r||(e.apply(n,i),r=!0,setTimeout(()=>r=!1,t))}}function He({get:e,set:t},{get:r,set:n}){let i=!0,o,s,a=D(()=>{let c=e(),l=r();if(i)n(Ot(c)),i=!1;else{let u=JSON.stringify(c),p=JSON.stringify(l);u!==o?n(Ot(c)):u!==p&&t(Ot(l))}o=JSON.stringify(e()),s=JSON.stringify(r())});return()=>{L(a)}}function Ot(e){return typeof e=="object"?JSON.parse(JSON.stringify(e)):e}function kr(e){(Array.isArray(e)?e:[e]).forEach(r=>r(z))}var X={},Lr=!1;function $r(e,t){if(Lr||(X=R(X),Lr=!0),t===void 0)return X[e];X[e]=t,typeof t=="object"&&t!==null&&t.hasOwnProperty("init")&&typeof t.init=="function"&&X[e].init(),Ne(X[e])}function jr(){return X}var Fr={};function Br(e,t){let r=typeof t!="function"?()=>t:t;return e instanceof Element?Ct(e,r()):(Fr[e]=r,()=>{})}function zr(e){return Object.entries(Fr).forEach(([t,r])=>{Object.defineProperty(e,t,{get(){return(...n)=>r(...n)}})}),e}function Ct(e,t,r){let n=[];for(;n.length;)n.pop()();let i=Object.entries(t).map(([s,a])=>({name:s,value:a})),o=vt(i);return i=i.map(s=>o.find(a=>a.name===s.name)?{name:`x-bind:${s.name}`,value:`"${s.value}"`}:s),ue(e,i,r).map(s=>{n.push(s.runCleanups),s()}),()=>{for(;n.length;)n.pop()()}}var Kr={};function Hr(e,t){Kr[e]=t}function Vr(e,t){return Object.entries(Kr).forEach(([r,n])=>{Object.defineProperty(e,r,{get(){return(...i)=>n.bind(t)(...i)},enumerable:!1})}),e}var ei={get reactive(){return R},get release(){return L},get effect(){return D},get raw(){return st},version:"3.13.7",flushAndStopDeferringMutations:lr,dontAutoEvaluateFunctions:ke,disableEffectScheduling:qt,startObservingMutations:le,stopObservingMutations:dt,setReactivityEngine:Ut,onAttributeRemoved:Re,onAttributesAdded:Ce,closestDataStack:F,skipDuringClone:A,onlyDuringClone:Sr,addRootSelector:Ae,addInitSelector:Oe,interceptClone:K,addScopeToNode:P,deferMutations:cr,mapAttributes:re,evaluateLater:x,interceptInit:tr,setEvaluator:pr,mergeProxies:B,extractProp:Pr,findClosest:j,onElRemoved:ee,closestRoot:G,destroyTree:ce,interceptor:De,transition:Fe,setStyles:Y,mutateDom:_,directive:d,entangle:He,throttle:Ke,debounce:ze,evaluate:M,initTree:S,nextTick:ne,prefixed:T,prefix:mr,plugin:kr,magic:y,store:$r,start:Jt,clone:Cr,cloneNode:Or,bound:Dr,$data:Me,watch:Se,walk:C,data:Hr,bind:Br},z=ei;function Tt(e,t){let r=Object.create(null),n=e.split(",");for(let i=0;i<n.length;i++)r[n[i]]=!0;return t?i=>!!r[i.toLowerCase()]:i=>!!r[i]}var ti="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly";var Ts=Tt(ti+",async,autofocus,autoplay,controls,default,defer,disabled,hidden,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected");var qr=Object.freeze({}),Rs=Object.freeze([]);var ri=Object.prototype.hasOwnProperty,ye=(e,t)=>ri.call(e,t),H=Array.isArray,ie=e=>Ur(e)==="[object Map]";var ni=e=>typeof e=="string",Ve=e=>typeof e=="symbol",be=e=>e!==null&&typeof e=="object";var ii=Object.prototype.toString,Ur=e=>ii.call(e),Rt=e=>Ur(e).slice(8,-1);var qe=e=>ni(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e;var Ue=e=>{let t=Object.create(null);return r=>t[r]||(t[r]=e(r))},oi=/-(\w)/g,Ms=Ue(e=>e.replace(oi,(t,r)=>r?r.toUpperCase():"")),si=/\B([A-Z])/g,Ns=Ue(e=>e.replace(si,"-$1").toLowerCase()),Mt=Ue(e=>e.charAt(0).toUpperCase()+e.slice(1)),Ds=Ue(e=>e?`on${Mt(e)}`:""),Nt=(e,t)=>e!==t&&(e===e||t===t);var Dt=new WeakMap,we=[],k,Z=Symbol("iterate"),Pt=Symbol("Map key iterate");function ai(e){return e&&e._isEffect===!0}function Zr(e,t=qr){ai(e)&&(e=e.raw);let r=li(e,t);return t.lazy||r(),r}function Qr(e){e.active&&(en(e),e.options.onStop&&e.options.onStop(),e.active=!1)}var ci=0;function li(e,t){let r=function(){if(!r.active)return e();if(!we.includes(r)){en(r);try{return fi(),we.push(r),k=r,e()}finally{we.pop(),tn(),k=we[we.length-1]}}};return r.id=ci++,r.allowRecurse=!!t.allowRecurse,r._isEffect=!0,r.active=!0,r.raw=e,r.deps=[],r.options=t,r}function en(e){let{deps:t}=e;if(t.length){for(let r=0;r<t.length;r++)t[r].delete(e);t.length=0}}var oe=!0,kt=[];function ui(){kt.push(oe),oe=!1}function fi(){kt.push(oe),oe=!0}function tn(){let e=kt.pop();oe=e===void 0?!0:e}function N(e,t,r){if(!oe||k===void 0)return;let n=Dt.get(e);n||Dt.set(e,n=new Map);let i=n.get(r);i||n.set(r,i=new Set),i.has(k)||(i.add(k),k.deps.push(i),k.options.onTrack&&k.options.onTrack({effect:k,target:e,type:t,key:r}))}function q(e,t,r,n,i,o){let s=Dt.get(e);if(!s)return;let a=new Set,c=u=>{u&&u.forEach(p=>{(p!==k||p.allowRecurse)&&a.add(p)})};if(t==="clear")s.forEach(c);else if(r==="length"&&H(e))s.forEach((u,p)=>{(p==="length"||p>=n)&&c(u)});else switch(r!==void 0&&c(s.get(r)),t){case"add":H(e)?qe(r)&&c(s.get("length")):(c(s.get(Z)),ie(e)&&c(s.get(Pt)));break;case"delete":H(e)||(c(s.get(Z)),ie(e)&&c(s.get(Pt)));break;case"set":ie(e)&&c(s.get(Z));break}let l=u=>{u.options.onTrigger&&u.options.onTrigger({effect:u,target:e,key:r,type:t,newValue:n,oldValue:i,oldTarget:o}),u.options.scheduler?u.options.scheduler(u):u()};a.forEach(l)}var di=Tt("__proto__,__v_isRef,__isVue"),rn=new Set(Object.getOwnPropertyNames(Symbol).map(e=>Symbol[e]).filter(Ve)),pi=nn();var mi=nn(!0);var Wr=_i();function _i(){let e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...r){let n=h(this);for(let o=0,s=this.length;o<s;o++)N(n,"get",o+"");let i=n[t](...r);return i===-1||i===!1?n[t](...r.map(h)):i}}),["push","pop","shift","unshift","splice"].forEach(t=>{e[t]=function(...r){ui();let n=h(this)[t].apply(this,r);return tn(),n}}),e}function nn(e=!1,t=!1){return function(n,i,o){if(i==="__v_isReactive")return!e;if(i==="__v_isReadonly")return e;if(i==="__v_raw"&&o===(e?t?Ni:cn:t?Mi:an).get(n))return n;let s=H(n);if(!e&&s&&ye(Wr,i))return Reflect.get(Wr,i,o);let a=Reflect.get(n,i,o);return(Ve(i)?rn.has(i):di(i))||(e||N(n,"get",i),t)?a:It(a)?!s||!qe(i)?a.value:a:be(a)?e?ln(a):Qe(a):a}}var hi=gi();function gi(e=!1){return function(r,n,i,o){let s=r[n];if(!e&&(i=h(i),s=h(s),!H(r)&&It(s)&&!It(i)))return s.value=i,!0;let a=H(r)&&qe(n)?Number(n)<r.length:ye(r,n),c=Reflect.set(r,n,i,o);return r===h(o)&&(a?Nt(i,s)&&q(r,"set",n,i,s):q(r,"add",n,i)),c}}function xi(e,t){let r=ye(e,t),n=e[t],i=Reflect.deleteProperty(e,t);return i&&r&&q(e,"delete",t,void 0,n),i}function yi(e,t){let r=Reflect.has(e,t);return(!Ve(t)||!rn.has(t))&&N(e,"has",t),r}function bi(e){return N(e,"iterate",H(e)?"length":Z),Reflect.ownKeys(e)}var wi={get:pi,set:hi,deleteProperty:xi,has:yi,ownKeys:bi},Ei={get:mi,set(e,t){return console.warn(`Set operation on key "${String(t)}" failed: target is readonly.`,e),!0},deleteProperty(e,t){return console.warn(`Delete operation on key "${String(t)}" failed: target is readonly.`,e),!0}};var Lt=e=>be(e)?Qe(e):e,$t=e=>be(e)?ln(e):e,jt=e=>e,Ze=e=>Reflect.getPrototypeOf(e);function We(e,t,r=!1,n=!1){e=e.__v_raw;let i=h(e),o=h(t);t!==o&&!r&&N(i,"get",t),!r&&N(i,"get",o);let{has:s}=Ze(i),a=n?jt:r?$t:Lt;if(s.call(i,t))return a(e.get(t));if(s.call(i,o))return a(e.get(o));e!==i&&e.get(t)}function Ge(e,t=!1){let r=this.__v_raw,n=h(r),i=h(e);return e!==i&&!t&&N(n,"has",e),!t&&N(n,"has",i),e===i?r.has(e):r.has(e)||r.has(i)}function Je(e,t=!1){return e=e.__v_raw,!t&&N(h(e),"iterate",Z),Reflect.get(e,"size",e)}function Gr(e){e=h(e);let t=h(this);return Ze(t).has.call(t,e)||(t.add(e),q(t,"add",e,e)),this}function Jr(e,t){t=h(t);let r=h(this),{has:n,get:i}=Ze(r),o=n.call(r,e);o?sn(r,n,e):(e=h(e),o=n.call(r,e));let s=i.call(r,e);return r.set(e,t),o?Nt(t,s)&&q(r,"set",e,t,s):q(r,"add",e,t),this}function Yr(e){let t=h(this),{has:r,get:n}=Ze(t),i=r.call(t,e);i?sn(t,r,e):(e=h(e),i=r.call(t,e));let o=n?n.call(t,e):void 0,s=t.delete(e);return i&&q(t,"delete",e,void 0,o),s}function Xr(){let e=h(this),t=e.size!==0,r=ie(e)?new Map(e):new Set(e),n=e.clear();return t&&q(e,"clear",void 0,void 0,r),n}function Ye(e,t){return function(n,i){let o=this,s=o.__v_raw,a=h(s),c=t?jt:e?$t:Lt;return!e&&N(a,"iterate",Z),s.forEach((l,u)=>n.call(i,c(l),c(u),o))}}function Xe(e,t,r){return function(...n){let i=this.__v_raw,o=h(i),s=ie(o),a=e==="entries"||e===Symbol.iterator&&s,c=e==="keys"&&s,l=i[e](...n),u=r?jt:t?$t:Lt;return!t&&N(o,"iterate",c?Pt:Z),{next(){let{value:p,done:m}=l.next();return m?{value:p,done:m}:{value:a?[u(p[0]),u(p[1])]:u(p),done:m}},[Symbol.iterator](){return this}}}}function V(e){return function(...t){{let r=t[0]?`on key "${t[0]}" `:"";console.warn(`${Mt(e)} operation ${r}failed: target is readonly.`,h(this))}return e==="delete"?!1:this}}function vi(){let e={get(o){return We(this,o)},get size(){return Je(this)},has:Ge,add:Gr,set:Jr,delete:Yr,clear:Xr,forEach:Ye(!1,!1)},t={get(o){return We(this,o,!1,!0)},get size(){return Je(this)},has:Ge,add:Gr,set:Jr,delete:Yr,clear:Xr,forEach:Ye(!1,!0)},r={get(o){return We(this,o,!0)},get size(){return Je(this,!0)},has(o){return Ge.call(this,o,!0)},add:V("add"),set:V("set"),delete:V("delete"),clear:V("clear"),forEach:Ye(!0,!1)},n={get(o){return We(this,o,!0,!0)},get size(){return Je(this,!0)},has(o){return Ge.call(this,o,!0)},add:V("add"),set:V("set"),delete:V("delete"),clear:V("clear"),forEach:Ye(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(o=>{e[o]=Xe(o,!1,!1),r[o]=Xe(o,!0,!1),t[o]=Xe(o,!1,!0),n[o]=Xe(o,!0,!0)}),[e,r,t,n]}var[Si,Ai,Oi,Ci]=vi();function on(e,t){let r=t?e?Ci:Oi:e?Ai:Si;return(n,i,o)=>i==="__v_isReactive"?!e:i==="__v_isReadonly"?e:i==="__v_raw"?n:Reflect.get(ye(r,i)&&i in n?r:n,i,o)}var Ti={get:on(!1,!1)};var Ri={get:on(!0,!1)};function sn(e,t,r){let n=h(r);if(n!==r&&t.call(e,n)){let i=Rt(e);console.warn(`Reactive ${i} contains both the raw and reactive versions of the same object${i==="Map"?" as keys":""}, which can lead to inconsistencies. Avoid differentiating between the raw and reactive versions of an object and only use the reactive version if possible.`)}}var an=new WeakMap,Mi=new WeakMap,cn=new WeakMap,Ni=new WeakMap;function Di(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function Pi(e){return e.__v_skip||!Object.isExtensible(e)?0:Di(Rt(e))}function Qe(e){return e&&e.__v_isReadonly?e:un(e,!1,wi,Ti,an)}function ln(e){return un(e,!0,Ei,Ri,cn)}function un(e,t,r,n,i){if(!be(e))return console.warn(`value cannot be made reactive: ${String(e)}`),e;if(e.__v_raw&&!(t&&e.__v_isReactive))return e;let o=i.get(e);if(o)return o;let s=Pi(e);if(s===0)return e;let a=new Proxy(e,s===2?n:r);return i.set(e,a),a}function h(e){return e&&h(e.__v_raw)||e}function It(e){return Boolean(e&&e.__v_isRef===!0)}y("nextTick",()=>ne);y("dispatch",e=>W.bind(W,e));y("watch",(e,{evaluateLater:t,cleanup:r})=>(n,i)=>{let o=t(n),a=Se(()=>{let c;return o(l=>c=l),c},i);r(a)});y("store",jr);y("data",e=>Me(e));y("root",e=>G(e));y("refs",e=>(e._x_refs_proxy||(e._x_refs_proxy=B(Ii(e))),e._x_refs_proxy));function Ii(e){let t=[];return j(e,r=>{r._x_refs&&t.push(r._x_refs)}),t}var Ft={};function Bt(e){return Ft[e]||(Ft[e]=0),++Ft[e]}function fn(e,t){return j(e,r=>{if(r._x_ids&&r._x_ids[t])return!0})}function dn(e,t){e._x_ids||(e._x_ids={}),e._x_ids[t]||(e._x_ids[t]=Bt(t))}y("id",(e,{cleanup:t})=>(r,n=null)=>{let i=`${r}${n?`-${n}`:""}`;return ki(e,i,t,()=>{let o=fn(e,r),s=o?o._x_ids[r]:Bt(r);return n?`${r}-${s}-${n}`:`${r}-${s}`})});K((e,t)=>{e._x_id&&(t._x_id=e._x_id)});function ki(e,t,r,n){if(e._x_id||(e._x_id={}),e._x_id[t])return e._x_id[t];let i=n();return e._x_id[t]=i,r(()=>{delete e._x_id[t]}),i}y("el",e=>e);pn("Focus","focus","focus");pn("Persist","persist","persist");function pn(e,t,r){y(t,n=>E(`You can't use [$${t}] without first installing the "${e}" plugin here: https://alpinejs.dev/plugins/${r}`,n))}d("modelable",(e,{expression:t},{effect:r,evaluateLater:n,cleanup:i})=>{let o=n(t),s=()=>{let u;return o(p=>u=p),u},a=n(`${t} = __placeholder`),c=u=>a(()=>{},{scope:{__placeholder:u}}),l=s();c(l),queueMicrotask(()=>{if(!e._x_model)return;e._x_removeModelListeners.default();let u=e._x_model.get,p=e._x_model.set,m=He({get(){return u()},set(w){p(w)}},{get(){return s()},set(w){c(w)}});i(m)})});d("teleport",(e,{modifiers:t,expression:r},{cleanup:n})=>{e.tagName.toLowerCase()!=="template"&&E("x-teleport can only be used on a <template> tag",e);let i=mn(r),o=e.content.cloneNode(!0).firstElementChild;e._x_teleport=o,o._x_teleportBack=e,e.setAttribute("data-teleport-template",!0),o.setAttribute("data-teleport-target",!0),e._x_forwardEvents&&e._x_forwardEvents.forEach(a=>{o.addEventListener(a,c=>{c.stopPropagation(),e.dispatchEvent(new c.constructor(c.type,c))})}),P(o,{},e);let s=(a,c,l)=>{l.includes("prepend")?c.parentNode.insertBefore(a,c):l.includes("append")?c.parentNode.insertBefore(a,c.nextSibling):c.appendChild(a)};_(()=>{s(o,i,t),S(o),o._x_ignore=!0}),e._x_teleportPutBack=()=>{let a=mn(r);_(()=>{s(e._x_teleport,a,t)})},n(()=>o.remove())});var Li=document.createElement("div");function mn(e){let t=A(()=>document.querySelector(e),()=>Li)();return t||E(`Cannot find x-teleport element for selector: "${e}"`),t}var _n=()=>{};_n.inline=(e,{modifiers:t},{cleanup:r})=>{t.includes("self")?e._x_ignoreSelf=!0:e._x_ignore=!0,r(()=>{t.includes("self")?delete e._x_ignoreSelf:delete e._x_ignore})};d("ignore",_n);d("effect",A((e,{expression:t},{effect:r})=>{r(x(e,t))}));function se(e,t,r,n){let i=e,o=c=>n(c),s={},a=(c,l)=>u=>l(c,u);if(r.includes("dot")&&(t=$i(t)),r.includes("camel")&&(t=ji(t)),r.includes("passive")&&(s.passive=!0),r.includes("capture")&&(s.capture=!0),r.includes("window")&&(i=window),r.includes("document")&&(i=document),r.includes("debounce")){let c=r[r.indexOf("debounce")+1]||"invalid-wait",l=et(c.split("ms")[0])?Number(c.split("ms")[0]):250;o=ze(o,l)}if(r.includes("throttle")){let c=r[r.indexOf("throttle")+1]||"invalid-wait",l=et(c.split("ms")[0])?Number(c.split("ms")[0]):250;o=Ke(o,l)}return r.includes("prevent")&&(o=a(o,(c,l)=>{l.preventDefault(),c(l)})),r.includes("stop")&&(o=a(o,(c,l)=>{l.stopPropagation(),c(l)})),r.includes("self")&&(o=a(o,(c,l)=>{l.target===e&&c(l)})),(r.includes("away")||r.includes("outside"))&&(i=document,o=a(o,(c,l)=>{e.contains(l.target)||l.target.isConnected!==!1&&(e.offsetWidth<1&&e.offsetHeight<1||e._x_isShown!==!1&&c(l))})),r.includes("once")&&(o=a(o,(c,l)=>{c(l),i.removeEventListener(t,o,s)})),o=a(o,(c,l)=>{Bi(t)&&zi(l,r)||c(l)}),i.addEventListener(t,o,s),()=>{i.removeEventListener(t,o,s)}}function $i(e){return e.replace(/-/g,".")}function ji(e){return e.toLowerCase().replace(/-(\w)/g,(t,r)=>r.toUpperCase())}function et(e){return!Array.isArray(e)&&!isNaN(e)}function Fi(e){return[" ","_"].includes(e)?e:e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[_\s]/,"-").toLowerCase()}function Bi(e){return["keydown","keyup"].includes(e)}function zi(e,t){let r=t.filter(o=>!["window","document","prevent","stop","once","capture"].includes(o));if(r.includes("debounce")){let o=r.indexOf("debounce");r.splice(o,et((r[o+1]||"invalid-wait").split("ms")[0])?2:1)}if(r.includes("throttle")){let o=r.indexOf("throttle");r.splice(o,et((r[o+1]||"invalid-wait").split("ms")[0])?2:1)}if(r.length===0||r.length===1&&hn(e.key).includes(r[0]))return!1;let i=["ctrl","shift","alt","meta","cmd","super"].filter(o=>r.includes(o));return r=r.filter(o=>!i.includes(o)),!(i.length>0&&i.filter(s=>((s==="cmd"||s==="super")&&(s="meta"),e[`${s}Key`])).length===i.length&&hn(e.key).includes(r[0]))}function hn(e){if(!e)return[];e=Fi(e);let t={ctrl:"control",slash:"/",space:" ",spacebar:" ",cmd:"meta",esc:"escape",up:"arrow-up",down:"arrow-down",left:"arrow-left",right:"arrow-right",period:".",equal:"=",minus:"-",underscore:"_"};return t[e]=e,Object.keys(t).map(r=>{if(t[r]===e)return r}).filter(r=>r)}d("model",(e,{modifiers:t,expression:r},{effect:n,cleanup:i})=>{let o=e;t.includes("parent")&&(o=e.parentNode);let s=x(o,r),a;typeof r=="string"?a=x(o,`${r} = __placeholder`):typeof r=="function"&&typeof r()=="string"?a=x(o,`${r()} = __placeholder`):a=()=>{};let c=()=>{let m;return s(w=>m=w),gn(m)?m.get():m},l=m=>{let w;s($=>w=$),gn(w)?w.set(m):a(()=>{},{scope:{__placeholder:m}})};typeof r=="string"&&e.type==="radio"&&_(()=>{e.hasAttribute("name")||e.setAttribute("name",r)});var u=e.tagName.toLowerCase()==="select"||["checkbox","radio"].includes(e.type)||t.includes("lazy")?"change":"input";let p=I?()=>{}:se(e,u,t,m=>{l(Ki(e,t,m,c()))});if(t.includes("fill")&&([void 0,null,""].includes(c())||e.type==="checkbox"&&Array.isArray(c()))&&e.dispatchEvent(new Event(u,{})),e._x_removeModelListeners||(e._x_removeModelListeners={}),e._x_removeModelListeners.default=p,i(()=>e._x_removeModelListeners.default()),e.form){let m=se(e.form,"reset",[],w=>{ne(()=>e._x_model&&e._x_model.set(e.value))});i(()=>m())}e._x_model={get(){return c()},set(m){l(m)}},e._x_forceModelUpdate=m=>{m===void 0&&typeof r=="string"&&r.match(/\./)&&(m=""),window.fromModel=!0,_(()=>ge(e,"value",m)),delete window.fromModel},n(()=>{let m=c();t.includes("unintrusive")&&document.activeElement.isSameNode(e)||e._x_forceModelUpdate(m)})});function Ki(e,t,r,n){return _(()=>{if(r instanceof CustomEvent&&r.detail!==void 0)return r.detail!==null&&r.detail!==void 0?r.detail:r.target.value;if(e.type==="checkbox")if(Array.isArray(n)){let i=null;return t.includes("number")?i=zt(r.target.value):t.includes("boolean")?i=xe(r.target.value):i=r.target.value,r.target.checked?n.concat([i]):n.filter(o=>!Hi(o,i))}else return r.target.checked;else return e.tagName.toLowerCase()==="select"&&e.multiple?t.includes("number")?Array.from(r.target.selectedOptions).map(i=>{let o=i.value||i.text;return zt(o)}):t.includes("boolean")?Array.from(r.target.selectedOptions).map(i=>{let o=i.value||i.text;return xe(o)}):Array.from(r.target.selectedOptions).map(i=>i.value||i.text):t.includes("number")?zt(r.target.value):t.includes("boolean")?xe(r.target.value):t.includes("trim")?r.target.value.trim():r.target.value})}function zt(e){let t=e?parseFloat(e):null;return Vi(t)?t:e}function Hi(e,t){return e==t}function Vi(e){return!Array.isArray(e)&&!isNaN(e)}function gn(e){return e!==null&&typeof e=="object"&&typeof e.get=="function"&&typeof e.set=="function"}d("cloak",e=>queueMicrotask(()=>_(()=>e.removeAttribute(T("cloak")))));Oe(()=>`[${T("init")}]`);d("init",A((e,{expression:t},{evaluate:r})=>typeof t=="string"?!!t.trim()&&r(t,{},!1):r(t,{},!1)));d("text",(e,{expression:t},{effect:r,evaluateLater:n})=>{let i=n(t);r(()=>{i(o=>{_(()=>{e.textContent=o})})})});d("html",(e,{expression:t},{effect:r,evaluateLater:n})=>{let i=n(t);r(()=>{i(o=>{_(()=>{e.innerHTML=o,e._x_ignoreSelf=!0,S(e),delete e._x_ignoreSelf})})})});re(Le(":",$e(T("bind:"))));var xn=(e,{value:t,modifiers:r,expression:n,original:i},{effect:o})=>{if(!t){let a={};zr(a),x(e,n)(l=>{Ct(e,l,i)},{scope:a});return}if(t==="key")return qi(e,n);if(e._x_inlineBindings&&e._x_inlineBindings[t]&&e._x_inlineBindings[t].extract)return;let s=x(e,n);o(()=>s(a=>{a===void 0&&typeof n=="string"&&n.match(/\./)&&(a=""),_(()=>ge(e,t,a,r))}))};xn.inline=(e,{value:t,modifiers:r,expression:n})=>{t&&(e._x_inlineBindings||(e._x_inlineBindings={}),e._x_inlineBindings[t]={expression:n,extract:!1})};d("bind",xn);function qi(e,t){e._x_keyExpression=t}Ae(()=>`[${T("data")}]`);d("data",(e,{expression:t},{cleanup:r})=>{if(Ui(e))return;t=t===""?"{}":t;let n={};de(n,e);let i={};Vr(i,n);let o=M(e,t,{scope:i});(o===void 0||o===!0)&&(o={}),de(o,e);let s=R(o);Ne(s);let a=P(e,s);s.init&&M(e,s.init),r(()=>{s.destroy&&M(e,s.destroy),a()})});K((e,t)=>{e._x_dataStack&&(t._x_dataStack=e._x_dataStack,t.setAttribute("data-has-alpine-state",!0))});function Ui(e){return I?Be?!0:e.hasAttribute("data-has-alpine-state"):!1}d("show",(e,{modifiers:t,expression:r},{effect:n})=>{let i=x(e,r);e._x_doHide||(e._x_doHide=()=>{_(()=>{e.style.setProperty("display","none",t.includes("important")?"important":void 0)})}),e._x_doShow||(e._x_doShow=()=>{_(()=>{e.style.length===1&&e.style.display==="none"?e.removeAttribute("style"):e.style.removeProperty("display")})});let o=()=>{e._x_doHide(),e._x_isShown=!1},s=()=>{e._x_doShow(),e._x_isShown=!0},a=()=>setTimeout(s),c=_e(p=>p?s():o(),p=>{typeof e._x_toggleAndCascadeWithTransitions=="function"?e._x_toggleAndCascadeWithTransitions(e,p,s,o):p?a():o()}),l,u=!0;n(()=>i(p=>{!u&&p===l||(t.includes("immediate")&&(p?a():o()),c(p),l=p,u=!1)}))});d("for",(e,{expression:t},{effect:r,cleanup:n})=>{let i=Gi(t),o=x(e,i.items),s=x(e,e._x_keyExpression||"index");e._x_prevKeys=[],e._x_lookup={},r(()=>Wi(e,i,o,s)),n(()=>{Object.values(e._x_lookup).forEach(a=>a.remove()),delete e._x_prevKeys,delete e._x_lookup})});function Wi(e,t,r,n){let i=s=>typeof s=="object"&&!Array.isArray(s),o=e;r(s=>{Ji(s)&&s>=0&&(s=Array.from(Array(s).keys(),f=>f+1)),s===void 0&&(s=[]);let a=e._x_lookup,c=e._x_prevKeys,l=[],u=[];if(i(s))s=Object.entries(s).map(([f,g])=>{let b=yn(t,g,f,s);n(v=>{u.includes(v)&&E("Duplicate key on x-for",e),u.push(v)},{scope:{index:f,...b}}),l.push(b)});else for(let f=0;f<s.length;f++){let g=yn(t,s[f],f,s);n(b=>{u.includes(b)&&E("Duplicate key on x-for",e),u.push(b)},{scope:{index:f,...g}}),l.push(g)}let p=[],m=[],w=[],$=[];for(let f=0;f<c.length;f++){let g=c[f];u.indexOf(g)===-1&&w.push(g)}c=c.filter(f=>!w.includes(f));let Ee="template";for(let f=0;f<u.length;f++){let g=u[f],b=c.indexOf(g);if(b===-1)c.splice(f,0,g),p.push([Ee,f]);else if(b!==f){let v=c.splice(f,1)[0],O=c.splice(b-1,1)[0];c.splice(f,0,O),c.splice(b,0,v),m.push([v,O])}else $.push(g);Ee=g}for(let f=0;f<w.length;f++){let g=w[f];a[g]._x_effects&&a[g]._x_effects.forEach(ve),a[g].remove(),a[g]=null,delete a[g]}for(let f=0;f<m.length;f++){let[g,b]=m[f],v=a[g],O=a[b],Q=document.createElement("div");_(()=>{O||E('x-for ":key" is undefined or invalid',o,b,a),O.after(Q),v.after(O),O._x_currentIfEl&&O.after(O._x_currentIfEl),Q.before(v),v._x_currentIfEl&&v.after(v._x_currentIfEl),Q.remove()}),O._x_refreshXForScope(l[u.indexOf(b)])}for(let f=0;f<p.length;f++){let[g,b]=p[f],v=g==="template"?o:a[g];v._x_currentIfEl&&(v=v._x_currentIfEl);let O=l[b],Q=u[b],ae=document.importNode(o.content,!0).firstElementChild,Ht=R(O);P(ae,Ht,o),ae._x_refreshXForScope=wn=>{Object.entries(wn).forEach(([En,vn])=>{Ht[En]=vn})},_(()=>{v.after(ae),A(()=>S(ae))()}),typeof Q=="object"&&E("x-for key cannot be an object, it must be a string or an integer",o),a[Q]=ae}for(let f=0;f<$.length;f++)a[$[f]]._x_refreshXForScope(l[u.indexOf($[f])]);o._x_prevKeys=u})}function Gi(e){let t=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,r=/^\s*\(|\)\s*$/g,n=/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/,i=e.match(n);if(!i)return;let o={};o.items=i[2].trim();let s=i[1].replace(r,"").trim(),a=s.match(t);return a?(o.item=s.replace(t,"").trim(),o.index=a[1].trim(),a[2]&&(o.collection=a[2].trim())):o.item=s,o}function yn(e,t,r,n){let i={};return/^\[.*\]$/.test(e.item)&&Array.isArray(t)?e.item.replace("[","").replace("]","").split(",").map(s=>s.trim()).forEach((s,a)=>{i[s]=t[a]}):/^\{.*\}$/.test(e.item)&&!Array.isArray(t)&&typeof t=="object"?e.item.replace("{","").replace("}","").split(",").map(s=>s.trim()).forEach(s=>{i[s]=t[s]}):i[e.item]=t,e.index&&(i[e.index]=r),e.collection&&(i[e.collection]=n),i}function Ji(e){return!Array.isArray(e)&&!isNaN(e)}function bn(){}bn.inline=(e,{expression:t},{cleanup:r})=>{let n=G(e);n._x_refs||(n._x_refs={}),n._x_refs[t]=e,r(()=>delete n._x_refs[t])};d("ref",bn);d("if",(e,{expression:t},{effect:r,cleanup:n})=>{e.tagName.toLowerCase()!=="template"&&E("x-if can only be used on a <template> tag",e);let i=x(e,t),o=()=>{if(e._x_currentIfEl)return e._x_currentIfEl;let a=e.content.cloneNode(!0).firstElementChild;return P(a,{},e),_(()=>{e.after(a),A(()=>S(a))()}),e._x_currentIfEl=a,e._x_undoIf=()=>{C(a,c=>{c._x_effects&&c._x_effects.forEach(ve)}),a.remove(),delete e._x_currentIfEl},a},s=()=>{e._x_undoIf&&(e._x_undoIf(),delete e._x_undoIf)};r(()=>i(a=>{a?o():s()})),n(()=>e._x_undoIf&&e._x_undoIf())});d("id",(e,{expression:t},{evaluate:r})=>{r(t).forEach(i=>dn(e,i))});K((e,t)=>{e._x_ids&&(t._x_ids=e._x_ids)});re(Le("@",$e(T("on:"))));d("on",A((e,{value:t,modifiers:r,expression:n},{cleanup:i})=>{let o=n?x(e,n):()=>{};e.tagName.toLowerCase()==="template"&&(e._x_forwardEvents||(e._x_forwardEvents=[]),e._x_forwardEvents.includes(t)||e._x_forwardEvents.push(t));let s=se(e,t,r,a=>{o(()=>{},{scope:{$event:a},params:[a]})});i(()=>s())}));tt("Collapse","collapse","collapse");tt("Intersect","intersect","intersect");tt("Focus","trap","focus");tt("Mask","mask","mask");function tt(e,t,r){d(t,n=>E(`You can't use [x-${t}] without first installing the "${e}" plugin here: https://alpinejs.dev/plugins/${r}`,n))}z.setEvaluator(xt);z.setReactivityEngine({reactive:Qe,effect:Zr,release:Qr,raw:h});var Kt=z;window.Alpine=Kt;queueMicrotask(()=>{Kt.start()});})();
diff --git a/public/scripts/htmx.js b/public/scripts/htmx.js
new file mode 100644
index 0000000..d68f3c6
--- /dev/null
+++ b/public/scripts/htmx.js
@@ -0,0 +1 @@
+(function(e,t){if(typeof define==="function"&&define.amd){define([],t)}else if(typeof module==="object"&&module.exports){module.exports=t()}else{e.htmx=e.htmx||t()}})(typeof self!=="undefined"?self:this,function(){return function(){"use strict";var Q={onLoad:B,process:zt,on:de,off:ge,trigger:ce,ajax:Nr,find:C,findAll:f,closest:v,values:function(e,t){var r=dr(e,t||"post");return r.values},remove:_,addClass:z,removeClass:n,toggleClass:$,takeClass:W,defineExtension:Ur,removeExtension:Fr,logAll:V,logNone:j,logger:null,config:{historyEnabled:true,historyCacheSize:10,refreshOnHistoryMiss:false,defaultSwapStyle:"innerHTML",defaultSwapDelay:0,defaultSettleDelay:20,includeIndicatorStyles:true,indicatorClass:"htmx-indicator",requestClass:"htmx-request",addedClass:"htmx-added",settlingClass:"htmx-settling",swappingClass:"htmx-swapping",allowEval:true,allowScriptTags:true,inlineScriptNonce:"",attributesToSettle:["class","style","width","height"],withCredentials:false,timeout:0,wsReconnectDelay:"full-jitter",wsBinaryType:"blob",disableSelector:"[hx-disable], [data-hx-disable]",useTemplateFragments:false,scrollBehavior:"smooth",defaultFocusScroll:false,getCacheBusterParam:false,globalViewTransitions:false,methodsThatUseUrlParams:["get"],selfRequestsOnly:false,ignoreTitle:false,scrollIntoViewOnBoost:true,triggerSpecsCache:null},parseInterval:d,_:t,createEventSource:function(e){return new EventSource(e,{withCredentials:true})},createWebSocket:function(e){var t=new WebSocket(e,[]);t.binaryType=Q.config.wsBinaryType;return t},version:"1.9.11"};var r={addTriggerHandler:Lt,bodyContains:se,canAccessLocalStorage:U,findThisElement:xe,filterValues:yr,hasAttribute:o,getAttributeValue:te,getClosestAttributeValue:ne,getClosestMatch:c,getExpressionVars:Hr,getHeaders:xr,getInputValues:dr,getInternalData:ae,getSwapSpecification:wr,getTriggerSpecs:it,getTarget:ye,makeFragment:l,mergeObjects:le,makeSettleInfo:T,oobSwap:Ee,querySelectorExt:ue,selectAndSwap:je,settleImmediately:nr,shouldCancel:ut,triggerEvent:ce,triggerErrorEvent:fe,withExtensions:R};var w=["get","post","put","delete","patch"];var i=w.map(function(e){return"[hx-"+e+"], [data-hx-"+e+"]"}).join(", ");var S=e("head"),q=e("title"),H=e("svg",true);function e(e,t=false){return new RegExp(`<${e}(\\s[^>]*>|>)([\\s\\S]*?)<\\/${e}>`,t?"gim":"im")}function d(e){if(e==undefined){return undefined}let t=NaN;if(e.slice(-2)=="ms"){t=parseFloat(e.slice(0,-2))}else if(e.slice(-1)=="s"){t=parseFloat(e.slice(0,-1))*1e3}else if(e.slice(-1)=="m"){t=parseFloat(e.slice(0,-1))*1e3*60}else{t=parseFloat(e)}return isNaN(t)?undefined:t}function ee(e,t){return e.getAttribute&&e.getAttribute(t)}function o(e,t){return e.hasAttribute&&(e.hasAttribute(t)||e.hasAttribute("data-"+t))}function te(e,t){return ee(e,t)||ee(e,"data-"+t)}function u(e){return e.parentElement}function re(){return document}function c(e,t){while(e&&!t(e)){e=u(e)}return e?e:null}function L(e,t,r){var n=te(t,r);var i=te(t,"hx-disinherit");if(e!==t&&i&&(i==="*"||i.split(" ").indexOf(r)>=0)){return"unset"}else{return n}}function ne(t,r){var n=null;c(t,function(e){return n=L(t,e,r)});if(n!=="unset"){return n}}function h(e,t){var r=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector;return r&&r.call(e,t)}function A(e){var t=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i;var r=t.exec(e);if(r){return r[1].toLowerCase()}else{return""}}function s(e,t){var r=new DOMParser;var n=r.parseFromString(e,"text/html");var i=n.body;while(t>0){t--;i=i.firstChild}if(i==null){i=re().createDocumentFragment()}return i}function N(e){return/<body/.test(e)}function l(e){var t=!N(e);var r=A(e);var n=e;if(r==="head"){n=n.replace(S,"")}if(Q.config.useTemplateFragments&&t){var i=s("<body><template>"+n+"</template></body>",0);var a=i.querySelector("template").content;if(Q.config.allowScriptTags){oe(a.querySelectorAll("script"),function(e){if(Q.config.inlineScriptNonce){e.nonce=Q.config.inlineScriptNonce}e.htmxExecuted=navigator.userAgent.indexOf("Firefox")===-1})}else{oe(a.querySelectorAll("script"),function(e){_(e)})}return a}switch(r){case"thead":case"tbody":case"tfoot":case"colgroup":case"caption":return s("<table>"+n+"</table>",1);case"col":return s("<table><colgroup>"+n+"</colgroup></table>",2);case"tr":return s("<table><tbody>"+n+"</tbody></table>",2);case"td":case"th":return s("<table><tbody><tr>"+n+"</tr></tbody></table>",3);case"script":case"style":return s("<div>"+n+"</div>",1);default:return s(n,0)}}function ie(e){if(e){e()}}function I(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"}function k(e){return I(e,"Function")}function P(e){return I(e,"Object")}function ae(e){var t="htmx-internal-data";var r=e[t];if(!r){r=e[t]={}}return r}function M(e){var t=[];if(e){for(var r=0;r<e.length;r++){t.push(e[r])}}return t}function oe(e,t){if(e){for(var r=0;r<e.length;r++){t(e[r])}}}function X(e){var t=e.getBoundingClientRect();var r=t.top;var n=t.bottom;return r<window.innerHeight&&n>=0}function se(e){if(e.getRootNode&&e.getRootNode()instanceof window.ShadowRoot){return re().body.contains(e.getRootNode().host)}else{return re().body.contains(e)}}function D(e){return e.trim().split(/\s+/)}function le(e,t){for(var r in t){if(t.hasOwnProperty(r)){e[r]=t[r]}}return e}function E(e){try{return JSON.parse(e)}catch(e){b(e);return null}}function U(){var e="htmx:localStorageTest";try{localStorage.setItem(e,e);localStorage.removeItem(e);return true}catch(e){return false}}function F(t){try{var e=new URL(t);if(e){t=e.pathname+e.search}if(!/^\/$/.test(t)){t=t.replace(/\/+$/,"")}return t}catch(e){return t}}function t(e){return Tr(re().body,function(){return eval(e)})}function B(t){var e=Q.on("htmx:load",function(e){t(e.detail.elt)});return e}function V(){Q.logger=function(e,t,r){if(console){console.log(t,e,r)}}}function j(){Q.logger=null}function C(e,t){if(t){return e.querySelector(t)}else{return C(re(),e)}}function f(e,t){if(t){return e.querySelectorAll(t)}else{return f(re(),e)}}function _(e,t){e=p(e);if(t){setTimeout(function(){_(e);e=null},t)}else{e.parentElement.removeChild(e)}}function z(e,t,r){e=p(e);if(r){setTimeout(function(){z(e,t);e=null},r)}else{e.classList&&e.classList.add(t)}}function n(e,t,r){e=p(e);if(r){setTimeout(function(){n(e,t);e=null},r)}else{if(e.classList){e.classList.remove(t);if(e.classList.length===0){e.removeAttribute("class")}}}}function $(e,t){e=p(e);e.classList.toggle(t)}function W(e,t){e=p(e);oe(e.parentElement.children,function(e){n(e,t)});z(e,t)}function v(e,t){e=p(e);if(e.closest){return e.closest(t)}else{do{if(e==null||h(e,t)){return e}}while(e=e&&u(e));return null}}function g(e,t){return e.substring(0,t.length)===t}function G(e,t){return e.substring(e.length-t.length)===t}function J(e){var t=e.trim();if(g(t,"<")&&G(t,"/>")){return t.substring(1,t.length-2)}else{return t}}function Z(e,t){if(t.indexOf("closest ")===0){return[v(e,J(t.substr(8)))]}else if(t.indexOf("find ")===0){return[C(e,J(t.substr(5)))]}else if(t==="next"){return[e.nextElementSibling]}else if(t.indexOf("next ")===0){return[K(e,J(t.substr(5)))]}else if(t==="previous"){return[e.previousElementSibling]}else if(t.indexOf("previous ")===0){return[Y(e,J(t.substr(9)))]}else if(t==="document"){return[document]}else if(t==="window"){return[window]}else if(t==="body"){return[document.body]}else{return re().querySelectorAll(J(t))}}var K=function(e,t){var r=re().querySelectorAll(t);for(var n=0;n<r.length;n++){var i=r[n];if(i.compareDocumentPosition(e)===Node.DOCUMENT_POSITION_PRECEDING){return i}}};var Y=function(e,t){var r=re().querySelectorAll(t);for(var n=r.length-1;n>=0;n--){var i=r[n];if(i.compareDocumentPosition(e)===Node.DOCUMENT_POSITION_FOLLOWING){return i}}};function ue(e,t){if(t){return Z(e,t)[0]}else{return Z(re().body,e)[0]}}function p(e){if(I(e,"String")){return C(e)}else{return e}}function ve(e,t,r){if(k(t)){return{target:re().body,event:e,listener:t}}else{return{target:p(e),event:t,listener:r}}}function de(t,r,n){jr(function(){var e=ve(t,r,n);e.target.addEventListener(e.event,e.listener)});var e=k(r);return e?r:n}function ge(t,r,n){jr(function(){var e=ve(t,r,n);e.target.removeEventListener(e.event,e.listener)});return k(r)?r:n}var pe=re().createElement("output");function me(e,t){var r=ne(e,t);if(r){if(r==="this"){return[xe(e,t)]}else{var n=Z(e,r);if(n.length===0){b('The selector "'+r+'" on '+t+" returned no matches!");return[pe]}else{return n}}}}function xe(e,t){return c(e,function(e){return te(e,t)!=null})}function ye(e){var t=ne(e,"hx-target");if(t){if(t==="this"){return xe(e,"hx-target")}else{return ue(e,t)}}else{var r=ae(e);if(r.boosted){return re().body}else{return e}}}function be(e){var t=Q.config.attributesToSettle;for(var r=0;r<t.length;r++){if(e===t[r]){return true}}return false}function we(t,r){oe(t.attributes,function(e){if(!r.hasAttribute(e.name)&&be(e.name)){t.removeAttribute(e.name)}});oe(r.attributes,function(e){if(be(e.name)){t.setAttribute(e.name,e.value)}})}function Se(e,t){var r=Br(t);for(var n=0;n<r.length;n++){var i=r[n];try{if(i.isInlineSwap(e)){return true}}catch(e){b(e)}}return e==="outerHTML"}function Ee(e,i,a){var t="#"+ee(i,"id");var o="outerHTML";if(e==="true"){}else if(e.indexOf(":")>0){o=e.substr(0,e.indexOf(":"));t=e.substr(e.indexOf(":")+1,e.length)}else{o=e}var r=re().querySelectorAll(t);if(r){oe(r,function(e){var t;var r=i.cloneNode(true);t=re().createDocumentFragment();t.appendChild(r);if(!Se(o,e)){t=r}var n={shouldSwap:true,target:e,fragment:t};if(!ce(e,"htmx:oobBeforeSwap",n))return;e=n.target;if(n["shouldSwap"]){Be(o,e,e,t,a)}oe(a.elts,function(e){ce(e,"htmx:oobAfterSwap",n)})});i.parentNode.removeChild(i)}else{i.parentNode.removeChild(i);fe(re().body,"htmx:oobErrorNoTarget",{content:i})}return e}function Ce(e,t,r){var n=ne(e,"hx-select-oob");if(n){var i=n.split(",");for(var a=0;a<i.length;a++){var o=i[a].split(":",2);var s=o[0].trim();if(s.indexOf("#")===0){s=s.substring(1)}var l=o[1]||"true";var u=t.querySelector("#"+s);if(u){Ee(l,u,r)}}}oe(f(t,"[hx-swap-oob], [data-hx-swap-oob]"),function(e){var t=te(e,"hx-swap-oob");if(t!=null){Ee(t,e,r)}})}function Re(e){oe(f(e,"[hx-preserve], [data-hx-preserve]"),function(e){var t=te(e,"id");var r=re().getElementById(t);if(r!=null){e.parentNode.replaceChild(r,e)}})}function Te(o,e,s){oe(e.querySelectorAll("[id]"),function(e){var t=ee(e,"id");if(t&&t.length>0){var r=t.replace("'","\\'");var n=e.tagName.replace(":","\\:");var i=o.querySelector(n+"[id='"+r+"']");if(i&&i!==o){var a=e.cloneNode();we(e,i);s.tasks.push(function(){we(e,a)})}}})}function Oe(e){return function(){n(e,Q.config.addedClass);zt(e);Nt(e);qe(e);ce(e,"htmx:load")}}function qe(e){var t="[autofocus]";var r=h(e,t)?e:e.querySelector(t);if(r!=null){r.focus()}}function a(e,t,r,n){Te(e,r,n);while(r.childNodes.length>0){var i=r.firstChild;z(i,Q.config.addedClass);e.insertBefore(i,t);if(i.nodeType!==Node.TEXT_NODE&&i.nodeType!==Node.COMMENT_NODE){n.tasks.push(Oe(i))}}}function He(e,t){var r=0;while(r<e.length){t=(t<<5)-t+e.charCodeAt(r++)|0}return t}function Le(e){var t=0;if(e.attributes){for(var r=0;r<e.attributes.length;r++){var n=e.attributes[r];if(n.value){t=He(n.name,t);t=He(n.value,t)}}}return t}function Ae(e){var t=ae(e);if(t.onHandlers){for(var r=0;r<t.onHandlers.length;r++){const n=t.onHandlers[r];e.removeEventListener(n.event,n.listener)}delete t.onHandlers}}function Ne(e){var t=ae(e);if(t.timeout){clearTimeout(t.timeout)}if(t.webSocket){t.webSocket.close()}if(t.sseEventSource){t.sseEventSource.close()}if(t.listenerInfos){oe(t.listenerInfos,function(e){if(e.on){e.on.removeEventListener(e.trigger,e.listener)}})}Ae(e);oe(Object.keys(t),function(e){delete t[e]})}function m(e){ce(e,"htmx:beforeCleanupElement");Ne(e);if(e.children){oe(e.children,function(e){m(e)})}}function Ie(t,e,r){if(t.tagName==="BODY"){return Ue(t,e,r)}else{var n;var i=t.previousSibling;a(u(t),t,e,r);if(i==null){n=u(t).firstChild}else{n=i.nextSibling}r.elts=r.elts.filter(function(e){return e!=t});while(n&&n!==t){if(n.nodeType===Node.ELEMENT_NODE){r.elts.push(n)}n=n.nextElementSibling}m(t);u(t).removeChild(t)}}function ke(e,t,r){return a(e,e.firstChild,t,r)}function Pe(e,t,r){return a(u(e),e,t,r)}function Me(e,t,r){return a(e,null,t,r)}function Xe(e,t,r){return a(u(e),e.nextSibling,t,r)}function De(e,t,r){m(e);return u(e).removeChild(e)}function Ue(e,t,r){var n=e.firstChild;a(e,n,t,r);if(n){while(n.nextSibling){m(n.nextSibling);e.removeChild(n.nextSibling)}m(n);e.removeChild(n)}}function Fe(e,t,r){var n=r||ne(e,"hx-select");if(n){var i=re().createDocumentFragment();oe(t.querySelectorAll(n),function(e){i.appendChild(e)});t=i}return t}function Be(e,t,r,n,i){switch(e){case"none":return;case"outerHTML":Ie(r,n,i);return;case"afterbegin":ke(r,n,i);return;case"beforebegin":Pe(r,n,i);return;case"beforeend":Me(r,n,i);return;case"afterend":Xe(r,n,i);return;case"delete":De(r,n,i);return;default:var a=Br(t);for(var o=0;o<a.length;o++){var s=a[o];try{var l=s.handleSwap(e,r,n,i);if(l){if(typeof l.length!=="undefined"){for(var u=0;u<l.length;u++){var f=l[u];if(f.nodeType!==Node.TEXT_NODE&&f.nodeType!==Node.COMMENT_NODE){i.tasks.push(Oe(f))}}}return}}catch(e){b(e)}}if(e==="innerHTML"){Ue(r,n,i)}else{Be(Q.config.defaultSwapStyle,t,r,n,i)}}}function Ve(e){if(e.indexOf("<title")>-1){var t=e.replace(H,"");var r=t.match(q);if(r){return r[2]}}}function je(e,t,r,n,i,a){i.title=Ve(n);var o=l(n);if(o){Ce(r,o,i);o=Fe(r,o,a);Re(o);return Be(e,r,t,o,i)}}function _e(e,t,r){var n=e.getResponseHeader(t);if(n.indexOf("{")===0){var i=E(n);for(var a in i){if(i.hasOwnProperty(a)){var o=i[a];if(!P(o)){o={value:o}}ce(r,a,o)}}}else{var s=n.split(",");for(var l=0;l<s.length;l++){ce(r,s[l].trim(),[])}}}var ze=/\s/;var x=/[\s,]/;var $e=/[_$a-zA-Z]/;var We=/[_$a-zA-Z0-9]/;var Ge=['"',"'","/"];var Je=/[^\s]/;var Ze=/[{(]/;var Ke=/[})]/;function Ye(e){var t=[];var r=0;while(r<e.length){if($e.exec(e.charAt(r))){var n=r;while(We.exec(e.charAt(r+1))){r++}t.push(e.substr(n,r-n+1))}else if(Ge.indexOf(e.charAt(r))!==-1){var i=e.charAt(r);var n=r;r++;while(r<e.length&&e.charAt(r)!==i){if(e.charAt(r)==="\\"){r++}r++}t.push(e.substr(n,r-n+1))}else{var a=e.charAt(r);t.push(a)}r++}return t}function Qe(e,t,r){return $e.exec(e.charAt(0))&&e!=="true"&&e!=="false"&&e!=="this"&&e!==r&&t!=="."}function et(e,t,r){if(t[0]==="["){t.shift();var n=1;var i=" return (function("+r+"){ return (";var a=null;while(t.length>0){var o=t[0];if(o==="]"){n--;if(n===0){if(a===null){i=i+"true"}t.shift();i+=")})";try{var s=Tr(e,function(){return Function(i)()},function(){return true});s.source=i;return s}catch(e){fe(re().body,"htmx:syntax:error",{error:e,source:i});return null}}}else if(o==="["){n++}if(Qe(o,a,r)){i+="(("+r+"."+o+") ? ("+r+"."+o+") : (window."+o+"))"}else{i=i+o}a=t.shift()}}}function y(e,t){var r="";while(e.length>0&&!t.test(e[0])){r+=e.shift()}return r}function tt(e){var t;if(e.length>0&&Ze.test(e[0])){e.shift();t=y(e,Ke).trim();e.shift()}else{t=y(e,x)}return t}var rt="input, textarea, select";function nt(e,t,r){var n=[];var i=Ye(t);do{y(i,Je);var a=i.length;var o=y(i,/[,\[\s]/);if(o!==""){if(o==="every"){var s={trigger:"every"};y(i,Je);s.pollInterval=d(y(i,/[,\[\s]/));y(i,Je);var l=et(e,i,"event");if(l){s.eventFilter=l}n.push(s)}else if(o.indexOf("sse:")===0){n.push({trigger:"sse",sseEvent:o.substr(4)})}else{var u={trigger:o};var l=et(e,i,"event");if(l){u.eventFilter=l}while(i.length>0&&i[0]!==","){y(i,Je);var f=i.shift();if(f==="changed"){u.changed=true}else if(f==="once"){u.once=true}else if(f==="consume"){u.consume=true}else if(f==="delay"&&i[0]===":"){i.shift();u.delay=d(y(i,x))}else if(f==="from"&&i[0]===":"){i.shift();if(Ze.test(i[0])){var c=tt(i)}else{var c=y(i,x);if(c==="closest"||c==="find"||c==="next"||c==="previous"){i.shift();var h=tt(i);if(h.length>0){c+=" "+h}}}u.from=c}else if(f==="target"&&i[0]===":"){i.shift();u.target=tt(i)}else if(f==="throttle"&&i[0]===":"){i.shift();u.throttle=d(y(i,x))}else if(f==="queue"&&i[0]===":"){i.shift();u.queue=y(i,x)}else if(f==="root"&&i[0]===":"){i.shift();u[f]=tt(i)}else if(f==="threshold"&&i[0]===":"){i.shift();u[f]=y(i,x)}else{fe(e,"htmx:syntax:error",{token:i.shift()})}}n.push(u)}}if(i.length===a){fe(e,"htmx:syntax:error",{token:i.shift()})}y(i,Je)}while(i[0]===","&&i.shift());if(r){r[t]=n}return n}function it(e){var t=te(e,"hx-trigger");var r=[];if(t){var n=Q.config.triggerSpecsCache;r=n&&n[t]||nt(e,t,n)}if(r.length>0){return r}else if(h(e,"form")){return[{trigger:"submit"}]}else if(h(e,'input[type="button"], input[type="submit"]')){return[{trigger:"click"}]}else if(h(e,rt)){return[{trigger:"change"}]}else{return[{trigger:"click"}]}}function at(e){ae(e).cancelled=true}function ot(e,t,r){var n=ae(e);n.timeout=setTimeout(function(){if(se(e)&&n.cancelled!==true){if(!ct(r,e,Wt("hx:poll:trigger",{triggerSpec:r,target:e}))){t(e)}ot(e,t,r)}},r.pollInterval)}function st(e){return location.hostname===e.hostname&&ee(e,"href")&&ee(e,"href").indexOf("#")!==0}function lt(t,r,e){if(t.tagName==="A"&&st(t)&&(t.target===""||t.target==="_self")||t.tagName==="FORM"){r.boosted=true;var n,i;if(t.tagName==="A"){n="get";i=ee(t,"href")}else{var a=ee(t,"method");n=a?a.toLowerCase():"get";if(n==="get"){}i=ee(t,"action")}e.forEach(function(e){ht(t,function(e,t){if(v(e,Q.config.disableSelector)){m(e);return}he(n,i,e,t)},r,e,true)})}}function ut(e,t){if(e.type==="submit"||e.type==="click"){if(t.tagName==="FORM"){return true}if(h(t,'input[type="submit"], button')&&v(t,"form")!==null){return true}if(t.tagName==="A"&&t.href&&(t.getAttribute("href")==="#"||t.getAttribute("href").indexOf("#")!==0)){return true}}return false}function ft(e,t){return ae(e).boosted&&e.tagName==="A"&&t.type==="click"&&(t.ctrlKey||t.metaKey)}function ct(e,t,r){var n=e.eventFilter;if(n){try{return n.call(t,r)!==true}catch(e){fe(re().body,"htmx:eventFilter:error",{error:e,source:n.source});return true}}return false}function ht(a,o,e,s,l){var u=ae(a);var t;if(s.from){t=Z(a,s.from)}else{t=[a]}if(s.changed){t.forEach(function(e){var t=ae(e);t.lastValue=e.value})}oe(t,function(n){var i=function(e){if(!se(a)){n.removeEventListener(s.trigger,i);return}if(ft(a,e)){return}if(l||ut(e,a)){e.preventDefault()}if(ct(s,a,e)){return}var t=ae(e);t.triggerSpec=s;if(t.handledFor==null){t.handledFor=[]}if(t.handledFor.indexOf(a)<0){t.handledFor.push(a);if(s.consume){e.stopPropagation()}if(s.target&&e.target){if(!h(e.target,s.target)){return}}if(s.once){if(u.triggeredOnce){return}else{u.triggeredOnce=true}}if(s.changed){var r=ae(n);if(r.lastValue===n.value){return}r.lastValue=n.value}if(u.delayed){clearTimeout(u.delayed)}if(u.throttle){return}if(s.throttle>0){if(!u.throttle){o(a,e);u.throttle=setTimeout(function(){u.throttle=null},s.throttle)}}else if(s.delay>0){u.delayed=setTimeout(function(){o(a,e)},s.delay)}else{ce(a,"htmx:trigger");o(a,e)}}};if(e.listenerInfos==null){e.listenerInfos=[]}e.listenerInfos.push({trigger:s.trigger,listener:i,on:n});n.addEventListener(s.trigger,i)})}var vt=false;var dt=null;function gt(){if(!dt){dt=function(){vt=true};window.addEventListener("scroll",dt);setInterval(function(){if(vt){vt=false;oe(re().querySelectorAll("[hx-trigger='revealed'],[data-hx-trigger='revealed']"),function(e){pt(e)})}},200)}}function pt(t){if(!o(t,"data-hx-revealed")&&X(t)){t.setAttribute("data-hx-revealed","true");var e=ae(t);if(e.initHash){ce(t,"revealed")}else{t.addEventListener("htmx:afterProcessNode",function(e){ce(t,"revealed")},{once:true})}}}function mt(e,t,r){var n=D(r);for(var i=0;i<n.length;i++){var a=n[i].split(/:(.+)/);if(a[0]==="connect"){xt(e,a[1],0)}if(a[0]==="send"){bt(e)}}}function xt(s,r,n){if(!se(s)){return}if(r.indexOf("/")==0){var e=location.hostname+(location.port?":"+location.port:"");if(location.protocol=="https:"){r="wss://"+e+r}else if(location.protocol=="http:"){r="ws://"+e+r}}var t=Q.createWebSocket(r);t.onerror=function(e){fe(s,"htmx:wsError",{error:e,socket:t});yt(s)};t.onclose=function(e){if([1006,1012,1013].indexOf(e.code)>=0){var t=wt(n);setTimeout(function(){xt(s,r,n+1)},t)}};t.onopen=function(e){n=0};ae(s).webSocket=t;t.addEventListener("message",function(e){if(yt(s)){return}var t=e.data;R(s,function(e){t=e.transformResponse(t,null,s)});var r=T(s);var n=l(t);var i=M(n.children);for(var a=0;a<i.length;a++){var o=i[a];Ee(te(o,"hx-swap-oob")||"true",o,r)}nr(r.tasks)})}function yt(e){if(!se(e)){ae(e).webSocket.close();return true}}function bt(u){var f=c(u,function(e){return ae(e).webSocket!=null});if(f){u.addEventListener(it(u)[0].trigger,function(e){var t=ae(f).webSocket;var r=xr(u,f);var n=dr(u,"post");var i=n.errors;var a=n.values;var o=Hr(u);var s=le(a,o);var l=yr(s,u);l["HEADERS"]=r;if(i&&i.length>0){ce(u,"htmx:validation:halted",i);return}t.send(JSON.stringify(l));if(ut(e,u)){e.preventDefault()}})}else{fe(u,"htmx:noWebSocketSourceError")}}function wt(e){var t=Q.config.wsReconnectDelay;if(typeof t==="function"){return t(e)}if(t==="full-jitter"){var r=Math.min(e,6);var n=1e3*Math.pow(2,r);return n*Math.random()}b('htmx.config.wsReconnectDelay must either be a function or the string "full-jitter"')}function St(e,t,r){var n=D(r);for(var i=0;i<n.length;i++){var a=n[i].split(/:(.+)/);if(a[0]==="connect"){Et(e,a[1])}if(a[0]==="swap"){Ct(e,a[1])}}}function Et(t,e){var r=Q.createEventSource(e);r.onerror=function(e){fe(t,"htmx:sseError",{error:e,source:r});Tt(t)};ae(t).sseEventSource=r}function Ct(a,o){var s=c(a,Ot);if(s){var l=ae(s).sseEventSource;var u=function(e){if(Tt(s)){return}if(!se(a)){l.removeEventListener(o,u);return}var t=e.data;R(a,function(e){t=e.transformResponse(t,null,a)});var r=wr(a);var n=ye(a);var i=T(a);je(r.swapStyle,n,a,t,i);nr(i.tasks);ce(a,"htmx:sseMessage",e)};ae(a).sseListener=u;l.addEventListener(o,u)}else{fe(a,"htmx:noSSESourceError")}}function Rt(e,t,r){var n=c(e,Ot);if(n){var i=ae(n).sseEventSource;var a=function(){if(!Tt(n)){if(se(e)){t(e)}else{i.removeEventListener(r,a)}}};ae(e).sseListener=a;i.addEventListener(r,a)}else{fe(e,"htmx:noSSESourceError")}}function Tt(e){if(!se(e)){ae(e).sseEventSource.close();return true}}function Ot(e){return ae(e).sseEventSource!=null}function qt(e,t,r,n){var i=function(){if(!r.loaded){r.loaded=true;t(e)}};if(n>0){setTimeout(i,n)}else{i()}}function Ht(t,i,e){var a=false;oe(w,function(r){if(o(t,"hx-"+r)){var n=te(t,"hx-"+r);a=true;i.path=n;i.verb=r;e.forEach(function(e){Lt(t,e,i,function(e,t){if(v(e,Q.config.disableSelector)){m(e);return}he(r,n,e,t)})})}});return a}function Lt(n,e,t,r){if(e.sseEvent){Rt(n,r,e.sseEvent)}else if(e.trigger==="revealed"){gt();ht(n,r,t,e);pt(n)}else if(e.trigger==="intersect"){var i={};if(e.root){i.root=ue(n,e.root)}if(e.threshold){i.threshold=parseFloat(e.threshold)}var a=new IntersectionObserver(function(e){for(var t=0;t<e.length;t++){var r=e[t];if(r.isIntersecting){ce(n,"intersect");break}}},i);a.observe(n);ht(n,r,t,e)}else if(e.trigger==="load"){if(!ct(e,n,Wt("load",{elt:n}))){qt(n,r,t,e.delay)}}else if(e.pollInterval>0){t.polling=true;ot(n,r,e)}else{ht(n,r,t,e)}}function At(e){if(!e.htmxExecuted&&Q.config.allowScriptTags&&(e.type==="text/javascript"||e.type==="module"||e.type==="")){var t=re().createElement("script");oe(e.attributes,function(e){t.setAttribute(e.name,e.value)});t.textContent=e.textContent;t.async=false;if(Q.config.inlineScriptNonce){t.nonce=Q.config.inlineScriptNonce}var r=e.parentElement;try{r.insertBefore(t,e)}catch(e){b(e)}finally{if(e.parentElement){e.parentElement.removeChild(e)}}}}function Nt(e){if(h(e,"script")){At(e)}oe(f(e,"script"),function(e){At(e)})}function It(e){var t=e.attributes;for(var r=0;r<t.length;r++){var n=t[r].name;if(g(n,"hx-on:")||g(n,"data-hx-on:")||g(n,"hx-on-")||g(n,"data-hx-on-")){return true}}return false}function kt(e){var t=null;var r=[];if(It(e)){r.push(e)}if(document.evaluate){var n=document.evaluate('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or'+' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]',e);while(t=n.iterateNext())r.push(t)}else{var i=e.getElementsByTagName("*");for(var a=0;a<i.length;a++){if(It(i[a])){r.push(i[a])}}}return r}function Pt(e){if(e.querySelectorAll){var t=", [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]";var r=e.querySelectorAll(i+t+", form, [type='submit'], [hx-sse], [data-hx-sse], [hx-ws],"+" [data-hx-ws], [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger], [hx-on], [data-hx-on]");return r}else{return[]}}function Mt(e){var t=v(e.target,"button, input[type='submit']");var r=Dt(e);if(r){r.lastButtonClicked=t}}function Xt(e){var t=Dt(e);if(t){t.lastButtonClicked=null}}function Dt(e){var t=v(e.target,"button, input[type='submit']");if(!t){return}var r=p("#"+ee(t,"form"))||v(t,"form");if(!r){return}return ae(r)}function Ut(e){e.addEventListener("click",Mt);e.addEventListener("focusin",Mt);e.addEventListener("focusout",Xt)}function Ft(e){var t=Ye(e);var r=0;for(var n=0;n<t.length;n++){const i=t[n];if(i==="{"){r++}else if(i==="}"){r--}}return r}function Bt(t,e,r){var n=ae(t);if(!Array.isArray(n.onHandlers)){n.onHandlers=[]}var i;var a=function(e){return Tr(t,function(){if(!i){i=new Function("event",r)}i.call(t,e)})};t.addEventListener(e,a);n.onHandlers.push({event:e,listener:a})}function Vt(e){var t=te(e,"hx-on");if(t){var r={};var n=t.split("\n");var i=null;var a=0;while(n.length>0){var o=n.shift();var s=o.match(/^\s*([a-zA-Z:\-\.]+:)(.*)/);if(a===0&&s){o.split(":");i=s[1].slice(0,-1);r[i]=s[2]}else{r[i]+=o}a+=Ft(o)}for(var l in r){Bt(e,l,r[l])}}}function jt(e){Ae(e);for(var t=0;t<e.attributes.length;t++){var r=e.attributes[t].name;var n=e.attributes[t].value;if(g(r,"hx-on")||g(r,"data-hx-on")){var i=r.indexOf("-on")+3;var a=r.slice(i,i+1);if(a==="-"||a===":"){var o=r.slice(i+1);if(g(o,":")){o="htmx"+o}else if(g(o,"-")){o="htmx:"+o.slice(1)}else if(g(o,"htmx-")){o="htmx:"+o.slice(5)}Bt(e,o,n)}}}}function _t(t){if(v(t,Q.config.disableSelector)){m(t);return}var r=ae(t);if(r.initHash!==Le(t)){Ne(t);r.initHash=Le(t);Vt(t);ce(t,"htmx:beforeProcessNode");if(t.value){r.lastValue=t.value}var e=it(t);var n=Ht(t,r,e);if(!n){if(ne(t,"hx-boost")==="true"){lt(t,r,e)}else if(o(t,"hx-trigger")){e.forEach(function(e){Lt(t,e,r,function(){})})}}if(t.tagName==="FORM"||ee(t,"type")==="submit"&&o(t,"form")){Ut(t)}var i=te(t,"hx-sse");if(i){St(t,r,i)}var a=te(t,"hx-ws");if(a){mt(t,r,a)}ce(t,"htmx:afterProcessNode")}}function zt(e){e=p(e);if(v(e,Q.config.disableSelector)){m(e);return}_t(e);oe(Pt(e),function(e){_t(e)});oe(kt(e),jt)}function $t(e){return e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function Wt(e,t){var r;if(window.CustomEvent&&typeof window.CustomEvent==="function"){r=new CustomEvent(e,{bubbles:true,cancelable:true,detail:t})}else{r=re().createEvent("CustomEvent");r.initCustomEvent(e,true,true,t)}return r}function fe(e,t,r){ce(e,t,le({error:t},r))}function Gt(e){return e==="htmx:afterProcessNode"}function R(e,t){oe(Br(e),function(e){try{t(e)}catch(e){b(e)}})}function b(e){if(console.error){console.error(e)}else if(console.log){console.log("ERROR: ",e)}}function ce(e,t,r){e=p(e);if(r==null){r={}}r["elt"]=e;var n=Wt(t,r);if(Q.logger&&!Gt(t)){Q.logger(e,t,r)}if(r.error){b(r.error);ce(e,"htmx:error",{errorInfo:r})}var i=e.dispatchEvent(n);var a=$t(t);if(i&&a!==t){var o=Wt(a,n.detail);i=i&&e.dispatchEvent(o)}R(e,function(e){i=i&&(e.onEvent(t,n)!==false&&!n.defaultPrevented)});return i}var Jt=location.pathname+location.search;function Zt(){var e=re().querySelector("[hx-history-elt],[data-hx-history-elt]");return e||re().body}function Kt(e,t,r,n){if(!U()){return}if(Q.config.historyCacheSize<=0){localStorage.removeItem("htmx-history-cache");return}e=F(e);var i=E(localStorage.getItem("htmx-history-cache"))||[];for(var a=0;a<i.length;a++){if(i[a].url===e){i.splice(a,1);break}}var o={url:e,content:t,title:r,scroll:n};ce(re().body,"htmx:historyItemCreated",{item:o,cache:i});i.push(o);while(i.length>Q.config.historyCacheSize){i.shift()}while(i.length>0){try{localStorage.setItem("htmx-history-cache",JSON.stringify(i));break}catch(e){fe(re().body,"htmx:historyCacheError",{cause:e,cache:i});i.shift()}}}function Yt(e){if(!U()){return null}e=F(e);var t=E(localStorage.getItem("htmx-history-cache"))||[];for(var r=0;r<t.length;r++){if(t[r].url===e){return t[r]}}return null}function Qt(e){var t=Q.config.requestClass;var r=e.cloneNode(true);oe(f(r,"."+t),function(e){n(e,t)});return r.innerHTML}function er(){var e=Zt();var t=Jt||location.pathname+location.search;var r;try{r=re().querySelector('[hx-history="false" i],[data-hx-history="false" i]')}catch(e){r=re().querySelector('[hx-history="false"],[data-hx-history="false"]')}if(!r){ce(re().body,"htmx:beforeHistorySave",{path:t,historyElt:e});Kt(t,Qt(e),re().title,window.scrollY)}if(Q.config.historyEnabled)history.replaceState({htmx:true},re().title,window.location.href)}function tr(e){if(Q.config.getCacheBusterParam){e=e.replace(/org\.htmx\.cache-buster=[^&]*&?/,"");if(G(e,"&")||G(e,"?")){e=e.slice(0,-1)}}if(Q.config.historyEnabled){history.pushState({htmx:true},"",e)}Jt=e}function rr(e){if(Q.config.historyEnabled)history.replaceState({htmx:true},"",e);Jt=e}function nr(e){oe(e,function(e){e.call()})}function ir(a){var e=new XMLHttpRequest;var o={path:a,xhr:e};ce(re().body,"htmx:historyCacheMiss",o);e.open("GET",a,true);e.setRequestHeader("HX-Request","true");e.setRequestHeader("HX-History-Restore-Request","true");e.setRequestHeader("HX-Current-URL",re().location.href);e.onload=function(){if(this.status>=200&&this.status<400){ce(re().body,"htmx:historyCacheMissLoad",o);var e=l(this.response);e=e.querySelector("[hx-history-elt],[data-hx-history-elt]")||e;var t=Zt();var r=T(t);var n=Ve(this.response);if(n){var i=C("title");if(i){i.innerHTML=n}else{window.document.title=n}}Ue(t,e,r);nr(r.tasks);Jt=a;ce(re().body,"htmx:historyRestore",{path:a,cacheMiss:true,serverResponse:this.response})}else{fe(re().body,"htmx:historyCacheMissLoadError",o)}};e.send()}function ar(e){er();e=e||location.pathname+location.search;var t=Yt(e);if(t){var r=l(t.content);var n=Zt();var i=T(n);Ue(n,r,i);nr(i.tasks);document.title=t.title;setTimeout(function(){window.scrollTo(0,t.scroll)},0);Jt=e;ce(re().body,"htmx:historyRestore",{path:e,item:t})}else{if(Q.config.refreshOnHistoryMiss){window.location.reload(true)}else{ir(e)}}}function or(e){var t=me(e,"hx-indicator");if(t==null){t=[e]}oe(t,function(e){var t=ae(e);t.requestCount=(t.requestCount||0)+1;e.classList["add"].call(e.classList,Q.config.requestClass)});return t}function sr(e){var t=me(e,"hx-disabled-elt");if(t==null){t=[]}oe(t,function(e){var t=ae(e);t.requestCount=(t.requestCount||0)+1;e.setAttribute("disabled","")});return t}function lr(e,t){oe(e,function(e){var t=ae(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.classList["remove"].call(e.classList,Q.config.requestClass)}});oe(t,function(e){var t=ae(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.removeAttribute("disabled")}})}function ur(e,t){for(var r=0;r<e.length;r++){var n=e[r];if(n.isSameNode(t)){return true}}return false}function fr(e){if(e.name===""||e.name==null||e.disabled||v(e,"fieldset[disabled]")){return false}if(e.type==="button"||e.type==="submit"||e.tagName==="image"||e.tagName==="reset"||e.tagName==="file"){return false}if(e.type==="checkbox"||e.type==="radio"){return e.checked}return true}function cr(e,t,r){if(e!=null&&t!=null){var n=r[e];if(n===undefined){r[e]=t}else if(Array.isArray(n)){if(Array.isArray(t)){r[e]=n.concat(t)}else{n.push(t)}}else{if(Array.isArray(t)){r[e]=[n].concat(t)}else{r[e]=[n,t]}}}}function hr(t,r,n,e,i){if(e==null||ur(t,e)){return}else{t.push(e)}if(fr(e)){var a=ee(e,"name");var o=e.value;if(e.multiple&&e.tagName==="SELECT"){o=M(e.querySelectorAll("option:checked")).map(function(e){return e.value})}if(e.files){o=M(e.files)}cr(a,o,r);if(i){vr(e,n)}}if(h(e,"form")){var s=e.elements;oe(s,function(e){hr(t,r,n,e,i)})}}function vr(e,t){if(e.willValidate){ce(e,"htmx:validation:validate");if(!e.checkValidity()){t.push({elt:e,message:e.validationMessage,validity:e.validity});ce(e,"htmx:validation:failed",{message:e.validationMessage,validity:e.validity})}}}function dr(e,t){var r=[];var n={};var i={};var a=[];var o=ae(e);if(o.lastButtonClicked&&!se(o.lastButtonClicked)){o.lastButtonClicked=null}var s=h(e,"form")&&e.noValidate!==true||te(e,"hx-validate")==="true";if(o.lastButtonClicked){s=s&&o.lastButtonClicked.formNoValidate!==true}if(t!=="get"){hr(r,i,a,v(e,"form"),s)}hr(r,n,a,e,s);if(o.lastButtonClicked||e.tagName==="BUTTON"||e.tagName==="INPUT"&&ee(e,"type")==="submit"){var l=o.lastButtonClicked||e;var u=ee(l,"name");cr(u,l.value,i)}var f=me(e,"hx-include");oe(f,function(e){hr(r,n,a,e,s);if(!h(e,"form")){oe(e.querySelectorAll(rt),function(e){hr(r,n,a,e,s)})}});n=le(n,i);return{errors:a,values:n}}function gr(e,t,r){if(e!==""){e+="&"}if(String(r)==="[object Object]"){r=JSON.stringify(r)}var n=encodeURIComponent(r);e+=encodeURIComponent(t)+"="+n;return e}function pr(e){var t="";for(var r in e){if(e.hasOwnProperty(r)){var n=e[r];if(Array.isArray(n)){oe(n,function(e){t=gr(t,r,e)})}else{t=gr(t,r,n)}}}return t}function mr(e){var t=new FormData;for(var r in e){if(e.hasOwnProperty(r)){var n=e[r];if(Array.isArray(n)){oe(n,function(e){t.append(r,e)})}else{t.append(r,n)}}}return t}function xr(e,t,r){var n={"HX-Request":"true","HX-Trigger":ee(e,"id"),"HX-Trigger-Name":ee(e,"name"),"HX-Target":te(t,"id"),"HX-Current-URL":re().location.href};Rr(e,"hx-headers",false,n);if(r!==undefined){n["HX-Prompt"]=r}if(ae(e).boosted){n["HX-Boosted"]="true"}return n}function yr(t,e){var r=ne(e,"hx-params");if(r){if(r==="none"){return{}}else if(r==="*"){return t}else if(r.indexOf("not ")===0){oe(r.substr(4).split(","),function(e){e=e.trim();delete t[e]});return t}else{var n={};oe(r.split(","),function(e){e=e.trim();n[e]=t[e]});return n}}else{return t}}function br(e){return ee(e,"href")&&ee(e,"href").indexOf("#")>=0}function wr(e,t){var r=t?t:ne(e,"hx-swap");var n={swapStyle:ae(e).boosted?"innerHTML":Q.config.defaultSwapStyle,swapDelay:Q.config.defaultSwapDelay,settleDelay:Q.config.defaultSettleDelay};if(Q.config.scrollIntoViewOnBoost&&ae(e).boosted&&!br(e)){n["show"]="top"}if(r){var i=D(r);if(i.length>0){for(var a=0;a<i.length;a++){var o=i[a];if(o.indexOf("swap:")===0){n["swapDelay"]=d(o.substr(5))}else if(o.indexOf("settle:")===0){n["settleDelay"]=d(o.substr(7))}else if(o.indexOf("transition:")===0){n["transition"]=o.substr(11)==="true"}else if(o.indexOf("ignoreTitle:")===0){n["ignoreTitle"]=o.substr(12)==="true"}else if(o.indexOf("scroll:")===0){var s=o.substr(7);var l=s.split(":");var u=l.pop();var f=l.length>0?l.join(":"):null;n["scroll"]=u;n["scrollTarget"]=f}else if(o.indexOf("show:")===0){var c=o.substr(5);var l=c.split(":");var h=l.pop();var f=l.length>0?l.join(":"):null;n["show"]=h;n["showTarget"]=f}else if(o.indexOf("focus-scroll:")===0){var v=o.substr("focus-scroll:".length);n["focusScroll"]=v=="true"}else if(a==0){n["swapStyle"]=o}else{b("Unknown modifier in hx-swap: "+o)}}}}return n}function Sr(e){return ne(e,"hx-encoding")==="multipart/form-data"||h(e,"form")&&ee(e,"enctype")==="multipart/form-data"}function Er(t,r,n){var i=null;R(r,function(e){if(i==null){i=e.encodeParameters(t,n,r)}});if(i!=null){return i}else{if(Sr(r)){return mr(n)}else{return pr(n)}}}function T(e){return{tasks:[],elts:[e]}}function Cr(e,t){var r=e[0];var n=e[e.length-1];if(t.scroll){var i=null;if(t.scrollTarget){i=ue(r,t.scrollTarget)}if(t.scroll==="top"&&(r||i)){i=i||r;i.scrollTop=0}if(t.scroll==="bottom"&&(n||i)){i=i||n;i.scrollTop=i.scrollHeight}}if(t.show){var i=null;if(t.showTarget){var a=t.showTarget;if(t.showTarget==="window"){a="body"}i=ue(r,a)}if(t.show==="top"&&(r||i)){i=i||r;i.scrollIntoView({block:"start",behavior:Q.config.scrollBehavior})}if(t.show==="bottom"&&(n||i)){i=i||n;i.scrollIntoView({block:"end",behavior:Q.config.scrollBehavior})}}}function Rr(e,t,r,n){if(n==null){n={}}if(e==null){return n}var i=te(e,t);if(i){var a=i.trim();var o=r;if(a==="unset"){return null}if(a.indexOf("javascript:")===0){a=a.substr(11);o=true}else if(a.indexOf("js:")===0){a=a.substr(3);o=true}if(a.indexOf("{")!==0){a="{"+a+"}"}var s;if(o){s=Tr(e,function(){return Function("return ("+a+")")()},{})}else{s=E(a)}for(var l in s){if(s.hasOwnProperty(l)){if(n[l]==null){n[l]=s[l]}}}}return Rr(u(e),t,r,n)}function Tr(e,t,r){if(Q.config.allowEval){return t()}else{fe(e,"htmx:evalDisallowedError");return r}}function Or(e,t){return Rr(e,"hx-vars",true,t)}function qr(e,t){return Rr(e,"hx-vals",false,t)}function Hr(e){return le(Or(e),qr(e))}function Lr(t,r,n){if(n!==null){try{t.setRequestHeader(r,n)}catch(e){t.setRequestHeader(r,encodeURIComponent(n));t.setRequestHeader(r+"-URI-AutoEncoded","true")}}}function Ar(t){if(t.responseURL&&typeof URL!=="undefined"){try{var e=new URL(t.responseURL);return e.pathname+e.search}catch(e){fe(re().body,"htmx:badResponseUrl",{url:t.responseURL})}}}function O(e,t){return t.test(e.getAllResponseHeaders())}function Nr(e,t,r){e=e.toLowerCase();if(r){if(r instanceof Element||I(r,"String")){return he(e,t,null,null,{targetOverride:p(r),returnPromise:true})}else{return he(e,t,p(r.source),r.event,{handler:r.handler,headers:r.headers,values:r.values,targetOverride:p(r.target),swapOverride:r.swap,select:r.select,returnPromise:true})}}else{return he(e,t,null,null,{returnPromise:true})}}function Ir(e){var t=[];while(e){t.push(e);e=e.parentElement}return t}function kr(e,t,r){var n;var i;if(typeof URL==="function"){i=new URL(t,document.location.href);var a=document.location.origin;n=a===i.origin}else{i=t;n=g(t,document.location.origin)}if(Q.config.selfRequestsOnly){if(!n){return false}}return ce(e,"htmx:validateUrl",le({url:i,sameHost:n},r))}function he(t,r,n,i,a,e){var o=null;var s=null;a=a!=null?a:{};if(a.returnPromise&&typeof Promise!=="undefined"){var l=new Promise(function(e,t){o=e;s=t})}if(n==null){n=re().body}var M=a.handler||Mr;var X=a.select||null;if(!se(n)){ie(o);return l}var u=a.targetOverride||ye(n);if(u==null||u==pe){fe(n,"htmx:targetError",{target:te(n,"hx-target")});ie(s);return l}var f=ae(n);var c=f.lastButtonClicked;if(c){var h=ee(c,"formaction");if(h!=null){r=h}var v=ee(c,"formmethod");if(v!=null){if(v.toLowerCase()!=="dialog"){t=v}}}var d=ne(n,"hx-confirm");if(e===undefined){var D=function(e){return he(t,r,n,i,a,!!e)};var U={target:u,elt:n,path:r,verb:t,triggeringEvent:i,etc:a,issueRequest:D,question:d};if(ce(n,"htmx:confirm",U)===false){ie(o);return l}}var g=n;var p=ne(n,"hx-sync");var m=null;var x=false;if(p){var F=p.split(":");var B=F[0].trim();if(B==="this"){g=xe(n,"hx-sync")}else{g=ue(n,B)}p=(F[1]||"drop").trim();f=ae(g);if(p==="drop"&&f.xhr&&f.abortable!==true){ie(o);return l}else if(p==="abort"){if(f.xhr){ie(o);return l}else{x=true}}else if(p==="replace"){ce(g,"htmx:abort")}else if(p.indexOf("queue")===0){var V=p.split(" ");m=(V[1]||"last").trim()}}if(f.xhr){if(f.abortable){ce(g,"htmx:abort")}else{if(m==null){if(i){var y=ae(i);if(y&&y.triggerSpec&&y.triggerSpec.queue){m=y.triggerSpec.queue}}if(m==null){m="last"}}if(f.queuedRequests==null){f.queuedRequests=[]}if(m==="first"&&f.queuedRequests.length===0){f.queuedRequests.push(function(){he(t,r,n,i,a)})}else if(m==="all"){f.queuedRequests.push(function(){he(t,r,n,i,a)})}else if(m==="last"){f.queuedRequests=[];f.queuedRequests.push(function(){he(t,r,n,i,a)})}ie(o);return l}}var b=new XMLHttpRequest;f.xhr=b;f.abortable=x;var w=function(){f.xhr=null;f.abortable=false;if(f.queuedRequests!=null&&f.queuedRequests.length>0){var e=f.queuedRequests.shift();e()}};var j=ne(n,"hx-prompt");if(j){var S=prompt(j);if(S===null||!ce(n,"htmx:prompt",{prompt:S,target:u})){ie(o);w();return l}}if(d&&!e){if(!confirm(d)){ie(o);w();return l}}var E=xr(n,u,S);if(t!=="get"&&!Sr(n)){E["Content-Type"]="application/x-www-form-urlencoded"}if(a.headers){E=le(E,a.headers)}var _=dr(n,t);var C=_.errors;var R=_.values;if(a.values){R=le(R,a.values)}var z=Hr(n);var $=le(R,z);var T=yr($,n);if(Q.config.getCacheBusterParam&&t==="get"){T["org.htmx.cache-buster"]=ee(u,"id")||"true"}if(r==null||r===""){r=re().location.href}var O=Rr(n,"hx-request");var W=ae(n).boosted;var q=Q.config.methodsThatUseUrlParams.indexOf(t)>=0;var H={boosted:W,useUrlParams:q,parameters:T,unfilteredParameters:$,headers:E,target:u,verb:t,errors:C,withCredentials:a.credentials||O.credentials||Q.config.withCredentials,timeout:a.timeout||O.timeout||Q.config.timeout,path:r,triggeringEvent:i};if(!ce(n,"htmx:configRequest",H)){ie(o);w();return l}r=H.path;t=H.verb;E=H.headers;T=H.parameters;C=H.errors;q=H.useUrlParams;if(C&&C.length>0){ce(n,"htmx:validation:halted",H);ie(o);w();return l}var G=r.split("#");var J=G[0];var L=G[1];var A=r;if(q){A=J;var Z=Object.keys(T).length!==0;if(Z){if(A.indexOf("?")<0){A+="?"}else{A+="&"}A+=pr(T);if(L){A+="#"+L}}}if(!kr(n,A,H)){fe(n,"htmx:invalidPath",H);ie(s);return l}b.open(t.toUpperCase(),A,true);b.overrideMimeType("text/html");b.withCredentials=H.withCredentials;b.timeout=H.timeout;if(O.noHeaders){}else{for(var N in E){if(E.hasOwnProperty(N)){var K=E[N];Lr(b,N,K)}}}var I={xhr:b,target:u,requestConfig:H,etc:a,boosted:W,select:X,pathInfo:{requestPath:r,finalRequestPath:A,anchor:L}};b.onload=function(){try{var e=Ir(n);I.pathInfo.responsePath=Ar(b);M(n,I);lr(k,P);ce(n,"htmx:afterRequest",I);ce(n,"htmx:afterOnLoad",I);if(!se(n)){var t=null;while(e.length>0&&t==null){var r=e.shift();if(se(r)){t=r}}if(t){ce(t,"htmx:afterRequest",I);ce(t,"htmx:afterOnLoad",I)}}ie(o);w()}catch(e){fe(n,"htmx:onLoadError",le({error:e},I));throw e}};b.onerror=function(){lr(k,P);fe(n,"htmx:afterRequest",I);fe(n,"htmx:sendError",I);ie(s);w()};b.onabort=function(){lr(k,P);fe(n,"htmx:afterRequest",I);fe(n,"htmx:sendAbort",I);ie(s);w()};b.ontimeout=function(){lr(k,P);fe(n,"htmx:afterRequest",I);fe(n,"htmx:timeout",I);ie(s);w()};if(!ce(n,"htmx:beforeRequest",I)){ie(o);w();return l}var k=or(n);var P=sr(n);oe(["loadstart","loadend","progress","abort"],function(t){oe([b,b.upload],function(e){e.addEventListener(t,function(e){ce(n,"htmx:xhr:"+t,{lengthComputable:e.lengthComputable,loaded:e.loaded,total:e.total})})})});ce(n,"htmx:beforeSend",I);var Y=q?null:Er(b,n,T);b.send(Y);return l}function Pr(e,t){var r=t.xhr;var n=null;var i=null;if(O(r,/HX-Push:/i)){n=r.getResponseHeader("HX-Push");i="push"}else if(O(r,/HX-Push-Url:/i)){n=r.getResponseHeader("HX-Push-Url");i="push"}else if(O(r,/HX-Replace-Url:/i)){n=r.getResponseHeader("HX-Replace-Url");i="replace"}if(n){if(n==="false"){return{}}else{return{type:i,path:n}}}var a=t.pathInfo.finalRequestPath;var o=t.pathInfo.responsePath;var s=ne(e,"hx-push-url");var l=ne(e,"hx-replace-url");var u=ae(e).boosted;var f=null;var c=null;if(s){f="push";c=s}else if(l){f="replace";c=l}else if(u){f="push";c=o||a}if(c){if(c==="false"){return{}}if(c==="true"){c=o||a}if(t.pathInfo.anchor&&c.indexOf("#")===-1){c=c+"#"+t.pathInfo.anchor}return{type:f,path:c}}else{return{}}}function Mr(l,u){var f=u.xhr;var c=u.target;var e=u.etc;var t=u.requestConfig;var h=u.select;if(!ce(l,"htmx:beforeOnLoad",u))return;if(O(f,/HX-Trigger:/i)){_e(f,"HX-Trigger",l)}if(O(f,/HX-Location:/i)){er();var r=f.getResponseHeader("HX-Location");var v;if(r.indexOf("{")===0){v=E(r);r=v["path"];delete v["path"]}Nr("GET",r,v).then(function(){tr(r)});return}var n=O(f,/HX-Refresh:/i)&&"true"===f.getResponseHeader("HX-Refresh");if(O(f,/HX-Redirect:/i)){location.href=f.getResponseHeader("HX-Redirect");n&&location.reload();return}if(n){location.reload();return}if(O(f,/HX-Retarget:/i)){if(f.getResponseHeader("HX-Retarget")==="this"){u.target=l}else{u.target=ue(l,f.getResponseHeader("HX-Retarget"))}}var d=Pr(l,u);var i=f.status>=200&&f.status<400&&f.status!==204;var g=f.response;var a=f.status>=400;var p=Q.config.ignoreTitle;var o=le({shouldSwap:i,serverResponse:g,isError:a,ignoreTitle:p},u);if(!ce(c,"htmx:beforeSwap",o))return;c=o.target;g=o.serverResponse;a=o.isError;p=o.ignoreTitle;u.target=c;u.failed=a;u.successful=!a;if(o.shouldSwap){if(f.status===286){at(l)}R(l,function(e){g=e.transformResponse(g,f,l)});if(d.type){er()}var s=e.swapOverride;if(O(f,/HX-Reswap:/i)){s=f.getResponseHeader("HX-Reswap")}var v=wr(l,s);if(v.hasOwnProperty("ignoreTitle")){p=v.ignoreTitle}c.classList.add(Q.config.swappingClass);var m=null;var x=null;var y=function(){try{var e=document.activeElement;var t={};try{t={elt:e,start:e?e.selectionStart:null,end:e?e.selectionEnd:null}}catch(e){}var r;if(h){r=h}if(O(f,/HX-Reselect:/i)){r=f.getResponseHeader("HX-Reselect")}if(d.type){ce(re().body,"htmx:beforeHistoryUpdate",le({history:d},u));if(d.type==="push"){tr(d.path);ce(re().body,"htmx:pushedIntoHistory",{path:d.path})}else{rr(d.path);ce(re().body,"htmx:replacedInHistory",{path:d.path})}}var n=T(c);je(v.swapStyle,c,l,g,n,r);if(t.elt&&!se(t.elt)&&ee(t.elt,"id")){var i=document.getElementById(ee(t.elt,"id"));var a={preventScroll:v.focusScroll!==undefined?!v.focusScroll:!Q.config.defaultFocusScroll};if(i){if(t.start&&i.setSelectionRange){try{i.setSelectionRange(t.start,t.end)}catch(e){}}i.focus(a)}}c.classList.remove(Q.config.swappingClass);oe(n.elts,function(e){if(e.classList){e.classList.add(Q.config.settlingClass)}ce(e,"htmx:afterSwap",u)});if(O(f,/HX-Trigger-After-Swap:/i)){var o=l;if(!se(l)){o=re().body}_e(f,"HX-Trigger-After-Swap",o)}var s=function(){oe(n.tasks,function(e){e.call()});oe(n.elts,function(e){if(e.classList){e.classList.remove(Q.config.settlingClass)}ce(e,"htmx:afterSettle",u)});if(u.pathInfo.anchor){var e=re().getElementById(u.pathInfo.anchor);if(e){e.scrollIntoView({block:"start",behavior:"auto"})}}if(n.title&&!p){var t=C("title");if(t){t.innerHTML=n.title}else{window.document.title=n.title}}Cr(n.elts,v);if(O(f,/HX-Trigger-After-Settle:/i)){var r=l;if(!se(l)){r=re().body}_e(f,"HX-Trigger-After-Settle",r)}ie(m)};if(v.settleDelay>0){setTimeout(s,v.settleDelay)}else{s()}}catch(e){fe(l,"htmx:swapError",u);ie(x);throw e}};var b=Q.config.globalViewTransitions;if(v.hasOwnProperty("transition")){b=v.transition}if(b&&ce(l,"htmx:beforeTransition",u)&&typeof Promise!=="undefined"&&document.startViewTransition){var w=new Promise(function(e,t){m=e;x=t});var S=y;y=function(){document.startViewTransition(function(){S();return w})}}if(v.swapDelay>0){setTimeout(y,v.swapDelay)}else{y()}}if(a){fe(l,"htmx:responseError",le({error:"Response Status Error Code "+f.status+" from "+u.pathInfo.requestPath},u))}}var Xr={};function Dr(){return{init:function(e){return null},onEvent:function(e,t){return true},transformResponse:function(e,t,r){return e},isInlineSwap:function(e){return false},handleSwap:function(e,t,r,n){return false},encodeParameters:function(e,t,r){return null}}}function Ur(e,t){if(t.init){t.init(r)}Xr[e]=le(Dr(),t)}function Fr(e){delete Xr[e]}function Br(e,r,n){if(e==undefined){return r}if(r==undefined){r=[]}if(n==undefined){n=[]}var t=te(e,"hx-ext");if(t){oe(t.split(","),function(e){e=e.replace(/ /g,"");if(e.slice(0,7)=="ignore:"){n.push(e.slice(7));return}if(n.indexOf(e)<0){var t=Xr[e];if(t&&r.indexOf(t)<0){r.push(t)}}})}return Br(u(e),r,n)}var Vr=false;re().addEventListener("DOMContentLoaded",function(){Vr=true});function jr(e){if(Vr||re().readyState==="complete"){e()}else{re().addEventListener("DOMContentLoaded",e)}}function _r(){if(Q.config.includeIndicatorStyles!==false){re().head.insertAdjacentHTML("beforeend","<style>                      ."+Q.config.indicatorClass+"{opacity:0}                      ."+Q.config.requestClass+" ."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;}                      ."+Q.config.requestClass+"."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;}                    </style>")}}function zr(){var e=re().querySelector('meta[name="htmx-config"]');if(e){return E(e.content)}else{return null}}function $r(){var e=zr();if(e){Q.config=le(Q.config,e)}}jr(function(){$r();_r();var e=re().body;zt(e);var t=re().querySelectorAll("[hx-trigger='restored'],[data-hx-trigger='restored']");e.addEventListener("htmx:abort",function(e){var t=e.target;var r=ae(t);if(r&&r.xhr){r.xhr.abort()}});const r=window.onpopstate?window.onpopstate.bind(window):null;window.onpopstate=function(e){if(e.state&&e.state.htmx){ar();oe(t,function(e){ce(e,"htmx:restored",{document:re(),triggerEvent:ce})})}else{if(r){r(e)}}};setTimeout(function(){ce(e,"htmx:load",{});e=null},0)});return Q}()});
\ No newline at end of file
diff --git a/public/stylesheets/custom/_dark.scss b/public/stylesheets/custom/_dark.scss
new file mode 100644
index 0000000..b2a82c9
--- /dev/null
+++ b/public/stylesheets/custom/_dark.scss
@@ -0,0 +1,248 @@
+@use "sass:map";
+@use "../pico/colors" as *;
+@use "../pico/settings" as *;
+@use "../pico/helpers/functions";
+@use "theme-colors";
+
+// Default: Dark theme
+@mixin theme {
+  #{$css-var-prefix}background-color: #{mix($slate-950, $slate-900)};
+
+  // Text color
+  #{$css-var-prefix}color: #{$zinc-200};
+
+  // Text selection color
+  #{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "dark");
+
+  // Muted colors
+  #{$css-var-prefix}muted-color: #{$zinc-450};
+  #{$css-var-prefix}muted-border-color: #{$slate-850};
+
+  // Primary colors
+  #{$css-var-prefix}primary: theme-colors.get("primary", "dark");
+  #{$css-var-prefix}primary-background: theme-colors.get("primary-background", "dark");
+  #{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
+  #{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "dark");
+  #{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "dark");
+  #{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "dark");
+  #{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
+  #{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
+  #{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "dark");
+  #{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "dark");
+
+  // Secondary colors
+  #{$css-var-prefix}secondary: #{$zinc-350};
+  #{$css-var-prefix}secondary-background: #{$slate-600};
+  #{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
+  #{$css-var-prefix}secondary-underline: #{rgba($zinc-350, 0.5)};
+  #{$css-var-prefix}secondary-hover: #{$zinc-250};
+  #{$css-var-prefix}secondary-hover-background: #{$slate-550};
+  #{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
+  #{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
+  #{$css-var-prefix}secondary-focus: #{rgba($slate-350, 0.25)};
+  #{$css-var-prefix}secondary-inverse: #{$white};
+
+  // Contrast colors
+  #{$css-var-prefix}contrast: #{$slate-100};
+  #{$css-var-prefix}contrast-background: #{$slate-50};
+  #{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
+  #{$css-var-prefix}contrast-underline: #{rgba($slate-100, 0.5)};
+  #{$css-var-prefix}contrast-hover: #{$white};
+  #{$css-var-prefix}contrast-hover-background: #{$white};
+  #{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
+  #{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}contrast-hover);
+  #{$css-var-prefix}contrast-focus: #{rgba($slate-150, 0.25)};
+  #{$css-var-prefix}contrast-inverse: #{$black};
+
+  // Box shadow
+  #{$css-var-prefix}box-shadow: functions.shadow(mix($black, $slate-950));
+
+  // Typography
+  @if map.get($modules, "content/typography") {
+    // Headings colors
+    #{$css-var-prefix}h1-color: #{$zinc-50};
+    #{$css-var-prefix}h2-color: #{$zinc-100};
+    #{$css-var-prefix}h3-color: #{$zinc-200};
+    #{$css-var-prefix}h4-color: #{$zinc-250};
+    #{$css-var-prefix}h5-color: #{$zinc-300};
+    #{$css-var-prefix}h6-color: #{$zinc-400};
+
+    // Highlighted text (<mark>)
+    #{$css-var-prefix}mark-background-color: #{$azure-750};
+    #{$css-var-prefix}mark-color: #{$white};
+
+    // Inserted (<ins>) & Deleted (<del>)
+    #{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-200)};
+    #{$css-var-prefix}del-color: #{mix($red-500, $zinc-200)};
+
+    // Blockquote
+    #{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Button
+  @if map.get($modules, "content/button") {
+    // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
+    // Don't use, 'none, 'false, 'null', '0', etc.
+    #{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    #{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+
+  // Table
+  @if map.get($modules, "content/table") {
+    #{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
+  }
+
+  // Code
+  @if map.get($modules, "content/code") {
+    #{$css-var-prefix}code-background-color: #{mix($slate-900, $slate-850, 75%)};
+    #{$css-var-prefix}code-color: #{$zinc-400};
+    #{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
+  }
+
+  // Form elements
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}form-element-background-color: #{mix($slate-900, $slate-850)};
+    #{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
+    #{$css-var-prefix}form-element-border-color: #{$slate-800};
+    #{$css-var-prefix}form-element-color: #{$zinc-100};
+    #{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
+    #{$css-var-prefix}form-element-active-background-color: #{mix($slate-900, $slate-850, 75%)};
+    #{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-disabled-opacity: 0.5;
+    #{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $slate-600)};
+    #{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)};
+    #{$css-var-prefix}form-element-invalid-focus-color: var(
+      #{$css-var-prefix}form-element-invalid-active-border-color
+    );
+    #{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $slate-600)};
+    #{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)};
+    #{$css-var-prefix}form-element-valid-focus-color: var(
+      #{$css-var-prefix}form-element-valid-active-border-color
+    );
+
+    // Focus for buttons, radio and select
+    input:is(
+        [type="submit"],
+        [type="button"],
+        [type="reset"],
+        [type="checkbox"],
+        [type="radio"],
+        [type="file"]
+      ) {
+      #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
+    }
+  }
+
+  // Switch (input[type="checkbox"][role="switch"])
+  @if map.get($modules, "forms/checkbox-radio-switch") {
+    #{$css-var-prefix}switch-background-color: #{$slate-750};
+    #{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
+    #{$css-var-prefix}switch-color: #{$white};
+    #{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "dark");
+  }
+
+  // Range (input[type="range"])
+  @if map.get($modules, "forms/input-range") {
+    #{$css-var-prefix}range-border-color: #{$slate-850};
+    #{$css-var-prefix}range-active-border-color: #{$slate-800};
+    #{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
+    #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
+    #{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Accordion (<details>)
+  @if map.get($modules, "components/accordion") {
+    #{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
+    #{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Card (<article>)
+  @if map.get($modules, "components/card") {
+    #{$css-var-prefix}card-background-color: #{$slate-900};
+    #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}card-background-color);
+    #{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)};
+  }
+
+  // Dropdown (details.dropdown)
+  @if map.get($modules, "components/dropdown") and $enable-classes {
+    #{$css-var-prefix}dropdown-background-color: #{$slate-900};
+    #{$css-var-prefix}dropdown-border-color: #{$slate-850};
+    #{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}dropdown-hover-background-color: #{$slate-850};
+  }
+
+  // Loading ([aria-busy=true])
+  @if map.get($modules, "components/loading") {
+    #{$css-var-prefix}loading-spinner-opacity: 0.5;
+  }
+
+  // Modal (<dialog>)
+  @if map.get($modules, "components/modal") {
+    #{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.75)};
+  }
+
+  // Progress
+  @if map.get($modules, "components/progress") {
+    #{$css-var-prefix}progress-background-color: #{$slate-850};
+    #{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Tooltip ([data-tooltip])
+  @if map.get($modules, "components/tooltip") {
+    #{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
+    #{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
+  }
+
+  // Chevron icons
+  @if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
+    // Change the icon color to black for accordion and dropdown .contrast buttons
+    @if $enable-classes {
+      #{$parent-selector} details {
+        summary {
+          &[role="button"].contrast:not(.outline) {
+            &::after {
+              filter: brightness(0);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Form validation icons
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    #{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+  }
+
+  // Loading icon (animated)
+  @if map.get($modules, "components/loading") {
+    // Change the icon color to black for .contrast buttons
+    @if $enable-classes {
+      #{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
+        &.contrast:is(
+            button,
+            [type="submit"],
+            [type="button"],
+            [type="reset"],
+            [role="button"]
+          ):not(.outline) {
+          &::before {
+            filter: brightness(0);
+          }
+        }
+      }
+    }
+  }
+
+  // Document
+  color-scheme: dark;
+}
diff --git a/public/stylesheets/custom/_light.scss b/public/stylesheets/custom/_light.scss
new file mode 100644
index 0000000..b1beab4
--- /dev/null
+++ b/public/stylesheets/custom/_light.scss
@@ -0,0 +1,212 @@
+@use "sass:map";
+@use "../pico/colors" as *;
+@use "../pico/settings" as *;
+@use "../pico/helpers/functions";
+@use "theme-colors";
+
+// Default: Light theme
+@mixin theme {
+  #{$css-var-prefix}background-color: #{$white};
+
+  // Text color
+  #{$css-var-prefix}color: #{$zinc-750};
+
+  // Text selection color
+  #{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "light");
+
+  // Muted colors
+  #{$css-var-prefix}muted-color: #{$zinc-550};
+  #{$css-var-prefix}muted-border-color: #{mix($slate-100, $slate-50)};
+
+  // Primary colors
+  #{$css-var-prefix}primary: theme-colors.get("primary", "light");
+  #{$css-var-prefix}primary-background: theme-colors.get("primary-background", "light");
+  #{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
+  #{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "light");
+  #{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "light");
+  #{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "light");
+  #{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
+  #{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
+  #{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "light");
+  #{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "light");
+
+  // Secondary colors
+  #{$css-var-prefix}secondary: #{$slate-550};
+  #{$css-var-prefix}secondary-background: #{$slate-600};
+  #{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
+  #{$css-var-prefix}secondary-underline: #{rgba($slate-550, 0.5)};
+  #{$css-var-prefix}secondary-hover: #{$slate-650};
+  #{$css-var-prefix}secondary-hover-background: #{$slate-650};
+  #{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
+  #{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
+  #{$css-var-prefix}secondary-focus: #{rgba($slate-550, 0.25)};
+  #{$css-var-prefix}secondary-inverse: #{$white};
+
+  // Contrast colors
+  #{$css-var-prefix}contrast: #{$slate-900};
+  #{$css-var-prefix}contrast-background: #{$slate-900};
+  #{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
+  #{$css-var-prefix}contrast-underline: #{rgba($slate-900, 0.5)};
+  #{$css-var-prefix}contrast-hover: #{$black};
+  #{$css-var-prefix}contrast-hover-background: #{$black};
+  #{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
+  #{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}secondary-hover);
+  #{$css-var-prefix}contrast-focus: #{rgba($slate-550, 0.25)};
+  #{$css-var-prefix}contrast-inverse: #{$white};
+
+  // Box shadow
+  #{$css-var-prefix}box-shadow: functions.shadow($slate-400);
+
+  // Typography
+  @if map.get($modules, "content/typography") {
+    // Headings colors
+    #{$css-var-prefix}h1-color: #{$zinc-800};
+    #{$css-var-prefix}h2-color: #{$zinc-750};
+    #{$css-var-prefix}h3-color: #{$zinc-700};
+    #{$css-var-prefix}h4-color: #{$zinc-650};
+    #{$css-var-prefix}h5-color: #{$zinc-600};
+    #{$css-var-prefix}h6-color: #{$zinc-550};
+
+    // Highlighted text (<mark>)
+    #{$css-var-prefix}mark-background-color: #{mix($amber-100, $amber-50)};
+    #{$css-var-prefix}mark-color: #{$zinc-950};
+
+    // Inserted (<ins>) & Deleted (<del>)
+    #{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-750)};
+    #{$css-var-prefix}del-color: #{mix($red-500, $zinc-750)};
+
+    // Blockquote
+    #{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Button
+  @if map.get($modules, "content/button") {
+    // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
+    // Don't use, 'none, 'false, 'null', '0', etc.
+    #{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    #{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+
+  // Table
+  @if map.get($modules, "content/table") {
+    #{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
+  }
+
+  // Code
+  @if map.get($modules, "content/code") {
+    #{$css-var-prefix}code-background-color: #{mix($slate-50, $white, 75%)};
+    #{$css-var-prefix}code-color: #{$zinc-550};
+    #{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
+  }
+
+  // Form elements
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}form-element-background-color: #{mix($slate-50, $white, 25%)};
+    #{$css-var-prefix}form-element-selected-background-color: #{$slate-100};
+    #{$css-var-prefix}form-element-border-color: #{$slate-150};
+    #{$css-var-prefix}form-element-color: #{$zinc-850};
+    #{$css-var-prefix}form-element-placeholder-color: var(#{$css-var-prefix}muted-color);
+    #{$css-var-prefix}form-element-active-background-color: #{$white};
+    #{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-disabled-opacity: 0.5;
+    #{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $zinc-350)};
+    #{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $zinc-350, 75%)};
+    #{$css-var-prefix}form-element-invalid-focus-color: var(
+      #{$css-var-prefix}form-element-invalid-active-border-color
+    );
+    #{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $zinc-350)};
+    #{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $zinc-350, 75%)};
+    #{$css-var-prefix}form-element-valid-focus-color: var(
+      #{$css-var-prefix}form-element-valid-active-border-color
+    );
+
+    // Focus for buttons, radio and select
+    input:is(
+        [type="submit"],
+        [type="button"],
+        [type="reset"],
+        [type="checkbox"],
+        [type="radio"],
+        [type="file"]
+      ) {
+      #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
+    }
+  }
+
+  // Switch (input[type="checkbox"][role="switch"])
+  @if map.get($modules, "forms/checkbox-radio-switch") {
+    #{$css-var-prefix}switch-background-color: #{$slate-200};
+    #{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
+    #{$css-var-prefix}switch-color: #{$white};
+    #{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "light");
+  }
+
+  // Range (input[type="range"])
+  @if map.get($modules, "forms/input-range") {
+    #{$css-var-prefix}range-border-color: #{$slate-100};
+    #{$css-var-prefix}range-active-border-color: #{$slate-200};
+    #{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
+    #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
+    #{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Accordion (<details>)
+  @if map.get($modules, "components/accordion") {
+    #{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
+    #{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Card (<article>)
+  @if map.get($modules, "components/card") {
+    #{$css-var-prefix}card-background-color: var(#{$css-var-prefix}background-color);
+    #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}card-sectioning-background-color: #{mix($slate-50, $white, 25%)};
+  }
+
+  // Dropdown (details.dropdown)
+  @if map.get($modules, "components/dropdown") and $enable-classes {
+    #{$css-var-prefix}dropdown-background-color: #{$white};
+    #{$css-var-prefix}dropdown-border-color: #{$slate-50};
+    #{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}dropdown-hover-background-color: #{$slate-50};
+  }
+
+  // Loading ([aria-busy=true])
+  @if map.get($modules, "components/loading") {
+    #{$css-var-prefix}loading-spinner-opacity: 0.5;
+  }
+
+  // Modal (<dialog>)
+  @if map.get($modules, "components/modal") {
+    #{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($zinc-100, $zinc-50), 0.75)};
+  }
+
+  // Progress
+  @if map.get($modules, "components/progress") {
+    #{$css-var-prefix}progress-background-color: #{$slate-100};
+    #{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Tooltip ([data-tooltip])
+  @if map.get($modules, "components/tooltip") {
+    #{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
+    #{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
+  }
+
+  // Form validation icons
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    #{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $zinc-350, 75%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+  }
+
+  // Document
+  color-scheme: light;
+}
diff --git a/public/stylesheets/custom/_schemes.scss b/public/stylesheets/custom/_schemes.scss
new file mode 100644
index 0000000..8cdad62
--- /dev/null
+++ b/public/stylesheets/custom/_schemes.scss
@@ -0,0 +1,38 @@
+@use "sass:map";
+@use "../pico/settings" as *;
+
+@use "light";
+@use "dark";
+
+
+/**
+   * Color schemes
+   */
+
+// Light color scheme (Default)
+// Can be forced with data-theme="light"
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+  @include light.theme;
+}
+
+// Dark color scheme (Auto)
+// Automatically enabled if user has Dark mode enabled
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    @include dark.theme;
+  }
+}
+
+// Dark color scheme (Forced)
+// Enabled if forced with data-theme="dark"
+[data-theme="dark"] {
+  @include dark.theme;
+}
+
+#{$parent-selector} progress,
+#{$parent-selector} [type="checkbox"],
+#{$parent-selector} [type="radio"],
+#{$parent-selector} [type="range"] {
+  accent-color: var(#{$css-var-prefix}primary);
+}
\ No newline at end of file
diff --git a/public/stylesheets/custom/_styles.scss b/public/stylesheets/custom/_styles.scss
new file mode 100644
index 0000000..4a64726
--- /dev/null
+++ b/public/stylesheets/custom/_styles.scss
@@ -0,0 +1,475 @@
+@use "sass:map";
+@use "../pico/colors" as *;
+@use "../pico/settings" as *;
+@use "../pico/helpers/functions";
+@use "theme-colors";
+
+
+/**
+   * Styles
+   */
+
+:root {
+  // Typography
+  #{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+  #{$css-var-prefix}font-family-sans-serif: system-ui,
+  "Segoe UI",
+  Roboto,
+  Oxygen,
+  Ubuntu,
+  Cantarell,
+  Helvetica,
+  Arial,
+  "Helvetica Neue",
+  sans-serif,
+  var(#{$css-var-prefix}font-family-emoji);
+  #{$css-var-prefix}font-family-monospace: ui-monospace,
+  SFMono-Regular,
+  "SF Mono",
+  Menlo,
+  Consolas,
+  "Liberation Mono",
+  monospace,
+  var(#{$css-var-prefix}font-family-emoji);
+  #{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-sans-serif);
+  #{$css-var-prefix}line-height: 1.5;
+  #{$css-var-prefix}font-weight: 400;
+  #{$css-var-prefix}font-size: 1rem;
+  #{$css-var-prefix}text-underline-offset: 0.1rem;
+
+  // Responsive root font size
+  @if $enable-responsive-typography {
+    @each $key, $values in $breakpoints {
+      @if $values {
+        @media (min-width: map.get($values, "breakpoint")) {
+          #{$css-var-prefix}font-size: map.get($values, "root-font-size");
+        }
+      }
+    }
+  }
+
+  // Borders
+  #{$css-var-prefix}border-radius: 0.25rem;
+  #{$css-var-prefix}border-width: 0.0625rem;
+  #{$css-var-prefix}outline-width: 0.125rem;
+
+  // Transitions
+  #{$css-var-prefix}transition: 0.2s ease-in-out;
+
+  // Spacings
+  #{$css-var-prefix}spacing: 1rem;
+
+  // Spacings for typography elements
+  @if map.get($modules, "content/typography") {
+    #{$css-var-prefix}typography-spacing-vertical: 1rem;
+  }
+
+  // Spacings for body > header, body > main, body > footer, section, article
+  @if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") or map.get($modules, "components/card") or map.get($modules, "components/modal") {
+    #{$css-var-prefix}block-spacing-vertical: var(#{$css-var-prefix}spacing);
+    #{$css-var-prefix}block-spacing-horizontal: var(#{$css-var-prefix}spacing);
+  }
+
+  @if map.get($modules, "layout/grid") and $enable-classes {
+    #{$css-var-prefix}grid-column-gap: var(#{$css-var-prefix}spacing);
+    // #{$css-var-prefix}grid-row-gap: var(#{$css-var-prefix}spacing);
+  }
+
+  // Spacings for form elements and button
+  @if map.get($modules, "content/button") or map.get($modules, "forms/basic") {
+    #{$css-var-prefix}form-element-spacing-vertical: 0.5rem;
+    #{$css-var-prefix}form-element-spacing-horizontal: 1rem;
+  }
+
+  // Font weight for form labels & fieldsets legend
+  @if map.get($modules, "forms/basic") {
+    #{$css-var-prefix}form-label-font-weight: var(#{$css-var-prefix}font-weight);
+  }
+
+  // Group (role="group")
+  @if map.get($modules, "components/group") {
+    #{$css-var-prefix}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    #{$css-var-prefix}group-box-shadow-focus-with-button: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
+    #{$css-var-prefix}group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(#{$css-var-prefix}form-element-border-color);
+  }
+
+  // Modal (<dialog>)
+  @if map.get($modules, "components/modal") {
+    #{$css-var-prefix}modal-overlay-backdrop-filter: blur(0.375rem);
+  }
+
+  // Spacings for nav component
+  @if map.get($modules, "components/nav") {
+    #{$css-var-prefix}nav-element-spacing-vertical: 1rem;
+    #{$css-var-prefix}nav-element-spacing-horizontal: 0.5rem;
+    #{$css-var-prefix}nav-link-spacing-vertical: 0.5rem;
+    #{$css-var-prefix}nav-link-spacing-horizontal: 0.5rem;
+    #{$css-var-prefix}nav-breadcrumb-divider: ">";
+
+    nav {
+      .brand {
+        width: clamp(70px, 10%, 100px);
+      }
+
+      // ul:not(.brand) li{
+      //   &:hover{
+      //     background-color: $grey-50;
+      //     border-radius: 5px;
+      //   }
+      // }
+
+    }
+  }
+
+  // Checkboxes icons
+  @if map.get($modules, "forms/checkbox-radio-switch") {
+    #{$css-var-prefix}icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    #{$css-var-prefix}icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+  }
+
+  // Chevron icons
+  @if map.get($modules, "forms/basics") or map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
+    #{$css-var-prefix}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  }
+
+  // Datetime icons
+  @if map.get($modules, "forms/input-date") {
+    #{$css-var-prefix}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+    #{$css-var-prefix}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+  }
+
+  // Search icon
+  @if map.get($modules, "forms/input-search") {
+    #{$css-var-prefix}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+  }
+
+  // Close icon
+  @if map.get($modules, "components/modal") {
+    #{$css-var-prefix}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  }
+
+  // Loading icon (animated)
+  @if map.get($modules, "components/loading") {
+    // Inspired by https://codepen.io/aleksander351/pen/KzgKPo
+    #{$css-var-prefix}icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
+  }
+}
+
+// Responsives spacings
+@if $enable-responsive-spacings {
+
+  // Landmarks and section
+  @if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") {
+
+    #{$semantic-root-element}>header,
+    #{$semantic-root-element}>main,
+    #{$semantic-root-element}>footer,
+    section {
+      @each $key, $values in $breakpoints {
+        @if $values {
+          @media (min-width: map.get($values, "breakpoint")) {
+            $multiplier: 1;
+
+            @if $key =="sm" {
+              $multiplier: 1.25;
+            }
+
+            @else if $key =="md" {
+              $multiplier: 1.5;
+            }
+
+            @else if $key =="lg" {
+              $multiplier: 1.75;
+            }
+
+            @else if $key =="xl" {
+              $multiplier: 2;
+            }
+
+            @else if $key =="xxl" {
+              $multiplier: 2.25;
+            }
+
+            #{$css-var-prefix}block-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * $multiplier );
+          }
+        }
+      }
+    }
+  }
+
+  // Card (<article>)
+  @if map.get($modules, "components/card") {
+    article {
+      @each $key, $values in $breakpoints {
+        @if $values {
+          @media (min-width: map.get($values, "breakpoint")) {
+            $multiplier: 1;
+
+            @if $key =="sm" {
+              $multiplier: 1.25;
+            }
+
+            @else if $key =="md" {
+              $multiplier: 1.5;
+            }
+
+            @else if $key =="lg" {
+              $multiplier: 1.75;
+            }
+
+            @else if $key =="xl" {
+              $multiplier: 2;
+            }
+
+            @else if $key =="xxl" {
+              $multiplier: 2.25;
+            }
+
+            #{$css-var-prefix}block-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * $multiplier );
+            #{$css-var-prefix}block-spacing-horizontal: calc(var(#{$css-var-prefix}spacing) * $multiplier );
+          }
+        }
+      }
+    }
+  }
+}
+
+// Link
+@if map.get($modules, "content/link") {
+  a {
+    #{$css-var-prefix}text-decoration: none;
+
+    // Secondary & Contrast
+    @if $enable-classes {
+
+      &.secondary,
+      &.contrast {
+        #{$css-var-prefix}text-decoration: none;
+      }
+    }
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      #{$css-var-prefix}text-decoration: underline;
+    }
+
+  }
+}
+
+// Typography
+@if map.get($modules, "content/typography") {
+
+  // Small
+  small {
+    #{$css-var-prefix}font-size: 0.875em;
+  }
+
+  :where(progress)+small {
+    display: block;
+    width: 100%;
+    margin-top: calc(var(--pico-spacing) * -.75);
+    margin-bottom: var(--pico-spacing);
+    color: var(--pico-muted-color);
+  }
+
+  // Headings
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    #{$css-var-prefix}font-weight: 700;
+  }
+
+  h1 {
+    #{$css-var-prefix}font-size: 2rem;
+    #{$css-var-prefix}line-height: 1.125;
+    #{$css-var-prefix}typography-spacing-top: 3rem;
+  }
+
+  h2 {
+    #{$css-var-prefix}font-size: 1.75rem;
+    #{$css-var-prefix}line-height: 1.15;
+    #{$css-var-prefix}typography-spacing-top: 2.625rem;
+  }
+
+  h3 {
+    #{$css-var-prefix}font-size: 1.5rem;
+    #{$css-var-prefix}line-height: 1.175;
+    #{$css-var-prefix}typography-spacing-top: 2.25rem;
+  }
+
+  h4 {
+    #{$css-var-prefix}font-size: 1.25rem;
+    #{$css-var-prefix}line-height: 1.2;
+    #{$css-var-prefix}typography-spacing-top: 1.874rem;
+  }
+
+  h5 {
+    #{$css-var-prefix}font-size: 1.125rem;
+    #{$css-var-prefix}line-height: 1.225;
+    #{$css-var-prefix}typography-spacing-top: 1.6875rem;
+  }
+
+  h6 {
+    #{$css-var-prefix}font-size: 1rem;
+    #{$css-var-prefix}line-height: 1.25;
+    #{$css-var-prefix}typography-spacing-top: 1.5rem;
+  }
+}
+
+// Table
+@if map.get($modules, "content/table") {
+
+  thead,
+  tfoot {
+
+    th,
+    td {
+      #{$css-var-prefix}font-weight: 600;
+      #{$css-var-prefix}border-width: 0.1875rem;
+    }
+  }
+}
+
+// Code
+@if map.get($modules, "content/code") {
+
+  pre,
+  code,
+  kbd,
+  samp {
+    #{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-monospace);
+  }
+
+  kbd {
+    #{$css-var-prefix}font-weight: bolder;
+  }
+}
+
+// Inputs and Selects
+input:not([type="submit"],
+  [type="button"],
+  [type="reset"],
+  [type="checkbox"],
+  [type="radio"],
+  [type="file"]),
+:where(select, textarea) {
+  #{$css-var-prefix}outline-width: 0.0625rem;
+}
+
+[type="search"] {
+  #{$css-var-prefix}border-radius: 5rem;
+}
+
+// Checkboxes, Radios and Switches
+@if map.get($modules, "forms/checkbox-radio-switch") {
+
+  [type="checkbox"],
+  [type="radio"] {
+    #{$css-var-prefix}border-width: 0.125rem;
+  }
+
+  [type="checkbox"][role="switch"] {
+    #{$css-var-prefix}border-width: 0.1875rem;
+  }
+}
+
+// Dropdown (details.dropdown)
+@if map.get($modules, "components/dropdown") and $enable-classes {
+  details.dropdown {
+    summary:not([role="button"]) {
+      #{$css-var-prefix}outline-width: 0.0625rem;
+    }
+  }
+
+  nav {
+    details.dropdown {
+      summary:focus-visible {
+        #{$css-var-prefix}outline-width: 0.125rem;
+      }
+    }
+  }
+}
+
+// Group (role="group")
+@if map.get($modules, "components/group") {
+  [role="search"] {
+    #{$css-var-prefix}border-radius: 5rem;
+  }
+
+  [role="search"],
+  [role="group"] {
+    @if $enable-classes {
+
+      &:has(button.secondary:focus,
+        [type="submit"].secondary:focus,
+        [type="button"].secondary:focus,
+        [role="button"].secondary:focus) {
+        #{$css-var-prefix}group-box-shadow-focus-with-button: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
+      }
+
+      &:has(button.contrast:focus,
+        [type="submit"].contrast:focus,
+        [type="button"].contrast:focus,
+        [role="button"].contrast:focus) {
+        #{$css-var-prefix}group-box-shadow-focus-with-button: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
+      }
+    }
+
+    margin-top: calc(var(--pico-spacing) * .25);
+
+    button,
+    [type="submit"],
+    [type="button"],
+    [role="button"] {
+      #{$css-var-prefix}form-element-spacing-horizontal: 2rem;
+    }
+  }
+}
+
+// Chevron icons
+// Change the icon color to white for accordion and dropdown buttons
+@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
+  #{$parent-selector} details {
+    summary {
+      $selector: '&[role="button"]';
+
+      @if $enable-classes {
+        $selector: "#{$selector}:not(.outline)";
+      }
+
+      #{$selector} {
+        &::after {
+          filter: brightness(0) invert(1);
+        }
+      }
+    }
+  }
+}
+
+// Loading icon (animated)
+@if map.get($modules, "components/loading") {
+
+  // Change the icon color to white for buttons
+  #{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
+    $selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
+
+    @if $enable-classes {
+      $selector: "#{$selector}:not(.outline)";
+    }
+
+    #{$selector} {
+      &::before {
+        @if theme-colors.get("primary-inverse", "dark")==$white {
+          filter: brightness(0) invert(1);
+        }
+
+        @else {
+          filter: brightness(0) invert(0);
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/public/stylesheets/custom/_theme-colors.scss b/public/stylesheets/custom/_theme-colors.scss
new file mode 100644
index 0000000..3fc18f7
--- /dev/null
+++ b/public/stylesheets/custom/_theme-colors.scss
@@ -0,0 +1,514 @@
+@use "sass:map";
+@use "../pico/colors" as *;
+@use "../pico/settings" as *;
+
+$color-mappings: (
+  "crabnpaper": (
+    "dark": (
+      "text-selection-color": rgba($azure-350, 0.1875),
+      "primary": $azure-350,
+      "primary-background": $azure-550,
+      "primary-underline": rgba($azure-350, 0.5),
+      "primary-hover": $azure-250,
+      "primary-hover-background": $azure-500,
+      "primary-focus": rgba($azure-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($azure-400, 0.25),
+      "primary": $azure-550,
+      "primary-background": $azure-550,
+      "primary-underline": rgba($azure-550, 0.5),
+      "primary-hover": $azure-650,
+      "primary-hover-background": $azure-600,
+      "primary-focus": rgba($azure-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "amber": (
+    "dark": (
+      "text-selection-color": rgba($amber-350, 0.1875),
+      "primary": $amber-350,
+      "primary-background": $amber-200,
+      "primary-underline": rgba($amber-350, 0.5),
+      "primary-hover": $amber-250,
+      "primary-hover-background": $amber-150,
+      "primary-focus": rgba($amber-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($amber-400, 0.25),
+      "primary": $amber-550,
+      "primary-background": $amber-200,
+      "primary-underline": rgba($amber-550, 0.5),
+      "primary-hover": $amber-650,
+      "primary-hover-background": $amber-250,
+      "primary-focus": rgba($amber-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "azure": (
+    "dark": (
+      "text-selection-color": rgba($azure-350, 0.1875),
+      "primary": $azure-350,
+      "primary-background": $azure-550,
+      "primary-underline": rgba($azure-350, 0.5),
+      "primary-hover": $azure-250,
+      "primary-hover-background": $azure-500,
+      "primary-focus": rgba($azure-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($azure-400, 0.25),
+      "primary": $azure-550,
+      "primary-background": $azure-550,
+      "primary-underline": rgba($azure-550, 0.5),
+      "primary-hover": $azure-650,
+      "primary-hover-background": $azure-600,
+      "primary-focus": rgba($azure-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "blue": (
+    "dark": (
+      "text-selection-color": rgba($blue-350, 0.1875),
+      "primary": $blue-350,
+      "primary-background": $blue-550,
+      "primary-underline": rgba($blue-350, 0.5),
+      "primary-hover": $blue-250,
+      "primary-hover-background": $blue-500,
+      "primary-focus": rgba($blue-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($blue-400, 0.25),
+      "primary": $blue-550,
+      "primary-background": $blue-550,
+      "primary-underline": rgba($blue-550, 0.5),
+      "primary-hover": $blue-650,
+      "primary-hover-background": $blue-600,
+      "primary-focus": rgba($blue-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "cyan": (
+    "dark": (
+      "text-selection-color": rgba($cyan-350, 0.1875),
+      "primary": $cyan-350,
+      "primary-background": $cyan-550,
+      "primary-underline": rgba($cyan-350, 0.5),
+      "primary-hover": $cyan-250,
+      "primary-hover-background": $cyan-500,
+      "primary-focus": rgba($cyan-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($cyan-400, 0.25),
+      "primary": $cyan-550,
+      "primary-background": $cyan-550,
+      "primary-underline": rgba($cyan-550, 0.5),
+      "primary-hover": $cyan-650,
+      "primary-hover-background": $cyan-600,
+      "primary-focus": rgba($cyan-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "fuchsia": (
+    "dark": (
+      "text-selection-color": rgba($fuchsia-350, 0.1875),
+      "primary": $fuchsia-350,
+      "primary-background": $fuchsia-550,
+      "primary-underline": rgba($fuchsia-350, 0.5),
+      "primary-hover": $fuchsia-250,
+      "primary-hover-background": $fuchsia-500,
+      "primary-focus": rgba($fuchsia-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($fuchsia-400, 0.25),
+      "primary": $fuchsia-550,
+      "primary-background": $fuchsia-550,
+      "primary-underline": rgba($fuchsia-550, 0.5),
+      "primary-hover": $fuchsia-650,
+      "primary-hover-background": $fuchsia-600,
+      "primary-focus": rgba($fuchsia-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "green": (
+    "dark": (
+      "text-selection-color": rgba($green-350, 0.1875),
+      "primary": $green-350,
+      "primary-background": $green-500,
+      "primary-underline": rgba($green-350, 0.5),
+      "primary-hover": $green-250,
+      "primary-hover-background": $green-450,
+      "primary-focus": rgba($green-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($green-400, 0.25),
+      "primary": $green-550,
+      "primary-background": $green-500,
+      "primary-underline": rgba($green-550, 0.5),
+      "primary-hover": $green-650,
+      "primary-hover-background": $green-550,
+      "primary-focus": rgba($green-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "grey": (
+    "dark": (
+      "text-selection-color": rgba($grey-350, 0.1875),
+      "primary": $grey-350,
+      "primary-background": $grey-300,
+      "primary-underline": rgba($grey-350, 0.5),
+      "primary-hover": $grey-250,
+      "primary-hover-background": $grey-250,
+      "primary-focus": rgba($grey-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($grey-400, 0.25),
+      "primary": $grey-550,
+      "primary-background": $grey-300,
+      "primary-underline": rgba($grey-550, 0.5),
+      "primary-hover": $grey-650,
+      "primary-hover-background": $grey-350,
+      "primary-focus": rgba($grey-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "indigo": (
+    "dark": (
+      "text-selection-color": rgba($indigo-350, 0.1875),
+      "primary": $indigo-350,
+      "primary-background": $indigo-600,
+      "primary-underline": rgba($indigo-350, 0.5),
+      "primary-hover": $indigo-250,
+      "primary-hover-background": $indigo-550,
+      "primary-focus": rgba($indigo-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($indigo-400, 0.25),
+      "primary": $indigo-550,
+      "primary-background": $indigo-600,
+      "primary-underline": rgba($indigo-550, 0.5),
+      "primary-hover": $indigo-650,
+      "primary-hover-background": $indigo-650,
+      "primary-focus": rgba($indigo-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "jade": (
+    "dark": (
+      "text-selection-color": rgba($jade-350, 0.1875),
+      "primary": $jade-350,
+      "primary-background": $jade-550,
+      "primary-underline": rgba($jade-350, 0.5),
+      "primary-hover": $jade-250,
+      "primary-hover-background": $jade-500,
+      "primary-focus": rgba($jade-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($jade-400, 0.25),
+      "primary": $jade-550,
+      "primary-background": $jade-550,
+      "primary-underline": rgba($jade-550, 0.5),
+      "primary-hover": $jade-650,
+      "primary-hover-background": $jade-600,
+      "primary-focus": rgba($jade-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "lime": (
+    "dark": (
+      "text-selection-color": rgba($lime-350, 0.1875),
+      "primary": $lime-350,
+      "primary-background": $lime-200,
+      "primary-underline": rgba($lime-350, 0.5),
+      "primary-hover": $lime-250,
+      "primary-hover-background": $lime-150,
+      "primary-focus": rgba($lime-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($lime-400, 0.25),
+      "primary": $lime-550,
+      "primary-background": $lime-200,
+      "primary-underline": rgba($lime-550, 0.5),
+      "primary-hover": $lime-650,
+      "primary-hover-background": $lime-250,
+      "primary-focus": rgba($lime-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "orange": (
+    "dark": (
+      "text-selection-color": rgba($orange-350, 0.1875),
+      "primary": $orange-350,
+      "primary-background": $orange-500,
+      "primary-underline": rgba($orange-350, 0.5),
+      "primary-hover": $orange-250,
+      "primary-hover-background": $orange-450,
+      "primary-focus": rgba($orange-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($orange-400, 0.25),
+      "primary": $orange-550,
+      "primary-background": $orange-500,
+      "primary-underline": rgba($orange-550, 0.5),
+      "primary-hover": $orange-650,
+      "primary-hover-background": $orange-550,
+      "primary-focus": rgba($orange-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "pink": (
+    "dark": (
+      "text-selection-color": rgba($pink-350, 0.1875),
+      "primary": $pink-350,
+      "primary-background": $pink-500,
+      "primary-underline": rgba($pink-350, 0.5),
+      "primary-hover": $pink-250,
+      "primary-hover-background": $pink-450,
+      "primary-focus": rgba($pink-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($pink-400, 0.25),
+      "primary": $pink-550,
+      "primary-background": $pink-500,
+      "primary-underline": rgba($pink-550, 0.5),
+      "primary-hover": $pink-650,
+      "primary-hover-background": $pink-550,
+      "primary-focus": rgba($pink-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "pumpkin": (
+    "dark": (
+      "text-selection-color": rgba($pumpkin-350, 0.1875),
+      "primary": $pumpkin-350,
+      "primary-background": $pumpkin-300,
+      "primary-underline": rgba($pumpkin-350, 0.5),
+      "primary-hover": $pumpkin-250,
+      "primary-hover-background": $pumpkin-250,
+      "primary-focus": rgba($pumpkin-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($pumpkin-400, 0.25),
+      "primary": $pumpkin-550,
+      "primary-background": $pumpkin-300,
+      "primary-underline": rgba($pumpkin-550, 0.5),
+      "primary-hover": $pumpkin-650,
+      "primary-hover-background": $pumpkin-350,
+      "primary-focus": rgba($pumpkin-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "purple": (
+    "dark": (
+      "text-selection-color": rgba($purple-350, 0.1875),
+      "primary": $purple-350,
+      "primary-background": $purple-600,
+      "primary-underline": rgba($purple-350, 0.5),
+      "primary-hover": $purple-250,
+      "primary-hover-background": $purple-550,
+      "primary-focus": rgba($purple-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($purple-400, 0.25),
+      "primary": $purple-550,
+      "primary-background": $purple-600,
+      "primary-underline": rgba($purple-550, 0.5),
+      "primary-hover": $purple-650,
+      "primary-hover-background": $purple-650,
+      "primary-focus": rgba($purple-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "red": (
+    "dark": (
+      "text-selection-color": rgba($red-350, 0.1875),
+      "primary": $red-350,
+      "primary-background": $red-550,
+      "primary-underline": rgba($red-350, 0.5),
+      "primary-hover": $red-250,
+      "primary-hover-background": $red-500,
+      "primary-focus": rgba($red-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($red-400, 0.25),
+      "primary": $red-550,
+      "primary-background": $red-550,
+      "primary-underline": rgba($red-550, 0.5),
+      "primary-hover": $red-650,
+      "primary-hover-background": $red-600,
+      "primary-focus": rgba($red-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "sand": (
+    "dark": (
+      "text-selection-color": rgba($sand-350, 0.1875),
+      "primary": $sand-350,
+      "primary-background": $sand-200,
+      "primary-underline": rgba($sand-350, 0.5),
+      "primary-hover": $sand-250,
+      "primary-hover-background": $sand-150,
+      "primary-focus": rgba($sand-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($sand-400, 0.25),
+      "primary": $sand-550,
+      "primary-background": $sand-200,
+      "primary-underline": rgba($sand-550, 0.5),
+      "primary-hover": $sand-650,
+      "primary-hover-background": $sand-250,
+      "primary-focus": rgba($sand-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "slate": (
+    "dark": (
+      "text-selection-color": rgba($slate-350, 0.1875),
+      "primary": $slate-350,
+      "primary-background": $slate-600,
+      "primary-underline": rgba($slate-350, 0.5),
+      "primary-hover": $slate-250,
+      "primary-hover-background": $slate-550,
+      "primary-focus": rgba($slate-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($slate-400, 0.25),
+      "primary": $slate-550,
+      "primary-background": $slate-600,
+      "primary-underline": rgba($slate-550, 0.5),
+      "primary-hover": $slate-650,
+      "primary-hover-background": $slate-650,
+      "primary-focus": rgba($slate-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "violet": (
+    "dark": (
+      "text-selection-color": rgba($violet-350, 0.1875),
+      "primary": $violet-350,
+      "primary-background": $violet-600,
+      "primary-underline": rgba($violet-350, 0.5),
+      "primary-hover": $violet-250,
+      "primary-hover-background": $violet-550,
+      "primary-focus": rgba($violet-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($violet-400, 0.25),
+      "primary": $violet-550,
+      "primary-background": $violet-600,
+      "primary-underline": rgba($violet-550, 0.5),
+      "primary-hover": $violet-650,
+      "primary-hover-background": $violet-650,
+      "primary-focus": rgba($violet-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "yellow": (
+    "dark": (
+      "text-selection-color": rgba($yellow-350, 0.1875),
+      "primary": $yellow-350,
+      "primary-background": $yellow-100,
+      "primary-underline": rgba($yellow-350, 0.5),
+      "primary-hover": $yellow-250,
+      "primary-hover-background": mix($yellow-100, $yellow-50),
+      "primary-focus": rgba($yellow-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($yellow-400, 0.25),
+      "primary": $yellow-550,
+      "primary-background": $yellow-100,
+      "primary-underline": rgba($yellow-550, 0.5),
+      "primary-hover": $yellow-650,
+      "primary-hover-background": $yellow-150,
+      "primary-focus": rgba($yellow-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "zinc": (
+    "dark": (
+      "text-selection-color": rgba($zinc-350, 0.1875),
+      "primary": $zinc-350,
+      "primary-background": $zinc-550,
+      "primary-underline": rgba($zinc-350, 0.5),
+      "primary-hover": $zinc-250,
+      "primary-hover-background": $zinc-500,
+      "primary-focus": rgba($zinc-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($zinc-400, 0.25),
+      "primary": $zinc-550,
+      "primary-background": $zinc-550,
+      "primary-underline": rgba($zinc-550, 0.5),
+      "primary-hover": $zinc-650,
+      "primary-hover-background": $zinc-600,
+      "primary-focus": rgba($zinc-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+);
+
+@function get($key, $mode: "light") {
+  @return map.get(map.get(map.get($color-mappings, $theme-color), $mode), $key);
+}
diff --git a/public/stylesheets/pico/_index.scss b/public/stylesheets/pico/_index.scss
new file mode 100644
index 0000000..33d57be
--- /dev/null
+++ b/public/stylesheets/pico/_index.scss
@@ -0,0 +1,49 @@
+@use "helpers/copyright";
+
+// Config
+@forward "settings";
+
+// Theming
+@use "themes/default";
+
+// Layout
+@use "layout/document"; // html
+@use "layout/landmarks"; // body, header, main, footer
+@use "layout/section"; // section
+@use "layout/container"; // .container, .container-fluid
+@use "layout/grid"; // .grid
+@use "layout/overflow-auto"; // .overflow-auto
+
+// Content
+@use "content/typography"; // headings, p, ul, blockquote, ...
+@use "content/link"; // a, role="link"
+@use "content/button"; // button, role="button", type="button", type="submit" ...
+@use "content/table"; // table, tr, td, ...
+@use "content/embedded"; // audio, canvas, iframe, img, svg, video
+@use "content/code"; // pre, code, ...
+@use "content/figure"; // figure, figcaption
+@use "content/miscs"; // hr, template, [hidden], dialog, canvas
+
+// Forms
+@use "forms/basics"; // input, select, textarea, label, fieldset, legend
+@use "forms/checkbox-radio-switch"; // type="checkbox", type="radio", role="switch"
+@use "forms/input-color"; // type="color"
+@use "forms/input-date"; // type="date", type="datetime-local", type="month", type="time", type="week"
+@use "forms/input-file"; // type="file"
+@use "forms/input-range"; // type="range"
+@use "forms/input-search"; // type="search"
+
+// Components
+@use "components/accordion"; // details, summary
+@use "components/card"; // article
+@use "components/dropdown"; // details.dropdown
+@use "components/group"; // role="group"
+@use "components/loading"; // aria-busy=true
+@use "components/modal"; // dialog
+@use "components/nav"; // nav
+@use "components/progress"; // progress
+@use "components/tooltip"; // data-tooltip
+
+// Utilities
+@use "utilities/accessibility"; // -ms-touch-action, aria-*
+@use "utilities/reduce-motion"; // prefers-reduced-motion
diff --git a/public/stylesheets/pico/_settings.scss b/public/stylesheets/pico/_settings.scss
new file mode 100644
index 0000000..d1fa911
--- /dev/null
+++ b/public/stylesheets/pico/_settings.scss
@@ -0,0 +1,148 @@
+@use "sass:map";
+
+// Settings
+// ––––––––––––––––––––
+
+// Theme color
+$theme-color: "azure" !default; // amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc
+
+// Prefix for CSS variables
+$css-var-prefix: "--pico-" !default; // Must start with "--"
+
+// Define the root element used to target <header>, <main>, <footer>
+// with $enable-semantic-container and $enable-responsive-spacings
+$semantic-root-element: "body" !default;
+
+// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
+$enable-semantic-container: false !default;
+
+// Enable a centered viewport for <header>, <main>, <footer> inside $semantic-root-element
+// Fluid layout if disabled
+$enable-viewport: true !default;
+
+// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
+// Fixed spacings by default
+$enable-responsive-spacings: false !default;
+
+// Enable responsive typography
+// Fixed root element size (rem) if disabled
+$enable-responsive-typography: true !default;
+
+// Enable .classes
+// .classless version if disabled
+$enable-classes: true !default;
+
+// Enable transitions
+$enable-transitions: true !default;
+
+// Enable overriding with !important
+$enable-important: true !default;
+
+// Optional parent selector
+// If defined, all HTML tags are wrapped with this selector
+// :root is not wrapped
+$parent-selector: "" !default;
+
+// Breakpoints, viewports and root font size
+$breakpoints: () !default;
+$breakpoints: map.deep-merge(
+  (
+    // Small (landscape phones)
+    // Font size: 17px
+    sm:
+      (
+        breakpoint: 576px,
+        viewport: 510px,
+        root-font-size: 106.25%,
+      ),
+
+    // Medium (tablets)
+    // Font size: 18px
+    md:
+      (
+        breakpoint: 768px,
+        viewport: 700px,
+        root-font-size: 112.5%,
+      ),
+
+    // Large
+    // Font size: 19px
+    lg:
+      (
+        breakpoint: 1024px,
+        viewport: 950px,
+        root-font-size: 118.75%,
+      ),
+
+    // Extra large
+    // Font size: 20px
+    xl:
+      (
+        breakpoint: 1280px,
+        viewport: 1200px,
+        root-font-size: 125%,
+      ),
+
+    // Extra extra large
+    // Font size: 21px
+    xxl:
+      (
+        breakpoint: 1536px,
+        viewport: 1450px,
+        root-font-size: 131.25%,
+      )
+  ),
+  $breakpoints
+);
+
+// Modules to export
+$modules: () !default;
+$modules: map.merge(
+  (
+    // Theme
+    "themes/default": true,
+
+    // Layout
+    "layout/document": true,
+    "layout/landmarks": true,
+    "layout/container": true,
+    "layout/section": true,
+    "layout/grid": true,
+    "layout/overflow-auto": true,
+
+    // Content
+    "content/link": true,
+    "content/typography": true,
+    "content/embedded": true,
+    "content/button": true,
+    "content/table": true,
+    "content/code": true,
+    "content/figure": true,
+    "content/miscs": true,
+
+    // Forms
+    "forms/basics": true,
+    "forms/checkbox-radio-switch": true,
+    "forms/input-color": true,
+    "forms/input-date": true,
+    "forms/input-file": true,
+    "forms/input-range": true,
+    "forms/input-search": true,
+
+    // Components
+    "components/accordion": true,
+    "components/card": true,
+    "components/dropdown": true,
+    "components/group": true,
+    "components/loading": true,
+    "components/modal": true,
+    "components/nav": true,
+    "components/progress": true,
+    "components/tooltip": true,
+
+    // Utilities
+    "utilities/accessibility": true,
+    "utilities/reduce-motion": true
+  ),
+  $modules
+);
diff --git a/public/stylesheets/pico/colors/_index.scss b/public/stylesheets/pico/colors/_index.scss
new file mode 100644
index 0000000..ec7c615
--- /dev/null
+++ b/public/stylesheets/pico/colors/_index.scss
@@ -0,0 +1,886 @@
+// B&W
+$black: #000;
+$white: #fff;
+
+// Red
+$red-950: #1c0d06;
+$red-900: #30130a;
+$red-850: #45150c;
+$red-800: #5c160d;
+$red-750: #72170f;
+$red-700: #861d13;
+$red-650: #9b2318;
+$red-600: #af291d;
+$red-550: #c52f21;
+$red-500: #d93526;
+$red-450: #ee402e;
+$red-400: #f06048;
+$red-350: #f17961;
+$red-300: #f38f79;
+$red-250: #f5a390;
+$red-200: #f5b7a8;
+$red-150: #f6cabf;
+$red-100: #f8dcd6;
+$red-50: #faeeeb;
+$red: $red-550;
+
+// Pink
+$pink-950: #25060c;
+$pink-900: #380916;
+$pink-850: #4b0c1f;
+$pink-800: #5f0e28;
+$pink-750: #740f31;
+$pink-700: #88143b;
+$pink-650: #9d1945;
+$pink-600: #b21e4f;
+$pink-550: #c72259;
+$pink-500: #d92662;
+$pink-450: #f42c6f;
+$pink-400: #f6547e;
+$pink-350: #f7708e;
+$pink-300: #f8889e;
+$pink-250: #f99eae;
+$pink-200: #f9b4be;
+$pink-150: #f9c8ce;
+$pink-100: #f9dbdf;
+$pink-50: #fbedef;
+$pink: $pink-500;
+
+// Fuchsia
+$fuchsia-950: #230518;
+$fuchsia-900: #360925;
+$fuchsia-850: #480b33;
+$fuchsia-800: #5c0d41;
+$fuchsia-750: #700e4f;
+$fuchsia-700: #84135e;
+$fuchsia-650: #98176d;
+$fuchsia-600: #ac1c7c;
+$fuchsia-550: #c1208b;
+$fuchsia-500: #d9269d;
+$fuchsia-450: #ed2aac;
+$fuchsia-400: #f748b7;
+$fuchsia-350: #f869bf;
+$fuchsia-300: #f983c7;
+$fuchsia-250: #fa9acf;
+$fuchsia-200: #f9b1d8;
+$fuchsia-150: #f9c6e1;
+$fuchsia-100: #f9daea;
+$fuchsia-50: #fbedf4;
+$fuchsia: $fuchsia-550;
+
+// Purple
+$purple-950: #1e0820;
+$purple-900: #2d0f33;
+$purple-850: #3d1545;
+$purple-800: #4d1a57;
+$purple-750: #5e206b;
+$purple-700: #6f277d;
+$purple-650: #802e90;
+$purple-600: #9236a4;
+$purple-550: #aa40bf;
+$purple-500: #b645cd;
+$purple-450: #c652dc;
+$purple-400: #cd68e0;
+$purple-350: #d47de4;
+$purple-300: #db90e8;
+$purple-250: #e2a3eb;
+$purple-200: #e7b6ee;
+$purple-150: #edc9f1;
+$purple-100: #f2dcf4;
+$purple-50: #f8eef9;
+$purple: $purple-600;
+
+// Violet
+$violet-950: #190928;
+$violet-900: #251140;
+$violet-850: #321856;
+$violet-800: #3f1e6d;
+$violet-750: #4d2585;
+$violet-700: #5b2d9c;
+$violet-650: #6935b3;
+$violet-600: #7540bf;
+$violet-550: #8352c5;
+$violet-500: #9062ca;
+$violet-450: #9b71cf;
+$violet-400: #a780d4;
+$violet-350: #b290d9;
+$violet-300: #bd9fdf;
+$violet-250: #c9afe4;
+$violet-200: #d3bfe8;
+$violet-150: #decfed;
+$violet-100: #e8dff2;
+$violet-50: #f3eff7;
+$violet: $violet-600;
+
+// Indigo
+$indigo-950: #110b31;
+$indigo-900: #181546;
+$indigo-850: #1f1e5e;
+$indigo-800: #272678;
+$indigo-750: #2f2f92;
+$indigo-700: #3838ab;
+$indigo-650: #4040bf;
+$indigo-600: #524ed2;
+$indigo-550: #655cd6;
+$indigo-500: #7569da;
+$indigo-450: #8577dd;
+$indigo-400: #9486e1;
+$indigo-350: #a294e5;
+$indigo-300: #b0a3e8;
+$indigo-250: #bdb2ec;
+$indigo-200: #cac1ee;
+$indigo-150: #d8d0f1;
+$indigo-100: #e5e0f4;
+$indigo-50: #f2f0f9;
+$indigo: $indigo-600;
+
+// Blue
+$blue-950: #080f2d;
+$blue-900: #0c1a41;
+$blue-850: #0e2358;
+$blue-800: #0f2d70;
+$blue-750: #0f3888;
+$blue-700: #1343a0;
+$blue-650: #184eb8;
+$blue-600: #1d59d0;
+$blue-550: #2060df;
+$blue-500: #3c71f7;
+$blue-450: #5c7ef8;
+$blue-400: #748bf8;
+$blue-350: #8999f9;
+$blue-300: #9ca7fa;
+$blue-250: #aeb5fb;
+$blue-200: #bfc3fa;
+$blue-150: #d0d2fa;
+$blue-100: #e0e1fa;
+$blue-50: #f0f0fb;
+$blue: $blue-550;
+
+// Azure
+$azure-950: #04121d;
+$azure-900: #061e2f;
+$azure-850: #052940;
+$azure-800: #033452;
+$azure-750: #014063;
+$azure-700: #014c75;
+$azure-650: #015887;
+$azure-600: #02659a;
+$azure-550: #0172ad;
+$azure-500: #017fc0;
+$azure-450: #018cd4;
+$azure-400: #029ae8;
+$azure-350: #01aaff;
+$azure-300: #51b4ff;
+$azure-250: #79c0ff;
+$azure-200: #9bccfd;
+$azure-150: #b7d9fc;
+$azure-100: #d1e5fb;
+$azure-50: #e9f2fc;
+$azure: $azure-550;
+
+// Cyan
+$cyan-950: #041413;
+$cyan-900: #051f1f;
+$cyan-850: #052b2b;
+$cyan-800: #043737;
+$cyan-750: #014343;
+$cyan-700: #015050;
+$cyan-650: #025d5d;
+$cyan-600: #046a6a;
+$cyan-550: #047878;
+$cyan-500: #058686;
+$cyan-450: #059494;
+$cyan-400: #05a2a2;
+$cyan-350: #0ab1b1;
+$cyan-300: #0ac2c2;
+$cyan-250: #0ccece;
+$cyan-200: #25dddd;
+$cyan-150: #3deceb;
+$cyan-100: #58faf9;
+$cyan-50: #c3fcfa;
+$cyan: $cyan-550;
+
+// Jade
+$jade-950: #04140c;
+$jade-900: #052014;
+$jade-850: #042c1b;
+$jade-800: #033823;
+$jade-750: #00452b;
+$jade-700: #015234;
+$jade-650: #005f3d;
+$jade-600: #006d46;
+$jade-550: #007a50;
+$jade-500: #00895a;
+$jade-450: #029764;
+$jade-400: #00a66e;
+$jade-350: #00b478;
+$jade-300: #00c482;
+$jade-250: #00cc88;
+$jade-200: #21e299;
+$jade-150: #39f1a6;
+$jade-100: #70fcba;
+$jade-50: #cbfce1;
+$jade: $jade-550;
+
+// Green
+$green-950: #0b1305;
+$green-900: #131f07;
+$green-850: #152b07;
+$green-800: #173806;
+$green-750: #1a4405;
+$green-700: #205107;
+$green-650: #265e09;
+$green-600: #2c6c0c;
+$green-550: #33790f;
+$green-500: #398712;
+$green-450: #409614;
+$green-400: #47a417;
+$green-350: #4eb31b;
+$green-300: #55c21e;
+$green-250: #5dd121;
+$green-200: #62d926;
+$green-150: #77ef3d;
+$green-100: #95fb62;
+$green-50: #d7fbc1;
+$green: $green-500;
+
+// Lime
+$lime-950: #101203;
+$lime-900: #191d03;
+$lime-850: #202902;
+$lime-800: #273500;
+$lime-750: #304100;
+$lime-700: #394d00;
+$lime-650: #435a00;
+$lime-600: #4d6600;
+$lime-550: #577400;
+$lime-500: #628100;
+$lime-450: #6c8f00;
+$lime-400: #779c00;
+$lime-350: #82ab00;
+$lime-300: #8eb901;
+$lime-250: #99c801;
+$lime-200: #a5d601;
+$lime-150: #b2e51a;
+$lime-100: #c1f335;
+$lime-50: #defc85;
+$lime: $lime-200;
+
+// Yellow
+$yellow-950: #141103;
+$yellow-900: #1f1c02;
+$yellow-850: #2b2600;
+$yellow-800: #363100;
+$yellow-750: #423c00;
+$yellow-700: #4e4700;
+$yellow-650: #5b5300;
+$yellow-600: #685f00;
+$yellow-550: #756b00;
+$yellow-500: #827800;
+$yellow-450: #908501;
+$yellow-400: #9e9200;
+$yellow-350: #ad9f00;
+$yellow-300: #bbac00;
+$yellow-250: #caba01;
+$yellow-200: #d9c800;
+$yellow-150: #e8d600;
+$yellow-100: #f2df0d;
+$yellow-50: #fdf1b4;
+$yellow: $yellow-100;
+
+// Amber
+$amber-950: #161003;
+$amber-900: #231a03;
+$amber-850: #312302;
+$amber-800: #3f2d00;
+$amber-750: #4d3700;
+$amber-700: #5b4200;
+$amber-650: #694d00;
+$amber-600: #785800;
+$amber-550: #876400;
+$amber-500: #977000;
+$amber-450: #a77c00;
+$amber-400: #b78800;
+$amber-350: #c79400;
+$amber-300: #d8a100;
+$amber-250: #e8ae01;
+$amber-200: #ffbf00;
+$amber-150: #fecc63;
+$amber-100: #fddea6;
+$amber-50: #fcefd9;
+$amber: $amber-200;
+
+// Pumpkin
+$pumpkin-950: #180f04;
+$pumpkin-900: #271805;
+$pumpkin-850: #372004;
+$pumpkin-800: #482802;
+$pumpkin-750: #593100;
+$pumpkin-700: #693a00;
+$pumpkin-650: #7a4400;
+$pumpkin-600: #8b4f00;
+$pumpkin-550: #9c5900;
+$pumpkin-500: #ad6400;
+$pumpkin-450: #bf6e00;
+$pumpkin-400: #d27a01;
+$pumpkin-350: #e48500;
+$pumpkin-300: #ff9500;
+$pumpkin-250: #ffa23a;
+$pumpkin-200: #feb670;
+$pumpkin-150: #fcca9b;
+$pumpkin-100: #fcdcc1;
+$pumpkin-50: #fceee3;
+$pumpkin: $pumpkin-300;
+
+// Orange
+$orange-950: #1b0d06;
+$orange-900: #2d1509;
+$orange-850: #411a0a;
+$orange-800: #561e0a;
+$orange-750: #6b220a;
+$orange-700: #7f270b;
+$orange-650: #942d0d;
+$orange-600: #a83410;
+$orange-550: #bd3c13;
+$orange-500: #d24317;
+$orange-450: #e74b1a;
+$orange-400: #f45d2c;
+$orange-350: #f56b3d;
+$orange-300: #f68e68;
+$orange-250: #f8a283;
+$orange-200: #f8b79f;
+$orange-150: #f8cab9;
+$orange-100: #f9dcd2;
+$orange-50: #faeeea;
+$orange: $orange-500;
+
+// Sand
+$sand-950: #111110;
+$sand-900: #1c1b19;
+$sand-850: #272622;
+$sand-800: #32302b;
+$sand-750: #3d3b35;
+$sand-700: #49463f;
+$sand-650: #55524a;
+$sand-600: #615e55;
+$sand-550: #6e6a60;
+$sand-500: #7b776b;
+$sand-450: #888377;
+$sand-400: #959082;
+$sand-350: #a39e8f;
+$sand-300: #b0ab9b;
+$sand-250: #beb8a7;
+$sand-200: #ccc6b4;
+$sand-150: #dad4c2;
+$sand-100: #e8e2d2;
+$sand-50: #f2f0ec;
+$sand: $sand-200;
+
+// Grey
+$grey-950: #111111;
+$grey-900: #1b1b1b;
+$grey-850: #262626;
+$grey-800: #303030;
+$grey-750: #3b3b3b;
+$grey-700: #474747;
+$grey-650: #525252;
+$grey-600: #5e5e5e;
+$grey-550: #6a6a6a;
+$grey-500: #777777;
+$grey-450: #808080;
+$grey-400: #919191;
+$grey-350: #9e9e9e;
+$grey-300: #ababab;
+$grey-250: #b9b9b9;
+$grey-200: #c6c6c6;
+$grey-150: #d4d4d4;
+$grey-100: #e2e2e2;
+$grey-50: #f1f1f1;
+$grey: $grey-300;
+
+// Zinc
+$zinc-950: #0f1114;
+$zinc-900: #191c20;
+$zinc-850: #23262c;
+$zinc-800: #2d3138;
+$zinc-750: #373c44;
+$zinc-700: #424751;
+$zinc-650: #4d535e;
+$zinc-600: #5c6370;
+$zinc-550: #646b79;
+$zinc-500: #6f7887;
+$zinc-450: #7b8495;
+$zinc-400: #8891a4;
+$zinc-350: #969eaf;
+$zinc-300: #a4acba;
+$zinc-250: #b3b9c5;
+$zinc-200: #c2c7d0;
+$zinc-150: #d1d5db;
+$zinc-100: #e0e3e7;
+$zinc-50: #f0f1f3;
+$zinc: $zinc-550;
+
+// Slate
+$slate-950: #0e1118;
+$slate-900: #181c25;
+$slate-850: #202632;
+$slate-800: #2a3140;
+$slate-750: #333c4e;
+$slate-700: #3d475c;
+$slate-650: #48536b;
+$slate-600: #525f7a;
+$slate-550: #5d6b89;
+$slate-500: #687899;
+$slate-450: #7385a9;
+$slate-400: #8191b5;
+$slate-350: #909ebe;
+$slate-300: #a0acc7;
+$slate-250: #b0b9d0;
+$slate-200: #bfc7d9;
+$slate-150: #cfd5e2;
+$slate-100: #dfe3eb;
+$slate-50: #eff1f4;
+$slate: $slate-600;
+
+$colors: (
+  red: (
+    950: $red-950,
+    900: $red-900,
+    850: $red-850,
+    800: $red-800,
+    750: $red-750,
+    700: $red-700,
+    650: $red-650,
+    600: $red-600,
+    550: $red-550,
+    500: $red-500,
+    450: $red-450,
+    400: $red-400,
+    350: $red-350,
+    300: $red-300,
+    250: $red-250,
+    200: $red-200,
+    150: $red-150,
+    100: $red-100,
+    50: $red-50,
+    main: $red,
+  ),
+  pink: (
+    950: $pink-950,
+    900: $pink-900,
+    850: $pink-850,
+    800: $pink-800,
+    750: $pink-750,
+    700: $pink-700,
+    650: $pink-650,
+    600: $pink-600,
+    550: $pink-550,
+    500: $pink-500,
+    450: $pink-450,
+    400: $pink-400,
+    350: $pink-350,
+    300: $pink-300,
+    250: $pink-250,
+    200: $pink-200,
+    150: $pink-150,
+    100: $pink-100,
+    50: $pink-50,
+    main: $pink,
+  ),
+  fuchsia: (
+    950: $fuchsia-950,
+    900: $fuchsia-900,
+    850: $fuchsia-850,
+    800: $fuchsia-800,
+    750: $fuchsia-750,
+    700: $fuchsia-700,
+    650: $fuchsia-650,
+    600: $fuchsia-600,
+    550: $fuchsia-550,
+    500: $fuchsia-500,
+    450: $fuchsia-450,
+    400: $fuchsia-400,
+    350: $fuchsia-350,
+    300: $fuchsia-300,
+    250: $fuchsia-250,
+    200: $fuchsia-200,
+    150: $fuchsia-150,
+    100: $fuchsia-100,
+    50: $fuchsia-50,
+    main: $fuchsia,
+  ),
+  purple: (
+    950: $purple-950,
+    900: $purple-900,
+    850: $purple-850,
+    800: $purple-800,
+    750: $purple-750,
+    700: $purple-700,
+    650: $purple-650,
+    600: $purple-600,
+    550: $purple-550,
+    500: $purple-500,
+    450: $purple-450,
+    400: $purple-400,
+    350: $purple-350,
+    300: $purple-300,
+    250: $purple-250,
+    200: $purple-200,
+    150: $purple-150,
+    100: $purple-100,
+    50: $purple-50,
+    main: $purple,
+  ),
+  violet: (
+    950: $violet-950,
+    900: $violet-900,
+    850: $violet-850,
+    800: $violet-800,
+    750: $violet-750,
+    700: $violet-700,
+    650: $violet-650,
+    600: $violet-600,
+    550: $violet-550,
+    500: $violet-500,
+    450: $violet-450,
+    400: $violet-400,
+    350: $violet-350,
+    300: $violet-300,
+    250: $violet-250,
+    200: $violet-200,
+    150: $violet-150,
+    100: $violet-100,
+    50: $violet-50,
+    main: $violet,
+  ),
+  indigo: (
+    950: $indigo-950,
+    900: $indigo-900,
+    850: $indigo-850,
+    800: $indigo-800,
+    750: $indigo-750,
+    700: $indigo-700,
+    650: $indigo-650,
+    600: $indigo-600,
+    550: $indigo-550,
+    500: $indigo-500,
+    450: $indigo-450,
+    400: $indigo-400,
+    350: $indigo-350,
+    300: $indigo-300,
+    250: $indigo-250,
+    200: $indigo-200,
+    150: $indigo-150,
+    100: $indigo-100,
+    50: $indigo-50,
+    main: $indigo,
+  ),
+  blue: (
+    950: $blue-950,
+    900: $blue-900,
+    850: $blue-850,
+    800: $blue-800,
+    750: $blue-750,
+    700: $blue-700,
+    650: $blue-650,
+    600: $blue-600,
+    550: $blue-550,
+    500: $blue-500,
+    450: $blue-450,
+    400: $blue-400,
+    350: $blue-350,
+    300: $blue-300,
+    250: $blue-250,
+    200: $blue-200,
+    150: $blue-150,
+    100: $blue-100,
+    50: $blue-50,
+    main: $blue,
+  ),
+  azure: (
+    950: $azure-950,
+    900: $azure-900,
+    850: $azure-850,
+    800: $azure-800,
+    750: $azure-750,
+    700: $azure-700,
+    650: $azure-650,
+    600: $azure-600,
+    550: $azure-550,
+    500: $azure-500,
+    450: $azure-450,
+    400: $azure-400,
+    350: $azure-350,
+    300: $azure-300,
+    250: $azure-250,
+    200: $azure-200,
+    150: $azure-150,
+    100: $azure-100,
+    50: $azure-50,
+    main: $azure,
+  ),
+  cyan: (
+    950: $cyan-950,
+    900: $cyan-900,
+    850: $cyan-850,
+    800: $cyan-800,
+    750: $cyan-750,
+    700: $cyan-700,
+    650: $cyan-650,
+    600: $cyan-600,
+    550: $cyan-550,
+    500: $cyan-500,
+    450: $cyan-450,
+    400: $cyan-400,
+    350: $cyan-350,
+    300: $cyan-300,
+    250: $cyan-250,
+    200: $cyan-200,
+    150: $cyan-150,
+    100: $cyan-100,
+    50: $cyan-50,
+    main: $cyan,
+  ),
+  jade: (
+    950: $jade-950,
+    900: $jade-900,
+    850: $jade-850,
+    800: $jade-800,
+    750: $jade-750,
+    700: $jade-700,
+    650: $jade-650,
+    600: $jade-600,
+    550: $jade-550,
+    500: $jade-500,
+    450: $jade-450,
+    400: $jade-400,
+    350: $jade-350,
+    300: $jade-300,
+    250: $jade-250,
+    200: $jade-200,
+    150: $jade-150,
+    100: $jade-100,
+    50: $jade-50,
+    main: $jade,
+  ),
+  green: (
+    950: $green-950,
+    900: $green-900,
+    850: $green-850,
+    800: $green-800,
+    750: $green-750,
+    700: $green-700,
+    650: $green-650,
+    600: $green-600,
+    550: $green-550,
+    500: $green-500,
+    450: $green-450,
+    400: $green-400,
+    350: $green-350,
+    300: $green-300,
+    250: $green-250,
+    200: $green-200,
+    150: $green-150,
+    100: $green-100,
+    50: $green-50,
+    main: $green,
+  ),
+  lime: (
+    950: $lime-950,
+    900: $lime-900,
+    850: $lime-850,
+    800: $lime-800,
+    750: $lime-750,
+    700: $lime-700,
+    650: $lime-650,
+    600: $lime-600,
+    550: $lime-550,
+    500: $lime-500,
+    450: $lime-450,
+    400: $lime-400,
+    350: $lime-350,
+    300: $lime-300,
+    250: $lime-250,
+    200: $lime-200,
+    150: $lime-150,
+    100: $lime-100,
+    50: $lime-50,
+    main: $lime,
+  ),
+  yellow: (
+    950: $yellow-950,
+    900: $yellow-900,
+    850: $yellow-850,
+    800: $yellow-800,
+    750: $yellow-750,
+    700: $yellow-700,
+    650: $yellow-650,
+    600: $yellow-600,
+    550: $yellow-550,
+    500: $yellow-500,
+    450: $yellow-450,
+    400: $yellow-400,
+    350: $yellow-350,
+    300: $yellow-300,
+    250: $yellow-250,
+    200: $yellow-200,
+    150: $yellow-150,
+    100: $yellow-100,
+    50: $yellow-50,
+    main: $yellow,
+  ),
+  amber: (
+    950: $amber-950,
+    900: $amber-900,
+    850: $amber-850,
+    800: $amber-800,
+    750: $amber-750,
+    700: $amber-700,
+    650: $amber-650,
+    600: $amber-600,
+    550: $amber-550,
+    500: $amber-500,
+    450: $amber-450,
+    400: $amber-400,
+    350: $amber-350,
+    300: $amber-300,
+    250: $amber-250,
+    200: $amber-200,
+    150: $amber-150,
+    100: $amber-100,
+    50: $amber-50,
+    main: $amber,
+  ),
+  pumpkin: (
+    950: $pumpkin-950,
+    900: $pumpkin-900,
+    850: $pumpkin-850,
+    800: $pumpkin-800,
+    750: $pumpkin-750,
+    700: $pumpkin-700,
+    650: $pumpkin-650,
+    600: $pumpkin-600,
+    550: $pumpkin-550,
+    500: $pumpkin-500,
+    450: $pumpkin-450,
+    400: $pumpkin-400,
+    350: $pumpkin-350,
+    300: $pumpkin-300,
+    250: $pumpkin-250,
+    200: $pumpkin-200,
+    150: $pumpkin-150,
+    100: $pumpkin-100,
+    50: $pumpkin-50,
+    main: $pumpkin,
+  ),
+  orange: (
+    950: $orange-950,
+    900: $orange-900,
+    850: $orange-850,
+    800: $orange-800,
+    750: $orange-750,
+    700: $orange-700,
+    650: $orange-650,
+    600: $orange-600,
+    550: $orange-550,
+    500: $orange-500,
+    450: $orange-450,
+    400: $orange-400,
+    350: $orange-350,
+    300: $orange-300,
+    250: $orange-250,
+    200: $orange-200,
+    150: $orange-150,
+    100: $orange-100,
+    50: $orange-50,
+    main: $orange,
+  ),
+  sand: (
+    950: $sand-950,
+    900: $sand-900,
+    850: $sand-850,
+    800: $sand-800,
+    750: $sand-750,
+    700: $sand-700,
+    650: $sand-650,
+    600: $sand-600,
+    550: $sand-550,
+    500: $sand-500,
+    450: $sand-450,
+    400: $sand-400,
+    350: $sand-350,
+    300: $sand-300,
+    250: $sand-250,
+    200: $sand-200,
+    150: $sand-150,
+    100: $sand-100,
+    50: $sand-50,
+    main: $sand,
+  ),
+  grey: (
+    950: $grey-950,
+    900: $grey-900,
+    850: $grey-850,
+    800: $grey-800,
+    750: $grey-750,
+    700: $grey-700,
+    650: $grey-650,
+    600: $grey-600,
+    550: $grey-550,
+    500: $grey-500,
+    450: $grey-450,
+    400: $grey-400,
+    350: $grey-350,
+    300: $grey-300,
+    250: $grey-250,
+    200: $grey-200,
+    150: $grey-150,
+    100: $grey-100,
+    50: $grey-50,
+    main: $grey,
+  ),
+  zinc: (
+    950: $zinc-950,
+    900: $zinc-900,
+    850: $zinc-850,
+    800: $zinc-800,
+    750: $zinc-750,
+    700: $zinc-700,
+    650: $zinc-650,
+    600: $zinc-600,
+    550: $zinc-550,
+    500: $zinc-500,
+    450: $zinc-450,
+    400: $zinc-400,
+    350: $zinc-350,
+    300: $zinc-300,
+    250: $zinc-250,
+    200: $zinc-200,
+    150: $zinc-150,
+    100: $zinc-100,
+    50: $zinc-50,
+    main: $zinc,
+  ),
+  slate: (
+    950: $slate-950,
+    900: $slate-900,
+    850: $slate-850,
+    800: $slate-800,
+    750: $slate-750,
+    700: $slate-700,
+    650: $slate-650,
+    600: $slate-600,
+    550: $slate-550,
+    500: $slate-500,
+    450: $slate-450,
+    400: $slate-400,
+    350: $slate-350,
+    300: $slate-300,
+    250: $slate-250,
+    200: $slate-200,
+    150: $slate-150,
+    100: $slate-100,
+    50: $slate-50,
+    main: $slate,
+  ),
+);
diff --git a/public/stylesheets/pico/colors/utilities/_background-colors.scss b/public/stylesheets/pico/colors/utilities/_background-colors.scss
new file mode 100644
index 0000000..b8c9c2f
--- /dev/null
+++ b/public/stylesheets/pico/colors/utilities/_background-colors.scss
@@ -0,0 +1,73 @@
+@use "sass:map";
+@use "../../colors";
+@use "settings";
+@use "utils";
+
+$enable-css-vars: map.get(settings.$utilities, "css-vars");
+$background-color-property-name: map.get(settings.$properties, "background-color");
+$color-property-name: map.get(settings.$properties, "color");
+$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
+
+@mixin foreground-color($background-color) {
+  @if map.get(settings.$utilities, "color-for-background-colors") {
+    @if utils.foreground-brightness($background-color) == "light" {
+      @if $enable-css-vars {
+        color: var(#{$css-var-color-prefix}-light);
+      } @else {
+        color: utils.display-color(map.get(settings.$palette, "light-color"));
+      }
+    } @else {
+      @if $enable-css-vars {
+        color: var(#{$css-var-color-prefix}-dark);
+      } @else {
+        color: utils.display-color(map.get(settings.$palette, "dark-color"));
+      }
+    }
+  }
+}
+
+@mixin background-colors {
+  @if map.get(settings.$utilities, "background-colors") {
+    // Loop through color families
+    @each $family, $colors in colors.$colors {
+      @if index(map.get(settings.$palette, "color-families"), $family) {
+        $css-var-family-name: #{$css-var-color-prefix}-#{$family};
+        $class-family-name: #{$background-color-property-name}-#{$family};
+
+        // Loop through colors
+        @each $shade, $color-value in $colors {
+          // Main color
+          @if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
+            $value: $color-value;
+            @if $enable-css-vars {
+              $value: var(#{$css-var-family-name});
+            } @else {
+              $value: utils.display-color($color-value);
+            }
+            .#{settings.$css-class-prefix}#{$class-family-name} {
+              background-color: $value;
+              @include foreground-color($color-value);
+            }
+          }
+
+          // Shades
+          @else if
+            index(map.get(settings.$palette, "shades"), $shade) and
+            map.get(settings.$palette, "enable-shades")
+          {
+            $value: $color-value;
+            @if $enable-css-vars {
+              $value: var(#{$css-var-family-name}-#{$shade});
+            } @else {
+              $value: utils.display-color($color-value);
+            }
+            .#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
+              background-color: $value;
+              @include foreground-color($color-value);
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/colors/utilities/_colors.scss b/public/stylesheets/pico/colors/utilities/_colors.scss
new file mode 100644
index 0000000..ddbf795
--- /dev/null
+++ b/public/stylesheets/pico/colors/utilities/_colors.scss
@@ -0,0 +1,50 @@
+@use "sass:map";
+@use "../../colors";
+@use "settings";
+@use "utils";
+
+@mixin colors {
+  @if map.get(settings.$utilities, "colors") {
+    $enable-css-vars: map.get(settings.$utilities, "css-vars");
+    $color-property-name: map.get(settings.$properties, "color");
+    $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
+
+    // Loop through color families
+    @each $family, $colors in colors.$colors {
+      @if index(map.get(settings.$palette, "color-families"), $family) {
+        $css-var-family-name: #{$css-var-color-prefix}-#{$family};
+        $class-family-name: #{$color-property-name}-#{$family};
+
+        // Loop through colors
+        @each $shade, $color-value in $colors {
+          // Main color
+          @if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
+            @if $enable-css-vars {
+              $color-value: var(#{$css-var-family-name});
+            } @else {
+              $color-value: utils.display-color($color-value);
+            }
+            .#{settings.$css-class-prefix}#{$class-family-name} {
+              color: $color-value;
+            }
+          }
+
+          // Shades
+          @else if
+            index(map.get(settings.$palette, "shades"), $shade) and
+            map.get(settings.$palette, "enable-shades")
+          {
+            @if $enable-css-vars {
+              $color-value: var(#{$css-var-family-name}-#{$shade});
+            } @else {
+              $color-value: utils.display-color($color-value);
+            }
+            .#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
+              color: $color-value;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/colors/utilities/_css-vars.scss b/public/stylesheets/pico/colors/utilities/_css-vars.scss
new file mode 100644
index 0000000..902e504
--- /dev/null
+++ b/public/stylesheets/pico/colors/utilities/_css-vars.scss
@@ -0,0 +1,53 @@
+@use "sass:map";
+@use "../../colors";
+@use "settings";
+@use "utils";
+
+@mixin css-vars {
+  $enable-css-vars: map.get(settings.$utilities, "css-vars");
+  $color-property-name: map.get(settings.$properties, "color");
+  $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
+
+  @if $enable-css-vars {
+    :root {
+      // Loop through color families
+      @each $family, $colors in colors.$colors {
+        @if index(map.get(settings.$palette, "color-families"), $family) {
+          $css-var-family-name: #{$css-var-color-prefix}-#{$family};
+
+          // Loop through colors
+          @each $shade, $color-value in $colors {
+            // Main color
+            @if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
+              #{$css-var-family-name}: #{utils.display-color($color-value)};
+            }
+
+            // Shades
+            @else if
+              index(map.get(settings.$palette, "shades"), $shade) and
+              map.get(settings.$palette, "enable-shades")
+            {
+              #{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
+            }
+          }
+        }
+      }
+
+      // Black & white
+      @if map.get(settings.$palette, "enable-black-and-white") {
+        #{$css-var-color-prefix}-black: #{utils.display-color(colors.$black)};
+        #{$css-var-color-prefix}-white: #{utils.display-color(colors.$white)};
+      }
+
+      // Text color variables
+      @if map.get(settings.$utilities, "color-for-background-colors") {
+        #{$css-var-color-prefix}-light: #{utils.display-color(
+            map.get(settings.$palette, "light-color")
+          )};
+        #{$css-var-color-prefix}-dark: #{utils.display-color(
+            map.get(settings.$palette, "dark-color")
+          )};
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/colors/utilities/_index.scss b/public/stylesheets/pico/colors/utilities/_index.scss
new file mode 100644
index 0000000..7ad384b
--- /dev/null
+++ b/public/stylesheets/pico/colors/utilities/_index.scss
@@ -0,0 +1,8 @@
+@forward "settings";
+@use "css-vars" as *;
+@use "colors" as *;
+@use "background-colors" as *;
+
+@include css-vars;
+@include colors;
+@include background-colors;
diff --git a/public/stylesheets/pico/colors/utilities/_settings.scss b/public/stylesheets/pico/colors/utilities/_settings.scss
new file mode 100644
index 0000000..5b00cd0
--- /dev/null
+++ b/public/stylesheets/pico/colors/utilities/_settings.scss
@@ -0,0 +1,108 @@
+@use "sass:map";
+@use "../../settings" as pico-settings;
+
+// Prefix for CSS variables
+$css-var-prefix: "--pico-" !default; // Must start with "--"
+$css-class-prefix: "pico-" !default;
+
+// Palette
+$palette: () !default;
+$palette: map.merge(
+  (
+    // Color families
+    "color-families":
+      (
+        red,
+        pink,
+        fuchsia,
+        purple,
+        violet,
+        indigo,
+        blue,
+        azure,
+        cyan,
+        jade,
+        green,
+        lime,
+        yellow,
+        amber,
+        pumpkin,
+        orange,
+        sand,
+        grey,
+        zinc,
+        slate
+      ),
+    // Shades
+    "shades":
+      (
+        50,
+        100,
+        150,
+        200,
+        250,
+        300,
+        350,
+        400,
+        450,
+        500,
+        550,
+        600,
+        650,
+        700,
+        750,
+        800,
+        850,
+        900,
+        950
+      ),
+    // Export main color for each family
+    "enable-main-color": true,
+
+    // Export shades for each family
+    "enable-shades": true,
+
+    // Export black and white
+    "enable-black-and-white": false,
+
+    // Light color used for dark backgrounds
+    "light-color": #fff,
+
+    // Dark color used for light backgrounds
+    "dark-color": #000,
+
+    // Export as HEX, RGB or HSL values
+    "export-as": "hex" // hex | rgb | hsl
+  ),
+  $palette
+);
+
+// Properties names used for CSS variables and classes
+// Useful if you want to shorten the names
+$properties: () !default;
+$properties: map.merge(
+  (
+    "color": "color",
+    "background-color": "background",
+  ),
+  $properties
+);
+
+// Utilities to export
+$utilities: () !default;
+$utilities: map.merge(
+  (
+    // CSS Vars
+    "css-vars": true,
+
+    // Colors utility classes
+    "colors": true,
+
+    // Background color utility classes
+    "background-colors": true,
+
+    // Color value for background color utility classes
+    "color-for-background-colors": true
+  ),
+  $utilities
+);
diff --git a/public/stylesheets/pico/colors/utilities/_utils.scss b/public/stylesheets/pico/colors/utilities/_utils.scss
new file mode 100644
index 0000000..5d0ddfe
--- /dev/null
+++ b/public/stylesheets/pico/colors/utilities/_utils.scss
@@ -0,0 +1,56 @@
+@use "sass:color";
+@use "sass:math";
+@use "sass:map";
+@use "settings";
+
+// Determines if the foreground needs to be light or dark
+// depending on the background color passed.
+// W3C reference: http://www.w3.org/TR/AERT#color-contrast
+// Inspiration: https://codepen.io/davidhalford/pen/ALrbEP
+@function foreground-brightness($background-color) {
+  $background-color-brightness: brightness($background-color);
+  $light-color-brightness: brightness(#ffffff);
+
+  @if math.abs($background-color-brightness) < $light-color-brightness * 0.5 {
+    @return "light";
+  } @else {
+    @return "dark";
+  }
+}
+
+// Calculates the color brightness
+// Color brightness is determined by the following formula:
+// ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
+@function brightness($color) {
+  $color-brightness: round(
+    math.div(
+      (color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
+      1000
+    )
+  );
+
+  @return $color-brightness;
+}
+
+// Returns the color as RGB, HSL or HEX
+@function display-color($color) {
+  @if map.get(settings.$palette, "export-as") == "rgb" {
+    @return display-rgb($color);
+  }
+  @if map.get(settings.$palette, "export-as") == "hsl" {
+    @return display-hsl($color);
+  }
+  @return $color;
+}
+
+// Display color as HSL
+@function display-hsl($color) {
+  @return unquote(
+    "hsl(#{math.round(hue($color))}, #{math.round(saturation($color))}, #{math.round(lightness($color))})"
+  );
+}
+
+// Display color as RGB
+@function display-rgb($color) {
+  @return unquote("rgb(" + red($color) + ", " + green($color) + ", " + blue($color) + ")");
+}
diff --git a/public/stylesheets/pico/components/_accordion.scss b/public/stylesheets/pico/components/_accordion.scss
new file mode 100644
index 0000000..3ffabb8
--- /dev/null
+++ b/public/stylesheets/pico/components/_accordion.scss
@@ -0,0 +1,116 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/accordion") {
+  /**
+   * Accordion (<details>)
+   */
+
+  #{$parent-selector} details {
+    display: block;
+    margin-bottom: var(#{$css-var-prefix}spacing);
+
+    summary {
+      line-height: 1rem;
+      list-style-type: none;
+      cursor: pointer;
+
+      &:not([role]) {
+        color: var(#{$css-var-prefix}accordion-close-summary-color);
+      }
+
+      @if $enable-transitions {
+        transition: color var(#{$css-var-prefix}transition);
+      }
+
+      // Reset marker
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      &::marker {
+        display: none;
+      }
+
+      &::-moz-list-bullet {
+        list-style-type: none;
+      }
+
+      // Marker
+      &::after {
+        display: block;
+        width: 1rem;
+        height: 1rem;
+        margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
+        float: right;
+        transform: rotate(-90deg);
+        background-image: var(#{$css-var-prefix}icon-chevron);
+        background-position: right center;
+        background-size: 1rem auto;
+        background-repeat: no-repeat;
+        content: "";
+
+        @if $enable-transitions {
+          transition: transform var(#{$css-var-prefix}transition);
+        }
+      }
+
+      &:focus {
+        outline: none;
+
+        &:not([role]) {
+          color: var(#{$css-var-prefix}accordion-active-summary-color);
+        }
+      }
+
+      &:focus-visible {
+        &:not([role]) {
+          outline: var(#{$css-var-prefix}outline-width) solid var(#{$css-var-prefix}primary-focus);
+          outline-offset: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
+          color: var(#{$css-var-prefix}primary);
+        }
+      }
+
+      // Type button
+      &[role="button"] {
+        width: 100%;
+        text-align: left;
+
+        // Marker
+        &::after {
+          height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
+        }
+      }
+    }
+
+    // Open
+    &[open] {
+      > summary {
+        margin-bottom: var(#{$css-var-prefix}spacing);
+
+        &:not([role]) {
+          &:not(:focus) {
+            color: var(#{$css-var-prefix}accordion-open-summary-color);
+          }
+        }
+
+        &::after {
+          transform: rotate(0);
+        }
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    #{$parent-selector} details {
+      summary {
+        text-align: right;
+
+        &::after {
+          float: left;
+          background-position: left center;
+        }
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/components/_card.scss b/public/stylesheets/pico/components/_card.scss
new file mode 100644
index 0000000..19d8358
--- /dev/null
+++ b/public/stylesheets/pico/components/_card.scss
@@ -0,0 +1,46 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/card") {
+  /**
+   * Card (<article>)
+   */
+
+  #{$parent-selector} article {
+    margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
+    padding: var(#{$css-var-prefix}block-spacing-vertical)
+      var(#{$css-var-prefix}block-spacing-horizontal);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background: var(#{$css-var-prefix}card-background-color);
+    box-shadow: var(#{$css-var-prefix}card-box-shadow);
+
+    > header,
+    > footer {
+      margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
+      margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
+      padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
+        var(#{$css-var-prefix}block-spacing-horizontal);
+      background-color: var(#{$css-var-prefix}card-sectioning-background-color);
+    }
+
+    > header {
+      margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
+      margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
+      border-bottom: var(#{$css-var-prefix}border-width)
+        solid
+        var(#{$css-var-prefix}card-border-color);
+      border-top-right-radius: var(#{$css-var-prefix}border-radius);
+      border-top-left-radius: var(#{$css-var-prefix}border-radius);
+    }
+
+    > footer {
+      margin-top: var(#{$css-var-prefix}block-spacing-vertical);
+      margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
+      border-top: var(#{$css-var-prefix}border-width)
+        solid
+        var(#{$css-var-prefix}card-border-color);
+      border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
+      border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
+    }
+  }
+}
diff --git a/public/stylesheets/pico/components/_dropdown.scss b/public/stylesheets/pico/components/_dropdown.scss
new file mode 100644
index 0000000..95eb0d0
--- /dev/null
+++ b/public/stylesheets/pico/components/_dropdown.scss
@@ -0,0 +1,280 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/dropdown") and $enable-classes {
+  /**
+   * Dropdown (details.dropdown)
+   */
+
+  // Container
+  // ––––––––––––––––––––
+  #{$parent-selector} details.dropdown {
+    position: relative;
+    border-bottom: none;
+
+    // Marker
+    // ––––––––––––––––––––
+    summary,
+    > button,
+    > a {
+      &::after {
+        display: block;
+        width: 1rem;
+        height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
+        margin-inline-start: 0.25rem;
+        float: right;
+        // TODO: find out why we need this magic number (0.2 rem)
+        // for the marker to be aligned with the regular select
+        transform: rotate(0deg) translateX(0.2rem);
+        background-image: var(#{$css-var-prefix}icon-chevron);
+        background-position: right center;
+        background-size: 1rem auto;
+        background-repeat: no-repeat;
+        content: "";
+      }
+    }
+  }
+
+  // Container type accordion
+  // inside a nav
+  // ––––––––––––––––––––
+  #{$parent-selector} nav details.dropdown {
+    // Override height
+    margin-bottom: 0;
+  }
+
+  // Bouton as a select
+  // inside container type accordion
+  // ––––––––––––––––––––
+  #{$parent-selector} details.dropdown summary:not([role]) {
+    height: calc(
+      1rem *
+        var(#{$css-var-prefix}line-height) +
+        var(#{$css-var-prefix}form-element-spacing-vertical) *
+        2 +
+        var(#{$css-var-prefix}border-width) *
+        2
+    );
+    padding: var(#{$css-var-prefix}form-element-spacing-vertical)
+      var(#{$css-var-prefix}form-element-spacing-horizontal);
+    border: var(#{$css-var-prefix}border-width)
+      solid
+      var(#{$css-var-prefix}form-element-border-color);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background-color: var(#{$css-var-prefix}form-element-background-color);
+    color: var(#{$css-var-prefix}form-element-placeholder-color);
+    line-height: inherit;
+    cursor: pointer;
+    user-select: none;
+
+    @if $enable-transitions {
+      transition:
+        background-color var(#{$css-var-prefix}transition),
+        border-color var(#{$css-var-prefix}transition),
+        color var(#{$css-var-prefix}transition),
+        box-shadow var(#{$css-var-prefix}transition);
+    }
+
+    &:active,
+    &:focus {
+      border-color: var(#{$css-var-prefix}form-element-active-border-color);
+      background-color: var(#{$css-var-prefix}form-element-active-background-color);
+    }
+
+    &:focus {
+      box-shadow: 0
+        0
+        0
+        var(#{$css-var-prefix}outline-width)
+        var(#{$css-var-prefix}form-element-focus-color);
+    }
+
+    // Reset focus visible from accordion component
+    &:focus-visible {
+      outline: none;
+    }
+
+    // Aria-invalid
+    &[aria-invalid="false"] {
+      #{$css-var-prefix}form-element-border-color: var(
+        #{$css-var-prefix}form-element-valid-border-color
+      );
+      #{$css-var-prefix}form-element-active-border-color: var(
+        #{$css-var-prefix}form-element-valid-focus-color
+      );
+      #{$css-var-prefix}form-element-focus-color: var(
+        #{$css-var-prefix}form-element-valid-focus-color
+      );
+    }
+
+    &[aria-invalid="true"] {
+      #{$css-var-prefix}form-element-border-color: var(
+        #{$css-var-prefix}form-element-invalid-border-color
+      );
+      #{$css-var-prefix}form-element-active-border-color: var(
+        #{$css-var-prefix}form-element-invalid-focus-color
+      );
+      #{$css-var-prefix}form-element-focus-color: var(
+        #{$css-var-prefix}form-element-invalid-focus-color
+      );
+    }
+  }
+
+  // Dropdown inside a nav
+  // ––––––––––––––––––––
+  #{$parent-selector} nav details.dropdown {
+    display: inline;
+    margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
+
+    summary {
+      &::after {
+        transform: rotate(0deg) translateX(0rem);
+      }
+
+      &:not([role]) {
+        // Override height
+        height: calc(
+          (1rem * var(#{$css-var-prefix}line-height)) +
+            (var(#{$css-var-prefix}nav-link-spacing-vertical) * 2)
+        );
+        padding: calc(
+            var(#{$css-var-prefix}nav-link-spacing-vertical) -
+              (var(#{$css-var-prefix}border-width) * 2)
+          )
+          var(#{$css-var-prefix}nav-link-spacing-horizontal);
+
+        &:focus-visible {
+          box-shadow: 0
+            0
+            0
+            var(#{$css-var-prefix}outline-width)
+            var(#{$css-var-prefix}primary-focus);
+        }
+      }
+    }
+  }
+
+  // Submenu
+  // ––––––––––––––––––––
+  #{$parent-selector} details.dropdown summary + ul {
+    display: flex;
+    z-index: 99;
+    position: absolute;
+    left: 0;
+    flex-direction: column;
+    width: 100%;
+    min-width: fit-content;
+    margin: 0;
+    margin-top: var(#{$css-var-prefix}outline-width);
+    padding: 0;
+    border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}dropdown-border-color);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background-color: var(#{$css-var-prefix}dropdown-background-color);
+    box-shadow: var(#{$css-var-prefix}dropdown-box-shadow);
+    color: var(#{$css-var-prefix}dropdown-color);
+    white-space: nowrap;
+    opacity: 0;
+
+    @if $enable-transitions {
+      transition:
+        opacity var(#{$css-var-prefix}transition),
+        transform 0s ease-in-out 1s;
+    }
+
+    &[dir="rtl"] {
+      right: 0;
+      left: auto;
+    }
+
+    li {
+      width: 100%;
+      margin-bottom: 0;
+      padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
+        var(#{$css-var-prefix}form-element-spacing-horizontal);
+      list-style: none;
+
+      &:first-of-type {
+        margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
+      }
+
+      &:last-of-type {
+        margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
+      }
+
+      a {
+        display: block;
+        margin: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * -0.5)
+          calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * -1);
+        padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
+          var(#{$css-var-prefix}form-element-spacing-horizontal);
+        overflow: hidden;
+        border-radius: 0;
+        color: var(#{$css-var-prefix}dropdown-color);
+        text-decoration: none;
+        text-overflow: ellipsis;
+
+        &:hover,
+        &:focus,
+        &:active,
+        &:focus-visible,
+        &[aria-current]:not([aria-current="false"]) {
+          background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
+        }
+      }
+
+      label {
+        width: 100%;
+      }
+
+      // Not working in Firefox, which doesn't support the `:has()` pseudo-class
+      &:has(label):hover {
+        background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
+      }
+    }
+  }
+
+  // Button opened
+  // inside container type accordion
+  // ––––––––––––––––––––
+  #{$parent-selector} details.dropdown[open] summary {
+    margin-bottom: 0;
+  }
+
+  // Menu opened
+  // ––––––––––––––––––––
+  // 1. Inside container type accordion
+  #{$parent-selector} details.dropdown[open] summary {
+    + ul {
+      transform: scaleY(1);
+      opacity: 1;
+
+      @if $enable-transitions {
+        transition:
+          opacity var(#{$css-var-prefix}transition),
+          transform 0s ease-in-out 0s;
+      }
+    }
+  }
+
+  // Close for dropdown
+  // inside container type accordion
+  // ––––––––––––––––––––
+  #{$parent-selector} details.dropdown[open] summary {
+    &::before {
+      display: block;
+      z-index: 1;
+      position: fixed;
+      width: 100vw;
+      height: 100vh;
+      inset: 0;
+      background: none;
+      content: "";
+      cursor: default;
+    }
+  }
+  // Label
+  // ––––––––––––––––––––
+  #{$parent-selector} label > details.dropdown {
+    margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
+  }
+}
diff --git a/public/stylesheets/pico/components/_group.scss b/public/stylesheets/pico/components/_group.scss
new file mode 100644
index 0000000..8b2631b
--- /dev/null
+++ b/public/stylesheets/pico/components/_group.scss
@@ -0,0 +1,120 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/group") {
+  /**
+   * Group ([role="group"], [role="search"])
+   */
+
+  #{$parent-selector} [role="search"],
+  #{$parent-selector} [role="group"] {
+    display: inline-flex;
+    position: relative;
+    width: 100%;
+    margin-bottom: var(#{$css-var-prefix}spacing);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+    vertical-align: middle;
+    transition: box-shadow var(#{$css-var-prefix}transition);
+
+    > *,
+    input:not([type="checkbox"], [type="radio"]),
+    select {
+      position: relative;
+      flex: 1 1 auto;
+      margin-bottom: 0;
+
+      &:not(:first-child) {
+        margin-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:focus {
+        z-index: 2;
+      }
+    }
+
+    button,
+    [type="submit"],
+    [type="reset"],
+    [type="button"],
+    [role="button"],
+    input:not([type="checkbox"], [type="radio"]),
+    select {
+      &:not(:first-child) {
+        margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
+      }
+    }
+
+    button,
+    [type="submit"],
+    [type="reset"],
+    [type="button"],
+    [role="button"] {
+      width: auto;
+    }
+
+    @supports selector(:has(*)) {
+      // Group box shadow when a button is focused
+      &:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
+        #{$css-var-prefix}group-box-shadow: var(
+          #{$css-var-prefix}group-box-shadow-focus-with-button
+        );
+
+        input:not([type="checkbox"], [type="radio"]),
+        select {
+          border-color: transparent;
+        }
+      }
+
+      // Group box shadow when an input is focused
+      &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
+        #{$css-var-prefix}group-box-shadow: var(
+          #{$css-var-prefix}group-box-shadow-focus-with-input
+        );
+
+        // Adapt box shadow for buttons
+        button,
+        [type="submit"],
+        [type="button"],
+        [role="button"] {
+          #{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
+            var(#{$css-var-prefix}primary-border);
+          #{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
+            var(#{$css-var-prefix}primary-hover-border);
+        }
+      }
+
+      // Remove button box shadow if we have a group box shadow
+      button,
+      [type="submit"],
+      [type="reset"],
+      [type="button"],
+      [role="button"] {
+        &:focus {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
+  #{$parent-selector} [role="search"] {
+    > * {
+      &:first-child {
+        border-top-left-radius: 5rem;
+        border-bottom-left-radius: 5rem;
+      }
+
+      &:last-child {
+        border-top-right-radius: 5rem;
+        border-bottom-right-radius: 5rem;
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/components/_loading.scss b/public/stylesheets/pico/components/_loading.scss
new file mode 100644
index 0000000..37c79e2
--- /dev/null
+++ b/public/stylesheets/pico/components/_loading.scss
@@ -0,0 +1,46 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/loading") {
+  /**
+   * Loading ([aria-busy=true])
+   */
+
+  // Everything except form elements
+  #{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html) {
+    white-space: nowrap;
+
+    &::before {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      background-image: var(#{$css-var-prefix}icon-loading);
+      background-size: 1em auto;
+      background-repeat: no-repeat;
+      content: "";
+      vertical-align: -0.125em; // Visual alignment
+    }
+
+    &:not(:empty) {
+      &::before {
+        margin-inline-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
+      }
+    }
+
+    &:empty {
+      text-align: center;
+    }
+  }
+
+  // Buttons and links
+  #{$parent-selector} button,
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="button"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [role="button"],
+  #{$parent-selector} a {
+    &[aria-busy="true"] {
+      pointer-events: none;
+    }
+  }
+}
diff --git a/public/stylesheets/pico/components/_modal.scss b/public/stylesheets/pico/components/_modal.scss
new file mode 100644
index 0000000..9ed05b6
--- /dev/null
+++ b/public/stylesheets/pico/components/_modal.scss
@@ -0,0 +1,176 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/modal") {
+  /**
+   * Modal (<dialog>)
+   */
+
+  :root {
+    #{$css-var-prefix}scrollbar-width: 0px;
+  }
+
+  #{$parent-selector} dialog {
+    display: flex;
+    z-index: 999;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    align-items: center;
+    justify-content: center;
+    width: inherit;
+    min-width: 100%;
+    height: inherit;
+    min-height: 100%;
+    padding: 0;
+    border: 0;
+    backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
+    background-color: var(#{$css-var-prefix}modal-overlay-background-color);
+    color: var(#{$css-var-prefix}color);
+
+    // Content
+    article {
+      $close-selector: if(
+        $enable-classes,
+        ".close, :is(a, button)[rel=prev]",
+        ":is(a, button)[rel=prev]"
+      );
+      width: 100%;
+      max-height: calc(100vh - var(#{$css-var-prefix}spacing) * 2);
+      margin: var(#{$css-var-prefix}spacing);
+      overflow: auto;
+
+      @if map.get($breakpoints, "sm") {
+        @media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
+          max-width: map.get(map.get($breakpoints, "sm"), "viewport");
+        }
+      }
+
+      @if map.get($breakpoints, "md") {
+        @media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
+          max-width: map.get(map.get($breakpoints, "md"), "viewport");
+        }
+      }
+
+      > header {
+        > * {
+          margin-bottom: 0;
+        }
+
+        #{$close-selector} {
+          margin: 0;
+          margin-left: var(#{$css-var-prefix}spacing);
+          padding: 0;
+          float: right;
+        }
+      }
+
+      > footer {
+        text-align: right;
+
+        button,
+        [role="button"] {
+          margin-bottom: 0;
+
+          &:not(:first-of-type) {
+            margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5);
+          }
+        }
+      }
+
+      // Close icon
+      #{$close-selector} {
+        display: block;
+        width: 1rem;
+        height: 1rem;
+        margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
+        margin-bottom: var(#{$css-var-prefix}spacing);
+        margin-left: auto;
+        border: none;
+        background-image: var(#{$css-var-prefix}icon-close);
+        background-position: center;
+        background-size: auto 1rem;
+        background-repeat: no-repeat;
+        background-color: transparent;
+        opacity: 0.5;
+
+        @if $enable-transitions {
+          transition: opacity var(#{$css-var-prefix}transition);
+        }
+
+        &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+          opacity: 1;
+        }
+      }
+    }
+
+    // Closed state
+    &:not([open]),
+    &[open="false"] {
+      display: none;
+    }
+  }
+
+  // Utilities
+  @if $enable-classes {
+    .modal-is-open {
+      padding-right: var(#{$css-var-prefix}scrollbar-width, 0px);
+      overflow: hidden;
+      pointer-events: none;
+      touch-action: none;
+
+      dialog {
+        pointer-events: auto;
+        touch-action: auto;
+      }
+    }
+  }
+
+  // Animations
+  @if $enable-classes and $enable-transitions {
+    $animation-duration: 0.2s;
+
+    :where(.modal-is-opening, .modal-is-closing) {
+      dialog,
+      dialog > article {
+        animation-duration: $animation-duration;
+        animation-timing-function: ease-in-out;
+        animation-fill-mode: both;
+      }
+
+      dialog {
+        animation-duration: ($animation-duration * 4);
+        animation-name: modal-overlay;
+
+        > article {
+          animation-delay: $animation-duration;
+          animation-name: modal;
+        }
+      }
+    }
+
+    .modal-is-closing {
+      dialog,
+      dialog > article {
+        animation-delay: 0s;
+        animation-direction: reverse;
+      }
+    }
+
+    @keyframes modal-overlay {
+      from {
+        backdrop-filter: none;
+        background-color: transparent;
+      }
+    }
+
+    @keyframes modal {
+      from {
+        transform: translateY(-100%);
+        opacity: 0;
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/components/_nav.scss b/public/stylesheets/pico/components/_nav.scss
new file mode 100644
index 0000000..c14dc4a
--- /dev/null
+++ b/public/stylesheets/pico/components/_nav.scss
@@ -0,0 +1,160 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/nav") {
+  /**
+   * Nav
+   */
+
+  // Reboot based on :
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+
+  // Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
+  :where(nav li)::before {
+    float: left;
+    content: "\200B";
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  #{$parent-selector} nav,
+  #{$parent-selector} nav ul {
+    display: flex;
+  }
+
+  #{$parent-selector} nav {
+    justify-content: space-between;
+    overflow: visible;
+
+    ol,
+    ul {
+      align-items: center;
+      margin-bottom: 0;
+      padding: 0;
+      list-style: none;
+
+      &:first-of-type {
+        margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
+      }
+      &:last-of-type {
+        margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
+      }
+    }
+
+    li {
+      display: inline-block;
+      margin: 0;
+      padding: var(#{$css-var-prefix}nav-element-spacing-vertical)
+        var(#{$css-var-prefix}nav-element-spacing-horizontal);
+
+      :where(a, [role="link"]) {
+        display: inline-block;
+        margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1)
+          calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
+        padding: var(#{$css-var-prefix}nav-link-spacing-vertical)
+          var(#{$css-var-prefix}nav-link-spacing-horizontal);
+        border-radius: var(#{$css-var-prefix}border-radius);
+
+        &:not(:hover) {
+          text-decoration: none;
+        }
+      }
+
+      // Minimal support for buttons and forms elements
+      button,
+      [role="button"],
+      [type="button"],
+      input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
+      select {
+        height: auto;
+        margin-right: inherit;
+        margin-bottom: 0;
+        margin-left: inherit;
+        padding: calc(
+            var(#{$css-var-prefix}nav-link-spacing-vertical) -
+              (var(#{$css-var-prefix}border-width) * 2)
+          )
+          var(#{$css-var-prefix}nav-link-spacing-horizontal);
+      }
+    }
+
+    // Breadcrumb
+    &[aria-label="breadcrumb"] {
+      align-items: center;
+      justify-content: start;
+
+      & ul li {
+        &:not(:first-child) {
+          margin-inline-start: var(#{$css-var-prefix}nav-link-spacing-horizontal);
+        }
+
+        a {
+          margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1) 0;
+          margin-inline-start: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
+        }
+
+        &:not(:last-child) {
+          &::after {
+            display: inline-block;
+            position: absolute;
+            width: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 4);
+            margin: 0 calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
+            content: var(#{$css-var-prefix}nav-breadcrumb-divider);
+            color: var(#{$css-var-prefix}muted-color);
+            text-align: center;
+            text-decoration: none;
+            white-space: nowrap;
+          }
+        }
+      }
+
+      // Minimal support for aria-current
+      & a[aria-current]:not([aria-current="false"]) {
+        background-color: transparent;
+        color: inherit;
+        text-decoration: none;
+        pointer-events: none;
+      }
+    }
+  }
+
+  // Vertical Nav
+  #{$parent-selector} aside {
+    nav,
+    ol,
+    ul,
+    li {
+      display: block;
+    }
+
+    li {
+      padding: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * 0.5)
+        var(#{$css-var-prefix}nav-element-spacing-horizontal);
+
+      a {
+        display: block;
+      }
+
+      // Minimal support for links as buttons
+      [role="button"] {
+        margin: inherit;
+      }
+    }
+  }
+
+  // Breadcrumb RTL
+  [dir="rtl"] {
+    #{$parent-selector} nav {
+      &[aria-label="breadcrumb"] {
+        & ul li {
+          &:not(:last-child) {
+            ::after {
+              content: "\\";
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/components/_progress.scss b/public/stylesheets/pico/components/_progress.scss
new file mode 100644
index 0000000..576b8e4
--- /dev/null
+++ b/public/stylesheets/pico/components/_progress.scss
@@ -0,0 +1,102 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/progress") {
+  /**
+   * Progress
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Add the correct display in Edge 18- and IE
+  // 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
+  #{$parent-selector} progress {
+    display: inline-block; // 1
+    vertical-align: baseline; // 2
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  #{$parent-selector} progress {
+    // Reset the default appearance
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    // Styles
+    display: inline-block;
+    appearance: none;
+    width: 100%;
+    height: 0.5rem;
+    margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
+    overflow: hidden;
+
+    // Remove Firefox and Opera border
+    border: 0;
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background-color: var(#{$css-var-prefix}progress-background-color);
+
+    // IE10 uses `color` to set the bar background-color
+    color: var(#{$css-var-prefix}progress-color);
+
+    &::-webkit-progress-bar {
+      border-radius: var(#{$css-var-prefix}border-radius);
+      background: none;
+    }
+
+    &[value]::-webkit-progress-value {
+      background-color: var(#{$css-var-prefix}progress-color);
+
+      @if $enable-transitions {
+        transition: inline-size var(#{$css-var-prefix}transition);
+      }
+    }
+
+    &::-moz-progress-bar {
+      background-color: var(#{$css-var-prefix}progress-color);
+    }
+
+    // Indeterminate state
+    @media (prefers-reduced-motion: no-preference) {
+      &:indeterminate {
+        background: var(#{$css-var-prefix}progress-background-color)
+          linear-gradient(
+            to right,
+            var(#{$css-var-prefix}progress-color) 30%,
+            var(#{$css-var-prefix}progress-background-color) 30%
+          )
+          top left / 150% 150% no-repeat;
+        animation: progress-indeterminate 1s linear infinite;
+
+        &[value]::-webkit-progress-value {
+          background-color: transparent;
+        }
+
+        &::-moz-progress-bar {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    @media (prefers-reduced-motion: no-preference) {
+      #{$parent-selector} progress:indeterminate {
+        animation-direction: reverse;
+      }
+    }
+  }
+
+  @keyframes progress-indeterminate {
+    0% {
+      background-position: 200% 0;
+    }
+
+    100% {
+      background-position: -200% 0;
+    }
+  }
+}
diff --git a/public/stylesheets/pico/components/_tooltip.scss b/public/stylesheets/pico/components/_tooltip.scss
new file mode 100644
index 0000000..2076438
--- /dev/null
+++ b/public/stylesheets/pico/components/_tooltip.scss
@@ -0,0 +1,215 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/tooltip") {
+  /**
+   * Tooltip ([data-tooltip])
+   */
+
+  #{$parent-selector} [data-tooltip] {
+    position: relative;
+
+    &:not(a, button, input) {
+      border-bottom: 1px dotted;
+      text-decoration: none;
+      cursor: help;
+    }
+
+    &[data-placement="top"]::before,
+    &[data-placement="top"]::after,
+    &::before,
+    &::after {
+      display: block;
+      z-index: 99;
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      padding: 0.25rem 0.5rem;
+      overflow: hidden;
+      transform: translate(-50%, -0.25rem);
+      border-radius: var(#{$css-var-prefix}border-radius);
+      background: var(#{$css-var-prefix}tooltip-background-color);
+      content: attr(data-tooltip);
+      color: var(#{$css-var-prefix}tooltip-color);
+      font-style: normal;
+      font-weight: var(#{$css-var-prefix}font-weight);
+      font-size: 0.875rem;
+      text-decoration: none;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    // Caret
+    &[data-placement="top"]::after,
+    &::after {
+      padding: 0;
+      transform: translate(-50%, 0rem);
+      border-top: 0.3rem solid;
+      border-right: 0.3rem solid transparent;
+      border-left: 0.3rem solid transparent;
+      border-radius: 0;
+      background-color: transparent;
+      content: "";
+      color: var(#{$css-var-prefix}tooltip-background-color);
+    }
+
+    &[data-placement="bottom"] {
+      &::before,
+      &::after {
+        top: 100%;
+        bottom: auto;
+        transform: translate(-50%, 0.25rem);
+      }
+
+      &:after {
+        transform: translate(-50%, -0.3rem);
+        border: 0.3rem solid transparent;
+        border-bottom: 0.3rem solid;
+      }
+    }
+
+    &[data-placement="left"] {
+      &::before,
+      &::after {
+        top: 50%;
+        right: 100%;
+        bottom: auto;
+        left: auto;
+        transform: translate(-0.25rem, -50%);
+      }
+
+      &:after {
+        transform: translate(0.3rem, -50%);
+        border: 0.3rem solid transparent;
+        border-left: 0.3rem solid;
+      }
+    }
+
+    &[data-placement="right"] {
+      &::before,
+      &::after {
+        top: 50%;
+        right: auto;
+        bottom: auto;
+        left: 100%;
+        transform: translate(0.25rem, -50%);
+      }
+
+      &:after {
+        transform: translate(-0.3rem, -50%);
+        border: 0.3rem solid transparent;
+        border-right: 0.3rem solid;
+      }
+    }
+
+    // Display
+    &:focus,
+    &:hover {
+      &::before,
+      &::after {
+        opacity: 1;
+      }
+    }
+
+    @if $enable-transitions {
+      // Animations, excluding touch devices
+      @media (hover: hover) and (pointer: fine) {
+        // Default (top)
+        &:focus,
+        &:hover {
+          &::before,
+          &::after {
+            #{$css-var-prefix}tooltip-slide-to: translate(-50%, -0.25rem);
+            transform: translate(-50%, 0.75rem);
+            animation-duration: 0.2s;
+            animation-fill-mode: forwards;
+            animation-name: tooltip-slide;
+            opacity: 0;
+          }
+
+          &::after {
+            #{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, 0rem);
+            transform: translate(-50%, -0.25rem);
+            animation-name: tooltip-caret-slide;
+          }
+        }
+
+        // Bottom
+        &[data-placement="bottom"] {
+          &:focus,
+          &:hover {
+            &::before,
+            &::after {
+              #{$css-var-prefix}tooltip-slide-to: translate(-50%, 0.25rem);
+              transform: translate(-50%, -0.75rem);
+              animation-name: tooltip-slide;
+            }
+
+            &::after {
+              #{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, -0.3rem);
+              transform: translate(-50%, -0.5rem);
+              animation-name: tooltip-caret-slide;
+            }
+          }
+        }
+
+        // Left
+        &[data-placement="left"] {
+          &:focus,
+          &:hover {
+            &::before,
+            &::after {
+              #{$css-var-prefix}tooltip-slide-to: translate(-0.25rem, -50%);
+              transform: translate(0.75rem, -50%);
+              animation-name: tooltip-slide;
+            }
+
+            &::after {
+              #{$css-var-prefix}tooltip-caret-slide-to: translate(0.3rem, -50%);
+              transform: translate(0.05rem, -50%);
+              animation-name: tooltip-caret-slide;
+            }
+          }
+        }
+
+        // Right
+        &[data-placement="right"] {
+          &:focus,
+          &:hover {
+            &::before,
+            &::after {
+              #{$css-var-prefix}tooltip-slide-to: translate(0.25rem, -50%);
+              transform: translate(-0.75rem, -50%);
+              animation-name: tooltip-slide;
+            }
+
+            &::after {
+              #{$css-var-prefix}tooltip-caret-slide-to: translate(-0.3rem, -50%);
+              transform: translate(-0.05rem, -50%);
+              animation-name: tooltip-caret-slide;
+            }
+          }
+        }
+      }
+
+      @keyframes tooltip-slide {
+        to {
+          transform: var(#{$css-var-prefix}tooltip-slide-to);
+          opacity: 1;
+        }
+      }
+
+      @keyframes tooltip-caret-slide {
+        50% {
+          opacity: 0;
+        }
+        to {
+          transform: var(#{$css-var-prefix}tooltip-caret-slide-to);
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/content/_button.scss b/public/stylesheets/pico/content/_button.scss
new file mode 100644
index 0000000..2887e7e
--- /dev/null
+++ b/public/stylesheets/pico/content/_button.scss
@@ -0,0 +1,209 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/button") {
+  /**
+   * Button
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Change the font styles in all browsers
+  // 2. Remove the margin on controls in Safari
+  // 3. Show the overflow in Edge
+  #{$parent-selector} button {
+    margin: 0; // 2
+    overflow: visible; // 3
+    font-family: inherit; // 1
+    text-transform: none; // 1
+  }
+
+  // Correct the inability to style buttons in iOS and Safari
+  #{$parent-selector} button,
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [type="button"] {
+    -webkit-appearance: button;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  #{$parent-selector} button,
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [type="button"],
+  #{$parent-selector} [type="file"]::file-selector-button,
+  #{$parent-selector} [role="button"] {
+    #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
+    #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
+    #{$css-var-prefix}box-shadow: var(#{$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+    padding: var(#{$css-var-prefix}form-element-spacing-vertical)
+      var(#{$css-var-prefix}form-element-spacing-horizontal);
+    border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    outline: none;
+    background-color: var(#{$css-var-prefix}background-color);
+    box-shadow: var(#{$css-var-prefix}box-shadow);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    font-size: 1rem;
+    line-height: var(#{$css-var-prefix}line-height);
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+
+    @if $enable-transitions {
+      transition:
+        background-color var(#{$css-var-prefix}transition),
+        border-color var(#{$css-var-prefix}transition),
+        color var(#{$css-var-prefix}transition),
+        box-shadow var(#{$css-var-prefix}transition);
+    }
+
+    &:is([aria-current]:not([aria-current="false"])),
+    &:is(:hover, :active, :focus) {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
+      #{$css-var-prefix}box-shadow: var(
+        #{$css-var-prefix}button-hover-box-shadow,
+        0 0 0 rgba(0, 0, 0, 0)
+      );
+      #{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      #{$css-var-prefix}box-shadow:
+        var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+        0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
+    }
+  }
+
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [type="button"] {
+    margin-bottom: var(#{$css-var-prefix}spacing);
+  }
+
+  // .secondary, .contrast & .outline
+  @if $enable-classes {
+    // Secondary
+    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
+    #{$parent-selector} [type="reset"],
+    #{$parent-selector} [type="file"]::file-selector-button {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
+      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      cursor: pointer;
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
+        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      }
+
+      &:focus,
+      &:is([aria-current]:not([aria-current="false"])):focus {
+        #{$css-var-prefix}box-shadow:
+          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
+      }
+    }
+
+    // Contrast
+    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
+      #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-hover-background);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover-border);
+        #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
+      }
+
+      &:focus,
+      &:is([aria-current]:not([aria-current="false"])):focus {
+        #{$css-var-prefix}box-shadow:
+          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
+      }
+    }
+
+    // Outline (primary)
+    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,
+    [type="reset"].outline {
+      #{$css-var-prefix}background-color: transparent;
+      #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: transparent;
+        #{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover);
+      }
+    }
+
+    // Outline (secondary)
+    #{$parent-selector}
+      :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
+    [type="reset"].outline {
+      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
+      }
+    }
+
+    // Outline (contrast)
+    #{$parent-selector}
+      :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
+      #{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover);
+      }
+    }
+  } @else {
+    // Secondary button without .class
+    #{$parent-selector} [type="reset"],
+    #{$parent-selector} [type="file"]::file-selector-button {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
+      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      cursor: pointer;
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
+        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      }
+
+      &:focus {
+        #{$css-var-prefix}box-shadow:
+          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
+      }
+    }
+  }
+
+  // Button [disabled]
+  #{$parent-selector}
+    :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
+  #{$parent-selector}
+    :where(fieldset[disabled])
+    :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
diff --git a/public/stylesheets/pico/content/_code.scss b/public/stylesheets/pico/content/_code.scss
new file mode 100644
index 0000000..a16afd0
--- /dev/null
+++ b/public/stylesheets/pico/content/_code.scss
@@ -0,0 +1,73 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/code") {
+  /**
+   * Code
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Correct the inheritance and scaling of font size in all browsers
+  // 2. Correct the odd `em` font sizing in all browsers
+  #{$parent-selector} pre,
+  #{$parent-selector} code,
+  #{$parent-selector} kbd,
+  #{$parent-selector} samp {
+    font-size: 0.875em; // 2
+    font-family: var(#{$css-var-prefix}font-family); // 1
+  }
+
+  #{$parent-selector} pre code {
+    font-size: inherit;
+    font-family: inherit;
+  }
+
+  // Prevent overflow of the container in all browsers (opinionated)
+  #{$parent-selector} pre {
+    -ms-overflow-style: scrollbar;
+    overflow: auto;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  #{$parent-selector} pre,
+  #{$parent-selector} code,
+  #{$parent-selector} kbd {
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background: var(#{$css-var-prefix}code-background-color);
+    color: var(#{$css-var-prefix}code-color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    line-height: initial;
+  }
+
+  #{$parent-selector} code,
+  #{$parent-selector} kbd {
+    display: inline-block;
+    padding: 0.375rem;
+  }
+
+  #{$parent-selector} pre {
+    display: block;
+    margin-bottom: var(#{$css-var-prefix}spacing);
+    overflow-x: auto;
+
+    > code {
+      display: block;
+      padding: var(#{$css-var-prefix}spacing);
+      background: none;
+      line-height: var(#{$css-var-prefix}line-height);
+    }
+  }
+
+  // kbd
+  #{$parent-selector} kbd {
+    background-color: var(#{$css-var-prefix}code-kbd-background-color);
+    color: var(#{$css-var-prefix}code-kbd-color);
+    vertical-align: baseline;
+  }
+}
diff --git a/public/stylesheets/pico/content/_embedded.scss b/public/stylesheets/pico/content/_embedded.scss
new file mode 100644
index 0000000..354a4c4
--- /dev/null
+++ b/public/stylesheets/pico/content/_embedded.scss
@@ -0,0 +1,53 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/embedded") {
+  /**
+   * Embedded content
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // Change the alignment on media elements in all browsers (opinionated)
+  #{$parent-selector} :where(audio, canvas, iframe, img, svg, video) {
+    vertical-align: middle;
+  }
+
+  // Add the correct display in IE 9-
+  #{$parent-selector} audio,
+  #{$parent-selector} video {
+    display: inline-block;
+  }
+
+  // Add the correct display in iOS 4-7
+  #{$parent-selector} audio:not([controls]) {
+    display: none;
+    height: 0;
+  }
+
+  // Remove the border on iframes in all browsers (opinionated)
+  #{$parent-selector} :where(iframe) {
+    border-style: none;
+  }
+
+  // 1. Remove the border on images inside links in IE 10.
+  // 2. Responsive by default
+  #{$parent-selector} img {
+    max-width: 100%; // 2
+    height: auto; // 2
+    border-style: none; // 1
+  }
+
+  // Change the fill color to match the text color in all browsers (opinionated)
+  #{$parent-selector} :where(svg:not([fill])) {
+    fill: currentColor;
+  }
+
+  // Hide the overflow in IE
+  #{$parent-selector} svg:not(:root) {
+    overflow: hidden;
+  }
+}
diff --git a/public/stylesheets/pico/content/_figure.scss b/public/stylesheets/pico/content/_figure.scss
new file mode 100644
index 0000000..d479f1f
--- /dev/null
+++ b/public/stylesheets/pico/content/_figure.scss
@@ -0,0 +1,19 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/figure") {
+  /**
+   * Figure
+   */
+
+  #{$parent-selector} figure {
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    figcaption {
+      padding: calc(var(#{$css-var-prefix}spacing) * 0.5) 0;
+      color: var(#{$css-var-prefix}muted-color);
+    }
+  }
+}
diff --git a/public/stylesheets/pico/content/_link.scss b/public/stylesheets/pico/content/_link.scss
new file mode 100644
index 0000000..1e33115
--- /dev/null
+++ b/public/stylesheets/pico/content/_link.scss
@@ -0,0 +1,69 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/link") {
+  /**
+   * Link
+   */
+
+  #{$parent-selector} :where(a:not([role="button"])),
+  #{$parent-selector} [role="link"] {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
+    #{$css-var-prefix}background-color: transparent;
+    #{$css-var-prefix}underline: var(#{$css-var-prefix}primary-underline);
+    outline: none;
+    background-color: var(#{$css-var-prefix}background-color); // 1
+    color: var(#{$css-var-prefix}color);
+    text-decoration: var(#{$css-var-prefix}text-decoration);
+    text-decoration-color: var(#{$css-var-prefix}underline);
+    text-underline-offset: 0.125em;
+
+    @if $enable-transitions {
+      transition:
+        background-color var(#{$css-var-prefix}transition),
+        color var(#{$css-var-prefix}transition),
+        text-decoration var(#{$css-var-prefix}transition),
+        box-shadow var(#{$css-var-prefix}transition);
+    }
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      #{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
+      #{$css-var-prefix}underline: var(#{$css-var-prefix}primary-hover-underline);
+      #{$css-var-prefix}text-decoration: underline;
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
+    }
+
+    @if $enable-classes {
+      // Secondary
+      &.secondary {
+        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
+        #{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-underline);
+
+        &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+          #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
+          #{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-hover-underline);
+        }
+      }
+
+      // Contrast
+      &.contrast {
+        #{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
+        #{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-underline);
+
+        &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+          #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
+          #{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-hover-underline);
+        }
+      }
+    }
+  }
+
+  #{$parent-selector} a {
+    &[role="button"] {
+      display: inline-block;
+    }
+  }
+}
diff --git a/public/stylesheets/pico/content/_miscs.scss b/public/stylesheets/pico/content/_miscs.scss
new file mode 100644
index 0000000..cf6de13
--- /dev/null
+++ b/public/stylesheets/pico/content/_miscs.scss
@@ -0,0 +1,38 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/miscs") {
+  /**
+   * Miscs
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Correct the inheritance of border color in Firefox
+  // 2. Add the correct box sizing in Firefox
+  #{$parent-selector} hr {
+    height: 0; // 2
+    margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
+    border: 0;
+    border-top: 1px solid var(#{$css-var-prefix}muted-border-color);
+    color: inherit; // 1
+  }
+
+  // Add the correct display in IE 10+
+  #{$parent-selector} [hidden],
+  #{$parent-selector} template {
+    @if $enable-important {
+      display: none !important;
+    } @else {
+      display: none;
+    }
+  }
+
+  // Add the correct display in IE 9-
+  #{$parent-selector} canvas {
+    display: inline-block;
+  }
+}
diff --git a/public/stylesheets/pico/content/_table.scss b/public/stylesheets/pico/content/_table.scss
new file mode 100644
index 0000000..1239bc6
--- /dev/null
+++ b/public/stylesheets/pico/content/_table.scss
@@ -0,0 +1,62 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/table") {
+  /**
+   * Table
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Collapse border spacing in all browsers (opinionated)
+  // 2. Remove text indentation from table contents in Chrome, Edge, and Safari
+  #{$parent-selector} :where(table) {
+    width: 100%;
+    border-collapse: collapse; // 1
+    border-spacing: 0;
+    text-indent: 0; // 2
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  // Cells
+  #{$parent-selector} th,
+  #{$parent-selector} td {
+    padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
+    border-bottom: var(#{$css-var-prefix}border-width)
+      solid
+      var(#{$css-var-prefix}table-border-color);
+    background-color: var(#{$css-var-prefix}background-color);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    text-align: left;
+    text-align: start;
+  }
+
+  // Footer
+  #{$parent-selector} tfoot {
+    th,
+    td {
+      border-top: var(#{$css-var-prefix}border-width)
+        solid
+        var(#{$css-var-prefix}table-border-color);
+      border-bottom: 0;
+    }
+  }
+
+  // Striped
+  @if enable-classes {
+    #{$parent-selector} table {
+      &.striped {
+        tbody tr:nth-child(odd) th,
+        tbody tr:nth-child(odd) td {
+          background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
+        }
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/content/_typography.scss b/public/stylesheets/pico/content/_typography.scss
new file mode 100644
index 0000000..d22956a
--- /dev/null
+++ b/public/stylesheets/pico/content/_typography.scss
@@ -0,0 +1,182 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/typography") {
+  /**
+   * Typography
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // Add the correct font weight in Chrome, Edge, and Safari
+  #{$parent-selector} b,
+  #{$parent-selector} strong {
+    font-weight: bolder;
+  }
+
+  // Prevent `sub` and `sup` elements from affecting the line height in all browsers
+  #{$parent-selector} sub,
+  #{$parent-selector} sup {
+    position: relative;
+    font-size: 0.75em;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+  #{$parent-selector} sub {
+    bottom: -0.25em;
+  }
+  #{$parent-selector} sup {
+    top: -0.5em;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  #{$parent-selector} address,
+  #{$parent-selector} blockquote,
+  #{$parent-selector} dl,
+  #{$parent-selector} ol,
+  #{$parent-selector} p,
+  #{$parent-selector} pre,
+  #{$parent-selector} table,
+  #{$parent-selector} ul {
+    margin-top: 0;
+    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+    color: var(#{$css-var-prefix}color);
+    font-style: normal;
+    font-weight: var(#{$css-var-prefix}font-weight);
+  }
+
+  // Headings
+  #{$parent-selector} h1,
+  #{$parent-selector} h2,
+  #{$parent-selector} h3,
+  #{$parent-selector} h4,
+  #{$parent-selector} h5,
+  #{$parent-selector} h6 {
+    margin-top: 0;
+    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    font-size: var(#{$css-var-prefix}font-size);
+    line-height: var(#{$css-var-prefix}line-height);
+    font-family: var(#{$css-var-prefix}font-family);
+  }
+
+  #{$parent-selector} h1 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h1-color);
+  }
+  #{$parent-selector} h2 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h2-color);
+  }
+  #{$parent-selector} h3 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h3-color);
+  }
+  #{$parent-selector} h4 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h4-color);
+  }
+  #{$parent-selector} h5 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h5-color);
+  }
+  #{$parent-selector} h6 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h6-color);
+  }
+
+  // Margin-top for headings after a block
+  #{$parent-selector}
+    :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
+    ~ :is(h1, h2, h3, h4, h5, h6) {
+      margin-top: var(#{$css-var-prefix}typography-spacing-top);
+    }
+  }
+
+  // Paragraphs
+  #{$parent-selector} p {
+    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+  }
+
+  // Heading group
+  #{$parent-selector} hgroup {
+    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+
+    > * {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    > *:not(:first-child):last-child {
+      #{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
+      #{$css-var-prefix}font-weight: unset;
+      font-size: 1rem;
+    }
+  }
+
+  // Lists
+  #{$parent-selector} :where(ol, ul) {
+    li {
+      margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
+    }
+  }
+
+  // Margin-top for nested lists
+  // 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
+  #{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) {
+    margin: 0; // 1
+    margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
+  }
+
+  #{$parent-selector} ul li {
+    list-style: square;
+  }
+
+  // Highlighted text
+  #{$parent-selector} mark {
+    padding: 0.125rem 0.25rem;
+    background-color: var(#{$css-var-prefix}mark-background-color);
+    color: var(#{$css-var-prefix}mark-color);
+    vertical-align: baseline;
+  }
+
+  // Blockquote
+  #{$parent-selector} blockquote {
+    display: block;
+    margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
+    padding: var(#{$css-var-prefix}spacing);
+    border-right: none;
+    border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
+    border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
+    border-inline-end: none;
+
+    footer {
+      margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
+      color: var(#{$css-var-prefix}blockquote-footer-color);
+    }
+  }
+
+  // Abbreviations
+  // 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
+  #{$parent-selector} abbr[title] {
+    border-bottom: 1px dotted;
+    text-decoration: none; // 1
+    cursor: help;
+  }
+
+  // Ins
+  #{$parent-selector} ins {
+    color: var(#{$css-var-prefix}ins-color);
+    text-decoration: none;
+  }
+
+  // del
+  #{$parent-selector} del {
+    color: var(#{$css-var-prefix}del-color);
+  }
+
+  // selection
+  #{$parent-selector} ::selection {
+    background-color: var(#{$css-var-prefix}text-selection-color);
+  }
+}
diff --git a/public/stylesheets/pico/forms/_basics.scss b/public/stylesheets/pico/forms/_basics.scss
new file mode 100644
index 0000000..39fbe1e
--- /dev/null
+++ b/public/stylesheets/pico/forms/_basics.scss
@@ -0,0 +1,471 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/basics") {
+  // Helper
+  $helper-previous-tags: "input, select, textarea, fieldset";
+  /**
+   * Basics form elements
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Change the font styles in all browsers
+  // 2. Remove the margin in Firefox and Safari
+  #{$parent-selector} input,
+  #{$parent-selector} optgroup,
+  #{$parent-selector} select,
+  #{$parent-selector} textarea {
+    margin: 0; // 2
+    font-size: 1rem; // 1
+    line-height: var(#{$css-var-prefix}line-height); // 1
+    font-family: inherit; // 1
+    letter-spacing: inherit; // 2
+  }
+
+  // Show the overflow in IE.
+  #{$parent-selector} input {
+    overflow: visible;
+  }
+
+  // Remove the inheritance of text transform in Edge, Firefox, and IE
+  #{$parent-selector} select {
+    text-transform: none;
+  }
+
+  // 1. Correct the text wrapping in Edge and IE
+  // 2. Correct the color inheritance from `fieldset` elements in IE
+  // 3. Remove the padding so developers are not caught out when they zero out
+  // `fieldset` elements in all browsers
+  #{$parent-selector} legend {
+    max-width: 100%; // 1
+    padding: 0; // 3
+    color: inherit; // 2
+    white-space: normal; // 1
+  }
+
+  // 1. Remove the default vertical scrollbar in IE
+  #{$parent-selector} textarea {
+    overflow: auto; // 1
+  }
+
+  // Remove the padding in IE 10
+  #{$parent-selector} [type="checkbox"],
+  #{$parent-selector} [type="radio"] {
+    padding: 0;
+  }
+
+  // Correct the cursor style of increment and decrement buttons in Safari
+  #{$parent-selector} ::-webkit-inner-spin-button,
+  #{$parent-selector} ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  // 1. Correct the odd appearance in Chrome and Safari
+  // 2. Correct the outline style in Safari
+  #{$parent-selector} [type="search"] {
+    -webkit-appearance: textfield; // 1
+    outline-offset: -2px; // 2
+  }
+
+  // Remove the inner padding in Chrome and Safari on macOS
+  #{$parent-selector} [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  // 1. Correct the inability to style clickable types in iOS and Safari
+  // 2. Change font properties to `inherit` in Safari
+  #{$parent-selector} ::-webkit-file-upload-button {
+    -webkit-appearance: button; // 1
+    font: inherit; // 2
+  }
+
+  // Remove the inner border and padding of focus outlines in Firefox
+  #{$parent-selector} ::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+
+  //  Remove the focus outline in Firefox
+  #{$parent-selector} :-moz-focusring {
+    outline: none;
+  }
+
+  // Remove the additional :invalid styles in Firefox
+  #{$parent-selector} :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  // Change the inconsistent appearance in IE (opinionated)
+  #{$parent-selector} ::-ms-expand {
+    display: none;
+  }
+
+  // Remove the border and padding in all browsers (opinionated)
+  #{$parent-selector} [type="file"],
+  #{$parent-selector} [type="range"] {
+    padding: 0;
+    border-width: 0;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  // Force height for alternatives input types
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"]) {
+    height: calc(
+      (1rem * var(#{$css-var-prefix}line-height)) +
+        (var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
+        (var(#{$css-var-prefix}border-width) * 2)
+    );
+  }
+
+  // Fieldset
+  #{$parent-selector} fieldset {
+    width: 100%;
+    margin: 0;
+    margin-bottom: var(#{$css-var-prefix}spacing);
+    padding: 0;
+    border: 0;
+  }
+
+  // Label & legend
+  #{$parent-selector} label,
+  #{$parent-selector} fieldset legend {
+    display: block;
+    margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
+  }
+
+  #{$parent-selector} fieldset legend {
+    margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
+  }
+
+  // Blocks, 100%
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"]),
+  #{$parent-selector} button[type="submit"],
+  #{$parent-selector} select,
+  #{$parent-selector} textarea {
+    width: 100%;
+  }
+
+  // Reset appearance (Not Checkboxes, Radios, Range and File)
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
+  #{$parent-selector} select,
+  #{$parent-selector} textarea {
+    appearance: none;
+    padding: var(#{$css-var-prefix}form-element-spacing-vertical)
+      var(#{$css-var-prefix}form-element-spacing-horizontal);
+  }
+
+  // Commons styles
+  #{$parent-selector} input,
+  #{$parent-selector} select,
+  #{$parent-selector} textarea {
+    #{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-background-color);
+    #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-border-color);
+    #{$css-var-prefix}color: var(#{$css-var-prefix}form-element-color);
+    #{$css-var-prefix}box-shadow: none;
+    border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    outline: none;
+    background-color: var(#{$css-var-prefix}background-color);
+    box-shadow: var(#{$css-var-prefix}box-shadow);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+
+    @if $enable-transitions {
+      transition:
+        background-color var(#{$css-var-prefix}transition),
+        border-color var(#{$css-var-prefix}transition),
+        color var(#{$css-var-prefix}transition),
+        box-shadow var(#{$css-var-prefix}transition);
+    }
+  }
+
+  // Active & Focus
+  #{$parent-selector}
+    input:not(
+      [type="submit"],
+      [type="button"],
+      [type="reset"],
+      [type="checkbox"],
+      [type="radio"],
+      [readonly]
+    ),
+  #{$parent-selector} :where(select, textarea):not([readonly]) {
+    &:is(:active, :focus) {
+      #{$css-var-prefix}background-color: var(
+        #{$css-var-prefix}form-element-active-background-color
+      );
+    }
+  }
+
+  // Active & Focus
+  #{$parent-selector}
+    input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
+  #{$parent-selector} :where(select, textarea):not([readonly]) {
+    &:is(:active, :focus) {
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-active-border-color);
+    }
+  }
+
+  // Focus
+  #{$parent-selector}
+    input:not(
+      [type="submit"],
+      [type="button"],
+      [type="reset"],
+      [type="range"],
+      [type="file"],
+      [readonly]
+    ),
+  #{$parent-selector} :where(select, textarea):not([readonly]) {
+    &:focus {
+      #{$css-var-prefix}box-shadow: 0
+        0
+        0
+        var(#{$css-var-prefix}outline-width)
+        var(#{$css-var-prefix}form-element-focus-color);
+    }
+  }
+
+  // Disabled
+  #{$parent-selector} input:not([type="submit"], [type="button"], [type="reset"])[disabled],
+  #{$parent-selector} select[disabled],
+  #{$parent-selector} textarea[disabled],
+  #{$parent-selector} label[aria-disabled="true"],
+  #{$parent-selector}
+    :where(fieldset[disabled])
+    :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
+    opacity: var(#{$css-var-prefix}form-element-disabled-opacity);
+    pointer-events: none;
+  }
+
+  #{$parent-selector} label[aria-disabled="true"] input[disabled] {
+    opacity: 1;
+  }
+
+  // Aria-invalid
+  #{$parent-selector} :where(input, select, textarea) {
+    &:not(
+        [type="checkbox"],
+        [type="radio"],
+        [type="date"],
+        [type="datetime-local"],
+        [type="month"],
+        [type="time"],
+        [type="week"],
+        [type="range"]
+      ) {
+      &[aria-invalid] {
+        @if $enable-important {
+          padding-right: calc(
+            var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
+          ) !important;
+          padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
+          padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
+          padding-inline-end: calc(
+            var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
+          ) !important;
+        } @else {
+          padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+          padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
+          padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
+          padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+        }
+        background-position: center right 0.75rem;
+        background-size: 1rem auto;
+        background-repeat: no-repeat;
+      }
+
+      &[aria-invalid="false"]:not(select) {
+        background-image: var(#{$css-var-prefix}icon-valid);
+      }
+
+      &[aria-invalid="true"]:not(select) {
+        background-image: var(#{$css-var-prefix}icon-invalid);
+      }
+    }
+
+    &[aria-invalid="false"] {
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
+
+      &:is(:active, :focus) {
+        @if $enable-important {
+          #{$css-var-prefix}border-color: var(
+            #{$css-var-prefix}form-element-valid-active-border-color
+          ) !important;
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$css-var-prefix}box-shadow: 0
+              0
+              0
+              var(#{$css-var-prefix}outline-width)
+              var(#{$css-var-prefix}form-element-valid-focus-color) !important;
+          }
+        } @else {
+          #{$css-var-prefix}border-color: var(
+            #{$css-var-prefix}form-element-valid-active-border-color
+          );
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$css-var-prefix}box-shadow: 0
+              0
+              0
+              var(#{$css-var-prefix}outline-width)
+              var(#{$css-var-prefix}form-element-valid-focus-color);
+          }
+        }
+      }
+    }
+
+    &[aria-invalid="true"] {
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
+
+      &:is(:active, :focus) {
+        @if $enable-important {
+          #{$css-var-prefix}border-color: var(
+            #{$css-var-prefix}form-element-invalid-active-border-color
+          ) !important;
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$css-var-prefix}box-shadow: 0
+              0
+              0
+              var(#{$css-var-prefix}outline-width)
+              var(#{$css-var-prefix}form-element-invalid-focus-color) !important;
+          }
+        } @else {
+          #{$css-var-prefix}border-color: var(
+            #{$css-var-prefix}form-element-invalid-active-border-color
+          );
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$css-var-prefix}box-shadow: 0
+              0
+              0
+              var(#{$css-var-prefix}outline-width)
+              var(#{$css-var-prefix}form-element-invalid-focus-color);
+          }
+        }
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    #{$parent-selector} :where(input, select, textarea) {
+      &:not([type="checkbox"], [type="radio"]) {
+        &:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
+          background-position: center left 0.75rem;
+        }
+      }
+    }
+  }
+
+  // Placeholder
+  #{$parent-selector} input::placeholder,
+  #{$parent-selector} input::-webkit-input-placeholder,
+  #{$parent-selector} textarea::placeholder,
+  #{$parent-selector} textarea::-webkit-input-placeholder,
+  #{$parent-selector} select:invalid {
+    color: var(#{$css-var-prefix}form-element-placeholder-color);
+    opacity: 1;
+  }
+
+  // Margin bottom (Not Checkboxes and Radios)
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"]),
+  #{$parent-selector} select,
+  #{$parent-selector} textarea {
+    margin-bottom: var(#{$css-var-prefix}spacing);
+  }
+
+  // Select
+  #{$parent-selector} select {
+    // Unstyle the caret on `<select>`s in IE10+.
+    &::-ms-expand {
+      border: 0;
+      background-color: transparent;
+    }
+
+    &:not([multiple], [size]) {
+      padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+      padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
+      padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
+      padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+      background-image: var(#{$css-var-prefix}icon-chevron);
+      background-position: center right 0.75rem;
+      background-size: 1rem auto;
+      background-repeat: no-repeat;
+    }
+
+    &[multiple] {
+      option {
+        &:checked {
+          background: var(#{$css-var-prefix}form-element-selected-background-color);
+          color: var(#{$css-var-prefix}form-element-color);
+        }
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    #{$parent-selector} select {
+      &:not([multiple], [size]) {
+        background-position: center left 0.75rem;
+      }
+    }
+  }
+
+  // Textarea
+  #{$parent-selector} textarea {
+    display: block;
+    resize: vertical;
+
+    &[aria-invalid] {
+      @if $enable-important {
+        #{$css-var-prefix}icon-height: calc(
+          (1rem * var(#{$css-var-prefix}line-height)) +
+            (var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
+            (var(#{$css-var-prefix}border-width) * 2)
+        );
+        background-position: top right 0.75rem !important;
+        background-size: 1rem var(#{$css-var-prefix}icon-height) !important;
+      }
+    }
+  }
+  @if map.get($modules, "layout/grid") and $enable-classes {
+    $helper-previous-tags: $helper-previous-tags + ", .grid";
+  }
+
+  #{$parent-selector} :where(#{$helper-previous-tags}) {
+    + small {
+      display: block;
+      width: 100%;
+      margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75);
+      margin-bottom: var(#{$css-var-prefix}spacing);
+      color: var(#{$css-var-prefix}muted-color);
+    }
+    &[aria-invalid="false"] {
+      + small {
+        color: var(#{$css-var-prefix}ins-color);
+      }
+    }
+    &[aria-invalid="true"] {
+      + small {
+        color: var(#{$css-var-prefix}del-color);
+      }
+    }
+  }
+
+  // Styles for Input inside a label
+  #{$parent-selector} label {
+    > :where(input, select, textarea) {
+      margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
+    }
+  }
+}
diff --git a/public/stylesheets/pico/forms/_checkbox-radio-switch.scss b/public/stylesheets/pico/forms/_checkbox-radio-switch.scss
new file mode 100644
index 0000000..9e53aa5
--- /dev/null
+++ b/public/stylesheets/pico/forms/_checkbox-radio-switch.scss
@@ -0,0 +1,177 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/checkbox-radio-switch") {
+  /**
+   * Checkboxes, Radios and Switches
+   */
+
+  // Labels
+  // Not working in Firefox, which doesn't support the `:has()` pseudo-class
+  #{$parent-selector} label {
+    &:has([type="checkbox"], [type="radio"]) {
+      width: fit-content;
+      cursor: pointer;
+    }
+  }
+
+  #{$parent-selector} [type="checkbox"],
+  #{$parent-selector} [type="radio"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 1.25em;
+    height: 1.25em;
+    margin-top: -0.125em;
+    margin-inline-end: 0.5em;
+    border-width: var(#{$css-var-prefix}border-width);
+    vertical-align: middle;
+    cursor: pointer;
+
+    &::-ms-check {
+      display: none; // unstyle IE checkboxes
+    }
+
+    &:checked,
+    &:checked:active,
+    &:checked:focus {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
+      background-image: var(#{$css-var-prefix}icon-checkbox);
+      background-position: center;
+      background-size: 0.75em auto;
+      background-repeat: no-repeat;
+    }
+
+    & ~ label {
+      display: inline-block;
+      margin-bottom: 0;
+      cursor: pointer;
+
+      &:not(:last-of-type) {
+        margin-inline-end: 1em;
+      }
+    }
+  }
+
+  // Checkboxes
+  #{$parent-selector} [type="checkbox"] {
+    &:indeterminate {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
+      background-image: var(#{$css-var-prefix}icon-minus);
+      background-position: center;
+      background-size: 0.75em auto;
+      background-repeat: no-repeat;
+    }
+  }
+
+  // Radios
+  #{$parent-selector} [type="radio"] {
+    border-radius: 50%;
+
+    &:checked,
+    &:checked:active,
+    &:checked:focus {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-inverse);
+      border-width: 0.35em;
+      background-image: none;
+    }
+  }
+
+  // Switchs
+  #{$parent-selector} [type="checkbox"][role="switch"] {
+    #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
+    #{$css-var-prefix}color: var(#{$css-var-prefix}switch-color);
+
+    // Config
+    $switch-height: 1.25em;
+    $switch-width: 2.25em;
+    $switch-transition: 0.1s ease-in-out;
+
+    // Styles
+    width: $switch-width;
+    height: $switch-height;
+    border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
+    border-radius: $switch-height;
+    background-color: var(#{$css-var-prefix}background-color);
+    line-height: $switch-height;
+
+    &:not([aria-invalid]) {
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
+    }
+
+    &:before {
+      display: block;
+      aspect-ratio: 1;
+      height: 100%;
+      border-radius: 50%;
+      background-color: var(#{$css-var-prefix}color);
+      box-shadow: var(#{$css-var-prefix}switch-thumb-box-shadow);
+      content: "";
+
+      @if $enable-transitions {
+        transition: margin $switch-transition;
+      }
+    }
+
+    &:focus {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
+    }
+
+    &:checked {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-checked-background-color);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-checked-background-color);
+      background-image: none;
+
+      &::before {
+        margin-inline-start: calc(#{$switch-width} - #{$switch-height});
+      }
+    }
+
+    &[disabled] {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}border-color);
+    }
+  }
+
+  // Aria-invalid
+  #{$parent-selector} [type="checkbox"],
+  #{$parent-selector} [type="checkbox"][role="switch"] {
+    &[aria-invalid="false"] {
+      &:checked,
+      &:checked:active,
+      &:checked:focus {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-valid-border-color);
+      }
+    }
+    &:checked,
+    &:checked:active,
+    &:checked:focus {
+      &[aria-invalid="true"] {
+        #{$css-var-prefix}background-color: var(
+          #{$css-var-prefix}form-element-invalid-border-color
+        );
+      }
+    }
+  }
+
+  #{$parent-selector} [type="checkbox"],
+  #{$parent-selector} [type="radio"],
+  #{$parent-selector} [type="checkbox"][role="switch"] {
+    &[aria-invalid="false"] {
+      &:checked,
+      &:checked:active,
+      &:checked:focus {
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
+      }
+    }
+    &:checked,
+    &:checked:active,
+    &:checked:focus {
+      &[aria-invalid="true"] {
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/forms/_input-color.scss b/public/stylesheets/pico/forms/_input-color.scss
new file mode 100644
index 0000000..3b5f28c
--- /dev/null
+++ b/public/stylesheets/pico/forms/_input-color.scss
@@ -0,0 +1,37 @@
+@use "sass:map";
+@use "../settings" as *;
+
+// Wrapper
+@mixin color-wrapper {
+  padding: 0;
+}
+
+// Swatch
+@mixin color-swatch {
+  border: 0;
+  border-radius: calc(var(#{$css-var-prefix}border-radius) * 0.5);
+}
+
+@if map.get($modules, "forms/input-color") {
+  /**
+   * Input type color
+   */
+
+  #{$parent-selector} [type="color"] {
+    &::-webkit-color-swatch-wrapper {
+      @include color-wrapper;
+    }
+
+    &::-moz-focus-inner {
+      @include color-wrapper;
+    }
+
+    &::-webkit-color-swatch {
+      @include color-swatch;
+    }
+
+    &::-moz-color-swatch {
+      @include color-swatch;
+    }
+  }
+}
diff --git a/public/stylesheets/pico/forms/_input-date.scss b/public/stylesheets/pico/forms/_input-date.scss
new file mode 100644
index 0000000..c1e1c20
--- /dev/null
+++ b/public/stylesheets/pico/forms/_input-date.scss
@@ -0,0 +1,60 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/input-date") {
+  /**
+   * Input type datetime
+   */
+
+  // :not() are needed to add Specificity and avoid !important on padding
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+    &:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
+      #{$css-var-prefix}icon-position: 0.75rem;
+      #{$css-var-prefix}icon-width: 1rem;
+      padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
+      background-image: var(#{$css-var-prefix}icon-date);
+      background-position: center right var(#{$css-var-prefix}icon-position);
+      background-size: var(#{$css-var-prefix}icon-width) auto;
+      background-repeat: no-repeat;
+    }
+
+    // Time
+    &[type="time"] {
+      background-image: var(#{$css-var-prefix}icon-time);
+    }
+  }
+
+  // Calendar picker
+  #{$parent-selector} [type="date"],
+  #{$parent-selector} [type="datetime-local"],
+  #{$parent-selector} [type="month"],
+  #{$parent-selector} [type="time"],
+  #{$parent-selector} [type="week"] {
+    &::-webkit-calendar-picker-indicator {
+      width: var(#{$css-var-prefix}icon-width);
+      margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
+      margin-left: var(#{$css-var-prefix}icon-position);
+      opacity: 0;
+    }
+  }
+
+  // Calendar icons are hidden in Firefox
+  @if $enable-important {
+    @-moz-document url-prefix() {
+      #{$parent-selector} [type="date"],
+      #{$parent-selector} [type="datetime-local"],
+      #{$parent-selector} [type="month"],
+      #{$parent-selector} [type="time"],
+      #{$parent-selector} [type="week"] {
+        padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
+        background-image: none !important;
+      }
+    }
+  }
+
+  [dir="rtl"]
+    #{$parent-selector}
+    :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
+    text-align: right;
+  }
+}
diff --git a/public/stylesheets/pico/forms/_input-file.scss b/public/stylesheets/pico/forms/_input-file.scss
new file mode 100644
index 0000000..a550508
--- /dev/null
+++ b/public/stylesheets/pico/forms/_input-file.scss
@@ -0,0 +1,41 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/input-file") {
+  /**
+   * Input type file
+   */
+
+  // 1. Hack to display the outline on the focused file selector button
+  //    with the forced overflow hidden on the input[type="file"] element.
+  #{$parent-selector} [type="file"] {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
+    margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
+    padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0;
+    padding-left: var(#{$css-var-prefix}outline-width); // 1
+    border: 0;
+    border-radius: 0;
+    background: none;
+
+    &::file-selector-button {
+      margin-right: calc(var(#{$css-var-prefix}spacing) / 2);
+      padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
+        var(#{$css-var-prefix}form-element-spacing-horizontal);
+    }
+
+    &:is(:hover, :active, :focus) {
+      &::file-selector-button {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
+      }
+    }
+
+    &:focus {
+      &::file-selector-button {
+        #{$css-var-prefix}box-shadow:
+          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/forms/_input-range.scss b/public/stylesheets/pico/forms/_input-range.scss
new file mode 100644
index 0000000..08b8124
--- /dev/null
+++ b/public/stylesheets/pico/forms/_input-range.scss
@@ -0,0 +1,100 @@
+@use "sass:map";
+@use "../settings" as *;
+
+// Config
+$height-track: 0.375rem;
+$height-thumb: 1.25rem;
+$border-thumb: 2px;
+
+// Slider Track
+@mixin slider-track {
+  width: 100%;
+  height: $height-track;
+  border-radius: var(#{$css-var-prefix}border-radius);
+  background-color: var(#{$css-var-prefix}range-border-color);
+
+  @if $enable-transitions {
+    transition:
+      background-color var(#{$css-var-prefix}transition),
+      box-shadow var(#{$css-var-prefix}transition);
+  }
+}
+
+// Slider Thumb
+@mixin slider-thumb {
+  -webkit-appearance: none;
+  width: $height-thumb;
+  height: $height-thumb;
+  margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
+  border: $border-thumb solid var(#{$css-var-prefix}range-thumb-border-color);
+  border-radius: 50%;
+  background-color: var(#{$css-var-prefix}range-thumb-color);
+  cursor: pointer;
+
+  @if $enable-transitions {
+    transition:
+      background-color var(#{$css-var-prefix}transition),
+      transform var(#{$css-var-prefix}transition);
+  }
+}
+
+@if map.get($modules, "forms/input-range") {
+  /**
+   * Input type range
+   */
+
+  #{$parent-selector} [type="range"] {
+    // Styles
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: $height-thumb;
+    background: none;
+
+    &::-webkit-slider-runnable-track {
+      @include slider-track;
+    }
+
+    &::-moz-range-track {
+      @include slider-track;
+    }
+
+    &::-ms-track {
+      @include slider-track;
+    }
+
+    &::-webkit-slider-thumb {
+      @include slider-thumb;
+    }
+
+    &::-moz-range-thumb {
+      @include slider-thumb;
+    }
+
+    &::-ms-thumb {
+      @include slider-thumb;
+    }
+
+    &:active,
+    &:focus-within {
+      #{$css-var-prefix}range-border-color: var(#{$css-var-prefix}range-active-border-color);
+      #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}range-thumb-active-color);
+    }
+
+    &:active {
+      // Slider Thumb
+      &::-webkit-slider-thumb {
+        transform: scale(1.25);
+      }
+
+      &::-moz-range-thumb {
+        transform: scale(1.25);
+      }
+
+      &::-ms-thumb {
+        transform: scale(1.25);
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/forms/_input-search.scss b/public/stylesheets/pico/forms/_input-search.scss
new file mode 100644
index 0000000..f015906
--- /dev/null
+++ b/public/stylesheets/pico/forms/_input-search.scss
@@ -0,0 +1,60 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/input-search") {
+  /**
+   * Input type search
+   */
+
+  // :not() are needed to add Specificity and avoid !important on padding
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+    &[type="search"] {
+      padding-inline-start: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem);
+      background-image: var(#{$css-var-prefix}icon-search);
+      background-position: center
+        left
+        calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 0.125rem);
+      background-size: 1rem auto;
+      background-repeat: no-repeat;
+
+      &[aria-invalid] {
+        @if $enable-important {
+          padding-inline-start: calc(
+            var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
+          ) !important;
+        } @else {
+          padding-inline-start: calc(
+            var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
+          );
+        }
+        background-position:
+          center left 1.125rem,
+          center right 0.75rem;
+      }
+
+      &[aria-invalid="false"] {
+        background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-valid);
+      }
+
+      &[aria-invalid="true"] {
+        background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-invalid);
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    #{$parent-selector} :where(input) {
+      &:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+        &[type="search"] {
+          background-position: center right 1.125rem;
+
+          &[aria-invalid] {
+            background-position:
+              center right 1.125rem,
+              center left 0.75rem;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/helpers/_copyright.scss b/public/stylesheets/pico/helpers/_copyright.scss
new file mode 100644
index 0000000..73123b5
--- /dev/null
+++ b/public/stylesheets/pico/helpers/_copyright.scss
@@ -0,0 +1,4 @@
+/*!
+ * Pico CSS ✨ v2.0.6 (https://picocss.com)
+ * Copyright 2019-2024 - Licensed under MIT
+ */
diff --git a/public/stylesheets/pico/helpers/_functions.scss b/public/stylesheets/pico/helpers/_functions.scss
new file mode 100644
index 0000000..c6a704b
--- /dev/null
+++ b/public/stylesheets/pico/helpers/_functions.scss
@@ -0,0 +1,49 @@
+// Display color as RGB
+@function display-rgb($color) {
+  @return unquote("rgb(" + red($color) + ", " + green($color) + ", " + blue($color) + ")");
+}
+
+// Generate a shadow layer
+@function shadow-layer($elevation, $blur, $opacity, $color) {
+  @return #{($elevation * 0.5)} #{$elevation} #{$blur} #{rgba($color, $opacity)};
+}
+
+// Generate a shadow with 7 layers
+@function shadow($color) {
+  $box-shadow-elevation: 1rem;
+  $box-shadow-blur-strengh: 6rem;
+  $box-shadow-opacity: 0.06;
+
+  @return shadow-layer(
+      $box-shadow-elevation * 0.029,
+      $box-shadow-blur-strengh * 0.029,
+      $box-shadow-opacity * 0.283,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.067,
+      $box-shadow-blur-strengh * 0.067,
+      $box-shadow-opacity * 0.4,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.125,
+      $box-shadow-blur-strengh * 0.125,
+      $box-shadow-opacity * 0.5,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.225,
+      $box-shadow-blur-strengh * 0.225,
+      $box-shadow-opacity * 0.6,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.417,
+      $box-shadow-blur-strengh * 0.417,
+      $box-shadow-opacity * 0.717,
+      $color
+    ),
+    shadow-layer($box-shadow-elevation, $box-shadow-blur-strengh, $box-shadow-opacity, $color),
+    0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))};
+}
diff --git a/public/stylesheets/pico/layout/_container.scss b/public/stylesheets/pico/layout/_container.scss
new file mode 100644
index 0000000..0efa9ad
--- /dev/null
+++ b/public/stylesheets/pico/layout/_container.scss
@@ -0,0 +1,33 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/container") and $enable-classes {
+  /**
+   * Container
+   */
+
+  .container,
+  .container-fluid {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: var(#{$css-var-prefix}spacing);
+    padding-left: var(#{$css-var-prefix}spacing);
+  }
+
+  .container {
+    $first-breakpoint: true;
+    @each $key, $values in $breakpoints {
+      @if $values {
+        @media (min-width: map.get($values, "breakpoint")) {
+          max-width: map.get($values, "viewport");
+          @if $first-breakpoint {
+            $first-breakpoint: false;
+            padding-right: 0;
+            padding-left: 0;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/layout/_document.scss b/public/stylesheets/pico/layout/_document.scss
new file mode 100644
index 0000000..4677a69
--- /dev/null
+++ b/public/stylesheets/pico/layout/_document.scss
@@ -0,0 +1,52 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/document") {
+  /**
+   * Document
+   * Content-box & Responsive typography
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Add border box sizing in all browsers (opinionated)
+  // 2. Backgrounds do not repeat by default (opinionated)
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box; // 1
+    background-repeat: no-repeat; // 2
+  }
+
+  // 1. Add text decoration inheritance in all browsers (opinionated)
+  // 2. Add vertical alignment inheritance in all browsers (opinionated)
+  ::before,
+  ::after {
+    text-decoration: inherit; // 1
+    vertical-align: inherit; // 2
+  }
+
+  // 1. Change the line height in all browsers (opinionated)
+  // 2. Breaks words to prevent overflow in all browsers (opinionated)
+  // 3. Use a 4-space tab width in all browsers (opinionated)
+  // 4. Remove the grey highlight on links in iOS (opinionated)
+  // 5. Prevent adjustments of font size after orientation changes in iOS
+  :where(:root) {
+    -webkit-tap-highlight-color: transparent; // 4
+    -webkit-text-size-adjust: 100%; // 5
+    text-size-adjust: 100%; // 5
+    background-color: var(#{$css-var-prefix}background-color);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    font-size: var(#{$css-var-prefix}font-size);
+    line-height: var(#{$css-var-prefix}line-height); // 1
+    font-family: var(#{$css-var-prefix}font-family);
+    text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
+    text-rendering: optimizeLegibility;
+    overflow-wrap: break-word; // 2
+    tab-size: 4; // 3
+  }
+}
diff --git a/public/stylesheets/pico/layout/_grid.scss b/public/stylesheets/pico/layout/_grid.scss
new file mode 100644
index 0000000..025a38c
--- /dev/null
+++ b/public/stylesheets/pico/layout/_grid.scss
@@ -0,0 +1,26 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/grid") and $enable-classes {
+  /**
+   * Grid
+   * Minimal grid system with auto-layout columns
+   */
+
+  .grid {
+    grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
+    grid-row-gap: var(#{$css-var-prefix}grid-row-gap);
+    display: grid;
+    grid-template-columns: 1fr;
+
+    @if map.get($breakpoints, "md") {
+      @media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
+        grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+      }
+    }
+
+    & > * {
+      min-width: 0; // HACK for childs in overflow
+    }
+  }
+}
diff --git a/public/stylesheets/pico/layout/_landmarks.scss b/public/stylesheets/pico/layout/_landmarks.scss
new file mode 100644
index 0000000..b5d5a4e
--- /dev/null
+++ b/public/stylesheets/pico/layout/_landmarks.scss
@@ -0,0 +1,62 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/landmarks") {
+  /**
+   * Landmarks
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Remove the margin in all browsers (opinionated)
+  body {
+    width: 100%;
+    margin: 0; // 1
+  }
+
+  // Render the `main` element consistently in IE
+  main {
+    display: block;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+  #{$parent-selector} #{$semantic-root-element} {
+    > header,
+    > main,
+    > footer {
+      // <header>, <main>, <footer> as containers
+      @if $enable-semantic-container {
+        $first-breakpoint: true;
+        width: 100%;
+        margin-right: auto;
+        margin-left: auto;
+        padding: var(#{$css-var-prefix}block-spacing-vertical)
+          var(#{$css-var-prefix}block-spacing-horizontal);
+
+        @if $enable-viewport {
+          @each $key, $values in $breakpoints {
+            @if $values {
+              @media (min-width: map.get($values, "breakpoint")) {
+                max-width: map.get($values, "viewport");
+                @if $first-breakpoint {
+                  $first-breakpoint: false;
+                  padding-right: 0;
+                  padding-left: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      // Regular vertical spacings for <header>, <main>, <footer>
+      @else {
+        padding-block: var(#{$css-var-prefix}block-spacing-vertical);
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/layout/_overflow-auto.scss b/public/stylesheets/pico/layout/_overflow-auto.scss
new file mode 100644
index 0000000..085d95a
--- /dev/null
+++ b/public/stylesheets/pico/layout/_overflow-auto.scss
@@ -0,0 +1,12 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/overflow-auto") and $enable-classes {
+  /**
+   * Overflow auto
+   */
+
+  #{$parent-selector} .overflow-auto {
+    overflow: auto;
+  }
+}
diff --git a/public/stylesheets/pico/layout/_section.scss b/public/stylesheets/pico/layout/_section.scss
new file mode 100644
index 0000000..4f88496
--- /dev/null
+++ b/public/stylesheets/pico/layout/_section.scss
@@ -0,0 +1,12 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/section") {
+  /**
+   * Section
+   */
+
+  #{$parent-selector} section {
+    margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
+  }
+}
diff --git a/public/stylesheets/pico/pico.classless.scss b/public/stylesheets/pico/pico.classless.scss
new file mode 100644
index 0000000..88a8be9
--- /dev/null
+++ b/public/stylesheets/pico/pico.classless.scss
@@ -0,0 +1,5 @@
+// Pico classless version
+@use "index" with (
+  $enable-semantic-container: true,
+  $enable-classes: false
+);
diff --git a/public/stylesheets/pico/pico.colors.scss b/public/stylesheets/pico/pico.colors.scss
new file mode 100644
index 0000000..68cc296
--- /dev/null
+++ b/public/stylesheets/pico/pico.colors.scss
@@ -0,0 +1,2 @@
+@use "helpers/copyright";
+@use "colors/utilities";
diff --git a/public/stylesheets/pico/pico.conditional.scss b/public/stylesheets/pico/pico.conditional.scss
new file mode 100644
index 0000000..4ac9489
--- /dev/null
+++ b/public/stylesheets/pico/pico.conditional.scss
@@ -0,0 +1,4 @@
+// Pico conditional version
+@use "index" with (
+  $parent-selector: ".pico"
+);
diff --git a/public/stylesheets/pico/pico.fluid.classless.scss b/public/stylesheets/pico/pico.fluid.classless.scss
new file mode 100644
index 0000000..fa2037e
--- /dev/null
+++ b/public/stylesheets/pico/pico.fluid.classless.scss
@@ -0,0 +1,6 @@
+// Pico classless version
+@use "index" with (
+  $enable-semantic-container: true,
+  $enable-viewport: false,
+  $enable-classes: false
+);
diff --git a/public/stylesheets/pico/pico.scss b/public/stylesheets/pico/pico.scss
new file mode 100644
index 0000000..88490ff
--- /dev/null
+++ b/public/stylesheets/pico/pico.scss
@@ -0,0 +1,2 @@
+@forward "settings";
+@use "index";
diff --git a/public/stylesheets/pico/postcss.config.js b/public/stylesheets/pico/postcss.config.js
new file mode 100644
index 0000000..4eaff47
--- /dev/null
+++ b/public/stylesheets/pico/postcss.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  syntax: "postcss-scss",
+  map: false,
+  plugins: {
+    "css-declaration-sorter": { 
+      order: "smacss" 
+    }
+  }
+}
\ No newline at end of file
diff --git a/public/stylesheets/pico/themes/_default.scss b/public/stylesheets/pico/themes/_default.scss
new file mode 100644
index 0000000..dce217b
--- /dev/null
+++ b/public/stylesheets/pico/themes/_default.scss
@@ -0,0 +1,5 @@
+// Styles
+@use "default/styles";
+
+// Colors schemes
+@use "default/schemes";
diff --git a/public/stylesheets/pico/themes/default/_dark.scss b/public/stylesheets/pico/themes/default/_dark.scss
new file mode 100644
index 0000000..8b710ee
--- /dev/null
+++ b/public/stylesheets/pico/themes/default/_dark.scss
@@ -0,0 +1,248 @@
+@use "sass:map";
+@use "../../colors" as *;
+@use "../../settings" as *;
+@use "../../helpers/functions";
+@use "theme-colors";
+
+// Default: Dark theme
+@mixin theme {
+  #{$css-var-prefix}background-color: #{mix($slate-950, $slate-900)};
+
+  // Text color
+  #{$css-var-prefix}color: #{$zinc-200};
+
+  // Text selection color
+  #{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "dark");
+
+  // Muted colors
+  #{$css-var-prefix}muted-color: #{$zinc-450};
+  #{$css-var-prefix}muted-border-color: #{$slate-850};
+
+  // Primary colors
+  #{$css-var-prefix}primary: theme-colors.get("primary", "dark");
+  #{$css-var-prefix}primary-background: theme-colors.get("primary-background", "dark");
+  #{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
+  #{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "dark");
+  #{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "dark");
+  #{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "dark");
+  #{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
+  #{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
+  #{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "dark");
+  #{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "dark");
+
+  // Secondary colors
+  #{$css-var-prefix}secondary: #{$zinc-350};
+  #{$css-var-prefix}secondary-background: #{$slate-600};
+  #{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
+  #{$css-var-prefix}secondary-underline: #{rgba($zinc-350, 0.5)};
+  #{$css-var-prefix}secondary-hover: #{$zinc-250};
+  #{$css-var-prefix}secondary-hover-background: #{$slate-550};
+  #{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
+  #{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
+  #{$css-var-prefix}secondary-focus: #{rgba($slate-350, 0.25)};
+  #{$css-var-prefix}secondary-inverse: #{$white};
+
+  // Contrast colors
+  #{$css-var-prefix}contrast: #{$slate-100};
+  #{$css-var-prefix}contrast-background: #{$slate-50};
+  #{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
+  #{$css-var-prefix}contrast-underline: #{rgba($slate-100, 0.5)};
+  #{$css-var-prefix}contrast-hover: #{$white};
+  #{$css-var-prefix}contrast-hover-background: #{$white};
+  #{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
+  #{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}contrast-hover);
+  #{$css-var-prefix}contrast-focus: #{rgba($slate-150, 0.25)};
+  #{$css-var-prefix}contrast-inverse: #{$black};
+
+  // Box shadow
+  #{$css-var-prefix}box-shadow: functions.shadow(mix($black, $slate-950));
+
+  // Typography
+  @if map.get($modules, "content/typography") {
+    // Headings colors
+    #{$css-var-prefix}h1-color: #{$zinc-50};
+    #{$css-var-prefix}h2-color: #{$zinc-100};
+    #{$css-var-prefix}h3-color: #{$zinc-200};
+    #{$css-var-prefix}h4-color: #{$zinc-250};
+    #{$css-var-prefix}h5-color: #{$zinc-300};
+    #{$css-var-prefix}h6-color: #{$zinc-400};
+
+    // Highlighted text (<mark>)
+    #{$css-var-prefix}mark-background-color: #{$azure-750};
+    #{$css-var-prefix}mark-color: #{$white};
+
+    // Inserted (<ins>) & Deleted (<del>)
+    #{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-200)};
+    #{$css-var-prefix}del-color: #{mix($red-500, $zinc-200)};
+
+    // Blockquote
+    #{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Button
+  @if map.get($modules, "content/button") {
+    // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
+    // Don't use, 'none, 'false, 'null', '0', etc.
+    #{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    #{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+
+  // Table
+  @if map.get($modules, "content/table") {
+    #{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
+  }
+
+  // Code
+  @if map.get($modules, "content/code") {
+    #{$css-var-prefix}code-background-color: #{mix($slate-900, $slate-850, 75%)};
+    #{$css-var-prefix}code-color: #{$zinc-400};
+    #{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
+  }
+
+  // Form elements
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}form-element-background-color: #{mix($slate-900, $slate-850)};
+    #{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
+    #{$css-var-prefix}form-element-border-color: #{$slate-800};
+    #{$css-var-prefix}form-element-color: #{$zinc-100};
+    #{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
+    #{$css-var-prefix}form-element-active-background-color: #{mix($slate-900, $slate-850, 75%)};
+    #{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-disabled-opacity: 0.5;
+    #{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $slate-600)};
+    #{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)};
+    #{$css-var-prefix}form-element-invalid-focus-color: var(
+      #{$css-var-prefix}form-element-invalid-active-border-color
+    );
+    #{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $slate-600)};
+    #{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)};
+    #{$css-var-prefix}form-element-valid-focus-color: var(
+      #{$css-var-prefix}form-element-valid-active-border-color
+    );
+
+    // Focus for buttons, radio and select
+    input:is(
+        [type="submit"],
+        [type="button"],
+        [type="reset"],
+        [type="checkbox"],
+        [type="radio"],
+        [type="file"]
+      ) {
+      #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
+    }
+  }
+
+  // Switch (input[type="checkbox"][role="switch"])
+  @if map.get($modules, "forms/checkbox-radio-switch") {
+    #{$css-var-prefix}switch-background-color: #{$slate-750};
+    #{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
+    #{$css-var-prefix}switch-color: #{$white};
+    #{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "dark");
+  }
+
+  // Range (input[type="range"])
+  @if map.get($modules, "forms/input-range") {
+    #{$css-var-prefix}range-border-color: #{$slate-850};
+    #{$css-var-prefix}range-active-border-color: #{$slate-800};
+    #{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
+    #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
+    #{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Accordion (<details>)
+  @if map.get($modules, "components/accordion") {
+    #{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
+    #{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Card (<article>)
+  @if map.get($modules, "components/card") {
+    #{$css-var-prefix}card-background-color: #{$slate-900};
+    #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}card-background-color);
+    #{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)};
+  }
+
+  // Dropdown (details.dropdown)
+  @if map.get($modules, "components/dropdown") and $enable-classes {
+    #{$css-var-prefix}dropdown-background-color: #{$slate-900};
+    #{$css-var-prefix}dropdown-border-color: #{$slate-850};
+    #{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}dropdown-hover-background-color: #{$slate-850};
+  }
+
+  // Loading ([aria-busy=true])
+  @if map.get($modules, "components/loading") {
+    #{$css-var-prefix}loading-spinner-opacity: 0.5;
+  }
+
+  // Modal (<dialog>)
+  @if map.get($modules, "components/modal") {
+    #{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.75)};
+  }
+
+  // Progress
+  @if map.get($modules, "components/progress") {
+    #{$css-var-prefix}progress-background-color: #{$slate-850};
+    #{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Tooltip ([data-tooltip])
+  @if map.get($modules, "components/tooltip") {
+    #{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
+    #{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
+  }
+
+  // Chevron icons
+  @if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
+    // Change the icon color to black for accordion and dropdown .contrast buttons
+    @if $enable-classes {
+      #{$parent-selector} details {
+        summary {
+          &[role="button"].contrast:not(.outline) {
+            &::after {
+              filter: brightness(0);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Form validation icons
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    #{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+  }
+
+  // Loading icon (animated)
+  @if map.get($modules, "components/loading") {
+    // Change the icon color to black for .contrast buttons
+    @if $enable-classes {
+      #{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
+        &.contrast:is(
+            button,
+            [type="submit"],
+            [type="button"],
+            [type="reset"],
+            [role="button"]
+          ):not(.outline) {
+          &::before {
+            filter: brightness(0);
+          }
+        }
+      }
+    }
+  }
+
+  // Document
+  color-scheme: dark;
+}
diff --git a/public/stylesheets/pico/themes/default/_light.scss b/public/stylesheets/pico/themes/default/_light.scss
new file mode 100644
index 0000000..17b730b
--- /dev/null
+++ b/public/stylesheets/pico/themes/default/_light.scss
@@ -0,0 +1,212 @@
+@use "sass:map";
+@use "../../colors" as *;
+@use "../../settings" as *;
+@use "../../helpers/functions";
+@use "theme-colors";
+
+// Default: Light theme
+@mixin theme {
+  #{$css-var-prefix}background-color: #{$white};
+
+  // Text color
+  #{$css-var-prefix}color: #{$zinc-750};
+
+  // Text selection color
+  #{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "light");
+
+  // Muted colors
+  #{$css-var-prefix}muted-color: #{$zinc-550};
+  #{$css-var-prefix}muted-border-color: #{mix($slate-100, $slate-50)};
+
+  // Primary colors
+  #{$css-var-prefix}primary: theme-colors.get("primary", "light");
+  #{$css-var-prefix}primary-background: theme-colors.get("primary-background", "light");
+  #{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
+  #{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "light");
+  #{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "light");
+  #{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "light");
+  #{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
+  #{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
+  #{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "light");
+  #{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "light");
+
+  // Secondary colors
+  #{$css-var-prefix}secondary: #{$slate-550};
+  #{$css-var-prefix}secondary-background: #{$slate-600};
+  #{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
+  #{$css-var-prefix}secondary-underline: #{rgba($slate-550, 0.5)};
+  #{$css-var-prefix}secondary-hover: #{$slate-650};
+  #{$css-var-prefix}secondary-hover-background: #{$slate-650};
+  #{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
+  #{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
+  #{$css-var-prefix}secondary-focus: #{rgba($slate-550, 0.25)};
+  #{$css-var-prefix}secondary-inverse: #{$white};
+
+  // Contrast colors
+  #{$css-var-prefix}contrast: #{$slate-900};
+  #{$css-var-prefix}contrast-background: #{$slate-900};
+  #{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
+  #{$css-var-prefix}contrast-underline: #{rgba($slate-900, 0.5)};
+  #{$css-var-prefix}contrast-hover: #{$black};
+  #{$css-var-prefix}contrast-hover-background: #{$black};
+  #{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
+  #{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}secondary-hover);
+  #{$css-var-prefix}contrast-focus: #{rgba($slate-550, 0.25)};
+  #{$css-var-prefix}contrast-inverse: #{$white};
+
+  // Box shadow
+  #{$css-var-prefix}box-shadow: functions.shadow($slate-400);
+
+  // Typography
+  @if map.get($modules, "content/typography") {
+    // Headings colors
+    #{$css-var-prefix}h1-color: #{$zinc-800};
+    #{$css-var-prefix}h2-color: #{$zinc-750};
+    #{$css-var-prefix}h3-color: #{$zinc-700};
+    #{$css-var-prefix}h4-color: #{$zinc-650};
+    #{$css-var-prefix}h5-color: #{$zinc-600};
+    #{$css-var-prefix}h6-color: #{$zinc-550};
+
+    // Highlighted text (<mark>)
+    #{$css-var-prefix}mark-background-color: #{mix($amber-100, $amber-50)};
+    #{$css-var-prefix}mark-color: #{$zinc-950};
+
+    // Inserted (<ins>) & Deleted (<del>)
+    #{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-750)};
+    #{$css-var-prefix}del-color: #{mix($red-500, $zinc-750)};
+
+    // Blockquote
+    #{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Button
+  @if map.get($modules, "content/button") {
+    // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
+    // Don't use, 'none, 'false, 'null', '0', etc.
+    #{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    #{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+
+  // Table
+  @if map.get($modules, "content/table") {
+    #{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
+  }
+
+  // Code
+  @if map.get($modules, "content/code") {
+    #{$css-var-prefix}code-background-color: #{mix($slate-50, $white, 75%)};
+    #{$css-var-prefix}code-color: #{$zinc-550};
+    #{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
+  }
+
+  // Form elements
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}form-element-background-color: #{mix($slate-50, $white, 25%)};
+    #{$css-var-prefix}form-element-selected-background-color: #{$slate-100};
+    #{$css-var-prefix}form-element-border-color: #{$slate-150};
+    #{$css-var-prefix}form-element-color: #{$zinc-850};
+    #{$css-var-prefix}form-element-placeholder-color: var(#{$css-var-prefix}muted-color);
+    #{$css-var-prefix}form-element-active-background-color: #{$white};
+    #{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-disabled-opacity: 0.5;
+    #{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $zinc-350)};
+    #{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $zinc-350, 75%)};
+    #{$css-var-prefix}form-element-invalid-focus-color: var(
+      #{$css-var-prefix}form-element-invalid-active-border-color
+    );
+    #{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $zinc-350)};
+    #{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $zinc-350, 75%)};
+    #{$css-var-prefix}form-element-valid-focus-color: var(
+      #{$css-var-prefix}form-element-valid-active-border-color
+    );
+
+    // Focus for buttons, radio and select
+    input:is(
+        [type="submit"],
+        [type="button"],
+        [type="reset"],
+        [type="checkbox"],
+        [type="radio"],
+        [type="file"]
+      ) {
+      #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
+    }
+  }
+
+  // Switch (input[type="checkbox"][role="switch"])
+  @if map.get($modules, "forms/checkbox-radio-switch") {
+    #{$css-var-prefix}switch-background-color: #{$slate-200};
+    #{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
+    #{$css-var-prefix}switch-color: #{$white};
+    #{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "light");
+  }
+
+  // Range (input[type="range"])
+  @if map.get($modules, "forms/input-range") {
+    #{$css-var-prefix}range-border-color: #{$slate-100};
+    #{$css-var-prefix}range-active-border-color: #{$slate-200};
+    #{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
+    #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
+    #{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Accordion (<details>)
+  @if map.get($modules, "components/accordion") {
+    #{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
+    #{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Card (<article>)
+  @if map.get($modules, "components/card") {
+    #{$css-var-prefix}card-background-color: var(#{$css-var-prefix}background-color);
+    #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}card-sectioning-background-color: #{mix($slate-50, $white, 25%)};
+  }
+
+  // Dropdown (details.dropdown)
+  @if map.get($modules, "components/dropdown") and $enable-classes {
+    #{$css-var-prefix}dropdown-background-color: #{$white};
+    #{$css-var-prefix}dropdown-border-color: #{$slate-50};
+    #{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}dropdown-hover-background-color: #{$slate-50};
+  }
+
+  // Loading ([aria-busy=true])
+  @if map.get($modules, "components/loading") {
+    #{$css-var-prefix}loading-spinner-opacity: 0.5;
+  }
+
+  // Modal (<dialog>)
+  @if map.get($modules, "components/modal") {
+    #{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($zinc-100, $zinc-50), 0.75)};
+  }
+
+  // Progress
+  @if map.get($modules, "components/progress") {
+    #{$css-var-prefix}progress-background-color: #{$slate-100};
+    #{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Tooltip ([data-tooltip])
+  @if map.get($modules, "components/tooltip") {
+    #{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
+    #{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
+  }
+
+  // Form validation icons
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    #{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $zinc-350, 75%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+  }
+
+  // Document
+  color-scheme: light;
+}
diff --git a/public/stylesheets/pico/themes/default/_schemes.scss b/public/stylesheets/pico/themes/default/_schemes.scss
new file mode 100644
index 0000000..493cd39
--- /dev/null
+++ b/public/stylesheets/pico/themes/default/_schemes.scss
@@ -0,0 +1,39 @@
+@use "sass:map";
+@use "../../settings" as *;
+
+@use "light";
+@use "dark";
+
+@if map.get($modules, "themes/default") {
+  /**
+   * Color schemes
+   */
+
+  // Light color scheme (Default)
+  // Can be forced with data-theme="light"
+  [data-theme="light"],
+  :root:not([data-theme="dark"]) {
+    @include light.theme;
+  }
+
+  // Dark color scheme (Auto)
+  // Automatically enabled if user has Dark mode enabled
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme]) {
+      @include dark.theme;
+    }
+  }
+
+  // Dark color scheme (Forced)
+  // Enabled if forced with data-theme="dark"
+  [data-theme="dark"] {
+    @include dark.theme;
+  }
+
+  #{$parent-selector} progress,
+  #{$parent-selector} [type="checkbox"],
+  #{$parent-selector} [type="radio"],
+  #{$parent-selector} [type="range"] {
+    accent-color: var(#{$css-var-prefix}primary);
+  }
+}
diff --git a/public/stylesheets/pico/themes/default/_styles.scss b/public/stylesheets/pico/themes/default/_styles.scss
new file mode 100644
index 0000000..e2687e9
--- /dev/null
+++ b/public/stylesheets/pico/themes/default/_styles.scss
@@ -0,0 +1,433 @@
+@use "sass:map";
+@use "../../colors" as *;
+@use "../../settings" as *;
+@use "../../helpers/functions";
+@use "theme-colors";
+
+@if map.get($modules, "themes/default") {
+  /**
+   * Styles
+   */
+
+  :root {
+    // Typography
+    #{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+      "Noto Color Emoji";
+    #{$css-var-prefix}font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu,
+      Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif,
+      var(#{$css-var-prefix}font-family-emoji);
+    #{$css-var-prefix}font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
+      Consolas, "Liberation Mono", monospace, var(#{$css-var-prefix}font-family-emoji);
+    #{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-sans-serif);
+    #{$css-var-prefix}line-height: 1.5;
+    #{$css-var-prefix}font-weight: 400;
+    #{$css-var-prefix}font-size: 100%;
+    #{$css-var-prefix}text-underline-offset: 0.1rem;
+
+    // Responsive root font size
+    @if $enable-responsive-typography {
+      @each $key, $values in $breakpoints {
+        @if $values {
+          @media (min-width: map.get($values, "breakpoint")) {
+            #{$css-var-prefix}font-size: map.get($values, "root-font-size");
+          }
+        }
+      }
+    }
+
+    // Borders
+    #{$css-var-prefix}border-radius: 0.25rem;
+    #{$css-var-prefix}border-width: 0.0625rem;
+    #{$css-var-prefix}outline-width: 0.125rem;
+
+    // Transitions
+    #{$css-var-prefix}transition: 0.2s ease-in-out;
+
+    // Spacings
+    #{$css-var-prefix}spacing: 1rem;
+
+    // Spacings for typography elements
+    @if map.get($modules, "content/typography") {
+      #{$css-var-prefix}typography-spacing-vertical: 1rem;
+    }
+
+    // Spacings for body > header, body > main, body > footer, section, article
+    @if map.get($modules, "layout/landmarks") or
+      map.get($modules, "layout/section") or
+      map.get($modules, "components/card") or
+      map.get($modules, "components/modal")
+    {
+      #{$css-var-prefix}block-spacing-vertical: var(#{$css-var-prefix}spacing);
+      #{$css-var-prefix}block-spacing-horizontal: var(#{$css-var-prefix}spacing);
+    }
+
+    @if map.get($modules, "layout/grid") and $enable-classes {
+      #{$css-var-prefix}grid-column-gap: var(#{$css-var-prefix}spacing);
+      #{$css-var-prefix}grid-row-gap: var(#{$css-var-prefix}spacing);
+    }
+
+    // Spacings for form elements and button
+    @if map.get($modules, "content/button") or map.get($modules, "forms/basic") {
+      #{$css-var-prefix}form-element-spacing-vertical: 0.75rem;
+      #{$css-var-prefix}form-element-spacing-horizontal: 1rem;
+    }
+
+    // Font weight for form labels & fieldsets legend
+    @if map.get($modules, "forms/basic") {
+      #{$css-var-prefix}form-label-font-weight: var(#{$css-var-prefix}font-weight);
+    }
+
+    // Group (role="group")
+    @if map.get($modules, "components/group") {
+      #{$css-var-prefix}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+      #{$css-var-prefix}group-box-shadow-focus-with-button: 0
+        0
+        0
+        var(#{$css-var-prefix}outline-width)
+        var(#{$css-var-prefix}primary-focus);
+      #{$css-var-prefix}group-box-shadow-focus-with-input: 0
+        0
+        0
+        0.0625rem
+        var(#{$css-var-prefix}form-element-border-color);
+    }
+
+    // Modal (<dialog>)
+    @if map.get($modules, "components/modal") {
+      #{$css-var-prefix}modal-overlay-backdrop-filter: blur(0.375rem);
+    }
+
+    // Spacings for nav component
+    @if map.get($modules, "components/nav") {
+      #{$css-var-prefix}nav-element-spacing-vertical: 1rem;
+      #{$css-var-prefix}nav-element-spacing-horizontal: 0.5rem;
+      #{$css-var-prefix}nav-link-spacing-vertical: 0.5rem;
+      #{$css-var-prefix}nav-link-spacing-horizontal: 0.5rem;
+      #{$css-var-prefix}nav-breadcrumb-divider: ">";
+    }
+
+    // Checkboxes icons
+    @if map.get($modules, "forms/checkbox-radio-switch") {
+      #{$css-var-prefix}icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+      #{$css-var-prefix}icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+    }
+
+    // Chevron icons
+    @if map.get($modules, "forms/basics") or
+      map.get($modules, "components/accordion") or
+      map.get($modules, "components/dropdown")
+    {
+      #{$css-var-prefix}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    }
+
+    // Datetime icons
+    @if map.get($modules, "forms/input-date") {
+      #{$css-var-prefix}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+      #{$css-var-prefix}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+    }
+
+    // Search icon
+    @if map.get($modules, "forms/input-search") {
+      #{$css-var-prefix}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+    }
+
+    // Close icon
+    @if map.get($modules, "components/modal") {
+      #{$css-var-prefix}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+    }
+
+    // Loading icon (animated)
+    @if map.get($modules, "components/loading") {
+      // Inspired by https://codepen.io/aleksander351/pen/KzgKPo
+      #{$css-var-prefix}icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
+    }
+  }
+
+  // Responsives spacings
+  @if $enable-responsive-spacings {
+    // Landmarks and section
+    @if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") {
+      #{$semantic-root-element} > header,
+      #{$semantic-root-element} > main,
+      #{$semantic-root-element} > footer,
+      section {
+        @each $key, $values in $breakpoints {
+          @if $values {
+            @media (min-width: map.get($values, "breakpoint")) {
+              $multiplier: 1;
+              @if $key == "sm" {
+                $multiplier: 1.25;
+              } @else if $key == "md" {
+                $multiplier: 1.5;
+              } @else if $key == "lg" {
+                $multiplier: 1.75;
+              } @else if $key == "xl" {
+                $multiplier: 2;
+              } @else if $key == "xxl" {
+                $multiplier: 2.25;
+              }
+
+              #{$css-var-prefix}block-spacing-vertical: calc(
+                var(#{$css-var-prefix}spacing) * $multiplier
+              );
+            }
+          }
+        }
+      }
+    }
+
+    // Card (<article>)
+    @if map.get($modules, "components/card") {
+      article {
+        @each $key, $values in $breakpoints {
+          @if $values {
+            @media (min-width: map.get($values, "breakpoint")) {
+              $multiplier: 1;
+              @if $key == "sm" {
+                $multiplier: 1.25;
+              } @else if $key == "md" {
+                $multiplier: 1.5;
+              } @else if $key == "lg" {
+                $multiplier: 1.75;
+              } @else if $key == "xl" {
+                $multiplier: 2;
+              } @else if $key == "xxl" {
+                $multiplier: 2.25;
+              }
+
+              #{$css-var-prefix}block-spacing-vertical: calc(
+                var(#{$css-var-prefix}spacing) * $multiplier
+              );
+              #{$css-var-prefix}block-spacing-horizontal: calc(
+                var(#{$css-var-prefix}spacing) * $multiplier
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Link
+  @if map.get($modules, "content/link") {
+    a {
+      #{$css-var-prefix}text-decoration: underline;
+
+      // Secondary & Contrast
+      @if $enable-classes {
+        &.secondary,
+        &.contrast {
+          #{$css-var-prefix}text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  // Typography
+  @if map.get($modules, "content/typography") {
+    // Small
+    small {
+      #{$css-var-prefix}font-size: 0.875em;
+    }
+
+    // Headings
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      #{$css-var-prefix}font-weight: 700;
+    }
+
+    h1 {
+      #{$css-var-prefix}font-size: 2rem;
+      #{$css-var-prefix}line-height: 1.125;
+      #{$css-var-prefix}typography-spacing-top: 3rem;
+    }
+
+    h2 {
+      #{$css-var-prefix}font-size: 1.75rem;
+      #{$css-var-prefix}line-height: 1.15;
+      #{$css-var-prefix}typography-spacing-top: 2.625rem;
+    }
+
+    h3 {
+      #{$css-var-prefix}font-size: 1.5rem;
+      #{$css-var-prefix}line-height: 1.175;
+      #{$css-var-prefix}typography-spacing-top: 2.25rem;
+    }
+
+    h4 {
+      #{$css-var-prefix}font-size: 1.25rem;
+      #{$css-var-prefix}line-height: 1.2;
+      #{$css-var-prefix}typography-spacing-top: 1.874rem;
+    }
+
+    h5 {
+      #{$css-var-prefix}font-size: 1.125rem;
+      #{$css-var-prefix}line-height: 1.225;
+      #{$css-var-prefix}typography-spacing-top: 1.6875rem;
+    }
+
+    h6 {
+      #{$css-var-prefix}font-size: 1rem;
+      #{$css-var-prefix}line-height: 1.25;
+      #{$css-var-prefix}typography-spacing-top: 1.5rem;
+    }
+  }
+
+  // Table
+  @if map.get($modules, "content/table") {
+    thead,
+    tfoot {
+      th,
+      td {
+        #{$css-var-prefix}font-weight: 600;
+        #{$css-var-prefix}border-width: 0.1875rem;
+      }
+    }
+  }
+
+  // Code
+  @if map.get($modules, "content/code") {
+    pre,
+    code,
+    kbd,
+    samp {
+      #{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-monospace);
+    }
+
+    kbd {
+      #{$css-var-prefix}font-weight: bolder;
+    }
+  }
+
+  // Inputs and Selects
+  input:not(
+      [type="submit"],
+      [type="button"],
+      [type="reset"],
+      [type="checkbox"],
+      [type="radio"],
+      [type="file"]
+    ),
+  :where(select, textarea) {
+    #{$css-var-prefix}outline-width: 0.0625rem;
+  }
+
+  [type="search"] {
+    #{$css-var-prefix}border-radius: 5rem;
+  }
+
+  // Checkboxes, Radios and Switches
+  @if map.get($modules, "forms/checkbox-radio-switch") {
+    [type="checkbox"],
+    [type="radio"] {
+      #{$css-var-prefix}border-width: 0.125rem;
+    }
+
+    [type="checkbox"][role="switch"] {
+      #{$css-var-prefix}border-width: 0.1875rem;
+    }
+  }
+
+  // Dropdown (details.dropdown)
+  @if map.get($modules, "components/dropdown") and $enable-classes {
+    details.dropdown {
+      summary:not([role="button"]) {
+        #{$css-var-prefix}outline-width: 0.0625rem;
+      }
+    }
+    nav {
+      details.dropdown {
+        summary:focus-visible {
+          #{$css-var-prefix}outline-width: 0.125rem;
+        }
+      }
+    }
+  }
+
+  // Group (role="group")
+  @if map.get($modules, "components/group") {
+    [role="search"] {
+      #{$css-var-prefix}border-radius: 5rem;
+    }
+
+    [role="search"],
+    [role="group"] {
+      @if $enable-classes {
+        &:has(
+            button.secondary:focus,
+            [type="submit"].secondary:focus,
+            [type="button"].secondary:focus,
+            [role="button"].secondary:focus
+          ) {
+          #{$css-var-prefix}group-box-shadow-focus-with-button: 0
+            0
+            0
+            var(#{$css-var-prefix}outline-width)
+            var(#{$css-var-prefix}secondary-focus);
+        }
+
+        &:has(
+            button.contrast:focus,
+            [type="submit"].contrast:focus,
+            [type="button"].contrast:focus,
+            [role="button"].contrast:focus
+          ) {
+          #{$css-var-prefix}group-box-shadow-focus-with-button: 0
+            0
+            0
+            var(#{$css-var-prefix}outline-width)
+            var(#{$css-var-prefix}contrast-focus);
+        }
+      }
+
+      button,
+      [type="submit"],
+      [type="button"],
+      [role="button"] {
+        #{$css-var-prefix}form-element-spacing-horizontal: 2rem;
+      }
+    }
+  }
+
+  // Chevron icons
+  // Change the icon color to white for accordion and dropdown buttons
+  @if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
+    #{$parent-selector} details {
+      summary {
+        $selector: '&[role="button"]';
+        @if $enable-classes {
+          $selector: "#{$selector}:not(.outline)";
+        }
+        #{$selector} {
+          &::after {
+            filter: brightness(0) invert(1);
+          }
+        }
+      }
+    }
+  }
+
+  // Loading icon (animated)
+  @if map.get($modules, "components/loading") {
+    // Change the icon color to white for buttons
+    #{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
+      $selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
+      @if $enable-classes {
+        $selector: "#{$selector}:not(.outline)";
+      }
+      #{$selector} {
+        &::before {
+          @if theme-colors.get("primary-inverse", "dark") == $white {
+            filter: brightness(0) invert(1);
+          } @else {
+            filter: brightness(0) invert(0);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/public/stylesheets/pico/themes/default/_theme-colors.scss b/public/stylesheets/pico/themes/default/_theme-colors.scss
new file mode 100644
index 0000000..015d5be
--- /dev/null
+++ b/public/stylesheets/pico/themes/default/_theme-colors.scss
@@ -0,0 +1,490 @@
+@use "sass:map";
+@use "../../colors" as *;
+@use "../../settings" as *;
+
+$color-mappings: (
+  "amber": (
+    "dark": (
+      "text-selection-color": rgba($amber-350, 0.1875),
+      "primary": $amber-350,
+      "primary-background": $amber-200,
+      "primary-underline": rgba($amber-350, 0.5),
+      "primary-hover": $amber-250,
+      "primary-hover-background": $amber-150,
+      "primary-focus": rgba($amber-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($amber-400, 0.25),
+      "primary": $amber-550,
+      "primary-background": $amber-200,
+      "primary-underline": rgba($amber-550, 0.5),
+      "primary-hover": $amber-650,
+      "primary-hover-background": $amber-250,
+      "primary-focus": rgba($amber-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "azure": (
+    "dark": (
+      "text-selection-color": rgba($azure-350, 0.1875),
+      "primary": $azure-350,
+      "primary-background": $azure-550,
+      "primary-underline": rgba($azure-350, 0.5),
+      "primary-hover": $azure-250,
+      "primary-hover-background": $azure-500,
+      "primary-focus": rgba($azure-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($azure-400, 0.25),
+      "primary": $azure-550,
+      "primary-background": $azure-550,
+      "primary-underline": rgba($azure-550, 0.5),
+      "primary-hover": $azure-650,
+      "primary-hover-background": $azure-600,
+      "primary-focus": rgba($azure-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "blue": (
+    "dark": (
+      "text-selection-color": rgba($blue-350, 0.1875),
+      "primary": $blue-350,
+      "primary-background": $blue-550,
+      "primary-underline": rgba($blue-350, 0.5),
+      "primary-hover": $blue-250,
+      "primary-hover-background": $blue-500,
+      "primary-focus": rgba($blue-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($blue-400, 0.25),
+      "primary": $blue-550,
+      "primary-background": $blue-550,
+      "primary-underline": rgba($blue-550, 0.5),
+      "primary-hover": $blue-650,
+      "primary-hover-background": $blue-600,
+      "primary-focus": rgba($blue-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "cyan": (
+    "dark": (
+      "text-selection-color": rgba($cyan-350, 0.1875),
+      "primary": $cyan-350,
+      "primary-background": $cyan-550,
+      "primary-underline": rgba($cyan-350, 0.5),
+      "primary-hover": $cyan-250,
+      "primary-hover-background": $cyan-500,
+      "primary-focus": rgba($cyan-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($cyan-400, 0.25),
+      "primary": $cyan-550,
+      "primary-background": $cyan-550,
+      "primary-underline": rgba($cyan-550, 0.5),
+      "primary-hover": $cyan-650,
+      "primary-hover-background": $cyan-600,
+      "primary-focus": rgba($cyan-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "fuchsia": (
+    "dark": (
+      "text-selection-color": rgba($fuchsia-350, 0.1875),
+      "primary": $fuchsia-350,
+      "primary-background": $fuchsia-550,
+      "primary-underline": rgba($fuchsia-350, 0.5),
+      "primary-hover": $fuchsia-250,
+      "primary-hover-background": $fuchsia-500,
+      "primary-focus": rgba($fuchsia-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($fuchsia-400, 0.25),
+      "primary": $fuchsia-550,
+      "primary-background": $fuchsia-550,
+      "primary-underline": rgba($fuchsia-550, 0.5),
+      "primary-hover": $fuchsia-650,
+      "primary-hover-background": $fuchsia-600,
+      "primary-focus": rgba($fuchsia-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "green": (
+    "dark": (
+      "text-selection-color": rgba($green-350, 0.1875),
+      "primary": $green-350,
+      "primary-background": $green-500,
+      "primary-underline": rgba($green-350, 0.5),
+      "primary-hover": $green-250,
+      "primary-hover-background": $green-450,
+      "primary-focus": rgba($green-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($green-400, 0.25),
+      "primary": $green-550,
+      "primary-background": $green-500,
+      "primary-underline": rgba($green-550, 0.5),
+      "primary-hover": $green-650,
+      "primary-hover-background": $green-550,
+      "primary-focus": rgba($green-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "grey": (
+    "dark": (
+      "text-selection-color": rgba($grey-350, 0.1875),
+      "primary": $grey-350,
+      "primary-background": $grey-300,
+      "primary-underline": rgba($grey-350, 0.5),
+      "primary-hover": $grey-250,
+      "primary-hover-background": $grey-250,
+      "primary-focus": rgba($grey-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($grey-400, 0.25),
+      "primary": $grey-550,
+      "primary-background": $grey-300,
+      "primary-underline": rgba($grey-550, 0.5),
+      "primary-hover": $grey-650,
+      "primary-hover-background": $grey-350,
+      "primary-focus": rgba($grey-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "indigo": (
+    "dark": (
+      "text-selection-color": rgba($indigo-350, 0.1875),
+      "primary": $indigo-350,
+      "primary-background": $indigo-600,
+      "primary-underline": rgba($indigo-350, 0.5),
+      "primary-hover": $indigo-250,
+      "primary-hover-background": $indigo-550,
+      "primary-focus": rgba($indigo-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($indigo-400, 0.25),
+      "primary": $indigo-550,
+      "primary-background": $indigo-600,
+      "primary-underline": rgba($indigo-550, 0.5),
+      "primary-hover": $indigo-650,
+      "primary-hover-background": $indigo-650,
+      "primary-focus": rgba($indigo-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "jade": (
+    "dark": (
+      "text-selection-color": rgba($jade-350, 0.1875),
+      "primary": $jade-350,
+      "primary-background": $jade-550,
+      "primary-underline": rgba($jade-350, 0.5),
+      "primary-hover": $jade-250,
+      "primary-hover-background": $jade-500,
+      "primary-focus": rgba($jade-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($jade-400, 0.25),
+      "primary": $jade-550,
+      "primary-background": $jade-550,
+      "primary-underline": rgba($jade-550, 0.5),
+      "primary-hover": $jade-650,
+      "primary-hover-background": $jade-600,
+      "primary-focus": rgba($jade-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "lime": (
+    "dark": (
+      "text-selection-color": rgba($lime-350, 0.1875),
+      "primary": $lime-350,
+      "primary-background": $lime-200,
+      "primary-underline": rgba($lime-350, 0.5),
+      "primary-hover": $lime-250,
+      "primary-hover-background": $lime-150,
+      "primary-focus": rgba($lime-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($lime-400, 0.25),
+      "primary": $lime-550,
+      "primary-background": $lime-200,
+      "primary-underline": rgba($lime-550, 0.5),
+      "primary-hover": $lime-650,
+      "primary-hover-background": $lime-250,
+      "primary-focus": rgba($lime-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "orange": (
+    "dark": (
+      "text-selection-color": rgba($orange-350, 0.1875),
+      "primary": $orange-350,
+      "primary-background": $orange-500,
+      "primary-underline": rgba($orange-350, 0.5),
+      "primary-hover": $orange-250,
+      "primary-hover-background": $orange-450,
+      "primary-focus": rgba($orange-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($orange-400, 0.25),
+      "primary": $orange-550,
+      "primary-background": $orange-500,
+      "primary-underline": rgba($orange-550, 0.5),
+      "primary-hover": $orange-650,
+      "primary-hover-background": $orange-550,
+      "primary-focus": rgba($orange-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "pink": (
+    "dark": (
+      "text-selection-color": rgba($pink-350, 0.1875),
+      "primary": $pink-350,
+      "primary-background": $pink-500,
+      "primary-underline": rgba($pink-350, 0.5),
+      "primary-hover": $pink-250,
+      "primary-hover-background": $pink-450,
+      "primary-focus": rgba($pink-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($pink-400, 0.25),
+      "primary": $pink-550,
+      "primary-background": $pink-500,
+      "primary-underline": rgba($pink-550, 0.5),
+      "primary-hover": $pink-650,
+      "primary-hover-background": $pink-550,
+      "primary-focus": rgba($pink-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "pumpkin": (
+    "dark": (
+      "text-selection-color": rgba($pumpkin-350, 0.1875),
+      "primary": $pumpkin-350,
+      "primary-background": $pumpkin-300,
+      "primary-underline": rgba($pumpkin-350, 0.5),
+      "primary-hover": $pumpkin-250,
+      "primary-hover-background": $pumpkin-250,
+      "primary-focus": rgba($pumpkin-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($pumpkin-400, 0.25),
+      "primary": $pumpkin-550,
+      "primary-background": $pumpkin-300,
+      "primary-underline": rgba($pumpkin-550, 0.5),
+      "primary-hover": $pumpkin-650,
+      "primary-hover-background": $pumpkin-350,
+      "primary-focus": rgba($pumpkin-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "purple": (
+    "dark": (
+      "text-selection-color": rgba($purple-350, 0.1875),
+      "primary": $purple-350,
+      "primary-background": $purple-600,
+      "primary-underline": rgba($purple-350, 0.5),
+      "primary-hover": $purple-250,
+      "primary-hover-background": $purple-550,
+      "primary-focus": rgba($purple-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($purple-400, 0.25),
+      "primary": $purple-550,
+      "primary-background": $purple-600,
+      "primary-underline": rgba($purple-550, 0.5),
+      "primary-hover": $purple-650,
+      "primary-hover-background": $purple-650,
+      "primary-focus": rgba($purple-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "red": (
+    "dark": (
+      "text-selection-color": rgba($red-350, 0.1875),
+      "primary": $red-350,
+      "primary-background": $red-550,
+      "primary-underline": rgba($red-350, 0.5),
+      "primary-hover": $red-250,
+      "primary-hover-background": $red-500,
+      "primary-focus": rgba($red-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($red-400, 0.25),
+      "primary": $red-550,
+      "primary-background": $red-550,
+      "primary-underline": rgba($red-550, 0.5),
+      "primary-hover": $red-650,
+      "primary-hover-background": $red-600,
+      "primary-focus": rgba($red-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "sand": (
+    "dark": (
+      "text-selection-color": rgba($sand-350, 0.1875),
+      "primary": $sand-350,
+      "primary-background": $sand-200,
+      "primary-underline": rgba($sand-350, 0.5),
+      "primary-hover": $sand-250,
+      "primary-hover-background": $sand-150,
+      "primary-focus": rgba($sand-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($sand-400, 0.25),
+      "primary": $sand-550,
+      "primary-background": $sand-200,
+      "primary-underline": rgba($sand-550, 0.5),
+      "primary-hover": $sand-650,
+      "primary-hover-background": $sand-250,
+      "primary-focus": rgba($sand-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "slate": (
+    "dark": (
+      "text-selection-color": rgba($slate-350, 0.1875),
+      "primary": $slate-350,
+      "primary-background": $slate-600,
+      "primary-underline": rgba($slate-350, 0.5),
+      "primary-hover": $slate-250,
+      "primary-hover-background": $slate-550,
+      "primary-focus": rgba($slate-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($slate-400, 0.25),
+      "primary": $slate-550,
+      "primary-background": $slate-600,
+      "primary-underline": rgba($slate-550, 0.5),
+      "primary-hover": $slate-650,
+      "primary-hover-background": $slate-650,
+      "primary-focus": rgba($slate-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "violet": (
+    "dark": (
+      "text-selection-color": rgba($violet-350, 0.1875),
+      "primary": $violet-350,
+      "primary-background": $violet-600,
+      "primary-underline": rgba($violet-350, 0.5),
+      "primary-hover": $violet-250,
+      "primary-hover-background": $violet-550,
+      "primary-focus": rgba($violet-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($violet-400, 0.25),
+      "primary": $violet-550,
+      "primary-background": $violet-600,
+      "primary-underline": rgba($violet-550, 0.5),
+      "primary-hover": $violet-650,
+      "primary-hover-background": $violet-650,
+      "primary-focus": rgba($violet-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "yellow": (
+    "dark": (
+      "text-selection-color": rgba($yellow-350, 0.1875),
+      "primary": $yellow-350,
+      "primary-background": $yellow-100,
+      "primary-underline": rgba($yellow-350, 0.5),
+      "primary-hover": $yellow-250,
+      "primary-hover-background": mix($yellow-100, $yellow-50),
+      "primary-focus": rgba($yellow-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($yellow-400, 0.25),
+      "primary": $yellow-550,
+      "primary-background": $yellow-100,
+      "primary-underline": rgba($yellow-550, 0.5),
+      "primary-hover": $yellow-650,
+      "primary-hover-background": $yellow-150,
+      "primary-focus": rgba($yellow-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "zinc": (
+    "dark": (
+      "text-selection-color": rgba($zinc-350, 0.1875),
+      "primary": $zinc-350,
+      "primary-background": $zinc-550,
+      "primary-underline": rgba($zinc-350, 0.5),
+      "primary-hover": $zinc-250,
+      "primary-hover-background": $zinc-500,
+      "primary-focus": rgba($zinc-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($zinc-400, 0.25),
+      "primary": $zinc-550,
+      "primary-background": $zinc-550,
+      "primary-underline": rgba($zinc-550, 0.5),
+      "primary-hover": $zinc-650,
+      "primary-hover-background": $zinc-600,
+      "primary-focus": rgba($zinc-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+);
+
+@function get($key, $mode: "light") {
+  @return map.get(map.get(map.get($color-mappings, $theme-color), $mode), $key);
+}
diff --git a/public/stylesheets/pico/utilities/_accessibility.scss b/public/stylesheets/pico/utilities/_accessibility.scss
new file mode 100644
index 0000000..4aa2fbc
--- /dev/null
+++ b/public/stylesheets/pico/utilities/_accessibility.scss
@@ -0,0 +1,57 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "utilities/accessibility") {
+  /**
+   * Accessibility & User interaction
+   */
+
+  // Based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // Accessibility
+
+  // Change the cursor on control elements in all browsers (opinionated)
+  #{$parent-selector} [aria-controls] {
+    cursor: pointer;
+  }
+
+  // Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
+  #{$parent-selector} [aria-disabled="true"],
+  #{$parent-selector} [disabled] {
+    cursor: not-allowed;
+  }
+
+  // Change the display on visually hidden accessible elements in all browsers (opinionated)
+  #{$parent-selector} [aria-hidden="false"][hidden] {
+    display: initial;
+  }
+
+  #{$parent-selector} [aria-hidden="false"][hidden]:not(:focus) {
+    clip: rect(0, 0, 0, 0);
+    position: absolute;
+  }
+
+  // User interaction
+  // Remove the tapping delay in IE 10
+  #{$parent-selector} a,
+  #{$parent-selector} area,
+  #{$parent-selector} button,
+  #{$parent-selector} input,
+  #{$parent-selector} label,
+  #{$parent-selector} select,
+  #{$parent-selector} summary,
+  #{$parent-selector} textarea,
+  #{$parent-selector} [tabindex] {
+    -ms-touch-action: manipulation;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  #{$parent-selector} [dir="rtl"] {
+    direction: rtl;
+  }
+}
diff --git a/public/stylesheets/pico/utilities/_reduce-motion.scss b/public/stylesheets/pico/utilities/_reduce-motion.scss
new file mode 100644
index 0000000..89a36a0
--- /dev/null
+++ b/public/stylesheets/pico/utilities/_reduce-motion.scss
@@ -0,0 +1,30 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "utilities/reduce-motion") and enable-transitions and enable-important {
+  /**
+   * Reduce Motion Features
+   */
+
+  // Based on :
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Remove animations when motion is reduced (opinionated)
+  // 2. Remove fixed background attachments when motion is reduced (opinionated)
+  // 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
+  // 4. Remove transitions when motion is reduced (opinionated)
+  @media (prefers-reduced-motion: reduce) {
+    #{$parent-selector} *:not([aria-busy="true"]),
+    #{$parent-selector} :not([aria-busy="true"])::before,
+    #{$parent-selector} :not([aria-busy="true"])::after {
+      background-attachment: initial !important; // 2
+      animation-duration: 1ms !important; // 1
+      animation-delay: -1ms !important; // 1
+      animation-iteration-count: 1 !important; // 1
+      scroll-behavior: auto !important; // 3
+      transition-delay: 0s !important; // 4
+      transition-duration: 0s !important; // 4
+    }
+  }
+}
diff --git a/public/stylesheets/tallytome.css b/public/stylesheets/tallytome.css
new file mode 100644
index 0000000..2a40e1a
--- /dev/null
+++ b/public/stylesheets/tallytome.css
@@ -0,0 +1,1998 @@
+@charset "UTF-8";
+/*!
+ * Pico CSS ✨ v2.0.6 (https://picocss.com)
+ * Copyright 2019-2024 - Licensed under MIT
+ */
+/**
+ * Document
+ * Content-box & Responsive typography
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+::before,
+::after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:where(:root) {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  background-color: var(--pico-background-color);
+  color: var(--pico-color);
+  font-weight: var(--pico-font-weight);
+  font-size: var(--pico-font-size);
+  line-height: var(--pico-line-height);
+  font-family: var(--pico-font-family);
+  text-underline-offset: var(--pico-text-underline-offset);
+  text-rendering: optimizeLegibility;
+  overflow-wrap: break-word;
+  tab-size: 4;
+}
+
+/**
+ * Landmarks
+ */
+body {
+  width: 100%;
+  margin: 0;
+}
+
+main {
+  display: block;
+}
+
+body > header,
+body > main,
+body > footer {
+  padding-block: var(--pico-block-spacing-vertical);
+}
+
+/**
+ * Section
+ */
+section {
+  margin-bottom: var(--pico-block-spacing-vertical);
+}
+
+/**
+ * Container
+ */
+.container,
+.container-fluid {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: var(--pico-spacing);
+  padding-left: var(--pico-spacing);
+}
+
+@media (min-width: 576px) {
+  .container {
+    max-width: 510px;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: 700px;
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: 950px;
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1200px;
+  }
+}
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1450px;
+  }
+}
+
+/**
+ * Grid
+ * Minimal grid system with auto-layout columns
+ */
+.grid {
+  grid-column-gap: var(--pico-grid-column-gap);
+  grid-row-gap: var(--pico-grid-row-gap);
+  display: grid;
+  grid-template-columns: 1fr;
+}
+@media (min-width: 768px) {
+  .grid {
+    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+  }
+}
+.grid > * {
+  min-width: 0;
+}
+
+/**
+ * Typography
+ */
+b,
+strong {
+  font-weight: bolder;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+address,
+blockquote,
+dl,
+ol,
+p,
+pre,
+table,
+ul {
+  margin-top: 0;
+  margin-bottom: var(--pico-typography-spacing-vertical);
+  color: var(--pico-color);
+  font-style: normal;
+  font-weight: var(--pico-font-weight);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: var(--pico-typography-spacing-vertical);
+  color: var(--pico-color);
+  font-weight: var(--pico-font-weight);
+  font-size: var(--pico-font-size);
+  line-height: var(--pico-line-height);
+  font-family: var(--pico-font-family);
+}
+
+h1 {
+  --pico-color: var(--pico-h1-color);
+}
+
+h2 {
+  --pico-color: var(--pico-h2-color);
+}
+
+h3 {
+  --pico-color: var(--pico-h3-color);
+}
+
+h4 {
+  --pico-color: var(--pico-h4-color);
+}
+
+h5 {
+  --pico-color: var(--pico-h5-color);
+}
+
+h6 {
+  --pico-color: var(--pico-h6-color);
+}
+
+:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
+  margin-top: var(--pico-typography-spacing-top);
+}
+
+p {
+  margin-bottom: var(--pico-typography-spacing-vertical);
+}
+
+hgroup {
+  margin-bottom: var(--pico-typography-spacing-vertical);
+}
+hgroup > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+hgroup > *:not(:first-child):last-child {
+  --pico-color: var(--pico-muted-color);
+  --pico-font-weight: unset;
+  font-size: 1rem;
+}
+
+:where(ol, ul) li {
+  margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25);
+}
+
+:where(dl, ol, ul) :where(dl, ol, ul) {
+  margin: 0;
+  margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25);
+}
+
+ul li {
+  list-style: square;
+}
+
+mark {
+  padding: 0.125rem 0.25rem;
+  background-color: var(--pico-mark-background-color);
+  color: var(--pico-mark-color);
+  vertical-align: baseline;
+}
+
+blockquote {
+  display: block;
+  margin: var(--pico-typography-spacing-vertical) 0;
+  padding: var(--pico-spacing);
+  border-right: none;
+  border-left: 0.25rem solid var(--pico-blockquote-border-color);
+  border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
+  border-inline-end: none;
+}
+blockquote footer {
+  margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5);
+  color: var(--pico-blockquote-footer-color);
+}
+
+abbr[title] {
+  border-bottom: 1px dotted;
+  text-decoration: none;
+  cursor: help;
+}
+
+ins {
+  color: var(--pico-ins-color);
+  text-decoration: none;
+}
+
+del {
+  color: var(--pico-del-color);
+}
+
+::selection {
+  background-color: var(--pico-text-selection-color);
+}
+
+/**
+ * Link
+ */
+:where(a:not([role=button])),
+[role=link] {
+  --pico-color: var(--pico-primary);
+  --pico-background-color: transparent;
+  --pico-underline: var(--pico-primary-underline);
+  outline: none;
+  background-color: var(--pico-background-color);
+  color: var(--pico-color);
+  text-decoration: var(--pico-text-decoration);
+  text-decoration-color: var(--pico-underline);
+  text-underline-offset: 0.125em;
+  transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
+}
+:where(a:not([role=button])):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
+[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
+  --pico-color: var(--pico-primary-hover);
+  --pico-underline: var(--pico-primary-hover-underline);
+  --pico-text-decoration: underline;
+}
+:where(a:not([role=button])):focus-visible,
+[role=link]:focus-visible {
+  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+}
+:where(a:not([role=button])).secondary,
+[role=link].secondary {
+  --pico-color: var(--pico-secondary);
+  --pico-underline: var(--pico-secondary-underline);
+}
+:where(a:not([role=button])).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
+[role=link].secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
+  --pico-color: var(--pico-secondary-hover);
+  --pico-underline: var(--pico-secondary-hover-underline);
+}
+:where(a:not([role=button])).contrast,
+[role=link].contrast {
+  --pico-color: var(--pico-contrast);
+  --pico-underline: var(--pico-contrast-underline);
+}
+:where(a:not([role=button])).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
+[role=link].contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
+  --pico-color: var(--pico-contrast-hover);
+  --pico-underline: var(--pico-contrast-hover-underline);
+}
+
+a[role=button] {
+  display: inline-block;
+}
+
+/**
+ * Button
+ */
+button {
+  margin: 0;
+  overflow: visible;
+  font-family: inherit;
+  text-transform: none;
+}
+
+button,
+[type=submit],
+[type=reset],
+[type=button] {
+  -webkit-appearance: button;
+}
+
+button,
+[type=submit],
+[type=reset],
+[type=button],
+[type=file]::file-selector-button,
+[role=button] {
+  --pico-background-color: var(--pico-primary-background);
+  --pico-border-color: var(--pico-primary-border);
+  --pico-color: var(--pico-primary-inverse);
+  --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+  outline: none;
+  background-color: var(--pico-background-color);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-color);
+  font-weight: var(--pico-font-weight);
+  font-size: 1rem;
+  line-height: var(--pico-line-height);
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
+}
+button:is([aria-current]:not([aria-current=false])), button:is(:hover, :active, :focus),
+[type=submit]:is([aria-current]:not([aria-current=false])),
+[type=submit]:is(:hover, :active, :focus),
+[type=reset]:is([aria-current]:not([aria-current=false])),
+[type=reset]:is(:hover, :active, :focus),
+[type=button]:is([aria-current]:not([aria-current=false])),
+[type=button]:is(:hover, :active, :focus),
+[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),
+[type=file]::file-selector-button:is(:hover, :active, :focus),
+[role=button]:is([aria-current]:not([aria-current=false])),
+[role=button]:is(:hover, :active, :focus) {
+  --pico-background-color: var(--pico-primary-hover-background);
+  --pico-border-color: var(--pico-primary-hover-border);
+  --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+  --pico-color: var(--pico-primary-inverse);
+}
+button:focus, button:is([aria-current]:not([aria-current=false])):focus,
+[type=submit]:focus,
+[type=submit]:is([aria-current]:not([aria-current=false])):focus,
+[type=reset]:focus,
+[type=reset]:is([aria-current]:not([aria-current=false])):focus,
+[type=button]:focus,
+[type=button]:is([aria-current]:not([aria-current=false])):focus,
+[type=file]::file-selector-button:focus,
+[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,
+[role=button]:focus,
+[role=button]:is([aria-current]:not([aria-current=false])):focus {
+  --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+}
+
+[type=submit],
+[type=reset],
+[type=button] {
+  margin-bottom: var(--pico-spacing);
+}
+
+:is(button, [type=submit], [type=button], [role=button]).secondary,
+[type=reset],
+[type=file]::file-selector-button {
+  --pico-background-color: var(--pico-secondary-background);
+  --pico-border-color: var(--pico-secondary-border);
+  --pico-color: var(--pico-secondary-inverse);
+  cursor: pointer;
+}
+:is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
+[type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
+[type=file]::file-selector-button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
+  --pico-background-color: var(--pico-secondary-hover-background);
+  --pico-border-color: var(--pico-secondary-hover-border);
+  --pico-color: var(--pico-secondary-inverse);
+}
+:is(button, [type=submit], [type=button], [role=button]).secondary:focus, :is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current]:not([aria-current=false])):focus,
+[type=reset]:focus,
+[type=reset]:is([aria-current]:not([aria-current=false])):focus,
+[type=file]::file-selector-button:focus,
+[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus {
+  --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
+}
+
+:is(button, [type=submit], [type=button], [role=button]).contrast {
+  --pico-background-color: var(--pico-contrast-background);
+  --pico-border-color: var(--pico-contrast-border);
+  --pico-color: var(--pico-contrast-inverse);
+}
+:is(button, [type=submit], [type=button], [role=button]).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
+  --pico-background-color: var(--pico-contrast-hover-background);
+  --pico-border-color: var(--pico-contrast-hover-border);
+  --pico-color: var(--pico-contrast-inverse);
+}
+:is(button, [type=submit], [type=button], [role=button]).contrast:focus, :is(button, [type=submit], [type=button], [role=button]).contrast:is([aria-current]:not([aria-current=false])):focus {
+  --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
+}
+
+:is(button, [type=submit], [type=button], [role=button]).outline,
+[type=reset].outline {
+  --pico-background-color: transparent;
+  --pico-color: var(--pico-primary);
+  --pico-border-color: var(--pico-primary);
+}
+:is(button, [type=submit], [type=button], [role=button]).outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
+[type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
+  --pico-background-color: transparent;
+  --pico-color: var(--pico-primary-hover);
+  --pico-border-color: var(--pico-primary-hover);
+}
+
+:is(button, [type=submit], [type=button], [role=button]).outline.secondary,
+[type=reset].outline {
+  --pico-color: var(--pico-secondary);
+  --pico-border-color: var(--pico-secondary);
+}
+:is(button, [type=submit], [type=button], [role=button]).outline.secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
+[type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
+  --pico-color: var(--pico-secondary-hover);
+  --pico-border-color: var(--pico-secondary-hover);
+}
+
+:is(button, [type=submit], [type=button], [role=button]).outline.contrast {
+  --pico-color: var(--pico-contrast);
+  --pico-border-color: var(--pico-contrast);
+}
+:is(button, [type=submit], [type=button], [role=button]).outline.contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
+  --pico-color: var(--pico-contrast-hover);
+  --pico-border-color: var(--pico-contrast-hover);
+}
+
+:where(button, [type=submit], [type=reset], [type=button], [role=button])[disabled],
+:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/**
+ * Embedded content
+ */
+:where(audio, canvas, iframe, img, svg, video) {
+  vertical-align: middle;
+}
+
+audio,
+video {
+  display: inline-block;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+:where(iframe) {
+  border-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border-style: none;
+}
+
+:where(svg:not([fill])) {
+  fill: currentColor;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/**
+ * Miscs
+ */
+hr {
+  height: 0;
+  margin: var(--pico-typography-spacing-vertical) 0;
+  border: 0;
+  border-top: 1px solid var(--pico-muted-border-color);
+  color: inherit;
+}
+
+[hidden],
+template {
+  display: none !important;
+}
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Basics form elements
+ */
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-size: 1rem;
+  line-height: var(--pico-line-height);
+  font-family: inherit;
+  letter-spacing: inherit;
+}
+
+input {
+  overflow: visible;
+}
+
+select {
+  text-transform: none;
+}
+
+legend {
+  max-width: 100%;
+  padding: 0;
+  color: inherit;
+  white-space: normal;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type=checkbox],
+[type=radio] {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+:-moz-focusring {
+  outline: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+::-ms-expand {
+  display: none;
+}
+
+[type=file],
+[type=range] {
+  padding: 0;
+  border-width: 0;
+}
+
+input:not([type=checkbox], [type=radio], [type=range]) {
+  height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
+}
+
+fieldset {
+  width: 100%;
+  margin: 0;
+  margin-bottom: var(--pico-spacing);
+  padding: 0;
+  border: 0;
+}
+
+label,
+fieldset legend {
+  display: block;
+  margin-bottom: calc(var(--pico-spacing) * 0.375);
+  color: var(--pico-color);
+  font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
+}
+
+fieldset legend {
+  margin-bottom: calc(var(--pico-spacing) * 0.5);
+}
+
+input:not([type=checkbox], [type=radio]),
+button[type=submit],
+select,
+textarea {
+  width: 100%;
+}
+
+input:not([type=checkbox], [type=radio], [type=range], [type=file]),
+select,
+textarea {
+  appearance: none;
+  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+}
+
+input,
+select,
+textarea {
+  --pico-background-color: var(--pico-form-element-background-color);
+  --pico-border-color: var(--pico-form-element-border-color);
+  --pico-color: var(--pico-form-element-color);
+  --pico-box-shadow: none;
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+  outline: none;
+  background-color: var(--pico-background-color);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-color);
+  font-weight: var(--pico-font-weight);
+  transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
+}
+
+input:not([type=submit],
+[type=button],
+[type=reset],
+[type=checkbox],
+[type=radio],
+[readonly]):is(:active, :focus),
+:where(select, textarea):not([readonly]):is(:active, :focus) {
+  --pico-background-color: var(--pico-form-element-active-background-color);
+}
+
+input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
+:where(select, textarea):not([readonly]):is(:active, :focus) {
+  --pico-border-color: var(--pico-form-element-active-border-color);
+}
+
+input:not([type=submit],
+[type=button],
+[type=reset],
+[type=range],
+[type=file],
+[readonly]):focus,
+:where(select, textarea):not([readonly]):focus {
+  --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
+}
+
+input:not([type=submit], [type=button], [type=reset])[disabled],
+select[disabled],
+textarea[disabled],
+label[aria-disabled=true],
+:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
+  opacity: var(--pico-form-element-disabled-opacity);
+  pointer-events: none;
+}
+
+label[aria-disabled=true] input[disabled] {
+  opacity: 1;
+}
+
+:where(input, select, textarea):not([type=checkbox],
+[type=radio],
+[type=date],
+[type=datetime-local],
+[type=month],
+[type=time],
+[type=week],
+[type=range])[aria-invalid] {
+  padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
+  padding-left: var(--pico-form-element-spacing-horizontal);
+  padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
+  padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
+  background-position: center right 0.75rem;
+  background-size: 1rem auto;
+  background-repeat: no-repeat;
+}
+:where(input, select, textarea):not([type=checkbox],
+[type=radio],
+[type=date],
+[type=datetime-local],
+[type=month],
+[type=time],
+[type=week],
+[type=range])[aria-invalid=false]:not(select) {
+  background-image: var(--pico-icon-valid);
+}
+:where(input, select, textarea):not([type=checkbox],
+[type=radio],
+[type=date],
+[type=datetime-local],
+[type=month],
+[type=time],
+[type=week],
+[type=range])[aria-invalid=true]:not(select) {
+  background-image: var(--pico-icon-invalid);
+}
+:where(input, select, textarea)[aria-invalid=false] {
+  --pico-border-color: var(--pico-form-element-valid-border-color);
+}
+:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
+  --pico-border-color: var(--pico-form-element-valid-active-border-color) !important;
+}
+:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus):not([type=checkbox], [type=radio]) {
+  --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important;
+}
+:where(input, select, textarea)[aria-invalid=true] {
+  --pico-border-color: var(--pico-form-element-invalid-border-color);
+}
+:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
+  --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important;
+}
+:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus):not([type=checkbox], [type=radio]) {
+  --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
+}
+
+[dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) {
+  background-position: center left 0.75rem;
+}
+
+input::placeholder,
+input::-webkit-input-placeholder,
+textarea::placeholder,
+textarea::-webkit-input-placeholder,
+select:invalid {
+  color: var(--pico-form-element-placeholder-color);
+  opacity: 1;
+}
+
+input:not([type=checkbox], [type=radio]),
+select,
+textarea {
+  margin-bottom: var(--pico-spacing);
+}
+
+select::-ms-expand {
+  border: 0;
+  background-color: transparent;
+}
+select:not([multiple], [size]) {
+  padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
+  padding-left: var(--pico-form-element-spacing-horizontal);
+  padding-inline-start: var(--pico-form-element-spacing-horizontal);
+  padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
+  background-image: var(--pico-icon-chevron);
+  background-position: center right 0.75rem;
+  background-size: 1rem auto;
+  background-repeat: no-repeat;
+}
+select[multiple] option:checked {
+  background: var(--pico-form-element-selected-background-color);
+  color: var(--pico-form-element-color);
+}
+
+[dir=rtl] select:not([multiple], [size]) {
+  background-position: center left 0.75rem;
+}
+
+textarea {
+  display: block;
+  resize: vertical;
+}
+textarea[aria-invalid] {
+  --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
+  background-position: top right 0.75rem !important;
+  background-size: 1rem var(--pico-icon-height) !important;
+}
+
+:where(input, select, textarea, fieldset, .grid) + small {
+  display: block;
+  width: 100%;
+  margin-top: calc(var(--pico-spacing) * -0.75);
+  margin-bottom: var(--pico-spacing);
+  color: var(--pico-muted-color);
+}
+:where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small {
+  color: var(--pico-ins-color);
+}
+:where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small {
+  color: var(--pico-del-color);
+}
+
+label > :where(input, select, textarea) {
+  margin-top: calc(var(--pico-spacing) * 0.25);
+}
+
+/**
+ * Checkboxes, Radios and Switches
+ */
+label:has([type=checkbox], [type=radio]) {
+  width: fit-content;
+  cursor: pointer;
+}
+
+[type=checkbox],
+[type=radio] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 1.25em;
+  height: 1.25em;
+  margin-top: -0.125em;
+  margin-inline-end: 0.5em;
+  border-width: var(--pico-border-width);
+  vertical-align: middle;
+  cursor: pointer;
+}
+[type=checkbox]::-ms-check,
+[type=radio]::-ms-check {
+  display: none;
+}
+[type=checkbox]:checked, [type=checkbox]:checked:active, [type=checkbox]:checked:focus,
+[type=radio]:checked,
+[type=radio]:checked:active,
+[type=radio]:checked:focus {
+  --pico-background-color: var(--pico-primary-background);
+  --pico-border-color: var(--pico-primary-border);
+  background-image: var(--pico-icon-checkbox);
+  background-position: center;
+  background-size: 0.75em auto;
+  background-repeat: no-repeat;
+}
+[type=checkbox] ~ label,
+[type=radio] ~ label {
+  display: inline-block;
+  margin-bottom: 0;
+  cursor: pointer;
+}
+[type=checkbox] ~ label:not(:last-of-type),
+[type=radio] ~ label:not(:last-of-type) {
+  margin-inline-end: 1em;
+}
+
+[type=checkbox]:indeterminate {
+  --pico-background-color: var(--pico-primary-background);
+  --pico-border-color: var(--pico-primary-border);
+  background-image: var(--pico-icon-minus);
+  background-position: center;
+  background-size: 0.75em auto;
+  background-repeat: no-repeat;
+}
+
+[type=radio] {
+  border-radius: 50%;
+}
+[type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus {
+  --pico-background-color: var(--pico-primary-inverse);
+  border-width: 0.35em;
+  background-image: none;
+}
+
+[type=checkbox][role=switch] {
+  --pico-background-color: var(--pico-switch-background-color);
+  --pico-color: var(--pico-switch-color);
+  width: 2.25em;
+  height: 1.25em;
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: 1.25em;
+  background-color: var(--pico-background-color);
+  line-height: 1.25em;
+}
+[type=checkbox][role=switch]:not([aria-invalid]) {
+  --pico-border-color: var(--pico-switch-background-color);
+}
+[type=checkbox][role=switch]:before {
+  display: block;
+  aspect-ratio: 1;
+  height: 100%;
+  border-radius: 50%;
+  background-color: var(--pico-color);
+  box-shadow: var(--pico-switch-thumb-box-shadow);
+  content: "";
+  transition: margin 0.1s ease-in-out;
+}
+[type=checkbox][role=switch]:focus {
+  --pico-background-color: var(--pico-switch-background-color);
+  --pico-border-color: var(--pico-switch-background-color);
+}
+[type=checkbox][role=switch]:checked {
+  --pico-background-color: var(--pico-switch-checked-background-color);
+  --pico-border-color: var(--pico-switch-checked-background-color);
+  background-image: none;
+}
+[type=checkbox][role=switch]:checked::before {
+  margin-inline-start: calc(2.25em - 1.25em);
+}
+[type=checkbox][role=switch][disabled] {
+  --pico-background-color: var(--pico-border-color);
+}
+
+[type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
+[type=checkbox][role=switch][aria-invalid=false]:checked,
+[type=checkbox][role=switch][aria-invalid=false]:checked:active,
+[type=checkbox][role=switch][aria-invalid=false]:checked:focus {
+  --pico-background-color: var(--pico-form-element-valid-border-color);
+}
+[type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
+[type=checkbox][role=switch]:checked[aria-invalid=true],
+[type=checkbox][role=switch]:checked:active[aria-invalid=true],
+[type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
+  --pico-background-color: var(--pico-form-element-invalid-border-color);
+}
+
+[type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
+[type=radio][aria-invalid=false]:checked,
+[type=radio][aria-invalid=false]:checked:active,
+[type=radio][aria-invalid=false]:checked:focus,
+[type=checkbox][role=switch][aria-invalid=false]:checked,
+[type=checkbox][role=switch][aria-invalid=false]:checked:active,
+[type=checkbox][role=switch][aria-invalid=false]:checked:focus {
+  --pico-border-color: var(--pico-form-element-valid-border-color);
+}
+[type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
+[type=radio]:checked[aria-invalid=true],
+[type=radio]:checked:active[aria-invalid=true],
+[type=radio]:checked:focus[aria-invalid=true],
+[type=checkbox][role=switch]:checked[aria-invalid=true],
+[type=checkbox][role=switch]:checked:active[aria-invalid=true],
+[type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
+  --pico-border-color: var(--pico-form-element-invalid-border-color);
+}
+
+/**
+ * Accordion (<details>)
+ */
+details {
+  display: block;
+  margin-bottom: var(--pico-spacing);
+}
+details summary {
+  line-height: 1rem;
+  list-style-type: none;
+  cursor: pointer;
+  transition: color var(--pico-transition);
+}
+details summary:not([role]) {
+  color: var(--pico-accordion-close-summary-color);
+}
+details summary::-webkit-details-marker {
+  display: none;
+}
+details summary::marker {
+  display: none;
+}
+details summary::-moz-list-bullet {
+  list-style-type: none;
+}
+details summary::after {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  margin-inline-start: calc(var(--pico-spacing, 1rem) * 0.5);
+  float: right;
+  transform: rotate(-90deg);
+  background-image: var(--pico-icon-chevron);
+  background-position: right center;
+  background-size: 1rem auto;
+  background-repeat: no-repeat;
+  content: "";
+  transition: transform var(--pico-transition);
+}
+details summary:focus {
+  outline: none;
+}
+details summary:focus:not([role]) {
+  color: var(--pico-accordion-active-summary-color);
+}
+details summary:focus-visible:not([role]) {
+  outline: var(--pico-outline-width) solid var(--pico-primary-focus);
+  outline-offset: calc(var(--pico-spacing, 1rem) * 0.5);
+  color: var(--pico-primary);
+}
+details summary[role=button] {
+  width: 100%;
+  text-align: left;
+}
+details summary[role=button]::after {
+  height: calc(1rem * var(--pico-line-height, 1.5));
+}
+details[open] > summary {
+  margin-bottom: var(--pico-spacing);
+}
+details[open] > summary:not([role]):not(:focus) {
+  color: var(--pico-accordion-open-summary-color);
+}
+details[open] > summary::after {
+  transform: rotate(0);
+}
+
+[dir=rtl] details summary {
+  text-align: right;
+}
+[dir=rtl] details summary::after {
+  float: left;
+  background-position: left center;
+}
+
+/**
+ * Group ([role="group"], [role="search"])
+ */
+[role=search],
+[role=group] {
+  display: inline-flex;
+  position: relative;
+  width: 100%;
+  margin-bottom: var(--pico-spacing);
+  border-radius: var(--pico-border-radius);
+  box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+  vertical-align: middle;
+  transition: box-shadow var(--pico-transition);
+}
+[role=search] > *,
+[role=search] input:not([type=checkbox], [type=radio]),
+[role=search] select,
+[role=group] > *,
+[role=group] input:not([type=checkbox], [type=radio]),
+[role=group] select {
+  position: relative;
+  flex: 1 1 auto;
+  margin-bottom: 0;
+}
+[role=search] > *:not(:first-child),
+[role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
+[role=search] select:not(:first-child),
+[role=group] > *:not(:first-child),
+[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
+[role=group] select:not(:first-child) {
+  margin-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+[role=search] > *:not(:last-child),
+[role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
+[role=search] select:not(:last-child),
+[role=group] > *:not(:last-child),
+[role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
+[role=group] select:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+[role=search] > *:focus,
+[role=search] input:not([type=checkbox], [type=radio]):focus,
+[role=search] select:focus,
+[role=group] > *:focus,
+[role=group] input:not([type=checkbox], [type=radio]):focus,
+[role=group] select:focus {
+  z-index: 2;
+}
+[role=search] button:not(:first-child),
+[role=search] [type=submit]:not(:first-child),
+[role=search] [type=reset]:not(:first-child),
+[role=search] [type=button]:not(:first-child),
+[role=search] [role=button]:not(:first-child),
+[role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
+[role=search] select:not(:first-child),
+[role=group] button:not(:first-child),
+[role=group] [type=submit]:not(:first-child),
+[role=group] [type=reset]:not(:first-child),
+[role=group] [type=button]:not(:first-child),
+[role=group] [role=button]:not(:first-child),
+[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
+[role=group] select:not(:first-child) {
+  margin-left: calc(var(--pico-border-width) * -1);
+}
+[role=search] button,
+[role=search] [type=submit],
+[role=search] [type=reset],
+[role=search] [type=button],
+[role=search] [role=button],
+[role=group] button,
+[role=group] [type=submit],
+[role=group] [type=reset],
+[role=group] [type=button],
+[role=group] [role=button] {
+  width: auto;
+}
+@supports selector(:has(*)) {
+  [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus),
+  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) {
+    --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);
+  }
+  [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
+  [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
+  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
+  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select {
+    border-color: transparent;
+  }
+  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
+  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) {
+    --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);
+  }
+  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
+  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
+  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
+  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
+  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
+  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
+  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
+  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button] {
+    --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
+    --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border);
+  }
+  [role=search] button:focus,
+  [role=search] [type=submit]:focus,
+  [role=search] [type=reset]:focus,
+  [role=search] [type=button]:focus,
+  [role=search] [role=button]:focus,
+  [role=group] button:focus,
+  [role=group] [type=submit]:focus,
+  [role=group] [type=reset]:focus,
+  [role=group] [type=button]:focus,
+  [role=group] [role=button]:focus {
+    box-shadow: none;
+  }
+}
+
+[role=search] > *:first-child {
+  border-top-left-radius: 5rem;
+  border-bottom-left-radius: 5rem;
+}
+[role=search] > *:last-child {
+  border-top-right-radius: 5rem;
+  border-bottom-right-radius: 5rem;
+}
+
+/**
+ * Nav
+ */
+:where(nav li)::before {
+  float: left;
+  content: "​";
+}
+
+nav,
+nav ul {
+  display: flex;
+}
+
+nav {
+  justify-content: space-between;
+  overflow: visible;
+}
+nav ol,
+nav ul {
+  align-items: center;
+  margin-bottom: 0;
+  padding: 0;
+  list-style: none;
+}
+nav ol:first-of-type,
+nav ul:first-of-type {
+  margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
+}
+nav ol:last-of-type,
+nav ul:last-of-type {
+  margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
+}
+nav li {
+  display: inline-block;
+  margin: 0;
+  padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal);
+}
+nav li :where(a, [role=link]) {
+  display: inline-block;
+  margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1);
+  padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);
+  border-radius: var(--pico-border-radius);
+}
+nav li :where(a, [role=link]):not(:hover) {
+  text-decoration: none;
+}
+nav li button,
+nav li [role=button],
+nav li [type=button],
+nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
+nav li select {
+  height: auto;
+  margin-right: inherit;
+  margin-bottom: 0;
+  margin-left: inherit;
+  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
+}
+nav[aria-label=breadcrumb] {
+  align-items: center;
+  justify-content: start;
+}
+nav[aria-label=breadcrumb] ul li:not(:first-child) {
+  margin-inline-start: var(--pico-nav-link-spacing-horizontal);
+}
+nav[aria-label=breadcrumb] ul li a {
+  margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 0;
+  margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) * -1);
+}
+nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
+  display: inline-block;
+  position: absolute;
+  width: calc(var(--pico-nav-link-spacing-horizontal) * 4);
+  margin: 0 calc(var(--pico-nav-link-spacing-horizontal) * -1);
+  content: var(--pico-nav-breadcrumb-divider);
+  color: var(--pico-muted-color);
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+}
+nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
+  background-color: transparent;
+  color: inherit;
+  text-decoration: none;
+  pointer-events: none;
+}
+
+aside nav,
+aside ol,
+aside ul,
+aside li {
+  display: block;
+}
+aside li {
+  padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) var(--pico-nav-element-spacing-horizontal);
+}
+aside li a {
+  display: block;
+}
+aside li [role=button] {
+  margin: inherit;
+}
+
+[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
+  content: "\\";
+}
+
+/**
+ * Progress
+ */
+progress {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+progress {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  appearance: none;
+  width: 100%;
+  height: 0.5rem;
+  margin-bottom: calc(var(--pico-spacing) * 0.5);
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--pico-border-radius);
+  background-color: var(--pico-progress-background-color);
+  color: var(--pico-progress-color);
+}
+progress::-webkit-progress-bar {
+  border-radius: var(--pico-border-radius);
+  background: none;
+}
+progress[value]::-webkit-progress-value {
+  background-color: var(--pico-progress-color);
+  transition: inline-size var(--pico-transition);
+}
+progress::-moz-progress-bar {
+  background-color: var(--pico-progress-color);
+}
+@media (prefers-reduced-motion: no-preference) {
+  progress:indeterminate {
+    background: var(--pico-progress-background-color) linear-gradient(to right, var(--pico-progress-color) 30%, var(--pico-progress-background-color) 30%) top left/150% 150% no-repeat;
+    animation: progress-indeterminate 1s linear infinite;
+  }
+  progress:indeterminate[value]::-webkit-progress-value {
+    background-color: transparent;
+  }
+  progress:indeterminate::-moz-progress-bar {
+    background-color: transparent;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [dir=rtl] progress:indeterminate {
+    animation-direction: reverse;
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+/**
+ * Accessibility & User interaction
+ */
+[aria-controls] {
+  cursor: pointer;
+}
+
+[aria-disabled=true],
+[disabled] {
+  cursor: not-allowed;
+}
+
+[aria-hidden=false][hidden] {
+  display: initial;
+}
+
+[aria-hidden=false][hidden]:not(:focus) {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
+
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+  -ms-touch-action: manipulation;
+}
+
+[dir=rtl] {
+  direction: rtl;
+}
+
+/**
+ * Reduce Motion Features
+ */
+@media (prefers-reduced-motion: reduce) {
+  *:not([aria-busy=true]),
+  :not([aria-busy=true])::before,
+  :not([aria-busy=true])::after {
+    background-attachment: initial !important;
+    animation-duration: 1ms !important;
+    animation-delay: -1ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-delay: 0s !important;
+    transition-duration: 0s !important;
+  }
+}
+/**
+   * Styles
+   */
+:root {
+  --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
+  --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji);
+  --pico-font-family: var(--pico-font-family-sans-serif);
+  --pico-line-height: 1.5;
+  --pico-font-weight: 400;
+  --pico-font-size: 1rem;
+  --pico-text-underline-offset: 0.1rem;
+  --pico-border-radius: 0.25rem;
+  --pico-border-width: 0.0625rem;
+  --pico-outline-width: 0.125rem;
+  --pico-transition: 0.2s ease-in-out;
+  --pico-spacing: 1rem;
+  --pico-typography-spacing-vertical: 1rem;
+  --pico-block-spacing-vertical: var(--pico-spacing);
+  --pico-block-spacing-horizontal: var(--pico-spacing);
+  --pico-grid-column-gap: var(--pico-spacing);
+  --pico-form-element-spacing-vertical: 0.5rem;
+  --pico-form-element-spacing-horizontal: 1rem;
+  --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+  --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
+  --pico-nav-element-spacing-vertical: 1rem;
+  --pico-nav-element-spacing-horizontal: 0.5rem;
+  --pico-nav-link-spacing-vertical: 0.5rem;
+  --pico-nav-link-spacing-horizontal: 0.5rem;
+  --pico-nav-breadcrumb-divider: ">";
+  --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+  --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+}
+@media (min-width: 576px) {
+  :root {
+    --pico-font-size: 106.25%;
+  }
+}
+@media (min-width: 768px) {
+  :root {
+    --pico-font-size: 112.5%;
+  }
+}
+@media (min-width: 1024px) {
+  :root {
+    --pico-font-size: 118.75%;
+  }
+}
+@media (min-width: 1280px) {
+  :root {
+    --pico-font-size: 125%;
+  }
+}
+@media (min-width: 1536px) {
+  :root {
+    --pico-font-size: 131.25%;
+  }
+}
+:root nav .brand {
+  width: clamp(70px, 10%, 100px);
+}
+
+a {
+  --pico-text-decoration: none;
+}
+a.secondary, a.contrast {
+  --pico-text-decoration: none;
+}
+a:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
+  --pico-text-decoration: underline;
+}
+
+small {
+  --pico-font-size: 0.875em;
+}
+
+:where(progress) + small {
+  display: block;
+  width: 100%;
+  margin-top: calc(var(--pico-spacing) * -0.75);
+  margin-bottom: var(--pico-spacing);
+  color: var(--pico-muted-color);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  --pico-font-weight: 700;
+}
+
+h1 {
+  --pico-font-size: 2rem;
+  --pico-line-height: 1.125;
+  --pico-typography-spacing-top: 3rem;
+}
+
+h2 {
+  --pico-font-size: 1.75rem;
+  --pico-line-height: 1.15;
+  --pico-typography-spacing-top: 2.625rem;
+}
+
+h3 {
+  --pico-font-size: 1.5rem;
+  --pico-line-height: 1.175;
+  --pico-typography-spacing-top: 2.25rem;
+}
+
+h4 {
+  --pico-font-size: 1.25rem;
+  --pico-line-height: 1.2;
+  --pico-typography-spacing-top: 1.874rem;
+}
+
+h5 {
+  --pico-font-size: 1.125rem;
+  --pico-line-height: 1.225;
+  --pico-typography-spacing-top: 1.6875rem;
+}
+
+h6 {
+  --pico-font-size: 1rem;
+  --pico-line-height: 1.25;
+  --pico-typography-spacing-top: 1.5rem;
+}
+
+input:not([type=submit],
+[type=button],
+[type=reset],
+[type=checkbox],
+[type=radio],
+[type=file]),
+:where(select, textarea) {
+  --pico-outline-width: 0.0625rem;
+}
+
+[type=search] {
+  --pico-border-radius: 5rem;
+}
+
+[type=checkbox],
+[type=radio] {
+  --pico-border-width: 0.125rem;
+}
+
+[type=checkbox][role=switch] {
+  --pico-border-width: 0.1875rem;
+}
+
+[role=search] {
+  --pico-border-radius: 5rem;
+}
+
+[role=search],
+[role=group] {
+  margin-top: calc(var(--pico-spacing) * 0.25);
+}
+[role=search]:has(button.secondary:focus,
+[type=submit].secondary:focus,
+[type=button].secondary:focus,
+[role=button].secondary:focus),
+[role=group]:has(button.secondary:focus,
+[type=submit].secondary:focus,
+[type=button].secondary:focus,
+[role=button].secondary:focus) {
+  --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
+}
+[role=search]:has(button.contrast:focus,
+[type=submit].contrast:focus,
+[type=button].contrast:focus,
+[role=button].contrast:focus),
+[role=group]:has(button.contrast:focus,
+[type=submit].contrast:focus,
+[type=button].contrast:focus,
+[role=button].contrast:focus) {
+  --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
+}
+[role=search] button,
+[role=search] [type=submit],
+[role=search] [type=button],
+[role=search] [role=button],
+[role=group] button,
+[role=group] [type=submit],
+[role=group] [type=button],
+[role=group] [role=button] {
+  --pico-form-element-spacing-horizontal: 2rem;
+}
+
+details summary[role=button]:not(.outline)::after {
+  filter: brightness(0) invert(1);
+}
+
+/**
+   * Color schemes
+   */
+[data-theme=light],
+:root:not([data-theme=dark]) {
+  --pico-background-color: #fff;
+  --pico-color: #373c44;
+  --pico-text-selection-color: rgba(5, 162, 162, 0.25);
+  --pico-muted-color: #646b79;
+  --pico-muted-border-color: #e7eaf0;
+  --pico-primary: #047878;
+  --pico-primary-background: #047878;
+  --pico-primary-border: var(--pico-primary-background);
+  --pico-primary-underline: rgba(4, 120, 120, 0.5);
+  --pico-primary-hover: #025d5d;
+  --pico-primary-hover-background: #046a6a;
+  --pico-primary-hover-border: var(--pico-primary-hover-background);
+  --pico-primary-hover-underline: var(--pico-primary-hover);
+  --pico-primary-focus: rgba(5, 162, 162, 0.5);
+  --pico-primary-inverse: #fff;
+  --pico-secondary: #5d6b89;
+  --pico-secondary-background: #525f7a;
+  --pico-secondary-border: var(--pico-secondary-background);
+  --pico-secondary-underline: rgba(93, 107, 137, 0.5);
+  --pico-secondary-hover: #48536b;
+  --pico-secondary-hover-background: #48536b;
+  --pico-secondary-hover-border: var(--pico-secondary-hover-background);
+  --pico-secondary-hover-underline: var(--pico-secondary-hover);
+  --pico-secondary-focus: rgba(93, 107, 137, 0.25);
+  --pico-secondary-inverse: #fff;
+  --pico-contrast: #181c25;
+  --pico-contrast-background: #181c25;
+  --pico-contrast-border: var(--pico-contrast-background);
+  --pico-contrast-underline: rgba(24, 28, 37, 0.5);
+  --pico-contrast-hover: #000;
+  --pico-contrast-hover-background: #000;
+  --pico-contrast-hover-border: var(--pico-contrast-hover-background);
+  --pico-contrast-hover-underline: var(--pico-secondary-hover);
+  --pico-contrast-focus: rgba(93, 107, 137, 0.25);
+  --pico-contrast-inverse: #fff;
+  --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-h1-color: #2d3138;
+  --pico-h2-color: #373c44;
+  --pico-h3-color: #424751;
+  --pico-h4-color: #4d535e;
+  --pico-h5-color: #5c6370;
+  --pico-h6-color: #646b79;
+  --pico-mark-background-color: #fde7c0;
+  --pico-mark-color: #0f1114;
+  --pico-ins-color: #1d6a54;
+  --pico-del-color: #883935;
+  --pico-blockquote-border-color: var(--pico-muted-border-color);
+  --pico-blockquote-footer-color: var(--pico-muted-color);
+  --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  --pico-form-element-background-color: #fbfcfc;
+  --pico-form-element-selected-background-color: #dfe3eb;
+  --pico-form-element-border-color: #cfd5e2;
+  --pico-form-element-color: #23262c;
+  --pico-form-element-placeholder-color: var(--pico-muted-color);
+  --pico-form-element-active-background-color: #fff;
+  --pico-form-element-active-border-color: var(--pico-primary-border);
+  --pico-form-element-focus-color: var(--pico-primary-border);
+  --pico-form-element-disabled-opacity: 0.5;
+  --pico-form-element-invalid-border-color: #b86a6b;
+  --pico-form-element-invalid-active-border-color: #c84f48;
+  --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
+  --pico-form-element-valid-border-color: #4c9b8a;
+  --pico-form-element-valid-active-border-color: #279977;
+  --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
+  --pico-switch-background-color: #bfc7d9;
+  --pico-switch-checked-background-color: var(--pico-primary-background);
+  --pico-switch-color: #fff;
+  --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  --pico-accordion-border-color: var(--pico-muted-border-color);
+  --pico-accordion-active-summary-color: var(--pico-primary-hover);
+  --pico-accordion-close-summary-color: var(--pico-color);
+  --pico-accordion-open-summary-color: var(--pico-muted-color);
+  --pico-progress-background-color: #dfe3eb;
+  --pico-progress-color: var(--pico-primary-background);
+  --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200, 79, 72)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+  color-scheme: light;
+}
+[data-theme=light] input:is([type=submit],
+[type=button],
+[type=reset],
+[type=checkbox],
+[type=radio],
+[type=file]),
+:root:not([data-theme=dark]) input:is([type=submit],
+[type=button],
+[type=reset],
+[type=checkbox],
+[type=radio],
+[type=file]) {
+  --pico-form-element-focus-color: var(--pico-primary-focus);
+}
+
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --pico-background-color: #13171f;
+    --pico-color: #c2c7d0;
+    --pico-text-selection-color: rgba(10, 177, 177, 0.1875);
+    --pico-muted-color: #7b8495;
+    --pico-muted-border-color: #202632;
+    --pico-primary: #0ab1b1;
+    --pico-primary-background: #047878;
+    --pico-primary-border: var(--pico-primary-background);
+    --pico-primary-underline: rgba(10, 177, 177, 0.5);
+    --pico-primary-hover: #0ccece;
+    --pico-primary-hover-background: #058686;
+    --pico-primary-hover-border: var(--pico-primary-hover-background);
+    --pico-primary-hover-underline: var(--pico-primary-hover);
+    --pico-primary-focus: rgba(10, 177, 177, 0.375);
+    --pico-primary-inverse: #fff;
+    --pico-secondary: #969eaf;
+    --pico-secondary-background: #525f7a;
+    --pico-secondary-border: var(--pico-secondary-background);
+    --pico-secondary-underline: rgba(150, 158, 175, 0.5);
+    --pico-secondary-hover: #b3b9c5;
+    --pico-secondary-hover-background: #5d6b89;
+    --pico-secondary-hover-border: var(--pico-secondary-hover-background);
+    --pico-secondary-hover-underline: var(--pico-secondary-hover);
+    --pico-secondary-focus: rgba(144, 158, 190, 0.25);
+    --pico-secondary-inverse: #fff;
+    --pico-contrast: #dfe3eb;
+    --pico-contrast-background: #eff1f4;
+    --pico-contrast-border: var(--pico-contrast-background);
+    --pico-contrast-underline: rgba(223, 227, 235, 0.5);
+    --pico-contrast-hover: #fff;
+    --pico-contrast-hover-background: #fff;
+    --pico-contrast-hover-border: var(--pico-contrast-hover-background);
+    --pico-contrast-hover-underline: var(--pico-contrast-hover);
+    --pico-contrast-focus: rgba(207, 213, 226, 0.25);
+    --pico-contrast-inverse: #000;
+    --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015);
+    --pico-h1-color: #f0f1f3;
+    --pico-h2-color: #e0e3e7;
+    --pico-h3-color: #c2c7d0;
+    --pico-h4-color: #b3b9c5;
+    --pico-h5-color: #a4acba;
+    --pico-h6-color: #8891a4;
+    --pico-mark-background-color: #014063;
+    --pico-mark-color: #fff;
+    --pico-ins-color: #62af9a;
+    --pico-del-color: #ce7e7b;
+    --pico-blockquote-border-color: var(--pico-muted-border-color);
+    --pico-blockquote-footer-color: var(--pico-muted-color);
+    --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    --pico-form-element-background-color: #1c212c;
+    --pico-form-element-selected-background-color: #2a3140;
+    --pico-form-element-border-color: #2a3140;
+    --pico-form-element-color: #e0e3e7;
+    --pico-form-element-placeholder-color: #8891a4;
+    --pico-form-element-active-background-color: #1a1f28;
+    --pico-form-element-active-border-color: var(--pico-primary-border);
+    --pico-form-element-focus-color: var(--pico-primary-border);
+    --pico-form-element-disabled-opacity: 0.5;
+    --pico-form-element-invalid-border-color: #964a50;
+    --pico-form-element-invalid-active-border-color: #b7403b;
+    --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
+    --pico-form-element-valid-border-color: #2a7b6f;
+    --pico-form-element-valid-active-border-color: #16896a;
+    --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
+    --pico-switch-background-color: #333c4e;
+    --pico-switch-checked-background-color: var(--pico-primary-background);
+    --pico-switch-color: #fff;
+    --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    --pico-accordion-border-color: var(--pico-muted-border-color);
+    --pico-accordion-active-summary-color: var(--pico-primary-hover);
+    --pico-accordion-close-summary-color: var(--pico-color);
+    --pico-accordion-open-summary-color: var(--pico-muted-color);
+    --pico-progress-background-color: #202632;
+    --pico-progress-color: var(--pico-primary-background);
+    --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+    color-scheme: dark;
+  }
+  :root:not([data-theme]) input:is([type=submit],
+  [type=button],
+  [type=reset],
+  [type=checkbox],
+  [type=radio],
+  [type=file]) {
+    --pico-form-element-focus-color: var(--pico-primary-focus);
+  }
+  :root:not([data-theme]) details summary[role=button].contrast:not(.outline)::after {
+    filter: brightness(0);
+  }
+}
+[data-theme=dark] {
+  --pico-background-color: #13171f;
+  --pico-color: #c2c7d0;
+  --pico-text-selection-color: rgba(10, 177, 177, 0.1875);
+  --pico-muted-color: #7b8495;
+  --pico-muted-border-color: #202632;
+  --pico-primary: #0ab1b1;
+  --pico-primary-background: #047878;
+  --pico-primary-border: var(--pico-primary-background);
+  --pico-primary-underline: rgba(10, 177, 177, 0.5);
+  --pico-primary-hover: #0ccece;
+  --pico-primary-hover-background: #058686;
+  --pico-primary-hover-border: var(--pico-primary-hover-background);
+  --pico-primary-hover-underline: var(--pico-primary-hover);
+  --pico-primary-focus: rgba(10, 177, 177, 0.375);
+  --pico-primary-inverse: #fff;
+  --pico-secondary: #969eaf;
+  --pico-secondary-background: #525f7a;
+  --pico-secondary-border: var(--pico-secondary-background);
+  --pico-secondary-underline: rgba(150, 158, 175, 0.5);
+  --pico-secondary-hover: #b3b9c5;
+  --pico-secondary-hover-background: #5d6b89;
+  --pico-secondary-hover-border: var(--pico-secondary-hover-background);
+  --pico-secondary-hover-underline: var(--pico-secondary-hover);
+  --pico-secondary-focus: rgba(144, 158, 190, 0.25);
+  --pico-secondary-inverse: #fff;
+  --pico-contrast: #dfe3eb;
+  --pico-contrast-background: #eff1f4;
+  --pico-contrast-border: var(--pico-contrast-background);
+  --pico-contrast-underline: rgba(223, 227, 235, 0.5);
+  --pico-contrast-hover: #fff;
+  --pico-contrast-hover-background: #fff;
+  --pico-contrast-hover-border: var(--pico-contrast-hover-background);
+  --pico-contrast-hover-underline: var(--pico-contrast-hover);
+  --pico-contrast-focus: rgba(207, 213, 226, 0.25);
+  --pico-contrast-inverse: #000;
+  --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015);
+  --pico-h1-color: #f0f1f3;
+  --pico-h2-color: #e0e3e7;
+  --pico-h3-color: #c2c7d0;
+  --pico-h4-color: #b3b9c5;
+  --pico-h5-color: #a4acba;
+  --pico-h6-color: #8891a4;
+  --pico-mark-background-color: #014063;
+  --pico-mark-color: #fff;
+  --pico-ins-color: #62af9a;
+  --pico-del-color: #ce7e7b;
+  --pico-blockquote-border-color: var(--pico-muted-border-color);
+  --pico-blockquote-footer-color: var(--pico-muted-color);
+  --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  --pico-form-element-background-color: #1c212c;
+  --pico-form-element-selected-background-color: #2a3140;
+  --pico-form-element-border-color: #2a3140;
+  --pico-form-element-color: #e0e3e7;
+  --pico-form-element-placeholder-color: #8891a4;
+  --pico-form-element-active-background-color: #1a1f28;
+  --pico-form-element-active-border-color: var(--pico-primary-border);
+  --pico-form-element-focus-color: var(--pico-primary-border);
+  --pico-form-element-disabled-opacity: 0.5;
+  --pico-form-element-invalid-border-color: #964a50;
+  --pico-form-element-invalid-active-border-color: #b7403b;
+  --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
+  --pico-form-element-valid-border-color: #2a7b6f;
+  --pico-form-element-valid-active-border-color: #16896a;
+  --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
+  --pico-switch-background-color: #333c4e;
+  --pico-switch-checked-background-color: var(--pico-primary-background);
+  --pico-switch-color: #fff;
+  --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  --pico-accordion-border-color: var(--pico-muted-border-color);
+  --pico-accordion-active-summary-color: var(--pico-primary-hover);
+  --pico-accordion-close-summary-color: var(--pico-color);
+  --pico-accordion-open-summary-color: var(--pico-muted-color);
+  --pico-progress-background-color: #202632;
+  --pico-progress-color: var(--pico-primary-background);
+  --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+  color-scheme: dark;
+}
+[data-theme=dark] input:is([type=submit],
+[type=button],
+[type=reset],
+[type=checkbox],
+[type=radio],
+[type=file]) {
+  --pico-form-element-focus-color: var(--pico-primary-focus);
+}
+[data-theme=dark] details summary[role=button].contrast:not(.outline)::after {
+  filter: brightness(0);
+}
+
+progress,
+[type=checkbox],
+[type=radio],
+[type=range] {
+  accent-color: var(--pico-primary);
+}
+
+:root {
+  --color-hp: #f06048;
+  --color-mana: #01aaff;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+a {
+  cursor: pointer;
+}
+
+progress {
+  height: 1.25rem;
+}
+
+.stat-container {
+  display: flex;
+  margin-bottom: var(--pico-spacing);
+}
+.stat-container .start {
+  justify-content: flex-start;
+  margin-right: auto;
+}
+.stat-container .middle {
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+.stat-container .end {
+  justify-content: flex-end;
+  margin-left: auto;
+}
+
+.lbl-offset {
+  display: flex;
+  margin-bottom: calc(var(--pico-spacing) * 0.4);
+}
+.lbl-offset button {
+  margin-top: auto;
+}
+
+.progress {
+  border-radius: var(--pico-border-radius);
+  color: var(--pico-contrast);
+  height: 1.25rem;
+  background-color: var(--pico-progress-background-color);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: calc(var(--pico-spacing) * 0.5);
+}
+.progress .progress-label {
+  position: absolute;
+  top: 0;
+  z-index: 20;
+  font-size: 0.9rem;
+}
+.progress div {
+  height: 100%;
+  border-radius: var(--pico-border-radius);
+  background: var(--pico-primary);
+  position: relative;
+  z-index: 10;
+  align-self: start;
+  margin-right: auto;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+}
+.progress div.mana {
+  background-color: var(--color-mana);
+  animation-name: manaAnimation;
+}
+@keyframes manaAnimation {
+  0% {
+    width: var(--mana-from-width);
+  }
+  100% {
+    width: var(--mana-to-width);
+  }
+}
+.progress div.hp {
+  background-color: var(--color-hp);
+  animation-name: hpAnimation;
+}
+@keyframes hpAnimation {
+  0% {
+    width: var(--hp-from-width);
+  }
+  100% {
+    width: var(--hp-to-width);
+  }
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.mb-1 {
+  margin-bottom: calc(var(--pico-spacing) * 0.25);
+}
+
+.mb-2 {
+  margin-bottom: calc(var(--pico-spacing) * 0.5);
+}
+
+.mb-3 {
+  margin-bottom: calc(var(--pico-spacing) * 0.75);
+}
+
+.mb-4 {
+  margin-bottom: var(--pico-spacing);
+}
diff --git a/public/stylesheets/tallytome.scss b/public/stylesheets/tallytome.scss
new file mode 100644
index 0000000..89fee44
--- /dev/null
+++ b/public/stylesheets/tallytome.scss
@@ -0,0 +1,455 @@
+@use "pico/pico" with (
+    $theme-color: "cyan",
+    $modules: (
+        "themes/default": false,
+
+        // Layout
+        "layout/document": true,
+        "layout/landmarks": true,
+        "layout/container": true,
+        "layout/section": true,
+        "layout/grid": true,
+        "layout/overflow-auto": false,
+
+        // Content
+        "content/link": true,
+        "content/typography": true,
+        "content/embedded": true,
+        "content/button": true,
+        "content/table": false,
+        "content/code": false,
+        "content/figure": false,
+        "content/miscs": true,
+
+        // Forms
+        "forms/basics": true,
+        "forms/checkbox-radio-switch": true,
+        "forms/input-color": false,
+        "forms/input-date": false,
+        "forms/input-file": false,
+        "forms/input-range": false,
+        "forms/input-search": false,
+
+        // Components
+        "components/accordion": true,
+        "components/card": false,
+        "components/dropdown": false,
+        "components/group": true,
+        "components/loading": false,
+        "components/modal": false,
+        "components/nav": true,
+        "components/progress": true,
+        "components/tooltip": false,
+
+        // Utilities
+        "utilities/accessibility": true,
+        "utilities/reduce-motion": true
+    )
+);
+
+@use "pico/colors/index" as *;
+
+@use "custom/styles";
+@use "custom/schemes";
+
+:root{
+//     // https://coolors.co/00072d-001c55-0a2472-0e6ba8-a6e1fa
+//     --font-size: 1.2rem;
+//     --border-radius: 5px;
+//     --focus-boxshadow: 0.2rem;
+
+//     --pico-primary: hsl(204, 85%, 36%);
+
+//     --focus: hsl(204, 85%, 50%);
+
+//     --grey0: hsl(0, 0%, 0%);
+//     --grey1: hsl(0, 0%, 10%);
+//     --grey2: hsl(0, 0%, 20%);
+//     --grey3: hsl(0, 0%, 30%);
+//     --grey4: hsl(0, 0%, 40%);
+//     --grey5: hsl(0, 0%, 50%);
+//     --grey6: hsl(0, 0%, 60%);
+//     --grey7: hsl(0, 0%, 70%);
+//     --grey8: hsl(0, 0%, 80%);
+//     --grey9: hsl(0, 0%, 90%);
+//     --grey10: hsl(0, 0%, 100%);
+
+    // --color-ok: #{$green-500};
+    // --color-warning: #{$pumpkin-300};
+    // --color-danger: #{$red-500};
+
+    --color-hp: #{$red-400};
+    --color-mana: #{$azure-350};
+
+}
+
+// *, ::after, ::before {
+//     box-sizing: border-box;
+//     background-repeat: no-repeat;
+// }
+
+// .ok-helper{
+//     color: --color-ok;
+//     &::-moz-progress-bar {
+//         background-color: var(--color-ok);
+//     }
+// }
+
+// .warning-helper{
+//     color: var(--color-warning);
+//     &::-moz-progress-bar {
+//         background-color: var(--color-warning);
+//     }
+// }
+
+// .danger-helper{
+//     color: var(--color-danger);
+//     &::-moz-progress-bar {
+//         background-color: var(--color-danger);
+//     }
+// }
+
+.text-center{
+    text-align: center;
+}
+
+.text-right{
+    text-align: right;
+}
+
+// body{
+//     margin: 0;
+//     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+//     font-size: var(--font-size);
+// }
+
+
+// basic container
+// .container{
+//     width: 100%;
+//     padding-left: 1rem;
+//     padding-right: 1rem;
+//     margin-left: auto;
+//     margin-right: auto;
+// }
+
+// @media (min-width: 576px){
+//     .container{
+//         width: clamp(510px, 90%, 1920px);
+//         padding: 0;
+//     }
+// }
+
+a {
+    cursor: pointer;
+}
+
+// progress
+progress{
+    height: 1.25rem;
+}
+
+// stat container
+.stat-container{
+    display: flex;
+    margin-bottom: var(--pico-spacing);
+
+    .start{
+        justify-content: flex-start;
+        margin-right: auto;
+    }
+
+    .middle{
+        justify-content: center;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .end{
+        justify-content: flex-end;
+        margin-left: auto;
+    }
+}
+
+.lbl-offset{
+    display: flex;
+    margin-bottom: calc(var(--pico-spacing) * 0.4);
+
+    button{
+        margin-top: auto;
+    }
+}
+
+
+.progress{
+    border-radius: var(--pico-border-radius);
+    color: var(--pico-contrast);
+    height: 1.25rem;
+    background-color: var(--pico-progress-background-color);
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: calc(var(--pico-spacing) * .5);
+   
+
+    .progress-label{
+        position: absolute;
+        top: 0;
+        z-index: 20;
+        font-size: 0.9rem;
+    }
+    div{
+        height: 100%;
+        border-radius: var(--pico-border-radius);
+        background: var(--pico-primary);
+        position: relative;
+        z-index: 10;
+        align-self: start;
+        margin-right: auto;
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+
+        &.mana{
+            background-color: var(--color-mana);
+            animation-name: manaAnimation;
+            @keyframes manaAnimation {
+                0%   {width: var(--mana-from-width);}
+                100% {width: var(--mana-to-width);}
+            }
+        }
+        &.hp{
+            background-color: var(--color-hp);
+            animation-name: hpAnimation;
+            @keyframes hpAnimation {
+                0%   {width: var(--hp-from-width);}
+                100% {width: var(--hp-to-width);}
+            }
+        }
+       
+    }
+}
+
+
+
+
+
+// utility
+// margins
+
+.mb-0{
+    margin-bottom: 0 !important;
+}
+
+.mb-1{
+    margin-bottom: calc(var(--pico-spacing) * .25);
+}
+
+.mb-2{
+    margin-bottom: calc(var(--pico-spacing) * .50);
+}
+
+.mb-3{
+    margin-bottom: calc(var(--pico-spacing) * .75);
+}
+
+.mb-4{
+    margin-bottom: var(--pico-spacing);
+}
+
+// form elements
+
+// form{
+//     button{
+//         width: 100%;
+//     }
+// }
+
+
+// input{
+//     border: 1px var(--grey8) solid;
+//     outline: 0;
+//     border-radius: var(--border-radius);
+//     box-shadow: none;
+//     font-size: var(--font-size);
+//     background-color: var(--grey10);
+
+//     &:not([type="checkbox"], [type="radio"], [type="range"]) {
+//         width: 100%;
+//         padding: 0.75rem;
+//     }
+
+//     &:not([type="checkbox"], [type="radio"]), select, textarea {
+//         margin-bottom: 1rem;
+//     }
+    
+//     &:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus {
+//         border-color:  var(--primary);
+//     }
+// }
+
+// button{
+//     font-family: inherit;
+//     font-size: var(--font-size);
+//     outline: 0;
+//     border: 0;
+//     border-radius: var(--border-radius);
+//     box-shadow: none;
+//     color: var(--grey10);
+//     background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
+//     background-color: var(--primary);
+//     padding: 0.75rem 1.25rem;
+//     cursor: pointer;
+//     background-blend-mode: lighten;
+
+//     &:hover{
+//         background-blend-mode: darken;
+//     }
+// }
+
+// label:has([type="checkbox"], [type="radio"]) {
+//     width: -moz-fit-content;
+//     width: fit-content;
+//     cursor: pointer;
+// }
+
+// label {
+//     display: block;
+//     margin-bottom: 1rem;
+// }
+
+// [type="checkbox"], [type="radio"] {
+//     -webkit-appearance: none;
+//     -moz-appearance: none;
+//     appearance: none;
+//     width: 1.25em;
+//     height: 1.25em;
+//     margin-top: -.125em;
+//     margin-inline-end: .5em;
+//     border-width: 1px;
+//     vertical-align: middle;
+//     cursor: pointer;
+// }
+
+// [type="checkbox"][role="switch"] {
+//     width: 2.25em;
+//     height: 1.25em;
+//     border: 2px solid var(--grey8);
+//     border-radius: 1.25em;
+//     background-color: var(--grey8);
+//     line-height: 1.25em;
+
+//     &::before {
+//         display: block;
+//         width: calc(1.25em - .1rem * 2);
+//         height: 100%;
+//         border-radius: 50%;
+//         background-color: var(--grey10);
+
+//         content: "";
+//         transition: margin .2s ease-in-out;
+//     }
+
+//     &:focus{
+//         border-color: var(--focus);
+//     }
+//     &:checked{
+//         border-color: var(--focus);
+//         background-color: var(--primary);
+//         background-image: none;
+//         &:before {
+//             margin-inline-start: calc(1.125em - .24rem);
+//           }
+//     }
+// }
+
+
+
+// progress bar
+// progress{
+//     -moz-appearance: none;
+//     appearance: none;
+
+//     display: inline-block;
+//     width: 100%;
+//     color: var(--primary);
+//     background: var(--grey9);
+//     border: 0;
+//     border-radius: var(--border-radius);
+
+//     &::-webkit-progress-bar {
+//         border-radius: var(--border-radius);
+//         background: none;
+//     }
+
+//     &[value]::-webkit-progress-value {
+       
+//         border-radius: var(--border-radius);
+       
+//     }   
+
+//     &::-moz-progress-bar {
+//         background-color: var(--primary);
+//     }
+
+
+//     &:indeterminate {
+//         background: var(--grey9)
+//             linear-gradient(
+//                 to right,
+//                 var(--primary) 30%,
+//                 var(--grey9) 30%
+//             ) 
+//         top left/150% 150% no-repeat;
+//         animation: progress-indeterminate 1.5s linear infinite;
+    
+//         &[value]::-webkit-progress-value {
+//         background-color: transparent;
+//         }
+    
+//         &::-moz-progress-bar {
+//         background-color: transparent;
+//         }
+//     }
+
+//     @keyframes progress-indeterminate {
+//         0% {
+//           background-position: 200% 0;
+//         }
+    
+//         100% {
+//           background-position: -200% 0;
+//         }
+//       }
+// }
+
+
+// groups
+// [role="group"], [role="search"] {
+//     display: inline-flex;
+//     position: relative;
+//     width: 100%;
+//     margin-bottom: 1rem;
+//     border-radius: var(--border-radius);
+//     box-shadow: var(--focus,0 0 0 transparent);
+//     vertical-align: middle;
+//     // transition: box-shadow var(--pico-transition);
+// }
+
+// [role="group"] input:not([type="checkbox"], [type="radio"]), [role="group"] select, [role="group"] > *, [role="search"] input:not([type="checkbox"], [type="radio"]), [role="search"] select, [role="search"] > * {
+//     position: relative;
+//     flex: 1 1 auto;
+//     margin-bottom: 0;
+// }
+
+// [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="group"] select:not(:last-child), [role="group"] > :not(:last-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="search"] select:not(:last-child), [role="search"] > :not(:last-child) {
+//     border-top-right-radius: 0;
+//     border-bottom-right-radius: 0;
+//     border-right: 0;
+// }
+
+// [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="group"] select:not(:first-child), [role="group"] > :not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), [role="search"] > :not(:first-child) {
+//     margin-left: 0;
+//     border-top-left-radius: 0;
+//     border-bottom-left-radius: 0;
+// }
diff --git a/public/tally-logo-no-bg.png b/public/tally-logo-no-bg.png
new file mode 100644
index 0000000..a8ce780
Binary files /dev/null and b/public/tally-logo-no-bg.png differ
diff --git a/view/home/home.templ b/view/home/home.templ
new file mode 100644
index 0000000..ebddf45
--- /dev/null
+++ b/view/home/home.templ
@@ -0,0 +1,11 @@
+package home
+
+import "github.com/itsig0/tallytome/view/layout"
+
+templ Show(hx bool) {
+    @layout.Base(hx){
+        <div class="container">
+            <h1>Schön hier aber waren sie schon mal in Mordor?</h1>
+        </div>
+    }
+}
diff --git a/view/home/home_templ.go b/view/home/home_templ.go
new file mode 100644
index 0000000..2485086
--- /dev/null
+++ b/view/home/home_templ.go
@@ -0,0 +1,52 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.598
+package home
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "github.com/itsig0/tallytome/view/layout"
+
+func Show(hx bool) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var2 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+			if !templ_7745c5c3_IsBuffer {
+				templ_7745c5c3_Buffer = templ.GetBuffer()
+				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+			}
+			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = layout.Base(hx).Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
diff --git a/view/hptracker/tracker.templ b/view/hptracker/tracker.templ
new file mode 100644
index 0000000..1343a93
--- /dev/null
+++ b/view/hptracker/tracker.templ
@@ -0,0 +1,170 @@
+package hptracker
+
+import "github.com/itsig0/tallytome/view/layout"
+import "fmt"
+
+type TrackerData struct {
+    HP                  string
+    HPBase              string
+    HPStartPercentage   string
+    HPPercentage        string
+    Mana                string
+    ManaBase            string
+    ManaStartPercentage string
+    ManaPercentage      string
+    ManaRegen           string
+}
+
+templ Show(hx bool, td TrackerData){
+    @layout.Base(hx){
+        <div class="container">
+
+            <div class="grid mb-2">
+                <div class="start">
+                    <h2>Kampfrunde: </h2>
+                </div>
+
+                <div id="trackerBars" class="middle">
+                    
+                    @TrackerColumn(td)
+
+                </div>
+
+                <div class="text-right">
+                    <button>Nächste Runde</button>
+                </div>
+            </div>
+
+            // base stats go here
+            @baseStats()
+
+            <div class="grid">
+                <div>
+                    <h3>TP</h3>
+                    @hp()
+                </div>
+
+                <div>
+                    <h3>Mana</h3>
+                    @mana()
+                </div>
+            </div>
+        </div>
+    }
+}
+
+// css loading(percent string) {
+// 	width: { fmt.Sprintf("%s%%", percent) };
+// }
+
+templ TrackerColumn(td TrackerData){
+
+    <div id="hpBar" class="progress">
+        @HPTracker(td)
+    </div>
+
+    <div class="progress">
+        @ManaTracker(td)
+    </div>
+
+}
+
+templ HPTracker(td TrackerData){
+    <span class="progress-label">TP: {td.HP}/{td.HP} </span>
+    <div class={"hp", hpAnimation(td.HPStartPercentage, td.HPPercentage)} ></div>
+}
+
+templ ManaTracker(td TrackerData){
+    <span class="progress-label">Mana: {td.Mana}/{td.Mana} </span>
+    <div class={"mana", manaAnimation(td.ManaStartPercentage, td.ManaPercentage)}></div> 
+}
+
+css hpAnimation(from, to string) {
+    --hp-from-width:{ fmt.Sprintf("%s%%", from) };
+    --hp-to-width:{ fmt.Sprintf("%s%%", to) };
+}
+
+css manaAnimation(from, to string) {
+    --mana-from-width:{ fmt.Sprintf("%s%%", from) };
+    --mana-to-width:{ fmt.Sprintf("%s%%", to) };
+}
+
+templ baseStats(){
+    <details open>
+        <summary>Standard Werte</summary>
+        <form class="grid" hx-post="/hp-mana-tracker/update" hx-target="#trackerBars">
+
+            <label>
+                Trefferpunkte
+                <input
+                    type="number"
+                    placeholder="Trefferpunkte"
+                    name="hp"
+                    required
+                />
+            </label>
+
+            <label>
+                Mana <input type="number" name="mana" placeholder="Mana" required/>
+            </label>
+
+            <label>
+                Regenerations %
+                <input
+                    type="number"
+                    name="manaregen"
+                    placeholder="Regenerations %"
+                    required
+                />
+            </label>
+
+            <div class="lbl-offset">
+                <button type="submit">
+                    Go
+                </button>
+            </div>
+        </form>
+    </details>
+}
+
+templ hp(){
+
+    <form hx-post="/hp-mana-tracker/damage" hx-target="#hpBar">
+        <fieldset role="group">
+
+            <button class="secondary" name="damage" value="true">
+                -
+            </button>
+
+            <input name="damageInput" type="number"/>
+
+            <button class="secondary" name="heal" value="true">
+                +
+            </button>
+
+        </fieldset>
+    
+        <fieldset>
+            <label for="savingthrow">
+                <input id="savingthrow" name="savingthrow" type="checkbox" role="switch"/>
+                Verteidigungswurf
+            </label>
+        </fieldset>
+    </form>
+}
+
+templ mana(){
+    <fieldset role="group">
+
+        <button class="secondary" name="use" hx-get="/hp-mana-tracker/check">
+            -
+        </button>
+
+        <input type="number" placeholder="" min="0" value="0"/>
+
+        <button class="secondary" name="add">
+            +
+        </button>
+
+    </fieldset>
+}
\ No newline at end of file
diff --git a/view/hptracker/tracker_templ.go b/view/hptracker/tracker_templ.go
new file mode 100644
index 0000000..6aaa468
--- /dev/null
+++ b/view/hptracker/tracker_templ.go
@@ -0,0 +1,369 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.598
+package hptracker
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+import "strings"
+
+import "github.com/itsig0/tallytome/view/layout"
+import "fmt"
+
+type TrackerData struct {
+	HP                  string
+	HPBase              string
+	HPStartPercentage   string
+	HPPercentage        string
+	Mana                string
+	ManaBase            string
+	ManaStartPercentage string
+	ManaPercentage      string
+	ManaRegen           string
+}
+
+func Show(hx bool, td TrackerData) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var2 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+			if !templ_7745c5c3_IsBuffer {
+				templ_7745c5c3_Buffer = templ.GetBuffer()
+				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+			}
+			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = TrackerColumn(td).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 2)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = baseStats().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 3)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = hp().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 4)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = mana().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 5)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = layout.Base(hx).Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+//	css loading(percent string) {
+//		width: { fmt.Sprintf("%s%%", percent) };
+//	}
+func TrackerColumn(td TrackerData) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 6)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = HPTracker(td).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 7)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ManaTracker(td).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 8)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func HPTracker(td TrackerData) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 9)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(td.HP)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/hptracker/tracker.templ`, Line: 72, Col: 43}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 10)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(td.HP)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/hptracker/tracker.templ`, Line: 72, Col: 51}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 11)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 = []any{"hp", hpAnimation(td.HPStartPercentage, td.HPPercentage)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var7...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 12)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var7).String()))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 13)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func ManaTracker(td TrackerData) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var8 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var8 == nil {
+			templ_7745c5c3_Var8 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 14)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(td.Mana)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/hptracker/tracker.templ`, Line: 77, Col: 47}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 15)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(td.Mana)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/hptracker/tracker.templ`, Line: 77, Col: 57}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 16)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 = []any{"mana", manaAnimation(td.ManaStartPercentage, td.ManaPercentage)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var11...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 17)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var11).String()))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 18)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func hpAnimation(from, to string) templ.CSSClass {
+	var templ_7745c5c3_CSSBuilder strings.Builder
+	templ_7745c5c3_CSSBuilder.WriteString(string(templ.SanitizeCSS(`--hp-from-width`, fmt.Sprintf("%s%%", from))))
+	templ_7745c5c3_CSSBuilder.WriteString(string(templ.SanitizeCSS(`--hp-to-width`, fmt.Sprintf("%s%%", to))))
+	templ_7745c5c3_CSSID := templ.CSSID(`hpAnimation`, templ_7745c5c3_CSSBuilder.String())
+	return templ.ComponentCSSClass{
+		ID:    templ_7745c5c3_CSSID,
+		Class: templ.SafeCSS(`.` + templ_7745c5c3_CSSID + `{` + templ_7745c5c3_CSSBuilder.String() + `}`),
+	}
+}
+
+func manaAnimation(from, to string) templ.CSSClass {
+	var templ_7745c5c3_CSSBuilder strings.Builder
+	templ_7745c5c3_CSSBuilder.WriteString(string(templ.SanitizeCSS(`--mana-from-width`, fmt.Sprintf("%s%%", from))))
+	templ_7745c5c3_CSSBuilder.WriteString(string(templ.SanitizeCSS(`--mana-to-width`, fmt.Sprintf("%s%%", to))))
+	templ_7745c5c3_CSSID := templ.CSSID(`manaAnimation`, templ_7745c5c3_CSSBuilder.String())
+	return templ.ComponentCSSClass{
+		ID:    templ_7745c5c3_CSSID,
+		Class: templ.SafeCSS(`.` + templ_7745c5c3_CSSID + `{` + templ_7745c5c3_CSSBuilder.String() + `}`),
+	}
+}
+
+func baseStats() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var12 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var12 == nil {
+			templ_7745c5c3_Var12 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 19)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func hp() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var13 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var13 == nil {
+			templ_7745c5c3_Var13 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 20)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func mana() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var14 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var14 == nil {
+			templ_7745c5c3_Var14 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 21)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
diff --git a/view/layout/base.templ b/view/layout/base.templ
new file mode 100644
index 0000000..05a10fc
--- /dev/null
+++ b/view/layout/base.templ
@@ -0,0 +1,39 @@
+package layout
+
+templ Base(hx bool){
+
+if hx == false {
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+    <head>
+        <meta charset="UTF-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+        <link rel="stylesheet" href="/stylesheets/tallytome.css" />
+
+        <script src="/scripts/htmx.js"></script>
+        <script src="/scripts/alpine.js" defer></script>
+
+        <title>Tallytome</title>
+    </head>
+    <body>
+
+        <header>
+            @header()
+        </header>
+
+        <main>
+            { children... }
+        </main>
+        
+        // <footer> 
+        //     @footer()
+        // </footer>
+        
+    </body>
+</html>
+}else{
+   { children... }
+}
+
+}
\ No newline at end of file
diff --git a/view/layout/base_templ.go b/view/layout/base_templ.go
new file mode 100644
index 0000000..c55a746
--- /dev/null
+++ b/view/layout/base_templ.go
@@ -0,0 +1,58 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.598
+package layout
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+func Base(hx bool) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if hx == false {
+			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = header().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 2)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 3)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
diff --git a/view/layout/footer.templ b/view/layout/footer.templ
new file mode 100644
index 0000000..41e9718
--- /dev/null
+++ b/view/layout/footer.templ
@@ -0,0 +1,7 @@
+package layout
+
+templ footer(){
+
+    <p>Feet</p>
+
+}
\ No newline at end of file
diff --git a/view/layout/footer_templ.go b/view/layout/footer_templ.go
new file mode 100644
index 0000000..9d6fd89
--- /dev/null
+++ b/view/layout/footer_templ.go
@@ -0,0 +1,35 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.598
+package layout
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+func footer() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
diff --git a/view/layout/header.templ b/view/layout/header.templ
new file mode 100644
index 0000000..12c7bc9
--- /dev/null
+++ b/view/layout/header.templ
@@ -0,0 +1,29 @@
+package layout
+
+templ header(){
+
+    <nav class="container">
+        <ul class="brand">
+            <li>
+                <a class="" href="https://itsigo.de">
+                <img href="/" src="/tally-logo-no-bg.png" height="50" />
+                </a>
+            </li>
+        </ul>
+        <ul hx-target="main">
+            <li>
+                <a class="contrast" 
+                    hx-get="/"
+                    hx-push-url="true"
+                >Home</a>
+            </li>
+            <li>
+                <a class="contrast" 
+                    hx-get="/hp-mana-tracker"
+                    hx-push-url="true"
+                >TM-Tracker</a>
+            </li>
+        </ul>
+    </nav>
+
+}
\ No newline at end of file
diff --git a/view/layout/header_templ.go b/view/layout/header_templ.go
new file mode 100644
index 0000000..6db5e21
--- /dev/null
+++ b/view/layout/header_templ.go
@@ -0,0 +1,35 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.598
+package layout
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+func header() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}