/* [1] Starts a CSS selector rule block. */
.portfolio-main {
  /* Portfolio media height baseline: starts at 450px and squeezes down smoothly until mobile. */
  --portfolio-media-h: clamp(220px, 55vw, 450px);
  /* [2] Sets the main page padding. */
  padding: 0 0 1.2rem;
  /* [2a] Prevents overflow from child elements. */
  min-width: 0;
  /* [3] Uses a grid layout for stacked sections. */
  display: grid;
  /* [4] Sets spacing between major blocks. */
  gap: 0.75rem;
/* [5] Ends this CSS block. */
}

/* [5a] Starts a CSS selector rule block. */
.portfolio-hero {
  /* [5b] Uses a grid layout for hero content and image. */
  display: grid;
  /* [5b1] Keeps text and image side-by-side at all screen sizes. */
  grid-template-columns: 1fr 1fr;
  /* [5b2] Allows columns to shrink below content size for responsive scaling. */
  min-width: 0;
  /* [5c] Adds spacing between hero elements. */
  gap: 0.72rem;
  /* [5d] Sets hero panel corner rounding. */
  border-radius: 1.15rem;
  /* [5e] Adds inner spacing around hero content. */
  padding: clamp(0.72rem, 1.2vw, 0.92rem);
  /* [5g1] Matches shared header translucency profile. */
  background: var(--panel-fill);
  /* [5g2] Matches shared header border profile. */
  border: 1px solid var(--panel-border);
  /* [5g3] Matches shared header blur profile. */
  backdrop-filter: blur(0px) saturate(128%);
  /* [5g4] Matches shared header blur profile in WebKit. */
  -webkit-backdrop-filter: blur(0px) saturate(128%);
/* [5f] Ends this CSS block. */
}

body[data-page-category="App Dev"] .portfolio-hero,
body[data-page-category="Websites"] .portfolio-hero {
  grid-template-columns: 1fr;
}

/* [5g] Starts a CSS selector rule block. */
.portfolio-hero-copy {
  /* [5h] Uses compact grid stacking for copy text. */
  display: grid;
  /* [5h1] Allows text to shrink below content size. */
  min-width: 0;
  /* [5i] Sets spacing between copy elements. */
  gap: 0.28rem;
/* [5j] Ends this CSS block. */
}

body[data-page-category="App Dev"] .portfolio-hero-copy,
body[data-page-category="Websites"] .portfolio-hero-copy {
  display: none;
}

/* [5k] Starts a CSS selector rule block. */
.portfolio-hero-copy h1 {
  /* [5l] Removes default heading margin. */
  margin: 0;
  /* [5m] Uses accent heading font. */
  font-family: "Syncopate", sans-serif;
  /* [5n] Uses strong gold title color. */
  color: var(--silver-strong);
  /* [5o] Sets responsive heading size. */
  font-size: clamp(1.02rem, 1.6vw, 1.26rem);
/* [5p] Ends this CSS block. */
}

/* [5q] Starts a CSS selector rule block. */
.portfolio-hero-media {
  /* [5q1] Allows image to shrink below content size. */
  min-width: 0;
  /* [5r] Clips the placeholder image to panel shape. */
  overflow: hidden;
  /* [5s] Sets panel corner rounding for the hero image. */
  border-radius: 0.88rem;
  /* [5t] Sets hero image container height. */
  min-height: clamp(220px, 36vh, 380px);
  /* [5u] Adds subtle border around the hero image. */
  border: 1px solid rgba(255, 255, 255, 0.22);
/* [5v] Ends this CSS block. */
}

body[data-page-category="App Dev"] .portfolio-hero-media,
body[data-page-category="Websites"] .portfolio-hero-media {
  min-height: clamp(300px, 44vh, 460px);
}

/* [5w] Starts a CSS selector rule block. */
.portfolio-hero-media img {
  /* [5x] Fills the hero image width. */
  width: 100%;
  /* [5y] Fills the hero image container height. */
  height: 100%;
  /* [5z] Fills the full hero frame on placeholder pages. */
  object-fit: cover;
  /* [5aa] Centers the placeholder photo in frame. */
  object-position: center;
  /* [5ab] Ensures image behaves as block content. */
  display: block;
/* [5ac] Ends this CSS block. */
}

.portfolio-hero-media img,
.viewport-thumbs .app-thumb img,
.app-thumb img,
.media-interactive img {
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
}

/* [6] Starts a CSS selector rule block. */
.portfolio-intro {
  /* [7] Sets panel corner rounding. */
  border-radius: 1.3rem;
  /* [8] Sets inner spacing for intro content. */
  padding: clamp(0.8rem, 1.4vw, 1rem);
  /* [8a] Matches shared header translucency profile. */
  background: var(--panel-fill);
  /* [8b] Matches shared header border profile. */
  border: 1px solid var(--panel-border);
  /* [8c] Matches shared header blur profile. */
  backdrop-filter: blur(0px) saturate(128%);
  /* [8d] Matches shared header blur profile in WebKit. */
  -webkit-backdrop-filter: blur(0px) saturate(128%);
/* [9] Ends this CSS block. */
}

/* [10] Starts a CSS selector rule block. */
.portfolio-copy {
  /* [11] Removes default paragraph margin. */
  margin: 0.42rem 0 0;
  /* [12] Sets muted text color. */
  color: var(--muted);
/* [13] Ends this CSS block. */
}

/* [14] Starts a CSS selector rule block. */
.portfolio-status {
  /* [15] Adds top spacing above status text. */
  margin: 0.56rem 0 0;
  /* [16] Uses silver text for status readability. */
  color: var(--silver);
  /* [17] Shrinks status text size slightly. */
  font-size: 0.83rem;
/* [18] Ends this CSS block. */
}

/* [19] Starts a CSS selector rule block. */
.portfolio-sections {
  /* [20] Uses a grid layout for category blocks. */
  display: grid;
  /* [21] Sets spacing between category blocks. */
  gap: 0.75rem;
/* [22] Ends this CSS block. */
}

