@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
--spacing: 0.25rem;
--font-weight-extralight: 200;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--default-mono-font-family: var(--font-mono);
--text-fine: 12px;
--text-meta: 13px;
--text-body: 15px;
--text-body--line-height: 1.45;
--text-title-sm: 22px;
--text-title-sm--line-height: 1.2;
--text-title: 26px;
--text-title--line-height: 1.2;
}
}
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: "Geist Mono", ui-monospace, monospace;
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring:where(:not(iframe)) {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden='until-found'])) {
display: none !important;
}
}
@layer utilities {
.absolute {
position: absolute;
}
.static {
position: static;
}
.m-0 {
margin: 0px;
}
.mx-auto {
margin-inline: auto;
}
.-mt-1\.5 {
margin-top: calc(var(--spacing) * -1.5);
}
.mt-0 {
margin-top: 0px;
}
.mt-0\.5 {
margin-top: calc(var(--spacing) * 0.5);
}
.mt-3 {
margin-top: calc(var(--spacing) * 3);
}
.mt-7 {
margin-top: calc(var(--spacing) * 7);
}
.mb-0 {
margin-bottom: 0px;
}
.mb-2\.5 {
margin-bottom: calc(var(--spacing) * 2.5);
}
.mb-3\.5 {
margin-bottom: calc(var(--spacing) * 3.5);
}
.mb-5 {
margin-bottom: calc(var(--spacing) * 5);
}
.block {
display: block;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.inline {
display: inline;
}
.size-16 {
width: calc(var(--spacing) * 16);
height: calc(var(--spacing) * 16);
}
.size-\[200px\] {
width: 200px;
height: 200px;
}
.w-\[1\.5em\] {
width: 1.5em;
}
.max-w-\[760px\] {
max-width: 760px;
}
.min-w-0 {
min-width: 0px;
}
.min-w-24 {
min-width: calc(var(--spacing) * 24);
}
.flex-1 {
flex: 1;
}
.flex-none {
flex: none;
}
.cursor-pointer {
cursor: pointer;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.gap-1\.5 {
gap: calc(var(--spacing) * 1.5);
}
.gap-2 {
gap: calc(var(--spacing) * 2);
}
.gap-2\.5 {
gap: calc(var(--spacing) * 2.5);
}
.gap-3 {
gap: calc(var(--spacing) * 3);
}
.gap-3\.5 {
gap: calc(var(--spacing) * 3.5);
}
.gap-5 {
gap: calc(var(--spacing) * 5);
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rounded-lg {
border-radius: var(--radius-lg);
}
.rounded-md {
border-radius: var(--radius-md);
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-brand {
border-color: var(--brand);
}
.border-rule {
border-color: var(--rule);
}
.bg-brand {
background-color: var(--brand);
}
.bg-surface {
background-color: var(--surface);
}
.bg-transparent {
background-color: transparent;
}
.object-cover {
object-fit: cover;
}
.px-3 {
padding-inline: calc(var(--spacing) * 3);
}
.px-4 {
padding-inline: calc(var(--spacing) * 4);
}
.py-2\.5 {
padding-block: calc(var(--spacing) * 2.5);
}
.pt-\[max\(24px\,env\(safe-area-inset-top\)\)\] {
padding-top: max(24px, env(safe-area-inset-top));
}
.pb-12 {
padding-bottom: calc(var(--spacing) * 12);
}
.text-right {
text-align: right;
}
.text-\[17px\] {
font-size: 17px;
}
.text-fine {
font-size: var(--text-fine);
}
.text-meta {
font-size: var(--text-meta);
}
.font-bold {
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
.font-semibold {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
.tracking-\[\.08em\] {
--tw-tracking: .08em;
letter-spacing: .08em;
}
.wrap-anywhere {
overflow-wrap: anywhere;
}
.text-bg {
color: var(--bg);
}
.text-ink {
color: var(--ink);
}
.text-muted {
color: var(--muted);
}
.uppercase {
text-transform: uppercase;
}
.italic {
font-style: italic;
}
.tabular-nums {
--tw-numeric-spacing: tabular-nums;
font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
}
.accent-brand {
accent-color: var(--brand);
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.group-\[\.playing\]\:text-brand:is(:where(.group):is(.playing) *) {
color: var(--brand);
}
@media (hover: hover) {
.hover\:border-hover:hover {
border-color: var(--hover);
}
}
@media (width < 561px) {
.max-wide\:aspect-square {
aspect-ratio: 1 / 1;
}
.max-wide\:h-auto {
height: auto;
}
.max-wide\:w-full {
width: 100%;
}
.max-wide\:flex-col {
flex-direction: column;
}
.max-wide\:items-stretch {
align-items: stretch;
}
}
.\[\&\.missing\]\:invisible.missing {
visibility: hidden;
}
.\[\&\.playing\]\:border-l-3.playing {
border-left-style: var(--tw-border-style);
border-left-width: 3px;
}
.\[\&\.playing\]\:border-l-brand.playing {
border-left-color: var(--brand);
}
}
@font-face {
font-family: "Geist Mono";
src: url("geist-mono.woff2") format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
color-scheme: dark light;
--bg: #1e1e1e;
--surface: #2a2a2a;
--rule: #383838;
--hover: #4d4d4d;
--ink: #cccccc;
--muted: #8c8c8c;
--brand: #7dd3a7;
--bad: #ef6b73;
}
@media (prefers-color-scheme: light) {
:root {
--bg: #ffffff;
--surface: #f2f2f2;
--rule: #e0e0e0;
--hover: #c4c4c4;
--ink: #333333;
--muted: #666666;
--brand: #1f7a50;
--bad: #c43f3f;
}
}
@layer base {
html, body {
overflow-x: hidden;
}
html {
-webkit-tap-highlight-color: revert;
}
body {
background-color: var(--bg);
font-size: var(--text-body);
line-height: var(--tw-leading, var(--text-body--line-height));
color: var(--ink);
-webkit-text-size-adjust: 100%;
}
a {
color: var(--brand);
text-decoration-line: underline;
}
p {
margin-block: 1em;
}
h1 {
margin-block: var(--spacing);
font-size: var(--text-title);
line-height: var(--tw-leading, var(--text-title--line-height));
--tw-font-weight: var(--font-weight-extralight);
font-weight: var(--font-weight-extralight);
overflow-wrap: anywhere;
@media (width < 561px) {
font-size: var(--text-title-sm);
line-height: var(--tw-leading, var(--text-title-sm--line-height));
}
}
input[type="range"] {
margin: revert;
}
button {
cursor: pointer;
border-radius: var(--radius-md);
border-style: var(--tw-border-style);
border-width: 1px;
border-color: var(--rule);
background-color: var(--rule);
padding-inline: calc(var(--spacing) * 3.5);
padding-block: calc(var(--spacing) * 2);
color: var(--ink);
&:disabled {
cursor: default;
}
&:disabled {
opacity: 50%;
}
}
}
@property --tw-border-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-font-weight {
syntax: "*";
inherits: false;
}
@property --tw-tracking {
syntax: "*";
inherits: false;
}
@property --tw-ordinal {
syntax: "*";
inherits: false;
}
@property --tw-slashed-zero {
syntax: "*";
inherits: false;
}
@property --tw-numeric-figure {
syntax: "*";
inherits: false;
}
@property --tw-numeric-spacing {
syntax: "*";
inherits: false;
}
@property --tw-numeric-fraction {
syntax: "*";
inherits: false;
}
@property --tw-blur {
syntax: "*";
inherits: false;
}
@property --tw-brightness {
syntax: "*";
inherits: false;
}
@property --tw-contrast {
syntax: "*";
inherits: false;
}
@property --tw-grayscale {
syntax: "*";
inherits: false;
}
@property --tw-hue-rotate {
syntax: "*";
inherits: false;
}
@property --tw-invert {
syntax: "*";
inherits: false;
}
@property --tw-opacity {
syntax: "*";
inherits: false;
}
@property --tw-saturate {
syntax: "*";
inherits: false;
}
@property --tw-sepia {
syntax: "*";
inherits: false;
}
@property --tw-drop-shadow {
syntax: "*";
inherits: false;
}
@property --tw-drop-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-drop-shadow-alpha {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-drop-shadow-size {
syntax: "*";
inherits: false;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-border-style: solid;
--tw-font-weight: initial;
--tw-tracking: initial;
--tw-ordinal: initial;
--tw-slashed-zero: initial;
--tw-numeric-figure: initial;
--tw-numeric-spacing: initial;
--tw-numeric-fraction: initial;
--tw-blur: initial;
--tw-brightness: initial;
--tw-contrast: initial;
--tw-grayscale: initial;
--tw-hue-rotate: initial;
--tw-invert: initial;
--tw-opacity: initial;
--tw-saturate: initial;
--tw-sepia: initial;
--tw-drop-shadow: initial;
--tw-drop-shadow-color: initial;
--tw-drop-shadow-alpha: 100%;
--tw-drop-shadow-size: initial;
}
}
}
