@font-face { font-family: Inter; src: url('/fonts/Inter-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
:root { font-family: Inter, sans-serif; font-weight: 300; color: #242428; background: #fff; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body.branding-open { overflow: hidden; }
button, textarea { font: inherit; }
.page-shell { min-height: 100vh; padding: 22px 3.2vw 18px; display: grid; grid-template-columns: minmax(180px,250px) minmax(0,1fr); grid-template-rows: 1fr auto; gap: 28px; }
.brand-block { grid-column: 1; grid-row: 1; }
.brand-block h1 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -.025em; font-weight: 500; white-space: nowrap; }
.brand-block h1:focus { outline: none; }
.brand-suffix { display: inline-block; }
.brand-suffix.exit { animation: suffix-exit .35s ease-in forwards; }
.brand-suffix.enter { animation: suffix-enter .4s ease-out both; }
.brand-description { margin: 8px 0 0; max-width: 210px; color: #85858c; font-size: 13px; line-height: 1.22; font-weight: 300; }
.watch-slides-button { width: 134px; height: 35px; margin-top: 16px; padding: 0 12px; border: 1px solid #a1a1a8; border-radius: 7px; background: #fff; color: #242428; font-size: 13px; font-weight: 300; cursor: pointer; }
.watch-slides-button:hover { border-color: #46464d; color: #111; }
.watch-slides-button:focus-visible { outline: 2px solid #51515a; outline-offset: 2px; }
.workspace { grid-column: 1 / -1; grid-row: 1; width: min(100%,810px); justify-self: center; align-self: start; margin-top: clamp(60px,10vh,105px); }
.markdown-input { display: block; width: 100%; height: 280px; resize: vertical; border: 1px solid #a1a1a8; border-radius: 7px; outline: none; padding: 24px 26px; color: #242428; background: #fff; font-size: 13px; line-height: 1.55; font-weight: 300; }
.markdown-input:focus-visible, .control-button:focus-visible, .action-button:focus-visible { outline: 2px solid #51515a; outline-offset: 2px; }
.markdown-input::placeholder { color: #a4a4aa; opacity: 1; }
.controls-row { display: flex; justify-content: space-between; gap: 20px; margin-top: 20px; }
.controls-panel { width: 260px; display: grid; gap: 24px; }
.control-button, .panel-button { min-height: 44px; border: 1px solid #a1a1a8; border-radius: 7px; background: #fff; color: #242428; text-align: center; font-size: 13px; font-weight: 300; }
.control-button, .action-button { cursor: pointer; }
.control-button:hover:not(:disabled), .action-button:hover:not(:disabled) { border-color: #46464d; color: #111; }
.panel-status { display: grid; place-items: center; }
.action-button { width: 100%; min-height: 42px; border: 0; background: transparent; }
.action-button:disabled, .download-button:disabled { color: #a4a4aa; cursor: default; }
.upload-button { width: 260px; padding: 0 8px; align-self: start; }
.download-button { cursor: pointer; }
.loading-indicator, .status-message { display: none; }
.panel-status-loading .loading-indicator { display: flex; gap: 5px; }
.panel-status-loading .action-button, .panel-status-success .action-button, .panel-status-error .action-button { display: none; }
.panel-status-success .status-message, .panel-status-error .status-message { display: block; }
.status-message { margin: 0; font-size: 12px; }
.panel-status-error .status-message { color: #a03e3e; }
.loading-indicator span { width: 7px; height: 7px; border-radius: 50%; background: #85858c; animation: pulse 1s ease-in-out infinite alternate; }
.loading-indicator span:nth-child(2) { animation-delay: .15s; }
.loading-indicator span:nth-child(3) { animation-delay: .3s; }
.result-actions { display: none; gap: 10px; align-items: center; margin-top: 16px; font-size: 12px; }
.result-actions.visible { display: flex; }
.result-actions a { color: #35353a; }
.warnings { color: #865c1f; font-size: 12px; line-height: 1.4; margin: 13px 0 0; white-space: pre-line; }
.pdf-preview { display: none; width: 100%; height: min(68vh,760px); margin-top: 16px; border: 1px solid #c9c9cd; border-radius: 7px; }
.pdf-preview.visible { display: block; }
.branding-overlay { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; background: rgba(77,79,85,.50); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.branding-overlay[hidden] { display: none; }
.branding-intro { display: none; width: 100vw; height: 100dvh; }
.branding-intro video { display: block; width: 100%; height: 100%; object-fit: cover; }
.branding-overlay.intro-only .branding-intro { display: block; }
.branding-overlay.intro-only .branding-carousel { display: none; }
.branding-carousel { position: relative; width: 100vw; height: 100dvh; overflow: hidden; }
.branding-reel { width: 100%; height: 200%; transition: transform .62s cubic-bezier(.22,1,.36,1); }
.branding-carousel.demo-open .branding-reel { transform: translateY(-50%); }
.branding-slide-stage, .branding-demo-stage { position: relative; width: 100%; height: 50%; }
.branding-slides { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x; }
.branding-slides::-webkit-scrollbar { display: none; }
.branding-slides:focus-visible { outline: 2px solid #51515a; outline-offset: 3px; }
.branding-slide { flex: 0 0 100%; min-width: 0; height: 100%; scroll-snap-align: start; }
.branding-video-slide { background: #e3e3e3 url('/static/branding/branding-4-start.png?v=desktop2') center / cover no-repeat; }
.branding-video-slide video { opacity: 0; }
.branding-video-slide.is-playing video { opacity: 1; }
.branding-slide picture { display: block; width: 100%; height: 100%; }
.branding-slide img, .branding-slide video { display: block; width: 100%; height: 100%; object-fit: cover; }
.branding-mcp-slide { background: #ffca62; }
.branding-navigation { position: absolute; z-index: 2; inset: auto 20px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: center; color: #fff; font-size: 11px; font-weight: 300; pointer-events: none; }
.branding-navigation button { padding: 0; border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto; }
.branding-navigation .branding-watch-demo { min-width: 150px; min-height: 42px; padding: 8px 22px; border-radius: 999px; background: rgba(255,255,255,.36); color: #1f2023; font-size: 15px; font-weight: 400; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.branding-watch-demo:hover { background: rgba(255,255,255,.58); }
.branding-watch-demo[hidden] { display: none; }
.branding-dots { display: flex; gap: 11px; align-items: center; padding: 10px 14px; border-radius: 20px; background: rgba(255,255,255,.72); pointer-events: auto; }
.branding-dots button { width: 9px; height: 9px; border-radius: 50%; background: #999; }
.branding-dots button[aria-current="true"] { background: #111; }
.branding-navigation button:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.branding-demo-stage { display: grid; place-items: center; background: #101013; }
.branding-demo-video { width: 100%; height: 100%; object-fit: contain; }
.branding-demo-video[hidden] { display: none; }
.branding-demo-back { position: absolute; z-index: 1; bottom: calc(72px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); min-height: 42px; padding: 9px 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.76); color: #202024; font-size: 14px; white-space: nowrap; cursor: pointer; }
.branding-demo-back:hover { background: #fff; }
.branding-demo-back:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mcp-link-button { display: grid; place-items: center; width: 134px; height: 35px; margin-top: 9px; padding: 0 11px; border: 1px solid #a1a1a8; border-radius: 7px; background: #fff; color: #3567b8; font-family: Inter, sans-serif; font-size: 13px; font-weight: 300; line-height: 1; text-align: center; text-decoration: none; }
.mcp-link-button:hover { border-color: #3567b8; color: #214f99; }
.mcp-link-button:focus-visible { outline: 2px solid #51515a; outline-offset: 2px; }
.footer-note { grid-column: 1 / -1; grid-row: 2; justify-self: center; display: flex; gap: 6px; color: #74747b; font-size: 8px; font-weight: 300; }
.footer-note a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes suffix-exit { to { opacity: 0; transform: translateY(14px); } }
@keyframes suffix-enter { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { to { opacity: .25; } }
@media (max-width: 1400px) { .page-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 22px; } .brand-block { grid-column: 1; grid-row: 1; } .brand-description { max-width: 330px; } .workspace { grid-column: 1; grid-row: 2; margin-top: 10px; } .footer-note { grid-row: 3; } }
@media (max-width: 750px) { .page-shell { padding: 22px; } .controls-row { flex-wrap: wrap; gap: 9px; } .controls-panel { gap: 9px; } .upload-button, .controls-panel { width: 100%; } .markdown-input { font-size: 16px; } }
@media (max-width: 600px) and (orientation: portrait) {
  .branding-mcp-slide img { object-fit: contain; }
  .branding-table-slide img,
  .branding-code-slide img { object-position: center top; }
  .branding-video-slide { background-color: #faf8f4; background-size: contain; background-repeat: no-repeat; }
  .branding-video-slide video { object-fit: contain; }
}
@media (max-width: 460px) { .markdown-input { min-height: 260px; } }
@media (prefers-reduced-motion: reduce) { .brand-suffix.exit, .brand-suffix.enter, .loading-indicator span { animation: none; } .branding-reel { transition: none; } }