@import "https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&display=swap";
@tailwind base;@tailwind components;@tailwind utilities;body{font-family:Noto Sans TC,sans-serif}.custom-darkGreen{color:#334000!important}.card-hover{transition:all .3s}.card-hover:hover{transform:translateY(-5px);box-shadow:0 20px 40px #0000001a}.section-fade{opacity:0;transition:all .6s;transform:translateY(30px)}.section-fade.visible{opacity:1;transform:translateY(0)}.bounce-btn{animation:2s infinite bounce}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.animate-float-lr{animation:3s ease-in-out infinite float-lr}.hover-logo{transition:transform .3s}.hover-logo:hover{animation:1s ease-in-out infinite logo-float}@keyframes logo-float{0%,to{transform:translate(0)}50%{transform:translate(5px)}}@keyframes float-lr{0%,to{transform:translate(0)}50%{transform:translate(3px)}}.hover\:animate-float-lr:hover{animation:.6s ease-in-out infinite float-lr}.button{color:#fff;cursor:pointer;background-color:#3a3a3a;border:none;border-radius:9999px;outline:none;justify-content:center;align-items:center;width:140px;height:40px;padding:0;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex;position:relative}.button:hover{transform:translateY(-3px);box-shadow:0 16px 32px #3d3a4e73}.articles-grid{gap:1.75rem;display:grid}@media (min-width:768px){.articles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.articles-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.article-card{text-align:left;cursor:pointer;background:#fff;border:2px solid #e5e7eb;border-radius:1.5rem;flex-direction:column;gap:.95rem;padding:1.75rem;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;box-shadow:0 18px 46px #0f172a14}.article-card:hover{border-width:6px;border-color:#000;padding:calc(1.75rem - 4px);transform:translateY(-5px);box-shadow:0 22px 52px #00000040}.article-card:focus-visible{outline-offset:3px;outline:3px solid #2563eb}.article-icon{border-radius:9999px;justify-content:center;align-items:center;width:3.25rem;height:3.25rem;display:inline-flex}@media (max-width:640px){.article-icon{width:2.5rem;height:2.5rem}.article-card-title{font-size:1rem}}.article-card-title{color:#111827;font-size:1.125rem;font-weight:700;line-height:1.35}.article-card-meta{color:#6b7280;font-size:.875rem}.article-card-summary{color:#4b5563;font-size:.95rem;line-height:1.6}.article-card-link{color:#ef6c0e;text-shadow:0 2px 4px #f9731659;align-items:center;gap:.4rem;margin-top:auto;font-size:.95rem;font-weight:600;display:inline-flex}.articles-modal-backdrop{z-index:60;background:#0f172a8c;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.articles-modal{background:#fff;border-radius:1.75rem;flex-direction:column;width:min(960px,100%);max-height:90vh;display:flex;position:relative;overflow:hidden;box-shadow:0 34px 70px #0f172a38}.articles-modal-header{border-bottom:1px solid #e5e7eb;padding:2.25rem 2.5rem 1.25rem}.articles-modal-body{padding:2rem 2.5rem 2.5rem;overflow-y:auto}.articles-modal-close{color:#1f2937;cursor:pointer;background:#0f172a1a;border:none;border-radius:9999px;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;transition:background .2s,transform .2s;display:inline-flex;position:absolute;top:1.25rem;right:1.25rem}.articles-modal-close:hover{background:#2563eb2e;transform:rotate(90deg)scale(1.08)}.category-btn{color:#4b5563;cursor:pointer;background-color:#fff;border:2px solid #e5e7eb;border-radius:9999px;padding:.5rem 1.25rem;font-weight:600;transition:all .2s}.category-btn:hover{background-color:#f3f4f6;border-color:#d1d5db}.category-btn.active{color:#fff;background-color:#1f2937;border-color:#1f2937}#mobile-menu-btn.hamburger{color:#374151;width:44px;height:44px;position:relative}#mobile-menu-btn.hamburger .hb-core,#mobile-menu-btn.hamburger:before,#mobile-menu-btn.hamburger:after{content:"";background:currentColor;border-radius:2px;height:2px;transition:transform .25s,opacity .2s,top .25s,bottom .25s;display:block;position:absolute;left:10px;right:10px}#mobile-menu-btn.hamburger:before{top:14px}#mobile-menu-btn.hamburger:after{bottom:14px}#mobile-menu-btn.hamburger.active .hb-core{opacity:0}#mobile-menu-btn.hamburger.active:before{transform:translateY(8px)rotate(45deg)}#mobile-menu-btn.hamburger.active:after{transform:translateY(-8px)rotate(-45deg)}.floating-back-btn{z-index:80;text-decoration:none;position:fixed;top:1rem;right:1rem}.floating-back-btn svg{width:20px;height:20px}.floating-back-btn .label svg{margin-bottom:-2px}.floating-back-btn:focus-visible{outline:none}.button:before{content:"";box-shadow:none;z-index:-1;border-radius:inherit;background:0 0;transition:all .3s;position:absolute;inset:0}.gradient-container{border-radius:inherit;z-index:-2;filter:blur(10px);transition:all .3s;position:absolute;inset:0;overflow:hidden}.gradient{aspect-ratio:1;filter:blur(10px);background-image:linear-gradient(90deg,#597cee,#a659ee,#ee59c6,#ee5b59,#eecb59,#a1ee59,#59ee80,#59ebee);border-radius:100%;width:110%;transition:all .3s;animation:2s linear infinite rotate;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.label{color:#fff;background-color:#2b2b2b;background-image:linear-gradient(#2b2b2b 0%,#444 100%);border-radius:9999px;justify-content:flex-start;align-items:center;gap:.35rem;width:100%;height:100%;padding:0 12px 0 24px;font-size:16px;font-weight:600;display:inline-flex}.button:hover .label{color:#fff;background-color:#2b2b2bcc;background-image:none}.article-content-templates .border,.articles-modal-body .border{border-width:5px;border-radius:1.5rem}.article-content-templates .border-l-4,.article-content-templates .border-l-2,.article-content-templates .border-l-1,.articles-modal-body .border-l-4,.articles-modal-body .border-l-2,.articles-modal-body .border-l-1{border-left-width:5px;border-top-left-radius:1.5rem;border-bottom-left-radius:1.5rem}.article-content-templates .rounded-lg,.article-content-templates .rounded-xl,.article-content-templates .rounded,.articles-modal-body .rounded-lg,.articles-modal-body .rounded-xl,.articles-modal-body .rounded{border-radius:1.5rem}@keyframes rotate{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}@keyframes breath{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.breath-animate{will-change:transform;animation:1.8s ease-in-out infinite breath}@media (prefers-reduced-motion:reduce){.breath-animate{animation:none}}