*,*:before,*:after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}:root{--primary-color: #1e40af;--primary-light: #3b82f6;--secondary-color: #28a745;--gold-color: #d4af37;--danger-color: #dc2626;--text-primary: #1f2937;--text-secondary: #4b5563;--text-muted: #9ca3af;--bg-primary: #ffffff;--bg-secondary: #f9fafb;--bg-tertiary: #e5e7eb;--red-suits: #dc2626;--black-suits: #1f2937;--primary-dark: #1e3f73;--secondary-light: #48c468;--secondary-dark: #1e7e34;--accent-color: #ffc107;--warning-color: #fd7e14;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--border-radius: 8px;--border-radius-sm: 4px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1)}body{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;color:var(--text-primary);background-color:var(--bg-secondary)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-md);font-size:.9rem;font-weight:500;border:none;border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;text-decoration:none;gap:var(--spacing-xs)}.btn--primary{background:var(--primary-color);color:#fff}.btn--primary:hover{background:var(--primary-light)}.btn--small{padding:var(--spacing-xs) var(--spacing-sm);font-size:.8rem}.app-container{max-width:1200px;margin:0 auto;padding:var(--spacing-xl);min-height:100vh;display:flex;flex-direction:column}.app-header{text-align:center;margin-bottom:var(--spacing-2xl);padding:var(--spacing-xl);background:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-md)}.app-title{font-size:2.2rem;font-weight:700;color:var(--gold-color);margin-bottom:var(--spacing-sm);text-shadow:0 2px 4px rgb(212 175 55 / .2);word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.app-subtitle{font-size:1.25rem;font-weight:400;color:var(--text-secondary);margin-top:0;margin-bottom:var(--spacing-md)}.app-description{font-size:1.1rem;color:var(--text-secondary);max-width:700px;margin:0 auto var(--spacing-xl);line-height:1.7}.main-content{display:grid;gap:var(--spacing-xl);grid-template-columns:1fr;flex:1}.input-section{background:var(--bg-primary);padding:var(--spacing-xl);border-radius:var(--border-radius);box-shadow:var(--shadow-md)}.result-section{background:var(--bg-primary);padding:var(--spacing-xl);border-radius:var(--border-radius);box-shadow:var(--shadow-md);border-left:4px solid var(--primary-color)}.footer{margin-top:var(--spacing-2xl);text-align:center;color:var(--text-muted);font-size:.9rem;padding:var(--spacing-lg);border-top:1px solid var(--bg-tertiary)}.text-input-container{margin-bottom:var(--spacing-lg)}.text-input{width:100%;margin-bottom:var(--spacing-md)}.input-example{font-size:.9rem;color:var(--text-secondary);margin-bottom:var(--spacing-md);text-align:center}.input-example code{background:var(--bg-secondary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-family:inherit}.error-message{color:var(--danger-color);font-weight:500;text-align:center;margin-bottom:var(--spacing-md)}.result-total{font-size:1.5rem;font-weight:700;color:var(--gold-color);text-align:center;margin-bottom:var(--spacing-lg);padding:var(--spacing-lg);background:linear-gradient(135deg,var(--bg-secondary),var(--bg-primary));border-radius:var(--border-radius);border:2px solid var(--gold-color);text-shadow:0 2px 4px rgb(212 175 55 / .2)}.breakdown-toggle{background:var(--primary-color);color:#fff;padding:var(--spacing-md) var(--spacing-lg);font-weight:600;display:inline-flex;align-items:center;gap:var(--spacing-sm);margin:0 auto var(--spacing-lg)}.breakdown-toggle:hover:not(:disabled){background:var(--primary-light)}.breakdown-toggle svg{flex-shrink:0}.breakdown-section{margin-top:var(--spacing-lg);padding:var(--spacing-lg);background:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--bg-tertiary);text-align:left}.breakdown-title{font-size:1.3rem;font-weight:600;color:var(--primary-color);margin-bottom:var(--spacing-lg);text-align:center;border-bottom:2px solid var(--bg-tertiary);padding-bottom:var(--spacing-md)}.breakdown-category{margin-bottom:var(--spacing-lg);background:var(--bg-primary);padding:var(--spacing-md);border-radius:var(--border-radius-sm);border:1px solid var(--bg-tertiary)}.breakdown-category:last-child{margin-bottom:0}.breakdown-category>strong{display:block;font-size:1.1rem;color:var(--primary-color);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-xs);border-bottom:1px solid var(--bg-tertiary)}.breakdown-list{margin:0;padding:0;list-style:none}.breakdown-list li{display:flex;justify-content:space-between;align-items:flex-start;padding:var(--spacing-xs) 0;border-bottom:1px solid var(--bg-tertiary);margin-bottom:0;max-width:200px}.breakdown-list li:last-child{border-bottom:none}.breakdown-list li:before{content:"•";color:var(--primary-color);font-weight:700;margin-right:var(--spacing-sm);flex-shrink:0}.breakdown-sublist{margin:var(--spacing-sm) 0 0 0;padding:var(--spacing-sm);list-style:none;background:var(--bg-secondary);border-radius:var(--border-radius-sm)}.breakdown-sublist li{font-size:.9rem;color:var(--text-secondary);border-bottom:none;padding:var(--spacing-xs) 0;justify-content:flex-start}.breakdown-sublist li:before{content:"→";color:var(--secondary-color);margin-right:var(--spacing-sm)}.breakdown-total{font-weight:600;color:var(--primary-color);font-size:1.1rem;background:var(--bg-primary);padding:var(--spacing-md);border-radius:var(--border-radius-sm);border:2px solid var(--primary-light);margin:var(--spacing-md) 0 0 0;text-align:center}.suit-name{font-weight:500;min-width:30px;flex-shrink:0}.suit-points{font-weight:600;color:var(--primary-color);margin-left:auto}.navigation{background:var(--bg-primary);border-bottom:1px solid var(--bg-tertiary);position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm)}.nav-container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg);display:flex;align-items:center;justify-content:space-between;height:60px}.nav-brand{display:flex;align-items:center;gap:var(--spacing-sm);font-weight:700;color:var(--gold-color);text-decoration:none}.nav-brand:hover{color:var(--gold-color)}.nav-logo{height:32px;width:auto;flex-shrink:0;margin-right:var(--spacing-sm)}.nav-title{font-size:1.25rem}.mobile-menu-toggle{display:none;background:none;border:none;color:var(--text-primary);padding:var(--spacing-sm);cursor:pointer}.nav-menu{display:flex;align-items:center;gap:var(--spacing-sm)}.nav-item{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:none;border:none;color:var(--text-primary);font-weight:500;border-radius:var(--border-radius);transition:all .2s ease;cursor:pointer;text-decoration:none}.nav-item:hover{background:var(--bg-secondary);color:var(--primary-color)}.nav-item--active{background:var(--primary-color);color:#fff}.nav-item--active:hover{background:var(--primary-light)}.books-section{max-width:1000px;margin:0 auto;padding:var(--spacing-xl)}.books-intro{text-align:center;margin-bottom:var(--spacing-2xl);color:var(--text-secondary);font-size:1.1rem;line-height:1.6}.featured-book{background:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-2xl);padding:var(--spacing-xl);border:2px solid var(--gold-color)}.featured-book-content{display:flex;gap:var(--spacing-xl);align-items:flex-start}.featured-book-image{flex-shrink:0;width:150px}.book-image{width:100%;margin-bottom:var(--spacing-md);display:flex;justify-content:center}.book-cover{width:120px;height:auto;border-radius:var(--border-radius-sm);box-shadow:var(--shadow-md);transition:transform .2s ease}.book-cover--featured{width:150px}.book-cover:hover{transform:scale(1.02);box-shadow:var(--shadow-lg)}.book-image-placeholder{width:120px;height:160px;background:var(--bg-tertiary);border-radius:var(--border-radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-muted);border:2px dashed var(--bg-tertiary)}.featured-book-image .book-image-placeholder{width:150px;height:200px}.featured-book-info{flex:1}.book-category{display:inline-block;background:var(--primary-color);color:#fff;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-sm)}.book-category--featured{background:var(--gold-color);color:var(--text-primary)}.featured-book-title{font-size:1.75rem;font-weight:700;color:var(--text-primary);margin:var(--spacing-sm) 0}.featured-book-author{color:var(--text-secondary);font-size:1.1rem;font-weight:500;margin-bottom:var(--spacing-md)}.featured-book-description{color:var(--text-secondary);line-height:1.6;margin-bottom:var(--spacing-md);font-size:1.05rem}.books-grid-section{margin-top:var(--spacing-2xl)}.books-grid-section h3{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xl);text-align:center}.books-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-xl)}.book-card{background:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-md);padding:var(--spacing-lg);border:1px solid var(--bg-tertiary);transition:all .2s ease;display:flex;flex-direction:column}.book-info{height:100%;display:flex;flex-direction:column}.book-title{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin:var(--spacing-sm) 0;line-height:1.3}.book-author{color:var(--text-secondary);font-weight:500;margin-bottom:var(--spacing-md)}.book-description{color:var(--text-secondary);line-height:1.6;flex:1;margin-bottom:var(--spacing-md)}.amazon-button{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:#f90;color:#232f3e;border:none;border-radius:var(--border-radius);font-weight:600;font-size:.9rem;text-decoration:none;cursor:pointer;transition:all .2s ease;margin-top:var(--spacing-md);box-shadow:var(--shadow-sm)}.amazon-button:hover{background:#ffad33;transform:translateY(-1px);box-shadow:var(--shadow-md);color:#232f3e}.amazon-button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.amazon-button--featured{padding:var(--spacing-md) var(--spacing-lg);font-size:1rem;font-weight:700}.amazon-button svg{flex-shrink:0}@media (max-width: 768px){.article-page{padding:var(--spacing-lg)}.article-title{font-size:2rem}.article-share{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.nav-menu{display:none}.nav-menu--open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--bg-primary);border-top:1px solid var(--bg-tertiary);flex-direction:column;padding:var(--spacing-md);box-shadow:0 4px 6px #0000001a;z-index:1000}.mobile-menu-toggle{display:block}.books-grid,.articles-grid{grid-template-columns:1fr}.article-footer{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.article-actions{flex-direction:column;align-items:stretch}.share-buttons{justify-content:center}.featured-book-content{flex-direction:column;align-items:center;text-align:center}.featured-book-image{width:auto}.book-cover--featured{width:120px}.featured-book-image .book-image-placeholder{width:120px;height:160px}}.practice-container{max-width:800px;margin:0 auto;padding:var(--spacing-xl);background:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-md)}.practice-header{text-align:center;margin-bottom:var(--spacing-xl)}.practice-header h1{color:var(--primary-color);margin-bottom:var(--spacing-md)}.progress{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.progress-bar{width:100%;max-width:300px;height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:var(--primary-color);transition:width .3s ease}.practice-content{display:flex;flex-direction:column;gap:var(--spacing-xl)}.hand-section{text-align:center;background:var(--bg-secondary);padding:var(--spacing-xl);border-radius:var(--border-radius);margin-bottom:var(--spacing-xl);border:1px solid var(--bg-tertiary)}.hand-section h2{color:var(--primary-color);margin-bottom:var(--spacing-lg);font-size:1.4rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.hand-section h2:before{content:"🎯";font-size:1.2rem}.score-summary{text-align:center;margin-bottom:var(--spacing-xl)}.score-display{background:var(--bg-secondary);padding:var(--spacing-xl);border-radius:var(--border-radius);margin-bottom:var(--spacing-lg)}.score-display h2{color:var(--primary-color);margin-bottom:var(--spacing-md)}.percentage{font-size:3rem;font-weight:700;color:var(--secondary-color)}.score-breakdown{display:grid;gap:var(--spacing-sm);max-width:600px;margin:0 auto}.hand-result{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:var(--spacing-md);padding:var(--spacing-md);border-radius:var(--border-radius-sm);align-items:center}.hand-result.clickable{cursor:pointer;transition:all .2s ease;border:1px solid transparent}.hand-result.clickable:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:var(--primary-color)}.hand-result.clickable:active{transform:translateY(0)}.hand-result.correct{background:#28a7451a;border-left:4px solid var(--secondary-color)}.hand-result.incorrect{background:#dc26261a;border-left:4px solid var(--danger-color)}.result-icon{font-weight:700;font-size:1.2rem}.hand-result.correct .result-icon{color:var(--secondary-color)}.hand-result.incorrect .result-icon{color:var(--danger-color)}.review-content{margin-bottom:var(--spacing-xl)}.answer-comparison{display:flex;flex-direction:column;gap:var(--spacing-md);margin:var(--spacing-xl) 0;padding:var(--spacing-lg);background:var(--bg-secondary);border-radius:var(--border-radius)}.user-answer,.correct-answer{padding:var(--spacing-md);border-radius:var(--border-radius-sm)}.user-answer.correct{background:#28a7451a;border:1px solid var(--secondary-color)}.user-answer.incorrect{background:#dc26261a;border:1px solid var(--danger-color)}.correct-answer{background:var(--bg-primary);border:1px solid var(--bg-tertiary)}.result-indicator{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);font-weight:700;text-align:center}.result-indicator.correct{background:var(--secondary-color);color:#fff}.result-indicator.incorrect{background:var(--danger-color);color:#fff}.practice-actions,.review-navigation{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}.nav-button,.review-button,.new-session-button{padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--border-radius);font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease}.nav-button.primary,.new-session-button{background:var(--primary-color);color:#fff}.nav-button.primary:hover,.new-session-button:hover{background:var(--primary-light)}.nav-button.secondary{background:var(--bg-tertiary);color:var(--text-primary)}.nav-button.secondary:hover{background:var(--text-muted)}.nav-button:disabled{opacity:.5;cursor:not-allowed}.review-button{background:var(--secondary-color);color:#fff}.review-button:hover{background:var(--secondary-dark)}.practice-loading{text-align:center;padding:var(--spacing-2xl);color:var(--text-secondary)}@media (max-width: 768px){.practice-container{padding:var(--spacing-md);margin:var(--spacing-md)}.answer-input-group{flex-direction:column;gap:var(--spacing-md)}.answer-input{width:200px}.hand-result{grid-template-columns:1fr;text-align:center;gap:var(--spacing-xs)}.practice-actions,.review-navigation{flex-direction:column;align-items:center}.nav-button,.review-button,.new-session-button{width:100%;max-width:250px}}.hand-selector{background:var(--bg-secondary);padding:var(--spacing-lg);border-radius:var(--border-radius);margin-bottom:var(--spacing-xl);text-align:center}.hand-selector-title{font-weight:500;color:var(--text-primary);margin-bottom:var(--spacing-md);font-size:1rem}.hand-selector-buttons{display:flex;gap:var(--spacing-sm);justify-content:center;flex-wrap:wrap}.hand-selector-button{width:40px;height:40px;border:2px solid transparent;border-radius:var(--border-radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.hand-selector-button.correct{background:var(--secondary-color);color:#fff}.hand-selector-button.correct:hover{background:var(--secondary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.hand-selector-button.incorrect{background:var(--danger-color);color:#fff}.hand-selector-button.incorrect:hover{background:#b91c26;transform:translateY(-1px);box-shadow:var(--shadow-md)}.hand-selector-button.active{border-color:var(--primary-color);box-shadow:0 0 0 2px #1e40af33}.hand-selector-button.correct.active{border-color:var(--bg-primary);box-shadow:0 0 0 3px var(--secondary-color)}.hand-selector-button.incorrect.active{border-color:var(--bg-primary);box-shadow:0 0 0 3px var(--danger-color)}.answer-section{text-align:center;background:var(--bg-secondary);padding:var(--spacing-xl);border-radius:var(--border-radius);border:1px solid var(--bg-tertiary)}.answer-section label{display:block;font-weight:600;margin-bottom:var(--spacing-lg);color:var(--primary-color);font-size:1.2rem}.answer-input-group{display:flex;gap:var(--spacing-lg);justify-content:center;align-items:center;margin-bottom:var(--spacing-lg)}.answer-input{padding:var(--spacing-lg);border:2px solid var(--bg-tertiary);border-radius:var(--border-radius);font-size:1.3rem;font-weight:600;text-align:center;width:180px;transition:all .2s ease;box-shadow:var(--shadow-sm)}.answer-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #1e40af1a;transform:translateY(-1px)}.submit-button{padding:var(--spacing-lg) var(--spacing-xl);background:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius);font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-md);min-width:120px}.submit-button:hover{background:var(--primary-light);transform:translateY(-1px);box-shadow:var(--shadow-lg)}.submit-button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.hint{color:var(--text-secondary);font-style:italic;margin-top:var(--spacing-lg);font-size:1rem;background:var(--bg-primary);padding:var(--spacing-md);border-radius:var(--border-radius-sm);border-left:4px solid var(--primary-color)}.score-feedback{background:var(--bg-secondary);padding:var(--spacing-xl);border-radius:var(--border-radius);margin-bottom:var(--spacing-lg);border-left:4px solid var(--primary-color);text-align:left}.score-feedback h3{margin:0 0 var(--spacing-sm) 0;font-size:1.3rem;font-weight:600}.score-feedback p{margin:0;color:var(--text-secondary);line-height:1.5;font-size:1rem}.feedback-perfect{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-left-color:var(--gold-color)}.feedback-perfect h3{color:var(--gold-color)}.feedback-excellent{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-left-color:var(--secondary-color)}.feedback-excellent h3{color:var(--secondary-color)}.feedback-good{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-left-color:var(--primary-color)}.feedback-good h3{color:var(--primary-color)}.feedback-progress{background:linear-gradient(135deg,#fefce8,#fef3c7);border-left-color:var(--accent-color)}.feedback-progress h3{color:#d97706}.feedback-learning{background:linear-gradient(135deg,#fdf4ff,#fae8ff);border-left-color:#a855f7}.feedback-learning h3{color:#a855f7}.feedback-practice{background:linear-gradient(135deg,#fff7ed,#fed7aa);border-left-color:var(--warning-color)}.feedback-practice h3{color:var(--warning-color)}.feedback-basics{background:linear-gradient(135deg,#fef2f2,#fecaca);border-left-color:var(--danger-color)}.feedback-basics h3{color:var(--danger-color)}