-
- MPF moon pass filter
+
diff --git a/mpf.css b/mpf.css
new file mode 100644
index 0000000..b6ab583
--- /dev/null
+++ b/mpf.css
@@ -0,0 +1,192 @@
+/*
+mpf.css
+https://s9a.page/dew na na na na remiXYZ
+2d9a83c38e6711684fc4bcfeb1e69738acc4488f
+*/
+
+@media (prefers-reduced-motion: no-preference) {
+ .mpf-shift *,
+ .mpf-shift {
+ transition: var(--mpf-shift);
+ }
+}
+
+@media (color) {
+ .mpf-wet *,
+ .mpf-wet {
+ background-color: var(--mpf-kin);
+ color: var(--mpf-ink);
+ }
+
+ .mpf-rim *,
+ .mpf-rim {
+ border-color: var(--mpf-rim);
+ }
+
+ .mpf-hyper :any-link,
+ .mpf-hyper {
+ filter: var(--mpf-hyper);
+ }
+
+ .mpf-tab :focus,
+ .mpf-tab:focus {
+ filter: var(--mpf-focus);
+ outline-color: var(--mpf-locus);
+ }
+
+ .mpf-field:disabled {
+ filter: var(--mpf-vapor);
+ }
+
+ .mpf-image {
+ background-image: none;
+ }
+
+ .mpf-media.mpf-media,
+ .mpf-polar.mpf-polar,
+ .mpf-solar.mpf-solar,
+ .mpf-lunar.mpf-lunar {
+ fill: var(--mpf-kin);
+ background-color: var(--mpf-kin);
+ color: var(--mpf-ink);
+ }
+}
+
+:root {
+ /*dev*/
+ --mpf-hyper: none;
+ --mpf-media: var(--mpf-solar);
+ --mpf-polar: var(--mpf-lunar);
+ --mpf-kin: var(--mpf-media);
+ --mpf-ink: var(--mpf-polar);
+ --mpf-rim: var(--mpf-ink);
+ --mpf-uno: -1;
+
+ /*diy*/
+ --mpf-shift: color 101ms;
+ --mpf-slick: blue;
+ --mpf-slime: orange;
+ --mpf-solar: #bed;
+ --mpf-lunar: darkviolet;
+ --mpf-locus: currentColor;
+ --mpf-focus: saturate(300%);
+ --mpf-hover: hue-rotate(36deg);
+ --mpf-vapor: opacity(60%);
+}
+
+.mpf-ion ::selection {
+ background-color: var(--mpf-slick);
+ color: var(--mpf-slime);
+}
+
+:any-link:hover {
+ --mpf-hyper: var(--mpf-hover);
+}
+
+:any-link:focus {
+ --mpf-hyper: var(--mpf-focus);
+}
+
+.mpf-media {
+ --mpf-kin: var(--mpf-media);
+ --mpf-ink: var(--mpf-polar);
+}
+
+.mpf-polar {
+ --mpf-kin: var(--mpf-polar);
+ --mpf-ink: var(--mpf-media);
+}
+
+.mpf-solar {
+ --mpf-kin: var(--mpf-solar);
+ --mpf-ink: var(--mpf-lunar);
+}
+
+.mpf-lunar {
+ --mpf-kin: var(--mpf-lunar);
+ --mpf-ink: var(--mpf-solar);
+}
+
+.mpf-preamp {
+ --mpf-solar: skyblue;
+ --mpf-lunar: #120e1f;
+}
+
+.mpf-powamp {
+ --mpf-solar: #ec0;
+ --mpf-lunar: #120e1f;
+}
+
+.mpf-postamp {
+ --mpf-solar: #bae;
+ --mpf-lunar: #120e1f;
+}
+
+.mpf-active {
+ --mpf-solar: lightsalmon;
+ --mpf-lunar: #120e1f;
+}
+
+.mpf-passive {
+ --mpf-solar: silver;
+ --mpf-lunar: #120e1f;
+}
+
+.mpf-wood {
+ --mpf-solar: rosybrown;
+ --mpf-lunar: #120e1f;
+}
+
+.mpf-fire {
+ --mpf-solar: orangered;
+ --mpf-lunar: #120e1f;
+}
+
+.mpf-earth {
+ --mpf-solar: sandybrown;
+ --mpf-lunar: #120e1f;
+}
+
+.mpf-metal {
+ --mpf-solar: powderblue;
+ --mpf-lunar: #120e1f;
+}
+
+.mpf-water {
+ --mpf-solar: deepskyblue;
+ --mpf-lunar: #111;
+}
+
+.mpf-vallee {
+ --mpf-solar: turquoise;
+ --mpf-lunar: #120e1f;
+}
+
+.mpf-cinema {
+ --mpf-solar: #e7f;
+ --mpf-lunar: #120e1f;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --mpf-media: var(--mpf-lunar);
+ --mpf-polar: var(--mpf-solar);
+ --mpf-uno: 1;
+ }
+}
+
+@media (prefers-contrast: less) {
+ :root {
+ --mpf-solar: plum;
+ --mpf-lunar: purple;
+ }
+}
+
+@media (prefers-contrast: more) {
+ :root {
+ --mpf-solar: #bed;
+ --mpf-lunar: midnightblue;
+ --mpf-slick: blue;
+ --mpf-slime: lime;
+ }
+}
diff --git a/oui.css b/oui.css
new file mode 100644
index 0000000..22f4b7a
--- /dev/null
+++ b/oui.css
@@ -0,0 +1,160 @@
+* {
+ box-sizing: border-box;
+}
+
+[href^="#"] {
+ text-decoration: underline dotted;
+}
+
+:focus {
+ box-shadow: 0 0 1em 1ch var(--mpf-media);
+ outline: thick groove;
+}
+
+:link:hover {
+ text-decoration: underline wavy;
+}
+
+[href^="#"]:hover {
+ text-decoration: underline solid;
+}
+
+html {
+ font-family: sans-serif;
+ font-size: calc(1ch + 2vmin/3 + 1vmax);
+ line-height: 1.618;
+}
+
+body {
+ box-sizing: border-box;
+ display: flex;
+ flex-flow: column;
+ margin: auto;
+ overflow-wrap: break-word;
+ padding: 1em;
+}
+
+aside {
+ contain: layout;
+ display: flex;
+ flex-flow: column;
+}
+
+h1 {
+ contain: layout;
+ text-align: center;
+}
+
+h2 {
+ font-size: 1em;
+ font-weight: unset;
+ margin-block: 0;
+ padding: 1rem;
+}
+
+p {
+ box-sizing: border-box;
+ padding: 1rem;
+}
+
+i {
+ font-family: monospace;
+ font-style: unset;
+}
+
+dfn {
+ font-size: 1.618rem;
+ font-style: unset;
+ font-weight: bold;
+}
+
+data {
+ padding: 1ex;
+}
+
+ol {
+ contain: layout;
+ display: flow-root;
+ list-style: none;
+ padding: 0;
+}
+
+footer,
+section {
+ margin-block: 1rem;
+ margin-inline: auto;
+ max-width: 30em;
+ padding: 1rem;
+}
+
+section p {
+ margin-block: 0;
+}
+
+li {
+ display: flex;
+ contain: layout;
+ flex-flow: row;
+}
+
+@media (orientation: portrait) {
+ li {
+ flex-flow: row wrap;
+ }
+
+ data:nth-child(2) {
+ order: 3;
+ }
+}
+
+@media (orientation: landscape) {
+ li:nth-of-type(odd) {
+ list-style: none;
+ text-align: start;
+ float: left;
+ clear: right;
+ order: 1;
+ }
+
+ li:nth-of-type(odd)
+ data:nth-child(1) {
+ order: -1;
+ }
+
+ li:nth-of-type(even) {
+ list-style: none;
+ text-align: end;
+ float: right;
+ order: -1;
+ }
+
+ li:nth-of-type(even)
+ data:nth-child(1) {
+ order: 3;
+ }
+
+ li:nth-of-type(even)
+ data:nth-child(3) {
+ order: 2;
+ }
+
+ [value=nature],
+ [value=energy] {
+ font-size: .8rem;
+ }
+}
+
+[hidden],
+template {
+ display: none;
+}
+
+li:hover {
+ cursor: crosshair;
+}
+
+li:focus [value=energy],
+li:focus [value=nature],
+li:not(:focus) [value=symbol] {
+ font-size: 0;
+}