/* KATA UI full bundle - tokens + every component and block. For production, per-part copies are leaner; this is the fast start. */
/* KATA UI — design tokens. Components reference ONLY these variables. */
:root{
  --k-bg:#ffffff; --k-bg-soft:#f7f7f7; --k-ink:#18181b; --k-ink-2:#52525b; --k-ink-3:#a1a1aa;
  --k-line:#e4e4e7; --k-accent:#33a6b8; --k-core:#eb471f; --k-danger:#c9171e; --k-yamabuki:#ffb11b;
  --k-ring:0 0 0 3px rgba(24,24,27,.12);
  --k-radius:8px; --k-radius-lg:12px;
  --k-font:"Inter","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --k-mono:"Geist Mono",ui-monospace,monospace;
  --k-on-color:#ffffff; --k-knob:#ffffff;
  --k-accent-ink:#165e83; --k-danger-ink:#b7282e; --k-yamabuki-ink:#9b6e23;
  --k-accent-bg:rgba(51,166,184,.08); --k-accent-bg-strong:rgba(51,166,184,.1); --k-accent-line:rgba(51,166,184,.18);
  --k-danger-bg:rgba(201,23,30,.07); --k-danger-line:rgba(201,23,30,.17); --k-danger-ring:rgba(201,23,30,.14); --k-ring-danger:0 0 0 3px rgba(201,23,30,.14);
  --k-yamabuki-bg:rgba(255,177,27,.12); --k-yamabuki-line:rgba(255,177,27,.3);
  --k-track:#d4d4d8; --k-seg:#ececee; --k-border-strong:#c9c9cf;
  --k-success-bg:rgba(93,172,129,.1); --k-success-line:rgba(93,172,129,.32); --k-success-ink:#1b813e;
  --k-toast-ink:#f4f4f5; --k-toast-sub:#a1a1aa; --k-success:#5dac81;

  --k-shadow-overlay:0 18px 44px -14px rgba(16,24,40,.28);
  --k-z-overlay:50;

  /* scales (mirror of system/tokens.json) */
  --k-zinc-50:#fafafa; --k-zinc-100:#f4f4f5; --k-zinc-200:#e4e4e7; --k-zinc-300:#d4d4d8; --k-zinc-400:#a1a1aa; --k-zinc-500:#71717a; --k-zinc-600:#52525b; --k-zinc-700:#3f3f46; --k-zinc-800:#27272a; --k-zinc-900:#18181b; --k-zinc-950:#09090b;
  --k-asagi-50:#eef9fa; --k-asagi-100:#d7f0f3; --k-asagi-200:#b0e0e7; --k-asagi-300:#7fc9d4; --k-asagi-400:#4fb0bf; --k-asagi-500:#33a6b8; --k-asagi-600:#29889a; --k-asagi-700:#206b79; --k-asagi-800:#1a5561; --k-asagi-900:#143f47;
  --k-space-1:4px; --k-space-2:8px; --k-space-3:12px; --k-space-4:16px; --k-space-6:24px; --k-space-8:32px; --k-space-12:48px; --k-space-16:64px;
  --k-radius-sm:6px; --k-radius-full:99px;
  --k-text-xs:11px; --k-text-sm:12.5px; --k-text-base:13.5px; --k-text-lg:16.5px; --k-text-xl:19px; --k-text-2xl:24px; --k-text-3xl:30px;
  --k-dur-1:130ms; --k-dur-2:180ms; --k-dur-3:220ms; --k-ease:cubic-bezier(.3,.7,.3,1);
  /* type tracking & leading — the table in KATA.md §0.5 */
  --k-ls-display:-.025em; --k-ls-heading:-.015em; --k-ls-body:.012em; --k-ls-small:.01em; --k-ls-caps:.1em; --k-ls-mono:.02em; --k-ls-cjk:.06em; --k-ls-cjk-small:.05em;
  --k-lh-display:1.1; --k-lh-heading:1.3; --k-lh-body:1.7; --k-lh-loose:1.85;
}
/* craftsmanship floors — every part inherits these (KATA.md §0.6):
   a keyboard focus ring in the accent, and a reduced-motion safety net
   so no part's animation can outstay a user who asked for calm. */
:where(:focus-visible){outline:2px solid var(--k-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
[data-theme="dark"]{
  --k-bg:#18181b; --k-bg-soft:#27272a; --k-ink:#f4f4f5; --k-ink-2:#a1a1aa; --k-ink-3:#71717a;
  --k-line:#3f3f46; --k-ring:0 0 0 3px rgba(244,244,245,.18);
  --k-accent-ink:#81c7d4; --k-danger-ink:#f596aa; --k-yamabuki-ink:#f6c555;
  --k-track:#52525b; --k-seg:#27272a; --k-border-strong:#52525b;
}
[data-theme="light"]{
  --k-bg:#ffffff; --k-bg-soft:#f7f7f7; --k-ink:#18181b; --k-ink-2:#52525b; --k-ink-3:#a1a1aa;
  --k-line:#e4e4e7; --k-ring:0 0 0 3px rgba(24,24,27,.12);
  --k-accent-ink:#165e83; --k-danger-ink:#b7282e; --k-yamabuki-ink:#9b6e23;
  --k-track:#d4d4d8; --k-seg:#ececee; --k-border-strong:#c9c9cf;
}


/* ===== component: button ===== */
/* KATA button 1.0.0 — kata-ui.dev/components/button */
.btn{--k-btn-gap:7px;--k-btn-weight:500;--k-btn-press:.5px;--k-btn-height-sm:32px;--k-btn-height-md:38px;--k-btn-height-lg:44px;--k-btn-pad-lg:20px;--k-btn-text-lg:14px;--k-btn-disabled-opacity:.45;--k-btn-shadow:0 1px 2px rgba(16,24,40,.05);--k-btn-inset:inset 0 0 0 1px currentColor;--k-btn-spinner-size:14px;--k-btn-spinner-border:2px;--k-btn-spinner-track:color-mix(in srgb,currentColor 35%,transparent);--k-btn-spin-duration:700ms;--k-btn-spin-turn:360deg;display:inline-flex;align-items:center;justify-content:center;gap:var(--k-btn-gap);font-weight:var(--k-btn-weight);border-radius:var(--k-radius);cursor:pointer;border:1px solid transparent;font-family:var(--k-font);transition:background-color calc(var(--k-dur-1) * var(--k-mscale, 1)) var(--k-ease),color calc(var(--k-dur-1) * var(--k-mscale, 1)) var(--k-ease),box-shadow calc(var(--k-dur-1) * var(--k-mscale, 1)) var(--k-ease);white-space:nowrap;text-decoration:none;background:none;color:var(--k-ink)}
.btn:hover:not(:disabled){background:var(--k-bg-soft)}
.btn:active:not(:disabled){transform:translateY(var(--k-btn-press));background:var(--k-seg)}
.btn-pri{background:var(--k-ink);color:var(--k-bg)}
.btn-pri:hover:not(:disabled){background:var(--k-ink-2)}
.btn-pri:active:not(:disabled){background:var(--k-ink)}
.btn-sec{background:var(--k-bg);color:var(--k-ink);border-color:var(--k-line);box-shadow:var(--k-btn-shadow)}
.btn-sec:hover:not(:disabled){background:var(--k-bg-soft)}
.btn-sec:active:not(:disabled){background:var(--k-seg)}
.btn-ghost{background:transparent;color:var(--k-ink-2)}
.btn-ghost:hover:not(:disabled){background:var(--k-bg-soft);color:var(--k-ink)}
.btn-ghost:active:not(:disabled){background:var(--k-seg);color:var(--k-ink)}
.btn-danger{background:var(--k-danger);color:var(--k-on-color)}
.btn-danger:hover:not(:disabled){background:var(--k-danger-ink)}
.btn-danger:active:not(:disabled){background:var(--k-danger);box-shadow:var(--k-btn-inset)}
/* Deprecated: .btn-asagi is retained as an alias for .btn-accent. */
.btn-accent,.btn-asagi{background:var(--k-accent);color:var(--k-on-color)}
.btn-accent:hover:not(:disabled),.btn-asagi:hover:not(:disabled){background:var(--k-accent-ink)}
.btn-accent:active:not(:disabled),.btn-asagi:active:not(:disabled){background:var(--k-accent);box-shadow:var(--k-btn-inset)}
.btn-sm{height:var(--k-btn-height-sm);padding:0 var(--k-space-3);font-size:var(--k-text-sm);border-radius:var(--k-radius-sm)}
.btn-md{height:var(--k-btn-height-md);padding:0 var(--k-space-4);font-size:var(--k-text-base)}
.btn-lg{height:var(--k-btn-height-lg);padding:0 var(--k-btn-pad-lg);font-size:var(--k-btn-text-lg)}
.btn:focus-visible{outline:none;box-shadow:var(--k-ring)}
.btn:disabled{opacity:var(--k-btn-disabled-opacity);cursor:not-allowed;transform:none}
.btn[aria-busy="true"]{cursor:progress}
.btn .spin{width:var(--k-btn-spinner-size);height:var(--k-btn-spinner-size);flex-shrink:0;border-radius:var(--k-radius-full);border:var(--k-btn-spinner-border) solid var(--k-btn-spinner-track);border-top-color:currentColor;animation:k-rot calc(var(--k-btn-spin-duration) * var(--k-mscale, 1)) linear infinite}
@keyframes k-rot{to{transform:rotate(var(--k-btn-spin-turn))}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn .spin{animation:none}}


/* ===== component: button-group ===== */
/* KATA button-group 1.0.0 — kata-ui.dev/components/button-group */
/* KATA Button Group — buttons sharing edges: the group owns the radius
   and the seams, the Button part owns everything else. */
.k-bgroup{display:inline-flex;font-family:var(--k-font)}
.k-bgroup .btn{border-radius:0;margin-inline-start:-1px;position:relative}
.k-bgroup .btn:first-child{border-start-start-radius:var(--k-radius);border-end-start-radius:var(--k-radius);margin-inline-start:0}
.k-bgroup .btn:last-child{border-start-end-radius:var(--k-radius);border-end-end-radius:var(--k-radius)}
.k-bgroup .btn:hover,.k-bgroup .btn:focus-visible{z-index:1}
.k-bgroup.vert{flex-direction:column}
.k-bgroup.vert .btn{margin-inline-start:0;margin-top:-1px}
.k-bgroup.vert .btn:first-child{border-radius:var(--k-radius) var(--k-radius) 0 0;margin-top:0}
.k-bgroup.vert .btn:last-child{border-radius:0 0 var(--k-radius) var(--k-radius)}


/* ===== component: calendar ===== */
/* KATA calendar 1.0.0 — kata-ui.dev/components/calendar */
/* KATA Calendar — one month of real buttons. */
.k-cal{font-family:var(--k-font);color:var(--k-ink);background:var(--k-bg);border:1px solid var(--k-line);border-radius:var(--k-radius-lg);padding:14px;width:288px}
.k-cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.k-cal-title{font-size:14px;font-weight:600;letter-spacing:-.01em}
.k-cal-nav{width:30px;height:30px;border-radius:8px;border:1px solid var(--k-line);background:var(--k-bg);color:var(--k-ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.k-cal-nav:hover{background:var(--k-bg-soft);color:var(--k-ink)}
.k-cal-wd{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}
.k-cal-wd span{text-align:center;font-size:11px;font-weight:600;color:var(--k-ink-3);padding:4px 0}
.k-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.k-cal-day{height:34px;border:0;border-radius:8px;background:none;font-family:inherit;font-size:13px;color:var(--k-ink);cursor:pointer;position:relative}
.k-cal-day:hover{background:var(--k-bg-soft)}
.k-cal-day.off{color:var(--k-ink-3);opacity:.55}
.k-cal-day.today{font-weight:650}
.k-cal-day.today::after{content:"";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--k-core)}
.k-cal-day.sel{background:var(--k-ink);color:var(--k-bg);font-weight:600}
.k-cal-day.sel::after{background:var(--k-bg)}
.k-cal.sm{width:248px;padding:11px}
.k-cal.sm .k-cal-day{height:29px;font-size:12.5px}


/* ===== component: cascader ===== */
/* KATA cascader 1.0.0 — kata-ui.dev/components/cascader */
/* KATA Cascader — a tree, dealt into columns. */
.k-casc{position:relative;font-family:var(--k-font);color:var(--k-ink)}
.k-casc-panel{position:absolute;inset-inline-start:0;top:calc(100% + 8px);z-index:50;background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;box-shadow:0 20px 44px -14px rgba(16,24,40,.22);padding:6px;display:none}
.k-casc-panel.open{display:flex}
.k-casc-col{min-width:148px;max-height:236px;overflow:auto;padding:2px}
.k-casc-col + .k-casc-col{border-inline-start:1px solid var(--k-line)}
.k-casc-it{display:flex;align-items:center;gap:7px;width:100%;padding:7px 9px;border:0;border-radius:8px;background:none;font-family:inherit;font-size:13.5px;color:var(--k-ink-2);cursor:pointer;text-align:start}
.k-casc-it:hover{background:var(--k-bg-soft);color:var(--k-ink)}
.k-casc-it.on{background:var(--k-accent-bg);color:var(--k-ink);font-weight:550}
.k-casc-it svg{margin-inline-start:auto;color:var(--k-ink-3);flex:none}
.k-casc-src{display:none}


/* ===== component: checkbox ===== */
/* KATA checkbox 1.0.0 — kata-ui.dev/components/checkbox */
.check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;font-family:var(--k-font);color:var(--k-ink)}
.check input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:1.5px solid var(--k-border-strong);border-radius:5px;background:var(--k-bg);display:grid;place-content:center;cursor:pointer;transition:background .13s,border-color .13s;margin:0;flex:none}
.check input::before{content:"";width:10px;height:10px;transform:scale(0);transition:transform .13s;background:var(--k-bg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
.check input:checked{background:var(--k-ink);border-color:var(--k-ink)}
.check input:checked::before{transform:scale(1)}
.check input:focus-visible{box-shadow:var(--k-ring);outline:0}
.check input[type="radio"]{border-radius:50%}
.check input[type="radio"]::before{clip-path:none;border-radius:50%;width:8px;height:8px}

.check input[type="radio"]:checked::before{background:var(--k-core)}


/* ===== component: color-picker ===== */
/* KATA color-picker 1.0.0 — kata-ui.dev/components/color-picker */
.k-cp{font-family:var(--k-font);text-align:start}
.k-cp-grid{display:flex;flex-wrap:wrap;gap:8px}
.k-cp-sw{width:34px;height:34px;border-radius:10px;border:1px solid var(--k-line);cursor:pointer;padding:0;display:grid;place-items:center;color:transparent;transition:transform .12s var(--k-ease)}
.k-cp-sw:hover{transform:scale(1.08)}
.k-cp-sw.sel{color:#fff;box-shadow:0 0 0 2px var(--k-bg),0 0 0 4px var(--k-accent)}
.k-cp-custom{position:relative;width:34px;height:34px;border-radius:10px;border:1.5px dashed var(--k-border-strong);display:grid;place-items:center;color:var(--k-ink-3);cursor:pointer;background:var(--k-bg)}
.k-cp-custom input{position:absolute;inset:0;opacity:0;cursor:pointer}
.k-cp-out{display:flex;align-items:center;gap:9px;margin-top:13px;font-size:12.5px;color:var(--k-ink-2)}
.k-cp-out .chipc{width:18px;height:18px;border-radius:6px;border:1px solid var(--k-line)}
.k-cp-out code{font-family:var(--k-mono);font-size:12px;color:var(--k-ink)}


/* ===== component: combobox ===== */
/* KATA combobox 1.0.0 — kata-ui.dev/components/combobox */
.k-combo{--combo-width:300px;--combo-input-end:34px;--combo-input-size:16px;--combo-chevron-end:11px;--combo-chevron-bottom:11px;--combo-icon:15px;--combo-check-icon:14px;--combo-max-height:238px;--combo-sr-size:1px;--combo-focus-width:2px;position:relative;font-family:var(--k-font);text-align:start;max-inline-size:var(--combo-width)}
.k-combo label{display:block;margin-block-end:var(--k-space-1);font-size:var(--k-text-base);color:var(--k-ink)}
.k-combo .input{inline-size:100%;box-sizing:border-box;padding-inline-end:var(--combo-input-end);font-size:var(--combo-input-size)}
.k-combo .input:hover:not(:disabled){border-color:var(--k-border-strong)}
.k-combo .input:active:not(:disabled){border-color:var(--k-accent)}
.k-combo .input:disabled{background:var(--k-bg-soft);color:var(--k-ink-2);cursor:not-allowed}
.k-combo .input:focus-visible{outline:var(--combo-focus-width) solid var(--k-accent);box-shadow:var(--k-ring)}
.k-combo .chev{position:absolute;inset-inline-end:var(--combo-chevron-end);inset-block-end:var(--combo-chevron-bottom);color:var(--k-ink-2);pointer-events:none;display:grid;place-items:center}
.k-combo .chev svg{inline-size:var(--combo-icon);block-size:var(--combo-icon)}
.k-combo-list,.k-combo>.none{position:absolute;inset-inline-start:0;inset-inline-end:0;inset-block-start:calc(100% + var(--k-space-2));z-index:var(--k-z-overlay);box-sizing:border-box;margin:0;padding:var(--k-space-1);background:var(--k-bg);border:1px solid var(--k-line);border-radius:var(--k-radius-lg);box-shadow:var(--k-shadow-overlay)}
.k-combo-list{list-style:none;max-block-size:var(--combo-max-height);overflow:auto;scrollbar-color:var(--k-border-strong) var(--k-bg)}
.k-combo-list[hidden],.k-combo-list li[hidden],.k-combo>.none[hidden]{display:none}
.k-combo-list li{padding:var(--k-space-2) var(--k-space-2);border-radius:var(--k-radius);font-size:var(--k-text-base);color:var(--k-ink);cursor:pointer;display:flex;align-items:center;gap:var(--k-space-2);overflow-wrap:anywhere}
.k-combo-list li .ck{color:var(--k-accent);visibility:hidden;display:grid;place-items:center}
.k-combo-list li .ck svg{inline-size:var(--combo-check-icon);block-size:var(--combo-check-icon)}
.k-combo-list li.act,.k-combo-list li:hover{background:var(--k-bg-soft)}
.k-combo-list li:active{background:var(--k-accent-bg-strong)}
.k-combo-list li[aria-selected="true"] .ck{visibility:visible}
.k-combo-list li[aria-disabled="true"]{color:var(--k-ink-2);background:var(--k-bg);cursor:not-allowed}
.k-combo-list li.none,.k-combo>.none{color:var(--k-ink-2);cursor:default;font-size:var(--k-text-base)}
.k-combo-status{position:absolute;inline-size:var(--combo-sr-size);block-size:var(--combo-sr-size);padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.k-combo *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* ===== component: copy-field ===== */
/* KATA copy-field 1.0.0 — kata-ui.dev/components/copy-field */
/* KATA Copy field */
.k-copyfield{display:flex;align-items:center;gap:8px;height:38px;padding-inline-start:12px;padding-inline-end:4px;border:1px solid var(--k-line);border-radius:var(--k-radius);background:var(--k-bg)}
.k-copyfield code{font-family:var(--k-mono);font-size:12.5px;color:var(--k-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-copyfield-btn{margin-inline-start:auto;flex:none;height:30px;padding:0 12px;border:0;border-radius:var(--k-radius-sm);background:var(--k-ink);color:var(--k-bg);font-family:var(--k-font);font-size:12.5px;font-weight:550;cursor:pointer;transition:background .15s}
.k-copyfield-btn:hover{opacity:.88}
.k-copyfield[data-copied="true"] .k-copyfield-btn{background:var(--k-accent)}


/* ===== component: date-picker ===== */
/* KATA date-picker 1.0.0 — kata-ui.dev/components/date-picker */
.k-dp{position:relative;font-family:var(--k-font);text-align:start}
.k-dp .wrap-in{position:relative}
.k-dp .cal-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:none;background:transparent;color:var(--k-ink-3);display:grid;place-items:center;cursor:pointer;border-radius:7px}
.k-dp .cal-btn:hover{background:var(--k-bg-soft);color:var(--k-ink)}
.k-dp-panel{position:absolute;inset-inline-start:0;top:calc(100% + 8px);z-index:50;width:288px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;box-shadow:0 20px 44px -14px rgba(16,24,40,.22);padding:14px}
.k-dp-panel[hidden]{display:none}
.k-dp-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.k-dp-h b{font-size:13.5px;font-weight:600;color:var(--k-ink)}
.k-dp-nav{width:29px;height:29px;border:1px solid var(--k-line);background:var(--k-bg);border-radius:8px;color:var(--k-ink-2);display:grid;place-items:center;cursor:pointer}
.k-dp-nav:hover{background:var(--k-bg-soft)}
.k-dp-wd{display:grid;grid-template-columns:repeat(7,1fr);font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--k-ink-3);text-align:center;margin-bottom:5px}
.k-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.k-dp-day{height:34px;border:none;background:transparent;border-radius:9px;font:inherit;font-size:13px;color:var(--k-ink);cursor:pointer;position:relative;display:grid;place-items:center}
.k-dp-day:hover{background:var(--k-bg-soft)}
.k-dp-day.out{color:var(--k-ink-3);opacity:.45}
.k-dp-day.today::after{content:"";position:absolute;bottom:4px;width:5px;height:5px;border-radius:50%;background:var(--k-core)}
.k-dp-day.sel{background:var(--k-ink);color:var(--k-bg);font-weight:600}
.k-dp-day:focus-visible{outline:2px solid var(--k-accent);outline-offset:-2px}


/* ===== component: dual-range ===== */
/* KATA dual-range 1.0.0 — kata-ui.dev/components/dual-range */
/* KATA Dual Range — two thumbs, one honest track. */
.k-dr{font-family:var(--k-font);color:var(--k-ink);width:100%;max-width:340px}
.k-dr-track{position:relative;height:26px}
.k-dr-track::before{content:"";position:absolute;left:0;right:0;top:11px;height:4px;border-radius:3px;background:var(--k-zinc-200)}
.k-dr-fill{position:absolute;top:11px;height:4px;border-radius:3px;background:var(--k-accent)}
.k-dr input[type=range]{position:absolute;left:0;top:0;width:100%;height:26px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.k-dr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:19px;height:19px;border-radius:50%;background:var(--k-bg);border:2px solid var(--k-zinc-400);box-shadow:0 1px 4px rgba(16,24,40,.18);pointer-events:auto;cursor:grab}
.k-dr input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--k-bg);border:2px solid var(--k-zinc-400);box-shadow:0 1px 4px rgba(16,24,40,.18);pointer-events:auto;cursor:grab}
.k-dr input[type=range]:focus-visible{outline:2px solid var(--k-accent);outline-offset:4px;border-radius:6px}
.k-dr-out{display:flex;justify-content:space-between;font-size:13px;margin-top:7px}
.k-dr-out output{font-weight:650;font-variant-numeric:tabular-nums}
.k-dr-out span{color:var(--k-ink-3)}


/* ===== component: field ===== */
/* KATA field 1.0.0 — kata-ui.dev/components/field */
.k-field{display:grid;gap:7px;font-family:var(--k-font);text-align:start}
.k-field .lab{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:550;color:var(--k-ink)}
.k-field .req{font-size:11px;font-weight:500;color:var(--k-danger)}
.k-field .opt{font-size:11px;font-weight:500;color:var(--k-ink-3)}
.k-field .hint{font-size:12px;color:var(--k-ink-3);line-height:1.6}
.k-field .err{display:flex;gap:6px;align-items:center;font-size:12px;font-weight:500;color:var(--k-danger)}
.k-field[data-invalid] input,.k-field[data-invalid] textarea,.k-field[data-invalid] select{border-color:var(--k-danger)}


/* ===== component: file-upload ===== */
/* KATA file-upload 1.0.0 — kata-ui.dev/components/file-upload */
.k-up{font-family:var(--k-font);text-align:start}
.k-up-zone{display:grid;justify-items:center;gap:7px;border:1.5px dashed var(--k-border-strong);border-radius:14px;padding:26px 18px;text-align:center;cursor:pointer;color:var(--k-ink-2);transition:border-color .15s,background .15s}
.k-up-zone:hover{border-color:var(--k-accent);background:var(--k-accent-bg)}
.k-up-zone.drag{border-color:var(--k-accent);background:var(--k-accent-bg)}
.k-up-zone .ic{color:var(--k-ink-3);display:grid;place-items:center}
.k-up-zone b{font-size:13.5px;font-weight:600;color:var(--k-ink)}
.k-up-zone b u{text-decoration-color:var(--k-accent);text-underline-offset:3px}
.k-up-zone span{font-size:12px;color:var(--k-ink-3)}
.k-up-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.k-up-item{display:flex;align-items:center;gap:11px;border:1px solid var(--k-line);border-radius:11px;padding:9px 12px;background:var(--k-bg)}
.k-up-item .fi{color:var(--k-ink-3);display:grid;place-items:center;flex:none}
.k-up-item .nm{font-size:13px;font-weight:550;color:var(--k-ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-up-item .sz{font-size:11.5px;color:var(--k-ink-3);font-family:var(--k-mono)}
.k-up-item .rm{width:26px;height:26px;border:none;background:transparent;color:var(--k-ink-3);border-radius:7px;display:grid;place-items:center;cursor:pointer;flex:none}
.k-up-item .rm:hover{background:var(--k-bg-soft);color:var(--k-danger)}


/* ===== component: input ===== */
/* KATA input 1.0.0 — kata-ui.dev/components/input */
.field{display:flex;flex-direction:column;gap:6px;min-width:230px;flex:1;max-width:300px;font-family:var(--k-font)}
.field label{font-size:12.5px;font-weight:500;color:var(--k-ink)}
.field .hint{font-size:12px;color:var(--k-ink-3)}
.field .err{font-size:12px;color:var(--k-danger)}
.input{-webkit-appearance:none;appearance:none;height:38px;border:1px solid var(--k-line);border-radius:var(--k-radius);padding:0 12px;font-family:var(--k-font);font-size:13.5px;background:var(--k-bg);color:var(--k-ink);box-shadow:0 1px 2px rgba(16,24,40,.04);width:100%}
.input::placeholder{color:var(--k-ink-3)}
.input:focus{outline:0;border-color:var(--k-ink);box-shadow:var(--k-ring)}
.input.errb{border-color:var(--k-danger)}
.input.errb:focus{box-shadow:var(--k-ring-danger)}
.searchwrap{position:relative;display:block}
.searchwrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%)}
.searchwrap .input{padding-inline-start:34px}
/* iOS: fields under 16px make Safari zoom the page on focus — 16px on small screens (the mold, KATA.md) */
@media (max-width:640px){.input{font-size:16px}}


/* ===== component: input-group ===== */
/* KATA input-group 1.0.0 — kata-ui.dev/components/input-group */
/* KATA Input Group — addons sharing the input's outline. */
.k-igroup{display:flex;align-items:stretch;font-family:var(--k-font);max-width:340px}
.k-igroup .input{border-radius:0;margin-inline-start:-1px;position:relative}
.k-igroup .input:first-child{border-start-start-radius:var(--k-radius);border-end-start-radius:var(--k-radius);margin-inline-start:0}
.k-igroup .input:last-child{border-start-end-radius:var(--k-radius);border-end-end-radius:var(--k-radius)}
.k-igroup .input:focus{z-index:1}
.k-ig-addon{display:flex;align-items:center;padding:0 11px;background:var(--k-bg-soft);border:1px solid var(--k-line);color:var(--k-ink-2);font-size:13px;margin-inline-start:-1px;white-space:nowrap}
.k-ig-addon:first-child{border-start-start-radius:var(--k-radius);border-end-start-radius:var(--k-radius);margin-inline-start:0}
.k-ig-addon:last-child{border-start-end-radius:var(--k-radius);border-end-end-radius:var(--k-radius)}
.k-igroup .btn{border-radius:0;margin-inline-start:-1px;position:relative}
.k-igroup .btn:last-child{border-start-end-radius:var(--k-radius);border-end-end-radius:var(--k-radius)}
.k-igroup .btn:first-child{border-start-start-radius:var(--k-radius);border-end-start-radius:var(--k-radius);margin-inline-start:0}


/* ===== component: input-otp ===== */
/* KATA input-otp 1.0.0 — kata-ui.dev/components/input-otp */
.k-otp{display:flex;gap:8px;align-items:center;font-family:var(--k-font)}
.k-otp input{-webkit-appearance:none;appearance:none;width:44px;height:50px;border:1px solid var(--k-line);border-radius:10px;background:var(--k-bg);color:var(--k-ink);font-family:var(--k-mono);font-size:19px;font-weight:600;text-align:center;outline:none;transition:border-color .13s, box-shadow .13s}
.k-otp input:focus{border-color:var(--k-accent);box-shadow:0 0 0 3px var(--k-accent-bg)}
.k-otp .gap{width:10px;height:2px;border-radius:2px;background:var(--k-line)}


/* ===== component: radio ===== */
/* KATA radio 1.0.0 — kata-ui.dev/components/radio */
/* KATA Radio — native input, styled face. No JS. */
.k-radio{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.k-radio input{appearance:none;-webkit-appearance:none;width:17px;height:17px;margin:0;border:1.5px solid var(--k-border-strong);border-radius:50%;background:var(--k-bg);display:grid;place-content:center;cursor:pointer;transition:border-color .15s;flex:none}
.k-radio input::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--k-core);transform:scale(0);transition:transform .15s cubic-bezier(.3,.7,.3,1)}
.k-radio input:checked{border-color:var(--k-ink)}
.k-radio input:checked::after{transform:scale(1)}
.k-radio input:focus-visible{outline:none;box-shadow:var(--k-ring)}
.k-radio input:disabled{opacity:.5;cursor:not-allowed}
.k-radio:has(input:disabled){color:var(--k-ink-3);cursor:not-allowed}


/* ===== component: rating ===== */
/* KATA rating 1.0.0 — kata-ui.dev/components/rating */
.k-rate{display:inline-flex;flex-direction:row-reverse;gap:3px;font-family:var(--k-font)}
.k-rate input{position:absolute;opacity:0;width:1px;height:1px}
.k-rate label{cursor:pointer;color:var(--k-border-strong);display:grid;place-items:center;padding:2px}
.k-rate label svg path{fill:none;transition:fill .12s}
.k-rate input:checked ~ label{color:var(--k-accent)}
.k-rate input:checked ~ label svg path{fill:currentColor}
.k-rate label:hover,.k-rate label:hover ~ label{color:var(--k-accent)}
.k-rate input:focus-visible + label{outline:2px solid var(--k-accent);outline-offset:2px;border-radius:6px}


/* ===== component: segmented ===== */
/* KATA segmented 1.0.0 — kata-ui.dev/components/segmented */
/* KATA Segmented — radios in one pill. No JS. */
.k-seg{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:var(--k-seg)}
.k-seg-item{position:relative}
.k-seg-item input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.k-seg-item span{display:flex;align-items:center;height:27px;padding:0 13px;border-radius:8px;font-size:12.5px;color:var(--k-ink-2);transition:background .15s,color .15s;white-space:nowrap}
.k-seg-item input:checked + span{background:var(--k-bg);color:var(--k-ink);font-weight:550;box-shadow:0 1px 2px rgba(16,24,40,.09)}
.k-seg-item input:focus-visible + span{box-shadow:var(--k-ring)}
.k-seg-item input:disabled + span{opacity:.5;cursor:not-allowed}


/* ===== component: select ===== */
/* KATA select 1.0.0 — kata-ui.dev/components/select */
/* KATA Select — native <select>, token-styled. No JS. */
.k-select{position:relative;display:inline-block}
.k-select select{appearance:none;-webkit-appearance:none;height:38px;max-width:100%;padding:0 32px 0 12px;border:1px solid var(--k-line);border-radius:var(--k-radius);background:var(--k-bg);color:var(--k-ink);font-family:var(--k-font);font-size:13.5px;cursor:pointer;transition:border-color .15s}
.k-select select:hover{border-color:var(--k-border-strong)}
.k-select select:focus-visible{outline:none;border-color:var(--k-ink);box-shadow:var(--k-ring)}
.k-select select:disabled{opacity:.5;cursor:not-allowed}
.k-select svg{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--k-ink-3)}
.k-select[data-size="sm"] select{height:32px;font-size:12.5px}
.k-select[data-size="lg"] select{height:44px;font-size:14px}
/* iOS: fields under 16px make Safari zoom the page on focus — 16px on small screens (the mold, KATA.md) */
@media (max-width:640px){.k-select select,.k-select[data-size="sm"] select,.k-select[data-size="lg"] select{font-size:16px}}

.k-select-examples{display:flex;gap:var(--k-space-3);flex-wrap:wrap;align-items:flex-end}
:root{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}
[data-theme="light"]{color-scheme:light}
.k-select select{color-scheme:inherit}
@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark}}


