Widget:Lari1

<style>

root {

 --lk-bg: #ffffff;
 --lk-bg-subtle: #f8fafc;
 --lk-accent: #2563eb;
 --lk-text: #0f172a;
 --lk-muted: #64748b;
 --lk-border: #e2e8f0;
 --lk-radius: 12px;
 --lk-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08);
 --lk-shadow-hover: 0 8px 24px -4px rgb(0 0 0 / 0.12);
 --lk-ease: 200ms cubic-bezier(0.4, 0, 0.2, 1);

}

.lk-grid {

 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
 gap: 1.5rem;
 padding: 1.5rem 0;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

}

.lk-card {

 background: var(--lk-bg);
 border: 1px solid var(--lk-border);
 border-radius: var(--lk-radius);
 box-shadow: var(--lk-shadow);
 overflow: hidden;
 display: flex;
 flex-direction: column;
 transition: box-shadow var(--lk-ease), border-color var(--lk-ease);

} .lk-card:hover {

 box-shadow: var(--lk-shadow-hover);
 border-color: #cbd5e1;

}

.lk-card-header {

 padding: 1rem 1rem 0.5rem;
 display: flex;
 align-items: center;
 gap: 0.75rem;

} .lk-card-header img {

 width: 48px; height: 48px;
 border-radius: 8px;
 object-fit: cover;
 border: 1px solid var(--lk-border);

} .lk-boss-name {

 font-size: 1.125rem;
 font-weight: 800;
 color: var(--lk-text);
 letter-spacing: -0.01em;

} .lk-boss-island {

 font-size: 0.75rem;
 font-weight: 500;
 color: var(--lk-muted);
 text-transform: uppercase;
 letter-spacing: 0.05em;

}

.lk-tabs { display: flex; flex-direction: column; flex-grow: 1; } .lk-radio { display: none !important; }

