html{line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0}h1,h2,h3,p{margin:0}a{color:inherit}button{font:inherit}svg{vertical-align:middle}summary{display:list-item}
.page{background:#f6f7f2;color:#122c38;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}
.page *{box-sizing:border-box}
.page a{text-decoration:none}
.page a:focus-visible,.page button:focus-visible,.page summary:focus-visible{outline:3px solid #478720;outline-offset:5px}
.header,.hero,.section,.journey,.faq,.footer{max-width:1200px;margin:auto;padding-left:32px;padding-right:32px}
.header{display:flex;align-items:center;justify-content:space-between;padding-top:24px;padding-bottom:24px;gap:24px}
.brand{display:flex;align-items:center;gap:9px;font-size:25px;font-weight:800;letter-spacing:-1px;color:#122c38}
.brandIcon{color:#548331;font-size:32px}
.brandBy{font-size:11px;letter-spacing:0;font-weight:400;color:#5b6f76;margin-left:4px}
.header nav{display:flex;align-items:center;flex-wrap:wrap;gap:28px;font-size:13px}
.header nav a{color:#29424b}
.login{border:1px solid #bac6bf;padding:10px 16px;border-radius:6px}
.hero{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:55px;padding-top:64px;padding-bottom:74px}
.eyebrow{font-size:11px!important;font-weight:700;letter-spacing:1.8px;display:flex;align-items:center;gap:9px;color:#54723b}
.eyebrow>span{width:7px;height:7px;border-radius:50%;background:#679536}
.hero h1{font-size:clamp(40px,4.5vw,62px);line-height:1.08;letter-spacing:-2.8px;font-weight:600;margin:26px 0}
.hero h1 em{font-style:normal;color:#5a7e36}
.intro{font-size:21px;line-height:1.45;max-width:440px}
.description{color:#5b6d73;font-size:15px;max-width:460px;margin-top:18px}
.actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:30px}
.primary{display:inline-flex;justify-content:center;align-items:center;gap:25px;background:#b4f16a;color:#142d1e;border:1px solid #a1dc59;border-radius:6px;padding:15px 21px;font-weight:700;font-size:14px;transition:background .2s}
.primary:hover{background:#c8ff88}
.secondary{font-size:13px;color:#29424b}
.note{font-size:11px;color:#66777a;margin-top:18px}
.demo{background:#0c2330;color:#e4edf0;border:1px solid #294651;border-radius:12px;overflow-x:auto;overflow-y:hidden;box-shadow:0 24px 55px #16313b20;scroll-margin-top:24px;max-width:100%}
.demoTop{display:flex;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid #29424c;font-size:8px;letter-spacing:1px;color:#a4bbc4}
.demoTop i,.status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#b4f16a;margin-right:6px}
.demoTitle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:25px 24px 0}
.demoTitle h2{font-size:19px;font-weight:500;margin:0}
.live{font-size:9px;color:#b4f16a;border:1px solid #547440;border-radius:4px;padding:2px 6px;letter-spacing:1px}
.demoHint{font-size:12px;color:#9bb3bd;margin:6px 24px 10px}
.net{width:100%;height:auto;display:block}
.controls{display:flex;gap:16px;padding:18px 24px;flex-wrap:wrap;align-items:center}
.control-group{display:flex;flex-direction:column;gap:8px}
.group-label{font-size:11px;font-weight:700;letter-spacing:1px;color:#7495a3;text-transform:uppercase}
.controls .transition{cursor:pointer;font:inherit;font-size:12px;font-weight:600;border-radius:4px;padding:8px 15px;border:1px solid transparent;transition:all .2s}
.controls .transition.enabled{background:#b4f16a;color:#142d1e}
.controls .transition.enabled:hover{background:#c8ff88;box-shadow:0 0 8px #b4f16a40}
.controls .transition.disabled{background:#477340;color:#9bb3bd;cursor:not-allowed;opacity:.6}
.controls .reset{margin-left:auto;background:transparent;color:#c5d6dd;border-color:#39525f;cursor:pointer}
.status{display:flex;justify-content:space-between;padding:13px 24px;background:#132e3b;border-top:1px solid #29424c;font:11px monospace;color:#c6d7de}
.caption{font-size:10px;color:#9bb3bd;padding:10px 24px;margin:0}
.disciplines{border-top:1px solid #d9dfd5;border-bottom:1px solid #d9dfd5;display:flex;justify-content:center;align-items:center;gap:35px;padding:23px 32px;flex-wrap:wrap;font-size:13px}
.disciplines span{font-size:9px;letter-spacing:1.5px;color:#687b70}
.disciplines p{margin:0}
.disciplines b{color:#9aad96;font-weight:400}
.section{padding-top:85px;padding-bottom:85px}
.sectionHeading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:35px}
.section h2,.journey h2,.cta h2{font-size:clamp(30px,3.5vw,44px);letter-spacing:-1.6px;line-height:1.18;font-weight:500;margin:15px 0}
.sectionHeading>p{max-width:360px;font-size:14px;color:#5b6d73}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards article{border:1px solid #d5ded0;border-radius:8px;padding:26px;background:#fcfdf9}
.number{display:flex;justify-content:space-between;color:#667f52;font:12px monospace}
.number span{font-size:20px}
.cards h3{font-size:19px;line-height:1.3;font-weight:500;margin:38px 0 12px}
.cards p{font-size:14px;color:#5b6d73;margin:0}
.journey{display:grid;grid-template-columns:1fr 1fr;gap:90px;padding-top:65px;padding-bottom:65px;border-top:1px solid #d9dfd5}
.journey>div>p:not(.eyebrow){max-width:370px;font-size:15px;color:#5b6d73}
.textLink{display:inline-block;margin-top:22px;color:#35581d;font-size:14px;font-weight:600}
.journey ol{list-style:none;margin:0;padding:0}
.journey li{display:flex;gap:24px;padding:20px 0;border-bottom:1px solid #d9dfd5}
.journey li>span{font:12px monospace;color:#65824f;padding-top:4px}
.journey h3{font-size:19px;margin:0;font-weight:500}
.journey li p{font-size:14px;color:#5b6d73;margin:5px 0 0}
.faq{padding-top:35px;padding-bottom:75px;display:grid;grid-template-columns:1fr 1.4fr;gap:40px}
.faq h2{font-size:27px;font-weight:500;letter-spacing:-1px}
.faq details{border-bottom:1px solid #d9dfd5;padding:19px 0}
.faq summary{cursor:pointer;font-weight:500;font-size:15px}
.faq details p{font-size:14px;color:#5b6d73}
.cta{text-align:center;background:#102d38;color:#f3f7ec;padding:65px 24px}
.cta .eyebrow{justify-content:center;color:#b4f16a}
.cta h2{font-size:clamp(36px,4vw,52px);margin:20px 0}
.cta>p:not(.eyebrow){font-size:15px;color:#b3c7ce;margin-bottom:28px}
.footer{padding-top:30px;padding-bottom:30px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.footer p,.footer>a:last-child{font-size:11px;color:#607478}
.footer .brand{font-size:20px}
@media(max-width:900px){.hero{gap:28px}
.header nav{gap:16px}
.hero h1{font-size:44px}
.actions{gap:12px}
.journey{gap:40px}
.disciplines{gap:20px}
}
@media(max-width:700px){.header,.hero,.section,.journey,.faq,.footer{padding-left:22px;padding-right:22px}
.header{flex-wrap:wrap;gap:12px}
.header nav{width:100%;justify-content:space-between;gap:10px;font-size:12px}
.login{padding:8px 10px}
.hero{grid-template-columns:1fr;padding-top:35px;padding-bottom:45px;gap:35px}
.hero h1{font-size:46px;letter-spacing:-2px}
.eyebrow{font-size:9px!important}
.intro{font-size:20px}
.demoTop{font-size:7px;padding:15px}
.disciplines{gap:12px;font-size:11px}
.disciplines>span{width:100%;text-align:center}
.disciplines b{display:none}
.section{padding-top:50px;padding-bottom:50px}
.sectionHeading{display:block}
.cards{grid-template-columns:1fr}
.cards h3{margin-top:20px}
.journey,.faq{grid-template-columns:1fr;gap:20px;padding-top:35px;padding-bottom:40px}
.footer{flex-wrap:wrap}
.demoTitle{padding-left:18px;padding-right:18px}
.demoTitle h2{font-size:18px}
.controls{padding-left:18px;padding-right:18px}
.status{padding-left:18px;padding-right:18px;font-size:10px}
}

.language-picker:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; }
.language-picker select { max-width: 120px; padding: 7px; border: 1px solid #7495a3; border-radius: 6px; color: #dce7eb; background: #102c38; font: inherit; }
.language-picker select:focus-visible { outline: 2px solid #b4f16a; outline-offset: 3px; }
/* Translations can be longer than the Portuguese fallback. */
.hero > *, .journey > *, .faq > *, .sectionHeading > * { min-width: 0; }
.hero h1, .section h2, .journey h2, .cta h2 { overflow-wrap: anywhere; }
.eyebrow > span[data-i18n] { width: auto; height: auto; border-radius: 0; background: none; }
.status { flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: clamp(34px, 10vw, 46px); }
}

/* Zoom fullscreen mode - 60% area útil */
.demo-zoom-container { display: flex; gap: 12px; padding: 12px 24px; }
.zoom-btn { cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; border-radius: 4px; padding: 8px 15px; background: #478720; color: #f3f7ec; border: 1px solid #5a9a2c; transition: all 0.2s; }
.zoom-btn:hover { background: #5a9a2c; box-shadow: 0 0 8px #b4f16a40; }

body.demo-fullscreen { overflow: hidden; }
body.demo-fullscreen .page { display: none; }
body.demo-fullscreen .demo-fullscreen-overlay { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #0c1e26; z-index: 10000; padding: 20px; }
.demo-fullscreen-overlay .demo { flex: 1; margin: 0; max-width: 100%; display: flex; flex-direction: column; border: none; border-radius: 0; }
.demo-fullscreen-overlay .demo svg { flex: 1; width: 60%; max-width: 800px; height: auto; margin: 0 auto; }
.demo-fullscreen-overlay .demo .controls { flex-wrap: wrap; gap: 8px; padding: 12px 16px; font-size: 12px; justify-content: center; }
.demo-fullscreen-overlay .demo .status { font-size: 10px; padding: 8px 16px; text-align: center; }
.demo-fullscreen-overlay .demo .demoTop { padding: 10px 16px; font-size: 7px; }
.demo-fullscreen-overlay .demo .demoTitle { padding: 12px 16px 8px; }
.demo-fullscreen-overlay .demo .demoTitle h2 { font-size: 16px; }
.demo-fullscreen-overlay .demo .demoHint { display: none; }
.demo-fullscreen-overlay .demo .caption { display: none; }

/* Efeito visual nas transições ao hover dos botões */
.controls button:not(.reset) {
  cursor: pointer;
  transition: all 0.2s ease;
}

.controls button:not(.reset):hover {
  transform: scale(1.05);
  filter: brightness(1.15);
  box-shadow: 0 0 10px rgba(180, 241, 106, 0.5);
}

/* Highlight nas transições correspondentes */
svg rect[id^="transition-"]:hover {
  filter: brightness(1.4) drop-shadow(0 0 12px rgba(243, 247, 236, 0.8));
  cursor: pointer;
}

/* Transições ativas (amarelas) - sem animação contínua */
svg rect[fill="#fbbf24"] {
  stroke: #fbbf24;
  stroke-width: 2;
}

/* Botoeira momentânea: o sinal físico e o estado do motor são independentes. */
#demonstracao-button .push-button {
  min-height: 62px; padding: 16px 26px; border: 3px solid #d5ffa0;
  border-radius: 16px; background: linear-gradient(#d5ffa0, #91cf46);
  color: #142d1e; font-size: 17px; font-weight: 800;
  box-shadow: 0 8px 0 #447126, 0 12px 22px #0007;
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .12s, box-shadow .12s, background .12s;
}
#demonstracao-button .push-button:hover { transform: translateY(-2px); filter: none; }
#demonstracao-button .push-button.is-pressed {
  transform: translateY(7px); background: #ffcf75; border-color: #ffe4b3;
  box-shadow: 0 1px 0 #986122, inset 0 4px 9px #78461555, 0 0 26px #ffcf7560;
}
#demonstracao-button .push-button:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.push-button-light { display: inline-block; width: 12px; height: 12px; margin-right: 7px; border-radius: 50%; background: #477126; }
.is-pressed .push-button-light { background: #fff7da; box-shadow: 0 0 10px #fff; }
.button-signals { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 24px 18px; font: 700 12px monospace; }
.button-signals span { padding: 10px 12px; border: 1px solid #527180; border-radius: 6px; color: #dce7eb; }
.edge-pulse #button-edge-display { background: #b4f16a; color: #142d1e; border-color: #b4f16a; box-shadow: 0 0 18px #b4f16666; }
#demonstracao-button:has(.is-pressed) #button-state-display { color: #ffcf75; border-color: #ffcf75; }
#demonstracao-button .button-action { padding: 14px 24px 0; margin: 0; min-height: 3.5em; }
#button-token { transition: cx .25s ease; }
#button-motor-rotor { transform-origin: 240px 130px; opacity: .35; }
.motor-on #button-motor-rotor { opacity: 1; animation: button-motor-spin 1.2s linear infinite; }
@keyframes button-motor-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #button-token, #demonstracao-button .push-button { transition: none; }
  .motor-on #button-motor-rotor { animation: none; }
}

#button-code-gen.st-generate { background: #312e81; border: 1px solid #c4b5fd; color: #f8fafc; border-radius: 8px; padding: 13px 16px; font: 700 14px system-ui,sans-serif; }
#button-st-dialog { width: min(860px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); box-sizing: border-box; margin: auto; padding: 0; border: 1px solid #64748b; border-radius: 10px; background: #f8fafc; color: #0f172a; box-shadow: 0 18px 50px #0f172a59; }
#button-st-dialog::backdrop { background: #020617b8; }
.st-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #312e81; color: white; padding: 14px 18px; }
.st-header h2 { margin: 0; font: 700 18px system-ui,sans-serif; }
.st-header button { background: transparent; border: 0; color: white; font-size: 28px; cursor: pointer; padding: 0 8px; }
.st-content { padding: 14px 18px; }
.st-content p { margin: 0 0 12px; font: 13px/1.5 system-ui,sans-serif; }
.st-mapping { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.st-mapping label { flex: 1 1 210px; font: 600 13px system-ui,sans-serif; color: #3730a3; }
.st-mapping input { display: block; box-sizing: border-box; width: 100%; margin-top: 6px; padding: 10px; border: 1px solid #94a3b8; border-radius: 6px; color: #0f172a; background: white; font: 15px monospace; }
.st-mapping input[aria-invalid="true"] { border: 2px solid #b91c1c; }
#button-st-dialog .st-code-view { max-height: 44vh; overflow: auto; white-space: pre; margin: 12px 0; padding: 14px 16px; border-radius: 6px; background: #0f172a; color: #cbd5e1; font: 14px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size: 4; }
.st-code-view code { font: inherit; color: inherit; }
.st-code-view .st-keyword { color: #c4b5fd; font-weight: 700; }
.st-code-view .st-comment { color: #64748b; font-style: italic; }
.st-code-view .st-string { color: #86efac; }
.st-code-view .st-number { color: #fbbf24; }
.st-help, #st-address-help { color: #475569; }
.st-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; background: white; border-top: 1px solid #cbd5e1; }
#st-code-status { flex: 1 1 260px; font: 12px/1.5 system-ui,sans-serif; color: #475569; }
.st-footer button { border: 1px solid #94a3b8; border-radius: 6px; padding: 10px 14px; background: white; color: #312e81; cursor: pointer; font-weight: 700; }
.st-footer #st-download { background: #4f46e5; color: white; border-color: #4f46e5; }
.st-footer button:disabled { opacity: .5; cursor: not-allowed; }
#button-st-dialog :focus-visible { outline: 3px solid #8b5cf6; outline-offset: 2px; }

/* Shared demo controls use external styles to respect the landing CSP. */
#demo-container { position: relative; min-width: 0; }
#demo-container .demo[hidden] { display: none !important; }
#demo-container .net { max-width: 100%; height: auto; display: block; }
#demo-container .demo-switcher { flex-shrink: 0; background: #b4f16a; color: #142d1e; border: 1px solid #8bc34a; padding: 6px 12px; font: 700 11px system-ui,sans-serif; border-radius: 4px; letter-spacing: .5px; cursor: pointer; }
#demo-container .controls button { font-family: system-ui,sans-serif; }
#demo-container .controls .reset { white-space: normal; }
#demo-container .demoTitle h2 { min-width: 0; }