*{box-sizing:border-box}body{margin:0;background:#f6f3eb;color:#253c3c;font:16px/1.55 'Segoe UI',Arial,sans-serif}button,.button,select{font:inherit;border:1px solid #ccd7cf;border-radius:12px;padding:9px 13px;background:white;color:#253c3c;cursor:pointer}button:hover,.button:hover{background:#eaf4e9}button:focus-visible,a:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #db9a27;outline-offset:2px}button[aria-pressed=true]{background:#205e53;color:white;border-color:#205e53}button:disabled{opacity:.4;cursor:default}header{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 32px;background:#fffdf7;border-bottom:1px solid #dedfd2}h1{font-size:30px;margin:3px 0}h1 span,.work h3 span{color:#d69b31}.eyebrow{font-size:11px;font-weight:750;letter-spacing:1.8px;color:#5b7668}.actions{display:flex;gap:8px;flex-wrap:wrap}.layout{display:grid;grid-template-columns:250px minmax(0,1fr)}aside{padding:24px 16px;background:#eaf0e5}aside h2{margin:0;font-size:20px}aside p{font-size:13px;color:#617164}nav button{display:block;text-align:left;width:100%;margin:5px 0;border:0;background:transparent;font-size:14px}nav button small{display:block;font-size:15px;margin-top:3px}nav .unit{font-size:11px;letter-spacing:1px;font-weight:bold;margin:22px 10px 8px;color:#6b7765}main{min-width:0;padding:24px 28px;max-width:1600px}.toolbar,.pager,.views{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.toolbar{justify-content:space-between}select{max-width:150px}.heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px}.heading h2{font-size:26px;margin:3px 0}.heading #status{font-size:12px;color:#56735e}.intro{color:#63736b;margin:4px 0 20px}.spread{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:20px;align-items:start}.original,.english,.work{background:#fffefb;border:1px solid #dedfd2;border-radius:18px;overflow:hidden;box-shadow:0 5px 18px #36524306}.panel-head{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:14px 16px}.panel-head h3{font-size:14px;margin:0}.panel-head h3 span{display:block;color:#768377;font-weight:400}.drawing-tools{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 12px;align-items:center;font-size:12px}.drawing-tools button{font-size:12px;padding:7px 9px}.drawing-tools label{display:flex;gap:6px;align-items:center}input[type=color]{width:32px;height:30px;padding:2px;border:1px solid #ccc;border-radius:6px}.sheet{position:relative;background:white}.sheet img{display:block;width:100%;height:auto}.sheet canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.sheet canvas.active{pointer-events:auto;touch-action:none;cursor:crosshair}.english{padding:25px}.english h3{font-size:23px;line-height:1.3}.english p{white-space:pre-line}.translation-note{font-size:12px;color:#778178;border-top:1px solid #e3e6dd;padding-top:18px;margin-top:28px}.work{padding:22px;margin-top:22px}.work h3{margin:0;font-size:22px}.work p{font-size:13px;color:#65776b}textarea{width:100%;min-height:170px;padding:17px;border:1px solid #cbd8ca;border-radius:10px;font:19px/1.8 'Segoe UI',Arial,sans-serif;resize:vertical;background:repeating-linear-gradient(#fffefb,#fffefb 33px,#e6ebdf 34px)}.save-note{font-size:12px!important}footer{font-size:11px;color:#7d897c;margin:24px 0}.spread[data-view=original]{grid-template-columns:minmax(0,850px)}.spread[data-view=original] .english,.spread[data-view=english] .original{display:none}.spread[data-view=english]{grid-template-columns:minmax(0,850px)}dialog{max-width:95vw;max-height:95vh;border:0;border-radius:16px;padding:16px}dialog::backdrop{background:#142e2bc9}dialog button{display:block;position:sticky;top:0}dialog img{display:block;max-width:100%;margin:auto}body.printing .toolbar{display:none}@media(max-width:1000px){header{padding:18px;align-items:flex-start;flex-direction:column}.layout{grid-template-columns:200px minmax(0,1fr)}main{padding:18px}.spread{grid-template-columns:1fr}.heading{align-items:flex-start;flex-direction:column}}@media(max-width:600px){h1{font-size:25px}.layout{display:block}aside{padding:16px}aside p{margin:4px 0}nav{display:flex;gap:6px;overflow:auto;padding-bottom:8px}nav button{min-width:160px;width:160px;flex-shrink:0;background:#fff8}nav .unit{display:none}main{padding:14px}.views button{font-size:13px;padding:9px}.heading h2{font-size:24px}.english{padding:20px}.actions button,.actions .button{font-size:13px}.toolbar{gap:12px}}
@media print{@page{size:A4;margin:10mm}body{background:white;font-size:11pt}header,aside,.toolbar,.intro,.drawing-tools,.panel-head,.translation-note,.save-note,footer,#status,dialog{display:none!important}.layout{display:block}main{max-width:none;padding:0}.heading{margin:0 0 8mm}.heading:before{content:'Salman · Islamic Education';font-weight:bold}.heading h2{font-size:16pt}.heading .eyebrow{font-size:9pt}.spread,.spread[data-view=original]{display:block}.original,.english,.work{box-shadow:none;border:0;border-radius:0}.original{break-inside:avoid}.sheet{max-width:150mm;margin:auto}.english{padding:8mm 0;break-before:page}.spread[data-view=original] .english{display:none}.work{padding:6mm 0;break-inside:avoid}.work h3{font-size:13pt}.work p{display:none}textarea{display:none}.print-answer{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12pt;line-height:1.7}.work:has(.print-answer:empty){display:none}}
.audio-bar{background:#e6efe4;border:1px solid #cbdac6;padding:16px 18px;border-radius:16px;margin:0 0 22px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}.audio-bar p{font-size:12px;margin:3px 0;color:#506658}.audio-buttons{display:flex;flex-wrap:wrap;gap:7px}.audio-bar audio{width:100%}.audio-bar audio[hidden]{display:none}.audio-bar details{width:100%;font-size:12px}.audio-bar details p{font-size:18px;line-height:1.9}.audio-bar #audio-status:empty{display:none}.audio-bar #audio-status{width:100%}@media print{.audio-bar{display:none!important}}