/* [23] Starts a CSS selector rule block. */
.category-block {
  /* [24] Rounds category block corners. */
  border-radius: 1.1rem;
  /* [25] Removes internal wrapper spacing so this parent stays layout-only. */
  padding: 0;
  /* [25a] Removes category wrapper paint so the parent pane is invisible. */
  background: transparent;
  /* [25b] Removes category wrapper borders for layout-only behavior. */
  border: 0;
  /* [25c] Removes wrapper blur so no parent glass pane is shown. */
  backdrop-filter: none;
  /* [25d] Removes wrapper blur in WebKit browsers. */
  -webkit-backdrop-filter: none;
  /* [25e] Removes any inherited wrapper shadow. */
  box-shadow: none;
  /* [26] Animates focus styling changes smoothly. */
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
/* [27] Ends this CSS block. */
}

/* [28] Starts a CSS selector rule block. */
.category-block.is-focused {
  /* [29] Keeps focused parent wrapper visually neutral. */
  border-color: transparent;
  /* [30] Prevents focus glow from restoring visible pane chrome. */
  box-shadow: none;
  /* [31] Prevents focus transforms on the invisible parent wrapper. */
  transform: none;
/* [34] Ends this CSS block. */
}

/* [35] Starts a CSS selector rule block. */
.section-title {
  /* [36] Removes default heading margin. */
  margin: 0;
  /* [37] Uses the accent heading font. */
  font-family: "Syncopate", sans-serif;
  /* [38] Sets heading color to strong gold accent. */
  color: var(--gold-strong);
  /* [39] Sets compact heading size. */
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
/* [40] Ends this CSS block. */
}

/* [41] Starts a CSS selector rule block. */
.section-copy {
  /* [42] Sets spacing from heading to paragraph. */
  margin: 0.34rem 0 0;
  /* [43] Sets muted helper text color. */
  color: var(--muted);
  /* [44] Sets helper text size. */
  font-size: 0.84rem;
/* [45] Ends this CSS block. */
}

/* [46] Starts a CSS selector rule block. */
.app-list {
  /* [47] Removes top spacing now that category wrapper heading stack is hidden/inline. */
  margin-top: 0;
  /* [48] Uses grid layout for rows. */
  display: grid;
  /* [49] Sets vertical spacing between rows. */
  gap: 0.7rem;
/* [50] Ends this CSS block. */
}

/* [50a0] Starts a UI-page scoped rule block. */
body[data-page-category="UI"] #category-ui {
  /* [50a1] Removes visual wrapper fill on the UI page section panel. */
  background: transparent;
  /* [50a2] Removes visual wrapper border on the UI page section panel. */
  border: 0;
  /* [50a3] Removes visual wrapper shadow on the UI page section panel. */
  box-shadow: none;
  /* [50a4] Removes visual wrapper blur on the UI page section panel. */
  backdrop-filter: none;
  /* [50a5] Removes visual wrapper blur on Safari for the UI page section panel. */
  -webkit-backdrop-filter: none;
  /* [50a6] Removes panel padding so rows begin directly in content flow. */
  padding: 0;
/* [50a7] Ends this CSS block. */
}

/* [50a8] Starts a UI-page scoped focus-state override block. */
body[data-page-category="UI"] #category-ui.is-focused {
  /* [50a9] Prevents focus border from reappearing on UI section panel. */
  border-color: transparent;
  /* [50aa] Prevents focus glow from reappearing on UI section panel. */
  box-shadow: none;
  /* [50ab] Prevents focus transform adjustments on UI section panel. */
  transform: none;
/* [50ac] Ends this CSS block. */
}

/* [50ad] Starts a UI-page scoped app-list spacing override block. */
body[data-page-category="UI"] #category-ui .app-list {
  /* [50ae] Removes extra top gap left by removing the heading label. */
  margin-top: 0;
/* [50af] Ends this CSS block. */
}

/* [50a] Starts a CSS selector rule block. */
.viewport-gallery {
  /* [50b] Uses a block flow by default (viewport on top, thumbs below). */
  display: block;
  /* [50c] Sets spacing between viewport and thumbnail sections. */
  --viewport-gap: clamp(0.62rem, 1.2vw, 0.92rem);
  /* [50d] Establishes local positioning context for viewport helper toast. */
  position: relative;
/* [50d] Ends this CSS block. */
}

/* Graphics/Architecture viewport thumbs: scale up to a 200px square cap while shrinking smoothly below desktop. */
body[data-page-category="Graphics"],
body[data-page-category="Architecture"] {
  --viewport-thumb-size: clamp(90px, 19vw, 200px);
}

/* Keep the viewport gallery footprint aligned to the menu width on dedicated pages. */
body[data-page-category="Graphics"] .viewport-gallery,
body[data-page-category="Architecture"] .viewport-gallery {
  max-width: var(--menu-w, 100%);
  width: 100%;
  margin-inline: auto;
}

body[data-page-category="Graphics"] .viewport-thumbs .app-thumb,
body[data-page-category="Architecture"] .viewport-thumbs .app-thumb {
  width: var(--viewport-thumb-size);
  height: var(--viewport-thumb-size);
}

/* [50e] Starts a CSS selector rule block. */
.viewport-main {
  /* Allow viewport column to shrink without forcing overflow. */
  min-width: 0;
  /* [50e1] Creates positioning context for top-left overlay label. */
  position: relative;
  /* [50f] Centers viewport image in the frame. */
  display: flex;
  /* [50g] Centers viewport image vertically. */
  align-items: center;
  /* [50h] Centers viewport image horizontally. */
  justify-content: center;
  /* [50i] Uses rounded corners for viewport frame. */
  border-radius: 0.72rem;
  /* [50j] Clips viewport overflow to frame bounds. */
  overflow: hidden;
  /* [50k] Applies translucent parent frame style for viewport mode. */
  background: var(--panel-fill);
  /* [50l] Applies subtle viewport border. */
  border: 1px solid rgba(255, 255, 255, 0.16);
  /* [50m] Standardized portfolio media sizing (starts at 450px and squeezes down). */
  height: var(--portfolio-media-h);
  /* Default layout: keep thumbs under the viewport. */
  margin: 0 0 var(--viewport-gap);
/* [50n] Ends this CSS block. */
}

