/* Self-hosted Press Start 2P font */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/pressstart2p-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/pressstart2p-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tailwind v3 preflight (via @unocss/reset/tailwind-compat) */
/*
Please read: https://github.com/unocss/unocss/blob/main/packages-presets/reset/tailwind-compat.md
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
2. [UnoCSS]: allow to override the default border color with css var `--un-default-border-color`
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: var(--un-default-border-color, #e5e7eb); /* 2 */
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

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

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  /* Will affect the button style of most component libraries, so disable it */
  /* https://github.com/unocss/unocss/issues/2127 */
  /* background-color: transparent; !* 2 *! */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-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.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/* UnoCSS utilities */
/* layer: preflights */
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
/* layer: shortcuts */
.container{width:100%;}
.btn-pixel-sm{min-height:44px;min-width:44px;display:inline-flex;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;gap:0.25rem;border-width:2px;--un-border-opacity:1;border-color:rgb(var(--palette-surface-2) / var(--un-border-opacity));border-radius:0;--un-bg-opacity:1;background-color:rgb(var(--palette-surface-0) / var(--un-bg-opacity));padding-left:0.625rem;padding-right:0.625rem;padding-top:0.375rem;padding-bottom:0.375rem;font-size:10px;--un-text-opacity:1;color:rgb(var(--palette-text) / var(--un-text-opacity));font-family:"Press Start 2P","Noto Sans CJK SC","Noto Sans CJK TC","Noto Sans CJK JP","Source Han Sans SC","Microsoft YaHei","Yu Gothic","Hiragino Sans GB","PingFang SC",sans-serif;--un-shadow:2px 2px 0px 0px var(--un-shadow-color, var(--shadow-color));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.input-pixel{width:100%;border-width:2px;--un-border-opacity:1;border-color:rgb(var(--palette-surface-2) / var(--un-border-opacity));border-radius:0;--un-bg-opacity:1;background-color:rgb(var(--palette-surface-0) / var(--un-bg-opacity));padding:0.625rem;font-size:0.75rem;line-height:1rem;--un-text-opacity:1;color:rgb(var(--palette-text) / var(--un-text-opacity));font-family:"Press Start 2P","Noto Sans CJK SC","Noto Sans CJK TC","Noto Sans CJK JP","Source Han Sans SC","Microsoft YaHei","Yu Gothic","Hiragino Sans GB","PingFang SC",sans-serif;outline:2px solid transparent;outline-offset:2px;}
.badge-pixel{display:inline-flex;align-items:center;border-width:1px;--un-border-opacity:1;border-color:rgb(var(--palette-surface-1) / var(--un-border-opacity));border-radius:0;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.125rem;padding-bottom:0.125rem;font-size:9px;letter-spacing:0.05em;font-family:"Press Start 2P","Noto Sans CJK SC","Noto Sans CJK TC","Noto Sans CJK JP","Source Han Sans SC","Microsoft YaHei","Yu Gothic","Hiragino Sans GB","PingFang SC",sans-serif;text-transform:uppercase;}
.btn-pixel{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;gap:0.5rem;border-width:2px;--un-border-opacity:1;border-color:rgb(var(--palette-surface-2) / var(--un-border-opacity));border-radius:0;--un-bg-opacity:1;background-color:rgb(var(--palette-surface-0) / var(--un-bg-opacity));padding-left:0.875rem;padding-right:0.875rem;padding-top:0.5rem;padding-bottom:0.5rem;font-size:0.75rem;line-height:1rem;--un-text-opacity:1;color:rgb(var(--palette-text) / var(--un-text-opacity));font-family:"Press Start 2P","Noto Sans CJK SC","Noto Sans CJK TC","Noto Sans CJK JP","Source Han Sans SC","Microsoft YaHei","Yu Gothic","Hiragino Sans GB","PingFang SC",sans-serif;--un-shadow:3px 3px 0px 0px var(--un-shadow-color, var(--shadow-color));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.btn-pixel-green{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;gap:0.5rem;border-width:2px;--un-border-opacity:1;border-color:rgb(var(--palette-surface-2) / var(--un-border-opacity));border-radius:0;--un-bg-opacity:1;background-color:rgb(var(--palette-green) / var(--un-bg-opacity));padding-left:0.875rem;padding-right:0.875rem;padding-top:0.5rem;padding-bottom:0.5rem;font-size:0.75rem;line-height:1rem;color:var(--on-accent);font-weight:700;font-family:"Press Start 2P","Noto Sans CJK SC","Noto Sans CJK TC","Noto Sans CJK JP","Source Han Sans SC","Microsoft YaHei","Yu Gothic","Hiragino Sans GB","PingFang SC",sans-serif;--un-shadow:3px 3px 0px 0px var(--un-shadow-color, var(--shadow-color));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.btn-pixel-peach{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;gap:0.5rem;border-width:2px;--un-border-opacity:1;border-color:rgb(var(--palette-surface-2) / var(--un-border-opacity));border-radius:0;--un-bg-opacity:1;background-color:rgb(var(--palette-peach) / var(--un-bg-opacity));padding-left:0.875rem;padding-right:0.875rem;padding-top:0.5rem;padding-bottom:0.5rem;font-size:0.75rem;line-height:1rem;color:var(--on-accent);font-weight:700;font-family:"Press Start 2P","Noto Sans CJK SC","Noto Sans CJK TC","Noto Sans CJK JP","Source Han Sans SC","Microsoft YaHei","Yu Gothic","Hiragino Sans GB","PingFang SC",sans-serif;--un-shadow:3px 3px 0px 0px var(--un-shadow-color, var(--shadow-color));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.btn-pixel-pink{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;gap:0.5rem;border-width:2px;--un-border-opacity:1;border-color:rgb(var(--palette-surface-2) / var(--un-border-opacity));border-radius:0;--un-bg-opacity:1;background-color:rgb(var(--palette-pink) / var(--un-bg-opacity));padding-left:0.875rem;padding-right:0.875rem;padding-top:0.5rem;padding-bottom:0.5rem;font-size:0.75rem;line-height:1rem;color:var(--on-accent);font-weight:700;font-family:"Press Start 2P","Noto Sans CJK SC","Noto Sans CJK TC","Noto Sans CJK JP","Source Han Sans SC","Microsoft YaHei","Yu Gothic","Hiragino Sans GB","PingFang SC",sans-serif;--un-shadow:3px 3px 0px 0px var(--un-shadow-color, var(--shadow-color));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.btn-pixel-primary{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;gap:0.5rem;border-width:2px;--un-border-opacity:1;border-color:rgb(var(--palette-surface-2) / var(--un-border-opacity));border-radius:0;--un-bg-opacity:1;background-color:rgb(var(--palette-lavender) / var(--un-bg-opacity));padding-left:0.875rem;padding-right:0.875rem;padding-top:0.5rem;padding-bottom:0.5rem;font-size:0.75rem;line-height:1rem;color:var(--on-accent);font-weight:700;font-family:"Press Start 2P","Noto Sans CJK SC","Noto Sans CJK TC","Noto Sans CJK JP","Source Han Sans SC","Microsoft YaHei","Yu Gothic","Hiragino Sans GB","PingFang SC",sans-serif;--un-shadow:3px 3px 0px 0px var(--un-shadow-color, var(--shadow-color));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.btn-pixel:active{--un-translate-x:0.125rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-translate-y:0.125rem;--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.btn-pixel-green:active{--un-translate-x:0.125rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-translate-y:0.125rem;--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.btn-pixel-peach:active{--un-translate-x:0.125rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-translate-y:0.125rem;--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.btn-pixel-pink:active{--un-translate-x:0.125rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-translate-y:0.125rem;--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.btn-pixel-primary:active{--un-translate-x:0.125rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-translate-y:0.125rem;--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.btn-pixel-sm:active{--un-translate-x:0.125rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-translate-y:0.125rem;--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.card-pixel{border-width:2px;--un-border-opacity:1;border-color:rgb(var(--palette-surface-2) / var(--un-border-opacity));border-radius:0;--un-bg-opacity:1;background-color:rgb(var(--palette-mantle) / var(--un-bg-opacity));padding:1rem;--un-shadow:3px 3px 0px 0px var(--un-shadow-color, var(--shadow-color));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.card-pixel-sm{border-width:2px;--un-border-opacity:1;border-color:rgb(var(--palette-surface-2) / var(--un-border-opacity));border-radius:0;--un-bg-opacity:1;background-color:rgb(var(--palette-mantle) / var(--un-bg-opacity));padding:0.75rem;--un-shadow:2px 2px 0px 0px var(--un-shadow-color, var(--shadow-color));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.btn-pixel:hover{--un-border-opacity:1;border-color:rgb(var(--palette-lavender) / var(--un-border-opacity));}
.btn-pixel-green:hover{--un-border-opacity:1;border-color:rgb(var(--palette-lavender) / var(--un-border-opacity));}
.btn-pixel-peach:hover{--un-border-opacity:1;border-color:rgb(var(--palette-lavender) / var(--un-border-opacity));}
.btn-pixel-pink:hover{--un-border-opacity:1;border-color:rgb(var(--palette-lavender) / var(--un-border-opacity));}
.btn-pixel-primary:hover{--un-border-opacity:1;border-color:rgb(var(--palette-lavender) / var(--un-border-opacity));}
.btn-pixel-sm:hover{--un-border-opacity:1;border-color:rgb(var(--palette-lavender) / var(--un-border-opacity));}
.input-pixel::placeholder{--un-text-opacity:1;color:rgb(var(--palette-subtext-0) / var(--un-text-opacity));}
.input-pixel:focus{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgb(var(--palette-lavender) / var(--un-ring-opacity));}
@media (min-width: 640px){
.container{max-width:640px;}
.btn-pixel-sm{padding-left:0.5rem;padding-right:0.5rem;padding-top:0.25rem;padding-bottom:0.25rem;}
}
@media (min-width: 768px){
.container{max-width:768px;}
}
@media (min-width: 1024px){
.container{max-width:1024px;}
}
@media (min-width: 1280px){
.container{max-width:1280px;}
}
@media (min-width: 1536px){
.container{max-width:1536px;}
}
/* layer: default */
.\[contain-intrinsic-size\:auto_48px\]{contain-intrinsic-size:auto 48px;}
.\[contain-intrinsic-size\:auto_54px\]{contain-intrinsic-size:auto 54px;}
.\[content-visibility\:auto\]{content-visibility:auto;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal;}
.pointer-events-auto{pointer-events:auto;}
.pointer-events-none{pointer-events:none;}
.visible{visibility:visible;}
.absolute{position:absolute;}
.fixed{position:fixed;}
.relative{position:relative;}
.sticky{position:sticky;}
.static{position:static;}
.inset-0{inset:0;}
.-top-2\.5{top:-0.625rem;}
.left-2{left:0.5rem;}
.right-2{right:0.5rem;}
.right-4{right:1rem;}
.top-0{top:0;}
.top-2{top:0.5rem;}
.top-4{top:1rem;}
.z-20{z-index:20;}
.z-50{z-index:50;}
.grid{display:grid;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.mx-auto{margin-left:auto;margin-right:auto;}
.my{margin-top:1rem;margin-bottom:1rem;}
.my-3{margin-top:0.75rem;margin-bottom:0.75rem;}
.mb-0\.5{margin-bottom:0.125rem;}
.mb-1{margin-bottom:0.25rem;}
.mb-1\.5{margin-bottom:0.375rem;}
.mb-2{margin-bottom:0.5rem;}
.mb-3{margin-bottom:0.75rem;}
.mb-4{margin-bottom:1rem;}
.mb-6{margin-bottom:1.5rem;}
.me{margin-inline-end:1rem;}
.ml-1{margin-left:0.25rem;}
.ml-2{margin-left:0.5rem;}
.ml-3{margin-left:0.75rem;}
.mt-0\.5{margin-top:0.125rem;}
.mt-1{margin-top:0.25rem;}
.mt-2{margin-top:0.5rem;}
.mt-3{margin-top:0.75rem;}
.mt-4{margin-top:1rem;}
.mt-6{margin-top:1.5rem;}
.inline{display:inline;}
.block{display:block;}
.inline-block{display:inline-block;}
.contents{display:contents;}
.hidden{display:none;}
.h-10{height:2.5rem;}
.h-11{height:2.75rem;}
.h-12{height:3rem;}
.h-20{height:5rem;}
.h-3{height:0.75rem;}
.h-3\.5{height:0.875rem;}
.h-4{height:1rem;}
.h-44{height:11rem;}
.h-5{height:1.25rem;}
.h-6{height:1.5rem;}
.h-7{height:1.75rem;}
.h-8{height:2rem;}
.h-9{height:2.25rem;}
.h-full{height:100%;}
.max-h-80{max-height:20rem;}
.max-h-96{max-height:24rem;}
.max-w-\[110px\]{max-width:110px;}
.max-w-\[200px\]{max-width:200px;}
.max-w-5xl{max-width:64rem;}
.max-w-md{max-width:28rem;}
.max-w-sm{max-width:24rem;}
.max-w-xs{max-width:20rem;}
.min-h-\[140px\]{min-height:140px;}
.min-h-\[32px\]{min-height:32px;}
.min-h-\[44px\]{min-height:44px;}
.min-h-screen{min-height:100vh;}
.min-w-\[44px\]{min-width:44px;}
.min-w-0{min-width:0;}
.w-10{width:2.5rem;}
.w-11{width:2.75rem;}
.w-12{width:3rem;}
.w-20{width:5rem;}
.w-3{width:0.75rem;}
.w-3\.5{width:0.875rem;}
.w-32{width:8rem;}
.w-4{width:1rem;}
.w-44{width:11rem;}
.w-5{width:1.25rem;}
.w-6{width:1.5rem;}
.w-7{width:1.75rem;}
.w-8{width:2rem;}
.w-9{width:2.25rem;}
.w-full{width:100%;}
.flex{display:flex;}
.inline-flex{display:inline-flex;}
.flex-1{flex:1 1 0%;}
.flex-shrink-0,
.shrink-0{flex-shrink:0;}
.flex-col{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.table{display:table;}
.hover\:translate-y-\[-2px\]:hover{--un-translate-y:-2px;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.cursor-pointer{cursor:pointer;}
.select-all{-webkit-user-select:all;user-select:all;}
.list-disc{list-style-type:disc;}
.items-start{align-items:flex-start;}
.items-end{align-items:flex-end;}
.items-center{align-items:center;}
.items-baseline{align-items:baseline;}
.self-start{align-self:flex-start;}
.self-end{align-self:flex-end;}
.justify-end{justify-content:flex-end;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}
.justify-around{justify-content:space-around;}
.gap-1{gap:0.25rem;}
.gap-1\.5{gap:0.375rem;}
.gap-2{gap:0.5rem;}
.gap-2\.5{gap:0.625rem;}
.gap-3{gap:0.75rem;}
.gap-4{gap:1rem;}
.gap-6{gap:1.5rem;}
.gap-x-8{column-gap:2rem;}
.gap-y-3{row-gap:0.75rem;}
.space-x-2\.5>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(0.625rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(0.625rem * var(--un-space-x-reverse));}
.space-x-2>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(0.5rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(0.5rem * var(--un-space-x-reverse));}
.space-x-3\.5>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(0.875rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(0.875rem * var(--un-space-x-reverse));}
.space-x-3>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(0.75rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(0.75rem * var(--un-space-x-reverse));}
.space-x-5>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1.25rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(1.25rem * var(--un-space-x-reverse));}
.space-y-1\.5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.375rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.375rem * var(--un-space-y-reverse));}
.space-y-1>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.25rem * var(--un-space-y-reverse));}
.space-y-2\.5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.625rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.625rem * var(--un-space-y-reverse));}
.space-y-2>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.5rem * var(--un-space-y-reverse));}
.space-y-3>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.75rem * var(--un-space-y-reverse));}
.space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1rem * var(--un-space-y-reverse));}
.space-y-5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.25rem * var(--un-space-y-reverse));}
.space-y-6>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.5rem * var(--un-space-y-reverse));}
.space-y-8>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(2rem * var(--un-space-y-reverse));}
.divide-y-2>:not([hidden])~:not([hidden]){--un-divide-y-reverse:0;border-top-width:calc(2px * calc(1 - var(--un-divide-y-reverse)));border-bottom-width:calc(2px * var(--un-divide-y-reverse));}
.divide-surface-1>:not([hidden])~:not([hidden]){--un-divide-opacity:1;border-color:rgb(var(--palette-surface-1) / var(--un-divide-opacity));}
.divide-surface-2>:not([hidden])~:not([hidden]){--un-divide-opacity:1;border-color:rgb(var(--palette-surface-2) / var(--un-divide-opacity));}
.overflow-hidden{overflow:hidden;}
.overflow-x-auto{overflow-x:auto;}
.overflow-y-auto{overflow-y:auto;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.whitespace-nowrap{white-space:nowrap;}
.whitespace-pre-line{white-space:pre-line;}
.break-words{overflow-wrap:break-word;}
.break-all{word-break:break-all;}
.border{border-width:1px;}
.border-2{border-width:2px;}
.border-4{border-width:4px;}
.border-b{border-bottom-width:1px;}
.border-b-2{border-bottom-width:2px;}
.border-t{border-top-width:1px;}
.border-t-2{border-top-width:2px;}
.border-blue{--un-border-opacity:1;border-color:rgb(var(--palette-blue) / var(--un-border-opacity));}
.border-green{--un-border-opacity:1;border-color:rgb(var(--palette-green) / var(--un-border-opacity));}
.border-lavender{--un-border-opacity:1;border-color:rgb(var(--palette-lavender) / var(--un-border-opacity));}
.border-peach{--un-border-opacity:1;border-color:rgb(var(--palette-peach) / var(--un-border-opacity));}
.border-pink{--un-border-opacity:1;border-color:rgb(var(--palette-pink) / var(--un-border-opacity));}
.border-red{--un-border-opacity:1;border-color:rgb(var(--palette-red) / var(--un-border-opacity));}
.border-surface-0{--un-border-opacity:1;border-color:rgb(var(--palette-surface-0) / var(--un-border-opacity));}
.border-surface-1{--un-border-opacity:1;border-color:rgb(var(--palette-surface-1) / var(--un-border-opacity));}
.border-surface-2{--un-border-opacity:1;border-color:rgb(var(--palette-surface-2) / var(--un-border-opacity));}
.border-text{--un-border-opacity:1;border-color:rgb(var(--palette-text) / var(--un-border-opacity));}
.border-yellow{--un-border-opacity:1;border-color:rgb(var(--palette-yellow) / var(--un-border-opacity));}
.hover\:border-lavender:hover{--un-border-opacity:1;border-color:rgb(var(--palette-lavender) / var(--un-border-opacity));}
.rounded{border-radius:0.25rem;}
.rounded-full{border-radius:9999px;}
.border-dashed{border-style:dashed;}
.bg-blue{--un-bg-opacity:1;background-color:rgb(var(--palette-blue) / var(--un-bg-opacity));}
.bg-canvas{--un-bg-opacity:1;background-color:rgb(var(--palette-base) / var(--un-bg-opacity));}
.bg-crust{--un-bg-opacity:1;background-color:rgb(var(--palette-crust) / var(--un-bg-opacity));}
.bg-flamingo{--un-bg-opacity:1;background-color:rgb(var(--palette-flamingo) / var(--un-bg-opacity));}
.bg-green{--un-bg-opacity:1;background-color:rgb(var(--palette-green) / var(--un-bg-opacity));}
.bg-green\/10{background-color:rgb(var(--palette-green) / 0.1);}
.bg-green\/20{background-color:rgb(var(--palette-green) / 0.2);}
.bg-lavender{--un-bg-opacity:1;background-color:rgb(var(--palette-lavender) / var(--un-bg-opacity));}
.bg-lavender\/10{background-color:rgb(var(--palette-lavender) / 0.1);}
.bg-lavender\/20{background-color:rgb(var(--palette-lavender) / 0.2);}
.bg-mantle{--un-bg-opacity:1;background-color:rgb(var(--palette-mantle) / var(--un-bg-opacity));}
.bg-maroon{--un-bg-opacity:1;background-color:rgb(var(--palette-maroon) / var(--un-bg-opacity));}
.bg-mauve{--un-bg-opacity:1;background-color:rgb(var(--palette-mauve) / var(--un-bg-opacity));}
.bg-peach{--un-bg-opacity:1;background-color:rgb(var(--palette-peach) / var(--un-bg-opacity));}
.bg-peach\/15{background-color:rgb(var(--palette-peach) / 0.15);}
.bg-peach\/20{background-color:rgb(var(--palette-peach) / 0.2);}
.bg-pink{--un-bg-opacity:1;background-color:rgb(var(--palette-pink) / var(--un-bg-opacity));}
.bg-red{--un-bg-opacity:1;background-color:rgb(var(--palette-red) / var(--un-bg-opacity));}
.bg-red\/10{background-color:rgb(var(--palette-red) / 0.1);}
.bg-rosewater{--un-bg-opacity:1;background-color:rgb(var(--palette-rosewater) / var(--un-bg-opacity));}
.bg-sapphire{--un-bg-opacity:1;background-color:rgb(var(--palette-sapphire) / var(--un-bg-opacity));}
.bg-sky{--un-bg-opacity:1;background-color:rgb(var(--palette-sky) / var(--un-bg-opacity));}
.bg-surface-0{--un-bg-opacity:1;background-color:rgb(var(--palette-surface-0) / var(--un-bg-opacity));}
.bg-surface-0\/40{background-color:rgb(var(--palette-surface-0) / 0.4);}
.bg-surface-0\/50{background-color:rgb(var(--palette-surface-0) / 0.5);}
.bg-surface-1{--un-bg-opacity:1;background-color:rgb(var(--palette-surface-1) / var(--un-bg-opacity));}
.bg-surface-2{--un-bg-opacity:1;background-color:rgb(var(--palette-surface-2) / var(--un-bg-opacity));}
.bg-teal{--un-bg-opacity:1;background-color:rgb(var(--palette-teal) / var(--un-bg-opacity));}
.bg-text{--un-bg-opacity:1;background-color:rgb(var(--palette-text) / var(--un-bg-opacity));}
.bg-yellow{--un-bg-opacity:1;background-color:rgb(var(--palette-yellow) / var(--un-bg-opacity));}
.bg-yellow\/15{background-color:rgb(var(--palette-yellow) / 0.15);}
.hover\:bg-maroon:hover{--un-bg-opacity:1;background-color:rgb(var(--palette-maroon) / var(--un-bg-opacity));}
.hover\:bg-peach\/15:hover{background-color:rgb(var(--palette-peach) / 0.15);}
.hover\:bg-surface-0:hover{--un-bg-opacity:1;background-color:rgb(var(--palette-surface-0) / var(--un-bg-opacity));}
.hover\:bg-surface-1:hover{--un-bg-opacity:1;background-color:rgb(var(--palette-surface-1) / var(--un-bg-opacity));}
.object-cover{object-fit:cover;}
.p-1{padding:0.25rem;}
.p-1\.5{padding:0.375rem;}
.p-2{padding:0.5rem;}
.p-2\.5{padding:0.625rem;}
.p-3{padding:0.75rem;}
.p-3\.5{padding:0.875rem;}
.p-4{padding:1rem;}
.p-5{padding:1.25rem;}
.p-6{padding:1.5rem;}
.p\[\'id\'\]{padding:'id';}
.px-1{padding-left:0.25rem;padding-right:0.25rem;}
.px-1\.5{padding-left:0.375rem;padding-right:0.375rem;}
.px-2{padding-left:0.5rem;padding-right:0.5rem;}
.px-3{padding-left:0.75rem;padding-right:0.75rem;}
.px-4{padding-left:1rem;padding-right:1rem;}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem;}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.py-12{padding-top:3rem;padding-bottom:3rem;}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}
.py-8{padding-top:2rem;padding-bottom:2rem;}
.pb-1{padding-bottom:0.25rem;}
.pb-1\.5{padding-bottom:0.375rem;}
.pb-2{padding-bottom:0.5rem;}
.pb-2\.5{padding-bottom:0.625rem;}
.pb-24{padding-bottom:6rem;}
.pb-3{padding-bottom:0.75rem;}
.pb-4{padding-bottom:1rem;}
.pe{padding-inline-end:1rem;}
.pl-4{padding-left:1rem;}
.pt-1{padding-top:0.25rem;}
.pt-1\.5{padding-top:0.375rem;}
.pt-2{padding-top:0.5rem;}
.pt-4{padding-top:1rem;}
.pt-6{padding-top:1.5rem;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.align-middle{vertical-align:middle;}
.text-\[10px\]{font-size:10px;}
.text-\[11px\]{font-size:11px;}
.text-\[8px\]{font-size:8px;}
.text-\[9px\]{font-size:9px;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.text-base{font-size:1rem;line-height:1.5rem;}
.text-sm{font-size:0.875rem;line-height:1.25rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.text-xs{font-size:0.75rem;line-height:1rem;}
.text-blue{--un-text-opacity:1;color:rgb(var(--palette-blue) / var(--un-text-opacity));}
.text-green{--un-text-opacity:1;color:rgb(var(--palette-green) / var(--un-text-opacity));}
.text-lavender{--un-text-opacity:1;color:rgb(var(--palette-lavender) / var(--un-text-opacity));}
.text-on-accent{color:var(--on-accent);}
.text-overlay-0{--un-text-opacity:1;color:rgb(var(--palette-overlay-0) / var(--un-text-opacity));}
.text-overlay-1{--un-text-opacity:1;color:rgb(var(--palette-overlay-1) / var(--un-text-opacity));}
.text-peach{--un-text-opacity:1;color:rgb(var(--palette-peach) / var(--un-text-opacity));}
.text-pink{--un-text-opacity:1;color:rgb(var(--palette-pink) / var(--un-text-opacity));}
.text-red{--un-text-opacity:1;color:rgb(var(--palette-red) / var(--un-text-opacity));}
.text-subtext-0{--un-text-opacity:1;color:rgb(var(--palette-subtext-0) / var(--un-text-opacity));}
.text-subtext-1{--un-text-opacity:1;color:rgb(var(--palette-subtext-1) / var(--un-text-opacity));}
.text-text{--un-text-opacity:1;color:rgb(var(--palette-text) / var(--un-text-opacity));}
.text-yellow{--un-text-opacity:1;color:rgb(var(--palette-yellow) / var(--un-text-opacity));}
.font-bold{font-weight:700;}
.leading-4{line-height:1rem;}
.leading-relaxed{line-height:1.625;}
.tracking-tight{letter-spacing:-0.025em;}
.tracking-wide{letter-spacing:0.025em;}
.tracking-wider{letter-spacing:0.05em;}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
.font-pixel{font-family:"Press Start 2P","Noto Sans CJK SC","Noto Sans CJK TC","Noto Sans CJK JP","Source Han Sans SC","Microsoft YaHei","Yu Gothic","Hiragino Sans GB","PingFang SC",sans-serif;}
.uppercase{text-transform:uppercase;}
.line-through{text-decoration-line:line-through;}
.underline{text-decoration-line:underline;}
.hover\:underline:hover{text-decoration-line:underline;}
.underline-offset-4{text-underline-offset:4px;}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}
.opacity-0{opacity:0;}
.opacity-100,
.group:focus-within .group-focus-within\:opacity-100,
.group:hover .group-hover\:opacity-100,
.group:focus-visible .group-focus-visible\:opacity-100{opacity:1;}
.opacity-40{opacity:0.4;}
.opacity-50{opacity:0.5;}
.shadow-pixel{--un-shadow:3px 3px 0px 0px var(--un-shadow-color, var(--shadow-color));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.shadow-pixel-sm{--un-shadow:2px 2px 0px 0px var(--un-shadow-color, var(--shadow-color));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.outline-none{outline:2px solid transparent;outline-offset:2px;}
.ring-2{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.ring-peach{--un-ring-opacity:1;--un-ring-color:rgb(var(--palette-peach) / var(--un-ring-opacity));}
.invert{--un-invert:invert(1);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
.filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.duration-300{transition-duration:300ms;}
.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1);}
@media (min-width: 640px){
.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.sm\:max-w-xs{max-width:20rem;}
.sm\:w-32{width:8rem;}
.sm\:w-36{width:9rem;}
.sm\:w-48{width:12rem;}
.sm\:w-auto{width:auto;}
.sm\:flex-row{flex-direction:row;}
.sm\:flex-wrap{flex-wrap:wrap;}
.sm\:items-end{align-items:flex-end;}
.sm\:items-center{align-items:center;}
.sm\:self-auto{align-self:auto;}
.sm\:justify-end{justify-content:flex-end;}
.sm\:justify-between{justify-content:space-between;}
.sm\:p-5{padding:1.25rem;}
.sm\:text-right{text-align:right;}
.sm\:text-2xl{font-size:1.5rem;line-height:2rem;}
.sm\:text-base{font-size:1rem;line-height:1.5rem;}
.sm\:text-sm{font-size:0.875rem;line-height:1.25rem;}
.sm\:text-xs{font-size:0.75rem;line-height:1rem;}
}
@media (min-width: 768px){
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.md\:hidden{display:none;}
.md\:flex-row{flex-direction:row;}
.md\:p-6{padding:1.5rem;}
.md\:pb-8{padding-bottom:2rem;}
.md\:text-base{font-size:1rem;line-height:1.5rem;}
}
@media (min-width: 1024px){
.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}
.lg\:flex-row{flex-direction:row;}
.lg\:items-center{align-items:center;}
.lg\:text-xs{font-size:0.75rem;line-height:1rem;}
}
@media (min-width: 1280px){
.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
/* Exact palette primitives; soft fills and readable net shades derive only from their own palette. */
:root { --color-rosewater: rgb(var(--palette-rosewater));
  --color-flamingo: rgb(var(--palette-flamingo));
  --color-pink: rgb(var(--palette-pink));
  --color-mauve: rgb(var(--palette-mauve));
  --color-red: rgb(var(--palette-red));
  --color-maroon: rgb(var(--palette-maroon));
  --color-peach: rgb(var(--palette-peach));
  --color-yellow: rgb(var(--palette-yellow));
  --color-green: rgb(var(--palette-green));
  --color-teal: rgb(var(--palette-teal));
  --color-sky: rgb(var(--palette-sky));
  --color-sapphire: rgb(var(--palette-sapphire));
  --color-blue: rgb(var(--palette-blue));
  --color-lavender: rgb(var(--palette-lavender));
  --color-text: rgb(var(--palette-text));
  --color-subtext-1: rgb(var(--palette-subtext-1));
  --color-subtext-0: rgb(var(--palette-subtext-0));
  --color-overlay-2: rgb(var(--palette-overlay-2));
  --color-overlay-1: rgb(var(--palette-overlay-1));
  --color-overlay-0: rgb(var(--palette-overlay-0));
  --color-surface-2: rgb(var(--palette-surface-2));
  --color-surface-1: rgb(var(--palette-surface-1));
  --color-surface-0: rgb(var(--palette-surface-0));
  --color-base: rgb(var(--palette-base));
  --color-mantle: rgb(var(--palette-mantle));
  --color-crust: rgb(var(--palette-crust)); --on-accent: var(--color-text); }
:root {
  --palette-rosewater: 220 138 120;
  --palette-flamingo: 221 120 120;
  --palette-pink: 234 118 203;
  --palette-mauve: 136 57 239;
  --palette-red: 210 15 57;
  --palette-maroon: 230 69 83;
  --palette-peach: 254 100 11;
  --palette-yellow: 223 142 29;
  --palette-green: 64 160 43;
  --palette-teal: 23 146 153;
  --palette-sky: 4 165 229;
  --palette-sapphire: 32 159 181;
  --palette-blue: 30 102 245;
  --palette-lavender: 114 135 253;
  --palette-text: 76 79 105;
  --palette-subtext-1: 92 95 119;
  --palette-subtext-0: 108 111 133;
  --palette-overlay-2: 124 127 147;
  --palette-overlay-1: 140 143 161;
  --palette-overlay-0: 156 160 176;
  --palette-surface-2: 172 176 190;
  --palette-surface-1: 188 192 204;
  --palette-surface-0: 204 208 218;
  --palette-base: 239 241 245;
  --palette-mantle: 230 233 239;
  --palette-crust: 220 224 232;
  --foreground-rosewater: var(--color-text);
  --foreground-flamingo: var(--color-text);
  --foreground-pink: var(--color-text);
  --foreground-mauve: var(--color-text);
  --foreground-red: var(--color-text);
  --foreground-maroon: var(--color-text);
  --foreground-peach: var(--color-text);
  --foreground-yellow: var(--color-text);
  --foreground-green: var(--color-text);
  --foreground-teal: var(--color-text);
  --foreground-sky: var(--color-text);
  --foreground-sapphire: var(--color-text);
  --foreground-blue: var(--color-text);
  --foreground-lavender: var(--color-text);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-text);
  --foreground-subtext-1: var(--color-text);
  --foreground-overlay-1: var(--color-text);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 35%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 35%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 35%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 30%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 25%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 34%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 35%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 35%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 35%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 35%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 35%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 35%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 32%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 35%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: color-mix(in srgb, var(--color-green) 51%, var(--color-text));
  --net-red: var(--color-red);
  --focus-color: var(--color-blue); --outline: var(--color-text); --shadow-color: var(--color-text);
  --surface-1: var(--color-surface-0); --surface-2: var(--color-surface-0); color-scheme: light;
}
:root.dark:not([data-scheme]) {
  --palette-rosewater: 245 224 220;
  --palette-flamingo: 242 205 205;
  --palette-pink: 245 194 231;
  --palette-mauve: 203 166 247;
  --palette-red: 243 139 168;
  --palette-maroon: 235 160 172;
  --palette-peach: 250 179 135;
  --palette-yellow: 249 226 175;
  --palette-green: 166 227 161;
  --palette-teal: 148 226 213;
  --palette-sky: 137 220 235;
  --palette-sapphire: 116 199 236;
  --palette-blue: 137 180 250;
  --palette-lavender: 180 190 254;
  --palette-text: 205 214 244;
  --palette-subtext-1: 186 194 222;
  --palette-subtext-0: 166 173 200;
  --palette-overlay-2: 147 153 178;
  --palette-overlay-1: 127 132 156;
  --palette-overlay-0: 108 112 134;
  --palette-surface-2: 88 91 112;
  --palette-surface-1: 69 71 90;
  --palette-surface-0: 49 50 68;
  --palette-base: 30 30 46;
  --palette-mantle: 24 24 37;
  --palette-crust: 17 17 27;
  --foreground-rosewater: var(--color-rosewater);
  --foreground-flamingo: var(--color-flamingo);
  --foreground-pink: var(--color-pink);
  --foreground-mauve: var(--color-text);
  --foreground-red: var(--color-text);
  --foreground-maroon: var(--color-text);
  --foreground-peach: var(--color-peach);
  --foreground-yellow: var(--color-yellow);
  --foreground-green: var(--color-green);
  --foreground-teal: var(--color-teal);
  --foreground-sky: var(--color-sky);
  --foreground-sapphire: var(--color-sapphire);
  --foreground-blue: var(--color-text);
  --foreground-lavender: var(--color-lavender);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-subtext-1);
  --foreground-subtext-1: var(--color-subtext-1);
  --foreground-overlay-1: var(--color-text);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 25%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 25%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 25%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 25%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 25%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 25%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 25%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 25%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 25%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 25%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 25%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 25%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 25%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 25%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: var(--color-green);
  --net-red: var(--color-red);
  --focus-color: var(--color-lavender); --outline: var(--color-overlay-2); --shadow-color: var(--color-crust);
  --surface-1: var(--color-surface-1); --surface-2: var(--color-surface-2); color-scheme: dark;
}
:root[data-scheme="catppuccin-latte"] {
  --palette-rosewater: 220 138 120;
  --palette-flamingo: 221 120 120;
  --palette-pink: 234 118 203;
  --palette-mauve: 136 57 239;
  --palette-red: 210 15 57;
  --palette-maroon: 230 69 83;
  --palette-peach: 254 100 11;
  --palette-yellow: 223 142 29;
  --palette-green: 64 160 43;
  --palette-teal: 23 146 153;
  --palette-sky: 4 165 229;
  --palette-sapphire: 32 159 181;
  --palette-blue: 30 102 245;
  --palette-lavender: 114 135 253;
  --palette-text: 76 79 105;
  --palette-subtext-1: 92 95 119;
  --palette-subtext-0: 108 111 133;
  --palette-overlay-2: 124 127 147;
  --palette-overlay-1: 140 143 161;
  --palette-overlay-0: 156 160 176;
  --palette-surface-2: 172 176 190;
  --palette-surface-1: 188 192 204;
  --palette-surface-0: 204 208 218;
  --palette-base: 239 241 245;
  --palette-mantle: 230 233 239;
  --palette-crust: 220 224 232;
  --foreground-rosewater: var(--color-text);
  --foreground-flamingo: var(--color-text);
  --foreground-pink: var(--color-text);
  --foreground-mauve: var(--color-text);
  --foreground-red: var(--color-text);
  --foreground-maroon: var(--color-text);
  --foreground-peach: var(--color-text);
  --foreground-yellow: var(--color-text);
  --foreground-green: var(--color-text);
  --foreground-teal: var(--color-text);
  --foreground-sky: var(--color-text);
  --foreground-sapphire: var(--color-text);
  --foreground-blue: var(--color-text);
  --foreground-lavender: var(--color-text);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-text);
  --foreground-subtext-1: var(--color-text);
  --foreground-overlay-1: var(--color-text);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 35%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 35%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 35%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 30%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 25%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 34%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 35%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 35%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 35%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 35%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 35%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 35%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 32%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 35%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: color-mix(in srgb, var(--color-green) 51%, var(--color-text));
  --net-red: var(--color-red);
  --focus-color: var(--color-blue); --outline: var(--color-text); --shadow-color: var(--color-text);
  --surface-1: var(--color-surface-0); --surface-2: var(--color-surface-0); color-scheme: light;
}
:root[data-scheme="catppuccin-frappe"] {
  --palette-rosewater: 242 213 207;
  --palette-flamingo: 238 190 190;
  --palette-pink: 244 184 228;
  --palette-mauve: 202 158 230;
  --palette-red: 231 130 132;
  --palette-maroon: 234 153 156;
  --palette-peach: 239 159 118;
  --palette-yellow: 229 200 144;
  --palette-green: 166 209 137;
  --palette-teal: 129 200 190;
  --palette-sky: 153 209 219;
  --palette-sapphire: 133 193 220;
  --palette-blue: 140 170 238;
  --palette-lavender: 186 187 241;
  --palette-text: 198 208 245;
  --palette-subtext-1: 181 191 226;
  --palette-subtext-0: 165 173 206;
  --palette-overlay-2: 148 156 187;
  --palette-overlay-1: 131 139 167;
  --palette-overlay-0: 115 121 148;
  --palette-surface-2: 98 104 128;
  --palette-surface-1: 81 87 109;
  --palette-surface-0: 65 69 89;
  --palette-base: 48 52 70;
  --palette-mantle: 41 44 60;
  --palette-crust: 35 38 52;
  --foreground-rosewater: var(--color-rosewater);
  --foreground-flamingo: var(--color-text);
  --foreground-pink: var(--color-text);
  --foreground-mauve: var(--color-text);
  --foreground-red: var(--color-text);
  --foreground-maroon: var(--color-text);
  --foreground-peach: var(--color-text);
  --foreground-yellow: var(--color-text);
  --foreground-green: var(--color-text);
  --foreground-teal: var(--color-text);
  --foreground-sky: var(--color-text);
  --foreground-sapphire: var(--color-text);
  --foreground-blue: var(--color-text);
  --foreground-lavender: var(--color-text);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-text);
  --foreground-subtext-1: var(--color-text);
  --foreground-overlay-1: var(--color-text);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 22%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 24%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 24%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 25%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 25%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 25%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 25%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 24%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 25%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 25%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 25%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 25%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 25%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 25%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: var(--color-green);
  --net-red: var(--color-red);
  --focus-color: var(--color-lavender); --outline: var(--color-overlay-2); --shadow-color: var(--color-crust);
  --surface-1: var(--color-surface-1); --surface-2: var(--color-surface-0); color-scheme: dark;
}
:root[data-scheme="catppuccin-macchiato"] {
  --palette-rosewater: 244 219 214;
  --palette-flamingo: 240 198 198;
  --palette-pink: 245 189 230;
  --palette-mauve: 198 160 246;
  --palette-red: 237 135 150;
  --palette-maroon: 238 153 160;
  --palette-peach: 245 169 127;
  --palette-yellow: 238 212 159;
  --palette-green: 166 218 149;
  --palette-teal: 139 213 202;
  --palette-sky: 145 215 227;
  --palette-sapphire: 125 196 228;
  --palette-blue: 138 173 244;
  --palette-lavender: 183 189 248;
  --palette-text: 202 211 245;
  --palette-subtext-1: 184 192 224;
  --palette-subtext-0: 165 173 203;
  --palette-overlay-2: 147 154 183;
  --palette-overlay-1: 128 135 162;
  --palette-overlay-0: 110 115 141;
  --palette-surface-2: 91 96 120;
  --palette-surface-1: 73 77 100;
  --palette-surface-0: 54 58 79;
  --palette-base: 36 39 58;
  --palette-mantle: 30 32 48;
  --palette-crust: 24 25 38;
  --foreground-rosewater: var(--color-rosewater);
  --foreground-flamingo: var(--color-flamingo);
  --foreground-pink: var(--color-pink);
  --foreground-mauve: var(--color-text);
  --foreground-red: var(--color-text);
  --foreground-maroon: var(--color-text);
  --foreground-peach: var(--color-text);
  --foreground-yellow: var(--color-yellow);
  --foreground-green: var(--color-green);
  --foreground-teal: var(--color-teal);
  --foreground-sky: var(--color-sky);
  --foreground-sapphire: var(--color-text);
  --foreground-blue: var(--color-text);
  --foreground-lavender: var(--color-lavender);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-subtext-1);
  --foreground-subtext-1: var(--color-subtext-1);
  --foreground-overlay-1: var(--color-text);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 25%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 25%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 25%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 25%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 25%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 25%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 25%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 25%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 25%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 25%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 25%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 25%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 25%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 25%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: var(--color-green);
  --net-red: var(--color-red);
  --focus-color: var(--color-lavender); --outline: var(--color-overlay-2); --shadow-color: var(--color-crust);
  --surface-1: var(--color-surface-1); --surface-2: var(--color-surface-0); color-scheme: dark;
}
:root[data-scheme="catppuccin-mocha"] {
  --palette-rosewater: 245 224 220;
  --palette-flamingo: 242 205 205;
  --palette-pink: 245 194 231;
  --palette-mauve: 203 166 247;
  --palette-red: 243 139 168;
  --palette-maroon: 235 160 172;
  --palette-peach: 250 179 135;
  --palette-yellow: 249 226 175;
  --palette-green: 166 227 161;
  --palette-teal: 148 226 213;
  --palette-sky: 137 220 235;
  --palette-sapphire: 116 199 236;
  --palette-blue: 137 180 250;
  --palette-lavender: 180 190 254;
  --palette-text: 205 214 244;
  --palette-subtext-1: 186 194 222;
  --palette-subtext-0: 166 173 200;
  --palette-overlay-2: 147 153 178;
  --palette-overlay-1: 127 132 156;
  --palette-overlay-0: 108 112 134;
  --palette-surface-2: 88 91 112;
  --palette-surface-1: 69 71 90;
  --palette-surface-0: 49 50 68;
  --palette-base: 30 30 46;
  --palette-mantle: 24 24 37;
  --palette-crust: 17 17 27;
  --foreground-rosewater: var(--color-rosewater);
  --foreground-flamingo: var(--color-flamingo);
  --foreground-pink: var(--color-pink);
  --foreground-mauve: var(--color-text);
  --foreground-red: var(--color-text);
  --foreground-maroon: var(--color-text);
  --foreground-peach: var(--color-peach);
  --foreground-yellow: var(--color-yellow);
  --foreground-green: var(--color-green);
  --foreground-teal: var(--color-teal);
  --foreground-sky: var(--color-sky);
  --foreground-sapphire: var(--color-sapphire);
  --foreground-blue: var(--color-text);
  --foreground-lavender: var(--color-lavender);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-subtext-1);
  --foreground-subtext-1: var(--color-subtext-1);
  --foreground-overlay-1: var(--color-text);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 25%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 25%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 25%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 25%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 25%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 25%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 25%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 25%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 25%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 25%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 25%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 25%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 25%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 25%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: var(--color-green);
  --net-red: var(--color-red);
  --focus-color: var(--color-lavender); --outline: var(--color-overlay-2); --shadow-color: var(--color-crust);
  --surface-1: var(--color-surface-1); --surface-2: var(--color-surface-2); color-scheme: dark;
}
:root[data-scheme="rose-pine"] {
  --palette-rosewater: 235 188 186;
  --palette-flamingo: 235 188 186;
  --palette-pink: 235 111 146;
  --palette-mauve: 196 167 231;
  --palette-red: 235 111 146;
  --palette-maroon: 235 111 146;
  --palette-peach: 246 193 119;
  --palette-yellow: 246 193 119;
  --palette-green: 49 116 143;
  --palette-teal: 156 207 216;
  --palette-sky: 156 207 216;
  --palette-sapphire: 49 116 143;
  --palette-blue: 49 116 143;
  --palette-lavender: 196 167 231;
  --palette-text: 224 222 244;
  --palette-subtext-1: 224 222 244;
  --palette-subtext-0: 144 140 170;
  --palette-overlay-2: 144 140 170;
  --palette-overlay-1: 110 106 134;
  --palette-overlay-0: 82 79 103;
  --palette-surface-2: 64 61 82;
  --palette-surface-1: 33 32 46;
  --palette-surface-0: 38 35 58;
  --palette-base: 25 23 36;
  --palette-mantle: 31 29 46;
  --palette-crust: 38 35 58;
  --foreground-rosewater: var(--color-rosewater);
  --foreground-flamingo: var(--color-flamingo);
  --foreground-pink: var(--color-pink);
  --foreground-mauve: var(--color-mauve);
  --foreground-red: var(--color-red);
  --foreground-maroon: var(--color-maroon);
  --foreground-peach: var(--color-peach);
  --foreground-yellow: var(--color-yellow);
  --foreground-green: var(--color-text);
  --foreground-teal: var(--color-teal);
  --foreground-sky: var(--color-sky);
  --foreground-sapphire: var(--color-text);
  --foreground-blue: var(--color-text);
  --foreground-lavender: var(--color-lavender);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-subtext-0);
  --foreground-subtext-1: var(--color-subtext-1);
  --foreground-overlay-1: var(--color-text);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 25%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 25%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 25%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 25%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 25%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 25%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 25%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 25%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 25%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 25%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 25%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 25%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 25%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 25%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: color-mix(in srgb, var(--color-green) 80%, var(--color-text));
  --net-red: var(--color-red);
  --focus-color: var(--color-lavender); --outline: var(--color-overlay-2); --shadow-color: var(--color-crust);
  --surface-1: var(--color-surface-1); --surface-2: var(--color-surface-2); color-scheme: dark;
}
:root[data-scheme="rose-pine-moon"] {
  --palette-rosewater: 234 154 151;
  --palette-flamingo: 234 154 151;
  --palette-pink: 235 111 146;
  --palette-mauve: 196 167 231;
  --palette-red: 235 111 146;
  --palette-maroon: 235 111 146;
  --palette-peach: 246 193 119;
  --palette-yellow: 246 193 119;
  --palette-green: 62 143 176;
  --palette-teal: 156 207 216;
  --palette-sky: 156 207 216;
  --palette-sapphire: 62 143 176;
  --palette-blue: 62 143 176;
  --palette-lavender: 196 167 231;
  --palette-text: 224 222 244;
  --palette-subtext-1: 224 222 244;
  --palette-subtext-0: 224 222 244;
  --palette-overlay-2: 144 140 170;
  --palette-overlay-1: 110 106 134;
  --palette-overlay-0: 86 82 110;
  --palette-surface-2: 68 65 90;
  --palette-surface-1: 42 40 62;
  --palette-surface-0: 57 53 82;
  --palette-base: 35 33 54;
  --palette-mantle: 42 39 63;
  --palette-crust: 57 53 82;
  --foreground-rosewater: var(--color-rosewater);
  --foreground-flamingo: var(--color-flamingo);
  --foreground-pink: var(--color-text);
  --foreground-mauve: var(--color-mauve);
  --foreground-red: var(--color-text);
  --foreground-maroon: var(--color-text);
  --foreground-peach: var(--color-peach);
  --foreground-yellow: var(--color-yellow);
  --foreground-green: var(--color-text);
  --foreground-teal: var(--color-teal);
  --foreground-sky: var(--color-sky);
  --foreground-sapphire: var(--color-text);
  --foreground-blue: var(--color-text);
  --foreground-lavender: var(--color-lavender);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-subtext-0);
  --foreground-subtext-1: var(--color-subtext-1);
  --foreground-overlay-1: var(--color-text);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 25%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 25%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 25%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 25%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 25%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 25%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 25%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 25%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 25%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 25%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 25%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 25%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 25%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 25%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: color-mix(in srgb, var(--color-green) 94%, var(--color-text));
  --net-red: var(--color-red);
  --focus-color: var(--color-lavender); --outline: var(--color-overlay-2); --shadow-color: var(--color-crust);
  --surface-1: var(--color-surface-1); --surface-2: var(--color-surface-2); color-scheme: dark;
}
:root[data-scheme="rose-pine-dawn"] {
  --palette-rosewater: 215 130 126;
  --palette-flamingo: 215 130 126;
  --palette-pink: 180 99 122;
  --palette-mauve: 144 122 169;
  --palette-red: 180 99 122;
  --palette-maroon: 180 99 122;
  --palette-peach: 234 157 52;
  --palette-yellow: 234 157 52;
  --palette-green: 40 105 131;
  --palette-teal: 86 148 159;
  --palette-sky: 86 148 159;
  --palette-sapphire: 40 105 131;
  --palette-blue: 40 105 131;
  --palette-lavender: 144 122 169;
  --palette-text: 70 66 97;
  --palette-subtext-1: 70 66 97;
  --palette-subtext-0: 70 66 97;
  --palette-overlay-2: 121 117 147;
  --palette-overlay-1: 152 147 165;
  --palette-overlay-0: 206 202 205;
  --palette-surface-2: 223 218 217;
  --palette-surface-1: 244 237 232;
  --palette-surface-0: 242 233 225;
  --palette-base: 250 244 237;
  --palette-mantle: 255 250 243;
  --palette-crust: 242 233 225;
  --foreground-rosewater: var(--color-text);
  --foreground-flamingo: var(--color-text);
  --foreground-pink: var(--color-text);
  --foreground-mauve: var(--color-text);
  --foreground-red: var(--color-text);
  --foreground-maroon: var(--color-text);
  --foreground-peach: var(--color-text);
  --foreground-yellow: var(--color-text);
  --foreground-green: var(--color-green);
  --foreground-teal: var(--color-text);
  --foreground-sky: var(--color-text);
  --foreground-sapphire: var(--color-sapphire);
  --foreground-blue: var(--color-blue);
  --foreground-lavender: var(--color-text);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-subtext-0);
  --foreground-subtext-1: var(--color-subtext-1);
  --foreground-overlay-1: var(--color-text);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 35%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 35%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 35%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 35%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 35%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 35%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 35%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 35%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 35%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 35%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 35%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 35%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 35%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 35%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: var(--color-green);
  --net-red: color-mix(in srgb, var(--color-red) 79%, var(--color-text));
  --focus-color: var(--color-lavender); --outline: var(--color-text); --shadow-color: var(--color-text);
  --surface-1: var(--color-surface-1); --surface-2: var(--color-surface-2); color-scheme: light;
}
:root[data-scheme="nord-dark"] {
  --palette-rosewater: 208 135 112;
  --palette-flamingo: 191 97 106;
  --palette-pink: 180 142 173;
  --palette-mauve: 180 142 173;
  --palette-red: 191 97 106;
  --palette-maroon: 191 97 106;
  --palette-peach: 208 135 112;
  --palette-yellow: 235 203 139;
  --palette-green: 163 190 140;
  --palette-teal: 136 192 208;
  --palette-sky: 136 192 208;
  --palette-sapphire: 129 161 193;
  --palette-blue: 129 161 193;
  --palette-lavender: 136 192 208;
  --palette-text: 236 239 244;
  --palette-subtext-1: 229 233 240;
  --palette-subtext-0: 216 222 233;
  --palette-overlay-2: 216 222 233;
  --palette-overlay-1: 129 161 193;
  --palette-overlay-0: 94 129 172;
  --palette-surface-2: 76 86 106;
  --palette-surface-1: 67 76 94;
  --palette-surface-0: 59 66 82;
  --palette-base: 46 52 64;
  --palette-mantle: 59 66 82;
  --palette-crust: 59 66 82;
  --foreground-rosewater: var(--color-text);
  --foreground-flamingo: var(--color-text);
  --foreground-pink: var(--color-text);
  --foreground-mauve: var(--color-text);
  --foreground-red: var(--color-text);
  --foreground-maroon: var(--color-text);
  --foreground-peach: var(--color-text);
  --foreground-yellow: var(--color-yellow);
  --foreground-green: var(--color-text);
  --foreground-teal: var(--color-text);
  --foreground-sky: var(--color-text);
  --foreground-sapphire: var(--color-text);
  --foreground-blue: var(--color-text);
  --foreground-lavender: var(--color-text);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-subtext-0);
  --foreground-subtext-1: var(--color-subtext-1);
  --foreground-overlay-1: var(--color-text);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 25%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 25%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 25%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 25%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 25%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 25%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 25%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 25%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 25%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 25%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 25%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 25%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 25%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 25%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: var(--color-green);
  --net-red: color-mix(in srgb, var(--color-red) 70%, var(--color-text));
  --focus-color: var(--color-lavender); --outline: var(--color-overlay-2); --shadow-color: var(--color-crust);
  --surface-1: var(--color-surface-1); --surface-2: var(--color-surface-2); color-scheme: dark;
}
:root[data-scheme="nord-light"] {
  --palette-rosewater: 208 135 112;
  --palette-flamingo: 191 97 106;
  --palette-pink: 180 142 173;
  --palette-mauve: 180 142 173;
  --palette-red: 191 97 106;
  --palette-maroon: 191 97 106;
  --palette-peach: 208 135 112;
  --palette-yellow: 235 203 139;
  --palette-green: 163 190 140;
  --palette-teal: 143 188 187;
  --palette-sky: 136 192 208;
  --palette-sapphire: 129 161 193;
  --palette-blue: 129 161 193;
  --palette-lavender: 94 129 172;
  --palette-text: 46 52 64;
  --palette-subtext-1: 59 66 82;
  --palette-subtext-0: 76 86 106;
  --palette-overlay-2: 76 86 106;
  --palette-overlay-1: 94 129 172;
  --palette-overlay-0: 129 161 193;
  --palette-surface-2: 216 222 233;
  --palette-surface-1: 216 222 233;
  --palette-surface-0: 229 233 240;
  --palette-base: 236 239 244;
  --palette-mantle: 229 233 240;
  --palette-crust: 216 222 233;
  --foreground-rosewater: var(--color-text);
  --foreground-flamingo: var(--color-text);
  --foreground-pink: var(--color-text);
  --foreground-mauve: var(--color-text);
  --foreground-red: var(--color-text);
  --foreground-maroon: var(--color-text);
  --foreground-peach: var(--color-text);
  --foreground-yellow: var(--color-text);
  --foreground-green: var(--color-text);
  --foreground-teal: var(--color-text);
  --foreground-sky: var(--color-text);
  --foreground-sapphire: var(--color-text);
  --foreground-blue: var(--color-text);
  --foreground-lavender: var(--color-text);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-subtext-0);
  --foreground-subtext-1: var(--color-subtext-1);
  --foreground-overlay-1: var(--color-text);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 35%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 35%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 35%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 35%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 35%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 35%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 35%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 35%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 35%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 35%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 35%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 35%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 35%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 35%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: color-mix(in srgb, var(--color-green) 43%, var(--color-text));
  --net-red: color-mix(in srgb, var(--color-red) 77%, var(--color-text));
  --focus-color: var(--color-text); --outline: var(--color-text); --shadow-color: var(--color-text);
  --surface-1: var(--color-surface-1); --surface-2: var(--color-surface-2); color-scheme: light;
}
:root[data-scheme="tokyo-night"] {
  --palette-rosewater: 255 158 100;
  --palette-flamingo: 247 118 142;
  --palette-pink: 187 154 247;
  --palette-mauve: 187 154 247;
  --palette-red: 247 118 142;
  --palette-maroon: 247 118 142;
  --palette-peach: 255 158 100;
  --palette-yellow: 224 175 104;
  --palette-green: 158 206 106;
  --palette-teal: 115 218 202;
  --palette-sky: 125 207 255;
  --palette-sapphire: 13 185 215;
  --palette-blue: 122 162 247;
  --palette-lavender: 122 162 247;
  --palette-text: 169 177 214;
  --palette-subtext-1: 169 177 214;
  --palette-subtext-0: 169 177 214;
  --palette-overlay-2: 120 124 153;
  --palette-overlay-1: 120 124 153;
  --palette-overlay-0: 59 66 97;
  --palette-surface-2: 59 66 97;
  --palette-surface-1: 36 40 59;
  --palette-surface-0: 36 40 59;
  --palette-base: 26 27 38;
  --palette-mantle: 22 22 30;
  --palette-crust: 22 22 30;
  --foreground-rosewater: var(--color-rosewater);
  --foreground-flamingo: var(--color-flamingo);
  --foreground-pink: var(--color-pink);
  --foreground-mauve: var(--color-mauve);
  --foreground-red: var(--color-red);
  --foreground-maroon: var(--color-maroon);
  --foreground-peach: var(--color-peach);
  --foreground-yellow: var(--color-yellow);
  --foreground-green: var(--color-green);
  --foreground-teal: var(--color-teal);
  --foreground-sky: var(--color-sky);
  --foreground-sapphire: var(--color-sapphire);
  --foreground-blue: var(--color-blue);
  --foreground-lavender: var(--color-lavender);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-subtext-0);
  --foreground-subtext-1: var(--color-subtext-1);
  --foreground-overlay-1: var(--color-text);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 25%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 25%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 25%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 25%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 25%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 25%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 25%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 25%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 25%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 24%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 24%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 25%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 25%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 25%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: var(--color-green);
  --net-red: var(--color-red);
  --focus-color: var(--color-lavender); --outline: var(--color-overlay-2); --shadow-color: var(--color-crust);
  --surface-1: var(--color-surface-1); --surface-2: var(--color-surface-2); color-scheme: dark;
}
:root[data-scheme="dracula"] {
  --palette-rosewater: 255 184 108;
  --palette-flamingo: 255 121 198;
  --palette-pink: 255 121 198;
  --palette-mauve: 189 147 249;
  --palette-red: 255 85 85;
  --palette-maroon: 255 85 85;
  --palette-peach: 255 184 108;
  --palette-yellow: 241 250 140;
  --palette-green: 80 250 123;
  --palette-teal: 139 233 253;
  --palette-sky: 139 233 253;
  --palette-sapphire: 139 233 253;
  --palette-blue: 139 233 253;
  --palette-lavender: 189 147 249;
  --palette-text: 248 248 242;
  --palette-subtext-1: 248 248 242;
  --palette-subtext-0: 248 248 242;
  --palette-overlay-2: 98 114 164;
  --palette-overlay-1: 98 114 164;
  --palette-overlay-0: 98 114 164;
  --palette-surface-2: 68 71 90;
  --palette-surface-1: 68 71 90;
  --palette-surface-0: 68 71 90;
  --palette-base: 40 42 54;
  --palette-mantle: 30 31 41;
  --palette-crust: 30 31 41;
  --foreground-rosewater: var(--color-rosewater);
  --foreground-flamingo: var(--color-text);
  --foreground-pink: var(--color-text);
  --foreground-mauve: var(--color-text);
  --foreground-red: var(--color-text);
  --foreground-maroon: var(--color-text);
  --foreground-peach: var(--color-peach);
  --foreground-yellow: var(--color-yellow);
  --foreground-green: var(--color-green);
  --foreground-teal: var(--color-teal);
  --foreground-sky: var(--color-sky);
  --foreground-sapphire: var(--color-sapphire);
  --foreground-blue: var(--color-blue);
  --foreground-lavender: var(--color-text);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-subtext-0);
  --foreground-subtext-1: var(--color-subtext-1);
  --foreground-overlay-1: var(--color-text);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 25%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 25%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 25%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 25%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 25%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 25%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 25%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 25%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 25%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 25%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 25%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 25%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 25%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 25%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: var(--color-green);
  --net-red: color-mix(in srgb, var(--color-red) 99%, var(--color-text));
  --focus-color: var(--color-lavender); --outline: var(--color-overlay-2); --shadow-color: var(--color-crust);
  --surface-1: var(--color-surface-1); --surface-2: var(--color-surface-2); color-scheme: dark;
}
:root[data-scheme="alucard"] {
  --palette-rosewater: 163 77 20;
  --palette-flamingo: 163 20 77;
  --palette-pink: 163 20 77;
  --palette-mauve: 100 74 201;
  --palette-red: 203 58 42;
  --palette-maroon: 203 58 42;
  --palette-peach: 163 77 20;
  --palette-yellow: 132 110 21;
  --palette-green: 20 113 10;
  --palette-teal: 3 106 150;
  --palette-sky: 3 106 150;
  --palette-sapphire: 3 106 150;
  --palette-blue: 3 106 150;
  --palette-lavender: 100 74 201;
  --palette-text: 31 31 31;
  --palette-subtext-1: 108 102 75;
  --palette-subtext-0: 108 102 75;
  --palette-overlay-2: 108 102 75;
  --palette-overlay-1: 108 102 75;
  --palette-overlay-0: 207 207 222;
  --palette-surface-2: 207 207 222;
  --palette-surface-1: 245 240 216;
  --palette-surface-0: 245 240 216;
  --palette-base: 255 251 235;
  --palette-mantle: 245 240 216;
  --palette-crust: 245 240 216;
  --foreground-rosewater: var(--color-rosewater);
  --foreground-flamingo: var(--color-flamingo);
  --foreground-pink: var(--color-pink);
  --foreground-mauve: var(--color-mauve);
  --foreground-red: var(--color-text);
  --foreground-maroon: var(--color-text);
  --foreground-peach: var(--color-peach);
  --foreground-yellow: var(--color-text);
  --foreground-green: var(--color-green);
  --foreground-teal: var(--color-teal);
  --foreground-sky: var(--color-sky);
  --foreground-sapphire: var(--color-sapphire);
  --foreground-blue: var(--color-blue);
  --foreground-lavender: var(--color-lavender);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-subtext-0);
  --foreground-subtext-1: var(--color-subtext-1);
  --foreground-overlay-1: var(--color-overlay-1);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 35%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 35%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 35%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 35%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 35%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 35%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 35%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 35%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 35%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 35%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 35%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 35%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 35%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 35%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: var(--color-green);
  --net-red: var(--color-red);
  --focus-color: var(--color-lavender); --outline: var(--color-text); --shadow-color: var(--color-text);
  --surface-1: var(--color-surface-1); --surface-2: var(--color-surface-2); color-scheme: light;
}
:root[data-scheme="everforest-dark"] {
  --palette-rosewater: 230 152 117;
  --palette-flamingo: 230 126 128;
  --palette-pink: 214 153 182;
  --palette-mauve: 214 153 182;
  --palette-red: 230 126 128;
  --palette-maroon: 230 126 128;
  --palette-peach: 230 152 117;
  --palette-yellow: 219 188 127;
  --palette-green: 167 192 128;
  --palette-teal: 131 192 146;
  --palette-sky: 127 187 179;
  --palette-sapphire: 127 187 179;
  --palette-blue: 127 187 179;
  --palette-lavender: 167 192 128;
  --palette-text: 211 198 170;
  --palette-subtext-1: 211 198 170;
  --palette-subtext-0: 211 198 170;
  --palette-overlay-2: 133 146 137;
  --palette-overlay-1: 133 146 137;
  --palette-overlay-0: 133 146 137;
  --palette-surface-2: 61 72 77;
  --palette-surface-1: 61 72 77;
  --palette-surface-0: 52 63 68;
  --palette-base: 45 53 59;
  --palette-mantle: 35 42 46;
  --palette-crust: 35 42 46;
  --foreground-rosewater: var(--color-text);
  --foreground-flamingo: var(--color-text);
  --foreground-pink: var(--color-text);
  --foreground-mauve: var(--color-text);
  --foreground-red: var(--color-text);
  --foreground-maroon: var(--color-text);
  --foreground-peach: var(--color-text);
  --foreground-yellow: var(--color-yellow);
  --foreground-green: var(--color-green);
  --foreground-teal: var(--color-text);
  --foreground-sky: var(--color-text);
  --foreground-sapphire: var(--color-text);
  --foreground-blue: var(--color-text);
  --foreground-lavender: var(--color-lavender);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-subtext-0);
  --foreground-subtext-1: var(--color-subtext-1);
  --foreground-overlay-1: var(--color-text);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 25%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 25%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 25%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 25%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 25%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 25%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 25%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 22%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 24%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 24%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 24%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 24%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 24%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 24%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: var(--color-green);
  --net-red: color-mix(in srgb, var(--color-red) 99%, var(--color-text));
  --focus-color: var(--color-lavender); --outline: var(--color-overlay-2); --shadow-color: var(--color-crust);
  --surface-1: var(--color-surface-1); --surface-2: var(--color-surface-2); color-scheme: dark;
}
:root[data-scheme="everforest-light"] {
  --palette-rosewater: 245 125 38;
  --palette-flamingo: 248 85 82;
  --palette-pink: 223 105 186;
  --palette-mauve: 223 105 186;
  --palette-red: 248 85 82;
  --palette-maroon: 248 85 82;
  --palette-peach: 245 125 38;
  --palette-yellow: 223 160 0;
  --palette-green: 141 161 1;
  --palette-teal: 53 167 124;
  --palette-sky: 58 148 197;
  --palette-sapphire: 58 148 197;
  --palette-blue: 58 148 197;
  --palette-lavender: 141 161 1;
  --palette-text: 92 106 114;
  --palette-subtext-1: 92 106 114;
  --palette-subtext-0: 92 106 114;
  --palette-overlay-2: 130 145 129;
  --palette-overlay-1: 130 145 129;
  --palette-overlay-0: 130 145 129;
  --palette-surface-2: 224 220 199;
  --palette-surface-1: 224 220 199;
  --palette-surface-0: 239 235 212;
  --palette-base: 253 246 227;
  --palette-mantle: 239 235 212;
  --palette-crust: 224 220 199;
  --foreground-rosewater: var(--color-text);
  --foreground-flamingo: var(--color-text);
  --foreground-pink: var(--color-text);
  --foreground-mauve: var(--color-text);
  --foreground-red: var(--color-text);
  --foreground-maroon: var(--color-text);
  --foreground-peach: var(--color-text);
  --foreground-yellow: var(--color-text);
  --foreground-green: var(--color-text);
  --foreground-teal: var(--color-text);
  --foreground-sky: var(--color-text);
  --foreground-sapphire: var(--color-text);
  --foreground-blue: var(--color-text);
  --foreground-lavender: var(--color-text);
  --foreground-text: var(--color-text);
  --foreground-subtext-0: var(--color-subtext-0);
  --foreground-subtext-1: var(--color-subtext-1);
  --foreground-overlay-1: var(--color-text);
  --fill-rosewater: color-mix(in srgb, var(--color-rosewater) 14%, var(--color-base)); --on-rosewater: var(--color-text);
  --fill-flamingo: color-mix(in srgb, var(--color-flamingo) 11%, var(--color-base)); --on-flamingo: var(--color-text);
  --fill-pink: color-mix(in srgb, var(--color-pink) 13%, var(--color-base)); --on-pink: var(--color-text);
  --fill-mauve: color-mix(in srgb, var(--color-mauve) 13%, var(--color-base)); --on-mauve: var(--color-text);
  --fill-red: color-mix(in srgb, var(--color-red) 11%, var(--color-base)); --on-red: var(--color-text);
  --fill-maroon: color-mix(in srgb, var(--color-maroon) 11%, var(--color-base)); --on-maroon: var(--color-text);
  --fill-peach: color-mix(in srgb, var(--color-peach) 14%, var(--color-base)); --on-peach: var(--color-text);
  --fill-yellow: color-mix(in srgb, var(--color-yellow) 18%, var(--color-base)); --on-yellow: var(--color-text);
  --fill-green: color-mix(in srgb, var(--color-green) 14%, var(--color-base)); --on-green: var(--color-text);
  --fill-teal: color-mix(in srgb, var(--color-teal) 13%, var(--color-base)); --on-teal: var(--color-text);
  --fill-sky: color-mix(in srgb, var(--color-sky) 12%, var(--color-base)); --on-sky: var(--color-text);
  --fill-sapphire: color-mix(in srgb, var(--color-sapphire) 12%, var(--color-base)); --on-sapphire: var(--color-text);
  --fill-blue: color-mix(in srgb, var(--color-blue) 12%, var(--color-base)); --on-blue: var(--color-text);
  --fill-lavender: color-mix(in srgb, var(--color-lavender) 14%, var(--color-base)); --on-lavender: var(--color-text);
  --net-green: color-mix(in srgb, var(--color-green) 20%, var(--color-text));
  --net-red: color-mix(in srgb, var(--color-red) 38%, var(--color-text));
  --focus-color: var(--color-text); --outline: var(--color-text); --shadow-color: var(--color-text);
  --surface-1: var(--color-surface-0); --surface-2: var(--color-surface-0); color-scheme: light;
}
.text-rosewater { color: var(--foreground-rosewater); }
.bg-rosewater { background-color: var(--fill-rosewater); --on-accent: var(--on-rosewater); }
.text-flamingo { color: var(--foreground-flamingo); }
.bg-flamingo { background-color: var(--fill-flamingo); --on-accent: var(--on-flamingo); }
.text-pink { color: var(--foreground-pink); }
.bg-pink { background-color: var(--fill-pink); --on-accent: var(--on-pink); }
.text-mauve { color: var(--foreground-mauve); }
.bg-mauve { background-color: var(--fill-mauve); --on-accent: var(--on-mauve); }
.text-red { color: var(--foreground-red); }
.bg-red { background-color: var(--fill-red); --on-accent: var(--on-red); }
.text-maroon { color: var(--foreground-maroon); }
.bg-maroon { background-color: var(--fill-maroon); --on-accent: var(--on-maroon); }
.text-peach { color: var(--foreground-peach); }
.bg-peach { background-color: var(--fill-peach); --on-accent: var(--on-peach); }
.text-yellow { color: var(--foreground-yellow); }
.bg-yellow { background-color: var(--fill-yellow); --on-accent: var(--on-yellow); }
.text-green { color: var(--foreground-green); }
.bg-green { background-color: var(--fill-green); --on-accent: var(--on-green); }
.text-teal { color: var(--foreground-teal); }
.bg-teal { background-color: var(--fill-teal); --on-accent: var(--on-teal); }
.text-sky { color: var(--foreground-sky); }
.bg-sky { background-color: var(--fill-sky); --on-accent: var(--on-sky); }
.text-sapphire { color: var(--foreground-sapphire); }
.bg-sapphire { background-color: var(--fill-sapphire); --on-accent: var(--on-sapphire); }
.text-blue { color: var(--foreground-blue); }
.bg-blue { background-color: var(--fill-blue); --on-accent: var(--on-blue); }
.text-lavender { color: var(--foreground-lavender); }
.bg-lavender { background-color: var(--fill-lavender); --on-accent: var(--on-lavender); }
.text-subtext-0, input::placeholder, textarea::placeholder { color: var(--foreground-subtext-0); }
.text-subtext-1 { color: var(--foreground-subtext-1); }
.text-overlay-1 { color: var(--foreground-overlay-1); }
.bg-surface-1, .hover\:bg-surface-1:hover { background-color: var(--surface-1); }
.bg-surface-2 { background-color: var(--surface-2); }
.btn-pixel-primary { background: var(--fill-lavender); color: var(--on-lavender); border-color: var(--color-lavender); --on-accent: var(--on-lavender); }
.btn-pixel-peach { background: var(--fill-peach); color: var(--on-peach); border-color: var(--color-peach); --on-accent: var(--on-peach); }
.btn-pixel-green { background: var(--fill-green); color: var(--on-green); border-color: var(--color-green); --on-accent: var(--on-green); }
.btn-pixel-pink { background: var(--fill-pink); color: var(--on-pink); border-color: var(--color-pink); --on-accent: var(--on-pink); }
.btn-pixel, .btn-pixel-sm { background: var(--fill-lavender); color: var(--on-lavender); border-color: var(--color-lavender); --on-accent: var(--on-lavender); }
.btn-pixel.bg-rosewater, .btn-pixel-sm.bg-rosewater, .btn-pixel.text-rosewater, .btn-pixel-sm.text-rosewater { background: var(--fill-rosewater); color: var(--on-rosewater); border-color: var(--color-rosewater); --on-accent: var(--on-rosewater); }
.btn-pixel.bg-flamingo, .btn-pixel-sm.bg-flamingo, .btn-pixel.text-flamingo, .btn-pixel-sm.text-flamingo { background: var(--fill-flamingo); color: var(--on-flamingo); border-color: var(--color-flamingo); --on-accent: var(--on-flamingo); }
.btn-pixel.bg-pink, .btn-pixel-sm.bg-pink, .btn-pixel.text-pink, .btn-pixel-sm.text-pink { background: var(--fill-pink); color: var(--on-pink); border-color: var(--color-pink); --on-accent: var(--on-pink); }
.btn-pixel.bg-mauve, .btn-pixel-sm.bg-mauve, .btn-pixel.text-mauve, .btn-pixel-sm.text-mauve { background: var(--fill-mauve); color: var(--on-mauve); border-color: var(--color-mauve); --on-accent: var(--on-mauve); }
.btn-pixel.bg-red, .btn-pixel-sm.bg-red, .btn-pixel.text-red, .btn-pixel-sm.text-red { background: var(--fill-red); color: var(--on-red); border-color: var(--color-red); --on-accent: var(--on-red); }
.btn-pixel.bg-maroon, .btn-pixel-sm.bg-maroon, .btn-pixel.text-maroon, .btn-pixel-sm.text-maroon { background: var(--fill-maroon); color: var(--on-maroon); border-color: var(--color-maroon); --on-accent: var(--on-maroon); }
.btn-pixel.bg-peach, .btn-pixel-sm.bg-peach, .btn-pixel.text-peach, .btn-pixel-sm.text-peach { background: var(--fill-peach); color: var(--on-peach); border-color: var(--color-peach); --on-accent: var(--on-peach); }
.btn-pixel.bg-yellow, .btn-pixel-sm.bg-yellow, .btn-pixel.text-yellow, .btn-pixel-sm.text-yellow { background: var(--fill-yellow); color: var(--on-yellow); border-color: var(--color-yellow); --on-accent: var(--on-yellow); }
.btn-pixel.bg-green, .btn-pixel-sm.bg-green, .btn-pixel.text-green, .btn-pixel-sm.text-green { background: var(--fill-green); color: var(--on-green); border-color: var(--color-green); --on-accent: var(--on-green); }
.btn-pixel.bg-teal, .btn-pixel-sm.bg-teal, .btn-pixel.text-teal, .btn-pixel-sm.text-teal { background: var(--fill-teal); color: var(--on-teal); border-color: var(--color-teal); --on-accent: var(--on-teal); }
.btn-pixel.bg-sky, .btn-pixel-sm.bg-sky, .btn-pixel.text-sky, .btn-pixel-sm.text-sky { background: var(--fill-sky); color: var(--on-sky); border-color: var(--color-sky); --on-accent: var(--on-sky); }
.btn-pixel.bg-sapphire, .btn-pixel-sm.bg-sapphire, .btn-pixel.text-sapphire, .btn-pixel-sm.text-sapphire { background: var(--fill-sapphire); color: var(--on-sapphire); border-color: var(--color-sapphire); --on-accent: var(--on-sapphire); }
.btn-pixel.bg-blue, .btn-pixel-sm.bg-blue, .btn-pixel.text-blue, .btn-pixel-sm.text-blue { background: var(--fill-blue); color: var(--on-blue); border-color: var(--color-blue); --on-accent: var(--on-blue); }
.btn-pixel.bg-lavender, .btn-pixel-sm.bg-lavender, .btn-pixel.text-lavender, .btn-pixel-sm.text-lavender { background: var(--fill-lavender); color: var(--on-lavender); border-color: var(--color-lavender); --on-accent: var(--on-lavender); }
.btn-pixel.bg-surface-0, .btn-pixel-sm.bg-surface-0, .btn-pixel.bg-mantle, .btn-pixel-sm.bg-mantle { background: var(--fill-lavender); color: var(--on-lavender); --on-accent: var(--on-lavender); }
.text-on-accent { color: var(--on-accent); }

