@charset "UTF-8";
:root {
  --paper:#f8f8f5;
  --ink:#272b29;
  --muted:#686b65;
  --accent:#995d3a;
  --line:#dedfd8;
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  scroll-behavior:smooth;
  scroll-padding-top:100px;
  color-scheme:light
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
button,a,summary {
  touch-action:manipulation
}
button {
  border:0
}
img {
  display:block;
  max-width:100%;
  height:auto
}
figure,h1,h2,h3,p {
  margin:0
}
p+p {
  margin-top:16px
}
h1,h2,h3 {
  line-height:1.12
}
h1,h2 {
  font-weight:500;
  letter-spacing:-.055em
}
h3 {
  font-weight:550;
  letter-spacing:-.025em
}
em {
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.055em
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px;
  border-radius:3px
}
[hidden] {
  display:none!important
}
.wrap {
  width:min(1160px,calc(100% - 112px));
  margin-inline:auto
}
.skip-link {
  position:fixed;
  top:10px;
  left:20px;
  z-index:10;
  padding:12px 24px;
  background:var(--ink);
  color:white;
  transform:translateY(-160%)
}
.skip-link:focus {
  transform:none
}
.header {
  max-width:1440px;
  margin:auto;
  padding:25px 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-bottom:1px solid var(--line)
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:23px;
  font-weight:650;
  letter-spacing:-.045em;
  line-height:1.2
}
.brand img {
  border-radius:10px
}
.brand-descriptor {
  display:block;
  font-size:12px;
  font-weight:450;
  letter-spacing:.015em;
  color:var(--muted);
  margin-top:4px
}
.header nav {
  display:flex;
  align-items:center;
  gap:35px;
  font-size:14px
}
.header nav a:hover,.footer a:hover {
  color:var(--accent)
}
.nav-cta {
  border:1px solid #b9bdb4;
  border-radius:6px;
  padding:10px 18px;
  display:flex;
  gap:24px
}
.eyebrow {
  font-size:12px;
  font-weight:550;
  letter-spacing:.13em;
  text-transform:uppercase;
  line-height:1.5
}
.status-dot {
  display:inline-block;
  background:#7c8666;
  width:6px;
  height:6px;
  border-radius:50%;
  margin:0 8px 2px 0
}
.hero {
  text-align:center;
  padding-top:73px
}
.hero h1 {
  font-size:clamp(64px,6.5vw,96px);
  margin-top:23px;
  line-height:1.035
}
.hero h1 em {
  color:var(--accent)
}
.hero-lead {
  font-size:18px;
  line-height:1.7;
  color:var(--muted);
  margin:26px auto 0;
  max-width:620px
}
.hero-actions {
  display:flex;
  gap:27px;
  align-items:center;
  justify-content:center;
  margin-top:28px
}
.button {
  display:inline-flex;
  gap:28px;
  justify-content:center;
  align-items:center;
  border-radius:6px;
  padding:14px 22px;
  font-size:14px;
  font-weight:550;
  transition:background .2s,transform .2s
}
.button:hover {
  transform:translateY(-2px)
}
.button-dark {
  background:var(--ink);
  color:#fff
}
.button-dark:hover {
  background:#41483f
}
.text-link {
  font-size:14px;
  font-weight:550;
  display:inline-flex;
  gap:18px;
  align-items:center;
  border-bottom:1px solid #aeb1a8;
  padding-bottom:4px
}
.text-link:hover {
  color:var(--accent);
  border-color:var(--accent)
}
.hero-note {
  margin-top:17px;
  font-size:12px;
  color:var(--muted)
}
.hero-note span[aria-hidden] {
  margin-inline:10px;
  color:#a0a399
}
.showcase {
  max-width:1328px;
  margin:64px auto 0;
  background:#f1e9df;
  border:1px solid #e0d3c3;
  border-radius:12px 12px 0 0;
  padding:24px 45px 22px;
  scroll-margin-top:25px
}
.showcase-topline {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.13em;
  color:#74604e
}



.screenshot-link {
  position:relative;
  display:block;
  cursor:zoom-in
}
.hero-screenshot {
  max-width:1150px;
  margin:0 auto
}
.hero-screenshot img {
  width:100%;
  aspect-ratio:1937/1364;
  object-fit:contain;
  filter:drop-shadow(0 18px 20px #543b241a)
}
.zoom-hint {
  position:absolute;
  right:5%;
  bottom:8%;
  background:#fffef5ed;
  border:1px solid #dedfd8;
  padding:5px 12px;
  border-radius:5px;
  font-size:12px;
  opacity:0;
  transition:opacity .2s
}
.screenshot-link:hover .zoom-hint,.screenshot-link:focus-visible .zoom-hint {
  opacity:1
}
figcaption {
  font-size:13px;
  color:var(--muted)
}
.showcase .app-figure {
  margin-top:24px
}
.app-figure figcaption {
  display:flex;
  justify-content:space-between;
  gap:18px;
  text-align:left;
  margin-top:8px
}
.app-figure figcaption > span:first-child {
  font-size:12px;
  letter-spacing:.12em;
  font-weight:600;
  align-self:center;
  white-space:nowrap
}
.principles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:55px;
  padding-block:43px 60px;
  border-bottom:1px solid var(--line)
}
.small-number {
  font-size:12px;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  font-weight:550
}
.principles h2 {
  font-size:19px;
  letter-spacing:-.03em;
  margin:13px 0 11px;
  font-weight:550
}
.principles p {
  font-size:15px;
  color:var(--muted);
  max-width:310px
}
.workflow-section {
  padding-block:102px 110px
}
.section-heading h2,.details-intro h2 {
  font-size:55px;
  margin-top:20px
}
.workflow-layout {
  display:grid;
  grid-template-columns:.9fr 1.3fr;
  gap:55px;
  align-items:center;
  margin-top:46px
}
.workflow-list details {
  border-top:1px solid var(--line)
}
.workflow-list details:last-child {
  border-bottom:1px solid var(--line)
}
summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:17px;
  padding:25px 0;
  line-height:1.4
}
summary::-webkit-details-marker {
  display:none
}
summary h3 {
  font-size:19px;
  line-height:1.4
}
.plus {
  margin-left:auto;
  flex:none;
  position:relative;
  width:14px;
  height:14px
}
.plus:before,.plus:after {
  content:"";
  position:absolute;
  top:6px;
  left:1px;
  width:12px;
  height:1px;
  background:currentColor
}
.plus:after {
  transform:rotate(90deg);
  transition:transform .18s
}
details[open]>summary .plus:after {
  transform:rotate(0deg)
}
details[open]>summary {
  color:var(--accent)
}
.detail-copy {
  padding:0 25px 27px 31px;
  color:var(--muted);
  font-size:16px
}
.micro-label {
  font-size:12px;
  letter-spacing:.035em;
  color:var(--accent)
}
.workflow-visual {
  background:#edece7;
  border-radius:8px;
  padding:20px 13px
}
.workflow-visual img {
  width:100%;
  aspect-ratio:1.16;
  object-fit:contain
}
.workflow-visual figcaption {
  padding:2px 12px 9px;
  font-size:12px;
  text-align:center
}
.privacy-band {
  background:#e9ebe3;
  border-block:1px solid #dce0d3
}
.privacy-inner {
  padding-block:65px 62px
}
.privacy-inner h2 {
  font-size:66px;
  margin-top:24px
}
.privacy-inner h2 em {
  color:#626c53
}
.privacy-bottom {
  display:flex;
  justify-content:space-between;
  gap:70px;
  margin-top:30px;
  align-items:end
}
.privacy-bottom p {
  max-width:570px;
  font-size:17px;
  color:#616858
}
.privacy-facts {
  display:grid;
  gap:6px;
  font-size:14px;
  min-width:180px
}
.privacy-facts span:before {
  content:"✓";
  margin-right:12px;
  color:#66754f
}
.details-section {
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:95px;
  padding-block:100px
}
.details-intro>p:last-child {
  font-size:15px;
  color:var(--muted);
  margin-top:26px
}
.details-list details {
  border-top:1px solid var(--line)
}
.details-list details:last-child {
  border-bottom:1px solid var(--line)
}
.details-list summary {
  font-size:17px;
  font-weight:500;
  gap:16px
}
.summary-meta {
  font-size:12px;
  font-weight:400;
  color:var(--muted);
  margin-left:auto;
  white-space:nowrap
}
.summary-meta+.plus {
  margin-left:0
}
.detail-content {
  padding:0 0 26px;
  color:var(--muted);
  font-size:16px
}
.fine-print {
  font-size:12px!important;
  line-height:1.65;
  color:var(--muted)
}
.format-row {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:12px;
  border-top:1px solid var(--line);
  padding:13px 0;
  font-size:13px
}
.format-row strong {
  font-size:13px;
  font-weight:550;
  color:var(--ink)
}
.format-row p {
  font-size:12px;
  overflow-wrap:anywhere;
  line-height:1.7
}
#format-list {
  margin-block:22px
}
/* A visible theme showcase, with the same quiet typography as the page. */
.themes-section {
  padding-block:72px 88px;
  border-top:1px solid var(--line)
}
.themes-intro {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:64px;
  align-items:end
}
.themes-intro h2 {
  margin-top:20px;
  font-size:clamp(36px,4.5vw,60px)
}
.themes-intro h2 em {color:var(--accent)}
.themes-intro>p {color:var(--muted); font-size:17px; max-width:480px}
.theme-choices {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin-block:32px 24px
}
.theme-choices button {
  border:1px solid var(--line);
  background:transparent;
  border-radius:10px;
  font-size:13px;
  padding:16px 10px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  text-align:center;
  gap:12px
}
.theme-choices button:hover {background:#eeeee8}
.theme-choices button[aria-pressed=true] {
  border-color:var(--accent);
  background:#fff;
  box-shadow:inset 0 -3px var(--accent)
}
.theme-choices button > span[style] {
  display:block;
  width:42px;
  height:42px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--swatch);
  box-shadow:inset 0 0 0 1px #00000012
}
.themes-stage {
  padding:18px 18px 14px;
  border:1px solid #e0d3c3;
  border-radius:16px;
  background:#eee7dd
}
#theme-image {
  width:100%;
  aspect-ratio:2000/1283;
  object-fit:contain;
  border-radius:7px
}
#theme-caption {text-align:center; margin-top:14px}
@media(max-width:760px) {
  .themes-section {padding-block:48px}
  .themes-intro {grid-template-columns:1fr; gap:24px}
  .themes-intro h2 {font-size:38px}
  .themes-intro>p {font-size:16px}
  .theme-choices {grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-block:24px 18px}
  .theme-choices button {font-size:12px; padding:12px 6px; gap:9px}
  .theme-choices button > span[style] {width:32px; height:32px}
  .themes-stage {padding:5px 5px 12px; border-radius:10px}
}
.beta-panel {
  background:#292e29;
  color:#f7f7ed;
  padding:58px;
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:80px;
  border-radius:9px
}
.beta-panel .eyebrow {
  color:#c9cbbd;
  font-size:12px
}
.beta-panel .status-dot {
  background:#bac39a
}
.beta-panel h2 {
  font-size:55px;
  margin-top:23px
}
.beta-panel h2 em {
  color:#c4cbb1
}
.beta-panel p:not(.eyebrow) {
  color:#c2c7bb;
  font-size:15px;
  margin-top:21px
}
.button-light {
  background:#f2f3eb;
  color:var(--ink);
  margin-top:30px
}
.button-light:hover {
  background:#d9dec9
}
.beta-panel .beta-meta {
  font-size:12px!important;
  margin-top:13px!important
}
.beta-steps {
  list-style:none;
  padding:0;
  margin:0;
  align-self:center;
  display:grid;
  gap:25px
}
.beta-steps li {
  display:flex;
  gap:18px;
  padding-bottom:23px;
  border-bottom:1px solid #4a5145
}
.beta-steps li:last-child {
  padding-bottom:0;
  border:0
}
.beta-steps li>span {
  font-size:12px;
  color:#bfc7aa;
  margin-top:2px
}
.beta-steps strong {
  font-size:16px;
  font-weight:500
}
.beta-steps p {
  font-size:13px!important;
  margin-top:7px!important;
  line-height:1.6
}
.beta-footnote {
  font-size:12px;
  color:var(--muted);
  text-align:center;
  margin-top:15px
}
.mobile-beta {
  margin-top:50px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:90px 1fr auto;
  gap:35px;
  padding:35px 10px 60px;
  align-items:center;
  scroll-margin-top:20px
}
.mobile-image {
  height:160px
}
.mobile-image img {
  height:100%;
  width:100%;
  object-fit:contain
}
.mobile-beta .eyebrow {
  font-size:12px;
  color:var(--accent)
}
.mobile-beta h3 {
  font-size:23px;
  margin-top:9px
}
.mobile-beta p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  max-width:560px;
  margin-top:10px
}
.mobile-beta .text-link {
  margin-top:15px
}
.mobile-label {
  font-size:12px;
  color:var(--muted);
  text-align:right;
  line-height:1.7
}
.mobile-label strong {
  font-weight:400;
  color:var(--ink)
}
.footer {
  border-top:1px solid var(--line);
  padding-block:34px 26px
}
.footer-top {
  display:flex;
  gap:50px;
  align-items:start
}
.footer-top>p {
  font-size:12px;
  color:var(--muted);
  margin-right:auto
}
.footer-top nav {
  display:flex;
  gap:22px;
  font-size:12px
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:12px;
  padding-top:38px
}
.footer-bottom>div {
  display:flex;
  gap:22px
}
dialog {
  width:min(1500px,96vw);
  max-width:96vw;
  max-height:96dvh;
  overflow:auto;
  border:1px solid #747b6c;
  border-radius:10px;
  background:#222722;
  color:#fff;
  padding:55px 18px 15px
}
dialog::backdrop {
  background:#10180eef;
  backdrop-filter:blur(8px)
}
dialog img {
  max-height:calc(90dvh - 95px);
  object-fit:contain;
  margin:auto
}
dialog p {
  text-align:center;
  font-size:13px;
  margin-top:12px;
  color:#d5d9cf
}
.dialog-close {
  position:absolute;
  right:17px;
  top:12px;
  background:transparent;
  color:#fff;
  font-size:13px;
  padding:6px 10px
}
.dialog-close span {
  font-size:20px;
  margin-left:10px
}
.noscript-note {
  padding:24px;
  font-size:14px;
  text-align:center;
  background:#e9ebe3
}
@media(min-width:1500px) {
  .showcase {
    margin-top:72px
  }
  .hero {
    padding-top:85px
  }
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 72px)
  }
  .header {
    padding-inline:36px
  }
  .showcase {
    margin-inline:24px;
    padding-inline:23px
  }
  .workflow-layout {
    gap:30px;
    grid-template-columns:1fr 1.1fr
  }
  .principles {
    gap:30px
  }
  .details-section {
    gap:45px
  }
  .beta-panel {
    padding:40px;
    gap:40px
  }
  .beta-panel h2 {
    font-size:47px
  }
  .footer-top {
    gap:25px
  }
  .footer-top nav {
    gap:14px
  }
  .mobile-label {
    display:none
  }
  .mobile-beta {
    grid-template-columns:90px 1fr
  }
}
@media(max-width:760px) {
  :root {
    scroll-padding-top:30px
  }
  .wrap {
    width:calc(100% - 40px)
  }
  .header {
    padding:19px 20px;
    gap:15px
  }
  .brand {
    font-size:21px
  }
  .brand img {
    width:36px;
    height:36px
  }
  .brand-descriptor {
    font-size:12px
  }
  .header nav {
    gap:0
  }
  .header nav>a:not(.nav-cta) {
    display:none
  }
  .nav-cta {
    padding:9px 13px;
    font-size:12px;
    gap:12px
  }
  .hero {
    padding-top:53px
  }
  .hero>.eyebrow {
    font-size:12px
  }
  .hero h1 {
    font-size:clamp(49px,10vw,70px);
    margin-top:22px
  }
  .hero-lead {
    font-size:16px;
    max-width:480px;
    padding:0 24px;
    margin-top:23px
  }
  .desktop-break {
    display:none
  }
  .hero-actions {
    gap:18px;
    margin-top:24px
  }
  .hero-actions .button {
    padding:13px 15px;
    gap:14px;
    font-size:12px
  }
  .hero-actions .text-link {
    font-size:12px;
    gap:9px
  }
  .hero-note {
    font-size:12px;
    padding:0 20px
  }
  .showcase {
    margin:40px 12px 0;
    padding:17px 10px 15px
  }
  .showcase-topline {
    font-size:12px;
    justify-content:center
  }
  .edition {
    display:none
  }


  .app-figure figcaption {
    display:block;
    text-align:center;
    font-size:12px;
    padding:0 10px
  }
  .app-figure figcaption > span:first-child {
    display:block;
    margin-bottom:4px;
    font-size:12px
  }
  .principles {
    grid-template-columns:1fr;
    gap:0;
    padding-block:13px 30px
  }
  .principles article {
    padding-block:24px;
    border-bottom:1px solid var(--line);
    display:grid;
    grid-template-columns:23px 1fr;
    gap:8px 13px
  }
  .principles article:last-child {
    border:0;
    padding-bottom:0
  }
  .principles .small-number {
    padding-top:2px
  }
  .principles h2 {
    margin:0;
    font-size:18px;
    line-height:1.5
  }
  .principles p {
    grid-column:2;
    font-size:15px;
    max-width:none
  }
  .workflow-section {
    padding-block:58px
  }
  .section-heading h2,.details-intro h2 {
    font-size:44px;
    margin-top:17px
  }
  .eyebrow {
    font-size:12px
  }
  .workflow-layout {
    grid-template-columns:1fr;
    gap:25px;
    margin-top:30px
  }
  .workflow-list summary {
    padding:20px 0
  }
  .workflow-list summary h3 {
    font-size:17px
  }
  .detail-copy {
    font-size:16px;
    padding-bottom:22px
  }
  .workflow-visual {
    padding:8px
  }
  .workflow-visual img {
    aspect-ratio:1.4
  }
  .privacy-inner {
    padding-block:43px
  }
  .privacy-inner h2 {
    font-size:44px
  }
  .privacy-bottom {
    display:block;
    margin-top:24px
  }
  .privacy-bottom p {
    font-size:16px
  }
  .privacy-facts {
    font-size:13px;
    gap:7px;
    margin-top:24px
  }
  .details-section {
    grid-template-columns:1fr;
    gap:27px;
    padding-block:56px
  }
  .details-intro>p:last-child {
    margin-top:17px
  }
  .details-list summary {
    font-size:15px;
    gap:12px;
    padding:22px 0
  }
  .summary-meta {
    font-size:12px
  }
  .format-row {
    grid-template-columns:90px 1fr
  }
  .beta-panel {
    grid-template-columns:1fr;
    gap:37px;
    padding:30px 25px
  }
  .beta-panel h2 {
    font-size:43px
  }
  .beta-panel .eyebrow {
    font-size:12px
  }
  .beta-panel p:not(.eyebrow) {
    font-size:14px
  }
  .beta-panel .button {
    font-size:12px;
    gap:15px;
    padding:14px 16px
  }
  .beta-steps {
    gap:18px
  }
  .beta-steps strong {
    font-size:15px
  }
  .beta-steps li {
    padding-bottom:18px
  }
  .beta-footnote {
    font-size:12px;
    padding-inline:8px
  }
  .mobile-beta {
    gap:18px;
    grid-template-columns:65px 1fr;
    margin-top:30px;
    padding:25px 0 38px
  }
  .mobile-image {
    height:140px
  }
  .mobile-beta h3 {
    font-size:20px;
    line-height:1.25
  }
  .mobile-beta .text-link {
    font-size:12px;
    gap:6px
  }
  .mobile-beta p:not(.eyebrow) {
    font-size:13px
  }
  .mobile-beta .fine-print {
    font-size:12px!important
  }
  .footer-top {
    flex-wrap:wrap;
    gap:20px
  }
  .footer-top>p {
    margin-left:auto;
    margin-right:0;
    font-size:12px
  }
  .footer-top nav {
    width:100%;
    font-size:12px;
    gap:23px
  }
  .footer-bottom {
    flex-direction:column;
    font-size:12px;
    padding-top:25px;
    gap:14px
  }
  .footer-bottom>div {
    gap:20px
  }
  dialog {
    padding-inline:5px
  }
  dialog p {
    padding-inline:10px;
    font-size:12px
  }
  .zoom-hint {
    display:none
  }
}
@media(max-width:380px) {
  .hero-actions {
    flex-direction:column;
    gap:16px
  }
  .hero-note span[aria-hidden] {
    margin-inline:4px
  }
  .hero h1 {
    font-size:48px
  }
  .summary-meta {
    display:none
  }
  .mobile-beta {
    grid-template-columns:1fr
  }
  .mobile-image {
    display:none
  }
  .beta-panel {
    padding:27px 20px
  }
  .brand-descriptor {
    font-size:12px
  }
}
@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important
  }
  .button:hover {
    transform:none
  }
}