/* [50o] Starts a CSS selector rule block. */
.viewport-overlay-label {
  /* [50o1] Positions the label inside the viewport image frame. */
  position: absolute;
  /* [50o2] Anchors label to the top-left corner. */
  top: clamp(0.48rem, 1vw, 0.7rem);
  /* [50o3] Anchors label to the top-left corner. */
  left: clamp(0.56rem, 1vw, 0.82rem);
  /* [50o4] Uses compact heading font consistent with page labels. */
  font-family: "Syncopate", sans-serif;
  /* [50o5] Keeps overlay text size subtle and readable. */
  font-size: clamp(0.72rem, 1vw, 0.88rem);
  /* [50o6] Uses uppercase heading rhythm for consistency. */
  text-transform: uppercase;
  /* [50o7] Preserves tight tracking for label clarity. */
  letter-spacing: 0.08em;
  /* [50o8] Uses silver-strong text for contrast over media. */
  color: var(--silver-strong);
  /* [50o9] Adds subtle text glow for readability on busy images. */
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
  /* [50o10] Keeps overlay label from blocking viewport interactions. */
  pointer-events: none;
  /* [50o11] Keeps label above viewport image pixels. */
  z-index: 2;
/* [50o12] Ends this CSS block. */
}

/* [50o] Starts a CSS selector rule block. */
.viewport-main .app-x-image {
  /* [50p] Fills viewport width. */
  width: 100%;
  /* [50q] Fills viewport height. */
  height: 100%;
  /* [50r] Shows full image without clipping. */
  object-fit: contain;
  /* [50s] Keeps image centered. */
  object-position: center;
/* [50t] Ends this CSS block. */
}

/* [50u] Starts a CSS selector rule block. */
.viewport-thumbs {
  /* [50v] Thumbs wrap row-first (fills to the side, then below) as more items are added. */
  display: block;
  /* [50w] Removes inline spacing artifacts when thumbs are inline-level tiles. */
  font-size: 0;
  line-height: 0;
/* [50y] Ends this CSS block. */
}

/* [50z] Starts a CSS selector rule block. */
.viewport-thumbs .app-thumb {
  /* Inline-level tiles so the row can wrap around the viewport float on wide screens. */
  display: inline-flex;
  vertical-align: top;
  /* Stable tile sizing: scales down smoothly but starts from the same baseline rhythm. */
  width: clamp(90px, 12vw, 136px);
  /* [50za] Uses compact rounded corners for viewport thumbnails. */
  border-radius: 0.52rem;
  /* [50zb] Sets stable thumbnail height for consistent grid rhythm. */
  height: clamp(126px, 16vw, 192px);
  /* Consistent spacing between tiles (no container panes). */
  margin: 0 0.46rem 0.46rem 0;
/* [50zc] Ends this CSS block. */
}

/* [50zd] Starts a CSS selector rule block. */
.viewport-thumbs .app-thumb img {
  /* [50ze] Keeps full thumbnail image visible. */
  object-fit: contain;
  /* [50zf] Centers thumbnail content. */
  object-position: center;
/* [50zg] Ends this CSS block. */
}

/* Wide screens: viewport becomes the upper-left anchor; thumbs populate to the right, then below. */
@media (min-width: 1080px) {
  .viewport-gallery::after {
    content: "";
    display: block;
    clear: both;
  }

  .viewport-main {
    float: left;
    width: clamp(520px, 58%, 740px);
    margin: 0 var(--viewport-gap) var(--viewport-gap) 0;
  }

  .viewport-gallery.is-backwards-l {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    column-gap: 0;
    row-gap: var(--viewport-gap);
    --backwards-l-h: max(
      var(--portfolio-media-h),
      calc(var(--viewport-thumb-size, 200px) * 3 + var(--viewport-gap) * 2)
    );
  }

  /* Clearfix pseudo-element becomes an extra grid item; disable it in grid mode. */
  .viewport-gallery.is-backwards-l::after {
    content: none;
  }

  .viewport-gallery.is-backwards-l .viewport-main {
    grid-column: 1;
    grid-row: 1;
    float: none;
    width: auto;
    margin: 0;
    height: var(--backwards-l-h);
  }

  .viewport-gallery.is-backwards-l .viewport-thumbs {
    display: contents;
  }

  .viewport-gallery.is-backwards-l .viewport-thumbs-right,
  .viewport-gallery.is-backwards-l .viewport-thumbs-bottom {
    font-size: 0;
    line-height: 0;
  }

  .viewport-gallery.is-backwards-l .viewport-thumbs-right {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
    height: var(--backwards-l-h);
    box-sizing: border-box;
    padding-left: var(--viewport-gap);
  }

  .viewport-gallery.is-backwards-l .viewport-thumbs-right .app-thumb,
  .viewport-gallery.is-backwards-l .viewport-thumbs-bottom .app-thumb {
    flex: 0 0 auto;
  }

  .viewport-gallery.is-backwards-l .viewport-thumbs-right .app-thumb {
    margin: 0 0 0.46rem 0;
  }

  .viewport-gallery.is-backwards-l .viewport-thumbs-bottom {
    grid-column: 1 / -1;
    grid-row: 2;
    clear: none;
    width: 100%;
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }
}

/* [50zh] Starts a CSS selector rule block. */
.viewport-toast {
  /* [50zi] Uses viewport-fixed positioning so JS can track cursor location. */
  position: fixed;
  /* [50zj] Sets fallback top position before pointer tracking starts. */
  top: 1rem;
  /* [50zk] Sets fallback left position before pointer tracking starts. */
  left: 1rem;
  /* [50zl] Uses inline-flex for text and close button alignment. */
  display: inline-flex;
  /* [50zm] Centers toast contents vertically. */
  align-items: center;
  /* [50zn] Sets spacing between text and close icon. */
  gap: 0.5rem;
  /* [50zo] Adds compact toast padding. */
  padding: 0.46rem 0.62rem;
  /* [50zp] Adds subtle corner rounding. */
  border-radius: 0.6rem;
  /* [50zq] Keeps toast readable over media. */
  color: var(--silver-strong);
  /* [50zr] Uses a lightweight translucent fill. */
  background: rgba(9, 14, 30, 0.52);
  /* [50zs] Uses a subtle border matching current theme lines. */
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* [50zt] Keeps toast above viewport elements. */
  z-index: 110;
  /* [50zu] Sets compact helper text size. */
  font-size: 0.78rem;
  /* [50zv] Ensures hide animation runs smoothly. */
  transition: opacity 180ms ease, transform 180ms ease;
  /* [50zv1] Allows close button interaction while following cursor. */
  pointer-events: auto;
/* [50zw] Ends this CSS block. */
}

