.learner-dashboard.writing-bookshelf-page{width:min(1480px,100% - 40px);color:var(--himi-black,#222);background:0 0;margin:0 auto;padding:26px 0 48px;container:writing-bookshelf/inline-size}.writing-bookshelf{background:0 0;padding:30px 30px 32px}.writing-bookshelf-heading{justify-content:space-between;align-items:center;gap:20px;margin-bottom:38px;display:flex}.writing-bookshelf-heading h2{color:var(--himi-black,#222);letter-spacing:-.03em;margin:0;font-size:clamp(25px,2.4vw,32px);line-height:1.25}.writing-bookshelf-heading p{color:var(--himi-muted,#625b58);margin:9px 0 0;font-size:14px;line-height:1.6}.writing-bookshelf-mode{border:1px solid var(--himi-line,#e8e1de);color:var(--himi-muted,#625b58);border-radius:24px;flex-shrink:0;align-items:center;gap:8px;padding:10px 14px;font-size:12px;display:inline-flex}.writing-bookshelf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px;padding:0 6px;display:grid}.writing-book{--book-depth:24px;--book-rest:rotateX(4deg) rotateY(-22deg);--book-lift:translateY(-10px) rotateX(6deg) rotateY(-30deg);--book-color:#e3ac49;--book-ink:#493a22;--book-ease:cubic-bezier(.16, 1, .3, 1);min-width:0}.writing-book[data-level=hsk-2]{--book-color:#207f83;--book-ink:#fffcef}.writing-book[data-level=hsk-3]{--book-color:#b84e34;--book-ink:#fffbed}.writing-book[data-level=hsk-4]{--book-color:#a8473c;--book-ink:#fff6e9}.writing-book[data-level=hsk-5]{--book-color:#345983;--book-ink:#fff9e9}.writing-book[data-level=hsk-6]{--book-color:#6d526f;--book-ink:#fff8eb}.writing-book-link{height:100%;color:inherit;-webkit-tap-highlight-color:color-mix(in srgb, var(--himi-red,#ff4c3b) 20%, transparent);touch-action:manipulation;border-radius:4px;text-decoration:none;display:block}.writing-book-link:focus-visible{outline:3px solid var(--himi-black,#222);outline-offset:7px}.writing-book-stage{perspective:1000px;perspective-origin:50% 45%}.writing-book-object{aspect-ratio:.69;width:100%;max-width:195px;transform:var(--book-rest);transform-style:preserve-3d;transition:transform .35s var(--book-ease);margin:0 auto;position:relative}.writing-book-object:before,.writing-book-object:after{content:"";background:var(--book-color);pointer-events:none;position:absolute}.writing-book-object:before{transform:translateZ(calc(var(--book-depth) / -2));border-radius:3px 7px 7px 3px;inset:0;box-shadow:12px 18px 20px #30241d30,3px 5px 5px #30241d24}.writing-book-object:after{width:var(--book-depth);background:linear-gradient(90deg, #0003, transparent 35%, #fff2 65%, #0002), var(--book-color);transform-origin:0;transform:translateZ(calc(var(--book-depth) / 2)) rotateY(90deg);inset:0 auto 0 0}.writing-book-pages{transform:translateZ(calc(var(--book-depth) / 2 - 2px));transform-style:preserve-3d;background:linear-gradient(90deg,#d5c9b6,#fffaf0 18%,#fffdf7);border-radius:2px;position:absolute;inset:4px 2px 4px 5px}.writing-book-pages:before,.writing-book-pages:after{content:"";pointer-events:none;position:absolute}.writing-book-pages:before{height:calc(var(--book-depth) - 4px);transform-origin:top;background:repeating-linear-gradient(0deg,#d8cbb7 0 1px,#fffaf0 1px 3px);inset:0 0 auto;transform:rotateX(-90deg)}.writing-book-pages:after{width:calc(var(--book-depth) - 4px);transform-origin:0;background:repeating-linear-gradient(90deg,#d8cbb7 0 1px,#fffaf0 1px 3px);height:100%;top:0;left:100%;transform:rotateY(90deg);box-shadow:inset 0 -8px 10px #7d644c14}.writing-book-cover{background:linear-gradient(105deg, #fff2, transparent 35%, #0001), var(--book-color);color:var(--book-ink);transform-origin:0;transform:translateZ(calc(var(--book-depth) / 2));backface-visibility:hidden;transition:transform .4s var(--book-ease);border-radius:3px 7px 7px 3px;flex-direction:column;padding:18px 15px 18px 22px;display:flex;position:absolute;inset:0;overflow:hidden;box-shadow:inset 4px 0 6px #0003,inset 9px 0 1px #fff3,inset 10px 0 2px #0002,inset -1px 0 1px #fff4}.writing-book-cover:after{content:"";opacity:.28;pointer-events:none;border:1px solid;position:absolute;inset:9px 8px 9px 16px}.writing-book-brand{z-index:1;letter-spacing:.08em;text-transform:uppercase;font-size:9px;font-weight:700;position:relative}.writing-book-title{letter-spacing:-.035em;margin-top:12px;font-size:clamp(25px,2.5cqw,34px);line-height:1.15}.writing-book-character{margin:auto;font-family:Noto Serif SC,SimSun,serif;font-size:clamp(46px,5.3cqw,76px);line-height:1.2;position:relative}.writing-book-character:not(:empty):before{content:"";opacity:.3;border:1px solid;border-radius:50%;position:absolute;inset:0 -10px;transform:scale(1.1)}.writing-book-subtitle{z-index:1;text-align:center;padding:8px 0 2px;font-size:11px;line-height:1.5;position:relative}.writing-book-subtitle>span{font-size:10px;display:block}.writing-book-lock-icon{width:1em;height:1.2em;display:block}.writing-book-subtitle>.writing-book-lock-label{font-weight:700}.writing-book-ribbon{clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);background:#fff6dc;width:14px;height:35px;position:absolute;top:0;right:16px}.writing-book-shelf{background:linear-gradient(#e6c59b,#cba071);border-radius:2px;height:15px;margin:8px -13px 0;position:relative;box-shadow:0 8px 10px #855f3020}.writing-book-shelf:after{content:"";border-top:1px solid #a97a4e3d;position:absolute;inset:4px 0 auto}.writing-book-info{max-width:220px;margin:auto;padding-top:20px}.writing-book-info h3{color:var(--himi-black,#222);margin:0;font-size:17px;line-height:1.4}.writing-book-meta{color:var(--himi-muted,#625b58);font-variant-numeric:tabular-nums;flex-wrap:wrap;gap:6px 12px;margin-top:9px;font-size:12px;display:flex}.writing-book-meta>span{align-items:center;gap:5px;display:inline-flex}.writing-book-action{min-height:44px;color:color-mix(in srgb, var(--himi-red,#ff4c3b) 80%, #222);align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:700;display:flex}.writing-book-action svg{transition:transform .25s var(--book-ease)}.writing-bookshelf-empty{color:var(--himi-muted,#625b58);padding:24px 0;line-height:1.6}.writing-bookshelf ::selection{background:var(--himi-red-soft,#fff0ee);color:var(--himi-black,#222)}.writing-book-link:where(:not([data-locked=true])):focus-visible .writing-book-object{transform:var(--book-lift)}.writing-book-link:where(:not([data-locked=true])):focus-visible .writing-book-cover{transform:translateZ(calc(var(--book-depth) / 2)) rotateY(-22deg)}@media (hover:hover) and (pointer:fine){.writing-book-link:where(:not([data-locked=true])):hover .writing-book-object{transform:var(--book-lift)}.writing-book-link:where(:not([data-locked=true])):hover .writing-book-cover{transform:translateZ(calc(var(--book-depth) / 2)) rotateY(-22deg)}.writing-book-link:where(:not([data-locked=true])):hover .writing-book-action svg{transform:translate(4px)}}@media (hover:none){.writing-book-link:where(:not([data-locked=true])):active .writing-book-object{transform:translateY(-3px) var(--book-rest)}}@container writing-bookshelf (width<=1050px){.writing-book-title{font-size:32px}.writing-book-character{font-size:70px}}@container writing-bookshelf (width<=650px){.writing-book{--book-depth:16px;--book-rest:rotateX(3deg) rotateY(-18deg);--book-lift:translateY(-4px) rotateX(3deg) rotateY(-22deg)}.writing-bookshelf{padding:24px 18px}.writing-bookshelf-heading{align-items:flex-start;gap:12px;margin-bottom:28px}.writing-bookshelf-heading h2{font-size:25px}.writing-bookshelf-heading p{font-size:13px}.writing-bookshelf-mode{padding:8px}.writing-bookshelf-mode>span{display:none}.writing-bookshelf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px;padding:0 3px}.writing-book-cover{padding:15px 10px 12px 18px}.writing-book-brand{letter-spacing:.03em;font-size:8px}.writing-book-title{margin-top:10px;font-size:clamp(23px,6cqw,32px)}.writing-book-character{font-size:clamp(42px,13cqw,68px)}.writing-book-subtitle{padding-top:6px;font-size:10px}.writing-book-subtitle>span{font-size:9px}.writing-book-ribbon{width:12px;height:29px;right:12px}.writing-book-shelf{margin-left:-12px;margin-right:-12px}.writing-book-info{padding-top:16px}.writing-book-info h3{font-size:16px}.writing-book-meta{gap:6px 9px;font-size:11px}.writing-book-action{font-size:12px}}@media (width<=720px){.learner-dashboard.writing-bookshelf-page{width:calc(100% - 20px);padding:14px 0 28px}}@media (prefers-reduced-motion:reduce){.writing-book-object,.writing-book-cover,.writing-book-action svg{transition:none}.writing-book-link:is(:hover,:focus-visible,:active) .writing-book-object{transform:var(--book-rest)}.writing-book-link:is(:hover,:focus-visible,:active) .writing-book-cover{transform:translateZ(calc(var(--book-depth) / 2))}.writing-book-link:is(:hover,:focus-visible,:active) .writing-book-action svg{transform:none}}