.portfolio-thumbs{display:flex;gap:12px;overflow-x:auto;padding:16px 0 20px;scroll-snap-type:x proximity}.portfolio-thumbs button{min-width:130px;flex:1;background:#102033;border:1px solid #35506b;border-radius:8px;padding:6px;color:#c9d9eb;text-align:left;cursor:pointer;scroll-snap-align:start}.portfolio-thumbs button[aria-pressed=true]{border:2px solid #63dcff;padding:5px;box-shadow:0 0 18px #29c9ff18;color:white}.portfolio-thumbs img{width:100%;height:88px;object-fit:contain;background:#e9e8e4;border-radius:4px;display:block}.portfolio-thumbs span{display:block;font-size:11px;padding:9px 4px 3px}.portfolio-compare{height:600px;max-height:75vh;aspect-ratio:auto;background:#e8e7e4;--split:50%}.portfolio-compare img,.portfolio-compare .base,.portfolio-compare .before-layer img{object-fit:contain;background:#e8e7e4}.portfolio-nav{display:flex;align-items:center;gap:15px}.portfolio-nav button{background:#15334b;color:#91e7ff;border:1px solid #395c77;border-radius:5px;width:36px;height:32px;cursor:pointer}.portfolio-nav span{font-size:12px;min-width:40px;text-align:center}.demo-toolbar{gap:15px;flex-wrap:wrap}.demo-toolbar>span{font-size:13px}.portfolio-compare.is-loading:after{content:'Loading comparison…';position:absolute;bottom:20px;left:20px;z-index:6;background:#092139;color:white;padding:8px 13px;font-size:12px;border-radius:5px;pointer-events:none}.portfolio-compare.has-error:after{content:'Image could not load. Select the project again.'}.demo-footnote a{cursor:pointer}button:focus-visible{outline:3px solid #6bdcff;outline-offset:3px}@media(max-width:650px){.portfolio-compare{height:440px;max-height:65vh}.portfolio-thumbs button{min-width:110px}.portfolio-thumbs img{height:72px}.scale-buttons button{padding:8px 12px}.demo-toolbar{padding:12px}.resolution{gap:12px}.resolution strong{font-size:14px}}
.demo-footnote:has(#raw-full){display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px;line-height:1.6}
.demo-footnote #raw-full,.demo-footnote #full-output{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 20px;margin:0;border:1px solid #53d5ff;border-radius:8px;background:#10283a;color:#c9f3ff;font-size:13px;font-weight:700;line-height:1.4;text-decoration:none;transition:background .15s,border-color .15s}
.demo-footnote #full-output{background:#29bfe9;color:#06121f;border-color:#29bfe9}
.demo-footnote #raw-full:hover{background:#19405a;border-color:#a2edff}
.demo-footnote #full-output:hover{background:#72dfff;border-color:#72dfff}
.demo-footnote #raw-full:focus-visible,.demo-footnote #full-output:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:650px){.demo-footnote #raw-full,.demo-footnote #full-output{flex:1 1 190px;text-align:center}}