/* [50zx] Starts a CSS selector rule block. */
.viewport-toast.is-hidden {
  /* [50zy] Fades toast out during dismiss. */
  opacity: 0;
  /* [50zz] Moves toast slightly right during dismiss. */
  transform: translateX(8px);
/* [50zza] Ends this CSS block. */
}

/* [50zzb] Starts a CSS selector rule block. */
.viewport-toast-close {
  /* [50zzc] Removes native button appearance. */
  appearance: none;
  /* [50zzd] Removes native button appearance in WebKit browsers. */
  -webkit-appearance: none;
  /* [50zze] Removes default button border. */
  border: 0;
  /* [50zzf] Removes default button background. */
  background: transparent;
  /* [50zzg] Inherits toast text color. */
  color: inherit;
  /* [50zzh] Uses pointer cursor for dismiss action. */
  cursor: pointer;
  /* [50zzi] Uses compact icon sizing. */
  font-size: 0.9rem;
  /* [50zzj] Tightens line-height around the close glyph. */
  line-height: 1;
  /* [50zzk] Reduces default button padding. */
  padding: 0 0.08rem;
/* [50zzl] Ends this CSS block. */
}

/* [51] Starts a CSS selector rule block. */
.app-row {
  /* [51a] Prevents overflow from child elements. */
  min-width: 0;
  /* [52] Uses a stacked row layout with header + body. */
  display: grid;
  /* [53] Sets vertical spacing between header and split panels. */
  gap: 0.58rem;
  /* [55] Adds subtle panel rounding aligned with shared containers. */
  border-radius: 0.72rem;
  /* [56] Keeps compact spacing without card padding. */
  padding: 0.34rem;
  /* [57] Uses subtle panel border for translucent row containers. */
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* [58] Adds a soft bottom divider between rows. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  /* [59] Uses shared panel translucency without opaque fill. */
  background: var(--panel-fill);
  /* [59a] Matches shared header blur profile. */
  backdrop-filter: blur(0px) saturate(128%);
  /* [59b] Matches shared header blur profile in WebKit. */
  -webkit-backdrop-filter: blur(0px) saturate(128%);
/* [59] Ends this CSS block. */
}

/* [60] Starts a CSS selector rule block. */
/* [60] Starts a CSS selector rule block. */
.app-row-head {
  /* [61] Uses compact header stacking. */
  display: grid;
  /* [62] Sets tiny spacing between title and meta. */
  gap: 0.2rem;
/* [63] Ends this CSS block. */
}

/* UI rows: remove the small row padding so strips align with the menu outer edges. */
.app-row.ui-row {
  padding: 0;
}

