:root {
  --bg: #0b0c10;
  --surface: #15171d;
  --line: #2a2c34;
  --text: #f1f2f4;
  --muted: #a0a5b2;
  --blue: #0868f8;
  --light: #eef0f2;
  --sans: "DM Sans", sans-serif;
  --display: "Space Grotesk", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  color-scheme: dark;
  /* Arrows like ↗ have an emoji form; keep them as plain glyphs on iOS/iPadOS. */
  font-variant-emoji: text;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}
body {
  margin: 0;
  overflow-x: clip;
}
body.modal-open {
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea {
  font: inherit;
}
button {
  color: inherit;
  cursor: pointer;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  border: 0;
}
button:disabled {
  cursor: default;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #80b2ff;
  outline-offset: 6px;
}
::selection {
  background: #176ef8;
  color: white;
}
img {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 500;
}
em {
  font-family: var(--serif);
  font-weight: 400;
}
svg {
  display: block;
}
.shell {
  width: min(1420px, calc(100% - 112px));
  margin-inline: auto;
}
.eyebrow {
  font-size: 0.75rem;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.13em;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 30;
  background: var(--blue);
  padding: 15px;
}
.skip-link:focus {
  top: 16px;
}
.scroll-progress {
  height: 2px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.header {
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  gap: 25px;
  position: relative;
  z-index: 3;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 1.9rem;
  letter-spacing: -0.06em;
  font-weight: 600;
}
.brand img {
  border-radius: 8px;
}
.brand span span,
.brand > span:not(.footer-dot) {
  font-weight: 400;
}
.header nav {
  display: flex;
  gap: 30px;
  align-items: center;
  font-size: 0.9375rem;
  color: #b8bdc7;
}
.header nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}
/* Underline draws in from the left on hover and stays on the section being read. */
.header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.header nav a:hover,
.header nav a[aria-current="true"] {
  color: white;
}
.header nav a:hover::after,
.header nav a[aria-current="true"]::after {
  transform: scaleX(1);
}
.nav-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c9ed72;
}
.header-cta {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 26px;
  border: 1px solid var(--blue);
  border-radius: 100px;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  padding: 14px 20px;
  font-size: 0.875rem;
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
/* "With a pulse": a soft ring breathes out from the sticky call to action. */
.header-cta::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid var(--blue);
  opacity: 0;
  z-index: -1;
  animation: cta-pulse 3s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
  pointer-events: none;
}
@keyframes cta-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  60%,
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
.header-cta:hover,
.header-cta:focus-visible {
  background: #257cff;
  border-color: #257cff;
  box-shadow: 0 6px 24px rgba(8, 104, 248, 0.35);
}
.header-cta:hover::before,
.header-cta:focus-visible::before {
  animation-play-state: paused;
  opacity: 0;
}
.header-cta > span[aria-hidden] {
  font-size: 1.35rem;
  transition: transform 0.25s;
}
.header-cta:hover > span[aria-hidden] {
  transform: translate(2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
  .header-cta::before {
    animation: none;
  }
  .header-cta > span[aria-hidden] {
    transition: none;
  }
}
.hero {
  padding-top: 32px;
  position: relative;
}
.hero-kicker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #c4c8d2;
}
.hero-edition {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #737b8c;
}
.hero-main {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 730px;
  align-items: center;
  padding-block: 55px;
}
.hero-copy {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.hero-copy a {
  pointer-events: auto;
}
h1 {
  font-size: clamp(5.7rem, 8.65vw, 8.75rem);
  letter-spacing: -0.075em;
  line-height: 0.9;
  max-width: 640px;
}
h1 > span {
  display: block;
}
h1 em {
  display: block;
  font-size: 1.22em;
  line-height: 0.95;
  color: #5a92ff;
  letter-spacing: -0.04em;
  margin-left: 9px;
  margin-top: 7px;
}
.hero-copy > p {
  font-size: 1.06rem;
  line-height: 1.65;
  max-width: 335px;
  color: #b3b8c4;
  margin-top: 36px;
}
.hero-copy > p em {
  font: inherit;
  color: white;
}
.round-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-top: 30px;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #939baa;
}
.round-link strong {
  color: #f1f2f4;
  font-weight: 500;
}
.round-icon {
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  width: 54px;
  height: 54px;
  flex: none;
  border: 1px solid #3a4151;
  border-radius: 50%;
  transition:
    background 0.25s,
    transform 0.25s;
}
.round-link:hover .round-icon {
  background: var(--blue);
  transform: rotate(45deg);
}
.hero-visual {
  position: absolute;
  width: 66%;
  right: -5%;
  top: 25px;
  aspect-ratio: 1;
  perspective: 1000px;
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: lighten;
  transform: perspective(1000px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transition: transform 0.6s cubic-bezier(0.2, 0.75, 0.2, 1);
  will-change: transform;
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.art-caption {
  position: absolute;
  right: 4%;
  bottom: 5%;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: #9ba6bd;
}
.art-index {
  position: absolute;
  right: 5%;
  top: 7%;
  font-family: var(--display);
  font-size: 0.75rem;
  color: #8b98af;
}
.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding-block: 0 35px;
  gap: 30px;
}
.hero-bottom > p {
  font-size: 0.875rem;
  color: #b0b6c2;
  line-height: 1.55;
}
.platform-list {
  display: flex;
  gap: 15px;
}
.platform-list span {
  font-size: 0.875rem;
  border: 1px solid #3d4350;
  border-radius: 100px;
  padding: 8px 20px;
}
.scroll-cue {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: #a2aaba;
}
.scroll-cue > span:last-child {
  font-size: 1.7rem;
  color: white;
}
.manifesto {
  padding-block: 115px 105px;
}
.manifesto .eyebrow {
  color: #929bac;
  margin-bottom: 40px;
}
.manifesto h2 {
  font-size: clamp(2.8rem, 4.9vw, 4.7rem);
  letter-spacing: -0.055em;
  line-height: 1.18;
}
.manifesto h2 em {
  color: #b2baca;
}
.manifesto h2 > span {
  color: #6d98ed;
}
.manifesto-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}
.asterisk {
  font-size: 4rem;
  color: #78a5ff;
  line-height: 1;
}
.manifesto-bottom p {
  font-size: 1rem;
  line-height: 1.7;
  color: #a0a9ba;
  max-width: 455px;
}
.light-section {
  background: var(--light);
  color: #11141b;
  color-scheme: light;
}
.expertise {
  padding-block: 95px 100px;
}
.section-head > .eyebrow {
  margin-bottom: 35px;
  color: #7896c7;
}
.light-section .eyebrow {
  color: #525e70;
}
.section-head > div {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}
.section-head h2 {
  font-size: clamp(2.5rem, 4.5vw, 4.25rem);
  letter-spacing: -0.065em;
  line-height: 1.05;
}
.section-head h2 em {
  font-size: 1.17em;
  letter-spacing: -0.02em;
}
.section-head > div > p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  padding-bottom: 5px;
}
.light-section .section-head > div > p {
  color: #606b7a;
}

.playground {
  padding-block: 110px 86px;
}
.playground .section-head > div > p {
  max-width: 290px;
}
.experiments {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  margin-top: 53px;
}
.experiment {
  border: 1px solid #303641;
  border-radius: 18px;
  overflow: hidden;
  background: #13161c;
}
.experiment-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 25px 21px;
  font-size: 0.75rem;
  letter-spacing: 0.075em;
  color: #aab6cb;
}
.experiment-label > span:last-child {
  font-size: 1.45rem;
  line-height: 1;
}

@keyframes pop {
  40% {
    transform: translateY(-9px) rotate(-2deg);
  }
  100% {
    transform: none;
  }
}
.experiment-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 23px 25px;
  color: #a5aebe;
  font-size: 0.875rem;
}

.focus-star {
  color: #a3bd8b;
}
.focus-stage {
  min-height: 383px;
  margin-inline: 18px;
  background: #1c2420;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 23px 20px;
  color: #ddf0d7;
}
.focus-stage > p {
  font-size: 0.875rem;
  color: #bacbb6;
  margin-bottom: 10px;
}
.timer-ring {
  width: 226px;
  height: 226px;
  position: relative;
}
.timer-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.timer-ring circle {
  fill: none;
  stroke-width: 1.3;
}
.ring-track {
  stroke: #3c4b40;
}
#ring-progress {
  stroke: #c9ed9d;
  stroke-dasharray: 678.584;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}
.timer-ring > div {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
#timer {
  font-family: var(--display);
  font-size: 3.7rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  line-height: 1;
}
.timer-caption {
  font-size: 0.75rem;
  letter-spacing: 0.065em;
  color: #8faaa0;
}
.timer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.timer-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #d2e9c6;
  color: #203422;
  border-radius: 100px;
  padding: 14px 22px;
  min-width: 178px;
  font-size: 0.875rem;
  transition: background 0.2s;
}
.timer-button:hover {
  background: #e3f7d9;
}
.timer-button > span {
  font-size: 0.75rem;
}
.timer-reset {
  border-radius: 50%;
  border: 1px solid #576653;
  background: transparent;
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: #cce0c2;
}
.timer-reset:hover {
  background: #3b4a3e;
}
.control-note {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.playground-note {
  font-size: 0.875rem;
  color: #818da3;
  text-align: center;
  margin-top: 30px;
}
.invite {
  padding-block: 109px 82px;
}
.invite > .eyebrow {
  color: #8c9db8;
  margin-bottom: 39px;
}
.invite-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
}
.invite h2 {
  font-size: clamp(4rem, 9.2vw, 9.4rem);
  line-height: 0.93;
  letter-spacing: -0.075em;
}
.invite h2 em {
  font-size: 1.15em;
  letter-spacing: -0.035em;
  color: #6f9fff;
}
.project-circle {
  width: 205px;
  height: 205px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: rotate(-12deg);
  flex: none;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.3s;
  box-shadow: 0 0 65px #0868f812;
}
.project-circle > span:first-child {
  font-size: 4.5rem;
  line-height: 1;
}
.project-circle > span:last-child {
  font-size: 1rem;
  line-height: 1.3;
}
.project-circle:hover {
  transform: rotate(0) scale(1.05);
  background: #257cff;
}
.text-button {
  background: transparent;
  border-bottom: 1px solid #4d6384;
  padding: 12px 0;
  display: flex;
  gap: 35px;
  font-size: 1rem;
}
.text-button:hover {
  color: #81acff;
}
.footer {
  border-top: 1px solid #303949;
  padding-block: 35px 24px;
}
.footer-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
}
.footer .brand {
  gap: 0;
}
.footer .footer-dot {
  font-size: 0.75rem;
  align-self: start;
  margin: 4px 0 0 6px;
  color: #889bb5;
}
.footer-line > span {
  font-size: 0.875rem;
  color: #a0adc1;
}
.footer-line > a:last-child {
  font-size: 0.875rem;
  color: #a0adc1;
}
.footer-line > a:last-child:hover {
  color: white;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 0.75rem;
  letter-spacing: 0.035em;
  color: #6f809a;
  margin-top: 39px;
}
#brief-dialog {
  background: #eff1f5;
  color: #121924;
  border: 0;
  border-radius: 18px;
  padding: 43px;
  width: min(590px, calc(100% - 30px));
  max-height: 90dvh;
  overflow: auto;
  color-scheme: light;
  box-shadow: 0 30px 100px #0008;
}
#brief-dialog::backdrop {
  background: #05070bd9;
  backdrop-filter: blur(12px);
}
.dialog-close {
  position: absolute;
  right: 18px;
  top: 15px;
  font-size: 2rem;
  background: transparent;
  color: #344257;
  width: 38px;
  height: 38px;
}
.dialog-close:hover {
  background: #dae1eb;
  border-radius: 50%;
}
#brief-dialog > .eyebrow {
  font-size: 0.75rem;
  color: #61718c;
  margin: 2px 15px 25px 0;
}
#brief-dialog h2 {
  font-size: 3.7rem;
  line-height: 0.98;
  letter-spacing: -0.055em;
}
#brief-dialog h2 em {
  color: #2164fa;
  font-size: 1.15em;
}
.dialog-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: #607089;
  margin: 23px 0;
}
fieldset {
  border: 0;
  margin: 0 0 24px;
  padding: 0;
}
legend,
.idea-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 13px;
}
.platform-choices {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.platform-choices label {
  cursor: pointer;
  position: relative;
}
.platform-choices input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.platform-choices span {
  display: block;
  border: 1px solid #bbc6d6;
  padding: 10px 14px;
  border-radius: 100px;
  font-size: 0.875rem;
  transition:
    background 0.2s,
    color 0.2s;
}
.platform-choices input:checked + span {
  background: #1c61f2;
  color: white;
  border-color: #1c61f2;
}
.platform-choices input:focus-visible + span {
  outline: 3px solid #1c61f2;
  outline-offset: 3px;
}
textarea {
  background: white;
  width: 100%;
  resize: vertical;
  min-height: 112px;
  max-height: 260px;
  border: 1px solid #bac6d6;
  border-radius: 9px;
  padding: 14px;
  color: #172338;
  font-size: 1rem;
  line-height: 1.5;
}
textarea:focus {
  outline: none;
  border-color: #2164fa;
  box-shadow: 0 0 0 3px rgba(33, 100, 250, 0.35);
}
.form-note {
  font-size: 0.75rem;
  line-height: 1.5;
  color: #697990;
  margin: 9px 0 20px;
}
.download-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1460f8;
  color: white;
  padding: 16px 22px;
  border-radius: 100px;
  width: 100%;
  font-size: 1rem;
}
.download-button:hover {
  background: #084dd5;
}
#brief-status {
  font-size: 0.875rem;
  color: #31523a;
  margin-top: 12px;
}
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 20px);
  z-index: 15;
  background: #e2f2d5;
  color: #243526;
  padding: 15px 25px;
  border-radius: 100px;
  font-size: 0.875rem;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.3s;
  max-width: calc(100% - 30px);
  text-align: center;
}
.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (min-width: 1600px) {
  .hero-main {
    min-height: 810px;
  }
  .hero-visual {
    top: -5px;
    width: 64%;
  }
}
@media (max-width: 1150px) {
  .shell {
    width: calc(100% - 64px);
  }
  .header {
    height: 96px;
  }
  .hero-main {
    min-height: 650px;
  }
  .hero-visual {
    width: 65%;
    right: -3%;
    top: 50px;
  }
  h1 {
    font-size: 6.1rem;
  }
  .hero-copy > p {
    max-width: 295px;
  }

  .experiment-controls {
    font-size: 0.75rem;
    padding-inline: 21px;
  }

  .project-circle {
    width: 175px;
    height: 175px;
  }
  .hero-edition {
    font-size: 0.75rem;
  }
}
@media (max-width: 800px) {
  .header nav {
    display: none;
  }
  .hero-main {
    min-height: 580px;
  }
  h1 {
    font-size: 5rem;
  }
  .hero-visual {
    width: 65%;
    right: -5%;
    top: 90px;
  }
  .hero-copy > p {
    max-width: 270px;
    font-size: 1rem;
  }
  .hero-bottom {
    gap: 20px;
  }
  .scroll-cue {
    display: none;
  }
  .section-head > div {
    display: block;
  }
  .section-head > div > p {
    margin-top: 25px;
  }
  .section-head h2 {
    font-size: 3.6rem;
  }

  .experiments {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin-inline: auto;
  }
  .experiment-controls {
    font-size: 0.875rem;
  }

  .focus-stage {
    min-height: 383px;
  }
  .footer-line > span {
    display: none;
  }
  .manifesto h2 {
    font-size: 3.2rem;
  }
  .manifesto-bottom p {
    font-size: 1rem;
    max-width: 380px;
  }
}
@media (max-width: 600px) {
  .shell {
    width: calc(100% - 40px);
  }
  .header {
    height: 82px;
    gap: 15px;
  }
  .brand {
    font-size: 1.6rem;
    gap: 8px;
  }
  .brand img {
    width: 29px;
    height: 29px;
  }
  .header-cta {
    padding: 12px 14px;
    font-size: 0.875rem;
    gap: 14px;
  }
  .header-cta > span[aria-hidden] {
    font-size: 1.1rem;
  }
  .hero {
    padding-top: 24px;
  }
  .hero-kicker > .eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.07em;
  }
  .hero-edition {
    display: none;
  }
  .hero-main {
    display: block;
    padding-block: 39px 0;
    min-height: 0;
  }
  .hero-copy {
    max-width: 100%;
  }
  h1 {
    font-size: clamp(4.8rem, 19vw, 7rem);
    line-height: 0.88;
    max-width: 100%;
  }
  h1 em {
    margin-left: 4px;
  }
  .hero-copy > p {
    max-width: 285px;
    line-height: 1.65;
    margin-top: 29px;
    font-size: 1rem;
  }
  .round-link {
    margin-top: 22px;
    font-size: 0.875rem;
  }
  .round-icon {
    width: 46px;
    height: 46px;
    font-size: 1.5rem;
  }
  .hero-visual {
    position: relative;
    width: calc(100% + 24px);
    margin: -8px -12px 0;
    right: auto;
    top: auto;
    aspect-ratio: 1;
    overflow: hidden;
  }
  .art-caption {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    bottom: 5%;
    right: 2%;
  }
  .art-index {
    top: 12%;
    right: 2%;
    font-size: 0.75rem;
  }
  .hero-bottom {
    padding-block: 20px 27px;
    align-items: center;
  }
  .hero-bottom > p {
    font-size: 0.875rem;
    max-width: 143px;
  }
  .platform-list {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: end;
    max-width: 164px;
  }
  .platform-list span {
    font-size: 0.75rem;
    padding: 7px 12px;
  }
  .manifesto {
    padding-block: 68px;
  }
  .manifesto .eyebrow {
    font-size: 0.75rem;
    margin-bottom: 28px;
  }
  .manifesto h2 {
    font-size: clamp(2rem, 7.7vw, 2.8rem);
    line-height: 1.22;
    letter-spacing: -0.05em;
  }
  .manifesto-bottom {
    margin-top: 30px;
    align-items: start;
    gap: 24px;
  }
  .asterisk {
    font-size: 3rem;
  }
  .manifesto-bottom p {
    font-size: 0.875rem;
    line-height: 1.65;
  }
  .manifesto-bottom p br {
    display: none;
  }
  .expertise {
    padding-block: 62px 65px;
  }
  .section-head > .eyebrow {
    margin-bottom: 25px;
  }
  .section-head h2 {
    font-size: clamp(2.5rem, 10.5vw, 3.3rem);
    line-height: 1.09;
  }
  .section-head > div > p {
    font-size: 1rem;
    margin-top: 25px;
  }

  .playground {
    padding-block: 66px;
  }
  .playground .section-head h2 {
    font-size: clamp(2.5rem, 10.7vw, 3.4rem);
  }
  .experiments {
    margin-top: 34px;
    gap: 20px;
  }
  .experiment {
    border-radius: 13px;
  }
  .experiment-label {
    padding: 22px 18px 18px;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }

  .experiment-controls {
    padding: 20px 18px;
    font-size: 0.75rem;
    gap: 12px;
    line-height: 1.5;
  }

  .focus-stage {
    margin-inline: 12px;
    padding-inline: 12px;
    min-height: 359px;
  }
  .focus-stage > p {
    font-size: 0.875rem;
  }
  .timer-ring {
    width: 215px;
    height: 215px;
  }
  .timer-caption {
    font-size: 0.75rem;
  }
  .playground-note {
    font-size: 0.875rem;
    line-height: 1.7;
    max-width: 310px;
    margin: 25px auto 0;
  }
  .invite {
    padding-block: 69px 60px;
  }
  .invite > .eyebrow {
    margin-bottom: 31px;
  }
  .invite-main {
    gap: 18px;
    align-items: end;
  }
  .invite h2 {
    font-size: clamp(3.4rem, 13.5vw, 5rem);
  }
  .project-circle {
    width: 105px;
    height: 105px;
    gap: 3px;
    margin-bottom: 1px;
  }
  .project-circle > span:first-child {
    font-size: 2.4rem;
  }
  .project-circle > span:last-child {
    font-size: 0.75rem;
  }
  .text-button {
    margin-top: 12px;
    font-size: 0.875rem;
    gap: 25px;
  }
  .footer {
    padding-block: 25px 20px;
  }
  .footer-line {
    gap: 20px;
  }
  .footer-line > a:last-child {
    font-size: 0.875rem;
  }
  .footer-bottom {
    font-size: 0.75rem;
    margin-top: 25px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .footer-bottom > span:last-child {
    display: none;
  }
  #brief-dialog {
    padding: 29px 23px;
    max-height: 94dvh;
  }
  #brief-dialog > .eyebrow {
    max-width: 230px;
    font-size: 0.75rem;
    margin: 0 26px 24px 0;
  }
  #brief-dialog h2 {
    font-size: 3.25rem;
  }
  .dialog-intro {
    font-size: 0.875rem;
  }
  .platform-choices span {
    font-size: 0.875rem;
    padding: 9px 12px;
  }
  .toast {
    border-radius: 14px;
    bottom: 18px;
    width: max-content;
  }
}
@media (max-width: 360px) {
  .header-cta {
    font-size: 0.75rem;
    gap: 8px;
    padding: 11px 12px;
  }
  .brand {
    font-size: 1.45rem;
  }

  .experiment-controls {
    padding-inline: 14px;
  }
  .project-circle {
    width: 87px;
    height: 87px;
  }
  .project-circle > span:last-child {
    font-size: 0.75rem;
  }
  .invite-main {
    gap: 12px;
  }
  .invite h2 {
    font-size: 3.1rem;
  }
  .hero-bottom > p {
    font-size: 0.75rem;
  }
  .platform-list {
    max-width: 151px;
  }
  .hero-kicker > .eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .hero-visual img {
    transform: none !important;
  }
}
@media (forced-colors: active) {
  .scroll-progress {
    display: none;
  }
  h1 em,
  .manifesto h2 > span,
  .invite h2 em {
    color: CanvasText;
  }
  .header-cta,
.timer-button,
.download-button {
    border: 1px solid ButtonText;
  }
  .timer-ring circle {
    stroke: CanvasText;
  }
}
/* Concept lab: original visual worlds and a live, adjustable preview. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
[hidden] {
  display: none !important;
}
.hero-visual img {
  mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 83%, transparent 100%);
}
.hero-visual .art-caption {
  bottom: 7%;
}
.concept-lab {
  padding-block: 20px 110px;
}
.concept-lab .section-head h2 {
  font-size: clamp(3rem, 5.4vw, 5.1rem);
}
.concept-lab .section-head > div > p {
  max-width: 340px;
}
.lab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 45px;
  margin-bottom: 27px;
  gap: 25px;
}
.lab-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lab-filters button {
  background: transparent;
  border: 1px solid #394151;
  border-radius: 100px;
  padding: 11px 19px;
  color: #a9b6ca;
  font-size: 0.875rem;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.lab-filters button:hover {
  border-color: #8298ba;
  color: white;
}
.lab-filters button[aria-pressed="true"] {
  background: #e8edf6;
  border-color: #e8edf6;
  color: #121e30;
}
.lab-filters button span {
  font-size: 0.75rem;
  margin-left: 9px;
  opacity: 0.6;
}
.lab-hint {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: #91a3be;
  display: flex;
  gap: 18px;
  align-items: center;
}
.lab-hint span {
  font-size: 1.5rem;
}
.concept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 22px;
}
.concept-card {
  padding: 0;
  background: none;
  text-align: left;
  min-width: 0;
  display: block;
}
.concept-card-art {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1.08;
  border-radius: 9px;
  background: #151b25;
  isolation: isolate;
}
.concept-card-art:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0005, transparent 27%, transparent 54%, #0008);
  pointer-events: none;
}
.concept-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.5s;
}
.concept-card:hover img {
  transform: scale(1.055);
  filter: saturate(1.1);
}
.card-art-top {
  position: absolute;
  z-index: 2;
  inset: 20px 20px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  letter-spacing: 0.075em;
  color: #fff;
  text-shadow: 0 1px 12px #0008;
}
.card-open {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #fff7;
  border-radius: 50%;
  font-size: 1.15rem;
  transition:
    background 0.3s,
    color 0.3s,
    transform 0.3s;
}
.concept-card:hover .card-open {
  background: #fff;
  color: #101828;
  transform: rotate(45deg);
}
.card-art-title {
  position: absolute;
  z-index: 2;
  bottom: 23px;
  left: 22px;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.9rem);
  letter-spacing: -0.065em;
  color: #fff;
  transition: transform 0.45s;
}
.concept-card:hover .card-art-title {
  transform: translateY(-4px);
}
.concept-card-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 2px 0;
  color: #b2bdd0;
  font-size: 0.875rem;
}
.concept-card-info > span:last-child {
  font-size: 0.75rem;
  color: #7b8ba6;
  letter-spacing: 0.06em;
}
.lab-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid #2c3545;
  margin-top: 37px;
  padding-top: 28px;
}
.lab-bottom > p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #7f90ad;
}
.lab-more {
  background: transparent;
  border: 1px solid #51627d;
  color: #dce7f7;
  border-radius: 100px;
  padding: 15px 22px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 26px;
}
.lab-more:hover {
  background: var(--blue);
  border-color: var(--blue);
}
.lab-more span {
  font-size: 1.3rem;
}
.concept-dialog {
  padding: 0;
  width: min(1260px, calc(100% - 40px));
  max-width: none;
  height: auto;
  max-height: calc(100dvh - 40px);
  border: 1px solid #3b4556;
  border-radius: 15px;
  background: #12161e;
  color: #edf2fb;
  overflow: auto;
  box-shadow: 0 35px 100px #000a;
}
.concept-dialog::backdrop {
  background: #03060bee;
  backdrop-filter: blur(14px);
}
.concept-dialog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 25px;
  border-bottom: 1px solid #30394a;
  position: sticky;
  top: 0;
  z-index: 8;
  background: #141923;
}
.concept-dialog-top > span {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: #a1b2cd;
}
.concept-dialog-top > div {
  display: flex;
  gap: 8px;
  align-items: center;
}
.concept-dialog-top #concept-position {
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  color: #8b9dbc;
  margin-right: 14px;
}
.concept-dialog-top button {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #44516a;
  background: transparent;
  font-size: 1.2rem;
}
.concept-dialog-top button:hover {
  background: #2c3d5a;
}
.concept-dialog-top #concept-close {
  border: 0;
  font-size: 1.7rem;
  margin-left: 10px;
}
.concept-dialog-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 0;
}
.preview-workspace {
  background: #090d14;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 35px;
  overflow: clip; /* clip, not hidden: sticky parts of the prototypes keep working */
  min-height: 620px;
  background-image: radial-gradient(#c9d9f517 0.7px, transparent 0.7px);
  background-size: 16px 16px;
}
.preview-device {
  width: 100%;
  max-width: 690px;
  border: 1px solid #3c4961;
  --preview-radius: 12px;
  border-radius: var(--preview-radius);
  overflow: hidden;
  box-shadow: 0 25px 50px #0006;
  background: #111928;
  transition:
    width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-radius 0.2s;
}
.device-topbar {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: #1c2432;
  padding: 0 12px;
  color: #8091ac;
  font-size: 0.75rem;
  line-height: 1;
}
.device-topbar > span:first-child {
  font-size: 0.625rem;
  letter-spacing: 3px;
}
.device-topbar > span:last-child {
  font-size: 1rem;
}
.mini-page {
  position: relative;
  min-height: 475px;
  background: #0c1119;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  --concept-accent: #326dff;
  --concept-ink: #fff;
}
.mini-art {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.mini-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1s;
}
.mini-page:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #02051080, transparent 28%, #03070bb8);
  z-index: -1;
  pointer-events: none;
}
.mini-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
}
.mini-nav strong {
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: -0.04em;
}
.mini-nav button {
  width: 35px;
  height: 35px;
  border: 1px solid #ffffff60;
  border-radius: 50%;
  background: #0002;
  color: white;
  font-size: 1.5rem;
  line-height: 1;
  backdrop-filter: blur(10px);
}
.mini-nav button[aria-pressed="true"] {
  color: #ffe4ad;
  background: #0006;
}
.mini-copy {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 61px;
}
.mini-copy > span {
  font-size: 0.75rem;
  letter-spacing: 0.085em;
  color: #ffffffce;
  line-height: 1.6;
}
.mini-copy h3 {
  font-size: clamp(2.3rem, 4vw, 3.5rem);
  letter-spacing: -0.065em;
  line-height: 1.02;
  max-width: 400px;
  margin-top: 13px;
  text-shadow: 0 2px 20px #0005;
}
.mini-copy button {
  margin-top: 24px;
  background: var(--concept-accent);
  color: var(--concept-ink);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 13px 17px;
  border-radius: calc(var(--preview-radius) * 2);
  font-size: 0.875rem;
  transition:
    border-radius 0.2s,
    transform 0.2s;
}
.mini-copy button:hover {
  transform: translateY(-3px);
}
.mini-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px 28px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #fff3;
  font-size: 0.75rem;
  letter-spacing: 0.065em;
  color: #ccd6e6;
}
.mobile-device {
  width: 274px;
  max-width: 100%;
}
.mobile-device .device-topbar {
  justify-content: center;
  height: 25px;
}
.mobile-device .device-topbar > span:first-child,
.mobile-device .device-topbar > span:last-child {
  display: none;
}
.mobile-device .mini-page {
  min-height: 485px;
}
.mobile-device .mini-nav {
  padding: 20px;
}
.mobile-device .mini-nav strong {
  font-size: 1rem;
}
.mobile-device .mini-copy {
  left: 20px;
  right: 20px;
  bottom: 66px;
}
.mobile-device .mini-copy h3 {
  font-size: 2.4rem;
  max-width: 240px;
  line-height: 1.04;
}
.mobile-device .mini-copy > span {
  font-size: 0.75rem;
  letter-spacing: 0.055em;
}
.mobile-device .mini-copy button {
  padding: 12px 14px;
  font-size: 0.875rem;
  gap: 15px;
}
.mobile-device .mini-bottom {
  padding: 15px 20px;
  font-size: 0.75rem;
}
.preview-motion .mini-art img {
  animation: world-breathe 9s ease-in-out infinite alternate;
}
@keyframes world-breathe {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.12) translateY(-6px);
  }
}
.concept-info {
  padding: 31px 27px;
  border-left: 1px solid #30394a;
}
.concept-info > .eyebrow {
  font-size: 0.75rem;
  color: #819abe;
  margin-bottom: 17px;
  letter-spacing: 0.075em;
}
.concept-info h2 {
  font-size: 2.9rem;
  line-height: 1;
  letter-spacing: -0.065em;
}
.concept-info > p:not(.eyebrow) {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #9eaec8;
  margin-top: 18px;
}
.concept-customize {
  border-top: 1px solid #354056;
  padding-top: 22px;
  margin-top: 25px;
}
.control-heading {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 20px;
}
.concept-customize fieldset {
  margin-bottom: 22px;
}
.concept-customize legend {
  font-size: 0.75rem;
  color: #91a2bf;
  font-weight: 400;
  margin-bottom: 10px;
}
.device-choices {
  display: flex;
  border: 1px solid #41516b;
  border-radius: 7px;
  padding: 3px;
  gap: 4px;
}
.device-choices button {
  font-size: 0.875rem;
  padding: 8px 12px;
  flex: 1;
  border-radius: 4px;
  background: transparent;
  color: #879bbd;
}
.device-choices button[aria-pressed="true"] {
  background: #dbe5f6;
  color: #152238;
}
.corner-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: #aabbd5;
}
.corner-control output {
  font-size: 0.75rem;
  color: #89a0c4;
  font-variant-numeric: tabular-nums;
}
#corner-slider {
  width: 100%;
  accent-color: #648fff;
  margin: 12px 0 16px;
  cursor: ew-resize;
  min-height: 22px;
}
.motion-control {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.875rem;
  color: #aabbd5;
  cursor: pointer;
  position: relative;
}
.motion-control > span:first-child {
  flex: 1;
}
.motion-control input {
  position: absolute;
  right: 0;
  width: 38px;
  height: 22px;
  opacity: 0;
}
.switch-track {
  width: 38px;
  height: 22px;
  border-radius: 100px;
  border: 1px solid #52627d;
  background: #263246;
  position: relative;
  transition: background 0.25s;
}
.switch-track:before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #bacce6;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.25s;
}
.motion-control input:checked + .switch-track {
  background: #2c6bff;
  border-color: #2c6bff;
}
.motion-control input:checked + .switch-track:before {
  transform: translateX(16px);
  background: #fff;
}
.motion-control input:focus-visible + .switch-track {
  outline: 3px solid #8db6ff;
  outline-offset: 3px;
}
.use-direction {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #2568ff;
  color: white;
  border-radius: 100px;
  padding: 14px 17px;
  font-size: 0.875rem;
  margin-top: 26px;
}
.use-direction:hover {
  background: #427cff;
}
.concept-info > p.concept-disclosure {
  font-size: 0.75rem;
  color: #8092b0;
  line-height: 1.65;
  margin-top: 14px;
}
.concept-info > p.concept-saved {
  color: #b8d997;
  font-size: 0.75rem;
  min-height: 18px;
  margin-top: 10px;
}
@media (min-width: 1000px) {
  .concept-card:nth-child(3n + 2) {
    transform: translateY(26px);
  }
  .concept-grid {
    padding-bottom: 26px;
  }
  .concept-lab .section-head {
    margin-bottom: 55px;
  }
}
@media (max-width: 1000px) {
  .concept-dialog-content {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
  .concept-info {
    padding: 28px 22px;
  }
  .preview-workspace {
    padding: 24px;
    min-height: 590px;
  }
  .concept-info h2 {
    font-size: 2.6rem;
  }
  .concept-grid {
    gap: 27px 17px;
  }
  .card-art-top {
    inset: 15px 15px auto;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
  }
  .card-open {
    width: 30px;
    height: 30px;
  }
  .concept-card-info {
    font-size: 0.75rem;
    gap: 7px;
  }
  .card-art-title {
    left: 17px;
    font-size: 2.2rem;
  }
  .lab-hint {
    display: none;
  }
  .concept-dialog-top > span {
    letter-spacing: 0.04em;
  }
  .concept-dialog {
    width: calc(100% - 30px);
  }
}
@media (max-width: 800px) {
  .concept-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .concept-card-info {
    font-size: 0.875rem;
  }
  .concept-lab {
    padding-bottom: 75px;
  }
  .concept-dialog-content {
    grid-template-columns: 1fr;
  }
  .preview-workspace {
    min-height: 0;
    padding: 24px;
  }
  .preview-device {
    max-width: 600px;
  }
  .preview-device.mobile-device {
    max-width: 274px;
  }
  .concept-info {
    border-left: 0;
    border-top: 1px solid #30394a;
    padding: 29px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
  }
  .concept-info > .eyebrow,
  .concept-info h2,
  .concept-info > p#concept-description {
    grid-column: 1;
  }
  .concept-customize {
    grid-column: 2;
    grid-row: 1/5;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }
  .concept-info > .eyebrow {
    margin-bottom: 12px;
  }
  .concept-info > p#concept-description {
    margin-top: 15px;
  }
  .use-direction {
    grid-column: 1/3;
    max-width: 400px;
    margin-top: 28px;
  }
  .concept-info > p.concept-disclosure {
    grid-column: 1/3;
  }
  .concept-info > p.concept-saved {
    grid-column: 1/3;
  }
  .mini-page {
    min-height: 400px;
  }
  .mobile-device .mini-page {
    min-height: 450px;
  }
}
@media (max-width: 600px) {
  .hero-visual .art-caption {
    bottom: 8%;
    right: 4%;
    font-size: 0.75rem;
  }
  .concept-lab {
    padding-top: 0;
    padding-bottom: 62px;
  }
  .concept-lab .section-head h2 {
    font-size: clamp(2.7rem, 11vw, 3.6rem);
  }
  .lab-toolbar {
    margin-top: 30px;
    margin-bottom: 23px;
  }
  .lab-filters {
    gap: 7px;
  }
  .lab-filters button {
    padding: 9px 13px;
    font-size: 0.875rem;
  }
  .lab-filters button span {
    font-size: 0.75rem;
    margin-left: 6px;
  }
  .concept-grid {
    gap: 25px 13px;
  }
  .concept-card-art {
    aspect-ratio: 1/1.3;
    border-radius: 7px;
  }
  .card-art-top {
    inset: 11px 11px auto;
    font-size: 0.75rem;
    letter-spacing: 0;
  }
  .card-art-top > span:first-child {
    font-size: 0.75rem;
    max-width: 80px;
    line-height: 1.4;
  }
  .card-open {
    width: 27px;
    height: 27px;
    font-size: 1rem;
  }
  .card-art-title {
    font-size: 1.75rem;
    bottom: 14px;
    left: 13px;
  }
  .concept-card-info {
    font-size: 0.75rem;
    line-height: 1.5;
    padding-top: 11px;
    align-items: start;
  }
  .concept-card-info > span:last-child {
    display: none;
  }
  .lab-bottom {
    display: block;
    margin-top: 28px;
    padding-top: 23px;
  }
  .lab-bottom > p {
    font-size: 0.875rem;
  }
  .lab-more {
    margin-top: 21px;
    font-size: 0.875rem;
    padding: 13px 19px;
  }
  .concept-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 11px;
  }
  .concept-dialog-top {
    padding: 13px;
    gap: 10px;
  }
  .concept-dialog-top > span {
    font-size: 0.75rem;
    letter-spacing: 0.035em;
    max-width: 110px;
    line-height: 1.5;
  }
  .concept-dialog-top > div {
    gap: 6px;
  }
  .concept-dialog-top #concept-position {
    font-size: 0.75rem;
    margin-right: 4px;
    white-space: nowrap;
  }
  .concept-dialog-top button {
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }
  .concept-dialog-top #concept-close {
    font-size: 1.6rem;
    margin-left: 2px;
  }
  .preview-workspace {
    padding: 20px 14px;
  }
  .mini-page {
    min-height: 370px;
  }
  .mini-nav {
    padding: 19px;
  }
  .mini-nav strong {
    font-size: 1rem;
  }
  .mini-copy {
    left: 20px;
    right: 20px;
    bottom: 64px;
  }
  .mini-copy h3 {
    font-size: 2.5rem;
    max-width: 255px;
  }
  .mini-copy > span {
    font-size: 0.75rem;
    letter-spacing: 0.055em;
  }
  .mini-copy button {
    font-size: 0.875rem;
    padding: 12px 14px;
    gap: 17px;
  }
  .mini-bottom {
    padding-inline: 20px;
    font-size: 0.75rem;
  }
  .mobile-device {
    width: 250px;
  }
  .mobile-device .mini-page {
    min-height: 422px;
  }
  .mobile-device .mini-copy h3 {
    font-size: 2.25rem;
  }
  .concept-info {
    display: block;
    padding: 26px 22px;
  }
  .concept-info h2 {
    font-size: 2.8rem;
  }
  .concept-customize {
    border-top: 1px solid #354056;
    margin-top: 25px;
    padding-top: 23px;
  }
  .concept-info > .eyebrow {
    font-size: 0.75rem;
  }
  .use-direction {
    max-width: none;
  }
  .concept-info > p.concept-disclosure {
    font-size: 0.75rem;
  }
  .device-topbar {
    font-size: 0.75rem;
    gap: 8px;
  }
  .device-topbar > span:first-child {
    display: none;
  }
}
@media (max-width: 360px) {
  .concept-grid {
    gap: 22px 10px;
  }
  .card-art-title {
    font-size: 1.5rem;
    left: 10px;
  }
  .card-art-top {
    inset: 10px;
  }
  .card-art-top > span:first-child {
    font-size: 0.75rem;
    max-width: 70px;
  }
  .card-open {
    display: none;
  }
  .concept-card-info {
    font-size: 0.75rem;
  }
  .concept-dialog-top > span {
    max-width: 80px;
    font-size: 0.75rem;
  }
  .concept-dialog-top #concept-position {
    font-size: 0.75rem;
  }
  .lab-filters button {
    padding: 8px 11px;
    font-size: 0.875rem;
  }
  .concept-dialog-top > div {
    gap: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .preview-motion .mini-art img {
    animation: none !important;
  }
  .concept-card:hover img {
    transform: none;
  }
  .preview-device {
    transition: none;
  }
}

