diff --git a/demo.html b/demo.html
new file mode 100644
index 0000000..2ec36bb
--- /dev/null
+++ b/demo.html
@@ -0,0 +1,250 @@
+
+
+
+ dev.css Demo
+ Heading 1
+
+ This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
+ elit.
+
+ Heading 2
+
+ This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
+ elit.
+
+ Heading 3
+
+ This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
+ elit.
+
+ Heading 4
+
+ This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
+ elit.
+
+ Heading 5
+
+ This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
+ elit.
+
+ Heading 6
+
+ This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
+ elit.
+
+
+
+ Lorem ipsum dolor sit amet
+ consectetur adipisicing elit. Aut
+ harum molestias labore amet possimus
+ exercitationem aperiam earum, doloribus
+ nobis ducimus maiores quia voluptates quis omnis molestiae
+ quisquam. Voluptatibus, officiis laudantium?
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Hic culpa, nobis doloremque veniam non, nihil cupiditate odit
+ repellat est ALT + F4 expedita facilis. Fuga aspernatur, alias
+ debitis eveniet totam minima vel.
+
+
+
+ List item
+ List item
+ List item
+ List item
+
+
+
+ Step 1
+ Step 2
+ ????
+ Profit!
+
+
+
+ Web
+ The part of the Internet that contains websites and web pages
+ HTML
+ A markup language for creating web pages
+ CSS
+ A technology to make HTML look better
+
+
+
+ If you think privacy is unimportant for you because you have nothing to
+ hide, you might as well say free speech is unimportant for you because you
+ have nothing useful to say.
+
+
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>Hello World</title>
+</head>
+<body>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</body>
+</html>
+
+
+
+ Ho-kago Tea Time
+
+
+
+ Name
+ Instrument
+
+
+
+
+ Yui Hirasawa
+ Lead Guitar
+
+
+ Mio Akiyama
+ Bass
+
+
+ Ritsu Tainaka
+ Drums
+
+
+ Tsumugi Kotobuki
+ Keyboard
+
+
+ Azusa Nakano
+ Rhythm Guitar
+
+
+
+
+ Name
+ Instrument
+
+
+
+
+
+ Inline image:
+
+
+
diff --git a/dev.css b/dev.css
new file mode 100644
index 0000000..bff81eb
--- /dev/null
+++ b/dev.css
@@ -0,0 +1,438 @@
+:root {
+ /* Fonts - Geist, Inter, Apple default (Gecko and Blink), Microsoft default, browser default */
+ --dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
+ "Segoe UI", sans-serif;
+ --dc-font-mono: "Geist Mono", monospace;
+ /* Light colors */
+ --dc-tx-1: #000000;
+ --dc-tx-2: #1a1a1a;
+ --dc-bg-1: #fafafa;
+ --dc-bg-2: #fff;
+ --dc-bg-3: #ebebeb;
+ --dc-lk-1: #0068d6;
+ --dc-lkb-1: #0072f5;
+ --dc-lkb-2: #0062d1;
+ --dc-lkb-tx: #ededed;
+ --dc-ac-1: #8e4ec6;
+ --dc-ac-tx: #ededed;
+ /* Dark colors */
+ --dc-d-tx-1: #ededed;
+ --dc-d-tx-2: #a1a1a1;
+ --dc-d-bg-1: #000;
+ --dc-d-bg-2: #ffffff0f;
+ --dc-d-bg-3: #2e2e2e;
+ --dc-d-lk-1: #52a8ff;
+ --dc-d-lkb-1: #0072f5;
+ --dc-d-lkb-2: #0062d1;
+ --dc-d-lkb-tx: #ededed;
+ --dc-d-ac-1: #8e4ec6;
+ --dc-d-ac-tx: #ededed;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --dc-tx-1: var(--dc-d-tx-1);
+ --dc-tx-2: var(--dc-d-tx-2);
+ --dc-bg-1: var(--dc-d-bg-1);
+ --dc-bg-2: var(--dc-d-bg-2);
+ --dc-bg-3: var(--dc-d-bg-3);
+ --dc-lk-1: var(--dc-d-lk-1);
+ --dc-lkb-1: var(--dc-d-lkb-1);
+ --dc-lkb-2: var(--dc-d-lkb-2);
+ --dc-lkb-tx: var(--dc-d-lkb-tx);
+ --dc-ac-1: var(--dc-d-ac-1);
+ --dc-ac-tx: var(--dc-d-ac-tx);
+ }
+}
+
+* {
+ margin: 0;
+ padding: 0;
+}
+
+address,
+area,
+article,
+aside,
+audio,
+blockquote,
+datalist,
+details,
+dl,
+fieldset,
+figure,
+form,
+input,
+iframe,
+img,
+meter,
+nav,
+ol,
+optgroup,
+option,
+output,
+p,
+pre,
+progress,
+ruby,
+section,
+table,
+textarea,
+ul,
+video {
+ margin-bottom: 1rem;
+}
+
+html,
+input,
+select,
+button {
+ font-family: var(--dc-font-sans);
+}
+
+body {
+ margin: 0 auto;
+ max-width: 750px;
+ padding: 2rem;
+ border-radius: 4px;
+ overflow-x: hidden;
+ word-break: break-word;
+ overflow-wrap: break-word;
+ background: var(--dc-bg-1);
+ color: var(--dc-tx-2);
+ font-size: 1.03rem;
+ line-height: 1.5;
+}
+
+::selection {
+ background: var(--dc-ac-1);
+ color: var(--dc-ac-tx);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ line-height: 1;
+ color: var(--dc-tx-1);
+ padding-top: 0.875rem;
+}
+
+h1,
+h2,
+h3 {
+ padding-bottom: 6px;
+ margin-bottom: 8px;
+ border-bottom: 1px solid var(--dc-bg-3);
+}
+
+h4,
+h5,
+h6 {
+ margin-bottom: 0.3rem;
+}
+
+h1 {
+ font-size: 2.25rem;
+}
+
+h2 {
+ font-size: 1.85rem;
+}
+
+h3 {
+ font-size: 1.55rem;
+}
+
+h4 {
+ font-size: 1.25rem;
+}
+
+h5 {
+ font-size: 1rem;
+}
+
+h6 {
+ font-size: 0.875rem;
+}
+
+a {
+ color: var(--dc-lk-1);
+}
+
+abbr:hover {
+ cursor: help;
+}
+
+blockquote {
+ padding: 1.5rem;
+ background: var(--dc-bg-2);
+ border-left: 5px solid var(--dc-bg-3);
+ border-radius: 4px;
+}
+
+blockquote *:last-child {
+ padding-bottom: 0;
+ margin-bottom: 0;
+}
+
+header {
+ background: var(--dc-bg-2);
+ border-bottom: 1px solid var(--dc-bg-3);
+ padding: 0.75rem;
+ margin: -2rem calc(50% - 50vw) 2rem;
+ padding-left: calc(50vw - 50%);
+ padding-right: calc(50vw - 50%);
+
+ /* Sticky header if supported */
+ position: sticky;
+ top: 0;
+
+ /* Blur for transparent surface if supported */
+ backdrop-filter: blur(16px);
+}
+
+/* Move header to the side to preserve vertical space, if screen is minimum width 1452px */
+@media (min-width: 1452px) {
+ header {
+ width: 260px;
+ height: auto;
+ position: fixed;
+ left: calc(50% - 725px);
+ background: #ffffff00;
+ border-bottom: 0;
+ padding: 2rem 1.5rem;
+ margin: 0;
+
+ /* Disable blur */
+ backdrop-filter: none;
+ }
+}
+
+header h1,
+header h2,
+header h3 {
+ padding-bottom: 0;
+ border-bottom: 0;
+}
+
+header > *:first-child {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+header > *:last-child {
+ margin-bottom: 0;
+}
+
+a button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ font-size: 1rem;
+ display: inline-block;
+ padding: 6px 12px;
+ text-align: center;
+ text-decoration: none;
+ white-space: nowrap;
+ background: var(--dc-lkb-1);
+ color: var(--dc-lkb-tx);
+ border: 0;
+ border-radius: 4px;
+ box-sizing: border-box;
+ cursor: pointer;
+}
+
+a button[disabled],
+button[disabled],
+input[type="submit"][disabled],
+input[type="reset"][disabled],
+input[type="button"][disabled] {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+.button:focus,
+.button:enabled:hover,
+button:focus,
+button:enabled:hover,
+input[type="submit"]:focus,
+input[type="submit"]:enabled:hover,
+input[type="reset"]:focus,
+input[type="reset"]:enabled:hover,
+input[type="button"]:focus,
+input[type="button"]:enabled:hover {
+ background: var(--dc-lkb-2);
+}
+
+a img {
+ margin-bottom: 0;
+}
+
+code,
+pre,
+kbd,
+samp {
+ font-family: var(--dc-font-mono);
+}
+
+code,
+samp,
+kbd,
+pre {
+ background: var(--dc-bg-2);
+ border: 1px solid var(--dc-bg-3);
+ border-radius: 4px;
+ padding: 3px 6px;
+ font-size: 0.9em;
+}
+
+kbd {
+ border-bottom: 3px solid var(--dc-bg-3);
+}
+
+pre {
+ padding: 1rem 1.4rem;
+ max-width: 100%;
+ overflow: auto;
+}
+
+pre code {
+ background: inherit;
+ font-size: inherit;
+ color: inherit;
+ border: 0;
+ padding: 0;
+ margin: 0;
+}
+
+code pre {
+ display: inline;
+ background: inherit;
+ font-size: inherit;
+ color: inherit;
+ border: 0;
+ padding: 0;
+ margin: 0;
+}
+
+details {
+ padding: 0.6rem 1rem;
+ background: var(--dc-bg-2);
+ border: 1px solid var(--dc-bg-3);
+ border-radius: 4px;
+}
+
+summary {
+ cursor: pointer;
+ font-weight: bold;
+}
+
+details[open] {
+ padding-bottom: 0.75rem;
+}
+
+details[open] summary {
+ margin-bottom: 6px;
+}
+
+details[open] > *:last-child {
+ margin-bottom: 0;
+}
+
+dt {
+ font-weight: bold;
+}
+
+dd::before {
+ content: "→ ";
+}
+
+hr {
+ border: 0;
+ border-bottom: 1px solid var(--dc-bg-3);
+ margin: 1rem auto;
+}
+
+fieldset {
+ margin-top: 1rem;
+ padding: 2rem;
+ border: 1px solid var(--dc-bg-3);
+ border-radius: 4px;
+}
+
+legend {
+ padding: auto 0.5rem;
+}
+
+table {
+ border-collapse: collapse;
+ width: 100%;
+}
+
+td,
+th {
+ border: 1px solid var(--dc-bg-3);
+ text-align: left;
+ padding: 0.5rem;
+}
+
+th {
+ background: var(--dc-bg-2);
+}
+
+tr:nth-child(even) {
+ background: var(--dc-bg-2);
+}
+
+table caption {
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+}
+
+textarea {
+ max-width: 100%;
+}
+
+ol,
+ul {
+ padding-left: 2rem;
+}
+
+li {
+ margin-top: 0.4rem;
+}
+
+ul ul,
+ol ul,
+ul ol,
+ol ol {
+ margin-bottom: 0;
+}
+
+mark {
+ padding: 3px 6px;
+ background: var(--dc-ac-1);
+ color: var(--dc-ac-tx);
+ border-radius: 4px;
+}
+
+textarea,
+select,
+input {
+ padding: 6px 12px;
+ margin-bottom: 0.5rem;
+ background: var(--dc-bg-2);
+ color: var(--dc-tx-2);
+ border: 1px solid var(--dc-bg-3);
+ border-radius: 4px;
+ box-shadow: none;
+ box-sizing: border-box;
+}
+
+img {
+ max-width: 100%;
+}
+