/* ===== component: slider ===== */
/* KATA slider 1.0.0 — kata-ui.dev/components/slider */
/* KATA Slider */
.k-slider{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer;--p:50%}
.k-slider::-webkit-slider-runnable-track{height:4px;border-radius:var(--k-radius-full);background:linear-gradient(90deg,var(--k-ink) var(--p),var(--k-track) var(--p))}
.k-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:radial-gradient(circle at center,var(--k-core) 0 2.5px,var(--k-knob) 3.2px);border:1.5px solid var(--k-border-strong);box-shadow:0 1px 2px rgba(16,24,40,.18)}
.k-slider::-moz-range-track{height:4px;border-radius:var(--k-radius-full);background:var(--k-track)}
.k-slider::-moz-range-progress{height:4px;border-radius:var(--k-radius-full);background:var(--k-ink)}
.k-slider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at center,var(--k-core) 0 2.5px,var(--k-knob) 3.2px);border:1.5px solid var(--k-border-strong);box-shadow:0 1px 2px rgba(16,24,40,.18)}
.k-slider:focus-visible{outline:none}
.k-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--k-ring)}


/* ===== component: stepper ===== */
/* KATA stepper 1.0.0 — kata-ui.dev/components/stepper */
/* KATA Stepper */
.k-stepper{display:inline-flex;align-items:stretch;height:38px;border:1px solid var(--k-line);border-radius:var(--k-radius);background:var(--k-bg);overflow:hidden}
.k-stepper button{width:37px;border:0;background:transparent;color:var(--k-ink);font-family:var(--k-font);font-size:16px;cursor:pointer;transition:background .13s}
.k-stepper button:hover:not(:disabled){background:var(--k-bg-soft)}
.k-stepper button:disabled{opacity:.35;cursor:not-allowed}
.k-stepper button:focus-visible{outline:none;box-shadow:inset var(--k-ring)}
.k-stepper output{display:flex;align-items:center;justify-content:center;min-width:46px;padding:0 6px;border-inline-start:1px solid var(--k-line);border-inline-end:1px solid var(--k-line);font-family:var(--k-mono);font-size:13.5px;color:var(--k-ink)}


/* ===== component: switch ===== */
/* KATA switch 1.0.0 — kata-ui.dev/components/switch */
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.switch input{position:absolute;opacity:0;inset:0;cursor:pointer;z-index:2;margin:0}
.switch .tr{position:absolute;inset:0;border-radius:99px;background:var(--k-track);transition:background .18s}
.switch .tr::after{content:"";position:absolute;inset-inline-start:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--k-knob);box-shadow:0 1px 3px rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .18s}
.switch input:checked + .tr{background:var(--k-ink)}
.switch input:checked + .tr::after{background:radial-gradient(circle at center,var(--k-core) 0 3px,var(--k-knob) 3.6px)}
.switch input:checked + .tr::after{transform:translateX(18px)}
.switch input:focus-visible + .tr{box-shadow:var(--k-ring)}
.switch.asagi input:checked + .tr{background:var(--k-accent)}
.switchrow{display:inline-flex;align-items:center;gap:11px;font-size:13.5px;font-family:var(--k-font);color:var(--k-ink)}

[dir="rtl"] .switch input:checked + .tr::after{transform:translateX(-18px)}


/* ===== component: tag-input ===== */
/* KATA tag-input 1.0.0 — kata-ui.dev/components/tag-input */
.k-tags{display:flex;flex-wrap:wrap;gap:7px;align-items:center;border:1px solid var(--k-line);border-radius:var(--k-radius);background:var(--k-bg);padding:7px 9px;font-family:var(--k-font);transition:border-color .13s, box-shadow .13s;text-align:start}
.k-tags:focus-within{border-color:var(--k-accent);box-shadow:0 0 0 3px var(--k-accent-bg)}
.k-tags-in{flex:1;min-width:110px;border:none;outline:none;background:transparent;font:inherit;font-size:13.5px;color:var(--k-ink);height:29px}
.k-tags-in::placeholder{color:var(--k-ink-3)}
/* iOS: fields under 16px make Safari zoom the page on focus — 16px on small screens (the mold, KATA.md) */
@media (max-width:640px){.k-tags-in{font-size:16px}}


/* ===== component: textarea ===== */
/* KATA textarea 1.0.0 — kata-ui.dev/components/textarea */
/* KATA Textarea */
.k-textarea{width:100%;min-height:92px;padding:10px 12px;border:1px solid var(--k-line);border-radius:var(--k-radius);background:var(--k-bg);color:var(--k-ink);font-family:var(--k-font);font-size:13.5px;line-height:1.7;resize:vertical;transition:border-color .15s,box-shadow .15s}
.k-textarea::placeholder{color:var(--k-ink-3)}
.k-textarea:hover{border-color:var(--k-border-strong)}
.k-textarea:focus{outline:none;border-color:var(--k-ink);box-shadow:var(--k-ring)}
.k-textarea:disabled{opacity:.55;resize:none}
.k-textarea[data-invalid="true"]{border-color:var(--k-danger)}
.k-textarea[data-invalid="true"]:focus{box-shadow:var(--k-ring-danger)}
/* iOS: fields under 16px make Safari zoom the page on focus — 16px on small screens (the mold, KATA.md) */
@media (max-width:640px){.k-textarea{font-size:16px}}


/* ===== component: time-picker ===== */
/* KATA time-picker 1.0.0 — kata-ui.dev/components/time-picker */
/* KATA Time Picker — two columns, one value. */
.k-tp{position:relative;font-family:var(--k-font);color:var(--k-ink)}
.k-tp .wrap-in{position:relative}
.k-tp-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:7px;background:none;color:var(--k-ink-3);display:flex;align-items:center;justify-content:center;cursor:pointer}
.k-tp-btn:hover{background:var(--k-bg-soft);color:var(--k-ink)}
.k-tp-panel{position:absolute;inset-inline-start:0;top:calc(100% + 8px);z-index:50;background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;box-shadow:0 20px 44px -14px rgba(16,24,40,.22);padding:10px;display:flex;gap:6px}
.k-tp-panel[hidden]{display:none}
.k-tp-col{display:flex;flex-direction:column;gap:2px;max-height:196px;overflow:auto;width:64px;padding-inline-end:2px}
.k-tp-col .hd{font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--k-ink-3);text-align:center;padding:3px 0 5px;position:sticky;top:0;background:var(--k-bg)}
.k-tp-opt{padding:7px 0;border:0;border-radius:8px;background:none;font-family:inherit;font-size:13.5px;color:var(--k-ink-2);cursor:pointer;text-align:center}
.k-tp-opt:hover{background:var(--k-bg-soft);color:var(--k-ink)}
.k-tp-opt.sel{background:var(--k-ink);color:var(--k-bg);font-weight:600}


/* ===== component: toggle ===== */
/* KATA toggle 1.0.0 — kata-ui.dev/components/toggle */
.k-tgl{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:9px;border:1px solid var(--k-line);background:var(--k-bg);color:var(--k-ink-2);font-family:var(--k-font);font-size:13px;font-weight:500;cursor:pointer;transition:background .13s,border-color .13s,color .13s}
.k-tgl:hover{border-color:var(--k-border-strong);color:var(--k-ink)}
.k-tgl[aria-pressed="true"]{background:var(--k-ink);border-color:var(--k-ink);color:var(--k-bg);font-weight:600}
.k-tgl:focus-visible{outline:2px solid var(--k-accent);outline-offset:2px}
.k-tgroup{display:inline-flex;gap:5px;padding:4px;border:1px solid var(--k-line);border-radius:12px;background:var(--k-bg)}
.k-tgroup .k-tgl{border-color:transparent}
.k-tgroup .k-tgl[aria-pressed="true"]{border-color:var(--k-ink)}


/* ===== component: transfer ===== */
/* KATA transfer 1.0.0 — kata-ui.dev/components/transfer */
/* KATA Transfer — two lists and a shuttle. */
.k-xfer{width:100%;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;font-family:var(--k-font);color:var(--k-ink);max-width:560px}
.k-xfer-panel{border:1px solid var(--k-line);border-radius:var(--k-radius-lg);display:flex;flex-direction:column;background:var(--k-bg);min-height:216px}
.k-xfer-h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--k-line);font-size:12.5px;font-weight:600}
.k-xfer-h .cnt{margin-inline-start:auto;color:var(--k-ink-3);font-weight:500}
.k-xfer-filter{margin:9px 10px 4px}
.k-xfer-list{padding:5px;overflow:auto;display:flex;flex-direction:column;gap:1px}
.k-xfer-it{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;font-size:13px;cursor:pointer}
.k-xfer-it:hover{background:var(--k-bg-soft)}
.k-xfer input[type=checkbox]{accent-color:var(--k-ink);width:15px;height:15px;flex:none;cursor:pointer}
.k-xfer-acts{display:flex;flex-direction:column;gap:8px;justify-content:center}
.k-xfer-acts .btn{padding:0 11px}
@media (max-width:560px){.k-xfer{grid-template-columns:1fr}.k-xfer-acts{flex-direction:row;justify-content:center}}


/* ===== component: accordion ===== */
/* KATA accordion 1.0.0 — kata-ui.dev/components/accordion */
/* KATA Accordion — native <details>. No JS. */
.k-acc{border:1px solid var(--k-line);border-radius:var(--k-radius-lg);background:var(--k-bg)}
.k-acc + .k-acc{margin-top:8px}
.k-acc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;font-size:13.5px;font-weight:550;cursor:pointer;list-style:none;border-radius:var(--k-radius-lg)}
.k-acc summary::-webkit-details-marker{display:none}
.k-acc summary:hover{background:var(--k-bg-soft)}
.k-acc summary:focus-visible{outline:none;box-shadow:var(--k-ring)}
.k-acc summary svg{color:var(--k-ink-3);transition:transform .18s cubic-bezier(.3,.7,.3,1);flex:none}
.k-acc[open] summary svg{transform:rotate(180deg)}
.k-acc-body{padding:2px 15px 15px;font-size:13.5px;line-height:1.8;color:var(--k-ink-2);letter-spacing:.012em}


/* ===== component: bottom-navigation ===== */
/* KATA bottom-navigation 1.0.0 — kata-ui.dev/components/bottom-navigation */
/* KATA Bottom Navigation — destinations under the thumb. */
.k-bnav{display:flex;background:var(--k-bg);border-top:1px solid var(--k-line);font-family:var(--k-font);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.k-bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:9px;color:var(--k-ink-3);text-decoration:none;font-size:10.5px;font-weight:550;position:relative}
.k-bnav a:hover{background:var(--k-bg-soft)}
.k-bnav a.on{color:var(--k-ink)}
.k-bnav a.on svg{color:var(--k-core)}
.k-bnav .dot{position:absolute;top:5px;right:calc(50% - 14px);width:7px;height:7px;border-radius:50%;background:var(--k-core);border:1.5px solid var(--k-bg)}
.k-bnav.icons a{padding:9px 2px}
.k-bnav.icons .lbl{display:none}


/* ===== component: breadcrumbs ===== */
/* KATA breadcrumbs 1.0.0 — kata-ui.dev/components/breadcrumbs */
/* KATA Breadcrumbs */
.k-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-family:var(--k-font);list-style:none}
.k-crumbs li{display:flex;align-items:center;gap:8px}
.k-crumbs a{color:var(--k-ink-2);text-decoration:none}
.k-crumbs a:hover{color:var(--k-ink);text-decoration:underline;text-underline-offset:3px}
.k-crumbs svg{color:var(--k-ink-3);flex:none}
.k-crumbs [aria-current="page"]{color:var(--k-ink);font-weight:550}


/* ===== component: collapsible ===== */
/* KATA collapsible 1.0.0 — kata-ui.dev/components/collapsible */
/* KATA Collapsible — one native details, styled as a row. */
.k-coll{font-family:var(--k-font);color:var(--k-ink);max-width:460px}
.k-coll summary{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--k-line);border-radius:var(--k-radius);font-size:13.5px;font-weight:550;cursor:pointer;list-style:none;background:var(--k-bg)}
.k-coll summary::-webkit-details-marker{display:none}
.k-coll summary:hover{background:var(--k-bg-soft)}
.k-coll summary svg{margin-inline-start:auto;transition:transform .18s;color:var(--k-ink-3)}
.k-coll[open ] summary{border-radius:var(--k-radius) var(--k-radius) 0 0}
.k-coll[open ] summary svg{transform:rotate(180deg)}
.k-coll-body{border:1px solid var(--k-line);border-top:0;border-radius:0 0 var(--k-radius) var(--k-radius);padding:13px;font-size:13px;line-height:1.75;color:var(--k-ink-2);letter-spacing:.01em}
@media (prefers-reduced-motion:reduce){.k-coll summary svg{transition:none}}


/* ===== component: menubar ===== */
/* KATA menubar 1.0.0 — kata-ui.dev/components/menubar */
/* KATA Menubar — the desktop bar, with the shortcuts showing. */
.k-mbar{display:flex;align-items:center;gap:2px;font-family:var(--k-font);color:var(--k-ink);position:relative;background:var(--k-bg)}
.k-mbar-item{position:relative}
.k-mbar-btn{padding:6px 11px;border:0;background:none;font-family:inherit;font-size:13px;color:var(--k-ink-2);border-radius:7px;cursor:pointer}
.k-mbar-btn:hover{background:var(--k-bg-soft);color:var(--k-ink)}
.k-mbar-item.open .k-mbar-btn{background:var(--k-bg-soft);color:var(--k-ink)}
.k-mbar-menu{position:absolute;inset-inline-start:0;top:calc(100% + 4px);min-width:228px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:11px;box-shadow:0 18px 40px -12px rgba(16,24,40,.25);padding:5px;display:none;z-index:60}
.k-mbar-item.open .k-mbar-menu{display:block}
.k-mbar-mi{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border:0;background:none;font-family:inherit;font-size:13px;color:var(--k-ink);border-radius:7px;cursor:pointer;text-align:start}
.k-mbar-mi:hover{background:var(--k-bg-soft)}
.k-mbar-mi .ck{width:15px;flex:none;color:var(--k-ink)}
.k-mbar-mi .sc{margin-inline-start:auto;font-size:11.5px;color:var(--k-ink-3);font-family:var(--k-mono,monospace);padding-inline-start:22px}
.k-mbar-sep{height:1px;background:var(--k-line);margin:5px 8px}
.k-mbar-mi[disabled]{opacity:.45;pointer-events:none}


/* ===== component: navigation-menu ===== */
/* KATA navigation-menu 1.0.0 — kata-ui.dev/components/navigation-menu */
/* KATA Navigation Menu — one line on top, the depth underneath. */
.k-navm{position:relative;font-family:var(--k-font);color:var(--k-ink)}
.k-navm-bar{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.k-navm-bar::-webkit-scrollbar{display:none}
.k-navm-item{position:relative}
.k-navm-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;border:0;background:none;font-family:inherit;font-size:13.5px;font-weight:550;color:var(--k-ink-2);border-radius:8px;cursor:pointer;text-decoration:none}
.k-navm-btn:hover,.k-navm-item.open .k-navm-btn{background:var(--k-bg-soft);color:var(--k-ink)}
.k-navm-btn svg{transition:transform .18s;color:var(--k-ink-3)}
.k-navm-item.open .k-navm-btn svg{transform:rotate(180deg)}
.k-navm-panel{position:absolute;inset-inline-start:0;top:calc(100% + 8px);min-width:300px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;box-shadow:0 20px 44px -14px rgba(16,24,40,.22);padding:8px;display:none;z-index:60}
.k-navm-item.open .k-navm-panel{display:block}
.k-navm-link{display:flex;gap:11px;padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--k-ink)}
.k-navm-link:hover{background:var(--k-bg-soft)}
.k-navm-link .ic{width:32px;height:32px;flex:none;border:1px solid var(--k-line);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--k-ink-2)}
.k-navm-link b{display:block;font-size:13.5px;font-weight:600}
.k-navm-link span{font-size:12.5px;color:var(--k-ink-2);line-height:1.55;letter-spacing:.01em}
@media (prefers-reduced-motion:reduce){.k-navm-btn svg{transition:none}}


/* ===== component: pagination ===== */
/* KATA pagination 1.0.0 — kata-ui.dev/components/pagination */
/* KATA Pagination */
.k-pagination{display:flex;align-items:center;gap:4px}
.k-page{min-width:32px;height:32px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--k-radius);font-size:13px;color:var(--k-ink-2);text-decoration:none;font-family:var(--k-font);transition:background .13s}
a.k-page:hover{background:var(--k-bg-soft);color:var(--k-ink)}
.k-page[aria-current="page"]{background:var(--k-ink);color:var(--k-bg);font-weight:550}
.k-page.dots{color:var(--k-ink-3);pointer-events:none}
.k-page.disabled{opacity:.4;pointer-events:none}


