diff --git a/style/base.css b/style/base.css
index 2c8401d..e52084e 100644
--- a/style/base.css
+++ b/style/base.css
@@ -1,546 +1,545 @@
-@import url(../fonts/muller/muller.css);
+@layer outer, face-menu, cube, face-base, faces;
+
+@import url(../fonts/muller/muller.css) layer(outer);
+@import url(properties.css);
+
+/*
+@import url(../fonts/muller/muller.css) layer(outer)
+  (not (prefers-reduced-data: reduce));
+
+if a browser doesn't understand the media query it DOESN'T do
+the import. so this doesn't work until prefers-reduced-data
+actually exists
+*/
 
 
-/* OUTER */
+@layer outer {
+  * { box-sizing: border-box; }
 
-* { box-sizing: border-box; }
-
-html, body {
-  min-height: 100vh;
-  min-height: 100lvh;
-  scrollbar-gutter: stable;
-}
-
-html {
-  font-size:   large;
-  font-family: Muller, sans-serif;
-  font-weight: 500;
-
-  color: black;
-
-  --gradient:
-    linear-gradient(120deg in oklch,
-      oklch(93% 27.1% 96deg),
-      oklch(84.03% 22% 15deg),
-      oklch(80% 29.3% 303deg),
-      oklch(84% 23% 233deg),
-      oklch(89% 25% 161deg));
-  --shadow-hsl: 330deg 40% 40%;
-  --base-background: var(--gradient) fixed;
-  background: var(--base-background);
-
-  --menu-bg-hsl: 60deg 100% 96%;
-}
-
-@media (prefers-reduced-data: reduce) {
-  html {
-    font-family: sans-serif;
-    font-weight: normal;
+  :root, body {
+    min-height: 100vh;
+    min-height: 100lvh;
+    margin: 0;
+    scrollbar-gutter: stable;
   }
-}
 
-html, body { margin: 0; }
+  :root {
+    font-size: large;
 
-@media (prefers-color-scheme: dark) {
-  html {
+    color-scheme: light dark;
+    color: black;
     --gradient:
-      linear-gradient(20deg,
-        hsl(300deg 30% 20%),
-        hsl(220deg 30% 20%),
-        hsl(150deg 30% 20%),
-        hsl(30deg  30% 20%),
-        hsl(350deg 30% 20%));
-    --menu-bg-hsl: 260deg 100% 8%;
-    color: #ffd;
+      linear-gradient(120deg in oklch,
+        oklch(93% 27.1% 96deg),
+        oklch(84.03% 22% 15deg),
+        oklch(80% 29.3% 303deg),
+        oklch(84% 23% 233deg),
+        oklch(89% 25% 161deg));
+    --menu-bg-hsl: 60deg 100% 96%;
+
+    @media (prefers-color-scheme: dark) {
+      color: #ffd;
+      --gradient:
+        linear-gradient(20deg,
+          hsl(300deg 30% 20%),
+          hsl(220deg 30% 20%),
+          hsl(150deg 30% 20%),
+          hsl(30deg  30% 20%),
+          hsl(350deg 30% 20%));
+      --menu-bg-hsl: 260deg 100% 8%;
+    }
+
+    --shadow-hsl: 330deg 40% 40%;
+    --base-background: var(--gradient) fixed;
+    background: var(--base-background);
+
+    font-family: Muller, sans-serif;
+    font-weight: 500;
+    @media (prefers-reduced-data: reduce) {
+      font-family: sans-serif;
+      font-weight: normal;
+    }
   }
 }
 
 
-/* TOP MENU */
+@layer face-menu {
+  #face-menu {
+    align-self: center;
+    margin: 10px;
 
-#face-menu {
-  align-self: center;
-  margin: 10px;
-}
+    font-size:   125%;
 
-.menu input, .menu label {
-  cursor: pointer;
-}
+    menu {
+      display:       flex;
+      place-content: center;
+      place-items:   center;
+      margin:        auto;
+      padding:       0;
 
-.menu {
-  display:       flex;
-  place-content: center;
-  place-items:   center;
-  margin:        auto;
-  padding:       0;
+      flex-wrap: wrap;
+      justify-content: center;
 
-  flex-wrap: wrap;
-  justify-content: center;
+      background: hsl(var(--menu-bg-hsl) / 65%);
+      border:     2px solid hsl(var(--menu-bg-hsl));
+      box-shadow: 0 0 10px 5px hsl(var(--menu-bg-hsl) / 30%);
 
-  font-size:   125%;
+      @media (prefers-reduced-transparency: reduce) {
+        background: hsl(var(--menu-bg-hsl));
+      }
+    }
 
-  background: hsl(var(--menu-bg-hsl) / 65%);
-  border:     2px solid hsl(var(--menu-bg-hsl));
-  box-shadow: 0 0 10px 5px hsl(var(--menu-bg-hsl) / 30%);
-}
+    input, label { cursor: pointer; }
 
-@media (prefers-reduced-transparency: reduce) {
-  background: hsl(var(--menu-bg-hsl));
-}
+    input {
+      appearance: none;
+      width:   0;
+      margin:  0;
+      padding: 0;
+    }
 
-.hide-boxes input {
-  appearance: none;
-  width:   0;
-  margin:  0;
-  padding: 0;
-}
-.menu li {
-  display: flex;
-  list-style: none;
-  flex: 1 0 4em;
-}
-.menu label {
-  padding: .25em 1.25em;
-  flex: 1 0 auto;
-  text-align: center;
+    label {
+      padding: .25em 1.25em;
+      flex: 1 0 auto;
+      text-align: center;
+    }
+
+    li {
+      display: flex;
+      list-style: none;
+      flex: 1 0 4em;
+    }
+  }
 }
 
 
-/* BASE FACE STYLES */
-
-#cube > section {
-  --base-background:
-    repeating-linear-gradient(var(--bg-angle),
-      transparent, transparent 0.8em,
-      #fff8 0.8em, #fff8 1em),
-    linear-gradient(150deg,
-      hsl(var(--hue) 86% 94%),
-      hsl(var(--hue) 66% 82%)
-    );
-  background: var(--base-background);
-
-  --border-thickness: 10px;
-  border: var(--border-thickness) solid white;
-  padding: 2em;
-
-  color: hsl(var(--hue) 40% 10%);
-  --text-shadow-color: white;
-  text-shadow:
-     1px  1px 1px var(--text-shadow-color),
-    -1px  1px 1px var(--text-shadow-color),
-    -1px -1px 1px var(--text-shadow-color),
-     1px -1px 1px var(--text-shadow-color);
-
-  scrollbar-color:
-    hsl(calc(var(--hue) + 180deg) 90% 60%)
-    hsl(var(--hue) 50% 95%);
-}
-
-#cube a {
-  color: hsl(calc(var(--hue) + 180deg) 90% 20%);
-  font-weight: 600;
-  text-decoration: none;
-}
-#cube a:hover {
-  text-decoration: underline;
-  text-decoration-style: dotted;
-  text-decoration-color: currentcolor;
-  text-decoration-thickness: 2px;
-}
-
-h2 { margin-top: 0; }
-
-h3 {
-  text-align: center;
-  margin-bottom: 0.25em;
-}
-
-h2 + section h3 { margin-top: 0; }
-
-strong { font-weight: 700; }
-
-#cube section ::selection {
-  color: white;
-  background: hsl(calc(var(--hue) + 180deg), 50%, 30%);
-  text-shadow: none;
-}
-
-@media (prefers-color-scheme: dark) {
+@layer face-base {
   #cube > section {
     --base-background:
       repeating-linear-gradient(var(--bg-angle),
         transparent, transparent 0.8em,
-        #0014 0.8em, #0014 1em),
+        #fff8 0.8em, #fff8 1em),
       linear-gradient(150deg,
-        hsl(var(--hue) 40% 30%),
-        hsl(var(--hue) 40% 15%)
+        hsl(var(--hue) 86% 94%),
+        hsl(var(--hue) 66% 82%)
       );
+    background: var(--base-background);
 
-    border-color: hsl(var(--hue) 40% 10%);
+    --border-thickness: 10px;
+    border: var(--border-thickness) solid white;
+    padding: 2em;
 
-    color: hsl(var(--hue) 40% 90%);
-    --text-shadow-color: black;
+    color: hsl(var(--hue) 40% 10%);
+    --text-shadow-color: white;
+    text-shadow:
+       1px  1px 1px var(--text-shadow-color),
+      -1px  1px 1px var(--text-shadow-color),
+      -1px -1px 1px var(--text-shadow-color),
+       1px -1px 1px var(--text-shadow-color);
+
+    @media (prefers-color-scheme: dark) {
+      --base-background:
+        repeating-linear-gradient(var(--bg-angle),
+          transparent, transparent 0.8em,
+          #0014 0.8em, #0014 1em),
+        linear-gradient(150deg,
+          hsl(var(--hue) 40% 30%),
+          hsl(var(--hue) 40% 15%)
+        );
+
+      border-color: hsl(var(--hue) 40% 10%);
+
+      color: hsl(var(--hue) 40% 90%);
+      --text-shadow-color: black;
+    }
+
+    scrollbar-color:
+      hsl(calc(var(--hue) + 180deg) 90% 60%)
+      hsl(var(--hue) 50% 95%);
+
+    ::selection {
+      color: white;
+      background: hsl(calc(var(--hue) + 180deg), 50%, 30%);
+      text-shadow: none;
+    }
   }
 
   #cube a {
-    color: hsl(calc(var(--hue) + 180deg) 100% 85%);
+    color: hsl(calc(var(--hue) + 180deg) 90% 20%);
+    font-weight: 600;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+      text-decoration-style: dotted;
+      text-decoration-color: currentcolor;
+      text-decoration-thickness: 2px;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      color: hsl(calc(var(--hue) + 180deg) 100% 85%);
+    }
+  }
+
+  h2 { margin-top: 0; }
+
+  h3 {
+    text-align: center;
+    margin-bottom: 0.25em;
+  }
+
+  h2 + section h3 { margin-top: 0; }
+
+  strong { font-weight: 700; }
+
+  .artcredit {
+    position: absolute;
+    bottom: 0;
+    left: 1em;
+    font-size: smaller;
+    font-style: italic;
+    background: hsl(var(--menu-bg-hsl) / 75%);
+    padding: .1em .5em;
   }
 }
 
 