@media (min-width: 801px) {
  .hero-visual {
    right: -3%;
  }
}
.hero-visual img {
  mask-image: radial-gradient(ellipse at 53% 48%, #000 43%, #000c 65%, transparent 83%);
}
/* Featured products and contact */
.selected-work {
  padding-block: 92px 15px;
}
.selected-work > .section-head {
  margin-bottom: 44px;
}
.real-projects {
  display: grid;
  gap: 28px;
}
.real-project {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: 17px;
  min-height: 540px;
  isolation: isolate;
}
.real-project-copy {
  padding: 43px 48px 45px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.project-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  font-weight: 500;
  margin-bottom: 28px;
}
.real-app-icon {
  width: 65px;
  height: 65px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 8px 25px #0002;
  margin-bottom: 25px;
}
.real-project h3 {
  font-size: clamp(2.7rem, 4.4vw, 4.3rem);
  line-height: 1.01;
  letter-spacing: -0.06em;
}
.real-project h3 em {
  font-size: 1.14em;
  letter-spacing: -0.025em;
}
.real-project-copy > p {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 335px;
  margin-top: 23px;
}
.real-project-link {
  margin-top: 27px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 13px 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-size: 1rem;
}
.real-project-link span {
  font-size: 1.5rem;
  transition: transform 0.3s;
}
.real-project-link:hover span {
  transform: translate(3px, -3px);
}
.real-project-art {
  position: relative;
  min-width: 0;
}
.fedpet-project {
  background: #e2ebda;
  color: #263a35;
}
.fedpet-art {
  background: white;
}
.fedpet-art > img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: contain;
  padding: 14px;
}
.fedpet-project .real-project-copy > p {
  color: #4e6154;
}
.youandme-project {
  background: #f7eee1;
  color: #942b22;
}
.youandme-project .real-project-copy {
  grid-column: 2;
  justify-content: center;
}
.youandme-art {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #fffaf3;
}
.together-characters {
  width: min(80%, 341px);
  height: auto;
}
.together-wordmark {
  width: 80%;
  max-width: 400px;
  height: 84px;
  overflow: hidden;
  position: relative;
}
.together-wordmark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}
.youandme-project .real-project-copy > p {
  color: #8b6357;
}
.rythmos-project {
  background: #030b1b;
  color: #e7f1ff;
  border: 1px solid #29426a;
  min-height: 580px;
}
.rythmos-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.rythmos-project:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #020818bd, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.rythmos-project .project-eyebrow {
  color: #94b9ec;
}
.rythmos-project .real-project-copy > p {
  color: #a3bce2;
}
.rythmos-project .real-app-icon {
  width: 65px;
  height: 65px;
}
.rythmos-project h3 em {
  color: #a9c3ff;
}
.contact-details {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 35px;
  margin-top: 58px;
  border-block: 1px solid #30415a;
  padding-block: 28px;
}
.contact-details > a,
.contact-details > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 13px 12px;
  align-items: center;
}
.contact-details span:first-child {
  grid-column: 1/3;
  font-size: 0.75rem;
  color: #859dbc;
  letter-spacing: 0.12em;
}
.contact-details strong {
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  letter-spacing: -0.025em;
}
.contact-details span:last-child {
  font-size: 1.4rem;
  color: #749cf0;
}
.contact-icon {
  width: 26px;
  height: 26px;
  color: #749cf0;
  transition: color 0.2s;
}
.contact-details > a:hover .contact-icon {
  color: #8db2ff;
}
.contact-details > a:hover strong {
  color: #8db2ff;
}
.project-dialog {
  padding: 0;
  width: min(1120px, calc(100% - 36px));
  max-width: none;
  max-height: calc(100dvh - 36px);
  border: 1px solid #3b4556;
  border-radius: 14px;
  background: #141923;
  color: #edf2fb;
  overflow: auto;
}
.project-dialog::backdrop {
  background: #03060be8;
  backdrop-filter: blur(14px);
}
.project-dialog-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 24px;
  border-bottom: 1px solid #354157;
  position: sticky;
  top: 0;
  z-index: 5;
  background: #141923;
}
.project-dialog-bar > span {
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  color: #9db0ce;
}
.project-dialog-bar button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  color: #c2d0e7;
  font-size: 1.8rem;
}
.project-dialog-bar button:hover {
  background: #2c3b52;
}
.project-dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 1fr;
}
.project-gallery {
  padding: 25px;
  background: #0b1019;
  min-width: 0;
}
.project-image-frame {
  height: 500px;
  border-radius: 9px;
  overflow: hidden;
  background: white;
  position: relative;
}
.project-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.project-image-frame[data-tone="warm"] {
  background: #fff9f1;
  padding: 45px;
}
.project-image-frame[data-tone="mint"] {
  background: #ccd9ca;
  padding: 50px;
}
.project-image-frame[data-tone="mint"] img {
  border-radius: 20px;
}
.project-image-frame[data-tone="wordmark"] {
  background: #fff9f1;
}
.project-image-frame[data-tone="wordmark"] img {
  object-fit: contain;
}
.project-image-frame[data-tone="dark"] {
  background: #020617;
}
.project-gallery-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
}
.project-gallery-controls button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #435471;
  background: transparent;
  font-size: 1.2rem;
}
.project-gallery-controls button:hover {
  background: #213551;
}
.project-gallery-controls p {
  font-size: 0.875rem;
  color: #9baecb;
  text-align: center;
}
.project-story {
  padding: 39px 31px;
}
.project-story > .eyebrow {
  color: #899dbb;
  margin-bottom: 22px;
}
.project-story h2 {
  font-size: 3rem;
  letter-spacing: -0.06em;
}
.project-story > p:not(.eyebrow) {
  font-size: 1rem;
  line-height: 1.75;
  color: #a8b7ce;
  margin-top: 24px;
}
.project-story dl {
  border-top: 1px solid #354057;
  margin: 30px 0 0;
}
.project-story dl > div {
  padding: 13px 0;
  border-bottom: 1px solid #354057;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 0.875rem;
}
.project-story dt {
  color: #7f96b7;
}
.project-story dd {
  margin: 0;
  text-align: right;
  color: #bdcce1;
}
.project-story > button {
  background: #2769fc;
  color: white;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 18px;
  margin-top: 30px;
  font-size: 0.875rem;
}
.project-contact {
  display: block;
  font-size: 0.875rem;
  color: #9eb9e5;
  margin-top: 20px;
  text-align: center;
}
/* Keep the hero artwork inside its own row at every width. */
.hero-main {
  grid-template-columns: 0.94fr 1.06fr;
  gap: 26px;
  min-height: 0;
  padding-block: 55px;
  align-items: center;
}
.hero-visual {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 100% !important;
  aspect-ratio: 1;
  margin: 0;
  align-self: center;
  min-width: 0;
}
.hero-bottom {
  position: relative;
  z-index: 3;
  background: var(--bg);
  padding-top: 24px;
  border-top: 1px solid #252c38;
}
.hero-visual .art-caption {
  bottom: 4%;
  right: 5%;
}
@media (max-width: 1000px) {
  .real-project {
    min-height: 510px;
  }
  .real-project-copy {
    padding: 35px;
  }
  .real-project h3 {
    font-size: 3rem;
  }
  .contact-details {
    gap: 20px;
  }
  .project-image-frame {
    height: 470px;
  }
  .project-story {
    padding: 31px 25px;
  }
  .project-dialog-body {
    grid-template-columns: minmax(0, 1.2fr) 1fr;
  }
  .hero-main {
    gap: 8px;
  }
  .hero-copy h1 {
    font-size: clamp(4.4rem, 8.6vw, 6.1rem);
  }
}
@media (max-width: 760px) {
  .selected-work {
    padding-top: 62px;
  }
  .real-project {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .real-project-copy {
    padding: 34px;
  }
  .real-project-art {
    height: 460px;
  }
  .fedpet-art {
    grid-row: 2;
  }
  .youandme-project .real-project-copy {
    grid-column: 1;
    grid-row: 1;
  }
  .youandme-art {
    grid-column: 1;
    grid-row: 2;
    height: 425px;
  }
  .rythmos-project {
    min-height: 540px;
  }
  .rythmos-project .real-project-copy {
    max-width: 440px;
  }
  .rythmos-scene {
    object-position: 62% center;
  }
  .rythmos-project:after {
    background: linear-gradient(90deg, #020818ce, #02081822);
  }
  .contact-details {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block: 10px;
  }
  .contact-details > a,
  .contact-details > div {
    padding-block: 20px;
    border-bottom: 1px solid #26384f;
  }
  .contact-details > div:last-child {
    border: 0;
  }
  .contact-details strong {
    font-size: 1.3rem;
  }
  .project-dialog-body {
    grid-template-columns: 1fr;
  }
  .project-image-frame {
    height: 420px;
  }
  .project-story {
    padding: 28px;
  }
  .hero-main {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    max-width: 620px;
    justify-self: center;
  }
  .hero-copy h1 {
    font-size: clamp(4.8rem, 16vw, 7rem);
  }
  .hero-copy > p {
    max-width: 350px;
  }
  .hero-main {
    padding-bottom: 15px;
  }
  .hero-bottom {
    padding-top: 24px;
  }
  .hero-visual .art-caption {
    bottom: 5%;
  }
}
@media (max-width: 600px) {
  .selected-work {
    padding-top: 58px;
  }
  .selected-work > .section-head {
    margin-bottom: 30px;
  }
  .real-projects {
    gap: 20px;
  }
  .real-project {
    border-radius: 12px;
  }
  .real-project-copy {
    padding: 30px 27px;
  }
  .real-project h3 {
    font-size: 3.2rem;
  }
  .real-app-icon {
    width: 57px;
    height: 57px;
    border-radius: 13px;
    margin-bottom: 23px;
  }
  .real-project-copy > p {
    font-size: 1rem;
    margin-top: 22px;
  }
  .real-project-art {
    height: 435px;
  }
  .together-characters {
    width: 80%;
    max-width: 320px;
  }
  .youandme-art {
    height: 390px;
  }
  .together-wordmark {
    height: 72px;
    width: 88%;
  }
  .rythmos-project .real-project-copy {
    padding: 30px 27px 40px;
  }
  .rythmos-project .real-app-icon {
    width: 57px;
    height: 57px;
  }
  .contact-details {
    margin-top: 35px;
  }
  .project-dialog {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 20px);
  }
  .project-dialog-bar {
    padding: 12px 18px;
  }
  .project-dialog-bar > span {
    font-size: 0.75rem;
    letter-spacing: 0.07em;
  }
  .project-gallery {
    padding: 15px;
  }
  .project-image-frame {
    height: 360px;
  }
  .project-image-frame[data-tone="warm"],
  .project-image-frame[data-tone="mint"] {
    padding: 27px;
  }
  .project-gallery-controls p {
    font-size: 0.75rem;
  }
  .project-story {
    padding: 27px 24px;
  }
  .project-story h2 {
    font-size: 2.7rem;
  }
  .project-story > p:not(.eyebrow) {
    font-size: 1rem;
  }
  .project-story dl > div {
    font-size: 0.875rem;
  }
  .hero-main {
    padding-top: 35px;
  }
  .hero-visual {
    overflow: hidden;
  }
  .hero-bottom .platform-list {
    justify-content: end;
  }
}
/* Ten small invitations to play. */
.experiments {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.experiment {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.experiment-controls {
  margin-top: auto;
  min-height: 80px;
}
.experiment-label {
  min-height: 72px;
}
.demo-stage {
  margin: 0 18px;
  border-radius: 10px;
  min-height: 383px;
  position: relative;
  overflow: hidden;
}
.demo-heading h3 {
  font-size: 2.15rem;
  letter-spacing: -0.045em;
  line-height: 1.1;
  font-weight: 400;
}
.demo-heading h3 em {
  font-size: 1.16em;
  letter-spacing: -0.02em;
}
.demo-heading p {
  font-size: 0.875rem;
  line-height: 1.55;
  margin-top: 13px;
  opacity: 0.7;
}
.small-control {
  color: inherit;
  background: transparent;
  font-size: 0.875rem;
  border: 1px solid #8c9ca445;
  border-radius: 7px;
  padding: 8px 11px;
  white-space: nowrap;
  min-height: 36px;
  transition: background 0.2s;
}
.small-control:hover:not(:disabled) {
  background: #8c9ca424;
}
.small-control:disabled {
  opacity: 0.3;
  cursor: default;
}
.control-pair {
  display: flex;
  gap: 7px;
}
.demo-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  border-radius: 100px;
  padding: 13px 17px;
  font-size: 0.875rem;
}
.demo-pill:disabled {
  opacity: 0.5;
}
.demo-stage input[type="range"] {
  accent-color: currentColor;
  cursor: ew-resize;
}
.demo-stage button:focus-visible,
.experiment-controls button:focus-visible {
  outline: 3px solid #7c9dff;
  outline-offset: 3px;
}
.drawing-stage {
  background: #f1eee7;
  color: #273632;
  padding: 27px 26px 18px;
  display: flex;
  flex-direction: column;
}
.drawing-surface {
  height: 214px;
  position: relative;
  margin-top: 13px;
  border-block: 1px solid #283b3220;
  background-image: radial-gradient(#283b322e 0.8px, transparent 0.8px);
  background-size: 18px 18px;
}
.drawing-surface canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}
.drawing-surface > span {
  position: absolute;
  right: 10px;
  bottom: 18px;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  color: #7a8780;
  pointer-events: none;
}

.ink-options {
  display: flex;
  gap: 9px;
}
.ink-options button {
  width: 25px;
  height: 25px;
  border: 4px solid #f1eee7;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1px transparent;
}
.ink-options button[aria-pressed="true"] {
  box-shadow: 0 0 0 1px var(--ink);
}

.drawing-experiment .experiment-controls {
  font-size: 0.75rem;
}
.music-stage {
  background: #24203c;
  color: #ded5ff;
  padding: 29px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.music-stage .demo-heading {
  max-width: 310px;
}
.sequencer {
  display: grid;
  grid-template-columns: 40px repeat(8, minmax(0, 1fr));
  gap: 8px 6px;
  align-items: center;
  margin: 32px 0;
}
.sequence-row-label {
  font-size: 0.75rem;
  color: #a296c9;
}
.sequence-step {
  aspect-ratio: 1;
  border-radius: 5px;
  background: #39314f;
  border: 1px solid #5b4c78;
  transition:
    background 0.15s,
    transform 0.15s;
  position: relative;
}
.sequence-step[aria-pressed="true"] {
  background: #b798eb;
  border-color: #b798eb;
  box-shadow: inset 0 1px 0 #ffffff57;
}
.sequence-step[data-row="1"][aria-pressed="true"] {
  background: #d0afcf;
  border-color: #d0afcf;
}
.sequence-step[data-row="2"][aria-pressed="true"] {
  background: #eee4bb;
  border-color: #eee4bb;
}
.sequence-step.current-step {
  outline: 2px solid #f3ebff;
  outline-offset: 2px;
}
.sequence-step:hover {
  transform: translateY(-2px);
}
.sequencer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.sequencer-bottom .demo-pill {
  background: #e5dbfd;
  color: #352551;
  white-space: nowrap;
}
.sequencer-bottom label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  flex: 1;
  max-width: 130px;
  color: #bbaed2;
}
.sequencer-bottom label output {
  color: #e6d9fa;
  letter-spacing: 0;
}
.sequencer-bottom input {
  grid-column: 1/3;
  width: 100%;
  min-width: 0;
  height: 23px;
  color: #c7adf0;
}
.music-experiment .experiment-controls {
  font-size: 0.75rem;
}

.launch-stage {
  background: #302341;
  color: #ede0f6;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 420px;
}
.launch-stage .demo-heading {
  position: relative;
  z-index: 1;
}
.launch-stage .demo-heading h3 {
  font-size: 2.3rem;
}
.launch-stage .demo-heading p {
  font-size: 0.75rem;
  max-width: 240px;
  min-height: 38px;
  opacity: 0.65;
}
.launch-control {
  margin-top: 20px;
  position: relative;
}
.launch-control > button {
  width: 102px;
  height: 102px;
  position: relative;
  border: 1px solid #a68bbf;
  border-radius: 50%;
  background: #473354;
  color: #eddef8;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  --charge: 0%;
  transition:
    background 0.3s,
    box-shadow 0.5s;
}
.launch-charge {
  position: absolute;
  inset: auto 0 0;
  height: var(--charge);
  background: #d3b7e5;
}
.launch-instruction {
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  color: #bba3c9;
  position: relative;
  margin-top: 22px;
}

.launch-stage.launched .launch-control > button {
  box-shadow: 0 0 60px #ceaae545;
  background: #d3b7e5;
}
.launch-stage.launched .launch-control:after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.5rem;
  color: #4d305e;
  pointer-events: none;
}

.launch-stage #launch-again {
  font-size: 0.75rem;
  position: absolute;
  bottom: 15px;
  padding: 5px 10px;
  min-height: 28px;
}

@media (max-width: 1100px) {
  .demo-stage {
    margin-inline: 14px;
  }
  .music-stage,
.drawing-stage {
    padding: 24px 20px;
  }
  .sequencer {
    gap: 7px 5px;
    grid-template-columns: 32px repeat(8, minmax(0, 1fr));
  }
  .sequencer-bottom {
    gap: 12px;
  }
  .sequencer-bottom .demo-pill {
    padding: 12px;
    font-size: 0.75rem;
  }

  .experiment-controls {
    padding-inline: 20px;
  }
  .control-note {
    font-size: 0.75rem;
  }
}
@media (max-width: 800px) {
  .experiments {
    grid-template-columns: 1fr;
    max-width: 620px;
  }
  .demo-stage {
    margin-inline: 18px;
  }
  .music-stage,
.drawing-stage {
    padding: 28px;
  }
  .sequence-step {
    max-height: 40px;
  }
  .sequencer {
    gap: 10px 8px;
    grid-template-columns: 40px repeat(8, minmax(0, 1fr));
  }
  .sequencer-bottom .demo-pill {
    font-size: 0.875rem;
    padding: 13px 17px;
  }

  .demo-heading h3 {
    font-size: 2.35rem;
  }

  .experiment-controls {
    padding-inline: 25px;
  }
}
@media (max-width: 600px) {
  .experiments {
    gap: 21px;
  }
  .demo-stage {
    margin-inline: 12px;
    min-height: 360px;
  }
  .experiment-label {
    min-height: 65px;
  }
  .experiment-controls {
    min-height: 76px;
    padding: 18px;
  }
  .music-stage,
.drawing-stage {
    padding: 24px 20px;
  }
  .demo-heading h3 {
    font-size: 2rem;
  }
  .demo-heading p {
    font-size: 0.875rem;
  }
  .drawing-surface {
    height: 218px;
  }

  .ink-options {
    gap: 7px;
  }
  .control-pair {
    gap: 4px;
  }
  .control-pair .small-control {
    font-size: 0.75rem;
    padding: 7px 9px;
  }
  .drawing-experiment .experiment-controls > span {
    max-width: 140px;
  }
  .sequencer {
    gap: 9px 5px;
    grid-template-columns: 31px repeat(8, minmax(0, 1fr));
    margin-block: 32px;
  }
  .sequence-step {
    min-height: 26px;
    border-radius: 4px;
  }
  .sequencer-bottom {
    gap: 15px;
  }
  .sequencer-bottom .demo-pill {
    padding: 12px;
    font-size: 0.75rem;
    gap: 12px;
  }
  .sequencer-bottom label {
    max-width: 100px;
  }
  .sequence-row-label {
    font-size: 0.75rem;
  }

  .launch-stage {
    min-height: 420px;
  }
  .launch-stage .demo-heading h3 {
    font-size: 2.3rem;
  }
}
@media (max-width: 360px) {
  .music-stage,
.drawing-stage {
    padding-inline: 16px;
  }
  .sequencer {
    grid-template-columns: 25px repeat(8, minmax(0, 1fr));
    gap: 8px 4px;
  }
  .sequence-step {
    min-height: 22px;
  }
  .sequencer-bottom {
    gap: 10px;
  }
  .sequencer-bottom .demo-pill {
    padding: 12px 10px;
    gap: 8px;
    font-size: 0.75rem;
  }
  .sequence-row-label {
    font-size: 0.75rem;
  }

  .demo-heading h3 {
    font-size: 1.9rem;
  }

  .drawing-experiment .experiment-controls > span {
    max-width: 115px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .launch-control > button,
.sequence-step {
    transition: none;
  }
  .sequence-step:hover {
    transform: none;
  }
}
.youandme-art,
.project-image-frame[data-tone="warm"] {
  background: #fff;
}

.sequence-row-label {
  font-size: 0.75rem;
}
.sequencer {
  grid-template-columns: 40px repeat(8, minmax(0, 1fr));
}
@media (max-width: 600px) {
  .sequencer {
    grid-template-columns: 34px repeat(8, minmax(0, 1fr));
  }
}
@media (max-width: 360px) {
  .sequencer {
    grid-template-columns: 33px repeat(8, minmax(0, 1fr));
  }
  .sequencer-bottom {
    flex-wrap: wrap;
    gap: 14px;
  }
  .sequencer-bottom label {
    max-width: none;
    flex-basis: 90px;
  }
  .music-stage {
    min-height: 380px;
  }
}

@media (max-width: 1000px) {
  .header {
    height: auto;
    min-height: 96px;
    padding-block: 17px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .header nav {
    display: flex;
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
    gap: 15px;
    padding-top: 8px;
    border-top: 1px solid #252c38;
  }
  .header nav a {
    min-height: 34px;
    font-size: 0.875rem;
  }
  .header-cta {
    margin-left: auto;
  }
}
@media (max-width: 360px) {
  .header nav a {
    font-size: 0.75rem;
  }
}
.project-actions {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-top: auto;
  padding-top: 22px;
}
.project-actions .real-project-link {
  margin-top: 0;
}
.app-store-link {
  font-size: 0.875rem;
  margin-top: 16px;
  opacity: 0.8;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
}
.app-store-link:hover {
  opacity: 1;
  border-color: currentColor;
}
.project-store {
  display: block;
  text-align: center;
  background: #e6edf8;
  color: #1a2c44;
  border-radius: 100px;
  font-size: 0.875rem;
  padding: 15px 18px;
  margin-top: 28px;
}
.project-store[hidden] {
  display: none;
}
.project-store:not([hidden]) + #project-inspiration {
  background: transparent;
  border: 1px solid #52698c;
  margin-top: 12px;
}
.real-project .project-eyebrow {
  line-height: 1.6;
}
.real-project-copy > p {
  max-width: 370px;
}
/* Concrete website concepts: blueprint boards and working flows. */
.concept-grid.has-blueprints {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 35px 25px;
}
.concept-card.blueprint-card {
  transform: none;
  min-width: 0;
}
.blueprint-card .concept-card-art {
  aspect-ratio: 4/3;
  background: #e9e6df;
  border: 1px solid #535c6a;
  border-radius: 10px;
  isolation: isolate;
}
.blueprint-card .concept-card-art:after {
  display: none;
}
.blueprint-card .concept-card-art img {
  object-fit: contain;
  transform: none;
}
.blueprint-card:hover .concept-card-art img {
  transform: scale(1.025);
}
.blueprint-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 20px;
}
.blueprint-card-title strong {
  font-size: 1.8rem;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.05em;
}
.blueprint-card-title > span {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #95b3df;
  text-align: right;
}
.blueprint-card .concept-card-info {
  padding-top: 10px;
  font-size: 0.875rem;
  color: #a6b0c2;
}
.concept-dialog.is-blueprint {
  width: min(1440px, calc(100% - 40px));
}
.is-blueprint .concept-dialog-content {
  grid-template-columns: minmax(0, 1fr) 305px;
}
.is-blueprint .preview-workspace {
  display: block;
  min-height: 0;
  padding: 22px;
  background: #0c1420;
}
.blueprint-workspace {
  width: 100%;
}
.blueprint-view-tabs {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 19px;
  padding: 4px;
  border: 1px solid #3a4d68;
  border-radius: 100px;
  width: fit-content;
  margin-inline: auto;
}
.blueprint-view-tabs button {
  font-size: 0.875rem;
  border-radius: 100px;
  background: transparent;
  color: #90a6c6;
  padding: 11px 18px;
}
.blueprint-view-tabs button[aria-pressed="true"] {
  background: #dfe9f8;
  color: #1d3450;
}
#blueprint-board {
  border: 1px solid #42536c;
  border-radius: 8px;
  overflow: hidden;
  background: #e9e7e0;
}
#blueprint-image {
  width: 100%;
  height: auto;
  max-height: 660px;
  object-fit: contain;
  display: block;
}
#blueprint-board > p {
  font-size: 0.75rem;
  background: #172436;
  color: #b0c2db;
  padding: 14px 20px;
  line-height: 1.6;
}
.blueprint-summary {
  margin-top: 27px;
  border-top: 1px solid #3a4960;
  padding-top: 24px;
}
.blueprint-summary > span {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: #829aba;
  display: block;
  margin-bottom: 14px;
}
.blueprint-summary h3 {
  font-size: 1.3rem;
  letter-spacing: -0.035em;
  line-height: 1.25;
  font-weight: 400;
}
.blueprint-summary p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #b2c2d9;
  margin-top: 12px;
}
.blueprint-summary > span:nth-of-type(2) {
  margin-top: 27px;
}
.blueprint-workspace[hidden],
.blueprint-summary[hidden],
#blueprint-board[hidden],
#blueprint-prototype[hidden],
.is-blueprint .preview-device,
.is-blueprint .concept-customize {
  display: none !important;
}
.is-blueprint .concept-info > .eyebrow {
  line-height: 1.5;
}
.blueprint-prototype {
  padding: 24px 28px;
  border-radius: 8px;
  min-height: 620px;
  --proto-bg: #f2efe7;
  --proto-ink: #344133;
  --proto-accent: #819077;
  background: var(--proto-bg);
  color: var(--proto-ink);
}