/* ===== component: scroll-area ===== */
/* KATA scroll-area 1.0.0 — kata-ui.dev/components/scroll-area */
.k-scroll{position:relative;font-family:var(--k-font);text-align:start;color:var(--k-ink)}
.k-scroll-in{max-height:216px;overflow-y:auto;padding-inline-end:6px;scrollbar-width:thin;scrollbar-color:var(--k-border-strong) transparent}
.k-scroll-in::-webkit-scrollbar{width:8px}
.k-scroll-in::-webkit-scrollbar-thumb{background:var(--k-border-strong);border-radius:99px}
.k-scroll-in::-webkit-scrollbar-track{background:transparent}
.k-scroll::after{content:"";position:absolute;left:0;right:10px;bottom:0;height:34px;background:linear-gradient(transparent,var(--k-bg));pointer-events:none}
.k-scroll .rl{display:flex;gap:10px;padding:9px 8px;border-radius:9px;font-size:13px;align-items:baseline}
.k-scroll .rl:hover{background:var(--k-bg-soft)}
.k-scroll .rl time{font-family:var(--k-mono);font-size:11px;color:var(--k-ink-3);flex:none}
.k-scroll .rl b{font-weight:550}


/* ===== component: scrollspy ===== */
/* KATA scrollspy 1.0.0 — kata-ui.dev/components/scrollspy */
/* KATA Scrollspy — the contents list that keeps its place. */
.k-spy{width:100%;display:grid;grid-template-columns:168px 1fr;gap:22px;font-family:var(--k-font);color:var(--k-ink)}
.k-spy nav{display:flex;flex-direction:column;gap:2px;align-self:start}
.k-spy nav a{font-size:13px;color:var(--k-ink-2);text-decoration:none;padding:6px 10px;border-radius:7px;border-inline-start:2px solid var(--k-line)}
.k-spy nav a:hover{color:var(--k-ink);background:var(--k-bg-soft)}
.k-spy nav a.on{color:var(--k-ink);font-weight:600;border-inline-start-color:var(--k-core);background:var(--k-bg-soft)}
.k-spy-body{height:264px;overflow:auto;border:1px solid var(--k-line);border-radius:12px;padding:16px 18px;scroll-behavior:smooth}
.k-spy-body section{margin-bottom:22px}
.k-spy-body h4{font-size:14px;font-weight:600;margin-bottom:5px}
.k-spy-body p{font-size:13px;line-height:1.8;color:var(--k-ink-2);letter-spacing:.01em}
@media (max-width:560px){.k-spy{grid-template-columns:1fr}.k-spy nav{flex-direction:row;flex-wrap:wrap}}


/* ===== component: separator ===== */
/* KATA separator 1.0.0 — kata-ui.dev/components/separator */
/* KATA Separator */
.k-sep{border:0;border-top:1px solid var(--k-line)}
.k-sep-label{display:flex;align-items:center;gap:12px;color:var(--k-ink-3);font-size:12px;font-family:var(--k-font)}
.k-sep-label::before,.k-sep-label::after{content:"";height:1px;background:var(--k-line);flex:1}
.k-sep-v{width:1px;align-self:stretch;background:var(--k-line);flex:none}


/* ===== component: sidebar ===== */
/* KATA sidebar 1.0.0 — kata-ui.dev/components/sidebar */
/* KATA Sidebar — the app sidebar as a part: sections, collapsible groups,
   an icon rail, and the user at the foot. The current page carries the
   vermillion core on its icon, like the app shell and the templates. */
.k-side{width:230px;flex:none;display:flex;flex-direction:column;background:var(--k-bg);border-inline-end:1px solid var(--k-line);padding:14px 10px;font-family:var(--k-font);color:var(--k-ink);text-align:start}
.k-side-brand{display:flex;align-items:center;gap:9px;padding:2px 8px 12px;font-size:14px;font-weight:600}
.k-side-mark{width:24px;height:24px;border-radius:7px;background:var(--k-ink);color:var(--k-bg);display:flex;align-items:center;justify-content:center;flex:none}
.k-side-sec{font-size:11.5px;letter-spacing:.1em;font-weight:650;color:var(--k-ink-2);margin:16px 10px 6px;line-height:1.3}
.k-side-nav{display:grid;gap:2px}
.k-side-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13.5px;letter-spacing:.01em;color:var(--k-ink-2);text-decoration:none;cursor:pointer;background:none;border:0;width:100%;text-align:start;font-family:inherit}
.k-side-item:hover{background:var(--k-bg-soft);color:var(--k-ink)}
.k-side-item.on{background:var(--k-bg-soft);color:var(--k-ink);font-weight:550}
.k-side-item.on svg{color:var(--k-core)}
.k-side-item svg{flex:none}
.k-side-badge{margin-inline-start:auto;font-size:11px;font-weight:600;background:var(--k-bg-soft);border:1px solid var(--k-line);color:var(--k-ink-2);border-radius:99px;padding:1px 7px}
.k-side-item.on .k-side-badge{background:var(--k-bg)}
.k-side-chev{margin-inline-start:auto;transition:transform .18s}
.k-side-group.open .k-side-chev{transform:rotate(180deg)}
.k-side-sub{display:none;gap:2px;margin:2px 0 2px 25px}
.k-side-group.open .k-side-sub{display:grid}
.k-side-sub .k-side-item{font-size:13px;padding:6px 10px}
.k-side-user{margin-top:auto;display:flex;align-items:center;gap:9px;padding:12px 8px 2px;border-top:1px solid var(--k-line)}
.k-side-ava{width:30px;height:30px;border-radius:50%;background:var(--k-ink);color:var(--k-bg);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.k-side-uname{font-size:13px;font-weight:550;line-height:1.3}
.k-side-urole{font-size:11.5px;color:var(--k-ink-3);letter-spacing:.01em}
.k-side.rail{width:60px;padding:14px 8px;align-items:center}
.k-side.rail .k-side-brand{padding:2px 0 12px}
.k-side.rail .k-side-nav{justify-items:center}
.k-side.rail .k-side-item{justify-content:center;padding:9px 0;width:40px}
.k-side.rail .k-side-t,.k-side.rail .k-side-sec,.k-side.rail .k-side-badge,.k-side.rail .k-side-chev,.k-side.rail .k-side-umeta{display:none}
.k-side.rail .k-side-user{justify-content:center;padding:12px 0 2px}
@media (prefers-reduced-motion:reduce){.k-side-chev{transition:none}}


/* ===== component: speed-dial ===== */
/* KATA speed-dial 1.0.0 — kata-ui.dev/components/speed-dial */
/* KATA Speed Dial — one button, a fan of actions. */
.k-dial{position:absolute;right:18px;bottom:18px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-family:var(--k-font)}
.k-dial .acts{display:flex;flex-direction:column;align-items:flex-end;gap:9px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .18s,transform .18s}
.k-dial.open .acts{opacity:1;transform:none;pointer-events:auto}
.k-dial .act{display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;font-family:inherit;padding:0}
.k-dial .act .lbl{font-size:12.5px;font-weight:550;color:var(--k-ink);background:var(--k-bg);border:1px solid var(--k-line);border-radius:8px;padding:5px 10px;box-shadow:0 2px 8px rgba(16,24,40,.08)}
.k-dial .act .fab{width:42px;height:42px;border-radius:50%;background:var(--k-bg);border:1px solid var(--k-line);color:var(--k-ink-2);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(16,24,40,.1)}
.k-dial .act:hover .fab{background:var(--k-bg-soft);color:var(--k-ink)}
.k-dial .main{width:54px;height:54px;border-radius:50%;background:var(--k-ink);color:var(--k-bg);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(16,24,40,.28)}
.k-dial .main svg{transition:transform .2s}
.k-dial.open .main svg{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.k-dial .acts,.k-dial .main svg{transition:none}}


/* ===== component: split-panel ===== */
/* KATA split-panel 1.0.0 — kata-ui.dev/components/split-panel */
.k-split{display:flex;border:1px solid var(--k-line);border-radius:14px;overflow:hidden;background:var(--k-bg);font-family:var(--k-font);text-align:left;color:var(--k-ink);min-height:210px}
.k-split-a{flex:none;overflow:auto;padding:15px}
.k-split-b{flex:1;overflow:auto;padding:15px;min-width:0}
.k-split-h{flex:none;width:9px;margin:0 -1px;cursor:col-resize;display:grid;place-items:center;color:var(--k-ink-3);background:transparent;border-left:1px solid var(--k-line);border-right:1px solid var(--k-line);touch-action:none;z-index:2}
.k-split-h:hover,.k-split-h:focus-visible{background:var(--k-accent-bg);color:var(--k-accent);outline:none}
.k-split h5{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink-3);font-weight:600;margin-bottom:9px}
.k-split p{font-size:13px;line-height:1.75;color:var(--k-ink-2);letter-spacing:.01em}
.k-split .row{font-size:13px;padding:7px 9px;border-radius:8px;white-space:nowrap}
.k-split .row.on{background:var(--k-accent-bg);color:var(--k-accent-ink);font-weight:550}
.k-split-h .dots{width:4px;height:24px;background-image:radial-gradient(circle,currentColor 1.3px,transparent 1.5px);background-size:4px 7px;background-position:center}


/* ===== component: steps ===== */
/* KATA steps 1.0.0 — kata-ui.dev/components/steps */
.k-steps{list-style:none;margin:0;padding:0;display:flex;width:100%;font-family:var(--k-font)}
.k-steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;text-align:center}
.k-steps li::before{content:"";position:absolute;top:13px;left:calc(-50% + 16px);right:calc(50% + 16px);height:2px;background:var(--k-line);border-radius:2px}
.k-steps li:first-child::before{display:none}
.k-steps li[data-state="done"]::before{background:var(--k-ink)}
.k-steps .n{width:27px;height:27px;border-radius:50%;border:2px solid var(--k-line);background:var(--k-bg);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--k-ink-3);position:relative;z-index:1}
.k-steps li[data-state="done"] .n{background:var(--k-ink);border-color:var(--k-ink);color:var(--k-bg)}
.k-steps li[data-state="current"] .n{border-color:var(--k-ink);color:var(--k-ink)}
.k-steps li[data-state="current"] .n::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--k-core);position:absolute}
.k-steps .t{font-size:12px;white-space:nowrap;font-weight:550;color:var(--k-ink-3)}
.k-steps li[data-state="current"] .t{color:var(--k-ink)}
.k-steps li[data-state="done"] .t{color:var(--k-ink-2)}


/* ===== component: tabs ===== */
/* KATA tabs 1.0.0 — kata-ui.dev/components/tabs */
.tabs{display:inline-flex;background:var(--k-seg);border-radius:10px;padding:3px;gap:2px;position:relative;font-family:var(--k-font)}
.tabs button{position:relative;z-index:1;border:0;background:transparent;font-family:var(--k-font);font-size:13px;font-weight:500;color:var(--k-ink-2);padding:7px 15px;border-radius:8px;cursor:pointer}
.tabs button.on{color:var(--k-ink)}
.tabs .thumb{position:absolute;top:3px;bottom:3px;background:var(--k-bg);border-radius:8px;box-shadow:0 1px 3px rgba(16,24,40,.14);transition:left .22s cubic-bezier(.3,.7,.3,1),width .22s cubic-bezier(.3,.7,.3,1)}
.tabpane{margin-top:14px;font-size:13.5px;color:var(--k-ink-2);line-height:1.8;background:var(--k-bg);border:1px solid var(--k-line);border-radius:10px;padding:16px 18px;width:100%;font-family:var(--k-font);letter-spacing:.012em}


/* ===== component: tree ===== */
/* KATA tree 1.0.0 — kata-ui.dev/components/tree */
.k-tree{list-style:none;margin:0;padding:0;font-family:var(--k-font);font-size:13.5px;color:var(--k-ink);text-align:start}
.k-tree ul{list-style:none;margin:0;padding-inline-start:19px;border-inline-start:1px solid var(--k-line);margin-inline-start:8px}
.k-tree-row{display:flex;align-items:center;gap:7px;padding:4.5px 7px;border-radius:8px}
.k-tree-row:hover{background:var(--k-bg-soft)}
.k-tree-row .tg{width:20px;height:20px;border:none;background:transparent;color:var(--k-ink-3);display:grid;place-items:center;cursor:pointer;border-radius:5px;padding:0;flex:none}
.k-tree-row .tg svg{transition:transform .15s var(--k-ease)}
.k-tree-row .tg[aria-expanded="false"] svg{transform:rotate(-90deg)}
.k-tree-row .fi{color:var(--k-ink-3);display:grid;place-items:center;flex:none}
.k-tree-row .fi.fold{color:var(--k-accent)}
.k-tree-row .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-tree-row.sel{background:var(--k-accent-bg);color:var(--k-accent-ink);font-weight:550}


/* ===== component: alert-dialog ===== */
/* KATA alert-dialog 1.0.0 — kata-ui.dev/components/alert-dialog */
.kalert{border:0;border-radius:16px;padding:0;max-width:420px;width:calc(100% - 40px);box-shadow:0 30px 80px -20px rgba(0,0,0,.4);background:var(--k-bg);color:var(--k-ink);font-family:var(--k-font)}
.kalert::backdrop{background:rgba(24,24,27,.45);backdrop-filter:blur(3px)}
.kalert-in{padding:26px}
.kalert-in h3{font-size:16.5px;font-weight:600}
.kalert-in p{margin-top:9px;font-size:13.5px;color:var(--k-ink-2);line-height:1.8;letter-spacing:.012em}
.kalert-row{display:flex;gap:9px;justify-content:flex-end;margin-top:22px}


/* ===== component: command ===== */
/* KATA command 1.0.0 — kata-ui.dev/components/command */
.kcmd{border:0;padding:0;border-radius:14px;width:min(560px,calc(100% - 40px));margin:12vh auto auto;background:var(--k-bg);color:var(--k-ink);font-family:var(--k-font);box-shadow:0 30px 80px -20px rgba(0,0,0,.45)}
.kcmd::backdrop{background:rgba(24,24,27,.45);backdrop-filter:blur(3px)}
.kcmd-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--k-line);color:var(--k-ink-3)}
.kcmd-input{-webkit-appearance:none;appearance:none;flex:1;border:0;outline:0;font:inherit;font-size:15px;background:transparent;color:var(--k-ink)}
.kcmd-input::placeholder{color:var(--k-ink-3)}
.kcmd-list{list-style:none;margin:0;padding:6px;max-height:300px;overflow:auto}
.kcmd-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:13.5px;color:var(--k-ink);cursor:pointer;text-align:start}
.kcmd-item svg{color:var(--k-ink-3);flex:none}
.kcmd-item.active{background:var(--k-bg-soft)}
.kcmd-hint{margin-inline-start:auto;font-size:11px;color:var(--k-ink-3)}
.kcmd-empty{padding:22px 10px;text-align:center;font-size:13px;color:var(--k-ink-3)}
/* iOS: fields under 16px make Safari zoom the page on focus — 16px on small screens (the mold, KATA.md) */
@media (max-width:640px){.kcmd-input{font-size:16px}}


/* ===== component: context-menu ===== */
/* KATA context-menu 1.0.0 — kata-ui.dev/components/context-menu */
.k-ctx-zone{border:1.5px dashed var(--k-border-strong);border-radius:14px;min-height:168px;display:grid;place-items:center;font-family:var(--k-font);color:var(--k-ink-3);font-size:13px;text-align:center;padding:16px}
.k-ctx{position:fixed;z-index:90;width:224px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:12px;box-shadow:0 20px 44px -12px rgba(16,24,40,.28);padding:5px;font-family:var(--k-font);text-align:start}
.k-ctx[hidden]{display:none}
.k-ctx button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:none;background:transparent;border-radius:8px;font:inherit;font-size:13px;color:var(--k-ink);cursor:pointer}
.k-ctx button:hover,.k-ctx button:focus-visible{background:var(--k-bg-soft);outline:none}
.k-ctx button .hint{margin-inline-start:auto;font-family:var(--k-mono);font-size:11px;color:var(--k-ink-3)}
.k-ctx button.danger{color:var(--k-danger)}
.k-ctx hr{border:none;border-top:1px solid var(--k-line);margin:5px 4px}


/* ===== component: drawer ===== */
/* KATA drawer 1.0.0 — kata-ui.dev/components/drawer */
.kdrawer{border:0;padding:0;margin:0 0 0 auto;inset:0 0 0 auto;position:fixed;height:100dvh;max-height:100dvh;width:min(360px,92vw);background:var(--k-bg);color:var(--k-ink);font-family:var(--k-font);box-shadow:-24px 0 60px -24px rgba(0,0,0,.35)}
.kdrawer::backdrop{background:rgba(24,24,27,.45);backdrop-filter:blur(3px)}
.kdrawer[open]{animation:kdrawer-in var(--k-dur-2) var(--k-ease)}
@keyframes kdrawer-in{from{transform:translateX(36px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.kdrawer[open]{animation:none}}
.kdrawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--k-line)}
.kdrawer-title{font-size:15px;font-weight:600}
.kdrawer-body{padding:20px;font-size:13.5px;line-height:1.85;color:var(--k-ink-2);letter-spacing:.012em}
.kdrawer-foot{display:flex;gap:9px;justify-content:flex-end;padding:16px 20px;border-top:1px solid var(--k-line)}


/* ===== component: dropdown ===== */
/* KATA dropdown 1.0.0 — kata-ui.dev/components/dropdown */
.dd{position:relative;display:inline-block}
.menu{position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:196px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:11px;box-shadow:0 16px 40px -14px rgba(16,24,40,.25);padding:5px;opacity:0;transform:translateY(-4px) scale(.98);pointer-events:none;transition:opacity .15s,transform .15s;z-index:20}
.menu.open{opacity:1;transform:none;pointer-events:auto}
.menu a{display:flex;gap:9px;align-items:center;padding:8px 10px;border-radius:7px;color:var(--k-ink);text-decoration:none;font-size:13.5px;font-family:var(--k-font)}
.menu a:hover{background:var(--k-bg-soft)}
.menu a.danger{color:var(--k-danger)}
.menu hr{border:0;border-top:1px solid var(--k-line);margin:5px 4px}
.menu .mh{display:block;font-size:11px;color:var(--k-ink-3);padding:6px 10px 3px;letter-spacing:.06em}


/* ===== component: hover-card ===== */
/* KATA hover-card 1.0.0 — kata-ui.dev/components/hover-card */
.k-hover{position:relative;display:inline-block;font-family:var(--k-font)}
.k-hover .card{position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,4px);width:262px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;box-shadow:0 16px 40px -12px rgba(16,24,40,.18);padding:15px;text-align:left;opacity:0;pointer-events:none;transition:opacity .16s var(--k-ease),transform .16s var(--k-ease);z-index:40}
.k-hover.open .card{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.k-hover .card h4{font-size:13.5px;font-weight:600;color:var(--k-ink)}
.k-hover .card p{margin-top:4px;font-size:12.5px;line-height:1.65;color:var(--k-ink-2);letter-spacing:.01em}
.k-hover .trigger{font-weight:550;color:var(--k-accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--k-accent-line)}


/* ===== component: modal ===== */
/* KATA modal 1.0.0 — kata-ui.dev/components/modal */
.kmodal{border:0;border-radius:16px;padding:0;max-width:420px;width:calc(100% - 40px);box-shadow:0 30px 80px -20px rgba(0,0,0,.4);background:var(--k-bg);color:var(--k-ink);font-family:var(--k-font)}
.kmodal::backdrop{background:rgba(24,24,27,.45);backdrop-filter:blur(3px)}
.modal-in{padding:26px}
.modal-in h3{font-size:16.5px;font-weight:600}
.modal-in p{margin-top:9px;font-size:13.5px;color:var(--k-ink-2);line-height:1.8;letter-spacing:.012em}
.modal-in .row{display:flex;gap:9px;justify-content:flex-end;margin-top:22px}


/* ===== component: popover ===== */
/* KATA popover 1.0.0 — kata-ui.dev/components/popover */
.kpop-wrap{position:relative;display:inline-block;font-family:var(--k-font)}
.kpop{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,4px);width:272px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:var(--k-radius-lg);box-shadow:var(--k-shadow-overlay);padding:16px;opacity:0;pointer-events:none;transition:opacity var(--k-dur-1) var(--k-ease),transform var(--k-dur-1) var(--k-ease);z-index:var(--k-z-overlay);text-align:start}
.kpop.open{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.kpop-h{font-size:13.5px;font-weight:600;color:var(--k-ink)}
.kpop-p{margin-top:6px;font-size:12.5px;line-height:1.75;color:var(--k-ink-2);letter-spacing:.01em}
.kpop-row{display:flex;gap:8px;margin-top:14px}


/* ===== component: tooltip ===== */
/* KATA tooltip 1.0.0 — kata-ui.dev/components/tooltip */
/* KATA Tooltip — CSS only, driven by [data-tip]. */
.k-tip{position:relative}
.k-tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%) translateY(2px);background:var(--k-ink);color:var(--k-bg);font-family:var(--k-font);font-size:11.5px;font-weight:500;line-height:1;padding:5px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:30}
.k-tip::before{content:"";position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--k-ink);opacity:0;pointer-events:none;transition:opacity .15s;z-index:30}
.k-tip:hover::after,.k-tip:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.k-tip:hover::before,.k-tip:focus-visible::before{opacity:1}
.k-tip[data-side="bottom"]::after{bottom:auto;top:calc(100% + 7px)}
.k-tip[data-side="bottom"]::before{bottom:auto;top:calc(100% + 2px);border-top-color:transparent;border-bottom-color:var(--k-ink)}


/* ===== component: tour ===== */
/* KATA tour 1.0.0 — kata-ui.dev/components/tour */
/* KATA Tour — a ring on the target, a card beside it, an exit on every step */
.k-tour-stage{position:relative;border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg-soft);padding:18px;min-height:196px;overflow:hidden}
.k-tour-anchor{position:relative;display:inline-flex}
.k-tour-ring{position:absolute;border:2px solid var(--k-accent);border-radius:10px;box-shadow:0 0 0 5px var(--k-accent-bg-strong);pointer-events:none;transition:top var(--k-dur-2) var(--k-ease),left var(--k-dur-2) var(--k-ease),width var(--k-dur-2) var(--k-ease),height var(--k-dur-2) var(--k-ease)}
.k-tour-anchor .k-tour-ring{inset:-5px}
.k-tour{position:absolute;width:262px;max-width:calc(100% - 24px);background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;box-shadow:0 18px 44px -14px rgba(16,24,40,.28);padding:16px;z-index:5;font-family:var(--k-font)}
.k-tour h4{margin:0 0 5px;font-size:14px;font-weight:650;color:var(--k-ink)}
.k-tour p{margin:0;font-size:13px;line-height:1.6;color:var(--k-ink-2);letter-spacing:.01em}
.k-tour-arrow{position:absolute;top:-6px;left:28px;width:11px;height:11px;background:var(--k-bg);border-left:1px solid var(--k-line);border-top:1px solid var(--k-line);transform:rotate(45deg)}
.k-tour.flip .k-tour-arrow{top:auto;bottom:-6px;transform:rotate(225deg)}
.k-tour-ft{display:flex;align-items:center;gap:8px;margin-top:14px}
.k-tour-dots{display:flex;gap:5px;margin-right:auto;align-items:center}
.k-tour-dots i{width:6px;height:6px;border-radius:99px;background:var(--k-zinc-300);display:block}
.k-tour-dots i.on{background:var(--k-core);width:16px}


/* ===== component: alert ===== */
/* KATA alert 1.0.0 — kata-ui.dev/components/alert */
/* KATA Alert */
.k-alert{display:flex;gap:10px;padding:12px 14px;border:1px solid var(--k-accent-line);border-radius:var(--k-radius-lg);background:var(--k-accent-bg);color:var(--k-ink);font-size:13.5px;line-height:1.65;letter-spacing:.012em}
.k-alert svg{flex:none;margin-top:1px;color:var(--k-accent-ink)}
.k-alert b{font-weight:600}
.k-alert p{color:var(--k-ink-2)}
.k-alert[data-tone="success"]{background:var(--k-success-bg);border-color:var(--k-success-line)}
.k-alert[data-tone="success"] svg{color:var(--k-success-ink)}
.k-alert[data-tone="warning"]{background:var(--k-yamabuki-bg);border-color:var(--k-yamabuki-line)}
.k-alert[data-tone="warning"] svg{color:var(--k-yamabuki-ink)}
.k-alert[data-tone="danger"]{background:var(--k-danger-bg);border-color:var(--k-danger-line)}
.k-alert[data-tone="danger"] svg{color:var(--k-danger-ink)}


