*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;width:100%;background:var(--color-surface)!important}.content{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;display:flex;flex-direction:column;align-items:center;width:100%;height:100%}.logo{margin:30px 0;transform:rotate(-4deg)}.logo img{cursor:pointer;transition:transform .1s ease;display:inline-block;height:70px;filter:drop-shadow(2px 2px 1px var(--shadow-color))}.task-summary{text-align:center;margin-bottom:16px;font-size:1rem;margin-top:20px}.actions{display:flex;justify-content:center;gap:10px;margin:20px 0}.actions button{padding:8px 16px;font-size:1.25rem;border:none;border-radius:6px;cursor:pointer}.start{background-color:var(--color-primary);color:var(--color-bg)}.start:hover{background-color:var(--color-primary-hover)}.refresh{color:var(--color-text);background-color:var(--color-secondary-gray)}.refresh:hover{background-color:var(--color-secondary-gray-hover)}button:disabled{background-color:#e0e0e0;color:#9e9e9e;border:1px solid #ccc;cursor:not-allowed;opacity:.7;box-shadow:none}.tabs{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;margin-bottom:12px;margin-top:20px;max-width:500px;width:100%}.tabs span{margin:0 12px;cursor:pointer;padding-bottom:2px}.tabs .active{border-bottom:2px solid var(--color-primary);color:var(--color-primary);font-weight:700}.tabs .blank{flex-grow:1}#showExplainBtn{background:none;border:none;cursor:pointer;margin-right:5px}#showExplainBtn img{width:20px;height:20px;cursor:pointer}.word-list{max-width:500px;width:100%;background:var(--color-bg);border-radius:6px;box-shadow:0 2px 4px var(--shadow-color);overflow-y:auto;overflow-x:hidden;flex:1;margin-bottom:20px}.word-explain{flex-grow:1;overflow:hidden;margin-left:20px;max-height:100px;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 80%,rgba(0,0,0,0) 100%);-webkit-mask-repeat:no-repeat;-webkit-mask-position:bottom;-webkit-mask-size:100% 100%;mask-image:linear-gradient(to bottom,#000 80%,#0000);mask-repeat:no-repeat;mask-position:bottom;mask-size:100% 100%}.word-explain-hide{text-shadow:0 0 80px var(--shadow-color);color:transparent}.word-item{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--color-border);font-size:.875rem;cursor:pointer;transition:background-color .3s;border-radius:6px}.word-item:hover{background-color:var(--color-surface-hover)}.word-item:last-child{border-bottom:none}.word-item a{margin-left:5px;margin-right:5px;flex-shrink:0}.word-info{display:flex;flex-direction:column;flex-shrink:0;min-width:100px;margin-left:10px}.word-title{font-weight:700}.word-phonetic{font-size:.8125rem;color:var(--color-text-muted);display:flex;align-items:center;gap:1px}.word-phonetic img{width:15px;height:15px;cursor:pointer}.progress-circle{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:conic-gradient(var(--draw-color) calc(var(--percent) * 1%),var(--draw-bg-color) 0%);display:flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:500;color:var(--color-text);margin-right:10px;margin-left:16px}#loading{text-align:center;padding-bottom:10px;color:var(--color-text-muted)}.text{word-wrap:break-word;word-break:break-all;white-space:normal;margin:10px;background:var(--color-surface);color:var(--color-text);padding:1rem 1.5rem;border-left:5px solid var(--color-primary);border-radius:6px;margin-bottom:2rem;transition:background .3s}.invisible-content{visibility:hidden;white-space:normal;width:100%}.popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-surface);border:2px solid var(--color-border);z-index:1000;display:block;flex-direction:column;justify-content:center;align-items:center;max-width:min(500px,95%);width:400px;max-height:min(600px,95%);overflow-y:auto;border-radius:16px;box-shadow:0 4px 18px var(--shadow-color);padding:20px}.popup-head{display:flex;justify-content:right;align-items:center;width:100%;height:35px}.popover-content{padding:3px;font-size:1rem}.popup-ipa{flex-grow:1;text-align:left;padding-left:10px;font-size:1rem}.popup-bts{display:flex;justify-content:center;align-items:center;width:auto;height:35px}.popup-copy:active{transform:scale(.95)}.popup-content{display:flex;flex-direction:column;justify-content:left;align-items:left;width:100%}.popup-title{display:flex;justify-content:left;align-items:baseline;margin:8px;flex-wrap:wrap}.popup-title-text{margin-right:30px;font-size:1.5625rem;font-weight:700;color:var(--color-primary)}.popup-title-ipa{font-size:1rem;color:var(--color-text-muted);margin-right:5px}.popup-title-group{display:flex;align-items:center}.popup-explain{margin:6px 0;padding:8px 12px;border-left:3px solid var(--color-border);background:var(--color-bg);border-radius:6px;font-size:1rem}.popup-explain span{font-weight:600;color:var(--color-primary);margin-right:6px;font-size:1rem;font-weight:700}.custom-definition{margin-top:6px;position:relative}.custom-definition textarea{width:100%;height:60px;border:1px solid var(--color-border);border-radius:8px;padding:8px;font-size:.875rem;resize:none;outline:none;transition:border .2s;color:var(--color-text);background-color:var(--color-surface)}.custom-definition textarea:focus{border:1px solid var(--color-border);background:var(--color-bg)}.helper-text{position:absolute;bottom:10px;right:10px;font-size:.6875rem;color:var(--color-text-muted);pointer-events:none}.popup-bottom{display:flex;justify-content:right;align-items:center;width:100%;height:40px;font-size:.875rem;margin-top:10px}.card-wrapper{top:50%;left:50%;transform:translate(-50%,-50%);position:fixed;overflow:hidden;width:100vw;height:100vh;background:#000000b3;display:none;z-index:1000}.nav-button{position:absolute;top:50%;transform:translateY(-50%);z-index:1001;width:45px;height:45px;border-radius:50%;border:none;background:#dfe6f8b3;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);font-size:1.375rem;font-weight:700;color:var(--color-primary);cursor:pointer;opacity:.6;transition:opacity .3s ease,transform .3s ease,background-color .3s ease}.nav-button:hover{opacity:1;background:#cddbf9e6}.nav-button.left{left:calc(50vw - 300px)}.nav-button.right{right:calc(50vw - 300px)}@media screen and (max-width: 768px){.logo{margin:15px 0;transform:rotate(-4deg)}.logo img{cursor:pointer;transition:transform .1s ease;display:inline-block;height:55px;filter:drop-shadow(2px 2px 1px rgba(0,0,0,.2))}.actions{display:flex;justify-content:center;gap:10px;margin:10px 0}.actions button{padding:4px 16px;font-size:1.25rem;border:none;border-radius:6px;cursor:pointer}.nav-button.left{left:5px}.nav-button.right{left:95px}.nav-button{top:calc(100vh - 100px);width:60px;height:60px}.popup{position:fixed;transform:translate(-50%,-50%);background:var(--color-surface);border:none;z-index:1000;display:block;flex-direction:column;justify-content:center;align-items:center;overflow-y:auto;border-radius:0;box-shadow:none;padding:80px 20px 160px;width:100vw;height:100vh;max-width:100%;max-height:100%}.popup-title-pronounce-btn{position:relative;display:block;bottom:-1px}}