.technique-library{max-width:1480px;margin:0 auto;color:var(--theme-ink,#183e4c)}

/* The shared PageHero owns header dimensions, typography and responsive layout. */
.library-hero-counts strong{font-weight:700}

.library-hero-counts span{color:var(--theme-muted,#60818b)}

.library-hero-art{isolation:isolate}

.library-orbit{position:absolute;border:1px solid #fff9;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}

.library-orbit:after{content:"";position:absolute;border:1px dashed #4fa0aa50;border-radius:50%}

.library-showcase{position:absolute;aspect-ratio:1;border-style:solid;border-color:var(--theme-line,#f4ffff);overflow:hidden;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);z-index:2}

.library-showcase .tile{width:100%;height:100%}

.showcase-1{transform:translate(-118%,-38%) rotate(-17deg);z-index:1;scale:.87}

.showcase-2{transform:translate(21%,-43%) rotate(14deg);z-index:1;scale:.87}

.technique-library .tile{display:block;background-image:url('/images/techniques/defaults.png');background-size:300% 200%;background-position:var(--pos);position:relative}
.technique-library .tile img{width:100%;height:100%;object-fit:cover}
.library-section{margin:var(--page-gap,14px) 0 24px}
.library-section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:10px}
.library-section-heading h2{font-size:20px;margin:0;letter-spacing:-.045em}
.library-section-heading h2 small{display:inline-grid;place-items:center;vertical-align:middle;margin-left:.4rem;min-width:26px;height:25px;border-radius:8px;background:var(--theme-soft,#dfefed);font-size:.75rem;color:var(--theme-muted,#53848a);letter-spacing:0}
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:14px;align-items:start}
.library-card{min-width:0;--library-inset:14px;background:var(--theme-surface,#ffffffed);border:1px solid var(--theme-line,#cce1e5);border-radius:18px;box-shadow:0 10px 30px #21455307;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.library-card:hover{border-color:var(--theme-line,#85c5ce);box-shadow:0 13px 30px #21455312}
.library-card-main{display:flex;gap:12px;align-items:center;padding:14px var(--library-inset) 12px}
.library-art{position:relative;width:64px;height:64px;flex:none;overflow:hidden;border-radius:15px;box-shadow:0 4px 14px #15465719}
.library-art .tile{width:100%;height:100%}
.library-art-glint{position:absolute;inset:0;border:1px solid var(--theme-line,#ffffff60);border-radius:inherit;background:linear-gradient(135deg,var(--theme-surface,#fff2),transparent 45%);pointer-events:none}
.library-card-title{min-width:0}
.library-kind{font-size:9px;letter-spacing:.12em;color:var(--theme-muted,#71919b)}
.library-card h3{font-size:18px;line-height:1.25;margin:4px 0;letter-spacing:-.035em;overflow-wrap:anywhere}
.library-state{font-size:10px;color:var(--theme-accent,#369785);background:var(--theme-soft,#e8f5f0);padding:.25rem .55rem;display:inline-block;border-radius:14px}
.is-learnable .library-state{color:var(--theme-gold,#99731f);background:var(--theme-soft,#fff4d7)}
.library-description{font-size:.8rem;line-height:1.6;color:var(--theme-muted,#61808b);margin:0 var(--library-inset) 10px}
.library-stats{display:grid;grid-template-columns:.65fr 1fr 1.1fr;gap:8px;margin:0 var(--library-inset);padding:10px 0;border-top:1px solid var(--theme-line,#e0ecee)}
.library-stats>div{min-width:0}
.library-stats span{display:block;font-size:9px;letter-spacing:.06em;color:var(--theme-muted,#739099);margin-bottom:4px}
.library-stats strong{font-size:.87rem;line-height:1.3;display:block;overflow-wrap:anywhere}
.library-stats small{font-weight:400;font-size:.65rem}
.library-costs{display:flex;gap:5px;flex-wrap:wrap;margin:0 var(--library-inset) 10px}
.library-costs>span{border-radius:7px;padding:5px 6px;font-size:10px;display:flex;gap:5px;background:var(--theme-surface,#f4f8f8);color:var(--theme-muted,#6b8790)}
.library-costs .lp{background:var(--theme-surface,#fdf0f1);color:var(--theme-muted,#ad6473)}
.library-costs .ep{background:var(--theme-soft,#e9f6f7);color:var(--theme-accent,#3d909d)}
.library-costs .stamina{background:var(--theme-soft,#fcf5e6);color:var(--theme-gold,#a27e37)}
.library-effects{border-top:1px solid var(--theme-line,#e1ecee);margin:0 var(--library-inset);padding:0}
.library-effects summary{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;padding:8px 0;font-size:12px;color:var(--theme-muted,#65828b);cursor:pointer;list-style:none}
.library-effects summary::-webkit-details-marker{display:none}
.library-effects summary span{color:var(--theme-accent,#1b95a2);font-size:1rem;transition:transform .2s}
.library-effects[open] summary span{transform:rotate(45deg)}
.library-effects>div{padding-bottom:10px}
.library-effects p{overflow-wrap:anywhere;font-size:.75rem;margin:.5rem 0;padding:.6rem .7rem;border-radius:9px;background:var(--theme-surface,#f1f7f7);line-height:1.5}
.library-effects p span{display:block;font-size:.7rem;color:var(--theme-muted,#6a868e);margin-top:.2rem}
.library-card-action{padding:12px var(--library-inset);background:linear-gradient(125deg,var(--theme-surface,#f4faf9),var(--theme-soft,#ecf6f5));border-top:1px solid var(--theme-line,#dcebed)}
.library-card-action button{width:100%;min-height:44px;margin-top:10px}
.library-learning-info{display:flex;flex-direction:column;gap:5px;overflow-wrap:anywhere;font-size:.75rem}
.library-learning-info span{color:var(--theme-muted,#6b8991)}
.library-time-note{font-size:.75rem;color:var(--theme-muted,#728c94);white-space:nowrap}
.library-section-note{font-size:.8rem;color:var(--theme-muted,#6e8991);margin:0 0 12px;max-width:780px;line-height:1.6}
.library-empty{display:flex;align-items:center;gap:1rem;border:1px dashed var(--theme-line,#c4dce1);border-radius:18px;background:var(--theme-surface,#ffffff70);padding:16px;color:var(--theme-muted,#60838d)}
.library-empty>span{display:grid;place-items:center;width:45px;height:45px;border:1px solid var(--theme-line,#c9e2e3);background:var(--theme-soft,#e5f4f2);border-radius:14px;font-size:1.6rem;color:var(--theme-accent,#42a6ac);flex:none}
.library-empty strong{font-size:.85rem;color:var(--theme-muted,#416b77)}
.library-empty p{margin:.3rem 0 0;font-size:.78rem}






.library-study{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--theme-line,#bfdedb);border-radius:20px;background:linear-gradient(110deg,var(--theme-soft,#e1f5ee),var(--theme-surface,#f8fcf8));box-shadow:0 8px 24px #22605708}
.library-study-art{width:78px;height:78px;flex:none;border-radius:50%;padding:4px;background:conic-gradient(#28b398 var(--progress),#cce6df 0)}
.library-study-art .tile{width:100%;height:100%;border:4px solid var(--theme-line,#f1fbf7);border-radius:50%;overflow:hidden}
.library-study-copy{flex:1;min-width:0;overflow-wrap:anywhere}
.library-study h2{font-size:1.2rem;margin:.3rem 0}
.library-study p{font-size:.75rem;color:var(--theme-muted,#61867f);margin:.3rem 0}
.library-study-track{height:4px;background:var(--theme-soft,#cee6df);border-radius:8px;max-width:360px;overflow:hidden;margin-top:.6rem}
.library-study-track i{display:block;height:100%;background:#38b49c;border-radius:inherit}
.library-cancel{font-size:.7rem;color:var(--theme-muted,#71897f);max-width:210px;margin:0;padding:0;border:0}
.library-cancel summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.library-cancel p{font-size:.7rem}
.library-cancel button{font-size:.75rem;margin-top:.5rem}
.library-extras>.combat-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr))}
.library-extras .settings-card{border-radius:20px;padding:1.3rem;box-shadow:0 10px 25px #234a5606}
.library-extras .settings-card h3{font-size:1.2rem}
.library-extras .settings-card p{font-size:.85rem;color:var(--theme-muted,#61838d)}
.library-extras select{width:100%;border:1px solid var(--theme-line,#c6dfe3);border-radius:10px;padding:.7rem;background:var(--theme-surface,white)}


@media(max-width:700px){.library-section-heading{align-items:flex-start;flex-wrap:wrap}
.library-section-heading h2{font-size:19px}
.library-time-note{font-size:.68rem}
.library-study{gap:1rem;padding:1rem;flex-wrap:wrap}
.library-study-art{width:65px;height:65px}
.library-study-copy{min-width:180px}
.library-cancel{flex-basis:100%;max-width:none}
.library-empty{padding:1.1rem}
}

@media(prefers-reduced-motion:reduce){.library-card,.library-effects summary span{transition:none}
}