/* ===== component: badge ===== */
/* KATA badge 1.0.0 — kata-ui.dev/components/badge */
.badge{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 9px;border-radius:99px;font-size:11.5px;font-weight:500;background:var(--k-bg-soft);color:var(--k-ink-2);border:1px solid var(--k-line);font-family:var(--k-font)}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.dark{background:var(--k-ink);color:var(--k-bg);border-color:var(--k-ink)}
.badge.asagi{background:var(--k-accent-bg);color:var(--k-accent-ink);border-color:var(--k-accent-line)}
.badge.red{background:var(--k-danger-bg);color:var(--k-danger-ink);border-color:var(--k-danger-line)}
.badge.yamabuki{background:var(--k-yamabuki-bg);color:var(--k-yamabuki-ink);border-color:var(--k-yamabuki-line)}


/* ===== component: empty-state ===== */
/* KATA empty-state 1.0.0 — kata-ui.dev/components/empty-state */
/* KATA Empty state */
.k-empty{display:grid;justify-items:center;text-align:center;gap:7px;padding:36px 22px;border:1.5px dashed var(--k-border-strong);border-radius:var(--k-radius-lg);background:var(--k-bg)}
.k-empty .k-empty-ic{width:46px;height:46px;border-radius:50%;background:var(--k-bg-soft);display:grid;place-content:center;color:var(--k-ink-3);margin-bottom:3px}
.k-empty h3{font-size:14px;font-weight:600;color:var(--k-ink);font-family:var(--k-font)}
.k-empty p{font-size:13px;line-height:1.7;color:var(--k-ink-2);max-width:36ch;font-family:var(--k-font);letter-spacing:.01em}
.k-empty .k-empty-act{margin-top:9px}


/* ===== component: meter ===== */
/* KATA meter 1.0.0 — kata-ui.dev/components/meter */
/* KATA Meter */
.k-meter-track{position:relative;height:8px;border-radius:var(--k-radius-full);background:var(--k-seg);overflow:hidden}
.k-meter-fill{height:100%;border-radius:var(--k-radius-full);background:var(--k-ink)}
.k-meter-track::after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:10% 100%}
.k-meter[data-tone="warning"] .k-meter-fill{background:var(--k-yamabuki)}
.k-meter[data-tone="critical"] .k-meter-fill{background:var(--k-danger)}
.k-meter-scale{display:flex;justify-content:space-between;margin-top:5px;font-family:var(--k-mono);font-size:10.5px;color:var(--k-ink-3)}


/* ===== component: progress ===== */
/* KATA progress 1.0.0 — kata-ui.dev/components/progress */
/* KATA Progress */
.k-progress{height:6px;border-radius:var(--k-radius-full);background:var(--k-track);overflow:hidden}
.k-progress-bar{height:100%;border-radius:var(--k-radius-full);background:var(--k-ink);transition:width .3s cubic-bezier(.3,.7,.3,1)}
.k-progress[data-tone="accent"] .k-progress-bar{background:var(--k-accent)}


/* ===== component: result ===== */
/* KATA result 1.0.0 — kata-ui.dev/components/result */
/* KATA Result — a verdict, centered. */
.k-result{font-family:var(--k-font);color:var(--k-ink);text-align:center;max-width:420px;margin:0 auto;padding:26px 20px}
.k-result-ic{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 15px}
.k-result-ic.ok{background:var(--k-success-bg);color:var(--k-success-ink)}
.k-result-ic.err{background:var(--k-danger-bg);color:var(--k-danger-ink)}
.k-result h3{font-size:17px;font-weight:600;letter-spacing:-.015em}
.k-result p{margin-top:8px;font-size:13.5px;line-height:1.8;color:var(--k-ink-2);letter-spacing:.012em}
.k-result .acts{margin-top:18px;display:flex;gap:9px;justify-content:center;flex-wrap:wrap}


/* ===== component: skeleton ===== */
/* KATA skeleton 1.0.0 — kata-ui.dev/components/skeleton */
/* KATA Skeleton */
.k-sk{display:block;border-radius:var(--k-radius-sm);background:linear-gradient(90deg,var(--k-line) 25%,var(--k-bg) 50%,var(--k-line) 75%);background-size:200% 100%;animation:k-shimmer 1.4s ease-in-out infinite}
.k-sk-circle{border-radius:50%}
@keyframes k-shimmer{0%{background-position:120% 0}100%{background-position:-80% 0}}
@media (prefers-reduced-motion: reduce){.k-sk{animation:none}}


/* ===== component: spinner ===== */
/* KATA spinner 1.0.0 — kata-ui.dev/components/spinner */
/* KATA Spinner */
.k-spinner{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid var(--k-line);border-top-color:var(--k-ink);animation:k-spin .7s linear infinite;flex:none}
.k-spinner[data-size="sm"]{width:14px;height:14px;border-width:2px}
.k-spinner[data-size="lg"]{width:26px;height:26px;border-width:3px}
@keyframes k-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.k-spinner{animation-duration:1.6s}}


/* ===== component: toast ===== */
/* KATA toast 1.0.0 — kata-ui.dev/components/toast */
.toasts{position:fixed;inset-inline-end:18px;bottom:18px;display:flex;flex-direction:column;gap:9px;z-index:99;font-family:var(--k-font)}
.toast{display:flex;gap:11px;align-items:flex-start;background:var(--k-ink);color:var(--k-toast-ink);border-radius:12px;padding:13px 16px;font-size:13.5px;box-shadow:0 20px 44px -14px rgba(0,0,0,.45);animation:k-tin .3s cubic-bezier(.3,1.2,.4,1);max-width:320px}
.toast small{display:block;color:var(--k-toast-sub);margin-top:2px;font-size:12px;line-height:1.6}
@keyframes k-tin{from{opacity:0;transform:translateY(10px) scale(.97)}}

@media (prefers-reduced-motion:reduce){.toast{animation:none;transition:none!important}}


/* ===== component: aspect-ratio ===== */
/* KATA aspect-ratio 1.0.0 — kata-ui.dev/components/aspect-ratio */
.k-ar{position:relative;border-radius:12px;overflow:hidden;background:var(--k-bg-soft);border:1px solid var(--k-line);font-family:var(--k-font);color:var(--k-ink-3)}
.k-ar[data-r="16/9"]{aspect-ratio:16/9}
.k-ar[data-r="4/3"]{aspect-ratio:4/3}
.k-ar[data-r="1/1"]{aspect-ratio:1/1}
.k-ar .in{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:6px;font-size:12px;font-weight:550}


/* ===== component: avatar ===== */
/* KATA avatar 1.0.0 — kata-ui.dev/components/avatar */
/* KATA Avatar */
.k-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--k-zinc-200);color:var(--k-zinc-600);font-size:11.5px;font-weight:600;letter-spacing:.02em;overflow:hidden;flex:none;user-select:none}
.k-avatar img{width:100%;height:100%;object-fit:cover}
.k-avatar[data-size="sm"]{width:24px;height:24px;font-size:9.5px}
.k-avatar[data-size="lg"]{width:40px;height:40px;font-size:14px}
.k-avatar[data-status]::after{content:"";position:absolute;right:0;bottom:0;width:9px;height:9px;border-radius:50%;background:var(--k-success);border:2px solid var(--k-bg)}
.k-avatars{display:inline-flex}
.k-avatars .k-avatar{border:2px solid var(--k-bg)}
.k-avatars .k-avatar + .k-avatar{margin-inline-start:-9px}


/* ===== component: bar-chart ===== */
/* KATA bar-chart 1.0.0 — kata-ui.dev/components/bar-chart */
.k-chart{font-family:var(--k-font);text-align:start;margin:0}
.k-chart figcaption{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;font-weight:600;color:var(--k-ink);margin-bottom:14px}
.k-chart figcaption span{font-size:12px;font-weight:500;color:var(--k-ink-3)}
.k-bars{display:flex;gap:10px;align-items:flex-end;height:168px;border-bottom:2px solid var(--k-line);padding:0 2px}
.k-bar{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.k-bar i{display:block;width:100%;max-width:36px;background:var(--k-accent);border-radius:5px 5px 0 0;transform-origin:bottom}
.k-bar.hot i{background:var(--k-ink)}
.k-bar .v{font-family:var(--k-mono);font-size:11px;color:var(--k-ink-3)}
.k-bar.hot .v{color:var(--k-ink);font-weight:600}
.k-bar-l{display:flex;gap:10px;padding:8px 2px 0}
.k-bar-l span{flex:1;text-align:center;font-size:11px;color:var(--k-ink-3)}
@keyframes k-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.k-bar i{animation:none}}


/* ===== component: candlestick-chart ===== */
/* KATA candlestick-chart 1.0.0 — kata-ui.dev/components/candlestick-chart */
/* KATA Candlestick Chart — precomputed OHLC candles on the line chart's frame */
.k-candle{font-family:var(--k-font);text-align:start;margin:0}
.k-candle figcaption{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;font-weight:600;color:var(--k-ink);margin-bottom:12px}
.k-candle figcaption span{font-size:12px;font-weight:500;color:var(--k-ink-3)}
.k-candle svg{width:100%;height:auto;display:block}
.k-candle .x{display:flex;justify-content:space-between;font-size:11px;color:var(--k-ink-3);margin-top:8px;padding:0 1px}


/* ===== component: card ===== */
/* KATA card 1.0.0 — kata-ui.dev/components/card */
.k-card{border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);font-family:var(--k-font);color:var(--k-ink);overflow:hidden;text-align:start}
.k-card-h{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 0}
.k-card-h h3{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.k-card-h p{margin-top:3px;font-size:12.5px;color:var(--k-ink-3);line-height:1.6;letter-spacing:.01em}
.k-card-h .sp{margin-inline-start:auto;flex:none}
.k-card-b{padding:14px 18px 18px;font-size:13.5px;line-height:1.75;color:var(--k-ink-2);letter-spacing:.012em}
.k-card-f{display:flex;align-items:center;gap:9px;padding:13px 18px;border-top:1px solid var(--k-line);background:var(--k-bg-soft);font-size:12.5px;color:var(--k-ink-3)}
.k-card-f .sp{margin-inline-start:auto;display:flex;gap:9px}


/* ===== component: carousel ===== */
/* KATA carousel 1.0.0 — kata-ui.dev/components/carousel */
.k-car{font-family:var(--k-font);text-align:start}
.k-car-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.k-car-track::-webkit-scrollbar{display:none}
.k-car-slide{flex:0 0 78%;scroll-snap-align:start;border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);padding:18px;min-height:118px}
.k-car-slide h4{font-size:14px;font-weight:600;color:var(--k-ink)}
.k-car-slide p{margin-top:5px;font-size:12.5px;line-height:1.7;color:var(--k-ink-2);letter-spacing:.01em}
.k-car-ui{display:flex;align-items:center;gap:10px;margin-top:12px}
.k-car-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--k-line);background:var(--k-bg);color:var(--k-ink);display:grid;place-items:center;cursor:pointer}
.k-car-btn:hover{background:var(--k-bg-soft)}
.k-car-dots{display:flex;gap:6px;margin-inline-start:auto}
.k-car-dots button{width:7px;height:7px;border-radius:99px;border:none;background:var(--k-line);cursor:pointer;padding:0;transition:width .18s var(--k-ease),background .18s}
.k-car-dots button[aria-current="true"]{width:20px;background:var(--k-ink)}


/* ===== component: chip ===== */
/* KATA chip 1.0.0 — kata-ui.dev/components/chip */
.k-chip{display:inline-flex;align-items:center;gap:7px;height:29px;padding:0 7px 0 12px;border:1px solid var(--k-line);border-radius:99px;background:var(--k-bg);font-family:var(--k-font);font-size:12.5px;font-weight:500;color:var(--k-ink)}
.k-chip[data-on]{background:var(--k-ink);border-color:var(--k-ink);color:var(--k-bg)}
.k-chip-x{width:19px;height:19px;border-radius:50%;border:none;background:var(--k-bg-soft);color:var(--k-ink-2);display:grid;place-items:center;cursor:pointer;padding:0}
.k-chip[data-on] .k-chip-x{background:rgba(255,255,255,.16);color:var(--k-bg)}
.k-chip-x:hover{color:var(--k-danger)}
.k-chips{display:flex;flex-wrap:wrap;gap:8px}


/* ===== component: data-table ===== */
/* KATA data-table 1.0.0 — kata-ui.dev/components/data-table */
.k-dt{border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);font-family:var(--k-font);overflow:hidden;text-align:start;color:var(--k-ink)}
.k-dt-t{width:100%;border-collapse:collapse;font-size:13.5px}
.k-dt-t th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink-3);font-weight:600;text-align:start;padding:11px 14px;border-bottom:1px solid var(--k-line);background:var(--k-bg-soft);white-space:nowrap}
.k-dt-t td{padding:12px 14px;border-bottom:1px solid var(--k-line);vertical-align:middle}
.k-dt-t tbody tr:hover{background:var(--k-bg-soft)}
.k-dt-t tbody tr:last-child td{border-bottom:none}
.k-dt-t .num{text-align:end;font-variant-numeric:tabular-nums}
.k-dt-t th.num{text-align:end}
.k-dt-sort{display:inline-flex;align-items:center;gap:5px;border:none;background:none;font:inherit;color:inherit;cursor:pointer;padding:0;text-transform:inherit;letter-spacing:inherit}
.k-dt-sort .arr{display:grid;place-items:center;opacity:.35;transition:transform .15s var(--k-ease),opacity .15s}
.k-dt-sort[data-dir="asc"] .arr{opacity:1;transform:rotate(180deg)}
.k-dt-sort[data-dir="desc"] .arr{opacity:1}
.k-dt input[type="checkbox"]{accent-color:var(--k-accent);width:15px;height:15px;cursor:pointer;vertical-align:middle}
.k-dt-f{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--k-line);font-size:12.5px;color:var(--k-ink-3)}
.k-dt-f .pg{margin-inline-start:auto;display:flex;gap:7px}


/* ===== component: descriptions ===== */
/* KATA descriptions 1.0.0 — kata-ui.dev/components/descriptions */
/* KATA Descriptions — a definition list with hairlines. */
.k-desc{font-family:var(--k-font);color:var(--k-ink);max-width:520px}
.k-desc .row{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:10px 2px;border-top:1px solid var(--k-line)}
.k-desc .row:first-child{border-top:0}
.k-desc dt{font-size:12.5px;color:var(--k-ink-3);font-weight:500;padding-top:1px}
.k-desc dd{font-size:13.5px;line-height:1.65;letter-spacing:.012em}
.k-desc.boxed{border:1px solid var(--k-line);border-radius:var(--k-radius-lg);padding:6px 16px}
.k-desc.pairs .row{grid-template-columns:110px 1fr 110px 1fr}
@media (max-width:560px){.k-desc .row{grid-template-columns:110px 1fr}.k-desc.pairs .row{grid-template-columns:110px 1fr}}


/* ===== component: donut-chart ===== */
/* KATA donut-chart 1.0.0 — kata-ui.dev/components/donut-chart */
.k-donut{font-family:var(--k-font);text-align:start;margin:0}
.k-donut figcaption{font-size:13px;font-weight:600;color:var(--k-ink);margin-bottom:12px}
.k-donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.k-donut-ring{position:relative;width:158px;height:158px;flex:none}
.k-donut-ring svg{transform:rotate(-90deg)}
.k-donut-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.k-donut-c b{font-size:21px;font-weight:650;letter-spacing:-.02em;color:var(--k-ink)}
.k-donut-c span{font-size:11px;color:var(--k-ink-3)}
.k-donut-leg{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:12.5px;color:var(--k-ink-2)}
.k-donut-leg li{display:flex;align-items:center;gap:8px}
.k-donut-leg .dot{width:9px;height:9px;border-radius:3px;flex:none}
.k-donut-leg b{margin-inline-start:auto;font-weight:600;color:var(--k-ink);font-family:var(--k-mono);font-size:12px;padding-inline-start:16px}


/* ===== component: funnel-chart ===== */
/* KATA funnel-chart 1.0.0 — kata-ui.dev/components/funnel-chart */
.k-funnel{font-family:var(--k-font);text-align:start;color:var(--k-ink)}
.k-funnel .st{display:grid;grid-template-columns:92px 1fr 74px;gap:12px;align-items:center;padding:5px 0}
.k-funnel .nm{font-size:12.5px;font-weight:550;color:var(--k-ink-2)}
.k-funnel .bar{height:30px;border-radius:7px;background:var(--k-accent)}
.k-funnel .st:nth-child(2) .bar{opacity:.78}
.k-funnel .st:nth-child(3) .bar{opacity:.56}
.k-funnel .st:nth-child(4) .bar{opacity:.36}
.k-funnel .vl{font-size:12.5px;text-align:end;font-variant-numeric:tabular-nums}
.k-funnel .vl span{color:var(--k-ink-3);font-size:11px;display:block}
.k-funnel figcaption{margin-top:9px;font-size:12px;color:var(--k-ink-3)}


/* ===== component: gauge ===== */
/* KATA gauge 1.0.0 — kata-ui.dev/components/gauge */
.k-gauge{font-family:var(--k-font);text-align:start;margin:0}
.k-gauge figcaption{font-size:13px;font-weight:600;color:var(--k-ink);margin-bottom:6px}
.k-gauge-wrap{position:relative;width:210px}
.k-gauge-c{position:absolute;left:0;right:0;bottom:2px;text-align:center}
.k-gauge-c b{font-size:27px;font-weight:650;letter-spacing:-.02em;color:var(--k-ink)}
.k-gauge-c span{display:block;font-size:11.5px;color:var(--k-ink-3);margin-top:1px}


/* ===== component: glass-panel ===== */
/* KATA glass-panel 1.0.0 — kata-ui.dev/components/glass-panel */
.k-glass{background:color-mix(in srgb,var(--k-bg) 68%,transparent);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);border:1px solid color-mix(in srgb,var(--k-on-color) 32%,transparent);border-radius:14px;box-shadow:0 18px 40px -18px rgba(0,0,0,.45);color:var(--k-ink);font-family:var(--k-font);padding:16px;text-align:left}
.k-glass-h{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;font-weight:600;letter-spacing:.04em}
.k-glass-h span{font-weight:500;color:var(--k-ink-3);letter-spacing:0}
.k-glass-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid color-mix(in srgb,var(--k-on-color) 16%,transparent);font-size:13px}
.k-glass-row:first-of-type{margin-top:8px}
.k-glass-num{font-family:var(--k-mono);font-size:11px;color:var(--k-ink-3);width:13px}
.k-glass-val{margin-left:auto;font-size:11.5px;color:var(--k-ink-3)}


/* ===== component: heatmap ===== */
/* KATA heatmap 1.0.0 — kata-ui.dev/components/heatmap */
.k-hm{font-family:var(--k-font);text-align:start;margin:0}
.k-hm figcaption{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;font-weight:600;color:var(--k-ink);margin-bottom:12px}
.k-hm figcaption span{font-size:12px;font-weight:500;color:var(--k-ink-3)}
.k-hm-grid{display:grid;overflow-x:auto;max-width:100%;padding-bottom:4px;grid-template-rows:repeat(7,11px);grid-auto-flow:column;grid-auto-columns:11px;gap:3px}
.k-hm-grid i{border-radius:3px;display:block}
.k-hm-grid .l0{background:var(--k-zinc-100)}
.k-hm-grid .l1{background:color-mix(in srgb,var(--k-accent) 26%,var(--k-bg))}
.k-hm-grid .l2{background:color-mix(in srgb,var(--k-accent) 52%,var(--k-bg))}
.k-hm-grid .l3{background:color-mix(in srgb,var(--k-accent) 78%,var(--k-bg))}
.k-hm-grid .l4{background:var(--k-accent)}
.k-hm-leg{display:flex;align-items:center;gap:4px;margin-top:11px;font-size:11px;color:var(--k-ink-3)}
.k-hm-leg i{width:11px;height:11px;border-radius:3px;display:block}


/* ===== component: kbd ===== */
/* KATA kbd 1.0.0 — kata-ui.dev/components/kbd */
/* KATA Kbd */
.k-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 5px;border:1px solid var(--k-line);border-bottom-width:2px;border-radius:6px;background:var(--k-bg-soft);color:var(--k-ink-2);font-family:var(--k-mono);font-size:11px;font-weight:500;line-height:1}


/* ===== component: line-chart ===== */
/* KATA line-chart 1.0.0 — kata-ui.dev/components/line-chart */
.k-line-chart{font-family:var(--k-font);text-align:start;margin:0}
.k-line-chart figcaption{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;font-weight:600;color:var(--k-ink);margin-bottom:12px}
.k-line-chart figcaption span{font-size:12px;font-weight:500;color:var(--k-ink-3)}
.k-line-chart svg{width:100%;height:auto;display:block}
.k-line-chart .line{stroke:var(--k-accent);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.k-line-chart .x{display:flex;justify-content:space-between;font-size:11px;color:var(--k-ink-3);margin-top:8px;padding:0 1px}
@keyframes k-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.k-line-chart .line{animation:none;stroke-dashoffset:0}}


/* ===== component: list ===== */
/* KATA list 1.0.0 — kata-ui.dev/components/list */
.k-list{list-style:none;margin:0;padding:0;border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);font-family:var(--k-font);overflow:hidden;text-align:start}
.k-list li+li{border-top:1px solid var(--k-line)}
.k-list-row{display:flex;align-items:center;gap:12px;padding:12px 15px;text-decoration:none;color:var(--k-ink)}
a.k-list-row:hover{background:var(--k-bg-soft)}
.k-list-row .main{flex:1;min-width:0}
.k-list-row .tt{display:block;font-size:13.5px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-list-row .ss{display:block;font-size:12px;color:var(--k-ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-list-row .meta{font-size:12px;color:var(--k-ink-3);flex:none}
.k-list-row .chev{color:var(--k-ink-3);flex:none;display:grid;place-items:center}


/* ===== component: qr-code ===== */
/* KATA qr-code 1.0.0 — kata-ui.dev/components/qr-code */
/* KATA QR Code — the code is drawn by the part's own encoder. */
.k-qr{display:inline-block;background:var(--k-on-color);border:1px solid var(--k-line);border-radius:var(--k-radius-lg);padding:12px;line-height:0}
.k-qr svg{width:100%;height:auto;display:block}
.k-qr .qr-fallback{font-size:12.5px;line-height:1.6;color:var(--k-danger-ink);max-width:22ch;letter-spacing:.01em}


/* ===== component: radar-chart ===== */
/* KATA radar-chart 1.0.0 — kata-ui.dev/components/radar-chart */
.k-radar{font-family:var(--k-font);text-align:start;color:var(--k-ink)}
.k-radar figcaption{display:flex;gap:14px;font-size:11.5px;color:var(--k-ink-2);margin-top:6px}
.k-radar figcaption i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:5px}


/* ===== component: scatter-chart ===== */
/* KATA scatter-chart 1.0.0 — kata-ui.dev/components/scatter-chart */
.k-scatter{font-family:var(--k-font);text-align:start;color:var(--k-ink)}
.k-scatter figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:9px}
.k-scatter .cap{font-size:12px;color:var(--k-ink-3)}
.k-scatter .lg{display:flex;gap:14px;font-size:11.5px;color:var(--k-ink-2)}
.k-scatter .lg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:5px}


/* ===== component: sparkline ===== */
/* KATA sparkline 1.0.0 — kata-ui.dev/components/sparkline */
.k-spark{display:inline-flex;align-items:center;gap:12px;font-family:var(--k-font);text-align:start;color:var(--k-ink)}


/* ===== component: stat ===== */
/* KATA stat 1.0.0 — kata-ui.dev/components/stat */
/* KATA Stat */
.k-stat{font-family:var(--k-font);min-width:0}
.k-stat .k-stat-lbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--k-ink-3)}
.k-stat .k-stat-val{margin-top:5px;font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--k-ink);font-variant-numeric:tabular-nums}
.k-stat .k-stat-delta{display:inline-flex;align-items:center;gap:3px;margin-top:6px;padding:2px 8px;border-radius:var(--k-radius-full);font-size:11.5px;font-weight:550;background:var(--k-accent-bg);color:var(--k-accent-ink)}
.k-stat .k-stat-delta[data-dir="down"]{background:var(--k-danger-bg);color:var(--k-danger-ink)}


/* ===== component: table ===== */
/* KATA table 1.0.0 — kata-ui.dev/components/table */
.ktable-wrap{max-width:100%;overflow-x:auto;border:1px solid var(--k-line);border-radius:var(--k-radius-lg);background:var(--k-bg)}
.ktable{width:100%;border-collapse:collapse;background:var(--k-bg);font-size:13.5px;font-family:var(--k-font)}
.ktable th{text-align:start;font-size:11.5px;letter-spacing:.05em;color:var(--k-ink-3);font-weight:600;background:var(--k-bg-soft);padding:10px 14px;border-bottom:1px solid var(--k-line)}
.ktable td{padding:12px 14px;border-bottom:1px solid var(--k-line);color:var(--k-ink-2)}
.ktable tr:last-child td{border-bottom:0}
.ktable td:first-child{color:var(--k-ink);font-weight:500}
.ktable .ava{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--k-accent-bg-strong);color:var(--k-accent-ink);font-size:11px;font-weight:600;margin-inline-end:9px;vertical-align:-8px}


