:root{--paper:#f8f7f2;--ink:#28372d;--muted:#899087;--green:#485e4d;--line:#e5e6dd;--red:#ac5b43}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:14px/1.7 "Segoe UI","Microsoft YaHei",sans-serif}button,input,select{font:inherit}button,a,input,select{outline-offset:5px}a{color:inherit;text-decoration:none}button{cursor:pointer}header{height:94px;max-width:1360px;margin:auto;padding:0 52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:30px}.brand{display:flex;align-items:center;gap:13px;font-family:"Noto Serif SC",serif;font-size:23px;font-weight:600;letter-spacing:3px}.brand small{display:block;font:9px/1.7 sans-serif;letter-spacing:3px;color:var(--muted)}.seal{display:grid;place-items:center;width:39px;height:43px;background:var(--red);border-radius:5px 2px 5px 2px;color:#fff;font-size:26px;letter-spacing:0}nav{display:flex;gap:37px;font-size:14px}nav a{padding:33px 0;position:relative;color:#7a8178}nav a.active{color:var(--green)}nav a.active:after{position:absolute;content:"";bottom:21px;left:40%;width:14px;height:2px;background:var(--green)}.header-right{display:flex;align-items:center;gap:22px}.date-label{font-size:11px;color:var(--muted);letter-spacing:1px}.avatar{border:1px solid #dedfd5;border-radius:50%;background:#e9ece1;color:var(--green);width:36px;height:36px}main{max-width:1256px;margin:auto;padding:0 32px}.hero{display:grid;grid-template-columns:1fr 1.08fr;gap:65px;padding:61px 0 55px;align-items:center}.eyebrow{font-size:10px;letter-spacing:3px;color:#828c7b;display:flex;align-items:center;gap:12px}.eyebrow:before{content:"";width:22px;height:1px;background:#8e9a85}h1,h2,h3,.serif{font-family:"Noto Serif SC","Noto Serif JP",serif;font-weight:500}h1{font-size:45px;letter-spacing:4px;line-height:1.55;margin:23px 0 17px}h1 em{font-style:normal;color:#6c8161}.hero-copy>p{color:#7e867a;line-height:2.1;font-size:13px}.hero-actions{display:flex;gap:22px;align-items:center;margin-top:28px}.primary{background:var(--green);border:1px solid var(--green);padding:12px 23px;color:white;border-radius:3px;font-size:13px}.primary:hover{background:#354d3d}.quiet{border:0;background:none;color:var(--green);font-size:12px}.hero-note{display:flex;gap:22px;margin-top:29px;color:#8d9386;font-size:10px;letter-spacing:1px}.hero-art{height:365px;position:relative}.hero-art img{width:100%;height:100%;object-fit:cover;border-radius:3px 65px 3px 3px;filter:saturate(.65)}.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#10201975,transparent 65%);border-radius:3px 65px 3px 3px;pointer-events:none}.vertical{position:absolute;right:27px;top:27px;writing-mode:vertical-rl;font-family:"Noto Serif JP",serif;letter-spacing:6px;color:white;font-size:17px;z-index:1}.photo-caption{position:absolute;bottom:23px;left:25px;color:white;z-index:1;font-size:11px;letter-spacing:2px}.photo-caption small{display:block;font-size:9px;opacity:.7;margin-top:4px}.art-stamp{position:absolute;bottom:-16px;right:-15px;width:80px;height:80px;display:grid;place-content:center;text-align:center;background:#eae9dd;border:5px solid var(--paper);border-radius:50%;font-family:serif;color:#647158;font-size:16px;z-index:2}.art-stamp small{font-size:9px;letter-spacing:2px}.daily{background:#edeee5;display:flex;align-items:center;gap:27px;padding:23px 28px;border-radius:4px}.daily-icon{font-size:24px;color:#889477}.daily-copy{flex:1}.daily-copy b{font-weight:500;font-size:13px}.daily-copy small{display:block;font-size:11px;color:#87907f;margin-top:3px}.progress{width:150px;height:4px;background:#d9decd}.progress span{display:block;background:#8e9d79;height:100%;width:0}.daily-end{font-size:11px;color:#7d8873;text-align:right}.section{margin-top:45px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:23px}.section-heading h2{font-size:24px;letter-spacing:2px;margin:0}.section-heading p{font-size:11px;letter-spacing:1px;color:#93988b;margin:5px 0 0}.section-heading>a{font-size:12px;color:#78866e}.chip-row{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 25px}.chip{border:1px solid var(--line);padding:6px 17px;border-radius:3px;background:transparent;color:#7a8374;font-size:12px}.chip.active{background:var(--green);color:white;border-color:var(--green)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:27px}.card{min-width:0;cursor:pointer}.card-image{height:205px;position:relative;overflow:hidden;border-radius:4px}.card-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.73);transition:transform .4s}.card:hover img{transform:scale(1.04)}.level{position:absolute;left:12px;top:12px;background:#fbfaf1ed;padding:2px 9px;font-size:10px;letter-spacing:1px;border-radius:2px}.duration{position:absolute;right:12px;bottom:11px;color:white;background:#202820a6;padding:1px 7px;font-size:10px;border-radius:2px}.play-dot{position:absolute;left:calc(50% - 20px);top:calc(50% - 20px);width:40px;height:40px;display:grid;place-content:center;background:#fff8;border-radius:50%;color:#fff;opacity:0;transition:opacity .2s}.card:hover .play-dot{opacity:1}.card-meta{font-size:10px;color:#8b9580;margin-top:15px;letter-spacing:1px}.card h3{font-size:17px;margin:5px 0 3px;letter-spacing:.5px}.card p{font-size:11px;color:#93998c;margin:0}.card-bottom{margin-top:13px;display:flex;justify-content:space-between;color:#8d9587;font-size:10px}.save{border:0;background:none;color:#7e8a71;padding:0 4px;font-size:15px}.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.path{border:1px solid var(--line);padding:22px;display:flex;align-items:center;gap:18px;background:#fafaf5;cursor:pointer;text-align:left;color:var(--ink)}.path-icon{font-family:serif;font-size:28px;color:#8e9b79;width:38px}.path strong{font-size:13px;font-weight:500}.path small{display:block;color:#8b9382;font-size:10px;margin-top:4px}.path .arrow{margin-left:auto;color:#8b9382}.quote{margin:60px 0 45px;text-align:center;border-top:1px solid var(--line);padding-top:30px;color:#6c7a61}.quote p{font-family:"Noto Serif JP",serif;font-size:19px;letter-spacing:3px}.quote small{font-size:11px;color:#949b8b}footer{border-top:1px solid var(--line);max-width:1256px;margin:35px auto 0;padding:28px 32px 35px;display:flex;justify-content:space-between;align-items:center;gap:25px;color:#919889;font-size:10px}footer .brand{font-size:17px}footer .seal{width:30px;height:33px;font-size:21px}footer .brand small{letter-spacing:1px;font-size:9px}footer>span small{display:block;font-size:9px}.page-top{padding:48px 0 10px}.page-top h1{font-size:32px;margin:13px 0}.page-top p{color:#88907e;font-size:12px}.filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0}.filters input{flex:1;min-width:180px}.filters input,.filters select,.answer{padding:11px 15px;border:1px solid #dadfd2;border-radius:3px;background:#fffefa;color:var(--ink)}.empty{padding:65px;text-align:center;color:#8a9481;border:1px dashed #d9ddcf}.empty h3{font-size:23px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:25px 0}.stat{padding:25px;border:1px solid var(--line);background:#fdfcf7}.stat b{font-family:serif;font-size:34px;color:#637659}.stat small{display:block;color:#8b9480}dialog{width:min(1080px,94vw);max-height:92vh;padding:0;border:1px solid #dddccf;border-radius:6px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#202a24b8;backdrop-filter:blur(5px)}.lesson-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}.lesson-head h2{font-size:20px;margin:0}.close{border:0;background:none;font-size:26px;color:#7c8575}.lesson-body{display:grid;grid-template-columns:1.2fr 1fr;gap:25px;padding:24px}.scene{height:270px;background-size:cover;background-position:center;position:relative;border-radius:4px}.scene:after{position:absolute;inset:0;content:"";background:linear-gradient(0deg,#17291ac9,transparent);pointer-events:none}.scene-caption{position:absolute;bottom:20px;left:20px;right:20px;color:white;font-family:"Noto Serif JP",serif;font-size:21px;z-index:1;text-align:center}.scene-caption small{display:block;font:12px sans-serif;margin-top:8px}.demo-label{position:absolute;top:14px;left:14px;color:white;background:#293c2a9c;font-size:10px;padding:3px 8px;z-index:1}.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0}.controls button,.tool{padding:7px 12px;border:1px solid var(--line);border-radius:3px;color:#627456;background:#fffefa;font-size:12px}.controls .on{background:#e4eadb}.subtitles{max-height:320px;overflow:auto}.subtitle{border:0;border-bottom:1px solid var(--line);display:block;width:100%;text-align:left;background:none;padding:17px 12px;color:var(--ink);cursor:pointer}.subtitle.current{background:#e9eddf;border-left:3px solid #70865e}.subtitle span{font-family:"Noto Serif JP",serif;font-size:16px;line-height:2.5}.subtitle small{display:block;color:#8b9381;font-size:11px}ruby rt{font-size:9px;color:#8a957f}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#405742;color:white;padding:11px 24px;z-index:9;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}.tabs{display:flex;gap:16px;border-bottom:1px solid var(--line);margin-bottom:14px}.tabs button{background:none;border:0;padding:10px 2px;color:#8b9480}.tabs button.active{color:#49653d;border-bottom:2px solid #49653d}.practice{padding:15px 0}.practice p{color:#7e8973;font-size:12px}.answer{width:100%;margin-bottom:12px}.vocab{padding:12px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.vocab strong{font-family:serif;font-size:18px;font-weight:500}.vocab small{display:block;color:#8b9481;font-size:11px}.notice{font-size:11px;color:#939b88;line-height:1.9}.record-row{padding:18px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:15px}.book-item{border:1px solid var(--line);padding:24px;margin:15px 0;background:#fcfbf6}.book-item h3{font-size:21px;margin:0}.book-item p{color:#8b9480}.book-item textarea{display:block;width:100%;border:1px solid var(--line);background:#fffefa;padding:12px;resize:vertical;min-height:75px;margin-top:12px}.result{padding:10px 0;font-size:13px;color:#627a50}button:disabled{opacity:.5;cursor:not-allowed}@media(min-width:1500px){.hero{padding-top:75px;padding-bottom:65px}.hero-art{height:390px}}@media(max-width:850px){header{padding:0 24px;height:80px}nav{gap:20px}.date-label{display:none}.hero{gap:25px}h1{font-size:33px}.hero-art{height:330px}.cards{gap:18px}.card-image{height:170px}.progress{width:80px}.paths{gap:10px}.path{padding:15px;gap:10px}.lesson-body{grid-template-columns:1fr}.subtitles{max-height:230px}footer>span:last-child{display:none}}@media(max-width:600px){header{flex-wrap:wrap;height:auto;padding:18px 20px 0;gap:12px}.brand{font-size:20px}.header-right{position:absolute;right:20px;top:23px}nav{order:3;width:100%;justify-content:space-between;font-size:12px}nav a{padding:12px 0 15px}nav a.active:after{bottom:7px}main{padding:0 20px}.hero{grid-template-columns:1fr;padding:33px 0;gap:28px}h1{font-size:36px;margin-top:17px}.hero-art{height:260px}.hero-note{margin-top:23px}.hero-actions{margin-top:22px}.daily{padding:17px;gap:15px}.progress{display:none}.daily-end{font-size:10px}.section{margin-top:33px}.section-heading h2{font-size:21px}.cards{grid-template-columns:1fr 1fr;gap:25px 14px}.card-image{height:140px}.card h3{font-size:15px}.card p{font-size:10px}.card-meta{font-size:9px}.card-bottom{font-size:9px}.paths{grid-template-columns:1fr}.path{padding:18px}.quote{margin:35px 0 25px}.quote p{font-size:15px;letter-spacing:1px}footer{padding:22px 20px;align-items:start}footer>span{max-width:140px;font-size:9px}.lesson-body{padding:15px;gap:15px}.lesson-head{padding:15px}.lesson-head h2{font-size:17px}.scene{height:220px}.scene-caption{font-size:17px}.stats{gap:9px}.stat{padding:15px}.stat b{font-size:28px}.empty{padding:35px 15px}}
.real-video{display:block;width:100%;aspect-ratio:16/9;background:#18251c;border-radius:4px;object-fit:contain}.real-lesson{grid-template-columns:1.25fr 1fr}.live-caption{padding:16px 12px;background:#edf0e5;border-radius:3px;margin-top:12px;min-height:100px;text-align:center}.live-caption>div{font-family:'Noto Serif JP',serif;font-size:19px;line-height:2.4}.live-caption>small{display:block;color:#76866b;font-size:12px}.spoken-word{padding:2px 0;border-radius:3px;transition:background .1s}.word-active{background:#d3dfb4;color:#283d20;box-shadow:0 2px 0 #819963}.real-subtitles{max-height:570px}.subtitle-time{color:#a1aa95!important;font:10px monospace!important;line-height:1.6!important}.word-button{width:100%;background:none;text-align:left;cursor:pointer;color:inherit;border:0;border-bottom:1px solid var(--line)}.word-button:hover{background:#e9eddf}.word-button strong{line-height:2.2}.real-lesson .practice{max-height:570px;overflow:auto}@media(max-width:850px){.real-lesson{grid-template-columns:1fr}.real-subtitles{max-height:300px}.live-caption>div{font-size:17px}}@media(max-width:600px){.live-caption{padding:10px}.live-caption>div{font-size:16px}.real-subtitles{max-height:250px}}
/* Full-page learning workspace: reference uses 58% player / 42% learning. */
body.learning-open{overflow:hidden}dialog.wide-learning{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;overflow:hidden}dialog.wide-learning #lesson-content{height:100%;display:flex;flex-direction:column}dialog.wide-learning .lesson-head{flex:none;min-height:64px;padding:10px 24px}dialog.wide-learning .lesson-head h2{font-size:18px}dialog.wide-learning .close{width:44px;height:44px;font-size:30px}dialog.wide-learning .real-lesson{flex:1;min-height:0;display:grid;grid-template-columns:58% minmax(0,1fr);gap:0;padding:0}dialog.wide-learning .video-column{min-width:0;overflow:auto;padding:20px 24px;border-right:1px solid var(--line)}dialog.wide-learning .real-video{width:100%;height:auto;max-height:65dvh;border-radius:6px}dialog.wide-learning .learning-column{min-width:0;min-height:0;display:flex;flex-direction:column;padding:0 20px 20px}dialog.wide-learning .learning-tools{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:15px 0 8px;color:#75866c;font-size:12px}dialog.wide-learning .tabs{flex:none;gap:16px;flex-wrap:wrap;margin:0}dialog.wide-learning .tabs button{padding:12px 0;font-size:13px}dialog.wide-learning .real-subtitles{flex:1;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain}dialog.wide-learning .subtitle{padding:17px 15px}dialog.wide-learning .subtitle span{font-size:18px}dialog.wide-learning .subtitle small{font-size:13px;line-height:1.9}dialog.wide-learning .practice{flex:1;min-height:0;max-height:none;overflow:auto}dialog.wide-learning .controls button,dialog.wide-learning .controls select{min-height:40px;font-size:13px}dialog.wide-learning .live-caption>div{font-size:22px}.note-editor{width:100%;min-height:220px;resize:vertical;border:1px solid var(--line);border-radius:5px;padding:16px;background:#fffefa;color:var(--ink);font:14px/1.9 inherit}.learning-tools label{cursor:pointer;display:flex;gap:6px;align-items:center}@media(min-width:1600px){dialog.wide-learning .real-lesson{grid-template-columns:62% minmax(0,1fr)}}@media(max-width:900px){dialog.wide-learning .real-lesson{display:block;overflow:auto}dialog.wide-learning .video-column{padding:12px;border-right:0;overflow:visible}dialog.wide-learning .real-video{max-height:52dvh}dialog.wide-learning .learning-column{padding:0 12px 20px;min-height:400px}dialog.wide-learning .real-subtitles{max-height:55dvh;min-height:250px}dialog.wide-learning .practice{max-height:none;overflow:visible}dialog.wide-learning .lesson-head{padding:8px 14px}dialog.wide-learning .lesson-head h2{font-size:15px}dialog.wide-learning .live-caption>div{font-size:18px}dialog.wide-learning .tabs{gap:18px}}
.dictionary-term{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:#9bac8a;text-underline-offset:5px}.dictionary-term:hover{background:#dce6cb}.dictionary-term:focus-visible{outline:2px solid #687e55}#dictionary-panel{position:absolute;z-index:80;right:20px;bottom:20px;width:min(460px,calc(100% - 32px));max-height:80dvh;overflow:auto;padding:20px;background:#fffef9;border:1px solid #d3dbc8;border-radius:12px;box-shadow:0 10px 60px #22331e40}#dictionary-panel[hidden]{display:none}.dict-top{display:flex;justify-content:space-between;align-items:center;font-size:17px}.dict-top button{border:0;background:none;font-size:26px;color:#647452}#dict-form{display:flex;gap:8px;margin:14px 0}#dict-query{min-width:0;flex:1;padding:9px;border:1px solid #d3dbc8;border-radius:4px;background:#fbfcf6}#dict-form button,.dict-actions button,.dict-collect{padding:7px 12px;border:1px solid #d3dbc8;background:#eaf0e0;color:#405d36;border-radius:4px}.dict-entry{padding:14px 0;border-bottom:1px solid #e3e8da}.dict-entry h3{margin:0;font-size:23px}.dict-reading{color:#80916d;font-size:13px;margin:4px 0}.dict-entry ol{padding-left:22px;font-size:14px}.dict-credit{font-size:10px;color:#86947a;margin-top:16px}.dict-credit a{text-decoration:underline}.dict-favorite{display:block;width:100%;text-align:left;padding:12px 5px;border:0;background:none;color:#48603c}#dict-result{min-height:60px}@media(max-width:600px){#dictionary-panel{right:10px;bottom:10px;width:calc(100% - 20px);max-height:70dvh}}
.word-detail{align-items:center}.word-detail small{font-size:13px;line-height:1.9}.word-detail .tool{flex:none}.word-detail strong{line-height:2.3}
.word-audio{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:200px}.word-audio small{flex-basis:100%;text-align:right;font-size:10px;color:#8a967d}.word-audio button{font-size:12px!important;padding:5px 9px;white-space:nowrap}.word-detail>div:first-child{min-width:0;flex:1}
.quality-label{display:inline-flex;align-items:center;gap:7px;padding-left:4px;color:#586f49}.quality-label select{font-weight:600;background:#edf3e4;border:1px solid #cbd9bd;border-radius:4px;min-height:40px;padding:6px 9px}