/* Shared interface styles */
[x-cloak] { display: none !important; }

        /* Typography & Root scaling */
        html {
            font-size: 16px;
            line-height: 1.6;
            -webkit-text-size-adjust: 100%;
        }
        body {
            line-height: 1.6;
            letter-spacing: -0.015em;
        }

        /* Pixel art rendering applies ONLY to pixel art images and canvas, NOT text/fonts */
        img.pixel-art, .pixel-art { image-rendering: pixelated; }

        /* Theme CSS variables for SVG icons and elements */
        :root {
            --pixel-stroke: var(--color-text);
            --pixel-base: var(--color-base);
        }

        /* Selection styles */
        ::selection { background-color: rgb(var(--palette-overlay-2) / 25%); color: var(--color-text); }

        /* Caret colors */
        input, select, textarea { caret-color: var(--color-rosewater); }

        /* Focus rings */
        a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
            outline: 2px solid var(--focus-color) !important;
            outline-offset: 2px;
        }
        /* Shared browser surfaces */
        body { scrollbar-gutter: stable; }
        * { --un-default-border-color: var(--outline); }
        button:disabled { opacity: 0.55; cursor: not-allowed; }
        input, select, textarea { font-variant-numeric: tabular-nums; }
        .mobile-header { flex-wrap: wrap; gap: 12px; }
        .mobile-header > div { min-width: 0; }
        .profile-heading > div:first-child { flex: 1 1 18rem; max-width: 100%; }
        .profile-heading h1 { flex: 1 1 12rem; min-width: 0; }
        .mobile-header > div:last-child { margin-inline-start: auto; max-width: 100%; }
        @media (pointer: coarse), (max-width: 639px) {
            .touch-target { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
        }

        /* Custom scrollbars */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: var(--color-mantle); }
        ::-webkit-scrollbar-thumb { background: var(--color-surface-2); border: 2px solid var(--color-text); }
        ::-webkit-scrollbar-thumb:hover { background: var(--color-lavender); }