/* ===== component: timeline ===== */
/* KATA timeline 1.0.0 — kata-ui.dev/components/timeline */
/* KATA Timeline */
.k-timeline{list-style:none;font-family:var(--k-font)}
.k-timeline li{position:relative;padding:0 0 18px 22px}
.k-timeline li::before{content:"";position:absolute;left:0;top:3px;width:9px;height:9px;border-radius:50%;background:var(--k-bg);border:2px solid var(--k-border-strong)}
.k-timeline li::after{content:"";position:absolute;left:4px;top:16px;bottom:-2px;width:1px;background:var(--k-line)}
.k-timeline li:last-child{padding-bottom:0}
.k-timeline li:last-child::after{display:none}
.k-timeline li[data-now]::before{background:var(--k-core);border-color:var(--k-core)}
.k-timeline time{display:block;font-family:var(--k-mono);font-size:11px;color:var(--k-ink-3);margin-bottom:1px}
.k-timeline b{display:block;font-size:13.5px;font-weight:550;color:var(--k-ink)}
.k-timeline p{font-size:13px;color:var(--k-ink-2);line-height:1.65;letter-spacing:.01em}


/* ===== component: torn-ticket ===== */
/* KATA torn-ticket 1.0.0 — kata-ui.dev/components/torn-ticket */
/* KATA Torn Ticket — perforation by mask, stub by flex. */
.k-tick{--px:calc(100% - 98px);display:flex;width:100%;max-width:520px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:13px;font-family:var(--k-font);color:var(--k-ink);transform:rotate(-1.1deg);box-shadow:0 14px 28px -14px rgba(16,24,40,.28);
  -webkit-mask:radial-gradient(circle 10px at var(--px) 0, transparent 10px, #000 11px), radial-gradient(circle 10px at var(--px) 100%, transparent 10px, #000 11px);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 10px at var(--px) 0, transparent 10px, #000 11px), radial-gradient(circle 10px at var(--px) 100%, transparent 10px, #000 11px);
  mask-composite:intersect}
.k-tick-main{flex:1;padding:19px 20px;min-width:0}
.k-tick-main .ev{font-size:11px;font-weight:650;letter-spacing:.16em;color:var(--k-accent-ink)}
.k-tick-main h3{font-size:18.5px;font-weight:650;letter-spacing:-.015em;margin:6px 0 5px}
.k-tick-main p{font-size:12.5px;color:var(--k-ink-2);line-height:1.7;letter-spacing:.01em}
.k-tick-stub{flex:none;width:98px;border-inline-start:2px dashed var(--k-zinc-300);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px 8px;text-align:center}
.k-tick-stub .code{font-size:14px;font-weight:700;letter-spacing:.1em}
.k-tick-stub .lbl{font-size:10px;letter-spacing:.14em;color:var(--k-ink-3)}
.k-tick-bar{width:64px;height:26px;background:repeating-linear-gradient(90deg, var(--k-ink) 0 2px, transparent 2px 5px, var(--k-ink) 5px 6px, transparent 6px 10px, var(--k-ink) 10px 13px, transparent 13px 16px)}
@media (max-width:460px){.k-tick{--px:calc(100% - 84px)}.k-tick-stub{width:84px}}


/* ===== component: typeset ===== */
/* KATA typeset 1.0.0 — kata-ui.dev/components/typeset */
/* KATA Typeset — one wrapper, semantic children, a single type scale */
.k-type{color:var(--k-ink);font-size:15px;line-height:1.75;max-width:68ch;letter-spacing:.012em}
.k-type .eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--k-accent-ink);margin:0 0 8px;line-height:1.4}
.k-type h1{font-size:29px;line-height:1.25;font-weight:650;letter-spacing:-.01em;margin:0 0 10px}
.k-type h2{font-size:20px;line-height:1.35;font-weight:650;margin:30px 0 8px;padding-top:22px;border-top:1px solid var(--k-line);letter-spacing:-.015em}
.k-type h3{font-size:16px;line-height:1.4;font-weight:600;margin:22px 0 6px}
.k-type p{margin:0 0 14px}
.k-type .lead{font-size:17px;line-height:1.65;color:var(--k-ink-2);margin-bottom:18px}
.k-type a{color:var(--k-accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--k-accent-line)}
.k-type strong{font-weight:650}
.k-type code{font-family:var(--k-mono);font-size:.86em;background:var(--k-bg-soft);border:1px solid var(--k-line);border-radius:5px;padding:1px 5px;white-space:nowrap}
.k-type ul,.k-type ol{margin:0 0 14px;padding-inline-start:20px}
.k-type li{margin:4px 0}
.k-type li::marker{color:var(--k-ink-3)}
.k-type blockquote{margin:18px 0;padding:2px 0 2px 16px;border-inline-start:2px solid var(--k-accent);color:var(--k-ink-2);font-size:15.5px;line-height:1.7}
.k-type blockquote p{margin:0}
.k-type hr{border:0;border-top:1px solid var(--k-line);margin:24px 0}
.k-type .fine{font-size:12.5px;color:var(--k-ink-3);line-height:1.65}


/* ===== component: accordion-gallery ===== */
/* KATA accordion-gallery 1.0.0 — kata-ui.dev/components/accordion-gallery */
/* KATA Accordion Gallery — the touched panel takes the room. */
.k-gal{display:flex;gap:8px;width:100%;height:238px;font-family:var(--k-font)}
.k-gal-p{position:relative;flex:1;border-radius:13px;overflow:hidden;transition:flex .55s cubic-bezier(.6,0,.2,1);cursor:pointer;outline-offset:2px}
.k-gal-p:hover,.k-gal-p:focus-visible{flex:3.1}
.k-gal-p .t{position:absolute;left:13px;bottom:12px;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--k-on-color);font-size:12.5px;font-weight:650;letter-spacing:.16em}
.k-gal-p .c{position:absolute;left:15px;bottom:13px;right:14px;color:var(--k-on-color);font-size:13.5px;font-weight:550;opacity:0;transition:opacity .3s .18s}
.k-gal-p:hover .c,.k-gal-p:focus-visible .c{opacity:1}
.k-gal-p:hover .t,.k-gal-p:focus-visible .t{opacity:0}
@media (prefers-reduced-motion:reduce){.k-gal-p{transition:none}.k-gal-p .c{transition:none}}


/* ===== component: aurora ===== */
/* KATA aurora 1.0.0 — kata-ui.dev/components/aurora */
.k-aurora{width:100%;position:relative;overflow:hidden;border-radius:14px;background:var(--k-zinc-950);color:var(--k-on-color);font-family:var(--k-font)}
.k-aurora i{position:absolute;border-radius:50%;filter:blur(34px);display:block;will-change:transform}
.k-aurora .b1{width:230px;height:230px;left:-50px;top:-70px;background:color-mix(in srgb,var(--k-accent) 65%,transparent);animation:k-aur-a 9s var(--k-ease) infinite alternate}
.k-aurora .b2{width:190px;height:190px;right:-40px;bottom:-80px;background:color-mix(in srgb,var(--k-core) 55%,transparent);animation:k-aur-b 12s var(--k-ease) infinite alternate}
.k-aurora .b3{width:150px;height:150px;right:28%;top:-50px;background:color-mix(in srgb,var(--k-accent-ink) 45%,transparent);animation:k-aur-c 11s var(--k-ease) infinite alternate}
.k-aurora-in{position:relative;padding:28px;text-align:left}
.k-aurora-in h3{font-size:19px;font-weight:600;letter-spacing:-.015em}
.k-aurora-in p{margin-top:7px;font-size:13.5px;line-height:1.8;color:var(--k-zinc-300);max-width:34ch;letter-spacing:.012em}
@keyframes k-aur-a{from{transform:translate(0,0) scale(1)}to{transform:translate(96px,46px) scale(1.22)}}
@keyframes k-aur-b{from{transform:translate(0,0) scale(1.12)}to{transform:translate(-80px,-42px) scale(.94)}}
@keyframes k-aur-c{from{transform:translate(0,0) scale(1)}to{transform:translate(-64px,38px) scale(1.18)}}
@media (prefers-reduced-motion:reduce){.k-aurora i{animation:none}}
.k-aurora-pat{position:absolute;top:0;left:0;width:calc(100% + 56px);height:100%;color:var(--k-on-color);opacity:.16;animation:k-aur-pat 26s linear infinite alternate}
@keyframes k-aur-pat{from{transform:translateX(0)}to{transform:translateX(-56px)}}
@media (prefers-reduced-motion:reduce){.k-aurora-pat{animation:none}}


/* ===== component: beam-border ===== */
/* KATA beam-border 1.0.0 — kata-ui.dev/components/beam-border */
/* KATA Beam border */
@property --k-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.k-beam{position:relative;border-radius:14px;padding:1.5px;background:conic-gradient(from var(--k-angle),transparent 0deg,transparent 255deg,var(--k-core) 305deg,transparent 360deg),linear-gradient(var(--k-line),var(--k-line));animation:k-beam-spin 4.5s linear infinite}
.k-beam-in{border-radius:12.5px;background:var(--k-bg);padding:20px}
@keyframes k-beam-spin{to{--k-angle:360deg}}
@media (prefers-reduced-motion: reduce){.k-beam{animation:none}}


/* ===== component: blur-in ===== */
/* KATA blur-in 1.0.0 — kata-ui.dev/components/blur-in */
/* KATA Blur In — words sharpening in sequence. */
.k-blur{font-family:var(--k-font)}
.k-blur .w{display:inline-block;opacity:0;filter:blur(9px);transform:translateY(7px);animation:k-blur-in .7s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes k-blur-in{to{opacity:1;filter:blur(0);transform:none}}
@media (prefers-reduced-motion:reduce){.k-blur .w{animation:none;opacity:1;filter:none;transform:none}}


/* ===== component: burst-button ===== */
/* KATA burst-button 1.0.0 — kata-ui.dev/components/burst-button */
/* KATA Burst Button — a CTA with visible punctuation. */
.k-burst{position:relative;display:inline-block;font-family:var(--k-font)}
.k-burst canvas{position:absolute;inset:-70px -90px;width:calc(100% + 180px);height:calc(100% + 140px);pointer-events:none}
.k-burst-btn{position:relative;z-index:1;background:var(--k-ink);color:var(--k-bg);border:0;font-family:inherit;font-size:14.5px;font-weight:650;padding:13px 26px;border-radius:11px;cursor:pointer;transition:transform .12s}
.k-burst-btn:active{transform:scale(.96)}
.k-burst-btn.asagi{background:var(--k-accent);color:var(--k-on-color)}


/* ===== component: comparison-slider ===== */
/* KATA comparison-slider 1.0.0 — kata-ui.dev/components/comparison-slider */
/* KATA Comparison Slider — two states, one seam. */
.k-cmp{--pos:55%;width:100%;position:relative;overflow:hidden;border-radius:var(--k-radius-lg);border:1px solid var(--k-line);font-family:var(--k-font);max-width:520px;aspect-ratio:8/5;background:var(--k-bg-soft)}
.k-cmp .layer{position:absolute;inset:0}
.k-cmp .top{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.k-cmp .tag{position:absolute;top:10px;font-size:11px;font-weight:600;letter-spacing:.06em;padding:3px 9px;border-radius:99px;background:rgba(24,24,27,.72);color:var(--k-on-color)}
.k-cmp .tag.l{left:10px}
.k-cmp .tag.r{right:10px}
.k-cmp .seam{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--k-on-color);box-shadow:0 0 0 1px rgba(24,24,27,.25)}
.k-cmp .grip{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--k-on-color);color:var(--k-zinc-900);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(16,24,40,.3);pointer-events:none}
.k-cmp input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}


/* ===== component: converge ===== */
/* KATA converge 1.0.0 — kata-ui.dev/components/converge */
.k-converge{width:100%;position:relative;border-radius:14px;background:var(--k-zinc-950);overflow:hidden;min-height:196px;font-family:var(--k-font)}
.k-converge .src{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:grid;gap:7px;z-index:3}
.k-converge .src>span{display:flex;gap:6px;align-items:center;background:color-mix(in srgb,var(--k-on-color) 10%,transparent);border:1px solid color-mix(in srgb,var(--k-on-color) 28%,transparent);backdrop-filter:blur(6px);font-size:11px;padding:5px 9px;border-radius:7px}
.k-converge .src .lb{color:var(--k-on-color)}
.k-converge .beams{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}
.k-converge .beam{fill:none;stroke-width:1.8;stroke-linecap:round}
.k-converge .beam-bg{fill:none;stroke-width:6;stroke-linecap:round;opacity:.14}
.k-converge .b1{stroke:hsl(335 85% 68%)}
.k-converge .b2{stroke:hsl(32 95% 60%)}
.k-converge .b3{stroke:hsl(205 90% 63%)}
.k-converge .dot .core{fill:var(--k-on-color)}
.k-converge .dot.d1 .halo{fill:hsl(335 85% 68%);opacity:.45}
.k-converge .dot.d2 .halo{fill:hsl(32 95% 60%);opacity:.45}
.k-converge .dot.d3 .halo{fill:hsl(205 90% 63%);opacity:.45}
.k-converge .glow{position:absolute;left:58%;top:50%;width:230px;height:230px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 38% 32%,color-mix(in srgb,hsl(335 85% 68%) 34%,transparent),transparent 62%),radial-gradient(circle at 66% 70%,color-mix(in srgb,hsl(205 90% 63%) 30%,transparent),transparent 62%),radial-gradient(circle,color-mix(in srgb,var(--k-accent) 42%,transparent),transparent 68%);animation:k-conv-pulse 3.4s var(--k-ease) infinite alternate;display:block}
.k-converge .spark{position:absolute;z-index:2;display:grid;place-items:center;color:var(--k-on-color);animation:k-conv-tw 2.2s ease-in-out infinite alternate}
.k-converge .sp1{left:48%;top:20%}
.k-converge .sp2{left:67%;top:28%;animation-delay:.5s}
.k-converge .sp3{left:65%;top:64%;animation-delay:1.1s}
.k-converge .sp4{left:46%;top:60%;animation-delay:1.6s}
.k-converge-tile{position:absolute;left:58%;top:50%;transform:translate(-50%,-50%);z-index:2;width:64px;height:64px;border-radius:16px;background:var(--k-bg);display:grid;place-items:center;color:var(--k-ink);box-shadow:0 0 46px color-mix(in srgb,var(--k-accent) 45%,transparent)}
@keyframes k-conv-tw{from{opacity:.15;transform:scale(.55) rotate(0deg)}to{opacity:1;transform:scale(1.05) rotate(18deg)}}
@keyframes k-conv-pulse{from{transform:translate(-50%,-50%) scale(.94);opacity:.75}to{transform:translate(-50%,-50%) scale(1.1);opacity:1}}
@media (prefers-reduced-motion:reduce){.k-converge .glow,.k-converge .spark{animation:none}.k-converge .dot{display:none}}


/* ===== component: counter ===== */
/* KATA counter 1.0.0 — kata-ui.dev/components/counter */
/* KATA Counter */
.k-counter{font-family:var(--k-font);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.02em;color:var(--k-ink)}


/* ===== component: dock ===== */
/* KATA dock 1.0.0 — kata-ui.dev/components/dock */
/* KATA Dock — tiles swell by proximity. */
.k-dock{display:inline-flex;align-items:flex-end;touch-action:none;gap:7px;padding:9px 10px;background:var(--k-bg-soft);border:1px solid var(--k-line);border-radius:20px;font-family:var(--k-font)}
.k-dock-i{position:relative;width:46px;height:46px;border:0;border-radius:13px;color:var(--k-on-color);display:flex;align-items:center;justify-content:center;cursor:pointer;transform-origin:bottom center;transition:transform .14s ease-out;flex:none}
.k-dock-i::after{content:attr(data-label);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(3px);background:var(--k-ink);color:var(--k-bg);font-size:11px;font-weight:550;padding:4px 9px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.k-dock-i:hover::after,.k-dock-i:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}


/* ===== component: follow-frame ===== */
/* KATA follow-frame 1.0.0 — kata-ui.dev/components/follow-frame */
.k-fzone{position:relative;width:100%;min-height:190px;touch-action:none;border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);overflow:hidden;font-family:var(--k-font)}
.k-fzone .hint{position:absolute;left:16px;bottom:12px;font-size:12px;color:var(--k-ink-3)}
.k-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:118px;height:74px;border:1.5px dashed var(--k-border-strong);border-radius:10px;pointer-events:none;will-change:transform}
.k-frame-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-168%);display:flex;gap:6px;align-items:center;background:var(--k-ink);color:var(--k-bg);font-size:11px;font-weight:550;padding:4px 9px;border-radius:99px;pointer-events:none;white-space:nowrap;will-change:transform}
.k-frame-tag i{width:6px;height:6px;border-radius:50%;background:var(--k-core);display:block;flex:none}


/* ===== component: glow-button ===== */
/* KATA glow-button 1.0.0 — kata-ui.dev/components/glow-button */
/* KATA Glow Button — a ring of light, on duty. */
@property --k-ga{syntax:"<angle>";initial-value:0deg;inherits:false}
.k-glowbtn{display:inline-block;padding:2px;border-radius:13px;background:conic-gradient(from var(--k-ga), var(--k-accent) 0 14%, transparent 30%, var(--k-zinc-300) 50%, transparent 70%, var(--k-accent) 88% 100%);animation:k-ga-spin 3.6s linear infinite;transition:box-shadow .3s;font-family:var(--k-font)}
.k-glowbtn:hover,.k-glowbtn:focus-within{box-shadow:0 0 26px -6px var(--k-accent)}
.k-glowbtn button{display:block;border:0;background:var(--k-zinc-950);color:var(--k-on-color);font-family:inherit;font-size:14.5px;font-weight:650;padding:12px 26px;border-radius:11px;cursor:pointer}
@keyframes k-ga-spin{to{--k-ga:360deg}}
.k-glowfield{display:flex;align-items:center;gap:9px;max-width:330px;padding:2px;border-radius:11px;background:var(--k-line);transition:background .3s, box-shadow .3s;font-family:var(--k-font);color:var(--k-ink-3)}
.k-glowfield:focus-within{background:conic-gradient(from var(--k-ga), var(--k-accent), var(--k-line) 40%, var(--k-accent));animation:k-ga-spin 3.6s linear infinite;box-shadow:0 0 18px -4px var(--k-accent-bg)}
.k-glowfield .in{flex:1;display:flex;align-items:center;gap:9px;background:var(--k-bg);border-radius:9.5px;padding:0 12px}
.k-glowfield input{flex:1;border:0;background:none;font-family:inherit;font-size:13.5px;height:38px;color:var(--k-ink);outline:none;min-width:0}
@media (prefers-reduced-motion:reduce){.k-glowbtn,.k-glowfield:focus-within{animation:none}}


/* ===== component: glow-cards ===== */
/* KATA glow-cards 1.0.0 — kata-ui.dev/components/glow-cards */
/* KATA Glow Cards — the border warms where the cursor passes. */
.k-glow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;font-family:var(--k-font);color:var(--k-ink)}
.k-glow{position:relative;background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;padding:18px}
.k-glow::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:radial-gradient(190px circle at var(--mx,50%) var(--my,50%), var(--k-accent), transparent 70%);-webkit-mask:linear-gradient(var(--k-on-color) 0 0) content-box, linear-gradient(var(--k-on-color) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--k-on-color) 0 0) content-box, linear-gradient(var(--k-on-color) 0 0);mask-composite:exclude;opacity:0;transition:opacity .25s;pointer-events:none}
.k-glow:hover::before{opacity:1}
.k-glow .ic{width:36px;height:36px;border-radius:10px;background:var(--k-accent-bg);color:var(--k-accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.k-glow h3{font-size:14.5px;font-weight:600}
.k-glow p{font-size:12.5px;line-height:1.75;color:var(--k-ink-2);margin-top:5px;letter-spacing:.01em}
@media (max-width:640px){.k-glow-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.k-glow::before{display:none}}


/* ===== component: goo-tabs ===== */
/* KATA goo-tabs 1.0.0 — kata-ui.dev/components/goo-tabs */
/* KATA Goo Tabs — the indicator travels like liquid. */
.k-goo-tabs{font-family:var(--k-font);color:var(--k-ink);max-width:520px}
.k-goo-bar{position:relative;display:inline-flex;background:var(--k-bg-soft);border:1px solid var(--k-line);border-radius:99px;padding:4px}
.k-goo-ind{position:absolute;top:4px;bottom:4px;border-radius:99px;background:var(--k-ink);transition:left .45s cubic-bezier(.6,-0.1,.2,1.25), width .45s cubic-bezier(.6,-0.1,.2,1.25), transform .3s}
.k-goo-ind.moving{transform:scaleY(.86)}
.k-goo-bar button{position:relative;z-index:1;border:0;background:none;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--k-ink-2);padding:8px 16px;border-radius:99px;cursor:pointer;transition:color .25s}
.k-goo-bar button[aria-selected="true"]{color:var(--k-bg)}
.k-goo-panel{padding:16px 3px 2px;font-size:13.5px;line-height:1.75;color:var(--k-ink-2);letter-spacing:.012em}
@media (prefers-reduced-motion:reduce){.k-goo-ind{transition:none}}


/* ===== component: horizontal-reel ===== */
/* KATA horizontal-reel 1.0.0 — kata-ui.dev/components/horizontal-reel */
/* KATA Horizontal Reel — down becomes sideways. */
.k-reel{height:236px;overflow:auto;border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);font-family:var(--k-font);color:var(--k-ink)}
.k-reel-space{height:290%;position:relative}
.k-reel-view{position:sticky;top:0;height:236px;overflow:hidden;display:flex;align-items:center}
.k-reel-strip{display:flex;gap:13px;padding:0 18px;will-change:transform}
.k-reel-card{flex:none;width:196px;height:148px;border:1px solid var(--k-line);border-radius:13px;background:var(--k-bg-soft);padding:16px;display:flex;flex-direction:column;justify-content:flex-end;gap:5px}
.k-reel-card b{font-size:14.5px;font-weight:650}
.k-reel-card span{font-size:12px;color:var(--k-ink-2)}


/* ===== component: liquid-button ===== */
/* KATA liquid-button 1.0.0 — kata-ui.dev/components/liquid-button */
/* KATA Liquid Button — hover pours. */
.k-liq{position:relative;overflow:hidden;display:inline-block;border:1.5px solid var(--k-ink);background:var(--k-bg);color:var(--k-ink);font-family:var(--k-font);font-size:14.5px;font-weight:650;padding:13px 27px;border-radius:11px;cursor:pointer}
.k-liq .fill{position:absolute;left:-30%;top:100%;width:160%;padding-top:160%;background:var(--k-accent);border-radius:42% 46% 44% 48%;transition:transform .65s cubic-bezier(.5,0,.2,1);transform:rotate(0)}
.k-liq:hover .fill,.k-liq:focus-visible .fill{transform:translateY(-58%) rotate(160deg)}
.k-liq .lbl{position:relative;z-index:1;transition:color .4s}
.k-liq:hover .lbl,.k-liq:focus-visible .lbl{color:var(--k-on-color)}
.k-liq.dark{border-color:var(--k-ink);background:var(--k-ink);color:var(--k-bg)}
.k-liq.dark .fill{background:var(--k-on-color)}
.k-liq.dark:hover .lbl,.k-liq.dark:focus-visible .lbl{color:var(--k-zinc-950)}
.k-liq:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.k-liq .fill{transition:none}}


/* ===== component: magnet ===== */
/* KATA magnet 1.0.0 — kata-ui.dev/components/magnet */
/* KATA Magnet — a control with gravity. */
.k-mag{display:inline-block;padding:26px;touch-action:none}
.k-mag-in{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.25,1.2);will-change:transform}
.k-mag.live .k-mag-in{transition:transform .12s ease-out}


/* ===== component: marquee ===== */
/* KATA marquee 1.0.0 — kata-ui.dev/components/marquee */
/* KATA Marquee */
.k-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.k-marquee-track{display:flex;gap:0;width:max-content;animation:k-marquee 30s linear infinite}
.k-marquee:hover .k-marquee-track{animation-play-state:paused}
.k-marquee-group{display:flex;align-items:center;gap:44px;padding-right:44px}
@keyframes k-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.k-marquee-track{animation:none}}


