/* [next]/internal/font/google/geist_a71539c9.module.css [app-client] (css) */
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/fef07dbb0973bf53-s.3p2_lha1f2xer.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/8a480f0b521d4e75-s.1qq4vpdcun5oj.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/53b9e256198e5412-s.390ncx5urfkfu.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/7178b3e590c64307-s.21jp631_3pja2.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/caa3a2e1cccd8315-s.p.0wgildi0cnwt9.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist Fallback;
  src: local(Arial);
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0.0%;
  size-adjust: 104.76%;
}

.geist_a71539c9-module__T19VSG__className {
  font-family: Geist, Geist Fallback;
  font-style: normal;
}

.geist_a71539c9-module__T19VSG__variable {
  --font-geist-sans: "Geist", "Geist Fallback";
}

/* [next]/internal/font/google/geist_mono_8d43a2aa.module.css [app-client] (css) */
@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/5ce348bf30bf5439-s.31988l_ccedte.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/4fa387ec64143e14-s.2tuy5pz7dlieh.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/6306c77e7c8268e4-s.2dbetqa9o8jxf.woff2") format("woff2");
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/7d817b4c03b0c5f1-s.1uyisp29ctx0d.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/bbc41e54d2fcbd21-s.1rgnod-3esatf.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/797e433ab948586e-s.p.0r6juujl39pe6.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist Mono Fallback;
  src: local(Arial);
  ascent-override: 74.67%;
  descent-override: 21.92%;
  line-gap-override: 0.0%;
  size-adjust: 134.59%;
}

.geist_mono_8d43a2aa-module__8Li5zG__className {
  font-family: Geist Mono, Geist Mono Fallback;
  font-style: normal;
}

.geist_mono_8d43a2aa-module__8Li5zG__variable {
  --font-geist-mono: "Geist Mono", "Geist Mono Fallback";
}

/* [project]/apps/lab-rubik/src/app/globals.css [app-client] (css) */
:root {
  --ink: #eef1f4;
  --muted: #8d98a7;
  --line: #2b3441;
  --yellow: #ffcc3c;
}

* {
  box-sizing: border-box;
}

html, body {
  max-width: 100%;
  min-height: 100%;
  color: var(--ink);
  background: #0c1016;
  margin: 0;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
}