button, [role=radio], [role=tab], .btn-pixel, .btn-pixel-sm, .btn-pixel-primary, .btn-pixel-peach, .btn-pixel-green, .btn-pixel-pink { min-height: 44px; min-width: 44px; }
@media (min-width: 640px) and (pointer: fine) {
  .btn-pixel-sm { min-height: 32px; min-width: 32px; }
}
input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select { min-height: 44px; }
:where(.pixel-icon) { width: 20px; height: 20px; }
.pixel-switch { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; min-width: 104px; min-height: 44px; border: 0; padding: 0; cursor: pointer; color: var(--foreground-text); }
.pixel-switch-track { position: relative; width: 56px; height: 28px; flex-shrink: 0; border: 2px solid var(--outline); background: var(--color-surface-2); }
.pixel-switch-track::before { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: var(--pixel-base); border: 2px solid var(--outline); transition: transform 120ms ease-out; }
.pixel-switch[aria-checked=true] .pixel-switch-track { background: var(--color-green); }
.pixel-switch[aria-checked=true] .pixel-switch-track::before { transform: translateX(28px); }
.pixel-switch-state { width: 30px; font-size: 10px; text-align: left; }
.pixel-switch:hover .pixel-switch-track { box-shadow: 2px 2px 0 var(--shadow-color); }
.pixel-switch.htmx-request { opacity: 0.65; pointer-events: none; }
.preference-control { width: 100%; }
@media (min-width: 1024px) { .preference-control { width: 17rem; flex-shrink: 0; } }
h1, h2, h3, h4, p, label { overflow-wrap: anywhere; }
main { min-width: 0; }
nav { flex-shrink: 0; }
form, .input-pixel { min-width: 0; }
[tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--focus-color) !important; outline-offset: 3px; }
[aria-invalid=true] { border-color: var(--color-red); }
.htmx-request { cursor: progress; }
dialog { width: calc(100% - 2rem); max-width: 36rem; max-height: calc(100dvh - 2rem); overflow: auto; background: transparent; padding: 4px; border: 0; color: inherit; }
dialog::backdrop { background: rgb(var(--palette-crust) / 60%); }
.calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendar-day { min-width: 0; min-height: 44px; padding: 4px 0; }
.calendar-weekday { font-size: 10px; text-align: center; padding: 8px 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  button:active, a:active, .group:hover > div, .card-pixel:hover, .card-pixel-sm:hover { transform: none !important; }
}

