/* Classic desktop chrome. Content is semantic HTML, never drawn on a canvas. */
:root { --desktop:#3c6fa3; --panel:#d4d4d4; --paper:#fff; --ink:#171717; --title:#4e56b5; --edge:#373737; --light:#fff; --muted:#494949; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-padding-top:20px; }
body { margin:0; background:var(--desktop); color:var(--ink); font-family:'Courier New',Courier,monospace; font-size:15px; line-height:1.55; }
a { color:#192666; text-underline-offset:3px; }
a:hover { color:#000; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
:focus-visible { outline:3px solid #ffdb62; outline-offset:3px; }
p { margin:0 0 16px; }
h1,h2,h3 { line-height:1.25; }
h1 { font-size:34px; letter-spacing:-1.2px; margin:0 0 22px; }
h2 { font-size:20px; margin:0 0 12px; }
h3 { font-size:15px; margin:0 0 6px; }
.container { width:min(1100px,calc(100% - 48px)); margin-inline:auto; }
.site-header { color:#fff; padding:34px 0 30px; }
.nav-wrap { width:min(1100px,calc(100% - 48px)); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:14px; color:inherit; text-decoration:none; font-size:23px; font-weight:bold; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:54px; height:46px; border:2px solid #fff; box-shadow:3px 3px 0 #244a74; font-size:19px; letter-spacing:-1px; }
.site-header nav { display:flex; align-items:center; gap:16px; font-size:14px; }
.site-header nav a { color:#fff; text-decoration:none; padding:12px 0; }
.site-header nav span { color:#d0e2f4; }
.site-header nav a[aria-current] { text-decoration:underline; text-decoration-thickness:2px; }
.site-header nav a:hover { text-decoration:underline; }
.skip-link { position:absolute; top:-100px; background:#fff; color:#111; padding:12px; z-index:5; }
.skip-link:focus { top:8px; left:8px; }
.window { min-width:0; background:var(--panel); border:2px solid; border-color:var(--light) var(--edge) var(--edge) var(--light); box-shadow:inset -1px -1px #858585,inset 1px 1px #eee,3px 3px 0 #244a74; padding:4px; }
.title-bar { background:var(--title); color:#fff; font-size:14px; font-weight:bold; line-height:1.4; padding:5px 8px; margin:0; display:flex; justify-content:space-between; gap:8px; }
h2.title-bar { justify-content:flex-start; gap:0; }
.window-symbol { font-size:12px; }
.window-body { padding:24px; }
.overview-hero { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px; align-items:start; margin-top:10px; margin-bottom:22px; }
.overview-copy .window-body { padding:30px; }
.kicker { font-weight:bold; font-size:12px; text-transform:uppercase; letter-spacing:1px; margin-bottom:18px; }
.intro { max-width:560px; font-size:16px; line-height:1.7; }
.overview-actions { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 16px; }
.button,.text-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 14px; background:var(--panel); border:2px solid; border-color:var(--light) var(--edge) var(--edge) var(--light); box-shadow:inset -1px -1px #858585,inset 1px 1px #eee; color:#111; text-decoration:none; font-size:14px; }
.button:hover,.text-button:hover { background:#e4e4e4; color:#000; }
.button:active,.text-button:active { border-color:var(--edge) var(--light) var(--light) var(--edge); }
.button-dark { font-weight:bold; }
.button:disabled,.text-button:disabled { cursor:wait; color:#555; }
.text-button { font-size:13px; gap:10px; }
.inline-note { font-size:11px; color:var(--muted); }
.api-spec .window-body { padding:20px; }
.api-spec dl { margin:0 0 18px; border:2px solid; border-color:#888 #fff #fff #888; background:#fff; }
.api-spec dl div { padding:9px 12px; display:flex; justify-content:space-between; gap:8px; border-bottom:1px solid #dedede; font-size:13px; }
.api-spec dl div:last-child { border:0; }
.api-spec dt { color:#444; }
.api-spec dd { margin:0; font-weight:bold; text-align:right; }
.api-spec p { font-size:12px; line-height:1.6; }
.api-spec p:last-child { margin:0; }
.output-section { display:grid; grid-template-columns:1fr 1.6fr; gap:24px; padding:24px; margin-bottom:22px; }
.output-section p { font-size:13px; color:#444; }
.plain-list { margin:0; padding:0 0 0 20px; font-size:14px; }
.plain-list li { padding:0 0 9px 4px; }
.plain-list li:last-child { padding-bottom:0; }
.example-section { padding:24px; margin-bottom:22px; }
.section-heading { display:flex; justify-content:space-between; align-items:start; gap:16px; margin-bottom:20px; }
.section-heading p { font-size:13px; margin:0; }
.sample-label { flex-shrink:0; font-size:11px; padding:3px 8px; border:1px solid #737373; background:#e8e8e8; }
.code-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.code-pair article { min-width:0; }
.code-pair h3 { font-size:12px; background:#bebebe; padding:8px 12px; margin:0; border:1px solid #8e8e8e; }
pre { margin:0; padding:16px; background:#fff; border:2px solid; border-color:#777 #fff #fff #777; font:12px/1.65 'Courier New',monospace; overflow:auto; }
.code-pair pre { height:100%; max-height:320px; height:270px; }
.footnote { font-size:12px; color:var(--muted); margin:16px 0 0; }
.lifecycle-section { padding:24px; margin-bottom:22px; }
.section-intro { font-size:13px; max-width:720px; }
.endpoint-list { list-style:none; padding:0; margin:24px 0 0; border:2px solid; border-color:#888 #fff #fff #888; background:#fff; }
.endpoint-list li { display:grid; grid-template-columns:30px 1fr 265px; align-items:start; gap:14px; padding:16px; border-bottom:1px solid #ccc; }
.endpoint-list li:last-child { border:0; }
.step-number { font-size:12px; color:#434b9d; font-weight:bold; }
.endpoint-list p { font-size:12px; margin:0; }
.endpoint-list code { font-size:11px; word-break:break-word; padding:5px 7px; background:#eee; border:1px solid #ccc; }
.policy-section { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:22px; }
.policy-section p { font-size:13px; padding:18px; margin:0; }
.machine-section { display:grid; grid-template-columns:1.5fr 1fr; padding:24px; gap:24px; margin-bottom:26px; }
.machine-section p { font-size:13px; margin:0; }
.machine-section ul { margin:0; list-style:none; padding:0; font-size:13px; }
.machine-section li a { display:inline-block; padding:8px 0; }
.site-footer { color:#fff; margin-top:32px; padding:24px 0 36px; border-top:1px solid #91b3d4; font-size:12px; }
.site-footer>div { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.site-footer .brand { font-size:16px; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:20px; margin:15px 0; }
.site-footer a { color:#fff; }
.site-footer p { color:#dbe7f2; margin:0; }
.page-heading { color:#fff; padding:12px 0 22px; }
.breadcrumb { display:flex; gap:12px; font-size:12px; margin-bottom:24px; }
.breadcrumb a { color:#fff; }
.page-heading h1 { font-size:30px; margin-bottom:12px; }
.page-heading .kicker { display:none; }
.page-heading>p:last-child { max-width:680px; font-size:14px; margin-bottom:0; }
.setup-layout { display:grid; grid-template-columns:minmax(0,350px) minmax(0,1fr); align-items:start; gap:18px; margin-bottom:22px; }
.setup-guide .window-body { padding:18px; }
.setup-steps { list-style:none; margin:0 0 24px; padding:0; }
.setup-steps li { display:grid; grid-template-columns:24px 1fr; gap:10px; margin-bottom:20px; }
.setup-steps p { font-size:12px; margin:0; }
.endpoint-card { border:2px solid; border-color:#888 #fff #fff #888; background:#e6e6e6; padding:14px; }
.endpoint-card h2 { font-size:13px; }
.endpoint-card code { font-size:12px; overflow-wrap:anywhere; }
.endpoint-card p { font-size:12px; margin:10px 0 0; }
.setup-note { font-size:12px; margin:20px 0 12px; }
.document-links { list-style:none; padding:0; margin:0; font-size:12px; }
.document-links a { display:inline-block; padding:7px 0; }
.editor-title { align-items:center; }
.editor-title h2 { margin:0; font-size:14px; }
.editor-title>span { font-size:12px; }
.editor-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px; font-size:11px; }
.prompt-code { margin:0 10px; padding:18px; max-height:720px; white-space:pre-wrap; overflow-wrap:anywhere; tab-size:2; }
.editor-footer { display:flex; justify-content:space-between; gap:12px; padding:14px; font-size:12px; }
.no-script-note { font-size:12px; padding:12px; margin:0; }
.setup-formats { padding:24px; }
.setup-formats p { font-size:13px; }
.setup-formats>div { display:flex; flex-wrap:wrap; gap:20px; font-size:13px; }
.copy-status { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); background:#fff; color:#111; font-size:13px; box-shadow:3px 3px #222; z-index:10; }
.copy-status:not(:empty) { padding:12px 18px; border:2px solid var(--title); }
@media(max-width:900px) {
  .nav-wrap { align-items:start; }
  .site-header nav { gap:10px; font-size:12px; flex-wrap:wrap; justify-content:end; }
  .overview-hero { grid-template-columns:1.4fr 1fr; }
  .overview-copy .window-body { padding:22px; }
  h1 { font-size:29px; }
  .endpoint-list li { grid-template-columns:24px 1fr; }
  .endpoint-list code { grid-column:2; }
  .setup-layout { grid-template-columns:300px minmax(0,1fr); }
  .editor-controls { flex-direction:column; align-items:start; }
}
@media(max-width:680px) {
  .container,.nav-wrap { width:calc(100% - 24px); }
  .site-header { padding:22px 0 12px; }
  .nav-wrap { flex-direction:column; gap:12px; }
  .brand { font-size:21px; }
  .brand-mark { width:42px; height:38px; font-size:16px; }
  .site-header nav { justify-content:start; gap:12px; font-size:12px; }
  .site-header nav a { padding:8px 0; }
  .overview-hero,.output-section,.code-pair,.policy-section,.machine-section,.setup-layout { grid-template-columns:1fr; }
  .overview-copy .window-body { padding:22px 18px; }
  h1 { font-size:29px; }
  .intro { font-size:15px; }
  .overview-actions { flex-direction:column; align-items:stretch; }
  .text-button { flex-wrap:wrap; gap:4px 10px; width:100%; }
  .output-section,.example-section,.lifecycle-section,.machine-section,.setup-formats { padding:18px; }
  .section-heading { flex-direction:column; }
  .code-pair pre { height:auto; max-height:none; white-space:pre-wrap; overflow-wrap:anywhere; }
  .endpoint-list li { padding:12px; gap:8px; }
  .page-heading { padding-top:14px; }
  .page-heading h1 { font-size:27px; }
  .setup-guide .window-body { padding:18px; }
  .editor-title h2 { font-size:12px; }
  .editor-title>span { font-size:11px; }
  .prompt-code { max-height:600px; padding:12px; margin-inline:8px; font-size:11px; }
  .editor-controls { align-items:stretch; }
  .editor-footer { flex-wrap:wrap; font-size:11px; }
  .site-footer>div { flex-direction:column; align-items:start; gap:8px; }
}