@font-face{font-family:'Noto Sans Arabic';src:url('assets/fonts/arabic.ttf') format('truetype');font-weight:100 900;font-display:block}
@font-face{font-family:'Nunito Sans';src:url('assets/fonts/latin.ttf') format('truetype');font-weight:200 1000;font-display:block}
:root{color-scheme:light;--presentation-ink:#12344a;--presentation-ground:#075365;--presentation-accent:#ffd15b;--paper:#fff9ed;--muted:#5a7781;--line:#c9dad7;--active:#cceef1}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--presentation-ground);color:var(--presentation-ink);font-family:'Noto Sans Arabic','Nunito Sans',sans-serif}
[hidden]{display:none!important}
#presentation{width:100%;height:100%;display:flex;flex-direction:column;position:relative;background:radial-gradient(at 18% 5%,#16879044,transparent 60%),var(--presentation-ground)}
#presenter-header{height:76px;display:flex;align-items:center;gap:22px;padding:10px 22px;color:#fff;direction:ltr;flex:none}
#brand{width:85px;height:58px;object-fit:contain}
#lesson-title{font-size:18px;font-weight:750;direction:rtl;flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#header-controls .uvs-node-row{gap:6px}
#workspace{display:flex;direction:ltr;flex:1;min-height:0;min-width:0;padding:0 10px;gap:10px}
#slide-area{flex:1;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden}
#viewport{position:relative;flex:none;overflow:hidden;isolation:isolate;border-radius:14px;box-shadow:0 20px 50px #001e2940;touch-action:none;user-select:none}
#scene-plane{position:absolute;left:0;top:0;transform-origin:top left}
#scene-direction{position:absolute;inset:0;transform-origin:center}
#text-annotations{position:absolute;inset:0;z-index:4;pointer-events:none;cursor:text}
#text-annotations>.uvs-node-container,#text-annotations>div{position:absolute;inset:0}
#media-selection{position:absolute;inset:0;z-index:5;pointer-events:none;outline:none}
#media-selection [data-uvs-semantic-kind='scene.media_target'],#media-selection [data-uvs-semantic-kind='scene.media_selection']{pointer-events:none}
#media-selection button{pointer-events:auto;border:0;border-radius:8px;cursor:grab;color:#075365}
#media-selection [data-uvs-node-id='media-object-tools'] button{background:#fff9edf2;padding:.35em .7em;font:inherit;cursor:pointer;border:1px solid #07909a66}
#media-selection [data-uvs-node-id='media-resize']{background:#fff9ed;border:2px solid #078b96;cursor:nwse-resize;padding:0}
#stage [data-uvs-semantic-kind='tour.hotspot']{border:2px solid #078b96;border-radius:50%;background:#fff9ede8;box-shadow:0 0 0 5px #ffcc5555}
.clean #media-selection,.audience #media-selection{display:none}
#viewport[data-tool=pan] #stage{cursor:grab}
#viewport[data-tool=pan]:active #stage{cursor:grabbing}
#stage{position:absolute;left:0;top:0;transform-origin:top left;direction:ltr;cursor:default;isolation:isolate}
#stage .uvs-node-text{font-synthesis:none;text-rendering:optimizeLegibility;pointer-events:none}
#viewport[data-tool=pointer] #stage [data-uvs-semantic-kind="text.reading"]{pointer-events:auto;user-select:text;cursor:text}
#stage .uvs-node-image{max-width:none;max-height:none;pointer-events:none}
#stage button{padding:0;cursor:pointer;transition:box-shadow .15s;background:transparent}
#stage button:hover{box-shadow:0 0 0 5px #00a5b055,0 8px 24px #00293a24}
#stage button:focus-visible{outline:6px solid #1980ce;outline-offset:5px}
#stage button[data-response=selected]{box-shadow:inset 0 0 0 8px #2686d2}
#stage button[data-response=correct]{box-shadow:inset 0 0 0 8px #218452}
#stage button[data-response=incorrect]{box-shadow:inset 0 0 0 8px #c4423e}
#stage button[data-response=correct]::after,#stage button[data-response=incorrect]::after{position:absolute;left:8px;top:4px;font-size:36px;font-weight:900;content:'✓';color:#218452}
#stage button[data-response=incorrect]::after{content:'×';color:#c4423e}
#ink{position:absolute;inset:0;width:100%;height:100%;z-index:3;touch-action:none;pointer-events:none}
#ink[data-mode=pen],#ink[data-mode=highlighter],#ink[data-mode=trail]{cursor:crosshair}
#ink[data-mode=eraser]{cursor:cell}
#speaker-notes{width:310px;flex:none;overflow:auto;direction:rtl;background:linear-gradient(145deg,#f0faf5,var(--paper));border-radius:16px;padding:22px 24px;scrollbar-width:thin}
#speaker-notes h2{font-size:21px;margin:0 0 20px;font-weight:850}
#side-tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid #0c798c22;padding-bottom:10px}
#side-tabs button,#library-footer button{font:inherit;border:0;background:transparent;color:var(--presentation-ink);border-radius:9px;padding:8px 14px;cursor:pointer}
#side-tabs button[aria-pressed=true]{background:#0a849217;color:#077687;font-weight:800}
#library-panel{display:flex;flex-direction:column;min-height:0;height:calc(100% - 58px)}
.library-open #speaker-notes{display:flex;flex-direction:column;overflow:hidden}
.library-open #side-tabs{flex:none}
.library-open #library-panel{height:auto;flex:1}
.library-open #library-list{flex:1}
#library-kinds{display:flex;gap:4px;flex:none;margin-bottom:10px}
#library-kinds:empty{display:none}
#library-kinds button,#sound-controls button{font:inherit;font-size:12px;border:1px solid #138a9124;border-radius:10px;background:#ffffff50;color:var(--presentation-ink);padding:7px 10px;cursor:pointer}
#library-kinds button[aria-pressed=true],#sound-controls button[aria-pressed=true]{background:#168f9130;border-color:#0b858c;color:#07535c}
#sound-controls{flex:none;margin-bottom:10px;display:grid;gap:10px}
#sound-controls .field-label{font-size:12px;display:flex;gap:8px;align-items:center}
#sound-controls input[type=range]{min-width:0;width:100%;accent-color:#098d98;direction:ltr}
#sound-controls [data-uvs-node-id=sound-automatic]{display:flex;flex-wrap:wrap;gap:5px}
#sound-status{font-size:12px;color:var(--muted);margin:0 0 8px}
#library-list.sound-pads button{cursor:pointer;align-items:center;text-align:center;min-height:78px;justify-content:center;background:linear-gradient(140deg,#fffdfa88,#d7f4ed66)}
#library-list.sound-pads button:disabled{opacity:.5;cursor:default}
#library-list [data-uvs-node-id^='sound-symbol:']{font-size:25px;line-height:1;color:#168b99}
#library-list.sound-pads button[data-playing=true]{border-color:#e0a627;box-shadow:inset 0 0 18px #ffdc7045,0 0 12px #14acb52a;animation:sound-pad-pulse .5s ease-in-out infinite alternate}
@keyframes sound-pad-pulse{to{background-color:#bceee380}}
@media(prefers-reduced-motion:reduce){#library-list.sound-pads button[data-playing=true]{animation:none}}
#library-footer [data-uvs-node-id=sound-stop-footer]{background:#fff4df;color:#754520;border:1px solid #dca12e77}
#library-search{flex:none;margin-bottom:12px}
#library-search .field-label{font-size:13px;font-weight:700;gap:6px}
#library-search input{font:inherit;width:100%;padding:10px 12px;border:1px solid #0b81933b;border-radius:12px;background:#ffffff90;color:var(--presentation-ink)}
#library-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:auto;min-height:0;align-content:start;scrollbar-width:thin;padding:3px}
#library-list button{font:inherit;font-size:12px;display:flex;flex-direction:column;gap:4px;min-width:0;border:1px solid #128a9122;border-radius:13px;background:#fffdf55c;color:var(--presentation-ink);padding:8px;cursor:grab;touch-action:pan-y;text-align:start}
#library-list button:hover{background:#fffdf5ca;border-color:#068a9699;box-shadow:0 4px 16px #0a6a6c14}
#library-list img{width:100%;height:90px;object-fit:contain;pointer-events:none}
#library-list [data-uvs-node-id^='library-title:']{font-weight:850;line-height:1.4}
#library-list [data-uvs-node-id^='library-kind:']{font-size:10px;color:var(--muted)}
#library-list [data-uvs-node-id='library-empty']{grid-column:1/-1;font-size:14px;padding:24px 4px}
#library-footer{padding-top:12px;flex:none;font-size:10px;color:var(--muted)}
#library-footer button{display:block;width:100%;background:#0b8494;color:white;margin-bottom:8px;font-size:14px;font-weight:800}
#library-panel button:focus-visible,#side-tabs button:focus-visible,#media-selection button:focus-visible{outline:3px solid #158bd0;outline-offset:3px}
.library-dragging #viewport{outline:3px dashed #ffce57;outline-offset:-5px}
.library-dragging{cursor:grabbing}
#note-content>.uvs-node-column{padding:16px 0;border-top:1px solid var(--line);gap:8px}
#note-content [data-uvs-node-id^=label]{color:#087583;font-size:15px;font-weight:800}
#note-content [data-uvs-node-id^=body]{font-size:17px;line-height:1.9}
#note-source{font-size:12px;color:var(--muted);margin:22px 0}
#cue-status{border-top:1px solid var(--line);padding-top:16px;color:var(--muted);font-size:12px}
#cue-progress{font-family:'Nunito Sans';direction:ltr;display:block;font-size:17px;color:#087583;font-weight:800}
#controls{min-height:64px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px 12px;margin:8px 10px 10px;border-radius:14px;background:var(--paper);direction:ltr;flex:none}
#controls>.uvs-node-row{gap:6px;align-items:center}
#controls button,#header-controls button,#inspector button{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:8px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--presentation-ink);font-size:14px;cursor:pointer}
#header-controls button{color:#f8f8ed;width:38px;height:38px;min-width:38px}
#controls button:hover,#inspector button:hover{background:#d9eeec}
#header-controls button:hover{background:#ffffff1a}
#controls button:focus-visible,#header-controls button:focus-visible,#inspector button:focus-visible{outline:2px solid #2686d2;outline-offset:3px}
#controls button[aria-pressed=true],#inspector button[aria-pressed=true]{background:var(--active);border-color:#78cfd3;color:#076978}
#header-controls button[aria-pressed=true]{background:#ffffff20}
#controls button:disabled{opacity:.28;cursor:default}
#controls [data-uvs-node-id=next]{background:#008b9e;color:white}
#controls [data-uvs-node-id=position]{min-width:74px;text-align:center;font-family:'Nunito Sans';font-size:18px;font-weight:800;direction:ltr}
#controls [data-uvs-node-id=slides]{width:auto!important;min-width:100px;font-size:13px;white-space:nowrap;direction:rtl}
#controls [data-uvs-node-id=zoom-reset]{width:auto;min-width:94px;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
dialog{border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--presentation-ink);padding:18px;box-shadow:0 20px 90px #001e2955}
dialog::backdrop{background:#002b3eaa;backdrop-filter:blur(5px)}
#slide-selector{width:min(900px,94vw);max-height:86vh}
#slide-selector-controls,#lab-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;font-size:22px;font-weight:800}
dialog button{font:inherit;cursor:pointer;background:transparent;border:1px solid var(--line);border-radius:12px;padding:10px;color:inherit}
dialog button:hover{background:var(--active)}
dialog button:focus-visible{outline:3px solid #2686d2;outline-offset:3px}
#slide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px}
#slide-grid button{display:flex;flex-direction:column;gap:10px;text-align:right;font-size:14px;background:#fffef9;min-height:150px}
#slide-grid button[aria-pressed=true]{border:2px solid #138b8d;background:var(--active)}
#slide-grid img{width:100%;height:110px;object-fit:contain}
#slide-grid .uvs-node-text{font-weight:750}
#lab-dialog{width:96vw;height:94vh;max-width:1500px;max-height:96vh;overflow:hidden}
#lab-dialog[open]{display:flex;flex-direction:column}
#lab-frame{width:100%;flex:1;min-height:0;border:0;border-radius:12px;background:var(--paper)}
.audience #lab-controls{display:none}
.embedded-exhibit #presenter-header,.embedded-exhibit #speaker-notes{display:none}
.embedded-exhibit #workspace{padding-top:8px}
.embedded-exhibit #controls{min-height:48px;padding:4px 12px;margin:4px 8px}
.embedded-exhibit #ink-tools,.embedded-exhibit [data-uvs-node-id=ink-tools]{display:none}
.embedded-exhibit #slide-area{flex:1;height:auto}
@media(max-width:720px){#slide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#slide-grid button{font-size:12px}#slide-grid img{height:85px}#lab-dialog{padding:8px;width:98vw;height:96vh}#lab-controls{font-size:15px}#controls [data-uvs-node-id=slides]{min-width:92px}}
.glyph{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
#controls [data-uvs-node-id=highlighter]{color:#a56d00}
#inspector{position:absolute;inset:4% 24% 4% 3%;z-index:5;border-radius:18px;padding:18px 24px;background:linear-gradient(145deg,#fffdf6b8,#e5f3ed99);backdrop-filter:blur(18px);box-shadow:0 12px 60px #06273424;overflow:auto;font-size:16px;border:1px solid #ffffff99}
#viewport[data-inspecting=true] #stage>.uvs-node>.uvs-node:not([data-uvs-node-id$=':presentation_backdrop']){filter:blur(5px) opacity(.13)}
#viewport[data-inspecting=true] #ink,#viewport[data-inspecting=true] #text-annotations{filter:blur(5px) opacity(.13)}
#inspector-content{display:flex;flex-direction:column;height:100%;gap:10px}
#inspector [data-uvs-node-id=inspect-heading]{justify-content:space-between;align-items:center;flex:none}
#inspector [data-uvs-node-id=inspect-title]{font-size:26px;font-weight:850}
#inspector [data-uvs-node-id=inspect-tabs]{gap:6px;flex:none;flex-wrap:wrap}
#inspector [data-uvs-node-id=inspect-tabs] button{padding:4px 16px;background:#ffffff99}
#inspector [data-uvs-node-id=inspect-photo]{width:100%;flex:1;min-height:0;max-height:58%;background:transparent;border-radius:10px}
#inspector [data-uvs-semantic-kind='tour.viewport']{flex:1;min-height:180px;cursor:grab;border-radius:12px}
#inspector [data-uvs-semantic-kind='tour.viewport']:active{cursor:grabbing}
#inspector [data-uvs-semantic-kind='tour.hotspot']{width:64px;height:64px;border-radius:50%;border:2px solid #12888a;background:#fff7ddeb;color:#075b63;font-size:25px;box-shadow:0 0 0 6px #ffc95c44,0 3px 12px #043d4455}
#inspector [data-uvs-node-id=tour-controls]{justify-content:center;flex-wrap:wrap;gap:6px;flex:none}
#inspector [data-uvs-node-id=tour-controls] button{border:1px solid #138b8d33;background:#fff9ed99;padding:5px 12px}
#inspector [data-uvs-node-id=tour-hint]{font-size:12px;text-align:center;color:#476c71;flex:none}
#inspector [data-uvs-node-id=inspect-caption]{font-size:17px;font-weight:750;line-height:1.6}
#inspector [data-uvs-node-id=inspect-idea]{font-size:14px;line-height:1.6}
#inspector [data-uvs-node-id=credit],#inspector [data-uvs-node-id=license]{font-size:10px;color:var(--muted);direction:ltr;align-self:flex-start}
#question-feedback{position:absolute;bottom:2%;left:5%;right:27%;z-index:4;border-radius:12px;background:#fff9ede8;border-inline-start:5px solid #b95a36;padding:10px 18px;font-size:clamp(10px,1.4vw,19px);box-shadow:0 4px 20px #00293622}
#question-feedback[data-correct=true]{border-color:#218452;color:#17613c}
#status{position:absolute;top:85px;left:50%;transform:translateX(-50%);background:#fff9edef;padding:8px 18px;border-radius:12px;font-size:13px;z-index:10}
#status:empty{display:none}
#help{position:absolute;bottom:88px;left:20px;right:20px;padding:14px 22px;background:#fff9edf5;border:1px solid var(--line);border-radius:14px;font-size:13px;z-index:10}
.notes-hidden #speaker-notes{display:none}
.clean #controls,.clean #help,.clean #presenter-header,.clean #speaker-notes{display:none}
.clean #workspace{padding:0;gap:0;width:100%}
.clean #viewport{box-shadow:none;border-radius:0}
.audience #inspector button,.audience #ink{pointer-events:none}
@media(max-width:1000px){#speaker-notes{width:260px;padding:16px}#note-content [data-uvs-node-id^=body]{font-size:15px}}
@media(max-width:720px){
 #presenter-header{height:60px;padding:6px 12px;gap:10px}#brand{width:63px;height:46px}#lesson-title{display:none}
 #header-controls{margin-left:auto}#header-controls .uvs-node-row{gap:0}
 #header-controls button{min-width:34px;width:34px;height:36px}
 #workspace{flex-direction:column;padding:0 6px;gap:8px}
 #slide-area{flex:none;height:calc((100vw - 12px)*.5625)}
 #speaker-notes{width:100%;flex:1;padding:16px}
 .library-open #speaker-notes{padding:10px 12px}
 .library-open #side-tabs{margin-bottom:6px;padding-bottom:6px}
 .library-open #side-tabs button{font-size:14px;padding:4px 10px}
 #library-kinds{margin-bottom:6px}
 #library-kinds button,#sound-controls button{padding:4px 8px;font-size:12px;min-height:32px}
 #sound-controls{display:grid;grid-template-columns:110px minmax(0,1fr);gap:5px;margin-bottom:5px}
 #sound-controls [data-uvs-node-id=sound-automatic]{grid-column:1/-1;justify-content:flex-end}
 #sound-controls .field-label{gap:0;font-size:10px}
 #sound-controls input[type=range]{min-block-size:24px;height:24px;padding:0}
 #library-search{margin-bottom:6px}
 #library-search .field-label{font-size:0;gap:0}
 #library-search input{font-size:13px;padding:4px 10px;min-block-size:34px}
 #library-list.sound-pads{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 #library-list.sound-pads button{min-height:60px;padding:5px;font-size:10px}
 #library-list [data-uvs-node-id^='sound-symbol:']{font-size:18px}
 #library-footer{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding-top:6px}
 #library-footer button{margin:0;padding:5px;font-size:12px;min-height:34px}
 #library-footer [data-uvs-node-id=library-session-note]{grid-column:1/-1;font-size:9px}
 #speaker-notes h2{font-size:17px;margin:0 0 8px}#note-content>.uvs-node-column{padding:10px 0}
 #controls{padding:6px;gap:2px;flex-wrap:wrap;margin:6px;justify-content:center;min-height:90px}
 #controls>.uvs-node-row{gap:1px}#controls button{height:36px;min-width:36px;width:36px;padding:6px}
 #controls [data-uvs-node-id=position]{min-width:56px;font-size:15px}
 #inspector{position:fixed;inset:65px 8px 108px;padding:16px;border-radius:14px}#inspector-content{gap:10px}
 #inspector [data-uvs-node-id=inspect-title]{font-size:19px}#inspector [data-uvs-node-id=inspect-tabs] button{height:34px;min-width:0;padding:3px 9px;font-size:13px}
 #inspector [data-uvs-node-id=inspect-caption]{font-size:15px}#inspector [data-uvs-node-id=inspect-idea]{font-size:14px}
 #inspector [data-uvs-node-id=credit],#inspector [data-uvs-node-id=license]{font-size:10px}
 .clean #slide-area,.notes-hidden #slide-area{flex:1;height:auto}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
