/* fonts */

/* emoji fonts */
@font-face {
    font-family: "color-emoji";
    src: local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Segoe UI Symbol"), local("Noto Color Emoji"),;
}
@font-face {
    font-family: 'NotoColorEmojiLimited';
    unicode-range: U+1F1E6-1F1FF;
    src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}



/* styles */
/* aliases */
* {
    --rem1: 0.0625rem;
    --rem2: 0.125rem;
    --rem3: 0.1875rem;
    --rem4: 0.25rem;
    --rem5: 0.3125rem;
    --rem6: 0.375rem;
    --rem7: 0.4375rem;
    --rem8: 0.5rem;
    --rem9: 0.5625rem;
    --rem10: 0.625rem;
    --rem11: 0.6875rem;
    --rem12: 0.75rem;
    --rem13: 0.8125rem;
    --rem14: 0.875rem;
    --rem15: 0.9375rem;
    --rem16: 1rem;
    --rem17: 1.0625rem;
    --rem18: 1.125rem;
    --rem19: 1.1875rem;
    --rem20: 1.25rem;
    --rem21: 1.3125rem;
    --rem22: 1.375rem;
    --rem23: 1.4375rem;
    --rem24: 1.5rem;
    --rem25: 1.5625rem;
    --rem26: 1.625rem;
    --rem27: 1.6875rem;
    --rem28: 1.75rem;
    --rem29: 1.8125rem;
    --rem30: 1.875rem;
    --rem31: 1.9375rem;
    --rem32: 2rem;
    --rem33: 2.0625rem;
    --rem34: 2.125rem;
    --rem35: 2.1875rem;
    --rem36: 2.25rem;
    --rem37: 2.3125rem;
    --rem38: 2.375rem;
    --rem39: 2.4375rem;
    --rem40: 2.5rem;
    --rem41: 2.5625rem;
    --rem42: 2.625rem;
    --rem43: 2.6875rem;
    --rem44: 2.75rem;
    --rem45: 2.8125rem;
    --rem46: 2.875rem;
    --rem47: 2.9375rem;
    --rem48: 3rem;
    --rem49: 3.0625rem;
    --rem50: 3.125rem;
    --rem51: 3.1875rem;
    --rem52: 3.25rem;
    --rem53: 3.3125rem;
    --rem54: 3.375rem;
    --rem55: 3.4375rem;
    --rem56: 3.5rem;
    --rem57: 3.5625rem;
    --rem58: 3.625rem;
    --rem59: 3.6875rem;
    --rem60: 3.75rem;
    --rem61: 3.8125rem;
    --rem62: 3.875rem;
    --rem63: 3.9375rem;
    --rem64: 4rem;

    --em1: 0.0625em;
    --em2: 0.125em;
    --em3: 0.1875em;
    --em4: 0.25em;
    --em5: 0.3125em;
    --em6: 0.375em;
    --em7: 0.4375em;
    --em8: 0.5em;
    --em9: 0.5625em;
    --em10: 0.625em;
    --em11: 0.6875em;
    --em12: 0.75em;
    --em13: 0.8125em;
    --em14: 0.875em;
    --em15: 0.9375em;
    --em16: 1em;
    --em17: 1.0625em;
    --em18: 1.125em;
    --em19: 1.1875em;
    --em20: 1.25em;
    --em21: 1.3125em;
    --em22: 1.375em;
    --em23: 1.4375em;
    --em24: 1.5em;
    --em25: 1.5625em;
    --em26: 1.625em;
    --em27: 1.6875em;
    --em28: 1.75em;
    --em29: 1.8125em;
    --em30: 1.875em;
    --em31: 1.9375em;
    --em32: 2em;
    --em33: 2.0625em;
    --em34: 2.125em;
    --em35: 2.1875em;
    --em36: 2.25em;
    --em37: 2.3125em;
    --em38: 2.375em;
    --em39: 2.4375em;
    --em40: 2.5em;
    --em41: 2.5625em;
    --em42: 2.625em;
    --em43: 2.6875em;
    --em44: 2.75em;
    --em45: 2.8125em;
    --em46: 2.875em;
    --em47: 2.9375em;
    --em48: 3em;
    --em49: 3.0625em;
    --em50: 3.125em;
    --em51: 3.1875em;
    --em52: 3.25em;
    --em53: 3.3125em;
    --em54: 3.375em;
    --em55: 3.4375em;
    --em56: 3.5em;
    --em57: 3.5625em;
    --em58: 3.625em;
    --em59: 3.6875em;
    --em60: 3.75em;
    --em61: 3.8125em;
    --em62: 3.875em;
    --em63: 3.9375em;
    --em64: 4em;
}

/* Common */
:root, html, body {
    position: relative;
    width: var(--viewport-width, 100vh);
    height: var(--viewport-height, 100vh);
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-text-size-adjust: none;
}

html {
    --appbar-height: 56px;
    --rootbar-height: 56px;

    --fvw: 100vw;
    --fvh: 100vh;

    --viewport-width: var(--fvw);
    --viewport-height: var(--fvh);

    --vw: calc(var(--fvw, 100vw) / 100);
    --vh: calc(var(--fvh, 100vh) / 100);

    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);

    --viewport-inset-top: 0px;
    --viewport-inset-bottom: calc((var(--fvh) - var(--viewport-height)) + calc(var(--viewport-inset-top) + var(--safe-area-inset-top)));
    --viewport-inset-horizontal: calc(var(--fvw) - var(--viewport-width));
    --viewport-inset-left: calc(var(--viewport-inset-horizontal) / 2);
    --viewport-inset-right: calc(var(--viewport-inset-horizontal) / 2);

    --top-inset: max(var(--safe-area-inset-top), var(--viewport-inset-top, 0px));
    --bottom-inset: max(var(--safe-area-inset-bottom), var(--viewport-inset-bottom, 0px));
    --left-inset: max(var(--safe-area-inset-left), var(--viewport-inset-left, 0px));
    --right-inset: max(var(--safe-area-inset-right), var(--viewport-inset-right, 0px));

    --top-pad: calc(var(--top-inset) + var(--appbar-height));
    --bottom-pad: calc(var(--bottom-inset) + var(--rootbar-height));
    --top-safe-pad: var(--top-inset);
    --bottom-safe-pad: var(--bottom-inset);
    --left-pad: var(--left-inset);
    --right-pad: var(--right-inset);

    --top-fixed-height: 0px;
    --bottom-fixed-height: 0px;


    --basic-backdrop-blur-strength: 8px;
    --basic-backdrop-blur: blur(var(--basic-backdrop-blur-strength));


    --available-max-width: calc(100vw - var(--left-pad) - var(--right-pad));
    --available-max-height: calc(100vh - var(--top-safe-pad) - var(--bottom-safe-pad));

    --width-keep: 420px;
    --width-wrap: 720px;

    --on-screen-limit-width: 450px;
    --on-screen-limit-height: 800px;
    --screen-limit-width: unset;
    --screen-limit-height: unset;


    --rootbar-min-width: var(--available-max-width);
    --rootbar-max-width: var(--available-max-width);


    --basic-ui-inset: 16px;
    --basic-ui-inset-h: var(--basic-ui-inset);
    --basic-ui-inset-v: var(--basic-ui-inset);

    --basic-ui-inset-half: calc(var(--basic-ui-inset) / 2);
    --basic-ui-inset-h-half: var(--basic-ui-inset-half);
    --basic-ui-inset-v-half: var(--basic-ui-inset-half);

    --basic-ui-inset-quarter: calc(var(--basic-ui-inset) / 4);
    --basic-ui-inset-h-quarter: var(--basic-ui-inset-quarter);
    --basic-ui-inset-v-quarter: var(--basic-ui-inset-quarter);


    --color-black: #000;                    --cblk: 0 0 0;
    --color-pseudo-black: #111;             --cpblk: 17 17 17;
    --color-almost-black: #171717;          --cablk: 23 23 23;
    --color-grayscale-darkest: #222;        --cgdt: 34 34 34;
    --color-grayscale-darkside: #292929;    --cgdd: 41 41 41;
    --color-grayscale-darkly: #333;         --cgdy: 51 51 51;
    --color-grayscale-darkness: #444;       --cgds: 68 68 68;
    --color-grayscale-darker: #555;         --cgdr: 85 85 85;
    --color-grayscale-darken: #676767;      --cgdn: 103 103 103;
    --color-grayscale-darkish: #777;        --cgdh: 119 119 119;
    --color-grayscale-dark: #888;           --cgd: 136 136 136;
    --color-grayscale-neutral: #999;        --cgn: 153 153 153;
    --color-grayscale-light: #A8A8A8;       --cgl: 168 168 168;
    --color-grayscale-lightish: #AAA;       --cglh: 170 170 170;
    --color-grayscale-lighten: #B9B9B9;     --cgln: 185 185 185;
    --color-grayscale-lighter: #BBB;        --cglr: 187 187 187;
    --color-grayscale-lightness: #CCC;      --cgls: 204 204 204;
    --color-grayscale-lightly: #D9D9D9;     --cgly: 217 217 217;
    --color-grayscale-lightside: #DDD;      --cgld: 221 221 221;
    --color-grayscale-lightest: #E7E7E7;    --cglt: 231 231 231;
    --color-alomst-white: #EEE;             --cawht: 238 238 238;
    --color-pseudo-white: #F7F7F7;          --cpwht: 247 247 247;
    --color-white: #FFF;                    --cwht: 255 255 255;

    --color-focused: #F46224;               --cf: 244 98 36;
    --color-important: #F48B0E;             --ci: 244 139 14;
    --color-emphasis: #24ACF4;              --ce: 36 172 244;
    --color-emphasis-dark: #2C88BB;         --ced: 44 136 187;


    --color-text-darker: #000;       --ctdr: 0 0 0;
    --color-text-darken: #111;       --ctdn: 17 17 17;
    --color-text-dark: #222;         --ctd: 34 34 34;
    --color-text: #333;              --ct: 51 51 51;
    --color-text-light: #444;        --ctl: 68 68 68;
    --color-text-lighten: #555;      --ctln: 85 85 85;
    --color-text-lighter: #666;      --ctlr: 102 102 102;
    --color-text-lightness: #777;    --ctls: 119 119 119;
    --color-text-lightest: #888;     --ctlt: 136 136 136;
    --color-text-pale: #999;         --ctp: 153 153 153;
    --color-text-palen: #AAA;        --ctpn: 170 170 170;
    --color-text-paler: #BBB;        --ctpr: 187 187 187;
    --color-text-paleness: #CCC;     --ctps: 204 204 204;
    --color-text-palest: #DDD;       --ctpt: 221 221 221;
    --color-text-faint: #EEE;        --ctf: 238 238 238;
    --color-text-inverse: #FFF;      --cai: 255 255 255;
    --color-anti-text: #FFF;         --cat: 255 255 255;
    

    --color-holiday: #F46224;                       --choli: 244 98 36;
    --color-holiday-vivid: #CF6538;                 --choliv: 207 101 56;
    --color-holiday-gray: #F0AC8E;                  --cholig: 240 172 142;
    --color-sunday: var(--color-holiday);             --csun: var(--choli);
    --color-sunday-vivid: var(--color-holiday-vivid); --csunv: var(--choliv);
    --color-sunday-gray: var(--color-holiday-gray);   --csung: var(--cholig);
    --color-saturday: #24ACF4;                      --csat: 36 172 244;
    --color-saturday-vivid: #4B9DC9;                --csatv: 75 157 201;
    --color-saturday-gray: #A7D6F0;                 --csatg: 167 214 240;
    --color-today: #66CF20;                         --ctd: 102 207 32;
    --color-today-vivid: #5CAC27;                   --ctdv: 92 172 39;
    --color-today-gray: #A3CC88;                    --ctdg: 163 204 136;
    --color-selected-day: #28C2C2;                  --csd: 40 194 194;
    --color-selected-day-vivid: #2D8F8F;            --csdv: 45 143 143;
    --color-selected-day-gray: #84C4C4;             --csdg: 132 196 196;
    --color-important-day: #F48B0E;                 --cid: 244 139 14;
    --color-important-day-vivid: #D88C2E;           --cidv: 216 140 46;
    --color-important-day-gray: #F5BF7E;            --cidg: 245 191 126;

    --color-boundary-dim: var(--color-black);                       --cbdm: var(--cblk);
    --color-boundary-dimmy: var(--color-pseudo-black);              --cbdmy: var(--cpblk);
    --color-boundary-deepdark: var(--color-almost-black);           --cbdd: var(--cablk);
    --color-boundary-darkest: var(--color-grayscale-darkest);       --cbdt: var(--cgdt);
    --color-boundary-darkside: var(--color-grayscale-darkside);     --cbdd: var(--cgdd);
    --color-boundary-darkly: var(--color-grayscale-darkly);         --cbdy: var(--cgdy);
    --color-boundary-darkness: var(--color-grayscale-darkness);     --cbds: var(--cgds);
    --color-boundary-darker: var(--color-grayscale-darker);         --cbdr: var(--cgdr);
    --color-boundary-darken: var(--color-grayscale-darken);         --cbdn: var(--cgdn);
    --color-boundary-darkish: var(--color-grayscale-darkish);       --cbdh: var(--cgdh);
    --color-boundary-dark: var(--color-grayscale-dark);             --cbd: var(--cgd);
    --color-boundary: var(--color-grayscale-neutral);               --cb: var(--cgn);
    --color-boundary-light: var(--color-grayscale-light);           --cbl: var(--cgl);
    --color-boundary-lightish: var(--color-grayscale-lightish);     --cblh: var(--cglh);
    --color-boundary-lighten: var(--color-grayscale-lighten);       --cbln: var(--cgln);
    --color-boundary-lighter: var(--color-grayscale-lighter);       --cblr: var(--cglr);
    --color-boundary-lightness: var(--color-grayscale-lightness);   --cbls: var(--cgls);
    --color-boundary-lightly: var(--color-grayscale-lightly);       --cbly: var(--cgly);
    --color-boundary-lightside: var(--color-grayscale-lightside);   --cbld: var(--cgld);
    --color-boundary-lightest: var(--color-grayscale-lightest);     --cblt: var(--cglt);
    --color-boundary-highlight: var(--color-alomst-white);          --cbhl: var(--cawht);
    --color-boundary-brighty: var(--color-pseudo-white);            --cbbry: var(--cpwht);
    --color-boundary-bright: var(--color-white);                    --cbbr: var(--cwht);

    --color-boundary-o1: rgba(var(--cbdm) / 1%);
    --color-boundary-o3: rgba(var(--cbdm) / 3%);
    --color-boundary-o5: rgba(var(--cbdm) / 5%);
    --color-boundary-o7: rgba(var(--cbdm) / 7%);
    --color-boundary-o10: rgba(var(--cbdm) / 10%);
    --color-boundary-o15: rgba(var(--cbdm) / 15%);
    --color-boundary-o20: rgba(var(--cbdm) / 20%);
    --color-boundary-o25: rgba(var(--cbdm) / 25%);
    --color-boundary-o30: rgba(var(--cbdm) / 30%);
    --color-boundary-o35: rgba(var(--cbdm) / 35%);
    --color-boundary-o40: rgba(var(--cbdm) / 40%);
    --color-boundary-o45: rgba(var(--cbdm) / 45%);
    --color-boundary-o50: rgba(var(--cbdm) / 50%);
    --color-boundary-o55: rgba(var(--cbdm) / 55%);
    --color-boundary-o60: rgba(var(--cbdm) / 60%);
    --color-boundary-o65: rgba(var(--cbdm) / 65%);
    --color-boundary-o70: rgba(var(--cbdm) / 70%);
    --color-boundary-o75: rgba(var(--cbdm) / 75%);
    --color-boundary-o80: rgba(var(--cbdm) / 80%);
    --color-boundary-o85: rgba(var(--cbdm) / 85%);
    --color-boundary-o90: rgba(var(--cbdm) / 90%);
    --color-boundary-o93: rgba(var(--cbdm) / 93%);
    --color-boundary-o95: rgba(var(--cbdm) / 95%);
    --color-boundary-o97: rgba(var(--cbdm) / 97%);
    --color-boundary-o99: rgba(var(--cbdm) / 99%);

    --color-boundary-foggy-o1: rgba(var(--cbbr) / 1%);
    --color-boundary-foggy-o3: rgba(var(--cbbr) / 3%);
    --color-boundary-foggy-o5: rgba(var(--cbbr) / 5%);
    --color-boundary-foggy-o7: rgba(var(--cbbr) / 7%);
    --color-boundary-foggy-o10: rgba(var(--cbbr) / 10%);
    --color-boundary-foggy-o15: rgba(var(--cbbr) / 15%);
    --color-boundary-foggy-o20: rgba(var(--cbbr) / 20%);
    --color-boundary-foggy-o25: rgba(var(--cbbr) / 25%);
    --color-boundary-foggy-o30: rgba(var(--cbbr) / 30%);
    --color-boundary-foggy-o35: rgba(var(--cbbr) / 35%);
    --color-boundary-foggy-o40: rgba(var(--cbbr) / 40%);
    --color-boundary-foggy-o45: rgba(var(--cbbr) / 45%);
    --color-boundary-foggy-o50: rgba(var(--cbbr) / 50%);
    --color-boundary-foggy-o55: rgba(var(--cbbr) / 55%);
    --color-boundary-foggy-o60: rgba(var(--cbbr) / 60%);
    --color-boundary-foggy-o65: rgba(var(--cbbr) / 65%);
    --color-boundary-foggy-o70: rgba(var(--cbbr) / 70%);
    --color-boundary-foggy-o75: rgba(var(--cbbr) / 75%);
    --color-boundary-foggy-o80: rgba(var(--cbbr) / 80%);
    --color-boundary-foggy-o85: rgba(var(--cbbr) / 85%);
    --color-boundary-foggy-o90: rgba(var(--cbbr) / 90%);
    --color-boundary-foggy-o93: rgba(var(--cbbr) / 93%);
    --color-boundary-foggy-o95: rgba(var(--cbbr) / 95%);
    --color-boundary-foggy-o97: rgba(var(--cbbr) / 97%);
    --color-boundary-foggy-o99: rgba(var(--cbbr) / 99%);

    --color-point-dim: var(--color-black);                  --cpdm: var(--cblk);
    --color-point-dark: var(--color-grayscale-darker);      --cpd: var(--cgdr);
    --color-point: var(--color-grayscale-dark);             --cp: var(--cgd);
    --color-point-light: var(--color-grayscale-lighter);    --cpl: var(--cglr);
    --color-point-bright: var(--color-white);               --cpbr: var(--cwht);
    
    --color-point-sub-dim: var(--color-black);                  --cpsdm: var(--cblk);
    --color-point-sub-dark: var(--color-grayscale-darker);      --cpsd: var(--cgdr);
    --color-point-sub: var(--color-grayscale-dark);             --cps: var(--cgd);
    --color-point-sub-light: var(--color-grayscale-lighter);    --cpsl: var(--cglr);
    --color-point-sub-bright: var(--color-white);               --cpsbr: var(--cwht);


    /* dark & light shiftable */
    --color-adaptive-dimmest: var(--color-black);                --cadmt: var(--cblk);
    --color-adaptive-dim: var(--color-pseudo-black);             --cadm: var(--cpblk);
    --color-adaptive-dark: var(--color-grayscale-darkness);      --cad: var(--cgds);
    --color-adaptive: var(--color-grayscale-neutral);            --ca: var(--cgn);
    --color-adaptive-light: var(--color-grayscale-lightness);    --cal: var(--cgls);
    --color-adaptive-bright: var(--color-pseudo-white);          --cabr: var(--cpwht);
    --color-adaptive-brightest: var(--color-white);              --cabrt: var(--cwht);


    

    --gif-tp: url("data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");


    --svg-empty-18x18: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 18 18'%3E%3C/svg%3E");
    
    --svg-home: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_54_24)'%3E%3Cpath d='M4 18H14C16.2 18 18 16.2 18 14V7.7C18 6.4 17.4 5.3 16.4 4.5L11.4 0.7C10 -0.3 8 -0.3 6.6 0.8L1.6 4.5C0.6 5.3 0 6.4 0 7.7V14C0 16.2 1.8 18 4 18ZM2 7.7C2 7.1 2.3 6.5 2.8 6.1L7.8 2.3C8.2 2 8.6 1.9 9 1.9C9.4 1.9 9.8 1.9 10.2 2.3L15.2 6.1C15.7 6.5 16 7.1 16 7.7V14C16 15.1 15.1 16 14 16H4C2.9 16 2 15.1 2 14V7.7Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_54_24'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    --svg-back-arrow: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' style='width: 20px; height: 20px; '%3E%3Cpath d='M9.98529 0.807617L11.3995 2.22183L2.20712 11.4142L0.792903 10L9.98529 0.807617Z' fill='%23222222'/%3E%3Cpath d='M0.792908 10L2.20712 8.58579L11.3995 17.7782L9.9853 19.1924L0.792908 10Z' fill='%23222222'/%3E%3Cpath d='M2.20709 9L19.2071 9V11H2.20709V9Z' fill='%23222222'/%3E%3C/svg%3E%0A");
    --svg-back: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.7783 10.8076L25.1925 12.2218L16.0001 21.4142L14.5859 20L23.7783 10.8076Z' fill='%23222222'/%3E%3Cpath d='M14.5859 20L16.0002 18.5858L25.1925 27.7782L23.7783 29.1924L14.5859 20Z' fill='%23222222'/%3E%3C/svg%3E%0A");
    --svg-forward-arrow: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0147 0.807617L8.60051 2.22183L17.7929 11.4142L19.2071 10L10.0147 0.807617Z' fill='%23222222'/%3E%3Cpath d='M19.2071 10L17.7929 8.58579L8.60051 17.7782L10.0147 19.1924L19.2071 10Z' fill='%23222222'/%3E%3Cpath d='M17.7929 9H0.792908V11H17.7929V9Z' fill='%23222222'/%3E%3C/svg%3E%0A");
    --svg-forward: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.2217 10.8076L14.8075 12.2218L23.9999 21.4142L25.4141 20L16.2217 10.8076Z' fill='%23222222'/%3E%3Cpath d='M25.4141 20L23.9998 18.5858L14.8075 27.7782L16.2217 29.1924L25.4141 20Z' fill='%23222222'/%3E%3C/svg%3E%0A");
    --svg-close: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.22183 0.807588L0.807617 2.2218L17.7782 19.1924L19.1924 17.7782L2.22183 0.807588Z' fill='%23222222'/%3E%3Cpath d='M0.807619 17.7782L2.22183 19.1924L19.1924 2.22183L17.7782 0.807621L0.807619 17.7782Z' fill='%23222222'/%3E%3C/svg%3E");
    --svg-reload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23222222' viewBox='0 0 34 34'%3E%3Cpath d='M33.21,12.05V.79l-4.2,4.2C25.94,1.91,21.69,0,17,0,7.61,0,0,7.61,0,17s7.61,17,17,17c6.32,0,11.82-3.46,14.75-8.57l-3.47-1.99c-2.24,3.91-6.45,6.56-11.28,6.56-7.17,0-13-5.83-13-13s5.83-13,13-13c3.58,0,6.83,1.46,9.18,3.82l-4.23,4.23h11.26Z'/%3E%3C/svg%3E");

    --svg-prev: url("data:image/svg+xml,%3Csvg width='12' height='20' viewBox='0 0 12 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.77831 0.807602L11.1925 2.2218L2.00011 11.4142L0.585907 10L9.77831 0.807602Z' fill='%23333333'/%3E%3Cpath d='M0.585907 10L2.00021 8.5858L11.1925 17.7782L9.77831 19.1924L0.585907 10Z' fill='%23333333'/%3E%3C/svg%3E");
    --svg-next: url("data:image/svg+xml,%3Csvg width='12' height='20' viewBox='0 0 12 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.22169 0.807602L0.807495 2.2218L9.9999 11.4142L11.4141 10L2.22169 0.807602Z' fill='%23333333'/%3E%3Cpath d='M11.4141 10L9.99979 8.5858L0.807495 17.7782L2.22169 19.1924L11.4141 10Z' fill='%23333333'/%3E%3C/svg%3E");
    --svg-upper: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.3848 9.1924L16.9706 10.6066L7.7782 1.4142L9.1924 0L18.3848 9.1924Z' fill='%23222222'/%3E%3Cpath d='M9.1924 0L10.6066 1.4143L1.4142 10.6066L-3.8147e-06 9.1924L9.1924 0Z' fill='%23222222'/%3E%3C/svg%3E");
    --svg-lower: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.110901 2.3033L1.5251 0.8891L10.7175 10.0815L9.3033 11.4957L0.110901 2.3033Z' fill='%23222222'/%3E%3Cpath d='M9.3033 11.4957L7.8891 10.0814L17.0815 0.8891L18.4957 2.3033L9.3033 11.4957Z' fill='%23222222'/%3E%3C/svg%3E");
    --svg-dropdown: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41 0.794922L6 5.37492L10.59 0.794922L12 2.20492L6 8.20492L0 2.20492L1.41 0.794922Z' fill='%23999999'/%3E%3C/svg%3E");
    --svg-dropdown-24x24: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.12 9.53027L12.295 13.3469L8.47004 9.53027L7.29504 10.7053L12.295 15.7053L17.295 10.7053L16.12 9.53027Z' fill='%23777777'/%3E%3C/svg%3E");

    --svg-drag-handle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23222222'%3E%3Cpath d='M200-380v-40h560v40H200Zm0-160v-40h560v40H200Z'/%3E%3C/svg%3E");

    --svg-from-minimum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23333333;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;%7D .st1%7Bfill:none;stroke:%23333333;stroke-width:1.5;%7D%0A%3C/style%3E%3Cpath class='st0' d='M9.5,17.5L12,20l2.5-2.5'/%3E%3Cpath class='st0' d='M9.5,6.5L12,4l2.5,2.5'/%3E%3Cpath class='st1' d='M15,14.3H9c-2.2,0-4-0.4-4-0.9v-2.7c0-0.5,1.8-0.9,4-0.9h6c2.2,0,4,0.4,4,0.9v2.7C19,13.9,17.2,14.3,15,14.3z' /%3E%3C/svg%3E");
    --svg-from-medium-to-larger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23333333;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;%7D .st1%7Bfill:none;stroke:%23333333;stroke-width:1.5;%7D%0A%3C/style%3E%3Cpath class='st0' d='M9.5,15.5L12,18l2.5-2.5'/%3E%3Cpath class='st0' d='M9.5,8.5L12,6l2.5,2.5'/%3E%3Cpath class='st1' d='M15,20H9c-2.2,0-4-1.4-4-3.2V7.2C5,5.4,6.8,4,9,4h6c2.2,0,4,1.4,4,3.2v9.6C19,18.6,17.2,20,15,20z'/%3E%3C/svg%3E");
    --svg-from-medium-to-smaller: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23333333;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;%7D .st1%7Bfill:none;stroke:%23333333;stroke-width:1.5;%7D%0A%3C/style%3E%3Cpath class='st0' d='M14.5,16.5L12,14l-2.5,2.5'/%3E%3Cpath class='st0' d='M14.5,7.5L12,10L9.5,7.5'/%3E%3Cpath class='st1' d='M15,20H9c-2.2,0-4-1.4-4-3.2V7.2C5,5.4,6.8,4,9,4h6c2.2,0,4,1.4,4,3.2v9.6C19,18.6,17.2,20,15,20z'/%3E%3C/svg%3E");
    --svg-from-maximum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23333333;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;%7D .st1%7Bfill:none;stroke:%23333333;stroke-width:1.5;%7D%0A%3C/style%3E%3Cpath class='st0' d='M14.5,18L12,15.5L9.5,18'/%3E%3Cpath class='st0' d='M14.5,6L12,8.5L9.5,6'/%3E%3Cpath class='st1' d='M15,22H9c-2.2,0-4-1.8-4-4V6c0-2.2,1.8-4,4-4h6c2.2,0,4,1.8,4,4v12C19,20.2,17.2,22,15,22z'/%3E%3C/svg%3E");

    --svg-to-collapsed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 48 48' style='enable-background:new 0 0 48 48;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st1%7Bfill:none;stroke:%23333333;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;%7D%0A%3C/style%3E%3Cpath class='st1' d='M14,30.2l10-6l10,6'/%3E%3Cpath class='st1' d='M12,18.2h24'/%3E%3C/svg%3E");
    --svg-to-expanded: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 48 48' style='enable-background:new 0 0 48 48;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st1%7Bfill:none;stroke:%23333333;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;%7D%0A%3C/style%3E%3Cpath class='st1' d='M34,24.2l-10,6l-10-6'/%3E%3Cpath class='st1' d='M12,18.2h24'/%3E%3C/svg%3E");

    --svg-checkbox-unchecked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 18 18'%3E%3Cpath fill='%23000000' fill-rule='evenodd' d='M16,2 L16,16 L2,16 L2,2 L16,2 L16,2 Z M16,0 L2,0 C0.9,0 0,0.9 0,2 L0,16 C0,17.1 0.9,18 2,18 L16,18 C17.1,18 18,17.1 18,16 L18,2 C18,0.9 17.1,0 16,0 L16,0 L16,0 Z'/%3E%3C/svg%3E");
    --svg-checkbox-unchecked: var(--svg-empty-18x18);
    --svg-checkbox-checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' d='M16,16H2V2h9.6c.2,0,.4-.2.4-.4V.4c0-.2-.2-.4-.4-.4H2C.9,0,0,.9,0,2v14c0,1.1.9,2,2,2h14c1.1,0,2-.9,2-2v-7.6c0-.2-.2-.4-.4-.4h-1.2c-.2,0-.4.2-.4.4v7.6h0Z'/%3E%3C/svg%3E");
    --svg-checkbox-checked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' d='M3.8,8.2c-.2.2-.2.4,0,.6l3.9,3.9c.2.2.4.2.6,0L17.7,3.3c.2-.2.2-.4,0-.6l-.8-.8c-.2-.2-.4-.2-.6,0l-8,8c-.2.2-.4.2-.6,0l-2.5-2.5c-.2-.2-.4-.2-.6,0l-.8.8Z'/%3E%3C/svg%3E");

    --svg-more-v-slim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 12 24' style='enable-background:new 0 0 12 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bstroke:%23333333;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;%7D%0A%3C/style%3E%3Cpath class='st0' d='M6,12.5c0.3,0,0.5-0.2,0.5-0.5S6.3,11.5,6,11.5S5.5,11.7,5.5,12S5.7,12.5,6,12.5z'/%3E%3Cpath class='st0' d='M6,18.5c0.3,0,0.5-0.2,0.5-0.5S6.3,17.5,6,17.5S5.5,17.7,5.5,18S5.7,18.5,6,18.5z'/%3E%3Cpath class='st0' d='M6,6.5c0.3,0,0.5-0.2,0.5-0.5S6.3,5.5,6,5.5S5.5,5.7,5.5,6S5.7,6.5,6,6.5z'/%3E%3C/svg%3E");

    --svg-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23C5D2DD;%7D .st1%7Bfill:%23E7E7E7;%7D .st2%7Bfill:%23FDD105;%7D .st3%7Bfill:%23FFB300;%7D%0A%3C/style%3E%3Cg transform='translate(0 -1028.4)'%3E%3Cpath class='st0' d='M5,1032.4c-1.1,0-2,0.9-2,2v14c0,1.1,0.9,2,2,2h6h2h6c1.1,0,2-0.9,2-2v-14c0-1.1-0.9-2-2-2h-6h-2H5z'/%3E%3Cpath class='st1' d='M5,1031.4c-1.1,0-2,0.9-2,2v14c0,1.1,0.9,2,2,2h6h2h6c1.1,0,2-0.9,2-2v-14c0-1.1-0.9-2-2-2h-6h-2H5z'/%3E%3Cpath class='st2' d='M5,1031.4c-1.1,0-2,0.9-2,2v3v1h18v-1v-3c0-1.1-0.9-2-2-2h-6h-2H5z'/%3E%3Cpath class='st3' d='M7.5,1033.9c0,0.8-0.7,1.5-1.5,1.5s-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5S7.5,1033.1,7.5,1033.9z'/%3E%3Cpath class='st3' d='M19.5,1033.9c0,0.8-0.7,1.5-1.5,1.5s-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5S19.5,1033.1,19.5,1033.9z'/%3E%3Cg%3E%3Cpath class='st0' d='M18,1029.4c-0.6,0-1,0.4-1,1v3c0,0.5,0.4,1,1,1s1-0.5,1-1v-3C19,1029.8,18.6,1029.4,18,1029.4z'/%3E%3Cpath class='st0' d='M6,1029.4c-0.6,0-1,0.4-1,1v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3C7,1029.8,6.6,1029.4,6,1029.4z'/%3E%3Cpath class='st0' d='M5,1039.4v2h2v-2H5z M8,1039.4v2h2v-2H8z M11,1039.4v2h2v-2H11z M14,1039.4v2h2v-2H14z M17,1039.4v2h2v-2H17z '/%3E%3Cpath class='st0' d='M5,1042.4v2h2v-2H5z M8,1042.4v2h2v-2H8z M11,1042.4v2h2v-2H11z M14,1042.4v2h2v-2H14z M17,1042.4v2h2v-2H17z '/%3E%3Cpath class='st0' d='M5,1045.4v2h2v-2H5z M8,1045.4v2h2v-2H8z M11,1045.4v2h2v-2H11z M14,1045.4v2h2v-2H14z M17,1045.4v2h2v-2H17z '/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    --svg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");

    
    --font-for-emoji: 'NotoColorEmojiLimited', color-emoji, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
}
@media all and (display-mode: standalone) {
html {

}
} @media all and (not (display-mode: standalone)) {
html {

}
}
@media all and (min-height: 700px) and (min-width: 740px) {
html {
    --screen-limit-width: var(--on-screen-limit-width);
    --screen-limit-height: var(--on-screen-limit-height);

    --rootbar-min-width: min(max(var(--width-keep), var(--on-screen-limit-width)), var(--available-max-width));
    --rootbar-max-width: min(var(--width-wrap), var(--available-max-width));
}
}


/* vertical fit vertical scroll */
html .vfv_scroll::-webkit-scrollbar {
    width: 8px;
    border: solid 0px transparent;
}

html .vfv_scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 8px 8px transparent;
    border: solid 2px transparent;
}

html .vfv_scroll::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 8px 8px #4444;
    border: solid 2px transparent;
    border-top-width: calc(var(--top-pad) + var(--top-fixed-height) + 2px);
    border-bottom-width: calc(var(--bottom-pad) + var(--bottom-fixed-height) + 2px);
}

html .vfv_scroll::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 8px 8px #6666;
}

html .vfv_scroll::-webkit-scrollbar-thumb:active {
    box-shadow: inset 0 0 8px 8px #AAA8;
}


/* top extended vertical scroll */
html .txv_scroll::-webkit-scrollbar {
    width: 8px;
    border: solid 0px transparent;
}

html .txv_scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 8px 8px transparent;
    border: solid 2px transparent;
}

html .txv_scroll::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 8px 8px #4444;
    border: solid 2px transparent;
    border-top-width: calc(var(--top-pad) + var(--top-fixed-height) + 2px);
    border-bottom-width: 2px;
}

html .txv_scroll::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 8px 8px #6666;
}

html .txv_scroll::-webkit-scrollbar-thumb:active {
    box-shadow: inset 0 0 8px 8px #AAA8;
}


/* bottom extended vertical scroll */
html .bxv_scroll::-webkit-scrollbar {
    width: 8px;
    border: solid 0px transparent;
}

html .bxv_scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 8px 8px transparent;
    border: solid 2px transparent;
}

