#yuedu-preview-banner{display:none!important}
/* YueDu Story Shelf 2026-11-08. Dense illustrated book catalog inspired by editorial bookstores, not copied from third-party sites. */
body:not(.dark){background:#fcfaff}
#view{max-width:1540px;padding:18px clamp(18px,3.1vw,42px) 90px}
#view .yd-short-hero{height:auto!important;min-height:210px!important;padding:24px 32px!important;border-radius:24px!important;background:linear-gradient(104deg,#eeecff 0%,#f7f4ff 56%,#f6f2fc 100%);box-shadow:none!important;position:relative}
#view .yd-short-hero .v8-hero-body{max-width:68%;position:relative;z-index:2}
#view .yd-short-hero .v8-eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:6px}
#view .yd-short-hero h1{font-size:clamp(25px,2.45vw,36px)!important;letter-spacing:-.8px;margin:4px 0 7px!important;line-height:1.28}
#view .yd-short-hero p{margin:0 0 11px!important;font-size:13px}
#view .yd-short-hero .v8-hero-search{height:43px;max-width:540px;margin:0;box-shadow:0 4px 17px #39226911}
#view .yd-short-hero .v8-hero-search input{font-size:12px}
#view .yd-short-hero .v8-hero-search button{padding:8px 21px!important}
#view .yd-short-hero .v8-hero-continue{max-width:540px!important;margin-top:9px;padding:5px 8px 5px 13px;border-radius:11px}
#view .yd-short-hero .v8-hero-continue button{font-size:11px;padding:7px 12px;box-shadow:none!important}
#view .yd-short-hero .v8-hero-puppy{width:34%;height:100%;right:0;top:0;background-size:contain;background-position:center bottom;opacity:.92}
#view .yd-level-strip{display:flex;align-items:stretch;gap:9px;margin:14px 0 20px}
#view .yd-level-strip>span{align-self:center;white-space:nowrap;font-weight:800;font-size:13px;color:#3d355f;margin-right:3px}
#view .yd-level-tile{flex:1;min-width:0;max-width:157px;border:1px solid #eae5f4;background:#f8f5fd;border-radius:13px;min-height:64px;padding:9px 14px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:5px;transition:transform .15s,box-shadow .15s}
#view .yd-level-tile:hover{transform:translateY(-2px);box-shadow:0 6px 15px #463e8520}
#view .yd-level-tile b{font-size:24px;line-height:1;font-weight:850;color:#5b4bc4}
#view .yd-level-tile small{font-size:11px;color:#837b98;font-weight:700}
#view .yd-level-a1{background:#eef9ed}#view .yd-level-a2{background:#e8f3ff}#view .yd-level-b1{background:#f0ebff}#view .yd-level-b2{background:#fff0f3}#view .yd-level-c1{background:#f3eaff}#view .yd-level-c2{background:#f1eafb}
#view .yd-level-all{white-space:nowrap;align-self:center;border:0;background:transparent;color:#6653cc;font-size:12px;font-weight:800;padding:10px}
#view .section-title{margin:18px 0 13px}
#view .section-title h2{font-size:20px}
#view .yd-home-shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px}
#view .yd-home-bottom{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:8px;padding:20px 0 5px}
#view .yd-home-bottom button{border:1px solid #dfd8f7;border-radius:999px;padding:12px 28px;background:#fff;color:#6351c4;font-weight:800;font-size:13px}
#view .yd-home-bottom span{color:#a4a0b2;font-size:11px}
/* Compact catalog heading, sidebar filter + book grid */
#view .yd-shelf-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 0 17px}
#view .yd-shelf-head h1{font-size:clamp(27px,2.4vw,33px);margin:3px 0 2px;letter-spacing:-.7px}
#view .yd-shelf-head h1 small{font-size:13px;color:#786bb9;background:#ede9fb;border-radius:99px;padding:5px 11px;vertical-align:middle;letter-spacing:0}
#view .yd-shelf-head p{font-size:12px;color:#948ca5;margin:4px 0 0}
#view .yd-shelf-tabs{display:flex;gap:6px;flex-shrink:0}
#view .yd-shelf-tabs .release-tab{margin:0!important;padding:9px 12px;font-size:11px}
#view .yd-shelf-layout{display:grid;grid-template-columns:205px minmax(0,1fr);gap:20px;align-items:start}
#view .yd-shelf-sidebar{border:1px solid #ebe6f2;background:white;border-radius:17px;padding:15px;position:sticky;top:89px;box-shadow:0 5px 20px #32226708}
#view .yd-filter-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f0edf8;padding-bottom:10px;margin-bottom:12px}
#view .yd-filter-head strong{font-size:14px}
#view .yd-filter-head .link-btn{font-size:11px}
#view .yd-shelf-filter h3{margin:9px 0 9px;font-size:12px;color:#403864}
#view .yd-shelf-filter .filter-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:15px}
#view .yd-shelf-filter .filter-pill{font-size:11px;padding:8px 2px;min-height:32px;text-align:center;border-radius:8px}
#view .yd-shelf-filter .filter-pill:first-child{grid-column:1/-1}
#view .yd-shelf-sidebar .facet{display:block;margin:0 0 11px}
#view .yd-shelf-sidebar .facet span{display:block;font-size:11px;font-weight:750;margin-bottom:5px;color:#685f82}
#view .yd-shelf-sidebar .facet select{width:100%;height:37px;min-height:37px;padding:0 9px;font-size:11px;border-radius:9px;border:1px solid #e8e4f2}
#view .yd-filter-footnote{font-size:10px;color:#aaa5b8;line-height:1.5;margin:10px 0 0}
#view .yd-shelf-main{min-width:0}
#view .yd-shelf-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:1px 0 11px;padding-bottom:7px;border-bottom:1px solid #eeeaf5}
#view .yd-shelf-toolbar>div{display:flex;align-items:baseline;gap:10px}
#view .yd-shelf-toolbar strong{font-size:17px}
#view .yd-shelf-toolbar span{font-size:11px;color:#9891ad}
/* Actual SVG picture asset per book, no blank cards. */
#view .reading-grid.yd-shelf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:0}
#view .reading-item.yd-cover-book{padding:0;border:1px solid #ebe8f0;border-radius:13px;background:white;box-shadow:0 3px 12px #39315a0b;overflow:hidden;min-width:0;display:flex;flex-direction:column}
#view .reading-item.yd-cover-book:hover{box-shadow:0 13px 27px #32235820;border-color:#ddd5f0;transform:translateY(-3px)}
#view .yd-cover-book .yd-poster{position:relative;aspect-ratio:4/4.6;min-height:0;overflow:hidden;background:#e2d9f5;padding:0;border:0}
#view .yd-cover-book .yd-poster img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
#view .yd-cover-book:hover .yd-poster img{transform:scale(1.04)}
#view .yd-cover-book .yd-poster-level{position:absolute;left:10px;top:10px;background:#fffdf8ec;color:#5547a7;border-radius:7px;padding:4px 9px;font-size:11px;font-weight:900;box-shadow:0 2px 7px #0001}
#view .yd-poster-info{padding:12px 12px 13px;display:flex;flex-direction:column;flex:1;min-width:0}
#view .yd-poster-title{font-size:14px;line-height:1.38;font-weight:850;letter-spacing:-.2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#2b234e;min-height:20px}
#view .yd-poster-en{font-size:11px;color:#7669bd;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;font-family:Georgia,'Times New Roman',serif}
#view .yd-poster-meta{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
#view .yd-poster-meta span{font-size:10px;color:#938ba5;background:#f6f3fc;border-radius:7px;padding:3px 6px}
#view .yd-poster-progress{height:4px;background:#ece8fa;border-radius:99px;margin:0 0 6px}
#view .yd-poster-progress i{height:100%;background:#6b5adc;border-radius:99px;display:block}
#view .yd-poster-votes{margin-top:auto;padding-top:2px}
#view .yd-poster-votes .yuedu-reactions{gap:6px}
#view .yd-poster-votes .yuedu-reactions button{font-size:10px;min-width:44px;padding:6px 9px}
#view .yd-poster-votes .heart-icon,#view .yd-poster-votes .broken-icon{font-size:15px}
/* Less dead space on homepage; book-cover grid includes all art. */
#view .yd-home-shelf .yd-cover-book .yd-poster{aspect-ratio:4/4.2}
#view .yd-home-shelf .yd-poster-info{padding:10px 11px}
#view .yd-home-shelf .yd-poster-title{font-size:13px}
#view .yd-home-shelf .yd-poster-meta{margin:7px 0}
body.dark #view .yd-shelf-sidebar,body.dark #view .yd-cover-book{background:#27253a;border-color:#4d435e}
body.dark #view .yd-poster-title,body.dark #view .yd-shelf-toolbar strong{color:#f3f0ff}
body.dark #view .yd-shelf-toolbar{border-color:#544c66}
@media(max-width:1250px){#view .reading-grid.yd-shelf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#view .yd-home-shelf{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:980px){#view .yd-shelf-layout{grid-template-columns:165px minmax(0,1fr);gap:13px}#view .reading-grid.yd-shelf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}#view .yd-home-shelf{grid-template-columns:repeat(3,minmax(0,1fr))}#view .yd-level-tile{padding:10px 7px}#view .yd-level-all{display:none}}
@media(max-width:700px){
 #view{padding:10px 12px 85px!important}
 #view .yd-short-hero{min-height:179px!important;padding:19px 17px!important;border-radius:17px!important}
 #view .yd-short-hero .v8-hero-body{max-width:100%!important}
 #view .yd-short-hero h1{font-size:22px!important;max-width:340px}
 #view .yd-short-hero p{font-size:11px;max-width:235px}
 #view .yd-short-hero .v8-hero-puppy{right:-44px;opacity:.24;width:55%;height:100%;background-size:cover}
 #view .yd-short-hero .v8-hero-search{height:38px;max-width:none;width:100%}
 #view .yd-short-hero .v8-hero-search input{font-size:11px}
 #view .yd-short-hero .v8-hero-continue{margin-top:8px;max-width:100%!important}
 #view .yd-level-strip{gap:5px;overflow:auto;margin:11px 0 15px;padding-bottom:5px;scrollbar-width:none}
 #view .yd-level-strip>span{display:none}
 #view .yd-level-tile{min-width:70px;min-height:52px;padding:8px;gap:2px;flex-direction:column;align-items:flex-start;border-radius:11px}
 #view .yd-level-tile b{font-size:20px}
 #view .yd-level-tile small{font-size:10px}
 #view .section-title{margin:15px 0 10px}
 #view .yd-home-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #view .yd-home-shelf .yd-poster{aspect-ratio:4/4.75}
 .desk-dog{width:62px!important;height:70px!important;right:7px!important;bottom:76px!important}
 #view .yd-shelf-head{flex-direction:column;align-items:start;gap:9px;margin-bottom:12px}
 #view .yd-shelf-head h1{font-size:25px}
 #view .yd-shelf-layout{display:block}
 #view .yd-shelf-sidebar{position:static;padding:12px 12px 3px;margin-bottom:12px;border-radius:13px}
 #view .yd-shelf-filter h3{display:none}
 #view .yd-shelf-filter .filter-pills{display:flex;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin:0 0 8px;gap:5px}
 #view .yd-shelf-filter .filter-pill{flex:none;min-width:37px;padding:7px 10px;white-space:nowrap}
 #view .yd-shelf-sidebar .facet{display:inline-block;width:calc(50% - 6px);vertical-align:top;margin:0 3px 9px 0}
 #view .yd-shelf-sidebar .facet select{font-size:10px;height:33px;min-height:33px;padding:0 6px}
 #view .yd-filter-head{padding:0 0 7px;margin:0 0 8px}
 #view .yd-filter-footnote{display:none}
 #view .yd-shelf-toolbar{margin-bottom:10px}
 #view .yd-shelf-toolbar>span{display:none}
 #view .reading-grid.yd-shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 #view .yd-cover-book .yd-poster{aspect-ratio:4/5.0}
 #view .yd-poster-info{padding:9px 9px 10px}
 #view .yd-poster-title{font-size:12px;min-height:33px}
 #view .yd-poster-en{font-size:10px}
 #view .yd-poster-meta{margin:6px 0;gap:4px}
 #view .yd-poster-meta span{font-size:9px;padding:3px 4px}
 #view .yd-poster-votes .yuedu-reactions button{min-width:36px;padding:5px 6px}
}
@media(max-width:360px){#view .reading-grid.yd-shelf-grid{gap:7px!important}#view .yd-poster-info{padding:8px}}
@media(prefers-reduced-motion:reduce){#view .yd-cover-book,#view .yd-cover-book img{transition:none!important;transform:none!important}}

/* 2026-11-08 V2: compact single-puppy hero, no repeated background tiles. */
#view .yd-short-hero{
  height:184px!important;min-height:184px!important;max-height:184px!important;
  padding:0!important;display:flex!important;align-items:center;overflow:hidden!important;
  background:linear-gradient(100deg,#f0edff 0%,#f9f7ff 60%,#f7f2ff 100%)!important;
}
#view .yd-short-hero .v8-hero-body{
  box-sizing:border-box!important;flex:none!important;position:relative!important;z-index:2!important;
  padding:11px 25px!important;margin:0!important;width:64%!important;max-width:64%!important;
}
#view .yd-short-hero .v8-hero-body .v8-eyebrow{font-size:9px;margin:0 0 3px!important}
#view .yd-short-hero h1{font-size:clamp(20px,2vw,27px)!important;line-height:1.16!important;margin:2px 0 6px!important}
#view .yd-short-hero p{margin:0 0 8px!important;font-size:11px!important;line-height:1.3}
#view .yd-short-hero .v8-hero-search{height:36px!important;max-width:510px!important;min-height:36px!important;border-radius:19px!important}
#view .yd-short-hero .v8-hero-search button{padding:7px 18px!important;height:32px!important;min-height:0!important}
#view .yd-short-hero .v8-hero-continue{margin-top:6px!important;max-width:510px!important;min-height:28px!important;height:28px!important;padding:2px 5px 2px 12px!important;display:flex!important;align-items:center}
#view .yd-short-hero .v8-hero-continue button{padding:4px 10px!important;font-size:10px!important}
#view .yd-short-hero .v8-hero-puppy{
  position:absolute!important;right:0!important;left:auto!important;top:0!important;bottom:0!important;
  height:100%!important;width:35%!important;
  background-image:linear-gradient(90deg,#f5f1ff 0%,rgba(245,241,255,0) 15%),url('/assets/reading-puppy-hero-v8.jpg')!important;
  background-size:100% 100%,cover!important;background-position:center,center center!important;
  background-repeat:no-repeat!important;
  mask-image:linear-gradient(90deg,transparent 0%,#000 15%)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 15%)!important;
}
#view .yd-level-strip .yd-level-tile{cursor:pointer;position:relative}
#view .yd-level-strip .yd-level-tile:focus-visible{outline:3px solid #7966dd;outline-offset:3px}
#view .yd-level-strip .yd-level-tile:active{transform:translateY(1px)}
#view .yd-level-strip{margin:10px 0 15px!important;gap:7px}
#view .yd-level-tile{min-height:55px!important;padding:8px 10px!important}
#view .yd-level-tile b{font-size:22px!important}
/* No input should accidentally look like a working control if it has no action. */
#v8Timer{transition:opacity .2s}
@media (max-width:900px){
 #view .yd-short-hero{height:184px!important;min-height:184px!important;max-height:184px!important}
 #view .yd-short-hero .v8-hero-body{width:76%!important;max-width:76%!important;padding:10px 15px!important}
 #view .yd-short-hero .v8-hero-puppy{width:32%!important;right:0!important;opacity:.85!important}
}
@media (max-width:700px){
 #view .yd-short-hero{height:205px!important;min-height:205px!important;max-height:205px!important;padding:0!important}
 #view .yd-short-hero .v8-hero-body{max-width:100%!important;width:100%!important;padding:15px 14px!important}
 #view .yd-short-hero h1{font-size:21px!important;max-width:285px;position:relative;z-index:2}
 #view .yd-short-hero p{max-width:235px;font-size:10px!important;position:relative;z-index:2}
 #view .yd-short-hero .v8-hero-search{width:100%!important;max-width:none!important;height:35px!important;margin-top:7px!important}
 #view .yd-short-hero .v8-hero-continue{width:100%!important;max-width:none!important}
 #view .yd-short-hero .v8-hero-puppy{left:auto!important;right:-3px!important;top:0!important;bottom:0!important;width:51%!important;height:100%!important;opacity:.34!important;background-size:100% 100%,cover!important;mask-image:linear-gradient(90deg,transparent,#000 20%)!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%)!important}
}
@media (prefers-reduced-motion:reduce){#view .yd-level-tile{transition:none!important}}

/* Reading format: full stories are discoverable without discarding short exercises. */
#view .yd-storymode{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:6px 0 13px}
#view .yd-storymode button{background:#fff;border:1px solid #e3ddf5;border-radius:999px;padding:8px 17px;color:#6e648d;font-size:12px;font-weight:750;transition:background .18s,color .18s}
#view .yd-storymode button.active{background:#6154c8;color:#fff;border-color:#6154c8}
#view .yd-storymode button:hover:not(.active){border-color:#7764d6;color:#5b4bb2}
@media(max-width:700px){#view .yd-storymode button{padding:7px 10px;font-size:11px}}

#v8Timer:after{content:"暂停";font-size:10px;color:#958ea9;font-weight:650}
#v8Timer.yd-counting:after{content:"阅读中";color:#4e7a6d}
@media(max-width:780px){#v8Timer:after{display:none}}