*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;font-family:Noto Sans,Noto Sans TC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:#f5f5f5;overflow:hidden}.container{display:flex;flex-direction:column;aspect-ratio:1/1;max-width:100%}.player-section{flex:1;max-height:56.25vw;background-color:#1a1a1a;display:flex;align-items:center;justify-content:center;position:relative}.qa-section{flex:1;background-color:#fff;border-top:1px solid #e0e0e0;padding:clamp(7.3px,2.13vw,10.7px) 0;overflow:hidden}.qa-container{height:100%;display:flex;align-items:stretch;justify-content:center}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;color:#666}.loading-spinner{width:clamp(29px,8.53vw,42.7px);height:clamp(29px,8.53vw,42.7px);border:clamp(2.7px,.8vw,4px) solid #e0e0e0;border-top-color:#ff5722;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto clamp(10.9px,3.2vw,16px)}@keyframes spin{to{transform:rotate(360deg)}}.error-message{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;color:#666;padding:clamp(14.5px,4.27vw,21.3px)}.error-message button{margin-top:clamp(10.9px,3.2vw,16px);padding:clamp(7.3px,2.13vw,10.7px) clamp(21.8px,6.4vw,32px);background-color:#ff5722;color:#fff;border:none;border-radius:clamp(18.1px,5.33vw,26.7px);font-size:clamp(12.7px,3.73vw,18.7px);cursor:pointer;transition:background-color .2s}.error-message button:hover{background-color:#e64a19}.qa-scroll{display:flex;gap:clamp(7.3px,2.13vw,10.7px);overflow-x:auto;overflow-y:hidden;padding:0 clamp(7.3px,2.13vw,10.7px);-webkit-overflow-scrolling:touch;scrollbar-width:none;height:100%;align-items:stretch;scroll-behavior:smooth}.qa-scroll::-webkit-scrollbar{display:none}.qa-card{flex:0 0 auto;width:clamp(127px,37.33vw,187px);background:linear-gradient(135deg,#fff,#fafafa);border-radius:clamp(9.1px,2.67vw,13.3px);padding:clamp(9.1px,2.67vw,13.3px);box-shadow:0 clamp(1.8px,.53vw,2.7px) clamp(7.3px,2.13vw,10.7px) #0000001a;cursor:pointer;transition:width .3s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;max-height:190px}.qa-card.expanded{width:calc(100vw - clamp(32.7px,9.6vw,48px));max-height:190px}.qa-header{display:flex;flex-direction:column;flex:1;min-height:0}.qa-tag{display:inline-block;padding:clamp(1.8px,.53vw,2.7px) clamp(5.4px,1.6vw,8px);background-color:#ff5722;color:#fff;font-size:clamp(8.2px,2.4vw,12px);font-weight:500;border-radius:clamp(7.3px,2.13vw,10.7px);margin-bottom:clamp(3.6px,1.07vw,5.3px);transition:all .3s ease;flex-shrink:0;align-self:flex-start}.qa-question{font-size:clamp(10.9px,3.2vw,16px);font-weight:600;color:#333;line-height:1.3;margin-bottom:0;transition:all .3s ease;flex:1;display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.qa-hint{font-size:clamp(9.1px,2.67vw,13.3px);color:#999;display:flex;align-items:center;gap:clamp(1.8px,.53vw,2.7px);flex-shrink:0}.qa-hint:before{content:"👆";font-size:clamp(9.1px,2.67vw,13.3px)}.qa-answer{display:none;font-size:clamp(10px,2.93vw,14.5px);color:#555;line-height:1.6em;overflow:hidden}.qa-card.expanded .qa-header{display:flex;flex-direction:row;align-items:center;gap:clamp(5.4px,1.6vw,8px);margin-bottom:clamp(3.6px,1.07vw,5.3px);flex:0 0 auto}.qa-card.expanded{background:linear-gradient(135deg,#fff5f2,#fff)}.qa-card.expanded .qa-tag{font-size:clamp(7.3px,2.13vw,10.7px);padding:clamp(1.8px,.53vw,2.7px) clamp(4.5px,1.33vw,6.7px);margin-bottom:0;flex-shrink:0}.qa-card.expanded .qa-question{font-size:clamp(10px,2.93vw,14.7px);-webkit-line-clamp:1;line-clamp:1;margin-bottom:0;flex:1}.qa-card.expanded .qa-answer{display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;border-top:1px solid #eee;padding-top:clamp(3.6px,1.07vw,5.3px);flex:0 0 auto;height:clamp(82px,24vw,118px)}.qa-card.expanded .qa-hint{display:none}.qa-collapse{display:none;font-size:clamp(8.2px,2.4vw,12px);color:#ff5722;margin-top:clamp(1.8px,.53vw,2.7px);text-align:right;flex-shrink:0}.qa-card.expanded .qa-collapse{display:block}.qa-card,.loading-spinner{will-change:transform}
