/* Clothbound skills: quiet ink, ivory stock and a warm brass edge. */
#skill-book{--sb-ink:#3e4e40;--sb-gold:#a68b56;--sb-paper:#f9f5e9;position:fixed;inset:0;margin:auto;width:min(1130px,96vw);max-width:none;height:fit-content;max-height:96dvh;padding:14px 65px 14px 18px;overflow:visible;background:none;border:0;border-radius:0;box-shadow:none;color:var(--sb-ink);font-family:Georgia,'Noto Serif TC','Microsoft JhengHei',serif;outline:none}
#skill-book::backdrop{background:rgba(28,36,28,.53);backdrop-filter:blur(7px) saturate(.7)}
#skill-book *,#skill-book *::before,#skill-book *::after{box-sizing:border-box}
#skill-book button{display:grid;place-items:center;padding:0;min-width:0;cursor:pointer;font:inherit;line-height:1;color:var(--sb-ink);transition:background .2s,box-shadow .2s,transform .2s;border:1px solid #b6b99f;background:#f7f4e8;box-shadow:none;text-transform:none;letter-spacing:0}
#skill-book button:focus-visible,#skill-book pre:focus-visible{outline:2px solid #526d52;outline-offset:5px}
#skill-book button:hover:not(:disabled){background:#e7eadb;box-shadow:0 3px 12px #30452b24}
#skill-book button:disabled{opacity:.28;cursor:default}
#skill-book button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;display:block}
.sb-header{position:relative;inset:auto;height:68px;margin:0 14px;color:#f8f3e4;display:flex;justify-content:flex-start;align-items:baseline;gap:20px;padding-top:10px}
.sb-header>span{font:italic 14px Georgia,serif;color:#e1ddca;order:2}
.sb-header h1{font:normal 35px/1 Georgia,serif;letter-spacing:.025em;margin:0;order:1}
#skill-book .sb-close{position:absolute;right:-9px;top:1px;width:40px;height:40px;border-radius:50%;background:#f5f1e5;z-index:4}
.sb-shell{position:relative;padding:10px 11px 13px;background:repeating-linear-gradient(90deg,#ffffff05 0 1px,transparent 1px 3px),#73856b;border:1px solid #a5af90;border-radius:12px 16px 16px 12px;box-shadow:0 30px 85px #0e1b174d,0 4px 0 #56694f,0 7px 0 #455740}
.sb-shell::before{content:'';position:absolute;inset:5px;border:1px solid #c4ba855e;border-radius:8px;pointer-events:none}
.sb-cat{position:absolute;z-index:5;right:50px;top:-67px;width:85px;height:85px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 3px 2px #26362f22);pointer-events:none}
.sb-spread{position:relative;display:grid;grid-template-columns:1fr 1fr;height:min(600px,calc(96dvh - 150px));min-height:330px;perspective:1800px;border-radius:6px;box-shadow:0 3px 0 #cfc6ad,0 5px 0 #f5eedc,0 7px 0 #cfc6ad,0 9px 0 #e5dbc5;touch-action:pan-y;user-select:none;cursor:grab}
.sb-spread pre{user-select:text;cursor:text;touch-action:pan-x pan-y}
.sb-spread.sb-dragging{cursor:grabbing}
#skill-book .sb-corner{position:absolute;bottom:0;z-index:7;width:46px;height:46px;border:0;border-radius:0;background:none;box-shadow:none;cursor:grab;touch-action:none}
#skill-book .sb-corner-prev{left:0}#skill-book .sb-corner-next{right:0}
#skill-book .sb-corner::after{content:'';position:absolute;bottom:0;right:0;width:28px;height:28px;background:linear-gradient(135deg,#e7dfc7 0%,#fffdf2 48%,#c5b58a 50%,#f1ead7 57%);clip-path:polygon(100% 0,100% 100%,0 100%);transition:width .2s,height .2s;filter:drop-shadow(-2px -2px 2px #6e604128)}
#skill-book .sb-corner-prev::after{right:auto;left:0;transform:scaleX(-1)}
#skill-book .sb-corner:hover:not(:disabled){background:none;box-shadow:none}
#skill-book .sb-corner:hover::after,#skill-book .sb-corner:focus-visible::after{width:37px;height:37px}
#skill-book .sb-corner:disabled{visibility:hidden}
.sb-page{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:0;padding:26px 36px 22px;background:radial-gradient(ellipse at 50% 65%,#fffefa 0,transparent 70%),var(--sb-paper);overflow:hidden}
.sb-page::before{content:'';position:absolute;inset:14px;border:1px solid #b7a97c50;pointer-events:none;border-radius:2px}
.sb-left{border-radius:5px 0 0 5px;box-shadow:inset -18px 0 28px -17px #65583b50,inset 0 0 24px #bba36f10}
.sb-right{border-radius:0 5px 5px 0;box-shadow:inset 20px 0 28px -17px #65583b50,inset 0 0 24px #bba36f10}
.sb-page-top,.sb-page-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#8b876e;font:10px/1.4 Georgia,serif;letter-spacing:.18em;flex-shrink:0}
.sb-page-top{padding-bottom:15px;border-bottom:1px solid #b7a97c4f}
.sb-page-foot{margin-top:auto;padding-top:18px}
.sb-page-foot span:first-child{font-style:italic;letter-spacing:.06em}
.sb-sigil{position:relative;margin:clamp(12px,3vh,30px) auto 18px;width:min(205px,80%);aspect-ratio:1;flex-shrink:1;min-height:80px;display:grid;place-items:center}
.sb-sigil svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#c0b184;stroke-width:.7}
.sb-sigil .sb-ring-track{stroke:#c6cbb8;stroke-dasharray:1 7;stroke-width:2}
.sb-sigil .sb-ring-draw{stroke:#788d6b;stroke-width:1.5;stroke-dasharray:591;transform:rotate(-90deg);transform-origin:center}
.sb-sigil strong{font:normal clamp(23px,3.5vw,40px)/1 Georgia,serif;letter-spacing:.03em;text-shadow:0 3px 18px #b6b87a40}
.sb-mote{position:absolute;left:22%;top:35%;width:4px;height:4px;border-radius:50%;background:#c2a361;box-shadow:0 0 9px #e6ca88;opacity:0}
.sb-mote-two{left:78%;top:60%}
#skill-book h2{font:normal clamp(21px,2.6vw,32px)/1.15 Georgia,serif;text-align:center;margin:0 0 18px;overflow-wrap:anywhere;letter-spacing:.01em;color:#354b39}
.sb-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 12px;width:100%}
.sb-skill-card{position:relative;min-width:0;min-height:135px;display:grid;place-items:center;padding:16px 10px;background:radial-gradient(ellipse at 50% 42%,#e1e7d364,transparent 66%);isolation:isolate}
.sb-card-border{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#ac9661;stroke-width:.9;filter:drop-shadow(0 2px 1px #81704720)}
.sb-card-border path{stroke-dasharray:1;stroke-dashoffset:0}.sb-card-border path+path{stroke:#cbbd95;stroke-width:.45}
.sb-card-content{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.sb-emblem{width:52px;height:52px;fill:none;stroke:#677a58;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 1px #b59a6225)}
.sb-tools .sb-card-content span{padding:0;border:0;background:none;font:12px/1.35 Georgia,'Microsoft JhengHei',serif;text-align:center;color:#46543d;overflow-wrap:anywhere}
.sb-sigil .sb-laurel{stroke:#7e8c65;stroke-width:1;fill:#85926e60}
.sb-sigil .sb-laurel path{fill:none;stroke-linecap:round}
.sb-tools:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));width:70%;align-self:center}
.sb-page[data-ink=blank] .sb-reveal,.sb-page[data-ink=blank] .sb-trace,.sb-page[data-ink=blank] .sb-line,.sb-page[data-ink=revealing] .sb-reveal,.sb-page[data-ink=revealing] .sb-trace,.sb-page[data-ink=revealing] .sb-line{opacity:0}
.sb-page[data-ink=blank] .sb-skill-card,.sb-page[data-ink=blank] .sb-code{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
#skill-book h3{font:italic 37px/1.2 Georgia,serif;margin:25px 0 9px;color:#526448;text-align:center;letter-spacing:.015em}
.sb-spell-rule{display:flex;align-items:center;gap:12px;color:#b39862;width:76%;margin:0 auto 20px;flex-shrink:0}
.sb-spell-rule::before,.sb-spell-rule::after{content:'';height:1px;background:linear-gradient(90deg,transparent,#c5b989);flex:1}
.sb-spell-rule::after{transform:rotate(180deg)}
#skill-book .sb-code{padding:16px 14px;margin:0;white-space:pre;overflow:auto;min-height:0;flex:1;background:linear-gradient(115deg,#e8eada65,#f4eee045);border:1px solid #b7b99150;border-radius:5px;color:#496449;font:clamp(10px,1.06vw,12px)/1.95 Consolas,'Courier New',monospace;scrollbar-width:thin;scrollbar-color:#b3b99d transparent;tab-size:2;overscroll-behavior:contain}
.sb-line{display:inline-block;min-height:1.95em;width:max-content;min-width:100%;text-shadow:0 0 15px #e1c88740}
.sb-line:nth-child(3n+1){color:#797049}
.sb-tabs{position:absolute;left:calc(100% - 2px);top:14px;bottom:16px;display:flex;flex-direction:column;justify-content:space-between;gap:2px;margin:0;z-index:1}
#skill-book .sb-tabs button{width:43px;min-height:19px;height:calc((100% - 22px)/12);max-height:35px;background:linear-gradient(90deg,#c5c9b3,#e2e2d0);border:1px solid #a2ad91;border-left:0;border-radius:0 6px 6px 0;color:#526249;font:600 9px/1 'Segoe UI',sans-serif;letter-spacing:.045em;box-shadow:1px 2px 2px #20332615}
#skill-book .sb-tabs button[aria-current=page]{background:linear-gradient(90deg,#617658,#859674);color:#fff9e7;width:51px;border-color:#9dae86}
.sb-footer{height:44px;display:flex;align-items:center;justify-content:center;color:#ece9d9;padding-top:10px}
.sb-counter{display:block;font:12px/1.5 Georgia,serif;letter-spacing:.2em}
.sb-turning{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;z-index:6;pointer-events:none}
.sb-forward{left:50%;transform-origin:left center}
.sb-backward{left:0;transform-origin:right center}
.sb-turning .sb-page{position:absolute;inset:0;backface-visibility:hidden;border:1px solid #e5dcc6;box-shadow:0 3px 16px #4b422926}
.sb-leaf-back{transform:rotateY(180deg)}
.sb-turning::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#68552e30,transparent 25%,#fff8df26 70%,#68552e38);opacity:calc(.15 + var(--curl,0)*.8);pointer-events:none}
@media(max-width:680px){
 #skill-book{width:98vw;max-height:98dvh;padding:5px 44px 6px 6px}
 .sb-header{height:61px;margin:0 8px}.sb-header h1{font-size:28px}.sb-header>span{font-size:11px}
 #skill-book .sb-close{width:36px;height:36px;right:-5px;top:7px}
 .sb-shell{padding:7px 7px 10px}.sb-cat{width:65px;height:65px;right:46px;top:-51px}
 .sb-spread{display:flex;flex-direction:column;height:calc(98dvh - 125px);min-height:220px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b3b99d #f8f3e5;background:var(--sb-paper)}
 .sb-page{flex:none;padding:21px 25px;overflow:visible}.sb-left{border-radius:4px 4px 0 0;box-shadow:none;padding-bottom:18px}.sb-right{border-radius:0 0 4px 4px;box-shadow:inset 0 12px 18px -18px #685b38}
 .sb-page::before{inset:9px}.sb-left .sb-page-foot{display:none}.sb-sigil{width:124px;margin:16px auto 10px;min-height:124px}
 #skill-book h2{font-size:23px;margin-bottom:13px}.sb-tools{margin-bottom:0;gap:5px}.sb-tools .sb-card-content span{font-size:10px}.sb-skill-card{min-height:114px;padding:12px 7px}.sb-emblem{width:40px;height:40px}.sb-card-content{gap:9px}
 .sb-right .sb-page-top{display:none}#skill-book h3{font-size:31px;margin:0 0 5px}.sb-spell-rule{margin-bottom:12px}
 #skill-book .sb-code{font-size:11px;min-height:180px;max-height:none;overflow-x:auto;flex:none;padding:12px 10px}
 .sb-tabs{top:10px;bottom:13px}#skill-book .sb-tabs button{width:31px;font-size:8px}#skill-book .sb-tabs button[aria-current=page]{width:37px}
 .sb-footer{height:39px;padding-top:7px}.sb-page-foot{padding-top:14px}
 .sb-turning{width:100%;left:0}.sb-turning .sb-page{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){#skill-book button{transition:none}}