/* Localized text keeps the approved layout without forcing Latin spacing on Japanese. */
html:lang(ja) {
  line-break: strict;
}
html:lang(ja) h1 {
  font-size: clamp(38px, 4.7vw, 68px);
  line-height: 1.35;
  letter-spacing: -.035em;
}
html:lang(ja) h2 {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.4;
  letter-spacing: -.025em;
}
html:lang(ja) h3 {
  line-height: 1.5;
}
html:lang(ja) em {
  font-family: inherit;
  font-style: normal;
  letter-spacing: inherit;
}
.footer-bottom a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (max-width: 760px) {
  html:lang(ja) h1 {
    font-size: clamp(27px, 6.9vw, 42px);
    padding-inline: 15px;
  }
  html:lang(ja) .hero-actions {
    flex-wrap: wrap;
    padding-inline: 20px;
  }
  html:lang(ja) .privacy-inner h2 {
    font-size: 29px;
  }
}

/* Local AI is a visible product feature, with its review step kept explicit. */
.hero-ai-link {margin-top:20px; font-size:14px; color:var(--accent)}
.hero-ai-link a {border-bottom:1px solid #cbb09a; padding-bottom:3px}
.ai-section {display:grid; grid-template-columns:1fr 1.08fr; gap:52px; align-items:center; padding-block:76px; border-bottom:1px solid var(--line)}
.ai-copy h2 {font-size:clamp(34px,3.8vw,52px); margin-top:20px}
.ai-copy h2 em {color:var(--accent)}
.ai-lead {margin-top:24px; color:var(--muted); font-size:17px}
.ai-benefits {display:grid; gap:17px; margin-top:28px}
.ai-benefits>div {border-left:2px solid #c6a17f; padding-left:16px}
.ai-benefits h3 {font-size:16px; margin-bottom:5px}
.ai-benefits p {color:var(--muted); font-size:14px}
.ai-setup {font-size:12px; color:var(--muted); margin-top:26px; max-width:440px}
.ai-visual {background:#f1e9df; border:1px solid #e0d3c3; padding:22px 14px; border-radius:12px; min-width:0}
.ai-visual img {width:100%}
.ai-visual figcaption {text-align:center; color:#74604e; font-size:13px; margin-top:12px}
@media(max-width:1000px) {.ai-section {gap:30px; grid-template-columns:1fr 1fr}}
@media(max-width:760px) {.ai-section {grid-template-columns:1fr; padding-block:48px; gap:30px} .ai-copy h2 {font-size:38px} .ai-lead {font-size:16px} .hero-ai-link {font-size:13px}}

/* Animated image-analysis introduction, ported from the preserved original. */
.ai-scan-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 57px 0 24px;
  border: 1px solid rgba(162,218,223,.25);
  border-radius: 24px;
  background: #080b17;
  box-shadow: 0 45px 110px rgba(0,0,0,.48), 0 0 75px rgba(76,112,255,.12);
}
.ai-scan-image { border-radius: 0; }
.ai-scan-image img { opacity: .9; transition: transform .4s ease, opacity .4s ease; }
.ai-scan-stage:hover .ai-scan-image img { transform: scale(1.006); opacity: 1; }
.ai-scan-effect {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.ai-scan-stage.is-active .ai-scan-effect { opacity: 1; }
.ai-scan-field,
.ai-scan-blob,
.ai-scan-line { position: absolute; pointer-events: none; will-change: transform, opacity; }
.ai-scan-field {
  inset: -18%;
  opacity: .82;
  background:
    radial-gradient(ellipse at 18% 24%, rgba(111,92,255,.42) 0%, rgba(111,92,255,.14) 28%, transparent 58%),
    radial-gradient(ellipse at 78% 28%, rgba(34,211,238,.34) 0%, rgba(34,211,238,.11) 30%, transparent 60%),
    radial-gradient(ellipse at 52% 82%, rgba(244,114,182,.3) 0%, rgba(244,114,182,.09) 31%, transparent 62%);
  filter: blur(18px) saturate(145%);
  mix-blend-mode: screen;
}
.ai-scan-blob {
  border-radius: 48% 52% 61% 39% / 42% 38% 62% 58%;
  filter: blur(46px) saturate(155%);
  mix-blend-mode: screen;
}
.ai-scan-blob-a {
  top: -32%; left: -13%; width: 58%; height: 72%;
  background: radial-gradient(ellipse at 55% 55%, rgba(126,97,255,.68) 0%, rgba(92,72,238,.3) 38%, transparent 70%);
}
.ai-scan-blob-b {
  top: 3%; right: -17%; width: 61%; height: 79%;
  background: radial-gradient(ellipse at 42% 48%, rgba(28,215,226,.61) 0%, rgba(22,168,214,.25) 40%, transparent 72%);
}
.ai-scan-blob-c {
  left: 18%; bottom: -39%; width: 68%; height: 83%;
  background: radial-gradient(ellipse at 50% 38%, rgba(244,105,180,.52) 0%, rgba(245,158,94,.2) 40%, transparent 72%);
}
.ai-scan-line {
  left: -8%;
  top: -3%;
  width: 116%;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(127,111,255,.15) 12%, rgba(108,244,255,.96) 42%, rgba(255,190,231,.96) 58%, rgba(127,111,255,.15) 88%, transparent 100%);
  box-shadow: 0 0 10px rgba(126,228,255,.8), 0 0 30px rgba(142,111,255,.58), 0 22px 75px rgba(244,114,182,.28);
}
.ai-scan-stage.is-active .ai-scan-field,
.hero-media-tile.tile-ai.is-active .ai-scan-field { animation: landing-ai-field 9s ease-in-out infinite alternate; }
.ai-scan-stage.is-active .ai-scan-blob-a,
.hero-media-tile.tile-ai.is-active .ai-scan-blob-a { animation: landing-ai-blob-a 7.5s ease-in-out infinite alternate; }
.ai-scan-stage.is-active .ai-scan-blob-b,
.hero-media-tile.tile-ai.is-active .ai-scan-blob-b { animation: landing-ai-blob-b 8.5s ease-in-out infinite alternate; }
.ai-scan-stage.is-active .ai-scan-blob-c,
.hero-media-tile.tile-ai.is-active .ai-scan-blob-c { animation: landing-ai-blob-c 9.5s ease-in-out infinite alternate; }
.ai-scan-stage.is-active .ai-scan-line,
.hero-media-tile.tile-ai.is-active .ai-scan-line { animation: landing-ai-scan-line 4.2s cubic-bezier(.45,0,.55,1) infinite; }
.ai-scan-status,
.ai-scan-legend {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.18);
  color: #f3fcff;
  background: rgba(8,12,27,.69);
  backdrop-filter: blur(15px);
  pointer-events: none;
}
.ai-scan-status { left: 18px; top: 18px; padding: 9px 12px; border-radius: 999px; font-size: 10px; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
.ai-scan-status i { width: 7px; height: 7px; border-radius: 50%; background: #8de9eb; box-shadow: 0 0 0 5px rgba(141,233,235,.13), 0 0 14px #8de9eb; }
.ai-scan-stage.is-active .ai-scan-status i { animation: landing-ai-pulse 1.35s ease-in-out infinite; }
.ai-scan-legend { right: 18px; bottom: 18px; padding: 8px; border-radius: 12px; font-size: 9px; font-weight: 800; }
.ai-scan-legend span { padding: 4px 7px; border-radius: 7px; background: rgba(255,255,255,.07); }
@keyframes landing-ai-field {
  0% { transform: translate3d(-3%,-2%,0) scale(1.02) rotate(-2deg); }
  45% { transform: translate3d(3%,2%,0) scale(1.09) rotate(2deg); }
  100% { transform: translate3d(-1%,4%,0) scale(1.04) rotate(-1deg); }
}
@keyframes landing-ai-blob-a {
  0% { transform: translate3d(-5%,-4%,0) scale(.9) rotate(-8deg); opacity: .62; }
  55% { transform: translate3d(38%,20%,0) scale(1.12) rotate(10deg); opacity: .92; }
  100% { transform: translate3d(18%,44%,0) scale(1.02) rotate(3deg); opacity: .72; }
}
@keyframes landing-ai-blob-b {
  0% { transform: translate3d(10%,-4%,0) scale(1.08) rotate(9deg); opacity: .58; }
  50% { transform: translate3d(-38%,22%,0) scale(.9) rotate(-7deg); opacity: .9; }
  100% { transform: translate3d(-17%,43%,0) scale(1.14) rotate(5deg); opacity: .68; }
}
@keyframes landing-ai-blob-c {
  0% { transform: translate3d(-14%,10%,0) scale(1.02) rotate(-4deg); opacity: .54; }
  48% { transform: translate3d(20%,-31%,0) scale(1.17) rotate(8deg); opacity: .86; }
  100% { transform: translate3d(-3%,-48%,0) scale(.94) rotate(-6deg); opacity: .66; }
}
@keyframes landing-ai-scan-line {
  0% { top: -3%; transform: scaleX(.78); opacity: 0; }
  12% { opacity: .72; }
  48% { top: 48%; transform: scaleX(1); opacity: .96; }
  88% { opacity: .62; }
  100% { top: 103%; transform: scaleX(.82); opacity: 0; }
}
@keyframes landing-ai-pulse {
  0%, 100% { opacity: .55; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.18); }
}


.ai-section {display:block}
.ai-copy {max-width:850px}
.ai-copy h2 {font-size:clamp(36px,4.5vw,60px)}
.ai-visual {padding:0; border:0; background:transparent; margin-top:36px}
.ai-scan-stage {margin:0; border-radius:16px; box-shadow:0 16px 42px rgba(45,36,65,.15)}
.ai-visual figcaption {display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:left; padding:0 2px}
.ai-motion-toggle {background:transparent; color:var(--muted); font-size:12px; text-decoration:underline; text-underline-offset:3px; padding:8px 0; flex-shrink:0}
.ai-scan-stage:not(.is-active) .ai-scan-effect {opacity:0}
.ai-scan-stage.is-paused .ai-scan-effect * {animation-play-state:paused!important}
.ai-scan-stage.is-paused .ai-scan-status i {animation-play-state:paused!important}
.ai-followup .ai-benefits {grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:36px}
.ai-followup .ai-setup {max-width:none}
@media(max-width:760px) {.ai-scan-status {top:8px;left:8px;font-size:8px;padding:6px 8px} .ai-followup .ai-benefits {grid-template-columns:1fr;gap:20px} .ai-scan-stage {border-radius:10px} .ai-visual figcaption {font-size:12px; flex-wrap:wrap;gap:0}}
@media(prefers-reduced-motion:reduce) {.ai-scan-stage .ai-scan-effect *, .ai-scan-stage .ai-scan-status i {animation:none!important} .ai-scan-stage .ai-scan-effect {opacity:.65} .ai-scan-line {top:50%;opacity:.65} .ai-motion-toggle {display:none} .ai-scan-image img {transition:none}}

/* Dedicated 3D viewer feature. */
.viewer-section {padding-block:64px 80px; border-top:1px solid var(--line)}
.viewer-intro {max-width:830px}
.viewer-intro h2 {margin-top:20px; font-size:clamp(36px,4.5vw,60px)}
.viewer-intro h2 em {color:var(--accent)}
.viewer-lead {margin-top:24px; font-size:17px; color:var(--muted); max-width:740px}
.viewer-figure {margin-top:32px}
.viewer-figure>a {background:#eee7dd; border:1px solid #e0d3c3; border-radius:14px; padding:12px}
.viewer-figure img {width:100%}
.viewer-figure figcaption {margin-top:12px; font-size:12px; color:var(--muted)}
.viewer-benefits {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:32px}
.viewer-benefits>div {border-left:2px solid #c6a17f; padding-left:16px}
.viewer-benefits h3 {font-size:16px; margin-bottom:5px}
.viewer-benefits p {font-size:14px; color:var(--muted)}
.viewer-note {font-size:12px; color:var(--muted); margin-top:26px}
@media(max-width:760px) {.viewer-section {padding-block:48px} .viewer-intro h2 {font-size:38px} .viewer-lead {font-size:16px} .viewer-benefits {grid-template-columns:1fr;gap:20px} .viewer-figure>a {padding:4px}}

.live-demo {margin-top:32px}
.live-demo [hidden] {display:none!important}
.live-demo .viewer-figure {margin-top:0}
#demo-canvas {height:clamp(340px,55vw,720px); background:#111b26; border:1px solid #d6c6b5; border-radius:14px; overflow:hidden}
#demo-canvas canvas {display:block; width:100%; height:100%; touch-action:none}
#demo-canvas canvas:focus-visible {outline:3px solid #dcae7f; outline-offset:-4px}
#demo-canvas:fullscreen {height:100vh; width:100vw; border:0; border-radius:0}
.demo-toolbar {display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 12px}
.demo-toolbar button {background:var(--ink); color:var(--paper); border-radius:7px; padding:12px 18px; font-size:14px}
.demo-toolbar button:disabled {opacity:.6; cursor:wait}
#demo-status {font-size:14px; color:var(--muted); margin-top:8px}

.demo-poster-start {display:block; position:relative; width:100%; padding:0; overflow:hidden; border-radius:14px; background:#151922; cursor:pointer}
.demo-poster-start img {width:100%; height:auto}
.demo-start-label {position:absolute; left:50%; bottom:28px; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); padding:13px 22px; border:1px solid #ffffff50; border-radius:8px; background:#f8f8f5; color:var(--ink); font-size:15px; box-shadow:0 4px 20px #0004; transition:background .15s,box-shadow .15s}
.demo-poster-start:hover .demo-start-label,.demo-poster-start:focus-visible .demo-start-label {background:#fff; box-shadow:0 6px 28px #0008}
.demo-poster-start:disabled {cursor:wait}
.demo-poster-start[aria-busy=true] .demo-start-label {opacity:.65}
.demo-toolbar:not(:has(button:not([hidden]))) {display:none}
@media(max-width:760px) {.demo-start-label {bottom:16px; padding:10px 14px; font-size:13px}}

/* One-shot transition from the still image into the interactive scene. */
.demo-frame {position:relative; height:clamp(340px,55vw,720px); overflow:hidden; border-radius:14px; isolation:isolate; background:#151922}
.demo-frame #demo-poster,.demo-frame #demo-canvas {position:absolute; inset:0; width:100%; height:100%}
.demo-frame #demo-poster {z-index:2}
.demo-frame .viewer-figure,.demo-frame .demo-poster-start {height:100%}
.demo-frame .demo-poster-start img {height:100%; object-fit:contain}
.demo-frame #demo-canvas.is-preparing {opacity:0; pointer-events:none}
.demo-frame.is-loading .demo-start-label {background:linear-gradient(110deg,#f8f8f5 25%,#d9b28e 50%,#f8f8f5 75%); background-size:250% 100%; animation:demo-loading 1.8s linear infinite}
.demo-frame.is-warping {pointer-events:none}
.demo-frame.is-warping #demo-poster {animation:demo-warp-out .95s ease-in-out both}
.demo-frame.is-warping #demo-canvas {animation:demo-warp-in .95s ease-out both}
.demo-frame.is-warping .demo-start-label {opacity:0}
.demo-frame.is-warping::after {content:""; position:absolute; z-index:3; width:55%; aspect-ratio:1; left:50%; top:50%; border:2px solid #f8dfb8; border-radius:50%; box-shadow:0 0 34px 12px #e5b37f66,inset 0 0 40px #b3d6e955; background:radial-gradient(circle,transparent 48%,#f5d6ac33 65%,transparent 73%); pointer-events:none; animation:demo-warp-ring .95s ease-out both}
@keyframes demo-loading {to {background-position:-250% 0}}
@keyframes demo-warp-out {0%,15% {opacity:1;transform:scale(1);filter:blur(0)} 65% {opacity:.35;transform:scale(1.16);filter:blur(5px)} 100% {opacity:0;transform:scale(1.28);filter:blur(9px)}}
@keyframes demo-warp-in {0%,25% {opacity:0;transform:scale(.9);filter:blur(7px)} 75% {opacity:1;filter:blur(0)} 100% {opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes demo-warp-ring {0% {opacity:0;transform:translate(-50%,-50%) scale(.12)} 28% {opacity:.85} 100% {opacity:0;transform:translate(-50%,-50%) scale(3.2)}}
@media(prefers-reduced-motion:reduce) {.demo-frame.is-loading .demo-start-label {animation:none} .demo-frame.is-warping #demo-poster,.demo-frame.is-warping #demo-canvas {animation:none} .demo-frame.is-warping::after {display:none}}

/* Cover only the captured one-pixel window outline, preserving its soft shadow. */
.hero-screenshot::after {
  content:"";
  position:absolute;
  inset:2.7859% 2.8911% 5.4252%;
  border:1px solid #cbbba7;
  border-radius:1% / 1.45%;
  pointer-events:none;
}

/* Abschnitt "Eingebauter Bildeditor" — ergänzt am 15.09.2026.
   Der Editor war zuvor nur beiläufig in zwei Aufzählungen erwähnt und hatte
   keinen eigenen Abschnitt, obwohl Screenshots im Repository lagen. Aufbau
   entspricht dem 3D-Viewer-Abschnitt. */
.editor-section {
  padding-block:64px 80px;
  border-top:1px solid var(--line)
}
.editor-intro {
  max-width:830px
}
.editor-lead {
  margin-top:24px;
  font-size:17px;
  color:var(--muted);
  max-width:740px
}
.editor-figure {
  margin-top:32px
}
.editor-figure figcaption {
  margin-top:14px;
  font-size:13px;
  color:var(--muted)
}
.editor-benefits {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  margin-top:32px
}
.editor-benefits h3 {
  font-size:17px;
  font-weight:500;
  margin-bottom:6px
}
.editor-benefits p {
  font-size:15px;
  color:var(--muted)
}
.editor-note {
  font-size:12px;
  color:var(--muted);
  margin-top:26px
}
@media (max-width:760px) {
  .editor-benefits {
    grid-template-columns:1fr;
    gap:20px
  }
}