@font-face { font-family:ColaLoaderInter; src:url('./inter-latin.woff2?v=dd8a4575be98') format('woff2'); font-style:normal; font-weight:100 900; font-display:swap; }
.cola-menu-demo { font-family:ColaLoaderInter,Inter,Arial,sans-serif; }
.cola-loader-showcase { margin-block:70px 110px; scroll-margin-top:100px; }
.cld-guide-link { color:#b1a1d9; font-size:12px; white-space:nowrap; }
.cld-example-toolbar { max-width:920px; margin:0 auto 18px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:15px; }
.cld-example-toolbar>span { font-size:11px; color:#938d9c; }
.cld-example-toolbar>div { display:flex; gap:6px; flex-wrap:wrap; }
.cld-example-toolbar button { background:#1a161e; border:1px solid #3a2e47; border-radius:5px; color:#9b94a6; padding:8px 11px; font:500 11px ColaLoaderInter,Arial,sans-serif; cursor:pointer; }
.cld-example-toolbar button[aria-pressed=true] { color:#cbb3ff; border-color:#756091; background:#2b2038; }
.cld-stage { min-height:560px; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; padding-block:5px; min-width:0; }
.cld-window { --cld-purple:#8e65d7; --cld-purple-light:#a27bdf; width:460px; height:500px; max-width:100%; background:radial-gradient(circle 180px at 50% 0,transparent 0 60%,#251b3525 60% 75%,transparent 75%),radial-gradient(circle 140px at 50% 0,#21162f55,transparent),#080808; border:1px solid #383838; border-radius:9px; box-sizing:border-box; overflow:hidden; color:#dedde1; font:14px/1.4 ColaLoaderInter,Arial,sans-serif; position:relative; box-shadow:0 22px 65px #0006; }
.cld-window[data-view=products] { width:min(920px,100%); height:560px; background:radial-gradient(circle 220px at 50% 0,transparent 0 68%,#20162d33 68% 90%,transparent 90%),radial-gradient(circle 170px at 50% 0,#25183155,transparent),#080808; }
.cld-window [hidden],.cld-example-toolbar [hidden] { display:none!important; }
.cld-titlebar { height:48px; padding:0 12px 0 11px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #131313; background:#090b0be6; position:relative; z-index:3; }
.cld-window-title,.cld-window-actions { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.cld-window-title { font-size:14px; font-weight:600; gap:12px; }
.cld-window-title>i { width:12px; height:12px; background:linear-gradient(120deg,#a78dd1,#8259c7); border-radius:3px; }
.cld-window-actions { gap:10px; color:#686a6a; }
.cld-window-actions button { display:grid; place-items:center; padding:0; width:24px; height:28px; background:transparent; color:#686a6a; border:0; cursor:pointer; }
.cld-window-actions button:hover { color:#bba5db; }
.cld-server { display:inline-flex; align-items:center; gap:7px; padding:2px 10px; min-height:24px; box-sizing:border-box; border:1px solid #1d2120; border-radius:16px; background:#101312; font-size:13px; }
.cld-server>i,.cld-signed-in>i { width:8px; height:8px; display:inline-block; background:#4ed57a; border-radius:50%; }
.cld-signed-in { display:flex; align-items:center; gap:8px; font-size:13px; color:#858588; }
.cld-signed-in b { font-weight:600; color:#d9d9dd; }
.cld-login { position:relative; height:450px; padding:23px 39px 20px; box-sizing:border-box; }
html body .cld-login h3 { margin:0; font:700 23px/1.3 ColaLoaderInter,Arial,sans-serif!important; color:#dfdde1; letter-spacing:0; }
.cld-auth-tabs { display:grid; grid-template-columns:1fr 1fr; padding:4px; margin:28px 0 22px; border-radius:30px; background:#111; height:44px; box-sizing:border-box; }
.cld-auth-tabs button { border:0; border-radius:25px; padding:0; background:transparent; color:#717171; cursor:pointer; font:600 14px ColaLoaderInter,Arial,sans-serif; }
.cld-auth-tabs button[aria-selected=true] { background:var(--cld-purple); color:#f4efff; }
.cld-login label { color:#858488; display:block; font-size:14px; margin-bottom:8px; }
.cld-login input { box-sizing:border-box; display:block; width:100%; height:46px; border:1px solid #a279e2; border-radius:6px; padding:10px 13px; background:#111; font:14px ColaLoaderInter,Arial,sans-serif; color:#a6a0ae; margin-bottom:13px; }
.cld-purple-button { height:50px; background:linear-gradient(#a17bd9,#885fd2); border:0; border-radius:7px; color:#f0e9ff; font:500 14px ColaLoaderInter,Arial,sans-serif; cursor:pointer; }
.cld-purple-button:hover { background:linear-gradient(#ad8ae0,#946ddd); }
.cld-purple-button:disabled { cursor:wait; }
.cld-signin { position:absolute; left:39px; right:39px; bottom:19px; width:calc(100% - 78px); }
.cld-products { display:grid; grid-template-columns:347px minmax(0,1fr); height:510px; }
.cld-product-sidebar { padding:23px 11px 20px 21px; border-right:1px solid #141414; }
.cld-product-selected { display:flex; align-items:center; gap:14px; width:100%; height:56px; padding:8px; border:0; border-radius:6px; background:#3b304a88; color:#dfdce2; text-align:left; cursor:default; }
.cld-product-selected strong { font:700 23px/1.2 ColaLoaderInter,Arial,sans-serif; white-space:nowrap; }
.cld-product-art { width:106px; height:40px; flex:none; display:grid; place-content:center; line-height:1; text-align:center; color:white; overflow:hidden; border-radius:3px; border:1px solid #284c9b; background:repeating-linear-gradient(155deg,transparent 0 8px,#3f8aca44 9px 10px,transparent 11px 18px),repeating-linear-gradient(25deg,transparent 0 8px,#7e68bf66 9px 10px,transparent 11px 16px),radial-gradient(ellipse at 50% 70%,#bf3076,#104f8c 60%,#06263d); box-sizing:border-box; }
.cld-product-art b { font:900 24px/.9 Arial,sans-serif; letter-spacing:-1px; text-shadow:2px 1px #38325e; }
.cld-product-art small { font:500 6px/1 Arial,sans-serif; letter-spacing:3px; margin-top:3px; }
.cld-product-detail { min-width:0; position:relative; padding:26px 21px 15px 9px; box-sizing:border-box; }
html body .cld-product-detail h3 { margin:0; font:700 23px/1.4 ColaLoaderInter,Arial,sans-serif!important; color:#dfdde1; letter-spacing:0; }
.cld-metadata { margin:35px 0 0; }
.cld-metadata>div { margin:0 0 39px; }
.cld-metadata dt { font-size:14px; color:#737175; margin-bottom:10px; }
.cld-metadata dd { margin:0; color:#e6e4e9; font-size:14px; }
.cld-metadata .cld-status-green { color:#4cf68a; }
.cld-metadata .cld-status-warn { color:#f0b56f; }
.cld-load-controls { position:absolute; bottom:15px; left:9px; right:21px; }
.cld-load-row { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-bottom:4px; min-height:18px; }
.cld-seed-toggle,.cld-settings-toggle { border:0; background:none; color:#858286; font:500 13px/1.4 ColaLoaderInter,Arial,sans-serif; padding:0; text-align:left; cursor:pointer; }
.cld-seed-toggle { min-width:0; overflow-wrap:anywhere; }
.cld-settings-toggle { flex:none; white-space:nowrap; }
.cld-seed-toggle:hover,.cld-settings-toggle:hover { color:#c2a2eb; }
.cld-load { width:100%; height:46px; position:relative; overflow:hidden; }
.cld-load>span:first-child { position:relative; z-index:2; }
.cld-load-progress { position:absolute; inset:0; background:#c4b1ed66; transform:scaleX(0); transform-origin:left; }
.cld-popover { position:absolute; z-index:5; bottom:88px; padding:11px; border-radius:4px; background:#1d1d1d; color:#ddd; box-shadow:0 8px 20px #0003; }
html body .cld-popover h4 { font:500 14px/1.4 ColaLoaderInter,Arial,sans-serif!important; letter-spacing:0; color:#8c8a8e; margin:0 0 6px; }
.cld-seeds-popover { left:9px; width:277px; max-width:calc(100% - 30px); box-sizing:border-box; }
.cld-seed-row { display:flex; align-items:center; gap:5px; min-height:27px; border-top:1px solid #2b2b2b; }
.cld-seed-row label { display:flex; align-items:center; gap:7px; min-width:0; font-size:13px; flex:1; cursor:pointer; }
.cld-seed-row label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cld-seed-row input { appearance:none; width:21px; height:21px; background:#252525; border:0; border-radius:50%; flex:none; margin:0; cursor:pointer; }
.cld-seed-row input:checked { background:#929292; box-shadow:inset 0 0 0 2px #252525; }
.cld-seed-row button,.cld-new-seed button { padding:1px 4px; border:0; border-radius:4px; color:#f3ebff; background:#9064da; font:500 13px/1.3 ColaLoaderInter,Arial,sans-serif; cursor:pointer; }
.cld-seed-row button:disabled { opacity:.4; cursor:default; }
.cld-new-seed { display:flex; align-items:center; gap:6px; border-top:1px solid #2b2b2b; margin-top:5px; padding-top:7px; }
.cld-new-seed input { width:120px; min-width:0; background:#292929; border:0; border-radius:3px; padding:2px 4px; color:#ddd; font:500 13px/1.4 ColaLoaderInter,Arial,sans-serif; }
.cld-seed-error:empty { display:none; }.cld-seed-error { margin:5px 0 0; color:#d8bddc; font-size:10px; }
.cld-settings-popover { right:21px; padding:10px; }
.cld-settings-popover label { display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.cld-settings-popover input { appearance:none; width:22px; height:22px; border:0; background:#252525; border-radius:4px; margin:0; cursor:pointer; }
.cld-settings-popover input:checked { background:#9064da; box-shadow:inset 0 0 0 5px #9064da; }
.cld-settings-popover input:checked::after { content:'✓'; color:#fff; font:18px/22px Arial,sans-serif; display:block; text-align:center; }
.cld-window[data-minimized=true] { height:48px; }.cld-window[data-minimized=true]>.cld-login,.cld-window[data-minimized=true]>.cld-products { display:none; }
.cld-demo-note,.cld-live-status { max-width:920px; margin:15px auto 0; color:#8e8797; font-size:11px; line-height:1.7; }
.cld-live-status { min-height:19px; color:#b39acb; }
.cola-loader-showcase :focus-visible { outline:2px solid #b391e8; outline-offset:3px; }
@media(max-width:950px) { .cld-products { grid-template-columns:34% minmax(0,1fr); }.cld-product-selected { gap:10px; }.cld-product-art { width:85px; }.cld-product-selected strong { font-size:18px; }.cld-signed-in { font-size:11px; gap:6px; } }
@media(max-width:650px) { .cld-product-selected { padding:8px 5px; }.cld-product-art { width:65px; }.cld-product-selected strong { font-size:15px; white-space:normal; }.cld-product-sidebar { padding:20px 9px; }.cld-signed-in { display:none; }.cld-load-row { align-items:flex-start; }.cld-seed-toggle,.cld-settings-toggle { font-size:11px; }.cld-product-detail { padding-right:12px; }.cld-load-controls { right:12px; }.cld-settings-popover { right:12px; } }
@media(max-width:540px) { .cola-loader-showcase { margin-block:55px 80px; }.cld-stage { min-height:560px; }.cld-products { grid-template-columns:1fr; grid-template-rows:72px minmax(0,1fr); }.cld-product-sidebar { border-right:0; border-bottom:1px solid #181418; padding:10px 12px; }.cld-product-selected { width:100%; height:51px; padding:5px 7px; gap:12px; }.cld-product-selected strong { font-size:19px; }.cld-product-art { width:90px; }.cld-product-detail { padding:14px 14px; }.cld-product-detail h3 { font-size:21px!important; }.cld-metadata { margin-top:20px; }.cld-metadata>div { margin-bottom:15px; }.cld-metadata dt { margin-bottom:5px; font-size:12px; }.cld-metadata dd { font-size:13px; }.cld-load-controls { left:14px; right:14px; bottom:15px; }.cld-load-row { flex-wrap:wrap; row-gap:7px; margin-bottom:8px; }.cld-seed-toggle { flex-basis:100%; }.cld-settings-toggle { margin-left:auto; }.cld-popover { bottom:112px; }.cld-seeds-popover { left:14px; max-width:calc(100% - 28px); }.cld-settings-popover { right:14px; bottom:100px; }.cld-login { padding-inline:24px; }.cld-signin { left:24px; right:24px; width:calc(100% - 48px); }.cld-window-actions { gap:7px; }.cld-titlebar { padding-right:8px; } }
@media(prefers-reduced-motion:no-preference) { .cld-purple-button { transition:filter .15s; } }