:root {
  --ink: #0c1724;
  --ink-soft: #263344;
  --paper: #f4f3ef;
  --white: #ffffff;
  --muted: #697383;
  --line: #d9dde0;
  --lime: #c6f434;
  --aqua: #c8eee9;
  --blue: #2c6bff;
  --orange: #ff8f55;
  --violet: #d9d2ff;
  --shadow: 0 20px 60px rgba(12, 23, 36, .08);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.055em; line-height: 1.02; }

.site-header { position: relative; z-index: 5; }
.nav-shell { width: min(1240px, calc(100% - 3rem)); height: 80px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-size: .76rem; font-weight: 800; letter-spacing: .09em; white-space: nowrap; }
.brand b { color: var(--blue); }
.brand-symbol { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; }.brand-logo { width: 32px; height: 32px; display: block; object-fit: contain; }
.main-nav { padding: .28rem; display: flex; align-items: center; gap: .16rem; border: 1px solid #e0e6eb; border-radius: 10px; background: #f7f9fa; color: var(--muted); font-size: .68rem; font-weight: 800; }.main-nav a { min-height: 34px; padding: .42rem .52rem; display: inline-flex; align-items: center; gap: .34rem; border: 1px solid transparent; border-radius: 7px; color: #506075; white-space: nowrap; }.main-nav a svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.main-nav a:hover, .main-nav a:focus-visible { border-color: #ccd9e2; background: var(--white); color: var(--blue); }
.nav-cta { min-height: 38px; padding: .55rem .85rem; display: inline-flex; align-items: center; gap: .34rem; border-radius: 7px; background: var(--ink); color: var(--white); font-size: .75rem; font-weight: 800; }.nav-cta:hover { background: var(--blue); }

.eyebrow { display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.eyebrow.light { color: #bdc7d0; }.eyebrow.light span { background: var(--lime); }
.pill { display: inline-flex; align-items: center; padding: .31rem .55rem; border-radius: 999px; background: #e9ebed; color: #556174; font-size: .64rem; font-weight: 800; letter-spacing: .03em; }.pill.subtle { background: #f4f1e8; }
.byline { display: block; color: #7c8695; font-size: .71rem; font-weight: 650; }
.muted { color: var(--muted); }
.score { color: var(--muted); font-size: .72rem; font-weight: 750; }

.hero-home { width: min(1240px, calc(100% - 3rem)); min-height: 600px; margin: 0 auto 7.5rem; overflow: hidden; border-radius: 23px; background: var(--ink); color: var(--white); }
.hero-grid { min-height: 600px; display: grid; grid-template-columns: .96fr 1.04fr; }
.hero-copy { padding: clamp(3rem, 6vw, 5.8rem); display: flex; flex-direction: column; justify-content: center; }
.hero-copy h1 { max-width: 620px; margin-bottom: 1.35rem; font-size: clamp(3.4rem, 5.5vw, 6.45rem); font-weight: 840; }
.hero-copy h1 em { color: var(--lime); font-style: normal; }
.hero-text { max-width: 500px; margin-bottom: 2.15rem; color: #c5cdd5; font-size: 1rem; line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.button { min-height: 46px; padding: .76rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; border: 0; border-radius: 7px; font-family: inherit; font-size: .77rem; font-weight: 800; cursor: pointer; transition: transform .18s, background .18s; }.button:hover { transform: translateY(-2px); }
.button.lime { background: var(--lime); color: var(--ink); }.button.outline { border: 1px solid #4c5a6e; color: var(--white); }.button.dark-button { background: var(--ink); color: var(--white); }.button.light-button { background: var(--white); color: var(--ink); }.button.outline-dark { border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.hero-stats { margin-top: 3.7rem; padding-top: 1.1rem; display: flex; gap: 1.3rem; border-top: 1px solid #334051; }.hero-stats div { display: flex; align-items: baseline; gap: .35rem; }.hero-stats strong { font-size: 1.2rem; }.hero-stats span { color: #aeb8c4; font-size: .68rem; white-space: nowrap; }
.hero-image-wrap { position: relative; overflow: hidden; background: #dce9ee; }.hero-image-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(12,23,36,.27)); pointer-events: none; }.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: multiply; }.hero-label { align-self: flex-start; margin: -.2rem 0 1.35rem; padding: .48rem .65rem; border: 1px solid #455466; border-radius: 6px; color: #d7e0e9; font-size: .58rem; font-weight: 800; letter-spacing: .11em; line-height: 1; }.hero-label b { margin-left: .25rem; color: var(--lime); font-size: .82rem; }.hero-image-wrap > p { position: absolute; z-index: 1; right: 1.8rem; bottom: 1.5rem; max-width: 240px; margin: 0; color: var(--white); font-size: .77rem; font-weight: 750; text-align: right; }
.image-choice-map { position: absolute; z-index: 2; inset: 0; }.map-choice { position: absolute; display: block; border: 2px solid transparent; border-radius: 12px; background: transparent; color: transparent; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }.map-choice:hover, .map-choice:focus-visible, .map-choice.selected { border-color: var(--lime); background: rgba(198,244,52,.12); box-shadow: 0 0 0 3px rgba(198,244,52,.22); outline: 0; }.map-choice span { position: absolute; right: .3rem; bottom: .3rem; padding: .2rem .35rem; border-radius: 4px; background: var(--lime); color: var(--ink); font-family: inherit; font-size: .62rem; font-weight: 850; opacity: 0; transition: opacity .15s; }.map-choice:hover span, .map-choice:focus-visible span, .map-choice.selected span { opacity: 1; }.map-choice-1 { top: 21%; left: 4%; width: 44%; height: 35%; }.map-choice-2 { top: 21%; left: 52%; width: 44%; height: 35%; }.map-choice-3 { top: 58%; left: 3%; width: 29%; height: 34%; }.map-choice-4 { top: 58%; left: 35.5%; width: 29%; height: 34%; }.map-choice-5 { top: 58%; left: 68%; width: 29%; height: 34%; }.hero-poll-status { position: absolute; z-index: 3; left: 1.35rem; bottom: 1.2rem; max-width: 250px; padding: .65rem .75rem; border-radius: 7px; background: rgba(12,23,36,.85); color: white; font-size: .67rem; line-height: 1.4; }.hero-poll-status strong, .hero-poll-status span { display: block; }.hero-poll-status strong { margin-bottom: .12rem; color: var(--lime); font-size: .7rem; }.hero-poll-status a { color: var(--lime); font-weight: 800; }

.section { width: min(1120px, calc(100% - 3rem)); margin: 0 auto 7rem; }.section-heading { max-width: 620px; }.section-heading h2 { margin-bottom: 0; font-size: clamp(2rem, 3.3vw, 3.55rem); font-weight: 830; }.row-heading { max-width: none; margin-bottom: 2.25rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }.text-link { color: var(--blue); font-size: .79rem; font-weight: 800; white-space: nowrap; }.text-link span { margin-left: .4rem; font-size: 1rem; }

.participation-intro { margin-bottom: 7.5rem; }.participation-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4.5rem; align-items: start; }.participation-grid h2 { max-width: 600px; margin: 0; font-size: clamp(2.1rem, 3.5vw, 4rem); font-weight: 820; }.participation-steps { display: grid; gap: 1rem; }.participation-steps > div { display: grid; grid-template-columns: 38px 1fr; gap: .65rem; padding: 1rem 0; border-top: 1px solid var(--line); }.participation-steps > div:last-child { border-bottom: 1px solid var(--line); }.participation-steps b { color: var(--blue); font-size: .71rem; }.participation-steps p { margin: 0; color: #596576; font-size: .85rem; }.participation-steps strong { color: var(--ink); }

.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.category-card { min-height: 340px; padding: 1.55rem; display: flex; flex-direction: column; position: relative; overflow: hidden; border-radius: var(--radius); transition: transform .2s, box-shadow .2s; }.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }.faq-card { background: var(--aqua); }.tutorial-card { background: var(--violet); }.gallery-card { background: #ffe8db; }.card-code { color: #536174; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.card-icon { margin: auto 0 1.2rem; color: rgba(12,23,36,.78); font-size: 4.2rem; font-weight: 350; line-height: .8; }.category-card h3 { max-width: 260px; margin-bottom: .8rem; font-size: 1.7rem; font-weight: 820; }.category-card p { max-width: 270px; margin-bottom: 1.2rem; color: #4e5a68; font-size: .8rem; line-height: 1.65; }.card-link { color: var(--blue); font-size: .76rem; font-weight: 800; }.card-link b { margin-left: .5rem; font-size: 1rem; }

.home-poll-section { margin-top: -1rem; }.home-poll-section .section-heading > div > p:not(.eyebrow) { max-width: 520px; margin: 1rem 0 0; color: var(--muted); font-size: .83rem; }.home-poll-card { display: grid; grid-template-columns: minmax(260px, .78fr) minmax(320px, 1.22fr); overflow: hidden; border-radius: 13px; background: var(--white); box-shadow: var(--shadow); }.home-poll-options { padding: 1.3rem; background: #e8f3f2; }.home-poll-options form + form { margin-top: .5rem; }.poll-option-button { width: 100%; padding: .72rem .75rem; display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: .55rem; border: 1px solid transparent; border-radius: 7px; background: rgba(255,255,255,.74); color: var(--ink); font-family: inherit; font-size: .76rem; font-weight: 800; text-align: left; cursor: pointer; }.poll-option-button:hover, .poll-option-button.selected { border-color: var(--ink); background: var(--white); }.poll-option-button b { color: var(--blue); font-size: .6rem; }.color-dot { width: 12px; height: 12px; display: block; border: 1px solid rgba(12,23,36,.25); border-radius: 50%; }.dot-1 { background: #161c20; }.dot-2 { background: #e9362d; }.dot-3 { background: #f8f8f2; }.dot-4 { background: #a5a29a; }.dot-5 { background: #444b4e; }.poll-results { padding: 1.7rem; }.poll-results-heading { margin-bottom: 1.35rem; display: flex; align-items: baseline; justify-content: space-between; }.poll-results-heading span { color: var(--ink); font-size: 1.2rem; font-weight: 830; letter-spacing: -.03em; }.poll-results-heading strong { color: var(--muted); font-size: .68rem; }.result-row { margin-top: .82rem; }.result-row > div { margin-bottom: .32rem; display: flex; justify-content: space-between; color: #5c697a; font-size: .72rem; font-weight: 700; }.result-row > div b { color: var(--ink); }.result-row.your-result > div { color: var(--blue); }.result-track { height: 8px; display: block; overflow: hidden; border-radius: 99px; background: #edf0f1; }.result-track i { height: 100%; display: block; border-radius: inherit; background: #73869a; }.your-result .result-track i { background: var(--blue); }

.content-section { padding: 5rem max(1.5rem, calc((100vw - 1120px) / 2)); width: 100%; background: var(--white); }.content-section .section-heading { width: min(1120px, 100%); margin: 0 auto 2.25rem; }.faq-grid { width: min(1120px, 100%); margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.faq-preview { min-height: 280px; padding: 1.35rem; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; }.content-topline { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }.faq-preview h3 { margin: 2.4rem 0 .8rem; font-size: 1.3rem; font-weight: 820; }.faq-preview h3 a:hover { color: var(--blue); }.faq-preview p { margin-bottom: 1.1rem; color: #5a6576; font-size: .78rem; line-height: 1.7; }.faq-preview .byline { margin-top: auto; }

.split-showcase { display: grid; grid-template-columns: 1.12fr .88fr; gap: 3.5rem; align-items: stretch; }.tutorial-showcase { padding: .4rem 0; }.tutorial-showcase .section-heading { margin-bottom: 2rem; }.feature-tutorial { padding: .95rem 0; display: grid; grid-template-columns: 180px 1fr; gap: 1rem; border-top: 1px solid var(--line); }.feature-tutorial:last-of-type { border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }.feature-thumbnail { width: 180px; height: 140px; border-radius: 9px; object-fit: cover; }.feature-tutorial h3 { margin: .6rem 0 .5rem; font-size: 1.25rem; font-weight: 820; }.feature-tutorial h3 a:hover { color: var(--blue); }.feature-tutorial p { margin-bottom: .75rem; color: #576273; font-size: .79rem; line-height: 1.6; }.ranking-panel { padding: 2.2rem; border-radius: var(--radius); background: var(--ink); color: var(--white); }.ranking-panel h2 { margin-bottom: .8rem; font-size: 2.4rem; font-weight: 820; }.ranking-panel > p:not(.eyebrow) { margin-bottom: 1.2rem; color: #bfc8d3; font-size: .81rem; line-height: 1.65; }.leader-list { margin: 0 0 1.3rem; padding: 0; list-style: none; }.leader-list li { display: grid; grid-template-columns: 35px 1fr auto; gap: .6rem; align-items: center; padding: .72rem 0; border-top: 1px solid #324052; }.leader-list li:last-child { border-bottom: 1px solid #324052; }.rank-number { color: var(--lime); font-size: .7rem; font-weight: 800; }.leader-name { font-size: .79rem; font-weight: 750; }.leader-name small, .leader-list strong small { display: block; color: #aeb9c6; font-size: .6rem; font-weight: 500; }.leader-list strong { text-align: right; font-size: .9rem; }.leader-list strong small { color: var(--lime); }

.gallery-strip { margin-bottom: 6.3rem; }.gallery-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1rem; }.gallery-home-item { min-height: 315px; position: relative; overflow: hidden; margin: 0; border-radius: 12px; background: #dce2e7; }.gallery-home-item:first-child { min-height: 390px; }.gallery-home-item img, .gallery-home-item .image-placeholder { width: 100%; height: 100%; object-fit: cover; }.gallery-home-item::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(12,23,36,.68)); pointer-events: none; }.gallery-home-item figcaption { position: absolute; z-index: 1; bottom: 0; left: 0; padding: 1.1rem; color: white; }.gallery-home-item figcaption span, .gallery-home-item figcaption strong, .gallery-home-item figcaption small { display: block; }.gallery-home-item figcaption span { margin-bottom: .2rem; color: var(--lime); font-size: .63rem; font-weight: 800; text-transform: uppercase; }.gallery-home-item figcaption strong { margin-bottom: .25rem; font-size: .95rem; }.gallery-home-item figcaption small { color: #d7dde4; font-size: .64rem; }
.home-model-banner { min-height: 350px; position: relative; overflow: hidden; margin-bottom: 7rem; border-radius: var(--radius); background: var(--ink); color: white; }.home-model-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,18,31,.72) 0%, rgba(6,18,31,.36) 38%, rgba(6,18,31,.04) 70%); pointer-events: none; }.home-model-banner > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }.home-model-copy { width: min(360px, 52%); padding: clamp(1.5rem, 4vw, 3rem); position: relative; z-index: 1; }.home-model-copy h2 { margin: .75rem 0; font-size: clamp(2rem, 3.4vw, 3.5rem); font-weight: 830; line-height: 1.02; }.home-model-copy > p:not(.eyebrow) { margin-bottom: 1.25rem; color: #d6dee6; font-size: .82rem; line-height: 1.6; }

.cta-band { width: min(1240px, calc(100% - 3rem)); margin: 0 auto 5rem; padding: clamp(2rem, 5vw, 4rem); display: flex; justify-content: space-between; align-items: center; gap: 2rem; border-radius: var(--radius); background: #223751; color: white; }.cta-band h2 { max-width: 600px; margin-bottom: 0; font-size: clamp(2rem, 3vw, 3.3rem); font-weight: 820; }

.site-footer { width: min(1240px, calc(100% - 3rem)); margin: auto; padding: 2rem 0 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; border-top: 1px solid var(--line); }.site-footer p { max-width: 360px; margin: .8rem 0 0; color: var(--muted); font-size: .7rem; line-height: 1.6; }.footer-links { display: flex; justify-content: flex-end; align-items: start; flex-wrap: wrap; gap: 1rem 1.6rem; color: var(--muted); font-size: .72rem; font-weight: 750; }.footer-links a:hover { color: var(--blue); }

.flash { width: min(1120px, calc(100% - 3rem)); margin: 0 auto 1.2rem; padding: .85rem 1rem; border-radius: 8px; font-size: .78rem; font-weight: 700; }.flash-success { background: #e3f6df; color: #245b31; }.flash-error { background: #ffe5dc; color: #8d3925; }

.page-hero { width: min(1120px, calc(100% - 3rem)); margin: 1.8rem auto 4rem; padding: clamp(2.2rem, 5vw, 4.2rem); border-radius: var(--radius); background: #dcece9; }.page-hero h1 { max-width: 730px; margin-bottom: .9rem; font-size: clamp(3rem, 5.4vw, 5.8rem); font-weight: 830; }.page-hero > p:not(.eyebrow) { max-width: 640px; margin-bottom: 1.5rem; color: #536172; font-size: .96rem; line-height: 1.65; }.listing-page .page-hero { background: #dcece9; }.ranking-hero { background: #e8e1ff; }
.list-section { margin-bottom: 6rem; }.filter-bar { margin-bottom: 2rem; display: flex; gap: .55rem; flex-wrap: wrap; }.filter-bar a { padding: .48rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: #627084; font-size: .7rem; font-weight: 750; }.filter-bar a.active, .filter-bar a:hover { border-color: var(--ink); background: var(--ink); color: white; }
.listing-faqs { display: grid; gap: 1rem; }.full-faq { padding: 1.45rem; display: grid; grid-template-columns: 1fr 260px; gap: 1.5rem; position: relative; border-radius: 12px; background: var(--white); box-shadow: 0 1px 0 rgba(12,23,36,.03); }.full-faq h2 { max-width: 700px; margin: .9rem 0 .8rem; font-size: 1.5rem; font-weight: 820; }.full-faq p { max-width: 740px; margin-bottom: 1rem; color: #536073; font-size: .84rem; line-height: 1.72; }.full-faq figure { margin: 0; }.full-faq figure img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; }.vote-form { position: absolute; right: 1.3rem; bottom: 1.1rem; }.vote-form button { padding: .4rem .6rem; border: 0; border-radius: 999px; background: #f2f3f5; color: #596678; font-family: inherit; font-size: .68rem; font-weight: 800; cursor: pointer; }.vote-form button:hover { background: #ffe6de; color: #cf593a; }
.tutorial-listing { display: grid; gap: 1.2rem; }.full-tutorial { display: grid; grid-template-columns: 360px 1fr; gap: 2rem; padding: 1.45rem; border-radius: 12px; background: white; }.full-tutorial figure { margin: 0; }.full-tutorial figure img { width: 100%; height: 280px; object-fit: cover; border-radius: 9px; }.full-tutorial h2 { margin: .7rem 0; font-size: 1.75rem; font-weight: 820; }.tutorial-intro { margin-bottom: .9rem; color: #3f4f64; font-size: .92rem; font-weight: 700; }.tutorial-body { padding: 1rem 0; color: #596577; font-size: .82rem; line-height: 1.7; }.tutorial-reference { display: inline-flex; align-items: center; margin: -.15rem 0 1rem; padding: .55rem .72rem; border: 1px solid #b7c5d4; border-radius: 7px; color: #17395b; background: #f5f9fc; font-size: .72rem; font-weight: 800; }.tutorial-reference:hover { border-color: var(--blue); background: #eaf5fc; }.full-tutorial .vote-form, .gallery-list-item .vote-form { position: static; margin-top: 1rem; }
.gallery-listing { columns: 3 250px; column-gap: 1rem; }.gallery-list-item { margin: 0 0 1rem; overflow: hidden; break-inside: avoid; border-radius: 12px; background: var(--white); }.gallery-list-item > img { width: 100%; max-height: 490px; object-fit: cover; }.gallery-item-body { padding: 1.1rem; }.gallery-item-body h2 { margin: .65rem 0 .5rem; font-size: 1.2rem; font-weight: 820; }.gallery-item-body p { margin-bottom: .8rem; color: #596577; font-size: .78rem; line-height: 1.6; }.gallery-reference { display: inline-flex; margin: 0 0 .8rem; padding: .46rem .58rem; border: 1px solid #b7c5d4; border-radius: 7px; color: #17395b; background: #f5f9fc; font-size: .66rem; font-weight: 800; }.gallery-reference:hover { border-color: var(--blue); background: #eaf5fc; }
.empty-state { padding: 3rem 1.5rem; border: 1px dashed #b8c0ca; border-radius: 12px; text-align: center; }.empty-state h2 { margin-bottom: .5rem; font-size: 1.75rem; }.empty-state p { color: var(--muted); font-size: .82rem; }

.contribute-hero { padding: clamp(3rem, 6vw, 5.5rem) max(1.5rem, calc((100vw - 1120px) / 2)); background: var(--ink); color: white; }.contribute-hero h1 { max-width: 740px; margin-bottom: 1rem; font-size: clamp(3rem, 5.3vw, 5.7rem); font-weight: 830; }.contribute-hero > p:not(.eyebrow) { max-width: 650px; margin-bottom: 0; color: #c8d0d8; font-size: .98rem; line-height: 1.65; }.contribute-layout { display: grid; grid-template-columns: 270px 1fr; gap: 4.5rem; align-items: start; margin-top: 4rem; }.contribution-tabs { position: sticky; top: 1.3rem; }.contribution-tabs > a { padding: .9rem 0; display: grid; grid-template-columns: 35px 1fr; gap: .5rem; border-top: 1px solid var(--line); color: #667283; }.contribution-tabs > a:last-of-type { border-bottom: 1px solid var(--line); }.contribution-tabs > a b { color: var(--blue); font-size: .7rem; }.contribution-tabs > a span { font-size: .83rem; font-weight: 780; line-height: 1.2; }.contribution-tabs > a.active { color: var(--ink); }.moderation-note { margin-top: 2rem; padding: 1.1rem; border-radius: 10px; background: #e0f0ed; }.moderation-note strong { font-size: .78rem; }.moderation-note p { margin: .4rem 0 0; color: #4f6170; font-size: .71rem; line-height: 1.6; }.contribution-form-wrap { padding: clamp(1.2rem, 3vw, 2.2rem); border-radius: 13px; background: var(--white); box-shadow: var(--shadow); }.form-heading { margin-bottom: 1.5rem; }.form-heading h2 { margin: .8rem 0 .4rem; font-size: 2.3rem; font-weight: 820; }.form-heading p { margin: 0; color: var(--muted); font-size: .76rem; }.form-error { margin-bottom: 1rem; padding: .8rem .9rem; border-radius: 7px; background: #ffe5dc; color: #843824; font-size: .75rem; font-weight: 700; }.contribution-form { display: grid; gap: 1rem; }.contribution-form label, .admin-form label { display: grid; gap: .45rem; color: #465367; font-size: .76rem; font-weight: 760; }.contribution-form input, .contribution-form select, .contribution-form textarea, .admin-form input { width: 100%; padding: .75rem .8rem; border: 1px solid #ced4da; border-radius: 6px; outline: none; background: #fff; color: var(--ink); font: inherit; font-size: .84rem; font-weight: 500; }.contribution-form input:focus, .contribution-form select:focus, .contribution-form textarea:focus, .admin-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(44,107,255,.12); }.contribution-form textarea { resize: vertical; line-height: 1.6; }.form-row.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.upload-field { padding: 1rem; border: 1px dashed #aab4c2; border-radius: 7px; background: #f8f9f9; }.upload-field input { padding: 0; border: 0; background: transparent; box-shadow: none !important; font-size: .72rem; }.upload-field small { color: var(--muted); font-size: .65rem; font-weight: 500; }.form-privacy { margin: .15rem 0 .3rem; color: #718094; font-size: .68rem; line-height: 1.55; }

.ranking-page .page-hero { margin-bottom: 3rem; }.ranking-table-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }.ranking-table { overflow: hidden; border-radius: 11px; background: var(--white); }.ranking-row { min-height: 66px; padding: 1rem 1.2rem; display: grid; grid-template-columns: 100px 1fr 155px 80px; align-items: center; gap: 1rem; border-top: 1px solid var(--line); color: #5c697a; font-size: .79rem; }.ranking-row.heading { min-height: auto; border-top: 0; background: #edf0f2; color: #788494; font-size: .62rem; font-weight: 800; text-transform: uppercase; }.rank-place { color: var(--blue); font-weight: 800; }.rank-author { display: flex; align-items: center; gap: .5rem; color: var(--ink); }.rank-author small { font-size: .9rem; }.ranking-row strong { color: var(--ink); }.ranking-row strong small { color: var(--muted); font-size: .62rem; }.ranking-invite { padding: 1.8rem; border-radius: 12px; background: #e7f4f1; }.ranking-invite h2 { margin-bottom: .7rem; font-size: 1.65rem; font-weight: 820; }.ranking-invite p { margin-bottom: 1.1rem; color: #536274; font-size: .79rem; line-height: 1.65; }

.admin-auth-page { min-height: calc(100vh - 240px); padding: 3.5rem 1.5rem 5rem; display: grid; place-items: center; }.admin-auth-card { width: min(460px, 100%); padding: 2.2rem; border-radius: 14px; background: white; box-shadow: var(--shadow); }.admin-auth-card h1 { margin-bottom: .8rem; font-size: 2.6rem; font-weight: 830; }.admin-auth-card > p:not(.eyebrow) { margin-bottom: 1.5rem; color: var(--muted); font-size: .83rem; line-height: 1.65; }.admin-form { display: grid; gap: 1rem; }.install-hint { margin: 1rem 0 0; color: var(--muted); font-size: .7rem; }.install-hint a { color: var(--blue); font-weight: 800; }
.admin-page { width: min(1120px, calc(100% - 3rem)); margin: 2.2rem auto 5rem; }.admin-topbar { padding-bottom: 2rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem; border-bottom: 1px solid var(--line); }.admin-topbar h1 { margin-bottom: .55rem; font-size: clamp(2.6rem, 4vw, 4rem); font-weight: 830; }.admin-topbar p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .84rem; }.admin-metrics { margin: 1.5rem 0 4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }.admin-metrics > div { padding: 1.15rem; border-radius: 9px; background: white; }.admin-metrics span, .admin-metrics small { display: block; color: var(--muted); font-size: .65rem; font-weight: 750; }.admin-metrics strong { display: block; margin: .25rem 0; font-size: 2rem; letter-spacing: -.08em; }.admin-pending .section-heading { margin-bottom: 1.5rem; }.moderation-list { display: grid; gap: 1rem; }.moderation-item { padding: 1.3rem; border-radius: 11px; background: white; }.moderation-head { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: #7d8896; font-size: .65rem; font-weight: 700; }.moderation-head span:last-child { margin-left: auto; }.moderation-body { margin: 1rem 0; display: grid; grid-template-columns: 1fr 200px; gap: 1.5rem; }.moderation-body h2 { margin-bottom: .7rem; font-size: 1.5rem; font-weight: 820; }.moderation-body p { margin-bottom: .85rem; color: #586577; font-size: .8rem; line-height: 1.65; white-space: normal; }.moderation-body figure { margin: 0; }.moderation-body figure img { width: 100%; height: 165px; object-fit: cover; border-radius: 7px; }.moderation-actions { display: flex; gap: .55rem; }.moderation-actions button { padding: .58rem .8rem; border: 0; border-radius: 6px; font: inherit; font-size: .71rem; font-weight: 800; cursor: pointer; }.approve-button { background: #dff4d4; color: #276238; }.reject-button { background: #f1f2f4; color: #5c6878; }

.image-placeholder { display: grid; place-items: center; min-height: 160px; background: #dbe2e8; color: #536273; font-size: .72rem; font-weight: 800; letter-spacing: .08em; line-height: 1.4; text-align: center; }

.poll-option-index { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--white); font-size: .57rem; }

.admin-content-section { margin-top: 2rem; }.admin-content-filters { display: flex; flex-wrap: wrap; gap: .55rem; }.admin-content-filters a { padding: .52rem .75rem; border: 1px solid var(--line); border-radius: 99px; color: #627084; font-size: .7rem; font-weight: 800; }.admin-content-filters a.active, .admin-content-filters a:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }.admin-content-count { margin: 1.1rem 0 .7rem; color: var(--muted); font-size: .72rem; font-weight: 750; }.admin-content-list { display: grid; gap: .75rem; }.admin-content-item { padding: 1.15rem 1.25rem; border-radius: 10px; background: var(--white); }.admin-content-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }.status-badge { padding: .28rem .48rem; border-radius: 99px; font-size: .6rem; font-weight: 850; }.status-approved { background: #dff4d4; color: #276238; }.status-pending { background: #fff0d4; color: #8a5b13; }.status-rejected { background: #f0f1f3; color: #647082; }.admin-content-main { margin-top: .7rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem; }.admin-content-main h2 { margin: 0 0 .4rem; font-size: 1.2rem; font-weight: 820; }.admin-content-main p { margin: 0; color: var(--muted); font-size: .7rem; }.admin-content-actions { display: flex; flex-wrap: wrap; gap: .5rem; }.admin-content-actions .button, .delete-button { min-height: 36px; padding: .52rem .68rem; font-size: .68rem; }.delete-button { border: 0; border-radius: 6px; background: #fde5de; color: #9a3c27; font-family: inherit; font-weight: 850; cursor: pointer; }.admin-edit-card { width: min(820px, 100%); margin: 2rem 0; padding: clamp(1.2rem, 3vw, 2.2rem); border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }.admin-create-page .admin-edit-card { margin-left: auto; margin-right: auto; }.community-author-note { margin-bottom: 1.4rem; padding: .8rem .9rem; display: grid; gap: .22rem; border-radius: 8px; background: #e7f4f1; color: #315c56; }.community-author-note strong { font-size: .77rem; }.community-author-note span { font-size: .66rem; line-height: 1.5; }.admin-create-page .admin-content-filters { margin-bottom: 1.3rem; }.admin-create-error { margin-bottom: 1.1rem; }.edit-publication-form { gap: 1.1rem; }.edit-media-section { display: grid; gap: .55rem; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; }.edit-media-section > strong { font-size: .78rem; }.edit-media-section > small { color: var(--muted); font-size: .67rem; }.edit-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }.edit-media-grid figure { margin: 0; padding: .45rem; border-radius: 7px; background: #f4f6f7; }.edit-media-grid img { width: 100%; height: 120px; object-fit: cover; border-radius: 5px; }.edit-media-grid .checkbox-line { margin-top: .45rem; font-size: .63rem !important; }.edit-single-image { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: 8px; }.edit-single-image img { width: 180px; height: 120px; object-fit: cover; border-radius: 6px; }.edit-single-image > span { color: var(--muted); font-size: .72rem; }

.faq-media { display: grid; align-content: start; gap: .75rem; }.faq-image-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: .45rem; }.faq-image-grid.multiple { grid-template-columns: repeat(2, 1fr); }.faq-image-grid img { width: 100%; height: 180px; display: block; object-fit: cover; border-radius: 8px; }.faq-image-grid.multiple img { height: 108px; }.faq-image-count { position: absolute; right: .5rem; bottom: .5rem; padding: .3rem .45rem; border-radius: 99px; background: rgba(7, 20, 35, .82); color: white; font-size: .58rem; font-weight: 800; pointer-events: none; }.faq-video { overflow: hidden; aspect-ratio: 16 / 9; border-radius: 8px; background: var(--ink); }.faq-video iframe { width: 100%; height: 100%; display: block; border: 0; }.moderation-media { display: grid; align-content: start; gap: .65rem; }.moderation-image-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; }.moderation-image-grid img { width: 100%; height: 88px; object-fit: cover; border-radius: 6px; }.admin-video-link { padding: .5rem .55rem; border-radius: 6px; background: #edf6f3; color: var(--blue); font-size: .67rem; font-weight: 800; text-align: center; }

.charge-calculator { margin: 1.1rem 0 .85rem; padding: 1rem; display: grid; gap: .75rem; border: 1px solid #c6d8e3; border-radius: 9px; background: #f4fafc; }.charge-calculator strong { color: #17395b; font-size: .8rem; }.charge-calculator > p, .charge-calculator > small { margin: 0; color: #536577; font-size: .7rem; line-height: 1.55; }.charge-calculator-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }.charge-calculator-fields label { display: grid; gap: .32rem; color: #536577; font-size: .65rem; font-weight: 800; }.charge-calculator-fields input, .charge-calculator-fields select { width: 100%; min-height: 37px; padding: .42rem .5rem; border: 1px solid #b9cbd7; border-radius: 6px; background: white; color: var(--ink); font: 700 .72rem inherit; }.charge-calculator-result { padding: .65rem .7rem; border-radius: 6px; background: #e2f0f7; color: #17395b; font-size: .72rem; font-weight: 800; line-height: 1.5; }

.pressure-calculator { margin: 1.1rem 0 .85rem; padding: 1rem; display: grid; gap: .72rem; border: 1px solid #f0c9bd; border-radius: 9px; background: #fff8f5; }.pressure-calculator strong { color: #8a3f2d; font-size: .8rem; }.pressure-calculator > p, .pressure-calculator > small { margin: 0; color: #705b53; font-size: .7rem; line-height: 1.55; }.pressure-calculator > label { display: grid; gap: .32rem; max-width: 200px; color: #705b53; font-size: .65rem; font-weight: 800; }.pressure-calculator input { width: 100%; min-height: 37px; padding: .42rem .5rem; border: 1px solid #e3b9ac; border-radius: 6px; background: white; color: var(--ink); font: 700 .72rem inherit; }.pressure-calculator-result { padding: .65rem .7rem; border-radius: 6px; background: #fbe4dc; color: #7b3c2c; font-size: .72rem; font-weight: 800; line-height: 1.5; }.pressure-reference { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }.pressure-reference div { padding: .58rem; border-radius: 6px; background: white; border: 1px solid #f0d3ca; }.pressure-reference b, .pressure-reference span { display: block; }.pressure-reference b { margin-bottom: .25rem; color: #8a3f2d; font-size: .74rem; }.pressure-reference span { color: #705b53; font-size: .62rem; line-height: 1.45; }

.polls-hero { background: #fce9df; }.polls-list { display: grid; gap: 1rem; }.poll-page-card { display: grid; grid-template-columns: minmax(230px, .85fr) minmax(215px, .75fr) minmax(260px, 1fr); overflow: hidden; border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }.poll-page-card.closed { grid-template-columns: minmax(250px, .85fr) minmax(320px, 1.15fr); }.poll-page-copy { padding: 1.7rem; background: #f7f8f8; }.poll-page-copy h2 { margin: .85rem 0 .65rem; font-size: 1.65rem; font-weight: 830; letter-spacing: -.04em; }.poll-page-copy p { color: #5c697a; font-size: .8rem; line-height: 1.65; }.poll-instruction { margin-top: 1.1rem; color: var(--blue) !important; font-weight: 750; }.poll-voted-message { margin-top: 1.1rem; color: #276238; font-size: .74rem; font-weight: 800; }.poll-page-vote { padding: 1.4rem; border-left: 1px solid var(--line); }.poll-page-vote form + form { margin-top: .5rem; }.poll-page-option { width: 100%; min-height: 44px; padding: .6rem .72rem; display: flex; justify-content: space-between; align-items: center; gap: .7rem; border: 1px solid var(--line); border-radius: 7px; background: var(--white); color: var(--ink); font: 750 .75rem/1.3 inherit; text-align: left; cursor: pointer; }.poll-page-option:hover, .poll-page-option.selected { border-color: var(--ink); background: #edf6f3; }.poll-page-option:disabled, .poll-option-button:disabled, .map-choice:disabled { cursor: default; }.poll-page-option b { color: var(--blue); font-size: .62rem; }.poll-page-results { padding: 1.6rem; border-left: 1px solid var(--line); }.empty-state { padding: 2.5rem; border-radius: 11px; background: var(--white); text-align: center; }.empty-state h2 { margin-bottom: .6rem; }.empty-state p { color: var(--muted); font-size: .82rem; }

.admin-topbar-actions { display: flex; flex-wrap: wrap; gap: .55rem; }.admin-polls-layout { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(300px, .78fr) minmax(380px, 1.22fr); align-items: start; gap: 2rem; }.create-poll-card { padding: 1.5rem; border-radius: 11px; background: var(--white); box-shadow: var(--shadow); }.create-poll-card h2 { margin: .8rem 0 1.5rem; font-size: 1.65rem; font-weight: 830; letter-spacing: -.04em; }.admin-form { display: grid; gap: 1rem; }.admin-form label, .poll-admin-update label { display: grid; gap: .45rem; color: var(--ink); font-size: .73rem; font-weight: 800; }.admin-form label small { color: var(--muted); font-size: .62rem; font-weight: 650; }.admin-form input:not([type="checkbox"]), .admin-form textarea, .admin-form select, .poll-admin-update select { width: 100%; padding: .7rem .75rem; border: 1px solid #ccd5db; border-radius: 6px; outline: none; background: var(--white); color: var(--ink); font: 400 .78rem/1.5 inherit; }.admin-form textarea { min-height: 88px; resize: vertical; }.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus, .poll-admin-update select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(32, 101, 158, .12); }.checkbox-line { display: flex !important; grid-template-columns: 18px 1fr; align-items: center; gap: .55rem !important; color: #536274 !important; cursor: pointer; }.checkbox-line input { width: 16px; height: 16px; accent-color: var(--blue); }.admin-polls-list { display: grid; gap: 1rem; }.admin-polls-list .section-heading { margin-bottom: .5rem; }.admin-poll-item { padding: 1.35rem; border-radius: 11px; background: var(--white); }.admin-poll-item-head h2 { margin: .7rem 0 .4rem; font-size: 1.15rem; font-weight: 820; }.admin-poll-item-head p { color: var(--muted); font-size: .7rem; }.home-badge { margin-left: .45rem; padding: .25rem .42rem; border-radius: 99px; background: #dff4d4; color: #276238; font-size: .59rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }.admin-poll-options { margin: 1.1rem 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }.admin-poll-options span { padding: .52rem .6rem; display: flex; justify-content: space-between; gap: .6rem; border-radius: 5px; background: #f1f4f5; color: #596778; font-size: .69rem; font-weight: 700; }.admin-poll-options b { color: var(--ink); }.poll-admin-update { padding-top: 1rem; display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; border-top: 1px solid var(--line); }.poll-admin-update label:first-of-type { min-width: 125px; }.poll-admin-update .button { padding: .62rem .75rem; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }.hero-image-wrap { min-height: 440px; }.participation-grid, .split-showcase, .ranking-table-wrap { grid-template-columns: 1fr; gap: 2.5rem; }.ranking-panel { max-width: 560px; }.category-grid, .faq-grid { grid-template-columns: 1fr 1fr; }.category-card:last-child { grid-column: span 2; }.gallery-grid { grid-template-columns: 1.3fr 1fr; }.gallery-home-item:last-child { grid-column: span 2; }.contribute-layout { grid-template-columns: 1fr; gap: 2rem; }.contribution-tabs { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }.contribution-tabs > a { padding: .8rem; border: 1px solid var(--line); border-radius: 8px; }.contribution-tabs > a:last-of-type { border-bottom: 1px solid var(--line); }.moderation-note { grid-column: span 3; margin-top: 0; }.full-tutorial { grid-template-columns: 260px 1fr; }.admin-metrics { grid-template-columns: 1fr 1fr; }.home-poll-card, .poll-page-card, .admin-polls-layout { grid-template-columns: 1fr; }.poll-page-vote, .poll-page-results { border-top: 1px solid var(--line); border-left: 0; }.admin-polls-layout { gap: 1.5rem; }
}

@media (max-width: 640px) {
  .nav-shell { width: min(100% - 2rem, 1240px); height: 70px; }.main-nav { display: none; }.nav-cta { margin-left: auto; }.hero-home, .section, .page-hero, .cta-band, .site-footer, .admin-page { width: min(100% - 2rem, 1240px); }.hero-home { margin-bottom: 5rem; border-radius: 14px; }.hero-copy { padding: 3rem 1.5rem; }.hero-copy h1, .contribute-hero h1 { font-size: clamp(3rem, 15vw, 4.5rem); }.hero-text { font-size: .88rem; }.hero-stats { gap: .9rem; flex-wrap: wrap; }.hero-image-wrap { min-height: 290px; }.hero-image-wrap > p { right: 1rem; bottom: .8rem; font-size: .64rem; }.hero-label { margin-bottom: 1rem; }.section { margin-bottom: 4.5rem; }.row-heading { display: block; }.row-heading .text-link { display: inline-block; margin-top: 1rem; }.participation-intro { margin-bottom: 5rem; }.participation-grid { gap: 2rem; }.participation-grid h2 { font-size: 2.3rem; }.category-grid, .faq-grid, .gallery-grid { grid-template-columns: 1fr; }.category-card:last-child, .gallery-home-item:last-child { grid-column: auto; }.category-card { min-height: 260px; }.card-icon { margin-top: 3.2rem; }.content-section { padding: 4rem 1rem; }.faq-preview { min-height: 240px; }.split-showcase { gap: 3.5rem; }.feature-tutorial { grid-template-columns: 1fr; }.feature-thumbnail { width: 100%; height: 190px; }.gallery-home-item, .gallery-home-item:first-child { min-height: 310px; }.home-model-banner { min-height: 390px; margin-bottom: 4.5rem; }.home-model-banner > img { object-position: 58% center; }.home-model-copy { width: min(300px, 76%); padding: 1.5rem; }.cta-band { margin-bottom: 3rem; display: block; }.cta-band .button { margin-top: 1.3rem; }.site-footer { grid-template-columns: 1fr; gap: 1.5rem; }.footer-links { justify-content: start; }.page-hero { margin-top: 1rem; margin-bottom: 2.5rem; padding: 2rem 1.3rem; }.page-hero h1 { font-size: 3.1rem; }.full-faq { grid-template-columns: 1fr; gap: 1rem; }.full-faq figure { max-width: 100%; }.full-faq figure img { height: 210px; }.vote-form { position: static; margin-top: 1rem; }.full-tutorial { grid-template-columns: 1fr; gap: 1rem; }.full-tutorial figure img { height: 210px; }.gallery-listing { columns: 1; }.contribute-hero { padding: 3rem 1rem; }.contribute-layout { margin-top: 2.5rem; }.contribution-tabs { grid-template-columns: 1fr 1fr 1fr; }.contribution-tabs > a { grid-template-columns: 1fr; gap: .25rem; }.moderation-note { grid-column: span 3; }.contribution-form-wrap { padding: 1.2rem; }.form-row.two-columns { grid-template-columns: 1fr; }.ranking-row { grid-template-columns: 55px 1fr 64px; gap: .5rem; }.ranking-row > span:nth-child(3) { display: none; }.ranking-row.heading > span:nth-child(3) { display: none; }.ranking-row strong { text-align: right; }.admin-page { margin-top: 1.5rem; }.admin-topbar { display: block; }.admin-topbar .button { margin-top: 1rem; }.admin-metrics { margin-bottom: 3rem; gap: .6rem; }.moderation-head span:last-child { margin-left: 0; }.moderation-body { grid-template-columns: 1fr; gap: 1rem; }.moderation-body figure img { height: 210px; }.moderation-actions { flex-wrap: wrap; }.admin-auth-card { padding: 1.4rem; }.hero-image-wrap { min-height: 420px; }.hero-poll-status { left: 1rem; bottom: .9rem; }.hero-poll-status span { display: block; }.home-poll-options, .poll-results, .poll-page-copy, .poll-page-vote, .poll-page-results { padding: 1.2rem; }.admin-poll-options { grid-template-columns: 1fr; }.poll-admin-update { display: grid; grid-template-columns: 1fr; align-items: stretch; }.poll-admin-update .button { width: 100%; }.admin-topbar-actions { margin-top: 1rem; }.admin-topbar-actions .button { margin-top: 0; }
}

@media (max-width: 640px) {
  .faq-image-grid img { height: 235px; }.faq-image-grid.multiple img { height: 145px; }.moderation-image-grid img { height: 125px; }
}

@media (max-width: 640px) {
  .admin-content-main { display: grid; align-items: stretch; }.admin-content-actions { margin-top: .3rem; }.admin-content-actions .button, .delete-button { flex: 1; }.edit-media-grid { grid-template-columns: 1fr 1fr; }.edit-single-image { grid-template-columns: 1fr; }.edit-single-image img { width: 100%; height: 190px; }
}

.gallery-item-images { position: relative; display: grid; gap: .35rem; }.gallery-item-images.multiple { grid-template-columns: repeat(2, minmax(0, 1fr)); }.lightbox-trigger { min-width: 0; min-height: 0; padding: 0; display: block; overflow: hidden; border: 0; background: #e4e8eb; cursor: zoom-in; }.gallery-item-images .lightbox-trigger:first-child { grid-column: 1 / -1; }.gallery-item-images .lightbox-trigger img { width: 100%; max-height: 490px; display: block; object-fit: cover; transition: transform .25s ease; }.gallery-item-images.multiple .lightbox-trigger:first-child img { height: 300px; }.gallery-item-images.multiple .lightbox-trigger:not(:first-child) img { height: 155px; }.lightbox-trigger:hover img, .lightbox-trigger:focus-visible img { transform: scale(1.035); }.lightbox-trigger:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }.gallery-photo-count { position: absolute; right: .65rem; bottom: .65rem; padding: .35rem .5rem; border-radius: 99px; background: rgba(7, 20, 35, .82); color: white; font-size: .64rem; font-weight: 800; pointer-events: none; }.gallery-admin-preview { width: 126px; display: grid; grid-template-columns: repeat(2, 1fr); gap: .25rem; }.gallery-admin-preview img { width: 100%; height: 53px; object-fit: cover; border-radius: 5px; }.gallery-admin-preview .more { display: grid; place-items: center; min-height: 53px; border-radius: 5px; background: #e8edef; color: #536274; font-size: .64rem; font-weight: 850; }.admin-content-item.with-preview .admin-content-main { align-items: center; }.lightbox-open { overflow: hidden; }.lightbox-overlay { position: fixed; z-index: 100; inset: 0; padding: 1.5rem; display: grid; place-items: center; background: rgba(4, 13, 24, .86); }.lightbox-overlay[hidden] { display: none; }.lightbox-dialog { position: relative; width: min(1120px, 100%); max-height: 100%; display: grid; justify-items: center; gap: .65rem; }.lightbox-image { max-width: 100%; max-height: calc(100vh - 6.5rem); display: block; object-fit: contain; border-radius: 7px; box-shadow: 0 20px 70px rgba(0, 0, 0, .45); }.lightbox-caption { max-width: 90%; margin: 0; color: white; font-size: .76rem; font-weight: 700; text-align: center; }.lightbox-close { position: absolute; top: .35rem; right: .35rem; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(8, 20, 34, .78); color: white; font: 400 1.8rem/1 Arial, sans-serif; cursor: pointer; }.lightbox-close:hover, .lightbox-close:focus-visible { background: white; color: var(--ink); }
.full-tutorial.no-media { grid-template-columns: 1fr; }.tutorial-media { position: relative; min-width: 0; }.tutorial-image-grid { display: grid; gap: .4rem; }.tutorial-image-grid.multiple { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tutorial-image-grid .lightbox-trigger:first-child { grid-column: 1 / -1; }.tutorial-image-grid img { width: 100%; height: 280px; display: block; object-fit: cover; }.tutorial-image-grid.multiple .lightbox-trigger:first-child img { height: 185px; }.tutorial-image-grid.multiple .lightbox-trigger:not(:first-child) img { height: 115px; }.tutorial-image-count { position: absolute; right: .55rem; bottom: .55rem; padding: .32rem .46rem; border-radius: 99px; background: rgba(7, 20, 35, .82); color: white; font-size: .6rem; font-weight: 800; pointer-events: none; }

.video-lightbox-trigger { min-height: 128px; padding: 1rem; display: grid; place-content: center; gap: .45rem; border: 0; border-radius: 8px; background: linear-gradient(135deg, #102238, #1f557c); color: white; font: 800 .72rem/1.35 inherit; cursor: pointer; }.video-lightbox-trigger span { width: 34px; height: 34px; display: grid; place-items: center; margin: 0 auto; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; padding-left: 2px; }.video-lightbox-trigger:hover, .video-lightbox-trigger:focus-visible { background: linear-gradient(135deg, #17395b, #24719f); }.lightbox-video { width: min(100%, 960px); aspect-ratio: 16 / 9; border: 0; border-radius: 7px; background: #000; box-shadow: 0 20px 70px rgba(0, 0, 0, .45); }.lightbox-nav { position: absolute; top: calc(50% - 24px); z-index: 1; width: 44px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 7px; background: rgba(8, 20, 34, .78); color: white; font: 400 2.3rem/1 Arial, sans-serif; cursor: pointer; }.lightbox-nav:hover, .lightbox-nav:focus-visible { background: white; color: var(--ink); }.lightbox-nav[hidden] { display: none; }.lightbox-prev { left: .55rem; }.lightbox-next { right: .55rem; }

@media (max-width: 640px) { .gallery-item-images.multiple .lightbox-trigger:first-child img { height: 270px; }.gallery-item-images.multiple .lightbox-trigger:not(:first-child) img { height: 135px; }.tutorial-image-grid img { height: 230px; }.tutorial-image-grid.multiple .lightbox-trigger:first-child img { height: 185px; }.tutorial-image-grid.multiple .lightbox-trigger:not(:first-child) img { height: 115px; }.lightbox-overlay { padding: .8rem; }.lightbox-image { max-height: calc(100vh - 5rem); }.gallery-admin-preview { width: 100%; max-width: 150px; } }

@media (max-width: 640px) {
  .nav-shell { height: auto; min-height: 70px; padding: .7rem 0 .55rem; flex-wrap: wrap; row-gap: .55rem; }
  .main-nav { width: 100%; order: 3; display: flex; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 8px; }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { flex: 0 0 auto; min-height: 32px; padding: .38rem .48rem; font-size: .64rem; }
  .main-nav a svg { width: 13px; height: 13px; }
  .nav-cta { margin-left: auto; }
}