
/* Restrained studio palette: warm white, charcoal and Pixlab blue. Orange is reserved for the hero sticker; illustrations retain their full palette. */
.pixlab-v2{--bg:#fcfbf8;--paper:#fff;--ink:#292b30;--muted:#676a70;--line:#e5e4e0;--blue:#315de4;--surface:#f4f3ef;--blue-soft:#edf2fc;background:var(--bg)}
.pixlab-v2 .site-header{background:rgba(252,251,248,.93);border-color:transparent}
.pixlab-v2 .site-header.is-scrolled{border-color:#e8e8ef;box-shadow:0 4px 22px #29274a05}
.pixlab-v2 .quick-nav{gap:5px}.pixlab-v2 .quick-nav a{padding:10px 15px}
.pixlab-v2 .quick-nav a[aria-current]{background:#eaf0ff;color:#284cb9}
.pixlab-v2 .hero{background:var(--bg);padding-top:38px}
.hero-meta{margin-bottom:35px}.hero-meta .eyebrow{background:var(--surface);border-radius:99px;padding:9px 14px;color:var(--muted)}
.edition{color:#726f86}.hero-layout{grid-template-columns:1.08fr 1fr;gap:60px}
.pixlab-v2 .hero-title{font-weight:650;line-height:1.2;letter-spacing:-.055em}
.pixlab-v2 .hero-title>span{position:relative;display:inline-block;isolation:isolate}
.pixlab-v2 .hero-title>span:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:13px;background:#e6ecfa;border-radius:50% 30%;z-index:-1;transform:rotate(-2deg)}
.pixlab-v2 .hero-copy{font-size:16px;line-height:1.9;max-width:510px}
.hero-buttons .button{background:var(--blue);border-radius:99px;padding:15px 25px;box-shadow:0 5px 14px #315de418}
.hero-signature{display:flex;align-items:center;gap:8px;color:#717581}.hero-signature:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}
.hero-visual{position:relative}.hero-image-frame{border-radius:30px;background:var(--surface);box-shadow:0 15px 40px #5747830b}
.studio-sticker{position:absolute;right:-12px;top:-16px;z-index:2;display:flex;align-items:center;gap:7px;padding:12px 16px;background:#ffdfbb;color:#724319;border:4px solid #fff9f1;box-shadow:0 4px 13px #85512612;border-radius:12px;transform:rotate(6deg);font-size:11px;font-weight:600;pointer-events:none}
.studio-sticker>b{font-size:21px;line-height:1}.hero-visual figcaption{padding-left:5px;font-size:12px;color:#747184}
.hero-bottom{border:0;margin-top:36px;padding:22px 0 26px;color:#787787}
.pixlab-v2 .section{padding:72px 0}
.pixlab-v2 .section-heading .eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border-radius:99px;padding:8px 12px;letter-spacing:.04em;font-size:11px;color:var(--muted);margin-bottom:18px}
.pixlab-v2 .section-heading .eyebrow:before{content:"✦";font-size:12px}
.pixlab-v2 .section-heading h2{font-weight:620;letter-spacing:-.04em;font-size:clamp(28px,3vw,39px);line-height:1.3}
.pixlab-v2 .section-heading>p:last-child{font-size:14px;line-height:1.85;margin-top:14px}
#building{padding:52px 0 62px}.building-list{border:0;display:grid;gap:10px}
.building-row{border:0;background:var(--surface);border-radius:16px;overflow:hidden}

.building-row summary{padding:21px 24px;grid-template-columns:28px 210px 1fr 100px 18px;gap:20px}
.row-index{color:var(--muted)}.building-name{font-size:18px}.building-desc{font-size:12px}
.state{background:#ffffffaa;border-color:#ffffffb5}.state--live{color:var(--blue)}.state--prototype{color:var(--muted)}.plus{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#ffffffb0;font-size:18px}
.building-detail{padding:0 24px 23px 72px}
#tools{background:var(--surface);border-radius:0}
#tools .section-heading .eyebrow{background:#eae9e5;color:var(--muted)}
.featured-tools{gap:16px}
.pixlab-v2 .tool-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:25px;gap:22px;transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
.pixlab-v2 .tool-card :is(h3,h4){font-size:22px;line-height:1.4;margin:24px 0 12px}
.pixlab-v2 .tool-card p{font-size:13px}
.tool-symbol{background:#edf3ff;color:#3256c8;border-radius:12px}

.pixlab-v2 .tool-tags span{background:#f5f5f3;border-radius:7px;font-size:10px}
.pixlab-v2 .tool-card .button{border-radius:99px;background:#f0f4ff;border-color:transparent;color:#3154ba;font-size:12px}
.section-note{font-size:11px;color:#7d8290}
#lab{background:var(--bg)}
#lab .section-heading .eyebrow{background:var(--surface);color:var(--muted)}
.lab-grid{gap:24px}
.lab-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px;transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
.lab-cover.lab-cover--image{border-radius:16px;background:var(--surface)}
.lab-copy{padding:22px 5px 0}.lab-copy h3{font-size:21px;margin-bottom:14px;line-height:1.4}
.lab-copy>.card-label{font-size:10px!important;letter-spacing:.05em}
.lab-copy>p:not(.card-label),.lab-copy details p{font-size:13px;line-height:1.85}
.lab-copy details{border-top:0;margin-top:20px;padding-top:0}
.lab-copy summary{padding:11px 13px;background:var(--surface);border-radius:11px;min-height:40px;font-size:11px}
.lab-copy details[open] summary{background:var(--blue-soft);color:#3154ba}
.lab-copy details p{margin:14px 3px}
.lab-cover--image .image-index{left:12px;top:12px;background:#fffc;pointer-events:none;z-index:1;border-color:transparent}
.image-zoom{position:absolute;inset:0;border:0;background:transparent;cursor:zoom-in;border-radius:inherit;color:#303652}
.image-zoom>span{position:absolute;right:12px;bottom:12px;display:flex;gap:10px;align-items:center;background:#fffef9eF;padding:9px 12px;border-radius:99px;font-size:10px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}
.image-zoom:focus-visible>span{opacity:1;transform:none}
.image-zoom:focus-visible{outline-offset:-5px}
[hidden]{display:none!important}
.buddy-roles{display:flex;gap:5px;flex-wrap:wrap;margin:15px 0 12px}
.buddy-roles button{flex:1;min-width:70px;border:1px solid #e8e8f0;background:#fff;border-radius:99px;padding:9px 7px;font-size:10px;color:#5e6480;cursor:pointer;transition:background .2s}
.buddy-roles button[aria-pressed=true]{background:#e8edff;color:#3154ba;border-color:#bdccff}


.buddy-panel{background:var(--surface);border-radius:12px;padding:13px}
.buddy-panel strong{font-size:12px;color:var(--ink)}.lab-copy .buddy-panel p{margin:7px 0 0;font-size:12px}
.lab-copy .buddy-hint{font-size:10px;color:#7a7e90;margin:12px 3px}
#cases{background:var(--surface);border-radius:0}
.case-list{display:grid;gap:14px}
.case-row,.case-row:last-child{border:0;background:#fff;border-radius:18px;overflow:hidden}
.case-row summary{padding:25px;grid-template-columns:48px 1fr auto;gap:20px}
.case-number{color:var(--muted);background:var(--surface);border-radius:13px;width:43px;height:43px;display:grid;place-items:center;font-size:18px}
.case-title{font-size:25px}.case-action{font-size:11px}
.case-row .result-copy{margin:0 25px 27px 93px}
#method .method-flow{gap:12px}
#method .method-flow li{border:0;border-radius:16px;background:var(--surface);padding:20px 16px;min-height:188px}

#method .method-flow li:before{display:none}#method .method-flow li:after{right:13px;top:20px;font-size:12px}
#method .method-flow span{color:#7d8195;font:11px ui-monospace,monospace}
#method .method-flow h3{margin-top:30px;font-size:14px}
#method .method-flow p{font-size:11px;line-height:1.7}
.section--about{background:var(--surface);border-radius:0}
#about .section-heading .eyebrow{background:#eae9e5;color:var(--muted)}
.about-grid{gap:60px}.about-statement{color:var(--ink);font-weight:500;font-size:32px}
.about-statement>span{color:#315de4}.about-copy p{font-size:14px}
.pixlab-v2 .footer{background:var(--bg);padding:50px 0}
.pixlab-v2 .footer-brand{color:var(--ink)!important}
.button,.text-link,.language-toggle{transition:transform .23s cubic-bezier(.3,1.5,.5,1),background .2s,box-shadow .2s}
.button:active,.language-toggle:active{transform:scale(.97)}
.studio-lightbox{padding:0;border:0;border-radius:24px;background:#fffdf9;color:var(--ink);max-width:min(1000px,calc(100vw - 32px));max-height:94dvh;width:fit-content;box-shadow:0 30px 100px #21213940}
.studio-lightbox::backdrop{background:#20243d80;backdrop-filter:blur(8px)}
.lightbox-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:#fffdf9;gap:20px;font-size:12px}
.lightbox-close{font-size:24px;line-height:1;width:36px;height:36px;border:0;background:#edf0ff;color:#4059ac;border-radius:50%;cursor:pointer;flex-shrink:0}
.studio-lightbox>img{display:block;max-width:100%;max-height:calc(94dvh - 100px);width:auto;height:auto;object-fit:contain;margin:auto}
.lightbox-caption{padding:15px 20px;color:#6c7080;font-size:12px;line-height:1.7;margin:0}
@media(hover:hover){.pixlab-v2 .tool-card:hover{transform:translateY(-5px);box-shadow:0 10px 24px #3349560c}.lab-card:hover{transform:translateY(-5px);box-shadow:0 12px 28px #775e4310}.image-zoom:hover>span{opacity:1;transform:none}.hero-buttons .button:hover{background:#254bc4;transform:translateY(-3px);box-shadow:0 7px 16px #315de426}.text-link:hover{transform:translateX(3px)}.quick-nav a:hover{background:var(--blue-soft)}.case-row:hover{box-shadow:0 7px 20px #54527c08}}
@media(min-width:1150px){.featured-tools{grid-template-columns:repeat(4,minmax(0,1fr))}.pixlab-v2 .tool-card{padding:22px}.pixlab-v2 .tool-card :is(h3,h4){font-size:20px;min-height:56px}.pixlab-v2 .tool-card .tool-content>p:not(.tool-privacy){min-height:70px}.pixlab-v2 .tool-tags{min-height:52px;align-content:start}.pixlab-v2 .tool-tags span{padding:5px 8px}.pixlab-v2 .tool-card .tool-privacy{font-size:10px}}
html[lang=en] .pixlab-v2 .hero-title{font-size:clamp(38px,4vw,54px);line-height:1.15}
@media(max-width:1000px){.hero-layout{gap:35px}.building-row summary{grid-template-columns:24px 178px 1fr 86px 16px;gap:12px}.studio-sticker{right:-6px;padding:10px;font-size:10px}.lab-copy h3{font-size:19px}}
@media(max-width:900px){.building-row summary{grid-template-columns:24px 1fr 90px 16px;padding:20px}.building-desc{grid-column:2/-1;grid-row:2}.building-detail{padding-left:56px}.lab-card{padding:16px;gap:22px}.lab-copy{padding:5px 0}.hero-image-frame{border-radius:24px}.about-statement{font-size:26px}#method .method-flow{grid-template-columns:repeat(4,minmax(0,1fr))}#method .method-flow li{min-height:175px;padding:18px 14px}}
@media(max-width:600px){.pixlab-v2 .hero{padding-top:27px}.hero-meta{margin-bottom:30px}.hero-meta .eyebrow{font-size:9px;padding:7px 10px}.pixlab-v2 .hero-title{font-size:clamp(32px,8.9vw,46px)}.pixlab-v2 .hero-copy{font-size:14px;line-height:1.85}.hero-layout{gap:32px}.hero-visual{margin-top:8px}.hero-signature{font-size:11px}.hero-visual figcaption{font-size:11px}.studio-sticker{top:-12px;right:4px;transform:rotate(4deg)}.hero-bottom{font-size:10px;margin-top:20px}.pixlab-v2 .section{padding:50px 0}.pixlab-v2 .section-heading h2{font-size:28px}.pixlab-v2 .section-heading>p:last-child{font-size:13px}.pixlab-v2 .section-heading .eyebrow{font-size:10px;margin-bottom:14px}.building-row summary{padding:18px 14px;grid-template-columns:18px 1fr 74px 16px;gap:9px}.building-name{font-size:15px}.building-desc{font-size:11px}.state{font-size:9px;padding:5px}.plus{width:20px;height:20px}.building-detail{padding:0 18px 20px 41px}.building-detail p{font-size:12px}.pixlab-v2 .tool-card{padding:24px}.pixlab-v2 .tool-card :is(h3,h4){font-size:23px}.lab-card{padding:13px;border-radius:21px}.lab-grid{gap:23px}.lab-copy{padding:21px 5px 4px}.lab-copy h3{font-size:22px}.lab-copy>p:not(.card-label),.lab-copy details p{font-size:13px}.lab-cover.lab-cover--image{border-radius:13px}.case-row summary{grid-template-columns:32px 1fr;padding:20px 16px;gap:12px}.case-number{width:30px;height:33px;border-radius:10px;font-size:14px}.case-title{font-size:21px}.case-row .result-copy{margin:0 20px 24px}.case-row .result-copy p{font-size:13px}#method .method-flow{grid-template-columns:1fr 1fr;gap:10px}#method .method-flow li{min-height:164px}#method .method-flow h3{margin-top:25px}.about-grid{gap:26px}.about-statement{font-size:27px}.about-copy p{font-size:13px}.image-zoom>span{opacity:1;transform:none;font-size:9px;padding:7px 10px}.studio-lightbox{max-width:calc(100vw - 20px);border-radius:16px}.lightbox-caption{font-size:11px}.lightbox-head{font-size:11px}html[lang=en] .pixlab-v2 .hero-title{font-size:37px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

body.studio-image-open{overflow:hidden}.hero-image-frame{position:relative}

.buddy-details[open] summary>span:first-child{transform:none}
@media(max-width:600px){.hero-layout{grid-template-columns:1fr}}

/* A tool is one native link; a Lab card delegates to its native disclosure. */
.pixlab-v2 .tool-card{color:var(--ink);text-decoration:none}
.pixlab-v2 .tool-card:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.pixlab-v2 .tool-card .tool-open{transform:none}
.lab-card{cursor:pointer}
.lab-card:has(summary:focus-visible){outline:2px solid var(--blue);outline-offset:4px}
.lab-card .image-zoom{inset:auto 12px 12px auto;border-radius:99px;min-height:40px}
.lab-card .image-zoom>span{position:static;opacity:1;transform:none}
.lab-card details> :not(summary){cursor:auto}

/* Toolkit categories share the existing card visual language. */
.toolkit-group + .toolkit-group{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.toolkit-group-title{margin:0 0 18px;font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.4}
.toolkit-group--marketing .featured-tools{grid-template-columns:1fr}
@media(min-width:701px){
 .pixlab-v2 .toolkit-group--marketing .tool-card{flex-direction:row;align-items:center;gap:32px}
 .toolkit-group--marketing .tool-content{display:grid;grid-template-columns:48px 1fr;column-gap:20px;align-items:start}
 .toolkit-group--marketing .tool-symbol{grid-column:1;grid-row:1 / 6;position:static}
 .toolkit-group--marketing .tool-content>:not(.tool-symbol){grid-column:2}
 .pixlab-v2 .toolkit-group--marketing .tool-card h4{margin:8px 0;min-height:0}
 .pixlab-v2 .toolkit-group--marketing .tool-card .tool-content>p{min-height:0}
 .pixlab-v2 .toolkit-group--marketing .tool-tags{margin:14px 0 10px;min-height:0}
 .pixlab-v2 .toolkit-group--marketing .tool-card .button{margin-top:0}
}
@media(max-width:700px){.toolkit-group .featured-tools{grid-template-columns:1fr}.toolkit-group + .toolkit-group{margin-top:28px;padding-top:24px}}

/* Keep the existing visual identity; expose evidence without opening each case. */
#cases .section-heading > p:last-child{text-wrap:balance}
.case-row summary > span:nth-child(2){min-width:0}
.case-evidence{display:block;margin-top:12px;max-width:56ch;font-size:15px;line-height:1.75;color:var(--ink);font-weight:400;letter-spacing:0;overflow-wrap:anywhere}
.case-row .case-action{display:inline-flex;align-items:center;gap:12px;font-size:13px;line-height:1.5;white-space:nowrap;color:#555b66}
.case-action-close{display:none}
.case-row[open] .case-action-open{display:none}
.case-row[open] .case-action-close{display:inline}
.case-disclosure-icon{position:relative;width:14px;height:14px;flex:none}
.case-disclosure-icon::before,.case-disclosure-icon::after{content:"";position:absolute;inset:6px 0 auto;height:1.5px;background:currentColor}
.case-disclosure-icon::after{transform:rotate(90deg)}
.case-row[open] .case-disclosure-icon::after{display:none}
@media(max-width:600px){.case-evidence{font-size:14px;margin-top:10px;line-height:1.7}.case-row .case-action{font-size:13px;margin-top:2px}}
