.project-studio{--studio-lime:#c2f74f;--studio-ink:#131713;--studio-soft:#a9b2a8;border-radius:24px;overflow:hidden;background:var(--studio-ink);color:#f5f7f0}
.showcase-selector{display:flex;align-items:center;gap:12px;min-width:0}.showcase-selector>span{font-size:12px;color:#697269;white-space:nowrap}.showcase-selector select{min-width:190px;max-width:280px;background:#f1f3ed;color:#283327;border-color:#cbd1c6;border-radius:30px;padding-left:17px}
.product-hero{display:grid;grid-template-columns:minmax(200px,.95fr) minmax(270px,1.5fr) minmax(215px,.9fr);gap:12px;min-height:410px;padding:36px 30px;background:radial-gradient(ellipse at 53% 76%,#b2bfb099,transparent 49%),linear-gradient(120deg,#7d897f,#939e94 55%,#737f77);isolation:isolate;color:white}
.studio-eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:500;display:flex;align-items:center;gap:8px}.live-dot{width:6px;height:6px;border-radius:50%;background:#d3f891;box-shadow:0 0 0 4px #d3f89112}
.product-intro{position:relative;z-index:2;display:flex;align-items:flex-start;flex-direction:column;min-width:0}.product-intro h2{font-size:clamp(32px,3.3vw,52px);font-weight:500;line-height:1.18;letter-spacing:-1.5px;margin:22px 0 15px;overflow-wrap:anywhere}.product-description{font-size:12px;line-height:1.9;color:#f5f7f0d9;max-width:235px}.product-stage{display:flex;gap:9px;margin-top:21px;align-items:center;font-size:11px}.product-stage>span{color:#e1e7dc}.product-stage strong{border:1px solid #f3f7eb55;border-radius:30px;padding:3px 10px;font-size:10px;font-weight:500}
.product-people{display:flex;align-items:center;gap:9px;margin-top:20px;font-size:12px}.product-people small{display:block;font-size:9px;color:#ecf0e7a6;margin-top:1px}.studio-avatar{display:inline-grid;place-items:center;flex-shrink:0;width:38px;height:38px;font-size:11px;letter-spacing:-.5px;border-radius:50%;background:#e3e9dd;color:#2e382a;border:1px solid #f4f7ed66}.studio-avatar.small{width:33px;height:33px;font-size:10px}
.studio-outline{display:flex;align-items:center;gap:22px;margin-top:24px;color:white;background:none;border:1px solid #e9eee64d;border-radius:30px;padding:8px 15px;font-size:11px}.studio-outline:hover{background:#ffffff17;border-color:white}
.product-visual{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:300px}.product-image{width:120%;max-width:none;height:100%;max-height:365px;object-fit:contain;position:absolute;inset:0 -10%;filter:drop-shadow(0 26px 20px #14201933);mask-image:radial-gradient(ellipse 65% 70% at center,#000 52%,transparent 94%)}.product-visual:has(.product-image):before{content:"";position:absolute;width:90%;height:65%;border:1px solid #e4ecdd26;border-radius:50%;transform:rotate(-28deg);pointer-events:none}.product-image-caption{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:1px;color:#f5f7efc7}.cover-change{position:absolute;right:2px;top:0;display:flex;gap:6px;align-items:center;background:#26382a26;border:1px solid #f3f7ed38;color:#fff;padding:6px 10px;border-radius:25px;font-size:10px;z-index:3}.cover-change:hover{background:#26382a66}.product-placeholder{display:grid;justify-items:center;gap:12px;text-align:center;padding:30px;color:#f1f5e4ba}.product-placeholder svg{width:65px;height:65px;stroke-width:1}.product-placeholder strong{font-size:15px;font-weight:500}.product-placeholder span{font-size:11px;max-width:190px}
.project-signals{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;justify-content:center}.hero-progress,.hero-stat-pair>section{background:#dce2d226;border:1px solid #f2f6e81f;border-radius:23px;padding:18px 20px;backdrop-filter:blur(12px)}.hero-progress>div:first-child{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.hero-progress>div:first-child>span{font-size:12px}.hero-progress>div:first-child>small{font-size:8px;color:#f3f6edbb}.hero-progress>strong{display:block;font-size:43px;font-weight:450;letter-spacing:-2px;line-height:1.25;margin:8px 0}.hero-progress>strong>small{font-size:20px;letter-spacing:0;margin-left:3px}.hero-progress-track{height:7px;background:#3c493944;border-radius:20px;overflow:hidden}.hero-progress-track>i{display:block;height:100%;background:var(--studio-lime);border-radius:inherit}.hero-progress p{margin-top:10px;color:#f1f5e5ce;font-size:9px}.hero-stat-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hero-stat-pair>section{padding:14px 17px}.hero-stat-pair>section>span{font-size:10px}.hero-stat-pair strong{display:block;font-size:27px;line-height:1.5;font-weight:450}.hero-stat-pair strong small{font-size:10px;margin-left:5px;color:#edf2e3ba}.hero-stat-pair p{font-size:9px;color:#edf2e3ba;margin-top:5px}.signal-dots{display:flex;gap:4px;margin-top:7px}.signal-dots>i{height:5px;width:13px;background:var(--studio-lime);border-radius:10px}.hero-cost{display:flex;align-items:center;justify-content:space-between;padding:13px 17px;text-align:left;border:1px solid #e4eddf2b;border-radius:16px;background:#32433459;color:white}.hero-cost>span:first-child{font-size:10px;color:#e0e8d9}.hero-cost strong{font-size:18px;font-weight:500;display:block;color:white;line-height:1.35;margin-top:3px}.hero-cost>span:last-child{background:#dce7d219;border:1px solid #eef8e820;border-radius:50%;width:28px;height:28px;display:grid;place-items:center}.hero-cost:hover{background:#32433488}.project-deadline{display:flex;align-items:center;justify-content:center;gap:6px;font-size:9px;color:#f1f5e3a9}
.team-progress{padding:28px 24px;background:#101310}.team-section-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px}.team-section-head .studio-eyebrow{color:#8d9788;font-size:9px;letter-spacing:2px;margin-bottom:8px}.team-section-head h2{font-size:17px;letter-spacing:.2px;font-weight:500}.team-section-head h2>span{font-size:11px;margin-left:10px;color:#a9b59e}.team-filters{display:flex;gap:6px;flex-shrink:0}.team-filters button{background:#181d17;border:1px solid #343e2e;color:#c7cebf;border-radius:30px;font-size:10px;padding:7px 13px}.team-filters button.active{background:var(--studio-lime);border-color:var(--studio-lime);color:#19230d}.participant-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.participant-card{min-width:0;border:1px solid #343b2e;background:linear-gradient(145deg,#20251e,#171b16);border-radius:23px;padding:20px 21px 0;overflow:hidden}.participant-top{display:flex;gap:10px;align-items:center}.participant-top h3{font-size:14px;font-weight:500;line-height:1.5}.participant-top>div>span{font-size:9px;color:#939d8a}.participant-count{margin-left:auto;font-size:18px;font-weight:350;color:#e0e8d8}.participant-count>small{font-size:9px;color:#859079}.participant-top .studio-avatar{width:35px;height:35px;background:#d4ddc9;color:#323f27}.participant-middle{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:22px 0 15px}.participant-work .studio-eyebrow{font-size:9px;color:#a8b29f;letter-spacing:0}.participant-work p{margin:5px 0 13px;line-height:1.2}.participant-work p>strong{font-size:29px;font-weight:450}.participant-work p>span{font-size:12px;color:#8b987e}.participant-tags{display:flex;gap:5px}.participant-tags>span{font-size:9px;padding:3px 7px;border-radius:20px;border:1px solid #3b4433;color:#aab69e}
.studio-ring{position:relative;width:91px;height:91px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--studio-lime) calc(var(--progress)*1%),#3b4335 0);transform:rotate(-90deg);flex-shrink:0}.studio-ring:before{content:"";position:absolute;inset:5px;border-radius:50%;background:#1b2019}.studio-ring>div{position:relative;text-align:center;transform:rotate(90deg)}.studio-ring strong{display:block;font-size:25px;font-weight:450;line-height:1.2;letter-spacing:-1px}.studio-ring strong small{font-size:12px;margin-left:1px}.studio-ring span{display:block;font-size:8px;color:#a2ae95;margin-top:4px}.participant-nodes{border-top:1px solid #30392b;padding-top:13px;min-height:77px}.participant-nodes>.studio-eyebrow{font-size:9px;letter-spacing:.5px;color:#8d9b80;margin-bottom:8px}.participant-nodes>div{display:flex;flex-wrap:wrap;gap:5px}.node-chip{font-size:9px;line-height:1.5;color:#c5cebc;background:#ffffff05;border:1px solid #343e2b;border-radius:20px;padding:3px 8px}.node-chip.done{color:#c2f74f}.participant-empty{font-size:11px;color:#9ba98e}.participant-next{margin:13px 0 14px;min-height:42px;display:flex;flex-direction:column;gap:4px}.participant-next>span{font-size:8px;color:#94a185}.participant-next button{border:0;background:none;color:#d1ddc4;font-size:10px;display:flex;justify-content:space-between;gap:8px;text-align:left;padding:0;line-height:1.7}.participant-next button:hover{color:var(--studio-lime)}.participant-next small{font-size:10px;color:#b2bda9}.participant-open{display:flex;justify-content:space-between;align-items:center;width:calc(100% + 42px);margin-left:-21px;padding:12px 21px;background:#ffffff03;border:0;border-top:1px solid #30392b;color:#aebe9f;font-size:10px}.participant-open:hover{background:#c2f74f12;color:var(--studio-lime)}.participant-open>span{font-size:17px}.team-metric-note{font-size:9px;color:#819076;margin-top:14px}.milestone-path-head{display:flex;align-items:center;justify-content:space-between;margin:28px 0 14px}.milestone-path-head h3{font-size:13px;font-weight:500}.milestone-path-head>button{color:#aab99a;border:0;background:none;display:flex;align-items:center;gap:8px;font-size:10px}.studio-milestones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.studio-milestone{padding:15px;text-align:left;display:flex;align-items:center;gap:12px;background:#191e16;border:1px solid #313c28;border-radius:15px;color:#b8c7a8;min-width:0}.studio-milestone:hover{border-color:#8ab04a}.milestone-number{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border:1px solid #50643e;border-radius:50%;font-size:10px}.studio-milestone.done .milestone-number{background:var(--studio-lime);color:#273216;border-color:var(--studio-lime)}.milestone-info{min-width:0;flex:1}.milestone-info strong{display:block;font-size:11px;font-weight:500;overflow-wrap:anywhere}.milestone-info small{display:block;font-size:9px;color:#8f9f80;margin-top:2px}.milestone-info>span{display:block;font-size:8px;color:#a6b999;margin-top:5px}.studio-dark-empty{grid-column:1/-1;text-align:center;padding:35px;color:#aab99a;border:1px dashed #4e5d43;border-radius:20px;font-size:12px}
.studio-member-detail h3{font-size:14px;margin:23px 0 11px}.studio-detail-node{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #e7ebdf;font-size:12px}.studio-detail-node>span:last-child{color:#6a7e53}.studio-detail-tasks{display:grid;gap:8px}.studio-detail-tasks button{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 16px;text-align:left;background:#f5f7ef;border:1px solid #e4e9d9;border-radius:12px;color:#3c4930}.studio-detail-tasks button strong{font-size:13px;font-weight:500}.studio-detail-tasks button small{display:block;font-size:10px;color:#7e8e70;margin-top:4px}.studio-detail-tasks button>span:last-child{white-space:nowrap;font-size:11px}.studio-detail-tasks button:hover{border-color:#98b666}
@media(min-width:1450px){.product-hero{padding:45px 42px;min-height:455px}.product-image{max-height:430px}.participant-card{padding:25px 26px 0}.participant-open{width:calc(100% + 52px);margin-left:-26px;padding:14px 26px}.studio-ring{width:108px;height:108px}.team-progress{padding:34px 32px}.participant-middle{margin-top:27px;margin-bottom:23px}}
@media(max-width:1050px){.product-hero{grid-template-columns:minmax(180px,.9fr) minmax(210px,1.1fr);padding:28px;gap:20px}.project-signals{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr .9fr;align-items:stretch}.hero-progress>strong{font-size:29px;margin:3px 0}.hero-progress,.hero-stat-pair>section{padding:13px 15px;border-radius:16px}.hero-progress>div:first-child>small{display:none}.hero-progress p{margin-top:5px}.project-deadline{grid-column:1/-1;justify-content:flex-end}.hero-stat-pair{gap:8px}.hero-cost{align-items:center}.participant-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.participant-card:last-child:nth-child(odd){grid-column:auto}.product-image{max-height:330px}.product-visual{min-height:285px}.studio-milestones{grid-template-columns:1fr}.product-intro h2{font-size:43px}}
@media(max-width:650px){.showcase-selector{width:100%}.showcase-selector select{max-width:none;flex:1}.product-hero{grid-template-columns:1fr;padding:25px 22px;gap:17px}.product-intro h2{font-size:38px;margin-top:17px}.product-intro .product-description{max-width:100%}.product-stage{margin-top:14px}.product-people{margin-top:14px}.studio-outline{position:absolute;right:0;bottom:0;margin:0}.product-visual{height:260px;min-height:260px;grid-row:2}.product-image{width:100%;inset:0;max-height:260px}.project-signals{grid-template-columns:1fr 1fr;gap:8px}.hero-cost{grid-column:1/-1;padding:11px 15px}.hero-cost>span:first-child{display:flex;align-items:center;gap:15px}.project-deadline{justify-content:center}.team-progress{padding:23px 16px}.team-section-head{align-items:flex-start;flex-direction:column;gap:14px}.team-section-head h2{font-size:16px}.participant-grid{grid-template-columns:1fr}.participant-card{padding:22px 23px 0}.participant-open{width:calc(100% + 46px);margin-left:-23px;padding-left:23px;padding-right:23px}.participant-middle{justify-content:space-between}.studio-ring{width:101px;height:101px}.project-studio{border-radius:19px}.hero-progress>div:first-child>span{font-size:11px}}
