html,body{width:100%;height:100%}input::-ms-clear,input::-ms-reveal{display:none}*,*:before,*:after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}@-ms-viewport{width:device-width}body{margin:0}[tabindex="-1"]:focus{outline:none}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5em;font-weight:500}p{margin-top:0;margin-bottom:1em}abbr[title],abbr[data-original-title]{-webkit-text-decoration:underline dotted;text-decoration:underline;text-decoration:underline dotted;border-bottom:0;cursor:help}address{margin-bottom:1em;font-style:normal;line-height:inherit}input[type=text],input[type=password],input[type=number],textarea{-webkit-appearance:none}ol,ul,dl{margin-top:0;margin-bottom:1em}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:500}dd{margin-bottom:.5em;margin-left:0}blockquote{margin:0 0 1em}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}pre,code,kbd,samp{font-size:1em;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace}pre{margin-top:0;margin-bottom:1em;overflow:auto}figure{margin:0 0 1em}img{vertical-align:middle;border-style:none}a,area,button,[role=button],input:not([type=range]),label,select,summary,textarea{touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75em;padding-bottom:.3em;text-align:left;caption-side:bottom}input,button,select,optgroup,textarea{margin:0;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}input[type=radio],input[type=checkbox]{box-sizing:border-box;padding:0}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;margin:0;padding:0;border:0}legend{display:block;width:100%;max-width:100%;margin-bottom:.5em;padding:0;color:inherit;font-size:1.5em;line-height:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none!important}mark{padding:.2em;background-color:#feffe6}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6;font-weight:400;color-scheme:light;color:#1a1a1a;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{text-decoration:none;color:inherit;transition:color .2s ease}body{margin:0;min-width:320px;min-height:100vh}h1,h2,h3{font-weight:700;letter-spacing:-.01em}button{font-family:inherit;cursor:pointer}button:focus,button:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px}.language-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#0f172a;font-size:.75rem;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:all .18s ease;flex-shrink:0}.language-toggle:hover{border-color:#94a3b8;background:#f8fafc;box-shadow:0 4px 12px #0f172a14}.language-toggle:active{transform:scale(.95)}.language-toggle.animating{opacity:.6}.lang-badge{display:block;padding:.25rem 0;transition:transform .15s ease}.language-toggle.animating .lang-badge{transform:rotateY(180deg)}.header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #e6e8ef;padding:.9rem 1.5rem;box-shadow:0 2px 8px #0f172a0a}.header-container{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem}.header-left{flex-shrink:0}.logo{font-size:1.1rem;font-weight:700;color:#0f172a;text-decoration:none;letter-spacing:-.01em;transition:color .18s ease;cursor:pointer}.logo:hover{color:#1f2937}.header-nav{flex:1;display:flex;align-items:center;justify-content:center;gap:1.5rem;list-style:none;margin:0;padding:0}.nav-link{display:inline-block;padding:.5rem .75rem;font-size:.95rem;font-weight:500;color:#475569;background:none;border:none;cursor:pointer;transition:color .18s ease,background .18s ease;border-radius:6px;font-family:inherit}.nav-link:hover{color:#0f172a;background:#f1f3f7}.nav-link:active{background:#edf1f7}.header-right{flex-shrink:0;display:flex;align-items:center;gap:.75rem}@media(max-width:768px){.header{padding:.8rem 1rem}.header-container{gap:1rem}.logo{font-size:1rem}.header-nav{gap:1rem}.nav-link{padding:.4rem .6rem;font-size:.9rem}}@media(max-width:480px){.header{padding:.7rem .75rem}.header-container{gap:.75rem}.logo{font-size:.95rem}.header-nav{gap:.5rem}.nav-link{padding:.35rem .5rem;font-size:.85rem}}.disclosure{padding:4rem 1.5rem 4.25rem;background-color:#f9fafb;border-bottom:1px solid #e6e8ef}.disclosure-surface{max-width:840px;margin:0 auto;background:#fff;border:1px solid #e3e6ee;border-radius:12px;padding:2.5rem 2.25rem;box-shadow:0 10px 26px #0f172a0f}.disclosure-header{margin-bottom:1.5rem;display:grid;row-gap:.5rem}.disclosure-subtitle{font-size:.98rem;color:#4b5563;font-weight:500;margin:0}.disclosure-description{font-size:.98rem;color:#3f4a5a;line-height:1.8;margin-bottom:2rem}.disclosure-actions{display:flex;gap:1rem;margin-bottom:1.5rem}.disclosure-button{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.5rem;background-color:#0f172a;color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;border:1px solid #0f172a;border-radius:8px;transition:all .2s ease;cursor:pointer}.disclosure-button:hover{background-color:#1a2a4a;box-shadow:0 8px 20px #0f172a26;transform:translateY(-2px)}.disclosure-button:active{transform:translateY(0)}.button-icon{font-size:1.1rem}.button-text{display:inline}.disclosure-meta{padding-top:1rem;border-top:1px solid #edf1f7;color:#7b8a9a;font-size:.85rem;text-align:center}.disclosure-meta small{display:block}@media(max-width:768px){.disclosure{padding:3rem 1.25rem 3.25rem}.disclosure-surface{padding:2rem 1.75rem}.disclosure-description{font-size:.96rem}.disclosure-button{padding:.8rem 1.3rem;font-size:.9rem}}@media(max-width:480px){.disclosure{padding:2.5rem 1rem 2.75rem}.disclosure-surface{padding:1.75rem 1.5rem}.disclosure-description{font-size:.94rem;line-height:1.7}.disclosure-actions{flex-direction:column}.disclosure-button{width:100%;justify-content:center;padding:.75rem 1.2rem;font-size:.9rem}}.legal-container{max-width:900px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.7;color:#333;background-color:#fff}.legal-content{background:#fff;border-radius:8px;padding:40px;box-shadow:0 1px 3px #0000000d}.legal-content h1{font-size:32px;font-weight:700;margin-bottom:12px;color:#1a1a1a;border-bottom:3px solid #1890ff;padding-bottom:16px}.effective-date{font-size:14px;color:#666;margin-bottom:40px;font-weight:500}.legal-content section{margin-bottom:48px}.legal-content h2{font-size:24px;font-weight:600;margin-top:40px;margin-bottom:20px;color:#262626;padding-left:12px;border-left:4px solid #1890ff}.legal-content h3{font-size:18px;font-weight:600;margin-top:24px;margin-bottom:12px;color:#434343}.legal-content p{margin-bottom:16px;font-size:15px;color:#595959}.legal-content ul,.legal-content ol{margin-left:24px;margin-bottom:16px;padding-left:16px}.legal-content li{margin-bottom:10px;font-size:15px;color:#595959;line-height:1.6}.legal-content ul ul,.legal-content ul ol,.legal-content ol ul,.legal-content ol ol{margin-top:8px;margin-bottom:8px}.legal-content strong{font-weight:600;color:#262626}.legal-content table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px}.legal-content table th,.legal-content table td{border:1px solid #e8e8e8;padding:12px 16px;text-align:left}.legal-content table th{background-color:#fafafa;font-weight:600;color:#262626}.legal-content table td{color:#595959}.legal-content pre{background-color:#f5f5f5;border:1px solid #e8e8e8;border-radius:4px;padding:16px;overflow-x:auto;font-family:Monaco,Menlo,Courier New,monospace;font-size:13px;line-height:1.5;color:#434343;margin:16px 0}.legal-content code{background-color:#f5f5f5;border:1px solid #e8e8e8;border-radius:3px;padding:2px 6px;font-family:Monaco,Menlo,Courier New,monospace;font-size:13px;color:#d73a49}.legal-content pre code{background:none;border:none;padding:0;color:#434343}.note{background-color:#f0f8ff;border-left:4px solid #1890ff;padding:16px 20px;margin:20px 0;border-radius:4px;font-size:14px;color:#0050b3}.contact-box{background-color:#fafafa;border:1px solid #e8e8e8;border-radius:8px;padding:24px;margin:24px 0}.contact-box h3{margin-top:0;margin-bottom:16px;font-size:18px;color:#262626}.contact-box ul{margin:0;padding:0;list-style:none}.contact-box li{margin-bottom:8px;font-size:15px;color:#595959}.contact-section{border-top:2px solid #e8e8e8;padding-top:40px;margin-top:60px}.contact-section h2{border-left:none;padding-left:0;margin-bottom:16px}.contact-section h3{margin-top:24px;margin-bottom:12px}.contact-section ul{list-style:none;margin-left:0;padding-left:0}.contact-section li{margin-bottom:8px;font-size:15px}@media(max-width:768px){.legal-container{padding:20px 16px}.legal-content{padding:24px 20px}.legal-content h1{font-size:26px}.legal-content h2{font-size:20px}.legal-content h3{font-size:16px}.legal-content p,.legal-content li{font-size:14px}.legal-content table{font-size:13px}.legal-content table th,.legal-content table td{padding:8px 12px}.legal-content pre{font-size:12px;padding:12px}.contact-box{padding:16px}}@media print{.legal-container{max-width:100%;padding:0}.legal-content{box-shadow:none;padding:0}.legal-content h1,.legal-content h2,.legal-content h3{page-break-after:avoid}.legal-content section{page-break-inside:avoid}.legal-content table{page-break-inside:auto}.legal-content tr{page-break-inside:avoid;page-break-after:auto}.note,.contact-box{border:1px solid #ccc}a[href]:after{content:" (" attr(href) ")";font-size:12px;color:#666}}@media(prefers-color-scheme:dark){.legal-container{background-color:#1a1a1a}.legal-content{background:#262626;color:#e0e0e0}.legal-content h1,.legal-content h2,.legal-content h3,.legal-content strong{color:#fff}.legal-content p,.legal-content li,.legal-content table td{color:#d0d0d0}.legal-content table th{background-color:#333;color:#fff}.legal-content table th,.legal-content table td{border-color:#444}.legal-content pre{background-color:#1e1e1e;border-color:#444;color:#d4d4d4}.legal-content code{background-color:#1e1e1e;border-color:#444;color:#f97583}.note{background-color:#1a2a3a;border-color:#1890ff;color:#69b8ff}.contact-box{background-color:#1e1e1e;border-color:#444}.contact-section{border-color:#444}}.hamvocada-app-layout{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;flex-direction:column}.app-exit-button{position:absolute;top:16px;left:16px;z-index:1000;width:44px;height:44px;border-radius:50%;background:#fffffff2;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000026;transition:all .2s ease;color:#333}.app-exit-button:hover{background:#fff;box-shadow:0 4px 12px #0003;transform:scale(1.05)}.app-exit-button:active{transform:scale(.95)}.app-content{flex:1;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:relative;-webkit-overflow-scrolling:touch}@media(max-width:768px){.app-exit-button{top:50px;left:12px;width:40px;height:40px}}.rive-guide-character{position:fixed;bottom:20px;right:20px;width:200px;height:200px;z-index:500;pointer-events:none;border-radius:5%;background:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px}.rive-guide-character canvas{width:100%!important;height:100%!important}@media(max-width:768px){.rive-guide-character{width:100px;height:100px;bottom:16px;right:16px}}@media(max-width:480px){.rive-guide-character{width:80px;height:80px;bottom:50px;right:12px}}.lottie-effect-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999;pointer-events:none}.success-effect{animation:fade-in-out 1.2s ease-out}.failure-effect{animation:fade-in-out .3s ease-out}.xp-gain-effect{animation:xp-bounce 1.5s cubic-bezier(.68,-.55,.265,1.55)}@keyframes fade-in-out{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.95)}}.success-indicator,.failure-indicator{display:flex;align-items:center;justify-content:center}.success-circle{stroke-dasharray:340;stroke-dashoffset:340;animation:draw-circle .6s ease-out forwards}.success-check{stroke-dasharray:80;stroke-dashoffset:80;animation:draw-check .4s .3s ease-out forwards}@keyframes draw-circle{to{stroke-dashoffset:0}}@keyframes draw-check{to{stroke-dashoffset:0}}.failure-circle{stroke-dasharray:226;stroke-dashoffset:226;animation:draw-circle-fast .2s ease-out forwards}.failure-x{stroke-dasharray:84;stroke-dashoffset:84;animation:draw-x .2s .1s ease-out forwards}@keyframes draw-circle-fast{to{stroke-dashoffset:0}}@keyframes draw-x{to{stroke-dashoffset:0}}.xp-gain-indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.xp-coin-burst{position:relative;width:100px;height:100px}.coin{position:absolute;width:40px;height:40px;background:linear-gradient(135deg,#fbbf24,#f59e0b);border-radius:50%;border:3px solid #d97706;box-shadow:0 4px 12px #fbbf2480}.coin:nth-child(1){top:50%;left:50%;transform:translate(-50%,-50%);animation:coin-burst-center 1.5s ease-out}.coin:nth-child(2){top:50%;left:50%;transform:translate(-50%,-50%);animation:coin-burst-left 1.5s ease-out}.coin:nth-child(3){top:50%;left:50%;transform:translate(-50%,-50%);animation:coin-burst-right 1.5s ease-out}@keyframes coin-burst-center{0%{transform:translate(-50%,-50%) scale(0);opacity:0}20%{transform:translate(-50%,-50%) scale(1.2);opacity:1}to{transform:translate(-50%,-150%) scale(.8);opacity:0}}@keyframes coin-burst-left{0%{transform:translate(-50%,-50%) scale(0);opacity:0}20%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-150%,-100%) scale(.6) rotate(180deg);opacity:0}}@keyframes coin-burst-right{0%{transform:translate(-50%,-50%) scale(0);opacity:0}20%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(50%,-100%) scale(.6) rotate(-180deg);opacity:0}}.xp-text{display:flex;align-items:baseline;gap:.5rem;animation:xp-text-pop 1.5s ease-out}.xp-amount{font-size:3rem;font-weight:800;color:#fbbf24;text-shadow:0 2px 8px rgba(251,191,36,.4),0 0 20px rgba(251,191,36,.3)}.xp-label{font-size:1.5rem;font-weight:700;color:#f59e0b;text-shadow:0 1px 4px rgba(245,158,11,.3)}@keyframes xp-text-pop{0%{transform:scale(0);opacity:0}30%{transform:scale(0);opacity:0}50%{transform:scale(1.3);opacity:1}70%{transform:scale(.95)}85%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.sparkles{position:absolute;top:50%;left:50%;width:200px;height:200px}.sparkle{position:absolute;font-size:2rem;animation:sparkle-float 1.5s ease-out}.sparkle:nth-child(1){top:10%;left:10%;animation-delay:.2s}.sparkle:nth-child(2){top:10%;right:10%;animation-delay:.3s}.sparkle:nth-child(3){bottom:20%;left:5%;animation-delay:.4s}.sparkle:nth-child(4){bottom:20%;right:5%;animation-delay:.5s}@keyframes sparkle-float{0%{transform:translateY(0) scale(0);opacity:0}30%{transform:translateY(-10px) scale(1);opacity:1}to{transform:translateY(-40px) scale(.5);opacity:0}}@keyframes xp-bounce{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}60%{transform:translate(-50%,-50%) scale(.95)}80%{transform:translate(-50%,-50%) scale(1.02)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media(max-width:768px){.success-indicator svg{width:100px;height:100px}.failure-indicator svg{width:66px;height:66px}.xp-amount{font-size:2.5rem}.xp-label{font-size:1.25rem}.coin{width:32px;height:32px}}.word-learning-shell{min-height:100vh;min-height:100dvh;padding:env(safe-area-inset-top,0) max(env(safe-area-inset-right,20px),20px) env(safe-area-inset-bottom,32px) max(env(safe-area-inset-left,20px),20px);display:flex;flex-direction:column;gap:12px;color:#0f172a;box-sizing:border-box}.feedback-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .2s ease-out}.feedback-modal{background:#fff;border-radius:24px;padding:32px 24px;max-width:400px;width:100%;box-shadow:0 20px 50px #0003;animation:slideUp .3s ease-out;text-align:center}.modal-icon{font-size:64px;margin-bottom:16px;animation:bounce .6s ease-out}.modal-title{font-size:20px;font-weight:700;color:#1e293b;margin:0 0 12px}.modal-message{font-size:15px;color:#64748b;line-height:1.6;margin:0 0 20px}.modal-transcription{background:#f1f5f9;padding:12px 16px;border-radius:12px;font-size:14px;color:#475569;margin-bottom:20px;border-left:3px solid #94a3b8}.modal-comparison{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.comparison-item{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border-radius:12px;text-align:left}.comparison-item.wrong{background:#fef2f2;border-left:3px solid #ef4444}.comparison-item.correct{background:#f0fdf4;border-left:3px solid #22c55e}.comparison-item.tried{background:#fef3c7;border-left:3px solid #f59e0b}.comparison-item.target{background:#e0f2fe;border-left:3px solid #0284c7}.comparison-item .label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.comparison-item.wrong .label{color:#dc2626}.comparison-item.correct .label{color:#16a34a}.comparison-item.tried .label{color:#d97706}.comparison-item.target .label{color:#0369a1}.comparison-item .text{font-size:16px;font-weight:600;color:#1e293b}.modal-button-group{display:flex;gap:12px;width:100%;margin-top:20px}.modal-button{flex:1;padding:14px 20px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}.modal-button.retry{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px #667eea4d}.modal-button.retry:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea66}.modal-button.retry:active{transform:translateY(0)}.modal-button.next{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 12px #10b9814d}.modal-button.next:hover{transform:translateY(-2px);box-shadow:0 6px 16px #10b98166}.modal-button.next:active{transform:translateY(0)}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.top-progress{padding:16px 0 12px}.progress-line{width:100%;height:6px;background:#e2e8f0;border-radius:999px;overflow:hidden}.progress-line .progress-fill{height:100%;background:linear-gradient(90deg,#22c55e,#16a34a)}.top-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}.status-pill{padding:8px 14px;border-radius:999px;font-weight:700;font-size:14px;background:#e2e8f0;color:#0f172a}.status-seen{background:#e2e8f0}.status-chosen{background:#fef3c7;color:#92400e}.status-spoken{background:#dcfce7;color:#166534}.weak-pill{padding:8px 12px;border-radius:10px;background:#fee2e2;color:#991b1b;font-weight:600}.xp-counter{margin-left:auto;padding:8px 14px;border-radius:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:700}.card-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start;flex:1;overflow-y:auto;padding-bottom:max(env(safe-area-inset-bottom,20px),20px)}.scene-card,.response-card{background:#fff;border-radius:18px;box-shadow:0 10px 30px #00000014;padding:20px;display:flex;flex-direction:column;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px - env(safe-area-inset-top,0) - env(safe-area-inset-bottom,0));overflow-y:auto}.section-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6366f1;margin-bottom:8px}.situation{font-size:24px;font-weight:800;line-height:1.3;margin:0 0 8px}.feeling{font-size:16px;color:#475569;margin-bottom:12px}.friend-says{background:#f8fafc;border-radius:12px;padding:12px 14px;margin-bottom:12px;border:1px solid #e2e8f0}.friend-says .label{display:inline-block;font-weight:700;font-size:13px;color:#475569;margin-bottom:6px}.friend-says p{margin:0;line-height:1.6}.clickable-word{cursor:pointer;text-decoration:underline dotted #58CC02;text-decoration-thickness:2px;text-underline-offset:3px;padding:2px 4px;border-radius:4px;transition:all .2s ease;display:inline}.clickable-word:hover{background-color:#58cc021a;text-decoration-style:solid}.clickable-word:active{transform:scale(.95)}.clickable-word.playing{background-color:#58cc0233;font-weight:700;color:#58cc02;text-decoration-style:solid}.response-prompt{font-size:18px;font-weight:700;margin:12px 0;color:#0f172a}.target-word-block{display:flex;flex-direction:column;gap:10px}.reveal-button{align-self:flex-start;padding:10px 14px;border-radius:12px;border:1px solid #cbd5e1;background:#fff;cursor:pointer;font-weight:700}.meaning-panel{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}.meaning-main{font-weight:800;color:#111827}.meaning-hint{color:#475569;font-size:14px;line-height:1.4}.examples{margin:0;padding-left:18px;color:#334155;font-size:14px}.meta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.tags{display:flex;flex-wrap:wrap;gap:8px}.tag{padding:6px 10px;border-radius:999px;background:#eef2ff;color:#4338ca;font-weight:700;font-size:12px}.difficulty{font-weight:700;color:#475569}.response-card{display:flex;flex-direction:column;gap:16px}.response-header{display:flex;flex-direction:column;gap:8px}.mode-tabs{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:8px}.mode-tabs .tab:first-child{grid-column:1 / -1}.mode-tabs .tab:nth-child(2),.mode-tabs .tab:nth-child(3){grid-column:span 1}.tab{padding:12px 14px;border-radius:12px;border:1px solid #cbd5e1;background:#fff;font-weight:700;cursor:pointer;text-align:center}.tab.active{border-color:#6366f1;box-shadow:0 6px 16px #6366f12e;color:#4338ca}.hint{font-size:13px;color:#475569}.speak-block{display:flex;flex-direction:column;gap:10px}.speak-actions{display:flex;align-items:center;gap:12px}.speak-actions .rec-button{flex:1}.type-actions{display:flex;align-items:center;gap:12px}.type-actions .primary{flex:1}.type-actions .next-small{flex-shrink:0}.next-small{width:100%;padding:14px;border-radius:10px;border:1px solid #cbd5e1;background:#fff;color:#4338ca;font-weight:700;cursor:pointer;font-size:14px;transition:all .2s ease}.next-small:hover{background:#f1f5f9;border-color:#94a3b8}.next-small:active{transform:scale(.96)}.rec-button{width:100%;padding:16px;border-radius:14px;border:none;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-weight:800;font-size:16px;cursor:pointer;display:flex;align-items:center;gap:12px;justify-content:space-between;transition:all .2s ease;position:relative}.rec-button:active{transform:scale(.98)}.rec-button.recording{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 0 20px #ef444480;animation:pulse-recording 1s infinite}@keyframes pulse-recording{0%,to{box-shadow:0 0 20px #ef444480}50%{box-shadow:0 0 30px #ef4444cc}}.rec-button .dot{width:12px;height:12px;border-radius:50%;background:#f97316;box-shadow:0 0 0 6px #f9731633}.subtext{font-size:13px;color:#475569;margin:6px 0 0}.type-block input{width:100%;padding:12px;border-radius:10px;border:1px solid #cbd5e1;font-size:16px;margin-bottom:8px}.primary{width:100%;background:#6366f1;color:#fff;border:none;border-radius:10px;padding:14px;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 6px 14px #6366f133;transition:all .2s ease}.primary:hover{background:#4f46e5;transform:translateY(-1px);box-shadow:0 8px 18px #6366f14d}.primary:active{transform:scale(.98)}.secondary{background:#fff;color:#4338ca;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;font-weight:700;cursor:pointer}.choose-block .choose-list{display:flex;flex-direction:column;gap:8px}.choose-block button{padding:12px 14px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;text-align:left;font-weight:700;cursor:pointer}.choose-block button.chosen{border-color:#6366f1;background:#eef2ff}.followup-card{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fef3c7;border:1px solid #fcd34d;border-radius:12px;padding:12px}.followup-card .label{font-weight:700;color:#92400e;margin:0}.chosen-phrase{margin:4px 0 0;font-weight:700}.weak-nudge{margin-top:6px;background:#fee2e2;color:#b91c1c;padding:10px 12px;border-radius:10px;font-weight:700}.completion-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}.completion-card{max-width:640px;width:100%;background:#fff;border-radius:20px;box-shadow:0 18px 40px #0000001f;padding:28px;text-align:center;display:flex;flex-direction:column;gap:14px}.completion-label{font-size:12px;font-weight:800;letter-spacing:.08em;color:#6366f1;text-transform:uppercase;margin:0}.completion-card h1{margin:0;font-size:26px;line-height:1.3}.completion-sub{margin:0;color:#475569;line-height:1.5}.completion-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:8px 0 4px}.stat-label{margin:0;font-weight:700;color:#64748b}.stat-value{margin:4px 0 0;font-size:24px;font-weight:800;color:#0f172a}.stat-value.correct{color:#22c55e}.stat-value.wrong{color:#ef4444}.review-notice{background:#fef3c7;border:1px solid #fcd34d;border-radius:12px;padding:12px 16px;margin:8px 0}.review-notice p{margin:0;font-weight:600;color:#92400e;text-align:center}.completion-actions{display:flex;flex-direction:column;gap:10px;margin-top:8px}.completion-actions .primary,.completion-actions .secondary{width:100%}.review-badge{display:inline-block;background:#fef3c7;color:#92400e;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:700;margin-right:8px}.restart-hint{margin:0;color:#94a3b8}@media(max-width:960px){.card-grid{grid-template-columns:1fr;padding-bottom:max(env(safe-area-inset-bottom,24px),24px)}.word-learning-shell{padding:env(safe-area-inset-top,0) max(env(safe-area-inset-right,16px),16px) env(safe-area-inset-bottom,20px) max(env(safe-area-inset-left,16px),16px)}}@media(max-width:640px){.mode-tabs{grid-template-columns:1fr 1fr}.mode-tabs .tab:first-child{grid-column:1 / -1}.top-bar{align-items:flex-start}.word-learning-shell{padding:env(safe-area-inset-top,0) max(env(safe-area-inset-right,12px),12px) env(safe-area-inset-bottom,16px) max(env(safe-area-inset-left,12px),12px)}}.youtube-learning{display:flex;flex-direction:column;min-height:100vh;background:#fff;padding-bottom:env(safe-area-inset-bottom)}.yt-test-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:12px;font-weight:600;position:relative;z-index:101;animation:slideInDown .3s ease-out}.yt-test-badge{background:#ffffff40;padding:4px 10px;border-radius:12px;flex-shrink:0;font-weight:700;letter-spacing:.5px}.yt-test-email{flex:1;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yt-test-info{opacity:.8;flex-shrink:0}@media(max-width:480px){.yt-test-banner{flex-direction:column;gap:6px;padding:8px 12px}.yt-test-email{min-width:0}}.yt-top-bar{display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 24px 16px 24px;background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:100;gap:12px;box-shadow:0 2px 20px #667eea26}.yt-back-btn,.yt-more-btn{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;position:absolute}.yt-back-btn{left:20px}.yt-more-btn{right:20px}.yt-back-btn:hover,.yt-more-btn:hover{background:#ffffff40;border-color:#ffffff4d;transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.yt-back-btn:active,.yt-more-btn:active{transform:translateY(0) scale(.95);background:#fff3}.yt-header-info{flex:1;min-width:0;text-align:center;padding:0 20px}.yt-title{font-size:18px;font-weight:700;color:#fff;margin:0;text-shadow:0 1px 3px rgba(0,0,0,.2);letter-spacing:-.2px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:keep-all;max-height:2.8em}.yt-video-title{font-size:12px;color:#fffc;margin:4px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.yt-progress-info{padding:12px 20px;background:linear-gradient(135deg,#667eea14,#764ba214);border-bottom:1px solid rgba(102,126,234,.12);text-align:center;position:relative}.yt-progress-info:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(102,126,234,.2) 50%,transparent 100%)}.yt-playback-toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%);background:#ffffffbf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 16px;border-radius:12px;box-shadow:0 4px 12px #667eea1f,0 2px 6px #0000000f;display:flex;align-items:center;gap:10px;z-index:999;animation:toastSlideUp .3s ease-out;border:1px solid rgba(102,126,234,.1);min-width:200px}@keyframes toastSlideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.toast-emoji{font-size:24px;line-height:1;animation:emojiPop .4s ease-out}@keyframes emojiPop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.toast-content{display:flex;flex-direction:column;gap:2px;flex:1}.toast-round{font-size:10px;font-weight:600;color:#667eea;margin:0;letter-spacing:.3px;text-transform:uppercase;opacity:.75}.toast-message{font-size:13px;font-weight:500;color:#1e293b;margin:0;line-height:1.3;opacity:.85}.toast-speed{font-size:11px;font-weight:500;color:#64748b;margin:0;opacity:.7}.yt-progress-info p{margin:0;font-size:13px;font-weight:600;color:#667eea;text-shadow:0 1px 2px rgba(255,255,255,.8)}.yt-player-section{width:100%;background:#1a1a1a;border-radius:0;overflow:hidden;margin:0;box-shadow:0 2px 8px #0000001a;position:relative}.yt-player{width:100%;height:240px;background:#000;object-fit:contain;-webkit-playsinline:true}.yt-player iframe,#youtube-player iframe{max-width:100%;max-height:240px;-webkit-playsinline:true;playsinline:true}.yt-player-section{position:relative}.yt-player-section.touch-disabled #youtube-player{pointer-events:none;-webkit-user-select:none;user-select:none}.yt-controls{background:linear-gradient(180deg,#f8f9ff,#f5f7ff);padding:20px 16px;display:flex;flex-direction:column;gap:16px;border-top:1px solid rgba(102,126,234,.1)}.yt-control-row{display:none;align-items:center;justify-content:center;gap:12px;padding:0 8px}.yt-control-btn{padding:12px 18px;background:#667eea1a;color:#667eea;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);min-height:44px;border:1px solid rgba(102,126,234,.15);flex:1;max-width:100px;display:flex;align-items:center;justify-content:center;gap:6px}.yt-control-btn:hover{background:#667eea26;transform:translateY(-2px);border-color:#667eea4d;box-shadow:0 4px 12px #667eea1a}.yt-control-btn:active{transform:translateY(0)}.yt-control-btn.primary{background:linear-gradient(135deg,#667eea,#764ba2);padding:12px 32px;box-shadow:0 6px 20px #667eea59;border:none;font-size:15px;flex:0 1 auto;max-width:none;color:#fff}.yt-control-btn.primary:hover{box-shadow:0 8px 28px #667eea73;transform:translateY(-3px)}.yt-control-btn.primary:active{transform:translateY(-1px)}.yt-speed-row{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0}.yt-speed-btn{padding:10px 14px;background:#667eea14;color:#667eea;border:1px solid rgba(102,126,234,.15);border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);min-width:56px;min-height:40px;flex:1;max-width:70px;display:flex;align-items:center;justify-content:center}.yt-speed-btn:hover{background:#667eea26;color:#667eea;border-color:#667eea40;transform:translateY(-1px)}.yt-speed-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px #667eea59;border:none;font-weight:700}.yt-speed-btn.disabled{background:#b4b4b40d;color:#b4b4b4;border-color:#b4b4b41a;cursor:not-allowed;opacity:.5}.yt-speed-btn.disabled:hover{background:#b4b4b40d;color:#b4b4b4;border-color:#b4b4b41a;transform:none}.yt-sentence-section{padding:24px 20px;margin-bottom:0;background:#f8f9ff}.yt-sentence-label{font-size:11px;color:#667eea;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin:0 0 16px;opacity:.8}.yt-sentence-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 12px #667eea1a;border:1px solid rgba(102,126,234,.12);display:flex;flex-direction:column;gap:18px;transition:all .3s ease}.yt-sentence-card:hover{box-shadow:0 4px 20px #667eea26;border-color:#667eea33}.yt-sentence-text{font-size:20px;line-height:1.6;color:#1a1a1a;font-weight:600;margin:0;letter-spacing:.3px}.yt-play-sentence-btn{align-self:flex-end;padding:12px 22px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 14px #10b9814d;min-height:44px;display:flex;align-items:center;gap:8px}.yt-play-sentence-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px #10b98166}.yt-play-sentence-btn:active:not(:disabled){transform:translateY(0)}.yt-play-sentence-btn:disabled{opacity:.85;cursor:not-allowed}.yt-play-sentence-btn.playing{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 4px 14px #3b82f64d;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 4px 14px #3b82f64d}50%{box-shadow:0 6px 24px #3b82f680}}.yt-context-tag{font-size:13px;line-height:1.5;color:#667eea;font-weight:500;margin:0;padding:12px 14px;background:#667eea14;border-radius:8px;text-align:left;letter-spacing:.2px}.yt-meaning{font-size:14px;line-height:1.6;color:#4a5568;margin:0;padding:14px 16px;background:#f7fafc;border-left:3px solid #667eea;border-radius:8px}.yt-accordion{display:flex;flex-direction:column;gap:0;margin-top:16px}.yt-accordion-item{border:1px solid rgba(102,126,234,.12);border-radius:10px;overflow:hidden;background:#f8f9ff;margin-bottom:8px}.yt-accordion-header{width:100%;padding:14px 16px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;color:#667eea;transition:all .2s cubic-bezier(.4,0,.2,1)}.yt-accordion-header:hover{background:#667eea14}.yt-accordion-header:active{background:#667eea1f}.yt-accordion-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transition:transform .3s cubic-bezier(.4,0,.2,1);margin-left:8px;font-size:12px}.yt-accordion-icon.open{transform:rotate(180deg)}.yt-accordion-content{padding:12px 16px;background:#fff;border-top:1px solid rgba(102,126,234,.08);animation:slideDown .3s cubic-bezier(.4,0,.2,1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.yt-accordion-content p{margin:0;font-size:14px;line-height:1.6;color:#4a5568}.yt-tips-list{margin:0;padding:0 0 0 20px;list-style:none}.yt-tips-list li{margin:8px 0;font-size:13px;line-height:1.6;color:#4a5568;position:relative;padding-left:8px}.yt-tips-list li:before{content:"•";position:absolute;left:0;color:#667eea;font-weight:700}.yt-expressions-list{display:flex;flex-direction:column;gap:12px}.yt-expression-item{padding:12px;background:#667eea0d;border-radius:8px;border-left:3px solid #667eea}.yt-expression-text{margin:0 0 6px;font-size:14px;font-weight:600;color:#1a1a1a}.yt-expression-meaning{margin:0;font-size:12px;color:#9ca3af}.yt-thinking-section{margin-top:20px;padding:18px;background:linear-gradient(135deg,#f0f4ff,#f8f9ff);border:1px solid #e0e8ff;border-radius:12px;animation:slideInUp .4s cubic-bezier(.4,0,.2,1)}@keyframes slideInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.yt-thinking-question{margin:0 0 14px;font-size:15px;font-weight:600;color:#2d3748;letter-spacing:.3px}.yt-context-options{display:flex;flex-direction:column;gap:10px}.yt-context-option-btn{padding:12px 16px;background:#fff;border:2px solid #e0e8ff;border-radius:10px;font-size:14px;color:#2d3748;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-align:left}.yt-context-option-btn:hover{border-color:#667eea;background:#f8f9ff;transform:translate(4px)}.yt-context-option-btn:active{transform:translate(2px)}.yt-explanation-section{opacity:0;transition:opacity .4s cubic-bezier(.4,0,.2,1);pointer-events:none}.yt-explanation-section.visible{opacity:1;pointer-events:auto}.yt-context-confirmed{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#10b98114;border-left:3px solid #10b981;border-radius:8px;margin-bottom:16px;font-size:14px;font-weight:500;color:#047857;animation:slideInDown .3s cubic-bezier(.4,0,.2,1)}@keyframes slideInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.yt-checkmark{font-weight:700;color:#10b981;font-size:16px}.yt-confirmed-text{flex:1}.yt-action-section{padding:24px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:max(24px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid #f0f4ff}.yt-keep-btn{width:100%;max-width:400px;padding:16px 24px;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 6px 24px #667eea59;letter-spacing:.3px}.yt-keep-btn:hover{transform:translateY(-3px);box-shadow:0 10px 36px #667eea73}.yt-keep-btn:active{transform:translateY(-1px)}.yt-keep-warning{margin-top:8px;padding:10px 16px;background:#fef3cd;border:1px solid #ffc107;border-radius:8px;color:#856404;font-size:13px;font-weight:600;text-align:center;animation:warningPulse .3s ease-out}@keyframes warningPulse{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.yt-exit-text{background:none;border:none;color:#9ca3af;font-size:13px;font-weight:500;cursor:pointer;padding:8px 16px;transition:all .2s ease;text-decoration:none;min-height:44px}.yt-exit-text:hover{color:#667eea;text-decoration:underline}.yt-exit-text:active{color:#4b5563}.yt-xp-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:modalFadeIn .3s ease-out}.yt-xp-modal{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:24px;padding:40px 32px;max-width:360px;width:100%;box-shadow:0 20px 60px #667eea66;position:relative;overflow:hidden;animation:modalSlideUp .4s cubic-bezier(.34,1.56,.64,1)}.yt-xp-modal:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#ffffff1a,#ffffff0d);pointer-events:none}.yt-xp-icon-container{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:24px;height:80px}.yt-xp-icon{font-size:64px;animation:xpIconBounce .8s cubic-bezier(.68,-.55,.265,1.55);filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.yt-xp-sparkles{position:absolute;top:0;left:0;right:0;bottom:0}.sparkle{position:absolute;font-size:20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.sparkle-1{top:10px;left:20px;animation:sparkleFloat 2s ease-in-out infinite .2s}.sparkle-2{top:20px;right:15px;animation:sparkleFloat 2s ease-in-out infinite .6s}.sparkle-3{bottom:15px;left:10px;animation:sparkleFloat 2s ease-in-out infinite 1s}.sparkle-4{bottom:25px;right:25px;animation:sparkleFloat 2s ease-in-out infinite .4s}.yt-xp-content{text-align:center;position:relative;z-index:2}.yt-xp-title{font-size:24px;font-weight:700;color:#fff;margin:0 0 16px;animation:textSlideUp .6s ease-out .2s both}.yt-xp-amount{font-size:36px;font-weight:800;color:gold;margin:0 0 12px;text-shadow:0 2px 8px rgba(255,215,0,.4);animation:xpAmountGlow .8s ease-out .4s both}.yt-xp-message{font-size:16px;font-weight:500;color:#ffffffe6;margin:0 0 8px;line-height:1.4;animation:textSlideUp .6s ease-out .6s both}.yt-xp-subtext{font-size:14px;color:#ffffffb3;margin:0;animation:textSlideUp .6s ease-out .8s both}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(60px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes xpIconBounce{0%{opacity:0;transform:scale(0) rotate(-180deg)}60%{opacity:1;transform:scale(1.2) rotate(0)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes xpAmountGlow{0%{opacity:0;transform:scale(.5);text-shadow:0 0 0 rgba(255,215,0,0)}50%{opacity:1;transform:scale(1.1);text-shadow:0 0 20px rgba(255,215,0,.8)}to{opacity:1;transform:scale(1);text-shadow:0 2px 8px rgba(255,215,0,.4)}}@keyframes sparkleFloat{0%,to{opacity:.7;transform:translateY(0) rotate(0)}50%{opacity:1;transform:translateY(-8px) rotate(180deg)}}@keyframes textSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:480px){.yt-xp-modal{padding:32px 24px;max-width:calc(100vw - 40px)}.yt-xp-icon{font-size:56px}.yt-xp-title{font-size:20px}.yt-xp-amount{font-size:32px}.yt-xp-icon-container{height:70px;margin-bottom:20px}}.yt-shadowing-link{background:linear-gradient(135deg,#667eea,#764ba2);border:none;color:#fff;font-size:14px;font-weight:600;cursor:pointer;padding:12px 24px;transition:all .2s;margin-top:12px;text-decoration:none;border-radius:10px;min-height:44px;box-shadow:0 4px 12px #667eea4d}.yt-shadowing-link:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.yt-shadowing-link:active{transform:translateY(0)}@media(max-width:640px){.yt-player{height:220px}.yt-sentence-text{font-size:18px}.yt-sentence-card{padding:20px}.yt-keep-btn{font-size:14px;padding:14px 20px}}.yt-video-selector-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:flex-end;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.yt-video-selector{background:#fff;width:100%;border-radius:20px 20px 0 0;padding:0;box-shadow:0 -4px 32px #00000026;max-height:80vh;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.yt-selector-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid #f0f4ff;flex-shrink:0}.yt-selector-header h2{margin:0;font-size:18px;font-weight:700;color:#1a1a1a}.yt-selector-close{background:#667eea1a;border:none;color:#667eea;width:40px;height:40px;border-radius:20px;font-size:20px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.yt-selector-close:hover{background:#667eea26}.yt-video-list{display:flex;flex-direction:column;overflow-y:auto;max-height:calc(80vh - 70px);padding:8px 0}.yt-video-item{background:none;border:none;padding:16px 20px;text-align:left;cursor:pointer;transition:all .2s;border-left:4px solid transparent;display:flex;align-items:center;justify-content:space-between}.yt-video-item:hover{background:#f8f9ff;border-left-color:#667eea}.yt-video-item.active{background:#667eea14;border-left-color:#667eea}.yt-video-item-content{flex:1}.yt-video-item-content h3{margin:0 0 4px;font-size:15px;font-weight:600;color:#1a1a1a}.yt-video-item-content p{margin:0;font-size:12px;color:#9ca3af}.yt-video-item-check{color:#10b981;font-size:18px;font-weight:700;margin-left:12px}.yt-gesture-overlay{position:absolute;top:0;left:0;width:100%;height:240px;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease-out}.yt-gesture-overlay-content{text-align:center;padding:20px 24px;background:#fffffffa;border-radius:8px;box-shadow:0 4px 16px #0000001a}.yt-gesture-overlay-content p{margin:0;font-size:15px;font-weight:600;color:#1a1a1a;letter-spacing:-.3px}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.yt-start-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;background:linear-gradient(135deg,#667eea,#764ba2)}.yt-start-content{text-align:center;max-width:400px;width:100%;background:#fffffff2;border-radius:16px;padding:40px 24px;box-shadow:0 8px 32px #0003;animation:slideUpFadeIn .5s ease-out}.yt-start-title{margin:0 0 24px;font-size:28px;font-weight:700;color:#1a1a1a;letter-spacing:-.5px}.yt-start-info{margin-bottom:32px}.yt-start-video-title{margin:0 0 12px;font-size:18px;font-weight:600;color:#374151;line-height:1.4}.yt-start-sentence-count{margin:0;font-size:15px;font-weight:500;color:#667eea}.yt-start-btn{width:100%;padding:16px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:18px;font-weight:700;border:none;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 16px #667eea66}.yt-start-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.yt-start-btn:active{transform:translateY(0);box-shadow:0 2px 8px #667eea4d}.yt-start-hint{margin:16px 0 0;font-size:13px;color:#6b7280;line-height:1.5}@keyframes slideUpFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.yt-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:24px;text-align:center}.yt-loading h2{margin:0 0 16px;font-size:22px;font-weight:700;color:#1a1a1a}.yt-loading p{margin:0 0 12px;font-size:15px;color:#6b7280;line-height:1.6}.yt-loading-hint{margin-top:24px;padding:16px;background:#f3f4f6;border-radius:8px;font-size:14px;color:#374151}@keyframes pulse-glow{0%,to{transform:scale(1);box-shadow:0 4px 14px #10b9814d}50%{transform:scale(1.08);box-shadow:0 8px 32px #10b98199,0 0 0 8px #10b98126}}.yt-play-sentence-btn.first-play-highlight{animation:pulse-glow 2s ease-in-out infinite;border:2px solid #10b981;position:relative}.yt-listen-tooltip{position:absolute;top:-60px;right:0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:10px 16px;border-radius:12px;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 4px 20px #667eea66;z-index:10;animation:tooltipFadeIn .3s ease-out,tooltipBounce 2s ease-in-out .3s infinite}.yt-listen-tooltip:after{content:"";position:absolute;bottom:-6px;right:20px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #764ba2}@keyframes tooltipBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.shadowing-intro-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:24px;position:relative;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}.back-btn{position:absolute;top:max(12px,env(safe-area-inset-top));left:16px;width:44px;height:44px;border-radius:22px;border:none;background:#ffffffe6;color:#667eea;font-size:20px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a;transition:all .2s;z-index:100}.back-btn:hover{background:#fff;box-shadow:0 4px 12px #00000026}.back-btn:active{transform:scale(.95)}.intro-card{background:#fff;border-radius:16px;padding:32px;max-width:500px;width:100%;box-shadow:0 4px 12px #0000001a}.intro-label{font-size:14px;color:#888;text-transform:uppercase;letter-spacing:1px;margin:0 0 12px}.intro-card h1{font-size:28px;font-weight:700;margin:0 0 8px;color:#1a1a1a}.intro-point{font-size:16px;color:#555;margin:0 0 24px;line-height:1.5}.intro-info{background:#f8f8f8;border-radius:12px;padding:20px;margin-bottom:24px}.info-item{margin-bottom:16px}.info-item:last-child{margin-bottom:0}.info-label{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px}.info-value{font-size:18px;font-weight:600;color:#1a1a1a;margin:0}.skill-tags{display:flex;flex-wrap:wrap;gap:8px}.skill-tag{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.intro-start-btn{width:100%;padding:16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.intro-start-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.intro-start-btn:active{transform:translateY(0)}.shadowing-shell{display:flex;flex-direction:column;height:100vh;background:linear-gradient(135deg,#f8f9ff,#fff,#f0f4ff);position:relative;padding-bottom:max(20px,calc(env(safe-area-inset-bottom) + 8px))}.top-header{display:flex;align-items:center;justify-content:space-between;padding:max(16px,calc(env(safe-area-inset-top) + 8px)) 16px 0 16px;background:#fff;position:relative;z-index:20}.top-header .back-btn{position:static;width:44px;height:44px;border-radius:22px;border:none;background:#667eea1a;color:#667eea;font-size:20px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.top-header .back-btn:hover{background:#667eea26}.top-header .back-btn:active{transform:scale(.95)}.top-spacer{flex:1}.top-progress{height:4px;position:relative;overflow:hidden;z-index:10}.progress-line{height:4px;background:#e8e8e8;position:relative;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s ease}.context-message{padding:14px 20px;background:linear-gradient(135deg,#f0f4ff,#f8f9ff);border-bottom:2px solid #e0e8ff;font-size:14px;font-weight:500;color:#2d3748;line-height:1.5;box-shadow:0 2px 8px #667eea14}.context-message p{margin:0;padding:0}.context-message p:first-child{font-weight:700;color:#667eea;margin-bottom:4px;letter-spacing:.2px}.context-message p.sub{font-size:13px;color:#718096;font-weight:500}.shadowing-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;border-bottom:1px solid #f0f0f0}.sentence-info{display:flex;gap:12px;font-size:14px;color:#666}.sentence-num,.step-num{font-weight:500}.xp-display{font-size:14px;font-weight:600;color:#667eea}.next-hint{padding:8px 20px;font-size:13px;color:#a0aec0;font-style:italic;background:#f7fafc;border-bottom:1px solid #edf2f7}.feedback-message{padding:16px;margin:12px 0;background:linear-gradient(135deg,#667eea26,#764ba214);border-left:4px solid #667eea;border-radius:10px;font-size:14px;color:#667eea;font-weight:600;text-align:center;animation:fadeInUp .3s ease-out;box-shadow:0 2px 8px #667eea1f}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.shadowing-content{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;background:linear-gradient(180deg,transparent 0%,rgba(102,126,234,.02) 100%)}.step-container{display:flex;flex-direction:column;gap:16px;flex:1;padding:20px 20px max(20px,calc(env(safe-area-inset-bottom) + 8px)) 20px;background:#fff;border-radius:16px;box-shadow:0 2px 12px #667eea14;border:1px solid rgba(102,126,234,.1)}.step-title{font-size:20px;font-weight:700;margin:0;color:#1a1a1a}.step-instruction{font-size:14px;color:#888;margin:0;line-height:1.5}.action-hint{margin:0;font-size:14px;color:#2d3748;font-weight:600;background:#f7fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px}.hint-toggle{margin:0;align-self:flex-start;padding:8px 12px;background:#fff;color:#4a5568;border:1px dashed #cbd5e0;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.hint-toggle:hover{background:#f7fafc;border-color:#a0aec0}.hint-toggle.active{background:#f0f4ff;border-color:#667eea;color:#2c5282}.hint-box{width:100%;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px;box-shadow:0 2px 8px #0000000a}.hint-disclaimer{margin:0;font-size:13px;color:#4a5568;font-weight:700}.hint-disclaimer.sub{margin-top:2px;font-weight:600;color:#718096}.hint-list{margin:10px 0 0;padding-left:16px;color:#2d3748;font-size:14px;line-height:1.5}.hint-list li{margin-bottom:6px}.record-reminder{margin:0;font-size:13px;color:#4a5568;font-weight:600;background:#f7fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px 10px}.meaning-toggle{margin:0;align-self:flex-start;padding:8px 12px;background:#fff;color:#2d3748;border:1px solid #e2e8f0;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.meaning-toggle:hover{background:#f7fafc;border-color:#cbd5e0}.meaning-toggle.active{background:#f0f4ff;border-color:#667eea;color:#2c5282}.meaning-box{width:100%;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px;box-shadow:0 2px 8px #0000000a;display:flex;flex-direction:column;gap:4px}.meaning-label{margin:0;font-size:12px;color:#718096;font-weight:700;letter-spacing:.2px}.meaning-text{margin:0 0 4px;font-size:14px;color:#2d3748;line-height:1.5}.sentence-display{background:linear-gradient(135deg,#f8f9ff,#f0f4ff);padding:20px;border-radius:12px;font-size:16px;line-height:1.7;color:#333;border-left:4px solid #667eea;box-shadow:0 2px 8px #667eea1a;font-weight:500;letter-spacing:.3px}.situation-card{background:linear-gradient(135deg,#fff9f0,#fafaf8);padding:18px;border-radius:12px;border-left:4px solid #f59e0b;box-shadow:0 2px 8px #f59e0b1a}.situation-text{font-size:15px;line-height:1.6;color:#333;margin:0}.original-sentence{background:linear-gradient(135deg,#f8f9ff,#f0f4ff);padding:18px;border-radius:12px;border-left:4px solid #667eea;box-shadow:0 2px 8px #667eea1a}.original-sentence .label{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px}.original-sentence .text{font-size:16px;line-height:1.6;color:#333;margin:0}.speed-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.speed-btn{padding:12px;border:2px solid #e0e8ff;background:#fff;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;color:#666;box-shadow:0 2px 4px #667eea0d}.speed-btn:hover{border-color:#667eea;color:#667eea;background:#f8f9ff;box-shadow:0 4px 12px #667eea26}.speed-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;color:#fff;box-shadow:0 4px 16px #667eea4d}.rec-button{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 24px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;color:#fff;position:relative;margin-top:auto;margin-bottom:max(12px,env(safe-area-inset-bottom));box-shadow:0 4px 16px #667eea4d}.rec-button .dot{width:12px;height:12px;background:#999;border-radius:50%;transition:all .2s}.rec-button strong{margin-left:auto;color:#fff;font-weight:700}.rec-button:hover{transform:translateY(-3px);box-shadow:0 8px 28px #667eea66;scale:1.02}.rec-button.recording{background:linear-gradient(135deg,#ff6b6b,#ee5a6f);border-color:transparent;color:#fff;animation:pulse 1.5s infinite;box-shadow:0 4px 16px #ff6b6b66}.rec-button.recording .dot{background:#fff;box-shadow:0 0 8px #ff6b6bcc}.rec-button.recording strong{color:#fff}@keyframes pulse{0%,to{box-shadow:0 0 #ff6b6b66}50%{box-shadow:0 0 0 8px #ff6b6b00}}.dictation-input{padding:14px 16px;border:2px solid #e0e8ff;border-radius:10px;font-size:14px;font-family:inherit;transition:all .2s;background:#fff;box-shadow:0 2px 4px #667eea0d}.dictation-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea26;background:#f8f9ff}.primary{padding:14px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:auto;margin-bottom:max(12px,env(safe-area-inset-bottom));box-shadow:0 4px 16px #667eea4d}.primary:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 28px #667eea66;scale:1.02}.primary:active:not(:disabled){transform:translateY(0)}.primary:disabled{opacity:.5;cursor:not-allowed}.secondary{padding:14px 24px;background:#fff;color:#667eea;border:2px solid #667eea;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:max(12px,env(safe-area-inset-bottom))}.secondary:hover{background:#f8f9ff;transform:translateY(-3px);box-shadow:0 6px 20px #667eea40;scale:1.02}.secondary:active{transform:translateY(0)}.shadowing-summary-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:24px;position:relative;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}.shadowing-summary-screen .back-btn{position:absolute;top:max(12px,env(safe-area-inset-top));left:16px;width:44px;height:44px;border-radius:22px;border:none;background:#ffffffe6;color:#667eea;font-size:20px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a;transition:all .2s;z-index:100}.shadowing-summary-screen .back-btn:hover{background:#fff;box-shadow:0 4px 12px #00000026}.shadowing-summary-screen .back-btn:active{transform:scale(.95)}.summary-card{background:#fff;border-radius:16px;padding:32px;max-width:500px;width:100%;box-shadow:0 4px 12px #0000001a;text-align:center}.summary-label{font-size:14px;color:#888;text-transform:uppercase;letter-spacing:1px;margin:0 0 12px}.summary-card h1{font-size:28px;font-weight:700;margin:0 0 12px;color:#1a1a1a}.summary-sub{font-size:14px;color:#888;margin:0 0 24px;line-height:1.5}.summary-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px;background:#f8f8f8;padding:20px;border-radius:12px}.summary-stats>div{text-align:center}.stat-label{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px}.stat-value{font-size:24px;font-weight:700;color:#667eea;margin:0}.summary-actions{display:flex;gap:12px}.summary-actions button{flex:1}@media(max-width:640px){.intro-card{padding:24px}.intro-card h1{font-size:24px}.summary-card{padding:24px}.summary-card h1{font-size:24px}.shadowing-header{padding:12px 16px}.shadowing-content{padding:16px}.step-title{font-size:18px}}.mission-goal{padding:14px 16px;background:linear-gradient(135deg,#fef3c7,#fef5e7);border-left:4px solid #f59e0b;border-radius:10px;box-shadow:0 2px 8px #f59e0b1a}.mission-goal p{margin:0;color:#92400e;font-weight:600;font-size:14px;line-height:1.4}.mission-goal p.sub{font-weight:500;font-size:13px;color:#b45309;margin-top:4px}.action-guide{display:flex;flex-direction:column;gap:10px;padding:12px 16px;background:linear-gradient(135deg,#e0f2fe,#f0f9ff);border-radius:10px;border:1px solid #bae6fd}.guide-step{display:flex;align-items:center;gap:12px;font-size:14px;color:#0c4a6e;font-weight:500}.step-number{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:50%;font-weight:700;font-size:14px;flex-shrink:0}.step-text{font-size:14px;color:#0c4a6e}.play-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:16px;background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:12px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px #10b9814d;margin:8px 0}.play-icon{display:flex;align-items:center;justify-content:center;font-size:18px;animation:pulse-play 2s infinite}@keyframes pulse-play{0%,to{opacity:1}50%{opacity:.6}}.play-button:hover{transform:translateY(-3px);box-shadow:0 8px 28px #10b98166;scale:1.02}.play-button:active{transform:translateY(-1px)}.play-button.played{background:linear-gradient(135deg,#6b7280,#4b5563);box-shadow:0 4px 16px #6b72804d}.play-button.played:hover{box-shadow:0 8px 28px #6b728066}.play-text{font-weight:600;font-size:15px}.rec-button.disabled{opacity:.5;cursor:not-allowed;background:linear-gradient(135deg,#d1d5db,#9ca3af);box-shadow:0 2px 8px #6b728033}.rec-button.disabled:hover{transform:none;box-shadow:0 2px 8px #6b728033;scale:1}.warmup-audio-btn{width:100%;padding:12px 16px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s;margin-bottom:20px;box-shadow:0 4px 12px #10b98140}.warmup-audio-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #10b98159}.warmup-audio-btn:active{transform:translateY(0)}.rec-button.first-warmup-highlight{animation:warmup-pulse 2s ease-in-out infinite;box-shadow:0 0 #667eeab3}@keyframes warmup-pulse{0%{transform:scale(1);box-shadow:0 0 #667eeab3}50%{transform:scale(1.05);box-shadow:0 0 0 15px #667eea00}to{transform:scale(1);box-shadow:0 0 #667eea00}}.warmup-tooltip{position:relative;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;margin-bottom:12px;text-align:center;animation:tooltip-bounce .6s ease-out;box-shadow:0 4px 12px #8b5cf64d}@keyframes tooltip-bounce{0%{opacity:0;transform:translateY(-10px)}60%{opacity:1;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.rhythm-guide-notice{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;padding:12px 16px;border-radius:8px;font-size:14px;font-weight:600;text-align:center;margin-bottom:16px;border:2px solid #fbbf24;animation:notice-fade-in .4s ease-out}@keyframes notice-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.rhythm-ready-notice{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46;padding:12px 16px;border-radius:8px;font-size:14px;font-weight:600;text-align:center;margin-top:16px;border:2px solid #10b981;animation:notice-slide-in .5s ease-out}@keyframes notice-slide-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.play-button.first-play{animation:first-play-pulse 1.5s ease-in-out infinite}@keyframes first-play-pulse{0%,to{box-shadow:0 4px 16px #10b9814d;transform:scale(1)}50%{box-shadow:0 8px 28px #10b98180;transform:scale(1.02)}}.situation-emotion-hint{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#fef3c7,#fde68a);padding:10px 16px;border-radius:8px;margin-bottom:16px;border:2px dashed #fbbf24}.emotion-label{font-size:13px;font-weight:600;color:#92400e}.emotion-icon{font-size:15px;font-weight:700;color:#b45309}.situation-card{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);padding:20px;border-radius:12px;margin:20px 0;border:2px solid #0ea5e9;box-shadow:0 4px 16px #0ea5e926;position:relative}.situation-icon{font-size:32px;text-align:center;margin-bottom:12px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.situation-text{font-size:15px;line-height:1.6;color:#0c4a6e;font-weight:500;text-align:center}.dictation-guide{background:linear-gradient(135deg,#ede9fe,#ddd6fe);padding:16px;border-radius:10px;margin-bottom:20px;border:2px solid #8b5cf6;text-align:center}.guide-main{font-size:15px;font-weight:700;color:#5b21b6;margin:0 0 6px}.guide-sub{font-size:13px;font-weight:500;color:#7c3aed;margin:0}.variation-highlight{background:linear-gradient(135deg,#fef3c7,#fde68a);padding:16px;border-radius:10px;border:2px dashed #f59e0b;position:relative}.variation-tip{font-size:12px;color:#92400e;font-weight:600;margin-top:8px;text-align:center;font-style:italic}.step-cards-container{background:#fff;padding:20px 16px;margin:0 16px 20px;border-radius:16px;box-shadow:0 4px 16px #00000014}.step-cards-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px}.step-card{background:#f9fafb;border:2px solid #e5e7eb;border-radius:10px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;min-height:70px}.step-card.complete{background:linear-gradient(135deg,#d1fae5,#a7f3d0);border-color:#10b981;animation:card-complete .5s ease-out}@keyframes card-complete{0%{transform:scale(1);background:#f9fafb}50%{transform:scale(1.08);background:#d1fae5}to{transform:scale(1);background:linear-gradient(135deg,#d1fae5,#a7f3d0)}}.step-card.current{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#f59e0b;border-width:3px;animation:pulse-current 2s ease-in-out infinite}@keyframes pulse-current{0%,to{box-shadow:0 0 #f59e0bb3;transform:scale(1)}50%{box-shadow:0 0 0 8px #f59e0b00;transform:scale(1.03)}}.step-card.pending{background:#f9fafb;border-color:#e5e7eb;opacity:.6}.step-icon-wrapper{position:absolute;top:-6px;right:-6px;background:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #00000026}.step-status-icon{font-size:14px;line-height:1}.step-status-icon.pulse{animation:icon-pulse 1.5s ease-in-out infinite}@keyframes icon-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.step-info{display:flex;flex-direction:column;align-items:center;gap:2px}.step-emoji{font-size:22px;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.1))}.step-name{font-size:9px;font-weight:700;color:#374151;text-align:center;line-height:1.1;white-space:nowrap}.step-card.complete .step-name{color:#065f46}.step-card.current .step-name{color:#92400e}.step-card.pending .step-name{color:#9ca3af}.step-progress-summary{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-radius:10px;border:2px solid #0ea5e9}.progress-text{font-size:14px;font-weight:700;color:#0c4a6e}.xp-text{font-size:14px;font-weight:700;color:#7c3aed;background:linear-gradient(135deg,#ede9fe,#ddd6fe);padding:6px 12px;border-radius:20px;border:2px solid #8b5cf6}.floating-xp-notification{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;font-size:32px;font-weight:900;padding:24px 40px;border-radius:20px;box-shadow:0 12px 40px #8b5cf680;z-index:1000;animation:xp-float 1.5s ease-out forwards;pointer-events:none}@keyframes xp-float{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) translateY(30px)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.15) translateY(0)}70%{opacity:1;transform:translate(-50%,-50%) scale(1) translateY(-10px)}to{opacity:0;transform:translate(-50%,-50%) scale(.8) translateY(-150px)}}@media(max-width:380px){.step-cards-grid{gap:6px}.step-card{padding:6px 4px;min-height:65px}.step-emoji{font-size:20px}.step-name{font-size:8px}.floating-xp-notification{font-size:28px;padding:20px 32px}}.stt-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .2s ease-in}.stt-modal-content{background:#fff;border-radius:20px;padding:32px 24px max(32px,calc(env(safe-area-inset-bottom) + 16px)) 24px;max-width:420px;width:100%;box-shadow:0 10px 40px #0003;animation:slideUp .3s ease-out}.stt-modal-header{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:24px}.stt-score-badge{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 32px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;box-shadow:0 8px 24px #667eea4d}.stt-score-label{font-size:13px;font-weight:600;color:#ffffffe6;letter-spacing:.5px;text-transform:uppercase}.stt-score{font-size:48px;font-weight:900;color:#fff;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.2);animation:scoreGlow 2s ease-in-out infinite}.stt-score:after{content:"점";font-size:24px;font-weight:700;margin-left:4px}@keyframes scoreGlow{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.05);filter:brightness(1.1)}}.stt-modal-header h3{font-size:20px;font-weight:700;color:#1e40af;margin:0;text-align:center}.stt-modal-subtitle{font-size:14px;font-weight:500;color:#6b7280;margin:0;text-align:center;line-height:1.4}.stt-modal-body{background:#f0f9ff;border-left:4px solid #3b82f6;border-radius:12px;padding:20px;margin-bottom:24px}.stt-transcription{font-size:18px;font-weight:500;color:#1f2937;line-height:1.6;margin:0;text-align:center;word-break:break-word}.stt-modal-next-btn{width:100%;padding:16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #667eea66}.stt-modal-next-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea80}.stt-modal-next-btn:active{transform:translateY(0)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.association-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}.coming-soon-card{background:#fff;border-radius:24px;max-width:500px;width:100%;padding:48px 32px;box-shadow:0 20px 60px #0003;text-align:center;animation:fadeInUp .6s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:120px;height:120px;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:50%;margin-bottom:24px;color:#667eea;animation:rotate 3s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.coming-soon-title{font-size:32px;font-weight:700;color:#1f2937;margin-bottom:16px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.coming-soon-description{font-size:16px;color:#6b7280;line-height:1.6;margin-bottom:32px}.feature-preview{display:flex;justify-content:center;gap:24px;margin-bottom:32px;padding:24px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}.feature-item{display:flex;flex-direction:column;align-items:center;gap:8px}.feature-icon{font-size:32px;filter:grayscale(50%);opacity:.7}.feature-text{font-size:13px;font-weight:500;color:#9ca3af}.back-button{padding:16px 48px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:30px;font-size:18px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #667eea66;transition:all .2s ease}.back-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea80}.back-button:active{transform:translateY(0)}@media(max-width:768px){.association-container{padding:16px}.coming-soon-card{padding:36px 24px}.icon-wrapper{width:100px;height:100px}.icon-wrapper svg{width:64px;height:64px}.coming-soon-title{font-size:28px}.coming-soon-description{font-size:15px}.feature-preview{gap:16px}.feature-icon{font-size:28px}}@media(max-width:480px){.coming-soon-card{padding:28px 20px}.feature-preview{flex-direction:column;gap:12px}.feature-item{flex-direction:row;gap:12px}}.learning-hub{display:flex;flex-direction:column;min-height:100vh;background:linear-gradient(180deg,#f8f9ff,#fff);padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left)}.hub-header{display:flex;align-items:center;justify-content:space-between;padding:16px calc(20px + env(safe-area-inset-right)) 16px calc(20px + env(safe-area-inset-left));background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:env(safe-area-inset-top,0);z-index:100;box-shadow:0 2px 4px #00000005}.hub-back-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:8px;color:#667eea;transition:transform .2s}.hub-back-btn:hover{transform:translate(-3px)}.hub-title{font-size:20px;font-weight:700;color:#1a1a1a;margin:0;flex:1;text-align:center}.hub-debug-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #667eea4d;margin-right:8px}.hub-debug-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #667eea66}.hub-test-btn{background:linear-gradient(135deg,#f093fb,#f5576c);border:none;width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #f5576c4d}.hub-test-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #f5576c66}.hub-content{flex:1;padding:24px calc(20px + env(safe-area-inset-right)) 24px calc(20px + env(safe-area-inset-left));max-width:800px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:24px}.course-card{background:#fff;border-radius:20px;padding:28px;box-shadow:0 4px 20px #0000000f;border:3px solid #e5e7eb;display:flex;gap:20px;align-items:flex-start;transition:all .3s}.course-card:hover{box-shadow:0 8px 32px #0000001a;transform:translateY(-2px)}.course-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0;box-shadow:0 4px 12px #0000001a}.course-info{flex:1}.course-title{font-size:24px;font-weight:700;color:#1a1a1a;margin:0 0 8px}.course-description{font-size:15px;color:#6b7280;margin:0 0 12px;line-height:1.5}.course-duration{font-size:14px;color:#667eea;font-weight:600;margin:0}.course-details{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 12px #0000000a}.course-details h3{font-size:18px;font-weight:700;color:#1a1a1a;margin:0 0 16px}.detail-item{font-size:15px;color:#374151;margin:0 0 12px;line-height:1.6}.detail-item strong{color:#1a1a1a;font-weight:600}.test-data-selector{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 12px #0000000a;border:2px dashed #667eea}.test-data-selector h3{font-size:16px;font-weight:700;color:#667eea;margin:0 0 16px}.test-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.test-btn{padding:12px 20px;border:2px solid;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s;background:#fff}.test-btn.youtube{border-color:red;color:red}.test-btn.youtube:hover{background:red;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #ff00004d}.test-btn.word{border-color:#10b981;color:#10b981}.test-btn.word:hover{background:#10b981;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #10b9814d}.test-btn.shadowing{border-color:#667eea;color:#667eea}.test-btn.shadowing:hover{background:#667eea;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.test-panel{background:linear-gradient(135deg,#f093fb,#f5576c);border-radius:16px;padding:24px;color:#fff;margin-bottom:20px}.test-panel h3{font-size:18px;font-weight:700;margin:0 0 8px;color:#fff}.test-note{font-size:13px;margin:0 0 16px;opacity:.9}.test-json-input{width:100%;min-height:200px;padding:12px;border:2px solid rgba(255,255,255,.3);border-radius:8px;background:#fffffff2;color:#1a1a1a;font-family:Courier New,monospace;font-size:12px;resize:vertical;margin-bottom:12px}.test-json-input:focus{outline:none;border-color:#fff;background:#fff}.test-actions{display:flex;gap:12px}.test-submit-btn,.test-clear-btn{flex:1;padding:12px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.test-submit-btn{background:#fff;color:#f5576c}.test-submit-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ffffff4d}.test-clear-btn{background:#fff3;color:#fff;border:2px solid white}.test-clear-btn:hover{background:#ffffff4d}.debug-panel{background:#1f2937;border-radius:16px;padding:24px;color:#fff;max-height:600px;overflow-y:auto}.debug-panel h3{font-size:18px;font-weight:700;margin:0 0 20px;color:#fbbf24}.debug-section{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #374151}.debug-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.debug-section h4{font-size:15px;font-weight:600;margin:0 0 12px;color:#93c5fd}.validation-status{display:inline-block;padding:8px 16px;border-radius:8px;font-weight:600;font-size:14px;margin-bottom:16px}.validation-status.valid{background:#10b98133;color:#10b981}.validation-status.invalid{background:#ef444433;color:#ef4444}.validation-errors,.validation-warnings,.validation-optional{margin-top:12px}.validation-errors strong{color:#f87171}.validation-warnings strong{color:#fbbf24}.validation-optional strong{color:#93c5fd}.validation-errors ul,.validation-warnings ul,.validation-optional ul{list-style:none;padding:0;margin:8px 0 0}.error-item{padding:8px 12px;margin:4px 0;background:#ef44441a;border-left:3px solid #ef4444;border-radius:4px;font-size:13px;color:#fca5a5}.warning-item{padding:8px 12px;margin:4px 0;background:#fbbf241a;border-left:3px solid #fbbf24;border-radius:4px;font-size:13px;color:#fde68a}.optional-item{padding:8px 12px;margin:4px 0;background:#93c5fd1a;border-left:3px solid #93c5fd;border-radius:4px;font-size:13px;color:#bfdbfe}.received-data .data-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.received-data .data-header h4{margin:0}.copy-btn{padding:8px 16px;border:1px solid #3b82f6;background:#3b82f61a;color:#60a5fa;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:4px}.copy-btn:hover{background:#3b82f633;transform:translateY(-1px);box-shadow:0 2px 8px #3b82f64d}.copy-btn:active{transform:translateY(0)}.data-preview{background:#0f172a;border:1px solid #334155;border-radius:8px;padding:16px;overflow-x:auto;font-size:12px;line-height:1.6;color:#e2e8f0;font-family:Courier New,monospace;max-height:400px}.checklist{list-style:none;padding:0;margin:0}.checklist li{padding:10px 12px;margin:6px 0;background:#94a3b81a;border-radius:8px;font-size:14px;display:flex;align-items:center;gap:8px}.checklist li.checked:before{content:"✅";font-size:16px}.checklist li.unchecked:before{content:"❌";font-size:16px}.hub-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:24px}.btn-start-learning{width:100%;padding:18px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:16px;font-size:17px;font-weight:700;cursor:pointer;transition:all .3s;box-shadow:0 6px 20px #667eea59;min-height:56px}.btn-start-learning:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 28px #667eea73}.btn-start-learning:active:not(:disabled){transform:translateY(0)}.btn-start-learning:disabled{background:linear-gradient(135deg,#9ca3af,#6b7280);cursor:not-allowed;box-shadow:none}.no-data{text-align:center;padding:40px 20px}.no-data-icon{font-size:80px;margin-bottom:24px}.no-data h2{font-size:24px;font-weight:700;color:#1a1a1a;margin:0 0 12px}.no-data p{font-size:15px;color:#6b7280;margin:0 0 32px}.alternative-courses{margin-top:40px}.alternative-courses h3{font-size:18px;font-weight:700;color:#1a1a1a;margin:0 0 20px}.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:20px}.alternative-course-card{background:#fff;border:2px solid #e5e7eb;border-radius:16px;padding:20px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .3s;text-align:left}.alternative-course-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001a}.alt-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}.alt-info{flex:1;display:flex;flex-direction:column;gap:4px}.alt-info strong{font-size:16px;font-weight:700;color:#1a1a1a}.alt-info span{font-size:13px;color:#6b7280;line-height:1.4}.learning-hub.loading{display:flex;align-items:center;justify-content:center;min-height:100vh}.loading-spinner{text-align:center}.spinner{width:48px;height:48px;border:4px solid rgba(102,126,234,.2);border-top-color:#667eea;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 20px}@keyframes spin{to{transform:rotate(360deg)}}.loading-spinner p{font-size:15px;color:#6b7280;font-weight:600}.postmessage-test-section{margin-top:24px;padding:20px;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);border-radius:12px;border:2px dashed #9ca3af}.postmessage-test-section h4{margin:0 0 12px;color:#374151;font-size:16px;font-weight:600}.test-buttons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:16px 0 24px}.test-message-btn{padding:12px 16px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;min-height:48px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0000001a}.test-message-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.test-message-btn:active{transform:translateY(0)}.xp-test{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff}.course-complete-test{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.mic-test{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.audio-test{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff}.progress-test{background:linear-gradient(135deg,#06b6d4,#0891b2);color:#fff}.haptic-test{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff}.test-result-display{background:#1f2937;border-radius:8px;padding:16px;margin-top:16px}.test-result-display h5{margin:0 0 12px;color:#f9fafb;font-size:14px;font-weight:600}.message-log{background:#111827;color:#d1d5db;font-family:Courier New,monospace;font-size:12px;padding:12px;border-radius:6px;max-height:300px;overflow-y:auto;white-space:pre-wrap;word-wrap:break-word;line-height:1.4;border:1px solid #374151}.message-log:empty:before{content:"테스트 버튼을 클릭하면 전송된 메시지가 여기에 표시됩니다.";color:#6b7280;font-style:italic}@media(max-width:640px){.course-card{flex-direction:column;align-items:center;text-align:center;padding:24px}.course-icon{width:56px;height:56px;font-size:28px}.course-title{font-size:20px}.course-grid{grid-template-columns:1fr}.debug-panel{padding:20px}.data-preview{font-size:11px}.test-buttons-grid{grid-template-columns:1fr}.postmessage-test-section{padding:16px}}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;color:#1a1a1a;line-height:1.6}.hero{flex:1;display:flex;align-items:center;justify-content:center;padding:4rem 2rem;background-color:#fff;border-bottom:1px solid #f0f0f0}.hero-content{max-width:720px;text-align:center}.hero-title{font-size:3.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:1.5rem;color:#1a1a1a}.hero-subtitle{font-size:1.5rem;font-weight:400;color:#1a1a1a;margin-bottom:1rem;letter-spacing:-.005em}.hero-meta{font-size:.95rem;color:#666;margin-bottom:3rem;font-weight:500;letter-spacing:.3px}.cta-button{display:inline-block;padding:.875rem 2rem;background-color:#1a1a1a;color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;border:1px solid #1a1a1a;border-radius:4px;transition:all .2s ease;cursor:pointer}.cta-button:hover{background-color:#fff;color:#1a1a1a;border-color:#1a1a1a}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f6f7f9;color:#101010;line-height:1.65}#root{width:100%;min-height:100vh;display:flex;flex-direction:column}.section-frame{max-width:1180px;margin:0 auto;padding:0 1.5rem}.hero{flex:1;padding:5rem 1.5rem 4.5rem;background:radial-gradient(circle at 20% 20%,#eef1f7 0,transparent 35%),linear-gradient(180deg,#fff,#f7f8fb);border-bottom:1px solid #e6e8ef}.hero-surface{max-width:1080px;margin:0 auto;background:#fff;border:1px solid #e3e6ee;box-shadow:0 16px 48px #10182814;border-radius:14px;padding:2.75rem 2.5rem;display:grid;row-gap:1.5rem;justify-items:start}.hero-line{width:64px;height:4px;border-radius:999px;background:linear-gradient(90deg,#101010,#4a5568)}.hero-content{max-width:760px;text-align:left}.hero-title{font-size:3rem;font-weight:700;letter-spacing:-.02em;margin-bottom:1rem;color:#0f172a}.hero-subtitle{font-size:1.35rem;font-weight:500;color:#1f2937;margin-bottom:.75rem;letter-spacing:-.005em}.hero-meta{font-size:.98rem;color:#4b5563;margin-bottom:2rem;font-weight:500;letter-spacing:.3px}.cta-button{display:inline-block;padding:.85rem 1.6rem;background-color:#0f172a;color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;border:1px solid #0f172a;border-radius:8px;transition:all .2s ease;cursor:pointer}.cta-button.ghost{background:#fff;color:#0f172a;border-color:#0f172a}.cta-button:hover{background-color:#0f172a;color:#fff;box-shadow:0 10px 30px #0f172a1f}.cta-button:active{transform:scale(.98)}.products{padding:4.5rem 1.5rem 4.75rem;background-color:#f8fafc;border-bottom:1px solid #e6e8ef}.products-header{max-width:920px;margin:0 auto 2.75rem;text-align:left;display:grid;row-gap:.5rem}.section-title{font-size:1.65rem;font-weight:700;color:#0f172a}.section-subtitle{font-size:1rem;color:#475569;font-weight:500}.products-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem}.product-card{background-color:#fff;border:1px solid #e3e6ee;border-radius:12px;transition:box-shadow .18s ease,border-color .18s ease}.product-card:hover{border-color:#cbd5e1;box-shadow:0 16px 36px #0f172a14}.product-card-featured{border:2px solid #1890ff;box-shadow:0 0 0 1px #fff,0 0 12px #1890ff40}.product-card-featured:hover{border-color:#0050b3;box-shadow:0 0 0 1px #fff,0 8px 20px #1890ff59}.product-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.product-name{font-size:1.25rem;font-weight:700;color:#0f172a;flex:1}.product-description{font-size:.97rem;color:#3f4a5a;line-height:1.7;margin-bottom:1.25rem}.product-meta-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-top:.75rem;border-top:1px solid #edf1f7}.product-meta-label{font-size:.9rem;color:#566072}.product-tag,.product-meta-tag{text-transform:uppercase;font-weight:700;letter-spacing:.4px}.product-actions{display:flex;gap:.75rem;margin-top:1rem;padding-top:1rem;border-top:1px solid #edf1f7}.product-link-button{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.2rem;background-color:#0f172a;color:#fff;text-decoration:none;font-size:.9rem;font-weight:600;border:1px solid #0f172a;border-radius:6px;transition:all .18s ease;cursor:pointer}.product-link-button:hover{background-color:#1a2a4a;box-shadow:0 6px 16px #0f172a1f;transform:translateY(-1px)}.product-link-button:active{transform:translateY(0)}.about{padding:4.25rem 1.5rem 4.5rem;background-color:#f1f3f7;border-bottom:1px solid #e1e4ec}.about-surface{max-width:840px;margin:0 auto;background:#fff;border:1px solid #e1e4ec;border-radius:12px;padding:2.25rem 2rem;box-shadow:0 10px 26px #0f172a0f}.about-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}.section-divider{flex-shrink:0;width:44px;height:1px;background:linear-gradient(90deg,#0f172a,#94a3b8)}.about-content{max-width:640px;margin:0}.about-text{font-size:1.02rem;color:#202b3a;line-height:1.85;margin-bottom:1.2rem}.about-text:last-of-type{margin-bottom:0}.footer{margin-top:auto;padding:2rem 1.5rem;background-color:#eef1f5;border-top:1px solid #d9dde6}.footer-content{max-width:960px;margin:0 auto;text-align:center}.footer-text{font-size:.9rem;color:#4b5563;font-weight:500}.footer-info{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #d9dde6}.footer-company{margin-bottom:1rem}.company-name{font-size:.9rem;color:#1a1a1a;font-weight:600;margin:0}.company-address{font-size:.85rem;color:#4b5563;margin:.25rem 0 0}.footer-details{font-size:.85rem;color:#4b5563;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.5rem}.footer-item{display:inline-block}.footer-divider{display:inline-block;opacity:.5}.footer-email{color:#0050b3;text-decoration:none;transition:color .18s ease}.footer-email:hover{color:#1890ff;text-decoration:underline}.footer-certificate{color:#0050b3;text-decoration:none;transition:color .18s ease}.footer-certificate:hover{color:#1890ff;text-decoration:underline}@media(max-width:768px){.hero-title{font-size:2.25rem;margin-bottom:1rem}.hero-subtitle{font-size:1.15rem;margin-bottom:.75rem}.hero-meta{font-size:.9rem;margin-bottom:1.8rem}.hero{padding:3.25rem 1.25rem}.section-title{font-size:1.45rem}.section-subtitle{font-size:.95rem}.products,.about{padding:3.25rem 1.25rem}.products-header{margin-bottom:2.25rem}.products-grid{gap:1.25rem}.product-description{margin-bottom:1rem}.about-surface{padding:2rem 1.6rem}.about-content{padding:0 .25rem}}@media(max-width:480px){.hero-title{font-size:1.9rem;margin-bottom:.75rem}.hero-subtitle{font-size:1.05rem}.hero-meta{font-size:.88rem;margin-bottom:1.35rem}.hero{padding:2.6rem 1rem;min-height:auto}.cta-button{padding:.75rem 1.4rem;font-size:.9rem}.section-title{font-size:1.3rem;margin-bottom:.4rem}.section-subtitle{font-size:.9rem}.products,.about{padding:2.6rem 1rem}.products-grid{grid-template-columns:1fr;gap:1rem}.product-card{border-radius:10px}.product-name{font-size:1.1rem}.product-description{font-size:.9rem}.about-text{font-size:.96rem;margin-bottom:1rem}.footer-text{font-size:.85rem}}