/* Sonic Design Studio public shell and inspiration-first discovery. */
.studio-shell.main{margin:0;min-height:100vh;background:#f8f6ee;color:#14180f;display:block}.studio-header{height:88px;position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:0 clamp(22px,5vw,88px);background:#f8f6eeed;backdrop-filter:blur(20px);border-bottom:1px solid #2e4d3010;transition:height .35s,box-shadow .35s}.page-scrolled .studio-header{height:66px;box-shadow:0 5px 25px #2d503407}.studio-logo{display:flex;align-items:center;gap:11px;flex-shrink:0}.studio-logo-mark{display:block;width:46px;height:auto;flex-shrink:0}.studio-logo>span:last-child{font-size:24px;font-weight:700;letter-spacing:-1.2px;line-height:1}.studio-logo-sub{display:block;font-size:14px;letter-spacing:2.6px;font-weight:500;margin-top:7px;color:#7f927c}.studio-top-nav{display:flex;align-items:center;gap:27px;font-size:14px;color:#87917e}.studio-top-nav>a{position:relative;padding:15px 0;transition:color .2s}.studio-top-nav>a:hover,.studio-top-nav>a.current{color:#2c5037}.studio-top-nav>a.current::after{content:'';height:4px;width:4px;border-radius:50%;background:#5e8d5e;position:absolute;bottom:6px;left:50%}.design-menu{position:relative}.design-menu summary{cursor:pointer;list-style:none;display:flex;gap:7px;align-items:center}.design-menu summary::-webkit-details-marker{display:none}.design-menu[open] summary{color:#2c5037}.design-menu>div{position:absolute;top:38px;left:-24px;width:250px;background:#fffef9;border:1px solid #e2e7db;border-radius:16px;box-shadow:0 15px 45px #2a49331a;padding:8px}.design-menu button{display:block;width:100%;text-align:left;padding:12px 14px;font-size:14px;border-radius:9px}.design-menu button:hover{background:#eef3e6}.design-menu small{display:block;font-size:14px;color:#92a18b;margin-top:3px}.studio-header-actions{display:flex;gap:20px;align-items:center}.support-link{font-size:14px;color:#7d8e74;white-space:nowrap}.studio-start{display:flex;align-items:center;justify-content:center;gap:14px;border:1px solid #1f6f4a;background:#1f6f4a;color:#f8f6ee;padding:11px 16px;border-radius:7px;font-size:14px;white-space:nowrap}.studio-start:hover{background:#2b4c35;transform:translateY(-2px);box-shadow:0 7px 18px #385d431a}.studio-shell>main.discovery{max-width:1560px;margin:auto;padding:0 clamp(22px,5vw,88px)}.discovery-intro{padding:58px 0 27px}.intro-kicker{font-size:14px;letter-spacing:2.7px;display:flex;gap:10px;align-items:center;color:#8d9b80}.intro-kicker>span{width:6px;height:6px;border-radius:50%;background:#7ca673;box-shadow:0 0 0 5px #7ca6730b}.intro-title-row{display:flex;align-items:center;justify-content:space-between;gap:30px}.intro-title-row h1{font-size:clamp(38px,4.6vw,66px);font-weight:500;line-height:1.13;letter-spacing:-2.6px;margin:25px 0 35px}.intro-title-row h1 em{font-family:Georgia,serif;font-weight:400;color:#78906e;letter-spacing:-2px}.intro-aside{display:flex;align-items:center;gap:24px;padding-right:20px}.orbit-mark{font-size:62px;color:#a7b796;font-weight:300;animation:slow-orbit 35s linear infinite}.intro-aside p{font-size:14px;line-height:1.9;color:#95a18b;max-width:240px}.discovery-filter{display:flex;align-items:center;gap:8px;padding-top:13px;border-top:1px solid #e1e6d9;scroll-margin-top:90px}.discovery-filter button{font-size:14px;padding:10px 15px;border-radius:30px;color:#8c9881;background:transparent;border:1px solid transparent;white-space:nowrap;display:flex;gap:10px;align-items:center}.discovery-filter button:hover{background:#ebefdf;color:#526c46}.discovery-filter button.selected{background:#e7eddb;border-color:#dce4cf;color:#4e6c44}.discovery-filter small{font-size:14px;background:#d9e3c9;padding:1px 5px;border-radius:4px}.gallery-hint{margin-left:auto;color:#a3ad96;font-size:14px;letter-spacing:.3px}.discovery-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:36px 28px;align-items:start}.discovery-card{min-width:0;animation:discovery-enter .8s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--card-delay,0ms)}.discovery-card:nth-child(even){padding-top:58px}.discovery-image{position:relative;display:block;width:100%;padding:0;border-radius:15px;overflow:hidden;background:#e8e9df;text-align:left;border:1px solid #e5e6da}.discovery-image img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .85s cubic-bezier(.16,1,.3,1),filter .4s}.discovery-image:hover img{transform:scale(1.045)}.image-corner{position:absolute;top:14px;right:14px;background:#fffff5e3;backdrop-filter:blur(10px);border:1px solid #ffffffaf;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:17px;color:#4e6c46;transition:transform .25s}.discovery-image:hover .image-corner{transform:rotate(45deg)}.image-tag{position:absolute;bottom:13px;left:14px;background:#fffff7e3;border:1px solid #fffffff0;backdrop-filter:blur(10px);border-radius:4px;padding:5px 8px;font-size:14px;letter-spacing:1.8px;color:#6f8162}.discovery-card-info{display:flex;align-items:center;justify-content:space-between;padding:17px 2px 0;gap:15px}.concept-number{font-size:14px;letter-spacing:1.7px;color:#a4af97}.discovery-card h2{font-size:21px;font-weight:500;letter-spacing:-.6px;margin:7px 0 4px;color:#425b3a}.discovery-card-info p{font-size:14px;color:#a0aa93;margin:0;line-height:1.7}.concept-use{height:40px;width:40px;flex:0 0 40px;border:1px solid #dce3d0;border-radius:50%;color:#6f8561;font-size:20px}.concept-use:hover{background:#e5edda;transform:rotate(45deg)}.card-colorways{display:flex;gap:8px;align-items:center;margin-top:13px;padding:12px 0 0;border-top:1px solid #e5e8dc}.card-colorways>span{font-size:14px;color:#a3ad98;margin-right:8px}.card-colorways button{width:13px;height:13px;padding:0;border-radius:50%;background:var(--swatch);border:2px solid #f7f7f2;box-shadow:0 0 0 1px #d9dece}.card-colorways button:hover{transform:scale(1.3)}.discovery-footnote{display:flex;justify-content:space-between;border-bottom:1px solid #e2e7d8;padding:28px 0 34px;color:#a2ad94;font-size:14px}.collection-section{padding:75px 0 50px;scroll-margin-top:90px}.section-overline{font-size:14px;letter-spacing:2.3px;color:#98a388}.collection-heading{display:flex;justify-content:space-between;align-items:center;gap:25px;margin:15px 0 30px}.collection-heading h2,.studio-how h2,.support-section h2,.contact-section h2{font-size:36px;font-weight:500;letter-spacing:-1.5px;line-height:1.18;margin:10px 0;color:#4d6341}.collection-heading h2 em,.studio-how h2 em,.support-section h2 em,.contact-section h2 em{font-family:Georgia,serif;font-weight:400;color:#8c9b79}.collection-heading p{font-size:14px;line-height:1.9;color:#a1ab93}.collection-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.collection-tiles button{text-align:left;padding:28px;min-height:220px;border-radius:13px;background:#e9eddf;border:1px solid #dfe5d3;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}.collection-tiles button:nth-child(2){background:#f1e8dd;border-color:#e9e0d3}.collection-tiles button:nth-child(3){background:#e3ebe4;border-color:#d7e2d6}.collection-tiles button>span{font-size:14px;letter-spacing:1.6px;color:#9ca88e}.collection-tiles strong{font-size:28px;font-weight:400;letter-spacing:-.7px;line-height:1.2;margin:22px 0;color:#718263}.collection-tiles i{font-style:normal;font-size:14px;color:#8b9b7b;margin-top:auto}.collection-tiles button:hover{transform:translateY(-6px);box-shadow:0 15px 24px #3e583909}.studio-how{padding:55px 0 65px;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #e2e7d8}.studio-how>.section-overline{grid-column:1/-1;margin-bottom:12px}.studio-how>div{display:flex;gap:23px}.studio-how p{display:flex;flex-direction:column;gap:9px;flex:1;font-size:14px;line-height:1.8;color:#a1ad93}.studio-how b{font-size:14px;letter-spacing:1.2px;color:#bbc3b0;font-weight:400}.studio-how strong{font-size:14px;font-weight:500;color:#718364}.support-section{padding:55px 0;display:flex;align-items:center;gap:26px;border-bottom:1px solid #e2e7d8;scroll-margin-top:80px}.support-mark{font-size:42px;filter:grayscale(1);opacity:.45}.support-section h2{font-size:29px}.support-section p{font-size:14px;line-height:1.9;color:#9da88f}.support-buttons{margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:7px}.support-buttons .primary{font-size:14px;padding:13px 18px;background:#6c815b;border-radius:7px;box-shadow:none}.support-buttons .text-button{font-size:14px;color:#95a282}.support-buttons small{font-size:14px;color:#b1bba5;text-align:center}.contact-section{padding:65px 0 75px;display:flex;align-items:center;justify-content:space-between;gap:30px;scroll-margin-top:80px}.contact-section h2{font-size:34px}.contact-section p{font-size:14px;line-height:1.9;color:#9ba68e}.contact-button{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:17px 0;border-bottom:1px solid #bbc9ac;font-size:14px;color:#81966e}.contact-button span{font-size:24px;transition:transform .2s}.contact-button:hover span{transform:translate(3px,-3px)}.studio-footer{padding:32px clamp(22px,5vw,88px);border-top:1px solid #dfe6d4;background:#edf1e5;display:flex;justify-content:space-between;align-items:center;gap:25px;flex-wrap:wrap}.studio-footer>a strong{font-size:17px;font-weight:500;letter-spacing:-.5px;color:#7e936c}.studio-footer strong>span{margin-left:8px;color:#a8b697}.studio-footer small{display:block;font-size:14px;color:#a5b196;margin-top:6px}.studio-footer>div{display:flex;gap:24px;font-size:14px;color:#9ba98b}.studio-footer>div button{font-size:14px;padding:0}.studio-footer>span{font-size:14px;letter-spacing:1.7px;color:#b0bba3}.workspace-top{display:flex;justify-content:space-between;align-items:center;max-width:1500px;margin:25px auto 20px;padding:0 30px}.workspace-breadcrumb{display:flex;gap:10px;align-items:center;font-size:14px;color:#a1ad91}.workspace-breadcrumb button{padding:0;color:#9aac8a}.workspace-breadcrumb strong{font-weight:500;color:#668455}.workspace-shell .posm-project-toolbar{max-width:1440px;margin:0 30px 20px}.workspace-shell .workflow-bar{max-width:1440px;margin-left:30px;margin-right:30px}.workspace-shell>main.step-content{max-width:1440px;padding:30px;margin:auto}.inspiration-banner{display:flex;align-items:center;gap:16px;border:1px solid #d9e4ce;border-radius:13px;background:#edf3e6;margin:0 30px 20px;padding:13px}.inspiration-banner>img{width:90px;aspect-ratio:3/2;object-fit:cover;border-radius:7px}.inspiration-banner>div{flex:1}.inspiration-banner span{font-size:14px;letter-spacing:1.4px;color:#91a17e}.inspiration-banner strong{display:block;font-size:14px;color:#678353;margin:4px 0}.inspiration-banner p{font-size:14px;color:#9ba98a;margin:0}.inspiration-banner .text-button{font-size:14px;color:#93a181}.concept-detail-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:17px}.concept-detail-bottom p{font-size:14px;color:#80946e}.concept-detail-bottom small{font-size:14px;color:#a0ad93}.concept-detail-bottom .primary{font-size:14px;border-radius:7px}.studio-header a:focus-visible,.studio-header button:focus-visible,.discovery button:focus-visible{outline:2px solid #6f9964;outline-offset:4px}.overview-shell .motion-section{transition-duration:.7s}.overview-shell .discovery-intro{transform-origin:50% 0}.overview-shell .discovery-card{will-change:auto}@keyframes slow-orbit{to{transform:rotate(360deg)}}@keyframes discovery-enter{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
@media(min-width:1600px){.discovery-intro{padding-top:72px}.intro-title-row h1{font-size:72px}.discovery-card h2{font-size:24px}.discovery-card-info p{font-size:14px}.studio-top-nav{font-size:14px}}
@media(max-width:1100px){.studio-header{padding-left:25px;padding-right:25px;gap:18px}.studio-top-nav{gap:18px}.studio-header-actions{gap:12px}.intro-aside{padding:0;gap:15px}.orbit-mark{font-size:45px}.intro-aside p{font-size:14px}.gallery-hint{display:none}.support-mark{display:none}.studio-how{grid-template-columns:1fr}.studio-how>div{margin-top:15px}.studio-footer>span{display:none}}
@media(max-width:800px){.studio-header{height:auto;min-height:85px;padding:16px 22px;flex-wrap:wrap;gap:14px}.page-scrolled .studio-header{height:auto;min-height:72px;padding-top:12px;padding-bottom:12px}.studio-top-nav{order:3;width:100%;justify-content:center;border-top:1px solid #e3e8db;padding-top:10px;gap:26px;font-size:14px}.studio-top-nav>a{padding:5px 0}.studio-top-nav>a.current::after{bottom:-5px}.studio-header-actions{margin-left:auto}.studio-logo>span:last-child{font-size:22px}.studio-logo-mark{width:38px}.studio-start{font-size:14px;padding:10px 12px;gap:8px}.support-link{font-size:14px}.intro-aside{display:none}.intro-title-row h1{font-size:46px;margin-top:22px;letter-spacing:-2px}.discovery-intro{padding-top:38px}.discovery-filter{gap:2px;overflow-x:auto;scrollbar-width:none;scroll-margin-top:140px}.discovery-filter::-webkit-scrollbar{display:none}.discovery-filter button{font-size:14px;padding:9px 12px}.discovery-grid{gap:27px 18px;grid-template-columns:1fr 1fr}.discovery-card:nth-child(even){padding-top:38px}.discovery-card h2{font-size:17px;letter-spacing:-.5px}.discovery-card-info p{font-size:14px}.concept-use{width:30px;height:30px;flex-basis:30px;font-size:16px}.card-colorways{gap:6px;flex-wrap:wrap}.card-colorways>span{font-size:14px}.card-colorways button{width:11px;height:11px}.collection-heading h2,.studio-how h2{font-size:32px}.collection-tiles button{padding:19px;min-height:195px}.collection-tiles strong{font-size:24px}.collection-heading p{font-size:14px}.support-section{gap:20px}.support-buttons{min-width:190px}.support-section h2{font-size:25px}.contact-section h2{font-size:30px}.contact-button{gap:20px;font-size:14px}.studio-footer{padding:27px 22px}.workspace-shell .workflow-bar{margin:0 15px}.workspace-shell .posm-project-toolbar,.inspiration-banner{margin-left:15px;margin-right:15px}.workspace-top{padding:0 17px}.workspace-shell>main.step-content{padding:25px 20px}.concept-detail-bottom{align-items:flex-start;flex-direction:column}.concept-detail-bottom .primary{width:100%}}
@media(max-width:560px){.studio-logo-sub{font-size:14px;letter-spacing:2px}.support-link span{display:none}.studio-header{padding-left:17px;padding-right:17px}.studio-header-actions{gap:11px}.studio-top-nav{gap:22px;font-size:14px}.studio-shell>main.discovery{padding:0 20px}.discovery-intro{padding-top:30px;padding-bottom:22px}.intro-kicker{font-size:14px;letter-spacing:1.8px}.intro-title-row h1{font-size:39px;letter-spacing:-1.9px;margin-bottom:28px}.intro-title-row h1 em{letter-spacing:-1.7px}.discovery-filter button{font-size:14px;padding:8px 10px}.discovery-filter small{font-size:14px}.discovery-grid{grid-template-columns:1fr;gap:30px}.discovery-card:nth-child(even){padding-top:0}.discovery-card h2{font-size:21px}.discovery-card-info p{font-size:14px}.concept-use{width:36px;height:36px;flex-basis:36px}.discovery-image{border-radius:12px}.image-tag{font-size:14px}.image-corner{width:28px;height:28px;font-size:15px}.discovery-footnote{padding:23px 0;gap:12px;font-size:14px}.discovery-footnote span:last-child{text-align:right;max-width:160px}.collection-section{padding:45px 0 25px;scroll-margin-top:135px}.collection-heading{display:block;margin-bottom:23px}.collection-heading p{font-size:14px}.collection-tiles{grid-template-columns:1fr;gap:10px}.collection-tiles button{min-height:150px;position:relative;padding:22px}.collection-tiles strong{margin:15px 0 0;font-size:26px}.collection-tiles i{position:absolute;bottom:24px;right:22px}.studio-how{padding:35px 0 40px}.studio-how h2{font-size:30px}.studio-how>div{gap:17px}.studio-how p{font-size:14px}.studio-how strong{font-size:14px}.support-section{display:block;padding:38px 0;scroll-margin-top:140px}.support-section h2{font-size:29px}.support-section p{font-size:14px}.support-buttons{align-items:flex-start;margin-top:22px}.support-buttons .primary{font-size:14px}.support-buttons .text-button{padding-left:0}.contact-section{display:block;padding:40px 0 50px;scroll-margin-top:135px}.contact-section h2{font-size:29px}.contact-section p{font-size:14px}.contact-button{width:100%;margin-top:22px}.studio-footer{gap:22px}.studio-footer>div{gap:18px;font-size:14px;flex-wrap:wrap}.studio-footer>div button{font-size:14px}.inspiration-banner{align-items:flex-start;flex-wrap:wrap}.inspiration-banner img{width:70px}.inspiration-banner strong{font-size:14px}.inspiration-banner p{font-size:14px}.inspiration-banner .text-button{padding:0;margin-left:86px}.workspace-breadcrumb{font-size:14px}.workspace-top>.connection{font-size:14px;padding:8px}.workspace-shell>main.step-content{padding:24px 17px}}
@media(prefers-reduced-motion:reduce){.orbit-mark,.discovery-card{animation:none!important}.discovery-image img,.discovery-image:hover img,.studio-start:hover,.concept-use:hover{transform:none!important}.studio-header{transition:none!important}}
/* Keep supporting copy readable against the pale studio surfaces. */
.studio-top-nav{font-size:14px;color:#68765f}.intro-aside p{font-size:14px;color:#718064}.discovery-filter button{font-size:14px;color:#728064}.gallery-hint{color:#7d896f}.concept-number{font-size:14px;color:#7f8b73}.discovery-card-info p{font-size:14px;color:#748166}.card-colorways>span{font-size:14px;color:#7c896d}.discovery-footnote{font-size:14px;color:#7d896f}.collection-heading p,.studio-how p,.support-section p,.contact-section p{color:#748166;font-size:14px}.collection-tiles i{color:#6e805f;font-size:14px}.studio-how strong{font-size:14px}.support-buttons small{font-size:14px;color:#7c8b6e}.studio-footer>div,.studio-footer>div button{font-size:14px;color:#758467}.studio-footer small{font-size:14px;color:#7c8a70}.workspace-shell .saved-label{font-size:14px}.design-menu small{font-size:14px;color:#79896e}@media(max-width:800px){.studio-top-nav{font-size:14px}.intro-aside p{font-size:14px}.discovery-filter button{font-size:14px}.discovery-card-info p{font-size:14px}}@media(max-width:560px){.studio-top-nav{font-size:14px}.discovery-filter button{font-size:14px}.studio-how p{font-size:14px}.support-section p,.contact-section p{font-size:14px}.studio-footer>div,.studio-footer>div button{font-size:14px}}
/* Readable body and control scale, with larger color targets. */
.studio-top-nav{font-size:16px}.studio-start{font-size:15px;padding:13px 18px}.support-link{font-size:15px}.intro-aside p{font-size:16px;line-height:1.8}.discovery-filter button{font-size:15px;padding:11px 17px}.discovery-card h2{font-size:25px}.discovery-card-info p{font-size:15px;line-height:1.7}.gallery-hint{font-size:14px}.section-overline,.intro-kicker{letter-spacing:1.5px}.collection-heading p,.studio-how p,.support-section p,.contact-section p{font-size:16px;line-height:1.85}.studio-how strong{font-size:17px}.collection-tiles i{font-size:15px}.support-buttons .primary,.support-buttons .text-button,.contact-button{font-size:15px}.studio-footer>div,.studio-footer>div button{font-size:14px}.card-colorways{gap:9px;flex-wrap:wrap}.card-colorways>span{font-size:14px}.card-colorways button{width:24px;height:24px;flex:0 0 24px;border:3px solid #f7f7f2;box-shadow:0 0 0 1px #cbd4c2;position:relative}.card-colorways button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--swatch);transform:scale(1.08)}.card-colorways button[aria-pressed="true"]::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:white;text-shadow:0 1px 3px #0008;font-size:11px}.concept-color-options{display:flex;flex-wrap:wrap;gap:8px;padding-top:18px}.concept-color-options button{display:flex;gap:7px;align-items:center;border:1px solid #dce4d4;border-radius:25px;padding:8px 11px;font-size:14px}.concept-color-options button i{width:15px;height:15px;background:var(--swatch);border-radius:50%;display:block}.concept-color-options button[aria-pressed="true"]{border-color:var(--swatch);background:#f0f5eb}.studio-shell .workspace-breadcrumb,.studio-shell .connection,.studio-shell .posm-project-controls>label{font-size:14px}.studio-shell .posm-project-controls select,.studio-shell .posm-project-controls .secondary{font-size:15px}.studio-shell .posm-context small{font-size:13px}.studio-shell .inspiration-banner p,.studio-shell .inspiration-banner .text-button{font-size:14px}.studio-shell .inspiration-banner strong{font-size:16px}.studio-shell .workflow-guidance p,.studio-shell .workflow-next,.studio-shell .workflow-bar.is-compact .workflow-guidance p,.studio-shell .workflow-bar.is-compact .workflow-next{font-size:14px}.studio-shell .workflow-step strong,.studio-shell .workflow-bar.is-compact .workflow-step strong{font-size:15px}.studio-shell .workflow-step small{font-size:13px}.studio-shell .concept-detail-bottom p,.studio-shell .concept-detail-bottom .primary{font-size:15px}.studio-shell .concept-detail-bottom small{font-size:14px}
@media(max-width:1100px){.studio-top-nav{gap:18px;font-size:14px}.studio-header-actions{gap:13px}.studio-start{font-size:14px;padding:11px 13px}.intro-aside p{font-size:14px}.intro-aside{max-width:300px}.gallery-hint{display:none}}
@media(max-width:800px){.studio-top-nav{font-size:14px}.studio-header{gap:12px}.studio-logo>span:last-child{font-size:23px}.studio-start{font-size:14px}.discovery-filter button{font-size:14px}.discovery-card h2{font-size:23px}.collection-heading p,.studio-how p,.support-section p,.contact-section p{font-size:15px}.intro-kicker{font-size:12px;letter-spacing:1.5px}.studio-logo-sub{font-size:9px}.gallery-hint{display:none}}
@media(max-width:560px){.studio-header{padding-left:16px;padding-right:16px}.studio-logo-mark{width:34px}.studio-logo>span:last-child{font-size:21px}.studio-logo-sub{font-size:9px;letter-spacing:1.8px}.studio-start{font-size:13px;padding:10px 11px;gap:7px}.studio-top-nav{font-size:14px;gap:18px}.studio-header-actions{gap:10px}.discovery-filter button{font-size:14px;padding:9px 12px}.discovery-card-info p{font-size:14px}.card-colorways{gap:9px}.card-colorways>span{font-size:13px}.card-colorways button{width:23px;height:23px;flex-basis:23px}.studio-how>div{flex-direction:column;gap:8px}.studio-how p{display:grid;grid-template-columns:28px 1fr;gap:4px 10px;margin:10px 0}.studio-how p>b{grid-row:1/3}.studio-how p>strong{font-size:16px}.studio-how p>span{grid-column:2}.studio-footer>div{gap:17px}.concept-color-options button{font-size:13px}.studio-shell .workflow-bar.is-compact .workflow-step strong{font-size:12px}.studio-shell .workflow-bar.is-compact .workflow-guidance p{font-size:12px}.studio-shell .workflow-bar.is-compact .workflow-next{font-size:12px}.studio-shell .workflow-bar.is-compact .workflow-guidance{flex-wrap:wrap}.intro-kicker{font-size:11px;letter-spacing:1.2px}}
@media(max-width:560px){.card-colorways>span{flex-basis:100%;margin-bottom:3px}}

/* Editorial overview preview */
.studio-editorial-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(30px, 5vw, 76px);
  margin-bottom: 30px;
  border-radius: clamp(22px, 3vw, 44px);
  background: #14180f;
  color: #f8f6ee;
}
.studio-editorial-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid #f8f6ee38;
  border-radius: 100px;
  font-size: 14px;
}
.studio-editorial-kicker > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e63a1f;
}
.discovery-intro .studio-editorial-copy h1 {
  margin: 22px 0 16px;
  font: 400 clamp(42px, 5.2vw, 82px)/1.02 Georgia, serif;
  letter-spacing: -.045em;
  color: #f8f6ee;
}
.discovery-intro .studio-editorial-copy h1 em { color: #a9d7b5; }
.studio-editorial-copy p {
  max-width: 41ch;
  color: #d4dacf;
  font-size: 16px;
  line-height: 1.65;
}
.studio-editorial-copy a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 12px 19px;
  border-radius: 100px;
  background: #a9d7b5;
  color: #14180f;
  font-weight: 700;
}
.studio-editorial-copy a:hover { background: #d2e9d6; }
.studio-editorial-copy a:focus-visible { outline: 2px solid #f8f6ee; outline-offset: 4px; }
.studio-editorial-art { min-width: 0; margin: 0; }
.studio-editorial-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}
.studio-editorial-art figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 12px;
  color: #f8f6ee;
  font-size: 14px;
}
.studio-editorial-art figcaption span {
  color: #a9d7b5;
  font-weight: 700;
}
.concept-library-heading {
  margin: 0 0 12px;
  font: 400 clamp(28px, 4vw, 42px)/1.1 Georgia, serif;
  scroll-margin-top: 145px;
}
@media (max-width: 760px) {
  .studio-editorial-hero { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 18px; }
  .studio-editorial-art { grid-row: 1; }
  .discovery-intro .studio-editorial-copy h1 { font-size: clamp(32px, 9vw, 54px); }
}
.studio-editorial-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  cursor: pointer;
}
.studio-editorial-open > span {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f8f6ee;
  color: #1f6f4a;
  font-size: 22px;
}
.studio-editorial-open:focus-visible {
  outline: 2px solid #f8f6ee;
  outline-offset: 4px;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .studio-editorial-open img { transition: transform 240ms ease; }
  .studio-editorial-open:hover img { transform: scale(1.035); }
}

.inspiration-preview {
  flex: 0 0 90px;
  padding: 0;
  border-radius: 7px;
  cursor: zoom-in;
}
.inspiration-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: inherit;
}
.inspiration-preview:focus-visible {
  outline: 2px solid #1f6f4a;
  outline-offset: 4px;
}
.inspiration-banner p { color: #43593d; }
@media (max-width: 600px) {
  .inspiration-preview { flex-basis: 70px; }
}

.inspiration-banner > .inspiration-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.inspiration-actions > button { min-height: 44px; }
.inspiration-banner .inspiration-actions .text-button {
  margin-left: 0;
  padding: 0 8px;
  color: #43593d;
}
@media (max-width: 600px) {
  .inspiration-banner > .inspiration-actions { flex-basis: 100%; }
}

.concept-active-reference {
  display: inline-block;
  margin: 4px 0 4px 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e4efe2;
  color: #24513b;
  font-size: 13px;
  font-weight: 600;
}

.concept-library-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 16px;
}
.concept-workspace-return {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #24513b;
  font-weight: 600;
}
.concept-workspace-return:hover { text-decoration: underline; }
.concept-workspace-return:focus-visible {
  outline: 2px solid #1f6f4a;
  outline-offset: 3px;
}