+@layer faces.hello {
+  #hello {
+    --hue: 310deg;
+    --bg-angle: 135deg;
 
-/* SPECIFIC FACE STYLES */
+    /* this one makes more sense to show if there is a paint before
+     * the script runs */
+    z-index: 1;
 
-/* the separate "#whatever ::selection" selector is because in
- * chrome, ::selection doesn't inherit variables */
-#hello, #hello ::selection {
-  --hue: 310deg;
-  --bg-angle: 135deg;
+    /* the quick linx */
+    h3 { text-align: left; }
+
+    ul { padding-left: 0; }
+    li { list-style: none; }
+
+    --bg-image: url(../media/wave.webp);
+    background:
+      var(--bg-image) bottom right / auto 60% no-repeat,
+      var(--base-background);
+
+    @media (prefers-color-scheme: dark) {
+      --bg-image: url(../media/wave-neon.webp);
+    }
+    @media (prefers-reduced-data: reduce) {
+      --bg-image: url(../media/wave.l.webp);
+    }
+    @media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
+      --bg-image: url(../media/wave-neon.l.webp);
+    }
+  }
 }
 
-/* this one makes more sense to show if there is a paint before
- * the script runs */
-#hello {
-  z-index: 1;
-}
+@layer faces.id {
+  #id {
+    --hue: 10deg;
+    --bg-angle: 45deg;
 
-/* extra #cube selector for specificity */
-#cube #hello {
-  --bg-image: url(../media/wave.webp);
-  background:
-    var(--bg-image) bottom right / auto 60% no-repeat,
-    var(--base-background);
-}
-
-@media (prefers-color-scheme: dark) {
-  #cube #hello { --bg-image: url(../media/wave-neon.webp); }
-}
-@media (prefers-reduced-data: reduce) {
-  #cube #hello { --bg-image: url(../media/wave.l.webp); }
-}
-@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
-  #cube #hello { --bg-image: url(../media/wave-neon.l.webp); }
-}
-
-#id, #id ::selection, #flags img {
-  --hue: 10deg;
-  --bg-angle: 45deg;
-}
-
-#id dl {
-  display: grid;
-  grid-template-columns: min-content auto;
-  gap: 0 2em;
-}
-#id dt { font-weight: 600; }
-#id dd {
-  margin: 0 0 0 1em;
-  display: list-item;
-  list-style: '❧ ';
-  grid-column: 2 / 3;
-}
-#id dd a { font-weight: 700; }
-#id dt, #id dt + dd {
-  margin-top: 1em;
-}
-
-#flags {
-  display: flex;
-  flex-flow: wrap;
-  justify-content: center;
-  gap: 1em;
-  margin-top: 3em;
-}
-
-#flags img {
-  height: 2em;
-  border: 2px solid hsl(var(--hue) 30% 5% / 60%);
-  rotate: 8deg;
-}
-
-
-#activities, #activities ::selection {
-  --hue: 60deg;
-  --bg-angle: -60deg;
-}
-
-#cube #activities {
-  /* height of quobl.webp is 58% of width */
-  --bg-image: url(../media/quobl.webp);
-  background:
-    var(--bg-image) bottom left 2ex / 50% auto no-repeat local,
-    var(--base-background);
-  padding-bottom: 29%;
-}
-
-@media (prefers-color-scheme: dark) {
-  #cube #activities { --bg-image: url(../media/quobl-neon.webp); }
-}
-@media (prefers-reduced-data: reduce) {
-  #cube #activities { --bg-image: url(../media/quobl.l.webp); }
-}
-@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
-  #cube #activities { --bg-image: url(../media/quobl-neon.webp); }
-}
-
-#links, #links ::selection {
-  --hue: 130deg;
-  --bg-angle: 210deg;
-}
-
-#links ul {
-  padding: 0;
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-#links li {
-  flex: 1 0 10em;
-  list-style: none;
-  --icon-bg: var(--fg);
-}
-
-#links a {
-  height: 3em;
-  padding-left: calc(3em + 1ex);
-  display: flex;
-  align-items: center;
-
-  border: 2px solid black;
-  background:
-    linear-gradient(to right, transparent 3em, var(--bg) 3em),
-    var(--icon) calc(1.5em - 16px) center / 32px auto no-repeat,
-    var(--icon-bg);
-
-  color: var(--fg);
-  text-shadow: none;
-}
-
-#links a:hover { text-decoration: none; }
-
-#links #gallery {
-  --icon: url(../media/favicon.webp);
-  --fg:   hsl(280deg 38% 43%);
-  --bg:   hsl(100deg 99% 81%);
-  image-rendering: pixelated;
-}
-
-#links #code {
-  --icon: url(../media/icons/forgejo.svg);
-  --fg: white;
-  --icon-bg: #171e26;
-  --bg: #c2410c;
-}
-
-#links #blog {
-  --icon: url(../media/icons/blog.webp);
-  --fg: #ffeebb;
-  --bg: #332255;
-  /* image-rendering: pixelated; */
-}
-#links #blog a {
-  background-position: center, left calc(1.5em - 51px) center, center;
-  background-size: contain;
-}
-
-#links #itaku {
-  --icon: url(../media/icons/itaku.svg);
-  --fg:   #ffeb3b;
-  --bg:   #303030;
-}
-
-#links #weasyl {
-  --icon: url(../media/icons/weasyl.svg);
-  --fg:   white;
-  --bg:   #970000;
-}
-
-#links #fa {
-  --icon: url(../media/icons/furaffinity.webp);
-  --icon-bg: #20242a;
-  --bg:      #353b45;
-  --fg:      white;
-}
-
-#links #da {
-  --icon: url(../media/icons/deviantart.webp);
-  --icon-bg: #000608;
-  --bg: #314537;
-  --fg: #e7ede4;
-}
-
-#links #kofi {
-  --icon: url(../media/icons/ko-fi.webp);
-  --icon-bg: #def3ff;
-  --bg: white;
-  --fg: #ff5966;
-}
-
-#links #artfight {
-  --icon: url(../media/icons/artfight.webp);
-  --icon-bg: #222222;
-  --bg: #a65178;
-  --fg: white;
-}
-
-#links #chitter {
-  --icon: url(../media/icons/chitter.webp);
-  --bg: #582c58;
-  --icon-bg: #2c162c;
-  --fg: white;
-}
-
-#links #cohost {
-  --icon: url(../media/icons/cohost.svg);
-  --bg: #ffab5c;
-  --icon-bg: #83254f;
-  --fg: black;
-}
-
-#links #bluesky {
-  --icon: url(../media/icons/bluesky.svg);
-  --bg: #161e27;
-  --fg: white;
-}
-
-@media (prefers-color-scheme: dark) {
-  /* most link colours are fine in both modes. except: */
-
-  #links #gallery {
-    --icon-bg: hsl(280deg 42% 30%);
-    --bg:      hsl(280deg 38% 43%);
-    --fg:      hsl(100deg 99% 81%);
+    dl {
+      display: grid;
+      grid-template-columns: min-content auto;
+      gap: 0 2em;
+    }
+    dt { font-weight: 600; }
+    dd {
+      margin: 0 0 0 1em;
+      display: list-item;
+      list-style: '❧ ';
+      grid-column: 2 / 3;
+      a { font-weight: 700; }
+    }
+    dt, dt + dd { margin-top: 1em; }
   }
 
-  #links #weasyl {
-    --icon-bg: #252d32;
+  #flags {
+    display: flex;
+    flex-flow: wrap;
+    justify-content: center;
+    gap: 1em;
+    margin-top: 3em;
+
+    img {
+      height: 2em;
+      border: 2px solid hsl(var(--hue) 30% 5% / 60%);
+      rotate: 8deg;
+    }
+  }
+}
+
+@layer faces.activities {
+  #activities {
+    --hue: 60deg;
+    --bg-angle: -60deg;
+
+    /* height of quobl.webp is 58% of width */
+    --bg-image: url(../media/quobl.webp);
+    background:
+      var(--bg-image) bottom left 2ex / 50% auto no-repeat local,
+      var(--base-background);
+    padding-bottom: 29%;
+
+    @media (prefers-color-scheme: dark) {
+      --bg-image: url(../media/quobl-neon.webp);
+    }
+    @media (prefers-reduced-data: reduce) {
+      --bg-image: url(../media/quobl.l.webp);
+    }
+    @media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
+      --bg-image: url(../media/quobl-neon.webp);
+    }
+  }
+}
+
+
+@layer faces.links {
+  #links {
+    --hue: 130deg;
+    --bg-angle: 210deg;
+
+    ul {
+      padding: 0;
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+    li {
+      flex: 1 0 10em;
+      list-style: none;
+      --icon-bg: var(--fg);
+    }
+
+    a {
+      height: 3em;
+      padding-left: calc(3em + 1ex);
+      display: flex;
+      align-items: center;
+
+      border: 2px solid black;
+      background:
+        linear-gradient(to right, transparent 3em, var(--bg) 3em),
+        var(--icon) calc(1.5em - 16px) center / 32px auto no-repeat,
+        var(--icon-bg);
+
+      color: var(--fg);
+      text-shadow: none;
+      &:hover { text-decoration: none; }
+    }
   }
 
-  #links #kofi {
-    --icon-bg: #2b3a44;
-    --bg:      #192025;
-    --fg:      #dce7eb;
+  #gallery {
+    --icon: url(../media/favicon.webp);
+    --fg:   hsl(280deg 38% 43%);
+    --bg:   hsl(100deg 99% 81%);
+    image-rendering: pixelated;
   }
 
