/* Kolam Instrument. The page is the site's cream paper; the stage is a swept
   earth floor at dawn, so the white powder and the bead have something dark to
   glow against. */
:root{
  --cream:#faf5ec; --paper:#fffdf8; --ink:#221a12; --inksoft:#6f6152;
  --maroon:#0e386d; --gold:#0b7d74; --golddeep:#0a5f57; --line:#e8ddc9;
  --floor:#2f221d; --kaavi:#8a3122; --rice:#fbf5e6; --radius:16px;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{ font-family:"Hanken Grotesk",system-ui,sans-serif; background:var(--cream); color:var(--ink); line-height:1.5;
  display:flex; flex-direction:column; min-height:100%; }

header{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border-bottom:1.5px solid var(--line); background:var(--paper); }
header .brand{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:20px; letter-spacing:-.02em;
  color:var(--maroon); text-decoration:none; }
header .brand span{ color:var(--gold); }
header .back{ font-size:13px; font-weight:700; color:var(--maroon); text-decoration:none; }

main{ width:100%; max-width:720px; margin:0 auto; padding:24px 16px calc(40px + env(safe-area-inset-bottom)); }
h1.title{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:32px; letter-spacing:-.02em; text-align:center; margin:4px 0 4px; }
.sub{ text-align:center; color:var(--inksoft); font-size:15.5px; max-width:520px; margin:0 auto 18px; }

/* the greeting someone sent with their kolam */
.greet{ font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:25px; line-height:1.25; text-align:center;
  color:var(--kaavi); margin:0 auto 14px; max-width:560px; overflow-wrap:anywhere; }
.greet::before, .greet::after{ content:"✦"; font-size:.5em; vertical-align:middle; margin:0 .6em; color:var(--gold); }

/* ------------------------------------------------------------------ stage */
.stage{ position:relative; width:min(100%,560px); aspect-ratio:1/1; margin:0 auto; border-radius:22px; overflow:hidden;
  background:var(--floor); box-shadow:0 26px 46px -28px rgba(34,26,18,.8), 0 0 0 1.5px rgba(34,26,18,.14); }
