*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{--ink:#593e32;background:radial-gradient(ellipse at 70% 46%,#fffaf1 0%,#f6f0e6 60%,#efe5d7 100%);color:var(--ink);font-family:MiSans,sans-serif}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #8e6f4e;outline-offset:5px}button:disabled{cursor:wait}[hidden]{display:none!important}header{height:74px;margin:0 3.8vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #a287642b;position:relative;z-index:2}.brands{font-size:13px;letter-spacing:.14em;font-weight:700}.brands span{font-weight:400;margin:0 12px}#back{border:0;background:none;font-size:13px;padding:10px 0}main{height:calc(100svh - 118px);display:grid;grid-template-columns:minmax(330px,.87fr) minmax(0,1.65fr);gap:3vw;padding:0 3.8vw;align-items:center}.copy{max-width:520px;position:relative;z-index:2;padding:16px 0}h1{font:400 clamp(58px,6.5vw,106px)/.88 MiSans,sans-serif;letter-spacing:-.055em;margin:0 0 25px}h1 em{font-weight:400}.lead{font:400 clamp(16px,1.25vw,20px)/1.45 MiSans,sans-serif;max-width:430px;margin:0 0 25px}.body-copy{font-size:clamp(13px,1.02vw,16px);line-height:1.55;color:#796352}.body-copy p{margin:0 0 15px}.body-copy p:last-child{margin-bottom:0}#showcase{height:100%;min-height:0;position:relative}.collection{height:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-content:center;padding:8% 0 7%;row-gap:0}.box-card{position:relative;grid-column:span 2;min-width:0;border:0;padding:0;background:transparent;display:flex;flex-direction:column;justify-content:center;align-items:center}.box-card:nth-child(4){grid-column:2/span 2}.box-card:nth-child(5){grid-column:4/span 2}.box-view{display:block;position:relative;width:100%;height:clamp(130px,20vw,275px);max-height:calc(100% - 46px)}.box-name{display:block;max-width:180px;text-align:center;font:400 clamp(15px,1.25vw,19px)/1.2 MiSans,sans-serif;margin-top:-14px;padding:0 10px;position:relative;z-index:2}.box-name:after{content:'';display:block;width:20px;height:1px;background:#8f775a66;margin:10px auto 0;transition:width .3s}.box-card:hover .box-name:after{width:45px}#scene{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}footer{height:44px;display:flex;align-items:flex-start;justify-content:center;color:#927a62;font-size:12px;letter-spacing:.035em;position:relative;z-index:2}#focus{position:absolute;inset:0;display:flex;flex-direction:column}#focus-box{flex:1;min-height:0;border:0;background:transparent;width:100%;position:relative;z-index:2}#focus-caption{text-align:center;font-size:11px;color:#8b755f;margin:0 0 18px;position:relative;z-index:2}#shades{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;position:relative;z-index:2;padding:0 2% 13px}.shade{border:0;background:none;padding:8px 0;text-align:center;font-size:11px;line-height:1.25;display:flex;align-items:center;flex-direction:column;gap:8px}.shade i{display:block;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px #785b3726}.shade[aria-pressed=true] i{outline:1px solid #795f45;outline-offset:4px}.shade[aria-pressed=true]{color:#402819}.counter{display:block;font-size:11px;letter-spacing:.2em;margin-bottom:25px;color:#987c60}.detail-copy h2{font:400 clamp(34px,4.1vw,64px)/1.05 MiSans,sans-serif;letter-spacing:-.04em;margin:0 0 30px}.quote{font:500 clamp(19px,1.7vw,26px)/1.4 MiSans,sans-serif;margin:0 0 25px;max-width:470px}.description{font:400 clamp(14px,1.15vw,17px)/1.7 MiSans,sans-serif;color:#796352;margin:0}.detail-copy{animation:reveal .45s ease both}@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}#error{position:fixed;inset:45% 20% auto;z-index:5;background:#fff5e3;padding:30px;text-align:center}
@media(max-height:760px) and (min-width:901px){header{height:58px}main{height:calc(100svh - 94px)}footer{height:36px}.copy{padding:8px 0}h1{font-size:clamp(52px,5.8vw,83px);margin-bottom:18px}.lead{font-size:16px;margin-bottom:18px}.body-copy{font-size:13px;line-height:1.45}.body-copy p{margin-bottom:12px}.collection{padding:3% 0}.box-view{height:230px}.detail-copy h2{margin-bottom:20px}.quote{margin-bottom:18px}}
@media(max-width:1100px){header{height:46px;margin:0 5vw}.brands{font-size:10px}main{height:calc(100svh - 77px);display:flex;flex-direction:column;gap:0;padding:0 5vw;align-items:stretch}.copy{max-width:none;flex:0 0 auto;padding:17px 0 0}h1{font-size:45px;line-height:1;letter-spacing:-.05em;margin:0 0 12px}h1 br{display:none}h1 em{margin-left:8px}.lead{font-size:15px;max-width:none;margin-bottom:13px}.body-copy{font-size:12px;line-height:1.42;columns:2;column-gap:20px}.body-copy p{break-inside:avoid;margin:0}#showcase{flex:1;min-height:0}.collection{padding:0;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:1fr 1fr}.box-view{height:100%;max-height:calc(100% - 31px)}.box-name{font-size:13px;margin-top:-9px;max-width:135px;min-height:31px}.box-name:after{display:none}footer{height:31px;font-size:10px}.counter{margin-bottom:10px}.detail-copy h2{font-size:34px;margin-bottom:10px}.quote{font-size:18px;margin-bottom:12px;max-width:none}.description{font-size:13px;line-height:1.5}.detail-copy{padding:15px 0 10px}#focus-caption{font-size:10px;margin-bottom:10px}#shades{gap:5px;padding-bottom:0}.shade{font-size:9px}.shade i{width:18px;height:18px}}
@media(max-width:500px){h1{font-size:39px}.lead{font-size:13px;margin-bottom:10px}.body-copy{font-size:11px;line-height:1.4;column-gap:14px}.copy{padding-top:14px}.box-name{font-size:11px;padding:0 2px}#shades{margin-top:0}.description{font-size:12px}.detail-copy h2{font-size:30px}.quote{font-size:16px}.counter{margin-bottom:8px}#focus-caption{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* v19: centred editorial introduction, one shared confectionery tray below. */
body{background:radial-gradient(ellipse at 50% 64%,#fffbf4 0%,#f7f1e7 62%,#efe5d7 100%)}
header{height:54px;justify-content:center;border:0;margin:0 4vw}#back{position:absolute;left:0}main{height:calc(100svh - 90px);display:flex;flex-direction:column;gap:0;padding:0 4vw;align-items:center;justify-content:center}#intro{max-width:960px;width:100%;padding:8px 0 0;flex:0 0 auto;text-align:center}h1{font-size:clamp(44px,4.1vw,66px);line-height:1.05;letter-spacing:-.045em;margin:0 0 12px}h1 br{display:none}h1 em{margin-left:.13em}.lead{max-width:none;font:400 17px/1.45 MiSans,sans-serif;margin:0 0 24px}.body-copy{font-size:15px;line-height:1.5;color:#796352;columns:auto;text-align:left;max-width:906px;margin:0 auto}.body-copy p{margin:0 0 16px;break-inside:auto}.body-copy p:last-child{margin:0}#showcase{width:min(100%,1380px);height:auto;flex:1;min-height:0;max-height:450px;margin:14px auto 0}.collection{height:100%;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:0;position:relative;align-items:stretch}.box-card,.box-card:nth-child(4),.box-card:nth-child(5){grid-column:auto;justify-content:flex-end;padding:0 0 12px}.box-view{height:calc(100% - 54px);max-height:none;width:100%}.box-name{font:400 17px/1.2 MiSans,sans-serif;max-width:220px;min-height:42px;margin:0;padding:0 6px}.box-name:after{display:none}footer{height:36px;align-items:flex-start;font-size:12px}body:not([data-active]) #showcase:after{content:'';position:absolute;inset:0;pointer-events:none}.detail-copy{flex:0 0 auto;text-align:center;max-width:960px;padding:8px 0 0}.counter{margin-bottom:8px}.detail-copy h2{font-size:38px;margin:0 0 10px}.quote{font-size:19px;line-height:1.35;margin:0 auto 10px;max-width:900px}.description{font-size:14px;line-height:1.5;max-width:880px;margin:0 auto}body[data-active] #showcase{max-height:none;margin-top:0}#focus-caption{margin-bottom:8px}#shades{max-width:800px;width:100%;margin:auto;padding:0 0 6px}.shade{font-size:11px;padding:6px 0}.shade i{width:18px;height:18px}
@media(min-height:900px) and (min-width:901px){#intro{padding-top:30px}.lead{margin-bottom:28px}#showcase{margin-top:25px;max-height:470px}main{justify-content:flex-start}.body-copy{font-size:15px;line-height:1.6}}
@media(max-height:760px) and (min-width:901px){header{height:42px}main{height:calc(100svh - 72px)}footer{height:30px}h1{font-size:45px;margin-bottom:10px}.lead{font-size:15px;margin-bottom:17px}.body-copy{font-size:14px;line-height:1.45}.body-copy p{margin-bottom:12px}#intro{padding-top:2px}#showcase{margin-top:8px;max-height:370px}.box-name{font-size:15px}.detail-copy h2{font-size:30px}.quote{font-size:17px;margin-bottom:7px}.description{font-size:13px}.detail-copy{padding-top:0}}
@media(max-width:900px){header{height:44px}main{height:calc(100svh - 74px);padding:0 5vw;justify-content:flex-start}#intro{padding-top:10px}h1{font-size:40px;margin-bottom:12px}.lead{font-size:14px;margin-bottom:18px}.body-copy{font-size:12px;line-height:1.45;columns:auto}.body-copy p{margin-bottom:12px}#showcase{margin-top:8px;max-height:420px;width:100%}.box-name{font-size:11px;max-width:130px;padding:0 3px}.box-card{padding-bottom:0}.box-view{height:calc(100% - 45px)}footer{height:30px;font-size:10px}.detail-copy h2{font-size:30px}.quote{font-size:16px}.description{font-size:12px}#shades{gap:3px}.shade{font-size:9px}#focus-caption{font-size:10px}}
@media(max-width:500px){h1{font-size:35px}.lead{font-size:13px;margin-bottom:14px}.body-copy{font-size:11px;line-height:1.42}.body-copy p{margin-bottom:10px}.box-name{font-size:9px;overflow-wrap:normal}.box-view{height:calc(100% - 48px)}#showcase{margin-top:0}.detail-copy{padding-top:8px}.detail-copy h2{font-size:27px}.quote{font-size:15px}.description{font-size:11px;line-height:1.4}}
@media(min-width:901px){body:not([data-active]) #showcase{max-height:370px;}body:not([data-active]) main{justify-content:center;}body:not([data-active]) #intro{padding-top:0;}}
/* v20 — readable packaging at desktop scale, no fixed miniature composition. */
@media(min-width:901px){body:not([data-active]) main{justify-content:space-evenly;padding:0 2.5vw;}body:not([data-active]) #intro{max-width:1140px;}body:not([data-active]) h1{font-size:clamp(46px,3.6vw,88px);}body:not([data-active]) .lead{font-size:clamp(15px,1.05vw,23px);margin-bottom:clamp(16px,1.4vh,25px);}body:not([data-active]) .body-copy{max-width:1100px;font-size:clamp(14px,.95vw,20px);line-height:1.5;}body:not([data-active]) #showcase{width:100%;max-width:2000px;max-height:none;flex:0 1 auto;height:clamp(280px,42vh,620px);margin-top:0;}body:not([data-active]) .box-name{font-size:clamp(16px,1.1vw,24px);line-height:1.2;}header{height:clamp(44px,5vh,70px);}main{height:calc(100svh - clamp(44px,5vh,70px) - 36px);}.brands{font-size:clamp(12px,.8vw,17px);}footer{font-size:clamp(12px,.8vw,16px);}}
@media(min-width:901px) and (max-height:800px){body:not([data-active]) #showcase{height:300px;}body:not([data-active]) .body-copy{font-size:14px;line-height:1.4;}body:not([data-active]) h1{font-size:45px;}body:not([data-active]) .lead{font-size:15px;margin-bottom:16px;}}
/* v21 — open boxes in a shallow arc, as in the supplied reference. */
body:not([data-active]) main{justify-content:flex-start;}
body:not([data-active]) #intro{padding-top:18px;}
body:not([data-active]) #showcase{flex:1;height:auto;max-height:650px;margin-top:12px;}
/* v31: supplied MiSans throughout the interface and packaging. */
h1,h1 em,.detail-copy h2{font-family:MiSans,sans-serif;font-style:normal;font-weight:500;letter-spacing:-.035em}.quote{font-style:normal;font-weight:500}.brands{display:flex;align-items:center;gap:18px;letter-spacing:0}.brands span{margin:0;font-size:16px}.brands img{display:block;object-fit:contain}.dreame-logo{width:138px;height:20px}.timeout-logo{width:77px;height:37px}@media(max-width:500px){.dreame-logo{width:105px;height:16px}.timeout-logo{width:61px;height:29px}.brands{gap:12px}#back{font-size:10px}}
h1 em{margin-left:.22em}
/* v33 — unified editorial layout matched to the supplied first screen. */
body{--ink:#292724;background:radial-gradient(ellipse at 50% 65%,#fffefa 0%,#faf7f2 61%,#efe1d1 100%);font-family:MiSans,sans-serif;color:var(--ink)}header{height:62px}.brands{gap:19px}.dreame-logo{width:110px;height:auto}.timeout-logo{width:65px;height:auto}.brands span{font:400 20px MiSans}
body:not([data-active]) #intro{max-width:1100px;padding-top:28px}body:not([data-active]) h1{font:500 clamp(44px,3.7vw,66px)/1.12 MiSans,sans-serif;letter-spacing:-.035em;margin:0 0 14px}body:not([data-active]) .lead{font:400 16px/1.5 MiSans,sans-serif;color:#292724;margin:0 auto 30px;max-width:900px}body:not([data-active]) .body-copy{font:400 14px/1.5 MiSans,sans-serif;color:#686159;max-width:800px;text-align:center}body:not([data-active]) .body-copy p{margin-bottom:18px}body:not([data-active]) #showcase{width:100%;max-width:1580px;margin-top:18px;max-height:none;flex:1}main{height:calc(100svh - 90px)}footer{height:28px;align-items:center;justify-content:center;font:400 11px/1.4 MiSans,sans-serif;letter-spacing:0;color:#927c65}.detail-copy{display:none!important}body[data-active] header{height:38px}body[data-active] header .brands{visibility:hidden}body[data-active] main{height:calc(100svh - 66px);padding:0 4vw}body[data-active] #showcase{width:100%;max-width:none;max-height:none;flex:1;margin:0}#focus-caption{display:none!important}#shades{width:680px;max-width:70vw;padding:8px 0 7px;margin:0 auto;flex-shrink:0}.shade{font:400 10px/1.3 MiSans,sans-serif;gap:7px;padding:5px 0}.shade i{width:17px;height:17px}#focus{padding-bottom:0}#plans-next{position:fixed;right:4vw;bottom:48px;margin:0}#hint{font:inherit;color:inherit}#back{font:400 11px/1.4 MiSans,sans-serif;color:#99774b}
@media(max-height:800px) and (min-width:901px){header{height:50px}main{height:calc(100svh - 78px)}body:not([data-active]) #intro{padding-top:17px}body:not([data-active]) h1{font-size:48px}body:not([data-active]) .lead{font-size:15px;margin-bottom:22px}body:not([data-active]) .body-copy{font-size:13px;line-height:1.45;max-width:760px}body:not([data-active]) .body-copy p{margin-bottom:14px}}
@media(max-width:900px){header{height:50px}main{height:calc(100svh - 78px)}body:not([data-active]) #intro{padding-top:14px}body:not([data-active]) h1{font-size:38px}body:not([data-active]) .lead{font-size:13px;margin-bottom:18px}body:not([data-active]) .body-copy{font-size:11px;line-height:1.4}body:not([data-active]) .body-copy p{margin-bottom:12px}#shades{max-width:95%;width:100%}.shade{font-size:9px}#plans-next{position:relative;right:auto;bottom:auto;order:2;margin:7px auto 8px;align-self:center}.dreame-logo{width:100px}.timeout-logo{width:59px}footer{font-size:10px}}
/* v34 — one persistent header/footer and fluid type. */
:root{--header-h:76px;--footer-h:36px;--hint-size:clamp(11px,.78vw,20px)}
header,body[data-active] header{height:var(--header-h);margin:0 4vw;z-index:10}
header .brands,body[data-active] header .brands{visibility:visible;height:100%;display:flex;align-items:center;justify-content:center}
.brands .dreame-logo{width:clamp(100px,6.4vw,164px)}.brands .timeout-logo{width:clamp(60px,3.8vw,98px)}
main,body[data-active] main{height:calc(100svh - var(--header-h) - var(--footer-h));padding:0 4vw}
body:not([data-active]) #intro{max-width:min(94vw,1700px);padding-top:clamp(12px,2vh,32px)}
body:not([data-active]) h1{font-size:clamp(44px,3.8vw,98px)}
body:not([data-active]) .lead{font-size:clamp(16px,1.13vw,29px);max-width:72vw;line-height:1.45;margin-bottom:clamp(20px,2.7vh,38px)}
body:not([data-active]) .body-copy{font-size:clamp(14px,.97vw,25px);max-width:min(65vw,1600px);line-height:1.5}
body:not([data-active]) #showcase{width:min(100%,88vw);max-width:none}
footer,body[data-screen=plans] footer{position:fixed;left:0;right:0;bottom:0;height:var(--footer-h);display:flex!important;align-items:center;justify-content:center;z-index:10;pointer-events:none;font:400 var(--hint-size)/1.4 MiSans,sans-serif;letter-spacing:0;color:#927c65}
#back{font-size:clamp(11px,.85vw,20px)}
#return-backdrop{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
body[data-active] .shade{font-size:clamp(10px,.7vw,18px)}
#shades{width:min(48vw,1100px);max-width:none}
@media(max-width:900px){:root{--header-h:100px;--footer-h:32px}header .brands,body[data-active] header .brands{height:40px}.brands .dreame-logo{width:100px}.brands .timeout-logo{width:60px}#back{top:49px}body:not([data-active]) .lead{font-size:14px;max-width:100%}body:not([data-active]) .body-copy{font-size:12px;max-width:100%}body:not([data-active]) #intro{padding-top:4px}body:not([data-active]) h1{font-size:38px}#shades{width:100%;max-width:100%}body:not([data-active]) #showcase{width:100%}}
/* Loading ends only after assets and first WebGL frame are ready. */
#preloader{position:fixed;inset:0;z-index:100;background:#faf7f2;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;color:#80654c;transition:opacity .35s ease}
#preloader.done{opacity:0;pointer-events:none}.loader-name{font:500 12px/1.3 MiSans,sans-serif;letter-spacing:.16em}.loader-line{width:116px;height:1px;background:#dcd0bf;position:relative;overflow:hidden}.loader-line:after{content:'';position:absolute;left:-35%;width:35%;height:100%;background:#9b7648;animation:loading-line 1.3s ease-in-out infinite}#loader-copy{font:400 12px/1.5 MiSans,sans-serif}.loading>header,.loading>main,.loading>footer,.loading>#scene{visibility:hidden}
@keyframes loading-line{to{left:100%}}@media(prefers-reduced-motion:reduce){.loader-line:after{animation:none;left:32%}}
/* v36 — loader branding and shared hint spacing. */
:root{--hint-size:clamp(10px,.65vw,16px)}
footer,body[data-screen=plans] footer{bottom:14px}
#preloader .loader-brands{position:static;transform:none;height:auto;visibility:visible;gap:19px}
#preloader .loader-line{height:3px;border-radius:3px}
@media(max-width:560px){footer,body[data-screen=plans] footer{bottom:10px}}