-  #links #bluesky {
-    --bg: #161e27;
-    --icon-bg: #1e2936;
+  #code {
+    --icon: url(../media/icons/forgejo.svg);
+    --fg: white;
+    --icon-bg: #171e26;
+    --bg: #c2410c;
+  }
+
+  #blog {
+    --icon: url(../media/icons/blog.webp);
+    --fg: #ffeebb;
+    --bg: #332255;
+    /* image-rendering: pixelated; */
+    a {
+      background-position: center, left calc(1.5em - 51px) center, center;
+      background-size: contain;
+    }
+  }
+
+  #itaku {
+    --icon: url(../media/icons/itaku.svg);
+    --fg:   #ffeb3b;
+    --bg:   #303030;
+  }
+
+  #weasyl {
+    --icon: url(../media/icons/weasyl.svg);
+    --fg:   white;
+    --bg:   #970000;
+  }
+
+  #fa {
+    --icon: url(../media/icons/furaffinity.webp);
+    --icon-bg: #20242a;
+    --bg:      #353b45;
+    --fg:      white;
+  }
+
+  #da {
+    --icon: url(../media/icons/deviantart.webp);
+    --icon-bg: #000608;
+    --bg: #314537;
+    --fg: #e7ede4;
+  }
+
+  #kofi {
+    --icon: url(../media/icons/ko-fi.webp);
+    --icon-bg: #def3ff;
+    --bg: white;
+    --fg: #ff5966;
+  }
+
+  #artfight {
+    --icon: url(../media/icons/artfight.webp);
+    --icon-bg: #222222;
+    --bg: #a65178;
     --fg: white;
   }
+
+  #chitter {
+    --icon: url(../media/icons/chitter.webp);
+    --bg: #582c58;
+    --icon-bg: #2c162c;
+    --fg: white;
+  }
+
+  #bluesky {
+    --icon: url(../media/icons/bluesky.svg);
+    --bg: #161e27;
+    --fg: white;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    /* most link colours are fine in both modes. except: */
+    #gallery {
+      --icon-bg: hsl(280deg 42% 30%);
+      --bg:      hsl(280deg 38% 43%);
+      --fg:      hsl(100deg 99% 81%);
+    }
+
+    #weasyl {
+      --icon-bg: #252d32;
+    }
+
+    #kofi {
+      --icon-bg: #2b3a44;
+      --bg:      #192025;
+      --fg:      #dce7eb;
+    }
+
+    #bluesky {
+      --bg: #161e27;
+      --icon-bg: #1e2936;
+      --fg: white;
+    }
+  }
 }
 
