/* ======================================================================================
   ANIMATIONS
   ====================================================================================== */

.icon-hidden {
  opacity: 0;
  transform: translateY(6px);
}

.icon-fade-in {
  animation: iconFadeIn 420ms ease-out forwards;
}

/* Desktop welcome prompt */

.desktop-welcome {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 2px solid var(--window-border3, #3d3d3d);
  background: #090909;
  color: #e8e8e8;
  box-shadow: 0 24px 90px rgba(0,0,0,.8);
  font-family: Oxanium;
  animation: welcomeFadeIn 440ms ease-out both;
}

.desktop-welcome::backdrop {
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(2px);
  animation: welcomeBackdropFadeIn 440ms ease-out both;
}

.desktop-welcome.is-closing {
  pointer-events: none;
  animation: welcomeFadeOut 400ms ease-in forwards;
}

.desktop-welcome.is-closing::backdrop {
  animation: welcomeBackdropFadeOut 400ms ease-in forwards;
}

.desktop-welcome-box {
  display: grid;
  grid-template-rows: auto 1fr;
}

.desktop-welcome-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 8px 0 14px;
  border-bottom: 2px solid var(--window-border3, #3d3d3d);
  background: #050505;
  color: #f0f0f0;
  font: 700 11px/1 Oxanium;
  letter-spacing: .14em;
}

.desktop-welcome-close {
  appearance: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: #f0f0f0;
  font: 400 24px/1 Oxanium;
}

.desktop-welcome-close:hover,
.desktop-welcome-close:focus-visible {
  border-color: rgba(255,255,255,.3);
  background: #161616;
  outline: none;
}

.desktop-welcome-body {
  display: grid;
  gap: 14px;
  padding: 24px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #0b0b0b;
  background-size: 24px 24px;
}

.desktop-welcome-body h2 {
  margin: 0;
  color: #fff;
  font: 700 20px/1.2 Oxanium;
}

.desktop-welcome-body p {
  margin: 0;
  color: #c8c8c8;
  font: 400 13px/1.65 Oxanium;
}

.desktop-welcome-continue {
  appearance: none;
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: #151515;
  color: #f0f0f0;
  font: 700 10px/1 Oxanium;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.desktop-welcome-continue:hover,
.desktop-welcome-continue:focus-visible {
  border-color: rgba(255,255,255,.58);
  background: #202020;
  outline: none;
}

@keyframes iconFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes welcomeFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(.985);
  }
}

