:root{
    --bg: #fdf8e4;           
    --panel: #fbeec4;        
    --ink: #5c4324;          
    --muted: #8b6f4e;        
    --line: #e0c98d;         
    --gold: #cfa74a;         
    --gold-d: #a77f2d;       
    --accent: #9ac9a3;       
    --blue: #a3c4dc;         
    --ring: #d6b86c;         
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; 
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color:var(--ink);
    background:
      radial-gradient(1100px 600px at 85% -10%, #fff9e9 0%, transparent 60%),
      radial-gradient(900px 500px at -10% 110%, #fef6d8 0%, transparent 60%),
      var(--bg);
}
.wrap{max-width:1100px;margin:auto;padding:28px 16px 64px}

/* Header */
header{display:flex;gap:16px;align-items:center;margin:4px 0 18px}
.lotus{
    width:64px;height:64px;border-radius:50%;
    background: conic-gradient(from 210deg,#e5d8a8,#d1b670 55%,#f5e6b8);
    position:relative; box-shadow:0 0 0 2px #f0e2b5 inset,0 10px 40px rgba(0,0,0,.25);
}
.lotus::before,.lotus::after{
    content:"";position:absolute;inset:12px;
    background:
      radial-gradient(12px 10px at 50% 0%, var(--gold) 35%, transparent 36%) no-repeat 50% 24%/60% 54%,
      radial-gradient(12px 10px at 0% 100%, var(--gold) 35%, transparent 36%) no-repeat 28% 66%/50% 42%,
      radial-gradient(12px 10px at 100% 100%, var(--gold) 35%, transparent 36%) no-repeat 72% 66%/50% 42%;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.3));
}
.lotus::after{transform: rotate(180deg) scale(.9);opacity:.85}
h1{margin:.2rem 0 0;line-height:1.14;font-weight:800;font-size:clamp(26px,4vw,40px);letter-spacing:.2px}
.subtitle{color:var(--muted);margin-top:4px;font-size:15px}
.sub-title{font-size: 20px;font-weight: 700;}

/* Intro ribbon */
.ribbon{
    margin:16px 0 20px;padding:14px 16px;border:1px solid var(--line);
    background:linear-gradient(180deg,#fff9e0,#fdf4ce); border-radius:12px;
    box-shadow:0 0 0 1px rgba(255,255,255,.02) inset, 0 8px 16px rgba(0,0,0,.08);
}
.ribbon b{color:var(--gold)}

/* Group blocks */
.group{
    margin-top:18px; border:1px solid var(--line); border-radius:14px;
    background:linear-gradient(180deg,var(--panel),#f9f0d0);
}
.group header{
    padding:14px 16px; margin:0; gap:10px; border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, rgba(207,167,74,.15), transparent);
}
.tag{
    display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:999px;
    padding:4px 10px;color:var(--muted); font-size:12.5px; background:#fff8df;
}
.dot{width:8px;height:8px;border-radius:50%}
.sila{background:var(--accent)} .samadhi{background:var(--blue)} .panna{background:var(--gold)}
.group h2{margin:0;font-size:20px}
.group .desc{margin:4px 0 0;color:var(--muted)}
.grid{display:grid;gap:14px;padding:14px 14px 10px;grid-template-columns:repeat(12,1fr)}
@media (max-width:900px){.grid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:repeat(1,1fr)}}

/* Cards */
.card{
    grid-column:span 4; border:1px solid var(--line); border-radius:12px; padding:12px;
    background:linear-gradient(180deg,#fffdf6,#fcf5e2);
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 12px 24px rgba(0,0,0,.12)}
.card h3{margin:4px 0 0;font-size:18px; letter-spacing:.2px}
.mini{color:var(--muted); font-size:12.5px; margin:2px 0 8px}
.toggle{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none;background:transparent;
    color:var(--gold);font-weight:700;padding:6px 0; border-radius:10px;
}
.toggle:focus{outline:2px solid var(--ring);outline-offset:2px}
.toggle svg{width:18px;height:18px;transition:transform .25s ease}
.content{
    display:none;margin-top:8px;padding:10px 12px;border-left:2px solid var(--gold);
    background:linear-gradient(180deg, rgba(207,167,74,.12), transparent 70%);
    border-radius:8px;
}
.content.open{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:.5;transform:translateY(-3px)} to{opacity:1;transform:translateY(0)}}
.content p{margin:.2em 0 .7em;color:var(--ink)}
.content ul{margin:.3em 0 .8em 1.2em;color:var(--ink)}
.note{color:var(--muted);font-size:12.5px;margin:14px 14px 0}

/* Footer */
footer{
    margin-top:36px;text-align:center;color:var(--muted);font-size:13px;
    background:#f9f0d0;
    border-top:1px solid var(--line);
}
footer a{color:var(--gold);text-decoration:none}
footer a:hover{text-decoration:underline}