/* Design System - Style 1 */ /* Google Fonts Import */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&family=Raleway:wght@300;400;500;600;700&family=Lato:wght@300;400;700&family=Roboto+Slab:wght@300;400;500;700&family=Work+Sans:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@300;400;500;700&display=swap'); :root { /* Accent Color System */ --a1: #2563eb; --a1l: #3b82f6; --a1d: #1d4ed8; /* Accent 2 (teal, secondary) */ --a2: #14b8a6; /* base */ --a2l: #2dd4bf; /* lighter */ --a2d: #0f766e; /* darker */ /* Accent 3 (orange, tertiary) */ --a3: #fb923c; /* base */ --a3l: #fdba74; /* lighter */ --a3d: #ea580c; /* darker */ /* Semantic Colors */ --green: #10b981; --yellow: #f59e0b; --red: #ef4444; --blue: #06b6d4; --purple: #8b5cf6; /* Neutral Colors */ --white: #ffffff; --g1: #f8fafc; --g2: #f1f5f9; --g3: #e2e8f0; --g4: #cbd5e1; --g5: #94a3b8; --g6: #64748b; --g7: #475569; --g8: #334155; --g9: #1e293b; --g10: #0f172a; --black: #000000; /* Background Colors */ --bg1: var(--white); --bg2: var(--g1); --bg3: var(--g2); --bg4: var(--g10); /* Text Colors */ --t: var(--g10); --tl: var(--g7); --tll: var(--g6); --tw: var(--white); --ta: var(--white); /* Border Colors */ --b1: var(--g3); --b2: var(--g4); --b3: var(--a1); --b4: var(--red); /* Spacing Scale */ --s1: 4px; /* 0.25rem; */ --s2: 8px; /* 0.5rem; */ --s3: 12px; /* 0.75rem; */ --s4: 16px; /* 1rem; */ --s5: 20px; /* 1.25rem; */ --s6: 24px; /* 1.5rem; */ --s7: 28px; /* 1.75rem; */ --s8: 32px; /* 2rem; */ --s10:40px; /* 2.5rem; */ --s12:48px; /* 3rem; */ --s16:64px; /* 4rem; */ --s20:80px; /* 5rem; */ /* Typography Scale (base 10px) */ --t1: 1rem; /* 10px */ --t2: 1.2rem; /* 12px */ --t3: 1.3rem; /* 13px */ --t4: 1.4rem; /* 14px */ --t5: 1.5rem; /* 15px */ --t6: 1.6rem; /* 16px */ --t7: 1.8rem; /* 18px */ --t8: 2rem; /* 20px */ --t9: 2.4rem; /* 24px */ --t10: 2.8rem; /* 24px */ --t11: 3.2rem; /* 32px */ --t12: 3.6rem; /* 36px */ --t13: 4rem; /* 40px */ --t14: 4.4rem; /* 44px */ --t15: 5rem; /* 50px */ --t16: 6rem; /* 60px */ /* Font Weights */ --w1: 300; --w2: 400; --w3: 500; --w4: 600; --w5: 700; /* Line Heights */ --lh10: 1.0; --lh12: 1.2; --lh14: 1.4; --lh16: 1.6; --lh18: 1.8; --lh20: 2.0; --lh24: 2.4; --lh30: 3; /* Shadows */ --sh1: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --sh2: 0 2px 8px rgba(0, 0, 0, 0.1); --sh3: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --sh4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Transitions */ --tr1: 0.3s ease-out; --tr2: 0.5s ease-out; --tr3: 0.7s ease-out; /* Z-index Scale */ --z1: 1000; --z2: 1020; --z3: 1030; --z4: 1040; --z5: 1050; --z6: 1060; --z7: 1070; /* Color palette - based on semantic colors */ /* Red shades - based on #ef4444 */ --red1:#fca5a5; --red2:#fee2e2; --red3:#fbbcbc; --red4:#dc2626; --red5:#991b1b; /* Orange shades */ --orange1:#fdba74; --orange2:#fed7aa; --orange3:#fb923c; --orange4:#ea580c; --orange5:#9a3412; /* Yellow shades - based on #f59e0b */ --yellow1:#fcd34d; --yellow2:#fef3c7; --yellow3:#fbbf24; --yellow4:#d97706; --yellow5:#92400e; /* Green shades - based on #10b981 */ --green1:#86efac; --green2:#d1fae5; --green3:#34d399; --green4:#059669; --green5:#065f46; /* Teal/Mint shades */ --teal1:#5eead4; --teal2:#ccfbf1; --teal3:#2dd4bf; --teal4:#0d9488; --teal5:#115e59; /* Blue shades - based on #06b6d4 and #2563eb */ --blue1:#60a5fa; --blue2:#dbeafe; --blue3:#93c5fd; --blue4:#2563eb; --blue5:#1e40af; /* Light Blue/Sky shades */ --sky1:#7dd3fc; --sky2:#e0f2fe; --sky3:#38bdf8; --sky4:#0284c7; --sky5:#075985; /* Purple shades - based on #7c3aed */ --purple1:#a78bfa; --purple2:#ede9fe; --purple3:#c4b5fd; --purple4:#7c3aed; --purple5:#5b21b6; /* Pink shades */ --pink1:#f9a8d4; --pink2:#fce7f3; --pink3:#fbcfe8; --pink4:#ec4899; --pink5:#be185d; /* Gray shades */ --gray1:#94a3b8; --gray2:#f1f5f9; --gray3:#cbd5e1; --gray4:#64748b; --gray5:#334155; /* Gray transparent */ --gray10: rgba(0, 0, 0, 0.1); --gray20: rgba(0, 0, 0, 0.2); --gray30: rgba(0, 0, 0, 0.3); --gray40: rgba(0, 0, 0, 0.4); --gray50: rgba(0, 0, 0, 0.5); --gray60: rgba(0, 0, 0, 0.6); --gray70: rgba(0, 0, 0, 0.7); --gray80: rgba(0, 0, 0, 0.8); --gray90: rgba(0, 0, 0, 0.9); /* Tag colors */ --tag-default: var(--g3); } /* Dark Mode Variables */ /* @media (prefers-color-scheme: dark) { :root { --bg1: var(--g10); --bg2: var(--g9); --bg3: var(--g8); --bg4: var(--white); --t: var(--white); --tl: var(--g4); --tll: var(--g5); --tw: var(--g10); --b1: var(--g8); --b2: var(--g7); } } */ /* Typography - Direct Tag Styling */ * { font-size: inherit; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Meiryo, 'Yu Gothic', Roboto, 'Hiragino Kaku Gothic ProN', "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; background-repeat: no-repeat; } html {margin:0; padding:0; min-height:100%; width:100%; font-size: 10px; background-color: var(--white);} body {font-size: var(--t3); color: var(--t); background-color: var(--bg2); margin: 0; min-height: 100vh;} /* to set default padding, margin, use tag=mx-text type=tagName instead */ h1 { font-size: var(--t9); color:var(--t); font-weight: var(--w5); line-height: var(--lh16); margin: var(--s2) 0; padding: 0; text-align: left;} h2 { font-size: var(--t7); color:var(--t); font-weight: var(--w4); line-height: var(--lh16); margin: var(--s2) 0; padding: 0; text-align: left;} h3 { font-size: var(--t5); color:var(--t); font-weight: var(--w4); line-height: var(--lh12); margin: 0; padding: 0; text-align: left;} h4 { font-size: var(--t4); color:var(--t); font-weight: var(--w4); line-height: var(--lh12); margin: 0; padding: 0; white-space: nowrap; text-align: left;} h5 { font-size: var(--t3); color:var(--t); font-weight: var(--w3); line-height: var(--lh10); margin: 0; padding: 0; white-space: nowrap; text-align: left;} h6 { font-size: var(--t2); color:var(--t); font-weight: var(--w3); line-height: var(--lh10); margin: 0; padding: 0; white-space: nowrap; text-align: left;} p { margin: 0; line-height: var(--lh20); color:var(--t);} cite {font-style: normal; color:var(--g5); font-size: var(--t1);display: inline-flex;align-items: center;gap:4px;padding:2px 0;height:var(--s5);line-height:(--s5);} cite:empty {display: none;} cite u.error{color:var(--red); padding:2px 0;} h4:empty {display: none;} h4.required{display: inline-flex; align-items: center; gap:4px; opacity: 0.8;width: fit-content;} h4.required::after {content: "REQUIRED";padding:2px 4px;background-color: var(--red);color:white;font-size:0.8rem;border-radius: 2px;height: fit-content;flex-shrink: 0; } h4.bold span {font-weight: var(--w5);font-size:inherit;} h4 span,h4 label{font-weight: var(--w4);font-size:inherit;} .valid h4.required:after{background-color: var(--green);} .valid cite:after{content:"✓";display:inline-block;font-size:var(--t1);font-weight:bold;color:white;background-color: var(--green);width:var(--s3);height:var(--s3);line-height: var(--s3);border-radius: var(--s2); text-align: center;opacity: 0.8;} body[lang=ja] h4.required::after {content: "必須"; } small { font-size: var(--t1); color: var(--tll); } strong { font-weight: var(--w4); } em { font-style: italic; } label,span,small,strong,em,.ph,.ph-thin,.ph-fill,.ph-duotone{color:var(--t);} a{color:var(--a1);} a:visited{color: var(--a1);} .wrap {white-space: normal !important; } .nowrap {white-space: nowrap !important; } .fwrap {flex-wrap: wrap;} .fnowrap {flex-wrap: nowrap;} .ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .wordbreak {word-break: break-all;} /* Button Styles - Direct Tag Styling */ button { display: inline-flex; align-items: center; justify-content: center; padding: var(--s3) var(--s4); font-size: var(--t4); font-weight: var(--w3); border-radius: var(--s2); border: 1px solid var(--a1); background-color: var(--a1); color: var(--white); cursor: pointer; transition: all var(--tr1); text-decoration: none; font-family: inherit; white-space: nowrap; } button:hover { background-color: var(--a1d); border-color: var(--a1d); transform: translateY(-1px); } button:active { transform: translateY(0); } button:disabled, div.switch.disabled { opacity: 0.6; cursor: not-allowed; transform: none; } button.alt { background-color: var(--bg1); color: var(--t); border-color: var(--b1); } button.alt:hover { background-color: var(--bg2); } button.ok { background-color: var(--green); border-color: var(--green); } button.warn { background-color: var(--yellow); border-color: var(--yellow); } button.err { background-color: var(--red); border-color: var(--red); } button.small { padding: var(--s2) var(--s3); font-size: var(--t2); } button.large { padding: var(--s3) var(--s6); font-size: var(--t4); } /* Form Styles - Direct Tag Styling */ form {padding:var(--s4);display:flex; flex-direction: column; gap: var(--s2);background:var(--bg1);} label { display: block; font-size: var(--t3); font-weight: var(--w3); color: var(--t); white-space: nowrap; } input, textarea, select { padding: var(--s2); border: 1px solid var(--b1); font-size:var(--t3); border-radius: var(--r2); background-color: var(--bg1); color: var(--t); transition: all var(--tr1); outline: none;} input.small, select.small {transform: scale(0.8);} input:focus, textarea:focus, select:focus { outline: none; border-color: var(--b3); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } input:invalid, textarea:invalid, select:invalid { border-color: var(--b4); } input[type="color"] {border:0; padding:0; border-radius: 4px; height: 3.2rem;} select {cursor: pointer;} textarea { resize: vertical; min-height: 100px; } fieldset { border: 1px solid var(--b1); border-radius: var(--s1); padding: 0; margin: 0; } legend { padding: 0 var(--s2); font-weight: var(--w3); color: var(--tl); } .pointer {cursor: pointer;} /* .pointer *{pointer-events: none;} */ .hover-a1,.hover-b1,.hover-bg1,.hover-s1{transition: all var(--tr1);} .hover-a1:hover {color: var(--a1);} .hover-b1:hover {border-color: var(--a1);} .hover-bg1:hover {background-color: var(--g2);} .hover-s1:hover {transform: scale(1.1);} /* Common HTML Elements */ article { background-color: var(--bg1); border: 1px solid var(--b1); border-radius: var(--s2); box-shadow: var(--sh1); overflow: hidden; margin:0; } article > header { padding: var(--s4) var(--s6); border-bottom: 1px solid var(--b1); background-color: var(--bg2); } article > header:empty { display: none; } article > main { padding: var(--s6); overflow:auto; height:100%;} article > main.full {padding:0} article > footer { padding: var(--s4) var(--s6); border-top: 1px solid var(--b1); background-color: var(--bg2); } section { margin: 0; } aside { background-color: var(--bg2); border-radius: var(--s1); border: 1px solid var(--b1); } blockquote { border-left: 4px solid var(--a1); padding: var(--s2) var(--s4); margin: 0; background-color: var(--bg2); color: var(--tl); font-style: italic; } code { background-color: var(--g3); padding: var(--s3) var(--s4); border-radius: var(--s1); font-family: 'Monaco', 'Courier New', monospace; font-size: var(--t2); } pre { background-color: var(--g3); padding: var(--s2) var(--s4);; border-radius: var(--s1); overflow-x: auto; margin: var(--s4) 0; } pre code { background: none; padding: 0; } hr { border: none; height: 1px; background-color: var(--b1); margin: var(--s2) 0; } table { width: 100%; border-collapse: collapse; margin: 0; } th, td { padding: var(--s2) var(--s3); text-align: left; border-bottom: 1px solid var(--b1); font-size: var(--t3);} th { background-color: var(--bg2); font-weight: var(--w4); color: var(--t); } img {border: 0px;} figure{margin:0;} /* Lists & Layout*/ ul, ol { list-style: none; margin: 0; padding: 0; list-style: none;} li { line-height: var(--lh14); font-size: var(--t3);} dl, dd, dt {margin:0; font-size: var(--t3);} dl {display: flex; flex-direction: row;} /* for icons */ i {display: inline-block; background-position:center; cursor: pointer; transition: all var(--tr1);} i.empty { display: none;} /* official classes */ article.view {display: flex;flex-direction: column;height: 100%;width: 100%;} article#mask {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;right: 0;bottom: 0;margin: 0;border: 0;padding: 0;text-align: center;z-index: 200;background-color: rgba(0, 0, 0, 0.2);} .hbox {display: flex !important; flex-direction: row !important;} .vbox {display: flex !important; flex-direction: column !important;} .block {display: block !important;} .inline {display: inline !important;} .iblock {display: inline-block !important;} .relative {position: relative !important;} .absolute {position: absolute !important;} .z1 {z-index: var(--z1) !important;} .fixed {position: fixed !important;} .op1 {opacity: 0.1 !important;} .op5 {opacity: 0.5 !important;} .op10 {opacity: 1 !important;} .hidden {display: none !important;} [hidden] {display: none !important;} .empty:empty {display: none !important;} .space {flex: 1;} .gap1 {gap:var(--s1) !important;} .gap2 {gap:var(--s2) !important;} .gap3 {gap:var(--s3) !important;} .gap4 {gap:var(--s4) !important;} .gap5 {gap:var(--s5) !important;} .gap6 {gap:var(--s6) !important;} .gap7 {gap:var(--s7) !important;} .gap8 {gap:var(--s8) !important;} .ph0 {padding-left:0 !important;padding-right:0 !important;} .pv0 {padding-top:0 !important;padding-bottom:0 !important;} .ph1 {padding-left:var(--s1) !important;padding-right:var(--s1) !important;} .pv1 {padding-top:var(--s1) !important;padding-bottom:var(--s1) !important;} .ph2 {padding-left:var(--s2) !important;padding-right:var(--s2) !important;} .pv2 {padding-top:var(--s2) !important;padding-bottom:var(--s2) !important;} .ph3 {padding-left:var(--s3) !important;padding-right:var(--s3) !important;} .pv3 {padding-top:var(--s3) !important;padding-bottom:var(--s3) !important;} .ph4 {padding-left:var(--s4) !important;padding-right:var(--s4) !important;} .pv4 {padding-top:var(--s4) !important;padding-bottom:var(--s4) !important;} .ph5 {padding-left:var(--s5) !important;padding-right:var(--s5) !important;} .pv5 {padding-top:var(--s5) !important;padding-bottom:var(--s5) !important;} .ph6 {padding-left:var(--s6) !important;padding-right:var(--s6) !important;} .pv6 {padding-top:var(--s6) !important;padding-bottom:var(--s6) !important;} .ph7 {padding-left:var(--s7) !important;padding-right:var(--s7) !important;} .pv7 {padding-top:var(--s7) !important;padding-bottom:var(--s7) !important;} .ph8 {padding-left:var(--s8) !important;padding-right:var(--s8) !important;} .pv8 {padding-top:var(--s8) !important;padding-bottom:var(--s8) !important;} .p0 {padding:0 !important;} .mh0 {margin-left:0 !important;margin-right:0 !important;} .mv0 {margin-top:0 !important;margin-bottom:0 !important;} .mh1 {margin-left:var(--s1) !important;margin-right:var(--s1) !important;} .mv1 {margin-top:var(--s1) !important;margin-bottom:var(--s1) !important;} .mh2 {margin-left:var(--s2) !important;margin-right:var(--s2) !important;} .mv2 {margin-top:var(--s2) !important;margin-bottom:var(--s2) !important;} .mh3 {margin-left:var(--s3) !important;margin-right:var(--s3) !important;} .mv3 {margin-top:var(--s3) !important;margin-bottom:var(--s3) !important;} .mh4 {margin-left:var(--s4) !important;margin-right:var(--s4) !important;} .mv4 {margin-top:var(--s4) !important;margin-bottom:var(--s4) !important;} .mh5 {margin-left:var(--s5) !important;margin-right:var(--s5) !important;} .mv5 {margin-top:var(--s5) !important;margin-bottom:var(--s5) !important;} .mh6 {margin-left:var(--s6) !important;margin-right:var(--s6) !important;} .mv6 {margin-top:var(--s6) !important;margin-bottom:var(--s6) !important;} .mh7 {margin-left:var(--s7) !important;margin-right:var(--s7) !important;} .mv7 {margin-top:var(--s7) !important;margin-bottom:var(--s7) !important;} .mh8 {margin-left:var(--s8) !important;margin-right:var(--s8) !important;} .mv8 {margin-top:var(--s8) !important;margin-bottom:var(--s8) !important;} .mt0 {margin-top:0 !important;} .mt1 {margin-top:var(--s1) !important;} .mt2 {margin-top:var(--s2) !important;} .mt3 {margin-top:var(--s3) !important;} .mt4 {margin-top:var(--s4) !important;} .mt5 {margin-top:var(--s5) !important;} .mt6 {margin-top:var(--s6) !important;} .mt7 {margin-top:var(--s7) !important;} .mt8 {margin-top:var(--s8) !important;} .mb0 {margin-bottom:0 !important;} .mb1 {margin-bottom:var(--s1) !important;} .mb2 {margin-bottom:var(--s2) !important;} .mb3 {margin-bottom:var(--s3) !important;} .mb4 {margin-bottom:var(--s4) !important;} .mb5 {margin-bottom:var(--s5) !important;} .mb6 {margin-bottom:var(--s6) !important;} .mb7 {margin-bottom:var(--s7) !important;} .mb8 {margin-bottom:var(--s8) !important;} .mauto {margin-left:auto;margin-right:auto;} .w0 {min-width: 0;} .w20 {width: 20px;min-width: 20px;} .w40 {width: 40px;min-width: 40px;} .w60 {width: 60px;min-width: 60px;} .w80 {width: 80px;min-width: 80px;} .w100 {width: 100px;min-width: 100px;} .w120 {width: 120px;min-width: 120px;} .w140 {width: 140px;min-width: 140px;} .w160 {width: 160px;min-width: 160px;} .w180 {width: 180px;min-width: 180px;} .w200 {width: 200px;min-width: 200px;} .w220 {width: 220px;min-width: 220px;} .w240 {width: 240px;min-width: 240px;} .w280 {width: 280px;min-width: 280px;} .w320 {width: 320px;min-width: 320px;} .w360 {width: 320px;min-width: 320px;} .w400 {width: 400px;min-width: 400px;} .w480 {width: 480px;min-width: 480px;} .w600 {width: 600px;min-width: 600px;} .w640 {width: 640px;min-width: 640px;} .w680 {width: 680px;min-width: 680px;} .w720 {width: 720px;min-width: 720px;} .w800 {width: 800px;min-width: 800px;} .w980 {width: 980px;min-width: 980px;} .w40vw {width: 40vw;min-width: 40vw;} .w60vw {width: 60vw;min-width: 60vw;} .w80vw {width: 80vw;min-width: 80vw;} .w100vw {width: 100vw;min-width: 100vw;} .w80p{width:80%} .w100p{width:100%} .wf{width:100%;min-width:100%;} .wauto{width:auto !important;max-width:fit-content;min-width:fit-content;} .wmax50{max-width:50%;} .minh0{min-height:0;} .minh20{min-height:20px;} .minh40{min-height:40px;} .minh60{min-height:60px;} .minh80{min-height:80px;} .minh100{min-height:100px;} .minh120{min-height:120px;} .minh140{min-height:140px;} .minh160{min-height:160px;} .minh180{min-height:180px;} .minh200{min-height:200px;} .minh240{min-height:240px;} .minh280{min-height:280px;} .minh320{min-height:320px;} .minh360{min-height:360px;} .minh400{min-height:400px;} .minh480{min-height:480px;} .minh600{min-height:600px;} .minh640{min-height:640px;} .minh680{min-height:680px;} .minh720{min-height:720px;} .minh800{min-height:800px;} .minh980{min-height:980px;} .minw0{min-width:0;} .minw20{min-width:20px;} .minw40{min-width:40px;} .minw60{min-width:60px;} .minw80{min-width:80px;} .minw100{min-width:100px;} .minw120{min-width:120px;} .minw140{min-width:140px;} .minw160{min-width:160px;} .minw180{min-width:180px;} .minw200{min-width:200px;} .minw240{min-width:240px;} .minw280{min-width:280px;} .minw320{min-width:320px;} .minw360{min-width:360px;} .minw400{min-width:400px;} .minw480{min-width:480px;} .minw600{min-width:600px;} .minw640{min-width:640px;} .minw680{min-width:680px;} .minw720{min-width:720px;} .minw800{min-width:800px;} .minw980{min-width:980px;} .h16 {height: 16px;min-height: 16px;line-height: 16px;} .h20 {height: 20px;min-height: 20px;line-height: 20px;} .h24 {height: 24px;min-height: 24px;line-height: 24px;} .h28 {height: 28px;min-height: 28px;line-height: 28px;} .h32 {height: 32px;min-height: 32px;line-height: 32px;} .h36 {height: 36px;min-height: 36px;line-height: 36px;} .h40 {height: 40px;min-height: 40px;line-height: 40px;} .h44 {height: 44px;min-height: 44px;line-height: 44px;} .h48 {height: 48px;min-height: 48px;line-height: 48px;} .h54 {height: 54px;min-height: 54px;line-height: 54px;} .h60 {height: 60px;min-height: 60px;line-height: 60px;} .h80 {height: 80px;min-height: 80px;line-height: 80px;} .h100 {height: 100px;min-height: 100px;} .h120 {height: 120px;min-height: 120px;} .h140 {height: 140px;min-height: 140px;} .h160 {height: 160px;min-height: 160px;} .h180 {height: 180px;min-height: 180px;} .h200 {height: 200px;min-height: 200px;} .h240 {height: 240px;min-height: 240px;} .h280 {height: 280px;min-height: 280px;} .h320 {height: 320px;min-height: 320px;} .h360 {height: 320px;min-height: 320px;} .h400 {height: 400px;min-height: 400px;} .h480 {height: 480px;min-height: 480px;} .h540 {height: 540px;min-height: 540px;} .h600 {height: 600px;min-height: 600px;} .h40vh {height: 40vh;min-height: 40vh;} .h60vh {height: 60vh;min-height: 60vh;} .h80vh {height: 80vh;min-height: 80vh;} .h100vh {height: 100vh;min-height: 100vh;} .hf{height:100%;min-height:100%;} .hauto{height:auto !important;max-height:fit-content;min-height:fit-content;} .hmax540{max-height:540px;} .f1{flex:1;} .b0{border:0px !important;} .b1{border:1px solid var(--b1) !important;} .b1_top{border:0 !important;border-top:1px solid var(--b1) !important;} .b1_left{border:0 !important;border-left:1px solid var(--b1) !important;} .b1_right{border:0 !important;border-right:1px solid var(--b1) !important;} .b1_bottom{border:0 !important;border-bottom:1px solid var(--b1) !important;} .br1{border-radius:var(--s1) !important;} .br2{border-radius:var(--s2) !important;} .br3{border-radius:var(--s3) !important;} .br4{border-radius:var(--s4) !important;} .br5{border-radius:var(--s5) !important;} .br6{border-radius:var(--s6) !important;} .br7{border-radius:var(--s7) !important;} .br8{border-radius:var(--s8) !important;} .bw0{border-width:0px !important;} .bw1{border-width:1px !important;} .bw2{border-width:2px !important;} .bw3{border-width:3px !important;} .bw4{border-width:4px !important;} .bw5{border-width:5px !important;} .bw6{border-width:6px !important;} .bw7{border-width:7px !important;} .bw8{border-width:8px !important;} .br-none{border:0 !important;} .sh-none, .sh0{box-shadow: none !important;} .sh1{box-shadow: var(--sh1) !important;} .sh2{box-shadow: var(--sh2) !important;} .sh3{box-shadow: var(--sh3) !important;} .sh4{box-shadow: var(--sh4) !important;} .tl{text-align: left !important;} .tc{text-align: center !important;} .tr{text-align: right !important;} .hbox.hl,.vbox.vl,dl.hl{justify-content: flex-start !important;} .hbox.hc,.vbox.vc,dl.hc{justify-content: center !important;} .hbox.hr,.vbox.vr,dl.hr{justify-content: flex-end !important;} .hbox.hs,.vbox.vs,dl.hs{justify-content: stretch !important;} .hbox.hbt,.vbox.vbt{justify-content: space-between !important;} .hbox.hev,.vbox.vev{justify-content: space-evenly !important;} .hbox.vt,.vbox.hl{align-items: flex-start !important;} .hbox.vc,.vbox.hc{align-items: center !important;} .hbox.vb,.vbox.hr{align-items: flex-end !important;} .hbox.vs,.vbox.hs{align-items: stretch !important;} .hbox.vbt,.vbox.hbt{align-items: space-between !important;} .hbox.vev,.vbox.hev{align-items: space-evenly !important;} .bold{font-weight: bold !important;} .italic{font-style: italic !important;} .underline{text-decoration: underline !important;} .strike{text-decoration: line-through !important;} .solid{border-style: solid !important;} .dashed{border-style: dashed !important;} .dotted{border-style: dotted !important;} .t1{font-size: var(--t1) !important;} .t2{font-size: var(--t2) !important;} .t3{font-size: var(--t3) !important;} .t4{font-size: var(--t4) !important;} .t5{font-size: var(--t5) !important;} .t6{font-size: var(--t6) !important;} .t7{font-size: var(--t7) !important;} .t8{font-size: var(--t8) !important;} .t9{font-size: var(--t9) !important;} .t10{font-size: var(--t10) !important;} .t11{font-size: var(--t11) !important;} .t12{font-size: var(--t12) !important;} .t13{font-size: var(--t13) !important;} .t14{font-size: var(--t14) !important;} .t15{font-size: var(--t15) !important;} .t16{font-size: var(--t16) !important;} .lh10, .lh10>p{line-height: var(--lh10) !important;} .lh12, .lh12>p{line-height: var(--lh12) !important;} .lh14, .lh14>p{line-height: var(--lh14) !important;} .lh16, .lh16>p{line-height: var(--lh16) !important;} .lh18, .lh18>p{line-height: var(--lh18) !important;} .lh20, .lh20>p{line-height: var(--lh20) !important;} .lh24, .lh24>p{line-height: var(--lh24) !important;} .lh30, .lh30>p{line-height: var(--lh30) !important;} .noscroll{overflow: hidden !important;} .hscroll{max-width: 100%; overflow-x: auto;} .vscroll{max-height: 100%; overflow-y: auto;} .scroll-x{overflow-x: auto; -webkit-overflow-scrolling: touch;} .scroll-y{overflow-y: auto; -webkit-overflow-scrolling: touch;} article.popups {background-color: rgba(0, 0, 0, 0.3);border-radius: 0;width: 100vw;height: 100vh;z-index: 10000;display: block;position: fixed;top: 0;left: 0;} article.popups:empty{display: none;} .popup-mask {position: fixed; inset: 0;background: rgba(0, 0, 0, 0);transition: background 0.3s ease;visibility: hidden;z-index: 999;} .popup-mask.active {visibility: visible; background: rgba(0, 0, 0, 0.1);} .popup {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0.7);opacity: 0;visibility: hidden;transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);z-index: 1000;overflow-y:auto;box-shadow: var(--sh2);} .popup > .window > .content {max-height:80vh;} .popup > .window > .content[name="color-pallete"] {background-color: var(--white);} .popup.active {transform: translate(-50%, -50%) scale(1);opacity: 1;visibility: visible;} /* .popup.inactive {opacity: .5;} */ .popup.targeted {position:fixed;top:0;left:0;right:0;bottom:0;background:transparent;transform:none;min-height: 100vh;min-width: 100vw;z-index: 9999;} .popup.targeted.active {transform:none;opacity:1;visibility:visible;} .popup.targeted .window {position:fixed;transform:translateX(-50%) translateY(10px) scale(0.95);opacity:0;} .popup.targeted .window > * {opacity:0;transition:opacity 0.2s ease 0.2s;} .popup.targeted.active .window {animation:targetedBounce 0.4s ease forwards;} .popup.targeted.active .window > * {opacity:1;} .popup i.close{position: absolute; right: var(--s3); top: var(--s3); width:var(--s6); height:var(--s6); border-radius: var(--s3); background-color:rgba(0, 0, 0, 0.5); cursor: pointer; font-size: var(--t3);z-index: 5000;color:white;line-height: var(--s6);text-align: center;} .popup.toast {position: fixed;top: 50%;right: -320px;opacity: 0;transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);} .popup.toast.active {right: 20px;opacity: 1;} .popup.flip-modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) perspective(1000px) rotateX(-90deg);opacity: 0;visibility: hidden;transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);transform-style: preserve-3d;} .popup.flip-modal.active {transform: translate(-50%, -50%) perspective(1000px) rotateX(0);opacity: 1;visibility: visible;} .popup.bottom-sheet {position: fixed;bottom: 0;left: 0;right: 0;transform: translateY(100%);transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);} .popup.bottom-sheet.active {transform: translateY(0);} .popup.popup-backdrop {position: fixed;inset: 0;background: rgba(0, 0, 0, 0);transition: background 0.3s ease;visibility: hidden;} .popup.popup-backdrop.active {background: rgba(0, 0, 0, 0.5);visibility: visible;} .popup.modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -60%);opacity: 0;visibility: hidden;transition: all 0.4s ease;} .popup.modal.active {transform: translate(-50%, -50%);opacity: 1;visibility: visible;} .popup.dialog {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(1.2);opacity: 0;filter: blur(5px);visibility: hidden;transition: all 0.35s ease;} .popup.dialog.active {transform: translate(-50%, -50%) scale(1);opacity: 1;filter: blur(0);visibility: visible;} .tag {background: var(--sky2);color: var(--a1);padding: 2px 8px;border-radius: 4px;font-size: 0.8em;} .nope, .no-event { pointer-events: none; } /*color classes*/ .a1 { background-color: var(--a1) !important; } input { accent-color: var(--a1) !important; } .a1l { background-color: var(--a1l) !important; } input.a1l { accent-color: var(--a1l) !important; } .a1d { background-color: var(--a1d) !important; } input.a1d { accent-color: var(--a1d) !important; } .a2 { background-color: var(--a2) !important; } input.a2 { accent-color: var(--a2) !important; } .a2l { background-color: var(--a2l) !important; } input.a2l { accent-color: var(--a2l) !important; } .a2d { background-color: var(--a2d) !important; } input.a2d { accent-color: var(--a2d) !important; } .a3 { background-color: var(--a3) !important; } input.a3 { accent-color: var(--a3) !important; } .a3l { background-color: var(--a3l) !important; } input.a3l { accent-color: var(--a3l) !important; } .a3d { background-color: var(--a3d) !important; } input.a3d { accent-color: var(--a3d) !important; } .green { background-color: var(--green) !important; color:white; } input.green { accent-color: var(--green) !important; } .yellow { background-color: var(--yellow) !important; color:black; } input.yellow { accent-color: var(--yellow) !important; } .red { background-color: var(--red) !important; color:white; } input.red { accent-color: var(--red) !important; } .blue { background-color: var(--blue) !important; color:white; } input.blue { accent-color: var(--blue) !important; } .white { background-color: var(--white) !important; } input.white { accent-color: var(--white) !important; } .g1 { background-color: var(--g1) !important; } input.g1 { accent-color: var(--g1) !important; } .g2 { background-color: var(--g2) !important; } input.g2 { accent-color: var(--g2) !important; } .g3 { background-color: var(--g3) !important; } input.g3 { accent-color: var(--g3) !important; } .g4 { background-color: var(--g4) !important; } input.g4 { accent-color: var(--g4) !important; } .g5 { background-color: var(--g5) !important; } input.g5 { accent-color: var(--g5) !important; } .g6 { background-color: var(--g6) !important; color:white; } input.g6 { accent-color: var(--g6) !important; } .g7 { background-color: var(--g7) !important; color:white; } input.g7 { accent-color: var(--g7) !important; } .g8 { background: var(--g8); color: var(--g1); } .g9 { background: var(--g9); color: var(--g1); } .g10 { background-color: var(--g10) !important; color: var(--g1); } .black { background-color:black !important; color:white; } input.black { accent-color:black !important; } .transparent{background-color: transparent !important;} .ta1{color: var(--a1) !important; accent-color: var(--a1) !important;} .ta1l{color: var(--a1l) !important; accent-color: var(--a1l) !important;} .ta1d{color: var(--a1d) !important; accent-color: var(--a1d) !important;} .ta2{color: var(--a2) !important; accent-color: var(--a2) !important;} .ta2l{color: var(--a2l) !important; accent-color: var(--a2l) !important;} .ta2d{color: var(--a2d) !important; accent-color: var(--a2d) !important;} .ta3{color: var(--a3) !important; accent-color: var(--a3) !important;} .ta3l{color: var(--a3l) !important; accent-color: var(--a3l) !important;} .ta3d{color: var(--a3d) !important; accent-color: var(--a3d) !important;} .tgreen{color: var(--green) !important; accent-color: var(--green) !important;} .tyellow{color: var(--yellow) !important; accent-color: var(--yellow) !important;} .tred{color: var(--red) !important; accent-color: var(--red) !important;} .tblue{color: var(--blue) !important; accent-color: var(--blue) !important;} .tg1{color: var(--g1) !important; accent-color: var(--g1) !important;} .tg2{color: var(--g2) !important; accent-color: var(--g2) !important;} .tg3{color: var(--g3) !important; accent-color: var(--g3) !important;} .tg4{color: var(--g4) !important; accent-color: var(--g4) !important;} .tg5{color: var(--g5) !important; accent-color: var(--g5) !important;} .tg6{color: var(--g6) !important; accent-color: var(--g6) !important;} .tg7{color: var(--g7) !important; accent-color: var(--g7) !important;} .tg8{color: var(--g8) !important; accent-color: var(--g8) !important;} .tg9{color: var(--g9) !important; accent-color: var(--g9) !important;} .tg10{color: var(--g10) !important; accent-color: var(--g10) !important;} .tblack{color:var(--black) !important; accent-color: var(--black) !important;} .twhite{color:var(--white) !important; accent-color: var(--white) !important;} /* Border classes */ .ba1{border-color: var(--a1) !important; accent-color: var(--a1) !important;} .ba1l{border-color: var(--a1l) !important; accent-color: var(--a1l) !important;} .ba1d{border-color: var(--a1d) !important; accent-color: var(--a1d) !important;} .ba2{border-color: var(--a2) !important; accent-color: var(--a2) !important;} .ba2l{border-color: var(--a2l) !important; accent-color: var(--a2l) !important;} .ba2d{border-color: var(--a2d) !important; accent-color: var(--a2d) !important;} .ba3{border-color: var(--a3) !important; accent-color: var(--a3) !important;} .ba3l{border-color: var(--a3l) !important; accent-color: var(--a3l) !important;} .ba3d{border-color: var(--a3d) !important; accent-color: var(--a3d) !important;} .bred{border-color: var(--red) !important; accent-color: var(--red) !important;} .byellow{border-color: var(--yellow) !important; accent-color: var(--yellow) !important;} .bgreen{border-color: var(--green) !important; accent-color: var(--green) !important;} .bblue{border-color: var(--blue) !important; accent-color: var(--blue) !important;} .bg1{border-color: var(--g1) !important; accent-color: var(--g1) !important;} .bg2{border-color: var(--g2) !important; accent-color: var(--g2) !important;} .bg3{border-color: var(--g3) !important; accent-color: var(--g3) !important;} .bg4{border-color: var(--g4) !important; accent-color: var(--g4) !important;} .bg5{border-color: var(--g5) !important; accent-color: var(--g5) !important;} .bg6{border-color: var(--g6) !important; accent-color: var(--g6) !important;} .bg7{border-color: var(--g7) !important; accent-color: var(--g7) !important;} .bg8{border-color: var(--g8) !important; accent-color: var(--g8) !important;} .bg9{border-color: var(--g9) !important; accent-color: var(--g9) !important;} .bg10{border-color: var(--g10) !important; accent-color: var(--g10) !important;} .bwhite{border-color: var(--white) !important; accent-color: var(--white) !important;} .bblack{border-color: var(--black) !important; accent-color: var(--black) !important;} .red1{background-color:var(--red1) !important;} input.red1{accent-color:var(--red1) !important;} .red2{background-color:var(--red2) !important;} input.red2{accent-color:var(--red2) !important;} .red3{background-color:var(--red3) !important;} input.red3{accent-color:var(--red3) !important;} .red4{background-color:var(--red4) !important;color:white !important;} input.red4{accent-color:var(--red4) !important;} .red5{background-color:var(--red5) !important;color:white !important;} input.red5{accent-color:var(--red5) !important;} .orange1{background-color:var(--orange1) !important;} input.orange1{accent-color:var(--orange1) !important;} .orange2{background-color:var(--orange2) !important;} input.orange2{accent-color:var(--orange2) !important;} .orange3{background-color:var(--orange3) !important;} input.orange3{accent-color:var(--orange3) !important;} .orange4{background-color:var(--orange4) !important;color:white !important;} input.orange4{accent-color:var(--orange4) !important;} .orange5{background-color:var(--orange5) !important;color:white !important;} input.orange5{accent-color:var(--orange5) !important;} .yellow1{background-color:var(--yellow1) !important;} input.yellow1{accent-color:var(--yellow1) !important;} .yellow2{background-color:var(--yellow2) !important;} input.yellow2{accent-color:var(--yellow2) !important;} .yellow3{background-color:var(--yellow3) !important;} input.yellow3{accent-color:var(--yellow3) !important;} .yellow4{background-color:var(--yellow4) !important;color:white !important;} input.yellow4{accent-color:var(--yellow4) !important;} .yellow5{background-color:var(--yellow5) !important;color:white !important;} input.yellow5{accent-color:var(--yellow5) !important;} .green1{background-color:var(--green1) !important;} input.green1{accent-color:var(--green1) !important;} .green2{background-color:var(--green2) !important;} input.green2{accent-color:var(--green2) !important;} .green3{background-color:var(--green3) !important;} input.green3{accent-color:var(--green3) !important;} .green4{background-color:var(--green4) !important;color:white !important;} input.green4{accent-color:var(--green4) !important;} .green5{background-color:var(--green5) !important;color:white !important;} input.green5{accent-color:var(--green5) !important;} .teal1{background-color:var(--teal1) !important;} input.teal1{accent-color:var(--teal1) !important;} .teal2{background-color:var(--teal2) !important;} input.teal2{accent-color:var(--teal2) !important;} .teal3{background-color:var(--teal3) !important;} input.teal3{accent-color:var(--teal3) !important;} .teal4{background-color:var(--teal4) !important;color:white !important;} input.teal4{accent-color:var(--teal4) !important;} .teal5{background-color:var(--teal5) !important;color:white !important;} input.teal5{accent-color:var(--teal5) !important;} .blue1{background-color:var(--blue1) !important;} input.blue1{accent-color:var(--blue1) !important;} .blue2{background-color:var(--blue2) !important;} input.blue2{accent-color:var(--blue2) !important;} .blue3{background-color:var(--blue3) !important;} input.blue3{accent-color:var(--blue3) !important;} .blue4{background-color:var(--blue4) !important;color:white !important;} input.blue4{accent-color:var(--blue4) !important;} .blue5{background-color:var(--blue5) !important;color:white !important;} input.blue5{accent-color:var(--blue5) !important;} .sky1{background-color:var(--sky1) !important;} input.sky1{accent-color:var(--sky1) !important;} .sky2{background-color:var(--sky2) !important;} input.sky2{accent-color:var(--sky2) !important;} .sky3{background-color:var(--sky3) !important;} input.sky3{accent-color:var(--sky3) !important;} .sky4{background-color:var(--sky4) !important;color:white !important;} input.sky4{accent-color:var(--sky4) !important;} .sky5{background-color:var(--sky5) !important;color:white !important;} input.sky5{accent-color:var(--sky5) !important;} .pink1{background-color:var(--pink1) !important;} input.pink1{accent-color:var(--pink1) !important;} .pink2{background-color:var(--pink2) !important;} input.pink2{accent-color:var(--pink2) !important;} .pink3{background-color:var(--pink3) !important;} input.pink3{accent-color:var(--pink3) !important;} .pink4{background-color:var(--pink4) !important;color:white !important;} input.pink4{accent-color:var(--pink4) !important;} .pink5{background-color:var(--pink5) !important;color:white !important;} input.pink5{accent-color:var(--pink5) !important;} .purple1{background-color:var(--purple1) !important;} input.purple1{accent-color:var(--purple1) !important;} .purple2{background-color:var(--purple2) !important;} input.purple2{accent-color:var(--purple2) !important;} .purple3{background-color:var(--purple3) !important;} input.purple3{accent-color:var(--purple3) !important;} .purple4{background-color:var(--purple4) !important;color:white !important;} input.purple4{accent-color:var(--purple4) !important;} .purple5{background-color:var(--purple5) !important;color:white !important;} input.purple5{accent-color:var(--purple5) !important;} .gray1{background-color:var(--gray1) !important;} input.gray1{accent-color:var(--gray1) !important;} .gray2{background-color:var(--gray2) !important;} input.gray2{accent-color:var(--gray2) !important;} .gray3{background-color:var(--gray3) !important;} input.gray3{accent-color:var(--gray3) !important;} .gray4{background-color:var(--gray4) !important;color:white !important;} input.gray4{accent-color:var(--gray4) !important;} .gray5{background-color:var(--gray5) !important;color:white !important;} input.gray5{accent-color:var(--gray5) !important;} /* Transparent bg */ .gray10{background-color:var(--gray10) !important;} .gray20{background-color:var(--gray20) !important;} .gray30{background-color:var(--gray30) !important;} .gray40{background-color:var(--gray40) !important;} .gray50{background-color:var(--gray50) !important;} .gray60{background-color:var(--gray60) !important;} .gray70{background-color:var(--gray70) !important;} .gray80{background-color:var(--gray80) !important;} .gray90{background-color:var(--gray90) !important;} input[style*="color: white"]::placeholder, textarea[style*="color: white"]::placeholder {color: rgba(255, 255, 255, 0.6) !important;opacity: 1;} /* Font Family Classes - Multilingual Support */ .ff_modern, .ff_modern * {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", sans-serif !important;} .ff_business, .ff_business * {font-family: "Inter", "Hiragino Sans", "Microsoft YaHei", "Source Han Sans SC", "Source Han Sans TC", "Meiryo", sans-serif !important;} .ff_minimal, .ff_minimal * {font-family: "SF Pro Display", "Ping Fang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "微软雅黑", sans-serif !important;} .ff_tech, .ff_tech * {font-family: "Monaco", "JetBrains Mono", "Source Code Pro", "Consolas", "Source Han Mono", "Noto Sans Mono CJK JP", monospace !important;} .ff_editorial, .ff_editorial * {font-family: "Georgia", "Noto Serif", "Source Han Serif SC", "Source Han Serif JP", "游明朝", "YuMincho", serif !important;} .ff_universal, .ff_universal * {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans CJK JP", "Noto Sans CJK SC", "Microsoft YaHei", "游ゴシック", sans-serif !important;} .ff_commerce, .ff_commerce * {font-family: "Nunito", "Open Sans", "Noto Sans JP", "Source Han Sans", "PingFang SC", "Microsoft JhengHei", sans-serif !important;} .ff_dashboard, .ff_dashboard * {font-family: "IBM Plex Sans", "Inter", "Noto Sans CJK", "Microsoft YaHei", "Hiragino Kaku Gothic ProN", sans-serif !important;} .ff_newspaper, .ff_newspaper * {font-family: "Times New Roman", "Noto Serif CJK JP", "Source Han Serif", "宋体", "SimSun", "明朝", "Mincho", serif !important;} .ff_luxury, .ff_luxury * {font-family: "Didot", "Bodoni MT", "Playfair Display", "Noto Serif JP", "Source Han Serif SC", "游明朝", "YuMincho", serif !important;} .ff_gaming, .ff_gaming * {font-family: "Russo One", "Orbitron", "Exo 2", "Noto Sans CJK JP", "Source Han Sans", "微软雅黑", sans-serif !important;} .ff_poppins, .ff_poppins * {font-family: "Poppins", "Noto Sans CJK JP", "Source Han Sans", "微软雅黑", sans-serif !important;} .ff_montserrat, .ff_montserrat * {font-family: "Montserrat", "Noto Sans CJK JP", "Source Han Sans", "游ゴシック", sans-serif !important;} .ff_raleway, .ff_raleway * {font-family: "Raleway", "Noto Sans CJK JP", "Source Han Sans", "Microsoft YaHei", sans-serif !important;} .ff_lato, .ff_lato * {font-family: "Lato", "Noto Sans CJK JP", "Source Han Sans", "Meiryo", sans-serif !important;} .ff_roboto_slab, .ff_roboto_slab * {font-family: "Roboto Slab", "Noto Serif CJK JP", "Source Han Serif", "游明朝", serif !important;} .ff_work_sans, .ff_work_sans * {font-family: "Work Sans", "Noto Sans CJK JP", "Source Han Sans", "Hiragino Sans", sans-serif !important;} .ff_dm_sans, .ff_dm_sans * {font-family: "DM Sans", "Noto Sans CJK JP", "Source Han Sans", "PingFang SC", sans-serif !important;} .ff_space_grotesk, .ff_space_grotesk * {font-family: "Space Grotesk", "Noto Sans Mono CJK JP", "Source Han Mono", "Microsoft YaHei", monospace !important;} /* Sticky Positioning Utilities */ .sticky-top {position:sticky;top:0;z-index:10;background:var(--bg1);} .sticky-left-1 {position:sticky;left:0;z-index:5;background:var(--bg1);} .sticky-top.sticky-left-1 {z-index:15;} .sticky-top-2 {position:sticky;top:var(--row-height,40px);z-index:9;background:var(--bg1);} .sticky-top-3 {position:sticky;top:calc(var(--row-height,40px) * 2);z-index:8;background:var(--bg1);} .sticky-left-2 {position:sticky;left:var(--col-width,120px);z-index:4;background:var(--bg1);} .sticky-left-3 {position:sticky;left:calc(var(--col-width,120px) * 2);z-index:3;background:var(--bg1);} .sticky-top::after {content:'';position:absolute;bottom:-4px;left:0;right:0;height:4px;background:linear-gradient(to bottom,rgba(0,0,0,0.1),transparent);opacity:0;transition:opacity var(--tr1);} .scrolled .sticky-top::after {opacity:1;} /* Popup Animations */ @keyframes targetedBounce {0%{transform:translateX(-50%) translateY(10px) scale(0.95);opacity:0;} 60%{transform:translateX(-50%) translateY(-5px) scale(1.02);opacity:1;} 100%{transform:translateX(-50%) translateY(0) scale(1);opacity:1;}} @keyframes popupSlide {0%{transform:translate(-50%, -50%) scale(0.8);opacity:0;} 100%{transform:translate(-50%, -50%) scale(1);opacity:1;}} @keyframes popupFade {0%{opacity:0;} 100%{opacity:1;}} /* Animation Keyframes */ @keyframes fade-in {0%{opacity:0;} 100%{opacity:1;}} @keyframes fade-out {0%{opacity:1;} 100%{opacity:0;}} @keyframes fade-in-up {0%{opacity:0;transform:translateY(20px);} 100%{opacity:1;transform:translateY(0);}} @keyframes fade-in-down {0%{opacity:0;transform:translateY(-20px);} 100%{opacity:1;transform:translateY(0);}} @keyframes fade-in-left {0%{opacity:0;transform:translateX(-20px);} 100%{opacity:1;transform:translateX(0);}} @keyframes fade-in-right {0%{opacity:0;transform:translateX(20px);} 100%{opacity:1;transform:translateX(0);}} @keyframes fade-out-up {0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(-20px);}} @keyframes fade-out-down {0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(20px);}} @keyframes fade-out-left {0%{opacity:1;transform:translateX(0);} 100%{opacity:0;transform:translateX(-20px);}} @keyframes fade-out-right {0%{opacity:1;transform:translateX(0);} 100%{opacity:0;transform:translateX(20px);}} @keyframes slide-in-up {0%{transform:translateY(100%);} 100%{transform:translateY(0);}} @keyframes slide-in-down {0%{transform:translateY(-100%);} 100%{transform:translateY(0);}} @keyframes slide-in-left {0%{transform:translateX(-100%);} 100%{transform:translateX(0);}} @keyframes slide-in-right {0%{transform:translateX(100%);} 100%{transform:translateX(0);}} @keyframes slide-out-up {0%{transform:translateY(0);} 100%{transform:translateY(-100%);}} @keyframes slide-out-down {0%{transform:translateY(0);} 100%{transform:translateY(100%);}} @keyframes slide-out-left {0%{transform:translateX(0);} 100%{transform:translateX(-100%);}} @keyframes slide-out-right {0%{transform:translateX(0);} 100%{transform:translateX(100%);}} @keyframes zoom-in {0%{opacity:0;transform:scale(0.5);} 100%{opacity:1;transform:scale(1);}} @keyframes zoom-out {0%{opacity:1;transform:scale(1);} 100%{opacity:0;transform:scale(0.5);}} @keyframes bounce-in {0%{opacity:0;transform:scale(0.3);} 50%{opacity:1;transform:scale(1.05);} 70%{transform:scale(0.9);} 100%{transform:scale(1);}} @keyframes anim-pulse {0%{transform:scale(1);} 50%{transform:scale(1.1);} 100%{transform:scale(1);}} @keyframes anim-shake {0%,100%{transform:translateX(0);} 10%,30%,50%,70%,90%{transform:translateX(-5px);} 20%,40%,60%,80%{transform:translateX(5px);}} @keyframes anim-bounce {0%,20%,50%,80%,100%{transform:translateY(0);} 40%{transform:translateY(-15px);} 60%{transform:translateY(-8px);}} @keyframes anim-wiggle {0%,100%{transform:rotate(0deg);} 25%{transform:rotate(-5deg);} 75%{transform:rotate(5deg);}} @keyframes anim-flash {0%,50%,100%{opacity:1;} 25%,75%{opacity:0;}} @keyframes anim-spin {0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}} @keyframes anim-blink {0%,100%{opacity:1;} 50%{opacity:0;}} @keyframes anim-skeleton {0%{background-position:-200px 0;} 100%{background-position:calc(200px + 100%) 0;}} @keyframes anim-float {0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}} /* Animation Classes - Entrance */ .fade-in {animation:fade-in 1.5s ease-out forwards;} .fade-in-up {animation:fade-in-up 0.5s ease-out forwards;} .fade-in-down {animation:fade-in-down 0.5s ease-out forwards;} .fade-in-left {animation:fade-in-left 0.5s ease-out forwards;} .fade-in-right {animation:fade-in-right 0.5s ease-out forwards;} .slide-in-up {animation:slide-in-up 0.5s ease-out forwards;} .slide-in-down {animation:slide-in-down 0.5s ease-out forwards;} .slide-in-left {animation:slide-in-left 0.5s ease-out forwards;} .slide-in-right {animation:slide-in-right 0.5s ease-out forwards;} .zoom-in {animation:zoom-in 0.5s ease-out forwards;} .bounce-in {animation:bounce-in 1.5s ease-out forwards;} /* Animation Classes - Exit */ .fade-out {animation:fade-out 1s ease-out forwards;} .fade-out-up {animation:fade-out-up 0.5s ease-out forwards;} .fade-out-down {animation:fade-out-down 0.5s ease-out forwards;} .fade-out-left {animation:fade-out-left 0.5s ease-out forwards;} .fade-out-right {animation:fade-out-right 0.5s ease-out forwards;} .slide-out-up {animation:slide-out-up 0.5s ease-out forwards;} .slide-out-down {animation:slide-out-down 0.5s ease-out forwards;} .slide-out-left {animation:slide-out-left 0.5s ease-out forwards;} .slide-out-right {animation:slide-out-right 0.5s ease-out forwards;} .zoom-out {animation:zoom-out 0.5s ease-out forwards;} /* Animation Classes - Attention */ .anim-pulse {animation:anim-pulse 1s ease-in-out infinite;} .anim-shake {animation:anim-shake 0.5s ease-in-out;} .anim-bounce {animation:anim-bounce 1s ease infinite;} .anim-wiggle {animation:anim-wiggle 0.5s ease-in-out infinite;} .anim-flash {animation:anim-flash 1s ease infinite;} .anim-float {animation:anim-float 2s ease-in-out infinite;} /* Animation Classes - Loading */ .anim-spin {animation:anim-spin 1s linear infinite;} .anim-blink {animation:anim-blink 1s ease-in-out infinite;} .anim-skeleton {background:linear-gradient(90deg,var(--g2) 25%,var(--g3) 50%,var(--g2) 75%);background-size:200px 100%;animation:anim-skeleton 1.5s ease-in-out infinite;} /* Hover Animation Classes */ .hover-grow {transition:transform var(--tr1);} .hover-grow:hover {transform:scale(1.1);} .hover-shrink {transition:transform var(--tr1);} .hover-shrink:hover {transform:scale(0.95);} .hover-float {transition:transform var(--tr1);} .hover-float:hover {transform:translateY(-5px);} .hover-sink {transition:transform var(--tr1);} .hover-sink:hover {transform:translateY(5px);} .hover-rotate {transition:transform var(--tr1);} .hover-rotate:hover {transform:rotate(5deg);} .hover-spin {transition:transform var(--tr2);} .hover-spin:hover {transform:rotate(360deg);} /* Animation Delay Utilities */ .delay-1 {animation-delay:0.1s;} .delay-2 {animation-delay:0.2s;} .delay-3 {animation-delay:0.3s;} .delay-4 {animation-delay:0.4s;} .delay-5 {animation-delay:0.5s;} .delay-6 {animation-delay:0.6s;} .delay-7 {animation-delay:0.7s;} .delay-8 {animation-delay:0.8s;} .delay-9 {animation-delay:0.9s;} .delay-10 {animation-delay:1s;} .delay-11 {animation-delay:1.1s;} .delay-12 {animation-delay:1.2s;} .delay-13 {animation-delay:1.3s;} .delay-14 {animation-delay:1.4s;} .delay-15 {animation-delay:1.5s;} .delay-16 {animation-delay:1.6s;} .delay-17 {animation-delay:1.7s;} .delay-18 {animation-delay:1.8s;} .delay-19 {animation-delay:1.9s;} .delay-20 {animation-delay:2s;} .delay-21 {animation-delay:2.1s;} .delay-22 {animation-delay:2.2s;} .delay-23 {animation-delay:2.3s;} .delay-24 {animation-delay:2.4s;} .delay-25 {animation-delay:2.5s;} .delay-26 {animation-delay:2.6s;} .delay-27 {animation-delay:2.7s;} .delay-28 {animation-delay:2.8s;} .delay-29 {animation-delay:2.9s;} .delay-30 {animation-delay:3s;} /* Animation Duration Utilities */ .duration-fast {animation-duration:0.2s !important;} .duration-normal {animation-duration:0.5s !important;} .duration-slow {animation-duration:1s !important;} .duration-slower {animation-duration:2s !important;} /* Animation Iteration Utilities */ .anim-once {animation-iteration-count:1 !important;} .anim-twice {animation-iteration-count:2 !important;} .anim-infinite {animation-iteration-count:infinite !important;} /* Animation Direction Utilities */ .anim-normal {animation-direction:normal !important;} .anim-reverse {animation-direction:reverse !important;} .anim-alternate {animation-direction:alternate !important;} .anim-alternate-reverse {animation-direction:alternate-reverse !important;} /* Animation Fill Mode */ .anim-forwards {animation-fill-mode:forwards !important;} .anim-backwards {animation-fill-mode:backwards !important;} .anim-both {animation-fill-mode:both !important;} /* Markdown Code Blocks */ .markdown {list-style: initial;} .markdown ul{list-style-type: disc;padding-left: var(--s5);margin: var(--s2) 0;} .markdown ol{list-style-type: decimal;padding-left: var(--s5);margin: var(--s2) 0;} .markdown li{display: list-item;margin: var(--s1) 0;list-style: inherit;} .markdown .vartag {background-color: var(--sky2); color: var(--sky5); padding: 2px var(--s2); border:1px solid var(--sky3);border-radius: var(--s1); font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', monospace; display: inline;} /* alert popup */ .alert-popup-content{ background: var(--bg1); border-radius: 8px; padding: 24px; .alert-title{font-size: 18px; font-weight: 600;} .alert-text{font-size: 14px;line-height: 1.5; color: var(--g6);} .alert-btn{padding: 8px 16px;border-radius: 4px;border: none;} } .alert-popup-content.alert-error{ .alert-title{color: var(--red);} .alert-btn{background-color: var(--red);} } .alert-popup-content.alert-success{ .alert-title{color: var(--green);} .alert-btn{background-color: var(--green);} } .alert-popup-content.alert-warning{ .alert-title{color: var(--yellow);} .alert-btn{background-color: var(--yellow);} } .alert-popup-content.alert-info{ .alert-title{color: var(--a1);} .alert-btn{background-color: var(--a1);} } .card-box{border: 1px solid var(--g2);border-radius: var(--s3);padding: 35px 15px;} .object-contain {object-fit: contain;} .object-cover {object-fit: cover;} /* Dark Mode */ body.dark-mode { /* ========================= Neutral / Background ========================= */ --white: #e5e7eb; /* used as "light text", not pure white */ --black: #020617; --g1: #1b1d22; /* app background (deepest) */ --g2: #21242a; /* main surfaces */ --g3: #262a31; /* raised surfaces / cards */ --g4: #2c3138; /* hover / active surfaces */ --g5: #3a3f46; /* borders / dividers */ --g6: #4b515a; /* secondary borders */ --g7: #7b828c; /* muted text */ --g8: #a1a7b0; /* secondary text */ --g9: #cfd4db; /* primary text */ --g10: #e6e9ee; /* ========================= Background roles ========================= */ --bg1: var(--g1); /* app background */ --bg2: var(--g2); /* cards / panels */ --bg3: var(--g3); /* inputs / inner surfaces */ --bg4: var(--g4); /* elevated / active */ /* ========================= Text ========================= */ --t: var(--g9); /* primary text */ --tl: var(--g7); /* secondary */ --tll:var(--g6); /* muted */ --tw: var(--white); --ta: var(--white); /* accent text */ /* ========================= Borders ========================= */ --b1: var(--g4); --b2: var(--g5); --b3: var(--a1); --b4: var(--red); /* ========================= Semantic colors (dark-safe) ========================= */ /* --green: #34d399; --yellow: #fbbf24; --red: #f87171; --blue: #38bdf8; */ /* ========================= Gray semantic scale ========================= */ --gray1: #cbd5e1; /* main text */ --gray2: #94a3b8; /* secondary */ --gray3: #64748b; /* muted */ --gray4: #475569; /* borders */ --gray5: #334155; /* disabled bg */ /* ========================= Shadows (stronger for dark) ========================= */ --sh1: 0 1px 2px rgba(0, 0, 0, 0.4); --sh2: 0 4px 12px rgba(0, 0, 0, 0.5); --sh3: 0 8px 20px rgba(0, 0, 0, 0.6); background: var(--bg1); color: var(--t); .test-panel { background: var(--bg1); } mx-tabmenu dl { background: var(--bg1); border-color: var(--b1); } input, select, textarea, button { background: var(--bg2); color: var(--t); border-color: var(--b1); } input:focus, select:focus, textarea:focus { border-color: var(--a1); background: var(--bg2); } option { background: var(--bg2); color: var(--t); } form-input input, form-select select, form-date select, form-time select, form-search input { background: var(--bg2); color: var(--t); border-color: var(--b1);} form-search .results { background: var(--bg1); border-color: var(--b1); } form-search .results li { color: var(--t); border-color: var(--b1); } form-search .results li:hover { background: var(--bg3); } form-search .results li { border-color: var(--b1); color: var(--t); } form-search .results li:hover { background: var(--lblue1); } h1, h2, h3, h4 { color: var(--t); } .popup > .window > .content[name="color-pallete"] {background-color: var(--g2);} .popup > .window > .content[name="color-pallete"] dd {background-color: var(--g1); border-color: var(--g1);} .test-demo-content, .waiting-card, .coupon-detail, .queue-ticket { background: var(--bg); border-color: var(--b1); } mx-list li, mx-grids li { background: var(--bg2); border-color: var(--b1); color: var(--t); } button { background: var(--bg2); color: var(--t); border-color: var(--b1); } .button.alt { background: var(--g3); color: var(--white); } button:hover { background: var(--a1l); } .slides-container { background: var(--bg); } .slide-wrapper { background: var(--bg2); } .slide-content { background: var(--bg2); color: var(--t); } .slide-content h1, .slide-content h2, .slide-content h3, .slide-content h4 { color: var(--t); } .slide-content p, .slide-content li { color: var(--gray); } .market-size, .growth-drivers, .feature-card, .tech-category, .team-member, .advisor, .milestone, .step-card, .contact-details { background: var(--bg); border-color: var(--b1); } .comparison-table th { background: var(--lblue1); } .comparison-table tr:nth-child(even) { background: var(--bg); } .tech-list li { background: var(--bg2); border-color: var(--b1); } .fund-item { background: var(--bg); } .slide-counter { background: var(--bg2); color: var(--t); } .dot { background: var(--gray); } .dot.active { background: var(--a1); } section.single dd.on { background-color: var(--bg2);} mx-zoomable { background: linear-gradient(135deg, var(--bg2) 0%, var(--bg) 100%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } mx-zoomable .zoomable-content { background: var(--bg); } mx-zoomable .zoom-hint { background: var(--bg2); color: var(--t); } mx-header section { background-color: var(--g2); color: var(--t); } .popup[name="builder-preview"] header { background: var(--g2); color: var(--t); } .frame-header{background: var(--g4);} mx-sidemenu aside {background: var(--g2);} builder-selector>main>div {background: var(--g1);} }