:root {
--wlab-text: #16202b;
--wlab-link: #0f766e;
--wlab-accent: #b45309;
--wlab-subtle: #f4f6f5;
--wlab-border: #d8dfdc;
--wlab-focus: #0f766e;
--wll-ink: #10231f;
--wll-mint: #99f6e4;
--wlab-wide: 1040px;
}
.site-title a { letter-spacing: .01em; }
.site-description { display: none; }
.home .site-main { padding-top: 0; padding-bottom: 0; } .wll-hero {
color: #eefaf7;
background-color: var(--wll-ink);
background-image:
linear-gradient(rgba(153, 246, 228, .07) 1px, transparent 1px),
linear-gradient(90deg, rgba(153, 246, 228, .07) 1px, transparent 1px);
background-size: 28px 28px;
padding: 44px 0 48px;
}
.wll-hero__title { margin: 0 0 .15em; font-size: clamp(2.25rem, 8vw, 3.5rem); font-weight: 800; line-height: 1.2; }
.wll-hero__concept { margin: 0 0 1em; color: var(--wll-mint); font-size: clamp(1.125rem, 3.5vw, 1.5rem); font-weight: 700; }
.wll-hero__lead { max-width: 38em; margin: 0 0 1.4em; font-size: 1rem; }
.wll-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wll-hero__tags li { padding: 2px 12px; border: 1px solid rgba(153, 246, 228, .55); border-radius: 999px; font-size: .8125rem; } .wll-home { padding-bottom: 56px; }
.wll-section { margin-top: 44px; }
.wll-section__title {
margin: 0 0 18px;
padding-left: 12px;
border-left: 4px solid var(--wlab-link);
font-size: 1.25rem;
}
.wll-empty { margin: 0; padding: 18px; border: 1px dashed var(--wlab-border); border-radius: 8px; color: var(--wlab-muted); } .wll-cards { display: grid; gap: 16px; }
.wll-card-item {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--wlab-border);
border-radius: 8px;
background: var(--wlab-bg);
}
.wll-card-item__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wlab-subtle); }
.wll-card-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.wll-card-item__body { padding: 14px 16px 16px; }
.wll-card-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; color: var(--wlab-muted); font-size: .8125rem; }
.wll-card-item__title { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
.wll-card-item__title a { color: var(--wlab-text); text-decoration: none; }
.wll-card-item__title a:hover { color: var(--wlab-link); text-decoration: underline; } .wll-chip { display: inline-block; padding: 0 10px; border-radius: 999px; color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.8; }
.wll-chip--running { background: #0f766e; }
.wll-chip--done { background: #1e40af; }
.wll-chip--paused { background: #92400e; }
.wll-chip--stopped { background: #4b5563; } .wll-facts { display: grid; gap: 6px; margin: 10px 0 0; font-size: .875rem; }
.wll-facts div { display: grid; grid-template-columns: 6em 1fr; gap: 8px; }
.wll-facts dt { color: var(--wlab-muted); }
.wll-facts dd { margin: 0; }
.wll-record { margin: 0 0 1.6em; padding: 14px 16px; border: 1px solid var(--wlab-border); border-radius: 8px; background: var(--wlab-subtle); } .wll-guide { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wll-guide__item > a, .wll-guide__item > div {
display: block;
height: 100%;
padding: 14px 16px;
border: 1px solid var(--wlab-border);
border-radius: 8px;
color: var(--wlab-text);
text-decoration: none;
}
.wll-guide__item > a:hover { border-color: var(--wlab-link); background: var(--wlab-subtle); }
.wll-guide__item > div { color: var(--wlab-muted); }
.wll-guide strong { display: block; }
.wll-guide span { font-size: .875rem; color: var(--wlab-muted); } .wll-profile { padding: 20px; border-radius: 8px; background: var(--wlab-subtle); }
.wll-profile .wll-section__title { margin-bottom: 12px; }
.wll-profile p:last-child { margin-bottom: 0; } .entry-content { font-size: 1.0625rem; }
.entry-content img { height: auto; }
.entry-content table { display: block; max-width: 100%; overflow-x: auto; }
.entry-content pre { max-width: 100%; overflow-x: auto; }
.entry-content iframe { max-width: 100%; }
.entry-content [style*="width"] { max-width: 100%; }
@media (min-width: 640px) {
.wll-cards { grid-template-columns: repeat(2, 1fr); }
.wll-guide { grid-template-columns: repeat(2, 1fr); }
.wll-hero { padding: 64px 0 68px; }
}
@media (min-width: 960px) {
.wll-cards { grid-template-columns: repeat(3, 1fr); }
.wll-guide { grid-template-columns: repeat(3, 1fr); }
}