/* Verejný web: domov, /dev, /photo, /kontakt */

/* Hero */
.hero { position: relative; border-bottom: 1px solid var(--line); }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px circle at var(--mx, -999px) var(--my, -999px), rgba(109, 74, 255, .13), transparent 70%); }
.hero .wrap { position: relative; padding-top: 112px; padding-bottom: 104px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.hero-copy { flex: 1 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero-word { color: var(--purple-text); display: inline-block; }
.hero-word.anim { animation: word .55s cubic-bezier(.2, .7, .2, 1) both; }
.hero .lead { max-width: 520px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Terminál */
.term { flex: 1 1 460px; min-width: 0; background: #0E0E10; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(109, 74, 255, .35); }
.term-bar { height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; background: var(--surface); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); display: block; }
.term-bar span { margin-left: 10px; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.term-cmds { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.term-cmds .label { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-right: 4px; font-weight: 400; }
.term-cmds button { min-height: 32px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-family: var(--mono); font-size: 13px; transition: all .2s; }
.term-cmds button:hover { border-color: var(--line-2); }
.term-cmds button[aria-pressed="true"] { background: var(--purple-soft); color: var(--purple-light); border-color: var(--purple-line); }
.term-out { height: 268px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 14px; line-height: 1.55; color: var(--text-2); overflow-x: auto; }
.term-out .ln { display: flex; gap: 14px; padding-left: 4px; white-space: nowrap; }
.term-out .ln span:nth-child(1) { width: 16px; }
.term-out .ln span:nth-child(2) { min-width: 170px; }
.term-out .ln span:nth-child(3) { min-width: 150px; color: var(--muted); }
.term-out .prompt { white-space: nowrap; }
.g { color: var(--green); } .p { color: var(--purple-text); } .o { color: var(--orange); } .d { color: var(--dim); } .s { color: var(--sky); } .str { color: var(--green-text); }

/* Pás nástrojov */
.marquee { border-bottom: 1px solid var(--line); overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marq 32s linear infinite; padding: 22px 0; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track div { display: flex; gap: 48px; padding-right: 48px; }

/* Sekcie */
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; margin-bottom: 48px; }
.sec-head > div { display: flex; flex-direction: column; gap: 16px; }
.sec-head p { max-width: 420px; font-size: 17px; line-height: 1.6; color: var(--muted); }

/* Bento */
.bento { display: flex; flex-wrap: wrap; gap: 16px; }
.bento + .bento { margin-top: 16px; }
.bento-big { flex: 2 1 620px; }
.bento-mid { flex: 1 1 360px; }
.bento-small { flex: 1 1 260px; }
.bento > * { min-width: 0; text-decoration: none; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.bento-small { padding: 24px !important; gap: 14px !important; }
.bento-small strong { font-size: 18px; font-weight: 600; }
.bento-small span { font-size: 15px; line-height: 1.55; color: var(--muted); }
.branch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.branch-head > div { display: flex; align-items: center; gap: 14px; }
.branch-mark { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.branch-mark.dev { background: var(--purple); color: #fff; }
.branch-mark.photo { background: var(--orange); color: var(--bg); }
.code { background: var(--input); border: 1px solid var(--line); border-radius: 12px; padding: 22px; font-family: var(--mono); font-size: 14px; line-height: 1.75; color: var(--text-2); overflow-x: auto; white-space: pre; }
.photo-ph { flex-grow: 1; min-height: 240px; border-radius: 12px; background: var(--skel-b); border: 1px solid var(--line); position: relative; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; color: var(--dim); overflow: hidden; }
.photo-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coords { position: absolute; left: 12px; bottom: 12px; padding: 4px 8px; border-radius: 6px; background: var(--bg); color: var(--orange); font-family: var(--mono); font-size: 12px; }

/* Kalendár */
.kal { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.kal-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.feat-grid > div { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.feat-grid strong { font-size: 15px; } .feat-grid span { font-size: 14px; color: var(--muted); }
.kal-demo { flex: 1 1 500px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 40px 100px -40px rgba(109, 74, 255, .45); }
.app { background: #fff; color: #0F0F0D; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.app-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.app-logo { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 8px; }
.app-logo img { border-radius: 6px; flex: none; }
.kal-title { display: flex; align-items: center; gap: .28em; }
.kal-title img { width: .9em; height: .9em; flex: none; }
/* Wordmark InP Kalendár – rovnaké písmo (Sora) a farby ako logo na inpkalendar.sk */
:root { --kal-in: #9D8CF0; --kal-ink: var(--text); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --kal-in: #5B42A4; --kal-ink: #1F1D2D; } }
:root[data-theme="light"] { --kal-in: #5B42A4; --kal-ink: #1F1D2D; }
.kal-word { font-family: Sora, var(--font, system-ui), sans-serif; font-weight: 700; letter-spacing: -0.03em; color: var(--kal-ink); }
.kal-word .p { color: var(--kal-in); }
.app .kal-word { color: #1F1D2D; }
.app .kal-word em { font-style: normal; color: #5B42A4; }
.app-logo em { font-style: normal; color: #5B42A4; }
.app-groups { display: flex; gap: 6px; }
.app-groups button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; font-size: 13px; background: #F1F0EC; color: #4F4E48; }
.app-groups button[aria-pressed="true"] { background: #5B3DF5; color: #fff; }
.app-month { display: flex; justify-content: space-between; align-items: center; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head { font-family: var(--mono); font-size: 11px; color: #5C5B55; text-align: center; }
.cal-grid button { height: 52px; border: 0; border-radius: 8px; padding: 5px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; text-align: left; background: #F6F5F1; color: #0F0F0D; transition: transform .15s; overflow: hidden; }
.cal-grid button:hover:not(:disabled) { transform: scale(1.05); }
.cal-grid button:disabled { background: transparent; color: #9A998F; opacity: 1; cursor: default; }
.cal-grid button.today { background: #5B3DF5; color: #fff; }
.cal-grid button.sel { box-shadow: inset 0 0 0 2px #5B3DF5; }
.cal-grid button.today.sel { box-shadow: 0 0 0 2px #C4B8FF; }
.cal-grid b { font-size: 12px; font-weight: 500; }
.cal-grid small { font-size: 9px; line-height: 1.2; padding: 2px 4px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #ECE8FE; color: #4A2FD9; }
.cal-grid small.a { background: #FDEBD8; color: #8A4B0F; }
.cal-grid .today small { background: #fff; color: #4A2FD9; }
.agenda { min-height: 74px; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; background: #ECE8FE; }
.agenda.a { background: #FDEBD8; } .agenda.none { background: #F6F5F1; }
.agenda .t { min-width: 64px; font-family: var(--mono); font-size: 13px; font-weight: 500; color: #4A2FD9; }
.agenda.a .t { color: #8A4B0F; } .agenda.none .t { color: #5C5B55; }
.agenda strong { font-size: 14px; display: block; } .agenda span { font-size: 13px; color: #4F4E48; }

/* Postup */
.pipe { position: relative; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; margin-bottom: 14px; }
.pipe::after { content: ''; position: absolute; top: 0; width: 20%; height: 2px; background: var(--purple-text); animation: pipe 3.2s cubic-bezier(.5, 0, .5, 1) infinite; }
.steps { display: flex; flex-wrap: wrap; gap: 12px; }
.step { flex: 1 1 210px; min-width: 0; padding: 22px; border-radius: 14px; display: flex; flex-direction: column; gap: 14px; }
.step header { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.step strong { font-size: 18px; font-weight: 600; }
.step span { font-size: 14px; line-height: 1.55; color: var(--muted); }
.check-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; }
.step.inf { border-color: var(--purple-line); background: var(--purple-bg); }
.step.inf header { color: var(--purple-text); }
.step.inf span { color: var(--purple-light); }

/* Changelog */
.log { flex: 2 1 560px; min-width: 0; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.log li { padding: 24px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 32px; animation: pop .35s ease both; }
.log time { width: 110px; font-family: var(--mono); font-size: 14px; color: var(--dim); }
.log strong { font-size: 17px; font-weight: 600; }
.log p { font-size: 15px; color: var(--muted); margin-top: 6px; }
.tag { padding: 2px 8px; border-radius: 6px; font-family: var(--mono); font-size: 12px; }
.tag-dev { background: var(--purple-soft); color: var(--purple-text); }
.tag-photo { background: var(--orange-soft); color: var(--orange); }
.tag-web { background: var(--green-soft); color: var(--green); }

/* Stránky odvetví */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; color: var(--dim); }
.crumbs a { color: var(--dim); }
.cfg { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.cfg > * { flex: 1 1 460px; min-width: 0; }
.cfg-types { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-types button { flex: 1 1 140px; min-height: 64px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--input); text-align: left; display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.cfg-types button[aria-pressed="true"] { background: var(--purple-soft); border-color: var(--purple); }
.cfg-types small { font-size: 13px; color: var(--muted); }
.feat-list { display: flex; flex-direction: column; gap: 8px; }
.feat-list label { min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--input); display: flex; align-items: center; gap: 12px; font-size: 15px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.feat-list label:has(input:checked) { background: var(--purple-bg); border-color: var(--purple-line); }
.feat-list input { width: 18px; height: 18px; accent-color: var(--purple); }
.feat-list code { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.json { flex-grow: 1; padding: 22px; font-family: var(--mono); font-size: 14px; line-height: 1.8; color: var(--text-2); white-space: pre; overflow-x: auto; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { min-height: 72px; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 18px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); color: var(--muted); font-size: 20px; }
.faq details[open] summary::after { content: '−'; }
.faq p { padding: 0 40px 24px 0; font-size: 16px; line-height: 1.65; color: var(--muted); animation: pop .3s ease both; }

/* Photo */
.hud { position: relative; height: clamp(320px, 45vw, 560px); border-radius: 20px; overflow: hidden; background: #2A3640; border: 1px solid var(--line); }
.hud img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hud .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 14px; color: #B9C4CC; }
.hud .corner { position: absolute; width: 40px; height: 40px; border: 2px solid var(--text); }
.hud .c1 { left: 24px; top: 24px; border-right: 0; border-bottom: 0; } .hud .c2 { right: 24px; top: 24px; border-left: 0; border-bottom: 0; }
.hud .c3 { left: 24px; bottom: 24px; border-right: 0; border-top: 0; } .hud .c4 { right: 24px; bottom: 24px; border-left: 0; border-top: 0; }
.hud .badge { position: absolute; padding: 6px 10px; border-radius: 6px; background: rgba(9, 9, 11, .7); font-family: var(--mono); font-size: 13px; display: flex; align-items: center; gap: 10px; }
.rec { width: 9px; height: 9px; border-radius: 50%; background: #F04D4D; animation: blink 1.2s steps(1) infinite; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 12px; }
.gallery button { position: relative; border: 0; padding: 0; border-radius: 14px; overflow: hidden; color: var(--text); text-align: left; transition: transform .3s, filter .3s; animation: pop .35s ease both; }
.gallery button.tall { grid-row: span 2; }
.gallery button:hover { transform: scale(1.015); filter: brightness(1.12); }
.gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery .code-tag { position: absolute; left: 14px; top: 14px; padding: 3px 8px; border-radius: 6px; background: rgba(9, 9, 11, .65); font-family: var(--mono); font-size: 11px; }
.gallery .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; background: rgba(9, 9, 11, .78); display: flex; flex-direction: column; gap: 4px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.gallery button:hover .cap, .gallery button:focus-visible .cap { opacity: 1; transform: none; }
.gallery .cap b { font-size: 15px; } .gallery .cap span { font-family: var(--mono); font-size: 12px; color: var(--orange); }
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(9, 9, 11, .88); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox .inner { width: min(1000px, 100%); display: flex; flex-direction: column; gap: 14px; animation: pop .3s ease both; }
.lightbox .img { height: min(620px, 70vh); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 14px; color: var(--text-2); position: relative; overflow: hidden; }
.lightbox .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.series { display: flex; flex-wrap: wrap; gap: 10px; }
.series div { flex: 1 1 150px; padding: 18px; border-radius: 12px; display: flex; flex-direction: column; gap: 8px; border: 1px dashed var(--line-2); }
.series div.on { border: 1px solid var(--orange-line); background: var(--orange-soft); }
.series b { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--dim); }
.series div.on b { color: var(--orange); }

/* Kontakt */
.contact { display: flex; flex-wrap: wrap; gap: 48px 64px; }
.contact > div:first-child { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.contact > div:last-child { flex: 1 1 520px; min-width: 0; }
.mail-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; display: flex; align-items: center; gap: 14px; }
.mail-card .branch-mark { width: 36px; height: 36px; font-size: 11px; }
.mail-card small { display: block; font-size: 13px; color: var(--dim); }
.mail-card span { font-family: var(--mono); font-size: 15px; }
.form-card { padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.success { padding: 40px; display: flex; flex-direction: column; gap: 20px; animation: pop .4s ease both; }
.ok-circle { width: 56px; height: 56px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; }
.shake { animation: shake .4s ease; }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 30%, 70% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }

@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
  .feat-grid { grid-template-columns: 1fr; }
  .hero .wrap { padding-top: 72px; padding-bottom: 72px; }
  .bento > * { padding: 24px; }
}

/* ---- Referencie ---- */
.refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ref { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .25s, transform .25s; }
a.ref:hover { border-color: var(--purple); transform: translateY(-3px); }
.ref-img { aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--purple-soft), var(--surface-2)) center / cover no-repeat; display: grid; place-items: center; font-size: 34px; color: var(--purple-light); }
.ref-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.ref-body b { font-size: 19px; letter-spacing: -.02em; }
.ref-body p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.ref-link { color: var(--purple-light); font-size: 14px; margin-top: 4px; }

/* Terminál a ukážky kódu sú vždy tmavé – farby syntaxe berú z tmavej palety aj vo svetlom režime */
.term, .json { --green: #3DD68C; --green-text: #7EE2A8; --sky: #7DD3FC; --dim: #8E8E96; --purple-text: #A18BFF; --orange: #F2994A; --text-2: #D4D4D8; --muted: #A1A1AA; }

/* ---------- Projekty InP Developers ---------- */
.proj { gap: 20px !important; justify-content: space-between; }
.proj .h3 { margin: 0; }
.proj .muted { margin: 0; }
.proj-open { align-self: flex-start; }
.proj-st { font-family: var(--mono); font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.proj-st.ok { color: var(--green-text, var(--green)); border-color: var(--green-line, var(--line)); background: var(--green-soft); }
.proj-st.dev { color: var(--purple-text); border-color: var(--purple-line); background: var(--purple-bg); }
.proj-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.proj-tags span { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--bg); }
.proj-vis { border-radius: 14px; border: 1px solid var(--line); overflow: hidden; height: 168px; position: relative; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; }
/* náhľad: fintech karta */
.pv-fin { background: linear-gradient(160deg, #EEF3EF, #F7F8F6); }
.pvf-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 20, .06), 0 6px 18px rgba(15, 23, 20, .06); padding: 12px 14px 0; display: flex; flex-direction: column; gap: 1px; color: #0E1512; font-family: Inter, var(--font), sans-serif; flex: 1; min-height: 0; }
.pvf-card small { font-size: 11px; color: #5E6B65; }
.pvf-card b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.pvf-card em { font-style: normal; font-size: 11px; color: #137A4E; font-weight: 600; }
.pvf-card svg { width: 100%; height: 40px; margin-top: auto; display: block; }
.pvf-tabs { display: flex; gap: 6px; font-size: 11px; font-family: Inter, var(--font), sans-serif; }
.pvf-tabs span { padding: 3px 9px; border-radius: 999px; color: #4B5852; background: rgba(255, 255, 255, .7); }
.pvf-tabs span.on { background: #0E1512; color: #fff; }
/* náhľad: herný portál */
.pv-games { background: radial-gradient(120% 90% at 85% 0%, rgba(109, 74, 255, .35), transparent 60%), #0b0b0f; border-color: #1d1b26; color: #EDEBF5; justify-content: space-between; }
.pvg-top { display: flex; justify-content: space-between; align-items: center; }
.pvg-logo { font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.pvg-btn { font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 8px; background: #6d4aff; color: #fff; }
.pvg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pvg-card { border-radius: 10px; padding: 10px; background: #15141c; border: 1px solid #262433; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pvg-card i { height: 26px; border-radius: 6px; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 40%, #0b0b0f)); margin-bottom: 6px; }
.pvg-card b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvg-card small { font-size: 10.5px; color: #A39FB8; font-family: var(--mono); }
/* detail projektu */
.proj-dlg { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.proj-dlg::backdrop { background: rgba(9, 9, 11, .55); backdrop-filter: blur(3px); }
.proj-dh { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 28px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.proj-dh .h3 { margin: 0; }
.proj-x { all: unset; cursor: pointer; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 15px; flex: none; }
.proj-x:hover, .proj-x:focus-visible { background: var(--surface-2); color: var(--text); outline: none; box-shadow: 0 0 0 2px var(--purple-line); }
.proj-db { padding: 22px 28px 28px; display: flex; flex-direction: column; gap: 16px; font-size: 15.5px; line-height: 1.65; }
.proj-db p { margin: 0; }
.proj-meta { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.proj-meta > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.proj-meta small { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.proj-meta b { font-weight: 500; font-size: 14.5px; line-height: 1.45; }
.proj-slogan { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.proj-h { font-size: 13px; font-family: var(--mono); font-weight: 500; color: var(--accent-text, var(--purple-text)); margin: 6px 0 0; }
.proj-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.proj-list li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.5; }
.proj-list li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--green); }
.proj-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.proj-cols > div { display: flex; flex-direction: column; gap: 10px; }
.proj-games { display: grid; gap: 10px; }
.pg { border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; }
.pg span:not(.pg-v) { color: var(--muted); }
.pg-v { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.proj-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.proj-sw span { display: flex; flex-direction: column; font-family: var(--mono); font-size: 12.5px; padding-left: 34px; position: relative; min-height: 26px; justify-content: center; }
.proj-sw span::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 7px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 1px var(--line); }
.proj-sw small { font-family: var(--font); font-size: 11.5px; color: var(--dim); }
@media (max-width: 640px) {
  .proj-list, .proj-cols, .proj-sw { grid-template-columns: 1fr; }
  .proj-dh, .proj-db { padding-left: 18px; padding-right: 18px; }
  .proj-meta { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) { .proj-dlg[open] { animation: projin .22s ease; } @keyframes projin { from { opacity: 0; transform: translateY(10px) scale(.985); } } }
.proj-vis { height: 196px; } .pvf-card svg { height: 50px; flex: none; margin-top: 6px; } .pvf-card { overflow: hidden; }

.proj-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.proj-acts .btn { gap: 8px; }
.proj-meta a { color: var(--accent-text, var(--purple-text)); font-size: 14px; }