.proto-muted {
  font-size: 0.75rem;
  opacity: 0.65;
  line-height: 1.65;
  margin: 8px 0 14px;
}

.blueprint-prototype button:focus-visible,
.blueprint-prototype input:focus-visible {
  outline: 3px solid #407bff;
  outline-offset: 3px;
}
.proto-casa {
  --proto-bg: #f1e4d2;
  --proto-ink: #654532;
  --proto-accent: #a95438;
}

.proto-luma {
  --proto-bg: #f4f0fb;
  --proto-ink: #574070;
  --proto-accent: #aa8fc9;
  border-radius: 20px;
}

.proto-field {
  --proto-bg: #e8e9e3;
  --proto-ink: #20211d;
  --proto-accent: #b3bf23;
  border-radius: 0;
}

.proto-table {
  --proto-bg: #fff0ce;
  --proto-ink: #ae3529;
  --proto-accent: #bc4533;
  border: 2px solid #bb4d36;
}

.proto-shift {
  --proto-bg: #f2f3f5;
  --proto-ink: #2356e2;
  --proto-accent: #ed743c;
}

.manifesto-art {
  position: relative;
  height: clamp(230px, 35vw, 440px);
  margin-top: 35px;
  overflow: hidden;
}
.manifesto-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mix-blend-mode: screen;
}
.manifesto-art > span {
  position: absolute;
  bottom: 12px;
  left: 0;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: #7788a7;
}
.manifesto-bottom {
  margin-top: 28px;
}
@media (max-width: 1100px) {
  .is-blueprint .concept-dialog-content {
    grid-template-columns: minmax(0, 1fr) 275px;
  }
  .is-blueprint .preview-workspace {
    padding: 17px;
  }
  .blueprint-prototype {
    padding: 22px;
  }
}
@media (max-width: 800px) {
  .is-blueprint .concept-dialog-content {
    grid-template-columns: 1fr;
  }
  .is-blueprint .concept-info {
    display: block;
  }
  .is-blueprint .concept-info h2 {
    font-size: 2.8rem;
  }
  .blueprint-prototype {
    max-width: 640px;
    margin-inline: auto;
    min-height: 0;
  }
  .blueprint-card-title strong {
    font-size: 1.6rem;
  }
  .blueprint-card-title > span {
    font-size: 0.625rem;
  }
  .concept-grid.has-blueprints {
    gap: 28px 17px;
  }

  .manifesto-art {
    height: 290px;
  }
}
@media (max-width: 600px) {
  .concept-grid.has-blueprints {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .blueprint-card .concept-card-art {
    aspect-ratio: 4/3;
  }
  .blueprint-card-title {
    margin-top: 15px;
  }
  .blueprint-card-title strong {
    font-size: 1.7rem;
  }
  .blueprint-card-title > span {
    font-size: 0.75rem;
    max-width: 150px;
  }
  .blueprint-card .concept-card-info {
    font-size: 0.875rem;
  }
  .concept-dialog.is-blueprint {
    width: calc(100% - 16px);
  }
  .is-blueprint .preview-workspace {
    padding: 14px 10px;
  }
  .blueprint-view-tabs {
    gap: 0;
    width: 100%;
    justify-content: stretch;
  }
  .blueprint-view-tabs button {
    padding: 10px 8px;
    font-size: 0.75rem;
    flex: 1;
    white-space: nowrap;
  }
  #blueprint-board > p {
    font-size: 0.75rem;
    padding: 12px 15px;
  }
  .blueprint-prototype {
    padding: 20px 17px;
  }

  .manifesto-art {
    height: 245px;
    margin-top: 24px;
  }
  .manifesto-art img {
    object-fit: contain;
  }
  .manifesto-art > span {
    font-size: 0.625rem;
    max-width: 250px;
    line-height: 1.6;
  }
  .manifesto-bottom {
    margin-top: 22px;
  }
}
.preview-device.mobile-device {
  width: 260px;
  max-width: 100%;
  aspect-ratio: 9/19;
  height: auto;
  max-height: 560px;
  align-self: center;
  flex: none;
  display: flex;
  flex-direction: column;
  transition: border-radius 0.2s;
}
.preview-device.mobile-device .device-topbar {
  height: 25px;
  flex: none;
}
.preview-device.mobile-device .mini-page {
  flex: 1;
  min-height: 0;
  height: auto;
}
.preview-device.mobile-device .mini-copy h3 {
  font-size: 2.25rem;
}
.concept-card:not(.blueprint-card) .concept-card-art {
  aspect-ratio: 1/1.1;
}
@media (max-width: 600px) {
  .preview-device.mobile-device {
    width: 240px;
    max-height: 510px;
  }
  .preview-device.mobile-device .mini-page {
    min-height: 0;
  }
  .preview-device.mobile-device .mini-copy h3 {
    font-size: 2.05rem;
  }
}
.experiment {
  display: flex;
  flex-direction: column;
}
.experiment > .experiment-controls:last-child {
  margin-top: auto;
}

#focus-task {
  min-width: 0;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #62718b;
  background: transparent;
  color: #edf1f8;
  padding: 11px 0;
  font-size: 0.875rem;
  border-radius: 0;
}

.focus-stage {
  flex: 1;
  min-height: 490px;
  justify-content: center;
}
.focus-presets,
.music-presets {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.focus-presets button,
.music-presets button {
  border: 1px solid #77847766;
  border-radius: 100px;
  background: transparent;
  color: inherit;
  font-size: 0.75rem;
  padding: 8px 13px;
  min-height: 34px;
}
.focus-presets button[aria-pressed="true"] {
  background: #d2e9c6;
  color: #203422;
  border-color: #d2e9c6;
}
#focus-task {
  max-width: 320px;
  text-align: center;
  border-color: #647661;
  color: #e5f1df;
  margin: 10px 0 17px;
  font-size: 0.75rem;
}
#focus-task::placeholder {
  color: #a2b39c;
}
.focus-stage > p {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.control-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.small-control:disabled {
  opacity: 0.4;
}
.music-stage {
  gap: 24px;
}
.music-presets button {
  border-color: #9d8ecb66;
}
.music-presets button[aria-pressed="true"] {
  background: #d6c7ff;
  color: #352653;
  border-color: #d6c7ff;
}
.music-presets #sequence-variation {
  margin-left: auto;
  border: 0;
}

.launch-stage {
  flex: 1;
  min-height: 470px;
  padding-bottom: 76px;
}
.launch-next {
  position: absolute;
  bottom: 18px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.launch-next[hidden] {
  display: none;
}
.launch-next #launch-brief {
  background: #e2c9f2;
  color: #49315c;
  border-radius: 100px;
  padding: 12px 17px;
  font-size: 0.875rem;
}
.launch-stage #launch-again {
  position: static;
  font-size: 0.75rem;
  min-height: 38px;
}
.proto-muted {
  font-size: 0.75rem;
}
.manifesto-art > span {
  font-size: 0.75rem;
}
.blueprint-prototype h4 {
  margin-bottom: 0;
}
.experiment input:focus-visible {
  outline: 2px solid #8ab4ff;
  outline-offset: 4px;
}
@media (max-width: 600px) {
  .focus-stage {
    min-height: 450px;
  }

  .music-presets {
    gap: 6px;
  }
  .music-presets button {
    padding: 8px 11px;
  }
  .music-presets #sequence-variation {
    margin-left: 0;
  }
  .drawing-experiment .experiment-controls,
  .music-experiment .experiment-controls {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .drawing-experiment .experiment-controls > span {
    max-width: none;
  }
  .control-pair {
    justify-content: flex-start;
  }

  .launch-stage {
    min-height: 450px;
  }

  .manifesto-art > span {
    font-size: 0.75rem;
  }
}
/* Flyfy: a clearly marked upcoming LukApp product. */
.flyfy-project {
  background: #f1f3ff;
  color: #2c3d72;
  border: 1px solid #c8d4f0;
  grid-template-columns: 1fr 1fr;
}
.flyfy-project .real-project-copy {
  justify-content: center;
}
.flyfy-project .project-eyebrow {
  color: #56679a;
}
.flyfy-project h3 {
  font-size: clamp(2.8rem, 3.9vw, 4rem);
}
.flyfy-project h3 em {
  color: #6654d9;
}
.flyfy-project .real-project-copy > p {
  color: #56668a;
}
.flyfy-art {
  background: #95c9f1;
  overflow: hidden;
  min-height: 560px;
}
.flyfy-art > img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center;
}
.flyfy-art-caption {
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 22px;
  padding: 13px 17px;
  background: #eef4ffe3;
  border: 1px solid #ffffff8a;
  backdrop-filter: blur(12px);
  color: #38478a;
  border-radius: 100px;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-align: center;
}
.flyfy-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 25px;
  color: #6253a8;
  font-size: 0.75rem;
}
.flyfy-status > span {
  width: 7px;
  height: 7px;
  background: #8e6ce7;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #8e6ce718;
}

.project-gallery-controls > button[hidden] {
  display: none;
}
.project-gallery-controls:has(button[hidden]) {
  justify-content: center;
}
.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.project-links a {
  font-size: 0.875rem;
  border: 1px solid #536b9b;
  padding: 10px 14px;
  border-radius: 100px;
  color: #c5d8ff;
}
.project-links:empty {
  display: none;
}
@media (max-width: 800px) {
  .flyfy-project {
    grid-template-columns: 1fr;
  }
  .flyfy-art {
    min-height: 0;
    height: auto;
    aspect-ratio: 1;
  }
  .flyfy-project .real-project-copy {
    padding-bottom: 38px;
  }
}
@media (max-width: 600px) {
  .flyfy-art-caption {
    left: 16px;
    right: 16px;
    font-size: 0.75rem;
    letter-spacing: 0;
  }
  .flyfy-project h3 {
    font-size: 2.8rem;
  }
  .flyfy-status {
    line-height: 1.6;
  }
}
.rythmos-platforms {
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  color: #90acd9;
  margin-top: 22px;
  line-height: 1.7;
}


/* Clear entry points, persistent navigation, and project enquiry. */
html {
  scroll-padding-top: 110px;
}
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #0b0c10f5;
  backdrop-filter: blur(16px);
  height: 88px;
}
.menu-toggle {
  display: none;
}
.hero-copy button {
  pointer-events: auto;
}
.hero-copy > p {
  max-width: 430px;
  font-size: 1.0625rem;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 28px;
  pointer-events: auto;
}
.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 52px;
  padding: 15px 24px;
  border-radius: 100px;
  background: var(--blue);
  color: white;
  font-weight: 600;
  font-size: 1rem;
}
.primary-action:hover {
  background: #257cff;
}
.hero-work-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  font-size: 1rem;
}
.hero-work-link:hover {
  text-decoration: underline;
}
.hero-copy > .hero-proof {
  font-size: 0.875rem;
  line-height: 1.7;
  margin-top: 22px;
  color: #a0a5b2;
  max-width: 430px;
}
.hero-proof a {
  color: #d2d8e4;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.brief-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
}
.brief-options label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 0.875rem;
  line-height: 1.5;
}
.brief-options label > span {
  display: contents;
}
.brief-options select {
  width: 100%;
  min-height: 48px;
  background: #191f2a;
  color: #f1f2f4;
  border: 1px solid #4d5d74;
  border-radius: 8px;
  padding: 12px;
  font: inherit;
  font-size: 1rem;
}
.brief-options select:focus-visible {
  outline: 3px solid #80b2ff;
  outline-offset: 3px;
}
.brief-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.brief-actions .download-button {
  width: auto;
  flex: 1;
  margin: 0;
  min-height: 50px;
  font-size: 1rem;
}
.brief-download {
  border: 1px solid #718099;
  background: transparent;
  color: #f1f2f4;
  padding: 14px 20px;
  border-radius: 100px;
  font-size: 1rem;
}
.brief-fallback {
  font-size: 0.875rem;
  color: #bac4d5;
  margin-top: 18px;
  line-height: 1.6;
}
.brief-fallback a {
  text-decoration: underline;
}
.form-note {
  line-height: 1.6;
}
#brief-dialog {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
#brief-status {
  overflow-wrap: anywhere;
}
@media (max-width: 1000px) {
  .header {
    min-height: 80px;
    height: auto;
    flex-wrap: wrap;
    padding-block: 14px;
  }
  .header nav {
    display: flex;
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
    gap: 15px;
  }
  html {
    scroll-padding-top: 145px;
  }
}
@media (max-width: 800px) {
  html {
    scroll-padding-top: 96px;
  }
  .header {
    min-height: 76px;
    gap: 12px;
  }
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    background: transparent;
    border: 1px solid #474b56;
    border-radius: 100px;
    padding: 10px 16px;
    font-size: 0.875rem;
    margin-left: auto;
  }
  .menu-toggle[aria-expanded="true"] span {
    transform: rotate(45deg);
  }
  /* Keep the call to action visible on phones, before the menu toggle. */
  .header .header-cta {
    display: flex;
    order: 1;
    margin-left: auto;
    gap: 10px;
    padding: 10px 14px;
    min-height: 44px;
  }
  .header .header-cta > span[aria-hidden] {
    font-size: 1.1rem;
  }
  .header .menu-toggle {
    order: 2;
    margin-left: 0;
  }
  .header nav {
    order: 3;
    display: none;
    flex-basis: 100%;
    padding: 10px 0 0;
    border-top: 1px solid #303641;
    gap: 0;
  }
  .header nav.is-open {
    display: grid;
    grid-template-columns: 1fr 1fr;
    animation: menu-in 0.22s ease-out;
  }
  .header nav.is-closing {
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity 0.2s ease-in,
      transform 0.2s ease-in;
    pointer-events: none;
  }
  @keyframes menu-in {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
  .header nav a {
    min-height: 48px;
    font-size: 1rem;
    padding: 10px 5px;
  }
  .header nav a::after {
    left: 5px;
    right: auto;
    width: 28px;
    bottom: 6px;
  }
  .hero-actions {
    gap: 12px 24px;
  }
  .hero-copy > .hero-proof {
    font-size: 0.875rem;
  }
  .brief-options {
    grid-template-columns: 1fr;
  }
  .brief-actions {
    flex-direction: column;
  }
  .brief-actions .download-button,
  .brief-download {
    width: 100%;
    justify-content: center;
  }
  .hero-copy > p {
    max-width: 100%;
  }
}

@media (min-width: 801px) {
  .hero-copy h1 {
    font-size: clamp(4.8rem, 7vw, 7rem);
  }
  .hero-main {
    padding-block: 34px;
  }
  .hero-copy > p {
    margin-top: 26px;
  }
}
/* Ten small moments, each with its own response. */

.breathing-halo {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, #b8f4ca28, transparent 70%);
  border: 1px solid #d2e9c630;
  transform: scale(0.76);
  pointer-events: none;
}
.is-running .breathing-halo {
  animation: breathe 8s ease-in-out infinite;
}
.is-running #ring-progress {
  filter: drop-shadow(0 0 7px #c9ed9d);
}
@keyframes breathe {
  0%,
  100% {
    transform: scale(0.68);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

#priority-recommendation {
  transition: color 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .breathing-halo {
    animation: none !important;
  }
}
/* The brief is a guided conversation. Actions stay in view. */
#brief-dialog[open] {
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100% - 28px));
  height: min(790px, calc(100dvh - 28px));
  max-height: calc(100dvh - 28px);
  padding: 30px;
  overflow: hidden;
}
#brief-dialog .brief-heading {
  flex: none;
  padding-right: 24px;
}
#brief-dialog h2 {
  font-size: 2.5rem;
  line-height: 1.12;
  margin: 12px 0;
}
#brief-dialog .dialog-intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  max-width: none;
}
#brief-dialog .dialog-close {
  top: 14px;
  right: 14px;
}
#brief-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0;
}
#brief-dialog .brief-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  padding: 6px 8px 14px 6px;
}
#brief-dialog [hidden] {
  display: none !important;
}
.brief-steps {
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 20px 0;
  padding: 0 0 18px;
  border-bottom: 1px solid #384459;
  flex: none;
}
.brief-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a5b0c3;
  font-size: 0.875rem;
}
.brief-steps li > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #65738d;
  border-radius: 50%;
}
.brief-steps [aria-current="step"] {
  color: #fff;
}
.brief-steps [aria-current="step"] > span {
  background: #2866e8;
  border-color: #679cff;
}
.brief-steps .complete > span {
  color: #b6d2ff;
  border-color: #6b95db;
}
.brief-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}
.brief-field-grid label,
.brief-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.875rem;
  line-height: 1.5;
}
.brief-field-grid label > span {
  display: contents;
}
#brief-dialog input:not([type="checkbox"]):not([type="radio"]),
#brief-dialog select {
  width: 100%;
  min-height: 48px;
  border: 1px solid #596982;
  background: #161e2c;
  color: #f1f2f4;
  border-radius: 8px;
  padding: 12px;
  font: inherit;
  font-size: 1rem;
}
#brief-dialog input::placeholder {
  color: #a6b0c2;
}
#brief-dialog fieldset {
  margin: 0 0 20px;
}
#brief-dialog legend {
  font-size: 1rem;
  margin-bottom: 12px;
}
.brief-choice-grid,
.brief-style-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.brief-choice-grid label,
.brief-style-grid label {
  position: relative;
  cursor: pointer;
}
.brief-choice-grid input,
.brief-style-grid input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.brief-choice-grid span,
.brief-style-grid span {
  display: block;
  border: 1px solid #596982;
  border-radius: 12px;
  padding: 12px 15px;
  font-size: 0.875rem;
  line-height: 1.4;
}
.brief-choice-grid input:checked + span,
.brief-style-grid input:checked + span {
  background: #22498d;
  border-color: #8fb7ff;
  color: white;
}
.brief-choice-grid input:focus-visible + span,
.brief-style-grid input:focus-visible + span {
  outline: 3px solid #80b2ff;
  outline-offset: 3px;
}
.brief-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.brief-style-grid span {
  padding: 20px;
  min-height: 65px;
}
.brief-style-grid label:nth-child(1) span {
  font-family: var(--sans);
}
.brief-style-grid label:nth-child(2) span {
  font-family: var(--display);
  font-weight: 700;
}
.brief-style-grid label:nth-child(3) span {
  border-radius: 28px;
}
.brief-style-grid label:nth-child(4) span {
  font-family: var(--serif);
  font-size: 1.2rem;
}
.brief-live {
  border-left: 2px solid #6a9eff;
  background: #18233a;
  padding: 18px 20px;
  border-radius: 0 12px 12px 0;
}
.brief-live > .eyebrow {
  color: #a4c1f5;
}
.brief-live p {
  white-space: pre-line;
  font-size: 0.9375rem;
  line-height: 1.65;
  margin-top: 12px;
  color: #d7e3f7;
}
.brief-helper {
  color: #bbc5d5;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 8px 0 14px;
}
#brief-dialog textarea {
  font-size: 1rem;
  line-height: 1.65;
  min-height: 200px;
  max-height: none;
  width: 100%;
  resize: vertical;
}
#brief-regenerate {
  margin: 12px 0;
  min-height: 40px;
  text-align: left;
}
#brief-dialog .brief-actions {
  flex: none;
  border-top: 1px solid #384459;
  background: #121925;
  padding: 16px 0 0;
  margin-top: 0;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
#brief-dialog .brief-actions button {
  font-size: 0.9375rem;
  min-height: 48px;
}
#brief-dialog #brief-back {
  width: auto;
  flex: 0;
  padding-inline: 17px;
}
#brief-dialog .download-button {
  margin: 0;
  flex: 1;
}
#brief-dialog #brief-status {
  margin: 8px 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  flex: none;
}
#brief-status:empty {
  display: none;
}
#brief-dialog .form-note {
  font-size: 0.875rem;
}
#brief-dialog input:focus-visible,
#brief-dialog select:focus-visible {
  outline: none;
  border-color: #80b2ff;
  box-shadow: 0 0 0 3px rgba(128, 178, 255, 0.4);
}
@media (max-width: 600px) {
  #brief-dialog[open] {
    padding: 22px 18px;
    width: calc(100% - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }
  #brief-dialog h2 {
    font-size: 2rem;
  }
  .brief-steps {
    gap: 12px;
    margin: 16px 0;
    padding-bottom: 14px;
  }
  .brief-steps li {
    gap: 5px;
    font-size: 0.75rem;
  }
  .brief-steps li > span {
    width: 24px;
    height: 24px;
  }
  .brief-field-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .brief-style-grid span {
    padding: 16px 12px;
  }
  #brief-dialog .brief-actions {
    gap: 8px;
  }
  #brief-dialog #brief-download-action {
    min-width: 150px;
  }
  #brief-dialog #brief-email-action {
    flex-basis: 100%;
    min-height: 44px;
    padding: 10px;
  }
  #brief-dialog #brief-status {
    max-height: 80px;
    overflow: auto;
  }
  .brief-choice-grid span {
    padding: 10px 12px;
  }
  #brief-dialog .dialog-intro {
    font-size: 0.875rem;
  }
}
#brief-dialog {
  background: #121925;
  color: #f1f2f4;
  color-scheme: dark;
}
#brief-dialog .dialog-intro,
#brief-dialog .form-note {
  color: #b4bfd2;
}
#brief-dialog .brief-heading > .eyebrow {
  color: #9ab9ed;
}
#brief-dialog h2 em {
  color: #80a9ff;
}
#brief-dialog .dialog-close {
  color: #dce6f8;
}
#brief-dialog .dialog-close:hover {
  background: #2b3750;
}
#brief-dialog textarea {
  background: #182232;
  color: #eef3fc;
  border-color: #62728e;
}
#brief-dialog #brief-status {
  color: #bdddbd;
}
#brief-dialog .platform-choices span {
  border-color: #596982;
}
#brief-dialog .brief-steps li {
  font-size: 0.875rem;
}
.header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #0b0c10;
  z-index: -1;
  border-bottom: 1px solid #2a2c34;
}
/* MedAI: the same studio, a new chapter in health. */
.medai-project {
  background: #06152e;
  border-color: #234c83;
  grid-template-columns: 1fr 1fr;
}
.medai-project .project-eyebrow {
  color: #93c9ff;
}
.medai-project h3 em {
  color: #83d8ff;
}
.medai-project .real-project-copy > p {
  color: #c1d3eb;
}
.medai-art {
  position: relative;
  background: #020712;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.medai-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.medai-art-caption {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: #a9cbf3;
}
.medai-status {
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #8fb6e5;
  margin-top: 24px;
}
.medai-project .real-project-link {
  margin-top: 24px;
}
.medai-project .real-project-copy {
  min-width: 0;
}
/* A live writing area stays beside the decision, rather than below it. */
#brief-dialog .brief-live {
  flex: none;
  margin: 0 0 18px;
  padding: 14px 18px;
  background: linear-gradient(115deg, #192c4d, #141f34);
  border-left: 2px solid #74aaff;
}
#brief-dialog .brief-live-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
#brief-writing-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #a0bae4;
  white-space: nowrap;
}
.brief-writing-window {
  max-height: 104px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#brief-dialog .brief-live p {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: #e3edff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.is-writing #brief-live-preview::after {
  content: "";
  display: inline-block;
  height: 1em;
  width: 2px;
  margin-left: 3px;
  background: #92caff;
  vertical-align: -0.1em;
  animation: writing-caret 0.65s steps(1) infinite;
}
@keyframes writing-caret {
  50% {
    opacity: 0;
  }
}
#brief-dialog .brief-steps {
  margin-bottom: 14px;
}
#brief-dialog .brief-body {
  scrollbar-width: thin;
}
#brief-dialog .brief-actions {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 760px) {
  .medai-project {
    grid-template-columns: 1fr;
  }
  .medai-art {
    height: auto;
    aspect-ratio: 1;
    max-height: 440px;
  }
  .medai-art-caption {
    bottom: 18px;
    font-size: 0.75rem;
  }
  .medai-project .real-project-copy {
    padding: 30px 27px;
  }
  .medai-project h3 {
    font-size: clamp(2.6rem, 11vw, 3.4rem);
  }
}
@media (max-width: 600px) {
  .shell {
    width: calc(100% - 32px);
  }
  .header {
    min-height: 70px;
    padding-block: 10px;
  }
  .header nav a,
  .menu-toggle {
    min-height: 44px;
  }
  .hero {
    padding-top: 19px;
  }
  .hero-main {
    padding-top: 25px;
  }
  .hero-copy h1 {
    font-size: clamp(3rem, 14.4vw, 5.1rem);
    line-height: 1.05;
    letter-spacing: -0.065em;
  }
  .hero-copy h1 > span:nth-child(2) {
    display: inline;
  }
  .hero-copy h1 em {
    display: inline;
    margin: 0 0 0 0.1em;
    font-size: 1.12em;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  .hero-copy > p {
    margin-top: 23px;
    line-height: 1.6;
  }
  .hero-actions {
    margin-top: 22px;
    gap: 10px;
  }
  .hero-actions .primary-action {
    padding: 14px 18px;
    gap: 16px;
    flex: 1;
  }
  .hero-work-link {
    padding: 10px 8px;
    font-size: 0.9375rem;
  }
  .hero-copy > .hero-proof {
    margin-top: 17px;
    line-height: 1.55;
  }
  .hero-visual {
    aspect-ratio: 1.55;
    max-height: 300px;
    margin-top: 18px;
  }
  .hero-visual img {
    object-fit: contain;
  }
  .hero-visual .art-caption {
    display: none;
  }
  .hero-bottom {
    padding-block: 18px;
    gap: 12px;
  }
  .selected-work,
  .playground,
  .concept-lab {
    padding-top: 48px;
  }
  .section-head h2 {
    font-size: clamp(2.3rem, 10vw, 3.1rem);
  }
  .real-project-copy {
    padding: 27px 24px;
  }
  .real-project-copy > p {
    line-height: 1.65;
  }
  .real-project-link,
  .app-store-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .experiment-controls {
    flex-wrap: wrap;
    gap: 12px;
  }
  .experiment-controls button,
.music-presets button,
.focus-presets button {
    min-height: 44px;
  }

  .control-pair {
    flex-wrap: wrap;
  }

  .project-dialog-bar,
.concept-dialog-top {
    position: sticky;
    top: 0;
    z-index: 4;
  }
  .project-story {
    overflow-wrap: anywhere;
  }
  .project-image-frame {
    height: auto;
    aspect-ratio: 1;
  }
  .project-dialog-body {
    min-width: 0;
  }
  .contact-details strong {
    overflow-wrap: anywhere;
  }
  #brief-dialog[open] {
    top: calc(var(--brief-viewport-top, 0px) + 8px);
    bottom: auto;
    margin: 0 auto;
    height: calc(var(--brief-viewport-height, 100dvh) - 16px);
    max-height: calc(var(--brief-viewport-height, 100dvh) - 16px);
    padding: 20px 16px 16px;
  }
  #brief-dialog h2 {
    font-size: 1.9rem;
  }
  #brief-dialog .brief-heading {
    padding-right: 20px;
  }
  #brief-dialog .brief-live {
    margin-bottom: 14px;
    padding: 11px 13px;
  }
  .brief-writing-window {
    max-height: 88px;
  }
  #brief-dialog .brief-live p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .brief-live-bar > .eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.075em;
  }
  #brief-writing-label {
    font-size: 0.6875rem;
    letter-spacing: 0.025em;
  }
  #brief-dialog .brief-field-grid {
    gap: 14px;
  }
  #brief-dialog .brief-steps {
    gap: 9px;
    margin-block: 14px;
  }
  .brief-steps li {
    white-space: nowrap;
  }
  .brief-choice-grid span {
    min-height: 44px;
  }
  .brief-style-grid span {
    min-height: 58px;
  }
  #brief-dialog .brief-actions button {
    min-height: 46px;
  }
  #brief-dialog textarea {
    min-height: 170px;
  }
  #brief-dialog .brief-heading .eyebrow {
    letter-spacing: 0.06em;
  }
  #brief-dialog.compact-brief .brief-heading .eyebrow,
  #brief-dialog.compact-brief .dialog-intro {
    display: none;
  }
  #brief-dialog.compact-brief h2 {
    font-size: 1.4rem;
    margin: 0;
  }
  #brief-dialog.compact-brief .brief-steps {
    margin-block: 8px;
    padding-bottom: 8px;
  }
  #brief-dialog.compact-brief .brief-live {
    padding: 8px 11px;
    margin-bottom: 8px;
  }
  #brief-dialog.compact-brief .brief-writing-window {
    max-height: 46px;
  }
  #brief-dialog.compact-brief .brief-live-bar {
    display: none;
  }
  #brief-dialog.compact-brief .brief-live p {
    margin: 0;
  }
  #brief-dialog.compact-brief .brief-actions {
    padding-top: 9px;
  }
  #brief-dialog.compact-brief #brief-status {
    max-height: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-writing #brief-live-preview::after {
    animation: none;
  }
}

/* Brief email fallback (shown after "Prepare an email") */
.brief-fallback {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 0.875rem;
  color: inherit;
}
.brief-fallback p {
  margin: 0;
  flex-basis: 100%;
  opacity: 0.8;
}
.brief-copy {
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 100px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.brief-copy:hover {
  background: #2a7cff;
}
.brief-fallback a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Analytics consent notice (only rendered when a Measurement ID is configured) */
.consent-notice {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  margin-inline: auto;
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  font-size: 0.875rem;
  color: var(--text);
}
.consent-notice p {
  margin: 0;
  flex: 1 1 260px;
}
.consent-notice a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent-actions {
  display: flex;
  gap: 8px;
}
.consent-notice button {
  font: inherit;
  font-weight: 600;
  border-radius: 100px;
  padding: 10px 16px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}
.consent-notice #consent-accept {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* Footer social links */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #303949;
  color: #889bb5;
  transition:
    color 0.2s,
    border-color 0.2s,
    background 0.2s;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: #fff;
  border-color: #4d6384;
  background: var(--surface);
}
.footer-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (max-width: 480px) {
  .header .brand {
    font-size: 1.6rem;
  }
  .header-cta .cta-long {
    display: none;
  }
}

