:root{--ink:#15261d;--cream:#f6f0e5;--paper:#fffdf7;--green:#1e5a3c;--lime:#d8f15a;--line:#d9d2c4}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,"Noto Sans TC",sans-serif}button,input{font:inherit}.topbar{height:72px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(246,240,229,.92);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.brand{text-decoration:none;color:var(--ink);font-size:22px;font-weight:900;display:flex;align-items:center;gap:10px;letter-spacing:-1px}.brand>span:last-child>span{color:var(--green)}.brandMark{width:34px;height:34px;border-radius:50% 50% 50% 12px;background:var(--lime);display:grid;place-items:center;font-size:13px}nav{display:flex;align-items:center;gap:30px}nav a{color:#536057;text-decoration:none;font-size:14px;font-weight:700}.addButton{border:1px solid var(--ink);border-radius:99px;padding:10px 18px;background:transparent;font-weight:800}.hero{text-align:center;padding:70px 20px 46px;background:radial-gradient(circle at 72% 22%,rgba(216,241,90,.35),transparent 20%),linear-gradient(var(--cream),#eee5d5)}.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:800;color:var(--green)}.eyebrow span{display:inline-block;width:6px;height:6px;background:var(--lime);border:2px solid var(--green);border-radius:50%;margin-right:6px}h1{font-family:Georgia,"Noto Serif TC",serif;font-size:clamp(44px,6vw,76px);line-height:1.03;letter-spacing:-3px;margin:22px 0 18px;font-weight:500}h1 em{color:var(--green);font-weight:500}.hero>p{color:#647068;font-size:17px}.searchBox{max-width:720px;margin:30px auto 14px;height:68px;background:white;border:1px solid #c8c1b5;border-radius:14px;display:flex;align-items:center;padding:7px;box-shadow:0 15px 35px rgba(21,38,29,.09);text-align:left}.searchBox>span{font-size:32px;padding:0 14px;transform:rotate(-15deg)}.searchBox input{flex:1;border:0;outline:0;font-size:20px;color:var(--ink);min-width:0}.searchBox button{border:0;background:var(--ink);color:white;border-radius:9px;padding:16px 20px;font-weight:800}.searchBox b{color:var(--lime);margin-left:8px}.trust{font-size:12px;color:#667169}.trust span{display:inline-grid;place-items:center;width:17px;height:17px;background:var(--green);color:white;border-radius:50%;font-size:10px;margin-right:5px}.workspace{padding:42px 5vw 58px;max-width:1320px;margin:auto}.filters{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.filters>div{display:flex;gap:6px}.filters button{border:1px solid var(--line);background:transparent;padding:9px 16px;border-radius:99px;font-weight:700;color:#69746d}.filters button.active{background:var(--ink);color:white;border-color:var(--ink)}.filters p{font-size:13px;color:#6f776f}.filters strong{color:var(--green)}.playerGrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,.8fr);background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(50,43,31,.08)}.videoWrap{background:#17211b}.videoWrap iframe{border:0;width:100%;aspect-ratio:16/9;display:block}.videoMeta{display:flex;align-items:center;gap:12px;padding:17px 20px;color:white}.videoMeta div{display:flex;flex-direction:column;gap:3px}.videoMeta small{color:#9fa9a2}.type{font-size:11px;border:1px solid #829087;border-radius:99px;padding:5px 8px}.license{margin-left:auto;font-size:11px;color:var(--lime)}.transcript{padding:27px;display:flex;flex-direction:column}.transcriptHead{display:flex;justify-content:space-between;color:#788178;font-size:12px;font-weight:800;letter-spacing:1px}.transcriptHead button{border:0;background:#e8eadf;padding:6px 9px;border-radius:6px;font-size:11px}.context{color:#9b9c95;margin-top:auto;padding-top:38px;font-family:Georgia,serif;font-size:17px}.transcript blockquote{font-family:Georgia,"Noto Serif TC",serif;font-size:29px;line-height:1.35;margin:16px 0}.transcript mark{background:var(--lime);color:var(--ink);padding:0 3px}.translation{color:#667169;font-size:14px}.controls{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:7px;margin-top:auto;padding-top:32px}.controls button{border:1px solid var(--line);background:white;border-radius:8px;padding:10px 5px;font-size:12px;font-weight:700}.controls .replay{background:var(--green);color:white;border-color:var(--green)}.tip{border-top:1px solid var(--line);margin-top:20px;padding-top:15px;display:flex;flex-direction:column;gap:5px;font-size:12px}.tip b{color:var(--green)}.tip span{color:#7c827d}.sourceBand{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);max-width:1200px;margin:0 auto 70px}.sourceBand div{padding:30px;border-right:1px solid var(--line);display:grid;grid-template-columns:42px 1fr;gap:3px 10px}.sourceBand div:last-child{border:0}.sourceBand span{grid-row:1/3;font-family:Georgia,serif;color:var(--green);font-size:22px}.sourceBand strong{font-size:14px}.sourceBand p{margin:2px 0;color:#778078;font-size:12px}
.videoWrap video{border:0;width:100%;aspect-ratio:16/9;display:block;background:#000}.soundButton{display:block;margin:14px auto 0;border:1px solid var(--lime);background:var(--lime);color:var(--ink);border-radius:99px;padding:11px 20px;font-weight:900;cursor:pointer}.license{text-decoration:none}.emptyState{min-height:360px;border:1px solid var(--line);border-radius:20px;background:var(--paper);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:12px;padding:30px}.emptyState strong{font-family:Georgia,"Noto Serif TC",serif;font-size:30px}.emptyState span{color:#778078}.emptyState button{border:0;border-radius:99px;background:var(--green);color:white;padding:12px 20px;font-weight:800;margin-top:6px}
@media(max-width:850px){nav a{display:none}.playerGrid{grid-template-columns:1fr}.transcript{min-height:410px}.filters p{display:none}.sourceBand{grid-template-columns:1fr;margin:0 5vw 40px}.sourceBand div{border-right:0;border-bottom:1px solid var(--line)}h1{letter-spacing:-2px}.hero{padding-top:52px}}@media(max-width:520px){.topbar{padding:0 18px}.addButton{padding:9px 12px}.hero{padding-left:14px;padding-right:14px}.searchBox button{padding:15px 13px}.searchBox b{display:none}.workspace{padding:28px 14px}.filters button{padding:8px 10px;font-size:12px}.videoMeta{padding:13px}.license{display:none}.transcript{padding:21px}.transcript blockquote{font-size:25px}.controls{grid-template-columns:1fr 1fr}.controls .replay{grid-column:1/3;grid-row:1}.sourceBand{margin-left:14px;margin-right:14px}}
.wordState{min-height:390px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(circle at 90% 10%,rgba(216,241,90,.32),transparent 28%),var(--paper);padding:42px 48px;box-shadow:0 18px 50px rgba(50,43,31,.06)}.wordBadge{display:inline-block;border-radius:99px;background:var(--ink);color:var(--lime);padding:7px 11px;font-size:11px;font-weight:900;letter-spacing:.7px}.wordState h2{font-family:Georgia,serif;font-size:54px;line-height:1;margin:24px 0 8px;color:var(--green)}.wordTranslation{font-size:20px;font-weight:800}.wordState blockquote{font-family:Georgia,"Noto Serif TC",serif;font-size:25px;margin:32px 0 8px}.wordState>p{color:#667169;margin:0}.pendingClip{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);margin-top:32px;padding-top:22px}.pendingClip>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lime);font-weight:900}.pendingClip div{display:flex;flex-direction:column;gap:4px}.pendingClip small{color:#778078}.relatedWords{margin-top:24px;color:#778078;font-size:12px}.relatedWords button{border:1px solid var(--line);background:white;border-radius:99px;padding:6px 10px;margin:4px;cursor:pointer;color:var(--green);font-weight:800}@media(max-width:520px){.wordState{padding:30px 24px}.wordState h2{font-size:42px}.wordState blockquote{font-size:21px}}
.siteFooter{border-top:1px solid var(--line);padding:24px 5vw 32px;text-align:center;color:#778078;font-size:13px}.siteFooter strong{color:var(--green);letter-spacing:.5px}

/* Natural card system */
:root{--ink:#121212;--cream:#eef5fc;--paper:#fffdf7;--green:#1478d4;--lime:#ffd94a;--line:#151515;--peach:#ffad7d;--mint:#a8df91;--lavender:#bea7f3;--sky:#a9d9f8}body{background:var(--cream);font-family:Arial,"Noto Sans TC",sans-serif}.topbar{height:78px;background:rgba(255,255,255,.88);border-bottom:2px solid var(--ink);padding:0 7vw}.brand{letter-spacing:-.5px;font-size:20px}.brand>span:last-child{display:flex;flex-direction:column;line-height:1.05}.brand>span:last-child>span{color:inherit}.brand small{font-size:9px;letter-spacing:2px;margin-top:5px;color:#5c6670}.brandMark{width:40px;height:40px;background:var(--lime);border:2px solid var(--ink);border-radius:50%;box-shadow:3px 3px 0 var(--ink);font-size:18px}.addButton{background:var(--lime);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:10px 18px}.hero{position:relative;padding:86px 20px 72px;background:radial-gradient(circle at 78% 20%,rgba(255,217,74,.35),transparent 17%),radial-gradient(circle at 18% 70%,rgba(169,217,248,.55),transparent 22%),var(--cream);border-bottom:2px solid var(--ink);overflow:hidden}.heroSpark{position:absolute;right:13%;top:46px;font-size:62px;color:var(--green);transform:rotate(12deg)}.eyebrow{color:var(--green);font-size:12px;letter-spacing:3px}.eyebrow span{background:var(--lime);border-color:var(--ink)}h1{font-family:Arial,"Noto Sans TC",sans-serif;font-size:clamp(48px,6.8vw,88px);font-weight:950;letter-spacing:-5px;line-height:.98;margin:27px 0 22px}h1 em{font-style:normal;color:var(--green);font-weight:950}.hero>p{max-width:650px;margin:0 auto;color:#4f5962;font-size:17px;line-height:1.8}.searchBox{max-width:760px;height:72px;border:2px solid var(--ink);border-radius:99px;box-shadow:7px 7px 0 var(--ink);margin-top:32px;padding:8px 9px 8px 18px}.searchBox>span{font-size:27px}.searchBox button{background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:99px;padding:15px 25px}.searchBox b{color:var(--ink)}.trust{margin-top:20px;color:#53606b}.trust span{background:var(--ink);color:var(--lime)}.methodStrip{height:54px;background:var(--ink);color:white;display:flex;gap:25px;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;font-weight:900;letter-spacing:1px;font-size:13px}.methodStrip b{color:var(--lime)}.workspace{max-width:1280px;padding-top:78px}.sectionIntro{margin-bottom:36px}.sectionIntro>span{font-size:11px;font-weight:950;letter-spacing:3px;color:var(--green)}.sectionIntro h2{font-size:clamp(38px,5vw,62px);letter-spacing:-3px;margin:12px 0 10px}.sectionIntro p{color:#5b6570;margin:0;font-size:16px}.filters button{border:2px solid var(--ink);background:var(--lime);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}.filters p{color:#4d5760}.filters strong{color:var(--green)}.playerGrid{border:2px solid var(--ink);border-radius:25px;box-shadow:9px 9px 0 var(--ink);background:var(--lavender);overflow:hidden;grid-template-columns:minmax(0,1.35fr) minmax(350px,.85fr)}.videoWrap{position:relative;background:var(--peach);padding:22px;border-right:2px solid var(--ink)}.cardNumber{display:inline-block;background:var(--ink);color:white;border-radius:99px;padding:7px 12px;font-size:11px;font-weight:950;letter-spacing:1.5px;margin-bottom:13px}.videoWrap video{border:2px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);overflow:hidden}.soundButton{background:var(--lime);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);margin-top:17px}.videoMeta{color:var(--ink);padding:20px 0 0}.videoMeta small{color:#3d342f}.type{border:2px solid var(--ink);background:white;font-weight:900}.license{background:#fff;border:2px solid var(--ink);color:var(--ink);border-radius:99px;padding:7px 10px;text-decoration:none}.transcript{background:var(--lavender);padding:32px}.transcriptHead{color:#332b46}.transcriptHead button{background:var(--lime);border:2px solid var(--ink);font-weight:900}.context{color:#584f70;font-family:Arial,sans-serif;font-size:14px;font-weight:800}.transcript blockquote{font-family:Arial,"Noto Sans TC",sans-serif;font-size:31px;font-weight:950}.transcript mark{background:var(--lime);border:1px solid var(--ink);border-radius:5px}.translation{color:#4c4560}.controls button{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-weight:900}.controls .replay{background:var(--lime);color:var(--ink);border-color:var(--ink)}.tip{border-color:rgba(18,18,18,.45)}.tip b{color:var(--ink)}.tip span{color:#4f4861}.emptyState{border:2px solid var(--ink);background:var(--sky);box-shadow:8px 8px 0 var(--ink)}.emptyState button{background:var(--lime);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}.sourceBand{gap:18px;border:0;margin-top:25px}.sourceBand div{border:2px solid var(--ink)!important;border-radius:20px;box-shadow:5px 5px 0 var(--ink);padding:30px}.sourceBand div:nth-child(1){background:var(--mint)}.sourceBand div:nth-child(2){background:var(--lavender)}.sourceBand div:nth-child(3){background:var(--lime)}.sourceBand span{color:var(--ink);font-family:Arial,sans-serif;font-weight:950}.sourceBand p{color:#343434}.siteFooter{background:var(--ink);color:white;border:0;padding:32px 7vw;display:flex;align-items:center;justify-content:space-between;text-align:left}.siteFooter span{font-size:18px;font-weight:950}.siteFooter span b{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--lime);color:var(--ink);margin-right:8px}.siteFooter small{color:#b9c1c8}.siteFooter strong{color:var(--lime)}
@media(max-width:850px){.videoWrap{border-right:0;border-bottom:2px solid var(--ink)}.heroSpark{right:5%;font-size:42px}.siteFooter{gap:14px;flex-wrap:wrap}.methodStrip{justify-content:flex-start;padding:0 20px}}
@media(max-width:520px){h1{letter-spacing:-3px}.topbar{height:70px}.brand small{display:none}.searchBox{height:64px;box-shadow:5px 5px 0 var(--ink)}.searchBox button{padding:13px 15px}.sectionIntro h2{letter-spacing:-2px}.playerGrid{box-shadow:6px 6px 0 var(--ink)}.videoWrap{padding:15px}.transcript{padding:24px}.siteFooter{flex-direction:column;align-items:flex-start}}
.videoMeta>div{min-width:0;flex:1}.videoMeta strong{font-size:15px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.videoMeta small{font-size:12px;line-height:1.45;margin-top:3px}.transcriptHead span{font-size:11px;letter-spacing:2px}.transcript blockquote{letter-spacing:-.7px;line-height:1.28}.chineseTranslation{margin:-4px 0 15px;padding:13px 15px;background:rgba(255,255,255,.65);border:2px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);font-size:15px;font-weight:800;line-height:1.65;color:#292438}.translation{font-size:12px;line-height:1.55}.sectionIntro{max-width:720px}.sectionIntro p{line-height:1.75}@media(max-width:520px){.videoMeta{align-items:flex-start;flex-wrap:wrap}.videoMeta .license{display:inline-block;margin-left:0}.transcript blockquote{font-size:26px}.sectionIntro p{font-size:14px}}
button{cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}button:hover{transform:translate(-1px,-1px);filter:brightness(1.035)}button:active{transform:translate(3px,3px)!important;box-shadow:0 0 0 var(--ink)!important;filter:brightness(.97)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--green);outline-offset:4px}.controls button:hover,.soundButton:hover,.searchBox button:hover,.addButton:hover,.filters button:hover,.emptyState button:hover{box-shadow:5px 5px 0 var(--ink)}.playerGrid{animation:cardIn .28s cubic-bezier(.2,.8,.2,1)}@keyframes cardIn{from{opacity:.35;transform:translateY(9px) scale(.992)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){button,.playerGrid{transition:none;animation:none}}
button{isolation:isolate;overflow:hidden}button::after{content:"";position:absolute;z-index:-1;inset:0;background:rgba(255,255,255,.55);opacity:0;pointer-events:none}.press-pop{animation:buttonPress .26s cubic-bezier(.2,.85,.3,1)!important}.press-pop::after{animation:buttonFlash .26s ease-out}@keyframes buttonPress{0%{transform:translate(0,0) scale(1)}35%{transform:translate(4px,4px) scale(.94);box-shadow:0 0 0 var(--ink);filter:saturate(1.35) brightness(.92)}72%{transform:translate(-1px,-1px) scale(1.045)}100%{transform:translate(0,0) scale(1)}}@keyframes buttonFlash{0%{opacity:0}35%{opacity:.8}100%{opacity:0}}@media(prefers-reduced-motion:reduce){.press-pop{animation:none!important;transform:translate(3px,3px)!important;box-shadow:0 0 0 var(--ink)!important;filter:brightness(.9)!important}.press-pop::after{animation:none;opacity:.45}}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea{-webkit-user-select:text;user-select:text}.copySentence{cursor:pointer;position:relative;padding:18px 16px!important;margin-left:-16px!important;margin-right:-16px!important;border:2px solid transparent;border-radius:14px;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}.copySentence:hover,.copySentence:focus-visible{background:rgba(255,255,255,.4);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);outline:0}.copySentence:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}.copySentence small{display:block;margin-top:13px;font-family:Arial,"Noto Sans TC",sans-serif;font-size:11px;letter-spacing:1px;color:#4f4861;font-weight:900}