/* These variables style the website, never the exported video. */
:root {
    color-scheme: dark;
    --ui-slate-50:248 250 252; --ui-slate-100:241 245 249;
    --ui-slate-200:226 232 240; --ui-slate-300:203 213 225;
    --ui-slate-400:148 163 184; --ui-slate-500:100 116 139;
    --ui-slate-600:71 85 105; --ui-slate-700:51 65 85;
    --ui-slate-800:30 41 59; --ui-slate-900:15 23 42; --ui-slate-950:2 6 23;
    --ui-brand-50:240 253 244; --ui-brand-100:220 252 231;
    --ui-brand-300:134 239 172; --ui-brand-400:74 222 128;
    --ui-brand-500:34 197 94; --ui-brand-600:22 163 74; --ui-brand-700:21 128 61;
    --ui-brand-900:17 24 39; --ui-brand-950:3 7 18;
    --ui-ornament:143 179 196; --ui-ornament-opacity:.12;
    --ui-ink:255 255 255; --ui-title-end:110 231 183;
}
:root[data-site-theme="gold"] {
    --ui-slate-50:250 247 240; --ui-slate-100:243 237 224;
    --ui-slate-200:231 226 214; --ui-slate-300:206 202 191;
    --ui-slate-400:167 167 155; --ui-slate-500:146 150 140;
    --ui-slate-600:84 87 78; --ui-slate-700:53 58 53;
    --ui-slate-800:28 33 30; --ui-slate-900:14 18 16; --ui-slate-950:9 12 10;
    --ui-brand-50:255 251 238; --ui-brand-100:249 236 204;
    --ui-brand-300:235 212 160; --ui-brand-400:224 195 132;
    --ui-brand-500:211 177 108; --ui-brand-600:194 158 88; --ui-brand-700:190 156 86;
    --ui-brand-900:53 44 28; --ui-brand-950:25 23 17;
    --ui-ornament:210 178 112; --ui-ornament-opacity:.16;
    --ui-ink:27 25 19; --ui-title-end:249 237 210;
}
body { background-color:rgb(var(--ui-slate-900)); color:rgb(var(--ui-slate-100)); isolation:isolate; }
/* Two stationary rosettes, same coordinates in both themes; no moving layers. */
body::before, body::after {
    content:""; position:fixed; z-index:-1; pointer-events:none;
    width:660px; height:660px; background-color:rgb(var(--ui-ornament));
    opacity:var(--ui-ornament-opacity);
    -webkit-mask:url('islamic-ornament.svg') center/contain no-repeat;
    mask:url('islamic-ornament.svg') center/contain no-repeat;
}
body::before { top:-215px; right:-285px; }
body::after { bottom:-310px; left:-260px; width:780px; height:780px; transform:rotate(22.5deg); }
.glass-panel { background-color:rgb(var(--ui-slate-800) / .92); border-color:rgb(var(--ui-slate-600) / .44); }
#controlsColumn > .glass-panel { position:relative; isolation:isolate; overflow:hidden; }
#controlsColumn > .glass-panel::before {
    content:""; position:absolute; z-index:-1; pointer-events:none;
    width:280px; height:280px; left:-160px; top:-125px;
    background:rgb(var(--ui-ornament)); opacity:.13;
    -webkit-mask:url('islamic-ornament.svg') center/contain no-repeat;
    mask:url('islamic-ornament.svg') center/contain no-repeat;
}
#controlsColumn h1 { --tw-gradient-to:rgb(var(--ui-title-end)); }
.site-theme-bar { max-width:72rem; margin:0 auto 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.site-theme-control { display:flex; align-items:center; gap:10px; font-size:13px; color:rgb(var(--ui-slate-400)); }
.site-theme-buttons { display:flex; gap:4px; padding:4px; border:1px solid rgb(var(--ui-slate-600) / .7); background:rgb(var(--ui-slate-800)); border-radius:99px; }
.site-theme-buttons button { min-height:44px; padding:8px 15px; border-radius:99px; color:rgb(var(--ui-slate-300)); font:inherit; font-weight:700; }
.site-theme-buttons button[aria-pressed="true"] { background:rgb(var(--ui-brand-500)); color:rgb(var(--ui-ink)); }
.site-theme-buttons button:focus-visible { outline:2px solid rgb(var(--ui-brand-400)); outline-offset:3px; }
.site-theme-swatch { display:inline-block; width:9px; height:9px; margin-inline-end:6px; border-radius:50%; border:1px solid currentColor; }
[data-site-theme-choice="gold"] .site-theme-swatch { background:#d3b16c; }
[data-site-theme-choice="original"] .site-theme-swatch { background:#22c55e; }
.beta-release-bar { margin:0; }
[data-site-theme="gold"] .beta-release-badge { background:#192b24; border-color:#355245; color:#a9c7b5; }
[data-site-theme="gold"] .beta-release-dot { background:#83b39b; box-shadow:none; }
#duration70Panel { background:rgb(var(--ui-slate-800)) !important; color:rgb(var(--ui-slate-300)) !important; border-color:rgb(var(--ui-slate-600)) !important; font-family:'Tajawal',sans-serif !important; }
#duration70Panel strong { color:rgb(var(--ui-brand-400)); }
#duration70Panel button { background:rgb(var(--ui-slate-700)) !important; color:rgb(var(--ui-slate-100)) !important; border-color:rgb(var(--ui-slate-600)) !important; }
#pairKeyExperiment { background:rgb(var(--ui-slate-800)) !important; border-color:rgb(var(--ui-slate-700)) !important; }
#pairKeyExperiment > label { color:rgb(var(--ui-slate-300)) !important; }
#pairKeyControls p { color:rgb(var(--ui-slate-400)) !important; }
#blackKeyStyle { background:rgb(var(--ui-slate-900)) !important; color:rgb(var(--ui-slate-100)) !important; border-color:rgb(var(--ui-slate-600)) !important; }
.settings-tablist { background:rgb(var(--ui-slate-900)); border-color:rgb(var(--ui-slate-600)); }
.settings-tab { color:rgb(var(--ui-slate-300)); }
.settings-tab[aria-selected="true"] { background:rgb(var(--ui-brand-700)); color:rgb(var(--ui-ink)); }
.settings-tab:focus-visible, [data-settings-panel]:focus-visible { outline-color:rgb(var(--ui-brand-400)); }
.pos-cell { background:rgb(var(--ui-slate-800)); border-color:rgb(var(--ui-slate-600)); }
.pos-cell::after { background:rgb(var(--ui-slate-500)); }
.pos-cell:hover { border-color:rgb(var(--ui-brand-400)); }
.pos-cell.is-on { background:rgb(var(--ui-brand-500) / .16); border-color:rgb(var(--ui-brand-500)); }
.pos-cell.is-on::after { background:rgb(var(--ui-brand-500)); }
input[type=range]::-webkit-slider-thumb { background:rgb(var(--ui-brand-500)); box-shadow:0 0 10px rgb(var(--ui-brand-500) / .25); }
input[type=range]::-webkit-slider-runnable-track { background:rgb(var(--ui-slate-700)); }
input[type=range]::-moz-range-thumb { background:rgb(var(--ui-brand-500)); border:0; border-radius:50%; height:20px; width:20px; }
input[type=range]::-moz-range-track { background:rgb(var(--ui-slate-700)); height:4px; border-radius:2px; }
input[type=range]:focus-visible { outline:2px solid rgb(var(--ui-brand-400)); outline-offset:6px; border-radius:8px; }
::-webkit-scrollbar-track { background:rgb(var(--ui-slate-900)); }
::-webkit-scrollbar-thumb { background:rgb(var(--ui-slate-700)); }
::-webkit-scrollbar-thumb:hover { background:rgb(var(--ui-slate-600)); }
[data-site-theme="gold"] .bg-brand-500, [data-site-theme="gold"] .bg-brand-600,
[data-site-theme="gold"] .bg-brand-700 { color:rgb(var(--ui-ink)); }
[data-site-theme="gold"] .group:hover .group-hover\:bg-brand-600 { color:rgb(var(--ui-ink)); }
[data-site-theme="gold"] #startPreviewBtn { box-shadow:0 4px 22px rgb(var(--ui-brand-500) / .12); }
[data-site-theme="gold"] .file-input-wrapper button { background:rgb(var(--ui-brand-500)); color:rgb(var(--ui-ink)); }
[data-site-theme="gold"] #exportBtn { background:rgb(var(--ui-brand-500)); color:rgb(var(--ui-ink)); }
[data-site-theme="gold"] #exportBtn:hover { background:rgb(var(--ui-brand-600)); }
@media (max-width:767px) {
    body::before { width:430px; height:430px; top:-125px; right:-270px; }
    body::after { width:480px; height:480px; bottom:-160px; left:-290px; }
    .site-theme-control { gap:6px; }
    .site-theme-buttons button { padding-inline:11px; }
    .site-theme-bar { gap:6px; }
    .beta-release-badge { padding-inline:9px; }
    #previewMountMobile { background:rgb(var(--ui-slate-900)); }
    #previewPanel { background:rgb(var(--ui-slate-800) / .95); }
    #previewHiddenCapsule { background:rgb(var(--ui-slate-900) / .96); border-color:rgb(var(--ui-slate-600)); }
    .preview-control-btn, .preview-capsule-btn { background:rgb(var(--ui-slate-700)); color:rgb(var(--ui-slate-200)); border-color:rgb(var(--ui-slate-600)); }
    .preview-control-btn.is-primary, .preview-capsule-btn.is-primary { background:rgb(var(--ui-brand-500)); color:rgb(var(--ui-ink)); border-color:rgb(var(--ui-brand-400)); box-shadow:none; }
}
@media (max-width:359px) { .site-theme-control > span { display:none; } }