/* Approved concept A: native music geometry and softly lit illustration fields. */
body.oy-site.lab-home{--deep:#193f61;--blue:#2a6588;--ink:#24495f;--muted:#526c80;background:#eaf6fc;background-image:radial-gradient(ellipse at 88% 8%,#d9effb 0,transparent 34%),linear-gradient(155deg,#f0faff 0,#e7f5fc 36%,#eff8fc 80%);background-attachment:fixed}
.lab-home .shell{width:min(1280px,calc(100% - 64px))}
.lab-home h1,.lab-home h2,.lab-home h3,.lab-home strong{font-weight:400}
.lab-home .lab-intro{display:block;padding:46px 0 32px;position:relative}
.lab-home .lab-intro h1{font-size:46px;line-height:1.3;color:#173d5c;letter-spacing:-.025em}
.lab-home .lab-intro p{font-size:16px;max-width:none;margin-top:13px;line-height:1.8}
.lab-home .lab-intro br{display:none}
.lab-home .tool-hub{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:stretch}
.lab-home .progression-feature,.lab-home .tool-link{background:linear-gradient(145deg,#fff 60%,#f6fbff);border:0;border-radius:14px;box-shadow:0 9px 25px -22px #47718a40}
.lab-home .progression-feature{padding:28px 28px 22px;min-width:0}
.lab-home .module-heading{padding-right:0}
.lab-home .feature-heading h2{font-size:29px}.lab-home .feature-heading p{margin-top:6px;color:var(--muted)}
.lab-home .featured-example{margin:6px 0 18px}
.lab-home .example-title{margin-top:13px}.lab-home .example-title>strong{font-size:16px}
.lab-home .feature-score{height:130px;overflow:hidden;margin:5px 0 -15px}
.lab-home .feature-score svg{width:100%;height:100%;display:block}.lab-home .feature-score svg text:not([style]){display:none}
.lab-home .hero-keyboard{height:110px;margin-top:11px;overflow:hidden}
.lab-home .hero-keyboard svg{width:100%;height:100%;display:block}
.lab-home .hero-keyboard .key-dot{transition:opacity .16s ease-out}
.lab-home .featured-chords{gap:8px;margin:0}
.lab-home .featured-chords>span{padding:8px 2px;border-radius:7px;background:#e5f4ef;border:0;box-shadow:0 3px 0 #d0e7e1;transition:background .15s ease-out}
.lab-home .featured-chords>span:nth-child(even){background:#fcf0e6;box-shadow:0 3px 0 #ecdccc}
.lab-home .featured-chords>span.active{background:#c0e5f3;box-shadow:0 3px 0 #75adc4}
.lab-home .featured-chords strong{font-size:20px}.lab-home .featured-chords small{font-size:11px;color:#405f75}
.lab-home .featured-example>p{font-size:12px;margin-top:7px;color:var(--muted)}
.lab-home .feature-actions{gap:8px 16px}.lab-home .feature-actions .primary{background:linear-gradient(130deg,#326c91,#1c4b72);border-radius:28px;gap:10px;padding:12px 20px;box-shadow:0 5px 12px #244c7117}
.lab-home .feature-actions .primary:before{content:'';border-left:9px solid white;border-top:6px solid transparent;border-bottom:6px solid transparent}
.lab-home .feature-actions .subtle{font-size:12px;margin-left:0}.lab-home .feature-actions .metronome-control{font-size:12px}
.lab-home .tool-companions{gap:16px;grid-template-rows:1fr 1fr}
.lab-home .tool-link{padding:22px 25px 16px;position:relative;gap:0;justify-content:flex-start}
.lab-home .tool-link h2{font-size:24px}.lab-home .tool-link p{font-size:12px}
.lab-home .companion-art{height:157px;margin-top:4px}.lab-home .companion-art svg{height:100%;width:100%;display:block}
.lab-home .companion-art--substitution{height:127px;margin-top:8px}
.lab-home .tool-action{font-size:12px;position:absolute;right:22px;bottom:15px;color:var(--blue)}
.lab-home .catalog{padding:48px 0 20px}.lab-home .catalog .section-heading{margin-bottom:20px;align-items:baseline}.lab-home .catalog h2{font-size:31px}.lab-home .catalog .section-heading p{font-size:13px}
.lab-home .filter-row{display:flex;flex-wrap:wrap;gap:5px;padding:5px;border-radius:28px;background:#f6fbfe;width:fit-content;margin-bottom:28px}
.lab-home .filter-row button{border:0;background:transparent;padding:10px 19px;border-radius:24px;min-height:44px;font-size:13px;color:#3e5e78}
.lab-home .filter-row button[aria-pressed=true]{background:linear-gradient(120deg,#376e93,#234f74);color:#fff}
.lab-home .catalog-group{display:block;border:0;padding:0 0 32px}
.lab-home .group-label{display:flex;align-items:baseline;gap:20px;padding:0 2px 14px}.lab-home .group-label h3{font-size:19px;color:var(--deep)}.lab-home .group-label p{font-size:12px;margin:0;color:#597387}
.lab-home .catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lab-home .experiment-entry{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0 0 22px;background:linear-gradient(140deg,#fff 68%,#f7fcff);border:0;border-radius:14px;overflow:hidden;min-width:0;box-shadow:0 7px 20px -18px #44698166}
.lab-home .tool-art{height:auto;aspect-ratio:1.75;flex-shrink:0;width:100%;padding:5px 8px 0}
.lab-home .tool-art svg{width:100%;height:100%;display:block;overflow:visible}
.lab-home svg text{font-family:var(--font);font-weight:400}
.lab-home .entry-copy{padding:10px 48px 0 22px}.lab-home .experiment-entry h3{font-size:20px;line-height:1.45;color:var(--deep)}.lab-home .experiment-entry p{font-size:12px;line-height:1.8;margin-top:6px;color:var(--muted)}
.lab-home .entry-arrow{position:absolute;right:16px;bottom:24px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#edf7fc;color:#295877;font-size:19px}
.lab-home .experiment-entry:focus-visible,.lab-home .tool-link:focus-visible{outline:3px solid #347594;outline-offset:4px}
@media(hover:hover){.lab-home .experiment-entry:hover,.lab-home .tool-link:hover{box-shadow:0 9px 24px -16px #52798e7a}.lab-home .experiment-entry:hover .entry-arrow{background:#d9edf7}.lab-home .experiment-entry:hover .tool-art{transform:translateY(-3px)}}
.lab-home .tool-art{transition:transform .22s cubic-bezier(.16,1,.3,1)}
.lab-home [data-group=theory] .experiment-entry:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.3fr;align-items:center;padding:0 32px 0 15px}.lab-home [data-group=theory] .experiment-entry:last-child .tool-art{max-height:220px}.lab-home [data-group=theory] .experiment-entry:last-child .entry-copy{padding:25px}
.lab-home [data-group=harmony] .catalog-grid{grid-template-columns:1fr}.lab-home [data-group=harmony] .experiment-entry{display:grid;grid-template-columns:1fr 1.3fr;align-items:center;padding:0 32px 0 15px}.lab-home [data-group=harmony] .tool-art{max-height:220px}.lab-home [data-group=harmony] .entry-copy{padding:25px}.lab-home [data-group=harmony] h3{font-size:25px}
.lab-home .foundation{padding-top:35px}.lab-home .foundation h2{font-size:29px}.lab-home .foundation .section-heading p{font-size:13px}
.lab-home footer{border-top:1px solid #d2e4ef;color:#56748b}
@media(min-width:1450px){.lab-home .progression-feature{padding:30px 34px}.lab-home .feature-score{height:168px}.lab-home .hero-keyboard{height:140px}.lab-home .companion-art{height:144px}.lab-home .companion-art--substitution{height:120px}}
@media(max-width:1000px){.lab-home .shell{width:calc(100% - 40px)}.lab-home .lab-intro h1{font-size:38px}.lab-home .progression-feature{padding:23px 20px}.lab-home .tool-hub{grid-template-columns:1.4fr 1fr}.lab-home .feature-heading h2{font-size:25px}.lab-home .tool-link{padding:20px 18px 18px}.lab-home .tool-link h2{font-size:21px}.lab-home .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lab-home .catalog .section-heading{display:block}.lab-home .catalog .section-heading p{margin-top:8px}}
@media(max-width:760px){.lab-home .shell{width:calc(100% - 32px)}.lab-home .lab-intro{padding:26px 0 23px}.lab-home .lab-intro h1{font-size:32px}.lab-home .lab-intro p{font-size:13px;line-height:1.8;margin-top:12px}.lab-home .tool-hub{grid-template-columns:1fr}.lab-home .feature-heading h2{font-size:26px}.lab-home .tool-companions{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:12px}.lab-home .tool-link{padding:17px 14px 35px}.lab-home .tool-link h2{font-size:19px}.lab-home .tool-link p{font-size:11px}.lab-home .companion-art{height:125px}.lab-home .companion-art--substitution{height:115px}.lab-home .catalog{padding-top:35px}.lab-home .catalog h2{font-size:27px}.lab-home .filter-row{border-radius:12px;gap:2px;width:100%;padding:6px}.lab-home .filter-row button{flex:1 0 29%;padding:8px 4px;font-size:12px;min-height:44px}.lab-home .group-label{gap:10px;display:block}.lab-home .group-label p{margin-top:4px}.lab-home .catalog-grid{gap:12px}.lab-home .entry-copy{padding:7px 30px 0 15px}.lab-home .experiment-entry h3{font-size:17px}.lab-home .entry-arrow{width:25px;height:25px;right:10px;bottom:17px;font-size:16px}.lab-home .foundation h2{font-size:25px}}
@media(max-width:560px){.lab-home .catalog-grid{grid-template-columns:1fr}.lab-home .experiment-entry{display:grid;grid-template-columns:42% minmax(0,1fr);align-items:center;min-height:143px;padding:10px 24px 10px 4px}.lab-home .tool-art{padding:0;aspect-ratio:1.6}.lab-home .entry-copy{padding:6px 4px 6px 10px}.lab-home .experiment-entry h3{font-size:17px}.lab-home .experiment-entry p{font-size:11px;line-height:1.7}.lab-home .entry-arrow{right:7px;bottom:11px;width:23px;height:23px}.lab-home [data-group=harmony] .experiment-entry{grid-template-columns:42% minmax(0,1fr);padding:10px 24px 10px 4px}.lab-home [data-group=harmony] .entry-copy{padding:6px 4px 6px 10px}.lab-home [data-group=harmony] h3{font-size:17px}.lab-home .tool-companions{grid-template-columns:1fr}.lab-home .tool-link{display:grid;grid-template-columns:1fr 43%;padding:18px;min-height:144px;align-items:center;column-gap:8px}.lab-home .tool-link h2{font-size:20px}.lab-home .tool-link p{font-size:11px}.lab-home .companion-art,.lab-home .companion-art--substitution{height:113px;margin:0}.lab-home .tool-action{font-size:10px;right:18px;bottom:10px}.lab-home .feature-score{height:132px}.lab-home .hero-keyboard{height:110px}.lab-home .featured-chords{gap:4px}.lab-home .featured-chords strong{font-size:17px}.lab-home .feature-actions .subtle{flex-basis:100%}.lab-home .foundation .quiet{font-size:11px}}
@media(max-width:560px){.lab-home [data-group=theory] .experiment-entry:last-child{grid-template-columns:42% minmax(0,1fr);padding:10px 24px 10px 4px}.lab-home [data-group=theory] .experiment-entry:last-child .entry-copy{padding:6px 4px 6px 10px}}
@media(prefers-reduced-motion:reduce){.lab-home .tool-art,.lab-home .key-dot{transition:none}.lab-home .experiment-entry:hover .tool-art{transform:none}}
/* Approved window-lit studio: one shared exhibit plinth, then an open gallery. */
body.oy-site.lab-jelly.lab-home{background:#eef7fc url('art/studio-window.png') center top / 100% auto no-repeat;background-attachment:scroll}
.lab-home .oy-header{background:#f1f9fdd9}
.lab-home .lab-intro{padding-block:38px 30px}
.lab-home .lab-intro p{max-width:830px}
.lab-home .tool-hub{position:relative;isolation:isolate;grid-template-columns:minmax(0,1.55fr) minmax(0,1.65fr);gap:0;padding:30px 24px 28px;margin-bottom:30px}
.lab-home .tool-hub:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(145deg,#ffffffed,#f7fafdeb 70%,#e6eef4);border-radius:12px 12px 5px 5px;box-shadow:0 9px 0 -2px #c6d4dc,0 23px 32px -18px #294f7170;transform:perspective(1300px) rotateX(3deg);transform-origin:center bottom}
.lab-home .tool-hub .progression-feature,.lab-home .tool-hub .tool-link{background:none;border-radius:0;box-shadow:none;padding:0 22px;min-width:0}
.lab-home .tool-hub .progression-feature{border-right:1px solid #d4e3eb}
.lab-home .tool-hub .tool-companions{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:0}
.lab-home .tool-hub .tool-link+.tool-link{border-left:1px solid #d4e3eb}
.lab-home .tool-hub .tool-link{display:flex;flex-direction:column;padding-bottom:34px;justify-content:flex-start}
.lab-home .tool-hub h2{font-size:clamp(18px,1.9vw,25px);line-height:1.5}
.lab-home .tool-hub .module-heading p{font-size:12px;line-height:1.8;margin-top:5px}
.lab-home .tool-hub .feature-score{height:75px;margin-block:4px -5px}
.lab-home .tool-hub .hero-keyboard{height:98px}
.lab-home .tool-hub .companion-art{height:auto;min-height:175px;flex:1;display:flex;align-items:center;margin-top:14px}
.lab-home .tool-hub .companion-art svg{height:auto;max-height:265px}
.lab-home .tool-hub .tool-action{bottom:5px;right:22px}
.lab-home .tool-hub .featured-chords{gap:5px}
.lab-home .tool-hub .featured-chords strong{font-size:18px}
.lab-home .tool-hub .featured-example{margin-bottom:12px}
.lab-home .catalog{position:relative;padding-top:35px}
.lab-home .catalog:before{content:'';position:absolute;inset:0 calc((100% - 100vw)/2);background:#f6fbfee8;z-index:-1}
.lab-home .filter-row{background:transparent;border-radius:0;padding:0 0 14px;border-bottom:1px solid #cbdfe9;width:100%;gap:8px;margin-bottom:14px}
.lab-home .filter-row button[aria-pressed=true]{background:linear-gradient(145deg,#69a9cb,#367a9f)}
.lab-home .catalog-group{padding-bottom:20px}
.lab-home .group-label{padding:18px 4px 6px}
.lab-home .catalog-grid{gap:0}
.lab-home .catalog .experiment-entry{background:transparent;border-radius:0;box-shadow:none;border-bottom:1px solid #d4e5ee;padding-bottom:24px}
.lab-home .catalog .experiment-entry:hover{box-shadow:none;background:#ffffff66}
.lab-home .catalog .experiment-entry:not(:nth-child(3n+1)){border-left:1px solid #d4e5ee}
.lab-home .catalog .tool-art{padding:12px 16px 0;aspect-ratio:1.55}
.lab-home .catalog .entry-copy{padding:10px 42px 0 16px}
.lab-home .catalog .entry-arrow{background:none;color:#3582a8;bottom:24px}
.lab-home .foundation{position:relative;padding-block:42px}
.lab-home .foundation:before{content:'';position:absolute;inset:0 calc((100% - 100vw)/2);z-index:-1;background:linear-gradient(90deg,#f4faffbd,#f4faff80),url('art/studio-window.png') center 62% / cover}
@media(min-width:1001px){.lab-home .tool-hub .feature-actions .subtle{flex-basis:100%}.lab-home .tool-hub .feature-actions .primary{padding:10px 15px}}
@media(max-width:1000px){.lab-home .tool-hub{grid-template-columns:1fr;padding:24px}.lab-home .tool-hub .progression-feature{border-right:0;padding:0 0 24px}.lab-home .tool-hub .tool-companions{border-top:1px solid #d4e3eb;padding-top:24px}.lab-home .tool-hub .tool-link{padding-inline:16px}.lab-home .tool-hub .companion-art{min-height:160px}.lab-home .tool-hub h2{font-size:24px}.lab-home .catalog .experiment-entry:not(:nth-child(3n+1)){border-left:0}.lab-home .catalog .experiment-entry:nth-child(even){border-left:1px solid #d4e5ee}}
@media(max-width:560px){body.oy-site.lab-jelly.lab-home{background-size:auto 820px;background-position:65% top}.lab-home .lab-intro{padding-block:26px}.lab-home .tool-hub{padding:20px 16px}.lab-home .tool-hub:before{transform:none}.lab-home .tool-hub .tool-companions{grid-template-columns:1fr}.lab-home .tool-hub .tool-link{display:grid;grid-template-columns:1fr 44%;padding:16px 0 26px;gap:8px}.lab-home .tool-hub .tool-link+.tool-link{border-left:0;border-top:1px solid #d4e3eb}.lab-home .tool-hub .companion-art{min-height:100px;margin:0}.lab-home .tool-hub h2{font-size:21px}.lab-home .tool-hub .tool-action{right:0}.lab-home .tool-hub .hero-keyboard{height:90px}.lab-home .catalog .experiment-entry,.lab-home .catalog .experiment-entry:nth-child(even){border-left:0;padding:14px 22px 14px 0}.lab-home .catalog .tool-art{padding:0;aspect-ratio:1.6}.lab-home .catalog .entry-copy{padding:6px 4px 6px 10px}.lab-home .filter-row{gap:2px}.lab-home .filter-row button{flex:1 0 30%}.lab-home .foundation{padding-block:30px}}