label:has(input[type=checkbox]), label:has(input[type=radio]) { min-height: 44px; }


button { background-color: transparent; }
[role=tab] { flex: 0 0 auto; white-space: nowrap; }
.mobile-nav-item[aria-current=page] { background: var(--fill-lavender); color: var(--on-lavender); border-color: var(--color-text); font-weight: bold; box-shadow: 2px 2px 0 var(--color-text); }
html { view-transition-name: none; }
#main-content { view-transition-name: page-content; }
::view-transition { pointer-events: none; }
::view-transition-old(page-content), ::view-transition-new(page-content) { animation-duration: 120ms; animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(page-content), ::view-transition-new(page-content) { animation: none; }
}

/* Keep numeric validation and arrow increments without browser steppers. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=radio] {
  appearance: none; width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--outline);
  border-radius: 0; background: var(--pixel-base); vertical-align: middle; cursor: pointer;
}
input[type=radio]:checked { background: var(--color-pink); box-shadow: inset 0 0 0 3px var(--pixel-base); }
input[type=radio]:disabled { opacity: 0.55; cursor: not-allowed; }
input[type=radio]:hover:not(:disabled) { outline: 2px solid var(--focus-color); outline-offset: 2px; }

/* Originals still submit and validate; only the custom controls are interactive. */
.pixel-native {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-height: 0 !important; min-width: 0 !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; pointer-events: none !important;
}
:root { --control-fill: var(--color-surface-0); --control-hover: var(--surface-1); --control-error: var(--color-red); }
.pixel-control {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 0; max-width: 100%; min-height: 44px; padding: 8px 10px;
  border: 2px solid var(--outline); border-radius: 0; background: var(--control-fill);
  color: var(--color-text); font: inherit; font-size: 10px; line-height: 1.6; text-align: left;
  cursor: pointer; box-shadow: 2px 2px 0 var(--shadow-color);
}
.pixel-control-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pixel-control-arrow {
  width: 10px; height: 6px; flex-shrink: 0; color: var(--pixel-stroke);
  clip-path: polygon(0 0, 100% 0, 100% 33.33%, 80% 33.33%, 80% 66.66%, 60% 66.66%, 60% 100%, 40% 100%, 40% 66.66%, 20% 66.66%, 20% 33.33%, 0 33.33%);
  background: currentColor;
}
.pixel-control:hover:not(:disabled), .pixel-control[aria-expanded=true] { background: var(--control-hover); }
.pixel-control[aria-invalid=true] { border-color: var(--control-error); }
.pixel-control:disabled { cursor: not-allowed; box-shadow: none; }
.pixel-popover {
  position: fixed; inset: auto; margin: 0; padding: 4px; border: 2px solid var(--outline);
  border-radius: 0; box-sizing: border-box; overflow: auto; overscroll-behavior: contain;
  color: var(--color-text); background: var(--control-fill); box-shadow: 3px 3px 0 var(--shadow-color);
  font-family: 'Press Start 2P', 'Noto Sans CJK SC', 'Noto Sans CJK TC', 'Noto Sans CJK JP', 'Source Han Sans SC', 'Microsoft YaHei', 'Yu Gothic', 'Hiragino Sans GB', 'PingFang SC', sans-serif; font-size: 10px; line-height: 1.7;
}
.pixel-option { min-height: 36px; padding: 8px; border: 2px solid transparent; cursor: pointer; overflow-wrap: anywhere; }
.pixel-option:hover:not([aria-disabled=true]), .pixel-option-active { background: var(--control-hover); border-color: var(--pixel-stroke); }
.pixel-option[aria-selected=true] { background: var(--fill-lavender); color: var(--on-lavender); border-color: var(--color-lavender); }
.pixel-option[aria-disabled=true] { opacity: 0.55; cursor: not-allowed; }
.pixel-time-heading { margin: 4px 4px 10px; font-size: 10px; }
.pixel-time-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pixel-time-caption { padding: 4px 8px; background: var(--control-hover); }
.pixel-time-list { height: 164px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--pixel-stroke); }
.pixel-time-list .pixel-option { text-align: center; }
.pixel-time-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.pixel-time-action { min-height: 36px; padding: 6px 8px; border: 2px solid var(--outline); font: inherit; color: inherit; background: var(--control-hover); cursor: pointer; }
.pixel-time-done { background: var(--fill-lavender); color: var(--on-lavender); }
.pixel-time-action:hover { box-shadow: 2px 2px 0 var(--shadow-color); }
@media (pointer: coarse) { .pixel-option, .pixel-time-action { min-height: 44px; } }

