:root {
  --bg: #07090c;
--bg-soft: #0a0d12;
--surface: #0e1217;
--surface-raised: #131820;
--surface-hover: #171d25;
--text: #f4f6f8;
--muted: #a0a7b0;
--subtle: #7d858f;
--line: rgba(255, 255, 255, .09);
--line-strong: rgba(255, 255, 255, .16);
--accent: #c8fb72;
--accent-soft: #94ebcc;
--accent-gradient: linear-gradient(135deg, #d9ff8b 0%, #a8f1c9 100%);
--white: #fff;
--shell: 1680px;
--radius: 18px;
--radius-lg: 24px;
--font-body: "Inter", system-ui, sans-serif;
--font-display: "Manrope", system-ui, sans-serif;
--font-editorial: "Instrument Serif", Georgia, serif;
--shadow-card: 0 24px 70px rgba(0, 0, 0, .28);
}
* { box-sizing: border-box;
}
html { scroll-behavior: smooth;
}
body {
  margin: 0;
min-width: 320px;
overflow-x: clip;
color: var(--text);
background: var(--bg);
font: 400 16px/1.6 var(--font-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body::before {
  content: "";
position: fixed;
z-index: -1;
inset: 0 0 auto;
height: 760px;
background:
    linear-gradient(115deg, rgba(200, 251, 114, .065), transparent 34%),
    linear-gradient(245deg, rgba(94, 210, 190, .055), transparent 32%);
pointer-events: none;
}
button, input, select { font: inherit;
}
button, a, select { touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
a { color: inherit;
text-decoration: none;
}
svg { display: block;
}
.shell { width: min(calc(100% - 40px), var(--shell));
margin-inline: auto;
}
.sr-only { position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link { position: fixed;
z-index: 100;
left: 16px;
top: 16px;
padding: 10px 14px;
color: #071008;
background: var(--accent);
border-radius: 10px;
transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0);
}
:focus-visible { outline: 3px solid var(--accent);
outline-offset: 3px;
}
.site-header {
  position: sticky;
z-index: 20;
top: 0;
border-bottom: 1px solid var(--line);
background: rgba(7, 9, 12, .78);
backdrop-filter: blur(18px) saturate(140%);
}
.header-inner { height: 74px;
display: flex;
align-items: center;
justify-content: space-between;
}
.brand { display: inline-flex;
align-items: center;
gap: 11px;
font: 700 16px/1 var(--font-display);
letter-spacing: -.035em;
}
.brand-muted { color: var(--subtle);
font-weight: 600;
}
.brand-mark { width: 25px;
height: 25px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3px;
padding: 2px;
border-radius: 7px;
background: rgba(255, 255, 255, .04);
box-shadow: inset 0 0 0 1px var(--line);
transform: rotate(5deg);
}
.brand-mark span { border-radius: 2px;
background: #e9edf0;
}
.brand-mark span:nth-child(2), .brand-mark span:nth-child(3) { background: var(--accent-gradient);
}
.header-actions { display: flex;
align-items: center;
gap: 28px;
}
.nav-link { color: #b5bbc2;
font-size: 13px;
font-weight: 500;
transition: color .2s ease;
}
.nav-link:hover { color: var(--white);
}
.button { min-height: 46px;
border: 1px solid transparent;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 18px;
color: var(--text);
background: transparent;
cursor: pointer;
font-weight: 600;
font-size: 13px;
transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.button svg { width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.button:hover { transform: translateY(-2px);
}
.button:active { transform: translateY(0);
}
.button-quiet { border-color: var(--line);
background: rgba(255, 255, 255, .035);
box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}
.button-quiet:hover { border-color: var(--line-strong);
background: rgba(255, 255, 255, .065);
}
.github-link { min-height: 42px;
border-radius: 11px;
}
.github-link svg { fill: currentColor;
stroke: none;
}
.button-primary { color: #10140d;
background: var(--accent-gradient);
box-shadow: 0 12px 30px rgba(169, 238, 156, .12), inset 0 1px rgba(255, 255, 255, .5);
}
.button-primary:hover { box-shadow: 0 16px 36px rgba(169, 238, 156, .2), inset 0 1px rgba(255, 255, 255, .55);
}
.hero { min-height: 680px;
padding-top: 32px;
padding-bottom: 38px;
}
.hero-rule { padding-bottom: 14px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
color: #737b84;
font-size: 9px;
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
}
.hero-layout { padding-top: 58px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, 540px);
gap: clamp(44px, 5vw, 82px);
align-items: center;
}
.hero-content { min-width: 0;
}
.hero-label { margin: 0 0 22px;
color: var(--accent);
font-size: 10px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
}
.hero h1 { max-width: 880px;
margin: 0;
font: 700 clamp(58px, 6.6vw, 92px)/.98 var(--font-display);
letter-spacing: -.062em;
text-wrap: balance;
}
.hero h1 em { color: #d9ff8b;
font: italic 400 1.08em/.8 var(--font-editorial);
letter-spacing: -.025em;
white-space: nowrap;
}
.hero-intro { max-width: 700px;
margin-top: 46px;
padding-top: 23px;
border-top: 1px solid var(--line);
}
.hero-copy { max-width: 620px;
margin: 0;
color: #a8afb7;
font-size: 15px;
line-height: 1.72;
}
.hero-actions { margin-top: 27px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 25px;
}
.hero-primary { min-height: 50px;
padding-inline: 21px;
color: #0b0e0a;
background: #eef2eb;
border-radius: 4px;
}
.hero-primary:hover { color: #0b0e0a;
background: var(--accent);
box-shadow: none;
}
.hero-random { min-height: 44px;
padding: 0;
border: 0;
border-bottom: 1px solid #454c54;
display: inline-flex;
align-items: center;
gap: 9px;
color: #b8bec5;
background: transparent;
cursor: pointer;
font-size: 12px;
font-weight: 500;
transition: color .2s ease, border-color .2s ease;
}
.hero-random:hover { color: var(--white);
border-color: var(--accent);
}
.hero-random svg { width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero-art { width: 100%;
max-width: 540px;
min-width: 0;
margin: 0;
align-self: end;
justify-self: end;
}
.hero-art img { width: 100%;
height: auto;
display: block;
}
.hero-art figcaption { display: flex;
justify-content: space-between;
gap: 24px;
margin-top: 13px;
color: #737b84;
font-size: 10px;
line-height: 1.5;
letter-spacing: .06em;
}
.hero-art figcaption span { color: #b7bdc3;
font-weight: 600;
}
.gallery-section { position: relative;
padding: 56px 0 100px;
border-top: 1px solid var(--line);
background: #0a0d12;
}
.gallery-section .shell { position: relative;
}
.section-heading { display: flex;
align-items: end;
justify-content: space-between;
gap: 30px;
margin-bottom: 34px;
}
.section-kicker { margin: 0 0 10px;
color: var(--accent);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .18em;
}
.section-heading h2 { margin: 0;
font: 700 clamp(36px, 4vw, 52px)/1.06 var(--font-display);
letter-spacing: -.055em;
}
.result-count { margin: 0 0 5px;
padding: 7px 11px;
border: 1px solid var(--line);
border-radius: 999px;
color: #b0b7be;
background: rgba(255, 255, 255, .025);
font-size: 11px;
}
.directory-controls { margin-bottom: 24px;
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: #0d1116;
}
.toolbar { display: grid;
grid-template-columns: minmax(0, 1fr) 190px 178px;
gap: 10px;
}
.search-field, .category-field, .sort-field { height: 56px;
display: flex;
align-items: center;
border: 1px solid var(--line);
border-radius: 13px;
background: #080b0f;
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.search-field:focus-within, .category-field:focus-within, .sort-field:focus-within { border-color: rgba(200, 251, 114, .48);
box-shadow: 0 0 0 3px rgba(200, 251, 114, .07);
background: #07090c;
}
.search-field { padding: 0 17px;
}
.search-field svg { flex: 0 0 auto;
width: 19px;
height: 19px;
fill: none;
stroke: #929aa3;
stroke-width: 1.8;
stroke-linecap: round;
}
.search-field input { width: 100%;
height: 100%;
padding: 0 13px;
border: 0;
outline: 0;
color: var(--text);
background: transparent;
}
.search-field input::placeholder { color: #737b84;
}
kbd { min-width: 26px;
padding: 2px 7px;
border: 1px solid var(--line-strong);
border-radius: 6px;
color: #969ea7;
background: rgba(255, 255, 255, .04);
text-align: center;
font: 11px var(--font-body);
}
.category-field, .sort-field { padding: 0 14px;
}
.category-field select, .sort-field select { width: 100%;
height: 100%;
border: 0;
outline: 0;
appearance: none;
color: #d1d5da;
background: transparent;
cursor: pointer;
font-size: 12px;
}
.category-field select option, .sort-field select option { color: var(--text);
background: var(--surface);
}
.category-field svg, .sort-field svg { flex: 0 0 auto;
width: 17px;
fill: none;
stroke: #9199a2;
stroke-width: 1.8;
}
.portfolio-grid { display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.portfolio-card { min-width: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #0e1217;
box-shadow: 0 1px rgba(255, 255, 255, .025);
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
animation: card-in .4s both;
}
.portfolio-card:hover { transform: translateY(-4px);
border-color: rgba(255, 255, 255, .19);
box-shadow: var(--shadow-card);
}
.preview { position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
margin: 7px 7px 0;
border-radius: 13px;
background: #161b21;
}
.preview::before { content: "";
position: absolute;
z-index: 1;
inset: auto 0 0;
height: 34%;
background: linear-gradient(180deg, transparent, rgba(4, 6, 8, .22));
pointer-events: none;
}
.preview::after { content: "";
position: absolute;
z-index: 2;
inset: 0;
border: 1px solid rgba(255, 255, 255, .075);
border-radius: inherit;
pointer-events: none;
}
.preview-image { width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: top;
opacity: 0;
transition: opacity .4s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}
.preview-image.is-loaded { opacity: 1;
}
.portfolio-card:hover .preview-image { transform: scale(1.022);
}
.preview-placeholder { position: absolute;
inset: 0;
display: grid;
place-items: center;
background: linear-gradient(135deg, #171d24, #0e1217 70%);
}
.preview-placeholder::before { content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 18%, rgba(200, 251, 114, .07) 52%, transparent 82%);
}
.preview-placeholder span { width: 68px;
height: 68px;
z-index: 1;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, .11);
border-radius: 18px;
color: #e4e8eb;
background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
font: 700 19px var(--font-display);
}
.preview-image.is-loaded + .preview-placeholder { opacity: 0;
}
.card-save { position: absolute;
z-index: 3;
right: 11px;
top: 11px;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 11px;
color: #fff;
background: rgba(7, 9, 12, .74);
backdrop-filter: blur(12px);
cursor: pointer;
transition: color .2s ease, background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.card-save:hover { transform: scale(1.045);
background: rgba(7, 9, 12, .94);
border-color: rgba(255, 255, 255, .34);
}
.card-save:active { transform: scale(.97);
}
.card-save svg { width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.card-save.is-saved { color: #10140d;
background: var(--accent-gradient);
border-color: transparent;
}
.card-save.is-saved svg { fill: currentColor;
}
.card-body { min-height: 154px;
padding: 21px 20px 20px;
display: flex;
flex-direction: column;
}
.card-topline { display: flex;
gap: 18px;
align-items: start;
justify-content: space-between;
}
.card-body h3 { margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font: 700 18px/1.3 var(--font-display);
letter-spacing: -.035em;
}
.domain { max-width: 42%;
flex: 0 0 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 4px 7px;
border-radius: 6px;
color: #929aa3;
background: rgba(255, 255, 255, .035);
font-size: 10px;
}
.tagline { margin: 8px 0 20px;
color: #9098a1;
font-size: 12px;
line-height: 1.5;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.visit-link { width: fit-content;
min-height: 32px;
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 7px;
color: #dce0e3;
font-size: 11px;
font-weight: 600;
letter-spacing: .01em;
}
.visit-link svg { width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
transition: transform .2s ease;
}
.visit-link:hover { color: var(--accent);
}
.visit-link:hover svg { transform: translate(2px, -2px);
}
.skeleton-card { aspect-ratio: .98;
border: 1px solid var(--line);
border-radius: var(--radius);
background: linear-gradient(100deg, var(--surface) 30%, #1b222a 50%, var(--surface) 70%);
background-size: 240% 100%;
animation: shimmer 1.5s infinite;
}
.empty-state { padding: 84px 20px;
border: 1px dashed var(--line-strong);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .018);
text-align: center;
}
.empty-icon { width: 58px;
height: 58px;
margin: 0 auto 18px;
border: 1px solid var(--line);
border-radius: 17px;
display: grid;
place-items: center;
color: var(--muted);
background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
}
.empty-icon svg { width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
}
.empty-state h3 { margin: 0;
font: 700 22px var(--font-display);
}
.empty-state p { margin: 6px 0 22px;
color: var(--muted);
}
.load-more-wrap { display: flex;
justify-content: center;
padding-top: 48px;
}
.button-load { min-width: 230px;
min-height: 50px;
border-color: var(--line-strong);
background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022));
}
.button-load:hover { border-color: rgba(200, 251, 114, .4);
color: var(--accent);
}
.site-footer { border-top: 1px solid var(--line);
background: #06080a;
}
.footer-inner { min-height: 230px;
padding-block: 58px;
display: flex;
align-items: start;
justify-content: space-between;
gap: 40px;
}
.footer-inner p { max-width: 370px;
margin: 18px 0 0;
color: var(--subtle);
font-size: 12px;
}
.footer-links { display: flex;
flex-wrap: wrap;
gap: 26px;
color: #929aa3;
font-size: 12px;
}
.footer-links a { transition: color .2s ease;
}
.footer-links a:hover { color: var(--accent);
}
.noscript { margin: 0;
padding: 16px;
color: #111;
background: var(--accent);
text-align: center;
}
@keyframes shimmer { to { background-position: -240% 0;
}
}
@keyframes card-in { from { opacity: 0;
transform: translateY(10px);
}
to { opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1280px) {
  .portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero-layout { grid-template-columns: 1fr;
gap: 46px;
}
.hero-art { max-width: 600px;
justify-self: center;
}
.hero h1 { font-size: clamp(52px, 7.5vw, 68px);
}
.toolbar { grid-template-columns: 1fr 1fr;
}
.search-field { grid-column: 1 / -1;
}
.category-field, .sort-field { width: 100%;
}
}
@media (max-width: 640px) {
  .shell { width: min(calc(100% - 28px), var(--shell));
}
.header-inner { height: 66px;
}
.nav-link, .github-link span { display: none;
}
.header-actions { gap: 10px;
}
.github-link { width: 44px;
min-height: 44px;
padding: 0;
border-radius: 11px;
}
.hero { min-height: auto;
padding-top: 22px;
padding-bottom: 30px;
}
.hero-rule span:last-child { display: none;
}
.hero-layout { padding-top: 47px;
grid-template-columns: 1fr;
gap: 42px;
}
.hero-label { max-width: 270px;
line-height: 1.6;
}
.hero h1 { font-size: clamp(46px, 12.2vw, 54px);
line-height: 1;
letter-spacing: -.058em;
text-wrap: normal;
}
.hero h1 em { white-space: normal;
}
.hero-intro { margin-top: 34px;
padding-top: 20px;
}
.hero-copy { font-size: 14px;
line-height: 1.7;
}
.hero-actions { display: grid;
justify-items: start;
gap: 14px;
}
.hero-primary { width: 100%;
}
.hero-art { max-width: 100%;
}
.hero-art figcaption { flex-direction: column;
gap: 2px;
font-size: 9px;
}
.gallery-section { padding: 44px 0 72px;
}
.section-heading { display: block;
margin-bottom: 26px;
}
.result-count { width: fit-content;
margin-top: 14px;
}
.directory-controls { padding: 8px;
border-radius: 18px;
}
.search-field, .category-field, .sort-field { height: 52px;
}
.portfolio-grid { grid-template-columns: 1fr;
gap: 16px;
}
.footer-inner { display: block;
}
.footer-links { margin-top: 35px;
flex-direction: column;
gap: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto;
}
*, *::before, *::after { animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}