:root {
  --bg: #ECEFEA;
  --ink: #1E2B30;
  --muted: #56646A;
  --line: rgba(30,43,48,.2);
  --paper: #F7F8F5;
  --couplet: #2B7A80;
  --note: #3D5A96;
  --sentence: #A3742A;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141B1E;
    --ink: #DCE3E0;
    --muted: #9AA7AB;
    --line: rgba(220,227,224,.2);
    --paper: #1C2529;
    --couplet: #5FB3B8;
    --note: #8EA6DE;
    --sentence: #D8A95A;
  }
}

:root[data-theme="dark"] {
  --bg: #141B1E;
  --ink: #DCE3E0;
  --muted: #9AA7AB;
  --line: rgba(220,227,224,.2);
  --paper: #1C2529;
  --couplet: #5FB3B8;
  --note: #8EA6DE;
  --sentence: #D8A95A;
}

*, *::before, *::after { box-sizing: inherit; }

html {
  height: 100%;
  background: var(--bg);
  scroll-padding-top: env(safe-area-inset-top, 0px);
}

body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

#stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cup {
  position: absolute;
  background: var(--ink);
  transition: left .9s cubic-bezier(.3,0,.2,1), top .9s cubic-bezier(.3,0,.2,1),
              width .9s cubic-bezier(.3,0,.2,1), height .9s cubic-bezier(.3,0,.2,1);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

.dot {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: opacity .5s ease, left .9s cubic-bezier(.3,0,.2,1), top .9s cubic-bezier(.3,0,.2,1);
}

.dot .ring {
  display: block;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  border: 1.6px solid var(--c);
  background: transparent;
  transition: background-color .35s ease, transform .35s ease;
  animation: drift var(--d) ease-in-out var(--delay) infinite alternate;
}

.dot:hover .ring { transform: scale(1.25); }
.dot:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.dot[aria-expanded="true"] .ring { background: var(--c); transform: scale(1.2); }
.dimmed .dot:not([aria-expanded="true"]) { opacity: .35; }

.dot.hint .ring {
  animation: drift var(--d) ease-in-out var(--delay) infinite alternate,
             breathe 2.8s ease-in-out infinite;
}

@keyframes drift {
  from { translate: 0 0; }
  to   { translate: 1.5px -4px; }
}

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%       { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent); }
}

.drop {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  pointer-events: none;
}

.reading {
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .7s ease;
  padding: 4px 2px;
  scrollbar-width: thin;
}

.reading .inner {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35em;
}

.reading.show { opacity: 1; }
.reading p { margin: 0; line-height: 1.6; max-width: 100%; }

.reading p.fa {
  font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;
  font-size: 1.05em;
  line-height: 2.2;
  white-space: nowrap;
}

.reading.wrapfa p.fa { white-space: normal; }
.reading .gap { height: .6em; flex: none; }
.reading .meta { margin-top: .9em; font-size: .78em; color: var(--muted); }

.mark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  margin: 0;
  text-align: center;
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  pointer-events: none;
}

.add {
  position: absolute;
  right: 16px;
  bottom: 10px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.add[hidden] { display: none; }
.add:hover { color: var(--ink); border-color: var(--ink); }

.add:focus-visible,
.sheet button:focus-visible,
.sheet input:focus-visible,
.sheet textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.sheet {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.sheet[hidden] { display: none; }
.sheet h2 { margin: 0; font-size: 22px; font-weight: 400; }
.sheet label, .sheet legend { font-size: 15px; color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 6px; }

.sheet textarea,
.sheet input[type=text],
.sheet input[type=date] {
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
}

.sheet textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.sheet fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.kinds { display: flex; gap: 8px; flex-wrap: wrap; }

.kinds label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  cursor: pointer;
  color: var(--ink);
}

.kinds label:has(input:checked) { border-color: var(--ink); }
.kinds input { position: absolute; opacity: 0; pointer-events: none; }
.kinds label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.kinds .ring { width: 12px; height: 12px; border-radius: 50%; border: 1.6px solid var(--c); }
.kinds label:has(input:checked) .ring { background: var(--c); }

.actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

.actions button {
  font: inherit;
  font-size: 17px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  cursor: pointer;
}

.primary  { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.status { margin: 0; font-size: 15px; color: var(--muted); min-height: 1.2em; }

@media (prefers-reduced-motion: reduce) {
  .dot .ring, .dot.hint .ring { animation: none; }
  .reading, .cup, .dot { transition: none; }
}