@keyframes welcomeFadeIn {
  from {
    opacity: 0;
    transform: scale(.965);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes welcomeBackdropFadeIn {
  from {
    background: rgba(0,0,0,0);
    backdrop-filter: blur(0);
  }
  to {
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(2px);
  }
}

@keyframes welcomeBackdropFadeOut {
  from {
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(2px);
  }
  to {
    background: rgba(0,0,0,0);
    backdrop-filter: blur(0);
  }
}

#desktop {
  animation: desktopFadeIn 300ms ease-out both;
}

@keyframes desktopFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.scale-in-center {
  animation: scale-in-center .77s cubic-bezier(.25,.46,.45,.94) both;
}

@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.slide-in-top {
  animation: slide-in-top .5s cubic-bezier(.165,.84,.44,1) both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ======================================================================================
   ROOT TOKENS & GLOBAL RESETS
   ====================================================================================== */

:root {
  --white: #ffffff;
  --red: #dc3545;
  --green: #00ff38;
  --pink: #ff00c1;
  --link: #1875ff;
  --window-dark: #0e1111;
  --window-darker: #020202;
  --window-border: #353839;
  --window-border2: #0e1111;
  --window-border3: #3d3d3d;
  --boot-bg: #000;
  --boot-fg: #cfd3d7;
  --boot-dim: #343a40;
  --ok: #00ff38;
  --warn: #ffdd57;
  --fail: #dc3545;
  --info: #1875ff;
  --panel-border: #22272e;
  --panel-head: #0d0f12;
  --side-w: 460px;
  --w-time: 12ch;
  --w-val: 18ch;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1440px;
  --breakpoint-xl: 1600px;
  --breakpoint-xxl: 1920px;
  --clear: #0000;
  --neon-cyan: #00ccff;
  --neon-cyan-soft: rgba(0,204,255,.45);
  --neon-green-soft: rgba(0,255,69,.45);
  --neon-blue-soft: rgba(0,170,255,.45);
  --panel-glow: rgba(0,204,255,.18);
  --panel-glow-strong: rgba(0,204,255,.35);
}

/* Base */

/* Utilities */

.hidden {
  display: none !important;
}

.csb, .wb-body {
  scrollbar-width: thin;
  scrollbar-color: var(--window-border) transparent;
}

.csb {
  scrollbar-width: thin;
  scrollbar-color: var(--window-border) transparent;
}

.csb::-webkit-scrollbar, .wb-body::-webkit-scrollbar {
  width: 12px;
}

.csb::-webkit-scrollbar-track, .wb-body::-webkit-scrollbar-track {
  background: transparent;
}

.csb::-webkit-scrollbar-thumb, .wb-body::-webkit-scrollbar-thumb {
  background: var(--window-border);
}

/* ======================================================================================
   DESKTOP SHELL
   ====================================================================================== */

.desktop {
  height: 100vh;
  width: 100vw;
  border: none;
  background: url("/assets/img/gallery/hard-drive.png") center / cover no-repeat #000;
}

.desktop-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 1% .5% 0;
}

.icon-dskt {
  color: #fff;
  height: 100%;
  width: 100%;
}

.icon-txt {
  font-size: 1.2em;
  color: #000;
  text-align: center;
  background: white;
  width: 100%;
  text-align: center;
}

.icon-button {
  margin: 0 1%;
  height: 100px;
  width: 100px;
}

.icon-button img, .icon-button svg {
  transition: filter .3s ease;
}

.icon-button span {
  transition: color .2s ease, text-shadow .3s ease;
}

.icon-button:hover img, .icon-button:hover svg {
  filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 7px rgba(255, 255, 255, 0.6));
}

.icon-button:hover span {
  color: black;
  text-decoration: underline;
}

/* Accent hovers */

/* Top system bar */

#sysnav {
  z-index: 9999;
  height: 2.9em;
  padding: 0 1%;
  background: rgba(14,14,14,.76);
}

.sys-brand {
  width: 95px;
  height: 100%;
  font-family: "Linear Beam";
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@media (max-width: 700px) {
  .sys-brand {
    width: 80px;
  }
}

@media (max-width: 350px) {
  .sys-brand {
    width: auto;
    justify-content: center;
    margin-bottom: 4px;
    transform: scale(0.9);
    transform-origin: center;
  }
}

@media (max-width: 250px) {
  .sys-brand {
    transform: scale(0.8);
  }
}

.nav-stats {
  width: 70%;
}

#time, #date {
  margin: 0 10px;
  color: #fff;
}

/* ======================================================================================
   CONTEXT MENUS (desktop + timezone menu)
   ====================================================================================== */