:root { --calendar-accent: var(--color-lavender); --calendar-pink: var(--color-pink); --calendar-soft: var(--color-mantle); }
.pixel-control-calendar { width: 20px; height: 20px; flex-shrink: 0; }
.pixel-control-calendar svg { width: 100%; height: 100%; }
.pixel-date-popover { padding: 8px; background: var(--pixel-base); }
.pixel-date-header { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 4px; padding: 4px; margin-bottom: 8px; background: var(--calendar-soft); border: 2px solid var(--outline); box-shadow: 2px 2px 0 var(--calendar-pink); }
.pixel-date-month { text-align: center; font-size: 10px; line-height: 1.8; }
.pixel-date-nav { display: grid; place-items: center; min-width: 36px; min-height: 36px; border: 2px solid var(--outline); background: var(--color-surface-0); color: var(--pixel-stroke); cursor: pointer; }
.pixel-date-nav svg { width: 16px; height: 16px; }
.pixel-date-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.pixel-date-weekday { padding: 6px 0; text-align: center; font-size: 8px; }
.pixel-date-days { display: grid; gap: 2px; }
.pixel-date-day { min-width: 0; min-height: 36px; padding: 4px 0; border: 2px solid transparent; font: inherit; font-size: 10px; color: var(--color-text); background: var(--calendar-soft); cursor: pointer; }
.pixel-date-day:nth-child(6), .pixel-date-day:nth-child(7) { background: var(--color-surface-0); }
.pixel-date-day.pixel-date-outside { background: var(--pixel-base); }
.pixel-date-day[aria-current=date] { border-color: var(--calendar-pink); }
.pixel-date-day[aria-selected=true] { background: var(--fill-lavender); color: var(--on-lavender); border-color: var(--pixel-stroke); box-shadow: inset 0 0 0 2px var(--pixel-base); }
.pixel-date-day:hover:not(:disabled), .pixel-date-nav:hover { border-color: var(--color-text); background: var(--color-surface-0); color: var(--pixel-stroke); }
.pixel-date-day:disabled { cursor: not-allowed; opacity: 0.4; }
.pixel-date-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.pixel-date-today { background: var(--color-surface-0); }
input[type=checkbox] { appearance: none; display: inline-grid; place-content: center; width: 20px; height: 20px; margin: 0; flex-shrink: 0; border: 2px solid var(--outline); border-radius: 0; background: var(--pixel-base); color: var(--pixel-stroke); vertical-align: middle; box-shadow: 2px 2px 0 var(--calendar-pink); cursor: pointer; }
input[type=checkbox]::before { content: ''; width: 12px; height: 12px; background: currentColor; clip-path: polygon(0 33.33%, 16.67% 33.33%, 16.67% 50%, 33.33% 50%, 33.33% 66.67%, 50% 66.67%, 50% 50%, 66.67% 50%, 66.67% 33.33%, 83.33% 33.33%, 83.33% 16.67%, 100% 16.67%, 100% 50%, 83.33% 50%, 83.33% 66.67%, 66.67% 66.67%, 66.67% 83.33%, 50% 83.33%, 50% 100%, 33.33% 100%, 33.33% 83.33%, 16.67% 83.33%, 16.67% 66.67%, 0 66.67%); visibility: hidden; }
input[type=checkbox]:checked, input[type=checkbox]:indeterminate { background: var(--color-surface-0); }
input[type=checkbox]:checked::before { visibility: visible; }
input[type=checkbox]:indeterminate::before { visibility: visible; height: 4px; clip-path: none; }
input[type=checkbox]:hover:not(:disabled) { background: var(--color-surface-0); }
input[type=checkbox]:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
@media (pointer: coarse) { .pixel-date-day { min-height: 44px; } }
@media (forced-colors: active) { input[type=checkbox] { appearance: auto; } }
.calendar-net { display: block; width: 100%; margin-top: 5px; padding-inline: 1px; text-align: center; font-family: 'Press Start 2P', monospace; font-size: 8px; font-variant-numeric: tabular-nums; line-height: 1.4; overflow-wrap: anywhere; }
.calendar-net-empty { margin-top: 0; min-height: 0; }
.net-positive { color: var(--net-green, #40a02b); }
.net-negative { color: var(--net-red, #d20f39); }
.net-zero { color: var(--foreground-subtext-0); }
.net-size-2 { font-size: 7px; }
.net-size-3 { font-size: 6px; }
.net-amount { display: inline; }
.net-group { display: inline-block; overflow-wrap: normal; }
.calendar-day { display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 56px; container-type: inline-size; }
@container (max-width: 47px) { .net-zero { font-size: 6px; } }
@container (min-width: 48px) { .net-size-1 { font-size: 9px; } }
@container (min-width: 68px) { .net-size-1 { font-size: 10px; } .net-size-2 { font-size: 8px; } }
@container (min-width: 96px) { .net-size-2 { font-size: 9px; } .net-size-3 { font-size: 7px; } }
.dashboard-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dashboard-calendar-weekday { padding: 4px 0; text-align: center; color: var(--foreground-subtext-0); font-size: 9px; }
.dashboard-calendar-day { min-width: 0; min-height: 56px; padding: 6px 2px 4px; border: 2px solid var(--surface-2); background: var(--color-base); color: var(--color-text); display: flex; flex-direction: column; align-items: center; justify-content: space-between; font-family: 'Press Start 2P', 'Noto Sans CJK SC', 'Noto Sans CJK TC', 'Noto Sans CJK JP', 'Source Han Sans SC', 'Microsoft YaHei', 'Yu Gothic', 'Hiragino Sans GB', 'PingFang SC', sans-serif; font-size: 9px; line-height: 1.4; container-type: inline-size; }
.dashboard-calendar-day:hover, .dashboard-calendar-day:focus-visible { border-color: var(--color-lavender); background: var(--color-base); }
.dashboard-calendar-today { border-color: var(--color-peach); color: var(--foreground-peach); }
.dashboard-calendar-has-transactions { box-shadow: inset 0 -3px 0 var(--color-lavender); }
@media (pointer: coarse) { .dashboard-calendar-day { min-height: 48px; } }

/* Five-minute rows keep lessons and empty breaks aligned across every day. */
.week-timetable-scroll { overflow-x: auto; padding-bottom: 8px; }
.week-timetable { display: grid; grid-template-columns: 64px repeat(7, minmax(180px, 1fr)); min-width: 1324px; border: 1px solid var(--color-surface-2); background: var(--color-base); font-family: 'Press Start 2P', 'Noto Sans CJK SC', 'Noto Sans CJK TC', 'Noto Sans CJK JP', 'Source Han Sans SC', 'Microsoft YaHei', 'Yu Gothic', 'Hiragino Sans GB', 'PingFang SC', sans-serif; font-size: 8px; line-height: 1.5; color: var(--color-text); }
.week-timetable-header { padding: 12px 8px; text-align: center; border-right: 1px solid var(--color-surface-2); border-bottom: 2px solid var(--color-surface-2); }
.week-timetable-day, .week-timetable-times { display: grid; grid-template-rows: repeat(93, 8px); min-width: 0; border-right: 1px solid var(--color-surface-2); }
.week-timetable-day:last-child, .week-timetable-header:nth-child(8) { border-right: 0; }
.week-timetable-times { position: sticky; left: 0; z-index: 2; background: var(--color-base); }
.week-timetable-times span { padding: 4px; border-top: 1px solid var(--surface-1); }
.week-timetable-line { grid-column: 1; border-top: 1px solid var(--surface-1); pointer-events: none; }
.week-timetable-class { grid-column: 1; z-index: 1; min-width: 0; margin: 2px 4px; padding: 4px; border: 1px solid var(--color-lavender); background: var(--surface-1); overflow-wrap: anywhere; }
.week-timetable-today { background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--color-peach); }
html.dark .week-timetable-today { background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--color-peach); }


/* SVG artwork is immutable across modes and color-scheme selections. */
svg {
  color: #4c4f69 !important;
  --pixel-stroke: #4c4f69;
  --pixel-base: #eff1f5;
  --calendar-accent: #7287fd;
  --color-rosewater: #dc8a78;
  --color-flamingo: #dd7878;
  --color-pink: #ea76cb;
  --color-mauve: #8839ef;
  --color-red: #d20f39;
  --color-maroon: #e64553;
  --color-peach: #fe640b;
  --color-yellow: #df8e1d;
  --color-green: #40a02b;
  --color-teal: #179299;
  --color-sky: #04a5e5;
  --color-sapphire: #209fb5;
  --color-blue: #1e66f5;
  --color-lavender: #7287fd;
  --color-text: #4c4f69;
  --color-subtext-1: #5c5f77;
  --color-subtext-0: #6c6f85;
  --color-overlay-2: #7c7f93;
  --color-overlay-1: #8c8fa1;
  --color-overlay-0: #9ca0b0;
  --color-surface-2: #acb0be;
  --color-surface-1: #bcc0cc;
  --color-surface-0: #ccd0da;
  --color-base: #eff1f5;
  --color-mantle: #e6e9ef;
  --color-crust: #dce0e8;
}

/* Private patch rotation surface. */
.patch-tracker, .patch-tracker * { font-family: 'Press Start 2P', 'Noto Sans CJK SC', 'Noto Sans CJK TC', 'Noto Sans CJK JP', 'Source Han Sans SC', 'Microsoft YaHei', 'Yu Gothic', 'Hiragino Sans GB', 'PingFang SC', sans-serif; }
.patch-tracker { line-height: 1.9; letter-spacing: 0; overflow-wrap: anywhere; }
.patch-tracker .text-xs { font-size: 10px; }
.patch-tracker input, .patch-tracker button, .patch-tracker code { font-size: 10px; line-height: 1.8; }
.patch-tracker input { width: 100%; min-width: 0; }
.patch-tracker summary { list-style-position: inside; }
.patch-tracker summary::marker { color: var(--foreground-lavender); }
.patch-heading-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.patch-heading-row > * { min-width: 0; }
.patch-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.patch-location { font-size: 12px; line-height: 1.9; color: var(--foreground-text); }
.patch-age-label { font-size: 9px; }
.patch-removal-due { border-color: var(--color-red); }
.patch-removal-due .patch-age-label { color: var(--color-red); }
@media (min-width: 640px) and (pointer: fine) {
  .patch-tracker button:not(.pixel-switch) { min-height: 34px; padding-block: 7px; }
}

/* Local-only pharmacokinetic playground, sharing the pixel-art control vocabulary. */
.pk-simulator { line-height: 1.9; letter-spacing: 0; }
.pk-simulator .text-xs, .pk-simulator input, .pk-simulator button, .pk-simulator select { font-size: 10px; }
.pk-simulator input, .pk-simulator select { width: 100%; }
.pk-heading-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.pk-heading-row > *, .pk-toolbar > *, .pk-row-controls > * { min-width: 0; }
.pk-heading-row > button { margin-inline-start: auto; }
.pk-plot-card { display: flex; flex-direction: column; gap: 16px; }
.pk-plot-card > * { margin-top: 0 !important; }
@media (max-width: 639px) {
    .pk-plot-card > .pk-chart-heading { order: 0; }
    .pk-plot-card > .pk-chart-plot { order: 1; }
    .pk-plot-card > .pk-chart-cursor { order: 2; }
    .pk-plot-card > .pk-chart-legend { order: 3; }
    .pk-plot-card > .pk-chart-summary { order: 4; }
    .pk-plot-card > .pk-chart-notes { order: 5; }
    .pk-plot-card > .pk-chart-toolbar { order: 6; }
    .pk-plot-card > .pk-chart-baseline { order: 7; }
    .pk-plot-card > .pk-chart-references { order: 8; }
    .pk-plot-card > .pk-chart-note { order: 9; }
}
.pk-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; }
.pk-toolbar label { display: flex; align-items: flex-end; min-height: 3.4em; margin-bottom: 8px; line-height: 1.6; }
.pk-row-controls { display: grid; gap: 16px; }
.pk-row-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.pk-row-controls label, .pk-row-fields label { display: block; line-height: 1.6; }
.pk-plot { min-width: 0; padding: 6px; border: 2px solid var(--outline); background: var(--color-base); }
.pk-plot canvas { display: block; width: 100%; height: clamp(240px, 38vw, 340px); color: var(--foreground-text); touch-action: pan-y; }
.pk-reference-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-block: 12px; border-block: 1px solid var(--outline); }
.pk-reference-row .pixel-switch { min-width: 0; }
.pk-switch-label { font-size: 10px; white-space: nowrap; }
.pk-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.pk-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.pk-swatch { display: inline-block; flex-shrink: 0; width: 12px; height: 12px; border: 1px solid var(--outline); }
.pk-total-swatch { background: var(--foreground-text); }
.pk-cycle-swatch { background: #dc8a78; }
.pk-summary { display: flex; flex-wrap: wrap; gap: 12px 32px; border-block: 1px solid var(--outline); padding-block: 12px; }
.pk-summary strong { display: block; margin-top: 8px; color: var(--foreground-lavender); }
.pk-row-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.pk-row-title { display: flex; flex: 1 1 12rem; align-items: center; gap: 10px; font-size: 11px; min-width: 0; overflow-wrap: anywhere; }
.pk-row-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; border-top: 1px solid var(--outline); padding-top: 12px; }
.pk-remove { flex-shrink: 0; }
.pk-error { padding: 16px; border: 2px solid var(--color-red); background: var(--color-mantle); }
.pk-notes { max-width: 82ch; }
.pk-evidence-table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; }
.pk-evidence-table th, .pk-evidence-table td { padding: 10px 8px; border-bottom: 1px solid var(--outline); }
.pk-evidence-table th { color: var(--foreground-lavender); }
@media (min-width: 640px) and (pointer: fine) {
    .pk-simulator button:not(.pixel-switch) { min-height: 34px; padding-block: 7px; }
}
.pk-simulator textarea { width: 100%; min-width: 0; font: inherit; font-size: 10px; line-height: 1.9; resize: vertical; }
.pk-simulator label { font-size: 10px; line-height: 1.8; }
.pk-simulator summary { list-style-position: inside; color: var(--foreground-lavender); }
.pk-simulator p, .pk-simulator li { overflow-wrap: anywhere; }
.pk-simulator .pk-notes { max-width: 78ch; }
.pk-table-scroll { max-height: 560px; min-width: 0; overflow: auto; scrollbar-gutter: stable; border-block: 1px solid var(--outline); }
.pk-table-scroll .pk-evidence-table { font-size: 9px; line-height: 1.9; }
.pk-table-scroll th, .pk-table-scroll td { min-width: 120px; vertical-align: top; overflow-wrap: anywhere; }
.pk-table-scroll thead { position: sticky; top: 0; z-index: 1; background: var(--color-mantle); }
.pk-table-scroll td p + p { margin-top: 8px; }
.pk-research-warnings { padding: 16px; border: 2px solid var(--color-peach); background: var(--color-mantle); }
.pk-research-warnings ul { padding-left: 18px; list-style: square; }
.pk-timeline { max-height: 280px; overflow: auto; scrollbar-gutter: stable; border-block: 1px solid var(--outline); }
.pk-timeline-event { display: grid; grid-template-columns: 12px minmax(140px, 1fr) minmax(180px, 1.5fr); gap: 8px 12px; align-items: start; padding-block: 12px; border-bottom: 1px solid var(--outline); }
.pk-timeline-event > :last-child { grid-column: 2 / -1; color: var(--foreground-subtext-0); }
.pk-timeline-event > .pk-swatch { margin-top: 3px; }
.pk-timeline-event > :nth-child(4) { grid-column: 2 / -1; color: var(--foreground-subtext-0); }
.pk-timeline-lane { position: relative; grid-column: 2 / -1; height: 12px; border: 1px solid var(--outline); background: var(--color-base); overflow: hidden; }
.pk-timeline-lane > span { position: absolute; top: 0; bottom: 0; border-inline: 1px solid var(--outline); }
.pk-coverage { max-height: 220px; overflow: auto; scrollbar-gutter: stable; padding: 12px; border: 1px solid var(--outline); background: var(--color-base); }
.pk-lab-row { border-block-start: 1px solid var(--outline); padding-top: 16px; }
.pk-labs > .pixel-switch { margin-top: 16px; }
.pk-json { max-height: 360px; max-width: 100%; padding: 14px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--outline); background: var(--color-base); font-family: inherit; line-height: 1.9; }
.pk-source-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px 24px; }
.pk-source { border-top: 1px solid var(--outline); padding-top: 12px; }
.pk-source p { margin-top: 10px; color: var(--foreground-subtext-0); }
.pk-share-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; padding-block: 12px; }
.pk-guest-header { gap: 16px; }
.pk-simulator .pixel-switch { max-width: 100%; }
.pk-simulator .pk-switch-label { white-space: normal; text-align: left; }
@media (max-width: 639px) {
    .pk-timeline-event { grid-template-columns: 12px minmax(0, 1fr); }
    .pk-timeline-event > :nth-child(3) { grid-column: 2; }
    .pk-guest-header { position: static; flex-wrap: wrap; }
    .pk-labs .pk-row-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Browser-only tablet projection and area editor. */
.osu-area { font-size: 10px; line-height: 1.9; letter-spacing: 0; }
.osu-area .text-xs, .osu-area input, .osu-area textarea, .osu-area button, .osu-area select { font-size: 10px; }
.osu-area h2 { font-size: 11px; }
.osu-area h1 { line-height: 1.9; }
.osu-area p { max-width: 105ch; }
.osu-area input, .osu-area textarea, .osu-area select { width: 100%; }
.osu-area textarea { line-height: 1.9; resize: vertical; overflow-wrap: anywhere; }
.osu-area label { display: block; }
.osu-area label > input, .osu-area label > textarea { display: block; margin-top: 8px; }
.osu-area-workspace { display: grid; grid-template-columns: minmax(0, 1fr); border: 2px solid var(--outline); background: var(--color-mantle); box-shadow: 3px 3px 0 var(--shadow-color); }
.osu-area-stage { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px; background: var(--color-mantle); }
.osu-area-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-width: 0; }
.osu-area-heading > * { min-width: 0; }
.osu-area-capture-state { flex-shrink: 0; }
.osu-area-plot { position: relative; min-width: 0; border: 2px solid var(--outline); background: var(--color-base); }
.osu-area-plot canvas { display: block; width: 100%; height: clamp(280px, 42vw, 540px); touch-action: none; cursor: crosshair; }
.osu-area-recording { border-color: var(--color-red); }
.osu-area-empty { position: absolute; inset: 25% max(12%, 32px) 25% max(12%, 80px); display: flex; flex-direction: column; justify-content: center; gap: 16px; text-align: center; color: var(--foreground-text); pointer-events: none; }
.osu-area-empty p { padding: 8px; background: var(--color-base); }
.osu-area-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.osu-area-setup { min-width: 0; border-top: 2px solid var(--outline); padding: 16px; }
.osu-area summary { cursor: pointer; padding-block: 8px; color: var(--foreground-lavender); }
.osu-area-setup-content { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.osu-area-catalog { max-height: 200px; overflow-y: auto; scrollbar-gutter: stable; border-block: 1px solid var(--outline); }
.osu-area-catalog button { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px 8px; text-align: left; border-bottom: 1px solid var(--outline); color: var(--foreground-text); }
.osu-area-catalog button:last-child { border-bottom: 0; }
.osu-area-catalog button:hover:not(:disabled), .osu-area-catalog button:focus-visible { background: var(--fill-lavender); color: var(--on-lavender); }
.osu-area-catalog button:hover:not(:disabled) span, .osu-area-catalog button:focus-visible span { color: inherit; }
.osu-area-form { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.osu-area-form > button { align-self: flex-start; }
.osu-area-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
.osu-area-fields label, .osu-area-geometry-fields label { display: flex; flex-direction: column; justify-content: space-between; line-height: 1.9; min-width: 0; }
.osu-area-geometry, .osu-area-results, .osu-area-files, .osu-area-sources { border-top: 2px solid var(--outline); padding-top: 20px; }
.osu-area-geometry, .osu-area-results, .osu-area-files { display: flex; flex-direction: column; gap: 16px; }
.osu-area-geometry-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.osu-area-result-intro { margin-bottom: 16px; color: var(--foreground-lavender); }
.osu-area-driver-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px 24px; padding-block: 16px; }
.osu-area-driver-grid dt { color: var(--foreground-subtext-0); }
.osu-area-driver-grid dd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.osu-area-driver-grid dd > span { overflow-wrap: anywhere; }
.osu-area-driver-grid button { flex-shrink: 0; }
.osu-area-formulas { border-top: 1px solid var(--outline); margin-top: 12px; padding-top: 12px; }
.osu-area-formulas > p, .osu-area-formulas > label, .osu-area-formulas > button { margin-top: 16px; }
.osu-area-error, .osu-area-notice { padding: 12px; border: 2px solid var(--color-red); background: var(--color-mantle); }
.osu-area-notice { border-color: var(--color-peach); }
.osu-area-results .osu-area-notice { margin-bottom: 16px; }
.osu-area-stage:fullscreen { width: 100%; height: 100dvh; padding: 16px; overflow: auto; background: var(--color-mantle); color: var(--foreground-text); }
.osu-area-stage:fullscreen .osu-area-plot { flex: 1 0 250px; min-height: 250px; }
.osu-area-stage:fullscreen canvas { height: 100%; min-height: 250px; }
.osu-area-stage:fullscreen p { font-size: 9px; }
@media (min-width: 640px) and (pointer: fine) {
    .osu-area button { min-height: 34px; padding-block: 7px; }
    .osu-area input { min-height: 36px !important; }
}
@media (min-width: 900px) {
    .osu-area-workspace { grid-template-columns: 270px minmax(0, 1fr); }
    .osu-area-setup { grid-row: 1; grid-column: 1; border-top: 0; border-right: 2px solid var(--outline); }
    .osu-area-stage { grid-row: 1; grid-column: 2; }
    .osu-area-geometry-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Grouped navigation and the private daily workspace. */
.app-navigation { flex: 0 0 248px; position: sticky; top: 0; height: 100dvh; min-width: 0; z-index: 30; }
.desktop-navigation { display: flex; flex-direction: column; height: 100%; padding: 20px 14px; border-right: 2px solid var(--outline); background: var(--color-mantle); gap: 12px; }
.navigation-brand { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 16px; color: var(--foreground-peach); padding-block: 4px; }
.navigation-account { font-size: 9px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--foreground-subtext-0); }
.navigation-search { display: flex; align-items: center; gap: 9px; padding: 9px; min-width: 0; border: 2px solid var(--outline); background: var(--fill-lavender); color: var(--on-lavender); font-size: 9px; text-align: left; }
.navigation-search kbd { margin-left: auto; font: inherit; font-size: 8px; white-space: nowrap; }
.navigation-groups { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding-right: 4px; }
.navigation-group { border-top: 1px solid var(--outline); margin-top: 5px; }
.navigation-group summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 8px; cursor: pointer; list-style: none; font-size: 10px; color: var(--foreground-lavender); }
.navigation-group summary::-webkit-details-marker { display: none; }
.navigation-group[open] summary > svg { transform: rotate(180deg); }
.navigation-link { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 38px; padding: 8px; border: 2px solid transparent; font-size: 10px; color: var(--foreground-subtext-0); line-height: 1.8; }
.navigation-link > span { min-width: 0; overflow-wrap: anywhere; }
.navigation-link:hover, .navigation-link:focus-visible { background: var(--color-surface-0); color: var(--foreground-text); }
.navigation-link[aria-current="page"] { border-color: var(--outline); background: var(--fill-lavender); color: var(--on-lavender); }
.navigation-footer { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid var(--outline); font-size: 9px; }
.navigation-footer button { font-size: 9px; min-height: 34px; }
.mobile-primary-navigation { display: none; }
.all-pages-popover { position: fixed; inset: auto 12px 84px; margin: 0; width: auto; max-height: calc(100dvh - 168px); overflow-y: auto; padding: 16px; border: 2px solid var(--outline); background: var(--color-base); color: var(--foreground-text); box-shadow: 3px 3px 0 var(--shadow-color); }
.all-pages-groups { display: grid; gap: 18px; }
.all-pages-groups h3 { padding-bottom: 8px; font-size: 10px; color: var(--foreground-lavender); border-bottom: 1px solid var(--outline); }
.all-pages-groups section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding-top: 4px; }
.command-palette { width: min(620px, calc(100vw - 24px)); max-height: min(680px, calc(100dvh - 48px)); margin: auto; padding: 0; overflow: hidden; border: 2px solid var(--outline); background: var(--color-base); color: var(--foreground-text); box-shadow: 4px 4px 0 var(--shadow-color); }
.command-palette::backdrop { background: rgb(0 0 0 / 50%); }
.command-palette-content { display: flex; flex-direction: column; gap: 16px; max-height: calc(100dvh - 52px); padding: 20px; }
.command-palette-content > input { flex-shrink: 0; }
.command-results { overflow-y: auto; min-height: 0; }
.command-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 12px; font-size: 10px; line-height: 1.8; border-bottom: 1px solid var(--outline); }
.command-result-selected { background: var(--fill-lavender); color: var(--on-lavender); }
.command-result-group { font-size: 8px; color: var(--foreground-subtext-0); flex-shrink: 0; }
.command-result-selected .command-result-group { color: inherit; }
.today-overview { border: 2px solid var(--outline); background: var(--color-base); box-shadow: 3px 3px 0 var(--shadow-color); }
.today-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; background: var(--fill-lavender); color: var(--on-lavender); border-bottom: 2px solid var(--outline); flex-wrap: wrap; }
.today-heading h2 { font-size: 12px; line-height: 1.9; }
.today-heading p { font-size: 9px; line-height: 1.9; margin-top: 9px; }
.today-workspace { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.today-agenda, .today-actions-lane { min-width: 0; padding: 20px; }
.today-actions-lane { border-left: 1px solid var(--outline); }
.today-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.today-section-heading h3 { font-size: 10px; line-height: 1.9; }
.today-section-heading a, .today-forecast a { font-size: 9px; color: var(--foreground-lavender); text-decoration: underline; text-underline-offset: 3px; }
.today-secondary-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--outline); }
.today-class-list { display: grid; gap: 4px; list-style: none; }
.today-class-list > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--outline); font-size: 9px; line-height: 1.9; }
.today-class-list > li:last-child { border-bottom: 0; }
.today-class-time { color: var(--foreground-lavender); }
.today-class-time > span { display: block; margin-top: 5px; color: var(--foreground-subtext-0); }
.today-class-state { grid-column: 2; }
.today-class-current { background: var(--fill-green); padding-inline: 8px !important; color: var(--on-green); }
.today-class-current .text-subtext-0, .today-class-current .today-class-time, .today-class-current .today-class-time > span, .today-class-current .today-class-state { color: inherit; }
.today-empty { font-size: 9px; line-height: 2; color: var(--foreground-subtext-0); }
.today-task-list { display: grid; gap: 12px; list-style: none; }
.today-task-list > li { display: flex; align-items: flex-start; gap: 10px; font-size: 9px; line-height: 1.9; min-width: 0; }
.today-task-list > li > div { min-width: 0; overflow-wrap: anywhere; }
.today-task-list p { margin-top: 5px; }
.today-task-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-width: 34px; min-height: 34px; border: 2px solid var(--outline); background: var(--fill-green); }
.today-study-row, .today-bill-row { display: flex; justify-content: space-between; gap: 14px; margin-top: 12px; font-size: 9px; line-height: 1.9; overflow-wrap: anywhere; }
.today-study-row > span:first-child, .today-bill-row > span:last-child { flex-shrink: 0; }
.today-bill-row small { display: block; font: inherit; margin-top: 5px; }
.today-actions-lane section > p { font-size: 9px; line-height: 1.9; overflow-wrap: anywhere; }
.today-forecast { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; border-top: 2px solid var(--outline); background: var(--color-mantle); }
.today-forecast h3 { font-size: 10px; }
.today-forecast p { font-size: 9px; line-height: 1.9; margin-top: 10px; max-width: 60ch; color: var(--foreground-subtext-0); }
.today-forecast > div:last-child { display: grid; gap: 10px; flex-shrink: 0; }
.today-forecast strong { font-size: 14px; }
@media (max-width: 767px) {
    /* Reserve the fixed navigation and sticky header when revealing page focus. */
    html {
        --mobile-nav-height: calc(70px + env(safe-area-inset-bottom, 0px));
        scroll-padding-block: 78px calc(var(--mobile-nav-height) + 12px);
    }
    #main-content {
        padding-bottom: calc(var(--mobile-nav-height) + 24px);
        scroll-padding-block: 78px calc(var(--mobile-nav-height) + 12px);
    }
    .app-navigation { flex: 0 0 0; position: static; width: 0; height: 0; }
    .desktop-navigation { display: none; }
    .mobile-primary-navigation { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--color-mantle); border-top: 2px solid var(--outline); }
    .mobile-primary-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 56px; padding: 6px 1px; font-size: 8px; border: 2px solid transparent; color: var(--foreground-subtext-0); }
    .mobile-primary-link[aria-current="page"], .mobile-primary-link[data-current="true"] { background: var(--fill-lavender); border-color: var(--outline); color: var(--on-lavender); }
    .navigation-link { min-height: 44px; font-size: 9px; }
    .navigation-search { min-height: 44px; }
    .osu-area-empty p + p { display: none; }
    .today-workspace { grid-template-columns: minmax(0, 1fr); }
    .today-actions-lane { border-left: 0; border-top: 1px solid var(--outline); }
    .today-forecast { flex-direction: column; align-items: stretch; }
    .today-task-toggle { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
}

