/* Brain Detox: a quiet, warm studio. Art is drawn on white paper. */
:root {
  --bg: #17142a;
  --card: #231f3d;
  --line: rgba(255, 255, 255, 0.12);
  --text: #f6f1ff;
  --soft: #b9b2d6;
  --gold: #ffd166;
  --pink: #ff8fab;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(120% 60% at 50% 0%, #2c2552 0%, var(--bg) 60%); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
.calm { max-width: 760px; margin: 0 auto; padding: 12px 16px 48px; }

/* home */
.a-hero { padding: 6px 0 14px; text-align: center; }
.a-herorow { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.a-home { color: var(--soft); text-decoration: none; font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; }
.a-chip { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.06); cursor: pointer; }
.a-hero h1 { margin: 10px 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 8vw, 44px); letter-spacing: 0.01em; }
.a-hero p { margin: 0; color: var(--soft); }
.a-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.a-tile { position: relative; display: grid; gap: 4px; align-content: end; min-height: 150px; padding: 16px; border: 0; border-radius: 22px; text-align: left; cursor: pointer; color: #1d1530; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: transform 0.15s ease; }
.a-tile:active { transform: scale(0.98); }
.a-tile b { font-size: 19px; }
.a-tile small { font-size: 13px; opacity: 0.8; line-height: 1.35; }
.a-ico { position: absolute; top: 12px; right: 14px; font-size: 40px; }
.a-t-colour { grid-column: 1 / -1; min-height: 170px; background: linear-gradient(135deg, #ffd6a5, #ff8fab 55%, #bdb2ff); }
.a-t-draw { background: linear-gradient(135deg, #a0c4ff, #bdb2ff); }
.a-t-sand { background: linear-gradient(135deg, #f2e3c6, #d9c29a); }
.a-t-sort { background: linear-gradient(135deg, #caffbf, #9bf6ff); }
.a-t-gallery { background: linear-gradient(135deg, #fdffb6, #ffd6a5); }
.a-foot { margin-top: 18px; text-align: center; color: var(--soft); font-size: 13px; }

/* top bar */
.a-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; margin: 0 -16px 10px; padding: 10px 16px; background: rgba(23, 20, 42, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.a-top h1 { flex: 1; min-width: 0; margin: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-tools { display: flex; gap: 6px; align-items: center; }
.a-iconbtn { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-size: 20px; cursor: pointer; }
.a-save { min-height: 42px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--gold); color: #2b1d00; font-weight: 800; cursor: pointer; }
.a-save:disabled { opacity: 0.6; }
.a-ghost { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.05); cursor: pointer; font-weight: 600; }
.a-ghost.on { border-color: var(--gold); background: rgba(255, 209, 102, 0.16); }
.a-ghost:disabled { opacity: 0.45; }
.a-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.a-lede { color: var(--soft); margin: 4px 0 12px; }
.a-note { color: var(--soft); font-size: 13px; text-align: center; line-height: 1.45; }
.a-h { margin: 18px 0 10px; font-size: 16px; color: var(--gold); letter-spacing: 0.02em; }

/* design picker */
.a-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.a-design { position: relative; display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); cursor: pointer; text-align: left; }
.a-design img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; background: #fff; display: block; }
.a-design b { font-size: 14px; }
.a-badge { position: absolute; top: 12px; left: 12px; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: #2b1d00; font-size: 11px; font-weight: 800; }

/* the paper */
.a-paper { width: min(100%, 560px); margin: 0 auto; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); touch-action: manipulation; }
.a-paper svg, .a-paper canvas { display: block; width: 100%; height: 100%; }
.a-paper canvas { touch-action: none; }
.a-svg path[data-r] { cursor: pointer; transition: fill 0.25s ease; }
.a-round { border-radius: 50%; }
.a-sand { border-radius: 10px; border: 10px solid #6b4f34; }

/* palettes and colours */
.a-pals { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 4px; scrollbar-width: none; }
.a-pals::-webkit-scrollbar { display: none; }
.a-pal { flex: none; display: grid; gap: 4px; justify-items: start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 12px; font-weight: 600; cursor: pointer; }
.a-pal span { display: flex; }
.a-pal i { width: 14px; height: 14px; border-radius: 50%; margin-right: -3px; border: 1.5px solid var(--card); }
.a-pal.on { border-color: var(--gold); background: rgba(255, 209, 102, 0.12); }
.a-sw { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 10px 0 2px; }
.a-dot { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.18); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.a-dot.on { border-color: #fff; transform: scale(1.12); box-shadow: 0 0 0 3px var(--gold); }
.a-pick { display: grid; place-items: center; background: conic-gradient(#ff4d6d, #ffb703, #80ed99, #4cc9f0, #b5179e, #ff4d6d); }
.a-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.a-pick span { font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); pointer-events: none; }
.a-rainbow { background: conic-gradient(#ff4d6d, #ffb703, #fff275, #80ed99, #4cc9f0, #4361ee, #b5179e, #ff4d6d); }
.a-brush { display: inline-block; border-radius: 50%; background: currentColor; vertical-align: middle; }

/* colour sort */
.s-tubes { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 12px 0; }
.s-tube { display: flex; flex-direction: column-reverse; gap: 3px; width: 52px; height: 186px; padding: 6px 5px; border: 3px solid rgba(255, 255, 255, 0.55); border-top-width: 0; border-radius: 0 0 26px 26px; background: rgba(255, 255, 255, 0.06); cursor: pointer; transition: transform 0.18s ease; }
.s-tube i { display: block; flex: 1; border-radius: 6px; }
.s-tube i:first-child { border-radius: 6px 6px 20px 20px; }
.s-tube.sel { transform: translateY(-16px); border-color: var(--gold); }
.s-tube.full { border-color: #9ef0c2; }
.s-win { width: 100%; display: flex; justify-content: center; margin-top: 6px; }

/* gallery */
.a-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.a-galitem { display: grid; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; }
.a-galitem img { width: 100%; border-radius: 8px; display: block; }
.a-galitem small { font-size: 12px; color: var(--soft); }
.a-view { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(10, 8, 20, 0.85); }
.a-view[hidden] { display: none; }
.a-viewbox { width: min(100%, 520px); background: var(--card); border-radius: 18px; padding: 12px; text-align: center; }
.a-viewbox img { width: 100%; border-radius: 10px; display: block; }
.a-viewbox p { color: var(--soft); font-size: 13px; }

.a-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 30; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px; background: #fff; color: #1d1530; font-weight: 700; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); transition: opacity 0.4s ease; }
.a-toast.out { opacity: 0; }

@media (min-width: 720px) {
  .a-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a-t-colour { grid-column: span 3; }
}
@media (prefers-reduced-motion: reduce) {
  .a-tile, .s-tube, .a-svg path[data-r] { transition: none; }
}