:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-quick:cubic-bezier(.2,.8,.2,1)}
.language-switch{display:flex;align-items:center;gap:2px;flex:none;border:1px solid var(--line);padding:3px}
.language-switch a{width:36px;min-height:38px;display:grid;place-items:center;transition:background .25s,color .25s,transform .3s var(--ease-out)}
.language-switch a:hover{background:var(--pale)}
.language-switch a[aria-current]{background:var(--green);color:var(--paper)}
.site-header{gap:22px}.site-header nav{gap:30px}.header-cta{gap:22px}
.button,.header-cta,.stone-compare,.menu-toggle{transition:background .3s,color .3s,border-color .3s,box-shadow .4s,transform .4s var(--ease-out)}
.button svg,.header-cta svg,.stone-compare svg,.hero-caption svg{transition:transform .45s var(--ease-out)}
.button:hover svg,.header-cta:hover svg,.stone-compare:hover svg{transform:translateX(4px)}
.hero-caption:hover svg{transform:translate(3px,-3px)}
.button:active,.header-cta:active{transform:scale(.98)}
@media(hover:hover){.button:hover{transform:translateY(-2px);box-shadow:0 7px 16px #1c2d1512}}
.stone-image>img,.journal-image img,.gallery-card img{transition:transform .85s var(--ease-out),filter .6s}
.gallery-card button:hover img{transform:scale(1.035)}
.filter-tabs{position:relative;isolation:isolate}
.filter-tabs button{position:relative;z-index:1;transition:color .28s,background .28s;white-space:nowrap}
.filter-indicator{position:absolute;top:0;left:0;width:1px;transform-origin:top left;background:var(--green);pointer-events:none;z-index:0;transition:transform .45s var(--ease-out),height .25s}
.motion-tabs button[aria-pressed="true"]{background:transparent;color:var(--paper)}
.motion-tabs button[aria-pressed="false"]:hover{background:#3549360b}
.motion-tabs button[aria-pressed="true"]:hover{background:transparent}
.awaiting-reveal{opacity:0}
.image-dialog::backdrop{animation:backdrop-in .3s ease-out}
.dialog-close{transition:transform .4s var(--ease-out),background .3s}
.dialog-close:hover{transform:rotate(90deg);background:var(--pale)}
.dialog-gallery-info button{transition:background .3s,transform .3s}.dialog-gallery-info button:hover{background:var(--pale);transform:translateY(-2px)}
.care-list details[open] p{animation:content-in .4s var(--ease-out)}
.care-list summary span{transition:transform .35s var(--ease-out)}
.archive-note{border-left:2px solid var(--green);padding:12px 18px;background:var(--pale);}
@keyframes backdrop-in{from{background-color:#19201900;backdrop-filter:blur(0)}to{background-color:#192019ba;backdrop-filter:blur(5px)}}
@keyframes content-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes page-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes page-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
body{animation:page-in .48s var(--ease-out)}
html[lang="vi"] .hero-copy{padding-top:45px}
html[lang="vi"] .page-heading h1{max-width:1100px}
html[lang="vi"] .approach-points{flex-wrap:wrap;row-gap:12px}
@media(max-width:1100px) and (min-width:761px){.site-header{gap:12px}.wordmark{width:auto}.site-header nav{gap:17px}.header-cta{padding:9px 12px;gap:10px}.language-switch a{width:30px;min-height:36px}.hero-copy{padding-right:20px}}
@media(max-width:900px) and (min-width:761px){.header-cta{display:none}.site-header nav{gap:15px}.language-switch{margin-left:auto}}
@media(max-width:760px){
  .site-header{gap:14px}.wordmark{margin-right:auto}.brand-mark{width:27px;height:33px}.header-cta{display:none}
  .language-switch{margin-left:auto}.language-switch a{width:32px;min-height:38px;}
  .site-header nav{display:flex;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-12px);transition:opacity .25s ease-out,transform .4s var(--ease-out),visibility .3s;gap:0}
  .site-header nav.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0)}
  .site-header nav>a{transition:transform .4s var(--ease-out);transform:translateX(-8px)}
  .site-header nav.is-open>a{transform:translateX(0)}
  .site-header nav.is-open>a:nth-child(2){transition-delay:25ms}.site-header nav.is-open>a:nth-child(3){transition-delay:50ms}.site-header nav.is-open>a:nth-child(4){transition-delay:75ms}
  html[lang="vi"] .hero-copy{padding-top:32px}
  html[lang="vi"] .hero-description{margin-top:19px}
  .comparison-panel{min-width:0}.comparison-panel>select{max-width:100%}
  .palette-toolbar{gap:12px}.palette-toolbar .text-link{white-space:nowrap}
  .button{max-width:100%}.filter-tabs{max-width:100%}.footer-top{gap:30px 18px}
}