:root{
  --bg:#fbf6e9; --surface:#fffdf6; --text:#2f2a3d; --muted:#6b6580;
  --lilac:#c8b6e8; --lilac-d:#7a5fb0; --mint:#bfe8d3; --mint-d:#2f7d5c; --line:#e6dcc3;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1f1b2b; --surface:#2a2539; --text:#f3eddc; --muted:#b5aecb;
    --lilac:#4a3c70; --lilac-d:#cdbdf0; --mint:#25483a; --mint-d:#a8e3c6; --line:#3d3654;
  }
}

:root[data-theme="dark"]{
  --bg:#1f1b2b; --surface:#2a2539; --text:#f3eddc; --muted:#b5aecb;
  --lilac:#4a3c70; --lilac-d:#cdbdf0; --mint:#25483a; --mint-d:#a8e3c6; --line:#3d3654;
}

html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}

body{margin:0; background:var(--bg); color:var(--text); font-family:Georgia,'Times New Roman',serif; line-height:1.55; min-height:100%}
header{background:linear-gradient(135deg,var(--lilac),var(--mint)); padding:56px 20px 44px; text-align:center}
header h1{margin:0 0 8px; font-size:clamp(2rem,6vw,3.2rem); letter-spacing:.5px; color:var(--text)}
header p{margin:0; color:var(--text); opacity:.8; font-family:system-ui,-apple-system,Segoe UI,sans-serif}

main{max-width:860px; margin:0 auto; padding:28px 16px 56px; display:grid; gap:20px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 4px 14px rgba(122,95,176,.08)}
.card > h2{margin:0; padding:16px 20px; font-size:1.25rem; display:flex; align-items:center; gap:12px; background:var(--lilac)}

.num{width:30px; height:30px; border-radius:50%; background:var(--surface); color:var(--lilac-d); display:grid; place-items:center; font:700 .95rem system-ui,sans-serif; flex:none}

.body{padding:14px 20px 20px; display:grid; gap:12px; font-family:system-ui,-apple-system,Segoe UI,sans-serif}

.group-label{margin:10px 0 0; font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--mint-d); padding-bottom:4px; border-bottom:2px solid var(--mint)}
.group-label:first-child{margin-top:0}

.item{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg)}
.item button{all:unset; box-sizing:border-box; width:100%; padding:12px 14px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; font-weight:600}
.item button:hover{background:var(--mint)}
.item button:focus-visible{outline:3px solid var(--lilac-d); outline-offset:-3px}

.chev{transition:transform .2s; color:var(--lilac-d); flex:none}
.item.open .chev{transform:rotate(90deg)}
.item.open > button{background:var(--mint)}

.panel{display:none; padding:12px 14px 14px; color:var(--muted); border-top:1px solid var(--line)}
.item.open .panel{display:block}

.tag{display:inline-block; margin-top:8px; padding:5px 14px; border:0; border-radius:999px; background:var(--lilac); color:var(--text); font:600 .78rem system-ui,-apple-system,Segoe UI,sans-serif; cursor:pointer; transition:background .15s}
.tag:hover{background:var(--lilac-d); color:var(--surface)}
.tag:focus-visible{outline:3px solid var(--lilac-d); outline-offset:2px}

footer{text-align:center; padding:20px; color:var(--muted); font:.85rem system-ui,sans-serif}