@charset "UTF-8";
@font-face {
  font-family:"Inter";
  src:url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
:root {
  color-scheme:light;
  --ink:#191b22;
  --muted:#606572;
  --line:#e1e4eb;
  --blue:#2456c7;
  --wash:#f5f6f9;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none;
  background:#fff;
  color:var(--ink);
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:32px;
}
body {
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main {
  flex:1;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
a {
  color:var(--blue);
  text-underline-offset:.25em;
}
a:hover {
  text-decoration-thickness:2px;
}
a:focus-visible,summary:focus-visible {
  outline:3px solid #477de4;
  outline-offset:5px;
  border-radius:4px;
}
h1,h2,h3,p,figure {
  margin:0;
}
h1,h2,h3 {
  text-wrap:balance;
}
p {
  line-height:1.65;
}
h1 {
  font-size:clamp(3rem,7.2vw,6.5rem);
  line-height:1.12;
  font-weight:600;
}
h2 {
  font-size:clamp(2rem,4vw,3.25rem);
  line-height:1.12;
  font-weight:620;
}
h3 {
  font-size:1.3rem;
  line-height:1.3;
}
::selection {
  background:#d9e6ff;
}
.shell {
  width:min(1120px,calc(100% - 64px));
  margin-inline:auto;
}
.skip-link {
  position:absolute;
  z-index:20;
  top:12px;
  left:12px;
  transform:translateY(-180%);
  padding:12px 20px;
  background:white;
}
.skip-link:focus {
  transform:translateY(0);
}
.site-header {
  border-bottom:1px solid var(--line);
}
.header-inner {
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.wordmark {
  font-size:1.35rem;
  font-weight:650;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.wordmark::after {
  content:".";
  color:var(--blue);
}
nav {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:28px;
}
nav a {
  font-size:.875rem;
  font-weight:500;
  color:var(--muted);
  text-decoration:none;
  padding-block:12px;
}
nav a:hover,nav a[aria-current=page] {
  color:var(--ink);
}
nav a[aria-current=page] {
  text-decoration:underline;
  text-underline-offset:8px;
}
.nav-action {
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:30px;
  padding:10px 18px;
}
.eyebrow {
  font-size:.875rem;
  font-weight:600;
  color:var(--muted);
  margin-bottom:20px;
}
.studio-hero {
  padding:90px 0 68px;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:72px;
  align-items:end;
}
.studio-hero h1 {
  font-size:clamp(3rem,5.6vw,5rem);
}
.studio-hero h1 span {
  color:#777e8e;
}
.studio-intro {
  padding-bottom:6px;
}
.studio-intro p {
  font-size:1.125rem;
  color:var(--muted);
  max-width:360px;
}
.inline-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:550;
}
.inline-link .arrow {
  transition:transform .18s ease;
}
.inline-link:hover .arrow {
  transform:translateX(4px);
}
.studio-intro .inline-link {
  margin-top:24px;
}
.section-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}
.section-heading h2 {
  font-size:.875rem;
  font-weight:600;
}
.section-heading p {
  font-size:.875rem;
  color:var(--muted);
}
.work {
  padding-bottom:84px;
}
.feature-product {
  background:#111b35;
  color:#fff;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-radius:28px;
  overflow:hidden;
  min-height:455px;
}
.product-copy {
  padding:52px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.product-label {
  font-size:.875rem;
  margin-bottom:28px;
  color:inherit;
  opacity:.75;
}
.feature-product h2 {
  font-size:2rem;
  margin-bottom:12px;
}
.product-headline {
  font-size:clamp(2rem,3.7vw,3rem);
  font-weight:600;
  line-height:1.14;
  max-width:400px;
}
.product-description {
  font-size:1.0625rem;
  margin-top:22px;
  max-width:400px;
  color:#c8d0e2;
}
.product-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;
  margin-top:30px;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:28px;
  background:var(--blue);
  color:white;
  text-decoration:none;
  font-size:.9375rem;
  font-weight:550;
  line-height:1.4;
  transition:background .18s ease,transform .18s ease;
}
.button:hover {
  background:#173e99;
  transform:translateY(-1px);
}
.button.light {
  color:#192c55;
  background:#fff;
}
.button.light:hover {
  background:#e4ebfa;
}
.feature-product .inline-link {
  color:#e1e8fa;
}
.agentic-art {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px;
  background:radial-gradient(ellipse at 65% 48%,#384877 0,transparent 68%),linear-gradient(145deg,#182c52,#0d1428);
  overflow:hidden;
}
.agentic-art img {
  width:300px;
  border-radius:24%;
  transform:rotate(-8deg);
  box-shadow:0 32px 65px #02091666;
  border:1px solid #ffffff40;
  transition:transform .4s ease;
}
.feature-product:hover .agentic-art img {
  transform:rotate(-5deg) translateY(-5px);
}
.product-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:24px;
}
.product-card {
  border:1px solid var(--line);
  border-radius:26px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#fff;
}
.product-visual {
  height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.guandan-visual {
  background:#fff0cc;
}
.guandan-visual img {
  width:260px;
  transition:transform .3s ease;
}
.product-card:hover .guandan-visual img {
  transform:translateY(-5px);
}
.flut-visual {
  background:#e8effa;
  padding:28px 24px 0;
  align-items:flex-start;
}
.flut-visual img {
  width:100%;
  border-radius:12px;
  box-shadow:0 18px 32px #2839551c;
}
.product-card .product-copy {
  padding:36px;
  flex:1;
}
.product-card .product-label {
  color:var(--muted);
  opacity:1;
  margin-bottom:16px;
}
.product-title {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.product-title img {
  width:36px;
  height:36px;
  object-fit:contain;
}
.product-title h3 {
  font-size:2rem;
}
.product-card .product-description {
  color:var(--muted);
  margin-top:0;
}
.product-details {
  display:flex;
  gap:10px 16px;
  flex-wrap:wrap;
  margin-top:24px;
  padding:0;
  list-style:none;
  font-size:.875rem;
  color:var(--muted);
}
.product-card .product-actions {
  margin-top:auto;
  padding-top:26px;
}
.studio-note {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  border-top:1px solid var(--line);
  padding:64px 0 80px;
}
.studio-note h2 {
  font-size:2.25rem;
  max-width:380px;
}
.studio-note p {
  color:var(--muted);
  font-size:1.0625rem;
}
.studio-note .studio-joke {
  margin-top:24px;
  font-size:.9375rem;
  color:var(--ink);
}
.studio-note .eyebrow,
.section-intro .eyebrow {
  font-size:.875rem;
  margin:0 0 20px;
}
.site-footer {
  border-top:1px solid var(--line);
  background:var(--wash);
}
.footer-main {
  padding:36px 0;
  display:flex;
  justify-content:space-between;
  gap:32px;
  align-items:center;
}
.footer-brand p {
  color:var(--muted);
  font-size:.875rem;
  margin-top:8px;
}
.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:16px 24px;
}
.footer-links a {
  color:var(--muted);
  font-size:.875rem;
  text-decoration:none;
}
.footer-links a:hover {
  color:var(--ink);
  text-decoration:underline;
}
.product-identity {
  display:flex;
  align-items:center;
  gap:12px;
}
.product-identity>a {
  flex-shrink:0;
}
.product-identity img {
  width:40px;
  height:40px;
  border-radius:11px;
}
.product-brand {
  display:block;
  font-weight:650;
  color:var(--ink);
  font-size:1rem;
  text-decoration:none;
}
.studio-credit {
  color:var(--muted);
  font-size:.8125rem;
  text-decoration:none;
  display:block;
  margin-top:2px;
}
.product-header .button {
  padding:9px 18px;
  min-height:40px;
  font-size:.875rem;
}
.agentic-hero {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:64px;
  align-items:center;
  padding:88px 0 60px;
}
.agentic-hero h1 {
  font-size:clamp(3rem,6.2vw,5.5rem);
}
.agentic-hero .lead {
  font-size:1.1875rem;
  color:var(--muted);
  margin-top:28px;
  max-width:570px;
}
.agentic-hero .product-actions {
  margin-top:30px;
}
.fine-print {
  font-size:.875rem;
  color:var(--muted);
  margin-top:16px;
}
.app-portrait {
  aspect-ratio:1;
  border-radius:32px;
  background:linear-gradient(140deg,#eef4ff,#e5e9f6);
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:50px;
}
.app-portrait img {
  width:100%;
  max-width:290px;
  border-radius:24%;
  transform:rotate(-7deg);
  box-shadow:18px 28px 45px #4c66932e;
}
.capability-strip {
  border-block:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:24px 0;
  gap:28px;
}
.capability-strip div {
  font-size:.9375rem;
  color:var(--muted);
  line-height:1.5;
}
.capability-strip strong {
  display:block;
  color:var(--ink);
  font-size:1rem;
  margin-bottom:5px;
}
.section {
  padding-block:84px;
}
.section-intro {
  max-width:670px;
  margin-bottom:44px;
}
.section-intro p {
  font-size:1.125rem;
  color:var(--muted);
  margin-top:20px;
}
.benefits {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 64px;
}
.benefit {
  padding:28px 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:34px 1fr;
  gap:16px;
}
.benefit svg {
  width:25px;
  height:25px;
  stroke:var(--blue);
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin-top:2px;
}
.benefit p {
  color:var(--muted);
  font-size:1rem;
  margin-top:12px;
  max-width:410px;
}
.ownership {
  background:#111b35;
  color:white;
  padding:64px;
  border-radius:28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  margin-bottom:84px;
}
.ownership .eyebrow {
  color:#b9c9e9;
}
.ownership h2 {
  font-size:2.5rem;
}
.ownership p {
  color:#c8d0e2;
  font-size:1rem;
  margin-top:22px;
}
.ownership a {
  color:#dce8ff;
  margin-top:24px;
}
.connection-diagram {
  padding:28px;
  border:1px solid #ffffff26;
  border-radius:20px;
  background:#ffffff05;
}
.diagram-client {
  display:flex;
  align-items:center;
  gap:16px;
}
.diagram-client img {
  height:52px;
  width:52px;
  border-radius:14px;
}
.diagram-client strong,.diagram-server strong {
  display:block;
  font-size:1rem;
}
.diagram-client span,.diagram-server span {
  font-size:.875rem;
  color:#bac7e0;
  line-height:1.5;
  display:block;
  margin-top:4px;
}
.diagram-connection {
  margin:18px 0;
  padding:14px 0;
  border-block:1px solid #ffffff26;
  color:#bac7e0;
  font-size:.875rem;
}
.diagram-server {
  background:#ffffff0b;
  border-radius:12px;
  padding:20px;
}
.start-panel {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
  padding:0 0 84px;
}
.start-panel h2 {
  font-size:2.25rem;
}
.start-panel p {
  margin-top:16px;
  color:var(--muted);
  max-width:590px;
}
.start-panel .product-actions {
  margin-top:0;
  flex-shrink:0;
}
.document-heading {
  padding:60px 0 40px;
  border-bottom:1px solid var(--line);
}
.document-heading h1 {
  font-size:clamp(2.75rem,5.3vw,4.5rem);
}
.document-heading .lead {
  font-size:1.125rem;
  color:var(--muted);
  max-width:720px;
  margin-top:22px;
}
.meta {
  font-size:.875rem;
  color:var(--muted);
  margin-top:16px;
}
.document-grid {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:72px;
  padding-block:44px 88px;
  align-items:start;
}
.document-aside {
  position:sticky;
  top:32px;
}
.document-aside>p {
  font-size:.875rem;
  font-weight:600;
  margin-bottom:16px;
}
.document-aside nav {
  display:flex;
  align-items:stretch;
  flex-direction:column;
  gap:2px;
}
.document-aside nav a {
  padding:8px 0;
  font-size:.875rem;
  line-height:1.4;
}
.aside-contact {
  border-top:1px solid var(--line);
  margin-top:26px;
  padding-top:24px;
}
.aside-contact p,.aside-contact a {
  font-size:.875rem;
  overflow-wrap:anywhere;
}
.aside-contact p {
  color:var(--muted);
  margin-bottom:8px;
}
.article {
  width:100%;
  min-width:0;
  max-width:760px;
}
.article section {
  margin-top:40px;
  scroll-margin-top:32px;
}
.article section:first-child {
  margin-top:0;
}
.article h2 {
  font-size:1.5rem;
  line-height:1.3;
  margin-bottom:16px;
}
.article h3 {
  font-size:1.0625rem;
  margin:22px 0 8px;
}
.article p,.article li {
  font-size:1rem;
  color:#515866;
  line-height:1.75;
}
.article p+p {
  margin-top:16px;
}
.article ul,.article ol {
  padding-left:22px;
  margin:16px 0;
}
.article li+li {
  margin-top:10px;
}
.article a {
  overflow-wrap:anywhere;
}
.summary-box {
  padding:28px 30px;
  background:#eff4ff;
  border:1px solid #dce7fa;
  border-radius:18px;
}
.summary-box p {
  color:#384966;
}
.summary-box h2 {
  font-size:1.25rem;
  margin-bottom:12px;
}
.contact-box {
  padding:30px;
  background:#eff4ff;
  border:1px solid #dce7fa;
  border-radius:18px;
}
.contact-box h2 {
  margin-bottom:12px;
}
.contact-box .product-actions {
  margin-top:22px;
  gap:16px;
}
.contact-box .button {
  color:white;
}
.email {
  font-size:.9375rem;
}
.steps {
  list-style:none;
  padding:0!important;
  counter-reset:step;
}
.steps li {
  counter-increment:step;
  position:relative;
  padding-left:46px;
  margin-top:24px!important;
}
.steps li:before {
  content:counter(step);
  position:absolute;
  left:0;
  top:0;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--wash);
  border:1px solid var(--line);
  color:var(--ink);
  display:grid;
  place-items:center;
  font-size:.875rem;
  font-weight:600;
}
.steps li > strong:first-child {
  display:block;
  color:var(--ink);
}
code {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.9em;
  background:#eff1f6;
  border-radius:4px;
  padding:2px 5px;
  overflow-wrap:anywhere;
}
pre {
  max-width:100%;
  padding:20px;
  border-radius:12px;
  background:#151e32;
  color:#e3ecff;
  overflow-x:auto;
  font-size:.875rem;
  line-height:1.7;
  margin:18px 0;
}
pre code {
  background:none;
  padding:0;
  color:inherit;
}
.faq {
  border-top:1px solid var(--line);
}
.faq details {
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.faq summary {
  cursor:pointer;
  font-size:1.0625rem;
  font-weight:550;
  line-height:1.5;
  padding-right:8px;
}
.faq details p {
  margin-top:14px;
}
.policy-note {
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.policy-note p {
  font-size:.875rem;
}
@media(min-width:1450px) {
  .shell {
    width:min(1200px,calc(100% - 96px));
  }
  .studio-hero {
    padding-top:110px;
  }
  .feature-product {
    min-height:475px;
  }
}
@media(max-width:900px) {
  .studio-hero {
    gap:36px;
    grid-template-columns:1.2fr 1fr;
  }
  .product-copy {
    padding:36px;
  }
  .agentic-art {
    padding:40px;
  }
  .agentic-art img {
    width:250px;
  }
  .agentic-hero {
    gap:36px;
    padding-top:64px;
  }
  .app-portrait {
    padding:36px;
  }
  .ownership {
    padding:40px;
    gap:36px;
  }
  .document-grid {
    grid-template-columns:180px minmax(0,1fr);
    gap:36px;
  }
  .product-visual {
    height:240px;
  }
  .guandan-visual img {
    width:210px;
  }
  .product-card .product-copy {
    padding:28px;
  }
  .studio-note {
    gap:40px;
  }
  .start-panel {
    display:block;
  }
  .start-panel .product-actions {
    margin-top:28px;
  }
}
@media(max-width:680px) {
  .shell {
    width:calc(100% - 40px);
  }
  .header-inner {
    min-height:76px;
    gap:16px;
  }
  nav {
    gap:18px;
  }
  .studio-header .header-inner {
    flex-wrap:wrap;
    padding-block:16px;
    gap:12px;
  }
  .studio-header nav {
    width:100%;
    justify-content:space-between;
    gap:12px;
  }
  .studio-hero {
    display:block;
    padding:56px 0 44px;
  }
  .studio-hero h1 {
    font-size:clamp(3rem,10vw,4rem);
  }
  .studio-intro {
    margin-top:28px;
  }
  .studio-intro p {
    max-width:490px;
    font-size:1.0625rem;
  }
  .section-heading {
    margin-bottom:18px;
  }
  .section-heading p {
    display:none;
  }
  .feature-product {
    grid-template-columns:1fr;
  }
  .product-copy {
    padding:32px;
  }
  .feature-product h2 {
    font-size:1.75rem;
  }
  .product-headline {
    font-size:2.25rem;
  }
  .product-label {
    margin-bottom:20px;
  }
  .agentic-art {
    min-height:300px;
    padding:34px;
  }
  .agentic-art img {
    width:225px;
  }
  .product-pair {
    grid-template-columns:1fr;
    gap:20px;
    margin-top:20px;
  }
  .product-visual {
    height:280px;
  }
  .guandan-visual img {
    width:240px;
  }
  .flut-visual {
    padding:24px 24px 0;
  }
  .product-card .product-copy {
    padding:30px;
  }
  .work {
    padding-bottom:56px;
  }
  .studio-note {
    grid-template-columns:1fr;
    gap:24px;
    padding:44px 0 56px;
  }
  .studio-note h2 {
    font-size:2rem;
  }
  .footer-main {
    align-items:flex-start;
    flex-direction:column;
    gap:24px;
    padding-block:28px;
  }
  .product-header .header-inner {
    flex-wrap:wrap;
    padding-block:16px;
    gap:12px;
  }
  .product-header nav {
    width:100%;
    justify-content:space-between;
    gap:12px;
  }
  .product-header nav a {
    font-size:.875rem;
    padding-block:10px;
  }
  .product-header .button {
    font-size:.875rem;
    min-height:38px;
    padding:8px 12px;
  }
  .agentic-hero {
    grid-template-columns:1fr;
    padding:48px 0 36px;
    gap:36px;
  }
  .agentic-hero h1 {
    font-size:clamp(3rem,11vw,4.5rem);
  }
  .agentic-hero .lead {
    font-size:1.125rem;
    margin-top:24px;
  }
  .app-portrait {
    aspect-ratio:1.3;
    max-height:340px;
  }
  .app-portrait img {
    width:230px;
    max-width:85%;
  }
  .capability-strip {
    grid-template-columns:1fr;
    gap:18px;
  }
  .capability-strip strong {
    margin-bottom:2px;
  }
  .section {
    padding-block:56px;
  }
  .section-intro {
    margin-bottom:30px;
  }
  .benefits {
    grid-template-columns:1fr;
    gap:0;
  }
  .benefit {
    padding:24px 0;
    gap:12px;
  }
  .ownership {
    grid-template-columns:1fr;
    padding:30px;
    gap:32px;
    margin-bottom:56px;
  }
  .ownership h2 {
    font-size:2rem;
  }
  .connection-diagram {
    padding:20px;
  }
  .start-panel {
    padding-bottom:56px;
  }
  .start-panel h2 {
    font-size:2rem;
  }
  .document-heading {
    padding:40px 0 32px;
  }
  .document-grid {
    grid-template-columns:1fr;
    gap:32px;
    padding-block:28px 56px;
  }
  .document-aside {
    position:static;
    border-bottom:1px solid var(--line);
    padding-bottom:24px;
  }
  .document-aside nav {
    flex-direction:row;
    gap:4px 20px;
    flex-wrap:wrap;
  }
  .document-aside nav a {
    padding:6px 0;
  }
  .aside-contact {
    display:none;
  }
  .article {
    max-width:none;
  }
  .summary-box,.contact-box {
    padding:24px;
  }
  .document-heading h1 {
    font-size:2.75rem;
  }
  .document-heading .lead {
    font-size:1.0625rem;
  }
  .article section {
    margin-top:32px;
  }
  .contact-box .product-actions {
    align-items:flex-start;
    flex-direction:column;
  }
}
.flut-preview { min-width:0; padding:20px; background:#e8effa; border-radius:20px; }
.flut-preview figcaption { color:var(--muted); font-size:.875rem; line-height:1.5; margin-top:12px; }
.all-projects-link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-top:36px;
}
.all-projects-link p { color:var(--muted); }
.project-index { padding-bottom:96px; }
.project-index-intro {
  padding-block:80px 60px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
}
.project-index-intro h1 { font-size:clamp(3rem,6vw,5rem); }
.project-index-intro>p { color:var(--muted); font-size:1.0625rem; padding-bottom:6px; }
.collection-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:20px;
  border-top:1px solid var(--line);
}
.collection-heading h2 { font-size:1rem; font-weight:600; }
.collection-heading p { color:var(--muted); font-size:.875rem; }
.project-gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;
}
.gallery-card {
  min-width:0;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
}
.gallery-media {
  aspect-ratio:16/10;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  overflow:hidden;
  text-decoration:none;
}
.gallery-media:focus-visible { outline-offset:-6px; }
.gallery-media img { width:100%; height:100%; object-fit:contain; }
.gallery-agentic { background:#111b35; }
.gallery-agentic img { width:54%; height:auto; }
.gallery-flut { background:#e8effa; }
.gallery-flut img { filter:drop-shadow(0 8px 12px #17243c18); }
.gallery-guandan { background:#fff2d9; }
.gallery-guandan img { width:58%; height:auto; }
.gallery-aiomcp { background:#152037; color:#e3ecff; }
.gallery-code { width:100%; max-width:410px; }
.gallery-code-label { color:#b5c5e4; font-size:.8125rem; margin-bottom:24px; }
.gallery-code pre { margin:0; padding:0; background:transparent; border:0; overflow:auto; border-radius:0; font-size:.875rem; }
.gallery-code-note { margin-top:24px; font-size:.8125rem; color:#b5c5e4; }
.gallery-qa { background:#282828; padding:24px; }
.gallery-qa img { object-fit:cover; object-position:center bottom; }
.gallery-flappybird { background:#e7f5f2; }
.gallery-flappybird img, .gallery-racket img { border-radius:8px; width:auto; max-width:100%; }
.gallery-racket { background:#f0edf8; }
.gallery-meow { background:#eff3f7; }
.gallery-meow img { width:100%; }
.gallery-rabbit { background:#eef1fa; color:#354665; }
.rabbit-graphic { text-align:center; }
.rabbit-keys { display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:28px; }
.rabbit-keys span {
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  background:#fff;
  border:1px solid #d4dceb;
  border-bottom-width:4px;
  border-radius:12px;
  font-size:1.25rem;
  font-weight:500;
}
.rabbit-graphic p { font-size:1.125rem; margin-bottom:14px; }
.rabbit-graphic code { font-size:.8125rem; color:#606b82; }
.gallery-hearthrock { background:#f5eee5; color:#5b4637; padding:24px; }
.hearthrock-graphic { width:100%; text-align:center; }
.hearthrock-graphic>p:first-child { font-size:1.125rem; margin-bottom:28px; }
.hearthrock-flow { display:flex; align-items:center; justify-content:center; gap:8px; font-size:.8125rem; }
.hearthrock-flow>span:not([aria-hidden]), .hearthrock-flow>strong { padding:18px 12px; background:#fffaf5; border:1px solid #dfd0c1; border-radius:10px; }
.hearthrock-flow>strong { background:#634c3b; color:#fffaf5; border-color:#634c3b; font-weight:600; }
.hearthrock-languages { margin-top:28px; font-size:.8125rem; color:#7b6859; }
.gallery-copy { display:flex; flex-direction:column; flex:1; padding:28px 32px 32px; }
.gallery-meta { display:flex; justify-content:space-between; align-items:baseline; gap:16px; color:var(--muted); font-size:.8125rem; margin-bottom:14px; }
.gallery-meta time { flex-shrink:0; }
.gallery-copy h2 { font-size:1.75rem; line-height:1.25; font-weight:600; margin-bottom:14px; }
.gallery-copy h2 a { color:var(--ink); text-decoration:none; }
.gallery-copy h2 a:hover { color:var(--blue); }
.gallery-copy>p { color:var(--muted); font-size:.9375rem; }
.gallery-copy .gallery-related { margin-top:16px; font-size:.8125rem; }
.gallery-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:auto; padding-top:24px; font-size:.875rem; }
.gallery-actions>a { text-decoration:none; }
.gallery-actions>a:hover { text-decoration:underline; }
@media(max-width:900px) {
  .project-gallery { gap:24px; }
  .gallery-media { padding:24px; }
  .gallery-copy { padding:24px; }
  .gallery-code pre { font-size:.75rem; }
  .hearthrock-flow { font-size:.6875rem; gap:5px; }
  .hearthrock-flow>span:not([aria-hidden]), .hearthrock-flow>strong { padding:14px 8px; }
}
@media(max-width:680px) {
  .all-projects-link { flex-direction:column; align-items:start; gap:12px; }
  .project-index { padding-bottom:56px; }
  .project-index-intro { padding-block:48px 36px; flex-direction:column; align-items:start; gap:24px; }
  .project-gallery { grid-template-columns:1fr; }
  .gallery-copy h2 { font-size:1.5rem; }
  .gallery-media { padding:24px; }
  .gallery-code-label { margin-bottom:16px; }
  .gallery-code-note { margin-top:16px; }
  .gallery-code pre { font-size:clamp(.65rem,2.8vw,.875rem); }
  .hearthrock-graphic>p:first-child, .rabbit-graphic p { font-size:1rem; }
  .hearthrock-languages { margin-top:20px; }
}
.developer-feature {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:56px;
  margin-top:24px;
  padding:44px;
  background:#eef4ff;
  border:1px solid #dce7fa;
  border-radius:26px;
}
.developer-feature h3 { font-size:2rem; }
.developer-headline { font-size:2rem; line-height:1.15; margin:16px 0; font-weight:600; }
.developer-feature p:not(.eyebrow):not(.developer-headline) { color:var(--muted); }
.catalog-preview { align-self:center; }
.catalog-preview>a:not(.inline-link), .server-guides>a {
  display:block;
  text-decoration:none;
  border-top:1px solid #cbd7ec;
  padding:20px 0;
  color:var(--ink);
}
.catalog-preview>a strong, .server-guides>a strong { display:block; margin-bottom:6px; font-size:1.0625rem; }
.catalog-preview>a span, .server-guides>a span { color:var(--muted); font-size:.9375rem; line-height:1.6; }
.catalog-preview>a:hover strong, .server-guides>a:hover strong { color:var(--blue); }
.catalog-preview>.inline-link { margin-top:16px; }
.server-section, .quickstart-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
  padding-top:48px;
  padding-bottom:64px;
  border-top:1px solid var(--line);
}
.server-section { margin-bottom:20px; }
.server-section h2 { font-size:2.5rem; }
.server-section p:not(.eyebrow), .quickstart-section p:not(.eyebrow) { margin-top:20px; color:var(--muted); }
.developer-hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  padding-block:80px 64px;
  align-items:center;
}
.developer-hero h1 { font-size:clamp(2.75rem,4.8vw,4.25rem); }
.developer-hero .lead { font-size:1.125rem; color:var(--muted); margin-top:24px; }
.code-panel { background:#151e32; color:#e3ecff; border:1px solid #27324a; border-radius:20px; overflow:hidden; min-width:0; box-shadow:0 16px 40px #17243c10; }
.code-panel pre { padding:24px; margin:0; border-radius:0; font-size:.875rem; }
.code-caption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:16px 24px; border-bottom:1px solid #303b51; font-size:.875rem; color:#b5c5e4; }
.code-note { padding:0 24px 24px; font-size:.875rem; color:#b5c5e4; }
.code-keyword { color:#c0b5ff; }
.code-string { color:#a6e3bf; }
.code-comment { color:#9caac1; }
.developer-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.developer-benefits article { border-top:1px solid var(--line); padding-top:24px; }
.developer-benefits p { margin-top:16px; color:var(--muted); }
.quickstart-section>div { min-width:0; }
.quickstart-section .inline-link { margin-top:24px; }
.catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.catalog-entry { padding:32px; border:1px solid var(--line); border-radius:20px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.catalog-entry h3 { font-size:1.75rem; }
.catalog-entry>p:not(.eyebrow) { margin-top:16px; color:var(--muted); }
.catalog-entry pre { width:100%; }
.catalog-entry .inline-link { margin-top:auto; padding-top:20px; }
.catalog-footer { margin-top:28px; display:flex; justify-content:space-between; gap:36px; align-items:start; }
.catalog-footer p { max-width:660px; color:var(--muted); font-size:.9375rem; }
.catalog-footer .inline-link { flex-shrink:0; font-size:.9375rem; }
@media(max-width:900px) {
  .developer-feature { gap:32px; padding:32px; }
  .developer-hero { grid-template-columns:1fr; gap:32px; padding-top:56px; }
  .developer-hero h1 { font-size:clamp(2.75rem,6vw,4.25rem); }
  .developer-hero .lead { max-width:640px; }
  .server-section, .quickstart-section { gap:32px; }
  .server-section h2 { font-size:2rem; }
  .developer-benefits { gap:24px; }
  .catalog-footer { flex-direction:column; gap:16px; }
}
@media(max-width:680px) {
  .developer-feature, .server-section, .quickstart-section, .developer-benefits, .catalog-grid { grid-template-columns:1fr; }
  .developer-feature { padding:28px; gap:32px; }
  .developer-headline { font-size:1.75rem; }
  .server-section, .quickstart-section { padding-top:36px; padding-bottom:40px; }
  .developer-hero { padding-block:48px 36px; }
  .code-panel pre, .code-caption { padding:18px; }
  .catalog-entry { padding:24px; }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important;
  }
}