:root{--bg:#191919;--bg-panel:#242424;--bg-elevated:#2a2a2a;--ink:#faf2d6;--muted:#bdae93;--line:#3d3d3d;--line-gold:#f8c537;--word:#c95e27;--root:#f8cd37;--surah:#ffbf00;--accent:#f8cd37;--accent-soft:#e8d49a;--danger:#c45c5c;--font:"Source Serif 4", "Iowan Old Style", Palatino, Georgia, serif;--font-ui:"DM Sans", "Avenir Next", system-ui, sans-serif;--font-ar:"Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-ui);background:radial-gradient(ellipse at top, #2a2a2a 0%, var(--bg) 55%);color:var(--ink);-webkit-font-smoothing:antialiased}a{color:var(--accent)}button,input{font:inherit}.app{grid-template-rows:auto 1fr auto;height:100%;min-height:100dvh;display:grid}.header{border-bottom:1px solid color-mix(in srgb, var(--line-gold) 55%, var(--line));background:color-mix(in srgb, var(--bg-panel) 94%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex}.brand{font-family:var(--font);letter-spacing:.01em;color:var(--accent);font-size:1.15rem;font-weight:600}.brand span{color:var(--muted);margin-left:.5rem;font-size:.85rem;font-weight:400}.header-actions{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.header-actions a,.header-actions button{border:1px solid color-mix(in srgb, var(--line-gold) 40%, var(--line));background:var(--bg-elevated);color:var(--ink);cursor:pointer;border-radius:8px;padding:.4rem .7rem;font-size:.85rem;text-decoration:none}.header-actions a:hover,.header-actions button:hover{border-color:var(--accent);color:var(--accent)}.header-actions button.active{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 16%, var(--bg-elevated));color:var(--accent)}.header-actions button.back-btn:disabled{opacity:.35;cursor:default;border-color:var(--line);color:var(--muted)}.header-actions button.back-btn:disabled:hover{border-color:var(--line);color:var(--muted)}.note-meta{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.45rem;display:flex}.tr-toggle{gap:.2rem;display:inline-flex}.tr-toggle button{border:1px solid color-mix(in srgb, var(--line-gold) 35%, var(--line));background:var(--bg-elevated);color:var(--muted);cursor:pointer;border-radius:6px;padding:.2rem .45rem;font-size:.7rem}.tr-toggle button.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, var(--bg-elevated))}button.linkish.inline{font-size:inherit;padding:0;display:inline}.verse-more{margin:.85rem 0 1.2rem;display:block}.main{min-height:0;display:grid}.main--side{grid-template-columns:minmax(0, 1fr) auto var(--note-width,340px);grid-template-rows:minmax(0,1fr)}.main--stacked{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0, 1fr) auto var(--note-height,40%)}.graph-host{background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%), var(--bg);min-width:0;min-height:0;position:relative}.main--side .graph-host{border-right:0}.main--stacked .graph-host{border-bottom:0;border-right:0}.resize-handle{z-index:4;background:color-mix(in srgb, var(--bg-panel) 88%, var(--bg));touch-action:none;-webkit-user-select:none;user-select:none;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.resize-handle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.resize-handle--vertical{cursor:col-resize;border-left:1px solid color-mix(in srgb, var(--line-gold) 35%, var(--line));border-right:1px solid color-mix(in srgb, var(--line-gold) 35%, var(--line));width:26px}.resize-handle--horizontal{cursor:row-resize;border-top:1px solid color-mix(in srgb, var(--line-gold) 35%, var(--line));border-bottom:1px solid color-mix(in srgb, var(--line-gold) 35%, var(--line));height:28px}.resize-handle__grip{background:color-mix(in srgb, var(--line-gold) 70%, var(--muted));opacity:.85;pointer-events:none;border-radius:999px;display:block}.resize-handle--vertical .resize-handle__grip{width:3px;height:2rem}.resize-handle--horizontal .resize-handle__grip{width:2.25rem;height:3px}.resize-handle:hover .resize-handle__grip,.resize-handle:active .resize-handle__grip{background:var(--accent);opacity:1}.graph-pane{min-height:0;position:absolute;inset:0}.graph-pane canvas{touch-action:none}.search-wrap{z-index:3;max-width:420px;position:absolute;top:.75rem;left:.75rem;right:.75rem}.search-wrap input{border:1px solid color-mix(in srgb, var(--line-gold) 45%, var(--line));background:color-mix(in srgb, var(--bg-panel) 94%, transparent);width:100%;color:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);border-radius:10px;outline:none;padding:.7rem .85rem}.search-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent)}.search-wrap input::placeholder{color:var(--muted)}.results{border:1px solid var(--line);background:var(--bg-panel);border-radius:10px;max-height:240px;margin:.35rem 0 0;padding:0;list-style:none;overflow:auto}.results li button{text-align:left;width:100%;color:var(--ink);cursor:pointer;background:0 0;border:0;align-items:baseline;gap:.5rem;padding:.55rem .75rem;display:flex}.results li button:hover,.results li button:focus{background:var(--bg-elevated)}.badge{text-transform:uppercase;letter-spacing:.04em;color:#111;border-radius:4px;flex-shrink:0;padding:.1rem .35rem;font-size:.7rem}.badge.word{background:var(--word);color:#1a1a1a}.badge.root{background:var(--root);color:#1a1a1a}.badge.surah{background:var(--surah);color:#1a1a1a}.legend{color:var(--muted);z-index:2;pointer-events:none;flex-wrap:wrap;gap:.75rem;font-size:.75rem;display:flex;position:absolute;bottom:.75rem;left:.75rem}.legend i{vertical-align:middle;border-radius:50%;width:.6rem;height:.6rem;margin-right:.3rem;display:inline-block}.note-pane{background:var(--bg-panel);min-height:0;padding:.85rem 1rem 2rem;overflow:auto}.note-pane.empty{color:var(--muted);text-align:center;place-items:center;padding:1.5rem;display:grid}.note-pane.empty h2{font-family:var(--font);color:var(--accent);margin:0 0 .5rem;font-weight:600}.note-sticky{z-index:1;background:linear-gradient(to bottom, var(--bg-panel) 70%, transparent);margin-bottom:.25rem;padding:.75rem 0 .5rem;position:sticky;top:0}.note-pane h1{font-family:var(--font);color:var(--ink);margin:0;font-size:1.35rem;font-weight:600;line-height:1.3}.note-lemma{font-family:var(--font-ar);color:var(--accent-soft);margin:.35rem 0 0;font-size:1.45rem}.note-summary{border:1px solid color-mix(in srgb, var(--line-gold) 35%, var(--line));background:var(--bg-elevated);border-radius:10px;margin:.75rem 0 1.25rem;padding:.85rem .9rem}.note-summary p{margin:.35rem 0;line-height:1.45}.note-stats{color:var(--muted);gap:1rem;margin:0;padding:.5rem 0 .25rem;list-style:none;display:flex}.note-stats strong{color:var(--accent);font-size:1.1rem}.note-surahs ul{max-height:8rem;margin:.35rem 0 0;padding-left:1rem;overflow:auto}button.linkish{color:var(--accent);cursor:pointer;font:inherit;text-align:left;text-underline-offset:2px;background:0 0;border:0;padding:0;text-decoration:underline}.note-verses h2{font-family:var(--font);color:var(--accent);margin:0 0 .35rem;font-size:1.05rem}.note-verses .muted{color:var(--muted);margin:0 0 .85rem;font-size:.82rem}.verse-card{border:1px solid color-mix(in srgb, var(--line-gold) 30%, var(--line));background:color-mix(in srgb, var(--bg) 55%, var(--bg-elevated));border-radius:10px;margin:0 0 1rem;padding:.85rem .9rem}.verse-ref{color:var(--accent-soft);justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.55rem;font-size:.92rem;font-weight:600;display:flex}.verse-ref a{font-size:.8rem;font-weight:500}.verse-card .arabic{font-family:var(--font-ar);text-align:right;background:var(--bg-elevated);border:1px solid var(--line);border-radius:8px;margin:0 0 .65rem;padding:.55rem .65rem;font-size:1.35rem;line-height:1.95}.verse-word{color:var(--muted);margin:0 0 .55rem;font-size:.88rem}.verse-card .tr{margin:.45rem 0 0;font-size:.92rem;line-height:1.5}.tr-label{text-transform:uppercase;letter-spacing:.04em;color:var(--accent);text-align:left;direction:ltr;margin-bottom:.15rem;font-size:.72rem;font-weight:600;display:block}.note-body h2{color:var(--accent);font-size:1.05rem;font-family:var(--font);margin:1.4rem 0 .5rem}.note-body h3{margin:1rem 0 .4rem;font-size:.95rem}.note-body h4{color:var(--ink);margin:1.2rem 0 .4rem;font-size:.9rem}.note-body p,.note-body li{color:color-mix(in srgb, var(--ink) 92%, var(--muted));line-height:1.55}.note-body ul{padding-left:1.1rem}.note-body .arabic{font-family:var(--font-ar);text-align:right;background:var(--bg-elevated);border:1px solid color-mix(in srgb, var(--line-gold) 40%, var(--line));border-radius:10px;margin:.5rem 0 .75rem;padding:.75rem .9rem;font-size:1.45rem;line-height:2}.note-body code{background:var(--bg-elevated);border-radius:4px;padding:.05rem .3rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em}.footer{border-top:1px solid color-mix(in srgb, var(--line-gold) 45%, var(--line));color:var(--muted);background:var(--bg-panel);padding:.55rem 1rem;font-size:.72rem;line-height:1.4}.footer a{color:var(--accent)}.hint{color:var(--muted);text-align:center;pointer-events:none;z-index:1;max-width:16rem;font-size:.9rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading{height:100%;color:var(--muted);place-items:center;display:grid}