body {
  background-image: radial-gradient(circle at 50% -20%, #2b3544, #0000 43%);
}

button, input {
  font: inherit;
}

main {
  box-sizing: border-box;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 13px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100dvh;
  padding: 18px;
  display: grid;
  overflow: hidden;
}

header, .brand, .status, .header-end, .transport {
  align-items: center;
  display: flex;
}

header {
  justify-content: space-between;
}

.brand {
  color: inherit;
  gap: 12px;
  text-decoration: none;
}

.brand-logo {
  border-radius: 4px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: block;
}

.brand > b {
  background: var(--yellow);
  color: #111;
  border-radius: 8px;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
  transform: rotate(-4deg);
}

h1 {
  margin: 0;
  font-size: 19px;
}

p, small {
  color: var(--muted);
  margin: 3px 0;
  font-size: 12px;
}

.status {
  color: var(--muted);
  gap: 10px;
  font-size: 13px;
}

.status > i {
  background: #43d17d;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 12px #43d17d;
}

.status > span {
  min-width: 16ch;
}

.status strong {
  border-left: 1px solid var(--line);
  color: var(--ink);
  padding-left: 12px;
}

.header-end {
  gap: 10px;
}

.locale-toggle {
  border: 1px solid var(--line);
  border-radius: 6px;
  flex-shrink: 0;
  display: inline-flex;
  overflow: hidden;
}

.locale-toggle button {
  min-width: 34px;
  height: 26px;
  color: var(--muted);
  letter-spacing: .04em;
  cursor: pointer;
  background: #1d2530;
  border: 0;
  padding: 0 8px;
  font: 600 11px / 1 JetBrains Mono, ui-monospace, monospace;
}

.locale-toggle button + button {
  border-left: 1px solid var(--line);
}

.locale-toggle button.active {
  background: var(--yellow);
  color: #111;
}

.locale-toggle button:hover:not(.active) {
  color: var(--ink);
}

.work {
  grid-template-rows: minmax(0, 1fr) minmax(120px, .28fr);
  grid-template-columns: 1.08fr .92fr;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  display: grid;
}

.panel {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #171d26, #11161d);
  border-radius: 14px;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.panel h2 {
  z-index: 2;
  justify-content: space-between;
  font-size: 14px;
  display: flex;
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
}

.cubeP {
  grid-row: 1 / 3;
}

.work > .panel {
  min-width: 0;
}

.circleP {
  min-height: 0;
}

.circle-stage {
  min-width: 0;
  min-height: 0;
  position: absolute;
  inset: 44px 0 0;
  overflow: hidden;
}

.circle-stage svg {
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
}

.ring {
  fill: none;
  stroke: #3d4654;
  stroke-width: 1.2px;
  transition: stroke .16s, opacity .16s;
}

.ring.axis-on {
  stroke: #697588;
  stroke-width: 1.65px;
}

.ring.active-ring {
  stroke: var(--yellow);
  stroke-width: 2.6px;
}

.dot {
  stroke: #0b0e12;
  stroke-width: 2px;
}

.dot.go {
  stroke: #fff;
  stroke-width: 1.5px;
}

.netP {
  align-items: center;
  min-width: 0;
  padding-top: 28px;
  display: flex;
}

.net-stage {
  flex: 1;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.net-stage svg {
  width: 100%;
  height: 100%;
  display: block;
}

.netP text {
  fill: #718092;
  text-anchor: middle;
  font-size: 9px;
}

.netP dl {
  border-left: 1px solid var(--line);
  grid-template-columns: 1fr auto;
  gap: 7px 15px;
  padding: 20px;
  font-size: 12px;
  display: grid;
}

.netP dt {
  color: var(--muted);
}

.netP dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 4.5ch;
  margin: 0;
  font-weight: bold;
}

.scene {
  perspective: 900px;
  place-items: center;
  height: 100%;
  display: grid;
}

.cube {
  width: 180px;
  height: 180px;
  transform-style: preserve-3d;
  position: relative;
}

.face {
  background: #090c10;
  border: 2px solid #080a0d;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 180px;
  height: 180px;
  padding: 8px;
  display: grid;
  position: absolute;
}

.face i {
  border-radius: 7px;
  box-shadow: inset 0 -3px 8px #0003;
}

.front {
  transform: translateZ(90px);
}

.back {
  transform: rotateY(180deg)translateZ(90px);
}

.right {
  transform: rotateY(90deg)translateZ(90px);
}

.left {
  transform: rotateY(-90deg)translateZ(90px);
}

.top {
  transform: rotateX(90deg)translateZ(90px);
}

.bottom {
  transform: rotateX(-90deg)translateZ(90px);
}

.console {
  border: 1px solid var(--line);
  box-sizing: border-box;
  background: #12171e;
  border-radius: 14px;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  padding: 11px;
  display: flex;
  overflow: hidden;
}

.moves {
  grid-template-columns: repeat(3, max-content);
  align-content: center;
  gap: 6px;
  display: grid;
}

.moves div {
  display: flex;
}

.moves button, .transport button {
  min-width: 37px;
  height: 38px;
  color: var(--ink);
  cursor: pointer;
  background: #1d2530;
  border: 1px solid #364150;
}

.moves button:first-child {
  color: #111;
  background: #edf0f2;
  font-weight: bold;
}

.moves button + button {
  border-left: 0;
}

.moves button:first-child {
  border-radius: 7px 0 0 7px;
}

.moves button:last-child {
  border-radius: 0 7px 7px 0;
}

.transport {
  gap: 7px;
}

.transport button {
  border-radius: 7px;
  padding: 0 11px;
}

.transport label {
  color: var(--muted);
  grid-template-columns: auto 90px 42px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: grid;
}

.transport b {
  color: var(--ink);
}

button:hover {
  border-color: #8995a5;
}

button:focus-visible, input:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  html {
    scrollbar-gutter: stable;
  }

  main {
    overscroll-behavior: contain;
    grid-template-rows: auto auto auto auto;
    height: auto;
    min-height: 100dvh;
    padding: 10px;
    overflow: visible;
  }

  header {
    grid-template-rows: auto auto;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
    display: grid;
  }

  .brand {
    grid-area: 1 / 1;
    min-width: 0;
  }

  .header-end {
    display: contents;
  }

  .locale-toggle {
    grid-area: 1 / 2;
    place-self: center end;
  }

  .status {
    grid-area: 2 / 1 / auto / -1;
    min-width: 0;
  }

  .status > span {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .work {
    grid-template-rows: 390px 410px 220px;
    grid-template-columns: 1fr;
  }

  .cubeP, .circleP, .netP {
    height: 100%;
  }

  .cubeP {
    grid-row: auto;
  }

  .console {
    flex-direction: column;
  }

  .moves {
    grid-template-columns: repeat(3, max-content);
    overflow: auto;
  }

  .transport {
    flex-wrap: wrap;
  }

  .status strong {
    display: none;
  }

  button {
    touch-action: manipulation;
  }
}

.timeline {
  border: 1px solid var(--line);
  box-sizing: border-box;
  background: #10151c;
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  height: 38px;
  min-height: 38px;
  padding: 7px 12px;
  font-size: 12px;
  display: flex;
  overflow: hidden;
}

.timeline > span {
  color: var(--muted);
  flex-shrink: 0;
}

.timeline > div {
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.timeline b, .timeline i {
  text-align: center;
  background: #222b37;
  border-radius: 5px;
  min-width: 28px;
  padding: 5px 7px;
  font-style: normal;
}

.timeline b {
  background: var(--yellow);
  color: #111;
}

.timeline em {
  color: #687486;
  font-style: normal;
}

.move-badge {
  background: #10151dcc;
  border: 1px solid #414c5b;
  border-radius: 50%;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 22px;
  font-weight: 800;
  display: grid;
  position: absolute;
  bottom: 20px;
  right: 22px;
  box-shadow: 0 12px 30px #0006;
}

.transport svg {
  width: 15px;
  height: 15px;
}

.transport button {
  align-items: center;
  gap: 6px;
  display: flex;
}

.transport .round {
  justify-content: center;
  width: 38px;
  padding: 0;
}

.transport .solve {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #171717;
  font-weight: 800;
}

.transport button:disabled, .moves button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.face.spinning {
  filter: brightness(1.16) drop-shadow(0 0 10px #ffcc3c88);
}

.front.spinning {
  transform: translateZ(91px) rotateZ(var(--spin));
}

.back.spinning {
  transform: rotateY(180deg) translateZ(91px) rotateZ(var(--spin));
}

.right.spinning {
  transform: rotateY(90deg) translateZ(91px) rotateZ(var(--spin));
}

.left.spinning {
  transform: rotateY(-90deg) translateZ(91px) rotateZ(var(--spin));
}

.top.spinning {
  transform: rotateX(90deg) translateZ(91px) rotateZ(var(--spin));
}

.bottom.spinning {
  transform: rotateX(-90deg) translateZ(91px) rotateZ(var(--spin));
}

.active-face circle {
  stroke: var(--yellow);
  stroke-width: 1.5px;
}

.status .busy {
  background: var(--yellow);
  box-shadow: 0 0 12px #ffcc3c;
}

.status .ok {
  background: #43d17d;
}

@media (max-width: 900px) {
  .timeline {
    order: 3;
  }

  .console {
    order: 4;
  }
}

.three-scene {
  min-width: 0;
  min-height: 0;
  position: absolute;
  inset: 44px 0 0;
}

.three-scene > div {
  width: 100% !important;
  height: 100% !important;
}

.cubeP canvas {
  touch-action: none;
}

.cubeP:after {
  content: "";
  filter: blur(22px);
  pointer-events: none;
  background: #0008;
  border-radius: 50%;
  height: 10%;
  position: absolute;
  bottom: 7%;
  left: 18%;
  right: 18%;
}

.cubeP .move-badge {
  z-index: 3;
}

.cubeP:after {
  display: none;
}

.cubeP .move-badge {
  color: #f5f3ee;
  background: #101214d9;
  border-color: #34373a;
  box-shadow: 0 10px 24px #49443d42;
}

.cubeP {
  background: #10151d;
}

.three-scene {
  background: radial-gradient(circle at 38% 22%, #252d37 0, #151a21 48%, #0d1117 100%);
}

.cubeP h2 {
  color: #eef1f4;
  text-shadow: 0 1px #0008;
}

.cubeP h2 small {
  color: #9aa5b2;
}

.cubeP, .three-scene {
  background: #10151d;
}

.ui-select {
  flex-shrink: 0;
  position: relative;
}

.transport .ui-select-trigger {
  min-width: 168px;
  height: 38px;
  color: var(--ink);
  letter-spacing: .01em;
  cursor: pointer;
  background: #1d2530;
  border: 1px solid #364150;
  border-radius: 7px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  font: 600 12px / 1 JetBrains Mono, ui-monospace, monospace;
  display: inline-flex;
}

.transport .ui-select-trigger:hover:not(:disabled) {
  border-color: #8995a5;
}

.transport .ui-select-trigger:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.ui-select-value {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ui-select-chevron {
  opacity: .7;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.ui-select[data-state="open"] .ui-select-chevron {
  transform: rotate(180deg);
}

.ui-select-content {
  background: #151b24;
  border: 1px solid #364150;
  border-radius: 8px;
  max-height: min(280px, 70vh);
  margin: 0;
  padding: 4px;
  list-style: none;
  overflow: auto;
  box-shadow: 0 12px 28px #0008;
}

.ui-select-content .ui-select-item {
  width: 100%;
  min-width: 0;
  height: 32px;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  font: 600 12px / 1 JetBrains Mono, ui-monospace, monospace;
  display: flex;
}

.ui-select-content .ui-select-item:hover, .ui-select-content .ui-select-item.selected {
  color: var(--ink);
  background: #222b37;
  border-color: #0000;
}

.ui-select-item-indicator {
  flex-shrink: 0;
  place-items: center;
  width: 14px;
  height: 14px;
  display: grid;
}

.ui-select-item-indicator svg {
  width: 12px;
  height: 12px;
  color: var(--yellow);
}

.ui-select-item-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.budget-pick {
  height: 38px;
  color: var(--muted);
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  font-size: 12px;
  grid-template-columns: auto 84px 38px !important;
  display: grid !important;
}

.budget-pick span {
  color: var(--muted);
}

.budget-pick input[type="range"] {
  width: 84px;
  accent-color: var(--yellow);
}

.budget-pick b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.solve-result {
  border: 1px solid var(--line);
  background: #0e131a;
  border-radius: 8px;
  margin-top: 10px;
  padding: 8px;
  font-size: 12px;
}

.solve-result-meta {
  color: var(--muted);
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  display: flex;
}

.solve-result-meta .optimal {
  color: #8dffa8;
}

.solve-result-moves {
  flex-wrap: wrap;
  gap: 4px;
  max-height: 72px;
  display: flex;
  overflow: auto;
}

.solve-result-moves i {
  background: #222b37;
  border-radius: 4px;
  padding: 2px 5px;
  font-style: normal;
}

.solve-result-moves i.phase1 {
  background: #2a3a55;
}

.solve-result-moves i.phase2 {
  background: #3a2a40;
}

.use-best {
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  background: #1a2230;
  border-radius: 6px;
  margin-top: 6px;
  padding: 4px 8px;
}

@media (max-width: 900px) {
  .ui-select {
    width: 100%;
  }

  .ui-select-trigger {
    width: 100%;
    min-width: 0;
  }

  .budget-pick {
    width: 100%;
    grid-template-columns: auto 1fr 38px !important;
  }

  .budget-pick input[type="range"] {
    width: 100%;
  }
}

.edit-link, .edit-nav, .edit-use {
  border: 1px solid var(--line);
  height: 28px;
  color: var(--ink);
  cursor: pointer;
  background: #1d2530;
  border-radius: 6px;
  align-items: center;
  padding: 0 10px;
  font: 600 12px / 1 Arial, sans-serif;
  text-decoration: none;
  display: inline-flex;
}

.edit-link:hover, .edit-nav:hover, .edit-use:hover {
  border-color: #8995a5;
}

.edit-use {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #171717;
}

.edit-main {
  grid-template-rows: auto minmax(0, 1fr);
}

.edit-brand h1 {
  margin: 0;
  font-size: 19px;
}

.edit-brand p {
  color: var(--muted);
  margin: 3px 0;
  font-size: 12px;
}

.paletteP {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 48px 16px 16px;
  display: flex;
}

.edit-valid {
  text-align: center;
  max-width: min(100%, 320px);
  margin: 0;
  font: 600 12px / 1.35 Arial, sans-serif;
}

.edit-valid.ok {
  color: #43d17d;
}

.edit-valid.idle {
  color: var(--muted);
}

.edit-valid.bad {
  color: #ff6b8a;
}

.net-sticker.invalid {
  stroke: #ff4d6a;
  stroke-width: 2.2px;
}

.color-palette {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: min(100%, 280px);
  display: grid;
}

.color-swatch {
  aspect-ratio: 1;
  cursor: pointer;
  border: 2px solid #2b3441;
  border-radius: 12px;
  position: relative;
  box-shadow: inset 0 -4px 10px #0004;
}

.color-swatch span {
  color: #0c1016;
  text-shadow: 0 1px #fff6;
  font: 800 13px / 1 JetBrains Mono, ui-monospace, monospace;
  position: absolute;
  bottom: 6px;
  left: 8px;
}

.color-swatch kbd {
  color: #f5f3ee;
  text-align: center;
  background: #0c101688;
  border-radius: 4px;
  min-width: 1.1em;
  padding: 2px 4px;
  font: 700 11px / 1 JetBrains Mono, ui-monospace, monospace;
  position: absolute;
  top: 6px;
  right: 7px;
}

.color-swatch em {
  color: #0c1016;
  opacity: .72;
  text-shadow: 0 1px #fff6;
  font: 700 10px / 1 JetBrains Mono, ui-monospace, monospace;
  position: absolute;
  bottom: 6px;
  right: 7px;
}

.color-swatch.active {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px #ffcc3c66, inset 0 -4px 10px #0004;
}

.color-swatch.exhausted, .color-swatch:disabled {
  opacity: .38;
  cursor: not-allowed;
  filter: grayscale(.35);
}

.paletteP h2 small {
  text-align: right;
  max-width: 70%;
  line-height: 1.25;
}

.net-sticker {
  stroke: #0b0e12;
  stroke-width: 1.2px;
}

.net-sticker.selected {
  stroke: #ff4db8;
  stroke-width: 2.2px;
}

@media (max-width: 900px) {
  .edit-main .work {
    grid-template-rows: 390px 200px 220px;
  }

  .header-end .edit-link {
    grid-area: 1 / 2;
    justify-self: end;
    margin-right: 72px;
  }
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__0_8au80._.css.map*/