.star-border-container {
  display: inline-block;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.border-gradient-bottom {
  position: absolute;
  width: 300%;
  height: 50%;
  opacity: 0.7;
  bottom: -12px;
  right: -250%;
  border-radius: 50%;
  animation: star-movement-bottom linear infinite alternate;
  z-index: 0;
}

.border-gradient-top {
  position: absolute;
  opacity: 0.7;
  width: 300%;
  height: 50%;
  top: -12px;
  left: -250%;
  border-radius: 50%;
  animation: star-movement-top linear infinite alternate;
  z-index: 0;
}

.inner-content {
  position: relative;
  border: 1px solid #222;
  background: #000;
  color: white;
  font-size: 16px;
  text-align: center;
  padding: 16px 26px;
  border-radius: 20px;
  z-index: 1;
}

@keyframes star-movement-bottom {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(-100%, 0%);
    opacity: 0;
  }
}

@keyframes star-movement-top {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(100%, 0%);
    opacity: 0;
  }
}
.shiny-text {
  display: inline-block;
}
.card-swap-container {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(5%, 20%);
  transform-origin: bottom right;

  perspective: 900px;
  overflow: visible;
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 12px;
  border: 1px solid #fff;
  background: #000;

  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (max-width: 768px) {
  .card-swap-container {
    transform: scale(0.75) translate(25%, 25%);
  }
}

@media (max-width: 480px) {
  .card-swap-container {
    transform: scale(0.55) translate(25%, 25%);
  }
}
.scroll-stack-scroller {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: visible;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: scroll-position;
}

.scroll-stack-inner {
  padding: 20vh 5rem 50rem;
  min-height: 100vh;
}

.scroll-stack-card-wrapper {
  position: relative;
}

.scroll-stack-card {
  transform-origin: top center;
  will-change: transform, filter;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  height: 20rem;
  width: 100%;
  margin: 30px 0;
  padding: 3rem;
  border-radius: 40px;
  box-sizing: border-box;
  /* Improve mobile performance */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
}

.scroll-stack-end {
  width: 100%;
  height: 1px;
}
.outer-container {
  display: flex;
  min-height: 100%;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

@media (min-width: 640px) {
  .outer-container {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 768px) {
  .outer-container {
    aspect-ratio: 2 / 1;
  }
}

.step-circle-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 28rem;
  border-radius: 2rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.step-indicator-row {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 2rem;
}

.step-content-default {
  position: relative;
  overflow: hidden;
}

.step-default {
  padding-left: 2rem;
  padding-right: 2rem;
}

.footer-container {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
}

.footer-nav {
  margin-top: 2.5rem;
  display: flex;
}

.footer-nav.spread {
  justify-content: space-between;
}

.footer-nav.end {
  justify-content: flex-end;
}

.back-button {
  transition: all 350ms;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  color: #a3a3a3;
  cursor: pointer;
}

.back-button:hover {
  color: #52525b;
}

.back-button.inactive {
  pointer-events: none;
  opacity: 0.5;
  color: #a3a3a3;
}

.next-button {
  transition: all 350ms;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #5227ff;
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.025em;
  padding: 0.375rem 0.875rem;
  cursor: pointer;
}

.next-button:hover {
  background-color: #5227ff;
}

.next-button:active {
  background-color: #5227ff;
}

.step-indicator {
  position: relative;
  cursor: pointer;
  outline: none;
}

.step-indicator-inner {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-weight: 600;
}

.active-dot {
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 9999px;
  background-color: #fff;
}

.step-number {
  font-size: 0.875rem;
}

.step-connector {
  position: relative;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  height: 0.125rem;
  flex: 1;
  overflow: hidden;
  border-radius: 0.25rem;
  background-color: #52525b;
}

.step-connector-inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

.check-icon {
  height: 1rem;
  width: 1rem;
  color: #fff;
}
.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 28px;
  --glow-padding: 40px;
  --cone-spread: 25;

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg, #120F17);
  overflow: visible;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* colored mesh-gradient border */
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg, #120F17) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) border-box;

  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* colored mesh-gradient background fill near edges */
.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;

  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer glow layer */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );

  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color, hsl(40deg 80% 80% / 100%)),
    inset 0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    inset 0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    inset 0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    inset 0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    inset 0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    inset 0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%)),
    0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%));
}

