:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#213547;background-color:#f4f4f4}body{margin:0;padding:0;min-height:100vh;background:#f4f4f4}.top-nav{width:100%;background-color:#fff;border-bottom:1px solid #ddd;position:sticky;top:0;z-index:1000}.nav-content{max-width:960px;margin:0 auto;padding:.75rem 1.25rem;display:flex;flex-direction:column;align-items:center}.site-title{font-weight:700;font-size:1.4rem;color:#007bff;text-decoration:none;margin-bottom:.5rem}.time-estimate-nav{display:none}.menu{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;list-style:none;padding:0;margin:0}.menu a{text-decoration:none;color:#333;font-weight:500;font-size:.95rem;transition:color .2s}.menu a:hover{color:#007bff}.menu-toggle,.hamburger{display:none}@media (max-width: 720px){.nav-content{align-items:flex-start}.site-title{margin-bottom:.25rem}.menu-toggle{display:none}.hamburger{display:block;font-size:1.8rem;cursor:pointer;background:none;border:none;align-self:flex-end;margin-bottom:.5rem}.menu{display:none;flex-direction:column;width:100%;margin-top:.5rem}.menu li{padding:.5rem 0}.menu-toggle:checked+.hamburger+.menu{display:flex}}.container{box-sizing:border-box;width:90%;max-width:700px;margin:2rem auto;background:#fff;padding:30px;border-radius:12px;box-shadow:0 4px 8px #0000001a;text-align:center}h1{font-size:2.4em;font-weight:700;margin-bottom:10px}h2{font-size:1.4em;color:#444;margin-bottom:20px}button{border-radius:8px;border:1px solid transparent;padding:12px 16px;font-size:16px;font-weight:600;background-color:#007bff;color:#fff;cursor:pointer;transition:background .2s ease-in-out,transform .1s;width:100%}button:hover{background:#0056b3}button:active{transform:scale(.98)}.time-estimate{font-size:1rem;color:#007bff;font-weight:600;margin-top:0;margin-bottom:1.25rem}.progress-bar-container{width:100%;height:10px;background-color:#e9ecef;border-radius:5px;overflow:hidden;margin-bottom:.5rem}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#0062cc,#3395ff);border-radius:5px;transition:width .7s cubic-bezier(.34,2.4,.64,1)}.progress-label{font-size:.85rem;color:#888;margin:0 0 1.25rem}.answers{display:flex;flex-direction:column;gap:10px}@media (min-width: 768px){.answers{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}button{width:100%;font-size:14px;padding:12px}}.trait-explanations{margin-top:2rem;background:#f9f9f9;padding:1rem 1.5rem;border-radius:8px;box-shadow:0 0 5px #0000000d}.trait-explanations ul{list-style:none;padding-left:0}.trait-explanations li{margin-bottom:1rem}.intro-text{font-size:1rem;color:#555;margin-bottom:1.5rem;text-align:left;line-height:1.6}@media (max-width: 480px){.desktop-only{display:none}.time-estimate-nav{display:block;font-size:.7rem;font-weight:600;color:#fff;background:#007bff;padding:2px 8px;border-radius:10px;margin-top:4px}h1{font-size:1.4em;margin-bottom:6px}.container{padding:16px;margin:.75rem auto}}.share-section{margin:2rem 0 1.5rem}.share-label{font-size:.95rem;color:#666;margin-bottom:.75rem}.share-buttons{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.share-btn{width:auto;padding:10px 20px;font-size:.95rem;border-radius:8px;font-weight:600;cursor:pointer;border:none;color:#fff;transition:opacity .2s}.share-btn:hover{opacity:.85}.share-btn--copy{background-color:#28a745}.share-btn--weibo{background-color:#e6162d}.share-btn--twitter{background-color:#000}