.spec-explorer{--sg-accent:#d69a35;--sg-ink:#24180f;--sg-card-ink:#24180f;--sg-panel:#fffaf1;--sg-line:rgba(36,24,15,.16);margin:32px 0 38px;color:var(--sg-ink)}
.spec-explorer--teal{--sg-accent:#13796b;--sg-ink:#10212b;--sg-panel:#f4fbf9;--sg-line:rgba(16,33,43,.14)}
.spec-explorer--rust{--sg-accent:#c2552b;--sg-ink:#1c1714;--sg-panel:#fbf3e8;--sg-line:rgba(28,23,20,.18)}
.spec-explorer--dark{--sg-ink:#fff8eb;--sg-card-ink:#24180f;--sg-line:rgba(255,248,235,.28)}
.sg-intro{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:20px}.sg-intro h3{margin:0 0 6px;font:inherit;font-size:clamp(1.2rem,2vw,1.65rem);font-weight:800}.sg-intro p{max-width:760px;margin:0;opacity:.78;line-height:1.65}
.sg-filters{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:20px}.sg-filter{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.sg-filter>span{margin-right:3px;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;opacity:.65}.sg-filter button{appearance:none;border:1px solid var(--sg-line);border-radius:999px;background:transparent;color:inherit;padding:8px 12px;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;transition:.2s ease}.sg-filter button:hover,.sg-filter button[aria-pressed="true"]{border-color:var(--sg-accent);background:var(--sg-accent);color:#fff;transform:translateY(-1px)}
.sg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.sg-card{appearance:none;border:1px solid var(--sg-line);border-radius:14px;padding:0;overflow:hidden;background:var(--sg-panel);color:var(--sg-card-ink);text-align:left;cursor:zoom-in;box-shadow:0 10px 28px rgba(20,16,12,.08);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.sg-card:hover,.sg-card:focus-visible{transform:translateY(-4px);border-color:var(--sg-accent);box-shadow:0 16px 36px rgba(20,16,12,.16);outline:none}.sg-card__media{display:block;aspect-ratio:4/5;overflow:hidden;background:#cab99e}.sg-card__media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .4s ease}.sg-card:hover img{transform:scale(1.025)}.sg-card__body{display:grid;gap:4px;padding:12px}.sg-card__title{font-size:.85rem;font-weight:800;line-height:1.35}.sg-card__meta{font-size:.72rem;opacity:.68}.sg-card code,.sg-dialog__filename{font:600 .68rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--sg-accent);overflow-wrap:anywhere}.sg-count{margin:14px 0 0;font-size:.76rem;opacity:.62}
.sg-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;width:min(1080px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);border:0;border-radius:18px;padding:0;background:#171310;color:#fff;box-shadow:0 30px 100px rgba(0,0,0,.48);overflow:hidden}.sg-dialog::backdrop{background:rgba(9,7,6,.82);backdrop-filter:blur(7px)}.sg-dialog__figure{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.75fr);margin:0;min-height:min(760px,calc(100dvh - 120px));max-height:calc(100dvh - 32px)}.sg-dialog__image{width:100%;height:100%;max-height:calc(100dvh - 32px);object-fit:contain;background:#0d0b09}.sg-dialog__copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,64px);background:linear-gradient(145deg,#241d18,#15110e);overflow:auto}.sg-dialog__eyebrow{color:var(--sg-accent);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.sg-dialog__title{margin:12px 0;font-size:clamp(1.4rem,3vw,2.3rem);line-height:1.08}.sg-dialog__description{margin:0 0 18px;color:rgba(255,255,255,.72);line-height:1.7}.sg-dialog__close,.sg-dialog__nav{position:absolute;z-index:2;border:0;background:rgba(15,12,10,.72);color:#fff;cursor:pointer;backdrop-filter:blur(8px)}.sg-dialog__close{top:14px;right:14px;width:42px;height:42px;border-radius:50%;font-size:1.8rem;line-height:1}.sg-dialog__nav{top:50%;width:44px;height:58px;border-radius:8px;font-size:2rem;transform:translateY(-50%)}.sg-dialog__nav--prev{left:14px}.sg-dialog__nav--next{right:14px}.sg-dialog__close:hover,.sg-dialog__nav:hover{background:var(--sg-accent)}
body:has(.sg-dialog[open]){overflow:hidden}
.sg-dialog__order{display:grid;gap:9px;margin-top:4px}.sg-dialog .sg-dialog__order-button{justify-self:start;border:0;border-radius:999px;padding:12px 16px;background:#e9a83b;color:#171310;font:800 .8rem/1 inherit;cursor:pointer}.sg-dialog .sg-dialog__order-button:hover,.sg-dialog .sg-dialog__order-button:focus-visible{background:#f3be60;filter:none;outline:2px solid #fff;outline-offset:3px}.sg-dialog__order-note{color:rgba(255,255,255,.72);font-size:.72rem;line-height:1.45}
@media(max-width:900px){.sg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sg-dialog__figure{grid-template-columns:1fr;grid-template-rows:minmax(0,62vh) auto}.sg-dialog__copy{padding:24px}.sg-dialog__image{max-height:62vh}}
@media(max-width:640px){.sg-intro{display:block}.sg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.sg-card__body{padding:10px}.sg-card__title{font-size:.76rem}.sg-card code{font-size:.6rem}.sg-filter{width:100%}.sg-dialog{inset:0;transform:none;width:100vw;max-height:100dvh;height:100dvh;border-radius:0}.sg-dialog__figure{min-height:100dvh;max-height:100dvh;grid-template-rows:58dvh auto}.sg-dialog__nav{top:29%}}
@media(prefers-reduced-motion:reduce){.sg-card,.sg-card__media img,.sg-filter button{transition:none}}