/* The same self-hosted Inter used by the public Warblan profile. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/preview/studio-v4/media/fonts-v1/inter-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/preview/studio-v4/media/fonts-v1/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/preview/studio-v4/media/fonts-v1/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
:root {
  color-scheme: dark;
  --background: #000;
  --foreground: #f7f8fc;
  --muted: #a7adbd;
  --surface: #13161d;
  --border: #2c303c;
  --ink: #171c30;
  --cobalt: #2948e8;
  --ice: #dce5ff;
  --lavender: #d0c8ed;
  --accent: #a5b7ff;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
html {
  scroll-padding-top: 32px;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
a,
summary,
label {
  -webkit-tap-highlight-color: transparent;
}
a:hover {
  text-decoration-color: currentColor;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}
::selection {
  background: #8f9fff;
  color: #000;
}
h1,
h2,
h3,
h4,
h5,
p,
figure,
dl,
dd {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5 {
  text-wrap: balance;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
svg {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.wrap {
  width: min(1160px, calc(100% - 80px));
  margin-inline: auto;
}
.skip-link {
  position: fixed;
  z-index: 10;
  top: 12px;
  left: 12px;
  transform: translateY(-200%);
  padding: 12px 20px;
  background: white;
  color: black;
  border-radius: 12px;
}
.skip-link:focus {
  transform: none;
}
.glass {
  background: rgb(235 244 255 / 0.88);
  color: var(--ink);
  border: 1px solid rgb(255 255 255 / 0.65);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgb(255 255 255 / 0.35),
    0 12px 36px rgb(0 0 0 / 0.14);
}
.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 28px;
  width: min(1160px, calc(100% - 48px));
  margin: 24px auto 0;
  min-height: 68px;
  padding: 8px 12px 8px 24px;
  border-radius: 22px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.07em;
  white-space: nowrap;
}
.wordmark .brand-name > span {
  font-weight: 450;
  opacity: 0.6;
}
.brand-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  object-fit: contain;
}
.header-projects {
  font-size: 13px;
  padding: 8px;
}
.languages {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 2px;
}
.languages a {
  min-width: 40px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.languages a[aria-current] {
  background: rgb(255 255 255 / 0.85);
  box-shadow: 0 1px 4px rgb(24 36 60 / 0.1);
}
.languages a:hover {
  background: #fff;
}
.header-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 46px;
  padding: 8px 16px;
  border-radius: 14px;
  background: #151925;
  color: white;
  font-size: 12px;
}
.header-profile:hover {
  background: #293554;
}
.header-profile svg {
  width: 16px;
  height: 16px;
}
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: end;
  gap: 72px;
  padding-top: 132px;
  padding-bottom: 108px;
}
.status {
  color: #c0cadc;
  font-size: 13px;
  margin-bottom: 28px;
}
h1 {
  font-size: clamp(42px, 4.7vw, 68px);
  font-weight: 600;
  line-height: 1.09;
  letter-spacing: -0.065em;
  text-wrap: initial;
}
.intro-copy {
  max-width: 540px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 28px;
}
.intro-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 32px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.button-light {
  background: #f3f5fc;
  color: var(--ink);
}
.button-light:hover {
  background: var(--ice);
}
.hero-profile {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  color: #d2d7e3;
}
.hero-profile:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.project-index {
  margin-bottom: 4px;
}
.project-index > p {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 16px;
}
.project-index a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgb(255 255 255 / 0.18);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.project-index a:hover {
  color: #c9d5ff;
}
.project-index-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: contain;
}
.project-index small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}
.project-index svg {
  width: 18px;
  height: 18px;
  color: #8d99b0;
}
.projects {
  padding: 56px 0 72px;
  border-top: 1px solid #262a35;
  border-radius: 40px 40px 0 0;
  background: #090b10;
}
.section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 64px;
  margin-bottom: 40px;
}
.section-heading h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 550;
  letter-spacing: -0.055em;
  line-height: 1.15;
}
.section-heading h2 > span {
  display: none;
}
.section-heading p {
  color: var(--muted);
  font-size: 13px;
  max-width: 440px;
  line-height: 1.8;
}
.project-panel {
  padding: 40px;
  margin-bottom: 24px;
  border-radius: 28px;
}
.project-panel h3,
.hire-project h3 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 550;
  letter-spacing: -0.055em;
  line-height: 1.15;
  margin-bottom: 20px;
}
.platform {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 16px;
}
.project-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.project-heading h3 {
  margin-bottom: 0;
}
.project-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  object-fit: contain;
}
.project-description {
  max-width: 560px;
  font-size: 17px;
  line-height: 1.75;
}
.project-direction {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  margin-top: 20px;
  max-width: 560px;
}
.project-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.project-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 24px;
}
.release-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 12px;
}
.web-project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 32px 0 64px;
  border-radius: 0;
}
.web-project .project-copy {
  padding: 8px 24px 8px 0;
}
.web-project .platform {
  color: #a7b7ff;
}
.project-notes {
  font-size: 13px;
  line-height: 1.8;
  margin-top: 28px;
}
.project-notes dt {
  font-weight: 600;
  margin-top: 16px;
  color: #d9deeb;
}
.project-notes dd {
  color: var(--muted);
  margin-top: 4px;
  max-width: 400px;
}
.profile-preview {
  min-width: 0;
  width: 100%;
  max-width: 370px;
  justify-self: end;
}
.profile-stage {
  background: #fff;
  padding: 6px;
  border-radius: 22px;
}
.profile-stage .screenshot {
  border-radius: 16px;
  box-shadow: 0 16px 48px rgb(0 0 0 / 0.2);
}
.profile-preview figcaption {
  color: var(--muted);
  font-size: 11px;
  margin-top: 16px;
  text-align: center;
}
.screenshot {
  display: block;
  overflow: hidden;
  min-width: 0;
}
.android-project {
  --muted: #b3b5c9;
  background: #1c1c29;
}
.android-project .platform {
  color: #d0c8ed;
}
.alias {
  color: var(--muted);
  font-size: 12px;
}
.screens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.screen .screenshot {
  border-radius: 16px;
  border: 1px solid #3b3c4f;
}
.screen figcaption {
  margin-top: 16px;
}
.screen h4 {
  font-size: 14px;
  font-weight: 600;
}
.screen figcaption p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.gallery-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
  font-size: 11px;
  color: var(--muted);
}
.development-status {
  color: #d0c8ed;
}
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 720px;
  padding-top: 128px;
  background: #000;
}
.footer-content {
  position: relative;
}
.footer-intro h2 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 550;
  letter-spacing: -0.06em;
  line-height: 1.1;
}
.footer-intro p {
  margin-top: 24px;
  max-width: 440px;
  font-size: 16px;
  color: #c1c5d0;
}
.resource-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.resource-links a {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 12px 20px;
  min-height: 48px;
  border: 1px solid #363a46;
  border-radius: 14px;
  background: rgb(13 15 21 / 0.85);
  font-size: 14px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.resource-links a:hover {
  background: #222a40;
  border-color: #8197e0;
}
.resource-links svg {
  width: 16px;
  height: 16px;
}
.footer-profile {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  margin-top: 20px;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.footer-profile svg {
  width: 16px;
  height: 16px;
}
.footer-bottom {
  margin-top: 100px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.15);
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: start;
}
.footer-bottom p {
  max-width: 560px;
  font-size: 11px;
  color: #a9adba;
}
/* Profile alias canvas: filled Inter, six rows and two identical repeated sets. */
.alias-field {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.alias-row {
  position: absolute;
  left: 0;
  white-space: nowrap;
  opacity: var(--alias-opacity, 0.08);
}
.alias-track {
  display: flex;
  width: max-content;
  animation: alias-marquee 30s linear infinite;
}
.alias-set {
  display: flex;
  flex: 0 0 auto;
}
.alias-set span {
  margin-inline: 24px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.alias-field::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.72), transparent 80%),
    linear-gradient(0deg, #000, transparent 20%, transparent 80%, #000);
}
@keyframes alias-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@media (max-width: 767px), (min-width: 1024px) {
  .alias-row:nth-child(even) {
    display: none;
  }
}
@media (max-width: 767px) {
  .alias-row {
    opacity: min(0.45, calc(var(--alias-opacity, 0.08) * 1.8));
  }
}
@media (prefers-reduced-motion: reduce) {
  .alias-track {
    animation: none;
  }
}
@media (max-width: 1100px) {
  .intro {
    gap: 40px;
    grid-template-columns: minmax(0, 1fr) 220px;
  }
  h1 {
    font-size: 50px;
  }
  .project-panel {
    padding: 32px;
  }
  .web-project {
    padding: 24px 0 40px;
    gap: 32px;
  }
  .project-intro {
    gap: 40px;
  }
  .profile-stage {
    padding: 6px;
  }
}
@media (max-width: 800px) {
  .wrap {
    width: calc(100% - 48px);
  }
  .intro {
    grid-template-columns: 1fr;
    gap: 56px;
    padding-top: 88px;
    padding-bottom: 64px;
  }
  h1 {
    font-size: clamp(38px, 6.5vw, 56px);
  }
  .intro-copy {
    max-width: 580px;
  }
  .project-index {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
  .project-index > p {
    grid-column: 1/-1;
    margin: 0;
  }
  .project-index a {
    font-size: 18px;
  }
  .project-index svg {
    display: none;
  }
  .project-index-icon {
    display: none;
  }
  .section-heading {
    gap: 32px;
  }
  .project-intro {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .web-project {
    grid-template-columns: 1fr;
  }
  .web-project .project-copy {
    padding: 0;
  }
  .profile-preview {
    max-width: 370px;
    width: 100%;
    margin-inline: auto;
  }
  .profile-stage {
    padding: 6px;
  }
  .screens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
  }
  .site-footer {
    padding-top: 96px;
  }
}
@media (max-width: 560px) {
  .wrap {
    width: calc(100% - 32px);
  }
  .site-header {
    width: calc(100% - 24px);
    margin-top: 12px;
    padding: 8px 12px;
    gap: 12px;
    min-height: 60px;
    border-radius: 18px;
  }
  .header-projects {
    display: none;
  }
  .header-profile {
    width: 40px;
    min-height: 40px;
    padding: 0;
    font-size: 0;
    gap: 0;
    border-radius: 12px;
  }
  .header-profile svg {
    width: 18px;
    height: 18px;
  }
  .languages a {
    min-width: 32px;
    font-size: 10px;
  }
  .site-header .brand-name > span {
    display: none;
  }
  .wordmark {
    font-size: 20px;
  }
  .intro {
    padding-top: 80px;
    padding-bottom: 56px;
    gap: 48px;
  }
  .status {
    margin-bottom: 20px;
    font-size: 12px;
  }
  h1 {
    font-size: clamp(32px, 7.9vw, 44px);
  }
  .intro-copy {
    font-size: 14px;
    margin-top: 24px;
  }
  .intro-actions {
    gap: 12px 20px;
    margin-top: 24px;
  }
  .button {
    font-size: 12px;
    padding: 12px 16px;
  }
  .project-index {
    gap: 12px;
  }
  .project-index a {
    font-size: 13px;
    padding: 16px 0;
    letter-spacing: -0.03em;
  }
  .project-index small {
    font-size: 10px;
  }
  .project-heading {
    gap: 12px;
  }
  .project-icon {
    width: 48px;
    height: 48px;
  }
  .projects {
    border-radius: 24px 24px 0 0;
    padding-top: 36px;
  }
  .section-heading {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 24px;
  }
  .section-heading h2 {
    font-size: 32px;
  }
  .project-panel {
    padding: 24px 20px;
    border-radius: 22px;
  }
  .web-project {
    padding: 16px 4px 40px;
  }
  .project-panel h3,
  .hire-project h3 {
    font-size: 32px;
  }
  .project-description {
    font-size: 15px;
  }
  .profile-stage {
    padding: 5px;
    border-radius: 17px;
  }
  .profile-stage .screenshot {
    border-radius: 12px;
  }
  .screens {
    gap: 24px 12px;
    margin-top: 28px;
  }
  .screen .screenshot {
    border-radius: 10px;
  }
  .screen h4 {
    font-size: 12px;
  }
  .screen figcaption p {
    font-size: 10px;
  }
  .gallery-bottom {
    gap: 8px;
    margin-top: 24px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    margin-top: 64px;
  }
  .footer-intro p {
    font-size: 14px;
  }
  .resource-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .resource-links a {
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 12px 16px;
  }
}
@media print {
  .site-header,
  .resource-links,
  .alias-field {
    display: none;
  }
  body,
  .projects,
  .site-footer {
    color: #000;
    background: #fff;
  }
  .intro {
    padding-block: 24px;
  }
  .project-panel {
    break-inside: avoid;
  }
}

/* Owner-controlled profile scrim, in addition to the footer edge fade. */
.alias-field::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / var(--alias-scrim, 0)),
    rgb(0 0 0 / calc(var(--alias-scrim, 0) * 0.2)) 30%,
    rgb(0 0 0 / calc(var(--alias-scrim, 0) * 0.2)) 70%,
    rgb(0 0 0 / var(--alias-scrim, 0))
  );
}

