/* Authored graphite material; the native software remains the product evidence. */
:root {
  --studio-art: url('/materials/optimized/studio-1774.webp');
  --studio-ground: #08090a;
  --studio-panel: #101316;
  --studio-rule: #303539;
  --studio-edge: #6c8078;
  --studio-film: #08090a99;
  --studio-reading-film: #08090acc;
}
@media (max-width: 650px) {
  :root { --studio-art: url('/materials/optimized/studio-800.webp'); }
}
#main { position: relative; isolation: isolate; }
#main::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 0 auto;
  height: 540px;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, transparent 35%, var(--studio-ground) 100%),
    linear-gradient(90deg, var(--studio-reading-film), var(--studio-film)),
    var(--studio-art);
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center, center, center top;
  background-repeat: no-repeat;
}
#app[data-route="home"] #main { overflow: clip; }
#app[data-route="home"] #main::before {
  height: clamp(620px, 53vw, 800px);
  background-image:
    linear-gradient(180deg, transparent 48%, var(--studio-ground) 100%),
    linear-gradient(90deg, transparent 12%, var(--studio-film) 33%, var(--studio-film) 67%, transparent 88%),
    var(--studio-art);
}
#main::after { display: none; }
.header { background: #0a0b0c; border-color: #27292c; }
.preview-bar { background: #0e0f11; border-color: #25272a; }
.hero { overflow: visible; }
.stage { isolation: isolate; }
.stage::before { display: none; }
.stage .screen-frame {
  border: 1px solid var(--studio-edge);
  background: var(--studio-panel);
  box-shadow: none;
}
.stage .frame-top {
  border-bottom: 1px solid var(--studio-rule);
  background: linear-gradient(110deg, #1c2522, var(--studio-panel) 68%);
}
.stage .frame-bottom { border-top: 1px solid #272a2d; }
.stage .product-tabs {
  gap: 24px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #303336;
  border-radius: 0;
  background: transparent;
}
.stage .tab {
  padding-inline: 12px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: #b8bdc4;
  background: transparent;
}
.stage .tab[aria-selected="true"] {
  color: #e4f3eb;
  border-bottom-color: #b7e4ce;
  background: transparent;
}
.stage .tab:hover { color: #f1f2f4; background: #191b1e; }
.hero > .button-row > .btn:not(.primary) {
  background: transparent;
  border-color: #464a50;
}
.hero > .button-row > .btn:not(.primary):hover { background: #1c1f22; }
.page-head { position: relative; }
.page-head::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--mint), var(--studio-rule) 24%, transparent);
}
.section { position: relative; isolation: isolate; border-color: #292c2f; }
.section::before, .section::after,
.proof-row::before, .product-directory-row::before,
.closing::before { display: none; }
#app[data-route="home"] .section:nth-of-type(even) { background: #101215; }
#products .product-overview article {
  border-top-color: var(--studio-edge);
  background: linear-gradient(180deg, #101816, transparent 90px);
}
.guide-shelf { background: #111a17; border-color: var(--studio-edge); }
.closing { position: relative; isolation: isolate; overflow: clip; }
.closing::before {
  display: block;
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--studio-ground) 34%, var(--studio-film) 100%),
    var(--studio-art);
  background-size: 100% 100%, cover;
  background-position: center, right 40%;
  background-repeat: no-repeat;
}
.footer { background: #0b0c0e; border-top-color: #303336; }
@media (max-width: 800px) {
  #app[data-route="home"] #main::before {
    height: 640px;
    background-size: 100% 100%, 100% 100%, auto 560px;
    background-position: center, center, right top;
  }
  /* Keep both authored corner details in the narrower composition. */
  #app[data-route="home"] #main::after {
    display: block;
    content: "";
    position: absolute;
    z-index: -1;
    top: 300px;
    left: 0;
    width: min(40%,270px);
    height: 270px;
    pointer-events: none;
    background-image: linear-gradient(180deg,var(--studio-ground),transparent 24%,transparent 60%,var(--studio-ground)),var(--studio-art);
    background-size: 100% 100%,auto 520px;
    background-position: center,left bottom;
    background-repeat: no-repeat;
    mask-image: linear-gradient(90deg,#000,transparent);
    -webkit-mask-image: linear-gradient(90deg,#000,transparent);
  }
  .closing::before { background-position: center, 70% center; }
}
@media (max-width: 560px) {
  #main::before {
    background-size: 100% 100%, 100% 100%, auto 480px;
    background-position: center, center, calc(100% + 90px) top;
  }
  #app[data-route="home"] #main::before {
    height: 580px;
    background-image: linear-gradient(180deg,transparent 48%,var(--studio-ground) 100%),linear-gradient(90deg,var(--studio-reading-film) 16%,var(--studio-film) 58%,transparent 100%),var(--studio-art);
    background-size: 100% 100%,100% 100%,auto 460px;
    background-position: center,center,right top;
  }
  #app[data-route="home"] #main::after {
    top: 260px;
    width: 38%;
    height: 250px;
    background-size: 100% 100%,auto 480px;
  }
  .stage .product-tabs { gap: 10px; }
  .stage .tab { justify-content: center; padding-inline: 7px; }
}
@media (forced-colors: active) {
  #main::before, #main::after, #app[data-route="home"] #main::after, .page-head::after, .closing::before { display: none; }
}