+@layer faces.friends {
+  #friends {
+    --hue: 190deg;
+    --bg-angle: 300deg;
 
-#friends, #friends ::selection {
-  --hue: 190deg;
-  --bg-angle: 300deg;
+    display: grid;
+    grid: "hdr"     min-content
+          "links1"  auto
+          "links2"  auto
+          "buttons" auto;
+
+    img { image-rendering: pixelated; }
+
+    > section {
+      align-self: start;
+
+      ul {
+        list-style: none;
+        padding: 0;
+
+        display: flex;
+        width: 80%;
+        margin: 0 auto;
+
+        align-items: start;
+        gap: 0;
+        justify-content: center;
+        flex-wrap: wrap;
+      }
+
+      img {
+        width: 88px;
+        height: 31px;
+        object-fit: none;
+        display: block;
+      }
+    }
+
+    .txt {
+      display: inline-block;
+      width: 88px;
+      height: 31px;
+      border: 3px outset currentcolor;
+      text-align: center;
+      line-height: 28px;
+
+      font-size: 18px;
+      font-weight: 600;
+      text-shadow: none;
+    }
+
+    a:hover { text-decoration: none; }
+  }
+
+  #khr    a { background: #ffab71; color: #71153e; }
+  #ionchy a { background: #feca2f; color: #1b1505; }
+  #tenna  a { background: #6095da; color: #243224; }
+  #river  a { background: #98d8e7; color: #d67d28; }
+  #spiral a { background: #ef4d5a; color: #1f1f1f; }
+  #codl   a { background: #87261f; color: #edb970; }
+  #violet a { background: #8c2bd8; color: #dddddd; }
+  #brin   a { background: #1e1e1e; color: #ff4400; }
+  #konsti a { background: #060038; color: #ffcccc; }
+  #lena   a { background: #e3ccf7; color: #000000; }
+  #serena a { background: #e787ad; color: #204; }
+  #deneb  a { background: #540f00; color: #ee6bfa; }
+
+  #nissbuttons {
+    margin: 2em auto 0;
+    align-self: end;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1em;
+
+    h3 {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 500;
+      text-align: right;
+      text-wrap: balance;
+    }
+  }
 }
 
-#cube #friends {
-  display: grid;
-  grid: "hdr"     min-content
-        "links1"  auto
-        "links2"  auto
-        "buttons" auto;
-}
-
-#friends img { image-rendering: pixelated; }
-
-#friendlinks, #otherlinks { align-self: start; }
-
-#friendlinks ul, #otherlinks ul {
-  list-style: none;
-  padding: 0;
-
-  display: flex;
-  width: 80%;
-  margin: 0 auto;
-
-  align-items: start;
-  gap: 4px;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-#friendlinks img, #otherlinks img {
-  width: 88px;
-  height: 31px;
-  object-fit: none;
-}
-
-#friends .txt {
-  display: inline-block;
-  width: 88px;
-  height: 31px;
-  border: 3px outset currentcolor;
-  text-align: center;
-  line-height: 28px;
-
-  font-size: 18px;
-  font-weight: 600;
-  text-shadow: none;
-}
-
-#friends a:hover { text-decoration: none; }
-
-#friends #khr    a { background: #ffab71; color: #71153e; }
-#friends #ionchy a { background: #feca2f; color: #1b1505; }
-#friends #tenna  a { background: #6095da; color: #243224; }
-#friends #river  a { background: #98d8e7; color: #d67d28; }
-#friends #spiral a { background: #ef4d5a; color: #1f1f1f; }
-#friends #codl   a { background: #87261f; color: #edb970; }
-#friends #violet a { background: #8c2bd8; color: #dddddd; }
-#friends #brin   a { background: #1e1e1e; color: #ff4400; }
-#friends #konsti a { background: #060038; color: #ffcccc; }
-#friends #lena   a { background: #e3ccf7; color: #000000; }
-#friends #serena a { background: #e787ad; color: #204; }
-#friends #deneb  a { background: #540f00; color: #ee6bfa; }
-
-#nissbuttons {
-  margin: 2em auto 0;
-  align-self: end;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1em;
-}
-
-#nissbuttons h3 {
-  font-size: 1rem;
-  font-weight: 500;
-  text-align: right;
-  text-wrap: balance;
-}
-#nissbuttons * { margin: 0; }
-
-#six, #six ::selection {
-  --hue: 250deg;
-  --bg-angle: 130deg;
-}
-
-#cube #six {
-  --bg-image: url(../media/kesi.webp);
-  background:
-    var(--bg-image) bottom right / 100% auto no-repeat,
-    var(--base-background);
-}
-
-.artcredit {
-  position: absolute;
-  bottom: 0;
-  left: 1em;
-  font-size: smaller;
-  font-style: italic;
-  background: hsl(var(--menu-bg-hsl) / 75%);
-  padding: .1em .5em;
-}
-
-@media (prefers-color-scheme: dark) {
-  #cube #six { --bg-image: url(../media/kesi-neon.webp); }
-}
-@media (prefers-reduced-data: reduce) {
-  #cube #activities { --bg-image: url(../media/kesi.l.webp); }
-}
-@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
-  #cube #activities { --bg-image: url(../media/kesi-neon.l.webp); }
+@layer faces.six {
+  #six, #six ::selection {
+    --hue: 250deg;
+    --bg-angle: 130deg;
+
+    --bg-image: url(../media/kesi.webp);
+    background:
+      var(--bg-image) bottom right / 100% auto no-repeat,
+      var(--base-background);
+
+    @media (prefers-color-scheme: dark) {
+      --bg-image: url(../media/kesi-neon.webp);
+    }
+    @media (prefers-reduced-data: reduce) {
+      --bg-image: url(../media/kesi.l.webp);
+    }
+    @media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
+      --bg-image: url(../media/kesi-neon.l.webp);
+    }
+  }
 }
