:root{font-family:Tahoma,"Noto Naskh Arabic","Noto Sans Arabic",sans-serif;color:#1b3433;background:#f8f6f0;--green:#183c39;--gold:#b58b49;--border:#dedfd6;--muted:#6d7974;--paper:#fffefa}
*{box-sizing:border-box}body{margin:0;min-height:100vh;-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.hidden{display:none!important}.shell{max-width:700px;margin:auto;min-height:100vh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom)}main{flex:1;padding-bottom:32px}.topbar{display:flex;gap:10px;align-items:center;padding:22px 0 18px;border-bottom:1px solid var(--border)}.brand-mark{display:grid;place-items:center;background:var(--green);color:#e5c99a;width:40px;height:40px;border-radius:12px;font-size:23px}.brand{display:flex;flex:1;flex-direction:column;gap:2px}.brand b{font-size:19px}.brand span{font-size:11px;color:var(--muted)}.icon-btn{width:37px;height:37px;border:1px solid var(--border);border-radius:12px;background:white;color:var(--green);font-weight:bold}.intro{margin:28px 0 20px}.intro h1,h1{font-size:26px;line-height:1.55;margin:8px 0 10px;font-weight:700;letter-spacing:-.4px}.intro p,p{line-height:1.95}.intro p{color:var(--muted);font-size:14px;max-width:550px;margin:0}.overline,.card-kicker{color:#906c34;font-size:12px;font-weight:700;letter-spacing:.15px}.search-wrap{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:15px;padding:0 14px;margin-bottom:17px}.search-wrap span{font-size:24px;color:#89928d}.search-wrap input{padding:14px 0;outline:none;border:0;background:transparent;width:100%;color:var(--green);font-size:15px}.topics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.topic-btn{min-height:79px;text-align:right;padding:13px;background:var(--paper);border:1px solid var(--border);border-radius:14px;display:flex;align-items:center;gap:12px;color:var(--green);font-size:14px;font-weight:700}.topic-btn:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #e2ae5a;outline-offset:2px}.topic-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:24px;min-width:27px;text-align:center}.topic-btn:hover{border-color:var(--gold)}.muted{color:var(--muted);font-size:13px}.center{text-align:center}.tiny{font-size:11px}.text-back{border:0;background:transparent;color:#527369;margin:20px -4px 12px;padding:8px 4px;font-weight:bold;font-size:13px}.card{background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:19px;margin:0 0 14px;box-shadow:0 2px 4px #25372904}.card h2{font-size:19px;margin:8px 0 12px;line-height:1.6}.card p{font-size:13px;color:var(--muted);margin:0 0 14px}.topic-head h2{font-size:26px;margin-top:3px}.code-row{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #ededeb;padding:13px 0;font-size:13px}.code-row:last-child{padding-bottom:0}.code-row span{color:var(--muted)}.code-row strong{color:var(--green);font-size:16px}.prep-card{padding:0}.prep-card summary,.trace-card summary{list-style:none;cursor:pointer;padding:19px;font-weight:bold;display:flex;justify-content:space-between;align-items:center}.prep-card summary::-webkit-details-marker,.trace-card summary::-webkit-details-marker{display:none}.chev{color:var(--muted)}.prep-body,.trace-content{padding:0 19px 18px;border-top:1px solid #eee}.prep-body{font-size:13px;line-height:2}.prep-body p{margin-top:12px}.prep-body ol{padding-right:20px;margin:0}.prep-body li{padding:5px 0}.verse{font-family:"Noto Naskh Arabic",serif;line-height:2.2}.draw-card{padding-top:22px}.primary-btn,.action-btn,.secondary-btn,.outline-btn{display:block;width:100%;border-radius:13px;padding:14px 12px;font-size:15px;font-weight:bold}.primary-btn,.action-btn{background:var(--green);color:white;border:1px solid var(--green)}.primary-btn{margin-top:17px}.action-btn{margin-top:18px}.secondary-btn{border:1px solid var(--border);background:#f4f0e6;color:var(--green);margin-top:15px}.outline-btn{border:1px solid #74948a;background:white;color:var(--green)}.rule{text-align:center;position:relative;margin:19px 0;color:var(--muted);font-size:12px}.rule:before{content:"";display:block;position:absolute;left:0;right:0;top:50%;height:1px;background:var(--border)}.rule span{position:relative;background:var(--paper);padding:0 12px}.number-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;direction:ltr}.num-btn{aspect-ratio:1;border:1px solid var(--border);background:white;border-radius:11px;font-family:Tahoma,sans-serif;font-size:16px;color:var(--green)}.num-btn.active{background:var(--green);border-color:var(--green);color:white;box-shadow:0 0 0 2px #c1d2cb}.draw-card .tiny{line-height:1.7;margin-top:12px}.result-card{border:1px solid #b6c8bd;background:linear-gradient(170deg,#edf3ec,#fffdf7);border-radius:20px;padding:27px 22px;margin-bottom:15px;box-shadow:0 7px 18px #173f2a0c}.result-heading{display:flex;align-items:center;gap:9px;font-size:13px;color:#547168;margin:18px 0}.dot{font-weight:bold;color:var(--gold)}#resultText{font-family:"Noto Naskh Arabic","Traditional Arabic",serif;text-align:center;color:#173e37;font-size:27px;line-height:2.1;margin:30px 0;padding:0 2px;font-weight:700}.result-footer{border-top:1px solid #cddcd1;padding-top:13px;text-align:center;font-size:12px;color:var(--muted)}.trace-card{padding:0}.trace-content{padding-top:15px}.trace-line{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:8px 0;border-bottom:1px solid #eee}.trace-line span{color:var(--muted)}.bird-path{display:flex;direction:rtl;flex-wrap:wrap;gap:6px;margin-top:15px}.bird-step{background:#edf0ea;border-radius:8px;padding:8px 10px;font-size:12px}.bird-step:last-child{background:var(--green);color:#fff}.photo-card h2{margin-top:0}.about-card p{margin-top:7px}.about-card h2{font-size:18px;margin-top:20px}footer{text-align:center;padding:22px 0;border-top:1px solid var(--border);font-size:10px;color:#89958b;line-height:1.8}.overlay{position:fixed;inset:0;z-index:50;background:#252a28;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.photo-toolbar{color:white;display:flex;align-items:center;gap:9px;padding:13px 12px;min-height:66px;background:#202725}.photo-toolbar button{background:#3a4844;color:white;border:1px solid #607069;padding:8px 10px;border-radius:8px;font-size:12px}.photo-toolbar .photo-x{font-size:18px}.photo-toolbar span{flex:1;text-align:center;font-size:13px}.photo-nav{display:flex;gap:5px}.image-viewport{overflow:auto;flex:1;text-align:center;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}.image-viewport img{width:100%;max-width:980px;height:auto;display:block;margin:auto}.image-viewport img:active{cursor:zoom-in}@media(min-width:600px){.topics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.number-grid{gap:10px}.topbar{padding-top:30px}.intro{margin-top:40px}}@media(max-width:360px){.topics-grid{gap:7px}.topic-btn{font-size:12px;gap:7px;padding:8px}.topic-emoji{font-size:21px}.num-btn{font-size:13px;border-radius:8px}.number-grid{gap:3px}}@media(prefers-reduced-motion:no-preference){button{transition:background .14s ease,border-color .14s ease,transform .14s ease}button:active{transform:scale(.98)}}