.ctx {
  position: fixed;
  z-index: 2147483600;
  background: linear-gradient(#111111, #0a0a0a);
  color: #cfd3d7;
  border: 1px solid #2f2f2f;
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  font-family: Oxanium;
  font-size: 12px;
  letter-spacing: .2px;
  min-width: 220px;
  user-select: none;
}

.ctx.hidden {
  display: none;
}

.ctx-list, .ctx-sub {
  list-style: none;
  margin: 0;
  padding: 6px;
}

.ctx-item {
  padding: 6px 10px;
  margin: 2px 0;
  border: 1px solid transparent;
  cursor: default;
  white-space: nowrap;
}

.ctx-item:hover {
  background: linear-gradient(#242424, #171717);
  border-color: #4a4a4a;
}

.ctx-sep {
  height: 1px;
  margin: 6px 4px;
  background: #2a2a2a;
}

/* Submenus */

.has-sub {
  position: relative;
}

.ctx-sub {
  position: absolute;
  top: -6px;
  left: 100%;
  margin-left: 6px;
  background: linear-gradient(#111111, #0a0a0a);
  border: 1px solid #2f2f2f;
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  display: none;
  min-width: 200px;
}

.has-sub:hover > .ctx-sub {
  display: block;
}

.ctx-sub.left {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 6px;
}

/* Timezone menu caps */

#tz-menu.ctx, #tz-menu .ctx-sub {
  max-height: calc(100vh - 16px);
  overflow: auto;
}

/* ======================================================================================
   sICON APPS — GENERIC SHELL
   ====================================================================================== */

.app {
  position: absolute;
  inset: auto;
  width: 75vw;
  height: 70vh;
  color: #fff;
  border: 5px solid var(--window-dark);
  background: var(--window-darker);
  border-radius: 0;
  overflow: hidden;
}

.app-content {
  height: 100%;
  padding: 0;
  color: #fff;
  background: var(--window-darker);
}

.app-label {
  margin-left: 1%;
  height: 100%;
  width: 100%;
  font-size: 18px;
}

.hidden-window {
  display: none;
}

.app-icon {
  height: 100%;
}

/* File header */

.fd-header {
  margin-top: .664em;
}

.fd-txt {
  margin: 0 0 0 1%;
  font-family: "Linear Beam";
}

.fd-sep {
  width: 100%;
  height: .2em;
  background: var(--window-dark);
}

.app-ctrl {
  margin: 0 1% 0 1%;
}

.header-url {
  width: 100vw;
  height: 2.1em;
  margin: 0 1em;
  padding-left: 1.2%;
  background: var(--window-dark);
  border-radius: 5px;
  font-size: 18px;
  box-shadow: inset 0 0 6px 4px var(--window-border);
}

/* ======================================================================================
    APPS — EXPLORER
   ====================================================================================== */

.window.hidden {
  display: none;
}

.window {
  height: 100%;
}

.filebox {
  height: 100%;
  padding-right: 4%;
}

.filerow {
  height: 25%;
  padding: 1% 2% 0;
  margin-bottom: 4%;
}

.fileimg {
  cursor: pointer;
  height: 5em;
}

.filetxt {
  height: 24px;
  width: 133px;
}

.folder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  margin-right: 5%;
}

.folder:hover {
  text-decoration: underline;
}

.folder-name {
  display: block;
  text-align: center;
}

/* ===========================
   Tabs — JS Driven Only
   =========================== */

.tabs {
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--window-dark);
  font-family: Oxanium;
}

/* Left column buttons */

.tab-links {
  display: flex;
  flex-direction: column;
}

.tab-button {
  width: 100%;
  padding: 10px 12px;
  color: #fff;
  background: var(--window-dark);
  border: none;
  border-bottom: 4px solid var(--window-border2);
  cursor: pointer;
  text-align: left;
  font-size: 1em;
  transition: background .15s ease, text-shadow .15s ease;
}

.tab-button:hover {
  background: var(--window-border2);
}

.tab-button.active {
  background: var(--window-darker);
  text-shadow: 0 0 8px #fff;
}

/* Right content area */

