:root {
  color-scheme: dark;
  --page: #101114;
  --panel: #1a1b20;
  --line: #35363d;
  --text: #f4f1ec;
  --muted: #b4b3ba;
  --accent: #f39b72;
}
* { box-sizing:border-box }
body { margin:0; background:var(--page); color:var(--text); font:16px/1.55 "Segoe UI",sans-serif }
nav,.hero-inner,main,footer { width:min(90%,1280px); margin-inline:auto }
a { color:inherit }
header { background:#131417; border-bottom:1px solid var(--line) }
nav { min-height:68px; display:flex; align-items:center; gap:clamp(14px,3vw,40px) }
nav a { text-decoration:none; font-weight:600; font-size:.91rem; color:#c9c7ca }
nav a:hover, summary:hover { color:var(--accent) }
.brand { margin-right:auto; font:900 1.38rem/1 Arial,sans-serif; letter-spacing:-.065em; color:var(--text) }
.brand b { color:var(--accent) }
.locale { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid #56555a; border-radius:24px; background:#232429; padding:7px 13px; white-space:nowrap; font:600 .77rem/1.5 system-ui; letter-spacing:.04em }
.locale:after { content:""; width:5px;height:5px;border:solid var(--muted);border-width:0 1px 1px 0;transform:rotate(45deg);margin-top:-3px }
.locale select { position:absolute; inset:0; width:100%; height:100%; opacity:0 }
.locale:focus-within { outline:2px solid var(--accent); outline-offset:3px }
.globe { width:15px;height:15px;border:1px solid currentColor;border-radius:50%;position:relative }
.globe:before,.globe:after { content:"";position:absolute }
.globe:before { inset:0 3px;border:1px solid currentColor;border-radius:50% }
.globe:after { left:0;right:0;top:6px;border-top:1px solid currentColor }
.sr { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%) }
.hero { position:relative; display:grid;align-items:end;min-height:clamp(365px,32vw,535px);padding:56px 0;background:linear-gradient(90deg,#101114ef, #10111491 41%,transparent 75%),linear-gradient(0deg,#101114,transparent 42%),url("hospital-central.webp") center 31%/cover }
.eyebrow,time,footer { font:600 .75rem/1.5 Consolas,monospace;letter-spacing:.1em;color:var(--accent) }
.eyebrow { display:flex;gap:12px;align-items:center }
.eyebrow:before { content:"";width:30px;height:2px;background:currentColor }
h1,h2,h3 { line-height:1.07;text-wrap:balance }
h1 { font-size:clamp(2.4rem,4.7vw,4.8rem);letter-spacing:-.055em;max-width:17ch;margin:16px 0 }
.hero p { color:#e2deda;max-width:44ch;margin:0 0 25px }
.credit { position:absolute;bottom:16px;right:5%;font:.75rem/1.5 system-ui;color:#d4cbc2 }
section { padding:clamp(32px,5vw,64px) 0;border-bottom:1px solid var(--line) }
h2 { margin:0 0 24px;font-size:clamp(1.65rem,3vw,2.45rem);letter-spacing:-.045em }
h3 { font-size:1.5rem;letter-spacing:-.025em;margin:.75em 0 }
#news { display:grid;grid-template-columns:1.1fr 1fr;gap:18px }
#news h2 { grid-column:1/-1;margin:0 0 5px }
article, #mechanics li, form { background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:clamp(18px,2.5vw,34px);min-width:0 }
article p,details p,#empty { color:var(--muted) }
#metrics { font-size:clamp(1rem,1.6vw,1.45rem);color:#fff }
button,select,input,textarea { font:inherit;color:var(--text);background:#24252a;border:1px solid #49494f;border-radius:6px;padding:8px 13px }
button,select,summary { cursor:pointer }
button:hover,select:hover { border-color:var(--accent) }
.hero button,.primary { background:var(--accent);color:#21140f;border-color:transparent;font-weight:700 }
:focus-visible { outline:2px solid var(--accent);outline-offset:3px }
ul { list-style:none;padding:0 }
#mechanics { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(245px,100%),1fr));gap:10px }
#mechanics li { padding:18px }
summary { font-weight:650 }
small { display:block;margin-top:8px;color:var(--muted) }
.done {color:#a6cdaf}.fix {color:#f1a097}.dev {color:#a0c5e8}.refine {color:#e6c18e}
form { max-width:800px;display:grid;gap:18px }
.filters { display:flex;gap:12px;flex-wrap:wrap }.filters label {display:grid;gap:5px;color:var(--muted)}
textarea {width:100%;min-height:110px}#responses li {padding:14px 0;overflow-wrap:anywhere;border-bottom:1px solid var(--line)}
#sharelink {width:min(100%,400px)}footer {padding-block:30px}
@media(max-width:680px){
  nav { display:grid;grid-template-columns:repeat(3,auto);gap:12px 8px;padding:12px 0 }
  .brand { grid-column:1/3 }.locale {grid-column:3;grid-row:1;justify-self:end}
  nav a:not(.brand) {grid-row:2;font-size:.83rem}
  .hero {min-height:370px;background-position:62% 30%;padding-bottom:44px}
  #news {grid-template-columns:1fr}
  h1 {overflow-wrap:anywhere}
}