@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/amiri-400-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/amiri-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/amiri-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/amiri-700-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/amiri-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/amiri-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/fraunces-400-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/fraunces-400-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(assets/fonts/plus-jakarta-sans-400-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(assets/fonts/plus-jakarta-sans-400-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --paper: #f6f0e3; --paper-2: #efe7d3; --panel: #fcf9f0; --ink: #23423a; --ink-soft: #51695f; --ink-faint: #7e908a; --teal: #2f5d50; --teal-deep: #1e3e35; --terra: #b9663d; --terra-soft: #f0ddd0; --gold: #b9985a; --gold-soft: #e9dcbc; --line: rgba(35, 66, 58, 0.16); --line-strong: rgba(35, 66, 58, 0.32); --shadow: 0 10px 30px -12px rgba(31, 62, 53, 0.25); --focus: 3px solid #b9663d; --font-display: "Fraunces", "Georgia", serif; --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --font-arabic: "Amiri", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; --measure: 42rem; --radius: 18px; --arch: 50% 50% 12px 12px / 42% 42% 12px 12px; } :root[data-theme="night"] { --paper: #12201b; --paper-2: #17291f; --panel: #1b2f28; --ink: #ece4d0; --ink-soft: #bcc7bb; --ink-faint: #8fa096; --teal: #9cc6b4; --teal-deep: #cfe5da; --terra: #d98a5f; --terra-soft: #3a2c22; --gold: #cfae6a; --gold-soft: #3c351f; --line: rgba(236, 228, 208, 0.16); --line-strong: rgba(236, 228, 208, 0.34); --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: hidden; } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background-color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%232f5d50' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M48 8 58 38 88 48 58 58 48 88 38 58 8 48 38 38Z'/%3E%3Cpath d='M48 24 54 42 72 48 54 54 48 72 42 54 24 48 42 42Z'/%3E%3C/g%3E%3C/svg%3E"); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } .skip-link { position: absolute; left: -999px; top: 0; background: var(--teal-deep); color: #fff; padding: 0.6rem 1rem; z-index: 100; border-radius: 0 0 10px 0; } .skip-link:focus { left: 0; } :focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: 4px; } .topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; padding: 0.7rem clamp(1rem, 4vw, 2.2rem); background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .wordmark { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.01em; } .wordmark em { color: var(--terra); font-style: normal; } .wordmark-moon { width: 1.35rem; height: 1.35rem; color: var(--gold); flex: none; } .topnav { display: flex; gap: clamp(0.4rem, 2vw, 1.4rem); flex-wrap: wrap; justify-content: flex-end; } .topnav a { color: var(--ink-soft); text-decoration: none; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.4rem 0.2rem; border-bottom: 2px solid transparent; } .topnav a:hover, .topnav a[aria-current="true"] { color: var(--terra); border-bottom-color: var(--gold); } .ribbon { background: var(--terra-soft); color: var(--ink); border-bottom: 1px solid var(--line); padding: 0.55rem clamp(1rem, 4vw, 2.2rem); font-size: 0.86rem; line-height: 1.5; } .ribbon strong { color: var(--terra); } .ribbon a { color: var(--teal); font-weight: 700; text-decoration: none; white-space: nowrap; } .ribbon a:hover { text-decoration: underline; } main { display: block; min-height: 62vh; padding: clamp(1.4rem, 4vw, 3rem) clamp(1rem, 4vw, 2.2rem) 4.5rem; } .wrap { max-width: var(--measure); margin: 0 auto; } .wrap-wide { max-width: 60rem; margin: 0 auto; } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .reveal > * { animation: fadeUp 0.55s cubic-bezier(0.22, 0.8, 0.36, 1) both; } .reveal > *:nth-child(1) { animation-delay: 0.03s; } .reveal > *:nth-child(2) { animation-delay: 0.11s; } .reveal > *:nth-child(3) { animation-delay: 0.19s; } .reveal > *:nth-child(4) { animation-delay: 0.27s; } .reveal > *:nth-child(5) { animation-delay: 0.35s; } .reveal > *:nth-child(6) { animation-delay: 0.43s; } .reveal > *:nth-child(7) { animation-delay: 0.51s; } .reveal > *:nth-child(8) { animation-delay: 0.59s; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; } h1 { font-size: clamp(2.1rem, 6.5vw, 3.4rem); letter-spacing: -0.01em; } h2 { font-size: clamp(1.45rem, 4vw, 2rem); } h3 { font-size: 1.15rem; } .kicker { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold); margin: 0 0 0.9rem; } .kicker::after { content: ""; display: inline-block; width: 2.2rem; height: 1px; background: var(--gold); vertical-align: middle; margin-left: 0.7rem; opacity: 0.7; } .lead { font-size: 1.15rem; color: var(--ink-soft); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; border-radius: 999px; padding: 0.78rem 1.5rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease; min-height: 44px; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--teal); color: #fdfaf2; box-shadow: var(--shadow); } .btn-primary:hover { background: var(--teal-deep); transform: translateY(-1px); } :root[data-theme="night"] .btn-primary { background: #2f5d50; } :root[data-theme="night"] .btn-primary:hover { background: #38705f; } .btn-ghost { background: transparent; color: var(--teal); border-color: var(--line-strong); } .btn-ghost:hover { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 7%, transparent); } .btn-quiet { background: var(--paper-2); color: var(--ink-soft); } .btn-quiet:hover { color: var(--ink); } .btn[disabled] { opacity: 0.4; pointer-events: none; } .linklike { background: none; border: none; padding: 0; font: inherit; color: var(--teal); font-weight: 700; cursor: pointer; text-decoration: underline; } .chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.28rem 0.7rem; border-radius: 999px; border: 1.5px solid transparent; white-space: nowrap; } .chip-rukun { background: var(--terra); color: #fdf6ee; } .chip-wajib { background: color-mix(in srgb, var(--terra) 82%, #000 8%); color: #fdf6ee; } .chip-sunnah { border-color: var(--teal); color: var(--teal); background: transparent; } .chip-syarat { border-color: var(--gold); color: color-mix(in srgb, var(--gold) 60%, var(--ink)); } .chip-info { background: var(--paper-2); color: var(--ink-soft); } .chip-repeat { background: var(--gold-soft); color: color-mix(in srgb, var(--gold) 40%, var(--ink)); } .hero { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } @media (min-width: 820px) { .hero { grid-template-columns: 1.1fr 0.9fr; } } .hero-art { border-radius: var(--arch); overflow: hidden; border: 1px solid var(--line); outline: 1px solid var(--gold); outline-offset: 5px; box-shadow: var(--shadow); } .hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; } .notice { margin-top: clamp(2rem, 5vw, 3rem); background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--terra); border-radius: var(--radius); padding: 1.1rem 1.3rem; font-size: 0.95rem; } .notice h3 { color: var(--terra); margin-bottom: 0.35rem; font-family: var(--font-body); font-weight: 800; font-size: 0.95rem; } .notice p { margin: 0.3rem 0; color: var(--ink-soft); } .home-grid { display: grid; gap: 1rem; margin-top: clamp(2rem, 5vw, 3rem); } @media (min-width: 680px) { .home-grid { grid-template-columns: repeat(3, 1fr); } } .tile { display: block; text-decoration: none; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); } .tile h3 { margin-bottom: 0.2rem; } .tile p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); } .tile .tile-n { font-family: var(--font-display); font-size: 0.85rem; color: var(--gold); } .prayers { margin-top: clamp(2rem, 5vw, 3rem); } .prayer-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.8rem; align-items: baseline; padding: 0.85rem 0.4rem; border-bottom: 1px solid var(--line); } .prayer-row:first-of-type { border-top: 1px solid var(--line); } .prayer-name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; } .prayer-time { color: var(--ink-faint); font-size: 0.85rem; } .prayer-rakaat { font-weight: 800; color: var(--terra); white-space: nowrap; } .prayer-loud { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); } .progress { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; } .progress-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; color: var(--ink-soft); white-space: nowrap; } .progress-track { flex: 1; height: 4px; border-radius: 999px; background: var(--paper-2); overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--terra)); border-radius: 999px; transition: width 0.4s cubic-bezier(0.22, 0.8, 0.36, 1); } .toggles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .toggle { font-size: 0.78rem; font-weight: 700; padding: 0.42rem 0.9rem; border-radius: 999px; border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink-soft); cursor: pointer; transition: all 0.15s ease; min-height: 36px; } .toggle[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fdfaf2; } .toggle-hafalan[aria-pressed="true"] { background: var(--terra); border-color: var(--terra); } .step-card { animation: fadeUp 0.4s cubic-bezier(0.22, 0.8, 0.36, 1) both; } .step-figure { width: min(46vw, 220px); margin: 0 auto 1.4rem; border-radius: var(--arch); overflow: hidden; border: 1px solid var(--line); outline: 1px solid var(--gold); outline-offset: 4px; background: var(--paper-2); } .step-figure img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; } .step-head { text-align: center; margin-bottom: 1.2rem; } .step-chips { display: flex; justify-content: center; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.7rem; } .step-title { margin-bottom: 0.25rem; } .step-move { color: var(--ink-soft); font-size: 0.97rem; max-width: 34rem; margin: 0 auto; } .arabic { font-family: var(--font-arabic); direction: rtl; text-align: center; white-space: pre-line; font-size: clamp(1.9rem, 6.5vw, 2.9rem); line-height: 2.05; color: var(--ink); margin: 1.6rem 0 0.8rem; font-weight: 400; } .arabic-sm { font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 2; } .translit { text-align: center; white-space: pre-line; color: var(--teal-deep); font-weight: 600; font-size: 1.02rem; margin: 0 auto 0.6rem; max-width: 36rem; } .arti { font-family: var(--font-display); font-style: italic; text-align: center; white-space: pre-line; color: var(--ink-soft); font-size: 1.08rem; max-width: 34rem; margin: 0 auto 1.4rem; } .arti::before { content: "“"; color: var(--gold); } .arti::after { content: "”"; color: var(--gold); } .meaning { background: var(--paper-2); border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; padding: 0.95rem 1.15rem; font-size: 0.95rem; color: var(--ink-soft); margin: 1.2rem 0; } .meaning strong:first-child { color: var(--ink); } .source-line { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.84rem; color: var(--ink-faint); margin: 1rem 0 0.3rem; line-height: 1.5; } .source-line svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.15rem; color: var(--gold); } .source-line a { color: var(--teal); font-weight: 600; text-decoration: none; } .source-line a:hover { text-decoration: underline; } .source-grade { font-weight: 700; color: var(--ink-soft); } details.variants { margin: 0.8rem 0 0; font-size: 0.88rem; color: var(--ink-soft); } details.variants summary { cursor: pointer; font-weight: 700; color: var(--ink-faint); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; } details.variants summary:hover { color: var(--terra); } details.variants ul { margin: 0.5rem 0 0; padding-left: 1.2rem; } details.variants li { margin-bottom: 0.35rem; } .veil { position: relative; cursor: pointer; border-radius: 12px; } .veil.is-hidden > .veil-content { filter: blur(9px); opacity: 0.45; user-select: none; } .veil .veil-hint { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra); } .veil.is-hidden .veil-hint { display: flex; } .hafalan-bar { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 1.2rem 0; } .hafalan-count { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--terra); min-width: 3.2rem; text-align: center; } @keyframes pop { 50% { transform: scale(1.25); } } .hafalan-count.pop { animation: pop 0.3s ease; } .stepbar { position: sticky; bottom: 0; display: flex; gap: 0.7rem; padding: 0.8rem 0 max(0.8rem, env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--paper) 65%, transparent); margin-top: 2rem; } .stepbar .btn { flex: 1; } .stepjump { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.3rem 0.1rem 0.8rem; scrollbar-width: thin; margin-bottom: 1rem; } .stepjump button { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink-soft); font-weight: 700; font-size: 0.8rem; cursor: pointer; } .stepjump button.done { border-color: var(--gold); color: var(--gold); } .stepjump button[aria-current="true"] { background: var(--teal); border-color: var(--teal); color: #fdfaf2; } .ref-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 0.9rem; } .ref-item h3 { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.3rem; } .ref-item p { margin: 0.3rem 0; font-size: 0.95rem; color: var(--ink-soft); } .ref-num { font-family: var(--font-display); color: var(--gold); font-size: 0.95rem; font-weight: 700; min-width: 1.6rem; } .mistake-fix { color: var(--teal); font-weight: 600; } .mistake-fix::before { content: "✓ "; color: var(--gold); } .sources-group { margin-bottom: 2rem; } .sources-group h3 { border-bottom: 2px solid var(--gold-soft); padding-bottom: 0.4rem; } .sources-group li { margin-bottom: 0.5rem; font-size: 0.92rem; color: var(--ink-soft); } .sources-group a { color: var(--teal); text-decoration: none; font-weight: 600; } .sources-group a:hover { text-decoration: underline; } .footer { border-top: 1px solid var(--line); background: var(--paper-2); } .footer-inner { max-width: var(--measure); margin: 0 auto; padding: 1.6rem clamp(1rem, 4vw, 2.2rem); } .footer-note { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 0.6rem; } .footer-links { font-size: 0.85rem; margin: 0; } .footer-links a { color: var(--teal); font-weight: 600; text-decoration: none; } .footer-links a:hover { text-decoration: underline; } .seo-fallback { max-width: var(--measure); margin: 0 auto; } .seo-fallback h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); } .seo-fallback h2 { margin-top: 2rem; border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; } .seo-fallback .seo-lead { font-size: 1.1rem; color: var(--ink-soft); } .seo-fallback .seo-disclaimer { background: var(--terra-soft); border-left: 4px solid var(--terra); padding: 0.9rem 1.1rem; border-radius: 0 10px 10px 0; } .seo-fallback img { max-width: 200px; height: auto; border-radius: 12px; display: block; margin: 0.6rem 0; } .seo-fallback table { width: 100%; border-collapse: collapse; margin: 0.6rem 0; } .seo-fallback th, .seo-fallback td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); } .seo-fallback .seo-translit { color: var(--teal-deep); } .seo-fallback .seo-src { font-size: 0.85rem; color: var(--ink-faint); } .seo-fallback .seo-var { font-size: 0.85rem; color: var(--ink-faint); } .seo-fallback .seo-step { padding: 0.6rem 0; border-bottom: 1px solid var(--line); } #print-doc { display: none; } @media print { body { background: #fff; color: #000; font-size: 11pt; } .topbar, .ribbon, .footer, main, .skip-link, noscript { display: none !important; } #print-doc { display: block; padding: 0; color: #000; } #print-doc h1, #print-doc h2, #print-doc h3 { font-family: var(--font-display); color: #000; } #print-doc h1 { font-size: 20pt; margin-bottom: 4pt; } #print-doc h2 { font-size: 15pt; margin: 18pt 0 6pt; border-bottom: 1pt solid #999; padding-bottom: 3pt; } #print-doc .p-disclaimer { border: 1.5pt solid #000; padding: 8pt 10pt; margin: 10pt 0 14pt; font-weight: 600; font-size: 10pt; } #print-doc .p-step { page-break-inside: avoid; margin-bottom: 14pt; padding-bottom: 10pt; border-bottom: 0.5pt solid #ccc; } #print-doc .p-cat { font-size: 8pt; font-weight: 800; text-transform: uppercase; letter-spacing: 1pt; } #print-doc .arabic { font-size: 18pt; line-height: 2; margin: 8pt 0 4pt; text-align: right; } #print-doc .p-translit { font-style: italic; font-size: 10.5pt; margin: 2pt 0; } #print-doc .p-arti { font-size: 10.5pt; margin: 2pt 0 6pt; } #print-doc .p-src { font-size: 8.5pt; color: #333; } #print-doc img { display: none; } } :root{--paper:#f8f6ef;--paper-2:#efeee4;--panel:#fffdf7;--ink:#263e33;--ink-soft:#526358;--ink-faint:#59695e;--teal:#345c48;--teal-deep:#244632;--terra:#975b38;--line:rgba(49,77,60,.18);--focus:3px solid #975b38} :root[data-theme=night]{--paper:#12201b;--paper-2:#1b2d25;--panel:#1b2f28;--ink:#eeeade;--ink-soft:#c4cec4;--ink-faint:#b4c3b9;--teal:#b5d0bd;--teal-deep:#cfe5da;--terra:#e6ab82;--line:rgba(236,228,208,.2);color-scheme:dark} :root[data-theme=day]{color-scheme:light} body{background-image:none;font-size:1rem} h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}a,button,input,textarea{touch-action:manipulation}a{overflow-wrap:anywhere}button{font-family:inherit}button,a{-webkit-tap-highlight-color:rgba(52,92,72,.15)} main{scroll-margin-top:9rem}main:focus{outline:none}h1,h2,h3,details{scroll-margin-top:9rem} .topbar{padding:.85rem max(1.2rem,calc((100vw - 1160px)/2));gap:.7rem;flex-wrap:wrap;background:var(--paper)} .topnav{gap:1.15rem}.topnav a{font-size:.73rem;letter-spacing:.05em;min-height:44px;display:inline-flex;align-items:center} .wordmark{font-size:1.3rem}.wordmark em{color:var(--terra)}.ribbon{font-size:.75rem;padding:.5rem 1.2rem;line-height:1.65;background:var(--paper-2);color:var(--ink-soft);text-align:center}.ribbon a{display:inline-flex;min-height:30px;align-items:center;margin-left:.3rem}.ribbon strong{color:var(--ink)} .wrap-wide{max-width:1160px;padding:0 1.5rem}.wrap{max-width:800px}.new-home{padding-top:0}.calm-hero{display:grid;grid-template-columns:1.02fr 1fr;gap:4rem;align-items:center;padding:4.5rem 0 2.8rem;margin:0}.calm-hero h1{font-size:clamp(3rem,5.5vw,5rem);font-weight:500;line-height:1.07;letter-spacing:-.045em;margin:1.2rem 0 1.5rem}.calm-hero h1 em{color:var(--teal);font-weight:450}.calm-hero .kicker{font-size:.67rem;letter-spacing:.14em;color:var(--ink-soft)}.small-star{font-size:1.2rem;vertical-align:middle;padding-right:.45rem;color:var(--terra)}.calm-hero .lead{font-size:.98rem;line-height:1.85;max-width:29rem}.hero-ctas{gap:.65rem;margin-top:1.5rem}.btn{padding:.8rem 1.25rem;min-height:46px;font-size:.86rem;display:inline-flex;align-items:center;justify-content:center;gap:1rem;border-radius:7px}.btn-primary{color:var(--paper);background:var(--ink)}.btn-primary:hover{background:var(--teal)}.btn-ghost{background:transparent;border:1px solid var(--line-strong);color:var(--ink)}.btn-quiet{color:var(--ink-soft);background:transparent}.hero-footnote{font-size:.71rem;color:var(--ink-soft);margin-top:1rem} .calm-art{position:relative;margin:0;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible;border-radius:0}.calm-art img{display:block;aspect-ratio:4/5;width:100%;height:auto;object-fit:cover;object-position:65% center;border-radius:190px 190px 12px 12px;border:1px solid var(--line);box-shadow:none}.calm-art:before,.calm-art:after{display:none}.image-note{position:absolute;bottom:2.3rem;left:-2rem;background:var(--panel);padding:.9rem 1.15rem;display:flex;align-items:center;gap:1rem;box-shadow:0 8px 32px #1c302314;border:1px solid var(--line);border-radius:8px}.image-note>span{font-size:1.8rem;color:var(--terra)}.image-note p{font-size:.77rem;line-height:1.75;margin:0}.image-note strong{font-weight:500}.calm-art figcaption{text-align:right;font-size:.65rem;color:var(--ink-soft);margin-top:.5rem} .feature-strip{display:flex;justify-content:space-between;gap:1rem;border-block:1px solid var(--line);padding:1rem 0;font-size:.78rem;color:var(--ink-soft)}.feature-strip strong{font-size:1.1rem;color:var(--ink);margin-right:.25rem}.editorial-notice{margin:1.3rem 0 0;border:1px solid var(--line);border-radius:8px;padding:1rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;background:var(--panel);font-size:.78rem}.editorial-notice p{margin:.3rem 0 0;line-height:1.7;max-width:48rem}.editorial-notice>a{flex-shrink:0;font-size:.74rem}.status-dot{display:inline-block;width:6px;height:6px;background:var(--terra);border-radius:50%;margin-right:.5rem} .path-section{margin:4.5rem 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:1.5rem}.section-heading h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:450;letter-spacing:-.025em;margin:.7rem 0 0}.section-heading>p{font-size:.8rem;color:var(--ink-soft);margin:0}.section-heading>a{font-size:.8rem}.kicker{color:var(--ink-soft);font-size:.67rem;letter-spacing:.15em}.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.path-card{text-decoration:none;color:var(--ink);padding:1.7rem;border:1px solid var(--line);border-radius:10px;background:var(--panel);display:flex;flex-direction:column;transition:border-color .2s,transform .2s}.path-card:hover{transform:translateY(-3px);border-color:var(--teal)}.path-icon{font-size:.8rem;color:var(--terra);font-variant-numeric:tabular-nums}.path-card h3{font-size:1.35rem;font-weight:500;letter-spacing:-.02em;margin:1.6rem 0 .5rem}.path-card p{font-size:.85rem;color:var(--ink-soft);line-height:1.85;margin:0 0 1.7rem}.path-action{margin-top:auto;font-size:.78rem;font-weight:600;border-top:1px solid var(--line);padding-top:1rem;display:flex;justify-content:space-between} .learning-invite{background:var(--paper-2);border:1px solid var(--line);padding:2.8rem;border-radius:12px;display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;margin:0 0 4.5rem}.learning-invite h2{font-size:2.2rem;letter-spacing:-.02em;line-height:1.25;font-weight:450;margin:1rem 0}.learning-invite p{font-size:.87rem;color:var(--ink-soft)}.learning-preview{padding:1.5rem;background:var(--panel);border:1px solid var(--line);border-radius:8px}.learning-preview ol{padding:0 0 0 1.2rem;margin:.6rem 0 0}.learning-preview li{padding:.65rem .4rem;border-bottom:1px solid var(--line);font-size:.85rem}.learning-preview li:last-child{border:0}.learning-preview small{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:.2rem} .prayers{border:0;padding:0;margin-bottom:4.5rem}.prayer-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem}.prayer-mini{border:1px solid var(--line);padding:1.2rem;background:var(--panel);border-radius:8px;display:flex;flex-direction:column}.prayer-mini h3{font-size:1.1rem;margin:0 0 .7rem;font-weight:500}.prayer-mini p{font-size:.78rem;margin:0}.prayer-mini strong{font-size:1.8rem;font-weight:450;font-family:var(--font-display)}.prayer-mini small{color:var(--ink-soft);font-size:.68rem;line-height:1.65;margin:.5rem 0 1rem;min-height:2.5em}.prayer-mini .chip{margin-top:auto;align-self:start;background:var(--paper-2);color:var(--ink);font-size:.62rem}.gentle-end{text-align:center;border-top:1px solid var(--line);padding:3.2rem 0 3.8rem}.gentle-end h2{font-weight:450;font-size:2rem;letter-spacing:-.02em}.gentle-end p:not(.kicker){max-width:37rem;margin:1rem auto;font-size:.85rem;color:var(--ink-soft)}.gentle-end a{font-size:.78rem}.footer{font-size:.75rem}.micro{font-size:.76rem;color:var(--ink-soft);line-height:1.85;overflow-wrap:anywhere}.micro a{color:var(--teal)} .guide-wrap{padding-top:2rem}.guide-crumb{display:flex;justify-content:space-between;font-size:.78rem;margin-bottom:1.2rem}.progress{margin-top:0}.progress-label{font-variant-numeric:tabular-nums}.stepjump{gap:.4rem;justify-content:flex-start;padding-bottom:.25rem}.stepjump button{min-width:40px;min-height:40px;border-radius:8px}.stepjump button.done{background:var(--paper-2);color:var(--ink);position:relative}.stepjump button.done:after{content:"";position:absolute;bottom:3px;left:calc(50% - 2px);width:4px;height:4px;background:var(--teal);border-radius:50%}.stepjump button[aria-current=true]{background:var(--ink);color:var(--paper)}.toggles{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.toggle{font-size:.75rem;min-height:40px;border-radius:7px}.step-card{padding:2rem;border-radius:12px;overflow:visible}.step-title{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.3;margin-top:.8rem}.step-move{font-size:.95rem}.posture-detail{font-size:.8rem;float:right;max-width:230px;margin:0 0 1rem 1rem}.posture-detail summary{cursor:pointer;min-height:40px;padding:.4rem;border-radius:5px;color:var(--ink-soft)}.step-figure{float:none;width:auto;margin:.5rem 0}.step-figure img{display:block;width:100%;height:auto;border-radius:8px}.step-figure figcaption{font-size:.68rem;line-height:1.65;color:var(--ink-soft);margin-top:.5rem}.arabic{font-size:2.1rem;line-height:2.2;letter-spacing:normal;overflow-wrap:anywhere}.arabic-sm{font-size:1.7rem;line-height:2.3}.translit{line-height:1.9;font-size:.95rem}.arti{line-height:1.9;font-size:.93rem}.meaning{font-size:.87rem;line-height:1.9}.source-line{font-size:.75rem;clear:both;overflow-wrap:anywhere}.variants{font-size:.8rem}.variants summary{min-height:44px;display:list-item;padding-top:.6rem;cursor:pointer}.variants li{margin:.7rem 0}.veil{display:block;width:100%;font-family:inherit;color:inherit;background:transparent;border:1px dashed var(--line-strong);text-align:left;cursor:pointer;padding:1rem;margin:1rem 0;border-radius:8px}.veil-content{display:block}.veil-content>.translit,.veil-content>.arti{display:block}.veil.is-hidden .veil-content{visibility:hidden;filter:none;user-select:none}.veil.is-hidden{min-height:75px}.veil-hint{font-size:.78rem}.study-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.5rem}.study-actions .btn{font-size:.76rem;padding:.65rem 1rem}.study-actions button[aria-pressed=true]{border:1px solid var(--teal)}.note-detail{margin:1.5rem 0 .5rem;border-top:1px solid var(--line);padding-top:.5rem;clear:both}.note-detail summary{cursor:pointer;font-size:.8rem;min-height:44px;padding:.5rem 0}.note-detail label{display:block;font-size:.78rem;margin:.5rem 0}textarea,input{font:inherit;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);border-radius:8px;width:100%;padding:.8rem;line-height:1.8}textarea{resize:vertical;font-size:1rem}.audio-link{display:block;font-size:.83rem;border:1px solid var(--line);padding:1rem;border-radius:8px;background:var(--paper-2);margin-top:1rem}.audio-link small{display:block;font-size:.73rem;color:var(--ink-soft);margin-top:.3rem}.stepbar{position:static;padding:1rem 0;margin-bottom:2rem;background:none;border:0;box-shadow:none}.stepbar .btn{font-size:.8rem}.stepbar .btn[disabled]{opacity:.5}.guide-wrap .step-card:after{content:"";display:block;clear:both} .library-page,.learning-page{padding-top:3rem;padding-bottom:3rem}.library-page h1,.learning-page h1{font-size:clamp(2.7rem,5vw,4rem);font-weight:450;letter-spacing:-.04em;margin:.8rem 0}.library-page .lead,.learning-page .lead{max-width:45rem;font-size:1rem}.search-block{margin:2rem 0 1rem;padding:1.5rem;background:var(--panel);border:1px solid var(--line);border-radius:10px}.search-block label{display:block;font-size:.8rem;font-weight:600;margin-bottom:.5rem}.search-block input{font-size:1rem;max-width:100%}.search-filters{display:flex;gap:.5rem;margin-top:1rem}.material-list{display:grid;gap:.8rem}.material-card{display:grid;grid-template-columns:2.5rem 1fr 1rem;gap:1rem;align-items:start;padding:1.5rem;background:var(--panel);border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink);transition:border-color .2s}.material-card:hover{border-color:var(--teal)}.material-card h3{margin:0 0 .4rem;font-family:var(--font-body);font-size:1rem;font-weight:600;text-wrap:pretty}.material-card p{font-size:.8rem;color:var(--ink-soft);margin:0;line-height:1.8}.material-number{font-size:.85rem;color:var(--terra);font-variant-numeric:tabular-nums}.material-meta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.8rem;font-size:.67rem;color:var(--ink-soft)}.material-meta .chip{font-size:.62rem}.material-arrow{color:var(--terra)}.empty-state{padding:2rem;border:1px dashed var(--line-strong);background:var(--panel);border-radius:8px}.empty-state p{font-size:.87rem;color:var(--ink-soft)}.learning-summary{margin:2rem 0 3rem;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:2rem;display:flex;justify-content:space-between;align-items:center;gap:2rem}.learning-summary strong{font-size:3rem;font-family:var(--font-display);font-weight:450;line-height:1}.learning-summary strong span{font-size:1.2rem;color:var(--ink-soft)}.learning-summary p{font-size:.85rem;margin:.8rem 0 .3rem}.learning-summary small{font-size:.73rem;color:var(--ink-soft)}.learning-page h2{font-size:1.8rem;font-weight:450;letter-spacing:-.02em}.learning-page section>p{font-size:.85rem;color:var(--ink-soft)}.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}.plan-card{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:1.5rem;text-decoration:none;color:var(--ink);display:flex;flex-direction:column}.plan-card:hover{border-color:var(--teal)}.plan-card h3{font-size:1.2rem;font-weight:500;margin:1rem 0 .6rem}.plan-card p{font-size:.8rem;color:var(--ink-soft);margin:0 0 1rem}.plan-card small{font-size:.73rem;border-top:1px solid var(--line);padding-top:.8rem;margin-top:auto}.plan-card small span{float:right}.saved-section{margin-top:3rem}.personal-note{border:1px solid var(--line);padding:1.5rem;border-radius:8px;margin:1rem 0;background:var(--panel)}.personal-note h3{font-family:var(--font-body);font-size:.9rem}.personal-note p{font-size:.9rem;white-space:pre-wrap;overflow-wrap:anywhere}.privacy-panel{padding:1.5rem;border:1px solid var(--line);border-radius:8px;margin-top:3rem;font-size:.8rem}.privacy-panel summary{min-height:44px;cursor:pointer}.privacy-panel .btn{font-size:.75rem;margin:.3rem}.privacy-panel [hidden]{display:none}.ref-item{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1.5rem;margin:1rem 0}.ref-item h3{font-size:1.2rem}.sources-group{overflow-wrap:anywhere}.sources-group li{margin:.8rem 0}.review-panel{margin:1.5rem 0;padding:1.5rem;background:var(--paper-2);border:1px solid var(--line);border-radius:8px}.review-panel h2{font-size:1.4rem}.review-panel li{font-size:.88rem;margin:.5rem 0} :root[data-text=large] .step-card .step-move,:root[data-text=large] .step-card .translit,:root[data-text=large] .step-card .arti,:root[data-text=large] .step-card .meaning{font-size:1.13rem}:root[data-text=large] .arabic{font-size:2.6rem}:root[data-text=large] .arabic-sm{font-size:2.2rem} @media(max-width:1000px){.topbar{justify-content:flex-start}.topnav{margin-left:auto;gap:.7rem}.topnav a{font-size:.66rem}.calm-hero{gap:2.3rem}.calm-hero h1{font-size:3.6rem}.image-note{left:-1rem;bottom:2rem}.learning-invite{gap:2rem;padding:2rem}.path-card{padding:1.3rem}} @media(max-width:760px){.topbar{padding:.65rem 1rem;gap:.2rem .8rem}.wordmark{font-size:1.1rem}.topnav{order:3;width:100%;display:flex;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:1.2rem;margin:0;scrollbar-width:thin}.topnav a{font-size:.65rem;white-space:nowrap;flex-shrink:0;min-height:36px}.topbar>.toggle{margin-left:auto!important;min-height:36px;min-width:36px}.ribbon{font-size:.68rem;text-align:left;padding:.7rem 1rem}.wrap-wide,.wrap{padding-left:1.2rem;padding-right:1.2rem}.calm-hero{grid-template-columns:1fr;padding:2.4rem 0 1.5rem;gap:2rem}.calm-hero h1{font-size:3.4rem;line-height:1.04;margin:1rem 0}.calm-hero .lead{font-size:.93rem;max-width:100%}.calm-hero .kicker{font-size:.62rem}.calm-art{width:100%;max-width:100%;}.calm-art img{aspect-ratio:5/4;border-radius:140px 140px 10px 10px;object-position:60% center}.image-note{left:.7rem;bottom:2rem;padding:.7rem 1rem}.image-note p{font-size:.71rem}.feature-strip{display:grid;grid-template-columns:1fr 1fr;font-size:.7rem;gap:.7rem;padding:1rem 0}.editorial-notice{flex-direction:column;align-items:flex-start;gap:.7rem;font-size:.74rem}.path-section{margin:3rem 0}.section-heading{display:block}.section-heading>p,.section-heading>a{display:block;margin-top:1rem}.section-heading h2{font-size:1.9rem}.path-grid{grid-template-columns:1fr}.path-card{padding:1.4rem}.path-card h3{margin:1rem 0 .5rem}.path-card p{margin-bottom:1rem}.learning-invite{grid-template-columns:1fr;padding:1.5rem;gap:1.4rem;margin-bottom:3rem}.learning-invite h2{font-size:1.8rem}.learning-preview{padding:1rem}.prayer-cards{grid-template-columns:repeat(2,1fr)}.prayers{margin-bottom:3rem}.prayer-mini:last-child{grid-column:1/-1}.gentle-end{padding:2rem 0}.gentle-end h2{font-size:1.7rem}.hero-ctas .btn{font-size:.8rem;padding:.8rem 1.1rem}.hero-footnote{font-size:.66rem}.step-card{padding:1.3rem}.guide-wrap{padding-top:1.5rem}.stepjump{gap:.35rem}.stepjump button{min-width:36px;min-height:36px;font-size:.72rem}.posture-detail{float:none;max-width:none;margin:0 0 1rem}.posture-detail .step-figure{max-width:240px;margin:.5rem auto}.step-title{font-size:1.65rem}.step-chips{flex-wrap:wrap}.arabic{font-size:1.9rem}.arabic-sm{font-size:1.5rem}.study-actions{flex-direction:column;align-items:stretch}.stepbar{gap:.6rem}.stepbar .btn{padding:.75rem .9rem;font-size:.75rem;min-width:0}.source-line{font-size:.72rem}.library-page,.learning-page{padding-top:2rem}.search-block{padding:1rem}.material-card{grid-template-columns:1.5rem 1fr 1rem;padding:1rem;gap:.7rem}.material-card h3{font-size:.9rem}.material-card p{font-size:.77rem}.learning-summary{display:block;padding:1.5rem}.learning-summary .btn{margin-top:1.2rem}.plan-grid{grid-template-columns:1fr}.privacy-panel{padding:1rem}.privacy-panel .btn{width:100%;margin:.3rem 0}.ref-item{padding:1.2rem}.footer{padding-bottom:env(safe-area-inset-bottom)}:root[data-text=large] .arabic{font-size:2.3rem}:root[data-text=large] .arabic-sm{font-size:1.9rem}} @media(prefers-reduced-motion:reduce){.reveal{animation:none}.path-card,.material-card{transition:none}.path-card:hover{transform:none}} @media print{.calm-hero,.feature-strip,.editorial-notice,.study-actions,.note-detail,.posture-detail,.guide-crumb,.learning-page,.library-page{display:none!important}.arabic{color:#000}.print-doc{display:block}.p-src{overflow-wrap:anywhere}.step-card{border:0;box-shadow:none}} main{padding:0 0 3rem}.calm-hero{padding:2.8rem 0 2rem}.calm-hero h1{font-size:clamp(3rem,5.2vw,4.6rem)}.calm-art{outline:none}.calm-art img{aspect-ratio:1.08}.reveal>*{animation:none}.toggle{transition:background-color .15s,color .15s,border-color .15s}.progress-fill{transition:none}.step-figure{outline:none;overflow:visible;border:0;background:none;border-radius:8px} :root[data-theme=night] .btn-primary{background:var(--ink);color:var(--paper)}:root[data-theme=night] .btn-primary:hover{background:var(--teal)}:root[data-theme=night] .toggle[aria-pressed=true]{color:var(--paper)}:root[data-theme=night] .chip-rukun,:root[data-theme=night] .chip-wajib{color:var(--paper)} @media(max-width:760px){.calm-hero{padding:2rem 0 1.5rem}.calm-hero h1{font-size:3.35rem}.calm-art img{aspect-ratio:5/4}} .mobile-menu{display:none} @media(max-width:760px){.topbar{gap:.6rem;flex-wrap:wrap}.mobile-menu{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto}.topbar>.toggle:not(.mobile-menu){margin-left:0!important;order:2}.topnav{display:none;order:3;overflow:visible;flex-wrap:wrap;justify-content:flex-start;gap:.2rem 1rem;padding-top:.4rem}.topnav.is-open{display:flex}.topnav a{min-height:40px}.wordmark{margin-right:auto}} a{color:var(--teal)}a:visited{color:var(--teal)}.btn-primary:visited{color:var(--paper)}.path-card:visited,.material-card:visited,.plan-card:visited,.wordmark:visited{color:var(--ink)}.stepjump{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));overflow:visible;padding:0;margin-bottom:1rem}.stepjump button{width:100%;min-width:0}.veil:not(.is-hidden) .veil-content{opacity:1}.step-card a{overflow-wrap:anywhere} @media(max-width:760px){.stepjump{grid-template-columns:repeat(8,minmax(0,1fr))}} .analytics-choice{position:fixed;z-index:40;bottom:1rem;left:1rem;right:1rem;max-width:900px;margin:auto;padding:1rem 1.25rem;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 40px #12201b22;font-size:.86rem}.analytics-choice[hidden]{display:none}.analytics-choice p{margin:.4rem 0}.consent-actions,.share-links{display:flex;gap:.65rem;flex-wrap:wrap}.consent-actions .btn{padding:.55rem .9rem}.share-links{margin-top:1rem}@media(max-width:640px){.analytics-choice{position:static;margin:1rem;max-width:none}}@media print{.analytics-choice,.share-links{display:none!important}}