:root { --pink:#ff5fa2; --purple:#7c4dff; --yellow:#ffd43b; --bg:#fff7fb; --card:#fff; --line:#f3e3ff; --ink:#3a2d4d; --muted:#8a7ba3; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Comic Sans MS","Baloo 2","Segoe UI",sans-serif; background:var(--bg); color:var(--ink); }
.wrap { max-width:680px; margin:0 auto; padding:18px 16px 70px; }
a { color:var(--purple); }
.home { display:inline-block; text-decoration:none; font-weight:bold; background:#fff; border:3px solid var(--line); border-radius:999px; padding:6px 16px; margin-bottom:14px; box-shadow:0 3px 0 var(--line); }
h1 { text-align:center; font-size:1.9rem; margin:6px 0 4px; background:linear-gradient(90deg,var(--pink),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sub { text-align:center; margin:0 0 22px; color:var(--muted); }
.step { background:var(--card); border:3px solid var(--line); border-radius:22px; padding:18px; margin-bottom:18px; box-shadow:0 4px 0 var(--line); }
.stepnum { display:inline-block; background:var(--purple); color:#fff; border-radius:999px; width:34px; height:34px; line-height:34px; text-align:center; font-weight:bold; margin-right:8px; }
.step h2 { display:inline; font-size:1.15rem; }
.step p { margin:10px 0 12px; font-size:1rem; }
input[type=text], textarea { width:100%; font:inherit; font-size:1.1rem; padding:12px 14px; border:3px solid #e8d9ff; border-radius:14px; outline:none; }
input:focus, textarea:focus { border-color:var(--purple); }
textarea { min-height:80px; resize:vertical; }
.row { display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }
button { font:inherit; font-size:1.1rem; font-weight:bold; border:none; border-radius:16px; padding:12px 20px; cursor:pointer; }
.big { width:100%; font-size:1.5rem; padding:18px; color:#fff; background:linear-gradient(90deg,var(--pink),var(--purple)); box-shadow:0 5px 0 #b23bd6; }
.big:disabled { opacity:.6; cursor:wait; }
.yellow { background:var(--yellow); box-shadow:0 4px 0 #d9b119; }
.yellow.listening { background:#ff8787; animation:pulse 1s infinite; }
@keyframes pulse { 50% { transform:scale(1.06); } }
.status { text-align:center; font-size:1.1rem; min-height:1.6em; margin:12px 0; }
.gallery2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gallery2 img { width:100%; border-radius:16px; border:3px solid var(--line); background:#fff; }
.hint { font-size:.85rem; color:#a798c2; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chips button { font-size:.95rem; padding:8px 14px; background:#f3e9ff; border-radius:999px; box-shadow:none; }
.chips button.on { background:var(--purple); color:#fff; }
/* hub cards */
.cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:26px; }
.cardlink { text-decoration:none; color:var(--ink); background:var(--card); border:3px solid var(--line); border-radius:22px; padding:20px 16px; text-align:center; box-shadow:0 4px 0 var(--line); display:block; }
.cardlink:active { transform:translateY(2px); }
.cardlink .emoji { font-size:2.6rem; display:block; }
.cardlink .name { display:block; font-weight:bold; font-size:1.05rem; margin-top:8px; }
.cardlink .desc { display:block; font-size:.8rem; color:var(--muted); margin-top:4px; }
@media (max-width:460px){ .cards{ grid-template-columns:1fr; } }
/* wizard */
.qwrap { text-align:center; }
.progress { text-align:center; color:var(--muted); margin-bottom:6px; }
.bigq { font-size:1.4rem; margin:10px 0 16px; }
.wizbtns { display:flex; justify-content:space-between; margin-top:16px; }
.wizbtns button { background:#f3e9ff; box-shadow:none; }
/* gallery masonry */
.grid { columns:3 130px; column-gap:12px; }
.grid img { width:100%; border-radius:14px; border:3px solid var(--line); margin-bottom:12px; background:#fff; display:block; }
.empty { text-align:center; color:var(--muted); padding:30px 0; }