:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: #FFF4E2; }
a { color: #0B7078; }
a:hover { color: #D93F26; }
input, textarea, button, select { font: inherit; }
button { border: none; background: none; }

@keyframes vsSpin { to { transform: rotate(360deg); } }
@keyframes vsFloat { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(-4deg); } }

[data-vs-rail]::-webkit-scrollbar { height: 8px; }
[data-vs-rail]::-webkit-scrollbar-track { background: rgba(22,48,42,0.08); border-radius: 999px; }
[data-vs-rail]::-webkit-scrollbar-thumb { background: rgba(22,48,42,0.28); border-radius: 999px; }

.vs-root { container-type: inline-size; width: 100%; background: #FFF4E2; background-image: repeating-linear-gradient(92deg, rgba(139,104,58,0.045) 0 2px, rgba(255,244,226,0) 2px 9px), radial-gradient(circle at 12% 4%, rgba(251,165,31,0.16), rgba(255,244,226,0) 42%); color: #16302A; font-family: 'Nunito Sans', system-ui, sans-serif; overflow: hidden; }

.vs-logo { width: clamp(38px, 6cqi, 46px); height: clamp(38px, 6cqi, 46px); border-radius: 50%; object-fit: cover; display: block; border: 2px solid #FFFDF7; box-shadow: 0 2px 6px rgba(16,69,59,0.25); }

.vs-placeholder { position: absolute; inset: 6px; border-radius: 50%; background: repeating-linear-gradient(45deg, #F7E3C4 0 8px, #FFF4E2 8px 16px); display: grid; place-items: center; font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 0.06em; color: #8A7355; text-align: center; padding: 0 14px; line-height: 1.4; }
.vs-media { position: relative; width: 100%; aspect-ratio: 1; display: block; }
.vs-media img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: cover; border-radius: 50%; }
.vs-media img.vs-broken { display: none; }
.vs-media .vs-placeholder.vs-hidden { display: none; }

.vs-navlink { color: #16302A; text-decoration: none; }
.vs-navlink:hover { color: #0B7078; }
.vs-iglink:hover { background: #FBA51F !important; color: #16302A !important; }
.vs-btn-primary { display: inline-flex; align-items: center; gap: 10px; background: #D93F26; color: #FFF7EE; text-decoration: none; font-weight: 700; font-size: clamp(15px, 1.8cqi, 18px); padding: 15px 30px; border-radius: 999px; box-shadow: 0 10px 0 -2px rgba(154,45,26,0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.vs-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 0 -2px rgba(154,45,26,0.35); color: #FFF7EE; }
.vs-btn-outline { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #16302A; text-decoration: none; font-weight: 700; font-size: clamp(15px, 1.8cqi, 18px); padding: 15px 28px; border-radius: 999px; border: 2px solid #16302A; transition: background 0.25s ease, transform 0.25s ease; }
.vs-btn-outline:hover { background: #FBA51F; transform: translateY(-3px); color: #16302A; }

.vs-rail-btn { cursor: pointer; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #16302A; background: #FFFDF7; color: #16302A; font-size: 20px; font-weight: 700; display: grid; place-items: center; transition: transform 0.2s ease, background 0.2s ease; }
.vs-rail-btn:hover { background: #FBA51F; transform: translateY(-2px); }

.vs-pinned-card { flex: 0 0 clamp(240px, 26cqi, 320px); text-decoration: none; color: #FFF7EE; background: #10453B; border-radius: clamp(26px, 3.4cqi, 40px); padding: clamp(20px, 2.6cqi, 30px); display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; box-shadow: 0 22px 44px -28px rgba(16,69,59,0.8); transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1); }
.vs-pinned-card:hover { transform: translateY(-8px); }

.vs-col-card { flex: 0 0 clamp(210px, 24cqi, 268px); scroll-snap-align: start; text-decoration: none; color: #16302A; background: #FFFDF7; border-radius: clamp(26px, 3.4cqi, 40px); padding: clamp(18px, 2.4cqi, 26px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; box-shadow: 0 16px 34px -26px rgba(16,69,59,0.6); transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1); cursor: pointer; }
.vs-col-card:hover { transform: translateY(-8px); }

.vs-filter-btn { cursor: pointer; border: 2px solid #16302A; border-radius: 999px; padding: 10px 20px; font-weight: 700; font-size: clamp(13px, 1.6cqi, 16px); transition: transform 0.2s ease; }
.vs-filter-btn:hover { transform: translateY(-2px); }

.vs-piece-card { background: #FFFDF7; border: 2px solid rgba(22,48,42,0.12); border-radius: clamp(24px, 3cqi, 34px); padding: clamp(16px, 2.2cqi, 24px); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 14px 30px -22px rgba(16,69,59,0.5); transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.35s ease; }
.vs-piece-card:hover { transform: translateY(-8px) rotate(-1.4deg) scale(1.02); box-shadow: 0 26px 44px -24px rgba(16,69,59,0.55); }
.vs-buy { flex: 1 1 120px; text-align: center; text-decoration: none; background: #D93F26; color: #FFF7EE; font-weight: 700; font-size: clamp(13px, 1.5cqi, 15px); padding: 12px 16px; border-radius: 999px; }
.vs-buy:hover { background: #16302A; color: #FFF7EE; }
.vs-ask { flex: 1 1 120px; text-align: center; text-decoration: none; background: #FFFDF7; color: #16302A; border: 2px solid #16302A; font-weight: 700; font-size: clamp(13px, 1.5cqi, 15px); padding: 10px 16px; border-radius: 999px; }
.vs-ask:hover { background: #12A0A8; color: #FFF7EE; border-color: #0B7078; }

.vs-field { display: grid; gap: 7px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #3A544C; }
.vs-field input, .vs-field textarea { font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #16302A; background: #FFF4E2; border: 2px solid rgba(22,48,42,0.18); border-radius: 16px; padding: 13px 16px; width: 100%; font-family: inherit; }
.vs-field input:focus, .vs-field textarea:focus { outline: none; border-color: #12A0A8; }
.vs-err { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #B7301A; }
.vs-submit { cursor: pointer; background: #D93F26; color: #FFF7EE; border: none; font-weight: 700; font-size: clamp(15px, 1.8cqi, 18px); padding: 16px 24px; border-radius: 999px; box-shadow: 0 9px 0 -2px rgba(154,45,26,0.35); transition: transform 0.25s ease; }
.vs-submit:hover { transform: translateY(-3px); }
.vs-edit-btn { flex: 1 1 120px; cursor: pointer; background: transparent; color: #16302A; border: 2px solid #16302A; font-weight: 700; padding: 12px 20px; border-radius: 999px; }
.vs-edit-btn:hover { background: #FBA51F; }
.vs-ig-send { flex: 1 1 150px; text-align: center; text-decoration: none; background: #D93F26; color: #FFF7EE; font-weight: 700; padding: 14px 20px; border-radius: 999px; }
.vs-ig-send:hover { background: #16302A; color: #FFF7EE; }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
[data-reveal].vs-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.footer-link { color: #FBD98A; }