@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Noto+Sans+Arabic:wght@400;500;600&display=swap');
:root{--cream:#faf7f0;--paper:#fffdf7;--green:#254b3b;--gold:#a58a54;--line:#dfd5cd;--muted:#657363;--pink:#f3e2e7;--pale-green:#f1f5d9}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--green);font-family:'Noto Sans Arabic',Tahoma,Arial,sans-serif;line-height:1.9}body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(30deg,transparent 48%,#dbd4bf 49%,#dbd4bf 50%,transparent 51%),linear-gradient(150deg,transparent 48%,#dbd4bf 49%,#dbd4bf 50%,transparent 51%);background-size:100px 170px;mask-image:linear-gradient(#000,transparent 75%)}main{position:relative;max-width:1020px;margin:auto;padding:28px 32px 60px}header{text-align:center}h1{font-family:Amiri,'Geeza Pro',serif;font-size:57px;line-height:1.4;font-weight:700;margin:0}h1 span{color:var(--green)}header p{font-size:14px;margin:3px 0 0;color:#5c6b5d}.compass-nav{position:relative;max-width:740px;height:450px;margin:24px auto 24px;background:var(--pink);border:1px solid #e4cfd6;border-radius:24px}.compass-art{position:absolute;width:390px;height:390px;left:50%;top:50%;transform:translate(-50%,-50%)}.compass-art svg{display:block;width:100%;height:100%;stroke:var(--gold);stroke-width:1}.guides{opacity:.25}.pole{position:absolute;display:flex;align-items:center;justify-content:center;gap:12px;min-height:66px;width:215px;padding:11px 16px;border:1px solid #c7b78f;background:var(--pale-green);color:var(--green);border-radius:50px;font:500 14px 'Noto Sans Arabic',Tahoma,sans-serif;cursor:pointer;box-shadow:0 6px 22px #173e3506;transition:background .16s,color .16s,box-shadow .16s;z-index:1}.pole svg{width:30px;height:30px;flex-shrink:0;stroke:var(--gold);stroke-width:1.4;fill:none}.pole:hover{background:#e7edc8;box-shadow:0 4px 20px #173e3510}.pole[aria-pressed=true]{background:var(--green);color:var(--paper);border-color:var(--green)}.pole[aria-pressed=true] svg{stroke:#dbc28f}.pole:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.north{top:20px;left:50%;transform:translateX(-50%)}.south{bottom:20px;left:50%;transform:translateX(-50%);width:250px}.west{left:20px;top:50%;transform:translateY(-50%)}.east{right:20px;top:50%;transform:translateY(-50%);width:235px}.details{max-width:850px;margin:auto;border:1px solid var(--line);border-radius:18px;background:#f7e9ed;min-height:160px;overflow:hidden;box-shadow:0 8px 35px #173e3504;scroll-margin-top:24px}.empty-state{min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;text-align:center}.empty-state span{font-size:32px;color:var(--gold);line-height:1.3}.empty-state p{font-size:14px;color:var(--muted);margin:10px 0 0}.details-head{padding:23px 30px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:15px}.details-head h2{font:700 29px Amiri,serif;margin:0}.details-head p{font-size:11px;color:var(--muted);margin:0}.laws{padding:0 30px}.law{border-bottom:1px solid var(--line)}.law:last-child{border-bottom:0}summary{list-style:none;cursor:pointer;display:flex;gap:17px;align-items:center;padding:17px 0;font-size:15px}summary::-webkit-details-marker{display:none}.law-number{color:var(--gold);font-size:12px;width:24px}.law-name{flex:1}.toggle{font-size:21px;color:var(--gold);font-weight:400}.law[open] .toggle{font-size:0}.law[open] .toggle:after{content:'−';font-size:21px}.law-body{padding:0 41px 22px}.comparison{display:grid;grid-template-columns:1fr 1.5fr;gap:30px}.law-body h3{font-size:11px;color:var(--gold);font-weight:600;margin:0 0 7px}.law-body p{font-size:13px;margin:0;line-height:2.1}.comparison>div+div{border-right:1px solid var(--line);padding-right:25px}blockquote{margin:18px 0;padding:13px 18px;border-right:2px solid var(--gold);background:var(--pale-green)}blockquote p{font-family:Amiri,serif;font-size:21px!important}blockquote a{color:var(--muted);font-size:10px;text-decoration:none}blockquote a:hover{text-decoration:underline}.content-note{margin:0;padding:13px 30px 17px;font-size:10px;color:var(--muted);border-top:1px solid var(--line)}.content-note a{color:inherit}noscript{text-align:center;font-size:13px}

main,.details,.law-body,.comparison>div{min-width:0}.law-body p,.content-note,blockquote a{overflow-wrap:anywhere}.pole span{min-width:0}summary{min-height:56px}.law-number,.toggle{flex-shrink:0}.details-head{background:#f5e5ea}.laws{background:#fffaf7}.content-note{background:#f7e9ed}
@media(max-width:700px){
 main{padding:22px 16px 35px}h1{font-size:clamp(40px,10vw,48px)}header p{font-size:12px;max-width:100%;text-wrap:balance}
 .compass-nav{height:360px;max-width:470px;margin:23px auto;border-radius:20px}
 .compass-art{width:min(76%,300px);height:auto;aspect-ratio:1}
 .pole{min-height:60px;font-size:12px;padding:10px;gap:6px}
 .pole svg{width:25px;height:25px}
 .north{top:16px;width:min(60%,190px)}.south{bottom:16px;width:min(76%,230px)}
 .west,.east{width:32%;max-width:150px;min-height:92px;flex-direction:column;line-height:1.7;text-wrap:balance}
 .west{left:12px}.east{right:12px}
 .details-head{padding:20px 20px 15px;flex-wrap:wrap;gap:3px 15px}.details-head h2{font-size:25px}.details-head p{font-size:11px}
 .laws{padding:0 20px}.law-body{padding:0 0 20px}.comparison{grid-template-columns:minmax(0,1fr);gap:16px}.comparison>div+div{border:0;padding:0}
 .empty-state{padding:22px 18px}.empty-state p{font-size:13px}.content-note{padding:13px 20px}blockquote{padding:12px 14px}summary{gap:12px}
}
@media(max-width:360px){
 main{padding:20px 12px 30px}.compass-nav{height:340px}.west{left:8px}.east{right:8px}.west,.east{width:33%;font-size:11px;padding:10px 7px}.pole svg{width:23px;height:23px}
 .details-head,.laws{padding-right:16px;padding-left:16px}.details-head h2{font-size:24px}.law-body p{font-size:13px}blockquote p{font-size:19px!important}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}