@media (max-width: 560px) {
  .android-project .project-heading {
    gap: 10px;
  }
  .android-project .project-heading h3 {
    font-size: clamp(24px, 6vw, 32px);
  }
}

/* Four offline audio envelopes drive the light; visitors never receive audio. */
body {
  position: relative;
  isolation: isolate;
  display: flow-root;
}
.ambient {
  --ambient-blue: #227aff;
  --ambient-iris: #7c5fe8;
  --ambient-cyan: #54c5ed;
  --ambient-ember: #eb884f;
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 850px;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background: var(--background);
}
.ambient-light {
  position: absolute;
  width: min(90vw, 1300px);
  height: 850px;
  border-radius: 50%;
  opacity: 0.4;
  transform: translate(-50%, -50%);
}
.ambient-light:nth-child(1) {
  left: 14%;
  top: 8%;
  background: radial-gradient(ellipse, var(--ambient-blue), transparent 67%);
}
.ambient-light:nth-child(2) {
  left: 90%;
  top: 8%;
  background: radial-gradient(ellipse, var(--ambient-iris), transparent 67%);
}
.ambient-light:nth-child(3) {
  left: 46%;
  top: -10%;
  background: radial-gradient(ellipse, var(--ambient-cyan), transparent 67%);
}
.ambient-light:nth-child(4) {
  left: 68%;
  top: -24%;
  background: radial-gradient(ellipse, var(--ambient-ember), transparent 67%);
}
.ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent,
    rgb(0 0 0 / 0.16) 20%,
    rgb(0 0 0 / 0.72) 54%,
    var(--background) 76%
  );
}
.motion-toggle {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.motion-control {
  position: fixed;
  z-index: 4;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgb(220 231 255 / 0.28);
  border-radius: 100px;
  background: rgb(18 24 42 / 0.88);
  color: #f1f4ff;
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    0 6px 24px rgb(0 0 0 / 0.16);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}
.motion-control svg {
  width: 14px;
  height: 14px;
}
.motion-control:hover {
  background: #283149;
}
.motion-toggle:focus-visible + .motion-control {
  outline: 3px solid #a6bbff;
  outline-offset: 4px;
}
.motion-control .motion-resume {
  display: none;
}
.motion-toggle:checked + .motion-control .motion-pause {
  display: none;
}
.motion-toggle:checked + .motion-control .motion-resume {
  display: inline;
}
.motion-toggle:checked ~ .ambient .ambient-light,
.motion-toggle:checked ~ .site-footer .alias-track {
  animation-play-state: paused;
}
.site-footer {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
@media (max-width: 760px) {
  .ambient-light {
    width: 160vw;
    height: 760px;
  }
  .ambient-light:nth-child(1) {
    left: 0;
  }
  .ambient-light:nth-child(2) {
    left: 100%;
  }
  .motion-control {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ambient .ambient-light {
    animation: none;
  }
  .motion-toggle,
  .motion-control {
    display: none;
  }
  .site-footer {
    padding-bottom: 40px;
  }
}
@media print {
  .ambient,
  .motion-toggle,
  .motion-control {
    display: none;
  }
}

/* Let the original application windows carry the showcase. */
.desktop-project {
  --muted: #4f5c7c;
  --border: #b4c3e7;
  --accent: #2848cb;
  background: var(--ice);
  color: var(--ink);
}
.desktop-project .platform {
  color: #2446b8;
}
.download-link {
  background: var(--ink);
  color: white;
}
.download-link:hover {
  background: #2c3d6c;
}
.project-text-link,
.project-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.project-text-link:hover,
.project-links a:hover {
  color: #264dc5;
}
.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-top: 12px;
}
.translator-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    'window popup'
    'window demo';
  align-items: start;
  gap: 28px 40px;
  margin-top: 40px;
}
.translator-gallery figure {
  min-width: 0;
}
.translator-window {
  grid-area: window;
  align-self: center;
}
.translator-popup {
  grid-area: popup;
}
.translator-demo {
  grid-area: demo;
}
.translator-media {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 16px 40px -24px rgb(29 46 100 / 0.35);
}
.translator-media img {
  display: block;
  width: 100%;
  height: auto;
}
.translator-gallery figcaption {
  padding-top: 16px;
}
.translator-gallery h4 {
  font-size: 14px;
  font-weight: 650;
}
.translator-gallery figcaption p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin-top: 6px;
}
.demo-animation {
  width: 100%;
  aspect-ratio: 1152 / 850;
  border-radius: 10px;
  background: url('/preview/studio-v4/media/ranslator-v1/snapshot-demo.gif') center / contain no-repeat;
}
.motion-toggle:checked ~ main .demo-animation {
  background-image: url('/preview/studio-v4/media/portfolio-v2/ranslator-poster.webp');
}
@media (max-width: 1000px) {
  .translator-gallery {
    gap: 24px 28px;
  }
}
@media (max-width: 800px) {
  .translator-gallery {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'window' 'popup' 'demo';
    gap: 32px;
    max-width: 540px;
    margin-inline: auto;
    margin-top: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-animation {
    background-image: url('/preview/studio-v4/media/portfolio-v2/ranslator-poster.webp');
  }
}
@media print {
  .demo-animation {
    background-image: url('/preview/studio-v4/media/portfolio-v2/ranslator-poster.webp');
  }
}

/* Working prototypes and supporting tools have a quieter visual hierarchy. */
.lab-area {
  margin-top: 80px;
}
.lab-area > .section-heading h2 {
  font-size: clamp(32px, 3.7vw, 44px);
}
.hire-project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
  padding: 40px;
  border-radius: 28px;
  background: var(--lavender);
  color: #242039;
  margin-bottom: 24px;
}
.hire-project .platform {
  color: #51486c;
}
.hire-project h4 {
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin-bottom: 16px;
}
.hire-project p:not(.platform) {
  color: #51486c;
  font-size: 13px;
  line-height: 1.8;
}
.hire-contents {
  max-width: 250px;
}
.study-project {
  background: #151924;
  --muted: #acb4c9;
  --border: #333b4f;
}
.study-project .platform {
  color: #a8b9ed;
}
.study-project .release-note {
  max-width: 360px;
}
.study-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 32px;
}
.study-highlights figure {
  min-width: 0;
}
.study-focus {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: #211e17;
}
.study-focus img {
  position: absolute;
  max-width: none;
  height: auto;
}
/* Frame the useful parts of the original 1512 × 1000 captures without
   sidebars, full-page scroll areas or changing the source image pixels.
   Graph crop: x=690, y=322, width=540, height=270. */
