#leon-works { --work-bg: #fffefd; --work-border: #b7a596; --work-text: #252525; --work-muted: #59534e; --work-accent: #bf5709; --work-line: #e7e1db; --work-shadow: 0 8px 22px #49342226, 0 2px 5px #4934221f; --work-hover-shadow: 0 12px 28px #49342238, 0 3px 8px #49342226; }
[data-theme="dark"] #leon-works { --work-bg: #1c1f2b; --work-border: #626b80; --work-text: #f0f0f4; --work-muted: #c1c1cb; --work-accent: #00d899; --work-line: #3a4050; --work-shadow: 0 10px 26px #0009, 0 0 0 1px #b3c6e51a; --work-hover-shadow: 0 14px 32px #000b, 0 0 16px #00d89926; }
#leon-works .works-intro { margin-top: 0; }
#works-status { font-size: .82em; color: var(--work-muted); }
#leon-works .works-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 24px 0 40px; align-items: stretch; }
#leon-works .work-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--work-line); border-bottom: 1px solid var(--work-line); }
#leon-works .work-cover img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: top; transition: transform .25s; }
#leon-works .work-cover:hover img { transform: scale(1.025); }
#leon-works .work-screenshots { margin: 0 18px 14px; font-size: 12px; color: var(--work-muted); }
#leon-works .work-screenshots summary { cursor: pointer; color: var(--work-accent); }
#leon-works .work-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
#leon-works .work-gallery img { display: block; width: 100%; height: 90px; object-fit: contain; background: var(--work-line); border-radius: 6px; margin: 0; }
#leon-works .work-links { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; margin: 0 18px 16px; }
#leon-works .work-links:empty { display: none; }
#leon-works .work-links a { color: var(--work-accent); }
#leon-works .work-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding: 0; border: 2px solid var(--work-border); border-radius: 14px; background: var(--work-bg); color: var(--work-text); box-shadow: var(--work-shadow); transition: border-color .2s, box-shadow .2s; }
#leon-works .work-card:hover { border-color: var(--work-accent); box-shadow: var(--work-hover-shadow); }
#leon-works .work-card h2 { margin: 18px 18px 12px; padding: 0; font-size: 16px; line-height: 1.5; }
#leon-works .work-card h2 a { color: var(--work-text); text-decoration: none; overflow-wrap: anywhere; }
#leon-works .work-card h2 a:hover { color: var(--work-accent); }
#leon-works .work-description { margin: 0 18px 16px; font-size: 13px; line-height: 1.8; color: var(--work-muted); overflow-wrap: anywhere; }
#leon-works .work-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 18px 18px; }
#leon-works .work-tags span { color: #a04710; background: #c7731410; border: 1px solid #c9875e80; border-radius: 14px; padding: 1px 10px; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; max-width: 100%; }
[data-theme="dark"] #leon-works .work-tags span { color: #00e6a2; border-color: #00b976; background: #00bd7420; }
[data-theme="dark"] #leon-works .work-tags span:nth-child(3n+2) { color: #bf7bff; border-color: #7643a6; background: #8144b522; }
[data-theme="dark"] #leon-works .work-tags span:nth-child(3n+3) { color: #00d7f5; border-color: #008caa; background: #008caa22; }
#leon-works .work-footer { margin: auto 18px 0; padding: 14px 0 18px; border-top: 1px solid var(--work-line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; color: var(--work-muted); }
#leon-works .work-github { border: 1px solid var(--work-accent); border-radius: 6px; padding: 5px 10px; color: var(--work-accent); text-decoration: none; }
#leon-works .work-stats { display: flex; gap: 10px; white-space: nowrap; }
#leon-works a:focus-visible { outline: 2px solid var(--work-accent); outline-offset: 3px; }
@media(max-width: 1000px) { #leon-works .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media(max-width: 600px) { #leon-works .works-grid { grid-template-columns: minmax(0, 1fr); } }
@media(prefers-reduced-motion: reduce) { #leon-works .work-cover img, #leon-works .work-card { transition: none; } }