body{
    margin:0;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#e9ddff; /* light purple */
    font-family:Arial;
    overflow:hidden;
}

.app{
    position:relative;
}

/* CALCULATOR DEVICE LOOK */
.calc{
    width:340px;
    padding:18px;
    border-radius:25px;
    background:linear-gradient(145deg,#f3ecff,#dccbff);
    box-shadow: 12px 12px 25px #c7b3ff,
                -12px -12px 25px #ffffff;
}

/* SCREEN */
.screen{
    height:110px;
    border-radius:18px;
    padding:12px;
    margin-bottom:15px;
    background:#f7f2ff;
    box-shadow: inset 6px 6px 12px #c9b8f0,
                inset -6px -6px 12px #ffffff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

#history{
    font-size:12px;
    color:#7b6aa8;
    height:20px;
    overflow:hidden;
}

#display{
    font-size:30px;
    text-align:right;
    color:#3a2b66;
}

/* BUTTON GRID */
.buttons{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

button{
    border:none;
    border-radius:14px;
    padding:14px;
    cursor:pointer;
    background:linear-gradient(145deg,#ffffff,#e3d6ff);
    box-shadow: 5px 5px 12px #c7b3ff,
                -5px -5px 12px #ffffff;
    font-size:14px;
    transition:0.15s;
}

button:active{
    transform:scale(0.96);
    box-shadow: inset 4px 4px 10px #c7b3ff,
                inset -4px -4px 10px #ffffff;
}

.func{
    background:linear-gradient(145deg,#ffd6f3,#ffbde6);
}

.equal{
    grid-column:span 2;
    background:linear-gradient(145deg,#b7f3ff,#86e6ff);
}

/* DRAGGABLE KUROMI STICKERS */
.sticker{
    position:absolute;
    width:110px;
    padding:10px;
    border-radius:18px;
    background:linear-gradient(145deg,#ffffff,#e7d9ff);
    box-shadow: 6px 6px 15px #c7b3ff,
                -6px -6px 15px #ffffff;
    cursor:grab;
    user-select:none;
    font-weight:bold;
    color:#4b3b78;
    text-align:center;
}

.sticker:active{
    cursor:grabbing;
}