.lk-nav {

 display: flex; gap: 4px;
 padding: 0.5rem 0.75rem;
 background: var(--lk-bg-subtle);
 border-bottom: 1px solid var(--lk-border);
 overflow-x: auto;
 scrollbar-width: none;

} .lk-nav::-webkit-scrollbar { display: none; } .lk-nav label {

 padding: 6px 14px;
 font-size: 0.7rem; font-weight: 700;
 color: var(--lk-muted);
 background: transparent;
 border-radius: 6px;
 cursor: pointer;
 white-space: nowrap;
 transition: var(--lk-ease);
 border: 1px solid transparent;
 text-transform: uppercase;
 letter-spacing: 0.04em;

} .lk-nav label:hover { color: var(--lk-text); background: #f1f5f9; }

.lk-panel {

 display: none; padding: 1rem;
 flex-grow: 1;
 animation: lkFade 0.3s ease;

} @keyframes lkFade {

 from { opacity: 0; transform: translateY(4px); }
 to { opacity: 1; transform: translateY(0); }

}

.lk-video {

 position: relative; padding-bottom: 56.25%; height: 0;
 border-radius: 8px; overflow: hidden;
 background: #0f172a; margin-bottom: 0.75rem;

} .lk-video iframe {

 position: absolute; top: 0; left: 0;
 width: 100%; height: 100%; border: 0;

}

.lk-skill-name {

 font-size: 1rem; font-weight: 700;
 color: var(--lk-text); margin-bottom: 0.25rem; display: block;

} .lk-skill-desc {

 font-size: 0.875rem; line-height: 1.6;
 color: var(--lk-muted); margin: 0;

}

/* === ACTIVE TAB (b1–b7, s1–s5) === */

1. b1s1:checked~.lk-nav label[for="b1s1"],#b1s2:checked~.lk-nav label[for="b1s2"],#b1s3:checked~.lk-nav label[for="b1s3"],#b1s4:checked~.lk-nav label[for="b1s4"],#b1s5:checked~.lk-nav label[for="b1s5"],
2. b2s1:checked~.lk-nav label[for="b2s1"],#b2s2:checked~.lk-nav label[for="b2s2"],#b2s3:checked~.lk-nav label[for="b2s3"],#b2s4:checked~.lk-nav label[for="b2s4"],#b2s5:checked~.lk-nav label[for="b2s5"],
3. b3s1:checked~.lk-nav label[for="b3s1"],#b3s2:checked~.lk-nav label[for="b3s2"],#b3s3:checked~.lk-nav label[for="b3s3"],#b3s4:checked~.lk-nav label[for="b3s4"],#b3s5:checked~.lk-nav label[for="b3s5"],
4. b4s1:checked~.lk-nav label[for="b4s1"],#b4s2:checked~.lk-nav label[for="b4s2"],#b4s3:checked~.lk-nav label[for="b4s3"],#b4s4:checked~.lk-nav label[for="b4s4"],#b4s5:checked~.lk-nav label[for="b4s5"],
5. b5s1:checked~.lk-nav label[for="b5s1"],#b5s2:checked~.lk-nav label[for="b5s2"],#b5s3:checked~.lk-nav label[for="b5s3"],#b5s4:checked~.lk-nav label[for="b5s4"],#b5s5:checked~.lk-nav label[for="b5s5"],
6. b6s1:checked~.lk-nav label[for="b6s1"],#b6s2:checked~.lk-nav label[for="b6s2"],#b6s3:checked~.lk-nav label[for="b6s3"],#b6s4:checked~.lk-nav label[for="b6s4"],#b6s5:checked~.lk-nav label[for="b6s5"],
7. b7s1:checked~.lk-nav label[for="b7s1"],#b7s2:checked~.lk-nav label[for="b7s2"],#b7s3:checked~.lk-nav label[for="b7s3"],#b7s4:checked~.lk-nav label[for="b7s4"],#b7s5:checked~.lk-nav label[for="b7s5"] {

 background: #fff; color: var(--lk-accent);
 border-color: var(--lk-border); box-shadow: var(--lk-shadow);

}

/* === ACTIVE PANELS === */

1. b1s1:checked~.p-b1s1,#b1s2:checked~.p-b1s2,#b1s3:checked~.p-b1s3,#b1s4:checked~.p-b1s4,#b1s5:checked~.p-b1s5,
2. b2s1:checked~.p-b2s1,#b2s2:checked~.p-b2s2,#b2s3:checked~.p-b2s3,#b2s4:checked~.p-b2s4,#b2s5:checked~.p-b2s5,
3. b3s1:checked~.p-b3s1,#b3s2:checked~.p-b3s2,#b3s3:checked~.p-b3s3,#b3s4:checked~.p-b3s4,#b3s5:checked~.p-b3s5,
4. b4s1:checked~.p-b4s1,#b4s2:checked~.p-b4s2,#b4s3:checked~.p-b4s3,#b4s4:checked~.p-b4s4,#b4s5:checked~.p-b4s5,
5. b5s1:checked~.p-b5s1,#b5s2:checked~.p-b5s2,#b5s3:checked~.p-b5s3,#b5s4:checked~.p-b5s4,#b5s5:checked~.p-b5s5,
6. b6s1:checked~.p-b6s1,#b6s2:checked~.p-b6s2,#b6s3:checked~.p-b6s3,#b6s4:checked~.p-b6s4,#b6s5:checked~.p-b6s5,
7. b7s1:checked~.p-b7s1,#b7s2:checked~.p-b7s2,#b7s3:checked~.p-b7s3,#b7s4:checked~.p-b7s4,#b7s5:checked~.p-b7s5 {

 display: block;

}

@media (max-width: 640px) {

 .lk-grid { grid-template-columns: 1fr; gap: 1rem; }
 .lk-card-header img { width: 40px; height: 40px; }
 .lk-boss-name { font-size: 1rem; }

} </style>