html .bxv_scroll::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 8px 8px #4444;
    border: solid 2px transparent;
    border-top-width: 2px;
    border-bottom-width: calc(var(--bottom-pad) + var(--bottom-fixed-height) + 2px);
}

html .bxv_scroll::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 8px 8px #6666;
}

html .bxv_scroll::-webkit-scrollbar-thumb:active {
    box-shadow: inset 0 0 8px 8px #AAA8;
}


/* safed vertical scroll */
html .sv_scroll::-webkit-scrollbar {
    width: 8px;
    border: solid 0px transparent;
}

html .sv_scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 8px 8px transparent;
    border: solid 2px transparent;
}

html .sv_scroll::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 8px 8px #4444;
    border: solid 2px transparent;
    border-top-width: calc(var(--top-safe-pad) + var(--top-fixed-height) + 2px);
    border-bottom-width: calc(var(--bottom-safe-pad) + var(--bottom-fixed-height) + 2px);
}

html .sv_scroll::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 8px 8px #6666;
}

html .sv_scroll::-webkit-scrollbar-thumb:active {
    box-shadow: inset 0 0 8px 8px #AAA8;
}

/* basic vertical scroll */
html .v_scroll::-webkit-scrollbar {
    width: 8px;
    border: solid 0px transparent;
}

html .v_scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 8px 8px transparent;
    border: solid 2px transparent;
}

html .v_scroll::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 8px 8px #4444;
    border: solid 2px transparent;
    border-top-width: 2px;
    border-bottom-width: 2px;
}

html .v_scroll::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 8px 8px #6666;
}

html .v_scroll::-webkit-scrollbar-thumb:active {
    box-shadow: inset 0 0 8px 8px #AAA8;
}


/* basic horizontal scroll */
html .h_scroll::-webkit-scrollbar {
    height: 8px;
    border: solid 0px transparent;
}

html .h_scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 8px 8px transparent;
    border: solid 2px transparent;
}

html .h_scroll::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 8px 8px #4444;
    border: solid 2px transparent;
    border-left-width: 2px;
    border-right-width: 2px;
}

html .h_scroll::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 8px 8px #6666;
}

html .h_scroll::-webkit-scrollbar-thumb:active {
    box-shadow: inset 0 0 8px 8px #AAA8;
}


/* vertical and horizontal thiner scroll */
html .thin_scroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    border: solid 0px transparent;
}

html .thin_scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 8px 8px transparent;
    border: solid 0px transparent;
}

html .thin_scroll::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 8px 8px #4444;
    border: solid 0px transparent;
}

html .thin_scroll::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 8px 8px #6666;
}

html .thin_scroll::-webkit-scrollbar-thumb:active {
    box-shadow: inset 0 0 8px 8px #AAA8;
}


body {
    position: fixed;

    color: var(--color-text);

    --common-bg-color: var(--color-grayscale-lightness);
    background-color: var(--common-bg-color);

    font-size: 16px;
}


body { --support-container-query: 0; }
@supports (container-type: inline-size) { 
    body { --support-container-query: 1; }
}

@media all and (display-mode: standalone) {
    html {

    }
    body {
        --display-mode: standalone;
    }
} @media all and (not (display-mode: standalone)) {
    html {

    }
    body {
        --display-mode: browser;
    }
}
body {
    --ui-extensive: false;
}
@media all and (min-height: 700px) and (min-width: 740px) {
    body {
        --ui-extensive: true;
    }
}


body[data-on-resizing="v"] * { cursor: row-resize !important; }
body[data-on-resizing="h"] * { cursor: col-resize !important; }
body[data-on-resizing="n"] * { cursor: n-resize !important; }
body[data-on-resizing="ne"] * { cursor: ne-resize !important; }
body[data-on-resizing="nesw"] * { cursor: nesw-resize !important; }
body[data-on-resizing="ns"] * { cursor: ns-resize !important; }
body[data-on-resizing="nwse"] * { cursor: nwse-resize !important; }
body[data-on-resizing="nw"] * { cursor: nw-resize !important; }
body[data-on-resizing="e"] * { cursor: e-resize !important; }
body[data-on-resizing="ew"] * { cursor: ew-resize !important; }
body[data-on-resizing="s"] * { cursor: s-resize !important; }
body[data-on-resizing="se"] * { cursor: se-resize !important; }
body[data-on-resizing="sw"] * { cursor: sw-resize !important; }
body[data-on-resizing="w"] * { cursor: w-resize !important; }
body[data-on-moving="1"] * { cursor: move !important; }
body[data-not-allowed="1"] * { cursor: not-allowed !important; }

body button { color: var(--color-text); }

body .emoji { font-family: var(--font-for-emoji) !important; font-variant-emoji: emoji; }

body .square { aspect-ratio: 1; }


/* tiled button preset */
body .tp_tiled_btn { --bg-hover: var(--color-boundary-o25); --bg-active: var(--color-boundary-o50); --outline-width: 3px; --backdrop: blur(1px); margin: 0; padding: 0; border-style: none; border-width: 0; background-color: transparent; backdrop-filter: var(--backdrop); -webkit-backdrop-filter: var(--backdrop); cursor: pointer; user-select: none; transition-duration: 0.2s; will-change: auto; }
body .tp_tiled_btn:not(.no_round_edges) { border-radius: 8px; }
body .tp_tiled_btn.seamless:focus { outline-style: none; filter: drop-shadow(0px 2px 4px rgb(0 0 0 / 25%)); }
body .tp_tiled_btn:not(.seamless):focus { outline: solid var(--outline-width) rgb(var(--cmd) / 70%); outline-offset: calc(var(--outline-width) * -1); }
body .tp_tiled_btn:not(.seamless):hover { background-color: var(--bg-hover); }
body .tp_tiled_btn:not(.seamless):active { background-color: var(--bg-active); }
body .tp_tiled_btn.clean { backdrop-filter: none; -webkit-backdrop-filter: none; }
body .tp_tiled_btn.cloudy { backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); }
body .tp_tiled_btn.minpad > span { padding: 0 8px; }
body .tp_tiled_btn.padded { padding: 0 12px; }
body .tp_tiled_btn.padded > span { padding: 0 4px; }
body .tp_tiled_btn.fit_pad_h { padding-left: 0; padding-right: 0; }
body .tp_tiled_btn.fit_pad_v { padding-top: 0; padding-bottom: 0; }

/* extra */
body img.logo { filter: drop-shadow(0 0 5px rgb(var(--cglr) / 60%)); }


/* global classes */
.text_darker { color: var(--color-text-darker); }
.text_darken { color: var(--color-text-darken); }
.text_dark { color: var(--color-text-dark); }
.text_gray { color: var(--color-text); }
.text_light { color: var(--color-text-light); }
.text_lighten { color: var(--color-text-lighten); }
.text_lighter { color: var(--color-text-lighter); }
.text_lightness { color: var(--color-text-lightness); }
.text_lightest { color: var(--color-text-lightest); }
.text_pale { color: var(--color-text-pale); }
.text_palen { color: var(--color-text-palen); }
.text_paler { color: var(--color-text-paler); }
.text_paleness { color: var(--color-text-paleness); }
.text_palest { color: var(--color-text-palest); }
.text_faint { color: var(--color-text-faint); }
.text_inverse { color: var(--color-text-inverse); }

.font_s8 { font-size: 0.5em; }
.font_s9 { font-size: 0.5625em; }
.font_s10 { font-size: 0.625em; }
.font_s11 { font-size: 0.6875em; }
.font_s12 { font-size: 0.75em; }
.font_s13 { font-size: 0.8125em; }
.font_s14 { font-size: 0.875em; }
.font_s15 { font-size: 0.9375em; }
.font_s16 { font-size: 1em; }
.font_s17 { font-size: 1.0625em; }
.font_s18 { font-size: 1.125em; }
.font_s19 { font-size: 1.1875em; }
.font_s20 { font-size: 1.25em; }
.font_s21 { font-size: 1.3125em; }
.font_s22 { font-size: 1.375em; }
.font_s23 { font-size: 1.4375em; }
.font_s24 { font-size: 1.5em; }
.font_s25 { font-size: 1.5625em; }
.font_s26 { font-size: 1.625em; }
.font_s27 { font-size: 1.6875em; }
.font_s28 { font-size: 1.75em; }
.font_s29 { font-size: 1.8125em; }
.font_s30 { font-size: 1.875em; }
.font_s31 { font-size: 1.875em; }
.font_s32 { font-size: 2em; }
.font_s33 { font-size: 2.0625em; }
.font_s34 { font-size: 2.0625em; }
.font_s35 { font-size: 2.1875em; }
.font_s36 { font-size: 2.25em; }
.font_s37 { font-size: 2.3125em; }
.font_s38 { font-size: 2.375em; }
.font_s39 { font-size: 2.4375em; }
.font_s40 { font-size: 2.5em; }
.font_s41 { font-size: 2.5625em; }
.font_s42 { font-size: 2.625em; }
.font_s43 { font-size: 2.625em; }
.font_s44 { font-size: 2.75em; }
.font_s45 { font-size: 2.8125em; }
.font_s46 { font-size: 2.875em; }
.font_s47 { font-size: 2.875em; }
.font_s48 { font-size: 3em; }

.font_sr8 { font-size: 0.5rem; }
.font_sr9 { font-size: 0.5625rem; }
.font_sr10 { font-size: 0.625rem; }
.font_sr11 { font-size: 0.6875rem; }
.font_sr12 { font-size: 0.75rem; }
.font_sr13 { font-size: 0.8125rem; }
.font_sr14 { font-size: 0.875rem; }
.font_sr15 { font-size: 0.9375rem; }
.font_sr16 { font-size: 1rem; }
.font_sr17 { font-size: 1.0625rem; }
.font_sr18 { font-size: 1.125rem; }
.font_sr19 { font-size: 1.1875rem; }
.font_sr20 { font-size: 1.25rem; }
.font_sr21 { font-size: 1.3125rem; }
.font_sr22 { font-size: 1.375rem; }
.font_sr23 { font-size: 1.4375rem; }
.font_sr24 { font-size: 1.5rem; }
.font_sr25 { font-size: 1.5625rem; }
.font_sr26 { font-size: 1.625rem; }
.font_sr27 { font-size: 1.6875rem; }
.font_sr28 { font-size: 1.75rem; }
.font_sr29 { font-size: 1.8125rem; }
.font_sr30 { font-size: 1.875rem; }
.font_sr31 { font-size: 1.875rem; }
.font_sr32 { font-size: 2rem; }
.font_sr33 { font-size: 2.0625rem; }
.font_sr34 { font-size: 2.0625rem; }
.font_sr35 { font-size: 2.1875rem; }
.font_sr36 { font-size: 2.25rem; }
.font_sr37 { font-size: 2.3125rem; }
.font_sr38 { font-size: 2.375rem; }
.font_sr39 { font-size: 2.4375rem; }
.font_sr40 { font-size: 2.5rem; }
.font_sr41 { font-size: 2.5625rem; }
.font_sr42 { font-size: 2.625rem; }
.font_sr43 { font-size: 2.625rem; }
.font_sr44 { font-size: 2.75rem; }
.font_sr45 { font-size: 2.8125rem; }
.font_sr46 { font-size: 2.875rem; }
.font_sr47 { font-size: 2.875rem; }
.font_sr48 { font-size: 3rem; }

.font_sp8 { font-size: 8px; }
.font_sp9 { font-size: 9px; }
.font_sp10 { font-size: 10px; }
.font_sp11 { font-size: 11px; }
.font_sp12 { font-size: 12px; }
.font_sp13 { font-size: 13px; }
.font_sp14 { font-size: 14px; }
.font_sp15 { font-size: 15px; }
.font_sp16 { font-size: 16px; }
.font_sp17 { font-size: 17px; }
.font_sp18 { font-size: 18px; }
.font_sp19 { font-size: 19px; }
.font_sp20 { font-size: 20px; }
.font_sp21 { font-size: 21px; }
.font_sp22 { font-size: 22px; }
.font_sp23 { font-size: 23px; }
.font_sp24 { font-size: 24px; }
.font_sp25 { font-size: 25px; }
.font_sp26 { font-size: 26px; }
.font_sp27 { font-size: 27px; }
.font_sp28 { font-size: 28px; }
.font_sp29 { font-size: 29px; }
.font_sp30 { font-size: 30px; }
.font_sp31 { font-size: 31px; }
.font_sp32 { font-size: 32px; }
.font_sp33 { font-size: 33px; }
.font_sp34 { font-size: 34px; }
.font_sp35 { font-size: 35px; }
.font_sp36 { font-size: 36px; }
.font_sp37 { font-size: 37px; }
.font_sp38 { font-size: 38px; }
.font_sp39 { font-size: 39px; }
.font_sp40 { font-size: 40px; }
.font_sp41 { font-size: 41px; }
.font_sp42 { font-size: 42px; }
.font_sp43 { font-size: 43px; }
.font_sp44 { font-size: 44px; }
.font_sp45 { font-size: 45px; }
.font_sp46 { font-size: 46px; }
.font_sp47 { font-size: 47px; }
.font_sp48 { font-size: 48px; }

.eq_btn_font_size button { font-size: 1em; }

.font_thin { font-weight: 100; }
.font_extra_light, .font_el { font-weight: 200; }
.font_light { font-weight: 300; }
.font_regular { font-weight: 400; }
.font_medium { font-weight: 500; }
.font_semi_bold, .font_sb { font-weight: 600; }
.font_bold { font-weight: 700; }
.font_extra_bold, .font_eb { font-weight: 800; }
.font_black { font-weight: 900; }

.text_left { text-align: left; }
.text_center { text-align: center; }
.text_right { text-align: right; }
.text_justify { text-align: justify; }

.line_h1 { line-height: 1em; }
.line_h11 { line-height: 1.1em; }
.line_h12 { line-height: 1.2em; }
.line_h125 { line-height: 1.25em; }
.line_h13 { line-height: 1.3em; }
.line_h133 { line-height: 1.3333em; }
.line_h14 { line-height: 1.4em; }
.line_h15 { line-height: 1.5em; }
.line_h16 { line-height: 1.6em; }
.line_h166 { line-height: 1.6666em; }
.line_h17 { line-height: 1.7em; }
.line_h175 { line-height: 1.75em; }
.line_h18 { line-height: 1.8em; }
.line_h19 { line-height: 1.9em; }
.line_h2 { line-height: 2em; }
.line_h21 { line-height: 2.1em; }
.line_h22 { line-height: 2.2em; }
.line_h225 { line-height: 2.25em; }
.line_h23 { line-height: 2.3em; }
.line_h233 { line-height: 2.3333em; }
.line_h24 { line-height: 2.4em; }
.line_h25 { line-height: 2.5em; }
.line_h26 { line-height: 2.6em; }
.line_h266 { line-height: 2.6666em; }
.line_h27 { line-height: 2.7em; }
.line_h275 { line-height: 2.75em; }
.line_h28 { line-height: 2.8em; }
.line_h29 { line-height: 2.9em; }
.line_h3 { line-height: 3em; }

.line_hr8 { line-height: 0.5rem; }
.line_hr9 { line-height: 0.5625rem; }
.line_hr10 { line-height: 0.625rem; }
.line_hr11 { line-height: 0.6875rem; }
.line_hr12 { line-height: 0.75rem; }
.line_hr13 { line-height: 0.8125rem; }
.line_hr14 { line-height: 0.875rem; }
.line_hr15 { line-height: 0.9375rem; }
.line_hr16 { line-height: 1rem; }
.line_hr17 { line-height: 1.0625rem; }
.line_hr18 { line-height: 1.125rem; }
.line_hr19 { line-height: 1.1875rem; }
.line_hr20 { line-height: 1.25rem; }
.line_hr21 { line-height: 1.3125rem; }
.line_hr22 { line-height: 1.375rem; }
.line_hr23 { line-height: 1.4375rem; }
.line_hr24 { line-height: 1.5rem; }
.line_hr25 { line-height: 1.5625rem; }
.line_hr26 { line-height: 1.625rem; }
.line_hr27 { line-height: 1.6875rem; }
.line_hr28 { line-height: 1.75rem; }
.line_hr29 { line-height: 1.8125rem; }
.line_hr30 { line-height: 1.875rem; }
.line_hr31 { line-height: 1.875rem; }
.line_hr32 { line-height: 2rem; }
.line_hr33 { line-height: 2.0625rem; }
.line_hr34 { line-height: 2.0625rem; }
.line_hr35 { line-height: 2.1875rem; }
.line_hr36 { line-height: 2.25rem; }
.line_hr37 { line-height: 2.3125rem; }
.line_hr38 { line-height: 2.375rem; }
.line_hr39 { line-height: 2.4375rem; }
.line_hr40 { line-height: 2.5rem; }
.line_hr41 { line-height: 2.5625rem; }
.line_hr42 { line-height: 2.625rem; }
.line_hr43 { line-height: 2.625rem; }
.line_hr44 { line-height: 2.75rem; }
.line_hr45 { line-height: 2.8125rem; }
.line_hr46 { line-height: 2.875rem; }
.line_hr47 { line-height: 2.875rem; }
.line_hr48 { line-height: 3rem; }

.line_hp8 { line-height: 8px; }
.line_hp9 { line-height: 9px; }
.line_hp10 { line-height: 10px; }
.line_hp11 { line-height: 11px; }
.line_hp12 { line-height: 12px; }
.line_hp13 { line-height: 13px; }
.line_hp14 { line-height: 14px; }
.line_hp15 { line-height: 15px; }
.line_hp16 { line-height: 16px; }
.line_hp17 { line-height: 17px; }
.line_hp18 { line-height: 18px; }
.line_hp19 { line-height: 19px; }
.line_hp20 { line-height: 20px; }
.line_hp21 { line-height: 21px; }
.line_hp22 { line-height: 22px; }
.line_hp23 { line-height: 23px; }
.line_hp24 { line-height: 24px; }
.line_hp25 { line-height: 25px; }
.line_hp26 { line-height: 26px; }
.line_hp27 { line-height: 27px; }
.line_hp28 { line-height: 28px; }
.line_hp29 { line-height: 29px; }
.line_hp30 { line-height: 30px; }
.line_hp31 { line-height: 31px; }
.line_hp32 { line-height: 32px; }
.line_hp33 { line-height: 33px; }
.line_hp34 { line-height: 34px; }
.line_hp35 { line-height: 35px; }
.line_hp36 { line-height: 36px; }
.line_hp37 { line-height: 37px; }
.line_hp38 { line-height: 38px; }
.line_hp39 { line-height: 39px; }
.line_hp40 { line-height: 40px; }
.line_hp41 { line-height: 41px; }
.line_hp42 { line-height: 42px; }
.line_hp43 { line-height: 43px; }
.line_hp44 { line-height: 44px; }
.line_hp45 { line-height: 45px; }
.line_hp46 { line-height: 46px; }
.line_hp47 { line-height: 47px; }
.line_hp48 { line-height: 48px; }


.ws_normal { white-space: normal; }
.ws_nowrap { white-space: nowrap; }
.ws_pre { white-space: pre; }
.ws_pre_wrap { white-space: pre-wrap; }
.ws_pre_line { white-space: pre-line; }
.ws_bs { white-space: break-spaces; }


body .no_margin { margin: 0; }

body .inset_on_margin { margin: var(--basic-ui-inset-v) var(--basic-ui-inset-h); }
body .inset_on_margin_v { margin-top: var(--basic-ui-inset-v); margin-bottom: var(--basic-ui-inset-v); }
body .inset_on_margin_h { margin-left: var(--basic-ui-inset-h); margin-right: var(--basic-ui-inset-h); }
body .inset_on_margin_t { margin-top: var(--basic-ui-inset-v); }
body .inset_on_margin_b { margin-bottom: var(--basic-ui-inset-v); }
body .inset_on_margin_l { margin-left: var(--basic-ui-inset-h); }
body .inset_on_margin_r { margin-right: var(--basic-ui-inset-h); }
body .inset_on_padding { padding: var(--basic-ui-inset-v) var(--basic-ui-inset-h); }
body .inset_on_padding_v { padding-top: var(--basic-ui-inset-v); padding-bottom: var(--basic-ui-inset-v); }
body .inset_on_padding_h { padding-left: var(--basic-ui-inset-h); padding-right: var(--basic-ui-inset-h); }
body .inset_on_padding_t { padding-top: var(--basic-ui-inset-v); }
body .inset_on_padding_b { padding-bottom: var(--basic-ui-inset-v); }
body .inset_on_padding_l { padding-left: var(--basic-ui-inset-h); }
body .inset_on_padding_r { padding-right: var(--basic-ui-inset-h); }

body .inset_on_margin_half { margin: var(--basic-ui-inset-v-half) var(--basic-ui-inset-h-half); }
body .inset_on_margin_v_half { margin-top: var(--basic-ui-inset-v-half); margin-bottom: var(--basic-ui-inset-v-half); }
body .inset_on_margin_h_half { margin-left: var(--basic-ui-inset-h-half); margin-right: var(--basic-ui-inset-h-half); }
body .inset_on_margin_t_half { margin-top: var(--basic-ui-inset-v-half); }
body .inset_on_margin_b_half { margin-bottom: var(--basic-ui-inset-v-half); }
body .inset_on_margin_l_half { margin-left: var(--basic-ui-inset-h-half); }
body .inset_on_margin_r_half { margin-right: var(--basic-ui-inset-h-half); }
body .inset_on_padding_half { padding: var(--basic-ui-inset-v-half) var(--basic-ui-inset-h-half); }
body .inset_on_padding_v_half { padding-top: var(--basic-ui-inset-v-half); padding-bottom: var(--basic-ui-inset-v-half); }
body .inset_on_padding_h_half { padding-left: var(--basic-ui-inset-h-half); padding-right: var(--basic-ui-inset-h-half); }
body .inset_on_padding_t_half { padding-top: var(--basic-ui-inset-v-half); }
body .inset_on_padding_b_half { padding-bottom: var(--basic-ui-inset-v-half); }
body .inset_on_padding_l_half { padding-left: var(--basic-ui-inset-h-half); }
body .inset_on_padding_r_half { padding-right: var(--basic-ui-inset-h-half); }

body .inset_on_margin_quarter { margin: var(--basic-ui-inset-v-quarter) var(--basic-ui-inset-h-quarter); }
body .inset_on_margin_v_quarter { margin-top: var(--basic-ui-inset-v-quarter); margin-bottom: var(--basic-ui-inset-v-quarter); }
body .inset_on_margin_h_quarter { margin-left: var(--basic-ui-inset-h-quarter); margin-right: var(--basic-ui-inset-h-quarter); }
body .inset_on_margin_t_quarter { margin-top: var(--basic-ui-inset-v-quarter); }
body .inset_on_margin_b_quarter { margin-bottom: var(--basic-ui-inset-v-quarter); }
body .inset_on_margin_l_quarter { margin-left: var(--basic-ui-inset-h-quarter); }
body .inset_on_margin_r_quarter { margin-right: var(--basic-ui-inset-h-quarter); }
body .inset_on_padding_quarter { padding: var(--basic-ui-inset-v-quarter) var(--basic-ui-inset-h-quarter); }
body .inset_on_padding_v_quarter { padding-top: var(--basic-ui-inset-v-quarter); padding-bottom: var(--basic-ui-inset-v-quarter); }
body .inset_on_padding_h_quarter { padding-left: var(--basic-ui-inset-h-quarter); padding-right: var(--basic-ui-inset-h-quarter); }
body .inset_on_padding_t_quarter { padding-top: var(--basic-ui-inset-v-quarter); }
body .inset_on_padding_b_quarter { padding-bottom: var(--basic-ui-inset-v-quarter); }
body .inset_on_padding_l_quarter { padding-left: var(--basic-ui-inset-h-quarter); }
body .inset_on_padding_r_quarter { padding-right: var(--basic-ui-inset-h-quarter); }

body .inset_on_gap { gap: var(--basic-ui-inset-v) var(--basic-ui-inset-h); }
body .inset_on_gap_half { gap: var(--basic-ui-inset-v-half) var(--basic-ui-inset-h-half); }
body .inset_on_gap_quarter { gap: var(--basic-ui-inset-v-quarter) var(--basic-ui-inset-h-quarter); }
body .inset_on_gap_v { row-gap: var(--basic-ui-inset-v); }
body .inset_on_gap_v_half { row-gap: var(--basic-ui-inset-v-half); }
body .inset_on_gap_v_quarter { row-gap: var(--basic-ui-inset-v-quarter); }
body .inset_on_gap_h { column-gap: var(--basic-ui-inset-h); }
body .inset_on_gap_h_half { column-gap: var(--basic-ui-inset-h-half); }
body .inset_on_gap_h_quarter { column-gap: var(--basic-ui-inset-h-quarter); }



body .ellipsis_h { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
body .ellipsis_v { display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 4; }
body .ellipsis_v.limit_l1 { -webkit-line-clamp: 1; }
body .ellipsis_v.limit_l2 { -webkit-line-clamp: 2; }
body .ellipsis_v.limit_l3 { -webkit-line-clamp: 3; }
body .ellipsis_v.limit_l4 { -webkit-line-clamp: 4; }
body .ellipsis_v.limit_l5 { -webkit-line-clamp: 5; }
body .ellipsis_v.limit_l6 { -webkit-line-clamp: 6; }


.back_blur { --back-blur: 3px; backdrop-filter: blur(var(--back-blur)); -webkit-backdrop-filter: blur(var(--back-blur)); }
.back_blur.bb1 { --back-blur: 1px; }
.back_blur.bb2 { --back-blur: 2px; }
.back_blur.bb3 { --back-blur: 3px; }
.back_blur.bb4 { --back-blur: 4px; }
.back_blur.bb5 { --back-blur: 5px; }
.back_blur.bb6 { --back-blur: 6px; }
.back_blur.bb7 { --back-blur: 7px; }
.back_blur.bb8 { --back-blur: 8px; }
.back_blur.bb9 { --back-blur: 9px; }
.back_blur.bb10 { --back-blur: 10px; }
.back_blur.bb11 { --back-blur: 11px; }
.back_blur.bb12 { --back-blur: 12px; }


.grow_0 { flex-grow: 0; }
.grow_1 { flex-grow: 1; }
.shrink_0 { flex-shrink: 0; }
.shrink_1 { flex-shrink: 1; }
.dynamic_0 { flex-grow: 0; flex-shrink: 0; }
.dynamic_1 { flex-grow: 1; flex-shrink: 1; }

.flexy_full { flex: 1 1 100%; }
.flexy_5sixth { flex: 1 1 80%; }
.flexy_4fifth { flex: 1 1 76%; }
.flexy_3quarter { flex: 1 1 72%; }
.flexy_2third { flex: 1 1 64%; }
.flexy_3fifth { flex: 1 1 57%; }
.flexy_half { flex: 1 1 48%; }
.flexy_third { flex: 1 1 32%; }
.flexy_quarter { flex: 1 1 24%; }
.flexy_fifth { flex: 1 1 19%; }
.flexy_sixth { flex: 1 1 16%; }
.flexy_fill { flex: 1 1 0%; }
.flexy_fit { flex: 1 1 fit-content; }

.flexv_full { height: 100%; flex-grow: 1; flex-shrink: 1; }
.flexv_5sixth { height: 80%; flex-grow: 1; flex-shrink: 1; }
.flexv_4fifth { height: 76%; flex-grow: 1; flex-shrink: 1; }
.flexv_3quarter { height: 72%; flex-grow: 1; flex-shrink: 1; }
.flexv_2third { height: 64%; flex-grow: 1; flex-shrink: 1; }
.flexv_3fifth { height: 57%; flex-grow: 1; flex-shrink: 1; }
.flexv_half { height: 48%; flex-grow: 1; flex-shrink: 1; }
.flexv_third { height: 32%; flex-grow: 1; flex-shrink: 1; }
.flexv_quarter { height: 24%; flex-grow: 1; flex-shrink: 1; }
.flexv_fifth { height: 19%; flex-grow: 1; flex-shrink: 1; }
.flexv_sixth { height: 16%; flex-grow: 1; flex-shrink: 1; }
.flexv_fill { height: 0%; flex-grow: 1; flex-shrink: 1; }
.flexv_fit { height: fit-content; flex-grow: 1; flex-shrink: 1; }

.flexh_full { width: 100%; flex-grow: 1; flex-shrink: 1; }
.flexh_5sixth { width: 80%; flex-grow: 1; flex-shrink: 1; }
.flexh_4fifth { width: 76%; flex-grow: 1; flex-shrink: 1; }
.flexh_3quarter { width: 72%; flex-grow: 1; flex-shrink: 1; }
.flexh_2third { width: 64%; flex-grow: 1; flex-shrink: 1; }
.flexh_3fifth { width: 57%; flex-grow: 1; flex-shrink: 1; }
.flexh_half { width: 48%; flex-grow: 1; flex-shrink: 1; }
.flexh_third { width: 32%; flex-grow: 1; flex-shrink: 1; }
.flexh_quarter { width: 24%; flex-grow: 1; flex-shrink: 1; }
.flexh_fifth { width: 18%; flex-grow: 1; flex-shrink: 1; }
.flexh_sixth { width: 16%; flex-grow: 1; flex-shrink: 1; }
.flexh_fill { width: 0%; flex-grow: 1; flex-shrink: 1; }
.flexh_fit { width: fit-content; flex-grow: 1; flex-shrink: 1; }

.self_auto { place-self: auto; }
.self_start { place-self: flex-start; }
.self_st_ed { place-self: flex-start flex-end; }
.self_end { place-self: flex-end; }
.self_ed_st { place-self: flex-end flex-start; }
.self_center { place-self: center; }
.self_baseline { place-self: baseline; }
.self_stretch { place-self: stretch; }

.self_justify_auto { justify-self: auto; }
.self_justify_start { justify-self: flex-start; }
.self_justify_end { justify-self: flex-end; }
.self_justify_center { justify-self: center; }
.self_justify_baseline { justify-self: baseline; }
.self_justify_stretch { justify-self: stretch; }

.self_align { align-self: center; }
.self_align_start { align-self: flex-start; }
.self_align_end { align-self: flex-end; }
.self_align_center { align-self: center; }
.self_align_baseline { align-self: baseline; }
.self_align_stretch { align-self: stretch; }


/* EstreUI rim figure */
/* pull to refresh */
div#ptr { --size: 240px; --crop: 96px; --initial: -52px; --anchor: 0px; --opacity: 0;  position: fixed; top: 0; left: 0; right: 0; width: calc(var(--size) - (var(--crop) * 2)); height: 0; margin: 0 auto; user-select: none; }
div#ptr > div { position: absolute; top: calc(var(--top-pad) + var(--initial) + var(--anchor)); width: fit-content; height: fit-content; margin: 0; opacity: var(--opacity); scale: var(--scale); }
div#ptr > div > lottie-player { width: var(--size); height: var(--size); margin: calc(var(--crop) * -1); }

/* main content area commons */
body > main { display: flex; flex-direction: row; flex-wrap: nowrap; position: fixed; box-sizing: border-box; width: 100%; height: var(--fvh); padding: var(--top-safe-pad) 0 var(--bottom-safe-pad) 0; overflow: hidden; overscroll-behavior-y: contain; }
body > main > section { container-name: main-static-section; container-type: size; display: none; flex-grow: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; box-sizing: border-box; padding: var(--top-safe-pad) var(--right-pad) var(--bottom-safe-pad) var(--left-pad); background-color: var(--common-bg-color); overflow: hidden; overscroll-behavior-y: none; }
body > main > section.tpbg { background-color: transparent; }
body > :is(main, header, footer) > section:not([data-on-top=""]) { display: block; flex-grow: 1; opacity: 0; transition-timing-function: ease-in; transition-delay: 0.2s; transition-duration: 0.2s; will-change: auto; }
body > :is(main, header, footer) > section:is([data-on-top="1"], [data-on-top="0*"]) { opacity: 1; transition-timing-function: ease-out; transition-delay: 0s; }
body > :is(main, header, footer) > section > div { opacity: 0; transition-timing-function: ease-in; transition-delay: 0.3s; transition-duration: 0.2s; will-change: auto; }
body > :is(main, header, footer) > section:is([data-on-top="1"], [data-on-top="0*"]) > div { opacity: 1; transition-timing-function: ease-out; transition-delay: 0s; transition-duration: 0.5s; }
body > :is(main, nav, header, footer) > section > div.container { --margin: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; box-sizing: border-box; margin: var(--margin); padding: var(--top-safe-pad) var(--right-pad) var(--bottom-safe-pad) var(--left-pad); overflow: hidden overlay; }
body > :is(main, nav, header, footer) > section:not(.modal) > div.container { background-color: var(--common-bg-color); }
body > :is(main, nav, header, footer) > section > div.container > article { --scalable-method: item; --margin: 0px; --margin-v: var(--margin); --margin-h: var(--margin); --margin-t: var(--margin-v); --margin-b: var(--margin-v); --margin-l: var(--margin-h); --margin-r: var(--margin-h); margin: var(--margin-t) var(--margin-r) var(--margin-b) var(--margin-l); background-color: var(--common-bg-color); transition-duration: 0.5s; will-change: auto; }
body > :is(main, nav, header, footer) > section > div.container > article.constraint { --scalable-method: constraint; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100vw; height: 100vh; max-width: 100%; max-height: 100%; padding: var(--top-safe-pad) var(--right-pad) var(--bottom-safe-pad) var(--left-pad); box-sizing: border-box; overflow: hidden; overscroll-behavior: none; }
body > :is(main, nav, header, footer) > section > div.container > article.constraint.vertical_fit { display: flex; flex-direction: column; flex-wrap: nowrap; }
body > :is(main, nav, header, footer) > section:not(.modal) > div.container > article:not(.constraint) { }
@media all and (min-height: 700px) and (min-width: 740px) {
body > :is(main, nav, header, footer) > section > div.container > article.constraint.limit_on_screen { --height: min(var(--on-screen-limit-height), 100vh); --margin: auto !important; max-width: var(--on-screen-limit-width); max-height: var(--height); }
body > :is(main, nav, header, footer) > section > div.container > article.constraint.limit_on_screen.fixed_height { min-height: var(--height); }
body > :is(main, nav, header, footer) > section > div.container > article.constraint.limit_on_screen.full_height { --height: 100vh; min-height: min(var(--on-screen-limit-height), 100vh); max-height: max-content; }
body > :is(main, nav, header, footer) > section > div.container > article.constraint.limit_on_screen.full_height:not(.back_visible)::before { content: ''; position: fixed; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--common-bg-color); }
body > :is(main, nav, header, footer) > section > div.container > article.constraint.limit_on_screen.max_height { --width: var(--on-screen-limit-width); --height: 100vh; --inner-pad-h: max(0px, calc((100vw - var(--width) - var(--left-pad) - var(--right-pad)) / 2)); width: 100vw; max-width: 100vw; min-height: var(--height); max-height: var(--height); padding-left: calc(var(--inner-pad-h) + var(--left-pad)); padding-right: calc(var(--inner-pad-h) + var(--right-pad)); }
body > :is(main, nav, header, footer) > section > div.container > article.constraint.limit_on_screen:is(.full_height, .max_height) .flexv_fill { min-height: max-content; max-height: -webkit-fill-available; }
}

