/* DESIGN TOKENS — FEEL BẠT / 2026 */
@font-face{font-family:'CDA Me Ly';src:url('assets/fonts/CDAMeLyDisplay-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/Barlow/Barlow-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/Barlow/Barlow-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/Barlow/Barlow-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
:root{--blue:#0f2fef;--white:#ffffff;--yellow:#f3ee1c;--font-heading:'CDA Me Ly',Barlow,sans-serif;--font-body:Barlow,sans-serif;--line:1px solid var(--blue);--texture:url('assets/tarp-reference-0.png')}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;color:var(--blue);background:var(--white);font-family:var(--font-body);font-size:18px}h1,h2,h3,p{margin:0}h1,h2{font-family:var(--font-heading);font-weight:700;letter-spacing:.005em;line-height:1.16;padding-block:.1em}p{line-height:1.5}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer;border:0;color:inherit;background:transparent}button:disabled{cursor:default;opacity:.4}a,button,input,textarea,canvas{outline-offset:5px}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:3px solid var(--yellow);box-shadow:0 0 0 5px var(--blue)}img{display:block;max-width:100%}svg{width:100%;height:100%;display:block}.skip-link{position:fixed;top:-100px;left:15px;background:var(--yellow);padding:15px;z-index:99}.skip-link:focus{top:10px}.site-header{background:var(--blue);color:var(--white);display:flex;align-items:center;gap:35px;padding:14px 4%;border-bottom:1px dashed var(--white)}.wordmark{width:100px;flex-shrink:0;display:block}.wordmark img{width:100%;height:auto}.brand-credit{font-size:10px;line-height:1.5;letter-spacing:1px;border-left:1px solid var(--white);padding:7px 0 7px 25px}.brand-credit strong{font-weight:600}.site-header nav{margin-left:auto;display:flex;align-items:center;gap:30px;font-size:14px}.site-header nav>a:not(.nav-custom):hover{text-decoration:underline}.nav-custom{background:var(--yellow);color:var(--blue);font-weight:700;padding:14px 22px;transform:rotate(-2deg)}.menu-toggle{display:none}.tarp{position:relative;isolation:isolate;background:var(--blue);color:var(--white)}.tarp:before{content:'';position:absolute;z-index:-1;inset:0;background-image:var(--texture);background-size:700px auto;filter:grayscale(1) contrast(1.3);mix-blend-mode:soft-light;opacity:.36;pointer-events:none}.tarp:after{content:'';position:absolute;inset:12px;border:1px dashed var(--white);opacity:.3;pointer-events:none;z-index:-1}.hero{overflow:hidden;padding:20px 4% 30px}.hero-meta,.section-index{display:flex;justify-content:space-between;gap:25px;font-size:11px;letter-spacing:1.7px;font-weight:600}.hero-meta{opacity:.9}.hero-headline{position:relative;z-index:2;padding-top:34px;pointer-events:none}.eyebrow{font-size:12px;font-weight:600;letter-spacing:1.8px}.hero h1{font-size:clamp(55px,7.7vw,124px);margin-top:14px;line-height:1.14}.hero h1 span{color:var(--yellow)}.hero-collage{position:relative;height:385px;margin-top:-25px}.hero-bag{position:absolute;width:490px;max-width:52%;left:39%;top:-110px;transform:rotate(-13deg);filter:drop-shadow(8px 15px 0 var(--blue));z-index:3}.street-sign{position:absolute;left:3%;top:57px;transform:rotate(-8deg);background:var(--white);color:var(--blue);border:3px solid var(--blue);outline:3px solid var(--white);font-family:var(--font-heading);font-size:30px;padding:10px 20px;z-index:4}.street-sign span{display:block;font-family:var(--font-body);font-size:10px;letter-spacing:1px;padding-top:4px;border-top:1px solid}.tarp-swatch{position:absolute;left:19%;top:19px;width:210px;height:260px;background-image:var(--texture);background-size:cover;transform:rotate(9deg);border:6px solid var(--white)}.tarp-swatch:before,.tarp-swatch:after{content:'';position:absolute;background:var(--yellow);width:78px;height:19px;top:-13px;left:55px;transform:rotate(-9deg)}.tarp-swatch:after{top:auto;bottom:-10px;left:100px;transform:rotate(4deg)}.tarp-swatch span{font-size:9px;position:absolute;bottom:15px;left:12px;padding:5px;background:var(--blue)}.hero-sticker{position:absolute;z-index:5}.hero-sticker.flower{width:135px;height:135px;top:9px;right:4%;transform:rotate(13deg)}.hero-sticker.coffee{width:112px;height:112px;left:34%;top:235px;transform:rotate(-11deg)}.hero-ticket{position:absolute;left:3%;bottom:4px;border:1px solid var(--white);border-left:9px dotted var(--white);padding:13px 25px;transform:rotate(-4deg);display:flex;flex-direction:column;background:var(--blue)}.hero-ticket strong{font-size:60px;font-family:var(--font-heading);line-height:1.2}.hero-ticket span{font-size:9px;letter-spacing:2px}.custom-seal{position:absolute;right:4%;bottom:58px;z-index:6;width:174px;height:174px;border-radius:50%;background:var(--yellow);color:var(--blue);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px;transform:rotate(10deg);border:2px dashed var(--blue);outline:6px solid var(--yellow)}.custom-seal b{font-family:var(--font-heading);font-size:26px}.custom-seal span{margin-top:10px;font-size:12px;font-weight:700;text-decoration:underline}.bag-annotation{position:absolute;right:22%;bottom:5px;font-size:11px;line-height:1.4;letter-spacing:1px;transform:rotate(-4deg)}.bag-annotation span{position:absolute;top:-35px;font-size:50px;right:10px}.hero-bottom{display:flex;position:relative;z-index:6;align-items:center;gap:35px;margin-top:25px}.hero-bottom p{font-size:15px}.button{display:inline-flex;gap:30px;align-items:center;justify-content:space-between;padding:18px 26px;font-weight:700;font-size:15px;border:1px solid var(--blue);transition:transform .2s}.button:hover{transform:rotate(-2deg)}.yellow{background:var(--yellow);color:var(--blue)}.blue{background:var(--blue);color:var(--white)}.hero-bottom .button{margin-left:auto}.scroll-link{font-size:10px;letter-spacing:1px;writing-mode:vertical-rl}.street-tape{display:flex;gap:40px;align-items:center;white-space:nowrap;overflow:hidden;background:var(--yellow);padding:15px 0;font-family:var(--font-heading);font-size:32px;border-block:var(--line)}.street-tape span{flex-shrink:0}.section{padding:70px 5%}.section-index{padding-bottom:20px;border-bottom:1px dashed;margin-bottom:45px}.story-layout{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}.story h2{font-size:clamp(42px,5.7vw,83px);margin-bottom:25px}.story h2 span{background:var(--yellow);box-shadow:8px 0 0 var(--yellow),-5px 0 0 var(--yellow)}.story-text p{max-width:440px;font-size:18px;margin-top:18px}.underlined{display:inline-block;font-weight:600;border-bottom:var(--line);padding-bottom:6px;margin-top:28px;font-size:16px}.material-board{transform:rotate(2deg);position:relative}.material-photo{height:480px;background:var(--texture) center 50%/cover;position:relative;outline:1px solid var(--blue);outline-offset:8px}.material-label{position:absolute;top:20px;left:-20px;background:var(--yellow);color:var(--blue);padding:10px 16px;font-size:12px;font-weight:700;transform:rotate(-4deg)}.trace-hotspot{position:absolute;width:42px;height:42px;line-height:35px;background:var(--white);color:var(--blue);border:1px solid var(--blue);border-radius:50%;font-size:32px}.trace-hotspot[aria-pressed=true]{background:var(--yellow)}.hotspot-one{left:46%;top:33%}.hotspot-two{left:70%;top:78%}.material-caption{margin-top:18px;font-family:var(--font-heading);font-size:25px;line-height:1.2;position:relative}.material-caption span{position:absolute;right:0;top:0;font-size:55px}.trace-story{font-size:14px;margin-top:13px;min-height:50px;max-width:95%}.traces{overflow:hidden}.traces-intro{display:flex;align-items:center;gap:7%;justify-content:space-between}.traces h2{font-size:clamp(36px,4.5vw,68px)}.traces h2 span{color:var(--yellow)}.traces-intro>p{font-size:17px;flex-shrink:0;max-width:320px}.street-fragments{display:flex;align-items:center;justify-content:space-around;gap:5%;padding:38px 0 52px}.fragment{display:flex;align-items:center;gap:15px}.fragment>div{width:155px;height:155px}.fragment>span{font-size:12px;line-height:1.5}.fragment-coffee{transform:rotate(-8deg)}.fragment-sign{transform:rotate(6deg)}.fragment-flower{transform:rotate(-4deg)}.traces>.button{display:flex;width:fit-content;margin:auto}.custom-heading{display:flex;align-items:center;gap:6%;margin-bottom:35px;position:relative}.custom-heading h2{font-size:clamp(40px,5vw,76px)}.custom-heading h2 span{background:var(--yellow);box-shadow:8px 0 0 var(--yellow),-4px 0 0 var(--yellow)}.custom-heading>p{font-size:18px}.cut-label{margin-left:auto;background:var(--blue);color:var(--white);font-family:var(--font-heading);font-size:24px;transform:rotate(8deg);padding:17px 22px;clip-path:polygon(0 7%,17% 0,29% 5%,48% 0,64% 5%,86% 0,100% 7%,97% 34%,100% 52%,96% 74%,100% 96%,76% 100%,52% 96%,34% 100%,12% 95%,0 100%,4% 70%,0 49%,3% 24%)}.custom-workbench{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,1fr);border:var(--line);background:var(--white)}.canvas-side{border-right:var(--line);display:flex;flex-direction:column;background:var(--yellow);position:relative;isolation:isolate}.canvas-side:before{content:'';position:absolute;inset:0;background:var(--texture) center/cover;filter:grayscale(1) contrast(1.7);mix-blend-mode:multiply;opacity:.12;z-index:-1;pointer-events:none}.canvas-top,.canvas-bottom{display:flex;justify-content:space-between;gap:15px;padding:18px 22px;font-size:11px;font-weight:600;letter-spacing:1px}.canvas-top{border-bottom:1px dashed var(--blue)}.canvas-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:550px}.canvas-wrap canvas{display:block;width:100%;max-width:620px;height:auto;touch-action:none;cursor:grab;aspect-ratio:900/990}.canvas-wrap canvas:active{cursor:grabbing}.canvas-note{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:11px;font-weight:600;letter-spacing:1.4px;pointer-events:none}.canvas-bottom{border-top:1px dashed var(--blue);letter-spacing:0;align-items:center}.canvas-bottom button{text-decoration:underline;white-space:nowrap}.toolbox{padding:28px}.toolbox h3,.toolbox legend{font:700 15px var(--font-body);letter-spacing:.5px;margin-bottom:14px}.toolbox h3 b,.toolbox legend b{font:700 25px var(--font-heading);padding-right:6px}.toolbox fieldset{border:0;padding:0;margin:0}.bag-colors{padding-bottom:22px!important;border-bottom:1px dashed var(--blue)!important}.swatches{display:flex;align-items:center;gap:12px}.swatch{width:32px;height:32px;border:var(--line);outline-offset:3px}.swatch.active{outline:2px solid var(--blue)}.swatches>span{margin-left:8px;font-size:11px;font-weight:600;letter-spacing:.6px}.pieces-section{padding:22px 0;border-bottom:1px dashed var(--blue)}.piece-tabs{display:flex;border:var(--line);margin-bottom:14px}.piece-tabs button{width:50%;font-size:12px;font-weight:700;padding:10px}.piece-tabs [aria-selected=true]{background:var(--blue);color:var(--white)}.piece-library{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.piece-option{border:1px solid transparent;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:5px 3px;font-size:11px;font-weight:600;gap:3px}.piece-option:hover,.piece-option:focus-visible{border:var(--line);background:var(--yellow)}.piece-option img{width:70px;height:70px}.tool-hint{font-size:12px;margin-top:9px}.adjustments{padding-top:22px}.adjustments>p{font-size:12px;min-height:18px;margin-bottom:10px}.adjust-row{display:flex;align-items:center;gap:10px;margin:11px 0}.adjust-row label{font-size:12px;width:65px}.adjust-row input{width:100%;min-width:0;accent-color:var(--blue);flex:1}.adjust-row output{font-size:11px;width:36px;text-align:right}.placed-pieces{display:flex;flex-wrap:wrap;gap:5px;margin-block:12px}.placed-pieces button{border:var(--line);padding:4px 7px;font-size:11px}.placed-pieces button[aria-pressed=true]{background:var(--yellow)}.edit-actions{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;margin:15px 0 22px}.edit-actions button{padding:0;text-decoration:underline}.toolbox>.button{width:100%;margin-bottom:10px}.toolbox #custom-status{font-size:12px;line-height:1.4;min-height:34px}.custom-footnote{font-size:12px;margin-top:16px;max-width:830px}.closing h2{font-size:clamp(46px,6.8vw,105px);margin:20px 0 30px}.closing h2 span{color:var(--yellow)}.closing-bottom{display:flex;justify-content:space-between;align-items:center;gap:25px}.closing p{font-size:18px}.closing strong{color:var(--yellow)}footer{background:var(--blue);color:var(--white);padding:35px 5% 22px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:30px;border-top:1px dashed var(--white)}footer>.wordmark{width:135px}footer>p{font-family:var(--font-heading);font-size:30px;line-height:1.2}footer>a:not(.wordmark){justify-self:end;font-size:13px;border-bottom:1px solid;padding-bottom:8px}.footer-bottom{grid-column:1/-1;border-top:1px solid var(--white);padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:10px;letter-spacing:.5px}.footer-bottom button{font-size:12px;text-decoration:underline;white-space:nowrap}dialog{max-width:600px;width:calc(100% - 30px);max-height:90dvh;overflow:auto;background:var(--white);color:var(--blue);border:2px solid var(--blue);padding:30px}dialog::backdrop{background:color-mix(in srgb,var(--blue) 75%,transparent)}.dialog-head{display:flex;justify-content:space-between;gap:15px;align-items:center}.dialog-head h2{font-size:35px}.dialog-head button{font-size:32px}dialog p{font-size:15px;margin:18px 0}dialog label{font-size:14px;display:block;margin:20px 0}dialog input,dialog textarea{display:block;width:100%;padding:12px;border:var(--line);margin-top:8px;color:var(--blue);background:var(--white)}#reset-copy{font-size:13px;text-decoration:underline;margin-left:20px}
@media(min-width:1600px){.hero h1{font-size:135px}.hero-collage{height:480px}.hero-bag{width:610px}.hero-sticker.coffee{top:325px}.hero-ticket{bottom:40px}.tarp-swatch{width:260px;height:330px}.story,.custom-section{max-width:1800px;margin:auto}}
@media(max-width:1050px){.site-header{gap:20px}.site-header nav{gap:18px}.brand-credit{font-size:8px;padding-left:18px}.hero-bag{top:-50px;width:440px;left:36%}.hero-collage{margin-top:-15px;height:370px}.hero-sticker.coffee{left:29%;top:235px}.street-sign{font-size:23px;left:0;top:50px}.tarp-swatch{left:15%;width:165px;height:215px;top:45px}.hero-sticker.flower{width:105px;height:105px}.custom-seal{width:140px;height:140px;right:2%;font-size:13px}.custom-seal b{font-size:21px}.hero-ticket{bottom:8px}.bag-annotation{right:21%;font-size:10px}.hero-bottom{gap:20px}.hero-bottom p{font-size:14px}.button{font-size:13px;padding:16px 20px}.section{padding:55px 4%}.section-index{font-size:10px}.story-layout{gap:7%}.material-photo{height:420px}.traces-intro{gap:30px}.traces-intro>p{font-size:15px}.fragment{flex-direction:column;gap:10px}.fragment>div{width:130px;height:130px}.fragment>span{text-align:center;font-size:11px}.custom-heading>p{font-size:16px}.cut-label{font-size:19px}.toolbox{padding:22px}.canvas-wrap{min-height:500px}.canvas-top{padding:16px;font-size:9px}.canvas-bottom{padding:15px 12px;font-size:10px}.piece-option img{width:60px;height:60px}}
@media(max-width:760px){.site-header{flex-wrap:wrap;padding:13px 5%;gap:18px}.wordmark{width:80px}.brand-credit{font-size:9px}.menu-toggle{display:block;margin-left:auto;font-size:12px;font-weight:700;padding:8px 0}.site-header nav{display:none;width:100%;margin:0;justify-content:space-between;gap:10px;border-top:1px dashed;padding-top:15px;font-size:13px}.site-header.menu-open nav{display:flex}.nav-custom{padding:10px}.hero{padding:18px 5% 25px}.hero-meta{font-size:8px;letter-spacing:.7px}.hero-meta span:last-child{display:none}.hero-headline{padding-top:28px}.hero .eyebrow{font-size:9px;letter-spacing:.8px}.hero h1{font-size:clamp(40px,8.6vw,64px);margin-top:14px;line-height:1.22}.hero-collage{height:350px;margin-top:0}.hero-bag{width:340px;max-width:77%;left:15%;top:-12px}.street-sign{top:25px;font-size:17px;padding:8px 10px;left:0;outline-width:2px}.street-sign span{font-size:7px}.tarp-swatch{width:125px;height:165px;left:0;top:85px;border-width:4px}.tarp-swatch span{font-size:7px;left:5px;bottom:7px}.hero-ticket{padding:8px 15px;bottom:5px}.hero-ticket strong{font-size:38px}.hero-ticket span{font-size:7px;letter-spacing:1px}.hero-sticker.flower{width:85px;height:85px;top:0;right:0}.hero-sticker.coffee{width:85px;height:85px;left:32%;top:240px}.custom-seal{width:118px;height:118px;bottom:55px;right:1%;font-size:10px;outline-width:4px}.custom-seal b{font-size:18px}.custom-seal span{font-size:9px;margin-top:6px}.bag-annotation{font-size:8px;right:3%;bottom:0}.bag-annotation span{font-size:35px;top:-22px}.hero-bottom{display:block;margin-top:22px}.hero-bottom p{font-size:16px;margin-bottom:20px;max-width:350px}.hero-bottom .button{width:100%;font-size:14px}.scroll-link{display:none}.street-tape{font-size:25px;gap:25px;padding:11px 0}.section{padding:42px 6%}.section-index{margin-bottom:27px;font-size:9px;letter-spacing:1px;padding-bottom:16px}.section-index span:last-child{display:none}.story-layout{grid-template-columns:1fr;gap:40px}.story h2{font-size:clamp(45px,10.3vw,70px)}.story-text p{font-size:17px}.material-board{max-width:500px;width:96%;margin:auto}.material-photo{height:420px}.material-label{font-size:10px;left:-10px}.material-caption{font-size:23px}.traces-intro{display:block}.traces h2{font-size:clamp(33px,7vw,49px)}.traces-intro>p{font-size:17px;margin-top:25px}.street-fragments{gap:8px;padding:30px 0}.fragment>div{width:95px;height:95px}.fragment>span{font-size:8px}.traces>.button{width:100%;gap:12px;font-size:13px}.custom-heading{flex-wrap:wrap;gap:17px;margin-bottom:25px}.custom-heading h2{font-size:clamp(40px,9vw,63px);width:100%}.custom-heading>p{max-width:70%;font-size:16px}.cut-label{position:absolute;right:0;bottom:0;font-size:16px;padding:12px}.custom-workbench{grid-template-columns:1fr}.canvas-side{border-right:0;border-bottom:var(--line)}.canvas-wrap{min-height:0}.canvas-wrap canvas{max-width:540px}.canvas-top{padding:14px}.canvas-bottom{padding:13px 15px;font-size:11px}.toolbox{padding:24px 20px}.piece-option img{width:75px;height:75px}.piece-option{font-size:12px}.piece-library{gap:8px}.toolbox h3,.toolbox legend{font-size:16px}.custom-footnote{font-size:12px}.closing h2{font-size:clamp(35px,7.8vw,55px);line-height:1.25}.closing .eyebrow{font-size:10px}.closing-bottom{display:block}.closing p{font-size:17px;margin-bottom:25px}.closing .button{width:100%}footer{grid-template-columns:1fr 1fr;padding:30px 6% 20px;gap:25px}footer>.wordmark{width:110px}footer>p{font-size:25px}footer>a:not(.wordmark){grid-column:1/-1;justify-self:start}.footer-bottom{align-items:start;flex-direction:column;gap:15px;line-height:1.5}.dialog-head h2{font-size:28px}#reset-copy{display:block;margin:20px 0 0}.material-photo{background-position:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Every heading uses the supplied display face, including workbench labels. */
.toolbox h3,.toolbox legend{font-family:var(--font-heading);font-size:23px;line-height:1.25;font-weight:700;padding-block:3px}
/* Preserve the intrinsic square ratio of the product photo at every breakpoint. */
.hero-bag{height:auto}

/* FEEL BẠT 3D workshop — product color is contained inside the viewer. */
.product-rail{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--blue);border-bottom:0;background:var(--white)}
.product-rail button{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;padding:20px 12px;border-right:1px solid var(--blue);font-weight:600;font-size:15px;min-height:100px}
.product-rail button:last-child{border-right:0}.product-rail svg{width:49px;height:55px;flex-shrink:0}.product-rail small{position:absolute;top:8px;right:10px;font-size:9px;font-weight:400;opacity:.7}
.product-rail [aria-pressed=true]{background:var(--blue);color:var(--white)}.product-rail button:hover:not([aria-pressed=true]){background:var(--yellow)}
.studio-workbench{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(340px,.8fr);border:1px solid var(--blue);background:var(--white)}
.studio-viewer{min-width:0;border-right:1px solid var(--blue)}.viewer-top,.viewer-bottom{padding:18px 23px;display:flex;justify-content:space-between;gap:15px;font-size:10px;letter-spacing:1px;font-weight:600}.viewer-top{border-bottom:1px dashed var(--blue)}
.stage-3d{position:relative;height:690px;overflow:hidden;isolation:isolate;background:var(--white)}.stage-3d canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline-offset:-4px}.stage-3d canvas:active{cursor:grabbing}.stage-3d canvas:focus-visible{outline:2px solid var(--blue)}
#viewer-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:30px;text-align:center;background:var(--white);font-family:var(--font-heading);font-size:30px;z-index:5}#viewer-loading[hidden]{display:none}
.viewer-stamp{position:absolute;top:30px;left:25px;color:var(--blue);font-family:var(--font-heading);font-size:25px;line-height:1.1;transform:rotate(-8deg);pointer-events:none}
.view-controls{position:absolute;bottom:23px;left:20px;right:20px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}.view-controls button{background:var(--white);border:1px solid var(--blue);padding:8px 10px;font-size:11px}.view-controls button[aria-pressed=true]{background:var(--yellow)}.view-controls button:last-child,.view-controls button:nth-last-child(2){font-size:18px;width:33px;padding:3px 0}
.viewer-bottom{border-top:1px dashed var(--blue);letter-spacing:0}.viewer-bottom button{text-decoration:underline;white-space:nowrap}.product-caption{background:var(--blue);color:var(--white);padding:26px;display:flex;gap:20px;align-items:end;min-height:190px}.product-caption span{font-size:10px;letter-spacing:1.4px}.product-caption h3{font-family:var(--font-heading);font-size:39px;line-height:1.2;margin:8px 0}.product-caption p{font-size:14px;max-width:340px}.product-caption>a{font-size:11px;min-width:110px;text-decoration:underline;margin-left:auto;line-height:1.5}
.studio-tools{padding:29px 27px;min-width:0}.studio-tools fieldset{border:0;margin:0;padding:0 0 23px}.studio-tools legend,.studio-tools h3{font-family:var(--font-heading);font-size:24px;line-height:1.25;margin-bottom:17px}.studio-tools legend b,.studio-tools h3 b{font-weight:700;margin-right:7px}.tone-library{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;max-width:340px}.tone-library button{padding:4px;border:1px solid transparent;aspect-ratio:1;max-width:54px}.tone-library button>span{display:block;width:100%;height:100%;border:1px solid var(--blue);border-radius:50%}.tone-library [aria-pressed=true]{border-color:var(--blue)}.tone-library [aria-pressed=true]:after{content:'✓';position:absolute;font-size:10px;font-weight:700;background:var(--white);border:1px solid var(--blue);width:16px;height:16px;margin:-13px 0 0 7px;border-radius:50%}.tone-caption{margin-top:16px;display:flex;flex-direction:column;gap:4px}.tone-caption strong{font-size:12px;letter-spacing:1px}.tone-caption span{font-size:11px;opacity:.8}.name-picker{padding-top:22px!important;border-top:1px dashed var(--blue)!important;border-bottom:1px dashed var(--blue)!important}.name-picker label{font-size:12px;display:block;margin-bottom:9px}.name-input{position:relative}.name-input input{width:100%;padding:14px 55px 14px 12px;color:var(--blue);background:var(--white);border:1px solid var(--blue);font:600 16px var(--font-body);border-radius:0}.name-input input::placeholder{color:var(--blue);opacity:.4;font-size:12px}.name-input output{position:absolute;right:10px;top:18px;font-size:10px}.name-picker p{font-size:11px;margin-top:8px}.studio-tools .pieces-section{padding:22px 0 18px}.studio-tools .piece-option img{width:56px;height:56px}.studio-tools .piece-option{font-size:10px}.studio-tools .piece-library{gap:6px}.studio-tools .adjustments{padding-top:16px}.selection-heading{display:flex;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:.8px;margin-bottom:13px}.studio-tools .adjustments>p{font-size:11px}.studio-tools>.button{width:100%;font-size:13px;padding:17px 16px}.studio-tools #custom-status{font-size:11px;line-height:1.5;margin-top:10px;min-height:34px}.studio-tools .edit-actions{margin-bottom:18px}.studio-3d .custom-footnote{max-width:950px}
@media(min-width:1600px){.stage-3d{height:760px}.studio-tools{padding:35px}.studio-tools .piece-option img{width:65px;height:65px}}
@media(max-width:1050px){.product-rail button{flex-direction:column;gap:4px;font-size:13px;padding:12px 6px}.product-rail svg{height:46px}.studio-workbench{grid-template-columns:minmax(0,1.1fr) minmax(310px,1fr)}.studio-tools{padding:23px 20px}.stage-3d{height:680px}.viewer-top,.viewer-bottom{padding:15px;font-size:9px}.product-caption{padding:22px;display:block}.product-caption>a{display:block;margin-top:16px}.product-caption h3{font-size:33px}.viewer-stamp{font-size:21px;left:18px}}
@media(max-width:760px){.studio-3d.section{padding-inline:4%}.product-rail button{font-size:10px;padding:15px 3px 10px;min-height:92px}.product-rail svg{width:35px;height:42px}.product-rail small{font-size:8px;top:4px;right:5px}.studio-workbench{grid-template-columns:1fr}.studio-viewer{border-right:0;border-bottom:1px solid var(--blue)}.stage-3d{height:510px}.viewer-top,.viewer-bottom{font-size:9px;padding:13px}.viewer-stamp{font-size:21px;top:23px;left:19px}.view-controls{bottom:16px;left:10px;right:10px;gap:4px}.view-controls button{font-size:10px;padding:8px}.product-caption{display:flex;gap:16px;padding:22px;min-height:150px}.product-caption h3{font-size:32px}.product-caption p{font-size:12px;max-width:210px}.product-caption>a{font-size:10px;min-width:84px;margin-top:0}.studio-tools{padding:26px 23px}.tone-library{max-width:320px;gap:12px}.tone-library button{max-width:49px}.studio-tools .piece-option img{width:65px;height:65px}.studio-tools .piece-option{font-size:11px}.studio-tools>.button{font-size:14px}.studio-3d .cut-label{font-size:14px}.studio-3d .custom-heading>p{font-size:15px}.studio-3d .custom-footnote{font-size:11px}.viewer-bottom>span{max-width:70%}}
@media(prefers-reduced-motion:reduce){.stage-3d{scroll-behavior:auto}}

/* Keep the workshop steady during pointer picking and product changes. */
html:has(.studio-3d){scroll-behavior:auto}
.studio-viewer{position:sticky;top:12px;align-self:start;background:var(--white)}
.stage-3d{height:clamp(420px,65dvh,690px)}
@media(max-width:760px){.studio-viewer{position:static}.stage-3d{height:510px}}