/* Hello Phase web, colours from revamp/PICK.md (arah B Midnight). Light and dark follow the system,
   and the header button stores a manual choice (theme.js). The header band is a fixed brand surface
   in both modes, so its text is set once here. */
:root{color-scheme:light;
  --canvas:#FBF5EA;--surface:#FFFDF8;--ink:#2A1636;--muted:#6E5E78;--line:rgba(42,22,54,.12);
  --link:#9A3A18;--cta:#3D1A55;--cta-ink:#FFF1E8;
  --band:#3D1A55;--band-ink:#FFF1E8;--band-soft:#E6D6EE;--band-accent:#FF9D72}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){color-scheme:dark;
    --canvas:#1A1422;--surface:#261D30;--ink:#EEE8F2;--muted:#B3A7BE;--line:rgba(238,232,242,.12);
    --link:#FFB48C;--cta:#FF8F5E;--cta-ink:#1E1226;--band:#261D30}
}
:root[data-theme=dark]{color-scheme:dark;
  --canvas:#1A1422;--surface:#261D30;--ink:#EEE8F2;--muted:#B3A7BE;--line:rgba(238,232,242,.12);
  --link:#FFB48C;--cta:#FF8F5E;--cta-ink:#1E1226;--band:#261D30}

body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
header{background:var(--band);color:var(--band-ink);padding:28px 20px}
header .wrap{max-width:680px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
header .home{color:var(--band-ink);text-decoration:none;font-weight:600;letter-spacing:.2px;font-size:18px}
header .home span,header .name span{color:var(--band-accent)}
header .name{font-size:30px;font-weight:600;letter-spacing:.2px}
header p{color:var(--band-soft);margin:4px 0 0;max-width:520px;flex-basis:100%}
#theme-toggle{margin-left:auto;background:transparent;color:var(--band-ink);border:1px solid rgba(255,241,232,.45);
  border-radius:999px;padding:6px 14px;font:600 13px/1 inherit;font-family:inherit;cursor:pointer}
main{max-width:680px;margin:0 auto;padding:24px 20px 60px}
h1{font-size:28px;line-height:1.2;margin:8px 0 4px}
h2{font-size:19px;margin:32px 0 8px}
p,li{color:var(--ink)}
.meta{color:var(--muted);font-size:14px}
ul{padding-left:20px}
li{margin:6px 0}
.box,details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:18px 0}
details{padding:12px 16px;margin:10px 0}
summary{cursor:pointer;font-weight:600}
details p{margin:8px 0 2px}
.cta{display:inline-block;background:var(--cta);color:var(--cta-ink);text-decoration:none;padding:12px 18px;border-radius:999px;font-weight:600;margin-top:8px}
a{color:var(--link)}
footer{max-width:680px;margin:0 auto;padding:0 20px 40px;color:var(--muted);font-size:14px}
footer a{margin-right:14px}