:root { --ink:#e9d69b; --olive:#7d8060; --paper:#f2ead1; --black:#0b0c0b; --wine:#4d2928; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, Helvetica, sans-serif; color:var(--paper); background:radial-gradient(circle at top right,#343825 0, var(--black) 42rem); }
.masthead { display:flex; gap:1.2rem; align-items:center; padding:1.2rem clamp(1rem,4vw,5rem); border-bottom:1px solid #777350; background:#090a09; }
.masthead img { width:82px; height:82px; object-fit:cover; border:1px solid var(--olive); border-radius:50%; }
.eyebrow { margin:0 0 .25rem; color:var(--ink); letter-spacing:.15em; font-size:.75rem; font-weight:700; }
h1 { margin:0; letter-spacing:.11em; font-size:clamp(1.5rem,4vw,2.5rem); }
.tagline { margin:.2rem 0 0; color:#c6c4ad; }
.locked { margin-left:auto; text-align:right; color:var(--ink); font-size:.68rem; letter-spacing:.11em; border:1px solid var(--olive); padding:.5rem .7rem; }
.locked span { font-size:1rem; font-weight:800; }
main { max-width:1400px; margin:auto; padding:1.5rem; }
.notice { border-left:4px solid var(--ink); background:#2a2517; padding:1rem 1.1rem; line-height:1.5; margin-bottom:1.5rem; }
.mission-toolbar { margin:-.25rem 0 1.5rem; border:1px solid var(--olive); background:#10110e; box-shadow:0 12px 30px #0007; }
.toolbar-label { margin:0; padding:.7rem 1rem; background:#272a1c; color:var(--ink); font-size:.72rem; font-weight:800; letter-spacing:.12em; }
.toolbar-items { display:flex; flex-wrap:wrap; }
.toolbar-items a { display:flex; align-items:center; min-height:3.1rem; padding:.7rem .95rem; border-right:1px solid #56563e; border-top:1px solid #56563e; color:#f2ead1; text-decoration:none; font-size:.9rem; font-weight:700; line-height:1.25; }
.toolbar-items a:hover,.toolbar-items a:focus-visible { background:#343825; color:#fff5c3; outline:2px solid var(--ink); outline-offset:-2px; }
.toolbar-items .toolbar-primary { background:var(--ink); color:#171811; }
.toolbar-items .toolbar-primary:hover,.toolbar-items .toolbar-primary:focus-visible { background:#fff1b5; color:#171811; }
.widget { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1.1rem; padding:1rem 1.2rem; margin-bottom:1.5rem; border:1px solid var(--olive); background:#151711; box-shadow:0 16px 35px #0007; }
.widget img { width:66px; height:66px; object-fit:cover; border-radius:50%; border:1px solid var(--olive); }
.widget h2 { margin:.1rem 0 .4rem; font-size:1.16rem; }
.widget p { margin:0; color:#d6d4c1; line-height:1.42; }
.widget-button { white-space:nowrap; background:var(--ink); color:#151711; text-decoration:none; padding:.75rem .9rem; font-weight:800; }
.eligibility { border:1px solid #9e705e; border-left:4px solid #d39b7d; padding:1rem 1.1rem; margin-bottom:1.5rem; background:#2e1e1c; line-height:1.5; }
.eligibility label { font-weight:400; margin-top:.7rem; }
.eligibility input { margin-right:.4rem; }
.portal-home { margin-left:auto; border:1px solid var(--olive); color:var(--ink); text-decoration:none; padding:.65rem .8rem; font-size:.82rem; font-weight:700; }
.portal { max-width:1180px; margin:auto; padding:1.5rem; }
.portal-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.65fr); align-items:center; gap:2rem; border:1px solid #777350; background:#151711; padding:clamp(1.3rem,4vw,3rem); box-shadow:0 18px 45px #0009; }
.portal-hero h2 { font-size:clamp(1.7rem,4vw,3.2rem); line-height:1.04; margin:.25rem 0 1rem; max-width:14ch; }
.portal-hero p { color:#d9d7c4; font-size:1.05rem; line-height:1.5; max-width:56ch; }
.portal-hero img { width:100%; max-width:410px; border:1px solid #777350; justify-self:end; }
.portal-alert { margin:1.5rem 0; border-left:4px solid #d39b7d; background:#2e1e1c; padding:1rem 1.1rem; line-height:1.5; }
.trial-widget { margin:1.5rem 0; padding:1.5rem; border:1px solid var(--olive); background:linear-gradient(120deg,#272a1c,#151711); }
.trial-widget h2,.trial-hero h2,.trial-callout h2 { margin:.2rem 0 .6rem; font-size:1.55rem; }
.trial-widget p,.trial-hero p,.trial-callout p { color:#d7d5c0; line-height:1.5; max-width:72ch; }
.trial-hero { padding:clamp(1.4rem,5vw,3.3rem); background:linear-gradient(120deg,#272a1c,#11120f); border-bottom:4px solid var(--olive); }
.trial-hero h2 { font-size:clamp(1.8rem,4vw,3rem); max-width:17ch; }
.trial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.5rem 0; }
.trial-grid article { background:#171914; border:1px solid #56563e; padding:1.4rem; }
.trial-grid span { color:var(--ink); font-size:1.25rem; font-weight:800; }
.trial-grid h3 { color:#fff7dc; margin:.7rem 0 .4rem; }
.trial-grid p { color:#d3d1bc; line-height:1.45; margin:0; }
.trial-callout { padding:1.5rem; border-left:4px solid var(--ink); background:#2a2517; }
.tutorial { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.tutorial article { position:relative; padding:1.4rem 1.4rem 1.4rem 5.2rem; background:#171914; border:1px solid #56563e; min-height:150px; }
.tutorial span { position:absolute; left:1.3rem; top:1.35rem; font-weight:800; font-size:1.3rem; color:var(--ink); border-bottom:2px solid var(--ink); }
.tutorial h3 { margin:0 0 .45rem; color:#fff7dc; font-size:1.15rem; }
.tutorial p { margin:0; color:#d3d1bc; line-height:1.45; }
.portal-footer { margin:1.5rem 0 0; padding:1.5rem; background:var(--paper); color:#16150f; border-top:4px solid var(--olive); }
.portal-footer h2 { margin:.1rem 0 .7rem; font-size:1.35rem; }
.portal-footer p { line-height:1.5; }
.credit { margin-top:1rem; font:700 .8rem Arial,sans-serif; letter-spacing:.04em; }
.workspace { display:grid; grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); gap:1.5rem; align-items:start; }
.controls { background:#171914; padding:1.5rem; border:1px solid #56563e; box-shadow:0 20px 50px #0008; }
.controls h2 { margin:.1rem 0 1.4rem; font-size:1.35rem; }
label, legend { display:block; font-weight:700; margin-top:1rem; font-size:.9rem; color:#f1e8c9; }
select, textarea { width:100%; margin-top:.4rem; padding:.75rem; background:#090a09; border:1px solid #777350; color:#fff8e1; font:inherit; }
fieldset { margin:1.3rem 0 0; padding:.6rem .8rem .8rem; border:1px solid #777350; }
fieldset label { font-weight:400; margin:.6rem 0 0; }
.checkbox { font-weight:400; line-height:1.4; }
.checkbox input { margin-right:.45rem; }
button { margin-top:1.3rem; width:100%; padding:.8rem; border:0; background:var(--ink); color:#191a13; font-weight:800; cursor:pointer; font-size:1rem; }
button:hover { background:#fff1b5; }
.micro { font-size:.75rem; color:#c5c2aa; line-height:1.4; }
.paper { color:#14130e; background:var(--paper); padding:clamp(1.4rem,5vw,4rem); box-shadow:0 20px 70px #000b; font-family:Georgia, 'Times New Roman', serif; font-size:11pt; line-height:1.52; min-height:650px; }
.paper-head { display:flex; justify-content:space-between; gap:1rem; border-bottom:2px solid #1a1912; padding-bottom:.5rem; font:700 .63rem Arial,sans-serif; letter-spacing:.07em; }
.paper h2 { text-align:center; font-size:1.45rem; margin:2rem 0 .5rem; text-transform:uppercase; }
.byline { text-align:center; font-size:.92rem; border-bottom:1px solid #91876b; padding-bottom:1rem; }
.paper h3 { font-family:Arial,sans-serif; text-transform:uppercase; font-size:.78rem; letter-spacing:.06em; margin-top:1.8rem; }
table { width:100%; border-collapse:collapse; font-size:.9rem; margin-top:1.2rem; }
th,td { border:1px solid #8d846b; padding:.6rem; text-align:left; vertical-align:top; }
th { background:#ded3b4; font-family:Arial,sans-serif; text-transform:uppercase; font-size:.7rem; letter-spacing:.04em; }
.paper footer { border-top:2px solid #1a1912; margin-top:2rem; padding-top:.7rem; font:700 .65rem Arial,sans-serif; letter-spacing:.1em; text-align:center; }
@media (max-width:850px) { .workspace,.widget,.portal-hero,.tutorial,.trial-grid { grid-template-columns:1fr; } .masthead { align-items:flex-start; } .locked { display:none; } .paper-head { display:block; } .widget-button { width:max-content; } .portal-hero img { justify-self:start; } .portal-home { display:none; } .toolbar-items { display:grid; grid-template-columns:1fr 1fr; } .toolbar-items a { border-right:1px solid #56563e; } }
@media (max-width:480px) { .toolbar-items { grid-template-columns:1fr; } }