@font-face {
  font-family: 'JetBrains Mono';
  src: url('./assets/JetBrainsMono-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./assets/JetBrainsMono-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  font-family: 'JetBrains Mono', monospace;
  color: #1a1a1a;
  background: #efefef;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button { border: 0; padding: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 4px; }
button[aria-disabled='true'] { cursor: default; }
button:disabled { cursor: default; }
h1, h2, p { margin: 0; }
.home {
  /* All design measurements use the 393px Figma frame as their basis. */
  --scale: 1;
  --u: 1px;
  width: 100%;
  max-width: 480px;
  height: 100svh;
  min-height: calc(746 * var(--u));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  background: #fafafa;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.header {
  min-height: calc(46 * var(--u));
  flex-shrink: 0;
  padding-inline: calc(16 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e6e6e6;
}
h1 { font-size: calc(15 * var(--u)); font-weight: 700; line-height: 1.4; }
.playlist {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  min-height: calc(44 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
  white-space: nowrap;
}
.icon { display: block; position: relative; flex-shrink: 0; }
.icon img { display: block; transform: scale(var(--scale)); transform-origin: top left; }
.icon-playlist, .icon-undo { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.icon-reset { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.body {
  flex: 1;
  min-height: 0;
  padding: calc(24 * var(--u)) calc(16 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}
.recitation {
  position: relative;
  padding-bottom: calc(74 * var(--u));
  flex: 1;
  min-height: calc(244 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: calc(8 * var(--u));
  text-align: right;
}
.position { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); }
h2 {
  width: 100%;
  font-size: calc(36 * var(--u));
  line-height: calc(48 * var(--u));
  font-weight: 700;
  overflow-wrap: break-word;
}
.counter-row {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(18 * var(--u));
  padding-top: calc(16 * var(--u));
}
.undo { display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.undo-ring {
  display: grid;
  place-items: center;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  border: calc(2 * var(--u)) solid #000;
  border-radius: 50%;
}
.undo:disabled .undo-ring { opacity: .3; }
.count {
  display: flex;
  align-items: center;
  padding: calc(4 * var(--u)) calc(12 * var(--u));
  background: #000;
  color: #fff;
  font-size: calc(32 * var(--u));
  font-weight: 400;
  line-height: calc(42 * var(--u));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.beads {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: calc(393 * var(--u));
  /* Extend through the body padding and footer to the screen edge. */
  height: calc(408 * var(--u) + env(safe-area-inset-bottom));
  margin-bottom: calc(-80 * var(--u) - env(safe-area-inset-bottom));
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.beads:focus-visible { outline-offset: -4px; }
.beads-art-scale {
  position: absolute;
  left: calc(var(--bead-x, 67) * var(--u));
  top: calc(var(--bead-y, 14) * var(--u));
  width: 490.26069371558526px;
  height: 488.2786937155853px;
  transform: scale(calc(var(--scale) * var(--bead-size, 0.951)));
  transform-origin: top left;
  pointer-events: none;
}
.beads-art {
  display: block;
  transform: rotate(var(--angle, 0deg));
  transform-origin: 50% 50%;
  transition: transform .6s ease;
  will-change: transform;
  pointer-events: none;
}
.footer {
  position: relative;
  pointer-events: none;
  height: calc(56 * var(--u));
  padding-inline: calc(24 * var(--u));
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.reset {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  min-height: calc(44 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(21 * var(--u));
  color: #000;
}
.mute {
  position: absolute;
  /* The 22 icon used to sit centred in a 44 box whose bottom met Reset.
     Keep that icon in place: bottom moves up by half the removed padding. */
  left: calc(24 * var(--u));
  bottom: calc(61 * var(--u));
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: auto;
}
/* 44×44 tap target. Reset is 11u below the icon, so the slop stops 3u short of it
   and the rest of the height goes upward. Width grows to the right, clear of the
   bead artwork; the left edge stays on the icon so count taps beside it still count. */
.mute::after {
  content: '';
  position: absolute;
  inset: calc(-14 * var(--u)) calc(-22 * var(--u)) calc(-8 * var(--u)) 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 600px) {
  .home { width: 393px; }
}
@media (prefers-reduced-motion: reduce) {
  .beads-art { transition: none; }
}


.home:focus { outline: none; }
.icon-24 { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.icon-22 { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.icon-32 { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.playlist { min-width: 0; max-width: calc(55% + 24 * var(--u)); }
.playlist-marquee { min-width: 0; overflow: hidden; display: block; }
.playlist-marquee-text { display: inline-block; white-space: nowrap; vertical-align: top; }
.playlist-marquee.is-overflowing .playlist-marquee-text { animation: playlist-marquee var(--marquee-duration) linear infinite alternate; }
.playlist:hover .playlist-marquee-text, .playlist:focus-visible .playlist-marquee-text { animation-play-state: paused; }
@keyframes playlist-marquee {
  0%, 15% { transform: translateX(0); }
  85%, 100% { transform: translateX(calc(-1 * var(--marquee-distance))); }
}
@media (prefers-reduced-motion: reduce) {
  .playlist-marquee.is-overflowing .playlist-marquee-text { animation: none; }
  .playlist-marquee { overflow-x: auto; scrollbar-width: none; }
}
.view-page { min-height: 420px; height: 100dvh; }
.view-page .header { min-height: calc(43 * var(--u)); }
.page-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: calc(24 * var(--u)) calc(16 * var(--u)); display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.library-body { align-items: flex-end; }
.playlist-list { width: 100%; margin-top: 0; display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.playlist-row { display: flex; align-items: center; gap: calc(24 * var(--u)); width: 100%; padding-left: calc(8 * var(--u)); }
.playlist-title { flex: 1; min-width: 0; text-align: right; font-size: calc(32 * var(--u)); font-weight: 700; line-height: calc(42 * var(--u)); overflow-wrap: anywhere; }
.page-nav { height: calc(76 * var(--u)); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(16 * var(--u)) calc(24 * var(--u)); }
.page-nav.library-nav { height: calc(88 * var(--u)); }
.icon-button { flex-shrink: 0; display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.playlist-row > .icon-button { width: calc(24 * var(--u)); position: relative; }
.playlist-row > .icon-button::after, .zikir-row > .icon-button::after, .drag-handle::after { content: ''; position: absolute; inset: 0 calc(-8 * var(--u)); }
.add-button { align-self: flex-end; background: #1a1a1a; color: white; display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)); font-size: calc(28 * var(--u)); line-height: calc(37 * var(--u)); flex-shrink: 0; }
.save-button { width: calc(40 * var(--u)); height: calc(40 * var(--u)); display: grid; place-items: center; background: #1a1a1a; }
.save-button:disabled { background: #e6e6e6; }
.title-input, .zikir-input, #target { font: inherit; color: inherit; border: 0; background: transparent; border-radius: 0; padding: 0; min-width: 0; width: 100%; }
.title-input::placeholder, .zikir-input::placeholder, #target::placeholder { color: #e6e6e6; opacity: 1; }
.title-input { font-size: calc(32 * var(--u)); font-weight: 700; line-height: calc(42 * var(--u)); height: calc(40 * var(--u)); flex-shrink: 0; }
input:focus-visible, textarea:focus-visible { outline: 1px solid #888; outline-offset: 4px; }
.zikir-list { display: flex; flex-direction: column; width: 100%; gap: calc(24 * var(--u)); }
.zikir-list:empty { display: none; }
.zikir-row { display: flex; gap: calc(8 * var(--u)); align-items: stretch; flex-shrink: 0; }
.zikir-row > .icon-button { width: calc(24 * var(--u)); height: auto; min-height: calc(44 * var(--u)); position: relative; }
.zikir-content { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: calc(8 * var(--u)); align-items: flex-end; text-align: right; font-size: calc(22 * var(--u)); line-height: calc(29 * var(--u)); }
.zikir-text { width: 100%; font-weight: 700; overflow-wrap: anywhere; }
.zikir-target { font-weight: 400; white-space: nowrap; }
.drag-handle { width: calc(24 * var(--u)); margin-left: calc(8 * var(--u)); flex-shrink: 0; position: relative; display: grid; place-items: center; touch-action: none; cursor: grab; }
.dragging { opacity: .6; background: #e6e6e6; }
.dragging .drag-handle { cursor: grabbing; }
.zikir-editor { justify-content: space-between; }
.zikir-input { resize: none; flex: 1 1 0; min-height: calc(96 * var(--u)); font-weight: 700; font-size: calc(36 * var(--u)); line-height: calc(48 * var(--u)); text-align: right; }
.target-controls { display: flex; flex-direction: column; gap: calc(32 * var(--u)); flex-shrink: 0; width: 100%; }
.stepper { display: flex; gap: calc(32 * var(--u)); align-items: center; }
.step-button { flex-shrink: 0; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #1a1a1a; }
.step-button:disabled { opacity: .4; }
#target { height: calc(64 * var(--u)); border: calc(2 * var(--u)) solid #1a1a1a; border-radius: 99px; text-align: center; font-size: calc(36 * var(--u)); line-height: calc(48 * var(--u)); appearance: textfield; -moz-appearance: textfield; }
#target::-webkit-inner-spin-button, #target::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.presets { display: flex; height: calc(44 * var(--u)); border: calc(2 * var(--u)) solid #000; }
.presets button { flex: 1; font-size: calc(22 * var(--u)); border-right: calc(2 * var(--u)) solid #000; }
.presets button:last-child { border-right: none; }
.presets button[aria-pressed='true'] { background: #1a1a1a; color: #fff; }
.empty-state { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 24px; padding: 24px 16px; text-align: right; }
.empty-label { text-align: right; color: #666; }
#storage-notice { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; padding: 8px 16px; font-size: 12px; background: #1a1a1a; color: white; z-index: 20; }
dialog { width: min(360px, calc(100vw - 32px)); padding: 24px; background: #fafafa; color: #1a1a1a; border: 0; }
dialog::backdrop { background: #0005; }
dialog h2 { font-size: 22px; line-height: 1.4; margin-bottom: 16px; }
dialog p { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px; }
.dialog-actions button { padding: 10px 14px; border: 1px solid #1a1a1a; }
#confirm-no { background: #1a1a1a; color: #fff; }
.recitation h2 { flex-shrink: 0; max-height: calc(270 * var(--u)); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
.recitation h2::-webkit-scrollbar { display: none; }
.position { flex-shrink: 0; }
.brand-home { display: inline-flex; align-items: center; min-height: calc(43 * var(--u)); color: inherit; text-decoration: none; }
.brand-home:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@font-face { font-family: 'Inter'; src: url('./assets/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
.presets button:last-child { font-family: 'Inter', sans-serif; }
.view-page:not(.view-library) { position: relative; }
.view-page:not(.view-library)::after { content: ''; position: absolute; inset: 0; border: 1px solid #1a1a1a; pointer-events: none; }

.recitation-paragraph { display: block; white-space: pre-wrap; }
.recitation-paragraph + .recitation-paragraph { margin-top: var(--paragraph-gap, .5em); }
.type-console { position: fixed; z-index: 10; right: 12px; top: 12px; width: 310px; max-width: calc(100vw - 24px); font-size: 12px; }
.type-console summary { list-style: none; width: fit-content; margin-left: auto; cursor: pointer; padding: 10px 12px; background: #1a1a1a; color: white; border-radius: 6px; }
.type-console summary::-webkit-details-marker { display: none; }
.type-console summary:focus-visible { outline: 2px solid #666; outline-offset: 3px; }
.type-panel { margin-top: 8px; background: #fff; padding: 16px; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 8px 32px #0002; max-height: calc(100svh - 72px); overflow-y: auto; }
.type-panel h2 { font-size: 15px; line-height: 1.4; margin-bottom: 8px; }
.type-panel p { font-size: 11px; line-height: 1.5; }
.type-wrap { display: grid; gap: 6px; margin-top: 14px; }
.type-panel select, .type-panel input { font: inherit; color: #1a1a1a; }
.type-panel select { width: 100%; background: #fafafa; padding: 8px; border: 1px solid #aaa; border-radius: 4px; }
.type-field { display: grid; grid-template-columns: 1fr 80px; align-items: center; gap: 8px; margin-top: 14px; }
.type-field small { color: #666; }
.type-field input[type='number'] { width: 100%; border: 1px solid #aaa; border-radius: 4px; padding: 6px; }
.type-field input[type='range'] { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: #1a1a1a; }
.type-hint { margin-top: 14px; color: #555; }
.type-actions { display: flex; gap: 8px; margin-top: 14px; }
.type-actions button { padding: 9px; border: 1px solid #aaa; border-radius: 4px; font-size: 11px; }
#type-copy { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
#type-output { width: 100%; min-height: 90px; resize: vertical; margin: 12px 0 8px; padding: 8px; border: 1px solid #ccc; background: #fafafa; font: 10px/1.5 'JetBrains Mono', monospace; }
@media (max-width: 1049px) {
  .type-console { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
  .type-panel { max-height: 42svh; }
}

@font-face { font-family: 'Noto Sans Arabic'; src: url('./assets/NotoSansArabic.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
.arabic-text { font-family: 'Noto Sans Arabic', sans-serif; letter-spacing: normal !important; word-spacing: normal !important; padding-block: .12em; }
.zikir-input, .zikir-text, .playlist-title, .title-input { font-family: 'JetBrains Mono', 'Noto Sans Arabic', monospace; }