diff --git a/style/cube.css b/style/cube.css
index 47109a8..aa3a350 100644
--- a/style/cube.css
+++ b/style/cube.css
@@ -1,160 +1,148 @@
 @media (prefers-reduced-motion: no-preference) and
        (min-height: 650px) and (min-width: 650px) {
 
-/* BACKGROUND STUFF */
+@layer outer {
+  :root {
+    --bg-60309: url(../media/bg/60309.png);
+    --bg-kesi: url(../media/bg/kesi.png);
+    --bg-korai: url(../media/bg/korai.png);
+    --bg-mirai: url(../media/bg/mirai.png);
+    --bg-niss: url(../media/bg/niss.png);
+    --bg-niss2: url(../media/bg/niss2.png);
+    --bg-nisse: url(../media/bg/nisse.png);
+    --bg-prickly: url(../media/bg/prickly.png);
+    --bg-qt: url(../media/bg/qt.png);
+    --bg-qt2: url(../media/bg/qt2.png);
 
-html {
-  --bg-60309: url(../media/bg/60309.png);
-  --bg-kesi: url(../media/bg/kesi.png);
-  --bg-korai: url(../media/bg/korai.png);
-  --bg-mirai: url(../media/bg/mirai.png);
-  --bg-niss: url(../media/bg/niss.png);
-  --bg-niss2: url(../media/bg/niss2.png);
-  --bg-nisse: url(../media/bg/nisse.png);
-  --bg-prickly: url(../media/bg/prickly.png);
-  --bg-qt: url(../media/bg/qt.png);
-  --bg-qt2: url(../media/bg/qt2.png);
-}
+    @media (prefers-color-scheme: dark) {
+      --bg-60309: url(../media/bg/60309_neon.png);
+      --bg-kesi: url(../media/bg/kesi_neon.png);
+      --bg-korai: url(../media/bg/korai_neon.png);
+      --bg-mirai: url(../media/bg/mirai_neon.png);
+      --bg-niss: url(../media/bg/niss_neon.png);
+      --bg-niss2: url(../media/bg/niss2_neon.png);
+      --bg-nisse: url(../media/bg/nisse_neon.png);
+      --bg-prickly: url(../media/bg/prickly_neon.png);
+      --bg-qt: url(../media/bg/qt_neon.png);
+      --bg-qt2: url(../media/bg/qt2_neon.png);
+    }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    --bg-60309: url(../media/bg/60309_neon.png);
-    --bg-kesi: url(../media/bg/kesi_neon.png);
-    --bg-korai: url(../media/bg/korai_neon.png);
-    --bg-mirai: url(../media/bg/mirai_neon.png);
-    --bg-niss: url(../media/bg/niss_neon.png);
-    --bg-niss2: url(../media/bg/niss2_neon.png);
-    --bg-nisse: url(../media/bg/nisse_neon.png);
-    --bg-prickly: url(../media/bg/prickly_neon.png);
-    --bg-qt: url(../media/bg/qt_neon.png);
-    --bg-qt2: url(../media/bg/qt2_neon.png);
+    background-blend-mode: overlay;
+
+    @media (prefers-color-scheme: dark) {
+      background-blend-mode: soft-light;
+    }
+
+    background:
+      var(--bg-60309) bottom 29% right calc(44% - var(--half))
+        / auto 17% no-repeat,
+      var(--bg-kesi) bottom 23% left calc(44% - var(--half))
+        / auto 20% no-repeat,
+      var(--bg-korai) bottom left 7% / auto 19% no-repeat,
+      var(--bg-mirai) top calc(5em + 3%) right 6% / 20% auto no-repeat,
+      var(--bg-niss) top 30% left calc(31% - var(--half))
+        / auto 20% no-repeat,
+      var(--bg-niss2) top 51% right calc(33% - var(--half))
+        / auto 20% no-repeat,
+      var(--bg-nisse) top 29% right calc(36% - var(--half))
+        / auto 15% no-repeat,
+      var(--bg-qt) bottom 41% left calc(24% - var(--half))
+        / auto 18% no-repeat,
+      var(--bg-qt2) top 10% left calc(46% - var(--half))
+        / auto 16% no-repeat,
+      var(--bg-prickly) bottom 9% right calc(28% - var(--half))
+        / auto 15% no-repeat,
+      var(--base-background);
+
+    @media ((prefers-reduced-data: reduce),
+            (prefers-reduced-transparency: reduce)) {
+      background: var(--base-background);
+      background-blend-mode: initial;
+    }
+  }
+
+  body {
+    display: grid;
+    grid-template-rows: 5em 1fr;
+
+    perspective: 440vw;
+    perspective-origin: 50% 120%;
+  }
+
+  menu {
+    label {
+      position: relative;
+      &::after {
+        content: ' ';
+        z-index: -1;
+        position: absolute;
+        inset: 0 0 100% 0;
+        background: hsl(var(--menu-bg-hsl));
+
+        @media not (prefers-reduced-motion: reduce) {
+          transition: inset .15s linear;
+        }
+      }
+    }
+
+    :checked + label::after {
+      bottom: 0;
+    }
   }
 }
 
-html {
-  background:
-  /*
-    url(../media/bg/kesi_sprite_front.png) top 100px right no-repeat,
-    url(../media/bg/kesi_sprite_mid.png) top 150px center repeat-x,
-    url(../media/bg/kesi_sprite_back.png) top 200px left no-repeat,
-  */
-    var(--bg-60309) bottom 29% right calc(44% - var(--half))
-      / auto 17% no-repeat,
-    var(--bg-kesi) bottom 23% left calc(44% - var(--half))
-      / auto 20% no-repeat,
-    var(--bg-korai) bottom left 7% / auto 19% no-repeat,
-    var(--bg-mirai) top calc(5em + 3%) right 6% / 20% auto no-repeat,
-    var(--bg-niss) top 30% left calc(31% - var(--half))
-      / auto 20% no-repeat,
-    var(--bg-niss2) top 51% right calc(33% - var(--half))
-      / auto 20% no-repeat,
-    var(--bg-nisse) top 29% right calc(36% - var(--half))
-      / auto 15% no-repeat,
-    var(--bg-qt) bottom 41% left calc(24% - var(--half))
-      / auto 18% no-repeat,
-    var(--bg-qt2) top 10% left calc(46% - var(--half))
-      / auto 16% no-repeat,
-    var(--bg-prickly) bottom 9% right calc(28% - var(--half))
-      / auto 15% no-repeat,
-    var(--base-background);
-  background-blend-mode: overlay;
-}
+@layer cube {
+  :root {
+    --side: min(65vh, 70vw);
+    --half: calc(var(--side) * .5);
+    --nhalf: calc(0em - var(--half));
+    --breathe: calc(var(--side) * 0.02);
+  }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    background-blend-mode: soft-light;
+  #outer {
+    --transform-origin: 50% 50% calc(var(--nhalf) - min(6vh, 6vw));
+  }
+
+  #outer, #cube {
+    transform-style: preserve-3d;
+    transform-origin: var(--transform-origin);
+    width:  calc(var(--side) + 10vw);
+    height: calc(var(--side) + 10vh);
+    margin: auto;
+  }
+
+  #cube {
+    position: relative;
+
+    > section {
+      position: absolute;
+      inset: 5vh 5vw;
+      overflow: auto;
+      transform-origin: var(--transform-origin);
+      transform: var(--base-transform);
+      overscroll-behavior: contain;
+    }
+
+    &:not([data-moving]) > section:not([data-state=active]) {
+      animation: breathe 7.5s infinite ease-in-out;
+    }
+  }
+
+  @keyframes breathe {
+    40% { transform: var(--base-transform) translateZ(var(--breathe)); }
+  }
+
+  @media not (prefers-reduced-motion: reduce) {
+    .zoom * { transition: all 0.25s ease-in; }
+    .zoom > :hover {
+      scale: 110%;
+      filter: drop-shadow(4px 4px 5px rgb(0 0 0 / 60%));
+      &:nth-child(5n)    { rotate: 4deg; }
+      &:nth-child(5n+1)  { rotate: -2deg; }
+      &:nth-child(5n+2)  { rotate: 1deg; }
+      &:nth-child(5n+3)  { rotate: -3deg; }
+      &:nth-child(10n+4) { rotate: 4deg; }
+      &:nth-child(10n+9) { rotate: -1deg; }
+    }
   }
 }