/* Static UI rows: left-justified then right-justified photo sets (no X|O carousel). */
.ui-gallery {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.app-row.right .ui-gallery {
  justify-content: flex-end;
  margin: 0;
}

.app-row.ui-row.right .app-row-head {
  justify-items: end;
  text-align: right;
}

.ui-grid {
  /* One-row strip: keep all UI shots on the same row and squeeze their height to fit. */
  --ui-shot-h: var(--portfolio-media-h);
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: clamp(18px, 4vw, 50px);
  max-width: 100%;
  min-width: 0;
}

.ui-shot {
  /* Remove the per-image pane; projects are grouped by the app row container. */
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  flex: 0 0 auto;
  height: var(--ui-shot-h);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-shot.is-empty {
  display: none;
}

.ui-shot-image {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* [64] Starts a CSS selector rule block. */
.app-row-body {
  /* [65] Splits row into equal X and O halves. */
  display: grid;
  /* [66] Sets 50/50 columns for X | O. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* [66a] Sets the default pane arrangement to X on left and O on right. */
  grid-template-areas: "x o";
  /* [67] Sets spacing between X and O panes. */
  gap: 0.9rem;
  /* [67a] Stretches both panes to a consistent visual height. */
  align-items: stretch;
  /* [67b] Prevents grid children from forcing overflow widths. */
  min-width: 0;
  /* [68] Enables absolute-positioned center divider line. */
  position: relative;
  /* [69] Adds slight vertical breathing room around image columns. */
  padding: 0.1rem 0;
/* [68] Ends this CSS block. */
}

/* [68a] Starts a CSS selector rule block. */
.app-row-body.row-pattern-ox {
  /* [68b] Flips layout to O on left and X on right for alternating rows. */
  grid-template-areas: "o x";
/* [68c] Ends this CSS block. */
}

/* [69] Starts a CSS selector rule block. */
.app-row-body::before {
  /* [70] Creates divider line content. */
  content: "";
  /* [71] Positions line relative to the split container. */
  position: absolute;
  /* [72] Centers the divider between X and O halves. */
  left: calc(50% - 0.5px);
  /* [73] Sets divider top inset. */
  top: 0.15rem;
  /* [74] Sets divider bottom inset. */
  bottom: 0.15rem;
  /* [75] Defines divider width. */
  width: 1px;
  /* [76] Sets divider color. */
  background: rgba(255, 255, 255, 0.2);
  /* [77] Prevents divider from intercepting input events. */
  pointer-events: none;
/* [78] Ends this CSS block. */
}

/* [79] Starts a CSS selector rule block. */
.app-pane {
  /* [80] Uses subtle pane border for a shared glass panel look. */
  border: 1px solid rgba(255, 255, 255, 0.12);
  /* [81] Uses soft pane corner rounding. */
  border-radius: 0.6rem;
  /* [82] Adds inner breathing room so images are not oversized. */
  padding: clamp(0.25rem, 0.6vw, 0.5rem);
  /* [83] Uses shared panel translucency without heavy visual boxes. */
  background: var(--panel-fill);
  /* [83a] Matches shared header blur profile. */
  backdrop-filter: blur(0px) saturate(128%);
  /* [83b] Matches shared header blur profile in WebKit. */
  -webkit-backdrop-filter: blur(0px) saturate(128%);
  /* [84] Uses the shared portfolio media height baseline. */
  height: var(--portfolio-media-h);
  /* [84a] Removes extra minimum height pressure. */
  min-height: 0;
  /* [84b] Prevents pane contents from spilling outside row bounds. */
  overflow: hidden;
  /* [84c] Allows pane to shrink inside grid without overflow. */
  min-width: 0;
/* [75] Ends this CSS block. */
}

/* [76] Starts a CSS selector rule block. */
.pane-x {
  /* [76a] Allows pane to shrink below content size. */
  min-width: 0;
  /* [77a] Assigns the X pane to the X grid area. */
  grid-area: x;
  /* [77] Centers the X image directly in the pane after wrapper reduction. */
  display: flex;
  /* [78] Centers content vertically. */
  align-items: center;
  /* [79] Centers content horizontally. */
  justify-content: center;
/* [80] Ends this CSS block. */
}

/* [83] Starts a CSS selector rule block. */
.app-x-image {
  /* [84] Fills the full X pane width. */
  width: 100%;
  /* [85] Removes width cap so large images can fully occupy the pane. */
  max-width: none;
  /* [86] Fills the full X pane height. */
  height: 100%;
  /* [87] Removes height cap so the image can fully occupy the pane. */
  max-height: none;
  /* [88] Shows the full X image without clipping. */
  object-fit: contain;
  /* [88] Anchors image in the center. */
  object-position: center;
/* [89] Ends this CSS block. */
}

/* [90] Starts a CSS selector rule block. */
.pane-o {
  /* [91a] Assigns the O pane to the O grid area. */
  grid-area: o;
  /* [91] Uses block flow because arrows are integrated directly in O pane. */
  display: block;
  /* [91b] Creates local positioning context for absolutely-positioned rails. */
  position: relative;
  /* [91c] Clips rails and grid to one shared pane frame. */
  overflow: hidden;
/* [92b] Allows O pane to shrink safely in grid layout. */
  min-width: 0;
  /* [92c] Allows O pane to shrink safely in grid layout. */
  min-height: 0;
/* [93] Ends this CSS block. */
}

.pane-o--static {
  /* Allow static grid to flow naturally without clipping arrows. */
  overflow: visible;
}

/* [94] Starts a CSS selector rule block. */
.o-grid {
  /* [95] Uses adaptive O-grid layout so small image sets can scale larger. */
  display: grid;
  /* [96] Defaults to a single-cell layout mode. */
  grid-template-columns: minmax(0, 1fr);
  /* [97] Defaults to a single row layout mode. */
  grid-template-rows: minmax(0, 1fr);
  /* [98] Sets spacing between O tiles. */
  gap: 0.4rem;
  /* [98a] Uses the full O-grid width. */
  width: 100%;
  /* [98b] Uses the full available O-grid height. */
  height: 100%;
  /* [98ba] Uses one continuous inset scale to avoid hard resize snapping. */
  padding-inline: clamp(1.2rem, 2vw, 2.3rem);
  /* [98bb] Keeps grid padding inside the frame dimensions. */
  box-sizing: border-box;
  /* [98c] Allows O grid to shrink inside pane without overflow. */
  min-height: 0;
  /* [98d] Allows O grid to shrink inside pane without overflow. */
  min-width: 0;
/* [98] Ends this CSS block. */
}

/* [98e] Starts a CSS selector rule block. */
.o-grid.o-grid--single {
  /* [98f] Keeps a full-size single O image when only one item remains. */
  grid-template-columns: minmax(0, 1fr);
  /* [98g] Keeps one full-height row for single O items. */
  grid-template-rows: minmax(0, 1fr);
/* [98h] Ends this CSS block. */
}

/* [98i] Starts a CSS selector rule block. */
.o-grid.o-grid--double {
  /* [98j] Uses two equal columns for two O images. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* [98k] Keeps one row so each O image scales close to X pane size. */
  grid-template-rows: minmax(0, 1fr);
/* [98l] Ends this CSS block. */
}

/* [98m] Starts a CSS selector rule block. */
.o-grid.o-grid--empty {
  /* [98n] Hides empty O-grid when there are no remaining images. */
  display: none;
/* [98o] Ends this CSS block. */
}

.o-grid--static {
  /* Show all thumbnails at once in flexible columns that scale down. */
  grid-template-columns: repeat(auto-fill, minmax(clamp(100px, 14vw, 180px), 1fr));
  grid-template-rows: auto;
  height: auto;
  padding-inline: clamp(0.4rem, 2vw, 1rem);
  gap: clamp(0.35rem, 2vw, 0.6rem);
}

/* [99] Starts a CSS selector rule block. */
.app-thumb {
  /* [99a] Uses button reset styling when thumbs are rendered as buttons. */
  appearance: none;
  /* [99b] Removes default button chrome in WebKit browsers. */
  -webkit-appearance: none;
  /* [99c] Removes default button padding. */
  padding: 0;
  /* [99d] Removes default button margin. */
  margin: 0;
  /* [99e] Uses flex centering so reduced O images stay balanced in each slot. */
  display: flex;
  /* [99ea] Centers thumbnail image vertically. */
  align-items: center;
  /* [99eb] Centers thumbnail image horizontally. */
  justify-content: center;
  /* [99f] Uses pointer cursor to indicate interaction. */
  cursor: pointer;
  /* [99g] Removes native focus outline so custom ring can display cleanly. */
  outline: none;
  /* [99h] Prevents text rendering side effects in button elements. */
  font: inherit;
  /* [100] Uses full width of O grid cells. */
  width: 100%;
  /* [101] Uses full grid cell height for each thumbnail. */
  height: 100%;
  /* [102] Keeps square edges so tile framing stays visually invisible. */
  border-radius: 0;
  /* [103] Clips thumb image overflow. */
  overflow: hidden;
  /* [104] Removes visible tile borders so containers are not seen. */
  border: 0;
  /* [105] Removes visible tile fill so containers are not seen. */
  background: transparent;
  /* [105a] Lets thumbnail cells shrink inside the O grid. */
  min-height: 0;
  /* [105b] Lets thumbnail cells shrink inside the O grid. */
  min-width: 0;
/* [103] Ends this CSS block. */
}

.app-thumb--static {
  /* Static tiles are non-interactive and inherit layout. */
  cursor: default;
  border: none;
  background: transparent;
  padding: 0;
}

.app-thumb--static img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* [103a] Starts a CSS selector rule block. */
.app-thumb.is-empty {
  /* [103b] Keeps empty slots present for grid structure but visually silent. */
  visibility: hidden;
/* [103c] Ends this CSS block. */
}

/* [104] Starts a CSS selector rule block. */
.app-thumb img {
  /* [105] Reduces O-image footprint by 10% per request. */
  width: 90%;
  /* [106] Reduces O-image footprint by 10% per request. */
  height: 90%;
  /* [107] Shows each thumbnail image fully without clipping. */
  object-fit: contain;
  /* [107a] Keeps thumbnail content centered in each slot. */
  object-position: center;
  /* [107b] Prevents image from expanding past the 10% reduction cap. */
  max-width: 90%;
  /* [107c] Prevents image from expanding past the 10% reduction cap. */
  max-height: 90%;
/* [108] Ends this CSS block. */
}

/* [108a] Registers an animatable angle custom property for the blue orbit. */
@property --orbit-angle-blue {
  /* [108a1] Defines this custom property as an angle type. */
  syntax: "<angle>";
  /* [108a2] Prevents inheritance into descendants. */
  inherits: false;
  /* [108a3] Sets initial angle value. */
  initial-value: 0deg;
/* [108a4] Ends property registration block. */
}

/* [108b] Registers an animatable angle custom property for the purple orbit. */
@property --orbit-angle-purple {
  /* [108b1] Defines this custom property as an angle type. */
  syntax: "<angle>";
  /* [108b2] Prevents inheritance into descendants. */
  inherits: false;
  /* [108b3] Sets initial angle value. */
  initial-value: 180deg;
/* [108b4] Ends property registration block. */
}

/* [108c] Starts desktop-only hover/focus effect rules. */
@media (hover: hover) and (pointer: fine) {
  /* [108d] Starts a CSS selector rule block. */
  .media-interactive {
    /* [108e] Creates a local positioning context for orbit layers. */
    position: relative;
    /* [108f] Isolates blend and glow from neighboring elements. */
    isolation: isolate;
    /* Orbit styling tokens (used by ::before/::after). */
    --orbit-stroke: 2px;
    /* Default: ring sits on the element edge (override per-component when images are inset). */
    --orbit-inset: 0px;
    /* [108g] Initializes blue orbit angle for animation. */
    --orbit-angle-blue: 0deg;
    /* [108h] Initializes purple orbit angle for animation. */
    --orbit-angle-purple: 180deg;
  /* [108i] Ends this CSS block. */
  }

  /* App thumbs intentionally shrink images to ~90% of the slot. Pull the orbit in to match. */
  .app-thumb.media-interactive {
    --orbit-inset: max(0px, calc(5% - var(--orbit-stroke)));
  }

  /* [108j] Starts a CSS selector rule block. */
  .media-interactive::before,
  .media-interactive::after {
    /* [108k] Generates pseudo-element content for orbit layers. */
    content: "";
    /* [108l] Positions orbit overlays around the hovered element. */
    position: absolute;
    /* [108m] Aligns orbit ring to the image perimeter path. */
    inset: var(--orbit-inset);
    /* [108n] Makes orbit follow each target's shape corners. */
    border-radius: inherit;
    /* [108o] Sets ring thickness. */
    padding: var(--orbit-stroke);
    /* [108p] Keeps only the ring and removes the center fill. */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    /* [108q] Uses XOR masking in WebKit browsers. */
    -webkit-mask-composite: xor;
    /* [108r] Keeps only ring pixels in standards-compliant engines. */
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    /* [108s] Uses exclude compositing outside WebKit. */
    mask-composite: exclude;
    /* [108t] Starts hidden until hover or focus interaction. */
    opacity: 0;
    /* [108u] Keeps interaction on the media element itself. */
    pointer-events: none;
    /* [108v] Draws ring above image pixels. */
    z-index: 3;
    /* [108w] Adds smooth entry and glow transitions. */
    transition: opacity 150ms ease, filter 200ms ease;
    /* [108x] Optimizes only opacity for animation performance. */
    will-change: opacity;
    /* [108y] Uses additive blend for neon color mixing. */
    mix-blend-mode: screen;
  /* [108z] Ends this CSS block. */
  }

  /* [109a] Starts a CSS selector rule block. */
  .media-interactive::before {
    /* [109b] Draws the blue snake segment orbiting clockwise. */
    background: conic-gradient(
      from var(--orbit-angle-blue),
      rgba(65, 105, 225, 0) 0deg 259deg,
      rgba(65, 105, 225, 0.95) 284deg,
      rgba(65, 105, 225, 0.24) 310deg,
      rgba(65, 105, 225, 0) 346deg 360deg
    );
  /* [109c] Ends this CSS block. */
  }

  /* [109d] Starts a CSS selector rule block. */
  .media-interactive::after {
    /* [109e] Draws the purple snake segment orbiting clockwise with phase offset. */
    background: conic-gradient(
      from var(--orbit-angle-purple),
      rgba(120, 81, 169, 0) 0deg 259deg,
      rgba(120, 81, 169, 0.95) 284deg,
      rgba(120, 81, 169, 0.24) 310deg,
      rgba(120, 81, 169, 0) 346deg 360deg
    );
  /* [109f] Ends this CSS block. */
  }

  /* [109g] Starts a CSS selector rule block. */
  .media-interactive img {
    /* [109h] Enables smooth magnification on hover while image stays unrotated. */
    transition: transform 220ms ease, filter 220ms ease;
    /* [109i] Keeps scale origin centered. */
    transform-origin: center center;
  /* [109j] Ends this CSS block. */
  }

  /* [109k] Starts a CSS selector rule block. */
  .media-interactive:hover::before,
  .media-interactive:focus-visible::before {
    /* [109l] Reveals blue snake ring on interaction. */
    opacity: 1;
    /* [109m] Adds neon blue glow bloom. */
    filter: drop-shadow(0 0 10px rgba(65, 105, 225, 0.95)) drop-shadow(0 0 20px rgba(65, 105, 225, 0.65));
    /* [109n] Animates blue snake clockwise around the image perimeter. */
    animation: orbit-blue 2.2s linear infinite, orbit-pulse-blue 1.1s ease-in-out infinite;
  /* [109o] Ends this CSS block. */
  }

  /* [109p] Starts a CSS selector rule block. */
  .media-interactive:hover::after,
  .media-interactive:focus-visible::after {
    /* [109q] Reveals purple snake ring on interaction. */
    opacity: 1;
    /* [109r] Adds neon purple glow bloom. */
    filter: drop-shadow(0 0 10px rgba(120, 81, 169, 0.95)) drop-shadow(0 0 20px rgba(120, 81, 169, 0.65));
    /* [109s] Animates purple snake clockwise with offset so it chases blue. */
    animation: orbit-purple 2.2s linear infinite, orbit-pulse-purple 1.1s ease-in-out infinite;
    /* [109t] Offsets pulse phase to create blue/purple consume effect. */
    animation-delay: 0s, -0.55s;
  /* [109u] Ends this CSS block. */
  }

  /* [109v] Starts a CSS selector rule block. */
  .media-interactive:hover img,
  .media-interactive:focus-visible img {
    /* [109w] Applies medium hover magnification while keeping orientation fixed. */
    transform: scale(1.06);
    /* [109x] Slightly boosts image tone for neon emphasis. */
    filter: saturate(1.14) brightness(1.06);
  /* [109y] Ends this CSS block. */
  }
/* [109z] Ends this media query block. */
}

/* [110a] Starts blue orbit angle animation keyframes. */
@keyframes orbit-blue {
  /* [110b] Starts keyframe block at initial angle. */
  from {
    /* [110c] Sets initial blue orbit position. */
    --orbit-angle-blue: 0deg;
  /* [110d] Ends initial blue keyframe block. */
  }
  /* [110e] Starts keyframe block at final angle. */
  to {
    /* [110f] Completes one clockwise revolution for blue segment. */
    --orbit-angle-blue: 360deg;
  /* [110g] Ends final blue keyframe block. */
  }
/* [110h] Ends blue orbit keyframes. */
}

/* [110i] Starts purple orbit angle animation keyframes. */
@keyframes orbit-purple {
  /* [110j] Starts keyframe block at initial angle. */
  from {
    /* [110k] Sets initial purple orbit position. */
    --orbit-angle-purple: 180deg;
  /* [110l] Ends initial purple keyframe block. */
  }
  /* [110m] Starts keyframe block at final angle. */
  to {
    /* [110n] Completes one clockwise revolution for purple segment. */
    --orbit-angle-purple: 540deg;
  /* [110o] Ends final purple keyframe block. */
  }
/* [110p] Ends purple orbit keyframes. */
}

/* [110q] Starts blue pulse keyframes for snake intensity. */
@keyframes orbit-pulse-blue {
  /* [110r] Starts keyframe block at cycle start. */
  0%, 100% {
    /* [110s] Uses base opacity level for blue segment. */
    opacity: 0.72;
  /* [110t] Ends base blue pulse keyframe. */
  }
  /* [110u] Starts keyframe block at pulse peak. */
  50% {
    /* [110v] Raises opacity to mimic blue overtaking purple. */
    opacity: 1;
  /* [110w] Ends blue pulse peak keyframe. */
  }
/* [110x] Ends blue pulse keyframes. */
}

/* [110y] Starts purple pulse keyframes for snake intensity. */
@keyframes orbit-pulse-purple {
  /* [110z] Starts keyframe block at cycle start. */
  0%, 100% {
    /* [111a] Uses base opacity level for purple segment. */
    opacity: 0.72;
  /* [111b] Ends base purple pulse keyframe. */
  }
  /* [111c] Starts keyframe block at pulse peak. */
  50% {
    /* [111d] Raises opacity to mimic purple overtaking blue. */
    opacity: 1;
  /* [111e] Ends purple pulse peak keyframe. */
  }
/* [111f] Ends purple pulse keyframes. */
}

/* [111g] Starts reduced-motion safety media query. */
@media (prefers-reduced-motion: reduce) {
  /* [111h] Starts a CSS selector rule block. */
  .media-interactive:hover::before,
  .media-interactive:focus-visible::before,
  .media-interactive:hover::after,
  .media-interactive:focus-visible::after {
    /* [111i] Keeps static ring highlight without continuous orbit. */
    animation: none !important;
  /* [111j] Ends reduced-motion ring rule. */
  }

  /* [111k] Starts a CSS selector rule block. */
  .media-interactive:hover img,
  .media-interactive:focus-visible img {
    /* [111l] Disables zoom for reduced-motion users. */
    transform: none;
  /* [111m] Ends reduced-motion image rule. */
  }
/* [111n] Ends reduced-motion media query. */
}

/* [109] Starts a CSS selector rule block. */
.app-o-empty {
  /* [110] Removes default paragraph margin. */
  margin: 0;
  /* [111] Sets muted empty-state color. */
  color: var(--muted);
  /* [112] Centers text within O pane. */
  align-self: center;
  /* [113] Sets compact empty-state size. */
  font-size: 0.82rem;
/* [114] Ends this CSS block. */
}

/* [114] Starts a CSS selector rule block. */
.app-title {
  /* [115] Removes default heading margin. */
  margin: 0;
  /* [116] Uses accent heading font. */
  font-family: "Syncopate", sans-serif;
  /* [117] Sets heading color. */
  color: var(--gold-strong);
  /* [118] Sets app title size. */
  font-size: clamp(0.84rem, 1.15vw, 1rem);
/* [119] Ends this CSS block. */
}

/* [120] Starts a CSS selector rule block. */
.app-meta {
  /* [121] Removes default paragraph spacing. */
  margin: 0;
  /* [122] Uses silver accent for metadata. */
  color: var(--silver);
  /* [123] Sets metadata text size. */
  font-size: 0.8rem;
/* [124] Ends this CSS block. */
}

/* [125] Starts a CSS selector rule block. */
.app-description {
  /* [126] Removes default paragraph spacing. */
  margin: 0;
  /* [127] Uses muted text tone for descriptions. */
  color: var(--muted);
  /* [128] Sets line-height for readability. */
  line-height: 1.4;
  /* [129] Sets description text size. */
  font-size: 0.84rem;
/* [130] Ends this CSS block. */
}

/* [131] Starts a CSS selector rule block. */
.placeholder {
  /* [132] Adds placeholder padding. */
  padding: 0.85rem;
  /* [133] Rounds placeholder corners. */
  border-radius: 0.88rem;
  /* [134] Draws dashed placeholder border. */
  border: 1px dashed rgba(242, 246, 251, 0.45);
  /* [135] Uses translucent dark placeholder background. */
  background: rgba(0, 0, 0, 0.35);
/* [136] Ends this CSS block. */
}

/* [137] Starts a CSS selector rule block. */
.placeholder h3 {
  /* [138] Removes default heading margin. */
  margin: 0;
  /* [139] Uses heading font family. */
  font-family: "Syncopate", sans-serif;
  /* [140] Uses gold accent color. */
  color: var(--gold-strong);
  /* [141] Sets placeholder heading size. */
  font-size: 0.82rem;
/* [142] Ends this CSS block. */
}

/* [143] Starts a CSS selector rule block. */
.placeholder p {
  /* [144] Adds spacing above placeholder body text. */
  margin: 0.34rem 0 0;
  /* [145] Sets muted body color. */
  color: var(--muted);
  /* [146] Sets placeholder body text size. */
  font-size: 0.82rem;
/* [147] Ends this CSS block. */
}

/* [148] Starts a responsive media query block. */
@media (max-width: 768px) {
  /* [149] Starts a CSS selector rule block. */
  .app-row-body {
    /* [150] Keeps X and O panes horizontal on smaller screens. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* [150a] Keeps standard row order as X then O. */
    grid-template-areas: "x o";
    /* [151] Removes center divider spacing when stacked. */
    padding: 0;
  /* [151] Ends this CSS block. */
  }

  /* [151d] Starts a CSS selector rule block. */
  .app-row-body.row-pattern-ox {
    /* [151e] Keeps alternating row order as O then X. */
    grid-template-areas: "o x";
  /* [151f] Ends this CSS block. */
  }

  /* [152] Starts a CSS selector rule block. */
  .app-row-body::before {
    /* [153] Keeps center divider visible for horizontal split. */
    display: block;
  /* [154] Ends this CSS block. */
  }

  /* [152] Starts a CSS selector rule block. */
  .app-x-image {
    /* [153] Keeps X image full-width on smaller screens. */
    width: 100%;
    /* [153a] Keeps X image full-height on smaller screens. */
    height: 100%;
  /* [154] Ends this CSS block. */
  }
/* [158] Ends this media query. */
}

/* [159] Starts a responsive media query block. */
@media (max-width: 430px) {
  /* [160] Starts a CSS selector rule block. */
  .portfolio-main {
    /* [161] Tightens vertical spacing for small screens. */
    gap: 0.65rem;
  /* [162] Ends this CSS block. */
  }

  /* [163] Starts a CSS selector rule block. */
  .portfolio-intro {
    /* [164] Reduces intro panel padding on mobile. */
    padding: 0.75rem;
  /* [165] Ends this CSS block. */
  }

  /* [165a] Starts a CSS selector rule block. */
  .portfolio-hero {
    /* [165b] Reduces hero panel padding on mobile screens. */
    padding: 0.68rem;
  /* [165c] Ends this CSS block. */
  }

  /* [165d] Starts a CSS selector rule block. */
  .portfolio-hero-media {
    /* [165e] Lowers hero image height for smaller screens. */
    min-height: clamp(180px, 32vh, 260px);
  /* [165f] Ends this CSS block. */
  }

  /* [166] Starts a CSS selector rule block. */
  .category-block {
    /* [167] Reduces category panel padding on mobile. */
    padding: 0.72rem;
  /* [168] Ends this CSS block. */
  }

  /* [168a] Keeps X and O horizontal at phone portrait widths - never stack. */
  .app-row-body {
    /* [168b] Maintains two-column layout. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* [168c] Uses X and O side-by-side for standard rows. */
    grid-template-areas: "x o";
    /* [168d] Maintains horizontal spacing between panes. */
    gap: 0.9rem;
  }

  /* [168e] Preserves alternating order when row pattern is OX. */
  .app-row-body.row-pattern-ox {
    /* [168f] Maintains O X layout for alternating rows in portrait. */
    grid-template-areas: "o x";
  }

  /* [168g] Keeps center divider visible since panes stay horizontal. */
  .app-row-body::before {
    /* [168h] Keeps divider visible for horizontal split at all screen sizes. */
    display: block;
  }

/* [172] Ends this media query. */
}

/* Child visual reset: keep format and interaction logic, remove visual chrome */
.app-row,
.app-row-body::before,
.app-pane,
.o-grid,
.o-rail-btn,
.o-rail-prev,
.o-rail-next,
.placeholder,
.app-o-empty {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  transition: none !important;
}

.o-rail-btn:hover,
.o-rail-btn:focus-visible {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Unified global arrow styling for portfolio rails to match hero controls on all pages. */
.o-rail-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--silver-strong);
  font-size: 0;
  line-height: 1;
  z-index: 3;
}

.o-rail-prev {
  left: 0;
}

.o-rail-next {
  right: 0;
}

.o-rail-btn::before {
  content: "";
  display: block;
  width: 100%;
  height: 200px;
  background-image: url("./assets/icons/hero-arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.o-rail-prev::before {
  transform: none;
}

.o-rail-next::before {
  transform: scaleX(-1);
}

.o-rail-btn:hover,
.o-rail-btn:focus-visible {
  color: #ffffff;
}

.o-rail-btn[hidden] {
  display: none;
}

@media (max-width: 430px) {
  .o-rail-btn {
    width: 26px;
  }

  .o-rail-btn::before {
    height: 150px;
  }
}