@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
:root { --page:#f1f4fa; --surface:#fff; --ink:#14213d; --soft:#55627f; --line:#d5dcea; --sun:#ffc53d; --sun-deep:#b37400; --blue:#2f5bea; --leaf:#0f8f66; --coral:#d6453a; --display:"Bricolage Grotesque","Atkinson Hyperlegible",system-ui,sans-serif; --body:"Atkinson Hyperlegible",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --page:#0d1530; --surface:#151f40; --ink:#eef2fb; --soft:#a5b1ce; --line:#2c3963; --sun-deep:#ffd66e; --blue:#7391ff; --leaf:#3fcf9f; --coral:#ff7d70; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--page); color:var(--ink); font:1.05rem/1.55 var(--body); }
.top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px clamp(16px,4vw,48px); background:#14213d; color:#e9edf7; }
.brand { font:750 1.4rem/1 var(--display); color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:10px; }
.mark { width:24px; height:24px; border-radius:50%; background:conic-gradient(from 45deg, var(--sun) 0 25%, #14213d 0 50%, var(--sun) 0 75%, #14213d 0); border:3px solid var(--sun); }
.top-link { color:#9aa7c7; font-size:.9rem; }
main { max-width:980px; margin:0 auto; padding:clamp(20px,4vw,48px) clamp(16px,4vw,32px) 40px; display:grid; gap:28px; min-width:0; }
h1 { font:800 clamp(2.2rem,6vw,3.6rem)/1.02 var(--display); letter-spacing:-.03em; margin:0; max-width:16ch; }
h1 .glow { background:linear-gradient(transparent 62%, var(--sun) 62%); }
h2 { font:750 1.6rem/1.15 var(--display); margin:0 0 6px; letter-spacing:-.02em; }
h3 { font:700 1.15rem/1.25 var(--display); margin:0; }
p { margin:0 0 .6em; } .lede { font-size:1.2rem; color:var(--soft); max-width:52ch; } .note { color:var(--soft); font-size:.92rem; }
.steps { display:flex; gap:8px; flex-wrap:wrap; list-style:none; padding:0; margin:0; font:500 .8rem var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.steps li { padding:6px 12px; border-radius:999px; border:1px solid var(--line); color:var(--soft); }
.steps li[aria-current="step"] { background:var(--ink); color:var(--surface); border-color:var(--ink); }
.steps li.done { border-color:var(--leaf); color:var(--leaf); }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(18px,3vw,30px); display:grid; gap:16px; min-width:0; }
.drop { border:2px dashed var(--sun-deep); border-radius:14px; padding:28px; text-align:center; background:color-mix(in srgb, var(--sun) 12%, var(--surface)); cursor:pointer; }
.drop.over { background:color-mix(in srgb, var(--sun) 30%, var(--surface)); }
.drop b { font:700 1.15rem var(--display); display:block; }
textarea { width:100%; min-height:140px; border:1px solid var(--line); border-radius:12px; padding:12px; font:inherit; background:var(--page); color:var(--ink); resize:vertical; }
button, .btn { font:700 1rem var(--display); border:2px solid var(--ink); background:var(--surface); color:var(--ink); border-radius:12px; padding:10px 18px; cursor:pointer; }
button.primary { background:var(--sun); border-color:var(--sun); color:#14213d; }
button.quiet { border-color:var(--line); font-weight:500; font-family:var(--body); font-size:.92rem; padding:6px 12px; }
button:disabled { opacity:.5; cursor:not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.err { color:var(--coral); font-weight:700; }
.group { display:grid; gap:6px; } .group h3 { font-size:.8rem; font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--soft); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:.9rem; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--page); }
.chip.s3 { border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); } .chip.s2 { border-color:var(--blue); }
.chip button { border:0; background:none; padding:0 2px; font:700 1rem var(--body); color:var(--soft); cursor:pointer; }
select, input[type=text], input[type=password], input[type=search] { font:inherit; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--page); color:var(--ink); max-width:100%; }
details { border:1px solid var(--line); border-radius:12px; padding:10px 14px; } summary { cursor:pointer; font-weight:700; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font:500 .8rem/1.5 var(--mono); margin:8px 0 0; max-height:260px; overflow:auto; }
fieldset { border:0; padding:0; margin:0; display:grid; gap:8px; min-width:0; } legend { font:700 1.15rem/1.3 var(--display); padding:0; margin-bottom:6px; }
.opts { display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.opt { display:flex; gap:10px; align-items:flex-start; border:2px solid var(--line); border-radius:12px; padding:10px 12px; cursor:pointer; background:var(--surface); }
.opt:has(input:checked) { border-color:var(--ink); background:color-mix(in srgb, var(--sun) 22%, var(--surface)); }
.opt input { margin-top:5px; accent-color:var(--ink); }
.fields { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.field { border:1px solid var(--line); border-radius:14px; padding:14px; display:grid; gap:6px; }
.bar { height:10px; border-radius:6px; background:var(--line); overflow:hidden; } .bar i { display:block; height:100%; background:var(--blue); border-radius:6px; }
.role { border:1px solid var(--line); border-radius:16px; padding:18px; display:grid; gap:12px; background:var(--surface); min-width:0; }
.role-head { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:start; }
.fit { font:800 2rem/1 var(--display); text-align:right; } .fit small { display:block; font:500 .72rem var(--mono); color:var(--soft); text-transform:uppercase; letter-spacing:.05em; }
.stage { display:inline-block; font:500 .72rem var(--mono); text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:6px; background:var(--ink); color:var(--surface); }
.stage.ready { background:var(--leaf); color:#fff; } .stage.reach { background:var(--sun); color:#14213d; }
.parts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; font-size:.82rem; color:var(--soft); }
.gap { border-left:4px solid var(--sun); padding:2px 0 2px 12px; display:grid; gap:2px; } .gap b { font-family:var(--display); }
.gap dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 10px; font-size:.95rem; } .gap dt { font:500 .72rem var(--mono); text-transform:uppercase; color:var(--soft); padding-top:4px; } .gap dd { margin:0; }
.cert, .method { border-top:1px solid var(--line); padding-top:12px; display:grid; gap:4px; }
ul.tight { margin:0; padding-left:1.1rem; } ul.tight li { margin:.15rem 0; }
.foot { max-width:980px; margin:0 auto; padding:8px clamp(16px,4vw,32px) 48px; color:var(--soft); font-size:.9rem; }
.pad { padding:40px; }
.ai-out { white-space:pre-wrap; border-left:4px solid var(--blue); padding-left:14px; }
@media (max-width:560px) { .parts { grid-template-columns:1fr; } .role-head { grid-template-columns:1fr; } .fit { text-align:left; } }
@media print { .top, .steps, .foot, button, .ai, details.sent { display:none !important; } body { background:#fff; } .panel, .role { break-inside:avoid; border-color:#999; } }

details .gap { margin-top:12px; }