-
-@media (prefers-reduced-data: reduce) {
-  html {
-    background: var(--base-background);
-    background-blend-mode: unset;
-  }
-}
-
-
-/* LAYOUT BASICS */
-
-body {
-  display: grid;
-  grid-template-rows: 5em 1fr;
-
-  perspective: 440vw;
-  perspective-origin: 50% 120%;
-}
-
-/* MENU ANIMATION */
-
-.menu label { position: relative; }
-.menu label::after {
-  content: ' ';
-  z-index: -1;
-  position: absolute;
-  inset: 0 0 100% 0;
-  background: hsl(var(--menu-bg-hsl));
-  transition: inset .15s linear;
-}
-.menu :checked + label::after {
-  bottom: 0;
-}
-
-
-/* CUBE ASSEMBLY */
-/* the rest is in cube.ts */
-
-html {
-  --side: min(65vh, 70vw);
-  --half: calc(var(--side) * .5);
-  --nhalf: calc(0em - var(--half));
-  --breathe: calc(var(--side) * 0.02);
-}
-
-#outer {
-  --transform-origin: 50% 50% calc(var(--nhalf) - min(6vh, 6vw));
-}
-
-#outer, #cube {
-  transform-style: preserve-3d;
-  transform-origin: var(--transform-origin);
-  width:  calc(var(--side) + 10vw);
-  height: calc(var(--side) + 10vh);
-  margin: auto;
-}
-
-#cube {
-  position: relative;
-}
-
-#cube > section {
-  position: absolute;
-  inset: 5vh 5vw;
-  overflow: auto;
-  transform-origin: var(--transform-origin);
-  transform: var(--base-transform);
-  overscroll-behavior: contain;
-}
-
-#cube:not([data-moving]) > section:not([data-state=active]) {
-  animation: breathe 7.5s infinite ease-in-out;
-}
-
-@keyframes breathe {
-  40% { transform: var(--base-transform) translateZ(var(--breathe)); }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .zoom * { transition: all 0.25s ease-in; }
-  .zoom > :hover {
-    scale: 110%;
-    filter: drop-shadow(4px 4px 5px rgb(0 0 0 / 60%));
-  }
-  .zoom > :hover:nth-child(5n) { rotate: 4deg; }
-  .zoom > :hover:nth-child(5n+1) { rotate: -2deg; }
-  .zoom > :hover:nth-child(5n+2) { rotate: 1deg; }
-  .zoom > :hover:nth-child(5n+3) { rotate: -3deg; }
-  .zoom > :hover:nth-child(10n+4) { rotate: 4deg; }
-  .zoom > :hover:nth-child(10n+9) { rotate: -1deg; }
-}
-
-}
diff --git a/style/flat.css b/style/flat.css
index 5ddebd7..b359c65 100644
--- a/style/flat.css
+++ b/style/flat.css
@@ -1,122 +1,120 @@
 @media (prefers-reduced-motion: reduce),
        (max-height: 649px), (max-width: 649px) {
 
-html {
+:root {
   --side: 0px;
   --half: 0px;
   --nhalf: 0px;
 }
 
-/* LAYOUT */
+@layer outer {
+  body {
+    display: grid;
+    grid-template: "menu" 5em "body" 1fr;
+  }
 
-body {
-  display: grid;
-  grid-template: "menu" 5em "body" 1fr;
-  /* height: 100vh; height: 100dvh; */
-  /* width:  100vw; width:  100dvw; */
-}
+  #face-menu { grid-area: menu; }
 
-#face-menu { grid-area: menu; }
-#outer     { grid-area: body; }
+  #outer {
+    grid-area: body;
+    position: relative;
+    height: 90%;
+    width: 90%;
+    margin: auto;
 
-#outer {
-  position: relative;
-  height: 90%;
-  width: 90%;
-  margin: auto;
-}
-
-#outer::after {
-  content: ' ';
-  position: absolute;
-  inset: 0;
-  box-shadow: 0 0 40px hsl(var(--shadow-hsl) / 40%);
-  mix-blend-mode: multiply;
+    &::after {
+      content: ' ';
+      position: absolute;
+      inset: 0;
+      box-shadow: 0 0 40px hsl(var(--shadow-hsl) / 40%);
+      mix-blend-mode: multiply;
+    }
+  }
 }
 
 /* not really a cube any more. but */