.stage canvas{ display:block; width:100%; height:100%; touch-action:none; cursor:crosshair;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.stage canvas:focus-visible{ outline:3px solid var(--gold); outline-offset:-6px; }
.coach{ position:absolute; left:0; right:0; bottom:8.5%; text-align:center; pointer-events:none;
  font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:19px; color:var(--rice);
  text-shadow:0 1px 10px rgba(0,0,0,.75); transition:opacity .45s ease; }
.coach.gone{ opacity:0; }
.bigplay{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font:inherit; font-size:17px; font-weight:800;
  padding:15px 28px; border-radius:999px; border:0; cursor:pointer; color:#2a1a10; white-space:nowrap;
  background:linear-gradient(180deg,#ffe2a0,#f5c044); box-shadow:0 0 0 7px rgba(255,214,140,.2), 0 14px 30px -10px rgba(0,0,0,.7); }
.bigplay:hover{ filter:brightness(1.05); }

/* ------------------------------------------------------------------- dock */
.dock{ background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:14px 16px 16px; margin:16px auto 0; max-width:560px; box-shadow:0 8px 24px -18px rgba(34,26,18,.5); }
.row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; }
.row + .row{ margin-top:14px; padding-top:14px; border-top:1.5px solid var(--line); }
.row .push{ margin-left:auto; }

.btn{ font:inherit; font-size:14px; font-weight:800; padding:10px 15px; border-radius:11px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:var(--ink); display:inline-flex; align-items:center; gap:7px; }
.btn:hover{ border-color:#d3c4a6; }
.btn:disabled{ opacity:.42; cursor:default; }
.btn.pri{ background:var(--maroon); border-color:var(--maroon); color:#fff; min-width:104px; justify-content:center; }
.btn.pri.on{ background:#fff; color:var(--maroon); }
.btn svg{ width:16px; height:16px; flex:none; }
.btn:focus-visible, .powder:focus-visible, .starter:focus-visible, .segs button:focus-visible, .chip:focus-visible, .check:focus-within{
  outline:3px solid var(--gold); outline-offset:2px; }

.powders{ display:flex; gap:6px; }
.powder{ font:inherit; border:0; background:transparent; cursor:pointer; padding:3px 4px 2px; border-radius:11px;
  display:flex; flex-direction:column; align-items:center; gap:3px; min-width:52px; color:var(--inksoft); }
.powder i{ display:block; width:32px; height:32px; border-radius:50%; background:var(--c);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.18), 0 0 0 1.5px rgba(34,26,18,.22); transition:transform .12s ease; }
.powder span{ font-size:11px; font-weight:800; letter-spacing:.02em; }
.powder[aria-pressed="true"]{ color:var(--ink); }
.powder[aria-pressed="true"] i{ transform:scale(1.08); box-shadow:inset 0 -3px 6px rgba(0,0,0,.18), 0 0 0 2.5px var(--paper), 0 0 0 5px var(--maroon); }

.control{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.control > span:first-child{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--golddeep); }
.control.grow{ flex:1 1 200px; }
select{ font:inherit; font-size:14.5px; font-weight:700; color:var(--ink); padding:9px 10px; border-radius:11px;
  border:1.5px solid var(--line); background:#fff; max-width:100%; }
input[type=range]{ width:150px; accent-color:var(--maroon); }
.valout{ font-size:13px; font-weight:700; color:var(--ink); }
.scale{ font-size:13px; color:var(--inksoft); }
.scale b{ color:var(--ink); letter-spacing:.06em; }
.segs{ display:inline-flex; border:1.5px solid var(--line); border-radius:11px; overflow:hidden; background:#fff; }
.segs button{ font:inherit; font-size:13px; font-weight:700; padding:8px 12px; border:0; background:transparent; color:var(--inksoft); cursor:pointer; }
.segs button + button{ border-left:1.5px solid var(--line); }
.segs button[aria-pressed="true"]{ background:var(--maroon); color:#fff; }
.check{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; cursor:pointer; border-radius:8px; padding:2px 4px; }
.check input{ width:17px; height:17px; accent-color:var(--maroon); }

/* --------------------------------------------------------------- starters */
.block{ max-width:560px; margin:22px auto 0; }
.block h2{ font-family:"Fraunces",Georgia,serif; font-weight:700; font-size:19px; margin-bottom:3px; }
.block .lead{ color:var(--inksoft); font-size:14px; margin-bottom:12px; }
.starters{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.starter{ font:inherit; border:0; background:transparent; cursor:pointer; padding:0; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--ink); min-width:0; }
.starter canvas, .starter .dice{ width:100%; aspect-ratio:1/1; border-radius:14px; display:block; background:var(--floor);
  box-shadow:0 0 0 1.5px rgba(34,26,18,.14), 0 10px 18px -14px rgba(34,26,18,.8); transition:transform .12s ease; }
.starter:hover canvas, .starter:hover .dice{ transform:translateY(-2px); }
.starter .dice{ display:grid; place-items:center; background:var(--paper); border:1.5px dashed #cdbb97; box-shadow:none; color:var(--maroon); }
.starter .dice svg{ width:44%; height:44%; }
.starter span{ font-size:12px; font-weight:700; text-align:center; line-height:1.2; }

/* ------------------------------------------------------------------- send */
.send{ background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); padding:16px 16px 18px; }
.send input[type=text]{ font:inherit; font-size:15px; width:100%; padding:11px 12px; border-radius:11px; border:1.5px solid var(--line); background:#fff; color:var(--ink); }
.send input[type=text]:focus{ outline:3px solid var(--gold); outline-offset:1px; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin:9px 0 14px; }
.chip{ font:inherit; font-size:12.5px; font-weight:700; padding:6px 11px; border-radius:999px; border:1.5px solid var(--line);
  background:#fff; color:var(--inksoft); cursor:pointer; }
.chip:hover{ color:var(--ink); border-color:#d3c4a6; }
.fine{ font-size:12.5px; color:var(--inksoft); margin-top:11px; }

.toast{ position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translate(-50%,16px); opacity:0; pointer-events:none;
  background:var(--ink); color:#fff; font-size:14px; font-weight:700; padding:10px 16px; border-radius:999px; max-width:calc(100% - 32px);
  text-align:center; box-shadow:0 10px 26px -10px rgba(0,0,0,.5); transition:opacity .2s ease, transform .2s ease; z-index:20; }
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ------------------------------------------------------------------ guide */
.mh-guide{ max-width:560px; margin:26px auto 0; }
.mh-guide .swara{ letter-spacing:.06em; white-space:nowrap; }
.mh-guide .dot{ display:inline-block; width:.8em; height:.8em; border-radius:50%; vertical-align:-.06em; margin-right:.35em;
  box-shadow:0 0 0 1px rgba(34,26,18,.3); }
.mh-guide details{ border-top:1.5px solid var(--line); padding:11px 0; }
.mh-guide details:last-of-type{ border-bottom:1.5px solid var(--line); }
.mh-guide summary{ cursor:pointer; font-weight:700; font-size:15px; }
.mh-guide details p{ margin-top:6px; }

footer{ text-align:center; color:var(--inksoft); font-size:13px; padding:24px 16px 30px; margin-top:auto; }
footer a{ color:var(--maroon); }

@media (max-width:560px){
  main{ padding:16px 10px calc(36px + env(safe-area-inset-bottom)); }
  h1.title{ font-size:25px; }
  .sub{ font-size:14px; margin-bottom:14px; }
  .greet{ font-size:21px; }
  .stage{ border-radius:18px; }
  .coach{ font-size:16px; }
  .dock{ padding:12px; }
  .btn{ padding:10px 12px; }
  .btn.pri{ min-width:92px; }
  .powder{ min-width:46px; }
  .powder i{ width:30px; height:30px; }
  .row .push{ margin-left:0; width:100%; justify-content:space-between; }
  .starters{ grid-template-columns:repeat(3,1fr); gap:10px; }
  input[type=range]{ width:100%; }
  .control.wide{ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){
  .coach, .toast, .powder i, .starter canvas, .starter .dice{ transition:none; }
}
@media print{ .dock, .block, header .back, .toast{ display:none !important; } }