/* Hero spotlight: a soft blue glow that trails the pointer across the copy. */
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  border-radius: 28px;
}
.hero-glow::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  left: var(--glow-x, 28%);
  top: var(--glow-y, 45%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(8, 104, 248, 0.5) 0%,
    rgba(8, 104, 248, 0.2) 34%,
    rgba(8, 104, 248, 0) 68%
  );
  filter: blur(28px);
  opacity: var(--glow-opacity, 0);
  transition: opacity 0.7s;
}
@media (hover: none) {
  /* Touch devices: the spotlight drifts on its own. It moves with `translate`
     (composited) rather than left/top, so the blurred layer is rasterised once
     and only slid around, instead of being re-laid-out and re-blurred every frame. */
  .hero-glow::before {
    opacity: 0.85;
    left: 18%;
    top: 28%;
    will-change: translate;
    animation: glow-drift 16s ease-in-out infinite alternate;
  }
}
@keyframes glow-drift {
  from {
    translate: 0 0;
  }
  to {
    translate: 44vw 44%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow {
    display: none;
  }
  .header nav a::after {
    transition: none;
  }
}

/* ============================================================
   Mobile pass: touch ergonomics and a shorter phone page.
   Appended last so it wins over the earlier breakpoint rules.
   ============================================================ */
.swipe-hint {
  display: none;
}
@media (pointer: coarse) {
  /* Minimum 44px hit areas without changing the desktop look. */
  .lab-filters button,
  .blueprint-view-tabs button,
  .playground button:not(.sequence-step):not(.swatch):not([data-ink]),
  .playground input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  .playground select,
  .small-control,
  .demo-pill,
  .text-button,
  .menu-toggle {
    min-height: 44px;
  }

  /* Small circular controls: a 44px box whose colour only paints the inner circle,
     so the visible dot stays the same size while the tap area grows. */
  .ink-options button[data-ink] {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 9px;
    background-clip: content-box;
    border-radius: 50%;
  }
  .sequence-step {
    box-sizing: border-box;
    padding: 2px;
    background-clip: content-box;
  }
  input[type="range"] {
    min-height: 44px;
    cursor: pointer;
  }
  input[type="range"]::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
  }
  input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
  }
  /* Inline text links: extend the tap area without moving the text. */
  .hero-proof a,
  .app-store-link,
  .footer-col a,
  .footer-bottom a {
    padding-block: 12px;
    margin-block: -12px;
  }
  .brand {
    padding-block: 8px;
    margin-block: -8px;
  }
}
@media (max-width: 800px) {
  .swipe-hint {
    display: block;
    margin: 18px 0 -8px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #737b8c;
  }
  /* Playground and blueprints become horizontal decks: one card per screen. */
  .experiments,
  .concept-grid.has-blueprints {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 14px;
    max-width: none;
    margin-inline: -16px;
    padding: 20px 16px 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .experiments::-webkit-scrollbar,
  .concept-grid.has-blueprints::-webkit-scrollbar {
    display: none;
  }
  .experiments > .experiment,
  .concept-grid.has-blueprints > * {
    position: relative; /* contain absolutely positioned children inside the deck */
    flex: 0 0 min(88%, 400px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Tighter vertical rhythm. */
  .selected-work,
  .concept-lab,
  .playground,
  .manifesto {
    padding-block: 44px;
  }
  .manifesto-art {
    height: 200px;
  }
  .real-project-art,
  .flyfy-art,
  .medai-art {
    max-height: 300px;
  }
  .rythmos-project {
    min-height: 440px;
  }
  /* Work cards: tighter copy blocks on phones. */
  .real-project .real-project-copy {
    padding: 26px 22px 28px;
  }
  .real-project h3 {
    font-size: clamp(2rem, 8.6vw, 2.6rem);
    line-height: 1.02;
  }
  .real-project .real-project-copy p {
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  /* Sequencer: give the step grid the card's full width. */
  .experiments > .experiment {
    flex-basis: min(92%, 420px);
  }
  .music-stage {
    padding-inline: 14px;
  }
  .sequencer {
    grid-template-columns: 26px repeat(8, minmax(0, 1fr));
    gap: 8px 2px;
  }
}

/* Scroll-driven reveals (classes are added by reveal.js) */
.reveal-pending {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s ease-out,
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-pending.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Launch results (You&Me) */
.project-stats {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}
.project-stats li {
  display: grid;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid currentColor;
}
.project-stats strong {
  font-family: var(--display);
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.project-stats span {
  font-size: 0.8125rem;
  line-height: 1.45;
  opacity: 0.8;
}
@media (max-width: 480px) {
  .project-stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* 06 / ფარდა — the curtain card: same footprint as MedAI, an invitation instead of a product. */
.curtain-project {
  background: #050b1a;
  border-color: #223f6e;
  grid-template-columns: 1fr 1fr;
}
.curtain-project .project-eyebrow {
  color: #8fb4ff;
}
.curtain-project h3 em {
  color: #7fb2ff;
  transition: color 0.35s;
}
.curtain-project.is-lit h3 em {
  color: #b9d4ff;
}
.curtain-project .real-project-copy > p {
  color: #b9c7de;
}
.curtain-status {
  font-size: 0.8125rem;
  color: #7f95b8;
  margin: 18px 0 26px;
}
.curtain-project .real-project-link {
  color: #f1f2f4;
  border-color: #4d6a9a;
}
.curtain-art {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: #02050d;
  cursor: pointer;
  width: 100%;
  min-width: 0;
}
.curtain-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Light behind the curtain: a soft column that brightens when lit. */
.curtain-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 22% 70% at 50% 58%,
    rgba(8, 104, 248, 0.55),
    rgba(8, 104, 248, 0) 100%
  );
  opacity: 0.25;
  mix-blend-mode: screen;
  transition: opacity 0.9s ease-out;
  pointer-events: none;
}
.curtain-project.is-lit .curtain-glow,
.curtain-project:hover .curtain-glow {
  opacity: 1;
}
.curtain-project.is-lit .curtain-art img,
.curtain-project:hover .curtain-art img {
  transform: scale(1.045);
}
.curtain-caption {
  text-align: left;
  right: auto;
  max-width: 46%;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
  transition: opacity 0.4s;
}
.curtain-project.is-lit .curtain-caption {
  opacity: 0;
}
.curtain-art:focus-visible {
  outline: 3px solid #80b2ff;
  outline-offset: -3px;
}
@media (max-width: 760px) {
  .curtain-project {
    grid-template-columns: 1fr;
  }
  .curtain-art {
    height: auto;
    aspect-ratio: 1;
    max-height: 440px;
  }
  .curtain-project .real-project-copy {
    padding: 30px 27px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .curtain-art img,
  .curtain-glow {
    transition: none;
  }
  .curtain-project.is-lit .curtain-art img,
  .curtain-project:hover .curtain-art img {
    transform: none;
  }
}

/* Brief: confirmation that a playground/project direction was captured */
.brief-included {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(8, 104, 248, 0.35);
  background: rgba(8, 104, 248, 0.14);
  font-size: 0.875rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* 03 / Follow your line: the drawing board fills whatever height the card has. */
.drawing-experiment .drawing-stage {
  flex: 1;
}
.drawing-experiment .drawing-surface {
  flex: 1;
  height: auto;
  min-height: clamp(260px, 32vw, 420px);
}
/* Absolute so the canvas fills the board even when the board's height comes from min-height. */
.drawing-experiment .drawing-surface canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 800px) {
  .drawing-experiment .drawing-surface {
    min-height: clamp(280px, 75vw, 420px);
  }
}

/* Contact now ends on the details row: no second rule above the footer. */
.contact-details {
  border-bottom: 0;
}
.invite {
  padding-bottom: 40px;
}

/* Footer: studio block, Explore and Say hello columns, then a thin bar */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 34px;
  border-bottom: 1px solid #303949;
}
.footer-studio p {
  margin: 14px 0 0;
  max-width: 300px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #97a3b7;
}
.footer-col {
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: start;
}
.footer-col .footer-heading {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #859dbc;
}
.footer-col a {
  font-size: 0.9375rem;
  color: #c4c8d2;
  transition: color 0.2s;
}
.footer-col a:hover {
  color: #fff;
}
.footer-bottom {
  margin-top: 22px;
  align-items: center;
}
.footer-signoff {
  color: #889bb5;
  transition: color 0.2s;
}
.footer-signoff:hover {
  color: #fff;
}
@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
  }
  .footer-studio {
    grid-column: 1 / -1;
  }
}

/* Floating "Next" button: a small arrow circle, so it covers as little of the page as it
   can. With a mouse, the destination's name opens beside the arrow on hover or keyboard focus. */
.next-fab {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 15px;
  border-radius: 100px;
  border: 1px solid #3a4a66;
  background: rgba(21, 23, 29, 0.85);
  color: #f1f2f4;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition:
    opacity 0.3s,
    transform 0.3s,
    border-color 0.2s,
    background 0.2s;
}
/* Solid, so the label stays readable when the button floats over a light card. */
.next-fab:hover,
.next-fab:focus-visible {
  border-color: var(--blue);
  background: #10224a;
}
.next-fab-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    margin 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.2s;
}
.next-fab:focus-visible .next-fab-label {
  max-width: 12em;
  margin: 0 10px 0 5px;
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .next-fab:hover .next-fab-label {
    max-width: 12em;
    margin: 0 10px 0 5px;
    opacity: 1;
  }
}
.next-fab-arrow {
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.3s;
}
.next-fab:hover .next-fab-arrow {
  transform: translateY(2px);
}
.next-fab.is-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
/* Keep clear of the cookie notice while it is showing. */
body:has(#consent-notice) .next-fab {
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 800px) {
  .next-fab {
    right: 14px;
  }
  body:has(#consent-notice) .next-fab {
    bottom: calc(168px + env(safe-area-inset-bottom, 0px));
  }
}
/* Leave room for the floating circle next to the footer sign-off. */
.footer-bottom {
  padding-right: 72px;
}
@media (prefers-reduced-motion: reduce) {
  .next-fab,
  .next-fab-arrow,
  .next-fab-label {
    transition: none;
  }
}

/* Mobile menu: a full-height sheet under the header */
.menu-extra {
  display: none;
}
body.menu-open {
  overflow: hidden;
}
.menu-open .next-fab {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 800px) {
  .header nav {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    height: calc(100dvh - 100%);
    z-index: 5;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 22px 24px calc(28px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #303641;
    background: #0b0c10;
    overflow-y: auto;
    overscroll-behavior: contain;
    counter-reset: menu;
  }
  .header nav.is-open {
    display: flex;
    grid-template-columns: none;
    animation: menu-in 0.25s ease-out;
  }
  .header nav > a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    min-height: 0;
    font-family: var(--display);
    font-size: clamp(2rem, 9.5vw, 2.7rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: #f1f2f4;
  }
  .header nav > a::before {
    counter-increment: menu;
    content: "0" counter(menu);
    font: 500 0.75rem/1 var(--sans);
    letter-spacing: 0.1em;
    color: #678fcd;
    min-width: 22px;
  }
  .header nav > a::after {
    left: 38px;
    right: auto;
    width: 34px;
    bottom: 10px;
  }
  .header nav.is-open > a {
    opacity: 0;
    animation: menu-link 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .header nav.is-open > a:nth-child(1) {
    animation-delay: 40ms;
  }
  .header nav.is-open > a:nth-child(2) {
    animation-delay: 100ms;
  }
  .header nav.is-open > a:nth-child(3) {
    animation-delay: 160ms;
  }
  .header nav.is-open > a:nth-child(4) {
    animation-delay: 220ms;
  }
  .header nav.is-closing > a {
    animation: none;
    opacity: 1;
  }
  .menu-extra {
    display: grid;
    gap: 18px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid #303641;
  }
  .menu-extra .primary-action {
    width: 100%;
    justify-content: center;
  }
  .menu-contact {
    display: grid;
    gap: 8px;
    font-size: 0.9375rem;
    color: #b8bdc7;
  }
  .menu-contact a {
    padding: 4px 0;
  }
  .menu-social {
    display: flex;
    gap: 10px;
  }
  .menu-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #303949;
    color: #889bb5;
  }
  .menu-social svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
  }
}
@keyframes menu-link {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .header nav.is-open,
  .header nav.is-open > a {
    animation: none;
    opacity: 1;
  }
}

/* Playground upgrade: 04 Make a little music */
.sequence-row-label {
  background: transparent;
  border: 0;
  padding: 6px 0;
  text-align: left;
  color: #a296c9;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 6px;
}
.sequence-row-label:hover,
.sequence-row-label:focus-visible {
  color: #ecdcff;
}
.sequence-step[data-row="3"][aria-pressed="true"] {
  background: #8fd3ff;
  border-color: #8fd3ff;
}
.sequencer-bottom {
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .sequencer-bottom label {
    max-width: none;
    flex: 1 1 45%;
  }
}

/* Playground upgrade: 03 Follow your line */
.drawing-symmetry {
  display: flex;
  align-items: center;
  gap: 8px;
}
.drawing-symmetry select {
  font: inherit;
  font-size: 0.75rem;
  color: inherit;
  background: transparent;
  border: 1px solid #66796b66;
  border-radius: 100px;
  padding: 7px 28px 7px 11px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23273632' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  min-height: 34px;
}

@media (pointer: coarse) {
  .drawing-symmetry select {
    min-height: 44px;
  }
}

/* Playground upgrade: 05 See both sides — original scene kept; Flip added in playground.js */

/* Playground upgrade: 01 Find your frequency */

.palette-contrast {
  display: inline-block;
  margin: 12px 0 0 8px;
  padding: 6px 10px;
  border-radius: 100px;
  font-size: 0.75rem;
  background: rgba(0, 0, 0, 0.18);
  vertical-align: top;
}
.palette-contrast.is-low {
  background: #ffd9d9;
  color: #7a1c1c;
}

/* Playground upgrade: 02 A moment of focus */
.timer-ring.is-breathing svg {
  animation: focus-breathe 4s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes focus-breathe {
  50% {
    transform: scale(1.035);
  }
}
.timer-chime {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 0.75rem;
  color: #b7c9ad;
  cursor: pointer;
  min-height: 44px;
}
.timer-chime input {
  width: 18px;
  height: 18px;
  accent-color: #c8e6ad;
}
@media (prefers-reduced-motion: reduce) {
  .timer-ring.is-breathing svg {
    animation: none;
  }
}

/* Playground upgrade: 06 Give an idea lift */
.launch-control::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(#d3b7e5 var(--charge, 0%), rgba(211, 183, 229, 0.12) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  pointer-events: none;
  transition: opacity 0.4s;
}
.launch-stage.launched .launch-control::before {
  opacity: 0;
}
#launch-share {
  border-color: #a68bbf;
}
@media (prefers-reduced-motion: reduce) {
  .launch-control::before {
    transition: none;
  }
}

/* App Store reviews under the work cards */
.project-reviews {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid currentColor;
}
.reviews-head {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.reviews-head span {
  color: #f2b535;
  letter-spacing: 0.1em;
  margin-right: 6px;
}
.project-reviews ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.project-reviews blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.45;
}
.project-reviews blockquote[lang="ka"] {
  font-family: system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.95rem;
}
.project-reviews cite {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Estimate your app (Services section) */
.estimator {
  margin-top: 64px;
  padding: 34px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #d5dbe4;
}

.estimator-head p:last-child {
  max-width: 560px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0;
}
.estimator-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 28px;
  margin-top: 28px;
  align-items: start;
}
.estimator-step {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}
.estimator-step legend {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4d6384;
  margin-bottom: 10px;
}
.estimator-step legend span {
  text-transform: none;
  letter-spacing: 0;
  color: #8a94a6;
}
.estimator-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.estimator-chips button {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 100px;
  border: 1px solid #9fb2cc;
  background: transparent;
  color: #11141b;
  font: inherit;
  font-size: 0.9375rem;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.estimator-chips button:hover {
  border-color: #11141b;
}
.estimator-chips button[aria-pressed="true"] {
  background: #11141b;
  color: #fff;
  border-color: #11141b;
}
.estimator-result {
  position: sticky;
  top: 110px;
  background: #0b0c10;
  color: #f1f2f4;
  border-radius: 20px;
  padding: 26px;
  display: grid;
  gap: 18px;
}
.estimate-row {
  display: grid;
  gap: 4px;
}
.estimate-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fb4ff;
}
.estimate-row output {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  letter-spacing: -0.04em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.estimate-row small {
  color: #8a8f9c;
  font-size: 0.875rem;
}
#estimate-note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #a0a5b2;
}
.estimator-result .primary-action {
  width: 100%;
  justify-content: center;
}
@media (max-width: 800px) {
  .estimator {
    margin-top: 40px;
    padding: 22px 18px;
  }
  .estimator-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .estimator-result {
    position: static;
  }
  .estimator-chips button {
    font-size: 0.875rem;
    padding: 9px 13px;
  }
}

/* 06 / Give an idea lift: LukApp colours and a real lift-off */

/* Estimator v2: explained chips, sparks, rolling figures */
.estimator-chips button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 9px 16px 10px;
  border-radius: 16px;
  line-height: 1.2;
}
.estimator-chips button b {
  font-weight: 600;
  font-size: 0.9375rem;
}
.estimator-chips button small {
  font-size: 0.75rem;
  color: #6b7280;
}
.estimator-chips button[aria-pressed="true"] small {
  color: #c9d3e6;
}
.estimator-step-row {
  display: inline-block;
  vertical-align: top;
  margin-right: 22px;
}
.estimator-result {
  position: sticky;
  top: 110px;
  overflow: hidden;
}
.estimate-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.estimate-sparks i {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8fb4ff;
  box-shadow: 0 0 10px #0868f8;
  opacity: 0;
  animation: estimate-spark var(--t, 0.6s) ease-out forwards;
}
@keyframes estimate-spark {
  0% {
    opacity: 1;
    transform: rotate(var(--a)) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(0.3);
  }
}
.estimate-care output {
  font-size: 1.15rem;
}
@media (max-width: 800px) {
  .estimator-step-row {
    display: block;
    margin-right: 0;
  }
  .estimator-result {
    position: static;
  }
}
@media (prefers-reduced-motion: reduce) {
  .estimate-sparks i {
    animation: none;
  }
}
.estimator-chips button[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.estimator-chips button:hover {
  border-color: var(--blue);
}

/* Estimator: care slider */
.estimator-slider {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: center;
  font-size: 0.875rem;
  color: #11141b;
}
.estimator-slider output {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.estimator-slider input {
  grid-column: 1 / -1;
  width: 100%;
  height: 28px;
  accent-color: var(--blue);
  min-height: 44px;
}
.estimator-care small {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.5;
}

/* Estimator v3: configurator with iconed tiles and an assembling device preview */
.estimator {
  padding: 40px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid #d5dbe4;
}

.estimator-head p {
  max-width: 560px;
  margin: 0;
  color: #5b6270;
  line-height: 1.6;
}
.estimator-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
  gap: 32px;
  margin-top: 32px;
}
.estimator-step {
  margin: 0 0 26px;
}
.estimator-step legend {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #101114;
  margin-bottom: 12px;
}
.estimator-step legend span {
  font-weight: 400;
  color: #8a94a6;
  margin-left: 6px;
}
.estimator-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
}
.estimator-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px;
}
.estimator-tiles button {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
  min-height: 60px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #d5dbe4;
  background: #f7f8fa;
  color: #101114;
  font: inherit;
  line-height: 1.2;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}
.estimator-tiles button span {
  display: grid;
  gap: 2px;
}
.estimator-tiles button b {
  font-weight: 600;
  font-size: 0.9375rem;
}
.estimator-tiles button small {
  font-size: 0.75rem;
  color: #6b7280;
}
.tile-icon {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 10px;
  background: #e6ebf3;
  color: #101114;
  transition:
    background 0.2s,
    color 0.2s;
}
.estimator-tiles button:hover {
  border-color: #9fb2cc;
  background: #ffffff;
}
.estimator-tiles button[aria-pressed="true"] {
  background: #dbe7ff;
  border-color: var(--blue);
  color: #101114;
  box-shadow: 0 0 0 1px var(--blue) inset;
}
.estimator-tiles button[aria-pressed="true"] small {
  color: #3d5a8a;
}
.estimator-tiles button[aria-pressed="true"] .tile-icon {
  background: var(--blue);
  color: #fff;
}
.estimator-tiles button:focus-visible {
  outline: 3px solid #80b2ff;
  outline-offset: 2px;
}
.estimator-slider {
  grid-template-columns: 34px 1fr auto;
  gap: 8px 12px;
  align-items: center;
}
.estimator-slider .tile-icon {
  background: #dbe7ff;
  color: var(--blue);
}
.estimator-slider input {
  grid-column: 1 / -1;
}
/* Quote panel */
.estimator-result {
  border-radius: 24px;
  padding: 22px 24px 26px;
  background:
    linear-gradient(rgba(143, 180, 255, 0.05) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(143, 180, 255, 0.05) 1px, transparent 1px) 0 0 / 22px 100%,
    #0b0c10;
}
.estimate-label {
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: #8fb4ff;
}
.build-summary {
  margin: 14px 0 6px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #a0a5b2;
}
/* Device preview */
.build-preview {
  position: relative;
  height: 210px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  padding-top: 10px;
  overflow: hidden;
}
.device {
  position: relative;
  display: none;
  background: #15171d;
  border: 2px solid #2a2c34;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.device-phone {
  width: 118px;
  height: 236px;
  border-radius: 22px;
  transform: translateY(20px);
}
.device-phone-2 {
  transform: translate(28px, 40px) rotate(-6deg);
  opacity: 0.85;
}
.device-window {
  width: 250px;
  height: 178px;
  border-radius: 12px;
  transform: translateY(10px);
}
.device-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 40px;
  height: 6px;
  border-radius: 3px;
  background: #2a2c34;
  transform: translateX(-50%);
}
.window-bar {
  display: flex;
  gap: 5px;
  padding: 7px 9px;
  border-bottom: 1px solid #2a2c34;
}
.window-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3a3d47;
}
.device-screen {
  padding: 22px 12px 12px;
}
.device-window .device-screen {
  padding: 12px;
}
.screen-head {
  display: block;
  height: 12px;
  width: 60%;
  border-radius: 6px;
  background: #0868f8;
  margin-bottom: 10px;
}
.screen-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.device-window .screen-tiles {
  grid-template-columns: repeat(6, 1fr);
}
.screen-tile {
  aspect-ratio: 1;
  border-radius: 8px;
  background: #1f2330;
  border: 1px solid #2f3442;
  display: grid;
  place-items: center;
  color: #8fb4ff;
  animation: tile-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.screen-tile svg {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.build-preview[data-design="premium"] .screen-tile {
  background: linear-gradient(135deg, #1b2a4a, #1f2330);
  color: #b9d4ff;
}
.build-preview[data-design="brand"] .screen-tile {
  background: linear-gradient(135deg, #0868f8, #1f2330);
  color: #ffffff;
  border-color: #3e6fd8;
}
.build-preview[data-platform="ios"] .device-phone:not(.device-phone-2),
.build-preview[data-platform="android"] .device-phone:not(.device-phone-2),
.build-preview[data-platform="both"] .device-phone,
.build-preview[data-platform="website"] .device-window,
.build-preview[data-platform="webapp"] .device-window,
.build-preview[data-platform="appweb"] .device-phone:not(.device-phone-2),
.build-preview[data-platform="appweb"] .device-window {
  display: block;
}
.build-preview[data-platform="appweb"] .device-window {
  width: 190px;
  height: 150px;
}
.build-preview[data-platform="appweb"] .device-phone {
  transform: translateY(30px);
}
.build-preview[data-platform="android"] .device-phone {
  border-radius: 14px;
}
@keyframes tile-in {
  from {
    transform: translateY(8px) scale(0.6);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@media (max-width: 800px) {
  .estimator {
    padding: 22px 16px;
  }
  .estimator-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .estimator-pair {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .estimator-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .estimator-tiles button {
    min-height: 56px;
    padding: 8px 10px;
  }
  .estimator-tiles button small {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen-tile {
    animation: none;
  }
}

/* Estimator: a hue per group */
.estimator-step {
  --g: var(--blue);
  --g-soft: #dbe7ff;
  --g-ink: #26467a;
}
.estimator-step[data-group="features"] {
  --g: #0f9d8a;
  --g-soft: #d8f3ee;
  --g-ink: #1f5f55;
}
.estimator-step[data-group="design"] {
  --g: #7c5cff;
  --g-soft: #e8e2ff;
  --g-ink: #4a3a9a;
}
.estimator-step[data-group="scope"] {
  --g: #d98a1a;
  --g-soft: #fdecd2;
  --g-ink: #7a4d0c;
}
.estimator-step[data-group="timing"] {
  --g: #e2564b;
  --g-soft: #fde1de;
  --g-ink: #8a2f27;
}
.estimator-step[data-group="care"] {
  --g: #d6467e;
  --g-soft: #fbe0eb;
  --g-ink: #86294d;
}
.estimator-step legend::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g);
  margin-right: 8px;
  vertical-align: 1px;
}
.estimator-tiles button .tile-icon {
  background: var(--g-soft);
  color: var(--g-ink);
}
.estimator-tiles button:hover {
  border-color: var(--g);
}
.estimator-tiles button[aria-pressed="true"] {
  background: var(--g-soft);
  border-color: var(--g);
  box-shadow: 0 0 0 1px var(--g) inset;
}
.estimator-tiles button[aria-pressed="true"] small {
  color: var(--g-ink);
}
.estimator-tiles button[aria-pressed="true"] .tile-icon {
  background: var(--g);
  color: #fff;
}
.estimator-slider .tile-icon {
  background: var(--g-soft);
  color: var(--g);
}
.estimator-slider input {
  accent-color: var(--g);
}

/* Estimator: multi-target platforms and the approach sub-choice */
.estimator-approach {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: #f1f5fb;
  border: 1px dashed #b7c6de;
}
.approach-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #26467a;
  margin-bottom: 8px;
}
.estimator-tiles-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.build-preview[data-platform="appweb2"] .device-phone,
.build-preview[data-platform="appweb2"] .device-window {
  display: block;
}
.build-preview[data-platform="appweb2"] .device-window {
  width: 170px;
  height: 140px;
}
.build-preview[data-platform="appweb2"] .device-phone {
  width: 100px;
  height: 200px;
  transform: translateY(36px);
}
.build-preview[data-platform="appweb2"] .device-phone-2 {
  transform: translate(22px, 52px) rotate(-6deg);
}
/* Android: a camera dot instead of the iPhone bar. When both are chosen, the second phone is the Android. */
.build-preview[data-platform="android"] .device-notch,
.build-preview[data-android="true"] .device-phone-2 .device-notch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 8px;
}
.build-preview[data-platform="android"] .device-phone,
.build-preview[data-android="true"] .device-phone-2 {
  border-radius: 14px;
}
/* Estimator quote panel: LukApp blue */
.estimator-result {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 22px 100%,
    linear-gradient(160deg, #1a78ff, #0868f8 55%, #0a55d0);
  color: #ffffff;
  box-shadow: 0 24px 60px rgba(8, 104, 248, 0.35);
}
.estimate-label {
  color: #d6e4ff;
}
.estimate-row output {
  color: #ffffff;
}
.estimate-row small,
#estimate-note,
.build-summary {
  color: #dbe7ff;
}
.estimator-result .primary-action {
  background: #ffffff;
  color: #0868f8;
}
.estimator-result .primary-action:hover {
  background: #eaf1ff;
}
.estimate-sparks i {
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff;
}
.device {
  border-color: #3b5fa8;
  box-shadow: 0 18px 40px rgba(3, 30, 80, 0.5);
}
.screen-head {
  background: #8fb4ff;
}

/* Estimator device mockups, second pass: real chrome */
.build-preview {
  height: 262px;
  gap: 16px;
}
.device {
  background: #0f1320;
  border: 3px solid #1c2131;
  box-shadow:
    0 0 0 1px #2c3550,
    0 22px 46px rgba(3, 30, 80, 0.55);
}
.device-phone {
  width: 132px;
  height: 268px;
  border-radius: 28px;
  padding: 6px;
  transform: translateY(22px);
}
.device-phone-2 {
  transform: translate(30px, 44px) rotate(-6deg);
  opacity: 0.92;
}
.device-notch {
  top: 12px;
  width: 42px;
  height: 10px;
  border-radius: 6px;
  background: #0f1320;
  z-index: 2;
}
.device-phone .device-screen {
  position: relative;
  height: 100%;
  border-radius: 22px;
  background: #f5f7fb;
  padding: 26px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.status-bar {
  position: absolute;
  top: 6px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 600 7px/1 var(--sans);
  color: #101114;
}
.status-bar i {
  font-style: normal;
}
.status-bar b {
  width: 14px;
  height: 6px;
  border-radius: 2px;
  background: #101114;
}
.app-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.app-bar i {
  width: 14px;
  height: 14px;
  border-radius: 5px;
  background: #0868f8;
}
.app-bar em {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #cfd6e2;
  max-width: 48px;
}
.app-hero {
  display: block;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, #0868f8, #5ea0ff);
}
.device-phone .screen-tiles {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 6px;
}
.screen-tile {
  position: relative;
  aspect-ratio: auto;
  height: 30px;
  border-radius: 8px;
  background: #0868f8;
  border: 0;
  color: #fff;
  box-shadow: 0 3px 8px rgba(8, 104, 248, 0.25);
}
.screen-tile::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -5px;
  height: 3px;
  border-radius: 2px;
  background: #cfd6e2;
}
.screen-tile:nth-child(3n + 2) {
  background: #0f9d8a;
  box-shadow: 0 3px 8px rgba(15, 157, 138, 0.25);
}
.screen-tile:nth-child(3n) {
  background: #7c5cff;
  box-shadow: 0 3px 8px rgba(124, 92, 255, 0.25);
}
.screen-tile svg {
  width: 52%;
  height: 52%;
}
.build-preview[data-design="premium"] .screen-tile,
.build-preview[data-design="brand"] .screen-tile {
  color: #fff;
}
.build-preview[data-design="brand"] .app-hero {
  background: linear-gradient(135deg, #0868f8, #7c5cff);
}
.tab-bar {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  padding-top: 6px;
  border-top: 1px solid #e1e6ef;
}
.tab-bar i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: #cfd6e2;
}
.tab-bar i:first-child {
  background: #0868f8;
}
/* Browser window */
.device-window {
  width: 262px;
  height: 190px;
  border-radius: 12px;
  padding: 0;
  transform: translateY(12px);
}
.window-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  background: #1a2032;
  border-bottom: 1px solid #2c3550;
}
.window-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3a3d47;
}
.window-bar i:nth-child(1) {
  background: #ff5f57;
}
.window-bar i:nth-child(2) {
  background: #febc2e;
}
.window-bar i:nth-child(3) {
  background: #28c840;
}
.address {
  flex: 1;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #0f1320;
  color: #9aa6c0;
  font: 500 7px/1.2 var(--sans);
}
.device-window .device-screen {
  height: calc(100% - 26px);
  background: #f5f7fb;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-nav i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #0868f8;
}
.site-nav em {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: #cfd6e2;
}
.site-nav em:first-of-type {
  margin-left: auto;
}
.site-hero {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0868f8, #5ea0ff);
}
.site-hero b {
  display: block;
  height: 6px;
  width: 60%;
  border-radius: 3px;
  background: #ffffffcc;
}
.site-hero b.short {
  width: 35%;
  background: #ffffff88;
}
.device-window .screen-tiles {
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.device-window .screen-tile {
  height: 26px;
}
.device-window .screen-tile::after {
  display: none;
}
.build-preview[data-platform="appweb"] .device-window,
.build-preview[data-platform="appweb2"] .device-window {
  width: 196px;
  height: 154px;
}
.build-preview[data-platform="appweb2"] .device-phone {
  width: 108px;
  height: 218px;
  transform: translateY(40px);
}
.build-preview[data-platform="appweb2"] .device-phone-2 {
  transform: translate(24px, 58px) rotate(-6deg);
}
.build-preview[data-platform="appweb2"] .device-phone .device-screen {
  padding-top: 22px;
}
.build-preview[data-platform="android"] .device-notch,
.build-preview[data-android="true"] .device-phone-2 .device-notch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 12px;
  background: #1c2131;
}
.build-preview[data-platform="android"] .device-phone,
.build-preview[data-android="true"] .device-phone-2 {
  border-radius: 18px;
}
.build-preview[data-platform="android"] .device-phone .device-screen,
.build-preview[data-android="true"] .device-phone-2 .device-screen {
  border-radius: 12px;
}

/* Estimator group titles: tinted label with icon and a coloured rule */
.estimator-step legend {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--g-ink);
}
.estimator-step legend::before {
  display: none;
}
.estimator-step legend::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--g), color-mix(in srgb, var(--g) 0%, transparent));
  margin-left: 6px;
}
.legend-icon {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 9px;
  background: var(--g);
  color: #fff;
  flex: none;
}
.legend-text {
  padding: 6px 10px;
  border-radius: 100px;
  background: var(--g-soft);
}
.estimator-step legend span:not(.legend-text) {
  margin-left: 0;
  font-weight: 400;
  color: #8a94a6;
}

/* ============================================================
   Proto kit: six small "live" websites inside a browser frame
   ============================================================ */
.blueprint-prototype {
  padding: 0;
  background: transparent;
  min-height: 0;
}
.p-browser {
  --p-muted: color-mix(in srgb, var(--p-ink) 60%, transparent);
  --p-line: color-mix(in srgb, var(--p-ink) 14%, transparent);
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--p-bg);
  color: var(--p-ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  font-family: var(--sans);
  color-scheme: light;
}
.p-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #1a2032;
  color: #b9c3d8;
}
.p-dots {
  display: flex;
  gap: 6px;
}
.p-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3a3d47;
}
.p-dots i:nth-child(1) {
  background: #ff5f57;
}
.p-dots i:nth-child(2) {
  background: #febc2e;
}
.p-dots i:nth-child(3) {
  background: #28c840;
}
.p-address {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 360px;
  margin: 0 auto;
  padding: 5px 12px;
  border-radius: 8px;
  background: #0f1320;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.p-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.p-nav {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 26px;
  background: color-mix(in srgb, var(--p-bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--p-line);
}
.p-brand {
  background: transparent;
  border: 0;
  padding: 6px 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--p-ink);
}
.p-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.p-links button {
  background: transparent;
  border: 0;
  padding: 10px 12px;
  border-radius: 100px;
  font-size: 0.875rem;
  color: var(--p-muted);
  min-height: 44px;
}
.p-links button[aria-current="page"] {
  color: var(--p-ink);
  background: color-mix(in srgb, var(--p-accent) 22%, transparent);
}