body > :is(main, nav, header, footer) > section > div.container button:is(.back_navigation, .container_closer) { position: absolute; top: 0; height: var(--appbar-height); aspect-ratio: 1; margin: auto 0; }
body > :is(main, nav, header, footer) > section > div.container button:is(.back_navigation, .container_closer) > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: fit-content; height: fit-content; max-width: 100%; max-height: 100%; }
body > :is(main, nav, header, footer) > section > div.container:has(> article[data-article-id$="%0"][data-on-top]) *[data-hide-on="first_article"] { display: none; }
body > :is(main, nav, header, footer) > section > div.container:has(> article.dummy):has(> article:nth-child(2):is([data-on-top="1"], [data-on-top^="+"], [data-on-top^="-"])) *[data-hide-on="first_article"] { display: none; }
body > :is(main, nav, header, footer) > section > div.container::not(:has(> article.dummy)):has(> article:first-child:is([data-on-top="1"], [data-on-top^="+"], [data-on-top^="-"])) *[data-hide-on="first_article"] { display: none; }
body > :is(main, nav, header, footer) > section > div.container button.back_navigation { left: 0; }
body > :is(main, nav, header, footer) > section > div.container button.back_navigation:empty { background-image: var(--svg-back); background-position: center; background-repeat: no-repeat; }
body > :is(main, nav, header, footer) > section > div.container button.container_closer { right: 0; }
body > :is(main, nav, header, footer) > section > div.container button.container_closer:empty { background-image: var(--svg-close); background-position: center; background-repeat: no-repeat; }
body > :is(main, nav, header, footer) > section > div.container > div.handle_set { left: 0; right: 0; margin: 0; }
body > :is(main, nav, header, footer) > section > div.container > div.top { top: 0; }
body > :is(main, nav, header, footer) > section > div.container > div.bottom { bottom: 0; }
body > :is(main, nav, header, footer) > section > div.container > div.left { right: unset; margin-right: auto; }
body > :is(main, nav, header, footer) > section > div.container > div.right { left: unset; margin-left: auto; }

body > :is(main, nav) > section > div.container > .step_navigation { --padding-bottom: 8px; position: relative; z-index: 112; width: 100%; padding: 0 var(--right-pad) var(--padding-bottom) var(--left-pad); }
body > :is(main, nav) > section > div.container > .step_navigation > .step_title_bar { position: relative; width: -webkit-fill-available; height: var(--appbar-height); }
body > :is(main, nav) > section > div.container > .step_navigation > .step_title_bar > button { bottom: 0; margin: auto 0; }
body > :is(main, nav) > section > div.container > .step_navigation > .step_title_bar > button.back_navigation { }
body > :is(main, nav) > section > div.container > .step_navigation > .step_title_bar > button.container_closer { }
body > :is(main, nav) > section > div.container > .step_navigation > .step_title_bar > .step_title { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; height: fit-content; text-align: center; }
body > :is(main, nav) > section > div.container > .step_navigation > .step_title_bar > .step_title .cur_step_name { font-size: 1.375rem; font-weight: bold; }
body > :is(main, nav) > section > div.container > .step_navigation > .step_indicator { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 16px 0 8px;  justify-content: center; }
body > :is(main, nav) > section > div.container > .step_navigation > .step_indicator > .step_pointer { --unactive-color: #D0D0D0; --active-color: var(--color-point-dark); width: 26px; aspect-ratio: 1; box-sizing: border-box; border: solid 1px transparent; border-radius: 100%; background-image: radial-gradient(var(--unactive-color) 0%, var(--unactive-color) 29%, transparent 30%); transition-duration: 0.5s; will-change: auto; }
body > :is(main, nav) > section > div.container > .step_navigation > .step_indicator > .step_pointer[data-active="1"] { border-color: rgb(from var(--active-color) r g b / 50%); background-image: radial-gradient(var(--active-color) 0%, var(--active-color) 29%, transparent 30%); }
body > :is(main, nav) > section > div.container > .step_navigation > .step_indicator > .step_divider { --unactive-color: rgb(0 0 0 / 10%); --active-color: var(--color-point-dark); width: 16px; height: 1px; margin: auto 4px; background-color: var(--unactive-color); transition-duration: 0.5s; }
body > :is(main, nav) > section > div.container > .step_navigation > .step_indicator > .step_divider[data-active="1"] { background-color: rgb(from var(--active-color) r g b / 50%); }
body > :is(main, nav) > section > div.container > .container_master_float { position: fixed; z-index: 111; bottom: 0; left: 0; right: 0; margin: 0; padding: 0 var(--right-pad) var(--bottom-safe-pad) var(--left-pad); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
body > :is(main, nav) > section > div.container > .container_master_float > article { width: 100%; }
body > :is(main, nav) > section > div.container > .container_master_float > article > button.container_master_button { margin: 8px 16px 24px; }
@media all and (min-height: 700px) and (min-width: 740px) {
body > :is(main, nav) > section > div.container.limit_on_screen { --width: var(--on-screen-limit-width); --full-height: calc(100vh - var(--top-safe-pad) - var(--bottom-safe-pad)); --height: min(var(--on-screen-limit-height), var(--full-height)); --margin: auto !important; --inner-pad-v: max(0px, calc((100vh - var(--height) - var(--top-safe-pad) - var(--bottom-safe-pad)) / 2)); --inner-pad-h: max(0px, calc((100vw - var(--width) - var(--left-pad) - var(--right-pad)) / 2)); max-width: var(--width); max-height: var(--height); box-sizing: content-box; padding: calc(var(--inner-pad-v) + var(--top-safe-pad)) calc(var(--inner-pad-h) + var(--right-pad)) calc(var(--inner-pad-v) + var(--bottom-safe-pad)) calc(var(--inner-pad-h) + var(--left-pad)); }
body > :is(main#staticDoc, nav#mainMenu) > section > div.container.limit_on_screen { --full-height: calc(100vh - var(--top-pad) - var(--bottom-pad)); --inner-pad-v: calc((100vh - var(--height) - var(--top-pad) - var(--bottom-pad)) / 2); padding: calc(var(--inner-pad-v) + var(--top-pad)) calc(var(--inner-pad-h) + var(--right-pad)) calc(var(--inner-pad-v) + var(--bottom-pad)) calc(var(--inner-pad-h) + var(--left-pad)); }
body > :is(main, nav) > section > div.container.limit_on_screen.fixed_height { min-height: var(--height); }
body > :is(main, nav) > section > div.container.limit_on_screen.full_height { --height: var(--full-height); }
body > :is(main, nav) > section > div.container.limit_on_screen.max_height { --height: var(--full-height); }
body > :is(main, nav) > section > div.container.limit_on_screen > article.constraint { width: var(--width); height: var(--height); margin: auto; }
body > :is(main, nav) > section > div.container.limit_on_screen > article.fwvs { width: var(--width); height: var(--height); min-height: min(var(--on-screen-limit-height), 100vh); max-height: var(--on-screen-limit-height); margin: auto; }
body > :is(main, nav) > section > div.container.limit_on_screen.full_height > article.fwvs { max-height: max-content; }
body > :is(main, nav) > section > div.container.limit_on_screen.max_height > article.fwvs { min-height: 100vh; max-height: 100vh; }
body > :is(main, nav) > section > div.container.limit_on_screen > .container_master_float { margin: 0 calc(calc(100vw - var(--width)) / 2) calc(calc(100vh - var(--height)) / 2); }
body > :is(main, nav) > section > div.container.limit_on_screen > .step_navigation { padding: 0; padding-bottom: var(--padding-bottom); }
}
    

/* static main content area (when logged in) */
main#staticDoc { --available-max-height: calc(100vh - var(--top-pad) - var(--bottom-pad)); padding: var(--top-pad) 0 var(--bottom-pad) 0; }
main#staticDoc > section { z-index: 0; padding: var(--top-pad) var(--right-pad) var(--bottom-pad) var(--left-pad); }
main#staticDoc > section[data-on-top="1"] { z-index: 10; opacity: 1; }
main#staticDoc > section > div.container { z-index: 0; padding: var(--top-pad) var(--right-pad) var(--bottom-pad) var(--left-pad); }
main#staticDoc > section > div.container[data-on-top="1"] { z-index: 1; }
main#staticDoc > section > div.container > article { }
main#staticDoc > section > div.container > article[data-on-top="1"] { z-index: 1; }
main#staticDoc > section > div.container > article.constraint { padding-top: var(--top-pad); padding-bottom: var(--bottom-pad); }
main#staticDoc > section > div.container > article.constraint.extended { top: 0; bottom: 0; height: 100wv; padding-top: 0; padding-bottom: 0; }
main#staticDoc > section > div.container > article.constraint.extended.top_padded { padding-top: var(--top-pad); }
main#staticDoc > section > div.container > article.constraint.extended.bottom_padded { padding-bottom: var(--bottom-pad); }
main#staticDoc > section > div.container > article.fwvs { padding-top: var(--top-pad); padding-bottom: var(--bottom-pad); }
main#staticDoc > section > div.container > article.fwvs::-webkit-scrollbar {
    width: 8px;
    border: solid 0px transparent;
}

main#staticDoc > section > div.container > article.fwvs::-webkit-scrollbar-track {
    box-shadow: inset 0 0 8px 8px transparent;
    border: solid 2px transparent;
}

main#staticDoc > section > div.container > article.fwvs::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 8px 8px #4444;
    border: solid 2px transparent;
    border-top-width: calc(var(--top-pad) + var(--top-fixed-height) + 2px);
    border-bottom-width: calc(var(--bottom-pad) + var(--bottom-fixed-height) + 2px);
}

main#staticDoc > section > div.container > article.fwvs::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 8px 8px #6666;
}

main#staticDoc > section > div.container > article.fwvs::-webkit-scrollbar-thumb:active {
    box-shadow: inset 0 0 8px 8px #AAA8;
}

@media all and (min-height: 700px) and (min-width: 740px) {
main#staticDoc > section:not(.modal) > div.container { align-items: center; }
main#staticDoc > section:not(.modal) > div.container.v_inline { flex-direction: column; flex-wrap: wrap; }
main#staticDoc > section:not(.modal) > div.container:not(.v_inline) { flex-direction: row; flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; justify-content: space-evenly; overflow-y: visible; }
main#staticDoc > section:not(.modal):not([data-on-top=""]) > div.container { display: flex; }
main#staticDoc > section:not(.modal) > div.container > article:not(.constraint, .fwvs, [data-for-new="1"]) { width: -webkit-fill-available; min-width: 320px; max-width: min(var(--on-screen-limit-width), calc(var(--available-max-width) / 2)); }
main#staticDoc > section:not(.modal) > div.container.v_inline > article:not(.constraint, .fwvs, [data-for-new="1"]) { }
main#staticDoc > section:not(.modal) > div.container:not(.v_inline) > article:not(.constraint, .fwvs, [data-for-new="1"]) { --scalable-method: vertical; --margin-t: var(--top-pad); --margin-b: var(--bottom-pad); position: relative; height: calc(100% - var(--margin-t) - var(--margin-b)); flex-grow: 1; overflow-y: overlay; }
main#staticDoc > section:not(.modal) > div.container > article:not(.constraint, .fwvs, .v_inline)[data-for-new="1"] { width: fit-content; flex-grow: 0; margin-left: 12px; }
}

main#staticDoc > section > div.container > .container_master_float { padding-bottom: var(--bottom-pad); }


/* fixed top include app bar (top) */
header#fixedTop { --common-bg-color: transparent; position: fixed; z-index: 130; top: 0; left: 0; right: 0; height: calc(var(--appbar-height) + var(--top-safe-pad)); box-sizing: border-box; margin: 0; padding: var(--top-safe-pad) var(--right-pad) 0 var(--left-pad); background-color: transparent; backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); user-select: none; }
header#fixedTop > section { position: absolute; display: flex; flex-direction: row; flex-wrap: nowrap; top: 0; left: 0; right: 0; width: 100vw; height: 100%; box-sizing: border-box; padding: var(--top-safe-pad) var(--right-pad) 0 var(--left-pad); }
header#fixedTop > section > div.container { padding-bottom: 0; }
header#fixedTop > section > div.container[data-on-top="1*"] { z-index: 130; }
header#fixedTop > section > div.container:is([data-on-top="1"], [data-on-top="0"]) { z-index: 131; }
header#fixedTop > section > div.container:not(:is([data-on-top^="1"], [data-on-top^="0"])) { display: none; }
header#fixedTop > section > div.container:not([data-on-top="1"]) { opacity: 0; }
header#fixedTop > section > div.container > article { }
header#fixedTop > section > div.container > article[data-on-top="1"] { z-index: 131; }
header#fixedTop > section > div.container > article button { position: relative; height: 100%; margin: 0; font-size: 1rem; }
header#fixedTop > section > div.container > article button.square { aspect-ratio: 1; }
header#fixedTop > section > div.container > article button#mainMenuBtn { overflow: hidden; }
header#fixedTop > section > div.container > article button#mainMenuBtn dotlottie-player { --extend: 24px; --size: calc(var(--appbar-height) + (var(--extend) * 2)); width: var(--size); height: var(--size); margin: calc(var(--extend) * -1); translate: 0 3.8%; }
header#fixedTop > section > div.container > article button#mainMenuBtn.closer dotlottie-player { --extend: -8px; }
header#fixedTop > section > div.container > article button > .square_icon { display: inline-block; width: 1em; aspect-ratio: 1; }
header#fixedTop > section > div.container > article hr { display: inline-block; position: relative; width: 1px; height: 10px; min-width: 1px; margin: auto 6px; border-style: none; background-color: rgb(0 0 0 / 10%); }
header#fixedTop > section#appbar { user-select: none; }
header#fixedTop > section#appbar > div.container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; }
header#fixedTop > section#appbar > div.container > .float_area { position: absolute; top: 0; bottom: 0; margin: 0; }
header#fixedTop > section#appbar > div.container > .float_area.left { left: 0; }
header#fixedTop > section#appbar > div.container > .float_area.right { right: 0; }
header#fixedTop > section#appbar > div.container > .float_area.center { left: 0; right: 0; width: max-content; }
header#fixedTop > section#appbar > div.container > article { display: flex; width: max-content; }
header#fixedTop > section#appbar > div.container > article > *:not(nav.tool_set) { max-height: 100%; flex-shrink: 0; margin-top: auto; margin-bottom: auto; }
header#fixedTop > section#appbar > div.container > article > *:not(nav.tool_set) > * { max-height: 100%; }
header#fixedTop > section#appbar > div.container > article > nav.tool_set { display: flex; width: max-content; height: 100%; align-items: center; }
header#fixedTop > section#appbar > div.container > article > nav.tool_set > * { width: max-content; max-height: 100%; flex-shrink: 0; margin-top: auto; margin-bottom: auto; }
header#fixedTop > section#appbar > div.container > article > nav.tool_set > * > * { min-width: max-content; max-height: 100%; }
header#fixedTop > section#appbar > div.container > article.appbarCenter { flex-direction: row; flex-wrap: nowrap; flex-grow: 0; flex-shrink: 0; }
header#fixedTop > section#appbar > div.container > article.appbarCenter > nav.tool_set { flex-direction: row; flex-wrap: nowrap; }
header#fixedTop > section#appbar > div.container > article:is(.appbarLeft, .appbarRight) { flex-grow: 1; flex-shrink: 1; }
header#fixedTop > section#appbar > div.container:has(> article.appbarCenter:not(:has(> *))):is(:has(> article.appbarCenter > *:not(nav.tool_set)), :has(> article.appbarCenter > nav.tool_set:not(:has(> *)))) > article:is(.appbarLeft, .appbarRight) { width: 40%; }
header#fixedTop > section#appbar > div.container > article.appbarLeft { flex-direction: row; flex-wrap: nowrap; }
header#fixedTop > section#appbar > div.container > article.appbarLeft > nav.tool_set { flex-direction: row; flex-wrap: nowrap; }
header#fixedTop > section#appbar > div.container > article.appbarRight { flex-direction: row-reverse; flex-wrap: nowrap; }
header#fixedTop > section#appbar > div.container > article.appbarRight > nav.tool_set { flex-direction: row-reverse; flex-wrap: nowrap; }
header#fixedTop > section#appbar > div.container > button#home { }
header#fixedTop > section#appbar > div.container > button#home img { height: 86%; }

/* main menu (left/right float) */
nav#mainMenu { --grab-x: 0px; --menu-area-blur: 8px; position: fixed; z-index: 120; display: flex; flex-direction: row; flex-wrap: nowrap; top: 0; bottom: 0; justify-content: flex-start; user-select: none; }
nav#mainMenu.right { right: 0; flex-direction: row-reverse; }
nav#mainMenu[data-opened="1"] { width: 100vw; }
nav#mainMenu > section { --padding-top: 4px; --padding-bottom: 0px; height: 100vh; box-sizing: border-box; padding: calc(var(--top-pad) + var(--padding-top)) 0 calc(var(--bottom-pad) + var(--padding-bottom)) 0; }
nav#mainMenu > section#menuArea { --grab-ax: var(--grab-x); --max-width: 360px; --opened-width: 60vw; width: 0; margin: 0; background-color: rgba(var(--cabr) / 40%); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); overflow: hidden overlay; transition-duration: 0.3s; }
nav#mainMenu[data-on-grab="1"] > section#menuArea { width: max(calc(0vw + var(--grab-x)), 0px); transition-delay: 0s; transition-duration: 0s; }
nav#mainMenu[data-on-grab="1"].right > section#menuArea { width: max(calc(0vw - var(--grab-x)), 0px); }
nav#mainMenu[data-opened="1"] > section#menuArea { width: min(var(--opened-width), var(--max-width)); backdrop-filter: blur(var(--menu-area-blur)); -webkit-backdrop-filter: blur(var(--menu-area-blur)); }
nav#mainMenu[data-opened="1"].right > section#menuArea { padding-right: var(--right-pad); }
nav#mainMenu[data-opened="1"]:not(.right) > section#menuArea { padding-left: var(--left-pad); }
nav#mainMenu[data-opened="1"][data-on-grab="1"] > section#menuArea { width: calc(min(var(--opened-width), var(--max-width)) + var(--grab-x)); }
nav#mainMenu[data-opened="1"][data-on-grab="1"].right > section#menuArea { width: calc(min(var(--opened-width), var(--max-width)) - var(--grab-x)); }
nav#mainMenu > section#menuArea > div.container { padding-top: var(--top-pad); background-color: transparent; }
nav#mainMenu > section#menuArea > div.container:not([data-on-top^="1"]) { display: none; }
nav#mainMenu > section#menuArea > div.container > article { background-color: transparent; }
nav#mainMenu > section#menuArea .maxWidth { width: min(var(--max-width), var(--opened-width)); }
nav#mainMenu > section#menuArea ul { margin: 0 0 0; padding: 0; list-style: none; }
nav#mainMenu > section#menuArea ul > li { }
nav#mainMenu > section#menuArea ul > li > button { width: 100%; padding: var(--basic-ui-inset-v) var(--basic-ui-inset-h); text-align: left; font-size: 1.125rem; backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: 0 0 4px var(--color-anti-text); }
nav#mainMenu > section#menuArea section.grouped { flex-direction: column; flex-wrap: nowrap; }
nav#mainMenu > section#menuArea section.grouped > label { }
nav#mainMenu > section#menuArea section.grouped > ul {  }
nav#mainMenu > section#menuArea section.grouped > ul > li {  }
nav#mainMenu > section#grabArea { width: 3vw; max-width: 12px; }
nav#mainMenu[data-opened="1"] > section#grabArea { flex-grow: 1; max-width: none; background-color: rgb(var(--cadm) / 20%); }
nav#mainMenu > section#grabArea div.pad { height: 100%; transition-duration: 0.3s; }
nav#mainMenu[data-opened="1"] > section#grabArea div.pad { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
@media all and (min-height: 700px) {
    @media all and (min-width: 740px) {
nav#mainMenu[data-opened="1"] > section#grabArea div.pad { backdrop-filter: unset; -webkit-backdrop-filter: unset; }
    }
}

/* root tabs (bottom) */
footer#fixedBottom { position: fixed; display: flex; flex-direction: row; flex-wrap: nowrap; z-index: 110; bottom: 0; left: 0; right: 0; height: var(--rootbar-height); margin: 0; padding-bottom: var(--bottom-safe-pad); justify-content: center; background-color: rgb(var(--cwht) / 66.666%); backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); justify-content: center; user-select: none; }
footer#fixedBottom nav { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; height: var(--rootbar-height); flex-grow: 1; flex-shrink: 1; user-select: none; }
footer#fixedBottom nav:not(#rootbar) { max-width: 0; }
footer#fixedBottom nav:first-child { justify-content: flex-end; }
footer#fixedBottom nav:last-child { justify-content: flex-start; }
footer#fixedBottom nav#rootbar { width: var(--available-max-width); min-width: var(--rootbar-min-width); max-width: var(--rootbar-max-width); padding-inline: var(--left-pad) var(--right-pad); }
footer#fixedBottom nav > * { max-height: 100%; margin-top: auto; margin-bottom: auto; }
footer#fixedBottom nav > *[data-is-hidden="1"] { display: none; }
footer#fixedBottom nav > * > * { max-height: 100%; }
footer#fixedBottom nav > * > img { --icon-height: 0.6; height: calc(100%* var(--icon-height)); }
footer#fixedBottom nav > * > img:only-child { margin: calc(var(--rootbar-height) * (1 - var(--icon-height)) / 2); }
footer#fixedBottom nav > button { display: flex; flex-flow: column nowrap; height: 100%; flex-grow: 1; justify-content: center; align-items: center; border-radius: 0; font-size: 1.25rem; transition-duration: 0.2s; }
footer#fixedBottom nav > button:has(> .maskable_icon) > .maskable_icon { position: relative; width: fit-content; height: fit-content; }
footer#fixedBottom nav > button:has(> .maskable_icon) > .maskable_icon::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #333; mask-image: var(--src); mask-repeat: no-repeat; }
footer#fixedBottom nav > button:has(> .maskable_icon) > .maskable_icon > img { opacity: 0; }
footer#fixedBottom nav > button:has(> .maskable_icon) > label { color: #999; font-size: 0.625rem; line-height: 0.75rem; }
footer#fixedBottom nav > button:has(> .maskable_icon)[data-active="1"] > .maskable_icon { }
footer#fixedBottom nav > button:has(> .maskable_icon)[data-active="1"] > .maskable_icon::after { background-color: var(--color-point-dark); }
footer#fixedBottom nav > button:has(> .maskable_icon)[data-active="1"] > .maskable_icon > img {  }
footer#fixedBottom nav > button:has(> .maskable_icon)[data-active="1"] > label { color: var(--color-point-dark); }
footer#fixedBottom nav > button:not(:has(> .maskable_icon))[data-active="1"] { background-color: #0004; }
footer#fixedBottom nav > button.fit_for_icon { flex-grow: 0; }
footer#fixedBottom nav > .dummy_spacer { flex-grow: 0; opacity: 0; }
footer#fixedBottom nav > .dummy_spacer > img { margin-inline: 0; }
@media all and (min-height: 700px) and (min-width: 740px) {
footer#fixedBottom nav#rootbar { width: max-content; padding-inline: 0; flex-grow: 0; flex-shrink: 0; }
footer#fixedBottom nav:not(#rootbar) { width: -webkit-fill-available; flex-grow: 1; }
footer#fixedBottom nav:not(#rootbar):first-child { padding-left: var(--left-pad); }
footer#fixedBottom nav:not(#rootbar):last-child { padding-right: var(--right-pad); }
}
footer#fixedBottom nav#customFixedSections { }
footer#fixedBottom nav#instantSections { }


/* session manager */
main#staticDoc > section#more { }
main#staticDoc > section#more > .container { }
main#staticDoc > section#more > .container > article.session_manager { }
main#staticDoc > section#more > .container > article.session_manager.session_group_holder { flex-direction: column-reverse; }
main#staticDoc > section#more > .container > article.session_manager.session_group_holder > .sessions_holder .session_list { flex-direction: column-reverse; }
main#staticDoc > section#more > .container > article.session_manager .session_group_holder { flex-direction: column-reverse; }
main#staticDoc > section#more > .container > article.session_manager .session_group_holder > .sessions_holder .session_list { flex-direction: column-reverse; }

.session_group_holder { display: flex; flex-direction: column; flex-wrap: nowrap; }
.session_group_holder > .sessions_holder { }
.session_group_holder > .sessions_holder .session_list { flex-direction: column; }
.session_group_holder > .sessions_holder .session_list > .page_short_cut { border-bottom: none; }
.session_group_holder > .sessions_holder .session_list > .page_short_cut button { width: 100%; padding: 8px; text-align: left; transition-duration: 0.3s; }
.session_group_holder > .sessions_holder .session_list > .page_short_cut button:hover { background-color: rgb(var(--cpl) / 60%); }
.session_group_holder > .sessions_holder .session_list > .page_short_cut button:active { background-color: rgb(var(--cpl) / 80%); }
.session_group_holder > .sessions_holder.fixed_pages { }
.session_group_holder > .sessions_holder.opened_pages { }


/* whole screen content page area */
main#instantDoc { position: fixed; z-index: 200; height: 0; padding-top: 0; padding-bottom: 0; overflow: visible; }
main#instantDoc > section { box-sizing: border-box; }
main#instantDoc > section:is([data-on-top="1"], [data-on-top="0"]) { height: var(--fvh); padding-top: var(--top-safe-pad); padding-bottom: var(--bottom-safe-pad); }
main#instantDoc > section > div.container { }
main#instantDoc > section > div.container[data-on-top="1*"] { z-index: 200; }
main#instantDoc > section > div.container:is([data-on-top="1"], [data-on-top="0"]) { z-index: 201; }
main#instantDoc > section > div.container:not(:is([data-on-top^="1"], [data-on-top^="0"])) { display: none; }
main#instantDoc > section > div.container:not([data-on-top="1"]) { opacity: 0; }
main#instantDoc > section > div.container > article { }
main#instantDoc > section > div.container > article[data-on-top="1"] { z-index: 201; }


/* splash page area */
main#splashRoot { position: fixed; z-index: 300; display: flex; padding: 0; background-color: var(--common-bg-color); transition-duration: 0.5s; }
body[data-on-ready="0"] main#splashRoot { opacity: 0; }
body[data-on-ready="1"] main#splashRoot { display: none; }
main#splashRoot > section { }
main#splashRoot > section[data-on-top="1"] { transition-duration: 2s; }
main#splashRoot > section > div.container { }
main#splashRoot > section > div.container > article { }



/* managed overlay content page area */
nav#managedOverlay { }
nav#managedOverlay > section { }
nav#managedOverlay > section > div.container { position: fixed; z-index: 400; top: initial; bottom: initial; left: 0; right: 0; height: 0; padding-top: 0; padding-bottom: 0; overflow: visible; box-sizing: border-box; }
nav#managedOverlay > section > div.container.top { top: 0; width: fit-content; height: fit-content; margin: 0 auto; }
nav#managedOverlay > section > div.container.bottom { bottom: 0; width: fit-content; height: fit-content; margin: 0 auto; }
nav#managedOverlay > section > div.container.slider { transition-timing-function: ease; transition-duration: 0.5s; will-change: auto; }
nav#managedOverlay > section > div.container.blind:is([data-on-top="1"], [data-on-top="0*"]) { height: 100vh; }
nav#managedOverlay > section > div.container:not(.blind):is([data-on-top="1"], [data-on-top="0*"]) { height: fit-content; }
nav#managedOverlay > section > div.container[data-on-top=""] { display: none; }
nav#managedOverlay > section > div.container[data-on-top="1"] { z-index: 410; }
nav#managedOverlay > section > div.container > article { }
nav#managedOverlay > section > div.container > article[data-on-top="1"] { z-index: 411; }

nav#managedOverlay > section#functional > div.container > article.constraint {  }
nav#managedOverlay > section#functional > div.container > article.constraint > .webview { display: flex; flex-flow: column nowrap; height: 100%; }
nav#managedOverlay > section#functional > div.container > article.constraint > .webview > div {  }
nav#managedOverlay > section#functional > div.container > article.constraint > .webview > div.browser_area { position: relative; flex-grow: 1; }
nav#managedOverlay > section#functional > div.container > article.constraint > .webview > div.browser_area > iframe { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; border: 0; }
nav#managedOverlay > section#functional > div.container > article.constraint > .webview > div.navigation_area { --height: 56px; height: var(--height); flex-grow: 0; align-items: center; }
nav#managedOverlay > section#functional > div.container > article.constraint > .webview > div.navigation_area > * { height: 100%; box-sizing: border-box; }
nav#managedOverlay > section#functional > div.container > article.constraint > .webview > div.navigation_area > button { --size: 20px; aspect-ratio: 1; background-size: var(--size) var(--size); background-position: center; background-repeat: no-repeat; }
nav#managedOverlay > section#functional > div.container > article.constraint > .webview > div.navigation_area > .titleArea { padding-inline: 8px; flex-grow: 1; align-items: center; }

nav#managedOverlay > section#customDialog > div.container > article.popup_interface { }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog { --full-width: calc(100% - var(--left-pad) - var(--right-pad)); --radius: 24px; --bg-color: rgb(from var(--common-bg-color) r g b / 66.6667%); display: flex; flex-flow: column nowrap; top: var(--top-safe-pad); bottom: var(--bottom-safe-pad); left: var(--left-pad); right: var(--right-pad); width: var(--full-width); min-width: 240px; max-width: calc(100vw - var(--left-pad) - var(--right-pad)); max-height: calc(100vh - var(--top-safe-pad) - var(--bottom-safe-pad)); box-sizing: border-box; padding: 20px; border-radius: var(--radius); background-color: transparent; backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); overflow-wrap: break-word; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog:before { content: ''; z-index: -2; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: var(--radius); background-color: var(--bg-color); translate: 1% 2.5%; transform: scale(1.05, 1.1); filter: brightness(0.15) blur(2px) opacity(0.25); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog:after { content: ''; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: var(--radius); background-color: var(--bg-color); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div { width: -webkit-fill-available; height: fit-content; flex-grow: 0; flex-shrink: 0; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.title { position: relative; font-size: 1.25rem; font-weight: 600; text-align: center; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.title > button { position: absolute; top: 0; bottom: 0; height: 40px; aspect-ratio: 1; margin: auto; padding: 0; border-style: none; border-width: 0; border-radius: 8px; background-color: transparent; background-position: center; background-repeat: no-repeat; cursor: pointer; transition-duration: 0.2s; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.title > button:focus { outline-style: none; outline-width: 0; box-shadow: solid 4px var(--color-adaptive-dimmest); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.title > button:hover { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.title > button:active { background-color: var(--color-adaptive-bright); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.title > button.back { left: -8px; background-image: var(--svg-back); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog:not([data-back="1"]) > div.title > button.back { display: none; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.title > button.close { right: -8px; background-image: var(--svg-close); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog:not([data-close="1"]) > div.title > button.close { display: none; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.message { font-size: 1rem; text-align: center; word-break: keep-all; overflow: hidden auto; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.message:has(> span:not(:empty)) { margin-top: 12px; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions { display: flex; flex-flow: row nowrap; margin-top: 16px; justify-content: space-evenly; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions :is(input, button) { border-radius: 1.25em; background-color: rgb(255 255 255 / 0%); backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions :is(input, button):focus { outline-color: rgb(var(--cpl) / 50%); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions input { margin-right: 8px; padding: 16px 12px; border-style: none; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions button { width: 100%; min-width: 4.5em; padding: 8px; border: solid 1px var(--color-adaptive); border-radius: 0.75em; font-size: 1rem; word-break: keep-all; cursor: pointer; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions button:focus { outline: dashed 2px var(--color-poind-darker); outline-offset: -3px; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions button.confirm { background-color: var(--color-point); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions button.confirm:hover { background-color: var(--color-point-light); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions button.confirm:active { background-color: var(--color-point-dark); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions button.positive { background-color: var(--color-point); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions button.positive:hover { background-color: var(--color-point-light); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions button.positive:active { background-color: var(--color-point-dark); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions button.negative { background-color: var(--color-adaptive-bright); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions button.negative:hover { background-color: var(--color-adaptive-brightest); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions button.negative:active { background-color: var(--color-adaptive-light); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions button.neutral { background-color: var(--color-point-sub); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions button.neutral:hover { background-color: var(--color-point-sub-light); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions button.neutral:active { background-color: var(--color-point-sub-dark); }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions:has(> span) { flex-direction: row-reverse; justify-content: space-between; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions > span { display: flex; flex-flow: row nowrap; justify-content: space-evenly; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions > span.left { }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions > span.left > button { }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions > span.left > button:not(:first-child) { margin-left: 8px; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions > span.right { flex-direction: row-reverse; }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions > span.right > button { }
nav#managedOverlay > section#customDialog > div.container > article.popup_interface > .dialog > div.actions > span.right > button:not(:first-child) { margin-right: 8px; }

