/* Variable */
:root {
--fontSize: 14px;
--fontHead: 'Noto Sans', sans-serif;
--fontBody: 'Noto Sans', sans-serif;
--fontBody-alt: 'Sora', sans-serif;
--fontCode: 'Courier New', monospace;
--fontCode-alt: 'Fira Mono', sans-serif;
--fontMobile: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Poppins, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--fontUni: "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Segoe UI Historic", "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Arial, Tahoma, Verdana, Geneva, -apple-system, BlinkMacSystemFont, sans-serif, system-ui;
--fontEmo:"Lucida Sans Unicode", "Lucida Grande", "Arial Unicode MS", sans-serif;
--head-H1: 2rem;
--head-H2: 1.8rem;
--head-H3: 1.55rem;
--head-H4: 1.45rem;
--head-H5: 1.35rem;
--head-H6: 1.25rem;
--head-fontWg: 500;
}
.nB {
--lightLink: #3740ff;
--lightC: #0e2045;
--lightC-alt: #0e2045cc;
--lightBg: #FEF9E8;
--lightBg-alt: #F0EAD4;
--lightBg-sec: #f5f3f2;
--lightBg-pop: rgb(14 20 27 / 30%);
--lightBd-color: #e4e3e1;
--darkLink: #8775f5;
--darkC: #d9e2f0;
--darkC-alt: #d9e2f0B3;
--darkBg: #22262d;
--darkBg-alt: #2d3138;
--darkBg-sec: #161c24;
--darkBg-pop: rgb(14 20 27 / 90%);
--darkBd-color: #35393f;
--themeLink: var(--lightLink);
--themeC: var(--lightC);
--themeC-alt: var(--lightC-alt);
--themeBg: var(--lightBg);
--themeBg-alt: var(--lightBg-alt);
--themeBg-sec: var(--lightBg-sec);
--themeBg-pop: var(--lightBg-pop);
--themeBd-color: var(--lightBd-color);
--vHeight: 100vh;
--selectC: #FEF9E8;
--selectBg: var(--themeLink);
--selectT: var(--themeBg);
--selectBgT: #323232;
--placeHolder: var(--themeC-alt);
--buttonC: #FEF9E8;
--buttonBg: #3740ff;
--buttonBd-line: 1px;
--buttonBd-color: #e4e3e1;
--buttonBd-radius: 4px;
--button-maxWidth: 320px;
--inputC: currentColor;
--inputBg: var(--themeBg);
--inputBd-line: 1px;
--inputBd-color: var(--themeBd-color);
--inputBd-radius: 4px;
--iconWidth: 35px;
--iconHeight: 35px;
--closeHeight-phone: 60px;
--headerText-after: '';
--headerWidth-expand: var(--sideWidth-expand);
--headerHeight: 65px;
--headerHeight-min: -65px;
--headerHeight-phone: 65px;
--header-font: 1.25em;
--header-fontWg: 900;
--headerC: #0e2045;
--headerBg: #FEF9E8;
--headerBd-line: 1px;
--headerBd-radiusBL: 0px;
--headerBd-radiusBR: 0px;
--headerBd-color: #e4e3e1;
--headerLogo-maxWidth: 160px;
--headerLogo-maxHeight: 50px;
--sideWidth: 75px;
--sideWidth-collapse: var(--sideWidth);
--sideWidth-expand: 230px;
--sideWidth-max: 480px;
--sideMargin-phone: 0px;
--sideC: #0e2045;
--sideBg: #FEF9E8;
--sideBd-line: 1px;
--sideBd-radiusTL: 0px;
--sideBd-radiusTR: 0px;
--sideBd-radiusBR: 0px;
--sideBd-radiusBL: 0px;
--sideBd-color: #e4e3e1;
--sidebarWidth: 300px;
--sidebarPadding: 0px;
--sidebarC: #0e2045;
--sidebarBg: #FEF9E8;
--sidebarBd-line: 0px;
--sidebarBd-radius: 0px;
--sidebarBd-color: #e4e3e1;
--content-maxWidth: 1300px;
--contentPost-maxWidth: 780px;
--contentPage-maxWidth: 820px;
--contentPop-maxWidth: 550px;
--contentImage-maxWidth: calc(var(--content-maxWidth) + var(--sidebarWidth));
--contentX-maxWidth: 100%;
--contentPadding: 22px;
--contentPadding-minus: -22px;
--contentPadding-box: 15px;
--contentSpace: 40px;
--contentC: #0e2045;
--contentBg: #FEF9E8;
--contentBg-alt: #F0EAD4;
--contentBg-sec: #f5f3f2;
--contentBd-line: 1px;
--contentBd-radius: 4px;
--contentBd-radiusA: 10px;
--contentBd-color: #e4e3e1;
--footerC: #0e2045;
--footerBg: #FEF9E8;
--footerBd-line: 1px;
--footerBd-radiusTL: 0px;
--footerBd-radiusTR: 0px;
--footerBd-color: #e4e3e1;
--postPadding: 0px;
--postPadding-phone: 0px;
--postPadding-content: 0px;
--postC: #0e2045;
--postBg: #FEF9E8;
--postBd-line: 0px;
--postBd-radius: 0px;
--postBd-color: #e4e3e1;
--postBs-color: transparent;
--postBs-hoverColor: transparent;
--postTitle-font: 2.6rem;
--postTitle-fontPhone: 2rem;
--postTitle-fontWg: 700;
--postTitle-fontItems: 1.2em;
--postTitle-fontItemsPhone: 1.1em;
--postDescription-font: 1.13rem;
--postDescription-fontPhone: 1.072rem;
--postBody-font: 1.143rem;
--postBody-fontPhone: 1.072rem;
--postBreak: 3em;
--postImageBd-radius: 2px;
--lineHeight: 1.7;
--lineSpacing: 1.8em;
--tableBg-color: rgb(246 246 246 / 80%);
--thumbnailRatio: 56.25%;
--thumbnailRatio-box: 100%;
--synC: #2f3337;
--synBg: #f8f9fa;
--synOrange: #b75501;
--synBlue: #015692;
--synGreen: #54790d;
--synRed: #f15a5a;
--synGray: #656e77;
--synGold: #72621d;
--synPurple: #803378;
--synBd-line: 1px;
--synBd-radius: 4px;
--synBd-color: #d2d3d7;
--noteAfter: '\002A';
--warnAfter: '\0021';
--noteC: #272eb5;
--noteBg: #e8f0fe;
--warnC: #e51661;
--warnBg: #fce8e8;
--stepC: #3740ff;
--stepHover: #FEF9E8;
--widgetTitle-font: 1.072rem;
--widgetTitle-fontWg: 400;
--widgetTitle-afterD: inline-block;
--widgetTitle-afterWd: 10px;
--widgetTitle-afterC: var(--themeBd-color);
--widgetTitle-space: 20px;
--notifHeight: 55px;
--notifLink: #3740ff;
--notifC: #272eb5;
--notifBg: #e8f0fe;
--sliderBd-radius: 4px;
--sliderRatio: 43.75%;
--thumbnailSize: 300px;
--mobileHeight: 60px;
--mobileMargin: 0px;
--mobileC: #0e2045;
--mobileBg: #FEF9E8;
--mobileBd-line: 0px;
--mobileBd-radiusTL: 0px;
--mobileBd-radiusTR: 0px;
--mobileBd-radiusBR: 0px;
--mobileBd-radiusBL: 0px;
--mobileBd-color: #e4e3e1;
--tocWidth: 280px;
--tocWidth-minus: -280px;
--tocMargin: 0px;
--tocC: #0e2045;
--tocBg: #FEF9E8;
--tocBd-line: 1px;
--tocBd-radiusTL: 0px;
--tocBd-radiusTR: 0px;
--tocBd-radiusBR: 0px;
--tocBd-radiusBL: 0px;
--tocBd-color: #e4e3e1;
--tDuration: .1s ease;
--tShowHide: opacity var(--tDuration), visibility var(--tDuration);
--addBookmark: 'Save';
--removeBookmark: 'Saved';
--bookmarkTextLenght: 90px;
--free: 'Free!';
--new: 'New!';
--breadcrumbs: '\005C';
--noImage: 'Null';
--labelComa: 'and';
--closeButton: 'Close';
--pageNext: 'Next';
--pagePrev: 'Back';
--latestUpdate: '\21BB';
--reply: 'Reply';
--replies: 'Write a reply...';
--readtimeBefore: '\00B7';
--readtimeAfter: 'min read';
--copyLink: 'or copy link';
--copied: 'Copied!';
--tableToc: 'Contents';
--gradient1: linear-gradient(to left, #f09, #3023AE, #0ff) ;
--gradient2: linear-gradient(165deg, #2dfff9, #2dc5ff, #9300ff) ;
--gradient3: linear-gradient(45deg, #6249ce, #35ffca) ;
}
/* Font: Body + Heading, Noto Sans(Latin) by Google */ @font-face {font-family:'Noto Sans'; font-style:italic;font-weight:400;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0OIpQlx3QUlC5A4PNr4ARCQ_k.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0OIpQlx3QUlC5A4PNr4DRG.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Noto Sans'; font-style:italic;font-weight:500;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4AyxYOyDzW0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4AyxYNyH.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Noto Sans'; font-style:italic;font-weight:600;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4AydZ-yDzW0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4AydZ9yH.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Noto Sans'; font-style:italic;font-weight:700;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4Az5ZuyDzW0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4Az5ZtyH.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Noto Sans'; font-style:normal;font-weight:400;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0IIpQlx3QUlC5A4PNb4Q.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Noto Sans'; font-style:normal;font-weight:500;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjFhdVZNyB.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjFhdlYA.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Noto Sans'; font-style:normal;font-weight:600;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjOhBVZNyB.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjOhBlYA.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Noto Sans'; font-style:normal;font-weight:700;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjXhFVZNyB.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjXhFlYA.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Font: Body + Heading(Alternative), Sora(Latin) by Google */ @font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url(https://fonts.gstatic.com/s/sora/v12/xMQbuFFYT72XzQspDre2.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url(https://fonts.gstatic.com/s/sora/v12/xMQbuFFYT72XzQUpDg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Font: Source code, Fira Mono(Latin) by Google */ @font-face {font-family:'Fira Mono'; font-style:normal;font-weight:400;font-display:swap; src:url(https://fonts.gstatic.com/s/firamono/v14/N0bX2SlFPv1weGeLZDtgJv7S.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firamono/v14/N0bX2SlFPv1weGeLZDtQIg.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/*! normalize.css v8.0.1 - modified for Jagodesain.com at 14px | MIT License | github.com/necolas/normalize.css*/ html{line-height:1.15;-webkit-text-size-adjust:100%} body{margin:0} main{display:block} h1{font-size:2em;margin:.67em 0} hr{box-sizing:content-box;overflow:visible} pre{font-family:monospace, monospace;font-size:.82em} a{background-color:transparent} abbr[title]{border-bottom:none;text-decoration:underline} b, strong{font-weight:bolder} code, kbd, samp{font-family:monospace, monospace;font-size:.88em} small{font-size:80%} sub, sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-.25em} sup{top:-.5em} img{border-style:none} button, input, optgroup, select, textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;outline:0} button, input{overflow:visible} button, select{text-transform:none} button, [type=button], [type=reset], [type=submit]{-webkit-appearance:button} button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0} button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText} fieldset{padding:.35em .75em .625em} legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal} progress{vertical-align:baseline} textarea{overflow:auto} [type=checkbox], [type=radio]{padding:0} [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto} [type=search]{-webkit-appearance:textfield;outline-offset:-2px} [type=search]::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} details{display:block} summary{display:list-item} template{display:none} [hidden], .hidden{display:none}
/* Basic: CSS */ ::selection{color:var(--selectT);background-color:var(--selectBgT); opacity:.85} ::placeholder{color:var(--placeHolder)} ::before, ::after, *{-webkit-box-sizing:border-box;box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden; font:var(--fontSize) var(--fontBody)} body{position:relative; margin:0;padding:0 !important; color:var(--themeC);background-color:var(--themeBg); -webkit-font-smoothing: antialiased} h1, h2, h3, h4, h5, h6{margin-block:.67em; font:var(--head-fontWg) 1.4rem/1.4 var(--fontHead); color:currentColor} h1{font-size:var(--head-H1)} h2{font-size:var(--head-H2)} h3{font-size:var(--head-H3)} h4{font-size:var(--head-H4)} h5{font-size:var(--head-H5)} h6{font-size:var(--head-H6)} a{color:var(--themeLink);text-decoration:none} a:hover{filter:brightness(.9);transition:filter .1s} table{border-spacing:0} iframe{width:100%;border:0;margin-inline:auto} img{display:inline-block;max-width:100%;height:auto} svg{width:24px;height:24px; fill:currentColor} svg.line, svg .line{fill:none; stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.25} .invisible{opacity:0;visibility:hidden} .clear{width:100%;display:block;margin:0;padding:0;float:none;clear:both} .break{word-break:break-word}
/* Basic: input and details tag */ input{color:var(--inputC);background-color:var(--inputBg)} input[type=search]::-ms-clear, input[type=search]::-ms-reveal{display:none;appearance:none;width:0;height:0} input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration{display:none;-webkit-appearance:none;appearance:none} details summary.n, details.sp summary, details.ac summary{list-style:none;outline:none; cursor:default} details summary.n::-webkit-details-marker, details.sp summary::-webkit-details-marker, details.ac summary::-webkit-details-marker{display:none}
/* Basic: function */ .fc::after{content:''; display:block; position:fixed;top:0;left:0;right:0;bottom:0; z-index:1; transition:background var(--tDuration), var(--tShowHide), backdrop-filter var(--tDuration); background-color:transparent;opacity:0;visibility:hidden} .free::after, .new::after{display:inline-block; content:var(--free); color:var(--themeLink); font-weight:400;font-size:small; text-indent:5px} .new::after{content:var(--new)} .extL::after{content:''; display:inline-block; width:14px;height:14px;margin-inline-start:5px; background: url("data:image/svg+xml,") center / 16px no-repeat} .noList, .noList ul, .noList ol{list-style:none;margin:0;padding:0} .noWrap{white-space:nowrap} .ellips{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cInherit a{color:inherit} .cInherit.u a:hover{text-decoration:underline} .bgInherit{background-color:inherit} .bgAlt{background-color:var(--themeBg-alt)} .clamp{/*display:-webkit-box;*/ -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .strike{text-decoration:line-through} .flex{display:flex} .flex.center{align-items:center;justify-content:center} .flex.column{flex-direction:column} .flex.wrap{flex-wrap:wrap} .flex.space-between{justify-content:space-between} .flex.baseline{align-items:baseline} .flexIn{display:inline-flex} .flexIn.baseline{align-items:baseline} .flexIn.center{align-items:center} .shrink{flex-shrink:0} .grow{flex-grow:1} .opacity{opacity:.8}
/* Font style */ .fontM{font-size:.93em} .fontS{font-size:small} .fontSm{font-size:smaller} .fontB{font-family:var(--fontBody)} .fontBa{font-family:var(--fontBody-alt)} .fontC{font-family:var(--fontCode)}
/* Icon and SVG */ .ic{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center; width:var(--iconWidth);height:var(--iconHeight)} .op svg{opacity:.8} .i12 svg{flex-shrink:0; width:12px;height:12px} .i14 svg{flex-shrink:0; width:14px;height:14px} .i16 svg{flex-shrink:0; width:16px;height:16px} .i18 svg{flex-shrink:0; width:18px;height:18px} .i20 svg{flex-shrink:0; width:20px;height:20px} .i22 svg{flex-shrink:0; width:22px;height:22px} .i28 svg{flex-shrink:0; width:28px;height:28px}
/* pH : Avatar, Admin, Date */ .avatar{min-width:28px;min-height:28px; border-radius:50%;background-color:var(--contentBg-sec);background-size:100%;background-position:center;background-repeat:no-repeat} .avatar.im{width:35px;height:35px} .blogN .m{cursor:not-allowed; color:var(--themeC-alt);background-color:var(--contentBg-sec)} .byline{align-self:center} .m{display:inline-block;line-height:1.3}.pH:not(.info) .m::before {content: attr(data-write);margin-inline-end: 5px;} .m::after {content: attr(data-text);margin-inline-end: 0;text-decoration:underline} .pH .date{opacity:.8} .pH .date::before {content: var(--readtimeBefore) ' ';margin-inline: 5px;}
/* Back to top */ .bT{align-items:center;gap:5px; position:relative;margin-inline-end:-2px} .bT::before{content:attr(data-text); opacity:.8}
/* Error 404 */ .errorP{height:calc(100vh - 210px);text-align:center} .errorC{width:calc(100% - calc(var(--contentPadding) * 2));max-width:450px; margin:auto; font-family:var(--fontBody-alt)} .errorC .e{font-size:4rem; color:rgb(0 0 0 / 10%)} .errorC .t{font-size:1.6rem} .errorC p{margin-block:25px 30px; line-height:1.4} .errorC .button{padding-inline:2.5em} .errorC .button::before{content:attr(aria-label)}
/* noScript/cookie */ /* body.nB .lazy:not([lazied]){display:none} */ .nJ{position:fixed;left:0;bottom:var(--contentPadding);right:0; max-width:400px;margin-inline:var(--contentPadding);padding:18px 20px;padding-block-end:36px;border-radius:var(--contentBd-radius); color:var(--warnC);background:var(--warnBg); font:small/1.3 var(--fontBody-alt);box-shadow:0 15px 30px -8px rgb(0 0 0 / 8%); z-index:99} .nJ:not([open]){display:none} .nJ summary{position:absolute;bottom:12px;right:20px} .nJ span:not(.c)::before{content:attr(data-text)} .nJ span.c{display:flex;align-items:center;gap:5px; font-weight:500} .nJ span.c::before{content:attr(data-text)} .nJs .noJava, .njs .lazyYt{display:none} .nJ.cookie:not(.hidden){display:block} .nJ.cookie{bottom:calc(-100px + var(--contentPadding)); margin-bottom:var(--contentPadding);padding-block-end:15px;color:#0e2045;background-color:#FEF9E8; font-size:.94rem; box-shadow:0 15px 30px 8px rgb(0 0 0 / 8%); transition:bottom var(--tDuration), var(--tShowHide); animation:slideTop 2.2s ease-in forwards} .nJ.cookie p{margin-block:0 5px} .nJ.cookie p a:hover{text-decoration:underline; opacity:1} .nJ.cookie .ft{gap:20px;justify-content:flex-end; font-weight:500} .nJ.cookie .ft >*{padding-block:5px} .nJ.cookie .acc{color:var(--themeLink); cursor:pointer}
/* Button */ .button{display:inline-flex;align-items:center;column-gap:8px; max-width:var(--button-maxWidth); padding:.75rem 1rem;outline:0;border:0;border-radius:var(--buttonBd-radius); color:var(--buttonC);background-color:var(--buttonBg); font:1rem/1.5 var(--fontBody); white-space:nowrap;text-overflow:ellipsis} .button:hover{filter:brightness(1.1)} .button:active{filter:brightness(.9)} .button.ln{border:var(--buttonBd-line) solid var(--buttonBd-color); color:inherit;background-color:transparent} .button.ln:hover{border-color:var(--buttonBg);box-shadow:0 0 0 .5px var(--buttonBg) inset} .button.sc{padding-inline:0; color:currentColor;background-color:transparent} .button.sc:hover{text-decoration:underline} .button.round{border-radius:30px} .button svg{flex-shrink:0; width:18px;height:18px} .button span::after{content:attr(data-text); display:block;font-size:smaller;text-indent:4px; opacity:.8} .btnF{display:flex;justify-content:flex-start;gap:12px; margin-block:1em}
html {scroll-behavior: smooth;overflow-x: hidden;font: var(--fontSize) var(--fontBody);} body {position: relative;margin: 0; padding: 0 !important; color: var(--themeC);background-color: var(--themeBg);-webkit-font-smoothing: antialiased;} ::before, ::after, * {-webkit-box-sizing: border-box;box-sizing: border-box;} .flex{display:flex} .grow {flex-grow: 1;} .flex.column {flex-direction: column;}.flex.row {flex-direction:row}
/* Effect */ @keyframes nudge{ 0%{transform:translateX(0)} 30%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 70%{transform:translateX(-2px)} 100%{transform:translateX(0)} } @keyframes slideIn{ 0%{opacity:0} 10%, 80%{opacity:1;bottom:var(--contentPadding)} 100%{bottom:calc(-100px + var(--contentPadding-minus)); opacity:0;visibility:hidden} } @keyframes slideTop{ 0%, 40%{opacity:0} 50%, 100%{opacity:1;bottom:0} } @keyframes bullet{ 1%, 21%{width:10px;background-color:var(--themeLink)} 22%, 39%{width:4px;background-color:rgb(0 0 0 / 15%)} } @keyframes slide{ 0%, 20%{margin-inline-start:0} 25%, 45%{margin-inline-start:-100%} 50%, 70%{margin-inline-start:-200%} 75%, 95%{margin-inline-start:-300%} }
/* Hide scroll */ .scrlH::-webkit-scrollbar{width:0;height:0} .scrlH::-webkit-scrollbar-track{background-color:transparent} .scrlH::-webkit-scrollbar-thumb{background-color:transparent;border:none}
/* Print (Do not print selected area) */ @media print{.noPrint{display:none}}
/* Do not copy */ /*body{user-select:none;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} pre, code, kbd, i[rel=pre]{user-select:text;-moz-user-select:text;-ms-user-select:text;-khtml-user-select:text;-webkit-user-select:text;-webkit-touch-callout:text}*/
/* element: Main */ .maxC, .maxI{margin-inline:auto;padding-inline:var(--contentPadding); max-width:var(--content-maxWidth)} .mainH{--gapH:15px;gap:var(--gapH); height:var(--headerHeight);border-bottom:var(--headerBd-line) solid var(--headerBd-color); color:var(--headerC);background-color:var(--headerBg); z-index:10} .mainN{min-height:calc(var(--vHeight) - var(--headerHeight)); transition:min-height var(--tDuration)} .mainF{position:relative; margin-block-start:auto; padding-block:25px;border-radius:var(--footerBd-radiusTL) var(--footerBd-radiusTR) 0 0;color:var(--footerC);background-color:var(--footerBg)} .maxI{max-width:var(--contentImage-maxWidth)} .maxX{max-width:var(--contentX-maxWidth)}
/* mainH */ .mainH >*{align-items:center} .headL{--gap: 10px; gap:var(--gap); width:var(--headerWidth-expand)} .headR{--gap: 15px; flex-grow:1;gap:var(--gap); width:calc(100% - (var(--headerWidth-expand) + var(--gapH))); padding-inline-end:var(--contentPadding)} .headT{max-width:calc(100% - (((var(--sideWidth) - var(--iconWidth)) / 2) + var(--iconWidth) + var(--gap)));margin-left:var(--contentPadding)} .headB{position:relative;margin-inline-start:auto}
/* mainH: icon */ .headi.menu{height:100%; padding-inline-start:calc((var(--sideWidth) - var(--iconWidth)) /2)} .headi:not(.menu){align-items:center;justify-content:flex-end;gap:2px; position:relative;margin-inline-end:-8px} .headi .sc{display:none} .ibook .bc{position:relative} .ibook .bc svg{z-index:-1} .ibook .bc::before{content:attr(data-text); display:flex;align-items:center;justify-content:center; position:absolute;top:1px;right:2px;min-width:18px;height:18px; border-radius:20px;color:var(--themeLink);background-color:var(--headerBg); font-weight:500;font-size:10px;font-style:normal}
/* mainC */ .mainAd:not(.no-items){margin-block-end:var(--contentSpace)} .mainC{padding-block-end:var(--contentSpace)} .mainC >.maxC{margin-block-start:var(--contentPadding)} .mainB{justify-content:center;gap:var(--contentSpace)} .mainB .blogB{width:calc(100% - (var(--sidebarWidth) + var(--contentSpace))); transition:width var(--tDuration), max-width var(--tDuration)} .mainB .blogB.item{max-width:var(--contentPost-maxWidth)} .mainB .blogB.static{max-width:var(--contentPage-maxWidth)} .mainB .sideB{gap:var(--contentSpace);width:var(--sidebarWidth); max-width:100%} .mainB .sideSticky{position:-webkit-sticky; position:sticky;top:calc(var(--headerHeight) + 10px)} .mainB .sideB .section:not(.slider){gap:0} .mainB .sideB .widget:not(:first-child){margin-top:var(--contentSpace)}.mainB .section:not(.slider){gap:var(--contentSpace)} .mainB.full :is(.blogB, .sideB){width:100%} .blogB >.section:not(:last-child){margin-bottom:var(--contentSpace)}.mainB .post{flex-grow:1} .post .pCenter{text-align:center}
/* mainM */ .mainM{display:none; position:fixed;left:var(--mobileMargin);bottom:var(--mobileMargin);right:var(--mobileMargin); border-top:var(--mobileBd-line) solid var(--mobileBd-color);border-radius:var(--mobileBd-radiusTL) var(--mobileBd-radiusTR) var(--mobileBd-radiusBR) var(--mobileBd-radiusBL); color:var(--mobileC);background-color:var(--mobileBg); box-shadow:0 -10px 25px -5px rgb(0 0 0 / 10%);z-index:1} .mobileM{height:var(--mobileHeight);padding-inline:var(--contentPadding); font-size:9px} .mobileM >*{justify-content:center;width:20%} .mobileM *[data-text]{justify-content:center; min-width:40px;max-width:100px;min-height:35px} .mobileM *[data-text]::after{content:attr(data-text); display:block;width:100%; text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mobileM.index .search:nth-last-child(2){order:3}
/* mainF */ .mainF::before{content:'';position:absolute;top:0;left:var(--contentPadding);right:var(--contentPadding);border-block-start:var(--footerBd-line) solid var(--footerBd-color)} .mainF .credits{align-items:center;gap:10px} .mainF .textCredit{margin-inline-end:auto; overflow:hidden;text-overflow:ellipsis} .mainF .credit, .mainF .credit .e{display:inline} .mainF .credit .e::before{content:'\00A9'} .mainF .socials{position:relative; margin-inline-end:-6px} .mainF .socials div.ic{opacity:.5} .mainF .socials .ic{width:30px;height:30px}
/* nav */
.navH {justify-content: flex-end;} .navH ul {display: flex;flex-wrap: wrap; justify-content: center; list-style:none;margin:0; padding:0;gap:1.5rem; justify-content: center;align-items:center}
/* mainTranslator */ .fixed{position:fixed;}.text-xs{font:small/1.3 var(--fontBody-alt);line-height: 1rem;}.mainTranslator{position:relative;gap:1.5rem;}
.mainTranslator .mainT{--mainT-height:calc(100vh - (100px + 150px));width:100%; max-width:50%; padding: var(--contentPadding);border-radius:var(--contentBd-radiusA);height:var(--mainT-height);border:1px solid var(--contentBd-color);transition: var(--tShowHide); overflow-x:hidden;overflow-y:auto;box-sizing:border-box;}.mainTranslator .mainT:hover{border: 1px solid var(--themeLink)}.mainTranslator button{outline:none;border:0;cursor:pointer} .mainTranslator ul,.mainTranslator ul li{list-style:none;padding:0;margin:0;}.translateT {width:100%;position:relative;}
.textareaT{background:transparent;border:0;outline:none;width:100%;height:100%;box-shadow:none;display:flex;resize:none;color:inherit;margin:0;line-height:1.2em;overflow-y: auto;}
.translateT .qg button,#showcase .tbHd label::before{height:30px;width:30px;border-radius:99em;display:flex;justify-content:center;align-items:center;cursor:pointer;color: #0e2045;background-color: #FEF9E8;box-shadow: 5px 5px 15px 0 rgb(0 0 0 / 10%);padding:0;}.mainT svg{height:18px;width:18px;}.msgT{padding:0!important;margin:0!important;margin-block-start:0!important} .homeT.blogB >.section:not(:last-child) {margin-bottom: 0;}.homeT .pI{margin-top:0;}.maxT{padding: var(--contentPadding);}.maxT .mainAd:not(.no-items){margin-block-end: var(--contentPadding);}.maxT .mainAd.twins{margin-block-start: var(--contentSpace);}.twins{display:flex;justify-content:space-around;gap:2rem;flex-flow:row wrap;}.twins .widget{width:100%;max-width:336px;}#Left-menu li a[aria-current]{color:var(--lightLink);}
/* App Generator */ .generatorT{width:100%;}.generatorT.hideT,.generatorT{display:none;}.generatorT.showT{display:block!important;}.card .card-i{position:relative;}
.cardH .styleName{position:relative;display:flex;flex-flow:row nowrap; align-items:center;font-size:12px;font-weight:400;text-overflow: ellipsis;-webkit-text-overflow: ellipsis;white-space: nowrap;padding-right:35px}
.cardH .styleName:after{content: '';display: inline-block;vertical-align: middle;width:100%;margin-inline-start: 8px;border-bottom: 1px solid var(--widgetTitle-afterC);opacity: 1;}
.cardC p{width: 100%;font-size:1.5rem;line-height:2rem; word-break: break-all;overflow-wrap: break-word;overflow-y: auto;margin-block-start: 1em!important;margin-block-end: 1em!important;}
.cardC .p\:uni{font-family: Arial, Tahoma, Verdana, Geneva, "Segoe UI", "Segoe UI Symbol", "Segoe UI Historic", "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", -apple-system, BlinkMacSystemFont, sans-serif, system-ui;}
.cardF{position:absolute;top:-.5rem;right:0;color: #0e2045;}
.cardF button{cursor:pointer;background-color: #FEF9E8;box-shadow: 5px 5px 15px 0 rgb(0 0 0 / 10%);border-radius:99em;padding:.5rem;width:30px;height:30px;display:flex;justify-content:center;align-items:center}
.cardF svg{height:18px;width:18px;}.cardF button:hover svg,.translateT button:hover svg{fill:var(--themeLink);color:var(--themeLink)}
.cardF button span{visibility:hidden;opacity:0;height:0;width:0;overflow:hidden;display:block;}
.alertT{align-items:center;justify-content:center;width:100%}
.alertC {z-index: 13;transition: bottom .1s ease, opacity .1s ease, visibility .1s ease;animation: slideIn 2.2s ease-in forwards;bottom: 0;padding:15px 20px;border-radius:var(--contentBd-radius);color:#d9e2f0;background:#323232; box-shadow:5px 10px 20px 0 rgb(0 0 0 / 10%);}.loadmoreT{padding:2.5rem 0} .loadA{color:var(--buttonC)!important}
.dataT .title {font-weight: var(--widgetTitle-fontWg)!important;font-size: var(--widgetTitle-font)!important;display:inline-flex;align-items:center;}
.dataT .title .line{margin-right:.5rem;}
/* buttonT */.buttonT{position:relative;justify-content:flex-end;align-items:center;gap:.75rem}.qg button{padding:0;} .cT{border-radius:99em; padding:0 1rem; box-shadow: 5px 5px 15px 0 rgb(0 0 0 / 10%); gap:.25rem;align-items:center;height:30px;} .copyT{background-image: url("data:image/svg+xml,");background-position:center;background-repeat:no-repeat;} .closeT{background-image: url("data:image/svg+xml,");background-position:center;background-repeat:no-repeat;} .createT{background-image: url("data:image/svg+xml,");background-position:center;background-repeat:no-repeat;} .randomT{background-image: url("data:image/svg+xml,");background-position:center;background-repeat:no-repeat; stroke:currentColor} .flexB{justify-content:space-between;align-items:center;gap:.25rem;background-position:left .85rem center;}.flexB span{padding-left:1.75rem}
/* introT */ #howto div::after{content:attr(data-text);display:block;text-indent:4px;font-size:2rem;font-weight:600;color:var(--lightBg);font-family: var(--fontBody-alt);box-shadow: 5px 5px 15px 0 rgb(0 0 0 / 10%);}#howto div[data-text]{margin-bottom:.5rem;display:flex;justify-content:center;align-items:center;}.introP .widget{margin-bottom:0}#howto .widget{width:33.33%;border-radius: var(--contentBd-radiusA);margin-block-end:0}#howto .flex{gap:1.5rem;}#howto .widget p{margin-bottom:0;} #showcase .tbHd h3{margin-top:.25rem;margin-bottom:0;font-size:1rem;}#showcase .tbHd label{width:20%;}#showcase .tbHd label::before{height:45px;width:45px;font-size:1.75rem;} .grid{display:grid} .cardS.grid{grid-template-rows: 1fr;grid-template-columns: repeat(auto-fill, minmax(min(250px, 300px), 1fr));gap: 2rem;} .cardS .box-02{border: 1px solid var(--contentBd-color); border-radius: var(--contentBd-radiusA); padding: var(--contentPadding); background-color: var(--lightBg-alt);color:var(--lightC)} .cardS .box-02:hover{box-shadow: 5px 5px 15px 0 rgb(0 0 0 / 10%); }.box-02 .title{font-weight:600!important}.box-02 p{margin-block:0!important;font-size: .9rem;line-height: 1.5;opacity: .7;}.cardS .box-02:nth-child(1),.cardS .box-02:nth-child(4),.cardS .box-02:nth-child(7),.cardS .box-02:nth-child(10),.cardS .box-02:nth-child(16),.cardS .box-02:nth-child(18){grid-column: span 2;}.cardS .box-02:nth-child(3),.cardS .box-02:nth-child(12),.cardS .box-02:nth-child(17){grid-row:span 2}.cardS .box-02:nth-child(2),.cardS .box-02:nth-child(3),.cardS .box-02:nth-child(5),.cardS .box-02:nth-child(8),.cardS .box-02:nth-child(11),.cardS .box-02:nth-child(12),.cardS .box-02:nth-child(16),.cardS .box-02:nth-child(19),.cardS .box-02:nth-child(21){background-color:var(--darkBg-alt);color:var(--darkC)}.cardS .title::after{border-color:currentColor!important;opacity:.8!important}
/* widget LinkList101 #LinkList101{}.toolsT{} */ .toolsT .linksL{padding:0 1.25rem;}.toolsT .linksL li{margin-bottom:.55rem;} .toolsT .linksL a{opacity:.8}.toolsT .linksL a:hover{opacity:1;}.toolsT .linksG{display:flex;flex-flow:row wrap;gap:.5rem;row-gap:.5rem; column-gap:.5rem;}.toolsT .linksG,.toolsT .linksG {list-style:none;margin:0; padding:0;box-sizing: border-box;}.toolsT .linksG a{background-color:var(--contentBg-alt);border-radius: var(--contentBd-radius);padding:10px;text-transform:uppercase;font-size: .93em;letter-spacing:.125em;}.toolsT .linksG a:hover{box-shadow: 5px 5px 15px 0 rgb(0 0 0 / 10%);}
/* Widget: default */ .widget .title,.dataT .title{position:relative;margin-block:0 var(--widgetTitle-space); font-weight:var(--widgetTitle-fontWg);font-size:var(--widgetTitle-font)} .widget .title.s{font-size:small} .widget .title::after,.dataT .title::after{content:''; display:var(--widgetTitle-afterD);vertical-align:middle; width:var(--widgetTitle-afterWd);margin-inline-start:8px;border-bottom:1px solid var(--widgetTitle-afterC); opacity:1} .no-items{display:none}
/* Widget: Header */ .Header{width:100%;background-repeat:no-repeat;background-size:100%;background-position:center} .Header img{max-width:var(--headerLogo-maxWidth);max-height:var(--headerLogo-maxHeight)} .Header a:hover{opacity:1} .headN{display:block;margin:0; font-weight:var(--header-fontWg);font-size:var(--header-font)} .headt{display:block} .headt::after{content:var(--headerText-after); display:inline-block;font-weight:400;font-size:11px;line-height:14px; opacity:.8}
/* createP */ .create h1{font-weight:700;} .create .subtitle{text-align:center;} .areaA{width: 100%;border:1px solid var(--contentBd-color);padding:.75rem; border-radius:99em} .areaA .inputT{padding:0 1rem;font-size:x-large;height:100%;width:100%;outline:none;border:none;box-shadow:none;background:transparent} .arT{background-color:rgba(255,255,255,.95); border-radius:99em; border:2px solid var(--lightLink);height:50px; display:flex;align-items:center} .areaA,.areaA .arB{gap:.5rem} .backdrop {backdrop-filter: saturate(180%) blur(10px)} .lsI {width: 100%;height: 100%;}.areaA.sticky {position: -webkit-sticky;position: sticky;top: 10px; border-radius: 99em;z-index:100} .collections{overflow:hidden} .collections .grid{grid-template-rows: 1fr;grid-template-columns: repeat(auto-fill, minmax(min(90px, 55px), 1fr));gap: .5rem;} .collections .collect{position:relative;border:1px solid var(--contentBd-color);border-radius: var(--contentBd-radiusA);display:flex; flex-flow:column wrap;justify-content:center;align-items:center; font-size: x-large; white-space:nowrap;text-overflow:ellipsis;width:auto} .collect .content{flex-grow:1;height:100%; width:100%; display: flex;justify-content: center;align-items: center;cursor:pointer;} .arB button{position:relative;border-radius:99em;padding:0; cursor:pointer;width:50px; height:50px;display:flex;justify-content: center;align-items: center;} .arB button::after{content:attr(data-text);display:none;transition: opacity .15s;} .collect .name{opacity:0;visibility:hidden}.collect .name:not(.hidden), .arB button:hover::after {position: absolute;display:block;top: -2rem;left: auto;right: auto;font-size: .8rem; padding: .2rem 1rem; border-radius: var(--inputBd-radius); white-space: nowrap; z-index: 10; background:#000;color:#fff;text-align:center}.collect .name{width:auto;margin:0!important} .collect:hover>.name{visibility:visible;opacity:1;}.arB button:hover::after{width:80px;} .collect.cols-1{grid-column: span 1;} .collect.cols-2{grid-column: span 2;} .collect.cols-3{grid-column: span 3;} .collect.cols-4{grid-column: span 4;} .collect.cols-5{grid-column: span 5;} .collect.rows-1{grid-row: span 1;} .collect.rows-2{grid-row: span 2;} .collect.rows-3{grid-row: span 3;} .collect.rows-4{grid-row: span 4;} .collect.rows-5{grid-row: span 5;}
/* p post */ /* title */ .pT .name{margin:0} .pT .name:not(.item){font:var(--postTitle-fontWg) var(--postTitle-fontItems)/1.3 var(--fontBody-alt);} .pT .item{font:var(--postTitle-fontWg) var(--postTitle-font)/1.3 var(--fontBody-alt);font-weight:600;} .pT a:hover{text-decoration:underline} .subtitle{font-family:var(--fontBody-alt);font-weight:500; font-size:large;line-height:1.5} /* snippet */ .pS .snippet{margin-block:.75em .5em; line-height:1.5} .pS:not(.noImage) .snippet{display:-webkit-box} /* description */ .pD{margin-block:15px 25px; font:var(--postDescription-font)/1.4 var(--fontBody-alt)} /* component */ .pE{position:relative;margin-top:40px; font:var(--postBody-font)/var(--lineHeight) var(--fontBody); transition:font var(--tDuration)} /* head */ .pE h1, .pE h2, .pE h3, .pE h4, .pE h5, .pE h6{margin-top:1.5em; line-height:1.3;font-family:var(--fontBody-alt);font-weight:500;} .pE h1:target, .pE h2:target, .pE h3:target, .pE h4:target, .pE h5:target, .pE h6:target{margin-top:0;padding-top:var(--headerHeight)} .pE :is(h1, h2, h3, h4, h5, h6).h::before{content:attr(data-text)}
/* Paragraph */ .pE p{margin-block-start:var(--lineSpacing);margin-block-end:0} .pRef{font:1rem/1.4 var(--fontBody-alt); opacity:.8;word-break:break-word} .pRef ol, .pRef ul{padding-inline-start:30px} .pIndent{text-indent:2.2em} .pE:not(.r) .dropCap{float:left;margin-block-start:5px;margin-inline-end:8px; font:3.4em/45px var(--fontBody-alt)} .pE hr{margin-block:var(--postBreak); border:0; font:24px var(--fontCode)} .pE hr::before{content:'\007E'; display:block; letter-spacing:.6em;text-indent:.6em;text-align:center; opacity:.8;clear:both} .pE hr.dot::before{content:'\2027 \2027 \2027'} .pE hr.line::before{content:'';border-bottom:1px solid var(--contentBd-color)} /* blockquote */ blockquote{position:relative; margin-inline:0;padding-block:8px;padding-inline-start:20px;border-inline-start:1px solid var(--contentBd-color); font-size:.97em;line-height:1.6; opacity:.8} blockquote.s-1, details.sp{padding-block:1.7em;padding-inline-start:40px; border-block:1px solid var(--contentBd-color);border-inline-start:0} blockquote.s-1::before{content:'\201D'; position:absolute;top:5px; font-size:60px;line-height:normal;opacity:.5} .pE:not(.r) blockquote.s-1::before{left:4px} .pE.r blockquote.s-1::before{right:4px} .pInf{display: flex;max-width: 480px;margin: 30px 0;padding: 15px;background: #fffdfc;border: 1px solid #e6e6e6; border-radius: 8px;box-shadow: 0 10px 25px -3px rgba(0, 0, 0, .1); gap:1rem}.pInf .pDesc{font-family:var(--fontBody);line-height:1.6em}.uni, .p\:uni{font-family: var(--fontUni)} .emo, .p\:emo{font-family: var(--fontEmo)}
/* img */ .pE img, .cm img{display:inline-block; border-radius:var(--postImageBd-radius)} /* scroll-img */ .psImg{--gap:14px; display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:var(--gap); margin-block:var(--lineSpacing)} .psImg img{display:block} .psImg >*{width:calc((100% / 2) - (var(--gap) / 2)); position:relative} .scImg >*{width:calc((100% / 3) - (var(--gap) * 2/3))} .btImg label{display:flex;align-items:center;justify-content:center; position:absolute;top:0;left:0;right:0;bottom:0; font-size:.93rem;font-family:var(--fontBody-alt); border-radius:var(--postImageBd-radius); color:#d9e2f0;background-color:var(--themeBg-pop); transition:var(--tShowHide); -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px)} .hdImg .shImg{width:100%; margin-block:0} .inImg:not(:checked) ~ .hdImg .shImg{display:none} .inImg:checked ~ .hdImg .btImg label{opacity:0;visibility:hidden} /* caption */ figure{margin-inline:0} figcaption, .tr-caption, .psCaption{display:block;margin-top:8px; font-size:small;line-height:1.3; opacity:.8} /* ad */ .Blog ~ .LinkList{display:none} .pE .widget, .post .nAd >*{margin-block:40px} /* Note */ .note{position:relative; padding:18px 20px;padding-inline-start:40px;border-radius:var(--contentBd-radius); color:var(--noteC);background-color:var(--noteBg); font:14px/1.4 var(--fontBody-alt); overflow:hidden} .note::after{content:var(--noteAfter); position:absolute;top:12px; min-width:15px;text-align:center; font-size:1.5rem} .note.wr{color:var(--warnC);background-color:var(--warnBg)} .note.wr::after{content:var(--warnAfter)} .nB:not(.r) .note::after{left:14px} .nB.r .note::after{right:14px} /* list */ .step{counter-reset:num; line-height:1.6} .step >li{position:relative;counter-increment:num; padding-inline-start:45px} .step >li:not(:last-child){padding-bottom:15px} .step >li::before{content:counter(num) '.'; display:flex;align-items:center;justify-content:center; position:absolute;top:0;width:30px;height:30px;border:1px solid var(--stepC);border-radius:50%; color:currentColor;font:small var(--fontBody-alt); transition:background var(--tDuration), color var(--tDuration)} .pE:not(.r) .step >li::before{left:0} .pE.r .step >li::before{right:0} .step >li:hover::before{background-color:var(--stepC);color:var(--stepHover)} .step >li::after{content:''; position:absolute;top:calc(30px + 8px);bottom:8px; border-inline-start:1px solid var(--stepC)} .pE:not(.r) .step >li::after{left:calc(30px / 2)} .pE.r .step >li::after{right:calc(30px / 2)} .step img{margin-top:1.2em} /* list - pros, cons */ .pros, .cons{margin-block:5px 15px;padding-inline-start:10px; font-size:1.02rem;line-height:1.5} .pros li, .cons li{margin-bottom:10px;padding-inline-start:10px} .pros li::marker{content:'\002B'} .cons li::marker{content:'\2212'}.hero.thumbnail{margin-top:4.5rem} .hero img{border-radius:1.23rem}
/* Widget: Blog */ .blogP.flex{--gap:20px;gap:40px var(--gap)} .blogP.flex >article{gap:.5rem; width:calc((100% / 3) - (var(--gap) * 2/3))} .blogP.flex >article, .itemP.featured article{padding:var(--postPadding);border:var(--postBd-line) solid var(--postBd-color);border-radius:var(--postBd-radius); color:var(--postC);background-color:var(--postBg); box-shadow:0 8px 24px -4px var(--postBs-color); transition:box-shadow var(--tDuration); overflow:hidden} .blogP.flex >article:hover, .itemP.featured article:hover{box-shadow:0 20px 60px -20px var(--postBs-hoverColor)} .blogP.flex >article .pC, .itemP.featured article .pC{padding:var(--postPadding-content);padding-block-start:0} article.shop .prices{margin-block-start:.5em; line-height:1.2} article.shop .prices i{font-style:normal} article.shop .prices i.strike{opacity:.8; font-size:smaller} article.shop .prices i:not(.strike){display:block; color:var(--themeLink); font-weight:600;font-size:1.1em} article:not(.sponsor):hover .pF .jump{opacity:1}
/* Widget: Blog - title + breadcrumbs */ .blogT{align-items:baseline;justify-content:space-between; margin-bottom:var(--widgetTitle-space)} .blogT.home .title{margin:0} .blogT.item{justify-content:flex-start} .blogT.item .tab .n >*{overflow:hidden;text-overflow:ellipsis} .blogT.item .a::before{display:none} .blogT.item .tab:not(:first-child)::before, .blogT:not(.item) .n:not(.s)::before{content:var(--breadcrumbs); flex-shrink:0; margin-inline:8px} .blogT .tab{align-items:baseline; overflow:hidden} .blogT .a{flex-shrink:0; opacity:.8} .blogT .a::before{content:attr(data-text)} .blogT .n.name::after{content:attr(data-text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .blogT .n.s{padding-inline-start:5px}.navF{margin:1.5rem auto 2.5rem;font-size:125%;max-width:180px;justify-content:center;}.nav-a{border-radius:99em;background:var(--gradient2);padding:.5rem;color:#fff;justify-content:center;flex-flow:row nowrap;display:flex;} .navF a{background-color:var(--lightBg);padding:.75rem 0;width:60px;text-align:center;display:inline-block} .navF .Home{border-left:1px solid var(--contentBd-color);border-right:1px solid var(--contentBd-color)} .navF a.dis{color:var(--lightBg-pop)} .navF a:hover{background:transparent;color:#fff}.navF .Prev{border-radius:99em 0 0 99em}.navF .Next{border-radius:0 99em 99em 0}
/* gradientTxt */ .gradientTxt {-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-box-decoration-break: clone;display: inline !important;} .g-txt1{background-image:var(--gradient1)} .g-txt2{background-image:var(--gradient2)} .g-txt3{background-image:var(--gradient3)}
/* Responsive */
@media screen and (max-width:896px){
/* Blog */ .blogP.flex >article{width:50%}
}
@media screen and (max-width:640px){
.nB {
--contentPadding:.75rem;
}
/* Header and Menu */ .mainH{flex-direction:column;height:auto;gap:0} .headL,.headR{width:100%;} .headL{height:var(--headerHeight);justify-content: space-between;} .headR{justify-content: flex-end;flex-direction:column;padding-inline:10px} .menuMo{display:flex;align-items:center;height:var(--headerHeight);margin-right:var(--contentPadding);position:absolute;top:0;right:0} .navH{display:none} .navS:checked ~ .navH {display:block;} .navH ul{gap:0} .navH ul li{margin:0 .35rem var(--gapH)} .navH ul li a{padding:.25rem;margin:0}
/* mainTranslator */ .mainTranslator{flex-direction:column!important} .mainTranslator .mainT{max-width:100%;height:300px} .mainTranslator .mainT.contentA{height:125px}
/* Blog */ .blogP.flex >article{width:100%}
}