@font-face {
  font-family:Inter;
  src:url('/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight:100 900;
  font-display:swap;
}

:root {
  --paper:#f8f8f5;
  --ink:#252529;
  --muted:#737379;
  --line:#e1e1df;
  --purple:#7660d5;
  --violet:#efecfb;
  --radius:20px;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:32px;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

::selection {
  background:#ddd4fb;
}

a,button {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,button:focus-visible {
  outline:3px solid var(--purple);
  outline-offset:6px;
}

button {
  cursor:pointer;
}

[hidden] {
  display:none!important;
}

.shell {
  max-width:1240px;
  margin:auto;
  padding-inline:44px;
}

.site-header {
  height:110px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}

.wordmark {
  display:flex;
  align-items:center;
  font-weight:760;
  font-size:25px;
  letter-spacing:-1.1px;
}

.brand-mark {
  display:inline-block;
  position:relative;
  margin-right:11px;
  background:var(--ink);
  color:white;
  border-radius:9px;
  width:31px;
  height:32px;
  line-height:34px;
  font-size:27px;
  text-align:center;
}

.brand-mark span {
  font-size:15px;
  color:#b8a6ff;
  position:absolute;
  top:-9px;
  right:-6px;
}

.brand-dot {
  color:var(--purple);
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:36px;
  font-size:13px;
  font-weight:550;
}

.site-header nav a:hover,.text-link:hover,.back-link:hover,.policy-link:hover {
  color:var(--purple);
}

.contact-link {
  border:1px solid #d5d5d5;
  padding:9px 16px;
  border-radius:8px;
}

.contact-link span {
  margin-left:13px;
}

.hero {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  min-height:550px;
  padding:70px 0 85px;
  gap:15px;
}

.eyebrow {
  font-size:10px;
  letter-spacing:1.9px;
  text-transform:uppercase;
  font-weight:650;
  margin:0 0 24px;
}

.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:#8d7acb;
  border-radius:50%;
  vertical-align:middle;
  margin-right:8px;
  box-shadow:0 0 0 4px #eae5f5;
}

.hero h1 {
  font-size:clamp(50px,5.4vw,73px);
  font-weight:550;
  letter-spacing:-4px;
  line-height:1.08;
  margin:0 0 25px;
}

.hero h1>span {
  color:#88878d;
}

.hero-description {
  font-size:15px;
  line-height:1.9;
  color:#6f6f75;
  margin-bottom:28px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:13px 21px;
  border-radius:8px;
  font-weight:550;
  font-size:12px;
  transition:background .2s,transform .2s;
}

.button:hover {
  transform:translateY(-2px);
}

.primary {
  background:var(--ink);
  color:white;
}

.primary:hover {
  background:#50446b;
}

.secondary {
  border:1px solid #cdccd3;
}

.hero-signature {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:16px;
}

.hero-art {
  height:370px;
  position:relative;
  background:radial-gradient(ellipse,#e6e1f77a,transparent 68%);
}

.orbit {
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid #e1dde9;
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-25deg);
}

.orbit-one {
  width:340px;
  height:300px;
}

.orbit-two {
  width:440px;
  height:380px;
  transform:translate(-50%,-50%) rotate(28deg);
}

.floating-icon {
  position:absolute;
  filter:drop-shadow(0 15px 18px #48405923);
}

.floating-icon img {
  border-radius:24%;
}

.float-one {
  width:81px;
  left:9%;
  top:24%;
  transform:rotate(-13deg);
}

.float-two {
  width:137px;
  left:37%;
  top:14%;
  transform:rotate(10deg);
}

.float-three {
  width:99px;
  left:25%;
  top:58%;
  transform:rotate(-8deg);
}

.float-four {
  width:75px;
  right:8%;
  top:64%;
  transform:rotate(13deg);
}

.sparkle {
  position:absolute;
  right:16%;
  top:38%;
  color:var(--purple);
  font-size:69px;
  line-height:1;
}

.art-cross {
  position:absolute;
  color:#aaa5b4;
  font-size:19px;
}

.cross-one {
  top:8%;
  left:21%;
}

.cross-two {
  bottom:11%;
  left:9%;
}

.art-caption {
  position:absolute;
  top:-17px;
  right:15px;
  font-size:8px;
  letter-spacing:1.9px;
  color:#9a96a3;
}

.art-label {
  position:absolute;
  bottom:-10px;
  left:32%;
  font-size:9px;
  color:#7b7489;
  padding:7px 13px;
  background:var(--paper);
  border:1px solid #e4e1ea;
  border-radius:20px;
}

.art-label .status-dot {
  width:5px;
  height:5px;
  box-shadow:none;
}

.projects {
  padding-top:28px;
  border-top:1px solid var(--line);
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:25px;
}

.section-heading .eyebrow {
  margin-bottom:9px;
}

.section-heading h2,h2 {
  font-weight:550;
  font-size:34px;
  letter-spacing:-1.3px;
  line-height:1.2;
  margin:0;
}

.section-heading>p {
  font-size:11px;
  color:var(--muted);
  margin-bottom:6px;
}

.filter-bar {
  display:flex;
  gap:6px;
  align-items:center;
  border-top:1px solid var(--line);
  padding:18px 0 25px;
}

.filter-bar button {
  background:none;
  border:1px solid transparent;
  padding:7px 15px;
  border-radius:6px;
  font-size:11px;
  color:#77777e;
}

.filter-bar button.selected {
  background:#fff;
  border-color:#dedee3;
  color:var(--ink);
  box-shadow:0 2px 3px #25252904;
}

.filter-bar button span {
  font-size:9px;
  color:#8e879e;
  margin-left:8px;
}

.filter-note {
  margin-left:auto;
  color:#99969e;
  font-size:10px;
}

.app-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:34px 25px;
}

.project-card {
  min-width:0;
  background:white;
  border:1px solid #e6e5e5;
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .25s,box-shadow .25s;
}

.project-card:hover {
  transform:translateY(-5px);
  box-shadow:0 14px 34px #30253e0c;
}

.project-art {
  height:270px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid #00000004;
}

.tone-rose {
  background:#f1e8e9;
}

.tone-violet {
  background:#ebe7f7;
}

.tone-blue {
  background:#e8eef5;
}

.tone-sand {
  background:#efede6;
}

.tone-mint {
  background:#e6efe9;
}

.tone-peach {
  background:#f4e9de;
}

.art-category {
  position:absolute;
  top:20px;
  left:22px;
  font-size:9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#716b78;
}

.card-open {
  position:absolute;
  top:15px;
  right:18px;
  border:1px solid #77777722;
  border-radius:50%;
  width:29px;
  height:29px;
  text-align:center;
  font-size:15px;
  color:#77717e;
  transition:background .2s;
}

.project-card:hover .card-open {
  background:#ffffffb0;
}

.project-info {
  padding:23px 25px 22px;
}

.project-info>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.project-info h3 {
  font-size:20px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:-.7px;
  margin:0;
}

.platform {
  font-size:9px;
  white-space:nowrap;
  color:#77747d;
}

.project-info p {
  font-size:12px;
  color:#77747d;
  line-height:1.8;
  max-width:380px;
  margin:12px 0 17px;
  min-height:44px;
}

.text-link {
  font-size:11px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:16px;
}

.playing-cards {
  position:absolute;
  inset:70px 0 0;
  left:50%;
  width:245px;
  transform:translateX(-50%);
}

.playing-card {
  position:absolute;
  width:112px;
  height:156px;
  border-radius:11px;
  box-shadow:0 8px 14px #63404b16;
  border:1px solid #eee6e5;
  background:#fffcf9;
  font-family:Georgia,serif;
  font-size:24px;
  line-height:1;
  padding:12px;
}

.playing-card small {
  display:block;
  font-size:19px;
  margin-top:2px;
}

.playing-card b {
  font-size:65px;
  position:absolute;
  top:53px;
  left:30px;
  font-weight:400;
}

.card-back {
  left:11px;
  top:5px;
  transform:rotate(-21deg);
  background:repeating-linear-gradient(45deg,#9980b0 0 2px,#ac96bf 2px 6px);
  border:7px solid #fff8f4;
  color:white;
  text-align:center;
  font-size:69px;
  line-height:120px;
}

.card-ace {
  left:76px;
  top:-8px;
  transform:rotate(-3deg);
}

.card-heart {
  left:134px;
  top:8px;
  transform:rotate(18deg);
  color:#b14d62;
}

.code-preview {
  position:absolute;
  top:65px;
  left:50%;
  width:340px;
  transform:translateX(-50%) rotate(-3deg);
  border:1px solid #ffffff;
  border-radius:12px;
  background:#ffffff8c;
  box-shadow:0 15px 30px #79689213;
  padding:14px 18px;
  height:142px;
}

.window-dots {
  color:#c3bacf;
  font-size:8px;
  letter-spacing:2px;
}

.window-dots>span {
  float:right;
  font-size:8px;
  letter-spacing:0;
  color:#97909f;
}

.code-preview code {
  display:block;
  font-size:11px;
  line-height:1.9;
  padding-top:12px;
  color:#575062;
}

.code-preview code>span {
  color:#a078c1;
}

.code-preview em {
  color:#658775;
  font-style:normal;
}

.widget-preview {
  position:absolute;
  right:-5px;
  top:100px;
  width:216px;
  background:#fff;
  padding:14px 18px;
  border:1px solid #ece8f3;
  border-radius:12px;
  box-shadow:0 8px 20px #58427b10;
  transform:rotate(6deg);
}

.widget-preview>span {
  font-size:7px;
  letter-spacing:1.3px;
  color:#9a8caa;
  display:block;
}

.widget-preview b {
  display:block;
  font-size:16px;
  font-weight:550;
  margin-top:3px;
}

.widget-preview b span {
  float:right;
  color:#9580ca;
  font-size:22px;
}

.widget-preview small {
  font-size:6px;
  color:#929099;
}

.git-preview {
  position:absolute;
  top:72px;
  left:50%;
  transform:translateX(-50%);
  width:350px;
  background:#ffffffa6;
  border:1px solid white;
  padding:17px 20px;
  border-radius:12px;
  box-shadow:0 12px 24px #5f739610;
}

.git-line {
  display:flex;
  gap:12px;
  align-items:center;
  font-family:monospace;
  font-size:10px;
  height:34px;
}

.git-line i {
  border:2px solid #94a1bd;
  border-radius:50%;
  width:8px;
  height:8px;
  position:relative;
}

.git-line:not(:nth-child(3)) i:after {
  content:'';
  position:absolute;
  width:2px;
  height:27px;
  background:#bac3d4;
  left:1px;
  top:6px;
}

.git-line b {
  margin-left:auto;
  color:#789e86;
  font-size:9px;
}

.ai-tag {
  font-size:8px;
  color:#7d738e;
  margin-top:10px;
  border-top:1px solid #dfe4ef;
  padding-top:10px;
}

.icon-stage {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
  padding-top:20px;
  background:radial-gradient(ellipse at 50% 50%,#ffffff80,transparent 60%);
}

.icon-stage img {
  width:112px;
  height:112px;
  object-fit:contain;
  border-radius:24%;
  box-shadow:0 18px 22px #3c354015;
  transform:rotate(-7deg);
  transition:transform .3s;
}

.project-card:hover .icon-stage img {
  transform:rotate(0deg) scale(1.05);
}

.inbux-icon {
  display:block;
  font-size:65px;
  letter-spacing:-6px;
  color:white;
  font-weight:600;
  line-height:1;
  background:#8c79c4;
  padding:22px 25px;
  border-radius:26px;
  box-shadow:0 15px 25px #59467718;
}

.inbux-icon span {
  font-size:28px;
  vertical-align:top;
  letter-spacing:0;
}

.about-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  padding:85px 0;
  margin-top:80px;
  border-top:1px solid var(--line);
}

.about-section h2 {
  font-size:38px;
  line-height:1.25;
  letter-spacing:-1.5px;
}

.about-section h2 span {
  color:#908993;
}

.about-copy {
  position:relative;
  padding-top:20px;
}

.about-copy p {
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
  max-width:390px;
}

.about-copy .text-link {
  margin-top:12px;
}

.about-asterisk {
  position:absolute;
  font-size:37px;
  color:#a895d1;
  top:-20px;
  right:25px;
}

.site-footer {
  border-top:1px solid var(--line);
  min-height:105px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:9px;
  color:#87848c;
}

.site-footer .wordmark {
  font-size:19px;
  color:var(--ink);
}

.site-footer>a:last-child {
  color:var(--ink);
  font-weight:600;
}

.back-link {
  display:inline-block;
  font-size:12px;
  margin:35px 0;
}

.app-hero {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:65px;
  padding:20px 0 60px;
  align-items:center;
}

.app-hero .eyebrow {
  margin-bottom:20px;
}

.app-hero h1 {
  font-size:clamp(36px,4.6vw,62px);
  letter-spacing:-2.7px;
  line-height:1.1;
  font-weight:550;
  margin:0 0 21px;
  overflow-wrap:anywhere;
}

.app-tagline {
  font-size:27px;
  font-weight:450;
  line-height:1.3;
  letter-spacing:-.8px;
  margin:0 0 18px;
  color:#85808d;
}

.app-description {
  font-size:14px;
  color:var(--muted);
  max-width:460px;
}

.download-buttons {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:26px 0 20px;
}

.download-buttons .button {
  gap:15px;
}

.policy-link {
  font-size:11px;
  color:#79727f;
}

.availability {
  font-size:12px;
  padding:10px 15px;
  background:#ede9f4;
  border-radius:6px;
}

.app-icon-panel {
  height:370px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.app-icon-panel:before,.app-icon-panel:after {
  content:'';
  position:absolute;
  width:270px;
  height:270px;
  border:1px solid #ffffffa0;
  border-radius:50%;
}

.app-icon-panel:after {
  width:360px;
  height:360px;
}

.app-icon-panel>img {
  width:156px;
  border-radius:24%;
  filter:drop-shadow(0 20px 16px #3f355523);
  transform:rotate(-8deg);
  z-index:1;
}

.panel-caption {
  position:absolute;
  bottom:23px;
  font-size:9px;
  color:#847c8d;
  letter-spacing:.5px;
}

.app-section-nav {
  display:flex;
  gap:30px;
  border-block:1px solid var(--line);
  padding:18px 0;
  font-size:12px;
}

.app-section-nav a:hover {
  color:var(--purple);
}

.app-overview {
  padding:65px 0;
  max-width:820px;
}

.app-overview>p:not(.eyebrow) {
  color:var(--muted);
  font-size:15px;
  max-width:660px;
}

.feature-content {
  font-size:14px;
  line-height:1.8;
  color:#6d6874;
}

.feature-content h3 {
  font-size:19px;
  color:var(--ink);
  margin-top:35px;
}

.feature-content li {
  margin-bottom:10px;
}

.app-screenshot {
  margin-top:32px;
  border:1px solid var(--line);
  border-radius:12px;
}

.privacy-section {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:60px;
  border-top:1px solid var(--line);
  padding:65px 0;
}

.policy-heading h2 {
  font-size:29px;
}

.policy-heading>p:not(.eyebrow) {
  color:var(--muted);
  font-size:12px;
}

.policy-heading .text-link {
  margin-top:12px;
  color:var(--purple);
}

.policy-body {
  max-width:740px;
  min-width:0;
  font-size:13px;
  line-height:1.9;
  color:#6a6670;
  overflow-wrap:anywhere;
}

.policy-body h2 {
  font-size:22px;
  line-height:1.35;
  color:var(--ink);
  letter-spacing:-.5px;
}

.policy-body h3 {
  font-size:16px;
  color:var(--ink);
  margin:28px 0 9px;
  line-height:1.5;
}

.policy-body h4 {
  color:var(--ink);
}

.policy-body a {
  color:#6d55b0;
  text-decoration:underline;
  text-underline-offset:3px;
}

.policy-body p {
  margin:12px 0;
}

.policy-body ul,.policy-body ol {
  padding-left:22px;
}

.policy-body table {
  display:block;
  overflow:auto;
}

.support-section {
  padding:40px;
  background:#eeebf3;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-bottom:65px;
}

.support-section .eyebrow {
  margin-bottom:14px;
}

.support-section p:not(.eyebrow) {
  font-size:12px;
  color:var(--muted);
  margin-bottom:0;
}

.not-found {
  padding:100px 0;
}

.not-found h1 {
  font-size:60px;
  line-height:1.1;
  font-weight:500;
  letter-spacing:-3px;
}

.sr-only,.skip-link:not(:focus) {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link:focus {
  position:fixed;
  top:10px;
  left:10px;
  background:white;
  padding:10px;
  z-index:10;
}

@media(max-width:900px) {
  .shell {
    padding-inline:28px;
  }
  .hero {
    grid-template-columns:1.2fr 1fr;
    min-height:480px;
  }
  .hero h1 {
    font-size:56px;
    letter-spacing:-3px;
  }
  .hero-art {
    transform:scale(.8);
    transform-origin:center right;
  }
  .hero-description br {
    display:none;
  }
  .hero-description {
    max-width:320px;
  }
  .orbit-two {
    width:350px;
  }
  .art-caption {
    display:none;
  }
  .hero-art .float-two {
    left:28%;
  }
  .hero-art .float-three {
    left:15%;
  }
  .project-info>div {
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }
  .project-art {
    height:250px;
  }
  .code-preview {
    width:275px;
  }
  .git-preview {
    width:280px;
  }
  .app-hero {
    gap:30px;
  }
  .app-icon-panel {
    height:320px;
  }
  .privacy-section {
    gap:35px;
    grid-template-columns:1fr 1.8fr;
  }
  .site-footer {
    flex-wrap:wrap;
    padding-block:28px;
  }
  .site-footer>span:first-of-type {
    display:none;
  }
}

@media(max-width:600px) {
  .shell {
    padding-inline:22px;
  }
  .site-header {
    height:83px;
  }
  .site-header .wordmark {
    font-size:21px;
  }
  .brand-mark {
    width:27px;
    height:28px;
    font-size:24px;
    line-height:30px;
    margin-right:8px;
  }
  .site-header nav {
    gap:17px;
    font-size:11px;
  }
  .contact-link {
    border:0;
    padding:0;
  }
  .contact-link span {
    margin-left:3px;
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:49px 0 40px;
    gap:15px;
  }
  .hero h1 {
    font-size:57px;
    letter-spacing:-3.5px;
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.5px;
  }
  .hero-description {
    font-size:13px;
    max-width:300px;
  }
  .hero-art {
    height:280px;
    width:100%;
    max-width:370px;
    margin:12px auto 0;
    transform:scale(.85);
    transform-origin:center;
  }
  .orbit-one {
    height:250px;
    width:290px;
  }
  .orbit-two {
    height:310px;
    width:355px;
  }
  .float-one {
    left:4%;
    top:14%;
    width:67px;
  }
  .hero-art .float-two {
    left:36%;
    top:4%;
    width:110px;
  }
  .hero-art .float-three {
    left:22%;
    top:57%;
    width:86px;
  }
  .float-four {
    right:6%;
    width:68px;
  }
  .sparkle {
    font-size:55px;
    right:10%;
    top:32%;
  }
  .art-label {
    left:24%;
    bottom:-16px;
  }
  .projects {
    padding-top:25px;
  }
  .section-heading {
    display:block;
    margin-bottom:16px;
  }
  .section-heading h2 {
    font-size:30px;
  }
  .section-heading>p {
    margin-top:12px;
  }
  .filter-note {
    display:none;
  }
  .filter-bar {
    padding-bottom:20px;
  }
  .app-grid {
    grid-template-columns:1fr;
    gap:22px;
  }
  .project-art {
    height:245px;
  }
  .project-info {
    padding:22px;
  }
  .project-info>div {
    flex-direction:row;
    align-items:center;
  }
  .project-info h3 {
    font-size:19px;
  }
  .project-info p {
    min-height:0;
  }
  .platform {
    font-size:8px;
  }
  .code-preview {
    width:280px;
  }
  .git-preview {
    width:285px;
  }
  .about-section {
    grid-template-columns:1fr;
    gap:24px;
    margin-top:50px;
    padding:45px 0;
  }
  .about-section h2 {
    font-size:32px;
  }
  .about-copy {
    padding-top:0;
  }
  .about-asterisk {
    top:-38px;
    right:0;
  }
  .site-footer {
    column-gap:12px;
    row-gap:15px;
    justify-content:space-between;
  }
  .site-footer .wordmark {
    width:100%;
  }
  .app-hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:8px 0 35px;
    gap:30px;
  }
  .back-link {
    margin:24px 0;
  }
  .app-hero h1 {
    font-size:43px;
    letter-spacing:-2px;
  }
  .app-tagline {
    font-size:25px;
  }
  .app-icon-panel {
    height:260px;
  }
  .app-icon-panel img {
    width:132px;
  }
  .app-section-nav {
    font-size:11px;
    gap:25px;
  }
  .app-overview {
    padding:40px 0;
  }
  .app-overview h2 {
    font-size:27px;
  }
  .privacy-section {
    grid-template-columns:1fr;
    gap:30px;
    padding:40px 0;
  }
  .policy-body {
    font-size:13px;
  }
  .support-section {
    padding:28px 24px;
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:40px;
  }
  .support-section h2 {
    font-size:27px;
  }
  .not-found h1 {
    font-size:44px;
  }
  .download-buttons .button {
    font-size:11px;
    padding:12px 16px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important;
  }
}

/* Keep decorative orbits inside the layout on narrow screens. */
.hero {
  overflow: hidden;
}
@media (max-width: 380px) {
  .site-header .wordmark {
    font-size: 18px;
  }
  .site-header nav {
    gap: 12px;
    font-size: 10px;
    white-space: nowrap;
  }
  .brand-mark {
    width: 24px;
    height: 26px;
    margin-right: 6px;
  }
  .hero h1 {
    font-size: 46px;
    letter-spacing: -2.8px;
  }
  .project-info > div {
    flex-direction: column;
    align-items: flex-start;
  }
  .git-preview {
    width: calc(100% - 30px);
    padding-inline: 12px;
  }
  .git-line {
    font-size: 8px;
  }
}

/* Screenshots are discovered per app; existing artwork is the fallback. */
.card-screenshots {
  position: absolute;
  inset: 60px 28px -40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 15px;
}
.card-screenshots img {
  width: 120px;
  height: auto;
  max-width: none;
  flex-shrink: 0;
  object-fit: contain;
  object-position: top;
  border: 0;
  border-radius: 13px;
  box-shadow: 0 12px 24px #30253e22;
  transform: translateY(15px) rotate(-7deg);
  transition: transform .3s;
}
.card-screenshots img:nth-child(2) {
  transform: translateY(0);
  z-index: 1;
}
.card-screenshots img:nth-child(3) {
  transform: translateY(15px) rotate(7deg);
}
.project-card:hover .card-screenshots img {
  transform: translateY(-5px);
}
.card-screenshots.landscape {
  inset: 60px 40px -35px;
}
.card-screenshots.landscape img {
  width: 100%;
  height: auto;
  max-width: 100%;
  transform: rotate(-4deg);
  border-radius: 9px;
}
.card-screenshots.landscape img:not(:first-child) {
  display: none;
}
.screenshot-section {
  margin: 0 0 42px;
}
.screenshot-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.screenshot-heading h2 {
  font-size: 24px;
  letter-spacing: -.8px;
}
.screenshot-heading > span {
  color: var(--muted);
  font-size: 11px;
}
.screenshot-gallery {
  display: flex;
  gap: 24px;
  padding: 32px;
  overflow-x: auto;
  border-radius: 20px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 32px;
}
.gallery-image {
  flex: 0 0 auto;
  scroll-snap-align: start;
  border-radius: 14px;
  box-shadow: 0 8px 20px #30253e14;
}
.gallery-image img {
  height: 420px;
  width: auto;
  max-width: none;
  border-radius: inherit;
}
.gallery-image.landscape {
  max-width: 100%;
  align-self: center;
}
.gallery-image.landscape img {
  max-width: 100%;
  height: auto;
  max-height: 520px;
}
@media (max-width: 600px) {
  .card-screenshots {
    gap: 8px;
    inset-inline: 18px;
  }
  .card-screenshots img {
    width: 104px;
    height: auto;
    border-radius: 10px;
  }
  .card-screenshots.landscape {
    inset-inline: 22px;
  }
  .screenshot-heading {
    flex-direction: column;
    gap: 8px;
  }
  .screenshot-gallery {
    padding: 20px;
    gap: 16px;
    scroll-padding-inline: 20px;
  }
  .gallery-image img {
    height: 360px;
  }
}

.media-panel::before, .media-panel::after {
  pointer-events: none;
}
.media-entry {
  position: absolute;
  display: block;
  z-index: 1;
}
.media-cover {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.media-cover.media-icon img {
  width: 156px;
  border-radius: 24%;
  transform: rotate(-8deg);
  filter: drop-shadow(0 20px 16px #3f355523);
  transition: transform .2s;
}
.media-cover:hover img {
  transform: rotate(0deg) scale(1.04);
}
.media-cover.media-screen img {
  width: auto;
  max-width: 250px;
  max-height: 260px;
  border-radius: 12px;
}
.media-panel .media-peek {
  top: 50%;
  left: calc(100% - 70px);
  transform: translateY(-50%) rotate(5deg);
  pointer-events: auto;
  mask-image: linear-gradient(to right, black 0%, transparent 90%);
}
.media-panel .media-peek img {
  height: 250px;
  width: auto;
  max-width: none;
  border-radius: 12px;
  border: 0;
}
.media-extra {
  display: none;
}
.media-open-next {
  position: absolute;
  z-index: 2;
  right: 17px;
  top: calc(50% - 21px);
  width: 42px;
  height: 42px;
  border: 1px solid #ffffffb0;
  background: #ffffffd9;
  color: var(--ink);
  border-radius: 50%;
  box-shadow: 0 4px 18px #30253e10;
  font-size: 20px;
}
.viewer-open {
  overflow: hidden;
}
.image-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 20px max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom));
  border: 0;
  background: #17151beF;
  color: #fff;
  backdrop-filter: blur(18px);
}
.image-viewer::backdrop {
  background: #17151bd9;
}
.image-viewer[open] {
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) 70px;
  gap: 12px;
}
.viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.image-viewer button {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid #ffffff30;
  border-radius: 50%;
  background: #ffffff0c;
  color: white;
  font-size: 20px;
}
.image-viewer button:hover {
  background: #ffffff25;
}
.viewer-stage {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y pinch-zoom;
}
.viewer-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
}
.viewer-image.is-icon {
  max-width: min(65vw, 400px);
  max-height: min(65vh, 400px);
  border-radius: 24%;
}
.viewer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.viewer-status {
  text-align: center;
  font-size: 12px;
  min-width: 150px;
}
.viewer-status span {
  display: block;
}
.viewer-count {
  color: #bbb5c7;
  font-size: 11px;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .media-cover.media-icon img {
    width: 132px;
  }
  .media-panel .media-peek {
    left: calc(100% - 48px);
  }
  .media-panel .media-peek img {
    height: 195px;
  }
  .media-open-next {
    right: 10px;
  }
  .viewer-controls {
    gap: 14px;
  }
  .image-viewer {
    padding-top: max(12px, env(safe-area-inset-top));
  }
}

/* Keep the app name and icon together at every card width. */
.project-info > .project-title-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.project-title {
  min-width: 0;
}
.project-title .platform {
  display: block;
  margin-top: 7px;
  white-space: normal;
}
.project-title-row > .card-app-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 11px;
}

.media-leaving {
  pointer-events: none;
  z-index: 2;
}
.media-open-next:disabled {
  cursor: default;
}

/* Desktop captures are unstyled originals. Portrait captures get a phone body. */
.card-screenshots img.screenshot-landscape:not(.screenshot-framed),
.media-panel .media-screen.screenshot-landscape:not(.screenshot-framed) img,
.viewer-image:not(.is-icon):not(.is-portrait) {
  border: none;
  outline: none;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  background: transparent;
}
.card-screenshots img.screenshot-framed,
.media-panel .media-screen.screenshot-framed img,
.viewer-image.is-portrait {
  border: 7px solid var(--phone-frame);
  border-radius: 21px;
  background: var(--phone-frame);
  box-shadow: none;
  filter: none;
}
.media-panel .media-screen.screenshot-framed img {
  border-width: 9px;
  border-radius: 25px;
}
.viewer-image.is-portrait {
  border-width: 12px;
  border-radius: 34px;
}
.card-screenshots.landscape img,
.project-card:hover .card-screenshots.landscape img {
  transform: none;
}

:root {
  --phone-frame: #fff;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #151419;
  --ink: #f0edf4;
  --muted: #aaa4b3;
  --line: #34313c;
  --purple: #b6a0f5;
  --violet: #30283f;
  --phone-frame: #19181c;
  color-scheme: dark;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  font-size: 22px;
}
.theme-sun { display: none; }
[data-theme="dark"] .theme-sun { display: inline; }
[data-theme="dark"] .theme-moon { display: none; }
[data-theme="dark"] .project-card,
[data-theme="dark"] .filter-bar button.selected {
  background: #201e26;
  border-color: var(--line);
}
[data-theme="dark"] .tone-rose { background: #362a31; }
[data-theme="dark"] .tone-violet { background: #2e283e; }
[data-theme="dark"] .tone-blue { background: #252e3b; }
[data-theme="dark"] .tone-sand { background: #333027; }
[data-theme="dark"] .tone-mint { background: #24352f; }
[data-theme="dark"] .tone-peach { background: #3b2e27; }
[data-theme="dark"] .primary {
  background: #d4c5fa;
  color: #231d30;
}
[data-theme="dark"] .primary:hover { background: #e3d8ff; }
[data-theme="dark"] .brand-mark { background: #393043; }
[data-theme="dark"] .hero h1 > span,
[data-theme="dark"] .about-section h2 span,
[data-theme="dark"] .app-tagline { color: #b5aabe; }
[data-theme="dark"] .hero-description,
[data-theme="dark"] .project-info p,
[data-theme="dark"] .platform,
[data-theme="dark"] .art-category,
[data-theme="dark"] .panel-caption,
[data-theme="dark"] .policy-body,
[data-theme="dark"] .feature-content,
[data-theme="dark"] .policy-link,
[data-theme="dark"] .filter-bar button,
[data-theme="dark"] .filter-note,
[data-theme="dark"] .art-label,
[data-theme="dark"] .card-open { color: var(--muted); }
[data-theme="dark"] .policy-body a { color: var(--purple); }
[data-theme="dark"] .support-section,
[data-theme="dark"] .availability { background: #2c2638; }
[data-theme="dark"] .contact-link,
[data-theme="dark"] .secondary,
[data-theme="dark"] .art-label,
[data-theme="dark"] .orbit { border-color: #494050; }
[data-theme="dark"] .hero-art { background: radial-gradient(ellipse, #4b366b45, transparent 68%); }
[data-theme="dark"] .icon-stage { background: radial-gradient(ellipse, #ffffff08, transparent 60%); }
[data-theme="dark"] .app-icon-panel::before,
[data-theme="dark"] .app-icon-panel::after { border-color: #ffffff0d; }
[data-theme="dark"] .code-preview,
[data-theme="dark"] .git-preview,
[data-theme="dark"] .widget-preview {
  background: #24212de8;
  border-color: #54465e;
}
[data-theme="dark"] .code-preview code,
[data-theme="dark"] .widget-preview small,
[data-theme="dark"] .widget-preview > span,
[data-theme="dark"] .window-dots > span,
[data-theme="dark"] .ai-tag { color: #b9b0c7; }
[data-theme="dark"] .code-preview code > span { color: #c6a0ed; }
[data-theme="dark"] .code-preview em { color: #9acbb1; }
[data-theme="dark"] .ai-tag { border-color: var(--line); }
[data-theme="dark"] .media-open-next {
  color: var(--ink);
  background: #24212de8;
  border-color: #635471;
}
[data-theme="dark"] .project-card:hover .card-open { background: #ffffff12; }
@media (max-width: 600px) {
  .site-header nav { gap: 12px; }
  .theme-toggle { width: 32px; height: 32px; font-size: 19px; }
}
@media (max-width: 380px) {
  .site-header nav { gap: 9px; }
  .contact-link { display: none; }
}

/* Optional rounding for screenshots without a phone frame. */
.card-screenshots img.screenshot-landscape.screenshot-rounded:not(.screenshot-framed),
.media-panel .media-screen.screenshot-landscape.screenshot-rounded:not(.screenshot-framed) img,
.viewer-image.is-rounded:not(.is-icon):not(.is-portrait) {
  border-radius: 12px;
}

/* Reserve room for the indicator's outer ring inside the clipped hero. */
.hero-copy > .eyebrow .status-dot {
  margin-left: 5px;
}
.hero h1 {
  font-size: clamp(42px, 4.6vw, 64px);
  letter-spacing: -3px;
}
@media (max-width: 600px) {
  .hero h1 {
    font-size: clamp(36px, 10.5vw, 56px);
    letter-spacing: -2px;
  }
}