.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
  z-index: 1;
}
.grainient-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* Decorative page backdrop only. Preview canvases and their own effects stay isolated. */
.components-gradient-blinds {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .2;
  /* Quiet, static treatment when motion is reduced or WebGL is unavailable. */
  background:
    repeating-linear-gradient(90deg, transparent, #000 6.25%),
    linear-gradient(90deg, var(--accent-light), var(--accent), var(--accent-deep));
}

.components-gradient-blinds > .gradient-blinds-container,
.components-gradient-blinds canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Scoped creation workspace; the app background and glass navigation remain untouched. */
.view-vgm .generation-studio { width:calc(100% - 48px); max-width:none; padding-top:calc(var(--nav-top) + var(--nav-h) + 28px); }
.studio-header { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:28px; }
.studio-header h1 { margin:0 0 9px; font-size:clamp(28px,3vw,40px); font-weight:500; line-height:1.1; letter-spacing:-.035em; color:var(--ink); }
.studio-header p { margin:0; color:#abb7ba; font-size:14px; line-height:1.6; max-width:62ch; }
.studio-format { display:flex; flex:none; gap:12px; align-items:center; color:#d6e8ed; font-size:12px; }
.studio-format svg { width:21px; height:21px; color:#7db2bf; }
.studio-format small { display:block; margin-top:4px; color:#a6b3b7; font-size:11px; }
.studio-workspace { display:grid; grid-template-columns:320px minmax(0,1fr); gap:20px; align-items:start; }
.studio-controls { display:flex; flex-direction:column; gap:22px; padding:22px; border:1px solid #303a3d; border-radius:16px; background:rgba(13,18,20,.96); min-width:0; }
.studio-section { display:grid; gap:12px; min-width:0; }
.studio-section h2 { display:flex; justify-content:space-between; align-items:center; margin:0; color:#e5eff1; font-size:13px; font-weight:600; }
.studio-section h2 span { color:#9caeb4; font-size:11px; font-weight:400; }
.studio-controls .vgm-drop { gap:8px; }
.studio-controls .vgm-drop-target { min-height:112px; padding:18px 12px; border-color:#50636a; background:#111b1f; }
.studio-controls .vgm-drop-target span { max-width:25ch; font-size:11px; line-height:1.6; color:#aebdc2; }
.studio-controls .vgm-files { gap:8px; }
.studio-controls .vgm-files li { padding:7px; background:#182226; }
.studio-controls .vgm-drop .vgm-error:empty { display:none; }
.studio-controls .vgm-field { letter-spacing:0; font-size:12px; line-height:1.3; }
.studio-controls .vgm-field em { color:#a9b7bb; }
.studio-controls .vgm-field input,.studio-controls .vgm-field textarea { min-width:0; background:#10191d; border-color:#3a4a50; font:400 13px/1.65 inherit; }
.studio-controls .vgm-field textarea::placeholder { color:#91a3a9; opacity:1; }
.studio-controls .vgm-field input::placeholder { color:#91a3a9; opacity:1; }
.studio-direction-mode { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border:1px solid #34454c; border-radius:9px; background:#091014; }
.studio-direction-mode label { position:relative; padding:10px 4px; color:#b2c0c5; text-align:center; font-size:12px; cursor:pointer; border-radius:6px; }
.studio-direction-mode input { position:absolute; opacity:0; width:1px; height:1px; }
.studio-direction-mode label:has(:checked) { color:#eef7fa; background:#2c444d; }
.studio-direction-mode label:focus-within { outline:2px solid #a1cdd8; outline-offset:1px; }
.studio-selected-scene { display:grid; grid-template-columns:58px 1fr 18px; align-items:center; gap:12px; width:100%; padding:8px; min-height:76px; border:1px solid #3c525b; border-radius:10px; background:#142126; color:#eef5f7; text-align:left; cursor:pointer; }
.studio-selected-scene img { width:58px; height:58px; object-fit:cover; border-radius:5px; }
.studio-selected-scene strong { display:block; font-size:12px; font-weight:500; line-height:1.4; }
.studio-selected-scene small { display:block; margin-top:5px; color:#adc5cd; font-size:11px; }
.studio-selected-scene svg { width:16px; height:16px; color:#b3dce5; }
.studio-advanced { padding-top:16px; border-top:1px solid #303d42; }
.studio-advanced summary { display:flex; justify-content:space-between; align-items:center; min-height:32px; list-style:none; color:#b5c4c9; font-size:12px; cursor:pointer; }
.studio-advanced summary::-webkit-details-marker { display:none; }
.studio-advanced summary::after { content:'+'; font-size:18px; }
.studio-advanced[open] summary::after { content:'−'; }
.studio-advanced-content { display:grid; gap:16px; padding-top:16px; }
.studio-prompt-copy { max-height:220px; overflow:auto; padding:12px; margin:0; border:1px solid #33464e; border-radius:8px; background:#10191d; color:#b9cbd1; font-size:12px; line-height:1.65; white-space:pre-wrap; scrollbar-color:#557780 #10191d; }
.studio-text-button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:38px; padding:7px 10px; border:1px solid #3d545d; border-radius:7px; background:transparent; color:#c3e3eb; font:500 12px/1.4 inherit; cursor:pointer; }
.studio-text-button small { display:block; font-size:10px; color:#acc0c7; }
.studio-generate { display:grid; gap:9px; }
.studio-generate-button { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; min-height:48px; padding:12px 16px; border:1px solid #9bcbd7; border-radius:9px; background:#91c2cf; color:#0a252d; font:600 13px/1.3 inherit; cursor:pointer; transition:background .2s ease; }
.studio-generate-button:hover:not(:disabled) { background:#b6dce6; }
.studio-generate-button:disabled { background:#26383f; border-color:#40555d; color:#b3c3c9; cursor:not-allowed; }
.studio-generate-button svg { width:17px; height:17px; }
.studio-generate p { margin:0; color:#aabcc3; font-size:11px; line-height:1.5; text-align:center; }
.studio-stage-column { min-width:0; position:sticky; top:calc(var(--nav-top) + var(--nav-h) + 22px); }
.studio-preview,.studio-library { overflow:hidden; border:1px solid #344148; border-radius:16px; background:rgba(11,16,19,.97); }
.studio-stage-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 22px; border-bottom:1px solid #2d3b42; }
.studio-stage-heading h2 { margin:0; font-size:13px; font-weight:500; color:#e1edf1; }
.studio-stage-heading > span { color:#a6bcc5; font-size:11px; }
.studio-canvas { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1344/768; max-height:calc(100dvh - 330px); min-height:250px; overflow:hidden; background:#e6e9e9; }
.studio-canvas.is-dark { background:#172126; }
.studio-canvas > img { display:block; width:100%; height:100%; min-height:0; object-fit:contain; }
.studio-canvas > img.is-example { object-fit:cover; }
.studio-canvas.is-logo > img { padding:48px; }
.studio-canvas-label { position:absolute; bottom:14px; left:14px; right:14px; justify-self:start; padding:6px 9px; border:1px solid rgba(255,255,255,.2); border-radius:5px; background:rgba(10,21,25,.9); color:#e0edf1; font-size:10px; line-height:1.4; }
.studio-canvas-empty { padding:30px; text-align:center; color:#385461; }
.studio-canvas-empty > svg { width:36px; height:36px; margin-bottom:15px; stroke-width:1.2; }
.studio-canvas-empty h3 { margin:0 0 10px; font-size:clamp(20px,2.3vw,30px); font-weight:400; letter-spacing:-.03em; color:#1b3846; }
.studio-canvas-empty p { margin:0; font-size:12px; line-height:1.8; }
.studio-canvas.is-dark .studio-canvas-empty { color:#b1c5ce; }
.studio-canvas.is-dark .studio-canvas-empty h3 { color:#e0edf3; }
.studio-preview-caption { display:flex; justify-content:space-between; align-items:start; gap:20px; padding:22px; }
.studio-preview-caption strong { font-size:15px; color:#e3eff3; font-weight:500; }
.studio-preview-caption p { margin:7px 0 0; max-width:58ch; color:#a9bdc6; font-size:12px; line-height:1.65; }
.studio-preview-caption .studio-text-button { flex:none; flex-direction:column; }
.studio-output-note { display:flex; gap:12px; padding:18px 22px; border-top:1px solid #2d3b42; background:#101a1f; }
.studio-output-note svg { width:18px; height:18px; flex:none; color:#97bdcc; }
.studio-output-note p { margin:0; font-size:11px; line-height:1.6; color:#a7bdc7; }
.studio-output-note strong { display:block; color:#c5d9e2; font-weight:500; }
.studio-preview .vgm-result-wrap { padding:20px; }
.studio-preview .vgm-result { min-height:330px; border:0; padding:0; background:transparent; }
.studio-preview .vgm-video { border-radius:7px; }
.studio-preview .vgm-bar { margin:12px 0; }
.studio-library .studio-stage-heading p { margin:5px 0 0; color:#a9bdc6; font-size:11px; }
.studio-library-options { max-height:620px; overflow:auto; padding:18px; scrollbar-color:#557780 #10191d; }
.studio-library-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-top:1px solid #2d3b42; color:#b7cbd4; font-size:12px; }
.studio-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.studio-controls .vgm-creative-mode legend { margin-bottom:12px; }
.studio-logo-treatment { display:grid; gap:8px; padding:15px 0; border-top:1px solid #303d42; border-bottom:1px solid #303d42; }
.studio-logo-treatment strong { font-size:14px; font-weight:500; color:#e3eff3; }
.studio-logo-treatment p { margin:0; color:#aebfc7; font-size:12px; line-height:1.65; }
.studio-logo-treatment span { color:#b6d9e5; font-size:11px; }
.generation-studio > .vgm-preview { display:flex; align-items:start; gap:12px; margin:22px 0 0; }
.generation-studio > .vgm-preview .chip { flex:none; }
.generation-studio > .vgm-preview p { max-width:80ch; line-height:1.6; }
.generation-studio button:focus-visible,.generation-studio summary:focus-visible { outline:2px solid #acd8e3; outline-offset:3px; }
.generation-studio button:disabled { cursor:not-allowed; }
.generation-studio ::selection { background:#426674; color:#fff; }
.generation-studio input,.generation-studio textarea { caret-color:#acd8e3; }
@media (min-width:1200px) { .studio-workspace { grid-template-columns:340px minmax(0,1fr); gap:24px; } }
@media (max-width:960px) { .studio-workspace { grid-template-columns:290px minmax(0,1fr); gap:14px; } .studio-controls { padding:18px; } .studio-format { display:none; } .studio-canvas.is-logo > img { padding:24px; } }
@media (max-width:720px) { .view-vgm .generation-studio { width:calc(100% - 32px); padding-top:calc(var(--nav-top) + var(--nav-h) + 28px); } .studio-header { margin-bottom:20px; } .studio-header h1 { font-size:29px; } .studio-header p { font-size:12px; } .studio-workspace { grid-template-columns:1fr; } .studio-stage-column { position:static; grid-row:1; } .studio-controls { padding:20px; } .studio-stage-heading,.studio-preview-caption,.studio-output-note { padding:16px; } .studio-output-note { display:none; } .studio-preview-caption p { font-size:11px; } .studio-preview-caption strong { font-size:13px; } .studio-canvas-label { bottom:8px; left:8px; right:8px; font-size:9px; } .studio-canvas-empty { padding:18px; } .studio-canvas-empty > svg { margin-bottom:8px; width:24px; height:24px; } .studio-canvas-empty h3 { font-size:22px; } .studio-canvas-empty p { font-size:11px; } .studio-library-options { max-height:430px; } .generation-studio > .vgm-preview { flex-direction:column; } }
.vgm-creative-mode,
.vgm-preset-picker { min-width:0; padding:0; margin:0; border:0; }
.vgm-creative-mode legend,
.vgm-preset-picker legend { padding:0; margin-bottom:10px; color:var(--ink); font-size:13px; font-weight:600; }
.vgm-mode-options { display:flex; gap:8px; flex-wrap:wrap; }
.vgm-mode-options label { display:flex; align-items:center; gap:8px; min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:9px; color:#b7c1c3; cursor:pointer; font-size:13px; }
.vgm-mode-options label:has(:checked) { border-color:var(--accent); background:#18262a; color:#eef5f7; }
.vgm-mode-options input,
.vgm-preset-option input { flex:none; width:15px; height:15px; margin:0; accent-color:var(--accent); }
.vgm-mode-options label:focus-within,
.vgm-preset-glow:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.vgm-preset-help { display:block; margin:0 0 10px; color:#aebbbf; font-size:12px; line-height:1.5; font-weight:400; letter-spacing:normal; }
.vgm-preset-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.vgm-preset-glow { min-width:0; width:100%; height:144px; }
.vgm-preset-glow > .border-glow-inner { height:100%; overflow:hidden; border-radius:inherit; }
.vgm-preset-glow:has(:checked) { outline:2px solid var(--accent); outline-offset:2px; }
.vgm-preset-option { position:relative; display:grid; grid-template-columns:42% minmax(0,1fr); align-items:center; width:100%; height:100%; overflow:hidden; border-radius:13px; background:linear-gradient(135deg,#192b30,#0d1315 85%); cursor:pointer; }
.vgm-preset-option:has(:checked) { background:linear-gradient(135deg,#274049,#142329 85%); }
.vgm-preset-option input { position:absolute; top:11px; right:11px; z-index:1; }
.vgm-preset-image { display:grid; place-items:center; align-self:stretch; overflow:hidden; background:#fff; }
.vgm-preset-image img { display:block; width:100%; height:100%; object-fit:cover; }
.vgm-preset-option .vgm-preset-copy { padding:28px 12px 16px; }
.vgm-mode-options label:hover { border-color:#78939a; }
.vgm-preset-copy { display:grid; gap:4px; min-width:0; overflow-wrap:anywhere; }
.vgm-preset-copy strong { color:var(--ink); font-size:12.5px; font-weight:500; line-height:1.35; }
.vgm-preset-copy > span { color:#aebbbf; font-size:11.5px; line-height:1.35; }
.vgm-preset-selected { padding:4px 0; }
.vgm-preset-selected strong { color:var(--ink); font-size:14px; font-weight:500; }
.vgm-preset-selected p { margin:5px 0 0; color:#aebbbf; font-size:12.5px; line-height:1.5; }
.vgm-prompt-preview { padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.vgm-prompt-preview summary { padding:4px 0; color:var(--accent); font-size:13px; cursor:pointer; }
.vgm-prompt-preview summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.vgm-prompt-preview p { margin:14px 0; color:#c2cccf; font-size:12.5px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.vgm-creative-mode:disabled label,
.vgm-preset-picker:disabled label { cursor:default; opacity:.65; }
@media (max-width:420px) { .vgm-preset-options { grid-template-columns:1fr; } }
.platform-page { position:relative; z-index:10; width:min(1440px,calc(100% - 48px)); margin:0 auto; padding:calc(var(--nav-h) + 40px) 0 60px; color:#b5bfc2; font-family:'Manrope Variable',-apple-system,BlinkMacSystemFont,sans-serif; }
.platform-page h1,.platform-page h2,.platform-page h3,.platform-page b { color:var(--ink); }
.platform-page h1 { margin:12px 0 7px; font-size:30px; line-height:1.2; letter-spacing:-.025em; font-weight:600; }
.platform-page h2 { margin:0; font-size:20px; font-weight:600; }
.platform-page h3 { margin:0; font-size:15px; font-weight:650; }
.platform-page p { max-width:70ch; margin:6px 0 0; line-height:1.6; }
.platform-page small { display:block; color:#a4b1b5; font-size:12px; line-height:1.5; }
.platform-page a { color:var(--accent-light); text-decoration:none; text-underline-offset:4px; }
.platform-page a:hover { text-decoration:underline; }
.platform-page button { display:inline-flex; min-height:38px; justify-content:center; align-items:center; gap:7px; padding:7px 12px; border:1px solid #394447; border-radius:6px; background:#182022; color:#e5edef; font:550 12px/1.4 inherit; white-space:nowrap; transition:background .15s,border-color .15s; }
.platform-page button:hover:not(:disabled) { background:#243034; border-color:#6c929b; }
.platform-page button:disabled,.platform-page input:disabled,.platform-page select:disabled { cursor:not-allowed; opacity:.5; }
.platform-page button.platform-primary { background:var(--accent); color:#0c2025; border-color:var(--accent); font-weight:700; }
.platform-page button.platform-primary:hover:not(:disabled) { background:var(--accent-light); }
.platform-page input,.platform-page select { min-height:38px; width:100%; min-width:0; padding:8px 10px; color:var(--ink); border:1px solid #394447; border-radius:5px; background:#111719; font:400 13px/1.4 inherit; caret-color:var(--accent); }
.platform-page input::placeholder { color:#a4b1b5; }
.platform-page :is(a,button,input,select):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.platform-page ::selection { color:#fff; background:#344b51; }
.platform-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:25px; }
.platform-back { display:inline-flex; gap:6px; align-items:center; font-size:12px; }
.platform-account { display:flex; align-items:center; gap:13px; font-size:13px; }
.platform-account > span { text-align:right; }
.platform-sandbox { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 18px; border:1px solid #344b51; background:#152227; color:var(--accent-light); font-size:12px; }
.platform-sandbox label { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.platform-sandbox select { width:150px; min-height:32px; font-size:12px; }
.platform-feedback:empty { display:none; }
.platform-feedback p { display:flex; align-items:center; gap:7px; max-width:none; padding:12px 15px; margin:12px 0; border:1px solid #414b4e; }
.platform-error { color:#ffc8c1; background:#271b1b; }
.platform-notice { color:#d6e8ed; background:#17252a; }
.platform-layout { display:grid; grid-template-columns:210px minmax(0,1fr); margin-top:24px; border:1px solid #293235; background:rgba(12,16,17,.97); min-height:600px; }
.platform-sidebar { padding:18px 12px; border-right:1px solid #293235; background:#0e1315; }
.platform-sidebar nav { display:grid; gap:4px; }
.platform-sidebar nav button { width:100%; justify-content:flex-start; gap:10px; padding:11px 12px; border-color:transparent; background:transparent; color:#b5bfc2; }
.platform-sidebar nav button[aria-current] { background:#24373d; color:var(--accent-light); }
.platform-access-note { margin:40px 8px 0; padding-top:22px; border-top:1px solid #293235; font-size:12px; }
.platform-access-note > svg { color:var(--accent); display:block; margin-bottom:12px; }
.platform-access-note p { margin-top:7px; }
.platform-access-note a { display:inline-flex; align-items:center; gap:5px; margin-top:18px; }
.platform-content { min-width:0; padding:28px; }
.platform-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.platform-section-head > input { width:210px; }
.platform-section-head p { font-size:13px; }
.platform-workspace-tabs { display:flex; gap:8px; flex-wrap:wrap; padding-bottom:24px; margin-bottom:26px; border-bottom:1px solid #293235; }
.platform-workspace-tabs button { display:grid; gap:3px; text-align:left; justify-content:start; padding:12px 16px; white-space:normal; }
.platform-workspace-tabs button.selected { background:#253a40; border-color:var(--accent); }
.platform-workspace-tabs small { font-size:11px; }
.platform-form-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; padding:16px 0 22px; }
.platform-page label { font-size:12px; color:#c3ced1; }
.platform-form-row label { display:grid; gap:7px; flex:1 1 140px; }
.platform-form-row label:first-child { flex-basis:200px; }
.platform-form-row label input[type=number] { max-width:180px; }
.platform-page h3.platform-subhead { margin:32px 0 13px; }
.platform-table-wrap { width:100%; overflow-x:auto; scrollbar-color:#41545a #101617; }
.platform-page table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
.platform-page th { padding:10px 12px; color:#b6c2c5; background:#151c1f; font-size:11px; font-weight:600; }
.platform-page td { padding:15px 12px; border-bottom:1px solid #293235; }
.platform-page td b { display:block; font-weight:550; }
.platform-page td select { min-width:135px; }
.platform-table-empty { padding:20px 12px; }
.platform-help { font-size:12px; margin-bottom:16px!important; color:#b1bec2; }
.platform-module-list { margin-top:16px; }
.platform-module-list label { display:flex; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid #293235; }
.platform-module-list input { width:16px; min-height:16px; accent-color:var(--accent); flex:none; }
.platform-module-list label span { flex:1; }
.platform-module-list em { font-style:normal; font-size:11px; color:#b6c2c5; }
.platform-role-list article { display:grid; grid-template-columns:165px 1fr; gap:24px; padding:22px 0; border-bottom:1px solid #293235; }
.platform-role-list p { margin:0; font-size:13px; }
.platform-boundary { display:flex; align-items:flex-start; gap:12px; border-top:1px solid #41545a; margin-top:28px; padding-top:22px; font-size:12px; }
.platform-boundary svg { flex:none; color:var(--accent); margin-top:5px; }
.platform-billing-banner { display:flex; gap:12px; align-items:center; padding-bottom:24px; border-bottom:1px solid #293235; }
.platform-billing-banner svg { color:var(--accent); }
.platform-plans { display:grid; grid-template-columns:1fr 1fr; }
.platform-plans article { padding:28px 24px 28px 0; }
.platform-plans article + article { padding-left:28px; border-left:1px solid #293235; }
.platform-plans p { font-size:13px; }
.platform-price { display:flex; align-items:baseline; gap:9px; margin:24px 0 4px; }
.platform-price strong { color:var(--ink); font-size:36px; font-weight:550; letter-spacing:-.035em; }
.platform-price span { font-size:12px; }
.platform-owner-entitlement { display:flex; gap:10px; align-items:center; padding:14px 0; color:var(--accent-light); font-size:13px; }
.platform-owner-entitlement svg { flex:none; }
.platform-billing-form { border-top:1px solid #293235; margin:18px 0; padding:24px 0; }
.platform-estimate { font-variant-numeric:tabular-nums; }
.platform-invites,.platform-activity { padding:0; margin:0; list-style:none; }
.platform-invites li,.platform-activity li { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid #293235; }
.platform-activity li b { font-size:13px; font-weight:550; text-transform:capitalize; }
.platform-activity li small { overflow-wrap:anywhere; }
.platform-activity time { flex:none; font-size:11px; color:#a4b1b5; font-variant-numeric:tabular-nums; }
.platform-link { display:grid; gap:8px; }
.platform-link input { font-family:ui-monospace,monospace; font-size:11px; }
.platform-link button { justify-self:start; }
.platform-empty,.platform-signin,.platform-loading { padding:36px; margin:30px auto; max-width:600px; border:1px solid #344145; background:#0f1517; }
.platform-empty > svg,.platform-signin > svg { color:var(--accent); margin-bottom:18px; }
.platform-signin form { display:grid; gap:18px; margin:24px 0; }
.platform-signin label { display:grid; gap:8px; }
.platform-signin > button,.platform-empty > button { margin:24px 0; }
.platform-signin > small { margin-top:22px; }
.platform-signin h2,.platform-empty h2 { font-size:24px; }
@media (max-width:980px) { .platform-layout { grid-template-columns:180px minmax(0,1fr); }.platform-content { padding:22px; }.platform-role-list article { grid-template-columns:1fr; gap:8px; }.platform-page { width:calc(100% - 32px); } }
@media (max-width:680px) { .platform-page { padding-top:calc(var(--nav-h) + 24px); }.platform-header { align-items:flex-start; flex-direction:column; gap:18px; }.platform-account { width:100%; justify-content:space-between; }.platform-account > span { text-align:left; }.platform-page h1 { font-size:26px; }.platform-layout { display:block; margin-top:16px; }.platform-sidebar { border-right:0; border-bottom:1px solid #293235; padding:10px; }.platform-sidebar nav { display:flex; flex-wrap:wrap; gap:4px; }.platform-sidebar nav button { width:auto; padding:9px; font-size:11px; }.platform-access-note { display:none; }.platform-content { padding:18px; }.platform-sandbox { flex-direction:column; align-items:flex-start; gap:12px; padding:13px; }.platform-section-head { flex-wrap:wrap; }.platform-section-head > input { width:100%; }.platform-plans { grid-template-columns:1fr; }.platform-plans article + article { padding:24px 0; border-left:0; border-top:1px solid #293235; }.platform-activity li { flex-direction:column; align-items:flex-start; gap:6px; }.platform-signin,.platform-empty { padding:24px; }.platform-workspace-tabs { display:grid; grid-template-columns:1fr; }.platform-form-row label { flex-basis:100%; }.platform-page td,.platform-page th { padding:12px 8px; } }
.account-page { max-width:1080px; }
.account-auth-page { display:grid; place-items:center; min-height:100svh; padding-top:calc(var(--nav-h) + 32px); padding-bottom:32px; }
.account-auth-wrap { width:min(100%,460px); }
.account-auth-back { display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; font-size:12px; }
.account-auth-panel { padding:32px; border:1px solid #354449; border-radius:18px; background:linear-gradient(150deg,rgba(39,53,58,.93),rgba(14,19,21,.98) 55%); box-shadow:0 20px 64px rgba(0,0,0,.24); }
.account-auth-modes { display:flex; gap:24px; border-bottom:1px solid #354449; margin-bottom:28px; }
.platform-page .account-auth-modes button { min-height:44px; padding:0 0 13px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:#b5bfc2; font:600 13px/1.4 'Manrope Variable',sans-serif; }
.platform-page .account-auth-modes button[aria-pressed=true] { color:var(--ink); border-bottom-color:var(--accent); }
.platform-page .account-auth-modes button:hover { background:transparent; color:var(--accent-light); }
.account-auth-panel header { margin-bottom:28px; }
.platform-page .account-auth-panel h1 { font-size:32px; margin:0 0 10px; line-height:1.15; letter-spacing:-.035em; text-wrap:balance; }
.account-auth-panel header p { font-size:14px; color:#b9c8cd; }
.account-auth-panel form { display:grid; gap:20px; }
.account-auth-panel label { display:grid; gap:9px; font-size:13px; font-weight:550; color:#d6e8ed; }
.platform-page .account-auth-panel input { min-height:48px; padding:12px 14px; border-radius:8px; background:rgba(9,15,17,.6); border-color:#495c63; font:400 16px/1.4 'Manrope Variable',sans-serif; }
.account-auth-panel input:hover { border-color:#7b969f; }
.account-auth-panel input:autofill { box-shadow:0 0 0 1000px #152024 inset; -webkit-text-fill-color:#e5edef; }
.account-auth-password { display:grid; gap:9px; }
.account-auth-password > div { position:relative; }
.platform-page .account-auth-password input { padding-right:52px; }
.platform-page .account-auth-password button { position:absolute; right:4px; top:4px; min-height:40px; width:40px; border:0; background:transparent; color:#b9c8cd; padding:0; }
.platform-page .account-auth-password button:hover { background:#233337; color:#fff; }
.platform-page button.account-auth-submit { width:100%; min-height:48px; margin-top:4px; display:flex; justify-content:space-between; padding:12px 16px; border:1px solid var(--accent); border-radius:8px; background:var(--accent); color:#102126; font:700 14px/1.4 'Manrope Variable',sans-serif; }
.platform-page button.account-auth-submit:hover:not(:disabled) { background:var(--accent-light); border-color:var(--accent-light); }
.platform-page button.account-auth-submit:disabled { opacity:1; background:#344b51; border-color:#4c666e; color:#c2d4da; }
.platform-page .account-auth-preview-note { margin-top:-8px; color:#b9c8cd; }
.platform-page .account-auth-error { padding:12px; border:1px solid #80504b; border-radius:6px; background:#271b1b; color:#ffc8c1; font-size:13px; }
.account-auth-help { margin-top:24px; font-size:12px; }
.account-auth-help summary,.account-auth-testing summary { cursor:pointer; color:#d6e8ed; width:fit-content; }
.account-auth-help summary:focus-visible,.account-auth-testing summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.account-auth-help p { padding-top:8px; font-size:12px; }
.platform-page .account-auth-free { margin:22px 0; text-align:center; font-size:12px; }
.account-auth-free a { display:inline-flex; align-items:center; gap:5px; margin-left:5px; }
.account-auth-testing { border-top:1px solid #354449; padding-top:18px; font-size:12px; }
.account-auth-testing p { margin:12px 0; }
.account-auth-testing .account-actions { flex-wrap:wrap; }
@media(max-width:480px) { .account-auth-panel { padding:24px; border-radius:14px; }.platform-page .account-auth-panel h1 { font-size:29px; }.account-auth-page { padding-top:calc(var(--nav-h) + 22px); place-items:start center; }.account-auth-back { margin-bottom:18px; } }
.account-workspace,.account-credit-section { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:28px 0; border-bottom:1px solid #394447; }
.account-workspace label { display:grid; gap:8px; min-width:250px; font-size:13px; }
.account-actions { display:flex; gap:10px; }
.account-purchase,.account-usage { padding:28px 0; }
.account-purchase > button { margin:16px 10px 0 0; }
.account-usage ul { list-style:none; padding:0; }
.account-usage li { display:flex; gap:20px; padding:14px 0; border-bottom:1px solid #293235; }
.account-usage li time { margin-left:auto; }
.account-generations { padding:28px 0; border-top:1px solid #394447; }
.account-generation-list { list-style:none; padding:0; margin:0 0 20px; }
.account-generation-list li { display:flex; align-items:center; gap:24px; padding:18px 0; border-bottom:1px solid #293235; font-size:14px; }
.account-generation-list li > div { flex:1; min-width:0; }
.account-generation-list b,.account-generation-list time { display:block; }
.account-generation-list time { margin-top:5px; color:#b1bec2; font-size:12px; font-variant-numeric:tabular-nums; }
.account-generation-list li > span { font-variant-numeric:tabular-nums; }
.account-generation-list a { flex:none; }
.platform-invites li > span { min-width:0; overflow-wrap:anywhere; }
.platform-invites li > button { flex:none; }
.platform-invitation-section .platform-link label { display:grid; gap:8px; }
.platform-invitation-section .platform-link p:empty { display:none; }
@media(max-width:680px) { .account-generation-list li { align-items:flex-start; flex-wrap:wrap; gap:12px; }.account-generation-list li > div { flex-basis:100%; }.platform-invitation-section input,.platform-invitation-section select,.platform-signin input { font-size:16px; } }
.account-sandbox { margin:24px 0; padding:16px 0; border-block:1px solid #394447; }
.platform-page button.account-text-button { border:0; background:none; margin:18px 0; padding:0; color:var(--accent-light); }
.account-protected { display:contents; }
.studio-access-page { min-height:100svh; display:grid; place-items:center; padding-bottom:48px; }
.studio-access { width:min(100%,660px); padding:clamp(28px,5vw,56px); border:1px solid rgba(125,178,191,.24); border-radius:20px; background:linear-gradient(145deg,rgba(52,75,81,.42),rgba(15,20,22,.94) 65%); box-shadow:0 24px 80px rgba(0,0,0,.2); }
.studio-access-symbol { display:block; color:var(--accent); margin-bottom:30px; }
.platform-page .studio-access h1 { margin:0 0 18px; font-size:clamp(32px,4vw,46px); font-weight:600; line-height:1.12; letter-spacing:-.035em; text-wrap:balance; }
.platform-page .studio-access-description { color:var(--accent-light); font-size:17px; line-height:1.65; max-width:46ch; }
.platform-page .studio-access-guidance { margin-top:18px; color:#b5bfc2; font-size:14px; max-width:48ch; }
.platform-page .studio-access-primary { display:inline-flex; align-items:center; justify-content:center; gap:32px; min-height:48px; padding:12px 20px; margin-top:30px; border:1px solid var(--accent); border-radius:8px; background:var(--accent); color:#102126; font-size:14px; font-weight:700; text-decoration:none; transition:background .15s,border-color .15s; }
.platform-page .studio-access-primary:hover { background:var(--accent-light); border-color:var(--accent-light); text-decoration:none; }
.platform-page .studio-access-signin { margin-top:18px; font-size:13px; }
.studio-access-signin a { margin-left:4px; text-decoration:underline; }
.studio-access footer { margin-top:34px; padding-top:22px; border-top:1px solid rgba(125,178,191,.18); font-size:12px; line-height:1.8; }
.studio-access footer a { display:inline-flex; align-items:center; gap:6px; margin-left:6px; }
@media(max-width:480px) { .studio-access-page { place-items:start center; padding-bottom:24px; }.studio-access { border-radius:14px; }.studio-access-symbol { margin-bottom:24px; }.studio-access-primary { width:100%; }.studio-access footer a { margin-left:0; display:flex; } }
@media(max-width:640px) { .account-workspace,.account-credit-section { align-items:stretch; flex-direction:column; } .account-actions { flex-wrap:wrap; } .account-usage li { flex-wrap:wrap; gap:10px; } }

.trial-credits td { font-variant-numeric:tabular-nums; }
.trial-credits td:first-child { overflow-wrap:anywhere; }
.trial-caption { text-align:left; padding:0 0 12px; font-size:13px; }
.trial-credits details { margin-top:12px; }
.trial-credits summary { cursor:pointer; color:var(--ink); padding:10px 0; }
.trial-credits summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#home.home-page { display:block; width:100%; max-width:none; padding:0; margin:0; font-family:'Manrope Variable',sans-serif; color:#b9c8cd; }
#home.home-page > :not(.home-reel-runway) { width:min(1240px,calc(100% - 80px)); margin-inline:auto; }
.home-reel-runway { position:relative; width:100%; min-height:250svh; }
.home-reel-sticky { position:sticky; top:var(--nav-h); height:calc(100svh - var(--nav-h)); min-height:560px; overflow:hidden; isolation:isolate; background:rgba(8,11,12,.65); }
.home-cinema { position:absolute; inset:0; overflow:hidden; opacity:var(--reel-opacity,1); }
.home-filmstrip { position:absolute; left:44%; top:3%; width:160%; height:88%; display:flex; gap:30px; transform-origin:30% 50%; }
.home-film-frame { position:relative; flex:0 0 31%; height:100%; overflow:hidden; border-radius:8px; background:#243338; box-shadow:0 24px 75px rgba(0,0,0,.4); }
.home-film-frame:nth-child(even) { transform:translateY(11%); }
.home-film-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.home-film-artwork { background:transparent; border-radius:0; box-shadow:none; }
.home-film-artwork img { object-fit:contain; }
.home-film-shine-mask { position:absolute; inset:0; pointer-events:none; mask-mode:alpha; mask-size:contain; mask-position:center; mask-repeat:no-repeat; -webkit-mask-size:contain; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; }
.home-film-reflection { position:absolute; inset:0; background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.22) 48%,transparent 70%); transform:translateX(-110%); }
.is-running .home-film-reflection { animation:home-cinematic-light 4.5s cubic-bezier(.16,1,.3,1) infinite; }
.is-running .frame-1 .home-film-reflection { animation-delay:1.5s; }
.home-cinema-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#090d0f 2%,rgba(9,13,15,.94) 22%,rgba(9,13,15,.1) 60%,transparent),linear-gradient(0deg,#090d0f,transparent 35%); }
.home-reel-title { position:absolute; top:14%; left:max(40px,calc((100vw - 1240px) / 2)); width:60%; opacity:var(--title-opacity,1); }
#home.home-page .home-reel-title h1 { font-size:clamp(76px,9.2vw,132px); font-weight:550; line-height:.97; letter-spacing:-.04em; margin:0 0 30px; color:#f0f3f3; }
#home.home-page .home-reel-title p { font-size:18px; line-height:1.6; color:#cedde2; }
.home-reel-flow { position:absolute; inset:9% 5% 19%; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; opacity:var(--flow-opacity,0); }
.home-reel-flow > strong { color:#eef3f4; text-align:center; font-size:clamp(38px,6vw,80px); line-height:1.08; font-weight:550; letter-spacing:-.04em; }
.home-reel-flow > strong span { color:var(--accent); }
.home-reel-flow svg { width:min(100%,1000px); height:auto; max-height:300px; margin-top:28px; }
.home-reel-bottom { position:absolute; bottom:8%; left:max(40px,calc((100vw - 1240px) / 2)); right:max(40px,calc((100vw - 1240px) / 2)); display:flex; align-items:center; gap:32px; }
.home-reel-bottom .home-actions { margin:0; justify-content:flex-start; }
.home-reel-bottom .home-scroll { margin:0; }
.home-reel-bottom > small { margin-left:auto; color:#a5bcc5; font-size:10px; }
.home-reel-progress { position:absolute; bottom:0; left:0; width:100%; height:2px; background:#7db2bf; transform-origin:0 50%; }
.home-reel-runway.is-still { min-height:auto; }.is-still .home-reel-sticky { position:relative; top:auto; margin-top:var(--nav-h); }
@keyframes home-cinematic-light { 0%,15% { transform:translateX(-110%); } 60%,100% { transform:translateX(110%); } }
@media(max-width:900px) { .home-reel-title { left:24px; }.home-reel-bottom { left:24px; right:24px; gap:14px; }.home-reel-bottom > small { display:none; }.home-reel-bottom .home-actions a { padding:12px 16px; gap:15px; }.home-filmstrip { left:42%; width:200%; }.home-cinema-shade { background:linear-gradient(90deg,rgba(9,13,15,.96),rgba(9,13,15,.75) 30%,transparent 80%),linear-gradient(0deg,#090d0f,transparent 45%); } }
@media(max-width:600px) { .home-reel-runway { min-height:210svh; }.home-reel-sticky { min-height:580px; }.home-reel-title { top:10%; left:24px; width:85%; }#home.home-page .home-reel-title h1 { font-size:clamp(64px,17vw,98px); }#home.home-page .home-reel-title p { font-size:15px; }.home-filmstrip { left:33%; top:21%; width:290%; height:66%; gap:18px; }.home-film-frame { flex-basis:28%; }.home-cinema-shade { background:linear-gradient(90deg,rgba(9,13,15,.87),transparent 95%),linear-gradient(0deg,#090d0f,transparent 65%); }.home-reel-bottom { bottom:6%; left:20px; right:20px; flex-wrap:wrap; gap:15px; }.home-reel-bottom .home-actions { width:100%; flex-direction:row; max-width:none; gap:8px; }.home-reel-bottom .home-actions a { flex:1; justify-content:space-between; font-size:12px; min-height:46px; }.home-reel-bottom .home-scroll { padding:0; min-height:30px; }.home-reel-flow { inset:15% 4% 22%; }.home-reel-flow svg { margin-top:40px; width:135%; max-width:none; }.home-reel-flow svg text { font-size:15px; }.home-reel-flow svg text:nth-child(-n+4) { display:none; }.home-reel-flow > strong { font-size:40px; } }
@media(prefers-reduced-motion:reduce) { .home-reel-runway { min-height:auto; }.home-reel-sticky { position:relative; top:auto; margin-top:var(--nav-h); }.home-film-reflection { display:none; } }
#home.home-page h1,#home.home-page h2,#home.home-page h3 { color:var(--ink); font-family:inherit; letter-spacing:-.04em; font-weight:550; }
#home.home-page h1 { font-size:clamp(40px,6.2vw,86px); line-height:1.07; margin:0 0 28px; }
#home.home-page h1 span { color:var(--accent); }
#home.home-page h2 { font-size:clamp(30px,4.1vw,56px); line-height:1.12; margin:0; text-wrap:balance; }
#home.home-page h3 { font-size:24px; line-height:1.3; margin:0; letter-spacing:-.025em; }
#home.home-page p { font-size:16px; line-height:1.75; color:#b9c8cd; margin:0; max-width:56ch; }
#home.home-page a { color:var(--accent-light); text-decoration:none; }
#home.home-page :is(a,button,summary):focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
#home.home-page ::selection { background:var(--accent-deep); color:#fff; }
.home-hero { min-height:min(860px,100svh); padding:calc(var(--nav-h) + 105px) 0 70px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
#home.home-page .home-hero > p { font-size:18px; max-width:650px; }
.home-actions { display:flex; justify-content:center; gap:14px; margin-top:36px; flex-wrap:wrap; }
.home-actions a { display:inline-flex; align-items:center; gap:28px; min-height:50px; padding:13px 20px; border-radius:8px; font-size:14px; font-weight:650; transition:background .18s,color .18s,border-color .18s; }
#home.home-page .home-primary { background:var(--accent); color:#102126; border:1px solid var(--accent); }
#home.home-page .home-primary:hover { background:var(--accent-light); }
.home-secondary { border:1px solid #495b61; background:rgba(22,29,32,.6); }
.home-secondary:hover { border-color:var(--accent); background:#243337; }
#home.home-page .home-hero-note { font-size:12px; margin-top:20px; color:#a3b5bb; }
.home-scroll { display:flex; align-items:center; gap:8px; border:0; padding:12px; margin-top:54px; background:transparent; color:#b9c8cd; font:500 12px/1.5 inherit; }
.home-scroll:hover { color:var(--accent-light); }
.home-section-head { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:44px; }
#home.home-page .home-section-head > p { max-width:38ch; font-size:15px; }
.home-sequence { position:relative; min-height:155svh; padding-top:40px; }
.home-sequence-sticky { position:sticky; top:calc(var(--nav-h) + 30px); padding-bottom:32px; }
#home-sequence-title { scroll-margin-top:calc(var(--nav-h) + 35px); }
.home-storyboard { position:relative; width:100%; aspect-ratio:2.4; min-height:360px; overflow:hidden; isolation:isolate; background:linear-gradient(130deg,rgba(52,75,81,.36),rgba(13,18,20,.96) 55%); border:1px solid #354449; border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.2); }
.home-storyboard-bar { position:absolute; inset:0 0 auto; height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid rgba(125,178,191,.16); color:#b9c8cd; font-size:11px; }
.home-storyboard-bar > span:first-child { display:flex; gap:8px; align-items:center; }
.home-story-wires { position:absolute; inset:44px 0 0; width:100%; height:calc(100% - 44px); fill:none; stroke:#354449; stroke-width:2; }
.home-story-wires path:last-child { stroke:#9dc6d1; }
.home-story-product { position:absolute; left:8%; top:19%; width:33%; max-width:330px; background:#20282b; border:1px solid #566269; border-radius:12px; overflow:hidden; box-shadow:0 14px 35px rgba(0,0,0,.35); }
.home-story-media { aspect-ratio:1.8; overflow:hidden; }
.home-story-media img { width:100%; height:100%; object-fit:cover; display:block; }
.home-story-caption { display:flex; gap:10px; align-items:center; padding:14px; font-size:13px; color:#edf0f2; }
.home-story-caption small { display:block; color:#b9c8cd; font-size:11px; margin-top:3px; }
.home-story-logo { position:absolute; right:8%; top:19%; width:27%; height:53%; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding-top:20px; background:linear-gradient(145deg,#27363b,#11181a); border:1px solid #526971; border-radius:12px; }
.home-story-logo > svg { color:var(--accent); }
.home-story-logo strong { font-size:clamp(15px,2vw,28px); letter-spacing:.12em; font-weight:650; color:#e7f2f5; text-align:center; }
.home-story-logo strong span { display:block; font-size:8px; letter-spacing:.24em; margin-top:10px; color:#adc4cc; }
.home-story-output { position:absolute; bottom:7%; left:40%; display:flex; align-items:center; gap:14px; padding:16px 20px; background:#d6e8ed; border-radius:9px; color:#243b42; box-shadow:0 12px 30px rgba(0,0,0,.25); }
.home-story-output strong { display:block; font-size:14px; font-weight:700; }
.home-story-output span { display:block; font-size:11px; margin-top:3px; }
.home-inline-link { display:inline-flex; align-items:center; gap:12px; font-size:14px; font-weight:600; padding-block:10px; text-underline-offset:5px; }
.home-inline-link:hover { text-decoration:underline!important; }
.home-sequence-sticky > .home-inline-link { margin-top:14px; }
.home-tools { padding:60px 0 100px; }
.home-tool-list > a { display:grid; grid-template-columns:40px minmax(190px,.7fr) minmax(0,1fr) 24px; align-items:center; gap:24px; padding:32px 4px; border-top:1px solid #354449; transition:background .18s; }
.home-tool-list > a:last-child { border-bottom:1px solid #354449; }
.home-tool-list > a:hover { background:rgba(125,178,191,.06); }
#home.home-page .home-tool-list p { font-size:14px; }
.home-components { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding:80px 0 140px; }
.home-components-type { position:relative; display:flex; justify-content:center; align-items:center; gap:40px; min-height:250px; color:#d6e8ed; border-block:1px solid #354449; overflow:hidden; }
.home-components-type > span:first-child { font-size:120px; line-height:1; letter-spacing:-.065em; font-weight:500; }
.home-component-line { position:absolute; bottom:35px; width:65%; height:1px; background:linear-gradient(90deg,transparent,#7db2bf,transparent); }
#home.home-page .home-components p { margin:24px 0 18px; }
.home-business { padding:70px 0 100px; border-top:1px solid #354449; }
.home-business-layout { display:grid; grid-template-columns:1fr 1fr; gap:100px; margin-top:64px; }
#home.home-page .home-business-copy p { margin:20px 0; font-size:15px; }
.home-business-copy > small { display:block; font-size:11px; color:#a3b5bb; margin-top:16px; }
.home-departments details { border-bottom:1px solid #354449; }
.home-departments details:first-child { border-top:1px solid #354449; }
.home-departments summary { cursor:pointer; display:flex; align-items:center; gap:14px; padding:24px 0; color:#edf0f2; font-size:20px; list-style:none; }
.home-departments summary::-webkit-details-marker { display:none; }
.home-departments summary small { margin-left:auto; font-size:11px; color:#b9c8cd; }
.home-detail-plus { font-size:24px; font-weight:300; transition:transform .15s; }
.home-departments details[open] .home-detail-plus { transform:rotate(45deg); }
#home.home-page .home-departments p { font-size:14px; padding:0 0 24px; }
.home-community { padding:100px 0 110px; text-align:center; border-top:1px solid #354449; }
.home-community > svg { margin-bottom:28px; color:var(--accent); }
#home.home-page .home-community p { margin:24px auto 16px; }
.home-community > small { display:block; font-size:11px; margin-top:16px; color:#a3b5bb; }
.home-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid #354449; padding:28px 0; font-size:12px; }
.home-footer nav { display:flex; gap:22px; }
.home-faq { display:grid; grid-template-columns:1fr; justify-items:center; gap:48px; padding:80px 0 110px; border-top:1px solid #354449; }
#home.home-page .home-faq > h2 { text-align:center; font-size:clamp(48px,6vw,72px); }
.home-faq-list { width:min(100%,800px); }
.home-faq-list details { border-bottom:1px solid #354449; }
.home-faq-list summary { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 0; list-style:none; cursor:pointer; color:#edf0f2; font-size:16px; font-weight:550; }
.home-faq-list summary::-webkit-details-marker { display:none; }
.home-faq-list summary svg { flex-shrink:0; color:var(--accent); transition:transform .2s; }
.home-faq-list details[open] summary svg { transform:rotate(45deg); }
#home.home-page .home-faq-list p { padding:0 28px 24px 0; font-size:14px; }
.home-sequence.is-still { min-height:auto; padding-bottom:50px; }
.is-still .home-sequence-sticky { position:relative; top:auto; }
@media(max-width:900px) { #home.home-page { width:calc(100% - 40px); }.home-hero { min-height:85svh; padding-top:calc(var(--nav-h) + 75px); }.home-section-head { align-items:start; flex-direction:column; gap:22px; }.home-storyboard { min-height:350px; }.home-tool-list > a { grid-template-columns:30px 1fr 24px; gap:18px; }.home-tool-list p { grid-column:2; grid-row:2; }.home-tool-list > a > svg:last-child { grid-column:3; grid-row:1 / 3; }.home-components { gap:36px; }.home-business-layout { gap:40px; }.home-story-logo { right:6%; width:29%; }.home-story-product { left:6%; width:37%; }.home-story-output { left:34%; }.home-story-logo strong { font-size:18px; } }
@media(max-width:600px) { #home.home-page { width:calc(100% - 32px); }.home-hero { padding:calc(var(--nav-h) + 62px) 0 45px; min-height:85svh; }#home.home-page h1 { font-size:clamp(34px,8.8vw,50px); }#home.home-page .home-hero > p { font-size:15px; }.home-actions { flex-direction:column; width:100%; max-width:350px; gap:10px; margin-top:28px; }.home-actions a { justify-content:space-between; }.home-scroll { margin-top:25px; }.home-sequence { min-height:auto; padding-top:44px; }.home-sequence-sticky { position:relative; top:0; padding-bottom:45px; }.home-storyboard { min-height:430px; }.home-story-product { top:17%; left:7%; width:52%; }.home-story-logo { top:43%; right:5%; width:44%; height:37%; }.home-story-logo strong { font-size:16px; }.home-story-logo > svg { width:17px; }.home-story-output { left:5%; right:5%; bottom:4%; padding:12px; gap:10px; }.home-story-output strong { font-size:12px; }.home-story-caption { font-size:11px; padding:10px; }.home-story-caption small { font-size:9px; }.home-section-head { margin-bottom:28px; }.home-tools { padding:35px 0 65px; }.home-tool-list > a { padding:25px 0; }#home.home-page .home-tool-list h3 { font-size:21px; }.home-components { grid-template-columns:1fr; gap:32px; padding:30px 0 75px; }.home-components-type { min-height:175px; }.home-components-type > span:first-child { font-size:96px; }.home-business { padding:55px 0 70px; }.home-business-layout { grid-template-columns:1fr; margin-top:36px; gap:36px; }.home-community { padding:65px 0; }.home-footer { align-items:start; flex-direction:column; gap:18px; } }
.home-page .home-sequence { min-height:170svh; padding-top:var(--nav-h); }
.home-page .home-sequence-sticky { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; top:var(--nav-h); min-height:calc(100svh - var(--nav-h)); padding:40px 0; }
#home.home-page .home-hero-copy h1 { font-size:clamp(48px,5.8vw,80px); }
#home.home-page .home-hero-copy > p { font-size:17px; line-height:1.7; }
#home.home-page .home-hero-copy .home-hero-note { margin-top:20px; font-size:11px; color:#adc2c9; }
.home-hero-copy .home-actions { justify-content:flex-start; gap:10px; margin-top:28px; }
.home-hero-copy .home-actions a { gap:16px; }
.home-hero-copy .home-scroll { padding-left:0; margin-top:35px; }
.home-page .home-storyboard { aspect-ratio:1.12; min-height:420px; border-color:rgba(125,178,191,.18); }
.home-page .home-story-product { top:18%; left:10%; width:48%; max-width:none; }
.home-page .home-story-media { aspect-ratio:1.1; position:relative; }
.home-page .home-story-logo { top:37%; right:7%; width:40%; height:37%; }
.home-page .home-story-logo strong { font-size:clamp(13px,1.65vw,22px); }
.home-page .home-story-output { bottom:7%; left:15%; right:10%; padding:15px; }
.home-media-light { position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.3) 48%,transparent 70%); transform:translateX(-100%); pointer-events:none; }
.home-story-wires .home-wire-pulse { stroke:#d6e8ed; stroke-dasharray:24 1300; stroke-dashoffset:0; opacity:0; }
.home-storyboard.is-running .home-wire-pulse { opacity:1; animation:home-wire-travel 7s linear infinite; }
.home-storyboard.is-running .home-media-light { animation:home-light-pass 7s cubic-bezier(.16,1,.3,1) infinite; }
.home-storyboard.is-running .home-story-logo strong { animation:home-brand-focus 7s ease-in-out infinite; }
@keyframes home-wire-travel { to { stroke-dashoffset:-1324; } }
@keyframes home-light-pass { 0%,12% { transform:translateX(-100%); } 42%,100% { transform:translateX(100%); } }
@keyframes home-brand-focus { 0%,35%,100% { opacity:.65; filter:blur(0); } 50%,80% { opacity:1; filter:blur(0); } }
#home-tools-title { scroll-margin-top:calc(var(--nav-h) + 35px); }
@media(max-width:1100px) { .home-page .home-sequence-sticky { gap:26px; grid-template-columns:.9fr 1.1fr; }#home.home-page .home-hero-copy h1 { font-size:clamp(38px,5.2vw,60px); }.home-hero-copy .home-actions a { padding:12px 14px; gap:10px; font-size:12px; }.home-page .home-story-output strong { font-size:12px; }.home-page .home-story-output { left:8%; right:8%; }.home-page .home-story-caption small { font-size:9px; } }
@media(max-width:760px) { .home-page .home-sequence { min-height:auto; }.home-page .home-sequence-sticky { grid-template-columns:1fr; position:relative; top:0; padding:48px 0 55px; gap:36px; }.home-hero-copy { text-align:center; }.home-hero-copy .home-actions { justify-content:center; }.home-hero-copy .home-scroll { margin:22px auto 0; }#home.home-page .home-hero-copy h1 { font-size:clamp(42px,8vw,60px); }.home-page .home-storyboard { width:min(100%,570px); margin:auto; min-height:390px; }.home-page .home-story-logo strong { font-size:20px; }.home-hero-copy .home-actions { width:auto; max-width:none; flex-direction:row; }.home-page .home-story-logo { height:35%; }.home-page .home-story-product { width:45%; }.home-page .home-story-media { aspect-ratio:1.3; } }
@media(prefers-reduced-motion:reduce) { .home-page .home-sequence { min-height:auto; }.home-page .home-sequence-sticky { position:relative; top:auto; }.home-page * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media(max-width:900px) { #home.home-page { width:100%; }#home.home-page > :not(.home-reel-runway) { width:calc(100% - 40px); }.home-faq { gap:36px; } }
@media(max-width:600px) { #home.home-page > :not(.home-reel-runway) { width:calc(100% - 32px); }.home-faq { grid-template-columns:1fr; gap:28px; padding:55px 0 70px; }.home-faq-list summary { font-size:15px; } }
#nav .nav-user-controls { position:relative; z-index:2; margin-left:auto; display:flex; align-items:center; gap:12px; flex:none; font-family:'Manrope Variable',sans-serif; }
#nav .nav-user-controls > a { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:36px; padding:8px 13px; font-size:12px; font-weight:600; text-decoration:none; border-radius:7px; }
#nav .nav-user-controls .nav-auth-create { color:#102126; background:var(--accent); border:1px solid var(--accent); }
#nav .nav-user-controls .nav-auth-create:hover { background:var(--accent-light); }
#nav .nav-user-controls .nav-auth-signin { color:#d6e8ed; background:transparent; padding-inline:4px; }
#nav .nav-user-controls .nav-auth-signin:hover { color:#fff; text-decoration:underline; text-underline-offset:5px; }
#nav .nav-user-controls .cta { position:static; inset:auto; display:flex; flex:none; align-items:center; justify-content:center; gap:9px; width:auto; min-width:0; height:38px; min-height:38px; padding:5px 10px; margin:0; border:1px solid #42555c; border-radius:7px; background:rgba(28,39,43,.7); color:#d6e8ed; font:600 12px/1.1 'Manrope Variable',sans-serif; }
#nav .nav-user-controls .cta:hover,#nav .nav-user-controls .cta[aria-expanded=true] { border-color:#91bdc8; background:#26383f; }
#nav .nav-user-controls .nav-credit-trigger { font-variant-numeric:tabular-nums; text-align:left; }
#nav .nav-user-controls .nav-credit-trigger small { display:block; margin-top:3px; font-size:8px; color:#b7c9d0; font-weight:450; }
#nav .nav-user-controls .nav-profile-trigger { padding:2px 6px 2px 2px; border-color:transparent; background:transparent; }
.nav-avatar { display:grid; place-items:center; flex:none; width:32px; height:32px; border:1px solid #6d8993; border-radius:50%; color:#e8f2f5; background:#344b51; font:650 11px/1 'Manrope Variable',sans-serif; }
.nav-account-popover { position:fixed; z-index:110; right:18px; top:calc(var(--nav-h) + 10px); width:min(350px,calc(100vw - 24px)); max-height:calc(100dvh - var(--nav-h) - 24px); overflow-y:auto; padding:22px; border:1px solid #536a73; border-radius:14px; color:#d6e8ed; background:rgba(21,29,33,.98); box-shadow:0 18px 55px rgba(0,0,0,.4); font:400 13px/1.6 'Manrope Variable',sans-serif; scrollbar-color:#526b74 #151d21; }
.nav-account-popover:focus { outline:none; }
.nav-account-popover :is(a,button):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.nav-account-popover header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.nav-account-popover h2 { margin:0; font-size:17px; color:#edf0f2; font-weight:650; }
.nav-account-popover button,.nav-account-popover a { font:inherit; color:inherit; }
.nav-account-popover header button { display:grid; place-items:center; padding:8px; border:0; border-radius:5px; background:transparent; color:#b7c9d0; }
.nav-account-popover header button:hover { background:#344b51; }
.nav-account-popover p { margin:0; font-size:12px; color:#b7c9d0; }
.nav-account-popover .nav-credit-workspace { overflow-wrap:anywhere; }
.nav-credit-amount { display:flex; align-items:center; gap:12px; margin:18px 0 0; color:var(--accent-light); }
.nav-credit-amount strong { font-size:44px; line-height:1.25; font-weight:550; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.nav-credit-amount svg { color:var(--accent); }
.nav-credit-meter { height:6px; overflow:hidden; border-radius:3px; background:#64717c; margin-top:22px; }
.nav-credit-meter span { display:block; height:100%; background:var(--accent); }
.nav-credit-details { margin:12px 0 16px; display:flex; justify-content:space-between; gap:12px; font-size:11px; }
.nav-credit-details div { display:grid; gap:3px; }.nav-credit-details dd { margin:0; color:#edf0f2; font-size:14px; font-variant-numeric:tabular-nums; }
.nav-credit-details dt { color:#b7c9d0; }.nav-credit-details div:last-child { text-align:right; }
.nav-account-popover .nav-credit-rate { font-size:11px; border-top:1px solid #3b4c54; padding-top:14px; }
.nav-credit-actions { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:22px; }
.nav-credit-actions a,.nav-popover-footer { display:flex; gap:8px; align-items:center; text-decoration:none; font-size:12px!important; }
.nav-credit-actions a:hover,.nav-popover-footer:hover { text-decoration:underline; }
.nav-account-popover .nav-popover-primary { display:flex; gap:12px; align-items:center; min-height:40px; padding:9px 12px; border:1px solid var(--accent); border-radius:6px; background:var(--accent); color:#102126; font-size:12px; font-weight:650; }
.nav-account-popover .nav-popover-primary:hover { background:var(--accent-light); }
.nav-popover-footer { border-top:1px solid #3b4c54; justify-content:space-between; padding-top:16px; margin-top:22px; }
.nav-popover-sandbox { display:block; margin-top:12px; font-size:10px; color:#b7c9d0; }
.nav-topup-note { margin-top:18px; padding-top:16px; border-top:1px solid #3b4c54; }.nav-topup-note strong { display:block; font-size:13px; margin-bottom:5px; }
.nav-profile-identity { display:flex; align-items:center; gap:12px; padding:3px 0 12px; }.nav-profile-identity .nav-avatar { width:42px; height:42px; font-size:13px; }.nav-profile-identity > div { min-width:0; }.nav-profile-identity strong { display:block; font-size:14px; overflow-wrap:anywhere; }.nav-profile-identity span:not(.nav-avatar) { display:block; color:#b7c9d0; font-size:11px; overflow-wrap:anywhere; }
.nav-account-popover .nav-profile-workspace { font-size:11px; padding-bottom:17px; border-bottom:1px solid #3b4c54; }
.nav-account-popover nav { display:grid; margin:10px -6px; }.nav-account-popover nav a { display:flex; align-items:center; gap:12px; padding:11px 6px; border-radius:5px; text-decoration:none; font-size:12px; }.nav-account-popover nav a svg:last-child { margin-left:auto; }.nav-account-popover nav a:hover { background:#2a3a41; }
.nav-account-popover .nav-signout { display:flex; align-items:center; gap:12px; width:100%; padding:13px 0 0; margin-top:12px; border:0; border-top:1px solid #3b4c54; background:transparent; text-align:left; font-size:12px; }.nav-account-popover .nav-signout:hover { color:#fff; }.nav-signout:disabled { opacity:.6; }
@media(max-width:980px) { #nav .nav-user-controls { position:absolute; top:5px; left:10px; right:10px; height:34px; margin:0; justify-content:space-between; pointer-events:none; }#nav .nav-user-controls > * { pointer-events:auto; }#nav .nav-user-controls > a { font-size:10px; min-height:30px; padding:6px 8px; gap:6px; }#nav .nav-user-controls .cta { height:32px; min-height:32px; font-size:11px; padding:3px 7px; }#nav .nav-user-controls .nav-profile-trigger { padding:0; }.nav-avatar { width:29px; height:29px; }#nav .nav-user-controls .nav-auth-signin { padding-inline:7px; }.nav-account-popover { right:12px; } }
@media(max-width:380px) { #nav .nav-user-controls .nav-auth-create svg { display:none; }#nav .nav-credit-trigger > svg:last-child { display:none; } }
.faulty-terminal-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
:root { color-scheme: dark; --bg:#0a0a0a; --panel:#121212; --row:#1c1c1c; --row-fill:#2e2e2e; --line:#242424; --line-2:#1c1c1c; --ink:#ededed; --muted:#8b8b8b; --dim:#6a6a6a; --accent:#7db2bf; --accent-soft:rgba(125,178,191,.14); --accent-light:#d6e8ed; --accent-deep:#344b51; --nav-h:62px; --nav-top:22px; --side-w:264px; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--bg); } body { margin:0; min-width:320px; min-height:100vh; background:var(--bg); color:var(--muted); font:400 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased; } button,input { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.app { min-height:100vh; }.app.view-detail #swarm { opacity:.22; }
#swarm,#dust-field { position:fixed; inset:0; z-index:0; transition:opacity .5s ease; pointer-events:none; }
.viewer-gate-shell { position:relative; min-height:100vh; overflow:hidden; isolation:isolate; background:var(--bg); }
.viewer-gate-shell::before { content:''; position:fixed; z-index:1; inset:0; pointer-events:none; background:radial-gradient(ellipse 52% 46% at 50% 46%,rgba(52,75,81,.24),transparent 74%); }
.viewer-gate { position:relative; z-index:2; display:grid; min-height:100vh; place-items:center; padding:40px 20px; }
.viewer-gate-panel { position:relative; width:min(448px,100%); padding:40px 40px 30px; overflow:hidden; border:1px solid rgba(214,232,237,.14); border-radius:20px; background:rgba(10,12,13,.86); box-shadow:0 28px 80px -36px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.045); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.viewer-gate-panel::before { content:''; position:absolute; top:0; right:36px; left:36px; height:1px; background:linear-gradient(90deg,transparent,rgba(125,178,191,.82),transparent); }
.viewer-gate-brand { display:grid; justify-items:start; gap:6px; margin-bottom:42px; }
.viewer-gate-wordmark { color:#e5eeea; font:700 17px/1 ui-sans-serif,sans-serif; letter-spacing:3.1px; }
.viewer-gate-powered { display:flex; align-items:baseline; gap:5px; color:#7d8d91; font:600 8px/1 ui-sans-serif,sans-serif; letter-spacing:.055em; }
.viewer-gate-powered b { color:var(--accent-light); font-size:9px; letter-spacing:1.25px; }
.viewer-gate-powered b span { color:var(--accent); }
.viewer-gate-copy h1 { margin:0; color:var(--ink); font:500 clamp(30px,6vw,38px)/1.08 inherit; letter-spacing:-.032em; text-wrap:balance; }
.viewer-gate-copy p { max-width:38ch; margin:14px 0 30px; color:#9ca7a9; font-size:14px; line-height:1.65; }
.viewer-key-form { display:grid; }
.viewer-key-form > label { margin-bottom:9px; color:#d8e1e2; font:600 11px/1 ui-sans-serif,sans-serif; letter-spacing:.025em; }
.viewer-key-field { display:flex; min-height:52px; align-items:center; border:1px solid #30383a; border-radius:11px; background:#111516; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.viewer-key-field:focus-within { border-color:rgba(125,178,191,.8); background:#13191a; box-shadow:0 10px 30px -22px rgba(125,178,191,.9),0 0 0 3px rgba(125,178,191,.1); }
.viewer-key-field.has-error { border-color:rgba(222,139,139,.78); box-shadow:0 0 0 3px rgba(222,139,139,.08); }
.viewer-key-field input { min-width:0; flex:1; height:50px; padding:0 4px 0 15px; border:0; outline:0; background:transparent; color:#eff4f2; caret-color:var(--accent); font:500 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.02em; }
.viewer-key-field input::placeholder { color:#687477; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight:400; letter-spacing:0; }
.viewer-key-field input:focus-visible { outline:0; }
.viewer-key-field input::selection { background:rgba(125,178,191,.32); color:#fff; }
.viewer-key-visibility { display:grid; width:44px; height:44px; margin-right:3px; padding:0; place-items:center; border:0; border-radius:9px; background:transparent; color:#778689; transition:color .16s ease,background .16s ease; }
.viewer-key-visibility:hover { background:rgba(125,178,191,.08); color:var(--accent-light); }
.viewer-key-visibility svg { width:17px; height:17px; stroke-width:1.8; }
.viewer-key-error { min-height:20px; margin:8px 0 10px; color:#e6a3a3; font-size:12px; line-height:1.5; }
.viewer-key-submit { display:flex; min-height:48px; align-items:center; justify-content:space-between; padding:0 16px 0 18px; border:1px solid rgba(214,232,237,.58); border-radius:11px; background:var(--accent-light); color:#142226; font:650 13px/1 inherit; box-shadow:0 14px 34px -22px rgba(125,178,191,.95); transition:transform .18s cubic-bezier(.22,1,.36,1),background .18s ease,border-color .18s ease,box-shadow .18s ease; }
.viewer-key-submit:hover:not(:disabled) { transform:translateY(-1px); background:#e2f0f3; border-color:#eff9fb; box-shadow:0 18px 38px -22px rgba(125,178,191,1); }
.viewer-key-submit:active:not(:disabled) { transform:translateY(0); }
.viewer-key-submit:disabled { cursor:not-allowed; border-color:#293235; background:#1b2325; color:#667477; box-shadow:none; }
.viewer-key-submit svg { width:17px; height:17px; stroke-width:1.8; }
.viewer-gate-session { display:flex; align-items:center; gap:7px; margin-top:24px; color:#6f7c7f; font-size:11px; }
.viewer-gate-session svg { width:13px; height:13px; color:#829497; stroke-width:1.7; }
@media (max-width:520px) { .viewer-gate { padding:22px 14px; }.viewer-gate-panel { padding:32px 24px 25px; border-radius:17px; }.viewer-gate-brand { margin-bottom:34px; }.viewer-gate-copy p { margin-bottom:26px; } }
.templates-faulty-terminal { position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none; opacity:.12; }
.templates-faulty-terminal .faulty-terminal-container,.templates-faulty-terminal canvas { width:100%; height:100%; }
.templates-faulty-terminal canvas { display:block; }
#nav { position:fixed; z-index:20; display:flex; align-items:center; left:0; right:0; top:0; transform:none; height:var(--nav-h); width:100%; max-width:none; padding:0 11px 0 23px; border-radius:0; background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03)); border:0; border-bottom:1px solid rgba(255,255,255,.15); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 22px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05); overflow:hidden; } #nav .pill { position:absolute; z-index:0; height:100%; top:0; border-radius:0; pointer-events:none; transition:left .46s cubic-bezier(.22,1,.36,1),opacity .22s ease; } #nav .pill.active { background:rgba(125,178,191,.22); border:1px solid rgba(125,178,191,.6); box-shadow:0 0 30px -6px rgba(125,178,191,.75),inset 0 0 18px -8px rgba(214,232,237,.9); } .nav-dot-grid { position:absolute; inset:0; opacity:.45; background-image:radial-gradient(rgba(226,235,231,.25) .55px,transparent .7px); background-size:7px 7px; mask-image:linear-gradient(90deg,transparent,black 9%,black 90%,transparent); pointer-events:none; } .brand-mark,.nav-brand { position:relative; z-index:1; flex:none; }.brand-mark { color:var(--accent); font-size:10px; transform:rotate(45deg); margin-right:9px; }.nav-brand { color:#dfe9e2; font:700 14.5px/1 ui-sans-serif,sans-serif; letter-spacing:2.6px; margin-right:31px; } #nav button { position:relative; z-index:1; height:100%; border:0; border-radius:0; padding:0 14px; background:none; color:#cad4cd; font:600 13.5px/36px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; white-space:nowrap; transition:color .2s ease; } #nav button:hover { color:#fff; } #nav button.is-active { color:#d6e8ed; } #nav .cta { height:36px; border-radius:9px; margin-left:auto; border:1px solid rgba(255,255,255,.16); padding:0 14px; font-size:13px; transition:border-color .25s ease; } #nav .cta:hover { border-color:rgba(125,178,191,.55); }
#home { position:relative; z-index:10; min-height:100vh; display:grid; place-items:center; padding:120px 24px 80px; } #home .inner { width:min(760px,92vw); text-align:center; }.eyebrow { font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); } #home h1 { margin:18px 0 16px; color:var(--ink); letter-spacing:-.024em; font:500 clamp(30px,5vw,52px)/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; } #home p { color:#7d7d7d; font-size:15px; max-width:52ch; margin:0 auto 34px; }.home-stats { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }.stat { min-width:132px; padding:16px 18px; border-radius:13px; background:rgba(18,18,18,.72); border:1px solid var(--line); backdrop-filter:blur(8px); }.stat b { display:block; color:var(--ink); font:500 24px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }.stat span { font-size:12px; color:var(--dim); letter-spacing:.04em; }
#shell { position:relative; z-index:10; } #side { position:fixed; z-index:15; left:0; top:0; bottom:0; width:var(--side-w); padding:calc(var(--nav-top) + var(--nav-h) + 26px) 0 28px; border-right:1px solid var(--line-2); background:rgba(10,10,10,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); overflow-y:auto; transform:translateX(-100%); transition:transform .42s cubic-bezier(.22,1,.36,1); } .view-detail #side { transform:none; }.side-head { padding:0 18px 14px; }.side-cat { font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }.search { display:flex; align-items:center; gap:8px; height:36px; padding:0 11px; border-radius:9px; background:var(--row); border:1px solid transparent; transition:border-color .2s ease; }.search:focus-within { border-color:#333; }.search input { flex:1; min-width:0; background:none; border:0; outline:none; color:var(--ink); font:400 13px/1 inherit; }.search input::placeholder { color:#5c5c5c; }.search kbd { font:500 10.5px/1 ui-monospace,monospace; color:var(--dim); border:1px solid var(--line); border-radius:5px; padding:3px 5px; }.grp { margin-top:18px; }.grp h4 { margin:0; padding:0 18px 8px; color:var(--dim); font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.16em; text-transform:uppercase; }.side-item { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 18px; border:0; background:none; color:#9a9a9a; font:400 13.5px/1.4 inherit; position:relative; transition:color .16s ease,background .16s ease; }.side-item:hover { color:var(--ink); background:rgba(255,255,255,.035); }.side-item[aria-current="true"] { color:var(--ink); background:var(--accent-soft); }.side-item[aria-current="true"]::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--accent); border-radius:0 2px 2px 0; }.dot { width:5px; height:5px; border-radius:50%; background:#3a3a3a; flex:none; }.side-item.is-live .dot { background:var(--accent); box-shadow:0 0 8px rgba(125,178,191,.8); }.side-empty { padding:14px 18px; color:var(--dim); font-size:13px; }
#view { margin-left:var(--side-w); padding:calc(var(--nav-top) + var(--nav-h) + 44px) 34px 120px; max-width:1180px; }.crumb { font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; color:var(--dim); margin-bottom:14px; }.crumb b { color:var(--accent); font-weight:500; }.detail-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; }.detail-head h1 { margin:0; color:var(--ink); letter-spacing:-.02em; font:500 clamp(24px,3.2vw,34px)/1.15 inherit; }.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; border:1px solid var(--line); background:#161616; color:var(--muted); font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.06em; }.chip.live { color:#d6e8ed; border-color:rgba(125,178,191,.4); background:rgba(125,178,191,.1); }.lede { color:#9c9c9c; max-width:64ch; margin:0 0 26px; font-size:14.5px; }
.stage { position:relative; width:min(100%,780px); aspect-ratio:16 / 10; margin-inline:auto; border:1px solid var(--line); border-radius:16px; background:#0d0d0d; display:grid; min-height:0; place-items:center; padding:34px; overflow:hidden; }.stage.flush { padding:0; }.stage.tall { height:auto; }.stage-label { position:absolute; left:14px; top:12px; z-index:2; font:500 10px/1 ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; color:#4d4d4d; }.stage-canvas { display:block; width:100%; height:100%; position:absolute; inset:0; }.placeholder { text-align:center; color:var(--dim); max-width:44ch; }.placeholder b { display:block; color:var(--ink); font-weight:500; margin-bottom:8px; font-size:15px; }.sec-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:44px 0 18px; }.sec-head h2 { margin:0; color:var(--ink); font:600 19px/1.2 inherit; letter-spacing:-.01em; }.count-chip { display:inline-block; margin-left:10px; padding:2px 9px; border-radius:7px; background:#1e1e1e; color:var(--muted); font:600 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; vertical-align:middle; }.ghost-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1px solid var(--line); background:#151515; color:var(--ink); font:500 13px/1 inherit; transition:border-color .2s ease,background .2s ease; }.ghost-btn:hover { border-color:#3a3a3a; background:#1b1b1b; } pre.code { margin:0; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:15px 17px; overflow-x:auto; color:#cfcfcf; font:400 12.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; }.tok { color:#d6e8ed; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.ctl { position:relative; min-height:42px; border-radius:9px; background:var(--row); display:flex; align-items:center; justify-content:space-between; padding:0 14px; overflow:hidden; user-select:none; }.ctl .fill { position:absolute; left:0; top:0; bottom:0; background:var(--row-fill); pointer-events:none; }.ctl .ticks { position:absolute; inset:0; pointer-events:none; opacity:.5; background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(255,255,255,.13) calc(10% - 1px) 10%); }.ctl .k,.ctl .v { position:relative; z-index:1; }.ctl .k { color:var(--ink); font:500 13px/1 inherit; white-space:nowrap; }.ctl .v { color:var(--ink); font:500 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace; display:flex; align-items:center; gap:9px; }.chev { color:var(--dim); font-weight:400; }.row-range,.row-select { position:absolute; inset:0; opacity:0; cursor:pointer; }.toggle { position:relative; z-index:1; width:36px; height:21px; border-radius:999px; background:#3d3d3d; border:0; padding:0; transition:background .2s ease; }.toggle i { position:absolute; top:2.5px; left:2.5px; width:16px; height:16px; border-radius:50%; background:#0d0d0d; transition:transform .2s cubic-bezier(.22,1,.36,1); }.toggle[aria-pressed="true"] { background:#f2f2f2; }.toggle[aria-pressed="true"] i { transform:translateX(15px); }.swatch { width:17px; height:17px; border-radius:5px; border:1px solid rgba(255,255,255,.22); background:#7db2bf; }.swatch.hot { background:#d6e8ed; }.props-wrap { overflow:auto; border:1px solid var(--line); border-radius:16px; background:var(--panel); }.props-wrap table { width:100%; min-width:620px; border-collapse:separate; border-spacing:0; }.props-wrap th { text-align:left; padding:15px 18px; color:var(--muted); font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; border-bottom:1px solid var(--line); background:#151515; }.props-wrap td { padding:13px 18px; border-bottom:1px solid var(--line-2); vertical-align:top; font-size:13.5px; }.props-wrap tr:last-child td { border-bottom:0; }.props-wrap tr:hover td { background:#161616; }.props-wrap .name code,.props-wrap .def code { display:inline-block; padding:3px 8px; border-radius:6px; background:#232323; color:var(--ink); font:500 12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }.props-wrap .type { color:#9a9a9a; font:400 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }.props-wrap .desc { color:#9c9c9c; max-width:42ch; }
.ctl-input { gap:12px; user-select:auto; }
.ctl-text-input { position:relative; z-index:2; width:min(58%,220px); min-width:0; border:0; border-bottom:1px solid #3c4446; outline:0; background:transparent; color:#dce5e7; font:500 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; text-align:right; }
.ctl-text-input:focus { border-bottom-color:var(--accent); }
.seg { position:relative; display:inline-flex; padding:4px; border-radius:12px; background:var(--row); border:1px solid var(--line); }.seg .seg-ind { position:absolute; top:4px; bottom:4px; left:4px; width:82px; border-radius:9px; background:#f0f0f0; transition:transform .38s cubic-bezier(.22,1,.36,1); }.seg button { position:relative; z-index:1; width:82px; border:0; background:none; color:var(--muted); padding:8px 8px; font:500 13px/1 inherit; transition:color .2s ease; }.seg button[aria-selected="true"] { color:#0c0c0c; }.preview-rows { width:min(420px,100%); display:grid; gap:10px; }.a11y { width:280px; border:1px solid #d9d9d2; border-radius:7px; background:#fcfcf9; padding:14px 16px 18px; color:#141414; font-size:13px; }.a11y .a-head { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e4e4dd; padding-bottom:12px; margin-bottom:14px; }.a11y .a-head b { color:#344b51; font:700 11.5px/1 inherit; letter-spacing:.14em; }.a11y .a-head button { border:0; background:none; color:#2a2a2a; font-size:14px; }.a11y h5 { font:700 13px/1 inherit; margin:0 0 10px; }.a11y .a-row { display:flex; gap:8px; align-items:center; margin-bottom:16px; }.a11y .a-btn { flex:1; height:34px; border-radius:4px; border:1px solid #d5d4cd; background:#f2f1ec; color:#1a1a1a; font:600 13px/1 inherit; transition:background .15s ease; }.a11y .a-btn:hover { background:#e9e8e2; }.a11y .a-btn.on { background:#344b51; border-color:#344b51; color:#fff; }.a11y .a-btn.ghost { background:#fcfcf9; border:1.5px solid #141414; }.a11y .a-pct { min-width:46px; text-align:center; font:600 12px/1 ui-monospace,monospace; color:#2c2c2c; }.a11y .a-stack { display:grid; gap:5px; margin-bottom:20px; }.a11y .a-stack .a-btn { width:100%; }.props-inner { width:100%; padding:20px; }.tile-row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }.tile { width:190px; padding:17px 18px; border-radius:13px; background:var(--panel); border:1px solid var(--line); }.tile .lbl { display:block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }.tile b { display:block; margin:8px 0 4px; color:var(--ink); font:500 27px/1 ui-monospace,monospace; }.tile .delta { color:#d6e8ed; font-size:12px; }.code-box { position:relative; width:min(560px,100%); }.copy-btn { position:absolute; right:10px; top:10px; padding:6px 10px; border-radius:7px; border:1px solid var(--line); background:#181818; color:var(--muted); font:500 11px/1 ui-monospace,monospace; }.copy-btn:hover { color:var(--ink); border-color:#3a3a3a; }.grid-fade { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:32px 32px; mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 20%,transparent 72%); }.noise-preview { position:absolute; inset:0; background:linear-gradient(140deg,#173b43,#0a0a0a 62%); }.noise-preview svg { width:100%; height:100%; opacity:.5; }.spring-track { position:relative; display:flex; gap:6px; padding:5px; border-radius:999px; background:var(--row); border:1px solid var(--line); }.spring-track .knob { position:absolute; top:5px; bottom:5px; left:5px; width:79px; border-radius:999px; background:var(--accent); box-shadow:0 0 24px -4px rgba(125,178,191,.8); transition:transform .62s cubic-bezier(.22,1,.36,1); }.spring-track button { position:relative; z-index:1; width:79px; border:0; background:none; color:var(--muted); padding:9px 7px; font:500 13px/1 inherit; transition:color .25s ease; }.spring-track button[aria-selected="true"] { color:#102027; }.stagger-wrap { display:grid; gap:18px; justify-items:center; }.stagger { display:grid; gap:9px; width:min(360px,100%); }.stagger .bar { display:block; height:13px; border-radius:6px; background:linear-gradient(90deg,#2a2a2a,#1a1a1a); opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1); }.stagger.in .bar { opacity:1; transform:none; }.magnetic { transform:translate(var(--x),var(--y)); padding:15px 30px; border-radius:12px; border:1px solid rgba(125,178,191,.45); background:rgba(125,178,191,.12); color:#d6e8ed; font:500 14px/1 inherit; will-change:transform; transition:transform .62s cubic-bezier(.22,1,.36,1); }
#sideToggle,#scrim { display:none; } @media (max-width:1080px) { .panel { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:820px) { #nav { overflow:hidden; justify-content:flex-start; width:100%; padding-left:15px; }.nav-brand { margin-right:10px; font-size:12px; }.brand-mark { margin-right:5px; } #nav .cta { margin-left:auto; } #side { width:min(320px,86vw); transform:translateX(-100%); }.view-detail #side { transform:translateX(-100%); }.view-detail #side.is-open { transform:none; } #scrim.is-visible { display:block; position:fixed; inset:0; z-index:14; background:rgba(0,0,0,.55); border:0; } #sideToggle { display:inline-flex; position:fixed; z-index:16; left:16px; top:calc(var(--nav-top) + var(--nav-h) + 14px); align-items:center; gap:8px; padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(20,20,20,.92); color:var(--ink); font:500 12.5px/1 inherit; backdrop-filter:blur(10px); } #view { margin-left:0; padding-left:22px; padding-right:22px; padding-top:calc(var(--nav-top) + var(--nav-h) + 74px); } } @media (max-width:680px) { #nav { padding-inline:10px; } #nav button:not(.cta) { display:block; padding-inline:8px; font-size:11px; } #nav .cta { display:none; } .brand-lockup { margin-right:3px; } .panel { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }

/* Tangents blue–teal brand layer: dark surfaces remain intentionally unchanged. */
:root { --accent:#7db2bf; --accent-soft:rgba(125,178,191,.14); --accent-light:#d6e8ed; --accent-deep:#344b51; }
#nav .pill.active { background:rgba(125,178,191,.16); border:0; border-bottom:2px solid var(--accent); box-shadow:none; }
#nav button.is-active { color:var(--accent-light); } #nav .cta:hover { border-color:rgba(125,178,191,.7); }

/* Konveya remains the lead brand; this uses Tangents' official TANGΣNTS wordmark treatment. */
.brand-lockup { position:relative; z-index:1; flex:none; display:grid; gap:4px; margin-right:24px; }
.konveya-lockup { display:flex; align-items:center; justify-content:center; }
.brand-lockup .nav-brand { margin-right:0; }
.powered-by { display:flex; align-items:baseline; justify-content:center; gap:4px; color:#87969a; font:600 7.5px/1 ui-sans-serif,sans-serif; letter-spacing:.055em; white-space:nowrap; }
.tangents-wordmark { color:var(--accent-light); font:700 8.5px/1 ui-sans-serif,sans-serif; letter-spacing:1.2px; }
.tangents-sigma { color:var(--accent); font-style:normal; }
@media (max-width:820px) { .brand-lockup { margin-right:10px; gap:3px; } .brand-lockup .nav-brand { font-size:12px; } .powered-by { font-size:6.5px; } .tangents-wordmark { font-size:7.5px; letter-spacing:1px; } }
.side-item.is-live .dot { background:var(--accent); box-shadow:0 0 8px rgba(125,178,191,.8); }.chip.live { color:var(--accent-light); border-color:rgba(125,178,191,.48); background:rgba(125,178,191,.12); }.tok,.tile .delta { color:var(--accent-light); }
.swatch { background:var(--accent); }.swatch.hot { background:var(--accent-light); }.spring-track .knob { background:var(--accent); box-shadow:0 0 24px -4px rgba(125,178,191,.8); }.magnetic { border-color:rgba(125,178,191,.55); background:rgba(125,178,191,.13); color:var(--accent-light); }

.rb-stage { min-height:0; }.rb-background-stage { display:block; padding:0; }.rb-background-stage .stage-preview-content,.rb-background-stage .rb-pinned-preview { position:absolute; inset:0; width:auto; height:auto; min-height:0; }.rb-background-stage .rb-pinned-preview > * { width:100%; height:100%; }.rb-background-stage .placeholder { position:absolute; inset:0; display:grid; place-content:center; padding:34px; }.rb-preview-button { border:1px solid rgba(125,178,191,.65); border-radius:10px; padding:13px 22px; background:rgba(125,178,191,.13); color:var(--accent-light); font:600 14px/1 inherit; }.rb-star-preview { color:var(--accent-light); border:0; border-radius:9px; background:#101719; font:600 14px/1 inherit; }.rb-shiny-preview { font:600 clamp(20px,3vw,32px)/1.2 ui-sans-serif,sans-serif; }.rb-blur-preview,.rb-preview-copy { margin:0; color:var(--accent-light); font:600 clamp(20px,3vw,30px)/1.2 ui-sans-serif,sans-serif; }.rb-pinned-preview,.rb-cursor-scope,.rb-ref-preview { width:100%; height:100%; min-height:170px; }.rb-cursor-scope { position:relative; display:grid; place-items:center; isolation:isolate; overflow:hidden; transform:translateZ(0); border-radius:12px; }.rb-cursor-hint { color:#8faeb5; font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.rb-controls { grid-template-columns:repeat(3,minmax(0,1fr)); }
.stage-preview-content { display:contents; }.stage-replay { position:absolute; z-index:3; right:13px; top:10px; display:grid; width:28px; height:28px; padding:0; place-items:center; border:1px solid rgba(125,178,191,.32); border-radius:50%; background:rgba(10,10,10,.72); color:#9eb6bc; transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease; }.stage-replay-icon { width:13px; height:13px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }.stage-replay:hover:not(:disabled) { border-color:rgba(125,178,191,.72); background:rgba(125,178,191,.13); color:var(--accent-light); transform:rotate(-22deg); }.stage-replay:focus-visible { outline:2px solid var(--accent-light); outline-offset:2px; }.stage-replay:disabled { cursor:default; color:#667579; border-color:rgba(125,178,191,.15); }
@media (max-width:1080px) { #nav .cta { margin-left:12px; padding:0 11px; font-size:12px; } }
/* Manrope is reserved for primary navigation; the brand and page type stay intact. */
#nav button:not(.cta) { font-family:'Manrope Variable',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-weight:550; letter-spacing:.01em; }
/* Edge-connected navigation: compact screens retain every destination. */
@media (max-width:820px) { #nav .cta { display:none; } }
@media (max-width:680px) {
  :root { --nav-h:85px; }
  #nav { flex-wrap:wrap; align-content:flex-start; padding-inline:0; }
  #nav .brand-lockup { width:100%; height:40px; margin:0; align-content:center; justify-content:center; }
  #nav button:not(.cta) { flex:0 0 calc(100% / 6); width:calc(100% / 6); min-width:0; height:44px; padding:0 3px; white-space:normal; font-size:10px; line-height:1.2; }
  #nav .pill { top:40px; height:44px; }
}
.a11y .a-head b { color:var(--accent-deep); }.a11y .a-btn.on { background:var(--accent); border-color:var(--accent); color:#102126; }

/* Preview-host isolation: pinned component styles are global by design, so the
   host avoids generic names such as `.stage` that upstream CSS can also own. */
.app [data-konveya-preview-stage] { position:relative; width:min(100%,780px); aspect-ratio:16 / 10; margin-inline:auto; border:1px solid var(--line); border-radius:16px; background:#0d0d0d; display:grid; min-height:0; place-items:center; padding:24px; overflow:hidden; }
.app .rb-stage-label { position:absolute; left:14px; top:12px; z-index:6; font:500 10px/1 ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; color:#4d4d4d; pointer-events:none; }
.app .rb-stage-preview-content { display:contents; }
.app .rb-stage-replay { position:absolute; z-index:7; right:13px; top:10px; display:grid; width:28px; height:28px; padding:0; place-items:center; border:1px solid rgba(125,178,191,.32); border-radius:50%; background:rgba(10,10,10,.72); color:#9eb6bc; transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease; }
.app .rb-stage-replay-icon { width:13px; height:13px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.app .rb-stage-replay:hover:not(:disabled) { border-color:rgba(125,178,191,.72); background:rgba(125,178,191,.13); color:var(--accent-light); transform:rotate(-22deg); }
.app .rb-stage-replay:focus-visible { outline:2px solid var(--accent-light); outline-offset:2px; }.app .rb-stage-replay:disabled { cursor:default; color:#667579; border-color:rgba(125,178,191,.15); }
.app [data-konveya-preview-stage] .rb-pinned-preview,.app [data-konveya-preview-stage] .rb-ref-preview { position:relative; display:grid; width:100%; height:100%; min-height:0; place-items:center; overflow:hidden; isolation:isolate; }
.app [data-konveya-preview-stage].rb-border-glow-stage,.app [data-konveya-preview-stage].rb-border-glow-stage .rb-pinned-preview,.app [data-konveya-preview-stage].rb-bounce-cards-stage,.app [data-konveya-preview-stage].rb-bounce-cards-stage .rb-pinned-preview { overflow:visible; }
.app [data-konveya-preview-stage].rb-bubble-menu-stage .rb-pinned-preview { overflow:visible; }
.app [data-konveya-preview-stage].rb-bubble-menu-stage .bubble-menu-items { align-items:flex-start; padding-top:110px; }
.app [data-konveya-preview-stage] .rb-fit-frame { position:absolute; left:50%; top:50%; width:100%; height:100%; transform:translate(-50%,-50%) scale(var(--rb-fit-scale,1)); transform-origin:center; }
/* BounceCards' preserved source intentionally relies on an absolutely positioned
   flex item's static position. Other pinned components also use the generic
   `.card` selector, so reset only those foreign declarations inside this
   source component instead of changing the shared preview host. */
.app [data-konveya-preview-stage] .bounceCardsContainer .card { top:auto; right:auto; bottom:auto; left:auto; background:transparent; transform-style:flat; will-change:auto; backface-visibility:visible; -webkit-backface-visibility:visible; }
.app [data-konveya-preview-stage] .bounceCardsContainer .card .image { display:block; width:100%; height:100%; object-fit:cover; }
.app [data-konveya-preview-stage] .rb-card-swap-card { background:#080a0b; }
.app [data-konveya-preview-stage] .rb-card-swap-label { flex:0 0 auto; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.55); background:linear-gradient(to top,#1b1722,#060606); color:#f5f7f8; font:600 14px/1.2 ui-sans-serif,sans-serif; }
.app [data-konveya-preview-stage] .rb-card-swap-media { position:relative; flex:1 1 auto; min-height:0; overflow:hidden; }
.app [data-konveya-preview-stage] .rb-card-swap-media img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.app [data-konveya-preview-stage] .rb-counter-demo { display:flex; width:100%; height:100%; flex-direction:column; align-items:center; justify-content:center; gap:28px; }
.app [data-konveya-preview-stage] .rb-counter-actions { display:flex; gap:10px; align-items:center; justify-content:center; }
.app [data-konveya-preview-stage] .rb-counter-actions button { min-width:42px; height:38px; padding:0 12px; border:1px solid rgba(125,178,191,.28); border-radius:10px; background:#151c1e; color:#d6e8ed; font:600 13px/1 ui-sans-serif,sans-serif; }
.app [data-konveya-preview-stage] .rb-counter-actions button:hover { border-color:rgba(125,178,191,.7); background:#1c292c; }
.app [data-konveya-preview-stage] .rb-flowing-menu-demo { width:100%; height:100%; padding-block:20%; background:#120f17; }
.app [data-konveya-preview-stage] .rb-folder-source { width:100px; height:80px; transform-origin:center; }
.app [data-konveya-preview-stage] .rb-glass-surface-demo { position:relative; width:100%; height:100%; overflow:hidden; background:#111; }
.app [data-konveya-preview-stage] .rb-glass-surface-demo > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.75) brightness(.68); }
.app [data-konveya-preview-stage] .rb-glass-surface-pane { position:absolute; inset:0; display:grid; place-items:center; }
.app [data-konveya-preview-stage] .rb-glass-surface-pane .glass-surface__content { color:#fff; font:700 17px/1 ui-sans-serif,sans-serif; letter-spacing:.08em; text-transform:uppercase; text-shadow:0 1px 12px rgba(0,0,0,.55); }
.app [data-konveya-preview-stage] .rb-gooey-nav-demo { display:flex; align-items:center; justify-content:center; overflow:hidden; }
.app [data-konveya-preview-stage] .rb-line-sidebar-demo { display:flex; align-items:center; justify-content:flex-start; overflow:hidden; padding:48px; }
.app [data-konveya-preview-stage] .rb-magic-bento-demo { overflow:hidden; padding-block:32px; }
.app [data-konveya-preview-stage].rb-background-stage { display:block; padding:0; }
.app [data-konveya-preview-stage].rb-background-stage .rb-stage-preview-content,.app [data-konveya-preview-stage].rb-background-stage .rb-pinned-preview { position:absolute; inset:0; width:auto; height:auto; min-height:0; overflow:hidden; }
.app [data-konveya-preview-stage].rb-background-stage .rb-pinned-preview > * { width:100%; height:100%; }
.app [data-konveya-preview-stage].rb-background-stage .threads-container { position:absolute; inset:0; width:100%; height:100%; }
.app [data-konveya-preview-stage].rb-background-stage .placeholder { position:absolute; inset:0; display:grid; place-content:center; padding:34px; }
.app [data-konveya-preview-stage] .rb-click-spark-demo { display:grid; width:100%; height:100%; place-items:center; color:var(--accent-light); background:radial-gradient(circle at 50% 50%,rgba(125,178,191,.09),transparent 46%); font:600 14px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; }
.app [data-konveya-preview-stage] .rb-gradual-blur-demo { position:relative; width:100%; height:100%; overflow:hidden; background:linear-gradient(145deg,#11191b,#0a0d0e); }
.app [data-konveya-preview-stage] .rb-gradual-blur-content { height:100%; overflow-y:auto; padding:6rem 2rem; color:#9caaad; }
.app [data-konveya-preview-stage] .rb-gradual-blur-content b { color:var(--accent-light); font-size:24px; }
.app [data-konveya-preview-stage] .rb-gradual-blur-content p { max-width:42ch; margin:18px 0; font-size:15px; }
.app [data-konveya-preview-stage] .rb-pixel-swap-face { display:grid; width:100%; height:100%; place-items:center; color:#f5f8f9; font:700 clamp(1.8rem,5vw,3.6rem)/1 ui-sans-serif,sans-serif; letter-spacing:-.04em; }
.app [data-konveya-preview-stage] .rb-pixel-swap-face--first { background:#181d1f; }
.app [data-konveya-preview-stage] .rb-pixel-swap-face--second { background:#7db2bf; color:#102027; }
.app [data-konveya-preview-stage] .rb-pixel-transition-media { display:block; width:100%; height:100%; object-fit:cover; }
.app [data-konveya-preview-stage] .rb-pixel-transition-message { display:grid; width:100%; height:100%; place-items:center; background:#111; color:#fff; font:900 2.4rem/1 ui-sans-serif,sans-serif; }
.app [data-konveya-preview-stage] .rb-model-viewer-demo,
.app [data-konveya-preview-stage] .rb-option-wheel-demo,
.app [data-konveya-preview-stage] .rb-profile-card-demo { display:flex; align-items:center; justify-content:center; overflow:hidden; background:#0d0f10; }
.app [data-konveya-preview-stage] .rb-model-viewer-demo > *,
.app [data-konveya-preview-stage] .rb-option-wheel-demo > * { width:100%; height:100%; }
.app [data-konveya-preview-stage] .rb-pill-nav-demo { position:absolute; overflow:hidden; padding:0 24px; }
.app [data-konveya-preview-stage] .rb-pill-nav-demo--light { background:#f0f0f0; }
.app [data-konveya-preview-stage] .rb-pill-nav-demo--dark,
.app [data-konveya-preview-stage] .rb-pill-nav-demo--color { background:#120f17; }
.app [data-konveya-preview-stage] .rb-profile-card-demo { padding:80px 0; }
.app [data-konveya-preview-stage] .rb-pixel-card-copy { position:absolute; inset:0; z-index:2; display:grid; place-items:center; color:#d6e8ed; font:900 3rem/1 ui-sans-serif,sans-serif; mix-blend-mode:screen; }
.app [data-konveya-preview-stage] .rb-scroll-stack-demo { overflow:hidden; background:#111315; }
.app [data-konveya-preview-stage] .rb-scroll-stack-demo > .scroll-stack-scroller { width:100%; height:100%; }
.app [data-konveya-preview-stage] .scroll-stack-card-demo { display:flex; flex-direction:column; justify-content:space-between; gap:1rem; color:#fff; font-size:clamp(1.5rem,4vw,3rem); font-weight:900; text-align:center; white-space:nowrap; }
.app [data-konveya-preview-stage] .scroll-stack-card-demo h3 { margin:0; }
.app [data-konveya-preview-stage] .scroll-stack-card-demo .stack-img-container { display:flex; width:100%; height:100%; min-height:150px; align-items:center; justify-content:center; border:10px solid #fff; border-radius:1.5rem; font-size:clamp(4rem,8vw,8rem); }
.app [data-konveya-preview-stage] .scroll-stack-demo-container .scroll-stack-inner { padding:20vh 2rem 50rem; }
.app [data-konveya-preview-stage] .ssc-demo-1,
.app [data-konveya-preview-stage] .ssc-demo-3,
.app [data-konveya-preview-stage] .ssc-demo-5 { background:#5227ff; }
.app [data-konveya-preview-stage] .ssc-demo-2,
.app [data-konveya-preview-stage] .ssc-demo-4 { background:#f01e9c; }
.app [data-konveya-preview-stage] .ssc-demo-5 { align-items:center; justify-content:center; text-align:center; }
.app [data-konveya-preview-stage] .custom-spotlight-card { width:350px; height:300px; border:1px solid #222; background:#111; user-select:none; }
.app [data-konveya-preview-stage] .rb-spotlight-card-content { display:flex; height:100%; flex-direction:column; align-items:flex-start; justify-content:center; }
.app [data-konveya-preview-stage] .rb-spotlight-card-content svg { width:48px; height:48px; margin-bottom:12px; }
.app [data-konveya-preview-stage] .rb-spotlight-card-content h3 { margin:0; font-size:1.4rem; letter-spacing:-.5px; }
.app [data-konveya-preview-stage] .rb-spotlight-card-content p { margin:6px 0 32px; color:#a1a1aa; font-size:14px; line-height:1.5; }
.app [data-konveya-preview-stage] .rb-stack-demo { display:grid; place-items:center; overflow:hidden; }
.app [data-konveya-preview-stage] .rb-stack-demo-frame { width:208px; height:208px; }
.app [data-konveya-preview-stage] .rb-stepper-demo { overflow:hidden; }
.app [data-konveya-preview-stage] .rb-stepper-demo > .outer-container { width:100%; height:100%; color:#f4f7f8; }
.app [data-konveya-preview-stage] .rb-curved-loop-demo,
.app [data-konveya-preview-stage] .rb-decrypted-text-demo,
.app [data-konveya-preview-stage] .rb-depth-text-demo,
.app [data-konveya-preview-stage] .rb-echo-text-demo,
.app [data-konveya-preview-stage] .rb-falling-text-demo,
.app [data-konveya-preview-stage] .rb-fold-text-demo { display:flex; align-items:center; justify-content:center; overflow:hidden; }
.app [data-konveya-preview-stage] .rb-curved-loop-demo .curved-loop-jacket { width:100%; }
.app [data-konveya-preview-stage] .rb-curved-loop-text { fill:#fff; }
.app [data-konveya-preview-stage] .rb-decrypted-text-copy { display:flex; width:80%; padding:.5em; }
.app [data-konveya-preview-stage] .decrypted-text { display:inline-block; max-width:30ch; color:#f5f7f8; cursor:pointer; font-size:2rem; font-weight:400; }
.app [data-konveya-preview-stage] .rb-depth-text-demo { padding-inline:32px; text-align:center; }
.app [data-konveya-preview-stage] .rb-echo-text-demo { padding-inline:56px; }
.app [data-konveya-preview-stage] .rb-falling-text-demo { position:absolute; }
.app [data-konveya-preview-stage] .rb-falling-text-demo .falling-text-container { position:absolute; inset:0; width:100%; height:100%; }
.app [data-konveya-preview-stage] .rb-falling-text-prompt { position:absolute; z-index:0; color:#2f3a3d; font:900 4rem/1 ui-sans-serif,sans-serif; user-select:none; }
.app [data-konveya-preview-stage] .rb-fold-text-demo { flex-direction:column; padding-inline:32px; text-align:center; }
.app [data-konveya-preview-stage] .rb-fuzzy-text-demo,
.app [data-konveya-preview-stage] .rb-glitch-text-demo,
.app [data-konveya-preview-stage] .rb-gradient-text-demo,
.app [data-konveya-preview-stage] .rb-masked-heading-demo,
.app [data-konveya-preview-stage] .rb-particle-text-demo,
.app [data-konveya-preview-stage] .rb-rotating-text-demo { display:flex; align-items:center; justify-content:center; overflow:hidden; }
.app [data-konveya-preview-stage] .rb-fuzzy-text-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.app [data-konveya-preview-stage] .rb-gradient-text-demo { font-size:3rem; }
.app [data-konveya-preview-stage] .rb-masked-heading-demo { padding:16px; }
.app [data-konveya-preview-stage] .rb-masked-heading-demo .masked-heading { width:100%; }
.app [data-konveya-preview-stage] .rb-particle-text-demo .particle-text { width:100%; height:100%; }
.app [data-konveya-preview-stage] .rb-rotating-text-demo { color:#fff; font-size:3rem; font-weight:300; }
.app [data-konveya-preview-stage] .rb-rotating-text-demo .rotating-text-ptag { display:flex; align-items:center; gap:.2em; margin:0; font-weight:900; }
.app [data-konveya-preview-stage] .rb-rotating-text-demo .rotating-text-main { display:flex; justify-content:center; overflow:hidden; padding:.5rem .75rem; border-radius:.5rem; background:#7db2bf; color:#102027; }
.app [data-konveya-preview-stage] .rb-rotating-text-demo .rotating-text-split { overflow:hidden; padding-bottom:.25rem; }
.app [data-konveya-preview-stage] .rb-scrambled-text-demo,
.app [data-konveya-preview-stage] .rb-scroll-velocity-demo,
.app [data-konveya-preview-stage] .rb-shiny-text-demo,
.app [data-konveya-preview-stage] .rb-shuffle-demo { display:flex; align-items:center; justify-content:center; overflow:hidden; }
.app [data-konveya-preview-stage] .scrambled-text-demo { max-width:600px; color:var(--accent-light); font-size:1rem; font-weight:800; }
.app [data-konveya-preview-stage] .rb-scroll-text-demo { position:relative; overflow:hidden; }
.app [data-konveya-preview-stage] .rb-scroll-text-scroller { position:relative; width:100%; height:100%; overflow-x:hidden; overflow-y:scroll; overscroll-behavior:contain; }
.app [data-konveya-preview-stage] .rb-scroll-text-prompt { position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); color:#2f3a3d; font:900 4rem/1 ui-sans-serif,sans-serif; text-align:center; user-select:none; }
.app [data-konveya-preview-stage] .rb-scroll-text-content { position:relative; padding:1600px 48px 600px; }
.app [data-konveya-preview-stage] .rb-scroll-text-demo .scroll-float-text { color:#fff; font-size:clamp(1.6rem,8vw,10rem); font-weight:900; line-height:1.5; text-align:center; }
.app [data-konveya-preview-stage] .rb-scroll-text-demo .scroll-reveal { margin:20px 0; }
.app [data-konveya-preview-stage] .rb-scroll-text-demo .scroll-reveal-text { color:#fff; font-size:clamp(1.6rem,4vw,3rem); font-weight:600; line-height:1.5; }
.app [data-konveya-preview-stage] .rb-scroll-velocity-demo { flex-direction:column; }
.app [data-konveya-preview-stage] .rb-scroll-velocity-demo > div { width:100%; }
.app [data-konveya-preview-stage] .rb-scroll-velocity-demo .custom-scroll-text { color:#fff; }
.app [data-konveya-preview-stage] .rb-shiny-text-demo { font-size:32px; font-weight:600; }
.app [data-konveya-preview-stage] .rb-shuffle-demo .shuffle-parent { color:#fff; }
.app [data-konveya-preview-stage] .rb-split-flap-demo,
.app [data-konveya-preview-stage] .rb-split-text-demo,
.app [data-konveya-preview-stage] .rb-stroke-text-demo,
.app [data-konveya-preview-stage] .rb-text-loop-demo,
.app [data-konveya-preview-stage] .rb-text-pressure-demo { display:flex; align-items:center; justify-content:center; overflow:hidden; }
.app [data-konveya-preview-stage] .rb-split-flap-demo { padding:48px; }
.app [data-konveya-preview-stage] .rb-split-text-demo .split-text-demo { margin:0; color:#fff; font-size:5rem; font-weight:800; text-align:center; }
.app [data-konveya-preview-stage] .rb-stroke-text-demo { padding:56px; }
.app [data-konveya-preview-stage] .rb-stroke-text-demo .stroke-text { width:100%; }
.app [data-konveya-preview-stage] .rb-text-cursor-demo { position:relative; overflow:hidden; }
.app [data-konveya-preview-stage] .rb-text-cursor-demo > .text-cursor-container { position:absolute; inset:0; z-index:1; }
.app [data-konveya-preview-stage] .rb-text-cursor-prompt { position:absolute; inset:0; display:grid; place-items:center; color:#2f3a3d; font:900 4rem/1 ui-sans-serif,sans-serif; text-align:center; user-select:none; pointer-events:none; }
.app [data-konveya-preview-stage] .rb-text-loop-demo .text-loop { width:100%; }
.app [data-konveya-preview-stage] .rb-text-pressure-demo { background:#120f17; }
.app [data-konveya-preview-stage] .rb-text-pressure-demo > div { width:100%; height:100%; }
.app [data-konveya-preview-stage] .rb-text-type-demo { display:flex; align-items:flex-start; justify-content:flex-start; overflow:hidden; padding:64px; }
.app [data-konveya-preview-stage] .rb-text-type-demo .custom-text-type { color:#fff; font-size:2rem; font-weight:700; }
.app [data-konveya-preview-stage] .rb-true-focus-demo { display:flex; align-items:center; justify-content:center; overflow:hidden; }
.app [data-konveya-preview-stage] .rb-variable-proximity-demo { overflow:hidden; padding:16px; }
.app [data-konveya-preview-stage] .rb-variable-proximity-container { display:flex; width:100%; height:100%; align-items:center; justify-content:center; overflow:hidden; }
.app [data-konveya-preview-stage] .rb-variable-proximity-container .variable-proximity-demo { max-width:20ch; color:#fff; font-size:4rem; line-height:1; text-align:center; }
.app [data-konveya-preview-stage] .rb-warp-text-demo { overflow:hidden; }
.app [data-konveya-preview-stage] .rb-warp-text-demo .warp-text { width:100%; height:100%; }
.app [data-konveya-preview-stage] .rb-stepper-media { display:block; width:100%; height:100px; margin-top:1rem; border-radius:15px; object-fit:cover; }
.app [data-konveya-preview-stage] .rb-stepper-input { width:100%; margin-top:.75rem; padding:.65rem .8rem; border:1px solid #343b3d; border-radius:8px; outline:none; background:#15191a; color:#f4f7f8; }
.app [data-konveya-preview-stage] .rb-stepper-input:focus { border-color:#7db2bf; }
.app [data-konveya-preview-stage] .tilted-card-demo-text { margin:2rem; padding:.5rem 1rem; border-radius:8px; background:rgba(0,0,0,.4); color:#fff; font-weight:900; letter-spacing:-.5px; box-shadow:0 5px 30px rgba(18,15,23,.35); }
.app [data-konveya-preview-stage] .blur-text-demo { font-size:5rem; font-weight:800; }
.app [data-konveya-preview-stage] .count-up-text { font-size:4rem; font-weight:700; }
@media (max-width:480px) {
  .app [data-konveya-preview-stage] .scroll-stack-card-demo { gap:.5rem; padding:.2rem; font-size:1rem; }
  .app [data-konveya-preview-stage] .scroll-stack-card-demo .stack-img-container { min-height:120px; border-width:5px; border-radius:1rem; font-size:3rem; }
  .app [data-konveya-preview-stage] .blur-text-demo { font-size:2rem; }
  .app [data-konveya-preview-stage] .decrypted-text { font-size:1rem; }
}
.app [data-konveya-preview-stage] .rb-scroll-expand-copy { color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.55); }
.app [data-konveya-preview-stage] .rb-scroll-expand-copy h2 { margin:0 0 8px; font:700 clamp(1.5rem,4vw,3rem)/1.05 ui-sans-serif,sans-serif; }
.app [data-konveya-preview-stage] .rb-scroll-expand-copy p { margin:0; font-size:clamp(.75rem,1.5vw,1rem); }
.app [data-konveya-preview-stage] .rb-cursor-scope[data-cursor-component="splash-cursor"] > div { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; z-index:1 !important; }
.app [data-konveya-preview-stage] .rb-cursor-scope[data-cursor-component="splash-cursor"] canvas { width:100% !important; height:100% !important; }
.app [data-konveya-preview-stage].rb-sticker-peel-stage .rb-fit-frame > .draggable { left:50%; top:25%; }
.app [data-konveya-preview-stage] .rb-target-cursor-demo { display:flex; align-items:center; gap:16px; }
.app [data-konveya-preview-stage] .rb-target-cursor-demo .cursor-target { display:grid; min-width:140px; min-height:72px; padding:14px 18px; place-items:center; border:1px solid rgba(125,178,191,.4); border-radius:12px; background:#151b1d; color:var(--accent-light); font:600 14px/1.2 ui-sans-serif,sans-serif; }

/* Unified component grouping and workbook-backed company templates. */
.side-filters { display:grid; gap:3px; margin:0 0 12px; }
.side-filters button { width:100%; min-height:30px; padding:6px 9px; border:1px solid transparent; border-radius:7px; background:transparent; color:#8f999b; text-align:left; font:500 11.5px/1.25 inherit; transition:background .16s ease,color .16s ease,border-color .16s ease; }
.side-filters button:hover { color:var(--ink); background:rgba(255,255,255,.035); }
.side-filters button[aria-pressed="true"] { color:var(--accent-light); border-color:rgba(125,178,191,.28); background:rgba(125,178,191,.1); }
.company-palette-control { position:relative; grid-column:1 / -1; display:grid; grid-template-columns:minmax(180px,1fr) auto minmax(210px,.8fr); align-items:center; gap:14px; min-height:56px; padding:8px 11px 8px 14px; border:1px solid rgba(125,178,191,.2); border-radius:10px; background:#171b1c; }
.pixel-magnet-nav-preview { position:relative; width:min(92%,680px); min-height:72px; display:flex; align-items:center; gap:18px; padding:10px 14px; border:1px solid rgba(214,232,237,.14); border-radius:18px; background:rgba(18,22,23,.92); box-shadow:0 22px 60px rgba(0,0,0,.34); overflow:hidden; }
.pixel-magnet-brand { position:relative; z-index:1; display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:12px; background:#7db2bf; color:#102027; font-weight:900; }
.pixel-magnet-nav-preview nav { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:4px; flex:1; }
.pixel-magnet-nav-preview button { appearance:none; border:0; border-radius:10px; padding:10px 14px; background:transparent; color:#a7adae; font:inherit; font-size:13px; cursor:pointer; transition:transform .2s ease,background .2s ease,color .2s ease; }
.pixel-magnet-nav-preview button.is-active { background:rgba(125,178,191,.16); color:#d6e8ed; }
.pixel-magnet-pixels { position:absolute; inset:-20px -10px auto auto; width:128px; height:96px; opacity:.34; background-image:radial-gradient(circle,#7db2bf 1px,transparent 1.5px); background-size:10px 10px; mask-image:linear-gradient(135deg,#000,transparent 72%); }
@media (max-width:600px) { .pixel-magnet-nav-preview { width:94%; gap:8px; padding:8px; } .pixel-magnet-brand { width:34px; height:34px; } .pixel-magnet-nav-preview button { padding:9px 7px; font-size:11px; } }
.company-palette-copy { display:grid; gap:3px; }
.company-palette-copy b { color:var(--ink); font-size:12.5px; line-height:1.2; }
.company-palette-copy span { color:#8b989b; font-size:11px; line-height:1.35; }
.company-palette-preview { display:flex; align-items:center; }
.company-palette-preview i { width:18px; height:18px; margin-left:-4px; border:2px solid #171b1c; border-radius:50%; }
.company-palette-control select { width:100%; min-width:0; height:36px; padding:0 32px 0 10px; border:1px solid #303638; border-radius:8px; background:#101314; color:#dce5e7; font:500 11.5px/1 inherit; }
.stage .swatch,.stage .spring-track .knob { background:var(--preview-primary,var(--accent)); }
.stage .swatch.hot { background:var(--preview-secondary,var(--accent-light)); }
.stage .tile .delta { color:var(--preview-primary,var(--accent-light)); }
.stage .magnetic { border-color:var(--preview-primary,var(--accent)); background:color-mix(in srgb,var(--preview-primary,var(--accent)) 16%,transparent); color:var(--preview-secondary,var(--accent-light)); }
.stage .a11y .a-btn.on { border-color:var(--preview-primary,var(--accent)); background:var(--preview-primary,var(--accent)); }

.templates-page { position:relative; z-index:10; width:min(1080px,calc(100% - 48px)); margin:0 auto; padding:calc(var(--nav-top) + var(--nav-h) + 52px) 0 110px; overflow-x:clip; }
.templates-head { display:flex; align-items:flex-end; justify-content:space-between; gap:36px; margin-bottom:32px; }
.templates-head > div:first-child { flex:1 1 auto; min-width:0; }
.templates-head h1,.company-detail-head h1 { margin:0; color:var(--ink); font:500 clamp(28px,4vw,42px)/1.1 inherit; letter-spacing:-.03em; }
.templates-head p,.company-detail-head p { max-width:70ch; margin:12px 0 0; color:#a2abad; font-size:14px; line-height:1.65; }
.templates-tools { display:flex; flex:0 1 440px; width:min(440px,100%); align-items:center; justify-content:flex-end; gap:10px; }
.template-search { display:flex; flex:0 1 360px; width:min(360px,100%); align-items:center; gap:10px; min-height:44px; padding:0 13px; border:1px solid var(--line); border-radius:10px; background:rgba(18,18,18,.9); }
.template-search > svg { width:16px; color:#788588; }
.template-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:13px; }
.template-search input::placeholder { color:#717b7d; }
.template-search span { color:var(--accent-light); font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }
.template-view-switcher { display:flex; flex:none; align-items:center; gap:3px; height:44px; padding:4px; border:1px solid var(--line); border-radius:10px; background:rgba(18,18,18,.9); }
.template-view-switcher button { display:grid; width:34px; height:34px; padding:0; place-items:center; border:1px solid transparent; border-radius:7px; background:transparent; color:#758184; transition:background .16s ease,border-color .16s ease,color .16s ease; }
.template-view-switcher button:hover { color:var(--accent-light); }
.template-view-switcher button.is-active { border-color:rgba(125,178,191,.36); background:rgba(125,178,191,.12); color:var(--accent-light); }
.template-view-switcher svg { width:15px; height:15px; stroke-width:1.8; }
.company-directory { border-top:1px solid var(--line); }
.company-row { display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:16px; width:100%; min-height:84px; padding:13px 4px; border:0; border-bottom:1px solid var(--line); background:transparent; color:inherit; text-align:left; transition:background .16s ease; }
.company-row:hover { background:rgba(125,178,191,.055); }
.company-row-copy { display:grid; gap:4px; min-width:0; }
.company-row-copy b { overflow:hidden; color:var(--ink); font-size:14px; font-weight:600; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.company-row-copy > span { overflow:hidden; color:#8f999b; font-size:12.5px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.company-mark { display:grid; width:52px; height:52px; place-items:center; overflow:hidden; border:1px solid rgba(214,232,237,.1); border-radius:10px; background:transparent; color:#8fa0a4; font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.company-mark img { display:block; width:calc(100% - 12px); height:calc(100% - 12px); object-fit:contain; }
.company-mark.is-large { width:100%; height:auto; min-height:260px; border-color:rgba(255,255,255,.92); border-radius:14px; background:#fff; box-shadow:inset 0 0 0 1px rgba(10,10,10,.04); }
.company-mark.is-large img { width:min(80%,520px); height:220px; }
.company-mark.is-large > span { color:var(--accent-deep); font-size:24px; }
.company-asset-status { display:inline-flex; align-items:center; min-height:25px; padding:0 9px; border:1px solid var(--line); border-radius:999px; color:#8e999b; font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; }
.company-asset-status.has-logo { border-color:rgba(125,178,191,.38); color:var(--accent-light); background:rgba(125,178,191,.08); }
.company-empty { padding:44px 4px; border-bottom:1px solid var(--line); color:#8f999b; }
.company-directory.is-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; border-top:0; }
.company-grid-item { min-width:0; height:190px; }
.company-grid-glow,.company-grid-glow > .border-glow-inner { width:100%; height:100%; }
.company-grid-glow > .border-glow-inner { overflow:hidden; border-radius:inherit; }
.company-directory.is-grid .company-row { position:relative; z-index:1; grid-template-columns:1fr; grid-template-rows:auto 1fr auto; align-items:start; gap:10px; width:100%; height:100%; min-height:0; padding:16px 16px 16px calc(38% + 14px); overflow:hidden; border:0; border-radius:13px; background:radial-gradient(circle at 82% 12%,color-mix(in srgb,var(--brand-grain-1) 28%,transparent),transparent 44%),linear-gradient(145deg,color-mix(in srgb,var(--brand-grain-2) 18%,#0b0e0f),color-mix(in srgb,var(--brand-grain-3) 16%,#080a0b)); isolation:isolate; }
.company-directory.is-grid .company-row::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(115deg,rgba(4,6,7,.52),rgba(4,6,7,.78)); pointer-events:none; }
.company-directory.is-grid .company-row > :not(.company-grid-grainient) { position:relative; z-index:2; }
.company-directory.is-grid .company-row:hover::before { background:linear-gradient(115deg,rgba(4,6,7,.42),rgba(4,6,7,.68)); }
.company-grid-grainient { position:absolute; inset:0; z-index:0; width:100%; height:100%; opacity:.72; pointer-events:none; }
.company-directory.is-grid .company-row > .company-mark { position:absolute; inset:0 62% 0 0; width:auto; height:auto; border:0; border-radius:12px 0 0 12px; background:#fff; color:var(--accent-deep); box-shadow:10px 0 28px -22px rgba(0,0,0,.9); }
.company-directory.is-grid .company-row-copy { align-self:start; padding-top:2px; }
.company-directory.is-grid .company-row-copy b { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; white-space:normal; }
.company-directory.is-grid .company-row-copy b .shiny-text { font:inherit; letter-spacing:inherit; }
.company-directory.is-grid .company-row-copy > span { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; }
.company-directory.is-grid .company-asset-status { grid-column:1; align-self:end; justify-self:start; }
.company-directory.is-grid .company-empty { grid-column:1 / -1; }
.template-back { display:inline-flex; align-items:center; gap:8px; margin:0 0 28px; padding:0; border:0; background:transparent; color:#a8b3b5; font-weight:600; }
.template-back svg { width:16px; }
.template-back:hover { color:var(--accent-light); }
.company-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:30px; }
.company-detail-head > div { min-width:0; }
.brand-asset-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:18px; align-items:stretch; }
.brand-mark-panel,.palette-panel { border:1px solid var(--line); border-radius:16px; background:rgba(18,18,18,.9); }
.brand-mark-panel { display:flex; flex-direction:column; gap:14px; padding:14px; }
.brand-mark-panel .template-action { align-self:flex-start; }
.palette-panel { padding:22px; }
.palette-title { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.palette-title h2 { margin:0; color:var(--ink); font-size:18px; line-height:1.2; }
.palette-title p { max-width:46ch; margin:7px 0 0; color:#8f999b; font-size:12.5px; line-height:1.5; }
.template-action { display:inline-flex; min-height:36px; align-items:center; justify-content:center; gap:8px; padding:0 13px; border:1px solid rgba(125,178,191,.35); border-radius:9px; background:rgba(125,178,191,.08); color:var(--accent-light); font:600 12px/1 inherit; text-decoration:none; white-space:nowrap; }
.template-action svg { width:15px; }
.template-action:hover { border-color:rgba(125,178,191,.72); background:rgba(125,178,191,.14); }
.template-action.primary { min-height:40px; background:var(--accent); color:#102126; }
.template-action.primary:hover { background:var(--accent-light); }
.palette-list { display:grid; gap:8px; margin-top:24px; }
.palette-swatch { display:grid; grid-template-columns:38px 1fr 16px; align-items:center; gap:11px; min-height:46px; padding:4px 11px 4px 4px; border:1px solid var(--line); border-radius:10px; background:#171717; color:#d5dddd; text-align:left; font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }
.palette-swatch:hover { border-color:#3a4547; }
.palette-swatch i { width:36px; height:36px; border:1px solid rgba(255,255,255,.15); border-radius:7px; }
.palette-swatch svg { width:14px; color:var(--accent-light); }
.palette-empty,.brand-missing-copy { color:#8f999b; font-size:13px; line-height:1.6; }
.palette-empty { display:grid; min-height:180px; margin-top:20px; place-items:center; border:1px dashed #303637; border-radius:11px; }
.brand-missing-copy { max-width:54ch; margin:0; }

@media (max-width:820px) {
  .templates-page { width:min(100% - 32px,1080px); padding-top:calc(var(--nav-top) + var(--nav-h) + 42px); }
  .templates-head { align-items:stretch; flex-direction:column; gap:20px; }
  .templates-tools { flex:0 0 auto; width:100%; justify-content:stretch; }
  .template-search { flex:1 1 auto; width:auto; }
  .company-directory.is-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand-asset-layout { grid-template-columns:1fr; }
  .company-palette-control { grid-template-columns:minmax(0,1fr) auto; }
  .company-palette-control select { grid-column:1 / -1; }
}
@media (max-width:560px) {
  .company-directory.is-grid { grid-template-columns:1fr; }
  .company-row { grid-template-columns:48px minmax(0,1fr); gap:12px; }
  .company-mark { width:46px; height:46px; }
  .company-asset-status { display:none; }
  .company-directory.is-grid .company-asset-status { display:inline-flex; }
  .company-detail-head { flex-direction:column; }
  .company-detail-head .company-asset-status { display:inline-flex; }
  .palette-title { flex-direction:column; }
}

/* Konveya component developer guide */
.docs-heading { align-items:flex-end; }
.docs-tabs { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border:1px solid var(--line); border-radius:11px; background:#151515; }
.docs-tabs button { min-height:32px; padding:0 12px; border:0; border-radius:8px; background:transparent; color:#899496; font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; transition:background .16s ease,color .16s ease; }
.docs-tabs button:hover { color:var(--ink); }
.docs-tabs button[aria-selected="true"] { background:var(--accent); color:#102126; }
.docs-code { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#111; }
.docs-code-bar { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:0 10px 0 16px; border-bottom:1px solid var(--line); background:#151515; }
.docs-code-bar > span { color:#8d999b; font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; text-transform:uppercase; }
.docs-code-bar button { display:inline-flex; min-height:30px; align-items:center; gap:7px; padding:0 10px; border:1px solid #2b3031; border-radius:7px; background:#1a1d1e; color:#b7c2c4; font:600 11.5px/1 inherit; }
.docs-code-bar button:hover { border-color:rgba(125,178,191,.5); color:var(--accent-light); }
.docs-code-bar svg { width:14px; height:14px; }
.docs-code pre { max-height:520px; margin:0; padding:18px; overflow:auto; color:#c9d2d4; font:400 12.5px/1.72 ui-monospace,SFMono-Regular,Menlo,monospace; tab-size:2; white-space:pre; }
.docs-support-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
.docs-support-grid section { min-width:0; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.docs-support-grid h3 { margin:0 0 10px; color:var(--ink); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.docs-support-grid p,.docs-support-grid ul { margin:0; color:#929d9f; font-size:12.5px; }
.docs-support-grid ul { display:flex; flex-wrap:wrap; gap:7px; padding:0; list-style:none; }
.docs-support-grid code { overflow-wrap:anywhere; color:var(--accent-light); font:500 12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.docs-empty,.docs-loading,.docs-error { display:grid; gap:6px; min-height:108px; place-content:center; padding:22px; border:1px dashed #303637; border-radius:13px; background:rgba(18,18,18,.58); color:#889395; text-align:center; }
.docs-empty b,.docs-error b { color:var(--ink); font-size:13px; }
.docs-empty span,.docs-error span { max-width:60ch; font-size:12.5px; }
.docs-error { border-color:rgba(196,92,92,.38); }
@media (max-width:680px) {
  .rb-controls { grid-template-columns:1fr; }
  .docs-heading { align-items:flex-start; flex-direction:column; }
  .docs-tabs { width:100%; }
  .docs-tabs button { flex:1; min-width:64px; padding-inline:7px; }
  .docs-support-grid { grid-template-columns:1fr; }
  .docs-code pre { max-height:430px; padding:14px; font-size:11.5px; }
}

/* KonveyaVGM tabs */
.view-vgm .vgm-page { position:relative; z-index:10; width:min(1180px,100% - 48px); margin:0 auto; padding:calc(var(--nav-top) + var(--nav-h) + 44px) 0 120px; }
.vgm-head h1 { margin:14px 0 10px; color:var(--ink); letter-spacing:-.02em; font:500 clamp(26px,3.4vw,38px)/1.12 inherit; }
.vgm-preview { display:grid; gap:8px; margin:14px 0 30px; } .vgm-preview p { margin:0; max-width:64ch; color:#9c9c9c; font-size:12.5px; }
.vgm-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start; }
.vgm-form { display:grid; grid-template-columns:1fr; gap:14px; }
.vgm-drop { display:grid; gap:8px; } .vgm-drop-target { display:grid; justify-items:center; gap:6px; padding:26px 16px; border:1px dashed #3a3a3a; border-radius:12px; background:var(--row); color:var(--muted); font:inherit; transition:border-color .2s ease,background .2s ease; } .vgm-drop-target:hover { border-color:var(--accent); background:#1f1f1f; } .vgm-drop-target svg { width:22px; height:22px; color:var(--accent); } .vgm-drop-target b { color:var(--ink); font-weight:500; } .vgm-drop-target span { font-size:12px; }
.vgm-files { list-style:none; margin:0; padding:0; display:grid; gap:6px; } .vgm-files li { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:9px; background:var(--row); } .vgm-files img { width:44px; height:44px; object-fit:contain; border-radius:6px; background:#0d0d0d; } .vgm-files span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:13px; } .vgm-files button { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:7px; background:transparent; color:var(--muted); } .vgm-files button:hover { background:#2a2a2a; color:var(--ink); } .vgm-files svg { width:15px; height:15px; }
.vgm-field { display:grid; gap:7px; color:#d8e1e2; font:600 11px/1 ui-sans-serif,sans-serif; letter-spacing:.025em; } .vgm-field em { color:var(--dim); font-style:normal; font-weight:500; } .vgm-field input,.vgm-field textarea { width:100%; padding:11px 13px; border:1px solid #30383a; border-radius:10px; background:#111516; color:#eff4f2; font:400 13.5px/1.5 inherit; resize:vertical; } .vgm-field input:focus-visible,.vgm-field textarea:focus-visible { outline:0; border-color:rgba(125,178,191,.8); box-shadow:0 0 0 3px rgba(125,178,191,.1); }
.vgm-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .vgm-note { margin:0; color:#9c9c9c; font-size:12.5px; }
.vgm-submit { width:100%; justify-content:center; } .vgm-error { min-height:18px; margin:0; color:#e6a3a3; font-size:12px; }
.vgm-result-label { margin:0 0 10px; color:var(--ink); letter-spacing:-.01em; font:500 15px/1.3 inherit; overflow-wrap:anywhere; }
.vgm-result { display:grid; gap:14px; align-content:start; min-height:320px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#0d0d0d; } .vgm-result-empty { place-items:center; color:var(--dim); text-align:center; } .vgm-result p { margin:0; color:#9c9c9c; font-size:13px; }
.vgm-chip-error { color:#e6a3a3; border-color:rgba(222,139,139,.5); }
.vgm-bar { height:6px; border-radius:999px; background:var(--row); overflow:hidden; } .vgm-bar span { display:block; height:100%; background:var(--accent); transition:width .6s ease; }
.vgm-video { width:100%; aspect-ratio:1344 / 768; border-radius:12px; background:#000; }
.vgm-actions { display:flex; gap:10px; flex-wrap:wrap; } .vgm-actions a { text-decoration:none; } .vgm-actions svg { width:15px; height:15px; }
@media (max-width:900px) { .vgm-grid,.vgm-row { grid-template-columns:1fr; } }
@font-face {
  font-family:'Manrope Variable';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/manrope-latin-wght-normal-DHIcAJRg.woff2') format('woff2');
}
#nav .nav-account { position:relative; z-index:1; display:grid; place-items:center; width:36px; height:36px; flex:none; margin-left:10px; border:1px solid #526268; border-radius:6px; color:var(--accent-light); text-decoration:none; }
#nav .nav-account:hover,#nav .nav-account[aria-current] { background:rgba(125,178,191,.18); }
#nav .nav-account:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (min-width:681px) and (max-width:980px) { #nav { padding-inline:12px; } #nav button:not(.cta) { padding-inline:9px; font-size:11px; } #nav .brand-lockup { margin-right:12px; } #nav .cta { display:none; } #nav .nav-account { margin-left:auto; width:30px; } }
@media (max-width:680px) { #nav .nav-account { position:absolute; top:4px; right:12px; height:31px; width:31px; margin:0; } }
/* Consumer pages inherit Konveya's glass shell. Real workflow maps lead the
 * gallery; pricing is explicitly provisional, never an enabled checkout. */
.consumer-page { position:relative; z-index:10; width:min(1180px,calc(100% - 48px)); margin:auto; padding:calc(var(--nav-h) + 52px) 0 90px; font-family:'Manrope Variable',sans-serif; color:#d9e2e6; }
.consumer-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:32px; }
.consumer-heading h1 { margin:0 0 20px; font-size:42px; font-weight:500; line-height:1.14; letter-spacing:-.035em; color:#f0f4f5; }
.consumer-heading p { max-width:62ch; margin:0; color:#abbac2; font-size:15px; line-height:1.75; }
.pricing-page .consumer-heading { display:block; margin-bottom:32px; }
.pricing-page .consumer-heading h1 { margin-bottom:0; }
.consumer-page button,.consumer-page a,.consumer-upload { font:inherit; }
.consumer-page button,.consumer-page a:not(.consumer-balance a),.consumer-upload { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:40px; padding:9px 13px; border:1px solid #465258; border-radius:7px; color:#e2eaee; background:rgba(215,233,240,.055); text-decoration:none; font-size:12px; cursor:pointer; }
.consumer-page button:hover:not(:disabled),.consumer-page a:hover,.consumer-upload:hover { background:rgba(215,233,240,.12); }
.consumer-page .consumer-primary { background:#a4ced8; color:#102127; border-color:#c0dce3; font-weight:650; }
.consumer-page .consumer-primary:hover:not(:disabled) { background:#d6e8ed; }
.consumer-page button:disabled { opacity:.5; cursor:not-allowed; }
.consumer-page :is(button,a,input,summary):focus-visible,.consumer-upload:focus-within { outline:2px solid #a4ced8; outline-offset:4px; }
.consumer-preview-note { display:flex; align-items:baseline; gap:14px; padding:14px 0; margin-bottom:26px; border-block:1px solid #394449; color:#aebfc7; font-size:12px; line-height:1.65; }
.consumer-preview-note > span { color:#e0ebee; font-weight:650; flex:none; }
.consumer-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.pricing-card { position:relative; isolation:isolate; overflow:hidden; min-width:0; border:1px solid #4a6169; border-radius:14px; background:#141d21; }
.pricing-card-aurora { position:absolute; inset:0 0 auto; height:310px; z-index:-1; pointer-events:none; opacity:.65; background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--plan-tint) 30%,transparent),transparent 72%); mask-image:linear-gradient(#000,rgba(0,0,0,.6) 55%,transparent); }
.pricing-card-aurora canvas { display:block; }
.pricing-card::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:-1; background:linear-gradient(rgba(12,20,24,.34),rgba(12,20,24,.76) 260px,#141d21 370px); }
.pricing-card-content { position:relative; display:flex; flex-direction:column; height:100%; padding:30px; }
.consumer-plans h2 { font-size:19px; font-weight:600; margin:0 0 8px; }
.consumer-plans p { margin:0 0 28px; color:#adbec7; font-size:13px; }
.pricing-card-content > h2 + p { min-height:42px; line-height:1.6; }
.consumer-price { font-size:46px; line-height:1; color:#f1f6f7; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.consumer-price > span { font-size:12px; letter-spacing:0; color:#b4c5ce; margin-left:6px; }
.consumer-allowance { display:flex; align-items:center; gap:7px; min-height:24px; margin-top:20px; font-size:11px; color:#b4d4dd; }
.consumer-plans ul { list-style:none; padding:22px 0; margin:0; border-top:1px solid #39464d; margin-top:22px; }
.consumer-plans li { display:flex; align-items:flex-start; gap:9px; font-size:12px; color:#c2d0d6; margin:0 0 13px; line-height:1.55; }
.consumer-plans li svg { flex:none; margin-top:2px; color:#96bdc8; }
.pricing-card-content > :is(a,button) { width:100%; margin-top:auto; }
.pricing-audience-row { display:flex; align-items:center; gap:22px; margin:0 0 32px; }
.pricing-audience { display:inline-flex; padding:4px; border:1px solid #526269; border-radius:10px; background:#141a1d; }
.consumer-page .pricing-audience button { min-width:116px; min-height:42px; border:0; background:transparent; color:#b5c5cc; transition:background 160ms ease-out,color 160ms ease-out; }
.consumer-page .pricing-audience button[aria-pressed='true'] { background:#d6e8ed; color:#14262b; font-weight:650; }
.pricing-audience-row > p,.pricing-mode-note { color:#b0c1c9; font-size:12px; line-height:1.65; margin:0; }
.pricing-mode-note { margin-top:18px; max-width:78ch; }
.pricing-disclaimer { margin:12px 0 0; color:#b0c1c9; font-size:11px; line-height:1.6; }
.consumer-plans.business-plans { grid-template-columns:repeat(2,minmax(0,1fr)); }
.business-credits { display:flex; gap:12px; align-items:flex-start; margin:26px 0 30px; padding-block:20px; border-block:1px solid #45565d; color:#d6e8ed; }
.business-credits > svg { flex:none; margin-top:3px; }
.business-credits strong { display:block; font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; }
.business-credits span { display:block; color:#aebfc7; font-size:12px; line-height:1.65; margin-top:7px; }
.business-seat-control { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:26px; padding:8px; border:1px solid #4c5c64; border-radius:8px; }
.business-seat-control label { display:flex; align-items:center; gap:10px; color:#d9e6ec; font-size:13px; }
.business-seat-control input { width:60px; border:0; background:transparent; color:#edf5f7; font:600 16px 'Manrope Variable',sans-serif; text-align:center; padding:6px 0; border-radius:0; font-variant-numeric:tabular-nums; }
.consumer-page .business-seat-control button { width:40px; height:40px; padding:8px; border:0; }
.consumer-plans .business-total { margin:12px 0 0; font-size:12px; color:#d6e8ed; font-variant-numeric:tabular-nums; }
/* First-screen plan comparison: spend space on the complete cards, not the
 * introduction. No fixed card heights, clipping, scaled text or inner scroll. */
@media (min-width:681px) {
  .consumer-page.pricing-page { padding-top:calc(var(--nav-h) + 24px); }
  .pricing-page .pricing-card-content { padding:22px; }
  .pricing-page .pricing-card-content > h2 + p { margin-bottom:12px; }
  .pricing-page .consumer-allowance { margin-top:14px; }
  .pricing-page .consumer-plans ul { margin-top:16px; padding:16px 0; }
  .pricing-page .consumer-plans li { margin-bottom:8px; }
  .pricing-page .consumer-plans li:last-child { margin-bottom:0; }
  .pricing-page .business-credits { margin:4px 0 16px; padding-block:12px; }
  .pricing-page .business-seat-control { margin-top:16px; padding:4px; }
  .pricing-page .business-total { margin-top:8px; }
}
@media (min-width:1100px) and (min-height:740px) {
  .consumer-page.pricing-page { padding-top:calc(var(--nav-h) + 32px); }
  .pricing-comparison { display:flex; flex-direction:column; min-height:calc(100svh - var(--nav-h) - 48px); }
  .pricing-comparison > .consumer-plans { flex:1; }
  .pricing-page .pricing-card-content { padding:20px; }
  .pricing-page .consumer-plans h2 { line-height:1.2; }
  .pricing-page .pricing-card-content > h2 + p { min-height:0; }
  .pricing-page .business-credits { padding-block:8px; margin:0 0 12px; }
  .pricing-page .consumer-plans ul { padding-block:12px; margin-top:12px; }
}
.consumer-credit-explainer { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:80px; margin-top:54px; padding-top:34px; border-top:1px solid #364249; }
.consumer-credit-explainer h2,.community-detail h2 { margin:0 0 14px; font-size:24px; font-weight:500; letter-spacing:-.025em; }
.consumer-credit-explainer p,.community-detail p { color:#aebfc8; font-size:13px; line-height:1.8; max-width:68ch; }
.consumer-balance { display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.consumer-balance > svg { color:#a4ced8; }
.consumer-balance strong { font-size:30px; line-height:1.2; font-weight:550; }
.consumer-balance small { display:block; font-size:12px; font-weight:400; color:#b0c3ce; margin-top:7px; }
.consumer-balance a { font-size:12px; color:#b8d5df; text-underline-offset:4px; }
.consumer-purchase,.community-detail { position:relative; margin-top:36px; padding:28px; border:1px solid #586d78; background:rgba(30,37,42,.94); border-radius:10px; }
.consumer-purchase h2 { margin:0 0 14px; font-size:24px; }
.consumer-purchase p { max-width:68ch; color:#c1d0d7; font-size:13px; line-height:1.75; }
.consumer-page .consumer-close { position:absolute; right:12px; top:12px; min-height:30px; padding:5px; border:0; background:transparent; }
.community-actions { display:flex; flex-wrap:wrap; gap:8px; flex:none; }
.consumer-upload { position:relative; }
.consumer-upload input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.community-filter { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-bottom:24px; }
.community-filter nav { display:flex; flex-wrap:wrap; gap:4px; }
.community-filter nav button { border-color:transparent; background:transparent; color:#aebfc7; }
.community-filter nav button[aria-pressed='true'] { color:#eaf4f6; background:rgba(125,178,191,.14); border-color:#56707a; }
.community-filter input { min-width:0; width:230px; padding:11px 13px; font:inherit; font-size:12px; border-radius:6px; border:1px solid #46545c; background:rgba(9,16,20,.7); color:#ecf4f7; }
.community-filter input::placeholder { color:#a5bac5; }
.community-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.community-grid > article { border:1px solid #3c4c55; border-radius:12px; overflow:hidden; background:rgba(24,31,36,.88); }
.consumer-page .community-cover { position:relative; display:block; width:100%; padding:0; border:0; border-radius:0; background:#111b23; overflow:hidden; }
.community-cover img { display:block; width:100%; aspect-ratio:1.8; object-fit:cover; }
.community-cover > span { position:absolute; bottom:13px; right:14px; display:flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid #546b79; border-radius:5px; color:#d8e8f0; background:rgba(17,28,36,.92); font-size:10px; }
.community-card-copy { padding:22px; }
.community-card-copy > p:first-child { margin:0 0 12px; font-size:10px; color:#acc1cd; }
.community-card-copy h2 { margin:0 0 12px; }
.community-card-copy h2 button { padding:0; min-height:0; background:none; border:0; font-size:21px; font-weight:550; letter-spacing:-.02em; text-align:left; }
.community-card-copy > p { font-size:12px; color:#b5c7d0; line-height:1.75; margin:0; }
.community-card-copy footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:24px; padding-top:17px; border-top:1px solid #3b4b54; }
.community-card-copy footer > span { font-size:10px; color:#b7c9d1; }
.community-card-copy footer button { font-size:11px; white-space:nowrap; }
.community-detail { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; }
.community-detail > div:first-of-type { flex:1; min-width:0; }
.community-detail-actions { display:flex; flex-direction:column; gap:10px; margin:24px 10px 0 0; }
.community-detail details { margin-top:18px; }
.community-detail summary { cursor:pointer; color:#d6e8ed; font-size:12px; }
.community-detail details p { white-space:pre-wrap; overflow-wrap:anywhere; }
.community-saved-list { list-style:none; margin:20px 0 0; padding:0; }
.community-saved-list li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid #435660; }
.community-saved-list li > span { overflow-wrap:anywhere; }
.consumer-error { color:#f0b5ac; padding:14px; border:1px solid #9e6a65; border-radius:7px; }
.community-empty { margin:44px 0; color:#b9cbd4; }
#nav .nav-credits { position:relative; z-index:1; display:flex; align-items:center; flex:none; gap:6px; margin-left:auto; padding:0 10px; color:#d6e8ed; font:600 12px/1.2 'Manrope Variable',sans-serif; text-decoration:none; font-variant-numeric:tabular-nums; }
#nav .nav-credits small { display:block; color:#a1b7c1; font-size:8px; font-weight:400; margin-top:3px; }
#nav button:not(.cta) { flex-shrink:0; }
#nav .studio-nav-chevron { display:inline-block; margin-left:5px; vertical-align:middle; transition:transform 160ms ease-out; }
#nav [aria-expanded='true'] .studio-nav-chevron { transform:rotate(180deg); }
.studio-nav-menu { position:fixed; z-index:100; top:calc(var(--nav-h) + 8px); width:min(360px,calc(100vw - 24px)); padding:7px; border:1px solid #50636b; border-radius:12px; background:rgba(22,30,35,.97); box-shadow:0 16px 40px rgba(0,0,0,.36); backdrop-filter:blur(22px); font-family:'Manrope Variable',sans-serif; }
.studio-nav-menu a { display:flex; align-items:center; gap:14px; padding:15px 13px; border-radius:7px; text-decoration:none; color:#d6e8ed; }
.studio-nav-menu a > svg { flex:none; color:#91bdc8; }
.studio-nav-menu a strong { display:block; font-size:13px; font-weight:600; }
.studio-nav-menu a small { display:block; font-size:11px; color:#adbec7; margin-top:5px; line-height:1.5; }
.studio-nav-menu a:hover,.studio-nav-menu a[aria-current='page'] { background:rgba(125,178,191,.13); }
.studio-nav-menu a:focus-visible { outline:2px solid #a4ced8; outline-offset:-2px; }
.studio-nav-menu p { border-top:1px solid #3c4a51; margin:6px 8px 0; padding:12px 5px 5px; color:#adbec7; font-size:11px; }
#nav:has(.cta) .nav-account { width:auto; min-width:54px; white-space:nowrap; font-size:11px; padding-inline:8px; }
@media (min-width:981px) { #nav { padding-inline:20px; } #nav button:not(.cta) { padding-inline:13px; font-size:12px; } #nav .brand-lockup { margin-right:16px; } }
@media (max-width:1100px) { .consumer-heading { align-items:flex-start; flex-direction:column; gap:24px; } .pricing-card-content { padding:24px; } }
@media (min-width:681px) and (max-width:980px) {
  :root { --nav-h:94px; }
  #nav { flex-wrap:wrap; align-content:flex-start; padding:0; }
  #nav .brand-lockup { width:100%; height:44px; margin:0; justify-content:center; }
  #nav button:not(.cta) { height:49px; flex:0 0 calc(100% / var(--nav-tabs)); width:calc(100% / var(--nav-tabs)); padding:0 4px; font-size:11px; white-space:normal; line-height:1.2; }
  #nav .nav-account { position:absolute; right:15px; top:7px; width:30px; height:30px; margin:0; }
  #nav .nav-credits { position:absolute; top:10px; right:56px; }
}
@media (max-width:680px) {
  #nav button:not(.cta) { flex-basis:calc(100% / var(--nav-tabs)); width:calc(100% / var(--nav-tabs)); }
  #nav .nav-credits { position:absolute; top:8px; left:8px; margin:0; padding:0 6px; font-size:11px; }
  .consumer-page { width:calc(100% - 32px); padding-top:calc(var(--nav-h) + 30px); }
  .consumer-heading h1 { font-size:32px; }
  .consumer-heading p { font-size:13px; }
  .consumer-preview-note { align-items:flex-start; flex-direction:column; gap:4px; }
  .consumer-plans { grid-template-columns:1fr; }
  .consumer-plans.business-plans { grid-template-columns:1fr; }
  .pricing-audience-row { align-items:flex-start; flex-direction:column; gap:12px; }
  .consumer-credit-explainer { grid-template-columns:1fr; gap:30px; }
  .community-grid { grid-template-columns:1fr; }
  .community-filter { align-items:stretch; flex-direction:column; gap:15px; }
  .community-filter input { width:100%; }
  .community-filter nav button { padding:8px; font-size:11px; }
  .community-detail { flex-direction:column; padding:26px 20px; }
  .community-detail-actions { margin:0; width:100%; }
}
@media (prefers-reduced-motion:reduce) { .consumer-page .pricing-audience button { transition:none; } }
@media (max-width:520px) {
  :root { --nav-h:85px; }
  :root:has(#nav .cta) { --nav-h:85px; }
  #nav button:not(.cta) { flex-basis:calc(100% / var(--nav-tabs)); width:calc(100% / var(--nav-tabs)); height:44px; font-size:11px; }
}
@media (max-width:980px) {
  #nav .cta { display:inline-flex; position:absolute; top:6px; left:10px; height:30px; min-height:30px; padding:0 8px; margin:0; font-size:10px; }
}