.p-page {
  padding: 26px 26px 34px;
  display: grid;
  gap: 30px;
  min-height: 460px;
}
.p-page.is-entering {
  animation: p-enter 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes p-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.p-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.p-chips button {
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--p-line);
  background: transparent;
  color: var(--p-ink);
  font-size: 0.8125rem;
}
.p-chips button[aria-pressed="true"] {
  background: var(--p-ink);
  color: var(--p-bg);
  border-color: var(--p-ink);
}
.p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 100px;
  border: 1px solid var(--p-ink);
  background: transparent;
  color: var(--p-ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-top: 6px;
  transition:
    transform 0.15s,
    background 0.2s;
}
.p-btn-primary {
  background: var(--p-ink);
  color: var(--p-bg);
}
.p-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.p-btn:not(:disabled):active {
  transform: scale(0.98);
}
.p-note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--p-muted);
}

.p-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--p-line);
  border-radius: 100px;
  overflow: hidden;
}
.p-stepper button {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--p-ink);
  font-size: 1.1rem;
}
.p-stepper b {
  min-width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.p-backdrop {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(0, 0, 0, 0.35);
}
.p-drawer {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  top: 0;
  width: min(380px, 92%);
  padding: 22px;
  overflow: auto;
  background: var(--p-paper);
  color: var(--p-ink);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.25);
  display: grid;
  gap: 8px;
  align-content: start;
}
.p-drawer.is-opening {
  animation: p-drawer 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes p-drawer {
  from {
    transform: translateX(100%);
  }
}
.p-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.p-drawer-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
}
.p-x {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--p-line);
  background: transparent;
  color: var(--p-ink);
  font-size: 1.4rem;
}

.p-toast {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 56px;
  transform: translate(-50%, 16px);
  padding: 10px 16px;
  border-radius: 100px;
  background: var(--p-ink);
  color: var(--p-bg);
  font-size: 0.8125rem;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.p-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.p-foot {
  padding: 12px 26px;
  border-top: 1px solid var(--p-line);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--p-muted);
}
@media (max-width: 800px) {
  .p-page {
    padding: 18px 16px 26px;
    gap: 22px;
  }
  .p-nav {
    padding: 10px 14px;
    gap: 8px;
  }
  .p-links {
    gap: 0;
  }
  .p-links button {
    padding: 8px 8px;
    font-size: 0.8125rem;
  }

  .p-foot {
    padding: 10px 14px;
  }
}
@media (max-width: 480px) {
  .p-address {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-page.is-entering,
  .p-drawer.is-opening {
    animation: none;
  }
}

.p-gallery {
  position: relative;
  overflow: hidden;
  background: var(--p-ink);
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}
.p-gallery:active {
  cursor: grabbing;
}
.p-gallery-track {
  display: flex;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .p-gallery-track {
    transition: none;
  }
}

/* Prototype nav: links never shrink into each other; they scroll instead */
.p-links {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.p-links::-webkit-scrollbar {
  display: none;
}
.p-links button {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 800px) {
  .p-nav {
    padding: 10px 14px;
    gap: 10px;
  }
}

/* ============================================================
   Mobile care: decks you can discover, art that fills the card.
   ============================================================ */
@media (max-width: 800px) {
  /* Flyfy and MedAI artwork fills the card width instead of sitting in a 300px box. */
  .flyfy-art,
  .medai-art {
    width: 100%;
    max-height: none;
    aspect-ratio: 1;
  }
  /* The next card peeks in clearly. */
  .experiments > .experiment,
  .concept-grid.has-blueprints > * {
    flex-basis: min(82%, 400px);
  }
  .swipe-hint {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .swipe-hint::after {
    content: "";
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    animation: swipe-nudge 1.6s ease-in-out infinite;
  }
  .experiments.is-nudging > .experiment:first-child,
  .concept-grid.is-nudging > :first-child {
    animation: deck-peek 1.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}
@keyframes swipe-nudge {
  50% {
    transform: translateX(8px);
    opacity: 0.5;
  }
}
@keyframes deck-peek {
  30% {
    transform: translateX(-44px);
  }
  55% {
    transform: translateX(-44px);
  }
}
.deck-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 -6px;
}
.deck-nav .deck-count {
  margin-left: auto;
}
.deck-nav[hidden] {
  display: none;
}
.deck-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #3a4150;
  background: #12161f;
  color: #f2f4f8;
  cursor: pointer;
}
.deck-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.deck-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.deck-dots {
  display: flex;
  gap: 2px;
}
.deck-dots button {
  width: 18px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
  cursor: pointer;
}
.deck-dots button::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  height: 8px;
  border-radius: 8px;
  background: #3a4150;
  transform: translateY(-50%);
  transition: background 0.2s;
}
.deck-dots button[aria-selected="true"]::after {
  background: #2164fa;
}
.deck-count {
  min-width: 48px;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: #9aa3b5;
  font-variant-numeric: tabular-nums;
}
.concept-lab .deck-btn {
  background: #0c1220;
}
@media (prefers-reduced-motion: reduce) {
  .swipe-hint::after,
  .is-nudging > * {
    animation: none;
  }
}

@media (max-width: 800px) {
  /* Decks size themselves to the card in view (deck.js sets the height). */
  .experiments,
  .concept-grid.has-blueprints {
    transition: height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
    overflow-y: hidden;
    align-items: flex-start;
  }
  /* Hero artwork fills the phone width. */
  .hero-visual {
    aspect-ratio: 1;
    max-height: none;
    margin-top: 22px;
  }
  .hero-visual img {
    object-fit: cover;
  }
}
@media (max-width: 600px) {
  /* Contact: the heading gets the full width; the circle sits below it, whole and tappable. */
  .invite-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .invite-main .project-circle {
    width: 150px;
    height: 150px;
    gap: 6px;
    margin: 4px 0 0 auto;
    transform: rotate(-8deg);
  }
  .invite-main .project-circle > span:first-child {
    font-size: 3rem;
  }
  .invite-main .project-circle > span:last-child {
    font-size: 0.9375rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .experiments,
  .concept-grid.has-blueprints {
    transition: none;
  }
}

/* ============================================================
   Playground on phones: a vertical stack of full cards, a jump strip,
   bigger controls, and the card layouts that broke at 390px.
   ============================================================ */
@media (max-width: 800px) {
  #playground .experiments {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    height: auto;
  }
  #playground .experiments > .experiment {
    flex: none;
    width: auto;
    scroll-snap-align: none;
    scroll-margin-top: 90px;
  }
  /* Bigger buttons everywhere in the playground. */
  .playground .small-control,
.playground .demo-pill,
.playground .text-button,
.playground .timer-button,
.playground .experiment-controls button {
    min-height: 48px;
    font-size: 0.9375rem;
  }
  .playground .small-control,
  .playground .experiment-controls button {
    padding: 12px 18px;
  }
  /* 02 · focus: actions stack, the primary button gets the full width. */
  .timer-actions {
    flex-wrap: wrap;
    gap: 12px;
  }
  .timer-button {
    flex: 1 1 100%;
    min-width: 0;
    min-height: 54px;
    font-size: 1rem;
  }
  .timer-reset {
    width: 50px;
    height: 50px;
  }
  .timer-chime {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    flex: 1;
    font-size: 0.9375rem;
  }
  .timer-chime input {
    width: 24px;
    height: 24px;
    margin: 0;
  }
  /* 03 · drawing: tool rows wrap. */

  /* 04 · music: a smaller meter so the rows come sooner. */
}

/* Playground showcase tiles (phones): the experiment waits behind its tile. */
.showcase,
.showcase-close {
  display: none;
}
@media (max-width: 800px) {
  .experiment.is-collapsed > :not(.showcase) {
    display: none;
  }
  .experiment.is-collapsed {
    border-color: transparent;
    background: transparent;
  }
  .experiment.is-collapsed .showcase {
    display: grid;
  }
  .showcase {
    gap: 10px;
    padding: 22px 22px 20px;
    border-radius: 18px;
    background: var(--sc-bg);
    color: var(--sc-ink);
    background-image:
      radial-gradient(
        circle at 100% 0%,
        color-mix(in srgb, var(--sc-ink) 14%, transparent) 0 90px,
        transparent 91px
      ),
      radial-gradient(
        circle at 0% 100%,
        color-mix(in srgb, var(--sc-ink) 8%, transparent) 0 60px,
        transparent 61px
      );
  }
  .showcase-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .showcase-num {
    font-family: var(--display);
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1;
    opacity: 0.9;
  }
  .showcase-glyph {
    font-size: 1.6rem;
    line-height: 1;
    opacity: 0.8;
  }
  .showcase-title {
    margin: 4px 0 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
  .showcase-tease {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    opacity: 0.85;
  }
  .showcase-open {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    margin-top: 8px;
    padding: 16px 22px;
    border: 0;
    border-radius: 100px;
    background: var(--sc-ink);
    color: var(--sc-bg);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--sc-ink) 20%, transparent);
  }
  .showcase-open span {
    font-size: 1.3rem;
    transition: transform 0.2s;
  }
  .showcase-open:active span {
    transform: translateY(3px);
  }
  .experiment.is-open .showcase {
    display: none;
  }
  .experiment.is-open .showcase-close {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: calc(100% - 44px);
    min-height: 50px;
    margin: 4px 22px 22px;
    border: 1px solid #3a4150;
    border-radius: 100px;
    background: transparent;
    color: #c9d1e0;
    font: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
  }
}

/* A card opened from its showcase tile takes focus quietly. */
.experiment-label[tabindex="-1"]:focus {
  outline: none;
}

/* 06 / Give an idea lift (full-on, 2026-09-25). A canvas draws the flight behind everything;
   the heading, the mission name and the hold button sit on the pad; a webcast-style display
   takes over in flight; the story crawls away into space; then the next steps.
   data-phase: pad → holding → flight → orbit → crawl → done. */
.launch-stage {
  --charge: 0%;
  --charge-n: 0;
  position: relative;
  overflow: hidden;
  background: #061029;
  color: #e8f0ff;
  min-height: 620px;
  padding: 26px 24px 30px;
  justify-content: flex-start;
  isolation: isolate;
}
.launch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  touch-action: none;
}
.rocket-source {
  display: none;
}
.launch-stage .demo-heading {
  transition:
    opacity 0.5s,
    transform 0.5s;
}
.launch-stage .demo-heading h3 em {
  color: #8fb4ff;
}
.launch-stage .demo-heading p {
  max-width: 300px;
  opacity: 0.8;
}
/* The pad: mission name, hold button and instruction sit low, under the rocket. */
.launch-pad-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  display: grid;
  justify-items: center;
  gap: 12px;
  transition:
    opacity 0.45s,
    transform 0.45s;
}
.launch-mission {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 14px;
  border-radius: 99px;
  background: rgb(8 20 52 / 0.72);
  border: 1px solid #22386a;
  backdrop-filter: blur(6px);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fb4ff;
}
.launch-mission input {
  width: 150px;
  padding: 7px 12px;
  border: 0;
  border-radius: 99px;
  background: #0b1a3a;
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: none;
}
.launch-mission input::placeholder {
  color: #6f86b8;
}
.launch-mission input:focus-visible {
  outline: 2px solid #8fb4ff;
  outline-offset: 2px;
}
.launch-control {
  margin: 0;
}
.launch-control > button {
  --charge: inherit;
  width: 92px;
  height: 92px;
  border-color: #3e6fd8;
  background: #0868f8;
  color: #fff;
  box-shadow: 0 10px 40px rgba(8, 104, 248, 0.35);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.launch-charge {
  background: #0b1a3a;
}
.launch-control::before {
  background: conic-gradient(#8fb4ff var(--charge, 0%), rgba(143, 180, 255, 0.14) 0);
}
.launch-key {
  position: relative;
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.launch-stage.is-holding .launch-key {
  font-size: 2.4rem;
  letter-spacing: 0;
}
.launch-stage.launched .launch-control > button {
  background: #0b1a3a;
  box-shadow: 0 0 70px rgba(8, 104, 248, 0.55);
}
.launch-stage.launched .launch-control:after {
  content: none;
}
.launch-stage.launched .launch-key {
  font-size: 2rem;
  color: #8fb4ff;
}
.launch-instruction {
  color: #8fb4ff;
  margin: 0;
}
.launch-sound {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #22386a;
  background: rgb(8 20 52 / 0.6);
  color: #8fb4ff;
  font-size: 0.9375rem;
}
.launch-sound::before {
  content: "🔈";
  filter: grayscale(1) brightness(1.6);
}
.launch-sound[aria-pressed="true"] {
  border-color: #8fb4ff;
}
.launch-sound[aria-pressed="true"]::before {
  content: "🔊";
}
.launch-stage .demo-heading {
  padding-inline: 34px;
}
/* In flight the pad UI steps aside and the display takes over. */
.launch-stage:is([data-phase="flight"], [data-phase="orbit"], [data-phase="crawl"], [data-phase="done"]) .launch-pad-ui,
.launch-stage:is([data-phase="flight"], [data-phase="orbit"], [data-phase="crawl"]) .demo-heading {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
.launch-hud {
  position: absolute;
  inset: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  font-family: var(--display);
  text-align: left;
  text-transform: uppercase;
}
.launch-stage:is([data-phase="flight"], [data-phase="orbit"]) .launch-hud {
  opacity: 1;
}
.launch-stage[data-phase="crawl"] .launch-hud {
  opacity: 0.25;
}
.hud-top,
.hud-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  transition: opacity 0.4s;
}
.hud-top {
  align-items: flex-start;
  padding-right: 46px; /* room for the sound switch */
}
.launch-hud small {
  display: block;
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  color: #8fb4ff;
}
.hud-mission b {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: #fff;
}
.hud-clock {
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: #fff;
}
.hud-gauge b {
  display: block;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1.1;
}
.hud-gauge:last-child {
  text-align: right;
}
.hud-track {
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  position: relative;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: #6f86b8;
}
.hud-track::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 3px;
  height: 1px;
  background: #22386a;
}
.hud-track li {
  position: relative;
  padding-top: 12px;
  width: 0;
  display: flex;
  justify-content: center;
  white-space: nowrap;
}
.hud-track li::before {
  content: "";
  position: absolute;
  top: 0;
  left: -3.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0b1a3a;
  border: 1px solid #3e6fd8;
  transition:
    background 0.3s,
    box-shadow 0.3s;
}
.hud-track li.is-done {
  color: #dbe7ff;
}
.hud-track li.is-done::before {
  background: #8fb4ff;
  box-shadow: 0 0 10px #8fb4ff;
}
/* The story crawl: text tilted back in perspective, rising and fading into the stars. */
.launch-crawl {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.launch-crawl[hidden] {
  display: none;
}
.crawl-view {
  position: absolute;
  inset: 0;
  perspective: 340px;
  perspective-origin: 50% 20%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 100%);
}
.crawl-plane {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 100%;
  transform-origin: 50% 0%;
  transform: rotateX(24deg);
  text-align: center;
  color: #ffd66b;
  animation: launch-crawl 26s linear forwards;
}
@keyframes launch-crawl {
  from {
    top: 100%;
  }
  to {
    top: -260%;
  }
}
.crawl-kicker {
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  opacity: 0.8;
}
.crawl-plane h4 {
  margin: 8px 0 22px;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.crawl-text p {
  margin: 0;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
}
#crawl-skip {
  position: absolute;
  bottom: 16px;
  right: 16px;
  border-color: #3e6fd8;
  color: #dbe7ff;
  background: rgb(6 16 41 / 0.7);
}
/* Reduced motion: the story is simply there to read, in a quiet panel. */
.launch-crawl.is-static {
  align-items: center;
  padding: 70px 22px 110px;
}
.launch-crawl.is-static .crawl-view {
  position: static;
  perspective: none;
  -webkit-mask-image: none;
  mask-image: none;
  max-height: 100%;
  overflow: auto;
  padding: 18px;
  border-radius: 16px;
  background: rgb(6 16 41 / 0.78);
}
.launch-crawl.is-static .crawl-plane {
  position: static;
  transform: none;
  animation: none;
}
.launch-crawl.is-static .crawl-text p {
  font-size: 0.9375rem;
}
.launch-crawl.is-static #crawl-skip {
  display: none;
}
/* Done: the next steps land at the bottom, over the orbit. */
.launch-stage .launch-next {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 22px;
  z-index: 3;
  justify-content: center;
  flex-wrap: wrap;
}
.launch-stage[data-phase="done"] .demo-heading {
  opacity: 1;
}
.launch-next #launch-brief {
  background: #8fb4ff;
  color: #061029;
}
#launch-share {
  border-color: #3e6fd8;
}
@media (max-width: 800px) {
  .launch-stage {
    min-height: 600px;
    padding-inline: 18px;
  }
  .crawl-plane h4 {
    font-size: 1.5rem;
  }
  .crawl-text p {
    font-size: 1rem;
  }
}
@media (max-width: 600px) {
  .launch-mission input {
    width: 130px;
  }
  /* Perspective widens the lines near the bottom; keep them well inside the card. */
  .crawl-plane {
    left: 16%;
    right: 16%;
  }
  .crawl-plane h4 {
    font-size: 1.25rem;
  }
  .crawl-text p {
    font-size: 0.875rem;
    line-height: 1.45;
  }
  .hud-track {
    font-size: 0.4375rem;
    letter-spacing: 0.04em;
  }
  .hud-gauge b {
    font-size: 1rem;
  }
}
@media (hover: none) and (pointer: coarse) {
  .launch-mission input {
    font-size: 16px; /* no zoom on focus */
  }
}
@media (prefers-reduced-motion: reduce) {
  .launch-stage .demo-heading,
  .launch-pad-ui,
  .launch-hud {
    transition: none;
  }
}

/* 03 / Follow your line: brushes, paper, more inks, stamps and a curve that draws itself. */

