:root{color-scheme:dark;--bg:#161412;--panel:#221e1a;--text:#f8eedf;--accent:#eab582;--edge:#43372e}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top right,#38251a,var(--bg) 55%);color:var(--text);font:16px/1.5 'DM Sans',system-ui,sans-serif}header{padding:1rem max(5vw,1rem);border-bottom:1px solid var(--edge);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}a{color:var(--accent);text-decoration:none}nav{display:flex;gap:1rem}main{max-width:1050px;margin:auto;padding:1rem 1rem 4rem}h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:400}h1{font-size:clamp(2.8rem,8vw,5rem);line-height:1;margin:2rem 0}h2{font-size:2rem;margin-bottom:.6rem}form,article,.warning{background:var(--panel);border:1px solid var(--edge);border-radius:18px;padding:1.2rem;margin-bottom:1rem}form,.fields,.columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:1rem}.fields{grid-column:1/-1}.fields:empty{display:none}label{display:grid;gap:.3rem;align-content:start}input,select,textarea,button{font:inherit;border-radius:9px;padding:.65rem;border:1px solid var(--edge);width:100%}button{background:var(--accent);color:#221409;cursor:pointer;width:auto;font-weight:650;align-self:end;margin:.2rem .2rem .2rem 0}input,select,textarea{background:var(--bg);color:var(--text)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#result{margin-top:1.5rem}ul,ol{padding-left:1.3rem}small,.muted{color:#b6baac}.actions{display:flex;flex-wrap:wrap;gap:.4rem}

:root {
  --bg: #101110;
  --panel: #191b18;
  --text: #f0eee6;
  --accent: #d8e59b;
  --edge: #35382f;
}
body { background: var(--bg); }
header {
  align-items: center;
  padding-top: max(1rem, env(safe-area-inset-top));
}
header > a { color: var(--text); font: 1.6rem Georgia, serif; }
#install { margin: 0; background: transparent; color: var(--accent); align-self: center; }
#install[hidden] { display: none; }
small, .muted { color: #b6baac; }
button { color: #171a10; min-height: 44px; }
label, input, select, textarea { min-width: 0; }
input, select { min-height: 44px; }
#install-help {
  max-width: min(32rem, calc(100% - 2rem));
  border: 1px solid var(--edge);
  border-radius: 18px;
  padding: 1.5rem;
  background: var(--panel);
  color: var(--text);
}
#install-help h2 { margin-top: 0; }
#install-help::backdrop { background: rgb(0 0 0 / 70%); }
@media (max-width: 560px) {
  header { gap: .5rem; }
  nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 2;
    background: var(--panel);
    border-top: 1px solid var(--edge);
    padding: .25rem .5rem calc(.25rem + env(safe-area-inset-bottom));
    justify-content: space-around;
    gap: .15rem;
  }
  nav a { padding: .75rem .3rem; font-size: .875rem; }
  main { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  form, article { padding: 1rem; }
  form > button { width: 100%; }
}