:root{
  --paper:#EFEBE6;--paper2:#E6E1DA;--card:#F7F5F2;--line:#D8D1C8;--line2:#C9C0B5;
  --ink:#2F2A27;--ink2:#5E5650;--mute:#8E857C;--taupe:#7D7168;--taupe2:#6A5F57;--bronze:#9B8571;--moon:#BDB6AC;--moon2:#D9D4CC;
  --ok:#5F7A5B;--warn:#B07A3F;--bad:#A4574F;--r:22px;--r2:14px;
  --f:'Readex Pro','IBM Plex Sans Arabic',system-ui,sans-serif;--fl:'Jost','Readex Pro',sans-serif;
  --sh:0 1px 0 rgba(255,255,255,.7) inset,0 10px 30px -18px rgba(60,48,40,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--f);background:var(--paper);color:var(--ink);font-weight:300;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.lat{font-family:var(--fl);letter-spacing:.02em}
.k{letter-spacing:0}
.logo{width:46px;height:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-weight:400;font-size:15.5px;transition:transform .2s,background .2s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.dark{background:var(--ink);color:var(--paper)}
.btn.dark:hover{background:#000}
.btn.taupe{background:var(--taupe);color:#fff}
.btn.line{border:1px solid var(--line2);background:transparent}
.btn.line:hover{background:var(--card)}
.btn.sm{height:40px;padding:0 18px;font-size:14px}
.btn:disabled{opacity:.45;pointer-events:none}
.btn svg{width:18px;height:18px}
.tt{font-weight:200;letter-spacing:-.01em}
.eyebrow{font-size:13px;color:var(--mute);font-weight:400;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--line2)}
.field{display:grid;gap:6px}
.field>span{font-size:13px;color:var(--ink2);font-weight:400}
.in{width:100%;height:52px;border-radius:14px;border:1px solid var(--line);background:var(--card);padding:0 16px;outline:none;transition:border .2s,box-shadow .2s}
textarea.in{height:auto;min-height:88px;padding:12px 16px;resize:vertical}
.in:focus{border-color:var(--taupe);box-shadow:0 0 0 4px rgba(125,113,104,.12)}
.toast{position:fixed;inset-inline:0;bottom:24px;margin:auto;width:max-content;max-width:calc(100% - 32px);background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:999px;font-size:14px;transform:translateY(140%);opacity:0;transition:.35s;z-index:200;text-align:center}
.toast.show{transform:none;opacity:1}
.moon{position:relative;border-radius:50%;background:radial-gradient(circle at 34% 30%,#F3F1EE 0,#DAD5CE 30%,#B9B1A7 62%,#8E857B 100%);box-shadow:inset -18px -22px 50px rgba(60,50,42,.32),inset 10px 10px 30px rgba(255,255,255,.5)}
.moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .26 0 0 0 1.4 -.55'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E") center/cover;mix-blend-mode:multiply;opacity:.55}
.demo-bar{background:var(--ink);color:#E9E4DE;font-size:12.5px;text-align:center;padding:7px 16px;font-weight:300}
.demo-bar a{text-decoration:underline;text-underline-offset:3px}
.sheet-bg{position:fixed;inset:0;background:rgba(40,33,29,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:120;opacity:0;pointer-events:none;transition:.3s}
.sheet-bg.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:130;inset-inline:0;bottom:0;margin:auto;width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--paper);border-radius:26px 26px 0 0;padding:10px 20px calc(24px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .38s cubic-bezier(.2,.8,.2,1);overscroll-behavior:contain}
.sheet.on{transform:none}
.sheet .grab{width:42px;height:4px;border-radius:9px;background:var(--line2);margin:4px auto 14px}
.sheet h3{font-weight:300;font-size:22px;margin-bottom:4px}
@media(min-width:760px){.sheet{bottom:auto;top:50%;border-radius:26px;transform:translateY(-40%) scale(.97);opacity:0;pointer-events:none;transition:.3s}.sheet.on{transform:translateY(-50%);opacity:1;pointer-events:auto}.sheet .grab{display:none}}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:14px;font-weight:400;color:var(--ink2);transition:.2s}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.days{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px}
.days::-webkit-scrollbar{display:none}
.day{flex:none;width:64px;padding:10px 0;border-radius:16px;border:1px solid var(--line);background:var(--card);display:grid;justify-items:center;gap:2px;transition:.2s}
.day small{font-size:11.5px;color:var(--mute)}
.day b{font-size:20px;font-weight:300;line-height:1.2}
.day i{font-style:normal;font-size:10.5px;color:var(--mute)}
.day.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.day.on small,.day.on i{color:#CFC8BF}
.day.off{opacity:.38;pointer-events:none}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.slot{height:48px;border-radius:14px;border:1px solid var(--line);background:var(--card);font-family:var(--fl);font-size:16px;display:grid;place-items:center;line-height:1.1;transition:.2s}
.slot small{font-family:var(--f);font-size:10px;color:var(--mute)}
.slot.on{background:var(--taupe);border-color:var(--taupe);color:#fff}
.slot.on small{color:#EEE}
.empty{padding:22px;text-align:center;color:var(--mute);font-size:14px;border:1px dashed var(--line2);border-radius:16px}
.spin{width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--taupe);animation:sp .8s linear infinite;margin:20px auto}
@keyframes sp{to{transform:rotate(360deg)}}
.bk-step{display:grid;gap:12px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.bk-step:last-child{border:0;margin:0;padding:0}
.bk-step h4{font-weight:400;font-size:15px;display:flex;align-items:center;gap:10px}
.bk-step h4 i{font-style:normal;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:12px;font-family:var(--fl)}
.bk-sum{background:var(--paper2);border-radius:16px;padding:14px 16px;font-size:14px;display:grid;gap:2px}
.bk-sum b{font-weight:400}
.bk-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bk-form .full{grid-column:1/-1}
@media(max-width:520px){.bk-form{grid-template-columns:1fr}}
.done-card{text-align:center;padding:20px 6px;display:grid;gap:10px;justify-items:center}
.done-card .moon{width:86px;height:86px}
.done-card h3{font-weight:300;font-size:26px}
.done-card .code{font-family:var(--fl);font-size:28px;letter-spacing:.2em;background:var(--paper2);padding:6px 18px;border-radius:12px}
.done-card p{color:var(--ink2);font-size:14.5px;max-width:360px}

.chart{width:100%;height:auto}
.legend{display:flex;gap:14px;font-size:12px;color:var(--ink2);margin-top:6px;flex-wrap:wrap}
.legend span::before{content:"";display:inline-block;width:10px;height:3px;border-radius:2px;margin-inline-end:6px;vertical-align:middle;background:var(--c)}