.ink-options {
  align-items: center;
}
.ink-options .ink-rainbow {
  background: conic-gradient(#ff5c5c, #ffd25c, #7cf05c, #5cd8ff, #6a5cff, #ff5cd6, #ff5c5c);
}
.ink-options .ink-rainbow[aria-pressed="true"] {
  box-shadow: 0 0 0 1px #273632;
}
.ink-custom {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 4px solid #f1eee7;
  background: var(--ink, linear-gradient(135deg, #7a3fd1, #2fb6a6));
  box-shadow: 0 0 0 1px #66796b66;
  overflow: hidden;
  cursor: pointer;
}
.ink-custom[aria-pressed="true"] {
  box-shadow: 0 0 0 1px #273632;
}
.ink-custom input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

@media (pointer: coarse) {
  .ink-options button,
  .ink-custom {
    width: 32px;
    height: 32px;
  }
}

/* Hero spotlight, edge to edge: the glow now lives on the whole hero, full viewport width,
   from under the header to the hero's closing rule. */
.hero-glow {
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  border-radius: 0;
  z-index: 0;
}
.hero-glow::before {
  width: 820px;
  height: 820px;
  filter: blur(34px);
}
.hero-kicker,
.hero-main,
.hero-bottom {
  position: relative;
  z-index: 1;
}
.hero-bottom {
  background: transparent;
}
@media (max-width: 800px) {
  .hero-glow::before {
    width: 640px;
    height: 640px;
  }
}

/* Header: a circuit-board drawing on a deep navy band, with signals travelling the traces. */
.header {
  isolation: isolate;
  background: transparent;
  border-bottom-color: #1c2743;
}
.header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  transform: none;
  z-index: -2;
  border-bottom: 1px solid #1c2743;
  background:
    linear-gradient(180deg, rgba(15, 23, 49, 0) 0%, rgba(11, 12, 16, 0.6) 100%),
    radial-gradient(circle, #34497a 1px, transparent 1.3px) 0 0 / 22px 22px,
    linear-gradient(180deg, #0f1731 0%, #0b0f1d 55%, #0b0c10 100%);
  opacity: 0.97;
}
.header-circuit {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0.3) 62%, #000 100%);
  mask: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0.3) 62%, #000 100%);
}
.circuit-traces {
  stroke: #2a3d68;
  stroke-width: 1.2;
}
.circuit-nodes {
  fill: #3b5590;
}
.circuit-signals circle {
  /* Halo comes from the #signal-glow gradient in the markup; no filter, so no per-frame blur. */
}
@media (max-width: 800px) {
  .header-circuit {
    -webkit-mask: none;
    mask: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .circuit-signals {
    display: none;
  }
}

/* ============================================================
   Generated asset set (2026-09-22)
   Transparent artwork replaces the plated images, so the blends and
   masks that hid the old plates are switched off here. The hero gets
   five glass chips that drift at different depths with the pointer.
   ============================================================ */
.hero-visual > picture {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.hero-visual picture img {
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
  object-fit: contain;
}
.hero-visual .hero-chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
  filter: drop-shadow(0 18px 28px #0868f840);
  transform: translate(calc(var(--tilt-px, 0) * var(--depth, 1) * -44px), calc(var(--tilt-py, 0) * var(--depth, 1) * -32px))
    perspective(1000px) rotateX(calc(var(--tilt-y, 0deg) * 1.3)) rotateY(calc(var(--tilt-x, 0deg) * 1.3));
  transition: transform 0.75s cubic-bezier(0.2, 0.75, 0.2, 1);
  will-change: transform;
}
.hero-chip-toggle {
  --x: 9%;
  --y: 15%;
  --w: 10%;
  --depth: 1.5;
}
.hero-chip-slider {
  --x: 1%;
  --y: 70%;
  --w: 14%;
  --depth: 2.3;
}
.hero-chip-button {
  --x: 73%;
  --y: 3%;
  --w: 9%;
  --depth: 1;
  z-index: 0;
}
.hero-chip-pill {
  --x: 41%;
  --y: 86%;
  --w: 11%;
  --depth: 2.8;
}
.hero-chip-chart {
  --x: 87%;
  --y: 72%;
  --w: 10%;
  --depth: 1.8;
}
@media (max-width: 800px) {
  .hero-visual {
    aspect-ratio: 3 / 2;
  }
  .hero-visual picture img {
    object-fit: contain;
  }
  .hero-visual .hero-chip {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual .hero-chip {
    transform: none;
    transition: none;
  }
}

/* Pulse trace: the brand's signature line, once, between the hero and the work */
.pulse-divider {
  margin-top: 6px;
  line-height: 0;
}
.pulse-divider img {
  display: block;
  width: 100%;
  height: auto;
}
.pulse-divider + .selected-work {
  padding-top: 26px;
}

/* Services: the objects sit directly on the light tile */

/* Manifesto: desktop strip cropped to about 2.3:1, portrait story on phones */
.manifesto-art {
  height: auto;
  aspect-ratio: 2.7 / 1;
  max-height: 520px;
}
.manifesto-art > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.manifesto-art picture img {
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
  object-fit: cover;
  object-position: center 45%;
}
.asterisk img {
  display: block;
  width: 64px;
  height: 64px;
}
@media (max-width: 600px) {
  .manifesto-art {
    height: auto;
    aspect-ratio: auto;
    max-height: none;
    overflow: visible;
  }
  .manifesto-art > picture {
    aspect-ratio: 2 / 3;
    height: auto;
  }
  .manifesto-art picture img {
    object-fit: contain;
    object-position: center;
  }
  .manifesto-art > span {
    position: static;
    display: block;
    margin-top: 10px;
  }
  .asterisk img {
    width: 48px;
    height: 48px;
  }
}

/* Estimator: rendered step and platform icons on the group tints */
.legend-icon.legend-art {
  padding: 2px;
  background: var(--g-soft);
  object-fit: contain;
}
.estimator-tiles button .tile-icon.tile-art {
  padding: 2px;
  background: var(--g-soft);
  object-fit: contain;
}
.estimator-tiles button[aria-pressed="true"] .tile-icon.tile-art {
  background: var(--g);
}

/* Contact: the glass monogram behind the talk circle */
.invite-art {
  position: relative;
  flex: none;
  padding: 0 70px 80px 0;
}
.invite-mark {
  display: block;
  width: clamp(220px, 23vw, 340px);
  height: auto;
  filter: drop-shadow(0 30px 60px #0868f845);
}
.invite-art .project-circle {
  position: absolute;
  right: 0;
  bottom: 0;
}
@media (max-width: 600px) {
  .invite-art {
    width: 100%;
    padding: 0 0 26px;
  }
  .invite-mark {
    width: 190px;
    margin-left: auto;
    margin-right: 96px;
  }
  .invite-art .project-circle {
    right: 0;
    bottom: 0;
    margin: 0;
  }
}

/* Footer: Tbilisi drawn as one circuit trace along the top edge */
.footer-skyline {
  display: block;
  width: 100%;
  height: auto;
  margin: -4px 0 14px;
  opacity: 0.92;
}

/* Command palette: the missing stop */

/* Brief builder: the brief lifts off once it is sent or saved */
.brief-done {
  display: flex;
  align-items: center;
  gap: 12px;
}
#brief-sent-art {
  flex: none;
  width: 64px;
  height: auto;
  margin-top: 12px;
  animation: brief-lift 0.7s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
#brief-sent-art[hidden] {
  display: none;
}
@keyframes brief-lift {
  from {
    opacity: 0;
    transform: translate(-8px, 12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #brief-sent-art {
    animation: none;
  }
}

.project-credit {
  display: block;
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #7f97c2;
}
/* ============================================================
   Design + mobile review pass (2026-09-22)
   ============================================================ */
/* Phones and tablets: the header slides away while reading down (script.js adds
   .is-tucked) and returns on the way up. The progress line stays at the top. */
@media (max-width: 1000px) {
  .header {
    transition: translate 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .header.is-tucked {
    translate: 0 calc(-100% - 2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .header {
    transition: none;
  }
}

/* Work cards on phones: each project opens with its artwork, the story follows. */
@media (max-width: 760px) {
  .real-project > .real-project-art {
    order: -1;
    grid-row: auto;
  }
  .youandme-project > .real-project-copy {
    grid-row: auto;
  }
}
@media (max-width: 800px) {
  .flyfy-project > .flyfy-art {
    order: -1;
  }
}
/* You&Me's two launch figures sit side by side on phones too. */
@media (max-width: 480px) {
  .project-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
  }
}

/* Tablets (801–1000): the navigation stays on the header's one row instead of wrapping
   into a second strip, so the sticky header is 84px instead of 147px. */
@media (min-width: 801px) and (max-width: 1000px) {
  html {
    scroll-padding-top: 104px;
  }
  .header {
    flex-wrap: nowrap;
    height: auto;
    min-height: 84px;
    padding-block: 0;
    gap: 20px;
  }
  .header nav {
    order: 0;
    flex-basis: auto;
    justify-content: center;
    gap: 24px;
    margin-inline: auto;
    padding-top: 0;
    border-top: 0;
    white-space: nowrap;
  }
  .header-cta {
    margin-left: 0;
  }
  /* Hero: equal columns so both actions share one line. */
  .hero-main {
    grid-template-columns: 1fr 1fr;
  }
  .hero-actions {
    gap: 12px 20px;
  }
  .hero .primary-action {
    gap: 18px;
  }
}
@media (min-width: 801px) and (max-width: 900px) {
  .header-cta .cta-long {
    display: none;
  }
}
/* Tablets and small laptops: the hero caption would run through the floating pill chip. */
@media (max-width: 1150px) {
  .hero-visual .art-caption {
    display: none;
  }
}
/* Tablets: one experiment per row. Two columns left each card about 360px wide, which
   squeezed the drawing tools, the priority profile and the numbers chart into single words. */
@media (min-width: 801px) and (max-width: 1100px) {
  .experiments {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* The curtain caption breaks before the lit floor instead of running across it. */
@media (max-width: 1100px) {
  .curtain-caption {
    max-width: 150px;
  }
}

/* Phone menu: the sheet is a column, so the links stretch to the left edge in one steady
   column (the header's desktop `align-items: center` had been centring each link on its own). */
@media (max-width: 800px) {
  .header nav {
    align-items: stretch;
  }
}
/* Hero footer on phones: the line reads as one sentence, the three platforms sit on one row. */
@media (max-width: 600px) {
  .hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .hero-bottom > p {
    max-width: none;
    font-size: 0.875rem;
  }
  .hero-bottom > p br {
    display: none;
  }
  .hero-bottom .platform-list {
    max-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}

/* Contrast to AA. Estimator group titles take their group's ink (a more specific grey
   rule had been winning); the "pick any" hint and the 08 lead-coloured labels darken. */
.estimator-step legend .legend-text {
  color: var(--g-ink);
  font-weight: 600;
}
.estimator-step legend span:not(.legend-text) {
  color: #667085;
}

/* 03 drawing: its status line sits on the cream board, not the dark card. */
#drawing-status {
  color: #6b6457;
}

/* Dialog close buttons are round, so their focus ring is too (it had been a square). */
.dialog-close {
  border-radius: 50%;
}
.dialog-close:focus-visible {
  outline-offset: 3px;
}

/* You&Me on phones: the art box had been capped at 300px and the flex column squeezed the
   Georgian wordmark to a 10px sliver. The characters shrink a little and the wordmark keeps its height. */
@media (max-width: 760px) {
  .real-project-art.youandme-art {
    height: auto;
    max-height: none;
    padding: 26px 0 22px;
  }
  .youandme-art .together-characters {
    width: min(56%, 230px);
  }
  .youandme-art .together-wordmark {
    flex: none;
    height: 64px;
  }
}
/* Rythmos on phones: the copy sits on the scene itself, so the scrim is deeper where the
   neon path crosses the paragraph and eases off at the far edge. */
@media (max-width: 600px) {
  .rythmos-project:after {
    background: linear-gradient(90deg, rgba(2, 8, 24, 0.86) 0%, rgba(2, 8, 24, 0.74) 72%, rgba(2, 8, 24, 0.38) 100%);
  }
}
/* Small phones: the main button keeps its words together; "Explore our work" wraps below it. */
.hero-actions .primary-action {
  white-space: nowrap;
}
@media (max-width: 600px) {
  /* The link's tap padding no longer indents its text when it wraps under the button. */
  .hero-work-link {
    margin-left: -8px;
  }
}

/* ============================================================
   Round 2 (2026-09-22): speed, forms on touch screens, estimator summary, nav
   ============================================================ */
/* Touch screens: text fields and pickers at 16px, below which iPhone and iPad zoom the
   whole page on focus. */
@media (pointer: coarse) {
  #focus-task,
#drawing-symmetry {
    font-size: 16px;
  }
  /* The larger type costs width; slimmer padding keeps the drawing tools on their two rows. */
}

/* Estimator on phones and tablets: while you tap through the options, a slim bar fixed to the
   bottom of the screen keeps the running budget and timeline in view, and steps aside once the
   full estimate arrives (script.js sets body.estimate-dock-on). Fixed, so it takes no room in the
   page; hidden with visibility, so its button leaves the tab order too. The floating "next"
   button makes room for it. */
.estimate-dock {
  display: none;
}
@media (max-width: 1000px) {
  .estimate-dock {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 640px;
    margin-inline: auto;
    padding: 10px 10px 10px 18px;
    border-radius: 18px;
    background: var(--blue);
    color: #fff;
    box-shadow: 0 14px 34px rgba(8, 60, 160, 0.35);
    opacity: 0;
    translate: 0 16px;
    visibility: hidden;
    transition:
      opacity 0.25s,
      translate 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
      visibility 0s linear 0.25s;
  }
  body.estimate-dock-on:not(.menu-open):not(.modal-open) .estimate-dock {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
    transition-delay: 0s;
  }
  /* Clear of the analytics notice while it is showing. */
  body:has(#consent-notice) .estimate-dock {
    bottom: calc(168px + env(safe-area-inset-bottom, 0px));
  }
  .dock-figures {
    display: grid;
    gap: 1px;
    min-width: 0;
  }
  .dock-figures b {
    display: block;
    font-family: var(--display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dock-figures span {
    font-size: 0.8125rem;
    opacity: 0.85;
  }
  .dock-jump {
    flex: none;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    background: #fff;
    color: #0b3fa8;
    font-size: 0.875rem;
    font-weight: 600;
  }
  .dock-jump:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
  }
  body.estimate-dock-on .next-fab {
    opacity: 0;
    pointer-events: none;
  }
  /* The result takes focus when the bar sends you there; it needs no ring for that. */
  #estimator-result:focus {
    outline: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .estimate-dock {
    transition: none;
  }
}
/* Estimator on tablets (801–1000): the options take the full width (four tiles a row instead
   of one), the running figures ride along in the summary bar, and the full estimate follows. */
@media (min-width: 801px) and (max-width: 1000px) {
  .estimator-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .estimator-result {
    position: static;
  }
}
/* Landscape phones (short and wide): the headline is sized to the screen's height and the
   spacing tightens, so the call to action shares the first screen. Phone widths only: a short
   desktop window keeps its own header and spacing. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .hero {
    padding-top: 10px;
  }
  .hero-main {
    padding-block: 6px 18px;
  }
  .hero-copy h1 {
    font-size: clamp(2.3rem, 10.5vh, 3.6rem);
  }
  .hero-copy > p {
    margin-top: 10px;
    font-size: 0.9375rem;
  }
  .hero-actions {
    margin-top: 14px;
  }
  .hero-kicker {
    display: none;
  }
  .header {
    min-height: 64px;
  }
  .header-cta {
    padding-block: 10px;
  }
  html {
    scroll-padding-top: 80px;
  }
}

/* Phones, finishing touches. */
/* iPhone keeps the chosen type sizes when turned to landscape instead of inflating them. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Scrolling past the end of a dialog stops there instead of moving the page behind it
   (these are the parts that scroll; the brief's body already does this). */
.concept-dialog,
.project-dialog {
  overscroll-behavior: contain;
}
/* A press you can feel: the main buttons give a little under the finger. */
.primary-action:active,
.header-cta:active,
.menu-toggle:active,
.next-fab:active,
.dock-jump:active,
.deck-btn:not(:disabled):active,
.project-circle:active {
  scale: 0.96;
}
@media (prefers-reduced-motion: reduce) {
  .primary-action:active,
  .header-cta:active,
  .menu-toggle:active,
  .next-fab:active,
  .dock-jump:active,
  .deck-btn:not(:disabled):active,
  .project-circle:active {
    scale: none;
  }
}

/* Tablets: the full-width result reads as a row, device preview beside the figures. The
   figures are spaced with margins, not row gaps, so a hidden care row leaves no hole. */
@media (min-width: 640px) and (max-width: 1000px) {
  .estimator-result {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    column-gap: 28px;
    row-gap: 0;
    align-content: start;
  }
  .estimator-result > .build-preview {
    grid-column: 1;
    grid-row: 1 / span 5;
    align-self: center;
  }
  .estimator-result > :not(.build-preview):not(.estimate-sparks):not(.calc-scan) {
    grid-column: 2;
  }
  .estimator-result
    > :not(.build-preview):not(.estimate-sparks):not(.calc-scan)
    ~ :not(.build-preview):not(.estimate-sparks):not(.calc-scan) {
    margin-top: 18px;
  }
}

/* ============================================================
   Estimator: calculate, then reveal (2026-09-22)
   States on #estimator-result: idle → calculating → done; a change after that is "stale".
   ============================================================ */
/* The figures wait under frosted glass until the estimate is calculated. */
.estimate-row output,
.estimate-row small {
  transition:
    filter 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.6s;
}
.estimator-result:not([data-state="done"]) .estimate-row output,
.estimator-result:not([data-state="done"]) .estimate-row small {
  filter: blur(10px);
  opacity: 0.7;
  user-select: none;
}
.estimator-result[data-state="stale"] .estimate-row output,
.estimator-result[data-state="stale"] .estimate-row small {
  filter: blur(6px);
}
/* Fixed-width digits, so the spinning reveal doesn't jitter. */
.estimate-row output,
.estimate-row small {
  font-variant-numeric: tabular-nums;
}
/* The figures and, while calculating, the step circuit laid over them (no change in height). */
.estimate-figures {
  position: relative;
  display: grid;
  gap: 18px;
}
@media (max-width: 1000px) {
  /* Undo the desktop stickiness (and its offset, which left a gap above the card and pushed it
     out of the section) without losing the positioning the scan and sparks need. */
  .estimator-result {
    position: relative;
    top: auto;
  }
}
/* Calculating: the four steps are nodes on a circuit. The pulse runs node to node; each node
   lights with a ripple and a tick when it is reached; the line below names the step. */
.calc-progress {
  position: absolute;
  inset: -8px -10px;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 0 10px;
  border-radius: 16px;
  background: radial-gradient(120% 90% at 50% 50%, rgba(8, 80, 210, 0.6), rgba(8, 80, 210, 0) 78%);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0s linear 0.3s;
}
.estimator-result[data-state="calculating"] .calc-progress {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.estimate-figures > .estimate-row {
  transition: opacity 0.3s;
}
.estimator-result[data-state="calculating"] .estimate-figures > .estimate-row {
  opacity: 0.14;
}
.calc-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
}
.calc-pulse {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 4px;
  width: calc(100% - 48px);
  height: 40px;
  overflow: visible;
}
.calc-pulse path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.calc-pulse-base {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-dasharray: 2 5;
}
.calc-pulse-live {
  stroke: #fff;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
}
.calc-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #1a63e6;
  border: 1px solid rgba(255, 255, 255, 0.25);
  opacity: 0.45;
  scale: 0.86;
  transition:
    opacity 0.25s,
    scale 0.35s cubic-bezier(0.3, 1.6, 0.5, 1),
    background 0.25s,
    box-shadow 0.35s;
}
.calc-node img {
  width: 34px;
  height: 34px;
}
.calc-node.is-on {
  opacity: 1;
  scale: 1;
  background: #3a86fb;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.28),
    0 8px 24px rgba(3, 40, 120, 0.45),
    0 0 26px rgba(160, 205, 255, 0.7);
}
/* The ripple when a node lights. */
.calc-node::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  border: 2px solid #fff;
  opacity: 0;
}
.calc-node.is-on::before {
  animation: node-ripple 0.7s ease-out;
}
@keyframes node-ripple {
  from {
    opacity: 0.9;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 1.7;
  }
}
/* The tick once the step is done. */
.calc-node::after {
  content: "✓";
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  color: #0868f8;
  font-size: 0.6875rem;
  font-weight: 700;
  scale: 0;
  transition: scale 0.3s cubic-bezier(0.3, 1.8, 0.5, 1);
}
.calc-node.is-done::after {
  scale: 1;
}
.calc-step-text {
  min-height: 2.7em;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 10px rgba(3, 40, 120, 0.6);
}
/* A light beam sweeps the whole card while it works; the card's edge breathes. */
.calc-scan {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
}
.calc-scan::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 30%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(190, 220, 255, 0.22) 80%, rgba(255, 255, 255, 0.85) 99%, rgba(255, 255, 255, 0) 100%);
}
.estimator-result[data-state="calculating"] .calc-scan {
  opacity: 1;
}
.estimator-result[data-state="calculating"] .calc-scan::before {
  animation: calc-scan var(--calc-ms, 2000ms) cubic-bezier(0.45, 0, 0.55, 1) forwards;
}
@keyframes calc-scan {
  to {
    transform: translateY(433%);
  }
}
.estimator-result[data-state="calculating"] {
  animation: calc-breathe 1.1s ease-in-out infinite alternate;
}
@keyframes calc-breathe {
  from {
    box-shadow: 0 24px 60px rgba(8, 104, 248, 0.35);
  }
  to {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.35),
      0 30px 90px rgba(60, 150, 255, 0.65);
  }
}
/* The reveal: the budget flashes, a ring ripples out from it, the card lands. */
.estimator-result.is-landing:not([data-state="calculating"]) {
  animation: calc-land 0.5s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes calc-land {
  40% {
    scale: 1.018;
  }
}
.budget-ring {
  position: absolute;
  z-index: 0;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
  animation: budget-ring 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes budget-ring {
  from {
    opacity: 1;
    scale: 0.4;
  }
  to {
    opacity: 0;
    scale: 7;
  }
}
.estimate-sparks i {
  left: var(--sx, 50%);
  top: var(--sy, 40%);
}
/* The buttons: Calculate leads until there is an estimate; then the brief does. */
.estimate-calc {
  gap: 14px;
}
.estimate-calc[aria-disabled="true"] {
  cursor: progress;
}
.estimator-result[data-state="done"] .estimate-calc {
  display: none;
}
.estimator-result:not([data-state="done"]) #estimate-brief,
#estimate-brief[aria-disabled="true"] {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  opacity: 0.6;
  cursor: not-allowed;
}
.estimator-result[data-state="done"] #estimate-brief {
  animation: brief-ready 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes brief-ready {
  from {
    transform: translateY(6px);
    opacity: 0;
  }
}
.estimator-result:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .estimate-row output,
  .estimate-row small {
    transition: none;
  }
  .estimator-result[data-state="done"] #estimate-brief {
    animation: none;
  }
}

/* Accessibility pass (2026-09-22). */
/* Review attributions, the active filter's count, the colour card's code and phone title, and
   the 08 intro line: nudged to AA (4.5:1) on their own backgrounds. */
.project-reviews cite {
  opacity: 0.9;
}
.lab-filters button[aria-pressed="true"] span {
  opacity: 0.78;
}

/* Deck dots: 24px wide targets (they were 18px). */
.deck-dots button {
  width: 24px;
}
.deck-dots button::after {
  left: 8px;
  right: 8px;
}

/* Estimator, review fixes (2026-09-22). */
/* The fine print now follows the buttons. */
#estimate-note {
  margin-top: -4px;
}
/* Short laptop windows: the sticky card is taller than the screen, so its Calculate button
   would sit below the fold. A shorter preview first; on very short windows the card scrolls
   with the options instead of sticking. */
@media (min-width: 1001px) and (max-height: 900px) {
  .estimator-result .build-preview {
    height: 190px;
  }
  .estimator-result .build-preview .device {
    scale: 0.74;
    transform-origin: 50% 100%;
  }
}
@media (min-width: 1001px) and (max-height: 760px) {
  .estimator-result {
    position: relative;
    top: auto;
  }
}
/* 320px phones: slimmer deck arrows leave room for the 24px dots. */
@media (max-width: 340px) {
  .deck-btn {
    width: 40px;
    height: 40px;
  }
}

/* ============================================================
   Wow phase 1: a cinematic hero, an app coming apart into its layers, a deck of work,
   a read-along manifesto and a pulse that follows you down the page.
   Everything moves with transform and opacity; reduced motion keeps the calm, static page.
   motion.js adds html.motion and drives the scroll-linked parts.
   ============================================================ */

/* 1. Hero intro: the headline rises out of its line, a heartbeat draws through "pulse."
   and lights it, the art and its glass chips arrive. Once, on load. */
.hero-copy h1 em {
  position: relative;
  width: fit-content;
}
.pulse-ignite {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 800px) {
    .hero-copy h1 > span:nth-child(2),
    .hero-copy h1 em {
      display: inline-block;
    }
  }
  /* The intro holds until the headline fonts are in (index.html adds fonts-ready, within 0.8s at
     most), so it never plays in a fallback face. */
  html:not(.fonts-ready) .hero-copy h1 > span,
  html:not(.fonts-ready) .hero-copy h1 > em,
  html:not(.fonts-ready) .hero-kicker,
  html:not(.fonts-ready) .hero-bottom,
  html:not(.fonts-ready) .hero-visual > picture,
  html:not(.fonts-ready) .hero-visual .hero-chip {
    animation-play-state: paused;
  }
  .hero-copy h1 > span,
  .hero-copy h1 > em {
    animation: hero-line 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .hero-copy h1 > span:nth-child(1) {
    animation-delay: 0.15s;
  }
  .hero-copy h1 > span:nth-child(2) {
    animation-delay: 0.3s;
  }
  .hero-copy h1 > em {
    animation:
      hero-line 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s both,
      pulse-lit 1.6s ease-out 1.55s both;
  }
  @keyframes hero-line {
    from {
      translate: 0 105%;
      clip-path: inset(0 -20% 100% -20%);
    }
    to {
      translate: 0 0;
      clip-path: inset(-30% -20% -40% -20%);
    }
  }
  @keyframes pulse-lit {
    0% {
      text-shadow: 0 0 0 rgba(90, 146, 255, 0);
    }
    18% {
      text-shadow:
        0 0 18px rgba(140, 185, 255, 0.95),
        0 0 42px rgba(8, 104, 248, 0.8);
    }
    100% {
      text-shadow: 0 0 0 rgba(90, 146, 255, 0);
    }
  }
  .pulse-ignite {
    display: block;
    position: absolute;
    left: -2%;
    right: -6%;
    bottom: 0.02em;
    width: 108%;
    height: 0.34em;
    overflow: visible;
    pointer-events: none;
  }
  .pulse-ignite path {
    fill: none;
    stroke: #8fb8ff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 6px rgba(120, 175, 255, 0.95));
    animation:
      ignite-draw 0.75s cubic-bezier(0.5, 0, 0.3, 1) 1.1s forwards,
      ignite-fade 0.9s ease-in 2.2s forwards;
  }
  @keyframes ignite-draw {
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes ignite-fade {
    to {
      opacity: 0;
    }
  }
  .hero-copy > p,
  .hero-actions,
  .hero-copy > .hero-proof {
    animation: hero-fade 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .hero-copy > p:not(.hero-proof) {
    animation-delay: 0.75s;
  }
  .hero-actions {
    animation-delay: 0.9s;
  }
  .hero-copy > .hero-proof {
    animation-delay: 1.05s;
  }
  .hero-kicker,
  .hero-bottom {
    animation: hero-fade 1s ease-out 1.2s both;
  }
  @keyframes hero-fade {
    from {
      opacity: 0;
      translate: 0 18px;
    }
  }
  .hero-visual > picture {
    animation: hero-art 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both;
  }
  @keyframes hero-art {
    from {
      opacity: 0;
      scale: 0.88;
      filter: blur(14px);
    }
  }
  .hero-visual .hero-chip {
    animation: chip-in 1s cubic-bezier(0.3, 1.45, 0.5, 1) both;
  }
  .hero-chip-toggle {
    --from: 120px 90px;
    animation-delay: 1.15s !important;
  }
  .hero-chip-slider {
    --from: 140px -80px;
    animation-delay: 1.25s !important;
  }
  .hero-chip-button {
    --from: -90px 110px;
    animation-delay: 1.05s !important;
  }
  .hero-chip-pill {
    --from: 20px -140px;
    animation-delay: 1.35s !important;
  }
  .hero-chip-chart {
    --from: -130px -60px;
    animation-delay: 1.45s !important;
  }
  @keyframes chip-in {
    from {
      opacity: 0;
      translate: var(--from, 0 60px);
      scale: 0.4;
    }
  }
}

/* 2. Every app is layers: pinned while a phone turns and comes apart into its layers. */
.layers {
  position: relative;
}
.layers-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 40px;
  padding-block: 80px;
}
.layers-copy h2 {
  font-size: clamp(2.5rem, 4.5vw, 4.25rem);
  letter-spacing: -0.065em;
  line-height: 1.05;
}
.layers-copy h2 em {
  font-size: 1.17em;
  letter-spacing: -0.02em;
  color: #5a92ff;
}
.layers-copy > p {
  max-width: 380px;
  margin-top: 20px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--muted);
}
.layers-legend {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  max-width: 380px;
}
.layers-legend li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  transition: opacity 0.35s;
}
.layers-legend li::before {
  content: "";
  grid-row: 1 / 3;
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2a3550;
  transition:
    background 0.35s,
    box-shadow 0.35s;
}
.layers-legend b {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.layers-legend span {
  font-size: 0.875rem;
  color: var(--muted);
}
.layers-legend li.is-on::before {
  background: #5a92ff;
  box-shadow: 0 0 12px rgba(90, 146, 255, 0.9);
}
.layers-scene {
  display: grid;
  place-items: center;
  height: min(76vh, 700px);
  perspective: 1900px;
  perspective-origin: 50% 40%;
}
/* The phone: flat and facing you at first (--rot 0), then turned into a three-quarter view.
   Its layers lift away one by one (--l1..--l3) and the pulse rises last (--beam). The plates
   are rendered artwork on one canvas each, so they stack in register. */
.layers-aurora {
  position: absolute;
  width: min(110%, 620px);
  height: auto;
  opacity: 0.3;
  filter: blur(14px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.phone3d {
  position: relative;
  width: min(34vh, 340px);
  height: min(68vh, 680px);
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--rot, 1) * 55deg)) rotateZ(calc(var(--rot, 1) * -38deg))
    scale(calc(1 - var(--rot, 1) * 0.08));
}
.p3-layer {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.p3-layer > img,
img.p3-layer {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.p3-body {
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
}
.p3-logic {
  transform: translateZ(calc(2px + var(--l1, 1) * 62px));
}
.p3-interaction {
  transform: translateZ(calc(4px + var(--l2, 1) * 124px));
}
.p3-interface {
  transform: translateZ(calc(6px + var(--l3, 1) * 186px));
}
.p3-pulse {
  transform: translateZ(calc(8px + var(--beam, 1) * 236px));
  opacity: var(--beam, 1);
}
/* The layer names sit in a steady column at the right edge of the scene, outside the 3D
   stack, so a plate can never cover them. Each name fades in with its own layer. */
.layer-marks {
  position: absolute;
  right: 0;
  top: 14%;
  display: grid;
  gap: 18px;
  text-align: right;
  z-index: 2;
}
.layer-marks span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: #eef4ff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
  transition: opacity 0.3s;
}
.layer-marks span::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, rgba(143, 184, 255, 0), #8fb8ff);
}
.layer-marks [data-layer="1"] {
  opacity: var(--l1, 1);
}
.layer-marks [data-layer="2"] {
  opacity: var(--l2, 1);
}
.layer-marks [data-layer="3"] {
  opacity: var(--l3, 1);
}
.layer-marks [data-layer="4"] {
  opacity: var(--beam, 1);
}
.p3-label {
  display: none;
}
/* Scroll-linked: pinned for two screens of scrolling while the phone comes apart. */
.motion .layers-track {
  height: 270vh;
}
.motion .layers-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-block: 0;
}
.motion .layers-legend li:not(.is-on) {
  opacity: 0.4;
}
@media (max-width: 1000px) {
  .layers-stage {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 8px;
    padding-block: 48px;
  }
  .layers-copy h2 {
    font-size: clamp(2.2rem, 9vw, 3rem);
  }
  .layers-copy > p {
    margin-top: 10px;
    font-size: 0.9375rem;
  }
  .layers-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    margin-top: 16px;
  }
  .layers-legend li {
    padding: 6px 0;
  }
  .layers-legend span {
    display: none;
  }
  .layers-scene {
    height: min(52vh, 480px);
  }
  .phone3d {
    scale: 0.62;
  }
  .motion .layers-track {
    height: 230vh;
  }
}

/* 3. Work as a deck: each card pins as it arrives and the next slides over it, pressing the
   one beneath back into the stack. motion.js sets --stick (where it pins) and --stack (0–1). */
/* Wide screens only: on phones a card is taller than the screen, so stacking would show two
   cards at once. There they stay a plain column. */
@media (min-width: 1001px) {
  .motion .real-projects > .real-project {
    position: sticky;
    top: var(--stick, 100px);
    scale: calc(1 - var(--stack, 0) * 0.06);
    transform-origin: 50% 0;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.35);
  }
  .motion .real-projects > .real-project::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    background: #04060c;
    opacity: calc(var(--stack, 0) * 0.55);
    pointer-events: none;
  }
}

/* 4. Manifesto, read along: each word lights as you scroll through the line. */
.motion .manifesto h2 .w {
  opacity: 0.16;
  transition: opacity 0.35s ease-out;
}
.motion .manifesto h2 .w.is-lit {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .motion .real-projects > .real-project {
    position: relative;
    scale: none;
  }
}

/* The two builds of the phone while we choose between them: the rendered plates, or the one
   drawn in the browser (?layers=drawn). motion.js sets data-build on the scene. */
.phone3d-drawn {
  display: none;
}
.layers-scene[data-build="drawn"] .phone3d-drawn {
  display: block;
}
.layers-scene[data-build="drawn"] .phone3d:not(.phone3d-drawn) {
  display: none;
}
/* The drawn build's own surfaces. */
.phone3d-drawn .p3-body {
  border-radius: 44px;
  background: linear-gradient(160deg, #1b2644, #0a0f1d 70%);
  border: 2px solid #3a5a92;
  box-shadow:
    inset 0 0 0 8px #0d1428,
    0 50px 90px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(8, 104, 248, 0.25);
}
.phone3d-drawn .p3-island {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 78px;
  height: 22px;
  margin-left: -39px;
  border-radius: 12px;
  background: #05080f;
}
.phone3d-drawn .p3-glass {
  position: absolute;
  inset: 12px;
  border-radius: 34px;
  background: radial-gradient(80% 60% at 50% 30%, rgba(8, 104, 248, 0.35), transparent 70%), #0a1122;
}
.phone3d-drawn .p3-logic,
.phone3d-drawn .p3-interaction,
.phone3d-drawn .p3-interface,
.phone3d-drawn .p3-pulse {
  inset: 12px;
  border-radius: 34px;
  border: 1px solid rgba(170, 210, 255, 0.55);
  background: linear-gradient(150deg, rgba(120, 170, 255, 0.22), rgba(20, 70, 200, 0.1));
  box-shadow:
    0 0 34px rgba(8, 104, 248, 0.35),
    inset 0 0 26px rgba(170, 210, 255, 0.14);
}
.phone3d-drawn .p3-interface {
  background:
    linear-gradient(160deg, rgba(40, 90, 210, 0.55), rgba(8, 20, 50, 0.75)),
    #0b1734;
}
.phone3d-drawn .p3-pulse {
  background: none;
  border-color: rgba(170, 210, 255, 0.25);
  box-shadow: none;
}
.p3-rows {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 70px;
  display: grid;
  gap: 12px;
}
.p3-rows i {
  height: 10px;
  border-radius: 5px;
  background: rgba(170, 210, 255, 0.35);
}
.p3-rows i:nth-child(2n) {
  width: 70%;
}
.p3-rows i:nth-child(3n) {
  width: 84%;
  background: rgba(90, 146, 255, 0.6);
}
.p3-graph {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 70px;
  width: calc(100% - 44px);
}
.p3-graph path {
  fill: none;
  stroke: #8fb8ff;
  stroke-width: 2.5;
}
.p3-graph circle {
  fill: #eaf2ff;
}
.p3-toggle {
  position: absolute;
  top: 70px;
  left: 26px;
  width: 64px;
  height: 34px;
  border-radius: 17px;
  background: #0868f8;
  box-shadow: 0 0 18px rgba(8, 104, 248, 0.8);
}
.p3-toggle i {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
}
.p3-slider {
  position: absolute;
  top: 134px;
  left: 26px;
  right: 26px;
  height: 6px;
  border-radius: 3px;
  background: rgba(170, 210, 255, 0.35);
}
.p3-slider i {
  position: absolute;
  top: -9px;
  left: 58%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px rgba(140, 190, 255, 0.9);
}
.p3-ripple {
  position: absolute;
  left: 50%;
  top: 58%;
}
.p3-ripple i {
  position: absolute;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 2px solid rgba(200, 225, 255, 0.8);
}
.p3-ripple i:nth-child(2) {
  scale: 1.9;
  opacity: 0.5;
}
.p3-ripple i:nth-child(3) {
  scale: 2.9;
  opacity: 0.25;
}
.p3-press {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 44px;
  padding: 13px;
  border-radius: 16px;
  background: #fff;
  color: #0b3fa8;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}
.p3-status {
  position: absolute;
  top: 16px;
  left: 24px;
  right: 22px;
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #e8f0ff;
}
.p3-status i {
  font-style: normal;
}
.p3-status b {
  width: 22px;
  height: 10px;
  border-radius: 3px;
  background: #e8f0ff;
}
.p3-title,
.p3-sub {
  position: absolute;
  left: 24px;
  height: 14px;
  border-radius: 7px;
  background: #eaf2ff;
}
.p3-title {
  top: 56px;
  width: 58%;
}
.p3-sub {
  top: 80px;
  width: 38%;
  height: 9px;
  opacity: 0.5;
}
.p3-hero {
  position: absolute;
  top: 108px;
  left: 20px;
  right: 20px;
  height: 104px;
  border-radius: 20px;
  background: linear-gradient(135deg, #3d8bff, #0868f8 55%, #0647b8);
  box-shadow: 0 10px 30px rgba(8, 104, 248, 0.55);
}
.p3-tiles {
  position: absolute;
  top: 230px;
  left: 20px;
  right: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.p3-tiles svg {
  width: 100%;
  aspect-ratio: 1;
  padding: 16px;
  border-radius: 16px;
  background: #17264a;
  color: #cfe0ff;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.p3-tabbar {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  justify-content: space-around;
  padding: 12px;
  border-radius: 18px;
  background: rgba(10, 20, 45, 0.8);
}
.p3-tabbar i {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: rgba(200, 220, 255, 0.4);
}
.p3-tabbar i:first-child {
  background: #5a92ff;
}
.p3-heartbeat {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 45%;
  width: calc(100% - 36px);
  height: 40px;
  overflow: visible;
}
.p3-heartbeat path {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--hb, 1));
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95));
}

/* The drawn phone, with life in every layer. Each layer's own motion only runs once that
   layer has arrived (.is-on) and while the section is on screen (.is-live), so nothing
   animates off-screen. Reduced motion never reaches here: motion.js does not start. */
/* Body: the screen breathes. */
.layers-stage.is-live .phone3d-drawn .p3-glass {
  animation: p3-breathe 3.4s ease-in-out infinite alternate;
}
@keyframes p3-breathe {
  from {
    opacity: 0.75;
  }
  to {
    opacity: 1;
  }
}
/* Logic: the rows fill in, the graph draws itself and a point of light runs along it. */
.phone3d-drawn .p3-rows i {
  transform-origin: 0 50%;
  scale: 0 1;
}
.phone3d-drawn .p3-logic.is-on .p3-rows i {
  animation: p3-row 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.phone3d-drawn .p3-logic.is-on .p3-rows i:nth-child(2) {
  animation-delay: 0.07s;
}
.phone3d-drawn .p3-logic.is-on .p3-rows i:nth-child(3) {
  animation-delay: 0.14s;
}
.phone3d-drawn .p3-logic.is-on .p3-rows i:nth-child(4) {
  animation-delay: 0.21s;
}
.phone3d-drawn .p3-logic.is-on .p3-rows i:nth-child(5) {
  animation-delay: 0.28s;
}
.phone3d-drawn .p3-logic.is-on .p3-rows i:nth-child(6) {
  animation-delay: 0.35s;
}
@keyframes p3-row {
  to {
    scale: 1 1;
  }
}
.p3-graph path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--l1, 1));
  pathlength: 1;
  filter: drop-shadow(0 0 5px rgba(143, 184, 255, 0.8));
}
.p3-graph circle {
  scale: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.p3-logic.is-on .p3-graph circle {
  animation: p3-node 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) forwards;
}
.p3-logic.is-on .p3-graph circle:nth-of-type(2) {
  animation-delay: 0.12s;
}
.p3-logic.is-on .p3-graph circle:nth-of-type(3) {
  animation-delay: 0.24s;
}
.p3-logic.is-on .p3-graph circle:nth-of-type(4) {
  animation-delay: 0.36s;
}
@keyframes p3-node {
  to {
    scale: 1;
  }
}
/* Interaction: the toggle flips and the slider glides as the layer lifts; the ripple keeps
   spreading, and the button gives a slow, quiet pulse. */
.phone3d-drawn .p3-toggle {
  background: color-mix(in srgb, #0868f8 calc(var(--l2, 1) * 100%), #2b3a5c);
}
.phone3d-drawn .p3-toggle i {
  right: auto;
  left: 4px;
  translate: calc(var(--l2, 0) * 30px) 0;
}
.phone3d-drawn .p3-slider i {
  left: 12%;
  translate: calc(var(--l2, 0) * 150%) 0;
}
.layers-stage.is-live .phone3d-drawn .p3-interaction.is-on .p3-ripple i {
  animation: p3-ripple 2.4s ease-out infinite;
}
.layers-stage.is-live .phone3d-drawn .p3-ripple i:nth-child(2) {
  animation-delay: 0.8s;
}
.layers-stage.is-live .phone3d-drawn .p3-ripple i:nth-child(3) {
  animation-delay: 1.6s;
}
@keyframes p3-ripple {
  from {
    scale: 0.4;
    opacity: 0.9;
  }
  to {
    scale: 3.4;
    opacity: 0;
  }
}
.layers-stage.is-live .phone3d-drawn .p3-interaction.is-on .p3-press {
  animation: p3-press 2.6s ease-in-out infinite;
}
@keyframes p3-press {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    scale: 1;
  }
  50% {
    box-shadow: 0 8px 26px rgba(255, 255, 255, 0.35);
    scale: 0.985;
  }
}
/* Interface: the tiles arrive one after another and a light sweeps the hero card. */
.phone3d-drawn .p3-tiles svg {
  scale: 0.6;
  opacity: 0;
}
.phone3d-drawn .p3-interface.is-on .p3-tiles svg {
  animation: p3-tile 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) forwards;
}
.phone3d-drawn .p3-interface.is-on .p3-tiles svg:nth-child(2) {
  animation-delay: 0.06s;
}
.phone3d-drawn .p3-interface.is-on .p3-tiles svg:nth-child(3) {
  animation-delay: 0.12s;
}
.phone3d-drawn .p3-interface.is-on .p3-tiles svg:nth-child(4) {
  animation-delay: 0.18s;
}
.phone3d-drawn .p3-interface.is-on .p3-tiles svg:nth-child(5) {
  animation-delay: 0.24s;
}
.phone3d-drawn .p3-interface.is-on .p3-tiles svg:nth-child(6) {
  animation-delay: 0.3s;
}
@keyframes p3-tile {
  to {
    scale: 1;
    opacity: 1;
  }
}
.phone3d-drawn .p3-hero {
  overflow: hidden;
}
.phone3d-drawn .p3-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  translate: -120% 0;
}
.layers-stage.is-live .phone3d-drawn .p3-interface.is-on .p3-hero::after {
  animation: p3-sweep 3.6s ease-in-out 0.4s infinite;
}
@keyframes p3-sweep {
  0% {
    translate: -120% 0;
  }
  35%,
  100% {
    translate: 120% 0;
  }
}
/* Pulse: the line draws, then a point of light keeps running along it. */
.p3-beat-dot {
  fill: #fff;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #5a92ff);
  offset-path: path("M0 22H62l8-18 9 30 8-20 6 8H200");
  offset-rotate: 0deg;
  opacity: 0;
}
.layers-stage.is-live .phone3d-drawn .p3-pulse.is-on .p3-beat-dot {
  animation: p3-run 2.6s linear infinite;
}
@keyframes p3-run {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  8%,
  92% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
.phone3d-drawn .p3-pulse.is-on {
  box-shadow: 0 0 60px rgba(120, 175, 255, 0.35);
}
/* Sparks drifting around the whole phone. */
.p3-sparks {
  position: absolute;
  inset: -12% -22%;
  pointer-events: none;
  opacity: var(--l1, 0);
}
.p3-sparks i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cfe3ff;
  box-shadow: 0 0 10px #8fb8ff;
  opacity: 0;
}
.layers-stage.is-live .p3-sparks i {
  animation: p3-spark 6s ease-in-out infinite;
}
.p3-sparks i:nth-child(1) {
  left: 8%;
  top: 22%;
  animation-delay: 0s;
}
.p3-sparks i:nth-child(2) {
  left: 76%;
  top: 12%;
  animation-delay: 0.7s;
}
.p3-sparks i:nth-child(3) {
  left: 18%;
  top: 68%;
  animation-delay: 1.4s;
}
.p3-sparks i:nth-child(4) {
  left: 88%;
  top: 54%;
  animation-delay: 2.1s;
}
.p3-sparks i:nth-child(5) {
  left: 44%;
  top: 8%;
  animation-delay: 2.8s;
}
.p3-sparks i:nth-child(6) {
  left: 62%;
  top: 82%;
  animation-delay: 3.5s;
}
.p3-sparks i:nth-child(7) {
  left: 4%;
  top: 44%;
  animation-delay: 4.2s;
}
.p3-sparks i:nth-child(8) {
  left: 94%;
  top: 30%;
  animation-delay: 4.9s;
}
@keyframes p3-spark {
  0% {
    opacity: 0;
    translate: 0 14px;
    scale: 0.5;
  }
  30%,
  60% {
    opacity: 0.9;
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: 0 -22px;
    scale: 0.5;
  }
}

/* ============================================================
   From Tbilisi. To anywhere. — the globe (globe.js draws it; the dots come from
   tools/build-globe-dots.py and real Natural Earth geography).
   ============================================================ */
.anywhere {
  position: relative;
  padding-block: 80px 96px;
  overflow: hidden;
}
.anywhere::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: radial-gradient(70% 60% at 68% 50%, rgba(8, 104, 248, 0.16), rgba(8, 104, 248, 0) 70%);
  pointer-events: none;
}
.anywhere-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 40px;
}
.anywhere-copy > p {
  max-width: 400px;
  margin-top: 26px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
}
.anywhere-languages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
}
.anywhere-languages-label {
  margin-right: 4px;
  font-size: 0.875rem;
  color: #7896c7;
}
/* DM Sans and Space Grotesk carry no Georgian or Cyrillic, so those two chips get a stack
   that does, instead of falling through to whatever the device happens to pick. */