/* ===== component: meteors ===== */
/* KATA meteors 1.0.0 — kata-ui.dev/components/meteors */
/* KATA Meteors — a seeded night sky. */
.k-met{position:relative;overflow:hidden;background:var(--k-zinc-950);color:var(--k-on-color);border-radius:14px;min-height:230px;font-family:var(--k-font)}
.k-met-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:230px;padding:28px 22px;gap:9px}
.k-met-in h3{font-size:21px;font-weight:650;letter-spacing:-.02em}
.k-met-in p{font-size:13px;line-height:1.75;color:var(--k-zinc-400);max-width:340px;letter-spacing:.01em}
.k-meteor{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--k-on-color);box-shadow:0 0 10px 2px rgba(255,255,255,.3);animation-name:k-met-fall;animation-timing-function:linear;animation-iteration-count:infinite;opacity:0;z-index:1}
.k-meteor::before{content:"";position:absolute;left:2px;top:50%;width:86px;height:2px;transform:translateY(-50%) rotate(-45deg);transform-origin:left center;background:linear-gradient(to right, rgba(255,255,255,.75), transparent);border-radius:2px}
@keyframes k-met-fall{0%{transform:translate3d(0,0,0);opacity:0}6%{opacity:1}92%{opacity:1}100%{transform:translate3d(-330px,330px,0);opacity:0}}
@media (prefers-reduced-motion:reduce){.k-meteor{display:none}}


/* ===== component: orbit ===== */
/* KATA orbit 1.0.0 — kata-ui.dev/components/orbit */
/* KATA Orbit — rings that travel, chips that ride upright. */
.k-orbit{position:relative;width:252px;height:252px;margin:6px auto;font-family:var(--k-font);color:var(--k-ink)}
.k-orbit .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:18px;background:var(--k-ink);color:var(--k-bg);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px -10px rgba(16,24,40,.4)}
.k-orbit .ring{position:absolute;border:1px dashed var(--k-zinc-300);border-radius:50%;animation:k-orb-spin linear infinite}
.k-orbit .ring.r1{inset:26px;animation-duration:16s}
.k-orbit .ring.r2{inset:-2px;animation-duration:26s;animation-direction:reverse}
.k-orbit .chip{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:12px;background:var(--k-bg);border:1px solid var(--k-line);box-shadow:0 4px 12px rgba(16,24,40,.1);display:flex;align-items:center;justify-content:center;color:var(--k-ink-2);animation:k-orb-spin linear infinite reverse}
.k-orbit .r1 .chip{animation-duration:16s}
.k-orbit .r2 .chip{animation-duration:26s}
@keyframes k-orb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.k-orbit .ring,.k-orbit .chip{animation:none}}


/* ===== component: particle-net ===== */
/* KATA particle-net 1.0.0 — kata-ui.dev/components/particle-net */
/* KATA Particle Net — a quiet constellation. */
.k-net{position:relative;width:100%;background:var(--k-zinc-950);touch-action:none;border-radius:14px;overflow:hidden;font-family:var(--k-font)}
.k-net canvas{position:absolute;inset:0;width:100%;height:100%}
.k-net-in{position:relative;z-index:1;padding:30px 26px;color:var(--k-on-color);max-width:430px}
.k-net-in h3{font-size:20px;font-weight:650;letter-spacing:-.02em}
.k-net-in p{font-size:13px;line-height:1.75;color:var(--k-zinc-400);margin-top:8px;letter-spacing:.01em}


/* ===== component: reorder ===== */
/* KATA reorder 1.0.0 — kata-ui.dev/components/reorder */
.k-rank{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px;font-family:var(--k-font)}
.k-rank li{display:flex;align-items:center;gap:11px;background:color-mix(in srgb,var(--k-on-color) 9%,transparent);border:1px solid color-mix(in srgb,var(--k-on-color) 18%,transparent);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--k-ink)}
.k-rank .no{font-family:var(--k-mono);font-size:11px;color:var(--k-ink-3);width:14px}
.k-rank .val{margin-left:auto;font-size:11.5px;color:var(--k-ink-3)}
.k-rank-btn{font:inherit;font-size:11.5px;font-weight:550;border:1px solid color-mix(in srgb,var(--k-on-color) 25%,transparent);background:transparent;color:var(--k-ink);border-radius:99px;padding:4px 11px;cursor:pointer}


/* ===== component: scramble ===== */
/* KATA scramble 1.0.0 — kata-ui.dev/components/scramble */
/* KATA Scramble — glyphs churn, then settle. */
.k-scr{font-family:var(--k-mono,monospace);letter-spacing:.04em}


/* ===== component: shine-text ===== */
/* KATA shine-text 1.0.0 — kata-ui.dev/components/shine-text */
/* KATA Shine Text — a sweep of light, clipped to the letters. */
.k-shine{font-family:var(--k-font);font-weight:650;letter-spacing:-.025em;line-height:1.16;background:linear-gradient(100deg, var(--k-ink) 25%, var(--k-zinc-400) 50%, var(--k-ink) 75%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:k-shine-move 3.4s linear infinite}
.k-shine.on-dark{background-image:linear-gradient(100deg, var(--k-zinc-400) 25%, var(--k-on-color) 50%, var(--k-zinc-400) 75%)}
@keyframes k-shine-move{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.k-shine{animation:none;background:none;color:var(--k-ink)}.k-shine.on-dark{color:var(--k-on-color)}}


/* ===== component: sparkles ===== */
/* KATA sparkles 1.0.0 — kata-ui.dev/components/sparkles */
/* KATA Sparkles — specks on their own clocks. */
.k-spk{position:relative;font-family:var(--k-font)}
.k-spk-i{position:absolute;border-radius:50%;background:currentColor;animation:k-spk-tw ease-in-out infinite alternate;pointer-events:none}
@keyframes k-spk-tw{from{opacity:.08;transform:scale(.55)}to{opacity:.95;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.k-spk-i{animation:none;opacity:.35}}


/* ===== component: spotlight ===== */
/* KATA spotlight 1.0.0 — kata-ui.dev/components/spotlight */
/* KATA Spotlight — a flashlight, not a wash. The panel sits in the dark and
   the words are silhouettes until the beam reaches them: inside the pool the
   text is fully lit, outside it is barely there. */
.k-spot{--mx:30%;--my:34%;position:relative;touch-action:none;overflow:hidden;border-radius:var(--k-radius-lg);background:var(--k-zinc-950);color:var(--k-on-color);font-family:var(--k-font)}
.k-spot::before{content:"";position:absolute;inset:0;background:radial-gradient(200px circle at var(--mx) var(--my),rgba(255,255,255,.17),rgba(255,255,255,.05) 55%,transparent 72%);pointer-events:none}
.k-spot-in{position:relative;padding:22px;color:rgba(255,255,255,.3)}
.k-spot-lit{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:radial-gradient(150px circle at var(--mx) var(--my),#000 52%,rgba(0,0,0,.5) 68%,transparent 80%);mask-image:radial-gradient(150px circle at var(--mx) var(--my),#000 52%,rgba(0,0,0,.5) 68%,transparent 80%)}
.k-spot-lit .k-spot-in{color:var(--k-on-color)}


/* ===== component: stacking-cards ===== */
/* KATA stacking-cards 1.0.0 — kata-ui.dev/components/stacking-cards */
/* KATA Stacking Cards — sticky deals the pile. */
.k-stack{height:296px;overflow:auto;border:1px solid var(--k-line);border-radius:14px;padding:14px;background:var(--k-bg-soft);font-family:var(--k-font);color:var(--k-ink)}
.k-stack-card{position:sticky;top:calc(6px + var(--i) * 11px);min-height:196px;border-radius:13px;padding:20px;margin-bottom:14px;border:1px solid var(--k-line)}
.k-stack-card .n{font-size:11.5px;font-weight:700;letter-spacing:.18em;color:var(--k-ink-3)}
.k-stack-card h3{font-size:19px;font-weight:650;letter-spacing:-.02em;margin:8px 0 6px}
.k-stack-card p{font-size:13px;line-height:1.75;color:var(--k-ink-2);max-width:340px;letter-spacing:.01em}
.k-stack-end{height:70px}


/* ===== component: text-reveal ===== */
/* KATA text-reveal 1.0.0 — kata-ui.dev/components/text-reveal */
/* KATA Text reveal */
.k-rv-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.k-rv-i{display:inline-block;transform:translateY(115%);transition:transform .7s cubic-bezier(.3,.7,.3,1);transition-delay:calc(var(--i,0)*45ms)}
[data-reveal].in .k-rv-i{transform:none}
@media (prefers-reduced-motion: reduce){.k-rv-i{transform:none;transition:none}}


/* ===== component: tilt-card ===== */
/* KATA tilt-card 1.0.0 — kata-ui.dev/components/tilt-card */
/* KATA Tilt Card — perspective, a glare, one floating layer. */
.k-tilt{perspective:900px;font-family:var(--k-font);max-width:330px}
.k-tilt-in{position:relative;background:var(--k-zinc-950);touch-action:none;color:var(--k-on-color);border-radius:16px;padding:22px;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out;transform-style:preserve-3d;overflow:hidden}
.k-tilt.live .k-tilt-in{transition:transform .08s linear}
.k-tilt-in::after{content:"";position:absolute;inset:0;background:radial-gradient(340px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.14), transparent 65%);pointer-events:none}
.k-tilt .pop{transform:translateZ(34px)}
.k-tilt h3{font-size:17px;font-weight:650;letter-spacing:-.015em}
.k-tilt p{font-size:12.5px;line-height:1.75;color:var(--k-zinc-400);letter-spacing:.01em}
.k-tilt .row{display:flex;justify-content:space-between;font-size:12.5px;padding:8px 0;border-top:1px solid var(--k-zinc-800);color:var(--k-zinc-300)}


/* ===== component: tracing-beam ===== */
/* KATA tracing-beam 1.0.0 — kata-ui.dev/components/tracing-beam */
/* KATA Tracing Beam — the rail fills as the reader travels. */
.k-beam{display:grid;grid-template-columns:16px 1fr;gap:16px;font-family:var(--k-font);color:var(--k-ink)}
.k-beam-rail{position:relative}
.k-beam-rail::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:var(--k-line);border-radius:2px}
.k-beam-fill{position:absolute;left:7px;top:4px;width:2px;height:0;background:var(--k-accent);border-radius:2px}
.k-beam-dot{position:absolute;left:3px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--k-accent);box-shadow:0 0 0 4px var(--k-accent-bg)}
.k-beam-body{height:264px;overflow:auto;padding-inline-end:6px}
.k-beam-body section{margin-bottom:20px}
.k-beam-body h4{font-size:14px;font-weight:600;margin-bottom:5px}
.k-beam-body p{font-size:13px;line-height:1.8;color:var(--k-ink-2);letter-spacing:.01em}


/* ===== component: typewriter ===== */
/* KATA typewriter 1.0.0 — kata-ui.dev/components/typewriter */
/* KATA Typewriter — types, rests, deletes, repeats. */
.k-type{font-family:var(--k-font)}
.k-type-caret{display:inline-block;width:2.5px;height:1.02em;margin-inline-start:2px;background:var(--k-ink);vertical-align:-0.14em;animation:k-type-blink 1.05s steps(1) infinite}
@keyframes k-type-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.k-type-caret{animation:none}}


/* ===== component: word-rotate ===== */
/* KATA word-rotate 1.0.0 — kata-ui.dev/components/word-rotate */
/* KATA Word Rotate — a stack of words, stepped. */
.k-wrot{display:inline-block;height:1.26em;overflow:hidden;vertical-align:bottom;text-align:start}
.k-wrot-in{display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.65,0,.2,1)}
.k-wrot-in span{height:1.26em;line-height:1.26em;white-space:nowrap;color:var(--k-accent-ink);font-weight:650}
@media (prefers-reduced-motion:reduce){.k-wrot-in{transition:none}}


/* ===== component: bounce-letters ===== */
/* KATA bounce-letters 1.0.0 — kata-ui.dev/components/bounce-letters */
/* KATA Bounce Letters — KATAYABURI. A headline with springs. */
.k-bnc{font-family:var(--k-font);cursor:pointer}
.k-bnc .ch{display:inline-block;transition:transform .34s cubic-bezier(.3,2.3,.4,1)}
.k-bnc .ch:hover{transform:translateY(-11px)}
.k-bnc.waving .ch{transform:translateY(-12px)}
@media (prefers-reduced-motion:reduce){.k-bnc .ch{transition:none}.k-bnc .ch:hover,.k-bnc.waving .ch{transform:none}}


/* ===== component: carousel-ring ===== */
/* KATA carousel-ring 1.0.0 — kata-ui.dev/components/carousel-ring */
/* KATA Carousel Ring — KATAYABURI. A merry-go-round of cards. */
.k-ring{position:relative;width:100%;background:var(--k-zinc-950);border-radius:14px;overflow:hidden;height:252px;perspective:950px;font-family:var(--k-font)}
.k-ring-in{position:absolute;left:50%;top:50%;width:104px;height:128px;margin:-64px 0 0 -52px;transform-style:preserve-3d;animation:k-ring-spin 26s linear infinite}
.k-ring:hover .k-ring-in{animation-play-state:paused}
.k-ring-p{position:absolute;inset:0;background:var(--k-zinc-900);border:1px solid var(--k-zinc-700);border-radius:13px;color:var(--k-on-color);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:10px;backface-visibility:hidden}
.k-ring-p b{font-size:14.5px;font-weight:650}
.k-ring-p span{font-size:11px;color:var(--k-zinc-400);line-height:1.5}
@keyframes k-ring-spin{from{transform:rotateY(0)}to{transform:rotateY(-360deg)}}
@media (prefers-reduced-motion:reduce){.k-ring-in{animation:none}}


/* ===== component: confetti-cannon ===== */
/* KATA confetti-cannon 1.0.0 — kata-ui.dev/components/confetti-cannon */
/* KATA Confetti Cannon — KATAYABURI. On-token confetti. */
.k-conf{position:relative;width:100%;background:var(--k-zinc-950);border-radius:14px;overflow:hidden;font-family:var(--k-font);min-height:210px;display:flex;align-items:center;justify-content:center}
.k-conf canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.k-conf-btn{position:relative;z-index:2;background:var(--k-on-color);color:var(--k-zinc-950);border:0;font-family:inherit;font-size:14.5px;font-weight:650;padding:12px 24px;border-radius:99px;cursor:pointer}
.k-conf-btn:active{transform:scale(.96)}


/* ===== component: fireworks ===== */
/* KATA fireworks 1.0.0 — kata-ui.dev/components/fireworks */
/* KATA Fireworks — KATAYABURI. The night, on demand. */
.k-fw{position:relative;width:100%;background:var(--k-zinc-950);border-radius:14px;overflow:hidden;font-family:var(--k-font)}
.k-fw canvas{display:block;width:100%;height:250px;cursor:crosshair}
.k-fw p{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:12px;color:var(--k-zinc-400);pointer-events:none}


/* ===== component: goo-cursor ===== */
/* KATA goo-cursor 1.0.0 — kata-ui.dev/components/goo-cursor */
/* KATA Goo Cursor — KATAYABURI. Surface tension as a service. */
.k-goo{position:relative;width:100%;background:var(--k-zinc-950);border-radius:14px;overflow:hidden;height:250px;font-family:var(--k-font);touch-action:none}
.k-goo-field{position:absolute;inset:0}
.k-goo-b{position:absolute;border-radius:50%;background:var(--k-accent);transform:translate(-50%,-50%);pointer-events:none}
.k-goo p{position:relative;z-index:2;text-align:center;padding-top:104px;font-size:13px;color:var(--k-zinc-400);pointer-events:none}


/* ===== component: gravity-playground ===== */
/* KATA gravity-playground 1.0.0 — kata-ui.dev/components/gravity-playground */
/* KATA Gravity Playground — KATAYABURI. The catalog, dropped. */
.k-grav{position:relative;width:100%;background:var(--k-zinc-950);border-radius:14px;overflow:hidden;height:264px;font-family:var(--k-font);touch-action:none}
.k-grav-chip{position:absolute;left:0;top:0;padding:8px 14px;border-radius:99px;background:var(--k-zinc-800);color:var(--k-on-color);font-size:13px;font-weight:600;white-space:nowrap;cursor:grab;border:1px solid var(--k-zinc-700);user-select:none;-webkit-user-select:none}
.k-grav-chip.hot{background:var(--k-accent);border-color:var(--k-accent)}
.k-grav-chip:active{cursor:grabbing}


/* ===== component: jelly-buttons ===== */
/* KATA jelly-buttons 1.0.0 — kata-ui.dev/components/jelly-buttons */
/* KATA Jelly Buttons — KATAYABURI. Dessert-grade controls. */
.k-jelly{display:inline-block;border:0;cursor:pointer;font-family:var(--k-font);font-weight:650;font-size:14.5px;padding:13px 26px;border-radius:14px;background:var(--k-ink);color:var(--k-bg);transition:transform .28s cubic-bezier(.3,2.4,.45,1)}
.k-jelly:hover{transform:scale(1.07,.92)}
.k-jelly:active{transform:scale(.88,1.12)}
.k-jelly.asagi{background:var(--k-accent);color:var(--k-on-color)}
.k-jelly.soft{background:var(--k-bg-soft);color:var(--k-ink);border:1px solid var(--k-line)}
.k-jelly.squish{animation:k-jelly-wob .55s cubic-bezier(.3,2.2,.45,1)}
@keyframes k-jelly-wob{0%{transform:scale(1,1)}25%{transform:scale(1.18,.78)}50%{transform:scale(.92,1.1)}72%{transform:scale(1.05,.97)}100%{transform:scale(1,1)}}
@media (prefers-reduced-motion:reduce){.k-jelly{transition:none}.k-jelly:hover,.k-jelly:active{transform:none}.k-jelly.squish{animation:none}}


/* ===== component: kaleidoscope ===== */
/* KATA kaleidoscope 1.0.0 — kata-ui.dev/components/kaleidoscope */
/* KATA Kaleidoscope — KATAYABURI. Draw once, get ten. */
.k-kal{background:var(--k-zinc-950);border-radius:14px;padding:12px;font-family:var(--k-font)}
.k-kal canvas{display:block;width:100%;height:262px;border-radius:8px;touch-action:none;cursor:crosshair}
.k-kal-bar{display:flex;justify-content:center;margin-top:10px}
.k-kal-btn{border:1px solid var(--k-zinc-700);background:none;color:var(--k-zinc-300);font-family:inherit;font-size:12.5px;font-weight:550;padding:6px 14px;border-radius:99px;cursor:pointer}
.k-kal-btn:hover{color:var(--k-on-color);border-color:var(--k-zinc-500)}


/* ===== component: kata-rain ===== */
/* KATA kata-rain 1.0.0 — kata-ui.dev/components/kata-rain */
/* KATA Kata Rain — KATAYABURI. It rains katakana here. */
.k-rain{position:relative;width:100%;background:var(--k-zinc-950);border-radius:14px;overflow:hidden;font-family:var(--k-font)}
.k-rain canvas{display:block;width:100%;height:250px}
.k-rain-in{position:relative;z-index:2;padding:20px 22px}


/* ===== component: newtons-cradle ===== */
/* KATA newtons-cradle 1.0.0 — kata-ui.dev/components/newtons-cradle */
/* KATA Newton's Cradle — KATAYABURI. Momentum, the desk toy. */
.k-cr{width:100%;border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);padding:20px 0 16px;font-family:var(--k-font)}
.k-cr-frame{width:236px;margin:0 auto}
.k-cr-bar{height:7px;border-radius:4px;background:var(--k-ink)}
.k-cr-row{display:flex;justify-content:center}
.k-cr-p{width:36px;height:128px;transform-origin:top center;display:flex;flex-direction:column;align-items:center}
.k-cr-p::before{content:"";width:1.5px;height:92px;background:var(--k-zinc-400)}
.k-cr-b{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 34% 30%, var(--k-zinc-100), var(--k-zinc-400) 78%);box-shadow:0 3px 7px rgba(16,24,40,.25);flex:none}
.k-cr-p.end.l{animation:k-cr-l 2.4s ease-in-out infinite}
.k-cr-p.end.r{animation:k-cr-r 2.4s ease-in-out infinite}
@keyframes k-cr-l{0%,50%,100%{transform:rotate(0)}25%{transform:rotate(27deg)}}
@keyframes k-cr-r{0%,50%,100%{transform:rotate(0)}75%{transform:rotate(-27deg)}}
@media (prefers-reduced-motion:reduce){.k-cr-p.end{animation:none}}


/* ===== component: particle-word ===== */
/* KATA particle-word 1.0.0 — kata-ui.dev/components/particle-word */
/* KATA Particle Word — KATAYABURI. A word, weather included. */
.k-pw{background:var(--k-zinc-950);border-radius:14px;padding:14px;font-family:var(--k-font)}
.k-pw canvas{display:block;width:100%;height:230px;touch-action:none}
.k-pw-bar{display:flex;gap:8px;justify-content:center;margin-top:10px}
.k-pw-btn{border:1px solid var(--k-zinc-700);background:none;color:var(--k-zinc-300);font-family:inherit;font-size:12.5px;font-weight:550;padding:6px 13px;border-radius:99px;cursor:pointer}
.k-pw-btn:hover{color:var(--k-on-color);border-color:var(--k-zinc-500)}
.k-pw-btn.on{background:var(--k-on-color);color:var(--k-zinc-950);border-color:var(--k-on-color)}


/* ===== component: warp-tunnel ===== */
/* KATA warp-tunnel 1.0.0 — kata-ui.dev/components/warp-tunnel */
/* KATA Warp Tunnel — KATAYABURI. Twelve rings, zero script. */
.k-warp{position:relative;width:100%;background:var(--k-zinc-950);border-radius:14px;overflow:hidden;height:250px;perspective:340px;font-family:var(--k-font)}
.k-warp-in{position:absolute;inset:0;transform-style:preserve-3d}
.k-warp-r{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border:2px solid var(--k-zinc-700);border-radius:50%;opacity:0;animation:k-warp-fly 5s linear infinite}
.k-warp-r:nth-child(3n){border-color:var(--k-accent)}
@keyframes k-warp-fly{0%{transform:scale(.05);opacity:0}14%{opacity:.95}70%{opacity:.8}100%{transform:scale(2.35);opacity:0}}
.k-warp p{position:relative;z-index:2;text-align:center;padding-top:106px;font-size:14px;font-weight:600;color:var(--k-on-color);letter-spacing:.14em}
@media (prefers-reduced-motion:reduce){.k-warp-r{animation:none;opacity:.25}.k-warp-r:nth-child(odd){display:none}}


