.color-selection{width:100vw;height:100vh;position:relative;overflow:hidden;z-index:2;background:#fff}@media (max-width: 768px){.color-selection{height:100svh;min-height:100svh}}.color-selection-room{width:100%;height:100%;background-image:url(/home/background.png);background-size:cover;background-position:top;background-repeat:no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative;padding-bottom:19vh;z-index:2}.color-selection-content{text-align:center;z-index:10;padding:32px;width:100%;display:flex;flex-direction:column;align-items:center;opacity:1}.color-selection-content.color-selection-content--revealing{opacity:.2;transition:opacity .2s ease-out}.color-selection-content--revealed{z-index:12;opacity:1;animation:contentFadeIn .6s ease-out}@keyframes contentFadeIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.color-selection-title{font-family:Poppins,sans-serif;font-size:3.5rem;font-weight:300;color:#2c3e50;margin-bottom:16px;letter-spacing:-.02em;position:absolute;top:5vh;left:50%;transform:translate(-50%);width:100%;text-align:center;text-shadow:0 2px 10px rgba(255,255,255,.8);pointer-events:none}.color-selection-subtitle{font-size:1.25rem;color:#4a3426;margin-bottom:32px;opacity:.9;position:absolute;top:14vh;left:50%;transform:translate(-50%);width:100%;text-align:center;text-shadow:0 1px 5px rgba(255,255,255,.8);pointer-events:none}.color-selection-logo{max-width:200px;height:auto;margin-bottom:32px;position:absolute;top:24vh;left:50%;transform:translate(-50%);z-index:10;filter:drop-shadow(0 2px 8px rgba(0,0,0,.1));pointer-events:none}.paint-cans-container{display:flex;gap:30px;justify-content:center;align-items:flex-end;flex-wrap:nowrap;position:fixed;bottom:70px;left:50%;transform:translate(-50%);z-index:5;padding-bottom:0;width:auto}.paint-can-wrapper{display:flex;flex-direction:column;align-items:center;gap:35px;animation:fadeInScaleUp .6s ease-out backwards}.paint-can-wrapper:nth-child(1){animation-delay:.3s}.paint-can-wrapper:nth-child(2){animation-delay:.5s}.paint-can-wrapper:nth-child(3){animation-delay:.7s}@keyframes fadeInScaleUp{0%{opacity:0;transform:translateY(30px) scale(.8)}60%{transform:translateY(-5px) scale(1.05)}to{opacity:1;transform:translateY(0) scale(1)}}.paint-cans-table-container{max-height:25vh}@media (max-width: 768px){.paint-cans-table-container{max-height:25svh}}.paint-cans-table{position:fixed;bottom:-195px;left:50%;transform:translate(-50%);width:580px;max-width:90vw;z-index:5;pointer-events:none;animation:slideUpFadeIn .8s ease-out}@keyframes slideUpFadeIn{0%{opacity:0;transform:translate(-50%) translateY(50px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.paint-can{background:none;border:none;cursor:pointer;position:relative;padding:0;transition:transform .3s ease;outline:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;z-index:2}.paint-can:hover,.paint-can:active{transform:translateY(-10px) scale(1.05)}.paint-can-label{position:absolute;top:210px;left:50%;transform:translate(-50%);padding:8px 16px;border-radius:4px;color:#fff;font-family:Poppins,sans-serif;font-size:.9rem;font-weight:500;white-space:nowrap;box-shadow:0 2px 8px #0003}.paint-can-label-image{width:130px;height:auto;display:block;pointer-events:none;-webkit-user-select:none;user-select:none;animation:fadeInSlideUp .5s ease-out backwards}.paint-can-wrapper:nth-child(1) .paint-can-label-image{animation-delay:.6s}.paint-can-wrapper:nth-child(2) .paint-can-label-image{animation-delay:.8s}.paint-can-wrapper:nth-child(3) .paint-can-label-image{animation-delay:1s}@keyframes fadeInSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@font-face{font-family:ColourSansBoldVNU;src:url(/fonts/ColourSansBoldVNU.otf) format("opentype");font-weight:700;font-style:normal}.jun-pham-container{position:fixed;bottom:0;z-index:4;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none;animation:fadeIn .6s ease-out .9s backwards}.jun-pham-image{height:auto;max-height:100vh;width:auto;max-width:40vw;object-fit:contain;object-position:bottom left;transform:translateY(25%)}@media (max-width: 768px){.jun-pham-image{max-height:100svh}}.color-selection-instruction{position:fixed;width:610px;height:44px;left:50%;transform:translate(-50%);bottom:max(0px,env(safe-area-inset-bottom));font-family:ColourSansBoldVNU,sans-serif;font-style:normal;font-weight:700;font-size:20px;line-height:24px;text-align:center;color:#313748;margin:0;padding:0;z-index:6;pointer-events:none;animation:fadeIn .6s ease-out 1.2s backwards}.paint-can-name{display:block}.paint-can-rhythm-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;opacity:1;pointer-events:none;filter:brightness(0) invert(1) drop-shadow(0 0 8px rgba(135,206,250,.8)) drop-shadow(0 0 12px rgba(135,206,250,.6)) drop-shadow(0 0 16px rgba(135,206,250,.4));animation:rhythmGlow 2s ease-in-out infinite}@keyframes rhythmGlow{0%,to{filter:brightness(0) invert(1) drop-shadow(0 0 8px rgba(135,206,250,.8)) drop-shadow(0 0 12px rgba(135,206,250,.6)) drop-shadow(0 0 16px rgba(135,206,250,.4))}50%{filter:brightness(0) invert(1) drop-shadow(0 0 12px rgba(135,206,250,1)) drop-shadow(0 0 18px rgba(135,206,250,.8)) drop-shadow(0 0 24px rgba(135,206,250,.6))}}.paint-can-handle{position:absolute;top:-18px;left:50%;transform:translate(-50%);width:60px;height:30px;border:4px solid var(--primary-color);border-bottom:none;border-radius:30px 30px 0 0;background:transparent}.paint-can-image{width:140px;height:170px;display:block;object-fit:cover;object-position:center;transition:filter .3s ease}.paint-can:hover .paint-can-image{filter:none}.paint-can-shadow{display:none}@media (max-width: 768px){.color-selection-room{background-image:url(/home/background_mobile.png)}.paint-cans-table{bottom:-5px}.color-selection-title{font-size:2.5rem;top:4vh}.color-selection-subtitle{font-size:1rem;margin-bottom:48px;top:10vh}.color-selection-logo{max-width:150px;top:22vh}.jun-pham-image{max-width:50vw;max-height:75vh}.jun-pham-label{left:-160px;top:18%}.jun-pham-name{font-size:20px}.jun-pham-title{font-size:16px}.paint-cans-container{gap:32px;bottom:max(180px,calc(180px + env(safe-area-inset-bottom)));flex-wrap:nowrap}.paint-can-image{width:140px;height:155px}.paint-can-handle{width:46px;height:23px;top:-14px}.paint-can-label{top:160px}.paint-can-label-image{width:120px}.color-selection-instruction{position:fixed;width:auto;max-width:90%;height:auto;left:50%;transform:translate(-50%);bottom:max(105px,calc(105px + env(safe-area-inset-bottom)));font-size:18px;line-height:22px}.paint-can-shadow{width:90px;bottom:-10px}}@media (max-width: 480px){.color-selection-title{font-size:2rem;top:3vh}.color-selection-subtitle{font-size:.9rem;top:8vh}.color-selection-logo{max-width:120px;top:20vh}.jun-pham-container{bottom:60px;right:0;transform:none}.jun-pham-image{max-width:70vw;max-height:65vh}.paint-cans-container{flex-direction:row;flex-wrap:nowrap;gap:12px;bottom:max(70px,calc(70px + env(safe-area-inset-bottom)))}.paint-cans-table{max-width:380px;bottom:-100px}.paint-can-wrapper{gap:20px}.paint-can-image{width:100px;height:111px}.paint-can-handle{width:33px;height:16px;top:-10px}.paint-can-label{top:115px;font-size:.7rem;padding:4px 8px}.paint-can-label-image{width:90px}.color-selection-instruction{position:fixed;width:auto;max-width:90%;height:auto;left:50%;transform:translate(-50%);bottom:max(10px,env(safe-area-inset-bottom));font-size:13px;line-height:20px;white-space:normal}.paint-can-shadow{width:60px;bottom:-6px}}@media (min-width: 768px) and (max-width: 1023px){.color-selection-title{font-size:3rem;top:4.5vh}.color-selection-subtitle{font-size:1.1rem;top:12vh;margin-bottom:40px}.color-selection-logo{max-width:170px;top:23vh}.jun-pham-container{left:50%}.jun-pham-image{max-width:50vw;max-height:80vh}.jun-pham-label{left:-150px;top:17%}.jun-pham-name{font-size:22px}.jun-pham-title{font-size:17px}.paint-cans-container{gap:30px;bottom:max(88px,calc(88px + env(safe-area-inset-bottom)))}.paint-cans-table{bottom:-150px;width:520px}.paint-can-wrapper{gap:35px}.paint-can-image{width:100px;height:130px}.paint-can-handle{width:52px;height:26px;top:-16px}.paint-can-label{top:180px}.paint-can-label-image{width:105px}.color-selection-instruction{font-size:16px;line-height:23px;bottom:max(10px,env(safe-area-inset-bottom))}.paint-can-shadow{width:100px;bottom:-12px}}@media (min-width: 1024px) and (max-width: 1440px){.color-selection-title{font-size:3.25rem}.color-selection-subtitle{font-size:1.15rem}.color-selection-logo{max-width:185px}.jun-pham-image{max-width:600px}.paint-cans-container{gap:30px}.paint-can-image{width:140px;height:155px}.paint-can-handle{width:55px;height:27px}.paint-can-label-image{width:130px}}@media (min-width: 1441px){.color-selection-content{max-width:1440px;margin:0 auto}.color-selection-title,.color-selection-subtitle{max-width:1440px;left:50%;transform:translate(-50%)}.color-selection-logo{left:50%;transform:translate(-50%)}.jun-pham-image{max-width:600px}.paint-cans-container{max-width:1440px;left:50%;transform:translate(-50%)}}@media (max-height: 600px){.paint-cans-container{gap:30px;bottom:max(75px,calc(75px + env(safe-area-inset-bottom)))}.paint-cans-table{bottom:-150px;width:475px}.paint-can-wrapper{gap:20px}.paint-can-image{width:100px;height:130px}.paint-can-handle{width:52px;height:26px;top:-16px}.paint-can-label{top:180px}.paint-can-label-image{width:105px}.color-selection-instruction{font-size:16px;line-height:23px;bottom:max(0px,env(safe-area-inset-bottom))}.paint-can-shadow{width:100px;bottom:-12px}}.image-generation{width:100vw;height:100vh;position:relative;overflow:hidden}@media (max-width: 768px){.image-generation{height:100svh;min-height:100svh}}.room-background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--primary-color);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:1}.room-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,#ffffff0d,#0000001a 40%,#0000004d);pointer-events:none}.room-background:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse 80% 60% at center,transparent 0%,transparent 50%,rgba(0,0,0,.2) 100%);pointer-events:none}.image-generation-content{position:relative;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;z-index:10;padding:32px 32px 48px;text-align:center}.result-state{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.result-title{font-family:Poppins,sans-serif;font-size:2.5rem;font-weight:400;margin-bottom:24px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3)}.share-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}.share-button{padding:12px 24px;border:2px solid white;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border-radius:8px;font-size:1rem;font-weight:500;font-family:Poppins,sans-serif;cursor:pointer;transition:all .3s ease;outline:none;min-width:160px;box-shadow:0 4px 12px #0003}.share-button:hover{background:#fff;color:var(--primary-color);transform:translateY(-2px)}.share-button:active{transform:translateY(0)}.share-button:focus-visible{outline:3px solid var(--accent-color);outline-offset:2px}.share-facebook:hover{background:#1877f2;border-color:#1877f2;color:#fff}.share-instagram:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);border-color:transparent;color:#fff}.start-over-button{padding:12px 32px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border:2px solid rgba(255,255,255,.5);border-radius:8px;font-size:.875rem;font-weight:500;font-family:Inter,sans-serif;cursor:pointer;transition:all .3s ease;outline:none;box-shadow:0 4px 12px #0003}.start-over-button:hover{background:#ffffff1a;border-color:#fff}.start-over-button:focus-visible{outline:3px solid var(--accent-color);outline-offset:2px}.error-state{color:#fff;text-align:center}.error-state h2{font-family:Poppins,sans-serif;font-size:2rem;margin-bottom:16px}.error-state button{margin-top:24px;padding:12px 32px;background:#fff;color:var(--primary-color);border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease}.error-state button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}@media (max-width: 480px){.result-title{font-size:1.5rem;margin-bottom:20px}.image-generation-content{padding:20px 12px 24px}.share-buttons{flex-direction:column;gap:12px;margin-bottom:20px}.share-button{width:100%;padding:10px 20px;font-size:.9rem;min-width:auto}.start-over-button{padding:10px 24px;font-size:.8rem}.error-state h2{font-size:1.5rem;margin-bottom:12px}.error-state button{padding:10px 24px;font-size:.9rem;margin-top:20px}}@media (min-width: 481px) and (max-width: 767px){.result-title{font-size:1.75rem;margin-bottom:22px}.image-generation-content{padding:24px 16px 32px}.share-buttons{flex-direction:column;gap:14px;margin-bottom:22px}.share-button{width:100%;padding:11px 22px;font-size:.95rem}.start-over-button{padding:11px 28px;font-size:.85rem}.error-state h2{font-size:1.75rem}}@media (min-width: 768px) and (max-width: 1023px){.result-title{font-size:2.25rem;margin-bottom:22px}.image-generation-content{padding:28px 20px 40px}.share-buttons{gap:14px;margin-bottom:22px}.share-button{padding:11px 22px;font-size:.95rem;min-width:150px}.start-over-button{padding:11px 30px;font-size:.9rem}.error-state h2{font-size:2.25rem}}@media (min-width: 1024px) and (max-width: 1440px){.result-title{font-size:2.35rem}.image-generation-content{padding:30px 24px 44px}.share-button{min-width:155px}}@media (min-width: 1441px){.image-generation-content{max-width:1440px;margin:0 auto;padding-left:calc((100vw - 1440px)/2 + 32px);padding-right:calc((100vw - 1440px)/2 + 32px)}.result-title,.share-buttons,.start-over-button{max-width:1440px;margin-left:auto;margin-right:auto}}