.periodic-wrapper{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased;padding:60px 20px 80px;width:100%}.periodic-container-inner{max-width:1440px;margin:0 auto;width:100%}.periodic-header{text-align:center;margin-bottom:32px;animation:fadeInUp .8s ease-out;padding:0 20px}.header-badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--accent) 0,#d4ff5e 100%);padding:10px 20px;border-radius:100px;font-size:11px;text-transform:uppercase;letter-spacing:2px;margin-bottom:20px;box-shadow:0 4px 20px rgba(196,242,73,.3)}.header-badge,.periodic-header h1{font-weight:700;color:var(--text-primary)}.periodic-header h1{font-family:Playfair Display,serif;font-size:48px;margin-bottom:14px;letter-spacing:-1.5px;line-height:1.1}.periodic-header h1 span{font-style:italic;background:linear-gradient(135deg,#84cc16,#65a30d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.periodic-header p{font-size:17px;color:var(--text-secondary);max-width:600px;margin:0 auto}.cta-banner{display:flex;align-items:center;justify-content:space-between;background:var(--bg-secondary);border:2px solid var(--accent);border-radius:16px;padding:20px 32px;margin-bottom:32px;animation:fadeInUp .8s ease-out .1s both;flex-wrap:wrap;gap:20px}.cta-content h2{font-family:Playfair Display,serif;font-size:22px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.cta-content p{font-size:14px;color:var(--text-secondary)}.cta-button{display:inline-flex;align-items:center;gap:10px;background:var(--text-primary);color:var(--bg-primary);padding:14px 28px;border-radius:100px;font-size:15px;font-weight:600;text-decoration:none;transition:all .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 4px 16px rgba(17,24,39,.15);white-space:nowrap}.cta-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(17,24,39,.25)}.cta-button svg{transition:transform .3s ease}.cta-button:hover svg{transform:translateX(4px)}.periodic-table-container{position:relative;background:var(--bg-primary);border-radius:32px;padding:48px;border:1px solid #e5e7eb;box-shadow:0 4px 6px -1px rgba(0,0,0,.05),0 10px 15px -3px rgba(0,0,0,.05);animation:fadeInUp .8s ease-out .2s both;overflow-x:auto;width:100%}.periodic-table-grid{display:grid;grid-template-columns:repeat(18,68px);gap:5px;justify-content:center}.pt-element{width:68px;height:68px;border-radius:8px;padding:6px 7px;display:flex;flex-direction:column;cursor:pointer;transition:all .3s cubic-bezier(.2,.8,.2,1);position:relative}.pt-element:not(.empty){box-shadow:0 2px 6px rgba(0,0,0,.08)}.pt-element:not(.empty):hover{transform:translateY(-4px) scale(1.05);z-index:20;box-shadow:0 12px 24px rgba(0,0,0,.15)}.pt-element.empty{background:transparent;pointer-events:none}.pt-element.dim{opacity:.1;pointer-events:none}.pt-el-number{font-size:9px;font-weight:600;opacity:.6;line-height:1}.pt-el-symbol{font-size:24px;font-weight:700;letter-spacing:-.5px;line-height:1;margin:auto 0}.pt-el-name{font-size:6.5px;font-weight:500;text-transform:capitalize;line-height:1.15;opacity:.75}.pt-element.recognize{background:linear-gradient(145deg,var(--cat-recognize) 0,#374151 100%);color:var(--cat-recognize-text)}.pt-element.engage{background:linear-gradient(145deg,var(--cat-engage) 0,#f0abfc 100%);color:var(--cat-engage-text)}.pt-element.personalize{background:linear-gradient(145deg,var(--cat-personalize) 0,#d4ff5e 100%);color:var(--cat-personalize-text)}.pt-element.excite{background:linear-gradient(145deg,var(--cat-excite) 0,#7dd3fc 100%);color:var(--cat-excite-text)}.pt-element.automate{background:linear-gradient(145deg,var(--cat-automate) 0,#fdba74 100%);color:var(--cat-automate-text)}.pt-element.track{background:linear-gradient(145deg,var(--cat-track) 0,#c4b5fd 100%);color:var(--cat-track-text)}.pt-legend-container{position:absolute;top:60px;left:220px;width:630px;background:var(--bg-primary);padding:24px;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 4px 12px rgba(0,0,0,.04);z-index:10}.pt-legend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 16px}.legend-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer;transition:all .2s ease;padding:6px 8px;border-radius:8px}.legend-item:hover{background:rgba(0,0,0,.03)}.legend-item.active{background:rgba(0,0,0,.05)}.pt-legend-header{display:flex;align-items:center;gap:8px;margin-bottom:2px}.pt-legend-dot{width:16px;height:16px;border-radius:4px;flex-shrink:0}.pt-legend-title{font-size:13px;font-weight:700;color:var(--text-primary);line-height:1;letter-spacing:-.01em}.pt-legend-desc{font-size:11px;color:var(--text-secondary);line-height:1.3;font-weight:500;padding-left:24px}.bottom-section{margin-top:32px;display:flex;flex-direction:column;gap:5px;padding-left:calc(2 * 73px);justify-content:center}.bottom-row{display:grid;grid-template-columns:repeat(14,68px);gap:5px}.footer-legend{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;margin-top:56px;padding:24px 40px;background:var(--bg-secondary);border-radius:16px;border:1px solid #e5e7eb}.periodic-footer{margin-top:48px;text-align:center;padding:24px}.periodic-footer p{font-size:14px;color:var(--text-tertiary)}.periodic-footer a{color:var(--text-primary);text-decoration:none;font-weight:600}.periodic-footer a:hover{color:#65a30d}.pt-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(17,24,39,.6);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:all .4s ease}.pt-modal-overlay.active{opacity:1;visibility:visible}.pt-modal{background:var(--bg-primary);border-radius:20px;max-width:480px;width:100%;box-shadow:0 32px 64px rgba(0,0,0,.2);transform:scale(.9) translateY(20px);transition:transform .4s cubic-bezier(.2,.8,.2,1);max-height:90vh;overflow-y:auto}.pt-modal-overlay.active .pt-modal{transform:scale(1) translateY(0)}.pt-modal-header{display:flex;align-items:flex-start;gap:20px;padding:28px 28px 20px;border-bottom:1px solid #e5e7eb}.pt-modal-element{width:64px;height:64px;border-radius:12px;padding:8px;display:flex;flex-direction:column;flex-shrink:0}.pt-modal-element .pt-el-number{font-size:10px}.pt-modal-element .pt-el-symbol{font-size:24px}.pt-modal-title-group{flex:1;padding-top:4px}.pt-modal-category{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px}.pt-modal-title{font-family:Playfair Display,serif;font-size:20px;font-weight:600;color:var(--text-primary)}.pt-modal-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:var(--bg-secondary);cursor:pointer;transition:all .2s ease;color:var(--text-secondary)}.pt-modal-close:hover{background:#e5e7eb;color:var(--text-primary)}.pt-modal-body{padding:24px 28px 28px}.pt-modal-description{font-size:15px;color:var(--text-secondary);line-height:1.7;margin-bottom:24px}.pt-modal-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-tertiary);margin-bottom:14px}.pt-modal-tips{display:flex;flex-direction:column;gap:8px}.pt-modal-tip{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--text-secondary);padding:12px 16px;background:var(--bg-secondary);border-radius:10px;transition:all .2s ease}.pt-modal-tip:hover{background:#f3f4f6}.pt-modal-tip svg{width:18px;height:18px;color:#65a30d;flex-shrink:0;margin-top:1px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:1024px){.pt-legend-container{position:static;width:100%;margin-bottom:24px}.pt-legend-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.periodic-wrapper{padding:40px 16px 60px}.periodic-header h1{font-size:32px;letter-spacing:-1px}.periodic-header p{font-size:15px}.header-badge{font-size:10px;padding:8px 16px;letter-spacing:1.5px}.cta-banner{flex-direction:column;padding:20px;text-align:center}.cta-content h2{font-size:20px}.cta-content p{font-size:13px}.cta-button{width:100%;justify-content:center}.periodic-table-container{padding:24px 16px;border-radius:20px;overflow-x:auto;-webkit-overflow-scrolling:touch}.periodic-table-grid{grid-template-columns:repeat(18,56px);gap:4px;min-width:-moz-max-content;min-width:max-content}.pt-element{width:56px;height:56px;padding:5px 6px;border-radius:6px}.pt-el-number{font-size:8px}.pt-el-symbol{font-size:20px}.pt-el-name{font-size:5.5px}.pt-legend-grid{grid-template-columns:1fr}.legend-item{padding:10px 12px}.pt-legend-title{font-size:14px}.pt-legend-desc{font-size:12px;padding-left:24px}.bottom-section{padding-left:calc(2 * 60px)}.bottom-row{grid-template-columns:repeat(14,56px);gap:4px}.footer-legend{gap:16px;padding:20px;margin-top:40px}.pt-modal{max-width:100%;margin:16px;border-radius:16px}.pt-modal-header{padding:20px 20px 16px;flex-wrap:wrap}.pt-modal-element{width:56px;height:56px}.pt-modal-title{font-size:18px}.pt-modal-body{padding:20px}.pt-modal-description{font-size:14px}}@media (max-width:480px){.periodic-wrapper{padding:32px 12px 48px}.periodic-header h1{font-size:28px}.periodic-header p{font-size:14px}.periodic-table-container{padding:16px 12px;border-radius:16px}.periodic-table-grid{grid-template-columns:repeat(18,48px);gap:3px}.pt-element{width:48px;height:48px;padding:4px 5px;border-radius:5px}.pt-el-number{font-size:7px}.pt-el-symbol{font-size:16px}.pt-el-name{font-size:5px}.bottom-section{padding-left:calc(2 * 51px)}.bottom-row{grid-template-columns:repeat(14,48px);gap:3px}.footer-legend{flex-direction:column;gap:12px;padding:16px}.pt-legend-item{width:100%}.pt-modal-overlay{padding:12px}.pt-modal{margin:0}.pt-modal-header{padding:16px;gap:12px}.pt-modal-element{width:48px;height:48px;padding:6px}.pt-modal-element .pt-el-symbol{font-size:20px}.pt-modal-title{font-size:16px}.pt-modal-category{font-size:10px}.pt-modal-body{padding:16px}.pt-modal-description{font-size:13px;margin-bottom:20px}.pt-modal-tip{padding:10px 12px;font-size:13px}}@media (max-width:768px){.periodic-table-container:after{content:"← Scroll horizontally →";display:block;text-align:center;font-size:11px;color:var(--text-tertiary);margin-top:16px;font-weight:500;letter-spacing:.5px;animation:fadeIn 1s ease-in-out .5s both}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}