/* Lune case: the app screen and the night panel, in the app's own colours (product mockup). */
.lune-screen{position:absolute;left:212px;top:32px;width:390px;height:844px;transform:scale(.677);transform-origin:0 0;border-radius:36px;overflow:hidden;background:#000;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black)}
.lune-screen canvas{position:absolute;inset:0;width:390px;height:844px}
.lune-screen .brand{position:absolute;left:0;right:0;top:360.5px;display:flex;flex-direction:column;align-items:center;opacity:0}
.lune-screen .brand svg{display:block}
.lune-screen .tag{margin-top:17px;font:400 12px/15px 'Albert Sans', var(--sans);letter-spacing:4.8px;text-transform:uppercase;color:#fffaf0;padding-left:4.8px}
.lune-screen .say{position:absolute;left:35.5px;width:319px;top:573.5px;text-align:center;font:400 32px/40px Tinos, Georgia, serif;color:#fffaf0;opacity:0}
.lune-screen .line{position:absolute;left:32px;right:32px;bottom:180px;display:flex;flex-wrap:wrap;column-gap:4.5px;max-width:85%;font:400 16px/24px Geist, var(--sans);color:rgba(255,255,255,.6)}
.lune-screen .line span,.lune-screen .acts>*{opacity:0;will-change:transform,opacity}
.lune-screen .acts{position:absolute;left:24px;right:24px;bottom:40px;display:flex;flex-direction:column;gap:16px}
.lune-screen .btn{height:52px;border-radius:12px;background:#fff;color:#000;display:grid;place-items:center;font:500 16px/1 Geist, var(--sans)}
.lune-screen .lnk{height:52px;display:grid;place-items:center;font:500 16px/1 Geist, var(--sans);color:#fff}
.lune-screen .fade{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .9s ease;pointer-events:none}
[data-demo^="lune-"] canvas{position:absolute;left:0;top:0}
[data-demo^="lune-"] .cap{position:absolute;text-align:center;font:600 10px/14px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);transition:color .65s cubic-bezier(.2,.8,.2,1)}
[data-demo^="lune-"] .cap small{display:block;margin-top:4px;font:400 11px/16px var(--sans);letter-spacing:0;text-transform:none;color:rgba(255,255,255,.3);transition:color .65s cubic-bezier(.2,.8,.2,1)}
[data-demo^="lune-"] .cap.on{color:#fff}
[data-demo^="lune-"] .cap.on small{color:rgba(255,255,255,.6)}
[data-demo="lune-family"], [data-demo="lune-sizes"] { background: #000; }