.tab-window {
  width: 80%;
  height: 100%;
  background: var(--window-darker);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Individual tab panels */

.tab-content {
  display: none;
  height: 100%;
  padding: 2% 4% 4%;
  overflow-y: auto;
  background: var(--window-darker);
}

.tab-content.active {
  display: block;
}

/* Nested tabs (if needed later) */

.nested-tab-content {
  display: none;
}

.nested-tab-content.active {
  display: block;
}

/* Prevent WinBox resize handles inside tabs */

.tab-content .ui-resizable-handle {
  display: none;
}

/* ===========================
   File Explorer (fx-*)
   =========================== */

:root {
  --fx-fg: var(--boot-fg, #cfd3d7);
  --fx-dim: #9aa0a6;
  --fx-bg: #0d0d0d;
  --fx-pane: #121212;
  --fx-pane2: #0f0f0f;
  --fx-border: #2f2f2f;
  --fx-accent: #aeb4ba;
  --fx-gap: 16px;
  --fx-rad: 6px;
}

/* Hidden while parked in the page */

.fx-wrap {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* When WinBox mounts it */

#wb-parked {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
}

.wb-mount {
  width: 100%;
  height: 100%;
}

.wb-pad {
  width: 100%;
  height: 100%;
  background: var(--window-darker);
  color: #fff;
  padding: 3%;
}

.wb-parked {
  position: absolute;
  left: -99999px;
  top: -99999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.znx-file, .znx-file-inner {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.winbox .fx-wrap, .wb-window .fx-wrap {
  position: static;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Navigable portfolio project browser */

.fx-app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  min-height: 100%;
  height: 100%;
  color: var(--fx-fg);
  background:
    radial-gradient(1200px 360px at 45% -10%, rgba(160,160,160,.08), transparent 62%),
    linear-gradient(180deg, #090909 0%, #0d0d0d 100%);
  font-family: Oxanium;
  overflow: hidden;
}

.fx-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 46px;
  padding: 18px 8px 6px;
  border-bottom: 1px solid var(--fx-border);
  background: #090909;
}

.fx-history-controls {
  display: flex;
  gap: 5px;
}

.fx-nav-button {
  appearance: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--fx-border);
  background: #101010;
  color: #e3e3e3;
  font: 700 11px/1 Oxanium;
}

.fx-nav-button:hover:not(:disabled),
.fx-nav-button:focus-visible {
  border-color: #666;
  background: #1a1a1a;
  outline: none;
}

.fx-nav-button:disabled {
  color: #555;
  background: #0b0b0b;
  cursor: default;
}

.fx-path {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--fx-border);
  background: linear-gradient(180deg, #111, #0c0c0c);
  color: #d5d5d5;
  font: 600 12px/1 Oxanium;
  letter-spacing: .025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fx-browser {
  position: relative;
  min-height: 0;
}

.fx-projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-content: start;
  gap: 14px;
  min-height: 100%;
  padding: 20px;
}

.fx-projects[hidden],
.fx-project-view[hidden] {
  display: none;
}

.fx-project-view {
  min-height: 100%;
}

.fx-projects:not([hidden]) {
  animation: fxLauncherEnter 300ms cubic-bezier(.2,.75,.25,1) both;
}

.fx-project-view:not([hidden]) .pf-page {
  animation: fxProjectPageEnter 420ms cubic-bezier(.2,.75,.25,1) both;
}

.fx-project-view:not([hidden]) .pf-card,
.fx-project-view:not([hidden]) .pf-section {
  opacity: 0;
  animation: fxProjectItemEnter 360ms cubic-bezier(.2,.75,.25,1) forwards;
}

.fx-project-view:not([hidden]) .pf-card:nth-child(1) {
  animation-delay: 90ms;
}

.fx-project-view:not([hidden]) .pf-card:nth-child(2) {
  animation-delay: 130ms;
}

.fx-project-view:not([hidden]) .pf-card:nth-child(3) {
  animation-delay: 170ms;
}

.fx-project-view:not([hidden]) .pf-card:nth-child(4) {
  animation-delay: 210ms;
}

.fx-project-view:not([hidden]) .pf-section {
  animation-delay: 250ms;
}

.fx-project-status {
  margin: 20px;
  padding: 18px;
  border: 1px solid var(--fx-border);
  background: #0b0b0b;
  color: var(--fx-dim);
  font: 500 12px/1.5 Oxanium;
}

.fx-project-error {
  color: #e0a4a4;
}

@keyframes fxLauncherEnter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fxProjectPageEnter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.992);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes fxProjectItemEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fx-file {
  appearance: none;
  display: grid;
  grid-template-rows: 142px minmax(92px, auto);
  min-width: 0;
  min-height: 234px;
  padding: 0;
  border: 1px solid var(--fx-border);
  background: linear-gradient(180deg, #0a0a0a, #060606);
  color: var(--fx-fg);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease;
}

.fx-file:hover,
.fx-file:focus-visible {
  outline: none;
  border-color: #5a5a5a;
  background: linear-gradient(180deg, #141414, #080808);
  box-shadow: inset 0 0 0 1px rgba(160,160,160,.2), 0 8px 22px rgba(0,0,0,.32);
  transform: translateY(-2px);
}

.fx-project-visual {
  display: grid;
  place-items: center;
  min-height: 0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #101010;
  background-size: 26px 26px;
}

.fx-thumb {
  display: block;
  width: min(52%, 112px);
  height: 104px;
  object-fit: contain;
  border: 0;
  opacity: .94;
  transition: transform .14s ease, opacity .14s ease;
}

.fx-file:hover .fx-thumb,
.fx-file:focus-visible .fx-thumb {
  opacity: 1;
  transform: scale(1.035);
}

.fx-project-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 13px 14px;
  border-top: 1px solid #2a2a2a;
  background: linear-gradient(180deg, rgba(22,22,22,.96), rgba(10,10,10,.98));
}

.fx-name {
  color: #f0f0f0;
  font: 700 13px/1.25 Oxanium;
  letter-spacing: .035em;
}

.fx-project-summary {
  margin-top: 7px;
  color: var(--fx-dim);
  font: 400 11px/1.45 Oxanium;
}

.fx-empty {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--fx-border);
  color: var(--fx-dim);
}

.fx-scroll {
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--fx-border) transparent;
}

.fx-scroll::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.fx-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.fx-scroll::-webkit-scrollbar-thumb {
  background: var(--fx-border);
}

@media (prefers-reduced-motion: reduce) {
  .fx-projects:not([hidden]),
  .fx-project-view:not([hidden]) .pf-page,
  .fx-project-view:not([hidden]) .pf-card,
  .fx-project-view:not([hidden]) .pf-section {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Project pages loaded inside PORTFOLIO.APP */

.pf-page {
  min-height: 100%;
  padding: clamp(22px, 4vw, 52px);
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    #090909;
  background-size: 32px 32px;
  color: #d8d8d8;
  font-family: Oxanium;
  overflow: auto;
}

.pf-hero {
  max-width: 940px;
  padding-bottom: 24px;
  border-bottom: 1px solid #353535;
}

.pf-kicker {
  margin: 0 0 12px;
  color: #8d949a;
  font: 700 11px/1 Oxanium;
  letter-spacing: .16em;
}

.pf-hero h1 {
  margin: 0;
  color: #f1f1f1;
  font: 500 clamp(26px, 4vw, 48px)/1.08 Oxanium;
}

.pf-lead {
  max-width: 820px;
  margin: 16px 0 0;
  color: #b7b7b7;
  font: 400 15px/1.65 Oxanium;
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 1100px;
  margin-top: 24px;
}

.pf-card,
.pf-section {
  border: 1px solid #2d2d2d;
  background: rgba(13,13,13,.92);
}

.pf-card {
  padding: 20px;
}

.pf-card h2,
.pf-section h2 {
  margin: 0 0 10px;
  color: #eeeeee;
  font: 700 14px/1.25 Oxanium;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.pf-card p {
  margin: 0;
  color: #b8b8b8;
  font: 400 13px/1.6 Oxanium;
}

.pf-section {
  max-width: 1100px;
  margin-top: 12px;
  padding: 20px;
}

.pf-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: #b8b8b8;
  font: 400 13px/1.5 Oxanium;
}

.pf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pf-tags span {
  padding: 7px 9px;
  border: 1px solid #373737;
  background: #111;
  color: #c9c9c9;
  font: 600 11px/1 Oxanium;
}

.pf-steps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #b8b8b8;
  font: 400 13px/1.5 Oxanium;
}

.pf-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: baseline;
}

.pf-steps span {
  color: #f0f0f0;
  font-weight: 700;
}

@media (max-width: 720px) {
  .fx-projects,
  .pf-grid {
    grid-template-columns: 1fr;
  }

  .fx-projects {
    padding: 12px;
  }

  .fx-toolbar {
    gap: 6px;
    padding-inline: 6px;
  }

  .fx-nav-button {
    width: 31px;
  }

  .fx-path {
    padding-inline: 9px;
    font-size: 10px;
  }

  .pf-page {
    padding: 20px;
  }
}