@property --son-portfolio-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.son-portfolio{padding:84px 0;background:radial-gradient(ellipse at 78% 22%,#7941211a,transparent 60%),#281205;color:#f4ebe2}
.son-portfolio-inner{width:min(1440px,calc(100% - 48px));margin-inline:auto}
.son-portfolio .son-section-heading{margin-bottom:36px}.son-portfolio .son-section-heading h2{font-size:clamp(29px,3.5vw,48px);line-height:1.5;text-wrap:balance}
.son-portfolio .son-section-heading p{max-width:820px;margin:22px auto 0;font-size:16px;line-height:1.9;color:#d7be9f}
.son-portfolio-rail,.son-portfolio-dialog-rail{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:20px;min-width:0}
.son-portfolio-stage{display:grid;place-items:center;width:100%;aspect-ratio:16/9;position:relative;isolation:isolate;overflow:hidden;border:1px solid #d5ad6980;border-radius:22px;background:#190e07;box-shadow:0 0 26px #d5ad6912;cursor:zoom-in}
.son-portfolio-stage img{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
.son-portfolio-stage::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--son-portfolio-angle),#d5ad690a 0 33%,#ffdc95d9 43%,#d8a659 49%,#d5ad690a 59% 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:son-portfolio-edge 8s linear infinite;pointer-events:none;z-index:2}
.son-portfolio-arrow{display:grid;place-items:center;width:52px;height:52px;padding:0;border-radius:50%;border:1px solid #f0cc86;background:linear-gradient(135deg,#eccc8e,#ae7d3d);color:#251308;box-shadow:0 0 15px #e2b76833;cursor:pointer;transition:transform .2s}
.son-portfolio-arrow[hidden]{display:none}.son-portfolio-arrow:disabled{opacity:.35;cursor:default;box-shadow:none}.son-portfolio-arrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[dir=rtl] .son-portfolio-arrow svg{transform:rotate(180deg)}
.son-portfolio-expand{position:absolute;bottom:14px;inset-inline-end:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #e6bd7677;border-radius:999px;color:#f9dfb0;background:#1c100bec;font:600 13px/1.5 Arial,sans-serif;box-shadow:0 0 20px #0002;pointer-events:none}
.son-portfolio-expand svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.son-portfolio-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 72px 12px;color:#dfc29b;font-size:16px;line-height:1.6}.son-portfolio-count{font-size:14px;white-space:nowrap;color:#eccc8e}
.son-portfolio-progress{display:block;width:calc(100% - 144px);height:3px;margin:auto;border:0;border-radius:3px;background:#d5ad6922;accent-color:#d5ad69;overflow:hidden}.son-portfolio-progress::-webkit-progress-bar{background:#d5ad6922}.son-portfolio-progress::-webkit-progress-value{background:#eccc8e}.son-portfolio-progress::-moz-progress-bar{background:#eccc8e}
.son-portfolio-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.son-portfolio-dialog{padding:20px;border:1px solid #d5ad6966;border-radius:20px;background:#140c07;color:#f4ebe2;width:calc(100vw - 32px);max-width:1800px;max-height:calc(100dvh - 24px);overflow:hidden;margin:auto;box-shadow:0 0 44px #d5ad6920}
.son-portfolio-dialog::backdrop{background:#080401e8}.son-portfolio-dialog:not([open]){display:none}
.son-portfolio-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.son-portfolio-toolbar h3{font:600 18px/1.5 Arial,sans-serif;margin:0;min-width:0}.son-portfolio-toolbar>div{display:flex;gap:10px;flex:none}
.son-portfolio-toolbar button{min-height:42px;padding:8px 15px;background:#38210f;color:#f4d6a1;border:1px solid #d5ad694d;border-radius:12px;cursor:pointer;font:600 14px/1.5 Arial,sans-serif}.son-portfolio-toolbar [data-portfolio-close]{font-size:25px;width:44px;padding:0}
.son-portfolio-viewport{height:calc(100dvh - 170px);min-height:150px;overflow:auto;overscroll-behavior:contain;display:grid;place-items:center;min-width:0;background:#100905;border-radius:12px;touch-action:pan-x pan-y pinch-zoom}
.son-portfolio-viewport img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.son-portfolio-viewport.is-zoomed{display:block;cursor:grab}.son-portfolio-viewport.is-zoomed img{max-width:none;max-height:none;width:auto;height:auto}
.son-portfolio-dialog-hint{font:13px/1.6 Arial,sans-serif;color:#d8bc94;text-align:center;margin:14px 0 0}.son-portfolio-dialog-hint span{display:inline-block;margin-inline-start:16px;white-space:nowrap}
html.son-portfolio-open,html.son-portfolio-open body{overflow:hidden;overscroll-behavior:none}
.son-portfolio button:focus-visible,.son-portfolio-stage:focus-visible{outline:2px solid #ffdc95;outline-offset:4px}
@keyframes son-portfolio-edge{to{--son-portfolio-angle:360deg}}
@media(hover:hover){.son-portfolio-arrow:not(:disabled):hover{transform:scale(1.06)}.son-portfolio-stage:hover{border-color:#f0cc86}}
@media(max-width:700px){.son-portfolio{padding:58px 0}.son-portfolio-inner{width:calc(100% - 28px)}.son-portfolio .son-section-heading h2{font-size:28px}.son-portfolio .son-section-heading p{font-size:14px}.son-portfolio-rail{position:relative;display:block;padding-bottom:57px}.son-portfolio-stage{border-radius:15px}.son-portfolio-rail>.son-portfolio-arrow{position:absolute;bottom:0;width:42px;height:42px}.son-portfolio-rail>[data-portfolio-prev]{inset-inline-start:calc(50% - 54px)}.son-portfolio-rail>[data-portfolio-next]{inset-inline-end:calc(50% - 54px)}.son-portfolio-meta{margin:14px 0 12px;font-size:14px}.son-portfolio-progress{width:100%}.son-portfolio-expand{font-size:10px;padding:6px 9px;bottom:7px;inset-inline-end:7px;gap:5px}.son-portfolio-expand svg{width:14px;height:14px}
.son-portfolio-dialog{width:calc(100vw - 12px);padding:12px 8px;border-radius:14px}.son-portfolio-toolbar{align-items:flex-start;gap:8px}.son-portfolio-toolbar h3{font-size:14px}.son-portfolio-toolbar button{font-size:12px;padding:7px 9px;min-height:38px}.son-portfolio-toolbar>div{gap:6px}.son-portfolio-toolbar [data-portfolio-close]{width:36px;font-size:22px}.son-portfolio-dialog-rail{grid-template-columns:32px minmax(0,1fr) 32px;gap:5px}.son-portfolio-dialog-rail .son-portfolio-arrow{width:32px;height:40px;border-radius:10px}.son-portfolio-dialog-rail .son-portfolio-arrow svg{width:18px}.son-portfolio-viewport{height:calc(100dvh - 170px)}.son-portfolio-dialog-hint{font-size:11px}.son-portfolio-dialog-hint span{margin-inline-start:8px}}
@media(prefers-reduced-motion:reduce){.son-portfolio-stage::after{animation:none}.son-portfolio-arrow{transition:none}}