initial commitHEADprimary

7 files changed, 1112 insertions, 0 deletions

diff --git a/sass/uchu/_base.scss b/sass/uchu/_base.scss
new file mode 100644
index 0000000..ab6efbd
--- /dev/null
+++ b/sass/uchu/_base.scss
@@ -0,0 +1,178 @@
+/// based on Raster v20 (release package) (rsms.me/raster)
+
+u-grid {
+  --grid-tc: repeat(4, 1fr);
+  --grid-ce: -1;
+  --grid-cs: 1;
+  display: grid;
+  grid-column-gap: var(--column-gap);
+  grid-row-gap: var(--row-gap);
+  grid-template-columns: var(--grid-tc);
+
+  &.compact { grid-row-gap: 0; }
+
+  &.debug {
+    > *  {
+      --color: rgba(248, 110, 91, 0.3);
+      background-image: linear-gradient(180deg, var(--color) 0, var(--color));
+    }
+
+    > :nth-child(6n+2) {
+      --color: rgba(103, 126, 208, 0.3);
+    }
+
+    > :nth-child(6n+3) {
+      --color: rgba(224, 174, 72, 0.3);
+    }
+
+    > :nth-child(6n+4) {
+      --color: rgba(77, 214, 115, 0.3);
+    }
+
+    > :nth-child(6n+5) {
+      --color: rgba(217, 103, 219, 0.3);
+    }
+
+    > :nth-child(6n+6) {
+      --color: rgba(94, 204, 211, 0.3);
+    }
+
+    > :nth-child(6n+7) {
+      --color: rgba(248, 110, 91, 0.3);
+    }
+  }
+
+  > hr { grid-column: 1 / -1; }
+
+  > hr,
+  > hr:not(:first-child):not(:last-child) {
+    margin-top: calc(var(--line-height) - var(--hr-thickness));
+    margin-bottom: 0;
+  }
+
+  > u-cell {
+    appearance: none;
+    display: block;
+
+    &[span] { grid-column-end: span var(--grid-ce); }
+    &[span*="+"], &[span*="-"], &[span*=".."] { grid-column-start: var(--grid-cs); }
+    &[span*="-"], &[span*=".."] { grid-column-end: var(--grid-ce); }
+    &[span=row] { grid-column: var(--grid-cs) / var(--grid-ce); }
+
+    &[span^="1"] { --grid-cs: 1; }
+    &[span^="2"] { --grid-cs: 2; }
+    &[span^="3"] { --grid-cs: 3; }
+    &[span^="4"] { --grid-cs: 4; }
+    &[span^="5"] { --grid-cs: 5; }
+    &[span^="6"] { --grid-cs: 6; }
+    &[span^="7"] { --grid-cs: 7; }
+    &[span^="8"] { --grid-cs: 8; }
+    &[span^="9"] { --grid-cs: 9; }
+    &[span^="10"] { --grid-cs: 10; }
+    &[span^="11"] { --grid-cs: 11; }
+    &[span^="12"] { --grid-cs: 12; }
+    &[span^="13"] { --grid-cs: 13; }
+    &[span^="14"] { --grid-cs: 14; }
+    &[span^="15"] { --grid-cs: 15; }
+    &[span^="16"] { --grid-cs: 16; }
+    &[span^="17"] { --grid-cs: 17; }
+    &[span^="18"] { --grid-cs: 18; }
+    &[span^="19"] { --grid-cs: 19; }
+    &[span^="20"] { --grid-cs: 20; }
+    &[span^="21"] { --grid-cs: 21; }
+    &[span^="22"] { --grid-cs: 22; }
+    &[span^="23"] { --grid-cs: 23; }
+    &[span^="24"] { --grid-cs: 24; }
+    &[span^="25"] { --grid-cs: 25; }
+    &[span^="26"] { --grid-cs: 26; }
+    &[span^="27"] { --grid-cs: 27; }
+    &[span^="28"] { --grid-cs: 28; }
+    &[span^="29"] { --grid-cs: 29; }
+    &[span^="30"] { --grid-cs: 30; }
+
+    &[span$="+1"], &[span="1"] { --grid-ce: 1; }
+    &[span$="+2"], &[span$="-1"], &[span="2"] { --grid-ce: 2; }
+    &[span$="+3"], &[span$="-2"], &[span="3"] { --grid-ce: 3; }
+    &[span$="+4"], &[span$="-3"], &[span="4"] { --grid-ce: 4; }
+    &[span$="+5"], &[span$="-4"], &[span="5"] { --grid-ce: 5; }
+    &[span$="+6"], &[span$="-5"], &[span="6"] { --grid-ce: 6; }
+    &[span$="+7"], &[span$="-6"], &[span="7"] { --grid-ce: 7; }
+    &[span$="+8"], &[span$="-7"], &[span="8"] { --grid-ce: 8; }
+    &[span$="+9"], &[span$="-8"], &[span="9"] { --grid-ce: 9; }
+    &[span$="+10"], &[span$="-9"], &[span="10"] { --grid-ce: 10; }
+    &[span$="+11"], &[span$="-10"], &[span="11"] { --grid-ce: 11; }
+    &[span$="+12"], &[span$="-11"], &[span="12"] { --grid-ce: 12; }
+    &[span$="+13"], &[span$="-12"], &[span="13"] { --grid-ce: 13; }
+    &[span$="+14"], &[span$="-13"], &[span="14"] { --grid-ce: 14; }
+    &[span$="+15"], &[span$="-14"], &[span="15"] { --grid-ce: 15; }
+    &[span$="+16"], &[span$="-15"], &[span="16"] { --grid-ce: 16; }
+    &[span$="+17"], &[span$="-16"], &[span="17"] { --grid-ce: 17; }
+    &[span$="+18"], &[span$="-17"], &[span="18"] { --grid-ce: 18; }
+    &[span$="+19"], &[span$="-18"], &[span="19"] { --grid-ce: 19; }
+    &[span$="+20"], &[span$="-19"], &[span="20"] { --grid-ce: 20; }
+    &[span$="+21"], &[span$="-20"], &[span="21"] { --grid-ce: 21; }
+    &[span$="+22"], &[span$="-21"], &[span="22"] { --grid-ce: 22; }
+    &[span$="+23"], &[span$="-22"], &[span="23"] { --grid-ce: 23; }
+    &[span$="+24"], &[span$="-23"], &[span="24"] { --grid-ce: 24; }
+    &[span$="+25"], &[span$="-24"], &[span="25"] { --grid-ce: 25; }
+    &[span$="+26"], &[span$="-25"], &[span="26"] { --grid-ce: 26; }
+    &[span$="+27"], &[span$="-26"], &[span="27"] { --grid-ce: 27; }
+    &[span$="+28"], &[span$="-27"], &[span="28"] { --grid-ce: 28; }
+    &[span$="+29"], &[span$="-28"], &[span="29"] { --grid-ce: 29; }
+    &[span$="+30"], &[span$="-29"], &[span="30"] { --grid-ce: 30; }
+    &[span$="-30"] { --grid-ce: 31; }
+
+    &.h1, &.h2, &.h3, &.h4, &.h5, &.h6 { margin-bottom: 0; }
+
+    > img,
+    > p > img {
+      max-width: 100%;
+      object-fit: contain;
+    }
+  }
+
+  &[columns="1"] { --grid-tc: repeat(1, 1fr); }
+  &[columns="2"] { --grid-tc: repeat(2, 1fr); }
+  &[columns="3"] { --grid-tc: repeat(3, 1fr); }
+  &[columns="4"] { --grid-tc: repeat(4, 1fr); }
+  &[columns="5"] { --grid-tc: repeat(5, 1fr); }
+  &[columns="6"] { --grid-tc: repeat(6, 1fr); }
+  &[columns="7"] { --grid-tc: repeat(7, 1fr); }
+  &[columns="8"] { --grid-tc: repeat(8, 1fr); }
+  &[columns="9"] { --grid-tc: repeat(9, 1fr); }
+  &[columns="10"] { --grid-tc: repeat(10, 1fr); }
+  &[columns="11"] { --grid-tc: repeat(11, 1fr); }
+  &[columns="12"] { --grid-tc: repeat(12, 1fr); }
+  &[columns="13"] { --grid-tc: repeat(13, 1fr); }
+  &[columns="14"] { --grid-tc: repeat(14, 1fr); }
+  &[columns="15"] { --grid-tc: repeat(15, 1fr); }
+  &[columns="16"] { --grid-tc: repeat(16, 1fr); }
+  &[columns="17"] { --grid-tc: repeat(17, 1fr); }
+  &[columns="18"] { --grid-tc: repeat(18, 1fr); }
+  &[columns="19"] { --grid-tc: repeat(19, 1fr); }
+  &[columns="20"] { --grid-tc: repeat(20, 1fr); }
+  &[columns="21"] { --grid-tc: repeat(21, 1fr); }
+  &[columns="22"] { --grid-tc: repeat(22, 1fr); }
+  &[columns="23"] { --grid-tc: repeat(23, 1fr); }
+  &[columns="24"] { --grid-tc: repeat(24, 1fr); }
+  &[columns="25"] { --grid-tc: repeat(25, 1fr); }
+  &[columns="26"] { --grid-tc: repeat(26, 1fr); }
+  &[columns="27"] { --grid-tc: repeat(27, 1fr); }
+  &[columns="28"] { --grid-tc: repeat(28, 1fr); }
+  &[columns="29"] { --grid-tc: repeat(29, 1fr); }
+  &[columns="30"] { --grid-tc: repeat(30, 1fr); }
+}
+
+[flow-cols] {
+  column-fill: balance;
+  column-gap: var(--column-gap);
+}
+
+[flow-cols="1"] { column-count: 1; }
+[flow-cols="2"] { column-count: 2; }
+[flow-cols="3"] { column-count: 3; }
+[flow-cols="4"] { column-count: 4; }
+[flow-cols="5"] { column-count: 5; }
+[flow-cols="6"] { column-count: 6; }
+[flow-cols="7"] { column-count: 7; }
+[flow-cols="8"] { column-count: 8; }
diff --git a/sass/uchu/_form.scss b/sass/uchu/_form.scss
new file mode 100644
index 0000000..e8d3194
--- /dev/null
+++ b/sass/uchu/_form.scss
@@ -0,0 +1,77 @@
+fieldset {
+  position: relative;
+
+  button {
+    margin-top: 1rem; padding: 0.5rem calc(0.75rem + 2px);
+
+    border: none;
+    display: block;
+    text-transform: lowercase;
+
+    &:not(:disabled) {
+      background-color: var(--uchu-gray-9);
+      color: var(--uchu-gray-2);
+      cursor: pointer;
+    }
+
+    &:disabled {
+      background-color: var(--uchu-gray-2);
+      color: var(--uchu-gray-6);
+      cursor: not-allowed;
+    }
+  }
+
+  label {
+    color: var(--uchu-gray-5);
+    font-size: 80%;
+    position: absolute;
+    padding-top: 4px;
+    padding-left: calc(0.75rem + 2px);
+    text-transform: lowercase;
+
+    + input,
+    + select {
+      background-color: var(--uchu-gray-2);
+      border: 2px solid;
+      transition: border-color 0.2s;
+      width: 400px;
+
+      @media (prefers-reduced-motion: reduce)  {
+        transition: none;
+      }
+
+      &::placeholder {
+        color: var(--uchu-gray-5);
+        opacity: 1;
+      }
+
+      &:not(:focus) {
+        border-color: var(--uchu-gray-2);
+      }
+
+      &:focus {
+        border-color: var(--uchu-blue-4);
+        box-shadow: none;
+        outline: none;
+      }
+    }
+
+    + select {
+      background-image: url("/media/svg/caret-down.svg");
+      background-position: right 1rem bottom 0.7rem;
+      background-repeat: no-repeat;
+      background-size: 1rem;
+      padding: 1.5rem 0.75rem 0.5rem 0.5rem;
+    }
+
+    + input {
+      padding: 1.5rem 0.75rem 0.5rem 0.75rem;
+
+      &:invalid {
+        border-color: var(--uchu-red-5);
+        box-shadow: none;
+        outline: none;
+      }
+    }
+  }
+}
diff --git a/sass/uchu/_reset.scss b/sass/uchu/_reset.scss
new file mode 100644
index 0000000..a270848
--- /dev/null
+++ b/sass/uchu/_reset.scss
@@ -0,0 +1,708 @@
+* {
+  box-sizing: border-box;
+  font: inherit;
+  line-height: inherit;
+
+  + hr:last-child { margin-top: calc(var(--hr-thickness) / -2); }
+
+  + h2 {
+    margin-top: var(--line-height);
+    margin-bottom: 0;
+    padding-top: calc(var(--line-height) * 0.5);
+    padding-bottom: calc(var(--line-height) * 0.5);
+  }
+
+  + img { margin-top: calc(var(--baseline) * -1); }
+
+  @media (prefers-reduced-motion: reduce)  {
+    transition: none;
+  }
+}
+
+a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, grid, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, main, mark, menu, nav, noscript, object, ol, output, p, pre, q, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
+  margin: 0; padding: 0;
+
+  border: 0;
+  vertical-align: baseline;
+}
+
+address, article, aside, blockquote, dd, dl, dt, fieldset, figure, form, h1, h2, h3, h4, h5, h6, li, nav, ol, p, pre, r-grid, table, tfoot, ul, video {
+  margin-top: var(--block-spacing-top);
+  margin-bottom: var(--block-spacing-bottom);
+}
+
+a {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: underline oklch(var(--uchu-yin-raw) / 30%);
+  transition: all 0.2s;
+  white-space: nowrap;
+  -webkit-text-decoration: underline oklch(var(--uchu-yin-raw) / 30%); /// safari needs a hand
+
+  &:hover {
+    color: var(--uchu-blue-4);
+  }
+}
+
+b, strong {
+  font-weight: 600;
+
+  code, pre, tt {
+    font-weight: inherit;
+  }
+}
+
+blockquote, q {
+  quotes: none;
+
+  &::after,
+  &::before {
+    content: none;
+  }
+}
+
+button {
+  margin: 0; padding: 0;
+
+  appearance: none;
+  background-color: transparent;
+  border: none;
+}
+
+html {
+  background-color: var(--background-color);
+  color: var(--foreground-color);
+  font-family: var(--font-sans), -system-ui, system-ui, sans-serif;
+  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "cv10" 1;
+  font-size: var(--font-size);
+  font-variant-ligatures: contextual common-ligatures;
+  letter-spacing: -0.01rem;
+  line-height: var(--line-height);
+}
+
+body {
+  overflow-x: hidden;
+  padding: calc(var(--line-height) * 2);
+  padding-bottom: calc(var(--line-height) * 3);
+  scroll-behavior: smooth;
+
+  @media only screen and (max-width: 600px) {
+    padding: var(--line-height);
+    padding-bottom: calc(var(--line-height) * 2);
+  }
+}
+
+:first-child { margin-top: unset; }
+:last-child { margin-bottom: unset; }
+
+hr {
+  background-color: var(--foreground-color);
+  border: none;
+  height: var(--hr-thickness);
+  margin-top: calc(var(--line-height) - var(--hr-thickness) / 2);
+  margin-bottom: calc(var(--line-height) - var(--hr-thickness) / 2);
+  opacity: 0.05;
+
+  &:not(:first-child) {
+    margin-top: var(--line-height);
+    margin-bottom: calc(var(--line-height) - var(--hr-thickness));
+  }
+
+  &:last-child,
+  &:only-child {
+    margin-top: calc(var(--line-height) - var(--hr-thickness) / 2);
+  }
+
+  &:first-child {
+    margin-top: calc(var(--hr-thickness) / -2);
+    margin-bottom: calc(var(--line-height) - var(--hr-thickness) / 2);
+  }
+
+  &:last-child {
+    margin-bottom: calc(var(--hr-thickness) / -2);
+  }
+
+  &:only-child {
+    margin-bottom: calc(var(--line-height) - var(--hr-thickness) / 2);
+  }
+}
+
+
+
+em, i {
+  font-style: italic;
+}
+
+code,
+pre,
+tt {
+  font-family: var(--mono-font), Inconsolata, Menlo, monospace;
+  font-variant-numeric: slashed-zero; /// best zero
+  font-weight: 430;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+
+  b, strong {
+    font-weight: 580;
+  }
+}
+
+pre {
+  display: block;
+  overflow-x: auto;
+  white-space: pre;
+  word-wrap: normal;
+
+  code,
+  tt {
+    white-space: pre;
+    word-wrap: normal;
+  }
+}
+
+
+
+h1 {
+  font-size: var(--h1-size);
+  font-weight: 720;
+  letter-spacing: -0.05rem;
+  line-height: calc(var(--line-height) * 2);
+  margin-top: calc(var(--line-height) * 2);
+  margin-bottom: var(--line-height);
+  margin-left: calc(var(--h1-size) / -22);
+  word-break: break-word;
+
+  &.single-line {
+    margin-top: var(--line-height);
+    padding-top: calc(var(--line-height) * 0.5);
+    padding-bottom: calc(var(--line-height) * 0.5);
+
+    &:first-child {
+      margin-top: 0;
+      padding-bottom: calc(var(--line-height) * 0.5);
+    }
+  }
+
+  &.large {
+    --h1-size: 4rem;
+    font-weight: 730;
+    line-height: calc(var(--line-height) * 3);
+  }
+
+  &.xlarge {
+    --h1-size: 5.5rem;
+    font-weight: 740;
+    line-height: calc(var(--line-height) * 4);
+  }
+
+  &.xxlarge {
+    --h1-size: 7.5rem;
+    font-weight: 750;
+    line-height: calc(var(--line-height) * 5);
+  }
+
+  &.xxxlarge {
+    --h1-size: 10.5rem;
+    font-weight: 760;
+    line-height: calc(var(--line-height) * 7);
+  }
+}
+
+h2 {
+  font-size: var(--h2-size);
+  font-weight: 700;
+  letter-spacing: -0.03rem;
+  line-height: calc(var(--line-height) * 2);
+  margin-bottom: var(--line-height);
+  margin-left: calc(var(--h2-size) / -26);
+
+  &.single-line {
+    margin-top: var(--line-height);
+    margin-bottom: 0;
+    padding-top: calc(var(--line-height) * 0.5);
+    padding-bottom: calc(var(--line-height) * 0.5);
+    &:first-child { margin-top: unset; }
+  }
+}
+
+h3, h4 {
+  font-size: var(--h3-size);
+  font-weight: 700;
+  letter-spacing: -0.02rem;
+  line-height: calc(var(--line-height) * 1.15);
+  margin-bottom: var(--baseline);
+  padding-top: calc(var(--baseline) * 0.75);
+  padding-bottom: calc(var(--baseline) * 0.25);
+
+  &.single-line {
+    margin-bottom: 0;
+    padding-bottom: calc(var(--baseline) * 1.25);
+  }
+
+  + h1,
+  + h1.single-line {
+    margin-top: calc(var(--baseline) * 3);
+  }
+
+  &.single-line + h1,
+  &.single-line + h1.single-line,
+  &.single-line + h2,
+  &.single-line + h2.single-line {
+    margin-top: var(--line-height);
+  }
+
+  + h2,
+  + h2.single-line {
+    margin-top: var(--baseline);
+  }
+}
+
+h4 {
+  font-size: var(--h4-size);
+  font-weight: 700;
+  letter-spacing: -0.012rem;
+}
+
+h5, h6 {
+  font-weight: 670;
+  letter-spacing: -0.015rem;
+  margin-bottom: 0;
+}
+
+h1 > a,
+h2 > a,
+h3 > a,
+h4 > a,
+h5 > a,
+h6 > a {
+  text-decoration: none;
+
+  &:hover {
+    color: inherit;
+    text-decoration: underline oklch(var(--uchu-yin-raw) / 30%);
+  }
+}
+
+img {
+  display: block;
+  margin-top: var(--baseline);
+  margin-bottom: var(--baseline);
+
+  &:first-child,
+  &:last-child {
+    display: block;
+    margin-top: var(--baseline);
+    margin-bottom: var(--baseline);
+  }
+
+  &:only-child { margin: 0; }
+
+  &.cover,
+  &.fill {
+    object-fit: cover;
+  }
+
+  &.bottom,
+  &.center,
+  &.top {
+    align-self: center;
+  }
+
+  &.bottom { object-position: center bottom; }
+  &.center { object-position: center center; }
+  &.top { object-position: center top; }
+
+  &.left.bottom,
+  &.left.center,
+  &.left.top {
+    align-self: flex-start;
+  }
+
+  &.left.bottom { object-position: left bottom; }
+  &.left.center { object-position: left center; }
+  &.left.top { object-position: left top; }
+
+  &.right.bottom,
+  &.right.center,
+  &.right.top {
+    align-self: flex-end;
+  }
+
+  &.right.bottom { object-position: right bottom; }
+  &.right.center { object-position: right center; }
+  &.right.top { object-position: right top; }
+}
+
+input,
+select {
+  appearance: none;
+  border: none;
+  letter-spacing: -0.01rem; /// to match html rule
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--uchu-blue-4);
+  }
+}
+
+ol,
+ul {
+  list-style-position: outside;
+  --list-indentation: 2rem;
+  &.compact > li { margin-bottom: 0; }
+}
+
+ol {
+  &:not([start]) {
+    counter-reset: ol-counter;
+    list-style: none;
+    padding-left: var(--list-indentation);
+
+    > li {
+      counter-increment: ol-counter;
+      position: relative;
+
+      &::before {
+        --space: 0.5rem;
+        --width: calc(var(--list-indentation) - var(--space));
+        width: var(--width); height: var(--line-height);
+
+        content: counter(ol-counter) ". ";
+        font-variant-numeric: tabular-nums;
+        font-weight: 500;
+        left: calc(-1 * (var(--width) + var(--space)));
+        position: absolute;
+        text-align: left;
+      }
+    }
+  }
+
+  &[start] { padding-inline-start: var(--list-indentation); }
+}
+
+ul { padding-left: 1.3rem; }
+
+li {
+  margin-bottom: var(--baseline);
+  margin-left: 0.2rem;
+
+  > p + ol,
+  > p + ul {
+    margin-top: calc(var(--baseline) * -1);
+  }
+
+  &.task-list-item {
+    list-style-type: none;
+
+    > input[type=checkbox] {
+      width: 1.5rem; height: var(--baseline);
+
+      appearance: none;
+      background: none;
+      border: none;
+      display: inline-block;
+      list-style: none;
+      margin-right: 0.5rem;
+      margin-left: -1.4rem;
+      opacity: 1;
+      position: relative;
+
+      --check-svg-url: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.7 9.3L8.1 12.6L13.8 6.9L12.3 5.3L8.1 9.5L6.3 7.7L4.7 9.3Z" fill="black"/></svg>');
+      --outline-svg-url: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1.75" y="1.75" width="14.5" height="14.5" rx="0.5" stroke="black" stroke-width="1.5"/></svg>');
+
+      &::after,
+      &::before {
+        top: -0.25rem; bottom: -0.25rem; left: 0;
+
+        background-position: 50%;
+        background-repeat: no-repeat;
+        background-size: contain;
+        color: transparent;
+        content: "×";
+        display: block;
+        position: absolute;
+        width: 1.1rem;
+
+        @supports ((mask-image: linear-gradient(var(--uchu-yin), red))) {
+          mask-position: center center;
+          mask-repeat: no-repeat;
+          mask-size: contain;
+        }
+      }
+
+      &::after {
+        background-image: var(--outline-svg-url);
+
+        @supports ((mask-image: linear-gradient(var(--uchu-yin), red))) {
+          background-color: var(--foreground-color);
+          mask-image: var(--outline-svg-url);
+        }
+      }
+
+      &[checked]::before {
+        background-image: var(--check-svg-url);
+
+        @supports ((mask-image: linear-gradient(var(--uchu-yin), red))) {
+          background-color: var(--foreground-color);
+          mask-image: var(--check-svg-url);
+        }
+      }
+    }
+  }
+}
+
+table {
+  --border-opacity: 0.15;
+  --border-color: rgba(var(--foreground-color-rgb), calc(var(--foreground-color-a) * var(--border-opacity)));
+  --border-width: 1px;
+
+  border-collapse: collapse;
+  border-right: var(--border-width) solid var(--border-color);
+  border-spacing: 0;
+  border-top: var(--border-width) solid var(--border-color);
+  overflow: auto;
+  position: relative;
+  margin-top: calc(var(--line-height) * 1 + var(--border-width) * -1);
+  margin-bottom: calc(var(--line-height) * 1.5);
+
+  * {
+    box-sizing: border-box;
+  }
+
+  &:first-child {
+    margin-top: calc(var(--line-height) * 0.5 + var(--border-width) * -1);
+    margin-bottom: calc(var(--line-height) * 0.5);
+  }
+
+  td,
+  th {
+    background-image: linear-gradient(90deg, var(--border-color), var(--border-color) 1px, transparent 0, transparent calc(var(--baseline) / 2));
+    background-position: 0 -1px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    padding: var(--baseline) 1rem;
+    position: relative;
+
+    &::after {
+      right: 0; bottom: 0; left: 0;
+
+      background-color: var(--border-color);
+      color: transparent;
+      content: "A";
+      height: var(--border-width);
+      pointer-events: none;
+      position: absolute;
+      z-index: 1;
+    }
+  }
+
+  th {
+    font-weight: 600;
+    text-align: left;
+
+    &[align=center] { text-align: center; }
+    &[align=right] { text-align: right; }
+  }
+}
+
+p + table {
+  margin-top: calc(var(--line-height) * 1.5 + var(--border-width) * -1);
+}
+
+
+
+@media only screen and (max-width: 600px) {
+  .only-large-window {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 601px) {
+  .only-small-window {
+    display: none;
+  }
+}
+
+.compact {
+  > li > p + ol,
+  > li > p + ul {
+    margin-top: calc(var(--block-spacing-bottom) * -1);
+  }
+}
+
+.small {
+  font-size: 0.85rem;
+  line-height: var(--line-height);
+}
+
+.xsmall {
+  font-size: 0.8rem;
+  line-height: calc(var(--line-height) * 0.75);
+  padding-top: calc(var(--line-height) * 0.25);
+}
+
+.xxsmall {
+  font-size: 0.65rem;
+  line-height: calc(var(--line-height) * 0.7);
+  padding-top: calc(var(--line-height) * 0.3);
+}
+
+.xxxsmall {
+  font-size: 0.5rem;
+  line-height: calc(var(--line-height) * 0.5);
+  padding-bottom: calc(var(--line-height) * 0.25);
+}
+
+.show-base-grid {
+  background-image: repeating-linear-gradient(
+    0deg, var(--base-grid-color2),
+    var(--base-grid-color2) 1px,
+    transparent 0,
+    transparent calc(var(--baseline) / 2),
+    var(--base-grid-color1) calc(var(--baseline) / 2),
+    var(--base-grid-color1) calc(var(--baseline) / 2 + 1px),
+    transparent calc(var(--baseline) / 2 + 1px),
+    transparent var(--baseline)
+  );
+  background-position: 0 0.5px;
+  background-repeat: repeat-y;
+  background-size: 100% var(--baseline);
+}
+
+.single-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.block { display: block; }
+.inline { display: inline-block; }
+
+.flex-h, .flex-v {
+  display: flex;
+}
+
+.flex-h {
+  flex-direction: row;
+  .bottom { align-self: flex-end; }
+}
+
+.flex-v {
+  flex-direction: column;
+  &.center { align-self: center; }
+}
+
+.center { text-align: center; }
+.left { text-align: left; }
+.right { text-align: right; }
+
+.margin0 { margin: 0; }
+.margin1 { margin: calc(var(--line-height) * 1); }
+.margin2 { margin: calc(var(--line-height) * 2); }
+.margin3 { margin: calc(var(--line-height) * 3); }
+.margin4 { margin: calc(var(--line-height) * 4); }
+.margin5 { margin: calc(var(--line-height) * 8); }
+
+.padding0 { padding: 0; }
+.padding1 { padding: calc(var(--line-height) * 1); }
+.padding2 { padding: calc(var(--line-height) * 2); }
+.padding3 { padding: calc(var(--line-height) * 3); }
+.padding4 { padding: calc(var(--line-height) * 4); }
+.padding5 { padding: calc(var(--line-height) * 8); }
+
+.w-1 { width: calc(var(--line-height) * 1); }
+.w-2 { width: calc(var(--line-height) * 2); }
+.w-3 { width: calc(var(--line-height) * 3); }
+.w-4 { width: calc(var(--line-height) * 4); }
+.w-5 { width: calc(var(--line-height) * 5); }
+.w-6 { width: calc(var(--line-height) * 6); }
+.w-7 { width: calc(var(--line-height) * 7); }
+.w-8 { width: calc(var(--line-height) * 8); }
+.w-9 { width: calc(var(--line-height) * 9); }
+.w-10 { width: calc(var(--line-height) * 10); }
+.w-11 { width: calc(var(--line-height) * 11); }
+.w-12 { width: calc(var(--line-height) * 12); }
+.w-13 { width: calc(var(--line-height) * 13); }
+.w-14 { width: calc(var(--line-height) * 14); }
+.w-15 { width: calc(var(--line-height) * 15); }
+.w-16 { width: calc(var(--line-height) * 16); }
+.w-17 { width: calc(var(--line-height) * 17); }
+.w-18 { width: calc(var(--line-height) * 18); }
+.w-19 { width: calc(var(--line-height) * 19); }
+.w-20 { width: calc(var(--line-height) * 20); }
+.w-21 { width: calc(var(--line-height) * 21); }
+.w-22 { width: calc(var(--line-height) * 22); }
+.w-23 { width: calc(var(--line-height) * 23); }
+.w-24 { width: calc(var(--line-height) * 24); }
+.w-25 { width: calc(var(--line-height) * 25); }
+.w-26 { width: calc(var(--line-height) * 26); }
+.w-27 { width: calc(var(--line-height) * 27); }
+.w-28 { width: calc(var(--line-height) * 28); }
+.w-29 { width: calc(var(--line-height) * 29); }
+.w-30 { width: calc(var(--line-height) * 30); }
+.w-31 { width: calc(var(--line-height) * 31); }
+.w-32 { width: calc(var(--line-height) * 32); }
+.w-33 { width: calc(var(--line-height) * 33); }
+.w-34 { width: calc(var(--line-height) * 34); }
+.w-35 { width: calc(var(--line-height) * 35); }
+.w-36 { width: calc(var(--line-height) * 36); }
+.w-37 { width: calc(var(--line-height) * 37); }
+.w-38 { width: calc(var(--line-height) * 38); }
+.w-39 { width: calc(var(--line-height) * 39); }
+.w-40 { width: calc(var(--line-height) * 40); }
+.w-full { width: 100%; }
+
+.h-1 { height: calc(var(--line-height) * 1); }
+.h-2 { height: calc(var(--line-height) * 2); }
+.h-3 { height: calc(var(--line-height) * 3); }
+.h-4 { height: calc(var(--line-height) * 4); }
+.h-5 { height: calc(var(--line-height) * 5); }
+.h-6 { height: calc(var(--line-height) * 6); }
+.h-7 { height: calc(var(--line-height) * 7); }
+.h-8 { height: calc(var(--line-height) * 8); }
+.h-9 { height: calc(var(--line-height) * 9); }
+.h-10 { height: calc(var(--line-height) * 10); }
+.h-11 { height: calc(var(--line-height) * 11); }
+.h-12 { height: calc(var(--line-height) * 12); }
+.h-13 { height: calc(var(--line-height) * 13); }
+.h-14 { height: calc(var(--line-height) * 14); }
+.h-15 { height: calc(var(--line-height) * 15); }
+.h-16 { height: calc(var(--line-height) * 16); }
+.h-17 { height: calc(var(--line-height) * 17); }
+.h-18 { height: calc(var(--line-height) * 18); }
+.h-19 { height: calc(var(--line-height) * 19); }
+.h-20 { height: calc(var(--line-height) * 20); }
+.h-21 { height: calc(var(--line-height) * 21); }
+.h-22 { height: calc(var(--line-height) * 22); }
+.h-23 { height: calc(var(--line-height) * 23); }
+.h-24 { height: calc(var(--line-height) * 24); }
+.h-25 { height: calc(var(--line-height) * 25); }
+.h-26 { height: calc(var(--line-height) * 26); }
+.h-27 { height: calc(var(--line-height) * 27); }
+.h-28 { height: calc(var(--line-height) * 28); }
+.h-29 { height: calc(var(--line-height) * 29); }
+.h-30 { height: calc(var(--line-height) * 30); }
+.h-31 { height: calc(var(--line-height) * 31); }
+.h-32 { height: calc(var(--line-height) * 32); }
+.h-33 { height: calc(var(--line-height) * 33); }
+.h-34 { height: calc(var(--line-height) * 34); }
+.h-35 { height: calc(var(--line-height) * 35); }
+.h-36 { height: calc(var(--line-height) * 36); }
+.h-37 { height: calc(var(--line-height) * 37); }
+.h-38 { height: calc(var(--line-height) * 38); }
+.h-39 { height: calc(var(--line-height) * 39); }
+.h-40 { height: calc(var(--line-height) * 40); }
+
+.opacity0 { opacity: 0; }
+.opacity1 { opacity: 0.1; }
+.opacity2 { opacity: 0.2; }
+.opacity3 { opacity: 0.3; }
+.opacity4 { opacity: 0.4; }
+.opacity5 { opacity: 0.5; }
+.opacity6 { opacity: 0.6; }
+.opacity7 { opacity: 0.7; }
+.opacity8 { opacity: 0.8; }
+.opacity9 { opacity: 0.9; }
+.opacity10 { opacity: 1; }
diff --git a/sass/uchu/core/_animation.scss b/sass/uchu/core/_animation.scss
new file mode 100644
index 0000000..5487ce4
--- /dev/null
+++ b/sass/uchu/core/_animation.scss
@@ -0,0 +1,23 @@
+@keyframes hovering {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  50% {
+    transform: translate(0, 8px);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-100%);
+  }
+}
diff --git a/sass/uchu/core/_mixin.scss b/sass/uchu/core/_mixin.scss
new file mode 100644
index 0000000..618cbe6
--- /dev/null
+++ b/sass/uchu/core/_mixin.scss
@@ -0,0 +1,84 @@
+@mixin center {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+@mixin clearfix {
+  clear: both;
+  content: "";
+  display: block;
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/// Smart font include
+/// Simply pass in the font-weight you want to use and the normal/italicized versions will be added
+/// No more weighing down the front-end with references to unused weights
+@mixin font($font-weight, $relative-font-path, $font-name) {
+  @font-face {
+    font-family: $font-name;
+    font-style: normal;
+    font-weight: $font-weight;
+    src: url("#{$relative-font-path}/#{$font-weight}.woff2") format("woff2");
+  }
+}
+
+@mixin font-plus-italics($font-weight, $relative-font-path, $font-name) {
+  @font-face {
+    font-family: $font-name;
+    font-style: normal;
+    font-weight: $font-weight;
+    src: url("#{$relative-font-path}/#{$font-weight}.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: $font-name;
+    font-style: italic;
+    font-weight: $font-weight;
+    src: url("#{$relative-font-path}/#{$font-weight}i.woff2") format("woff2");
+  }
+}
+
+@mixin mono-plus-italics($font-weight, $relative-font-path, $font-name) {
+  @font-face {
+    font-family: $font-name;
+    font-style: normal;
+    font-weight: $font-weight;
+    src: url("#{$relative-font-path}/#{$font-weight}.woff2") format("woff2");
+    unicode-range: U+24, U+30-39, U+A2-A5; // $, 0-9, ¢£¤¥
+  }
+
+  @font-face {
+    font-family: $font-name;
+    font-style: italic;
+    font-weight: $font-weight;
+    src: url("#{$relative-font-path}/#{$font-weight}i.woff2") format("woff2");
+    unicode-range: U+24, U+30-39, U+A2-A5; // $, 0-9, ¢£¤¥
+  }
+}
+
+@mixin hide-text {
+  border: none;
+  color: transparent;
+  font: 0 / 0 a;
+  text-shadow: none;
+}
+
+@mixin selection($background-color: var(--uchu-yang), $text-color: var(--uchu-gray-9)) {
+  &::selection {
+    background-color: $background-color;
+    color: $text-color;
+    text-shadow: none;
+  }
+
+  &::-moz-selection {
+    background-color: $background-color;
+    color: $text-color;
+    text-shadow: none;
+  }
+}
diff --git a/sass/uchu/core/_root.scss b/sass/uchu/core/_root.scss
new file mode 100644
index 0000000..ff0dc09
--- /dev/null
+++ b/sass/uchu/core/_root.scss
@@ -0,0 +1,38 @@
+:root {
+  --background-color: var(--uchu-gray-1);
+  --base-grid-color1: oklch(var(--uchu-blue-3-raw) / 30%);
+  --base-grid-color2: oklch(var(--uchu-purple-3-raw) / 30%);
+  --baseline: calc(var(--line-height) / 2);
+  --block-spacing-bottom: var(--line-height);
+  --block-spacing-top: 0;
+  --column-gap: calc(var(--line-height) * 2);
+  --display-scale: 1;
+  --font-mono: null;
+  --font-sans: null;
+  --font-serif: null;
+  --font-size: 12px;
+  --foreground-color: oklch(var(--uchu-yin-raw) / 80%);
+  --h1-size: 2.8rem;
+  --h2-size: 2.2rem;
+  --h3-size: 1.4rem;
+  --h4-size: 1.1rem;
+  --hr-thickness: 2px;
+  --line-height: calc(var(--font-size) * 1.5);
+  --pixel: 1px;
+  --row-gap: var(--line-height);
+
+  @media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
+    --display-scale: 2;
+    --pixel: 0.5px;
+  }
+
+  @media only screen and (min-device-pixel-ratio: 2.5), only screen and (min-resolution: 2.5dppx) {
+    --display-scale: 3;
+    --pixel: 0.34px;
+  }
+
+  @media only screen and (min-device-pixel-ratio: 3.5), only screen and (min-resolution: 3.5dppx) {
+    --display-scale: 4;
+    --pixel: 0.25px;
+  }
+}
diff --git a/sass/uchu/uchu.scss b/sass/uchu/uchu.scss
new file mode 100644
index 0000000..146bfe6
--- /dev/null
+++ b/sass/uchu/uchu.scss
@@ -0,0 +1,4 @@
+@forward "./core/root";
+@forward "reset";
+@forward "base";
+@forward "form";