/* Darb's screens, drawn in HTML (see darb-ui.js). Sizes inside a screen are in cqw so each phone scales as one piece. */
.dx-phone { --g: #044a27; --g2: #1aa35a; --ink: #101a14; --soft: #6b7d72; --line: #e3ebe6; position: relative; width: 300px; aspect-ratio: 9 / 19.5; padding: 3.2%; border-radius: 15% / 7%; background: linear-gradient(150deg, #3a3d40, #121314 40%, #26282a); box-shadow: 0 40px 80px rgba(4, 8, 20, .38), 0 12px 24px rgba(4, 8, 20, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.dx-screen { container-type: inline-size; position: relative; height: 100%; overflow: hidden; border-radius: 12.4% / 5.8%; background: #f7faf8; color: var(--ink); font-family: "Instrument Sans", system-ui, sans-serif; text-align: left; line-height: 1.25; }
.dx-in { display: flex; flex-direction: column; height: 100%; padding: 0 6.4cqw; }
.dx-screen svg { width: 1em; height: 1em; flex: none; }
.dx-status { display: flex; align-items: center; justify-content: space-between; height: 15cqw; padding: 1cqw 3cqw 0; font: 600 4.6cqw/1 "Instrument Sans", system-ui, sans-serif; }
.dx-island { position: absolute; left: 50%; top: 3.4cqw; z-index: 2; width: 30cqw; height: 9cqw; border-radius: 99px; background: #050505; transform: translateX(-50%); }
.dx-sig { display: flex; align-items: flex-end; gap: .8cqw; }
.dx-sig i { width: 1.1cqw; border-radius: 1px; background: var(--ink); }
.dx-sig i:nth-child(1) { height: 1.6cqw; } .dx-sig i:nth-child(2) { height: 2.4cqw; } .dx-sig i:nth-child(3) { height: 3.2cqw; }
.dx-sig em { width: 6.4cqw; height: 3.2cqw; margin-left: 1.4cqw; border-radius: 1cqw; background: var(--ink); box-shadow: inset 0 0 0 .5cqw #f7faf8, 0 0 0 .35cqw var(--ink); transform: scale(.8); }

.dx-top { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; margin-top: 2cqw; font-size: 4cqw; }
.dx-top b { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 3.3cqw; color: var(--g); }
.dx-x { color: #8fa398; font-size: 5.4cqw; display: flex; }
.dx-xp { display: inline-flex; align-items: center; gap: 1cqw; padding: 1.4cqw 2.8cqw; border-radius: 99px; background: #fff1d8; color: #a8641a; font-weight: 700; font-size: 3.6cqw; }
.dx-xp svg { color: #e8901f; }
.dx-bar { height: 2.6cqw; margin-top: 4cqw; border-radius: 99px; background: var(--line); overflow: hidden; }
.dx-bar i { display: block; height: 100%; width: calc(var(--to) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--g2), var(--g)); transform-origin: left; animation: dx-grow 1.4s .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes dx-grow { from { transform: scaleX(.3); } }

.dx-topic { display: flex; align-items: center; gap: 3cqw; margin-top: 7cqw; font-size: 4.2cqw; font-weight: 600; color: var(--soft); }
.dx-tile { display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 3.2cqw; background: linear-gradient(160deg, #23a35e, var(--g)); color: #fff; font-size: 6cqw; box-shadow: 0 2cqw 4cqw rgba(4, 74, 39, .25); }
.dx-q { margin-top: 4.4cqw; font: 700 8.2cqw/1.08 "Instrument Sans", system-ui, sans-serif; letter-spacing: -.035em; }
.dx-q.small { font-size: 6.6cqw; margin-top: 6cqw; }
.dx-opts { display: grid; gap: 3cqw; margin-top: 6cqw; }
.dx-opts span { display: flex; align-items: center; justify-content: space-between; min-height: 14cqw; padding: 0 5cqw; border-radius: 4.4cqw; background: #fff; box-shadow: inset 0 0 0 .5cqw var(--line), 0 1cqw 0 var(--line); font-size: 5cqw; font-weight: 600; }
.dx-opts .right { background: linear-gradient(180deg, #21a75e, #128a49); color: #fff; box-shadow: 0 1cqw 0 #0b6a37, 0 4cqw 8cqw rgba(18, 138, 73, .3); animation: dx-pick .5s 1s cubic-bezier(.2, .8, .2, 1) both; }
.dx-opts .right svg { font-size: 5.4cqw; }
@keyframes dx-pick { from { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 .5cqw var(--line), 0 1cqw 0 var(--line); transform: scale(.97); } }
.dx-sheet { margin: auto -2cqw 5cqw; padding: 5cqw; border-radius: 6cqw; background: #e9f4ee; animation: dx-up .6s 1.5s cubic-bezier(.2, .8, .2, 1) both; }
.dx-sheet b { display: flex; align-items: center; gap: 2cqw; font-size: 5cqw; color: #128a49; }
.dx-sheet p { margin-top: 2cqw; font-size: 4.1cqw; line-height: 1.4; color: #2b3a31; }
@keyframes dx-up { from { opacity: 0; transform: translateY(30%); } }
.dx-cta { display: grid; place-items: center; min-height: 12.5cqw; margin-top: 4cqw; border-radius: 4cqw; background: var(--g); color: #fff; font-size: 4.8cqw; font-weight: 700; box-shadow: 0 1cqw 0 #02301a; }

.dx-steps { display: flex; gap: 1.4cqw; margin-top: 5cqw; }
.dx-steps i { flex: 1; height: 1.6cqw; border-radius: 99px; background: var(--line); }
.dx-steps i.done { background: #2f9fd0; }
.dx-steps i.cur { background: linear-gradient(90deg, #2f9fd0 60%, var(--line) 60%); }
.dx-kicker { margin-top: 7cqw; font-size: 3.6cqw; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1d7fb0; }
.dx-wudu .dx-q { margin-top: 2.4cqw; }
.dx-sub { margin-top: 2.4cqw; font-size: 4.4cqw; color: var(--soft); }
.dx-pour { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw; }
.dx-ring { position: relative; display: grid; place-items: center; width: 44cqw; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#2f9fd0 calc(var(--fill, .66) * 360deg), #dcecf5 0); animation: dx-fill 3.2s 1s ease-in-out infinite; }
.dx-ring::before { content: ""; position: absolute; inset: -5cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 159, 208, .22), transparent); }
.dx-ring > span { position: relative; display: grid; place-items: center; width: 36cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8bd6f3, #2f9fd0 60%, #1d7fb0); color: #fff; font-size: 14cqw; box-shadow: inset 0 -2cqw 5cqw rgba(9, 60, 100, .35), 0 4cqw 9cqw rgba(29, 127, 176, .35); }
@property --fill { syntax: "<number>"; inherits: false; initial-value: .66; }
@keyframes dx-fill { 0% { --fill: .34; } 70%, 100% { --fill: 1; } }
.dx-count { display: flex; gap: 2cqw; font-size: 5.4cqw; color: #cfe2ec; }
.dx-count .on { color: #2f9fd0; }
.dx-count i { display: flex; }
.dx-pour small { font-size: 3.8cqw; font-weight: 600; color: var(--soft); }
.dx-next { margin: 0 -2cqw 6cqw; padding: 4cqw 5cqw; border-radius: 4.4cqw; background: #fff; box-shadow: inset 0 0 0 .5cqw var(--line); font-size: 4.2cqw; font-weight: 600; color: var(--soft); }

.dx-fig { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dx-fig .h { fill: currentColor; stroke: none; }
.dx-pos { display: flex; align-items: center; gap: 5cqw; margin-top: 7cqw; padding: 5cqw; border-radius: 6cqw; background: linear-gradient(160deg, #eaf5ef, #d7ecdf); }
.dx-pos .dx-fig { width: 30cqw; height: 30cqw; color: var(--g); }
.dx-pos b { display: block; font-size: 8cqw; letter-spacing: -.03em; }
.dx-pos span[lang] { display: block; font: 500 6cqw "Noto Naskh Arabic", serif; color: var(--g); }
.dx-pos small { display: block; margin-top: 1cqw; font-size: 3.8cqw; color: var(--soft); }
.dx-seq { display: flex; justify-content: space-between; margin-top: 5cqw; }
.dx-seq span { display: grid; place-items: center; width: 15cqw; aspect-ratio: 1; border-radius: 4cqw; background: #fff; box-shadow: inset 0 0 0 .5cqw var(--line); color: #b6c6bc; }
.dx-seq span.done { color: var(--g2); }
.dx-seq span.cur { background: var(--g); color: #fff; box-shadow: 0 2cqw 5cqw rgba(4, 74, 39, .3); }
.dx-seq .dx-fig { width: 10cqw; height: 10cqw; }

.dx-hi { display: flex; align-items: center; justify-content: space-between; margin-top: 3cqw; }
.dx-hi small { display: block; font-size: 3.8cqw; color: var(--soft); }
.dx-hi b { font-size: 7.4cqw; letter-spacing: -.03em; }
.dx-fire { display: inline-flex; align-items: center; gap: 1cqw; padding: 1.6cqw 3cqw; border-radius: 99px; background: #ffe7da; color: #d0561f; font-size: 4.4cqw; font-weight: 700; }
.dx-today { margin-top: 5cqw; padding: 5cqw; border-radius: 6cqw; background: linear-gradient(160deg, #0b6a37, var(--g)); color: #fff; box-shadow: 0 4cqw 9cqw rgba(4, 74, 39, .3); }
.dx-today small { font-size: 3.6cqw; opacity: .8; font-weight: 600; }
.dx-today b { display: block; margin-top: 1cqw; font-size: 6.4cqw; letter-spacing: -.02em; }
.dx-today .dx-cta { background: #fff; color: var(--g); box-shadow: none; margin-top: 4cqw; min-height: 11cqw; }
.dx-path { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 2cqw 0 4cqw; }
.dx-path span { display: grid; justify-items: center; gap: 1cqw; transform: translateX(calc(var(--x) * 1cqw)); }
.dx-path i { display: grid; place-items: center; width: 14cqw; aspect-ratio: 1; border-radius: 50%; background: #e4ebe7; color: #a7b7ad; font-size: 6cqw; box-shadow: 0 1.2cqw 0 #cfd9d3; }
.dx-path .done i { background: var(--g2); color: #fff; box-shadow: 0 1.2cqw 0 #0f7a40; }
.dx-path .cur i { width: 18cqw; background: #2f9fd0; color: #fff; box-shadow: 0 1.2cqw 0 #1d6f9a, 0 0 0 2.4cqw rgba(47, 159, 208, .18); }
.dx-path small { font-size: 3.4cqw; font-weight: 600; color: var(--soft); }

/* Floating cards that sit beside a phone */
.dx-card { --ink: #101a14; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, .94); color: var(--ink); font-family: "Instrument Sans", system-ui, sans-serif; text-align: left; box-shadow: 0 24px 50px rgba(4, 8, 20, .28), 0 0 0 1px rgba(255, 255, 255, .6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.dx-card svg { width: 1em; height: 1em; }
.dx-card b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.dx-card small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: #5d6d63; }
.dx-streak { flex-wrap: wrap; width: 250px; }
.dx-streak > span:nth-child(2) { flex: 1; min-width: 0; }
.dx-fire.big { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 14px; font-size: 24px; background: linear-gradient(160deg, #ffb35c, #f0642a); color: #fff; box-shadow: 0 8px 18px rgba(240, 100, 42, .35); }
.dx-week { display: flex; gap: 4px; width: 100%; }
.dx-week i { flex: 1; display: grid; place-items: center; height: 26px; border-radius: 8px; background: #f0f3f1; color: #a3b2a8; font: 700 11px "Instrument Sans", sans-serif; font-style: normal; }
.dx-week i.on { background: #fff0e4; color: #ef6f2c; font-size: 13px; }
.dx-notice { width: 270px; }
.dx-notice img { flex: none; width: 40px; height: 40px; border-radius: 10px; }
.dx-notice > span { min-width: 0; }
.dx-notice b { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.dx-notice b small { margin: 0; font-weight: 500; }
.dx-notice > span > span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.35; color: #2d3a32; }

@media (prefers-reduced-motion: reduce) { .dx-screen *, .dx-card { animation: none !important; } }