
/*!
 * @since Last modified: 2025-7-26 16:47:14
 * @name OrcaUI front-end framework.
 * @version 1.0.5
 * @author OrcaUI development team <orcasaga@outlook.com>
 * @description OrcaUI is a self-contained UI framework that delivers the power and elegance of native Web Components. Like its namesake orca, it combines comprehensive features with intuitive usability - offering ready-to-use components that work across all modern browsers. Designed for developers who need production-ready UI solutions without framework dependencies.
 * @see {@link https://www.orcaui.com|Official website}
 * @see {@link https://github.com/orcasaga/orcaui/issues|github issues}
 * @see {@link https://gitee.com/orcasaga/orcaui/issues|Gitee issues}
 * @see {@link https://www.npmjs.com/package/orcaui|NPM}
 * @issue Discord Group https://discord.gg/ffwSrF5D
 * @copyright This software supports the MIT License, allowing free learning and commercial use, but please retain the terms 'OrcaUI' & 'ORCAUI' within the software.
 * @license MIT license
*/
@charset "utf-8";
/**
 * @since Last modified: 2025-07-24 12:20:23
 */
/*
 *Last modified: 2025-07-01 23:36:33
 */
:root,
[scheme=dark]:where(:not(:root)) {
  --_h-stage: 0;
  --_s-stage: 0%;
  --_l-stage: 100%;
  --_c-stage: hsl(var(--_h-stage), var(--_s-stage), var(--_l-stage));
  --_c-stage-0: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0);
  --_c-stage-4: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.04);
  --_c-stage-8: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.08);
  --_c-stage-12: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.12);
  --_c-stage-16: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.16);
  --_c-stage-20: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.20);
  --_c-stage-24: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.24);
  --_c-stage-28: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.28);
  --_c-stage-32: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.32);
  --_c-stage-36: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.36);
  --_c-stage-40: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.40);
  --_c-stage-44: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.44);
  --_c-stage-48: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.48);
  --_c-stage-52: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.52);
  --_c-stage-56: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.56);
  --_c-stage-60: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.60);
  --_c-stage-64: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.64);
  --_c-stage-68: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.68);
  --_c-stage-72: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.72);
  --_c-stage-66: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.76);
  --_c-stage-80: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.80);
  --_c-stage-84: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.84);
  --_c-stage-88: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.88);
  --_c-stage-92: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.92);
  --_c-stage-96: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.96);
  --_c-stage-100: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 1);
  --_h-mask: 0;
  --_s-mask: 0%;
  --_l-mask: 0%;
  --_c-mask: hsl(var(--_h-mask), var(--_s-mask), var(--_l-mask));
  --_c-mask-0: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0);
  --_c-mask-4: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.04);
  --_c-mask-8: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.08);
  --_c-mask-12: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.12);
  --_c-mask-16: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.16);
  --_c-mask-20: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.20);
  --_c-mask-24: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.24);
  --_c-mask-28: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.28);
  --_c-mask-32: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.32);
  --_c-mask-36: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.36);
  --_c-mask-40: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.40);
  --_c-mask-44: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.44);
  --_c-mask-48: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.48);
  --_c-mask-52: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.52);
  --_c-mask-56: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.56);
  --_c-mask-60: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.60);
  --_c-mask-64: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.64);
  --_c-mask-68: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.68);
  --_c-mask-72: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.72);
  --_c-mask-66: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.76);
  --_c-mask-80: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.80);
  --_c-mask-84: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.84);
  --_c-mask-88: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.88);
  --_c-mask-92: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.92);
  --_c-mask-96: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 0.96);
  --_c-mask-100: hsla(var(--_h-mask), var(--_s-mask), var(--_l-mask), 1);
  --_c-coef: 1;
  --_h-prim: 240;
  --_s-prim: 100%;
  --_l-prim: 65%;
  --_a-prim: 1;
  --_c-prim: hsla(var(--_h-prim), var(--_s-prim), var(--_l-prim), var(--_a-prim));
  --_c-prim-bg: hsla(var(--_h-prim), var(--_s-prim), var(--_l-prim), 0.04);
  --_c-prim-bd: hsl(var(--_h-prim), 60%, calc(var(--_l-stage) - 10%*var(--_c-coef)));
  --_c-prim-fc: hsl(var(--_h-prim), 62%, calc(var(--_l-stage) - 15%*var(--_c-coef)));
  --_c-prim-ht: hsl(var(--_h-prim), 70%, calc(var(--_l-stage) - 30%*var(--_c-coef)));
  --_c-prim-lt: hsla(var(--_h-prim), calc(var(--_s-prim) + 10%), calc(var(--_l-prim) + 10%), var(--_a-prim));
  --_c-prim-dp: hsla(var(--_h-prim), calc(var(--_s-prim) - 10%), calc(var(--_l-prim) - 10%), var(--_a-prim));
  --_c-prim-aj: hsla(calc(var(--_h-prim) + 50), var(--_s-prim), var(--_l-prim), var(--_a-prim));
  --_c-prim-gy: hsla(var(--_h-prim), 20%, calc(var(--_l-stage) - 20%*var(--_c-coef)), var(--_a-prim));
  --_c-prim-dk: hsla(var(--_h-prim), 20%, 30%, var(--_a-prim));
  --_c-prim-sg: hsl(var(--_h-prim), 70%, 20%);
  --_c-prim-ct: hsla(calc(var(--_h-prim) + 180), var(--_s-prim), var(--_l-prim), var(--_a-prim));
  --_c-prim-tp: hsla(var(--_h-prim), var(--_s-prim), var(--_l-prim), 0);
  --_c-prim-ac: hsla(var(--_h-prim), var(--_s-prim), var(--_l-prim), 0.08);
  --_c-prim-sd: hsla(var(--_h-prim), var(--_s-prim), var(--_l-prim), 0.2);
  --_c-prim-tl: hsla(var(--_h-prim), var(--_s-prim), var(--_l-prim), 0.6);
  --_c-prim-fg: hsla(var(--_h-prim), var(--_s-prim), var(--_l-prim), 0.8);
  --_h-text: 0;
  --_s-text: 0%;
  --_l-text: 0%;
  --_a-text: 1;
  --_c-text: hsla(var(--_h-text), var(--_s-text), var(--_l-text), var(--_a-text));
  --_c-text-bg: hsla(var(--_h-text), var(--_s-text), var(--_l-text), 0.04);
  --_c-text-bd: hsl(var(--_h-text), var(--_s-text), calc(var(--_l-stage) - 12%*var(--_c-coef)));
  --_c-text-fc: hsl(var(--_h-text), var(--_s-text), calc(var(--_l-stage) - 16%*var(--_c-coef)));
  --_c-text-ht: hsl(var(--_h-text), var(--_s-text), 60%);
  --_c-text-lt: hsla(var(--_h-text), var(--_s-text), 30%, var(--_a-text));
  --_c-text-dp: hsla(var(--_h-text), var(--_s-text), 10%, var(--_a-text));
  --_c-text-aj: hsla(var(--_h-text), var(--_s-text), 40%, var(--_a-text));
  --_c-text-ct: hsla(var(--_h-text), var(--_s-text), 100%, var(--_a-text));
  --_c-text-tp: hsla(var(--_h-text), var(--_s-text), calc(-100%*var(--_c-coef)), 0);
  --_c-text-ac: hsla(var(--_h-text), var(--_s-text), calc(-100%*var(--_c-coef)), 0.06);
  --_c-text-sd: hsla(var(--_h-text), var(--_s-text), calc(-100%*var(--_c-coef)), 0.2);
  --_c-text-tl: hsla(var(--_h-text), var(--_s-text), 0, 0.6);
  --_c-text-fg: hsla(var(--_h-text), var(--_s-text), 0, 0.8);
  --_c-brief: hsla(var(--_h-text), var(--_s-text), calc(var(--_l-text) + 20%*var(--_c-coef)), var(--_a-text));
  --_c-brief-bg: hsla(var(--_h-text), var(--_s-text), var(--_l-text), 0.02);
  --_c-brief-bd: var(--_c-brief);
  --_c-brief-sd: hsla(var(--_h-text), var(--_s-text), 0, 0.2);
  --_c-caption: hsl(var(--_h-text), var(--_s-text), calc(var(--_l-stage) - 30%*var(--_c-coef)));
  --_c-caption-bg: hsla(var(--_h-text), var(--_s-text), var(--_l-text), 0.02);
  --_c-caption-bd: var(--_c-caption);
  --_c-caption-sd: hsl(var(--_h-text), var(--_s-text), 0, 0.1);
  --_c-disable: hsl(var(--_h-text), var(--_s-text), calc(var(--_l-stage) - 30%*var(--_c-coef)));
  --_c-disable-bg: hsla(var(--_h-text), var(--_s-text), var(--_l-text), 0.02);
  --_c-disable-bd: var(--_c-disable);
  --_c-disable-sd: hsl(var(--_h-text), var(--_s-text), 0, 0.1);
  --_h-succ: 134;
  --_s-succ: 43%;
  --_l-succ: 45%;
  --_a-succ: 1;
  --_c-succ: hsla(var(--_h-succ), var(--_s-succ), var(--_l-succ), var(--_a-succ));
  --_c-succ-bg: hsla(var(--_h-succ), var(--_s-succ), var(--_l-succ), 0.04);
  --_c-succ-bd: hsl(var(--_h-succ), 33%, calc(var(--_l-stage) - 10%*var(--_c-coef)));
  --_c-succ-fc: hsl(var(--_h-succ), 38%, calc(var(--_l-stage) - 13%*var(--_c-coef)));
  --_c-succ-ht: hsl(var(--_h-succ), 23%, 74%);
  --_c-succ-lt: hsla(var(--_h-succ), var(--_s-succ), calc(var(--_l-succ) + 5%), var(--_a-succ));
  --_c-succ-dp: hsla(var(--_h-succ), var(--_s-succ), calc(var(--_l-succ) - 5%), var(--_a-succ));
  --_c-succ-aj: hsla(calc(var(--_h-succ) - 56), 63%, 59%, var(--_a-succ));
  --_c-succ-tp: hsla(var(--_h-succ), var(--_s-succ), var(--_l-succ), 0);
  --_c-succ-ac: hsla(var(--_h-succ), var(--_s-succ), var(--_l-succ), 0.08);
  --_c-succ-sd: hsla(var(--_h-succ), var(--_s-succ), var(--_l-succ), 0.2);
  --_c-succ-tl: hsla(var(--_h-succ), var(--_s-succ), var(--_l-succ), 0.6);
  --_c-succ-fg: hsla(var(--_h-succ), var(--_s-succ), var(--_l-succ), 0.8);
  --_h-error: 354;
  --_s-error: 70%;
  --_l-error: 54%;
  --_a-error: 1;
  --_c-error: hsla(var(--_h-error), var(--_s-error), var(--_l-error), var(--_a-error));
  --_c-error-bg: hsla(var(--_h-error), var(--_s-error), var(--_l-error), 0.04);
  --_c-error-bd: hsl(var(--_h-error), 39%, calc(var(--_l-stage) - 10%*var(--_c-coef)));
  --_c-error-fc: hsl(var(--_h-error), 42%, calc(var(--_l-stage) - 14%*var(--_c-coef)));
  --_c-error-ht: hsl(var(--_h-error), 23%, 74%);
  --_c-error-lt: hsla(var(--_h-error), var(--_s-error), calc(var(--_l-error) + 5%), var(--_a-error));
  --_c-error-dp: hsla(var(--_h-error), var(--_s-error), calc(var(--_l-error) - 5%), var(--_a-error));
  --_c-error-aj: hsla(calc(var(--_h-error) - 310), 100%, 50%, var(--_a-error));
  --_c-error-tp: hsla(var(--_h-error), var(--_s-error), var(--_l-error), 0);
  --_c-error-ac: hsla(var(--_h-error), var(--_s-error), var(--_l-error), 0.08);
  --_c-error-sd: hsla(var(--_h-error), var(--_s-error), var(--_l-error), 0.2);
  --_c-error-tl: hsla(var(--_h-error), var(--_s-error), var(--_l-error), 0.6);
  --_c-error-fg: hsla(var(--_h-error), var(--_s-error), var(--_l-error), 0.8);
  --_h-warn: 45;
  --_s-warn: 100%;
  --_l-warn: 51%;
  --_a-warn: 1;
  --_c-warn: hsla(var(--_h-warn), var(--_s-warn), var(--_l-warn), var(--_a-warn));
  --_c-warn-bg: hsla(var(--_h-warn), var(--_s-warn), var(--_l-warn), 0.04);
  --_c-warn-bd: hsl(var(--_h-warn), 60%, calc(var(--_l-stage) - 10%*var(--_c-coef)));
  --_c-warn-fc: hsl(var(--_h-warn), 49%, calc(var(--_l-stage) - 15%*var(--_c-coef)));
  --_c-warn-ht: hsl(var(--_h-warn), 23%, 74%);
  --_c-warn-lt: hsla(var(--_h-warn), var(--_s-warn), calc(var(--_l-warn) + 5%), var(--_a-warn));
  --_c-warn-dp: hsla(var(--_h-warn), var(--_s-warn), calc(var(--_l-warn) - 12%), var(--_a-warn));
  --_c-warn-aj: hsla(calc(var(--_h-warn)), var(--_s-warn), 74%, var(--_a-warn));
  --_c-warn-tp: hsla(var(--_h-warn), var(--_s-warn), var(--_l-warn), 0);
  --_c-warn-ac: hsla(var(--_h-warn), var(--_s-warn), var(--_l-warn), 0.08);
  --_c-warn-sd: hsla(var(--_h-warn), var(--_s-warn), var(--_l-warn), 0.2);
  --_c-warn-tl: hsla(var(--_h-warn), var(--_s-warn), var(--_l-warn), 0.6);
  --_c-warn-fg: hsla(var(--_h-warn), var(--_s-warn), var(--_l-warn), 0.8);
  --_h-info: 210;
  --_s-info: 100%;
  --_l-info: 55%;
  --_a-info: 1;
  --_c-info: hsla(var(--_h-info), var(--_s-info), var(--_l-info), var(--_a-info));
  --_c-info-bg: hsla(var(--_h-info), var(--_s-info), var(--_l-info), 0.04);
  --_c-info-bd: hsl(var(--_h-info), 60%, calc(var(--_l-stage) - 10%*var(--_c-coef)));
  --_c-info-fc: hsl(var(--_h-info), 62%, calc(var(--_l-stage) - 15%*var(--_c-coef)));
  --_c-info-ht: hsl(var(--_h-info), 75%, 67%);
  --_c-info-lt: hsla(var(--_h-info), var(--_s-info), calc(var(--_l-info) + 5%), var(--_a-info));
  --_c-info-dp: hsla(var(--_h-info), var(--_s-info), calc(var(--_l-info) - 10%), var(--_a-info));
  --_c-info-aj: hsla(calc(var(--_h-info) - 30), 82%, 44%, var(--_a-info));
  --_c-info-tp: hsla(var(--_h-info), var(--_s-info), var(--_l-info), 0);
  --_c-info-ac: hsla(var(--_h-info), var(--_s-info), var(--_l-info), 0.08);
  --_c-info-sd: hsla(var(--_h-info), var(--_s-info), var(--_l-info), 0.2);
  --_c-info-tl: hsla(var(--_h-info), var(--_s-info), var(--_l-info), 0.6);
  --_c-info-fg: hsla(var(--_h-info), var(--_s-info), var(--_l-info), 0.8);
  --_h-issue: 31;
  --_s-issue: 100%;
  --_l-issue: 50%;
  --_a-issue: 1;
  --_c-issue: hsla(var(--_h-issue), var(--_s-issue), var(--_l-issue), var(--_a-issue));
  --_c-issue-bg: hsla(var(--_h-issue), var(--_s-issue), var(--_l-issue), 0.04);
  --_c-issue-bd: hsl(var(--_h-issue), 60%, calc(var(--_l-stage) - 10%*var(--_c-coef)));
  --_c-issue-fc: hsl(var(--_h-issue), 49%, calc(var(--_l-stage) - 15%*var(--_c-coef)));
  --_c-issue-ht: hsl(var(--_h-issue), 23%, 74%);
  --_c-issue-lt: hsla(var(--_h-issue), var(--_s-issue), calc(var(--_l-issue) + 5%), var(--_a-issue));
  --_c-issue-dp: hsla(var(--_h-issue), var(--_s-issue), calc(var(--_l-issue) - 10%), var(--_a-issue));
  --_c-issue-aj: hsla(calc(var(--_h-issue) + 20), var(--_s-issue), 57%, var(--_a-issue));
  --_c-issue-tp: hsla(var(--_h-issue), var(--_s-issue), var(--_l-issue), 0);
  --_c-issue-ac: hsla(var(--_h-issue), var(--_s-issue), var(--_l-issue), 0.08);
  --_c-issue-sd: hsla(var(--_h-issue), var(--_s-issue), var(--_l-issue), 0.2);
  --_c-issue-tl: hsla(var(--_h-issue), var(--_s-issue), var(--_l-issue), 0.5);
  --_c-issue-fg: hsla(var(--_h-issue), var(--_s-issue), var(--_l-issue), 0.8);
}
:root {
  --_c-text-sta: hsl(var(--_h-text), var(--_s-text),var(--_l-text));
  --_c-black: hsl(0, 0%, 0%);
  --_c-black-0: hsla(0, 0%, 0%, 0);
  --_c-black-4: hsla(0, 0%, 0%, 0.04);
  --_c-black-8: hsla(0, 0%, 0%, 0.08);
  --_c-black-12: hsla(0, 0%, 0%, 0.12);
  --_c-black-16: hsla(0, 0%, 0%, 0.16);
  --_c-black-20: hsla(0, 0%, 0%, 0.20);
  --_c-black-24: hsla(0, 0%, 0%, 0.24);
  --_c-black-28: hsla(0, 0%, 0%, 0.28);
  --_c-black-32: hsla(0, 0%, 0%, 0.32);
  --_c-black-36: hsla(0, 0%, 0%, 0.36);
  --_c-black-40: hsla(0, 0%, 0%, 0.40);
  --_c-black-44: hsla(0, 0%, 0%, 0.44);
  --_c-black-48: hsla(0, 0%, 0%, 0.48);
  --_c-black-52: hsla(0, 0%, 0%, 0.52);
  --_c-black-56: hsla(0, 0%, 0%, 0.56);
  --_c-black-60: hsla(0, 0%, 0%, 0.60);
  --_c-black-64: hsla(0, 0%, 0%, 0.64);
  --_c-black-68: hsla(0, 0%, 0%, 0.68);
  --_c-black-72: hsla(0, 0%, 0%, 0.72);
  --_c-black-66: hsla(0, 0%, 0%, 0.76);
  --_c-black-80: hsla(0, 0%, 0%, 0.80);
  --_c-black-84: hsla(0, 0%, 0%, 0.84);
  --_c-black-88: hsla(0, 0%, 0%, 0.88);
  --_c-black-92: hsla(0, 0%, 0%, 0.92);
  --_c-black-96: hsla(0, 0%, 0%, 0.96);
  --_c-black-100: hsla(0, 0%, 0%, 1);
  --_c-white: hsl(0, 0%, 100%);
  --_c-white-0: hsla(0, 0%, 100%, 0);
  --_c-white-4: hsla(0, 0%, 100%, 0.04);
  --_c-white-8: hsla(0, 0%, 100%, 0.08);
  --_c-white-12: hsla(0, 0%, 100%, 0.12);
  --_c-white-16: hsla(0, 0%, 100%, 0.16);
  --_c-white-20: hsla(0, 0%, 100%, 0.20);
  --_c-white-24: hsla(0, 0%, 100%, 0.24);
  --_c-white-28: hsla(0, 0%, 100%, 0.28);
  --_c-white-32: hsla(0, 0%, 100%, 0.32);
  --_c-white-36: hsla(0, 0%, 100%, 0.36);
  --_c-white-40: hsla(0, 0%, 100%, 0.40);
  --_c-white-44: hsla(0, 0%, 100%, 0.44);
  --_c-white-48: hsla(0, 0%, 100%, 0.48);
  --_c-white-52: hsla(0, 0%, 100%, 0.52);
  --_c-white-56: hsla(0, 0%, 100%, 0.56);
  --_c-white-60: hsla(0, 0%, 100%, 0.60);
  --_c-white-64: hsla(0, 0%, 100%, 0.64);
  --_c-white-68: hsla(0, 0%, 100%, 0.68);
  --_c-white-72: hsla(0, 0%, 100%, 0.72);
  --_c-white-66: hsla(0, 0%, 100%, 0.76);
  --_c-white-80: hsla(0, 0%, 100%, 0.80);
  --_c-white-84: hsla(0, 0%, 100%, 0.84);
  --_c-white-88: hsla(0, 0%, 100%, 0.88);
  --_c-white-92: hsla(0, 0%, 100%, 0.92);
  --_c-white-96: hsla(0, 0%, 100%, 0.96);
  --_c-white-100: hsla(0, 0%, 100%, 1);
  --_spin: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg' stroke='%23198cff'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cg transform='translate(1 1)' stroke-width='1'%3E %3Ccircle stroke-opacity='.2' cx='14' cy='14' r='12'/%3E %3Cpath d='M14,26C7.372,26,2,20.629,2,14'%3E %3CanimateTransform attributeName='transform' type='rotate' from='0 14 14' to='360 14 14' dur='1s' repeatCount='indefinite'/%3E %3C/path%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
  --_spin-dk: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg' stroke='%23ffffff'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cg transform='translate(1 1)' stroke-width='1'%3E %3Ccircle stroke-opacity='.2' cx='14' cy='14' r='12'/%3E %3Cpath d='M14,26C7.372,26,2,20.629,2,14'%3E %3CanimateTransform attributeName='transform' type='rotate' from='0 14 14' to='360 14 14' dur='1s' repeatCount='indefinite'/%3E %3C/path%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
  --_blank: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3C/svg%3E");
  --_avatar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cpath fill='%23FAFAFA' d='M0 0h80v160H0z'/%3E%3Cpath fill='%23F2F2F2' d='M80 0h80v160H80z'/%3E%3Cpath fill='%23B2B2B2' d='M98.916 97.252c10.393-6.382 17.34-17.851 17.34-30.916 0-19.992-16.266-36.255-36.257-36.255-19.992 0-36.255 16.263-36.255 36.255 0 13.064 6.946 24.534 17.338 30.916-26.968 8.119-46.615 33.135-46.615 62.748h131.066c0-29.613-19.648-54.629-46.617-62.748z'/%3E%3C/svg%3E");
  --_empty: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M118.827 138.41a7.968 7.968 0 0 0 7.92-7.921V111.35a7.92 7.92 0 1 0-15.84 0v19.173a7.968 7.968 0 0 0 7.92 7.92zm14.596 14.595h19.185a7.92 7.92 0 1 0 0-15.84h-19.173a7.92 7.92 0 1 0 0 15.84zm-29.192-15.782H85.058a7.92 7.92 0 0 0 0 15.842h19.173a7.92 7.92 0 0 0 0-15.842zm14.596 14.585a7.968 7.968 0 0 0-7.92 7.92v19.173a7.92 7.92 0 0 0 15.84 0v-19.149a7.968 7.968 0 0 0-7.92-7.92zm788.504 118.275a38.726 38.726 0 1 0 38.726 38.726 38.678 38.678 0 0 0-38.762-38.785zm0 61.492a22.884 22.884 0 1 1 22.884-22.885 22.92 22.92 0 0 1-22.884 22.885zM692.526 47.879a23.501 23.501 0 1 0-23.501-23.5 23.501 23.501 0 0 0 23.5 23.5zm0-31.303a7.672 7.672 0 1 1-7.672 7.672 7.707 7.707 0 0 1 7.672-7.672zm0 0' fill='%23e6e6e6'/%3E%3Cpath d='M275.769 992.816c0 11.145 38.156 21.343 99.85 26.963a1197.186 1197.186 0 0 0 199.912 0c61.906-5.573 99.85-15.818 99.85-26.963s-38.157-21.343-99.85-26.964a1197.02 1197.02 0 0 0-199.913 0c-61.657 5.573-99.85 15.818-99.85 26.964zm0 0' fill='%23f0f0f0'/%3E%3Cpath d='M571.025 482.896a7.766 7.766 0 0 0-11.134 0l-12 12-11.999-12a7.873 7.873 0 1 0-11.134 11.134l12 12-12 12a7.956 7.956 0 1 0 11.253 11.252l12-12 11.999 12a7.778 7.778 0 0 0 5.573 2.371 7.577 7.577 0 0 0 5.573-2.371 7.766 7.766 0 0 0 0-11.134l-12-12 12-11.999a8.11 8.11 0 0 0-.119-11.253zm-154.902 46.398a7.873 7.873 0 0 0 5.573 2.371 7.873 7.873 0 0 0 5.572-13.481l-12-12 12-12a7.766 7.766 0 0 0 0-11.133 7.992 7.992 0 0 0-11.264 0l-12 12-11.999-12a7.992 7.992 0 0 0-11.264 0 7.766 7.766 0 0 0 0 11.134l12 11.999-12 12a7.766 7.766 0 0 0 0 11.133 7.778 7.778 0 0 0 5.573 2.372 7.577 7.577 0 0 0 5.573-2.372l11.999-11.999zm59.879 83.391a107.39 107.39 0 0 0-77.452 32.655 7.956 7.956 0 0 0 .119 11.134 7.838 7.838 0 0 0 11.134-.118 92.617 92.617 0 0 1 132.385 0 8.158 8.158 0 0 0 5.692 2.371 7.826 7.826 0 0 0 7.304-4.826 8.015 8.015 0 0 0-1.613-8.656 107.758 107.758 0 0 0-77.57-32.536zm0 0' fill='%23dbdbdb'/%3E%3Cpath d='M768.602 313.872l-82.147-91.68a94.23 94.23 0 0 0-70.147-31.303H246.505a85.905 85.905 0 0 0-85.858 85.858V841.4a85.905 85.905 0 0 0 85.858 85.858h459.49a85.905 85.905 0 0 0 85.859-85.858V374.617a91.063 91.063 0 0 0-23.264-60.745zm-94.028-81.163l82.147 91.68a77.428 77.428 0 0 1 14.228 23.264h-85.49a38.963 38.963 0 0 1-38.975-38.974V212.8a77.285 77.285 0 0 1 28.09 19.92zm101.45 608.702a70.124 70.124 0 0 1-70.028 70.029h-459.49a70.124 70.124 0 0 1-70.03-70.03V276.748a70.124 70.124 0 0 1 70.03-70.029h369.802a79.443 79.443 0 0 1 14.347 1.364v100.585a54.91 54.91 0 0 0 54.804 54.804h89.7a84.352 84.352 0 0 1 .865 11.134v466.794zm0 0' fill='%23dbdbdb'/%3E%3C/svg%3E");
  --_none: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjBweCIgaGVpZ2h0PSIxNjBweCIgdmlld0JveD0iMCAwIDE2MCAxNjAiID4NCjxwYXRoIGZpbGw9IiNDOUNBQ0EiIGQ9Ik03OC42MzQsOTMuNjU3SDYxLjUzYy0xLjcxNywwLTMuMTA4LTEuMjIzLTMuMTA5LTIuNzI5di0yLjExbDkuMTYzLTYuOTU4bDMuMjg0LDIuODQxDQoJCQljMS43MDgsMS40ODYsNC40MjIsMS41ODUsNi4yNjIsMC4yMjhsMTUuNDg3LTExLjUwNWw2LjIyNiw1LjQ3OWMwLjYyOCwwLjU5MSwwLjg5MiwwLjg1OCwxLjU4LDAuODU4DQoJCQljMC40OTMsMCwwLjkwMy0wLjI0NCwxLjIyLTAuNTg3YzAuMzMyLTAuMzYzLDAuMzExLTEuMjM4LDAuMzExLTEuNjcyVjYzLjYwOGMwLTMuMDE4LTIuNzgzLTUuNDY1LTYuMjE5LTUuNDY1SDYxLjUzDQoJCQljLTMuNDM1LDAtNi4yMTgsMi40NDctNi4yMTgsNS40NjV2MjcuMzJjMCwxLjQ0OCwwLjY1NSwyLjgzOSwxLjgyMSwzLjg2M2MxLjE2NywxLjAyMiwyLjc0OSwxLjYwMSw0LjM5NywxLjYwMWgxNy4wNzENCgkJCWMwLjc5NSwwLDEuNTI1LTAuNTY2LDEuNTgzLTEuMjY1YzAuMDY0LTAuOC0wLjY1NC0xLjQ2OC0xLjU0OC0xLjQ2OEw3OC42MzQsOTMuNjU3eiBNNTguNDIyLDYzLjYwOA0KCQkJYzAtMS41MDksMS4zOTItMi43MzIsMy4xMDktMi43MzJoMzQuMjA0YzEuNzE3LDAsMy4xMDgsMS4yMjMsMy4xMDgsMi43MzJ2MTEuNDM0bC00LjEyMy0zLjYyOQ0KCQkJYy0xLjE1MS0wLjg1Ny0yLjg0LTAuODYtMy45OTYtMC4wMDhsLTE1LjU5LDExLjQyMmMtMC42MTMsMC40NDktMS41MTMsMC40MTctMi4wODItMC4wNzVsLTMuMjg3LTIuODQNCgkJCWMtMS4xNTktMC45OTMtMi45ODktMS4wNDQtNC4yMTYtMC4xMjFsLTcuMTI3LDUuNDJWNjMuNjA4TDU4LjQyMiw2My42MDh6IE02Ni41NTEsNzAuMDEzYzAsMS42NTgsMC45OTksMy4xNTMsMi41MywzLjc4Nw0KCQkJYzEuNTMyLDAuNjM1LDMuMjk1LDAuMjg1LDQuNDY3LTAuODg4YzEuMTczLTEuMTcyLDEuNTIyLTIuOTM1LDAuODg5LTQuNDY2Yy0wLjYzNS0xLjUzMS0yLjEyOS0yLjUzMS0zLjc4Ny0yLjUzMQ0KCQkJYy0xLjA4NywwLTIuMTMsMC40MzItMi44OTgsMS4yQzY2Ljk4Myw2Ny44ODQsNjYuNTUxLDY4LjkyNSw2Ni41NTEsNzAuMDEzTDY2LjU1MSw3MC4wMTN6IE0xMDEuODg1LDg1LjUzNQ0KCQkJYzMuNzM3LDMuNzMzLDMuNzM3LDkuNzg2LDAsMTMuNTJjLTMuNzM0LDMuNzM1LTkuNzg5LDMuNzM2LTEzLjUyMywwYy0zLjY4Mi0zLjc0My0zLjY1NC05Ljc1NCwwLjA1OC0xMy40NjMNCgkJCUM5Mi4xMyw4MS44OCw5OC4xNDMsODEuODU0LDEwMS44ODUsODUuNTM1TDEwMS44ODUsODUuNTM1eiBNOTAuMjkyLDk3LjEyM2MyLjI5NSwyLjI5NCw1Ljg4NiwyLjY1Nyw4LjU5MywwLjg2OGwtOS40NjItOS40NjMNCgkJCWMtMS43ODcsMi43MDUtMS40MjQsNi4yOTcsMC44NjksOC41OTJWOTcuMTIzeiBNMTAwLjgxOCw5Ni4wNThjMS43ODMtMi43MDksMS40MTYtNi4yOTYtMC44NzUtOC41ODYNCgkJCWMtMi4yOTMtMi4yODktNS44NzktMi42NTYtOC41ODYtMC44NzVMMTAwLjgxOCw5Ni4wNTh6Ii8+DQo8L3N2Zz4NCg==");
  --_screen: xxs;
  --PREFIX: _;
  --_alias: rep;
  --_isnarrow: 1;
  --_isportrait:0;
  --_o-active: 0.6;
  --_o-disabled: 0.48;
  --_o-mask: 0.4;
  --_o-stage: 0.8;
  --_bez-linear: cubic-bezier(0, 0, 1, 1);
  --_bez-ease: cubic-bezier(0.4, 0.2, 0.3, 1);
  --_bez-ei: cubic-bezier(0.6, 0, 1, 1);
  --_bez-eo: cubic-bezier(0, 0, 0.4, 1);
  --_bez-eio: cubic-bezier(0.6, 0, 0.6, 1);
  --_bez-eoi: cubic-bezier(0, 0.6, 1, 0.6);
  --_dur-0: 0ms;
  --_dur-1: 100ms;
  --_dur-2: 200ms;
  --_dur-3: 300ms;
  --_dur-4: 400ms;
  --_dur-5: 500ms;
  --_dur-6: 600ms;
  --_dur-7: 700ms;
  --_dur-8: 800ms;
  --_dur-9: 900ms;
  --_dur-10: 1000ms;
  --_dur-20: 2000ms;
  --_dur-30: 3000ms;
  --_dur-40: 4000ms;
  --_dur-50: 5000ms;
  --_dur-60: 6000ms;
  --_dur-70: 7000ms;
  --_dur-80: 8000ms;
  --_dur-90: 9000ms;
  --_dur-100: 10000ms;
  --_num-step: 0;
  --_num-root: 10;
  --_num-min: calc(4 + var(--_num-step));
  --_num-space: calc(8 + var(--_num-step));
  --_num-caption: calc(12 + var(--_num-step));
  --_num-body: calc(14 + var(--_num-step));
  --_num-lead: calc(16 + var(--_num-step));
  --_num-subtitle: calc(18 + var(--_num-step));
  --_num-list: calc(var(--_num-lead) + 8);
  --_num-title: calc(var(--_num-body)*2);
  --_num-display: calc(var(--_num-lead) + 16);
  --_num-input: calc(var(--_num-lead) + 24);
  --_num-hero: calc(var(--_num-lead) + 32);
  --_num-max: calc(var(--_num-lead) + 40);
  /*Font size*/
  --_fs-root: calc(1px*var(--_num-root)*16/14);
  /*Rem of size*/
  --_rem-min: calc((var(--_num-min)/var(--_num-root))*1rem);
  --_rem-space: calc((var(--_num-space)/var(--_num-root))*1rem);
  --_rem-root: 1rem;
  --_rem-caption: calc((var(--_num-caption)/var(--_num-root))*1rem);
  --_rem-body: calc((var(--_num-body)/var(--_num-root))*1rem);
  --_rem-lead: calc((var(--_num-lead)/var(--_num-root))*1rem);
  --_rem-subtitle: calc((var(--_num-subtitle)/var(--_num-root))*1rem);
  --_rem-list: calc((var(--_num-list)/var(--_num-root))*1rem);
  --_rem-title: calc((var(--_num-title)/var(--_num-root))*1rem);
  --_rem-display: calc((var(--_num-display)/var(--_num-root))*1rem);
  --_rem-input: calc((var(--_num-input)/var(--_num-root))*1rem);
  --_rem-hero: calc((var(--_num-hero)/var(--_num-root))*1rem);
  --_rem-max: calc((var(--_num-max)/var(--_num-root))*1rem);
  /*Em of size*/
  --_em-min: calc((var(--_num-min)/var(--_num-body))*1em);
  --_em-space: calc((var(--_num-space)/var(--_num-body))*1em);
  --_em-root: calc((var(--_num-root)/var(--_num-body))*1em);
  --_em-caption: calc((var(--_num-caption)/var(--_num-body))*1em);
  --_em-body: 1em;
  --_em-lead: calc((var(--_num-lead)/var(--_num-body))*1em);
  --_em-subtitle: calc((var(--_num-subtitle)/var(--_num-body))*1em);
  --_em-list: calc((var(--_num-list)/var(--_num-body))*1em);
  --_em-title: calc((var(--_num-title)/var(--_num-body))*1em);
  --_em-display: calc((var(--_num-display)/var(--_num-body))*1em);
  --_em-input: calc((var(--_num-input)/var(--_num-body))*1em);
  --_em-hero: calc((var(--_num-hero)/var(--_num-body))*1em);
  --_em-max: calc((var(--_num-max)/var(--_num-body))*1em);
  /*Em of small size (base --_px-caption)*/
  --_em-min-dec: calc((var(--_num-min)/var(--_num-caption))*1em);
  --_em-space-dec: calc((var(--_num-space)/var(--_num-caption))*1em);
  --_em-root-dec: calc((var(--_num-root)/var(--_num-caption))*1em);
  --_em-caption-dec: 1em;
  --_em-body-dec: calc((var(--_num-body)/var(--_num-caption))*1em);
  --_em-lead-dec: calc((var(--_num-lead)/var(--_num-caption))*1em);
  --_em-subtitle-dec: calc((var(--_num-subtitle)/var(--_num-caption))*1em);
  --_em-list-dec: calc((var(--_num-list)/var(--_num-caption))*1em);
  --_em-title-dec: calc((var(--_num-title)/var(--_num-caption))*1em);
  --_em-display-dec: calc((var(--_num-display)/var(--_num-caption))*1em);
  --_em-input-dec: calc((var(--_num-input)/var(--_num-caption))*1em);
  --_em-hero-dec: calc((var(--_num-hero)/var(--_num-caption))*1em);
  --_em-max-dec: calc((var(--_num-max)/var(--_num-caption))*1em);
  /*Em of title size (base --_px-lead)*/
  --_em-min-inc: calc((var(--_num-min)/var(--_num-lead))*1em);
  --_em-space-inc: calc((var(--_num-space)/var(--_num-lead))*1em);
  --_em-root-inc: calc((var(--_num-root)/var(--_num-lead))*1em);
  --_em-caption-inc: calc((var(--_num-caption)/var(--_num-lead))*1em);
  --_em-body-inc: calc((var(--_num-body)/var(--_num-lead))*1em);
  --_em-lead-inc: 1em;
  --_em-subtitle-inc: calc((var(--_num-subtitle)/var(--_num-lead))*1em);
  --_em-list-inc: calc((var(--_num-list)/var(--_num-lead))*1em);
  --_em-title-inc: calc((var(--_num-title)/var(--_num-lead))*1em);
  --_em-display-inc: calc((var(--_num-display)/var(--_num-lead))*1em);
  --_em-input-inc: calc((var(--_num-input)/var(--_num-lead))*1em);
  --_em-hero-inc: calc((var(--_num-hero)/var(--_num-lead))*1em);
  --_em-max-inc: calc((var(--_num-max)/var(--_num-lead))*1em);
  /*Px of size*/
  --_px-min: calc(var(--_num-min)*1px);
  --_px-space: calc(var(--_num-space)*1px);
  --_px-root: calc(var(--_num-root)*1px);
  --_px-caption: calc(var(--_num-caption)*1px);
  --_px-body: calc(var(--_num-body)*1px);
  --_px-lead: calc(var(--_num-lead)*1px);
  --_px-subtitle: calc(var(--_num-subtitle)*1px);
  --_px-list: calc(var(--_num-list)*1px);
  --_px-title: calc(var(--_num-title)*1px);
  --_px-display: calc(var(--_num-display)*1px);
  --_px-input: calc(var(--_num-input)*1px);
  --_px-hero: calc(var(--_num-hero)*1px);
  --_px-max: calc(var(--_num-max)*1px);
  /*Font size*/
  --_fs-caption: var(--_rem-caption);
  --_fs-body: var(--_rem-body);
  --_fs-lead: var(--_rem-lead);
  --_fs-subtitle: var(--_rem-subtitle);
  --_fs-title: var(--_rem-title);
  --_fs-display: var(--_rem-display);
  --_fs-hero: var(--_rem-hero);
  --_fs-h1: calc(var(--_rem-lead)*2);
  --_fs-h2: calc(var(--_rem-body)*2);
  --_fs-h3: var(--_rem-list);
  --_fs-h4: var(--_rem-subtitle);
  --_fs-h5: var(--_rem-lead);
  --_fs-h6: var(--_rem-body);
  --_lh-caption: var(--_rem-subtitle);
  --_lh-body: var(--_rem-list);
  --_lh-lead: calc(var(--_rem-body)*2);
  --_lh-subtitle: calc(var(--_rem-body)*2);
  --_lh-title: var(--_rem-input);
  --_lh-display: calc(var(--_rem-input) + var(--_rem-min));
  --_lh-hero: calc(var(--_rem-max) + var(--_rem-min));
  --_lh-h1: 1.25;
  --_lh-h2: 1.28571;
  --_lh-h3: 1.33333;
  --_lh-h4: 1.44444;
  --_lh-h5: 1.5;
  --_lh-h6: 1.57143;
  --_lh-sm: 1.286;
  --_lh-md: 1.5;
  --_lh-lg: 1.78;
  /*Font family*/
  --_ff-icon: "_iconfont";
  --_ff-body: // 英文、西班牙文、法文、德文（拉丁字母）
    -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Helvetica Neue", Arial, sans-serif,
    "PT Sans",
    "Roboto",
    "Noto Naskh Arabic",
    "Amiri", "Droid Arabic Naskh",
    "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Noto Sans SC",
    "PingFang TC",
    "Hiragino Sans TC", "Microsoft JhengHei", "Noto Sans TC",
    "Hiragino Kaku Gothic Pro",
    "Yu Gothic", "Meiryo",
    "Apple SD Gothic Neo",
    "Malgun Gothic", "Noto Sans KR",
    sans-serif;
  --_ff-alt: "PT Sans", "Segoe UI", "Arial Narrow", "Microsoft YaHei",
    "Yu Gothic", "Malgun Gothic", "Amiri", "Yu Mincho", sans-serif;
  --_ff-code: // 经典西文等宽代码字体
    "Consolas",
    "Menlo", "Monaco", "Ubuntu Mono", "Source Code Pro", "Courier New",
    monospace,
    "Microsoft YaHei Mono",
    "Yu Gothic Mono", "Noto Sans Mono CJK SC", "Noto Sans Mono CJK JP",
    "Noto Sans Mono CJK KR",
    "PT Mono",
    "Arial", "Tahoma",
    sans-serif;
  /*Padding , Margin & Gap*/
  --_p: var(--_rem-body);
  /*Margin*/
  --_m: var(--_rem-body);
  /*Gap*/
  --_g: var(--_rem-min);
  --_g-full: 1.4rem;
  /*Width & Height*/
  --_h-input: var(--_rem-input);
  --_w-input: min(calc(var(--_rem-input)*10), 100%);
  --_w-bubble: min(
    calc(var(--_rem-input)*10),
    calc(100vw - var(--_g-full)*2)
  );
  --_w-label: 10em;
  --_w-outline: 3px;
  --_w-xxs: calc(100vw - var(--_rem-body)*2);
  --_w-xs: calc(100vw - var(--_rem-body)*4);
  --_w-sm: calc(100vw - var(--_rem-body)*6);
  --_w-md: calc(100vw - var(--_rem-body)*8);
  --_w-lg: calc(100vw - var(--_rem-body)*12);
  --_w-xl: calc(100vw - var(--_rem-body)*16);
  --_w-xxl: calc(100vw - var(--_rem-body)*20);
  --_w-list: calc(var(--_rem-lead)*10);
  --_w-menu: calc(var(--_rem-list)*10);
  --_w-aside: calc(var(--_rem-body)*20);
  --_w-drawer: calc(var(--_rem-input)*10);
  /*Radius*/
  --_r: 0.3rem;
  --_r-input-sm: var(--_r);
  --_r-input: calc(var(--_r)*2);
  --_r-input-md: calc(var(--_r)*2);
  --_r-input-lg: calc(var(--_r)*3);
  --_r-bubble: calc(var(--_r)*3);
  --_r-full: 99999px;
  /*Other*/
  --_dir-coef: 1;
  --_device-coef: 0;
}
/*
 *Last modified: 2025-07-24 19:33:23
 */
html {
    font-size: var(--_fs-root);
    width: 100%;
    padding: 0;
    margin: 0;
    scrollbar-gutter:stable;
}
body {
    --_body-p: 0px;
    --_body-m: 0px;
    --_body-a: start;
    --_body-c: var(--_c-text);
    --_body-ff: var(--_ff-body);
    --_body-fs: var(--_fs-body);
    --_body-lh: var(--_lh-body);
    font-family: var(--_body-ff);
    font-size: var(--_body-fs);
    line-height: var(--_body-lh);
    color: var(--_body-c);
    text-align: var(--_body-a);
    width: 100%;
    min-height: 100%;
    padding: var(--_body-p);
    margin: var(--_body-m);
    position: relative;
}
/*reset*/
* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
*:focus {
    outline-color: var(--_btn-c-foc, var(--_field-c-foc, transparent));
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0.5em 0;
    line-height: 1.5em;
}
h1 {
    font-size: var(--_fs-h1);
}
h2 {
    font-size: var(--_fs-h2);
}
h3 {
    font-size: var(--_fs-h3);
}
h4 {
    font-size: var(--_fs-h4);
}
h5 {
    font-size: var(--_fs-h5);
}
h6 {
    font-size: var(--_fs-h6);
}
img {
    border: 0;
    vertical-align: middle;
}
svg {
    vertical-align: middle;
}
img,
video,
audio,
picture {
    max-width: 100%;
}
video,
audio,
picture,
iframe {
    display: block;
}
iframe {
    width: 100%;
    border-width: 0;
}
span,
a,
input,
textarea,
select,
progress,
meter,
label,
i,
s,
u {
    display: inline-block;
}
form,
div,
pre,
p {
    display: block;
}
p {
    padding: 0.6em 0;
}
hr {
    border-width: 0;
    height: 1px;
    overflow: hidden;
    background-color: var(--_c-text-bd);
}
sup a {
    color: var(--_c-prim);
}
code {
    --_code-c: var(--_c-prim);
    --_code-bg: var(--_c-text-bg);
    --_code-ff: var(--_ff-body);
    --_code-p: var(--_g);
    --_code-ff: var(--_ff-body);
    --_code-r: var(--_r);
    font-family: var(--_code-ff);
    color: var(--_code-c);
    background-color: var(--_code-bg);
    padding: 0 var(--_code-p);
    border-radius: var(--_code-r);
    &[theme=prim] {
        --_code-c: var(--_c-prim);
        --_code-bg: var(--_c-prim-bg);
    }
    &[theme=succ] {
        --_code-c: var(--_c-succ);
        --_code-bg: var(--_c-succ-bg);
    }
    &[theme=error] {
        --_code-c: var(--_c-error);
        --_code-bg: var(--_c-error-bg);
    }
    &[theme=info] {
        --_code-c: var(--_c-info);
        --_code-bg: var(--_c-info-bg);
    }
    &[theme=issue] {
        --_code-c: var(--_c-issue);
        --_code-bg: var(--_c-issue-bg);
    }
    &[theme=warn] {
        --_code-c: var(--_c-warn-dp);
        --_code-bg: var(--_c-warn-bg);
    }
    &[theme=text] {
        --_code-c: var(--_c-text);
        --_code-bg: var(--_c-text-bg);
    }
}
pre {
    --_pre-ff: var(--_ff-body);
    --_pre-fs: var(--_rem-caption);
    --_pre-bg: var(--_c-text-bd);
    --_pre-p: var(--_p);
    font-family: var(--_pre-ff);
    font-size: var(--_pre-fs);
    background-color: var(--_pre-bg);
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: var(--_pre-p);
    &>code {
        --_code-c: var(--_c-text);
        --_code-bg: transparent;
        --_code-ff: var(--_ff-code);
        --_code-p: 0;
        --_code-r: 0;
        min-height: var(--_rem-display);
        display: block;
    }
}
kbd {
    --_kbd-c: var(--_c-brief);
    --_kbd-ff: var(--_ff-body);
    --_kbd-fs: var(--_rem-caption);
    --_kbd-lh: var(--_em-body-dec);
    --_kbd-bg: var(--_c-caption-bg);
    --_kbd-bc: var(--_c-caption);
    --_kbd-bw: 1px;
    --_kbd-p: var(--_em-min-dec);
    --_kbd-r: var(--_r);
    font-family: var(--_kbd-ff);
    font-size: var(--_kbd-fs);
    color: var(--_kbd-c);
    line-height: var(--_kbd-lh);
    background-color: var(--_kbd-bg);
    border: var(--_kbd-bw) solid var(--_kbd-bc);
    border-block-end-width: calc(var(--_kbd-bw) + 1px);
    padding: 0 var(--_kbd-p);
    border-radius: var(--_kbd-r);
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
}
*:where(ul),
*:where(ol) {
    --_ul-p-se: 2em;
    --_ul-m-tb: 0;
    --_ul-dot-sz: .4rem;
    --_ul-dot-bg: var(--_c-text-sd);
    margin-block: var(--_ul-m-tb);
    box-sizing: border-box;
    padding-inline-start: var(--_ul-p-se);
}
*:where(ul) {
    list-style: none;
}
*:where(ul._reset) {
    --_ul-p-se: 0;
    ul {
        --_ul-p-se: 0;
    }
}
*:where(ol._reset) {
    list-style: none;
    --_ul-p-se: 0;
    ol {
        list-style: none;
        --_ul-p-se: 0;
    }
}
*:where(li) {
    position: relative;
}
*:where(ul)>li:before {
    content: '';
    width: var(--_ul-dot-sz);
    height: var(--_ul-dot-sz);
    border-radius: var(--_ul-dot-sz);
    background-color: var(--_ul-dot-bg);
    position: absolute;
    inset-inline-start: calc(var(--_ul-p-se)/-2);
    inset-block-start: calc((var(--_ul-lh, var(--_lh-body)) - var(--_ul-dot-sz))/2);
}
*:where(ul._reset) li:before {
    display: none;
}
*:where(dl) {
    --_dl-dot-sz: .4rem;
    --_dl-dot-bg: var(--_c-text-sd);
    --_dl-m: var(--_m);
    --_dl-p-tb: var(--_p);
    --_dl-p-se: 1em;
    --_dl-g: var(--_rem-space);
    margin-block-start: var(--_dl-m);
    margin-block-end: var(--_dl-m);
    &:where(:not(._reset)) {
        border-block-start: 1px solid var(--_c-text-bd);
        border-block-end: 1px solid var(--_c-text-bd);
        padding-block-start: var(--_dl-p-tb);
        padding-block-end: var(--_dl-p-tb);
        padding-inline-start: var(--_dl-p-se);
        padding-inline-end: 0;
        box-sizing: border-box;
        dt {
            font-weight: bold;
            position: relative;
        }
        dt:before {
            content: '';
            width: var(--_dl-dot-sz);
            height: var(--_dl-dot-sz);
            border-radius: var(--_dl-dot-sz);
            background-color: var(--_dl-dot-bg);
            position: absolute;
            inset-inline-start: calc(var(--_dl-p-se)*-1);
            inset-block-start: calc((var(--_dl-lh, var(--_lh-body)) - var(--_dl-dot-sz))/2);
        }
        dd {
            margin-inline-start: 0;
        }
        dd+dt {
            margin-block-start: var(--_dl-g);
        }
    }
}
blockquote:where(:not(.tiktok-embed)) {
    background-color: var(--_c-prim-bg);
    border-inline-start: var(--_g) solid var(--_c-prim-fc);
    padding: var(--_g) var(--_p);
    margin: var(--_m) 0;
}
cite {
    font-style: normal;
    text-decoration: 1px underline wavy;
    text-underline-offset: .4em;
}
em {
    font-style: normal;
    text-emphasis: circle var(--_c-prim);
    text-emphasis-position: over inline-end;
}
ruby>rt {
    padding: 0 var(--_g);
    font-size: clamp(var(--_rem-root), var(--_em-caption), var(--_rem-subtitle));
}
address {
    font-style: normal;
    line-height: var(--_lh-sm);
    display: flex;
}
time {
    font-size: var(--_rem-caption);
    color: var(--_c-brief);
    line-height: var(--_lh-md);
    display: inline-block;
}
mark {
    background-color: var(--_c-warn-aj);
}
i {
    font-style: normal;
}
s,
u {
    text-decoration: none;
}
article {
    overflow-wrap: break-word;
    hyphens: auto;
    i,
    u,
    s,
    a,
    span {
        display: inline;
    }
    img {
        /*  height: auto !important;
        width: auto !important; */
    }
}
form {
    position: relative;
}
fieldset {
    border: 1px solid var(--_c-text-bd);
    border-radius: var(--_r-input-lg);
    padding: var(--_p);
}
:where(fieldset) legend {
    padding: 0 var(--_rem-space);
    font-size: var(--_px-caption);
}
:where(fieldset) td {
    padding: var(--_g);
}
label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    input {
        margin-inline-end: var(--_g);
    }
}
label:where(:has(input[disabled])) {
    cursor: text;
}
input,
select {
    vertical-align: middle;
}
input:where([type=submit], [type=reset], [type=button]) {
    vertical-align: top;
}
input,
textarea,
select {
    --_field-h: var(--_em-input);
    --_field-p-se: var(--_em-space);
    --_field-fs: var(--_rem-body);
    --_field-r: var(--_r-input);
    --_field-w: var(--_w-input);
    --_field-c: var(--_c-text);
    --_field-bg: var(--_c-stage);
    --_field-bw: 1px;
    --_field-bc: var(--_c-text-bd);
    font-family: var(--_ff-body);
    font-size: var(--_field-fs);
    color: var(--_field-c);
}
input:where(:not([type=radio], [type=checkbox], [type=submit], [type=reset], [type=button], [type=range])),
textarea,
select {
    background-color: var(--_field-bg);
    min-width: var(--_field-w);
    width: var(--_field-w);
    box-sizing: border-box;
    border-radius: var(--_field-r);
    border: var(--_field-bw) solid var(--_field-bc);
    resize: none;
    position: relative;
    transition: all var(--_dur-1) linear;
}
input::-ms-clear,
input::-ms-reveal {
    opacity: var(--_o-disabled);
    transition: all var(--_dur-1) linear;
    &:hover {
        opacity: 1;
    }
}
input::-webkit-calendar-picker-indicator {
    width: 1em;
    height: 1em;
    padding: 0;
    line-height: 1em;
}
input:where([type=search])::-webkit-search-cancel-button {
    filter: grayscale(100%);
    opacity: var(--_o-disabled);
    transition: all var(--_dur-1) linear;
    &:hover {
        opacity: 1;
        cursor: pointer;
    }
}
input:where([type=color]) {
    --_field-w: auto;
    min-width: auto;
    height: var(--_field-h);
    aspect-ratio: 1 / 1;
    padding: 0 2px !important;
}
input:where([type=color]) ::-webkit-color-swatch {
    border: 0;
}
@-moz-document url-prefix() {
    input:where([type=color]) {
        padding: 2px !important;
    }
}
input:where(:not([type=radio], [type=checkbox], [type=submit], [type=reset], [type=button], [type=range])),
select {
    height: var(--_field-h);
    line-height: var(--_field-h);
    padding: 0 var(--_field-p-se);
}
textarea {
    --_field-lh: var(--_em-list);
    --_field-rows: 5;
    height: calc(var(--_field-lh)*var(--_field-rows) + var(--_field-h) - var(--_field-lh) + 2px);
    line-height: var(--_field-lh);
    box-sizing: border-box;
    padding: calc((var(--_field-h) - var(--_field-lh))/2) var(--_field-p-se);
    overflow: auto;
    vertical-align: top;
}
input:where([type=checkbox], [type=radio]) {
    accent-color: var(--_c-prim);
    appearance: checkbox;
    -webkit-appearance: checkbox;
}
select:where([multiple], [size]) {
    --_field-count: 5;
    padding: 0;
    overflow: auto;
}
select:where([multiple]:not([size])) {
    min-height: calc((var(--_rem-input) + 1px)*var(--_field-count) + 1px);
}
select:where([size]) {
    --_field-h: auto;
}
select option {
    padding: 0 var(--_rem-space);
    height: var(--_rem-input);
    border-block-end: 1px solid var(--_c-text-bd);
    display: flex;
    align-items: center;
    transition: all var(--_dur-1) linear;
}
select option:last-child {
    border-width: 0;
}
select:where([disabled]) option {
    color: var(--_c-disable);
    pointer-events: none;
}
select:where(:not([disabled])) option:hover {
    background-color: var(--_c-text-bd);
}
select option:checked {
    color: var(--_c-prim);
    background-color: var(--_c-prim-bg);
}
select option:selected {
    background-color: var(--_c-prim);
}
input:where([type=file]) {
    line-height: calc((var(--_num-input) - 4)/var(--_num-body));
}
input:where([type=file])::file-selector-button,
input:where([type=file])::-webkit-file-upload-button {
    color: var(--_field-c);
    background: transparent;
    line-height: calc((var(--_num-input) - 2)/var(--_num-body));
    border: none;
    border-inline-end: 1px solid var(--_c-text-bd);
    padding-inline-end: var(--_em-space);
    padding-inline-start: 0;
    margin-inline-end: var(--_em-space);
    user-select: none;
    pointer-events: none;
    float: inline-start;
}
@-moz-document url-prefix() {
    input:where([type=file])::file-selector-button,
    input:where([type=file])::-webkit-file-upload-button {
        color: var(--_c-text);
        float: none;
    }
}
input:where([type=datetime-local], [type=date], [type=month], [type=week]) {
    &::-webkit-datetime-edit-text {
        margin-inline-end: var(--_rem-space);
        color: var(--_c-caption);
    }
    &::-webkit-datetime-edit-month-field,
    &::-webkit-datetime-edit-day-field,
    &::-webkit-datetime-edit-year-field,
    &::-webkit-datetime-edit-week-field,
    &::-webkit-datetime-edit-hour-field,
    &::-webkit-datetime-edit-minute-field {
        margin-inline-end: var(--_rem-space);
        border-radius: var(--_r);
        padding: 0 var(--_rem-min);
        &:focus {
            background-color: var(--_c-prim);
        }
    }
    &::-webkit-calendar-picker-indicator {
        opacity: var(--_o-disabled);
        padding: 0;
        transition: all var(--_dur-1) linear;
        &:hover {
            opacity: 1;
        }
    }
}
input:where([type=range]) {
    --_range-h: 0.3rem;
    height: var(--_range-h);
    width: var(--_field-w);
    background-color: var(--_c-text-bd);
    border-radius: var(--_r);
    appearance: none;
    transition: all var(--_dur-1) linear;
}
input:where([type=range])::-webkit-slider-thumb {
    width: 1.6rem;
    height: 1.6rem;
    border: .2rem solid var(--_c-prim);
    border-radius: 50%;
    background-color: var(--_c-stage);
    cursor: pointer;
    appearance: none;
    transition: all var(--_dur-1) linear;
}
input:where([type=range])::-moz-range-thumb {
    width: 1.2rem;
    height: 1.2rem;
    border: .2rem solid var(--_c-prim);
    border-radius: 50%;
    background-color: var(--_c-stage);
    cursor: pointer;
    transition: all var(--_dur-1) linear;
}
input:where([type=range])::-moz-range-progress {
    background-color: var(--_c-prim);
    border-radius: var(--_r);
    transition: all var(--_dur-1) linear;
}
input:where([type=range]:not([disabled])):hover {
    background-color: var(--_c-prim-bd);
}
input:where([type=range]:not([disabled]))::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 .3rem var(--_c-prim-sd);
}
input:where([type=range]:not([disabled]))::-moz-range-thumb:hover {
    box-shadow: 0 0 0 .3rem var(--_c-prim-sd);
}
input:where([type=range][disabled])::-webkit-slider-thumb {
    border-color: var(--_c-caption);
    cursor: text;
}
input:where([type=range][disabled])::-moz-range-thumb {
    border-color: var(--_c-caption);
    cursor: text;
}
input:where([type=range][disabled])::-moz-range-progress {
    background-color: var(--_c-caption);
}
meter {
    --_meter-h: var(--_rem-min);
    block-size: var(--_rem-min);
    vertical-align: middle;
    &::-webkit-meter-bar {
        height: var(--_meter-h);
        min-width: calc(var(--_rem-input)*3);
        background-color: var(--_c-text-bd);
        border: none;
    }
    &::-webkit-meter-optimum-value,
    &::-webkit-meter-suboptimum-value,
    &::-webkit-meter-even-less-good-value {
        border-radius: var(--_meter-h);
        transition: all var(--_dur-2) linear;
    }
    &::-webkit-meter-optimum-value {
        background: var(--_c-succ);
    }
    &::-webkit-meter-suboptimum-value {
        background: var(--_c-warn);
    }
    &::-webkit-meter-even-less-good-value {
        background: var(--_c-error);
    }
}
progress,
progress::-webkit-progress-bar,
progress::-webkit-progress-value {
    border-radius: var(--_prog-h);
}
progress {
    --_prog-h: var(--_rem-min);
    --_prog-w: var(--_w-input);
    width: var(--_prog-w);
    height: var(--_prog-h);
    border: none;
    vertical-align: middle;
}
progress::-webkit-progress-bar {
    background-color: var(--_c-text-bd);
}
progress::-webkit-progress-value {
    background-color: var(--_c-prim);
    transition: all var(--_dur-2) linear;
}
progress::-moz-progress-bar {
    background: var(--_c-prim);
    border-radius: var(--_prog-h);
}
input:where([type=submit]),
input:where([type=reset], [type=button]),
button {
    --_btn-fs: var(--_rem-body);
    --_btn-h: calc(1em*var(--_num-input)/var(--_num-body));
    --_btn-p-se: var(--_em-body);
    --_btn-r: var(--_r-input);
    font-size: var(--_btn-fs);
    height: var(--_btn-h);
    padding: 0 var(--_btn-p-se);
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all var(--_dur-2) linear;
    position: relative;
    border-radius: var(--_btn-r);
    --_btn-bg: var(--_c-stage);
    --_btn-c: var(--_c-text);
    --_btn-bc: var(--_c-text-bd);
    --_btn-bw: 1px;
    --_btn-c-foc: transparent;
    --_btn-sd: transparent;
    vertical-align: middle;
    background-color: var(--_btn-bg);
    color: var(--_btn-c);
    border: var(--_btn-bw) solid var(--_btn-bc);
    box-shadow: .2rem .2rem 1.0rem 0 var(--_btn-sd);
    &[size=xs] {
        --_btn-fs: var(--_rem-caption);
        --_btn-p-se: var(--_em-min-dec);
        --_btn-h: var(--_em-list-dec);
        --_btn-r: var(--_r-input-sm);
    }
    &[size=sm] {
        --_btn-fs: var(--_rem-caption);
        --_btn-h: var(--_em-display-dec);
        --_btn-r: var(--_r-input-sm);
    }
    &[size=lg] {
        --_btn-h: var(--_em-max);
        --_btn-p-se: 2em;
        --_btn-r: var(--_r-input-lg);
    }
}
input:where([type=submit]),
button:where([type=submit]) {
    --_btn-bg: var(--_c-prim);
    --_btn-c: var(--_c-white);
    --_btn-bw: 0;
}
input:where([type=submit][disabled]),
button:where([type=submit][disabled]) {
    opacity: var(--_o-active);
}
input:where([type=reset][disabled], [type=button][disabled]),
button:where(:not([type=submit])[disabled]) {
    --_btn-c: var(--_c-caption);
}
input:where([type=submit][disabled]),
input:where([type=reset][disabled], [type=button][disabled]),
button:where([disabled]) {
    cursor: not-allowed;
    user-select: none;
    pointer-events: none;
}
input::placeholder,
textarea::placeholder {
    font-size: calc(1em*(var(--_num-body) - 2)/var(--_num-body));
    color: var(--_c-caption);
    width: 100%;
}
input::placeholder {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
}
input:where(:not([type=checkbox], [type=radio], [type=range], [type=submit], [type=reset], [type=button]):not([disabled])):hover,
textarea:where(:not([disabled])):hover,
select:where(:not([disabled])):hover {
    border-color: var(--_c-prim);
}
input:where([type=submit]:not([disabled])):hover,
button:where([type=submit]:not([disabled])):hover {
    --_btn-bg: var(--_c-prim-lt);
    --_btn-sd: var(--_c-prim-sd);
}
input:where([type=reset], [type=button]):where(:not([disabled])):hover,
button:where(:not([type=submit])):where(:not([disabled])):hover {
    --_btn-bc: var(--_c-prim);
    --_btn-c: var(--_c-prim);
    --_btn-sd: var(--_c-prim-sd);
}
input:where(:not([type=range], [type=checkbox], [type=radio])),
input:where([type=reset], [type=button]),
button:where(:not([type=submit])),
select,
textarea,
a {
    outline: var(--_w-outline) solid transparent;
    outline-offset: 0px;
}
input:where(:not([type=range], [type=checkbox], [type=radio], [type=reset], [type=button], [type=submit])):focus,
select:focus,
textarea:focus {
    color: var(--_c-prim);
    border-color: var(--_c-prim);
    outline-color: var(--_c-prim-sd);
}
input:where([type=submit]):focus,
button:where([type=submit]):focus {
    --_btn-c: var(--_c-white);
    --_btn-sd: var(--_c-prim-sd);
}
input:where([type=reset], [type=button]):focus,
button:where(:not([type=submit])):focus {
    --_btn-c: var(--_c-prim);
    --_btn-bc: var(--_c-prim);
    --_btn-sd: transparent;
    --_btn-c-foc: var(--_c-prim-sd);
}
select:focus option:where(:not([disabled])) {
    color: var(--_c-text);
}
input:where([type=checkbox], [type=radio]):focus {
    outline-color: var(--_c-prim-sd);
}
input:where([type=range]):focus {
    outline: 0;
    background-color: var(--_c-prim-bd);
}
input:where([type=submit]:not([disabled])):active,
button:where([type=submit]:not([disabled])):active {
    --_btn-c: rgba(255, 255, 255, var(--_o-active));
    --_btn-bg: var(--_c-prim-dp);
}
input:where([type=reset], [type=button]):where(:not([disabled])):active,
button:where(:not([type=submit]):not([disabled])):active {
    --_btn-c: var(--_c-prim-tl);
    --_btn-sd: transparent;
    --_btn-c-foc: var(--_c-prim-sd);
}
/*Hyperlink*/
a:where(:not(._reset)) {
    --_link-c: var(--_c-prim);
    --_link-c-hov: var(--_link-c);
}
a:where(._reset) {
    --_link-c: var(--_c-text);
    --_link-c-hov: var(--_c-prim);
}
a {
    --_link-bg: transparent;
    color: var(--_link-c);
    background-color: var(--_link-bg);
    text-underline-offset: 2px;
    transition: color var(--_dur-1) linear, background-color var(--_dur-1) linear, box-shadow var(--_dur-1) linear, opacity var(--_dur-1) linear, outline-color var(--_dur-1) linear;
    text-decoration: none;
}
/* a:where(:not([disabled])):visited {
    color: var(--_c-text-ht);
}
 */
a:where(:not([disabled])):hover {
    color: var(--_link-c-hov);
}
a:where(:not([disabled])):active {
    color: var(--_link-c-hov);
    opacity: var(--_o-active);
}
a:where(:not([disabled])):focus {
    color: var(--_link-c-hov);
}
a:where([disabled]) {
    --_link-c: var(--_c-caption);
    user-select: none;
    pointer-events: none;
}
:where([tabindex]) {
    outline: var(--_w-outline) solid transparent;
    outline-offset: 0px;
}
:where(:not([disabled])[tabindex]):focus {
    outline-color: var(--_c-prim-sd);
}
/*Table*/
table {
    --_table-ell: calc(var(--_rem-lead)*10);
    --_table-w: auto;
    --_table-fs: var(--_rem-body);
    --_table-bg: transparent;
    --_table-c-stp: var(--_c-caption-bg);
    --_table-c-hov: var(--_c-text-bg);
    --_table-c-foc: var(--_c-prim);
    --_table-c-sel: var(--_c-prim-bg);
    --_table-bc: var(--_table-wrap-bd, var(--_c-text-bd));
    --_table-a: start;
    --_xxs-w: var(--_table-w);
    --_xs-w: var(--_table-w);
    --_sm-w: var(--_table-w);
    --_md-w: var(--_table-w);
    --_lg-w: var(--_table-w);
    --_xl-w: var(--_table-w);
    --_xxl-w: var(--_table-w);
    --_hh-w: var(--_table-w);
    --_tb-w: var(--_table-w);
    --_dt-w: var(--_table-w);
    font-size: var(--_table-fs);
    min-width: 100%;
    width: var(--_table-w);
    border-collapse: collapse;
    border-block-start: 1px solid var(--_table-bc);
    border-block-end: 1px solid var(--_table-bc);
    background-color: var(--_table-bg);
    border-spacing: 0;
    table-layout: fixed;
    border-collapse: collapse;
    tr {
        border-block-end: 1px solid var(--_table-bc);
        padding: 0.5rem;
        transition: background-color var(--_dur-1) linear;
    }
    tfoot tr {
        border-block-start: 1px solid var(--_table-bc);
    }
    tbody tr:last-child {
        border: none;
    }
    th,
    td {
        box-sizing: border-box;
        position: relative;
        text-align: var(--_table-a);
    }
    td {
        padding: 1rem;
        font-size: var(--_table-fs);
        line-height: var(--_rem-subtitle);
    }
    thead td,
    th {
        color: var(--_c-brief);
        font-weight: normal;
        padding: var(--_px-space) 1rem;
        font-size: var(--_px-caption);
        line-height: var(--_px-subtitle);
    }
    th label {
        font-weight: bold;
        white-space: nowrap;
        flex: auto;
        width: 0;
    }
    td {
        transition: background-color var(--_dur-1) linear, box-shadow var(--_dur-1) linear;
    }
    tr:where([selected]),
    th:where([selected]),
    td:where([selected]) {
        background-color: var(--_table-c-sel);
    }
    tr:where([disabled]),
    th[disabled],
    td[disabled] {
        opacity: var(--_o-disabled);
    }
    td[focused] {
        color: var(--_table-c-foc);
        box-shadow: inset 0 0 0 2px var(--_table-c-foc);
    }
    &:where([stripe]:not([stripe=even])) tbody tr:nth-child(odd),
    &:where([stripe=odd]) tbody tr:nth-child(odd) {
        background-color: var(--_table-c-stp);
    }
    &:where([stripe=even]) tbody tr:nth-child(even) {
        background-color: var(--_table-c-stp);
    }
    &:where([hoverable]) tbody tr:where(:not([selected], [disabled])):hover {
        background-color: var(--_table-c-hov);
    }
    td:where([focused]) {
        color: var(--_table-c-foc);
        box-shadow: inset 0 0 0 2px var(--_table-c-foc);
    }
    &:where([focusable]) td:where(:not([focused], [name=check], [name=tools])):hover {
        box-shadow: inset 0 0 0 2px var(--_c-caption);
    }
    &:where([nowrap]) td,
    &:where([nowrap]) th {
        white-space: nowrap;
    }
    &:where([widest]) {
        --_table-w: max-content;
    }
    &[lines=inner] {
        border-block-start: none;
        border-block-end: none;
    }
    &[lines=outer] {
        border-inline-start: 1px solid var(--_table-bc);
        border-inline-end: 1px solid var(--_table-bc);
    }
    &[lines=all] {
        border-inline-start: 1px solid var(--_table-bc);
        box-shadow: inset calc(-1px*var(--_dir-coef)) 0 0 0 var(--_table-bc);
        position: relative;
    }
    &[lines=all] td,
    &[lines=all] th {
        position: relative;
        box-shadow: inset calc(-1px*var(--_dir-coef)) 0 0 0 var(--_table-bc);
    }
    &[lines=all] td[selected] {
        position: relative;
        box-shadow: inset 0 0 0 2px var(--_table-c-foc);
    }
    &:where([align=start]) {
        --_table-a: start;
    }
    &:where([align=center]) {
        --_table-a: center;
    }
    &:where([align=end]) {
        --_table-a: end;
    }
    &:where([align=left]) {
        --_table-a: left;
    }
    &:where([align=right]) {
        --_table-a: right;
    }
}
@media (prefers-color-scheme: dark) {
  :root {
    --_h-stage: var(--_h-prim);
    --_s-stage: 10%;
    --_l-stage: 10%;
    --_c-coef: -1;
    --_l-text: 80%;
    --_l-mask: 100%;
  }
  html,
  body {
    background-color: var(--_c-stage);
  }
  blockquote {
    background-color: var(--_c-text-bg);
    border-inline-start-color: var(--_c-prim);
  }
  pre {
    background-color: var(--_c-text-bg);
  }
  [class*=_loading]:before {
    border-color: rgba(255, 255, 255, .2);
    border-block-end-color: var(--_c-white);
  }
  ._badge-warn {
    color: var(--_c-white);
  }
}
[scheme=dark]:where(:not(:root)) {
  color: var(--_c-text);
  background-color: var(--_c-stage);
}
[scheme=dark] {
  --_h-stage: var(--_h-prim);
  --_s-stage: 10%;
  --_l-stage: 10%;
  --_c-coef: -1;
  --_l-text: 80%;
  --_l-mask: 100%;
  blockquote {
    background-color: var(--_c-text-bg);
    border-inline-start-color: var(--_c-prim);
  }
  pre {
    background-color: var(--_c-text-bg);
  }
  [class*=_loading]:before {
    border-color: rgba(255, 255, 255, .2);
    border-block-end-color: var(--_c-white);
  }
  ._badge-warn {
    color: var(--_c-white);
  }
}
/*
 *Last modified: 2025-06-28 21:16:53
 */
/*rtl & ltr*/
[dir="rtl"],
._rtl {
  --_dir-coef: -1;
}
._rtl,
._ltr {
  text-align: start;
}
._rtl {
  direction: rtl;
  unicode-bidi: bidi-override;
}
._ltr {
  direction: ltr;
  unicode-bidi: embed;
}
/*grid layout*/
._grid {
  --_lyt-avg: 1;
  --_lyt-group: 1;
  --_lyt-g-coef: 0;
  --_lyt-g: 0;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--_lyt-avg), 1fr);
  grid-gap: calc(var(--_lyt-g) + var(--_rem-space)*var(--_lyt-g-coef));
  position: relative;
  z-index: 2;
  &:where(ul),
  *:where(ul) {
    padding-inline-start: 0;
    & > li:before {
      display: none;
    }
  }
  > * {
    min-width: 0;
    box-sizing: border-box;
  }
  &._fence {
    background-color: var(--_c-text-bd);
    grid-gap: 1px;
    > * {
      background-color: var(--_c-stage);
    }
  }
  &._fluid {
    border-inline-start: 1px solid var(--_c-text-bd);
    border-block-start: 1px solid var(--_c-text-bd);
    > * {
      border-inline-end: 1px solid var(--_c-text-bd);
      border-block-end: 1px solid var(--_c-text-bd);
    }
  }
  &._ratio > *,
  &._ratio-1x1 > * {
    aspect-ratio: 1/1;
  }
  &._ratio-2x1 > * {
    aspect-ratio: 2/1;
  }
  &._ratio-16x9 > * {
    aspect-ratio: 16/9;
  }
  &._ratio-16x10 > * {
    aspect-ratio: 16/10;
  }
  &._ratio-4x3 > * {
    aspect-ratio: 4/3;
  }
  &._ratio-5x4 > * {
    aspect-ratio: 5/4;
  }
  &._ratio-3x2 > * {
    aspect-ratio: 3/2;
  }
  &._ratio-21x9 > * {
    aspect-ratio: 21/9;
  }
  &._ratio-32x9 > * {
    aspect-ratio: 32/9;
  }
  &._ratio-2x3 > * {
    aspect-ratio: 2/3;
  }
  &._ratio-9x16 > * {
    aspect-ratio: 9/16;
  }
  &._ratio-1x2 > * {
    aspect-ratio: 1/2;
  }
  /* &._g-0 {
        --_lyt-g: 0;
    }
    &._g-1 {
        --_lyt-g: 1px;
    }
    &._g-2 {
        --_lyt-g: 2px;
    }
    &._g-3 {
        --_lyt-g: 3px;
    }
    &._g-xxs {
        --_lyt-g: var(--_g);
    }
    &._g-xs {
        --_lyt-g: calc(var(--_g)*2);
    }
    &._g,
    &._g-sm {
        --_lyt-g: var(--_p);
    }
    &._g-md {
        --_lyt-g: var(--_rem-list);
    }
    &._g-lg {
        --_lyt-g: var(--_rem-display);
    }
    &._g-xl {
        --_lyt-g: var(--_rem-input);
    }
    &._g-xxl {
        --_lyt-g: var(--_rem-max);
    } */
  & > * > ._hide-clip {
    display: none;
  }
}
/*Flex layout*/
._row,
._col {
  --_lyt-avg: 1;
  --_lyt-g-coef: 0;
  --_lyt-g: 0px;
  --_lyt-group: 1;
  display: flex;
  flex-wrap: nowrap;
  box-sizing: border-box;
  zoom: 1;
  position: relative;
  z-index: 2;
  &:where(ul),
  *:where(ul) {
    padding-inline-start: 0;
    & > li:before {
      display: none;
    }
  }
  &:where([class*="_g"]) > OC-BR,
  &:where([class*="_g"]) > OC-BC {
    display: none;
  }
  & > * > ._hide-clip,
  & > * > ._hide-clip {
    display: none;
  }
  &:where(:has(> [class*="_flex"])) {
    gap: calc(var(--_lyt-g) + var(--_rem-space)*var(--_lyt-g-coef));
  }
}
:where(._row) > [class*="_flex"] {
  width: 0;
}
._row {
  flex-direction: row;
  width: 100%;
}
:where(._row[class*="_avg-"]) > *:where(:not(:last-of-type)),
:where(._row) > *:where([class*="_own-"]):where(:not(:last-of-type)) {
  margin-inline-end: var(--_lyt-g);
}
/* ._row:where(._g-0) {
    --_lyt-g: 0;
}
._row:where(._g-1) {
    --_lyt-g: 1px;
}
._row:where(._g-2) {
    --_lyt-g: 2px;
}
._row:where(._g-3) {
    --_lyt-g: 3px;
}
._row:where(._g-xxs) {
    --_lyt-g: var(--_g);
}
._row:where(._g-xs) {
    --_lyt-g: calc(var(--_g)*2);
}
._row:where(._g, ._g-sm) {
    --_lyt-g: var(--_rem-lead);
}
._row:where(._g-md) {
    --_lyt-g: var(--_rem-list);
}
._row:where(._g-lg) {
    --_lyt-g: var(--_rem-display);
}
._row:where(._g-xl) {
    --_lyt-g: var(--_rem-input);
}
._row:where(._g-xxl) {
    --_lyt-g: var(--_rem-max);
} */
:where(._col) > [class*="_flex"] {
  height: 0;
}
._col {
  flex-direction: column;
  height: 100%;
}
:where(._col[class*="_avg-"]) > *:where(:not(:last-of-type)),
:where(._col) > *:where([class*="_own-"]):where(:not(:last-of-type)) {
  margin-block-end: var(--_lyt-g);
}
/* ._col:where(._g-0) {
    --_lyt-g: 0;
}
._col:where(._g-1) {
    --_lyt-g: 1px;
}
._col:where(._g-2) {
    --_lyt-g: 2px;
}
._col:where(._g-3) {
    --_lyt-g: 3px;
}
._col:where(._g-xxs) {
    --_lyt-g: var(--_g);
}
._col:where(._g-xs) {
    --_lyt-g: calc(var(--_g)*2);
}
._col:where(._g, ._g-sm) {
    --_lyt-g: var(--_rem-lead);
}
._col:where(._g-md) {
    --_lyt-g: var(--_rem-list);
}
._col:where(._g-lg) {
    --_lyt-g: var(--_rem-display);
}
._col:where(._g-xl) {
    --_lyt-g: var(--_rem-input);
}
._col:where(._g-xxl) {
    --_lyt-g: var(--_rem-max);
} */
[class*="_flex"] {
  --_flex-grow: 1;
  --_flex-shrink: 1;
  --_flex-basis: auto;
  flex-grow: var(--_flex-grow);
  flex-shrink: var(--_flex-shrink);
  flex-basis: var(--_flex-basis);
  position: relative;
}
@-moz-document url-prefix() {
  [class*="_flex"] {
    min-width: 0;
  }
}
._flex-none {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  --_flex-grow: 0;
  --_flex-shrink: 0;
}
._flex-0 {
  --_flex-grow: 0;
}
._flex,
._flex-1 {
  --_flex-grow: 1;
}
._flex-2 {
  --_flex-grow: 2;
}
._flex-3 {
  --_flex-grow: 3;
}
._flex-4 {
  --_flex-grow: 4;
}
._flex-5 {
  --_flex-grow: 5;
}
._flex-6 {
  --_flex-grow: 6;
}
._flex-7 {
  --_flex-grow: 7;
}
._flex-8 {
  --_flex-grow: 8;
}
._flex-9 {
  --_flex-grow: 9;
}
._flex-10 {
  --_flex-grow: 10;
}
._flex-11 {
  --_flex-grow: 11;
}
._flex-12 {
  --_flex-grow: 12;
}
._flex-13 {
  --_flex-grow: 13;
}
._flex-14 {
  --_flex-grow: 14;
}
._flex-15 {
  --_flex-grow: 15;
}
._flex-16 {
  --_flex-grow: 16;
}
._flex-17 {
  --_flex-grow: 17;
}
._flex-18 {
  --_flex-grow: 18;
}
._flex-19 {
  --_flex-grow: 19;
}
._flex-20 {
  --_flex-grow: 20;
}
._flex-21 {
  --_flex-grow: 21;
}
._flex-22 {
  --_flex-grow: 22;
}
._flex-23 {
  --_flex-grow: 23;
}
._flex-24 {
  --_flex-grow: 24;
}
[class*="_own-"] {
  display: inline-flex;
  box-sizing: border-box;
  position: relative;
}
:where(._row) > [class*="_own-"] {
  width: calc(4.16667%*var(--_flex-grow));
}
:where(._col) > [class*="_own-"] {
  height: calc(4.16667%*var(--_flex-grow));
}
._own-0 {
  --_flex-grow: 0;
}
&:where(
    :not(
        [class*="_xxs-"],
        [class*="_xs-"],
        [class*="_sm-"],
        [class*="_md-"],
        [class*="_lg-"],
        [class*="_xl-"]
      )
  )
  > ._own-0 {
  width: 0;
  height: 0;
  overflow: hidden;
}
._own-1 {
  --_flex-grow: 1;
}
._own-2 {
  --_flex-grow: 2;
}
._own-3 {
  --_flex-grow: 3;
}
._own-4 {
  --_flex-grow: 4;
}
._own-5 {
  --_flex-grow: 5;
}
._own-6 {
  --_flex-grow: 6;
}
._own-7 {
  --_flex-grow: 7;
}
._own-8 {
  --_flex-grow: 8;
}
._own-9 {
  --_flex-grow: 9;
}
._own-10 {
  --_flex-grow: 10;
}
._own-11 {
  --_flex-grow: 11;
}
._own-12 {
  --_flex-grow: 12;
}
._own-13 {
  --_flex-grow: 13;
}
._own-14 {
  --_flex-grow: 14;
}
._own-15 {
  --_flex-grow: 15;
}
._own-16 {
  --_flex-grow: 16;
}
._own-17 {
  --_flex-grow: 17;
}
._own-18 {
  --_flex-grow: 18;
}
._own-19 {
  --_flex-grow: 19;
}
._own-20 {
  --_flex-grow: 20;
}
._own-21 {
  --_flex-grow: 21;
}
._own-22 {
  --_flex-grow: 22;
}
._own-23 {
  --_flex-grow: 23;
}
._own,
._own-24 {
  --_flex-grow: 24;
}
:where([class*="_own-"]) > [class*="_flex"] {
  height: 0;
}
:where(._row[class*="_avg-"]) > *,
:where(._col[class*="_avg-"]) > * {
  display: inline-flex;
  box-sizing: border-box;
  position: relative;
}
:where(._row[class*="_avg-"]) > * {
  width: calc(100%/var(--_lyt-avg));
}
:where(._col[class*="_avg-"]) > * {
  height: calc(100%/var(--_lyt-avg));
}
._avg-1 {
  --_lyt-avg: 1;
}
._avg-2 {
  --_lyt-avg: 2;
}
._avg-3 {
  --_lyt-avg: 3;
}
._avg-4 {
  --_lyt-avg: 4;
}
._avg-5 {
  --_lyt-avg: 5;
}
._avg-6 {
  --_lyt-avg: 6;
}
._avg-7 {
  --_lyt-avg: 7;
}
._avg-8 {
  --_lyt-avg: 8;
}
._avg-9 {
  --_lyt-avg: 9;
}
._avg-10 {
  --_lyt-avg: 10;
}
._avg-11 {
  --_lyt-avg: 11;
}
._avg-12 {
  --_lyt-avg: 12;
}
._avg-13 {
  --_lyt-avg: 13;
}
._avg-14 {
  --_lyt-avg: 14;
}
._avg-15 {
  --_lyt-avg: 15;
}
._avg-16 {
  --_lyt-avg: 16;
}
._avg-17 {
  --_lyt-avg: 17;
}
._avg-18 {
  --_lyt-avg: 18;
}
._avg-19 {
  --_lyt-avg: 19;
}
._avg-20 {
  --_lyt-avg: 20;
}
._avg-21 {
  --_lyt-avg: 21;
}
._avg-22 {
  --_lyt-avg: 22;
}
._avg-23 {
  --_lyt-avg: 23;
}
._avg-24 {
  --_lyt-avg: 24;
}
[class*="_grid"],
[class*="_row"],
[class*="_col"] {
  &:where(._g-0) {
    --_lyt-g: 0;
  }
  &:where(._g-1) {
    --_lyt-g: 1px;
  }
  &:where(._g-2) {
    --_lyt-g: 2px;
  }
  &:where(._g-3) {
    --_lyt-g: 3px;
  }
  &:where(._g-xxs) {
    --_lyt-g: var(--_rem-min);
  }
  &:where(._g-xs) {
    --_lyt-g: var(--_rem-space);
  }
  &:where(._g, ._g-sm) {
    --_lyt-g: var(--_rem-body);
  }
  &:where(._g-md, ._g-lg, ._g-xl, ._g-xxl) {
    --_lyt-g: var(--_rem-lead);
  }
  &:where(._g-md) {
    --_lyt-g-coef: 0.5;
  }
  &:where(._g-lg) {
    --_lyt-g-coef: 1;
  }
  &:where(._g-xl) {
    --_lyt-g-coef: 1.5;
  }
  &:where(._g-xxl) {
    --_lyt-g-coef: 2;
  }
}
/*Color*/
._c,
[class*="_c-"] {
  --_c: var(--_c-prim);
  color: var(--_c);
}
._c-prim {
  --_c: var(--_c-prim);
}
._c-error {
  --_c: var(--_c-error);
}
._c-succ {
  --_c: var(--_c-succ);
}
._c-info {
  --_c: var(--_c-info);
}
._c-warn {
  --_c: var(--_c-warn);
}
._c-issue {
  --_c: var(--_c-issue);
}
._c-text {
  --_c: var(--_c-text);
}
._c-brief {
  --_c: var(--_c-brief);
}
._c-caption {
  --_c: var(--_c-caption);
}
._c-disable {
  --_c: var(--_c-disable);
}
._c-stage {
  --_c: var(--_c-stage);
}
._c-white {
  --_c: var(--_c-white);
}
._c-mask {
  --_c: var(--_c-mask);
}
._c-black {
  --_c: var(--_c-black);
}
._c-text-sta {
  --_c: var(--_c-text-sta);
}
/*Background*/
._bg,
[class*="_bg-"] {
  --_bg: var(--_c-stage);
  background-color: var(--_bg);
}
._bg-prim {
  --_bg: var(--_c-prim);
}
._bg-prim-lt {
  --_bg: var(--_c-prim-bg);
}
._bg-succ {
  --_bg: var(--_c-succ);
}
._bg-succ-lt {
  --_bg: var(--_c-succ-bg);
}
._bg-error {
  --_bg: var(--_c-error);
}
._bg-error-lt {
  --_bg: var(--_c-error-bg);
}
._bg-warn {
  --_bg: var(--_c-warn);
}
._bg-warn-lt {
  --_bg: var(--_c-warn-bg);
}
._bg-info {
  --_bg: var(--_c-info);
}
._bg-info-lt {
  --_bg: var(--_c-info-bg);
}
._bg-issue {
  --_bg: var(--_c-issue);
}
._bg-issue-lt {
  --_bg: var(--_c-issue-bg);
}
._bg-text {
  --_bg: var(--_c-text);
}
._bg-text-lt {
  --_bg: var(--_c-text-bg);
}
._bg-brief {
  --_bg: var(--_c-brief);
}
._bg-brief-lt {
  --_bg: var(--_c-brief-bg);
}
._bg-caption {
  --_bg: var(--_c-caption);
}
._bg-caption-lt {
  --_bg: var(--_c-caption-bg);
}
._bg-disable {
  --_bg: var(--_c-disable);
}
._bg-disable-lt {
  --_bg: var(--_c-disable-bg);
}
._bg-stage {
  --_bg: var(--_c-stage);
}
._bg-mask {
  --_bg: var(--_c-mask);
}
._bg-white {
  --_bg: var(--_c-white);
}
._bg-black {
  --_bg: var(--_c-black);
}
._bg-text-sta {
  --_bg: var(--_c-text-sta);
}
/*Gradient*/
._gd,
[class*="_gd-"] {
  --_gd-deg: 45deg;
  --_gd-start: var(--_c-prim);
  --_gd-end: var(--_c-prim-aj);
  background: linear-gradient(var(--_gd-deg), var(--_gd-start), var(--_gd-end));
  &._gd-0 {
    --_gd-deg: 0deg;
  }
  &._gd-45 {
    --_gd-deg: 45deg;
  }
  &._gd-90 {
    --_gd-deg: 90deg;
  }
  &._gd-135 {
    --_gd-deg: 135deg;
  }
  &._gd-180 {
    --_gd-deg: 180deg;
  }
  &._gd-225 {
    --_gd-deg: 225deg;
  }
  &._gd-270 {
    --_gd-deg: 270deg;
  }
  &._gd-315 {
    --_gd-deg: 315deg;
  }
  &._gd-360 {
    --_gd-deg: 360deg;
  }
}
._gd-error {
  --_gd-start: var(--_c-error);
  --_gd-end: var(--_c-error-aj);
}
._gd-succ {
  --_gd-start: var(--_c-succ);
  --_gd-end: var(--_c-succ-aj);
}
._gd-info {
  --_gd-start: var(--_c-info);
  --_gd-end: var(--_c-info-aj);
}
._gd-warn {
  --_gd-start: var(--_c-warn);
  --_gd-end: var(--_c-warn-aj);
}
._gd-issue {
  --_gd-start: var(--_c-issue);
  --_gd-end: var(--_c-issue-aj);
}
._gd-text {
  --_gd-start: var(--_c-text);
  --_gd-end: var(--_c-text-aj);
}
/*Shadow */
._sd {
  --_sd: rgba(0, 0, 0, 0.1);
  box-shadow: 0 .5rem 1.0rem var(--_sd);
}
._sd-bd {
  --_sd: var(--_c-text-bd);
  --_sd-refer: rgba(0, 0, 0, 0.08);
  box-shadow: 1px 0 0 var(--_sd), -1px 0 0 var(--_sd), 0 1px 0 var(--_sd), 0 -1px 0 var(--_sd), 0 .2rem .6rem var(--_sd-refer);
}
._sd-bd-in {
  --_sd: var(--_c-text-bd);
  --_sd-refer: rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 0 1px var(--_sd) inset, 0 .2rem .6rem var(--_sd-refer);
}
._sd-ring {
  --_sd: var(--_c-prim-sd);
  box-shadow: 0 0 0 2px var(--_sd);
}
._sd-lt {
  --_sd: rgba(0, 0, 0, 0.06);
  box-shadow: 1px 1px .5rem var(--_sd);
}
._sd-dk {
  --_sd: rgba(0, 0, 0, 0.12);
  box-shadow: 0 .2rem 1.0rem var(--_sd);
}
._sd-soft {
  --_sd: rgba(0, 0, 0, 0.1);
  box-shadow: 0 .5rem 2.0rem var(--_sd);
}
._sd-hard {
  --_sd: rgba(0, 0, 0, 0.4);
  box-shadow: 0 .1rem .3rem var(--_sd);
}
._sd-prim {
  --_sd: var(--_c-prim-sd);
  box-shadow: 1px 2px 1rem var(--_sd);
}
._sd-error {
  --_sd: var(--_c-error-sd);
  box-shadow: 1px 2px 1rem var(--_sd);
}
._sd-succ {
  --_sd: var(--_c-succ-sd);
  box-shadow: 1px 2px 1rem var(--_sd);
}
._sd-info {
  --_sd: var(--_c-info-sd);
  box-shadow: 1px 2px 1rem var(--_sd);
}
._sd-warn {
  --_sd: var(--_c-warn-sd);
  box-shadow: 1px 2px 1rem var(--_sd);
}
._sd-issue {
  --_sd: var(--_c-issue-sd);
  box-shadow: 1px 2px 1rem var(--_sd);
}
/*Padding*/
._p,
[class*="_p-"] {
  --_p-sz: var(--_rem-body);
  --_p-s: var(--_p-sz);
  --_p-e: var(--_p-sz);
  --_p-t: var(--_p-sz);
  --_p-b: var(--_p-sz);
  --_p-coef: 0;
  padding-inline-start: calc(var(--_p-s) + var(--_rem-space)*var(--_p-coef));
  padding-inline-end: calc(var(--_p-e) + var(--_rem-space)*var(--_p-coef));
  padding-block-start: calc(var(--_p-t) + var(--_rem-space)*var(--_p-coef));
  padding-block-end: calc(var(--_p-b) + var(--_rem-space)*var(--_p-coef));
}
._p,
._p-s,
._p-e,
._p-t,
._p-b,
._p-se,
._p-tb {
  --_p-sz: var(--_rem-body);
}
._p {
}
._p-s {
  --_p-e: 0;
  --_p-t: 0;
  --_p-b: 0;
}
._p-e {
  --_p-s: 0;
  --_p-t: 0;
  --_p-b: 0;
}
._p-t {
  --_p-s: 0;
  --_p-e: 0;
  --_p-b: 0;
}
._p-b {
  --_p-s: 0;
  --_p-e: 0;
  --_p-t: 0;
}
._p-se {
  --_p-t: 0;
  --_p-b: 0;
}
._p-tb {
  --_p-s: 0;
  --_p-e: 0;
}
._p-0 {
  --_p-sz: 0;
}
._p-1 {
  --_p-sz: calc(var(--_rem-body)*1);
}
._p-2 {
  --_p-sz: calc(var(--_rem-body)*2);
}
._p-3 {
  --_p-sz: calc(var(--_rem-body)*3);
}
._p-4 {
  --_p-sz: calc(var(--_rem-body)*4);
}
._p-5 {
  --_p-sz: calc(var(--_rem-body)*5);
}
._p-6 {
  --_p-sz: calc(var(--_rem-body)*6);
}
._p-7 {
  --_p-sz: calc(var(--_rem-body)*7);
}
._p-8 {
  --_p-sz: calc(var(--_rem-body)*8);
}
._p-9 {
  --_p-sz: calc(var(--_rem-body)*9);
}
._p-10 {
  --_p-sz: calc(var(--_rem-body)*10);
}
._p-xxs {
  --_p-sz: var(--_rem-min);
}
._p-xs {
  --_p-sz: var(--_rem-space);
}
._p-sm {
  --_p-sz: var(--_rem-body);
}
._p-md,
._p-lg,
._p-xl,
._p-xxl {
  --_p-sz: var(--_rem-lead);
}
._p-md {
  --_p-coef: 0.5;
}
._p-lg {
  --_p-coef: 1;
}
._p-xl {
  --_p-coef: 1.5;
}
._p-xxl {
  --_p-coef: 2;
}
/*Margin*/
._m,
[class*="_m-"] {
  --_m-sz: var(--_rem-body);
  --_m-s: var(--_m-sz);
  --_m-e: var(--_m-sz);
  --_m-t: var(--_m-sz);
  --_m-b: var(--_m-sz);
  --_m-coef: 0;
  margin-inline-start: calc(var(--_m-s) + var(--_rem-space)*var(--_m-coef));
  margin-inline-end: calc(var(--_m-e) + var(--_rem-space)*var(--_m-coef));
  margin-block-start: calc(var(--_m-t) + var(--_rem-space)*var(--_m-coef));
  margin-block-end: calc(var(--_m-b) + var(--_rem-space)*var(--_m-coef));
}
._m,
._m-s,
._m-e,
._m-t,
._m-b,
._m-se,
._m-tb {
  --_m-sz: var(--_rem-body);
}
._m {
}
._m-s {
  --_m-e: 0;
  --_m-t: 0;
  --_m-b: 0;
}
._m-e {
  --_m-s: 0;
  --_m-t: 0;
  --_m-b: 0;
}
._m-t {
  --_m-s: 0;
  --_m-e: 0;
  --_m-b: 0;
}
._m-b {
  --_m-s: 0;
  --_m-e: 0;
  --_m-t: 0;
}
._m-se {
  --_m-t: 0;
  --_m-b: 0;
}
._m-tb {
  --_m-s: 0;
  --_m-e: 0;
}
._m-0 {
  --_m-sz: 0;
}
._m-1 {
  --_m-sz: calc(var(--_rem-body)*1);
}
._m-2 {
  --_m-sz: calc(var(--_rem-body)*2);
}
._m-3 {
  --_m-sz: calc(var(--_rem-body)*3);
}
._m-4 {
  --_m-sz: calc(var(--_rem-body)*4);
}
._m-5 {
  --_m-sz: calc(var(--_rem-body)*5);
}
._m-6 {
  --_m-sz: calc(var(--_rem-body)*6);
}
._m-7 {
  --_m-sz: calc(var(--_rem-body)*7);
}
._m-8 {
  --_m-sz: calc(var(--_rem-body)*8);
}
._m-9 {
  --_m-sz: calc(var(--_rem-body)*9);
}
._m-10 {
  --_m-sz: calc(var(--_rem-body)*10);
}
._m-xxs {
  --_m-sz: var(--_rem-min);
}
._m-xs {
  --_m-sz: var(--_rem-space);
}
._m-sm {
  --_m-sz: var(--_rem-body);
}
._m-md,
._m-lg,
._m-xl,
._m-xxl {
  --_m-sz: var(--_rem-lead);
}
._m-md {
  --_m-coef: 0.5;
}
._m-lg {
  --_m-coef: 1;
}
._m-xl {
  --_m-coef: 1.5;
}
._m-xxl {
  --_m-coef: 2;
}
/*Radius*/
._r,
[class*="_r-"] {
  --_r-sz: var(--_r);
  border-radius: var(--_r-sz);
}
._r-0 {
  --_r-sz: 0;
}
._r-1 {
  --_r-sz: var(--_r);
}
._r-2 {
  --_r-sz: calc(var(--_r)*2);
}
._r-3 {
  --_r-sz: calc(var(--_r)*3);
}
._r-4 {
  --_r-sz: calc(var(--_r)*4);
}
._r-5 {
  --_r-sz: calc(var(--_r)*5);
}
._r-6 {
  --_r-sz: calc(var(--_r)*6);
}
._r-7 {
  --_r-sz: calc(var(--_r)*7);
}
._r-8 {
  --_r-sz: calc(var(--_r)*8);
}
._r-9 {
  --_r-sz: calc(var(--_r)*9);
}
._r-10 {
  --_r-sz: calc(var(--_r)*10);
}
._r-xxs {
  --_r-sz: var(--_rem-min);
}
._r-xs {
  --_r-sz: var(--_rem-space);
}
._r-sm {
  --_r-sz: var(--_rem-body);
}
._r-md {
  --_r-sz: var(--_rem-list);
}
._r-lg {
  --_r-sz: var(--_rem-display);
}
._r-xl {
  --_r-sz: var(--_rem-input);
}
._r-xxl {
  --_r-sz: var(--_rem-max);
}
._r-s {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
._r-e {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
._r-t {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
._r-b {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}
._r-input,
._r-input-md {
  --_r-sz: var(--_r-input);
}
._r-input-sm {
  --_r-sz: var(--_r-input-sm);
}
._r-input-lg {
  --_r-sz: var(--_r-input-lg);
}
._r-bubble {
  --_r-sz: var(--_r-bubble);
}
._r-full {
  --_r-sz: var(--_r-full);
}
/*Border*/
._bd,
[class*="_bd-"] {
  --_bw: 1px;
  --_bc: var(--_c-text-bd);
  --_bs: solid;
  border: var(--_bw) var(--_bs) var(--_bc);
}
._bd-s {
  border-inline-end-width: 0;
  border-block-start-width: 0;
  border-block-end-width: 0;
}
._bd-e {
  border-inline-start-width: 0;
  border-block-start-width: 0;
  border-block-end-width: 0;
}
._bd-t {
  border-inline-end-width: 0;
  border-inline-start-width: 0;
  border-block-end-width: 0;
}
._bd-b {
  border-inline-end-width: 0;
  border-block-start-width: 0;
  border-inline-start-width: 0;
}
._bd-se {
  border-block-start-width: 0;
  border-block-end-width: 0;
}
._bd-tb {
  border-inline-end-width: 0;
  border-inline-start-width: 0;
}
._bd-0 {
  --_bw: 0;
}
._bd-1 {
  --_bw: 1px;
}
._bd-2 {
  --_bw: 2px;
}
._bd-3 {
  --_bw: 3px;
}
._bd-4 {
  --_bw: 4px;
}
._bd-5 {
  --_bw: 5px;
}
._bd-6 {
  --_bw: 6px;
}
._bd-7 {
  --_bw: 7px;
}
._bd-8 {
  --_bw: 8px;
}
._bd-9 {
  --_bw: 9px;
}
._bd-10 {
  --_bw: 10px;
}
._bd-prim {
  --_bc: var(--_c-prim);
}
._bd-error {
  --_bc: var(--_c-error);
}
._bd-succ {
  --_bc: var(--_c-succ);
}
._bd-issue {
  --_bc: var(--_c-issue);
}
._bd-warn {
  --_bc: var(--_c-warn);
}
._bd-info {
  --_bc: var(--_c-info);
}
._bd-text {
  --_bc: var(--_c-text);
}
._bd-brief {
  --_bc: var(--_c-brief);
}
._bd-caption {
  --_bc: var(--_c-caption);
}
._bd-prim-lt {
  --_bc: var(--_c-prim-bd);
}
._bd-error-lt {
  --_bc: var(--_c-error-bd);
}
._bd-succ-lt {
  --_bc: var(--_c-succ-bd);
}
._bd-issue-lt {
  --_bc: var(--_c-issue-bd);
}
._bd-warn-lt {
  --_bc: var(--_c-warn-bd);
}
._bd-info-lt {
  --_bc: var(--_c-info-bd);
}
._bd-text-lt {
  --_bc: var(--_c-text-bd);
}
._bd-brief-lt {
  --_bc: var(--_c-brief-bd);
}
._bd-caption-lt {
  --_bc: var(--_c-caption-bd);
}
._bd-solid {
  --_bs: solid;
}
._bd-dashed {
  --_bs: dashed;
}
._bd-dotted {
  --_bs: dotted;
}
/*Break row*/
OC-BR {
  --_br-h: var(--_rem-body);
  --_br-coef: 0;
  width: 100%;
  height: calc(var(--_br-h) + var(--_rem-space)*var(--_br-coef));
  display: block;
  overflow: hidden;
  &[size="0"] {
    --_br-h: 0;
  }
  &[size="xxs"] {
    --_br-h: var(--_rem-min);
  }
  &[size="xs"] {
    --_br-h: var(--_rem-space);
  }
  &[size="sm"] {
    --_br-h: var(--_rem-body);
  }
  &[size="sm"],
  &[size="md"],
  &[size="lg"],
  &[size="xl"],
  &[size="xxl"] {
    --_br-h: var(--_rem-lead);
  }
  &[size="md"] {
    --_br-coef: 0.5;
  }
  &[size="lg"] {
    --_br-coef: 1;
  }
  &[size="xl"] {
    --_br-coef: 1.5;
  }
  &[size="xxl"] {
    --_br-coef: 2;
  }
}
/*Break column*/
OC-BC {
  --_bc-w: var(--_rem-body);
  --_bc-coef: 0;
  width: calc(var(--_bc-w) + var(--_rem-space)*var(--_bc-coef));
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  &[size="0"] {
    --_bc-w: 0;
  }
  &[size="xxs"] {
    --_bc-w: var(--_rem-min);
  }
  &[size="xs"] {
    --_bc-w: var(--_rem-space);
  }
  &[size="sm"] {
    --_bc-w: var(--_rem-body);
  }
  &[size="md"],
  &[size="lg"],
  &[size="xl"],
  &[size="xxl"] {
    --_bc-w: var(--_rem-lead);
  }
  &[size="md"] {
    --_bc-coef: 0.5;
  }
  &[size="lg"] {
    --_bc-coef: 1;
  }
  &[size="xl"] {
    --_bc-coef: 1.5;
  }
  &[size="xxl"] {
    --_bc-coef: 2;
  }
}
/*Divider*/
OC-DIVIDER {
  --_div-fs: var(--_rem-lead);
  --_div-g: 0;
  --_div-g-coef: 0;
  display: block;
  margin-inline-start: auto;
  margin-inline-end: auto;
  [rep="wrap"] {
    display: flex;
    align-items: center;
  }
  [rep="start"],
  [rep="end"] {
    height: 1px;
    background-color: var(--_c-text-bd);
    flex: auto;
  }
  [rep="label"] {
    margin: auto var(--_m);
  }
  &[break],
  &[size] {
    margin-block-start: calc(var(--_div-g) + var(--_rem-space)*var(--_div-g-coef));
    margin-block-end: calc(var(--_div-g) + var(--_rem-space)*var(--_div-g-coef));
  }
  &[break="xxs"] {
    --_div-g: var(--_rem-min);
  }
  &[break="xs"] {
    --_div-g: var(--_rem-space);
  }
  &[break="sm"] {
    --_div-g: var(--_rem-body);
  }
  &[break="md"],
  &[break="lg"],
  &[break="xl"],
  &[break="xxl"] {
    --_div-g: var(--_rem-lead);
  }
  &[break="md"] {
    --_div-g-coef: 0.5;
  }
  &[break="lg"] {
    --_div-g-coef: 1;
  }
  &[break="xl"] {
    --_div-g-coef: 1.5;
  }
  &[break="xxl"] {
    --_div-g-coef: 2;
  }
  &[fs] [rep="label"],
  &[size] [rep="label"] {
    font-size: var(--_div-fs);
  }
  &[fs="sm"] {
    --_div-fs: var(--_fs-body);
  }
  &[fs="md"] {
    --_div-fs: var(--_fs-lead);
  }
  &[fs="lg"] {
    --_div-fs: var(--_fs-subtitle);
  }
  &[size="sm"] {
    --_div-fs: var(--_rem-body);
    --_div-g: var(--_rem-body);
  }
  &[size="md"] {
    --_div-fs: var(--_rem-lead);
    --_div-g: var(--_rem-lead);
    --_div-g-coef: 1;
  }
  &[size="lg"] {
    --_div-fs: var(--_rem-subtitle);
    --_div-g: var(--_rem-lead);
    --_div-g-coef: 2;
  }
}
/*Display*/
._d-none {
  display: none;
}
._d-flow {
  display: flow-root;
}
._d-inline {
  display: inline;
}
._d-grid {
  display: grid;
}
._d-flex {
  display: flex;
}
._d-block {
  display: block;
}
._d-ingrid {
  display: inline-grid;
}
._d-inflex {
  display: inline-flex;
}
._d-inblock {
  display: inline-block;
}
._d-show {
  visibility: visible;
  position: relative;
  pointer-events: auto;
}
._d-hide {
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}
._d-full {
  width: 100%;
  box-sizing: border-box;
}
/*Width*/
[class*="_w-"] {
  box-sizing: border-box;
}
._w-0 {
  width: 0px;
}
._w-1 {
  width: calc(var(--_rem-input)*1);
}
._w-2 {
  width: calc(var(--_rem-input)*2);
}
._w-3 {
  width: calc(var(--_rem-input)*3);
}
._w-4 {
  width: calc(var(--_rem-input)*4);
}
._w-5 {
  width: calc(var(--_rem-input)*5);
}
._w-6 {
  width: calc(var(--_rem-input)*6);
}
._w-7 {
  width: calc(var(--_rem-input)*7);
}
._w-8 {
  width: calc(var(--_rem-input)*8);
}
._w-9 {
  width: calc(var(--_rem-input)*9);
}
._w-10 {
  width: calc(var(--_rem-input)*10);
}
._w-neat {
  width: var(--_w-input);
}
._w-half,
._w-1of2 {
  width: 50%;
}
._w-1of3 {
  width: 33.33333%;
}
._w-2of3 {
  width: 66.66667%;
}
._w-1of4 {
  width: 25%;
}
._w-3of4 {
  width: 75%;
}
._w-full {
  width: 100%;
}
._w-auto {
  width: auto;
}
._w-iso {
  aspect-ratio: 1/1;
}
/*Height*/
[class*="_h-"] {
  box-sizing: border-box;
}
._h-0 {
  height: 0px;
}
._h-1 {
  height: calc(var(--_rem-input)*1);
}
._h-2 {
  height: calc(var(--_rem-input)*2);
}
._h-3 {
  height: calc(var(--_rem-input)*3);
}
._h-4 {
  height: calc(var(--_rem-input)*4);
}
._h-5 {
  height: calc(var(--_rem-input)*5);
}
._h-6 {
  height: calc(var(--_rem-input)*6);
}
._h-7 {
  height: calc(var(--_rem-input)*7);
}
._h-8 {
  height: calc(var(--_rem-input)*8);
}
._h-9 {
  height: calc(var(--_rem-input)*9);
}
._h-10 {
  height: calc(var(--_rem-input)*10);
}
._h-neat {
  height: var(--_rem-input);
}
._h-half,
._h-1of2 {
  height: 50%;
}
._h-1of3 {
  height: 33.33333%;
}
._h-2of3 {
  height: 66.66667%;
}
._h-1of4 {
  height: 25%;
}
._h-3of4 {
  height: 75%;
}
._h-full {
  height: 100%;
}
._h-auto {
  height: auto;
}
._h-iso {
  aspect-ratio: 1/1;
}
/*Align*/
._a-s {
  text-align: start;
}
._a-c {
  text-align: center;
}
._a-e {
  text-align: end;
}
._a-st,
._a-ct,
._a-et,
._a-sc,
._a-cc,
._a-ec,
._a-sb,
._a-cb,
._a-eb {
  display: flex;
}
._a-st,
._a-ct,
._a-et {
  align-items: flex-start;
}
._a-st {
  justify-content: flex-start;
}
._a-ct {
  justify-content: center;
}
._a-et {
  justify-content: flex-end;
}
._a-sc,
._a-cc,
._a-ec {
  align-items: center;
}
._a-sc {
  justify-content: flex-start;
}
._a-cc {
  justify-content: center;
}
._a-ec {
  justify-content: flex-end;
}
._a-sb,
._a-cb,
._a-eb {
  align-items: flex-end;
}
._a-sb {
  justify-content: flex-start;
}
._a-cb {
  justify-content: center;
}
._a-eb {
  justify-content: flex-end;
}
/*Text*/
._fs-caption {
  font-size: var(--_fs-caption);
}
._fs-body {
  font-size: var(--_fs-body);
}
._fs-lead {
  font-size: var(--_fs-lead);
}
._fs-subtitle {
  font-size: var(--_fs-subtitle);
}
._fs-title {
  font-size: var(--_fs-title);
}
._fs-display {
  font-size: var(--_fs-display);
}
._fs-hero {
  font-size: var(--_fs-hero);
}
._fs-h1 {
  font-size: var(--_fs-h1);
}
._fs-h2 {
  font-size: var(--_fs-h2);
}
._fs-h3 {
  font-size: var(--_fs-h3);
}
._fs-h4 {
  font-size: var(--_fs-h4);
}
._fs-h5 {
  font-size: var(--_fs-h5);
}
._fs-h6 {
  font-size: var(--_fs-h6);
}
._lh-caption {
  line-height: var(--_lh-caption);
}
._lh-body {
  line-height: var(--_lh-body);
}
._fs-lead {
  line-height: var(--_lh-lead);
}
._lh-subtitle {
  line-height: var(--_lh-subtitle);
}
._lh-title {
  line-height: var(--_lh-title);
}
._lh-display {
  line-height: var(--_lh-display);
}
._lh-hero {
  line-height: var(--_lh-hero);
}
._lh-h1 {
  line-height: var(--_lh-h1);
}
._lh-h2 {
  line-height: var(--_lh-h2);
}
._lh-h3 {
  line-height: var(--_lh-h3);
}
._lh-h4 {
  line-height: var(--_lh-h4);
}
._lh-h5 {
  line-height: var(--_lh-h5);
}
._lh-h6 {
  line-height: var(--_lh-h6);
}
._lh-sm {
  line-height: 1.268;
}
._lh-md {
  line-height: 1.5;
}
._lh-lg {
  line-height: 1.78;
}
._ff-body {
  font-family: var(--_ff-body);
}
._ff-icon {
  font-family: var(--_ff-icon);
}
._ff-alt {
  font-family: var(--_ff-alt);
}
._ff-code {
  font-family: var(--_ff-code);
}
._fw-normal {
  font-weight: normal;
}
._fw-bold {
  font-weight: bold;
}
._fw-bolder {
  font-weight: bolder;
}
._fw-lighter {
  font-weight: lighter;
}
._fw-100 {
  font-weight: 100;
}
._fw-200 {
  font-weight: 200;
}
._fw-300 {
  font-weight: 300;
}
._fw-400 {
  font-weight: 400;
}
._fw-500 {
  font-weight: 500;
}
._fw-600 {
  font-weight: 600;
}
._fw-700 {
  font-weight: 700;
}
._fw-800 {
  font-weight: 800;
}
._fw-900 {
  font-weight: 900;
}
._t-wv {
  text-decoration: 1px underline wavy;
  text-underline-offset: 0.4em;
}
._t-lc {
  text-decoration: line-through;
}
._t-lb {
  text-decoration: underline;
  text-underline-offset: 2px;
}
._t-lt {
  text-decoration: overline;
  text-underline-offset: 2px;
}
._t-em {
  text-emphasis: circle var(--_c-prim);
  text-emphasis-position: over inline-end;
}
._t-upc {
  text-transform: uppercase;
}
._t-lwc {
  text-transform: lowercase;
}
._t-cap {
  text-transform: capitalize;
}
._t-br {
  display: inline-block;
  font-size: max(var(--_px-caption), 0.5em);
  line-height: 1.2em;
  vertical-align: middle;
  text-align: justify;
  text-align-last: justify;
}
[class*="_t-diffuse"] {
  --_df-g: 1.4em;
  text-align: center;
  letter-spacing: var(--_df-g);
  margin-right: calc(var(--_df-g)*-1);
}
._t-diffuse-xxs {
  --_df-g: 0.6em;
}
._t-diffuse-xs {
  --_df-g: 0.8em;
}
._t-diffuse-sm {
  --_df-g: 1em;
}
._t-diffuse-md {
  --_df-g: 1.4em;
}
._t-diffuse-lg {
  --_df-g: 1.8em;
}
._t-diffuse-xl {
  --_df-g: 2.4em;
}
._t-diffuse-xxl {
  --_df-g: 2.8em;
}
[class*="_t-blank"] {
  --_bk-g: 1.4em;
  word-spacing: var(--_bk-g);
}
._t-blank-xxs {
  --_bk-g: 0.6em;
}
._t-blank-xs {
  --_bk-g: 0.8em;
}
._t-blank-sm {
  --_bk-g: 1em;
}
._t-blank-md {
  --_bk-g: 1.4em;
}
._t-blank-lg {
  --_bk-g: 1.8em;
}
._t-blank-xl {
  --_bk-g: 2.4em;
}
._t-blank-xxl {
  --_bk-g: 2.8em;
}
._t-hero {
  font-size: var(--_fs-hero);
  line-height: var(--_lh-hero);
}
._t-display {
  font-size: var(--_fs-dispay);
  line-height: var(--_lh-dispay);
}
._t-title {
  font-size: var(--_fs-title);
  line-height: var(--_lh-title);
}
._t-subtitle {
  font-size: var(--_fs-subtitle);
  line-height: var(--_lh-subtitle);
}
._t-lead {
  font-size: var(--_fs-lead);
  line-height: var(--_lh-lead);
}
._t-body {
  font-size: var(--_fs-body);
  line-height: var(--_lh-body);
}
._t-caption {
  font-size: var(--_fs-caption);
  line-height: var(--_lh-caption);
}
[unselectable] {
  user-select: none;
}
/*State*/
[disabled]:where(:not(input, select, textarea)) {
  pointer-events: none;
}
[inert] {
  user-select: none;
  pointer-events: none;
}
[dedicated] {
  overscroll-behavior: contain;
}
[hyphenated] {
  overflow-wrap: break-word;
  hyphens: auto;
}
[rep="disk"],
[rep="cube"],
[rep="image"] {
  --_leg-c: var(--_c-caption);
  --_leg-bg: transparent;
  color: var(--_leg-c);
  background-color: var(--_leg-bg);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  transition: all var(--_dur-2) linear;
  position: relative;
  /*   &:empty{
        visibility: hidden;
        position: fixed;
        pointer-events: none;
    } */
  img {
    width: inherit;
    height: inherit;
    border-radius: inherit;
    object-fit: cover;
    transition: all var(--_dur-2) linear;
    &[src=""] {
      display: none;
    }
  }
  &:has(img[src=""]):before {
    content: "issue";
    font-family: var(--_ff-icon);
  }
}
[rep="image"]&:has(img[src=""]) {
  padding: var(--_rem-space);
}
img[rep="disk"],
img[rep="cube"],
img[rep="image"] {
  object-fit: cover;
}
[rep="disk"],
[rep="cube"] {
  aspect-ratio: 1/1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
[rep="disk"] {
  border-radius: 100%;
}
[rep="cube"] {
  border-radius: var(--_r);
}
[rep="poster"] {
  --_poster-ar: 4/3;
  --_poster-fs: var(--_rem-display);
  --_poster-c: var(--_c-caption);
  --_poster-bg: var(--_c-text-bg);
  --_poster-r: var(--_r-input);
  --_poster-d: inline-flex;
  aspect-ratio: var(--_poster-ar);
  overflow: hidden;
  border-radius: var(--_poster-r);
  background-color: var(--_poster-bg);
  display: var(--_poster-d);
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  > OC-BADGE,
  > OC-BUOY {
    position: absolute;
    inset-inline-start: var(--_rem-space);
    inset-block-start: var(--_rem-space);
  }
  > img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    transition: all var(--_dur-2) linear;
    &[src=""] {
    display: none;
  }
  }
  &:has(> img[src=""]):before {
    color: var(--_poster-c);
    content: "issue";
    font-family: var(--_ff-icon);
    font-size: var(--_poster-fs);
  }
}
._char {
  font-size: var(--_rem-subtitle);
}
._o,
._o-0 {
  opacity: 0;
}
._o-4 {
  opacity: 0.04;
}
._o-8 {
  opacity: 0.08;
}
._o-12 {
  opacity: 0.12;
}
._o-16 {
  opacity: 0.16;
}
._o-20 {
  opacity: 0.2;
}
._o-24 {
  opacity: 0.24;
}
._o-28 {
  opacity: 0.28;
}
._o-32 {
  opacity: 0.32;
}
._o-36 {
  opacity: 0.36;
}
._o-40 {
  opacity: 0.4;
}
._o-44 {
  opacity: 0.44;
}
._o-48 {
  opacity: 0.48;
}
._o-52 {
  opacity: 0.52;
}
._o-56 {
  opacity: 0.56;
}
._o-60 {
  opacity: 0.6;
}
._o-64 {
  opacity: 0.64;
}
._o-68 {
  opacity: 0.68;
}
._o-72 {
  opacity: 0.72;
}
._o-76 {
  opacity: 0.76;
}
._o-80 {
  opacity: 0.8;
}
._o-84 {
  opacity: 0.84;
}
._o-88 {
  opacity: 0.88;
}
._o-92 {
  opacity: 0.92;
}
._o-96 {
  opacity: 0.96;
}
._o-100 {
  opacity: 1;
}
._o-active {
  opacity: var(--_o-active);
}
._o-disabled {
  opacity: var(--_o-disabled);
}
._o-mask {
  opacity: var(--_o-mask);
}
._o-stage {
  opacity: var(--_o-stage);
}
._ar,
._ar-1x1 {
  aspect-ratio: 1/1;
}
._ar-2x1 {
  aspect-ratio: 2/1;
}
._ar-16x9 {
  aspect-ratio: 16/9;
}
._ar-16x10 {
  aspect-ratio: 16/10;
}
._ar-4x3 {
  aspect-ratio: 4/3;
}
._ar-5x4 {
  aspect-ratio: 5/4;
}
._ar-3x2 {
  aspect-ratio: 3/2;
}
._ar-21x9 {
  aspect-ratio: 21/9;
}
._ar-32x9 {
  aspect-ratio: 32/9;
}
._ar-2x3 {
  aspect-ratio: 2/3;
}
._ar-9x16 {
  aspect-ratio: 9/16;
}
._ar-1x2 {
  aspect-ratio: 1/2;
}
._empty {
  --_emp-c: var(--_c-caption);
  --_emp-h-icon: var(--_px-hero);
  --_emp-h-img: 300px;
  font-size: var(--_px-body);
  color: var(--_emp-c);
  text-align: center;
  padding: var(--_px-display) 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  > [rep="icon"] {
    font-size: var(--_emp-h-icon);
    line-height: 1em;
  }
  > [rep="icon"] img {
    max-height: var(--_emp-h-img);
  }
  > [rep="label"] {
  }
  > [rep="actions"] {
    margin-block-start: var(--_px-body);
  }
  > [rep="actions"] > a {
    --_link-c: var(--_c-brief);
    margin: 0 var(--_px-space);
  }
  > [rep="skip"] {
    font-size: var(--_px-caption);
  }
}
._empty-hide:empty {
  display: none !important;
}
._empty-detach:empty {
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}
._empty-collapse:empty {
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
}
._pos-fixed {
  position: fixed;
}
._pos-absolute {
  position: absolute;
}
._pos-sticky {
  position: sticky;
}
._pos-relative {
  position: relative;
}
._pos-static {
  position: static;
}
._pos-t-0 {
  inset-block-start: 0;
}
._pos-s-0 {
  inset-inline-start: 0;
}
._pos-b-0 {
  inset-block-end: 0;
}
._pos-e-0 {
  inset-inline-end: 0;
}
._pos-t-auto {
  inset-block-start: auto;
}
._pos-s-auto {
  inset-inline-start: auto;
}
._pos-b-auto {
  inset-block-end: auto;
}
._pos-e-auto {
  inset-inline-end: auto;
}
._pos-st {
  inset-block-start: 0;
  inset-inline-start: 0;
}
._pos-et {
  inset-block-start: 0;
  inset-inline-end: 0;
}
._pos-sb {
  inset-block-end: 0;
  inset-inline-start: 0;
}
._pos-eb {
  inset-block-end: 0;
  inset-inline-end: 0;
}
._pos-0 {
  inset: 0;
}
._pos-auto {
  inset: auto;
}
._scroller {
  --_sclr-w: auto;
  --_sclr-h: fit-content;
  --_sclr-x: auto;
  --_sclr-y: auto;
  --_xxs-h: var(--_sclr-h);
  --_xs-h: var(--_sclr-h);
  --_sm-h: var(--_sclr-h);
  --_md-h: var(--_sclr-h);
  --_lg-h: var(--_sclr-h);
  --_xl-h: var(--_sclr-h);
  --_xxl-h: var(--_sclr-h);
  --_hh-h: var(--_sclr-h);
  --_tb-h: var(--_sclr-h);
  --_dt-h: var(--_sclr-h);
  --_xxs-w: var(--_sclr-w);
  --_xs-w: var(--_sclr-w);
  --_sm-w: var(--_sclr-w);
  --_md-w: var(--_sclr-w);
  --_lg-w: var(--_sclr-w);
  --_xl-w: var(--_sclr-w);
  --_xxl-w: var(--_sclr-w);
  --_hh-w: var(--_sclr-h);
  --_tb-w: var(--_sclr-h);
  --_dt-w: var(--_sclr-h);
  width: var(--_sclr-w);
  height: var(--_sclr-h);
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-x: var(--_sclr-x);
  overflow-y: var(--_sclr-y);
  box-sizing: border-box;
  &[axis="x"] {
    --_sclr-y: hidden;
  }
  &[axis="y"] {
    --_sclr-x: hidden;
  }
}
._splitnum {
  --_splitnum-fs: inherit;
  --_splitnum-x: 1.5;
  font-size: var(--_splitnum-fs);
  > s {
    font-size: calc(1em*var(--_splitnum-x));
  }
}
/*About article*/
._from {
  --_from-c:var(--_c-text-aj);
  color: var(--_from-c);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  zoom: 1;
  [rep=left] {
    flex: auto;
    width: 0;
    position: relative;
  }
  a {
    --_link-c: var(--_from-c);
  }
  OC-AVATAR {
    margin-inline-end: var(--_rem-space);
  }
}
._author{
  --_author-c:var(--_c-text-aj);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  zoom: 1;
  [rep=left] {
    line-height: var(--_rem-list);
    display: block;
    flex: auto;
    width: 0;
    position: relative;
  }
  [rep=right] {
    color: var(--_author-c);
  }
  [rep=title] {}
  [rep=brief] {
    font-size:  var(--_rem-caption);
    color: var(--_author-c);
  }
  OC-AVATAR {
    margin-inline-end: var(--_rem-space);
  }
}
/*Container*/
[class*=_container]{
  --_container-d:block;
  box-sizing: border-box;
  display: var(--_container-d);
}
[class*=_container]:where(:not(._container-full)) {
  --_container-resp: var(--_w-xxs);
  --_container-w: var(--_container-resp);
  --_container-full: 100%;
  width: min(var(--_container-w),var(--_container-resp),var(--_container-full));
  margin: 0 auto;
}
._container-full{
  width: 100%;
}
/*
 *Last modified: 2025-07-21 10:21:33
 */
@font-face {
   font-family: '_iconfont';
   src: url('data:font/ttf;charset=utf-8;base64, ') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
[class*=_icon-] {
   font-family: var(--_ff-icon);
   font-size: 1em;
   position: relative;
   &:before {
     position: relative;
   }
 }
._icon-cny-o-f:before {
   content: "\e7cf";
 }
._icon-cny-o:before {
   content: "\e7d0";
 }
._icon-usd-o-f:before {
   content: "\e7d1";
 }
._icon-usd-o:before {
   content: "\e7d2";
 }
._icon-eur-o-f:before {
   content: "\e7d3";
 }
._icon-eur-o:before {
   content: "\e7d4";
 }
._icon-gbp-o:before {
   content: "\e7d5";
 }
._icon-gbp-o-f:before {
   content: "\e7d6";
 }
._icon-usd:before {
   content: "\e7c9";
 }
._icon-eur:before {
   content: "\e7cd";
 }
._icon-gbp:before {
   content: "\e7ce";
 }
._icon-cny:before {
   content: "\e7e3";
 }
._icon-coins:before {
   content: "\e7c7";
 }
._icon-coins-f:before {
   content: "\e7c8";
 }
._icon-coin-f:before {
   content: "\e7c4";
 }
._icon-coin:before {
   content: "\e7c6";
 }
._icon-article:before {
   content: "\e7c1";
 }
._icon-br:before {
   content: "\e7c0";
 }
._icon-html-box:before {
   content: "\e7bc";
 }
._icon-uppercase:before {
   content: "\e7b8";
 }
._icon-font-case:before {
   content: "\e7ba";
 }
._icon-lowercase:before {
   content: "\e7b7";
 }
._icon-font-bg:before {
   content: "\e7b5";
 }
._icon-line-h:before {
   content: "\e7b4";
 }
._icon-highlight:before {
   content: "\e9ac";
 }
._icon-indent-more:before {
   content: "\f027";
 }
._icon-indent-less:before {
   content: "\e7b2";
 }
._icon-code-box:before {
   content: "\e7b1";
 }
._icon-link-add:before {
   content: "\e7ab";
 }
._icon-font-size:before {
   content: "\e7aa";
 }
._icon-subscript:before {
   content: "\e7a3";
 }
._icon-superscript:before {
   content: "\e7a4";
 }
._icon-list-check:before {
   content: "\f0f5";
 }
._icon-heading-1:before {
   content: "\e7a5";
 }
._icon-clean-format:before {
   content: "\e7a6";
 }
._icon-heading-2:before {
   content: "\e7a7";
 }
._icon-bold:before {
   content: "\e7a8";
 }
._icon-heading-4:before {
   content: "\e7a9";
 }
._icon-italic:before {
   content: "\e7ac";
 }
._icon-link-remove:before {
   content: "\e7ad";
 }
._icon-heading-6:before {
   content: "\e7ae";
 }
._icon-paragraph:before {
   content: "\e7b0";
 }
._icon-code-block:before {
   content: "\e7b3";
 }
._icon-underline:before {
   content: "\e7b6";
 }
._icon-font:before {
   content: "\e7b9";
 }
._icon-heading:before {
   content: "\e7bb";
 }
._icon-text:before {
   content: "\e7bd";
 }
._icon-through:before {
   content: "\e7be";
 }
._icon-heading-3:before {
   content: "\e7bf";
 }
._icon-table:before {
   content: "\e7c2";
 }
._icon-heading-5:before {
   content: "\e7c5";
 }
._icon-code-inline:before {
   content: "\e7ca";
 }
._icon-font-color:before {
   content: "\e7cc";
 }
._icon-npm:before {
   content: "\e7a0";
 }
._icon-npm-f:before {
   content: "\e7a1";
 }
._icon-drag:before {
   content: "\e79e";
 }
._icon-min:before {
   content: "\e79c";
 }
._icon-max:before {
   content: "\e79d";
 }
._icon-instagram-f:before {
   content: "\e79b";
 }
._icon-instagram:before {
   content: "\e87f";
 }
._icon-upload-t:before {
   content: "\e798";
 }
._icon-download-t:before {
   content: "\e799";
 }
._icon-trash-t:before {
   content: "\e79a";
 }
._icon-check-all:before {
   content: "\e797";
 }
._icon-export:before {
   content: "\e765";
 }
._icon-import:before {
   content: "\e8d2";
 }
._icon-pause:before {
   content: "\e7af";
 }
._icon-play:before {
   content: "\e7c3";
 }
._icon-pinterest:before {
   content: "\e794";
 }
._icon-google:before {
   content: "\e816";
 }
._icon-tumblr:before {
   content: "\e796";
 }
._icon-tumblr-f:before {
   content: "\e885";
 }
._icon-pinterest-f:before {
   content: "\e793";
 }
._icon-gitee:before {
   content: "\e7f1";
 }
._icon-gitee-f:before {
  content: "\e782";
}
._icon-github:before {
  content: "\e7f2";
}
._icon-github-f:before {
   content: "\e784";
 }
._icon-google-f:before {
   content: "\ee4f";
 }
._icon-tiktok:before {
   content: "\e790";
 }
._icon-tiktok-f:before {
  content: "\e7f3";
}
._icon-folder-open-f:before {
   content: "\e777";
 }
._icon-folder-open:before {
   content: "\e778";
 }
._icon-qrcode:before {
   content: "\e774";
 }
._icon-star-half:before {
   content: "\e76a";
 }
._icon-warn-o-t:before {
   content: "\e7f0";
 }
._icon-bulb-t:before {
   content: "\e9b9";
 }
._icon-check-t:before {
   content: "\e773";
 }
._icon-arrow-left-t:before {
   content: "\f15d";
 }
._icon-arrow-right-t:before {
   content: "\f15e";
 }
._icon-close-t:before {
   content: "\f162";
 }
._icon-minus-t:before {
   content: "\e766";
 }
._icon-plus-t:before {
   content: "\e767";
 }
._icon-arrow-up-t:before {
   content: "\e768";
 }
._icon-arrow-down-t:before {
   content: "\e769";
 }
._icon-right-t:before {
   content: "\e76b";
 }
._icon-close-o-t:before {
   content: "\e76c";
 }
._icon-check-o-t:before {
   content: "\e76d";
 }
._icon-info-o-t:before {
   content: "\e76e";
 }
._icon-issue-o-t:before {
   content: "\e76f";
 }
._icon-clock-t:before {
   content: "\e770";
 }
._icon-up-t:before {
   content: "\e771";
 }
._icon-down-t:before {
   content: "\e772";
 }
._icon-left-t:before {
   content: "\f161";
 }
._icon-addpic:before {
   content: "\e764";
 }
._icon-cloud-upload-f:before {
   content: "\e762";
 }
._icon-cloud-download-f:before {
   content: "\e763";
 }
._icon-swap:before {
   content: "\e761";
 }
._icon-sort-az-up:before {
   content: "\f048";
 }
._icon-select:before {
   content: "\e760";
 }
._icon-list-ol:before {
   content: "\f03c";
 }
._icon-sort:before {
   content: "\f0c5";
 }
._icon-sort-az-down:before {
   content: "\f0c6";
 }
._icon-sort-amount-down:before {
   content: "\f0c7";
 }
._icon-sort-amount-up:before {
   content: "\f0c8";
 }
._icon-sort-num-down:before {
   content: "\f0ca";
 }
._icon-sort-num-up:before {
   content: "\f0cb";
 }
._icon-street:before {
   content: "\f0e1";
 }
._icon-repair:before {
   content: "\f15c";
 }
._icon-quote-right-f:before {
   content: "\e970";
 }
._icon-quote-left-f:before {
   content: "\e75d";
 }
._icon-quote-right:before {
   content: "\e7f5";
 }
._icon-quote-left:before {
   content: "\e7f6";
 }
._icon-gift:before {
   content: "\e75b";
 }
._icon-gift-f:before {
   content: "\e75c";
 }
._icon-at:before {
   content: "\e758";
 }
._icon-hash:before {
   content: "\e759";
 }
._icon-award:before {
   content: "\e756";
 }
._icon-award-f:before {
   content: "\e757";
 }
._icon-sync:before {
   content: "\e753";
 }
._icon-refresh:before {
   content: "\e754";
 }
._icon-umbrella:before {
   content: "\e751";
 }
._icon-umbrella-f:before {
   content: "\e752";
 }
._icon-slash-h-f:before {
   content: "\e74f";
 }
._icon-slash-f:before {
   content: "\e750";
 }
._icon-slash-h:before {
   content: "\e96f";
 }
._icon-slash:before {
   content: "\e74b";
 }
._icon-redo:before {
   content: "\e749";
 }
._icon-redo-f:before {
   content: "\e74a";
 }
._icon-calendar-f:before {
   content: "\e745";
 }
._icon-calendar:before {
   content: "\e746";
 }
._icon-apply:before {
   content: "\e743";
 }
._icon-apply-f:before {
   content: "\e744";
 }
._icon-bigger:before {
   content: "\e741";
 }
._icon-smaller:before {
   content: "\e742";
 }
._icon-widgets-f:before {
   content: "\e73f";
 }
._icon-widgets:before {
   content: "\e740";
 }
._icon-align-center:before {
   content: "\e737";
 }
._icon-align-right:before {
   content: "\e73c";
 }
._icon-align-justify:before {
   content: "\e73d";
 }
._icon-align-left:before {
   content: "\e73e";
 }
._icon-grid:before {
   content: "\e73a";
 }
._icon-grid-f:before {
   content: "\e73b";
 }
._icon-pull-up:before {
   content: "\e96e";
 }
._icon-pull-down:before {
   content: "\e79f";
 }
._icon-dot-left:before {
   content: "\e733";
 }
._icon-dot-right:before {
   content: "\e734";
 }
._icon-me-f:before {
   content: "\e731";
 }
._icon-me:before {
   content: "\e732";
 }
._icon-home:before {
   content: "\e72f";
 }
._icon-home-f:before {
   content: "\e730";
 }
._icon-tobottom:before {
   content: "\e72d";
 }
._icon-totop:before {
   content: "\e72e";
 }
._icon-printer:before {
   content: "\e72b";
 }
._icon-printer-f:before {
   content: "\e72c";
 }
._icon-zoomin-f:before {
   content: "\e729";
 }
._icon-zoomout-f:before {
   content: "\e72a";
 }
._icon-good-f:before {
   content: "\e725";
 }
._icon-bad-f:before {
   content: "\e726";
 }
._icon-good:before {
   content: "\e727";
 }
._icon-bad:before {
   content: "\e728";
 }
._icon-corner-up-left:before {
   content: "\e721";
 }
._icon-corner-left-down:before {
   content: "\e722";
 }
._icon-corner-up-right:before {
   content: "\e723";
 }
._icon-corner-right-up:before {
   content: "\e724";
 }
._icon-pad:before {
   content: "\e71b";
 }
._icon-pad-f:before {
   content: "\e71c";
 }
._icon-pc:before {
   content: "\e719";
 }
._icon-pc-f:before {
   content: "\e71a";
 }
._icon-qq:before {
   content: "\e716";
 }
._icon-weibo:before {
   content: "\e717";
 }
._icon-wechat:before {
   content: "\e718";
 }
._icon-telephone:before {
   content: "\e713";
 }
._icon-telephone-f:before {
   content: "\e715";
 }
._icon-qq-f:before {
   content: "\e70e";
 }
._icon-weibo-f:before {
   content: "\e70f";
 }
._icon-wechat-f:before {
   content: "\e711";
 }
._icon-facebook:before {
   content: "\e70a";
 }
._icon-twitter:before {
   content: "\e70b";
 }
._icon-facebook-f:before {
   content: "\e70c";
 }
._icon-twitter-f:before {
   content: "\e70d";
 }
._icon-pause-o:before {
   content: "\e6fe";
 }
._icon-play-o:before {
   content: "\e6ff";
 }
._icon-pause-o-f:before {
   content: "\e700";
 }
._icon-play-o-f:before {
   content: "\e701";
 }
._icon-logout-f:before {
   content: "\e9d6";
 }
._icon-logout:before {
   content: "\e6f6";
 }
._icon-login-f:before {
   content: "\e9d5";
 }
._icon-login:before {
   content: "\e6f7";
 }
._icon-cube:before {
   content: "\e6f4";
 }
._icon-cube-f:before {
   content: "\e6f5";
 }
._icon-star:before {
   content: "\e6ee";
 }
._icon-star-f:before {
   content: "\e6ef";
 }
._icon-film:before {
   content: "\e6ea";
 }
._icon-filter:before {
   content: "\e6eb";
 }
._icon-film-f:before {
   content: "\e6ec";
 }
._icon-filter-f:before {
   content: "\e6ed";
 }
._icon-paperplane:before {
   content: "\e6e9";
 }
._icon-paperplane-f:before {
   content: "\e7a2";
 }
._icon-tags:before {
   content: "\e6e7";
 }
._icon-tags-f:before {
   content: "\e6e8";
 }
._icon-nav-v:before {
   content: "\e6e3";
 }
._icon-nav:before {
   content: "\e6e4";
 }
._icon-nav-f:before {
   content: "\e6e5";
 }
._icon-nav-v-f:before {
   content: "\e6e6";
 }
._icon-message-s:before {
   content: "\e6db";
 }
._icon-message-o:before {
   content: "\e6dc";
 }
._icon-message-s-f:before {
   content: "\e6dd";
 }
._icon-message-o-f:before {
   content: "\e6de";
 }
._icon-map:before {
   content: "\e6d5";
 }
._icon-map-f:before {
   content: "\e6d7";
 }
._icon-pin:before {
  content: "\e6d6";
}
._icon-pin-f:before {
  content: "\e6d8";
}
._icon-empty:before {
   content: "\e6d2";
 }
._icon-image:before {
   content: "\e6cd";
 }
._icon-image-f:before {
   content: "\e6ce";
 }
._icon-image-alt-f:before {
   content: "\e6cf";
 }
._icon-clock:before {
   content: "\e6cb";
 }
._icon-clock-f:before {
   content: "\e6cc";
 }
._icon-phone-call:before {
   content: "\e6c4";
 }
._icon-phone-f:before {
   content: "\e6c5";
 }
._icon-phone-call-f:before {
   content: "\e6c6";
 }
._icon-phone:before {
   content: "\e6c2";
 }
._icon-people-f:before {
   content: "\e6c0";
 }
._icon-people:before {
   content: "\e6b5";
 }
._icon-person:before {
   content: "\e6b6";
 }
._icon-person-f:before {
   content: "\e6bb";
 }
._icon-pie-alt-f:before {
   content: "\e6be";
 }
._icon-radio:before {
   content: "\e6b2";
 }
._icon-radio-f:before {
   content: "\e6b3";
 }
._icon-shield:before {
   content: "\e6ae";
 }
._icon-shield-off:before {
   content: "\e6af";
 }
._icon-shield-off-f:before {
   content: "\e6b0";
 }
._icon-shield-f:before {
   content: "\e6b1";
 }
._icon-settings-alt:before {
   content: "\e6aa";
 }
._icon-settings:before {
   content: "\e6ab";
 }
._icon-settings-f:before {
   content: "\e6ac";
 }
._icon-settings-alt-f:before {
   content: "\e6ad";
 }
._icon-bag:before {
   content: "\e6a6";
 }
._icon-cart:before {
   content: "\e6a7";
 }
._icon-bag-f:before {
   content: "\e6a8";
 }
._icon-cart-f:before {
   content: "\e6a9";
 }
._icon-toggle-left:before {
   content: "\e6a2";
 }
._icon-toggle-right:before {
   content: "\e6a3";
 }
._icon-toggle-left-f:before {
   content: "\e6a4";
 }
._icon-toggle-right-f:before {
   content: "\e6a5";
 }
._icon-lock:before {
   content: "\e69e";
 }
._icon-unlock:before {
   content: "\e69f";
 }
._icon-lock-f:before {
   content: "\e6a0";
 }
._icon-unlock-f:before {
   content: "\e6a1";
 }
._icon-email:before {
   content: "\e696";
 }
._icon-music:before {
   content: "\e697";
 }
._icon-email-f:before {
   content: "\e69a";
 }
._icon-music-f:before {
   content: "\e69b";
 }
._icon-link-open:before {
   content: "\e693";
 }
._icon-undo:before {
   content: "\e694";
 }
._icon-undo-f:before {
   content: "\e695";
 }
._icon-share:before {
   content: "\e691";
 }
._icon-share-f:before {
   content: "\e692";
 }
._icon-trash:before {
   content: "\e68d";
 }
._icon-trash-alt:before {
   content: "\e68e";
 }
._icon-trash-f:before {
   content: "\e68f";
 }
._icon-trash-alt-f:before {
   content: "\e690";
 }
._icon-eye-off-f:before {
   content: "\e68c";
 }
._icon-eye-off:before {
   content: "\e689";
 }
._icon-eye:before {
   content: "\e68a";
 }
._icon-eye-f:before {
   content: "\e68b";
 }
._icon-heart:before {
   content: "\e686";
 }
._icon-heart-f:before {
   content: "\e687";
 }
._icon-editing:before {
   content: "\e682";
 }
._icon-edit:before {
   content: "\e683";
 }
._icon-editing-f:before {
   content: "\e684";
 }
._icon-edit-f:before {
   content: "\e685";
 }
._icon-global-f:before {
   content: "\e681";
 }
._icon-global:before {
   content: "\e67e";
 }
._icon-earth:before {
   content: "\e67f";
 }
._icon-earth-f:before {
   content: "\e680";
 }
._icon-bulb:before {
   content: "\e67c";
 }
._icon-bulb-f:before {
   content: "\e67d";
 }
._icon-theme:before {
   content: "\e67a";
 }
._icon-theme-f:before {
   content: "\e67b";
 }
._icon-compass:before {
   content: "\e678";
 }
._icon-compass-f:before {
   content: "\e679";
 }
._icon-bell:before {
   content: "\e674";
 }
._icon-bell-f:before {
   content: "\e677";
 }
._icon-list-ul:before {
   content: "\e66f";
 }
._icon-more:before {
   content: "\e670";
 }
._icon-menu:before {
   content: "\e671";
 }
._icon-more-v:before {
   content: "\e672";
 }
._icon-menu-fold:before {
   content: "\e673";
 }
._icon-menu-unfold:before {
   content: "\e96d";
 }
._icon-pie:before {
   content: "\e66d";
 }
._icon-pie-f:before {
   content: "\e66e";
 }
._icon-options:before {
   content: "\e668";
 }
._icon-options-v:before {
   content: "\e669";
 }
._icon-options-f:before {
   content: "\e66a";
 }
._icon-options-v-f:before {
   content: "\e66b";
 }
._icon-attach:before {
   content: "\e664";
 }
._icon-attach-v:before {
   content: "\e665";
 }
._icon-link:before {
   content: "\e666";
 }
._icon-link-h:before {
   content: "\e667";
 }
._icon-volume-up:before {
   content: "\e65d";
 }
._icon-volume-up-f:before {
   content: "\e661";
 }
._icon-copy:before {
   content: "\e65a";
 }
._icon-copy-f:before {
   content: "\e65b";
 }
._icon-file-remove:before {
   content: "\e645";
 }
._icon-file-add:before {
   content: "\e646";
 }
._icon-file:before {
   content: "\e647";
 }
._icon-file-text:before {
   content: "\e648";
 }
._icon-folder-add:before {
   content: "\e64d";
 }
._icon-folder:before {
   content: "\e64f";
 }
._icon-folder-remove:before {
   content: "\e652";
 }
._icon-file-text-f:before {
   content: "\e653";
 }
._icon-file-add-f:before {
   content: "\e654";
 }
._icon-file-remove-f:before {
   content: "\e655";
 }
._icon-file-f:before {
   content: "\e656";
 }
._icon-folder-add-f:before {
   content: "\e657";
 }
._icon-folder-remove-f:before {
   content: "\e658";
 }
._icon-folder-f:before {
   content: "\e659";
 }
._icon-zoomin:before {
   content: "\e642";
 }
._icon-zoomout:before {
   content: "\e643";
 }
._icon-search:before {
   content: "\e644";
 }
._icon-cloud-download:before {
   content: "\e63e";
 }
._icon-cloud-upload:before {
   content: "\e63f";
 }
._icon-download:before {
   content: "\e640";
 }
._icon-upload:before {
   content: "\e641";
 }
._icon-warn-o:before {
   content: "\e709";
 }
._icon-warn:before {
   content: "\e7d7";
 }
._icon-info-o:before {
   content: "\e636";
 }
._icon-info:before {
   content: "\e7f7";
 }
._icon-issue-o:before {
   content: "\e63b";
 }
._icon-issue:before {
   content: "\e63c";
 }
._icon-warn-o-f:before {
   content: "\e63d";
 }
._icon-info-o-f:before {
   content: "\e64b";
 }
._icon-issue-o-f:before {
   content: "\e650";
 }
._icon-minus-s:before {
   content: "\e62b";
 }
._icon-minus-o:before {
   content: "\e635";
 }
._icon-minus-o-f:before {
   content: "\e649";
 }
._icon-minus-s-f:before {
   content: "\e64a";
 }
._icon-minus:before {
   content: "\e64c";
 }
._icon-plus:before {
   content: "\e627";
 }
._icon-plus-s:before {
   content: "\e628";
 }
._icon-plus-o:before {
   content: "\e629";
 }
._icon-plus-s-f:before {
   content: "\e64e";
 }
._icon-plus-o-f:before {
   content: "\e651";
 }
._icon-backspace:before {
   content: "\e626";
 }
._icon-backspace-f:before {
   content: "\e634";
 }
._icon-corner-down-left:before {
   content: "\e622";
 }
._icon-corner-left-up:before {
   content: "\e623";
 }
._icon-corner-right-down:before {
   content: "\e624";
 }
._icon-corner-down-right:before {
   content: "\e625";
 }
._icon-collapse-v:before {
   content: "\f166";
 }
._icon-expand-h:before {
   content: "\f163";
 }
._icon-left-up:before {
   content: "\e61d";
 }
._icon-left-down:before {
   content: "\e61e";
 }
._icon-right-up:before {
   content: "\e61f";
 }
._icon-right-down:before {
   content: "\e620";
 }
._icon-expand:before {
   content: "\e621";
 }
._icon-collapse:before {
   content: "\e639";
 }
._icon-expand-v:before {
   content: "\f164";
 }
._icon-collapse-h:before {
   content: "\f165";
 }
._icon-check-o-g:before {
   content: "\e61a";
 }
._icon-check-s-g:before {
   content: "\e61b";
 }
._icon-close-s:before {
   content: "\e708";
 }
._icon-close-o:before {
   content: "\e618";
 }
._icon-close-o-f:before {
   content: "\e637";
 }
._icon-close-s-f:before {
   content: "\e638";
 }
._icon-close:before {
   content: "\e63a";
 }
._icon-circle:before {
   content: "\e61c";
 }
._icon-check-o-f:before {
   content: "\e707";
 }
._icon-check-o:before {
   content: "\e706";
 }
._icon-square:before {
   content: "\e705";
 }
._icon-check-s-f:before {
   content: "\e704";
 }
._icon-check:before {
   content: "\e616";
 }
._icon-check-s:before {
   content: "\e617";
 }
._icon-down-double:before {
   content: "\e612";
 }
._icon-left-double:before {
   content: "\e613";
 }
._icon-right-double:before {
   content: "\e614";
 }
._icon-up-double:before {
   content: "\e615";
 }
._icon-code-o:before {
   content: "\e702";
 }
._icon-code-o-f:before {
   content: "\e703";
 }
._icon-code:before {
   content: "\e611";
 }
._icon-right-o-f:before {
   content: "\e619";
 }
._icon-down-o-f:before {
   content: "\e96a";
 }
._icon-left-o-f:before {
   content: "\e96b";
 }
._icon-up-o-f:before {
   content: "\e96c";
 }
._icon-left-o:before {
   content: "\e8f6";
 }
._icon-up-o:before {
   content: "\e967";
 }
._icon-down-o:before {
   content: "\e968";
 }
._icon-right-o:before {
   content: "\e969";
 }
._icon-down:before {
   content: "\e60d";
 }
._icon-left:before {
   content: "\e60e";
 }
._icon-right:before {
   content: "\e60f";
 }
._icon-up:before {
   content: "\e610";
 }
._icon-arrow-left:before {
   content: "\e609";
 }
._icon-arrow-right:before {
   content: "\e60a";
 }
._icon-arrow-down:before {
   content: "\e60b";
 }
._icon-arrow-up:before {
   content: "\e60c";
 }
._icon-triangle-down:before {
   content: "\e605";
 }
._icon-triangle-up:before {
   content: "\e606";
 }
._icon-triangle-right:before {
   content: "\e607";
 }
._icon-triangle-left:before {
   content: "\e608";
 }
._icon-triangle-down-f:before {
   content: "\e630";
 }
._icon-triangle-left-f:before {
   content: "\e631";
 }
._icon-triangle-up-f:before {
   content: "\e632";
 }
._icon-triangle-right-f:before {
   content: "\e633";
 }
._icon-arrow-down-o:before {
   content: "\e601";
 }
._icon-arrow-left-o:before {
   content: "\e602";
 }
._icon-arrow-up-o:before {
   content: "\e603";
 }
._icon-arrow-right-o:before {
   content: "\e604";
 }
._icon-arrow-down-o-f:before {
   content: "\e62c";
 }
._icon-arrow-left-o-f:before {
   content: "\e62d";
 }
._icon-arrow-right-o-f:before {
   content: "\e62e";
 }
._icon-arrow-up-o-f:before {
   content: "\e62f";
 }
._icon-linkedin-f:before {
   content: "\e7da";
 }
._icon-vimeo-f:before {
   content: "\e8b7";
 }
._icon-linkedin:before {
   content: "\e7db";
 }
._icon-twitch:before {
   content: "\e870";
 }
._icon-snapchat-f:before {
   content: "\e7dd";
 }
._icon-twitch-f:before {
   content: "\e8ae";
 }
._icon-spotify:before {
   content: "\e7de";
 }
._icon-youtube:before {
   content: "\e880";
 }
._icon-youtube-f:before {
   content: "\e883";
 }
._icon-reddit:before {
   content: "\e7ef";
 }
._icon-reddit-f:before {
   content: "\ea03";
 }
._icon-telegram:before {
   content: "\e7ed";
 }
._icon-telegram-f:before {
   content: "\f245";
 }
._icon-line:before {
   content: "\e7df";
 }
._icon-discord:before {
   content: "\e7e0";
 }
._icon-spotify-f:before {
   content: "\e7e1";
 }
._icon-line-f:before {
   content: "\e7e4";
 }
._icon-whatsapp-f:before {
   content: "\e8ec";
 }
._icon-discord-f:before {
   content: "\ebf8";
 }
._icon-whatsapp:before {
   content: "\ec2d";
 }
._icon-snapchat:before {
   content: "\e7e5";
 }
._icon-kakaotalk-f:before {
   content: "\eab7";
 }
._icon-kakaotalk:before {
   content: "\eab8";
 }
._icon-threads:before {
   content: "\eae5";
 }
._icon-vimeo:before {
   content: "\eaf1";
 }
._icon-threads-f:before {
   content: "\e7e6";
 }
._icon-ltr:before {
   content: "\e7d8";
 }
._icon-rtl:before {
   content: "\e7d9";
 }
._icon-thumb:before {
  content: "\e7fb";
}
._icon-flip-h:before {
  content: "\e7fa";
}
._icon-flip-v:before {
  content: "\e7f9";
}
._icon-zoom:before {
  content: "\e7f4";
}
._icon-zoom-f:before {
  content: "\e7f8";
}
._icon-rotate-left:before {
  content: "\ece3";
}
._icon-rotate-right:before {
  content: "\ece4";
}
[dir=rtl] {
   ._icon-arrow-left:before {
     content: "\e60a";
   }
   ._icon-arrow-left-o:before {
     content: "\e604";
   }
   ._icon-arrow-left-o-f:before {
     content: "\e62e";
   }
   ._icon-arrow-left-t:before {
     content: "\f15e";
   }
   ._icon-arrow-right:before {
     content: "\e609";
   }
   ._icon-arrow-right-o:before {
     content: "\e602";
   }
   ._icon-arrow-right-o-f:before {
     content: "\e62d";
   }
   ._icon-arrow-right-t:before {
     content: "\f15d";
   }
   ._icon-left-t:before {
     content: "\e76b";
   }
   ._icon-right-t:before {
     content: "\f161";
   }
   ._icon-triangle-left:before {
     content: "\e607";
   }
   ._icon-triangle-left-f:before {
     content: "\e633";
   }
   ._icon-triangle-right:before {
     content: "\e608";
   }
   ._icon-triangle-right-f:before {
     content: "\e631";
   }
   ._icon-left:before {
     content: "\e60f";
   }
   ._icon-left-o:before {
     content: "\e969";
   }
   ._icon-left-o-f:before {
     content: "\e619";
   }
   ._icon-right:before {
     content: "\e60e";
   }
   ._icon-right-o:before {
     content: "\e8f6";
   }
   ._icon-right-o-f:before {
     content: "\e96b";
   }
   ._icon-left-up:before {
     content: "\e61f";
   }
   ._icon-right-up:before {
     content: "\e61d";
   }
   ._icon-corner-up-left:before {
     content: "\e723";
   }
   ._icon-corner-up-right:before {
     content: "\e721";
   }
   ._icon-corner-left-down:before {
     content: "\e624";
   }
   ._icon-corner-right-down:before {
     content: "\e722";
   }
   ._icon-corner-left-up:before {
     content: "\e724";
   }
   ._icon-corner-right-up:before {
     content: "\e623";
   }
   ._icon-corner-down-left:before {
     content: "\e625";
   }
   ._icon-corner-down-right:before {
     content: "\e622";
   }
   ._icon-left-double:before {
     content: "\e614";
   }
   ._icon-right-double:before {
     content: "\e613";
   }
   ._icon-dot-left:before {
     content: "\e734";
   }
   ._icon-dot-right:before {
     content: "\e733";
   }
   ._icon-menu-unfold:before {
     content: "\e673";
   }
   ._icon-menu-fold:before {
     content: "\e96d";
   }
   ._icon-left-up:before {
     content: "\e61f";
   }
   ._icon-right-up:before {
     content: "\e61d";
   }
   ._icon-left-down:before {
     content: "\e620";
   }
   ._icon-right-down:before {
     content: "\e61e";
   }
   [class*=_icon-paperplane],
   [class*=_icon-undo],
   [class*=_icon-redo],
   ._icon-nav,
   ._icon-nav-f,
   ._icon-link-open {
     scale: -1 1;
   }
 }
/*Ajax state*/
/*ajax-state=timeout/abort/error/success/before*/
._ajax-mask {
  position: relative;
  &:before {
    --_spin-bg:var(--_c-prim-sd);
    --_spin-c: var(--_c-prim);
    content: '';
    width: var(--_rem-display);
    margin-inline-start:calc(var(--_rem-display)/-2);
    margin-block-start:calc(var(--_rem-display)/-2);
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    z-index: 9;
    animation: _rotate360 1s linear infinite;
    background: transparent;
    box-sizing: border-box;
    border: .2rem solid var(--_spin-bg,var(--_c-prim));
    border-block-end-color: var(--_spin-c,var(--_c-prim-sd));
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    display: inline-flex;
  }
  &:after {
    content: '';
    background-color: var(--_c-stage-60);
    width: 100%;
    height: 100%;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: 8;
    transition: all var(--_dur-2) linear;
  }
}
/*animation*/
@keyframes _rotate-360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
._rotate-360 {
  animation: _rotate-360 var(--_dur-20) linear both;
}
@keyframes _rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
._rotate360 {
  animation: _rotate360 var(--_dur-20) linear both;
}
._circle-360 {
  animation: _rotate-360 var(--_dur-20) linear infinite both;
}
._circle360 {
  animation: _rotate360 var(--_dur-20) linear infinite both;
}
._rotate-180 {
  transition:rotate var(--_dur-6) var(--_bez-ease);
  rotate:-180deg;
}
._rotate180 {
  transition:rotate var(--_dur-6) var(--_bez-ease);
  rotate:180deg;
}
._rotate-90 {
  transition:rotate var(--_dur-2) var(--_bez-ease);
  rotate:-90deg;
}
._rotate90 {
  transition:rotate var(--_dur-2) var(--_bez-ease);
  rotate:90deg;
}
._rotate-45 {
  transition:rotate var(--_dur-2) var(--_bez-ease);
  rotate:-45deg;
}
._rotate45 {
  transition:rotate var(--_dur-2) var(--_bez-ease);
  rotate:45deg;
}
@keyframes _remind-h {
  0% {
    transform: translateX(2px);
  }
  50% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(2px);
  }
}
@keyframes _remind-v {
  0% {
    transform: translateY(2px);
  }
  50% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(2px);
  }
}
._remind-h {
  animation: _remind-h var(--_dur-9) linear infinite both;
}
._remind-v {
  animation: _remind-v var(--_dur-9) linear infinite both;
}
@keyframes _bounce {
  from,
  20%,
  53%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }
  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
._bounceShow {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  transform-origin: center bottom;
  animation-name: _bounce;
}
@keyframes _flash {
  from,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
._flashShow {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _flash;
}
@keyframes _pulse {
  from,
  50%,
  to {
    transform: scale3d(1, 1, 1);
  }
  25%,
  75% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
}
._pulseShow {
  animation-duration: var(--_dur-3);
  animation-name: _pulse;
  animation-timing-function: ease-in-out;
}
@keyframes _shake {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translate3d(10px, 0, 0);
  }
}
._shakeShow {
  animation-duration: var(--_dur-3);
  animation-name: _shake;
}
@keyframes _fadeIn {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
._fadeIn {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _fadeIn;
}
@keyframes _fadeOut {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
._fadeOut {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _fadeIn;
}
@keyframes _fadeInUp {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
._fadeInUp {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _fadeInUp;
}
@keyframes _fadeOutUp {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  }
}
._fadeOutUp {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _fadeOutUp;
}
@keyframes _fadeInDown {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  from {
    opacity: 0;
    transform: translate3d(0, -20%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
._fadeInDown {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _fadeInDown;
}
@keyframes _fadeOutDown {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -20%, 0);
  }
}
._fadeOutDown {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _fadeOutDown;
}
@keyframes _fadeInStart {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  from {
    opacity: 0;
    transform: translate3d(calc(20%*var(--_dir-coef)), 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
._fadeInStart {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _fadeInStart;
}
@keyframes _fadeOutStart {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(calc(20%*var(--_dir-coef)), 0, 0);
  }
}
._fadeOutStart {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _fadeOutStart;
}
@keyframes _fadeInEnd {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  from {
    opacity: 0;
    transform: translate3d(calc(-20%*var(--_dir-coef)), 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
._fadeInEnd {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _fadeInEnd;
}
@keyframes _fadeOutEnd {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(calc(-20%*var(--_dir-coef)), 0, 0);
  }
}
._fadeOutEnd {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _fadeOutEnd;
}
@keyframes _easeIn {
  0% {
    transform: scale(1,0);
    opacity: 0;
  }
  100% {
    transform: scale(1,1);
    opacity: 1;
  }
}
@keyframes _easeInTop {
  from,
  to {
    transform-origin:center 100%;
  }
  0% {
    transform: scale(1,0);
    opacity: 0;
  }
  100% {
    transform: scale(1,1);
    opacity: 1;
  }
}
@keyframes _easeInBtm {
  from,
  to {
    transform-origin:center 0%;
  }
  0% {
    transform: scale(1,0);
    opacity: 0;
  }
  100% {
    transform: scale(1,1);
    opacity: 1;
  }
}
@keyframes _easeInStart {
  from,
  to {
    transform-origin:calc(100% - 100%*var(--_dir-coef-alt)) center;
  }
  0% {
    transform: scale(0,1);
    opacity: 0;
  }
  100% {
    transform: scale(1,1);
    opacity: 1;
  }
}
@keyframes _easeInEnd {
  from,
  to {
    transform-origin:calc(100%*var(--_dir-coef-alt)) center;
  }
  0% {
    transform: scale(0,1);
    opacity: 0;
  }
  100% {
    transform: scale(1,1);
    opacity: 1;
  }
}
@keyframes _easeOut {
  0% {
    transform: scale(1,1);
    opacity: 1;
  }
  100% {
    transform: scale(1,0);
    opacity: 0;
  }
}
@keyframes _easeOutTop {
  from,
  to {
    transform-origin:center 100%;
  }
  0% {
    transform: scale(1,1);
    opacity: 1;
  }
  100% {
    transform: scale(1,0);
    opacity: 0;
  }
}
@keyframes _easeOutBtm {
  from,
  to {
    transform-origin:center 0%;
  }
  0% {
    transform: scale(1,1);
    opacity: 1;
  }
  100% {
    transform: scale(1,0);
    opacity: 0;
  }
}
@keyframes _easeOutStart {
  from,
  to {
    transform-origin:calc(100% - 100%*var(--_dir-coef-alt)) center;
  }
  0% {
    transform: scale(1,1);
    opacity: 1;
  }
  100% {
    transform: scale(0,1);
    opacity: 0;
  }
}
@keyframes _easeOutEnd {
  from,
  to {
    transform-origin:calc(100%*var(--_dir-coef-alt)) center;
  }
  0% {
    transform: scale(1,1);
    opacity: 1;
  }
  100% {
    transform: scale(0,1);
    opacity: 0;
  }
}
[class*=_easeIn],
[class*=_easeOut]{
  animation-timing-function: var(--_bez-ease);
  animation-duration: var(--_dur-5);
  animation-fill-mode: both;
}
._easeIn{
  animation-name: _easeIn;
}
._easeInBtm{
  animation-name: _easeInBtm;
}
._easeInTop{
  animation-name: _easeInTop;
}
._easeInStart{
  animation-name: _easeInStart;
}
._easeInEnd{
  animation-name: _easeInEnd;
}
._easeOut{
  animation-name: _easeOut;
}
._easeOutBtm{
  animation-name: _easeOutBtm;
}
._easeOutTop{
  animation-name: _easeOutTop;
}
._easeOutStart{
  animation-name: _easeOutStart;
}
._easeOutEnd{
  animation-name: _easeOutEnd;
}
@keyframes _springIn {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  45% {
    transform: scale(1.02);
    opacity: 1;
  }
  80% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}
._springIn {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _springIn;
}
@keyframes _springOut {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(0.98);
  }
  55% {
    transform: scale(1.02);
    opacity: 1;
  }
  100% {
    transform: scale(0.7);
    opacity: 0;
  }
}
._springOut {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _springOut;
}
@keyframes _scaleIn {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
._scaleIn {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _scaleIn;
}
@keyframes _scaleOut {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}
._scaleOut {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _scaleOut;
}
@keyframes _flyInStart {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  0% {
    opacity: 0;
    transform: translate3d(-50%, 50%, 0) rotate(-30deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
._flyInStart {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _flyInStart;
}
[dir=rtl] ._flyInStart {
  animation-name: _flyInEnd;
}
@keyframes _flyOutStart {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, 50%, 0) rotate(-30deg);
  }
}
._flyOutStart {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _flyOutStart;
}
[dir=rtl] ._flyOutStart {
  animation-name:_flyOutEnd;
}
@keyframes _flyInEnd {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  0% {
    opacity: 0;
    transform: translate3d(50%, 50%, 0) rotate(30deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
._flyInEnd {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _flyInEnd;
}
[dir=rtl] ._flyInEnd {
  animation-name: _flyInStart;
}
@keyframes _flyOutEnd {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translate3d(50%, 50%, 0) rotate(30deg);
  }
}
._flyOutEnd {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _flyOutEnd;
}
[dir=rtl] ._flyOutEnd {
  animation-name: _flyOutStart;
}
@keyframes _flyInUp {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  0% {
    opacity: 0;
    transform: translate3d(0%, -100%, 0) rotate(-30deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
._flyInUp {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _flyInUp;
}
@keyframes _flyOutUp {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translate3d(0%, -100%, 0) rotate(-30deg);
  }
}
._flyOutUp {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _flyOutUp;
}
@keyframes _flyInDown {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  0% {
    opacity: 0;
    transform: translate3d(0%, 100%, 0) rotate(30deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
._flyInDown {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _flyInDown;
}
@keyframes _flyOutDown {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translate3d(0%, 100%, 0) rotate(30deg);
  }
}
._flyOutDown {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _flyOutDown;
}
@keyframes _rotateIn {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  0% {
    transform: scale(0.5) rotate(180deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
._rotateIn {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _rotateIn;
}
@keyframes _rotateOut {
  from,
  to {
    animation-timing-function: var(--_bez-ease);
  }
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.5) rotate(180deg);
    opacity: 0;
  }
}
._rotateOut {
  animation-duration: var(--_dur-3);
  animation-fill-mode: both;
  animation-name: _rotateOut;
}
._dur-100 {
  animation-duration: var(--_dur-100);
  transition-duration: var(--_dur-100);
}
._dur-90 {
  animation-duration: var(--_dur-90);
  transition-duration: var(--_dur-90);
}
._dur-80 {
  animation-duration: var(--_dur-80);
  transition-duration: var(--_dur-80);
}
._dur-70 {
  animation-duration: var(--_dur-70);
  transition-duration: var(--_dur-70);
}
._dur-60 {
  animation-duration: var(--_dur-60);
  transition-duration: var(--_dur-60);
}
._dur-50 {
  animation-duration: var(--_dur-50);
  transition-duration: var(--_dur-50);
}
._dur-40 {
  animation-duration: var(--_dur-40);
  transition-duration: var(--_dur-40);
}
._dur-30 {
  animation-duration: var(--_dur-30);
  transition-duration: var(--_dur-30);
}
._dur-20 {
  animation-duration: var(--_dur-20);
  transition-duration: var(--_dur-20);
}
._dur-10 {
  animation-duration: var(--_dur-10);
  transition-duration: var(--_dur-10);
}
._dur-9 {
  animation-duration: var(--_dur-9);
  transition-duration: var(--_dur-9);
}
._dur-8 {
  animation-duration: var(--_dur-8);
  transition-duration: var(--_dur-8);
}
._dur-7 {
  animation-duration: var(--_dur-7);
  transition-duration: var(--_dur-7);
}
._dur-6 {
  animation-duration: var(--_dur-6);
  transition-duration: var(--_dur-6);
}
._dur-5 {
  animation-duration: var(--_dur-5);
  transition-duration: var(--_dur-5);
}
._dur-4 {
  animation-duration: var(--_dur-4);
  transition-duration: var(--_dur-4);
}
._dur-3 {
  animation-duration: var(--_dur-3);
  transition-duration: var(--_dur-3);
}
._dur-2 {
  animation-duration: var(--_dur-2);
  transition-duration: var(--_dur-2);
}
._dur-1 {
  animation-duration: var(--_dur-1);
  transition-duration: var(--_dur-1);
}
._dur-0 {
  animation-duration: var(--_dur-0);
  transition-duration: var(--_dur-0);
}
._loop-1 {
  animation-iteration-count: 1;
}
._loop-2 {
  animation-iteration-count: 2;
}
._loop-3 {
  animation-iteration-count: 3;
}
._loop-4 {
  animation-iteration-count: 4;
}
._loop-5 {
  animation-iteration-count: 5;
}
._loop-6 {
  animation-iteration-count: 6;
}
._loop-7 {
  animation-iteration-count: 7;
}
._loop-8 {
  animation-iteration-count: 8;
}
._loop-9 {
  animation-iteration-count: 9;
}
._loop-10 {
  animation-iteration-count: 10;
}
._loop-inf {
  animation-iteration-count: infinite;
}
/*Media Box*/
._box-image,
._box-audio,
._box-video,
._box-iframe,
._box-qr {
  [rep=title] {
    font-size: var(--_rem-lead);
    font-weight: bold;
    line-height: 1.5em;
    margin-block-end: var(--_rem-space);
  }
  [rep=brief] {
    color: var(--_c-brief);
    line-height: var(--_rem-subtitle);
    margin-block-start: var(--_rem-space);
  }
  [rep=media] {
    text-align: center;
    width: inherit;
  }
}
._box-image,
._box-audio,
._box-video,
._box-iframe {
  width: inherit;
  [rep=media] {
    > * {
      display: block;
      width: inherit;
    }
  }
}
/*Container iframe*/
._box-iframe {
  width: 100%;
  display: flex;
  flex-direction: column;
  [rep=media] {
    flex: auto;
  }
  iframe {
    border: none;
  }
}
/*Container qrCode*/
._box-qr {
  width: inherit;
  [rep=media] {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      min-width: 8rem;
    }
  }
}
/*Tools Box*/
._box-tools {
    --_tools-fs: var(--_rem-body);
    --_tools-g: var(--_rem-min);
    --_tools-h: var(--_rem-list);
    --_tools-w: auto;
    --_tools-r: var(--_r);
    --_tools-m-se: 0;
    --_tools-c: var(--_c-brief);
    --_tools-c-hov: var(--_c-prim);
    --_tools-c-foc: var(--_c-prim);
    --_tools-c-haz: var(--_tools-c);
    --_tools-c-haz-hov: var(--_c-error);
    --_tools-bg: transparent;
    --_tools-bg-hov: transparent;
    --_tools-bg-haz: var(--_tools-bg);
    --_tools-bg-haz-hov: var(--_tools-bg-hov);
    --_tools-o: 1;
    --_tools-o-hov: 1;
    font-size: var(--_tools-fs);
    line-height: var(--_tools-h);
    display: inline-flex;
    flex-wrap: wrap;
    box-sizing: border-box;
  }
._box-tools>* {
    color: var(--_tools-c);
    background-color: var(--_tools-bg);
    width: var(--_tools-w);
    height: var(--_tools-h);
    text-align: center;
    padding: 0 var(--_tools-g);
    margin: auto var(--_tools-m-se);
    box-sizing: border-box;
    border-radius: var(--_tools-r);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: var(--_tools-o);
    transition: all var(--_dur-2) linear;
    &._opened [rep=arrow] {
      rotate: 180deg;
    }
    &:hover{
      opacity: var(--_tools-o-hov);
    }
    &:hover:where(:not([rep=close],[rep=remove])) {
      color: var(--_tools-c-hov);
      background-color: var(--_tools-bg-hov);
    }
    &[rep=close],
    &[rep=remove] {
      color: var(--_tools-c-haz);
      background-color: var(--_tools-bg-haz);
      &:hover,
      &:focus,
      &[focused] {
        color: var(--_tools-c-haz-hov);
        background-color: var(--_tools-bg-haz-hov);
      }
    }
    &:focus:where(:not([rep=close],[rep=remove])),
    &[focused]:where(:not([rep=close],[rep=remove])) {
      color: var(--_tools-c-foc);
      background-color: var(--_tools-bg-hov);
    }
  }
._box-tools [rep=arrow] {
    width: 0;
    height: 0;
    border-width: 3px 3px 0 3px;
    border-style: solid;
    border-color: var(--_c-caption) transparent transparent transparent;
    margin-inline-start: var(--_rem-min);
    transition: all var(--_dur-2) linear;
  }
._box-tools [rep=icon] {
    width: var(--_tools-fs);
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
._box-tools [rep=icon]+[rep=label] {
    margin-inline-start: var(--_rem-min);
  }
._box-tools [rep=disk],
  ._box-tools [rep=cube],
  ._box-tools [rep=image] {
    height: var(--_rem-subtitle);
    display: inline-flex;
  }
._box-tools [rep=disk],
  ._box-tools [rep=cube] {
    aspect-ratio: 1/1;
    img {
      object-fit: cover;
    }
  }
._box-tools [rep=disk] {
    border-radius: 100%;
  }
._box-tools [rep=cube] {
    border-radius: var(--_r);
  }
._box-tools [rep=image] img {
    height: 100%;
  }
._box-tools [rep=disk]+[rep=label],
  ._box-tools [rep=cube]+[rep=label],
  ._box-tools [rep=image]+[rep=label] {
    margin-inline-start: var(--_rem-min);
  }
._box-tools>*[disabled] {
    opacity: var(--_o-disabled);
    user-select: none;
    pointer-events: none;
  }
._box-btns {
  display: inline-flex;
  box-sizing: border-box;
  border-radius: inherit;
  width: inherit;
}
._box-btns>* {
  margin: 0 var(--_g);
}
/*
Last modified: 2025-06-23 17:17:28
*/
/*Bubble footer*/
._bubble-footer {
    --_bubble-foot-p:0;
    overflow-y: hidden;
    &._bubble-footer-wrap {
      border-radius: inherit;
    }
    &:where([layout=left]) ._bubble-footer-wrap,
    &:where([layout=right]) ._bubble-footer-wrap {
      display: flex;
      padding-block:var(--_bubble-foot-p);
      box-sizing: border-box;
      [rep=tips] {
        flex: auto;
      }
    }
    &:where([layout=plain]) ._bubble-footer-wrap {
      border-block-start: 1px solid var(--_c-text-bd);
    }
    &:where([layout=right]) ._bubble-footer-wrap {
      flex-direction: row-reverse;
    }
    ._box-btns {
      display: inline-flex;
    }
    ._box-btns>* {
      margin: 0;
    }
    &:where([layout=center]) ._box-btns,
    &:where([layout=plain]) ._box-btns {
      display: flex;
      justify-content: center;
    }
    &:where([layout=plain]) ._box-btns {
      border-radius: inherit;
    }
    &:where([layout=center]) ._box-btns {
      margin: var(--_rem-display) 0;
    }
    &:where([layout=center]) ._box-btns>* {
      margin: 0 var(--_rem-space);
    }
    &:where([layout=left]) ._box-btns>* {
      margin-inline-end: var(--_rem-space);
    }
    &:where([layout=right]) ._box-btns>* {
      margin-inline-start: var(--_rem-space);
    }
    &:where([layout=plain]) ._box-btns>* {
      border-radius: 0;
      flex: 1;
    }
    &:where([layout=plain]) ._box-btns>*:where(:not(:last-child)) {
      border-inline-end: 1px solid var(--_c-text-bd);
    }
    [rep=tips] {
      font-size: var(--_rem-body);
      line-height: 1.8rem;
      height: var(--_rem-input);
      display: flex;
      align-items: center;
    }
    &:where([layout=center]) [rep=tips],
    &:where([layout=plain]) [rep=tips] {
      border-block-start: 1px solid var(--_c-text-bd);
      border-end-start-radius: inherit;
      border-end-end-radius: inherit;
      background-color: var(--_c-text-bg);
      justify-content: center;
    }
    &:where([layout=left]) [rep=tips] {
      justify-content: flex-end;
      text-align: end;
    }
    &:where([layout=right]) [rep=tips] {
      justify-content: flex-start;
    }
  }
/*Group flex*/
._group-flex {
  --_group-h: var(--_rem-input);
  --_group-fs: var(--_fs-body);
  --_group-c: var(--_c-text);
  --_group-bg: var(--_c-prim);
  --_group-p: var(--_rem-body);
  font-size: var(--_group-fs);
  line-height: var(--_group-h);
  display: flex;
  overflow: auto;
  [rep=label] {
    color: var(--_group-c);
    flex: auto;
    transition: all var(--_dur-2) linear;
  }
  [rep=label]+* {
    margin-inline-start: var(--_rem-space);
  }
  [rep=tips] {
    color: var(--_c-caption);
  }
  [rep=tools]:where(:empty) {
    margin-inline-start: 0;
  }
  [rep=tools]{
    --_tools-c:var(--_group-c);
  }
  [rep=tools]>* {
    font-size: var(--_px-root);
    width: var(--_p);
    padding: 0;
    margin-inline-start: var(--_rem-space);
    opacity: var(--_o-disabled);
    &:hover {
      opacity: 1;
    }
  }
  [rep=remove]:hover {
    color: var(--_c-error);
  }
  &[size=xs] {
    --_group-h: var(--_rem-list);
    --_group-fs: var(--_fs-caption);
  }
  &[size=sm] {
    --_group-h: var(--_rem-display);
    --_group-fs: var(--_fs-caption);
  }
  &[size=md] {
    --_group-h: var(--_rem-input);
  }
  &[size=lg] {
    --_group-h: var(--_rem-hero);
    --_group-p: var(--_rem-body);
  }
}
ul:where(._group-flex),
ol:where(._group-flex) {
  padding-inline-start: 0;
  li:before {
    display: none;
  }
}
._group-flex>* {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  &:where(:not(:last-child)) {
    margin-inline-end: var(--_group-p);
  }
  &:hover [rep=label] {
    color: var(--_group-bg);
  }
  &>[rep=icon],
  &>[rep=disk],
  &>[rep=cube],
  &>[rep=image] {
    margin-inline-end: var(--_rem-min);
  }
  &>[rep=disk],
  &>[rep=cube] {
    height: var(--_rem-subtitle);
    width: var(--_rem-subtitle);
    object-fit: cover;
  }
  &>[rep=disk] {
    border-radius: 100%;
  }
  &>[rep=cube] {
    border-radius: var(--_r);
  }
  &>[rep=image] {
    height: var(--_rem-subtitle);
    object-fit: cover;
  }
  &:where([selected]),
  &:where([selected]) [rep=label] {
    color: var(--_group-bg);
  }
  &:after {
    content: '';
    height: 2px;
    width: 100%;
    background-color: var(--_group-bg);
    transform: translate(calc(-50%*var(--_dir-coef)), 0);
    opacity: 0;
    transition: all var(--_dur-1) linear;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: 0;
  }
  &:where([selected]):after {
    opacity: 1;
  }
  &:where([disabled]) {
    user-select: none;
    pointer-events: none;
    color: var(--_c-caption);
    [rep=label] {
      color: var(--_c-caption);
    }
  }
  &:where([disabled][selected]):after {
    background-color: var(--_c-caption);
  }
}
:where([class*=_bd], [class*=_sd])>._group-flex {
  >*:first-child {
    margin-inline-start: var(--_m);
  }
}
/*Group input*/
._group-input {
  [rep=label] {}
  [rep=content] {
    position: relative;
    ._box-tools {
      --_tools-c:var(--_c-caption);
      --_tools-c-hov: var(--_c-text);
      position: absolute;
      inset-inline-end: var(--_g);
      inset-block-start: calc((var(--_form-h) - var(--_rem-list))/2);
      z-index: 2;
      [rep=icon] {
        font-size: var(--_px-caption);
      }
    }
  }
  [rep=input] {}
  [rep=unit] {}
  [rep=btn] {}
}
/*
Last modified: 2025-06-24 17:28:58
*/
/*Group button*/
[class*="_group-btn"] {
  --_group-r: var(--_r-input);
  display: inline-flex;
  OC-BTN {
    border-radius: 0;
    &:where(:first-child) {
      border-start-start-radius: var(--_group-r);
      border-end-start-radius: var(--_group-r);
    }
    &:where(:last-child) {
      border-start-end-radius: var(--_group-r);
      border-end-end-radius: var(--_group-r);
    }
    &:where(:not(:first-of-type)) {
      margin-inline-start: -1px;
    }
    &:where(:not([disabled])):hover {
      z-index: 2;
    }
    &:where([selected], :focus-within),
    &:has([rep="wrap"]:active) {
      z-index: 3;
    }
  }
  &:where([dividable]) {
    OC-BTN:where(:not(:first-child)):before {
      content: "";
      height: 100%;
      width: 1px;
      background-color: var(--_c-black-16);
      position: absolute;
      inset-block-start: 0;
      z-index: 2;
      inset-inline-start: 0;
    }
  }
}
/*
Last modified: 2025-06-23 13:03:09
*/
/*Group lamp*/
._group-lamp {
  --_group-h: var(--_rem-input);
  --_group-fs: var(--_fs-body);
  --_group-c: var(--_c-text);
  --_group-bg: var(--_c-prim);
  --_group-p: var(--_rem-body);
  font-size: var(--_group-fs);
  display: flex;
  overflow: auto;
  [rep=label] {
    color: var(--_group-c);
    position: relative;
  }
  [rep=tools]:where(:not(:empty)) {
    --_tools-c: var(--_group-c);
    margin-inline-start: var(--_rem-min);
    margin-inline-end: calc(var(--_p)*-1);
  }
  [rep=tools]>* {
    font-size: var(--_px-root);
    width: var(--_p);
    padding: 0;
    opacity: var(--_o-disabled);
    &:hover {
      opacity: 1;
    }
  }
  [rep=remove]:hover {
    color: var(--_c-error);
  }
  &[size=xs] {
    --_group-h: var(--_rem-list);
    --_group-fs: var(--_fs-caption);
    --_group-p: var(--_rem-min);
  }
  &[size=sm] {
    --_group-h: var(--_rem-display);
    --_group-fs: var(--_fs-caption);
    --_group-p: var(--_rem-space);
  }
  &[size=md] {
    --_group-h: var(--_rem-input);
  }
  &[size=lg] {
    --_group-h: var(--_rem-hero);
  }
}
ul:where(._group-lamp),
ol:where(._group-lamp) {
  padding-inline-start: 0;
  li:before {
    display: none;
  }
}
._group-lamp>* {
  color: var(--_group-c);
  line-height: var(--_group-h);
  text-align: center;
  padding: 0 var(--_group-p);
  min-width: 2em;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all var(--_dur-2) linear;
  &:where(:visited) {
    color: var(--_group-c);
  }
  &:where(:not([disabled])) {
    cursor: pointer;
  }
  &:where(:not([disabled])):hover,
  &:where([selected], :focus),
  &:where(:not([disabled])):hover [rep=label],
  &:where([selected], :focus) [rep=label] {
    color: var(--_group-bg);
  }
  &:where(:not(:has([rep=label]))):after,
  &:where(:has([rep=label])) [rep=label]:after {
    content: '';
    height: 2px;
    width: 2em;
    background-color: var(--_c-prim);
    transform: translate(calc(-50%*var(--_dir-coef)), 0) scaleX(0);
    transition: all var(--_dur-2) linear;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: 0;
  }
  &:where([selected]:not(:has([rep=label]))):after,
  &:where([selected]:has([rep=label])) [rep=label]:after {
    transform: translate(calc(-50%*var(--_dir-coef)), 0) scaleX(1);
  }
  &:where([disabled]) {
    opacity: var(--_o-disabled);
  }
  &:where([disabled][selected]:not(:has([rep=label]))):after,
  &:where([disabled][selected]:has([rep=label])) [rep=label]:after {
    background-color: var(--_c-caption);
  }
  &>[rep=icon],
  &>[rep=disk],
  &>[rep=cube],
  &>[rep=image] {
    margin-inline-end: var(--_rem-min);
  }
  &>[rep=disk],
  &>[rep=cube] {
    height: var(--_rem-subtitle);
    width: var(--_rem-subtitle);
    object-fit: cover;
  }
  &>[rep=disk] {
    border-radius: 100%;
  }
  &>[rep=cube] {
    border-radius: var(--_r);
  }
  &>[rep=image] {
    height: var(--_rem-subtitle);
    object-fit: cover;
  }
  [rep=tips] {
    margin-inline-start: var(--_rem-min);
    color: var(--_c-caption);
  }
  OC-BADGE {
    margin-inline-start: var(--_rem-min);
  }
}
/*
Last modified: 2025-06-23 13:03:51
*/
/*Group page*/
._group-page {
  --_group-h: var(--_rem-input);
  --_group-fs: var(--_fs-body);
  --_group-c: var(--_c-text);
  --_group-p: var(--_rem-body);
  font-size: var(--_group-fs);
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  box-shadow: 0 -0.1rem 0 0 var(--_c-text-bd) inset;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  [rep=label] {
    color: var(--_group-c);
    position: relative;
  }
  [rep=tools]:where(:not(:empty)) {
    --_tools-c: var(--_group-c);
    margin-inline-end: calc(var(--_rem-space)*-1);
  }
  [rep=tools]>* {
    font-size: var(--_px-root);
    width: var(--_p);
    padding: 0;
    margin-inline-start: var(--_rem-min);
    opacity: var(--_o-disabled);
    &:hover {
      opacity: 1;
    }
  }
  [rep=remove]:hover {
    color: var(--_c-error);
  }
  &[size=xs] {
    --_group-h: var(--_rem-list);
    --_group-fs: var(--_fs-caption);
    --_group-p: var(--_rem-space);
  }
  &[size=sm] {
    --_group-h: var(--_rem-display);
    --_group-fs: var(--_fs-caption);
  }
  &[size=md] {
    --_group-h: var(--_rem-input);
  }
  &[size=lg] {
    --_group-h: var(--_rem-hero);
  }
}
ul:where(._group-page),
ol:where(._group-page) {
  padding-inline-start: 0;
  li:before {
    display: none;
  }
}
._group-page>* {
  color: var(--_group-c);
  display: inline-flex;
  align-items: center;
  background-color: var(--_c-stage);
  height: var(--_group-h);
  line-height: var(--_group-h);
  padding: 0 var(--_group-p);
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  border-block-start: 1px solid var(--_c-text-bd);
  border-inline-start: 1px solid var(--_c-text-bd);
  border-block-end: 1px solid var(--_c-text-bd);
  transition: all var(--_dur-2) linear;
  &:hover {
    color: var(--_c-prim);
  }
  &:where(:not([disabled])) {
    cursor: pointer;
  }
  &:first-child {
    border-start-start-radius: inherit;
  }
  &:last-child {
    border-start-end-radius: inherit;
    border-inline-end: 1px solid var(--_c-text-bd);
  }
  &:where([selected], :focus-within),
  &:where([selected], :focus-within) [rep=label] {
    color: var(--_c-prim);
  }
  &:where([selected]) {
    border-block-end-color: transparent;
  }
  &:where([disabled]) {
    color: var(--_c-caption);
    cursor: not-allowed;
    user-select: none;
    pointer-events: none;
    [rep=label] {
      color: var(--_c-caption);
    }
  }
  &>[rep=icon],
  &>[rep=disk],
  &>[rep=cube],
  &>[rep=image] {
    margin-inline-end: var(--_rem-min);
  }
  &>[rep=disk],
  &>[rep=cube] {
    height: var(--_rem-subtitle);
    width: var(--_rem-subtitle);
    object-fit: cover;
  }
  &>[rep=disk] {
    border-radius: 100%;
  }
  &>[rep=cube] {
    border-radius: var(--_r);
  }
  &>[rep=image] {
    height: var(--_rem-subtitle);
    object-fit: cover;
  }
  [rep=tips] {
    margin-inline-start: var(--_rem-min);
    color: var(--_c-caption);
  }
  OC-BADGE {
    margin-inline-start: var(--_rem-min);
  }
}
:where([class*=_bd], [class*=_sd])>._group-page {
  background-color: var(--_c-caption-bg);
  >* {
    border-block-start-width: 0;
  }
  >*:first-child {
    border-radius: inherit;
    border-inline-start-width: 0;
  }
  >*:last-child {
    border-radius: 0;
  }
}
/*Bulletin*/
._bullet {
  --_blt-h: var(--_em-input);
  --_blt-lh: var(--_em-subtitle);
  --_blt-p: var(--_em-body);
  --_blt-sz-legend: var(--_em-list);
  --_blt-a-v: center;
  color: var(--_c-text);
  height: var(--_blt-h);
  line-height: var(--_blt-lh);
  display: flex;
  align-items: var(--_blt-a-v);
  box-sizing: border-box;
  transition: all var(--_dur-1) linear;
  position: relative;
  &:where(:not([unpadded])) {
    padding: 0 var(--_blt-p);
  }
  ._bullet-body {
    flex: auto;
    display: flex;
    align-items: var(--_blt-a-v);
    &:has(>[rep=label]) {
      width: 0;
    }
  }
  [rep=label] {
    color: inherit;
    max-width: 100%;
    transition: all var(--_dur-1) linear;
    flex: auto;
  }
  &:where(:not([multiline])) [rep=label] {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  &:where(:not([disabled], [active], [selected], [checked])) [rep=label]:hover,
  &:where(:not(:has([checked]))) [rep=label]:hover {
    color: var(--_c-prim);
  }
  [rep=rank] {
    font-size: var(--_rem-root);
    color: var(--_c-text-aj);
    background-color: var(--_c-stage);
    width: var(--_rem-body);
    aspect-ratio: 1/1;
    line-height: var(--_rem-body);
    margin-inline-end: var(--_rem-space);
    border-radius: var(--_r);
    border: 1px solid var(--_c-text-bd);
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    &:before {
      content: attr(data-value);
    }
    &[data-value="1"] {
      color: var(--_c-white);
      background-color: var(--_c-error);
      border-color: var(--_c-error-dp);
    }
    &[data-value="2"] {
      color: var(--_c-white);
      background-color: var(--_c-issue);
      border-color: var(--_c-issue-dp);
    }
    &[data-value="3"] {
      color: var(--_c-white);
      background-color: var(--_c-prim);
      border-color: var(--_c-prim-dp);
    }
  }
  [rep=arrow],
  [rep=tips] {
    font-size: var(--_px-caption);
    color: var(--_c-caption);
    margin-inline-start: var(--_rem-space);
  }
  OC-BADGE {
    margin-inline-start: var(--_rem-space);
  }
  [rep=icon] {
    width: var(--_rem-subtitle);
    margin-inline-end: var(--_rem-space);
    text-align: center;
  }
  [rep=check] {
    font-size: var(--_rem-caption);
    font-family: var(--_ff-icon);
    margin-inline-start: var(--_rem-space);
    &:before {
      content: 'check';
    }
  }
  [rep=disk],
  [rep=cube],
  [rep=image] {
    height: var(--_blt-sz-legend);
    margin-inline-end: var(--_rem-space);
  }
  &:has(input:checked) {
    color: var(--_c-prim);
  }
  ._bullet-body OC-CHECKBOX,
  ._bullet-body OC-RADIO {
    width: 100%;
    [rep=wrap] {
      width: 100%;
    }
    i {
      margin-inline-end: 0;
      flex: auto;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
  &[selected]:where(:not([disabled])) {
    color: var(--_c-prim);
    [check] {
      color: var(--_c-prim);
    }
    a {
      color: var(--_c-prim);
    }
  }
  &[active]:where(:not([disabled])) {
    color: var(--_c-prim);
    background-color: var(--_c-prim-bg);
    [check] {
      color: var(--_c-prim);
    }
    a {
      color: var(--_c-prim);
    }
  }
  &:has([checked]):where(:not([disabled])),
  &[checked]:where(:not([disabled])) {
    color: var(--_c-prim);
    &:after {
      color: var(--_c-prim);
    }
  }
  &:has([checked]),
  &[checked]:after {
    content: 'check';
    font-family: var(--_ff-icon);
    font-size: var(--_rem-caption);
    margin-inline-start: var(--_rem-space);
  }
  &[disabled] {
    color: var(--_c-caption);
    a {
      color: var(--_c-caption);
    }
  }
  &[hoverable]:where(:not([active], [disabled])):hover {
    background-color: var(--_c-caption-bg);
  }
  &[hoverable]:where([selected], [checked]):hover,
  &[hoverable]:has([checked]):hover {
    background-color: var(--_c-prim-bg);
  }
  &[multiline] {
    --_blt-h: auto;
    --_blt-sz-legend: calc(var(--_blt-lh)*2);
    --_blt-a-v: flex-start;
    margin-block-start: var(--_blt-p);
    margin-block-end: var(--_blt-p);
    ._bullet-body {
      flex-direction: column;
      OC-CHECKBOX,
      OC-RADIO {
        --_chk-h: var(--_blt-h);
        --_chk-lh: var(--_blt-lh);
      }
      OC-CHECKBOX i,
      OC-RADIO i {
        text-overflow: initial;
        white-space: initial;
      }
      OC-CHECKBOX[type=chera],
      OC-RADIO[type=chera] {
        i {
          height: auto;
          line-height: var(--_chk-lh);
          padding-block-start: var(--_em-space);
          padding-block-end: var(--_em-space);
        }
      }
      >[rep=tips] {
        margin-inline-start: 0;
        margin-block-start: var(--_rem-space);
      }
    }
  }
}
@media  (max-width:calc( 600px - 1px)) {
  ._bullet:where(:has(._bullet-body > [rep=tips])) {
    --_blt-h: auto;
    --_blt-a-v: flex-start;
    margin-block-start: var(--_blt-p);
    margin-block-end: var(--_blt-p);
    ._bullet-body {
      flex-direction: column;
    }
    ._bullet-body>[rep=tips] {
      margin-inline-start: 0;
      margin-block-start: var(--_rem-space);
    }
    ._bullet-body>[rep=label]{
      white-space:normal;
    }
  }
}
/*
Last modified: 2025-06-21 23:16:07
*/
/*Card*/
._card {
    --_card-p: var(--_p);
    --_card-g: var(--_rem-space);
    --_card-bg: var(--_c-stage);
    --_card-bd: 1px;
    --_card-r: var(--_r-input);
    --_card-ar: 16/9;
    --_card-scale: 1.05;
    --_card-fw: bold;
    --_card-m:var(--_rem-body);
    background-color: var(--_card-bg);
    border: var(--_card-bd) solid var(--_c-text-bd);
    border-radius: var(--_card-r);
    box-sizing: border-box;
    display: block;
    padding: var(--_card-p);
    position: relative;
    transition: all var(--_dur-2) linear;
    [rep=title] {
    font-size: var(--_rem-lead);
    font-weight: var(--_card-fw);
    margin-block-end: var(--_card-g);
    a {
      --_link-c: var(--_c-text);
      --_link-hov: var(--_c-prim);
    }
    &:hover {
      color: var(--_c-prim);
    }
  }
    [rep=brief] {
    color: var(--_c-brief);
  }
    [rep=byline] {
    color: var(--_c-brief);
    font-size: var(--_rem-caption);
    line-height: var(--_rem-subtitle);
    margin-block-start: var(--_card-g);
    >a {
      --_link-c: var(--_c-brief);
    }
    >* {
      margin-inline-end: var(--_rem-space);
    }
  }
    [rep=poster] {
        --_poster-ar:var(--_card-ar);
        --_poster-d:flex;
        --_poster-r:0;
        overflow: hidden;
    }
    ._card-foot {
        margin-block-start: var(--_card-p);
    }
    [rep=btns] {
        border-block-start: 1px solid var(--_c-text-bd);
        margin-block-end: calc(var(--_card-p)*-1);
        text-align: center;
        line-height: var(--_rem-hero);
        display: flex;
        >* {
            width: 50%;
            padding: 0;
            flex: auto;
            position: relative;
        }
        >*:not(:last-child) {
            border-inline-end: 1px solid var(--_c-text-bd);
        }
        [rep=left] {
            width: 70%;
            text-align: start;
        }
        [rep=right] {
            width: 30%
        }
    }
    [rep=posters]:where(:not(:first-child)),
    [rep=poster]:where(:not(:first-child)){
        margin-block-start: var(--_card-m);
    }
    [rep=posters]:where(:not(:last-child)),
    [rep=poster]:where(:not(:last-child)){
        margin-block-end: var(--_card-m);
    }
    [rep=poster]+[rep=posters] {
        margin-block-start: calc(var(--_card-m)*-1 + 2px);
    }
    &[unpadded] {
        --_card-p: 0;
        --_card-bd:0;
        [rep=poster] {
            --_poster-r: var(--_card-r);
            &:hover > img{
                transform:scale(var(--_card-scale));
            }
        }
    }
    &:where(:not([unpadded])):hover {
        box-shadow: 0 .5rem 1.0rem rgba(0, 0, 0, 0.1);
        [rep=poster] >img {
            transform: scale(var(--_card-scale));
        }
    }
}
/*Comment*/
._comment {
    --_cmt-fs: var(--_px-body);
    --_cmt-m: var(--_rem-body);
    --_cmt-r-media: var(--_r);
    font-size: var(--_cmt-fs);
    ._comment-head {
        line-height: var(--_px-display);
        display: flex;
        align-items: center;
    }
    ._comment-total {
        flex: auto;
        display: flex;
        align-items: center;
        >* {
            margin-inline-end: var(--_rem-body);
        }
    }
    ._comment-sort {
        >[class*=_group-] {
            --_group-h: var(--_px-input);
            --_group-fs: var(--_cmt-fs);
        }
    }
    ._comment-btn {}
    ._comment-body {
        --_cmt-start-w: var(--_px-input);
        --_cmt-start-m: var(--_px-space);
        line-height: var(--_px-list);
    }
    ._comment-wrap {
        display: flex;
    }
    ._comment-item {
        margin: var(--_cmt-m) 0;
        >._comment-wrap>._comment-left {
            margin-inline-end: var(--_cmt-start-m);
            [rep=disk],
            [rep=cube],
            [rep=image] {
                width: var(--_cmt-start-w);
            }
            OC-AVATAR {
                --_avatar-h: var(--_cmt-start-w);
            }
        }
        >._comment-wrap>._comment-right {
            flex: auto;
            >._comment-item:last-of-type {
                margin-block-end: 0;
            }
        }
    }
    ._comment-more {
        font-size: var(--_px-caption);
        color: var(--_c-prim);
        margin-inline-start: calc(var(--_cmt-start-m) + var(--_cmt-start-w));
    }
    ._comment-br {
        height: 1px;
        overflow: hidden;
        background-color: var(--_c-text-bd);
        margin-inline-start: calc(var(--_cmt-start-m) + var(--_cmt-start-w));
    }
    ._comment-item ._comment-br:first-child {
        margin-block-end: var(--_cmt-m);
    }
    ._comment-item ._comment-br:last-child {
        margin-block-start: var(--_cmt-m);
    }
    &[dividable] ._comment-body>._comment-item>._comment-wrap>._comment-right {
        border-block-end: 1px solid var(--_c-text-bd);
        padding-block-end: var(--_cmt-m);
    }
    ._comment-author {
        display: flex;
        align-items: center;
        >._comment-left {
            flex: auto;
            display: flex;
            align-items: center;
            >* {
                margin-inline-end: var(--_px-space);
            }
        }
        ._comment-right {
            color: var(--_c-caption);
            font-size: var(--_px-caption);
            display: flex;
            align-items: center;
            >* {
                margin-inline-start: var(--_rem-space);
            }
        }
        [rep=name] {
            color: var(--_c-text);
            font-weight: bold;
        }
    }
    ._comment-cont {
        line-height: var(--_px-list);
        overflow-wrap: break-word;
        hyphens: auto;
        i,
        u,
        s,
        a,
        span {
            display: inline;
        }
        img,
        video,
        iframe,
        picture {
            border-radius: var(--_cmt-r-media);
        }
        iframe {
            border: 1px solid var(--_c-text-bd);
            background-color: var(--_c-stage);
        }
        video,
        audio,
        iframe,
        picture {
            margin: var(--_px-space) 0;
        }
        /* img{
            display: block;
        } */
    }
    ._comment-byline {
        color: var(--_c-caption);
        font-size: var(--_px-caption);
        line-height: var(--_px-list);
        display: flex;
        align-items: center;
        >._comment-left {
            flex: auto;
            display: flex;
            align-items: center;
            >* {
                margin-inline-end: var(--_rem-space);
            }
        }
        >._comment-right {
            display: flex;
            align-items: center;
            >* {
                margin-inline-start: var(--_rem-space);
            }
        }
    }
    ._comment-body>._comment-item>._comment-wrap>._comment-right {
        --_cmt-start-w: var(--_px-display);
    }
    ._comment-body>._comment-item ._comment-item {
        font-size: var(--_px-caption);
    }
    ._comment-body>._comment-item ._comment-item>._comment-wrap>._comment-left {
        width: var(--_cmt-start-w);
    }
    ._comment-body>._comment-item ._comment-item ._comment-cont {
        line-height: var(--_px-subtitle);
    }
    ._comment-foot {
        color: var(--_c-caption);
        font-size: var(--_px-caption);
        text-align: center;
        padding: var(--_rem-display) 0;
    }
}
/*BreadCrumb*/
._crumb {
  --_crumb-fs: var(--_rem-body);
  --_crumb-m: var(--_rem-space);
  font-size: var(--_crumb-fs);
  [rep=head] {
    color: var(--_c-text-aj);
  }
  [rep=head][class*=icon] {
    margin-inline-end: var(--_crumb-m);
  }
  a {
    color: var(--_c-text-aj);
  }
  a:hover {
    color: var(--_c-prim);
  }
  [rep=label] [class*=icon] {
    width: auto;
    margin-inline-end: var(--_rem-min);
  }
  [rep=hyphen] {
    color: var(--_c-caption);
    text-align: center;
    margin: auto var(--_crumb-m);
    display: inline;
  }
  [rep=hyphen]:where(:not(._char, [class*=icon])) {
    font-size: var(--_rem-caption);
  }
  [rep=hyphen][class*=icon] {
    font-size: 1.0rem;
  }
}
/*
Last modified: 2025-06-23 12:25:29
*/
/*Ellipsis*/
._ell,
._ell-1,
[class*="_ell-"] {
  --_ell-num: 1;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
._ell-hold {
  height: calc(var(--_ell-lh)*var(--_ell-num));
}
._ell-2,
._ell-3,
._ell-3,
._ell-4,
._ell-5,
._ell-6,
._ell-7,
._ell-8,
._ell-9 {
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--_ell-num);
  text-align: start;
}
._ell-2 {
  --_ell-num: 2;
}
._ell-3 {
  --_ell-num: 3;
}
._ell-4 {
  --_ell-num: 4;
}
._ell-5 {
  --_ell-num: 5;
}
._ell-6 {
  --_ell-num: 6;
}
._ell-7 {
  --_ell-num: 7;
}
._ell-8 {
  --_ell-num: 8;
}
._ell-9 {
  --_ell-num: 9;
}
._ell-h1,
._ell-h2,
._ell-h3,
._ell-h4,
._ell-h5,
._ell-h6,
._ell-caption,
._ell-body,
._ell-lead,
._ell-subtitle,
._ell-title,
._ell-hero {
  font-size: var(--_ell-fs);
  line-height: var(--_ell-lh);
}
._ell-h1 {
  --_ell-fs: var(--_fs-h1);
  --_ell-lh: var(--_lh-h1);
}
._ell-h2 {
  --_ell-fs: var(--_fs-h2);
  --_ell-lh: var(--_lh-h2);
}
._ell-h3 {
  --_ell-fs: var(--_fs-h3);
  --_ell-lh: var(--_lh-h3);
}
._ell-h4 {
  --_ell-fs: var(--_fs-h4);
  --_ell-lh: var(--_lh-h4);
}
._ell-h5 {
  --_ell-fs: var(--_fs-h5);
  --_ell-lh: var(--_lh-h5);
}
._ell-h6 {
  --_ell-fs: var(--_fs-h6);
  --_ell-lh: var(--_lh-h6);
}
._ell-caption {
  --_ell-fs: var(--_fs-caption);
  --_ell-lh: var(--_lh-caption);
}
._ell-body {
  --_ell-fs: var(--_fs-body);
  --_ell-lh: var(--_lh-body);
}
._ell-lead {
  --_ell-fs: var(--_fs-lead);
  --_ell-lh: var(--_lh-lead);
}
._ell-subtitle {
  --_ell-fs: var(--_fs-subtitle);
  --_ell-lh: var(--_lh-subtitle);
}
._ell-title {
  --_ell-fs: var(--_fs-title);
  --_ell-lh: var(--_lh-title);
}
._ell-display {
  --_ell-fs: var(--_fs-display);
  --_ell-lh: var(--_lh-display);
}
._ell-hero {
  --_ell-fs: var(--_fs-hero);
  --_ell-lh: var(--_lh-hero);
}
table {
  ._ell,
  [class*="_ell-"] {
    max-width: var(--_table-ell);
  }
}
/*Filter*/
OC-FILTER {
    --_filter-h: var(--_rem-input);
    --_filter-w-head: var(--_rem-max);
    --_filter-lh: var(--_rem-display);
    --_filter-fs: var(--_rem-body);
    --_filter-bg: transparent;
    --_filter-g: 0;
    --_filter-bw: 0;
    --_filter-d: none;
    display: block;
    border: var(--_filter-bw) solid var(--_c-text-bd);
    ._filter-wrap {
        font-size: var(--_filter-fs);
        background-color: var(--_filter-bg);
        box-sizing: border-box;
        position: relative;
        z-index: 3;
    }
    a {
        --_link-c: var(--_c-text);
        --_link-c-hov: var(--_c-prim);
    }
    ._filter-other {
        display: var(--_filter-d);
    }
    section {
        line-height: var(--_filter-lh);
        position: relative;
        padding: calc((var(--_filter-h) - var(--_filter-lh))/2) var(--_filter-g);
        box-sizing: border-box;
        display: flex;
    }
    section [rep=head] {
        color: var(--_c-caption);
        margin-inline-end: var(--_rem-root);
        width: var(--_filter-w-head);
        position: relative;
        height: var(--_filter-lh);
        line-height: calc(var(--_filter-lh)/2);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    section [rep=head]:before {
        content: '';
        width: 1px;
        height: var(--_px-caption);
        background-color: var(--_c-text-bd);
        position: absolute;
        inset-inline-end: 0;
        inset-block-start: calc((var(--_filter-lh) - var(--_px-caption))/2);
    }
    section [rep=body] {
        flex: auto;
        width: 0;
        [disabled] {
            pointer-events: none;
            opacity: var(--_o-disabled);
        }
    }
    section [rep=level1] a {
        padding: 0 var(--_rem-root);
        border-radius: calc(var(--_filter-lh)/2);
    }
    section [rep=level1] a:hover {
        background-color: var(--_c-text-bg);
    }
    section [rep=level1] a[selected] {
        color: var(--_c-white);
        background-color: var(--_c-prim);
    }
    section [rep=level2] {
        font-size: var(--_rem-caption);
        line-height: var(--_rem-list);
        background-color: var(--_c-text-bg);
        padding: var(--_rem-space) var(--_rem-min);
        border-radius: var(--_r-input);
        margin-block-start: var(--_rem-space);
        >* {
            padding: 0 var(--_rem-space);
        }
        a[selected] {
            color: var(--_c-prim);
        }
    }
    ._filter-search {
        [rep=body] {
            display: flex;
            align-items: center;
        }
        OC-SEARCH {}
        [rep=hot] {
            font-size: var(--_rem-caption);
            color: var(--_c-brief);
            margin-inline-start: var(--_rem-body);
            a {
                --_link-c: var(--_c-brief);
                padding: 0 var(--_rem-root);
                border-radius: calc(var(--_filter-lh)/2);
            }
            a:hover {
                background-color: var(--_c-text-bg);
            }
        }
    }
    ._filter-toggle {
        color: var(--_c-caption);
        cursor: pointer;
        [class*=icon] {
            font-size: var(--_px-root);
            margin-inline-start: var(--_px-min);
            transition: all var(--_dur-2) linear;
        }
        &._opened [class*=icon] {
            rotate: 180deg;
        }
    }
    ._filter-banner {
        margin-block-end: var(--_rem-space);
        a {
            display: block;
        }
        picture,
        img {
            display: block;
            width: 100%;
        }
    }
    ._filter-criteria {}
    &[padded] {
        --_filter-g: var(--_rem-body);
        ._filter-banner {
            margin-block-start: var(--_rem-body);
            margin-inline-start: var(--_rem-body);
            margin-inline-end: var(--_rem-body);
        }
        section {
            padding-inline-start: var(--_rem-body);
            padding-inline-end: var(--_rem-body);
        }
        section:first-child:where(:not(._filter-banner)) {
            margin-block-start: var(--_rem-space);
        }
        section:last-child {
            margin-block-end: var(--_rem-space);
        }
    }
    &[bordered] {
        --_filter-bw: 1px;
        padding-block-end: var(--_rem-space);
        &:where(:not(:has(._filter-banner))) {
            padding-block-start: var(--_rem-space);
        }
        section {
            padding-inline-start: var(--_rem-body);
            padding-inline-end: var(--_rem-body);
        }
    }
}
@media  (max-width:calc( 600px - 1px)) {
    OC-FILTER section [rep=level1],
    OC-FILTER section [rep=level2] {
        white-space: nowrap;
        overflow-x: auto;
    }
    OC-FILTER ._filter-search [rep=body] {
        display: block;
    }
    OC-FILTER ._filter-search [rep=hot] {
        margin-block-start: var(--_rem-min);
        margin-inline-start: 0;
    }
}
/*Footer*/
._footer {
  line-height: var(--_lh-subtitle);
  a {
    --_link-c:var(--_c-text);
    --_link-c-hov: var(--_c-prim);
  }
  [rep=signs] {
    display: inline-flex;
    font-size: var(--_rem-caption);
    line-height: var(--_rem-list);
    flex-wrap: wrap;
    >* {
      color: var(--_c-brief);
      flex: auto;
      text-align: center;
      display: inline-flex;
      flex-direction: column;
      img {
        height: var(--_rem-list);
        aspect-ratio: 1/1;
        filter: grayscale(100%);
        transition: all var(--_dur-2) linear;
      }
      &:hover {
        color: var(--_c-text);
        img {
          filter: grayscale(0);
        }
      }
    }
    >*:where(:not(:last-child)) {
      margin-inline-end: var(--_rem-display);
    }
  }
  [rep=qrcode] {
    display: inline-flex;
    flex-direction: column;
    width: auto;
    [rep=title] {
      font-weight: bold;
    }
    [rep=body] {
      display: inline-flex;
      img {
        max-width: var(--_w-label);
        border-radius: var(--_r);
        border: 1px solid var(--_c-black-12);
      }
    }
    [rep=brief] {
      font-size: var(--_rem-caption);
    }
  }
  [rep=subnav] {
    display: inline-flex;
    max-width: 100%;
    >* {
      flex: auto;
      min-width: var(--_w-list);
      [rep=title] {
        font-weight: bold;
      }
    }
  }
  [rep=nav] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    >*:where(:not(:last-child)) {
      margin-inline-end: var(--_rem-display);
    }
  }
  [rep=security] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    >a {
      display: inline-flex;
      &:where(:not(:last-child)) {
        margin-inline-end: var(--_px-space);
      }
    }
    img {
      height: var(--_px-display);
    }
  }
  [rep=icons] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    >:where(:not(:last-child)) {
      margin-inline-end: var(--_rem-body);
      i{
        font-size: var(--_rem-lead);
      }
    }
  }
  [rep=balls] {
    font-size: var(--_rem-body);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    >a {
      color: var(--_c-white);
      background-color: hsl(var(--_h-text), var(--_s-text), 20%);
      height: var(--_rem-display);
      aspect-ratio: 1/1;
      border-radius: 100%;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      &:hover {
        color: hsla(var(--_h-stage), var(--_s-stage), 100%, 0.6);
      }
      &:where(:not(:last-child)) {
        margin-inline-end: var(--_rem-body);
      }
    }
  }
  [rep=contact] {
    display: inline-flex;
    flex-direction: column;
    [rep=title] {
      font-weight: bold;
    }
    [rep=icon] {
      text-align: start;
      width: var(--_rem-list);
    }
  }
  [rep=cprt],
  [rep=ignore] {
    line-height: var(--_rem-list);
    a:hover {
      color: var(--_c-prim);
    }
    img {
      max-height: var(--_rem-subtitle);
      vertical-align: middle;
    }
  }
  [rep=cprt] {
    color: var(--_c-brief);
    a {
      color: var(--_c-brief);
    }
  }
  [rep=ignore] {
    font-size: var(--_rem-caption);
    color: var(--_c-caption);
    a {
      color: var(--_c-caption);
    }
  }
}
@media  (max-width:calc( 600px - 1px)) {
  ._footer {
    [rep=qrcode],
    [rep=subnav],
    [rep=nav],
    [rep=icons],
    [rep=security],
    [rep=balls],
    [rep=signs],
    [rep=subnav],
    [rep=cprt],
    [rep=ignore] {
      display: block;
    }
    [rep=cprt],
    [rep=nav]{
      width: auto;
    }
  }
}
/*Grade*/
._grade {
  --_grade-w: var(--_w-list);
  --_grade-r: var(--_r-input);
  --_grade-g: var(--_rem-space);
  position: relative;
  > [rep=host] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  > [rep=host] [rep=label] {
    position: relative;
  }
  > [rep=host] [rep=arrow] {
    color: var(--_c-caption);
    font-family: var(--_ff-icon);
    font-size: var(--_px-root);
    margin-inline-start: var(--_rem-min);
    transition: all var(--_dur-2) linear;
    &:before {
      content: "down";
    }
  }
  &:where(:not([expanded])) > [rep=host] {
    [rep=label]:after {
      content: '';
      height: 2px;
      width: 2em;
      background-color: var(--_c-prim);
      transform: translate(calc(-50%*var(--_dir-coef)), 0) scaleX(0);
      transition: all var(--_dur-2) linear;
      position: absolute;
      inset-inline-start: 50%;
      inset-block-end: 0;
    }
    [rep=arrow] {
      margin-inline-start: var(--_rem-min);
    }
  }
  &:where([expanded]) > [rep=host] {
    [rep=arrow] {
      order: -10;
      margin-inline-end: var(--_rem-min);
    }
  }
  > ._grade-wrap {
    box-sizing: border-box;
  }
  &:where(:not([expanded])) > ._grade-wrap {
    background-color: var(--_c-stage);
    transform: translateX(calc(-50%*var(--_dir-coef)));
    display: none;
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    z-index: 3;
  }
  &[placement="right"]:where(:not([expanded])) ._grade-wrap {
    inset-block-start: 0;
    inset-inline-start: auto;
    inset-inline-end: calc(var(--_grade-w)*-1 - var(--_rem-space));
    transform: none;
  }
  &[placement="right"]:where(:not([expanded])) ._grade-wrap:before {
    content: "";
    width: 1rem;
    height: var(--_rem-input);
    position: absolute;
    inset-inline-start: -1rem;
    inset-block-start: 0;
  }
  &[placement="bottom-start"]:where(:not([expanded])) ._grade-wrap {
    transform: none;
    inset-inline-start: 0;
  }
  &[placement="bottom-end"]:where(:not([expanded])) ._grade-wrap {
    transform: none;
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  &:where(:not([expanded])) {
    ._grade-wrap,
    ul._grade-wrap ul {
      width: var(--_grade-w);
      box-sizing: border-box;
      border: 1px solid var(--_c-text-bd);
      border-radius: var(--_grade-r);
      > li:first-child > [rep=head] {
        border-top-left-radius: var(--_grade-r);
        border-top-right-radius: var(--_grade-r);
      }
      > li:last-child > [rep=head] {
        border-bottom-left-radius: var(--_grade-r);
        border-bottom-right-radius: var(--_grade-r);
      }
    }
    ._grade-wrap:where(:not(ul)) {
      --_grade-w: var(--_w-drawer);
    }
    ul._grade-wrap li {
      position: relative;
      border-block-end: 1px solid var(--_c-text-bd);
    }
    ul._grade-wrap li:last-child,
    ul._grade-wrap ul li:last-child {
      border-width: 0;
    }
    ul._grade-wrap li ul {
      box-sizing: border-box;
      background-color: var(--_c-stage);
      transform: translate(
        calc(100%*var(--_dir-coef) + var(--_grade-g)*var(--_dir-coef)),
        0%
      );
      position: absolute;
      width: 100%;
      inset-block-start: -0.1rem;
      inset-inline-end: 0;
      display: none;
      &:before {
        content: "";
        position: absolute;
        width: var(--_grade-g);
        height: 100%;
        top: 0;
        inset-inline-start: calc(var(--_grade-g)*-1);
        opacity: 0;
      }
    }
  }
  &:where([expanded]) li {
    margin-inline-start: 2em;
  }
  ul._grade-wrap [rep=head] {
    line-height: var(--_rem-subtitle);
    min-height: var(--_rem-input);
    padding: calc((var(--_rem-input) - var(--_rem-list))/2) var(--_p);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all var(--_dur-1) linear;
  }
  ul._grade-wrap li [rep=arrow] {
    font-family: var(--_ff-icon);
    font-size: var(--_px-root);
    color: var(--_c-caption);
    height: 1em;
    width: 1em;
    line-height: 1em;
    text-align: center;
    transition: all var(--_dur-2) linear;
  }
  &:where(:not([expanded])) ul._grade-wrap li [rep=arrow] {
    margin-inline-end: -1rem;
    margin-inline-start: calc(-1em + 1rem);
    &:before {
      content: "right";
    }
  }
  &:where([expanded]) {
    ul._grade-wrap [rep=head] {
      border-radius: var(--_grade-r);
      display: inline-flex;
      [rep=label] {
        width: auto;
      }
    }
    ul._grade-wrap li [rep=arrow] {
      margin-inline-start: -1.4rem;
      margin-inline-end: calc(1.4rem - 1em);
      order: -10;
      &:before {
        content: "down";
      }
    }
  }
  ul._grade-wrap [rep=label] {
    color: var(--_c-text);
    box-sizing: border-box;
    flex: auto;
    width: 0;
  }
  ul._grade-wrap [rep="icon"],
  ul._grade-wrap [rep="disk"],
  ul._grade-wrap [rep="cube"],
  ul._grade-wrap [rep="image"] {
    margin-inline-end: var(--_rem-min);
  }
  ul._grade-wrap [rep="disk"],
  ul._grade-wrap [rep="cube"],
  ul._grade-wrap [rep="image"] {
    height: var(--_rem-list);
  }
  &:where(:not([expanded])):hover {
    > [rep=host] [rep=arrow] {
      rotate: 180deg;
    }
    > ._grade-wrap {
      display: block;
    }
  }
  &:where(:not([expanded])) {
    ul._grade-wrap li:hover > [rep=head] + ul {
      display: block;
    }
    ul._grade-wrap li:hover > [rep=head] [rep=arrow] {
      rotate: 180deg;
    }
  }
  > [rep=host][selected] {
    color: var(--_c-prim);
  }
  &:where(:not([expanded])) > [rep=host][selected] [rep=label]:after {
    transform: translate(calc(-50%*var(--_dir-coef)), 0) scaleX(1);
  }
  ul._grade-wrap [rep=head]:where(:not([selected], [disabled])):hover {
    color: var(--_c-prim);
    background-color: var(--_c-prim-bg);
    [rep=label] {
      color: var(--_c-prim);
    }
  }
  ul._grade-wrap [rep=head][selected] [rep=arrow] {
    color: rgba(255, 255, 255, var(--_o-active));
  }
  ul._grade-wrap [rep=head][selected],
  ul._grade-wrap [rep=head][selected]:hover {
    color: var(--_c-white);
    background-color: var(--_c-prim);
    [rep=label] {
      color: v var(--_c-white);
    }
  }
  ul._grade-wrap [rep=head][disabled] {
    color: var(--_c-caption);
    [rep=label] {
      color: var(--_c-caption);
    }
  }
}
/*Group grade*/
._group-grade {
  display: inline-flex;
  ._grade {
    margin-inline-start: var(--_m);
    margin-inline-end: var(--_m);
  }
}
[dir="rtl"]
  ._grade:where(:not([expanded]))
  ul._grade-wrap
  li
  [rep=arrow]:before {
  content: "left";
}
/*Group button*/
/*Header*/
OC-HEADER {
  --_header-h: calc(var(--_rem-hero) + 1rem);
  --_header-m: var(--_m);
  --_header-bw: 1px;
  --_header-bc: var(--_c-text-bd);
  --_header-bg: var(--_c-stage);
  --_header-filter: none;
  --_header-g: var(--_rem-display);
  display: block;
  width: 100%;
  position: relative;
  z-index: 710;
  transition: all var(--_dur-2) linear;
  ._header-wrap {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--_header-bg);
    backdrop-filter: var(--_header-filter);
    border-block-end: var(--_header-bw) solid var(--_header-bc);
    transition: all var(--_dur-2) linear;
    display: flex;
    align-items: center;
    flex: auto;
  }
  &[feature=blur] {
    --_header-bg: var(--_c-stage-88);
    --_header-filter: blur(10px);
  }
  &[feature=transparent] {
    --_header-bg: transparent;
    --_header-bw: 0;
  }
  ._header-holder {
    height: var(--_header-h);
    overflow: hidden;
  }
  &:where(:not([inherit]))>._header-wrap {
    position: fixed;
    inset-inline-start: 0;
    inset-block-start: 0;
  }
  &:where([inherit]) {
    ._header-wrap {
      position: inherit;
      inset-inline-start: auto;
      inset-block-start: auto;
    }
    ._header-holder {
      display: none;
    }
  }
  ._header-l,
  ._header-r {
    display: none;
    align-items: center;
    >:where(:not(OC-DEFORM)) {
      height: var(--_rem-input);
      display: inline-flex;
      justify-content: center;
      align-items: center;
      position: relative;
      >[class*=icon] {
        font-size: var(--_rem-subtitle);
        aspect-ratio: 1 / 1;
      }
      >OC-BADGE {
        position: absolute;
        inset-block-end: calc(100% - 1.4rem);
        inset-inline-start: calc(100% - 1.4rem);
      }
    }
  }
  ._header-c {
    box-sizing: border-box;
    flex: auto;
    [class*=_container] {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &:where(:not(:has([class*=_container]))) {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  ._header-head {
    flex: auto;
    margin-inline-start: var(--_header-m);
  }
  ._header-body {
    display: flex;
    align-items: center;
    margin-inline-end: var(--_header-m);
  }
  [rep=logo] {
    height: var(--_header-h);
    transition: all var(--_dur-2) linear;
    vertical-align: middle;
    position: relative;
    display:inline-flex;
    align-items:center;
    img {
      max-width: none;
      height: inherit;
    }
  }
  ._header-c [class*=_container] {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    &>._header-head {
      margin-inline-start: 0;
    }
    &>._header-body {
      margin-inline-end: 0;
    }
  }
  [rep=nav] {
    margin-inline-start: var(--_header-g);
    display: flex;
    justify-content: center;
    align-items: center;
    ._group-lamp {
      --_group-height: var(--_header-h);
    }
    ._grade>[rep=host] {
      line-height: var(--_header-h);
    }
    ._menu[nav] {
      --_menu-h-1st: var(--_header-h);
    }
  }
  [rep=btns] {
    margin-inline-start: var(--_header-g);
  }
  [rep=link] {
    color: var(--_c-text);
    margin-inline-start: var(--_header-g);
    &:hover {
      color: var(--_c-prim);
    }
  }
  [rep=icons] {
    margin-inline-start: var(--_header-g);
    height: var(--_header-h);
    display: inline-flex;
    align-items: center;
  }
  [rep=icons]>* {
    color: var(--_c-text);
    height: var(--_rem-input);
    text-align: center;
    transition: all var(--_dur-2) linear;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    &[class*=icon] {
      font-size: var(--_rem-subtitle);
      aspect-ratio: 1 / 1;
      justify-content: center;
    }
    &[class*=icon] OC-BADGE {
      position: absolute;
      inset-block-end: calc(100% - 1.6rem);
      inset-inline-start: calc(100% - 1.2rem);
    }
  }
  [rep=dropdown] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-inline-start: var(--_header-g);
    &:after {
      content: 'down';
      font-family: var(--_ff-icon);
      font-size: var(--_px-root);
      color: var(--_c-caption);
      margin-inline-start: var(--_g);
      transition: all var(--_dur-2) linear;
    }
    &._opened:after {
      rotate: 180deg;
    }
  }
  [rep=search] {
    margin-inline-start: var(--_header-g);
  }
  [rep=avatar] {
    margin-inline-start: var(--_header-g);
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  &[justify] ._header-head {
    text-align: start;
  }
}
/* 
._header {
  --_header-h: calc(var(--_rem-hero) + 1.0rem);
  --_header-m: var(--_m);
  --_header-g: var(--_rem-display);
  background-color: var(--_c-stage);
  border: 1px solid var(--_c-text-bd);
  @mixin v1-trans-all;
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 610;
  ._header-wrap {
    display: flex;
    align-items: center;
    flex: auto;
  }
  &:where(:not([inherit])) {
    position: fixed;
    inset-inline-start: 0;
    inset-block-start: 0;
  }
  &:where([inherit]) {
    position: inherit;
    inset-inline-start: auto;
    inset-block-start: auto;
    &+._header-holder {
      display: none;
    }
  }
}
 */
/*Post*/
._post {
  --_post-g:var(--_rem-space);
  --_post-ar:4/3;
  --_post-m-img:var(--_m);
  --_post-h-img:11.0rem;
  box-sizing: border-box;
  transition: all var(--_dur-1) linear;
  position: relative;
  display: flex;
  ._post-body {
    flex: auto;
    width: 0;
    position: relative;
  }
  &:has([rep=posters]) {
    flex-direction: column;
    ._post-body {
      width: auto;
    }
  }
  [rep=title] {
    font-size: var(--_rem-lead);
    font-weight: normal;
    margin-block-end: var(--_post-g);
    a {
      --_link-c: var(--_c-text);
      --_link-hov: var(--_c-prim);
    }
    &:hover {
      color: var(--_c-prim);
    }
  }
  [rep=brief] {
    color: var(--_c-brief);
  }
  [rep=byline] {
    color: var(--_c-brief);
    font-size: var(--_rem-caption);
    line-height: var(--_rem-subtitle);
    margin-block-start: var(--_post-g);
    >a {
      --_link-c: var(--_c-brief);
    }
    >* {
      margin-inline-end: var(--_rem-space);
    }
  }
  [rep=poster] {
    --_poster-ar:var(--_post-ar);
    height:var(--_post-h-img);
    overflow: hidden;
  }
  &[tail]:after{
    content:attr(tail);
    color: var(--_c-caption);
    font-size: var(--_rem-caption);
    height: var(--_rem-body);
    line-height: var(--_rem-body);
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: calc(var(--_rem-body)*-1);
  }
  &[head]:before{
    font-weight: bold;
    content:attr(head);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(var(--_rem-list)*-1);
  }
  [rep=poster]:nth-child(1) {
    margin-inline-end: var(--_post-m-img);
  }
  ._post-body~[rep=poster] {
    margin-inline-start: var(--_post-m-img);
  }
  [rep=posters]:nth-child(1) {
    margin-block-end: var(--_post-g);
  }
  ._post-body~[rep=posters] {
    margin-block-start: var(--_post-g);
  }
  [rep=posters] ._grid>* {
    border-radius: var(--_r);
  }
}
/*Spin*/
OC-SPIN {
    --_spin-sz: var(--_rem-display);
    --_spin-c: var(--_c-prim);
    --_spin-bg: var(--_c-prim-sd);
    display: inline-block;
    width: var(--_spin-sz);
    vertical-align: middle;
    animation: _rotate360 1s linear infinite;
    background: transparent;
    box-sizing: border-box;
    border: .2rem solid var(--_spin-bg,var(--_c-prim));
    border-block-end-color: var(--_spin-c,var(--_c-prim-sd));
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    &[size=sm] {
        --_spin-sz: var(--_rem-body);
    }
    &[size=lg] {
        --_spin-sz: var(--_rem-max);
    }
    &[theme=succ] {
        --_spin-c: var(--_c-succ);
        --_spin-bg: var(--_c-succ-sd);
    }
    &[theme=error] {
        --_spin-c: var(--_c-error);
        --_spin-bg: var(--_c-error-sd);
    }
    &[theme=info] {
        --_spin-c: var(--_c-info);
        --_spin-bg: var(--_c-info-sd);
    }
    &[theme=warn] {
        --_spin-c: var(--_c-warn);
        --_spin-bg: var(--_c-warn-sd);
    }
    &[theme=issue] {
        --_spin-c: var(--_c-issue);
        --_spin-bg: var(--_c-issue-sd);
    }
    &[theme=text] {
        --_spin-c: var(--_c-text);
        --_spin-bg: var(--_c-text-sd);
    }
    &[theme=brief] {
        --_spin-c: var(--_c-brief);
        --_spin-bg: var(--_c-brief-sd);
    }
    &[theme=caption] {
        --_spin-c: var(--_c-caption);
        --_spin-bg: var(--_c-caption-sd);
    }
    &[inverted] {
        --_spin-bg: rgba(255, 255, 255, .2);
        --_spin-c: var(--_c-white);
    }
}
button OC-SPIN,
OC-BTN OC-SPIN  {
    --_spin-sz: var(--_rem-body);
}
button:where([type=submit]) OC-SPIN {
    --_spin-bg: rgba(255, 255, 255, .2);
    --_spin-c: var(--_c-white);
}
/*Spin style*/
[class*=_spin-] {
    --_spin-c: var(--_c-prim);
    --_spin-bg: var(--_c-prim-sd);
}
[class*=_spin-]:before {
    content: '';
    animation: _rotate360 1s linear infinite;
    background: transparent;
    box-sizing: border-box;
    border: .2rem solid var(--_spin-bg,var(--_c-prim));
    border-block-end-color: var(--_spin-c,var(--_c-prim-sd));
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    display: inline-flex;
}
[class*=_spin-block],
[class*=_spin-flex] {
    min-height: calc(var(--_rem-display)*3);
    &:before {
        content: '';
        width: var(--_rem-display);
        animation: _rotate360 1s linear infinite;
        background: transparent;
        box-sizing: border-box;
        border: .2rem solid var(--_spin-bg,var(--_c-prim));
        border-block-end-color: var(--_spin-c,var(--_c-prim-sd));
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        display: inline-flex;
    }
}
[class*=_spin-block] {
    display: block;
    position: relative;
    &:before {
        position: absolute;
        inset-inline-start: 50%;
        inset-block-start: 50%;
        margin-inline-start: calc(var(--_rem-display)/-2);
        margin-block-start: calc(var(--_rem-display)/-2)
    }
}
[class*=_spin-flex] {
    display: flex;
    justify-content: center;
    align-items: center;
}
[class*=_spin-inline] {
    min-width: var(--_rem-list);
    min-height: var(--_rem-list);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    &:before {
        content: '';
        width: 1em;
        animation: _rotate360 1s linear infinite;
        background: transparent;
        box-sizing: border-box;
        border: .2rem solid var(--_spin-bg,var(--_c-prim));
        border-block-end-color: var(--_spin-c,var(--_c-prim-sd));
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        display: inline-flex;
    }
}
._spin-block-dk:before,
._spin-flex-dk:before,
._spin-inline-dk:before {
    --_spin-bg: rgba(255, 255, 255, .2);
    --_spin-c: var(--_c-white);
}
/*table*/
._table-wrap {
  --_table-wrap-bc: var(--_c-text-bd);
  --_table-wrap-h: fit-content;
  --_table-wrap-w: auto;
  height: var(--_table-wrap-h);
  width: var(--_table-wrap-w);
  overflow: auto;
  position: relative;
  table {
    border-block-start: none;
    border-block-end: none;
  }
  th ._cell {
    display: flex;
  }
  ._sort-arrow {
    width: var(--_rem-subtitle);
    height: var(--_rem-subtitle);
    text-align: center;
    position: relative;
    &:before {
      position: absolute;
      inset-block-start: calc(var(--_rem-subtitle)/2 - 0.5rem);
      inset-inline-start: calc(var(--_rem-subtitle)/2 - 0.4rem);
    }
    &:after {
      position: absolute;
      inset-block-start: calc(var(--_rem-subtitle)/2 + 0.1rem);
      inset-inline-start: calc(var(--_rem-subtitle)/2 - 0.4rem);
    }
  }
  label~* {
    font-size: var;
    color: var(--_c-text-bg);
    width: var(--_rem-subtitle);
    text-align: center;
    cursor: pointer;
    transition: all var(--_dur-2) linear;
  }
  label~*:hover {
    color: var(--_c-text);
  }
  [order=asc] ._sort-arrow:before {
    border-color: transparent transparent var(--_c-text) transparent;
  }
  [order=desc] ._sort-arrow:after {
    border-color: var(--_c-text) transparent transparent transparent;
  }
}
._table {
  /*  ._avatar {
    margin-block-start: calc((-1*var(--_rem-list) + var(--_rem-biref))/2);
    margin-block-end: calc((-1*var(--_rem-list) + var(--_rem-biref))/2);
  } */
  /* ._b-xs {
    margin-block-start: calc((-1*var(--_rem-list) + var(--_rem-biref))/2);
    margin-block-end: calc((-1*var(--_rem-list) + var(--_rem-biref))/2);
  } */
  /*  ._b-xs._b-seal {
    position: relative;
  } */
  /* 
  ._operate {
    margin-block-start: calc((-1*var(--_rem-list) + var(--_rem-biref))/2);
    margin-block-end: calc((-1*var(--_rem-list) + var(--_rem-biref))/2);
  }
  ._operate [class*=icon] {
    color: var(--_c-caption);
    font-size: 1.4rem;
    height: var(--_rem-list);
    line-height: var(--_rem-list);
    width: var(--_rem-list);
    text-align: center;
    box-sizing: border-box;
    position: relative;
  }
  ._operate [class*=icon]._c-caption {
    cursor: not-allowed;
  }
  ._operate [class*=icon] ._dot {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0
  }
  tbody tr:hover ._operate [class*=icon] {
    color: var(--_c-text-aj);
  }
  tbody tr:hover ._operate [class*=icon]._c-caption {
  }
  ._operate [class*=icon]:hover {
    background-color: var(--_c-stage);
    border: 1px solid var(--_c-text-bd);
    line-height: calc(var(--_rem-list) - .2rem);
    border-radius: var(--_r);
  } 
  ._operate [class*=icon]:hover ._badge {
    inset-inline-end: -0.1rem;
    inset-block-start: -0.1rem
  }
*/
  ._form-input,
  ._form-con {
    width: 100%;
  }
  ._radio._xs,
  ._checkbox._xs,
  select._xs,
  ._form-group._xs,
  td>input._xs {
    margin-block-start: calc((-1*var(--_rem-list) + var(--_rem-biref))/2);
    margin-block-end: calc((-1*var(--_rem-list) + var(--_rem-biref))/2);
  }
  ._select._xs+span {
    margin-block-start: calc((-1*var(--_rem-list) + var(--_rem-biref))/2 - 0.4rem);
    margin-block-end: calc((-1*var(--_rem-list) + var(--_rem-biref))/2);
  }
  ._select,
  select {
    width: 12.0rem;
  }
  th>input[type=text],
  td>input[type=text],
  th>input[type=password],
  td>input[type=password] {
    width: 12.0rem;
    max-width: 100%;
  }
  td>input[type=text][editing] {
    background: transparent;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 2px var(--_c-prim);
    border-radius: 0;
    border: none;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
  }
  td>textarea[editing] {
    background: transparent;
    width: calc(100% + 2rem);
    margin: -1rem;
    box-shadow: inset 0 0 0 2px var(--_c-prim);
    border-radius: 0;
    border: none;
  }
  ._form-group ._col {
    width: auto;
  }
}
._table-wrap {
  &:where(:not(:has([lines=inner]))) {
    border-block-start: 1px solid var(--_table-wrap-bc);
    border-block-end: 1px solid var(--_table-wrap-bc);
  }
  &:where(:has([lines=all])) {
    border-inline-start: 1px solid var(--_table-wrap-bc);
    table {
      border-inline-start: 0;
    }
  }
  &:where(:has([lines=outer])) {
    border-inline-start: 1px solid var(--_table-wrap-bc);
    border-inline-end: 1px solid var(--_table-wrap-bc);
    table {
      border-inline-start: 0;
      border-inline-end: 0;
    }
  }
  &:where([fixed*=head]) thead tr:last-child {
    border: none;
  }
  &:where([fixed*=head]) thead th {
    background-color: var(--_c-stage);
    box-shadow: inset 0 -1px 0 0 var(--_table-wrap-bc);
    position: sticky;
    inset-block-start: 0;
    z-index: 3;
  }
  &:where([fixed*=head]) tbody tr:last-child {
    border-block-end: 1px solid var(--_table-wrap-bc);
  }
  &:where(:has([lines=all])[fixed*=head]) thead th {
    box-shadow: inset 0 -1px 0 0 var(--_table-wrap-bc), inset calc(-1px*var(--_dir-coef)) 0 0 0 var(--_table-wrap-bc);
  }
  &:where([fixed*=left]) th:first-child,
  &:where([fixed*=left]) td:first-child {
    background-color: var(--_c-stage);
    box-shadow: inset calc(-1px*var(--_dir-coef)) 0 0 0 var(--_table-wrap-bc);
    position: sticky;
    inset-inline-start: 0;
    z-index: 3;
  }
  &:where(:has([stripe])[fixed*=left]) tbody tr:nth-child(odd) td:first-child {
    background-color: var(--_c-caption-bg);
  }
  &:where(:has([stripe])[fixed*=left]) tbody tr[selected] td:first-child {
    background-color: var(--_c-prim-bg);
  }
  &:where(:has([hoverable])[fixed*=left]) tbody tr:not([selected]):hover td:first-child {
    background-color: var(--_table-wrap-bc);
  }
  &:where([fixed*=right]) th:last-child,
  &:where([fixed*=right]) td:last-child {
    background-color: var(--_c-stage);
    position: sticky;
    inset-inline-end: 0;
    z-index: 3;
  }
  &:where([fixed*=right]) th:last-child:before,
  &:where([fixed*=right]) td:last-child:before {
    content: '';
    width: 1px;
    height: 100%;
    background-color: var(--_table-wrap-bc);
    position: absolute;
    inset-inline-start: -1px;
    inset-block-start: 0;
  }
  &:where(:has([stripe])[fixed*=right]) tbody tr:nth-child(odd) td:last-child {
    background-color: var(--_c-caption-bg);
  }
  &:where(:has([stripe])[fixed*=right]) tbody tr[selected] td:last-child {
    background-color: var(--_c-prim-bg);
  }
  &:where(:has([hoverable])[fixed*=right]) tbody tr:not([selected]):hover td:last-child {
    background-color: var(--_table-wrap-bc);
  }
  &:where([fixed*=head][fixed*=left]) tr th:first-child {
    box-shadow: inset 0 -1px 0 0 var(--_table-wrap-bc), inset calc(-1px*var(--_dir-coef)) 0 0 0 var(--_table-wrap-bc);
    z-index: 4;
  }
  &:where([fixed*=head][fixed*=right]) tr th:last-child {
    z-index: 4;
  }
  &:where([fixed*=head][fixed*=right]) tr th:last-child:before {
    content: '';
    width: 1px;
    height: 100%;
    background-color: var(--_table-wrap-bc);
    position: absolute;
    inset-inline-start: -1px;
    inset-block-start: 0;
  }
  *[fixed] {
    position: sticky;
    z-index: 3;
  }
  &[fixed*=head] *[fixed] {
    z-index: 4;
  }
}
._table-tools {
  display: flex;
  [toolsleft] {}
  [toolsright] {
    text-align: end;
    flex: auto;
  }
  [toolsright]>a,
  [toolsright]>._btn-group {
    margin-inline-start: .8rem;
  }
  ._table-search {
    width: 20rem;
  }
  ._table-search ._form-input,
  ._table-search ._form-con {
    width: 100%
  }
  ._table-button {}
}
/*
 *Last modified: 2025-07-20 23:24:02
 */
/*Wall*/
._wall,
[class*=_wall-] {
  --_wall-ar: 1/1;
  --_wall-fs: var(--_rem-caption);
  --_wall-c: var(--_c-white);
  --_wall-bg: var(--_c-text-bg);
  --_wall-mask: var(--_c-black-60);
  --_wall-r: 0;
  >* {
    aspect-ratio: var(--_wall-ar);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: var(--_wall-bg);
    border-radius: var(--_wall-r);
    box-sizing: border-box;
    position: relative;
    >img {
      width: 100%;
      height: 100%;
      border-radius: inherit;
      object-fit: cover;
      transition: all var(--_dur-2) linear;
      &[src=""] {
    display: none;
  }
    }
    &:has(>img[src=""]):after {
      color: var(--_c-caption);
      content: "issue";
      font-family: var(--_ff-icon);
      font-size: var(--_rem-display);
    }
  }
  [rep=title] {
    color: var(--_wall-c);
    font-size: var(--_wall-fs);
    background-color: var(--_wall-mask);
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
    box-sizing: border-box;
    line-height: var(--_rem-subtitle);
    width: 100%;
    text-align: center;
    padding: var(--_rem-space);
    transition: all var(--_dur-2) linear;
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    z-index: 3;
  }
  &:where(:not(._wall-sticky)) [rep=title] {
    transform: translateY(100%);
  }
  [rep=tools] {
    transition: all var(--_dur-2) linear;
    position: absolute;
    z-index: 2;
    >* {
      --_tools-c: var(--_c-white);
      --_tools-c-hov: var(--_c-white);
    }
  }
  &:where(._wall-sticky) [rep=tools] {
    text-align: end;
    line-height: var(--_rem-list);
    display: inline-flex;
    inset-inline-end: var(--_rem-space);
    inset-block-start: var(--_rem-space);
  }
  &:where(:not(._wall-sticky)) [rep=tools] {
    background-color: var(--_wall-mask);
    width: 100%;
    aspect-ratio: 1/1;
    text-align: center;
    opacity: 0;
    inset-inline-start: 0;
    inset-block-start: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    ._box-tools>* {
      margin: auto var(--_rem-min);
    }
  }
  [rep=tags] {
    width: 80%;
    padding-block-start: var(--_rem-space);
    padding-block-end: 0;
    padding-inline-start: var(--_rem-space);
    padding-inline-end: 0;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    >* {
      margin-inline-end: var(--_rem-min);
      margin-block-end: var(--_rem-min);
    }
  }
  [rep=icon] {
    font-size: var(--_rem-subtitle);
    color: var(--_c-white);
    line-height: 1em;
    position: absolute;
    inset-inline-end: var(--_rem-body);
    inset-block-start: var(--_rem-body);
    z-index: 1;
  }
  [rep=text],
  [rep=tips],
  [rep=more],
  ._hide-clip {
    color: var(--_c-white);
    background-color: var(--_wall-mask);
    border-radius: inherit;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: var(--_p);
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: 2;
  }
  [rep=text],
  [rep=tips],
  [rep=more] {
    display: flex;
  }
  [rep=text] {
    align-items: flex-start;
  }
  [rep=tips],
  [rep=more],
  ._hide-clip {
    line-height: var(--_rem-subtitle);
    align-items: center;
  }
  [rep=tips] {
    font-size: var(--_rem-caption);
  }
  [rep=count] {
    font-size: var(--_rem-caption);
    color: var(--_c-white);
    background-color: var(--_wall-mask);
    line-height: var(--_rem-subtitle);
    padding: 0 var(--_rem-min);
    border-radius: var(--_r);
    position: absolute;
    inset-inline-start: var(--_rem-space);
    inset-block-end: var(--_rem-space);
    z-index: 2;
  }
  &:where(:not(._wall-sticky))>*:hover {
    [rep=title] {
      transform: translateY(0);
    }
    [rep=tools] {
      opacity: 1;
    }
  }
}
/*Field container*/
OC-FIELD {
  --_form-h: var(--_rem-input);
  --_form-p-input: var(--_rem-space);
  --_form-p-se: 0;
  --_form-p-tb: 0;
  --_form-m-tb: var(--_m);
  --_form-m-label: var(--_rem-space);
  --_form-bw: 1px;
  --_form-w-label: auto;
  --_form-w-cont: var(--_w-input);
  --_form-a: flex-start;
  --_form-d: grid;
  --_form-g: var(--_rem-space);
  width: inherit;
  margin: var(--_form-m-tb) auto;
  padding: var(--_form-p-tb) var(--_form-p-se);
  display: var(--_form-d);
  grid-template-columns: var(--_form-w-cont) 1fr;
  grid-template-areas: "a a" "b c";
  column-gap: var(--_form-g);
  position: relative;
  box-sizing: border-box;
  &:where(:not(:has(>._field-help))) {
    grid-template-columns: var(--_form-w-cont);
    grid-template-areas: "a" "b";
  }
  >._field-label {
    color: var(--_c-text);
    width: var(--_form-w-label);
    height: var(--_form-h);
    line-height: calc(var(--_form-h)/2);
    display: flex;
    justify-content: var(--_form-a);
    align-items: center;
    grid-area: a;
    >img,
    >[class*=icon],
    >[rep=icon],
    >[rep=disk],
    >[rep=cube],
    >[rep=image] {
      width: var(--_rem-subtitle);
      margin-inline-end: var(--_rem-min);
    }
    &:emtpy {
      display: none;
    }
  }
  >._field-cont {
    display: inline-flex;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
    grid-area: b;
    >._field-note {
      font-size: var(--_rem-caption);
      line-height: var(--_rem-subtitle);
      width: 100%;
      padding-block-start: var(--_rem-space);
    }
    >._field-input {
      width: 100%;
      min-height: var(--_form-h);
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      position: relative;
      input:where(:not([embed]):not([type=radio], [type=checkbox], [type=range], [type=reset], [type=submit])) {
        height: var(--_form-h);
        line-height: var(--_form-h);
      }
      input:where(:not([embed]):not([type=radio], [type=checkbox], [type=range], [type=color], [type=reset], [type=submit])) {
        padding: 0 var(--_form-p-input);
      }
      input:where([type=file]:not([embed]))::file-selector-button,
      input:where([type=file]:not([embed]))::-webkit-file-upload-button {
        line-height: calc(var(--_form-h) - 0.2rem);
      }
      input:where([type=range]:not([embed])) {
        margin: calc((var(--_form-h) - var(--_range-h))/2) 0;
      }
      >label {
        line-height: var(--_form-h);
        white-space: nowrap;
      }
      meter {
        margin: calc((var(--_form-h) - var(--_meter-h))/2) 0;
      }
      progress {
        margin: calc((var(--_form-h) - var(--_prog-h))/2) 0;
      }
      select:where(:not([embed])) {
        height: var(--_form-h);
        line-height: var(--_form-h);
        option {
          height: var(--_form-h);
        }
      }
      select:where([multiple]:not([embed])) {
        min-height: calc((var(--_form-h) + 1px)*5 - 1px);
      }
      textarea:where(:not([embed])) {
        --_field-p-tb: calc((var(--_form-h) - var(--_rem-list))/2);
        padding-inline-start: var(--_form-p-input);
        padding-inline-end: var(--_form-p-input);
      }
      input:where(:not([embed]):not([type=radio], [type=checkbox], [type=color], [type=submit], [type=reset])),
      select:where(:not([embed])),
      textarea:where(:not([embed])),
      progress,
      meter {
        min-width: auto;
        width: 100%;
      }
      >OC-INPUT {
        --_input-w: 100%;
      }
      >OC-FILE {
        --_file-w: 100%;
      }
      >OC-TEXTAREA {
        --_tarea-w: 100%;
      }
      >OC-DATETIME {
        --_date-w: 100%;
        ._datetime:where([display=inline]) {
          --_date-panel-w: 100%;
          width: 100%;
        }
      }
      >OC-NUMBER {
        --_number-w: 100%;
      }
      >OC-SEARCH {
        --_srch-w: 100%;
      }
      >OC-RANGE {
        --_range-w: 100%;
      }
      >OC-SELECT {
        --_select-w: 100%;
      }
      >OC-RADIOS,
      >OC-CHECKBOXES {
        width: 100%;
      }
      >OC-UPLOAD {
        width: 100%;
      }
    }
    ._field-unit {
      font-size: var(--_px-caption);
      color: var(--_c-brief);
      background-color: var(--_c-stage);
      line-height: calc(var(--_rem-list) + 0.2rem);
      height: var(--_rem-list);
      position: absolute;
      inset-inline-end: var(--_rem-space);
      inset-block-start: calc((var(--_form-h) - var(--_rem-list))/2);
      pointer-events: none;
    }
    &:has(>._box-tools)>._field-input textarea:where(:not([embed])) {
      padding-inline-end: var(--_rem-list);
    }
    >._box-tools {
      --_tools-c: var(--_c-caption);
      --_tools-c-hov: var(--_c-text);
      position: absolute;
      inset-inline-end: var(--_rem-min);
      inset-block-start: calc((var(--_form-h) - var(--_rem-list))/2);
      z-index: 2;
      [rep=icon] {
        font-size: var(--_px-caption);
      }
    }
    &:has(>._field-input>textarea) ._box-tools {
      flex-direction: column;
      inset-inline-end: var(--_rem-min);
    }
  }
  >._field-help {
    display: inline-flex;
    align-items: center;
    line-height: var(--_form-h);
    height: var(--_form-h);
    grid-area: c;
    >*:where(:not(:first-child)) {
      margin-inline-start: var(--_form-p-input);
    }
    [rep=text] {
      line-height: calc(var(--_form-h)/2);
      height: var(--_form-h);
      display: inline-flex;
      align-items: center;
    }
    [rep=disk],
    [rep=cube],
    [rep=image] {
      height: var(--_form-h);
      display: inline-flex;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
      }
    }
    [rep=disk],
    [rep=cube] {
      aspect-ratio: 1/1;
    }
    [rep=image],
    [rep=cube] {
      border-radius: var(--_r-input);
    }
    [rep=disk] {
      border-radius: 100%;
    }
  }
  &:where([flexible]:not([type])),
  &:where([flexible][type='']) {
    &:where(:has(>._field-help)) {
      grid-template-columns: 1fr auto;
    }
    &:where(:not(:has(>._field-help))),
    &:where(:has(>._field-help:empty)) {
      grid-template-columns: 1fr;
      grid-template-areas: "a" "b";
    }
  }
}
OC-FIELD:where(:not([type=compact])) {
  >._field-help OC-BTN:where(:not([size])),
  >._field-help OC-BTN:where([size=""]) {
  }
}
OC-FIELD:where([type=fixed]) {
  --_form-a: flex-end;
  --_form-w-label: var(--_w-label);
  &:where(:has(>._field-label:not(:empty)):has(>._field-help:not(:empty))) {
    grid-template-columns: var(--_form-w-label) var(--_form-w-cont) 1fr;
    grid-template-areas: "a b c";
  }
  &:where(:has(>._field-label):not(:has(>._field-help))),
  &:where(:has(>._field-label):has(>._field-help:empty)) {
    grid-template-columns: var(--_form-w-label) var(--_form-w-cont);
    grid-template-areas: "a b";
  }
  &:where(:has(>._field-help):not(:has(>._field-label))),
  &:where(:has(>._field-help):has(>._field-label:empty)) {
    grid-template-columns: var(--_form-w-cont) 1fr;
    grid-template-areas: "b c";
  }
  &[flexible] {
    &:where(:has(>._field-label:not(:empty)):has(>._field-help:not(:empty))) {
      grid-template-columns: var(--_form-w-label) 1fr auto;
    }
    &:where(:has(>._field-label):not(:has(>._field-help))),
    &:where(:has(>._field-label):has(>._field-help:empty)) {
      grid-template-columns: var(--_form-w-label) 1fr;
    }
    &:where(:has(>._field-help):not(:has(>._field-label))),
    &:where(:has(>._field-help):has(>._field-label:empty)) {
      grid-template-columns: 1fr auto;
    }
  }
}
OC-FIELD:where([type=embed]) {
  --_form-a: flex-start;
  --_form-d: flex;
  --_form-w-label: var(--_w-label);
  >._field-label {
    padding-inline-start: var(--_form-p-input);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: 3;
    pointer-events: none;
  }
  >._field-cont {
    width: var(--_form-w-cont);
  }
  &[flexible]>._field-cont {
    flex: auto;
  }
  >._field-cont>._field-input {
    input:where(:not([embed]):not([type=radio], [type=checkbox], [type=range], [type=reset], [type=submit])),
    textarea:where(:not([embed])) {
      padding-inline-start: calc(var(--_form-w-label) + var(--_form-p-input));
    }
  }
}
OC-FIELD:where([type=full]) {
  --_form-w-cont: 0;
  --_form-a: flex-start;
  &:where(:has(>._field-label:not(:empty)):has(>._field-help:not(:empty))) {
    grid-template-columns: var(--_form-w-label) 1fr auto;
    grid-template-areas: "a b c";
  }
  &:where(:has(>._field-label):not(:has(>._field-help))),
  &:where(:has(>._field-label):has(>._field-help:empty)) {
    grid-template-columns: var(--_form-w-label) 1fr;
    grid-template-areas: "a b";
  }
  &:where(:has(>._field-help):not(:has(>._field-label))),
  &:where(:has(>._field-help):has(>._field-label:empty)) {
    grid-template-columns: 1fr auto;
    grid-template-areas: "b c";
  }
  >._field-label {
    max-width: var(--_w-label);
  }
  >._field-cont {
    flex: auto;
  }
}
OC-FIELD:where([type=apart]) {
  --_form-m-tb: 0;
  --_form-w-cont: auto;
  --_form-a: flex-start;
  &:where(:has(>._field-label:not(:empty)):has(>._field-help:not(:empty))) {
    grid-template-columns: 1fr auto;
    grid-template-areas: "a c" "b b";
  }
  &:where(:has(>._field-label):not(:has(>._field-help))),
  &:where(:has(>._field-label):has(>._field-help:empty)) {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b";
  }
  &:where(:has(>._field-help):not(:has(>._field-label))),
  &:where(:has(>._field-help):has(>._field-label:empty)) {
    grid-template-columns: 1fr;
    grid-template-areas: "c" "b";
  }
  >._field-help {
    OC-BTN:where(:not([size])) {
      --_btn-h: min(calc(var(--_form-h) - 1rem), var(--_rem-display));
    }
    OC-BTN {
      --_btn-r: var(--_r-input-sm);
      --_btn-fs: var(--_rem-caption);
    }
    [rep=disk],
    [rep=image],
    [rep=cube] {
      height: min(calc(var(--_form-h) - 1rem), var(--_rem-display));
    }
    [rep=image],
    [rep=cube] {
      border-radius: var(--_r-input-sm);
    }
  }
}
OC-FIELD:where([type=compact]) {
  --_form-p-input: 0;
  --_form-m-tb: 0;
  --_form-p-tb: var(--_rem-space);
  --_form-p-se: var(--_rem-body);
  --_form-w-cont: auto;
  --_form-a: flex-start;
  --_form-w-label: auto;
  border-block-start: var(--_form-bw) solid var(--_c-text-bd);
  margin: 0;
  &:where(:has(>._field-label:not(:empty)):has(>._field-help:not(:empty))) {
    grid-template-columns: var(--_form-w-label) 1fr auto;
    grid-template-areas: "a b c";
  }
  &:where(:has(>._field-label):not(:has(>._field-help))),
  &:where(:has(>._field-label):has(>._field-help:empty)) {
    grid-template-columns: var(--_form-w-label) 1fr;
    grid-template-areas: "a b";
  }
  &:where(:has(>._field-help):not(:has(>._field-label))),
  &:where(:has(>._field-help):has(>._field-label:empty)) {
    grid-template-columns: 1fr auto;
    grid-template-areas: "b c";
  }
  >._field-label {
    max-width: var(--_w-label);
  }
  >._field-cont {
    flex: auto;
    >._box-tools {
      inset-inline-end: 0;
    }
    ._field-unit {
      inset-inline-end: 0;
      background-color: transparent;
    }
    >._field-input {
      input:where(:not([embed]):not([type=radio], [type=checkbox], [type=range], [type=reset], [type=submit])),
      select:where(:not([embed])),
      select:where(:not([embed])) option {
        padding: 0;
      }
      textarea:where(:not([embed])) {
        padding-inline-start: 0;
        padding-inline-end: 0;
      }
      input:where(:not([embed]):not([type=radio], [type=checkbox], [type=range], [type=reset], [type=submit], [type=color])),
      select:where(:not([embed])),
      textarea:where(:not([embed])),
      progress,
      meter {
        min-width: auto;
      }
      input:where(:not([embed]):not([type=radio], [type=checkbox], [type=reset], [type=submit], [type=color])),
      select:where(:not([embed])),
      textarea:where(:not([embed])),
      input:where(:not([embed]):not([type=radio], [type=checkbox], [type=reset], [type=submit], [type=color])):hover,
      select:where(:not([embed])):hover,
      textarea:where(:not([embed])):hover,
      input:where(:not([embed]):not([type=radio], [type=checkbox], [type=reset], [type=submit], [type=color])):focus,
      select:where(:not([embed])):focus,
      textarea:where(:not([embed])):focus {
        border-color: transparent;
        outline-color: transparent;
      }
      >OC-INPUT {
        --_input-bw: 0;
        --_input-sd: transparent;
        [rep=wrap] {
          outline: none;
        }
        [rep=label],
        [rep=unit] {
          background-color: transparent;
          border-color: transparent;
        }
        [rep=btn] {
          padding-inline-end: 0;
        }
        input {
          --_field-p-se: 0;
        }
      }
      >OC-FILE {
        --_file-p-se: 0;
        --_file-sd: transparent;
        --_file-bw: 0;
        [rep=label] {
          background-color: transparent;
          border-color: transparent;
        }
      }
      >OC-SELECT {
        --_select-bw: 0;
        --_select-sd: transparent;
        outline: none;
        ._select {
          padding-inline-start: 0;
          outline: none;
        }
      }
      >OC-TEXTAREA {
        --_tarea-bw: 0;
        --_tarea-sd: transparent;
        [rep=wrap] {
          outline: none;
        }
        textarea {
          padding-inline-start: 0;
        }
      }
      >OC-DATETIME {
        ._datetime-wrap {
          --_date-sd: transparent;
        }
        OC-TEXTAREA {
          --_tarea-bw: 0;
          [rep=wrap] {
            outline: none;
          }
        }
        textarea {
          padding-inline-start: 0;
        }
      }
      >OC-SEARCH {
        --_srch-bw: 0;
        --_srch-c-foc: transparent;
        OC-FIELDS {
          >[rep=wrap]>OC-BTN {
            --_btn-c-sd: transparent;
            --_btn-r: var(--_r-input-sm);
            --_btn-h: var(--_rem-display);
            --_btn-fs: var(--_rem-caption);
            border-start-start-radius: var(--_btn-r);
            border-end-start-radius: var(--_btn-r);
          }
          [rep=fields]:focus-within+OC-BTN>[rep=wrap] {
            border-inline-start-color: var(--_btn-bc);
          }
        }
      }
      >OC-UPLOAD ._upload {
        border-color: transparent;
      }
      >OC-NUMBER {
        --_number-bw: 0;
        --_number-sd: transparent;
        --_number-sz-btn: var(--_rem-list);
        [rep=wrap] {
          outline: none;
        }
        [rep=decrease],
        [rep=increase] {
          font-size: var(--_rem-root);
          border-radius: 100%;
          border: 1px solid var(--_number-bc);
          &:hover {
            color: var(--_c-white);
            background-color: var(--_c-prim);
          }
        }
      }
    }
  }
  >._field-help {
    OC-BTN:where(:not([size])) {
      --_btn-h: min(var(--_form-h), var(--_rem-display));
    }
    OC-BTN {
      --_btn-r: var(--_r-input-sm);
      --_btn-fs: var(--_rem-caption);
    }
    [rep=disk],
    [rep=image],
    [rep=cube] {
      height: min(var(--_form-h), var(--_rem-display));
    }
    [rep=image],
    [rep=cube] {
      border-radius: var(--_r);
    }
  }
}
OC-FIELD:where([size=sm], [size=lg]) {
  >._field-cont>._field-input {
    input:where([type=reset], [type=submit]),
    button,
    >OC-BTN {
      --_btn-h: var(--_form-h);
    }
  }
}
OC-FIELD:where([size=sm]) {
  --_form-h: var(--_rem-display);
  --_form-p-input: var(--_rem-space);
  --_form-m-tb: var(--_rem-space);
  >._field-help OC-BTN:where(:not([size])) {
  }
  &:where(:not([type=apart], [type=compact])) {
    >._field-help OC-BTN:where(:not([size])) {
      --_btn-h: var(--_form-h);
    }
  }
  &[type=compact] {
    --_form-p-tb: var(--_rem-space);
  }
  &[type=apart] {
    --_form-m-tb: var(--_rem-space);
  }
}
OC-FIELD:where([size=lg]) {
  --_form-h: var(--_rem-max);
  --_form-p-input: calc(var(--_g)*3);
  >._field-cont>._field-input {
    input:where([type=reset], [type=submit]),
    button,
    >OC-BTN {
    }
  }
  &:where(:not([type=apart], [type=compact])) {
    >._field-help OC-BTN:where(:not([size])) {
      --_btn-h: var(--_form-h);
    }
  }
}
@media (any-hover: none) {
  OC-FIELD>._field-cont>._field-input select:where([multiple]:not([embed])) {
    min-height: auto;
  }
}
@media (max-width:calc(900px - 1px)) {
  OC-FIELD>._field-help,
  OC-FIELD>._field-help>* {
    font-size: var(--_rem-caption);
  }
  OC-FIELD:where(:not([type=apart], [type=full], [type=compact], [type=embed])) {
    --_form-m-se: var(--_p);
    --_form-w-cont: auto;
    --_form-a: flex-start;
    --_form-w-label: auto;
    >._field-cont {
      flex: auto;
      input:where(:not([embed]):not([type=radio], [type=checkbox], [type=range], [type=reset], [type=submit], [type=color])),
      select:where(:not([embed])),
      textarea:where(:not([embed])),
      progress,
      meter {
        min-width: auto;
      }
    }
  }
  OC-FIELD:where([type=embed]) {
    --_form-w-cont: auto;
    >._field-cont {
      flex: auto;
    }
  }
  OC-FIELD:where(:not([type=compact], [type=embed])) {
    >._field-help {
      [rep=text] {
        width: auto !important;
      }
    }
  }
  :where([type=full])OC-FIELD>._field-label {
    max-width: none;
  }
  OC-FIELD:where(:not([type=apart], [type=compact], [type=embed])) {
    margin-block-start: calc(var(--_form-h) + var(--_form-m-tb));
    position: relative;
    >._field-label,
    >._field-help {
      position: absolute;
      inset-block-start: calc(var(--_form-h)*-1);
    }
    >._field-label {
      inset-inline-start: 0;
      width: auto !important;
    }
    >._field-help {
      inset-inline-end: 0;
      OC-BTN:where(:not([size])) {
        --_btn-h: calc(var(--_form-h) - 1rem);
      }
      [rep=disk],
      [rep=image],
      [rep=cube] {
        height: calc(var(--_form-h) - 1rem);
      }
    }
  }
}
/*Badge*/
OC-BADGE {
    --_badge-bg: var(--_c-error);
    --_badge-bd: var(--_c-error);
    --_badge-c: var(--_c-white);
    --_badge-r: calc(1.5em - 2px);
    vertical-align: middle;
    display: inline-flex;
    [rep=wrap] {
        font-size: var(--_px-caption);
        color: var(--_badge-c);
        line-height: calc(1.5em - 2px);
        height: calc(1.5em - 2px);
        padding: 0 5px;
        display: inline-block;
        border-radius: var(--_badge-r);
        box-sizing: border-box;
        background-color: var(--_badge-bg);
    }
    &:where([glassy]) {
        --_badge-bg: var(--_c-error-tl);
    }
    &:where([shadowed]) [rep=wrap] {
        box-shadow: 0 0 0 0.2rem var(--_c-stage);
    }
    &[theme=prim] {
        --_badge-bg: var(--_c-prim);
        &:where([glassy]) {
            --_badge-bg: var(--_c-prim-tl);
        }
    }
    &[theme=succ] {
        --_badge-bg: var(--_c-succ);
        &:where([glassy]) {
            --_badge-bg: var(--_c-succ-tl);
        }
    }
    &[theme=warn] {
        --_badge-c: var(--_c-black);
        --_badge-bg: var(--_c-warn);
        &:where([glassy]) {
            --_badge-bg: var(--_c-warn-tl);
        }
    }
    &[theme=info] {
        --_badge-bg: var(--_c-info);
        &:where([glassy]) {
            --_badge-bg: var(--_c-info-tl);
        }
    }
    &[theme=issue] {
        --_badge-bg: var(--_c-issue);
        &:where([glassy]) {
            --_badge-bg: var(--_c-issue-tl);
        }
    }
    &[theme=text] {
        --_badge-bg: var(--_c-black);
        &:where([glassy]) {
            --_badge-bg: var(--_c-text-tl);
        }
    }
    &[theme=brief] {
        --_badge-bg: var(--_c-brief);
    }
    &[theme=caption] {
        --_badge-c: var(--_c-caption);
        --_badge-bg: var(--_c-caption-bg);
    }
    &[shape=radius] {
        --_badge-r: var(--_r);
    }
    &[shape=square] {
        --_badge-r: 0;
    }
    &[shape=drop] [rep=wrap] {
        border-end-start-radius: 0;
    }
    &[type=seal] {
        --_badge-c: var(--_c-error);
        [rep=wrap] {
            border: 1px solid var(--_badge-bd);
            line-height: calc(1.5em - 4px);
            padding: 0 4px;
            background: transparent;
        }
        &:where([glassy]) [rep=wrap] {
            opacity: .6;
        }
    }
    &:where([theme=prim])[type=seal] {
        --_badge-c: var(--_c-prim);
        --_badge-bd: var(--_c-prim);
    }
    &:where([theme=succ])[type=seal]  {
        --_badge-c: var(--_c-succ);
        --_badge-bd: var(--_c-succ);
    }
    &:where([theme=warn])[type=seal]  {
        --_badge-c: var(--_c-warn);
        --_badge-bd: var(--_c-warn);
    }
    &:where([theme=info])[type=seal]  {
        --_badge-c: var(--_c-info);
        --_badge-bd: var(--_c-info);
    }
    &:where([theme=issue])[type=seal] {
        --_badge-c: var(--_c-issue);
        --_badge-bd: var(--_c-issue);
    }
    &:where([theme=text])[type=seal] {
        --_badge-c: var(--_c-text);
        --_badge-bd: var(--_c-text);
    }
    &:where([theme=brief])[type=seal] {
        --_badge-c: var(--_c-brief);
        --_badge-bd: var(--_c-brief);
    }
    &:where([theme=caption])[type=seal] {
        --_badge-c: var(--_c-caption);
        --_badge-bd: var(--_c-caption);
    }
    [rep=wrap]:empty {
        width: 8px;
        height: 8px;
        padding: 0;
        border-radius: 100%;
    }
}
/*Buoy*/
OC-BUOY {
    --_buoy-p: .6rem;
    --_buoy-h: var(--_rem-list);
    --_buoy-lh: var(--_rem-list);
    --_buoy-c: var(--_c-text);
    --_buoy-bc: var(--_c-text-bd);
    --_buoy-r: var(--_r);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    [rep=wrap] {
        font-size: var(--_rem-caption);
        color: var(--_buoy-c);
        box-sizing: border-box;
        overflow: hidden;
        border: 1px solid var(--_buoy-bc);
        border-radius: var(--_buoy-r);
        height: var(--_buoy-h);
        line-height: calc(var(--_buoy-lh) - 2px);
        background-color: var(--_c-stage);
        text-align: center;
        transition: all var(--_dur-1) linear;
        display: inline-flex;
    }
    [rep=head] {
        background-color: var(--_c-caption-bg);
        padding: 0 var(--_buoy-p);
        border-inline-end: 1px solid var(--_buoy-bc);
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        transition: all var(--_dur-1) linear;
        &:empty {
            display: none;
        }
        [rep=icon],
        [rep=arrow] {
            transition: all var(--_dur-2) linear;
        }
        [rep=icon]{
            font-size: var(--_rem-caption);
        }
        [rep=arrow] {
            font-size: var(--_rem-root);
            opacity: var(--_o-mask);
        }
        &:where(:has([rep=icon])) [rep=label] {
            margin-inline-start: var(--_rem-min);
        }
        &:where(:has([rep=arrow])) [rep=label] {
            margin-inline-end: var(--_rem-min);
        }
    }
    &[flipped] [rep=head] {
        background-color: var(--_c-stage);
    }
    [rep=value] {
        padding: 0 var(--_buoy-p);
        transition: all var(--_dur-1) linear;
    }
    &[flipped] [rep=value] {
        background-color: var(--_c-caption-bg);
    }
    &._opened [rep=arrow] {
        rotate: 180deg;
    }
    &:where(:not([flipped])) [rep=head]:hover {
        color: var(--_c-caption);
    }
    &[theme=prim] {
        --_buoy-c: var(--_c-prim);
        --_buoy-bc: var(--_c-prim);
    }
    &[theme=succ] {
        --_buoy-c: var(--_c-succ);
        --_buoy-bc: var(--_c-succ);
    }
    &[theme=error] {
        --_buoy-c: var(--_c-error);
        --_buoy-bc: var(--_c-error);
    }
    &[theme=warn] {
        --_buoy-c: var(--_c-warn);
        --_buoy-bc: var(--_c-warn);
    }
    &[theme=info] {
        --_buoy-c: var(--_c-info);
        --_buoy-bc: var(--_c-info);
    }
    &[theme=issue] {
        --_buoy-c: var(--_c-issue);
        --_buoy-bc: var(--_c-issue);
    }
    &[theme=text] {
        --_buoy-bc: var(--_c-black);
    }
    &[theme=brief] {
        --_buoy-c: var(--_c-brief);
        --_buoy-bc: var(--_c-brief);
    }
    &[theme=prim]:where(:not([flipped])) [rep=head],
    &[theme=prim]:where([flipped]) [rep=value] {
        background-color: var(--_c-prim);
    }
    &[theme=succ]:where(:not([flipped])) [rep=head],
    &[theme=succ]:where([flipped]) [rep=value] {
        background-color: var(--_c-succ);
    }
    &[theme=error]:where(:not([flipped])) [rep=head],
    &[theme=error]:where([flipped]) [rep=value] {
        background-color: var(--_c-error);
    }
    &[theme=warn]:where(:not([flipped])) [rep=head],
    &[theme=warn]:where([flipped]) [rep=value] {
        background-color: var(--_c-warn);
    }
    &[theme=info]:where(:not([flipped])) [rep=head],
    &[theme=info]:where([flipped]) [rep=value] {
        background-color: var(--_c-info);
    }
    &[theme=issue]:where(:not([flipped])) [rep=head],
    &[theme=issue]:where([flipped]) [rep=value] {
        background-color: var(--_c-issue);
    }
    &[theme=text]:where(:not([flipped])) [rep=head],
    &[theme=text]:where([flipped]) [rep=value] {
        background-color: var(--_c-black);
    }
    &[theme=brief]:where(:not([flipped])) [rep=head],
    &[theme=brief]:where([flipped]) [rep=value] {
        background-color: var(--_c-brief);
    }
    &[theme] [rep=head] {
        border-width: 0;
    }
    &[theme]:where(:not([flipped])) [rep=head] {
        color: var(--_c-white);
    }
    &[theme]:where(:not([flipped])) [rep=head]:hover {
        color: rgba(255, 255, 255, var(--_o-active));
    }
    &[size=sm] {
        --_buoy-h: var(--_rem-subtitle);
        --_buoy-lh: var(--_rem-subtitle);
        --_buoy-p: var(--_rem-min);
    }
    &[size=lg] {
        --_buoy-h: var(--_rem-display);
        --_buoy-lh: var(--_rem-display);
        --_buoy-p: var(--_rem-space);
        --_buoy-r:var(--_r-input);
    }
    &[theme=prim]:where([flipped]) [rep=head] {
        color: var(--_c-prim);
    }
    &[theme=succ]:where([flipped]) [rep=head] {
        color: var(--_c-succ);
    }
    &[theme=error]:where([flipped]) [rep=head] {
        color: var(--_c-error);
    }
    &[theme=warn]:where([flipped]) [rep=head] {
        color: var(--_c-warn);
    }
    &[theme=info]:where([flipped]) [rep=head] {
        color: var(--_c-info);
    }
    &[theme=issue]:where([flipped]) [rep=head] {
        color: var(--_c-issue);
    }
    &[theme=text]:where([flipped]) [rep=head] {
        color: var(--_c-text);
    }
    &[theme=brief]:where([flipped]) [rep=head] {
        color: var(--_c-brief);
    }
    &[theme]:where([flipped]) [rep=value] {
        color: var(--_c-white);
    }
    &[flipped] [rep=value]:hover {
        color: var(--_c-text);
    }
    &[theme]:where([flipped]) [rep=value]:hover {
        color: rgba(255, 255, 255, var(--_o-active));
    }
}
/*Flag Element*/
OC-FLAG {
    --_flag-c: var(--_c-white);
    --_flag-bg: var(--_c-prim);
    font-size: var(--_px-caption);
    display: block;
    overflow: hidden;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: 3;
    [rep=wrap] {
        display: block;
        border-radius: inherit;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }
    [rep=label] {
        color: var(--_flag-c);
        background-color: var(--_flag-bg);
        overflow: hidden;
    }
    &:where(:not([type=circle], [type=horn])) {
        width: 42px;
        aspect-ratio: 1/1;
    }
    &:where(:not([type=circle], [type=horn])) [rep=label] {
        width: 60px;
        aspect-ratio: 1/1;
        line-height: 100px;
        text-align: center;
        rotate: -45deg;
        position: absolute;
        inset-block-start: -30px;
        inset-inline-start: -30px;
    }
    &[placement=right]:where(:not([type=circle], [type=horn])) {
        inset-inline-start: auto;
        inset-inline-end: 0;
        inset-block-start: 0;
    }
    &[placement=right]:where(:not([type=circle], [type=horn])) [rep=label] {
        inset-block-start: -30px;
        inset-inline-start: auto;
        inset-inline-end: -30px;
        rotate: 45deg;
    }
    &[type=circle] {
        width: var(--_px-input);
        aspect-ratio: 1/1;
        border-radius: 100%;
        inset-inline-start: var(--_px-body);
        inset-block-start: var(--_px-body);
        i {
            width: 100%;
            aspect-ratio: 1/1;
            border-radius: inherit;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        &[placement=right] {
            inset-inline-start: auto;
            inset-inline-end: var(--_px-body);
        }
    }
    &[type=horn] {
        width: var(--_px-max);
        height: var(--_px-list);
        inset-inline-start: 0;
        inset-block-start: var(--_px-body);
        i {
            width: calc(100% - 12px);
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        &:before,
        &:after {
            content: '';
            width: 0;
            height: 0;
            border-width: 7px;
            border-style: solid;
            position: absolute;
            inset-inline-end: 0;
        }
        &:before {
            border-color: var(--_flag-bg) transparent transparent var(--_flag-bg);
            inset-block-start: 0;
        }
        &:after {
            border-color: transparent transparent var(--_flag-bg) var(--_flag-bg);
            inset-block-end: 0;
        }
        &[placement=right] {
            inset-inline-start: auto;
            inset-inline-end: 0;
            i {
                margin-inline-start: 12px;
            }
            &:before,
            &:after {
                inset-inline-end: auto;
                inset-inline-start: 0;
            }
            &:before {
                border-color: var(--_flag-bg) var(--_flag-bg) transparent transparent;
            }
            &:after {
                border-color: transparent var(--_flag-bg) var(--_flag-bg) transparent;
            }
        }
    }
    &[theme=prim] {
        --_flag-bg: var(--_c-prim);
    }
    &[theme=succ] {
        --_flag-bg: var(--_c-succ);
    }
    &[theme=error] {
        --_flag-bg: var(--_c-error);
    }
    &[theme=warn] {
        --_flag-c: var(--_c-black);
        --_flag-bg: var(--_c-warn);
    }
    &[theme=info] {
        --_flag-bg: var(--_c-info);
    }
    &[theme=issue] {
        --_flag-bg: var(--_c-issue);
    }
    &[theme=text] {
        --_flag-c: var(--_c-white);
        --_flag-bg: hsl(var(--_h-text), var(--_s-text), 20%);
    }
    &[theme=brief] {
        --_flag-c: var(--_c-brief);
        --_flag-bg: var(--_c-brief-bg);
    }
    &[theme=caption] {
        --_flag-c: var(--_c-caption);
        --_flag-bg: var(--_c-caption-bg);
    }
}
[dir=rtl] OC-FLAG{
    &:where(:not([type=circle], [type=horn])) [rep=label] {
        rotate: 45deg;
    }
    &[placement=right]:where(:not([type=circle], [type=horn])) [rep=label]{
        rotate: -45deg;
    }
    &[type=horn]:before {
        border-color: var(--_flag-bg) var(--_flag-bg) transparent transparent;
    }
    &[type=horn]:after {
        border-color: transparent var(--_flag-bg) var(--_flag-bg) transparent;
    }
    &[type=horn][placement=right]:before {
        border-color: var(--_flag-bg) transparent transparent var(--_flag-bg);
    }
    &[type=horn][placement=right]:after {
        border-color: transparent transparent var(--_flag-bg) var(--_flag-bg);
    }
}
/*Avatar*/
OC-AVATAR {
    --_av-fs: var(--_rem-body);
    --_av-h: var(--_rem-input);
    --_av-r: calc(var(--_av-h)/4);
    --_av-c: var(--_c-text-aj);
    --_av-bg: var(--_c-caption-bg);
    border-radius: clamp(var(--_r), var(--_av-r), calc(var(--_r)*6));
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    position: relative;
    >[rep=wrap] {
        font-size: var(--_av-fs);
        color: var(--_av-c);
        height: var(--_av-h);
        aspect-ratio: 1/1;
        background-color: var(--_av-bg);
        border-radius: inherit;
        box-sizing: border-box;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    img {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        object-fit: cover;
        transition: all var(--_dur-2) linear;
        &[src=""] {
    display: none;
  }
    }
    OC-BADGE {
        position: absolute;
        inset-inline-end: calc(var(--_rem-space)*-1);
        inset-block-start: calc(var(--_rem-space)*-1);
    }
    OC-BADGE:has([rep=wrap]:empty) {
        inset-inline-end: -0.2rem;
        inset-block-start: -0.2rem;
    }
    [rep=tips] {
        font-size: var(--_rem-caption);
        color: var(--_c-white);
        width: 100%;
        height: 100%;
        line-height: var(--_em-subtitle-dec);
        border-radius: inherit;
        background-color: var(--_c-black-60);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0;
    }
    &[size=xxs] {
        --_av-fs: var(--_rem-caption);
        --_av-h: var(--_rem-list);
    }
    &[size=xs] {
        --_av-fs: var(--_rem-caption);
        --_av-h: var(--_rem-display);
    }
    &[size=sm] {
        --_av-h: var(--_rem-input);
    }
    &[size=md] {
        --_av-h: calc(var(--_lh-body)*2);
    }
    &[size=lg] {
        --_av-fs: var(--_rem-lead);
        --_av-h: calc(var(--_lh-body)*3);
    }
    &[size=xl] {
        --_av-fs: var(--_rem-subtitle);
        --_av-h: calc(var(--_lh-body)*4);
    }
    &[size=xxl] {
        --_av-fs: var(--_rem-list);
        --_av-h: calc(var(--_lh-body)*5);
    }
    &:where([size=xs]) [rep=mask],
    &:where([size=sm]) [rep=mask] {
        font-size: var(--_rem-caption);
    }
    &:where([size=xs]) [rep=mask],
    &:where([size=sm]) [rep=mask] {
        font-size: var(--_rem-caption);
    }
    &[shape=square] {
        border-radius: 0;
    }
    &[shape=round] {
        border-radius: 100%;
    }
    &[arrow]:after {
        content: 'down';
        font-family: var(--_ff-icon);
        font-size: var(--_px-root);
        color: var(--_c-caption);
        transition: all var(--_dur-2) linear;
    }
    &:where([arrow=inside]):after {
        margin-inline-start: var(--_px-min);
    }
    &:where(:not([arrow=inside])):after {
        position: absolute;
        inset-inline-end: calc(var(--_px-root)*-1 - var(--_px-min));
    }
    &[arrow]:where(._opened):after {
        rotate: 180deg;
    }
    &[theme=prim],
    &[theme=error],
    &[theme=succ],
    &[theme=info],
    &[theme=issue],
    &[theme=text] {
        --_av-c: var(--_c-white);
    }
    &[theme=prim] {
        --_av-bg: var(--_c-prim);
    }
    &[theme=error] {
        --_av-bg: var(--_c-error);
    }
    &[theme=succ] {
        --_av-bg: var(--_c-succ);
    }
    &[theme=info] {
        --_av-bg: var(--_c-info);
    }
    &[theme=warn] {
        --_av-bg: var(--_c-warn);
    }
    &[theme=issue] {
        --_av-bg: var(--_c-issue);
    }
    &[theme=text] {
        --_av-bg: var(--_c-text);
    }
    &[theme=prim-lt] {
        --_av-bg: var(--_c-prim-bg);
        --_av-c: var(--_c-prim-dp);
    }
    &[theme=error-lt] {
        --_av-bg: var(--_c-error-bg);
        --_av-c: var(--_c-error-dp);
    }
    &[theme=succ-lt] {
        --_av-bg: var(--_c-succ-bg);
        --_av-c: var(--_c-succ-dp);
    }
    &[theme=info-lt] {
        --_av-bg: var(--_c-info-bg);
        --_av-c: var(--_c-info-dp);
    }
    &[theme=issue-lt] {
        --_av-bg: var(--_c-issue-bg);
        --_av-c: var(--_c-issue-dp);
    }
    &[theme=warn-lt] {
        --_av-bg: var(--_c-warn-bg);
        --_av-c: var(--_c-text);
    }
    &[theme=text-lt] {
        --_av-bg: var(--_c-text-bg);
        --_av-c: var(--_c-text);
    }
}
/*Alarm*/
OC-ALARM {
    --_alarm-sz: var(--_rem-body);
    --_alarm-c: var(--_c-white);
    --_alarm-bg: var(--_c-error);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    [rep=wrap] {
        color: var(--_alarm-c);
        aspect-ratio: 1 /1;
        max-width: var(--_w-list);
        line-height: 1em;
        border-radius: 100%;
        padding: var(--_rem-space);
        background-color: var(--_alarm-bg);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        transition: all var(--_dur-2) linear;
        * {
            position: relative;
            z-index: 2;
        }
    }
    [rep=wrap]:before,
    [rep=wrap]:after {
        content: '';
        width: 100%;
        aspect-ratio: 1 /1;
        border-radius: inherit;
        background-color: var(--_alarm-bg);
        transform: scale(3);
        opacity: 0.5;
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0;
        pointer-events: none;
    }
    [rep=image]{
        width: var(--_rem-input);
        aspect-ratio: 1 /1;
        object-fit: cover;
        border-radius: inherit;
    }
    [rep=wrap]:before {
        animation: _wave-3 1s infinite;
    }
    [rep=wrap]:after {
        animation: _wave-5 1s infinite;
    }
    &[size=sm] [rep=wrap]:before {
        animation-name: _wave-2
    }
    &[size=sm] [rep=wrap]:after {
        animation-name: _wave-3
    }
    &[size=md] [rep=wrap]:before {
        animation-name: _wave-3
    }
    &[size=md] [rep=wrap]:after {
        animation-name: _wave-5
    }
    &[size=lg] [rep=wrap]:before {
        animation-name: _wave-4
    }
    &[size=lg] [rep=wrap]:after {
        animation-name: _wave-7
    }
    &[theme=prim] [rep=wrap],
    &[theme=prim] [rep=wrap]:before,
    &[theme=prim] [rep=wrap]:after {
        background-color: var(--_c-prim);
    }
    &[theme=error] [rep=wrap],
    &[theme=error] [rep=wrap]:before,
    &[theme=error] [rep=wrap]:after {
        background-color: var(--_c-error);
    }
    &[theme=succ] [rep=wrap],
    &[theme=succ] [rep=wrap]:before,
    &[theme=succ] [rep=wrap]:after {
        background-color: var(--_c-succ);
    }
    &[theme=warn]{
        --_alarm-c:var(--_c-black);
    }
    &[theme=warn] [rep=wrap],
    &[theme=warn] [rep=wrap]:before,
    &[theme=warn] [rep=wrap]:after {
        background-color: var(--_c-warn);
    }
    &[theme=info] [rep=wrap],
    &[theme=info] [rep=wrap]:before,
    &[theme=info] [rep=wrap]:after {
        background-color: var(--_c-info);
    }
    &[theme=issue] [rep=wrap],
    &[theme=issue] [rep=wrap]:before,
    &[theme=issue] [rep=wrap]:after {
        background-color: var(--_c-issue);
    }
}
@keyframes _wave-2 {
    0% {
        transform: scale(1);
        opacity: .9
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
@keyframes _wave-3 {
    0% {
        transform: scale(1);
        opacity: .9
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}
@keyframes _wave-4 {
    0% {
        transform: scale(1);
        opacity: .9
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}
@keyframes _wave-5 {
    0% {
        transform: scale(1);
        opacity: .9;
    }
    100% {
        transform: scale(5);
        opacity: 0;
    }
}
@keyframes _wave-6 {
    0% {
        transform: scale(1);
        opacity: .9;
    }
    100% {
        transform: scale(6);
        opacity: 0;
    }
}
@keyframes _wave-7 {
    0% {
        transform: scale(1);
        opacity: .9;
    }
    100% {
        transform: scale(7);
        opacity: 0;
    }
}
/*Result component*/
OC-RESULT {
    --_result-w: 5.4rem;
    --_result-ani: _draw-waiting;
    --_result-bg: var(--_c-text-sd);
    --_result-c-icon: var(--_c-info);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    [rep=wrap] {
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
    [rep=icon] {
        color: var(--_result-c-icon);
        height: var(--_result-w);
        aspect-ratio: 1/1;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    [rep=label] {
    }
    svg {
        width: inherit;
        height: inherit;
        ._out,
        ._in-1:where(:not(._circle)),
        ._in-2:where(:not(._circle)),
        ._bg {
            stroke-width: 3.7253;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        ._line {
            fill: none;
        }
        ._circle {
            opacity: 0;
        }
    }
    &:where(:not([to])) {
        [rep=icon] ._bg {
            stroke: var(--_result-bg);
            animation: var(--_result-ani) 1.5s linear infinite;
        }
        &:where([bg=succ]) {
            --_result-bg: var(--_c-succ);
        }
        &:where([bg=error]) {
            --_result-bg: var(--_c-error);
        }
        &:where([bg=info]) {
            --_result-bg: var(--_c-info);
        }
        &:where([bg=warn]) {
            --_result-bg: var(--_c-warn);
        }
        &:where([bg=issue]) {
            --_result-bg: var(--_c-issue);
        }
    }
    &:where([to]) [rep=icon] ._out {
        animation: var(--_result-ani) 1.5s linear infinite;
    }
    &:where([to=warn]) [rep=icon] ._out {
        --_result-ani: _draw-waiting2;
    }
    &[to=succ] [rep=icon]{
        ._out {
            stroke: var(--_c-succ);
            stroke-dasharray: 227 229;
            stroke-dashoffset: 228;
            transform-origin: 50% 50%;
            transform: rotate(-90deg);
            animation: _draw-rotate 800ms var(--_bez-eo) 0ms forwards;
        }
        ._in-1 {
            stroke: var(--_c-succ);
            stroke-dasharray: 49 51;
            stroke-dashoffset: 50;
            animation: _draw-line 400ms var(--_bez-eo) 800ms forwards;
        }
        ._bg {
            stroke: var(--_c-succ-bg);
        }
    }
    &[to=error] [rep=icon]{
        ._out {
            stroke: var(--_c-error);
            stroke-dasharray: 227 229;
            stroke-dashoffset: 228;
            transform-origin: 50% 50%;
            transform: rotate(-90deg);
            animation: _draw-rotate 800ms var(--_bez-eo) 0ms forwards;
        }
        ._bg {
            stroke: var(--_c-error-bg);
        }
        ._in-1,
        ._in-2 {
            stroke: var(--_c-error);
            stroke-dasharray: 42 44;
            stroke-dashoffset: -43;
        }
        ._in-1 {
            animation: _draw-line 400ms var(--_bez-eo) 800ms forwards;
        }
        ._in-2 {
            animation: _draw-line 400ms var(--_bez-eo) 1200ms forwards;
        }
    }
    &[to=info] [rep=icon]{
        ._out {
            stroke: var(--_c-info);
            stroke-dasharray: 227 229;
            stroke-dashoffset: 228;
            transform-origin: 50% 50%;
            transform: rotate(-90deg);
            animation: _draw-rotate 800ms var(--_bez-eo) 0ms forwards;
        }
        ._in-1 {
            stroke: var(--_c-info);
            stroke-dasharray: 35 37;
            stroke-dashoffset: -36;
            animation: _draw-line 400ms var(--_bez-eo) 1200ms forwards;
        }
        ._in-2 {
            transform-origin: 4.33492rem 2.35856rem;
            animation: _draw-circle 400ms var(--_bez-eo) 800ms forwards;
        }
        ._bg {
            stroke: var(--_c-info-bg);
        }
        ._circle {
            fill: var(--_c-info)
        }
    }
    &[to=warn] [rep=icon]{
        ._out {
            stroke: var(--_c-warn);
            stroke-dasharray: 248 250;
            stroke-dashoffset: 249;
            animation: _draw-line 800ms var(--_bez-eo) 0ms forwards;
        }
        ._in-1 {
            stroke: var(--_c-warn);
            stroke-dasharray: 30 32;
            stroke-dashoffset: 31;
            animation: _draw-line 400ms var(--_bez-eo) 800ms forwards;
        }
        ._in-2 {
            transform-origin: 4.33492rem 6.43337rem;
            animation: _draw-circle 400ms var(--_bez-eo) 1200ms forwards;
        }
        ._bg {
            stroke: var(--_c-warn-bg);
        }
        ._circle {
            fill: var(--_c-warn);
        }
    }
    &[to=issue] [rep=icon]{
        ._out {
            stroke: var(--_c-issue);
            stroke-dasharray: 227 229;
            stroke-dashoffset: 228;
            transform-origin: 50% 50%;
            transform: rotate(-90deg);
            animation: _draw-rotate 800ms var(--_bez-eo) 0ms forwards;
        }
        ._in-1 {
            stroke: var(--_c-issue);
            stroke-dasharray: 59 61;
            stroke-dashoffset: 60;
            animation: _draw-line 400ms var(--_bez-eo) 800ms forwards;
        }
        ._in-2 {
            transform-origin: 4.46612rem 6.05502rem;
            animation: _draw-circle 400ms var(--_bez-eo) 1200ms forwards;
        }
        ._bg {
            stroke: var(--_c-issue-bg);
        }
        ._circle {
            fill: var(--_c-issue)
        }
    }
    &[type=font] {
        [rep=icon] {
            font-size: var(--_result-w);
        }
        &[to=succ] {
            --_result-c-icon:var(--_c-succ);
        }
        &[to=error] {
            --_result-c-icon:var(--_c-error);
        }
        &[to=info] {
            --_result-c-icon:var(--_c-info);
        }
        &[to=warn] {
            --_result-c-icon:var(--_c-warn);
        }
        &[to=issue] {
            --_result-c-icon:var(--_c-issue);
        }
    }
}
@keyframes _draw-rotate {
    100% {
        stroke-dashoffset: 0;
        transform: rotate(0deg)
    }
}
@keyframes _draw-line {
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes _draw-circle {
    0% {
        transform: scale(0.7);
        opacity: 1;
    }
    45% {
        transform: scale(1.2);
        opacity: 1;
    }
    80% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes _draw-waiting {
    0% {
        stroke-dasharray: 0, 229;
        stroke-dashoffset: -0;
    }
    50% {
        stroke-dasharray: 114, 129;
        stroke-dashoffset: -57;
    }
    100% {
        stroke-dasharray: 0, 229;
        stroke-dashoffset: -228;
    }
}
@keyframes _draw-waiting2 {
    0% {
        stroke-dasharray: 0, 250;
        stroke-dashoffset: -0;
    }
    50% {
        stroke-dasharray: 125, 250;
        stroke-dashoffset: -62;
    }
    100% {
        stroke-dasharray: 0, 250;
        stroke-dashoffset: -249;
    }
}
/*Alert*/
OC-SKELETON {
    --_skel-d: block;
    --_skel-dir: row;
    --_skel-r: var(--_r-input);
    --_skel-bg: var(--_c-text-ac);
    --_skel-g: var(--_rem-display);
    --_skel-lh-sm: var(--_rem-caption);
    --_skel-lh-md: var(--_rem-body);
    --_skel-lh-lg: var(--_rem-display);
    --_skel-m-sm: var(--_rem-space);
    --_skel-m-md: var(--_rem-body);
    --_skel-m-lg: var(--_rem-display);
    display: var(--_skel-d);
    vertical-align: middle;
    [rep=wrap] {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }
    &[cols] [rep=wrap] {
        display: grid;
        grid-gap: var(--_skel-g);
    }
    [rep=wrap]>section {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: var(--_skel-dir);
    }
    &[type*=avatar] {
        [rep=legend] {
            height: 6rem;
            aspect-ratio: 1/1;
            border-radius: 100%;
            background-color: var(--_skel-bg);
        }
        [rep=text] {
            display: flex;
            justify-content: center;
            flex-direction: column;
            * {
                background-color: var(--_skel-bg);
                height: var(--_skel-lh-sm);
                border-radius: var(--_skel-r);
                margin-block-start: var(--_skel-m-sm);
            }
            *:first-child {
                width: 8rem;
            }
        }
    }
    &:where(:not([cols]))[type*=avatar] section:where(:not(:first-child)) {
        margin-block-start: var(--_skel-m-lg);
    }
    &[type=avatar] {
        --_skel-dir: column;
        [rep=text] {
            align-items: center;
            *:last-child {
                width: 12rem;
            }
        }
    }
    &[type=avatar-left],
    &[type=avatar-right] {
        [rep=text] {
            display: flex;
            flex: auto;
        }
    }
    &[type=avatar-left] {
        [rep=legend] {
            margin-inline-end: var(--_skel-m-md);
        }
    }
    &[type=avatar-right] {
        [rep=wrap]>section {
            flex-direction: row-reverse;
        }
        [rep=legend] {
            margin-inline-start: var(--_skel-m-md);
        }
    }
    &[type*=post] {
        [rep=legend] {
            height: 6rem;
            aspect-ratio: 4/3;
            border-radius: var(--_skel-r);
            background-color: var(--_skel-bg);
        }
        [rep=text] {
            display: flex;
            justify-content: center;
            flex-direction: column;
            flex: auto;
            * {
                background-color: var(--_skel-bg);
                height: var(--_skel-lh-sm);
                border-radius: var(--_skel-r);
            }
            *:first-child {
                width: 80%;
            }
            *:where(:not(:first-child)) {
                margin-block-start: var(--_skel-m-sm);
            }
        }
    }
    &:where(:not([cols]))[type*=post] section:where(:not(:first-child)) {
        margin-block-start: var(--_skel-m-lg);
    }
    &[type=post] {
        [rep=legend] {
            display: none;
        }
    }
    &[type=post-left] {
        [rep=legend] {
            margin-inline-end: var(--_skel-m-md);
        }
    }
    &[type=post-right] {
        [rep=wrap]>section {
            flex-direction: row-reverse;
        }
        [rep=legend] {
            margin-inline-start: var(--_skel-m-md);
        }
    }
    &[type*=bullet] {
        [rep=legend] {
            height: var(--_rem-display);
            aspect-ratio: 1/1;
            border-radius: var(--_skel-r);
            background-color: var(--_skel-bg);
        }
        [rep=text] {
            display: flex;
            align-items: center;
            flex: auto;
            * {
                background-color: var(--_skel-bg);
                height: var(--_skel-lh-sm);
                border-radius: var(--_skel-r);
            }
            *:first-child {
                flex: auto;
            }
            *:last-child {
                width: 6rem;
                margin-inline-start: var(--_skel-m-md);
            }
        }
    }
    &:where(:not([cols]))[type*=bullet] section:where(:not(:first-child)) {
        margin-block-start: var(--_skel-m-md);
    }
    &[type=bullet] {
        [rep=legend] {
            display: none;
        }
    }
    &[type=bullet-left] {
        [rep=legend] {
            margin-inline-end: var(--_skel-m-md);
        }
    }
    &[type=bullet-right] {
        [rep=wrap]>section {
            flex-direction: row-reverse;
        }
        [rep=legend] {
            margin-inline-start: var(--_skel-m-md);
        }
    }
    &[type*=card] {
        --_skel-dir: column;
        [rep=legend] {
            width: 100%;
            aspect-ratio: 16/9;
            border-radius: var(--_skel-r);
            background-color: var(--_skel-bg);
        }
        [rep=text] {
            width: 100%;
            * {
                background-color: var(--_skel-bg);
                height: var(--_skel-lh-sm);
                border-radius: var(--_skel-r);
                margin-block-start: var(--_skel-m-sm);
            }
            *:first-child {
                width: 80%;
            }
            *:last-child {
                width: 40%;
            }
        }
    }
    &[type=paragraph] {
        --_skel-dir: column;
        [rep=legend] {
            display: none;
        }
        [rep=text] {
            width: 100%;
            * {
                background-color: var(--_skel-bg);
                height: var(--_skel-lh-md);
                border-radius: var(--_skel-r);
            }
            *:where(:not(:first-child)) {
                margin-block-start: var(--_skel-m-md);
            }
            *:last-child {
                width: 40%;
            }
        }
    }
    &[type=article] {
        --_skel-dir: column;
        [rep=legend] {
            width: 100%;
            margin-block-end: var(--_skel-m-md);
            &:before,
            &:after {
                content: '';
                background-color: var(--_skel-bg);
                border-radius: var(--_skel-r);
                display: block;
            }
            &:before {
                height: var(--_skel-lh-lg);
                width: 60%;
            }
            &:after {
                height: var(--_skel-lh-sm);
                width: 40%;
                margin-block-start: var(--_skel-m-md);
            }
        }
        [rep=text] {
            width: 100%;
            * {
                margin-block-start: var(--_skel-m-md);
                background-color: var(--_skel-bg);
                height: var(--_skel-lh-md);
                border-radius: var(--_skel-r);
            }
            *:nth-child(4n) {
                width: 80%;
            }
            *:last-child {
                width: 40%;
            }
        }
    }
    &[type=wall] {}
    &[type=plain],
    &:has([rep=wrap]:empty) {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        [rep=wrap] {
            border-radius: inherit;
            background-color: var(--_skel-bg);
        }
    }
    @keyframes _skel-fade {
        0% {
            opacity: 0.5;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0.5;
        }
    }
    @keyframes _skel-stream {
        0% {
            background-position: right 50%;
        }
        100% {
            background-position: left 50%;
        }
    }
    &[anim=stream] {
        background-color: var(--_c-stage);
        [rep=wrap]:after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            inset-inline-start: 0;
            inset-block-start: 0;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0) 34%, black 50%, rgba(0, 0, 0, 0) 67%) 0% 0% / 300% 100%;
            mix-blend-mode: overlay;
            animation: _skel-stream var(--_dur-20) ease infinite both;
        }
    }
    &[anim=fade] {
        animation: _skel-fade var(--_dur-9) linear infinite both;
    }
    &[theme=prim] {
        --_skel-bg: var(--_c-prim-ac);
    }
    &[theme=error] {
        --_skel-bg: var(--_c-error-ac);
    }
    &[theme=succ] {
        --_skel-bg: var(--_c-succ-ac);
    }
    &[theme=info] {
        --_skel-bg: var(--_c-info-ac);
    }
    &[theme=issue] {
        --_skel-bg: var(--_c-issue-ac);
    }
    &[theme=warn] {
        --_skel-bg: var(--_c-warn-ac);
    }
    &[shape=round] {
        --_skel-r: var(--_rem-caption);
        &[type*=bullet] [rep=legend] {
            border-radius: 100%;
        }
        &[type*=post],
        &[type=card] {
            [rep=legend] {
                border-radius: var(--_r-input-lg);
            }
        }
        &[type=article] [rep=legend] *:first-child {
            border-radius: var(--_rem-display);
        }
    }
    &[shape=square] {
        --_skel-r: 0;
    }
}
@media (prefers-color-scheme: dark) {
    OC-SKELETON[anim=stream] [rep=wrap]:after {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 67%) 0% 0% / 300% 100%;
    }
}
[scheme=dark] {
    OC-SKELETON[anim=stream] [rep=wrap]:after {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 67%) 0% 0% / 300% 100%;
    }
}
/*
Last modified: 2025-06-27 17:59:52
*/
/*Icon*/
OC-ICON {
  --_icon-r: 0;
  --_icon-fs-tips: inherit;
  --_icon-lh-tips: var(--_em-subtitle);
  --_icon-fs-icon: inherit;
  --_icon-h-img: 100%;
  --_icon-c: inherit;
  --_icon-c-icon: inherit;
  --_icon-c-tips: inherit;
  &:where(:has([rep=icon])) {
    --_icon-h-head: var(--_icon-fs-icon);
  }
  &:where(:has([rep=image])) {
    --_icon-h-head: var(--_em-list);
  }
  color: var(--_icon-c);
  display: inline-flex;
  vertical-align: middle;
  [rep=wrap] {
    display: inline-flex;
    align-items: center;
  }
  [rep=head] {
    color: var(--_icon-c-icon);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: var(--_icon-h-head);
    aspect-ratio: 1/1;
    position: relative;
    box-sizing: border-box;
    border-radius: var(--_icon-r);
    OC-BADGE {
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: 0;
      transform: translate(calc(50%*var(--_dir-coef)), -50%);
    }
    &._bg-prim,
    &._bg-error,
    &._bg-info,
    &._bg-issue,
    &._bg-text,
    &._bg-brief {
      color: var(--_c-white);
    }
    &._bg-warn,
    &._bg-warn-lt,
    &._bg-text-lt,
    &._bg-caption {
      color: var(--_c-text);
    }
    &._bg-prim-lt {
      color: var(--_c-prim);
    }
    &._bg-error-lt {
      color: var(--_c-error);
    }
    &._bg-info-lt {
      color: var(--_c-info);
    }
    &._bg-issue-lt {
      color: var(--_c-issue);
    }
  }
  [rep=icon] {
    font-size: var(--_icon-fs-icon);
  }
  [rep=icon],
  [rep=image] {
    height: var(--_icon-h-img);
    aspect-ratio: 1/1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  &[shape] {
    --_icon-h-head: var(--_em-list);
    &:where(:not([theme])) [rep=head] {
      border: 1px solid var(--_c-text-bd);
    }
  }
  &[shape] {
    --_icon-fs-icon: calc(var(--_icon-h-head)*0.583);
    --_icon-h-img: 75%;
  }
  &[shape=round] {
    --_icon-r: 100%;
  }
  &[shape=radius] {
    --_icon-r: var(--_r-input);
  }
  [rep=tips] {
    color: var(--_icon-c-tips);
    font-size: var(--_icon-fs-tips);
  }
  &:where([size]:not([shape])) [rep=icon] {
    --_icon-fs-icon: var(--_icon-h-head);
  }
  &[size=sm] {
    --_icon-h-head: var(--_rem-display);
  }
  &[size=md] {
    --_icon-h-head: var(--_rem-hero);
  }
  &[size=lg] {
    --_icon-h-head: calc(var(--_rem-display)*2);
    --_icon-r: var(--_r-input-lg);
  }
  &:where(:not([dir=v])) {
    [rep=tips] {
      margin-inline-start: var(--_rem-min);
    }
  }
  &[dir=v] {
    --_icon-fs-icon: var(--_rem-list);
    [rep=wrap] {
      text-align: center;
      flex-direction: column;
    }
    &[shape] {
      --_icon-fs-icon: calc(var(--_icon-h-head)*0.583);
    }
    [rep=tips] {
      font-size: var(--_icon-fs-tips);
      line-height: var(--_icon-lh-tips);
      margin-block-start: var(--_rem-min);
    }
  }
}
/*Deform*/
OC-DEFORM {
  --_deform-sz: var(--_rem-input);
  --_deform-w-line: 1.6rem;
  --_deform-h-line: 0.2rem;
  --_deform-c: var(--_c-text);
  --_deform-bc: var(--_c-text-bd);
  --_deform-bg: transparent;
  --_deform-r: var(--_r-input);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  border-radius: var(--_deform-r);
  height: var(--_deform-sz);
  aspect-ratio: 1 / 1;
  background-color: var(--_deform-bg);
  cursor: pointer;
  transition: all var(--_dur-2) linear;
  position: relative;
  &:before {
    border-radius: var(--_r);
    border-color: var(--_deform-c);
  }
  [rep=wrap] {
    height: var(--_rem-display);
    aspect-ratio: 1 / 1;
    display: inline-flex;
    position: relative;
    >* {
      height: var(--_deform-h-line);
      width: var(--_deform-w-line);
      background-color: var(--_deform-c);
      border-radius: var(--_deform-h-line);
      transition: all var(--_dur-2) linear;
      position: absolute;
      inset-inline-start: calc((100% - var(--_deform-w-line))/2);
      inset-block-start: calc((100% - var(--_deform-h-line))/2);
    }
  }
  &[type=info] {
    &:where(:not(._opened)) {
      [rep=wrap]>:nth-child(1) {
        width: var(--_deform-h-line);
        inset-block-start: calc((100% - var(--_deform-w-line))/2);
        inset-inline-start: calc((100% - var(--_deform-h-line))/2);
      }
      [rep=wrap]>:nth-child(2) {
        width: calc(var(--_deform-w-line) - var(--_deform-h-line));
        transform: rotate(90deg);
        inset-block-start: calc(50% + var(--_deform-h-line));
        inset-inline-start: calc(50% - var(--_deform-w-line)/2 + var(--_deform-h-line)/2);
      }
    }
    [rep=wrap]>:nth-child(3) {
      opacity: 0;
    }
  }
  &[type=add] {
    &:where(:not(._opened)) {
      [rep=wrap]>:nth-child(2) {
        transform: rotate(90deg);
      }
    }
    [rep=wrap]>:nth-child(3) {
      opacity: 0;
    }
  }
  &[type=left],
  &[type=right],
  &[type=up],
  &[type=down] {
    --_deform-w-line: 1rem;
    [rep=wrap]>:nth-child(1) {
      transform: rotate(-45deg);
    }
    [rep=wrap]>:nth-child(2) {
      transform: rotate(45deg);
    }
    [rep=wrap]>:nth-child(3) {
      opacity: 0;
    }
  }
  &[type=left] {
    [rep=wrap]>:nth-child(1) {
      inset-block-start: calc(50% - 0.3rem);
    }
    [rep=wrap]>:nth-child(2) {
      inset-block-start: calc(50% + 0.3rem);
    }
    &._opened {
      [rep=wrap]>:nth-child(1) {
        inset-block-start: calc(50% + 0.3rem);
      }
      [rep=wrap]>:nth-child(2) {
        inset-block-start: calc(50% - 0.3rem);
      }
    }
  }
  &[type=right] {
    [rep=wrap]>:nth-child(1) {
      inset-block-start: calc(50% + 0.3rem);
    }
    [rep=wrap]>:nth-child(2) {
      inset-block-start: calc(50% - 0.3rem);
    }
    &._opened {
      [rep=wrap]>:nth-child(1) {
        inset-block-start: calc(50% - 0.3rem);
      }
      [rep=wrap]>:nth-child(2) {
        inset-block-start: calc(50% + 0.3rem);
      }
    }
  }
  &[type=up] {
    [rep=wrap]>:nth-child(1) {
      inset-inline-start: calc(50% - 0.8rem);
    }
    [rep=wrap]>:nth-child(2) {
      inset-inline-start: calc(50% - 0.2rem);
    }
    &._opened {
      [rep=wrap]>:nth-child(1) {
        inset-inline-start: calc(50% - 0.2rem);
      }
      [rep=wrap]>:nth-child(2) {
        inset-inline-start: calc(50% - 0.8rem);
      }
    }
  }
  &[type=down] {
    [rep=wrap]>:nth-child(1) {
      inset-inline-start: calc(50% - 0.2rem);
    }
    [rep=wrap]>:nth-child(2) {
      inset-inline-start: calc(50% - 0.8rem);
    }
    &._opened {
      [rep=wrap]>:nth-child(1) {
        inset-inline-start: calc(50% - 0.8rem);
      }
      [rep=wrap]>:nth-child(2) {
        inset-inline-start: calc(50% - 0.2rem);
      }
    }
  }
  &[type*=menu] {
    &:where(:not(._opened)) {
      [rep=wrap]>:nth-child(1) {
        inset-block-start: calc(50% - 0.6rem);
      }
      [rep=wrap]>:nth-child(3) {
        inset-block-start: calc(50% + 0.4rem);
      }
    }
  }
  &[type=menustart],
  &[type=menuend] {
    &:where(:not(._opened)) {
      [rep=wrap]>:nth-child(1) {
        width: calc(var(--_deform-w-line)*0.625);
      }
      [rep=wrap]>:nth-child(3) {
        width: calc(var(--_deform-w-line)*0.875);
      }
    }
  }
  &[type=menuend] {
    &:where(:not(._opened)) {
      [rep=wrap]>* {
        inset-inline-start: auto;
        inset-inline-end: calc((100% - var(--_deform-w-line))/2);
      }
    }
  }
  &[type=close],
  &[type=menu]._opened,
  &[type=menustart]._opened,
  &[type=menuend]._opened,
  &[type=info]._opened,
  &[type=add]._opened {
    [rep=wrap]>:nth-child(1) {
      transform: rotate(-45deg);
    }
    [rep=wrap]>:nth-child(2) {
      transform: rotate(45deg);
    }
    [rep=wrap]>:nth-child(3) {
      opacity: 0;
    }
  }
  &[bordered]:before,
  &[shape]:before {
    content: "";
    box-sizing: border-box;
    border: 1px solid var(--_deform-bc);
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform-origin: 0 0;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    border-radius: var(--_deform-r);
  }
  &[shape=square] {
    --_deform-r: 0
  }
  &[shape=round] {
    --_deform-r: 100%;
  }
  &[size=lg] {
    --_deform-r: var(--_r-input-lg);
    --_deform-sz: var(--_rem-max);
  }
  &[size=sm] {
    --_deform-w-line: 1.2rem;
    --_deform-r: var(--_r-input-sm);
    --_deform-sz: var(--_rem-display);
  }
  &[size=sm]:where([type*=menu]) [rep=wrap]>:nth-child(1) {
    inset-block-start: calc(50% - 0.5rem);
  }
  &[size=sm]:where([type*=menu]) [rep=wrap]>:nth-child(3) {
    inset-block-start: calc(50% + 0.3rem);
  }
  &[size=sm]:where([type=left]),
  &[size=sm]:where([type=right]),
  &[size=sm]:where([type=up]),
  &[size=sm]:where([type=down]) {
    --_deform-w-line: 0.8rem;
  }
  &[size=sm]:where([type=left]) {
    [rep=wrap]>:nth-child(1) {
      inset-block-start: calc(50% - 0.2rem);
    }
    [rep=wrap]>:nth-child(2) {
      inset-block-start: calc(50% + 0.2rem);
    }
  }
  &[size=sm]:where([type=right]) {
    [rep=wrap]>:nth-child(1) {
      inset-block-start: calc(50% + 0.2rem);
    }
    [rep=wrap]>:nth-child(2) {
      inset-block-start: calc(50% - 0.2rem);
    }
  }
  &[size=sm]:where([type=up]) {
    [rep=wrap]>:nth-child(1) {
      inset-inline-start: calc(50% - 0.6rem);
    }
    [rep=wrap]>:nth-child(2) {
      inset-inline-start: calc(50% - 0.1rem);
    }
  }
  &[size=sm]:where([type=down]) {
    [rep=wrap]>:nth-child(1) {
      inset-inline-start: calc(50% - 0.1rem);
    }
    [rep=wrap]>:nth-child(2) {
      inset-inline-start: calc(50% - 0.6rem);
    }
  }
  &:where(:not([filled])) {
    &[theme=prim] {
      --_deform-c: var(--_c-prim);
    }
    &[theme=succ] {
      --_deform-c: var(--_c-succ);
    }
    &[theme=error] {
      --_deform-c: var(--_c-error);
    }
    &[theme=warn] {
      --_deform-c: var(--_c-warn);
    }
    &[theme=info] {
      --_deform-c: var(--_c-info);
    }
    &[theme=issue] {
      --_deform-c: var(--_c-issue);
    }
    &[theme=text] {
      --_deform-c: var(--_c-text);
    }
    &[theme=brief] {
      --_deform-c: var(--_c-brief);
    }
    &[theme=caption] {
      --_deform-c: var(--_c-caption);
    }
  }
  &:where([filled]) {
    --_deform-c: var(--_c-white);
    --_deform-bg: hsl(var(--_h-text), var(--_s-text), 20%);
    &:before {
      display: none;
    }
    &[theme=prim] {
      --_deform-bg: var(--_c-prim);
    }
    &[theme=succ] {
      --_deform-bg: var(--_c-succ);
    }
    &[theme=error] {
      --_deform-bg: var(--_c-error);
    }
    &[theme=warn] {
      --_deform-c: var(--_c-black);
      --_deform-bg: var(--_c-warn);
    }
    &[theme=info] {
      --_deform-bg: var(--_c-info);
    }
    &[theme=issue] {
      --_deform-bg: var(--_c-issue);
    }
    &[theme=text] {
      --_deform-bg: hsl(var(--_h-text), var(--_s-text), 20%);
    }
    &[theme=brief] {
      --_deform-c: var(--_c-brief);
      --_deform-bg: var(--_c-brief-bg);
    }
    &[theme=caption] {
      --_deform-c: var(--_c-caption);
      --_deform-bg: var(--_c-caption-bg);
    }
  }
  &[disabled] {
    cursor: not-allowed;
  }
  &[disabled] {
    opacity: var(--_o-disabled);
  }
}
/*Line*/
OC-LINE {
    --_line-sz: 1px;
    --_line-dir-s: right;
    --_line-dir-e: left;
    --_line-bg: var(--_c-text-bd);
    --_line-c: var(--_c-caption);
    --_line-offset: 2em;
    --_line-g: 0px;
    --_line-g-coef: 0;
    display: block;
    clear: both;
    [rep=wrap] {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        overflow: hidden;
    }
    [rep=start],
    [rep=end] {
        height: var(--_line-sz);
        background-color: var(--_line-bg);
        flex: auto;
    }
    [rep=label] {
        color: var(--_line-c);
        margin: auto var(--_m);
    }
    &:where([align=start]:has([rep=label])) [rep=start],
    &:where([align=end]:has([rep=label])) [rep=end] {
        flex: none;
    }
    &:where([align=start]:not([dir=v]):has([rep=label])) [rep=start],
    &:where([align=end]:not([dir=v]):has([rep=label])) [rep=end] {
        width: var(--_line-offset);
    }
    &[type=dashed] [rep=start] {
        background: linear-gradient(to var(--_line-dir-s), var(--_line-bg) 0%, var(--_line-bg) 50%, transparent 50%, transparent 100%);
        background-position: left center;
    }
    &[type=dashed] [rep=end] {
        background: linear-gradient(to var(--_line-dir-e), var(--_line-bg) 0%, var(--_line-bg) 50%, transparent 50%, transparent 100%);
        background-position: right center;
    }
    &[type=dashed] [rep=start],
    &[type=dashed] [rep=end] {
        background-size: calc(var(--_line-sz)*10) var(--_line-sz);
        background-repeat: repeat-x;
    }
    &[type=slash] [rep=start],
    &[type=slash] [rep=end] {
        background: linear-gradient(45deg, var(--_line-bg) 0, var(--_line-bg) 25%, transparent 25%, transparent 50%, var(--_line-bg) 50%, var(--_line-bg) 75%, transparent 75%, transparent);
        background-size: .6rem .6rem;
    }
    &[size=sm] [rep=start],
    &[size=sm] [rep=end] {
        --_line-sz: 2px;
    }
    &[size=md] {
        font-size: var(--_rem-lead);
    }
    &[size=md] [rep=start],
    &[size=md] [rep=end] {
        --_line-sz: 4px;
    }
    &[size=lg] {
        font-size: var(--_fs-lg);
    }
    &[size=lg] [rep=start],
    &[size=lg] [rep=end] {
        --_line-sz: 8px;
    }
    &[theme=prim] {
        --_line-bg: var(--_c-prim-bd);
        --_line-c: var(--_c-prim);
    }
    &[theme=error] {
        --_line-bg: var(--_c-error-bd);
        --_line-c: var(--_c-error);
    }
    &[theme=succ] {
        --_line-bg: var(--_c-succ-bd);
        --_line-c: var(--_c-succ);
    }
    &[theme=info] {
        --_line-bg: var(--_c-info-bd);
        --_line-c: var(--_c-info);
    }
    &[theme=warn] {
        --_line-bg: var(--_c-warn-bd);
        --_line-c: var(--_c-warn);
    }
    &[theme=issue] {
        --_line-bg: var(--_c-issue-bd);
        --_line-c: var(--_c-issue);
    }
    &[theme=text] {
        --_line-bg: var(--_c-text-bd);
        --_line-c: var(--_c-text);
    }
    &[dir=v] {
        --_line-dir-s: botom;
        --_line-dir-e: top;
        width: var(--_line-sz);
        height: 100%;
        [rep=wrap] {
            width: inherit;
            height: inherit;
            flex-direction: column;
        }
        &:has([rep=label]) {
            width: var(--_rem-display);
        }
        [rep=label] {
            writing-mode: vertical-rl;
            margin: var(--_m) auto;
        }
        [rep=start],
        [rep=end] {
            width: var(--_line-sz);
            height: auto;
        }
        &:where([align=start]:has([rep=label])) [rep=start],
        &:where([align=end]:has([rep=label])) [rep=end] {
            height: var(--_line-offset);
        }
        &[type=dashed] [rep=start],
        &[type=dashed] [rep=end] {
            background-size: var(--_line-sz) calc(var(--_line-sz)*10);
            background-repeat: repeat-y;
        }
    }
    &:where(:not([dir=v])) {
        margin-block-start: calc(var(--_line-g) + var(--_rem-space)*var(--_line-g-coef));
        margin-block-end: calc(var(--_line-g) + var(--_rem-space)*var(--_line-g-coef));
    }
    &:where([dir=v]) {
        margin-inline-start: calc(var(--_line-g) + var(--_rem-space)*var(--_line-g-coef));
        margin-inline-end: calc(var(--_line-g) + var(--_rem-space)*var(--_line-g-coef));
    }
    &[break=xxs] {
        --_line-g: var(--_rem-min);
    }
    &[break=xs] {
        --_line-g: var(--_rem-space);
    }
    &[break=sm] {
        --_line-g: var(--_rem-body);
    }
    &[break=md],
    &[break=lg],
    &[break=xl],
    &[break=xxl] {
        --_line-g: var(--_rem-lead);
    }
    &[break=md] {
        --_line-g-coef: 0.5;
    }
    &[break=lg] {
        --_line-g-coef: 1;
    }
    &[break=xl] {
        --_line-g-coef: 1.5;
    }
    &[break=xxl] {
        --_line-g-coef: 2;
    }
}
/*Message*/
._message {
    --_msg-w: 600px;
    width: min(var(--_msg-w),100%);
    position: fixed;
    inset-inline-start: 50%;
    inset-block-start: 0;
    z-index: 910;
    transform: translate(calc(-50%*var(--_dir-coef)), 0);
    OC-CALLOUT {
        margin: var(--_m) var(--_m) 0 var(--_m);
        box-shadow: 1px 1px .5rem rgba(0, 0, 0, .06);
        display: none;
        &[noprogress] OC-PROGRESS {
            opacity: 0;
        }
    }
    &:where([placement=left-top]) {
        --_msg-w: 400px;
        inset-inline-start: 0;
        transform: none;
    }
    &:where([placement=right-top]) {
        --_msg-w: 400px;
        inset-inline-start: auto;
        inset-inline-end: 0;
        transform: none;
    }
    &:where([placement=left-center]) {
        --_msg-w: 400px;
        inset-inline-start: 0;
        inset-block-start: 50%;
        transform: translate(0, -50%);
    }
    &:where([placement=center]) {
        inset-block-start: 50%;
        transform: translate(calc(-50%*var(--_dir-coef)), -50%);
    }
    &:where([placement=right-center]) {
        --_msg-w: 400px;
        inset-inline-start: auto;
        inset-inline-end: 0;
        inset-block-start: 50%;
        transform: translate(0, -50%);
    }
    &:where([placement=left-bottom]) {
        --_msg-w: 400px;
        inset-inline-start: 0;
        inset-block-start: auto;
        inset-block-end: 0;
        transform: none;
    }
    &:where([placement=center-bottom]) {
        inset-block-start: auto;
        inset-block-end: 0;
    }
    &:where([placement=right-bottom]) {
        --_msg-w: 400px;
        inset-inline-start: auto;
        inset-inline-end: 0;
        inset-block-start: auto;
        inset-block-end: 0;
        transform: none;
    }
    &:where([placement*=-center], [placement=center]) OC-CALLOUT {
        margin-block-start: calc(var(--_m)/2);
        margin-block-end: calc(var(--_m)/2);
    }
    &:where([placement*=-bottom]) OC-CALLOUT {
        margin-block-start: 0;
        margin-block-end: var(--_m);
    }
}
/*
Last modified: 2025-06-21 23:15:14
*/
/*Anchors*/
OC-ANCHORS {
    --_anch-end: var(--_m);
    --_anch-top: calc(var(--_rem-hero) + var(--_rem-display));
    --_anch-p: var(--_p);
    --_anch-bg: var(--_c-stage-80);
    --_anch-r: var(--_r);
    --_anch-pos: fixed;
    padding: var(--_anch-p);
    box-sizing: border-box;
    border-radius: var(--_anch-r);
    background-color: var(--_anch-bg);
    display: flex;
    position: var(--_anch-pos);
    inset-inline-end: var(--_anch-end);
    inset-block-start: var(--_anch-top);
    z-index: 610;
    &[expanded] {
        background: transparent;
    }
    ul {
        border-inline-start: 1px solid var(--_c-text-bd);
    }
    li {
        padding-inline-start: var(--_p);
        position: relative;
        [rep=head] {
            line-height: var(--_rem-subtitle);
            padding: calc((var(--_rem-display) - var(--_rem-subtitle))/2) 0;
            position: relative;
            &:after {
                content: '';
                width: 1px;
                height: 100%;
                position: absolute;
                inset-inline-start: calc(var(--_p)*-1 - 1px);
                inset-block-start: 0;
                transition: all var(--_dur-1) linear;
            }
        }
        [rep=head][active] {
            color: var(--_c-prim);
            [rep=label] {
                color: var(--_c-prim);
            }
            &:after {
                background-color: var(--_c-prim);
            }
        }
        [rep=label] {
            color: var(--_c-text);
            cursor: pointer;
            transition: all var(--_dur-1) linear;
            &:hover {
                color: var(--_c-prim);
            }
        }
    }
}
._anchor {
    position: relative;
    ._hash {
        font-weight: normal;
        position: absolute;
        inset-inline-start: 0;
        width: var(--_rem-display);
        text-align: center;
        transform: translateX(calc(-100%*var(--_dir-coef)));
    }
}
/*Masonry layout*/
._masonry {
  --_msnry-cols: 2;
  --_msnry-g: var(--_rem-space);
  display: grid;
  grid-template-columns: repeat(var(--_msnry-cols), 1fr);
  align-items: start;
  justify-content: center;
  grid-auto-rows: 1px;
  column-gap: var(--_msnry-g);
  >* {
    box-sizing: border-box;
    position: relative;
    video{
      display: block;
    }
  }
}
/*validation*/
._valid {
    --_valid-fs: var(--_px-caption);
    --_valid-lh: var(--_lh-md);
    --_valid-p-tb: var(--_em-min-dec);
    --_valid-g: var(--_valid-p-tb);
    font-size: var(--_valid-fs);
    line-height: var(--_valid-lh);
    padding: var(--_valid-p-tb) 0;
    display: flex;
    position: relative;
    [class*=icon] {
        font-size: var(--_valid-fs);
        margin-inline-end: var(--_valid-g);
    }
}
input:where(._c-succ:not([disabled], [type=checkbox], [type=radio], [type=range], [type=submit], [type=reset])),
textarea:where(._c-succ:not([disabled])),
select:where(._c-succ:not([disabled])) {
    border-color: var(--_c-succ-bd);
    background-color: var(--_c-succ-bg);
    &:hover {
        border-color: var(--_c-succ);
    }
    &:focus {
        color: var(--_c-succ);
        border-color: var(--_c-succ);
        outline-color: var(--_c-succ-sd);
    }
    &::placeholder {
        color: var(--_c-succ-ht);
    }
}
input:where(._c-error:not([disabled], [type=checkbox], [type=radio], [type=range], [type=submit], [type=reset])),
textarea:where(._c-error:not([disabled])),
select:where(._c-error:not([disabled])) {
    border-color: var(--_c-error-bd);
    background-color: var(--_c-error-bg);
    &:hover {
        border-color: var(--_c-error);
    }
    &:focus {
        color: var(--_c-error);
        border-color: var(--_c-error);
        outline-color: var(--_c-error-sd);
    }
    &::placeholder {
        color: var(--_c-error-ht);
    }
}
/*
Last modified: 2025-06-21 23:17:22
*/
/*Good component*/
OC-GOOD {
    text-align: center;
    margin: var(--_rem-display) auto;
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    [rep=wrap] {
        line-height: var(--_rem-input);
        border-radius: var(--_rem-input);
        padding: 0 var(--_rem-input);
        border: 1px solid var(--_c-text-bd);
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all var(--_dur-1) linear;
        position: relative;
    }
    &:where(:not([increased])) [rep=wrap]:hover {
        color: var(--_c-white);
        background-color: var(--_c-prim);
        border-color: var(--_c-prim);
        cursor: pointer;
        [rep=icon] {
            color: var(--_c-white);
        }
    }
    [rep=label] {}
    [rep=value] {
        transition: all var(--_dur-1) linear;
    }
    [rep=icon] {
        color: var(--_c-prim);
        margin-inline-end: var(--_rem-space);
        transition: all var(--_dur-1) linear;
    }
    [rep=tips] {
        font-size: var(--_rem-caption);
        color: var(--_c-text-aj);
        text-align: center;
    }
    &[increased] {
        [rep=wrap],
        [rep=tips],
        [rep=label],
        [rep=icon] {
            color: var(--_c-caption);
        }
    }
}
OC-FORMAT {
    display: inline-flex;
    [rep=wrap]{
        display: inline-flex;
    }
}
/*
Last modified: 2025-06-22 07:54:40
*/
/*Infinite Scroll*/
._infinite {
  ._infinite-item {
    content-visibility: auto;
    contain: layout paint;
  }
  ._infinite-status {
    text-align: center;
    padding: var(--_rem-body) 0;
    [rep="tips"] {
      color: var(--_c-caption);
    }
    [rep="spin"] {
      padding: var(--_rem-body);
    }
    &:where(:not([status="finish"])) ._pagination,
    &:where(:not([status="finish"])) [rep="page"] {
      display: none;
    }
    &:where([status="finish"]) [rep="next"] {
      display: none;
    }
    &:where([status="finish"]) [rep="spin"],
    &:where([status="loaded"]) [rep="spin"] {
      display: none;
    }
  }
  &:where([trigger="click"])
    ._infinite-status:where(:not([status="preload"]))
    [rep="next"] {
    display: none;
  }
  &:where(:not([trigger="scroll"]))
    ._infinite-status:where([status="preload"])
    [rep="spin"] {
    display: none;
  }
}
/*Virtualize*/
._virt {
  &>._virt-wrap {
    position: relative;
  }
  ._virt-space {
    height: 0;
    overflow: hidden;
  }
  &[axis=x] {
    overflow-y: hidden;
    overflow-x: auto;
    &>._virt-wrap {
      display: flex;
      width: 10000000000vw;
    }
  }
  &[axis=y] {
    overflow-x: hidden;
    overflow-y: auto;
    &>._virt-wrap {
      height: 10000000000vh;
    }
  }
}
/*Tag & Tags*/
._tags {
    --_tags-h: var(--_rem-display);
    --_tags-m: var(--_rem-space);
    --_tags-r: var(--_r);
    --_tags-bw: 1px;
    --_tags-fs: var(--_rem-body);
    --_tags-p: var(--_rem-space);
    --_tags-h-img: var(var(--_rem-subtitle));
    margin-inline-end: calc(var(--_tags-m)*-1);
    margin-block-end: calc(var(--_tags-m)*-1);
    display: flex;
    flex-wrap: wrap;
    contain: content;
    &:empty {
        --_tags-m: 0;
    }
    input[type=text] {
        width: 1em;
        min-width: 6em;
        border-radius: 0;
        border-block-start-width: 0;
        border-inline-start-width: 0;
        border-inline-end-width: 0;
        padding: 0;
        margin-block-end: var(--_tags-m);
        height: var(--_tags-h);
        line-height: var(--_tags-h);
        transition-property: color, border-color;
    }
    input[type=text]:focus {
        outline-width: 0;
    }
    [rep=empty] {
        margin-block-end: var(--_tags-m);
        line-height: var(--_tags-h);
    }
    a {
        color: inherit;
    }
    ._tag {
        margin-inline-end: var(--_tags-m);
        margin-block-end: var(--_tags-m);
    }
}
._tag {
    --_tag-p: var(--_tags-p, var(--_rem-space));
    --_tag-h: var(--_tags-h, var(--_rem-display));
    --_tag-c: var(--_c-text);
    --_tag-bc: var(--_c-text-bd);
    --_tag-bg: transparent;
    --_tag-r: var(--_tags-r, var(--_r));
    --_tag-bw: var(--_tags-bw, 1px);
    --_tag-h-img: var(--_tags-h-img, var(--_rem-subtitle));
    --_tag-g: var(--_rem-min);
    --_tag-fs: var(--_tags-fs, var(--_rem-body));
    font-size: var(--_tag-fs);
    color: var(--_tag-c);
    height: var(--_tag-h);
    line-height: var(--_tag-h);
    box-sizing: border-box;
    padding: 0 var(--_tag-p);
    border: var(--_tag-bw) solid var(--_tag-bc);
    background-color: var(--_tag-bg);
    border-radius: var(--_tag-r);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    [rep=icon],
    [rep=disk],
    [rep=cube],
    [rep=image] {
        margin-inline-end: var(--_tag-g);
    }
    [rep=disk],
    [rep=cube] {
        height: var(--_tag-h-img);
        aspect-ratio: 1/1;
        object-fit: cover;
    }
    [rep=disk] {
        border-radius: 100%;
    }
    [rep=cube] {
        border-radius: var(--_r);
    }
    [rep=image] {
        max-height: var(--_tag-h-img);
    }
    [rep=remove] {
        font-family: var(--_ff-icon);
        margin-inline-end: calc(var(--_tag-p)*-1 + 0.286em);
        margin-inline-start: var(--_tag-p);
        &:hover:before {
            color: var(--_c-error);
            opacity: 1;
            cursor: pointer;
        }
    }
    [rep=remove]:before {
        content: 'close';
        display: inline-block;
        opacity: var(--_o-disabled);
        scale: 0.8;
        transition: all var(--_dur-2) linear;
    }
    &:hover,
    &:focus {
        color: var(--_tag-c);
        border-color: var(--_tag-bc);
        background-color: var(--_tag-bg);
    }
    &[selected] {
        border-color: var(--_tag-c);
    }
    &[disabled] {
        opacity: var(--_o-disabled);
    }
}
._tags[theme=prim] ._tag,
._tag[theme=prim] {
    --_tag-c: var(--_c-prim-dp);
    --_tag-bc: var(--_c-prim-bd);
    --_tag-bg: var(--_c-prim-bg);
}
._tags[theme=succ] ._tag,
._tag[theme=succ] {
    --_tag-c: var(--_c-succ-dp);
    --_tag-bc: var(--_c-succ-bd);
    --_tag-bg: var(--_c-succ-bg);
}
._tags[theme=error] ._tag,
._tag[theme=error] {
    --_tag-c: var(--_c-error-dp);
    --_tag-bc: var(--_c-error-bd);
    --_tag-bg: var(--_c-error-bg);
}
._tags[theme=warn] ._tag,
._tag[theme=warn] {
    --_tag-c: var(--_c-warn-dp);
    --_tag-bc: var(--_c-warn-bd);
    --_tag-bg: var(--_c-warn-bg);
}
._tags[theme=issue] ._tag,
._tag[theme=issue] {
    --_tag-c: var(--_c-issue-dp);
    --_tag-bc: var(--_c-issue-bd);
    --_tag-bg: var(--_c-issue-bg);
}
._tags[theme=info] ._tag,
._tag[theme=info] {
    --_tag-c: var(--_c-info-dp);
    --_tag-bc: var(--_c-info-bd);
    --_tag-bg: var(--_c-info-bg);
}
._tags[theme=text] ._tag,
._tag[theme=text] {
    --_tag-bg: var(--_c-text-bg);
}
._tags[theme=brief] ._tag,
._tag[theme=brief] {
    --_tag-c: var(--_c-brief);
    --_tag-bc: var(--_c-brief-bd);
    --_tag-bg: var(--_c-brief-bg);
}
._tags[theme=caption] ._tag,
._tag[theme=caption] {
    --_tag-c: var(--_c-caption);
    --_tag-bc: var(--_c-caption-bd);
    --_tag-bg: var(--_c-caption-bg);
}
._tags[type=borderless] ._tag,
._tag[type=borderless] {
    --_tag-bw: 0;
}
._tags[shape=square] ._tag,
._tag[shape=square] {
    --_tag-r: 0;
}
._tags[shape=round] ._tag,
._tag[shape=round] {
    --_tag-r: var(--_tag-h);
}
._tags[size=sm] {
    --_tags-h: var(--_rem-list);
    --_tags-m: var(--_rem-min);
    --_tags-fs: var(--_rem-caption);
    --_tags-p: var(--_rem-min);
    --_tags-h-img: var(--_rem-body);
}
._tags[size=lg] {
    --_tags-h: var(--_rem-input);
    --_tags-m: var(--_rem-body);
    --_tag-p: var(--_rem-body);
}
._tags[compact] {
    --_tags-m: var(--_rem-min);
}
._tags[compact] ._tag {
    margin-inline-end: var(--_tags-m);
    margin-block-end: var(--_tags-m);
}
._tags[compact] ._tag,
._tag[compact] {
    --_tag-p: var(--_rem-min);
}
._tags[compact] input[type=text],
._tags[compact] [rep=empty] {
    margin-block-end: var(--_tags-m);
}
._tags[type=plain] {
    --_tags-m: 0;
}
._tags[type=plain] ._tag,
._tag[type=plain] {
    --_tag-p: 0;
    --_tag-bw: 0;
    font-size: inherit;
}
._tags[type=plain] ._tag {
    margin-inline-end: var(--_rem-space);
}
/*Pill*/
OC-PILL {
    --_pill-fs: var(--_fs-body);
    --_pill-h: var(--_rem-display);
    --_pill-r: var(--_r-input);
    --_pill-bw: 2px;
    --_pill-bc: var(--_c-text-bd);
    --_pill-bg: var(--_pill-bc);
    --_pill-thumb-w: 0;
    --_pill-thumb-offset: 0;
    --_pill-thumb-bg: var(--_c-white);
    --_pill-thumb-bw: 0;
    --_pill-thumb-bc: var(--_pill-thumb-bg);
    --_pill-item-c: var(--_c-text);
    --_pill-item-c-sel: var(--_c-text);
    --_pill-item-c-hov: var(--_c-text);
    --_pill-item-p: var(--_rem-body);
    font-size: var(--_pill-fs);
    text-align: center;
    height: var(--_pill-h);
    border-radius: var(--_pill-r);
    border: var(--_pill-bw) solid var(--_pill-bc);
    background-color: var(--_pill-bg);
    box-sizing: border-box;
    display: inline-flex;
    vertical-align: middle;
    max-width: 100%;
    transition: all var(--_dur-2) linear;
    &[full] {
        display: flex;
        width: 100%;
    }
    &[disabled] {
        opacity: 0.5;
    }
    input {
        position: fixed;
        inset-inline-start: -100000px;
    }
    [rep=wrap] {
        border-radius: inherit;
        position: relative;
        width: 100%;
    }
    [rep=items] {
        height: calc(var(--_pill-h) - var(--_pill-bw)*2);
        line-height: calc(var(--_pill-h) - var(--_pill-bw)*2);
        display: flex;
        position: relative;
        z-index: 2;
        >* {
            color: var(--_pill-item-c);
            padding: 0 var(--_pill-item-p);
            flex: auto;
            transition: all var(--_dur-2) linear;
            &:hover {
                cursor: pointer;
            }
            &:hover [rep=label] {
                color: var(--_pill-item-c-hov);
            }
            &[selected] [rep=label] {
                color: var(--_pill-item-c-sel);
            }
            &[disabled] {
                opacity: 0.5;
            }
            [rep=label]{
                transition: all var(--_dur-2) linear;
            }
        }
        [rep=disk],
        [rep=cube],
        [rep=image] {
            --_legend-h: var(--_rem-subtitle);
            margin-inline-end: var(--_rem-space);
        }
    }
    [rep=thumb] {
        border-radius: calc(var(--_pill-r) - var(--_pill-bw));
        transform: translateX(var(--_pill-thumb-offset));
        width: var(--_pill-thumb-w);
        height: calc(var(--_pill-h) - var(--_pill-bw)*2);
        border: var(--_pill-thumb-bw) solid var(--_pill-thumb-bc);
        background-color: var(--_pill-thumb-bg);
        box-sizing: border-box;
        position: absolute;
        left: 0;
        inset-block-start: 0;
        pointer-events: none;
        transition: all var(--_dur-2) var(--_bez-eo);
    }
    &[size=sm] {
        --_pill-fs: var(--_fs-caption);
        --_pill-h: var(--_rem-list);
        --_pill-r: var(--_r-input-sm);
        --_pill-item-p: var(--_rem-space);
    }
    &[size=lg] {
        --_pill-h: var(--_rem-input);
        --_pill-r: var(--_r-input-lg);
        --_pill-item-p: var(--_rem-subtitle);
    }
}
._pill-body {
    >:where(:not([selected])) {
        visibility: hidden;
        pointer-events: none;
        position: absolute;
    }
}
/*Gesture*/
[gesture=start] {}
[gesture=move] {}
/*Drag & drop*/
._holder-drop {
    --_holder-r: var(--_r);
    --_holder-h: auto;
    --_holder-w: auto;
    --_holder-m: auto;
    --_holder-bc: var(--_c-caption);
    --_holder-c: var(--_c-caption);
    color: var(--_holder-c);
    height: var(--_holder-h);
    width: var(--_holder-w);
    border: 2px dashed var(--_holder-bc);
    border-radius: var(--_holder-r);
    margin: var(--_holder-m);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
._holder-drop {
    transition: all var(--_dur-1) linear;
    &[dropping] {
        --_holder-bc: var(--_c-prim);
        --_holder-c: var(--_c-prim);
    }
}
._holder-empty {
    color: var(--_c-caption);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    pointer-events: none;
}
._drag-wait {
    opacity: 0.5;
}
._drag-ghost {
    opacity: 0.5;
    pointer-events: none;
    position: fixed !important;
    z-index: 720;
}
._drop-arrow {
    font-size: var(--_rem-caption);
    color: var(--_c-prim);
    line-height: 1em;
    height: 1em;
    pointer-events: none;
    position: absolute;
    &[placement=left] {
        inset-inline-start: 0;
        &[point=before] {
            inset-block-start: 0;
            translate: -100% -50%;
        }
        &[point=after] {
            inset-block-end: 0;
            translate: -100% 50%;
        }
        &[point=inside] {
            inset-block-start: 50%;
            translate: -100% -50%;
        }
    }
    &[placement=right] {
        rotate: 180deg;
        inset-inline-end: 0;
        &[point=before] {
            inset-block-start: 0;
            translate: 100% -50%;
        }
        &[point=after] {
            inset-block-end: 0;
            translate: 100% 50%;
        }
        &[point=inside] {
            inset-block-start: 50%;
            translate: 100% -50%;
        }
    }
    &[placement=top] {
        rotate: 90deg;
        inset-block-start: 0;
        &[point=before] {
            inset-inline-start: 0;
            translate: -50% -100%;
        }
        &[point=after] {
            inset-inline-end: 0;
            translate: 50% -100%;
        }
        &[point=inside] {
            inset-inline-start: 50%;
            translate: -50% -100%;
        }
    }
    &[placement=bottom] {
        rotate: -90deg;
        inset-block-end: 0;
        &[point=before] {
            inset-inline-start: 0;
            translate: -50% 100%;
        }
        &[point=after] {
            inset-inline-end: 0;
            translate: 50% 100%;
        }
        &[point=inside] {
            inset-inline-start: 50%;
            translate: -50% 100%;
        }
    }
}
[dragbody]{
    cursor: grabbing;
}
:where([dragnode]:not(:has([handle]))),
:where([dragnode]) [handle] {
    touch-action: none;
    cursor: grab;
}
[dragbody] :where([dragnode]:not(:has([handle]))),
[dragbody] :where([dragnode]) [handle]{
    cursor: inherit;
}
[dropnode] {}
/*Twilight*/
OC-TWILIGHT {
    --_twi-h: var(--_rem-list);
    --_twi-p: var(--_rem-space);
    --_twi-c: var(--_c-issue);
    --_twi-bc: var(--_c-text-bd);
    --_twi-bw: 1px;
    --_twi-diff-x:25px;
    --_twi-diff-r:0deg;
    vertical-align: middle;
    display: inline-flex;
    user-select: none;
    cursor: pointer;
    [rep=wrap] {
        background-color: var(--_c-stage);
        height: var(--_twi-h);
        padding: 0 var(--_twi-p);
        border: var(--_twi-bw) solid var(--_twi-bc);
        border-radius: calc(var(--_twi-h)/2);
        line-height: var(--_twi-h);
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        transition: all var(--_dur-2) linear;
    }
    [rep=label] {
        font-size: var(--_rem-caption);
        color: var(--_c-brief);
        margin-inline-end: var(--_rem-min);
    }
    [rep=legend] {
        height: min(70%,var(--_rem-subtitle));
        aspect-ratio: 1/1;
        display: inline-flex;
    }
    &:where(:not(:has([rep=label]))) {
        [rep=wrap] {
            aspect-ratio: 1/1;
            padding-inline-start: 0;
            padding-inline-end: 0;
        }
    }
    svg {
        height: 100%;
        aspect-ratio: 1/1;
        color: var(--_twi-c);
        transform: rotate(var(--_twi-diff-r));
    }
    ._twilight-mask {
        transform: translateX(var(--_twi-diff-x));
    }
    ._twilight-main {}
    ._twilight-rays {}
    svg,
    ._twilight-mask,
    ._twilight-main,
    ._twilight-rays {
        transform-origin: center;
        transition: all var(--_dur-2) ease-out;
    }
    &[size=sm] {
        --_twi-h: var(--_rem-subtitle);
        --_twi-p: var(--_rem-min);
    }
    &[size=lg] {
        --_twi-h: var(--_rem-display);
    }
    &[feature=plain] {
        --_twi-bw: 0;
        [rep=wrap] {
            background-color: transparent;
        }
    }
    &:hover {
        --_twi-bc: var(--_c-caption);
    }
}
[dir=rtl] OC-TWILIGHT {
    --_twi-diff-x:0px;
}
[scheme=dark] OC-TWILIGHT {
    --_twi-c: var(--_c-white);
    --_twi-diff-r:-45deg;
    ._twilight-main {
        transform: scale(1.5);
    }
    ._twilight-mask {
        transform: translateX(calc(-8px*var(--_dir-coef) + var(--_twi-diff-x)));
    }
    ._twilight-rays {
        opacity: 0;
    }
}
[scheme=dark][dir=rtl] OC-TWILIGHT,
[scheme=dark] [dir=rtl] OC-TWILIGHT,
[dir=rtl] [scheme=dark] OC-TWILIGHT {
    --_twi-diff-r:45deg;
}
/*Lazy*/
[lazy-src]{
    min-height: var(--_rem-display);
    min-height: var(--_rem-display);
    background-image: var(--_spin);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto min(var(--_rem-input),100%);
}
[lazy-async]{
}
/*
Last modified: 2025-07-07 22:56:33
*/
/*Progress*/
OC-PROGRESS {
    --_prog-time: var(--_dur-2);
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    width: 100%;
}
._progress {
    --_prog-c: var(--_c-prim);
    --_prog-grad: var(--_c-prim-aj);
    --_prog-bg: var(--_c-text-bg);
    --_prog-w: calc(var(--_rem-input)*3);
    --_prog-thk: .6rem;
    --_prog-fs: var(--_rem-body);
    --_prog-fs-label: var(--_prog-fs);
    --_prog-fs-num: var(--_prog-fs-label);
    --_prog-fs-unit: var(--_prog-fs-label);
    --_prog-fs-tips: var(--_prog-fs-label);
    --_prog-lh: var(--_rem-list);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    svg {
        width: var(--_prog-w);
        path {
            fill: none;
            stroke-width: var(--_prog-thk);
        }
        path[rep=track] {
            stroke: var(--_prog-bg);
        }
        path[rep=bar] {
            stroke: var(--_prog-c);
            transition: stroke var(--_prog-time, --_dur-2) var(--_bez-eo), stroke-width var(--_dur-3) var(--_bez-eo);
        }
    }
    [rep=label] {
        font-size: var(--_prog-fs);
        line-height: var(--_prog-lh);
    }
    [rep=control] {
        font-size: var(--_prog-fs);
        transition: all var(--_dur-2) linear;
        &:hover {
            color: var(--_c-prim);
            cursor: pointer;
        }
        &[disabled] {
            opacity: 0.5;
        }
    }
   [rep=number]{
        font-size: var(--_prog-fs-num);
    }
    [rep=unit]{
        font-size: var(--_prog-fs-unit);
    }
    [rep=tips]{
        font-size: var(--_prog-fs-tips);
    }
}
._progress [rep=complete] {
    display: none;
}
._progress[completed] [rep=complete] {
    color: var(--_prog-c);
    display: inline-block;
}
._progress[completed] [rep=unit],
._progress[completed] [rep=number],
._progress[completed] [rep=tips] {
    display: none;
}
._progress[type=line] {
    [rep=text] {
        display: flex;
    }
    [rep=label],
    [rep=control] {
        margin-inline-start: var(--_rem-space);
    }
    &:has([rep=tips]) {
        flex-direction: column;
        align-items: flex-start;
        [rep=track] {
            width: 100%;
        }
        [rep=text] {
            width: 100%;
        }
        [rep=label] {
            margin-inline-start: 0;
            flex: auto;
            display: flex;
        }
        [rep=tips] {
            flex: auto;
        }
    }
    [rep=track] {
        height: var(--_prog-thk);
        border-radius: var(--_prog-thk);
        background-color: var(--_prog-bg);
        flex: auto;
        display: block;
    }
    &[simple] [rep=track] {
        background: transparent;
    }
    [rep=bar] {
        height: 100%;
        background-color: var(--_prog-c);
        border-radius: var(--_prog-thk);
        transition: width var(--_prog-time, --_dur-2) var(--_bez-eo), background-color var(--_prog-time, --_dur-2) var(--_bez-eo);
    }
    &[linecap=square] [rep=track],
    &[linecap=square] [rep=bar] {
        border-radius: 0;
    }
}
._progress[type*=circle] {
    [rep=text] {
        text-align: center;
        position: absolute;
        inset-inline-start: 50%;
    }
}
._progress[type=circle] {
    path {
        transform: rotate(90deg);
        transform-origin: 50% 50%
    }
    [rep=text] {
        transform: translate(calc(-50%*var(--_dir-coef)), -50%);
        inset-block-start: 50%;
    }
}
._progress[type=semicircle] [rep=text] {
    transform: translate(calc(-50%*var(--_dir-coef)), 0);
    inset-block-end: var(--_rem-space);
}
._progress[type=gapcircle] [rep=text] {
    transform: translate(calc(-50%*var(--_dir-coef)), -50%);
    inset-block-start: 60%;
}
._progress[size=xxs] {
    --_prog-thk: .1rem;
}
._progress[size=xs] {
    --_prog-thk: .2rem;
}
._progress[size=sm] {
    --_prog-thk: var(--_rem-min);
}
._progress[size=md] {
    --_prog-thk: var(--_rem-root);
}
._progress[size=lg] {
    --_prog-thk: var(--_rem-caption);
}
._progress[size=xl] {
    --_prog-thk: var(--_rem-body);
}
._progress[size=xxl] {
    --_prog-thk: var(--_rem-subtitle);
}
._progress:where([width][type=line]) {
    width: var(--_prog-w);
}
._progress[width=xxs] {
    --_prog-w: var(--_rem-display);
    --_prog-fs: var(--_rem-caption);
    --_prog-lh: var(--_rem-subtitle);
    &[type=semicircle] [rep=text] {
        inset-block-end: 0;
    }
}
._progress[width=xs] {
    --_prog-w: var(--_rem-input);
    --_prog-fs: var(--_rem-caption);
    --_prog-lh: var(--_rem-subtitle);
    &[type=semicircle] [rep=text] {
        inset-block-end: 0;
    }
}
._progress[width=sm] {
    --_prog-w: calc(var(--_rem-input)*2);
    --_prog-fs: var(--_rem-caption);
    --_prog-lh: var(--_rem-subtitle);
    &[type=semicircle] [rep=text] {
        inset-block-end: 0;
    }
}
._progress[width=md] {
    --_prog-w: calc(var(--_rem-input)*4);
    &[type=semicircle] [rep=text] {
        inset-block-end: var(--_rem-space);
    }
}
._progress[width=lg] {
    --_prog-w: calc(var(--_rem-input)*5);
    &[type=semicircle] [rep=text] {
        inset-block-end: var(--_rem-caption);
    }
    &:where(:not([type=line])){
        --_prog-fs-num:var(--_rem-subtitle);
    }
}
._progress[width=xl] {
    --_prog-w: calc(var(--_rem-input)*6);
    &[type=semicircle] [rep=text] {
        inset-block-end: var(--_rem-subtitle);
    }
    &:where(:not([type=line])){
        --_prog-fs-num:var(--_rem-subtitle);
    }
}
._progress[width=xxl] {
    --_prog-w: calc(var(--_rem-input)*7);
    &[type=semicircle] [rep=text] {
        inset-block-end: var(--_rem-list);
    }
    &:where(:not([type=line])){
        --_prog-fs-num:var(--_rem-subtitle);
    }
}
._progress[type*=circle] [rep=bar]:hover {
    stroke-width: calc(var(--_prog-thk)*1.2);
}
._progress[gradient] {
    &:where([type=line]) [rep=bar] {
        background: linear-gradient(to right, var(--_prog-c), var(--_prog-grad));
    }
}
._progress[theme=prim] {
    --_prog-bg: var(--_c-prim-bg);
    --_prog-c: var(--_c-prim);
    --_prog-grad: var(--_c-prim-aj);
    &:where([type*=circle][gradient]) [rep=bar] {
        stroke: url(#svgbar-prim);
    }
}
._progress[theme=error] {
    --_prog-bg: var(--_c-error-bg);
    --_prog-c: var(--_c-error);
    --_prog-grad: var(--_c-error-aj);
    &:where([type*=circle][gradient]) [rep=bar] {
        stroke: url(#svgbar-error);
    }
}
._progress[theme=succ] {
    --_prog-bg: var(--_c-succ-bg);
    --_prog-c: var(--_c-succ);
    --_prog-grad: var(--_c-succ-aj);
    &:where([type*=circle][gradient]) [rep=bar] {
        stroke: url(#svgbar-succ);
    }
}
._progress[theme=warn] {
    --_prog-bg: var(--_c-warn-bg);
    --_prog-c: var(--_c-warn);
    --_prog-grad: var(--_c-warn-aj);
    &:where([type*=circle][gradient]) [rep=bar] {
        stroke: url(#svgbar-warn);
    }
}
._progress[theme=info] {
    --_prog-bg: var(--_c-info-bg);
    --_prog-c: var(--_c-info);
    --_prog-grad: var(--_c-info-aj);
    &:where([type*=circle][gradient]) [rep=bar] {
        stroke: url(#svgbar-info);
    }
}
._progress[theme=issue] {
    --_prog-bg: var(--_c-issue-bg);
    --_prog-c: var(--_c-issue);
    --_prog-grad: var(--_c-issue-aj);
    &:where([type*=circle][gradient]) [rep=bar] {
        stroke: url(#svgbar-issue);
    }
}
._progress[theme=text] {
    --_prog-bg: var(--_c-text-bg);
    --_prog-c: var(--_c-text);
    --_prog-grad: var(--_c-text-aj);
    &:where([type*=circle][gradient]) [rep=bar] {
        stroke: url(#svgbar-text);
    }
}
[dir=rtl] ._progress svg{
    scale: -1 1;
}
/*Rate*/
OC-RATE {
    display: inline-flex;
    vertical-align: middle;
    >._rate {
        width: 100%;
    }
}
._rate {
    --_rate-p: calc((var(--_em-input) - var(--_em-subtitle))/2);
    --_rate-sz: var(--_em-subtitle);
    --_rate-fs: var(--_em-body);
    --_rate-g: 0.2rem;
    padding: var(--_rate-p) 0;
    line-height: var(--_rate-sz);
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    input {
        display: none;
    }
    ul {
        display: flex;
        flex: auto;
    }
    li {
        flex: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        [rep=legend] {
            height: var(--_rate-sz);
            aspect-ratio: 1/1;
            line-height: var(--_rate-sz);
            margin: 0 var(--_rate-g);
            cursor: pointer;
            position: relative;
            i {
                font-size: var(--_rate-sz);
                color: var(--_c-issue);
                text-align: start;
                height: 100%;
                overflow: hidden;
                display: flex;
                position: absolute;
                inset-inline-start: 0;
                inset-block-start: 0;
                img {
                    height: 100%;
                    aspect-ratio: 1/1;
                    max-width: none;
                }
            }
            i:first-child {
                width: 0;
                z-index: 2;
                transition: width var(--_dur-1) linear;
            }
            i._half:first-child {
                width: 50%;
            }
            i._full:first-child {
                width: 100%;
            }
            i:last-child {
                width: 100%;
                opacity: .3;
            }
        }
        [rep=label] {
            text-align: center;
            line-height: var(--_rem-display);
        }
    }
    &:where([omitted]) [selected]~li {
        display: none;
    }
    &:where([size=sm]) {
        --_rate-p: calc((var(--_em-display) - var(--_em-body))/2);
        --_rate-sz: var(--_em-body);
        --_rate-fs: var(--_em-caption);
        --_rate-g: 0.1rem;
    }
    &:where([size=lg]) {
        --_rate-p: calc((var(--_em-max) - var(--_em-input))/2);
        --_rate-sz: var(--_em-input);
        --_rate-g: 0.4rem;
    }
    [rep=clear] {
        font-size: var(--_rate-fs);
        color: #ccc;
        margin-inline-end: var(--_rem-min);
        transition: all var(--_dur-1) linear;
    }
    [rep=clear]:hover {
        cursor: pointer;
        color: var(--_c-error);
    }
    [rep=result] {
        font-size: var(--_rate-fs);
        margin-inline-start: var(--_rem-min);
    }
    &:where([disabled]) {
        opacity: var(--_o-disabled);
    }
}
/*Scroll and Swipe*/
._scroll {
  --_scr-bar-sz: var(--_rem-min);
  --_scr-bar-between: 0px;
  --_scr-bar-end: 0px;
  --_scr-bar-c-track: var(--_c-mask-4);
  --_scr-bar-c-thumb: var(--_c-mask-28);
  --_scr-bar-c-hov: var(--_c-mask-36);
  --_scr-bar-c-act: var(--_c-mask-44);
  --_scr-bar-r: 0px;
  --_scr-w:100%;
  --_scr-h:100%;
  position: relative;
  width: var(--_scr-w);
  height: var(--_scr-h);
  [unbound] {
  }
  >._scroll-wrap {
    position: relative;
  }
  >._scroll-bar {
    background-color: var(--_scr-bar-c-track);
    border-radius: var(--_scr-bar-r);
    width: var(--_scr-bar-sz);
    height: calc(100% - var(--_scr-bar-between)*2);
    opacity: 0;
    pointer-events: none;
    transition: all var(--_dur-1) linear;
    position: absolute;
    z-index: 2;
    span {
      background-color: var(--_scr-bar-c-thumb);
      border-radius: inherit;
      transition: all var(--_dur-1) linear;
      position: absolute;
      &:hover {
        background-color: var(--_scr-bar-c-hov);
      }
    }
    &:hover,
    &[scrolling] {
      --_scr-bar-sz: var(--_rem-space);
    }
    &[scrolling] span {
      background-color: var(--_scr-bar-c-act);
    }
  }
  &:hover>._scroll-bar,
  >._scroll-bar[shown] {
    opacity: 1;
    pointer-events: initial;
  }
  &[flow=h] {
    display: flex;
    overflow-x: hidden;
    >._scroll-wrap {
      height: 100%;
      display: inline-flex;
    }
    >._scroll-bar {
      height: var(--_scr-bar-sz);
      width: calc(100% - var(--_scr-bar-between)*2);
      inset-inline-start: var(--_scr-bar-between);
      inset-block-end: var(--_scr-bar-end);
    }
    >._scroll-bar span {
      height: 100%;
    }
  }
  &[flow=v] {
    min-height: var(--_rem-display);
    overflow-y: hidden;
    >._scroll-bar {
      inset-inline-end: var(--_scr-bar-end);
      inset-block-start: var(--_scr-bar-between);
    }
    >._scroll-bar span {
      width: 100%;
    }
  }
  &[flow=h]:where([gridded])>._scroll-wrap {
    flex-wrap: wrap;
    writing-mode: vertical-lr;
    >* {
      writing-mode: horizontal-tb;
    }
  }
  &[flow=v]:where([gridded])>._scroll-wrap {
    display: flex;
    flex-wrap: wrap;
  }
}
/*Autocomplete*/
._autocomplete{
    ._retrieval-status{
        color: var(--_c-caption);
        font-size: var(--_rem-caption);
        line-height: var(--_rem-subtitle);
    }
    &._popup ._retrieval-status{
        padding:var(--_rem-space) var(--_p);
        border-block-end: 1px solid var(--_c-text-bd);
    }
    ._bullet{
        cursor: pointer;
    }
    &[size=md] {
        --_popup-w: var(--_w-input);
      }
}
/*Swipe*/
._swipe-prev,
._swipe-next {
    --_swipe-nav-c: var(--_c-prim);
    --_swipe-nav-bg: transparent;
    --_swipe-nav-o: 0.8;
    --_swipe-nav-h: var(--_rem-input);
    --_swipe-nav-fs: var(--_rem-subtitle);
    --_swipe-nav-r: 100%;
    --_swipe-nav-ff: var(--_ff-icon);
    font-family: var(--_swipe-nav-ff);
    color: var(--_swipe-nav-c);
    background-color: var(--_swipe-nav-bg);
    border-radius: var(--_swipe-nav-r);
    box-sizing: border-box;
    font-size: var(--_swipe-nav-fs);
    opacity: var(--_swipe-nav-o);
    height: var(--_swipe-nav-h);
    aspect-ratio: 1/1;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all var(--_dur-1) linear;
    &[disabled] {
        --_swipe-nav-c: var(--_c-text);
        --_swipe-nav-o: .2;
    }
    &[filled] {
        --_swipe-nav-c: rgba(255, 255, 255, .8);
        --_swipe-nav-bg: var(--_c-prim);
    }
    &[filled][disabled] {
        --_swipe-nav-bg: var(--_c-text);
    }
    &:hover {
        opacity: 1;
    }
}
._swipe-nav {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    ._swipe-prev,
    ._swipe-next,
    ._swipe-pgn {
        position: relative;
        inset-inline-start: auto;
        inset-inline-end: auto;
        inset-block-start: auto;
        inset-block-end: auto;
    }
    ._swipe-prev,
    ._swipe-next {
        --_swipe-nav-fs: var(--_rem-caption);
        --_swipe-nav-h: var(--_rem-subtitle);
    }
}
._swipe-pgn {
    --_swipe-pgn-c: var(--_c-stage);
    --_swipe-pgn-bg: rgba(0, 0, 0, .5);
    --_swipe-pgn-act: var(--_c-prim);
    --_swipe-pgn-o: 0.2;
    --_swipe-pgn-w: var(--_rem-root);
    --_swipe-pgn-h: var(--_rem-root);
    --_swipe-pgn-r: 100%;
    --_swipe-pgn-fs: var(--_rem-caption);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: var(--_dur-3) opacity;
    user-select: none;
    >* {
        transition: all var(--_dur-2) linear;
        object-fit: cover;
        cursor: pointer;
    }
    img {
        width: 100%;
        height: 100%;
        border-radius: inherit;
    }
    &[type=lamp] {
        >* {
            width: var(--_swipe-pgn-w);
            height: var(--_swipe-pgn-h);
            margin: 0 var(--_rem-min);
            display: inline-block;
            border-radius: var(--_swipe-pgn-r);
            background: var(--_swipe-pgn-bg);
            opacity: var(--_swipe-pgn-o);
            transition: all var(--_dur-1) linear;
        }
        [active] {
            opacity: 1;
            background-color: var(--_swipe-pgn-act);
        }
        >*:not([active]):hover {
            opacity: .4;
        }
    }
    &[type=thumb] {
        --_swipe-pgn-w: calc(var(--_rem-input)*2);
        --_swipe-pgn-h: var(--_rem-input);
        >* {
            width: var(--_swipe-pgn-w);
            height: var(--_swipe-pgn-h);
            border: 4px solid rgba(255, 255, 255, .5);
        }
        >[active] {
            border-color: var(--_c-prim);
        }
        >* img {
            width: 100%;
            height: 100%;
            border-radius: inherit;
            object-fit: cover;
        }
    }
    &[type=index] {
        --_swipe-pgn-bg: rgba(0, 0, 0, .2);
        --_swipe-pgn-r: var(--_r);
        --_swipe-pgn-w: var(--_rem-list);
        --_swipe-pgn-h: var(--_rem-list);
        justify-content: flex-end;
        font-size: var(--_swipe-pgn-fs);
        >* {
            width: var(--_swipe-pgn-w);
            height: var(--_swipe-pgn-h);
            color: var(--_swipe-pgn-c);
            margin-inline-start: var(--_rem-min);
            line-height: var(--_swipe-pgn-h);
            text-align: center;
            display: inline-block;
            border-radius: var(--_swipe-pgn-r);
            background-color: var(--_swipe-pgn-bg);
            transition: all var(--_dur-1) linear;
        }
        [active] {
            background-color: var(--_swipe-pgn-act);
        }
        >*:not([active]):hover {
            background-color: rgba(0, 0, 0, .5);
        }
    }
    &[type=text] {
        --_swipe-pgn-bg: rgba(0, 0, 0, .2);
        --_swipe-pgn-h: auto;
        width: 100%;
        display: flex;
        font-size: var(--_swipe-pgn-fs);
        >* {
            width: 0;
            height: var(--_swipe-pgn-h);
            color: var(--_swipe-pgn-c);
            background-color: var(--_swipe-pgn-bg);
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: auto;
        }
        [active] {
            background-color: var(--_swipe-pgn-act);
        }
        >*:not([active]):hover {
            background-color: rgba(0, 0, 0, .5);
        }
    }
}
._swipe-tools {}
._swipe-total {}
._swipe {
    min-height: var(--_rem-display);
    min-width: var(--_rem-display);
    overflow: hidden;
    position: relative;
    transition: all var(--_dur-2) linear;
    &[spinning] {
        pointer-events: none;
        min-height: var(--_rem-display);
        background-image: var(--_spin);
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto min(var(--_rem-input),100%);
    }
    &:hover {
        cursor: grab;
        &:where(:has(>._swipe-wrap[gesture])) {
            cursor: grabbing;
        }
    }
    [unbound] {
        cursor: auto;
    }
    &._initiating {
        min-height: var(--_rem-display);
        background-image: var(--_spin);
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto min(var(--_rem-input),100%);
        >._swipe-wrap {
            opacity: 0;
        }
    }
    >._swipe-wrap {
        >* {
            position: relative;
            &[spinning] {
                min-height: var(--_rem-display);
                background-image: var(--_spin);
                background-position: center;
                background-repeat: no-repeat;
                background-size: auto min(var(--_rem-input),100%);
            }
            >._swipe {
                width: 100%;
                height: 100%;
            }
        }
        >[type=image] {
            >img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
                border-radius: inherit;
            }
        }
        >* {
            >iframe {
                width: 100%;
                min-height: 40rem;
            }
        }
    }
    &:where([gridded][flow=v]) {
        height: 100%;
    }
    >._swipe-pgn {
        width: 100%;
        position: absolute;
        inset-inline-start: 0;
        inset-block-end: var(--_rem-body);
        z-index: 10;
        &[type=index] {
            width: auto;
            inset-inline-start: auto;
            inset-inline-end: var(--_rem-body);
            inset-block-end: var(--_rem-body);
        }
        &[type=text] {
            inset-inline-start: 0;
            inset-block-end: 0;
        }
    }
    >._swipe-prev,
    >._swipe-next {
        position: absolute;
        z-index: 11;
    }
    >._progress {
        width: auto;
        position: absolute;
        inset-inline-start: var(--_rem-body);
        inset-block-start: var(--_rem-body);
        z-index: 10;
    }
    >._swipe-total {
        line-height: var(--_rem-input);
        &[placement] {
            position: absolute;
            z-index: 10;
        }
        &[placement=left-top] {
            inset-inline-start: var(--_rem-body);
            inset-block-start: 0;
        }
        &[placement=left-bottom] {
            inset-inline-start: var(--_rem-body);
            inset-block-end: 0;
        }
        &[placement=right-top] {
            inset-inline-end: var(--_rem-body);
            inset-block-start: 0;
        }
        &[placement=right-bottom] {
            inset-inline-end: var(--_rem-body);
            inset-block-end: 0;
        }
    }
    >._swipe-tools {
        position: absolute;
        inset-block-start: calc((var(--_rem-input) - var(--_rem-list))/2);
        inset-inline-end: calc((var(--_rem-input) - var(--_rem-list))/2);
        z-index: 10;
        >* {
            min-width: var(--_rem-list);
            height: var(--_rem-list);
            margin-inline-start: var(--_rem-space);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        >[inert] {
            opacity:var(--_o-disabled);
        }
    }
    &[flow=h] {
        >._swipe-wrap {
        }
        &[slides=auto]>._swipe-wrap {
            white-space: nowrap;
        }
        >._swipe-prev,
        >._swipe-next {
            inset-block-start: 50%;
            transform: translate(0, -50%);
        }
        >._swipe-prev:not([filled]) {
            inset-inline-start: 0;
        }
        >._swipe-next:not([filled]) {
            inset-inline-end: 0;
        }
        >._swipe-prev[filled] {
            inset-inline-start: var(--_rem-body);
        }
        >._swipe-next[filled] {
            inset-inline-end: var(--_rem-body);
        }
        >._swipe-pgn {
            &[type=lamp],
            &[type=thumb] {
                width: 100%;
            }
            &[type=lamp]>*,
            &[type=thumb]>* {
                margin: auto var(--_rem-min);
            }
        }
        >._swipe-nav {
            position: absolute;
            inset-inline-start: 50%;
            inset-block-end: var(--_rem-body);
            transform: translate(calc(-50%*var(--_dir-coef)), 0);
            ._swipe-prev,
            ._swipe-next {
                margin: 0 .4rem;
            }
        }
    }
    &[flow=v] {
        >._swipe-wrap {
        }
        >._swipe-prev,
        >._swipe-next {
            font-size: var(--_rem-caption);
            width: var(--_rem-subtitle);
            height: var(--_rem-subtitle);
            inset-inline-end: 1rem;
        }
        >._swipe-prev {
            inset-block-start: 1rem;
        }
        >._swipe-next {
            inset-block-end: 1rem;
        }
        >._swipe-pgn {
            &[type=lamp],
            &[type=thumb] {
                width: auto;
                flex-flow: column;
                transform: translate(0, -50%);
                inset-inline-start: auto;
                inset-block-end: auto;
                inset-inline-end: var(--_rem-body);
                inset-block-start: 50%;
            }
            &[type=lamp]>*,
            &[type=thumb]>* {
                margin: var(--_rem-min) 0;
            }
        }
        >._swipe-nav {
            flex-flow: column;
            position: absolute;
            inset-block-start: 50%;
            inset-inline-end: var(--_rem-body);
            transform: translate(-0, -50%);
            ._swipe-prev,
            ._swipe-next {
                margin: var(--_rem-min) 0;
            }
            ._swipe-pgn {
                &[type=lamp],
                &[type=thumb] {
                    flex-flow: column;
                }
                &[type=lamp]>*,
                &[type=thumb]>* {
                    margin: var(--_rem-min) 0;
                }
            }
        }
    }
}
/*Step*/
OC-STEP {
    --_step-c-node: var(--_c-prim);
    --_step-c-label: var(--_c-text);
    --_step-c-brief: var(--_c-brief);
    --_step-c-head: var(--_c-text);
    --_step-c-tips: var(--_c-white);
    --_step-bg-track: var(--_c-prim);
    --_step-bg-node: transparent;
    --_step-h-track: .2rem;
    --_step-lh-track: .6rem;
    --_step-fs-label: var(--_rem-lead);
    --_step-fs-tips: var(--_rem-caption);
    --_step-fs-node: var(--_rem-caption);
    --_step-fs-brief: var(--_rem-caption);
    --_step-w-tips: 6rem;
    text-align: center;
    box-sizing: border-box;
    display: block;
    [rep=wrap] {
        box-sizing: border-box;
        display: flex;
    }
    ._step-item {
        flex: auto;
        width: 8.33333%;
        position: relative;
    }
    ._step-item ._step-head {
        color: var(--_step-c-head);
        font-size: var(--_step-fs-tips);
        line-height: var(--_rem-subtitle);
        padding: .2rem .6rem;
        border-radius: var(--_r);
        position: relative;
        margin-block-end: .8rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    ._step-item ._step-track {
        width: 100%;
        line-height: var(--_step-lh-track);
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        zoom: 1;
    }
    ._step-item [rep=node] {
        font-size: var(--_step-fs-node);
        color: var(--_step-c-node);
        width: var(--_step-lh-track);
        height: var(--_step-lh-track);
        border-radius: 100%;
        border: .2rem solid var(--_step-bg-track);
        background-color: var(--_step-bg-node);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    ._step-item ._step-track div {
        flex: auto;
        width: 0;
        height: var(--_step-h-track);
        background-color: var(--_step-bg-track);
    }
    ._step-item ._step-track div:first-child {}
    ._step-item ._step-track div:last-child {}
    ._step-item ._step-body {}
    ._step-item [rep=label] {
        color: var(--_step-c-label);
        font-size: var(--_step-fs-label);
        line-height: 1em;
        margin: var(--_rem-space) auto;
    }
    ._step-item [rep=brief] {
        font-size: var(--_step-fs-brief);
        color: var(--_step-c-brief);
        line-height: var(--_rem-subtitle);
        margin: 0 var(--_rem-body);
    }
    ._step-item[active] [rep=label] {}
    ._step-item[active]~._step-item {
        ._step-track div {
            background-color: var(--_c-caption);
        }
        [rep=node] {
            border-color: var(--_c-caption);
            color: var(--_c-caption);
        }
        [rep=label],
        [rep=brief],
        ._step-head {
            color: var(--_c-caption);
            a {
                --_link-c: var(--_c-caption);
            }
        }
    }
    &[type=dot-fill] ._step-item[active]~._step-item {
        [rep=node] {
            background-color: var(--_c-caption);
        }
    }
    &[type=circle-fill] ._step-item[active]~._step-item {
        [rep=node] {
            background-color: var(--_c-caption);
            color: var(--_c-white);
        }
    }
    ._step-item[active] ._step-head {
        color: var(--_step-c-tips);
        background-color: var(--_step-bg-track);
    }
    ._step-item[active] ._step-head:before {
        content: '';
        width: 0;
        height: 0;
        border-inline-end: .5rem solid transparent;
        border-inline-start: .5rem solid transparent;
        border-block-start: .5rem solid var(--_step-bg-track);
        margin-inline-start: -0.5rem;
        position: absolute;
        inset-inline-start: 50%;
        inset-block-end: -0.4rem;
    }
    &[justify]:not([dir=v]) {
        ._step-item:first-child {
            text-align: start;
        }
        ._step-item:first-child [rep=brief] {
            margin-inline-start: 0;
        }
        ._step-item:last-child {
            text-align: end;
        }
        ._step-item:last-child [rep=brief] {
            margin-inline-end: 0;
        }
        ._step-item:first-child ._step-track div:first-child,
        ._step-item:last-child ._step-track div:last-child {
            display: none;
        }
        ._step-item:first-child ._step-track div:last-child,
        ._step-item:last-child ._step-track div:first-child {
            width: 100%;
        }
        ._step-item[active] ._step-track div:last-child {
            background-color: var(--_c-caption);
        }
        ._step-item:first-child:not([active]) ._step-head {
            padding-inline-start: 0;
        }
        ._step-item:last-child:not([active]) ._step-head {
            padding-inline-end: 0;
        }
        ._step-item:first-child[active] ._step-head:before {
            inset-inline-start: .5rem;
        }
        ._step-item:last-child[active] ._step-head:before {
            inset-inline-start: auto;
            inset-inline-end: 0;
        }
    }
    /**/
    &[type=dot-fill] {
        --_step-bg-node: var(--_step-bg-track);
    }
    &[type=circle],
    &[type=circle-fill] {
        --_step-lh-track: var(--_rem-subtitle);
        &[justify] ._step-item:first-child[active] ._step-head:before {
            inset-inline-start: 1.1rem;
        }
        &[justify] ._step-item:last-child[active] ._step-head:before {
            inset-inline-start: auto;
            inset-inline-end: .6rem;
        }
        ._step-item [rep=node] img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            border-radius: inherit;
        }
    }
    &[type=circle-fill] {
        --_step-bg-node: var(--_step-bg-track);
        --_step-c-node: var(--_c-white);
    }
    &[type=plain] {
        --_step-lh-track: var(--_rem-input);
        --_step-fs-node: var(--_rem-list);
        ._step-item [rep=node] {
            width: auto;
            border-radius: 0;
            border: none;
            padding: 0 var(--_rem-body);
        }
        ._step-item [rep=node] img {
            max-width: var(--_step-lh-track);
        }
        &[justify] ._step-item:first-child[active] ._step-head:before {
            inset-inline-start: 2.2rem;
        }
        &[justify] ._step-item:last-child[active] ._step-head:before {
            inset-inline-start: auto;
            inset-inline-end: 1.7rem;
        }
    }
    /**/
    &[dir=v] [rep=wrap] {
        flex-direction: column;
    }
    &[dir=v] {
        ._step-item {
            display: flex;
            &:where(:has(._step-body)) {
                width: 100%;
            }
        }
        ._step-item [rep=node] {}
        ._step-item ._step-track {
            height: 100%;
            width: auto;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }
        ._step-item ._step-track div {
            width: .2rem;
            height: 6.0rem;
        }
        ._step-item ._step-track div:first-child {
            height: .7rem;
        }
        &:where([type*=circle], [type=plain]) ._step-item ._step-track div:first-child {
            height: 0;
        }
        &:where(:not([flipped])) {
            ._step-item:last-child ._step-track div:last-child {
                height: 0;
            }
            ._step-item:first-child ._step-track div:first-child {
                background: transparent;
            }
        }
        ._step-item[active] ._step-track div:last-child {
            background-color: var(--_c-caption);
        }
        ._step-body {
            text-align: start;
            margin-inline-start: var(--_rem-body);
            flex: auto;
            width: 0;
        }
        ._step-body [rep=label] {
            line-height: var(--_rem-list);
            margin: 0;
        }
        ._step-body [rep=brief] {
            margin: var(--_rem-min) 0 0 0;
        }
        ._step-head {
            width: var(--_step-w-tips);
            margin-block-end: 0;
            margin-inline-end: .8rem;
            padding: .2rem 0;
            height: fit-content;
        }
        ._step-item[active] ._step-head:before {
            width: 0;
            height: 0;
            margin-inline-start: 0;
            border-inline-end: 0;
            border-block-start: .5rem solid transparent;
            border-block-end: .5rem solid transparent;
            border-inline-start: .5rem solid var(--_step-bg-track);
            inset-inline-start: auto;
            inset-block-end: auto;
            inset-block-start: .6rem;
            inset-inline-end: -0.5rem;
        }
        &[type=plain] ._step-item [rep=node] {
            padding: 0;
            width: var(--_rem-hero);
        }
        &[type=plain] ._step-item ._step-head,
        &[type=plain] ._step-item [rep=label] {
            margin-block-start: calc((var(--_step-lh-track) - var(--_rem-list))/2)
        }
        &[flipped] {
            ._step-item:first-child ._step-track div:last-child {
                height: 0;
            }
        }
        &[flipped] [rep=wrap] {
            flex-direction: column-reverse;
        }
        &[flipped] ._step-item ._step-track div {
            background-color: var(--_c-caption);
        }
        &[flipped] ._step-item [rep=label],
        &[flipped] ._step-item:not([active]) ._step-head,
        &[flipped] ._step-item [rep=brief] {
            color: var(--_c-caption);
        }
        &[flipped] ._step-item[active] [rep=label],
        &[flipped] ._step-item[active]~._step-item [rep=label] {
            color: var(--_step-c-label);
        }
        &[flipped] ._step-item[active] [rep=brief],
        &[flipped] ._step-item[active]~._step-item [rep=brief] {
            color: var(--_step-c-brief);
        }
        &[flipped] ._step-item[active]~._step-item ._step-head {
            color: var(--_step-c-head);
        }
        &[flipped] ._step-item:not([active]) [rep=node] {
            color: var(--_c-caption);
            border-color: var(--_c-caption);
        }
        &[flipped] ._step-item[active]~._step-item [rep=node] {
            color: var(--_step-bg-track);
            border-color: var(--_step-bg-track);
        }
        &[flipped] ._step-item[active] ._step-track div:first-child {
            background-color: var(--_step-bg-track);
        }
        &[flipped] ._step-item[active] ._step-track div:last-child {
            background-color: var(--_c-caption);
        }
        &[flipped] ._step-item[active]~._step-item ._step-track div {
            background-color: var(--_step-bg-track);
        }
        &[flipped] ._step-item[active]:last-child ._step-track div:first-child,
        &[flipped] ._step-item[active]~._step-item:last-child ._step-track div:first-child {
            background-color: transparent;
        }
        &[flipped][type=dot-fill] ._step-item:not([active]) [rep=node] {
            background-color: var(--_c-caption);
        }
        &[flipped][type=dot-fill] ._step-item[active]~._step-item [rep=node] {
            background-color: var(--_step-bg-track);
        }
    }
    &:where([pending]) {
        &:where(&[type=dot]) ._step-item[active] [rep=node] {
            background-color: var(--_step-bg-track);
        }
        &:where(&[type=dot-fill]) ._step-item[active] [rep=node] {
            background-color: transparent;
            border-color: var(--_step-bg-track);
        }
        &:where(&[type=circle]) ._step-item[active] [rep=node] {
            background-color: var(--_step-bg-track);
            color: var(--_c-white);
        }
        &:where(&[theme=warn][type=circle]) ._step-item[active] [rep=node] {
            color: var(--_c-black);
        }
        &:where([type=circle-fill]:not([theme=warn])) ._step-item[active] [rep=node] {
            background-color: transparent;
            color: var(--_step-bg-track);
        }
        &:where([type=plain]) ._step-item[active] [rep=node]:after {
            content: 'clock-f';
            font-family: var(--_ff-icon);
            font-size: var(--_rem-root);
            line-height: 1em;
            position: absolute;
            inset-inline-end: 0;
            inset-block-end: var(--_rem-min);
        }
    }
    &[theme=error] {
        --_step-c-node: var(--_c-error);
        --_step-bg-track: var(--_c-error);
    }
    &[theme=succ] {
        --_step-c-node: var(--_c-succ);
        --_step-bg-track: var(--_c-succ);
    }
    &[theme=info] {
        --_step-c-node: var(--_c-info);
        --_step-bg-track: var(--_c-info);
    }
    &[theme=isuue] {
        --_step-c-node: var(--_c-isuue);
        --_step-bg-track: var(--_c-isuue);
    }
    &[theme=warn] {
        --_step-c-node: var(--_c-warn);
        --_step-bg-track: var(--_c-warn);
    }
    &[theme=text] {
        --_step-c-node: var(--_c-text);
        --_step-bg-track: var(--_c-text);
    }
    &[theme]:where(:not([theme=warn])) {
        &[type=circle-fill] {
            --_step-c-node: var(--_c-white);
        }
    }
    &[theme=warn] {
        &[type=circle-fill] {
            --_step-c-node: var(--_c-text);
        }
    }
    &:where(:not([type*=dot])){
        ._step-item[error] [rep=node]:before {
            height: var(--_rem-root);
            aspect-ratio: 1/1;
            border-radius: 50%;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            content: 'info';
            font-family: var(--_ff-icon);
            font-size: var(--_rem-root);
            color: var(--_c-white);
            background-color: var(--_c-error);
            line-height: 1em;
            position: absolute;
            inset-inline-end: 0;
            inset-block-start: 0;
        }
    }
    &:where([type*=circle]) ._step-item[error] [rep=node]:before {
        inset-block-start: calc(var(--_rem-min)*-1);
        right:calc(var(--_rem-min)*-1);
    }
    &:where([type=plain]) ._step-item[error] [rep=node]:before {
        inset-block-start: var(--_rem-min);
    }
    &:where([type=plain]) ._step-item[error] [rep=node] {
        color: var(--_c-error);
    }
    &:where([type=dot], [type=circle]) ._step-item[error] [rep=node] {
        border-color: var(--_c-error);
        color: var(--_c-error);
    }
    &:where([type=dot-fill], [type=circle-fill]) ._step-item[error] [rep=node] {
        background-color: var(--_c-error);
        border-color: var(--_c-error);
    }
    &:where([pending]) {
        &:where([type=dot], [type=circle]) ._step-item[error][active] [rep=node] {
            background-color: var(--_c-error);
            color: var(--_c-white);
        }
        &:where([type=dot-fill], [type=circle-fill]) ._step-item[error][active] [rep=node] {
            border-color: var(--_c-error);
            color: var(--_c-error);
            background-color: transparent;
        }
    }
}
/*Status*/
OC-STATUS{
    --_status-fs:var(--_rem-caption);
    --_status-c-dot: var(--_c-info);
    --_status-c: var(--_c-brief);
    display: inline-flex;
    vertical-align: middle;
    [rep=wrap]{
        display: inline-flex;
        align-items: center;
    }
    [rep=lamp]{
        height: var(--_rem-space);
        aspect-ratio: 1/1;
        border-radius: 50%;
        box-sizing: border-box;
    }
    &:where(:not([type=circle])) [rep=lamp]{
        background: var(--_status-c-dot);
    }
    &:where([type=circle]) [rep=lamp]{
        border:2px solid  var(--_status-c-dot);
    }
    [rep=label]{
        font-size: var(--_status-fs);
        color: var(--_status-c);
        margin-inline-start: var(--_rem-min);
    }
    &[current=succ]{
        --_status-c-dot: var(--_c-succ);
    }
    &[current=error]{
        --_status-c-dot: var(--_c-error);
    }
    &[current=info]{
        --_status-c-dot: var(--_c-info);
    }
    &[current=warn]{
        --_status-c-dot: var(--_c-warn);
    }
    &[current=issue]{
        --_status-c-dot: var(--_c-issue);
    }
    &[current=confirm]{
        --_status-c-dot: var(--_c-prim);
    }
    &[current=cancel]{
        --_status-c-dot: var(--_c-brief);
    }
    &[current=forbid]{
        --_status-c-dot: var(--_c-caption);
        --_status-c: var(--_c-caption);
    }
}
/*Category*/
OC-CATEGORY {
  --_cat-fs-label: var(--_rem-subtitle);
  --_cat-fs-icon: var(--_rem-body);
  --_cat-fs-arrow: var(--_rem-caption);
  --_cat-fs-tips: var(--_rem-body);
  --_cat-c: inherit;
  --_cat-c-icon: var(--_c-prim);
  --_cat-c-tips: var(--_c-brief);
  --_cat-c-arrow: var(--_c-caption);
  --_cat-bg-icon: var(--_c-prim-bg);
  --_cat-bc-icon: var(--_c-prim-bd);
  --_cat-lh: var(--_rem-display);
  --_cat-g: var(--_rem-space);
  display: block;
  >[rep=wrap] {
    display: flex;
    align-items: center;
    >[rep=head] {
      display: flex;
      align-items: center;
      flex: auto;
      [rep=label] {
        color: var(--_cat-c);
        font-size: var(--_cat-fs-label);
        transition: all var(--_dur-2) linear;
      }
    }
    >[rep=icon] {
      font-size: var(--_cat-fs-icon);
      color: var(--_cat-c-icon);
      height: var(--_rem-list);
      aspect-ratio: 1/1;
      border-radius: 100%;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      background-color: var(--_cat-bg-icon);
      border: 1px solid var(--_cat-bc-icon);
      margin-inline-end: var(--_cat-g);
      transition: all var(--_dur-2) linear;
    }
    >[rep=tips] {
      font-size: var(--_cat-fs-tips);
      color: var(--_cat-c-tips);
    }
    >[rep=disk],
    >[rep=cube],
    >[rep=image] {
      height: var(--_rem-list);
      margin-inline-end: var(--_cat-g);
    }
    >[rep=arrow] {
      font-size: var(--_cat-fs-arrow);
      color: var(--_cat-c-arrow);
      height: var(--_rem-subtitle);
      line-height: var(--_rem-subtitle);
      aspect-ratio: 1/1;
      border-radius: 100%;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-inline-end: -4px;
      transition: all var(--_dur-2) linear;
    }
    [rep=arrow]:hover {
      color: var(--_cat-c-icon);
    }
  }
  &:hover>[rep=wrap]>[rep=arrow] {
    background-color: var(--_cat-bg-icon);
  }
  &[theme=prim] {
    --_cat-c: var(--_c-prim);
    --_cat-c-icon: var(--_c-prim);
    --_cat-bg-icon: var(--_c-prim-bg);
    --_cat-bc-icon: var(--_c-prim-bd);
  }
  &[theme=succ] {
    --_cat-c: var(--_c-succ);
    --_cat-c-icon: var(--_c-succ);
    --_cat-bg-icon: var(--_c-succ-bg);
    --_cat-bc-icon: var(--_c-succ-bd);
  }
  &[theme=error] {
    --_cat-c: var(--_c-error);
    --_cat-c-icon: var(--_c-error);
    --_cat-bg-icon: var(--_c-error-bg);
    --_cat-bc-icon: var(--_c-error-bd);
  }
  &[theme=info] {
    --_cat-c: var(--_c-info);
    --_cat-c-icon: var(--_c-info);
    --_cat-bg-icon: var(--_c-info-bg);
    --_cat-bc-icon: var(--_c-info-bd);
  }
  &[theme=issue] {
    --_cat-c: var(--_c-issue);
    --_cat-c-icon: var(--_c-issue);
    --_cat-bg-icon: var(--_c-issue-bg);
    --_cat-bc-icon: var(--_c-issue-bd);
  }
  &[theme=text] {
    --_cat-c: var(--_c-text);
    --_cat-c-icon: var(--_c-text);
    --_cat-bg-icon: var(--_c-text-bg);
    --_cat-bc-icon: var(--_c-text-bd);
  }
  &[theme=warn] {
    --_cat-c: var(--_c-warn);
    --_cat-c-icon: var(--_c-warn);
    --_cat-bg-icon: var(--_c-warn-bg);
    --_cat-bc-icon: var(--_c-warn-bd);
  }
}
/*Viewer媒体查看器*/
._viewer {
    --_viewer-bg:var(--_c-black-92);
    --_viewer-c:var(--_c-white-72);
    --_viewer-c-hov:var(--_c-white);
    --_viewer-bc:var(--_c-white);
    --_viewer-w-text:calc(var(--_w-input)*2);
    --_viewer-w-dom:max(fit-content,calc(var(--_w-input)*2));
    --_viewer-w-aside:min(var(--_w-drawer),70%);
    --_viewer-p-text:var(--_rem-body);
    --_viewer-w-max:calc(100% - var(--_rem-input)*4);
    --_viewer-h-max:calc(100vh - var(--_rem-input)*2);
    --_viewer-ar:4/3;
    --_viewer-pos:fixed;
    --_viewer-w:100%;
    --_viewer-h:100%;
    --_viewer-left:0;
    --_viewer-top:0;
    --_viewer-r:0;
    --_viewer-filter: blur(10px);
    height: var(--_viewer-h);
    width: var(--_viewer-w);
    display: flex;
    overscroll-behavior: contain;
    box-sizing: border-box;
    border-radius: var(--_viewer-r);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--_dur-3) linear;
    overflow: hidden;
    position: var(--_viewer-pos);
    left: var(--_viewer-left);
    top: var(--_viewer-top);
    z-index: 820;
    &[mode=inline]{
        --_viewer-pos:relative;
        --_viewer-r:inhret;
        min-height: var(--_w-input);
        min-width: var(--_w-input);
    }
    &[mode=popup]{
        --_viewer-w:min(70%,calc(100% - var(--_rem-input)*8));
        --_viewer-h:min(80%,calc(100% - var(--_rem-input)*4));
        --_viewer-left:calc((100% - var(--_viewer-w))/2);
        --_viewer-top:calc((100% - var(--_viewer-h))/2);
        --_viewer-r:var(--_r-bubble);
        &:where([inverted]){
            border: 1px solid var(--_c-text-bd);
            box-shadow: 0 .5rem 1.0rem rgba(0, 0, 0, 0.1);
        }
    }
    &[inverted]{
        --_viewer-bg:var(--_c-white-92);
        --_viewer-c:var(--_c-text-sta);
        --_viewer-bc:var(--_c-prim);
        ._viewer-tools {
            ._box-tools{
                --_tools-c: var(--_c-black-60);
                --_tools-c-hov: var(--_viewer-c);
                --_tools-c-foc: var(--_viewer-c);
            }
        }
        &[aside=start] ._viewer-aside{
            border-inline-end: 1px solid var(--_c-text-bd);
        }
        &[aside=end] ._viewer-aside{
            border-inline-start: 1px solid var(--_c-text-bd);
        }
    }
    ._viewer-mask {
        width: 100%;
        height: 100%;
        background-color: var(--_viewer-bg);
        opacity: 0;
        transition: all var(--_dur-3) linear;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 4;
        backdrop-filter: var(--_viewer-filter);
    }
    ._viewer-media {
        height: 0;
        transition: all var(--_dur-3) ease;
        transform: scale(.2);
        opacity: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: auto;
        position: relative;
    }
    &[show] {
        opacity: 1;
        pointer-events: auto;
        ._viewer-mask {
            opacity: 1;
        }
        ._viewer-media {
            transform: scale(1);
            opacity: 1;
        }
    }
    ._viewer-head {
        line-height: var(--_rem-input);
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between; 
        flex-wrap: nowrap;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
        pointer-events: none;
    }
    ._viewer-total {
        color:  var(--_viewer-c);
        padding: 0 var(--_rem-body);
        pointer-events: auto;
    }
    ._viewer-tools {
        padding: 0 var(--_rem-min);
        pointer-events: auto;
        ._box-tools{
        --_tools-c: var(--_viewer-c);
        --_tools-c-hov: var(--_viewer-c-hov);
        --_tools-c-foc: var(--_viewer-c-hov);
        --_tools-w: var(--_rem-display);
        --_tools-h: var(--_rem-display);
    }
    }
    ._viewer-body {
        flex: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        flex-direction:column;
        overflow: hidden;
        position: relative;
        z-index: 8;
    }
    ._viewer-stage {
        flex: auto;
        margin: auto;
        width: 100%;
         > ._swipe-wrap,
         ._viewer-media{
            pointer-events: none;
        }
         ._viewer-media >*,
         ._swipe-prev,
         ._swipe-next{
            pointer-events: auto;
        }
         > ._swipe-wrap>* {
            text-align: center;
            width: auto;
            display: flex;
            flex-wrap: nowrap;
            box-sizing: border-box;
            flex-direction: column;
            height: 100%;
            pointer-events: none;
        }
        ._viewer-media{
            >img {
                max-width: var(--_viewer-w-max);
                max-height: var(--_viewer-h-max);
                object-fit: contain;
            }
            >iframe {
                background-color: var(--_c-white);
                max-width: var(--_viewer-w-max);
                max-height: var(--_viewer-h-max);
            }
            >video {
                max-width: var(--_viewer-w-max);
                max-height: var(--_viewer-h-max);
                display: inline-block;
            }
        }
        ._viewer-text,
        ._viewer-dom {
                text-align: start;
                box-sizing: border-box;
                max-width: var(--_viewer-w-max);
                max-height: var(--_viewer-h-max);
                display: inline-block;
                position: relative
            }
            ._viewer-text:where(:not([unfenced])),
            ._viewer-dom:where(:not([unfenced])){
                background-color: var(--_c-stage);
                border-radius: var(--_r-input);
                padding: var(--_viewer-p-text);
            }
            ._viewer-text:where(:not([unfenced])){
                width: var(--_viewer-w-text);
            }
            ._viewer-dom:where(:not([unfenced])){
                width: var(--_viewer-w-dom);
            }
            ._viewer-text:where([unfenced]),
            ._viewer-text:where([unfenced]){
                width:100%;
            }
    }
    ._viewer-caption {
        color: var(--_viewer-c);
        text-align: center;
        width: 100%;
        padding: 0 var(--_rem-body) var(--_rem-body) var(--_rem-body);
        box-sizing: border-box;
        line-height: var(--_rem-brief);
    }
    ._viewer-foot {
        max-width: 100%;
        padding: var(--_rem-space);
        box-sizing: border-box;
        position: relative;
        z-index: 8;
        display: flex;
        justify-content: center;
        overflow: hidden;
        &:has(._viewer-thumb > ul:empty){
            display: none;
        }
    }
    ._viewer-thumb{
        width: fit-content;
        max-width: 100%;
        ._swipe-wrap>* {
            aspect-ratio: var(--_viewer-ar);
            overflow: hidden;
            box-sizing: border-box;
            cursor: pointer;
            position: relative;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            &:after {
                content: '';
                box-sizing: border-box;
                border: .4rem solid transparent;
                transition: all var(--_dur-1) linear;
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
            }
            &[selected]:after {
                border-color: var(--_viewer-bc);
            }
        }
    }
    &[nonthumb] ._viewer-foot {
        position: absolute;
        left: -100000px;
    }
    &[thumb=start],
    &[thumb=end]{
        ._viewer-foot{
            flex-direction: column;
            max-width: none;
            max-height: var(--_viewer-h-max);
            height: fit-content;
        }
        ._viewer-thumb{
            width: fit-content;
            max-width: none;
            max-height: var(--_viewer-h-max);
            ._swipe-wrap>*{
                width: 100%;
            }
        }
    }
    &[thumb=start]{
        ._viewer-body{
            flex-direction: row-reverse;
        }
    }
    &[thumb=end]{
        ._viewer-body{
            flex-direction: row;
        }
    }
    &:where(:has(._viewer-stage > ._swipe-wrap>*:only-child)){
        --_viewer-w-max:calc(100% - var(--_rem-input)*2);
       ._swipe-prev,
        ._swipe-next {
            display: none;
        }
    }
    ._viewer-aside{
        display: flex;
        flex-direction: column;
        background-color: var(--_c-stage);
        width: var(--_viewer-w-aside);
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
        position: absolute;
        top: -100000px;
        z-index: 9;
        >[rep=close]{
            color: var(--_c-white);
            font-size: var(--_px-root);
            aspect-ratio: 1/1;
            height: var(--_rem-list);
            border-radius:var(--_rem-list);
            background-color: var(--_c-black-20);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            position: absolute;
            top: calc((var(--_rem-input) - var(--_rem-list))/2);
            inset-inline-end:calc((var(--_rem-input) - var(--_rem-list))/2);
            z-index: 2;
            transition: all var(--_dur-2) linear;
            &:hover{
                background-color: var(--_c-black-60);
                cursor: pointer;
            }
        }
        &:hover >[rep=close]{
            opacity: 1;
        }
    }
    ._viewer-title{
        height: var(--_rem-input);
        line-height: var(--_rem-input);
        box-sizing: border-box;
        padding-inline-start: var(--_rem-body);
        display: flex;
        [rep=title]{
            flex: auto;
        }
    }
    ._viewer-wrap{
        flex:auto;
        padding: var(--_rem-body);
        overscroll-behavior: contain;
        overflow-y: auto;
    }
    ._viewer-cont{
    }
    &[expanded] ._viewer-aside{
        position: relative;
        top: 0;
    }
    &[aside=start]{
        flex-direction: row-reverse;
    }
}
@media (max-width: calc(900px - 1px)) {
    ._viewer {
        --_viewer-w-max:100%;
        &[mode=popup]{
            --_viewer-w:100%;
            --_viewer-h:100%;
            --_viewer-left:0;
            --_viewer-top:0;
            --_viewer-r:0;
            border:none;
            box-shadow: none;
        }
        ._viewer-stage{
            ._viewer-text,
            ._viewer-dom{
                max-width: calc(100% - var(--_rem-body)*2);
            }
        }
        ._viewer-aside{
            transition:inset-inline-start var(--_dur-3) var(--_bez-eo),inset-inline-end var(--_dur-3) var(--_bez-eo);
            position: absolute!important;
            top: 0;
            >[rep=close]{
                opacity: 1;
            }
        }
        &[aside=start] ._viewer-aside{
            inset-inline-start: -70%;
        }
        &[aside=end] ._viewer-aside{
            inset-inline-end: -70%;
        }
        &[aside=start][expanded] ._viewer-aside{
            inset-inline-start: 0;
        }
        &[aside=end][expanded] ._viewer-aside{
            inset-inline-end: 0;
        }
    }
}
/*File input*/
OC-FILE {
    --_file-h: var(--_em-input);
    --_file-p-se: var(--_em-space);
    --_file-r: var(--_r-input);
    --_file-w: var(--_w-input);
    --_file-sd: var(--_c-prim-sd);
    --_file-bw: 1px;
    --_file-bc: var(--_c-text-bd);
    --_file-bg: var(--_c-stage);
    flex-direction: column;
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    &[full] {
        display: flex;
        width:100%;
    }
    &:where(:not([full])) {
        display: inline-flex;
        width: var(--_file-w);
    }
    [rep=wrap] {
        font-size: var(--_rem-body);
        background-color: var(--_file-bg);
        width: 100%;
        height: var(--_file-h);
        border: var(--_file-bw) solid var(--_file-bc);
        border-radius: var(--_file-r);
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        align-items: center;
        position: relative;
        transition: all var(--_dur-2) linear;
        &:hover {
            border-color: var(--_c-prim);
        }
        &:focus-within {
            color: var(--_c-prim);
            border-color: var(--_c-prim);
            outline: var(--_w-outline) solid var(--_file-sd);
            outline-offset: 0px;
            [rep=names] {
                color: var(--_c-prim);
            }
        }
    }
    input {
        opacity: 0;
        position: absolute;
        inset-inline-start: -100000px;
    }
    [rep=label] {
        color: var(--_c-brief);
        line-height: calc(var(--_file-h) - 2px);
        background-color: var(--_c-text-bg);
        padding: 0 var(--_file-p-se);
        box-sizing: border-box;
        border-inline-end: 1px solid var(--_c-text-bd);
        white-space: nowrap;
        overflow: hidden;
        max-width: 60%;
        text-overflow: ellipsis
    }
    [rep=placeholder] {
        color: var(--_c-caption);
        line-height: calc(var(--_file-h) - 2px);
        padding-inline-start: var(--_file-p-se);
        text-align: start;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        flex: auto;
    }
    [rep=tools] {
        --_tools-c: var(--_c-caption);
        --_tools-c-hov: var(--_c-prim);
        width: auto;
        margin-inline-end: calc((var(--_rem-display) - var(--_rem-list))/2);
    }
    [rep=tools]>* {
        font-size: var(--_rem-caption);
    }
    [rep=names] {
        text-align: start;
        width: 100%;
        overflow: hidden;
        flex: auto;
        padding-inline-start: var(--_file-p-se);
    }
    [rep=names]:empty {
        display: none;
    }
    [rep=names]:where(:not(:empty))+[rep=placeholder] {
        display: none;
    }
    &:where(:not([multiple])) [rep=names] {
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    &:where([multiple]) [rep=names] {
        word-break: break-all;
        line-height: var(--_em-subtitle);
        display: -webkit-box;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-align: start;
    }
    [rep=mean] {
        color: var(--_c-caption);
        content: 'file';
        font-family: var(--_ff-icon);
        cursor: pointer;
        width: var(--_rem-display);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        transition: all var(--_dur-2) linear;
        &:hover {
            color: var(--_c-prim);
        }
    }
    &[size=sm] {
        --_file-h: var(--_em-display);
        --_file-r: var(--_r);
    }
    &[size=lg] {
        --_file-h: var(--_em-max);
        --_file-p-se: var(--_em-body);
        --_file-r: calc(var(--_r)*3);
        &[multiple] [rep=names] {
            line-height: var(--_em-subtitle);
        }
    }
}
/*Checked animation of checkbox & radio*/
@keyframes _checked {
  0% {
    box-shadow: 0 0 0 0 var(--_c-prim-sd);
  }
  50% {
    box-shadow: 0 0 0 .3rem var(--_c-prim-sd);
  }
  99% {
    box-shadow: 0 0 0 .6rem var(--_c-prim-tp);
  }
  100% {
    box-shadow: none;
  }
}
/*Radio & Checkbox*/
OC-RADIO,
OC-CHECKBOX {
  --_chk-h: var(--_rem-input);
  --_chk-lh: var(--_chk-h);
  --_chk-a-v: center;
  --_chk-d: inline-flex;
  --_chk-g-l: var(--_g);
  --_chk-g-r: var(--_rem-list);
  line-height: var(--_chk-lh);
  height: var(--_chk-h);
  display: var(--_chk-d);
  vertical-align: middle;
  label {
    box-sizing: border-box;
    height: inherit;
    display: inline-flex;
    align-items: var(--_chk-a-v);
    position: relative;
  }
  input {
    position: fixed;
    inset-inline-start: -100000px;
  }
  &:has(i:empty) {
    height: var(--_rem-list);
    line-height: var(--_rem-list);
    i {
      display: none;
    }
  }
}
OC-RADIO:where(:not([type=chera], [type=switch])),
OC-CHECKBOX:where(:not([type=chera], [type=switch])) {
  i {
    transition: all var(--_dur-2) linear;
  }
  &:where(:not([type=text])) {
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  u~i:where(:not(:empty)) {
    margin-inline-start: var(--_chk-g-l);
  }
  &:where(:not([type=text], [type=btn])) u~i:where(:not(:empty)) {
    margin-inline-end: var(--_chk-g-r);
  }
  &:hover u:before {
    border-color: var(--_c-prim);
  }
  input:where(:checked)+i {
    color: var(--_c-prim);
  }
  input:where(:focus)~u:before {
    outline: none;
    border-color: var(--_c-prim);
  }
  input:where(:disabled)~i {
    color: var(--_c-disable);
    cursor: not-allowed;
  }
  input:where(:disabled:checked)~u:before {
    background-color: var(--_c-prim-sd);
  }
  &[size=xs] {
    --_chk-h: var(--_rem-list);
  }
  &[size=xs]:where(:not([type=text])) {
    --_chk-g-r: var(--_m);
  }
  &[size=sm] {
    --_chk-h:var(--_rem-display);
  }
  &[size=sm]:where(:not([type=text])) {
    --_chk-g-r: var(--_m);
  }
  &[size=lg] {
    --_chk-h: var(--_rem-max);
  }
}
/*Radio*/
OC-RADIO:where(:not([type=chera], [type=switch])) {
  u {
    width: var(--_rem-subtitle);
    aspect-ratio: 1/1;
    line-height: var(--_rem-subtitle);
    position: relative;
    display: inline-flex;
    &:before {
      content: '';
      width: inherit;
      height: inherit;
      box-sizing: border-box;
      border-radius: 100%;
      border: 1px solid var(--_c-text-bd);
      background-color: var(--_c-stage);
      transition: all var(--_dur-2) ease-out;
    }
    &:after {
      content: '';
      width: 1.0rem;
      height: 1.0rem;
      border-radius: 100%;
      background-color: var(--_c-prim);
      display: inline-block;
      transform: scale(0);
      transition: all var(--_dur-2) ease-out;
      position: absolute;
      inset-block-start: .4rem;
      inset-inline-start: .4rem;
    }
  }
  input:where(:checked)~u:before {
    border-color: var(--_c-prim);
    animation: _checked var(--_dur-3) ease-out forwards;
  }
  input:where(:checked)~u:after {
    transform: scale(1);
  }
  &:where([check=ing]:not(:has(input:checked))) input~u:before {
    border-color: var(--_c-prim);
  }
  &:where([check=ing]:not(:has(input:checked))) input~u:after {
    background-color: var(--_c-prim-bd);
    transform: scale(1);
  }
  input:where(:disabled)~u:before {
    border-color: var(--_c-text-bd);
    cursor: not-allowed;
  }
  input:where(:disabled)~u:after {
    cursor: not-allowed;
  }
  input:where(:disabled:checked)~u:after {
    background-color: var(--_c-disable-bg);
    transform: scale(1);
  }
}
/*Checkbox*/
OC-CHECKBOX:where(:not([type=chera], [type=switch])) {
  u {
    width: calc(var(--_rem-subtitle) - 0.2rem);
    aspect-ratio: 1/1;
    line-height: calc(var(--_rem-subtitle) - 0.2rem);
    position: relative;
    display: inline-flex;
  }
  u:before {
    content: '';
    width: inherit;
    height: inherit;
    box-sizing: border-box;
    border-radius: var(--_r);
    border: 1px solid var(--_c-text-bd);
    background-color: var(--_c-stage);
    transition: all var(--_dur-2) ease-out;
  }
  u:after {
    font-family: var(--_ff-icon);
    content: 'check';
    color: var(--_c-stage);
    font-size: var(--_rem-caption);
    width: inherit;
    height: inherit;
    line-height: inherit;
    text-align: center;
    transform: scale(0);
    transition: all var(--_dur-2) ease-out;
    position: absolute;
  }
  input:where(:checked)~u:before {
    border-color: var(--_c-prim);
    background-color: var(--_c-prim);
    animation: _checked var(--_dur-3) ease-out forwards;
  }
  input:where(:checked)~u:after {
    transform: scale(.8);
  }
  &:where([check=ing]:not(:has(input:checked))) input~u:before {
    border-color: var(--_c-prim);
  }
  &:where([check=ing]:not(:has(input:checked))) input~u:after {
    content: '';
    width: 1rem;
    height: 1rem;
    background-color: var(--_c-prim-bd);
    transform: none;
    inset-block-start: .3rem;
    inset-inline-start: .3rem;
  }
  input:where(:focus)~u:before {
    outline: none;
    border-color: var(--_c-prim);
  }
  input:where(:disabled)~u:before {
    border-color: var(--_c-text-bd);
    background-color: var(--_c-disable-bg);
    cursor: not-allowed;
  }
  input:where(:disabled:checked)~u:after {
    color: var(--_c-disable);
    transform: scale(.8);
    cursor: not-allowed;
  }
/*   &:has(i:empty) {
    height: var(--_rem-list);
    line-height: var(--_rem-list);
    i {
      display: none;
    }
  } */
}
/*Chera of checkbox & radio*/
OC-CHECKBOX[type=chera],
OC-RADIO[type=chera] {
  --_chk-d: block;
  --_chera-h: calc(var(--_chk-h) - 0.6rem);
  label {
    display: flex;
  }
  i {
    height: var(--_chera-h);
    line-height: calc(var(--_chera-h) - 0.2rem);
    padding-block: 0;
    padding-inline-end: calc(var(--_p)*2);
    padding-inline-start: 1.0rem;
    background-color: var(--_c-stage);
    box-sizing: border-box;
    border: 1px solid var(--_c-text-bd);
    border-radius: var(--_r);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: all var(--_dur-2) ease-out;
    flex: auto;
  }
  u {
    font-size: var(--_rem-caption);
    color: var(--_c-caption);
    transform: translate(0, -50%);
    transition: all var(--_dur-2) ease-out;
    position: absolute;
    inset-inline-end: 1rem;
    inset-block-start: 50%;
  }
  u:after {
    font-family: var(--_ff-icon);
    content: 'check';
  }
  &:where(:hover) i {
    border-color: var(--_c-prim);
  }
  input:where(:checked)~i {
    color: var(--_c-white);
    background-color: var(--_c-prim);
    border-color: var(--_c-prim);
  }
  input:where(:checked)~u {
    color: var(--_c-white);
  }
  &:where([check=ing]:not(:has(input:checked))) input~i {
    background-color: var(--_c-prim-bg);
  }
  input:where(:focus)~u {
    border-color: var(--_c-prim);
  }
  input:where(:disabled)~i {
    color: var(--_c-disable);
    border-color: var(--_c-text-bd);
    background-color: var(--_c-disable-bg);
  }
  input:where(:disabled:checked)~i {
    color: var(--_c-disable);
    border-color: var(--_c-text-bd);
    background-color: var(--_c-prim-sd);
  }
  input:where(:disabled:checked)~u {
    color: var(--_c-disable);
  }
  &[size=xs] {
    --_chk-h: var(--_rem-list);
    font-size: var(--_rem-caption);
  }
  &[size=xs] i {
    height: calc(var(--_chk-h) - 0.2rem);
    line-height: calc(var(--_chk-h) - 0.4rem);
    padding-inline-start: .4rem;
  }
  &[size=xs] u {
    inset-inline-end: .4rem;
  }
  &[size=sm] {
    --_chk-h:  var(--_rem-display);
    font-size: var(--_rem-caption);
  }
  &[size=sm] i {
    height: calc(var(--_chk-h) - 0.2rem);
    line-height: calc(var(--_chk-h) - 0.4rem);
  }
  &[size=lg] {
    --_chk-h:  calc(var(--_rem-input) + 1rem);
  }
  &[size=lg] i {
    height: var(--_rem-input);
    line-height: calc(var(--_rem-input) - 0.2rem);
  }
}
/*Text of checkbox & radio*/
OC-CHECKBOX[type=text],
OC-RADIO[type=text] {
  --_chk-lh: var(--_rem-list);
  --_chk-h: auto;
  --_chk-a-v: start;
  --_chk-d: block;
  padding-inline: 0;
  padding-block: calc((var(--_rem-input) - var(--_chk-lh))/2);
  label {
    display: flex;
  }
  i {
    flex: auto;
    flex-wrap: wrap;
  }
}
OC-CHECKBOX[type=text] u {
  margin-block-start: calc(var(--_chk-lh)/2 - var(--_rem-subtitle)/2 + 0.1rem);
}
OC-RADIO[type=text] u {
  margin-block-start: calc((var(--_chk-lh) - var(--_rem-subtitle))/2);
}
/*Btn of checkbox & radio*/
OC-CHECKBOX[type=btn],
OC-RADIO[type=btn] {
  --_chk-lh: calc(var(--_chk-h) - 2px);
  border: 1px solid var(--_c-text-bd);
  border-radius: var(--_r-input);
  background-color: var(--_c-stage);
  padding-inline:1em;
  padding-block:0;
  box-sizing: border-box;
  transition: all var(--_dur-2) linear;
  label{
    height:calc(var(--_chk-h) - 2px);
  }
  &:hover {
    border-color: var(--_c-prim);
    background-color: var(--_c-prim-bg);
  }
  &:has(:checked) {
    border-color: var(--_c-prim);
  }
  &:focus-within {
    border-color: var(--_c-prim);
    outline: var(--_w-outline) solid transparent;
    outline-offset: 0px;
    outline-color: var(--_c-prim-sd);
  }
   &[size=xs] {
    font-size: var(--_rem-caption);
    padding-inline:var(--_em-min);
    border-radius: var(--_r-input-sm);
  }
  &[size=sm] {
    font-size: var(--_rem-caption);
    border-radius: var(--_r-input-sm);
  }
  &[size=lg] {
    padding-inline:2em;
    border-radius: var(--_r-input-lg);
  }
}
/*Switch of checkbox*/
OC-CHECKBOX[type=switch] {
  --_switch-w:calc(var(--_rem-subtitle)*2);
  --_switch-h:var(--_rem-subtitle);
  --_switch-r:var(--_switch-h);
  --_switch-btn-h:calc(var(--_switch-h) - 2px);
  --_switch-btn-w:var(--_switch-btn-h);
  --_switch-btn-r:var(--_switch-btn-h);
  --_switch-btn-inset:calc(var(--_switch-w) - var(--_switch-btn-w) - 2px);
  label {
    display: inline-flex;
  }
  i {
    transition: all var(--_dur-2) linear;
  }
  u~i {
    margin-inline-start: var(--_g);
  }
  u {
    width: var(--_switch-w);
    height:  var(--_switch-h);
    box-sizing: border-box;
    border: 1px solid var(--_c-text-bd);
    border-radius: var(--_switch-r);
    margin: calc((var(--_chk-h) - var(--_switch-h))/2) 0;
    background-color: var(--_c-text-bg);
    transition: all var(--_dur-2) linear;
    position: relative;
  }
  u:before {
    content: '';
    font-size: var(--_rem-space);
    color: var(--_c-brief);
    height: var(--_switch-btn-h);
    width:  var(--_switch-btn-w);
    line-height: var(--_switch-btn-h);
    border-radius:var(--_switch-btn-r);
    background-color: var(--_c-white);
    box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .4);
    transition: all var(--_dur-2) var(--_bez-eo);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset-inline-end: var(--_switch-btn-inset);
  }
  &:where([contained]){
    --_switch-r:calc(var(--_r) + 1px);
    --_switch-btn-r:var(--_r);
  }
  &:where([contained]:has(u[on][off])){
    --_switch-w:var(--_rem-hero);
    --_switch-btn-w:calc(var(--_rem-lead)*2);
  }
  &:where([contained]) u:before{
    content: attr(off);
  }
  &:where(:not([contained])) u:before{
  }
  &:where(:not([contained])) u:after {
    content: attr(off);
    color: var(--_c-caption);
    font-size: var(--_rem-space);
    height: calc(var(--_switch-h) - 2px);
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset-inline-start: auto;
    inset-inline-end: 0;
    pointer-events: none;
  }
  &:where(:hover) u {
    border-color: var(--_c-prim);
  }
  input:where(:checked)~u {
    border-color: var(--_c-prim);
    background-color: var(--_c-prim);
  }
  input:where(:checked)~u:before {
    --_switch-btn-inset:0;
  }
  &:where([contained]) input:where(:checked)~u:before{
    content: attr(on);
  }
  &:where(:not([contained])) input:where(:checked)~u:after {
    content: attr(on);
    color: var(--_c-white);
    inset-inline-end: auto;
    inset-inline-start: 0;
  }
  &:where([check=ing]:not(:has(input:checked))) input~u {
    background-color: var(--_c-prim-bg);
    border-color: var(--_c-prim);
  }
  input:where(:checked)+i {
    color: var(--_c-prim);
  }
  input:where(:disabled)~i {
    color: var(--_c-disable);
  }
  input:where(:disabled)~u {
    border-color: var(--_c-text-bd);
    background-color: var(--_c-disable-bg);
  }
  input:where(:disabled:checked)~u {
    background-color: var(--_c-prim-sd);
  }
  &[size=xs] {
    --_chk-h: var(--_rem-list);
  }
  &[size=sm] {
    --_chk-h: var(--_rem-display);
  }
  &[size=lg] {
    --_chk-h: var(--_rem-max)
  }
}
/*Checkboxes & Radios group */
OC-RADIOS,
OC-CHECKBOXES,
OC-RADIOS > [rep=wrap],
OC-CHECKBOXES > [rep=wrap]{
  width: 100%;
}
OC-RADIOS[type=btn],
OC-CHECKBOXES[type=btn] {
  --_chk-g-btn: var(--_rem-body);
}
OC-RADIOS[type=btn] OC-RADIO:not(:last-child),
OC-CHECKBOXES[type=btn] OC-CHECKBOX:not(:last-child) {
  margin-inline-end: var(--_chk-g-btn);
}
OC-RADIOS[type=btn][size=xs],
OC-CHECKBOXES[type=btn][size=xs] {
  --_chk-g-btn: var(--_rem-min);
}
OC-RADIOS[type=btn][size=sm],
OC-CHECKBOXES[type=btn][size=sm] {
  --_chk-g-btn: var(--_rem-space);
}
OC-RADIOS[type=btn][size=lg],
OC-CHECKBOXES[type=btn][size=lg] {
  --_chk-g-btn: var(--_rem-list);
}
/*Text input*/
OC-INPUT {
    --_input-h: var(--_em-input);
    --_input-w: var(--_w-input);
    --_input-p-se: var(--_em-space);
    --_input-p-btn: calc(var(--_em-space)*1.5);
    --_input-bw: 1px;
    --_input-bw-label: 1px;
    --_input-bw-unit: 1px;
    --_input-bc: var(--_c-text-bd);
    --_input-r: var(--_r-input);
    --_input-sd: var(--_c-prim-sd);
    --_input-bg: var(--_c-stage);
    --_input-c-foc: var(--_c-prim);
    --_input-c-hov: var(--_c-prim);
    --_input-bc-foc: var(--_input-c-foc);
    --_input-bc-hov: var(--_input-c-hov);
    --_input-bg-label: var(--_c-text-bg);
    --_input-bg-unit: var(--_c-text-bg);
    flex-direction: column;
    border-radius: var(--_input-r);
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    &[full] {
        display: flex;
        width:100%;
    }
    &:where(:not([full])) {
        display: inline-flex;
        width: var(--_input-w);
    }
    >[rep=wrap] {
        font-size: var(--_rem-body);
        color: var(--_c-caption);
        background-color: var(--_input-bg);
        border-radius: inherit;
        border: var(--_input-bw) solid var(--_input-bc);
        width: 100%;
        height: var(--_input-h);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        position: relative;
        transition: all var(--_dur-2) linear;
        &:focus-within {
            color: var(--_input-c-foc);
            border-color: var(--_input-bc-foc);
            outline: var(--_w-outline) solid var(--_input-sd);
            outline-offset: 0px;
        }
        >[rep=icon],
        >[rep=disk],
        >[rep=cube],
        >[rep=image] {
            margin-inline-start: var(--_input-p-se);
        }
        >[rep=icon] {
            width: 1em;
        }
        >[rep=disk],
        >[rep=cube],
        >[rep=image] {
            height: var(--_rem-subtitle);
        }
        >[rep=label],
        >[rep=unit] {
            color: var(--_c-brief);
            line-height: calc(var(--_input-h) - 2px);
            padding: 0 var(--_input-p-se);
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            max-width: 60%;
            text-overflow: ellipsis
        }
        >[rep=label] {
            background-color: var(--_input-bg-label);
            border-inline-end: var(--_input-bw-label) solid var(--_input-bc);
        }
        >[rep=unit] {
            background-color: var(--_input-bg-unit);
            border-inline-start: var(--_input-bw-unit) solid var(--_input-bc);
        }
        >[rep=custom] {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0 var(--_input-p-se);
            height: var(--_input-h);
        }
        >[rep=btn] {
            text-align: center;
            line-height:max(calc(var(--_input-h) - 2rem),var(--_rem-subtitle));
            padding: 0 var(--_input-p-btn);
            border-inline-start: 1px solid var(--_input-bc);
            transition: all var(--_dur-1) linear;
            &:hover {
                cursor: pointer;
                color: var(--_input-c-hov);
            }
        }
        >[rep=btn][disabled] {
            color: var(--_c-caption);
        }
        >[rep=mean],
        >[rep=view] {
            color: var(--_c-caption);
            font-family: var(--_ff-icon);
            cursor: pointer;
            width: var(--_rem-display);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            transition: all var(--_dur-2) linear;
            &:hover {
                color: var(--_input-c-hov);
            }
        }
        >[rep=view]{
            position: relative;
        }
        >[rep=view] s{
            font-family: var(--_ff-body);
            font-size: var(--_px-root);
            line-height: 1em;
            padding: 0 var(--_px-min);
            position: absolute;
            top: 0;
            inset-inline-end: 0;
        }
        >[rep=tools] {
            --_tools-fs: var(--_rem-caption);
            --_tools-c: var(--_c-caption);
            width: auto;
            margin-inline-end: calc((var(--_rem-display) - var(--_rem-list))/2);
        }
        >input {
            width: 100%;
            min-width: auto;
            height: 100%;
            border-width: 0;
            border-radius: var(--_input-r);
            outline: none;
            box-shadow: none;
            flex: auto;
        }
    }
    >[rep=limit] {
        font-size: var(--_px-caption);
        color: var(--_c-caption);
        line-height: 1.5em;
        padding: 0.33333em 0;
    }
    &[exceeded]>[rep=limit] {
        color: var(--_c-error);
    }
    &[iconholder]>[rep=wrap]>input::placeholder {
        font-family: var(--_ff-icon);
    }
    &[align=left]>[rep=wrap]>input,
    &[align=left]>[rep=wrap]>input::-webkit-input-placeholder {
        text-align: start;
    }
    &[align=center]>[rep=wrap]>input,
    &[align=center]>[rep=wrap]>input::-webkit-input-placeholder {
        text-align: center;
    }
    &[align=right]>[rep=wrap]>input,
    &[align=right]>[rep=wrap]>input::-webkit-input-placeholder {
        text-align: end;
    }
    /*
    input::-webkit-calendar-picker-indicator,
    input[type=search]::-webkit-search-cancel-button,
    input[type=date]::-webkit-inner-spin-button,
    input[type=date]::-webkit-calendar-picker-indicator,
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        display: none;
    }
     input[type="number"] {
        -moz-appearance: textfield;
    } */
    &:hover {
        border-color: var(--_input-bc-hov);
    }
    &[password]{
        >[rep=wrap]>input[type=password]::-ms-reveal {
            display: none;
        }
    }
    &[size=sm] {
        --_input-h: var(--_em-display);
        --_input-p-btn: var(--_input-p-se);
        --_input-r: var(--_r-input-sm);
    }
    &[size=lg] {
        --_input-h: var(--_em-max);
        --_input-p-se: var(--_em-body);
        --_input-r: var(--_r-input-lg);
    }
    &[feature=plain] {
        --_input-bg-label: transparent;
        --_input-bg-unit: transparent;
        --_input-bw-label: 0px;
        --_input-bw-unit: 0px;
    }
    &[feature=sign] {
        --_input-bg-label: transparent;
        --_input-bg-unit: transparent;
        --_input-bw-label: 0px;
        --_input-bw-unit: 0px;
        --_input-h: calc(var(--_em-input) + var(--_px-subtitle));
        >[rep=wrap] {
            padding-block-start: var(--_px-subtitle);
            >[rep=label] {
                font-size: var(--_px-caption);
                line-height: var(--_px-display);
                height:var(--_px-display);
                padding: 0 var(--_em-space-dec);
                color: var(--_c-brief);
                position: absolute;
                inset-inline-start: 0;
                inset-block-start: 0;
                pointer-events: none;
                z-index: 3;
            }
        }
        &[size=sm]{
            --_input-h: calc(var(--_em-display) + var(--_px-subtitle));
        }
        &[size=lg]{
            --_input-h: calc(var(--_em-max) + var(--_px-subtitle));
        }
    }
}
/*Textarea input*/
OC-TEXTAREA {
    --_tarea-p-se: var(--_em-space);
    --_tarea-fs: var(--_rem-body);
    --_tarea-r: var(--_r-input);
    --_tarea-w: var(--_w-input);
    --_tarea-h: var(--_em-input);
    --_tarea-lh: var(--_em-list);
    --_tarea-sd: var(--_c-prim-sd);
    --_tarea-bw: 1px;
    --_tarea-bc: var(--_c-text-bd);
    --_tarea-bg: var(--_c-stage);
    --_tarea-rows: 5;
    --_tarea-g-tools: calc((var(--_rem-display) - var(--_rem-list))/2);
    flex-direction: column;
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    &[full] {
        display: flex;
         width:100%;
    }
    &:where(:not([full])) {
        display: inline-flex;
        width: var(--_tarea-w);
    }
    [rep=wrap] {
        color: var(--_c-caption);
        background-color: var(--_tarea-bg);
        border-radius: var(--_tarea-r);
        border: var(--_tarea-bw) solid var(--_tarea-bc);
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        transition: all var(--_dur-2) linear;
        &:focus-within {
            border-color: var(--_c-prim);
            outline: var(--_w-outline) solid var(--_tarea-sd);
            outline-offset: 0px;
        }
        &:focus-within textarea {
            color: var(--_c-prim);
        }
        >[rep=mean],
        >[rep=head]>[rep=mean] {
            color: var(--_c-caption);
            font-family: var(--_ff-icon);
            cursor: pointer;
            width: var(--_rem-display);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            transition: all var(--_dur-2) linear;
            &:hover {
                color: var(--_c-prim);
            }
        }
        >[rep=head] {
            display: inline-flex;
            color: var(--_c-brief);
            background-color: var(--_c-text-bg);
            [rep=label] {
                flex: auto;
                padding: 0 var(--_tarea-p-se);
                box-sizing: border-box;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            [rep=mean]+[rep=label] {
                padding-inline-start: 0;
            }
            [rep=tools] {
                width: auto;
            }
        }
    }
    [rep=limit] {
        font-size: var(--_px-caption);
        color: var(--_c-caption);
        line-height: 1.5em;
        padding: 0.33333em 0;
    }
    &[exceeded] [rep=limit] {
        color: var(--_c-error);
    }
    textarea {
        --_field-p-se: var(--_tarea-p-se);
        --_field-fs: var(--_tarea-fs);
        --_field-lh: var(--_tarea-lh);
        --_field-h: var(--_tarea-h);
        --_field-rows: var(--_tarea-rows);
        --_field-r: var(--_tarea-r);
        width: 100%;
        min-width: auto;
        border-width: 0;
        outline: none;
        box-shadow: none;
        flex: auto;
    }
    &[iconholder] textarea::placeholder {
        font-family: var(--_ff-icon);
    }
    [rep=tools] {
        --_tools-fs: var(--_rem-caption);
        --_tools-c: var(--_c-caption);
    }
    &:where([single]) {
        --_tarea-p-tb: 0;
        --_tarea-lh: var(--_em-input);
        [rep=wrap] {
            flex-direction: row;
            align-items: center;
        }
        textarea {
            height: var(--_tarea-h);
            line-height: var(--_tarea-h);
            white-space: nowrap;
            overflow: hidden;
        }
        [rep=tools] {
            width: auto;
        }
    }
    &:where(:not([single])) {
        &:not(:has([rep=label])) [rep=tools] {
            width: auto;
            position: absolute;
            inset-inline-end: var(--_tarea-g-tools);
        }
        &:has([rep=label]) [rep=tools] {
            margin-inline-end: var(--_tarea-g-tools);
        }
        textarea:has(+[rep=tools]) {
            padding-inline-end: var(--_rem-display);
        }
        [rep=wrap][scrollable] {
            [rep=tools] {
                inset-inline-end: var(--_rem-space);
            }
        }
    }
    &:where([single]) {
        [rep=tools] {
            margin-inline-end: var(--_tarea-g-tools);
        }
    }
    &:where(:not([single]):not(:has([rep=label]))) {
        [rep=tools] {
            inset-block-start: var(--_tarea-g-tools);
            flex-direction: column;
        }
    }
    &:where(:not([single]):has([rep=label])) {
        [rep=tools] {
            inset-block-start: 0;
        }
    }
    &:where([scrollable]:not([single]):not(:has([rep=label]))) {
        [rep=tools] {
            inset-inline-end: var(--_rem-space);
        }
    }
    &:where([single]) {
        [rep=wrap]>[rep=head] {
            line-height: var(--_tarea-h);
            border-inline-end: 1px solid var(--_c-text-bd);
            max-width: 60%;
        }
    }
    &:where(:not([single])) {
        [rep=wrap]>[rep=head] {
            width: 100%;
            line-height: var(--_rem-display);
            border-block-end: 1px solid var(--_c-text-bd);
            display: flex;
            align-items: center;
        }
    }
    &[size=sm] {
        --_tarea-h: var(--_em-display);
        --_tarea-rows: 3;
        &:where([single]) {
            --_tarea-lh: var(--_tarea-h);
        }
    }
    &[size=lg] {
        --_tarea-p-se: var(--_em-body);
        --_tarea-r: var(--_r-input-lg);
        --_tarea-h: var(--_em-max);
        --_tarea-rows: 10;
        &:where([single]) {
            --_tarea-lh: var(--_tarea-h);
        }
    }
    &:hover {
        border-color: var(--_c-prim);
    }
    &[feature=plain] {
        [rep=wrap]>[rep=head] {
            background-color: transparent;
        }
        &:where([single]) [rep=wrap]>[rep=head] {
            border-inline-end: 0;
        }
        &:where(:not([single])) [rep=wrap]>[rep=head] {
            border-block-end: 0;
        }
    }
}
/*Number input*/
OC-NUMBER {
    --_number-h: var(--_em-input);
    --_number-w: calc(var(--_rem-input)*4);
    --_number-p-se: 0;
    --_number-bw: 1px;
    --_number-bc: var(--_c-text-bd);
    --_number-bc-hov: var(--_c-prim);
    --_number-bg: var(--_c-stage);
    --_number-bg-btn: var(--_c-text-bg);
    --_number-bg-btn-hov: var(--_number-bc-hov);
    --_number-sd: var(--_c-prim-sd);
    --_number-r: var(--_r-input);
    --_number-sz-btn: 100%;
    --_number-c-btn: var(--_c-caption);
    --_number-c-btn-hov: var(--_c-prim);
    --_number-bc-btn: var(--_number-bc);
    --_number-bc-btn-hov: var(--_number-bc-hov);
    flex-direction: column;
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    &[full] {
        display: flex;
    }
    &:where(:not([full])) {
        display: inline-flex;
        width: var(--_number-w);
    }
    [rep=wrap] {
        font-size: var(--_rem-body);
        width: 100%;
        height: var(--_number-h);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        position: relative;
        &:focus-within {
            input {
                color: var(--_number-bc-hov);
            }
        }
    }
    &:where(:not([layout=plain])) {
        [rep=wrap] {
            border: var(--_number-bw) solid var(--_number-bc);
            background-color: var(--_number-bg);
            border-radius: var(--_number-r);
            transition: all var(--_dur-2) linear;
            &:hover {
                border-color: var(--_number-bc-hov);
            }
            &:focus-within {
                border-color: var(--_number-bc-hov);
                outline: var(--_w-outline) solid var(--_number-sd);
                outline-offset: 0px;
            }
        }
    }
    [rep=label] {
        color: var(--_c-brief);
        line-height: calc(var(--_number-h) - 2px);
        background-color: var(--_c-text-bg);
        padding: 0 var(--_rem-space);
        box-sizing: border-box;
        border-inline-end: 1px solid var(--_number-bc);
        white-space: nowrap;
        overflow: hidden;
        max-width: 60%;
        text-overflow: ellipsis
    }
    [rep=tips] {
        font-size: var(--_px-caption);
        color: var(--_c-caption);
        line-height: 1.5em;
        padding: 0.33333em 0;
    }
    &[exceeded] [rep=tips] {
        color: var(--_c-error);
    }
    input {
        min-width: 0;
        height: 100%;
        text-align: center;
        padding: 0 var(--_number-p-se);
        flex: auto;
        -moz-appearance: textfield;
    }
    &:where(:not([layout=plain])) {
        input {
            border-width: 0;
            outline: none;
        }
    }
    input::-webkit-input-placeholder {
        text-align: center;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    &[iconholder] input::placeholder {
        font-family: var(--_ff-icon);
    }
    [rep=decrease],
    [rep=increase] {
        color: var(--_number-c-btn);
        font-family: var(--_ff-icon);
        background-color: var(--_c-text-bg);
        height: var(--_number-sz-btn);
        aspect-ratio: 1 /1;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        user-select: none;
        cursor: pointer;
        box-sizing: border-box;
        transition: all var(--_dur-2) linear;
        &[disabled] {
            opacity: var(--_o-disabled);
        }
        &:hover {
            color: var(--_number-c-btn-hov);
        }
    }
    [rep=decrease] {
        border-inline-end: 1px solid var(--_number-bc);
    }
    [rep=increase] {
        border-inline-start: 1px solid var(--_number-bc);
    }
    &[disabled] {
        opacity: var(--_o-disabled);
    }
    &:where([layout=plain]),
    &:where([layout=embed]) {
        --_number-c-btn-hov: var(--_c-white);
        [rep=decrease],
        [rep=increase] {
            font-size: var(--_rem-root);
            border-radius: 100%;
            border: 1px solid var(--_number-bc-btn);
            margin: 0 var(--_rem-space);
            &:hover {
                color: var(--_number-c-btn-hov);
                background-color: var(--_number-bc-btn-hov);
                border-color: var(--_number-bc-btn-hov);
            }
        }
    }
    &:where([layout=plain]) {
        --_number-sz-btn: var(--_rem-list);
    }
    &:where([layout=embed]) {
        --_number-sz-btn: var(--_rem-subtitle);
    }
    &:hover {
        border-color: var(--_number-bc-hov);
    }
    &[size=sm] {
        --_number-h: var(--_em-display);
        --_number-w: calc(var(--_rem-input)*3);
        --_number-r: var(--_r);
    }
    &[size=lg] {
        --_number-h: var(--_em-max);
        --_number-w: calc(var(--_rem-input)*6);
        --_number-r: var(--_r-input-lg);
    }
}
/*Range module*/
OC-RANGE {
    --_range-w: var(--_w-input);
    box-sizing: border-box;
    vertical-align: middle;
    width: var(--_range-w);
    display: inline-flex;
    &:where(:has(._range[full])) {
        --_range-w: 100%;
        display: block;
    }
    >._range {
        --_range-w: 100%;
    }
}
._range {
    --_range-w: var(--_w-input);
    --_range-sz: var(--_rem-input);
    --_range-sz-handle: 1.6rem;
    --_range-sz-track: 5px;
    --_range-sz-major: var(--_rem-body);
    --_range-sz-minor: var(--_rem-space);
    --_range-sz-h: 20rem;
    --_range-sz-w: 9.4rem;
    user-select: none;
    font-size: var(--_rem-caption);
    height: var(--_range-sz);
    position: relative;
    align-items: center;
    justify-content: center;
    &[full] {
        display: flex;
        width: 100%;
    }
    &:where(:not([full])) {
        display: inline-flex;
        width: var(--_range-w);
    }
    ._range-wrap {
        display: flex;
        flex: auto;
        align-items: center;
        justify-content: center;
    }
    ._range-main {
        position: relative;
        flex: auto;
    }
    ._range-track {
        height: var(--_range-sz-track);
        border-radius: var(--_range-sz-track);
        position: relative;
        z-index: 1;
        [rep=base] {
            background-color: var(--_c-text-ac);
            width: 100%;
            height: inherit;
            border-radius: inherit;
            transition: background-color var(--_dur-1) ease-out;
            position: relative;
            &:before {
                content: '';
                width: 100%;
                height: calc(var(--_range-sz-track)*5);
                position: absolute;
                inset-inline-start: 0;
                inset-block-start: calc(var(--_range-sz-track)*-1*2);
            }
        }
        [rep=thumb] {
            width: 0;
            height: inherit;
            border-radius: inherit;
            background-color: var(--_c-prim);
            position: absolute;
            inset-inline-start: 0;
            inset-block-start: 0;
            &:before {
                content: '';
                width: 100%;
                height: calc(var(--_range-sz-track)*5);
                position: absolute;
                inset-inline-start: 0;
                inset-block-start: calc(var(--_range-sz-track)*-1*2);
            }
        }
    }
    ._range-btn {
        color: var(--_c-prim);
        font-size: var(--_rem-body);
        cursor: pointer;
        transition: all var(--_dur-2) linear;
        &[rep=increase] {
            margin-inline-start: var(--_rem-space);
        }
        &[rep=decrease] {
            margin-inline-end: var(--_rem-space);
        }
        &[inert] {
            color: var(--_c-caption);
        }
        &:hover {
            scale: 1.2;
        }
    }
    ._range-result {
        margin-inline-start: var(--_rem-space);
        min-width: var(--_rem-display);
        text-align: end;
    }
    ._range-handle {
        >* {
            width: var(--_range-sz-handle);
            height: var(--_range-sz-handle);
            border-radius: var(--_range-sz-handle);
            border: 2px solid var(--_c-prim);
            background-color: var(--_c-stage);
            box-shadow: none;
            transition: box-shadow var(--_dur-1) linear, background-color var(--_dur-1) linear, border-color var(--_dur-1) linear, scale var(--_dur-1) linear;
            box-sizing: border-box;
            position: absolute;
            inset-block-start: calc(var(--_range-sz-handle)*-1/2 + var(--_range-sz-track)/2);
            z-index: 1;
        }
        >:where(:not([inert]):hover) {
            cursor: col-resize;
            box-shadow: 0 0 0 var(--_range-sz-track) var(--_c-prim-sd);
            scale: 1.2;
        }
        >[rep=from] {
            inset-inline-start: 0;
        }
        >[rep=to] {
            inset-inline-start: calc(100% - var(--_range-sz-handle));
            z-index: 2;
        }
        >[rep=single] {
            inset-inline-start: 0;
        }
        >[active] {
            z-index: 3;
        }
    }
    &:where(:not([inert])) {
        ._range-handle>*:where(:not([inert]):focus) {
            outline: none;
            box-shadow: 0 0 0 var(--_range-sz-track) var(--_c-prim-sd);
            scale: 1.2;
        }
    }
    ._range-bubble {
        >* {
            font-size: var(--_rem-caption);
            line-height: var(--_rem-subtitle);
            padding: 0 .5rem;
            border-radius: var(--_r);
            display: inline-flex;
            position: absolute;
            inset-block-start: calc(var(--_rem-subtitle)*-1 - (var(--_range-sz-handle) - var(--_range-sz-track))/2 - 0.6rem);
            z-index: 1;
        }
        [rep=from],
        [rep=to],
        [rep=single],
        [rep=merge] {
            color: var(--_c-white);
            background-color: var(--_c-prim);
            transform: translateX(calc((-50% + var(--_range-sz-handle)/2)*var(--_dir-coef)));
            &:before {
                content: "";
                display: block;
                width: 0;
                height: 0;
                margin-inline-start: -3px;
                overflow: hidden;
                border: 3px solid transparent;
                border-block-start-color: var(--_c-prim);
                position: absolute;
                inset-block-end: -6px;
                inset-inline-start: 50%;
            }
        }
        [rep=from] {}
        [rep=to] {
            z-index: 2;
        }
        [rep=single] {}
        [rep=merge] {
            visibility: hidden;
        }
        [rep=min],
        [rep=max] {
            color: var(--_c-text-aj);
            background-color: var(--_c-text-ac);
        }
        [rep=min] {
            inset-inline-start: 0;
        }
        [rep=max] {
            inset-inline-end: 0;
        }
        [active] {
            z-index: 3;
        }
    }
    ._range-ruler {
        width: calc(100% - var(--_range-sz-handle));
        margin: 0 calc(var(--_range-sz-handle)/2);
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: var(--_range-sz-track);
        ul {
            position: relative;
        }
        li {
            position: absolute;
            inset-block-start: 0;
            &:before {
                content: '';
                width: 1px;
                height: var(--_range-sz-major);
                background-color: var(--_c-text-bd);
                overflow: hidden;
                display: block;
                position: absolute;
                inset-block-start: 0;
                inset-inline-start: 0;
            }
            &:not([data-content]):before {
                height: var(--_range-sz-minor);
            }
            &:after {
                content: attr(data-content);
                color: var(--_c-caption);
                font-size: var(--_rem-caption);
                line-height: var(--_rem-caption);
                white-space: nowrap;
                text-align: center;
                position: absolute;
                inset-block-start: calc(var(--_range-sz-major) + 0.2rem);
                inset-inline-start: 0;
                transform: translateX(calc(-50%*var(--_dir-coef)));
            }
        }
        div {
            height: .2rem;
            background-color: var(--_c-text-bd);
            position: absolute;
            inset-block-start: calc(var(--_range-sz-minor) - 0.2rem);
        }
    }
    &:not([inert])[multiple] [rep=thumb]:hover {
        cursor: w-resize;
    }
    &[merged] ._range-bubble {
        [rep=from],
        [rep=to] {
            visibility: hidden;
        }
        [rep=merge] {
            visibility: visible;
        }
    }
    &[hidemin] {
        ._range-bubble [rep=min] {
            visibility: hidden;
        }
    }
    &[hidemax] {
        ._range-bubble [rep=max] {
            visibility: hidden;
        }
    }
    &:not([inert]):hover {
        ._range-track [rep=base] {
            background-color: var(--_c-prim-bd);
        }
    }
    &[inert] ._range-wrap {
        user-select: none;
        pointer-events: none;
        ._range-btn {
            color: var(--_c-prim-fc)
        }
        ._range-track [rep=thumb] {
            background-color: var(--_c-prim-fc)
        }
        ._range-bubble [rep=from],
        ._range-bubble [rep=to],
        ._range-bubble [rep=single],
        ._range-bubble [rep=merge] {
            background-color: var(--_c-prim-fc);
            &:before {
                border-block-start-color: var(--_c-prim-fc);
            }
        }
        ._range-handle>* {
            border-color: var(--_c-prim-fc);
            box-shadow: none;
        }
    }
    &[flow=v] {
        display: inline-flex;
        min-width: var(--_range-sz-w);
        min-height: var(--_range-sz-h);
        ._range-wrap {
            height: 100%;
            flex-direction: column-reverse;
        }
        ._range-main {
            width: var(--_range-sz-track);
        }
        ._range-track {
            height: 100%;
            width: var(--_range-sz-track);
            border-radius: var(--_range-sz-track);
            [rep=base] {
                width: inherit;
                height: inherit;
            }
            [rep=thumb] {
                width: inherit;
                inset-block-start: auto;
                inset-block-end: 0;
            }
            [rep=base]:before,
            [rep=thumb]:before {
                height: 100%;
                width: calc(var(--_range-sz-track)*5);
                inset-block-start: 0;
                inset-inline-start: calc(var(--_range-sz-track)*-1*2);
            }
        }
        ._range-bubble>* {
            inset-block-start: auto;
            inset-inline-start: auto;
            inset-inline-end: auto;
            transform: translateX(calc((-100% - var(--_range-sz-handle)/2 - 0.6rem)*var(--_dir-coef)));
        }
        ._range-bubble [rep=max] {
            inset-block-start: 0;
        }
        ._range-bubble [rep=min] {
            inset-block-end: 0;
        }
        ._range-bubble [rep=from]:before,
        ._range-bubble [rep=to]:before,
        ._range-bubble [rep=single]:before,
        ._range-bubble [rep=merge]:before {
            border: 3px solid transparent;
            border-block-start-color: transparent;
            border-inline-start-color: var(--_c-prim);
            inset-inline-start: auto;
            inset-block-end: auto;
            inset-block-start: calc(50% - 3px);
            inset-inline-end: -6px;
        }
        ._range-bubble [rep=merge] {
            transform: translate(calc((-100% - var(--_range-sz-handle)/2 - 0.6rem)*var(--_dir-coef)), calc(50% - var(--_range-sz-handle)/2));
        }
        ._range-handle>* {
            inset-inline-start: calc((var(--_range-sz-handle) - var(--_range-sz-track))/-2);
            inset-block-start: auto;
        }
        ._range-handle>*:not([inert]):hover {
            cursor: row-resize;
        }
        ._range-ruler {
            height: calc(100% - var(--_range-sz-handle));
            margin: calc(var(--_range-sz-handle)/2) 0;
            inset-inline-start: var(--_range-sz-track);
            inset-block-start: 0;
        }
        ._range-ruler ul {
            height: 100%;
        }
        ._range-ruler li {
            inset-block-start: auto;
            inset-inline-start: 0;
            inset-block-end: 0;
        }
        ._range-ruler li:before {
            height: 1px;
            width: var(--_range-sz-major);
            inset-block-start: auto;
            inset-block-end: 0;
            inset-inline-start: 0;
        }
        ._range-ruler li:not([data-content]):before {
            width: var(--_range-sz-minor);
        }
        ._range-ruler li:after {
            text-align: start;
            inset-block-start: 0;
            inset-inline-start: calc(var(--_range-sz-major) + 0.2rem);
            transform: translateY(-50%);
        }
        ._range-ruler [rep=fence] {
            height: 0;
            width: 0.2rem;
            inset-block-start: auto;
            inset-inline-start: calc(var(--_range-sz-minor) - 0.2rem);
        }
        ._range-btn[rep=increase],
        ._range-btn[rep=decrease],
        ._range-result {
            line-height: var(--_rem-body);
        }
        ._range-btn[rep=increase] {
            margin-block-end: var(--_rem-space);
            margin-inline-start: 0;
        }
        ._range-btn[rep=decrease] {
            margin-block-start: var(--_rem-space);
            margin-inline-end: 0;
        }
        ._range-result {
            margin-inline-start: 0;
            margin-block-end: var(--_rem-space);
            min-width: auto;
            text-align: center;
        }
        &:not([inert])[multiple] [rep=thumb]:hover {
            cursor: s-resize;
        }
    }
    &[size=sm] {
        --_range-sz: var(--_rem-display);
        --_range-sz-track: 3px;
        --_range-sz-major: var(--_rem-space);
        --_range-sz-minor: var(--_rem-min);
        --_range-sz-h: 20rem;
        --_range-sz-w: 9.4rem;
    }
    &[size=lg] {
        --_range-sz: var(--_rem-max);
        --_range-sz-handle: var(--_rem-list);
        --_range-sz-track: var(--_rem-caption);
        --_range-sz-major: var(--_rem-subtitle);
        --_range-sz-minor: var(--_rem-space);
        --_range-sz-h: 30rem;
        --_range-sz-w: 12.4rem;
        ._range-btn {
            font-size: var(--_rem-subtitle);
        }
    }
}
@-moz-document url-prefix() {
    ._range ._range-bubble [rep=from]:before,
    ._range ._range-bubble [rep=to]:before,
    ._range ._range-bubble [rep=single]:before,
    ._range ._range-bubble [rep=merge]:before {
        inset-block-end: -5px;
    }
}
/*Accordion*/
OC-EDITOR {
  --_editor-r: 0;
  --_editor-w: 100%;
  display: block;
  width: var(--_editor-w);
  content-visibility: auto;
  border-radius: var(--_editor-r);
}
._editor {
  --_editor-row: 20;
  --_editor-h: calc(var(--_rem-display)*var(--_editor-row));
  --_editor-bg: var(--_c-stage);
  width: 100%;
  border-radius: inherit;
  background-color: var(--_editor-bg);
  box-sizing: border-box;
  &[bordered] {
    border: 1px solid var(--_c-text-bd);
  }
  &[rounded] {
    border-radius: var(--_r-input);
  }
  >input,
  >textarea {
    display: none;
  }
  ._editor-head {
    border-block-end: 1px solid var(--_c-text-bd);
    padding: var(--_rem-space);
    box-sizing: border-box;
    ._box-tools {
      --_tools-g: var(--_rem-space);
      --_tools-h: var(--_rem-display);
      --_tools-bg-hov:var(--_c-prim-bg);
      --_tools-bg-hov-haz:var(--_c-error-bg);
    }
  }
  ._editor-body {
    box-sizing: border-box;
    position: relative;
    &[spinning]:before {
      content: '';
      background-image: var(--_spin);
      background-position: center;
      background-repeat: no-repeat;
      background-size: auto min(var(--_rem-input),100%);
      width: 100%;
      height: 100%;
      position: absolute;
      inset-inline-start: 50%;
      inset-block-start: 50%;
      transform: translate(calc(-50%*var(--_dir-coef)), -50%);
      background-color: var(--_c-stage-60);
      z-index: 3;
    }
  }
  &[bordered] ._editor-body {
    display: flex;
  }
  ._editor-source {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    outline-width: 0;
    border-radius: 0;
    border: none;
    background-color: var(--_c-text-bg);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: 2;
    &:focus {
      color: var(--_c-text);
    }
  }
  ._editor-cont {
    padding: var(--_rem-space);
    box-sizing: border-box;
    width: 100%;
    min-height: calc(var(--_rem-display)*5);
    max-height: var(--_editor-h);
    overflow: auto;
    >* {
      max-width: 100%;
    }
    &:empty:before {
      content: attr(placeholder);
      pointer-events: none;
      color: var(--_c-caption);
    }
    &:focus-visible {
      outline: 1px solid var(--_c-prim);
    }
    p:empty {
      height: var(--_rem-display);
    }
  }
  &[mode=source] {
    ._editor-cont {
      visibility: hidden;
    }
    ._editor-source {
      display: block;
      &:focus-visible {
        outline: 1px solid var(--_c-caption);
      }
    }
    ._editor-head ._box-tools>:not([rep=source]) {
      opacity:var(--_o-disabled);
      pointer-events: none;
    }
  }
  &[mode=editor] {
    ._editor-source {
      display: none;
    }
  }
  ._editor-mask {
    display: none;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: 3;
  }
  &[deferred] {
    ._editor-cont {
      visibility: hidden;
    }
    ._editor-head>* {
      opacity:var(--_o-disabled);
      pointer-events: none;
    }
    ._editor-mask {
      display: flex;
    }
  }
  ._editor-foot {
    font-size: 12px;
    color: var(--_c-caption);
    box-sizing: border-box;
    padding: 0 var(--_rem-space);
    line-height: 28px;
    border-block-start: 1px solid var(--_c-text-bd);
    display: flex;
  }
  ._editor-path {
    flex: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  ._editor-state {
    margin-inline-start: var(--_rem-body);
  }
  &[inert] {
    opacity:var(--_o-disabled);
  }
  ._editor-head[inert]~._editor-body {
    user-select: none;
  }
}
/*Select*/
OC-SELECT {
  --_select-w: var(--_w-input);
  --_select-h: var(--_h-input);
  --_select-r: var(--_r-input);
  --_select-bw: 1px;
  --_select-bc: var(--_c-text-bd);
  --_select-sd: var(--_c-prim-sd);
  --_select-fs: var(--_rem-body);
  --_select-h-alt:var(--_select-h);
  width: var(--_select-w);
  content-visibility: auto;
  border: var(--_select-bw) solid var(--_select-bc);
  vertical-align: middle;
  border-radius: var(--_select-r);
  box-sizing: border-box;
  transition: all var(--_dur-2) linear;
  &:where(:has(._select[full])) {
    --_select-w: 100%;
    display: flex;
  }
  &:where(:not(:has(._select[full]))) {
    display: inline-flex;
  }
  &:focus-within,
  &:has(._opened._select) {
    border-color: var(--_c-prim);
    outline: var(--_w-outline) solid var(--_select-sd);
    outline-offset: 0px;
  }
  &:hover {
    border-color: var(--_c-prim);
  }
  >._select {
    --_select-h: var(--_select-h-alt);
    --_select-r: inherit;
    --_select-w: inherit;
    --_select-bw: 0;
    --_select-fs: inherit;
    flex: auto;
    &:focus-within {
      outline: none;
    }
  }
}
:not(OC-SELECT) ._select {
  &:focus-within,
  &._opened {
    border-color: var(--_c-prim);
    outline: var(--_w-outline) solid var(--_select-sd);
    outline-offset: 0px;
  }
  &:hover {
    border-color: var(--_c-prim);
  }
}
._select {
  --_select-h: var(--_rem-input);
  --_select-r: var(--_r-input);
  --_select-w: var(--_w-input);
  --_select-p-tb: var(--_em-min);
  --_select-p-se: var(--_rem-min);
  --_select-sd: var(--_c-prim-sd);
  --_select-bg: var(--_c-stage);
  --_select-bw: 1px;
  --_select-bc: var(--_c-text-bd);
  --_select-fs: var(--_rem-body);
  font-size: var(--_select-fs);
  background-color: var(--_select-bg);
  min-height: var(--_select-h);
  box-sizing: border-box;
  align-items: center;
  padding-block-start: var(--_select-p-tb);
  padding-block-end: var(--_select-p-tb);
  padding-inline-start: var(--_select-p-se);
  padding-inline-end: 0;
  border: var(--_select-bw) solid var(--_select-bc);
  border-radius: var(--_select-r);
  transition: all var(--_dur-2) linear;
  &[full] {
    display: flex;
    width: 100%;
  }
  &:where(:not([full])) {
    display: inline-flex;
    width: var(--_select-w);
  }
  >[rep=input] {
    display: none;
  }
  >._tags {
    --_tags-fs:var(--_select-fs);
    --_tags-h:calc(var(--_select-h) - var(--_select-p-tb)*2);
    flex: auto;
    [rep=empty] {
      color: var(--_c-caption);
      pointer-events: none;
    }
    input {
      border-width: 0;
    }
    >input:first-child,
    >[rep=empty] {
      padding-inline-start: var(--_rem-min);
    }
  }
  &[manual]>._tags input {
    flex: auto;
    background-color: transparent;
  }
  &:where(:not([multiple]):not([manual])) {
    >._tags {
      flex: auto;
    }
    ._tag {
      border-width: 0;
      flex: auto;
      width: 0;
      [rep=label] {
        flex: auto;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
  >[rep=arrow] {
    width: var(--_rem-list);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    transition: all var(--_dur-2) linear;
  }
  >[rep=arrow]:after {
    content: '';
    height: 0;
    width: 0;
    margin: auto 0;
    border-color: var(--_c-caption) transparent transparent transparent;
    border-style: solid;
    border-width: 4px 4px 0 4px;
  }
  &._opened>[rep=arrow] {
    rotate: 180deg;
  }
  >[rep=tools] {
    --_tools-c: var(--_c-caption);
    width: auto;
    >* {
      font-size: var(--_rem-caption);
    }
  }
  &[inert] {
    pointer-events: none;
    opacity: var(--_o-disabled);
  }
  &[size=sm] {
    --_select-h: var(--_em-display);
    --_select-p-tb: calc((var(--_em-display) - var(--_rem-list))/2);
    --_select-p-se: calc((var(--_rem-display) - var(--_rem-list))/2);
  }
  &[size=lg] {
    --_select-h: var(--_em-max);
    --_select-p-tb: calc((var(--_em-max) - var(--_rem-input))/2);
    --_select-p-se: calc((var(--_rem-max) - var(--_rem-input))/2);
  }
}
._select-popup {
  --_popup-r: var(--_r-input);
  min-width: var(--_h-input);
  &[size=md] {
    --_popup-w: var(--_w-input);
  }
}
._select-wrap {
  position: relative;
  contain: content;
  >._select-search {
    display: flex;
    flex-direction: column;
    padding: 0 var(--_rem-body);
    &:has([rep=keys]) {
      padding-block-start: var(--_rem-body);
    }
    [rep=result] {
      color: var(--_c-brief);
      line-height: var(--_rem-subtitle);
      font-size: var(--_rem-caption);
      padding: var(--_rem-space) 0;
    }
  }
  >._select-list {
    max-height: calc((var(--_rem-input) + 1px)*5 - 1px);
    overflow: auto;
    &:where([feature=button]) {
      padding: var(--_rem-body);
      >ul {
        margin-block-end: calc(var(--_rem-space)*-1);
      }
    }
    &:where(:not([feature=button])) {
      >._tree-children>li>._tree-head,
      >._tree-children>li li>._tree-head {
        border-block-start: 1px solid var(--_c-text-bd);
      }
    }
    >._tree-empty {
      padding: 0 var(--_rem-root);
    }
  }
  &:where(:not(:has(._select-search)))>._select-list:where(:not([feature=button])) {
    >._tree-children>li:first-child>._tree-head {
      border-block-start-width: 0;
    }
  }
  >._select-status {
    width: 100%;
    box-sizing: border-box;
    padding: 0 var(--_rem-body);
    border-block-start: 1px solid var(--_c-text-bd);
    display: flex;
    align-items: center;
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    [rep=stats] {
      color: var(--_c-brief);
      flex: auto;
      text-align: end;
    }
  }
  >._select-holder {
    height: var(--_rem-input);
  }
}
/*Upload*/
OC-UPLOAD {
    display: block;
    content-visibility: auto;
}
._upload {
    --_upl-img-h: calc(var(--_rem-display)*5);
    --_upl-grid-cols: 4;
    --_upl-grid-g: var(--_rem-space): position: relative;
    position: relative;
    &[inert] {
        opacity: 0.5;
    }
    input {
        display: none;
    }
    &:where(:not([feature])) [rep=upload],
    &:where(:not([feature])) [rep=clear] {
        margin-inline-start: var(--_rem-space);
    }
    ._upload-foot {
        box-sizing: border-box;
        display: flex;
        ._upload-info {
            font-size: var(--_rem-caption);
            color: var(--_c-text-aj);
            line-height: var(--_rem-subtitle);
            flex: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }
    &:where(:not([status])) ._upload-foot {
        display: none;
    }
    &:where(:not([feature])) ._upload-foot {
        margin-block-end: var(--_rem-space);
    }
    &:where(:not([feature])[status]) ._upload-head,
    &:where(:not([feature]):not([status]):not(:has(._upload-list:empty))) ._upload-head {
        margin-block-end: var(--_rem-space);
    }
    &:where(:not([type=table])) {
        li[progress=received] [rep=progress],
        li[valid=failed] [rep=progress],
        li[progress=received] [rep=percent],
        li[valid=failed] [rep=percent] {
            display: none;
        }
        li[progress=received] [rep=message] {
            display: none;
        }
        li:where(:not([progress=received])) [rep=sign] {
            display: none;
        }
    }
    &[type=text] ._upload-head,
    &[type=bullet] ._upload-head,
    &[type=table] ._upload-head {
        &:empty {
            display: none;
        }
    }
    &[type=text] li,
    &[type=bullet] li,
    &[type=table] tr {
        ._upload-info {
            flex: auto;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        ._upload-info [rep=size],
        ._upload-info [rep=url] {
            font-size: var(--_rem-caption);
            color: var(--_c-brief);
            line-height: var(--_rem-subtitle);
        }
        [rep=title] {
            color: var(--_c-text);
        }
        [rep=sign],
        [rep=pause],
        [rep=upload],
        [rep=remove] {
            text-align: center;
            width: var(--_rem-display);
        }
        [rep=upload] {
            cursor: pointer;
            &:hover {
                color: var(--_c-prim);
            }
        }
        [rep=remove] {
            cursor: pointer;
            &:hover {
                color: var(--_c-error);
            }
        }
        &[valid=success][progress=received] [rep=sign] {
            color: var(--_c-prim);
        }
        &[valid=failed],
        &[valid=failed] [rep=title] {
            color: var(--_c-error);
        }
        &[progress=received] [rep=upload],
        &[valid=failed] [rep=upload] {
            opacity: 0.5;
            pointer-events: none;
        }
    }
    &[type=text] li,
    &[type=bullet] li {
        display: flex;
        align-items: center;
        width: 100%;
        transition: all var(--_dur-2) linear;
        box-sizing: border-box;
        position: relative;
        [rep=progress] {
            width: 100%;
            position: absolute;
            inset-inline-start: 0;
            inset-block-end: 0;
        }
        [rep=message],
        [rep=percent],
        [rep=state] {
            margin-inline-end: var(--_rem-space);
        }
    }
    &[type=text] ._upload-list {
        border: 1px solid var(--_c-text-bd);
        border-radius: var(--_r);
        &:empty {
            display: none;
        }
    }
    &[type=text] li {
        padding: 0 var(--_rem-space);
        line-height: var(--_rem-input);
        &:where(:not(:last-child)) {
            border-block-end: 1px solid var(--_c-text-bd);
        }
        [rep=title] {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 100%;
        }
        [rep=icon] {
            margin-inline-end: var(--_rem-min);
        }
        &:hover {
            background-color: var(--_c-text-bg);
        }
    }
    &[type=bullet] li {
        border: 1px solid var(--_c-text-bd);
        background-color: var(--_c-stage);
        border-radius: var(--_r);
        height: calc(var(--_rem-subtitle)*3 + 1.6rem);
        overflow: hidden;
        padding: var(--_rem-space);
        justify-content: flex-start;
        align-items: center;
        ._upload-file {
            color: var(--_c-brief);
            height: calc(var(--_rem-subtitle)*3);
            width: calc(var(--_rem-subtitle)*3);
            overflow: hidden;
            margin-inline-end: var(--_rem-space);
            display: flex;
            justify-content: center;
            align-items: center;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            [rep=icon] {
                font-size: var(--_rem-input);
            }
        }
        ._upload-info {
            line-height: var(--_rem-subtitle);
        }
        [rep=title] {
            width: 100%;
            max-height: calc(var(--_rem-subtitle)*2);
            overflow: hidden;
            display: -webkit-box;
            white-space: normal;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-align: start;
        }
        &[valid=failed] {
            border-color: var(--_c-error);
            [rep=icon] {
                color: var(--_c-error);
            }
        }
        &:hover {
            box-shadow: 1px 1px .5rem rgba(0, 0, 0, .06);
        }
    }
    &[type=bullet] ._upload-list li:where(:not(:last-child)) {
        margin-block-end: var(--_rem-space);
    }
    &[type=cube] [rep=progress],
    &[type=card] [rep=progress] {
        position: absolute;
        inset-inline-end: 0;
        inset-inline-start: 0;
        inset-block-start: 0;
        inset-block-end: 0;
        z-index: 2;
    }
    &[type=cube] [rep=sign],
    &[type=card] [rep=sign] {
        color: var(--_c-white);
        font-size: var(--_px-root);
        background-color: var(--_c-prim);
        width: var(--_px-list);
        height: var(--_px-list);
        border-radius: var(--_px-list);
        line-height: var(--_px-list);
        text-align: center;
        transform: translate(calc(-50%*var(--_dir-coef)), -50%) scale(.8);
        position: absolute;
        inset-inline-start: 50%;
        inset-block-start: 50%;
        z-index: 2;
    }
    &[type=cube] li[progress=received],
    &[type=card] li[progress=received] {
        [rep=progress] {
            display: none;
        }
        [rep=sign] {
            transform: scale(.8);
            inset-inline-start: auto;
            inset-block-start: auto;
            inset-inline-end: var(--_rem-space);
            inset-block-end: var(--_rem-space);
        }
    }
    &[type=cube] [rep=message],
    &[type=card] [rep=message] {
        color: var(--_c-white);
        background-color: var(--_c-error);
        font-size: var(--_rem-caption);
        line-height: var(--_rem-subtitle);
        width: 100%;
        text-align: center;
        padding: var(--_rem-space);
        box-sizing: border-box;
        position: absolute;
        inset-inline-start: 0;
        inset-block-end: 0;
        z-index: 2;
    }
    &[type=cube] ._upload-mask,
    &[type=card] ._upload-mask {
        width: 100%;
        color: var(--_c-white);
        background-color: var(--_c-black-60);
        text-align: center;
        visibility: hidden;
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0;
        z-index: 4;
        * {
            color: var(--_c-white);
            text-align: center;
            width: var(--_rem-input);
            height: var(--_rem-input);
            line-height: var(--_rem-input);
            cursor: pointer;
        }
    }
    &[type=cube] li,
    &[type=card] li {
        &:hover ._upload-mask {
            visibility: visible;
        }
        &:not([progress=received]) [rep=download],
        &:not([progress=received]) [rep=view],
        &[progress=received] [rep=upload],
        &[valid=failed] [rep=upload] {
            opacity: var(--_o-disabled);
            cursor: not-allowed;
        }
        &[valid=success] [rep=message],
        [rep=state] {
            display: none;
        }
    }
    &[type=cube] {
        ._upload-list {
            display: flex;
            flex-wrap: wrap
        }
        li {
            color: var(--_c-text-aj);
            border: 1px solid var(--_c-text-bd);
            width: calc(var(--_rem-display)*5);
            height: calc(var(--_rem-display)*5);
            border-radius: var(--_r-input);
            background-color: var(--_c-stage);
            box-sizing: border-box;
            overflow: hidden;
            margin: 0 var(--_rem-space) var(--_rem-space) 0;
            transition: all var(--_dur-2) linear;
            display: inline-block;
            position: relative;
            ._upload-file {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                [rep=icon] {
                    color: var(--_c-text-aj);
                    font-size: var(--_rem-max);
                }
            }
            &:hover {
                box-shadow: 1px 1px .5rem rgba(0, 0, 0, .06);
            }
            &[valid=failed] {
                color: var(--_c-error);
                border: 1px solid var(--_c-error);
                [rep=icon] {
                    color: var(--_c-error);
                }
            }
        }
    }
    &[type=card] {
        ul>* {
            min-width: 0;
        }
        [rep=size] {
            font-size: var(--_rem-caption);
            color: var(--_c-brief);
        }
        li {
            ._upload-file {
                width: 100%;
                aspect-ratio: 4 / 3;
                border-radius: var(--_r-input);
                border: 1px solid var(--_c-text-bd);
                overflow: hidden;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                audio,
                video {
                    width: 100%;
                }
                [rep=icon] {
                    color: var(--_c-text-aj);
                    font-size: var(--_rem-max);
                }
            }
            @supports not (aspect-ratio: 1 / 1) {
                ._upload-file {
                    height: 14rem;
                }
            }
            ._upload-info {
                line-height: var(--_rem-subtitle);
                margin: var(--_rem-min) auto var(--_rem-space) auto;
                display: flex;
                flex-direction: column;
                >* {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
            &[valid=failed] {
                color: var(--_c-error);
            }
            &[valid=failed] ._upload-file {
                color: var(--_c-error);
                border-color: var(--_c-error);
                [rep=icon] {
                    color: var(--_c-error);
                }
            }
            &:hover ._upload-file {
                box-shadow: 1px 1px .5rem rgba(0, 0, 0, .06);
            }
        }
    }
    &[type=table] {
        ._upload-file {
            max-width: calc(var(--_rem-display)*2);
            height: var(--_rem-display);
            overflow: hidden;
            img {
                height: 100%;
                object-fit: contain;
            }
            [rep=icon] {
                font-size: var(--_rem-subtitle);
            }
        }
        td {
            line-height: var(--_rem-display);
        }
        td:has([rep=remove]) {
            text-align: end;
        }
        [rep=state] {
            white-space: nowrap;
        }
        &:has(tbody:empty) table {
            display: none;
        }
        tr[valid=failed] [rep=progress] {
            opacity: 0.5;
        }
    }
    &[feature=picture] li {
        &[rep=choose],
        &[rep=upload],
        &[rep=clear] {
            color: var(--_c-caption);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            [rep=icon] {
                font-size: var(--_rem-display);
                color: var(--_c-caption);
                transition: all var(--_dur-2) linear;
            }
        }
        &[rep=choose],
        &[rep=upload] {
            &:hover {
                color: var(--_c-prim);
                border-color: var(--_c-prim);
            }
            &:hover [rep=icon] {
                color: var(--_c-prim);
            }
            &:focus-within {
                border-color: var(--_c-prim);
            }
        }
        &[rep=clear] {
            &:hover {
                color: var(--_c-error);
                border-color: var(--_c-error);
            }
            &:hover [rep=icon] {
                color: var(--_c-error);
            }
            &:focus-within {
                border-color: var(--_c-error);
                outline-color: var(--_c-error-sd);
            }
        }
        ._upload-foot {
            margin-block-start: var(--_rem-space);
        }
    }
    &[feature=picture][dragging] [rep=choose] {
        border-color: var(--_c-prim);
        color: var(--_c-prim);
        [rep=icon] {
            color: var(--_c-prim);
        }
    }
    &[feature=gallery] {
        background-color: var(--_c-stage);
        border: 1px solid var(--_c-text-bd);
        border-radius: var(--_r-input);
        box-sizing: border-box;
        transition: all var(--_dur-2) linear;
        &:focus-within {
            border-color: var(--_c-prim);
        }
        [rep=ctrlv] {
            font-size: var(--_rem-caption);
            color: var(--_c-caption);
            padding: 0 var(--_rem-space);
            position: absolute;
            inset-inline-end: 0;
            inset-block-start: 0;
            display: none;
            &:focus {
                outline: none;
            }
        }
        &[type=cube] li ,
        &[type=card] li ._upload-file{
            border-radius: var(--_r);
        }
        &[type=card] ul {
            padding-block-start: 0;
            padding-block-end: var(--_rem-space);
            padding-inline-start: var(--_rem-space);
            padding-inline-end: var(--_rem-space);
        }
        &:where(:not([type=card])) ul {
            margin-block-start: 0;
            margin-block-end: var(--_rem-space);
            margin-inline-start: var(--_rem-space);
            margin-inline-end: var(--_rem-space);
        }
        [rep=choose] {
            color: var(--_c-caption);
            cursor: pointer;
            text-align: center;
            padding: var(--_rem-body);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            [rep=icon] {
                font-size: calc(var(--_rem-hero));
                line-height: calc(var(--_rem-hero));
            }
            &:hover,
            &:hover [rep=icon] {
                color: var(--_c-prim);
            }
        }
        &:hover {
            border-color: var(--_c-prim);
        }
        &:hover [rep=ctrlv] {
            display: block;
        }
        ._upload-foot {
            background-color: var(--_c-text-bg);
            border-block-start: 1px solid var(--_c-text-bd);
            padding: var(--_rem-space);
            [rep=clear],
            [rep=upload] {
                margin-inline-start: var(--_rem-space);
            }
        }
        &:where(:not([status]):not([manual])) ._upload-foot {
            display: none;
        }
        &[progress=ready] [rep=choose] {
            padding-block-start: calc(var(--_rem-body)*2);
            padding-block-end: calc(var(--_rem-body)*2);
        }
        &[progress=processing] [rep=choose] [rep=icon] {
            display: none;
        }
        &[dragging] {
            border-color: var(--_c-prim);
            [rep=choose] {
                color: var(--_c-prim);
                [rep=icon] {
                    color: var(--_c-prim);
                }
            }
        }
    }
}
/*
Last modified: 2025-07-05 10:50:16
*/
/*Date and datetime picker*/
._datetime {
    --_date-label-h: calc(var(--_rem-input) - var(--_rem-min));
    --_date-panel-w: min(calc(var(--_rem-input)*10 - 2px),100vw);
    --_date-menu-w: calc(var(--_rem-subtitle)*10);
    --_date-side-w: calc(var(--_rem-title)*10);
    height: auto;
    position: relative;
    display: inline-flex;
    background-color: var(--_c-stage);
    box-sizing: border-box;
    &[disabled] {
        opacity: 0.5;
    }
    &[display=inline] {
        border: 1px solid var(--_c-text-bd);
        border-radius: var(--_r-input);
        margin-block-start: var(--_rem-space);
        overflow: hidden;
    }
    &[display=popup],
    &[display=dialog],
    &[display=drawer] {
        border-radius: inherit;
    }
    >[rep=wrap] {
        border-start-start-radius: inherit;
        border-start-end-radius: inherit;
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        box-sizing: border-box;
    }
    [rep=menu] {
        border-inline-end: 1px solid var(--_c-text-bd);
        width: var(--_date-menu-w);
        padding: var(--_rem-space);
        >* {
            height: var(--_rem-input);
            line-height: calc(var(--_rem-input)/2);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            transition: all var(--_dur-2) linear;
        }
        >[selected],
        >*:hover {
            color: var(--_c-prim);
        }
        >*:hover {
            cursor: pointer;
        }
    }
    [rep=detail] {
        border-inline-start: 1px solid var(--_c-text-bd);
        width: var(--_date-side-w);
        padding: var(--_rem-space);
        box-sizing: border-box;
        [rep=heading] {
            padding-block-end: var(--_rem-space);
            border-block-end: 1px solid var(--_c-text-bd);
        }
        [rep=lunar] {
            padding-block-start: var(--_rem-space);
            padding-block-end: var(--_rem-space);
            border-block-end: 1px solid var(--_c-text-bd);
        }
        [rep=event] {
            padding-block-start: var(--_rem-space);
        }
    }
    [rep=foot] {
        box-sizing: border-box;
        overflow: hidden;
        &:where(:not(:has([layout=plain]))) {
            border-block-start: 1px solid var(--_c-text-bd);
            padding: var(--_rem-space);
            [rep=search] {
                --_input-w: min(100%,16rem);
                --_input-sd: transparent;
            }
        }
        &:where(:has([layout=plain])) {
            [rep=search] {
                --_input-bw: 0;
                --_input-r: 0;
                --_input-sd: transparent;
            }
        }
        [rep=tips]>* {
            padding: 0;
        }
    }
    &:not([type=daytime]) [rep=foot] [rep=time]:after {
        width: auto;
        display: inline-block !important;
        position: inherit !important;
        transform-origin: center !important;
        border-width: 0 !important;
        font-family: var(--_ff-icon);
        font-size: var(--_rem-caption);
        color: var(--_c-caption);
        transform: scale(.6);
        content: 'up';
        transition: all var(--_dur-2) linear;
    }
    [rep=head] {
        line-height: var(--_rem-input);
        box-sizing: border-box;
        text-align: center;
        position: relative;
        >* {
            margin: 0 var(--_rem-min);
        }
        [rep=year],
        [rep=month] {
            cursor: pointer;
        }
        [rep=year]:after,
        [rep=month]:after {
            display: inline-block;
            font-family: var(--_ff-icon);
            font-size: var(--_rem-caption);
            color: var(--_c-caption);
            scale: 0.6;
            content: 'down';
            transition: all var(--_dur-2) linear;
        }
        ._opened:after {
            rotate: 180deg;
        }
    }
    &[type=year] [rep=head] [rep=year] {
        cursor: auto;
    }
    &[type=year] [rep=head] [rep=year]:after {
        display: none;
    }
    [rep=result] {
        box-sizing: border-box;
        padding: .8rem;
    }
    [rep=outer] {
        position: relative;
    }
    [rep=result]+[rep=outer] {
        border-block-start: 1px solid var(--_c-text-bd);
    }
    [rep=prev],
    [rep=next] {
        position: relative;
        z-index: 3;
    }
    [rep=prev]>*,
    [rep=next]>* {
        font-size: var(--_rem-caption);
        line-height: var(--_rem-input);
        width: var(--_rem-input);
        text-align: center;
        transition: all var(--_dur-2) linear;
        position: absolute;
        inset-block-start: 0;
    }
    [rep=prevYear] {
        inset-inline-start: var(--_rem-space);
    }
    [rep=nextYear] {
        inset-inline-end: var(--_rem-space);
    }
    [rep=prevMonth] {
        text-align: start;
        inset-inline-start: calc(var(--_rem-input) + var(--_rem-space));
    }
    [rep=nextMonth] {
        text-align: end;
        inset-inline-end: calc(var(--_rem-input) + var(--_rem-space));
    }
    [rep=prev]>*:hover,
    [rep=next]>*:hover {
        cursor: pointer;
        color: var(--_c-prim);
    }
    [rep=tools] {
        --_tools-c: var(--_c-caption);
        --_tools-c-hov: var(--_c-text);
        padding: 0 var(--_rem-space);
        align-items: center;
        text-align: center;
        height: var(--_rem-input);
        position: absolute;
        inset-inline-end: 0;
        inset-block-start: 0;
        z-index: 2;
        display: none;
    }
    [rep=tools]>* {
        font-family: var(--_ff-icon);
        font-size: var(--_rem-caption);
        text-align: center;
        transition: all var(--_dur-2) linear;
        display: inline-block;
        width: var(--_rem-subtitle);
        height: var(--_rem-subtitle);
        line-height: var(--_rem-subtitle);
    }
    [rep=tools]>*:hover {
        cursor: pointer;
    }
    [rep=tools] [rep=restore]:before {
        content: "corner-up-left";
    }
    [rep=tools] [rep=reset]:before {
        content: "refresh";
    }
    [rep=tools] [rep=close]:before {
        content: "close";
    }
    [rep=tools] [rep=now]:before {
        content: "clock";
    }
    [panels=hms]>li:hover [rep=tools] {
        display: flex;
    }
    [rep=main] {
        border-start-start-radius: inherit;
        border-start-end-radius: inherit;
        min-width: var(--_date-panel-w);
        flex: auto;
        position: relative;
        [rep=body] {
            min-height: 28rem;
            overflow: hidden;
            box-sizing: border-box;
            padding: 0 var(--_rem-space) var(--_rem-space) var(--_rem-space);
            position: relative;
            [rep=pages] {
                width: calc(100% - 1.6rem);
                text-align: center;
                position: absolute;
                inset-inline-start: .8rem;
                inset-block-end: 0;
                >* {
                    height: 4.8rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                }
                [rep=prev],
                [rep=next] {
                    cursor: pointer;
                    transition: all var(--_dur-2) linear;
                }
                [rep=prev]:hover,
                [rep=next]:hover {
                    color: var(--_c-prim);
                }
            }
        }
        [rep=panels] {
            width: 100%;
            border-start-start-radius: inherit;
            border-start-end-radius: inherit;
            text-align: center;
            position: relative;
        }
        [panel] {
            width: var(--_date-panel-w);
            border-start-start-radius: inherit;
            border-start-end-radius: inherit;
            background-color: var(--_c-stage);
            position: relative;
            z-index: 3;
        }
        [rep=column],
        [rep=list] {
            box-sizing: border-box;
            display: grid;
            >* {
                text-align: center;
                position: relative;
            }
        }
        [rep=column]>* {
            font-size: var(--_rem-caption);
            border-block-end: 1px solid var(--_c-text-bd);
            padding-block-end: var(--_rem-space);
            margin-block-end: var(--_rem-space);
        }
    }
    &[full] {
        display: block;
        width: 100%;
        [rep=panels] {
            display: grid;
            width: 100%;
        }
        [panel] {
            width: 100%;
        }
    }
    &:not([type=daytime]) [rep=main] [panels=hms] {
        position: absolute;
        inset-inline-start: 0;
        inset-block-end: calc(var(--_rem-input) + 1.9rem);
        z-index: 3;
        display: none;
    }
    &[type=daytime] [panels=hms] [rep=close] {
        display: none;
    }
    [rep=outer] {
        >[panel=year],
        >[panel=month] {
            display: none;
            position: absolute;
        }
    }
    &:not([type=daytime]):has([layout=plain]) [rep=main] [panels=hms] {
        inset-block-end: calc(var(--_rem-input) + 0.1rem);
    }
    [rep=list] {
        [rep=content] {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: var(--_date-label-h);
            line-height: var(--_rem-subtitle);
            border-radius: var(--_date-label-h);
            position: relative;
        }
        :not([disabled])>[rep=content] {
            cursor: pointer;
        }
        [exceed],
        [disabled] {
            opacity: .3;
        }
        [disabled] {
            cursor: not-allowed;
        }
        [busy]>[rep=content]:after {
            content: '';
            width: 0.4rem;
            height: 0.4rem;
            border-radius: 100%;
            background-color: var(--_c-prim);
            display: inline-block;
            position: absolute;
            inset-inline-start: 50%;
            inset-block-end: 2px;
            margin-inline-start: -.2rem;
        }
        [busy][selected]>[rep=content]:after {
            background-color: var(--_c-stage);
        }
        >:not([selected])>[rep=content] s[rep=rest] {
            color: var(--_c-succ);
        }
        >:not([selected])>[rep=content] s[rep=work] {
            color: var(--_c-issue);
        }
        :not([selected])>[rep=content] u[rep=term] {
            color: var(--_c-prim);
        }
        :not([selected])>[rep=content]:hover {
            background-color: var(--_c-text-bg);
        }
        :not([selected])[rep=now] [rep=label] {
            color: var(--_c-prim);
        }
        [selected] [rep=content] {
            color: var(--_c-white);
            background-color: var(--_c-prim);
        }
    }
    [panel=date] [rep=content] {
        width: var(--_date-label-h);
        margin: 0.2rem;
    }
    [panel=lunar] [rep=content] {
        width: calc(var(--_rem-caption)*4);
        height: calc(var(--_rem-caption)*4);
        border-radius: var(--_r);
        margin: 0.2rem 0;
    }
    [panel=lunar] [rep=content] u {
        font-size: var(--_rem-caption);
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    [rep=content] s {
        font-size: var(--_rem-caption);
        line-height: var(--_rem-caption);
        position: absolute;
        inset-inline-end: 1px;
        inset-block-start: 1px;
    }
    [panel=year] [rep=content] {
        width: 8.86667rem;
        margin: calc((4.8rem - var(--_date-label-h))/2) 0;
    }
    [panel=month] [rep=content] {
        width: 8.86667rem;
        margin: calc((6.8rem - var(--_date-label-h))/2) 0;
    }
    &[lunar] [rep=main] [rep=body] {
        min-height: 36.4rem;
    }
    &[lunar] [panel=year] [rep=content],
    &[lunar] [panel=month] [rep=content] {
        width: 11.2rem;
    }
    &[lunar] [panel=year] [rep=content] {
        margin: 1.4rem 0;
    }
    &[lunar] [panel=month] [rep=content] {
        margin: 2.7rem 0;
    }
    [panel=daytime] {
        [rep=content] {
            height: var(--_rem-display);
            aspect-ratio: 1/1;
            line-height: var(--_rem-display);
            margin: 0;
        }
        [rep=list] {
            margin: .2rem 0;
        }
        [rep=list]>* {
            height: calc(var(--_rem-display)*7 + var(--_rem-body));
            overflow-y: auto;
            overflow-x: hidden;
            overscroll-behavior: contain;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
        [rep=list]>*>* {
            display: flex;
        }
        [rep=list]>*>:nth-child(odd) {
            justify-content: flex-end;
            padding-inline-start: .4rem;
        }
        [rep=list]>*>:nth-child(even) {
            justify-content: flex-start;
        }
        [rep=list]>*::-webkit-scrollbar {
            width: 4px;
        }
        [rep=list]>*::-webkit-scrollbar-track {
            display: none;
        }
        [rep=list]>*::-webkit-scrollbar-thumb {
            display: none;
        }
        [rep=list]>*:hover::-webkit-scrollbar-track {
            display: block;
        }
        [rep=list]>*:hover::-webkit-scrollbar-thumb {
            display: block;
        }
    }
    &[lunar] [panel=daytime] [rep=list]>* {
        height: calc(var(--_rem-display)*11);
    }
    [rep=list] [start] [rep=content] {
        width: 100%;
        margin-inline-start: 0;
        margin-inline-end: 0;
    }
    [rep=list] [start]:where(:not([selected][end])) [rep=content] {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
    }
    [rep=list] [end] [rep=content] {
        width: 100%;
        margin-inline-start: 0;
        margin-inline-end: 0;
    }
    [rep=list] [end]:where(:not([selected][start])) [rep=content] {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
    }
    [rep=list] [contain] [rep=content] {
        width: 100%;
        border-radius: 0;
        margin-inline-start: 0;
        margin-inline-end: 0;
        background-color: var(--_c-text-bg);
    }
    ._bubble-footer {
        --_bubble-foot-p: 0;
    }
}
._bind-datetime {
    &[disabled] {
        opacity: 0.5;
    }
}
._datetime-wrap {
    --_date-sd: var(--_c-prim-sd);
    &._opened OC-TEXTAREA [rep=wrap] {
        border-color: var(--_c-prim);
        outline: var(--_w-outline) solid var(--_date-sd);
    }
    &._opened OC-TEXTAREA textarea {
        color: var(--_c-prim);
    }
}
._datetime-br {}
OC-DATETIME {
    --_date-w: var(--_w-input);
    width: var(--_date-w);
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    &[full] {
        --_date-w: 100%;
        display: flex;
    }
    ._datetime-wrap,
    OC-TEXTAREA {
        width: 100%;
    }
}
/*Fields*/
OC-FIELDS {
  --_fields-h: var(--_em-input);
  --_fields-w: var(--_w-input);
  --_fields-p-se: var(--_em-space);
  --_fields-bw: 1px;
  --_fields-bc: var(--_c-text-bd);
  --_fields-r: var(--_r-input);
  --_fields-sd: var(--_c-prim-sd);
  --_fields-c-foc: var(--_c-prim);
  box-sizing: border-box;
  vertical-align: middle;
  position: relative;
  &[full] {
    display: flex;
    width: 100%;
  }
  &[shape=round] {
    --_fields-r: var(--_fields-h);
  }
  &[shape=square] {
    --_fields-r: 0;
  }
  &:where(:not([full])) {
    display: inline-flex;
    width: var(--_fields-w);
  }
  > [rep=wrap] {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    > [rep=label],
    > [rep=unit] {
      color: var(--_c-brief);
      line-height: calc(var(--_fields-h) - 2px);
      background: linear-gradient(
          to right,
          var(--_c-text-bg),
          var(--_c-text-bg)
        ),
        linear-gradient(to right, var(--_c-stage), var(--_c-stage));
      padding: 0 var(--_fields-p-se);
      box-sizing: border-box;
      white-space: nowrap;
      overflow: hidden;
      max-width: 60%;
      text-overflow: ellipsis;
    }
    > [rep=label],
    > [rep=unit] {
      border-block-start: var(--_fields-bw) solid var(--_fields-bc);
      border-block-end: var(--_fields-bw) solid var(--_fields-bc);
    }
    > [rep=label] {
      border-inline-start: var(--_fields-bw) solid var(--_fields-bc);
      border-start-start-radius: var(--_fields-r);
      border-end-start-radius: var(--_fields-r);
    }
    > [rep=unit]:last-child {
      border-inline-end: var(--_fields-bw) solid var(--_fields-bc);
      border-start-end-radius: var(--_fields-r);
      border-end-end-radius: var(--_fields-r);
    }
    > [rep=fields] {
      background-color: var(--_c-stage);
      border: var(--_fields-bw) solid var(--_fields-bc);
      height: var(--_fields-h);
      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      flex: auto;
      position: relative;
      transition: all var(--_dur-2) linear;
      &:focus-within {
        border-color: var(--_fields-c-foc);
      }
      &:where(:only-child:focus-within) {
        outline: var(--_w-outline) solid var(--_fields-sd);
        outline-offset: 0px;
      }
      /* &:where(:not(:only-child):focus-within):before {
                content: '';
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                border: 1px solid var(--_c-prim);
                outline: 1px solid var(--_c-prim);
                border-radius: inherit;
                position: absolute;
                inset-inline-start: 0;
                inset-block-start: 0;
                z-index: 3;
                pointer-events: none;
                @mixin v1-trans-all;
            } */
      &:where(:not(:only-child):focus-within) {
        box-shadow: 0 0 0 1px var(--_fields-c-foc) inset;
      }
      &:where(:first-child) {
        border-start-start-radius: var(--_fields-r);
        border-end-start-radius: var(--_fields-r);
      }
      &:where(:last-child) {
        border-start-end-radius: var(--_fields-r);
        border-end-end-radius: var(--_fields-r);
      }
      > [rep="connector"] {
        color: var(--_c-caption);
        pointer-events: none;
      }
      > OC-INPUT,
      > OC-SELECT,
      > OC-TEXTAREA,
      > OC-FILE,
      > OC-NUMBER,
      > OC-DATETIME {
        flex: auto;
      }
      OC-INPUT {
        --_input-bw: 0;
        --_input-r: 0;
        --_input-sd: transparent;
        --_input-bg: transparent;
      }
      OC-SELECT {
        --_select-r: 0;
        --_select-bw: 0;
        --_select-sd: transparent;
        ._select {
          --_select-bg: transparent;
        }
      }
      OC-TEXTAREA {
        --_tarea-r: 0;
        --_tarea-bw: 0;
        --_tarea-sd: transparent;
        --_tarea-bg: transparent;
      }
      ._datetime-wrap {
        --_date-sd: transparent;
      }
      OC-FILE {
        --_file-r: 0;
        --_file-bw: 0;
        --_file-sd: transparent;
        --_file-bg: transparent;
      }
      OC-NUMBER {
        --_number-r: 0;
        --_number-bw: 0;
        --_number-sd: transparent;
        --_number-bg: transparent;
        input {
          border: none;
          outline: none;
        }
      }
      OC-RADIO,
      OC-CHECKBOX {
        --_chk-g-r: 0;
        margin: auto var(--_rem-body);
      }
      input,
      textarea {
        background-color: transparent;
      }
    }
    > OC-BTN {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
    &:has(> [rep=fields] + OC-BTN) > [rep=fields] {
      border-inline-end: 0;
    }
    > [rep=fields]:focus-within + OC-BTN > [rep=wrap] {
      border-inline-start-color: var(--_fields-c-foc);
    }
    /* >[comp] {
            flex: auto;
            >[rep=wrap] {
                border: none;
                box-shadow: none;
                outline: none;
            }
        } */
  }
  &[dividable] [rep=fields] > [comp]:where(:not(:first-child)) {
    border-inline-start: var(--_fields-bw) solid var(--_fields-bc);
  }
  &[size=sm] {
    --_fields-h: var(--_em-display);
    --_fields-r: var(--_r-input-sm);
  }
  &[size=lg] {
    --_fields-h: var(--_em-max);
    --_fields-r: var(--_r-input-lg);
  }
  &[disabled] {
    opacity: var(--_o-disabled);
  }
}
/*Search*/
OC-SEARCH {
    --_srch-w: var(--_w-input);
    --_srch-bw: 1px;
    --_srch-c-foc: var(--_c-prim);
    vertical-align: middle;
    display: inline-flex;
    &[full] {
        display: flex;
        width: 100%;
    }
    &:where(:not([full])) {
        width: var(--_srch-w);
    }
    >[rep=wrap] {
        flex: auto;
    }
    OC-FIELDS {
        --_fields-w: 100%;
        --_fields-bw: var(--_srch-bw);
        --_fields-c-foc: var(--_srch-c-foc);
       display: flex;
    }
    [rep=fields] {
        >._box-tools {
            --_tools-fs: var(--_rem-caption);
            --_tools-c: var(--_c-caption);
            --_tools-c-hov: var(--_srch-c-foc);
            margin: 0 var(--_rem-min);
        }
    }
    &[notable] {
        OC-FIELDS {
            border-radius: var(--_fields-r);
            box-shadow: 0 0 0 2px var(--_srch-c-foc) inset;
            background-color: var(--_c-stage);
            >[rep=wrap]>[rep=label],
            >[rep=wrap]>[rep=unit] {
                background-color: transparent;
                background: transparent;
                border-color: transparent;
            }
            >[rep=wrap]>OC-BTN{
                --_btn-bw:2px;
                --_btn-bc:var(--_srch-c-foc);
            }
            [rep=fields] {
                border-color: var(--_srch-c-foc);
                background-color: transparent;
                >[comp]:where(:not(:first-child)) {
                    border-inline-start-color: var(--_srch-c-foc);
                }
                >[comp]:where(:not(:first-child)) {
                    border-inline-start-color: var(--_srch-c-foc);
                }
                &:where(:not(:only-child):focus-within) {
                    box-shadow: none;
                }
                &:focus-within+OC-BTN>[rep=wrap] {
                }
            }
        }
    }
}
/*
Last modified: 2025-06-24 16:53:05
*/
/*Button*/
OC-BTN {
  --_btn-bg: var(--_c-stage); 
  --_btn-bg-hov: var(--_btn-bg);
  --_btn-bg-act: var(--_btn-bg);
  --_btn-bg-foc: var(--_btn-bg);
  --_btn-bg-dis: var(--_btn-bg);
  --_btn-c: var(--_c-text); 
  --_btn-c-hov: var(--_c-prim);
  --_btn-c-act: var(--_c-prim-tl); 
  --_btn-c-foc: var(--_c-prim); 
  --_btn-c-dis: var(--_btn-c);
  --_btn-bc: var(--_c-text-bd); 
  --_btn-bc-hov: var(--_c-prim);
  --_btn-bc-foc: var(--_btn-bc-hov);
  --_btn-bc-act: var(--_btn-bc-hov);
  --_btn-bc-dis: var(--_btn-bc);
  --_btn-sd: var(--_c-prim-sd); 
  --_btn-p-se: var(--_em-body); 
  --_btn-fs: var(--_rem-body);
  --_btn-r: var(--_r-input);
  --_btn-bw: 1px;
  --_btn-h: var(--_em-input);
  font-size: var(--_btn-fs);
  position: relative;
  display: inline-flex;
  border-radius: var(--_btn-r);
  vertical-align: middle;
  >[rep=wrap] {
    color: var(--_btn-c);
    background-color: var(--_btn-bg);
    border: var(--_btn-bw) solid var(--_btn-bc);
    height: var(--_btn-h);
    padding: 0 var(--_btn-p-se);
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all var(--_dur-2) linear;
    position: relative;
    border-radius: inherit;
    width: 100%;
  }
  >a[rep=wrap] {
    color: var(--_btn-c);
  }
  &:where(:not([disabled]))>[rep=wrap]:visited {
    color: var(--_btn-c);
  }
  &:where(:not([disabled]))>[rep=wrap]:hover {
    color: var(--_btn-c-hov);
    background-color: var(--_btn-bg-hov);
    border-color: var(--_btn-bc-hov);
    box-shadow: .2rem .2rem 1.0rem 0 var(--_btn-sd);
  }
  &:where(:not([disabled]))>[rep=wrap]:focus {
    color: var(--_btn-c-foc);
    background-color: var(--_btn-bg-foc);
    border-color: var(--_btn-bc-foc);
    outline-color: var(--_btn-sd);
  }
  &:where(:not([disabled]))>[rep=wrap]:active {
    color: var(--_btn-c-act);
    background-color: var(--_btn-bg-act);
    border-color: var(--_btn-bc-act);
    opacity: 1;
  }
  &:where([disabled])>[rep=wrap] {
    color: var(--_btn-c-dis);
    background-color: var(--_btn-bg-dis);
    border-color: var(--_btn-bc-dis);
    cursor: not-allowed;
    user-select: none;
    pointer-events: none;
  }
  &[type=plain] {
    --_btn-bw: 0;
    --_btn-bc: transparent;
    --_btn-bc-hov: transparent;
    --_btn-bg: transparent;
    &:where(:not([theme])){
      --_btn-c-hov: var(--_c-prim);
    }
    &:where([theme=brief],[theme=caption]){
      --_btn-c-hov:var(--_c-text);
    }
    &:where([theme=prim],[theme=succ],[theme=error],[theme=warn],[theme=info],[theme=issue],[theme=text]){
      --_btn-c-hov: var(--_btn-c);
    }
    &[theme=prim] {
      --_btn-c: var(--_c-prim);
      --_btn-c-act: var(--_c-prim-tl);
    }
    &[theme=succ] {
      --_btn-c: var(--_c-succ);
      --_btn-c-act: var(--_c-succ-tl);
    }
    &[theme=error] {
      --_btn-c: var(--_c-error);
      --_btn-c-act: var(--_c-error-tl);
    }
    &[theme=warn] {
      --_btn-c: var(--_c-warn);
      --_btn-c-act: var(--_c-warn-tl);
    }
    &[theme=info] {
      --_btn-c: var(--_c-info);
      --_btn-c-act: var(--_c-info-tl);
    }
    &[theme=issue] {
      --_btn-c: var(--_c-issue);
      --_btn-c-act: var(--_c-issue-tl);
    }
    &[theme=text] {
      --_btn-c: var(--_c-text);
      --_btn-c-act: var(--_c-text-tl);
    }
    &[theme=brief] {
      --_btn-c: var(--_c-brief);
      --_btn-c-act: var(--_c-brief-tl);
    }
    &[theme=caption] {
      --_btn-c: var(--_c-caption);
      --_btn-c-act: var(--_c-caption-tl);
    }
    >[rep=wrap]:hover {
      box-shadow: none;
    }
    >[rep=wrap]:focus {
      outline-color: transparent;
    }
    >[rep=wrap]:active {
      opacity: var(--_o-active);
    }
    &:where([disabled]) {
      opacity: var(--_o-disabled);
    }
  }
  &[type=seal] {
    --_btn-c: var(--_c-text);
    --_btn-c-foc: var(--_btn-c);
    --_btn-c-hov: var(--_btn-c);
    --_btn-c-act: var(--_btn-c);
    --_btn-c-dis: var(--_btn-c);
    --_btn-bg: transparent;
    --_btn-bg-hov: var(--_c-text-bg);
    --_btn-bg-foc: var(--_btn-bg-hov);
    --_btn-bg-act: var(--_btn-bg-hov);
    --_btn-bg-dis: var(--_btn-bg-hov);
    --_btn-bc: var(--_btn-c);
    --_btn-bc-hov: var(--_btn-c);
    --_btn-bc-foc: var(--_btn-c);
    --_btn-bc-act: var(--_btn-c);
    --_btn-bc-dis: var(--_btn-c);
    --_btn-sd: var(--_c-text-sd);
    &[theme=prim] {
      --_btn-sd: var(--_c-prim-sd);
      --_btn-bg-hov: var(--_c-prim-bg);
      --_btn-c: var(--_c-prim);
    }
    &[theme=succ] {
      --_btn-sd: var(--_c-succ-sd);
      --_btn-bg-hov: var(--_c-succ-bg);
      --_btn-c: var(--_c-succ);
    }
    &[theme=error] {
      --_btn-sd: var(--_c-error-sd);
      --_btn-bg-hov: var(--_c-error-bg);
      --_btn-c: var(--_c-error);
    }
    &[theme=warn] {
      --_btn-sd: var(--_c-warn-sd);
      --_btn-bg-hov: var(--_c-warn-bg);
      --_btn-c: var(--_c-warn);
    }
    &[theme=info] {
      --_btn-sd: var(--_c-info-sd);
      --_btn-bg-hov: var(--_c-info-bg);
      --_btn-c: var(--_c-info);
    }
    &[theme=issue] {
      --_btn-sd: var(--_c-issue-sd);
      --_btn-bg-hov: var(--_c-issue-bg);
      --_btn-c: var(--_c-issue);
    }
    &[theme=text] {
      --_btn-sd: var(--_c-text-sd);
      --_btn-bg-hov: var(--_c-text-bg);
      --_btn-c: var(--_c-text);
    }
    &[theme=brief] {
      --_btn-sd: var(--_c-brief-sd);
      --_btn-bg-hov: var(--_c-brief-bg);
      --_btn-c: var(--_c-brief);
    }
    &[theme=caption] {
      --_btn-sd: var(--_c-caption-sd);
      --_btn-bg-hov: var(--_c-caption-bg);
      --_btn-c: var(--_c-caption);
    }
    >[rep=wrap]:focus {
      outline-color: transparent;
    }
    >[rep=wrap]:active {
      opacity: var(--_o-active);
    }
    &:where([disabled])>[rep=wrap] {
      opacity: var(--_o-disabled);
    }
  }
  &:where(:not([type=seal], [type=plain])) {
    /* --_btn-bg: var(--_c-prim);
    --_btn-sd: var(--_c-prim-sd);
    --_c-tl: var(--_c-prim-tl);
    --_c-dp: var(--_c-prim-dp);
 */
    /*  --_btn-c: var(--_c-text);
    --_btn-c-foc: var(--_btn-c);
    --_btn-c-hov: var(--_btn-c);
    --_btn-c-act: var(--_btn-c);
    --_btn-c-dis: var(--_btn-c);
    --_btn-bg: var(--_c-prim);
    --_btn-bg-hov: var(--_c-prim-tl);
    --_btn-bg-foc: var(--_btn-bg-hov);
    --_btn-bg-act: var(--_c-prim-dp);
    --_btn-bg-dis: var(--_btn-bg);
    --_btn-bc:var(--_c-text-bd);
    --_btn-bc-hov: var(--_c-prim);
    --_btn-bc-foc: var(--_c-prim);
    --_btn-bc-act:var(--_c-prim);
    --_btn-bc-dis: var(--_c-text-bd);
    --_btn-sd: var(--_c-prim-sd); */
    &:where([disabled])>[rep=wrap] {
      opacity: var(--_o-disabled);
    }
  }
  &[theme=prim]:where(:not([type=seal], [type=plain])) {
    --_btn-bg: var(--_c-prim);
    --_btn-bg-hov: var(--_c-prim-lt);
    --_btn-bg-act: var(--_c-prim-dp);
    --_btn-sd: var(--_c-prim-sd);
  }
  &[theme=error]:where(:not([type=seal], [type=plain])) {
    --_btn-bg: var(--_c-error);
    --_btn-bg-hov: var(--_c-error-lt);
    --_btn-bg-act: var(--_c-error-dp);
    --_btn-sd: var(--_c-error-sd);
  }
  &[theme=succ]:where(:not([type=seal], [type=plain])) {
    --_btn-bg: var(--_c-succ);
    --_btn-bg-hov: var(--_c-succ-lt);
    --_btn-bg-act: var(--_c-succ-dp);
    --_btn-sd: var(--_c-succ-sd);
  }
  &[theme=info]:where(:not([type=seal], [type=plain])) {
    --_btn-bg: var(--_c-info);
    --_btn-bg-hov: var(--_c-info-lt);
    --_btn-bg-act: var(--_c-info-dp);
    --_btn-sd: var(--_c-info-sd);
  }
  &[theme=issue]:where(:not([type=seal], [type=plain])) {
    --_btn-bg: var(--_c-issue);
    --_btn-bg-hov: var(--_c-issue-lt);
    --_btn-bg-act: var(--_c-issue-dp);
    --_btn-sd: var(--_c-issue-sd);
  }
  &[theme=warn]:where(:not([type=seal], [type=plain])) {
    --_btn-bg: var(--_c-warn);
    --_btn-bg-hov: var(--_c-warn-lt);
    --_btn-bg-act: var(--_c-warn-dp);
    --_btn-sd: var(--_c-warn-sd);
  }
  &[theme=text]:where(:not([type=seal], [type=plain])) {
    --_btn-bg: hsl(var(--_h-text), var(--_s-text), 20%);
    --_btn-bg-hov: var(--_c-text-lt);
    --_btn-bg-act: var(--_c-text-dp);
    --_btn-sd: var(--_c-brief-sd);
  }
  &[theme=brief]:where(:not([type=seal], [type=plain])) {
    --_btn-bg: var(--_c-brief-bg);
    --_btn-sd: var(--_c-brief-sd);
  }
  &[theme=caption]:where(:not([type=seal], [type=plain])) {
    --_btn-bg: var(--_c-caption-bg);
    --_btn-sd: var(--_c-caption-sd);
  }
  &:is([theme]):where(:not([type=seal], [type=plain])) {
    --_btn-c: var(--_c-white);
    --_btn-c-hov: var(--_btn-c);
    --_btn-c-foc: var(--_btn-c);
    --_btn-c-act: var(--_c-white-60);
    --_btn-bg-foc: var(--_btn-bg);
    --_btn-bg-dis: var(--_btn-bg);
    --_btn-bw: 0;
    >[rep=wrap]:active {
      opacity: 1;
    }
  }
  &[theme=warn]:where(:not([type=seal], [type=plain])) {
    --_btn-c: var(--_c-text-sta);
    --_btn-c-act: var(--_c-text-aj);
  }
  &[theme=brief]:where(:not([type=seal], [type=plain])),
  &[theme=caption]:where(:not([type=seal], [type=plain])) {
    --_btn-c-hov: var(--_btn-c);
    --_btn-c-act: var(--_btn-c);
    --_btn-c-foc: var(--_btn-c);
    --_btn-bg-hov: var(--_btn-bg);
    --_btn-bg-act: var(--_btn-bg);
    --_btn-bg-foc: var(--_btn-bg);
   /*  >[rep=wrap]:focus {
      outline-width: 1px;
    } */
    >[rep=wrap]:active {
      opacity: var(--_o-active);
    }
    &:where([disabled])>[rep=wrap] {
      opacity: 1;
    }
  }
  &[theme=brief]:where(:not([type=seal], [type=plain])) {
    --_btn-c: var(--_c-brief);
  }
  &[theme=caption]:where(:not([type=seal], [type=plain])) {
    --_btn-c: var(--_c-caption);
  }
  &[shape=square] {
    border-radius: 0;
  }
  &[shape=round] {
    --_btn-p-se: 1.5em;
    border-radius: var(--_rem-input);
  }
  &[size=xs] {
    --_btn-fs: var(--_rem-caption);
    --_btn-p-se: var(--_em-min-dec);
    --_btn-h: var(--_em-list-dec);
    --_btn-r: var(--_r-input-sm);
  }
  &[size=sm] {
    --_btn-fs: var(--_rem-caption);
    --_btn-h: var(--_em-display-dec);
    --_btn-r: var(--_r-input-sm);
  }
  &[size=lg] {
    --_btn-h: var(--_em-max);
    --_btn-p-se: 2em;
    --_btn-r: var(--_r-input-lg);
  }
  &[width="1"] {
    width: var(--_em-input);
    >[rep=wrap] {
      padding: 0;
    }
  }
  &[width="2"] {
    width: calc(var(--_em-input)*2);
    >[rep=wrap] {
      padding: 0;
    }
  }
  &[width="3"] {
    width: calc(var(--_em-input)*3);
  }
  &[width="4"] {
    width: calc(var(--_em-input)*4);
  }
  &[width="5"] {
    width: calc(var(--_em-input)*5);
  }
  &[width="6"] {
    width: calc(var(--_em-input)*6);
  }
  &[width="7"] {
    width: calc(var(--_em-input)*7);
  }
  &[width="8"] {
    width: calc(var(--_em-input)*8);
  }
  &[width="9"] {
    width: calc(var(--_em-input)*9);
  }
  &[width="10"] {
    width: calc(var(--_em-input)*10);
  }
  &[width=neat] {
    width: var(--_w-input)
  }
  &[width=half],
  &[width="1of2"] {
    width: 50%;
  }
  &[width="1of3"] {
    width: 33.33333%;
  }
  &[width="2of3"] {
    width: 66.66667%;
  }
  &[width="1of4"] {
    width: 25%;
  }
  &[width="3of4"] {
    width: 75%;
  }
  &[width=full] {
    width: 100%;
  }
  &[width=iso] {
    --_btn-p-se: 0;
    >[rep=wrap] {
      aspect-ratio: 1/1;
    }
  }
  &[theme=prim]:where([gradient]:not([type=seal], [type=plain]))>[rep=wrap] {
    background: linear-gradient(45deg, var(--_c-prim), var(--_c-prim-aj));
  }
  &[theme=error]:where([gradient]:not([type=seal], [type=plain]))>[rep=wrap] {
    background: linear-gradient(45deg, var(--_c-error), var(--_c-error-aj));
  }
  &[theme=succ]:where([gradient]:not([type=seal], [type=plain]))>[rep=wrap] {
    background: linear-gradient(45deg, var(--_c-succ), var(--_c-succ-aj));
  }
  &[theme=info]:where([gradient]:not([type=seal], [type=plain]))>[rep=wrap] {
    background: linear-gradient(45deg, var(--_c-info), var(--_c-info-aj));
  }
  &[theme=warn]:where([gradient]:not([type=seal], [type=plain]))>[rep=wrap] {
    background: linear-gradient(45deg, var(--_c-warn), var(--_c-warn-aj));
  }
  &[theme=issue]:where([gradient]:not([type=seal], [type=plain]))>[rep=wrap] {
    background: linear-gradient(45deg, var(--_c-issue), var(--_c-issue-aj));
  }
  &[theme=text]:where([gradient]:not([type=seal], [type=plain]))>[rep=wrap] {
    background: linear-gradient(45deg, var(--_c-text-sta), var(--_c-text-aj));
  }
  &[shaded]:where(:not([type=seal], [type=plain])) {
    --_btn-sd: var(--_c-black-12);
    >[rep=wrap] {
      outline-color: transparent;
      box-shadow: 1px 1px 0.5rem var(--_btn-sd);
    }
  }
  &[shaded]:where([theme=prim]> [rep=wrap],
    [theme=error] >[rep=wrap],
    [theme=succ] >[rep=wrap],
    [theme=info] >[rep=wrap],
    [theme=issue] >[rep=wrap],
    [theme=warn] >[rep=wrap],
    [theme=text])>[rep=wrap] {
    box-shadow: 0.5rem 0.5rem 2rem var(--_btn-sd);
  }
  &[shaded] {
    &:where([theme=prim]) {
      --_btn-sd: hsla(var(--_h-prim), var(--_s-prim), var(--_l-prim), 0.4);
    }
    &:where([theme=error]) {
      --_btn-sd: hsla(var(--_h-error), var(--_s-error), var(--_l-error), 0.4);
    }
    &:where([theme=succ]) {
      --_btn-sd: hsla(var(--_h-succ), var(--_s-succ), var(--_l-succ), 0.4);
    }
    &:where([theme=info]) {
      --_btn-sd: hsla(var(--_h-info), var(--_s-info), var(--_l-info), 0.4);
    }
    &:where([theme=issue]) {
      --_btn-sd: hsla(var(--_h-issue), var(--_s-issue), var(--_l-issue), 0.4);
    }
    &:where([theme=warn]) {
      --_btn-sd: hsla(var(--_h-warn), var(--_s-warn), var(--_l-warn), 0.4);
    }
    &:where([theme=text]) {
      --_btn-sd: hsla(var(--_h-text), var(--_s-text), 20%, 0.4);
    }
  }
  [rep=icon] {
    margin-inline-end: var(--_g);
  }
  [rep=tail] {
    margin-inline-start: var(--_g);
  }
  [rep=disk],
  [rep=cube],
  [rep=image] {
    height: var(--_rem-list);
    margin-inline-end: var(--_g);
  }
  OC-BADGE {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
    transform: translate(calc(50%*var(--_dir-coef)), -50%);
  }
  &:has([rep=label]:empty) [rep=icon] {
    margin-inline-end: 0;
  }
  &:has([rep=label]:empty) [rep=tail] {
    margin-inline-start: 0;
  }
  [rep=expand],
  [rep=more],
  [rep=remove],
  [rep=update] {
    font-family: var(--_ff-icon);
    margin-inline-end: calc(var(--_btn-p-se)*-1 + 0.286em);
    margin-inline-start: var(--_btn-p-se);
    &:hover:before {
      opacity: 1;
    }
  }
  [rep=expand]:before,
  [rep=more]:before,
  [rep=remove]:before,
  [rep=update]:before {
    display: inline-block;
    opacity: var(--_o-disabled);
    scale: 0.8;
    transition: all var(--_dur-2) linear;
  }
  [rep=expand]:before {
    content: 'down';
  }
  &:where(._opened) [rep=expand]:before {
    rotate: 180deg;
  }
  [rep=more]:before {
    content: 'right';
  }
  /*   &:where([active]) [rep=more]:before {
    transform: rotate(-90deg);
  } */
  [rep=remove]:before {
    content: 'close';
  }
  [rep=remove]:hover {
    color: var(--_c-error);
  }
  [rep=update]:before {
    content: 'refresh';
  }
  &:where([check=ing]) {
    cursor: not-allowed;
    user-select: none;
    pointer-events: none;
    >[rep=wrap]:before {
      --_spin-bg: var(--_c-prim-sd);
      --_spin-c: var(--_c-prim);
      content: '';
      width: 1em;
      margin-inline-end: var(--_g);
      animation: _rotate360 1s linear infinite;
      background: transparent;
      box-sizing: border-box;
      border: .2rem solid var(--_spin-bg,var(--_c-prim));
      border-block-end-color: var(--_spin-c,var(--_c-prim-sd));
      border-radius: 50%;
      aspect-ratio: 1 / 1;
      display: inline-flex;
    }
  }
  &:where([check=ed])>[rep=wrap]:before {
    content: 'check-o-f';
    color: var(--_btn-c);
    font-family: var(--_ff-icon);
    width: em;
    margin-inline-end: var(--_g);
    display: inline-flex;
  }
  &:where([check=ing]):has([rep=label]:empty)>[rep=wrap]:before,
  &:where([check=ed]):has([rep=label]:empty)>[rep=wrap]:before {
    margin-inline-end: 0;
  }
  &:where([type=seal])>[rep=wrap]:before {
    border-color: var(--_btn-sd);
    border-block-end-color: var(--_btn-c);
  }
  &:where([check=ing]:not([type=seal], [type=plain])):where([theme=prim], [theme=succ], [theme=error], [theme=info], [theme=issue])>[rep=wrap]:before {
    --_spin-bg: rgba(255, 255, 255, .2);
    --_spin-c: var(--_c-white);
  }
  &:where([check=ing]:not([type=seal], [type=plain])):where([theme=warn])>[rep=wrap]:before {
    --_spin-c: var(--_c-text-sta);
    --_spin-bg: var(--_c-black-20);
  }
  &:where([check=ed]:not([type=seal], [type=plain], [theme=prim], [theme=succ], [theme=error], [theme=info], [theme=warn], [theme=issue]))>[rep=wrap]:before {
    color: var(--_c-prim);
  }
  &[inverted] {
    --_btn-bg-hov: var(--_btn-bg);
    --_btn-bg-act: var(--_btn-bg);
    --_btn-bg-foc: var(--_btn-bg);
    --_btn-bg-dis: var(--_btn-bg);
    --_btn-c: var(--_c-white);
    --_btn-c-hov: var(--_btn-c);
    --_btn-c-act: var(--_btn-c); 
    --_btn-c-foc: var(--_btn-c); 
    --_btn-c-dis: var(--_btn-c);
    --_btn-bc:var(--_btn-c); 
    --_btn-bc-hov: var(--_btn-bc);
    --_btn-bc-foc: var(--_btn-bc);
    --_btn-bc-act: var(--_btn-bc);
    --_btn-bc-dis: var(--_btn-bc);
    &:where(:not([type=seal],[type=plain])){
      --_btn-bg: var(--_c-white-4);
      --_btn-sd: var(--_c-black-12);
      &[theme=prim]{
        --_btn-c: var(--_c-prim-fc);
      }
      &[theme=succ]{
        --_btn-c: var(--_c-succ-fc);
      }
      &[theme=warn]{
        --_btn-c: var(--_c-warn-fc);
      }
      &[theme=error]{
        --_btn-c: var(--_c-error-fc);
      }
      &[theme=info]{
        --_btn-c: var(--_c-info-fc);
      }
      &[theme=issue]{
        --_btn-c: var(--_c-issue-fc);
      }
      &[theme=text]{
        --_btn-c: var(--_c-white-80);
      }
      &[theme=brief]{
        --_btn-c: var(--_c-white-60);
      }
      &[theme=caption]{
        --_btn-c: var(--_c-white-40);
      }
    }
    &[type=plain]{
      --_btn-bg: transparent;
      --_btn-sd: transparent;
      &[theme]{
        --_btn-c-act: var(--_btn-c);
      }
      &:where([theme=prim]){
        --_btn-c: var(--_c-prim-fc);
      }
      &:where([theme=succ]){
        --_btn-c: var(--_c-succ-fc);
      }
      &:where([theme=warn]){
        --_btn-c: var(--_c-warn-fc);
      }
      &:where([theme=error]){
        --_btn-c: var(--_c-error-fc);
      }
      &:where([theme=info]){
        --_btn-c: var(--_c-info-fc);
      }
      &:where([theme=issue]){
        --_btn-c: var(--_c-issue-fc);
      }
      &[theme=text]{
        --_btn-c: var(--_c-white-80);
      }
      &[theme=brief]{
        --_btn-c: var(--_c-white-60);
      }
      &[theme=caption]{
        --_btn-c: var(--_c-white-40);
      }
    }
    &[type=seal]{
      --_btn-bg: transparent; 
      --_btn-sd: var(--_c-black-12);
    }
    &[type=seal]:where([theme=prim]) {
      --_btn-c: var(--_c-prim-fc);
    }
    &[type=seal]:where([theme=succ]) {
      --_btn-c: var(--_c-prim-fc);
    }
    &[type=seal]:where([theme=warn]) {
      --_btn-c: var(--_c-warn-fc);
    }
    &[type=seal]:where([theme=error]) {
      --_btn-c: var(--_c-error-fc);
    }
    &[type=seal]:where([theme=info]) {
      --_btn-c: var(--_c-info-fc);
    }
    &[type=seal]:where([theme=issue]) {
      --_btn-c: var(--_c-issue-fc);
    }
    &[type=seal]:where([theme=text]) {
      --_btn-c: var(--_c-stage-80);
    }
    &[type=seal]:where([theme=brief]) {
      --_btn-c: var(--_c-stage-60);
    }
    &[type=seal]:where([theme=caption]) {
      --_btn-c: var(--_c-stage-40);
    }
  }
}
[dir=rtl] OC-BTN [rep=more]:before {
  content: 'left';
}
/*Alert*/
OC-CALLOUT {
    --_callout-c: var(--_c-text);
    --_callout-c-icon: var(--_c-warn);
    --_callout-bg: var(--_c-warn-bg);
    --_callout-bc: var(--_c-warn-bd);
    --_callout-bw: 1px;
    --_callout-r: var(--_r-input-sm);
    --_callout-fs: var(--_px-caption);
    --_callout-p-tb: var(--_em-min-dec);
    --_callout-p-se: var(--_em-space-dec);
    --_callout-lh: var(--_em-subtitle-dec);
    display: block;
    font-size: var(--_callout-fs);
    color: var(--_callout-c);
    >[rep=wrap] {
        line-height: var(--_callout-lh);
        border: var(--_callout-bw) solid var(--_callout-bc);
        display: flex;
        align-items: flex-start;
        border-radius: var(--_callout-r);
        padding: var(--_callout-p-tb) var(--_callout-p-se);
        position: relative;
        >[rep=mask] {
            width: 100%;
            height: 100%;
            position: absolute;
            inset-inline-start: 0;
            inset-block-start: 0;
            z-index: 2;
        }
        >[rep=tools] {
            --_tools-h: var(--_callout-lh);
            --_tools-fs: var(--_px-caption);
            position: relative;
            z-index: 3;
            >* {
                color: var(--_callout-c);
                opacity: var(--_o-disabled);
                &:hover {
                    opacity: 1;
                }
            }
        }
        >[rep=body] {
            flex: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            >[rep=title] {
                font-weight: bold;
                margin-block-end: var(--_em-min-dec);
            }
            >[rep=content] {}
        }
        >[rep=icon] {
            color: var(--_callout-c-icon);
        }
        >[rep=icon],
        >[rep=disk],
        >[rep=cube],
        >[rep=image] {
            display: inline-flex;
            font-size: var(--_em-body-dec);
            margin-inline-end: var(--_em-min);
        }
        >[rep=disk],
        >[rep=cube],
        >[rep=image] {
            height: var(--_em-body-dec);
        }
        >[rep=disk],
        >[rep=cube] {
            aspect-ratio: 1/1;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        >[rep=disk] {
            border-radius: 100%;
        }
        >[rep=cube] {
            border-radius: var(--_r);
        }
        >[rep=image] img {
            height: 100%;
        }
        >OC-RESULT {
            --_result-w: 1em;
            font-size: var(--_em-body-dec);
            margin-inline-end: var(--_em-min);
            height: var(--_em-subtitle);
        }
        >OC-PROGRESS{
            width: 100%;
            position: absolute;
            inset-inline-start: 0;
            inset-block-end: 0;
        }
        /*         [rep=close] {
            font-size: var(--_px-caption);
            color: var(--_c-text);
            width: 1.5em;
            aspect-ratio: 1/1;
            line-height: 1.5em;
            text-align: center;
            opacity: var(--_o-disabled);
            margin-inline-end: -0.333em;
            @mixin v1-trans-all;
            &:hover {
                cursor: pointer;
                opacity: 1;
            }
        } */
    }
    &:where(:has(>[rep=wrap]>[rep=tools]:where(:not(:empty))))>[rep=wrap] {
        padding-inline-end: var(--_em-min-dec);
    }
    &[size=md] {
        --_callout-p-tb: calc((9/var(--_num-caption))*1em);
        --_callout-r: var(--_r-input);
    }
    &[size=lg] {
        --_callout-fs: var(--_px-body);
        --_callout-r: var(--_r-input);
        --_callout-p-tb: calc((9/var(--_num-body))*1em);
        --_callout-p-se: var(--_em-body);
        --_callout-lh: var(--_em-subtitle);
        >[rep=wrap]>[rep=disk],
        >[rep=wrap]>[rep=cube],
        >[rep=wrap]>[rep=image] {
            height: var(--_em-subtitle);
        }
    }
    &[notable] {
        --_callout-p-tb: var(--_em-body-dec);
        --_callout-p-se: var(--_em-body-dec);
        --_callout-r: var(--_r-input);
        >[rep=wrap] {
            padding-inline-end: var(--_callout-p-se);
        }
        >[rep=wrap]>[rep=icon],
        >[rep=wrap]>[rep=disk],
        >[rep=wrap]>[rep=cube],
        >[rep=wrap]>[rep=image] {
            font-size: var(--_em-display-dec);
            height: 1em;
            line-height: 1em;
            margin-inline-end: 0.5em;
        }
        >[rep=wrap]>[rep=body] {
            min-height: var(--_em-display-dec);
        }
        >[rep=wrap]>[rep=body]>[rep=title] {
            font-size: var(--_em-body-dec);
        }
        >[rep=wrap]>[rep=tools] {
            position: absolute;
            inset-inline-end: var(--_em-min-dec);
            inset-block-start: var(--_em-min-dec);
            ;
        }
        >[rep=wrap]>OC-RESULT {
            font-size: var(--_em-display-dec);
            margin-inline-end: 0.5em;
            height: 1em;
        }
    }
    &[borderless] {
        --_callout-bw: 0;
        --_callout-p-tb: calc((5/var(--_num-caption))*1em);
        &[size=md] {
            --_callout-p-tb: var(--_em-root-dec);
        }
        &[size=lg] {
            --_callout-p-tb: var(--_em-root);
        }
    }
    &[square] {
        --_callout-r: 0;
    }
    &:where(:not([opaque])) > [rep=wrap] {
        background-color: var(--_callout-bg);
    }
    &:where([opaque]) > [rep=wrap] {
        background: linear-gradient(to right, var(--_callout-bg), var(--_callout-bg)), linear-gradient(to right, var(--_c-stage), var(--_c-stage));
    }
    &:where([theme=prim]) {
        --_callout-c: var(--_c-prim-dp);
        --_callout-c-icon: var(--_c-prim);
        --_callout-bg: var(--_c-prim-bg);
        --_callout-bc: var(--_c-prim-bd);
        &:where([feature=plain]) {
            --_callout-c: var(--_c-prim);
        }
    }
    &:where([theme=succ]) {
        --_callout-c: var(--_c-succ-dp);
        --_callout-c-icon: var(--_c-succ);
        --_callout-bg: var(--_c-succ-bg);
        --_callout-bc: var(--_c-succ-bd);
        &:where([feature=plain]) {
            --_callout-c: var(--_c-succ);
        }
    }
    &:where([theme=error]) {
        --_callout-c: var(--_c-error-dp);
        --_callout-c-icon: var(--_c-error);
        --_callout-bg: var(--_c-error-bg);
        --_callout-bc: var(--_c-error-bd);
        &:where([feature=plain]) {
            --_callout-c: var(--_c-error);
        }
    }
    &:where([theme=warn]) {
        --_callout-c: var(--_c-text);
        --_callout-c-icon: var(--_c-warn);
        --_callout-bg: var(--_c-warn-bg);
        --_callout-bc: var(--_c-warn-bd);
        &:where([feature=plain]) {
            --_callout-c: var(--_c-warn);
        }
    }
    &:where([theme=issue]) {
        --_callout-c: var(--_c-issue-dp);
        --_callout-c-icon: var(--_c-issue);
        --_callout-bg: var(--_c-issue-bg);
        --_callout-bc: var(--_c-issue-bd);
        &:where([feature=plain]) {
            --_callout-c: var(--_c-issue);
        }
    }
    &:where([theme=info]) {
        --_callout-c: var(--_c-info-dp);
        --_callout-c-icon: var(--_c-info);
        --_callout-bg: var(--_c-info-bg);
        --_callout-bc: var(--_c-info-bd);
        &:where([feature=plain]) {
            --_callout-c: var(--_c-info);
        }
    }
    &:where([theme=text]) {
        --_callout-c: var(--_c-text-dp);
        --_callout-c-icon: var(--_c-text);
        --_callout-bg: var(--_c-text-bg);
        --_callout-bc: var(--_c-text-bd);
        &:where([feature=plain]) {
            --_callout-c: var(--_c-text);
        }
    }
    &:where([feature=plain]) {
        --_callout-bw: 0;
        --_callout-bg: transparent;
        --_callout-p-se: 0;
    }
    /* &[hidden] {
        display: none;
    } */
}
/*statstics*/
OC-STATS {
    --_stats-fs: var(--_rem-display);
    --_stats-lh: var(--_rem-input);
    --_stats-h-legend: calc(var(--_rem-input) + var(--_rem-subtitle));
    display: inline-flex;
    vertical-align: middle;
    [rep=wrap] {
        display: inline-flex;
    }
    [rep=main] {
        flex: auto;
        display: inline-flex;
        flex-direction: column;
    }
    [rep=head] {}
    [rep=label] {
        font-size: var(--_stats-fs);
        position: relative;
        line-height: var(--_stats-lh);
        font-family: var(--_ff-alt);
        OC-BADGE {
            position: absolute;
            inset-block-start: 0;
            inset-inline-end: 0;
            transform: translate(calc(100%*var(--_dir-coef)), 0);
        }
    }
    [rep=unit] {
        color: var(--_c-brief);
        font-size: var(--_rem-caption);
        line-height: var(--_rem-caption);
        margin-inline-start: var(--_rem-space);
    }
    [rep=tips] {
        color: var(--_c-brief);
    }
    [rep=icon],
    [rep=disk],
    [rep=cube],
    [rep=image] {
        height: var(--_stats-h-legend);
        margin-inline-end: var(--_rem-body);
    }
    [rep=icon] {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
        font-size: var(--_rem-list);
        border-radius: 100%;
        background-color: var(--_c-text-bg);
    }
    &:where([dir=v]) {
        &:where(:not(:has([rep=unit]))) {
            text-align: center;
        }
        &:where(:has([rep=icon])),
        &:where(:has([rep=icon])),
        &:where(:has([rep=icon])) {
            text-align: start;
        }
        [rep=head] {
            flex: auto;
        }
        [rep=tips] {
            line-height: var(--_rem-subtitle);
        }
        &[flipped] [rep=main] {
            flex-direction: column-reverse;
        }
        &:not(:has([rep=tips])) {
            --_stats-fs: var(--_rem-input);
            --_stats-h-legend: var(--_rem-input);
        }
    }
    &:where([dir=h]) {
        --_stats-fs: var(--_rem-input);
        --_stats-lh: var(--_rem-input);
        --_stats-h-legend: var(--_rem-input);
        [rep=main] {
            flex-direction: row;
            align-items: center;
        }
        [rep=tips] {
            flex: auto;
            text-align: start;
            line-height: var(--_rem-subtitle);
            margin-inline-start: var(--_rem-body);
        }
        [rep=label] OC-BADGE {
            transform: translate(calc(100%*var(--_dir-coef)), -50%);
        }
    }
}
/*Pagination*/
OC-PAGINATION {
  --_pgn-m-tb: var(--_rem-body);
  display: block;
  vertical-align: middle;
}
:not(OC-SELECT) ._pagination {
  --_pgn-m-tb: var(--_rem-body);
}
._pagination {
  --_pgn-c: var(--_c-text);
  --_pgn-c-hov: var(--_pgn-c);
  --_pgn-c-sel: var(--_c-white);
  --_pgn-h: var(--_rem-display);
  --_pgn-fs: var(--_rem-caption);
  --_pgn-p-child: 0.9rem;
  --_pgn-m-child: 0.2rem;
  --_pgn-bc: var(--_c-text-bd);
  --_pgn-bc-sel: var(--_c-prim);
  --_pgn-bc-hov: var(--_c-prim);
  --_pgn-bw: 1px;
  --_pgn-r: var(--_r);
  --_pgn-bg: var(--_c-stage);
  --_pgn-bg-hov: var(--_c-prim-bg);
  --_pgn-bg-sel: var(--_c-prim);
  --_pgn-a: center;
  color: var(--_pgn-c);
  font-size: var(--_pgn-fs);
  line-height: var(--_pgn-h);
  margin: var(--_pgn-m-tb) auto;
  display: flex;
  align-items: center;
  justify-content: var(--_pgn-a);
  flex-wrap: wrap;
  [rep=pages],
  [rep=main],
  [rep=other] {
    display: inline-flex;
    align-items: center;
  }
  [rep=pages]:empty,
  [rep=main]:empty {
    display: none;
  }
  &[align=start] {
    --_pgn-a: flex-start;
    [rep=other] {
      flex: auto;
      text-align: end;
    }
  }
  &[align=end] {
    --_pgn-a: flex-end;
    [rep=other] {
      flex: auto;
      text-align: start;
    }
  }
  &[align=start]>*:first-child,
  &[align=start]>[rep=pages]:first-child>*:first-child,
  &[align=start] [rep=main]:first-child>*:first-child,
  &[align=start] [rep=main]:first-child>[rep=pages]:first-child>*:first-child {
    margin-inline-start: 0;
  }
  &[align=end]>*:last-child,
  &[align=end]>[rep=pages]:last-child>*:last-child,
  &[align=end] [rep=main]:last-child>*:last-child,
  &[align=end] [rep=main]:last-child>[rep=pages]:last-child>*:last-child {
    margin-inline-end: 0;
  }
  &[flexible] [rep=main] {
    flex: auto;
    &:first-child {
      justify-content: flex-start;
    }
    &:last-child {
      justify-content: flex-end;
    }
  }
  [class*=icon] {
    font-size: 1.0rem;
  }
  /* 
  [rep=first] *:not([class*=icon]),
  [rep=prev] *:not([class*=icon]) {
    margin-inline-end: var(--_pgn-m-child);
    margin-inline-start: calc(-1*var(--_pgn-m-child));
  }
  [rep=last] *:not([class*=icon]),
  [rep=next] *:not([class*=icon]) {
    margin-inline-start: var(--_pgn-m-child);
    margin-inline-end: calc(-1*var(--_pgn-m-child));
  } */
  >a,
  [rep=main]>a,
  [rep=pages]>a,
  >span:where([selected]),
  [rep=main]>span:where([selected]),
  [rep=pages]>span:where([selected]),
  &[type=group] [rep=main]>span:where(:not([rep=pages])),
  &[type=group] [rep=pages]>span {
    color: var(--_pgn-c);
    height: var(--_pgn-h);
    min-width: var(--_pgn-h);
    border: var(--_pgn-bw) solid var(--_pgn-bc);
    border-radius: var(--_pgn-r);
    background-image: none;
    padding: 0 var(--_pgn-p-child);
    margin: 0 var(--_pgn-m-child);
    box-sizing: border-box;
    background-color: var(--_pgn-bg);
    transition: all var(--_dur-1) linear;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  >span:where(:not([rep=pages])),
  [rep=main]>span:where(:not([rep=pages])),
  [rep=pages]>span {
    margin: 0 var(--_pgn-m-child);
  }
  >a[selected],
  [rep=main]>a[selected],
  [rep=pages]>a[selected],
  >span[selected],
  [rep=main]>span[selected],
  [rep=pages]>span[selected] {
    color: var(--_pgn-c-sel);
    border-color: var(--_pgn-bc-sel);
    background-color: var(--_pgn-bg-sel);
  }
  [disabled] {
    opacity: var(--_o-disabled);
  }
  >a:where(:not([rep=total], [selected])):hover,
  [rep=main]>a:where(:not([rep=total], [selected])):hover,
  [rep=pages]>a:where(:not([rep=total], [selected])):hover {
    color: var(--_pgn-c-hov);
    border-color: var(--_pgn-bc-hov);
    text-decoration: none;
    background-color: var(--_pgn-bg-hov);
    z-index: 2;
    cursor: pointer;
  }
  &[type=group] {
    --_pgn-m-child: 0;
    [rep=main]>a:where(:not([rep=pages])),
    [rep=main]>span:where(:not([rep=pages])) {
      border-radius: 0;
      &:not(:last-child) {
        margin-inline-end: -1px;
      }
      &:first-child {
        border-radius: var(--_pgn-r) 0 0 var(--_pgn-r);
      }
      &:last-child {
        border-radius: 0 var(--_pgn-r) var(--_pgn-r) 0;
      }
    }
    [rep=main] [rep=pages]:not(:last-child) {
      margin-inline-end: -1px;
    }
    [rep=pages]>* {
      border-radius: 0;
      &:not(:last-child) {
        margin-inline-end: -1px;
      }
    }
    [rep=pages]:first-child {
      *:first-child {
        border-radius: var(--_pgn-r) 0 0 var(--_pgn-r);
      }
    }
    [rep=pages]:last-child {
      *:last-child {
        border-radius: 0 var(--_pgn-r) var(--_pgn-r) 0;
      }
    }
  }
  &[type=plain]>a:not([selected]),
  &[type=plain] [rep=main]>a:not([selected]),
  &[type=plain] [rep=pages]>a:not([selected]),
  &[type=plain] span:not([selected]),
  &[type=plain] [rep=main]>span:not([selected]),
  &[type=plain] [rep=pages]>span:not([selected]),
  &[type=plain]>a:not([selected]):hover,
  &[type=plain] [rep=main]>a:not([selected]):hover,
  &[type=plain] [rep=pages]>a:not([selected]):hover,
  &[type=plain] span:not([selected]):hover,
  &[type=plain] [rep=main]>span:not([selected]):hover,
  &[type=plain] [rep=pages]>span:not([selected]):hover {
    background: transparent;
    border: none;
  }
  /*  &[type=plain] a:where(:not([rep=total]))[selected] {
    height: var(--_rem-display);
    min-width: var(--_rem-display);
    text-align: center;
    line-height: var(--_rem-display);
    border-radius: var(--_rem-display);
    border-width: 0;
    padding: 0;
  } */
  li {
    display: inline-block;
  }
  .pagination {
    text-align: center;
  }
  [rep=locate],
  [rep=count] {
    margin: 0 var(--_pgn-m-child);
    display: inline-flex;
    input {
      width: 3em;
      text-align: center;
    }
  }
  &[turning] {
    padding: calc(var(--_rem-display)/2) 0;
  }
  &[size=sm] {
    --_pgn-h: var(--_rem-list);
    --_pgn-p-child: 0.6rem;
  }
  &[size=lg] {
    --_pgn-h: var(--_rem-input);
    --_pgn-p-child: 1.4rem;
    --_pgn-r: var(--_r-input);
  }
}
/*
Last modified: 2025-06-21 23:18:12
*/
/*Panel*/
OC-PANEL {
    display: block;
}
._panel {
    --_panel-bw: 1px;
    --_panel-bc: var(--_c-text-bd);
    --_panel-fs: var(--_fs-body);
    --_panel-r: var(--_r-input);
    --_panel-r-win: var(--_r);
    --_panel-c: var(--_c-text);
    --_panel-bg: transparent;
    --_panel-c-lamp: var(--_c-prim);
    --_panel-h: var(--_rem-input);
    --_panel-lh: var(--_rem-list);
    --_panel-g: var(--_rem-min);
    --_panel-d: block;
    --_panel-p: var(--_rem-body);
    --_panel-h-legend: var(--_panel-lh);
    color: var(--_panel-c);
    border: var(--_panel-bw) solid var(--_panel-bc);
    border-radius: var(--_panel-r);
    background-color: var(--_panel-bg);
    ._panel-wrap {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    ._panel-head {
        position: relative;
        padding: calc((var(--_panel-h) - var(--_panel-lh))/2) var(--_panel-p);
        line-height: var(--_panel-lh);
        display: flex;
        align-items: flex-start;
        >._panel-inner {
            display: flex;
            flex-direction: column;
            flex: auto;
        }
    }
    &[headclosable] ._panel-head {
        cursor: pointer;
    }
    ._panel-title {
        display: flex;
        align-items: center;
        flex: auto;
        >[rep=group] {
            flex: auto;
            display: flex;
            align-items: center;
            >[rep=label] {
                font-size: var(--_panel-fs);
                position: relative;
                margin-inline-end: var(--_rem-space);
            }
            >[rep=annot] {
                font-size: var(--_rem-caption);
                color: var(--_c-caption);
                display: flex;
                align-items: center;
            }
        }
        >[rep=tips] {
            font-size: var(--_rem-caption);
            color: var(--_c-caption);
            margin-inline-start: var(--_rem-body);
        }
        >OC-BADGE {
            margin-inline-start: var(--_rem-body);
        }
        >[rep=custom] {
            text-align: end;
            display: flex;
            align-items: center;
            margin-inline-start: var(--_rem-body);
        }
        >._box-tools{
            color: var(--_c-brief);
            &:last-child{
                margin-inline-end: calc(var(--_rem-space)*-1);
            }
        }
    }
    ._panel-title,
    ._panel-head {
        >[rep=icon] {
            color: var(--_c-brief);
            width: var(--_panel-h-legend);
            text-align: center;
            margin-inline-end: var(--_panel-g);
            transition: all var(--_dur-2) linear;
        }
        >[rep=cube],
        >[rep=disk],
        >[rep=image] {
            height: var(--_panel-h-legend);
            margin-inline-end: var(--_panel-g);
            display: inline-flex;
        }
        >[rep=cube],
        >[rep=disk] {
            aspect-ratio: 1/1;
        }
        >[rep=cube],
        >[rep=disk] {
            object-fit: cover;
        }
        >[rep=image] {
            height: var(--_panel-h-legend);
            display: inline-flex;
        }
    }
    ._panel-title>[rep=arrow],
    >[rep=arrow] {
        font-size: var(--_rem-root);
        color: var(--_c-caption);
        font-family: var(--_ff-icon);
        text-align: center;
        width: var(--_panel-lh);
        height: var(--_panel-lh);
        line-height: var(--_panel-lh);
        background-position: center;
        background-repeat: no-repeat;
        background-size: var(--_rem-body);
        cursor: pointer;
        transition: all var(--_dur-2) linear;
        position: relative;
    }
    ._panel-title>[rep=arrow][spinning]:before,
    >[rep=arrow][spinning]:before {
        content: "";
        display: inline-block;
        width: 1.4rem;
        height: 1.4rem;
        background: var(--_spin) no-repeat scroll center;
        background-size: cover;
    }
    ._panel-title>[rep=arrow]:last-child {
        margin-inline-end: calc(var(--_rem-space)*-1);
    }
    ._panel-title>[rep=arrow]:first-child,
    >[rep=arrow] {
        margin-inline-start: calc(var(--_rem-min)*-1);
    }
    ._panel-brief {
        font-size: var(--_rem-caption);
        color: var(--_c-caption);
    }
    &[lamp=bottom] ._panel-brief {
        margin-block-start: var(--_rem-body);
    }
    ._panel-body {
        display: var(--_panel-d);
        box-sizing: border-box;
        &:has(>._panel-inner) {
            padding: var(--_panel-p);
        }
    }
    &[max] {
        --_panel-bg: var(--_c-stage);
        width: calc(100% - var(--_rem-body)*2);
        height: calc(100% - var(--_rem-body)*2);
        position: absolute;
        inset-inline-start: var(--_rem-body);
        inset-block-start: var(--_rem-body);
        z-index: 21;
        ._panel-body {
            flex: auto;
        }
    }
    &[lamp=left] ._panel-head:before,
    &[lamp=right] ._panel-head:before {
        content: '';
        width: 2px;
        height: var(--_rem-body);
        background-color: var(--_panel-c-lamp);
        position: absolute;
        inset-block-start: calc((var(--_panel-h) - var(--_rem-body))/2);
    }
    &[lamp=left] ._panel-head:before {
        inset-inline-start: 0;
    }
    &[lamp=right] ._panel-head:before {
        inset-inline-end: 0;
    }
    &[lamp=top] ._panel-title>[rep=group]>[rep=label]:before,
    &[lamp=bottom] ._panel-title>[rep=group]>[rep=label]:before {
        content: '';
        width: var(--_rem-display);
        height: 2px;
        background-color: var(--_panel-c-lamp);
        position: absolute;
        inset-inline-start: 0;
    }
    &[lamp=top] ._panel-title>[rep=group]>[rep=label]:before {
        inset-block-start: calc((var(--_panel-h) - var(--_panel-lh))/-2);
    }
    &[lamp=bottom] ._panel-title>[rep=group]>[rep=label]:before {
        inset-block-end: calc((var(--_panel-h) - var(--_panel-lh))/-2);
    }
    &[collapsed] {
        --_panel-d: none;
    }
    &[feature=loose] {
        --_panel-h: calc(var(--_rem-hero) + 1rem);
        --_panel-fs: var(--_fs-lead);
        --_panel-p: var(--_rem-list);
        ._panel-head>[rep=icon],
        ._panel-head>[rep=disk],
        ._panel-head>[rep=cube],
        ._panel-head>[rep=image] {
            margin-inline-end: var(--_rem-space);
        }
        &:where(:not([lamp=bottom]):has(._panel-brief)) {
            --_panel-h-legend: var(--_rem-hero);
        }
        &[lamp=bottom] ._panel-brief {
            margin-block-start: var(--_rem-list);
        }
    }
    &[feature=window] {
        --_panel-bg: var(--_c-caption-bg);
        ._panel-body{
            border:1px solid var(--_panel-bc);
            border-radius: var(--_panel-r-win);
            background-color: var(--_c-stage);
            margin: 0 var(--_px-space) var(--_px-space) var(--_px-space);
        }
    }
    &[theme=prim] {
        --_panel-c: var(--_c-prim);
        --_panel-bc: var(--_c-prim-bd);
        --_panel-bg: var(--_c-prim-bg);
    }
    &[theme=error] {
        --_panel-c: var(--_c-error);
        --_panel-bc: var(--_c-error-bd);
        --_panel-bg: var(--_c-error-bg);
        --_panel-c-lamp: var(--_c-error);
    }
    &[theme=succ] {
        --_panel-c: var(--_c-succ);
        --_panel-bc: var(--_c-succ-bd);
        --_panel-bg: var(--_c-succ-bg);
        --_panel-c-lamp: var(--_c-succ);
    }
    &[theme=warn] {
        --_panel-bc: var(--_c-warn-bd);
        --_panel-bg: var(--_c-warn-bg);
        --_panel-c-lamp: var(--_c-warn);
    }
    &[theme=info] {
        --_panel-c: var(--_c-info);
        --_panel-bc: var(--_c-info-bd);
        --_panel-bg: var(--_c-info-bg);
        --_panel-c-lamp: var(--_c-info);
    }
    &[theme=issue] {
        --_panel-c: var(--_c-issue);
        --_panel-bc: var(--_c-issue-bd);
        --_panel-bg: var(--_c-issue-bg);
        --_panel-c-lamp: var(--_c-issue);
    }
    &[theme=text] {
        --_panel-bg: var(--_c-text-bg);
        --_panel-c-lamp: var(--_c-text);
    }
}
/*tree*/
OC-TREE {
  display: block;
  content-visibility: auto;
}
._tree {
  --_tree-h: var(--_rem-display);
  --_tree-lh: var(--_rem-list);
  --_tree-g: var(--_rem-min);
  --_tree-bg-hov: var(--_c-text-bg);
  --_tree-c: var(--_c-text);
  --_tree-theme: var(--_c-prim);
  --_tree-theme-bg: var(--_c-prim-bg);
  --_tree-theme-sd: var(--_c-prim-sd);
  --_tree-c-hl: var(--_c-white);
  --_tree-bg-hl: var(--_tree-theme);
  --_tree-c-arrow: var(--_c-brief);
  content-visibility: auto;
  >* ._tree-children {
    display: none;
  }
  ._tree-empty{
    color: var(--_c-caption);
  }
  ._tree-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: var(--_tree-h);
    transition: all var(--_dur-2) linear;
    [rep=holder] {
      flex: auto;
    }
    [rep=gap] {
      width: var(--_tree-g);
    }
    >[rep=arrow] {
      color: var(--_tree-c-arrow);
      font-family: var(--_ff-icon);
      text-align: center;
      width: var(--_tree-lh);
      height: var(--_tree-h);
      line-height: var(--_tree-h);
      background-position: center;
      background-repeat: no-repeat;
      background-size: var(--_rem-body);
      position: relative;
      &[type=icon] {
        font-size: var(--_rem-root);
      }
    }
    >[rep=arrow]:not(._none) {
      cursor: pointer;
      transition: all var(--_dur-2) linear;
    }
    >[rep=arrow][spinning]:before {
      content: "";
      display: inline-block;
      width: 1.4rem;
      height: 1.4rem;
      background: var(--_spin) no-repeat scroll center;
      background-size: cover;
    }
    >[rep=check] {
      width: var(--_tree-lh);
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
    >[rep=legend] {
      color: var(--_c-brief);
      width: var(--_tree-lh);
      height: var(--_tree-lh);
      line-height: var(--_tree-lh);
      text-align: center;
      background-position: center;
      background-size: var(--_rem-body);
      background-repeat: no-repeat;
    }
    >[rep=group]>[rep=icon],
    >[rep=icon] {
      color: var(--_c-brief);
      width: var(--_tree-lh);
      text-align: center;
      margin-inline-end: var(--_tree-g);
      transition: all var(--_dur-2) linear;
    }
    >[rep=group]>[rep=disk],
    >[rep=disk] {
      height: var(--_tree-lh);
      width: var(--_tree-lh);
      margin-inline-end: var(--_tree-g);
      object-fit: cover;
      border-radius: 100%;
    }
    >[rep=group]>[rep=cube],
    >[rep=cube] {
      height: var(--_tree-lh);
      width: var(--_tree-lh);
      margin-inline-end: var(--_tree-g);
      object-fit: cover;
      border-radius: var(--_r);
    }
    >[rep=group]>[rep=image],
    >[rep=image] {
      max-width: calc(var(--_tree-lh)*2);
      margin-inline-end: var(--_tree-g);
    }
    >[rep=group]>[rep=label],
    >[rep=label] {
      color: var(--_tree-c);
      line-height: var(--_tree-lh);
      padding: 0 var(--_tree-g);
      margin-inline-end: var(--_tree-g);
      border-radius: var(--_r);
      box-sizing: border-box;
      white-space: nowrap;
      position: relative;
      cursor: pointer;
      transition: all var(--_dur-2) linear;
      [rep=mark] {
        color: var(--_c-issue);
      }
    }
    >[rep=group]>[rep=tips],
    >[rep=tips] {
      font-size: var(--_rem-caption);
      color: var(--_c-caption);
      margin-inline-start: var(--_tree-g);
    }
    >[rep=group]>[rep=badge],
    >[rep=group]>[rep=OC-BADGE],
    >[rep=badge],
    >OC-BADGE {
      margin-inline-start: var(--_tree-g);
    }
    >[rep=group]>[rep=custom],
    >[rep=custom] {
      margin-inline-start: var(--_tree-g);
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    >[rep=tools] {
      --_tools-c-hov: var(--_tree-c-hl);
      --_tools-c-haz-hov: var(--_tree-c-hl);
      --_tools-bg-hov: var(--_tree-bg-hl);
      --_tools-bg-hov-haz: var(--_c-error);
      margin-inline-start: var(--_tree-g);
    }
    input[type=text] {
      width: 9.2rem;
      height: var(--_tree-lh);
      line-height: var(--_tree-lh);
      padding: 0 0.4rem;
    }
    /*edit编辑*/
    &[editing]>[rep=group]>[rep=label],
    &[editing]>[rep=label] {
      padding: 0;
    }
    &[editing]>[rep=tools] {
      position: absolute;
      inset-inline-start: -100000px;
    }
    /*expand展开*/
    &[expanded]>[rep=group]>[rep=arrow][type=icon],
    &[expanded]>[rep=arrow][type=icon] {
      color: var(--_tree-theme);
    }
    /*selected已选择*/
    &:where([selected]:not([editing]))>[rep=group]>[rep=label],
    &:where([selected]:not([editing]))>[rep=label] {
      color: var(--_tree-c-hl);
      background: var(--_tree-bg-hl);
    }
    /*drag拖拽节点*/
    &[drop=ing]>[rep=group]>[rep=label],
    &[drop=ing]>[rep=label] {
      color: var(--_tree-theme);
      background: transparent;
      &:before {
        content: '';
        width: 0;
        height: 0;
        border-width: 4px;
        border-style: solid;
        border-color: transparent transparent transparent var(--_tree-theme);
        position: absolute;
        inset-inline-start: -4px;
        display: none;
      }
    }
    &[drop=ing]:where([point=before])>[rep=group]>[rep=label]:before,
    &[drop=ing]:where([point=before])>[rep=label]:before {
      display: block;
      inset-block-start: -6px;
    }
    &[drop=ing]:where([point=after])>[rep=group]>[rep=label]:before,
    &[drop=ing]:where([point=after])>[rep=label]:before {
      display: block;
      inset-block-end: -6px;
    }
    &[drop=ing]:where([point=inside])>[rep=group]>[rep=label]:before,
    &[drop=ing]:where([point=inside])>[rep=label]:before {
      display: block;
      inset-block-start: 7px;
    }
    &[drop=ing]:where([point=inside])>[rep=group]>[rep=label]:after,
    &[drop=ing]:where([point=inside])>[rep=label]:after {
      content: '';
      border: 1px solid var(--_tree-theme);
      border-radius: var(--_r);
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0;
    }
    /*focus聚焦，新增和拖拽成为焦点，如果本身是已选择状态则不做改变*/
    ._tree-head:where(:focus:not([selected]))>[rep=group]>[rep=label],
    ._tree-head:where(:focus:not([selected]))>[rep=label] {
      color: var(--_tree-theme);
    }
    &:hover {
      background-color: var(--_tree-bg-hov);
    }
  }
  ._tree-head:where([readonly])>[rep=tools] {
    opacity: var(--_o-disabled);
    pointer-events: none;
  }
  &:where([check]:not([select])) ._tree-head:where([exceeded], [uncheckable]),
  ._tree-head:where([disabled]),
  ._tree-head:where([uncheckable][unselectable]),
  ._tree-head:where([unselectable][exceeded]) {
    opacity: var(--_o-disabled);
    pointer-events: none;
    &~._tree-body,
    &~._tree-foot {
      opacity: var(--_o-disabled);
      pointer-events: none;
    }
    &:where([readonly])>[rep=tools],
    >[rep=check]:where([disabled]),
    &:where([readonly])>[rep=group]>[rep=tools],
    >[rep=group]>[rep=check]:where([disabled]) {
      opacity: 1;
    }
  }
  ._tree-wrap {
    /*disabled禁止勾选*/
    /*  &[disabled] {
      opacity: .5;
    } */
    /*    &:where(:not([disabled])) [disabled] {
      opacity: .5;
      &~._tree-body,
      &~._tree-foot {
        opacity: .5;
        pointer-events: none;
      }
    } */
    /*readonly只读，禁止编辑*/
    /*   &:where(:not([disabled])) ._tree-head[readonly]>[rep=tools] {
      opacity: .5;
      pointer-events: none;
    } */
  }
  ._tree-wrap:has(>._tree-children)>._tree-head {
    >[rep=legend] {
      cursor: pointer;
    }
  }
  ._tree-body {
    --_tree-body-lh: var(--_rem-list);
    --_tree-body-c: var(--_c-brief);
    line-height: var(--_rem-subtitle);
    display: flex;
    >._none {
      width: var(--_tree-lh);
      position: relative;
    }
  }
  ._tree-brief {
    color: var(--_tree-body-c);
    font-size: var(--_rem-caption);
    flex: auto;
    box-sizing: border-box;
    margin: 0 0 var(--_rem-space) var(--_p);
    position: relative;
    &:before {
      content: 'corner-left-up';
      /*       width: var(--_tree-body-dot);
      height: var(--_tree-body-dot); 
      border-radius: var(--_tree-body-dot);
      background-color: var(--_c-text-sd);*/
      font-family: var(--_ff-icon);
      font-size: var(--_px-root);
      color: var(--_c-caption);
      position: absolute;
      inset-inline-start: calc(var(--_p)*-1 + var(--_tree-g));
      inset-block-start: 0;
    }
  }
  ._tree-body:where(:has(._tree-brief:empty)) {
    display: none;
  }
  ._tree-foot {
    line-height: var(--_tree-body-lh);
    >._none {
      width: var(--_tree-lh);
      position: relative;
    }
    &:has([rep=info]:empty) {
      display: none;
    }
    [rep=info] {
      color: var(--_c-brief);
    }
    [rep=more],
    [rep=next],
    [rep=first] {
      margin-inline-start: var(--_rem-space);
      cursor: pointer;
    }
    [rep=more],
    [rep=next] {
      color: var(--_tree-theme);
    }
  }
  li ._tree-foot {
    display: none;
  }
  >._tree-foot,
  ._tree-head[expanded]~._tree-foot {
    display: flex;
  }
  ._tree-result {
    padding: calc((var(--_tree-h) - var(--_tree-lh))/2) 0;
    box-sizing: border-box;
    [rep=holder] {
      color: var(--_c-caption);
    }
  }
  ._tree-page {
    padding-inline-start: var(--_rem-space);
    flex: auto;
    box-sizing: border-box;
    [disabled] {
      opacity: 0.5;
    }
  }
  ._tree-children:empty+._tree-foot {
    display: none;
  }
  &[tools-trigger=hover] ._tree-head>[rep=tools],
  &[tools-trigger=click] ._tree-head>[rep=tools] {
    display: none;
  }
  &[tools-trigger=hover] ._tree-head:hover>[rep=tools] {
    display: inline-flex;
  }
  &[feature=check] {
    --_tree-h: var(--_rem-input);
    ._tree-head {
      padding: 0 var(--_rem-body);
      [rep=check] {
        margin-inline-end: var(--_tree-g);
      }
    }
    ._tree-head[checked] {
      color: var(--_tree-theme);
      background-color: var(--_tree-theme-bg);
      >[rep=label],
      >[rep=group]>[rep=label] {
        color: var(--_tree-theme);
      }
    }
  }
  &[feature=select],
  &[feature=dropdown] {
    --_tree-h: var(--_rem-input);
    ._tree-head {
      padding: 0 var(--_rem-body);
      >[rep=label],
      >[rep=group]>[rep=label] {
        padding: 0;
      }
    }
    ._tree-head[checked] {
      color: var(--_tree-theme);
      background-color: var(--_tree-theme-bg);
      >[rep=label],
      >[rep=group]>[rep=label] {
        color: var(--_tree-theme);
      }
      &:after {
        content: 'check';
        font-family: var(--_ff-icon);
        color: var(--_tree-theme);
        font-size: var(--_rem-caption);
        margin-inline-start: var(--_tree-g);
      }
    }
  }
  &[feature=select] {
    box-sizing: border-box;
    width: var(--_w-input);
    height: calc((var(--_rem-input) + 1px)*5 - 1px);
    overflow: auto;
    background-color: var(--_c-stage);
    border: 1px solid var(--_c-text-bd);
    border-radius: var(--_r-input);
    &:focus {
      border-color: var(--_tree-theme);
      outline: var(--_w-outline) solid var(--_tree-theme-sd);
      outline-offset: 0px;
    }
    >._tree-children>li:where(:not(:last-child))>._tree-head,
    >._tree-children>li li>._tree-head {
      border-block-end: 1px solid var(--_c-text-bd);
    }
  }
  &[feature=button] {
    ._tree-children {
      display: flow-root !important;
    }
    ._tree-wrap:where(:not(:has(._tree-children))) {
      display: inline-flex;
      float: inline-start;
    }
    ._tree-head {
      >[rep=label],
      >[rep=group]>[rep=label] {
        padding: 0;
      }
    }
    ._tree-head:where(:not(:has(+._tree-children))) {
      display: inline-flex;
      border: 1px solid var(--_c-text-bd);
      border-radius: var(--_r);
      padding: 0 var(--_rem-space);
      margin: 0 var(--_rem-space) var(--_rem-space) 0;
      position: relative;
      &[checked] {
        color: var(--_tree-theme);
        background-color: var(--_tree-theme-bg);
        border-color: var(--_tree-theme);
        >[rep=label],
        >[rep=group]>[rep=label] {
          color: var(--_tree-theme);
        }
        &:after {
          content: '';
          width: 0;
          height: 0;
          border-width: 4px;
          border-style: solid;
          border-color: transparent var(--_tree-theme) var(--_tree-theme) transparent;
          position: absolute;
          inset-inline-end: 0;
          inset-block-end: 0;
        }
      }
    }
    ._tree-head:where(:has(+._tree-children)) {
      background-color: transparent;
      margin-block-end: var(--_rem-space);
      &[checked] {
        >[rep=group]>[rep=label],
        >[rep=label] {
          color: var(--_tree-theme);
        }
        &:after {
          content: 'check';
          font-family: var(--_ff-icon);
          color: var(--_tree-theme);
          font-size: var(--_rem-caption);
        }
      }
    }
  }
  &[feature=list] {
    --_tree-h: auto;
    ._tree-head {
      padding: var(--_rem-space) var(--_rem-body);
      >[rep=label],
      >[rep=group]>[rep=label] {
        padding: 0;
      }
      &[checked] {
        background-color: var(--_tree-theme-bg);
        >[rep=label],
        >[rep=group]>[rep=label] {
          color: var(--_tree-theme);
        }
        &:after {
          content: 'check';
          font-family: var(--_ff-icon);
          color: var(--_tree-theme);
          font-size: var(--_rem-caption);
          line-height: var(--_rem-subtitle);
          margin-inline-start: var(--_tree-g);
        }
      }
      [rep=group] {
        flex: auto;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
      [rep=tips],
      [rep=custom] {
        line-height: var(--_rem-subtitle);
        width: 100%;
        margin-inline-start: 0;
      }
      [rep=custom] {
        color: var(--_c-brief);
      }
    }
  }
  /*line节点连线*/
  &[chain] ._tree-head [rep=arrow]._none:before,
  &[chain] ._tree-head [rep=arrow]._none:after {
    content: '';
    width: calc(var(--_tree-lh)/2);
    height: calc(var(--_tree-h)/2);
    position: absolute;
    inset-inline-end: 0;
  }
  &[chain] ._tree-head [rep=arrow]._none:before {
    box-shadow: inset 1px -1px 0 0 var(--_c-text-fc);
    inset-block-start: 0;
  }
  &[chain] ._tree-head [rep=arrow]._none:after {
    box-shadow: inset 1px 0 0 0 var(--_c-text-fc);
    inset-block-end: 0;
  }
  &[chain]>._tree-children>li:first-child>._tree-head [rep=arrow]._none:before {
    box-shadow: inset 0 -1px 0 0 var(--_c-text-fc);
  }
  &[chain] ._tree-children>li:last-child>._tree-head [rep=arrow]._none:after {
    display: none;
  }
  &[chain] ._tree-body>._none:before,
  &[chain] ._tree-foot>._none:before {
    content: '';
    width: calc(var(--_tree-lh)/2);
    height: 100%;
    box-shadow: inset 1px 0 0 0 var(--_c-text-fc);
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
  }
  &[chain] ._tree-children>li:last-child>._tree-body>._none:before,
  &[chain] ._tree-children>li:last-child>._tree-foot>._none:before {
    display: none;
  }
  ._tree-head>[rep=indent] i,
  ._tree-body>[rep=indent] i,
  ._tree-foot>[rep=indent] i {
    width: var(--_tree-lh);
  }
  &[chain] ._tree-head>[rep=indent],
  &[chain] ._tree-body>[rep=indent],
  &[chain] ._tree-foot>[rep=indent] {
    position: relative;
  }
  &[chain] ._tree-head>[rep=indent] i,
  &[chain] ._tree-body>[rep=indent] i,
  &[chain] ._tree-foot>[rep=indent] i {
    height: 100%;
    position: relative;
    &:before {
      content: '';
      width: calc(var(--_tree-lh)/2);
      height: 100%;
      box-shadow: inset 1px 0 0 0 var(--_c-text-fc);
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: 0;
    }
  }
  &[chain] ._tree-head>[rep=indent] {
    height: var(--_tree-h);
  }
  &[chain] ._tree-body>[rep=indent],
  &[chain] ._tree-foot>[rep=indent] {
    height: auto;
  }
}
/*menu*/
OC-MENU {
  display: block;
}
._menu {
  --_menu-w: min(100%,var(--_w-menu));
  --_menu-h: auto;
  --_menu-h-item: var(--_rem-input);
  --_menu-h-1st: var(--_menu-h-item);
  --_menu-r: var(--_r-input);
  --_menu-g: var(--_g);
  --_menu-c: var(--_c-text);
  --_menu-c-hov: var(--_c-prim);
  --_menu-c-sel: var(--_c-prim);
  --_menu-theme: var(--_c-prim);
  --_menu-theme-bg: var(--_c-prim-bg);
  --_menu-bg: transparent;
  --_menu-fw: bold;
  --_tree-h: var(--_menu-h-item);
  --_tree-g: var(--_menu-g);
  --_tree-c: var(--_menu-c);
  --_tree-theme: var(--_menu-theme);
  --_tree-theme-bg: var(--_menu-theme-bg);
  --_tree-c-hl: inherit;
  --_tree-bg-hl: transparent;
  --_tree-bg-hov: transparent;
  --_tree-c-arrow: var(--_c-caption);
  color: var(--_menu-c);
  background-color: var(--_menu-bg);
  width: var(--_menu-w);
  height: var(--_menu-h);
  display: flex;
  flex-direction: column;
  content-visibility: visible;
  min-height: var(--_rem-display);
  [ajax-message] {
    width: 100%;
    min-height: var(--_rem-display);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &:where(:not([nav], [spill])) {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  &:where(:not([expose]))>ul ul {
    display: none;
  }
  li {
    box-sizing: border-box;
    transition: all var(--_dur-2) ease-out;
    >._tree-head {
      color: var(--_menu-c);
    }
    >._tree-head:where(:not([disabled])) {
      cursor: pointer;
    }
  }
  >ul>li {
    border-block-end: none;
    &:before {
      content: '';
      width: .3rem;
      height: 0;
      background-color: var(--_menu-theme);
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0;
      z-index: 2;
      transition: all var(--_dur-2) ease-out;
    }
    &:where(:has(>._tree-head[expanded])):before {
      height: 100%;
    }
  }
  &:where(:not([lamp], [unpadded])) {
    >ul>li:before {
      display: block;
    }
  }
  &:where(:not([unpadded])) {
    ._tree-head,
    ._tree-body {
      padding-inline-start: var(--_rem-body);
      padding-inline-end: var(--_rem-body);
    }
  }
  ._tree-body {
    ._none {
      display: none;
    }
  }
  ._tree-brief:before {
    inset-inline-start: calc(var(--_rem-body)*-1);
  }
  ._tree-head>[rep=label],
  ._tree-head>[rep=group]>[rep=label] {
    line-height: var(--_rem-subtitle);
    display: -webkit-box;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 0;
    flex: auto;
    border-radius: 0;
    text-align: start;
  }
  >ul>li>._tree-head>[rep=label] {
    font-weight: var(--_menu-fw);
  }
  >._tree-head {
    height: var(--_menu-h-1st);
  }
  &[trigger=hover] ._tree-head>[rep=arrow],
  &[trigger=hover] ._tree-head>[rep=group]>[rep=arrow] {
    pointer-events: none;
  }
  &:where([expose]) ._tree-head>[rep=arrow],
  &:where([expose]) ._tree-head>[rep=group]>[rep=arrow] {
    display: none;
  }
  &:where(:not([unpadded])) ._tree-head>[rep=arrow]:last-child {
    margin-inline-end: calc(var(--_rem-body)*-1);
  }
  ._none[rep=arrow] {
    display: none;
  }
  ._tree-head>[rep=tips],
  ._tree-head>[rep=group]>[rep=tips] {
    font-size: var(--_rem-caption);
    color: var(--_c-caption);
  }
  ._tree-head[selected]:where(:not([disabled])) {
    color: var(--_c-white);
    background-color: var(--_menu-theme-bg);
    &:hover {
      background-color: var(--_menu-theme-bg);
    }
    >[rep=label],
    >[rep=icon],
    >[rep=group]>[rep=label],
    >[rep=group]>[rep=icon] {
      color: var(--_menu-c-sel);
    }
  }
  ._tree-head[disabled] {
    background-color: var(--_c-text-bg);
    &>* {
    }
  }
  li:hover>._tree-head:where(:not([disabled]))>[rep=label],
  li:hover>._tree-head:where(:not([disabled]))>[rep=icon],
  li:hover>._tree-head:where(:not([disabled]))>[rep=arrow],
  li:hover>._tree-head:where(:not([disabled]))>[rep=group]>[rep=label],
  li:hover>._tree-head:where(:not([disabled]))>[rep=group]>[rep=icon],
  li:hover>._tree-head:where(:not([disabled]))>[rep=group]>[rep=arrow] {
    color: var(--_menu-c-hov);
  }
}
._menu[theme=dark] {
  --_menu-c: rgba(255, 255, 255, 0.5);
  --_menu-bg: var(--_c-prim-sg);
  --_menu-c-hov: var(--_c-white);
  --_menu-c-sel: var(--_c-white);
  --_tree-c-arrow: rgba(255, 255, 255, 0.2);
  >ul>li {
    border-block-end: 1px solid rgba(0, 0, 0, .2);
  }
  >ul>li>._tree-head [rep=label] {
    font-weight: normal;
  }
  ._tree-head[selected] {
    background-color: var(--_c-prim-sd);
  }
  ._tree-head[disabled] {
    background-color: var(--_c-text-sd);
  }
  ._tree-head[expanded]>[rep=group]>[rep=arrow][type=icon],
  ._tree-head[expanded]>[rep=arrow][type=icon] {
    color: var(--_menu-c);
  }
  &[lamp=block] ._tree-head[selected] {
    border-radius: 0;
  }
}
._menu[full] {
  --_menu-w: 100%;
}
._menu[unpadded] {
  >ul>li:before {
    display: none;
  }
}
._menu[lamp=dot] {
  ._tree-head[selected]:before {
    width: .5rem;
    height: .5rem;
    border-radius: 100%;
    background-color: var(--_menu-theme);
    content: '';
    position: absolute;
    inset-block-start: calc(50% - 0.25rem);
  }
  >ul>li>._tree-head[selected]:before {
    inset-inline-start: var(--_rem-min);
  }
  &[unpadded] {
    >ul>li li>._tree-head[selected]:before {
      inset-inline-start: calc(var(--_rem-body) - 0.4rem);
    }
  }
  &:where(:not([unpadded])) {
    >ul>li li>._tree-head[selected]:before {
      inset-inline-start: calc(var(--_rem-body)*2 - 0.4rem);
    }
  }
}
._menu[lamp=line] {
  ._tree-head[selected]:before {
    position: absolute;
    background-color: var(--_menu-theme);
    content: '';
    width: 2px;
    height: 100%;
    inset-inline-start: 0;
    inset-block-start: 0;
  }
}
._menu[lamp=block] {
  ._tree-head[selected] {
    border-radius: var(--_menu-r);
    background-color: var(--_menu-theme);
    >[rep=tips],
    >[rep=group]>[rep=tips] {
      color: rgba(255, 255, 255, .5);
    }
    >[rep=label],
    >[rep=icon],
    >[rep=group]>[rep=label],
    >[rep=group]>[rep=icon] {
      color: var(--_c-white);
    }
  }
}
._menu[align=left] [rep=label] {
  justify-content: flex-start;
}
._menu[align=center] [rep=label] {
  justify-content: center;
}
._menu[align=right] [rep=label] {
  justify-content: flex-end;
}
._menu[spill]:where(:not([nav])) {
  position: relative;
  z-index: 610;
  >ul>li>ul {
    inset-inline-end: calc(var(--_w-list)*-1 - 0.6rem);
    inset-block-start: -1px;
  }
  >ul ul {
    width: var(--_w-list);
    position: absolute;
    background-color: var(--_c-stage);
    border: 1px solid var(--_c-text-bd);
    border-radius: var(--_menu-r);
    box-shadow: 0 .5rem 1.0rem rgba(0, 0, 0, 0.1);
  }
  >ul ul>li:first-child,
  >ul ul>li:first-child>:first-child {
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
  }
  >ul ul>li:last-child,
  >ul ul>li:last-child>:first-child {
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
  }
  >ul ul [rep=indent] {
    display: none
  }
  >ul>li>ul>li ul {
    inset-inline-end: calc(-100% - 0.7rem);
    inset-block-start: -0.1rem;
  }
  >ul>li li {
    border-block-end: 1px solid var(--_c-text-bd);
  }
  >ul>li ul li:last-child {
    border-block-end: 0;
  }
  >ul>li li:hover>:first-child:where(:not([disabled], [selected])) {
    background-color: var(--_c-text-bg);
  }
  >ul>li ul [selected]:where(:not([disabled])),
  >ul>li ul [selected]:where(:not([disabled])):hover {
    background-color: var(--_menu-theme);
    >[rep=tips],
    >[rep=group]>[rep=tips] {
      color: rgba(255, 255, 255, .5);
    }
    >[rep=label],
    >[rep=icon],
    >[rep=group]>[rep=label],
    >[rep=group]>[rep=icon] {
      color: var(--_c-white);
    }
  }
}
._menu[nav] {
  --_menu-w: auto;
  --_menu-fw: normal;
  display: inline-flex;
  flex-direction: row;
  min-height: var(--_menu-h-1st);
  position: relative;
  z-index: 610;
  >ul>li {
    display: inline-flex;
    &:before {
      display: none;
    }
    >._tree-head {
      height: var(--_menu-h-1st);
    }
    >._tree-head [rep=indent] {
      display: none
    }
    >._tree-head >[rep=label],
    >._tree-head >[rep=group]>[rep=label] {
      height: var(--_menu-h-1st);
      position: relative;
      flex: none;
      width: auto;
      display: inline-flex;
      align-items: center;
      &:after {
        content: '';
        height: 2px;
        width: 2em;
        background-color: var(--_c-prim);
        transform: translate(calc(-50%*var(--_dir-coef)), 0) scaleX(0);
        transition: all var(--_dur-2) linear;
        position: absolute;
        inset-inline-start: 50%;
        inset-block-end: 0;
      }
    }
    >._tree-head[expanded] >[rep=label],
    >._tree-head[expanded] >[rep=group]>[rep=label] {
      color: var(--_menu-theme);
      &:after {
        transform: translate(calc(-50%*var(--_dir-coef)), 0) scaleX(1);
      }
    }
    >[selected],
    >[disabled] {
      background: transparent;
    }
    >[expanded] > [rep=label],
    >[expanded] >[rep=group]> [rep=label] {
      color: var(--_menu-theme);
    }
    >._tree-head > [rep=arrow],
    >._tree-head >[rep=grou]> [rep=arrow]{
      width: var(--_rem-body);
      margin-inline-end: 0;
    }
  }
  >ul>li>ul {
    inset-inline-start: -0.1rem;
    inset-block-start: calc(100% + 0.6rem);
  }
  >ul ul {
    width: var(--_w-list);
    position: absolute;
    background-color: var(--_c-stage);
    border: 1px solid var(--_c-text-bd);
    border-radius: var(--_menu-r);
    box-shadow: 0 .5rem 1.0rem rgba(0, 0, 0, 0.1);
  }
  >ul ul>li:first-child,
  >ul ul>li:first-child>:first-child {
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
  }
  >ul ul>li:last-child,
  >ul ul>li:last-child>:first-child {
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
  }
  >ul ul [rep=indent] {
    display: none
  }
  >ul>li>ul>li ul {
    inset-inline-end: calc(-100% - 0.7rem);
    inset-block-start: -0.1rem;
  }
  >ul>li li {
    border-block-end: 1px solid var(--_c-text-bd);
  }
  >ul>li ul li:last-child {
    border-block-end: 0;
  }
  >ul>li li:hover>:first-child:where(:not([disabled], [selected])) {
    background-color: var(--_c-text-bg);
  }
  >ul>li ul [selected]:where(:not([disabled])),
  >ul>li ul [selected]:where(:not([disabled])):hover {
    background-color: var(--_menu-theme);
    >[rep=tips],
    >[rep=group]>[rep=tips] {
      color: rgba(255, 255, 255, .5);
    }
    >[rep=label],
    >[rep=icon],
    >[rep=group]>[rep=label],
    >[rep=group]>[rep=icon] {
      color: var(--_c-white);
    }
  }
  >ul>li>ul li>:first-child>[rep=arrow] {
    rotate:-90deg;
  }
  >ul>li>ul li>:first-child:where([expanded])>[rep=arrow] {
    rotate:90deg;
  }
}
._menu[align=center]>ul>li ul ._tree-head>[rep=arrow],
._menu[align=center]>ul>li ul ._tree-head>[rep=group]>[rep=arrow] {
  margin-inline-start: calc(var(--_p) - var(--_rem-display));
}
._menu[align=center]:where(:not([nav]))>ul>li>._tree-head>[rep=arrow],
._menu[align=center]:where(:not([nav]))>ul>li>._tree-head>[rep=group]>[rep=arrow] {
  margin-inline-start: calc(var(--_p) - var(--_rem-display));
}
/*Tab & Panel*/
._tab {
  position: relative;
  min-height: var(--_rem-display);
  [ajax-message] {
    width: 100%;
    min-height: var(--_rem-display);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  >._tab-head,
  ._panel-head ._tab-head {
    &:where(ul) {
      padding-inline-start: 0;
    }
    &:where(ul)>li:before {
      display: none;
    }
    ._slide {
      width: auto;
    }
    [rep=tips] {
      color: var(--_c-caption)
    }
  }
  >._tab-body,
  ._panel-body>._tab-body,
  ._panel-body>._panel-inner>._tab-body {
    position: relative;
    box-sizing: border-box;
    transition: all var(--_dur-2) linear;
    min-height: var(--_rem-display);
    [ajax-message] {
    width: 100%;
    min-height: var(--_rem-display);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
    &:where(ul) {
      padding-inline-start: 0;
    }
    &:where(ul)>li:before {
      display: none;
    }
    >*:where(:not([selected])) {
      width: 100%;
      visibility: hidden;
      pointer-events: none;
      position: absolute;
    }
    iframe {
      width: 100%;
      min-height: 40rem;
    }
  }
  &:where([embed]) {
    >._tab-body,
    ._panel-body>._tab-body,
    ._panel-body>._panel-inner>._tab-body {
      padding: var(--_p)
    }
    >._tab-head._group-page,
    >._tab-head ._group-page,
    ._panel-head ._tab-head._group-page,
    ._panel-head ._tab-head ._group-page {
      background-color: var(--_c-caption-bg);
    }
    >._tab-head._group-page>*,
    >._tab-head ._group-page>*,
    ._panel-head ._tab-head._group-page>*,
    ._panel-head ._tab-head ._group-page>* {
      border-block-start-width: 0;
      &:first-child {
        border-inline-start-width: 0;
      }
    }
    >._tab-head._group-flex>*:first-child,
    >._tab-head ._group-flex>*:first-child,
    ._panel-head ._tab-head._group-flex>*:first-child,
    ._panel-head ._tab-head ._group-flex>*:first-child {
      margin-inline-start: var(--_m);
    }
  }
}
/*Accordion*/
OC-ACCORDION {
  --_acc-r: var(--_r-input);
  display: block;
  content-visibility: auto;
  >[rep=wrap] {
    border-radius: inherit;
    >._accordion {
      --_acc-r: inherit;
    }
  }
}
._accordion {
  --_acc-h: var(--_rem-input);
  --_acc-lh: var(--_rem-list);
  --_acc-g: var(--_rem-min);
  --_acc-r: var(--_r-input);
  ._accordion-wrap {
    /*disabled禁止勾选*/
    &[disabled] {
      opacity: var(--_o-disabled);
    }
    &:where(:not([disabled])) [disabled] {
      opacity: var(--_o-disabled);
      &~._accordion-body {
        opacity: var(--_o-disabled);
      }
    }
    &:where(:not([disabled])) ._accordion-head[readonly]>[rep=tools] {
      opacity: var(--_o-disabled);
      pointer-events: none;
    }
  }
  ._accordion-body {
    box-sizing: border-box;
    display: none;
    >._accordion-cont {}
    >._accordion-extra {}
  }
  ._accordion-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: var(--_acc-h);
    transition: background-color var(--_dur-2);
    position: relative;
    &:hover {
      background-color: var(--_c-text-bg);
    }
    >[rep=group] {
      display: flex;
      flex: auto;
      justify-content: flex-start;
      align-items: center;
    }
    >[rep=holder],
    >[rep=group]>[rep=holder] {
      flex: auto;
    }
    >[rep=gap],
    >[rep=group]>[rep=gap] {
      width: var(--_acc-g);
    }
    >[rep=arrow],
    >[rep=group]>[rep=arrow] {
      color: var(--_c-brief);
      font-family: var(--_ff-icon);
      text-align: center;
      width: var(--_acc-lh);
      height: var(--_acc-lh);
      line-height: var(--_acc-lh);
      background-position: center;
      background-repeat: no-repeat;
      background-size: var(--_rem-body);
      cursor: pointer;
      transition: all var(--_dur-2) linear;
      position: relative;
      &:where([type=icon]) {
        font-size: var(--_rem-root);
      }
    }
    >[rep=arrow][spinning]:before,
    >[rep=group]>[rep=arrow][spinning]:before {
      content: "";
      display: inline-block;
      width: 1.4rem;
      height: 1.4rem;
      background: var(--_spin) no-repeat scroll center;
      background-size: cover;
    }
    >[rep=check],
    >[rep=group]>[rep=check] {
      width: var(--_acc-lh);
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
    >[rep=icon],
    >[rep=group]>[rep=icon] {
      color: var(--_c-brief);
      width: var(--_acc-lh);
      text-align: center;
      margin-inline-end: var(--_acc-g);
      transition: all var(--_dur-2) linear;
    }
    >[rep=disk],
    >[rep=group]>[rep=disk] {
      height: var(--_acc-lh);
      width: var(--_acc-lh);
      margin-inline-end: var(--_acc-g);
      object-fit: cover;
      border-radius: 100%;
    }
    >[rep=cube],
    >[rep=group]>[rep=cube] {
      height: var(--_acc-lh);
      width: var(--_acc-lh);
      margin-inline-end: var(--_acc-g);
      object-fit: cover;
      border-radius: var(--_r);
    }
    >[rep=label],
    >[rep=group]>[rep=label] {
      color: var(--_c-text);
      line-height: var(--_acc-lh);
      margin-inline-end: var(--_acc-g);
      box-sizing: border-box;
      white-space: nowrap;
      position: relative;
    }
    >[rep=tips],
    >[rep=group]>[rep=tips] {
      font-size: var(--_rem-caption);
      color: var(--_c-caption);
      margin-inline-start: var(--_acc-g);
    }
    >[rep=badge],
    >OC-BADGE,
    >[rep=group]>[rep=badge],
    >[rep=group]>OC-BADGE {
      margin-inline-start: var(--_acc-g);
    }
    >[rep=custom],
    >[rep=group]>[rep=custom] {
      margin-inline-start: var(--_acc-g);
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    >:first-child[rep=check] {
      margin-inline-end: var(--_acc-g);
    }
    >[rep=tools],
    >[rep=group]>[rep=tools] {
      margin-inline-start: var(--_acc-g);
      &>* {
        border-radius: var(--_r);
      }
      &>*:hover {
        color: var(--_c-white);
        background-color: var(--_c-prim);
      }
    }
    /*expand展开*/
    &:where([expanded])>[rep=arrow][type=icon],
    &:where([expanded])>[rep=group]>[rep=arrow][type=icon] {
      color: var(--_c-prim);
    }
  }
  &[lamp=left]>._accordion-wrap>._accordion-head:before,
  &[lamp=right]>._accordion-wrap>._accordion-head:before {
    content: '';
    background-color: var(--_c-prim);
    width: 2px;
    height: 14px;
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
  }
  &[lamp=left]>._accordion-wrap>._accordion-head:before {
    inset-inline-start: 0;
  }
  &[lamp=right]>._accordion-wrap>._accordion-head:before {
    inset-inline-end: 0;
  }
  &[lamp=top]>._accordion-wrap>._accordion-head>[rep=label]:before,
  &[lamp=bottom]>._accordion-wrap>._accordion-head>[rep=label]:before,
  &[lamp=top]>._accordion-wrap>._accordion-head>[rep=group]>[rep=label]:before,
  &[lamp=bottom]>._accordion-wrap>._accordion-head>[rep=group]>[rep=label]:before {
    background-color: var(--_c-prim);
    content: '';
    height: 2px;
    width: 28px;
    position: absolute;
    inset-inline-start: 0
  }
  &[lamp=top]>._accordion-wrap>._accordion-head>[rep=label]:before,
  &[lamp=top]>._accordion-wrap>._accordion-head>[rep=group]>[rep=label]:before {
    inset-block-start: calc((var(--_acc-lh) - var(--_acc-h))/2);
  }
  &[lamp=bottom]>._accordion-wrap>._accordion-head>[rep=label]:before,
  &[lamp=bottom]>._accordion-wrap>._accordion-head>[rep=group]>[rep=label]:before {
    inset-block-end: calc((var(--_acc-lh) - var(--_acc-h))/2);
  }
  &:where([rounded]:not([gapped])),
  &:where([rounded][gapped])>._accordion-wrap {
    border-radius: var(--_acc-r);
  }
  &:where([divided]:not([gapped]))>._accordion-wrap>._accordion-head {
    border-block-end: 1px solid var(--_c-text-bd);
  }
  &:where([divided])>._accordion-wrap>._accordion-body {
    padding: var(--_rem-body) 0;
  }
  &:where([divided][bordered]:not([gapped]))>._accordion-wrap:where(:last-child)>._accordion-head:where(:not([expanded])) {
    border-width: 0;
  }
  &:where([divided][bordered]:not([gapped]))>._accordion-wrap:where(:not(:last-child))>._accordion-body {
    border-block-end: 1px solid var(--_c-text-bd);
  }
  &:where([divided][gapped])>._accordion-wrap>._accordion-body {
    border-block-start: 1px solid var(--_c-text-bd);
  }
  &:where([gapped])>._accordion-wrap:where(:not(:last-child)) {
    margin-block-end: var(--_rem-space);
  }
  &:where([bordered])>._accordion-wrap>._accordion-head {
    padding: 0 var(--_rem-body);
    &>:last-child[rep=arrow] {
      margin-inline-end: calc(var(--_rem-space)*-1);
    }
    &>:first-child[rep=arrow] {
      margin-inline-start: calc(var(--_rem-space)*-1);
    }
  }
  &:where([bordered])>._accordion-wrap>._accordion-body {
    padding: var(--_rem-body);
  }
  &:where([bordered]:not([gapped])),
  &:where([bordered][gapped])>._accordion-wrap {
    border: 1px solid var(--_c-text-bd);
  }
  &[tools-trigger=hover]>._accordion-wrap>._accordion-head>[rep=tools],
  &[tools-trigger=hover]>._accordion-wrap>._accordion-head>[rep=group]>[rep=tools] {
    display: none;
  }
  &[tools-trigger=hover]>._accordion-wrap:hover>._accordion-head>[rep=tools],
  &[tools-trigger=hover]>._accordion-wrap:hover>._accordion-head>[rep=group]>[rep=tools] {
    display: inline-flex;
  }
}
/*Popup*/
._popup:where(:not(._plain)) {
  --_popup-r: var(--_r-bubble);
  --_popup-w: var(--_w-bubble);
  will-change: transform, opacity, width, height;
  contain: layout;
  background-color: var(--_c-stage);
  min-width: var(--_rem-input);
  max-width: calc(100vw - var(--_g-full)*2);
  border: 1px solid var(--_c-text-bd);
  border-radius: var(--_popup-r);
  box-sizing: border-box;
  box-shadow: 0 .5rem 1.0rem rgba(0, 0, 0, 0.1);
  animation-duration: var(--_dur-1);
  visibility: hidden;
  position: absolute;
  z-index: 880;
  &:where([size=sm]) {
    width: calc(var(--_popup-w)/2);
  }
  &:where([size=md]) {
    width: var(--_popup-w);
  }
  &:where([size=lg]) {
    width: calc(var(--_popup-w)*2);
  }
  &:where([size=xl]) {
    width: calc(var(--_popup-w)*3);
  }
  &:where([size=xxl]) {
    width: calc(var(--_popup-w)*4);
  }
  &>[rep=arrow] {
    width: 1.0rem;
    height: 1.0rem;
    box-shadow: 1px 1px 0 var(--_c-text-bd);
    background-color: inherit;
  }
  ._popup-wrap {
    border-radius: inherit;
    position: relative;
    z-index: 2;
  }
  ._popup-padding {
    box-sizing: border-box;
  }
  &:where(:not(:has(._popup-head))) ._popup-padding {
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
  }
  &:where(:not(:has(._popup-foot))) ._popup-padding {
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
  }
  ._popup-body {
    box-sizing: border-box;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
  &:where(:not(:has(._popup-head)):not(:has(._popup-padding))) ._popup-body {
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
  }
  &:where(:not(:has(._popup-foot)):not(:has(._popup-padding))) ._popup-body {
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
  }
  &:where(:not([placement=center-max], [placement=left-max], [placement=right-max])) ._popup-body {
    max-height: calc(100vh - var(--_g-full)*4);
  }
  ._popup-body ._popup-cont {
    border-radius: inherit;
    &[spinning] {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: calc(var(--_rem-display)*3);
      &:before {
        content: '';
        width: var(--_rem-display);
        animation: _rotate360 1s linear infinite;
        background: transparent;
        box-sizing: border-box;
        border: .2rem solid var(--_spin-bg,var(--_c-prim));
        border-block-end-color: var(--_spin-c,var(--_c-prim-sd));
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        display: inline-flex;
      }
    }
  }
  &:where([placement=center-max], [placement=left-max], [placement=right-max]) {
    display: flex;
    flex-direction: column;
    ._popup-wrap {
      display: flex;
      flex-direction: column;
      flex: auto;
    }
    ._popup-body {
      flex: auto;
      max-height: auto;
    }
  }
  ._popup-head {
    font-size: var(--_rem-body);
    font-weight: bold;
    line-height: var(--_rem-input);
    padding: 0 var(--_p);
    margin: 0;
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
  }
  ._popup-foot,
  ._bubble-footer {
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
  }
  ._popup-wrap>._box-tools {
    --_tools-c: var(--_c-text);
    --_tools-o: var(--_o-disabled);
    width: auto;
    position: absolute;
    [rep=icon] {
      font-size: var(--_fs-caption);
    }
    >* {
      width: var(--_rem-list);
      aspect-ratio: 1/1;
      line-height: var(--_rem-list);
      padding: 0;
    }
    >*[rep=close]:hover,
    >*[rep=remove]:hover {
      color: var(--_c-error);
    }
  }
  &[toolsplace=inside] ._popup-wrap>._box-tools {
    inset-inline-end: var(--_g);
    inset-block-start: calc((var(--_rem-display) - var(--_rem-list))/2);
  }
  &[toolsplace=outside] ._popup-wrap>._box-tools {
    inset-block-start: 0;
    inset-inline-end: 0;
    flex-direction: column;
    transform: translateX(calc(100%*var(--_dir-coef)));
  }
  &[conttype=image] ._popup-cont,
  &[conttype=video] ._popup-cont,
  &[conttype=audio] ._popup-cont {
    text-align: center;
  }
  [class*=_box-] img,
  [class*=_box-] video,
  [class*=_box-] audio {
    max-width: 100%;
  }
  [class*=_box-] video,
  [class*=_box-] audio {
    width: 100%;
    display: block;
  }
  iframe {
    min-height: 40rem;
  }
}
/*Tooltip*/
._tooltip {
  --_tip-bc: var(--_c-text);
  --_tip-bg: var(--_c-stage);
  --_tip-c: var(--_c-text);
  border-color: var(--_tip-bc);
  background-color: var(--_tip-bg);
  --_popup-r: var(--_r-input);
  ._popup-cont {
    color: var(--_tip-c);
    font-size: var(--_rem-caption);
    line-height: var(--_rem-subtitle);
    padding: 0.5rem 1rem;
    box-sizing: border-box;
  }
  &:where([theme*="-"])>[rep=arrow] {
    box-shadow: 1px 1px 0 var(--_tip-bc);
  }
  &:where(:not([theme*="-"]))>[rep=arrow] {
    box-shadow: none;
  }
  &[placement^=top]>[rep=arrow] {
    background: linear-gradient(135deg, transparent 50%, var(--_tip-bg) 50%, var(--_tip-bg) 100%);
  }
  &[placement^=bottom]>[rep=arrow] {
    background: linear-gradient(135deg, transparent 50%, var(--_tip-bg) 50%, var(--_tip-bg) 100%);
  }
  &[placement^=left]>[rep=arrow] {
    background: linear-gradient(135deg, transparent 50%, var(--_tip-bg) 50%, var(--_tip-bg) 100%);
  }
  &[placement^=right]>[rep=arrow] {
    background: linear-gradient(135deg, transparent 50%, var(--_tip-bg) 50%, var(--_tip-bg) 100%);
  }
  &[theme=prim] {
    --_tip-bc: var(--_c-prim);
    --_tip-bg: var(--_c-prim);
    --_tip-c: var(--_c-white);
  }
  &[theme=succ] {
    --_tip-bc: var(--_c-succ);
    --_tip-bg: var(--_c-succ);
    --_tip-c: var(--_c-white);
  }
  &[theme=error] {
    --_tip-bc: var(--_c-error);
    --_tip-bg: var(--_c-error);
    --_tip-c: var(--_c-white);
  }
  &[theme=info] {
    --_tip-bc: var(--_c-info);
    --_tip-bg: var(--_c-info);
    --_tip-c: var(--_c-white);
  }
  &[theme=warn] {
    --_tip-bc: var(--_c-warn);
    --_tip-bg: var(--_c-warn);
    --_tip-c: var(--_c-black);
  }
  &[theme=issue] {
    --_tip-bc: var(--_c-issue);
    --_tip-bg: var(--_c-issue);
    --_tip-c: var(--_c-white);
  }
  &[theme=text] {
    --_tip-bc: var(--_c-text);
    --_tip-bg: var(--_c-text);
    --_tip-c: var(--_c-stage);
  }
  &[theme=prim-lt] {
    --_tip-bc: var(--_c-prim);
  }
  &[theme=succ-lt] {
    --_tip-bc: var(--_c-succ);
  }
  &[theme=error-lt] {
    --_tip-bc: var(--_c-error);
  }
  &[theme=info-lt] {
    --_tip-bc: var(--_c-info);
  }
  &[theme=warn-lt] {
    --_tip-bc: var(--_c-warn);
  }
  &[theme=issue-lt] {
    --_tip-bc: var(--_c-issue);
  }
  &[theme=text-lt] {
    --_tip-bc: var(--_c-text);
  }
}
/*Dropdown*/
._dropdown {
  ._popup-cont ul>li:last-child>._bullet+hr {
    display: none;
  }
  &:where(:not([size])) ._popup-cont ul>li ._bullet-body {
    width: fit-content;
  }
  &[feature=button] ._bullet {
    text-align: center;
  }
  ._bullet:where(:not(:has(input))) ._bullet-body>[rep=label] {
    cursor: pointer;
  }
}
/*Drawer*/
._drawer {
  --_drawer-x-sm: min(40rem, 30%);
  --_drawer-x-md: min(60rem, 50%);
  --_drawer-x-lg: min(80rem, 70%);
  --_drawer-x-max: calc(100% - var(--_rem-input));
  --_drawer-y-sm: min(20rem, 30%);
  --_drawer-y-md: min(40rem, 50%);
  --_drawer-y-lg: min(60rem, 70%);
  --_drawer-y-max: calc(100% - var(--_rem-input));
  --_drawer-w: var(--_w-drawer);
  --_drawer-r: calc(var(--_r)*5);
  will-change: transform, opacity, width, height;
  contain: layout;
  height: 100%;
  width: 100%;
  position: fixed;
  inset-inline-start: -1000.0rem;
  inset-block-start: 0;
  z-index: 810;
  &:where([restrict]) {
    position: absolute;
  }
  ._drawer-mask {
    width: 100%;
    height: 100%;
    background-color: var(--_c-black-60);
    opacity: 0;
    transition: all var(--_dur-2) ease-out;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: 4;
  }
  ._drawer-wrap {
    width: var(--_drawer-w);
    background-color: var(--_c-stage);
    opacity: 1;
    transition: all var(--_dur-2) ease-out;
    box-sizing: border-box;
    animation-duration: var(--_dur-3);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    position: absolute;
    inset-inline-end: calc(var(--_w-drawer)*-1);
    inset-block-start: 0;
    z-index: 9;
  }
  ._drawer-padding {
    box-sizing: border-box;
  }
  &:where([show]) {
    inset-inline-start: 0;
    inset-block-start: 0;
  }
  &:where([show]) ._drawer-mask {
    opacity: 1;
  }
  &:where([size=sm][placement=left], [size=sm][placement=right]) ._drawer-wrap {
    width: var(--_drawer-x-sm);
  }
  &:where([size=md][placement=left], [size=md][placement=right]) ._drawer-wrap {
    width: var(--_drawer-x-md);
  }
  &:where([size=lg][placement=left], [size=lg][placement=right]) ._drawer-wrap {
    width: var(--_drawer-x-lg);
  }
  &:where([size=max][placement=left], [size=max][placement=right]) ._drawer-wrap {
    width: var(--_drawer-x-max);
  }
  &:where([size=sm][placement=top], [size=sm][placement=bottom]) ._drawer-wrap {
    height: var(--_drawer-y-sm);
  }
  &:where([size=md][placement=top], [size=md][placement=bottom]) ._drawer-wrap {
    height: var(--_drawer-y-md);
  }
  &:where([size=lg][placement=top], [size=lg][placement=bottom]) ._drawer-wrap {
    height: var(--_drawer-y-lg);
  }
  &:where([size=max][placement=top], [size=max][placement=bottom]) ._drawer-wrap {
    height: var(--_drawer-y-max);
  }
  &:where([placement=right]) ._drawer-wrap,
  &:where([placement=left]) ._drawer-wrap {
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
  }
  &:where([placement=right]) ._drawer-wrap {
    inset-inline-end: calc(var(--_drawer-x-sm)*-1);
  }
  &:where([placement=right][size=sm]) ._drawer-wrap {
    inset-inline-end: calc(var(--_drawer-x-sm)*-1);
  }
  &:where([placement=right][size=md]) ._drawer-wrap {
    inset-inline-end: calc(var(--_drawer-x-md)*-1);
  }
  &:where([placement=right][size=lg]) ._drawer-wrap {
    inset-inline-end: calc(var(--_drawer-x-lg)*-1);
  }
  &:where([placement=right][size=max]) ._drawer-wrap {
    inset-inline-end: calc(var(--_drawer-x-max)*-1);
  }
  &:where([placement=right][show]) ._drawer-wrap {
    inset-inline-end: 0;
  }
  &:where([placement=left]) ._drawer-wrap {
    inset-inline-start: calc(var(--_drawer-x-sm)*-1);
  }
  &:where([placement=left][size=sm]) ._drawer-wrap {
    inset-inline-start: calc(var(--_drawer-x-sm)*-1);
  }
  &:where([placement=left][size=md]) ._drawer-wrap {
    inset-inline-start: calc(var(--_drawer-x-md)*-1);
  }
  &:where([placement=left][size=lg]) ._drawer-wrap {
    inset-inline-start: calc(var(--_drawer-x-lg)*-1);
  }
  &:where([placement=left][size=max]) ._drawer-wrap {
    inset-inline-start: calc(var(--_drawer-x-max)*-1);
  }
  &:where([placement=left][show]) ._drawer-wrap {
    inset-inline-start: 0;
  }
  &:where([placement=top]) ._drawer-wrap {
    width: 100%;
    inset-inline-start: auto;
    inset-inline-end: auto;
    inset-block-end: auto;
    transform: translateY(-100%);
  }
  /*   &:where([placement=top][size=sm]) ._drawer-wrap ._drawer-body {
    max-height: var(--_drawer-y-sm);
  }
  &:where([placement=top][size=md]) ._drawer-wrap ._drawer-body {
    max-height: var(--_drawer-y-md);
  }
  &:where([placement=top][size=lg]) ._drawer-wrap ._drawer-body {
    max-height: var(--_drawer-y-lg);
  } */
  /*   &:where([placement=top][size=max]) ._drawer-wrap ._drawer-body {
    max-height: var(--_drawer-y-max);
  } */
  &:where([placement=top][show]) ._drawer-wrap {
    transform: translateY(0);
  }
  &:where([placement=bottom]) ._drawer-wrap {
    width: 100%;
    inset-inline-start: auto;
    inset-inline-end: auto;
    inset-block-start: auto;
    inset-block-end: 0;
    transform: translateY(100%);
  }
  /*   &:where([placement=bottom][size=sm]) ._drawer-wrap ._drawer-body {
    max-height: var(--_drawer-y-sm);
  }
  &:where([placement=bottom][size=md]) ._drawer-wrap ._drawer-body {
    max-height: var(--_drawer-y-md);
  }
  &:where([placement=bottom][size=lg]) ._drawer-wrap ._drawer-body {
    max-height: var(--_drawer-y-lg);
  }
  &:where([placement=bottom][size=max]) ._drawer-wrap ._drawer-body {
    max-height: var(--_drawer-y-max);
  } */
  &:where([placement=bottom][show]) ._drawer-wrap {
    transform: translateY(0);
  }
  ._drawer-body {
    flex: auto;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    border-radius: inherit;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    overscroll-behavior: contain;
  }
  &[placement=right] ._drawer-body,
  &[placement=left] ._drawer-body {
    height: 0;
  }
  ._drawer-cont {
    overflow: hidden;
    &[spinning] {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: calc(var(--_rem-display)*3);
      &:before {
        content: '';
        width: var(--_rem-display);
        animation: _rotate360 1s linear infinite;
        background: transparent;
        box-sizing: border-box;
        border: .2rem solid var(--_spin-bg,var(--_c-prim));
        border-block-end-color: var(--_spin-c,var(--_c-prim-sd));
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        display: inline-flex;
      }
    }
  }
  ._drawer-head {
    font-size: var(--_rem-body);
    font-weight: bold;
    line-height: var(--_rem-input);
    padding: 0 var(--_p);
    margin: 0;
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
  }
  ._drawer-foot {
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
  }
  ._box-tools {
    pointer-events: auto;
    opacity: 0;
    width: auto;
    padding: calc((var(--_rem-input) - var(--_rem-list))/2);
    position: absolute;
    [rep=icon] {
      font-size: var(--_fs-caption);
    }
    >* {
      color: var(--_c-stage);
      width: var(--_rem-list);
      aspect-ratio: 1/1;
      line-height: var(--_rem-list);
      padding: 0;
    }
  }
  &:where(:has(._drawer-mask)) ._box-tools {
    >*[rep=close]:hover {
      color: var(--_c-error);
    }
  }
  &[placement=right] ._box-tools {
    inset-block-start: 0;
    inset-inline-start: 0;
    transform: translateX(calc(-100%*var(--_dir-coef)));
    flex-direction: column;
  }
  &[placement=left] ._box-tools {
    inset-block-start: 0;
    inset-inline-end: 0;
    transform: translateX(calc(100%*var(--_dir-coef)));
    flex-direction: column;
  }
  &[placement=top] ._box-tools {
    inset-inline-end: 0;
    inset-block-end: 0;
    transform: translateY(100%);
  }
  &[placement=bottom] {
    ._drawer-wrap{
      border-top-left-radius: var(--_drawer-r);
      border-top-right-radius: var(--_drawer-r);
    }
    ._box-tools {
      inset-inline-end: 0;
      inset-block-start: 0;
      transform: translateY(-100%);
    }
  }
  &[show] ._box-tools {
    opacity: 1;
  }
  &[conttype=image] ._drawer-cont,
  &[conttype=video] ._drawer-cont,
  &[conttype=audio] ._drawer-cont {
    text-align: center;
  }
  [class*=_box-] img,
  [class*=_box-] video,
  [class*=_box-] audio {
    max-width: 100%;
  }
  [class*=_box-] video,
  [class*=_box-] audio {
    width: 100%;
    display: block;
  }
  iframe {
    min-height: 40rem;
  }
  ._menu {
    width: 100%;
  }
  &:where([conttype=iframe]) {
    &[size] ._drawer-padding {
      flex: auto;
      display: flex;
      flex-direction: column;
    }
    &[size] ._drawer-cont {
      display: flex;
      flex-direction: column;
      flex: auto;
      [class*=_box-] {
        flex: auto;
        iframe {
          min-height: auto;
          height: 100%;
        }
      }
    }
  }
  &:not(:has(._drawer-mask)) {
    pointer-events: none;
    ._box-tools {
      --_tools-bg: rgba(0, 0, 0, var(--_o-disabled));
      --_tools-c-haz-hov: var(--_c-white);
      --_tools-bg-hov-haz: var(--_c-error);
      --_tools-r: 100%;
    }
    &[placement=left] ._drawer-wrap {
      border-inline-end: 1px solid var(--_c-text-bd);
    }
    &[placement=right] ._drawer-wrap {
      border-inline-start: 1px solid var(--_c-text-bd);
    }
    &[placement=top] ._drawer-wrap {
      border-block-end: 1px solid var(--_c-text-bd);
    }
    &[placement=bottom] ._drawer-wrap {
      border-block-start: 1px solid var(--_c-text-bd);
    }
    ._drawer-wrap {
      box-shadow: 0 .2rem 1.0rem rgba(0, 0, 0, .12);
    }
  }
}
@media (max-width:calc(900px - 1px)) {
  ._drawer {
    --_drawer-x-sm: 70%;
    --_drawer-x-md: 70%;
    --_drawer-x-lg: 70%;
  }
}
/*Dialog*/
._dialog {
  --_dialog-row: center;
  --_dialog-col: center;
  --_dialog-r: var(--_r-bubble);
  --_dialog-w: 100vw;
  --_dialog-h: 100vh;
  --_dialog-sz: auto;
  --_dialog-g: var(--_g-full);
  will-change: transform, opacity, width, height;
  contain: layout;
  height: var(--_dialog-h);
  width: var(--_dialog-w);
  display: flex;
  justify-content: var(--_dialog-row);
  align-items: var(--_dialog-col);
  position: fixed;
  inset-inline-start: -10000.0rem;
  inset-block-start: 0;
  z-index: 840;
  &:where([restrict]) {
    --_dialog-w: 100%;
    --_dialog-h: 100%;
    position: absolute;
  }
  ._dialog-mask {
    width: 100%;
    height: 100%;
    background-color: var(--_c-black-60);
    opacity: 0;
    transition: all var(--_dur-2) ease-out;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: 4;
  }
  &[feature=confirm] ._dialog-mask,
  &[feature=alert] ._dialog-mask {
    opacity: 0;
  }
  ._dialog-wrap {
    width: var(--_dialog-sz);
    max-width: calc(100vw - var(--_g-full)*2);
    background-color: var(--_c-stage);
    opacity: 1;
    border-radius: var(--_dialog-r);
    transition: all var(--_dur-2) ease-out;
    box-sizing: border-box;
    animation-duration: var(--_dur-3);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    position: relative;
    z-index: 9;
  }
  &:where([size=sm]) ._dialog-wrap {
    --_dialog-sz: calc(var(--_w-bubble)/2);
  }
  &:where([size=md]) ._dialog-wrap {
    --_dialog-sz: var(--_w-bubble);
  }
  &:where([size=lg]) ._dialog-wrap {
    --_dialog-sz: calc(var(--_w-bubble)*2);
  }
  &:where([size=xl]) ._dialog-wrap {
    --_dialog-sz: calc(var(--_w-bubble)*3);
  }
  &:where([size=xxl]) ._dialog-wrap {
    --_dialog-sz: calc(var(--_w-bubble)*4);
  }
  &:where([size=max]) ._dialog-wrap {
    --_dialog-sz: calc(100vw - var(--_dialog-g)*2);
  }
  ._dialog-padding {
    box-sizing: border-box;
  }
  &:where(:not(:has(._dialog-head))) ._dialog-padding {
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
  }
  &:where(:not(:has(._dialog-foot))) ._dialog-padding {
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
  }
  &:where(:not(:has(._dialog-head)):not(:has(._dialog-padding))) ._dialog-body {
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
  }
  &:where(:not(:has(._dialog-foot)):not(:has(._dialog-padding))) ._dialog-body {
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
  }
  &:where(:not([placement=center-max])) ._dialog-body {
    max-height: calc(100vh - var(--_g-full)*4);
  }
  &:where([show]) {
    inset-inline-start: 0;
    inset-block-start: 0;
  }
  &:where([show]:not([feature=confirm], [feature=alert], [feature=prompt])) ._dialog-mask {
    opacity: 1;
  }
  &:where([placement=center]) {
    --_dialog-row: center;
    --_dialog-col: center;
  }
  &:where([placement=left-top]) {
    --_dialog-row: flex-start;
    --_dialog-col: flex-start;
    ._dialog-wrap {
      margin-inline-start: var(--_dialog-g);
      margin-block-start: var(--_dialog-g);
    }
  }
  &:where([placement=center-top]) {
    --_dialog-row: center;
    --_dialog-col: flex-start;
    ._dialog-wrap {
      margin-block-start: var(--_dialog-g);
    }
  }
  &:where([placement=right-top]) {
    --_dialog-row: flex-end;
    --_dialog-col: flex-start;
    ._dialog-wrap {
      margin-inline-end: var(--_dialog-g);
      margin-block-start: var(--_dialog-g);
    }
  }
  &:where([placement=left-bottom]) {
    --_dialog-row: flex-start;
    --_dialog-col: flex-end;
    ._dialog-wrap {
      margin-inline-start: var(--_dialog-g);
      margin-block-end: var(--_dialog-g);
    }
  }
  &:where([placement=center-bottom]) {
    --_dialog-row: center;
    --_dialog-col: flex-end;
    ._dialog-wrap {
      margin-block-end: var(--_dialog-g);
    }
  }
  &:where([placement=right-bottom]) {
    --_dialog-row: flex-end;
    --_dialog-col: flex-end;
    ._dialog-wrap {
      margin-inline-end: var(--_dialog-g);
      margin-block-end: var(--_dialog-g);
    }
  }
  &:where([placement=center-max]) ._dialog-wrap {
    width: calc(100vw - var(--_g-full)*2);
    height: calc(100vh - var(--_g-full)*2);
    display: flex;
    flex-direction: column;
    ._dialog-body {
      flex: auto;
      max-height: auto;
    }
  }
  ._dialog-body {
    box-sizing: border-box;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
  ._dialog-cont {
    border-radius: inherit;
    &[spinning] {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: calc(var(--_rem-display)*3);
      &:before {
        content: '';
        width: var(--_rem-display);
        animation: _rotate360 1s linear infinite;
        background: transparent;
        box-sizing: border-box;
        border: .2rem solid var(--_spin-bg,var(--_c-prim));
        border-block-end-color: var(--_spin-c,var(--_c-prim-sd));
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        display: inline-flex;
      }
    }
  }
  ._dialog-head {
    font-size: var(--_rem-body);
    font-weight: bold;
    line-height: var(--_rem-input);
    padding: 0 var(--_p);
    margin: 0;
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
  }
  ._dialog-foot {
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
  }
  ._dialog-wrap>._box-tools {
    width: auto;
    position: absolute;
    [rep=icon] {
      font-size: var(--_fs-caption);
    }
    >* {
      color: var(--_c-text);
      width: var(--_rem-list);
      aspect-ratio: 1/1;
      line-height: var(--_rem-list);
      padding: 0;
      opacity: var(--_o-disabled);
    }
    >:hover {
      opacity: 1;
    }
    >*[rep=close]:hover,
    >*[rep=remove]:hover {
      color: var(--_c-error);
    }
  }
  &[toolsplace=inside] ._dialog-wrap>._box-tools {
    inset-inline-end: var(--_g);
    inset-block-start: calc((var(--_rem-display) - var(--_rem-list))/2);
  }
  &[toolsplace=outside] ._dialog-wrap>._box-tools {
    inset-block-start: 0;
    inset-inline-end: 0;
    flex-direction: column;
    transform: translateX(calc(100%*var(--_dir-coef)));
  }
  &[conttype=image] ._dialog-cont,
  &[conttype=video] ._dialog-cont,
  &[conttype=audio] ._dialog-cont {
    text-align: center;
  }
  [class*=_box-] img,
  [class*=_box-] video,
  [class*=_box-] audio {
    max-width: 100%;
  }
  [class*=_box-] video,
  [class*=_box-] audio {
    width: 100%;
    display: block;
  }
  iframe {
    min-height: 40rem;
    width: 100%;
  }
  ._menu {
    width: 100%;
  }
  &:where([conttype=iframe]) {
    &[size] ._dialog-padding {
      flex: auto;
      display: flex;
      flex-direction: column;
    }
    &[size] ._dialog-cont {
      display: flex;
      flex-direction: column;
      flex: auto;
      [class*=_box-] {
        flex: auto;
        iframe {
          min-height: auto;
          height: 100%;
        }
      }
    }
  }
  &:not(:has(._dialog-mask)) {
    pointer-events: none;
    ._dialog-wrap {
      border: 1px solid var(--_c-text-bd);
      box-shadow: 0 .2rem 1.0rem rgba(0, 0, 0, .12);
    }
  }
  &[feature=confirm] ._dialog-wrap,
  &[feature=alert] ._dialog-wrap,
  &[feature=prompt] ._dialog-wrap {
    border: 1px solid var(--_c-text-bd);
    box-shadow: 0 .2rem 1.0rem rgba(0, 0, 0, .12);
  }
}
@media (max-width:calc(900px - 1px)) {}
/* Handheld device(xxs+xs+sm+md) */
@media (max-width: calc(1200px - 1px)),
(min-width: 1200px) and (max-width:calc(1536px - 1px)) and (hover:none) {
  :root {
    --_num-step: 0;
    --_screen: hh;
  }
  select:where([multiple]) {
    min-height: auto;
  }
  OC-HEADER ._header-l,
  OC-HEADER ._header-r {
    display: flex;
  }
  OC-HEADER:where(:not([justify])) {
    ._header-l>*,
    ._header-r>* {
      aspect-ratio: 1 / 1;
    }
    ._header-head {
      text-align: center;
      margin-inline-start: 0;
    }
  }
  OC-HEADER ._header-body {
    display: none;
  }
  *._split-hh,
  ._row:where(._split-hh),
  ._col:where(._split-hh),
  ._grid:where(._split-hh) {
    display: block;
    >* {
      width: auto;
      height: auto;
      &:where(:not(:last-child)) {
        margin-block-end: var(--_lyt-g);
      }
    }
  }
  ._hide-hh {
    display: none;
  }
  ._grid[class*=_hh] {
    --_lyt-avg: var(--_lyt-group);
  }
  ._xs-1 {
      --_lyt-group: 1;
      &:where(._row[class*=_avg-])>*:nth-of-type(1n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(1n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(1)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(1)~* {
        display: none;
      }
    }
  ._xs-2 {
      --_lyt-group: 2;
      &:where(._row[class*=_avg-])>*:nth-of-type(2n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(2n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(2)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(2)~* {
        display: none;
      }
    }
  ._xs-3 {
      --_lyt-group: 3;
      &:where(._row[class*=_avg-])>*:nth-of-type(3n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(3n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(3)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(3)~* {
        display: none;
      }
    }
  ._xs-4 {
      --_lyt-group: 4;
      &:where(._row[class*=_avg-])>*:nth-of-type(4n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(4n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(4)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(4)~* {
        display: none;
      }
    }
  ._xs-5 {
      --_lyt-group: 5;
      &:where(._row[class*=_avg-])>*:nth-of-type(5n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(5n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(5)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(5)~* {
        display: none;
      }
    }
  ._xs-6 {
      --_lyt-group: 6;
      &:where(._row[class*=_avg-])>*:nth-of-type(6n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(6n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(6)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(6)~* {
        display: none;
      }
    }
  ._xs-7 {
      --_lyt-group: 7;
      &:where(._row[class*=_avg-])>*:nth-of-type(7n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(7n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(7)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(7)~* {
        display: none;
      }
    }
  ._xs-8 {
      --_lyt-group: 8;
      &:where(._row[class*=_avg-])>*:nth-of-type(8n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(8n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(8)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(8)~* {
        display: none;
      }
    }
  ._xs-9 {
      --_lyt-group: 9;
      &:where(._row[class*=_avg-])>*:nth-of-type(9n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(9n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(9)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(9)~* {
        display: none;
      }
    }
  ._xs-10 {
      --_lyt-group: 10;
      &:where(._row[class*=_avg-])>*:nth-of-type(10n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(10n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(10)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(10)~* {
        display: none;
      }
    }
  ._xs-11 {
      --_lyt-group: 11;
      &:where(._row[class*=_avg-])>*:nth-of-type(11n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(11n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(11)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(11)~* {
        display: none;
      }
    }
  ._xs-12 {
      --_lyt-group: 12;
      &:where(._row[class*=_avg-])>*:nth-of-type(12n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(12n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(12)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(12)~* {
        display: none;
      }
    }
  ._xs-13 {
      --_lyt-group: 13;
      &:where(._row[class*=_avg-])>*:nth-of-type(13n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(13n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(13)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(13)~* {
        display: none;
      }
    }
  ._xs-14 {
      --_lyt-group: 14;
      &:where(._row[class*=_avg-])>*:nth-of-type(14n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(14n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(14)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(14)~* {
        display: none;
      }
    }
  ._xs-15 {
      --_lyt-group: 15;
      &:where(._row[class*=_avg-])>*:nth-of-type(15n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(15n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(15)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(15)~* {
        display: none;
      }
    }
  ._xs-16 {
      --_lyt-group: 16;
      &:where(._row[class*=_avg-])>*:nth-of-type(16n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(16n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(16)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(16)~* {
        display: none;
      }
    }
  ._xs-17 {
      --_lyt-group: 17;
      &:where(._row[class*=_avg-])>*:nth-of-type(17n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(17n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(17)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(17)~* {
        display: none;
      }
    }
  ._xs-18 {
      --_lyt-group: 18;
      &:where(._row[class*=_avg-])>*:nth-of-type(18n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(18n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(18)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(18)~* {
        display: none;
      }
    }
  ._xs-19 {
      --_lyt-group: 19;
      &:where(._row[class*=_avg-])>*:nth-of-type(19n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(19n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(19)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(19)~* {
        display: none;
      }
    }
  ._xs-20 {
      --_lyt-group: 20;
      &:where(._row[class*=_avg-])>*:nth-of-type(20n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(20n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(20)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(20)~* {
        display: none;
      }
    }
  ._xs-21 {
      --_lyt-group: 21;
      &:where(._row[class*=_avg-])>*:nth-of-type(21n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(21n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(21)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(21)~* {
        display: none;
      }
    }
  ._xs-22 {
      --_lyt-group: 22;
      &:where(._row[class*=_avg-])>*:nth-of-type(22n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(22n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(22)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(22)~* {
        display: none;
      }
    }
  ._xs-23 {
      --_lyt-group: 23;
      &:where(._row[class*=_avg-])>*:nth-of-type(23n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(23n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(23)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(23)~* {
        display: none;
      }
    }
  ._xs-24 {
      --_lyt-group: 24;
      &:where(._row[class*=_avg-])>*:nth-of-type(24n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(24n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(24)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(24)~* {
        display: none;
      }
    }
  &:where([class*=_hh-])>[class*=_flex] {
    --_flex-grow: 0;
    --_flex-shrink: 0;
  }
  ._row:where([class*=_hh-]),
  ._col:where([class*=_hh-]) {
    flex-wrap: wrap;
  }
  ._row:where([class*=_hh-])>*:is([class*=_flex]),
  ._col:where([class*=_hh-])>*:is([class*=_flex]) {
    --_flex-basis: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
  }
  ._row:where([class*=_hh-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own]) {
      width: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._col:where([class*=_hh-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own-]) {
      height: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._masonry {
    &:where(._hh-1) {
      --_msnry-cols: 1;
    }
    &:where(._hh-2) {
      --_msnry-cols: 2;
    }
    &:where(._hh-3) {
      --_msnry-cols: 3;
    }
    &:where(._hh-4) {
      --_msnry-cols: 4;
    }
    &:where(._hh-5) {
      --_msnry-cols: 5;
    }
    &:where(._hh-6) {
      --_msnry-cols: 6;
    }
    &:where(._hh-7) {
      --_msnry-cols: 7;
    }
    &:where(._hh-8) {
      --_msnry-cols: 8;
    }
    &:where(._hh-9) {
      --_msnry-cols: 9;
    }
    &:where(._hh-10) {
      --_msnry-cols: 10;
    }
    &:where(._hh-11) {
      --_msnry-cols: 11;
    }
    &:where(._hh-12) {
      --_msnry-cols: 12;
    }
    &:where(._hh-13) {
      --_msnry-cols: 13;
    }
    &:where(._hh-14) {
      --_msnry-cols: 14;
    }
    &:where(._hh-15) {
      --_msnry-cols: 15;
    }
    &:where(._hh-16) {
      --_msnry-cols: 16;
    }
    &:where(._hh-17) {
      --_msnry-cols: 17;
    }
    &:where(._hh-18) {
      --_msnry-cols: 18;
    }
    &:where(._hh-19) {
      --_msnry-cols: 19;
    }
    &:where(._hh-20) {
      --_msnry-cols: 20;
    }
    &:where(._hh-21) {
      --_msnry-cols: 21;
    }
    &:where(._hh-22) {
      --_msnry-cols: 22;
    }
    &:where(._hh-23) {
      --_msnry-cols: 23;
    }
    &:where(._hh-24) {
      --_msnry-cols: 24;
    }
  }
  ._scroller {
    height: var(--_hh-h);
    width: var(--_hh-w);
  }
  table {
    width: var(--_hh-w);
  }
}
/* Tablet device (xs+sm+md) */
@media (min-width: 600px) and (max-width: calc(900px - 1px)) and (orientation: portrait),
(min-width: 900px) and (max-width: calc(1200px - 1px)),
(min-width: 1200px) and (max-width:calc(1536px - 1px)) and (hover:none) {
  :root {
    --_fs-root: clamp(calc(1px*var(--_num-root)*16/14), 1vw, 12.85714px);
    --_screen: tb;
  }
  *._split-tb,
  ._row:where(._split-tb),
  ._col:where(._split-tb),
  ._grid:where(._split-tb) {
    display: block;
    >* {
      width: auto;
      height: auto;
      &:where(:not(:last-child)) {
        margin-block-end: var(--_lyt-g);
      }
    }
  }
  ._hide-tb {
    display: none;
  }
  ._grid[class*=_tb] {
    --_lyt-avg: var(--_lyt-group);
  }
  ._xs-1 {
      --_lyt-group: 1;
      &:where(._row[class*=_avg-])>*:nth-of-type(1n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(1n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(1)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(1)~* {
        display: none;
      }
    }
  ._xs-2 {
      --_lyt-group: 2;
      &:where(._row[class*=_avg-])>*:nth-of-type(2n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(2n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(2)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(2)~* {
        display: none;
      }
    }
  ._xs-3 {
      --_lyt-group: 3;
      &:where(._row[class*=_avg-])>*:nth-of-type(3n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(3n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(3)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(3)~* {
        display: none;
      }
    }
  ._xs-4 {
      --_lyt-group: 4;
      &:where(._row[class*=_avg-])>*:nth-of-type(4n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(4n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(4)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(4)~* {
        display: none;
      }
    }
  ._xs-5 {
      --_lyt-group: 5;
      &:where(._row[class*=_avg-])>*:nth-of-type(5n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(5n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(5)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(5)~* {
        display: none;
      }
    }
  ._xs-6 {
      --_lyt-group: 6;
      &:where(._row[class*=_avg-])>*:nth-of-type(6n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(6n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(6)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(6)~* {
        display: none;
      }
    }
  ._xs-7 {
      --_lyt-group: 7;
      &:where(._row[class*=_avg-])>*:nth-of-type(7n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(7n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(7)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(7)~* {
        display: none;
      }
    }
  ._xs-8 {
      --_lyt-group: 8;
      &:where(._row[class*=_avg-])>*:nth-of-type(8n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(8n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(8)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(8)~* {
        display: none;
      }
    }
  ._xs-9 {
      --_lyt-group: 9;
      &:where(._row[class*=_avg-])>*:nth-of-type(9n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(9n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(9)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(9)~* {
        display: none;
      }
    }
  ._xs-10 {
      --_lyt-group: 10;
      &:where(._row[class*=_avg-])>*:nth-of-type(10n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(10n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(10)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(10)~* {
        display: none;
      }
    }
  ._xs-11 {
      --_lyt-group: 11;
      &:where(._row[class*=_avg-])>*:nth-of-type(11n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(11n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(11)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(11)~* {
        display: none;
      }
    }
  ._xs-12 {
      --_lyt-group: 12;
      &:where(._row[class*=_avg-])>*:nth-of-type(12n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(12n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(12)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(12)~* {
        display: none;
      }
    }
  ._xs-13 {
      --_lyt-group: 13;
      &:where(._row[class*=_avg-])>*:nth-of-type(13n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(13n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(13)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(13)~* {
        display: none;
      }
    }
  ._xs-14 {
      --_lyt-group: 14;
      &:where(._row[class*=_avg-])>*:nth-of-type(14n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(14n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(14)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(14)~* {
        display: none;
      }
    }
  ._xs-15 {
      --_lyt-group: 15;
      &:where(._row[class*=_avg-])>*:nth-of-type(15n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(15n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(15)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(15)~* {
        display: none;
      }
    }
  ._xs-16 {
      --_lyt-group: 16;
      &:where(._row[class*=_avg-])>*:nth-of-type(16n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(16n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(16)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(16)~* {
        display: none;
      }
    }
  ._xs-17 {
      --_lyt-group: 17;
      &:where(._row[class*=_avg-])>*:nth-of-type(17n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(17n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(17)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(17)~* {
        display: none;
      }
    }
  ._xs-18 {
      --_lyt-group: 18;
      &:where(._row[class*=_avg-])>*:nth-of-type(18n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(18n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(18)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(18)~* {
        display: none;
      }
    }
  ._xs-19 {
      --_lyt-group: 19;
      &:where(._row[class*=_avg-])>*:nth-of-type(19n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(19n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(19)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(19)~* {
        display: none;
      }
    }
  ._xs-20 {
      --_lyt-group: 20;
      &:where(._row[class*=_avg-])>*:nth-of-type(20n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(20n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(20)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(20)~* {
        display: none;
      }
    }
  ._xs-21 {
      --_lyt-group: 21;
      &:where(._row[class*=_avg-])>*:nth-of-type(21n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(21n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(21)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(21)~* {
        display: none;
      }
    }
  ._xs-22 {
      --_lyt-group: 22;
      &:where(._row[class*=_avg-])>*:nth-of-type(22n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(22n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(22)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(22)~* {
        display: none;
      }
    }
  ._xs-23 {
      --_lyt-group: 23;
      &:where(._row[class*=_avg-])>*:nth-of-type(23n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(23n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(23)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(23)~* {
        display: none;
      }
    }
  ._xs-24 {
      --_lyt-group: 24;
      &:where(._row[class*=_avg-])>*:nth-of-type(24n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(24n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(24)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(24)~* {
        display: none;
      }
    }
  &:where([class*=_tb-])>[class*=_flex] {
    --_flex-grow: 0;
    --_flex-shrink: 0;
  }
  ._row:where([class*=_tb-]),
  ._col:where([class*=_tb-]) {
    flex-wrap: wrap;
  }
  ._row:where([class*=_tb-])>*:is([class*=_flex]),
  ._col:where([class*=_tb-])>*:is([class*=_flex]) {
    --_flex-basis: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
  }
  ._row:where([class*=_tb-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own]) {
      width: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._col:where([class*=_tb-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own-]) {
      height: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._masonry {
    &:where(._tb-1) {
      --_msnry-cols: 1;
    }
    &:where(._tb-2) {
      --_msnry-cols: 2;
    }
    &:where(._tb-3) {
      --_msnry-cols: 3;
    }
    &:where(._tb-4) {
      --_msnry-cols: 4;
    }
    &:where(._tb-5) {
      --_msnry-cols: 5;
    }
    &:where(._tb-6) {
      --_msnry-cols: 6;
    }
    &:where(._tb-7) {
      --_msnry-cols: 7;
    }
    &:where(._tb-8) {
      --_msnry-cols: 8;
    }
    &:where(._tb-9) {
      --_msnry-cols: 9;
    }
    &:where(._tb-10) {
      --_msnry-cols: 10;
    }
    &:where(._tb-11) {
      --_msnry-cols: 11;
    }
    &:where(._tb-12) {
      --_msnry-cols: 12;
    }
    &:where(._tb-13) {
      --_msnry-cols: 13;
    }
    &:where(._tb-14) {
      --_msnry-cols: 14;
    }
    &:where(._tb-15) {
      --_msnry-cols: 15;
    }
    &:where(._tb-16) {
      --_msnry-cols: 16;
    }
    &:where(._tb-17) {
      --_msnry-cols: 17;
    }
    &:where(._tb-18) {
      --_msnry-cols: 18;
    }
    &:where(._tb-19) {
      --_msnry-cols: 19;
    }
    &:where(._tb-20) {
      --_msnry-cols: 20;
    }
    &:where(._tb-21) {
      --_msnry-cols: 21;
    }
    &:where(._tb-22) {
      --_msnry-cols: 22;
    }
    &:where(._tb-23) {
      --_msnry-cols: 23;
    }
    &:where(._tb-24) {
      --_msnry-cols: 24;
    }
  }
  ._scroller {
    height: var(--_tb-h);
    width: var(--_tb-w);
  }
  table {
    width: var(--_tb-w);
}
}
/*Destop device(lg+xl+xxl) */
@media (min-width: 1200px) and (max-width:calc(1536px - 1px)) and (hover:hover),
(min-width: 1536px) {
  :root {
    --_ff-body: 
    "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif,
    "PT Sans", Tahoma,
    "Amiri", "Noto Naskh Arabic", "Arial", "Tahoma",
    "Microsoft YaHei", "微软雅黑",
     "PingFang TC", "Microsoft JhengHei",
    "Yu Gothic", "Meiryo",
    "Malgun Gothic",
    sans-serif;
    --_fs-root: calc(1px*var(--_num-root));
    --_l-text: 20%;
    --_screen: dt;
    --_isnarrow: 0;
    --_device-coef: -1;
  }
  /*Beautify rolling bar (only pc)*/
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: transparent;
  }
  ::-webkit-scrollbar-track {
    background-color: hsla(var(--_h-text), var(--_s-text), var(--_l-text), 0.04);
  }
  ::-webkit-scrollbar-thumb {
    background-color: hsla(var(--_h-text), var(--_s-text), var(--_l-text), 0.2);
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: hsla(var(--_h-text), var(--_s-text), var(--_l-text), 0.4);
  }
  ::-webkit-scrollbar-thumb:active {
    background-color: hsla(var(--_h-text), var(--_s-text), var(--_l-text), 0.6);
  }
  ::-webkit-scrollbar-corner {
    background-color: hsla(var(--_h-text), var(--_s-text), var(--_l-text), 0.04);
  }
  @-moz-document url-prefix() {
    * {
      scrollbar-gutter: auto;
      scrollbar-width: thin;
    }
  }
  ._hide-dt {
    display: none;
  }
  OC-BR {
    &[size=md] {
      --_br-coef: 1;
    }
    &[size=lg] {
      --_br-coef: 2;
    }
    &[size=xl] {
      --_br-coef: 3;
    }
    &[size=xxl] {
      --_br-coef: 4;
    }
  }
  OC-BC {
    &[size=md] {
      --_br-coef: 1;
    }
    &[size=lg] {
      --_br-coef: 2;
    }
    &[size=xl] {
      --_br-coef: 3;
    }
    &[size=xxl] {
      --_br-coef: 4;
    }
  }
  ._p-md {
    --_p-coef: 1;
  }
  ._p-lg {
    --_p-coef: 2;
  }
  ._p-xl {
    --_p-coef: 3;
  }
  ._p-xxl {
    --_p-coef: 4;
  }
  ._m-md {
    --_m-coef: 1;
  }
  ._m-lg {
    --_m-coef: 2;
  }
  ._m-xl {
    --_m-coef: 3;
  }
  ._m-xxl {
    --_m-coef: 4;
  }
  OC-DIVIDER {
    &[break=md] {
      --_div-g-coef: 1;
    }
    &[break=lg] {
      --_div-g-coef: 2;
    }
    &[break=xl] {
      --_div-g-coef: 3;
    }
    &[break=xxl] {
      --_div-g-coef: 4;
    }
  }
  OC-LINE {
    &[break=md] {
      --_line-g-coef: 1;
    }
    &[break=lg] {
      --_line-g-coef: 2;
    }
    &[break=xl] {
      --_line-g-coef: 3;
    }
    &[break=xxl] {
      --_line-g-coef: 4;
    }
  }
  *._split-dt,
  ._row:where(._split-dt),
  ._col:where(._split-dt),
  ._grid:where(._split-dt) {
    display: block;
    >* {
      width: auto;
      height: auto;
      &:where(:not(:last-child)) {
        margin-block-end: var(--_lyt-g);
      }
    }
  }
  ._grid[class*=_dt-] {
    --_lyt-avg: var(--_lyt-group);
  }
  ._dt-1 {
      --_lyt-group: 1;
      &:where(._row[class*=_avg-])>*:nth-of-type(1n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(1n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(1)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(1)~* {
        display: none;
      }
    }
  ._dt-2 {
      --_lyt-group: 2;
      &:where(._row[class*=_avg-])>*:nth-of-type(2n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(2n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(2)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(2)~* {
        display: none;
      }
    }
  ._dt-3 {
      --_lyt-group: 3;
      &:where(._row[class*=_avg-])>*:nth-of-type(3n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(3n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(3)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(3)~* {
        display: none;
      }
    }
  ._dt-4 {
      --_lyt-group: 4;
      &:where(._row[class*=_avg-])>*:nth-of-type(4n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(4n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(4)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(4)~* {
        display: none;
      }
    }
  ._dt-5 {
      --_lyt-group: 5;
      &:where(._row[class*=_avg-])>*:nth-of-type(5n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(5n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(5)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(5)~* {
        display: none;
      }
    }
  ._dt-6 {
      --_lyt-group: 6;
      &:where(._row[class*=_avg-])>*:nth-of-type(6n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(6n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(6)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(6)~* {
        display: none;
      }
    }
  ._dt-7 {
      --_lyt-group: 7;
      &:where(._row[class*=_avg-])>*:nth-of-type(7n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(7n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(7)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(7)~* {
        display: none;
      }
    }
  ._dt-8 {
      --_lyt-group: 8;
      &:where(._row[class*=_avg-])>*:nth-of-type(8n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(8n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(8)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(8)~* {
        display: none;
      }
    }
  ._dt-9 {
      --_lyt-group: 9;
      &:where(._row[class*=_avg-])>*:nth-of-type(9n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(9n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(9)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(9)~* {
        display: none;
      }
    }
  ._dt-10 {
      --_lyt-group: 10;
      &:where(._row[class*=_avg-])>*:nth-of-type(10n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(10n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(10)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(10)~* {
        display: none;
      }
    }
  ._dt-11 {
      --_lyt-group: 11;
      &:where(._row[class*=_avg-])>*:nth-of-type(11n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(11n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(11)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(11)~* {
        display: none;
      }
    }
  ._dt-12 {
      --_lyt-group: 12;
      &:where(._row[class*=_avg-])>*:nth-of-type(12n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(12n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(12)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(12)~* {
        display: none;
      }
    }
  ._dt-13 {
      --_lyt-group: 13;
      &:where(._row[class*=_avg-])>*:nth-of-type(13n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(13n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(13)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(13)~* {
        display: none;
      }
    }
  ._dt-14 {
      --_lyt-group: 14;
      &:where(._row[class*=_avg-])>*:nth-of-type(14n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(14n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(14)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(14)~* {
        display: none;
      }
    }
  ._dt-15 {
      --_lyt-group: 15;
      &:where(._row[class*=_avg-])>*:nth-of-type(15n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(15n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(15)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(15)~* {
        display: none;
      }
    }
  ._dt-16 {
      --_lyt-group: 16;
      &:where(._row[class*=_avg-])>*:nth-of-type(16n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(16n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(16)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(16)~* {
        display: none;
      }
    }
  ._dt-17 {
      --_lyt-group: 17;
      &:where(._row[class*=_avg-])>*:nth-of-type(17n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(17n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(17)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(17)~* {
        display: none;
      }
    }
  ._dt-18 {
      --_lyt-group: 18;
      &:where(._row[class*=_avg-])>*:nth-of-type(18n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(18n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(18)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(18)~* {
        display: none;
      }
    }
  ._dt-19 {
      --_lyt-group: 19;
      &:where(._row[class*=_avg-])>*:nth-of-type(19n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(19n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(19)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(19)~* {
        display: none;
      }
    }
  ._dt-20 {
      --_lyt-group: 20;
      &:where(._row[class*=_avg-])>*:nth-of-type(20n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(20n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(20)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(20)~* {
        display: none;
      }
    }
  ._dt-21 {
      --_lyt-group: 21;
      &:where(._row[class*=_avg-])>*:nth-of-type(21n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(21n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(21)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(21)~* {
        display: none;
      }
    }
  ._dt-22 {
      --_lyt-group: 22;
      &:where(._row[class*=_avg-])>*:nth-of-type(22n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(22n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(22)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(22)~* {
        display: none;
      }
    }
  ._dt-23 {
      --_lyt-group: 23;
      &:where(._row[class*=_avg-])>*:nth-of-type(23n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(23n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(23)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(23)~* {
        display: none;
      }
    }
  ._dt-24 {
      --_lyt-group: 24;
      &:where(._row[class*=_avg-])>*:nth-of-type(24n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(24n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(24)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(24)~* {
        display: none;
      }
    }
  &:where([class*=_dt-])>[class*=_flex] {
    --_flex-grow: 0;
    --_flex-shrink: 0;
  }
  ._row:where([class*=_dt-]),
  ._col:where([class*=_dt-]) {
    flex-wrap: wrap;
  }
  ._row:where([class*=_dt-])>*:is([class*=_flex]),
  ._col:where([class*=_dt-])>*:is([class*=_flex]) {
    --_flex-basis: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
  }
  ._row:where([class*=_dt-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own]) {
      width: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._col:where([class*=_dt-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own-]) {
      height: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  [class*=_grid],
  [class*=_row],
  [class*=_col] {
    &:where(._g-md) {
      --_lyt-g-coef: 1;
    }
    &:where(._g-lg) {
      --_lyt-g-coef: 2;
    }
    &:where(._g-xl) {
      --_lyt-g-coef: 3;
    }
    &:where(._g-xxl) {
      --_lyt-g-coef: 4;
    }
  }
  ._masonry {
    --_msnry-cols: 4;
    &:where(._dt-1) {
      --_msnry-cols: 1;
    }
    &:where(._dt-2) {
      --_msnry-cols: 2;
    }
    &:where(._dt-3) {
      --_msnry-cols: 3;
    }
    &:where(._dt-4) {
      --_msnry-cols: 4;
    }
    &:where(._dt-5) {
      --_msnry-cols: 5;
    }
    &:where(._dt-6) {
      --_msnry-cols: 6;
    }
    &:where(._dt-7) {
      --_msnry-cols: 7;
    }
    &:where(._dt-8) {
      --_msnry-cols: 8;
    }
    &:where(._dt-9) {
      --_msnry-cols: 9;
    }
    &:where(._dt-10) {
      --_msnry-cols: 10;
    }
    &:where(._dt-11) {
      --_msnry-cols: 11;
    }
    &:where(._dt-12) {
      --_msnry-cols: 12;
    }
    &:where(._dt-13) {
      --_msnry-cols: 13;
    }
    &:where(._dt-14) {
      --_msnry-cols: 14;
    }
    &:where(._dt-15) {
      --_msnry-cols: 15;
    }
    &:where(._dt-16) {
      --_msnry-cols: 16;
    }
    &:where(._dt-17) {
      --_msnry-cols: 17;
    }
    &:where(._dt-18) {
      --_msnry-cols: 18;
    }
    &:where(._dt-19) {
      --_msnry-cols: 19;
    }
    &:where(._dt-20) {
      --_msnry-cols: 20;
    }
    &:where(._dt-21) {
      --_msnry-cols: 21;
    }
    &:where(._dt-22) {
      --_msnry-cols: 22;
    }
    &:where(._dt-23) {
      --_msnry-cols: 23;
    }
    &:where(._dt-24) {
      --_msnry-cols: 24;
    }
  }
  ._scroller {
    height: var(--_dt-h);
    width: var(--_dt-w);
  }
  table {
    width: var(--_dt-w);
}
  article {
    --_ul-lh: var(--_lh-lead);
    --_dl-lh: var(--_lh-lead);
    font-size: var(--_rem-lead);
    line-height: var(--_lh-lead);
}
}
/* xxs->Phone (<600 | <900) */
/*
 *Last modified: 2025-07-05 07:31:16
 */
@media (max-width: calc(600px - 1px)),
(min-width: 600px) and (max-width: calc(900px - 1px)) and (orientation:landscape) {
  :root {
    --_screen: xxs;
  }
  *._split,
  ._row:where(._split),
  ._col:where(._split),
  ._grid:where(._split),
  *._split-xxs,
  ._row:where(._split-xxs),
  ._col:where(._split-xxs),
  ._grid:where(._split-xxs) {
    display: block;
    >* {
      width: auto;
      height: auto;
      &:where(:not(:last-child)) {
        margin-block-end: var(--_lyt-g);
      }
    }
  }
  [class*=_container]:where(:not(._container-full)) {
    &:where(._xxs-full) {
      width: 100%;
    }
  }
  ._datetime {
    --_date-label-h: calc(var(--_rem-display) - var(--_rem-min));
    [rep=main] [rep=body] {
      min-height: 24rem;
    }
    [panel=year] [rep=content] {
      margin: calc((3.8rem - var(--_date-label-h))/2) 0;
    }
    [panel=month] [rep=content] {
      margin: calc((5.6rem - var(--_date-label-h))/2) 0;
    }
    [panel=daytime] [rep=list] {
      margin: 0;
    }
    [panel=daytime] [rep=list]>* {
      height: calc(var(--_rem-display)*6);
    }
  }
  ._hide-xxs {
    display: none;
  }
  ._grid[class*=_xxs-] {
    --_lyt-avg: var(--_lyt-group);
  }
  ._xxs-1 {
      --_lyt-group: 1;
      &:where(._row[class*=_avg-])>*:nth-of-type(1n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(1n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(1)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(1)~* {
        display: none;
      }
    }
  ._xxs-2 {
      --_lyt-group: 2;
      &:where(._row[class*=_avg-])>*:nth-of-type(2n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(2n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(2)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(2)~* {
        display: none;
      }
    }
  ._xxs-3 {
      --_lyt-group: 3;
      &:where(._row[class*=_avg-])>*:nth-of-type(3n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(3n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(3)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(3)~* {
        display: none;
      }
    }
  ._xxs-4 {
      --_lyt-group: 4;
      &:where(._row[class*=_avg-])>*:nth-of-type(4n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(4n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(4)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(4)~* {
        display: none;
      }
    }
  ._xxs-5 {
      --_lyt-group: 5;
      &:where(._row[class*=_avg-])>*:nth-of-type(5n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(5n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(5)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(5)~* {
        display: none;
      }
    }
  ._xxs-6 {
      --_lyt-group: 6;
      &:where(._row[class*=_avg-])>*:nth-of-type(6n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(6n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(6)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(6)~* {
        display: none;
      }
    }
  ._xxs-7 {
      --_lyt-group: 7;
      &:where(._row[class*=_avg-])>*:nth-of-type(7n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(7n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(7)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(7)~* {
        display: none;
      }
    }
  ._xxs-8 {
      --_lyt-group: 8;
      &:where(._row[class*=_avg-])>*:nth-of-type(8n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(8n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(8)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(8)~* {
        display: none;
      }
    }
  ._xxs-9 {
      --_lyt-group: 9;
      &:where(._row[class*=_avg-])>*:nth-of-type(9n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(9n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(9)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(9)~* {
        display: none;
      }
    }
  ._xxs-10 {
      --_lyt-group: 10;
      &:where(._row[class*=_avg-])>*:nth-of-type(10n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(10n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(10)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(10)~* {
        display: none;
      }
    }
  ._xxs-11 {
      --_lyt-group: 11;
      &:where(._row[class*=_avg-])>*:nth-of-type(11n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(11n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(11)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(11)~* {
        display: none;
      }
    }
  ._xxs-12 {
      --_lyt-group: 12;
      &:where(._row[class*=_avg-])>*:nth-of-type(12n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(12n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(12)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(12)~* {
        display: none;
      }
    }
  ._xxs-13 {
      --_lyt-group: 13;
      &:where(._row[class*=_avg-])>*:nth-of-type(13n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(13n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(13)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(13)~* {
        display: none;
      }
    }
  ._xxs-14 {
      --_lyt-group: 14;
      &:where(._row[class*=_avg-])>*:nth-of-type(14n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(14n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(14)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(14)~* {
        display: none;
      }
    }
  ._xxs-15 {
      --_lyt-group: 15;
      &:where(._row[class*=_avg-])>*:nth-of-type(15n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(15n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(15)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(15)~* {
        display: none;
      }
    }
  ._xxs-16 {
      --_lyt-group: 16;
      &:where(._row[class*=_avg-])>*:nth-of-type(16n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(16n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(16)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(16)~* {
        display: none;
      }
    }
  ._xxs-17 {
      --_lyt-group: 17;
      &:where(._row[class*=_avg-])>*:nth-of-type(17n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(17n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(17)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(17)~* {
        display: none;
      }
    }
  ._xxs-18 {
      --_lyt-group: 18;
      &:where(._row[class*=_avg-])>*:nth-of-type(18n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(18n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(18)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(18)~* {
        display: none;
      }
    }
  ._xxs-19 {
      --_lyt-group: 19;
      &:where(._row[class*=_avg-])>*:nth-of-type(19n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(19n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(19)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(19)~* {
        display: none;
      }
    }
  ._xxs-20 {
      --_lyt-group: 20;
      &:where(._row[class*=_avg-])>*:nth-of-type(20n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(20n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(20)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(20)~* {
        display: none;
      }
    }
  ._xxs-21 {
      --_lyt-group: 21;
      &:where(._row[class*=_avg-])>*:nth-of-type(21n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(21n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(21)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(21)~* {
        display: none;
      }
    }
  ._xxs-22 {
      --_lyt-group: 22;
      &:where(._row[class*=_avg-])>*:nth-of-type(22n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(22n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(22)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(22)~* {
        display: none;
      }
    }
  ._xxs-23 {
      --_lyt-group: 23;
      &:where(._row[class*=_avg-])>*:nth-of-type(23n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(23n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(23)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(23)~* {
        display: none;
      }
    }
  ._xxs-24 {
      --_lyt-group: 24;
      &:where(._row[class*=_avg-])>*:nth-of-type(24n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(24n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(24)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(24)~* {
        display: none;
      }
    }
  &:where([class*=_xxs-])>[class*=_flex] {
    --_flex-grow: 0;
    --_flex-shrink: 0;
  }
  ._row:where([class*=_xxs-]),
  ._col:where([class*=_xxs-]) {
    flex-wrap: wrap;
  }
  ._row:where([class*=_xxs-])>*:is([class*=_flex]),
  ._col:where([class*=_xxs-])>*:is([class*=_flex]) {
    --_flex-basis: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
  }
  ._row:where([class*=_xxs-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own]) {
      width: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._col:where([class*=_xxs-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own-]) {
      height: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._row:is(._g-md, ._g-lg, ._g-xl, ._g-xxl),
  ._col:is(._g-md, ._g-lg, ._g-xl, ._g-xxl) {
    --_lyt-g: var(--_rem-body);
  }
  ._grid:is(._g-md, ._g-lg, ._g-xl, ._g-xxl) {
    --_lyt-g: var(--_rem-body);
  }
  ._grid:where(.wall):is(._g-3, ._g, ._g-xxs, ._g-xs, ._g-sm, ._g-md, ._g-lg, ._g-xl, ._g-xxl) {
    --_lyt-g: min(--_lyt-gap, 2px);
  }
  ._post {
    [rep=poster] {
      height: calc(var(--_rem-list)*3);
      OC-BADGE {
        inset-inline-start: .4rem;
        inset-block-start: .4rem;
      }
    }
    [rep=byline],
    [rep=byline]>* {
      color: var(--_c-caption);
      font-size: 1rem;
    }
    [rep=type] {
      font-size: 1.0rem;
    }
    &._split {
      display: block;
      ._post-body {
        width: auto;
      }
      [rep=poster] {
        width: 100%;
        height: 16.0rem;
        margin-inline-start: 0;
        margin-inline-end: 0;
      }
      [rep=poster]:nth-child(1) {
        margin-block-end: var(--_rem-space);
      }
      ._post-body~[rep=poster] {
        margin-block-start: var(--_rem-space);
      }
    }
    [rep=posters]:nth-child(1) {
      margin-block-end: var(--_rem-space);
    }
    ._post-body~[rep=posters] {
      margin-block-start: var(--_rem-space);
    }
  }
  ._comment ._comment-body {
    --_cmt-start-w: var(--_px-display);
    --_cmt-left-m: var(--_px-space);
  }
  ._comment ._comment-body>._comment-item>._comment-wrap>._comment-right {
    --_cmt-start-w: var(--_px-list);
  }
  ._scroller {
    height: var(--_xxs-h);
    width: var(--_xxs-w);
  }
  table {
    width: var(--_xxs-w);
  }
}
/* xs->Tablet */
@media (min-width: 600px) and (max-width: calc(900px - 1px)) and (orientation: portrait) {
  :root {
    --_screen: xs;
  }
  *._split-xs,
  ._row:where(._split-xs),
  ._col:where(._split-xs),
  ._grid:where(._split-xs) {
    display: block;
    >* {
      width: auto;
      height: auto;
      &:where(:not(:last-child)) {
        margin-block-end: var(--_lyt-g);
      }
    }
  }
  [class*=_container]:where(:not(._container-full)) {
    &:where(:not(._xs-full)) {
      --_container-w: var(--_xs-w, var(--_container-resp));
      --_container-resp: var(--_w-xs);
    }
    &:where(._xs-full) {
      width: 100%;
    }
  }
  ._hide-xs {
    display: none;
  }
  ._grid[class*=_xs] {
    --_lyt-avg: var(--_lyt-group);
  }
  ._xs-1 {
      --_lyt-group: 1;
      &:where(._row[class*=_avg-])>*:nth-of-type(1n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(1n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(1)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(1)~* {
        display: none;
      }
    }
  ._xs-2 {
      --_lyt-group: 2;
      &:where(._row[class*=_avg-])>*:nth-of-type(2n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(2n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(2)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(2)~* {
        display: none;
      }
    }
  ._xs-3 {
      --_lyt-group: 3;
      &:where(._row[class*=_avg-])>*:nth-of-type(3n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(3n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(3)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(3)~* {
        display: none;
      }
    }
  ._xs-4 {
      --_lyt-group: 4;
      &:where(._row[class*=_avg-])>*:nth-of-type(4n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(4n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(4)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(4)~* {
        display: none;
      }
    }
  ._xs-5 {
      --_lyt-group: 5;
      &:where(._row[class*=_avg-])>*:nth-of-type(5n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(5n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(5)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(5)~* {
        display: none;
      }
    }
  ._xs-6 {
      --_lyt-group: 6;
      &:where(._row[class*=_avg-])>*:nth-of-type(6n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(6n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(6)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(6)~* {
        display: none;
      }
    }
  ._xs-7 {
      --_lyt-group: 7;
      &:where(._row[class*=_avg-])>*:nth-of-type(7n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(7n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(7)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(7)~* {
        display: none;
      }
    }
  ._xs-8 {
      --_lyt-group: 8;
      &:where(._row[class*=_avg-])>*:nth-of-type(8n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(8n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(8)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(8)~* {
        display: none;
      }
    }
  ._xs-9 {
      --_lyt-group: 9;
      &:where(._row[class*=_avg-])>*:nth-of-type(9n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(9n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(9)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(9)~* {
        display: none;
      }
    }
  ._xs-10 {
      --_lyt-group: 10;
      &:where(._row[class*=_avg-])>*:nth-of-type(10n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(10n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(10)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(10)~* {
        display: none;
      }
    }
  ._xs-11 {
      --_lyt-group: 11;
      &:where(._row[class*=_avg-])>*:nth-of-type(11n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(11n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(11)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(11)~* {
        display: none;
      }
    }
  ._xs-12 {
      --_lyt-group: 12;
      &:where(._row[class*=_avg-])>*:nth-of-type(12n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(12n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(12)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(12)~* {
        display: none;
      }
    }
  ._xs-13 {
      --_lyt-group: 13;
      &:where(._row[class*=_avg-])>*:nth-of-type(13n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(13n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(13)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(13)~* {
        display: none;
      }
    }
  ._xs-14 {
      --_lyt-group: 14;
      &:where(._row[class*=_avg-])>*:nth-of-type(14n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(14n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(14)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(14)~* {
        display: none;
      }
    }
  ._xs-15 {
      --_lyt-group: 15;
      &:where(._row[class*=_avg-])>*:nth-of-type(15n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(15n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(15)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(15)~* {
        display: none;
      }
    }
  ._xs-16 {
      --_lyt-group: 16;
      &:where(._row[class*=_avg-])>*:nth-of-type(16n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(16n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(16)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(16)~* {
        display: none;
      }
    }
  ._xs-17 {
      --_lyt-group: 17;
      &:where(._row[class*=_avg-])>*:nth-of-type(17n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(17n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(17)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(17)~* {
        display: none;
      }
    }
  ._xs-18 {
      --_lyt-group: 18;
      &:where(._row[class*=_avg-])>*:nth-of-type(18n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(18n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(18)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(18)~* {
        display: none;
      }
    }
  ._xs-19 {
      --_lyt-group: 19;
      &:where(._row[class*=_avg-])>*:nth-of-type(19n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(19n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(19)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(19)~* {
        display: none;
      }
    }
  ._xs-20 {
      --_lyt-group: 20;
      &:where(._row[class*=_avg-])>*:nth-of-type(20n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(20n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(20)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(20)~* {
        display: none;
      }
    }
  ._xs-21 {
      --_lyt-group: 21;
      &:where(._row[class*=_avg-])>*:nth-of-type(21n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(21n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(21)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(21)~* {
        display: none;
      }
    }
  ._xs-22 {
      --_lyt-group: 22;
      &:where(._row[class*=_avg-])>*:nth-of-type(22n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(22n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(22)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(22)~* {
        display: none;
      }
    }
  ._xs-23 {
      --_lyt-group: 23;
      &:where(._row[class*=_avg-])>*:nth-of-type(23n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(23n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(23)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(23)~* {
        display: none;
      }
    }
  ._xs-24 {
      --_lyt-group: 24;
      &:where(._row[class*=_avg-])>*:nth-of-type(24n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(24n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(24)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(24)~* {
        display: none;
      }
    }
  &:where([class*=_xs-])>[class*=_flex] {
    --_flex-grow: 0;
    --_flex-shrink: 0;
  }
  ._row:where([class*=_xs-]),
  ._col:where([class*=_xs-]) {
    flex-wrap: wrap;
  }
  ._row:where([class*=_xs-])>*:is([class*=_flex]),
  ._col:where([class*=_xs-])>*:is([class*=_flex]) {
    --_flex-basis: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
  }
  ._row:where([class*=_xs-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own]) {
      width: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._col:where([class*=_xs-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own-]) {
      height: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
    ._masonry {
      &:where(._xs-1) {
      --_msnry-cols: 1;
    }
      &:where(._xs-2) {
      --_msnry-cols: 2;
    }
      &:where(._xs-3) {
      --_msnry-cols: 3;
    }
      &:where(._xs-4) {
      --_msnry-cols: 4;
    }
      &:where(._xs-5) {
      --_msnry-cols: 5;
    }
      &:where(._xs-6) {
      --_msnry-cols: 6;
    }
      &:where(._xs-7) {
      --_msnry-cols: 7;
    }
      &:where(._xs-8) {
      --_msnry-cols: 8;
    }
      &:where(._xs-9) {
      --_msnry-cols: 9;
    }
      &:where(._xs-10) {
      --_msnry-cols: 10;
    }
      &:where(._xs-11) {
      --_msnry-cols: 11;
    }
      &:where(._xs-12) {
      --_msnry-cols: 12;
    }
      &:where(._xs-13) {
      --_msnry-cols: 13;
    }
      &:where(._xs-14) {
      --_msnry-cols: 14;
    }
      &:where(._xs-15) {
      --_msnry-cols: 15;
    }
      &:where(._xs-16) {
      --_msnry-cols: 16;
    }
      &:where(._xs-17) {
      --_msnry-cols: 17;
    }
      &:where(._xs-18) {
      --_msnry-cols: 18;
    }
      &:where(._xs-19) {
      --_msnry-cols: 19;
    }
      &:where(._xs-20) {
      --_msnry-cols: 20;
    }
      &:where(._xs-21) {
      --_msnry-cols: 21;
    }
      &:where(._xs-22) {
      --_msnry-cols: 22;
    }
      &:where(._xs-23) {
      --_msnry-cols: 23;
    }
      &:where(._xs-24) {
      --_msnry-cols: 24;
    }
    }
  ._scroller {
    height: var(--_xxs-h);
    width: var(--_xs-w);
  }
  table {
    width: var(--_xs-w);
}
}
/* sm->Tablet & flip */
@media (min-width: 900px) and (max-width: calc(1200px - 1px)) {
  :root {
    --_screen: sm;
  }
  *._split-sm,
  ._row:where(._split-sm),
  ._col:where(._split-sm),
  ._grid:where(._split-sm) {
    display: block;
    >* {
      width: auto;
      height: auto;
      &:where(:not(:last-child)) {
        margin-block-end: var(--_lyt-g);
      }
    }
  }
  [class*=_container]:where(:not(._container-full)) {
    &:where(:not(._sm-full)) {
      --_container-w: var(--_sm-w,var(--_container-resp));
      --_container-resp: var(--_w-sm);
    }
    &:where(._sm-full) {
      width: 100%;
    }
}
  ._hide-sm {
    display: none;
  }
  ._grid[class*=_sm-] {
    --_lyt-avg: var(--_lyt-group);
  }
  ._sm-1 {
      --_lyt-group: 1;
      &:where(._row[class*=_avg-])>*:nth-of-type(1n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(1n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(1)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(1)~* {
        display: none;
      }
    }
  ._sm-2 {
      --_lyt-group: 2;
      &:where(._row[class*=_avg-])>*:nth-of-type(2n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(2n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(2)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(2)~* {
        display: none;
      }
    }
  ._sm-3 {
      --_lyt-group: 3;
      &:where(._row[class*=_avg-])>*:nth-of-type(3n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(3n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(3)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(3)~* {
        display: none;
      }
    }
  ._sm-4 {
      --_lyt-group: 4;
      &:where(._row[class*=_avg-])>*:nth-of-type(4n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(4n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(4)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(4)~* {
        display: none;
      }
    }
  ._sm-5 {
      --_lyt-group: 5;
      &:where(._row[class*=_avg-])>*:nth-of-type(5n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(5n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(5)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(5)~* {
        display: none;
      }
    }
  ._sm-6 {
      --_lyt-group: 6;
      &:where(._row[class*=_avg-])>*:nth-of-type(6n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(6n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(6)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(6)~* {
        display: none;
      }
    }
  ._sm-7 {
      --_lyt-group: 7;
      &:where(._row[class*=_avg-])>*:nth-of-type(7n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(7n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(7)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(7)~* {
        display: none;
      }
    }
  ._sm-8 {
      --_lyt-group: 8;
      &:where(._row[class*=_avg-])>*:nth-of-type(8n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(8n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(8)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(8)~* {
        display: none;
      }
    }
  ._sm-9 {
      --_lyt-group: 9;
      &:where(._row[class*=_avg-])>*:nth-of-type(9n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(9n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(9)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(9)~* {
        display: none;
      }
    }
  ._sm-10 {
      --_lyt-group: 10;
      &:where(._row[class*=_avg-])>*:nth-of-type(10n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(10n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(10)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(10)~* {
        display: none;
      }
    }
  ._sm-11 {
      --_lyt-group: 11;
      &:where(._row[class*=_avg-])>*:nth-of-type(11n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(11n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(11)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(11)~* {
        display: none;
      }
    }
  ._sm-12 {
      --_lyt-group: 12;
      &:where(._row[class*=_avg-])>*:nth-of-type(12n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(12n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(12)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(12)~* {
        display: none;
      }
    }
  ._sm-13 {
      --_lyt-group: 13;
      &:where(._row[class*=_avg-])>*:nth-of-type(13n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(13n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(13)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(13)~* {
        display: none;
      }
    }
  ._sm-14 {
      --_lyt-group: 14;
      &:where(._row[class*=_avg-])>*:nth-of-type(14n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(14n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(14)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(14)~* {
        display: none;
      }
    }
  ._sm-15 {
      --_lyt-group: 15;
      &:where(._row[class*=_avg-])>*:nth-of-type(15n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(15n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(15)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(15)~* {
        display: none;
      }
    }
  ._sm-16 {
      --_lyt-group: 16;
      &:where(._row[class*=_avg-])>*:nth-of-type(16n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(16n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(16)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(16)~* {
        display: none;
      }
    }
  ._sm-17 {
      --_lyt-group: 17;
      &:where(._row[class*=_avg-])>*:nth-of-type(17n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(17n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(17)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(17)~* {
        display: none;
      }
    }
  ._sm-18 {
      --_lyt-group: 18;
      &:where(._row[class*=_avg-])>*:nth-of-type(18n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(18n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(18)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(18)~* {
        display: none;
      }
    }
  ._sm-19 {
      --_lyt-group: 19;
      &:where(._row[class*=_avg-])>*:nth-of-type(19n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(19n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(19)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(19)~* {
        display: none;
      }
    }
  ._sm-20 {
      --_lyt-group: 20;
      &:where(._row[class*=_avg-])>*:nth-of-type(20n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(20n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(20)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(20)~* {
        display: none;
      }
    }
  ._sm-21 {
      --_lyt-group: 21;
      &:where(._row[class*=_avg-])>*:nth-of-type(21n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(21n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(21)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(21)~* {
        display: none;
      }
    }
  ._sm-22 {
      --_lyt-group: 22;
      &:where(._row[class*=_avg-])>*:nth-of-type(22n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(22n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(22)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(22)~* {
        display: none;
      }
    }
  ._sm-23 {
      --_lyt-group: 23;
      &:where(._row[class*=_avg-])>*:nth-of-type(23n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(23n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(23)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(23)~* {
        display: none;
      }
    }
  ._sm-24 {
      --_lyt-group: 24;
      &:where(._row[class*=_avg-])>*:nth-of-type(24n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(24n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(24)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(24)~* {
        display: none;
      }
    }
  &:where([class*=_sm-])>[class*=_flex] {
    --_flex-grow: 0;
    --_flex-shrink: 0;
  }
  ._row:where([class*=_sm-]),
  ._col:where([class*=_sm-]) {
    flex-wrap: wrap;
  }
  ._row:where([class*=_sm-])>*:is([class*=_flex]),
  ._col:where([class*=_sm-])>*:is([class*=_flex]) {
    --_flex-basis: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
  }
  ._row:where([class*=_sm-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own]) {
      width: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._col:where([class*=_sm-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own-]) {
      height: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._masonry {
    --_msnry-cols: 3;
    &:where(._sm-1) {
      --_msnry-cols: 1;
    }
    &:where(._sm-2) {
      --_msnry-cols: 2;
    }
    &:where(._sm-3) {
      --_msnry-cols: 3;
    }
    &:where(._sm-4) {
      --_msnry-cols: 4;
    }
    &:where(._sm-5) {
      --_msnry-cols: 5;
    }
    &:where(._sm-6) {
      --_msnry-cols: 6;
    }
    &:where(._sm-7) {
      --_msnry-cols: 7;
    }
    &:where(._sm-8) {
      --_msnry-cols: 8;
    }
    &:where(._sm-9) {
      --_msnry-cols: 9;
    }
    &:where(._sm-10) {
      --_msnry-cols: 10;
    }
    &:where(._sm-11) {
      --_msnry-cols: 11;
    }
    &:where(._sm-12) {
      --_msnry-cols: 12;
    }
    &:where(._sm-13) {
      --_msnry-cols: 13;
    }
    &:where(._sm-14) {
      --_msnry-cols: 14;
    }
    &:where(._sm-15) {
      --_msnry-cols: 15;
    }
    &:where(._sm-16) {
      --_msnry-cols: 16;
    }
    &:where(._sm-17) {
      --_msnry-cols: 17;
    }
    &:where(._sm-18) {
      --_msnry-cols: 18;
    }
    &:where(._sm-19) {
      --_msnry-cols: 19;
    }
    &:where(._sm-20) {
      --_msnry-cols: 20;
    }
    &:where(._sm-21) {
      --_msnry-cols: 21;
    }
    &:where(._sm-22) {
      --_msnry-cols: 22;
    }
    &:where(._sm-23) {
      --_msnry-cols: 23;
    }
    &:where(._sm-24) {
      --_msnry-cols: 24;
    }
  }
  ._scroller {
    height: var(--_sm-h);
    width: var(--_sm-w);
  }
  table {
    width: var(--_sm-w);
}
}
/* md->Tablet flip */
@media  (min-width: 1200px) and (max-width:calc(1536px - 1px)) and  (hover:none) {
  :root {
    --_screen: md;
  }
  *._split-md,
  ._row:where(._split-md),
  ._col:where(._split-md),
  ._grid:where(._split-md) {
    display: block;
    >* {
      width: auto;
      height: auto;
      &:where(:not(:last-child)) {
        margin-block-end: var(--_lyt-g);
      }
    }
  }
[class*=_container]:where(:not(._container-full)) {
  &:where(:not(._md-full)) {
    --_container-w: var(--_md-w,var(--_container-resp));
      --_container-resp: var(--_w-md);
  }
  &:where(._md-full) {
    width: 100%;
  }
}
  ._hide-md {
    display: none;
  }
  ._grid[class*=_md-] {
    --_lyt-avg: var(--_lyt-group);
  }
  ._md-1 {
      --_lyt-group: 1;
      &:where(._row[class*=_avg-])>*:nth-of-type(1n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(1n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(1)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(1)~* {
        display: none;
      }
    }
  ._md-2 {
      --_lyt-group: 2;
      &:where(._row[class*=_avg-])>*:nth-of-type(2n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(2n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(2)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(2)~* {
        display: none;
      }
    }
  ._md-3 {
      --_lyt-group: 3;
      &:where(._row[class*=_avg-])>*:nth-of-type(3n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(3n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(3)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(3)~* {
        display: none;
      }
    }
  ._md-4 {
      --_lyt-group: 4;
      &:where(._row[class*=_avg-])>*:nth-of-type(4n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(4n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(4)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(4)~* {
        display: none;
      }
    }
  ._md-5 {
      --_lyt-group: 5;
      &:where(._row[class*=_avg-])>*:nth-of-type(5n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(5n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(5)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(5)~* {
        display: none;
      }
    }
  ._md-6 {
      --_lyt-group: 6;
      &:where(._row[class*=_avg-])>*:nth-of-type(6n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(6n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(6)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(6)~* {
        display: none;
      }
    }
  ._md-7 {
      --_lyt-group: 7;
      &:where(._row[class*=_avg-])>*:nth-of-type(7n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(7n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(7)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(7)~* {
        display: none;
      }
    }
  ._md-8 {
      --_lyt-group: 8;
      &:where(._row[class*=_avg-])>*:nth-of-type(8n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(8n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(8)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(8)~* {
        display: none;
      }
    }
  ._md-9 {
      --_lyt-group: 9;
      &:where(._row[class*=_avg-])>*:nth-of-type(9n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(9n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(9)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(9)~* {
        display: none;
      }
    }
  ._md-10 {
      --_lyt-group: 10;
      &:where(._row[class*=_avg-])>*:nth-of-type(10n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(10n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(10)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(10)~* {
        display: none;
      }
    }
  ._md-11 {
      --_lyt-group: 11;
      &:where(._row[class*=_avg-])>*:nth-of-type(11n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(11n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(11)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(11)~* {
        display: none;
      }
    }
  ._md-12 {
      --_lyt-group: 12;
      &:where(._row[class*=_avg-])>*:nth-of-type(12n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(12n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(12)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(12)~* {
        display: none;
      }
    }
  ._md-13 {
      --_lyt-group: 13;
      &:where(._row[class*=_avg-])>*:nth-of-type(13n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(13n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(13)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(13)~* {
        display: none;
      }
    }
  ._md-14 {
      --_lyt-group: 14;
      &:where(._row[class*=_avg-])>*:nth-of-type(14n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(14n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(14)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(14)~* {
        display: none;
      }
    }
  ._md-15 {
      --_lyt-group: 15;
      &:where(._row[class*=_avg-])>*:nth-of-type(15n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(15n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(15)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(15)~* {
        display: none;
      }
    }
  ._md-16 {
      --_lyt-group: 16;
      &:where(._row[class*=_avg-])>*:nth-of-type(16n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(16n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(16)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(16)~* {
        display: none;
      }
    }
  ._md-17 {
      --_lyt-group: 17;
      &:where(._row[class*=_avg-])>*:nth-of-type(17n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(17n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(17)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(17)~* {
        display: none;
      }
    }
  ._md-18 {
      --_lyt-group: 18;
      &:where(._row[class*=_avg-])>*:nth-of-type(18n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(18n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(18)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(18)~* {
        display: none;
      }
    }
  ._md-19 {
      --_lyt-group: 19;
      &:where(._row[class*=_avg-])>*:nth-of-type(19n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(19n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(19)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(19)~* {
        display: none;
      }
    }
  ._md-20 {
      --_lyt-group: 20;
      &:where(._row[class*=_avg-])>*:nth-of-type(20n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(20n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(20)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(20)~* {
        display: none;
      }
    }
  ._md-21 {
      --_lyt-group: 21;
      &:where(._row[class*=_avg-])>*:nth-of-type(21n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(21n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(21)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(21)~* {
        display: none;
      }
    }
  ._md-22 {
      --_lyt-group: 22;
      &:where(._row[class*=_avg-])>*:nth-of-type(22n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(22n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(22)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(22)~* {
        display: none;
      }
    }
  ._md-23 {
      --_lyt-group: 23;
      &:where(._row[class*=_avg-])>*:nth-of-type(23n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(23n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(23)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(23)~* {
        display: none;
      }
    }
  ._md-24 {
      --_lyt-group: 24;
      &:where(._row[class*=_avg-])>*:nth-of-type(24n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(24n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(24)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(24)~* {
        display: none;
      }
    }
  &:where([class*=_md-])>[class*=_flex] {
    --_flex-grow: 0;
    --_flex-shrink: 0;
  }
  ._row:where([class*=_md-]),
  ._col:where([class*=_md-]) {
    flex-wrap: wrap;
  }
  ._row:where([class*=_md-])>*:is([class*=_flex]),
  ._col:where([class*=_md-])>*:is([class*=_flex]) {
    --_flex-basis: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
  }
  ._row:where([class*=_md-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own]) {
      width: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._col:where([class*=_md-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own-]) {
      height: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._masonry {
    --_msnry-cols: 3;
    &:where(._md-1) {
      --_msnry-cols: 1;
    }
    &:where(._md-2) {
      --_msnry-cols: 2;
    }
    &:where(._md-3) {
      --_msnry-cols: 3;
    }
    &:where(._md-4) {
      --_msnry-cols: 4;
    }
    &:where(._md-5) {
      --_msnry-cols: 5;
    }
    &:where(._md-6) {
      --_msnry-cols: 6;
    }
    &:where(._md-7) {
      --_msnry-cols: 7;
    }
    &:where(._md-8) {
      --_msnry-cols: 8;
    }
    &:where(._md-9) {
      --_msnry-cols: 9;
    }
    &:where(._md-10) {
      --_msnry-cols: 10;
    }
    &:where(._md-11) {
      --_msnry-cols: 11;
    }
    &:where(._md-12) {
      --_msnry-cols: 12;
    }
    &:where(._md-13) {
      --_msnry-cols: 13;
    }
    &:where(._md-14) {
      --_msnry-cols: 14;
    }
    &:where(._md-15) {
      --_msnry-cols: 15;
    }
    &:where(._md-16) {
      --_msnry-cols: 16;
    }
    &:where(._md-17) {
      --_msnry-cols: 17;
    }
    &:where(._md-18) {
      --_msnry-cols: 18;
    }
    &:where(._md-19) {
      --_msnry-cols: 19;
    }
    &:where(._md-20) {
      --_msnry-cols: 20;
    }
    &:where(._md-21) {
      --_msnry-cols: 21;
    }
    &:where(._md-22) {
      --_msnry-cols: 22;
    }
    &:where(._md-23) {
      --_msnry-cols: 23;
    }
    &:where(._md-24) {
      --_msnry-cols: 24;
    }
  }
  ._scroller {
    height: var(--_md-h);
    width: var(--_md-w);
  }
  table {
    width: var(--_md-w);
}
}
/* lg->Desktop >=1560 (1920*1080) */
@media (min-width: 1200px) and (max-width:calc(1536px - 1px)) and (hover:hover),
(min-width: 1536px) and (max-width:calc(2500px - 1px)) {
  :root {
    --_screen: lg;
    --_isnarrow:0;
  }
  *._split-lg,
  ._row:where(._split-lg),
  ._col:where(._split-lg),
  ._grid:where(._split-lg) {
    display: block;
    >* {
      width: auto;
      height: auto;
      &:where(:not(:last-child)) {
        margin-block-end: var(--_lyt-g);
      }
    }
  }
  [class*=_container]:where(:not(._container-full)) {
    &:where(:not(._lg-full)) {
      --_container-w: var(--_lg-w, var(--_container-resp));
      --_container-resp: var(--_w-lg);
    }
    &:where(._lg-full) {
      width: 100%;
    }
  }
  ._hide-lg {
    display: none;
  }
  ._grid[class*=_lg-] {
    --_lyt-avg: var(--_lyt-group);
  }
  ._lg-1 {
      --_lyt-group: 1;
      &:where(._row[class*=_avg-])>*:nth-of-type(1n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(1n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(1)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(1)~* {
        display: none;
      }
    }
  ._lg-2 {
      --_lyt-group: 2;
      &:where(._row[class*=_avg-])>*:nth-of-type(2n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(2n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(2)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(2)~* {
        display: none;
      }
    }
  ._lg-3 {
      --_lyt-group: 3;
      &:where(._row[class*=_avg-])>*:nth-of-type(3n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(3n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(3)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(3)~* {
        display: none;
      }
    }
  ._lg-4 {
      --_lyt-group: 4;
      &:where(._row[class*=_avg-])>*:nth-of-type(4n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(4n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(4)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(4)~* {
        display: none;
      }
    }
  ._lg-5 {
      --_lyt-group: 5;
      &:where(._row[class*=_avg-])>*:nth-of-type(5n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(5n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(5)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(5)~* {
        display: none;
      }
    }
  ._lg-6 {
      --_lyt-group: 6;
      &:where(._row[class*=_avg-])>*:nth-of-type(6n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(6n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(6)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(6)~* {
        display: none;
      }
    }
  ._lg-7 {
      --_lyt-group: 7;
      &:where(._row[class*=_avg-])>*:nth-of-type(7n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(7n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(7)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(7)~* {
        display: none;
      }
    }
  ._lg-8 {
      --_lyt-group: 8;
      &:where(._row[class*=_avg-])>*:nth-of-type(8n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(8n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(8)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(8)~* {
        display: none;
      }
    }
  ._lg-9 {
      --_lyt-group: 9;
      &:where(._row[class*=_avg-])>*:nth-of-type(9n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(9n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(9)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(9)~* {
        display: none;
      }
    }
  ._lg-10 {
      --_lyt-group: 10;
      &:where(._row[class*=_avg-])>*:nth-of-type(10n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(10n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(10)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(10)~* {
        display: none;
      }
    }
  ._lg-11 {
      --_lyt-group: 11;
      &:where(._row[class*=_avg-])>*:nth-of-type(11n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(11n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(11)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(11)~* {
        display: none;
      }
    }
  ._lg-12 {
      --_lyt-group: 12;
      &:where(._row[class*=_avg-])>*:nth-of-type(12n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(12n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(12)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(12)~* {
        display: none;
      }
    }
  ._lg-13 {
      --_lyt-group: 13;
      &:where(._row[class*=_avg-])>*:nth-of-type(13n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(13n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(13)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(13)~* {
        display: none;
      }
    }
  ._lg-14 {
      --_lyt-group: 14;
      &:where(._row[class*=_avg-])>*:nth-of-type(14n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(14n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(14)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(14)~* {
        display: none;
      }
    }
  ._lg-15 {
      --_lyt-group: 15;
      &:where(._row[class*=_avg-])>*:nth-of-type(15n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(15n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(15)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(15)~* {
        display: none;
      }
    }
  ._lg-16 {
      --_lyt-group: 16;
      &:where(._row[class*=_avg-])>*:nth-of-type(16n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(16n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(16)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(16)~* {
        display: none;
      }
    }
  ._lg-17 {
      --_lyt-group: 17;
      &:where(._row[class*=_avg-])>*:nth-of-type(17n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(17n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(17)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(17)~* {
        display: none;
      }
    }
  ._lg-18 {
      --_lyt-group: 18;
      &:where(._row[class*=_avg-])>*:nth-of-type(18n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(18n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(18)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(18)~* {
        display: none;
      }
    }
  ._lg-19 {
      --_lyt-group: 19;
      &:where(._row[class*=_avg-])>*:nth-of-type(19n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(19n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(19)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(19)~* {
        display: none;
      }
    }
  ._lg-20 {
      --_lyt-group: 20;
      &:where(._row[class*=_avg-])>*:nth-of-type(20n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(20n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(20)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(20)~* {
        display: none;
      }
    }
  ._lg-21 {
      --_lyt-group: 21;
      &:where(._row[class*=_avg-])>*:nth-of-type(21n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(21n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(21)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(21)~* {
        display: none;
      }
    }
  ._lg-22 {
      --_lyt-group: 22;
      &:where(._row[class*=_avg-])>*:nth-of-type(22n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(22n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(22)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(22)~* {
        display: none;
      }
    }
  ._lg-23 {
      --_lyt-group: 23;
      &:where(._row[class*=_avg-])>*:nth-of-type(23n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(23n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(23)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(23)~* {
        display: none;
      }
    }
  ._lg-24 {
      --_lyt-group: 24;
      &:where(._row[class*=_avg-])>*:nth-of-type(24n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(24n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(24)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(24)~* {
        display: none;
      }
    }
  &:where([class*=_lg-])>[class*=_flex] {
    --_flex-grow: 0;
    --_flex-shrink: 0;
  }
  ._row:where([class*=_lg-]),
  ._col:where([class*=_lg-]) {
    flex-wrap: wrap;
  }
  ._row:where([class*=_lg-])>*:is([class*=_flex]),
  ._col:where([class*=_lg-])>*:is([class*=_flex]) {
    --_flex-basis: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
  }
  ._row:where([class*=_lg-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own]) {
      width: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._col:where([class*=_lg-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own-]) {
      height: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
    ._masonry {
      &:where(._lg-1) {
      --_msnry-cols: 1;
    }
      &:where(._lg-2) {
      --_msnry-cols: 2;
    }
      &:where(._lg-3) {
      --_msnry-cols: 3;
    }
      &:where(._lg-4) {
      --_msnry-cols: 4;
    }
      &:where(._lg-5) {
      --_msnry-cols: 5;
    }
      &:where(._lg-6) {
      --_msnry-cols: 6;
    }
      &:where(._lg-7) {
      --_msnry-cols: 7;
    }
      &:where(._lg-8) {
      --_msnry-cols: 8;
    }
      &:where(._lg-9) {
      --_msnry-cols: 9;
    }
      &:where(._lg-10) {
      --_msnry-cols: 10;
    }
      &:where(._lg-11) {
      --_msnry-cols: 11;
    }
      &:where(._lg-12) {
      --_msnry-cols: 12;
    }
      &:where(._lg-13) {
      --_msnry-cols: 13;
    }
      &:where(._lg-14) {
      --_msnry-cols: 14;
    }
      &:where(._lg-15) {
      --_msnry-cols: 15;
    }
      &:where(._lg-16) {
      --_msnry-cols: 16;
    }
      &:where(._lg-17) {
      --_msnry-cols: 17;
    }
      &:where(._lg-18) {
      --_msnry-cols: 18;
    }
      &:where(._lg-19) {
      --_msnry-cols: 19;
    }
      &:where(._lg-20) {
      --_msnry-cols: 20;
    }
      &:where(._lg-21) {
      --_msnry-cols: 21;
    }
      &:where(._lg-22) {
      --_msnry-cols: 22;
    }
      &:where(._lg-23) {
      --_msnry-cols: 23;
    }
      &:where(._lg-24) {
      --_msnry-cols: 24;
    }
    }
  ._scroller {
    height: var(--_lg-h);
    width: var(--_lg-w);
  }
  table {
    width: var(--_lg-w);
}
}
/* xl->2k screen (2560*1440) */
@media (min-width: 2500px) and (max-width:calc(3800px - 1px)) {
  :root {
    --_screen: xl;
    --_isnarrow: 0;
  }
  *._split-xl,
  ._row:where(._split-xl),
  ._col:where(._split-xl),
  ._grid:where(._split-xl) {
    display: block;
    >* {
      width: auto;
      height: auto;
      &:where(:not(:last-child)) {
        margin-block-end: var(--_lyt-g);
      }
    }
  }
  [class*=_container]:where(:not(._container-full)) {
    &:where(:not(._xl-full)) {
      --_container-w: var(--_xl-w, var(--_container-resp));
      --_container-resp: var(--_w-xl);
    }
    &:where(._xl-full) {
      width: 100%;
    }
  }
  ._hide-xl {
    display: none;
  }
  ._grid[class*=_xl] {
    --_lyt-avg: var(--_lyt-group);
  }
  ._xl-1 {
      --_lyt-group: 1;
      &:where(._row[class*=_avg-])>*:nth-of-type(1n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(1n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(1)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(1)~* {
        display: none;
      }
    }
  ._xl-2 {
      --_lyt-group: 2;
      &:where(._row[class*=_avg-])>*:nth-of-type(2n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(2n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(2)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(2)~* {
        display: none;
      }
    }
  ._xl-3 {
      --_lyt-group: 3;
      &:where(._row[class*=_avg-])>*:nth-of-type(3n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(3n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(3)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(3)~* {
        display: none;
      }
    }
  ._xl-4 {
      --_lyt-group: 4;
      &:where(._row[class*=_avg-])>*:nth-of-type(4n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(4n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(4)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(4)~* {
        display: none;
      }
    }
  ._xl-5 {
      --_lyt-group: 5;
      &:where(._row[class*=_avg-])>*:nth-of-type(5n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(5n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(5)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(5)~* {
        display: none;
      }
    }
  ._xl-6 {
      --_lyt-group: 6;
      &:where(._row[class*=_avg-])>*:nth-of-type(6n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(6n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(6)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(6)~* {
        display: none;
      }
    }
  ._xl-7 {
      --_lyt-group: 7;
      &:where(._row[class*=_avg-])>*:nth-of-type(7n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(7n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(7)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(7)~* {
        display: none;
      }
    }
  ._xl-8 {
      --_lyt-group: 8;
      &:where(._row[class*=_avg-])>*:nth-of-type(8n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(8n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(8)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(8)~* {
        display: none;
      }
    }
  ._xl-9 {
      --_lyt-group: 9;
      &:where(._row[class*=_avg-])>*:nth-of-type(9n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(9n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(9)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(9)~* {
        display: none;
      }
    }
  ._xl-10 {
      --_lyt-group: 10;
      &:where(._row[class*=_avg-])>*:nth-of-type(10n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(10n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(10)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(10)~* {
        display: none;
      }
    }
  ._xl-11 {
      --_lyt-group: 11;
      &:where(._row[class*=_avg-])>*:nth-of-type(11n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(11n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(11)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(11)~* {
        display: none;
      }
    }
  ._xl-12 {
      --_lyt-group: 12;
      &:where(._row[class*=_avg-])>*:nth-of-type(12n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(12n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(12)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(12)~* {
        display: none;
      }
    }
  ._xl-13 {
      --_lyt-group: 13;
      &:where(._row[class*=_avg-])>*:nth-of-type(13n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(13n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(13)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(13)~* {
        display: none;
      }
    }
  ._xl-14 {
      --_lyt-group: 14;
      &:where(._row[class*=_avg-])>*:nth-of-type(14n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(14n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(14)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(14)~* {
        display: none;
      }
    }
  ._xl-15 {
      --_lyt-group: 15;
      &:where(._row[class*=_avg-])>*:nth-of-type(15n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(15n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(15)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(15)~* {
        display: none;
      }
    }
  ._xl-16 {
      --_lyt-group: 16;
      &:where(._row[class*=_avg-])>*:nth-of-type(16n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(16n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(16)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(16)~* {
        display: none;
      }
    }
  ._xl-17 {
      --_lyt-group: 17;
      &:where(._row[class*=_avg-])>*:nth-of-type(17n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(17n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(17)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(17)~* {
        display: none;
      }
    }
  ._xl-18 {
      --_lyt-group: 18;
      &:where(._row[class*=_avg-])>*:nth-of-type(18n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(18n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(18)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(18)~* {
        display: none;
      }
    }
  ._xl-19 {
      --_lyt-group: 19;
      &:where(._row[class*=_avg-])>*:nth-of-type(19n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(19n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(19)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(19)~* {
        display: none;
      }
    }
  ._xl-20 {
      --_lyt-group: 20;
      &:where(._row[class*=_avg-])>*:nth-of-type(20n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(20n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(20)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(20)~* {
        display: none;
      }
    }
  ._xl-21 {
      --_lyt-group: 21;
      &:where(._row[class*=_avg-])>*:nth-of-type(21n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(21n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(21)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(21)~* {
        display: none;
      }
    }
  ._xl-22 {
      --_lyt-group: 22;
      &:where(._row[class*=_avg-])>*:nth-of-type(22n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(22n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(22)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(22)~* {
        display: none;
      }
    }
  ._xl-23 {
      --_lyt-group: 23;
      &:where(._row[class*=_avg-])>*:nth-of-type(23n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(23n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(23)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(23)~* {
        display: none;
      }
    }
  ._xl-24 {
      --_lyt-group: 24;
      &:where(._row[class*=_avg-])>*:nth-of-type(24n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(24n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(24)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(24)~* {
        display: none;
      }
    }
  &:where([class*=_xl-])>[class*=_flex] {
    --_flex-grow: 0;
    --_flex-shrink: 0;
  }
  ._row:where([class*=_xl-]),
  ._col:where([class*=_xl-]) {
    flex-wrap: wrap;
  }
  ._row:where([class*=_xl-])>*:is([class*=_flex]),
  ._col:where([class*=_xl-])>*:is([class*=_flex]) {
    --_flex-basis: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
  }
  ._row:where([class*=_xl-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own]) {
      width: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._col:where([class*=_xl-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own-]) {
      height: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._masonry {
    &:where(._xl-1) {
      --_msnry-cols: 1;
    }
    &:where(._xl-2) {
      --_msnry-cols: 2;
    }
    &:where(._xl-3) {
      --_msnry-cols: 3;
    }
    &:where(._xl-4) {
      --_msnry-cols: 4;
    }
    &:where(._xl-5) {
      --_msnry-cols: 5;
    }
    &:where(._xl-6) {
      --_msnry-cols: 6;
    }
    &:where(._xl-7) {
      --_msnry-cols: 7;
    }
    &:where(._xl-8) {
      --_msnry-cols: 8;
    }
    &:where(._xl-9) {
      --_msnry-cols: 9;
    }
    &:where(._xl-10) {
      --_msnry-cols: 10;
    }
    &:where(._xl-11) {
      --_msnry-cols: 11;
    }
    &:where(._xl-12) {
      --_msnry-cols: 12;
    }
    &:where(._xl-13) {
      --_msnry-cols: 13;
    }
    &:where(._xl-14) {
      --_msnry-cols: 14;
    }
    &:where(._xl-15) {
      --_msnry-cols: 15;
    }
    &:where(._xl-16) {
      --_msnry-cols: 16;
    }
    &:where(._xl-17) {
      --_msnry-cols: 17;
    }
    &:where(._xl-18) {
      --_msnry-cols: 18;
    }
    &:where(._xl-19) {
      --_msnry-cols: 19;
    }
    &:where(._xl-20) {
      --_msnry-cols: 20;
    }
    &:where(._xl-21) {
      --_msnry-cols: 21;
    }
    &:where(._xl-22) {
      --_msnry-cols: 22;
    }
    &:where(._xl-23) {
      --_msnry-cols: 23;
    }
    &:where(._xl-24) {
      --_msnry-cols: 24;
    }
  }
    ._scroller {
      height: var(--_xl-h);
      width: var(--_xl-w);
    }
    table {
      width: var(--_xl-w);
  }
}
/* xxl->4k screen (3840*2160) */
@media (min-width: 3800px) {
  :root {
    --_screen: xxl;
    --_isnarrow:0;
  }
    *._split-xxl,
    ._row:where(._split-xxl),
    ._col:where(._split-xxl),
    ._grid:where(._split-xxl) {
      display: block;
      >* {
        width: auto;
        height: auto;
        &:where(:not(:last-child)) {
          margin-block-end: var(--_lyt-g);
        }
      }
    }
  [class*=_container]:where(:not(._container-full)) {
    &:where(:not(._xxl-full)) {
      --_container-w: var(--_xxl-w,var(--_container-resp));
      --_container-resp: var(--_w-xxl);
    }
    &:where(._xxl-full) {
      width: 100%;
    }
  }
  ._hide-xxl {
    display: none;
  }
  ._grid[class*=_xxl] {
    --_lyt-avg: var(--_lyt-group);
  }
  ._xxl-1 {
      --_lyt-group: 1;
      &:where(._row[class*=_avg-])>*:nth-of-type(1n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(1n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(1n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 1))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 1))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(1)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(1)~* {
        display: none;
      }
    }
  ._xxl-2 {
      --_lyt-group: 2;
      &:where(._row[class*=_avg-])>*:nth-of-type(2n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(2n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(2n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 2))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 2))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(2)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(2)~* {
        display: none;
      }
    }
  ._xxl-3 {
      --_lyt-group: 3;
      &:where(._row[class*=_avg-])>*:nth-of-type(3n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(3n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(3n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 3))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 3))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(3)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(3)~* {
        display: none;
      }
    }
  ._xxl-4 {
      --_lyt-group: 4;
      &:where(._row[class*=_avg-])>*:nth-of-type(4n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(4n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(4n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 4))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 4))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(4)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(4)~* {
        display: none;
      }
    }
  ._xxl-5 {
      --_lyt-group: 5;
      &:where(._row[class*=_avg-])>*:nth-of-type(5n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(5n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(5n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 5))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 5))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(5)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(5)~* {
        display: none;
      }
    }
  ._xxl-6 {
      --_lyt-group: 6;
      &:where(._row[class*=_avg-])>*:nth-of-type(6n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(6n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(6n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 6))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 6))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(6)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(6)~* {
        display: none;
      }
    }
  ._xxl-7 {
      --_lyt-group: 7;
      &:where(._row[class*=_avg-])>*:nth-of-type(7n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(7n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(7n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 7))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 7))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(7)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(7)~* {
        display: none;
      }
    }
  ._xxl-8 {
      --_lyt-group: 8;
      &:where(._row[class*=_avg-])>*:nth-of-type(8n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(8n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(8n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 8))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 8))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(8)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(8)~* {
        display: none;
      }
    }
  ._xxl-9 {
      --_lyt-group: 9;
      &:where(._row[class*=_avg-])>*:nth-of-type(9n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(9n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(9n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 9))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 9))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(9)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(9)~* {
        display: none;
      }
    }
  ._xxl-10 {
      --_lyt-group: 10;
      &:where(._row[class*=_avg-])>*:nth-of-type(10n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(10n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(10n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 10))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 10))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(10)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(10)~* {
        display: none;
      }
    }
  ._xxl-11 {
      --_lyt-group: 11;
      &:where(._row[class*=_avg-])>*:nth-of-type(11n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(11n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(11n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 11))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 11))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(11)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(11)~* {
        display: none;
      }
    }
  ._xxl-12 {
      --_lyt-group: 12;
      &:where(._row[class*=_avg-])>*:nth-of-type(12n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(12n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(12n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 12))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 12))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(12)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(12)~* {
        display: none;
      }
    }
  ._xxl-13 {
      --_lyt-group: 13;
      &:where(._row[class*=_avg-])>*:nth-of-type(13n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(13n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(13n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 13))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 13))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(13)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(13)~* {
        display: none;
      }
    }
  ._xxl-14 {
      --_lyt-group: 14;
      &:where(._row[class*=_avg-])>*:nth-of-type(14n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(14n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(14n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 14))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 14))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(14)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(14)~* {
        display: none;
      }
    }
  ._xxl-15 {
      --_lyt-group: 15;
      &:where(._row[class*=_avg-])>*:nth-of-type(15n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(15n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(15n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 15))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 15))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(15)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(15)~* {
        display: none;
      }
    }
  ._xxl-16 {
      --_lyt-group: 16;
      &:where(._row[class*=_avg-])>*:nth-of-type(16n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(16n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(16n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 16))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 16))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(16)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(16)~* {
        display: none;
      }
    }
  ._xxl-17 {
      --_lyt-group: 17;
      &:where(._row[class*=_avg-])>*:nth-of-type(17n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(17n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(17n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 17))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 17))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(17)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(17)~* {
        display: none;
      }
    }
  ._xxl-18 {
      --_lyt-group: 18;
      &:where(._row[class*=_avg-])>*:nth-of-type(18n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(18n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(18n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 18))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 18))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(18)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(18)~* {
        display: none;
      }
    }
  ._xxl-19 {
      --_lyt-group: 19;
      &:where(._row[class*=_avg-])>*:nth-of-type(19n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(19n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(19n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 19))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 19))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(19)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(19)~* {
        display: none;
      }
    }
  ._xxl-20 {
      --_lyt-group: 20;
      &:where(._row[class*=_avg-])>*:nth-of-type(20n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(20n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(20n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 20))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 20))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(20)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(20)~* {
        display: none;
      }
    }
  ._xxl-21 {
      --_lyt-group: 21;
      &:where(._row[class*=_avg-])>*:nth-of-type(21n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(21n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(21n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 21))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 21))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(21)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(21)~* {
        display: none;
      }
    }
  ._xxl-22 {
      --_lyt-group: 22;
      &:where(._row[class*=_avg-])>*:nth-of-type(22n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(22n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(22n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 22))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 22))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(22)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(22)~* {
        display: none;
      }
    }
  ._xxl-23 {
      --_lyt-group: 23;
      &:where(._row[class*=_avg-])>*:nth-of-type(23n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(23n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(23n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 23))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 23))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(23)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(23)~* {
        display: none;
      }
    }
  ._xxl-24 {
      --_lyt-group: 24;
      &:where(._row[class*=_avg-])>*:nth-of-type(24n),
      &:where(._row)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-inline-end: 0;
      }
      &:where(._row[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._row)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-block-start: var(--_lyt-g);
      }
      &:where(._col[class*=_avg-])>*:nth-of-type(24n),
      &:where(._col)>*:where([class*=_own-]):nth-of-type(24n) {
        margin-block-end: 0;
      }
      &:where(._col[class*=_avg-])>*:where(:not(:nth-of-type(-n + 24))),
      &:where(._col)>*:where([class*=_own-]):where(:not(:nth-of-type(-n + 24))) {
        margin-inline-start: var(--_lyt-g);
      }
      &._clip>:nth-child(24)>._hide-clip {
        display: flex;
      }
      &._clip>:nth-child(24)~* {
        display: none;
      }
    }
  &:where([class*=_xxl-])>[class*=_flex] {
    --_flex-grow: 0;
    --_flex-shrink: 0;
  }
  ._row:where([class*=_xxl-]),
  ._col:where([class*=_xxl-]) {
    flex-wrap: wrap;
  }
  ._row:where([class*=_xxl-])>*:is([class*=_flex]),
  ._col:where([class*=_xxl-])>*:is([class*=_flex]) {
    --_flex-basis: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
  }
  ._row:where([class*=_xxl-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own]) {
      width: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._col:where([class*=_xxl-]) {
    &:is([class*=_avg-])>*,
    >*:is([class*=_own-]) {
      height: calc(100%/var(--_lyt-group) - var(--_lyt-g)*(var(--_lyt-group) - 1)/var(--_lyt-group));
    }
  }
  ._masonry {
    &:where(._xxs-1) {
      --_msnry-cols: 1;
    }
    &:where(._xxs-2) {
      --_msnry-cols: 2;
    }
    &:where(._xxs-3) {
      --_msnry-cols: 3;
    }
    &:where(._xxs-4) {
      --_msnry-cols: 4;
    }
    &:where(._xxs-5) {
      --_msnry-cols: 5;
    }
    &:where(._xxs-6) {
      --_msnry-cols: 6;
    }
    &:where(._xxs-7) {
      --_msnry-cols: 7;
    }
    &:where(._xxs-8) {
      --_msnry-cols: 8;
    }
    &:where(._xxs-9) {
      --_msnry-cols: 9;
    }
    &:where(._xxs-10) {
      --_msnry-cols: 10;
    }
    &:where(._xxs-11) {
      --_msnry-cols: 11;
    }
    &:where(._xxs-12) {
      --_msnry-cols: 12;
    }
    &:where(._xxs-13) {
      --_msnry-cols: 13;
    }
    &:where(._xxs-14) {
      --_msnry-cols: 14;
    }
    &:where(._xxs-15) {
      --_msnry-cols: 15;
    }
    &:where(._xxs-16) {
      --_msnry-cols: 16;
    }
    &:where(._xxs-17) {
      --_msnry-cols: 17;
    }
    &:where(._xxs-18) {
      --_msnry-cols: 18;
    }
    &:where(._xxs-19) {
      --_msnry-cols: 19;
    }
    &:where(._xxs-20) {
      --_msnry-cols: 20;
    }
    &:where(._xxs-21) {
      --_msnry-cols: 21;
    }
    &:where(._xxs-22) {
      --_msnry-cols: 22;
    }
    &:where(._xxs-23) {
      --_msnry-cols: 23;
    }
    &:where(._xxs-24) {
      --_msnry-cols: 24;
    }
  }
  ._scroller {
    height: var(--_xxl-h);
    width: var(--_xxl-w);
  }
  table {
    width: var(--_xxl-w);
}
}
/* Other device except phone */
@media (min-width: 600px) and (max-width: calc(900px - 1px)) and (orientation: portrait),
(min-width: 900px) {
  :root {
    --_g-full: 2.8rem;
  }
  ._container-xxs {
    --_container-w: 60rem;
  }
  ._container-xs {
    --_container-w: 80rem;
  }
  ._container-sm {
    --_container-w: 100rem;
  }
  ._container-md {
    --_container-w: 120rem;
  }
  ._container-lg {
    --_container-w: 140rem;
  }
  ._container-xl {
    --_container-w: 160rem;
  }
  ._container-xxl {
    --_container-w: 180rem;
  }
}
@media (max-aspect-ratio: 1/1) {
    :root{
        --_isportrait:1;
    }
}