-#cube, #cube > section {
-  position: absolute;
-  inset: 0;
-}
-#cube > section { overflow: auto; }
+@layer cube {
+  #cube, #cube > section {
+    position: absolute;
+    inset: 0;
+  }
+  #cube > section { overflow: auto; }
 
-@media (prefers-color-scheme: dark) {
-  html { --shadow-hsl: 60deg 100% 96%; }
+  @media (prefers-color-scheme: dark) {
+    html { --shadow-hsl: 60deg 100% 96%; }
+  }
 }
 
-
 /* BACKGROUND FIXES */
 
-@media (max-width: 649px) {
-  #cube #hello {
-    background-size: auto 80%, auto, auto;
-    background-position: bottom -20% right 60%, center, center;
-  }
-}
+@layer faces {
+  @layer hello {
+    #hello {
+      @media (max-width: 649px) {
+        background-size: auto 80%, auto, auto;
+        background-position: bottom -20% right 60%, center, center;
+      }
 
-@media (max-height: 649px) {
-  #cube #hello {
-    background-size: auto 80%, auto, auto;
-    background-position: bottom right, center, center;
+      @media (max-height: 649px) {
+        background-size: auto 80%, auto, auto;
+        background-position: bottom right, center, center;
+      }
+    }
+  }
+
+  @layer activities {
+    #activities {
+      @media (max-width: 649px) {
+        background-size: auto 30%, auto, auto;
+        background-position: bottom left 70%, center, center;
+      }
+    }
+  }
+
+  @layer six {
+    #six {
+      background-position: bottom left 70%, center, center;
+
+      @media (max-width: 649px) {
+        background-size: auto 100%, auto, auto;
+        background-position: bottom left 70%, center, center;
+      }
+
+      @media (max-height: 649px) {
+        background-size: cover;
+        background-position: top 15% center;
+      }
+    }
   }
 }
 
 
-@media (max-width: 649px) {
-  #cube #activities {
-    background-size: auto 30%, auto, auto;
-    background-position: bottom left 70%, center, center;
+@layer cube {
+  #face-menu {
+    label { transition: background 0.1s ease-in; }
+    :checked + label { background: hsl(var(--menu-bg-hsl)); }
+  }
+
+  #cube > section {
+    &[data-state=entering] {
+      z-index: 1;
+      opacity: 0;
+    }
+
+    &[data-state=active] {
+      z-index: 1;
+      opacity: 1;
+      transition: opacity 0.1s ease-in;
+    }
+
+    &[data-state=leaving] {
+      z-index: -1;
+      opacity: 0;
+      transition: opacity 0s 0.1s ease-in;
+    }
+
+    &[data-state=hidden] {
+      display: none;
+    }
   }
 }
-
-#cube #six {
-  background-position: bottom left 70%, center, center;
-}
-
-@media (max-width: 649px) {
-  #cube #six {
-    background-size: auto 100%, auto, auto;
-    background-position: bottom left 70%, center, center;
-  }
-}
-
-@media (max-height: 649px) {
-  #cube #six {
-    background-size: cover;
-    background-position: top 15% center;
-  }
-}
-
-
-/* TRANSITIONS */
-
-#face-menu :checked + label {
-  background: hsl(var(--menu-bg-hsl));
-}
-#face-menu label {
-  transition: background 0.1s ease-in;
-}
-
-#cube > :is(section[data-state=entering], #a) {
-  z-index: 1;
-  opacity: 0;
-}
-
-#cube > :is(section[data-state=active], #a) {
-  z-index: 1;
-  opacity: 1;
-  transition: opacity 0.1s ease-in;
-}
-
-#cube > :is(section[data-state=leaving], #a) {
-  z-index: -1;
-  opacity: 0;
-  transition: opacity 0s 0.1s ease-in;
-}
-
-#cube > :is(section[data-state=hidden], #a) {
-  display: none;
-}
-
-}
diff --git a/style/properties.css b/style/properties.css
new file mode 100644
index 0000000..0a3c261
--- /dev/null
+++ b/style/properties.css
@@ -0,0 +1,44 @@
+/* face backgrounds */
+
+@property --hue {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 0deg;
+}
+
+@property --bg-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 45deg;
+}
+
+
+/* link buttons */
+
+@property --icon {
+  syntax: "<url>";
+  inherits: true;
+  initial-value: url(../media/favicon.webp);
+}
+
+@property --fg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: white;
+}
+
+@property --bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: black;
+}
+
+@property --icon-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: white;
+}
+/* the initial value can't be `var(--bg)` because only "computationally
+ * independent" values are allowed
+ * https://drafts.css-houdini.org/css-properties-values-api/#initial-value-descriptor
+ */