*{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background:#0a0a0a;min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;overflow-x:hidden}.app{max-width:1600px;margin:0 auto;padding:2rem 1rem}.header{text-align:center;margin-bottom:2rem}.title{letter-spacing:.02em;color:#f0f0f0;margin-bottom:.5rem;font-size:clamp(2rem,5vw,3.5rem);font-weight:700}.subtitle{color:#888;font-size:1.1rem;font-weight:300}.hero{background:#111;width:100%;padding-bottom:50%;position:relative;overflow:hidden}.panel{cursor:pointer;height:100%;transition:transform .5s cubic-bezier(.34,1.56,.64,1),filter .4s;position:absolute;top:0;overflow:hidden}.panel img{object-fit:cover;filter:brightness(.8)saturate(.7);width:100%;height:100%;transition:filter .4s,transform .5s cubic-bezier(.34,1.56,.64,1);display:block}.panel:hover,.panel.hovered{transform:scale(1.05)}.panel:hover img,.panel.hovered img{filter:brightness(1.15)saturate(1.1);transform:scale(1.02)}.panel:first-child{width:23%;left:0}.panel:nth-child(2){width:28.2%;left:15.8%}.panel:nth-child(3){width:29.3%;left:35.1%}.panel:nth-child(4){width:27.3%;left:56.1%}.panel:nth-child(5){width:24.2%;left:75.8%}.panel-glow{background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(var(--accent-rgb), .3) 0%, transparent 70%);opacity:0;pointer-events:none;transition:opacity .3s;position:absolute;inset:0}.panel:hover .panel-glow,.panel.hovered .panel-glow{opacity:1}.labels{width:100%;height:60px;margin-top:.5rem;position:relative}.label{text-align:center;cursor:default;position:absolute;top:0;transform:translate(-50%)}.label-name{letter-spacing:.05em;text-transform:uppercase;color:#888;margin-bottom:.2rem;font-size:1.1rem;font-weight:700;transition:color .3s}.label:hover .label-name,.label.hovered .label-name{color:#fff}.label-desc{color:#555;font-size:.8rem;font-weight:300;transition:color .3s}.label:hover .label-desc,.label.hovered .label-desc{color:#999}@media (width<=1200px){.hero{flex-wrap:wrap;height:auto;padding-bottom:0;display:flex;overflow:visible}.panel{aspect-ratio:1/1.5;height:auto;clip-path:none!important;width:33.333%!important;position:relative!important;left:auto!important}.panel img{object-fit:cover}.panel:hover{transform:scale(1.03)}.labels{grid-template-columns:repeat(5,1fr);height:auto;display:grid}.label{padding:.8rem .3rem;position:static;transform:none}}.detail-app{background:#0a0a0a;max-width:1400px;min-height:100vh;margin:0 auto;padding:1.5rem 2rem 3rem}.detail-back{color:#888;cursor:pointer;background:0 0;border:1px solid #333;border-radius:4px;margin-bottom:2rem;padding:.5rem 1.2rem;font-size:.95rem;transition:color .2s,border-color .2s;display:inline-block}.detail-back:hover{color:#fff;border-color:#666}.detail-layout{align-items:flex-start;gap:3rem;display:flex}.detail-image-col{flex:0 0 42%;max-width:42%}.detail-hero-image{border-radius:2px;width:100%;display:block}.detail-text-col{flex:1;padding-top:1rem}.detail-heading{color:#f0f0f0;letter-spacing:.02em;margin-bottom:1.5rem;font-size:2.2rem;font-weight:700}.detail-body{color:#999;font-size:1.1rem;font-weight:300;line-height:1.9}.back-link{color:#888;cursor:pointer;text-decoration:underline;transition:color .2s}.back-link:hover{color:#fff}@media (width<=900px){.detail-layout{flex-direction:column;gap:1.5rem}.detail-image-col{flex:0 0 100%;max-width:100%}.detail-heading{font-size:1.6rem}.detail-app{padding:1rem 1rem 2rem}}@media (width<=480px){.panel{width:100%!important}}@media (width<=768px){.panel{width:50%!important}}