nav#managedOverlay > section#customToast > div.container > article.popup_interface { scrollbar-width: none; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog { --height: max-content; --padding-v: 28px; --padding-h: 0; --padding-t: var(--padding-v); --padding-b: var(--padding-v); --padding-l: var(--padding-h); --padding-r: var(--padding-h); --radius: 24px; --bg-color: rgb(from var(--common-bg-color) r g b / 98%); display: flex; flex-flow: column nowrap; left: var(--left-pad); right: var(--right-pad); width: calc(100vw - var(--left-pad) - var(--right-pad) - var(--padding-l) - var(--padding-r)); height: var(--height); max-height: calc(100vh - var(--top-safe-pad) - var(--padding-t) - var(--bottom-safe-pad) - var(--padding-b)); padding: var(--padding-t) 0 calc(var(--bottom-safe-pad) + var(--padding-b)); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); background-color: transparent; backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); overflow-wrap: break-word; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog[data-on-grab="1"] { bottom: min(min(calc(0px - var(--grab-y)), 0px), 0px); transition-duration: 0s; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface:is([data-on-top="0"], [data-on-top="0*"]) > .dialog { bottom: -100%; transition-duration: 0.5s; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog:before { content: ''; z-index: -2; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); background-color: var(--bg-color); translate: 1% 2.5%; transform: scale(1.05, 1.05); filter: brightness(0.15) blur(2px) opacity(0.25); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog:after { content: ''; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); background-color: var(--bg-color); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div { width: -webkit-fill-available; height: fit-content; flex-grow: 0; flex-shrink: 0; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.handle { --width: 80px; --height: 4px; --expand: 6px; position: absolute; z-index: 1; top: 0; left: 0; right: 0; width: var(--width); height: var(--height); margin: 12px auto; border-radius: calc(var(--height) / 2); background-color: var(--color-boundary-lightside); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.handle:hover { background-color: var(--color-boundary-dark); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.handle:active { background-color: var(--color-boundary-darkness); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.handle::after { --deposition: calc(var(--expand) * -1); content: ''; position: absolute; display: block; top: var(--deposition); bottom: var(--deposition); left: var(--deposition); right: var(--deposition); border-radius: calc(var(--height) + (var(--expand) * 2)); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.title { position: relative; margin-inline: 16px; font-size: 1.25rem; font-weight: 600; text-align: center; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.title > button:empty { position: absolute; top: 0; bottom: 0; height: 40px; aspect-ratio: 1; margin: auto; padding: 0; border-style: none; border-width: 0; border-radius: 8px; background-color: transparent; background-position: center; background-repeat: no-repeat; cursor: pointer; transition-duration: 0.2s; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.title > button:empty:focus { outline-style: none; outline-width: 0; box-shadow: solid 4px var(--color-adaptive-dimmest); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.title > button:empty:hover { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.title > button:empty:active { background-color: var(--color-adaptive-bright); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.title > button:empty.back { left: -8px; background-image: var(--svg-back); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog:not([data-back="1"]) > div.title > button.back { display: none; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.title > button.close:empty { right: -8px; background-image: var(--svg-close); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog:not([data-close="1"]) > div.title > button.close { display: none; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.message { margin-inline: 16px; font-size: 1rem; text-align: left; word-break: keep-all; overflow: hidden auto; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.message:has(> span:not(:empty)) { margin-top: 12px; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options { --inter-item-margin: 0; --margin-inline: 16px; display: flex; flex-flow: column nowrap; padding-top: 16px; flex-shrink: 1; overflow-y: auto; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button { word-break: keep-all; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button.tp_tiled_btn { text-align: left; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button.tp_tiled_btn:not(.no_pad) { padding: 16px; padding-inline: var(--margin-inline); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button:not(.tp_tiled_btn) { margin-inline: var(--margin-inline); padding: 8px; border: solid 1px var(--color-adaptive); border-radius: 0.75em; font-size: 1rem; cursor: pointer; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button:not(.tp_tiled_btn):not(:first-child) { margin-top: var(--inter-item-margin); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button > div.line_block { position: relative; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button > div.line_block > label { display: inline-block; width: 100%; height: -webkit-fit-available; flex-grow: 1; flex-shrink: 1; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button.no_pad > div.line_block > label { padding: 16px; padding-inline: var(--margin-inline); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button > div.line_block > input[type="checkbox"] { position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; margin: auto 0; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button.no_pad > div.line_block > input[type="checkbox"] { margin-inline: var(--margin-inline); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions { --inter-item-margin: 8px; display: flex; flex-flow: row nowrap; margin-top: 16px; margin-inline: 16px; justify-content: space-evenly; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions:not(.vertical):not(.reverse) > button:not(:first-child) { margin-left: var(--inter-item-margin); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions.reverse { flex-direction: row-reverse; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions.reverse:not(.vertical) > button:not(:first-child) { margin-right: var(--inter-item-margin); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions.vertical { flex-direction: column; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions.vertical > * { width: -webkit-fill-available; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions.vertical:not(.reverse) > *:not(:first-child) { margin-top: var(--inter-item-margin); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions.vertical.reverse { flex-direction: column-reverse; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions.vertical.reverse > *:not(:first-child) { margin-bottom: var(--inter-item-margin); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions :is(input, button) { border-radius: 1.25em; background-color: rgb(var(--cb) / 10%); backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions :is(input, button):focus { outline-color: rgb(var(--cpl) / 50%); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions input { padding: 16px 12px; border-style: none; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button { width: 100%; min-width: 4.5em; width: 33%; flex-grow: 1; flex-shrink: 1; padding: 8px; border: solid 1px var(--color-adaptive); border-radius: 0.75em; font-size: 1rem; word-break: keep-all; cursor: pointer; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button:focus { outline: dashed 2px var(--color-poind-darker); outline-offset: -3px; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.confirm { background-color: var(--color-point); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.confirm:hover { background-color: var(--color-point-light); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.confirm:active { background-color: var(--color-point-dark); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.confirm:disabled { background-color: rgb(var(--cpl) / 20%); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.another { background-color: var(--color-adaptive-bright); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.another:hover { background-color: var(--color-adaptive-brightest); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.another:active { background-color: var(--color-adaptive-light); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.another:disabled { background-color: rgb(var(--cabt) / 20%); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.positive { background-color: var(--color-point); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.positive:hover { background-color: var(--color-point-light); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.positive:active { background-color: var(--color-point-dark); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.positive:disabled { background-color: rgb(var(--cpl) / 20%); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.negative { background-color: var(--color-adaptive-bright); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.negative:hover { background-color: var(--color-adaptive-brightest); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.negative:active { background-color: var(--color-adaptive-light); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.negative:disabled { background-color: rgb(var(--cabt) / 20%); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.neutral { background-color: var(--color-point-sub); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.neutral:hover { background-color: var(--color-point-sub-light); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.neutral:active { background-color: var(--color-point-sub-dark); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions button.neutral:disabled { background-color: rgb(var(--cpsl) / 20%); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions:has(> span) { flex-direction: row-reverse; justify-content: space-between; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions > div { display: flex; flex-flow: row nowrap; justify-content: space-evenly; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions > div:not(.vertical) > button:not(:first-child) { margin-left: var(--inter-item-margin); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions > div.vertical { flex-direction: column; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions > div.vertical > button:not(:first-child) { margin-top: var(--inter-item-margin); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions > span { display: flex; flex-flow: row nowrap; justify-content: space-evenly; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions > span.left { }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions > span.left > button { }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions > span.left > button:not(:first-child) { margin-left: var(--inter-item-margin); }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions > span.right { flex-direction: row-reverse; }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions > span.right > button { }
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.actions > span.right > button:not(:first-child) { margin-right: var(--inter-item-margin); }
@media all and (min-height: 700px) and (min-width: 740px) {
nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog { max-width: var(--on-screen-limit-width); }
}

nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface { scrollbar-width: none; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog { --height: max-content; --padding-v: 28px; --padding-h: 0; --padding-t: var(--padding-v); --padding-b: var(--padding-v); --padding-l: var(--padding-h); --padding-r: var(--padding-h); --radius: 24px; --bg-color: rgb(from var(--common-bg-color) r g b / 98%); display: flex; flex-flow: column nowrap; left: var(--left-pad); right: var(--right-pad); width: calc(100vw - var(--left-pad) - var(--right-pad) - var(--padding-l) - var(--padding-r)); height: var(--height); max-height: calc(100vh - var(--top-safe-pad) - var(--padding-t) - var(--bottom-safe-pad) - var(--padding-b)); padding: 28px 0 calc(28px + var(--bottom-safe-pad)); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); background-color: transparent; backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); overflow-wrap: break-word; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog[data-on-grab="1"] { bottom: min(min(calc(0px - var(--grab-y)), 0px), 0px); transition-duration: 0s; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface:not([data-on-top="1"], [data-on-top="0*"]) > .dialog { bottom: -100%; transition-duration: 0.5s; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog:before { content: ''; z-index: -2; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); background-color: var(--bg-color); translate: 1% 2.5%; transform: scale(1.05, 1.05); filter: brightness(0.15) blur(2px) opacity(0.25); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog:after { content: ''; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); background-color: var(--bg-color); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div { width: -webkit-fill-available; height: fit-content; flex-grow: 0; flex-shrink: 0; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.handle { --width: 80px; --height: 4px; --expand: 6px; position: absolute; z-index: 1; top: 0; left: 0; right: 0; width: var(--width); height: var(--height); margin: 12px auto; border-radius: calc(var(--height) / 2); background-color: var(--color-boundary-lightside); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.handle:hover { background-color: var(--color-boundary-dark); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.handle:active { background-color: var(--color-boundary-darkness); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.handle::after { --deposition: calc(var(--expand) * -1); content: ''; position: absolute; display: block; top: var(--deposition); bottom: var(--deposition); left: var(--deposition); right: var(--deposition); border-radius: calc(var(--height) + (var(--expand) * 2)); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.title { position: relative; margin-inline: 16px; font-size: 1.25rem; font-weight: 600; text-align: center; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.title > button { position: absolute; top: 0; bottom: 0; height: 40px; aspect-ratio: 1; margin: auto; padding: 0; border-style: none; border-width: 0; border-radius: 8px; background-color: transparent; background-position: center; background-repeat: no-repeat; cursor: pointer; transition-duration: 0.2s; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.title > button:focus { outline-style: none; outline-width: 0; box-shadow: solid 4px var(--color-adaptive-dimmest); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.title > button:hover { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.title > button:active { background-color: var(--color-adaptive-bright); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.title > button.back { left: -8px; background-image: var(--svg-back); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog:not([data-back="1"]) > div.title > button.back { display: none; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.title > button.close { right: -8px; background-image: var(--svg-close); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog:not([data-close="1"]) > div.title > button.close { display: none; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.message { margin-inline: 16px; font-size: 1rem; text-align: left; word-break: keep-all; overflow: hidden auto; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.message:has(> span:not(:empty)) { margin-top: 12px; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options { --inter-item-margin: 0; --margin-inline: 16px; display: flex; flex-flow: column nowrap; padding-top: 16px; flex-shrink: 1; overflow-y: auto; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button { word-break: keep-all; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button.tp_tiled_btn { text-align: left; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button.tp_tiled_btn:not(.no_pad) { padding: 16px; padding-inline: var(--margin-inline); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button:not(.tp_tiled_btn) { margin-inline: var(--margin-inline); padding: 8px; border: solid 1px var(--color-adaptive); border-radius: 0.75em; font-size: 1rem; cursor: pointer; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button:not(.tp_tiled_btn):not(:first-child) { margin-top: var(--inter-item-margin); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button > div.line_block { position: relative; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button > div.line_block > label { display: inline-block; width: 100%; height: -webkit-fit-available; flex-grow: 1; flex-shrink: 1; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button.no_pad > div.line_block > label { padding: 16px; padding-inline: var(--margin-inline); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button > div.line_block > input[type="checkbox"] { position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; margin: auto 0; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button.no_pad > div.line_block > input[type="checkbox"] { margin-inline: var(--margin-inline); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions { --inter-item-margin: 8px; display: flex; flex-flow: row nowrap; margin-top: 16px; margin-inline: 16px; justify-content: space-evenly; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions:not(.vertical):not(.reverse) > button:not(:first-child) { margin-left: var(--inter-item-margin); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions.reverse { flex-direction: row-reverse; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions.reverse:not(.vertical) > button:not(:first-child) { margin-right: var(--inter-item-margin); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions.vertical { flex-direction: column; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions.vertical > * { width: -webkit-fill-available; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions.vertical:not(.reverse) > *:not(:first-child) { margin-top: var(--inter-item-margin); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions.vertical.reverse { flex-direction: column-reverse; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions.vertical.reverse > *:not(:first-child) { margin-bottom: var(--inter-item-margin); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions :is(input, button) { border-radius: 1.25em; background-color: rgb(var(--cb) / 10%); backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions :is(input, button):focus { outline-color: rgb(var(--cpl) / 50%); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions input { padding: 16px 12px; border-style: none; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button { width: 100%; min-width: 4.5em; width: 33%; flex-grow: 1; flex-shrink: 1; padding: 8px; border: solid 1px var(--color-adaptive); border-radius: 0.75em; font-size: 1rem; word-break: keep-all; cursor: pointer; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button:focus { outline: dashed 2px var(--color-poind-darker); outline-offset: -3px; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.confirm { background-color: var(--color-point); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.confirm:hover { background-color: var(--color-point-light); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.confirm:active { background-color: var(--color-point-dark); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.confirm:disabled { background-color: rgb(var(--cpl) / 20%); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.another { background-color: var(--color-adaptive-bright); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.another:hover { background-color: var(--color-adaptive-brightest); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.another:active { background-color: var(--color-adaptive-light); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.another:disabled { background-color: rgb(var(--cabt) / 20%); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.positive { background-color: var(--color-point); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.positive:hover { background-color: var(--color-point-light); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.positive:active { background-color: var(--color-point-dark); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.positive:disabled { background-color: rgb(var(--cpl) / 20%); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.negative { background-color: var(--color-adaptive-bright); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.negative:hover { background-color: var(--color-adaptive-brightest); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.negative:active { background-color: var(--color-adaptive-light); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.negative:disabled { background-color: rgb(var(--cabt) / 20%); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.neutral { background-color: var(--color-point-sub); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.neutral:hover { background-color: var(--color-point-sub-light); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.neutral:active { background-color: var(--color-point-sub-dark); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions button.neutral:disabled { background-color: rgb(var(--cpsl) / 20%); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions:has(> span) { flex-direction: row-reverse; justify-content: space-between; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions > div { display: flex; flex-flow: row nowrap; justify-content: space-evenly; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions > div:not(.vertical) > button:not(:first-child) { margin-left: var(--inter-item-margin); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions > div.vertical { flex-direction: column; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions > div.vertical > button:not(:first-child) { margin-top: var(--inter-item-margin); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions > span { display: flex; flex-flow: row nowrap; justify-content: space-evenly; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions > span.left { }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions > span.left > button { }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions > span.left > button:not(:first-child) { margin-left: var(--inter-item-margin); }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions > span.right { flex-direction: row-reverse; }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions > span.right > button { }
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.actions > span.right > button:not(:first-child) { margin-right: var(--inter-item-margin); }
@media all and (min-height: 700px) and (min-width: 740px) {
nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog { max-width: var(--on-screen-limit-width); }
}

nav#managedOverlay > section#interaction > div.container > article.popup_interface { }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog { --radius: 24px; --bg-color: rgb(from var(--common-bg-color) r g b / 66.6667%); display: flex; flex-flow: column nowrap; top: var(--top-safe-pad); bottom: var(--bottom-safe-pad); left: var(--left-pad); right: var(--right-pad); min-width: 240px; max-width: calc(100vw - var(--left-pad) - var(--right-pad)); max-height: calc(100vh - var(--top-safe-pad) - var(--bottom-safe-pad)); box-sizing: border-box; padding: 20px; border-radius: var(--radius); background-color: transparent; backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); overflow-wrap: break-word; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog:before { content: ''; z-index: -2; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: var(--radius); background-color: var(--bg-color); translate: 1% 2.5%; transform: scale(1.05, 1.1); filter: brightness(0.15) blur(2px) opacity(0.25); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog:after { content: ''; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: var(--radius); background-color: var(--bg-color); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div { width: -webkit-fill-available; height: fit-content; flex-grow: 0; flex-shrink: 0; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.title { position: relative; font-size: 1.25rem; font-weight: 600; text-align: center; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.title > button { position: absolute; top: 0; bottom: 0; height: 40px; aspect-ratio: 1; margin: auto; padding: 0; border-style: none; border-width: 0; border-radius: 8px; background-color: transparent; background-position: center; background-repeat: no-repeat; cursor: pointer; transition-duration: 0.2s; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.title > button:focus { outline-style: none; outline-width: 0; box-shadow: solid 4px var(--color-adaptive-dimmest); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.title > button:hover { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.title > button:active { background-color: var(--color-adaptive-bright); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.title > button.back { left: -8px; background-image: var(--svg-back); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog:not([data-back="1"]) > div.title > button.back { display: none; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.title > button.close { right: -8px; background-image: var(--svg-close); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog:not([data-close="1"]) > div.title > button.close { display: none; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.message { font-size: 1rem; text-align: center; word-break: keep-all; overflow: hidden auto; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.message:has(> span:not(:empty)) { margin-top: 12px; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions { display: flex; flex-flow: row nowrap; margin-top: 16px; justify-content: space-evenly; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions :is(input, button) { border-radius: 1.25em; background-color: rgb(255 255 255 / 0%); backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions :is(input, button):focus { outline-color: rgb(var(--cpl) / 50%); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions input { margin-right: 8px; padding: 16px 12px; border-style: none; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions button { width: 100%; min-width: 4.5em; padding: 8px; border: solid 1px var(--color-adaptive); border-radius: 0.75em; font-size: 1rem; word-break: keep-all; cursor: pointer; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions button:focus { outline: dashed 2px var(--color-poind-darker); outline-offset: -3px; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions button.confirm { background-color: var(--color-point); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions button.confirm:hover { background-color: var(--color-point-light); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions button.confirm:active { background-color: var(--color-point-dark); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions button.positive { background-color: var(--color-point); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions button.positive:hover { background-color: var(--color-point-light); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions button.positive:active { background-color: var(--color-point-dark); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions button.negative { background-color: var(--color-adaptive-bright); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions button.negative:hover { background-color: var(--color-adaptive-brightest); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions button.negative:active { background-color: var(--color-adaptive-light); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions button.neutral { background-color: var(--color-point-sub); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions button.neutral:hover { background-color: var(--color-point-sub-light); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions button.neutral:active { background-color: var(--color-point-sub-dark); }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions:has(> span) { flex-direction: row-reverse; justify-content: space-between; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions > span { display: flex; flex-flow: row nowrap; justify-content: space-evenly; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions > span.left { }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions > span.left > button { }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions > span.left > button:not(:first-child) { margin-left: 8px; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions > span.right { flex-direction: row-reverse; }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions > span.right > button { }
nav#managedOverlay > section#interaction > div.container > article.popup_interface > .dialog > div.actions > span.right > button:not(:first-child) { margin-right: 8px; }


nav#managedOverlay > section#notification { }
nav#managedOverlay > section#notification > div.container { --bg-color: rgb(var(--cabr) / 70%); position: fixed; width: 100vw; height: 0; background-color: transparent; overflow: visible; user-select: none; }
nav#managedOverlay > section#notification > div.container > article { position: absolute; left: 0; right: 0; width: max-content; height: fit-content; margin: 0 auto; background-color: transparent; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); transition-timing-function: ease; transition-duration: 0.5s; will-change: auto; }
nav#managedOverlay > section#notification > div.container > article:not(:is([data-on-top^="1"], [data-on-top^="0"])) { display: none; }
nav#managedOverlay > section#notification > div.container > article:not([data-on-top="1"]) { opacity: 0; }
nav#managedOverlay > section#notification > div.container[data-container-id="noti"] { top: var(--top-pad); }
nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article { top: 32px; }
nav#managedOverlay > section#notification > div.container[data-container-id="note"] { bottom: var(--bottom-pad); }
nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article { bottom: 0; }
nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article:is([data-on-top^="1"], [data-on-top="0"]) { }
nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article[data-on-top="1"] { bottom: 32px; }
nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article[data-on-top="0"] { bottom: 40px; }
nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article > .post_block { padding: 12px 16px; max-width: calc(100vw - var(--left-pad) - var(--right-pad) - 16px); box-sizing: border-box; border-radius: 16px; background-color: var(--bg-color); box-shadow: 1px 4px 8px 2px rgb(var(--ca) / 25%); cursor: pointer; }
nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article > .post_block:not([data-interactive]) { cursor: default; }
nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article > .post_block > .icon_place { }
nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article > .post_block > .icon_place > img { }
nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article > .post_block > .content_place { --color: var(--color-text); --size: 1.125rem; --weight: 300; --height: 1.25em; text-align: center; text-shadow: 0 0 2px var(--color-text-inverse); }
nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article > .post_block > .content_place > span { color: var(--color); font-size: var(--size); font-weight: var(--weight); line-height: var(--height); }


/* Common frame styles */
/* tag based common styles */
div.container { }
div.container article.max_width { width: 100vw; }
div.container article.max_height { height: 100vh; }
div.container[data-container-id][data-article-steps-id] > article:not([data-on-top]) { display: none; }
div.container[data-container-id][data-article-steps-id] > article[data-on-top] { display: block; }
div.container:is(.v_stack, .h_stack)[data-container-id] > article { --shift-depth: 64px; position: relative; }
div.container:is(.v_stack, .h_stack)[data-container-id] > article:not(:is([data-on-top^="+"], [data-on-top^="-"])) { position: absolute; }
div.container:is(.v_stack, .h_stack)[data-container-id] > article[data-on-top^="+"] { --shift: var(--shift-depth); z-index: -1; }
div.container:is(.v_stack, .h_stack)[data-container-id] > article[data-on-top^="-"] { --shift: calc(var(--shift-depth) * -1); }
div.container:is(.v_stack, .h_stack)[data-container-id] > article:not(:is([data-on-top="1"], [data-on-top="0*"])) { position: absolute; z-index: -1; }
div.container:is(.v_stack, .h_stack)[data-container-id] > article[data-on-top]:not([data-on-top="1"]) { }
div.container:is(.v_stack, .h_stack)[data-container-id] > article[data-on-top]:is([data-on-top^="+"], [data-on-top^="-"]) { transition-timing-function: ease; }
div.container:is(.v_stack, .h_stack)[data-container-id] > article[data-on-top]:is([data-on-top="+"], [data-on-top="-"]) { transition-delay: 0.2s; }
div.container:is(.v_stack, .h_stack)[data-container-id] > article[data-on-top]:is([data-on-top="+1"], [data-on-top="-1"]) { opacity: 0; }
div.container.v_stack[data-container-id] > article[data-on-top]:is([data-on-top^="+"], [data-on-top^="-"]) { }
div.container.v_stack[data-container-id] > article[data-on-top]:is([data-on-top^="+"], [data-on-top^="-"]).max_width { left: 0; right: 0; }
div.container.v_stack[data-container-id] > article[data-on-top]:is([data-on-top="+1"], [data-on-top="-1"]) { translate: 0 var(--shift); }
div.container.v_stack[data-container-id] > article[data-on-top^="-"] { }
div.container.v_stack[data-container-id] > article[data-on-top="-1"] { }
div.container.v_stack[data-container-id] > article[data-on-top^="+"] { }
div.container.v_stack[data-container-id] > article[data-on-top="+1"] { }
div.container.v_stack[data-container-id] > article[data-on-top="1"] { }
div.container.h_stack[data-container-id] > article[data-on-top]:is([data-on-top^="+"], [data-on-top^="-"]) { }
div.container.h_stack[data-container-id] > article[data-on-top]:is([data-on-top^="+"], [data-on-top^="-"]).max_width { top: 0; bottom: 0; }
div.container.h_stack[data-container-id] > article[data-on-top]:is([data-on-top="+1"], [data-on-top="-1"]) { translate: var(--shift) 0; }
div.container.h_stack[data-container-id] > article[data-on-top^="-"] { }
div.container.h_stack[data-container-id] > article[data-on-top="-1"] { }
div.container.h_stack[data-container-id] > article[data-on-top^="+"] { }
div.container.h_stack[data-container-id] > article[data-on-top="+1"] { }
div.container.h_stack[data-container-id] > article[data-on-top="1"] { }
@media all and (min-height: 700px) and (min-width: 740px) {
div.container.limit_on_screen.v_stack > article { --margin-h: auto; width: var(--width); }
div.container.limit_on_screen.h_stack > article { --margin-v: auto; height: var(--height); }
}

article {
    --article-theme-color: var(--cgd);
    --atc: var(--article-theme-color);

    background-color: rgb(var(--atc) / 3%); 
}

article.constraint { }

article.dummy { display: none; }

/* full width vertical scroll */
article.fwvs { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; box-sizing: border-box; margin: 0 auto; padding: var(--top-safe-pad) var(--right-pad) var(--bottom-safe-pad) var(--left-pad); overflow: hidden overlay; }
article.fwvs.flows { display: flex; flex-flow: column nowrap; }
article.fwvs.match_height { display: flex; flex-direction: column; flex-wrap: nowrap; min-height: 100%; justify-content: space-between; }
article.fwvs .fixed { position: fixed; left: 0; right: 0; width: calc(100% - var(--left-pad) - var(--right-pad)); margin: 0 auto; }
article.fwvs .fixed.top { top: var(--top-safe-pad); }
article.fwvs .fixed.bottom { bottom: var(--bottom-safe-pad); }
@media all and (min-height: 700px) and (min-width: 740px) {
article.fwvs.limit_on_screen { --height: min(var(--on-screen-limit-height), 100vh); --margin: auto !important; max-width: var(--on-screen-limit-width); max-height: var(--height); }
article.fwvs.limit_on_screen.fixed_height { min-height: var(--height); }
article.fwvs.limit_on_screen.full_height { --height: 100vh; min-height: min(var(--on-screen-limit-height), 100vh); max-height: max-content; }
article.fwvs.limit_on_screen.full_height:not(.back_visible)::before { content: ''; position: fixed; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--common-bg-color); }
article.fwvs.limit_on_screen.max_height { --width: var(--on-screen-limit-width); --height: 100vh; --inner-pad-h: max(0px, calc((100vw - var(--width) - var(--left-pad) - var(--right-pad)) / 2)); width: 100vw; max-width: 100vw; min-height: var(--height); max-height: var(--height); padding-left: calc(var(--inner-pad-h) + var(--left-pad)); padding-right: calc(var(--inner-pad-h) + var(--right-pad)); }
} @media all and (not ((min-height: 700px) and (min-width: 740px))) {
article.top_expand:first-of-type { padding-top: var(--top-pad); }
article.top_expand:first-of-type.constraint { top: 0; }
article.top_expand:first-of-type:not(.constraint) { position: relative; --margin-t: calc(var(--top-pad) * -1); }
article.bottom_expand:last-of-type { padding-bottom: var(--bottom-pad); }
article.bottom_expand:last-of-type.constraint { bottom: 0; }
article.bottom_expand:last-of-type:not(.constraint) { position: relative; --margin-b: calc(var(--bottom-pad) * -1); }
article.floor_up:is(.top_expand:first-of-type, .bottom_expand:last-of-type) { z-index: 1; box-shadow: 0 0 8px var(--color-grayscale-lightest); }
}

article.scalable { }
article.scalable[data-look-scale="0"] { background-color: rgb(var(--atc) / 10%); }
article.scalable[data-look-scale="1"] { background-color: rgb(var(--atc) / 6%); }

article:not(.prevent_transition), article:not(.prevent_transition) section:not(.prevent_transition), article:not(.prevent_transition) div:not(.prevent_transition) { transition-duration: 0.3s; will-change: auto; }
article section, article div { }
article span { }
article span.blocked { display: inline-block; }
article span.detw { min-width: fit-content; }
article span.defs { font-size: 1rem; }
article label { }
article input { }
article input.sqpud { border: none; border-bottom: solid 1px var(--color-grayscale-neutral); background-color: transparent; font-size: 0.875rem; transition-duration: 0.3s; }
article input.sqpud:focus { border-bottom-color: var(--color-focused); outline: none; box-shadow: inset 0 -8px 8px -8px #C83C; }
article input.sqpud:hover { background-color: #FFF6; }
article input.sqpud:active { background-color: #FFFA; }
article button { }
article button[data-open-page] { cursor: pointer; }
article button[data-open-target][data-open-container][data-open-id] { cursor: pointer; }
article button.inline { min-height: fit-content; margin: -6px 0; padding: 4px 8px; border: outset 2px rgb(var(--cmvl) / 20%); border-radius: 8px; font-size: 0.875rem; line-height: 1.25rem; background-color: rgb(var(--cglr) / 10%); transition-duration: 0.2s; }
article button.inline:focus { outline: dashed 2px rgb(var(--cmd) / 20%); outline-offset: -6px; }
article button.inline:hover { border-color: rgb(var(--cmvl) / 20%); }
article button.inline:active { border-style: ridge; }
article button.tpbg { background-color: transparent; }
article hr { height: 1px; margin: 0; border: none; background-color: var(--color-boundary-o5); }
article hr.spaced { margin-top: var(--basic-ui-inset-t); margin-bottom: var(--basic-ui-inset-b); }
article hr.bold { height: 8px; }
article hr.bold.spaced { margin: 20px 0; }


article [data-inactivated="1"] { opacity: 0.5; }

article [data-hide-on-empty="1"]:empty { display: none; }

article [data-badge]::after { --height: 18px; --badge-color: var(--color-point); content: attr(data-badge); position: absolute; display: flex; z-index: 100; top: -5px; right: -5px; min-width: var(--height); min-height: var(--height); max-height: var(--height); padding: 0 5px; box-sizing: border-box; border-radius: var(--height); justify-content: center; align-items: center; background-color: var(--badge-color); color: var(--color-text-inverse); font-size: 0.75rem; font-weight: 400; line-height: var(--height); text-align: center; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
article [data-badge][data-badge=""]::after { top: 0; right: 0; width: 8px; height: 8px; min-width: 8px; min-height: 8px; aspect-ratio: 1; padding: 0; border-radius: 100%; }

article [data-inline-badge]::after { --height: 18px; --badge-color: var(--color-point); content: attr(data-inline-badge); display: inline-flex; min-width: var(--height); min-height: var(--height); max-height: var(--height); padding: 0 5px; box-sizing: border-box; border-radius: var(--height); justify-content: center; align-items: center; background-color: var(--badge-color); color: var(--color-text-inverse); font-size: 0.75rem; font-weight: 400; line-height: var(--height); text-align: center; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
article [data-inline-badge][data-inline-badge=""]::after { width: 8px; height: 8px; min-width: 8px; min-height: 8px; aspect-ratio: 1; padding: 0; border-radius: 100%; }


/* for data bind */
article [data-bind-array] {}
article [data-bind-array] > .placeholder { display: block; width: -webkit-fill-available; text-align: center; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; }


/* block sets */
article .block { position: relative; display: block; }
article .block.inline { display: inline-block; }
article .block.hide_block_when_empty:empty { display: none; }
article .top_elevated_block { position: relative; display: block; z-index: 1; top: calc(var(--top-pad) * -1); left: calc(var(--left-pad) * -1); right: calc(var(--right-pad) * -1); margin-bottom: calc(var(--top-pad)* -1); box-shadow: 0 0 8px var(--color-grayscale-lightest); }
article .top_elevated_block.padded { padding: var(--top-pad) var(--right-pad) 0 var(--left-pad); }
article .division_block { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; }
article .division_block.hide_block_when_empty:empty { display: none; }
article .division_block > :is(div, .block) { display: inline-block; }
article .divided_spread_block { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
article .divided_spread_block > * { margin: 0; padding: 8px 12px; font-size: 0.875rem; line-height: 1em; }
article .divided_spread_block > *.divider { width: 1px; height: calc(1em - 4px); margin: 10px 0; padding: 0; background-color: #E5E5E5; }
article .divided_spread_block > button { border-style: none; background-color: transparent; cursor: pointer; }
article .flow_block { --bg-basic: transparent; --bg-hover: var(--color-boundary-o25); --bg-active: var(--color-boundary-o50); position: relative; display: block; width: 100%; width: -webkit-fill-available; background-color: var(--bg-basic); text-align: left; user-select: none; }
article .flow_block.bordered { --border-color: var(--color-boundary-light); outline: solid 1px var(--border-color); outline-offset: -1px; }
article .flow_block::after { content: '>'; position: absolute; top: 0; bottom: 0; right: 0; height: fit-content; margin: auto; margin-right: 8px; font-size: 1.6rem; }
article .flow_block:hover { background-color: var(--bg-hover); }
article .flow_block:active { background-color: var(--bg-active); }
article .flow_block > .tag_bound { display: inline-flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
article .justified_block { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; }
article .justified_block.inline { display: inline-flex; }
article .equalized_block { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; }
article .equalized_block > * { flex-grow: 1; flex-shrink: 1; }
article .equalized_block:has(> :nth-child(2)) > * { width: 48%; }
article .equalized_block:has(> :nth-child(3)) > * { width: 32%; }
article .equalized_block:has(> :nth-child(4)) > * { width: 24%; }
article .equalized_block:has(> :nth-child(5)) > * { width: 18%; }
article .equalized_block:has(> :nth-child(6)) > * { width: 14%; }
article .inline_block { display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; align-items: baseline; }
article .inline_block.wrapped { flex-wrap: wrap; }
article .inline_block.stretched { justify-content: stretch; align-items: stretch; }
article .inline_block.from_start { justify-content: flex-start; }
article .inline_block.to_end { justify-content: flex-end; }
article .inline_block.center { justify-content: center; }
article .inline_block.central { justify-content: space-evenly; }
article .inline_block.wided { justify-content: space-between; }
article .inline_block.stretch { justify-content: stretch; }
article .inline_block.v_center { align-items: center; }
article .inline_block.v_stretch { align-items: stretch; }
article .inline_block.spaced { --space: 0.5em; }
article .inline_block.spaced > *:not(.inline_block) { display: inline-block; }
article .inline_block.spaced > *:not(:first-child) { margin-left: var(--space); }
article .inline_block.spaced > .suffix { margin-left: 0.1em; }
article .inline_block > hr { display: inline-block; width: 1px; height: 0.83333em; margin: auto var(--basic-ui-inset-h); background-color: rgb(0 0 0 / 10%); }
article .inline_block.thin_divider > hr { margin-inline: 0; }
article .line_block { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; align-items: baseline; border-bottom: solid 1px rgb(var(--cp) / 30%); border-radius: 100%; }
article .line_block.bolder { padding-top: 4px; padding-bottom: 4px; margin-bottom: 4px; } 
article .line_block.hide_block_when_empty:empty { display: none; }
article .line_block.list_item:last-of-type { border-bottom-color: transparent !important; }
article .line_block.wrapped { flex-wrap: wrap; }
article .line_block.wrappable { flex-wrap: wrap; border-radius: 7%; align-items: center; }
article .line_block.stretched { justify-content: stretch; align-items: stretch; }
article .line_block.from_start { justify-content: flex-start; }
article .line_block.to_end { justify-content: flex-end; }
article .line_block.center { justify-content: center; }
article .line_block.central { justify-content: space-evenly; }
article .line_block.wided { justify-content: space-between; }
article .line_block.stretch { justify-content: stretch; }
article .line_block.v_center { align-items: center; }
article .line_block.v_stretch { align-items: stretch; }
article .line_block.spaced { --space: 0.5em; }
article .line_block.spaced > *:not(.line_block):not(.inline_block) { display: inline-block; }
article .line_block.spaced > *:not(:first-child) { margin-left: var(--space); }
article .line_block.spaced > .suffix { margin-left: 0.1em; }
/* article .line_block > * { margin: 0 6px; } */
article .line_block > hr { display: inline-block; width: 1px; height: 0.83333em; margin: auto var(--basic-ui-inset-h); background-color: rgb(0 0 0 / 10%); }
article .line_block.thin_divider > hr { margin-inline: 0; }
article .lines_block { --line-margin-top: 0px; --line-margin-bottom: 0px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: baseline; text-align: left; }
article ul.lines_block { list-style: none; margin: 0; padding: 0; }
article .lines_block.inline { display: inline-flex; }
article .lines_block.hide_block_when_empty:empty { display: none; }
article .lines_block.wrapped { flex-wrap: wrap; }
article .lines_block.stretched { justify-content: stretch; align-items: stretch; }
article .lines_block.from_start { align-items: flex-start; }
article .lines_block.to_end { align-items: flex-end; }
article .lines_block.center { align-items: center; text-align: center; }
article .lines_block.stretch { align-items: stretch; }
article .lines_block.from_top { justify-content: flex-start; }
article .lines_block.to_bottom { justify-content: flex-end; }
article .lines_block.v_center { justify-content: center; }
article .lines_block.v_stretch { justify-content: stretch; }
article .lines_block > *:not(:first-child) { margin-top: var(--line-margin-top); }
article .lines_block > *:not(:last-child) { margin-bottom: var(--line-margin-bottom); }
article .linear_block { position: relative; display: block; }
article .linear_block.hide_block_when_empty_list:has(> ul:empty) { display: none; }
article .linear_block > ul { display: flex; flex-direction: column; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; }
article .linear_block > ul > li { border-bottom: solid 1px rgb(var(--cpd) / 30%); /* border-radius: 100%; */ }
article .linear_block > ul > li.round_around { border-bottom: none; }
article .linear_block > ul > li:last-of-type { border-bottom-color: transparent; }
article .h_linear_block { position: relative; display: block; }
article .h_linear_block.hide_block_when_empty_list:has(> ul:empty) { display: none; }
article .h_linear_block > ul { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; }
article .h_linear_block > ul > li { display: inline; }
article .table_block { --row-border-top: none; --row-border-top-first: var(--row-border-top); --row-border-bottom: solid 1px var(--color-boundary); --row-border-bottom-last: var(--row-border-bottom); --row-border-left: none; --row-border-right: none; --cell-margin: 0; --cell-padding: 0.2em; --cell-border: none; --header-width: 25%; --header-min-width: fit-content; --header-margin: var(--cell-margin); --header-padding: 0.5em; --header-bg: var(--color-boundary-o20); display: flex; flex-flow: column nowrap; }
article .table_block.most { display: table; border-collapse: collapse; }
article .table_block > .row_block { display: flex; flex-flow: row nowrap; min-height: max-content; box-sizing: border-box; border-top: var(--row-border-top); border-bottom: var(--row-border-bottom); border-left: var(--row-border-left); border-right: var(--row-border-right); align-items: center; text-align: left; }
article .table_block.most > .row_block,
article .table_block > .row_block.most { display: table-row; }
article .table_block > .row_block:first-child { border-top: var(--row-border-top-first); }
article .table_block > .row_block:last-child { border-bottom: var(--row-border-bottom-last); }
article .table_block > .row_block > * { display: inline-block; width: -webkit-fill-available; height: 100%; box-sizing: border-box; flex-grow: 1; flex-shrink: 1; padding: var(--cell-padding); }
article .table_block.most > .row_block > *,
article .table_block > .row_block.most > * { display: table-cell; vertical-align: middle; }
article .table_block > .row_block > .header { width: var(--header-width); min-width: var(--header-min-width); padding: var(--header-padding); flex-grow: 0; flex-shrink: 0; background-color: var(--header-bg); }
article .table_block > .row_block.header { background-color: var(--header-bg); }
article .table_block.most > .row_block.header,
article .table_block > .row_block.most.header { display: table-header-group; }
article .table_block > .row_block.header  > * { padding: var(--header-padding); }
article .stack_layer_block { position: relative; display: block; }
article .stack_layer_block > * { position: absolute; margin: 0; }
article .stack_layer_block > *.top { top: 0; }
article .stack_layer_block > *.bottom { bottom: 0; }
article .stack_layer_block > *.left { left: 0; }
article .stack_layer_block > *.right { right: 0; }
article .stack_layer_block > *.stick_top { top: 0; left: 0; right: 0; }
article .stack_layer_block > *.stick_bottom { bottom: 0; left: 0; right: 0; }
article .stack_layer_block > *.stick_left { top: 0; bottom: 0; left: 0; }
article .stack_layer_block > *.stick_right { top: 0; bottom: 0; right: 0; }
article .stack_layer_block > *.stretch { top: 0; bottom: 0; left: 0; right: 0; }
article .stack_layer_block > *.fit_h { width: fit-content; }
article .stack_layer_block > *.fit_h:is(.stick_top, .stick_bottom, .stretch) { margin-left: auto; margin-right: auto; }
article .stack_layer_block > *.fit_v { height: fit-content; }
article .stack_layer_block > *.fit_v:is(.stick_left, .stick_right, .stretch) { margin-top: auto; margin-bottom: auto; }
article .stack_layer_block > *.center { margin: auto; }

article .toggle_block { container-name: toggle-block; container-type: inline-size; margin-top: 6px; margin-bottom: 18px; transition-duration: 0.3s; }
article .toggle_block.hide_block_when_empty:empty { display: none; }
/* article .toggle_block:not([data-collapsed="1"]) { scroll-snap-align: start end; } */
article :not(.inner_space[data-content-collapsed]) > .toggle_block { position: relative; }
article :not(.inner_space[data-content-collapsed]) > .toggle_block:not([data-collapsed="1"]) { scroll-snap-align: start end; }
article .toggle_block > button.toggle { top: 0; right: 0; background-image: var(--svg-to-collapsed); background-size: 80%; background-position: center; background-repeat: no-repeat; }
article .toggle_block > label { display: block; margin: 2px 2px 6px; font-size: 1rem; text-decoration: underline; text-decoration-style: double; text-decoration-color: var(--color-point-light); }
article .toggle_block > :not(button.toggle, label, .basic) { opacity: 1; transition-duration: 0.2s; }
article .toggle_block[data-collapsed="1"] > button.toggle { background-image: var(--svg-to-expanded); }
article .toggle_block[data-collapsed="1"] > :not(button.toggle, label, .basic) { margin: 0; padding: 0; opacity: 0; }
article .toggle_block[data-collapsed="1"] > :not(button.toggle, label, .basic) > * { display: none; }

article .tab_block { }
article .scoped_tab_block { }
article .toggle_tab_block { container-name: toggle-tab-block; container-type: inline-size; transition-duration: 0.3s; }
/* article .toggle_tab_block:not([data-collapsed="1"]) { scroll-snap-align: start end; } */
article :not(.inner_space[data-content-collapsed]) > .toggle_tab_block { position: relative; }
article :not(.inner_space[data-content-collapsed]) > .toggle_tab_block:not([data-collapsed="1"]) { scroll-snap-align: start end; }
article .toggle_tab_block > button.toggle { top: 0; height: 32px; margin: auto 0; background-image: var(--svg-to-collapsed); background-size: 80%; background-position: center; background-repeat: no-repeat; }
article .toggle_tab_block[data-collapsed="1"] > button.toggle { background-image: var(--svg-to-expanded); }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .titled_tab_block { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; transition-duration: 0.3s; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .titled_tab_block.under_bordered::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: var(--color-boundary-o10); }
article .toggle_tab_block > :not(button.toggle, .titled_tab_block) { opacity: 1; transition-duration: 0.2s; }
article .toggle_tab_block[data-collapsed="1"] > :not(button.toggle, .titled_tab_block) { margin: 0; height: 0; padding: 0; opacity: 0; }
article .toggle_tab_block[data-collapsed="1"] > :not(button.toggle, .titled_tab_block) > * { display: none; }
article .toggle_tab_block > .titled_tab_block > button.toggle { top: 0; bottom: 2px; height: 32px; margin: auto 0; background-image: var(--svg-to-collapsed); background-size: 80%; background-position: center; background-repeat: no-repeat; }
article .toggle_tab_block[data-collapsed="1"] > .titled_tab_block > button.toggle { background-image: var(--svg-to-expanded); }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .titled_tab_block > ul.tab_set { display: flex; flex-direction: row; flex-wrap: nowrap; flex-grow: 2; margin: 0; padding: 0; list-style: none; justify-content: left; user-select: none; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .titled_tab_block > ul.tab_set > li { position: relative; flex-grow: 1; padding: 8px 0; border-bottom: solid 2px transparent; cursor: pointer; transition-duration: 0.3s; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .titled_tab_block > ul.tab_set > li > span { position: relative; display: block; top: 2px; bottom: 0; left: 0; right: 0; width: fit-content; height: fit-content; margin: auto; font-size: 1.125rem; font-weight: lighter; align-content: center; transition-duration: 0.3s; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .titled_tab_block > ul.tab_set > li[data-tab-selected="1"] { border-bottom-color: rgb(var(--cmv) / 60%); }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .titled_tab_block > ul.tab_set > li[data-tab-selected="1"] > span { font-weight: normal; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .titled_tab_block > label { flex-grow: 0; flex-shrink: 1; margin: 2px 12px; padding: 8px max(32px, 10%) 8px max(0px, calc(66.666% - 260px)); font-weight: bold; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .titled_tab_block > label > span { position: relative; display: block; top: 0; bottom: 0; left: 0; right: 0; width: fit-content; height: 100%; margin: auto; font-size: 1.125rem; align-content: center; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .sliding_subject_block { --grab-x: 0px; position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; height: 36px; justify-content: space-between; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .sliding_subject_block > *[data-tab-id] { max-width: -webkit-fill-available; flex-shrink: 1; font-weight: lighter; line-height: 1.25em; text-align: center; transition-duration: 0.3s; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .sliding_subject_block > *[data-tab-id][data-tab-selected="1"] { flex-grow: 1; flex-shrink: 0; font-weight: normal; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .sliding_subject_block > *[data-tab-id]:not([data-tab-selected="1"]) { width: 0; margin-inline: 0; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .sliding_subject_block[data-on-grab="1"] > *[data-tab-id]:not([data-slide="1"]) { flex-shrink: 1; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .sliding_subject_block > *[data-tab-id][data-slide="1"] { width: max(var(--grab-x), var(--grab-x) * -1, 0px); transition-delay: 0s; transition-duration: 0s; }
article .scoped_tab_block > .sliding_subject_block > *[data-tab-id] { padding: 8px; }
article .scoped_tab_block > .sliding_subject_block > *[data-tab-id]:not([data-tab-selected="1"]) { padding-left: 0; padding-right: 0; }
article .scoped_tab_block > .sliding_subject_block > button.page_handle { position: absolute; top: 0; bottom: 0; height: 100%; margin: 0; padding: initial; aspect-ratio: 1; text-align: center; cursor: pointer; user-select: none; }
article .scoped_tab_block > .sliding_subject_block > button.page_handle.tp_tiled_btn { margin: 0; border: none; }
article .scoped_tab_block > .sliding_subject_block > button.page_handle[data-direction="prev"] { left: 0; }
article .scoped_tab_block > .sliding_subject_block > button.page_handle[data-direction="next"] { right: 0; }
article .scoped_tab_block > .sliding_subject_block > button.page_handle:not(:has(> span)) { background-size: cover; background-position: center; background-repeat: no-repeat; }
article .scoped_tab_block > .sliding_subject_block > button.page_handle[data-direction="prev"] { background-image: var(--svg-back); }
article .scoped_tab_block > .sliding_subject_block > button.page_handle[data-direction="next"] { background-image: var(--svg-forward); }
article .scoped_tab_block > .sliding_subject_block > button.page_handle > span { font-size: 1.75rem; line-height: 1em; }
article .scoped_tab_block > .sliding_subject_block > button.page_handle[data-direction="prev"] > span::before { content: '\003C'; }
article .scoped_tab_block > .sliding_subject_block > button.page_handle[data-direction="next"] > span::before { content: '\003E'; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .tab_content_blocks { --grab-x: 0px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .tab_content_blocks .bricky { min-width: fit-content; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .tab_content_blocks > * { max-width: -webkit-fill-available; flex-shrink: 1; text-align: center; overflow-x: hidden; transition-duration: unset; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .tab_content_blocks > * > * { transition-duration: 0.3s; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .tab_content_blocks > *[data-tab-selected="1"] { flex-grow: 1; flex-shrink: 0; }
article :is(.tab_block, .scoped_tab_block, .toggle_tab_block) > .tab_content_blocks > *:not([data-tab-selected="1"]) { width: 0; margin-inline: 0; }
article :is(.tab_block, .toggle_tab_block) > .tab_content_blocks > *:not([data-tab-selected="1"]) > * { min-width: max-content; }
article :is(.tab_block, .toggle_tab_block) > .tab_content_blocks[data-on-grab="1"] > * { transition-duration: 0.3s; }
article :is(.tab_block, .toggle_tab_block) > .tab_content_blocks[data-on-grab="1"] > *:not([data-slide="1"]) { flex-shrink: 1; }
article :is(.tab_block, .toggle_tab_block) > .tab_content_blocks > *[data-slide="1"] { width: max(var(--grab-x), var(--grab-x) * -1, 0px); transition-delay: 0s; transition-duration: 0s; }
article .scoped_tab_block > .tab_content_blocks > .scope_item > .bound_host { list-style: none; flex-shrink: 0; margin: 0; padding: 0; overflow-x: hidden; }
article .scoped_tab_block > .tab_content_blocks > .scope_item > .bound_host[data-page-selected="1"] { flex-grow: 1; flex-shrink: 0; }
article .scoped_tab_block > .tab_content_blocks > .scope_item > .bound_host:not([data-page-selected="1"]) { width: 0; }
article .scoped_tab_block > .tab_content_blocks > .scope_item > .bound_host:not([data-page-selected="1"]) > * { min-width: max-content; text-wrap: nowrap; }
article .scoped_tab_block > .tab_content_blocks[data-on-grab="1"] > .scope_item > .bound_host { max-width: -webkit-fill-available; transition-duration: 0.3s; }
article .scoped_tab_block > .tab_content_blocks[data-on-grab="1"] > .scope_item > .bound_host:not([data-slide="1"]) { flex-shrink: 1; }
article .scoped_tab_block > .tab_content_blocks > .scope_item > .bound_host[data-slide="1"] { width: max(var(--grab-x), var(--grab-x) * -1, 0px); transition-delay: 0s; transition-duration: 0s; }
article :is(.tab_block, .scoped_tab_block).stretched { display: flex; flex-flow: column nowrap; width: -webkit-fill-available; height: 0; align-self: stretch; }
article :is(.tab_block, .scoped_tab_block).stretched > * { flex-grow: 0; flex-shrink: 0; }
article :is(.tab_block, .scoped_tab_block).stretched > .tab_content_blocks { height: 0; flex-grow: 1; flex-shrink: 1; justify-content: flex-start; }
article :is(.tab_block, .scoped_tab_block).stretched > .tab_content_blocks > * { overflow-y: auto; }
@media all and (min-height: 700px) and (min-width: 740px) {
article :is(.tab_block, .scoped_tab_block).stretched > .tab_content_blocks { --height: max-content; max-height: 100%; }
article :is(.tab_block, .scoped_tab_block).stretched { min-height: max-content; max-height: -webkit-fill-available; }
article :is(.tab_block, .scoped_tab_block).stretched > .tab_content_blocks { min-height: max-content; max-height: -webkit-fill-available; }
}

article .dynamic_section_host { display: flex; flex-flow: row nowrap; margin-top: 4px; color: var(--color-text-lightest); }
article .dynamic_section_host > .host_item { width: 98%; flex-grow: 1; padding-top: 8px; padding-bottom: 7px; border-bottom: solid 1px var(--color-boundary-o10); font-size: 1rem; font-weight: 500; text-align: center; line-height: 1.5em; transition-timing-function: ease-in-out; transition-duration: 0.2s; will-change: auto; cursor: pointer; }
article .dynamic_section_host > .host_item:has(> :nth-child(2)) { width: 48%; }
article .dynamic_section_host > .host_item:has(> :nth-child(3)) { width: 32%; }
article .dynamic_section_host > .host_item:has(> :nth-child(4)) { width: 23%; }
article .dynamic_section_host > .host_item:has(> :nth-child(5)) { width: 18%; }
article .dynamic_section_host > .host_item:has(> :nth-child(6)) { width: 14%; }
article .dynamic_section_host > .host_item:has(> :nth-child(7)) { width: 12%; }
article .dynamic_section_host > .host_item:has(> :nth-child(8)) { width: 10%; }
article .dynamic_section_host > .host_item:has(> :nth-child(9)) { width: 9%; }
article .dynamic_section_host > .host_item:has(> :nth-child(10)) { width: 8%; }
article .dynamic_section_host > .host_item:has(> :nth-child(11)) { width: 7%; }
article .dynamic_section_host > .host_item:has(> :nth-child(12)) { width: 6%; }
article .dynamic_section_host > .host_item[data-showing="1"] { padding-bottom: 6px; border-bottom: solid 2px var(--color-indicator-bold); color: var(--color-text-darker); }

article .dynamic_section_block { display: flex; flex-flow: row nowrap; height: 100vh; padding: 0; overflow-x: overlay; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; }
article .dynamic_section_block > .block_item { width: 100%; flex-shrink: 0; overflow-y: auto; scroll-snap-align: start; }
article .dynamic_section_block.full_screen > .block_item { width: 100vw; max-width: 100%; padding: calc(var(--top-pad) + var(--top-fixed-height)) var(--right-pad) calc(var(--bottom-pad) + var(--bottom-fixed-height)) var(--left-pad); }

@media all and (min-height: 480px) and (min-width: 740px) {
article { --section-col-gap: var(--basic-ui-inset-h-half); }

article .dynamic_section_host { column-gap: var(--section-col-gap); }

article .dynamic_section_block { padding-inline: 0; column-gap: var(--section-col-gap); }
article .dynamic_section_block > .block_item { width: calc((100% - var(--section-col-gap)) * 0.5); flex-grow: 0; padding-inline: 0; }
article .dynamic_section_block.full_screen > .block_item { width: calc((100vw - var(--section-col-gap)) * 0.5); flex-grow: 0; padding-inline: 0; }

    @media all and (min-height: 700px) and (min-width: 960px) {
article .dynamic_section_block > .block_item { width: calc((100% - (var(--section-col-gap) * 2)) * 0.32); flex-grow: 1; }
article .dynamic_section_block.full_screen > .block_item { width: calc((100vw - (var(--section-col-gap) * 2)) * 0.32); flex-grow: 1; }
        @media all and (min-width: 1280px) {
article .dynamic_section_block > .block_item { width: calc((100% - (var(--section-col-gap) * 3)) * 0.24); }
article .dynamic_section_block.full_screen > .block_item { width: calc((100vw - (var(--section-col-gap) * 3)) * 0.24); }
            @media all and (min-width: 1600px) {
article .dynamic_section_block > .block_item { width: calc((100% - (var(--section-col-gap) * 4)) * 0.19); }
article .dynamic_section_block.full_screen > .block_item { width: calc((100vw - (var(--section-col-gap) * 4)) * 0.19); }
                @media all and (min-width: 1920px) {
article .dynamic_section_block > .block_item { width: calc((100% - (var(--section-col-gap) * 5)) * 0.15); }
article .dynamic_section_block.full_screen > .block_item { width: calc((100vw - (var(--section-col-gap) * 5)) * 0.15); }
                    @media all and (min-width: 2240px) {
article .dynamic_section_block > .block_item { width: calc((100% - (var(--section-col-gap) * 6)) * 0.13); }
article .dynamic_section_block.full_screen > .block_item { width: calc((100vw - (var(--section-col-gap) * 6)) * 0.13); }
                        @media all and (min-width: 2560px) {
article .dynamic_section_block > .block_item { width: calc((100% - (var(--section-col-gap) * 7)) * 0.11); }
article .dynamic_section_block.full_screen > .block_item { width: calc((100vw - (var(--section-col-gap) * 7)) * 0.11); }
                            @media all and (min-width: 2880px) {
article .dynamic_section_block > .block_item { width: calc((100% - (var(--section-col-gap) * 8)) * 0.10); }
article .dynamic_section_block.full_screen > .block_item { width: calc((100vw - (var(--section-col-gap) * 8)) * 0.10); }
                                @media all and (min-width: 3200px) {
article .dynamic_section_block > .block_item { width: calc((100% - (var(--section-col-gap) * 9)) * 0.09); }
article .dynamic_section_block.full_screen > .block_item { width: calc((100vw - (var(--section-col-gap) * 9)) * 0.09); }
                                    @media all and (min-width: 3520px) {
article .dynamic_section_block > .block_item { width: calc((100% - (var(--section-col-gap) * 10)) * 0.08); }
article .dynamic_section_block.full_screen > .block_item { width: calc((100vw - (var(--section-col-gap) * 10)) * 0.08); }
                                        @media all and (min-width: 3840px) {
article .dynamic_section_block > .block_item { width: calc((100% - (var(--section-col-gap) * 11)) * 0.07); }
article .dynamic_section_block.full_screen > .block_item { width: calc((100vw - (var(--section-col-gap) * 11)) * 0.07); }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}


article .flexy { display: flex; flex-flow: row wrap; }
article .flexy.inline { display: inline-flex; }
article button.flexy { justify-content: center; align-items: center; }
article .flexy.centered { justify-content: center; align-items: center; }

article nav.instant_appbar { --height: var(--appbar-height); position: fixed; display: flex; flex-direction: row; flex-wrap: nowrap; z-index: 1; top: 0; left: 0; right: 0; height: calc(var(--appbar-height) + var(--top-safe-pad)); box-sizing: border-box; margin: 0; padding: var(--top-safe-pad) var(--right-pad) 0 var(--left-pad); justify-content: center; align-items: center; backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); user-select: none; }
@media all and (min-height: 700px) and (min-width: 740px) {
article.limit_on_screen nav.instant_appbar { width: var(--on-screen-limit-width); margin: auto; }
}
article nav.instant_appbar > * { max-height: var(--height); margin-top: auto; margin-bottom: auto; }
article nav.instant_appbar > * > * { max-height: var(--height); }
article nav.instant_appbar button { height: var(--height); margin: 0; font-size: 1rem; }
article nav.instant_appbar button.square { aspect-ratio: 1; }
article nav.instant_appbar > .float_area { position: absolute; top: var(--top-safe-pad); bottom: 0; margin: 0; }
article nav.instant_appbar > .float_area > button { }
article nav.instant_appbar > nav { position: relative; display: flex; align-items: center; }
article nav.instant_appbar > nav > button { }
article nav.instant_appbar > nav > button.back_navigation {  }
article nav.instant_appbar > nav > button.back_navigation > span { font-size: 26px; }
article nav.instant_appbar > nav.appbarLeft { flex-direction: row; flex-wrap: nowrap; left: 0; justify-content: flex-start; }
article nav.instant_appbar > nav.appbarLeft > button { }
article nav.instant_appbar > nav.appbarRight { flex-direction: row-reverse; flex-wrap: nowrap; right: 0; justify-content: flex-end; }
article nav.instant_appbar > nav.appbarRight > button { }
article nav.instant_appbar > nav.appbarCenter { flex-direction: row; flex-wrap: nowrap; left: 0; right: 0; margin-inline: auto; }
article nav.instant_appbar > nav.appbarCenter > button { }
article nav.instant_appbar button.home { }
article nav.instant_appbar button.home img { height: calc(var(--height) * 86%); }

article .appbar_pad { height: var(--appbar-height); }

article ul.for_ui { list-style: none; margin: 0; padding: 0; }

article [data-after-indicator-upper]::after { content: ''; display: inline-block; width: 12px; height: 9px; margin-left: 0.5em; background-image: var(--svg-dropdown); background-size: contain; background-position: center; background-repeat: no-repeat; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
article [data-after-indicator-upper="1"]::after { transform: rotateX(180deg); }

article .num_keypad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); height: -webkit-fill-available; }
article .num_keypad > button { }

article .date_shower { }
article .date_shower .date_replacer { cursor: pointer; }


article .ez_hidable { transition-timing-function: ease; transition-duration: 0.3s; }
article .ez_hidable[data-hide="0"],
article .ez_hidable[data-hide="1"] { opacity: 0; }
article .ez_hidable[data-hide="1"] { display: none; }


article .menu_block { --margin-inline: var(--basic-ui-inset-h); --label-color: var(--color-adaptive); --label-font-size: 0.8125rem; --label-line-height: 1.3125rem; --menu-height: 3.25em; --menu-bg-hover: rgb(var(--cb) / 50%); --menu-bg-active: rgb(var(--cb) / 70%); --menu-color: var(--color-grayscale-darker); --menu-font-size: 1rem; --menu-line-height: 1.5em; --divider-margin: 0; --divider-margin-inline: var(--margin-inline); user-select: none; }
article .menu_block > * { }
article .menu_block > .lead_in_label { --text-color: var(--color-adaptive-dimmest); --font-size: 1rem; --line-height: 1.5em; --divider-color: var(--color-boundary-light); --label-margin-top: 0; --label-margin-bottom: 10px; margin-inline: var(--margin-inline); border-bottom: solid 1px var(--divider-color); }
article .menu_block > .lead_in_label > label { margin-top: var(--label-margin-top); margin-bottom: var(--label-margin-bottom); color: var(--text-color); font-size: var(--font-size); line-height: var(--line-height); }
article .menu_block > label { display: block; margin-inline: var(--margin-inline); color: var(--label-color); font-size: var(--label-font-size); line-height: var(--label-line-height); }
article .menu_block > label.top_pad { padding-top: 16px; }
article .menu_block > label.bottom_pad { padding-bottom: 16px; }
article .menu_block > button { display: flex; flex-flow: row nowrap; width: -webkit-fill-available; height: var(--menu-height); padding: 0; padding-inline: var(--margin-inline); justify-content: left; align-items: center; color: var(--menu-color); font-size: var(--menu-font-size); line-height: var(--menu-line-height); }
article .menu_block > button:hover { background-color: var(--menu-bg-hover) !important; }
article .menu_block > button:active { background-color: var(--menu-bg-active) !important; }
article .menu_block > button > span { padding: 0; }
article .menu_block > hr { margin: var(--divider-margin); margin-inline: var(--divider-margin-inline); }

article .info_button { --height: 3.25rem; --height: var(--menu-height); --lead-text-color: var(--color-grayscale-darker); --lead-text-size: 1rem; --lead-text-weight: 400; --lead-text-height: 1.5em; --trail-text-color: var(--color-grayscale-neutral); --trail-text-size: 0.875rem; --trail-text-weight: 400; --trail-text-height: 1.375rem; display: flex; flex-flow: row nowrap; width: -webkit-fill-available; height: var(--height); justify-content: space-between !important; align-items: center; user-select: none; }
article .info_button[data-lead]::before { content: attr(data-lead); color: var(--lead-text-color); font-size: var(--lead-text-color); font-weight: var(--lead-text-weight); line-height: var(--lead-text-height); user-select: text; }
article .info_button[data-trail]::after { content: attr(data-trail); color: var(--trail-text-color); font-size: var(--trail-text-size); font-weight: var(--trail-text-weight); line-height: var(--trail-text-height); }

article .text_capsule { --height: 1.5em; --radius: calc(var(--height) / 2); --color: var(--color-text); --bg-color: var(--color-boundary-light); --font-size: 1em; display: inline-flex; min-width: max-content; padding-inline: 0.5em; justify-content: center; align-items: center; border-style: none; border-radius: var(--radius); background-color: var(--bg-color); color: var(--color); font-size: var(--font-size); line-height: var(--height); }
article .text_capsule.bordered { --border-color: var(--color-boundary); --bg-color: transparent; height: var(--height); box-sizing: border-box; border: solid 1px var(--border-color); }
article .text_capsule.hide_on_empty:empty { display: none; }

article .h_icon_set { display: flex; flex-flow: row nowrap; align-items: stretch; }
article .h_icon_set > .icon_place { width: fit-content; aspect-ratio: 1; flex-grow: 0; flex-shrink: 0; align-self: center; }
article .h_icon_set > .icon_place > img { height: 100%; }
article .h_icon_set > .icon_place > img[src=""] { width: 0; height: fit-content; }
article .h_icon_set > .content_place { width: 100%; flex-grow: 1; flex-shrink: 1; }

article .icon_list { --button-pad: 8px; --icon-size: 64px; --bg-hover: var(--color-boundary-o25); --bg-active: var(--color-boundary-o50); --text-margin: 8px; --text-color: var(--color-text); --font-size: 0.875rem; --line-height: 1.5em; justify-content: space-around; }
article .icon_list > .list_item { }
article .icon_list > .list_item:not(:has(> button)) { display: flex; flex-direction: column; flex-wrap: nowrap; padding: 16px 8px 8px; align-items: center; }
article .icon_list > .list_item > button { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; height: 100%; padding: var(--button-pad); align-items: center; border-style: none; background-color: transparent; } 
article .icon_list > .list_item > button:focus { outline: dashed 2px var(--color-point); }
article .icon_list > .list_item > button:hover { background-color: var(--bg-hover); }
article .icon_list > .list_item > button:active { background-color: var(--bg-active); }
article .icon_list > .list_item > button.no_pad { padding: 0; }
article .icon_list > .list_item .item_logo { --width: var(--icon-size); --bg-color: transparent; position: relative; width: var(--width); aspect-ratio: 1; background-color: var(--bg-color); overflow: hidden; }
article .icon_list > .list_item .item_logo.circle { border-radius: calc(var(--width) / 2); }
article .icon_list > .list_item .item_logo.bg_gray { --bg-color: var(--color-adaptive-bright); }
article .icon_list > .list_item .item_logo:is(:not([style*="--src:"]):not(:has(> img:not([src=""]))), .bordered) { outline: solid 1px rgb(var(--cbl) / 40%); outline-offset: -1px; }
article .icon_list > .list_item .item_logo[style*="--src:"]:not(:has(> img:not([src=""]))) { background-image: var(--src); background-size: cover; background-position: center; background-repeat: no-repeat; }
article .icon_list > .list_item .item_logo:not([style*="--src:"]):not(:has(> img:not([src=""])))::after { content: attr(data-placeholder); position: absolute; display: inline-block; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: fit-content; height: fit-content; font-size: 0.875rem; }
article .icon_list > .list_item .item_logo > img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: fit-content; height: fit-content; margin: auto; }
article .icon_list > .list_item .item_name { margin: var(--text-margin) 0; color: var(--text-color); font-size: var(--font-size); line-height: var(--line-height); }

article .double_methods { flex-wrap: wrap !important; padding-inline: 4px; justify-content: center; }
article .double_methods > .method_item { width: 48%; flex-grow: 1; flex-shrink: 0; }
article .double_methods > .method_item > button { width: -webkit-fill-available; height: 64px; margin: 4px; padding: initial; border-style: solid; border-color: rgb(var(--cbl) / 30%); }
article .triple_methods { flex-wrap: wrap !important; padding-inline: 4px; justify-content: center; }
article .triple_methods > .method_item { width: 30%; flex-grow: 1; flex-shrink: 0; }
article .triple_methods > .method_item > button { width: -webkit-fill-available; height: 64px; margin: 4px; padding: initial; border-style: solid; border-color: rgb(var(--cbl) / 30%); }

article .custom_selector_bar { --bar-height: 40px; --item-height: var(--bar-height); --float-bg: transparent; position: relative; display: flex; flex-flow: row nowrap; height: var(--bar-height); justify-content: space-between; align-items: center; }
article .custom_selector_bar.inline { display: inline-flex; }
article .custom_selector_bar[data-blind-float-bg="1"] { --float-bg: var(--color-boundary-foggy-o75); }
article .custom_selector_bar:not(:has(> .bar_side:nth-child(2))) { justify-content: center; }
article .custom_selector_bar > .bar_side { display: flex; flex-flow: row nowrap; align-self: stretch; min-height: var(--bar-height); max-height: var(--bar-height); flex-shrink: 1; align-items: center; }
article .custom_selector_bar > .bar_side > button { display: flex; flex-flow: row nowrap; align-self: stretch; min-height: var(--bar-height); max-height: var(--bar-height); padding: 0 var(--basic-ui-inset-h); column-gap: var(--basic-ui-inset-h-half); justify-content: space-between; align-items: center; }
article .custom_selector_bar > .bar_side > button > span { padding: 0; }
article .custom_selector_bar > .bar_side > button:disabled { opacity: 0.3; }
article .custom_selector_bar > .bar_side > button.selector { }
article .custom_selector_bar > .bar_side > button.selector::after { content: ''; display: inline-block; width: 12px; height: 9px; margin-left: 0.5em; background-image: var(--svg-dropdown); background-size: contain; background-position: center; background-repeat: no-repeat; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
article .custom_selector_bar:has(> .float_bottom > ul.selections)[data-dropdown-open="1"] > .bar_side > button.selector::after { transform: rotateX(180deg); }
article .custom_selector_bar:has(> .float_top > ul.selections) > .bar_side > button.selector::after { transform: rotateX(180deg); }
article .custom_selector_bar:has(> .float_top > ul.selections)[data-dropdown-open="1"] > .bar_side > button.selector::after { transform: rotateX(0deg); }
article .custom_selector_bar > .bar_side > button.selector > span { }
article .custom_selector_bar > .bar_side > button.prev { }
article .custom_selector_bar > .bar_side > button.prev::before { content: ''; display: inline-block; width: 10px; height: 16px; margin-right: 0.5em; background-image: var(--svg-prev); background-size: contain; background-position: center; background-repeat: no-repeat; }
article .custom_selector_bar > .bar_side > button.next { }
article .custom_selector_bar > .bar_side > button.next::after { content: ''; display: inline-block; width: 10px; height: 16px; margin-left: 0.5em; background-image: var(--svg-next); background-size: contain; background-position: center; background-repeat: no-repeat; }
article .custom_selector_bar > .float_selections { width: 100%; height: 0; overflow: visible; }
article .custom_selector_bar > .float_selections > ul.selections { position: absolute; display: flex; flex-flow: column nowrap; list-style: none; z-index: 1; width: max-content; margin: 0 auto; padding: 0; background-color: var(--float-bg); backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); }
article .custom_selector_bar > .float_selections.float_top > ul.selections { bottom: 0; }
article .custom_selector_bar > .float_selections.float_bottom > ul.selections { top: 0; }
article .custom_selector_bar:has(> .bar_side.left_side > button.selector) > .float_selections > ul.selections { left: 0; }
article .custom_selector_bar:has(> .bar_side.right_side > button.selector) > .float_selections > ul.selections { right: 0; }
article .custom_selector_bar:has(> .bar_side.center_side > button.selector) > .float_selections > ul.selections { left: 0; right: 0; }
article .custom_selector_bar[data-side-pad="1"] > .float_selections > ul.monthes { left: var(--left-pad); right: var(--right-pad); }
article .custom_selector_bar[data-list-desc="1"] > .float_selections > ul.selections { flex-direction: column-reverse; }
article .custom_selector_bar:not([data-dropdown-open="1"]) > .float_selections > ul.selections { display: none; }
article .custom_selector_bar > .float_selections > ul.selections > li { }
article .custom_selector_bar > .float_selections > ul.selections > li > button { display: flex; flex-flow: row nowrap; width: -webkit-fill-available; height: var(--item-height); padding-inline: var(--basic-ui-inset-h); column-gap: var(--basic-ui-inset-h-half); justify-content: center; align-items: center; color: var(--color-text); font-size: 1.125rem; font-weight: 400; line-height: 1.625rem; }
article .custom_selector_bar > .float_selections > ul.selections > li[data-selected="1"] > button { color: var(--color-text-darker); font-weight: 600; }
article .custom_selector_bar > .float_selections > ul.selections > li > button > span { padding: 0; }
article .custom_selector_bar > .float_selections > ul.selections > li > button > span.month { }

article .month_selector_bar { --bar-height: 40px; --item-height: var(--bar-height); --float-bg: transparent; position: relative; display: flex; flex-flow: row nowrap; height: var(--bar-height); justify-content: space-between; align-items: center; }
article .month_selector_bar.inline { display: inline-flex; }
article .month_selector_bar[data-blind-float-bg="1"] { --float-bg: var(--color-boundary-foggy-o75); }
article .month_selector_bar > .monthSelectorInput { position: absolute; z-index: -1; width: 0; height: 0; padding: 0; margin: 0; border: none; opacity: 0; pointer-events: none; }
article .month_selector_bar > .bar_side { display: flex; flex-flow: row nowrap; height: 100%; flex-shrink: 1; align-items: center; }
article .month_selector_bar > .bar_side > button { display: flex; flex-flow: row nowrap; height: 100%; padding: 0 16px; justify-content: space-between; align-items: center; }
article .month_selector_bar > .bar_side > button > span { padding: 0; }
article .month_selector_bar > .bar_side > button:disabled { opacity: 0.3; }
article .month_selector_bar > .bar_side > button.selector { }
article .month_selector_bar > .bar_side > button.selector::after { content: ''; display: inline-block; width: 12px; height: 9px; margin-left: 0.5em; background-image: var(--svg-dropdown); background-size: contain; background-position: center; background-repeat: no-repeat; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
article .month_selector_bar:has(> .float_bottom > ul.selections)[data-dropdown-open="1"] > .bar_side > button.selector::after { transform: rotateX(180deg); }
article .month_selector_bar:has(> .float_top > ul.selections) > .bar_side > button.selector::after { transform: rotateX(180deg); }
article .month_selector_bar:has(> .float_top > ul.selections)[data-dropdown-open="1"] > .bar_side > button.selector::after { transform: rotateX(0deg); }
article .month_selector_bar > .bar_side > button.selector > span { }
article .month_selector_bar > .bar_side > button.selector > span.current { }
article .month_selector_bar > .bar_side > button.prev { }
article .month_selector_bar > .bar_side > button.prev::before { content: ''; display: inline-block; width: 10px; height: 16px; margin-right: 0.5em; background-image: var(--svg-prev); background-size: contain; background-position: center; background-repeat: no-repeat; }
article .month_selector_bar > .bar_side > button.next { }
article .month_selector_bar > .bar_side > button.next::after { content: ''; display: inline-block; width: 10px; height: 16px; margin-left: 0.5em; background-image: var(--svg-next); background-size: contain; background-position: center; background-repeat: no-repeat; }
article .month_selector_bar > .float_selections { width: 100%; height: 0; overflow: visible; }
article .month_selector_bar > .float_selections > ul.monthes { position: absolute; display: flex; flex-flow: column nowrap; list-style: none; z-index: 1; top: 0; left: var(--left-pad); right: var(--right-pad); width: max-content; margin: 0; padding: 0; background-color: var(--float-bg); backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); }
article .month_selector_bar[data-no-side-pad="1"] > .float_selections > ul.monthes { left: 0; right: 0; }
article .month_selector_bar[data-list-asc="1"] > .float_selections > ul.monthes { flex-direction: column-reverse; }
article .month_selector_bar:not([data-dropdown-open="1"]) > .float_selections > ul.monthes { display: none; }
article .month_selector_bar > .float_selections > ul.monthes > li { }
article .month_selector_bar > .float_selections > ul.monthes > li > button { display: flex; flex-flow: row nowrap; width: -webkit-fill-available; height: var(--item-height); padding-inline: 16px; justify-content: space-between; align-items: center; }
article .month_selector_bar > .float_selections > ul.monthes > li > button > span { padding: 0; }
article .month_selector_bar > .float_selections > ul.monthes > li > button > span.month { }

article .search_box { margin-inline: 12px; padding: 16px !important; background-color: rgb(var(--cbl) / 60%); border-radius: 4px !important; }
article .search_box:focus-within { background-color: rgb(var(--cbl) / 80%); }
article .search_box:hover { background-color: rgb(var(--cbl) / 40%); }
article .search_box:active { background-color: rgb(var(--cbl) / 20%); }
article .search_box { background-color: rgb(var(--cbl) / 80%); }
article .search_box input { margin: 0; border-bottom-style: none; }
article .search_box input:focus { box-shadow: unset; }
article .search_box input:hover { background-color: transparent; }
article .search_box input:active { background-color: transparent; }
article .search_box button { margin: auto; background-color: transparent; font-size: 1.6rem; }
article .search_box button > * { transition-timing-function: ease; transition-duration: 0.2s; }
article .search_box button:hover > * { background-color: transparent; translate: -2px -4px; filter: drop-shadow(1px 2px 2px #444); }
article .search_box button:active > * { background-color: transparent; scale: 1.25; filter: drop-shadow(2px 4px 3px #666); }

article .custom_checkbox { --checkbox-unchecked-bg: var(--svg-checkbox-unchecked-bg); --checkbox-unchecked: var(--svg-checkbox-unchecked); --checkbox-checked-bg: var(--svg-checkbox-checked-bg); --checkbox-checked: var(--svg-checkbox-checked); }
article .custom_checkbox > input { position: absolute; width: 0; height: 0; opacity: 0; }
article .custom_checkbox > label { display: inline-flex; flex-flow: row nowrap; align-items: center; }
article .custom_checkbox > label::before { content: ''; display: inline-block; width: 1em; height: 1em; background-image: var(--checkbox-unchecked-bg), var(--checkbox-unchecked); background-size: 1em 1em, 1em 1em; background-position: center, center; background-repeat: no-repeat, no-repeat; vertical-align: text-bottom; }
article .custom_checkbox:has(input[type="checkbox"]:checked) > label::before { background-image: var(--checkbox-checked-bg), var(--checkbox-checked); }
article .custom_checkbox > label > span { }


article .float_center { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: fit-content; height: fit-content; margin: auto; }
article .float_top { position: absolute; top: 0; left: 0; right: 0; width: fit-content; height: fit-content; margin: auto; }
article .float_bottom { position: absolute; bottom: 0; left: 0; right: 0; width: fit-content; height: fit-content; margin: auto; }
article .float_left { position: absolute; top: 0; bottom: 0; left: 0; width: fit-content; height: fit-content; margin: auto; }
article .float_right { position: absolute; top: 0; bottom: 0; right: 0; width: fit-content; height: fit-content; margin: auto; }

article .fixed_center { position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: fit-content; height: fit-content; margin: auto; }
article .fixed_top { position: fixed; top: 0; left: 0; right: 0; width: fit-content; height: fit-content; margin: auto; }
article .fixed_bottom { position: fixed; bottom: 0; left: 0; right: 0; width: fit-content; height: fit-content; margin: auto; }
article .fixed_left { position: fixed; top: 0; bottom: 0; left: 0; width: fit-content; height: fit-content; margin: auto; }
article .fixed_right { position: fixed; top: 0; bottom: 0; right: 0; width: fit-content; height: fit-content; margin: auto; }

article .fixed_access { --trdr: 0.5s; position: fixed; transition-timing-function: ease; transition-duration: var(--trdr); }
article .fixed_access.quick { --trdr: 0.3s; }
article .fixed_access.medium { --trdr: 0.8s; }
article .fixed_access.slow { --trdr: 1s; }
article .fixed_access.v_bar { top: 0; bottom: 0; }
article .fixed_access.h_bar { left: 0; right: 0; }
article .fixed_access.top { --top: var(--top-safe-pad); top: var(--top); }
main#staticDoc article .fixed_access.top { --top: var(--top-pad); }
article .fixed_access.bottom { --bottom: var(--bottom-safe-pad); bottom: var(--bottom); }
main#staticDoc article .fixed_access.bottom { --bottom: var(--bottom-pad); }
article .fixed_access[data-hide="0"],
article .fixed_access[data-hide="1"] { opacity: 0; }
article .fixed_access[data-hide="1"] { display: none; }
article .fixed_access.bottom[data-hide="0"],
article .fixed_access.bottom[data-hide="1"] { translate: 0 16px; }


article .circle_border { --border-color: var(--color-boundary-light); border: solid 1px var(--border-color); border-radius: 100%; }
article .circle_bg { --bg-color: var(--color-boundary-light); background-color: var(--bg-color); border-radius: 100%; }
article .inner_space { margin: 24px 0 32px; padding: 20px; border-radius: 42px !important; border-top-left-radius: 56px !important; background-color: rgb(var(--cwht) / 66.666%); box-shadow: inset 0px 14px 14px -10px rgb(var(--cmvlr) / 15%), inset 0px -14px 14px -6px rgb(var(--cmvlr) / 15%); overflow-x: hidden; transition-duration: 0.3s; }
article .inner_space.hide_block_when_empty:empty { display: none; }
article .inner_space:last-child { margin-bottom: 8px; }
article .inner_space[data-content-collapsed]:not([data-content-collapsed="1"]) { scroll-snap-align: start end; }
article .inner_space[data-content-collapsed]:not([data-content-collapsed="1"]) { scroll-snap-type: y mandatory; }
article .inner_space[data-content-collapsed="1"] { margin: 8px 0; padding: 0 20px; }
article .inner_space > button.toggle { --margin: 26px; background-image: var(--svg-to-collapsed); background-size: 80%; background-position: center; background-repeat: no-repeat; }
article .inner_space[data-content-collapsed="1"] > button.toggle { --margin: 6px; background-image: var(--svg-to-expanded); }
article .inner_space > section { }
article .inner_space > section > button.toggle { --margin: 4px; margin: 16px; }
article .inner_space > section > label { margin: 6px 8px 10px; transition-duration: 0.3s; }
article .inner_space > .toggle_block { top: 10px; right: 0; }
article .inner_space > :is(.tab_block, .scoped_tab_block, .toggle_tab_block) { top: 10px; right: 0; }
article .inner_space > .toggle_tab_block > button.toggle { position: absolute; right: 0; border: none; }
article .inner_space > .toggle_tab_block > .titled_tab_block > button.toggle { position: absolute; right: 0; border: none; }
article .inner_space[data-content-collapsed="1"] > section > label { margin: 12px 8px 4px; }
article .round_around { width: 100%; margin: 4px 0; padding: 8px 0 6px; border-radius: 42px !important; border-top-left-radius: 56px !important; background-color: rgb(var(--cwht) / 66.666%); box-shadow: inset 0px 14px 14px -16px rgb(var(--cmvlr) / 15%), inset 0px -14px 14px -14px rgb(var(--cmvlr) / 15%); overflow-x: hidden; transition-duration: 0.3s; }
article .round_around.hide_block_when_empty:empty { display: none; }
article .round_around > .line_block { border-bottom-color: rgb(var(--cmvlt) / 30%); border-radius: 20%; }
article .skinny_card { border-bottom-left-radius: 2%; border-bottom-right-radius: 14px; box-shadow: inset 0px -8px 12px -12px rgb(var(--cmv) / 50%), 8px 0px 12px -16px rgb(var(--cmv) / 50%); transition-duration: 0.3s; }
article .skinny_card.hide_block_when_empty:empty { display: none; }
article .skinny_card > .round_around:last-child, article .skinny_card > *:last-child > .round_around:last-child { margin-bottom: 12px; }
article .call_out { --padding: var(--basic-ui-inset-v) var(--basic-ui-inset-h); --border-radius: var(--basic-ui-inset); --bg-color: var(--color-boundary-brighty); display: flex; flex-flow: row nowrap; width: -webkit-fill-available; padding: var(--padding); border-radius: var(--border-radius); background-color: var(--bg-color); }
article .call_out::before { content: '💡'; margin-right: var(--basic-ui-inset-h-half); }
article .call_out.notice::before { content: '❕'; }
article .call_out.important::before { content: '❗'; }
article .call_out.critical::before { content: '‼️'; }
article .call_out.perceive::before { content: '⁉️'; }
article .call_out.doubt::before { content: '❔'; }
article .call_out.questionary::before { content: '❓'; }
article .call_out > * { flex-grow: 1; flex-shrink: 1; }

article .can_be_omitted:empty { display: none; }
article .fit_width { width: fit-content; }
article .fit_height { height: fit-content; }
article .fit_content { width: fit-content; height: fit-content; }
article .moderate_width { width: max(310px, 80%); margin: 0 auto; overflow-x: visible; }
article .max_width { width: -webkit-fill-available; }
article .max_height { height: -webkit-fill-available; }
article .max_sized { width: -webkit-fill-available; height: -webkit-fill-available; }
article .match_width { width: 100%; }
article .match_height { height: 100%; }
article .match_parent { width: 100%; height: 100%; }
article .middle_align { vertical-align: middle; }

article .flex_separation { justify-content: space-between; }

article .no_inline_padding { padding-inline: 0; }

article .lines { display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; }
article .img_wrap {  }
article .img_wrap > img { }
article .text_wrap { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; top: 0; bottom: 0; left: 0; right: 0; width: fit-content; height: fit-content; margin: auto; }
article .text_wrap > span { }
article .span_wrap { overflow-x: hidden; }
article .span_wrap > span { text-wrap: nowrap; }
article .input_wrap { position: relative; height: 100%; flex-grow: 1; flex-shrink: 1; }
article .input_wrap > input { position: relative; display: block; top: 0; bottom: 0; margin: auto 0; width: 100%; height: min-content; }
article .button_wrap { display: inline-block; }
article .button_wrap > button { }

article .check_indicator_fore::before, article .check_indicator_hind::after { font-size: 1rem; font-family: var(--font-for-emoji) !important; font-variant-emoji: emoji; line-height: 1em; vertical-align: text-top; }
article .check_indicator_fore::before { content: '🟩'; }
article .check_indicator_fore[data-on="1"]::before { content: '✅'; }
article .check_indicator_hind::after { content: '🟩'; }
article .check_indicator_hind[data-on="1"]::after { content: '✅'; }
article .toggle_switch::after { content: 'OFF'; }
article .toggle_switch[data-on="1"]::after { content: 'ON'; }

article .toggle_switch_checkbox { --height: 1.5em; --pointer-color: var(--color-boundary-bright); --disabled-color: var(--color-boundary-lightness); --enabled-color: var(--color-point-dark); position: relative; display: inline-block; width: calc(var(--height) / 3 * 5); height: var(--height); flex-shrink: 0; border-radius: var(--height); background-color: var(--disabled-color); transition-timing-function: ease; transition-duration: 0.3s; transition-delay: 0.1s; will-change: auto; }
article .toggle_switch_checkbox::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: fit-content; height: var(--height); aspect-ratio: 1; box-sizing: border-box; border: solid 2px transparent; border-radius: var(--height); background-color: var(--pointer-color); background-clip: content-box; transition-timing-function: ease; transition-duration: 0.2s; will-change: auto; }
article .toggle_switch_checkbox:has(input[type="checkbox"]:checked) { background-color: var(--enabled-color); }
article .toggle_switch_checkbox:has(input[type="checkbox"]:checked)::before { left: calc(var(--height) * 2 / 3); }
article .toggle_switch_checkbox:has(input[type="checkbox"]:disabled) { opacity: 0.4; }
article .toggle_switch_checkbox input[type="checkbox"] { position: absolute; width: 0; height: 0; opacity: 0; }
article .toggle_switch_checkbox label { position: absolute; display: block; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; }

article [data-lead]::before { content: attr(data-lead); }
article [data-trail]::after { content: attr(data-trail); }
article [data-prefix]::before, article [data-suffix]::after { margin: 0 2px; color: var(--color-text-lightest); font-size: 0.75em; }
article [data-prefix]::before { content: attr(data-prefix); }
article [data-suffix]::after { content: attr(data-suffix); }
article [data-fore]::before, article [data-hind]::after { display: inline-block; flex-grow: 0; flex-shrink: 0; font-size: 1.375em; font-family: var(--font-for-emoji) !important; font-variant-emoji: emoji; line-height: 1.0625em; translate: 0 3px; }
article [data-fore]::before { content: attr(data-fore); }
article [data-hind]::after { content: attr(data-hind); }
article [data-nose]::before, article [data-nose]::after { position: relative; z-index: 1; top: -4px; bottom: 0; width: 0; min-height: fit-content; margin: auto 0; font-size: 1.375em; font-family: var(--font-for-emoji) !important; font-variant-emoji: emoji; line-height: 1.5em; overflow: visible; }
article [data-nose]::before { content: attr(data-nose); }
article [data-tail]::after { content: attr(data-tail); translate: -1.4em 0; }
article [data-hat]::before, article [data-shoe]::after { position: relative; height: 0; min-width: fit-content; margin-bottom: 28px; font-size: 1.375em; font-family: var(--font-for-emoji) !important; font-variant-emoji: emoji; line-height: 1.5em; overflow: visible; }
article [data-hat]::before { content: attr(data-hat); }
article [data-shoe]::after { content: attr(data-shoe); }

article [data-hang-lead]:not(:empty)::before { content: attr(data-hang-lead); }
article [data-hang-trail]:not(:empty)::after { content: attr(data-hang-trail); }

article [data-focused="1"] { color: var(--color-focused); }
article [data-important="1"] { color: var(--color-important); }
article [data-emphasis="1"] { color: var(--color-emphasis); }
article [data-bold="-4"] { font-weight: 100; }
article [data-bold="-3"] { font-weight: 200; }
article [data-bold="-2"] { font-weight: 300; }
article [data-bold="-1"] { font-weight: 400; }
article [data-bold="0"] { font-weight: 500; }
article [data-bold="1"] { font-weight: 600; }
article [data-bold="2"] { font-weight: 700; }
article [data-bold="3"] { font-weight: 800; }
article [data-bold="4"] { font-weight: 900; }
article [data-lighter="1"] { font-weight: lighter; }
article [data-bolder="1"] { font-weight: bolder; }

article > section.summary > .placeholder { display: none; }

section { }
section > label { display: block; margin: 4px 2px; font-size: 1.125rem; font-weight: 500; }

section > .basic > .label { margin: 0 auto; padding: 8px 12px; border: none; }
section > .basic > .label > label { width: 100px; font-size: 1.38rem; }
section > .basic > .label > div { flex-grow: 1; align-content: flex-end; }
section > .basic > .label > div > span { color: var(--color-boundary-dark); font-size: 0.75rem; }
section > .basic > .placeholder { display: none; }


button.toggle { --margin: 6px; display: block !important; position: absolute; z-index: 1; top: var(--margin); right: var(--margin); margin: 0; width: 32px; aspect-ratio: 1; padding-bottom: 3px; border: ridge 1px var(--color-point); border-radius: 32px; font-size: 0.9375rem; font-weight: bold; line-height: 1.25rem; cursor: pointer; transition-duration: 0.2s; }
/* button.toggle::before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 22px; height: 22px; margin: auto; text-align: center; } */
button.toggle:focus { outline: dashed 2px var(--color-point-dark); outline-offset: 1px; }
button.toggle:hover { }
button.toggle:active { }
button.placeholder { position: relative; width: -webkit-fill-available; margin: 2px; padding: 12px; border: dotted 1px var(--color-point-light); border-radius: 14px; background-color: #FFF6; box-shadow: 1px 4px 8px -7px var(--color-point-dark); cursor: pointer; user-select: none; transition-duration: 0.2s; }
button.placeholder:focus { outline: dashed 2px rgb(var(--cmd) / 60%); outline-offset: -6px; }
button.placeholder:hover { box-shadow: 1px 4px 8px -7px var(--color-point-dark), inset 14px 9px 16px -10px white; }
button.placeholder:active { box-shadow: 1px 4px 8px -7px var(--color-point-dark), inset 14px 9px 48px -8px white; }
button.placeholder div.text_wrap { }
button.placeholder div.text_wrap span { text-align: center; }
button.placeholder div.text_wrap span.main_line { color: var(--color-important); font-size: 1rem; line-height: 1.25rem; text-shadow: 1px 1px 1px #8503; }
button.placeholder div.text_wrap span.sub_line { margin-top: 4px; font-size: 0.75rem; line-height: 0.875rem; }



/* class role attached element styles */
*:first-of-type > hr.lead_in_divider, *:last-of-type > hr.lead_out_divider { display: none; }
*:not(:first-of-type) > hr.lead_in_divider, *:not(:last-of-type) > hr.lead_out_divider { --height: 8px; --margin-v: 28px; --margin-h: 0; --margin-t: var(--margin-v); --margin-b: var(--margin-v); --margin-l: var(--margin-h); --margin-r: var(--margin-h); --lead-color: var(--color-adaptive-bright); height: var(--height); margin: var(--margin-t) var(--margin-r) var(--margin-b) var(--margin-l); background-color: var(--lead-color); }

.scalable { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; transition-duration: 0.3s; }
.scalable .toggle { }
.scalable > .toggle { }
.scalable > div.toggle { position: absolute; margin: 0; }
.scalable[data-max-scale="0"] > div.toggle { display: none; }
.scalable > div.toggle.brow { top: 0; left: 0; right: 0; width: -webkit-fill-available; height: 42px; }
.scalable > div.toggle.jaw { bottom: 0; left: 0; right: 0; width: -webkit-fill-available; height: 18px; }
.scalable > div.toggle.cheek { top: 0; bottom: 0; width: 4px; height: -webkit-fill-available; }
.scalable > div.toggle.cheek.left { left: 0; }
.scalable > div.toggle.cheek.right { right: 0; }
.scalable > section { position: relative; margin-bottom: 24px; transition-duration: 0.3s; }
.scalable > section:last-child { margin-bottom: 18px; }
.scalable > section.summary { padding-top: 32px; margin-bottom: 12px; }
.scalable > section.summary > .toggle { }
.scalable > section.summary > button.toggle { --margin: 4px; left: var(--margin); right: unset; width: 36px; border-color: rgb(var(--cb) / 70%); background-size: 75%; background-position: center; background-repeat: no-repeat; }
.scalable[data-look-scale="0"] > section.summary > button.toggle { background-image: var(--svg-from-minimum); }
.scalable[data-look-scale="1"] > section.summary > button.toggle { background-image: var(--svg-from-medium-to-larger); }
.scalable[data-look-scale="1"][data-max-scale="1"] > section.summary > button.toggle { background-image: var(--svg-from-medium-to-smaller); }
.scalable[data-look-scale="2"] > section.summary > button.toggle { background-image: var(--svg-from-maximum); }
.scalable > section:not(.toggle, .summary) { opacity: 1; transition-duration: 0.2s; }
.scalable > section > *:not(button.toggle, .basic) { opacity: 1; transition-duration: 0.2s; }
.scalable > section > .basic .on_collapsed { opacity: 1; transition-duration: 0.2s; }
.scalable[data-look-scale="0"] > section:not(.toggle, .summary, [data-only-scale="0"]) { margin: 0; padding: 0; opacity: 0; }
.scalable[data-look-scale="0"] > section:not(.toggle, .summary, [data-only-scale="0"]) > * { display: none; }
.scalable:not([data-look-scale="0"]) > section.summary > .basic > .on_collapsed { margin: 0; padding: 0; opacity: 0; }
.scalable:not([data-look-scale="0"]) > section.summary > .basic > .on_collapsed > * { display: none; }
.scalable[data-look-scale="1"] > section.collapsible:not([data-collapsed="0"]) > button.toggle { background-image: var(--svg-to-expanded); }
.scalable[data-look-scale="1"] > section.collapsible:not([data-collapsed="0"]) > .basic button.toggle { background-image: var(--svg-to-expanded); }
.scalable[data-look-scale="1"] > section:not(.collapsible[data-collapsed="0"]) > *:not(button.toggle, label, .basic, [data-only-scale="1"]) { margin: 0; padding: 0; opacity: 0; }
.scalable[data-look-scale="1"] > section:not(.collapsible[data-collapsed="0"]) > *:not(button.toggle, label, .basic, [data-only-scale="1"]) > * { display: none; }
.scalable[data-look-scale="2"] > section.collapsible:not([data-collapsed="1"]) > button.toggle { background-image: var(--svg-to-collapsed); }
.scalable[data-look-scale="2"] > section.collapsible:not([data-collapsed="1"]) > .basic button.toggle { background-image: var(--svg-to-collapsed); }
.scalable[data-look-scale="2"] > section.collapsible:not([data-collapsed="1"]) > .basic > .on_collapsed { margin: 0; padding: 0; opacity: 0; }
.scalable[data-look-scale="2"] > section.collapsible:not([data-collapsed="1"]) > .basic > .on_collapsed > * { display: none; }
.scalable[data-look-scale="2"] > section.collapsible:not([data-collapsed="1"]) > .basic > * > .on_collapsed { margin: 0; padding: 0; opacity: 0; }
.scalable[data-look-scale="2"] > section.collapsible:not([data-collapsed="1"]) > .basic > * > .on_collapsed > * { display: none; }
.scalable[data-look-scale="0"] [data-only-scale]:not([data-only-scale="0"]) { display: none; }
.scalable[data-look-scale="1"] [data-only-scale]:not([data-only-scale="1"]) { display: none; }
.scalable[data-look-scale="2"] [data-only-scale]:not([data-only-scale="2"]) { display: none; }
.scalable[data-look-scale="3"] [data-only-scale]:not([data-only-scale="3"]) { display: none; }
.collapsible { transition-duration: 0.3s; }
.collapsible:not([data-collapsed="1"]) { scroll-snap-align: start end; }
.collapsible > button.toggle { margin-top: 7px; background-image: var(--svg-to-collapsed); background-size: 80%; background-position: center; background-repeat: no-repeat; opacity: 1; transition-duration: 0.2s; }
.collapsible > .basic button.toggle { margin-top: 7px; background-image: var(--svg-to-collapsed); background-size: 80%; background-position: center; background-repeat: no-repeat; opacity: 1; transition-duration: 0.2s; }
.collapsible[data-collapsed="0"] > button.toggle { background-image: var(--svg-to-collapsed); }
.collapsible[data-collapsed="0"] > .basic button.toggle { background-image: var(--svg-to-collapsed); }
.collapsible[data-collapsed="1"] > button.toggle { background-image: var(--svg-to-expanded); }
.collapsible[data-collapsed="1"] > .basic button.toggle { background-image: var(--svg-to-expanded); }
.collapsible > :not(button.toggle, label, .basic) { opacity: 1; transition-duration: 0.2s; }
.collapsible > .basic > .on_collapsed { opacity: 1; transition-duration: 0.2s; }
.collapsible > .basic > * > .on_collapsed { opacity: 1; transition-duration: 0.2s; }
/* .collapsible[data-collapsed="0"] > :not(button.toggle, label, .basic) { display: block; opacity: 1; }
.collapsible[data-collapsed="0"] > :not(button.toggle, label, .basic) > * { display: block; } */
.collapsible[data-collapsed="0"] > .basic > .on_collapsed { margin: 0; padding: 0; opacity: 0; }
.collapsible[data-collapsed="0"] > .basic > .on_collapsed > * { display: none; }
.collapsible[data-collapsed="0"] > .basic > * > .on_collapsed { margin: 0; padding: 0; opacity: 0; }
.collapsible[data-collapsed="0"] > .basic > * > .on_collapsed > * { display: none; }
.collapsible[data-collapsed="1"] > :not(button.toggle, label, .basic) { margin: 0; padding: 0; opacity: 0; }
.collapsible[data-collapsed="1"] > :not(button.toggle, label, .basic) > * { display: none; }
.collapsible[data-collapsed="1"] > .basic > .on_collapsed { opacity: 1; }
.collapsible[data-collapsed="1"] > .basic > * > .on_collapsed { opacity: 1; }


/* method related styles */
body .toaster_slot { --line-height: 1.5em; display: flex !important; flex-flow: row nowrap; padding: var(--basic-ui-inset-v) var(--basic-ui-inset-h); justify-content: space-between; align-items: center; font-size: 1rem; line-height: var(--line-height); }
body .toaster_slot::after { content: ''; display: inline-block; height: var(--line-height); aspect-ratio: 1; background-image: var(--svg-dropdown-24x24); background-size: cover; background-position: center; background-repeat: no-repeat; }
body .toaster_slot:disabled { opacity: 0.4; }
body .toaster_slot > span {}


.unified_calendar { container-name: unical-root; container-type: size; user-select: none; }
.unified_calendar section {}
.unified_calendar section.calendar_area { flex-grow: 0; flex-shrink: 0; }
@container unical-root (min-width: 740px) {
.unified_calendar section.calendar_area { --side-pad: 16px; }
} @container unical-root (not (min-width: 740px)) {
.unified_calendar section.calendar_area { --side-pad: 8px; }
    @container unical-root (max-width: 460px) {
.unified_calendar section.calendar_area { --side-pad: 6px; }
        @container unical-root (max-width: 380px) {
.unified_calendar section.calendar_area { --side-pad: 4px; }
            @container unical-root (max-width: 350px) {
.unified_calendar section.calendar_area { --side-pad: 2px; }
                @container unical-root (max-width: 340px) {
.unified_calendar section.calendar_area { --side-pad: 0px; }
                }
            }
        }
    }
}
.unified_calendar section.schedule_list { flex-grow: 1; flex-shrink: 1; height: -webkit-fill-available; }


.calendar_area { --cal-area-height-ratio: 0.5; --min-height: 0px; --indic-area-min-height: 28px; --cal-bar-height: 60px; --side-pad: 0px; position: relative; height: calc(max(calc((100% - var(--indic-area-min-height) - var(--cal-bar-height) - var(--bottom-pad)) * var(--cal-area-height-ratio)), var(--min-height)) + var(--indic-area-min-height) + var(--cal-bar-height)); margin: 0; padding: 0 max(var(--side-pad), 4px); transition-timing-function: ease; transition-duration: 0.4s; user-select: none; }
.calendar_area[data-size="0"] { --cal-area-height-ratio: 0; }
.calendar_area[data-size="1"] { --cal-area-height-ratio: 0.4; --min-height: 240px; }
.calendar_area[data-size="2"] { --cal-area-height-ratio: 0.6; --min-height: 320px; }
@container unical-root (min-width: 460px) and (min-height: 760px) {
.calendar_area[data-size="1"] { --min-height: 320px; }
.calendar_area[data-size="2"] { --min-height: 500px; }
}
@container unical-root (max-height: 650px) {
.calendar_area[data-size="1"] { --cal-area-height-ratio: 0.25; --min-height: 160px; }
.calendar_area[data-size="2"] { --cal-area-height-ratio: 0.5; --min-height: 240px; }
}
@supports (not (container-type: inline-size)) { /* fallback for iOS(Safari) 15 and under */
    @media (max-height: 680px) {
.calendar_area[data-size="1"] { --cal-area-height-ratio: 0.25; --min-height: 160px; }
.calendar_area[data-size="2"] { --cal-area-height-ratio: 0.5; --min-height: 240px; }
    }
}
.calendar_area[data-size="2"][data-scale-override="4"] { --cal-area-height-ratio: 0.5; }
.calendar_area[data-size="1"][data-scale-override="5"] { --cal-area-height-ratio: 0.3; }
.calendar_area[data-size="2"][data-scale-override="5"] { --cal-area-height-ratio: 0.4; }
.calendar_area:is([data-size="1"], [data-size="2"])[data-scale-override="6"] { --cal-area-height-ratio: 0.2; }
.calendar_area[data-size="3"] { --cal-area-height-ratio: 1; }
.calendar_area:not([data-scale-override=""]) { --min-height: 240px; }
.calendar_area[data-fit-calendar="1"] { --min-height: fit-content; }
.calendar_area[data-size=""] { height: min(max(var(--height), var(--indic-area-min-height) + var(--cal-bar-height)), calc(100% - var(--bottom-pad))); }
.calendar_area > div.variable_calendar { --trdl-hide: 0s; --trdr-hide: 0.4s; --trdr-expand: 0.4s; --trdl-item: 0s; --trdl-group: 0.4s; --trdr-group: 0.4s; --trdr-item: 0.4s; --trdl-ratio: 0.4s; position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; height: 100%; margin: 0; }
.calendar_area > div.variable_calendar[data-no-transition="1"] { --trdl-hide: 0s; --trdr-hide: 0s; --trdr-expand: 0s; --trdl-item: 0s; --trdl-group: 0s; --trdr-group: 0s; --trdr-item: 0s; --trdl-ratio: 0s; }
.calendar_area > div.variable_calendar div { min-width: fit-content; margin: 0; transition-timing-function: ease; }
.calendar_area > div.variable_calendar > div { }

div.variable_calendar { user-select: none; }
div.variable_calendar > div.date_indicate_area { container-name: unical-indic-area; container-type: inline-size; width: 100%; height: var(--indic-area-min-height); flex-grow: 0; flex-shrink: 0; }
div.variable_calendar > div.date_indicate_area > div.date_indicator { width: max-content; margin: 0 auto; text-wrap: nowrap; /* display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; */ }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span { display: inline-block; padding: 4px; }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span > label { color: var(--color-text); font-size: 1rem; cursor: pointer; }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.scaler[data-today="1"] > label { color: var(--color-today-vivid); }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.scaler[data-selected="1"] > label { text-shadow: -0.05em -0.05em 0 rgb(var(--csdg) / 60%), 0.05em 0.05em 0 rgb(var(--csdv) / 40%); }
@container unical-indic-area (max-width: 380px) {
div.variable_calendar > div.date_indicate_area > div.date_indicator > span > label { font-size: 0.9375rem; }    
    @container unical-indic-area (max-width: 360px) {
div.variable_calendar > div.date_indicate_area > div.date_indicator > span > label { font-size: 0.875rem; }    
        @container unical-indic-area (max-width: 340px) {
div.variable_calendar > div.date_indicate_area > div.date_indicator > span > label { font-size: 0.8rem; }    
        }
    }
} @supports (not (container-type: inline-size)) { /* fallback for iOS(Safari) 15 and under */
    @media (max-width: 380px) {
div.variable_calendar > div.date_indicate_area > div.date_indicator > span > label { font-size: 0.9375rem; }    
        @media (max-width: 360px) {
div.variable_calendar > div.date_indicate_area > div.date_indicator > span > label { font-size: 0.875rem; }    
            @media (max-width: 340px) {
div.variable_calendar > div.date_indicate_area > div.date_indicator > span > label { font-size: 0.8rem; }    
            }
        }
    }
}
div.variable_calendar > div.date_indicate_area > div.date_indicator > span > label::before { color: var(--color-text-lightest); }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span > label::after { color: var(--color-text-lightest); }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.years { }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.years > label { }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.years > label::before { content: ''; }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.years > label::after { content: ''; }
div.variable_calendar:lang(ko) > div.date_indicate_area > div.date_indicator > span.years > label::before { content: ''; }
div.variable_calendar:lang(ko) > div.date_indicate_area > div.date_indicator > span.years > label::after { content: '년도'; }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.months { }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.months > label { }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.months > label::before { content: ''; }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.months > label::after { content: ''; }
div.variable_calendar:lang(ko) > div.date_indicate_area > div.date_indicator > span.months > label::before { content: ''; }
div.variable_calendar:lang(ko) > div.date_indicate_area > div.date_indicator > span.months > label::after { content: '월'; }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.weeks { }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.weeks > label { }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.weeks > label::before { content: 'week\A0'; }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.weeks > label::after { content: ''; }
div.variable_calendar:lang(ko) > div.date_indicate_area > div.date_indicator > span.weeks > label::before { content: ''; }
div.variable_calendar:lang(ko) > div.date_indicate_area > div.date_indicator > span.weeks > label::after { content: '주차'; }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.month { }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.month > label { }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.days { }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.days > label { }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.days > label::before { content: ''; }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.days > label::after { content: 'day'; }
div.variable_calendar:lang(ko) > div.date_indicate_area > div.date_indicator > span.days > label::before { content: ''; }
div.variable_calendar:lang(ko) > div.date_indicate_area > div.date_indicator > span.days > label::after { content: '요일'; }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.date { }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.date > label { }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.date > label::before { display: inline-block; letter-spacing: -0.05em; margin-inline: -0.1em -0.15em; scale: 0.9 1; }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.today { padding: 4px 6px; }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.today > input { margin: 0; translate: 0 0.1em; cursor: pointer; }
div.variable_calendar > div.date_indicate_area > div.date_indicator > span.today > label { color: var(--color-today-vivid); }


div.variable_calendar > div.calendar_structure { container-name: unical-str-root; container-type: size; height: 100%; flex-grow: 1; flex-shrink: 1; }

div.variable_calendar > div.calendar_structure[data-structure-type="massive"] { text-align: center; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"][data-transition]:not([data-transition=""]):not([data-transition="0"]) * { will-change: auto; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] :is(div, label, ul, li, span) { overflow: hidden; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] div { box-sizing: border-box; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] label { min-width: fit-content; flex-grow: 0; flex-shrink: 0; color: var(--color-text-dark); transition-timing-function: ease; transition-duration: 0.3s; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"][data-no-transition="1"] label { transition-duration: unset; }

div.variable_calendar > div.calendar_structure[data-structure-type="massive"] .days { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; margin: 0 auto; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] .days > .day { width: 14%; width: round(to-zero, calc(100% / 7), 1%); transition-delay: unset; transition-duration: unset; }

div.variable_calendar > div.calendar_structure[data-structure-type="massive"] div.days_subjects { flex-shrink: 0; text-align: center; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder > label { container-name: unical-days-subject-label; container-type: inline-size; width: min(5em, calc(100% / 8)); min-width: max-content; font-size: 0.875rem; text-wrap: nowrap; transition-timing-function: ease; transition-duration: var(--trdr-expand); cursor: pointer; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"]) > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder > label { opacity: 0; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder > label > span { display: inline-block; padding: 0.16em 0.8em; border-radius: 15px; color: rgb(var(--cwht) / 85%); font-size: 1.25em; line-height: 1.18rem; background-color: rgb(var(--cgn) / 90%); transition-timing-function: ease; transition-duration: var(--trdr-expand); }
@container unical-days-subject-label (max-width: 58px) {
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder > label > span { font-size: 1.00em; transition-duration: 0s; }
    @container unical-days-subject-label (max-width: 54px) {
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder > label > span { font-size: 0.9em; }
        @container unical-days-subject-label (max-width: 48px) {
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder > label > span { font-size: 0.8em; }
            @container unical-days-subject-label (max-width: 43px) {
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder > label > span { font-size: 0.7em; }
            }
        }
    }
}
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder > label > span:not(:empty)::before { content: ''; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder > label > span:not(:empty)::after { content: ''; }
div.variable_calendar:lang(ko) > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder > label > span:not(:empty)::before { content: ''; }
div.variable_calendar:lang(ko) > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder > label > span:not(:empty)::after { content: '월'; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder > div.days { }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder > div.days > div { }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder > div.days > div > label { letter-spacing: -0.1em; font-size: 0.8125rem; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] div.days_subjects > div.days_holder > div.days > div > label:before { position: relative; z-index: -1; font-size: 1.153846em; letter-spacing: -0.6em; line-height: 1em; translate: 0 1px; opacity: 0.8; }

div.variable_calendar > div.calendar_structure[data-structure-type="massive"] .month[data-today="1"] > div.days_subjects > div.days_holder > label > span { background-color: rgb(var(--ctdv) / 90%); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] .month[data-selected="1"] > div.days_subjects > div.days_holder > label > span { background-color: rgb(var(--csdv) / 90%); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] .month[data-selected="1"][data-today="1"] > div.days_subjects > div.days_holder > label > span { text-decoration-style: wavy; text-decoration-line: underline; text-decoration-thickness: 0.1em; text-decoration-color: var(--color-today-gray); }

div.variable_calendar > div.calendar_structure[data-structure-type="massive"] :is(.years, .months, .weeks, .days) { padding: 0; transition-delay: var(--trdl-group); transition-duration: var(--trdr-group); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) :is(.years, .months, .weeks, .days):hover { overflow: visible; }
@media (pointer: fine) {
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] :is(.years, .months, .weeks, .days) { padding: 4px; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] :is(.year, .month, .week, .day) { --hover-bgc: rgb(var(--cpl) / 10%); --hover-bs: 0 0 8px 0 rgb(var(--cb) / 60%); transition-delay: var(--trdl-item); transition-duration: var(--trdr-item); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) :is(.year, .month, .week, .day):hover { z-index: 1; overflow: visible; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) .year:hover { background-color: var(--hover-bgc); box-shadow: var(--hover-bs); }
div.variable_calendar:not([data-scale="1"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) .year:not(:has(.months:hover)):hover { background-color: var(--hover-bgc); box-shadow: var(--hover-bs); }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) .month:hover { background-color: var(--hover-bgc); box-shadow: var(--hover-bs); }
div.variable_calendar:not([data-scale="1"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) .month:not(:has(> .days_subjects > .days_holder > .days:hover, > .weeks:hover)):hover { background-color: var(--hover-bgc); box-shadow: var(--hover-bs); }
div.variable_calendar:not([data-scale="1"]) > div.calendar_structure[data-structure-type="massive"] .month:has(> .days_subjects > .days_holder > .days > .day[data-day="0"]:hover) .day[data-day="0"] { background-color: var(--hover-bgc); box-shadow: var(--hover-bs); }
div.variable_calendar:not([data-scale="1"]) > div.calendar_structure[data-structure-type="massive"] .month:has(> .days_subjects > .days_holder > .days > .day[data-day="1"]:hover) .day[data-day="1"] { background-color: var(--hover-bgc); box-shadow: var(--hover-bs); }
div.variable_calendar:not([data-scale="1"]) > div.calendar_structure[data-structure-type="massive"] .month:has(> .days_subjects > .days_holder > .days > .day[data-day="2"]:hover) .day[data-day="2"] { background-color: var(--hover-bgc); box-shadow: var(--hover-bs); }
div.variable_calendar:not([data-scale="1"]) > div.calendar_structure[data-structure-type="massive"] .month:has(> .days_subjects > .days_holder > .days > .day[data-day="3"]:hover) .day[data-day="3"] { background-color: var(--hover-bgc); box-shadow: var(--hover-bs); }
div.variable_calendar:not([data-scale="1"]) > div.calendar_structure[data-structure-type="massive"] .month:has(> .days_subjects > .days_holder > .days > .day[data-day="4"]:hover) .day[data-day="4"] { background-color: var(--hover-bgc); box-shadow: var(--hover-bs); }
div.variable_calendar:not([data-scale="1"]) > div.calendar_structure[data-structure-type="massive"] .month:has(> .days_subjects > .days_holder > .days > .day[data-day="5"]:hover) .day[data-day="5"] { background-color: var(--hover-bgc); box-shadow: var(--hover-bs); }
div.variable_calendar:not([data-scale="1"]) > div.calendar_structure[data-structure-type="massive"] .month:has(> .days_subjects > .days_holder > .days > .day[data-day="6"]:hover) .day[data-day="6"] { background-color: var(--hover-bgc); box-shadow: var(--hover-bs); }
div.variable_calendar:not([data-scale="1"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) .week:not(:has(.day:hover)):hover { background-color: var(--hover-bgc); box-shadow: var(--hover-bs); }
div.variable_calendar:not([data-scale="1"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) .day:hover { background-color: var(--hover-bgc); box-shadow: var(--hover-bs); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
}
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] :is(.year, .month, .week, .day) > label { cursor: pointer; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] :is(.year, .month, .day) { border: solid 1px #FFF0; border-radius: 8px; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] .week { border-color: rgb(var(--cbl) / 60%); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years { container-name: unical-str-years; container-type: inline-size; display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; height: 100%; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year { container-name: unical-str-year; container-type: size; display: flex; flex-direction: column; flex-wrap: nowrap; width: 33%; height: 33%; flex-grow: 1; flex-shrink: 1; justify-content: center; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(10)) > .year { width: 33%; height: 24%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(10):is(:last-child)) > .year[data-today="1"] { width: 100%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(11):is(:last-child)) > .year[data-today="1"] { width: 66%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(13)) > .year { width: 24%; height: 24%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(13):is(:last-child)) > .year[data-today="1"] { width: 100%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(14):is(:last-child)) > .year:is([data-today="1"], [data-selected="1"]) { width: 48%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(15):is(:last-child)) > .year[data-today="1"] { width: 48%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(17)) > .year { width: 24%; height: 19%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(17):is(:last-child)) > .year[data-today="1"] { width: 100%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(18):is(:last-child)) > .year:is([data-today="1"], [data-selected="1"]) { width: 48%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(19):is(:last-child)) > .year[data-today="1"] { width: 48%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(21)) { overflow-y: overlay; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(21)) > .year { width: 19%; height: 19%; }
/*
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(21):is(:last-child)) > .year[data-today="1"] { width: 100%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(22):is(:last-child)) > .year:is([data-today="1"], [data-selected="1"]) { width: 38%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(23):is(:last-child)) > .year[data-today="1"] { width: 38%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(24):is(:last-child)) > .year:is([data-today="1"], [data-selected="1"]) { width: 38%; }
*/
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(26)) > .year { width: 19%; height: 15%; }
/*
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(26):is(:last-child)) > .year[data-today="1"] { width: 100%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(27):is(:last-child)) > .year:is([data-today="1"], [data-selected="1"]) { width: 38%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(28):is(:last-child)) > .year[data-today="1"] { width: 38%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(29):is(:last-child)) > .year:is([data-today="1"], [data-selected="1"]) { width: 38%; }
div.variable_calendar[data-scale="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year:nth-child(31)) { overflow-y: overlay; }
*/
div.variable_calendar:not([data-scale="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year { padding: 0; border-color: #FFF0; border-width: 0; outline-color: #FFF0; outline-width: 0; }
div.variable_calendar:is([data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year { height: 100%; }
div.variable_calendar:is([data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year:is([data-selected="1"], [data-today="1"]) { transition-duration: var(--trdr-expand); }
div.variable_calendar:is([data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year[data-selected="1"] { width: 49%; transition-duration: var(--trdr-expand); }
div.variable_calendar:is([data-scale="2"], [data-scale="3"])[data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year[data-today="1"] { width: 49%; transition-duration: var(--trdr-expand); }
div.variable_calendar:is([data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year[data-selected="1"][data-today="1"] { width: 100%; transition-duration: var(--trdr-expand); }
div.variable_calendar:is([data-scale="2"], [data-scale="3"]):not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year[data-selected="1"] { width: 100%; transition-duration: var(--trdr-expand); }
div.variable_calendar:is([data-scale="2"], [data-scale="3"]):not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year:not([data-selected="1"]) { width: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar:is([data-scale="2"], [data-scale="3"]):not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year:not([data-selected="1"]) > .months > *  { display: none; }
@container unical-str-root (aspect-ratio < 21 / 20) { /* show year vertical division */
/* div.variable_calendar:is([data-scale="2"], [data-scale="3"])[data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years:has(.year[data-today="1"]):has(.year[data-selected="1"]):not(:has(.year[data-today="1"][data-selected="1"])) { flex-direction: column; justify-content: space-between; } */
div.variable_calendar:is([data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years { flex-direction: column; justify-content: space-between; }
div.variable_calendar:is([data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year { width: 100%; }
div.variable_calendar:is([data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year:is([data-selected="1"], [data-today="1"]) { width: 100%; }
div.variable_calendar:is([data-scale="2"], [data-scale="3"])[data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year[data-today="1"] { width: 100%; }
div.variable_calendar:is([data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year[data-selected="1"][data-today="1"] { height: 100%; }
    @container unical-str-root (min-height: 475px) {
div.variable_calendar:is([data-scale="2"], [data-scale="3"])[data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years:not(:has(.year[data-today="1"][data-selected="1"])) > .year:is([data-today="1"], [data-selected="1"]) { height: 48%; flex-grow: 0; }
    } @container unical-str-root (not (min-height: 475px)) {
div.variable_calendar:is([data-scale="2"], [data-scale="3"]):not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years:not(:has(.year[data-today="1"][data-selected="1"])) > .year[data-today="1"] { height: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar:is([data-scale="2"], [data-scale="3"]):not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years:not(:has(.year[data-today="1"][data-selected="1"])) > .year[data-today="1"] > .months > * { display: none; }
div.variable_calendar:is([data-scale="2"], [data-scale="3"])[data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years:not(:has(.year[data-today="1"][data-selected="1"])) > .year:not([data-today="1"]) { height: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar:is([data-scale="2"], [data-scale="3"])[data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years:not(:has(.year[data-today="1"][data-selected="1"])) > .year:not([data-today="1"]) > .months > *  { display: none; }
    }
div.variable_calendar:is([data-scale="2"], [data-scale="3"]):not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year:not([data-selected="1"]) { height: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar:is([data-scale="2"], [data-scale="3"]):not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year:not([data-selected="1"]) > .months > *  { display: none; }
div.variable_calendar:is([data-scale="2"], [data-scale="3"])[data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year:not([data-today="1"]):not([data-selected="1"]) { height: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar:is([data-scale="2"], [data-scale="3"])[data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year:not([data-today="1"]):not([data-selected="1"]) > .months > *  { display: none; }
} @container unical-str-root (not (aspect-ratio < 21 / 20)) { /* show year horizontal division */
div.variable_calendar:is([data-scale="2"], [data-scale="3"])[data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year:not([data-today="1"]):not([data-selected="1"]) { width: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar:is([data-scale="2"], [data-scale="3"])[data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year:not([data-today="1"]):not([data-selected="1"]) > .months > *  { display: none; }
    @container unical-str-root (max-width: 650px) {
div.variable_calendar:is([data-scale="2"], [data-scale="3"]):not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year[data-today="1"]:not([data-selected="1"]) { width: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar:is([data-scale="2"], [data-scale="3"]):not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year[data-today="1"]:not([data-selected="1"]) > .months > *  { display: none; }
div.variable_calendar:is([data-scale="2"], [data-scale="3"])[data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year:not([data-today="1"]) { width: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar:is([data-scale="2"], [data-scale="3"])[data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year:not([data-today="1"]) > .months > *  { display: none; } 
    }
}
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > label { margin: 0 auto; font-size: 1.125rem; }
div.variable_calendar:not([data-scale="1"], [data-scale="2"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year:is(:not([data-selected="1"], [data-today="1"]), [data-selected="1"][data-today="1"]) > label { width: 0; height: 0; opacity: 0; transition-duration: var(--trdr-hide); }
@container unical-str-years (max-width: 240px) {
div.variable_calendar:not([data-scale="1"])[data-show-today="1"] > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year:not([data-today="1"]) { width: 0; height: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar:not([data-scale="1"]):not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year:not([data-selected="1"]) { width: 0; height: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar:not([data-scale="1"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > label { width: 0; height: 0; opacity: 0; transition-duration: var(--trdr-hide); }
}
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months { container-name: unical-str-months; container-type: size; display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; height: 100%; flex-grow: 1; }
div.variable_calendar:not([data-scale="1"], [data-scale="2"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months { padding: 0; }
@container unical-str-year (max-width: 240px) {
div.variable_calendar:not([data-scale="2"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months { height: 0; flex-grow: 0; padding: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-group)); transition-duration: var(--trdr-hide); }
}
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month { container-name: unical-str-month; container-type: size; display: flex; flex-direction: column; flex-wrap: nowrap; width: 33%; height: 24%; flex-grow: 1; flex-shrink: 1; justify-content: center; align-content: center; }
div.variable_calendar:not([data-scale="1"], [data-scale="2"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month { padding: 0; border-color: #FFF0; border-width: 0; outline-color: #FFF0; outline-width: 0; }
div.variable_calendar[data-scale="3"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month { height: 100%; }
div.variable_calendar[data-scale="3"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:is([data-selected="1"], [data-today="1"]) { transition-duration: var(--trdr-expand); }
div.variable_calendar[data-scale="3"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-selected="1"] { width: 49%; transition-duration: var(--trdr-expand); }
div.variable_calendar[data-scale="3"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-today="1"] { width: 49%; transition-duration: var(--trdr-expand); }
div.variable_calendar[data-scale="3"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-selected="1"][data-today="1"] { width: 100%; transition-duration: var(--trdr-expand); }
div.variable_calendar[data-scale="3"]:not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-selected="1"] { width: 100%; transition-duration: var(--trdr-expand); }
div.variable_calendar[data-scale="3"]:not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-selected="1"]) { width: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar[data-scale="3"]:not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-selected="1"]) > .weeks > *  { display: none; }
@container unical-str-year (aspect-ratio < 21 / 20) { /* show month vertical division */
/* div.variable_calendar[data-scale="3"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months:has(.month[data-today="1"]):has(.month[data-selected="1"]):not(:has(.month[data-today="1"][data-selected="1"])) { flex-direction: column; justify-content: space-between; } */
div.variable_calendar[data-scale="3"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months { flex-direction: column; justify-content: space-between; }
div.variable_calendar[data-scale="3"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month { width: 100%; }
div.variable_calendar[data-scale="3"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:is([data-selected="1"], [data-today="1"]) { width: 100%; }
div.variable_calendar[data-scale="3"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-today="1"] { width: 100%; }
div.variable_calendar[data-scale="3"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-selected="1"][data-today="1"] { height: 100%; }
    @container unical-str-year (min-height: 417px) {
div.variable_calendar[data-scale="3"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months:not(:has(.month[data-today="1"][data-selected="1"])):has(.month[data-selected="1"]) > .month[data-today="1"] { height: 48%; flex-grow: 0; }
div.variable_calendar[data-scale="3"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months:not(:has(.month[data-today="1"][data-selected="1"])):has(.month[data-today="1"]) > .month[data-selected="1"] { height: 48%; flex-grow: 0; }
    } @container unical-str-year (not (min-height: 417px)) {
div.variable_calendar[data-scale="3"]:not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months:not(:has(.month[data-today="1"][data-selected="1"])) > .month[data-today="1"] { height: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar[data-scale="3"]:not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months:not(:has(.month[data-today="1"][data-selected="1"])) > .month[data-today="1"] > .weeks > *  { display: none; }
div.variable_calendar[data-scale="3"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months:not(:has(.month[data-today="1"][data-selected="1"])) > .month:not([data-today="1"]) { height: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar[data-scale="3"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months:not(:has(.month[data-today="1"][data-selected="1"])) > .month:not([data-today="1"]) > .weeks > *  { display: none; }
    }
div.variable_calendar[data-scale="3"]:not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-selected="1"]) { height: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar[data-scale="3"]:not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-selected="1"]) > .weeks > *  { display: none; }
div.variable_calendar[data-scale="3"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-today="1"]):not([data-selected="1"]) { height: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar[data-scale="3"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-today="1"]):not([data-selected="1"]) > .weeks > *  { display: none; }
} @container unical-str-year (not (aspect-ratio < 21 / 20)) { /* show month horizontal division */
div.variable_calendar[data-scale="3"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-today="1"]):not([data-selected="1"]) { width: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar[data-scale="3"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-today="1"]):not([data-selected="1"]) > .weeks > *  { display: none; }
    @container unical-str-year (max-width: 352px) {
div.variable_calendar[data-scale="3"]:not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-today="1"]:not([data-selected="1"]) { width: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar[data-scale="3"]:not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-today="1"]:not([data-selected="1"]) > .weeks > *  { display: none; }
div.variable_calendar[data-scale="3"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-today="1"]) { width: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar[data-scale="3"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-today="1"]) > .weeks > *  { display: none; }
    }
}
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > label { margin: 0 auto; font-size: 1rem; word-break: keep-all; }
/* div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:is(:not([data-selected="1"], [data-today="1"]), [data-selected="1"][data-today="1"]) > label { width: 0; height: 0; opacity: 0; transition-duration: var(--trdr-hide); } */
div.variable_calendar:not([data-scale="1"], [data-scale="2"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > label { width: 0; height: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-duration: var(--trdr-hide); }
@container unical-str-months (max-width: 640px) {
/* div.variable_calendar:not([data-scale="1"], [data-scale="2"])[data-show-today="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-today="1"]) { width: 0; height: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar:not([data-scale="1"], [data-scale="2"]):not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-selected="1"]) { width: 0; height: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar:not([data-scale="1"], [data-scale="2"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > label { width: 0; height: 0; } */
}
@container unical-str-months (aspect-ratio > 20 / 11) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month { width: 24%; height: 33%; }
}
@container unical-str-months (aspect-ratio > 4 / 1) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month { width: 16%; height: 49%; }
}
@container unical-str-months (aspect-ratio > 19 / 3) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month { width: 8%; height: 100%; }
    @container unical-str-months (max-width: 440px) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > label:after { display: none; }
    }
}
@container unical-str-months (aspect-ratio < 11 / 20) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month { width: 49%; height: 16%; }
}
@container unical-str-months (aspect-ratio < 5 / 19) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month { width: 100%; height: 8%; }
}
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > label:before { content: ''; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > label:after { content: ''; }
div.variable_calendar:lang(ko) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > label:before { content: ''; }
div.variable_calendar:lang(ko) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > label:after { content: '월'; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks { container-name: unical-str-weeks; container-type: size; display: flex; flex-direction: column; flex-wrap: nowrap; height: 100%; flex-grow: 1; flex-shrink: 1; text-align: left; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week { container-name: unical-str-week; container-type: inline-size; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; height: 16%; flex-grow: 1; flex-shrink: 1; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > * { }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > label { width: min(5em, calc(100% / 8)); font-size: 0.8125rem; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > label:not(:empty):before { content: 'Week\A0'; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > label:not(:empty):after { content: ''; }
div.variable_calendar:lang(ko) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > label:not(:empty):before { content: ''; }
div.variable_calendar:lang(ko) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > label:not(:empty):after { content: '주차'; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > label:empty:not([data-suffix])::after { content: ''; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > label:empty { display: inline-flex; flex-direction: row; flex-wrap: wrap; min-width: min-content; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > label:empty::before { color: var(--color-boundary); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > label:empty::after { color: var(--color-boundary); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days { container-name: unical-str-days; container-type: size; height: 100%; flex-grow: 1; flex-shrink: 1; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day { container-name: unical-str-day; container-type: size; font-size: 0.8125rem; text-wrap: nowrap; transition-delay: unset; transition-duration: unset; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > label { --true-color: var(--color-text); --gray-color: var(--color-text-palen); display: inline-block; width: 1.3333333em; padding: 2px 2px; color: var(--true-color); font-size: 0.8462em; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day[data-day="0"] > label { --true-color: var(--color-sunday); --gray-color: var(--color-sunday-gray); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day[data-day="6"] > label { --true-color: var(--color-saturday); --gray-color: var(--color-saturday-gray); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day[data-holiday]:not([data-holiday=""]) > label { --true-color: var(--color-holiday); --gray-color: var(--color-holiday-gray); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > span.subjects { font-size: 0.6875rem; font-weight: 300; line-height: 1.0625rem; vertical-align: top; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-month="1"] > .weeks > .week > .days > .day:not([data-month="1"]) > label,
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-month="2"] > .weeks > .week > .days > .day:not([data-month="2"]) > label,
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-month="3"] > .weeks > .week > .days > .day:not([data-month="3"]) > label,
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-month="4"] > .weeks > .week > .days > .day:not([data-month="4"]) > label,
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-month="5"] > .weeks > .week > .days > .day:not([data-month="5"]) > label,
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-month="6"] > .weeks > .week > .days > .day:not([data-month="6"]) > label,
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-month="7"] > .weeks > .week > .days > .day:not([data-month="7"]) > label,
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-month="8"] > .weeks > .week > .days > .day:not([data-month="8"]) > label,
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-month="9"] > .weeks > .week > .days > .day:not([data-month="9"]) > label,
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-month="10"] > .weeks > .week > .days > .day:not([data-month="10"]) > label,
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-month="11"] > .weeks > .week > .days > .day:not([data-month="11"]) > label,
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month[data-month="12"] > .weeks > .week > .days > .day:not([data-month="12"]) > label
{ color: var(--gray-color); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled { container-name: unical-str-items; container-type: inline-size; display: flex; flex-direction: column; flex-wrap: nowrap; margin: 0 2px; padding-inline: 0; list-style: none; /* list-style-type: disc; list-style-image: radial-gradient(black 60%, transparent 60%, transparent); list-style-position: inside; */ line-height: 1.1em; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled:empty { display: none; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled:hover { overflow: visible; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled > li { container-name: unical-str-item; container-type: inline-size; min-width: 1.1em; height: 1.15em; flex-shrink: 0; padding-inline: 0.15em 1px; color: var(--color-text-dark); background-color: aliceblue; border-radius: 42px; text-wrap: wrap; word-break: break-word; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled > li:hover { overflow: visible; text-shadow: -1px -1px 0 var(--color-anti-text), 1px 1px 0 var(--color-anti-text); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled > li[data-category="holiday"] { background-color: rgb(var(--csunv) / 60%); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled > li[data-category="vacation"] { background-color: rgb(var(--csatv) / 60%); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled > li[data-category="closed"] { background-color: rgb(var(--csatv) / 60%); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled > li[data-category="ceremony"] { background-color: rgb(var(--cidv) / 60%); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled > li[data-category="exam"] { background-color: rgb(var(--cidv) / 60%); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] { }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"][data-transition]:not([data-transition=""]):not([data-transition="0"]) > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] { display: none; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] > li { height: fit-content; border-radius: 2px; background-color: transparent; white-space: normal; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] > li::before { display: none; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] > li > span { word-break: keep-all; white-space: nowrap; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] :is(.year, .month, .week, .day)[data-today="1"] { border-color: rgb(var(--ctdv) / 60%); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] :is(.year, .month, .week, .day)[data-today="1"] > label { color: var(--color-today-vivid); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] .month:not([data-today="1"]) .day[data-today="1"] > label { color: var(--color-today-gray); }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] :is(.year, .month, .day)[data-selected="1"] { outline: solid 2px rgb(var(--csdv) / 60%); outline-offset: -4px; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] :is(.year, .month, .week, .day)[data-selected="1"] > label { text-shadow: -0.05em -0.05em 0 rgb(var(--csdg) / 60%), 0.05em 0.05em 0 rgb(var(--csdv) / 40%); }
/* div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li::marker { font-size: 2.2em; } */
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li::before { content: '●'; color: rgb(var(--ct) / 98%); font-size: 1.125em; letter-spacing: 0.1em; line-height: 1em; vertical-align: bottom; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li > span { font-size: 0.923em; }
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li > span:first-child { position: relative; }
@container unical-str-month (max-width: 320px) or (max-height: 200px) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .days_subjects { height: 0; flex-grow: 0; padding: 0; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks { flex-direction: row; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week { flex-direction: column; width: 20%; height: 100%; flex-grow: 1; flex-shrink: 1; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week:not(:last-child) { border-right-style: solid; border-right-width: 1px; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week:is([data-week="0"], [data-week=""]):not([data-selected="1"]) { width: 0; border-width: 0; border-color: #FFF0; flex-grow: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week > .days { flex-direction: column; padding: 0; padding-right: 4px; flex-grow: 1; overflow-y: overlay; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week > .days > .day { position: relative; display: table; width: 100%; flex-shrink: 0; border: 0; overflow: visible; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week > .days > .day > label { height: 0; padding: 0; text-shadow: -1px -1px 1px transparent, -1px 1px 1px transparent, 1px -1px 1px transparent, 1px 1px 1px transparent; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week > .days > .day:hover > label { position: absolute; left: -1.7em; height: fit-content; padding-inline: 0.25em 0.2em; border-radius: 0.5em; background-color: rgb(var(--cat) / 80%); text-shadow: -1px -1px 1px var(--color-anti-text), -1px 1px 1px var(--color-anti-text), 1px -1px 1px var(--color-anti-text), 1px 1px 1px var(--color-anti-text); }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week > .days > .day:hover > span.subjects { border-radius: 0.5em; background-color: rgb(var(--cat) / 80%); text-shadow: -1px -1px 1px var(--color-anti-text), -1px 1px 1px var(--color-anti-text), 1px -1px 1px var(--color-anti-text), 1px 1px 1px var(--color-anti-text); }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled { width: 100%; height: fit-content; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] { /* display: none; this occurs STATUS_ACCESS_VIOLATION crash */ width: 0; height: 0; margin: 0; padding: 0; overflow: hidden; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled > li { margin-bottom: 1px; text-overflow: clip; }
    @container unical-str-month (max-width: 220px) or (max-height: 110px) {
        @container unical-str-month (max-width: 220px) {
div.variable_calendar:is([data-scale="2"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks { flex-wrap: wrap; align-content: flex-start; }
div.variable_calendar:is([data-scale="2"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week { width: 33%; height: 49%; margin: 1px; border-style: solid; border-width: 1px; border-radius: 8px; }
div.variable_calendar:is([data-scale="2"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks:has(.week[data-week="5"]) > .week { height: 33%; }
           @container unical-str-month (max-width: 190px) or (max-height: 100px) {
div.variable_calendar:is([data-scale="2"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks { height: 0; padding: 0; flex-grow: 0; transition-delay: min(var(--trdl-hide), var(--trdl-group)); transition-duration: var(--trdr-hide); }
            }
div.variable_calendar:is([data-scale="2"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week { justify-content: center; }
div.variable_calendar:is([data-scale="2"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week > .days { height: 0; flex-grow: 0; overflow-y: hidden; }
        }
    }
    @container unical-str-month (max-width: 190px) or (max-height: 100px) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week { justify-content: center; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week > .days { height: 0; flex-grow: 0; overflow-y: hidden; transition-delay: min(var(--trdl-hide), var(--trdl-group)); transition-duration: var(--trdr-hide); }
        @container unical-str-month (max-width: 190px) or (max-height: 90px) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks { height: 0; padding: 0; flex-grow: 0; transition-delay: min(var(--trdl-hide), var(--trdl-group)); transition-duration: var(--trdr-hide); }
        }
    }
} @container unical-str-month (not (max-width: 320px)) and (not (max-height: 200px)) {
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week:not(:last-child) { border-bottom-style: solid; border-bottom-width: 1px; }
    @container unical-str-days (max-height: 32px) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; outline-offset: -1px; overflow: visible; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul { flex-direction: row; width: 100%; height: 100%; margin-left: 0; flex-grow: 1; flex-shrink: 1; justify-content: flex-start; align-items: center; overflow: visible; }
    }
}
@container unical-str-day (min-width: 120px) or (min-height: 200px) {
div.variable_calendar > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] > li > span { white-space: normal; }
}
@container unical-str-day (max-width: 70px) or (max-height: 30px) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="5"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li { padding-inline-end: 0; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="5"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li::before { display: inline-block; font-size: 1.1em; translate: -0.0333em -0.2em; opacity: 75%; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="5"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li > span { display: inline-block; letter-spacing: -0.05em; transform-origin: left; scale: 80% 100%; transition-duration: 0.2s; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="5"])[data-no-transition="1"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li > span { transition-duration: unset; }
    @media all and (max-width: 400px) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="5"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li > span { scale: 60% 100%; }
    }
    @container unical-str-day (max-width: 34px) or (max-height: 30px) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="5"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li > span { display: inline-block; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="5"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li:not(:hover) > span { width: 0; text-shadow: -1px -1px 1px transparent, -1px 1px 1px transparent, 1px -1px 1px transparent, 1px 1px 1px transparent; opacity: 0; transition-duration: var(--trdr-hide); }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="5"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li:hover > span { padding-inline: 0.25em 0.35em; border-radius: 0.5em; background-color: rgb(var(--cat) / 80%); text-shadow: -1px -1px 1px var(--color-anti-text), -1px 1px 1px var(--color-anti-text), 1px -1px 1px var(--color-anti-text), 1px 1px 1px var(--color-anti-text); opacity: 1; }
        @container unical-str-day (max-height: 30px) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="5"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li { position: absolute; }
        }
    }
    @container unical-str-day (not (max-width: 34px)) and (not (max-height: 30px)) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="5"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul { }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="5"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li:not(:hover) { text-overflow: clip; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="5"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li::before { margin-inline-start: -0.2em; font-size: 0.6em; vertical-align: middle; letter-spacing: 0; translate: 0 -0.35em; }
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="5"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li > span { padding-inline-end: 0; }
        @media all and (max-width: 400px) {
div.variable_calendar:is([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="5"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul > li::before { font-size: 0.4em; translate: 0 -0.75em; }
        }
    }
}
/* div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]) { height: auto; }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div:is(.days_subjects, .calendar_structure) { height: auto; } */
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years { flex-direction: column; flex-wrap: nowrap; /* height: auto; */ }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year { width: 100%; /* height: auto; */ }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year:not([data-selected="1"], [data-today="1"]) { height: 0; flex-grow: 0; transition-duration: 0s; }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]):not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year:not([data-selected="1"])[data-today="1"] { height: 0; flex-grow: 0; transition-duration: 0s; }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months { flex-direction: column; flex-wrap: nowrap; width: 100%; /* height: auto; */ }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month { width: 100%; /* height: auto; */ }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-selected="1"], [data-today="1"]) { height: 0; flex-grow: 0; transition-duration: 0s; }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]):not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-selected="1"])[data-today="1"] { height: 0; flex-grow: 0; transition-duration: 0s; }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-selected="1"], [data-today="1"]) > .days_subjects { height: 0; flex-grow: 0; padding: 0; }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]):not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month:not([data-selected="1"])[data-today="1"] > .days_subjects { height: 0; flex-grow: 0; padding: 0; }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks { width: 100%; /* height: auto; */ }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week { width: 100%; /* height: auto; */ }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week:is([data-week="0"], [data-week=""]):not([data-selected="1"]) { height: 0; border-width: 0; border-color: #FFF0; flex-grow: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days { /* height: auto; */ }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day { /* height: auto; min-height: 36px; */ }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="4"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week:not([data-selected="1"], [data-today="1"]) { height: 0; border-width: 0; border-color: #FFF0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar:not([data-scale="1"], [data-scale="2"], [data-scale="3"], [data-scale="4"]):not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week:not([data-selected="1"])[data-today="1"] { height: 0; border-width: 0; border-color: #FFF0; flex-grow: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
@container unical-str-root (max-height: 184px) {
div.variable_calendar[data-scale="5"]:not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year[data-today="1"]:not([data-selected="1"]) { height: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar[data-scale="5"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year:not([data-today="1"]) { height: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
    @container unical-str-root (max-height: 138px) {
div.variable_calendar[data-scale="5"]:not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month[data-today="1"]:not([data-selected="1"]) { height: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar[data-scale="5"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month:not([data-today="1"]) { height: 0; border-width: 0; flex-grow: 0; opacity: 0; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
        @container unical-str-root (max-height: 133px) {
div.variable_calendar[data-scale="5"]:not([data-show-today="1"]) > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week[data-today="1"]:not([data-selected="1"]) { height: 0; border-width: 0; border-color: #FFF0; flex-grow: 0; overflow: hidden; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
div.variable_calendar[data-scale="5"][data-show-today="1"] > div.calendar_structure[data-structure-type="massive"]:is(:not([data-transition]), [data-transition=""], [data-transition="0"]) > .years > .year > .months > .month > .weeks > .week:not([data-today="1"]) { height: 0; border-width: 0; border-color: #FFF0; flex-grow: 0; overflow: hidden; transition-delay: min(var(--trdl-hide), var(--trdl-item)); transition-duration: var(--trdr-hide); }
        }
    }
}
div.variable_calendar > div.calendar_structure[data-hide-weekage="1"] > .years > .year > .months > .month > .days_subjects > .days_holder > label { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekage="1"] > .years > .year > .months > .month > .weeks > .week > label { display: none !important; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] .days > .day { width: round(to-zero, calc(100% / 5), 1%); }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month > .days_subjects > .days_holder > .days > .day[data-day="0"] { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month > .days_subjects > .days_holder > .days > .day[data-day="6"] { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month[data-month="1"] > .weeks > .week:not(:has(> .days > .day:not([data-day="0"]):not([data-day="6"])[data-month="1"])) { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month[data-month="2"] > .weeks > .week:not(:has(> .days > .day:not([data-day="0"]):not([data-day="6"])[data-month="2"])) { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month[data-month="3"] > .weeks > .week:not(:has(> .days > .day:not([data-day="0"]):not([data-day="6"])[data-month="3"])) { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month[data-month="4"] > .weeks > .week:not(:has(> .days > .day:not([data-day="0"]):not([data-day="6"])[data-month="4"])) { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month[data-month="5"] > .weeks > .week:not(:has(> .days > .day:not([data-day="0"]):not([data-day="6"])[data-month="5"])) { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month[data-month="6"] > .weeks > .week:not(:has(> .days > .day:not([data-day="0"]):not([data-day="6"])[data-month="6"])) { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month[data-month="7"] > .weeks > .week:not(:has(> .days > .day:not([data-day="0"]):not([data-day="6"])[data-month="7"])) { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month[data-month="8"] > .weeks > .week:not(:has(> .days > .day:not([data-day="0"]):not([data-day="6"])[data-month="8"])) { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month[data-month="9"] > .weeks > .week:not(:has(> .days > .day:not([data-day="0"]):not([data-day="6"])[data-month="9"])) { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month[data-month="10"] > .weeks > .week:not(:has(> .days > .day:not([data-day="0"]):not([data-day="6"])[data-month="10"])) { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month[data-month="11"] > .weeks > .week:not(:has(> .days > .day:not([data-day="0"]):not([data-day="6"])[data-month="11"])) { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month[data-month="12"] > .weeks > .week:not(:has(> .days > .day:not([data-day="0"]):not([data-day="6"])[data-month="12"])) { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month > .weeks > .week > .days > .day[data-day="0"] { display: none; }
div.variable_calendar > div.calendar_structure[data-hide-weekend="1"] > .years > .year > .months > .month > .weeks > .week > .days > .day[data-day="6"] { display: none; }
div.variable_calendar:not([data-show-schedule-whole="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="whole"] { display: none; }
div.variable_calendar:not([data-show-schedule-timely="1"]) > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="timely"] { display: none; }


div.variable_calendar > div.calendar_bar { --area-handler-width: 108px; position: relative; left: calc(var(--side-pad) * -1); right: calc(var(--side-pad) * -1); width: calc(100% + (var(--side-pad) * 2)); min-width: 100%; height: var(--cal-bar-height); padding-bottom: 3px; border-top: solid 1px rgb(var(--cbl) / 40%); box-sizing: border-box; user-select: none; }
div.variable_calendar > div.calendar_bar div { min-width: unset; }
div.variable_calendar > div.calendar_bar > div { height: 100%; }

div.variable_calendar > div.calendar_bar > div.schedule_filter_area { width: 100%; padding: 4px 0; box-sizing: border-box; flex-grow: 1; flex-shrink: 1; overflow: overlay hidden; overscroll-behavior-x: none; user-select: none; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area::-webkit-scrollbar-thumb { border-right-width: var(--area-handler-width); }
@media (pointer: fine) {
div.variable_calendar > div.calendar_bar > div.schedule_filter_area { padding-bottom: 2px; }
}
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter { display: flex; flex-direction: row; flex-wrap: nowrap; width: max-content; height: 100%; margin-inline: 8px; align-items: center; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter label {  }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter ul { list-style: none; margin: 0; padding: 0; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter ul > li { background-color: rgb(var(--cb) / 15%); border-radius: 0.4em; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter ul > li > label { position: relative; padding: 0 8px; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter ul > li[data-selected="1"] > label::after { content: ''; position: absolute; bottom: -0.2em; right: calc(8px + -0.75em); width: 1em; aspect-ratio: 1; background-color: var(--color-point); mask-image: var(--svg-check); }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > label {  }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > label:not(:first-child) { margin-inline: 8px 2px; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > label > span { display: inline-block; --h-scale-adjust: -14%; margin-inline-end: var(--h-scale-adjust); font-size: 1rem; scale: calc(100% + var(--h-scale-adjust)) 1; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul { height: 100%; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul > li { }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul > li > label { }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.fixed { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: stretch; gap: 4px; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.fixed > li { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; flex-grow: 1; cursor: pointer; transition-duration: 0.2s; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.fixed > li:hover { background-color: rgb(var(--cpl) / 15%); }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.fixed > li:active { background-color: rgb(var(--cpl) / 35%); }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.fixed > li > label { position: relative; padding-inline: 8px calc(8px + 1.1em); font-size: 0.8125rem; cursor: pointer; }
/* div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.fixed > li > label::before { position: relative; display: inline-block; top: -2px; height: fit-content; } */
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.fixed > li[data-selected="1"] > label::after { top: -2px; bottom: 0; right: calc(8px + -0.2em); height: 1em; margin: auto 0; line-height: 1em; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable { display: flex; flex-direction: row; flex-wrap: nowrap; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li { }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li > label { cursor: pointer; transition-duration: 0.2s; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li > label:hover { background-color: rgb(var(--cpl) / 15%); }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li > label:active { background-color: rgb(var(--cpl) / 35%); }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li > ul.data_selection { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 4px 8px; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li > ul.data_selection > li { margin-inline-start: 8px; cursor: pointer; transition-duration: 0.2s; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li > ul.data_selection > li:hover { background-color: rgb(var(--cpl) / 15%); }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li > ul.data_selection > li:active { background-color: rgb(var(--cpl) / 35%); }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li > ul.data_selection > li > label { display: inline-block; height: 100%; cursor: pointer; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li > ul.data_selection > li > label > span { }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li > ul.data_selection > li > label > select { }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > div.area_pad { width: var(--area-handler-width); }

div.variable_calendar > div.calendar_bar > div.control_area { position: absolute; display: flex; flex-direction: row; flex-wrap: nowrap; top: 0; bottom: 0; right: 0; width: var(--area-handler-width); box-sizing: border-box; gap: 4px; padding: 4px 4px 6px 6px; backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
div.variable_calendar > div.calendar_bar > div.control_area button { color: var(--color-point); font-size: 1.125rem; text-shadow: 0 0 4px white; box-shadow: 0.5px 0.5px 2px 0 #0002; }
div.variable_calendar > div.calendar_bar > div.control_area > * { flex-basis: 0; flex-grow: 1; align-self: stretch; }
div.variable_calendar > div.calendar_bar > div.control_area > div { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 4px; }
div.variable_calendar > div.calendar_bar > div.control_area > div > * { flex-basis: 0; flex-grow: 1; align-self: stretch; }
div.variable_calendar > div.calendar_bar > div.control_area > nav { position: absolute; z-index: 1; right: 4px; bottom: calc(100% + 2px); width: max-content; height: max-content; border-radius: var(--basic-ui-inset-half); background-color: rgb(var(--cbbr) / 75%); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
div.variable_calendar > div.calendar_bar > div.control_area > nav.settings_panel { display: flex; flex-flow: column; padding: var(--basic-ui-inset-half) var(--basic-ui-inset); gap: var(--basic-ui-inset-quarter); font-size: 14px; line-height: 1.5em; }
div.variable_calendar > div.calendar_bar > div.control_area > nav.settings_panel input { cursor: pointer; }
div.variable_calendar > div.calendar_bar > div.control_area > nav.settings_panel label { cursor: pointer; }
div.variable_calendar > div.calendar_bar > div.control_area > nav.settings_panel > div { }
div.variable_calendar > div.calendar_bar > div.control_area > nav.settings_panel > div > div { padding-right: var(--basic-ui-inset-h-half); border-radius: 2px; transition-timing-function: ease; transition-duration: 0.3s; }
div.variable_calendar > div.calendar_bar > div.control_area > nav.settings_panel > div > div:hover { background-color: var(--color-boundary-o20); }
div.variable_calendar > div.calendar_bar > div.control_area > nav:not([data-show="1"]) { display: none; }
div.variable_calendar > div.calendar_bar > div.control_area > button.settings::before { content: '⚙️'; }
div.variable_calendar > div.calendar_bar > div.control_area > div.area_handler { }
div.variable_calendar > div.calendar_bar > div.control_area > div.area_handler > button.to_smaller { }
div.variable_calendar > div.calendar_bar > div.control_area > div.area_handler > button.to_smaller::before { content: '▲'; }
div.variable_calendar > div.calendar_bar > div.control_area > div.area_handler > button.to_larger { }
div.variable_calendar > div.calendar_bar > div.control_area > div.area_handler > button.to_larger::before { content: '▼'; }

div.variable_calendar > div.area_resizer { position: absolute; bottom: 0; left: calc(var(--side-pad) * -1); right: calc(var(--side-pad) * -1); width: calc(100% + (var(--side-pad) * 2)); height: 2px; min-width: 100%; border-top: solid 1px transparent; border-bottom: solid 1px transparent; background-color: rgb(var(--cb) / 20%); background-clip: content-box; cursor: row-resize; transition-duration: 0.2s; }
div.variable_calendar > div.area_resizer:hover { box-shadow: 0 0 2px 0.5px var(--color-boundary-bright); }
div.variable_calendar > div.area_resizer:active { background-color: rgb(var(--cbl) / 80%); }



.schedule_list { box-sizing: border-box; margin: 4px 0 0; overflow: hidden; user-select: none; }
.schedule_list > .unified_scheduler { display: flex; flex-direction: column; flex-wrap: nowrap; box-sizing: border-box; height: 100%; margin: 0; }
.schedule_list > .unified_scheduler > div { box-sizing: border-box; margin-inline: 0; }
.schedule_list > .unified_scheduler > .titled_tab_block { margin-top: 0; }
.schedule_list > .unified_scheduler > .tab_content_blocks { height: 0; flex-grow: 1; flex-shrink: 1; margin-bottom: 0; }

.schedule_list .schedule_host { display: flex; flex-direction: row; flex-wrap: nowrap; margin-inline: 0; }
.schedule_list .schedule_host > ul { display: flex; flex-direction: row; flex-wrap: nowrap; }
.schedule_list .schedule_host > ul > li { padding-bottom: var(--bottom-pad); }
.schedule_list .schedule_host > ul > li[data-division="schedule"] { height: max-content; flex-grow: 1; }
.schedule_list .schedule_host > ul > li[data-division="schedule"] > div.schedule_placeholder { color: var(--color-text-lightest); font-weight: 300; text-align: center; }
.schedule_list .schedule_host > ul > li[data-division="schedule"]:not([data-count="0"]) > div.schedule_placeholder { display: none; }
.schedule_list .schedule_host ul.schedule_holder { display: flex; flex-direction: column; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; }
.schedule_list .schedule_host ul.schedule_holder > li { margin-bottom: 8px; padding-bottom: 8px; border-bottom: solid 1px rgb(var(--cmv) / 30%); border-radius: 5%; }
.schedule_list .schedule_host ul.schedule_holder:last-of-type > li:last-of-type { border-bottom-color: transparent; }
.schedule_list .schedule_host li.schedule_item { padding-inline: 8px; border-radius: 4%; }
.schedule_list .schedule_host li.schedule_item > .event_type { margin: 2px; }
.schedule_list .schedule_host li.schedule_item > .event_type > span { position: relative; }
.schedule_list .schedule_host li.schedule_item > .event_type > span::before { content: '📅'; /* 📆🗓️ */ font-size: 1em; }
.schedule_list .schedule_host li.schedule_item[data-category="holiday"] > .event_type > span::before { content: '🏠'; }
.schedule_list .schedule_host li.schedule_item[data-category="vacation"] > .event_type > span::before { content: '🏖️'; }
.schedule_list .schedule_host li.schedule_item[data-category="closed"] > .event_type > span::before { content: '⛓️'; }
.schedule_list .schedule_host li.schedule_item[data-category="ceremony"] > .event_type > span::before { content: '🎉'; }
.schedule_list .schedule_host li.schedule_item[data-category="exam"] > .event_type > span::before { content: '💯'; }
.schedule_list .schedule_host li.schedule_item > .event_type > span::after { content: ''; position: absolute; display: block; top: -0.2em; bottom: 0; right: -0.4em; width: 0.25em; height: 1.25em; margin: auto 0; border-radius: 0.1em; background-color: rgb(var(--cbd) / 60%); }
.schedule_list .schedule_host li.schedule_item[data-category="holiday"] > .event_type > span::after { background-color: rgb(var(--csunv) / 60%); }
.schedule_list .schedule_host li.schedule_item[data-category="vacation"] > .event_type > span::after { background-color: rgb(var(--csatv) / 60%); }
.schedule_list .schedule_host li.schedule_item[data-category="closed"] > .event_type > span::after { background-color: rgb(var(--csatv) / 60%); }
.schedule_list .schedule_host li.schedule_item[data-category="ceremony"] > .event_type > span::after { background-color: rgb(var(--cidv) / 60%); }
.schedule_list .schedule_host li.schedule_item[data-category="exam"] > .event_type > span::after { background-color: rgb(var(--cidv) / 60%); }
.schedule_list .schedule_host li.schedule_item > .content { margin-top: 0; flex-grow: 1; text-align: left; }
.schedule_list .schedule_host .datetime { margin: 0; margin-inline-start: 0.6em; padding: 0; justify-content: flex-start; font-weight: lighter; }
.schedule_list .schedule_host .datetime span { font-size: smaller; }
.schedule_list .schedule_host .datetime .year { }
.schedule_list .schedule_host .datetime .month { margin-inline: 0; color: var(--color-text-lighter); }
.schedule_list .schedule_host .datetime .date { margin-inline: 0; width: 1.25em; text-align: end; }
.schedule_list .schedule_host .datetime .date::before { content: '.'; }
.schedule_list .schedule_host .datetime .day { }
.schedule_list .schedule_host .datetime rt.week { text-wrap: nowrap; }
.schedule_list .schedule_host .datetime rt.week > .month { }
.schedule_list .schedule_host .datetime rt.week > .month::before { content: ''; }
.schedule_list .schedule_host .datetime rt.week > .month::after { content: ''; }
.schedule_list:lang(ko) .schedule_host .datetime rt.week > .month::before { content: ''; }
.schedule_list:lang(ko) .schedule_host .datetime rt.week > .month::after { content: '월'; }
.schedule_list .schedule_host .datetime rt.week > .week { }
.schedule_list .schedule_host .datetime rt.week > .week::before { content: '\A0Week\A0'; }
.schedule_list .schedule_host .datetime rt.week > .week::after { content: ''; }
.schedule_list:lang(ko) .schedule_host .datetime rt.week > .week::before { content: '\A0'; }
.schedule_list:lang(ko) .schedule_host .datetime rt.week > .week::after { content: '주차'; }
.schedule_list .schedule_host .datetime > .timespan { }
.schedule_list .schedule_host .datetime > .timespan > .time_begin { }
.schedule_list .schedule_host .datetime > .timespan > .time_end { }
.schedule_list .schedule_host .datetime > .timespan > .time_end::before { content: ' ~ '; }
.schedule_list .schedule_host .datetime > .timespan > .time_begin:only-child::after { content: ' ~'; }
.schedule_list .schedule_host .datetime > .timespan > .time_end:only-child::before { }
.schedule_list .schedule_host li.schedule_item[data-holiday]:not([data-holiday=""]) .datetime { color: var(--color-holiday); }
.schedule_list .schedule_host li.schedule_item[data-holiday]:not([data-holiday=""]) .datetime .month { color: var(--color-holiday-gray); }
.schedule_list .schedule_host .subject { }
.schedule_list .schedule_host .subject::before { content: '●'; display: inline-block; margin-left: -1.2em; font-size: 0.9em; letter-spacing: 0.25em; translate: 0em -0.1em; }



article .dedicated_calendar { }
article .dedicated_calendar > .calendar_block { }
article .dedicated_calendar > .calendar_block > div { }
article .dedicated_calendar > .schedule_block { }
article .dedicated_calendar > .schedule_block > div { }

article .micro_calendar { }
article .micro_calendar > .calendar_structure { --color-days-subjects: var(--color-text); --today-outline-width: 1px; --color-label: var(--color-text-lighten); --color-label-pale: var(--color-text-paleness); --color-label-holiday: var(--color-holiday); color: var(--color-label); }
article .micro_calendar > .calendar_structure .days_holder { margin-inline: var(--today-outline-width); }
article .micro_calendar > .calendar_structure .days_holder > .days { display: flex; flex-flow: row nowrap; width: -webkit-fill-available; justify-content: stretch; align-items: stretch; }
article .micro_calendar > .calendar_structure .days_holder > .days > .day { display: flex; flex-flow: column nowrap; width: calc(100% / 7); align-items: center; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
article .micro_calendar > .calendar_structure .days_holder > .days > .day > .label { font-size: 0.75rem; line-height: 1em; }
article .micro_calendar > .calendar_structure .days_holder > .days > .day[data-day="0"] > .label { color: var(--color-label-holiday); }
article .micro_calendar > .calendar_structure .days_holder > .days > .day[data-day="6"] > .label { color: var(--color-label-holiday); }
article .micro_calendar > .calendar_structure .days_holder > .days > .day[data-holiday="1"] > .label { color: var(--color-label-holiday); }
article .micro_calendar > .calendar_structure[data-hide-weekend="1"] .days_holder > .days > .day { width: calc(100% / 5); }
article .micro_calendar > .calendar_structure[data-hide-weekend="-1"] .days_holder > .days > .day { width: calc(100% / 6); }
article .micro_calendar > .calendar_structure[data-hide-weekend="0"] .days_holder > .days > .day { width: calc(100% / 6); }
article .micro_calendar > .calendar_structure[data-hide-weekend="-1"] .days_holder > .days > .day[data-day="0"] { display: none; }
article .micro_calendar > .calendar_structure[data-hide-weekend="0"] .days_holder > .days > .day[data-day="6"] { display: none; }
article .micro_calendar > .calendar_structure[data-hide-weekend="1"] .days_holder > .days > .day[data-day="0"] { display: none; }
article .micro_calendar > .calendar_structure[data-hide-weekend="1"] .days_holder > .days > .day[data-day="6"] { display: none; }
article .micro_calendar > .calendar_structure .days_holder > .days > .day > .label > label { overflow-wrap: normal; }
article .micro_calendar > .calendar_structure > .days_subjects { display: flex; flex-flow: row nowrap; height: 40px; border-bottom: solid 1px var(--color-boundary-lightly); color: var(--color-days-subjects); }
article .micro_calendar > .calendar_structure > .days_subjects > * { flex-grow: 0; flex-shrink: 0; }
article .micro_calendar > .calendar_structure > .days_subjects > .days_holder { width: -webkit-fill-available; height: 100%; flex-grow: 1; flex-shrink: 1; }
article .micro_calendar > .calendar_structure > .days_subjects > .days_holder > .days { height: 100%; }
article .micro_calendar > .calendar_structure > .days_subjects > .days_holder > .days > .day { height: 100%; justify-content: center; }
article .micro_calendar > .calendar_structure[data-show-pointer-days-subject="1"] > .days_subjects > .days_holder > .days > .day { cursor: pointer; }
article .micro_calendar > .calendar_structure > .days_subjects > .days_holder > .days > .day > .label { }
article .micro_calendar > .calendar_structure > .days_subjects > .days_holder > .days > .day > .label > label { }
article .micro_calendar > .calendar_structure[data-show-pointer-days-subject="1"] > .days_subjects > .days_holder > .days > .day > .label > label { cursor: pointer; }
article .micro_calendar > .calendar_structure > .weeks { }
article .micro_calendar > .calendar_structure > .weeks > .week { display: flex; flex-flow: row nowrap; border-bottom: solid 1px var(--color-boundary-highlight); }
article .micro_calendar[data-hide-week-divider="1"] > .calendar_structure > .weeks > .week { border-color: transparent; }
article .micro_calendar > .calendar_structure > .weeks > .week > * { flex-grow: 0; flex-shrink: 0; }
article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder { width: -webkit-fill-available; flex-grow: 1; flex-shrink: 1; }
article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days { }
article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day { --bg-color: transparent; padding: 2px 0; background-color: var(--bg-color); }
article .micro_calendar > .calendar_structure[data-show-pointer-days="1"] > .weeks > .week > .days_holder > .days > .day { cursor: pointer; }
article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day[data-today="1"] { z-index: 1; outline: solid var(--today-outline-width) var(--color-boundary-darker); }
article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .label { display: flex; flex-flow: column nowrap; width: 24px; aspect-ratio: 1; margin: 5px 0; border-radius: 100%; justify-content: center; align-items: center; transition-timing-function: ease; transition-duration: 0.2s; will-change: auto; }
article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .label > label { }
article .micro_calendar > .calendar_structure[data-bound-m="1"] > .weeks > .week > .days_holder > .days > .day:not([data-month="1"]) > .label { color: var(--color-label-pale); }
article .micro_calendar > .calendar_structure[data-bound-m="2"] > .weeks > .week > .days_holder > .days > .day:not([data-month="2"]) > .label { color: var(--color-label-pale); }
article .micro_calendar > .calendar_structure[data-bound-m="3"] > .weeks > .week > .days_holder > .days > .day:not([data-month="3"]) > .label { color: var(--color-label-pale); }
article .micro_calendar > .calendar_structure[data-bound-m="4"] > .weeks > .week > .days_holder > .days > .day:not([data-month="4"]) > .label { color: var(--color-label-pale); }
article .micro_calendar > .calendar_structure[data-bound-m="5"] > .weeks > .week > .days_holder > .days > .day:not([data-month="5"]) > .label { color: var(--color-label-pale); }
article .micro_calendar > .calendar_structure[data-bound-m="6"] > .weeks > .week > .days_holder > .days > .day:not([data-month="6"]) > .label { color: var(--color-label-pale); }
article .micro_calendar > .calendar_structure[data-bound-m="7"] > .weeks > .week > .days_holder > .days > .day:not([data-month="7"]) > .label { color: var(--color-label-pale); }
article .micro_calendar > .calendar_structure[data-bound-m="8"] > .weeks > .week > .days_holder > .days > .day:not([data-month="8"]) > .label { color: var(--color-label-pale); }
article .micro_calendar > .calendar_structure[data-bound-m="9"] > .weeks > .week > .days_holder > .days > .day:not([data-month="9"]) > .label { color: var(--color-label-pale); }
article .micro_calendar > .calendar_structure[data-bound-m="10"] > .weeks > .week > .days_holder > .days > .day:not([data-month="10"]) > .label { color: var(--color-label-pale); }
article .micro_calendar > .calendar_structure[data-bound-m="11"] > .weeks > .week > .days_holder > .days > .day:not([data-month="11"]) > .label { color: var(--color-label-pale); }
article .micro_calendar > .calendar_structure[data-bound-m="12"] > .weeks > .week > .days_holder > .days > .day:not([data-month="12"]) > .label { color: var(--color-label-pale); }
article .micro_calendar > .calendar_structure[data-show-pointer-days="1"] > .weeks > .week > .days_holder > .days > .day > .label > label { cursor: pointer; }
article .micro_calendar > .calendar_structure:not([data-hide-selected="1"])[data-show-pointer-selected="1"] > .weeks > .week > .days_holder > .days > .day[data-selected="1"] { cursor: pointer; }
article .micro_calendar > .calendar_structure:not([data-hide-selected="1"]) > .weeks > .week > .days_holder > .days > .day[data-selected="1"] > .label { background-color: var(--color-boundary-darker); color: var(--color-text-inverse); }
article .micro_calendar > .calendar_structure:not([data-hide-selected="1"]) > .weeks > .week > .days_holder > .days > .day[data-selected="1"][data-day="0"] > .label { background-color: var(--color-label-holiday); }
article .micro_calendar > .calendar_structure:not([data-hide-selected="1"]) > .weeks > .week > .days_holder > .days > .day[data-selected="1"][data-day="6"] > .label { background-color: var(--color-label-holiday); }
article .micro_calendar > .calendar_structure:not([data-hide-selected="1"]) > .weeks > .week > .days_holder > .days > .day[data-selected="1"][data-holiday="1"] > .label { background-color: var(--color-label-holiday); }
article .micro_calendar > .calendar_structure:not([data-hide-selected="1"])[data-show-pointer-selected="1"] > .weeks > .week > .days_holder > .days > .day[data-selected="1"] > .label > label { cursor: pointer; }
article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .subject { --height: 1.2em; height: var(--height); max-width: -webkit-fill-available; margin-top: calc(var(--height) * -1); color: var(--color-text-lightness); font-size: 0.5rem; font-weight: 200; line-height: var(--height); text-overflow: ellipsis; text-shadow: 0px 0px 1px var(--color-text-inverse); white-space: nowrap; overflow-x: hidden; }
article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .subject > span { }
article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled { display: flex; flex-flow: column nowrap; width: -webkit-fill-available; padding: 0 2px; align-items: center; }
article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul { display: flex; flex-flow: column nowrap; list-style: none; width: -webkit-fill-available; margin: 0; padding: 0; gap: 2px; justify-content: stretch; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul > li { --bg-color: var(--color-boundary-lightish); max-width: -webkit-fill-available; padding: 2px; border-radius: 2px; background-color: var(--bg-color); color: var(--color-text-inverse); font-size: 0.75rem; line-height: 1em; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
article .micro_calendar[data-collapsed="1"] > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul { flex-flow: row wrap; width: 16px; max-width: -webkit-fill-available; justify-content: center; }
article .micro_calendar[data-collapsed="1"] > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul:has(> li:nth-child(10)) { width: 28px; }
article .micro_calendar[data-collapsed="1"] > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul:has(> li:nth-child(16)) { width: 40px; }
article .micro_calendar[data-collapsed="1"] > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul:has(> li:nth-child(22)) { width: 52px; }
article .micro_calendar[data-collapsed="1"] > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul > li { width: 4px; height: 4px; padding: 0; border-radius: 100%; font-size: 0; }
article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul > li > span {  }
article .micro_calendar > .under_gradient { width: -webkit-fill-available; height: 12px; background-image: linear-gradient(180deg, rgb(0 0 0 / 3%) 0, transparent 3px); }
article .micro_calendar > .stretch_handle { display: flex; flex-flow: row nowrap; width: -webkit-fill-available; justify-content: center; align-items: center; }
article .micro_calendar > .stretch_handle > .handle { position: relative; width: 80px; height: 4px; border-radius: 2px; background-color: var(--color-boundary-lightside); cursor: row-resize; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
article .micro_calendar > .stretch_handle > .handle:hover { background-color: var(--color-boundary-dark); }
article .micro_calendar > .stretch_handle > .handle:active { background-color: var(--color-boundary-darkness); }
article .micro_calendar > .stretch_handle > .handle::after { content: ''; position: absolute; display: block; top: -6px; bottom: -6px; left: -6px; right: -6px; border-radius: 8px; }

article .minimal_scheduler { margin-top: var(--basic-ui-inset-v-half); padding: 5px 0; }
article .minimal_scheduler > .schedule_list { list-style: none; display: flex; flex-flow: column nowrap; margin: 0; padding: var(--basic-ui-inset-v) var(--basic-ui-inset-h); align-items: stretch; row-gap: 12px; }
article .minimal_scheduler > .schedule_list > .placeholder { display: block; width: -webkit-fill-available; text-align: center; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; }
article .minimal_scheduler > .schedule_list > .placeholder > span.message { }
article .minimal_scheduler > .schedule_list > .schedule_item { }
article .minimal_scheduler > .schedule_list > .schedule_item > .schedule { --bg-color: var(--color-boundary-lightside); display: flex; flex-flow: column nowrap; border-radius: 12px; padding: var(--basic-ui-inset-v-half) var(--basic-ui-inset-h); background-color: var(--bg-color); color: var(--color-text-inverse); font-size: 0.875rem; line-height: 1.375rem; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
article .minimal_scheduler > .schedule_list > .schedule_item > .schedule:hover { box-shadow: 1px 2px 4px var(--color-boundary-o5); }
article .minimal_scheduler > .schedule_list > .schedule_item > .schedule:focus { outline: solid 2px var(--color-boundary-o10); }
article .minimal_scheduler > .schedule_list > .schedule_item > .schedule:active { outline: solid 2px var(--color-boundary-o10); outline-offset: -2px; }
article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .subject_line { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; }
article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .subject_line > .subject { font-weight: 500; }
article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .subject_line > .origin { flex-shrink: 0; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; }
article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .time_line { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-end; }
article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .time_line > .time { font-weight: 400; }
article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .time_line > .time:empty::before { content: '하루종일'; }
article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .time_line > .associated { flex-shrink: 0; font-size: 0.75rem; font-weight: 100; line-height: 1.25rem; }



/* path tree directed element styles */
main#staticDoc > section.root_tab_content { }
main#staticDoc > section.root_tab_content > div.container { }
main#staticDoc > section.root_tab_content > div.container[data-on-top="1"] { z-index: 1; }
main#staticDoc > section.root_tab_content > div.container > article { }
main#staticDoc > section.root_tab_content > div.container > article.main_context { --margin: 8px; border-radius: 24px; }
main#staticDoc > section.root_tab_content > div.container > article.main_context.scalable { --margin-h: 0px; }
main#staticDoc > section.root_tab_content > div.container > article.main_context.scalable[data-look-scale="1"] { --margin-h: 0px; }
main#staticDoc > section.root_tab_content > div.container > article.main_context.scalable[data-look-scale="2"] { --margin: 0px; border-radius: 0; }
main#staticDoc > section.root_tab_content > div.container > article.main_context.scalable > section.summary > div.toggle { border-radius: 24px; }
main#staticDoc > section.root_tab_content > div.container > article.main_context > section { }
main#staticDoc > section.root_tab_content > div.container > article.main_context > section.summary { }

main#staticDoc > section.root_tab_content > div.container { scroll-snap-type: y proximity; scroll-padding-block-start: var(--top-pad); scroll-padding-block-end: var(--bottom-pad); }
main#staticDoc > section.root_tab_content > div.container > article.main_context { scroll-snap-align: center; }
main#staticDoc > section.root_tab_content > div.container > article.main_context.scalable[data-look-scale="1"] { scroll-snap-type: y proximity; }
main#staticDoc > section.root_tab_content > div.container > article.main_context.scalable[data-look-scale="2"] { scroll-snap-type: y mandatory; }
main#staticDoc > section.root_tab_content > div.container > article.main_context.scalable:is([data-look-scale="1"], [data-look-scale="2"]) > section { scroll-snap-align: start end; }
@media all and (min-height: 700px) {
    @container main-static-section (min-width: 740px) {
main#staticDoc > section.root_tab_content > div.container { overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-block-start: var(--left-pad); scroll-padding-block-end: var(--right-pad); }
main#staticDoc > section.root_tab_content > div.container > article.main_context { scroll-snap-align: center; }
main#staticDoc > section.root_tab_content > div.container > article.main_context.scalable[data-look-scale="1"] { scroll-snap-type: unset; }
main#staticDoc > section.root_tab_content > div.container > article.main_context.scalable[data-look-scale="2"] { scroll-snap-type: unset; }
    }
}

main#staticDoc > section.root_tab_content > div.container > article.constraint.unified_calendar { display: flex; flex-direction: column; flex-wrap: nowrap; padding-bottom: 0; }

main#staticDoc > section.modal { }
main#staticDoc > section.modal:not([data-on-top=""]) { }
main#staticDoc > section.modal[data-on-top="1"] { z-index: 20; background-color: rgb(var(--cadm) / 30%); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
main#staticDoc > section.modal > div.container {  }
main#staticDoc > section.modal.fit > div.container { width: fit-content; height: fit-content; max-width: 100%; max-height: 100%; }
main#staticDoc > section.modal.top > div.container { bottom: unset; }
main#staticDoc > section.modal.bottom > div.container { top: unset; }
main#staticDoc > section.modal.left > div.container { right: unset; }
main#staticDoc > section.modal.right > div.container { left: unset; }
main#staticDoc > section.modal.stickyRootbar > div.container { left: calc(((100% - min(100%, var(--rootbar-max-width))) / 2) + var(--left-pad)); right: calc(((100% - min(100%, var(--rootbar-max-width))) / 2) + var(--right-pad)); padding-inline: 0; }
main#staticDoc > section.modal.stickyRootbar.left > div.container { margin-inline-end: auto; }
main#staticDoc > section.modal.stickyRootbar.right > div.container { margin-inline-start: auto; }
main#staticDoc > section.modal > div.container > article { padding: 8px; }
main#staticDoc > section.modal:not([data-on-top=""]) > div.container > article { }
main#staticDoc > section.modal[data-on-top="1"] > div.container > article { background-color: rgb(var(--cabr) / 80%); }
main#staticDoc > section.modal#more > div.container > article { border-radius: 8px; }
@media all and (min-height: 700px) {
    @media all and (min-width: 740px) {
main#staticDoc > section.modal { }
main#staticDoc > section.modal:not([data-on-top=""]) { }
main#staticDoc > section.modal[data-on-top="1"] { background-color: rgb(var(--cadm) / 15%); backdrop-filter: unset; -webkit-backdrop-filter: unset; }
main#staticDoc > section.modal.stickyRootbar > div.container { padding-inline: 0; }
    }
    @container main-static-section (min-width: 740px) {
main#staticDoc > section.modal.stickyRootbar > div.container { left: calc(((100% - var(--rootbar-min-width)) / 2) + var(--left-pad)); right: calc(((100% - var(--rootbar-min-width)) / 2) + var(--right-pad)); padding-inline: 0; }
    }
}


/* Draggable support for touch device */

/* Touch drag and drop styles */
/* Styles for touch support on draggable elements */
[draggable="true"] {
    outline: 2px solid transparent;
    outline-offset: -2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: grab;
    position: relative;
    transition: all 0.2s ease;
}

[draggable="true"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--color-boundary-o10);
}

[draggable="true"]:active {
    cursor: grabbing;
}

/* Style when dragging */
[draggable="true"][data-dragging="1"] {
    opacity: 0.6;
    transform: scale(0.95) rotate(2deg);
    cursor: grabbing;
    z-index: 1000;
    box-shadow: 0 8px 16px var(--color-boundary-o20);
    outline-style: solid;
    outline-color: rgb(var(--ce) / 50%);
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease;
    /* Disable position-related transitions to prevent animation loops during DOM manipulation */
    transition-property: opacity, transform, box-shadow, outline-style, outline-color;
    /* Optimize performance during drag operations */
    will-change: opacity, transform, box-shadow;
    /* Force hardware acceleration and prevent layout recalculation */
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Container styles for touch drag */
[droppable="true"] {
    outline: dashed 2px transparent;
    outline-offset: -2px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-height: 60px;
    border-radius: var(--basic-ui-inset);
    transition: all 0.3s ease;
    position: relative;
}

[droppable="true"]:empty {
    background-color: rgba(var(--cbdm), 2%);
    outline-style: dashed;
    outline-color: var(--color-boundary-o10);
}

[droppable="true"]:empty::after {
    content: 'Drag items here';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(var(--cbdm) / 40%);
    font-size: 0.875rem;
    pointer-events: none;
}

/* Drop highlight styles */
[droppable="true"][data-highlight="1"] {
    background-color: rgb(var(--ce) / 8%);
    outline-style: solid;
    outline-color: rgb(var(--ce) / 40%);
    box-shadow: 0 6px 20px rgb(var(--ce) / 20%);
}

[droppable="true"][data-highlight="1"]:empty::after {
    content: 'Drop here!';
    color: rgb(var(--ce) / 80%);
    font-weight: 600;
    animation: pulse-drop-zone 1s infinite;
}

/* Animations for touch feedback */
@keyframes touch-feedback {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes pulse-drop-zone {
    0%, 100% { opacity: 0.8; transform: translate(-50%, -50%); }
    50% { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes ghost-appear {
    0% { opacity: 0; transform: rotate(0deg) scale(0.8); }
    100% { opacity: 0.8; transform: rotate(5deg) scale(1.05); }
}

/* Feedback on touch start */
[draggable="true"]:active {
    animation: touch-feedback 0.15s ease;
}

/* Improved ghost element styles */
.ghost-element {
    animation: ghost-appear 0.2s ease-out;
    background: rgba(var(--cbbr) / 95%) !important;
    backdrop-filter: blur(4px) !important;
    outline: 2px solid rgb(var(--ce) / 30%) !important;
    outline-offset: -2px !important;
}

/* Display draggable areas */
[droppable="true"] {
    background: linear-gradient(135deg, rgb(var(--ce) / 2%) 0%, rgb(var(--cbdm) / 2%) 100%);
    border-radius: var(--basic-ui-inset);
}

/* Mobile touch optimization */
@media (hover: none) and (pointer: coarse) {
    [draggable="true"] {
        cursor: default;
        min-height: 48px; /* Minimum touch target size */
    }
    
    [draggable="true"]:hover {
        transform: none;
        box-shadow: none;
    }
    
    [droppable="true"] {
        min-height: 80px;
        padding: var(--basic-ui-inset);
    }
    
    [droppable="true"]:empty::after {
        font-size: 1rem;
    }
}

/* Keyboard focus styles for accessibility */
[draggable="true"]:focus {
    outline: 3px solid rgb(var(--ce) / 50%);
    outline-offset: 2px;
}

/* Expand touch area */
[draggable="true"][data-expanded="1"]::before {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    z-index: -1;
}