* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #f4f4f6; font-family: -apple-system, "Segoe UI", Inter, Roboto, sans-serif; color: #333; }
#wall { position: fixed; inset: 0; width: 100vw; height: 100vh; touch-action: none; cursor: crosshair; display: block; }
body.panning #wall { cursor: grab; }
body.erasing #wall { cursor: cell; }

.brand { position: fixed; top: 16px; left: 18px; display: flex; align-items: center; gap: 7px; text-decoration: none; color: #444; font-size: 15px; font-weight: 500; letter-spacing: .02em; background: rgba(255,255,255,.75); padding: 6px 10px 6px 7px; border-radius: 999px; backdrop-filter: blur(6px); }

.toolbar { position: fixed; left: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 8px; background: rgba(255,255,255,.92); border-radius: 22px; box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04); }
#swatches { display: flex; flex-direction: column; gap: 9px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .12s; }
.swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); transform: scale(1.05); }
.sep { width: 22px; height: 1px; background: #e6e6ea; }
.size { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.size input { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 90px; accent-color: #8e6fd8; }
.dot { display: block; border-radius: 50%; background: #111; }
.tool { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: #666; cursor: pointer; display: grid; place-items: center; }
.tool:hover { background: #f1f0f5; }
.tool.active { background: #ece7fb; color: #6b4fc4; }

.counter { position: fixed; right: 18px; bottom: 16px; font-size: 13px; color: #777; background: rgba(255,255,255,.8); padding: 5px 11px; border-radius: 999px; }
.counter span:first-child { font-weight: 600; color: #444; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: #333; color: #fff; font-size: 13px; padding: 7px 13px; border-radius: 999px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: .9; }

@media (max-width: 600px) {
  .toolbar { top: auto; bottom: 12px; left: 50%; transform: translateX(-50%); flex-direction: row; gap: 7px; padding: 7px 10px; max-width: calc(100vw - 12px); }
  #swatches { flex-direction: row; gap: 5px; }
  .swatch { width: 22px; height: 22px; flex: none; }
  .sep { width: 1px; height: 22px; flex: none; }
  .size { flex-direction: row; gap: 4px; }
  .size .dot { display: none; }
  .size input { writing-mode: horizontal-tb; direction: ltr; width: 52px; height: 22px; }
  .tool { width: 28px; height: 28px; flex: none; }
  .counter { bottom: auto; top: 16px; }
}

/* ---- black board ---- */
body.dark { background: #1b1b1f; color: #eee; }
body.dark .brand { background: rgba(30,30,34,.8); color: #ddd; }
body.dark .toolbar { background: rgba(32,32,36,.92); box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06); }
body.dark .sep { background: #3a3a40; }
body.dark .tool { color: #bbb; } body.dark .tool:hover { background: #2c2c33; }
body.dark .tool.active { background: #3a3150; color: #c9b8ff; }
body.dark .swatch.active { box-shadow: 0 0 0 2px #222, 0 0 0 4px var(--c); }
body.dark .dot { background: #fff; }
.bb-panel { position: fixed; top: 16px; right: 18px; max-width: 330px; background: rgba(32,32,36,.92); border-radius: 16px; padding: 16px 18px; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.bb-panel h1 { font-size: 16px; margin: 0 0 6px; font-weight: 600; }
.bb-panel p { font-size: 13px; line-height: 1.45; margin: 0 0 8px; }
.bb-panel .muted { color: #aaa; }
.bb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bb-actions button, .bb-actions a { font: inherit; font-size: 13px; border-radius: 999px; padding: 7px 13px; cursor: pointer; text-decoration: none; }
.primary { background: #fff; color: #111; border: 0; font-weight: 600; }
.ghost { background: transparent; color: #ccc; border: 1px solid #444; }
@media (max-width: 600px) { .bb-panel { left: 12px; right: 12px; top: 56px; max-width: none; } }

/* ---- Lumo, the living Flower of Life ---- */
.lumo { position: fixed; right: 14px; bottom: 78px; width: 170px; height: 170px; pointer-events: none; }
.lumo canvas { width: 100%; height: 100%; display: block; }
.lumo-line { position: absolute; right: 100%; bottom: 60%; margin-right: -14px; white-space: nowrap; font-size: 12.5px; color: #6b5a2a; background: rgba(255,251,238,.95); box-shadow: 0 0 0 1px rgba(201,162,39,.25); padding: 6px 11px; border-radius: 14px 14px 4px 14px; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.lumo-line.show { opacity: 1; transform: none; }
@media (max-width: 600px) { .lumo { width: 110px; height: 110px; right: 4px; bottom: auto; top: 44px; } .lumo-line { bottom: auto; top: 70%; border-radius: 14px 4px 14px 14px; } }

/* ---- talk to Lumo ---- */
.talk { position: fixed; right: 18px; bottom: 44px; width: 210px; }
.talk input { width: 100%; font: inherit; font-size: 13px; padding: 7px 12px; border-radius: 999px; border: 0; background: rgba(255,251,238,.95); box-shadow: 0 0 0 1px rgba(201,162,39,.3); color: #5a4a1f; outline: none; }
.talk input:focus { box-shadow: 0 0 0 2px rgba(201,162,39,.55); }
body.dark .talk input { background: rgba(40,36,28,.92); color: #f1e3b4; box-shadow: 0 0 0 1px rgba(201,162,39,.35); }
.lumo-quiet { width: 10px; height: 10px; bottom: 82px; }
body.dark .lumo-line { background: rgba(40,36,28,.95); color: #f1e3b4; }
/* ---- quiet footer, every page ---- */
.ll-foot { position: fixed; left: 50%; bottom: 3px; transform: translateX(-50%); font-size: 11px; white-space: nowrap; pointer-events: auto; }
.ll-foot a { color: rgba(0,0,0,.38); text-decoration: none; } .ll-foot a:hover { color: #6b4fc4; text-decoration: underline; }
body.dark .ll-foot a { color: rgba(255,255,255,.35); }
.ll-foot .ll-dot { color: rgba(0,0,0,.25); margin: 0 3px; } body.dark .ll-foot .ll-dot { color: rgba(255,255,255,.25); }
/* ---- support card ---- */
.support { position: fixed; right: 196px; bottom: 80px; width: 320px; max-width: calc(100vw - 24px); background: #fffdf6; color: #3d3626; border-radius: 18px; padding: 16px 18px 12px; box-shadow: 0 10px 40px rgba(80,60,10,.15), 0 0 0 1px rgba(201,162,39,.28); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; pointer-events: none; z-index: 10; }
.support.show { opacity: 1; transform: none; pointer-events: auto; }
.support-flower { float: left; margin: 1px 10px 0 0; }
.support-line { font-size: 14px; line-height: 1.45; margin: 0 0 10px; }
.support-lines { list-style: none; padding: 0; margin: 0 0 12px; clear: both; }
.support-lines li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid #f1e8cc; font-size: 13px; color: #6b6150; }
.support-lines a { color: #6b4fc4; text-decoration: none; font-size: 17px; min-width: 70px; }
.support-msg textarea { width: 100%; font: inherit; font-size: 13px; border-radius: 10px; border: 1px solid #eadfba; padding: 7px 9px; margin-bottom: 8px; resize: vertical; background: #fff; }
.support-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.support-actions button { font: inherit; font-size: 13px; border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.support .primary { background: #6b4fc4; color: #fff; } .support .primary:disabled { opacity: .8; cursor: default; }
.support .ghost { color: #6b6150; border-color: #e5dcc0; }
.support-small { font-size: 11.5px; color: #9a8f78; margin: 9px 0 0; }
@media (max-width: 600px) {
  .talk { right: 8px; bottom: auto; top: 156px; width: 150px; }
  .support { right: 12px; left: 12px; width: auto; bottom: auto; top: 60px; }
  .ll-foot { font-size: 10px; bottom: 1px; }
}
body:has(.support.show) .lumo-line { opacity: 0; }
/* ---- Vanish ---- */
.vanish-pop { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); width: 330px; max-width: calc(100vw - 24px); background: #fffdf6; color: #3d3626; border-radius: 16px; padding: 12px 16px; box-shadow: 0 10px 40px rgba(80,60,10,.15), 0 0 0 1px rgba(201,162,39,.28); z-index: 9; }
.vanish-pop[hidden] { display: none; }
.vanish-pop .vp-title { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; }
.vanish-pop p { font-size: 13px; margin: 6px 0; } .vanish-pop .vp-small { color: #8a7d5e; font-size: 12px; }
.vp-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.vp-actions button { font: inherit; font-size: 13px; border-radius: 999px; padding: 6px 12px; cursor: pointer; border: 0; background: #c9a227; color: #fff; font-weight: 600; }
.vp-actions .ghost2 { background: transparent; color: #6b6150; border: 1px solid #e5dcc0; font-weight: 400; }
.vp-actions .ghost2.sure { border-color: #c9a227; color: #8a6d12; font-weight: 600; }
.vp-actions button:disabled { opacity: .6; }
body.dark .vanish-pop { background: rgba(40,36,28,.97); color: #f1e3b4; } body.dark .vanish-pop .vp-small { color: #bfae80; }
body.dark .vp-actions .ghost2 { color: #e0d3a8; border-color: #5a4f33; }
@media (max-width: 600px) { .vanish-pop { top: 52px; } }

/* ---- instant flip: white wall -> black board in place ---- */
html.ll-flip-anim { transition: filter .9s ease-in-out; }
html.ll-flip { filter: invert(1) hue-rotate(180deg); }
@media (prefers-reduced-motion: reduce) { html.ll-flip-anim { transition-duration: .2s; } }