:root{
  --bg:#0b0b0c;           /* near-black */
  --panel:#121214;        /* card surface */
  --muted:#b3b7be;
  --text:#f4f6f8;

  /* Petal colours (tweak to match your artwork) */
  --remember:#FACC15;   /* yellow */
  --understand:#F97316; /* orange */
  --apply:#EC4899;      /* pink */
  --analyse:#3B82F6;    /* blue */
  --evaluate:#10B981;   /* green */
  --create:#A855F7;     /* purple */

  --radius:16px;
  --gap:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
a{color:#dbeafe;text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1100px; margin-inline:auto; padding:0 24px}
.site-header{border-bottom:1px solid #1f2023; position:sticky; top:0; backdrop-filter:blur(6px); background:rgba(11,11,12,.7)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; color:var(--text)}
.brand-icon{width:28px;height:28px;border-radius:8px}
.brand-text{font-weight:700; letter-spacing:.2px}
.main-nav a{margin-left:18px; color:var(--muted)}
.main-nav a[aria-current="page"]{color:var(--text); font-weight:600}

.hero{padding:40px 0 12px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
.hero-copy h1{font-size:2.2rem; margin:.3rem 0}
.hero-copy p{opacity:.9}
.petal-key{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px; padding:0; list-style:none}
.chip{display:inline-flex; align-items:center; gap:8px; font-weight:600; padding:6px 10px; border-radius:999px; border:1px solid #26272a; background:#141416}
.chip-remember{border-color:var(--remember); color:var(--remember)}
.chip-understand{border-color:var(--understand); color:var(--understand)}
.chip-apply{border-color:var(--apply); color:var(--apply)}
.chip-analyse{border-color:var(--analyse); color:var(--analyse)}
.chip-evaluate{border-color:var(--evaluate); color:var(--evaluate)}
.chip-create{border-color:var(--create); color:var(--create)}
.hero-art img{width:100%; border-radius:var(--radius); border:1px solid #1f2023}

.controls{padding:16px 0 8px; border-top:1px solid #1f2023; border-bottom:1px solid #1f2023; background:#0e0e10}
.selectors{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
label{display:grid; gap:6px; font-size:.92rem; color:var(--muted)}
select, input[type="text"]{
  background:var(--panel); color:var(--text); border:1px solid #27282b; border-radius:10px; padding:10px 12px;
}
select:disabled{opacity:.5}
.hidden{display:none !important}
.help.micro{margin-top:8px; color:var(--muted)}

.levels .stack{display:grid; gap:18px; padding:24px 0 40px}
.level-card{
  background:var(--panel); border:1px solid #1f2023; border-radius:var(--radius); padding:16px;
}
.level-card.disabled{opacity:.6}
.level-head{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.level-line{margin:0; color:var(--muted)}
.level-foot{margin-top:10px; color:var(--muted)}
.border-remember{border-left:6px solid var(--remember)}
.border-understand{border-left:6px solid var(--understand)}
.border-apply{border-left:6px solid var(--apply)}
.border-analyse{border-left:6px solid var(--analyse)}
.border-evaluate{border-left:6px solid var(--evaluate)}
.border-create{border-left:6px solid var(--create)}

.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.btn{
  border:1px solid #2a2b2f; background:#141416; color:var(--text);
  padding:9px 12px; border-radius:10px; cursor:pointer; font-weight:600;
}
.btn:focus{outline:2px solid #fff; outline-offset:2px}
.btn:hover{transform:translateY(-1px)}
.btn-remember{border-color:var(--remember); color:var(--remember)}
.btn-understand{border-color:var(--understand); color:var(--understand)}
.btn-apply{border-color:var(--apply); color:var(--apply)}
.btn-analyse{border-color:var(--analyse); color:var(--analyse)}
.btn-evaluate{border-color:var(--evaluate); color:var(--evaluate)}
.btn-create{border-color:var(--create); color:var(--create)}

.provider{padding:8px 0; color:var(--muted)}
.linkish{background:none;border:none;color:#dbeafe;cursor:pointer;padding:0}
.linkish:focus{outline:2px solid #fff; outline-offset:2px}

.fallback{background:#0f0f11; border:1px dashed #2a2b2f; padding:12px; border-radius:10px}
#fallbackText{width:100%; height:140px; background:#0b0b0c; color:var(--text); border:1px solid #27282b; border-radius:8px; padding:8px}

.site-footer{border-top:1px solid #1f2023; padding:16px 0 28px}
.micro{font-size:.86rem}
.prose{padding:28px 0 56px}
.prose h1{font-size:2rem}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .selectors{grid-template-columns:1fr 1fr; gap:10px}
}