.works-container{width:100%;max-width:1280px;margin-left:auto;margin-right:auto}.works-header{margin-bottom:50px}.works-device-switch{background:var(--accent-color-4);border:1px solid var(--accent-color-3);border-radius:100px;gap:8px;width:fit-content;padding:6px;display:flex}.works-device-switch button{width:44px;height:44px;color:var(--accent-color-2);opacity:.6;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:16px;transition:background .2s,opacity .2s;display:flex}.works-device-switch button:hover{opacity:1}.works-device-switch button.is-active{background:var(--accent-color);color:#fff;opacity:1;box-shadow:var(--box-shadow-bottom-right)}.works-grid{grid-template-columns:repeat(2,1fr);gap:60px 50px;display:grid}.works-item{flex-direction:column;gap:26px;margin:0;display:flex}.device-frame{flex-direction:column;align-items:center;width:100%;transition:transform .5s cubic-bezier(.2,.7,.3,1);display:flex;position:relative}.works-item:hover .device-frame{transform:translateY(-8px)}.device-screen{z-index:2;border:1px solid var(--accent-color-3);background:#0b0c11;width:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0a,0 30px 60px -25px #000000e6}.device-monitor .device-screen{border-radius:16px;padding:10px 10px 12px}.device-bar{align-items:center;gap:6px;padding:4px 6px 10px;display:flex}.device-dot{background:var(--accent-color-3);border-radius:50%;flex:none;width:9px;height:9px}.device-dot:nth-child(3){background:var(--accent-color-6)}.device-url{background:var(--accent-color-4);border:1px solid var(--accent-color-3);color:var(--text-color);font-family:var(--body-font);font-size:var(--font-size-xs);text-align:center;white-space:nowrap;text-overflow:ellipsis;border-radius:100px;flex:1;margin-left:10px;padding:3px 12px;line-height:1.6;overflow:hidden}.device-shot{aspect-ratio:16/10;background:var(--accent-color-4);border-radius:8px;position:relative;overflow:hidden}.device-shot img{object-fit:cover;object-position:top center;width:100%;height:100%;transition:object-position 3.5s ease-in-out;display:block}.works-item:hover .device-shot img{object-position:bottom center}.device-stand{z-index:1;background:linear-gradient(180deg, var(--accent-color-3) 0%, var(--accent-color-4) 100%);border:1px solid var(--accent-color-3);border-top:none;border-radius:0 0 10px 10px;width:120px;height:22px;margin-top:-1px;display:block;position:relative}.device-stand:after{content:"";background:linear-gradient(180deg, var(--accent-color-3) 0%, var(--accent-color-4) 100%);border:1px solid var(--accent-color-3);border-radius:100px;width:220px;height:8px;position:absolute;bottom:-8px;left:50%;transform:translate(-50%)}.device-glow{z-index:0;background:radial-gradient(at center center, var(--accent-color) 0%, var(--accent-transparent) 65%);opacity:.28;filter:blur(30px);pointer-events:none;border-radius:50%;width:85%;height:80%;transition:opacity .5s;position:absolute;top:55%;left:50%;transform:translate(-50%,-50%)}.works-item:hover .device-glow{opacity:.5}.works-grid.is-phone{grid-template-columns:repeat(4,1fr);gap:40px 30px}.device-phone{max-width:260px;margin:0 auto}.device-phone .device-screen{border-width:6px;border-color:var(--accent-color-3);border-radius:34px;padding:12px 10px}.device-phone .device-bar{justify-content:center;padding:0 0 10px}.device-phone .device-dot{display:none}.device-phone .device-url{margin-left:0;font-size:10px}.device-phone .device-shot{aspect-ratio:9/17;border-radius:22px}.device-phone .device-shot img{object-fit:cover;object-position:top left}.device-phone .device-stand{display:none}.works-item-meta{text-align:center;flex-direction:column;gap:6px;margin-top:14px;display:flex}.works-item-category{color:var(--accent-color-2);opacity:.55;font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase}.works-item-title{color:var(--primary);margin:0}@media (min-width:2400px){.section:has(>.works-container){padding-left:4vw;padding-right:4vw}.works-container{max-width:none}.works-grid.is-monitor{grid-template-columns:repeat(4,1fr);gap:70px 50px}}@media (max-width:1200px){.works-grid.is-phone{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.works-grid,.works-grid.is-phone{grid-template-columns:1fr;gap:50px}.device-monitor .device-screen{border-radius:12px}}