:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg-color:#fff;--text-color:#000;--card-bg:#eaeaea;--card-border:#ddd;--color-health:#d4a017;--color-social:#27ae60;--color-vietnamese:#c0392b;--color-projects:#2471a3}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg-color:#1a1a1a;--text-color:#fff;--card-bg:#2d2d2d;--card-border:#444;--pill-bg:#444}}:root{--header-height:60px}html,body{height:100%;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color)}#app{max-width:800px;margin:0 auto;padding:1rem 1rem 80px;position:relative}#app:has(#home-view:not(.hidden)){max-width:100%;height:100dvh;padding:0}#app:has(.section-page:not(.hidden)){max-width:100%;height:100dvh;padding:0}.fab{background-color:var(--pill-bg,#3498db);color:#fff;cursor:pointer;z-index:100;border:none;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;font-size:2rem;transition:transform .2s,background-color .2s;display:flex;position:fixed;bottom:20px;right:20px;box-shadow:0 4px 10px #0000004d}.fab:hover{filter:brightness(1.1);transform:scale(1.05)}.fab:active{transform:scale(.95)}@media (prefers-color-scheme:dark){.fab{color:#fff;background-color:#2980b9}}.hidden{display:none!important}#nav-placeholder{display:none}.status-options{flex-direction:column;gap:10px;margin-bottom:20px;display:flex}.btn-status{cursor:pointer;text-align:center;background:#eee;border:none;border-radius:8px;width:100%;padding:12px;font-size:1rem;font-weight:700}.btn-status.status-active{color:#27ae60;background-color:#e8f8f5}.btn-status.status-on_hold{color:#f39c12;background-color:#fef9e7}.btn-status.status-completed{color:#2980b9;background-color:#ebf5fb}.btn-status.status-archived{color:#7f8c8d;background-color:#f2f4f4}@media (prefers-color-scheme:dark){.btn-status.status-active{background-color:#2ecc7133}.btn-status.status-on_hold{background-color:#f1c40f33}.btn-status.status-completed{background-color:#3498db33}.btn-status.status-archived{color:#95a5a6;background-color:#7f8c8d33}}.main-nav{justify-content:center;gap:1rem;margin-bottom:1rem;display:flex}.nav-btn{color:var(--text-color);opacity:.6;cursor:pointer;background:0 0;border:none;padding:.5rem 1rem;font-size:1.1rem;font-weight:700;position:relative}.nav-btn.active{opacity:1}.nav-btn.active:after{content:"";background-color:var(--text-color);width:100%;height:2px;position:absolute;bottom:0;left:0}.section-page{box-sizing:border-box;flex-direction:column;height:100dvh;display:flex;overflow:hidden}.section-page__header{color:#fff;flex:none;align-items:center;gap:.75rem;padding:1rem 1rem .75rem;display:flex}.section-page__title{letter-spacing:.04em;text-transform:uppercase;color:#fff;text-shadow:0 1px 4px #00000040;margin:0;font-size:1.4rem;font-weight:800}.section-back-btn{color:#fff;cursor:pointer;background:#fff3;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:2.4rem;height:2.4rem;font-size:1.2rem;transition:background .15s;display:flex}.section-back-btn:hover{background:#ffffff59}.section-page__content{color:#ffffffeb;flex:1 1 0;padding:1rem;overflow-y:auto}.section-page--health{background:var(--color-health)}.section-page--social{background:var(--color-social)}.section-page--vietnamese{background:var(--color-vietnamese)}.section-page--projects{background:var(--color-projects)}.section-page--extra{background:#555}.home-screen{box-sizing:border-box;flex-direction:column;height:100dvh;padding:0;display:flex;overflow:hidden}home-screen{flex-direction:column;height:100%;display:flex}.home-header{flex:none;justify-content:center;align-items:center;padding:1rem 1rem .5rem;display:flex}.home-title{letter-spacing:.06em;text-transform:uppercase;color:var(--text-color);opacity:.85;margin:0;font-size:1.4rem;font-weight:800}.section-grid{flex:1 1 0;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:.75rem;min-height:0;padding:.75rem;display:grid}.section-grid :is(section-card,health-section-card,social-section-card,learn-section-card,projects-section-card){height:100%;display:block}.home-footer{flex:none;justify-content:center;align-items:center;padding:.5rem 1rem 1rem;display:flex}.extra-link{background:var(--card-bg);color:var(--text-color);opacity:.75;border-radius:999px;align-items:center;gap:.5rem;padding:.6rem 1.5rem;font-size:.9rem;font-weight:600;text-decoration:none;transition:opacity .2s,transform .2s;display:inline-flex}.extra-link:hover{opacity:1;transform:translateY(-1px)}.extra-nav{flex-direction:column;gap:.75rem;padding-top:.5rem;display:flex}.extra-nav-link{color:#fff;background:#ffffff26;border-radius:12px;padding:1rem 1.25rem;font-size:1rem;font-weight:600;text-decoration:none;transition:background .15s,transform .15s;display:block}.extra-nav-link:hover{background:#ffffff40}.extra-nav-link:active{transform:scale(.98)}#section-card-health{view-transition-name:section-health}#section-card-social{view-transition-name:section-social}#section-card-vietnamese{view-transition-name:section-vietnamese}#section-card-projects{view-transition-name:section-projects}.section-page--health .section-page__header{view-transition-name:section-health}.section-page--social .section-page__header{view-transition-name:section-social}.section-page--vietnamese .section-page__header{view-transition-name:section-vietnamese}.section-page--projects .section-page__header{view-transition-name:section-projects}::view-transition-group(section-health){animation-duration:.4s;animation-timing-function:cubic-bezier(.4,0,.2,1)}::view-transition-group(section-social){animation-duration:.4s;animation-timing-function:cubic-bezier(.4,0,.2,1)}::view-transition-group(section-vietnamese){animation-duration:.4s;animation-timing-function:cubic-bezier(.4,0,.2,1)}::view-transition-group(section-projects){animation-duration:.4s;animation-timing-function:cubic-bezier(.4,0,.2,1)}::view-transition-old(root){animation:.3s both vt-fade-out}::view-transition-new(root){animation:.3s both vt-fade-out}::view-transition-new(root){animation:.3s both vt-fade-in}.back-transition::view-transition-old(root){animation:.4s cubic-bezier(.4,0,.2,1) both vt-fade-out}.back-transition::view-transition-new(root){animation:.4s cubic-bezier(.4,0,.2,1) both vt-scale-in}@keyframes vt-fade-out{0%{opacity:1}to{opacity:0}}@keyframes vt-fade-in{0%{opacity:0}to{opacity:1}}@keyframes vt-scale-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}::view-transition-old(root){mix-blend-mode:normal}::view-transition-new(root){mix-blend-mode:normal}