:root{--coral: #E1512C;--coral-light: #E8735A;--coral-dark: #C43D1A;--teal: #4BB7A5;--teal-light: #6DC9BA;--teal-dark: #3A9A8A;--charcoal: #3D3D3D;--grey: #6B7280;--light-grey: #F7F8FA}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--light-grey)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:var(--teal-light);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--teal)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes hexagonPulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.05);opacity:.8}}@keyframes floatHex{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(5deg)}}.fade-in{animation:fadeIn .3s ease-out}.pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.gradient-bg{background:var(--coral)}.gradient-bg-teal,.gradient-bg-mixed{background:var(--teal)}.gradient-text{color:var(--coral)}.hexagon{position:relative;width:60px;height:52px;background:var(--teal);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)}.hexagon-small{width:40px;height:35px}.hexagon-large{width:80px;height:69px}.hexagon-coral{background:var(--coral)}.hexagon-teal{background:var(--teal)}.hexagon-gradient{background:var(--coral)}.hexagon-pattern{position:relative;overflow:hidden}.hexagon-pattern:before{content:"";position:absolute;top:-50px;right:-50px;width:200px;height:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cpolygon points='30,0 60,15 60,45 30,60 0,45 0,15' fill='none' stroke='%234BB7A5' stroke-width='1' opacity='0.15'/%3E%3C/svg%3E");opacity:.5;pointer-events:none}.card-hover{transition:transform .2s ease,box-shadow .2s ease}.card-hover:hover{transform:translateY(-4px);box-shadow:0 12px 40px #4bb7a526}.card-coral-accent{border-left:4px solid var(--coral)}.card-teal-accent{border-left:4px solid var(--teal)}.chat-message{max-width:80%;padding:12px 16px;border-radius:16px;margin-bottom:8px}.chat-message.user{background:var(--coral);color:#fff;margin-left:auto;border-bottom-right-radius:4px}.chat-message.assistant{background:#f3f4f6;color:var(--charcoal);margin-right:auto;border-bottom-left-radius:4px;border-left:3px solid var(--teal)}.timer-display{font-family:Monaco,Menlo,monospace;font-size:2rem;font-weight:600}.timer-overtime{color:var(--coral);animation:pulse 1s ease-in-out infinite}.step-indicator{display:flex;align-items:center;gap:8px}.step-dot{width:12px;height:12px;border-radius:50%;background:#e5e7eb;transition:all .3s ease}.step-dot.active{background:var(--coral);transform:scale(1.2)}.step-dot.completed{background:var(--teal)}.step-hexagon{width:32px;height:28px;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);background:#e5e7eb;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;color:#fff;transition:all .3s ease}.step-hexagon.active{background:var(--coral);transform:scale(1.1)}.step-hexagon.completed{background:var(--teal)}.transcription-item{padding:12px;border-left:3px solid transparent;transition:all .2s ease}.transcription-item:hover{background:#4bb7a50d;border-left-color:var(--teal)}.transcription-item .speaker{font-weight:600;color:var(--coral);margin-bottom:4px}.transcription-item .timestamp{font-size:.75rem;color:var(--grey)}.mode-card{position:relative;overflow:hidden;cursor:pointer}.mode-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#4bb7a514;opacity:0;transition:opacity .3s ease}.mode-card:hover:before{opacity:1}.mode-card:after{content:"";position:absolute;top:-20px;right:-20px;width:80px;height:69px;background:var(--teal);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);opacity:.08;transition:all .3s ease}.mode-card:hover:after{opacity:.15;transform:scale(1.2)}.audio-visualizer{height:60px;background:#4bb7a526;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:4px}.audio-bar{width:4px;background:var(--coral);border-radius:2px;animation:audioBar .5s ease-in-out infinite alternate}@keyframes audioBar{0%{height:20%}to{height:100%}}.audio-bar:nth-child(2){animation-delay:.1s}.audio-bar:nth-child(3){animation-delay:.2s}.audio-bar:nth-child(4){animation-delay:.3s}.audio-bar:nth-child(5){animation-delay:.4s}.badge-coral{background:#e1512c1a;color:var(--coral);padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:500}.badge-teal{background:#4bb7a51a;color:var(--teal-dark);padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:500}.decorative-hexagons{position:absolute;pointer-events:none;z-index:0}.decorative-hexagons .hex{position:absolute;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);animation:hexagonPulse 4s ease-in-out infinite}.decorative-hexagons .hex-1{width:120px;height:104px;background:#4bb7a51a;top:-40px;right:-30px;animation-delay:0s}.decorative-hexagons .hex-2{width:80px;height:69px;background:#e1512c14;top:60px;right:40px;animation-delay:1s}.decorative-hexagons .hex-3{width:50px;height:43px;background:#4bb7a51f;top:100px;right:-10px;animation-delay:2s}.auth-background{min-height:100vh;background:var(--teal);position:relative;overflow:hidden}.auth-background:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='87'%3E%3Cpolygon points='50,0 100,25 100,75 50,100 0,75 0,25' fill='none' stroke='white' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");background-size:100px 87px;pointer-events:none}.text-coral{color:var(--coral)}.text-teal{color:var(--teal)}.bg-coral{background-color:var(--coral)}.bg-teal{background-color:var(--teal)}.border-coral{border-color:var(--coral)}.border-teal{border-color:var(--teal)}.hex-icon-container{position:relative;display:inline-flex;align-items:center;justify-content:center}.hex-icon-container:before{content:"";position:absolute;width:56px;height:48px;background:var(--teal);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);z-index:0}.hex-icon-container>*{position:relative;z-index:1;color:#fff}