.anywhere-languages [lang="ka"] {
  font-family: "Noto Sans Georgian", "BPG Arial", "Sylfaen", sans-serif;
}
.anywhere-languages [lang="ru"] {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
.anywhere-languages span:not(.anywhere-languages-label) {
  padding: 8px 14px;
  border: 1px solid #2c4374;
  border-radius: 100px;
  background: rgba(8, 104, 248, 0.08);
  font-size: 0.9375rem;
  color: #dbe7ff;
}
.globe-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}
#globe {
  display: block;
  width: min(560px, 100%);
  aspect-ratio: 1;
  /* Horizontal drags spin the globe; vertical ones still scroll the page. */
  touch-action: pan-y;
  cursor: grab;
}
#globe.is-held {
  cursor: grabbing;
}
/* If the canvas or its data never arrives, the space keeps a quiet disc instead of a hole. */
.globe-stage[data-globe="off"] #globe {
  background:
    radial-gradient(circle at 34% 30%, rgba(24, 44, 88, 0.9), rgba(8, 14, 30, 0.95) 70%),
    radial-gradient(rgba(90, 146, 255, 0.35) 1px, transparent 1.4px) 0 0 / 9px 9px;
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(8, 104, 248, 0.25);
}
.globe-stage[data-globe="off"] .globe-hint {
  display: none;
}
.globe-hint {
  position: absolute;
  bottom: 4px;
  left: 50%;
  translate: -50% 0;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: #6d7b96;
}
@media (hover: none) {
  .globe-hint::after {
    content: "";
  }
}
@media (max-width: 1000px) {
  .anywhere {
    padding-block: 56px 64px;
  }
  .anywhere-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .anywhere-copy > p {
    margin-top: 18px;
    font-size: 0.9375rem;
  }
  #globe {
    width: min(360px, 84vw);
  }
}
@media (prefers-reduced-motion: reduce) {
  .globe-hint {
    display: none;
  }
}

/* A prototype's own stylesheet loads the first time it opens; hold the frame until it lands. */
.blueprint-prototype.is-loading-styles .p-browser {
  opacity: 0;
}

/* 04 / Make a little music, full-on (2026-09-25): moods, eight rows, a live screen.
   Each mood sets the stage and the row colours; rows take their colour from --row. */
.music-stage {
  --m-bg: #24203c;
  --m-deep: #1a1630;
  --m-ink: #ded5ff;
  --m-soft: #a296c9;
  --m-off: #332b4b;
  --m-line: #4d4169;
  --r0: #c9b8ff;
  --r1: #e7b7d8;
  --r2: #f2e6b8;
  --r3: #a9d8ff;
  --r4: #b8f0d9;
  --r5: #8fb4ff;
  --r6: #ffd2a6;
  --r7: #f4f0ff;
  background: var(--m-bg);
  color: var(--m-ink);
  transition: background-color 0.6s ease;
  gap: 18px;
  justify-content: flex-start;
}
.music-stage[data-mood="spark"] {
  --m-bg: #2c1d15;
  --m-deep: #20140e;
  --m-ink: #ffe7cf;
  --m-soft: #d1a47e;
  --m-off: #3e2a1f;
  --m-line: #5e4130;
  --r0: #ffb86b;
  --r1: #ffd66b;
  --r2: #ff8f6b;
  --r3: #ffe9b0;
  --r4: #ff9fb2;
  --r5: #ffc38a;
  --r6: #fff0c9;
  --r7: #fff7ee;
}
.music-stage[data-mood="night"] {
  --m-bg: #0f1a2e;
  --m-deep: #0a1222;
  --m-ink: #d8e6ff;
  --m-soft: #8ea6cc;
  --m-off: #1b2a44;
  --m-line: #2f4466;
  --r0: #7fd6ff;
  --r1: #a8b8ff;
  --r2: #6be3d0;
  --r3: #c3a8ff;
  --r4: #8fb0ff;
  --r5: #6f9dff;
  --r6: #b8e4ff;
  --r7: #eef5ff;
}
.music-stage[data-mood="tbilisi"] {
  --m-bg: #2d1519;
  --m-deep: #210e12;
  --m-ink: #ffe3d6;
  --m-soft: #d49a8c;
  --m-off: #43222a;
  --m-line: #653540;
  --r0: #ff9f7a;
  --r1: #f3c77a;
  --r2: #e98fa0;
  --r3: #ffd9b0;
  --r4: #d9a36f;
  --r5: #ffb08f;
  --r6: #ffe2c4;
  --r7: #fff3ec;
}
.music-stage .demo-heading p {
  color: var(--m-soft);
}
.music-presets button[aria-pressed="true"] {
  background: var(--m-ink);
  color: var(--m-bg);
  border-color: var(--m-ink);
}
.music-screen {
  position: relative;
  height: 104px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--r0) 22%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgb(255 255 255 / 0.05) calc(12.5% - 1px) 12.5%),
    var(--m-deep);
  border: 1px solid var(--m-line);
  transition: background-color 0.6s ease;
}
.music-screen canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.music-chords {
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: flex;
  gap: 4px;
}
.music-chords span {
  min-width: 30px;
  padding: 3px 7px;
  border-radius: 99px;
  font-size: 0.6875rem;
  text-align: center;
  color: var(--m-soft);
  background: rgb(0 0 0 / 0.25);
  transition:
    color 0.2s,
    background-color 0.2s;
}
.music-chords span.is-now {
  color: var(--m-bg);
  background: var(--m-ink);
}
.music-stage .sequencer {
  grid-template-columns: max-content repeat(8, minmax(0, 1fr));
  gap: 5px 5px;
  margin: 0;
}
.sequencer [data-row="0"] {
  --row: var(--r0);
}
.sequencer [data-row="1"] {
  --row: var(--r1);
}
.sequencer [data-row="2"] {
  --row: var(--r2);
}
.sequencer [data-row="3"] {
  --row: var(--r3);
}
.sequencer [data-row="4"] {
  --row: var(--r4);
}
.sequencer [data-row="5"] {
  --row: var(--r5);
}
.sequencer [data-row="6"] {
  --row: var(--r6);
}
.sequencer [data-row="7"] {
  --row: var(--r7);
}
/* A little air between the melody and the rhythm section. */
.sequencer [data-row="5"] {
  margin-top: 8px;
}
.music-stage .sequence-row-label {
  grid-column: auto;
  padding-right: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--m-soft);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
}
.music-stage .sequence-row-label i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--row);
  box-shadow: 0 0 8px color-mix(in srgb, var(--row) 70%, transparent);
}
.music-stage .sequence-row-label:hover,
.music-stage .sequence-row-label:focus-visible {
  color: var(--m-ink);
}
.music-stage .sequence-step {
  aspect-ratio: auto;
  height: 28px;
  min-height: 0;
  border-radius: 7px;
  background: var(--m-off);
  border: 1px solid transparent;
  box-shadow: none;
  transition:
    background-color 0.15s,
    box-shadow 0.2s,
    transform 0.15s;
}
/* Beats read as pairs: the first of each pair is a touch lighter. */
.music-stage .sequence-step[data-step="0"],
.music-stage .sequence-step[data-step="2"],
.music-stage .sequence-step[data-step="4"],
.music-stage .sequence-step[data-step="6"] {
  background: color-mix(in srgb, var(--m-off) 92%, white);
}
.music-stage .sequence-step[aria-pressed="true"] {
  background: var(--row);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    0 0 14px color-mix(in srgb, var(--row) 45%, transparent);
}
.music-stage .sequence-step.current-step {
  outline: none;
  background: color-mix(in srgb, var(--m-off) 70%, white);
}
.music-stage .sequence-step.current-step[aria-pressed="true"] {
  background: color-mix(in srgb, var(--row) 70%, white);
}
.music-stage .sequence-step:focus-visible {
  outline: 2px solid var(--m-ink);
  outline-offset: 2px;
}
.music-stage .sequence-step.is-hit {
  animation: step-hit 0.32s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.music-stage .sequence-step.is-hit::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 9px;
  border: 2px solid var(--row);
  animation: step-ring 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes step-hit {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.16, 1.22);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes step-ring {
  from {
    opacity: 0.9;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}
.music-stage .sequencer-bottom {
  flex-wrap: wrap;
  gap: 14px 20px;
}
.music-stage .sequencer-bottom .demo-pill {
  background: var(--m-ink);
  color: var(--m-bg);
}
.music-stage.is-playing .sequencer-bottom .demo-pill {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--m-ink) 22%, transparent);
}
.music-stage .sequencer-bottom label {
  color: var(--m-soft);
}
.music-stage .sequencer-bottom label output {
  color: var(--m-ink);
}
.music-stage .sequencer-bottom input {
  accent-color: var(--r0);
}
.music-layers {
  display: flex;
  gap: 6px;
}
.music-layers button {
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid var(--m-line);
  background: transparent;
  color: var(--m-soft);
  font-size: 0.75rem;
}
.music-layers button[aria-pressed="true"] {
  border-color: transparent;
  background: color-mix(in srgb, var(--r0) 24%, transparent);
  color: var(--m-ink);
}
.music-layers button::before {
  content: "○ ";
}
.music-layers button[aria-pressed="true"]::before {
  content: "● ";
}
@media (max-width: 600px) {
  .music-screen {
    height: 88px;
  }
  .music-stage .sequencer {
    grid-template-columns: max-content repeat(8, minmax(0, 1fr));
    gap: 5px 4px;
  }
  .music-stage .sequence-step {
    height: 30px;
  }
  .music-stage .sequence-row-label {
    font-size: 0.625rem;
    gap: 4px;
  }
  .music-stage .sequence-row-label i {
    width: 6px;
    height: 6px;
  }
  .music-stage .sequencer-bottom .demo-pill {
    flex: 1 1 100%;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .music-stage,
  .music-screen {
    transition: none;
  }
  .music-stage .sequence-step.is-hit,
  .music-stage .sequence-step.is-hit::after {
    animation: none;
  }
}
.music-stage[data-mood="stage"] {
  --m-bg: #17171a;
  --m-deep: #0e0e10;
  --m-ink: #f2efe8;
  --m-soft: #a3a09a;
  --m-off: #26262b;
  --m-line: #3a3a41;
  --r0: #f2efe8;
  --r1: #ffcf5a;
  --r2: #ff7a45;
  --r3: #e84a3c;
  --r4: #c9c4ba;
  --r5: #ff9f5a;
  --r6: #f7f3ea;
  --r7: #ffffff;
}

/* The layers scene's sparks sit outside the phone on purpose; keep them from widening the page
   (clip, not hidden, so the sticky stage inside keeps working). */
.layers {
  overflow-x: clip;
}

/* 01 / Find your frequency, full-on (2026-09-25): one colour becomes a brand kit, shown on six
   surfaces. brand.js writes the kit into --b-* variables; every mock-up paints itself from them.
   Third pass: the colours are registered, so a new kit glides in (Oklab) on every surface at once. */
@property --b-main {
  syntax: "<color>";
  inherits: true;
  initial-value: #2164fa;
}
@property --b-main-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #fff;
}
@property --b-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffb86b;
}
@property --b-accent-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #141414;
}
@property --b-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #f6f7fb;
}
@property --b-text {
  syntax: "<color>";
  inherits: true;
  initial-value: #1c2230;
}
@property --b-night {
  syntax: "<color>";
  inherits: true;
  initial-value: #151a26;
}
@property --b-night-text {
  syntax: "<color>";
  inherits: true;
  initial-value: #eef1f8;
}
@property --b-radius {
  syntax: "<length>";
  inherits: true;
  initial-value: 10px;
}
.brand-stage {
  --b-main: #2164fa;
  --b-main-ink: #fff;
  --b-accent: #ffb86b;
  --b-accent-ink: #141414;
  --b-bg: #f6f7fb;
  --b-text: #1c2230;
  --b-night: #151a26;
  --b-night-text: #eef1f8;
  --b-radius: 10px;
  --b-head: "Space Grotesk", sans-serif;
  --b-weight: 700;
  display: grid;
  gap: 16px;
  margin: 0 18px;
  padding: 22px;
  border-radius: 12px;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--b-main) 22%, transparent), transparent 70%),
    #12151c;
  color: #e8ecf5;
}
/* Set once the first kit is painted, so the page doesn't glide on arrival. */
.brand-stage[data-morph] {
  transition-property: --b-main, --b-main-ink, --b-accent, --b-accent-ink, --b-bg, --b-text, --b-night, --b-night-text, --b-radius;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* While a slider or the colour picker is dragged, colours stay close behind the hand. */
.brand-stage[data-morph].is-live {
  transition-duration: 0.12s;
}
/* The stage carries the glide; the parts no longer need their own colour fades. */
.brand-stage[data-morph] :is(.brand-top h3 em, .mock-phone *, .mock-browser *, .mock-card, .mock-post *, .surface-cup svg *, [data-brand-mark] svg, .brand-kit i) {
  transition: none;
}
.brand-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.brand-top h3 {
  font-size: 1.9rem;
  line-height: 1.02;
}
.brand-top h3 em {
  color: color-mix(in srgb, var(--b-main) 55%, white);
  transition: color 0.5s;
}
.brand-name-field {
  display: grid;
  gap: 6px;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #93a0b8;
}
.brand-name-field input {
  width: 190px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #2c3444;
  background: #0c0f15;
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
}
.brand-name-field input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--b-main) 60%, white);
  outline-offset: 2px;
}
.brand-moods,
.brand-surface-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.brand-moods button,
.brand-surface-tabs button {
  padding: 7px 13px;
  border-radius: 99px;
  border: 1px solid #2c3444;
  background: transparent;
  color: #c3cbdb;
  font-size: 0.8125rem;
}
.brand-moods button[aria-pressed="true"] {
  background: var(--b-main);
  border-color: var(--b-main);
  color: var(--b-main-ink);
}
.brand-surface-tabs {
  justify-content: center;
}
.brand-surface-tabs button {
  padding: 5px 11px;
  font-size: 0.75rem;
  border-color: transparent;
  color: #93a0b8;
}
.brand-surface-tabs button[aria-selected="true"] {
  border-color: #3a4456;
  color: #fff;
}
/* The surfaces: one at a time, swipe or tab between them. */
.brand-surfaces {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 16px;
  background:
    radial-gradient(90% 80% at 50% 45%, color-mix(in srgb, var(--b-main) 30%, transparent), transparent 70%),
    #0c0f15;
  overscroll-behavior-x: contain;
}
.brand-surfaces::-webkit-scrollbar {
  display: none;
}
.surface {
  flex: 0 0 100%;
  height: 320px;
  margin: 0;
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  position: relative;
  overflow: hidden;
}
.brand-stage [data-brand-name],
.brand-stage [data-brand-tagline] {
  font-family: var(--b-head);
  font-weight: var(--b-weight);
}
.brand-stage .mock-phone *,
.brand-stage .mock-browser *,
.brand-stage .mock-card,
.brand-stage .mock-post *,
.brand-stage .surface-cup svg * {
  transition:
    background-color 0.45s,
    color 0.45s,
    fill 0.45s,
    stroke 0.45s,
    border-radius 0.45s;
}
/* App screen (and the same screen at night). */
.mock-phone {
  width: 168px;
  height: 296px;
  padding: 10px 10px 8px;
  border: 6px solid #05070b;
  border-radius: 30px;
  background: var(--b-bg);
  color: var(--b-text);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 9px;
  box-shadow: 0 24px 50px rgb(0 0 0 / 0.45);
}
.mock-phone.night {
  background: var(--b-night);
  color: var(--b-night-text);
}
.mock-status {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  opacity: 0.6;
}
.mock-appbar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mock-appbar b {
  flex: 1;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mock-logo {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: min(var(--b-radius), 11px);
  background: var(--b-main);
  color: var(--b-main-ink);
  font-weight: 700;
  font-size: 11px;
}
.mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--b-accent);
}
.mock-hero {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: min(var(--b-radius), 18px);
  background: var(--b-main);
  color: var(--b-main-ink);
}
.mock-hero small {
  font-size: 7px;
  letter-spacing: 0.14em;
  opacity: 0.8;
}
.mock-hero b {
  font-size: 17px;
  line-height: 1.05;
}
.mock-btn {
  justify-self: start;
  display: inline-block;
  padding: 5px 10px;
  border-radius: min(var(--b-radius), 99px);
  background: var(--b-accent);
  color: var(--b-accent-ink);
  font-weight: 700;
  font-size: 9px;
}
.mock-btn.ghost {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1px currentColor;
}
.mock-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px;
  border-radius: min(var(--b-radius), 12px);
  background: color-mix(in srgb, currentColor 6%, transparent);
}
.mock-row i {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: min(var(--b-radius), 8px);
  background: color-mix(in srgb, var(--b-main) 25%, transparent);
}
.mock-row b,
.mock-row small {
  display: block;
}
.mock-row small {
  opacity: 0.6;
}
.mock-tabs {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
}
.mock-tabs i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 25%, transparent);
}
.mock-tabs i.is-on {
  background: var(--b-main);
}
/* Website. */
.mock-browser {
  width: min(92%, 400px);
  height: 250px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--b-bg);
  color: var(--b-text);
  box-shadow: 0 24px 50px rgb(0 0 0 / 0.45);
  font-size: 9px;
}
.mock-chrome {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--b-text) 8%, var(--b-bg));
}
.mock-chrome i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--b-text) 25%, transparent);
}
.mock-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}
.mock-nav b {
  flex: 1;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mock-nav span {
  opacity: 0.7;
}
.mock-nav .mock-cta {
  opacity: 1;
  padding: 4px 9px;
  border-radius: min(var(--b-radius), 99px);
  background: var(--b-main);
  color: var(--b-main-ink);
}
.mock-webhero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 12px;
  padding: 14px 16px;
  align-items: center;
}
.mock-webhero h4 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.02;
}
.mock-webhero p {
  margin: 0 0 12px;
  opacity: 0.7;
  line-height: 1.4;
}
.mock-webhero .mock-btn + .mock-btn {
  margin-left: 6px;
}
.mock-webhero .mock-btn:first-of-type {
  background: var(--b-main);
  color: var(--b-main-ink);
}
.mock-art {
  position: relative;
  height: 140px;
  border-radius: min(var(--b-radius), 18px);
  background: color-mix(in srgb, var(--b-main) 16%, var(--b-bg));
  overflow: hidden;
}
.mock-art i {
  position: absolute;
  border-radius: 50%;
}
.mock-art i:nth-child(1) {
  width: 90px;
  height: 90px;
  left: -10px;
  bottom: -20px;
  background: var(--b-main);
}
.mock-art i:nth-child(2) {
  width: 54px;
  height: 54px;
  right: 18px;
  top: 16px;
  background: var(--b-accent);
}
.mock-art i:nth-child(3) {
  width: 70px;
  height: 22px;
  right: 10px;
  bottom: 22px;
  border-radius: min(var(--b-radius), 11px);
  background: var(--b-text);
  opacity: 0.85;
}
/* Business card, front and back. */
.surface-card {
  perspective: 800px;
}
.mock-card {
  position: absolute;
  width: 220px;
  height: 128px;
  border-radius: min(var(--b-radius), 12px);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
  display: grid;
  align-content: center;
  padding: 18px;
}
.mock-card.back {
  transform: translate(34px, 34px) rotate(5deg);
  background: var(--b-bg);
  color: var(--b-text);
  gap: 3px;
  font-size: 10px;
}
.mock-card.back b {
  font-size: 15px;
  margin-bottom: 6px;
}
.mock-card.back small {
  opacity: 0.7;
}
.mock-card.front {
  transform: translate(-34px, -30px) rotate(-6deg);
  background: var(--b-main);
  color: var(--b-main-ink);
  justify-items: start;
  gap: 10px;
}
.mock-card.front b {
  font-size: 20px;
  line-height: 1;
}
.mock-mono {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--b-accent);
  color: var(--b-accent-ink);
  font-weight: 700;
  font-size: 15px;
}
/* Post. */
.mock-post {
  width: 230px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  color: #111;
  font-size: 10px;
  box-shadow: 0 24px 50px rgb(0 0 0 / 0.45);
}
.mock-post-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
}
.mock-post-art {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  align-content: end;
  gap: 6px;
  padding: 16px;
  background: var(--b-main);
  color: var(--b-main-ink);
}
.mock-post-art b {
  font-size: 26px;
  line-height: 1;
}
.mock-post-art small {
  opacity: 0.85;
}
.mock-sticker {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--b-accent);
  color: var(--b-accent-ink);
  font-weight: 800;
  font-size: 11px;
  transform: rotate(12deg);
}
.mock-post-foot {
  display: flex;
  gap: 12px;
  padding: 8px 10px;
  font-size: 14px;
}
/* Cup and bag, drawn in the kit's colours. */
.cup-scene {
  position: relative;
  width: min(92%, 360px);
  aspect-ratio: 300 / 220;
}
.cup-scene svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mock-shadow {
  fill: rgb(0 0 0 / 0.35);
}
.cup-body {
  fill: var(--b-bg);
}
.cup-lid {
  fill: var(--b-text);
}
.cup-sleeve,
.bag-band {
  fill: var(--b-main);
}
.bag-body {
  fill: color-mix(in srgb, var(--b-bg) 88%, var(--b-text));
}
.bag-handle {
  fill: none;
  stroke: var(--b-accent);
  stroke-width: 6;
  stroke-linecap: round;
}
.cup-initial,
.bag-name {
  position: absolute;
  transform: translate(-50%, -50%);
  color: var(--b-main-ink);
  font-weight: 700;
  white-space: nowrap;
}
.cup-initial {
  left: 33.4%;
  top: 56.8%;
  font-size: 20px;
}
.bag-name {
  left: 72.7%;
  top: 73.2%;
  max-width: 34%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}
/* The kit, in plain words. */
.brand-kit {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-kit li {
  display: grid;
  gap: 6px;
  justify-items: start;
  font-size: 0.75rem;
  color: #c3cbdb;
}
.brand-kit i {
  width: 100%;
  height: 34px;
  border-radius: 9px;
  background: var(--k);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  transition: background-color 0.45s;
}
.brand-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.brand-vibe {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 200px;
  font-size: 0.75rem;
  color: #93a0b8;
}
.brand-vibe input {
  flex: 1;
  min-width: 0;
  accent-color: var(--b-main);
}
.brand-shuffle,
.brand-lock,
.brand-any {
  padding: 7px 13px;
  border-radius: 99px;
  border: 1px solid #2c3444;
  background: transparent;
  color: #e8ecf5;
  font-size: 0.8125rem;
}
.brand-shuffle {
  background: var(--b-main);
  border-color: var(--b-main);
  color: var(--b-main-ink);
}
.brand-lock::before {
  content: "○ ";
}
.brand-lock[aria-pressed="true"] {
  border-color: #93a0b8;
}
.brand-lock[aria-pressed="true"]::before {
  content: "● ";
}
.brand-any {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.brand-any input {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.brand-any:focus-within {
  outline: 2px solid #93a0b8;
  outline-offset: 2px;
}
.brand-read {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.8125rem;
  color: #c3cbdb;
}
.brand-read span::before {
  content: "✓ ";
  color: #8fe0a6;
}
.brand-read span[data-level="ok"]::before {
  content: "◐ ";
  color: #ffd27a;
}
.brand-read span[data-level="low"]::before {
  content: "! ";
  color: #ff8a7a;
}
#brand-fix {
  padding: 4px 11px;
  border-radius: 99px;
  border: 1px solid #ff8a7a;
  color: #ffd0c8;
  font-size: 0.75rem;
}
@media (max-width: 600px) {
  .brand-stage {
    margin: 0 12px;
    padding: 16px;
  }
  .brand-name-field,
  .brand-name-field input {
    width: 100%;
  }
  .surface {
    height: 300px;
  }
  .brand-kit li {
    font-size: 0.625rem;
  }
  .mock-webhero h4 {
    font-size: 18px;
  }
}
@media (hover: none) and (pointer: coarse) {
  .brand-name-field input {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-stage,
  .brand-stage * {
    transition: none !important;
  }
}

/* 01, second pass: the logo sheet, the mood's mark, colour from a photo, and a gentle tilt. */
.logo-sheet {
  width: min(90%, 420px);
  padding: 26px 26px 22px;
  border-radius: min(var(--b-radius), 18px);
  background: var(--b-bg);
  color: var(--b-text);
  display: grid;
  gap: 14px;
  box-shadow: 0 24px 50px rgb(0 0 0 / 0.45);
}
.logo-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.logo-mark {
  width: 64px;
  height: 64px;
  flex: none;
}
.brand-stage [data-brand-mark] svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--mark-bg, var(--b-main));
  stroke: var(--mark-bg, var(--b-main));
  transition:
    fill 0.45s,
    stroke 0.45s;
}
.brand-stage [data-brand-mark] svg:not(.mark-ring) {
  stroke: none;
}
.brand-stage [data-brand-mark] text {
  fill: var(--mark-ink, var(--b-main-ink));
  stroke: none;
  font-family: var(--b-head);
  font-weight: var(--b-weight);
  font-size: 52px;
}
.brand-stage [data-brand-mark] .mark-ring text {
  fill: var(--mark-bg, var(--b-main));
}
.brand-stage[data-mood="playful"] .logo-mark svg {
  transform: rotate(-8deg);
}
.logo-word {
  min-width: 0;
  font-size: 30px;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-stage[data-mood="tech"] .logo-word {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.brand-stage[data-mood="premium"] .logo-word {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 22px;
}
.logo-tag {
  margin: 0;
  font-family: var(--b-head);
  font-size: 15px;
  opacity: 0.75;
}
.logo-variants {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--b-text) 12%, transparent);
}
.logo-tile {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: min(var(--b-radius), 12px);
}
.logo-tile.on-main {
  background: var(--b-main);
  --mark-bg: var(--b-main-ink);
  --mark-ink: var(--b-main);
}
.logo-tile.on-night {
  background: var(--b-night);
  --mark-bg: color-mix(in srgb, var(--b-main) 60%, var(--b-night-text));
  --mark-ink: var(--b-night);
}
.logo-tile.on-accent {
  background: var(--b-accent);
  --mark-bg: var(--b-accent-ink);
  --mark-ink: var(--b-accent);
}
.logo-tile.tiny {
  width: 26px;
  height: 26px;
  padding: 0;
}
.logo-type {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.7;
  text-align: right;
}
.logo-type b {
  display: block;
  font-family: var(--b-head);
  font-weight: var(--b-weight);
  font-size: 13px;
  opacity: 1;
}
/* Colour from a photo: the file field hides inside a pill that looks like the others. */
.brand-photo {
  position: relative;
  padding: 7px 13px;
  border-radius: 99px;
  border: 1px solid #2c3444;
  color: #e8ecf5;
  font-size: 0.8125rem;
  cursor: pointer;
}
.brand-photo input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}
.brand-photo:focus-within {
  outline: 2px solid #93a0b8;
  outline-offset: 2px;
}
.brand-photo::before {
  content: "◐ ";
}
/* The mock-ups lean towards the pointer. */
.surface > :is(.mock-phone, .mock-browser, .mock-post, .cup-scene, .logo-sheet) {
  transform: perspective(900px) rotateY(calc(var(--tilt-x, 0) * 9deg)) rotateX(calc(var(--tilt-y, 0) * -7deg));
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (max-width: 600px) {
  .logo-sheet {
    padding: 20px;
  }
  .logo-word {
    font-size: 24px;
  }
  .logo-mark {
    width: 52px;
    height: 52px;
  }
  .logo-type {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .surface > :is(.mock-phone, .mock-browser, .mock-post, .cup-scene, .logo-sheet) {
    transform: none;
  }
}

/* 01, third pass: colour names under the swatches, undo and redo, the keyboard tip, the wordmark
   typing itself out, a sheen that follows the pointer, and the photo flying into the Main swatch. */
.brand-kit li {
  align-content: start;
}
.brand-kit li small {
  margin-top: -3px;
  font-size: 0.6875rem;
  line-height: 1.25;
  color: #8f9bb2;
  overflow-wrap: anywhere;
}
.brand-history {
  display: inline-flex;
  gap: 6px;
}
.brand-history button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #2c3444;
  background: transparent;
  color: #e8ecf5;
  font-size: 1rem;
  line-height: 1;
  transition:
    opacity 0.2s,
    border-color 0.2s;
}
.brand-history svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand-link {
  padding: 7px 13px;
  border-radius: 99px;
  border: 1px solid #2c3444;
  background: transparent;
  color: #e8ecf5;
  font-size: 0.8125rem;
}
.brand-link:hover,
.brand-history button:hover:not([aria-disabled="true"]) {
  border-color: #93a0b8;
}
.brand-history button[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}
.brand-tip {
  margin-left: auto;
  font-size: 0.75rem;
  color: #8f9bb2;
  transition: opacity 0.4s;
}
.brand-tip.is-done {
  opacity: 0;
}
.logo-word.is-typing {
  text-overflow: clip;
}
.logo-letter {
  display: inline-block;
  white-space: pre;
  animation: logo-letter 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
@keyframes logo-letter {
  from {
    opacity: 0;
    transform: translateY(0.3em);
    filter: blur(3px);
  }
}
.surface > :is(.mock-phone, .mock-browser, .mock-post, .logo-sheet) {
  position: relative;
}
.surface > :is(.mock-phone, .mock-browser, .mock-post, .logo-sheet)::after,
.mock-card.front::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at calc(50% + var(--tilt-x, 0) * 150%) calc(50% + var(--tilt-y, 0) * 150%),
    rgb(255 255 255 / 0.55),
    rgb(255 255 255 / 0.12) 32%,
    transparent 62%
  );
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.45s;
}
.brand-surfaces.is-pointing :is(.surface > :is(.mock-phone, .mock-browser, .mock-post, .logo-sheet), .mock-card.front)::after {
  opacity: 1;
}
.brand-fly {
  position: fixed;
  z-index: 60;
  box-sizing: border-box;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 14px 30px rgb(0 0 0 / 0.45);
  pointer-events: none;
}
@media (pointer: coarse) {
  .brand-history button {
    width: 40px;
    height: 40px;
  }
}
/* Phones: two columns, each colour a chip beside its role and name, so names never break mid-word. */
@media (max-width: 600px) {
  .brand-kit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }
  .brand-kit li {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    column-gap: 9px;
    row-gap: 1px;
    font-size: 0.75rem;
  }
  .brand-kit i {
    grid-row: span 2;
    height: 34px;
  }
  .brand-kit li span {
    align-self: end;
  }
  .brand-kit li small {
    align-self: start;
    margin: 0;
    font-size: 0.6875rem;
    overflow-wrap: normal;
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-letter {
    animation: none;
  }
  .brand-surfaces .surface ::after,
  .brand-surfaces .surface > ::after {
    display: none;
  }
}

/* 02 / A moment of focus, full-on (2026-09-25): a Tbilisi sunrise comes up behind the ring as the
   minutes pass. focus.js sets --sky-*, --sun (0 → 1) and --lit, and switches the city's lights off. */
