.app-container{max-width:1280px;margin:0 auto;padding:56px 32px}.app-header{text-align:center;margin-bottom:48px}.header-eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.15em;font-size:.75rem;font-weight:500;color:var(--text-tertiary);margin-bottom:16px}.app-header h1{font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.1;margin:0 0 14px;color:var(--text-primary)}.header-description{max-width:720px;margin:0 auto;color:var(--text-secondary);font-size:1.05rem;line-height:1.8}.error-banner{background:#ffe5e5;border:1px solid #FFB8B8;color:#a60000;padding:16px 20px;border-radius:var(--radius-md);margin-bottom:32px;font-size:.95rem}.app-main{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}.content-grid{display:contents}.left-panel,.right-panel{display:flex;flex-direction:column;gap:40px}.input-section,.emotion-section,.comparison-section,.insights-section{width:100%}.comparison-section,.insights-section{padding-top:32px;border-top:1px solid var(--border-subtle)}.section-intro{margin-bottom:24px}.section-intro h2{font-size:1.4rem;margin:0 0 8px;color:var(--text-primary)}.section-intro p{color:var(--text-secondary);font-size:.95rem;line-height:1.6;margin:0}.players-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.player-item h3{font-size:1.1rem;margin:0 0 4px;color:var(--text-primary)}.player-item p{color:var(--text-tertiary);font-size:.85rem;margin:0 0 16px}.emotion-explanation{margin-top:20px}.emotion-explanation h3{font-size:1.1rem;margin:0 0 12px;color:var(--text-primary);font-weight:500}.emotion-explanation p{margin:0 0 8px;color:var(--text-secondary);font-size:.9rem;line-height:1.5}.emotion-explanation p:last-child{margin-bottom:0}.emotion-explanation strong{color:var(--text-primary);font-weight:500}.loading-spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(26,26,26,.2);border-top-color:var(--text-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.app-container{padding:40px 20px}.insights-section{grid-template-columns:1fr}}.input-area{display:flex;flex-direction:column;gap:20px}.input-header{display:flex;flex-direction:column;gap:8px}.input-header h2{font-size:1.2rem;margin:0;color:var(--text-primary)}.input-copy{color:var(--text-secondary);font-size:.9rem;line-height:1.6;margin:0}.text-input{width:100%;background:var(--bg-inner);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px;color:var(--text-primary);font-family:var(--font-body);font-size:.95rem;line-height:1.6;resize:vertical;min-height:140px;transition:border-color .2s ease,box-shadow .2s ease}.text-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px #dc9b9b1a}.text-input::placeholder{color:var(--text-tertiary)}.input-actions{display:flex;justify-content:flex-end;gap:16px}.emotion-visualizer{width:100%}.emotion-header{text-align:center}.emotion-header h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-tertiary);margin:0 0 16px;font-weight:500}.emotion-display{text-align:center;margin-bottom:24px}.emotion-emoji{font-size:3.6rem;margin-bottom:14px;display:block}.emotion-name{font-family:var(--font-heading);font-size:1.85rem;font-weight:400;letter-spacing:-.01em;margin:0}.emotion-name[data-emotion=happy]{color:var(--color-happy)}.emotion-name[data-emotion=excited]{color:var(--color-excited)}.emotion-name[data-emotion=sad]{color:var(--color-sad)}.emotion-name[data-emotion=angry]{color:var(--color-angry)}.emotion-name[data-emotion=calm]{color:var(--color-calm)}.emotion-name[data-emotion=neutral]{color:var(--color-neutral)}.intensity-container{display:flex;flex-direction:column;gap:10px}.intensity-header{display:flex;justify-content:space-between;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);font-weight:500;margin-bottom:8px}.intensity-value{color:var(--text-primary)}.intensity-track{width:100%;height:6px;background:#00000014;border-radius:999px;overflow:hidden}.intensity-bar{height:100%;border-radius:999px;transition:width .6s ease;background:var(--accent-primary)}.insights-panel{width:100%;padding-top:32px;border-top:1px solid var(--border-subtle)}.insights-header{margin-bottom:20px}.insights-header h3{font-size:1.1rem;color:var(--text-primary);margin:0 0 4px;font-weight:500}.insights-header p{margin:0;font-size:.9rem;color:var(--text-secondary);line-height:1.5}.metrics-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.metric-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}.metric-divider{color:var(--text-tertiary);font-size:1.2rem;margin:0 12px}.metric-label{font-size:.75rem;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.1em;font-weight:500}.metric-value{font-family:var(--font-heading);font-size:1.4rem;font-weight:400;color:var(--text-primary);margin:0;line-height:1.2}.metric-value small{font-size:.7rem;color:var(--text-secondary);font-weight:400}.insights-explanation{margin-top:16px}.insights-explanation p{margin:0;font-size:.9rem;color:var(--text-secondary);line-height:1.5}.player-card{display:flex;flex-direction:column;gap:18px}.player-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.player-title{font-size:.95rem;font-weight:500;margin:0;color:var(--text-primary)}.download-link{color:var(--text-secondary);text-decoration:none;transition:color .2s ease;display:flex;align-items:center;justify-content:center;padding:6px;flex-shrink:0}.download-link:hover{color:var(--accent-primary)}.player-controls{display:flex;align-items:center;gap:14px}.play-button{background:var(--text-primary);color:var(--bg-inner);width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,background .2s ease;flex-shrink:0}.play-button:hover{transform:scale(1.06);background:var(--accent-primary)}.play-button svg{width:18px;height:18px}.progress-container{flex:1;min-width:0}.progress-bar{width:100%;height:4px;background:#0000001a;border-radius:999px;cursor:pointer;position:relative;transition:height .2s ease}.progress-bar:hover{height:5px}.progress-fill{height:100%;background:var(--text-primary);border-radius:999px;transition:width .1s linear}.emotional-card .progress-fill{background:var(--accent-primary)}.time-display{font-size:.85rem;color:var(--text-secondary);font-weight:500;min-width:38px;text-align:right;font-variant-numeric:tabular-nums}:root{--bg-main: #f2f6f8;--bg-surface: #FFFFFF;--bg-inner: #F7F4ED;--border-subtle: rgba(0, 0, 0, .06);--text-primary: #2F2F2F;--text-secondary: #6B7280;--text-tertiary: #9CA3AF;--accent-primary: #AFCBDA;--accent-secondary: #9FBBC9;--accent-gradient: linear-gradient(135deg, #AFCBDA 0%, #9FBBC9 100%);--accent-gradient-hover: linear-gradient(135deg, #9FBBC9 0%, #8FABBA 100%);--color-happy: #C9A879;--color-excited: #C68FA0;--color-sad: #8B9DB5;--color-angry: #B88080;--color-calm: #9AB89E;--color-neutral: #9CA3AF;--font-heading: "Playfair Display", serif;--font-body: "Inter", sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .04);--shadow-md: 0 4px 16px rgba(0, 0, 0, .08)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background-color:var(--bg-main);color:var(--text-primary);min-height:100vh;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:400;letter-spacing:-.01em}.glass-panel{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm);transition:box-shadow .2s ease}.glass-panel:hover{box-shadow:var(--shadow-md)}.btn-primary{background:var(--accent-primary);color:#fff;border:none;padding:12px 28px;border-radius:var(--radius-md);font-family:var(--font-body);font-weight:500;font-size:.95rem;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary:hover{background:var(--accent-secondary);transform:translateY(-1px)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#0000001f;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#0003}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .3s ease forwards}