/* ===== component: hanko ===== */
/* KATA hanko 1.0.0 — kata-ui.dev/components/hanko */
/* KATA Hanko — the seal, in shu-iro. */
.k-seal-doc{font-family:var(--k-font);color:var(--k-ink);border:1px solid var(--k-line);border-radius:14px;padding:20px;background:var(--k-bg);max-width:480px}
.k-seal-doc h3{font-size:15px;font-weight:650}
.k-seal-doc p{font-size:13px;line-height:1.75;color:var(--k-ink-2);margin-top:5px;letter-spacing:.01em}
.k-seal-row{display:flex;align-items:center;gap:16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--k-line)}
.k-seal-meta b{display:block;font-size:13.5px}
.k-seal-meta span{font-size:12px;color:var(--k-ink-3);letter-spacing:.01em}
.k-seal{position:relative;margin-inline-start:auto;width:56px;height:56px;flex:none;cursor:pointer}
.k-seal::after{content:"";position:absolute;inset:0;border:2px solid var(--k-core);border-radius:12px;opacity:0}
.k-seal-face{position:absolute;inset:0;background:var(--k-core);color:var(--k-on-color);border-radius:9px 11px 10px 12px;display:flex;align-items:center;justify-content:center;font-family:"Hiragino Mincho ProN","YuMincho",serif;font-size:29px;font-weight:600;transform:rotate(-3deg)}
.k-seal.stamp .k-seal-face{animation:k-seal-in .5s cubic-bezier(.2,1.6,.4,1)}
.k-seal.stamp::after{animation:k-seal-ring .55s ease-out}
@keyframes k-seal-in{0%{transform:scale(2.1) rotate(-13deg);opacity:0}55%{transform:scale(.94) rotate(-2.2deg);opacity:1}78%{transform:scale(1.03) rotate(-3.2deg)}100%{transform:scale(1) rotate(-3deg)}}
@keyframes k-seal-ring{0%{transform:scale(.7);opacity:.55}100%{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion:reduce){.k-seal.stamp .k-seal-face,.k-seal.stamp::after{animation:none}}


/* ===== component: kintsugi-card ===== */
/* KATA kintsugi-card 1.0.0 — kata-ui.dev/components/kintsugi-card */
/* KATA Kintsugi Card — the break, gilded. */
.k-kin{position:relative;width:100%;background:var(--k-zinc-950);color:var(--k-on-color);border-radius:14px;overflow:hidden;font-family:var(--k-font);padding:22px}
.k-kin canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.k-kin-in{position:relative;z-index:1;pointer-events:none}
.k-kin .k-kin-tag{font-size:11px;font-weight:650;letter-spacing:.16em;color:var(--k-yamabuki)}
.k-kin h3{font-size:18.5px;font-weight:650;letter-spacing:-.015em;margin:8px 0 7px}
.k-kin p{font-size:13px;line-height:1.75;color:var(--k-zinc-400);max-width:380px;letter-spacing:.01em}
.k-kin-meta{display:flex;gap:22px;margin-top:16px;flex-wrap:wrap}
.k-kin-meta div b{display:block;font-size:14.5px}
.k-kin-meta div span{font-size:11px;letter-spacing:.1em;color:var(--k-zinc-500);text-transform:uppercase}


/* ===== component: noren ===== */
/* KATA noren 1.0.0 — kata-ui.dev/components/noren */
/* KATA Noren — the shop curtain, as a divider. */
.k-nor{font-family:var(--k-font);background:var(--k-bg-soft);border:1px solid var(--k-line);border-radius:14px;padding:0 26px 22px;overflow:hidden}
.k-nor-bar{height:7px;border-radius:4px;background:var(--k-zinc-800);margin:0 -6px}
.k-nor-row{display:flex;gap:5px;justify-content:center}
.k-nor-p{width:76px;height:148px;transform-origin:top center;display:flex;align-items:center;justify-content:center;color:var(--k-on-color);transition:transform .5s cubic-bezier(.4,0,.2,1)}
.k-nor-p.c1{background:linear-gradient(180deg,color-mix(in srgb,var(--k-asagi-900) 82%,var(--k-on-color)),var(--k-asagi-900) 68%);animation:k-nor-sway 5.2s ease-in-out infinite alternate}
.k-nor-p.c2{background:linear-gradient(180deg,color-mix(in srgb,var(--k-accent-ink) 84%,var(--k-on-color)),var(--k-accent-ink) 68%);animation:k-nor-sway 6.4s ease-in-out infinite alternate-reverse}
.k-nor-p.c3{background:linear-gradient(180deg,color-mix(in srgb,var(--k-asagi-800) 84%,var(--k-on-color)),var(--k-asagi-800) 68%);animation:k-nor-sway 5.8s ease-in-out infinite alternate}
.k-nor:hover .k-nor-p.c1{transform:translateX(-11px)}
.k-nor:hover .k-nor-p.c3{transform:translateX(11px)}
@keyframes k-nor-sway{from{rotate:-1.1deg}to{rotate:1.1deg}}
.k-nor-cap{text-align:center;font-size:12px;color:var(--k-ink-3);margin-top:16px;letter-spacing:.12em}
@media (prefers-reduced-motion:reduce){.k-nor-p{animation:none}}


/* ===== component: tategaki ===== */
/* KATA tategaki 1.0.0 — kata-ui.dev/components/tategaki */
/* KATA Tategaki — vertical text, set properly. */
.k-tate{display:flex;gap:34px;align-items:stretch;background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;padding:26px;font-family:var(--k-font);color:var(--k-ink)}
.k-tate-v{writing-mode:vertical-rl;font-family:"Hiragino Mincho ProN","YuMincho",serif;font-size:44px;font-weight:600;letter-spacing:.32em;line-height:1;display:flex}
.k-tate-ch{animation:k-tate-in 1s cubic-bezier(.2,.7,.2,1) both}
.k-tate-ch.d1{animation-delay:.05s}.k-tate-ch.d2{animation-delay:.22s}.k-tate-ch.d3{animation-delay:.39s}
@keyframes k-tate-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.k-tate-gloss{border-inline-start:1px solid var(--k-line);padding-inline-start:24px;display:flex;flex-direction:column;justify-content:center;gap:13px}
.k-tate-gloss div b{font-size:14px;font-weight:650}
.k-tate-gloss div b span{font-family:"Hiragino Mincho ProN","YuMincho",serif;margin-inline-end:8px}
.k-tate-gloss div p{font-size:12.5px;color:var(--k-ink-2);line-height:1.65;letter-spacing:.01em}
.k-tate-gloss .en{font-size:10.5px;font-weight:650;letter-spacing:.18em;color:var(--k-ink-3);text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.k-tate-ch{animation:none}}


/* ===== component: wagara ===== */
/* KATA wagara 1.0.0 — kata-ui.dev/components/wagara */
/* KATA Wagara — classical patterns, constructed. */
.k-wag{font-family:var(--k-font)}
.k-wag-stage{border-radius:14px;overflow:hidden;border:1px solid var(--k-line)}
.k-wag canvas{display:block;width:100%;height:228px}
.k-wag-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px;align-items:flex-start;max-height:178px;overflow-y:auto;overscroll-behavior:contain;padding:3px;scrollbar-width:thin}
.k-wag-btn{border:1px solid var(--k-line);background:var(--k-bg);color:var(--k-ink-2);font-family:inherit;font-size:12.5px;font-weight:550;padding:7px 13px;border-radius:99px;cursor:pointer;letter-spacing:.01em}
.k-wag-btn small{color:var(--k-ink-3);font-weight:500;margin-inline-start:5px}
.k-wag-btn.on{background:var(--k-ink);color:var(--k-bg);border-color:var(--k-ink)}
.k-wag-btn.on small{color:var(--k-zinc-400)}
.k-wag-tone{color:var(--k-accent-ink);border-color:var(--k-accent-bg);flex:none}
.k-wag-cap{font-size:12.5px;color:var(--k-ink-3);margin-top:9px;letter-spacing:.01em}

.k-wag-tools{display:flex;gap:8px;align-items:center;margin-top:11px}
.k-wag-search{flex:1;min-width:0;-webkit-appearance:none;appearance:none;border:1px solid var(--k-line);background:var(--k-bg);color:var(--k-ink);border-radius:99px;padding:8px 14px;font-family:inherit;font-size:13px;letter-spacing:.01em}
.k-wag-search::placeholder{color:var(--k-ink-3)}
.k-wag-search:focus-visible{outline:2px solid var(--k-accent);outline-offset:1px}
.k-wag-count{font-size:11.5px;color:var(--k-ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.k-wag-none{font-size:12.5px;color:var(--k-ink-3);margin-top:9px;letter-spacing:.01em}
.k-wag-btn[hidden]{display:none}
.k-wag-bar::-webkit-scrollbar{width:5px}
.k-wag-bar::-webkit-scrollbar-thumb{background:var(--k-zinc-300);border-radius:99px}
@media (pointer:coarse){.k-wag-btn{padding:10px 14px}}
@media (max-width:640px){.k-wag-search{font-size:16px}.k-wag-bar{max-height:196px}}


/* ===== block: app-shell ===== */
/* KATA app-shell 1.0.0 — kata-ui.dev/blocks/app-shell */
.shell{display:grid;grid-template-columns:216px 1fr;border:1px solid var(--k-line);border-radius:14px;overflow:hidden;background:var(--k-bg);font-family:var(--k-font);color:var(--k-ink);text-align:start;width:100%}
.shell-side{border-inline-end:1px solid var(--k-line);background:var(--k-bg-soft);padding:16px 12px;display:flex;flex-direction:column}
.shell-brand{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;padding:2px 8px 14px}
.shell-nav{display:grid;gap:2px}
.shell-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13.5px;letter-spacing:.01em;color:var(--k-ink-2);text-decoration:none;cursor:pointer}
.shell-item:hover{background:var(--k-bg)}
.shell-item.on{background:var(--k-bg);color:var(--k-ink);font-weight:550;border:1px solid var(--k-line)}
.shell-item.on svg{color:var(--k-core)}
.shell-item .badge{margin-inline-start:auto}
.shell-user{margin-top:auto;display:flex;align-items:center;gap:9px;padding:12px 8px 2px;border-top:1px solid var(--k-line)}
.shell-uname{font-size:13px;font-weight:550;line-height:1.3}
.shell-urole{font-size:11.5px;color:var(--k-ink-3)}
.shell-main{padding:18px 20px;min-width:0}
.shell-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.shell-main .k-sep{margin:14px 0}
.shell-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:720px){.shell{grid-template-columns:1fr}.shell-side{display:none}.shell-stats{grid-template-columns:1fr}}
.shell-row{display:flex;align-items:center;gap:12px;padding:11px 0}
.shell-rmain{flex:1;min-width:0}
.shell-rt{font-size:13.5px;font-weight:550}
.shell-rs{font-size:12.5px;color:var(--k-ink-2)}


/* ===== block: cta-band ===== */
/* KATA cta-band 1.0.0 — kata-ui.dev/blocks/cta-band */
.k-ctab{position:relative;border-radius:16px;overflow:hidden;font-family:var(--k-font);text-align:center;color:var(--k-ink)}
.k-ctab .k-aurora{position:absolute;inset:0;border-radius:16px}
.k-ctab-in{position:relative;padding:46px 26px 42px}
.k-ctab h3{font-size:25px;font-weight:650;letter-spacing:-.02em}
.k-ctab p{margin:10px auto 22px;font-size:14px;line-height:1.75;color:var(--k-ink-2);max-width:46ch;letter-spacing:.012em}


/* ===== block: cookie-consent ===== */
/* KATA cookie-consent 1.0.0 — kata-ui.dev/blocks/cookie-consent */
/* KATA Block: Cookie Consent */
.k-cc-stage{position:relative;border:1px dashed var(--k-zinc-300);border-radius:14px;min-height:218px;background:var(--k-bg-soft);font-family:var(--k-font)}
.k-cc{position:absolute;left:14px;bottom:14px;max-width:380px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:13px;box-shadow:0 14px 34px -12px rgba(16,24,40,.25);padding:17px}
.k-cc h3{font-size:14px;font-weight:650;color:var(--k-ink)}
.k-cc p{font-size:12.5px;line-height:1.7;color:var(--k-ink-2);margin:6px 0 13px;letter-spacing:.01em}
.k-cc p a{color:var(--k-accent-ink);font-weight:550}
.k-cc-btns{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:480px){.k-cc{right:14px}}


/* ===== block: faq ===== */
/* KATA faq 1.0.0 — kata-ui.dev/blocks/faq */
.k-faqb{font-family:var(--k-font);text-align:start;color:var(--k-ink)}
.k-faqb h3{font-size:19px;font-weight:620;letter-spacing:-.02em}
.k-faqb .sub{margin-top:6px;font-size:13.5px;color:var(--k-ink-2);line-height:1.7;letter-spacing:.012em}
.k-faqb .acc{margin-top:16px}
.k-faqb .more{margin-top:14px;font-size:13px;color:var(--k-ink-2)}
.k-faqb .more a{color:var(--k-accent);font-weight:550;text-decoration:none}


/* ===== block: filter-toolbar ===== */
/* KATA filter-toolbar 1.0.0 — kata-ui.dev/blocks/filter-toolbar */
/* KATA Block: Filter Toolbar */
.k-ft{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-family:var(--k-font);color:var(--k-ink);border:1px solid var(--k-line);border-radius:13px;padding:12px;background:var(--k-bg)}
.k-ft .grow{flex:1;min-width:170px}
.k-ft .count{font-size:12.5px;color:var(--k-ink-3);margin-inline-start:auto;font-variant-numeric:tabular-nums}
.k-ft select{min-width:130px}


/* ===== block: integrations ===== */
/* KATA integrations 1.0.0 — kata-ui.dev/blocks/integrations */
.k-int{font-family:var(--k-font);text-align:start;color:var(--k-ink)}
.k-int-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px}
.k-int-h h3{font-size:17px;font-weight:600;letter-spacing:-.015em}
.k-int-h a{font-size:13px;font-weight:550;color:var(--k-accent);text-decoration:none;white-space:nowrap}
.k-int-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:640px){.k-int-grid{grid-template-columns:repeat(2,1fr)}}
.k-int-tile{border:1px solid var(--k-line);border-radius:13px;background:var(--k-bg);padding:15px;display:grid;gap:10px;transition:border-color .14s}
.k-int-tile:hover{border-color:var(--k-border-strong)}
.k-int-ic{width:38px;height:38px;border-radius:10px;background:var(--k-bg-soft);border:1px solid var(--k-line);display:grid;place-items:center;color:var(--k-ink)}
.k-int-name{font-size:13px;font-weight:600}
.k-int-cat{font-size:11.5px;color:var(--k-ink-3);margin-top:1px}


/* ===== block: invoice ===== */
/* KATA invoice 1.0.0 — kata-ui.dev/blocks/invoice */
/* KATA Block: Invoice */
.k-inv{font-family:var(--k-font);color:var(--k-ink);border:1px solid var(--k-line);border-radius:14px;padding:24px;background:var(--k-bg);max-width:640px}
.k-inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px}
.k-inv-head h3{font-size:17px;font-weight:650;letter-spacing:-.015em}
.k-inv-head p{font-size:12.5px;color:var(--k-ink-2);margin-top:3px}
.k-inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.k-inv-parties h4{font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--k-ink-3);margin-bottom:5px}
.k-inv-parties p{font-size:13px;line-height:1.65;letter-spacing:.01em}
.k-inv table{width:100%;border-collapse:collapse;font-size:13.5px}
.k-inv th,.k-inv td{padding:9px 8px;border-bottom:1px solid var(--k-line);text-align:left}
.k-inv th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink-3);font-weight:650}
.k-inv td.n,.k-inv th.n{text-align:right;font-variant-numeric:tabular-nums}
.k-inv-sums{margin-left:auto;width:220px;margin-top:12px}
.k-inv-sums .r{display:flex;justify-content:space-between;font-size:13px;padding:5px 8px;color:var(--k-ink-2)}
.k-inv-sums .t{display:flex;justify-content:space-between;font-size:15px;font-weight:700;padding:9px 8px 0;margin-top:5px;border-top:2px solid var(--k-line);color:var(--k-ink)}
.k-inv-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.k-inv-foot p{font-size:12px;color:var(--k-ink-3)}
@media (max-width:520px){.k-inv-parties{grid-template-columns:1fr}}


/* ===== block: kanban ===== */
/* KATA kanban 1.0.0 — kata-ui.dev/blocks/kanban */
/* KATA Kanban (Block) — columns, cards, and honest counts. */
.k-kan{display:grid;grid-template-columns:repeat(3,minmax(225px,1fr));gap:13px;font-family:var(--k-font);color:var(--k-ink);align-items:start}
.k-kan-col{background:var(--k-bg-soft);border:1px solid var(--k-line);border-radius:14px;padding:10px;min-height:180px}
.k-kan-col.over{outline:2px dashed var(--k-accent-line);outline-offset:-6px}
.k-kan-h{display:flex;align-items:center;gap:8px;padding:3px 6px 10px;font-size:12.5px;font-weight:650;letter-spacing:.02em}
.k-kan-h .cnt{margin-inline-start:auto;font-size:11.5px;font-weight:600;color:var(--k-ink-3);background:var(--k-bg);border:1px solid var(--k-line);border-radius:99px;padding:1px 8px}
.k-kan-list{display:flex;flex-direction:column;gap:9px;min-height:60px}
.k-kan-card{background:var(--k-bg);border:1px solid var(--k-line);border-radius:11px;padding:11px 12px;box-shadow:0 1px 2px rgba(16,24,40,.05);cursor:grab}
.k-kan-card:active{cursor:grabbing}
.k-kan-card.drag{opacity:.45}
.k-kan-card h4{font-size:13.5px;font-weight:600;line-height:1.5}
.k-kan-card p{font-size:12.5px;color:var(--k-ink-2);line-height:1.65;margin-top:4px;letter-spacing:.01em}
.k-kan-meta{display:flex;align-items:center;gap:8px;margin-top:10px}
.k-kan-meta .k-avatar{margin-inline-start:auto}
@media (max-width:760px){.k-kan{grid-template-columns:1fr}}


/* ===== block: login ===== */
/* KATA login 1.0.0 — kata-ui.dev/blocks/login */
.login-card{max-width:368px;margin:0 auto;background:var(--k-bg);border:1px solid var(--k-line);border-radius:16px;padding:30px 28px;font-family:var(--k-font);color:var(--k-ink);text-align:start}
.login-mark{display:grid;place-items:center;color:var(--k-ink)}
.login-h{margin-top:14px;text-align:center;font-size:19px;font-weight:600;letter-spacing:-.015em}
.login-sub{margin-top:5px;text-align:center;font-size:13px;color:var(--k-ink-2)}
.login-card .field{margin-top:16px}
.login-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:13px}
.login-link{color:var(--k-accent-ink);text-decoration:none}
.login-cta{width:100%;justify-content:center;margin-top:16px}
.login-card .k-sep-label{margin-top:18px}
.login-foot{margin-top:18px;text-align:center;font-size:13px;color:var(--k-ink-2)}
.login-foot a{color:var(--k-accent-ink);text-decoration:none;font-weight:550}


/* ===== block: logo-cloud ===== */
/* KATA logo-cloud 1.0.0 — kata-ui.dev/blocks/logo-cloud */
.k-logoc{font-family:var(--k-font);text-align:center;color:var(--k-ink)}
.k-logoc .cap{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--k-ink-3);font-weight:600;margin-bottom:18px}
.k-logoc .li{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--k-ink-2);white-space:nowrap}


/* ===== block: order-confirmation ===== */
/* KATA order-confirmation 1.0.0 — kata-ui.dev/blocks/order-confirmation */
/* KATA Block: Order Confirmation */
.k-oc{font-family:var(--k-font);color:var(--k-ink);border:1px solid var(--k-line);border-radius:14px;padding:24px;background:var(--k-bg);max-width:560px;text-align:center}
.k-oc .ok{width:46px;height:46px;border-radius:50%;background:var(--k-success-bg);color:var(--k-success-ink);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.k-oc h3{font-size:18px;font-weight:650;letter-spacing:-.015em}
.k-oc .no{font-size:13px;color:var(--k-ink-2);margin-top:5px}
.k-oc .no b{color:var(--k-ink);font-variant-numeric:tabular-nums}
.k-oc-items{text-align:left;border-top:1px solid var(--k-line);margin-top:18px;padding-top:6px}
.k-oc-items .r{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--k-line)}
.k-oc-items .r span{color:var(--k-ink-2)}
.k-oc-items .t{display:flex;justify-content:space-between;font-size:14.5px;font-weight:700;padding-top:11px}
.k-oc-eta{margin-top:16px;background:var(--k-bg-soft);border:1px solid var(--k-line);border-radius:11px;padding:12px 14px;font-size:13px;text-align:left}
.k-oc-eta b{font-weight:650}
.k-oc-actions{display:flex;gap:9px;justify-content:center;margin-top:18px;flex-wrap:wrap}


/* ===== block: plan-compare ===== */
/* KATA plan-compare 1.0.0 — kata-ui.dev/blocks/plan-compare */
/* KATA Block: Plan Compare */
.k-pc{font-family:var(--k-font);color:var(--k-ink);overflow-x:auto}
.k-pc table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.k-pc th,.k-pc td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--k-line)}
.k-pc thead th{font-size:14px;font-weight:650;border-bottom:2px solid var(--k-line)}
.k-pc tbody th{font-weight:550;color:var(--k-ink-2)}
.k-pc td.hot{background:var(--k-accent-bg)}
.k-pc thead th.hot{background:var(--k-accent-bg);border-radius:10px 10px 0 0}
.k-pc .y{color:var(--k-accent-ink);font-weight:700}
.k-pc .n{color:var(--k-zinc-400)}


/* ===== block: pricing ===== */
/* KATA pricing 1.0.0 — kata-ui.dev/blocks/pricing */
.pricing{font-family:var(--k-font);color:var(--k-ink);text-align:start;width:100%}
.pricing-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pricing-h{font-size:21px;font-weight:600;letter-spacing:-.02em}
.pricing-sub{margin-top:5px;font-size:13.5px;color:var(--k-ink-2)}
.pricing-grid{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:760px){.pricing-grid{grid-template-columns:1fr}}
.plan{position:relative;border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);padding:22px 20px}
.plan-hot{border-color:var(--k-ink)}
.plan-badge{position:absolute;top:-11px;left:20px}
.plan-name{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink-2)}
.plan-price{margin-top:10px;font-size:32px;font-weight:600;letter-spacing:-.03em}
.plan-per{font-size:13px;font-weight:500;color:var(--k-ink-3);letter-spacing:0}
.plan-desc{margin-top:7px;font-size:13px;line-height:1.7;color:var(--k-ink-2);letter-spacing:.01em}
.plan-cta{width:100%;justify-content:center;margin-top:16px}
.plan .k-sep{margin:18px 0 14px}
.plan-feats{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:13px}
.plan-feats li{display:flex;gap:9px;align-items:center}
.plan-feats svg{color:var(--k-accent-ink);flex:none}


/* ===== block: roadmap ===== */
/* KATA roadmap 1.0.0 — kata-ui.dev/blocks/roadmap */
/* KATA Block: Roadmap */
.k-rm{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;font-family:var(--k-font);color:var(--k-ink)}
.k-rm-col{background:var(--k-bg-soft);border:1px solid var(--k-line);border-radius:14px;padding:15px}
.k-rm-col h3{font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.k-rm-dot{width:8px;height:8px;border-radius:50%}
.k-rm-i{background:var(--k-bg);border:1px solid var(--k-line);border-radius:11px;padding:12px 13px;margin-bottom:9px}
.k-rm-i:last-child{margin-bottom:0}
.k-rm-t{display:flex;align-items:center;justify-content:space-between;gap:8px}
.k-rm-t h4{font-size:13.5px;font-weight:600}
.k-rm-i p{font-size:12px;line-height:1.65;color:var(--k-ink-2);margin-top:4px}
@media (max-width:720px){.k-rm{grid-template-columns:1fr}}


/* ===== block: settings ===== */
/* KATA settings 1.0.0 — kata-ui.dev/blocks/settings */
.settings-card{background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;padding:24px;font-family:var(--k-font);color:var(--k-ink);text-align:start;width:100%}
.settings-h{font-size:15px;font-weight:600}
.settings-avatar{display:flex;align-items:center;gap:14px;margin-top:16px}
.settings-note{margin-top:5px;font-size:12px;color:var(--k-ink-3)}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
@media (max-width:640px){.settings-grid{grid-template-columns:1fr}}
.settings-card .field{margin-top:16px}
.settings-grid .field{margin-top:0}
.settings-card .k-sep{margin:22px 0}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.settings-rl{font-size:13.5px;font-weight:550}
.settings-rd{margin-top:2px;font-size:12.5px;color:var(--k-ink-2)}
.settings-foot{display:flex;gap:9px;justify-content:flex-end;margin-top:22px}


/* ===== block: site-footer ===== */
/* KATA site-footer 1.0.0 — kata-ui.dev/blocks/site-footer */
.k-ftr{font-family:var(--k-font);text-align:start;color:var(--k-ink);border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);padding:26px}
.k-ftr-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.4fr;gap:24px}
@media (max-width:720px){.k-ftr-top{grid-template-columns:1fr 1fr}}
.k-ftr .brand{display:flex;align-items:center;gap:9px;font-weight:650;font-size:15px}
.k-ftr .brand .mk{width:22px;height:22px;border:2.5px solid var(--k-ink);border-radius:7px;display:grid;place-items:center}
.k-ftr .brand .mk i{width:7px;height:7px;border-radius:2.5px;background:var(--k-core);display:block}
.k-ftr .tag{margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--k-ink-2);max-width:26ch;letter-spacing:.01em}
.k-ftr h6{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink-3);font-weight:600;margin-bottom:11px}
.k-ftr .col a{display:block;font-size:13px;color:var(--k-ink-2);text-decoration:none;padding:3.5px 0}
.k-ftr .col a:hover{color:var(--k-ink)}
.k-ftr .news p{font-size:12.5px;line-height:1.7;color:var(--k-ink-2);margin-bottom:10px;letter-spacing:.01em}
.k-ftr .news .row{display:flex;gap:8px}
.k-ftr-bot{display:flex;align-items:center;gap:16px;border-top:1px solid var(--k-line);margin-top:24px;padding-top:16px;font-size:12px;color:var(--k-ink-3);flex-wrap:wrap}
.k-ftr-bot .soc{display:flex;gap:7px;margin-inline-start:auto}
.k-ftr-bot .soc a{width:29px;height:29px;border:1px solid var(--k-line);border-radius:8px;display:grid;place-items:center;color:var(--k-ink-2)}


/* ===== block: site-header ===== */
/* KATA site-header 1.0.0 — kata-ui.dev/blocks/site-header */
.k-hdr{font-family:var(--k-font);text-align:start;color:var(--k-ink);border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);overflow:hidden}
.k-hdr-in{display:flex;align-items:center;gap:26px;padding:13px 18px}
.k-hdr .brand{display:flex;align-items:center;gap:9px;font-weight:650;font-size:15px;letter-spacing:-.01em;color:var(--k-ink);text-decoration:none}
.k-hdr .brand .mk{width:22px;height:22px;border:2.5px solid var(--k-ink);border-radius:7px;display:grid;place-items:center}
.k-hdr .brand .mk i{width:7px;height:7px;border-radius:2.5px;background:var(--k-core);display:block}
.k-hdr nav{display:flex;gap:20px}
.k-hdr nav a{font-size:13.5px;color:var(--k-ink-2);text-decoration:none;font-weight:500}
.k-hdr nav a:hover{color:var(--k-ink)}
.k-hdr .acts{margin-inline-start:auto;display:flex;gap:9px;align-items:center}
.k-hdr .burger{display:none;width:36px;height:36px;border:1px solid var(--k-line);background:var(--k-bg);border-radius:9px;color:var(--k-ink);place-items:center;cursor:pointer;margin-inline-start:auto}
.k-hdr .panel{display:none;border-top:1px solid var(--k-line);padding:10px 18px 14px}
.k-hdr .panel a{display:block;padding:8px 0;font-size:14px;color:var(--k-ink-2);text-decoration:none;font-weight:500}
@media (max-width:640px){.k-hdr nav,.k-hdr .acts{display:none}.k-hdr .burger{display:grid}.k-hdr .panel.open{display:block}}


