/* Graphics kit: the look for every project. Publish or copy this file, never edit a copy.
Decided 2026-09-27: Plus Jakarta Sans (SF for native), 22px + squircle corners, smooth/snappy motion,
Phosphor bold + fill icons, colour from the project's chosen palette (Palette Lab).
Needs in :
Colour roles (set by KitTheme.apply or by hand): --b1 main, --b2 second, --b3 pop, --m1 wash, --m2 soft, --m3 deep,
and readable text on them: --on1 --on2 --on3 --onm2 --onm3. */
:root{
--k-font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
--k-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
--k-r-sm:12px;--k-r:22px;--k-r-lg:30px;
--k-smooth:cubic-bezier(.22,1,.36,1);--k-snappy:cubic-bezier(.2,.9,.1,1);
/* default palette: Lagoon */
--b1:#1A7CF5;--b2:#19C2DC;--b3:#A6E23A;--m1:#CFE3E6;--m2:#9DB4BF;--m3:#6E7F88;
--on1:#FFFFFF;--on2:#151823;--on3:#151823;--onm2:#151823;--onm3:#FFFFFF;
/* neutrals, light */
--bg:color-mix(in oklab,var(--m1) 28%,#F4F5F8);--surface:#FFFFFF;--sunk:color-mix(in oklab,var(--m1) 30%,#ECEEF3);
--ink:#151823;--muted:#626879;--line:rgba(21,24,35,.09);
--shadow:0 1px 2px rgba(21,24,35,.05),0 12px 30px -14px rgba(21,24,35,.22);
--shadow-lg:0 2px 6px rgba(21,24,35,.06),0 28px 56px -20px rgba(21,24,35,.36);
--glass:rgba(255,255,255,.55);--glass-line:rgba(255,255,255,.7);
--neu-hi:#FFFFFF;--neu-lo:rgba(40,48,80,.18);
--ok:#16A864;--bad:#E8414F;--warn:#E9A23B;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
color-scheme:dark;--bg:color-mix(in oklab,var(--m3) 12%,#0E1016);--surface:#181B24;--sunk:#222632;
--ink:#F1F2F7;--muted:#A0A5B6;--line:rgba(255,255,255,.08);
--shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.7);--shadow-lg:0 2px 6px rgba(0,0,0,.35),0 28px 56px -20px rgba(0,0,0,.85);
--glass:rgba(28,31,42,.55);--glass-line:rgba(255,255,255,.1);--neu-hi:rgba(255,255,255,.06);--neu-lo:rgba(0,0,0,.55);
}}
:root[data-theme="dark"],.k-dark{
color-scheme:dark;--bg:color-mix(in oklab,var(--m3) 12%,#0E1016);--surface:#181B24;--sunk:#222632;
--ink:#F1F2F7;--muted:#A0A5B6;--line:rgba(255,255,255,.08);
--shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.7);--shadow-lg:0 2px 6px rgba(0,0,0,.35),0 28px 56px -20px rgba(0,0,0,.85);
--glass:rgba(28,31,42,.55);--glass-line:rgba(255,255,255,.1);--neu-hi:rgba(255,255,255,.06);--neu-lo:rgba(0,0,0,.55);
}
.k-light{
color-scheme:light;--bg:color-mix(in oklab,var(--m1) 28%,#F4F5F8);--surface:#FFFFFF;--sunk:color-mix(in oklab,var(--m1) 30%,#ECEEF3);
--ink:#151823;--muted:#626879;--line:rgba(21,24,35,.09);
--shadow:0 1px 2px rgba(21,24,35,.05),0 12px 30px -14px rgba(21,24,35,.22);--shadow-lg:0 2px 6px rgba(21,24,35,.06),0 28px 56px -20px rgba(21,24,35,.36);
--glass:rgba(255,255,255,.55);--glass-line:rgba(255,255,255,.7);--neu-hi:#FFFFFF;--neu-lo:rgba(40,48,80,.18);
}
/* ---------- base ---------- */
body:has(.k-page){background:var(--bg)}
.k-page{min-height:100vh}
.k-page{background:var(--bg);color:var(--ink);font-family:var(--k-font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background-color .5s var(--k-smooth),color .3s}
.k-page *,.k-page *::before,.k-page *::after{box-sizing:border-box}
.k-page [hidden]{display:none!important}
:where(.k-page) :where(button,input,select,textarea){font:inherit;color:inherit}
.k-page :focus-visible{outline:2.5px solid var(--b1);outline-offset:2px;border-radius:10px}
.k-icon{width:1em;height:1em;display:block;flex:none}
/* ---------- type ---------- */
.k-display{font-size:clamp(34px,6vw,56px);line-height:1.02;font-weight:800;letter-spacing:-.03em;text-wrap:balance;margin:0}
.k-h1{font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.02em;text-wrap:balance;margin:0}
.k-h2{font-size:22px;line-height:1.2;font-weight:800;letter-spacing:-.015em;margin:0}
.k-h3{font-size:17px;line-height:1.3;font-weight:700;margin:0}
.k-body{font-size:15px;line-height:1.5;margin:0}
.k-small{font-size:13px;line-height:1.4;color:var(--muted);margin:0}
.k-label{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.k-num{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.02em}
.k-mono{font-family:var(--k-mono)}
/* ---------- shape ---------- */
.k-squircle{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C88 0 100 12 100 50S88 100 50 100 0 88 0 50 12 0 50 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C88 0 100 12 100 50S88 100 50 100 0 88 0 50 12 0 50 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.k-blob{border-radius:42% 58% 63% 37%/41% 44% 56% 59%;animation:k-morph 8s ease-in-out infinite}
@keyframes k-morph{0%,100%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%}33%{border-radius:63% 37% 44% 56%/55% 62% 38% 45%}66%{border-radius:38% 62% 52% 48%/63% 38% 62% 37%}}
.k-appicon{width:52px;height:52px;display:grid;place-items:center;font-size:28px}
/* ---------- surfaces (pick by role) ----------
card = default container · glass = floats over content (nav, sheets) · mesh = hero · glow = selectable
neu = decorative tiles only: its edges fail the 3:1 contrast rule, never use it for controls */
.k-card{background:var(--surface);border-radius:var(--k-r);box-shadow:var(--shadow);padding:16px}
.k-card.k-lift{transition:transform .35s var(--k-smooth),box-shadow .35s var(--k-smooth)}
.k-card.k-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.k-glass{background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);box-shadow:0 12px 30px -14px rgba(0,0,0,.3)}
.k-mesh{color:#fff;background:radial-gradient(at 18% 22%,var(--b2) 0,transparent 55%),radial-gradient(at 85% 25%,var(--b3) 0,transparent 50%),radial-gradient(at 60% 100%,var(--m2) 0,transparent 60%),var(--b1);background-size:170% 170%;animation:k-mesh 10s ease-in-out infinite alternate}
@keyframes k-mesh{to{background-position:100% 100%}}
.k-glow{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--k-r);transition:border-color .25s,box-shadow .35s var(--k-smooth),transform .35s var(--k-smooth)}
.k-glow:hover,.k-glow[aria-pressed="true"],.k-glow.is-on{border-color:var(--b1);box-shadow:0 0 0 5px color-mix(in oklab,var(--b1) 16%,transparent),0 12px 34px -12px color-mix(in oklab,var(--b1) 55%,transparent)}
.k-neu{background:var(--bg);border-radius:var(--k-r);box-shadow:9px 9px 20px var(--neu-lo),-9px -9px 20px var(--neu-hi)}
.k-tint{background:color-mix(in oklab,var(--b1) 14%,var(--surface));border-radius:var(--k-r)}
.k-grain{position:relative;isolation:isolate}
.k-grain::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay;opacity:.75}
/* ---------- backgrounds (one moving background per screen) ---------- */
.k-bg-mesh{background:radial-gradient(at 15% 20%,var(--b2) 0,transparent 50%),radial-gradient(at 80% 15%,var(--b1) 0,transparent 50%),radial-gradient(at 70% 85%,var(--b3) 0,transparent 55%),radial-gradient(at 20% 90%,var(--m2) 0,transparent 55%),var(--b1);background-size:180% 180%;animation:k-mesh 9s ease-in-out infinite alternate}
.k-bg-blobs{position:relative;overflow:hidden;isolation:isolate}
.k-bg-blobs::before,.k-bg-blobs::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(40px);opacity:.55}
.k-bg-blobs::before{width:60%;aspect-ratio:1;left:-15%;top:-25%;background:var(--b1);animation:k-roam1 14s ease-in-out infinite}
.k-bg-blobs::after{width:50%;aspect-ratio:1;right:-12%;bottom:-20%;background:var(--b2);animation:k-roam2 16s ease-in-out infinite}
@keyframes k-roam1{50%{transform:translate(30%,20%) scale(1.1)}}
@keyframes k-roam2{50%{transform:translate(-25%,-15%) scale(.9)}}
.k-bg-dots{position:relative;isolation:isolate}
.k-bg-dots::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--muted) 1.1px,transparent 1.5px);background-size:16px 16px;opacity:.28}
.k-bg-dots::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--b1) 1.8px,transparent 2.2px);background-size:16px 16px;-webkit-mask:radial-gradient(circle 90px at var(--k-x,50%) var(--k-y,40%),#000,transparent);mask:radial-gradient(circle 90px at var(--k-x,50%) var(--k-y,40%),#000,transparent)}
/* ---------- buttons ---------- */
.k-btn{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:99px;font-weight:800;font-size:15px;line-height:1.2;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);text-decoration:none;white-space:nowrap;transition:transform .18s var(--k-snappy),background-color .25s,color .25s,box-shadow .25s}
.k-btn:active{transform:scale(.95)}
.k-btn .k-icon{font-size:18px}
.k-btn--primary{background:var(--b1);color:var(--on1)}
.k-btn--ink{background:var(--ink);color:var(--surface)}
.k-btn--soft{background:color-mix(in oklab,var(--b1) 14%,var(--surface));color:color-mix(in oklab,var(--b1) 70%,var(--ink));box-shadow:none}
.k-btn--ghost{background:transparent;box-shadow:none}
.k-btn--block{width:100%}
.k-btn--icon{padding:0;width:44px;height:44px}
.k-btn--sm{padding:8px 14px;font-size:13.5px}
/* arrow slide: */
.k-btn--slide{padding-right:8px;transition:transform .18s var(--k-snappy),padding .35s var(--k-smooth)}
.k-btn__circ{width:32px;height:32px;border-radius:50%;background:var(--b3);color:var(--on3);display:grid;place-items:center;transition:transform .35s var(--k-smooth)}
.k-btn--slide:hover{padding-left:26px;padding-right:6px}
.k-btn--slide:hover .k-btn__circ{transform:translateX(3px) rotate(-45deg)}
/* 3D press, for games */
.k-btn--3d{background:var(--b3);color:var(--on3);box-shadow:0 6px 0 color-mix(in oklab,var(--b3) 60%,#000);transform:translateY(-3px);transition:transform .08s,box-shadow .08s}
.k-btn--3d:active{transform:translateY(3px);box-shadow:0 0 0 color-mix(in oklab,var(--b3) 60%,#000)}
/* liquid fill: add class m-liquid (motion-kit) to a .k-btn--outline */
.k-btn--outline{background:var(--surface);box-shadow:inset 0 0 0 2px var(--b1)}
/* ---------- inputs + controls ---------- */
.k-field{display:flex;flex-direction:column;gap:6px}
.k-input{width:100%;border:2px solid transparent;background:var(--sunk);border-radius:16px;padding:12px 14px;font-weight:600;transition:border-color .2s,background-color .2s}
.k-input:focus{outline:none;border-color:var(--b1);background:var(--surface)}
.k-input::placeholder{color:var(--muted);font-weight:500}
.k-search{position:relative}
.k-search .k-icon{position:absolute;left:14px;top:50%;margin-top:-9px;font-size:18px;color:var(--muted)}
.k-search .k-input{padding-left:42px;border-radius:99px}
.k-switch{appearance:none;-webkit-appearance:none;margin:0;width:51px;height:31px;border-radius:99px;background:color-mix(in oklab,var(--muted) 30%,var(--sunk));position:relative;cursor:pointer;flex:none;transition:background-color .22s}
.k-switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:99px;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.2),0 1px 1px rgba(0,0,0,.1);transition:transform .22s var(--k-snappy),width .18s var(--k-snappy)}
.k-switch:checked{background:var(--b1)}
.k-switch:checked::after{transform:translateX(20px)}
.k-switch:active::after{width:32px}
.k-switch:checked:active::after{transform:translateX(15px)}
.k-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border-radius:13px;background:var(--sunk)}
.k-seg button{position:relative;z-index:1;border:0;background:none;padding:8px 10px;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted);transition:color .2s}
.k-seg button[aria-pressed="true"]{color:var(--ink)}
.k-seg__ind{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/var(--n,3));border-radius:10px;background:var(--surface);box-shadow:0 3px 8px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.05);transform:translateX(calc(var(--i,0)*100%));transition:transform .28s var(--k-snappy)}
.k-slider{--v:50;position:relative;padding-top:36px}
.k-slider__bubble{position:absolute;top:0;left:calc(var(--v)*1% + (12px - var(--v)*.24px));transform:translateX(-50%) scale(.85);transform-origin:50% 100%;background:var(--ink);color:var(--surface);font-weight:800;font-size:13px;padding:4px 10px;border-radius:99px;transition:transform .2s var(--k-snappy);font-variant-numeric:tabular-nums;white-space:nowrap}
.k-slider__bubble::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;margin-left:-4px;background:inherit;rotate:45deg;border-radius:2px}
.k-slider:active .k-slider__bubble,.k-slider:focus-within .k-slider__bubble{transform:translateX(-50%) scale(1.05)}
.k-slider input{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:99px;margin:0;background:linear-gradient(90deg,var(--b1) calc(var(--v)*1%),var(--sunk) 0)}
.k-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.28);cursor:grab}
.k-slider input::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.k-chips{display:flex;flex-wrap:wrap;gap:8px}
.k-chip{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:0;padding:8px 14px;border-radius:99px;background:var(--surface);box-shadow:var(--shadow);font-weight:700;font-size:13.5px;transition:background-color .2s,color .2s,gap .22s var(--k-snappy),transform .18s var(--k-snappy)}
.k-chip:active{transform:scale(.94)}
.k-chip .k-icon{width:0;font-size:15px;transition:width .22s var(--k-snappy)}
.k-chip[aria-pressed="true"]{background:var(--b1);color:var(--on1);gap:5px}
.k-chip[aria-pressed="true"] .k-icon{width:15px}
.k-stars{display:inline-flex;gap:3px}
.k-stars button{border:0;background:none;padding:0;cursor:pointer;font-size:28px;color:var(--sunk);transition:color .15s,transform .2s var(--k-snappy)}
.k-stars button:hover{transform:scale(1.12)}
.k-stars button.is-hov,.k-stars button.is-on{color:var(--b3)}
.k-stars button.is-pop{animation:k-pop .35s var(--k-smooth) both}
@keyframes k-pop{from{transform:scale(.5)}}
/* ---------- lists + nav (iOS style) ---------- */
.k-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0 10px}
.k-nav__title{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.k-list{background:var(--surface);border-radius:var(--k-r);box-shadow:var(--shadow);overflow:hidden}
.k-row{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:54px;position:relative}
.k-row+.k-row::before{content:"";position:absolute;top:0;left:60px;right:0;height:1px;background:var(--line)}
.k-row__icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:18px;flex:none;background:var(--b1);color:var(--on1)}
.k-row__main{flex:1;min-width:0;display:flex;flex-direction:column}
.k-row__main b{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-row__main small{font-size:13px;color:var(--muted)}
.k-row__end{color:var(--muted);font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.k-avatar{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;background:var(--b2);color:var(--on2)}
.k-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--bad);color:#fff;font-size:11.5px;font-weight:800}
/* ---------- micro graphics ---------- */
.k-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:99px;background:var(--surface);box-shadow:var(--shadow);font-weight:800;font-size:13px}
.k-pill i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--c,var(--b3))}
.k-pill.is-live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:k-ripple 1.8s var(--k-smooth) infinite}
@keyframes k-ripple{to{transform:scale(3.4);opacity:0}}
.k-sticker{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:99px;border:4px solid #fff;background:var(--b3);color:var(--on3);font-weight:800;font-size:14px;box-shadow:0 6px 14px -4px rgba(0,0,0,.3);rotate:-6deg;transition:rotate .3s var(--k-smooth),scale .3s var(--k-smooth)}
.k-sticker:hover{rotate:0deg;scale:1.06}
.k-mascot{position:relative;width:64px;height:64px;display:grid;place-items:center;flex:none}
.k-mascot::before{content:"";position:absolute;inset:0;background:var(--k-c,var(--b2));border-radius:42% 58% 63% 37%/41% 44% 56% 59%;animation:k-morph 6s ease-in-out infinite}
.k-mascot__eyes{position:relative;display:flex;gap:22%;width:40%;justify-content:center;margin-top:-8%;transform:translate(var(--ex,0),var(--ey,0));transition:transform .2s}
.k-mascot__eyes i{width:12%;min-width:6px;aspect-ratio:.7;border-radius:9px;background:#151823;animation:k-blink 4s infinite}
@keyframes k-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
/* ---------- components ---------- */
/* floating tab bar */
.k-tabbar{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:6px;border-radius:26px}
.k-tabbar__ind{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/var(--n,4));border-radius:20px;background:color-mix(in oklab,var(--b1) 16%,transparent);transform:translateX(calc(var(--i,0)*100%));transition:transform .3s var(--k-snappy)}
.k-tabbar button{position:relative;z-index:1;border:0;background:none;cursor:pointer;padding:8px 0 6px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:10.5px;font-weight:800;transition:color .2s}
.k-tabbar button .k-icon{font-size:23px}
.k-tabbar button .is-fill{display:none}
.k-tabbar button[aria-pressed="true"]{color:var(--b1)}
.k-tabbar button[aria-pressed="true"] .is-fill{display:block}
.k-tabbar button[aria-pressed="true"] .is-line{display:none}
/* dynamic island */
.k-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:5;width:96px;height:28px;border-radius:99px;background:#0A0A0F;color:#fff;border:0;padding:0;cursor:pointer;overflow:hidden;transition:width .4s var(--k-smooth),height .4s var(--k-smooth),border-radius .4s var(--k-smooth)}
.k-island__in{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;height:100%;opacity:0;transition:opacity .15s}
.k-island.is-open{width:min(88%,300px);height:64px;border-radius:30px}
.k-island.is-open .k-island__in{opacity:1;transition-delay:.15s}
/* bottom sheet (inside a positioned container, e.g. .k-phone) */
.k-sheet-scrim{position:absolute;inset:0;z-index:20;background:rgba(10,8,20,.38);opacity:0;pointer-events:none;transition:opacity .3s}
.k-sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;max-height:85%;overflow:auto;background:var(--surface);border-radius:28px 28px 0 0;padding:8px 18px calc(22px + env(safe-area-inset-bottom,0px));box-shadow:0 -16px 40px rgba(0,0,0,.22);transform:translateY(105%);transition:transform .42s var(--k-smooth);touch-action:pan-x}
.k-sheet__grab{display:block;width:38px;height:5px;border-radius:9px;background:var(--sunk);margin:0 auto 12px}
.k-sheet.is-open{transform:translateY(0)}
.k-sheet.is-open+.k-sheet-scrim,.k-sheet-scrim.is-open{opacity:1;pointer-events:auto}
/* bento */
.k-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(84px,auto);gap:10px}
.k-bento>*{border-radius:var(--k-r)}
.k-bento .k-w2{grid-column:span 2}.k-bento .k-h2x{grid-row:span 2}.k-bento .k-w4{grid-column:1/-1}
/* swipe stack */
.k-stack{position:relative;touch-action:pan-y}
.k-stack>*{position:absolute;inset:0;border-radius:var(--k-r-lg);cursor:grab;user-select:none;-webkit-user-select:none;transition:transform .4s var(--k-smooth),opacity .3s;box-shadow:var(--shadow-lg)}
.k-stack>.is-drag{transition:none;cursor:grabbing}
/* expanding card */
.k-expand{cursor:pointer;overflow:hidden;transition:box-shadow .3s}
.k-expand__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--k-smooth)}
.k-expand__more>*{overflow:hidden;opacity:0;transition:opacity .25s}
.k-expand.is-open .k-expand__more{grid-template-rows:1fr}
.k-expand.is-open .k-expand__more>*{opacity:1;transition-delay:.12s}
.k-expand__chev{transition:transform .35s var(--k-smooth)}
.k-expand.is-open .k-expand__chev{transform:rotate(180deg)}
/* flip widget */
.k-flip{perspective:800px;cursor:pointer}
.k-flip__in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s var(--k-smooth)}
.k-flip.is-flipped .k-flip__in{transform:rotateY(180deg)}
.k-flip__face{position:absolute;inset:0;border-radius:var(--k-r-lg);backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:16px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow-lg);background:var(--surface)}
.k-flip__back{transform:rotateY(180deg);background:var(--b1);color:var(--on1)}
/* ring chart: