.website-project-page{padding:34px 0 100px}.website-project-hero{display:flex;align-items:end;justify-content:space-between;gap:40px;padding:30px 0 54px}.website-project-hero>div{max-width:820px}.website-project-hero h1{font-size:clamp(2.6rem,7vw,5.4rem);margin:5px 0 16px}.website-project-hero .lede{margin:0}.external-action{flex:none}.screenshot-showcase{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 270px;align-items:end;gap:24px;margin-bottom:90px;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--soft)}.browser-frame,.phone-frame{overflow:hidden;border:1px solid #cbd4df;background:#fff;box-shadow:0 20px 45px #101e3424}.browser-frame{border-radius:13px}.browser-frame__bar{display:flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-bottom:1px solid #dce2e9;background:#f4f6f8}.browser-frame__bar i{width:8px;height:8px;border-radius:50%;background:#c5ccd5}.browser-frame__bar span{min-width:0;margin-left:7px;overflow:hidden;color:#6d7888;font-size:.7rem;text-overflow:ellipsis;white-space:nowrap}.phone-frame{width:100%;padding:9px;border-radius:29px}.phone-frame__speaker{width:54px;height:5px;margin:2px auto 8px;border-radius:9px;background:#bec7d1}.screenshot-placeholder{display:grid;place-content:center;min-height:440px;padding:30px;background:linear-gradient(145deg,#f9fafb,#e9eef4);color:#344259;text-align:center}.phone-frame .screenshot-placeholder{min-height:480px}.screenshot-placeholder span{font-size:1.05rem;font-weight:850}.screenshot-placeholder small{margin-top:5px;color:#748095}.browser-frame img,.phone-frame img{display:block;width:100%;height:auto}.project-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-bottom:80px}.project-detail-grid h2,.technology-section h2,.responsive-section h2{font-size:clamp(1.8rem,4vw,2.7rem);margin:5px 0 16px}.project-detail-grid p,.technology-section p,.responsive-section p{color:var(--muted)}.project-facts{display:grid;gap:16px;margin-top:28px}.project-facts div{padding-top:16px;border-top:1px solid var(--line)}.project-facts dt{margin-bottom:5px;color:var(--brand-dark);font-size:.75rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.project-facts dd{margin:0;color:var(--muted)}.contribution-list{display:grid;gap:12px;padding:0;list-style:none}.contribution-list li{position:relative;padding:15px 16px 15px 43px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.contribution-list li:before{content:"✓";position:absolute;left:16px;color:var(--brand);font-weight:900}.contribution-list--pending li{border-style:dashed;color:var(--muted)}.contribution-list--pending li:before{content:"i"}.technology-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;margin-bottom:80px;padding:38px;border:1px solid var(--line);border-radius:18px;background:var(--soft)}.technology-list{display:flex;align-content:flex-start;flex-wrap:wrap;gap:9px;padding:0;list-style:none}.technology-list li{padding:10px 13px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-weight:750}.responsive-section{max-width:800px;margin-bottom:80px}.website-project-cta{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:34px 38px;border-radius:18px;background:var(--ink);color:#fff}.website-project-cta h2{margin:4px 0 7px;color:#fff}.website-project-cta p{margin:0;color:#cbd5e5}.website-project-cta .eyebrow{color:#9ebdff}.website-project-cta .button{flex:none;border-color:#fff;background:#fff;color:#172136}.website-preview{min-height:230px;border-bottom:1px solid var(--line);background:#fff;color:#172136}.website-preview__bar{display:flex;gap:5px;padding:9px 12px;background:#eef2f6}.website-preview__bar i{width:7px;height:7px;border-radius:50%;background:#bdc7d3}.website-preview__nav{display:flex;align-items:center;gap:12px;padding:12px 15px;font-size:.56rem}.website-preview__nav strong{margin-right:auto;font-size:.7rem}.website-preview__hero{display:grid;place-content:center;min-height:110px;padding:20px;background:#18325c;color:#fff;text-align:center}.website-preview__hero p{margin:0!important;color:inherit!important;font-weight:750}.website-preview__categories{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:10px}.website-preview__categories span,.website-preview__score{padding:8px;border-radius:4px;background:#eff3f7;font-size:.55rem}.website-preview--soccer .website-preview__hero{background:linear-gradient(135deg,#101d32,#23436c)}.website-preview--soccer .website-preview__score{display:flex;justify-content:space-between;margin:10px 14px}.website-preview--soccer .website-preview__score span,.website-preview--soccer .website-preview__score strong{font-size:.55rem}html[data-theme=dark] .browser-frame,html[data-theme=dark] .phone-frame{border-color:var(--line);box-shadow:0 20px 45px #00000040}html[data-theme=dark] .screenshot-placeholder{background:linear-gradient(145deg,#1b2a40,#111d30);color:var(--ink)}html[data-theme=dark] .browser-frame__bar{border-color:var(--line);background:#17243a}html[data-theme=dark] .browser-frame__bar span{color:var(--muted)}@media(max-width:850px){.website-project-hero{align-items:flex-start;flex-direction:column}.screenshot-showcase{grid-template-columns:1fr}.phone-frame{width:min(330px,100%);margin:auto}.project-detail-grid,.technology-section{grid-template-columns:1fr;gap:32px}}@media(max-width:600px){.website-project-page{padding-top:22px}.website-project-hero{padding-bottom:38px}.website-project-hero .button{width:100%}.screenshot-showcase{margin-inline:-14px;margin-bottom:65px;padding:16px;border-radius:0}.screenshot-placeholder{min-height:260px}.phone-frame .screenshot-placeholder{min-height:430px}.project-detail-grid{gap:45px;margin-bottom:60px}.technology-section{margin-inline:-14px;margin-bottom:60px;padding:28px 20px;border-radius:0}.website-project-cta{align-items:flex-start;flex-direction:column;padding:28px}.website-project-cta .button{width:100%}}.browser-frame img,.phone-frame img{height:auto;object-fit:contain;object-position:top}.technology-groups{display:grid;gap:24px}.technology-groups section+section{padding-top:20px;border-top:1px solid var(--line)}.technology-groups h3{margin:0 0 11px;font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-dark)}.technology-groups .technology-list{margin:0}.screenshot-showcase figure{min-width:0;margin:0}.screenshot-showcase figcaption{padding:12px 4px 0;color:var(--muted);font-size:.82rem;line-height:1.5}.project-features{margin-bottom:80px}.project-features__intro{max-width:820px;margin-bottom:28px}.project-features__intro h2{margin:5px 0 16px;font-size:clamp(1.8rem,4vw,2.7rem)}.project-features__intro p,.project-feature-card p{color:var(--muted)}.project-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.project-feature-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}.project-feature-card{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.project-feature-card>div:last-child{padding:24px}.project-feature-card h3{margin:0 0 10px;font-size:1.25rem}.project-feature-card p{margin:0}.feature-wireframe{height:190px;padding:22px;background:var(--soft)}.feature-wireframe--search span,.feature-wireframe--search i{display:block;border-radius:5px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}.feature-wireframe--search>div{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.feature-wireframe--menu{display:grid;grid-template-columns:26% 1fr;gap:14px;overflow:hidden;padding:14px;box-sizing:border-box}.mega-abstract__rail,.mega-abstract__heading,.mega-abstract__tiles i{display:block;border-radius:5px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}.mega-abstract__rail{min-height:138px;border-radius:7px}.mega-abstract__content{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}.mega-abstract__heading{width:100%;height:15px;margin-bottom:11px}.mega-abstract__tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 13px}.mega-abstract__tiles i{height:42px;min-height:0;border-radius:7px}.mega-abstract__tiles--compact{grid-template-columns:repeat(2,1fr)}.feature-wireframe__input{width:72%;height:32px;margin-bottom:18px}.feature-wireframe--search i{height:43px}.feature-wireframe--roster,.feature-wireframe--calendar,.feature-wireframe--countdown{box-sizing:border-box;overflow:hidden}.feature-wireframe--roster{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:18px}.feature-wireframe--roster>div{display:grid;align-content:start;gap:10px;padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.feature-wireframe--roster span,.feature-wireframe--roster i,.calendar-abstract__matches span,.calendar-abstract__matches i,.calendar-abstract__month>span,.calendar-abstract__month i,.feature-wireframe--countdown span,.feature-wireframe--countdown i,.feature-wireframe--countdown b{display:block;border-radius:4px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}.feature-wireframe--roster span{width:70%;height:13px;margin-bottom:2px;background:color-mix(in srgb,var(--brand) 14%,var(--surface))}.feature-wireframe--roster i{height:19px;background:var(--soft)}.feature-wireframe--calendar{display:grid;grid-template-columns:34% 1fr;gap:13px;padding:17px}.calendar-abstract__matches{display:grid;align-content:start;gap:11px}.calendar-abstract__matches span{width:72%;height:14px}.calendar-abstract__matches i{height:51px}.calendar-abstract__month>span{width:58%;height:14px;margin:0 auto 11px}.calendar-abstract__month>div{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.calendar-abstract__month i{aspect-ratio:1;background:var(--soft)}.calendar-abstract__month i:nth-child(11),.calendar-abstract__month i:nth-child(13){background:color-mix(in srgb,var(--brand) 17%,var(--surface))}.feature-wireframe--countdown{display:grid;align-content:center;gap:15px;padding:20px}.countdown-abstract__label{width:35%;height:13px;margin:auto}.countdown-abstract__digits{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.countdown-abstract__digits i{height:38px;background:color-mix(in srgb,var(--brand) 12%,var(--surface))}.countdown-abstract__match{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:11px}.countdown-abstract__match b{width:44px;height:44px;border-radius:50%}.countdown-abstract__match span{height:18px}@media(max-width:850px){.project-feature-grid{grid-template-columns:1fr}}@media(min-width:851px)and (max-width:1080px){.project-feature-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}}