/* The full interactive application lives exclusively in the preview dialog. */
#demo-dialog{width:920px;max-width:calc(100vw - 36px);max-height:calc(100dvh - 32px);padding:0;border:1px solid #685280;border-radius:15px;background:radial-gradient(ellipse at 50% -15%,#39214b55,transparent 55%),#0d0b15;direction:ltr;color:#eadff5;overflow:auto;box-shadow:0 28px 100px #000b;scrollbar-width:thin;scrollbar-color:#75538e #191120}
#demo-dialog::backdrop{background:#06050bc9;backdrop-filter:blur(7px)}
#demo-dialog button,#demo-dialog input,#demo-dialog select{font-family:Tajawal,'Segoe UI',sans-serif}
#demo-dialog button:focus-visible,#demo-dialog input:focus-visible,#demo-dialog select:focus-visible{outline:2px solid #ddbdff;outline-offset:3px}
#demo-dialog button{transition:filter .18s,background .18s,border-color .18s}
#demo-dialog button:disabled{opacity:.4;cursor:default}
.trial-header{position:sticky;top:0;z-index:2;text-align:center;padding:16px 22px 18px;min-height:112px;background:linear-gradient(110deg,#120d1b,#191021,#100c18)}
.trial-badges{position:absolute;left:18px;top:16px;display:flex;gap:7px;align-items:center;font-size:9px;direction:ltr;color:#cebae7}
.trial-badges>span{border:1px solid #433151;background:#1d152b;padding:4px 9px;border-radius:5px}
.trial-window-actions{position:absolute;right:17px;top:15px;display:flex;gap:7px}
.trial-window-actions button{border:1px solid #534260;background:#231a30;border-radius:6px;width:27px;height:27px;display:grid;place-items:center;font:18px Arial!important;color:#ddcbed}
.trial-window-actions button:hover{background:#483155;border-color:#c095e4}
.trial-window-actions .close-demo:hover{background:#663449}
#demo-dialog .trial-header h2{font:900 italic 54px/1 'Arial Black',Arial,sans-serif;color:#cfabf6;margin:4px 0 0;padding:0;letter-spacing:-4px}
.trial-header h2 bdi{position:relative;padding-right:13px}
.trial-header h2 span{position:absolute;right:-1px;top:-7px;font:25px/1 Arial;color:#e6d2ff;letter-spacing:0}
.trial-brand-line{height:2px;width:126px;background:linear-gradient(90deg,#9358e9,#c09aeb);margin:8px auto}
#demo-dialog .trial-header>p{font:8px Arial;letter-spacing:3px;color:#c4addc;margin:0}
.trial-body{display:grid;grid-template-columns:1fr 1.06fr;gap:17px;padding:0 22px}
.trial-panel{min-width:0;background:linear-gradient(145deg,#181223,#13101d);border:1px solid #493555;border-radius:9px;padding:14px;direction:ltr}
.trial-panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px;color:#dec6f6}
.trial-panel-title h3{font-size:12px;line-height:1.4;margin:0}
.trial-panel-title>span{font:8px Arial;letter-spacing:1px;border:1px solid #513960;background:#20162e;padding:3px 12px;border-radius:4px;color:#c3a5e5}
.trial-shortcuts{font-size:10px;color:#b8a4cb;margin:0 0 12px;line-height:1.4}
.trial-primary,.trial-color-button{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:34px;padding:7px 10px;border:1px solid #b084ea;border-radius:6px;background:linear-gradient(120deg,#9856ec,#7139ba);color:#fff3ff;font-size:11px;font-weight:700;line-height:1.3}
.trial-primary:hover,.trial-color-button:hover{filter:brightness(1.17)}
.trial-color-button{position:relative;cursor:pointer;margin:0;direction:ltr}
.trial-color-button svg{width:14px;height:14px}
.trial-color-button>span{font-size:9px;font-weight:400}
.trial-color-button input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.trial-color-button:focus-within{outline:2px solid #ddbdff;outline-offset:3px}
.trial-hex-row{display:grid;grid-template-columns:auto minmax(72px,1fr) auto auto;gap:7px;align-items:center;margin:12px 0 8px;font-size:10px}
.trial-hex-row input,.trial-text-input{background:#21192d;color:#e9d5fa;border:1px solid #5c426f;border-radius:5px;min-width:0;height:31px;padding:5px 9px;font-size:11px}
.trial-hex-row button{border:1px solid #9d7cde;background:#6741ac;border-radius:5px;color:white;min-height:31px;padding:4px 12px;font-size:10px;white-space:nowrap}
.trial-hex-row button:hover{background:#8255c7}
.trial-hex-row output{background:var(--trial-color,#ca07df);color:var(--trial-chip-text,#14051c);border:1px solid #e5b2f333;padding:7px 8px;font:9px monospace;min-width:65px;text-align:center;border-radius:4px;line-height:15px}
.trial-color-status{font-size:9px;color:#a3e8cb;line-height:1.4;margin:0 0 12px}
.trial-field-label{font-size:11px;display:block;color:#d7c4e7;margin-bottom:5px}
.trial-text-input{display:block;width:100%;height:31px;margin-bottom:7px}
.trial-select{display:flex;align-items:center;gap:8px;border:1px solid #624477;border-radius:28px;padding:4px;background:linear-gradient(#261b33,#19111f);min-height:36px;font-size:10px}
.trial-select label{flex:1;text-align:center;color:#c8afd9;line-height:1.3}
.trial-select-control{position:relative;flex:1.2;min-width:0}
.trial-select-control select{appearance:none;-webkit-appearance:none;display:block;width:100%;background:linear-gradient(120deg,#422950,#261b35);color:#ecdafa;border:1px solid #8455a4;border-radius:24px;font-size:10px;height:28px;padding:3px 25px 3px 9px;text-align:center;cursor:pointer}
.trial-select-control option{background:#22172f;color:#f2e2ff}
.trial-select-control>span{position:absolute;right:10px;top:1px;font:20px Arial;pointer-events:none;color:#d2aff0}
.trial-profiles>.trial-select{margin:17px 0}
.trial-profile-actions{display:flex;gap:9px;margin-top:9px}
.trial-profile-actions button{flex:1;border:1px solid #51365f;border-radius:5px;background:#211729;color:#d6bde9;font-size:10px;min-height:29px;padding:5px 6px}
.trial-profile-actions button:hover{background:#3d244d;border-color:#a074bf}
.trial-profile-actions #trial-delete:hover{color:#ffbdcf;border-color:#9c526a}
.trial-slider{display:block;margin-top:12px}
.trial-slider>span{display:flex;align-items:center;gap:4px;font-size:10px;color:#d9c7e7;line-height:1.3}
.trial-slider bdi{font-size:9px;color:#bba4cf}
.trial-slider output{margin-left:auto;font:10px Arial;min-width:38px;text-align:center;padding:3px 6px;border:1px solid #7b5d92;border-radius:3px;color:#e9d2ff;background:#22182e}
.trial-slider input{display:block;appearance:none;-webkit-appearance:none;direction:ltr;width:100%;height:16px;margin:8px 0 0;border:0;cursor:ew-resize;background:linear-gradient(#bc87f2,#bc87f2) left center / var(--fill,40%) 3px no-repeat,linear-gradient(#4b365e,#4b365e) center / 100% 3px no-repeat}
.trial-slider input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:8px;height:16px;background:#d5aaff;border:1px solid #e5c4ff;border-radius:4px;box-shadow:0 0 9px #ad6ce32f}
.trial-slider input::-moz-range-thumb{width:7px;height:15px;background:#d5aaff;border:1px solid #e5c4ff;border-radius:4px}
.trial-presets{display:flex;align-items:center;gap:5px;border:1px solid #705183;border-radius:27px;padding:3px;background:linear-gradient(#30213e,#1b1425);margin:12px 0}
.trial-presets button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-width:0;min-height:29px;border:1px solid transparent;border-radius:24px;color:#b69bc9;padding:3px}
.trial-presets svg{width:22px;height:22px}
.trial-presets button:hover{background:#50335f}
.trial-presets button[aria-pressed=true]{background:linear-gradient(120deg,#704095,#3b2550);border-color:#a277c4;color:#f3ddff}
.trial-presets #trial-preset-power{background:linear-gradient(#9f63ed,#713bbb);border-color:#be91ea;color:white;font-size:19px;flex:1.15}
.trial-presets #trial-preset-power span{font-size:10px}
.trial-presets #trial-preset-power[aria-pressed=false]{background:#30233f;border-color:#6c557c;color:#bba5c8}
.trial-aim-key{margin-bottom:12px}
.trial-aim-key .trial-select-control{flex:1.4}
.trial-toggles{display:grid;gap:6px}
.trial-toggles button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:27px;border:1px solid #513c61;border-radius:24px;background:#1b1425;padding:4px 9px;font-size:10px;color:#d4bddf;text-align:left;line-height:1.3}
.trial-toggles button:hover{border-color:#ad7bcc;background:#2e1e3e}
.trial-toggles i{position:relative;flex-shrink:0;width:32px;height:17px;border:1px solid #785c89;background:#35283e;border-radius:20px;transition:background .18s}
.trial-toggles i:after{content:'';position:absolute;top:2px;left:3px;width:11px;height:11px;background:#ac9ab9;border-radius:50%;transition:left .18s}
.trial-toggles [aria-checked=true] i{background:linear-gradient(#a168ea,#7e40c5);border-color:#c38df8}
.trial-toggles [aria-checked=true] i:after{left:16px;background:#fff2ff}
#demo-dialog .trial-footer{display:block;margin:0;padding:14px 22px 16px;border:0;max-width:none;width:100%}
.trial-footer>.trial-primary{min-height:34px;font-size:12px}
.trial-footer>.trial-primary[aria-pressed=true]{background:linear-gradient(120deg,#67418b,#45285e)}
#demo-dialog #trial-status{font-size:10px;line-height:1.5;color:#a3e8cb;text-align:center;margin:8px 0 6px;min-height:15px}
#demo-dialog #trial-status[data-error=true]{color:#ffabc5}
#demo-dialog .trial-footer>div{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:9px}
#demo-dialog #demo-disclaimer{color:#af98bf;font-size:9px;line-height:1.5;margin:0}
#demo-dialog #reset-demo{color:#c7a4e4;font-size:9px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;padding:3px}
.trial-minimized-note{font-size:12px;color:#c8b0db;padding:0 22px 20px;text-align:center;margin:0}
#demo-dialog.is-minimized{width:440px}
#demo-dialog.is-minimized .trial-body,#demo-dialog.is-minimized .trial-footer{display:none}
#demo-dialog.is-minimized .trial-badges{position:static;justify-content:flex-start;margin-bottom:14px;font-size:8px}
#demo-dialog.is-minimized .trial-header h2{font-size:40px}
@media(max-width:680px){#demo-dialog{max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:11px}.trial-header{padding:55px 14px 20px}.trial-badges{left:12px;top:13px;font-size:8px;gap:5px}.trial-badges>span{padding:4px 6px}.trial-window-actions{right:12px;top:12px}.trial-body{grid-template-columns:1fr;padding-inline:14px;gap:12px}.trial-panel{padding:16px}.trial-panel-title h3{font-size:13px}.trial-shortcuts{font-size:10px}.trial-primary,.trial-color-button{min-height:38px;font-size:12px}.trial-hex-row input{height:35px}.trial-select{min-height:40px}.trial-select-control select{height:31px;font-size:11px}.trial-toggles button{min-height:36px;font-size:11px}.trial-slider{margin-top:18px}.trial-slider>span{font-size:11px}.trial-slider input{height:24px;margin-top:10px}.trial-presets button{min-height:35px}.trial-toggles{gap:8px}#demo-dialog .trial-footer{padding:14px}#demo-dialog .trial-footer>div{align-items:start;gap:8px;flex-direction:column}#demo-dialog #demo-disclaimer{font-size:9px}#demo-dialog.is-minimized .trial-header{padding-top:15px}.trial-profile-actions button{min-height:34px}.trial-hex-row{gap:5px}.trial-hex-row button{padding:4px 9px}.trial-hex-row output{min-width:57px;padding:7px 5px;font-size:8px}}
@media(prefers-reduced-motion:reduce){#demo-dialog *{transition:none!important}}