.workspace-shell .studio-header {background:#12372c;color:#f9f5e9;position:relative}
.workspace-shell .studio-header :is(.studio-logo,.studio-top-nav a,.support-link,.studio-logo-sub) {color:inherit}
.workspace-shell .studio-start {background:#f6f0df;color:#12372c}
.workspace-shell .workflow-bar {background:transparent;border:0;border-bottom:1px solid #d8d5c8;border-radius:0;box-shadow:none;padding:0}
.workspace-shell .workflow-steps {gap:0}
.workspace-shell .workflow-step {border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent}
.workspace-shell .workflow-step.current {background:transparent;border-bottom-color:#9b7131}
.workspace-shell .step-number {background:transparent;color:#755521;border:0;box-shadow:none}
.workspace-actions {margin-top:20px;padding:12px 0;border-top:1px solid #d8d5c8}
.workspace-actions .workflow-guidance {margin:0}
.workspace-actions .workflow-next {background:#12372c;color:white;min-height:44px}
.editorial-step {font-size:.57em;font-style:italic;font-weight:400;color:#8b642d;vertical-align:middle}
.editorial-brief.website-start {padding-bottom:12px}
.workspace-shell .scope-needs {background:transparent;border:0;padding:0}
.workspace-shell .scope-need-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.workspace-shell .scope-group-choice {min-height:76px;background:#fbf8ef}
.workspace-shell .scope-group-choice[aria-pressed="true"] {background:#e5ecdc}
@media(max-width:680px) {
 .workspace-shell .scope-need-grid {grid-template-columns:1fr}
 .workspace-shell .scope-group-choice {min-height:56px}
 .workspace-actions {position:sticky;bottom:0;z-index:5;background:var(--paper);padding-bottom:max(12px,env(safe-area-inset-bottom))}
 .workspace-actions .workflow-next {flex:1}
}
.editorial-material {margin:20px 0 0}
.editorial-material img {display:block;width:100%;height:clamp(115px,16vw,230px);object-fit:cover;object-position:center 17%;border-radius:10px}
.editorial-material figcaption {margin-top:6px;font-size:13px;color:#52604f}
.scope-group-photo {display:none}
@media(min-width:681px) {
 .workspace-shell .scope-group-choice {grid-template-columns:72px minmax(0,1fr) 20px}
 .scope-group-choice > svg {display:none}
 .scope-group-photo {display:block;width:72px;height:56px;border-radius:6px;background:url('/assets/quality-study.png') 0 0 / 300% auto}
 [data-scope-group="welcome"] .scope-group-photo {background-position:0 100%}
 [data-scope-group="space"] .scope-group-photo {background-position:100% 100%}
 [data-scope-group="apparel"] .scope-group-photo {background-image:url('/assets/studies/sonic-apparel-study.png');background-position:center;background-size:cover}
 [data-scope-group="gifts"] .scope-group-photo {background-position:25% 50%}
 [data-scope-group="showroom"] .scope-group-photo {background-position:70% 100%}
}

.editorial-brief-grid {max-width:1160px;gap:20px 24px}
.editorial-brief-grid .website-idea,
.editorial-brief-grid .editorial-field-label {
  color:var(--forest);font:600 15px/22px Arial,sans-serif;
}
.editorial-brief-grid .editorial-field-label {display:block;margin:0 0 8px}
.editorial-brief-grid .website-idea textarea {
  min-height:104px;padding:12px 14px;border-radius:9px;background:#fff;
}
.editorial-brand-column .website-input-row {
  margin:0;gap:6px;border-radius:9px;box-shadow:none;
}
.editorial-brand-column .website-input-row input {
  min-height:44px;padding:8px 10px;font-size:15px;
}
.editorial-brand-column .website-input-row button {min-height:44px;white-space:nowrap}
.editorial-brand-upload {margin-top:5px}
.editorial-brand-column details form {margin-top:12px}
.editorial-material {max-width:1160px}
.workspace-actions .workflow-guidance > div {flex-wrap:wrap}
@media(max-width:680px) {
  .editorial-brief-grid {gap:14px}
  .editorial-brand-column .website-input-row {flex-direction:row}
  .editorial-brand-column .website-input-row button {padding-inline:10px}
}
.workspace-shell .direction-panel {min-width:0;overflow-wrap:anywhere}
.workspace-shell .direction-panel .palette {flex-wrap:wrap;min-width:0}
.workspace-shell .direction-panel .field-row {min-width:0}
@media(max-width:680px) {
  .workspace-shell .direction-panel .input-summary {grid-template-columns:minmax(0,1fr)}
}

/* Keep the brief controls in one workspace and the reference image beside it. */
.editorial-brief.website-start {
  display:grid;
  grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);
  gap:20px;
  align-items:stretch;
  padding:0;
}
.brief-work-card {
  min-width:0;
  padding:clamp(16px,2.6vw,36px);
  border:1px solid var(--line);
  border-radius:14px;
  background:#fffdf7;
}
.brief-work-card .brand-modes {
  display:inline-flex;
  max-width:100%;
  margin:0 0 18px;
  padding:3px;
  gap:3px;
  border-radius:8px;
}
.brief-work-card .brand-modes button {padding:8px 13px;min-height:38px;border-radius:6px}
.brief-work-card .brand-modes button span {display:none}
.brief-work-card h1 {font-size:clamp(27px,3.4vw,44px);line-height:1.12;margin:0}
.brief-work-card > p {margin:8px 0 0;color:#52604f;font-size:15px;line-height:1.5}
.brief-work-card .editorial-brief-grid {margin-top:20px;gap:16px}
.editorial-brief .editorial-material {
  position:relative;
  margin:0;
  min-height:240px;
  overflow:hidden;
  border-radius:14px;
  background:#e8e3d4;
}
.editorial-brief .editorial-material img {height:100%;object-position:26% 18%;border-radius:0}
.editorial-brief .editorial-material figcaption {
  position:absolute;
  bottom:12px;
  left:12px;
  margin:0;
  padding:6px 9px;
  border-radius:5px;
  background:#fffdf2;
  color:#12372c;
}
@media(max-width:1100px) {
  .editorial-brief.website-start {grid-template-columns:minmax(0,1fr)}
  .editorial-brief .editorial-material {min-height:0}
  .editorial-brief .editorial-material img {height:145px}
}
@media(max-width:680px) {
  .editorial-brief .editorial-material {display:none}
  .brief-work-card .editorial-brief-grid {gap:14px}
}
.brief-work-card .brand-modes button {flex:0 0 auto;white-space:nowrap}
.workspace-shell .studio-header .studio-top-nav > :is(a,details) {color:#f9f5e9}
.workspace-shell .studio-header .studio-top-nav summary {color:#f9f5e9}

.editorial-brief .editorial-material .brief-reference-controls {
  left:10px;
  right:10px;
  bottom:10px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
  gap:8px;
  padding:6px;
  border-radius:9px;
}
.brief-reference-controls button {
  width:44px;
  height:44px;
  border:1px solid #d8d5c8;
  border-radius:7px;
  background:white;
  color:#12372c;
  font:26px/1 Arial,sans-serif;
}
.brief-reference-controls button:hover {background:#e5ecdc}
.brief-reference-controls small,.brief-reference-controls strong {display:block}
.brief-reference-controls small {font-size:11px;letter-spacing:.06em}
.brief-reference-controls strong {font-size:14px;line-height:1.25;margin-top:3px}
@media(max-width:680px) {
  .editorial-brief .editorial-material {display:block}
  .editorial-brief .editorial-material img {height:190px}
}

/* Product categories use readable previews until category photography is available. */
:is([data-scope-group="cafe"],[data-scope-group="food"],[data-scope-group="shipping"],[data-scope-group="marketing"]) .scope-group-photo {display:none}
:is([data-scope-group="cafe"],[data-scope-group="food"],[data-scope-group="shipping"],[data-scope-group="marketing"]) {grid-template-columns:24px minmax(0,1fr) 20px}
:is([data-scope-group="cafe"],[data-scope-group="food"],[data-scope-group="shipping"],[data-scope-group="marketing"]) > svg {display:block}
.scope-group-choice .scope-description {font-weight:400;font-size:13px;line-height:1.6;color:#566459;white-space:normal;margin-top:4px}