/* Applications-only material study: champagne light, mint refraction, joined shells. */
body.glass-interactive{isolation:isolate;background:#f1eee1}
.glass-interactive>.yx-hub,.glass-interactive>.glass-footer{position:relative;z-index:1}
.glass-ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(130deg,#fbf7eb,#e9eee1 52%,#eaddc7)}
.glass-ambient i{position:absolute;inset:-20%;display:block;filter:blur(32px);will-change:transform;animation:glass-ambient-drift 26s ease-in-out infinite alternate}
.glass-ambient i:nth-child(1){background:radial-gradient(ellipse 35% 64% at 18% 40%,#d8b67599,transparent 78%),radial-gradient(ellipse 42% 45% at 78% 78%,#b4d4c8b3,transparent 76%);transform:rotate(-18deg)}
.glass-ambient i:nth-child(2){background:conic-gradient(from 25deg at 48% 52%,transparent 12%,#fffff6d9 21%,transparent 30%,#ebcd9a70 44%,transparent 59%,#d7f0debd 70%,transparent 82%);animation-name:glass-ambient-turn;animation-duration:34s}
.glass-ambient i:nth-child(3){inset:-40%;background:linear-gradient(116deg,transparent 35%,#fffef980 43%,#fffdf5e0 46%,transparent 53%,#d7e8db66 65%,transparent 72%);animation-duration:21s;animation-delay:-9s}
@keyframes glass-ambient-drift{from{transform:translate(-4%,-3%) rotate(-12deg) scale(1)}to{transform:translate(7%,5%) rotate(10deg) scale(1.08)}}
@keyframes glass-ambient-turn{from{transform:translate(4%,-2%) rotate(-18deg)}to{transform:translate(-5%,5%) rotate(22deg)}}
.glass-interactive .yx-hub:before,.glass-interactive .yx-hub:after{display:none}
.glass-interactive .yxh-split{gap:0;align-items:stretch;padding:12px;border:1px solid #fffffff2;border-radius:36px;background:linear-gradient(120deg,#fffefbce,#fff8e794 48%,#d8eee3b3);box-shadow:var(--rim),0 8px 12px #5c604014,0 28px 45px -26px #4f624c80;backdrop-filter:blur(22px) saturate(125%);overflow:hidden}
.glass-interactive .yxh-split>img{align-self:stretch;height:100%;min-height:430px;aspect-ratio:auto;object-fit:cover;border:1px solid #ffffffc9;border-radius:25px;box-shadow:inset 0 1px 2px #fff;transform:none}
.glass-interactive .yxh-split>div{min-width:0;padding:28px 30px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;align-self:center}
.glass-interactive .yxh-list{display:grid;gap:9px;margin:20px 0 24px}
.glass-interactive .yxh-row{position:relative;isolation:isolate;overflow:hidden;grid-template-columns:35px 1fr;gap:12px;padding:15px 14px;border:1px solid #ffffffb3;border-radius:18px;background:linear-gradient(118deg,#fffdf975,#ffffff33 60%,#d7e8db47);box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px #b8c9b826,0 4px 10px -7px #54614c70;transition:transform .3s,box-shadow .3s,background .3s}
.glass-interactive .yxh-row b{display:flex;align-items:center;justify-content:center;align-self:start;min-height:31px;border:1px solid #ffffffe0;border-radius:10px;background:linear-gradient(135deg,#fffef2,#ead8b980 55%,#c9e4d29c);box-shadow:var(--rim),0 4px 7px -4px #5d624c70;font-size:12px;color:#82643c;transition:transform .3s}
.glass-interactive :is(.yxh-band-item,.yxh-card,.yxh-flow>div,.yxh-case){position:relative;isolation:isolate;overflow:hidden;transition:transform .3s,box-shadow .3s}
.glass-interactive :is(.yxh-row,.yxh-band-item,.yxh-card,.yxh-flow>div,.yxh-case)>*{position:relative;z-index:2}
.glass-interactive :is(.yxh-row,.yxh-band-item,.yxh-card,.yxh-flow>div,.yxh-case):before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(ellipse 180px 110px at var(--glass-x,50%) var(--glass-y,50%),#ffffffed 0%,#fff8df85 28%,#d5eddd66 52%,transparent 78%);transition:opacity .3s}
.glass-interactive :is(.yxh-row,.yxh-band-item,.yxh-card,.yxh-flow>div,.yxh-case):after{content:"";position:absolute;z-index:1;inset:-90% -70%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#ffffff08 43%,#ffffffa6 48%,#fffdf2e6 49%,#d3eadd66 51%,transparent 57%);transform:translateX(-55%) rotate(-7deg);opacity:0}
@keyframes glass-sweep{0%{transform:translateX(-48%) rotate(-7deg);opacity:0}18%{opacity:.8}76%{opacity:.65}100%{transform:translateX(48%) rotate(-7deg);opacity:0}}
@media(hover:hover) and (pointer:fine){
 .glass-interactive :is(.yxh-band-item,.yxh-card,.yxh-flow>div,.yxh-case):hover{transform:translateY(-6px);box-shadow:var(--rim),0 9px 12px -8px #57614b55,0 26px 38px -20px #53614499}
 .glass-interactive .yxh-row:hover{transform:perspective(750px) translateY(-2px) rotateY(var(--glass-roll,0deg));background:linear-gradient(115deg,#fffefaaf,#fff8e15c 62%,#d4e8d782);box-shadow:var(--rim),0 10px 17px -12px #54614c99}
 .glass-interactive .yxh-row:hover b{transform:translateY(-1px);box-shadow:var(--rim),0 6px 9px -4px #5d624c70}
 .glass-interactive .yx-hub [data-glass-active]:before{opacity:.9}
 .glass-interactive :is(.yxh-row,.yxh-band-item,.yxh-card,.yxh-flow>div,.yxh-case):hover:after{animation:glass-sweep 1.25s ease-in-out both}
}
.glass-interactive :is(.yxh-row,.yxh-band-item,.yxh-card,.yxh-flow>div,.yxh-case):focus-within{box-shadow:var(--rim),0 0 0 2px #a78e5f66,0 18px 30px -16px #5f624470}
.glass-paused .glass-ambient i{animation-play-state:paused}
@media(max-width:1000px){.glass-interactive .yxh-split>div{padding:24px 20px}.glass-interactive .yxh-row{padding:13px 11px;gap:9px}}
@media(max-width:700px){.glass-interactive .yxh-split{padding:9px;gap:0;border-radius:29px}.glass-interactive .yxh-split>img{min-height:0;height:auto;aspect-ratio:1.4;border-radius:21px}.glass-interactive .yxh-split>div{padding:25px 14px 20px}.glass-ambient i{filter:blur(20px);animation:none;will-change:auto}.glass-interactive .yxh-row{padding:14px 12px}}
@supports not (backdrop-filter:blur(1px)){.glass-interactive .yxh-split{background:#f6f6ea}}
@media(prefers-reduced-transparency:reduce){.glass-interactive .yxh-split,.glass-interactive .yxh-row{background:#faf7ef;backdrop-filter:none}.glass-ambient{display:none}}
@media(prefers-reduced-motion:reduce){.glass-ambient i{animation:none;will-change:auto}.glass-interactive :is(.yxh-row,.yxh-band-item,.yxh-card,.yxh-flow>div,.yxh-case):hover,.glass-interactive .yxh-row:hover b{transform:none}.glass-interactive .yx-hub [data-glass-active]:before{opacity:0}}