.kitchen-studio{position:relative;min-height:820px;height:calc(100svh - 121px);max-height:1080px;overflow:hidden;background:#d7d0c2;isolation:isolate}
.studio-viewport{position:absolute;inset:0;z-index:0}
.studio-viewport canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.studio-viewport canvas.dragging{cursor:grabbing}
.studio-viewport canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-5px}
.studio-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#f6f3edfa 0%,#f6f3edf0 21%,#f6f3ed80 33%,transparent 49%)}
.studio-content{position:absolute;left:56px;top:14%;z-index:2;width:375px;pointer-events:none}
.studio-content>*{pointer-events:auto}
.studio-content .eyebrow{color:#756149;font-size:9px;margin-bottom:24px;letter-spacing:.17em}
.studio-content h1{font-size:clamp(55px,5.3vw,78px);line-height:1.12;letter-spacing:-.045em}
.studio-content h1 em{color:#826c4f}
.studio-content>p{font-size:13px;line-height:1.9;max-width:320px;margin:25px 0 28px}
.studio-content .button{font-size:11px;gap:30px}
.studio-content>.text-link{display:flex;width:max-content;margin-top:13px;font-size:10px}
.studio-badge{display:flex;align-items:center;gap:17px;margin-top:35px}
.studio-badge>span{font:400 35px/1 var(--serif);border-right:1px solid #bcb4a3;padding-right:19px;color:#826c4f}
.studio-badge p{font-size:9px;line-height:1.7;color:#555b4f}
.studio-viewbar{position:absolute;top:24px;right:30px;z-index:4;display:flex;background:#f6f3ede8;backdrop-filter:blur(8px);border:1px solid #b8b2a660}
.studio-viewbar button{border:0;background:none;font-size:10px;min-height:43px;padding:12px 16px;color:var(--ink)}
.studio-viewbar button:hover{background:#e3ddce}
.studio-viewbar #studio-expand{border-left:1px solid var(--line);display:flex;gap:10px;align-items:center}
.studio-viewbar button:disabled,.studio-tools button:disabled,.studio-layouts button:disabled{opacity:.45}
.studio-hint{position:absolute;right:30px;top:85px;color:#51574d;background:#f6f3edeb;padding:10px 14px;font-size:9px;z-index:2;pointer-events:none;display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .4s}
.studio-ready .studio-hint{opacity:1}
.studio-hint strong,.studio-hint>span>span{display:block}
.studio-hint strong{font-weight:600;font-size:11px;margin-bottom:3px}
.studio-hint-gesture{display:block;width:26px;height:26px;color:#826c4f}
.studio-hint-gesture svg{width:100%;height:100%}
.studio-tools{position:absolute;right:30px;bottom:210px;z-index:4;display:flex;flex-direction:column;gap:6px}
.studio-tools button{height:39px;width:39px;border:1px solid #b7b1a6;background:#f6f3edf2;font-size:20px;color:#41483e}
.studio-tools button:hover{background:white}
.studio-console{position:absolute;bottom:43px;left:32px;right:32px;padding:22px 24px;display:grid;grid-template-columns:1fr 2fr auto;gap:28px;align-items:center;background:rgba(246,243,237,.94);backdrop-filter:blur(12px);z-index:4;border:1px solid #b8b2a650;box-shadow:0 8px 40px #464b3520}
.studio-description .eyebrow{color:var(--accent);font-size:8px;letter-spacing:.12em;margin-bottom:9px}
.studio-description h2{font-size:25px;letter-spacing:-.02em}
.studio-description p{font-size:9px;line-height:1.7;margin-top:8px;max-width:240px}
.studio-layouts{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.studio-layouts button{border:1px solid #c9c4b7;background:none;display:flex;align-items:center;text-align:left;padding:14px 12px;gap:12px;min-height:73px;font-size:11px;transition:background .2s}
.studio-layouts button small{display:block;font-size:7px;letter-spacing:.08em;color:var(--muted);margin-bottom:7px;white-space:nowrap}
.studio-layouts button.active{border-color:#8e8069;background:#e6e0d2}
.studio-layouts button:hover{background:#eae5da}
.layout-symbol{display:block;position:relative;width:32px;height:32px;flex-shrink:0;border:1px solid #9b9d8b}
.layout-symbol:before,.layout-symbol:after{content:'';position:absolute;background:#7d806c}
.island-symbol:before{left:4px;right:4px;top:4px;height:5px}
.island-symbol:after{left:9px;right:7px;top:17px;height:7px}
.l-symbol:before{left:4px;right:4px;top:4px;height:6px}
.l-symbol:after{left:4px;bottom:4px;top:4px;width:6px}
.parallel-symbol:before{left:4px;bottom:4px;top:4px;width:6px}
.parallel-symbol:after{right:4px;bottom:4px;top:4px;width:6px}
#studio-play{border:0;border-left:1px solid #c9c4b7;min-height:51px;padding:14px 0 14px 20px;background:none;font-size:10px;white-space:nowrap;display:flex;gap:9px;align-items:center}
#studio-play span{font-size:17px}
#studio-play:disabled{opacity:.7;cursor:default}
.studio-disclosure{position:absolute;bottom:15px;left:35px;right:35px;text-align:center;font-size:8px;color:#50574b;z-index:4}

/* Inline architecture is visible before the 3D modules download. */
.studio-loading{position:absolute;inset:0;z-index:3;display:grid;place-items:center;overflow:hidden;background:#e8e2d6;opacity:1;transition:opacity .4s ease;pointer-events:auto}
.studio-loading[hidden]{display:none}
.studio-ready .studio-loading{opacity:0;pointer-events:none}
.studio-loading-composition{position:absolute;width:min(68%,880px);left:30%;top:50%;transform:translateY(-57%);text-align:center}
.studio-line-art{display:block;width:100%;height:auto;max-height:520px;color:#81745f;overflow:visible}
.studio-line-art path,.studio-line-art ellipse{vector-effect:non-scaling-stroke;stroke:currentColor;stroke-width:1.15;stroke-linejoin:round;stroke-linecap:round}
.studio-sketch-context{opacity:.3}
.studio-sketch-main{stroke-dasharray:1800;stroke-dashoffset:0;animation:studioSketch 2.3s ease-out both}
.studio-loading-caption{margin-top:-22px;color:#625b4c}
.studio-loading-caption .eyebrow{font-size:8px;letter-spacing:.16em;margin-bottom:11px;color:#83735a}
.studio-loading-caption strong{display:block;font-family:var(--serif);font-size:23px;font-weight:400;letter-spacing:-.02em}
.studio-loading-caption p{font-size:10px;line-height:1.7;margin-top:8px}
.studio-loading-track{display:block;position:relative;margin:19px auto 0;width:76px;height:1px;background:#b9ae9b;overflow:hidden}
.studio-loading-track:after{content:'';position:absolute;width:30px;height:100%;left:0;top:0;background:#756245;animation:studioTrack 1.7s ease-in-out infinite alternate}
.studio-coach{position:absolute;z-index:2;left:67%;bottom:25%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;padding:14px 19px;border:1px solid #c9c0af;background:#f6f3edf2;box-shadow:0 6px 25px #62543d10;color:#4e5146;pointer-events:none;opacity:0;transition:opacity .45s .65s;white-space:nowrap}
.studio-ready:not(.has-interacted) .studio-coach{opacity:1}
.has-interacted .studio-coach{opacity:0;transition-delay:0s}
.studio-coach-gesture{width:31px;height:31px;display:block;color:#827052}
.studio-coach-gesture svg{width:100%;height:100%}
.studio-ready:not(.has-interacted) .studio-coach-gesture{animation:studioGesture 2.6s ease-in-out 1s 3}
.studio-coach strong,.studio-coach>span>span{display:block}
.studio-coach strong{font-size:11px;font-weight:600;margin-bottom:5px}
.studio-coach>span>span{font-size:10px}
.webgl-unavailable .studio-loading{opacity:1;pointer-events:none}
.webgl-unavailable .studio-loading-track{display:none}
.webgl-unavailable .studio-hint,.webgl-unavailable .studio-coach{display:none}
.webgl-unavailable .studio-sketch-main{animation:none}
@keyframes studioSketch{from{stroke-dashoffset:1800;opacity:.25}
to{stroke-dashoffset:0;opacity:1}
}
@keyframes studioTrack{from{transform:translateX(0)}
to{transform:translateX(46px)}
}
@keyframes studioGesture{0%,100%{transform:translateX(0) rotate(0)}
30%{transform:translateX(-5px) rotate(-7deg)}
65%{transform:translateX(5px) rotate(7deg)}
}

.studio-noscript{position:absolute;left:40%;right:10%;top:40%;background:var(--paper);padding:20px;z-index:3;font-size:13px}
.studio-open{overflow:hidden}
.kitchen-studio.is-expanded{position:fixed;inset:0;z-index:100;min-height:0;max-height:none;height:100dvh}
.is-expanded .studio-content,.is-expanded .studio-shade{display:none}
.is-expanded .studio-viewport{inset:0}
.is-expanded .studio-console{grid-template-columns:1fr 2fr auto}
.is-expanded .studio-viewbar{top:20px}
.is-expanded .studio-loading-composition{left:50%;width:min(70%,920px);transform:translate(-50%,-57%)}
.is-expanded .studio-coach{left:50%;bottom:max(27%,205px)}
.webgl-unavailable .studio-content>p{color:#353d31}

@media(max-width:1200px){.studio-content{left:32px;width:325px;top:13%}
.studio-content h1{font-size:64px}
.studio-content>p{max-width:285px;font-size:12px}
.studio-console{gap:18px;grid-template-columns:.9fr 2.2fr auto;padding:20px;left:20px;right:20px}
.studio-layouts{gap:8px}
.studio-layouts button{font-size:10px;padding:11px 9px;gap:8px}
.studio-layouts button small{font-size:6.5px}
.layout-symbol{width:27px;height:29px}
.studio-description h2{font-size:23px}
.studio-description p{font-size:8px}
#studio-play{padding-left:15px;font-size:9px}
.studio-viewbar{right:20px}
.studio-hint{right:20px}
.studio-tools{right:20px}
.studio-disclosure{font-size:8px}
}

@media(max-width:900px){.kitchen-studio{height:auto;min-height:1070px;max-height:none}
.studio-content{left:25px;top:35px;width:calc(100% - 50px);pointer-events:none}
.studio-content .eyebrow{margin-bottom:17px}
.studio-content h1{font-size:55px;max-width:550px}
.studio-content h1 br{display:none}
.studio-content h1 em{display:inline}
.studio-content>p{max-width:480px;font-size:13px;margin:18px 0 20px}
.studio-content .button{min-height:44px;padding:11px 18px}
.studio-content>.text-link{display:inline-flex;margin:0 0 0 22px}
.studio-badge{display:none}
.studio-shade{background:linear-gradient(180deg,#f6f3ed 0%,#f6f3eddd 18%,transparent 33%);height:390px}
.studio-viewport{top:260px;bottom:180px}
.studio-viewbar{top:280px;left:25px;right:auto}
.studio-hint{top:333px;left:25px;right:auto;font-size:9px}
.studio-tools{bottom:230px;right:25px}
.studio-console,.is-expanded .studio-console{grid-template-columns:1fr auto;bottom:45px;gap:16px;left:20px;right:20px}
.studio-description{display:none}
.studio-layouts{gap:10px}
.studio-layouts button{font-size:11px;padding:14px 12px;gap:12px}
.studio-layouts button small{font-size:7px}
.layout-symbol{width:30px;height:30px}
.studio-disclosure{left:25px;right:25px;font-size:8px;bottom:14px}
.studio-loading-composition{width:90%;left:5%;top:50%;transform:translateY(-50%)}
.studio-loading-caption{margin-top:-10px}
.studio-coach{left:50%;bottom:60px}
.is-expanded .studio-viewbar{top:20px}
.is-expanded .studio-hint{top:78px}
.is-expanded .studio-viewport{inset:0}
.is-expanded .studio-console{bottom:40px}
.is-expanded .studio-tools{bottom:200px}
}

@media(max-width:600px){.kitchen-studio{min-height:1060px}
.studio-content{left:20px;top:28px;width:calc(100% - 40px)}
.studio-content .eyebrow{font-size:8px;letter-spacing:.13em;margin-bottom:17px}
.studio-content h1{font-size:45px;max-width:360px}
.studio-content h1 br{display:block}
.studio-content h1 em{display:block}
.studio-content>p{font-size:12px;max-width:320px;margin:18px 0 20px}
.studio-content>.text-link{display:none}
.studio-content .button{font-size:10px}
.studio-viewport{top:300px;bottom:225px}
.studio-shade{height:365px;background:linear-gradient(180deg,#f6f3ed,#f6f3ed 76%,transparent)}
.studio-viewbar{top:321px;left:15px;right:15px;justify-content:space-between}
.studio-viewbar button{font-size:8px;min-height:38px;padding:9px 10px}
.studio-viewbar #studio-expand{gap:6px}
.studio-hint{top:370px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 30px);font-size:8px;padding:6px 8px;text-align:center}
.studio-tools{bottom:255px;right:15px;gap:5px}
.studio-tools button{width:35px;height:35px;font-size:18px}
.studio-console,.is-expanded .studio-console{left:12px;right:12px;bottom:60px;display:flex;flex-direction:column;padding:14px 12px;gap:10px}
.studio-layouts{width:100%;gap:6px}
.studio-layouts button{flex-direction:column;align-items:start;padding:10px 8px;font-size:10px;gap:8px;min-height:95px;line-height:1.5}
.studio-layouts button small{font-size:6px;white-space:normal;margin-bottom:3px;letter-spacing:.03em}
.layout-symbol{width:26px;height:26px}
.studio-layouts button>span:last-child{white-space:normal}
.studio-disclosure{font-size:8px;line-height:1.7;bottom:15px;left:20px;right:20px}
#studio-play{border:0;border-top:1px solid #c9c4b7;padding:9px 0 0;width:100%;justify-content:center;min-height:35px;font-size:10px}
.studio-loading-composition{width:112%;left:-6%;top:54%;transform:translateY(-50%)}
.studio-line-art{max-height:350px}
.studio-loading-caption{margin-top:0;padding:0 35px}
.studio-loading-caption strong{font-size:20px}
.studio-loading-caption p{font-size:9px}
.studio-loading-caption .eyebrow{font-size:7px;margin-bottom:9px}
.studio-coach{bottom:50px;padding:11px 14px;gap:11px}
.studio-coach strong{font-size:10px}
.studio-coach>span>span{font-size:9px}
.studio-hint strong{font-size:10px}
.studio-hint-gesture{width:23px;height:23px}
.is-expanded .studio-loading-composition{width:112%;left:50%;top:45%}
.is-expanded .studio-coach{bottom:260px}
.is-expanded .studio-console{bottom:50px}
.is-expanded .studio-viewbar{top:14px}
.is-expanded .studio-hint{top:62px}
.is-expanded .studio-tools{bottom:250px}
.is-expanded .studio-disclosure{bottom:10px}
.studio-noscript{left:10%;right:10%;top:48%}
}

@media(prefers-reduced-motion:reduce){.studio-sketch-main,.studio-loading-track:after,.studio-ready:not(.has-interacted) .studio-coach-gesture{animation:none}
.studio-loading,.studio-hint,.studio-coach,.studio-layouts button{transition:none}
}
