:root{--accent:#244b99;--ink:#111}*{box-sizing:border-box}body{background:var(--ink);color:#fff;margin:0;font:16px/1.6 Arial,Helvetica,sans-serif}header{padding:22px 5vw;border-bottom:1px solid #555;display:flex;justify-content:space-between;gap:20px;font-size:14px}header span,small{color:#bbb}main{max-width:1200px;margin:auto;padding:32px 5vw}.heading{max-width:750px;margin-bottom:32px}h1{font-size:clamp(34px,5vw,58px);line-height:1.12;margin:10px 0 20px}h1 span{background:var(--accent);color:#111;padding:0 5px}.heading p{font-size:18px}h2{font-size:25px;line-height:1.25;margin:0 0 16px}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.form-panel,.output{padding:26px;border:1px solid #555}.form-panel{background:#1c1c1c;border-top:3px solid var(--accent)}label{display:block;margin:18px 0}label small{font-size:14px;margin-left:8px}input,textarea{font:inherit;background:#111;color:#fff;border:1px solid #777;width:100%;padding:12px;margin-top:8px}textarea{min-height:100px;resize:vertical}button{font:inherit;font-weight:bold;padding:12px 18px;background:var(--accent);color:#111;border:1px solid var(--accent);cursor:pointer}.secondary{background:transparent;color:#fff;border-color:#888}button:disabled{opacity:.45;cursor:default}.saved{display:block;font-size:14px;margin-top:16px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.7 monospace;background:#202020;padding:20px;max-height:460px;overflow:auto}.actions{display:flex;flex-wrap:wrap;gap:10px}#status,#example-status{font-size:14px;color:var(--accent)}.example{border-top:1px solid #666;margin-top:36px;padding-top:26px}.kicker{font:14px monospace;letter-spacing:.06em}summary{cursor:pointer;padding:16px 0;color:var(--accent);font-weight:bold}.example pre{max-height:none}footer{border-top:1px solid #555;margin-top:32px;padding:22px 0}footer small{font-size:14px}button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}@media(max-width:760px){.workspace{grid-template-columns:1fr}.form-panel,.output{padding:20px}header span{display:none}.heading{margin-bottom:24px}}
/* Flexible grids also cover tablet split views and folded cover screens. */
@media(max-width:760px){body>main{max-width:600px;padding-inline:18px}body .heading p,body label,body .email-gate p,body .output>p{font-size:17px;line-height:1.65}body .heading h1{font-size:clamp(36px,9vw,48px)}body .form-panel,body .output{padding:20px}body .saved,body footer small,body .email-gate small{font-size:14px}body pre{font-size:16px;line-height:1.7}body .actions{flex-direction:column}body .actions button{width:100%}}
.workspace>*{min-width:0}html{-webkit-text-size-adjust:100%}input,textarea{max-width:100%;font-size:16px}h1,h2,p,small,label{overflow-wrap:anywhere}
@media(max-width:950px){.workspace{grid-template-columns:minmax(0,1fr)}.form-panel,.output{width:100%;min-width:0}pre{max-width:100%}}
@media(max-width:420px){body>main{padding:24px 14px}body>header{padding:14px;flex-wrap:wrap}.form-panel,.output{padding:16px}.email-gate{padding:14px}.email-gate button,.actions button{width:100%;margin-right:0}pre{padding:14px;font-size:14px}.heading p{font-size:16px}.legal-links{gap:12px}.legal-links button{min-height:44px}.legacy-cookie-notice{padding:14px;left:8px;right:8px;max-height:55dvh;overflow:auto}.legal-dialog{padding:18px;max-height:90dvh}}
@media(pointer:coarse){button{min-height:44px}}

header{align-items:center}.brand-logo{width:280px;height:48px;position:relative;overflow:hidden;flex-shrink:0}.brand-logo img{position:absolute;width:318px;max-width:none;height:auto;left:-19px;top:-28px}@media(max-width:760px){.brand-logo{width:238px;height:42px}.brand-logo img{width:270px;left:-16px;top:-24px}}

/* Calm navy theme with a restrained blue atmospheric accent. */
body{background:#070c17;background-image:radial-gradient(ellipse 75% 440px at 65% 0%,rgba(32,64,128,.13),transparent 80%);min-height:100vh;color:#f5f6fa}
header{background:rgba(7,12,23,.9);border-bottom-color:#222a39}
.brand-logo img{mix-blend-mode:screen}
.form-panel,.output{background:#101827;border-color:#2b3342;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.1)}
.form-panel{border-top:1px solid #2b3342}
input,textarea{background:#0a101d;border-color:#3d4759;border-radius:7px}
input::placeholder,textarea::placeholder{color:#939caf}
button{border-radius:7px}
button:hover:not(:disabled){filter:brightness(1.06)}
pre{background:#0a101d;border:1px solid #252e3e;border-radius:8px;color:#d8deea}
header span,small{color:#a7b0c0}
.heading p,.example>p{color:#b9c1ce}
h1{letter-spacing:-.035em}
h1 span{background:none;color:var(--accent);padding:0}
.example,footer{border-top-color:#293140}
.secondary{border-color:#475267;color:#e2e7f0}

/* Slow, low-contrast ribbons dissolve into the calm navy surface. */
body{isolation:isolate}
#cosmos{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.55;filter:blur(.2px);mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.65) 15%,#000 45%,rgba(0,0,0,.45) 80%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.65) 15%,#000 45%,rgba(0,0,0,.45) 80%,transparent)}

/* Midnight blue; one focus treatment per field. */
h1 span{color:#244b99;background:linear-gradient(105deg,#244b99 0%,#244b99 45%,#496cae 78%,#8da5cd 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
button:not(.secondary){background:#244b99;border-color:#3b5c9b;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
summary,#status,#example-status{color:#a3b8df}
.form-panel,.output{border:1px solid #33435e;background:#101827;box-shadow:0 0 12px rgba(215,231,255,.025)}
input,textarea{transition:border-color 150ms ease,box-shadow 150ms ease}
input:focus,textarea:focus{outline:none;border-color:#8196ba;box-shadow:0 0 5px rgba(180,204,245,.14)}
button:focus-visible,summary:focus-visible{outline:2px solid #a3b8df;outline-offset:3px}
@media(prefers-reduced-motion:reduce){input,textarea{transition:none}}
.legal-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:20px}.legal-links button{border:0;background:none;color:#9aaecb;font-size:13px;padding:0;width:auto;box-shadow:none}.legal-dialog{position:fixed;inset:0;margin:auto;background:#0d1728;color:#e5edfc;border:1px solid #476494;border-radius:12px;width:min(780px,calc(100% - 30px));max-height:85vh;padding:28px;overflow:auto;font-family:Arial,sans-serif}.legal-dialog::backdrop{background:#000b}.legal-dialog h1{font-size:30px}.legal-dialog h2{font-size:23px;margin:28px 0 15px}.legal-dialog p{font-size:15px;line-height:1.7;color:#b6c3da}.legal-dialog table{font-size:13px;display:block;overflow:auto;border-collapse:collapse}.legal-dialog td,.legal-dialog th{border:1px solid #354868;padding:9px}.legal-close{width:auto!important;margin-left:auto;display:block!important;padding:7px 14px!important}.legal-actions{display:flex;gap:10px;flex-wrap:wrap}.legal-actions button{width:auto;flex:1;padding:10px 14px;background:#183869;border:1px solid #547bb7;border-radius:7px;color:white;box-shadow:none;font-size:14px}.legacy-cookie-notice{position:fixed;bottom:16px;left:16px;right:16px;max-width:700px;background:#101d31;border:1px solid #42699d;border-radius:12px;padding:18px 22px;z-index:50;box-shadow:0 10px 35px #0009}.legacy-cookie-notice p{font-size:14px;line-height:1.6;margin:0 0 12px;color:#c0cfe4}.legal-dialog form{margin-top:20px}

.signin-button{display:inline-block;padding:12px 18px;background:#244b99;color:white;border:1px solid #3b5c9b;border-radius:7px;text-decoration:none}.saved a{color:#a3b8df}
.email-gate{padding:20px;margin:0 0 24px;border:1px solid #33435e;border-radius:8px;background:#0a101d}.email-gate h3{margin:0 0 8px}.email-gate button{margin:12px 8px 0 0}.email-gate a{color:#a3b8df}.email-gate [hidden]{display:none}.access-note{font-size:14px;color:#b6c8e5}#brief-fields:disabled{opacity:.45}.email-gate input{max-width:100%}
/* Keep the attribution and policy footer at the page bottom without overlap. */
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}body>header{flex-shrink:0}body>main{flex:1;display:flex;flex-direction:column;width:100%;margin:0 auto}main>.workspace{margin-bottom:32px}main>footer{margin-top:auto;flex-shrink:0;padding-bottom:12px}.email-gate fieldset{border:0}