@property --hue{syntax:"<hue>";inherits:true}:root{--hue:105deg;--contrast-hue:calc(var(--hue) + 180deg);--radius:8px;--radius-lg:calc(var(--radius) * 3);--accent:oklch(90% 20% var(--hue));--on-accent:oklch(30% 17% var(--hue));--background:oklch(10% 10% var(--contrast-hue));--on-background:oklch(95% 10% var(--contrast-hue));--surface:oklch(25% 5% var(--contrast-hue));--hyperlink:#7a9eff;color-scheme:dark;accent-color:var(--accent)}*{box-sizing:border-box}h1,h2,h3,h4,h5,h6,p{margin-block:unset;line-height:1.5}html{font-family:system-ui}body{background-color:var(--background);color:var(--on-background);display:grid;grid-gap:24px;gap:24px}a{text-decoration:none}ul{list-style:none;margin-block:unset;-webkit-padding-start:unset;padding-inline-start:unset}.surface{background-color:var(--surface);border-radius:var(--radius-lg);padding:16px 24px}.surface.outline{border:2px solid var(--accent)}a.fill,button.fill{border:none;background-color:var(--accent);color:var(--on-accent);border-radius:var(--radius);padding:8px 16px}a.outline,button.outline{border:1px solid var(--accent);background-color:transparent;border-radius:var(--radius);padding:8px 16px}