:root{
--bg-1: #ffeef4;
--bg-2: #fff7fb;
--accent: #ff8fb1;
--accent-glow: rgba(255,143,177,0.6);
--accent-2: #9bd1ff;
--line: rgba(0,0,0,0.08);
--glass: rgba(255,255,255,0.6);
--shadow: rgba(0,0,0,0.06);
}


*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: 'Nunito', system-ui;
background: linear-gradient(180deg,var(--bg-1),var(--bg-2));
display:flex;
align-items:center;
justify-content:center;
padding:3rem 1rem;
color:#3a2b3a;
}


.page{
width:100%;
max-width:420px;
background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.55));
border-radius:18px;
padding:28px;
box-shadow: 0 10px 30px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.6);
border-top: 6px solid rgba(255,255,255,0.9);
position:relative;
overflow:hidden;
outline: 2px solid var(--line);
}


.page::before,
.page::after{
content:'';
position:absolute;
inset:10px;
border-radius:14px;
pointer-events:none;
}
.page::before{
border:1px dashed rgba(58,43,58,0.06);
}
.page::after{
inset:14px;
border:1px solid rgba(58,43,58,0.03);
}


.random-pic-wrapper {
display: flex;
justify-content: center;
margin: 2rem 0;
}
.random-pic-wrapper img {
max-width: 90%;
height: auto;
border-radius: 12px;
}


.brand{text-align:center;margin-bottom:18px;}
.logo-line{
font-family: 'Press Start 2P', monospace;
font-size:12px;
letter-spacing:2px;
color:var(--accent-2);
}
.title{
margin:.35rem 0 0;
font-weight:600;
font-size:18px;
text-transform:lowercase;
letter-spacing:1px;
}
.subtitle{
margin:6px 0 0;
font-size:12px;
opacity:0.8;
}


/* BUTTON TRANSFORM */
.links{
display:flex;
flex-direction:column;
gap:0.9rem;
margin: 1.8rem 0;
}


.btn{
position:relative;
display:block;
padding:0.9rem 1.2rem;
text-align:center;
border-radius:12px;
background: var(--accent);
color:white;
font-weight:600;
text-decoration:none;
letter-spacing:0.5px;
box-shadow:0 4px 12px rgba(255,143,177,0.3);
overflow:hidden;
transition: transform 180ms ease, box-shadow 240ms ease;
}
.btn:hover{
transform: translateY(-3px);
box-shadow:0 6px 18px rgba(255,143,177,0.5);
}


/* soft glowing pink animation */
@keyframes glow{
0% { box-shadow: 0 0 6px var(--accent-glow); }
50% { box-shadow: 0 0 12px var(--accent-glow); }
100% { box-shadow: 0 0 6px var(--accent-glow); }
}
.btn{
animation: glow 2.6s ease-in-out infinite;
}


/* shine layer */
.btn .shine{
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:none;
}