From 51b45ba53bb4bfee7b3d5583362d358d3862a4f5 Mon Sep 17 00:00:00 2001
From: lolcat <will@lolcat.ca>
Date: Fri, 14 Aug 2026 20:34:45 -0400
Subject: [PATCH] add degoog themes, ty fccview, now you fags can stop
 complaining about 4get not having a modern theme

---
 static/themes/Degoog dark.css  | 1495 +++++++++++++++++++++++++++++++
 static/themes/Degoog light.css | 1501 ++++++++++++++++++++++++++++++++
 2 files changed, 2996 insertions(+)
 create mode 100644 static/themes/Degoog dark.css
 create mode 100644 static/themes/Degoog light.css

diff --git a/static/themes/Degoog dark.css b/static/themes/Degoog dark.css
new file mode 100644
index 0000000..96c7cab
--- /dev/null
+++ b/static/themes/Degoog dark.css	
@@ -0,0 +1,1495 @@
+@charset "UTF-8";
+
+:root{
+	--warning: #fbbc05;
+	--bg: #25272e;
+	--bg-light: #303134;
+	--bg-hover: #3c4043;
+	--border: #5f6368;
+	--border-light: #303134;
+	--text-primary: #dddddd;
+	--text-secondary: #9aa0a6;
+	--text-link: #8ab4f8;
+	--text-link-visited: #c58af9;
+	--text-cite: #bdc1c6;
+	--text-snippet: #bdc1c6;
+	--search-bar-bg: #303134;
+	--search-bar-bg-hover: #303134;
+	--btn-bg: #303134;
+	--overlay-bg: rgba(0, 0, 0, 0.6);
+	--white: #fff3f3;
+}
+
+:root {
+  --gutter: clamp(
+    1rem,
+    calc(1rem + max(0px, (100vw - 48rem) * 0.31)),
+    9.375rem
+  );
+  --main-width: 40.75rem;
+  --sidebar-width: 21.25rem;
+  --column-gap: 2.5rem;
+  --bar-height: 2.75rem;
+  --bar-radius: 1.5rem;
+  --radius-xs: 0.1875rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  --fast: 0.2s ease;
+  --icon-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>");
+  --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
+
+  --1d2021: var(--bg);
+  --282828: var(--bg-light);
+  --3c3836: var(--bg-hover);
+  --504945: var(--border-light);
+  --928374: var(--text-secondary);
+  --a89984: var(--text-snippet);
+  --bdae93: var(--text-primary);
+  --8ec07c: var(--success);
+  --ebdbb2: var(--text-primary);
+  --comment: var(--text-secondary);
+  --default: var(--text-primary);
+  --keyword: var(--warning);
+  --string: var(--text-link);
+  --green: var(--success);
+  --yellow: var(--warning);
+  --red: var(--danger);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 100%;
+  font-family: sans-serif;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  max-width: none;
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--text-primary);
+  font-family: var(--font);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  word-wrap: anywhere;
+}
+
+input,
+select,
+button,
+textarea {
+  font-family: var(--font);
+}
+
+a {
+  color: var(--text-link);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+::selection {
+  background: rgba(var(--primary-rgb), 0.3);
+}
+
+::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: var(--radius-sm);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--text-primary);
+  font-weight: 500;
+  line-height: 1.3;
+  margin: 0 0 0.75rem;
+}
+
+h1 {
+  font-size: 1.75rem;
+}
+
+h2 {
+  font-size: 1.25rem;
+}
+
+h3 {
+  font-size: 1.125rem;
+}
+
+h4,
+h5,
+h6 {
+  font-size: 1rem;
+}
+
+b,
+strong {
+  font-weight: 600;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--border-light);
+  margin: 1.5rem 0;
+}
+
+ul,
+ol {
+  padding-left: 1.25rem;
+  margin: 0.5rem 0;
+}
+
+.quote {
+  font-style: normal;
+  color: var(--text-secondary);
+  background: var(--bg-light);
+  border: 0;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+}
+
+.navigation {
+  position: absolute;
+  top: 1.15rem;
+  right: var(--gutter);
+  left: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  z-index: 2;
+}
+
+.navigation a {
+  color: var(--text-secondary);
+  text-decoration: none;
+}
+
+.navigation a:hover {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.navigation a:not(:last-child)::after {
+  content: none;
+}
+
+.logo a {
+  display: inline-block;
+  text-decoration: none;
+}
+
+.home .logo {
+  width: auto;
+  max-width: none;
+  height: auto;
+  margin: 0 0 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.home .logo img {
+  display: block;
+  width: auto;
+  max-width: min(100%, 22rem);
+  height: auto;
+}
+
+body.home {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  margin: 0;
+  padding: 2rem 1rem 4rem;
+  text-align: center;
+}
+
+.home #center {
+  display: block;
+  width: min(36.5rem, 100%);
+  vertical-align: baseline;
+}
+
+.home form {
+  display: block;
+  margin-bottom: 1.75rem;
+}
+
+.home .searchbox {
+  width: 100%;
+  margin: 0 auto;
+  text-align: left;
+}
+
+.home #center > a {
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+}
+
+.home #center > a:hover {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.home .subtext {
+  margin-top: 1.25rem;
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+  line-height: 1.6;
+}
+
+.home .subtext a {
+  color: var(--text-secondary);
+}
+
+.searchbox {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  max-width: 43.25rem;
+  height: var(--bar-height);
+  margin: 0;
+  padding: 0 0.75rem;
+  background: var(--search-bar-bg);
+  border: 0;
+  border-radius: var(--bar-radius);
+  box-shadow: var(--shadow);
+  transition:
+    background var(--fast),
+    box-shadow var(--fast);
+}
+
+.searchbox::before {
+  content: "";
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  margin-right: 0.75rem;
+  background-color: var(--text-secondary);
+  -webkit-mask: var(--icon-search) center/contain no-repeat;
+  mask: var(--icon-search) center/contain no-repeat;
+}
+
+.searchbox:hover,
+.searchbox:focus-within {
+  background: var(--search-bar-bg-hover);
+  border: 0;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
+}
+
+.searchbox .wrapper {
+  order: 1;
+  flex: 1;
+  min-width: 0;
+  overflow: visible;
+}
+
+.searchbox input {
+  all: unset;
+  box-sizing: border-box;
+  height: var(--bar-height);
+  line-height: var(--bar-height);
+  color: var(--text-primary);
+  font-family: var(--font);
+}
+
+.searchbox input[type="text"] {
+  width: 100%;
+  padding-left: 0;
+  font-size: 1rem;
+}
+
+.searchbox input[type="text"]::placeholder {
+  color: var(--text-secondary);
+}
+
+.searchbox input[type="submit"] {
+  order: 2;
+  float: none;
+  flex-shrink: 0;
+  height: 2rem;
+  line-height: 2rem;
+  margin-left: 0.5rem;
+  padding: 0 0.75rem;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background var(--fast),
+    color var(--fast);
+}
+
+.searchbox input[type="submit"]:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.searchbox:has(.autocomplete[style*="block"]) {
+  border-radius: var(--bar-radius) var(--bar-radius) 0 0;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
+}
+
+.autocomplete {
+  top: 100%;
+  left: 0;
+  right: 0;
+  padding: 0.25rem 0 0.5rem;
+  background: var(--search-bar-bg-hover);
+  border: 0;
+  border-radius: 0 0 var(--bar-radius) var(--bar-radius);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.16);
+  overflow: hidden;
+  z-index: 100;
+}
+
+.autocomplete .entry {
+  padding: 0.45rem 1rem 0.45rem 2.875rem;
+  color: var(--text-primary);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.autocomplete .entry:hover,
+.autocomplete .entry:focus {
+  background: var(--bg-hover);
+}
+
+body > form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  column-gap: 1.25rem;
+  padding: 1rem var(--gutter) 0;
+  margin: 0;
+}
+
+body > form .searchbox {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+body > form .tabs {
+  grid-column: 1 / -1;
+  grid-row: 2;
+}
+
+body > form .filters {
+  grid-column: 1 / -1;
+  grid-row: 3;
+}
+
+.tabs {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-top: 1rem;
+  padding: 0 0 0 0.25rem;
+  border-bottom: 1px solid var(--border-light);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.tabs .tab {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  white-space: nowrap;
+  border-bottom: 3px solid transparent;
+  transition:
+    color var(--fast),
+    border-color var(--fast);
+}
+
+.tabs .tab:hover {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.tabs .tab.selected {
+  color: var(--text-primary);
+  border-bottom: 3px solid var(--text-primary);
+}
+
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.75rem 0 0;
+  overflow: visible;
+  white-space: normal;
+}
+
+.filters .filter {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.375rem 0.75rem;
+  background: var(--bg-light);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  vertical-align: middle;
+}
+
+.filters .filter .title {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  white-space: nowrap;
+}
+
+.filters .filter input,
+.filters .filter select {
+  all: unset;
+  display: block;
+  width: auto;
+  max-width: 11rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text-primary);
+  font-family: var(--font);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  cursor: pointer;
+}
+
+.filters .filter select {
+  padding-right: 1.125rem;
+  background-color: transparent;
+  background-image: var(--icon-chevron);
+  background-repeat: no-repeat;
+  background-position: right center;
+  background-size: 0.875rem;
+}
+
+.timetaken {
+  margin: 0;
+  padding: 1.25rem var(--gutter) 0.75rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 400;
+}
+
+#overflow {
+  overflow: visible;
+}
+
+#overflow.web {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--column-gap);
+  padding: 0 var(--gutter) 3rem;
+}
+
+body > #overflow:first-child {
+  padding-top: 2rem;
+}
+
+.web .left {
+  float: none;
+  order: 1;
+  flex: 1;
+  min-width: 0;
+  width: auto;
+  max-width: var(--main-width);
+}
+
+.web .right-wrapper {
+  float: none;
+  order: 2;
+  flex-shrink: 0;
+  width: var(--sidebar-width);
+  padding-left: 0;
+  overflow: visible;
+}
+
+.web .right-wrapper:not(:has(> div:not(:empty))) {
+  display: none;
+}
+
+.web .right-right,
+.web .right-left {
+  float: none;
+  width: 100%;
+  padding: 0;
+  overflow: visible;
+}
+
+.web .text-result {
+  margin: 0 0 2rem;
+  padding: 0;
+}
+
+.web .url {
+  display: flow-root;
+  position: relative;
+  line-height: 1.625rem;
+}
+
+.favicon {
+  all: unset;
+  float: left;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.625rem;
+  height: 1.625rem;
+  margin-right: 0.625rem;
+  border-radius: 50%;
+  background: var(--bg-hover);
+  cursor: pointer;
+}
+
+.web .favicon img {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  object-fit: contain;
+  font-size: 0.625rem;
+  line-height: 1;
+  text-align: center;
+}
+
+.web .url .part {
+  color: var(--text-cite);
+  font-size: 0.875rem;
+}
+
+.web .url .part:hover {
+  text-decoration: none;
+}
+
+.web .separator::before {
+  content: "›";
+  padding: 0 0.375rem;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.favicon-dropdown {
+  top: 2rem;
+  left: 0;
+  padding: 0.25rem 0;
+  background: var(--bg-light);
+  border: 0;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  z-index: 20;
+}
+
+.favicon-dropdown::before {
+  content: none;
+}
+
+.favicon-dropdown a {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.875rem;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.favicon-dropdown a:hover {
+  background: var(--bg-hover);
+  text-decoration: none;
+}
+
+.favicon-dropdown img {
+  float: none;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.web .hover {
+  display: flow-root;
+  clear: none;
+  padding-top: 0;
+  color: var(--text-snippet);
+}
+
+.web .text-result .title {
+  margin: 0.125rem 0 0;
+  color: var(--text-link);
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.3;
+}
+
+.web .text-result a:visited .title {
+  color: var(--text-link-visited) !important;
+}
+
+.web .text-result .hover:hover .title {
+  text-decoration: underline;
+}
+
+.web .description {
+  margin-top: 0.25rem;
+  color: var(--text-snippet);
+  font-size: 0.875rem;
+  line-height: 1.58;
+  white-space: pre-line;
+}
+
+.web .type {
+  float: left;
+  margin: 0.3rem 0.5rem 0 0;
+  padding: 0 0.375rem;
+  background: var(--bg-hover);
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.web .text-result .greentext {
+  margin-top: 0.25rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+}
+
+.web .text-result .author {
+  font-style: normal;
+  color: var(--text-secondary);
+}
+
+.thumb-wrap {
+  float: right;
+  width: 7.5rem;
+  height: 5.625rem;
+  margin: 0.25rem 0 0.5rem 0.75rem;
+  background: var(--bg-light);
+  border: 0;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.thumb-wrap.portrait {
+  width: 4.25rem;
+}
+
+.thumb-wrap.square {
+  width: 5.625rem;
+}
+
+.thumb-wrap .thumb {
+  object-fit: cover;
+}
+
+.duration {
+  right: 0.375rem;
+  bottom: 0.375rem;
+  padding: 1px 0.25rem;
+  background: rgba(0, 0, 0, 0.75);
+  border: 0;
+  border-radius: var(--radius-xs);
+  color: #fff;
+  font-family: var(--font);
+  font-size: 0.6875rem;
+  line-height: 1.3;
+}
+
+.web .sublinks {
+  padding: 0.75rem 0 0;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+}
+
+.web .sublinks table td {
+  padding-bottom: 0.75rem;
+}
+
+.web .sublinks .title {
+  color: var(--text-link);
+  font-size: 0.875rem;
+}
+
+.web .sublinks .description {
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.infobox,
+.web .answer-wrapper,
+.web .info-table,
+.web .wiki-head table,
+.about table,
+.related,
+.web .settings,
+.code,
+.nextpage,
+.web .spoiler-button {
+  background: var(--bg-light);
+  border: 0;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+}
+
+.infobox {
+  margin-bottom: 1rem;
+  padding: 1rem;
+  color: var(--text-primary);
+  overflow: hidden;
+}
+
+.infobox h1 {
+  font-size: 1.25rem;
+}
+
+.infobox h2 {
+  font-size: 1.125rem;
+}
+
+.infobox a {
+  color: var(--text-link);
+}
+
+.infobox ul {
+  padding-left: 1.25rem;
+  margin-bottom: 0;
+}
+
+.web .answer-wrapper {
+  margin-bottom: 1rem;
+  padding: 1rem;
+  overflow: hidden;
+}
+
+.web .answer {
+  padding-bottom: 0;
+  max-height: 34rem;
+}
+
+.web .answer::after {
+  height: 2.5rem;
+  background: linear-gradient(transparent, var(--bg-light));
+}
+
+.web .answer-title {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.web .answer-title h1 {
+  font-size: 1.375rem;
+  margin-bottom: 0.5rem;
+}
+
+.web .spoiler-button {
+  margin-top: 0.75rem;
+  padding: 0 0.75rem;
+  line-height: 2.25rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  box-shadow: none;
+  background: var(--bg-hover);
+}
+
+.web .spoiler-button:hover {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.web .wiki-head .photo {
+  margin: 0 0 0.75rem 0.75rem;
+}
+
+.web .wiki-head .photo img {
+  max-width: 9rem;
+  max-height: 9rem;
+  border-radius: var(--radius-lg);
+  filter: none;
+}
+
+.web .wiki-head .description {
+  padding-top: 0.5rem;
+  color: var(--text-snippet);
+  line-height: 1.58;
+}
+
+.web .wiki-head h2 {
+  font-size: 1.125rem;
+  margin: 1.25rem 0 0.5rem;
+}
+
+.web .wiki-head h2:first-child {
+  margin-top: 0.5rem;
+}
+
+.web .wiki-head a {
+  color: var(--text-link);
+}
+
+.web .wiki-head .socials {
+  margin-top: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  overflow: visible;
+}
+
+.web .wiki-head .socials a {
+  float: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4.25rem;
+  height: auto;
+  padding: 0.625rem 0.25rem;
+  border-radius: var(--radius-lg);
+  color: var(--text-secondary);
+  transition: background var(--fast);
+}
+
+.web .wiki-head .socials a:hover {
+  background: var(--bg-hover);
+}
+
+.web .wiki-head .socials a:hover .title {
+  text-decoration: none;
+  color: var(--text-primary);
+}
+
+.web .wiki-head .socials img {
+  width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+}
+
+.web .wiki-head .socials .title {
+  margin-top: 0.5rem;
+  font-size: 0.6875rem;
+  line-height: 1.3;
+}
+
+.web .fullimg {
+  margin: 0.5rem 0 1rem;
+  border: 0;
+  border-radius: var(--radius-lg);
+  max-height: 11rem;
+}
+
+table {
+  width: 100%;
+  text-align: left;
+  border-collapse: collapse;
+}
+
+table a {
+  color: var(--text-link);
+}
+
+.web .info-table,
+.web .wiki-head table,
+.about table {
+  margin: 0.75rem 0 0;
+  overflow: hidden;
+  color: var(--text-snippet);
+  font-size: 0.8125rem;
+}
+
+.web .info-table td,
+.web .wiki-head td,
+.about table td {
+  padding: 0.5rem 0.875rem;
+  vertical-align: top;
+}
+
+.web .info-table tr td:first-child,
+.web .wiki-head tr td:first-child,
+.about table tr td:first-child {
+  width: 34%;
+  min-width: 0;
+  padding-right: 0.875rem;
+  color: var(--text-secondary);
+  white-space: normal;
+}
+
+.web .info-table tr:nth-child(even),
+.web .wiki-head tr:nth-child(odd),
+.about table tr:nth-child(odd) {
+  background: var(--bg-hover);
+}
+
+.related {
+  margin: 0 0 2rem;
+  padding: 0.25rem 0;
+  overflow: hidden;
+}
+
+.related td {
+  padding: 0;
+  vertical-align: middle;
+}
+
+.related tr td:first-child {
+  padding-right: 0;
+}
+
+.related a {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.6rem 0.875rem;
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.related a::before {
+  content: "";
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  background-color: var(--text-secondary);
+  -webkit-mask: var(--icon-search) center/contain no-repeat;
+  mask: var(--icon-search) center/contain no-repeat;
+}
+
+.related a:hover {
+  background: var(--bg-hover);
+  text-decoration: none;
+}
+
+.nextpage {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: auto;
+  margin: 0 0 2rem;
+  padding: 0 1.125rem;
+  min-height: 2.25rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-align: left;
+  transition:
+    background var(--fast),
+    color var(--fast);
+}
+
+.nextpage:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.code {
+  margin: 0.5rem 0 0.875rem;
+  padding: 0.75rem 0.875rem;
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  font-family: var(--mono);
+  font-size: 0.8125rem;
+  box-shadow: none;
+  overflow-x: auto;
+}
+
+.code-inline {
+  display: inline;
+  padding: 0.05rem 0.375rem;
+  background: var(--bg-hover);
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-family: var(--mono);
+  font-size: 0.8125rem;
+}
+
+.web .images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin: 0.5rem 0 0;
+  overflow: visible;
+  font-size: 0;
+}
+
+.web .images .image {
+  width: 5.5rem;
+  height: 5.5rem;
+  padding: 0;
+  line-height: 0;
+  border-radius: var(--radius-lg);
+  background: var(--bg-hover);
+  overflow: hidden;
+  transition: opacity var(--fast);
+}
+
+.web .images .image:hover {
+  opacity: 0.85;
+}
+
+.web .images .image img {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  object-fit: cover;
+  vertical-align: top;
+}
+
+.web .images .duration {
+  border: 0;
+  right: 0.375rem;
+  bottom: 0.375rem;
+}
+
+#images {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  gap: 1rem 0.75rem;
+  margin: 0;
+  padding: 0.5rem var(--gutter) 1.5rem;
+  overflow: visible;
+}
+
+#images .infobox {
+  grid-column: 1 / -1;
+  width: auto;
+  max-width: var(--main-width);
+  margin-bottom: 0.5rem;
+}
+
+#images .image-wrapper {
+  float: none;
+  width: auto;
+  line-height: 1.4;
+}
+
+#images .image {
+  width: auto;
+  max-width: none;
+  margin: 0;
+  padding: 0;
+  font-size: 0.8125rem;
+}
+
+#images .thumb {
+  height: 11.25rem;
+  margin-bottom: 0.5rem;
+  border-radius: var(--radius-lg);
+  background: var(--bg-hover);
+  overflow: hidden;
+  transition: opacity var(--fast);
+}
+
+#images .image:hover .thumb {
+  opacity: 0.85;
+}
+
+#images img {
+  object-fit: cover;
+}
+
+#images .duration {
+  border: 0;
+}
+
+#images .image .title,
+#images .image .i-title-wrapper {
+  margin-bottom: 0.125rem;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  text-overflow: ellipsis;
+}
+
+#images .image .description {
+  height: auto;
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.nextpage.img {
+  width: auto;
+  margin: 0 var(--gutter) 3rem;
+}
+
+#popup-bg {
+  background: #000;
+  opacity: 0.92;
+}
+
+#popup-image {
+  background: transparent;
+  border: 0;
+}
+
+#popup-status {
+  height: 2.75rem;
+  background: var(--bg-light);
+  border: 0;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
+}
+
+#popup-num,
+#popup-title {
+  padding: 0 0.875rem;
+  line-height: 2.75rem;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+}
+
+#popup-num {
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+#popup-status select {
+  all: unset;
+  display: block;
+  width: 15rem;
+  height: 2rem;
+  margin-right: 0.75rem;
+  padding: 0 1.75rem 0 0.75rem;
+  background-color: var(--bg-hover);
+  background-image: var(--icon-chevron);
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  background-size: 0.875rem;
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-family: var(--font);
+  font-size: 0.8125rem;
+  line-height: 2rem;
+  cursor: pointer;
+}
+
+.captcha-wrapper {
+  border: 0;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow);
+}
+
+.captcha-wrapper img {
+  background: var(--bg-light);
+}
+
+.captcha-wrapper input:checked + label::after {
+  border-right-color: var(--white);
+  border-bottom-color: var(--white);
+}
+
+.web .settings {
+  margin-top: 1rem;
+  padding: 1rem 1rem 0.25rem;
+}
+
+.web .settings h2 {
+  font-size: 1.125rem;
+  margin-bottom: 1rem;
+}
+
+.web .setting {
+  margin-bottom: 1.25rem;
+}
+
+.web .setting .title {
+  margin-bottom: 0.375rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.web .setting .title i {
+  font-style: normal;
+  color: var(--text-secondary);
+}
+
+.web .settings select {
+  all: unset;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 22rem;
+  height: 2.25rem;
+  padding: 0 2rem 0 0.75rem;
+  background-color: var(--bg);
+  background-image: var(--icon-chevron);
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 0.875rem;
+  border: 0;
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-family: var(--font);
+  font-size: 0.875rem;
+  line-height: 2.25rem;
+  cursor: pointer;
+}
+
+.web .settings-submit {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin: 1.25rem 0 0;
+}
+
+.web .settings-submit input {
+  all: unset;
+  order: 1;
+  height: 2.25rem;
+  padding: 0 1.25rem;
+  background: var(--primary);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow);
+  color: var(--white);
+  font-family: var(--font);
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 2.25rem;
+  cursor: pointer;
+  transition: background var(--fast);
+}
+
+.web .settings-submit input:hover {
+  background: var(--primary-hover);
+}
+
+.web .settings-submit a {
+  order: 2;
+  margin-right: 0;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+}
+
+body.about {
+  margin: 0;
+  padding: 2rem var(--gutter) 4rem;
+  max-width: calc(var(--main-width) + var(--gutter) * 2);
+}
+
+.about a {
+  color: var(--text-link);
+}
+
+.about h1,
+.about h2 {
+  margin-top: 1.75rem;
+}
+
+.about table {
+  margin-bottom: 1rem;
+}
+
+body.instances {
+  margin: 0;
+  padding: 2rem var(--gutter) 4rem;
+}
+
+.instances a {
+  color: var(--text-link);
+}
+
+.instances table {
+  margin-top: 1rem;
+  background: var(--bg-light);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.instances thead {
+  outline: 0;
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+}
+
+.instances tbody {
+  outline: 0;
+  top: 0;
+}
+
+.instances th,
+.instances td {
+  padding: 0.5rem 0.875rem;
+}
+
+.instances th:hover {
+  background: var(--border-light);
+}
+
+.instances tbody tr:nth-child(even) {
+  background: var(--bg-hover);
+}
+
+.instances tbody tr:hover {
+  background: var(--border-light);
+}
+
+.instances .arrow {
+  border-top-color: var(--text-secondary);
+}
+
+.instances .arrow.up {
+  border-top-color: transparent;
+  border-bottom-color: var(--text-secondary);
+}
+
+.instances .popup {
+  background: var(--bg-light);
+  border: 0;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  padding: 1rem 1.25rem;
+}
+
+.instances .go-back {
+  margin-top: 1rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+}
+
+@media only screen and (max-width: 1550px) {
+  .web .right-right,
+  .web .right-left {
+    padding: 0;
+  }
+
+  .web .left,
+  .searchbox,
+  #images .infobox {
+    width: auto;
+  }
+
+  .web .right-wrapper {
+    width: var(--sidebar-width);
+  }
+}
+
+@media only screen and (max-width: 1000px) {
+  #overflow.web {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .web .left,
+  .web .right-wrapper {
+    width: 100%;
+    max-width: none;
+  }
+
+  .web .right-wrapper {
+    order: 0;
+    margin-bottom: 1.5rem;
+  }
+
+  .web.has-answer .left::before {
+    display: none;
+  }
+
+  body:not(.instances) table td {
+    display: table-cell;
+    width: auto;
+  }
+
+  .related td {
+    display: block;
+    width: 100%;
+  }
+
+  .web .info-table tr td:first-child,
+  .web .wiki-head tr td:first-child {
+    text-decoration: none;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .navigation {
+    position: static;
+    justify-content: flex-end;
+    padding: 1rem var(--gutter) 0;
+  }
+
+  body > form {
+    grid-template-columns: minmax(0, 1fr);
+    padding-top: 0.5rem;
+  }
+
+  body > form .searchbox {
+    grid-column: 1;
+    grid-row: 1;
+    max-width: none;
+  }
+
+  body > form .tabs {
+    grid-row: 2;
+  }
+
+  body > form .filters {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    padding-bottom: 0.5rem;
+    scrollbar-width: thin;
+  }
+
+  .web .answer {
+    max-height: 16rem;
+  }
+
+  .thumb-wrap {
+    width: 5rem;
+    height: 3.75rem;
+  }
+}
diff --git a/static/themes/Degoog light.css b/static/themes/Degoog light.css
new file mode 100644
index 0000000..1861e67
--- /dev/null
+++ b/static/themes/Degoog light.css	
@@ -0,0 +1,1501 @@
+@charset "UTF-8";
+
+:root {
+  --primary: #5673ac;
+  --primary-hover: #3b547c;
+  --primary-rgb: 66, 133, 244;
+  --danger: #ea4335;
+  --warning: #c17d00;
+  --success: #34a853;
+
+  --bg: #f1f1f1;
+  --bg-light: #fafafa;
+  --bg-hover: #fafafa;
+  --border: #c8d0da;
+  --border-light: #dedede;
+  --text-primary: #343536;
+  --text-secondary: #4b5563;
+  --text-link: #1a0dab;
+  --text-link-visited: #681da8;
+  --text-cite: #111827;
+  --text-snippet: #374151;
+  --search-bar-bg: #f7f8fb;
+  --search-bar-bg-hover: #f7f8fb;
+  --btn-bg: #f7f8fb;
+  --overlay-bg: rgba(0, 0, 0, 0.4);
+  --white: #fff;
+}
+
+:root {
+  --gutter: clamp(
+    1rem,
+    calc(1rem + max(0px, (100vw - 48rem) * 0.31)),
+    9.375rem
+  );
+  --main-width: 40.75rem;
+  --sidebar-width: 21.25rem;
+  --column-gap: 2.5rem;
+  --bar-height: 2.75rem;
+  --bar-radius: 1.5rem;
+  --radius-xs: 0.1875rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  --fast: 0.2s ease;
+  --icon-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>");
+  --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
+
+  --1d2021: var(--bg);
+  --282828: var(--bg-light);
+  --3c3836: var(--bg-hover);
+  --504945: var(--border-light);
+  --928374: var(--text-secondary);
+  --a89984: var(--text-snippet);
+  --bdae93: var(--text-primary);
+  --8ec07c: var(--success);
+  --ebdbb2: var(--text-primary);
+  --comment: var(--text-secondary);
+  --default: var(--text-primary);
+  --keyword: var(--warning);
+  --string: var(--text-link);
+  --green: var(--success);
+  --yellow: var(--warning);
+  --red: var(--danger);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 100%;
+  font-family: sans-serif;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  max-width: none;
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--text-primary);
+  font-family: var(--font);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  word-wrap: anywhere;
+}
+
+input,
+select,
+button,
+textarea {
+  font-family: var(--font);
+}
+
+a {
+  color: var(--text-link);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+::selection {
+  background: rgba(var(--primary-rgb), 0.3);
+}
+
+::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: var(--radius-sm);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--text-primary);
+  font-weight: 500;
+  line-height: 1.3;
+  margin: 0 0 0.75rem;
+}
+
+h1 {
+  font-size: 1.75rem;
+}
+
+h2 {
+  font-size: 1.25rem;
+}
+
+h3 {
+  font-size: 1.125rem;
+}
+
+h4,
+h5,
+h6 {
+  font-size: 1rem;
+}
+
+b,
+strong {
+  font-weight: 600;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--border-light);
+  margin: 1.5rem 0;
+}
+
+ul,
+ol {
+  padding-left: 1.25rem;
+  margin: 0.5rem 0;
+}
+
+.quote {
+  font-style: normal;
+  color: var(--text-secondary);
+  background: var(--bg-light);
+  border: 0;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+}
+
+.navigation {
+  position: absolute;
+  top: 1.15rem;
+  right: var(--gutter);
+  left: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  z-index: 2;
+}
+
+.navigation a {
+  color: var(--text-secondary);
+  text-decoration: none;
+}
+
+.navigation a:hover {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.navigation a:not(:last-child)::after {
+  content: none;
+}
+
+.logo a {
+  display: inline-block;
+  text-decoration: none;
+}
+
+.home .logo {
+  width: auto;
+  max-width: none;
+  height: auto;
+  margin: 0 0 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.home .logo img {
+  display: block;
+  width: auto;
+  max-width: min(100%, 22rem);
+  height: auto;
+}
+
+body.home {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  margin: 0;
+  padding: 2rem 1rem 4rem;
+  text-align: center;
+}
+
+.home #center {
+  display: block;
+  width: min(36.5rem, 100%);
+  vertical-align: baseline;
+}
+
+.home form {
+  display: block;
+  margin-bottom: 1.75rem;
+}
+
+.home .searchbox {
+  width: 100%;
+  margin: 0 auto;
+  text-align: left;
+}
+
+.home #center > a {
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+}
+
+.home #center > a:hover {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.home .subtext {
+  margin-top: 1.25rem;
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+  line-height: 1.6;
+}
+
+.home .subtext a {
+  color: var(--text-secondary);
+}
+
+.searchbox {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  max-width: 43.25rem;
+  height: var(--bar-height);
+  margin: 0;
+  padding: 0 0.75rem;
+  background: var(--search-bar-bg);
+  border: 0;
+  border-radius: var(--bar-radius);
+  box-shadow: var(--shadow);
+  transition:
+    background var(--fast),
+    box-shadow var(--fast);
+}
+
+.searchbox::before {
+  content: "";
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  margin-right: 0.75rem;
+  background-color: var(--text-secondary);
+  -webkit-mask: var(--icon-search) center/contain no-repeat;
+  mask: var(--icon-search) center/contain no-repeat;
+}
+
+.searchbox:hover,
+.searchbox:focus-within {
+  background: var(--search-bar-bg-hover);
+  border: 0;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
+}
+
+.searchbox .wrapper {
+  order: 1;
+  flex: 1;
+  min-width: 0;
+  overflow: visible;
+}
+
+.searchbox input {
+  all: unset;
+  box-sizing: border-box;
+  height: var(--bar-height);
+  line-height: var(--bar-height);
+  color: var(--text-primary);
+  font-family: var(--font);
+}
+
+.searchbox input[type="text"] {
+  width: 100%;
+  padding-left: 0;
+  font-size: 1rem;
+}
+
+.searchbox input[type="text"]::placeholder {
+  color: var(--text-secondary);
+}
+
+.searchbox input[type="submit"] {
+  order: 2;
+  float: none;
+  flex-shrink: 0;
+  height: 2rem;
+  line-height: 2rem;
+  margin-left: 0.5rem;
+  padding: 0 0.75rem;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background var(--fast),
+    color var(--fast);
+}
+
+.searchbox input[type="submit"]:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.searchbox:has(.autocomplete[style*="block"]) {
+  border-radius: var(--bar-radius) var(--bar-radius) 0 0;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
+}
+
+.autocomplete {
+  top: 100%;
+  left: 0;
+  right: 0;
+  padding: 0.25rem 0 0.5rem;
+  background: var(--search-bar-bg-hover);
+  border: 0;
+  border-radius: 0 0 var(--bar-radius) var(--bar-radius);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.16);
+  overflow: hidden;
+  z-index: 100;
+}
+
+.autocomplete .entry {
+  padding: 0.45rem 1rem 0.45rem 2.875rem;
+  color: var(--text-primary);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.autocomplete .entry:hover,
+.autocomplete .entry:focus {
+  background: var(--bg-hover);
+}
+
+body > form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  column-gap: 1.25rem;
+  padding: 1rem var(--gutter) 0;
+  margin: 0;
+}
+
+body > form .searchbox {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+body > form .tabs {
+  grid-column: 1 / -1;
+  grid-row: 2;
+}
+
+body > form .filters {
+  grid-column: 1 / -1;
+  grid-row: 3;
+}
+
+.tabs {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-top: 1rem;
+  padding: 0 0 0 0.25rem;
+  border-bottom: 1px solid var(--border-light);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.tabs .tab {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  white-space: nowrap;
+  border-bottom: 3px solid transparent;
+  transition:
+    color var(--fast),
+    border-color var(--fast);
+}
+
+.tabs .tab:hover {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.tabs .tab.selected {
+  color: var(--text-primary);
+  border-bottom: 3px solid var(--text-primary);
+}
+
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.75rem 0 0;
+  overflow: visible;
+  white-space: normal;
+}
+
+.filters .filter {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.375rem 0.75rem;
+  background: var(--bg-light);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  vertical-align: middle;
+}
+
+.filters .filter .title {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  white-space: nowrap;
+}
+
+.filters .filter input,
+.filters .filter select {
+  all: unset;
+  display: block;
+  width: auto;
+  max-width: 11rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text-primary);
+  font-family: var(--font);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  cursor: pointer;
+}
+
+.filters .filter select {
+  padding-right: 1.125rem;
+  background-color: transparent;
+  background-image: var(--icon-chevron);
+  background-repeat: no-repeat;
+  background-position: right center;
+  background-size: 0.875rem;
+}
+
+.timetaken {
+  margin: 0;
+  padding: 1.25rem var(--gutter) 0.75rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 400;
+}
+
+#overflow {
+  overflow: visible;
+}
+
+#overflow.web {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--column-gap);
+  padding: 0 var(--gutter) 3rem;
+}
+
+body > #overflow:first-child {
+  padding-top: 2rem;
+}
+
+.web .left {
+  float: none;
+  order: 1;
+  flex: 1;
+  min-width: 0;
+  width: auto;
+  max-width: var(--main-width);
+}
+
+.web .right-wrapper {
+  float: none;
+  order: 2;
+  flex-shrink: 0;
+  width: var(--sidebar-width);
+  padding-left: 0;
+  overflow: visible;
+}
+
+.web .right-wrapper:not(:has(> div:not(:empty))) {
+  display: none;
+}
+
+.web .right-right,
+.web .right-left {
+  float: none;
+  width: 100%;
+  padding: 0;
+  overflow: visible;
+}
+
+.web .text-result {
+  margin: 0 0 2rem;
+  padding: 0;
+}
+
+.web .url {
+  display: flow-root;
+  position: relative;
+  line-height: 1.625rem;
+}
+
+.favicon {
+  all: unset;
+  float: left;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.625rem;
+  height: 1.625rem;
+  margin-right: 0.625rem;
+  border-radius: 50%;
+  background: var(--bg-hover);
+  cursor: pointer;
+}
+
+.web .favicon img {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  object-fit: contain;
+  font-size: 0.625rem;
+  line-height: 1;
+  text-align: center;
+}
+
+.web .url .part {
+  color: var(--text-cite);
+  font-size: 0.875rem;
+}
+
+.web .url .part:hover {
+  text-decoration: none;
+}
+
+.web .separator::before {
+  content: "›";
+  padding: 0 0.375rem;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.favicon-dropdown {
+  top: 2rem;
+  left: 0;
+  padding: 0.25rem 0;
+  background: var(--bg-light);
+  border: 0;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  z-index: 20;
+}
+
+.favicon-dropdown::before {
+  content: none;
+}
+
+.favicon-dropdown a {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.875rem;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.favicon-dropdown a:hover {
+  background: var(--bg-hover);
+  text-decoration: none;
+}
+
+.favicon-dropdown img {
+  float: none;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.web .hover {
+  display: flow-root;
+  clear: none;
+  padding-top: 0;
+  color: var(--text-snippet);
+}
+
+.web .text-result .title {
+  margin: 0.125rem 0 0;
+  color: var(--text-link);
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.3;
+}
+
+.web .text-result a:visited .title {
+  color: var(--text-link-visited) !important;
+}
+
+.web .text-result .hover:hover .title {
+  text-decoration: underline;
+}
+
+.web .description {
+  margin-top: 0.25rem;
+  color: var(--text-snippet);
+  font-size: 0.875rem;
+  line-height: 1.58;
+  white-space: pre-line;
+}
+
+.web .type {
+  float: left;
+  margin: 0.3rem 0.5rem 0 0;
+  padding: 0 0.375rem;
+  background: var(--bg-hover);
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.web .text-result .greentext {
+  margin-top: 0.25rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+}
+
+.web .text-result .author {
+  font-style: normal;
+  color: var(--text-secondary);
+}
+
+.thumb-wrap {
+  float: right;
+  width: 7.5rem;
+  height: 5.625rem;
+  margin: 0.25rem 0 0.5rem 0.75rem;
+  background: var(--bg-light);
+  border: 0;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.thumb-wrap.portrait {
+  width: 4.25rem;
+}
+
+.thumb-wrap.square {
+  width: 5.625rem;
+}
+
+.thumb-wrap .thumb {
+  object-fit: cover;
+}
+
+.duration {
+  right: 0.375rem;
+  bottom: 0.375rem;
+  padding: 1px 0.25rem;
+  background: rgba(0, 0, 0, 0.75);
+  border: 0;
+  border-radius: var(--radius-xs);
+  color: #fff;
+  font-family: var(--font);
+  font-size: 0.6875rem;
+  line-height: 1.3;
+}
+
+.web .sublinks {
+  padding: 0.75rem 0 0;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+}
+
+.web .sublinks table td {
+  padding-bottom: 0.75rem;
+}
+
+.web .sublinks .title {
+  color: var(--text-link);
+  font-size: 0.875rem;
+}
+
+.web .sublinks .description {
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.infobox,
+.web .answer-wrapper,
+.web .info-table,
+.web .wiki-head table,
+.about table,
+.related,
+.web .settings,
+.code,
+.nextpage,
+.web .spoiler-button {
+  background: var(--bg-light);
+  border: 0;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+}
+
+.infobox {
+  margin-bottom: 1rem;
+  padding: 1rem;
+  color: var(--text-primary);
+  overflow: hidden;
+}
+
+.infobox h1 {
+  font-size: 1.25rem;
+}
+
+.infobox h2 {
+  font-size: 1.125rem;
+}
+
+.infobox a {
+  color: var(--text-link);
+}
+
+.infobox ul {
+  padding-left: 1.25rem;
+  margin-bottom: 0;
+}
+
+.web .answer-wrapper {
+  margin-bottom: 1rem;
+  padding: 1rem;
+  overflow: hidden;
+}
+
+.web .answer {
+  padding-bottom: 0;
+  max-height: 34rem;
+}
+
+.web .answer::after {
+  height: 2.5rem;
+  background: linear-gradient(transparent, var(--bg-light));
+}
+
+.web .answer-title {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.web .answer-title h1 {
+  font-size: 1.375rem;
+  margin-bottom: 0.5rem;
+}
+
+.web .spoiler-button {
+  margin-top: 0.75rem;
+  padding: 0 0.75rem;
+  line-height: 2.25rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  box-shadow: none;
+  background: var(--bg-hover);
+}
+
+.web .spoiler-button:hover {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.web .wiki-head .photo {
+  margin: 0 0 0.75rem 0.75rem;
+}
+
+.web .wiki-head .photo img {
+  max-width: 9rem;
+  max-height: 9rem;
+  border-radius: var(--radius-lg);
+  filter: none;
+}
+
+.web .wiki-head .description {
+  padding-top: 0.5rem;
+  color: var(--text-snippet);
+  line-height: 1.58;
+}
+
+.web .wiki-head h2 {
+  font-size: 1.125rem;
+  margin: 1.25rem 0 0.5rem;
+}
+
+.web .wiki-head h2:first-child {
+  margin-top: 0.5rem;
+}
+
+.web .wiki-head a {
+  color: var(--text-link);
+}
+
+.web .wiki-head .socials {
+  margin-top: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  overflow: visible;
+}
+
+.web .wiki-head .socials a {
+  float: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4.25rem;
+  height: auto;
+  padding: 0.625rem 0.25rem;
+  border-radius: var(--radius-lg);
+  color: var(--text-secondary);
+  transition: background var(--fast);
+}
+
+.web .wiki-head .socials a:hover {
+  background: var(--bg-hover);
+}
+
+.web .wiki-head .socials a:hover .title {
+  text-decoration: none;
+  color: var(--text-primary);
+}
+
+.web .wiki-head .socials img {
+  width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+}
+
+.web .wiki-head .socials .title {
+  margin-top: 0.5rem;
+  font-size: 0.6875rem;
+  line-height: 1.3;
+}
+
+.web .fullimg {
+  margin: 0.5rem 0 1rem;
+  border: 0;
+  border-radius: var(--radius-lg);
+  max-height: 11rem;
+}
+
+table {
+  width: 100%;
+  text-align: left;
+  border-collapse: collapse;
+}
+
+table a {
+  color: var(--text-link);
+}
+
+.web .info-table,
+.web .wiki-head table,
+.about table {
+  margin: 0.75rem 0 0;
+  overflow: hidden;
+  color: var(--text-snippet);
+  font-size: 0.8125rem;
+}
+
+.web .info-table td,
+.web .wiki-head td,
+.about table td {
+  padding: 0.5rem 0.875rem;
+  vertical-align: top;
+}
+
+.web .info-table tr td:first-child,
+.web .wiki-head tr td:first-child,
+.about table tr td:first-child {
+  width: 34%;
+  min-width: 0;
+  padding-right: 0.875rem;
+  color: var(--text-secondary);
+  white-space: normal;
+}
+
+.web .info-table tr:nth-child(even),
+.web .wiki-head tr:nth-child(odd),
+.about table tr:nth-child(odd) {
+  background: var(--bg-hover);
+}
+
+.related {
+  margin: 0 0 2rem;
+  padding: 0.25rem 0;
+  overflow: hidden;
+}
+
+.related td {
+  padding: 0;
+  vertical-align: middle;
+}
+
+.related tr td:first-child {
+  padding-right: 0;
+}
+
+.related a {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.6rem 0.875rem;
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.related a::before {
+  content: "";
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  background-color: var(--text-secondary);
+  -webkit-mask: var(--icon-search) center/contain no-repeat;
+  mask: var(--icon-search) center/contain no-repeat;
+}
+
+.related a:hover {
+  background: var(--bg-hover);
+  text-decoration: none;
+}
+
+.nextpage {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: auto;
+  margin: 0 0 2rem;
+  padding: 0 1.125rem;
+  min-height: 2.25rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-align: left;
+  transition:
+    background var(--fast),
+    color var(--fast);
+}
+
+.nextpage:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.code {
+  margin: 0.5rem 0 0.875rem;
+  padding: 0.75rem 0.875rem;
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  font-family: var(--mono);
+  font-size: 0.8125rem;
+  box-shadow: none;
+  overflow-x: auto;
+}
+
+.code-inline {
+  display: inline;
+  padding: 0.05rem 0.375rem;
+  background: var(--bg-hover);
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-family: var(--mono);
+  font-size: 0.8125rem;
+}
+
+.web .images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin: 0.5rem 0 0;
+  overflow: visible;
+  font-size: 0;
+}
+
+.web .images .image {
+  width: 5.5rem;
+  height: 5.5rem;
+  padding: 0;
+  line-height: 0;
+  border-radius: var(--radius-lg);
+  background: var(--bg-hover);
+  overflow: hidden;
+  transition: opacity var(--fast);
+}
+
+.web .images .image:hover {
+  opacity: 0.85;
+}
+
+.web .images .image img {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  object-fit: cover;
+  vertical-align: top;
+}
+
+.web .images .duration {
+  border: 0;
+  right: 0.375rem;
+  bottom: 0.375rem;
+}
+
+#images {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  gap: 1rem 0.75rem;
+  margin: 0;
+  padding: 0.5rem var(--gutter) 1.5rem;
+  overflow: visible;
+}
+
+#images .infobox {
+  grid-column: 1 / -1;
+  width: auto;
+  max-width: var(--main-width);
+  margin-bottom: 0.5rem;
+}
+
+#images .image-wrapper {
+  float: none;
+  width: auto;
+  line-height: 1.4;
+}
+
+#images .image {
+  width: auto;
+  max-width: none;
+  margin: 0;
+  padding: 0;
+  font-size: 0.8125rem;
+}
+
+#images .thumb {
+  height: 11.25rem;
+  margin-bottom: 0.5rem;
+  border-radius: var(--radius-lg);
+  background: var(--bg-hover);
+  overflow: hidden;
+  transition: opacity var(--fast);
+}
+
+#images .image:hover .thumb {
+  opacity: 0.85;
+}
+
+#images img {
+  object-fit: cover;
+}
+
+#images .duration {
+  border: 0;
+}
+
+#images .image .title,
+#images .image .i-title-wrapper {
+  margin-bottom: 0.125rem;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  text-overflow: ellipsis;
+}
+
+#images .image .description {
+  height: auto;
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.nextpage.img {
+  width: auto;
+  margin: 0 var(--gutter) 3rem;
+}
+
+#popup-bg {
+  background: #000;
+  opacity: 0.92;
+}
+
+#popup-image {
+  background: transparent;
+  border: 0;
+}
+
+#popup-status {
+  height: 2.75rem;
+  background: var(--bg-light);
+  border: 0;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
+}
+
+#popup-num,
+#popup-title {
+  padding: 0 0.875rem;
+  line-height: 2.75rem;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+}
+
+#popup-num {
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+#popup-status select {
+  all: unset;
+  display: block;
+  width: 15rem;
+  height: 2rem;
+  margin-right: 0.75rem;
+  padding: 0 1.75rem 0 0.75rem;
+  background-color: var(--bg-hover);
+  background-image: var(--icon-chevron);
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  background-size: 0.875rem;
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-family: var(--font);
+  font-size: 0.8125rem;
+  line-height: 2rem;
+  cursor: pointer;
+}
+
+.captcha-wrapper {
+  border: 0;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow);
+}
+
+.captcha-wrapper img {
+  background: var(--bg-light);
+}
+
+.captcha-wrapper input:checked + label::after {
+  border-right-color: var(--white);
+  border-bottom-color: var(--white);
+}
+
+.web .settings {
+  margin-top: 1rem;
+  padding: 1rem 1rem 0.25rem;
+}
+
+.web .settings h2 {
+  font-size: 1.125rem;
+  margin-bottom: 1rem;
+}
+
+.web .setting {
+  margin-bottom: 1.25rem;
+}
+
+.web .setting .title {
+  margin-bottom: 0.375rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.web .setting .title i {
+  font-style: normal;
+  color: var(--text-secondary);
+}
+
+.web .settings select {
+  all: unset;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 22rem;
+  height: 2.25rem;
+  padding: 0 2rem 0 0.75rem;
+  background-color: var(--bg);
+  background-image: var(--icon-chevron);
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 0.875rem;
+  border: 0;
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-family: var(--font);
+  font-size: 0.875rem;
+  line-height: 2.25rem;
+  cursor: pointer;
+}
+
+.web .settings-submit {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin: 1.25rem 0 0;
+}
+
+.web .settings-submit input {
+  all: unset;
+  order: 1;
+  height: 2.25rem;
+  padding: 0 1.25rem;
+  background: var(--primary);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow);
+  color: var(--white);
+  font-family: var(--font);
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 2.25rem;
+  cursor: pointer;
+  transition: background var(--fast);
+}
+
+.web .settings-submit input:hover {
+  background: var(--primary-hover);
+}
+
+.web .settings-submit a {
+  order: 2;
+  margin-right: 0;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+}
+
+body.about {
+  margin: 0;
+  padding: 2rem var(--gutter) 4rem;
+  max-width: calc(var(--main-width) + var(--gutter) * 2);
+}
+
+.about a {
+  color: var(--text-link);
+}
+
+.about h1,
+.about h2 {
+  margin-top: 1.75rem;
+}
+
+.about table {
+  margin-bottom: 1rem;
+}
+
+body.instances {
+  margin: 0;
+  padding: 2rem var(--gutter) 4rem;
+}
+
+.instances a {
+  color: var(--text-link);
+}
+
+.instances table {
+  margin-top: 1rem;
+  background: var(--bg-light);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.instances thead {
+  outline: 0;
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+}
+
+.instances tbody {
+  outline: 0;
+  top: 0;
+}
+
+.instances th,
+.instances td {
+  padding: 0.5rem 0.875rem;
+}
+
+.instances th:hover {
+  background: var(--border-light);
+}
+
+.instances tbody tr:nth-child(even) {
+  background: var(--bg-hover);
+}
+
+.instances tbody tr:hover {
+  background: var(--border-light);
+}
+
+.instances .arrow {
+  border-top-color: var(--text-secondary);
+}
+
+.instances .arrow.up {
+  border-top-color: transparent;
+  border-bottom-color: var(--text-secondary);
+}
+
+.instances .popup {
+  background: var(--bg-light);
+  border: 0;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  padding: 1rem 1.25rem;
+}
+
+.instances .go-back {
+  margin-top: 1rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+}
+
+@media only screen and (max-width: 1550px) {
+  .web .right-right,
+  .web .right-left {
+    padding: 0;
+  }
+
+  .web .left,
+  .searchbox,
+  #images .infobox {
+    width: auto;
+  }
+
+  .web .right-wrapper {
+    width: var(--sidebar-width);
+  }
+}
+
+@media only screen and (max-width: 1000px) {
+  #overflow.web {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .web .left,
+  .web .right-wrapper {
+    width: 100%;
+    max-width: none;
+  }
+
+  .web .right-wrapper {
+    order: 0;
+    margin-bottom: 1.5rem;
+  }
+
+  .web.has-answer .left::before {
+    display: none;
+  }
+
+  body:not(.instances) table td {
+    display: table-cell;
+    width: auto;
+  }
+
+  .related td {
+    display: block;
+    width: 100%;
+  }
+
+  .web .info-table tr td:first-child,
+  .web .wiki-head tr td:first-child {
+    text-decoration: none;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .navigation {
+    position: static;
+    justify-content: flex-end;
+    padding: 1rem var(--gutter) 0;
+  }
+
+  body > form {
+    grid-template-columns: minmax(0, 1fr);
+    padding-top: 0.5rem;
+  }
+
+  body > form .searchbox {
+    grid-column: 1;
+    grid-row: 1;
+    max-width: none;
+  }
+
+  body > form .tabs {
+    grid-row: 2;
+  }
+
+  body > form .filters {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    padding-bottom: 0.5rem;
+    scrollbar-width: thin;
+  }
+
+  .web .answer {
+    max-height: 16rem;
+  }
+
+  .thumb-wrap {
+    width: 5rem;
+    height: 3.75rem;
+  }
+}