/* Shared Labs hero; the existing catalogue retains its responsive layout. */
.lab-desktop-only { display: none; }
.labs-page button.pill { font-family: inherit; line-height: inherit; }
.labs-page .tool-card .section-title { margin-bottom: 24px; }
.labs-page .labs-page-wrap { display: flex; flex-direction: column; padding-top: 0; animation: none; }
.labs-page .lab-page-intro {
    position: relative; isolation: isolate; display: grid; place-items: center;
    width: 100%; max-width: none; height: 100svh; min-height: 420px;
    margin: 0; padding: 100px 24px 64px; overflow: hidden; user-select: none; -webkit-user-select: none;
    background: radial-gradient(ellipse at 50% 58%, #17392b59, transparent 65%), #0a0d0b;
}
.lab-page-intro::after {
    content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none;
    background: linear-gradient(#0a0a0a 0%, transparent 24% 76%, #0a0a0a 100%),
        radial-gradient(ellipse at 50% 50%, #0a100cc9 0%, #0a100c59 24%, transparent 49%);
}
.lab-hero-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lab-page-intro h1 {
    position: relative; z-index: 2; margin: 0; text-align: center;
    color: #edeee5; font: 500 clamp(76px, 9vw, 132px)/.98 var(--font-heading);
    letter-spacing: -.065em; text-shadow: 0 5px 50px #07130bac;
}
.lab-page-intro h1 span { color: #a5bfa9; }
.lab-hero-scroll {
    position: absolute; z-index: 2; bottom: clamp(25px, 5vh, 52px); left: calc(50% - 24px);
    width: 48px; height: 48px; display: grid; place-items: center;
    color: #acc4b1; border: 1px solid #c0dac022; border-radius: 50%;
    background: #7dba9b06; transition: border-color .2s, background .2s;
}
.lab-hero-scroll:hover { background: #a0cfb210; border-color: #c0dac063; }
.lab-hero-scroll:focus-visible { outline: 2px solid #b0dfc0; outline-offset: 5px; }
.labs-page #games { order: 1; }
.labs-page #tools-section { order: 2; }
.labs-page #ai-tools { order: 3; }
.labs-page .labs-disclosure-wrapper { order: 4; }
.labs-page .footer { order: 5; }
@media (max-width: 600px) {
    .lab-page-intro h1 { font-size: clamp(62px, 17vw, 88px); }
    .labs-page .lab-page-intro { padding-top: 90px; padding-bottom: 70px; }
}
@media (max-height: 500px) {
    .labs-page .lab-page-intro { min-height: 320px; padding: 70px 24px 60px; }
    .lab-page-intro h1 { font-size: clamp(54px, 17vh, 76px); }
    .lab-hero-scroll { width: 36px; height: 36px; left: calc(50% - 18px); bottom: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .lab-hero-scroll { transition: none; }
}

/* Labs page design: the same at every size; tablets and phones adapt below. */
.labs-page { --lab-paper: #edeee5; --lab-muted: #99a39c; --lab-mint: #b0dfc0; }
.labs-page .lab-desktop-only { display: block; }
.labs-page .lab-mobile-copy { display: none; }
.labs-page .labs-page-wrap > * { animation: none; }
.labs-page [data-animate] { opacity: 1 !important; transform: none !important; }
.labs-page .nav { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.labs-page .nav::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -26px; background: linear-gradient(#0a0a0af5 25%,#0a0a0ac9 65%,transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); mask-image: linear-gradient(#000 55%,transparent); -webkit-mask-image: linear-gradient(#000 55%,transparent); pointer-events: none; }
.labs-page .nav-contact-btn { border: 1px solid #ffffff25; border-radius: 100px; padding: 13px 23px; }
.labs-page .btn-corners { display: none; }
.labs-page a:focus-visible, .labs-page button:focus-visible { outline: 2px solid var(--lab-mint); outline-offset: 6px; }
.labs-page .extras-content { width: calc(100% - clamp(80px,12vw,200px)); max-width: 1440px; margin-inline: auto; padding: 0; }
    .labs-page .extras-section { padding: 80px 0 0; scroll-margin-top: 95px; }
.labs-page #games { order: 1; }
.labs-page #tools-section { order: 2; padding-top: 100px; }
.labs-page #ai-tools { order: 3; padding-top: 100px; }
.labs-page .section-header { position: relative; margin-bottom: 32px; }
.labs-page .section-label { margin-bottom: 15px; }
.labs-page .section-title { color: var(--lab-paper); font: 500 clamp(30px,3vw,44px)/1.12 var(--font-heading); letter-spacing: -.045em; }
.labs-page .section-title br { display: none; }
.lab-section-description { position: absolute; right: 0; bottom: 3px; max-width: 40%; margin: 0; color: var(--lab-muted); font: 14px/1.7 var(--font-body); }
.labs-page .games-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; margin: 0; }
.labs-page .game-card { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; align-items: center; padding: 0 0 23px; background: none; border: 0; border-bottom: 1px solid #ffffff20; border-radius: 0; box-shadow: none; transform: none; }
.labs-page .game-card-icon { display: none; }
.labs-page .game-card-content h3 { font: 500 25px/1.25 var(--font-heading); letter-spacing: -.035em; margin: 23px 0 8px; }
.labs-page .game-card-content p { color: var(--lab-muted); font: 14px/1.7 var(--font-body); margin: 0; }
.labs-page .game-card-btn { font: 500 10px/1.5 var(--font-body); color: #c4dfcc; letter-spacing: .06em; padding-top: 25px; }
.lab-art { position: relative; isolation: isolate; overflow: hidden; border-radius: 10px; transition: filter .3s; }
.game-card:hover .lab-art, .tool-card:hover .lab-art { filter: brightness(1.09); }
.lab-game-art { grid-column: 1/-1; width: 100%; height: clamp(260px,23vw,335px); }
.lab-art-tag { position: absolute; z-index: 3; left: 22px; top: 20px; color: #e2e7d1aa; font: 9px/1.5 var(--font-body); letter-spacing: .16em; }
.lab-play-disc { position: absolute; z-index: 3; right: 22px; bottom: 22px; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; color: #f1f0df; background: #10191e36; border: 1px solid #ffffe530; font: 23px/1 var(--font-body); transition: transform .25s; }
.game-card:hover .lab-play-disc { transform: rotate(45deg); }
.lab-cycle-art { background: linear-gradient(#abbcac,#d2ceb0); }
.lab-cycle-art .lab-art-tag { color: #334a3fcc; }
.lab-cycle-sun { position: absolute; left: 25%; top: 17%; width: 82px; height: 82px; background: #eee1b7; border-radius: 50%; box-shadow: 0 0 70px #ffebb842; }
.lab-cycle-scene { position: absolute; bottom: -2px; left: 0; width: 100%; height: 95%; }
.lab-drive-art { background: radial-gradient(ellipse at 50% 10%,#35425f,#171b30 62%,#0d1220); perspective: 360px; }
.lab-drive-sun { position: absolute; left: calc(50% - 42px); top: 19%; width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(#f0bcb3,#a597d2); box-shadow: 0 0 70px #dca9c626; }
.lab-drive-city { position: absolute; left: 12%; right: 12%; top: 24%; height: 45%; background: #101625; clip-path: polygon(0 38%,8% 38%,8% 8%,16% 8%,16% 52%,25% 52%,25% 29%,33% 29%,33% 70%,65% 70%,65% 34%,74% 34%,74% 47%,83% 47%,83% 0,91% 0,91% 30%,100% 30%,100% 100%,0 100%); }
.lab-drive-road { position: absolute; left: -20%; bottom: -50%; width: 140%; height: 112%; background: repeating-linear-gradient(90deg,transparent 0 52px,#7184ab38 53px 54px),repeating-linear-gradient(0deg,transparent 0 35px,#7184ab38 36px 37px),#172035; transform: rotateX(60deg); border-top: 1px solid #aab3ce66; }
.lab-drive-road::after { content: ""; position: absolute; left: 49%; width: 2%; height: 100%; background: repeating-linear-gradient(0deg,transparent 0 22px,#b6ffe5 23px 55px); filter: drop-shadow(0 0 6px #b6ffe5); }
.lab-drive-car { position: absolute; bottom: 25px; left: calc(50% - 33px); width: 66px; height: 79px; border-radius: 14px 14px 8px 8px; transform: perspective(200px) rotateX(28deg); background: linear-gradient(90deg,#d4a466,#f8d495 28%,#eebf77 75%,#a97745); box-shadow: -7px 8px 0 -4px #020609,7px 8px 0 -4px #020609,0 15px 25px #0009; }
.lab-drive-car::before { content: ""; position: absolute; inset: 12px 8px 26px; border-radius: 8px 8px 3px 3px; background: linear-gradient(160deg,#9ab8bc,#28444f); border-bottom: 6px solid #e9bb78; }
.lab-drive-car::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 6px; height: 4px; background: linear-gradient(90deg,#ff6464 22%,transparent 22% 78%,#ff6464 78%); filter: drop-shadow(0 0 4px #ff6464); }

.labs-page .tools-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 42px 28px; }
.labs-page .tool-card { display: flex; flex-direction: column; min-width: 0; text-align: left; padding: 0 0 24px; background: none; border: 0; border-bottom: 1px solid #ffffff20; border-radius: 0; box-shadow: none; }
.labs-page .tool-card .section-label { margin: 23px 0 9px; }
.labs-page .tool-card .section-title { font-size: 25px; line-height: 1.25; letter-spacing: -.035em; }
.labs-page .tool-card .cta-button { align-self: flex-start; margin-top: auto; padding: 0 0 7px; border: 0; border-bottom: 1px solid #acc4b04d; border-radius: 0; background: none; box-shadow: none; color: #c4dfcc; font: 500 10px/1.5 var(--font-body); letter-spacing: .06em; transform: none !important; }
.lab-tool-art { flex: 0 0 auto; width: 100%; height: clamp(205px,18vw,260px); }
.lab-cv-art { display: grid !important; place-items: center; background: radial-gradient(ellipse at 50% 50%,#354139,#202c26); }
.lab-cv-paper { width: 54%; max-width: 210px; height: 85%; padding: 21px; background: #e9e8dd; color: #293e32; transform: rotate(-8deg) translateY(11px); border-radius: 3px; box-shadow: 15px 15px 35px #0004; }
.lab-paper-label { font: 6px/1.5 var(--font-body); letter-spacing: .1em; }
.lab-cv-paper strong { display: block; font: 500 28px/1.05 var(--font-heading); letter-spacing: -.06em; margin: 8px 0 13px; }
.lab-cv-paper i { display: block; width: 95%; height: 3px; margin: 5px 0; background: #65857244; }
.lab-cv-paper i:nth-child(4) { width: 75%; }
.lab-cv-paper b { display: block; font: 7px/1.5 var(--font-body); letter-spacing: .13em; margin-top: 12px; }
.lab-cv-seal { position: absolute; top: 31%; right: 10%; padding: 12px 15px; background: #a8c9af; color: #274733; border-radius: 4px; transform: rotate(8deg); font: 10px/1.5 var(--font-body); box-shadow: 0 8px 18px #0003; }
.lab-poster-art { display: grid !important; place-items: center; background: #403230; }
.lab-poster-sheet { position: relative; width: 53%; height: 94%; padding: 18px; background: #e2a084; color: #442628; transform: rotate(9deg) translateY(10px); box-shadow: -15px 15px 20px #0004; }
.lab-poster-sheet::before { content: ""; position: absolute; width: 125px; height: 125px; right: -10px; bottom: -12px; border: 26px solid #b55348; border-radius: 50%; }
.lab-poster-sheet small { position: relative; font: 7px/1.5 var(--font-body); letter-spacing: .14em; }
.lab-poster-sheet strong { display: block; position: relative; z-index: 1; margin-top: 15px; font: 700 clamp(31px,3.2vw,47px)/.92 var(--font-heading); letter-spacing: -.07em; }
.lab-poster-sheet span { position: absolute; bottom: 16px; font: 6px/1.5 var(--font-body); letter-spacing: .12em; }
.lab-palette-art { background: radial-gradient(ellipse at 50% 55%,#3e384c,#262230); }
.lab-palette-art i { position: absolute; left: calc(50% - 32px); top: 12%; width: 64px; height: 77%; border-radius: 6px; transform-origin: 50% 92%; transform: rotate(var(--angle)); background: var(--color); box-shadow: 3px 5px 12px #0004; transition: transform .35s; }
.lab-palette-art i::before { content: ""; position: absolute; left: 8px; right: 8px; bottom: 20px; height: 18%; background: #fff5; }
.lab-palette-art i::after { content: ""; position: absolute; bottom: 10px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #3339; }
.tool-card:hover .lab-palette-art i { transform: rotate(calc(var(--angle) * 1.12)); }
.lab-slides-art { display: grid !important; place-items: center; background: #29333c; }
.lab-slide-sheet { position: relative; width: 72%; padding: 24px; background: #b4c9d3; color: #2a4657; border-radius: 4px; transform: rotate(-6deg); box-shadow: 9px 9px 0 #798d99,17px 17px 0 #4a6171,24px 24px 25px #0005; }
.lab-slide-sheet small { font: 6px/1.5 var(--font-body); letter-spacing: .13em; }
.lab-slide-sheet strong { position: relative; z-index: 1; display: block; font: 500 clamp(26px,2.5vw,37px)/1.04 var(--font-heading); letter-spacing: -.055em; margin: 14px 0; }
.lab-slide-sheet span { font: 7px/1.5 var(--font-body); }
.lab-slide-sheet i { position: absolute; top: 34%; right: 8%; width: 30%; aspect-ratio: 1; border: 14px solid #e0a987; border-radius: 50%; }
.lab-proof-art { display: grid !important; place-items: center; background: #303b33; }
.lab-proof-paper { position: relative; width: 76%; padding: 26px 22px; background: #e5e7dc; color: #2d3930; border-radius: 4px; transform: rotate(-5deg); box-shadow: 12px 20px 35px #0004; }
.lab-proof-paper small { font: 7px/1.5 var(--font-body); letter-spacing: .13em; }
.lab-proof-paper strong { display: block; font: 500 clamp(22px,2.2vw,32px)/1.4 var(--font-heading); letter-spacing: -.04em; margin-top: 14px; }
.lab-proof-paper em { font-style: normal; text-decoration: underline wavy #b56552 2px; text-underline-offset: 4px; }
.lab-proof-paper span { position: absolute; right: -10px; bottom: -17px; padding: 10px 15px; border-radius: 5px; background: #afe3be; color: #23442c; font: 10px/1.5 var(--font-body); transform: rotate(5deg); box-shadow: 0 8px 20px #0003; }
.lab-nova-art { display: grid !important; place-items: center; background: radial-gradient(ellipse at 50% 50%,#263b39,#132623 65%,#12201d); }
.lab-nova-orbit { width: 120px; height: 120px; border: 1px solid #7bbb9a3a; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 20px #8dceb307,0 0 0 40px #8dceb307; transform: translateY(-6px); }
.lab-nova-orbit i { width: 78px; height: 78px; border-radius: 50%; background: radial-gradient(circle at 30% 25%,#c3f4d7,#76bfb3 30%,#376568 60%,#112828 86%); box-shadow: 0 0 30px #a4e2c519,inset -5px -10px 13px #061b2577; }
.lab-nova-art > span { position: absolute; bottom: 22px; color: #9fbdb1; font: 8px/1.5 var(--font-body); letter-spacing: .25em; }

.labs-page #ai-tools > .extras-content { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; }
.labs-page #ai-tools .section-header, .labs-page #aiImageGen { grid-column: 1/-1; }
.labs-page #ai-tools .section-header { margin-bottom: 6px; }
.labs-page .ai-tool-card { margin: 0; border-color: #ffffff1c; border-radius: 12px; background: #111613; padding: 32px; }
.labs-page #aiImageGen { display: grid; grid-template-columns: 1fr 1fr; min-height: 410px; padding: 0; }
.labs-page .ai-controls { padding: 36px; }
.labs-page .ai-tool-header { gap: 12px; margin-bottom: 12px; }
.labs-page .ai-tool-header h3 { font: 500 24px/1.3 var(--font-heading); letter-spacing: -.03em; }
.labs-page .ai-tool-desc { color: var(--lab-muted); font: 14px/1.8 var(--font-body); margin-bottom: 24px; }
.labs-page .ai-image-display { border-color: #ffffff12; min-height: 400px; background: radial-gradient(ellipse at 50% 40%,#293d37,#15221d 70%); overflow: hidden; }
.lab-image-empty { text-align: center; padding: 35px 25px; }
.lab-dream-frame { position: relative; width: 137px; height: 153px; margin: 0 auto 25px; border-radius: 70px 70px 4px 4px; border: 1px solid #abc7b65c; background: linear-gradient(#c6c9b6,#779a86); box-shadow: 11px 12px 0 #4d645a; overflow: hidden; transform: rotate(-5deg); }
.lab-dream-frame i { position: absolute; width: 42px; height: 42px; top: 22px; right: 20px; background: #ece0b1; border-radius: 50%; }
.lab-dream-frame span { position: absolute; left: -22%; right: -20%; bottom: -30%; height: 85%; border-radius: 45% 80% 0 0; background: #355948; transform: rotate(-23deg); box-shadow: 12px -15px 0 #75967b; }
.lab-image-empty p { color: #d0dece; font: 500 25px/1.25 var(--font-heading); letter-spacing: -.03em; margin: 0 0 18px; }
.lab-image-empty small { color: #829e8b; font: 8px/1.5 var(--font-body); letter-spacing: .16em; }
#imageDisplayArea:has(#generatedImage[src]:not([src=""])) .lab-image-empty,
#imageDisplayArea:has(#imageLoading[style*="block"]) .lab-image-empty { display: none; }
.labs-page #generatedImage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.labs-page .ai-textarea { height: 116px; font-size: 13px; padding: 16px; line-height: 1.6; background: #080d0a66; border-color: #9cbba030; border-radius: 7px; }
.labs-page .ai-generate-btn { background: #b3dfbf; color: #162a1c; font: 600 10px/1.5 var(--font-body); letter-spacing: .06em; padding: 13px 23px; box-shadow: none; border-radius: 6px; }
.labs-page .ai-generate-btn:hover { background: #d1efd8; box-shadow: none; }
.labs-page .ai-generate-btn.full-width { margin-bottom: 23px; }
.labs-page .ai-generate-btn:disabled { opacity: .55; }
.labs-page .suggestions-label { font-size: 10px; color: #94a99a; }
.labs-page .suggestion-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.labs-page .pill { padding: 7px 10px; font-size: 10px; color: #adbaaf; border-color: #8aaa922c; background: transparent; }
.labs-page .pill:hover { border-color: #a5cfaf; color: #d6efda; }
.labs-page .ai-loading-text { font-size: 13px; line-height: 1.8; }
.labs-page .chat-messages { min-height: 98px; max-height: 250px; background: #060b0833; padding: 16px; border-radius: 7px; }
.labs-page .chat-message { font-size: 12px; line-height: 1.7; background: #a5c9ac0d; border-color: #a5c9ac20; }
.labs-page .ai-input { min-width: 0; background: #080d0a66; border: 1px solid #9cbba030; border-radius: 6px; padding: 13px; font-size: 12px; }
.labs-page #telegramBot { display: flex; flex-direction: column; background: transparent; }
.labs-page #telegramBot .ai-tool-header { margin-bottom: 24px; }
.labs-page #telegramBot .ai-tool-desc { max-width: 44ch; }
.labs-page #telegramBot .ai-generate-btn { align-self: flex-start; width: auto; margin-top: auto; padding: 0 0 8px; border-radius: 0; background: none; color: #c4dfcc; border: 0; border-bottom: 1px solid #acc4b04d; }
.labs-page .labs-disclosure-wrapper { order: 4; width: calc(100% - clamp(80px,12vw,200px)); max-width: 1440px; margin: 24px auto 75px; padding: 0; justify-content: flex-start; }
.labs-page .labs-disclosure { max-width: none; border: 0; background: none; padding: 0; font-size: 10px; color: #829087; }
.labs-page .labs-disclosure-icon { display: none; }
.labs-page .labs-disclosure a { color: #a9c9b2; }
.labs-page .footer { order: 5; }
.labs-page * { scrollbar-width: thin; scrollbar-color: #496554 #101713; }

@media (max-width: 1200px) {
    .lab-section-description { max-width: 35%; font-size: 11px; }
    .labs-page .tools-grid { gap: 34px 22px; }
    .labs-page .tool-card .section-title { font-size: 23px; }
    .lab-cv-paper { padding: 16px; }
    .lab-cv-paper strong { font-size: 24px; }
    .lab-cv-seal { right: 6%; padding: 9px; font-size: 8px; }
    .lab-poster-sheet { width: 59%; }
    .lab-proof-paper { padding: 20px 17px; }
    .labs-page .ai-controls, .labs-page .ai-tool-card { padding: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .labs-page *, .labs-page *::before, .labs-page *::after { transition: none !important; animation: none !important; }
}


/* Tablets: two tool columns; AI tools stack; descriptions sit under titles. */
@media (max-width: 1024px) {
    .labs-page .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .labs-page #ai-tools > .extras-content { grid-template-columns: 1fr; }
    .lab-section-description { position: static; max-width: 52ch; margin: 14px 0 0; font-size: 14px; }
}
/* Phones: one column, with the site's usual 20px gutters. */
@media (max-width: 768px) {
    .labs-page .extras-content, .labs-page .labs-disclosure-wrapper { width: calc(100% - 40px); }
    .labs-page .extras-section { padding-top: 64px; }
    .labs-page #tools-section, .labs-page #ai-tools { padding-top: 72px; }
    .labs-page .games-grid, .labs-page .tools-grid { grid-template-columns: 1fr; gap: 36px; }
    .lab-game-art, .lab-tool-art { height: 220px; }
    .labs-page #aiImageGen { grid-template-columns: 1fr; min-height: 0; }
    .labs-page .ai-image-display { min-height: 300px; }
    .labs-page .ai-controls, .labs-page .ai-tool-card { padding: 24px; }
    .labs-page .nav-contact-btn { padding: 10px 16px; }
}