/* Dev Scenario site: base styles. Colours and type follow the approved mockup. */
body{margin:0;background:#0A0C10;color:#E6E9EE;font-family:"Geist",system-ui,sans-serif;font-size:16px;line-height:1.55}
*,*::before,*::after{box-sizing:border-box}
.page-docs{line-height:1.65}
a{color:#FFB547;text-decoration:none}a:hover{color:#FFD08A}
.k{color:#7DD3FC}.s{color:#FDE68A}.c{color:#6B7380}
@keyframes dsSpin{to{transform:rotate(360deg)}}
@keyframes dsHalo{0%,100%{box-shadow:0 0 0 3px rgba(124,138,245,.18)}50%{box-shadow:0 0 0 6px rgba(124,138,245,.06)}}
@keyframes dsIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ds-spin{animation:dsSpin .85s linear infinite}
.ds-halo{animation:dsHalo 1.4s ease-in-out infinite}
.ds-in{animation:dsIn .35s ease-out both}
@keyframes dsDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,-2%,0) scale(1.05)}100%{transform:translate3d(-2%,1%,0) scale(1.02)}}
.ds-aurora{animation:dsDrift 22s ease-in-out infinite alternate}
@keyframes dsBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.ds-bounce{animation:dsBounce 1.2s ease-in-out infinite}
.ds-body{height:600px}
.ds-asst{position:absolute;right:16px;bottom:72px;width:400px;max-width:calc(100% - 92px);height:440px;z-index:2}
@keyframes dsPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.ds-pop{animation:dsPop .3s ease-out both;transform-origin:bottom right}
@media (max-width: 900px){.ds-body{height:auto;flex-wrap:wrap}.ds-asst{position:static;width:100%;max-width:none;height:440px;border-radius:0}.ds-launch{display:none!important}}
@keyframes dsBlink{50%{opacity:0}}
.ds-caret{animation:dsBlink 1s steps(1) infinite}
@media (prefers-reduced-motion: reduce){.ds-spin,.ds-halo,.ds-in,.ds-bounce,.ds-pop,.ds-caret,.ds-aurora{animation:none}}

/* Phones: scale the big display type down (sizes are set inline from the design). */
@media (max-width: 640px){
  main h1{font-size:40px !important}
  main h2{font-size:30px !important}
}

/* Docs prose (used by the setup guide). */
.doc h2{margin:56px 0 0;font-size:28px;letter-spacing:-0.01em}
.doc h3{margin:32px 0 0;font-size:19px}
.doc p,.doc li{color:#B4BCC8}
.doc p{margin:12px 0 0}
.doc ul,.doc ol{margin:12px 0 0;padding-left:20px;line-height:1.75}
.doc strong{color:#E6E9EE}
.doc code{font-family:"Geist Mono",monospace;font-size:13px;background:#1A1F27;padding:1px 5px;border-radius:4px;color:#E6E9EE}
.doc pre{margin:12px 0 0;padding:14px 16px;background:#0A0C10;border:1px solid #232A34;border-radius:10px;font-family:"Geist Mono",monospace;font-size:13px;line-height:1.7;color:#E6E9EE;overflow-x:auto}
.doc pre code{background:none;padding:0;font-size:inherit}
.doc .file{display:block;margin:16px 0 -6px;font-family:"Geist Mono",monospace;font-size:12px;color:#9AA3AF}
.doc .pick{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px}
.doc .opt{background:#12161C;border:1px solid #232A34;border-radius:12px;padding:18px 18px 16px;min-width:0}
.doc .opt h4{margin:0;font-size:16px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.doc .opt p{font-size:15px}
.doc .tag{font-size:12px;font-weight:500;padding:2px 9px;border-radius:999px;background:#1A1F27;color:#B4BCC8}
.doc .tag.rec{background:#1F3B2A;color:#7FE49A}
.doc .or{margin:18px 0 0;font-size:13px;letter-spacing:0.06em;color:#FFD08A;font-family:"Geist Mono",monospace}
.doc .note{margin-top:16px;border:1px solid #3A3220;background:#17140D;border-radius:10px;padding:14px 16px;color:#E6D3A8;font-size:15px}
.doc .note strong{color:#FFD08A}
.doc .ok{margin-top:16px;border:1px solid #1F5B36;background:#0F2418;border-radius:10px;padding:14px 16px;color:#BFF0CF;font-size:15px}
.doc .ok strong{color:#7FE49A}
.doc .soon{margin-top:16px;border:1px solid #2A313C;background:#12161C;border-radius:10px;padding:14px 16px;color:#B4BCC8;font-size:15px}
.doc table{margin-top:14px;width:100%;border-collapse:collapse;font-size:14px}
.doc th,.doc td{text-align:left;padding:10px 12px;border-top:1px solid #1E242D;vertical-align:top;color:#B4BCC8}
.doc th{color:#E6E9EE;font-weight:600;background:#12161C}
.doc .tablewrap{overflow-x:auto;border:1px solid #232A34;border-radius:10px;margin-top:14px}
.doc .tablewrap table{margin:0;min-width:560px}
.doc .tablewrap tr:first-child th{border-top:0}

/* Code inside <pre> uses the block's font, not the browser default monospace. */
pre code{font-family:inherit;font-size:inherit;background:none;padding:0}