.gallery-topbar { min-height: 5rem; display: flex; align-items: center; position: sticky; top: 0; z-index: 1020; }
.gallery-mark { width: 1.1rem; height: 1.1rem; display: inline-block; background: currentColor; clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%, 28% 37%, 28% 64%, 50% 76%, 72% 64%, 72% 37%, 50% 25%, 28% 37%, 5% 25%); }
.gallery-shell { min-height: calc(100vh - 5rem); display: grid; grid-template-columns: 14rem minmax(0, 1fr); }
.gallery-sidebar { position: sticky; top: 5rem; height: calc(100vh - 5rem); background: var(--bs-tertiary-bg); }
.gallery-sidebar .nav-link { color: var(--bs-body-color); border-radius: .65rem; padding: .55rem .75rem; }
.gallery-sidebar .nav-link.active { background: var(--bs-secondary-bg); font-weight: 600; }
.gallery-nav-label { color: var(--bs-secondary-color); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 1.5rem .75rem .35rem; }
.gallery-main { width: min(100%, 68rem); padding: clamp(2rem, 5vw, 5rem); }
.gallery-intro { margin-bottom: 3rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; align-items: start; }
.gallery-entry { min-width: 0; scroll-margin-top: 7rem; }
.gallery-entry-title { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .85rem; font-weight: 500; letter-spacing: .04em; color: var(--bs-secondary-color); }
.tool-option-list fieldset { padding: 0; }
.tool-option { cursor: pointer; transition: background-color .15s ease; }
.tool-option + .tool-option { border-top: var(--bs-border-width) solid var(--bs-border-color); }
.tool-option:hover, .tool-option:has(input:focus-visible) { background: var(--bs-tertiary-bg); }
.tool-option:has(input:checked) { background: var(--bs-secondary-bg); }
.question-progress { height: .35rem; border-radius: 999px; background: var(--bs-secondary-bg); flex: 1; }
.question-progress.active { background: var(--bs-body-color); }
.weather-card { background: radial-gradient(circle at 75% 18%, rgba(255,255,255,.5), transparent 12%), linear-gradient(145deg, #7186a3, #40536d 55%, #263649); }
.weather-temperature { font-size: clamp(3.5rem, 8vw, 5rem); font-weight: 300; line-height: 1; letter-spacing: -.07em; }
.weather-temperature span { font-size: .4em; vertical-align: top; letter-spacing: 0; }
.weather-forecast { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.25); }
.weather-forecast span, .weather-forecast strong, .weather-forecast small { display: block; }
.weather-forecast span { text-transform: uppercase; opacity: .75; margin-bottom: .35rem; }
.weather-forecast small { opacity: .65; }
[data-plan] .progress { height: .45rem; }
[data-plan] input:checked + span strong, [data-plan] input:checked + span { text-decoration: line-through; color: var(--bs-secondary-color); }
.slider-row { position: relative; padding: .5rem 0 1.5rem; }
.slider-row > div { display: flex; justify-content: space-between; font-size: .85rem; }
.slider-row output { color: var(--bs-secondary-color); }
.stat-tile { padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: .8rem; }
.stat-tile small, .stat-tile strong, .stat-tile span { display: block; }
.stat-tile small { color: var(--bs-secondary-color); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.stat-tile strong { font-size: 1.5rem; margin: .35rem 0; }
.carousel-poster { min-height: 19rem; display: flex; align-items: end; padding: 2rem; color: #fff; }
.carousel-poster h3 { font-size: 2rem; font-weight: 700; }
.poster-deadwood { background: linear-gradient(0deg, rgba(20,10,4,.9), transparent), linear-gradient(135deg, #83633f, #332318); }
.poster-wire { background: linear-gradient(0deg, rgba(5,16,24,.9), transparent), linear-gradient(135deg, #54687a, #172633); }
.poster-peaks { background: linear-gradient(0deg, rgba(20,5,16,.9), transparent), linear-gradient(135deg, #8e4557, #293854); }
[data-sort-table] th button { border: 0; background: none; color: inherit; font-weight: 600; white-space: nowrap; }
[data-sort-table] th, [data-sort-table] td { padding: .9rem 1rem; }
.image-grid { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: repeat(2, 8rem); gap: .25rem; }
.image-grid button { border: 0; padding: 0; overflow: hidden; background: var(--bs-secondary-bg); }
.image-grid button:first-child { grid-row: 1 / 3; }
.image-grid img, .single-image { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.image-grid button:hover img { transform: scale(1.04); }
.audio-cover { height: 9rem; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.5), transparent 20%), linear-gradient(135deg, #1d4030, #75936f); }
.audio-play { width: 3rem; height: 3rem; flex: 0 0 auto; }
.product-thumb { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: .75rem; font-size: 1.4rem; }
.product-thumb.coffee { background: #ead8c2; color: #684626; }
.product-thumb.pour { background: #d8e4e8; color: #3d5963; }
.summary-list > div, .message-meta > div { display: flex; justify-content: space-between; gap: 2rem; padding: .5rem 0; }
.summary-list dt, .message-meta dt { color: var(--bs-secondary-color); font-weight: 500; }
.summary-list dd, .message-meta dd { margin: 0; text-align: right; }
.summary-list .total { border-top: 1px solid var(--bs-border-color); margin-top: .5rem; padding-top: 1rem; font-size: 1.1rem; font-weight: 700; }
.link-preview-image { height: 10rem; background: linear-gradient(25deg, rgba(12,36,49,.2), rgba(12,36,49,.75)), url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1000&q=80') center/cover; }
.avatar-stack { display: flex; }
.avatar-stack span { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--bs-body-bg); background: var(--bs-secondary-bg); font-size: .65rem; font-weight: 700; margin-left: -.35rem; }
.avatar-stack span:first-child { margin-left: 0; }
.approval-icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .8rem; color: var(--bs-primary); background: var(--bs-primary-bg-subtle); font-size: 1.25rem; }
.message-meta { border-block: 1px solid var(--bs-border-color); padding-block: .5rem; }
.message-body { line-height: 1.55; padding-top: 1rem; }
.tracker-list li { display: flex; gap: 1rem; position: relative; padding-bottom: 1.5rem; }
.tracker-list li::after { content: ''; position: absolute; top: 1.25rem; bottom: .15rem; left: .45rem; border-left: 2px solid var(--bs-border-color); }
.tracker-list li:last-child::after { display: none; }
.tracker-list li > i, .tracker-list li > .spinner-border { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: .15rem; z-index: 1; background: var(--bs-body-bg); }
.tracker-list li.complete > i { color: var(--bs-success); }
.tracker-list small { display: block; color: var(--bs-secondary-color); }
.preference-label { color: var(--bs-secondary-color); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--bs-border-color); padding-bottom: .5rem; margin-bottom: 1rem; }
.bar-chart { height: 14rem; display: flex; align-items: end; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--bs-border-color); background: repeating-linear-gradient(to top, transparent 0 24%, var(--bs-border-color-translucent) 25%); }
.bar-chart > div { flex: 1; height: 100%; display: flex; align-items: end; justify-content: center; gap: .18rem; position: relative; padding-bottom: 1.5rem; }
.bar-chart i { width: 100%; height: var(--revenue); background: var(--bs-primary); border-radius: .25rem .25rem 0 0; position: relative; }
.bar-chart i::after { content: ''; position: absolute; bottom: 0; right: 0; width: 45%; height: var(--expenses); background: var(--bs-secondary); transform: translateX(55%); border-radius: .2rem .2rem 0 0; }
.bar-chart span { position: absolute; bottom: 0; font-size: .7rem; }
.legend { display: inline-block; width: .65rem; height: .65rem; border-radius: 2px; }
.legend.revenue { background: var(--bs-primary); } .legend.expenses { background: var(--bs-secondary); }
.social-avatar { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-weight: 700; }
.avatar-x { background: #d8e5ed; color: #294a5f; } .avatar-ig { background: #f5d4df; color: #71364b; } .avatar-in { background: #d5e4f4; color: #25507a; }
.social-action { border: 0; background: none; padding: 0; color: var(--bs-secondary-color); }
.social-action.liked { color: var(--bs-danger); }
.instagram-image { height: 22rem; background: linear-gradient(0deg, rgba(30,18,10,.2), transparent), url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&w=1000&q=85') center/cover; }
.code-card, .terminal-card { background: #101318; color: #e5e7eb; border: 1px solid #2a2f38; }
.code-toolbar, .terminal-toolbar { display: flex; align-items: center; padding: .75rem 1rem; color: #aab1bd; background: #171b22; border-bottom: 1px solid #2a2f38; font-family: ui-monospace, monospace; font-size: .75rem; }
.code-card pre, .terminal-card pre { margin: 0; padding: 1.25rem; overflow: auto; color: inherit; font-size: .78rem; line-height: 1.7; }
.copy-button { border: 0; background: transparent; color: inherit; margin-left: auto; }
.line { display: block; padding-inline: .35rem; } .line.added { color: #a7f3d0; background: rgba(16,185,129,.12); } .line.removed { color: #fecaca; background: rgba(239,68,68,.12); }
.terminal-dot { width: .65rem; height: .65rem; border-radius: 50%; margin-right: .4rem; } .terminal-dot.red { background:#ff5f57; } .terminal-dot.yellow { background:#febc2e; } .terminal-dot.green { background:#28c840; }
.terminal-path { color: #7dd3fc; } .terminal-success { color: #86efac; }
.map-canvas { height: 18rem; position: relative; overflow: hidden; background: linear-gradient(30deg, transparent 49%, rgba(255,255,255,.6) 50% 53%, transparent 54%), linear-gradient(120deg, #d9e3d2 0 35%, #c5d7e3 36% 52%, #e8e1d2 53%); }
.map-road { position: absolute; height: 9px; width: 130%; background: #fff; border: 1px solid #c9c3b8; transform-origin: center; } .road-one { top: 45%; left: -15%; transform: rotate(-14deg); } .road-two { top: 56%; left: -20%; transform: rotate(38deg); }
.map-marker { position: absolute; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--bs-primary); color: #fff; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.map-marker::first-letter { transform: rotate(45deg); }
.map-controls { position: absolute; top: 1rem; right: 1rem; display: grid; box-shadow: 0 1px 5px rgba(0,0,0,.25); }
.map-controls button { width: 2rem; height: 2rem; border: 0; background: #fff; color: #111; font-size: 1.2rem; }
.single-image { height: 20rem; }
.video-preview { height: 19rem; display: grid; place-items: center; position: relative; color: #fff; background: linear-gradient(135deg, rgba(12,17,30,.2), rgba(12,17,30,.55)), url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1000&q=85') center/cover; }
.video-preview > i { font-size: 4rem; filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
@media (max-width: 1199.98px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-entry { max-width: 36rem; } }
@media (max-width: 991.98px) { .gallery-shell { display: block; } .gallery-main { margin-inline: auto; } }
@media (max-width: 575.98px) { .gallery-topbar { min-height: 4.25rem; } .gallery-main { padding: 2rem 1rem; } .gallery-intro { margin-bottom: 2rem; } }

@media (max-width: 767.98px) { .gallery-primary-nav { width: 100%; gap: .25rem; } .gallery-primary-nav .nav-link { padding: .55rem .65rem; font-size: .8rem; } }