.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;
}
.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; }
.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:50%; top:var(--nav-top); transform:translateX(-50%); height:var(--nav-h); width:max-content; max-width:calc(100vw - 32px); padding:0 11px 0 23px; border-radius:31px; background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03)); border: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:36px; top:12px; border-radius:18px; 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:36px; border:0; border-radius:18px; 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 { margin-left:22px; 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:calc(100vw - 32px); 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,.22); border-color:rgba(125,178,191,.72); box-shadow:0 0 30px -6px rgba(125,178,191,.72),inset 0 0 18px -8px rgba(214,232,237,.9); }
#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; } }
.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; }
}