/* ===== block: stat-cards ===== */
/* KATA stat-cards 1.0.0 — kata-ui.dev/blocks/stat-cards */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;font-family:var(--k-font);width:100%}
.statcard{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:12px;padding:16px;text-align:start}

.statcard .badge{white-space:nowrap;flex:none}
.statcard .k-stat{min-width:0}
.statcard .k-stat-delta{white-space:nowrap}


/* ===== block: team ===== */
/* KATA team 1.0.0 — kata-ui.dev/blocks/team */
/* KATA Block: Team Grid */
.k-team{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;font-family:var(--k-font);color:var(--k-ink)}
.k-team-c{border:1px solid var(--k-line);border-radius:14px;padding:20px;background:var(--k-bg)}
.k-team-c h3{font-size:15px;font-weight:650;margin:12px 0 2px}
.k-team-c .r{font-size:12px;font-weight:600;color:var(--k-accent-ink)}
.k-team-c .b{font-size:12.5px;line-height:1.7;color:var(--k-ink-2);margin-top:8px;letter-spacing:.01em}
@media (max-width:720px){.k-team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.k-team{grid-template-columns:1fr}}


/* ===== block: testimonials ===== */
/* KATA testimonials 1.0.0 — kata-ui.dev/blocks/testimonials */
.k-tst{font-family:var(--k-font);text-align:start;color:var(--k-ink)}
.k-tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:720px){.k-tst-grid{grid-template-columns:1fr}}
.k-tst q{font-size:14px;line-height:1.8;color:var(--k-ink);quotes:"“" "”";letter-spacing:.012em}
.k-tst .who{display:flex;align-items:center;gap:10px;margin-top:14px}
.k-tst .who b{font-size:13px;display:block}
.k-tst .who span{font-size:11.5px;color:var(--k-ink-3)}
.k-tst .stars{color:var(--k-accent);display:flex;gap:2px;margin-bottom:11px}


/* ===== block: use-cases ===== */
/* KATA use-cases 1.0.0 — kata-ui.dev/blocks/use-cases */
.k-uc{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-family:var(--k-font);text-align:start;color:var(--k-ink);align-items:stretch}
@media (max-width:720px){.k-uc{grid-template-columns:1fr}}
.k-uc-list{border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);overflow:hidden}
.k-uc-row{width:100%;display:block;border:none;background:transparent;font:inherit;text-align:start;cursor:pointer;padding:0;color:var(--k-ink)}
.k-uc-row+.k-uc-row{border-top:1px solid var(--k-line)}
.k-uc-head{display:flex;align-items:center;gap:12px;padding:15px 17px}
.k-uc-head .no{font-family:var(--k-mono);font-size:11px;color:var(--k-ink-3)}
.k-uc-head .lb{font-size:14px;font-weight:550;flex:1}
.k-uc-head .pl{color:var(--k-ink-3);display:grid;place-items:center;transition:transform .2s var(--k-ease)}
.k-uc-row.open .pl{transform:rotate(45deg)}
.k-uc-body{display:none;padding:0 17px 17px 41px}
.k-uc-row.open .k-uc-body{display:block}
.k-uc-body h4{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.k-uc-body p{margin-top:6px;font-size:13px;line-height:1.75;color:var(--k-ink-2);letter-spacing:.01em}
.k-uc-body ul{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:6px;font-size:13px;color:var(--k-ink-2)}
.k-uc-body li{display:flex;gap:8px;align-items:center}
.k-uc-body li svg{color:var(--k-accent);flex:none}
.k-uc-stage{position:relative;border-radius:14px;overflow:hidden;min-height:320px}
.k-uc-stage .k-aurora{position:absolute;inset:0;border-radius:14px}
.k-uc-scene{position:absolute;inset:0;display:grid;place-items:center;padding:22px;animation:k-uc-in .45s var(--k-ease)}
.k-uc-scene[hidden]{display:none}
.k-uc-scene .k-glass{width:100%;max-width:300px}
@keyframes k-uc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.k-uc-scene{animation:none}}


/* ===== template: blog-article ===== */
/* KATA blog-article 1.0.0 — kata-ui.dev/templates/blog-article */
/* KATA Template: Blog Article */
.k-tpl-bl{background:var(--k-bg);border:1px solid var(--k-line);border-radius:16px;padding:30px 26px;font-family:var(--k-font);color:var(--k-ink)}
.k-tpl-bl-grid{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:34px;max-width:920px;margin:0 auto}
.k-tpl-bl h1{font-size:29px;font-weight:700;letter-spacing:-.025em;line-height:1.25;margin:12px 0 10px}
.k-tpl-bl .stand{font-size:16.5px;line-height:1.75;color:var(--k-ink-2);letter-spacing:.012em}
.k-tpl-bl-by{display:flex;align-items:center;gap:11px;margin:18px 0 20px;padding:13px 0;border-top:1px solid var(--k-line);border-bottom:1px solid var(--k-line)}
.k-tpl-bl-by b{font-size:13.5px;display:block}
.k-tpl-bl-by span{font-size:12px;color:var(--k-ink-3)}
.k-tpl-bl-by .btn{margin-inline-start:auto}
.k-tpl-bl-hero{border-radius:13px;background:linear-gradient(150deg, var(--k-zinc-700), var(--k-zinc-950));min-height:190px;display:flex;align-items:center;justify-content:center;color:var(--k-zinc-400);font-size:12.5px;letter-spacing:.14em;margin-bottom:8px}
.k-tpl-bl-cap{font-size:12px;color:var(--k-ink-3);margin-bottom:22px;text-align:center}
.k-tpl-bl-prose{font-size:15.5px;line-height:1.85;color:var(--k-ink);letter-spacing:.012em}
.k-tpl-bl-prose p{margin-bottom:15px}
.k-tpl-bl-prose h2{font-size:19.5px;font-weight:650;letter-spacing:-.018em;margin:26px 0 10px}
.k-tpl-bl-prose blockquote{border-inline-start:3px solid var(--k-accent);padding:2px 0 2px 16px;margin:20px 0;font-size:16.5px;line-height:1.75;color:var(--k-ink);letter-spacing:.012em}
.k-tpl-bl-prose code{font-family:var(--k-mono,monospace);font-size:.86em;background:var(--k-bg-soft);border:1px solid var(--k-line);border-radius:5px;padding:1px 5px}
.k-tpl-bl-prose pre{background:var(--k-zinc-950);color:var(--k-zinc-100);border-radius:11px;padding:15px 17px;overflow-x:auto;margin:18px 0}
.k-tpl-bl-prose pre code{background:none;border:0;padding:0;color:inherit}
.k-tpl-bl-prose ul{margin:0 0 15px;padding-inline-start:20px}
.k-tpl-bl-prose li{margin-bottom:6px}
.k-tpl-bl-toc{position:sticky;top:14px;font-size:12.5px}
.k-tpl-bl-toc h4{font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--k-ink-3);margin-bottom:9px}
.k-tpl-bl-toc a{display:block;padding:5px 0 5px 11px;color:var(--k-ink-2);text-decoration:none;border-inline-start:2px solid var(--k-line)}
.k-tpl-bl-toc a.on{color:var(--k-ink);font-weight:600;border-inline-start-color:var(--k-accent)}
.k-tpl-bl-author{display:flex;gap:13px;border:1px solid var(--k-line);border-radius:13px;padding:17px;margin-top:26px;align-items:flex-start}
.k-tpl-bl-author b{font-size:14px}
.k-tpl-bl-author p{font-size:12.5px;line-height:1.7;color:var(--k-ink-2);margin-top:4px;letter-spacing:.01em}
.k-tpl-bl-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.k-tpl-bl-nav a{border:1px solid var(--k-line);border-radius:12px;padding:14px;text-decoration:none;color:var(--k-ink)}
.k-tpl-bl-nav span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink-3);display:block;margin-bottom:5px}
.k-tpl-bl-nav b{font-size:13.5px;font-weight:600;line-height:1.5;display:block}
@media (max-width:820px){.k-tpl-bl-grid{grid-template-columns:1fr}.k-tpl-bl-toc{display:none}.k-tpl-bl-nav{grid-template-columns:1fr}}


/* ===== template: checkout ===== */
/* KATA checkout 1.0.0 — kata-ui.dev/templates/checkout */
/* KATA Template: Checkout */
.k-tpl-co{background:var(--k-bg-soft);border:1px solid var(--k-line);border-radius:16px;padding:26px;font-family:var(--k-font);color:var(--k-ink)}
.k-tpl-co-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
.k-tpl-co-head h2{font-size:19px;font-weight:650;letter-spacing:-.02em}
.k-tpl-co-head span{font-size:12.5px;color:var(--k-ink-3)}
.k-tpl-co-grid{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
.k-tpl-co-card{background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;padding:20px;margin-bottom:16px}
.k-tpl-co-card h3{font-size:14.5px;font-weight:650;margin-bottom:14px}
.k-tpl-co-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.k-tpl-co-form .full{grid-column:1/-1}
.k-tpl-co-sum{position:sticky;top:16px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;padding:20px}
.k-tpl-co-sum h3{font-size:14.5px;font-weight:650;margin-bottom:13px}
.k-tpl-co-item{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:8px 0;border-bottom:1px solid var(--k-line)}
.k-tpl-co-item span{color:var(--k-ink-2)}
.k-tpl-co-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;color:var(--k-ink-2)}
.k-tpl-co-total{display:flex;justify-content:space-between;font-size:15px;font-weight:700;padding-top:11px;margin-top:7px;border-top:2px solid var(--k-line)}
.k-tpl-co-note{font-size:11.5px;line-height:1.65;color:var(--k-ink-3);margin-top:11px;text-align:center}
@media (max-width:820px){.k-tpl-co-grid{grid-template-columns:1fr}.k-tpl-co-sum{position:static;order:-1}}


/* ===== template: dashboard ===== */
/* KATA dashboard 1.0.0 — kata-ui.dev/templates/dashboard */
.k-tpl-dash{display:grid;grid-template-columns:228px 1fr;background:var(--k-bg);color:var(--k-ink);border:1px solid var(--k-line);border-radius:16px;overflow:hidden;min-height:660px;font-family:var(--k-font);text-align:start}
.k-tpl-side{background:var(--k-bg-soft);border-inline-end:1px solid var(--k-line);padding:18px 14px;display:flex;flex-direction:column;gap:4px}
.k-tpl-brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;padding:2px 6px 14px}
.k-tpl-logo{width:24px;height:24px;border-radius:7px;border:2px solid var(--k-ink);display:grid;place-items:center;flex:none}
.k-tpl-logo i{width:8px;height:8px;border-radius:2.5px;background:var(--k-core);display:block}
.k-tpl-navlbl{font-size:11.5px;letter-spacing:.1em;color:var(--k-ink-2);margin:14px 10px 6px;font-weight:650;line-height:1.3}
.k-tpl-nav{display:grid;gap:2px}
.k-tpl-nav a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;color:var(--k-ink-2);text-decoration:none;font-size:13.5px;letter-spacing:.01em}
.k-tpl-nav a:hover{background:color-mix(in srgb,var(--k-ink) 5%,transparent);color:var(--k-ink)}
.k-tpl-nav a.on{background:color-mix(in srgb,var(--k-ink) 7%,transparent);color:var(--k-ink);font-weight:550}
.k-tpl-nav a.on svg{color:var(--k-core)}
.k-tpl-user{margin-top:auto;display:flex;align-items:center;gap:9px;padding:10px 6px 2px;border-top:1px solid var(--k-line)}
.k-tpl-uname{font-size:13px;font-weight:550;line-height:1.3;display:grid}
.k-tpl-uname small{font-size:11.5px;color:var(--k-ink-3);font-weight:400}
.k-tpl-main{padding:22px 24px 26px;display:flex;flex-direction:column;gap:16px;min-width:0}
.k-tpl-top{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.k-tpl-title h2{font-size:20px;font-weight:600;letter-spacing:-.02em}
.k-tpl-title p{margin-top:3px;font-size:13px;color:var(--k-ink-2)}
.k-tpl-actions{margin-inline-start:auto;display:flex;align-items:center;gap:9px}
.k-tpl-search{display:flex;align-items:center;gap:7px;color:var(--k-ink-3)}
.k-tpl-search .input{width:210px}
.k-tpl-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.k-tpl-card{border:1px solid var(--k-line);border-radius:12px;padding:18px 20px;background:var(--k-bg)}
@media (max-width:760px){.k-tpl-stats{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.k-tpl-dash{grid-template-columns:1fr}.k-tpl-side{display:none}.k-tpl-search .input{width:140px}}

.k-tpl-dash .k-line-chart svg{overflow:visible}


/* ===== template: inbox ===== */
/* KATA inbox 1.0.0 — kata-ui.dev/templates/inbox */
.k-tpl3{display:grid;grid-template-columns:206px 322px 1fr;background:var(--k-bg);color:var(--k-ink);border:1px solid var(--k-line);border-radius:16px;overflow:hidden;min-height:660px;font-family:var(--k-font);text-align:start}
.k-tpl3-rail{padding:16px 12px;border-inline-end:1px solid var(--k-line);background:var(--k-bg-soft);display:flex;flex-direction:column;gap:4px}
.k-tpl3-compose{width:100%;justify-content:center;margin-bottom:12px}
.k-tpl3-folders{display:grid;gap:2px}
.k-tpl3-folders a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;color:var(--k-ink-2);text-decoration:none;font-size:13.5px;letter-spacing:.01em}
.k-tpl3-folders a>span:nth-child(2){flex:1}
.k-tpl3-folders a:hover{background:color-mix(in srgb,var(--k-ink) 5%,transparent);color:var(--k-ink)}
.k-tpl3-folders a.on{background:color-mix(in srgb,var(--k-ink) 7%,transparent);color:var(--k-ink);font-weight:550}
.k-tpl3-lbl{font-size:11.5px;letter-spacing:.1em;color:var(--k-ink-2);margin:16px 10px 6px;font-weight:650;line-height:1.3}
.k-tpl3-labels{display:grid;gap:7px;padding:0 9px;font-size:13px;color:var(--k-ink-2)}
.k-tpl3-labels span{display:flex;align-items:center;gap:8px}
.k-tpl3-labels i{width:8px;height:8px;border-radius:50%;display:block}
.k-tpl3-list{border-inline-end:1px solid var(--k-line);display:flex;flex-direction:column;min-width:0}
.k-tpl3-lhead{padding:12px;border-bottom:1px solid var(--k-line)}
.k-tpl3-search{display:flex;align-items:center;gap:7px;color:var(--k-ink-3)}
.k-tpl3-search .input{flex:1;min-width:0}
.k-tpl3-msgs{display:flex;flex-direction:column}
.k-tpl3-msg{display:flex;gap:10px;padding:13px 14px;border-bottom:1px solid var(--k-line);cursor:pointer;position:relative}
.k-tpl3-msg:hover{background:color-mix(in srgb,var(--k-ink) 3%,transparent)}
.k-tpl3-msg.sel{background:color-mix(in srgb,var(--k-accent) 7%,transparent)}
.k-tpl3-mb{min-width:0;flex:1}
.k-tpl3-mt{display:flex;align-items:baseline;gap:8px}
.k-tpl3-mt b{font-size:13px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-tpl3-mt span{margin-inline-start:auto;font-size:11px;color:var(--k-ink-3);flex:none}
.k-tpl3-ms{font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-tpl3-msg.unread .k-tpl3-ms{font-weight:600}
.k-tpl3-mp{font-size:12.5px;color:var(--k-ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-tpl3-dot{position:absolute;right:12px;bottom:14px;width:7px;height:7px;border-radius:50%;background:var(--k-accent)}
.k-tpl3-read{padding:22px 24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.k-tpl3-rt{display:flex;align-items:center;gap:10px}
.k-tpl3-rt h3{font-size:18px;font-weight:600;letter-spacing:-.015em}
.k-tpl3-sender{display:flex;align-items:center;gap:11px}
.k-tpl3-swho{display:grid;line-height:1.35}
.k-tpl3-swho b{font-size:13.5px;font-weight:550}
.k-tpl3-swho span{font-size:12px;color:var(--k-ink-3)}
.k-tpl3-time{margin-inline-start:auto;font-size:12px;color:var(--k-ink-3)}
.k-tpl3-body{display:grid;gap:12px;font-size:14px;line-height:1.75;color:var(--k-ink);letter-spacing:.012em}
.k-tpl3-reply{margin-top:auto;display:grid;gap:9px}
.k-tpl3-ractions{display:flex;gap:8px}
@media (max-width:900px){.k-tpl3{grid-template-columns:206px 1fr}.k-tpl3-read{display:none}}
@media (max-width:560px){.k-tpl3{grid-template-columns:1fr}.k-tpl3-rail{display:none}}


/* ===== template: landing ===== */
/* KATA landing 1.0.0 — kata-ui.dev/templates/landing */
.k-tpl4{background:var(--k-bg);color:var(--k-ink);border:1px solid var(--k-line);border-radius:16px;overflow:hidden;font-family:var(--k-font);text-align:start}
.k-tpl4-sec{max-width:920px;margin:0 auto;padding:36px 28px}
.k-tpl4-top{padding:18px 28px 4px}
.k-tpl4-top .k-hdr{margin-inline:auto}
.k-tpl4-foot{padding-bottom:26px}
.k-tpl4-hero{max-width:1080px;margin:0 auto;padding:22px 28px 4px}
.k-tpl4-heroin{display:grid;gap:16px;justify-items:start;padding:14px 6px}
.k-tpl4-heroin h1{font-size:41px;font-weight:650;letter-spacing:-.03em;line-height:1.12;max-width:15ch}
.k-tpl4-heroin p{font-size:15.5px;line-height:1.75;max-width:52ch;letter-spacing:.012em}
.k-tpl4-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
@media (max-width:560px){.k-tpl4-heroin h1{font-size:31px}.k-tpl4-sec{padding:26px 18px}}


/* ===== template: product-page ===== */
/* KATA product-page 1.0.0 — kata-ui.dev/templates/product-page */
/* KATA Template: Product Page */
.k-tpl-pd{background:var(--k-bg);border:1px solid var(--k-line);border-radius:16px;padding:26px;font-family:var(--k-font);color:var(--k-ink)}
.k-tpl-pd-crumbs{font-size:12.5px;color:var(--k-ink-3);margin-bottom:18px}
.k-tpl-pd-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:start}
.k-tpl-pd-main{border-radius:14px;background:linear-gradient(160deg, var(--k-zinc-700), var(--k-zinc-950));min-height:300px;display:flex;align-items:center;justify-content:center;color:var(--k-on-color)}
.k-tpl-pd-main b{font-size:21px;font-weight:650;letter-spacing:.02em;text-align:center;padding:20px}
.k-tpl-pd-thumbs{display:flex;gap:9px;margin-top:9px}
.k-tpl-pd-thumbs span{flex:1;height:56px;border-radius:10px;border:1px solid var(--k-line)}
.k-tpl-pd-thumbs .on{outline:2px solid var(--k-accent);outline-offset:1px}
.k-tpl-pd-info h2{font-size:23px;font-weight:650;letter-spacing:-.02em;margin:9px 0 7px}
.k-tpl-pd-stars{display:flex;align-items:center;gap:7px;color:var(--k-yamabuki-ink);font-size:12.5px}
.k-tpl-pd-stars span{color:var(--k-ink-2)}
.k-tpl-pd-price{display:flex;align-items:baseline;gap:10px;margin:15px 0 4px}
.k-tpl-pd-price b{font-size:24px;font-weight:700}
.k-tpl-pd-price s{color:var(--k-ink-3);font-size:15px}
.k-tpl-pd-price .save{color:var(--k-success-ink);font-size:12.5px;font-weight:650}
.k-tpl-pd-note{font-size:12.5px;color:var(--k-ink-2);margin-bottom:16px}
.k-tpl-pd-lbl{font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink-3);margin:15px 0 8px}
.k-tpl-pd-sw{display:flex;gap:9px}
.k-tpl-pd-sw label{cursor:pointer}
.k-tpl-pd-sw input{position:absolute;opacity:0}
.k-tpl-pd-sw i{display:block;width:26px;height:26px;border-radius:50%;border:2px solid var(--k-bg);box-shadow:0 0 0 1px var(--k-line)}
.k-tpl-pd-sw input:checked + i{box-shadow:0 0 0 2px var(--k-accent)}
.k-tpl-pd-sw input:focus-visible + i{box-shadow:0 0 0 2px var(--k-ink)}
.k-tpl-pd-buy{display:flex;gap:10px;margin-top:20px}
.k-tpl-pd-qty{display:inline-flex;align-items:center;border:1px solid var(--k-line);border-radius:9px;overflow:hidden}
.k-tpl-pd-qty button{width:36px;height:100%;min-height:40px;border:0;background:var(--k-bg);font-size:16px;cursor:pointer;color:var(--k-ink)}
.k-tpl-pd-qty b{min-width:34px;text-align:center;font-size:14px}
.k-tpl-pd-ship{font-size:12.5px;color:var(--k-ink-2);line-height:1.8;margin-top:14px;letter-spacing:.01em}
.k-tpl-pd-acc{margin-top:20px}
.k-tpl-pd-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:24px}
.k-tpl-pd-feats div{border:1px solid var(--k-line);border-radius:12px;padding:14px;font-size:12.5px;line-height:1.65;color:var(--k-ink-2);letter-spacing:.01em}
.k-tpl-pd-feats b{display:block;color:var(--k-ink);font-size:13px;margin-bottom:3px}
@media (max-width:820px){.k-tpl-pd-grid{grid-template-columns:1fr}.k-tpl-pd-feats{grid-template-columns:1fr}}


/* ===== template: settings-page ===== */
/* KATA settings-page 1.0.0 — kata-ui.dev/templates/settings-page */
.k-tpl2{display:grid;grid-template-columns:216px 1fr;background:var(--k-bg);color:var(--k-ink);border:1px solid var(--k-line);border-radius:16px;overflow:hidden;min-height:660px;font-family:var(--k-font);text-align:start}
.k-tpl2-side{padding:24px 18px;border-inline-end:1px solid var(--k-line);background:var(--k-bg-soft)}
.k-tpl2-side h2{font-size:19px;font-weight:600;letter-spacing:-.02em}
.k-tpl2-sub{margin-top:5px;font-size:12.5px;color:var(--k-ink-2);line-height:1.6;letter-spacing:.01em}
.k-tpl2-nav{display:grid;gap:2px;margin-top:18px}
.k-tpl2-nav a{padding:7px 10px;border-radius:8px;color:var(--k-ink-2);text-decoration:none;font-size:13.5px}
.k-tpl2-nav a:hover{background:color-mix(in srgb,var(--k-ink) 5%,transparent);color:var(--k-ink)}
.k-tpl2-nav a.on{background:color-mix(in srgb,var(--k-ink) 7%,transparent);color:var(--k-ink);font-weight:550}
.k-tpl2-main{padding:24px;display:flex;flex-direction:column;gap:16px;min-width:0;background:var(--k-bg)}
.k-tpl2-card{border:1px solid var(--k-line);border-radius:12px;padding:20px 22px}
.k-tpl2-card h3{font-size:15.5px;font-weight:600}
.k-tpl2-csub{margin-top:4px;font-size:13px;color:var(--k-ink-2)}
.k-tpl2-avarow{display:flex;align-items:center;gap:14px;margin-top:16px}
.k-tpl2-note{margin-top:5px;font-size:12px;color:var(--k-ink-3)}
.k-tpl2-form{display:grid;gap:16px;margin-top:18px;max-width:520px}
.k-tpl2-actions{display:flex;gap:9px;margin-top:18px}
.k-tpl2-row{display:flex;align-items:center;gap:16px;padding:13px 0;border-top:1px solid var(--k-line)}
.k-tpl2-row:first-of-type{margin-top:8px}
.k-tpl2-row b{font-size:13.5px;font-weight:550}
.k-tpl2-row p{margin-top:2px;font-size:12.5px;color:var(--k-ink-2);line-height:1.55;letter-spacing:.01em}
.k-tpl2-row>:last-child{margin-inline-start:auto;flex:none}
.k-tpl2-card .k-alert{margin-top:14px}
@media (max-width:560px){.k-tpl2{grid-template-columns:1fr}.k-tpl2-side{display:none}}