.study-graph-focus img {
  width: 280%;
  left: -127.777778%;
  top: -119.259259%;
}
/* Generation controls: x=480, y=210, width=460, height=230. */
.study-quiz-focus img {
  width: 328.695652%;
  left: -104.347826%;
  top: -91.304348%;
}
.study-highlights figcaption {
  padding-top: 16px;
}
.study-highlights h4 {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 550;
  letter-spacing: -0.025em;
}
.study-highlights figcaption p {
  margin-top: 8px;
  max-width: 48ch;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.learning-system {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.learning-system > h4 {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.035em;
  font-weight: 550;
}
.learning-parts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 24px;
}
.learning-parts h5 {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
  font-weight: 600;
}
.learning-parts p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
}
.subsection-title {
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.045em;
  font-weight: 550;
  margin-bottom: 20px;
}
.integration-projects,
.experiment-section {
  margin-top: 56px;
}
.system-description {
  color: var(--muted);
  max-width: 680px;
  font-size: 14px;
  line-height: 1.8;
}
.system-connections {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  list-style: none;
  padding: 0;
  margin: 24px 0 32px;
  font-size: 12px;
  color: #b6c6f2;
}
.system-connections span {
  padding-inline: 6px;
}
.integration-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.integration-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 32px;
  border-radius: 24px;
  background: #1b2232;
}
.integration-card .platform {
  font-size: 11px;
  color: #a9bdeb;
  margin-bottom: 16px;
}
.integration-card h4 {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.045em;
  font-weight: 550;
}
.integration-card p:not(.platform) {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.8;
  color: #b5bfd5;
}
.integration-shot {
  margin: 28px auto 0;
  border-radius: 18px;
  max-width: 100%;
  width: 320px;
}
.ticket-card {
  background: #172523;
}
.ticket-card .platform {
  color: #9ec9bb;
}
.ticket-card p:not(.platform) {
  color: #adcbc1;
}
.ticket-shot {
  width: 200px;
  border-radius: 14px;
  margin-top: auto;
  align-self: center;
}
.ticket-card > div:first-child {
  padding-bottom: 28px;
}
.ufv-project {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
  margin-top: 24px;
  background: #13161d;
}
.ufv-project .platform {
  color: #bec4d2;
}
.ufv-shot {
  border: 1px solid #343943;
  border-radius: 16px;
  overflow: hidden;
}
.hosting-note {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  padding: 32px 0;
  margin-top: 24px;
  border-block: 1px solid var(--border);
}
.hosting-note h3 {
  font-size: 24px;
  font-weight: 550;
  letter-spacing: -0.04em;
}
.hosting-note p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}
.experiment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
}
.experiment-row {
  padding-block: 24px;
  border-top: 1px solid var(--border);
}
.experiment-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.experiment-heading h4 {
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -0.025em;
}
.experiment-heading span {
  font-size: 11px;
  color: #bac5e0;
}
.experiment-row p {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
}
@media (max-width: 1000px) {
  .hire-project {
    gap: 40px;
    padding: 32px;
  }
  .integration-card {
    padding: 28px;
  }
  .ufv-project {
    gap: 32px;
  }
}
@media (max-width: 800px) {
  .study-highlights {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 540px;
    margin-inline: auto;
  }
  .hire-project,
  .ufv-project {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .learning-parts {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .learning-parts p {
    max-width: 600px;
  }
  .integration-grid {
    grid-template-columns: 1fr;
  }
  .integration-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 24px;
  }
  .integration-shot {
    margin: 0 auto;
  }
  .ticket-card > div:first-child {
    padding: 0;
  }
  .ufv-shot {
    max-width: 560px;
    max-height: none;
    margin-inline: auto;
  }
  .hosting-note {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@media (max-width: 560px) {
  .lab-area {
    margin-top: 56px;
  }
  .hire-project {
    padding: 24px 20px;
    border-radius: 22px;
  }
  .hire-project h4 {
    font-size: 20px;
  }
  .learning-system {
    margin-top: 28px;
    padding-top: 24px;
  }
  .learning-system > h4 {
    font-size: 22px;
  }
  .subsection-title {
    font-size: 26px;
  }
  .system-connections {
    font-size: 11px;
    gap: 12px 20px;
  }
  .integration-card {
    display: flex;
    padding: 24px 20px;
    gap: 24px;
  }
  .integration-shot {
    max-width: 280px;
  }
  .ticket-shot {
    max-width: 200px;
  }
  .experiment-grid {
    grid-template-columns: 1fr;
  }
  .experiment-heading h4 {
    font-size: 17px;
  }
}

/* Ruby studio — only the opening screen. Existing project sections stay intact. */
.studio-landing {
  --background: #0b0b0f;
  overflow-x: clip;
}
.studio-landing .intro::before {
  content: '';
  position: absolute;
  z-index: -1;
  /* Painted full-bleed so the glow never ends on a visible edge. It is centred
     on the projected logo: the intro column is centred and capped at 1280px, so
     the logo centre is always 372px right of the viewport centre. Anchoring the
     gradient at 78% of the viewport made it drift right on wide monitors; a
     fixed-pixel radius keeps the halo the same size on every screen. */
  inset: -100px calc((100vw - 100%) / -2) 0;
  pointer-events: none;
  background: radial-gradient(ellipse 900px 530px at calc(50% + 372px) 40%,
    #65212e78 0%, #65212e54 30%, #65212e2e 55%, #65212e12 78%, #65212e00 100%), #0b0b0f;
}
.studio-landing > .ambient { display: none; }
.studio-landing .site-header {
  width: min(1280px, calc(100% - 112px));
  min-height: 88px;
  margin: 0 auto;
  padding: 16px 0;
  border-radius: 0;
  gap: 32px;
  color: #f4f3f6;
}
.studio-landing .wordmark { font-size: 24px; letter-spacing: -.065em; font-weight: 650; }
.studio-landing .wordmark .brand-name > span { opacity: 1; font-weight: 450; }
.studio-landing .languages { gap: 4px; }
.studio-landing .languages a {
  color: #b4b0b9;
  min-width: 36px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  background: none;
  box-shadow: none;
}
.studio-landing .languages a[aria-current] { color: #fff; }
.studio-landing .languages a:hover { color: #fff; background: #ffffff0a; }
.studio-landing .header-profile {
  min-height: 44px;
  padding: 8px 0 8px 18px;
  background: none;
  border-radius: 0;
  gap: 9px;
  color: #d5d1d9;
}
.studio-landing .header-profile:hover { color: white; }
.studio-landing .intro {
  position: relative;
  isolation: isolate;
  width: min(1280px, calc(100% - 112px));
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: 16px 0 60px;
}
.studio-landing .intro-main { z-index: 1; padding: 16px 0 38px; }
.studio-landing .status { color: #a9a4b0; font-size: 12px; margin-bottom: 32px; }
.studio-landing .intro h1 {
  font-size: clamp(42px, 4.3vw, 64px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.055em;
}
.studio-landing .intro-copy {
  max-width: 500px;
  color: #b3afb9;
  font-size: 14px;
  line-height: 1.8;
  margin-top: 28px;
}
.studio-landing .intro-actions { margin-top: 32px; gap: 16px 32px; }
.studio-landing .intro-actions .button-light {
  padding: 14px 23px;
  min-height: 50px;
  border-radius: 13px;
  background: #f4f4f7;
  color: #15171f;
  box-shadow: inset 0 1px 0 white, 0 1px 3px #0003;
}
.studio-landing .intro-actions .button-light:hover { background: #fff; }
.studio-landing .hero-profile {
  color: #dedbe2;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #7a747e;
  text-underline-offset: 7px;
}
.hero-art {
  position: relative;
  width: calc(100% + 60px);
  margin-left: -25px;
  height: clamp(500px, calc(100svh - 300px), 700px);
  min-width: 0;
  isolation: isolate;
  pointer-events: none;
}
.hero-art canvas, .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-art canvas { opacity: 0; }
.hero-art[data-renderer="ready"] canvas { opacity: 1; }
.hero-art[data-renderer="ready"] .hero-poster { opacity: 0; }
.hero-art[data-renderer="ready"] .hero-ground { opacity: 0; }
.hero-poster { object-fit: contain; }
.hero-ground {
  position: absolute;
  width: 75%; height: 10%;
  left: 12%; bottom: 4%;
  background: radial-gradient(ellipse, #dc24303d, #52091425 40%, transparent 69%);
  transform: rotate(-4deg);
}
.hero-ground::after {
  content: ''; position: absolute; width: 68%; height: 28%; left: 20%; top: 36%;
  border-radius: 50%; background: #000a; filter: blur(8px);
}
.studio-landing .project-index {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 44px;
  margin: 18px 0 0;
}
.studio-landing .project-index > p {
  grid-column: 1 / -1;
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #ffffff16;
  font-size: 12px;
  color: #a7a2ae;
}
.studio-landing .project-index a {
  justify-content: flex-start;
  border: 0;
  padding: 20px 0 4px;
  gap: 14px;
  font-size: 17px;
  font-weight: 500;
  color: #e8e5eb;
}
.studio-landing .project-index a:hover { color: #fff; }
.studio-landing .project-index a > svg {
  display: block; margin-left: auto; width: 14px; height: 14px; opacity: 0;
  transition: opacity 180ms;
}
.studio-landing .project-index a:hover > svg,
.studio-landing .project-index a:focus-visible > svg { opacity: .8; }
.studio-landing .project-index-icon { display: block; width: 38px; height: 38px; border-radius: 10px; }
.studio-landing .warblan-mark { padding: 8px; background: linear-gradient(140deg, #3b343e, #151922); border: 1px solid #ffffff15; }
.studio-landing .project-index small { margin-top: 1px; font-size: 11px; color: #8e8995; }
@media (min-width: 1600px) {
  .studio-landing .intro { padding-top: 40px; padding-bottom: 80px; }
}
@media (max-width: 1000px) {
  .studio-landing .site-header, .studio-landing .intro { width: calc(100% - 64px); }
  .studio-landing .intro { padding-top: 36px; }
  .studio-landing .intro h1 { font-size: clamp(34px, 4.5vw, 46px); }
  .studio-landing .intro-copy { font-size: 13px; padding-right: 16px; }
  .hero-art { width: calc(100% + 36px); height: auto; aspect-ratio: 1; margin-left: -10px; }
  .studio-landing .intro-actions { gap: 10px 20px; }
  .studio-landing .intro-actions .button-light { padding-inline: 16px; font-size: 12px; }
  .studio-landing .hero-profile { font-size: 12px; }
  .studio-landing .project-index { margin-top: 40px; column-gap: 28px; }
}
@media (max-width: 640px) {
  .studio-landing .site-header, .studio-landing .intro { width: calc(100% - 48px); }
  .studio-landing .site-header { min-height: 76px; gap: 14px; }
  .studio-landing .wordmark { font-size: 22px; }
  .studio-landing .wordmark .brand-name > span { display: inline; }
  .studio-landing .languages { gap: 0; }
  .studio-landing .languages a { min-width: 30px; font-size: 10px; }
  .studio-landing .header-profile { padding: 0; width: 28px; min-width: 28px; font-size: 0; }
  .studio-landing .intro::before { background: radial-gradient(ellipse 70% 27% at 50% 57%, #65212e70, transparent 90%), #0b0b0f; }
  .studio-landing .intro { grid-template-columns: 1fr; padding-top: 42px; padding-bottom: 48px; }
  .studio-landing .intro-main { padding: 0; }
  .studio-landing .status { font-size: 11px; margin-bottom: 20px; }
  .studio-landing .intro h1 { font-size: clamp(34px, 8.8vw, 48px); line-height: 1.12; }
  .studio-landing .intro-copy { max-width: 420px; font-size: 13px; margin-top: 22px; padding-right: 0; }
  .studio-landing .intro-actions { margin-top: 24px; gap: 16px 24px; }
  /* Center the projected silhouette, whose mass sits right of the canvas axis.
     Applying this to the host also aligns the static poster and its floor. */
  .hero-art { width: calc(100% + 24px); margin: 16px -12px -8px; max-width: 470px; justify-self: center; transform: translateX(-6%); }
  .studio-landing .project-index { grid-template-columns: 1fr; margin-top: 18px; gap: 0; }
  .studio-landing .project-index a { padding: 16px 0; font-size: 16px; border-bottom: 1px solid #ffffff0d; }
  .studio-landing .project-index a > svg { opacity: .55; }
  .studio-landing .project-index-icon { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-landing .project-index a > svg { transition: none; }
}

/* A compact view of the real profile's identity and connected services. */
.web-project {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  padding: 32px 0 64px;
}
.web-project .project-copy { padding: 0; }
.web-project .project-heading { gap: 18px; margin-bottom: 26px; }
.web-project .project-icon { width: 76px; height: 76px; }
.warblan-tagline {
  font-size: clamp(23px, 2.2vw, 30px);
  line-height: 1.3;
  letter-spacing: -.035em;
  margin-bottom: 16px;
  text-wrap: balance;
}
.web-project .project-description { color: #bcc0cc; font-size: 15px; line-height: 1.8; }
.web-project .project-notes { margin-top: 22px; }
.warblan-preview { max-width: 440px; width: 100%; justify-self: end; }
.profile-browser {
  border: 1px solid #ffffff1f;
  background: #101215;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: none;
}
.profile-browser-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 12px 18px;
  color: #b2b5c1;
  border-bottom: 1px solid #ffffff0e;
  font-size: 11px;
}
.profile-window-dots { display: flex; gap: 5px; }
.profile-window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #535660; }
.profile-snapshot-label { margin-left: auto; color: #959ba8; font-size: 10px; }
.profile-snapshot { display: block; position: relative; overflow: hidden; }
.profile-detail-crop { display: block; aspect-ratio: 720 / 850; overflow: hidden; }
.profile-detail-crop > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.profile-preview-callout {
  display: grid;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid #ffffff14;
  background: #101215;
}
.profile-preview-callout > span { color: #acb2c2; font-size: 11px; }
.profile-preview-callout strong { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 550; }
.profile-preview-callout svg { width: 20px; height: 20px; }
.profile-snapshot:hover .profile-preview-callout strong { color: #c5d3ff; }
.profile-snapshot:focus-visible { outline: 2px solid #b9caff; outline-offset: -4px; border-radius: 6px; }
.warblan-preview figcaption { text-align: left; padding-inline: 2px; margin-top: 12px; }
.profile-dialog {
  color: #f3f4fa;
  background: #101215;
  border: 1px solid #ffffff2b;
  border-radius: 22px;
  width: min(800px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  box-shadow: 0 32px 120px #0009;
  overflow: hidden;
}
.profile-dialog[open] { display: flex; flex-direction: column; }
.profile-dialog::backdrop { background: #05060bba; backdrop-filter: blur(10px); }
.profile-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; flex-shrink: 0; border-bottom: 1px solid #ffffff14; }
.profile-dialog-bar h4 { font-size: 14px; font-weight: 550; }
.profile-dialog-bar p { color: #a8aebd; font-size: 11px; margin-top: 5px; }
.profile-dialog-close { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid #ffffff1c; border-radius: 12px; background: #ffffff08; color: inherit; cursor: pointer; }
.profile-dialog-close:hover { background: #ffffff15; }
.profile-dialog-close svg { width: 20px; height: 20px; }
.profile-dialog-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-color: #5c6271 #101215; }
.profile-dialog-scroll img { display: block; width: 100%; height: auto; }
.profile-dialog-footer { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-shrink: 0; border-top: 1px solid #ffffff14; }
.profile-dialog-footer p { color: #a8aebd; font-size: 11px; line-height: 1.6; max-width: 360px; }
.profile-dialog-footer a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.profile-dialog-footer svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 1100px) {
  .profile-browser-bar { padding-inline: 14px; gap: 10px; }
  .profile-window-dots { display: none; }
}
@media (max-width: 800px) {
  .web-project { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 24px 0 48px; }
  .web-project .project-copy { max-width: 580px; }
  .warblan-preview { max-width: 440px; justify-self: center; }
}
@media (max-width: 480px) {
  .web-project .project-icon { width: 60px; height: 60px; }
  .web-project .project-heading { gap: 14px; margin-bottom: 22px; }
  .profile-browser { border-radius: 16px; }
  .profile-browser-bar { padding: 10px 12px; font-size: 10px; gap: 8px; }
  .profile-snapshot-label { font-size: 9px; }
  .profile-preview-callout { padding: 14px 16px; }
  .profile-preview-callout strong { font-size: 13px; }
  .profile-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 16px; }
  .profile-dialog-bar { padding: 12px 14px; }
  .profile-dialog-footer { padding: 12px 14px; flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* No language switch until the owner enables another translation. */
.languages:not(:has(a)), .resource-links:not(:has(a)) { display: none; }
.languages:not(:has(a)) + .header-profile { margin-left: auto; }
.resource-links a { max-width: 100%; }
.resource-links svg { flex-shrink: 0; }
.resource-links a > span { min-width: 0; display: grid; gap: 6px; overflow-wrap: anywhere; }
.resource-links small { color: var(--muted); font-size: 12px; line-height: 1.5; font-weight: 400; }
@media print {
  .profile-dialog { display: none !important; }
  .profile-snapshot { height: auto; aspect-ratio: auto; }
  .profile-preview-callout { display: none; }
}

.landing-newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 80px; padding-bottom: 56px; border-bottom: 1px solid #ffffff26; }
.landing-newsletter h2 { font-size: clamp(28px, 3.5vw, 40px); letter-spacing: -.045em; line-height: 1.1; margin: 16px 0; }
.landing-newsletter p { max-width: 440px; color: #bbc0ce; font-size: 14px; line-height: 1.7; }
.newsletter-options { align-self: center; min-width: 0; }
.newsletter-options label { font-size: 13px; }
.newsletter-email-row { display: flex; gap: 12px; margin: 10px 0 16px; }
.newsletter-email-row input { min-width: 0; width: 100%; border: 1px solid #ffffff32; border-radius: 12px; background: #11131b; color: #f4f3f6; padding: 12px 14px; font: inherit; font-size: 14px; }
.newsletter-email-row button { flex-shrink: 0; }
.newsletter-email-row :focus-visible, .newsletter-telegram:focus-visible { outline: 2px solid #b9caff; outline-offset: 4px; }
.newsletter-consent { display: flex; align-items: start; gap: 10px; line-height: 1.6; color: #bbc0ce; }
.newsletter-consent input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: #f4f3f6; }
.newsletter-options [role="status"], .newsletter-options .newsletter-note { margin-top: 12px; font-size: 12px; }
.newsletter-telegram { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; padding: 8px 0; border: 0; background: none; color: #f4f3f6; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.newsletter-options button:disabled { cursor: default; opacity: .6; }
.landing-privacy { margin-top: 28px; color: #bbc0ce; font-size: 12px; line-height: 1.8; max-width: 680px; }
.landing-privacy summary { cursor: pointer; min-height: 44px; padding: 12px 0; }
.newsletter-action { max-width: 560px; padding: 48px 24px; margin: 8vh auto; }
.newsletter-action h1 { margin: 32px 0 20px; font-size: 32px; line-height: 1.2; }
.newsletter-action p { margin-bottom: 28px; color: #bbc0ce; line-height: 1.7; }
@media (max-width: 800px) { .landing-newsletter { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; padding-bottom: 40px; } }
@media (max-width: 400px) { .newsletter-email-row { flex-direction: column; } .newsletter-email-row button { justify-content: center; } }

/* Same geometry and timing as the Warblan aliases background. */
.alias-field { --alias-opacity: 0.08; --alias-scrim: 0; }
.alias-row-0 { top: 0%; }
.alias-row-0 .alias-track { animation-duration: 31.416407864400004s; animation-direction: normal; }
.alias-row-1 { top: 16.666666666666668%; }
.alias-row-1 .alias-track { animation-duration: 26.832815728800004s; animation-direction: reverse; }
.alias-row-2 { top: 33.333333333333336%; }
.alias-row-2 .alias-track { animation-duration: 34.2492235932s; animation-direction: normal; }
.alias-row-3 { top: 50%; }
.alias-row-3 .alias-track { animation-duration: 29.665631457600004s; animation-direction: reverse; }
.alias-row-4 { top: 66.66666666666667%; }
.alias-row-4 .alias-track { animation-duration: 25.082039322000004s; animation-direction: normal; }
.alias-row-5 { top: 83.33333333333333%; }
.alias-row-5 .alias-track { animation-duration: 32.4984471864s; animation-direction: reverse; }
.alias-size-0 { font-size: 140px; }
.alias-size-1 { font-size: 100px; }
.alias-size-2 { font-size: 80px; }
.alias-size-3 { font-size: 60px; }
.alias-size-4 { font-size: 48px; }
.alias-size-5 { font-size: 36px; }
@media (min-width: 640px) {
.alias-size-0 { font-size: 180px; }
.alias-size-1 { font-size: 140px; }
.alias-size-2 { font-size: 100px; }
.alias-size-3 { font-size: 80px; }
.alias-size-4 { font-size: 60px; }
.alias-size-5 { font-size: 48px; }
}
@media (min-width: 768px) {
.alias-size-0 { font-size: 220px; }
.alias-size-1 { font-size: 180px; }
.alias-size-2 { font-size: 140px; }
.alias-size-3 { font-size: 100px; }
.alias-size-4 { font-size: 80px; }
.alias-size-5 { font-size: 60px; }
}