/* Private categorical patch map. SVG palette values are authored and fixed. */
.patch-map-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.patch-map-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.patch-map-figure { margin: 0; display: grid; justify-items: center; gap: 12px; }
.patch-map-figure figcaption { color: var(--foreground-lavender); }
.patch-body-svg { display: block; width: min(100%, 176px); height: auto; overflow: visible; }
.patch-body-svg text { font-size: 8px; line-height: 1; pointer-events: none; }
.patch-map-region { cursor: pointer; }
.patch-map-region-shape { transition: stroke-width 120ms ease-out; }
.patch-map-region:hover .patch-map-region-shape { stroke-width: 4; }
.patch-map-region:focus { outline: none; }
.patch-map-region:focus-visible .patch-map-region-shape, .patch-map-region.is-selected .patch-map-region-shape { stroke: #1e1e2e; stroke-width: 4; stroke-dasharray: 6 3; }
.patch-map-caption { grid-column: 1 / -1; margin: 4px 0 0; }
.patch-region-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.patch-region-filter { display: grid; align-content: center; gap: 4px; min-height: 56px; min-width: 0; padding: 10px; border: 2px solid var(--color-surface-1); background: var(--color-base); font-size: 9px; line-height: 1.8; text-decoration: none; }
.patch-region-filter:first-child { grid-column: 1 / -1; }
.patch-region-filter .patch-heading-row { gap: 4px 8px; }
.patch-region-filter:hover { border-color: var(--color-lavender); }
.patch-region-filter.is-selected { border-color: var(--color-pink); box-shadow: inset 0 -3px 0 var(--color-pink); }
.patch-region-filter.is-selected > span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.patch-region-filter:focus-visible { outline: 3px solid var(--color-lavender); outline-offset: 3px; }
@media (min-width: 900px) { .patch-map-layout { grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr); } }
@media (max-width: 379px) { .patch-region-list { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .patch-map-region-shape { transition: none; } }