/* SE V2: layout and colours follow the owner's English KANALI screenshot.
   Controls are live DOM elements, so no checked state is baked into artwork. */
:root{--font-edition-title:var(--font-headline);--kanali-lime:#e2f76b;--screen-glow:#5cbed0}
.try h1{font-weight:650;font-size:clamp(26px,3vw,46px)}
.eyebrow{font-size:14px;letter-spacing:.08em;color:#c8c8c3}
.intro-word{text-align:center;font-size:clamp(44px,12vw,190px)}
.intro-word span{display:block;font-size:.45em;margin-top:.35em}
.device{aspect-ratio:1400/937}
.top-brand{letter-spacing:.06em}
.kanali-window{background:#1e2024!important;color:#eee;font-family:var(--font-body);border-radius:1.2cqw}
.kanali-logo{display:flex;align-items:center;gap:1.2cqw;color:#14171a;font-family:var(--font-headline);font-weight:750}
.kanali-logo img{width:4.2cqw;height:auto;filter:brightness(0)}
.kanali-logo span{font-size:2.7cqw;line-height:1.25}
.kanali-logo small{display:block;font-family:var(--font-body);font-size:.85cqw;font-weight:650}
.kanali-window .kanali-power,.kanali-window .kanali-save{background:var(--kanali-lime);color:#17191b;opacity:1!important}
.kanali-window .kanali-power[aria-pressed="false"]{background:#41454a;color:#ddd}
.kanali-window .kanali-card.is-active{box-shadow:0 0 0 .1cqw #b4c35c,0 1.5cqw 4cqw #0006}
.kanali-card span::before{background:transparent;border:1px solid white;box-sizing:border-box}
.kanali-window .kanali-arrow{background:#f6f6f3}
.kanali-window .kanali-swatch,.kanali-window .kanali-align,.kanali-window .kanali-font{background:#303339;border-radius:4px;color:#f0f1ef}
.kanali-swatch[aria-pressed="true"],.kanali-align[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--kanali-lime)}
.kanali-window .kanali-check::before{background:#36393e;border:1px solid #5d6268;border-radius:3px;box-shadow:none!important}
.kanali-window .kanali-check[aria-checked="true"]::before{background:var(--kanali-lime);border-color:var(--kanali-lime)}
.kanali-window .kanali-check[aria-checked="true"]::after{background:#20242a}
.kanali-check.is-dim .kanali-text{opacity:.45}
.kanali-font-menu{background:#292d32;color:#eee;box-shadow:0 8px 24px #0008;z-index:40}
.kanali-font-menu button[aria-checked="true"]::before{background:var(--kanali-lime)}
.kanali-title span{border-bottom-color:var(--kanali-lime)}
.kanali-window .kanali-nav button[aria-pressed="true"]{background:#080a0b;color:#fff}
.kanali-window .kanali-nav button[aria-pressed="false"]{color:#202326}
.kanali-window .kanali-hit{border:1px solid #72777d;border-radius:30px}
.kanali-window button:focus-visible{outline:2px solid var(--kanali-lime);outline-offset:3px}
.kanali-note{color:#b3b7bc}
.kanali-dashboard,.kanali-scroll,.kanali-scroll-track{display:none!important}
.giphy-panel{background:#25292e;color:#f0f0ef;box-shadow:0 10px 30px #0009}
.giphy-status,.giphy-credit{color:#d0d4d8}
.giphy-search{background:#15181b;color:white;border-color:#60666d}
.kanali-window .giphy-own{background:var(--kanali-lime);color:#181b1f}
.kanali-window .giphy-close{background:#3b4047;color:white}


@media(max-width:900px){.device{width:min(100%,600px,calc((45svh - 54px) * 1.4941))}}
@media(max-width:560px){
 .top-brand{font-size:11px;gap:8px}.top-brand img{height:18px}.top-replay{font-size:10px;padding:7px 9px;letter-spacing:.04em}
 .kanali-window{padding-top:18px;border-radius:12px}
 .kanali-window .kanali-logo{background:var(--kanali-lime);padding:18px 20px;aspect-ratio:auto;min-height:86px;gap:12px}
 .kanali-logo img{width:46px}.kanali-logo span{font-size:26px}.kanali-logo small{font-size:10px}
 .kanali-window .kanali-nav button{font-size:12px;letter-spacing:0;background:#34383e;color:#eee!important}
 .kanali-window .kanali-nav button[aria-pressed="true"]{background:var(--kanali-lime);color:#181b1f!important}
 .kanali-title{font-size:19px;font-weight:650;white-space:normal;line-height:1.4}.kanali-title span{font-size:13px;margin-left:8px}
 .kanali-window .kanali-power{background:var(--kanali-lime)}
 .kanali-window .kanali-font{background:#34383e;color:#eee}.kanali-font::after{border-color:#eee}
 .kanali-window .kanali-font-menu{background:#25292f}
 .kanali-window.is-dashboard>.kanali-dashboard-page{display:block}
 .eyebrow{font-size:12px}
}

.try h1{text-transform:none}


:root{--kanali-lime:#e2f667;--kanali-surface:#1e2025}
.kanali-window .kanali-enlarge{position:absolute;z-index:6;padding:0;background:transparent;border:0;border-radius:.3cqw;cursor:pointer}
.kanali-window .kanali-enlarge:hover{background:#ffffff1f}
.kanali-live.is-enlarged{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;width:auto;height:auto;max-width:none;max-height:none;margin:0;border:0;padding:36px;color:inherit;background:#090b0ef5;overflow:auto}
.kanali-live.is-enlarged .kanali-window{flex:none;width:min(1400px,calc(100vw - 72px),calc((100svh - 72px) * 1.5))}
.kanali-tab,.kanali-custom{display:none}
.kanali-head{display:contents}.kanali-name{display:none}
.kanali-custom[hidden]{display:none!important}
.giphy-page-title{font-size:2.4cqw;font-weight:700}
@media(min-width:901px){.try-stage{grid-template-columns:minmax(0,1.1fr) minmax(0,1.8fr)}}
/* The KANALI window is the owner's 1200 x 800 PANORAMA screenshot
   (references/kanali-panorama-reference.png, 12 November 2026), shown whole.
   Live controls sit on its own pixels: kanali.js places them in that frame,
   where 1 px is 1/12 cqw. They are transparent while the window looks as the
   screenshot does, and paint only what differs: a ticked box, a moved
   selection, Screen off, the live carousel. */
@media(min-width:561px){
 /* There is no ROTA page (owner, 12 November 2026): the screenshots' ROTA
    row is covered by a patch of the sidebar's own lime, the window's top layer. */
 .kanali-window{aspect-ratio:3/2;border-radius:1cqw;background:linear-gradient(#e3f665,#e3f665) 2.7273% 32.199%/8.333% 4.5% no-repeat,#1e2025 url('se-v2/kanali-window.webp') 0 0/100% 100% no-repeat!important}
 .kanali-window::before{display:none}
 .kanali-window .kanali-logo,.kanali-window .kanali-title,.kanali-window .kanali-heading{display:none}
 .kanali-window .kanali-nav button{background:transparent!important;color:transparent!important;border-radius:1cqw}
 /* Homepage is the owner's Homepage screenshot of the same window
    (references/kanali-homepage-reference.jpg). It predates the support icon in
    the title bar, so that is taken from the PANORAMA screenshot. */
 .kanali-window.is-dashboard{background-image:linear-gradient(#ddf650,#ddf650),url('se-v2/kanali-home.webp')!important;background-position:2.7273% 35.079%,0 0!important}
 .kanali-window.is-dashboard>.kanali-dashboard-page{display:none!important}
 .kanali-window.is-dashboard::before{content:"";display:block;position:absolute;left:83.6667%;top:1.5%;width:3.8333%;height:3%;background:url('se-v2/kanali-window.webp') 87.0017% 1.5464%/2608.6957% auto no-repeat}
 .kanali-window.is-dashboard>button.kanali-enlarge{display:block!important}
 /* The product is PANORAMA SE V2 in the window too (owner, 12 November 2026).
    The screenshot's heading says PANORAMA, so the heading row is set live
    over it, in the screenshot's sizes: 17 px capitals, then the tabs 31 px
    on and 18 px apart, the sparkle taken from the screenshot. */
 .kanali-window .kanali-head{position:absolute;z-index:4;display:flex;align-items:center;padding-left:1cqw;background:#1e2025}
 .kanali-name{display:block;font:700 1.95cqw/1 var(--font-headline);color:#fff;white-space:nowrap;margin-right:2.58cqw}
 .kanali-window .kanali-head .kanali-tab{position:relative;display:block;margin-right:1.5cqw;padding:.4cqw 0;font:400 1.35cqw/1 var(--font-body);color:#f2f2f2;white-space:nowrap}
 .kanali-window .kanali-head .kanali-tab[aria-pressed="true"]{font-weight:700;color:#fff}
 .kanali-window .kanali-head .kanali-tab[aria-pressed="true"]::after{content:"";position:absolute;left:0;bottom:-.25cqw;width:1.25cqw;height:.17cqw;background:#e3f665}
 .kanali-window .kanali-head .kanali-custom-tab::before{content:"";position:absolute;right:-1.42cqw;top:-.42cqw;width:1.33cqw;height:1.33cqw;background:url('se-v2/kanali-window.webp') 55.7432% 9.1837%/7500% auto no-repeat}
 /* The sidebar's PANORAMA becomes PANORAMA SE V2 the same way. */
 .kanali-window .kanali-nav button[data-page="panorama"] .kanali-text{position:absolute;left:20%;top:28.57%;width:78.33%;height:39.29%;overflow:hidden;clip-path:none;display:flex;align-items:center;padding-left:.25cqw;box-sizing:border-box;background:#000;color:#fff;font:500 1.25cqw/1 var(--font-headline)}
 .kanali-window.is-dashboard .kanali-nav button[data-page="panorama"] .kanali-text{background:#ddf650;color:#111}
 /* The Homepage screenshot sets its sidebar rows 22 px lower. */
 .kanali-window.is-dashboard .kanali-nav button[data-page="dashboard"]{top:15.75%!important}
 .kanali-window.is-dashboard .kanali-nav button[data-page="panorama"]{top:24%!important}
 .kanali-window.is-giphy .kanali-nav button[data-page="panorama"] .kanali-text{display:none}
 /* Carousel: the centre card is 532 x 340 px; the next pair are 90.6 % of it,
    127 px out, the outer pair 82.6 %, 190 px out (kanali.js SLOTS). */
 .kanali-window .kanali-carousel{background:#1e2025;perspective:none}
 .kanali-window .kanali-cards{left:19.07%;top:7.25%;width:61.86%;height:85%;transform-style:flat}
 .kanali-window .kanali-card{border-radius:1cqw;box-shadow:none;background:#0a0b0d}
 .kanali-window .kanali-card.is-active{box-shadow:none}
 .kanali-window .kanali-card span{opacity:1;left:1.88%;top:3.53%;gap:.75cqw;font:600 1.125cqw/1 var(--font-body);color:#ececec;text-shadow:0 0 .2cqw #0006}
 .kanali-window .kanali-card span::before{width:1.92cqw;height:1.92cqw;border:.125cqw solid #f5f5f5;background:transparent;box-sizing:border-box}
 .kanali-window .kanali-arrow{background:url('se-v2/kanali-window.webp') 28.6458% 40.4255%/2500% auto no-repeat}
 .kanali-window .kanali-arrow[data-step="1"]{background-position:95.6597% 40.4255%}
 .kanali-window .kanali-arrow::after{display:none}
 .kanali-window .kanali-arrow:hover{background-color:transparent;filter:brightness(.9)}
 .kanali-window .kanali-power{padding:0 .25cqw 0 .55cqw;border-radius:.33cqw;font:800 .92cqw var(--font-body)}
 .kanali-window .kanali-power::before{display:none}
 .kanali-window .kanali-power[aria-pressed="true"]{background:transparent;color:transparent}
 .kanali-window .kanali-power[aria-pressed="true"] i{visibility:hidden}
 .kanali-window .kanali-power[aria-pressed="false"]{background:#41454a;color:#ddd}
 .kanali-window .kanali-power i{width:1.33cqw;height:1.33cqw;border-radius:.25cqw}
 .kanali-window .kanali-hit{background:transparent;border:0;border-radius:1.5cqw;color:transparent}
 .kanali-window .kanali-hit:hover{background:#ffffff10}
 .kanali-window .kanali-swatch{border-radius:.17cqw;background:#0f1012;box-shadow:inset 0 0 0 .083cqw #44464a,inset 0 0 0 .167cqw #313235}
 .kanali-window .kanali-swatch[data-colour="white"]{background:#8f9092}
 .kanali-window .kanali-swatch[aria-pressed="true"]{box-shadow:inset 0 0 0 .083cqw #818b45,inset 0 0 0 .167cqw #313235}
 .kanali-window .kanali-swatch::after{display:none}
 .kanali-window .kanali-align{border-radius:.17cqw;background:#27292e var(--icon) 0 0/100% 100% no-repeat;box-shadow:none}
 .kanali-window .kanali-align[aria-pressed="true"]{background-color:#333539}
 .kanali-window .kanali-align::after{display:none}
 .kanali-align[data-align="left"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234a4c50' d='M2 2h2v12H2z'/%3E%3Cpath fill='%238f9092' d='M4.5 5h8v1.4h-8zM4.5 9h5v1.4h-5z'/%3E%3C/svg%3E")}
 .kanali-align[data-align="center"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234a4c50' d='M7 2h2v12H7z'/%3E%3Cpath fill='%238f9092' d='M4 5h8v1.4H4zM5 9h6v1.4H5z'/%3E%3C/svg%3E")}
 .kanali-align[data-align="right"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234a4c50' d='M13 2h2v12h-2z'/%3E%3Cpath fill='%238f9092' d='M5 5h8v1.4H5zM8 9h5v1.4H8z'/%3E%3C/svg%3E")}
 .kanali-window .kanali-font{background:transparent;color:transparent;border-radius:.33cqw}
 .kanali-window .kanali-font:hover{background:#ffffff0d}
 .kanali-window .kanali-font::after,.kanali-window .kanali-font::before,.kanali-window .kanali-font[aria-expanded="true"]::after,.kanali-window .kanali-font[aria-expanded="true"]::before{display:none}
 .kanali-window .kanali-font-menu{height:auto!important;padding:.5cqw;border-radius:.5cqw;background:#2a2c31}
 .kanali-window .kanali-font-menu button{font-size:1.1cqw;color:#eee}
 .kanali-window .kanali-font-menu button[aria-checked="true"]{background:#3a3d42}
 .kanali-window .kanali-check::before,.kanali-window .kanali-check::after{left:0;top:calc(50% - .75cqw);width:1.5cqw;height:1.5cqw}
 .kanali-window .kanali-check::before{background:transparent;border:0;border-radius:.25cqw;box-shadow:none!important}
 .kanali-window .kanali-check[aria-checked="true"]::before{background:#e3f665}
 /* Ticked and dimmed as in KANALI's own Preset screenshot (portal
    kanali-ui-preset.jpg): a lime box with a dark tick; past three, the rest grey out. */
 .kanali-window .kanali-check[aria-checked="true"]::after{background:#111214;-webkit-mask:var(--tick) 0 0/100% 100%;mask:var(--tick) 0 0/100% 100%;--tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.3 9.2 7.3 12.3 13.8 4.6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
 .kanali-window .kanali-check.is-dim[aria-checked="false"]::after{left:0;top:0;width:100%;height:100%;background:#1e2025a6;-webkit-mask:none;mask:none}
 .kanali-window .kanali-save{background:transparent;color:transparent;border-radius:1.75cqw;font:600 1.17cqw var(--font-body);opacity:1!important}
 .kanali-window .kanali-save:hover{filter:none;background:#0000001a}
 .kanali-window .kanali-save.is-pressed{animation:kanali-press .35s ease-out}
 @keyframes kanali-press{0%{background:#00000033}}
 .kanali-window .kanali-limit{border-radius:.33cqw}
 .kanali-window.is-custom .kanali-carousel,.kanali-window.is-custom .kanali-checks,.kanali-window.is-custom .kanali-tools,.kanali-window.is-custom .kanali-limit,.kanali-window.is-custom .kanali-save{visibility:hidden}
 .kanali-custom{display:block;position:absolute;left:25.833%;top:15.75%;width:74.167%;height:84.25%;background:#1e2025;padding:2cqw 0}
 .kanali-custom-top{display:flex;justify-content:space-between;align-items:center;width:62%;font-size:1.4cqw}
 .kanali-custom-top strong::before{content:"";display:inline-block;width:1.2cqw;height:1.2cqw;border:3px solid var(--kanali-lime);border-radius:50%;margin-right:.8cqw;vertical-align:middle}
 .kanali-custom-top span{color:#9da1a5;font-size:1.1cqw}
 .kanali-custom-preview{width:62%;aspect-ratio:2/1;margin-top:1.5cqw;border-radius:1cqw;overflow:hidden}
 .kanali-custom-preview img{width:100%;height:100%;object-fit:cover}
 .kanali-custom p{margin-top:2.5cqw;font-size:1.2cqw;font-weight:600}
 .kanali-window .kanali-upload{position:relative;display:block;width:62%;height:8cqw;margin-top:1.5cqw;background:#e2f66706;border:1px dashed #bdce5c;border-radius:.9cqw;font-size:1.2cqw}
 .kanali-window.is-dashboard>.kanali-dashboard-page{left:23.333%;width:76.667%;background:#1e2025}
 .kanali-window.is-giphy .giphy-panel{left:8.333%;top:0;width:91.667%;height:100%;padding:6.5cqw 2.5cqw 2cqw;border-radius:0;background:#1e2025;gap:1.5cqw}
 .kanali-window.is-giphy::after{content:"";position:absolute;inset:0 auto 0 0;width:8.333%;background:#e3f665;z-index:29}
 .kanali-window.is-giphy .kanali-logo{display:block;position:absolute;z-index:31;left:1.583%;top:4.25%;width:5.167%;height:4.5%;background:url('se-v2/kanali-window.webp') 3.515% 4.45%/1935.48% auto no-repeat}
 .kanali-window .giphy-panel{z-index:30}
 .giphy-page-title{padding:0 0 1.5cqw 4cqw;margin:0 0 .5cqw}
 .giphy-head{margin:0 6cqw}.giphy-search{height:3.7cqw;border-radius:3cqw;border:0;background:#3a3d40;font-size:1.2cqw;padding:0 2cqw}
 .giphy-search:focus{border-color:var(--kanali-lime);box-shadow:0 0 0 .1cqw var(--kanali-lime)}
 .kanali-window .giphy-close{position:absolute;left:2.5cqw;top:6.5cqw;width:2.8cqw;height:2.8cqw;background:none;border:1px solid #777;color:white}
 .giphy-status{font-size:1.2cqw}
 .giphy-results{flex:1;grid-auto-rows:8cqw}
 .kanali-window .giphy-own{font-size:1.1cqw;padding:.7cqw 1.4cqw}
 .giphy-credit{font-size:.9cqw}
 .kanali-window.is-giphy .kanali-nav button{z-index:31;left:1.65%!important;width:5%!important;height:7%!important}
 .kanali-window.is-giphy .kanali-nav button[data-page="dashboard"]{top:20%!important}
 .kanali-window.is-giphy .kanali-nav button[data-page="panorama"]{top:30%!important;background:black!important;border-radius:.9cqw}
 .kanali-window.is-giphy .kanali-nav button::before{content:"";position:absolute;left:25%;top:25%;width:50%;height:50%;background:#202329;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M3 14 16 3 29 14v15H3Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
 .kanali-window.is-giphy .kanali-nav button[data-page="panorama"]::before{background:white;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m16 3 13 6v16l-13 6L3 25V9Z M3 9l13 6 13-6 M3 9h26' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
}
@media(max-width:560px){
 .kanali-window .kanali-enlarge{display:none}
 .kanali-window .kanali-logo{display:block;min-height:0;height:auto;aspect-ratio:280/102;padding:0;background:var(--kanali-lime) url('se-v2/kanali-window.webp') 0 0/428.571% auto no-repeat}
 .kanali-window .kanali-custom-tab{display:block;position:relative;inset:auto;grid-column:1;grid-row:5;font-size:13px;padding:8px 0;text-align:left}
 .kanali-window .kanali-custom-tab[aria-pressed="true"]{color:var(--kanali-lime)}
 .kanali-window .kanali-power{grid-column:2;grid-row:5}
 .kanali-window .kanali-custom{position:relative;grid-column:1/-1;grid-row:6;display:block}
 .kanali-custom-top{display:flex;justify-content:space-between;margin:10px 0;font-size:14px}
 .kanali-custom-preview{aspect-ratio:2/1;overflow:hidden;border-radius:8px}.kanali-custom-preview img{width:100%;height:100%;object-fit:cover}
 .kanali-custom p{font-size:14px;margin:16px 0}
 .kanali-window .kanali-upload{position:relative;width:100%;padding:20px;border:1px dashed var(--kanali-lime);border-radius:8px;font-size:14px;margin-bottom:8px}
 .kanali-window.is-custom .kanali-hit{grid-row:7}
 .kanali-window.is-custom .giphy-panel{grid-row:8}
 .giphy-page-title{font-size:20px}
}
/* Homepage: KANALI's own dashboard (portal assets/lineup/img/kanali-ui-home.jpg),
   measured on its 1400 x 933 frame, where 1cqw = 14 px. Values are that
   screenshot's demo values, never read from the visitor's machine. */
.kanali-dashboard-page{color:#f2f3f3;font-family:var(--font-body)}
.kanali-dashboard-page h2{margin:0;font-family:var(--font-headline);font-weight:700}
.kanali-dashboard-tabs{display:flex;gap:2.4em;align-items:baseline}
.kanali-dashboard-tabs b{position:relative;font-weight:800}
.kanali-dashboard-tabs b::after{content:"";position:absolute;left:0;bottom:-.55em;width:1em;height:.18em;border-radius:.1em;background:var(--kanali-lime)}
.kanali-dashboard-tabs span{font-weight:500;color:#e6e8e9}
.kanali-dashboard-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.kanali-dashboard-metrics section{position:relative;min-width:0;border:1px solid #3d4045;background:#1f2126}
.kanali-dashboard-metrics .kanali-network{grid-row:span 2}
.kanali-dashboard-metrics h3{margin:0;font-weight:800}
.kanali-dashboard-metrics strong{display:block;font-family:var(--font-headline);font-weight:800;line-height:1}
.kanali-dashboard-metrics p{margin:0;color:#9a9da1}
.kanali-dashboard-metrics small{display:flex;align-items:center;color:#f2f3f3}
.kanali-dashboard-metrics small i,.kanali-network p i{display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.kanali-thermo{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M5.5 14.5V4a2.5 2.5 0 0 1 5 0v10.5a4.5 4.5 0 1 1-5 0Z M8 9v8' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='18' r='1.8'/%3E%3C/svg%3E")}
.kanali-ram{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 3h20v11H2Z M4 14v3h16v-3 M6 6h3v5H6Z M11 6h2v5h-2Z M15 6h3v5h-3Z M7 17v-2M10 17v-2M13 17v-2M16 17v-2' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E")}
.kanali-hdd{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M6 2h12l4 12v4H2v-4Z M2 14h20' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")}
.kanali-arrow-down,.kanali-arrow-up{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M10 2v20M2 14l8 8 8-8' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E")}
.kanali-arrow-down{color:#6fd06d}.kanali-arrow-up{color:#5068ec;transform:scaleY(-1)}
.kanali-network p{display:flex;align-items:baseline;color:#f2f3f3;margin:0}
.kanali-network p b{font-weight:700;margin-left:.3em}.kanali-network p small{display:inline;color:#c5c8cb;font-size:.72em;margin-left:.35em}
.kanali-wave{display:block;fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.kanali-wave path{vector-effect:non-scaling-stroke}
.kanali-down{stroke:#6fd06d}.kanali-down .kanali-wave-fill{fill:url(#kanali-wave-green);stroke:none}
.kanali-up{stroke:#5068ec}.kanali-up .kanali-wave-fill{fill:url(#kanali-wave-blue);stroke:none}
.kanali-wave-fill{fill:currentColor;opacity:.35;stroke:none}
.kanali-down .kanali-wave-fill{fill:#6fd06d}.kanali-up .kanali-wave-fill{fill:#5068ec}
.kanali-wave-fill{-webkit-mask:linear-gradient(#000,transparent 85%);mask:linear-gradient(#000,transparent 85%)}
.kanali-gauge{display:block;overflow:visible}
.kanali-gauge-glow{fill:#e2f667;opacity:.07}
.kanali-gauge-track,.kanali-gauge-value{fill:none;stroke-width:7;stroke-linecap:round}
.kanali-gauge-track{stroke:#34373c}
.kanali-gauge-value{stroke:var(--kanali-lime)}
.kanali-gauge g{fill:var(--kanali-lime)}
.kanali-meter{background:#303338;overflow:hidden}
.kanali-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3f4527,var(--kanali-lime))}
.kanali-disk .kanali-meter i{background:linear-gradient(90deg,#3f4527,var(--kanali-lime) 45%,#f08a50)}
.kanali-dashboard-demo{color:#8d9196}
@media(min-width:561px){
 .kanali-window.is-dashboard>.kanali-dashboard-page{top:6.25%;height:93.75%;padding:0}
 .kanali-dashboard-page>*{position:absolute}
 .kanali-dashboard-page h2{left:2.5cqw;top:2cqw;font-size:2.1cqw;line-height:1}
 .kanali-dashboard-page h2::after{content:"";position:absolute;left:0;top:4.5cqw;width:71.6cqw;height:1px;background:#33363b}
 .kanali-dashboard-tabs{left:2.5cqw;top:9.4cqw;font-size:1.15cqw;line-height:1}
 .kanali-dashboard-tabs::after{content:"";position:absolute;left:0;top:5.4cqw;width:71.6cqw;height:1px;background:#33363b}
 .kanali-dashboard-metrics{left:2.5cqw;top:18.3cqw;width:71.6cqw;height:41.4cqw;column-gap:1.4cqw;row-gap:1.5cqw}
 .kanali-dashboard-metrics section{border-radius:.85cqw}
 .kanali-dashboard-metrics section>*{position:absolute}
 .kanali-dashboard-metrics strong{left:1.75cqw;top:1.75cqw;font-size:3.2cqw}
 .kanali-dashboard-metrics p{left:1.75cqw;top:6cqw;font-size:1.3cqw}
 .kanali-dashboard-metrics small{left:1.75cqw;bottom:1.7cqw;font-size:1.2cqw;gap:.75cqw}
 .kanali-dashboard-metrics small i{width:1.15cqw;height:1.35cqw}
 .kanali-gauge{left:4.7cqw;top:8.1cqw;width:13.6cqw;height:auto}
 .kanali-meter{left:1.75cqw;right:1.6cqw;top:11.1cqw;height:2.2cqw;border-radius:.45cqw}
 .kanali-network h3{left:1.7cqw;top:1.9cqw;font-size:1.45cqw;line-height:1}
 .kanali-network .kanali-down{left:1.7cqw;top:9.15cqw;width:19.4cqw;height:10cqw}
 .kanali-network .kanali-up{left:1.7cqw;top:29.1cqw;width:19.4cqw;height:7.9cqw}
 .kanali-network p{left:1.7cqw;font-size:1.2cqw;gap:.55cqw;line-height:1}
 .kanali-network p i{width:1cqw;height:1.25cqw;align-self:center}
 .kanali-network p:nth-of-type(1){top:20.5cqw}.kanali-network p:nth-of-type(2){top:38.7cqw}
 .kanali-dashboard-demo{left:2.5cqw;bottom:1.3cqw;font-size:.9cqw;margin:0}
}
@media(max-width:560px){
 .kanali-dashboard-page{padding:12px 0}
 .kanali-dashboard-page h2{font-size:22px;margin:8px 0 18px}
 .kanali-dashboard-tabs{font-size:14px;padding:4px 0 18px}
 .kanali-dashboard-metrics{grid-template-columns:1fr 1fr;gap:10px}
 .kanali-dashboard-metrics section{padding:14px;border-radius:10px;display:flex;flex-direction:column;gap:8px}
 .kanali-dashboard-metrics .kanali-network{grid-row:auto;grid-column:1/-1}
 .kanali-dashboard-metrics h3{font-size:16px}
 .kanali-dashboard-metrics strong{font-size:28px}
 .kanali-dashboard-metrics p{font-size:13px}
 .kanali-dashboard-metrics small{font-size:13px;gap:6px}.kanali-dashboard-metrics small i{width:12px;height:15px}
 .kanali-network .kanali-wave{width:100%;height:56px}
 .kanali-network p{font-size:13px;gap:6px}.kanali-network p i{width:10px;height:13px;align-self:center}
 .kanali-gauge{width:100%;max-width:150px;margin:0 auto}
 .kanali-meter{height:14px;border-radius:5px;margin:14px 0 4px}
 .kanali-dashboard-demo{font-size:12px;margin:12px 0}
}