/* Apply the finish inside both universes, not only on the landing page. */
.ref-feature-tabs>a.surface-3d,.ref-feature-tabs>a.surface-3d:hover,.ref-feature-tabs>a.surface-3d:focus-visible,.family-content-grid>.ref-panel.surface-3d,.family-content-grid>.ref-panel.surface-3d:hover,.house-content-grid>.ref-panel.surface-3d,.house-content-grid>.ref-panel.surface-3d:hover{transform:perspective(1200px) translateY(var(--lift,0px)) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transition:transform .18s ease-out,box-shadow .25s,border-color .25s}
.ref-feature-tabs>a.surface-3d:hover{--lift:-8px}.ref-feature-tabs>a.surface-3d:active{--lift:-2px}
.family-content-grid>.ref-panel,.house-content-grid>.ref-panel{--tile-light:#5baeff;position:relative;isolation:isolate;overflow:hidden;border-color:color-mix(in srgb,var(--tile-light) 40%,#193045);border-top-color:color-mix(in srgb,var(--tile-light) 64%,#dcecff);background:radial-gradient(ellipse at 90% 0%,color-mix(in srgb,var(--tile-light) 12%,transparent),transparent 70%),linear-gradient(135deg,#112c40,#061621);box-shadow:inset 0 2px #e7f5ff26,inset 1px 0 #b4dbff12,0 4px 0 -1px #03101c,0 12px 27px #0005}
#family-photos{--tile-light:#4caaff}#family-calendar{--tile-light:#f96cb0}#family-ideas{--tile-light:#ac79ff}#family-roots{--tile-light:#44d7d0}#family-wishes{--tile-light:#ff75b6}#family-messages{--tile-light:#66adff}
#smart-home{--tile-light:#58b8ff}#shopping{--tile-light:#39e2c2}#reminders{--tile-light:#b98aff}#meals{--tile-light:#64dbaf}.house-content-grid>.archive-panel{--tile-light:#62b4ff}
.family-content-grid>.ref-panel.surface-3d:hover,.house-content-grid>.ref-panel.surface-3d:hover{--lift:-4px;border-color:var(--tile-light);box-shadow:inset 0 2px #e5f3ff50,0 4px 0 color-mix(in srgb,var(--tile-light) 22%,#04111f),0 23px 43px #0006,0 0 30px color-mix(in srgb,var(--tile-light) 15%,transparent)}
.family-content-grid>.ref-panel::before,.house-content-grid>.ref-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,var(--tile-light),transparent);box-shadow:0 0 13px var(--tile-light)}
.family-content-grid>.ref-panel.surface-3d::after,.house-content-grid>.ref-panel.surface-3d::after,.ref-feature-tabs>a.surface-3d::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:4;opacity:0;background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,0%),#ffffff24,transparent 62%);transition:opacity .2s}
.family-content-grid>.ref-panel.surface-3d:hover::after,.house-content-grid>.ref-panel.surface-3d:hover::after,.ref-feature-tabs>a.surface-3d:hover::after{opacity:1}
.ref-panel>.ref-panel-heading{position:relative;z-index:2}.ref-panel-heading h2{display:flex;align-items:center;gap:10px}.ref-panel-heading h2::before{content:"";width:5px;height:17px;background:var(--tile-light);border-radius:3px;box-shadow:0 0 11px color-mix(in srgb,var(--tile-light) 50%,transparent)}
.ref-panel .compact-empty,.ref-panel .idea-row{position:relative;padding:17px 7px;gap:22px}.ref-panel .compact-empty p,.ref-panel .idea-row p{line-height:1.8;color:#becfe3}
.ref-panel .compact-empty>.neon-icon,.ref-panel .idea-row>.neon-icon,.ref-panel .ref-empty>.neon-icon{position:relative;width:57px;height:57px;border-radius:14px;transform:perspective(450px) rotateX(15deg) rotateY(-16deg);transform-style:preserve-3d;border:1px solid color-mix(in srgb,currentColor 60%,transparent);background:radial-gradient(ellipse at 15% 0%,#ffffff35,transparent 62%),linear-gradient(135deg,color-mix(in srgb,currentColor 24%,#142534),#061523);box-shadow:inset 0 2px #fff5,inset 0 -2px #0004,2px 3px 0 color-mix(in srgb,currentColor 40%,#132232),4px 7px 0 #03111f,8px 13px 17px #0006,0 0 24px color-mix(in srgb,currentColor 15%,transparent);transition:transform .3s,filter .3s;flex-shrink:0}
.ref-panel .compact-empty>.neon-icon::before,.ref-panel .idea-row>.neon-icon::before,.ref-panel .ref-empty>.neon-icon::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:inherit;background:linear-gradient(130deg,#ffffff4f,transparent 45%,transparent 70%,#ffffff11);border-top:1px solid #fff7}
.ref-panel .compact-empty .ui-icon,.ref-panel .idea-row .ui-icon,.ref-panel .ref-empty .ui-icon{width:30px;height:30px;transform:translateZ(12px);filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 12px color-mix(in srgb,currentColor 40%,transparent))}
.ref-panel:hover .compact-empty>.neon-icon,.ref-panel:hover .idea-row>.neon-icon,.ref-panel:hover .ref-empty>.neon-icon{transform:perspective(450px) translateY(-6px) rotateX(5deg) rotateY(-7deg);filter:brightness(1.2)}
.ref-feature-tabs>a:has(.amber){--tile-light:#ffce68}.ref-feature-tabs>a:has(.pink){--tile-light:#fa6eb5}.ref-feature-tabs>a:has(.blue){--tile-light:#5eb7ff}.ref-feature-tabs>a:has(.cyan){--tile-light:#4ee3d0}.ref-feature-tabs>a:has(.violet){--tile-light:#bf8bff}
.ref-feature-tabs>a{background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--tile-light) 24%,transparent),transparent 90%),linear-gradient(140deg,#172b40,#081723);border-color:color-mix(in srgb,var(--tile-light) 55%,#243b53)}
.ref-feature-tabs>a:hover{background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--tile-light) 38%,transparent),transparent 90%),linear-gradient(140deg,#1b344b,#0b1f31)}
.ref-feature-tabs>a:hover .neon-icon{filter:brightness(1.25);transform:perspective(450px) translateY(-7px) rotateX(3deg) rotateY(-5deg) scale(1.07)}
.ref-feature-tabs>a .neon-icon::after{height:14px;bottom:-17px;filter:blur(12px);opacity:.5}
.ref-feature-tabs>a.surface-3d:focus-visible,.ref-panel.surface-3d:focus-within{outline:3px solid var(--tile-light,#bce8ff);outline-offset:4px}
.ref-photo-preview{box-shadow:inset 0 1px #fff3,0 8px 17px #0004;border:1px solid #8eb9e130;transition:box-shadow .3s}.ref-panel:hover .ref-photo-preview{box-shadow:0 12px 22px #0005,0 0 18px color-mix(in srgb,var(--tile-light) 11%,transparent)}
.home-status-tile:hover .neon-icon{transform:translateY(-5px) scale(1.12);filter:drop-shadow(0 0 12px currentColor)}.home-status-tile .neon-icon{transition:transform .25s,filter .25s}
html[data-theme="light"] .family-content-grid>.ref-panel,html[data-theme="light"] .house-content-grid>.ref-panel{background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--tile-light) 5%,#fff),transparent 75%),#fff;border-color:color-mix(in srgb,var(--tile-light) 20%,#b5c8da);box-shadow:inset 0 2px #fff,0 4px 0 #cad9e75c,0 12px 28px #355c7c1c}
html[data-theme="light"] .ref-panel .compact-empty p,html[data-theme="light"] .ref-panel .idea-row p{color:#496680}
html[data-theme="light"] .ref-panel .compact-empty>.neon-icon,html[data-theme="light"] .ref-panel .idea-row>.neon-icon,html[data-theme="light"] .ref-panel .ref-empty>.neon-icon{background:radial-gradient(ellipse at 0% 0%,#fff,transparent 65%),linear-gradient(135deg,#fff,color-mix(in srgb,currentColor 10%,#f0f7fc));border-color:color-mix(in srgb,currentColor 35%,#b4c9db);box-shadow:inset 0 2px #fff,2px 3px 0 color-mix(in srgb,currentColor 25%,#d3dfea),4px 7px 0 #b9cbd94d,8px 12px 17px #3b5d7c26}
html[data-theme="light"] .ref-panel .compact-empty .ui-icon,html[data-theme="light"] .ref-panel .idea-row .ui-icon,html[data-theme="light"] .ref-panel .ref-empty .ui-icon{filter:drop-shadow(0 1px #fff) drop-shadow(0 2px 3px color-mix(in srgb,currentColor 30%,transparent))}
html[data-theme="light"] .ref-feature-tabs>a{background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--tile-light) 10%,#fff),transparent 90%),linear-gradient(#fff,#f1f6fc)}
html[data-theme="light"] .ref-feature-tabs>a:hover{background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--tile-light) 18%,#fff),transparent 90%),linear-gradient(#fff,#e8f1fb)}
html[data-theme="light"] .ref-panel:hover .ref-photo-preview{box-shadow:0 10px 22px #385c7e22}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.ref-feature-tabs>a.surface-3d,.ref-feature-tabs>a.surface-3d:hover{transform:perspective(900px) translateY(var(--lift,0px)) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg))!important}.family-content-grid>.ref-panel.surface-3d,.house-content-grid>.ref-panel.surface-3d{transform:perspective(1400px) translateY(var(--lift,0px)) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg))!important}}
@media(max-width:540px){.ref-panel .compact-empty>.neon-icon,.ref-panel .idea-row>.neon-icon{width:48px;height:48px}.ref-panel .compact-empty,.ref-panel .idea-row{gap:17px}.ref-panel .compact-empty .ui-icon,.ref-panel .idea-row .ui-icon{width:27px;height:27px}}
@media(hover:none),(prefers-reduced-motion:reduce){.ref-feature-tabs>a.surface-3d,.ref-feature-tabs>a.surface-3d:hover,.family-content-grid>.ref-panel.surface-3d,.family-content-grid>.ref-panel.surface-3d:hover,.house-content-grid>.ref-panel.surface-3d,.house-content-grid>.ref-panel.surface-3d:hover{transform:none!important}.ref-panel:hover .compact-empty>.neon-icon,.ref-panel:hover .idea-row>.neon-icon,.ref-panel:hover .ref-empty>.neon-icon,.ref-feature-tabs>a:hover .neon-icon,.home-status-tile:hover .neon-icon{transform:none!important;filter:none;transition:none}.ref-panel .compact-empty>.neon-icon,.ref-panel .idea-row>.neon-icon,.ref-panel .ref-empty>.neon-icon{transition:none}}