.focus-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 560px;
  justify-content: flex-start;
  gap: 12px;
  background: #0e1816;
}
.focus-scene {
  --sky-top: rgb(14 24 22);
  --sky-mid: rgb(22 38 33);
  --sky-low: rgb(35 52 44);
  --sun: 0;
  --lit: 0.55;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.focus-sun {
  transform: translateY(calc(var(--sun) * -150px));
  opacity: calc(0.25 + var(--sun) * 0.75);
  transition:
    transform 1.2s linear,
    opacity 1.2s linear;
}
.focus-layer {
  filter: brightness(var(--lit));
  transition: filter 1.2s linear;
}
.focus-layer.far path {
  fill: #3c5a4a;
}
.focus-layer.mid path {
  fill: #2b4436;
}
.focus-city > path {
  fill: #1e3128;
}
.focus-layer.near path {
  fill: #121e18;
}
.focus-windows rect {
  fill: #ffd28a;
  opacity: 0.9;
  transition: opacity 1.4s ease;
}
.focus-windows rect.is-off {
  opacity: 0;
}
.focus-top {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
}
.focus-top #focus-task {
  width: min(100%, 340px);
  text-align: center;
  background: rgb(8 16 13 / 0.45);
  border-radius: 99px;
  padding: 9px 16px;
  backdrop-filter: blur(4px);
}
.focus-stage .timer-ring > div {
  background: radial-gradient(circle, rgb(8 16 13 / 0.55) 0 58%, transparent 72%);
  border-radius: 50%;
}
.ring-intent {
  max-width: 150px;
  margin: 0 auto 2px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.15;
  color: #e6f4de;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ring-intent:empty {
  display: none;
}
.focus-stage > #focus-message {
  margin: 0;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
  color: #e6f4de;
}
/* Three breaths: in for four seconds, out for six. */
.focus-stage.is-inhale .breathing-halo {
  animation: halo-in 4s ease-in-out forwards;
}
.focus-stage.is-exhale .breathing-halo {
  animation: halo-out 6s ease-in-out forwards;
}
@keyframes halo-in {
  from {
    transform: scale(0.82);
    opacity: 0.35;
  }
  to {
    transform: scale(1.22);
    opacity: 0.9;
  }
}
@keyframes halo-out {
  from {
    transform: scale(1.22);
    opacity: 0.9;
  }
  to {
    transform: scale(0.82);
    opacity: 0.35;
  }
}
.timer-skip {
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid rgb(210 233 198 / 0.35);
  color: #d2e9c6;
  font-size: 0.8125rem;
  background: rgb(8 16 13 / 0.4);
}
.focus-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  font-size: 0.8125rem;
  color: #d2e9c6;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.7);
}
.focus-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.focus-toggle input {
  accent-color: #c8e6ad;
}
.focus-reflect {
  display: flex;
  gap: 8px;
}
.focus-reflect[hidden] {
  display: none;
}
.focus-reflect button {
  padding: 8px 15px;
  border-radius: 99px;
  background: #d2e9c6;
  color: #1c261d;
  font-weight: 600;
  font-size: 0.8125rem;
}
.focus-reflect button + button {
  background: rgb(8 16 13 / 0.5);
  color: #d2e9c6;
  box-shadow: inset 0 0 0 1px rgb(210 233 198 / 0.4);
}
/* The garden: a sprout per moment this week. Yes flowers, partly buds, not yet a seed. */
.focus-garden {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-height: 30px;
}
.focus-garden small {
  width: 100%;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: #cfe3c6;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.8);
}
.sprout {
  position: relative;
  width: 14px;
  height: 24px;
}
.sprout::before {
  content: "";
  position: absolute;
  left: 6px;
  bottom: 0;
  width: 2px;
  height: 16px;
  border-radius: 2px;
  background: #8fbf7c;
}
.sprout i {
  position: absolute;
  left: 2px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f5c5d2;
  box-shadow: 0 0 0 2px #fbe3b0 inset;
}
.sprout.bud i {
  left: 4px;
  top: 3px;
  width: 6px;
  height: 8px;
  border-radius: 50% 50% 45% 45%;
  background: #cfe8a8;
  box-shadow: none;
}
.sprout.seed::before {
  height: 6px;
}
.sprout.seed i {
  left: 4px;
  top: auto;
  bottom: 4px;
  width: 6px;
  height: 5px;
  background: #b89a6a;
  box-shadow: none;
}
.sprout.is-new {
  animation: sprout-grow 0.9s cubic-bezier(0.2, 1.4, 0.4, 1);
  transform-origin: 50% 100%;
}
@keyframes sprout-grow {
  from {
    transform: scaleY(0.1);
    opacity: 0;
  }
}
@media (max-width: 600px) {
  .focus-stage {
    min-height: 600px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .focus-sun,
  .focus-layer,
  .focus-windows rect {
    transition: none;
  }
  .sprout.is-new {
    animation: none;
  }
}

/* Until the five generated frames arrive, the one photograph is graded for each time of day. */

/* The torch: daylight inside a soft circle. */

/* The reveal when the lights switch. */

/* The app, in its day and night themes. */

/* The sun's arc, along the bottom of the picture (time of day only). */

/* Keyboards drive the dial through this range input (visually hidden). */

/* 03 / Follow your line, full-on (2026-09-25): brushes, sizes, a symmetry dial, papers, and the
   drawing played as music. The stage keeps its warm paper look. */
.drawing-experiment .drawing-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drawing-experiment .drawing-surface {
  flex: 1;
  min-height: 300px;
  margin: 0;
  border: 1px solid #283b3222;
  border-radius: 12px;
  overflow: hidden;
  background-color: #f6f3ec;
  background-image: none;
}
.drawing-surface[data-paper="dots"] {
  background-image: radial-gradient(#283b322e 0.8px, transparent 0.8px);
  background-size: 18px 18px;
}
.drawing-surface[data-paper="watercolour"] {
  background-color: #f1eee7;
  background-image: var(--paper-watercolour, radial-gradient(120% 90% at 20% 10%, #fffdf8, transparent 60%), repeating-radial-gradient(circle at 30% 40%, #00000006 0 2px, transparent 2px 5px));
  background-size: 512px 512px;
}
.drawing-surface[data-paper="kraft"] {
  background-color: #c8a77a;
  background-image: var(--paper-kraft, radial-gradient(90% 70% at 30% 20%, #ffffff14, transparent 60%), repeating-radial-gradient(circle at 17% 31%, #00000008 0 1px, transparent 1px 7px));
  background-size: 512px 512px;
}
.drawing-surface[data-paper="kraft"] #drawing-hint {
  color: #5c4527;
}
.draw-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
}
.draw-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.draw-group button {
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid #283b3230;
  color: #233a33;
  font-size: 0.8125rem;
  background: transparent;
}
.draw-group button[aria-pressed="true"] {
  background: #233a33;
  border-color: #233a33;
  color: #f6f3ec;
}
.draw-sizes button {
  min-width: 34px;
  padding-inline: 0;
}
.draw-accent {
  background: #2768ef !important;
  border-color: #2768ef !important;
  color: #fff !important;
}
.draw-accent:disabled {
  opacity: 0.4;
}
.draw-symmetry {
  display: grid;
  gap: 2px;
  min-width: 150px;
  font-size: 0.75rem;
  color: #4c5a53;
}
.draw-symmetry output {
  font-weight: 600;
  color: #233a33;
}
.draw-symmetry input {
  width: 100%;
  accent-color: #233a33;
}
@media (max-width: 600px) {
  .drawing-experiment .drawing-surface {
    min-height: 280px;
  }
  .draw-symmetry {
    flex: 1 1 100%;
  }
}

/* Pricing: the plan under the figures. Four phases across the timeline, drawn one after another
   when the estimate lands (script.js writePlan). */
.estimate-plan {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.estimator-result:not([data-state="done"]) .estimate-plan {
  display: none;
}
.plan-row {
  display: grid;
  grid-template-columns: 7.5em 1fr 5.5em;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
}
.plan-name {
  opacity: 0.8;
}
.plan-weeks {
  text-align: right;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}
.plan-track {
  position: relative;
  height: 10px;
  border-radius: 99px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  overflow: hidden;
}
.plan-track i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--start, 0%);
  width: var(--len, 0%);
  border-radius: 99px;
  background: linear-gradient(90deg, #ffffff, #cfe0ff);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay, 0ms);
}
.plan-row[data-phase="design"] i {
  background: linear-gradient(90deg, #8e6ce7, #b49cf5);
}
.plan-row[data-phase="test"] i {
  background: linear-gradient(90deg, #1fa37a, #5fd0a8);
}
.plan-row[data-phase="launch"] i {
  background: linear-gradient(90deg, #ff8a3d, #ffc27a);
}
.estimate-plan.is-drawn .plan-track i {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .plan-track i {
    transition: none;
  }
}

/* Concept lab: the view toggle plus a full-screen button; full screen gives the prototype the
   whole window (the side panel steps away). */
.blueprint-view-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 19px;
}
.blueprint-view-row .blueprint-view-tabs {
  margin: 0;
}
.blueprint-full {
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid #3a4d68;
  color: #cfe0ff;
  font-size: 0.8125rem;
}
.blueprint-full[hidden] {
  display: none;
}
.concept-dialog.is-full {
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  border-radius: 0;
}
.concept-dialog.is-full .concept-dialog-content {
  grid-template-columns: minmax(0, 1fr);
}
.concept-dialog.is-full .concept-info {
  display: none;
}
.concept-dialog.is-full .preview-workspace {
  padding-inline: clamp(8px, 2vw, 32px);
}
/* Scrolling to the prototype lands it just below the dialog's sticky top bar. */
#blueprint-prototype {
  scroll-margin-top: 84px;
}

/* Contrast and focus details for the rebuilt playground cards. */
.drawing-experiment #drawing-status {
  color: #b9c2cf;
}
.music-stage .demo-heading p {
  opacity: 1;
}

.brand-surfaces:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--b-main) 60%, white);
  outline-offset: 3px;
}

/* Keyboards drive the handle through this range; it sits over the divider line only. */

/* 05 / See both sides: the original light/dark scene (restored 2026-09-25 at your request). */
.compare-stage {
  background: #d9d5cc;
}
.compare-picture {
  height: 100%;
  min-height: 383px;
  position: relative;
  --split: 50%;
  isolation: isolate;
}
.compare-picture > img,
.compare-overlay img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.compare-overlay {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}
.compare-tag {
  position: absolute;
  top: 23px;
  z-index: 2;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  background: #10152175;
  backdrop-filter: blur(10px);
  color: #fff;
  border: 1px solid #ffffff44;
  padding: 8px 10px;
  border-radius: 100px;
}
.compare-light {
  left: 22px;
}
.compare-dark {
  right: 22px;
}
.compare-divider {
  position: absolute;
  inset: 0 auto 0 var(--split);
  width: 2px;
  background: #fff;
  z-index: 3;
  pointer-events: none;
}
.compare-divider span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #faf9f5;
  color: #26333c;
  position: absolute;
  top: 50%;
  left: 1px;
  transform: translate(-50%, -50%);
  font-size: 1.3rem;
  box-shadow: 0 4px 25px #0003;
}
.compare-picture input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 4;
  cursor: ew-resize;
  touch-action: pan-y;
}
.compare-picture:has(input:focus-visible) {
  outline: 3px solid #8cb4ff;
  outline-offset: -4px;
}
.compare-experiment .experiment-controls output {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: #d4e1fa;
}
@media (max-width: 800px) {
.compare-picture {
    min-height: 440px;
  }
}
@media (max-width: 600px) {
.compare-picture {
    min-height: 405px;
  }
}
@media (max-width: 600px) {
.compare-tag {
    top: 18px;
    font-size: 0.75rem;
    padding: 7px 8px;
  }
}
@media (max-width: 600px) {
.compare-light {
    left: 14px;
  }
}
@media (max-width: 600px) {
.compare-dark {
    right: 14px;
  }
}
@media (max-width: 600px) {
.compare-divider span {
    width: 40px;
    height: 40px;
  }
}
.focus-presets,
.music-presets,
.compare-presets {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.focus-presets button,
.music-presets button,
.compare-presets button {
  border: 1px solid #77847766;
  border-radius: 100px;
  background: transparent;
  color: inherit;
  font-size: 0.75rem;
  padding: 8px 13px;
  min-height: 34px;
}
.compare-presets button {
  border-color: #6d7d9866;
}
.compare-presets button[aria-pressed="true"] {
  background: #aacaff;
  color: #172137;
}
@media (max-width: 600px) {
.compare-experiment .experiment-controls {
    gap: 10px;
    flex-wrap: wrap;
  }
}
@media (max-width: 600px) {
.compare-presets {
    gap: 4px;
  }
}
@media (max-width: 600px) {
.compare-presets button {
    padding: 7px 11px;
  }
}
.compare-picture > img.compare-night-image {
  filter: brightness(0.26) saturate(0.7) sepia(0.12);
  background: #142339;
}
.compare-picture:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0b245455;
  mix-blend-mode: color;
  pointer-events: none;
  z-index: -1;
}
.compare-scene-note {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 25px;
  z-index: 2;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 9px #000;
  background: #162031a1;
  border: 1px solid #ffffff38;
  border-radius: 100px;
  padding: 10px 14px;
  max-width: 250px;
  margin: auto;
  pointer-events: none;
}
.compare-stage {
  flex: 1;
}
.compare-picture {
  height: 100%;
  min-height: 440px;
}
.compare-picture > img,
.compare-overlay img {
  object-position: 50% 50%;
}
.compare-experiment .experiment-controls {
  flex-wrap: wrap;
  gap: 12px;
}
.compare-divider {
  filter: drop-shadow(0 0 12px #fff8);
}
.compare-picture .compare-tag {
  backdrop-filter: blur(10px);
}
/* Improvements to the restored 05: real day/night frames switch off the graded treatment; the
   handle answers to a grab. */
.compare-picture.is-real .compare-night-image {
  filter: none;
}
.compare-picture.is-real::after {
  display: none;
}
.compare-divider {
  box-shadow: 0 0 18px rgb(255 255 255 / 0.55);
}
.compare-divider span {
  transition:
    transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1),
    box-shadow 0.2s;
}
.compare-picture:active .compare-divider span,
.compare-picture:has(input:focus-visible) .compare-divider span {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 6px 30px #0005;
}

/* ============================================================
   Hero, alive (2026-09-26). The one repeating moment of the page: every seven seconds the
   pulse beats twice and a wave of light runs through every glass layer of the artwork (the
   light is masked by the artwork itself, so only the glass catches it), while the line under
   "pulse." draws again. Around it, quiet idle life: the chips float, the art sways. All of it
   pauses when the hero is off screen (.hero.is-away, set in script.js) and none of it runs
   with reduced motion.
   ============================================================ */
.hero-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: plus-lighter;
  -webkit-mask: image-set(url("/assets/hero/hero-layers-desktop.avif") type("image/avif"), url("/assets/hero/hero-layers-desktop.webp") type("image/webp")) center / contain no-repeat;
  mask: image-set(url("/assets/hero/hero-layers-desktop.avif") type("image/avif"), url("/assets/hero/hero-layers-desktop.webp") type("image/webp")) center / contain no-repeat;
  /* It follows the pointer's tilt exactly as the artwork does. */
  transform: perspective(1000px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transition: transform 0.6s cubic-bezier(0.2, 0.75, 0.2, 1);
}
@media (max-width: 800px) {
  .hero-light {
    -webkit-mask-image: image-set(url("/assets/hero/hero-layers-mobile.avif") type("image/avif"), url("/assets/hero/hero-layers-mobile.webp") type("image/webp"));
    mask-image: image-set(url("/assets/hero/hero-layers-mobile.avif") type("image/avif"), url("/assets/hero/hero-layers-mobile.webp") type("image/webp"));
  }
}
/* The heartbeat: the whole artwork brightens twice. */
.hero-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 62% 52%, rgba(120, 175, 255, 0.55), rgba(40, 110, 255, 0.18) 70%);
  opacity: 0;
}
/* The wave: a band of light that crosses the layers from left to right, along the pulse line. */
.hero-light i {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 34%;
  background: linear-gradient(100deg, rgba(90, 150, 255, 0) 0%, rgba(90, 150, 255, 0.25) 30%, rgba(200, 225, 255, 0.78) 50%, rgba(90, 150, 255, 0.25) 70%, rgba(90, 150, 255, 0) 100%);
  transform: translateX(-110%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-light {
    opacity: 1;
    /* The same sway as the artwork, in step, so the light stays on the glass. */
    animation: hero-sway 16s ease-in-out 2.4s infinite;
  }
  .hero-light::before {
    animation: hero-beat 7s ease-out 3.4s infinite;
  }
  .hero-light i {
    animation: hero-wave 7s cubic-bezier(0.45, 0.05, 0.35, 1) 3.4s infinite;
  }
  /* The line under "pulse." draws again with every beat, and the word glows with it. */
  .pulse-ignite path {
    animation:
      ignite-draw 0.75s cubic-bezier(0.5, 0, 0.3, 1) 1.1s forwards,
      ignite-fade 0.9s ease-in 2.2s forwards,
      ignite-again 7s linear 3.4s infinite;
  }
  .hero-copy h1 > em {
    animation:
      hero-line 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s both,
      pulse-lit 1.6s ease-out 1.55s both,
      pulse-beat 7s ease-out 3.4s infinite;
  }
  /* Idle life: each chip floats on its own slow beat; the artwork sways a little in 3D. */
  .hero-visual .hero-chip {
    animation:
      chip-in 1s cubic-bezier(0.3, 1.45, 0.5, 1) both,
      chip-float var(--float, 7s) ease-in-out 2.6s infinite alternate;
  }
  .hero-chip-toggle { --float: 6.2s; --bob: -9px; --spin: 2deg; }
  .hero-chip-slider { --float: 7.4s; --bob: 11px; --spin: -1.6deg; }
  .hero-chip-button { --float: 5.6s; --bob: -12px; --spin: 2.4deg; }
  .hero-chip-pill { --float: 8.2s; --bob: 8px; --spin: -2.2deg; }
  .hero-chip-chart { --float: 6.8s; --bob: -10px; --spin: 1.8deg; }
  .hero-visual > picture {
    animation:
      hero-art 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both,
      hero-sway 16s ease-in-out 2.4s infinite;
  }
  .hero-light i,
  .hero-light::before {
    will-change: transform, opacity;
  }
  .hero.is-away .hero-light,
  .hero.is-away .hero-light::before,
  .hero.is-away .hero-light i,
  .hero.is-away .pulse-ignite path,
  .hero.is-away .hero-copy h1 > em,
  .hero.is-away .hero-visual .hero-chip,
  .hero.is-away .hero-visual > picture {
    animation-play-state: paused;
  }
}
@keyframes hero-beat {
  0% { opacity: 0; }
  2.5% { opacity: 0.9; }
  5% { opacity: 0.15; }
  8% { opacity: 0.65; }
  16% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hero-wave {
  0%, 4% { transform: translateX(-110%); }
  36% { transform: translateX(310%); }
  100% { transform: translateX(310%); }
}
@keyframes ignite-again {
  0% { stroke-dashoffset: 1; opacity: 1; }
  11% { stroke-dashoffset: 0; opacity: 1; }
  18% { stroke-dashoffset: 0; opacity: 1; }
  28% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes pulse-beat {
  0% { text-shadow: 0 0 0 rgba(90, 146, 255, 0); }
  2.5% { text-shadow: 0 0 16px rgba(140, 185, 255, 0.85), 0 0 36px rgba(8, 104, 248, 0.6); }
  5% { text-shadow: 0 0 4px rgba(140, 185, 255, 0.2); }
  8% { text-shadow: 0 0 12px rgba(140, 185, 255, 0.6), 0 0 28px rgba(8, 104, 248, 0.4); }
  16%, 100% { text-shadow: 0 0 0 rgba(90, 146, 255, 0); }
}
@keyframes chip-float {
  from { translate: 0 0; rotate: 0deg; }
  to { translate: 0 var(--bob, -10px); rotate: var(--spin, 2deg); }
}
@keyframes hero-sway {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  25% { rotate: -0.6deg; translate: 0 -6px; }
  50% { rotate: 0.3deg; translate: 0 2px; }
  75% { rotate: 0.7deg; translate: 0 -4px; }
}
/* Phones: three of the chips come back, smaller, around the phone-shaped artwork. */
@media (max-width: 800px) {
  .hero-visual .hero-chip {
    display: block;
    filter: drop-shadow(0 10px 16px #0868f840);
  }
  .hero-visual .hero-chip-slider,
  .hero-visual .hero-chip-button {
    display: none;
  }
  .hero-chip-toggle { --x: 4%; --y: 4%; --w: 11%; }
  .hero-chip-pill { --x: 30%; --y: 84%; --w: 12%; }
  .hero-chip-chart { --x: 86%; --y: 66%; --w: 11%; }
}

/* You&Me wordmark (2026-09-26): the image is now cropped to the lettering, so it shows whole at
   its own height instead of being cut out of a tall canvas (on phones the bottom of
   "ურთიერთობები" was clipped flat). */
.youandme-art .together-wordmark {
  flex: none;
  width: min(62%, 250px);
  max-width: none;
  height: auto;
  overflow: visible;
}
.youandme-art .together-wordmark img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 760px) {
  .youandme-art .together-wordmark {
    width: min(60%, 230px);
    margin-top: 6px;
  }
}

/* Flyfy on phones (2026-09-26): the square art puts the logo's bubble right where the caption
   pill sat (and the bubble reaches the top edge too), so on phones the caption gets its own
   strip under the picture: the picture fades into a band of its own bottom-edge colours. */
@media (max-width: 800px) {
  .flyfy-project > .flyfy-art {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    background: linear-gradient(90deg, #7cabf6, #798df4 25%, #806cf4 50%, #8d59f3 75%, #984df4);
  }
  .flyfy-art > img {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 1110 / 1146;
    -webkit-mask-image: linear-gradient(#000 86%, transparent 100%);
    mask-image: linear-gradient(#000 86%, transparent 100%);
  }
  .flyfy-art-caption {
    position: relative;
    inset: auto;
    margin: -4px 16px 18px;
    text-align: center;
  }
}
/* Georgian: "თავგადასავალი" is one long word; on small phones the headline steps down so it fits. */
@media (max-width: 420px) {
  html:lang(ka) .real-project.flyfy-project h3 {
    font-size: clamp(1.75rem, 9.4vw, 2.8rem);
  }
}

/* The curtain opens (2026-09-26). Two halves of the same picture lie over it; when the card is
   lit (hover on desktop, a tap, or on phones simply coming into view) they draw apart and the
   blue light behind them comes up. They take the picture only once it has loaded. */
.curtain-back,
.curtain-half {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.curtain-back {
  /* Only the space above the floor lights up: the floor itself stays the picture's own. */
  background:
    radial-gradient(ellipse 9% 52% at 50% 44%, rgba(220, 235, 255, 0.92), rgba(220, 235, 255, 0) 100%),
    radial-gradient(ellipse 24% 66% at 50% 44%, rgba(77, 148, 255, 0.85), rgba(8, 104, 248, 0.3) 55%, rgba(8, 104, 248, 0) 100%),
    #030a1c;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 74%, transparent 80%);
  opacity: 0;
  transition: opacity 1.2s ease-out;
}
.curtain-half {
  background: center / cover no-repeat;
  opacity: 0;
  transition: transform 1.7s cubic-bezier(0.2, 0.7, 0.15, 1);
}
.curtain-art.is-ready .curtain-half {
  background-image: url("/assets/work/curtain.webp");
  opacity: 1;
}
/* Each half is the picture, faded at its inner edge, and at the hem, so the cloth moves and the
   floor under it does not. */
.curtain-half.is-left {
  transform-origin: 0 50%;
  -webkit-mask-image: linear-gradient(90deg, #000 0 47%, transparent 51%), linear-gradient(180deg, #000 76%, transparent 81%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 0 47%, transparent 51%), linear-gradient(180deg, #000 76%, transparent 81%);
  mask-composite: intersect;
}
.curtain-half.is-right {
  transform-origin: 100% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 49%, #000 53%), linear-gradient(180deg, #000 76%, transparent 81%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 49%, #000 53%), linear-gradient(180deg, #000 76%, transparent 81%);
  mask-composite: intersect;
}
.curtain-project.is-lit .curtain-art.is-ready .curtain-back {
  opacity: 1;
}
.curtain-project.is-lit .curtain-half.is-left {
  transform: translateX(-7%) scaleX(0.93);
}
.curtain-project.is-lit .curtain-half.is-right {
  transform: translateX(7%) scaleX(0.93);
}
@media (hover: hover) {
  .curtain-project:hover .curtain-art.is-ready .curtain-back {
    opacity: 1;
  }
  .curtain-project:hover .curtain-half.is-left {
    transform: translateX(-7%) scaleX(0.93);
  }
  .curtain-project:hover .curtain-half.is-right {
    transform: translateX(7%) scaleX(0.93);
  }
}
/* The caption and the column of light stay on top of the cloth. */
.curtain-glow,
.curtain-caption {
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .curtain-half {
    transition: none;
  }
  .curtain-project.is-lit .curtain-half.is-left,
  .curtain-project.is-lit .curtain-half.is-right,
  .curtain-project:hover .curtain-half.is-left,
  .curtain-project:hover .curtain-half.is-right {
    transform: none;
  }
}

/* VITO Studio: the project's own navy and orange identity. */
.vito-project { background: #0b1f5c; color: #fff4e6; border: 1px solid #284078; }
.vito-project .project-eyebrow { color: #ffb56d; }
.vito-project h3 em { color: #ff9b38; }
.vito-project .real-project-copy > p { color: #d2dcf3; }
.vito-project .real-project-copy { justify-content: center; }
.vito-project .project-credit { color: #b7c9ec; }
.vito-platforms { margin-top: 25px; color: #ffb56d; font-size: .68rem; line-height: 1.6; letter-spacing: .08em; }
.vito-art { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 580px; padding: 5px 35px 42px; background: radial-gradient(ellipse at 50% 55%, #24458c 0, #102968 47%, #081845 100%); }
.vito-wordmark { width: min(100%, 340px); height: auto; margin-top: -20px; margin-bottom: -60px; position: relative; z-index: 1; }
.vito-director { width: min(70%, 250px); height: auto; max-height: 380px; object-fit: contain; filter: drop-shadow(0 24px 22px #020c2e80); }
.vito-art-caption { position: absolute; bottom: 22px; left: 20px; right: 20px; text-align: center; color: #c0cfea; font-size: .6rem; letter-spacing: .12em; }
@media (max-width:800px) { .vito-project { grid-template-columns: 1fr; } .vito-art { order: -1; min-height: 420px; padding: 0 25px 38px; } .vito-wordmark { width: 260px; margin-top: -20px; margin-bottom: -50px; } .vito-director { height: 275px; width: auto; } .vito-project .real-project-copy { padding: 30px 27px; } }
@media (prefers-reduced-motion:no-preference) { .vito-project .real-project-link:hover { color: #ffb56d; } }

/* One portfolio system: equal frames, consistent copy rhythm, distinct project art. */
.selected-work .real-projects { grid-auto-rows: 1fr; gap: 28px; }
.selected-work .real-project {
  min-height: 580px; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr; border-radius: 20px;
}
.selected-work .real-project-copy {
  min-width: 0; max-width: none; padding: 30px 36px;
  display: flex; flex-direction: column; justify-content: flex-start;
  grid-row: 1;
}
.selected-work .real-project .project-eyebrow { margin-bottom: 16px; font-size: .7rem; }
.selected-work .real-project .real-app-icon { flex: none; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 14px; }
.selected-work .real-project h3 { font-size: clamp(2.5rem, 3.6vw, 3.6rem); line-height: 1.08; }
html:lang(ka) .selected-work .real-project h3 { font-size: clamp(2rem, 2.65vw, 2.7rem); line-height: 1.2; }
.selected-work .real-project-copy > p { max-width: 48ch; margin-top: 16px; font-size: .95rem; line-height: 1.6; }
.selected-work .real-project .project-actions { margin-top: auto; padding-top: 18px; }
.selected-work .real-project .project-actions .real-project-link { margin-top: 0; }
.selected-work .real-project .app-store-link { margin-top: 12px; }
.selected-work .real-project .real-project-art { min-width: 0; min-height: 0; height: 100%; max-height: none; grid-row: 1; contain: size; }
.selected-work .real-project .real-project-copy > template { display: none; }
.selected-work .project-stats { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.selected-work .project-stats strong { font-size: 2rem; }
.selected-work .project-stats span { font-size: .75rem; }
.selected-work .real-project .project-credit { margin-top: 9px; font-size: .75rem; line-height: 1.6; }
.selected-work .real-project .rythmos-platforms,
.selected-work .real-project .vito-platforms,
.selected-work .real-project .medai-status { margin-top: 14px; font-size: .7rem; line-height: 1.6; }
.selected-work .rythmos-project::after { display: none; }
.selected-work .rythmos-project .real-project-copy { grid-column: 1; }
.selected-work .rythmos-art { grid-column: 2; overflow: hidden; background: #030b1b; }
.selected-work .rythmos-scene { position: absolute; z-index: 0; object-position: 72% center; }
.selected-work .vito-art { padding: 10px 30px 42px; }
.selected-work .vito-wordmark { width: min(90%, 340px); }
.selected-work .vito-director { width: min(70%, 250px); height: auto; max-height: 380px; }
#project-reviews-slot:empty { display: none; }
#project-reviews-slot .project-reviews { color: #c9d6ed; }
#project-reviews-slot .project-reviews cite { color: #b9c7df; }
@media (min-width:801px) and (max-width:1100px) {
  .selected-work .real-project-copy { padding: 30px; }
  .selected-work .real-project { min-height: 620px; }
}
@media (max-width:800px) {
  .selected-work .real-projects { gap: 24px; }
  .selected-work .real-project { min-height: 0; grid-template-columns: minmax(0,1fr); grid-template-rows: 280px 1fr; border-radius: 17px; }
  .selected-work .real-project .real-project-art { grid-column: 1; grid-row: 1; order: 0; width: 100%; height: 280px; min-height: 280px; max-height: 280px; }
  .selected-work .real-project .real-project-copy { grid-column: 1; grid-row: 2; order: 0; padding: 24px; }
  .selected-work .real-project .project-eyebrow { margin-bottom: 14px; }
  .selected-work .real-project .real-app-icon { width: 48px; height: 48px; margin-bottom: 14px; border-radius: 12px; }
  .selected-work .real-project h3 { font-size: clamp(2.3rem, 7vw, 3rem); }
  html:lang(ka) .selected-work .real-project h3 { font-size: clamp(1.95rem, 6vw, 2.5rem); }
  .selected-work .real-project-copy > p { max-width: 50ch; font-size: .9375rem; line-height: 1.55; margin-top: 14px; }
  .selected-work .real-project .project-actions { padding-top: 18px; }
  .selected-work .youandme-art { padding: 20px 0; gap: 5px; }
  .selected-work .youandme-art .together-characters { width: auto; max-width: 65%; height: 205px; object-fit: contain; }
  .selected-work .youandme-art .together-wordmark { width: 70%; max-width: 280px; height: 55px; flex: none; }
  .selected-work .vito-art { padding: 0 20px 30px; }
  .selected-work .vito-wordmark { width: 190px; margin-top: -18px; margin-bottom: -48px; }
  .selected-work .vito-director { height: 190px; width: auto; }
  .selected-work .vito-art-caption { bottom: 13px; font-size: .55rem; }
  .selected-work .real-project-art.flyfy-art { aspect-ratio: auto; }
  .selected-work .medai-art img, .selected-work .curtain-art > img { width: 100%; height: 100%; object-fit: contain; }
}
@media (max-width:360px) {
  .selected-work .real-project .real-project-copy { padding: 24px; }
  .selected-work .real-project { grid-template-rows: 280px 1fr; }
  .selected-work .real-project .real-project-art { height: 280px; min-height: 280px; max-height: 280px; }
  .selected-work .vito-director { height: 190px; }
  .selected-work .vito-wordmark { width: 180px; }
}
.selected-work .project-platform-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.selected-work .project-platform-links .app-store-link { min-height: 36px; display: inline-flex; align-items: center; margin-top: 4px; }

/* Launch polish: readable progress, optional explanations, and shorter demos. */
#brief-dialog .brief-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
#brief-dialog .brief-steps li { min-width: 0; gap: 6px; white-space: normal; }
#brief-dialog .brief-steps li > span { flex: none; }
#brief-dialog #brief-gmail { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; min-height: 46px; }
.estimate-explainer { margin-top: 12px; max-width: 70ch; }
.estimate-explainer summary { width: fit-content; padding: 8px 0; color: #244c85; font-weight: 600; cursor: pointer; }
.estimate-explainer p { margin-top: 10px; line-height: 1.6; }
.contact-shortcuts { padding: 24px 0 28px; border-top: 1px solid #26384f; color: #b9c7de; }
.contact-shortcut-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.contact-shortcut-actions > * { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 18px; border: 1px solid #536b94; border-radius: 100px; color: #f0f5ff; background: transparent; font: inherit; cursor: pointer; }
.contact-shortcut-actions .contact-gmail { background: #0868f8; border-color: #0868f8; color: #fff; }
#contact-copy-status { margin-top: 12px; font-size: .875rem; color: #c5debd; }
#contact-copy-status:empty { display: none; }
#contact-email-fallback { margin-top: 14px; width: min(100%,340px); padding: 12px; border: 1px solid #536b94; background: #111c30; color: #f0f5ff; font-size: 16px; }
#playground .experiment { scroll-margin-top: 110px; }
#playground .experiment[hidden] { display: none !important; }
.playground-more { display: block; margin: 28px auto 0; min-height: 48px; padding: 13px 24px; border: 1px solid #536b94; border-radius: 100px; background: #14233d; color: #eef3ff; font: inherit; cursor: pointer; }
.playground-more[hidden] { display: none; }
.contact-shortcut-actions > *:focus-visible, .playground-more:focus-visible, .estimate-explainer summary:focus-visible { outline: 3px solid #7fb2ff; outline-offset: 4px; }
@media (max-width:800px) {
  #brief-dialog .brief-steps li { font-size: .75rem; gap: 5px; }
  #brief-dialog .brief-steps li > span { width: 23px; height: 23px; }
  #brief-dialog .brief-actions:has(#brief-gmail:not([hidden])) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  #brief-dialog .brief-actions:has(#brief-gmail:not([hidden])) #brief-back { justify-self: start; grid-column: 1 / -1; }
  #brief-dialog .brief-actions:has(#brief-gmail:not([hidden])) #brief-email-action { grid-column: 1 / -1; }
  #brief-dialog .brief-actions:has(#brief-gmail:not([hidden])) > * { min-width: 0; font-size: .8rem; padding-inline: 10px; }
  #brief-dialog #brief-gmail { width: 100%; }
  .estimate-explainer summary { min-height: 44px; display: list-item; }
  .contact-shortcut-actions > * { flex: 1 1 auto; }
}
@media (max-width:360px) { #brief-dialog .brief-steps li { font-size: .7rem; gap: 4px; } }